Primera clase de Programación#

Instalación del IDE y extensiones#

Instalar Visual Studio Code (VSCode)#

Ve al sitio de descargas de Visual Studio Code y descarga la versión correspondiente a tu sistema operativo.
Ejecuta el instalador y acepta los términos de la licencia.
Haz clic en el botón “Next” (normalmente no es necesario modificar las opciones) hasta completar la instalación.

Instalar la extensión Live Server#

Cuando VSCode se abre, el último icono de la columna izquierda permite instalar extensiones.

Debes buscar e instalar Live Server.

Primera aplicación web#

El primer programa recomendado al empezar a aprender un lenguaje es “Hello World”. Este programa simplemente escribe el mensaje “Hello World” en la pantalla.

No importa si aún no sabes nada del lenguaje; copia el código y sigue unas instrucciones para comprobar que el entorno que has instalado funciona correctamente. También puede servir como plantilla para crear tus primeros programas.

En el caso de aplicaciones web, aunque todo el código puede ponerse en un solo archivo, se recomienda separarlo para facilitar el mantenimiento a medida que la aplicación crece. Por ahora, la separación más simple es:

Un archivo HTML donde irá el contenido del documento (texto, imágenes, enlaces…).
Un archivo CSS donde poner los estilos para distintos tipos de elementos (tipo y tamaño de fuente general, encabezados…).
Un archivo JS donde escribiremos el código JavaScript que ejecutará la aplicación.

Código HTML, CSS y JavaScript#

Primero, necesitas crear una carpeta para el proyecto. Se recomienda crear la estructura PROG → INTRODUCTION → HELLO dentro de tu carpeta de usuario.

Luego, abre VSCode y, en el menú principal, selecciona File → Open Folder para abrir la carpeta HELLO que fue creada anteriormente. Al abrir una carpeta por primera vez, te preguntará si confías en los autores de la carpeta y de los archivos que contiene: marca la casilla y haz clic en el botón Yes, I trust the authors.

En la columna EXPLORER aparecerá la carpeta HELLO. Haciendo clic derecho dentro y eligiendo la opción New File… crearás un nuevo archivo y tendrás que darle un nombre.

Debes crear los archivos: hello.html y hello.js (por ahora, no es necesario crear el archivo de estilos). Al seleccionar un archivo, se abrirá en la ventana principal y deberás copiar el código correspondiente que se muestra a continuación.

Documento HTML (hello.html):#

1
<!doctype html>
2
<html lang="en">
3
    <head>
4
        <title>Hello</title>
5
        <meta charset="UTF-8" />
6
        <script defer src="hello.js"></script>
7
    </head>
8

9
    <body>
10
    </body>
11
</html>

Documento JavaScript (hello.js):#

1
"use strict";
2

3
// El método alert() se usa para mostrar mensajes y datos
4
alert("Hello World");

Ejecutar la aplicación#

Para abrir la aplicación en un navegador web, haz clic derecho sobre el archivo hello.html y selecciona la opción Open with Live Server.

Esto hará que la aplicación se abra en el navegador predeterminado y muestre un mensaje con el texto “Hello World”. Si modificas y guardas el código de los archivos de la página (o pulsando la tecla F5), el mensaje se mostrará de nuevo.

Manipulación del DOM - Modificar contenido HTML#

Más allá de mostrar alertas simples, JavaScript puede interactuar con y modificar el contenido HTML de tu página web. A esto se le llama manipulación del DOM (Document Object Model).

A continuación, un ejemplo de cómo seleccionar y modificar un elemento HTML:

1
let paragraf1 = document.getElementById("p1");
2
paragraf1.innerHTML = "This is the second paragraph";

Explicación:#

document.getElementById("p1") - Este método busca un elemento HTML que tenga un atributo id con el valor “p1”. Devuelve una referencia a ese elemento.
let paragraf1 = - Guardamos la referencia al elemento HTML en una variable llamada paragraf1. Esto nos permite trabajar con ese elemento más adelante.
paragraf1.innerHTML = - La propiedad innerHTML permite cambiar el contenido dentro del elemento HTML. Podemos poner texto, etiquetas HTML o ambos.
"This is the second paragraph" - Este es el nuevo contenido que reemplazará lo que hubiera dentro del elemento con id “p1”.

Ejemplo completo:#

Para verlo en acción, necesitas modificar tu archivo HTML para incluir un párrafo con un id:

1
<!doctype html>
2
<html lang="en">
3
    <head>
4
        <title>Hello</title>
5
        <meta charset="UTF-8" />
6
        <script defer src="hello.js"></script>
7
    </head>
8

9
    <body>
10
        <p id="p1">This is the original paragraph content</p>
11
    </body>
12
</html>

Y tu archivo JavaScript contendrá:

1
"use strict";
2

3
// Primero muestra el alert
4
alert("Hello World");
5

6
// Luego modifica el contenido del párrafo
7
let paragraf1 = document.getElementById("p1");
8
paragraf1.innerHTML = "This is the second paragraph";

Cuando ejecutes esta aplicación, primero verás el alert de “Hello World” y, tras cerrarlo, verás que el texto del párrafo en la página web ha cambiado de “This is the original paragraph content” a “This is the second paragraph”.