Qué es JavaScript? - Aprende sobre desarrollo web

Back to top

1) ¿Qué es JavaScript?

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 emplear JavaScript.

Back to top

2) Definición General

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 enseñar información estática — como mostrar actualizaciones de contenido en el instante, interaccionar 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 web, 2 de las que son (y), hablaremos de ellas más adelante con más detalle en otra una parte de nuestra Área de Aprendizaje.

• es un lenguaje de marcado que emplea la estructura para dar un sentido al contenido web, por poner un ejemplo define párrafos, cabeceras, tablas, imágenes y vídeos en la página.
• es un lenguaje de reglas en catarata que utilizamos para aplicar un estilo a nuestro contenido en HTML, por servirnos de un ejemplo colocando colores de fondo, fuentes y marginando nuestro contenido en múltiples columnas.
• Es un lenguaje de programación que te deja crear contenido nuevo y dinámico, supervisar archivos de multimedia, crear imágenes animadas y otras muchas cosas más. (Aunque, no todo, pero es increíble lo que puedes llegar a hacer con tan sólo unas pocas líneas de código de JavaScript).

Las tres capas se complementan una con la otra. Vamos a añadir un simple texto a la etiqueta como un ejemplo. Podemos emplear HTML para dar estructura y propósito:

Agregamos CSS para hacer que se vea agradable:

y finalmente agregamos JavaScript para incorporar comportamiento dinámico:

Da click en el texto para poder ver qué sucede (también puedes localizar la demostración en GitHub) ve elo!

JavaScript puede hacer muchas cosas más - Vamos a explorar con más detalles.

Back to top

3) Entonces, ¿Qué es lo que realmente podemos hacer?

El núcleo de JavaScript consiste en características comunes de programación que te permiten hacer cosas como:

• Almacenar valores útiles dentro de variables. En el ejercicio anterior por ejemplo, preguntamos por un nuevo nombre a introducir para luego guardarlo en una variable llamada name.
• Las operaciones escritas en formato de texto (Conocidas como " Strings" en lenguaje de programación). En el ejemplo precedente tomamos el conjunto "Player 1:" y lo adjuntamos a la variable namepara acabar de crear el código, ejemplo: "Player 1: Chris".
• Para hacer funcionar el código en contestación a algunos eventos que están ocurriendo en la página web. Usamos un evento en nuestro ejemplo anterior llamado clic para detectar cuando el botón es cliqueado para entonces hacer correr el código que actualice la etiqueta de texto.
• ¡Y muchas más cosas!

Hay algo incluso más emocionante, no obstante es la funcionalidad construida sobre el núcleo del lenguaje de JavaScript. Llamada Interfaz de programación en aplicaciones - Application Programming Interfaces( API's) proveyendo superpoderes para utilizar en tú código JavaScript.

Los APIS son inserciones de líneas, incluso bloques gigantes de código listos para emplear que dejan a un desarrollador implementarlo a programas que de cualquier otra forma podría ser difícil o bien aun imposible de finalizar. Así como las herramientas para construir una casa, es lo mismo para las cosas de programación – Es mucho más fácil tomar los paneles que ya estén cortados y atornillarlos para hacer un anaquel de libros, puesto que es más laborioso diseñarlo por ti, ir y hallar la madera correcta, cortarla del tamaño adecuado y limarla, buscar los tornillos del tamaño correcto y ensamblarla para hacer un estante 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 ambiente de tu ordenador, o hacer cosas complejas. Por ejemplo:

• Elte deja manipular, crear, remover y mudar códigos escritos en lenguaje HTML y CSS, aun aplicando dinámicamente nuevos estilos a tu página web, etc. Toda vez que aparezca un aviso (popup) en una página web, o bien nuevo contenido a mostrarse en ella, (Así como vimos en el ejemplo precedente de nuestro sencillo demo) es tan sólo un caso, de lo que se puede hacer con la acción DOM.
• Larestablece la información geográfica, Así es comopermite encontrar tu dirección e imprimirla en un mapa.
• Lasy elAPI te dejan crear animaciones y gráficos en 2D y 3D. La gente está haciendo cosas increíbles usando estas tecnologías web – puedes ver losy.
• , comoyte permite crear cosas realmente interesantes, tanto como poner música y vídeo en una página web o bien grabar un vídeo desde tu cámara web y que otra persona pueda verla desde su computadora (Prueba nuestro ejerciciopara tener una idea).

Nota: Muchos de los tutoriales anteriores no funcionan en motores de búsqueda viejos – cuando practicamos, es buena idea emplear un navegador actualizado, como Mozilla Firefox, Google Chrome, Edge o bien Opera para hacer funcionar el código, estima que necesitarás utilizar elen más detalle cuando llegues a la una parte de entregar tu código desarrollado (Código real que clientes reales usaran).

APIs de Terceras personas,por determinado no son construidos dentro del navegador, y generalmente debes lograr su código y también información de alguna una parte de la Web, por ejemplo:

• Elpermite que hagas cosas como enseñar los últimos tuits de alguien en tu sitio web.
• Elpermite incrustar mapas personalizados en tu sitio y otro género de funcionalidades.

Nota: Estas APIs son avanzadas, y por ende en este módulo no serán explicadas, puedes localizar mucha más información sobre esto en nuestro.

¡Hay aun muchas más APIs! no obstante, no te emociones muy rápido. En tanto 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 de ahí que que estás aquí – ¡Así que sigamos adelante!

Back to top

4) ¿Qué es lo que JavaScript hace en tu página web?

