MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-Learn-Section-Survey

¿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 usar JavaScript.

Prerequisitos: Conocimiento básico de los conceptos de computación, y un poco de entendimiento de  HTML y CSS.
Objetivo: Familiarizarse con JavaScript , qué es, qué se puede hacer y cómo usarlo en una página web.

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 mostrar información estática — como mostrar actualizaciones de contenido en el momento, interactuar con mapas, animaciones gráficas 2D/3D etc. — puedes estar seguro que JavaScript está involucrado. Es la tercera capa del pastel de los estándares en las tecnologías para la web, dos de las cuales son (HTML y CSS), hablaremos de ellas más adelante con más detalle en otra parte de nuestra Área de Aprendizaje.

  • HTML es un lenguaje de marcado que usa la estructura para dar un sentido al contenido web, por ejemplo define párrafos, cabeceras, tablas, imágenes y vídeos en la página.
  • CSS es un lenguaje de reglas en cascada que usamos para aplicar un estilo a nuestro contenido en HTML, por ejemplo colocando colores de fondo, fuentes y marginando nuestro contenido en múltiples columnas.
  • JavaScript Es un lenguaje de programación que te permite crear contenido nuevo y dinámico, controlar archivos de multimedia, crear imágenes animadas y muchas otras 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 3 capas se complementan una con la otra. Vamos a agregar un simple texto a la etiqueta como un ejemplo. Podemos usar HTML para dar estructura y propósito:

<p>Player 1: Chris</p>

Agregamos CSS para hacer que se vea agradable:

p {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

y finalmente agregamos JavaScript para implementar comportamiento dinámico:

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Ingresa un nuevo nombre');
  para.textContent = 'Player 1: ' + name;
}

Da click en el texto para ver qué sucede (también puedes encontrar la demostración en GitHub) ve el código fuente o ejecútalo en vivo!

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

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 almacenarlo en una variable llamada name.
  • Las operaciones escritas en formato de texto (Conocidas como "Strings" en lenguaje de programación). En el ejemplo anterior tomamos el conjunto "Player 1:" y lo adjuntamos a la variable name para terminar de crear el código, ejemplo: "Player 1: Chris". 
  • Para hacer funcionar el código en respuesta 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 luego hacer correr el código que actualice la etiqueta de texto.
  • ¡Y muchas más cosas!

Hay algo incluso más emocionante, sin embargo 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 ) proveyéndote súper-poderes extra para usar en tú código JavaScript.

Los APIS son inserciones de líneas, incluso bloques gigantes de código listos para usar que permiten a un desarrollador implementarlo a programas que de cualquier otra forma podría ser difícil o incluso imposible de terminar. 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 estante de libros, ya que es más trabajoso diseñarlo por ti mismo, ir y encontrar la madera correcta, cortarla del tamaño correcto y lijarla, 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:

  • El DOM (Modelo de Objeto de Documento) API te permite manipular, crear, remover y cambiar códigos escritos en lenguaje HTML y CSS, incluso aplicando dinámicamente nuevos estilos a tu página web, etc. Cada vez que aparezca un aviso (popup) en una página web, o nuevo contenido a mostrarse en ella, (Así como vimos en el ejemplo anterior de nuestro sencillo demo) es tan sólo un ejemplo, de lo que se puede hacer con la acción DOM.
  • La Localización-Geo API restablece la información geográfica, Así es como Google Maps  permite encontrar tu dirección e imprimirla en un mapa. 
  • Las Canvas y el WebGL API te permiten crear animaciones y gráficos en 2D y 3D. La gente está haciendo cosas increíbles usando estas tecnologías web – puedes ver los Chrome Experiments y webglsamples.
  • Video y Sonido APIs, como HTMLMediaElement y WebRTCte permite crear cosas realmente interesantes, tanto como poner música y vídeo en una página web o grabar un vídeo desde tu cámara web y que otra persona pueda verla desde su computadora (Prueba nuestro ejercicio Snapshot demo para tener una idea).

