Unidad III: JavaScript


JavaScript, conocido también como JS, es un lenguaje de programación que se utiliza principalmente para crear páginas web interactivas y dinámicas. Permite a los desarrolladores agregar funcionalidades como animaciones, actualizaciones de contenido en tiempo real, menús desplegables, formularios interactivos y mucho más. Aunque se llama JavaScript, no debe confundirse con Java; son lenguajes diferentes con propósitos distintos.

Si HTML es el esqueleto y CSS es la piel o apariencia, JavaScript es el cerebro que permite que las cosas interactúen y funcionen. Gracias a este lenguaje puedes hacer que un botón muestre una alerta, que un formulario envíe datos sin recargar la página, o que cambie el contenido cuando mueves el mouse.

>

Principales Características de JS:

¿Cómo usar JS en HTML?

Existen tres formas de incluirlo en un documento HTML:

En el head

Poco común, puede bloquear el renderizado


<script>
console.log("Código desde el head");
</script>
En el body

Antes del cierre de body


<script>
console.log("Código desde el body");
</script>
Archivo externo

Mejor práctica, separa el código JS del HTML


En el HTML (al final del <body>):
<script src="./practica.js"></script>

Crear el archivo practica.js:
console.log("Código desde archivo externo");

Salidas en pantalla

Por consola

Activar las herramientas de desarrollo (Ctrl+Shift+J)


console.log("Hola")
Por un cuadro de diálogo 

alert("Hola")
En la página (actualizando el DOM) 

En el HTML:
<p id="salida"></p>

En el JS:
document.getElementById("salida").innerHTML = "Texto en la página";

Comentarios en JS:



Variables y constantes

Declaración:

Existen tres maneras de declarar variables: var, let y const.

Reglas para nombrar variables y constantes:
  1. Las variables empiezan con una letra, guion bajo (_) o signo de dólar ($).
  2. Son case sensitive, o sea que nombre y Nombre son diferentes.
  3. Se usa camelCase para variables compuestas (primerNombre).

Tipos de datos en JS

Primitivos: Objetos:

Operadores en JS



El Modelo de Objetos del Documento (DOM) en JS:

Es una interfaz que representa un documento HTML como una estructura en forma de árbol, permitiendo a JavaScript modificar dinámicamente el contenido, el estilo y la estructura de una página web en tiempo real. Actúa como un puente entre el código de la página y el programa JavaScript, transformando los elementos HTML en objetos que el lenguaje puede manipular, creando así una experiencia de usuario más interactiva y atractiva.

¿Cómo funciona?
  1. Creación del DOM: Cuando un navegador carga una página web, crea el DOM, que es una representación orientada a objetos de los elementos HTML.
  2. Estructura de árbol: El DOM organiza la página web como un árbol jerárquico, donde cada elemento, texto o comentario se representa como un nodo.
  3. Manipulación con JavaScript: JavaScript interactúa con estos nodos utilizando sus propiedades y métodos para:
Ejemplo 1: Cambiar el texto de un párrafo al hacer clic en un botón.

En el HTML colocaremos el atributo id para identificar los elementos de la página:

<h1>Ejercicio: Modificar texto al presionar un botón</h1>
<p id="texto">Texto original</p>
<button id="btntexto">Haz clic</button>

En el JS crearemos dos variables para buscar el botón y el párrafo de la página:


let boton = document.getElementById("btntexto");
let parrafo = document.getElementById("texto");

boton.addEventListener("click", function() {
    parrafo.innerHTML = "Texto modificado";
});

Con addEventListener agregamos el evento clic, de manera que cuando el usuario haga clic en el botón, se ejecutará la función contenida entre las llaves, que consiste en modificar el contenido del parrafo.

Ejemplo 2: Crear un contador que se incremente cada vez que el usuario haga clic en un botón.

En el HTML crearemos un elemento span con su respectivo id, para ser modificado posteriormente en el JS:

<h1>Ejercicio: Contador ascendente</h1>
<p>Contador = <span id="conteo"> 0 </span>
<button id="btnsubir">Subir</button>

En el JS crearemos la variable contador que almacenará las veces que cliqueamos el botón Subir:


let contador = 0;
let boton = document.getElementById("btnsubir");
let numero = document.getElementById("conteo");

boton.addEventListener("click", function(){
    contador++;
    numero.textContent = contador;
});

La función textContent sirve para obtener o establecer el contenido de texto de un elemento HTML.

Ejemplo 3: Cambiar el color de fondo de la página cuando el usuario haga clic en un botón.

HTML:

<h1>Ejercicio: Modificar fondo al presionar un botón</h1>
<button id="btnCambiarFondo">Cambiar Fondo</button>

JS:


const boton = document.getElementById('btnCambiarFondo');
boton.addEventListener('click', function() {
    document.body.style.backgroundColor = 'lightblue';
});

Ejercicios:

  1. Crear un contador que disminuya en 1 cada vez que se haga clic en un botón, empezando desde 10.
  2. Establecer 3 botones que permitan cambiar el color de fondo y del texto en distitos colores según el botón que se presione.