En este apartado, en la actualidad comenzaremos a ver varias líneas de código, y mientras hacemos eso vamos explorando lo que actualmente está pasando cuando haces marchar tu código JavaScript en tu página Web.

Hagamos un breve recordatorio del historial de lo que sucede cuando cargas una página web en tu navegador (primero hablamos sobre en nuestro artículo). Cuando cargas una página Web en tu navegador, tu código (HTML, CSS y JavaScript) es leído en 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 en la página Web. Esto asegura que el estilo y la estructura de la página están en su lugar en el momento en que JavaScript empieza 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 marchar antes de 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 compartimento separado para hacer marchar 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 todos y cada pestaña marchan completamente separados, y el código en una pestaña no puede afectar de manera directa el código de otra pestaña, o en otro navegador. Esta es una buena medida de seguridad – si este no fuese el caso, entonces los piratas informáticos podrían estar modificando tu código para robar información de otro sitio, y otras tantas cosas malas.

Nota: Existen formas para enviar código y también información entre diferentes sitios web/pestañas de una forma segura, pero estas son técnicas avanzadas que no cubriremos en este curso.

4.1) JavaScript marcha con un orden

Cuando el navegador halla un bloque de JavaScript, por norma general lo corre en orden, de arriba cara abajo. Esto quiere decir que debes llevar cuidado en qué orden pones las cosas. Por 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 acontecimientos (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 luego lo inserta dentro del párrafo para actualizar lo que se esta visualizando.

Si tú cambias el orden de las primeras 2 líneas de código, no funcionaría – de hecho, conseguirás un error de retorno en la consola del desarrollador del navegador – TypeError: para is undefined. Esto significa que el objeto parano existe todavía, entonces no vamos a poder añadir un (oyente o bien escuchador) de eventos.

Nota: Este es un fallo muy común – precisas ser cauteloso en tanto que el objeto de referencia en tu código debe existir ya antes de intentar algo con él.

4.2) El Interpretador entre el código compilado

Quizás debiste escuchar 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 cara abajo y el resultado de leerlo así hace que de manera inmediata responda. No tienes que convertir tu código en algo diferente antes que el navegador lo haga por ti.

En otra mano los lenguajes compilados son transformados (compilado) antes de que sean leídos por la computadora. Por servirnos de un ejemplo C/C++ son lenguajes congregados para compilarlos para entonces ser leídos por la computadora.

Ambos accesos tienen diferentes ventajas, de los que no discutiremos en este punto.

4.3) El lado-del-servidor entre el código del-lado-del-cliente

