S4: Javascript

Sesión 4: Javascript

• Tiempo: 2h (50 + 50min)
• Fecha: Jueves, 11-Marzo-2021
• Objetivos de la sesión:
  • Introducción al lenguaje Javascript
  • Acceso a los elementos HTML
  • eventos y funciones de retrollamada (callbacks)

Contenido

• Introducción
• Usos de Javascript
• JS en el cliente
  • Objetos disponibles en el navegador
• Programa hola mundo
• Ejecutando JS desde nuestros documentos HTML
  • Desde las etiquetas HTML
  • Usando la etiqueta <script>
  • Javascript en un fichero externo
• Ejecución retrasada: defer
• Plantilla para nuestros proyectos
• Accediendo a los elementos HTML
  • Ejemplo 5: Leyendo un párrafo
• Eventos
  • Ejemplo 6: Detectando un click
  • Ejemplo 7: Manejador compacto
  • Ejemplo 8: Notación => ()
• Modificando elementos HTML
  • Ejemplo 9: Escribiendo texto en un párrafo
• Para aprender más...
• El Rincón Friki
• Autor
• Licencia
• Enlaces

Introducción

¡Vamos a aprender Javascript!. Es un lenguaje de programación que nos permite interactuar con los objetos definidos en nuestros documentos HTML

• Sintáxis derivada de C y Java. No tiene nada que ver con Java
• Aparición 1995. Netscape. Lenguaje de scripts para navegadores
• 1997 sale el primer estándar: ECMAScript
• Javascript está en el top 1 de lenguajes más usados, en github (Octoverse, 2020)

Usos de Javascript

Hay un nucleo de js común a todos los usos: la propia definición del lenguaje (ECMAscript)

Los usos son:

• JS en cliente. Se ejecuta en el navegador
  • Interactuar con el navegador
  • Interactuar con los documentos HTML
  • Dibujar en la página
  • El código se ejecuta dentro del navegador

• JS en servidor: node.js. Es un lenguaje que se ejecuta sobre la máquina (y por tanto se tiene acceso a todos los recursos). Esto se ve en la asignatura Laboratorio de Tecnologías Audiovisuales en la Web en cuarto curso. Es similar a ejecutar programas en otro lenguaje, como por ejemplo python

• Programas de ordenador con interfaz web: electron. Aplicaciones multiplataforma (que en realidad son webs locales)

JS en el cliente

En esta asignatura nos centraremos en usar JS para desarrollar la parte del cliente y crear páginas web interactivas. Todos nuestros programas JS están asociados a un fichero HTML y SIEMPRE SE EJECUTARÁN EN EL NAVEGADOR

Cuando desarrollamos programas en Javascript para las páginas web, trabajamos en local. Los ficheros están en nuestro ordenador local y el navegador los cargas desde nuestro disco duro, en vez de hacer peticiones al servidor

Objetos disponibles en el navegador

Puesto que nuestro programa JS se ejecuta en el navegador, sólo tenemos acceso a los elementos que este ponga a nuestra disposición. Cuando se ejecutan nuestro programas tenemos acceso directo (sin tener que importar nada) a los siguientes elementos:

• Consola básica. Objeto console. Nos permite escribir mensajes en la consola
• Interfaz gráfica del navegador. Objeto window. Nos permite acceder a la interfaz gráfica del navegador. Por ejemplo para lanzar una ventana nuevo (pop-up)
• Recursos del navegador. Objeto navigator. A través de este objeto podemos saber qué elementos están disponibles: sistema de almacenamiento local, webworkers, posicionamiento...
• Interfaz con documento HTML. Objeto document: Nodo raiz de nuestro documento HTML. A través de una API accedemos a todos los elementos del DOM (Document Object Model)

Programa Hola Mundo

El programa hola mundo en Javascript es el siguiente:

console.log("¡¡Hola Mundo!!")

Al ejecutarlo muestra el mensaje "¡¡Hola mundo!!" en la consola del navegador. El objeto console, que pone el navegador a neustra disposición, contiene el método log() para imprimir mensajes en la consola. Para probarlo abrimos el navegador (Por ejemplo Firefox) y en el menú superior derecho pinchamos abrimos la opción de web developer/Web console

Esto nos abre una console con el intérprete de Javascript listo. Ahí escribimos nuestro código javascript para probarlo

Ejecutando JS desde nuestros documentos HTML

Existen tres formas de enlazar nuestro código javascript con el HTML

Desde las etiquetas HTML

El código javascript lo podemos empotrar directamente en las etiquetas HTML. Por un lado podemos ejecutar el código cuando ocurra un evento, como un click de ratón (onclick). Por otro lado podemos ejecutarlo al pinchar sobre un enlace. En este documento se muestran ambas posibilidades:

• Ejemplo 1

<!-- Ejemplo 1: Código javascript empotrado en las
     etiquetas de HTML -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejempo 1</title>
</head>
<body>

    <!-- Párrafo. Al pulsar en el texto se ejecuta
         el código javascript indicado en el atributo onclick -->
    <p onclick="console.log('Pulsado sobre Párrafo');">
      Párrafo. ¡Haz click sobre mi!
    </p>

    <!-- Enlace: Al pulsar el enlace se ejecuta el código javascript 
         indicado en el atributo href -->
    <a href="javascript:console.log('Pulsado sobre el enlace');">
         Enlace: Haz click sobre mi!!
    </a>
</body>
</html>

Dentro del cuerpo se han definido un párrafo y un enlace. En el párrafo se ha cambiado el valor del atributo onclick:

onclick="console.log('Pulsado sobre Párrafo');"

Esto significa que cada vez que se genere el evento click sobre este párrafo, se ejecutará el código javascript que está entrecomillado

Para probarlo lo abrimos en el navegador, y sacamos la consola

Al hacer click sobre el párrafo y sobre el enlace obtenemos los mensajes en la consola

Aunque podemos incluir javascript dentro del HTML, NO ES BUENA PRÁCTICA HACERLO. Nosotros siempre situaremos nuestro código en un fichero separado. Este estilo empotrado sólo lo utilizaremos una vez en nuestros código: para llamar a nuestro programa principal (main)

Usando la etiqueta <script>

El navegador ejecutará cualquier código javascript delimitado por las etiquetas <script> y </script>. En este ejemplo se ha incluido código javascript en el cuerpo del HTML (pero se puede poner también en la cabeza) que muestra un par de mensajes en la consola

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo 2</title>
</head>
<body>

    <p>Esto es un párrafo...</p>

    <!-- Código Javascript-->
    <script>
        console.log("Mensaje 1...");
        console.log("Mensaje 2...");
    </script>
</body>
</html>

Al ejecutarlo y abrir la consola vemos esto

Nada más cargarse la página HTML se ejecuta el código javascript, que lo único que hace es imprimir dos mensajes en la consola del navegador

Igual que hemos comentado en el caso anterior, NO ES UNA BUENA PRÁCTICA colocar código dentro del HTML. Es preferible situar el código javacript en un fichero separado

Javascript en un fichero externo

Esta es la forma recomendada de hacer: Situar el código javascript en un fichero separado. Usamos el atributo src de la etiqueta <script> para especificar el fichero javascript. En este ejemplo HTML se invoca el código javascript que está situado en el fichero Ej-03.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo 3</title>

    <!-- Ejecutar el código js situado en un fichero externo -->
    <script src="Ej-03.js"></script>
</head>
<body>
    <p>Esto es un párrafo del ejemplo 3</p>
</body>
</html>

El código javascript es el siguiente:

// Esto son comentarios en Javascript
// MI primer programa javascript!!

//-- Imprimir tres mensajes en la consola
console.log("Estoy fuera del HTML");
console.log("Se recomienda hacerlo así");
console.log("------");

En Javascript utilizamos dos símbolos de dividir consecutivos // para poner comentarios en una línea. Tabién podemos utilizar los mismos comentarios que en CSS: /* para empezar y */ para terminar

Al ejecutarlo y ver la consola obtenemos lo siguinte

Si el nombre del fichero .js es incorrecto o se el navigador no es capaz de encontrarlo, aparecerá en la consola un mensaje como el siguiente

Ejecución retrasada: defer

El código javascritpt se ejecuta según el fichero HTML se va procesando. Puede ocurrir que se comience a ejecutar el programa cuando todavía no se ha terminado de procesar el fichero HTML. Esto no es un problema salvo que desde el código js tengamos que acceder al propio documento HTML

Para garantizar que nuestro código js se empiece a ejecutar una vez que el fichero html ha sido procesado completamente, y que por tanto tenemos acceso a él, utilizaremos el atributo defer en la etiqueta <script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo 4</title>
    <script src="Ej-04.js" defer></script>
</head>
<body>
    <p>Párrafo del ejemplo 4</p>
</body>
</html>

Y este es el código javascript

console.log("La página ya está cargada")
console.log("Ahora es seguro ejecutar el código js")
console.log("defer....")

Plantilla para nuestros proyectos

Nuestros proyectos tendrán un fichero HTML con la estructura y contenido, otro CSS con el estilo y un tercero JS con el código. La plantilla HTML es la siguiente:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plantilla</title>

    <!-- Hoja de estilo -->
    <link rel="stylesheet" href="plantilla.css">

    <!-- Código javascript -->
    <script src="plantilla.js" defer></script>
