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 ,  que es, que se puede hacer y como usarlo en una página web.

Definición General

JavaScript es un lenguaje de programación que te permites realizar actividades complejas en una pagina web —  cada vez mas una página web hace mas  cosas que solo mostrar información estática — como mostrar actualizaciones de contenido en el momento, interactuarcon mapas, animaciones  graficas 2D/3D etc. — puedes estar seguro que JavaScript esta involucrado. Es la tercera capa del pastel de los estandares en las tecnologias para la web, dos de las cuales (HTML y CSS) Hablaremos mas adelante  con mas 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 parrafos, cabeceras, tablas, imágenes y videos 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 imagenes animadas y muchas otras cosas más. (Aunque, no todo, pero es increíble lo que puedes llegar a hacer con tan solo 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:

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

para.addEventListener('click', updateName);

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

Da click en el texto para ver que sucede (tambien puedes encontrar la demostración en GitHub) ve el código fuente o ejecutalo en vivo!

JavaScript puede hacer muchas cosas - 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 permite hacer cosas como:

  • Almacenar valores útiles dentro de variables. En el ejercicio anterior por ejemplo, preguntamos por un nuevo nombre ha 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 el 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 una librera, 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 la librera.

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 solo 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 permite 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 video en una página web o grabar un video 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 necesitaras 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 permiten que hagas cosas como mostrar los últimos tweets de alguien en tu sitio web.
  • El Google Maps API permiten 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 muchas 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 solo 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 estas 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 los 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 esta todo en su lugar, para que JavaScript comience en tiempo a funcionar.

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 en 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 en 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 acerca del tema lado-del servidor usando JavaScript en nuestras páginas dinámicas con la etiqueta programación del lado-del-servidor.

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 como 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. Veras que el HTML creara 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 de ver cuando das clic en el botón, 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 hagas 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 este 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 = 'You clicked the button!';
  document.body.appendChild(para);
}
<button onclick="createParagraph()">Click me!</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.

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

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

for (var 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 cuantos 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ás de encontrar todos los botones cuando sean tecleados crearan un párrafo. ¿Estupendo no?

Comentarios

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

  • Comentarios escritos en una sola línea escritos después de dos barras inclinadas (//), Ejemplo:
    // I am a comment
  • Comentarios escritos en varias líneas escritos entre las cadenas /* y */, ejemplo:
    /*
      I am also
      a comment
    */

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

// Function: creates a new paragraph and append it to the bottom of the HTML body.

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

/*
  1. Get references to all the buttons on the page and sort them in an array.
  2. Loop through all the buttons and add a click event listener to each one.

  When any button is pressed, the createParagraph() function will be run.
*/

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

for (var 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 que tipo de cosas puedes usar con él. En el camino viste unos cuantos ejemplos de código y aprendiste como 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.​​​​​

Etiquetas y colaboradores del documento

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