Quizás también debiste escuchar 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 marcha en la computadora del usuario – cuando una página web es visualizada, la página del código del usuario es descargada, para luego ser leída y mostrada en el navegador. En este módulo de JavaScript hablaremos 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 uso 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 ejemplo en el popular entorno de Node.js – puedes hallar más información sobre JavaScript del lado del servidor en nuestro tema.

4.4) Código dinámico en frente de código estático

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 ejemplo, subir ficheros desde una base de datos, donde el lado-del-usuario de JavaScript produce dinámicamente nuevo contenido en el navegador del usuario, por servirnos de un ejemplo, creando una nueva tabla en código HTML, introduciendo datos que son llamados desde un servidor propio, para entonces 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-cliente).

Una página web sin ninguna actualización de contenido dinámico es llamada como estática– en tanto que únicamente muestra exactamente el mismo contenido todo el tiempo.

Back to top

5) ¿Cómo añadir JavaScript a tu página web?

JavaScript es aplicado a tu página en HTML de una manera afín al CSS. Donde el CSS emplea el elementopara aplicar hojas de estilos externas y la etiquetaes un factor para aplicar hojas de estilos de forma interna al HTML, JavaScript únicamente precisa de un solo amigo en el mundo del HTML - que es el factor. Aprendamos cómo marcha esto.

5.1) JavaScript por dentro

1. Primero que nada, haz una imitación de nuestro archivo ejemplo. Guárdalo en algún sitio donde puedas localizarlo.
2. Abre el fichero en tu navegador y en tu editor de texto. Verás que el HTML creará una simple página web conteniendo un botón.
3. Luego, ve a tu editor de texto y añade lo siguiente justo antes del cierre de la etiqueta </body>:

   <script> // JavaScript goes here</script>

4. Ahora, añadiremos algo de JavaScript dentro de nuestra etiquetapara que la página haga algo más interesante – añade el siguiente código justo debajo de la línea de código "// JavaScript goes here":

   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);

5. Guarda tu archivo y actualiza tu navegador – ahora deberías ver cuando das click en el botón, que un nuevo párrafo es generado y posicionado debajo de él.

Nota: Si según lo que parece tu ejemplo no funciona, revisa tu código punto por punto y asegúrate que todo lo hayas hecho bien, ¿verificaste si guardaste tu fichero 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 exactamente como se muestra, de otro modo no funcionará.

5.2) JavaScript Externo

Esto trabaja realmente bien, mas, ¿qué pasa si deseamos poner nuestro JavaScript en un archivo externo? Entonces exploremos esto ahora.

1. Primero, crea un nuevo archivo en la misma dirección o bien sitio de tu fichero muestra de HTML. Llámalo script.js– asegúrate que lleve la extensión .js así es como es reconocido un fichero JavaScript.
2. Siguiente, copia todo el código que has escrito anteriormente dentro del elementoy pégalo dentro del fichero .js y guárdalo.
3. Ahora remplaza todo del código que está en el elementopor lo siguiente:

   <script src="script.js"></script>

4. Guarda y refresca tu navegador, y ¡deberías de ver exactamente lo mismo! Realmente hiciste el mismo trabajo, pero ahora conseguimos que el código esté en un fichero externo. Normalmente esto es algo bueno en términos de organizar tu código y hacerlo reusable a través de múltiples ficheros HTML. Además los ficheros HTML son fáciles de leer sin tantos pedazos de script por todas partes.

Nota: Puedes ver esta versión en GitHub comoy().

5.3) Gestores de JavaScript en línea

A veces puedes apreciar que te encontrases con ciertas líneas de JavaScript en archivos HTML. Es posible que se vean algo similar a esto:

Puedes intentar esta versión de nuestro demo abajo.

Este demo tiene la misma funcionalidad tanto como en las 2 secciones precedentes, salvo que el elementoincluye un supervisor de línea onclickpara hacer funcionar el código cuando el botón en presionado.

Por favor no hagas esto, de otra manera.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 elegir todos los botones empleando una sola instrucción. El código que empleamos arriba sirve para este propósito viéndose así:

Esto puede verse un tanto más grande que el atributo onclickpero esto funcionará para todos los botones sin importar un mínimo cuantos haya en la página, incluso cuando sean añadidos o bien removidos. JavaScript no precisa ser cambiado.

