Definir y usar variables en JavaScript

Introducción

En este laboratorio, los participantes explorarán los conceptos fundamentales de la definición y uso de variables en JavaScript, una habilidad esencial para el desarrollo web. El laboratorio guía a los aprendices para entender el papel de JavaScript en la creación de experiencias web interactivas, configurar un entorno HTML y dominar las técnicas de declaración y manipulación de variables.

Los participantes aprenderán a declarar variables utilizando la palabra clave var, asignar valores a estas variables y mostrarlas dinámicamente en las páginas web. Siguiendo instrucciones paso a paso, los estudiantes adquirirán experiencia práctica con los principios de programación centrales de JavaScript, incluyendo convenciones de nombrado de variables y técnicas de scripting básicas que forman la base del desarrollo web moderno.

Entender JavaScript y su papel en el desarrollo web

En este paso, aprenderás sobre JavaScript y su papel fundamental en el desarrollo web. JavaScript es un lenguaje de programación poderoso y versátil que le brinda interactividad y funcionalidad dinámica a los sitios web.

JavaScript es un lenguaje de scripting de lado del cliente utilizado principalmente en los navegadores web. Permite a los desarrolladores crear páginas web interactivas y dinámicas al manipular HTML y CSS, manejar eventos del usuario y realizar cálculos complejos en tiempo real.

Las características clave de JavaScript incluyen:

Se ejecuta directamente en los navegadores web
Permite experiencias web interactivas
Puede modificar dinámicamente HTML y CSS
Apoya la programación dirigida por eventos
Se utiliza tanto para el desarrollo front-end como back-end (con Node.js)

Aquí hay un ejemplo simple para demostrar la funcionalidad básica de JavaScript:

<!doctype html>
<html>
  <head>
    <title>Introducción a JavaScript</title>
  </head>
  <body>
    <h1 id="greeting">Hola, Desarrollo Web!</h1>
    <script>
      // JavaScript puede cambiar dinámicamente el contenido de la página
      document.getElementById("greeting").innerHTML =
        "Bienvenido a JavaScript!";
    </script>
  </body>
</html>

Salida de ejemplo en el navegador:

Bienvenido a JavaScript!

Este ejemplo muestra cómo JavaScript puede modificar instantáneamente el contenido de la página web, demostrando su poder en la creación de experiencias web dinámicas.

Configurar un archivo HTML para JavaScript

En este paso, aprenderás a crear un archivo HTML que pueda incluir y ejecutar código JavaScript. HTML proporciona la estructura para las páginas web, y JavaScript agrega interactividad y funcionalidad dinámica.

Primero, navega hasta el directorio del proyecto:

cd ~/proyecto

Crea un nuevo archivo HTML llamado variables.html utilizando el WebIDE:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Variables de JavaScript</title>
  </head>
  <body>
    <h1>Aprendiendo Variables de JavaScript</h1>

    <!-- Agregaremos JavaScript aquí en los siguientes pasos -->
    <script>
      // El código JavaScript irá aquí
    </script>
  </body>
</html>

Puntos claves sobre la estructura HTML:

<!DOCTYPE html> declara que este es un documento HTML5
La etiqueta <script> es donde se escribirá el código JavaScript
Puedes colocar la etiqueta <script> en la sección <head> o <body>

Salida de ejemplo cuando se abre en un navegador:

Aprendiendo Variables de JavaScript

La etiqueta <script> te permite escribir JavaScript directamente en el archivo HTML o enlazar a un archivo JavaScript externo. En los pasos siguientes, agregaremos código JavaScript a este archivo para trabajar con variables.

Declarar variables utilizando la palabra clave var

En este paso, aprenderás a declarar variables en JavaScript utilizando la palabra clave var. Las variables son contenedores para almacenar valores de datos que se pueden utilizar y manipular a lo largo de tu código.

Abre el archivo variables.html en el WebIDE y modifica la sección <script> para agregar declaraciones de variables:

<!doctype html>
<html lang="en">
  <body>
    <script>
      // Declarando variables utilizando la palabra clave var
      var firstName = "John";
      var age = 25;
      var isStudent = true;

      // También puedes declarar una variable sin un valor inicial
      var lastName;
    </script>
  </body>
</html>

Puntos claves sobre la declaración de variables:

var se utiliza para declarar variables en JavaScript
Las variables pueden almacenar diferentes tipos de datos:
- Cadenas (texto): "John"
- Números: 25
- Valores booleanos: true o false
Puedes declarar una variable sin un valor inicial

Para ver las variables en acción, puedes utilizar console.log() para mostrar sus valores:

<script>
  var firstName = "John";
  console.log(firstName); // Muestra: John
</script>

Salida de ejemplo en la consola de desarrollador del navegador:

John

Asignar y mostrar valores de variables

En este paso, aprenderás a asignar valores a variables y mostrarlos utilizando diferentes métodos en JavaScript. A partir del paso anterior, exploraremos cómo trabajar con los valores de variables.

Abre el archivo variables.html y actualiza la sección <script> con el siguiente código:

<!doctype html>
<html lang="en">
  <body>
    <div id="output"></div>
    <script>
      // Declarando y asignando variables
      var firstName = "John";
      var age = 25;
      var isStudent = true;

      // Reasignando valores de variables
      age = 26;
      firstName = "Jane";

      // Mostrando valores utilizando console.log()
      console.log("Nombre: " + firstName);
      console.log("Edad: " + age);
      console.log("Es estudiante: " + isStudent);

      // Mostrando valores en la página web
      var outputElement = document.getElementById("output");
      outputElement.innerHTML =
        "Nombre: " +
        firstName +
        "<br>Edad: " +
        age +
        "<br>Es estudiante: " +
        isStudent;
    </script>
  </body>
</html>

Puntos claves sobre la asignación y visualización de variables:

Utiliza = para asignar o reasignar valores a variables
console.log() muestra valores en la consola de desarrollador del navegador
document.getElementById().innerHTML puede mostrar valores directamente en la página web
Puedes concatenar cadenas y variables utilizando +

Salida de ejemplo en la consola de desarrollador del navegador:

Nombre: Jane
Edad: 26
Es estudiante: true

Salida de ejemplo en la página web:

Nombre: Jane
Edad: 26
Es estudiante: true

Practicar las convenciones de nombrado de variables

En este paso, aprenderás sobre las mejores prácticas para nombrar variables en JavaScript. Un buen nombrado de variables es fundamental para escribir código limpio, legible y mantenible.

Abre el archivo variables.html y actualiza la sección <script> con los siguientes ejemplos:

<!doctype html>
<html lang="en">
  <body>
    <div id="output"></div>
    <script>
      // Buenas convenciones de nombrado de variables

      // Utiliza camelCase para los nombres de variables
      var firstName = "John";
      var lastName = "Doe";
      var age = 25;
      var isStudent = true;

      // Nombres descriptivos y significativos
      var totalPrice = 99.99;
      var discountPercentage = 10;
      var calculatedDiscount = totalPrice * (discountPercentage / 100);

      // Evita variables de una sola letra (excepto en casos específicos como los bucles)
      var x = 10; // Malo
      var width = 10; // Bueno

      // Muestra los resultados
      console.log("Nombre completo: " + firstName + " " + lastName);
      console.log("Precio con descuento: $" + calculatedDiscount);

      var outputElement = document.getElementById("output");
      outputElement.innerHTML =
        "Nombre completo: " +
        firstName +
        " " +
        lastName +
        "<br>Edad: " +
        age +
        "<br>Precio con descuento: $" +
        calculatedDiscount;
    </script>
  </body>
</html>

Convenciones clave de nombrado de variables:

Utiliza camelCase (por ejemplo, firstName, lastName)
Elige nombres descriptivos y significativos
Evita nombres de variables de una sola letra
Sé consistente en tu estilo de nombrado
Utiliza sustantivos para las variables
Utiliza prefijos significativos como is para variables booleanas

Salida de ejemplo en la consola de desarrollador del navegador:

Nombre completo: John Doe
Precio con descuento: $9.999

Salida de ejemplo en la página web:

Nombre completo: John Doe
Edad: 25
Precio con descuento: $9.999

Resumen

En este laboratorio, los participantes exploran los conceptos fundamentales de las variables de JavaScript y su papel en el desarrollo web. El laboratorio comienza presentando JavaScript como un lenguaje de scripting del lado del cliente poderoso que permite experiencias web interactivas y dinámicas, destacando su capacidad para manipular HTML y CSS, manejar eventos del usuario y realizar cálculos en tiempo real.

A través de un enfoque paso a paso, los aprendices configuran un archivo HTML y empiezan a practicar la declaración de variables utilizando la palabra clave var, comprendiendo la importancia de las convenciones adecuadas de nombrado de variables y cómo asignar y mostrar los valores de las variables. Los ejercicios prácticos brindan conocimientos prácticos sobre la creación de contenido web dinámico, demostrando la versatilidad de JavaScript para transformar páginas web estáticas en experiencias de usuario interactivas y atractivas.