Nota: Muchos de los tutoriales anteriores no funcionan en buscadores viejos – cuando practicamos, es buena idea usar un navegador actualizado, como Firefox, Chrome, Edge u Opera para hacer funcionar el código, considera que necesitarás usar el cross browser testing en 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 dentro del navegador, y generalmente tienes que conseguir su código e información de alguna parte de la Web, por ejemplo:

  • El Twitter API permite que hagas cosas como mostrar los últimos tweets de alguien en tu sitio web.
  • El Google Maps API permite incrustar mapas personalizados en tu sitio web y otro tipo de funcionalidades.

Nota: Estas APIs son avanzadas, y por lo tanto en este módulo no serán explicadas, puedes encontrar mucha más información acerca de esto en nuestro Client-side web APIs module.

¡Hay incluso muchas más APIs! sin embargo, no te emociones muy rápido. Ya que no tendrás la capacidad de construir en tan sólo 24 horas de estar estudiando JavaScript el siguiente Facebook, Instagram o Google Maps – Hay  muchos conceptos básicos aún por ver. Y es por eso que estás aquí – ¡Así que sigamos adelante!

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

En este apartado, actualmente comenzaremos a ver unas cuantas líneas de código, y mientras hacemos eso vamos explorando lo que actualmente está pasando cuando haces funcionar 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 acerca de cómo funciona CSS 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 lugar en el momento en que JavaScript comienza a ejecutarse.

Esto es algo muy bueno, algo muy común en el uso de JavaScript para modificar dinámicamente el código HTML y CSS, para que la interfaz de usuario sea actualizada, usando DOM o el modelo de objeto de documento (como se mencionó anteriormente). Si al cargar JavaScript e intentar hacerlo funcionar antes de que sea leído el código HTML y CSS, se verá afectado, ocurriendo errores de programación.

Seguridad de navegador

Cada pestaña del navegador se considera como una cubeta en un compartimento separado para hacer funcionar el código (en términos técnicos las cubetas son llamadas “ambientes de ejecución”) – significa que en la mayoría de los casos los códigos en cada pestaña funcionan completamente separados, y el código en una pestaña no puede afectar directamente el código de otra pestaña, o en otro navegador. Esta es una buena medida de seguridad – si este no fuera el caso, entonces los piratas informáticos podrían estar modificando 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 manera segura, pero estas son técnicas avanzadas que no cubriremos en este curso.

JavaScript funciona con un orden

Cuando el navegador encuentra un bloque de JavaScript, generalmente lo corre en orden, de arriba hacia abajo. Esto significa que tienes que tener cuidado en qué orden pones las cosas. Por ejemplo, regresemos al bloque de JavaScript que vimos en nuestro primer ejemplo:

var para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  var name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

Aquí seleccionamos un texto del párrafo (línea 1), luego es adherido a un evento espía (línea 3) entonces cuando el párrafo es cliqueado, el bloque de código updateName() empieza a funcionar (línea 5 – 8). El código de bloque updateName() (este tipo de código de bloque reusable son llamados “funciones”) interactúa con el usuario para preguntar 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 dos 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 para no existe todavía, entonces no podremos añadir un evento espía.

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

El Interpretador entre el código compilado

Quizás debiste escuchar sobre los términos interpretador y el compilador en contexto de programación, JavaScript es un lenguaje de interpretación – el código se hace funcionar de arriba hacia abajo y el resultado de leerlo de esta manera hace que inmediatamente responda. No tienes que 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 de que sean leídos por la computadora. Por 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.

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

Quizás también debiste escuchar los términos lado-del-servidor y el código del lado-del-cliente, especialmente en contexto de desarrollo web. El código del cliente 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 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 usado como un lenguaje de lado-del-servidor, por ejemplo en el popular ambiente de Node.js – puedes encontrar más información sobre JavaScript del lado del servidor en nuestro tema Sitios web dinámicos - Programación del lado del servidor.

Código dinámico frente a código estático

La palabra dinámico es usada para describir ambos lados-del-cliente 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 generar. Por ejemplo, subir archivos desde una base de datos, donde el lado-del-cliente de JavaScript genera dinámicamente nuevo contenido dentro del navegador del cliente, por ejemplo, creando una nueva tabla en código HTML, insertando 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 dos 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 – ya que solamente muestra el mismo contenido todo el tiempo.

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