</head>
<body>
    <h2>Proyecto plantilla</h2>
    <p>Plantilla mínima para nuestros proyectos, que tendrán un 
        fichero HTML, uno CSS para la hoja de estilo, y otro para el  
        código JS. Todo por separado
    </p>
</body>
</html>

Esta plantilla carga una hoja de estilos y un código javascript desde ficheros exteriores

El resto del fichero HTML lo haremos como hasta ahora: colocando etiquetas con sus identificadores id y agrupándolas en clases con class

La hoja de estilos usada en la plantilla es esta:

body {
  background-color: lightblue;
}

h2 {
  color:blue;
}

p {
  color: green;
}

y el codigo javascript este:

//-- Punto de entrada: una vez cargada la página se llama a esta
console.log("Aquí comienza tu código JS...")
console.log("¡Que comiencen los juegos del JS!")

Al ejecutarlo en el navegador y abrir la consola vemos estos:

Accediento a los elementos HTML

Desde el código javascript tenemos acceso a todos los elementos del árbol HTML mediante el DOM: Modelo de Objetos del documento. Accedemos a ellos mediante el objeto document que tenemos disponible. Este objeto tiene una serie de métodos para localizar los elementos de nuestro interés. Estos son algunos ejemplos:

• document.getElementById(id): Obtener el elemento cuyo identificador es id. Devuelve un único elemento, ya que este identificador debe ser único
• document.getElementsByClassName(nombre): Obtener un array con todos los elementos que pertenecen a la clase nombre
• document.getelementsByTagName(nombre): Obtener un array con todos los elementos que tienen un nombre de etiqueta igual al indicado

Ejemplo 5: Leyendo un párrafo

Partimos de este fichero HTML donde hay un párrafo identificado como "test". Vamos a leerlo desde javascript

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo 5</title>

    <script src="Ej-05.js" defer></script>
</head>
<body>
    <!-- Este párrafo está identificado con el nombre "test" -->
    <p id="test">Esto es un párrafo de prueba</p>
</body>
</html>

Para localizar el párrafo identificado como "test" usamos el método getElementById('test'). El texto contenido en un elemento HTML es accesible mediante la propiedad innerHTML

Este es el código javascript de ejemplo, que se invoca una vez cargada la página. Lo primero que hacemos es localizar el párrafo test, y luego imprimimos su texto

//-- Tenemos acceso al documento html mediante  
//-- el objeto document

//-- Leer el párrafo identificado como test
const test = document.getElementById('test')

//-- Mostrar en la consola el contenido del párrafo
//-- (es la propiedad innerHTML)
console.log("Párrafo test leido. Dice:")
console.log(test.innerHTML)

Al ejecutarlo en el navegador y abrir la consola vemos lo siguiente:

Efectivamente, al ejecutarse el código javascript, ha impreso en la consola lo mismo que había en el párrafo en el HTML

Eventos

Javascript es un lenguaje orientado a eventos, pensado para ejecutar acciones cada vez que ocurren cosas, como un click del ratón, la pulsación de una tecla, la carga de una página, etc

Las funciones que atienden a esos eventos se denominan manejadores. Los elementos HTML tiene unos atributos para definir estos manejadores. Ya conocemos uno: onclick

Ejemplo 6: Detectando un click

Vamos a configurar un manejador para que cada vez que se haga click sobre el párrafo identificado como test se imprima un mensaje en la consola. El código HTML es el siguiente (es similar al del ejemplo 5)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo 6</title>

    <script src="Ej-06.js" defer></script>
</head>
<body>
    <p id="test">Esto es un párrafo de prueba</p>
</body>
</html>

El código javascript es el siguiente. Definimos la función manejador_parrafo() para que se ejecute con cada click de ratón. En el main() configuramos el manejador

//-- Manejador del evento click sobre el párrafo test
//-- Cada vez aue se hace click en el se invoca a esta funcion
function manejador_parrafo()
{
  console.log("Click sobre el párrafo...")
}

console.log("Ejecutando js...")

//-- Leer el párrafo identificado como test
const test = document.getElementById('test')

//-- Configurar el manejador para el evento de
//-- pulsación de botón: que se ejecute la
//-- funcion manejador_parrafo()
test.onclick = manejador_parrafo;

FIJATE en la línea:

test.onclick = manejador_parrafo;

Estamos usando la función manejador_parrafo como un objeto, y por eso NO usamos manejador_parrafo() con los paréntesis al final. Si se ponen los paréntesis lo que se hace es llamar a la función primero y asignar a onclick el valor devuelto por ella. Es un ERROR MUY COMUN

