Saltar al contenido principal

Intrucciones básicas de Javascript para web

JavaScript es un lenguaje de alto nivel principalmente usado para interactividad en la web. Es uno de los tres pilares fundamentales del desarrollo web:

  • HTML: da formato y estructura a la web
  • CSS: da estilo a web (colores, tamaños, etc.). Se encara de la "parte bonita".
  • JavaScript: dota de interactividad a la web. Dicho de otra manera, es el que gestiona "qué pasa si le doy a este botón".

1. Incluir JS en páginas web​

El código de JS se incluye en las páginas HTML de manera similar a los CSS: puede ir dentro de una etiqueta HTML o en un archivo aparte. Generalmente se recomienda, por orden, usar un archivo aparte generalmente llamado app.js.

a. En el propio HTML

Se incluye dentro de la etiqueta <script>.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi App</title>
</head>
<body>
    <script>
        // Aquí va el código JS
        console.log("Hola");
    </script>
</body>
</html>

b. En un achivo app.js aparte

Utilizamos el atributo src de la etiqueta <script>.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi App</title>
</head>
<body>
    <script src="app.js"></script> <!-- Aqui -->
</body>
</html>

Y en otro archivo aparte llamado app.js, introducimos el código js. Que equivalente al ejemplo anterior sería solamente:

console.log("Hola");

2. Mostrar información en la web usando JS​

Las instrucciones más comunes para mostrar mensajes en la web son:

a. Alert​

El alert() sirve para mostrar un mensaje en una ventana emergente en la web. Simplemente escribimos dentro del paréntesis el mensaje.

alert("Bienvenido!");

b. Console​

El console.log() no muestra información de manera visual en la página web, sino que tiene un uso más enfocado a los desarrolladores, ya que muestra el mensaje en la Consola. Cuando estamos en una página web: botón derecho --> Inspeccionar --> Consola.

console.log("Bienvenido!");

El console.log() se usa generalmente cuando estamos desarrollando un código y queremos ir viendo si está funcionando. Los desarrolladores suelen poner inicialmente varios console.log() para ver cómo avanzan las variables y datos en su código. Muy útil para encontrar fallos.

c. Write​

El document.write() sirve para mostrar texto directamente en el html.

document.write("<p>Bienvenido<p>");

3. Interacciones básicas HTML y JS - DOM​

Existen una gran variedad de instrucciones para manipular el DOM (Document Object Model). Aquí veremos las más fundamentales, que nos ayudan a conectar la información entre el HTML y el JS.

a. getElementById()​

Sirve para seleccionar un elemento del HTML haciendo referencia a su ID único.

Por ejemplo, en el siguiente index.html tenemos un párrafo <p> con el id = "parrafo1".

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi App</title>
</head>
<body>
    <h1>Flores</h1>
    <p id = "parrafo1">Mis flores preferidas son las azules y amarillas</p> 
    <script src="app.js"></script>
</body>
</html>

Imáginemos que queremos leer desde el app.js el párrafo. Para acceder a él usaremos el ID.

// app.js
let parrafo = document.getElementById('parrafo');
console.log(parrafo) // <p id = "parrafo1">Mis flores preferidas son las azules y amarillas</p>

Una vez tenemos guardado el <p> en la variable parrafo, podemos acceder a su contenido con la intruccion textContent.

// app.js
let contenido_parrafo = parrafo.textContent; // Mis flores preferidas son las azules y amarillas

E incluso podemos modificar el contenido.

// app.js
document.getElementById('parrafo1').textContent = "Mis flores preferidas son las rosas";

b. getElementsByClassName()​

Funciona igual que el getElementsById() pero basándose en el atributo class de la etiqueta HTML.

<!-- index.html -->
 <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi App</title>
</head>
<body>
    <h1 class = "titulo">Flores</h1>
    <p id = "parrafo1">Mis flores preferidas son las azules y amarillas</p> 
    <script src="app.js"></script>