JavaScript es aplicado a tu página en HTML de una manera similar al CSS. Donde el CSS usa el elemento <link> para aplicar estilos-de-hoja externos y el tag <style> es un elemento para aplicar estilos-de-hoja interno al HTML, JavaScript solamente necesita de un solo amigo en el mundo del HTML - que es el elemento <script>. Aprendamos cómo funciona esto.

JavaScript por dentro

  1. Primero que nada, haz una copia de nuestro archivo ejemplo apply-javascript.html. Guárdalo en algún lugar donde puedas encontrarlo.
  2. Abre el archivo 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 tag de cerrado </body>:
    <script>
    
      // JavaScript goes here
    
    </script>
  4. Ahora, añadiremos algo de JavaScript dentro de nuestro tag <script> para 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 clic en el botón, que un nuevo párrafo es generado y posicionado debajo de él.

Nota : Si al parecer tu ejemplo no funciona, revisa tu código paso a paso y asegúrate que todo lo hayas hecho bien, ¿verificaste si guardaste tu archivo con la extensión .html? ¿Añadiste el tag <script> justo 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 necesitas introducir la sintaxis exactamente como se muestra, de otro modo no funcionará.

Nota: Puedes ver esta versión en GitHub apply-javascript-internal.html (Puedes verlo en vivo también).

JavaScript Externo

Esto trabaja muy bien, pero, ¿qué pasa si queremos poner nuestro JavaScript en un archivo externo? Entonces exploremos esto ahora.

  1. Primero, crea un nuevo archivo en la misma dirección o sitio de tu archivo muestra de HTML. Llámalo script.js– asegúrate que lleve la extensión .js así es como es reconocido un archivo JavaScript.
  2. Siguiente, copia todo el código que has escrito anteriormente dentro del elemento <script> y pégalo dentro del archivo .js y guárdalo.  
  3. Ahora remplaza todo del código que está dentro del elemento <script> por lo siguiente:
    <script src="script.js"></script>
  4. Guarda y refresca tu navegador, y ¡deberías de ver exactamente lo mismo! En realidad hiciste el mismo trabajo, pero ahora conseguimos que el código esté en un archivo externo. Generalmente esto es algo bueno en términos de organizar tu código y hacerlo reusable a través de varios archivos HTML. Además los archivos HTML son fáciles de leer sin tantos pedazos de script por todos lados.

Nota: Puedes ver esta versión en GitHub como apply-javascript-external.html y script.js (Puedes verlo en vivo también).

Gestores de JavaScript en línea

A veces puedes notar que te encontraras con algunas líneas de JavaScript dentro de archivos HTML. Puede que se vean algo parecido a esto:

function createParagraph() {
  var para = document.createElement('p');
  para.textContent = '¡Presionaste el Botón!';
  document.body.appendChild(para);
}
<button onclick="createParagraph()">¡Presioname!</button>

Puedes intentar esta versión de nuestro demo abajo.

Este demo tiene exactamente la misma funcionalidad tanto como en las dos secciones anteriores, excepto que el elemento <button> incluye un controlador de línea onclick para hacer funcionar el código cuando el botón en presionado.

Por favor no hagas esto, de otro modo. 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 quieras para ser aplicado por JavaScript.

Usar los constructores de JavaScript permite seleccionar todos los botones usando una sola instrucción. El código que usamos arriba sirve para este propósito viéndose así:

const buttons = document.querySelectorAll('button');

for(let i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

Esto puede verse un poco más grande que el atributo onclick pero esto funcionará para todos los botones sin importar cuantos haya en la página, incluso cuando sean añadidos o removidos. JavaScript no necesita ser cambiado.

Nota: Intenta editar tu versión de apply-javascript.html y añade un poco 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?

Estrategias de carga de scripts

Hay una serie de problemas relacionados con conseguir que los scripts se carguen en el momento adecuado. Nada es tan simple como parece! 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 exactamente, el Document Object Model), su código no funcionará si el JavaScript es cargado y analizado antes que el  código HTML al que está intentando 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 causar un error, así que hemos usado algunas construcciones para evitarlo.

