Corre tu primer script de Javascript fácilmente desde tu navegador web
En este artículo inicial del curso de Javascript, aprenderás un poco más de detalles sobre los fundamentos de JavaScript, como lenguaje de programación que te permitirá dar vida a tus páginas web y nos encargaremos de ejecutar tu primer script de Javascript (como el que vimos en el artículo de introducción) directamente en el navegador web paso a paso. No necesitas experiencia previa en programación, ¡así que no te preocupes! Vamos a comenzar.
Paso 1: Creando tu archivo HTML
Podrá sonar extraño, pero para ejecutar un pequeño script de Javascript, necesitas es un archivo HTML (no uno de JS como tal). Esto es debido a que HTML es el lenguaje de etiquetado (no de programación) que los navegadores web comprenden y además HTML es el que le indica al navegador qué parte es un script de Javascript para que este lo ejecute.
Así que, una vez aclarado lo anterior, lo primero que necesitas hacer es abrir un editor de texto plano. Existen muchos, aunque actualmente el más popular es Visual Studio Code. Si no lo tiene el bloc de notas bastará por ahora. Puedes usar Notepad (Windows), TextEdit (Mac) o cualquier otro editor que te guste. Luego, crea un nuevo archivo y guárdalo con la extensión .html. Por ejemplo, podrías llamarlo mi_primer_script.html. Recuerda, aunque se trata de Javascript como tal, es necesario que esté dentro de un HTML.
Paso 2: Estructura básica de un documento HTML
Como ya sabes en este punto, no solo basta con tener código de Javascript y ya, sino que necesitamos poner todo dentro de un HTML. Y, dicho HTML, debe ser válido, por lo cual, vamos a construir un HTML básico, para luego poner allí dentro el Javascript.
Un documento HTML tiene una estructura básica que debemos seguir. No te preocupes si parece un poco confuso al principio, te explicaré cada parte. Copia y pega este código en tu archivo .html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primer Script de JavaScript</title>
</head>
<body>
<!-- Aquí irá nuestro código JavaScript luego -->
</body>
</html>
En este código, estamos estableciendo la estructura básica del documento HTML. Veamos una por una las partes que lo componen:
La etiqueta <!DOCTYPE html> especifica que estamos utilizando HTML. Por lo tanto, el navegador estará leyendo un documento HTML. Recuerda que HTML no es un lenguaje de programación como sí lo es Javascript, sino que es solo un lenguaje de etiquetado (por eso de habla de etiquetas).
El elemento <html> es la raíz de todo el documento HTML, y dentro de él, encontramos dos secciones principales: el
<head> y el <body>.En el <head>, incluimos metadatos e información sobre la página, como el conjunto de caracteres utilizado (
<meta charset="UTF-8">) y una etiqueta de título para mostrar el nombre de la página en la pestaña del navegador.El <body> es donde colocamos todo el contenido visible de nuestra página web. Es aquí donde pondremos nuestro código JavaScript en el siguiente paso.
Paso 3: Agregando el script de JavaScript en el documento HTML
¡Es hora de agregar el JavaScript! Dentro del elemento <body>, vamos a poner nuestro primer script. Esto es lo que debes hacer:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primer Script de JavaScript</title>
</head>
<body>
<script>
// Nuestro primer script de JavaScript
alert("¡Hola, Mundo!");
</script>
</body>
</html>
¡Listooooo! En este ejemplo, estamos usando la función alert() de Javascript para mostrar un mensaje emergente en el navegador con el texto "¡Hola, Mundo!". Cuando cargamos la página, podrás ver el mensaje. Por supuesto, puedes cambiar el mensaje por el texto que quieras. Solo asegúrate de mantenerlo dentro de las comillas.
Paso 4: Guarda y abre tu Archivo HTML para ejecutar el Javascript
¡Ya casi estamos! Guarda los cambios en tu archivo HTML (el creado en el paso 1) y ábrelo en tu navegador web (ya sea Chrome, Firefox, Opera, Safari, etc.). Puedes hacer doble clic en el archivo o, si ya tienes un navegador abierto, simplemente arrastra y suelta el archivo en la ventana del navegador.
Verás un mensaje emergente con el texto "¡Hola, Mundo!" ¡Eso significa que acabas de ejecutar tu primer script de JavaScript en el navegador! Puedes hacer clic en aceptar y ya eso será todo. No te preocupes, es normal que el documento esté en blanco (puesto que el body no contiene ningún elemento visible) y que no suceda nada más (dado que el script solo muestra el mensaje una vez).
¡Bien hecho! Has aprendido cómo ejecutar tu primer script de JavaScript en tu navegador. Esto es solo el comienzo de tu viaje en el mundo de la programación web con Javascript. Sin embargo, en este punto ya sabes cosas esenciales como HTML y sus etiquetas mínimas necesarias, junto con poner tu código Javascript en la etiqueta script de tu HTML y que es el navegador quien que lo ejecutará. Nos leemos.
La última actualización de este artículo fue hace 8 meses
