¡Vamos a poner en práctica todo lo aprendido hasta ahora!
En primer lugar necesitaremos definir nuestras herramientas de trabajo. Utilizaremos un editor de código fuente para escribir nuestro código. Existen una gran variedad de editores pero nosotros trabajaremos con Visual Studio Code debido a su popularidad y su compatibilidad para todos los Sistemas.
Para poder visualizar los resultados usaremos el navegador web Firefox. Éste tiene una herramienta de trabajo fundamental para el desarrollo. En concreto, usaremos la consola de JavaScript.
Ejercicio 1
El primer ejercicio consiste en crear nuestro primer ¡Hola mundo!
Empezaremos creando un archivo holamundo.html. Éste contiene las etiquetas <script></script> que nos permiten ejecutar programas escritos con JavaScript.
El código podremos incluirlo dentro de las etiquetas o referenciandolo desde otro archivo aparte usando el atributo src de la etiqueta <script>. En tal caso, crearemos también un archivo (en la misma carpeta) llamado script.js.
<!DOCTYPE html>
<html lang="es">
<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>JS: Hola mundo</title>
</head>
<body>
<h2>Hola mundo en Javascript</h2>
<p>El primer <em>Hola mundo</em> lo escribimos entre las etiquetas de <code>script</code></p>
<script>
console.log("Hola mundo");
</script>
<p>El segundo <em>Hola mundo</em> lo llamamos desde el <code>src</code></p>
<script src="script.js"></script>
</body>
</html>En el archivo script.js (que lo llamamos con src=»script.js» desde holamundo.html) además de usar el console.log() para escribir en consola, vamos a usar la función alert() para que nos muestre un mensaje en el navegador en forma de ventana.
/*
Esto es un comentario
*/
// Esto también es un comentario de linea
console.log("Hola mundo en consola de javascript"); // Esto se muestra en la consola
alert("Hola mundo en un alert"); // Eso se mostrará en una ventana de alerta en el navegador
Con este ejercicio, ¡ya tenemos nuestro primer programa escrito con JavaScript desde cero!
Ejercicio 2
<script src="script.js"></script>En el archivo script.js trabajaremos creando distintas variables que almacenarán distintos tipos de datos. Posteriormente, lo mostraremos por consola.
/* Variable de tipo cadena de texto */
let nombre = 'Pablo';
/* Variable de tipo numerico */
let numeroEntero = 9;
let numeroDecimal = 9.5;
let puntuacion = 99;
/* Variable de tipo boolean */
let tieneMascota = true;
/* Variable indefinida */
let unaVariable;
/* Variable de tipo nulo */
let nulo = null;
console.log(nombre);
console.log(puntuacion);
console.log(tieneMascota);
console.log(unaVariable);
console.log(nulo);Y el resultado que observaremos por consola será el siguiente:
Ejercicio 3
/* Declarar variable sin asignar valor */
let unaVariable;
console.log(unaVariable);
/* Asignar un valor */
unaVariable = "hola";
console.log(unaVariable);
/* Declarar una variable y asignar su valor */
let otraVariable = "que tal?";
console.log(otraVariable);
unaVariable = 'muy bien';
console.log(unaVariable);
/* Esta variable es un numero */
let puntuacion = 100;
console.log(puntuacion);
puntuacion = "ya no es un numero"; // Esto está permitido pero NO es recomendable;
console.log(puntuacion);
/*
Usamos "const" para definir constantes que no cambiarán su valor en el tiempo
*/
const numeroPi = 3.1416;
console.log(numeroPi);
/* Este bloque daría un error
numeroPi = 2.73;
console.log(numeroPi);
*/
/*
Si usamos "var" para definir variables, podremos hacer uso de esa variable y modificar su valor
mientras se ejecute el programa
*/
var texto = "Perro";
console.log(texto);
{
var texto = "Gato";
console.log(texto);
}
console.log(texto);
/*
Sin embargo, cuando usamos "let" su uso y modificación sólo se mantiene dentro de un bloque de código.
*/
let textoLet = "Perro";
console.log(textoLet);
{
let textoLet = "Gato";
console.log(textoLet);
}
console.log(textoLet);Cuyo resultado por consola será el siguiente:
