Sesion 4 Javascript - jesusgpa/2023-2024-CSAAI GitHub Wiki

Sesión 4: Javascript

  • Tiempo: 2h (50 + 50 min)
  • Fecha: Martes 20 de Febrero de 2024
  • Objetivos de la sesión:
    • Introducción al lenguaje Javascript
    • Acceso a los elementos HTML
    • Eventos y funciones de retrollamada (callbacks)

Contenido

Introducción

JavaScript es un lenguaje de programación de alto nivel que se utiliza principalmente en el desarrollo web.

Es un lenguaje interpretado, lo que significa que el código se ejecuta línea a línea en tiempo de ejecución por un motor JavaScript, que generalmente está integrado en los navegadores web modernos.

JavaScript se utiliza para añadir interactividad a las páginas web, permitiendo a los desarrolladores crear aplicaciones web dinámicas y sofisticadas.

Con JavaScript permite implementar las siguientes acciones:

  • Manipular el contenido de una página web.
  • Responder a eventos del usuario.
  • Realizar validaciones de formularios.
  • Enviar y recibir datos del servidor de forma asíncrona (mediante AJAX).
  • Crear animaciones.

JavaScript también se puede utilizar en otros entornos, como el desarrollo de aplicaciones móviles (usando frameworks como React Native o Ionic), desarrollo de servidores (con Node.js), desarrollo de extensiones para navegadores, desarrollo de juegos, y en muchos otros campos de la programación.

En esta asignatura lo vamos a utilizar sobre todo para interactuar con los objetos definidos en nuestros documentos HTML.

JavaScript es un lenguaje de programación de alto nivel con una sintaxis influenciada por los lenguajes C y Java, aunque no está relacionado con Java en términos de diseño o funcionalidad.

Fue creado por Brendan Eich en 1995 mientras trabajaba en Netscape Communications Corporation y se introdujo inicialmente como un lenguaje de secuencias de comandos para navegadores web.

En 1997, JavaScript se estandarizó bajo el nombre de ECMAScript, estableciendo las especificaciones del lenguaje.

Desde entonces, ha evolucionado mucho, con múltiples versiones de ECMAScript que han introducido nuevas características y mejoras al lenguaje.

JavaScript se ha convertido en uno de los lenguajes de programación más populares y ampliamente utilizados en el mundo del desarrollo web.

Según el informe Octoverse de 2023 de GitHub, JavaScript ocupaba el primer lugar en la lista de los lenguajes más utilizados en la plataforma, lo que refleja su importancia y prevalencia en la comunidad de desarrollo de software.

  • Sintaxis 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, 2023)

Usos de Javascript

JavaScript tiene un núcleo común que se define por las especificaciones de ECMAscript, independientemente de cómo se utilice.

JS en cliente

Estas son algunas de las formas en las que se usa JavaScript en el cliente, dentro del navegador:

Interactuar con el navegador

JavaScript se utiliza para interactuar con el navegador web en el que se está ejecutando.

Esto incluye acciones como abrir nuevas ventanas o pestañas, cambiar el tamaño y la posición de la ventana del navegador, y controlar la navegación hacia adelante y hacia atrás en el historial del navegador.

Interactuar con los documentos HTML

JavaScript se utiliza para manipular los elementos HTML en una página web.

Esto incluye agregar, eliminar o modificar elementos HTML, cambiar estilos CSS, y actualizar el contenido de la página dinámicamente.

Dibujar en la página

JavaScript se puede utilizar para crear gráficos y dibujos en una página web utilizando tecnologías como el elemento canvas de HTML5 o bibliotecas como D3.js.

Ejecución de código dentro del navegador

El código JavaScript se ejecuta directamente dentro del navegador del usuario, lo que permite que las aplicaciones web sean interactivas y respondan a las acciones del usuario sin necesidad de comunicarse constantemente con el servidor.

JavaScript en el cliente se utiliza para crear experiencias web dinámicas y ricas, permitiendo a los desarrolladores crear aplicaciones web interactivas que respondan a las acciones del usuario en tiempo real.

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

JavaScript en el servidor con Node.js

Node.js es un entorno de ejecución de JavaScript del lado del servidor que permite a los desarrolladores crear aplicaciones web utilizando JavaScript en el servidor.

Con Node.js, el código JavaScript se ejecuta directamente en la máquina del servidor, lo que da acceso a los recursos del sistema operativo y la capacidad de realizar tareas del lado del servidor, como interactuar con bases de datos, manipular archivos y realizar operaciones de red.

Esto hace que sea posible construir aplicaciones web completas utilizando JavaScript tanto en el cliente como en el servidor.

Node.js es similar a ejecutar programas en otros lenguajes de programación, como Python.

Esto se ve en la asignatura Laboratorio de Tecnologías Audiovisuales en la Web en cuarto curso.

Programas de ordenador con interfaz web utilizando Electron

Electron es un framework de código abierto que permite a los desarrolladores crear aplicaciones de escritorio multiplataforma utilizando tecnologías web estándar como HTML, CSS y JavaScript.

Con Electron, es posible crear aplicaciones de escritorio que se ejecutan en Windows, macOS y Linux utilizando las mismas tecnologías que se utilizan para construir aplicaciones web.

Esto se logra encapsulando una aplicación web dentro de un contenedor de aplicación de escritorio y proporcionando acceso a las API del sistema operativo a través de Node.js.

Electron permite crear aplicaciones de escritorio que en realidad son aplicaciones web locales, lo que facilita el desarrollo de aplicaciones multiplataforma con una única base de código.

JS en el cliente

En esta asignatura nos centraremos en usar JS para desarrollar la parte del cliente y crear páginas web interactivas.

Programas JavaScript asociados con archivos HTML

Todos los programas JavaScript están asociados con un archivo HTML.

Este archivo HTML actúa como la estructura base de la página web y puede contener referencias a uno o más archivos JavaScript que proporcionan la funcionalidad interactiva.

Ejecución en el navegador

Los programas JavaScript siempre se ejecutan en el navegador del cliente.

Esto significa que el código JavaScript se interpreta y se ejecuta en el entorno del navegador web del usuario, lo que permite que la página web sea dinámica e interactiva.

Desarrollo local

Durante el desarrollo, los archivos HTML y JavaScript residen en el ordenador local.

El navegador carga estos archivos directamente desde el disco duro del desarrollador en lugar de hacer peticiones al servidor web.

Esto facilita el proceso de desarrollo y depuración, ya que los cambios en el código pueden verse inmediatamente al actualizar la página en el navegador.

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:

Objeto console: Consola básica

Este objeto proporciona métodos para interactuar con la consola del navegador, como log(), warn(), error(), entre otros.

Se utiliza para imprimir mensajes de depuración, advertencias o errores durante el desarrollo de la aplicación.

Objeto window: Interfaz gráfica del navegador

Este objeto representa la ventana del navegador y proporciona acceso a la interfaz gráfica del mismo.

A través de este objeto, se pueden realizar acciones como abrir nuevas ventanas o pestañas, redirigir a otras páginas web, manipular el tamaño y la posición de la ventana del navegador, entre otros.

Objeto navigator: Recursos del navegador

Este objeto proporciona información sobre el navegador en el que se está ejecutando el código JavaScript. Permite acceder a detalles como el agente de usuario, la ubicación geográfica del usuario, el soporte para características específicas, entre otros.

Objeto document: Interfaz con el documento HTML

Este objeto representa el documento HTML cargado en el navegador y proporciona acceso al DOM (Document Object Model).

A través de este objeto, se puede acceder y manipular los elementos HTML de la página, como elementos de formulario, imágenes, enlaces, etc.

La manipulación del DOM es fundamental para crear páginas web interactivas y dinámicas.

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 nuestra 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 incrustar directamente en las etiquetas HTML.

Por un lado podemos ejecutar el código cuando ocurra un evento, como un clic 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>Ejemplo 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 clic 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 clic 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 nuestro 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 javascript 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.

También podemos utilizar los mismos comentarios que en CSS: /* para empezar y */ para terminar.

Al ejecutarlo y ver la consola obtenemos lo siguiente:

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

Ejecución diferida: defer

El código javascript 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 agrupandolas 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 código 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:

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

Este método devuelve el elemento del DOM que tiene el atributo id con el valor especificado.

Dado que los identificadores deben ser únicos en un documento HTML, este método devuelve solo un elemento.

Por ejemplo, si tienes un elemento <div id="miDiv">, puedes obtenerlo usando document.getElementById('miDiv').

document.getElementsByClassName(nombre)

Este método devuelve una lista (o "array-like") de todos los elementos en el documento que tienen la clase CSS especificada.

Si varios elementos tienen la misma clase, todos se incluirán en la lista.

Por ejemplo, document.getElementsByClassName('miClase') devolverá una lista de todos los elementos que tienen la clase CSS "miClase".

document.getElementsByTagName(nombre)

Este método devuelve una lista (o "array-like") de todos los elementos en el documento que tienen el nombre de etiqueta especificado.

Por ejemplo, document.getElementsByTagName('div') devolverá una lista de todos los elementos <div> en el documento.

Algunos de los métodos más utilizados para acceder al DOM con JavaScript

Este es un listado de algunos de los métodos más comunes para acceder y manipular el DOM utilizando JavaScript:

  • document.getElementById(id): Devuelve el elemento del DOM que tiene el atributo id con el valor especificado.
  • document.getElementsByClassName(nombre): Devuelve una lista de elementos en el documento que tienen la clase CSS especificada.
  • document.getElementsByTagName(nombre): Devuelve una lista de elementos en el documento que tienen el nombre de etiqueta especificado.
  • document.querySelector(selector): Devuelve el primer elemento que coincida con el selector CSS especificado. Si no se encuentra ningún elemento, devuelve null.
  • document.querySelectorAll(selector): Devuelve una lista de todos los elementos que coinciden con el selector CSS especificado.
  • parentNode.childNodes: Devuelve una colección de nodos secundarios de un nodo padre en forma de una NodeList.
  • parentNode.firstChild: Devuelve el primer hijo del nodo especificado en el árbol DOM.
  • parentNode.lastChild: Devuelve el último hijo del nodo especificado en el árbol DOM.
  • element.innerHTML: Obtiene o establece la representación HTML del contenido interno de un elemento.
  • element.innerText: Obtiene o establece el texto contenido por el elemento, eliminando cualquier formato de HTML.
  • element.setAttribute(nombre, valor): Establece el valor de un atributo en un elemento.
  • element.getAttribute(nombre): Devuelve el valor de un atributo especificado en un elemento.

Hay muchos más disponibles, pero estos son un buen punto de partida para comenzar a trabajar con JavaScript en la manipulación del DOM.

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 leído. 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 clic 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 clic 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 clic sobre el párrafo test
//-- Cada vez que se hace clic en el párrafo se invoca a esta función
function manejador_parrafo()
{
  console.log("Clic 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 clic sobre el párrafo, 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 clic 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 clic 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 clic 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 clic 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...

Autor

Jesús Parrado Alameda (jesusgpa)

Creditos

Licencia

Enlaces

⚠️ **GitHub.com Fallback** ⚠️