En el ejemplo interno, puede ver esta estructura alrededor del código:

 

document.addEventListener("DOMContentLoaded", function() {
  ...
});

Se trata de un receptor de eventos, que escucha el evento "DOMContentLoaded" del navegador, lo que significa que el cuerpo HTML está completamente cargado y analizado. El JavaScript dentro de este bloque no se ejecutará hasta después de que se dispare ese evento, por lo tanto se evita el error (más adelante en el curso aprenderá sobre los eventos).

En el ejemplo externo, utilizamos una función JavaScript más moderna para resolver el problema, el atributo async, que le indica al navegador que siga descargando el contenido HTML una vez que se haya alcanzado el elemento de la etiqueta <script>.

<script src="script.js" async></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 evento DOMContentLoadedporque el atributo async nos solucionaba el problema. No usamos la solución de async para el ejemplo interno de JavaScript porque async sólo funciona 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 ejemplo, justo antes de la etiqueta </body>), de modo que se cargara después de que todo el HTML haya sido analizado. El problema con esta solución (y la solución DOMContentLoaded vista anteriormente) es que la carga/análisis del script está completamente bloqueada hasta que se haya cargado el DOM HTML. En sitios más grandes con mucho JavaScript, esto puede causar un gran problema de rendimiento, ralentizando su sitio. Esta es la razón por la que se agregó async a los navegadores!

async y defer

En realidad hay dos maneras de evitar el problema del script de bloqueo — async y 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 usar async cuando 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:

<script async src="js/vendor/jquery.js"></script>

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

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

No puede confiar en el orden en que se cargarán los scripts. jquery.js puede cargar antes o después de script2.js y script3.js y si este es el caso, cualquier función en esos scripts que dependa de jquery producirá un error porque jquery no se definirá en el momento en que se ejecute el script.

Defer ejecutará 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:

<script defer src="js/vendor/jquery.js"></script>

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

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

Todos los scripts con el atributo defer se cargarán en el orden en que aparecen en la página. Así que en el segundo ejemplo, podemos estar seguros de que jquery.js se cargará antes que  script2.js y script3.js y que script2.js se cargará antes que script3.js.

Para resumir:

  • Si sus scripts no necesitan esperar para el análisis y pueden ejecutarse independientemente sin dependencias, entonces use async.
  • Si sus scripts necesitan esperar a ser analizados y dependen de otros scripts, cárguelos usando defer y coloque sus elementos <script> en el orden correspondiente en el que usted desea que el navegador los ejecute.

Comentarios

Así como en HTML y CSS, es posible escribir comentarios dentro de tu código de JavaScript que serán ignorados por el navegador, simplemente 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 usarlos más a menudo, particularmente para grandes aplicaciones. He aquí dos tipos:

  • Comentarios de una sola línea escritos después de dos barras inclinadas (//), Ejemplo:
    // Soy un comentario
  • Comentarios de varias líneas escritos entre las cadenas /* y */, ejemplo:
    /*
      Yo tambíen
      soy un commentario
    */

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

// Función: crea un nuevo párrafo y lo añade en la parte inferior del cuerpo HTML.

function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}

/*
  1. Obtiene referencias de todos los botones de la página y los ordena en una matriz.
  2. Recorre todos los botones y añade un clic event listener a cada uno de ellos.

  Cuando se pulsa cualquier botón, se ejecuta la función createParagraph().
*/

const buttons = document.querySelectorAll('button');

for (let i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

Resumen

Ahí vas, tus primeros pasos dentro del mundo de JavaScript, hemos comenzado solamente con teoría, para comenzar a entender por qué usamos JavaScript, y qué tipo de cosas puedes usar 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 poco desalentador por ahora, pero no te preocupes – en este curso te llevaremos a través de pasos simples que harán que sigas adelante. En el siguiente artículo iremos directo a la práctica, consiguiendo un salto directo para construir tus propios ejemplos en JavaScript.​​​​​

En este módulo

Etiquetas y colaboradores del documento

Colaboradores en esta página: c9009, Creasick, bosspetta, alejoWeb, JorgeAML, eliud-c-delgado, roberbnd
Última actualización por: c9009,