</body>
</html>
// app.js
let titulo = document.getElementsByClassName('titulo'); // <h1 class = "titulo">Flores</h1>
console.log(titulo.textContent); /// Flores

Cuidado! Porque el ID es único, pero la CLASS no. Puede haber varios elementos en el HTML que compartan la misma CLASS. Si eso ocurre, el getElementsByClassName() devuelve una colección con todos los elementos HTML con esa clase.

<!-- index.html -->
 <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi App</title>
</head>
<body>
    <h1 class = "titulo">Flores</h1>
    <p id = "parrafo1">Mis flores preferidas son las azules y amarillas</p> 
    <br>
    <h1 class = "titulo">Árboles</h1>
    <p id = "parrafo2">Me gustan los pinos</p> 
    <script src="app.js"></script>
</body>
</html>
// app.js
let titulos = document.getElementsByClassName('titulo'); // <h1 class = "titulo">Flores</h1> y <h1 class = "titulo">Árboles</h1>
console.log(titulos.length); /// 2

// Acceso a los títulos usando el índice (como en arrays)
let titulo1 = titulos[0]; // <h1 class = "titulo">Flores</h1>
let titulo2 = titulos[1]; // <h1 class = "titulo">Árboles</h1>

c. querySelector()​

Esta es una instrucción más versátil, puesto que podemos usarla tanto para conseguir elementos utilizando su id, su class e incluso su etiqueta HTML.

// Por ID (usando #)
let elemento = document.querySelector('#parrafo1');

// Por clase (usando .)
let elemento = document.querySelector('.titulo');

// Por etiqueta
let elemento = document.querySelector('p');

// Selectores más complejos
let elemento = document.querySelector('input[type="text"]'); // input tipo texto

d. createElement()​

Esta intrucción ya no es como la anteriores, que recuperaban contenido del HTML. Este sirve para crear elementos HTML desde JS.

// app.js

// Crear un párrafo
let nuevoParrafo = document.createElement('p');

// Crear un div
let nuevoDiv = document.createElement('div');

// Crear una imagen
let nuevaImagen = document.createElement('img');

// Crear un enlace
let nuevoEnlace = document.createElement('a');

e. appendChild()​

El createElement() suele ir acompañado de un posterior appendChild(). Puesto que el createElement() simpelemente crea el elemento en el JS, pero para poder mostrarlo en el HTML es necesario usar después el appendChild(). Su función es "colgar" el nuevo elemento de algún elemento ya existente en el HTML, para así poder mostrarlo en la web.

Por ejemplo, imaginemos que tenemos el siguiente index.html con un <ul> sin contenido/vacío.

Recuerda: el <ul> es una etiqueta de HTML para crear listados. Cada elemento del listado será un <li> dentro del <ul>.

<!-- index.html -->
 <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi App</title>
</head>
<body>
    <h1 class = "titulo">Flores</h1>
    <ul></ul>
    <script src="app.js"></script>
</body>
</html>

El primer paso en el app.js sería recuperar el elemento "padre", en este caso el <ul>.

let ul = document.querySelector('ul');

Seguidamente crearíamos los <li> necesarios para nuestro listado.

let ul = document.querySelector('ul');

let li1 = document.createElement('li');
li1.textContent = "Rosa";

let li2 = document.createElement('li');
li2.textContent = "Orquídea";

let li3 = document.createElement('li');
li3.textContent = "Jazmin";

Y por último, para que aparezcan en el HTML los "colgaremos" de su "padre".

// app.js
let ul = document.querySelector('ul');

let li1 = document.createElement('li');
li1.textContent = "Rosa";

let li2 = document.createElement('li');
li2.textContent = "Orquídea";

let li3 = document.createElement('li');
li3.textContent = "Jazmin";

ul.appendChild(li1);
ul.appendChild(li2);
ul.appendChild(li3);

De este modo en nuestro HTML aparecerá:

  • Rosa
  • Orquídea
  • Jazmín

En el próximo tema veremos como interactuar con botones y formularios.