Lo ejecutamos en el navegador y abrimos la consola

En esta animación lo vemos en funcionamiento. Se hace un click 5 veces. La primera aparece el mensaje, y en las restantes aparece un número a la izquierda del texto, indicando que se repite el número de veces indicado por el número

Si recargamos la página, se hace un reset y se ejecuta el programa otra vez desde el comienzo

Ejemplo 7: Manejador compacto

En Javascript se usan tanto los eventos que NO hace falta definir una nueva función externa, sino que se puede crear en la propia asignación del manejador. Así, el código javascript del ejemplo anterior se podría escribir de esta manera:

console.log("Ejecutando js...")

//-- Leer el párrafo identificado como test
const test = document.getElementById('test')

//-- Configurar el manejador para el evento de
//-- pulsación de botón
test.onclick = function () {
  console.log("Click sobre el párrafo...")
}

La función manejador_párrafo() ha desaparecido, y se ha incluido directamente en la asignación a test.onclick:

  test.onclick = function () {
    console.log("Click sobre el párrafo...")
  }

El comportamiento es exactamente el mismo que antes: cada vez que se hace click sobre el párrafono, se ejecuta el código console.log("Click sobre el párrafo..."). La diferencia es que esta notación es más compacta, y nos ahorramos el tener que definir el nombre de una función. Lo cual tiene mucho sentido, porque esta función nunca será llamada desde otro lugar, sino que sólo se ejecuta al hacer click en el párrafo

Ejemplo 8: Notación () =>

Existe todavía otra notación más compacta para definir los manejadores, que nos ahorra escribir la palabra clave function. Este ejemplo es igual que los dos anteriores, pero usando esta nueva notación

console.log("Ejecutando js...")

//-- Leer el párrafo identificado como test
const test = document.getElementById('test')

//-- Configurar el manejador para el evento de
//-- pulsación de botón
test.onclick = () => {
  console.log("Click sobre el párrafo...")
}

Modificando elementos HTML

Una vez que hemos localizado el elemento html, no sólo podemos leer sus propiedades, sino que las podemos modificar. He incluso se pueden añadir nuevos elementos HTML para que se incorporen al árbol

Ejemplo 9: Escribiendo texto en un párrafo

Haremos un ejemplo que cambie el texto de un párrafo al hacer click sobre otro párrafo. En el HTML definimos dos párrafos, identificados como test1 y test2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo 9</title>
    <script src="Ej-09.js" defer></script>
</head>
<body>
    <p id="test1">Este es el párrafo test1</p>
    <p id="test2">Haz click aquí para modificar el párrafo 1</p>
</body>
</html>

Desde el código javascript definimos el manejador para que se ejecute al hacer click sobre el párrafo 2. Dentro del manejador, obtenemos el elemento párrafo 1 y cambiamos su texto asignando uno nuevo a través de la propiedad innerHTML

//-- Leer el elemento párrafo test2
const test2 = document.getElementById('test2')

//-- Obtener el elemento párrafo 1 para modificarlo
const test1 = document.getElementById('test1')

//-- Configurar el manejador para el evento de
//-- pulsación de botón
test2.onclick = () => {
  console.log("Click sobre el párrafo 2...")

  //-- Cambiar su texto
  test1.innerHTML = "¡TEXTO CAMBIADO!"
}

Ejecutamos el código en el navegador, con la consola abierta. Al hacer click en el párrafo inferior, el texto del párrafo superior cambia:

En esta animación vemos el proceso completo. Al hacer una recarga de la página aparece el texto original

Para aprender más...

• Los apuntes de Majo. Tiene apuntes sobre Javascript
• Vanilla Web Projects
• 30 Days of javascript
• Tutorial de Javascript -Tutorial moderno de javascript:
• Tutorial de Javascript del W3School
• Transparencias de la asigntura de Tecnologías web de la Universidad de Alicante
  • Introducción a Javascript
  • Javascript DOM
  • Javascript eventos

El rincón Friki

• Ejemplo de creación de un fichero vectorial 2D con Inkscape y cómo convertirlo a 3D en FreeCAD

Autor

• Juan González-Gómez (Obijuan)

Creditos

• Creado a partir del contenido generado por el profesor Jose María Cañas
• Imagen servidor: By George Boukeas, original Gorilla icon theme artwork by Jakub Steiner - Derivative of the computer.svg icon in the Gorilla icon theme., CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=11882548
• Imagen laptor: By Daniel Clemente - Own work, GPL, https://commons.wikimedia.org/w/index.php?curid=863161

Licencia

Enlaces

• Universidad Rey Juan Carlos de Madrid
• Escuela Técnica Superior de Ingeniería de Telecomunicaciones (URJC)