Bienvenido al curso de JavaScript para principiantes de MDN. En este primer artículo vamos a conocer JavaScript desde un nivel muy general, contestando las preguntas ¿Qué es? y ¿Qué hace?, con el propósito de que te sientas a gusto al usar JavaScript.
JavaScript es un lenguaje de programación que te permite realizar actividades complejas en una página web — cada vez más una página web hace más cosas que sólo mostrar información estática — como enseñar actualizaciones de contenido en el instante, interactuar con mapas, animaciones gráficas 2D/3D etc. — puedes estar seguro que JavaScript está implicado. Es la tercera capa del pastel de los estándares en las tecnologías para la página web, 2 de las cuales son (y), hablaremos de ellas más adelante con más detalle en otra una parte de nuestra Área de Aprendizaje.
Las tres capas se complementan una con la otra. Vamos a agregar un simple texto a la etiqueta como ejemplo. Podemos usar HTML para dar estructura y propósito:
Agregamos CSS para hacer que se vea agradable:
y finalmente añadimos JavaScript para incorporar comportamiento dinámico:
Da click en el texto para ver qué sucede (también puedes encontrar la demostración en GitHub) ve elo!
JavaScript puede hacer muchas cosas más - Vamos a explorar con más detalles.
El núcleo de JavaScript consiste en características comunes de programación que te permiten hacer cosas como:
Hay algo aun más apasionante, no obstante es la funcionalidad construida por encima del núcleo del lenguaje de JavaScript. Llamada
Interfaz de programación en aplicaciones -
Application Programming Interfaces(
API's) proveyendo superpoderes para emplear en tú código JavaScript.
Los APIS son inserciones de líneas, incluso bloques gigantes de código listos para emplear que permiten a un desarrollador incorporarlo a programas que de cualquier otra forma podría ser difícil o bien incluso imposible de concluir. Así como las herramientas para construir una casa, es exactamente lo mismo para las cosas de programación – Es mucho más fácil tomar los paneles que estén cortados y atornillarlos para hacer un estante de libros, puesto que es más laborioso diseñarlo por ti, ir y localizar la madera correcta, cortarla del tamaño adecuado y lijarla, buscar los tornillos del tamaño correcto y acoplarla para hacer un anaquel de libros.
Generalmente los API's se dividen en dos categorías:
Los Navegadores APIs (Browser APIs)son construidos dentro de tu buscador web, y son capaces de exponer información desde la cercanía en base al entorno de tu computador, o bien hacer cosas complejas. Por ejemplo:
Nota: Muchos de los tutoriales anteriores no funcionan en buscadores viejos – cuando practicamos, es buena idea usar un navegador actualizado, como Firefox, Chrome, Edge o bien Opera para hacer marchar el código, estima que necesitarás usar elen más detalle cuando llegues a la parte de entregar tu código desarrollado (Código real que clientes reales usaran).
APIs de Terceras personas,por determinado no son construidos en el navegador, y generalmente tienes que lograr su código y también información de alguna parte de la Web, por ejemplo:
Nota: Estas APIs son avanzadas, y por lo tanto en este módulo no serán explicadas, puedes encontrar mucha más información sobre esto en nuestro.
¡Hay incluso muchas más APIs! no obstante, no te emociones muy rápido. Puesto que no tendrás la capacidad de edificar en tan sólo veinticuatro horas de estar estudiando JavaScript el siguiente Facebook, Instagram o Google Maps – Existen muchos conceptos básicos aún por ver. Y es por eso que estás aquí – ¡Así que sigamos adelante!
En este apartado, en la actualidad comenzaremos a ver varias líneas de código, y mientras hacemos eso vamos explorando lo que hoy en día está pasando cuando haces funcionar tu código JavaScript en tu página Web.
Hagamos un breve recordatorio del historial de lo que pasa cuando cargas una página web en tu navegador (primero hablamos acerca de
en nuestro artículo). Cuando cargas una página Web en tu navegador, tu código (HTML, CSS y JavaScript) es leído dentro de un ambiente de ejecución (pestaña del navegador). Esto es como una fábrica que coge la materia prima (Las líneas de código) y lo presenta como el producto final (la página Web).
El lenguaje JavaScript es ejecutado por el motor del navegador de JavaScript, luego que el código HTML y CSS han sido juntados y congregados dentro de la página Web. Esto asegura que el estilo y la estructura de la página están en su sitio en el instante en que JavaScript comienza a ejecutarse.
Esto es algo buenísimo, algo muy común en el uso de JavaScript para alterar dinámicamente el código HTML y CSS, para que la interfaz de usuario sea actualizada, utilizando
DOMo el modelo de objeto de documento (como se mencionó anteriormente). Si al cargar JavaScript e intentar hacerlo funcionar antes que sea leído el código HTML y CSS, se verá perjudicado, ocurriendo fallos de programación.
Cada pestaña del navegador se considera como una cubeta en un divido separado para hacer funcionar el código (en términos técnicos las cubetas son llamadas “ambientes de ejecución”) – quiere decir que en la mayoría de los casos los códigos en cada pestaña funcionan totalmente separados, y el código en una pestaña no puede afectar de forma directa el código de otra pestaña, o bien en otro navegador. Esta es una buena medida de seguridad – si este no fuese el caso, entonces los piratas informáticos podrían estar alterando tu código para robar información de otro sitio web, y otras tantas cosas malas.
Nota: Existen formas para enviar código e información entre diferentes sitios web/pestañas de una forma segura, pero estas son técnicas avanzadas que no cubriremos en este curso.
Cuando el navegador halla un bloque de JavaScript, por norma general lo corre en orden, de arriba hacia abajo. Esto significa que tienes que tener precaución en qué orden pones las cosas. Por poner un ejemplo, regresemos al bloque de JavaScript que vimos en nuestro primer ejemplo:
Aquí escogemos un texto del párrafo (línea 1), luego es adherido a un (oyente o escuchador) de eventos (línea 3) entonces cuando el párrafo es cliqueado, el bloque de código
updateName()empieza a marchar (línea cinco – 8). El código de bloque
updateName()(esta clase de código de bloque reusable son llamados “funciones”) interactúa con el usuario para consultar un nuevo nombre, y después lo inserta dentro del párrafo para actualizar lo que se esta visualizando.
Si tú cambias el orden de las primeras dos líneas de código, no funcionaría – de hecho, conseguirás un fallo de retorno en la consola del desarrollador del navegador –
TypeError: para is undefined. Esto quiere decir que el objeto
parano existe todavía, entonces no podremos añadir un (oyente o bien escuchador) de eventos.
Nota: Este es un error muy común – necesitas ser cuidadoso en tanto que el objeto de referencia en tu código debe existir antes de intentar algo con él.
Quizás debiste oír sobre los términos
interpretadory el
compiladoren contexto de programación, JavaScript es un lenguaje de interpretación – el código se hace marchar de arriba hacia abajo y el resultado de leerlo de este modo hace que inmediatamente responda. No debes transformar tu código en algo diferente antes de que el navegador lo haga por ti.
En otra mano los lenguajes compilados son transformados (compilado) antes que sean leídos por la computadora. Por servirnos de un ejemplo C/C++ son lenguajes congregados para compilarlos para luego ser leídos por la computadora.
Ambos accesos tienen diferentes ventajas, de los cuales no discutiremos en este punto.
Quizás también debiste percibir los términos
lado-del-servidory el código del
lado-del-cliente, especialmente en contexto de desarrollo web. El código del usuario es código que funciona en la computadora del usuario – cuando una página web es visualizada, la página del código del cliente del servicio es descargada, para entonces ser leída y mostrada en el navegador. En este módulo de JavaScript vamos a hablar explícitamente sobre el
lado-del-cliente.
Por otro lado el lado-del-servidor es leído por el servidor, entonces el resultado es descargado y mostrado en el navegador. Ejemplos del empleo popular del lenguaje web del lado-del-servidor incluye PHP, Python, Ruby y ASP.NET. ¡Y JavaScript! Este lenguaje también puede ser utilizado como un lenguaje de lado-del-servidor, por servirnos de un ejemplo en el popular ambiente de Node.js – puedes hallar más información sobre JavaScript del lado del servidor en nuestro tema.
La palabra
dinámicoes utilizada para describir los dos lados-del-cliente del servicio en JavaScript, y lenguajes del lado-del-servidor. Es referido a la habilidad para actualizar lo visualizado de una página/app para mostrar contenido diferente en diferentes circunstancias, requiriendo nuevo contenido a producir. Por poner un ejemplo, subir archivos desde una base de datos, donde el lado-del-cliente de JavaScript produce dinámicamente nuevo contenido en el navegador del cliente del servicio, por poner un ejemplo, creando una nueva tabla en código HTML, introduciendo datos que son llamados desde un servidor propio, para luego visualizarlo en la tabla de la página web y mostrárselo al usuario, El significado es un tanto diferente entre los 2 contextos, pero teniendo relación, y aprovechando el trabajo mutuo entre (lado-del-servidor y lado-del-usuario).
Una página web sin actualización de contenido dinámico es llamada como
estática– en tanto que únicamente muestra exactamente el mismo contenido todo el tiempo.
JavaScript es aplicado a tu página en código HTML de una forma similar al CSS. Donde el CSS emplea el elementopara aplicar hojas de estilos externas y la etiquetaes un elemento para aplicar hojas de estilos de forma interna al HTML, JavaScript solamente precisa de un solo amigo en el planeta del HTML - que es el elemento. Aprendamos cómo funciona esto.
<script> // JavaScript goes here</script>
function createParagraph() var para = document.createElement('p'); para.textContent = 'You clicked the button!'; document.body.appendChild(para);var buttons = document.querySelectorAll('button');for (var i = 0; i < buttons.length ; i++) buttons[i].addEventListener('click', createParagraph);
Nota: Si según lo que parece tu ejemplo no marcha, examina tu código punto por punto y asegúrate que todo lo hayas hecho bien, ¿verificaste si guardaste tu archivo con la extensión
.html? ¿Añadiste el tagjusto después del tag
</body>? ¿Introduciste el código JavaScript como se mostraba anteriormente?
JavaScript es sensitivo y exigente con mayúsculas y minúsculas, así que precisas introducir la sintaxis precisamente como se muestra, de otra manera no funcionará.
Esto trabaja muy bien, pero, ¿qué pasa si queremos poner nuestro JavaScript en un fichero externo? Entonces exploremos esto ahora.
<script src="script.js"></script>
Nota: Puedes ver esta versión en GitHub comoy().
A veces puedes apreciar que te encontraras con ciertas líneas de JavaScript en archivos HTML. Es posible que se vean algo semejante a esto:
Puedes intentar esta versión de nuestro demo abajo.
Este demo tiene exactamente la misma funcionalidad tanto como en las 2 secciones anteriores, excepto que el elementoincluye un supervisor de línea
onclickpara hacer marchar el código cuando el botón en presionado.
Por favor no hagas esto, de otra forma.Es una mala práctica contaminar tu HTML con JavaScript, y es ineficiente – Deberías de incluir el atributo
onclick="createParagraph()"en cada botón que desees para ser aplicado por JavaScript.
Usar los constructores de JavaScript permite seleccionar todos los botones empleando una sola instrucción. El código que utilizamos arriba sirve para este propósito viéndose así:
Esto puede verse un poco más grande que el atributo
onclickpero esto funcionará para todos los botones sin importar cuantos haya en la página, incluso cuando sean añadidos o removidos. JavaScript no precisa ser alterado.
Nota: Procura editar tu versión de
apply-javascript.htmly añade un tanto más de botones en el fichero. Cuando vuelvas a cargar la página, deberías apreciar que todos y cada uno de los botones crean un párrafo cuando son cliqueados. ¿Estupendo no?
Hay una serie de inconvenientes relacionados con conseguir que los scripts se carguen en el momento conveniente. auditorias posicionamiento web madrid es tan simple como semeja! Un problema común es que todo el HTML de una página se carga en el orden en que aparece. Si utiliza JavaScript para manipular elementos de la página (o más precisamente, el), su código no funcionará si el JavaScript es cargado y analizado ya antes que el código HTML al que está procurando manipular.
En los ejemplos de código anteriores, en los ejemplos internos y externos el JavaScript se carga y ejecuta en la cabecera del documento, antes de que se analice el cuerpo HTML. Esto podría ocasionar un error, así que hemos utilizado algunas construcciones para evitarlo.
En el ejemplo interno, puede ver esta estructura alrededor del código:
Se trata de un receptor de acontecimientos, que escucha el evento "DOMContentLoaded" del navegador, lo que quiere decir que el cuerpo HTML está totalmente cargado y analizado. El JavaScript dentro de este bloque no se ejecutará hasta después de que se dispare ese acontecimiento, por ende se evita el error (más adelante en el curso).
En el ejemplo externo, usamos una función JavaScript más moderna para solucionar el problema, el atributo
async, que le indica al navegador que siga descargando el contenido HTML cuando se haya alcanzado el factor de la etiqueta
<script>.
En este caso, tanto el script como el HTML se cargarán simultáneamente y el código funcionará..
Nota: En el caso externo, no necesitábamos utilizar el acontecimiento
DOMContentLoadedporque el atributo
asyncnos resolvía el inconveniente. No usamos la solución de
asyncpara el ejemplo interno de JavaScript porque
asyncsólo marcha para scripts externos.
Una solución anticuada a este problema solía ser poner su elemento de script justo en la parte inferior del cuerpo (por servirnos de un ejemplo, inmediatamente antes de la etiqueta
</body>), de modo que se cargase después de que todo el HTML haya sido analizado. El inconveniente con esta solución (y la solución
DOMContentLoadedvista anteriormente) es que la carga/análisis del script está absolutamente bloqueada hasta el momento en que se haya cargado el DOM HTML. En sitios más grandes con mucho JavaScript, esto puede ocasionar un gran problema de desempeño, ralentizando su lugar. Esta es la razón por la que se agregó
asynca los navegadores!
En realidad hay dos maneras de evitar el problema del script de bloqueo —
asyncy
defer. Veamos la diferencia entre estos dos.
Los scripts async descargarán el script sin bloquear la renderización de la página y lo ejecutarán tan pronto como el script finalice de descargarse. No se asegura que los scripts se ejecutarán en un orden específico, sólo que no impedirán que se muestre el resto de la página. Es mejor usar
asynccuando los scripts de la página se ejecutan independientemente uno del otro y no dependen de ningún otro script de la página.
Por ejemplo, si tiene los próximos elementos de script:
No puede confiar en el orden en que se cargarán los scripts.
jquery.jspuede cargar ya antes o bien después de
script2.jsy
script3.jsy si este es el caso, cualquier función en esos scripts que dependa de
jqueryproducirá un fallo porque
jqueryno se definirá en el momento en que se ejecute el script.
Deferejecutará los scripts en el orden en que aparecen en la página y los ejecutará tan pronto como el script y el contenido sean descargados:
Todos los scripts con el atributo
deferse cargarán en el orden en que aparecen en la página. Así que en el segundo ejemplo, podemos estar seguros de que
jquery.jsse cargará ya antes que
script2.jsy
script3.jsy que
script2.jsse cargará ya antes que
script3.js.
Para resumir:
Así como en código HTML y CSS, es optimización seo cuenca dentro de tu código de JavaScript que serán ignorados por el navegador, sencillamente existe para proveer instrucciones a tus colegas desarrolladores de como el código funciona (y para ti, por si regresas a tu código después de 6 meses y no recuerdas lo que hiciste). Los comentarios son muy útiles, deberías utilizarlos más frecuentemente, particularmente para grandes aplicaciones. He aquí dos tipos:
// Soy un comentario
/* Yo tambíen soy un commentario*/
Entonces por ejemplo, podemos anotar nuestro último demo de JavaScript con comentarios como:
Ahí vas, tus primeros pasos en el planeta de JavaScript, hemos comenzado únicamente con teoría, para comenzar a comprender por qué usamos JavaScript, y qué género de cosas puedes utilizar con él. En el camino viste unos cuantos ejemplos de código y aprendiste cómo JavaScript encaja con el resto del código de tu página web, entre otras cosas.
JavaScript puede que se vea un tanto desmoralizador de momento, pero no te preocupes – en este curso te vamos a llevar a través de pasos simples que harán que prosigas adelante. En el próximo artículo vamos a ir, consiguiendo un salto directo para construir tus propios ejemplos en JavaScript.
0 
Star