materials

BLOQUE 1 - El lenguaje Javascript

En este primer bloque vamos a conocer el lenguaje Javascript. El bloque se divide en:

Introducción a Javascript

Introducción

En las páginas web el elemento fundamental es el fichero HTML con la información a mostrar en el navegador. Posteriormente surgió la posibilidad de “decorar” esa información para mejorar su apariencia, lo que dio lugar al CSS. Y también se pensó en dar dinamismo a las páginas y apareció el lenguaje Javascript.

En un primer momento las 3 cosas estaban mezcladas en el fichero HTML pero eso complicaba bastante el poder leer esa página a la hora de mantenerla por lo que se pensó en separar los 3 elementos básicos:

Por tanto nuestras aplicaciones tendrán estos 3 elementos y lo recomendable es que estén separados en distintos ficheros:

Las características principales de Javascript son:

Lo usaremos para:

Sin embargo, por razones de seguridad, Javascript no nos permite hacer cosas como:

Un poco de historia

Javascript es una implementación del lenguaje ECMAScript (el estándar que define sus características). El lenguaje surgió en 1997 y todos los navegadores a partir de 2012 soportan al menos la versión ES5.1 completamente. En 2015 se lanzó la 6ª versión, inicialmente llamada ES6 y posteriormente renombrada como ES2015, que introdujo importantes mejoras en el lenguaje y que es la versión mínima que usaremos nosotros. Desde entonces van saliendo nuevas versiones cada año que introducen cambios pequeños. La última es la ES2024.

Las principales mejoras que introdujo ES2015 son: clases de objetos, let, for..of, Map, Set, Arrow functions, Promesas, spread, destructuring, …

Soporte en los navegadores

Los navegadores no se adaptan inmediatamente a las nuevas versiones de Javascript por lo que puede ser un problema usar una versión muy moderna ya que puede haber partes de los programas que no funcionen en los navegadores de muchos usuarios. En la página de Kangax podemos ver la compatibilidad de los diferentes navegadores con las distintas versiones de Javascript. También podemos usar CanIUse para buscar la compatibilidad de un elemento concreto de Javascript así como de HTML5 o CSS3.

Si queremos asegurar la máxima compatibilidad debemos usar la versión ES5 (pero nos perdemos muchas mejoras del lenguaje) o mejor, usar la ES6 (o posterior) y después transpilar nuestro código a la version ES5. De esto se ocupan los transpiladores (Babel es el más conocido) por lo que no suponen un esfuerzo extra para el programador.

Herramientas

La consola del navegador

Es la herramienta que más nos va a ayudar a la hora de depurar nuestro código. Abrimos las herramientas para el desarrollador (en Chrome y Firefox pulsando la tecla F12) y vamos a la pestaña Consola:

Consola

Allí vemos mensajes del navegador como errores y advertencias que genera el código y todos los mensajes que pongamos en el código para ayudarnos a depurarlo (usando los comandos console.log y console.error).

Además en ella podemos escribir instrucciones Javascript que se ejecutarán mostrando su resultado. También la usaremos para mostrar el valor de nuestras variables y para probar código que, una vez que funcione correctamente, lo copiaremos a nuestro programa.

Podemos obtener ayuda sobre el funcionamiento de la consola en la web de Mozilla.

EJERCICIO: abre la consola y prueba las funciones alert, confirm y prompt.

Siempre depuraremos los programas desde aquí (ponemos puntos de interrupción, vemos el valor de las variables, …).

Consola - depurar

Es fundamental dedicar tiempo a saber utilizar la consola porque nos facilitará enormemente la tarea de depurar nuestro código. Podéis encontrar infinidad de páginas en internet donde nos explican en profundidad el uso de la consola, como Debugging en el navegador.

Editores

Podemos usar el que más nos guste, desde editores tan simples como NotePad++ hasta complejos IDEs. La mayoría soportan las últimas versiones de la sintaxis de Javascript (Netbeans, Eclipse, Visual Studio, Sublime, Atom, Kate, Notepad++, …). Yo voy a utilizar Visual Studio Code o Sublime text por su sencillez y por los plugins que incorpora para hacer más cómodo mi trabajo. En Visual Studio Code instalaré algún plugin como:

Editores on-line

Son muy útiles porque permiten ver el código y el resultado a la vez. Normalmente tienen varias pestañas o secciones de la página donde poner el código HTML, CSS yJavascript y ver su resultado.

Algunos de los más conocidos son Codesandbox, Fiddle, Plunker, CodePen, …aunque hay muchos más.

Ejemplo de ‘Hello World’ en Fiddle:

Ejemplo de ‘Hello World’ en CodePen:

See the Pen Hello World Codepen by Kevin Schweickhardt (@kscatcensus) on CodePen.

Incluir javascript en una página web

El código Javascript va entre etiquetas <script>. Puede ponerse en el <head> o en el <body>. Funciona como cualquier otra etiqueta y el navegador la interpreta cuando llega a ella (va leyendo y ejecutando el fichero línea a línea). Podéis ver en este vídeo un ejemplo muy simple de cómo se ejecuta el código en el HEAD y en el BODY.

Lo mejor en cuanto a rendimiento es ponerla al final del <body> para que no se detenga el renderizado de la página mientras se descarga y se ejecuta el código. También podemos ponerlo en el <head> pero usando los atributos async y/o defer (en Internet encontraréis mucha información sobre esta cuestión, por ejemplo aquí.

Como se ve en el primer vídeo, es posible poner el código directamente entre la etiqueta <script> y su etiqueta de finalización pero lo correcto es que esté en un fichero externo (con extensión .js) que cargamos mediante el atributo src de la etiqueta. Así conseguimos que la página HTML cargue más rápido (si lo ponemos al final del BODY o usamos async) y además no mezclar HTML y JS en el mismo fichero, lo mejora la legibilidad del código y facilita su mantenimento:

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

Mostrar información

Javascript permite mostrar al usuario ventanas modales para pedirle o mostrarle información. Las funciones que lo hacen son:

También se pueden escribir las funciones sin window. (es decir alert('Hola') en vez de window.alert('Hola')) ya que en Javascript todos los métodos y propiedades de los que no se indica de qué objeto son se ejecutan en el objeto window.

Si queremos mostrar una información para depurar nuestro código no utilizaremos alert(mensaje) sino console.log(mensaje) o console.error(mensaje). Estas funciones muestran la información pero en la consola del navegador. La diferencia es que console.error la muestra como si fuera un error de Javascript.

Bibliografía

This site is open source. Improve this page.