Nota: Intenta editar tu versión de apply-javascript.htmly añade un tanto más de botones en el archivo. Cuando vuelvas a cargar la página, deberías notar que todos los botones crean un párrafo cuando son cliqueados. ¿Estupendo no?

5.4) Estrategias de carga de scripts

Hay una serie de inconvenientes relacionados con lograr que los scripts se carguen en el instante adecuado. Nada es tan simple como semeja! Un inconveniente 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 exactamente, el), su código no funcionará si el JavaScript es cargado y analizado antes que el código HTML al que está procurando manipular.

En los ejemplos de código precedentes, en los ejemplos internos y externos el JavaScript se carga y ejecuta en la cabecera del documento, antes que se analice el cuerpo HTML. Esto podría ocasionar un fallo, así que hemos usado 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 significa que el cuerpo HTML está absolutamente cargado y analizado. El JavaScript dentro de este bloque no se ejecutará hasta después de que se dispare ese evento, por tanto se evita el fallo (más adelante en el curso).

En el ejemplo externo, usamos una función JavaScript más moderna para resolver el inconveniente, el atributo async, que le señala al navegador que siga descargando el contenido HTML cuando se haya alcanzado el elemento 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 emplear el acontecimiento DOMContentLoadedporque el atributo asyncnos solucionaba el inconveniente. No empleamos la solución de asyncpara el ejemplo interno de JavaScript pues asyncsólo funciona para scripts externos.

Una solución anticuada a este inconveniente 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 tal modo que se cargara después de que todo el HTML haya sido analizado. El inconveniente con esta solución (y la solución DOMContentLoadedvista previamente) es que la carga/análisis del script está totalmente bloqueada hasta el momento en que se haya cargado el DOM HTML. En sitios más grandes con mucho JavaScript, esto puede causar un enorme problema de desempeño, ralentizando su lugar. Esta es la razón por la que se agregó asynca los navegadores!

5.4.1) async y defer

En realidad hay dos maneras de eludir 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 termine de descargarse. No se garantiza 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 utilizar 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 siguientes elementos de script:

No puede confiar en el orden en que se cargarán los scripts. jquery.jspuede cargar ya antes o después de script2.jsy script3.jsy si este es el caso, cualquier función en esos scripts que dependa de jqueryproducirá un error por el hecho de que jqueryno se definirá en el instante 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á antes que script2.jsy script3.jsy que script2.jsse cargará antes que script3.js.

Para resumir:

• Si sus scripts no precisan aguardar para el análisis y pueden ejecutarse independientemente sin dependencias, entonces use async.
• Si sus scripts necesitan aguardar a ser analizados y dependen de otros scripts, cárguelos utilizando defery ponga sus elementos <script>en el orden pertinente en el que desea que el navegador los ejecute.

Back to top

6) Comentarios

Así como en HTML y CSS, es posible redactar comentarios 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 retornas a tu código después de 6 meses y no recuerdas lo que hiciste). Los comentarios son muy útiles, deberías emplearlos más de forma frecuente, particularmente para grandes aplicaciones. He aquí 2 tipos:

• Comentarios de una sola línea escritos después de dos barras inclinadas (//), Ejemplo:

  // Soy un comentario

• Comentarios de múltiples líneas escritos entre las cadenas /* y */, ejemplo:

  /* Yo tambíen soy un commentario*/

Entonces por servirnos de un ejemplo, podemos anotar nuestro último demo de JavaScript con comentarios como:

Back to top

7) Resumen

Ahí vas, tus primeros pasos en el planeta de JavaScript, hemos comenzado solamente con teoría, para comenzar a comprender por qué empleamos 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 muchas cosas.

JavaScript es posible que se vea un poco desmoralizador por ahora, pero despreocúpate – en este curso te vamos a llevar a través de pasos simples que harán que prosigas adelante. En el siguiente artículo iremos, logrando un salto directo para edificar tus propios ejemplos en JavaScript.​​​​​

Back to top

8) En este módulo

Back to top