Introducción a JavaScript

¿Qué es JavaScript?

Piensa en un sitio web. El HTML es el esqueleto que le da estructura y el CSS es la piel y la ropa que le dan su aspecto. Pero, ¿qué hace que el sitio haga algo? ¿Qué permite que un botón reaccione cuando haces clic en él, o que aparezca una ventana emergente?

Ese es el trabajo de JavaScript. Es el lenguaje de programación que da vida a las páginas web. Añade interactividad, haciendo que las experiencias en la web sean dinámicas en lugar de estáticas. A diferencia de otros lenguajes que se ejecutan en un servidor, JavaScript se ejecuta directamente en tu navegador web.

Escribiendo tu primer código

Cada lenguaje tiene sus propias reglas gramaticales, y JavaScript no es una excepción. Esto se conoce como su sintaxis. Las instrucciones en JavaScript se llaman sentencias y, tradicionalmente, terminan con un punto y coma (;).

Una de las primeras cosas que aprenderás es a almacenar información. Para ello, utilizamos variables.

variable

noun

Un contenedor con nombre para almacenar datos a los que un programa puede hacer referencia y manipular.

Imagina una variable como una caja etiquetada en la que puedes guardar cosas. Primero, creas la caja (declaración) y luego pones algo dentro (asignación).

Para declarar una variable en JavaScript moderno, usamos la palabra clave let.

// 1. Declarar una variable llamada 'puntuacion'
let puntuacion;

// 2. Asignarle el valor 100
puntuacion = 100;

También puedes hacer ambas cosas en un solo paso:

// Declarar y asignar al mismo tiempo
let nombreUsuario = "Alicia";

A veces, querrás crear una variable cuyo valor nunca cambiará. Para esto, usamos const.

// Una constante para el número de días en una semana
const diasEnUnaSemana = 7;

// Si intentas cambiarlo más tarde, obtendrás un error.
// diasEnUnaSemana = 8; // Esto causará un error

Usa let para variables que pueden cambiar su valor y const para variables que siempre deben mantener el mismo valor. Es una buena práctica preferir const siempre que sea posible.

Tipos de datos básicos

Las variables pueden contener diferentes tipos de datos. JavaScript tiene varios tipos de datos "primitivos", que son los bloques de construcción más básicos. Veamos los más comunes.

Tipo de dato	Descripción	Ejemplo
Number	Para números, ya sean enteros o decimales.	`let edad = 25;`
String	Para texto. Se envuelve entre comillas.	`let saludo = "¡Hola!";`
Boolean	Representa `true` (verdadero) o `false` (falso).	`let esMayorDeEdad = true;`
Undefined	Una variable que ha sido declarada pero no asignada.	`let direccion;`
Null	Representa la ausencia intencional de cualquier valor.	`let error = null;`

Numbers (Números)

El tipo Number se utiliza para cualquier valor numérico, incluyendo enteros y números con decimales. Puedes realizar operaciones matemáticas con ellos.

let precio = 19.99;
let cantidad = 3;
let total = precio * cantidad; // total será 59.97

Strings (Cadenas de texto)

Los Strings se utilizan para almacenar texto. Puedes usar comillas simples (' ') o dobles (" ") para crearlos.

let nombre = "Juana";
let apellido = 'Pérez';
let nombreCompleto = nombre + " " + apellido; // nombreCompleto será "Juana Pérez"

Booleans (Booleanos)

Los Booleans son simples interruptores de verdadero/falso. Son fundamentales para la toma de decisiones en el código, algo que verás más adelante.

let tieneLicencia = true;
let estaCansado = false;

Undefined y Null

Estos dos pueden parecer similares, pero tienen una diferencia clave.

undefined es el valor que JavaScript le da a una variable si no le has asignado uno. Es el estado por defecto de "vacío".

let mascota;
// En este punto, el valor de 'mascota' es undefined.

null, por otro lado, es un valor que tú, como programador, asignas intencionadamente. Se usa para indicar que una variable no tiene valor a propósito.

let cocheSeleccionado = null;
// El usuario aún no ha elegido un coche, así que lo establecemos como null.

Piensa en ello de esta manera: undefined es una caja vacía porque te olvidaste de poner algo dentro. null es una caja que has vaciado a propósito.

Ahora es un buen momento para poner a prueba lo que has aprendido.

Quiz Questions 1/4

¿Cuál es el papel principal de JavaScript en el desarrollo web, según la analogía del esqueleto, la piel y las acciones?

Quiz Questions 2/4

Si declaras una variable para almacenar un valor que sabes que nunca cambiará, ¿qué palabra clave es la más adecuada para usar?

Comprender estos conceptos básicos, variables y tipos de datos, es el primer paso esencial para dominar JavaScript.

Fundamentos de JavaScript