Introducción a JavaScript
JavaScript es un lenguaje de programación fundamental para el desarrollo web, conocido por su capacidad de añadir interactividad y dinamismo a las páginas. Es uno de los tres pilares de la web moderna, junto con HTML (estructura) y CSS (estilo).
Breve Historia de JavaScript
Los orígenes de JavaScript se remontan a 1995, cuando Brendan Eich de Netscape Communications creó un lenguaje de scripting en tan solo diez días, inicialmente llamado Mocha, luego LiveScript y finalmente JavaScript. Fue diseñado para ejecutarse en el navegador Netscape Navigator 2.0. Poco después, Microsoft lanzó su propia implementación, JScript, para Internet Explorer 3.0. Esta proliferación de dialectos llevó a la estandarización por parte de ECMA International, resultando en la creación del estándar ECMAScript (ECMA-262). Este estándar define la sintaxis y semántica del lenguaje, sirviendo como base para las implementaciones de JavaScript en los navegadores web y otros entornos.
Componentes de una Implementación Completa de JavaScript
Aunque ECMAScript es el núcleo del lenguaje, una implementación completa de JavaScript en un navegador web consta de:
- ECMAScript (ES): El estándar del lenguaje central que define la sintaxis, tipos de datos, operadores, objetos estándar, sentencias y palabras reservadas. Es la base lógica del lenguaje.
- Document Object Model (DOM): Una interfaz de programación (API) para documentos HTML y XML. Permite a los programas y scripts acceder y manipular el contenido, la estructura y los estilos de los documentos. El DOM facilita la interacción entre JavaScript y el HTML/CSS de una página.
- Browser Object Model (BOM): Proporciona objetos para interactuar con el navegador web, más allá de la estructura de la página. Permite a JavaScript manipular ventanas, marcos, la ubicación (URL), el historial de navegación, e incluso el agente de usuario del navegador.
Conceptos Básicos de JavaScript
Formas de Incluir JavaScript en HTML
Existen principalmente dos maneras de integrar código JavaScript en un documento HTML:
1. Código Incrustado Directamente
El código JavaScript se escribe directamente dentro de etiquetas <script> en el documento HTML. Esto es útil para scripts pequeños y específicos de una página.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de JS Incrustado</title>
</head>
<body>
<h1>Mi Página Web Interactiva</h1>
<script>
// Un script simple para mostrar un mensaje
console.log("¡Script ejecutado directamente en el HTML!");
alert("Bienvenido a mi sitio web.");
</script>
</body>
</html>
2. Archivos Externos
El código JavaScript se guarda en un archivo separado (con extensión .js) y se enlaza al documento HTML usando el atributo src de la etiqueta <script>. Esta práctica es preferible para mantener el código más organizado, reutilizable y facilitar la caché del navegador.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de JS Externo</title>
</head>
<body>
<h1>Página con Script Externo</h1>
<!-- Enlazar el archivo script.js -->
<script src="app.js"></script>
</body>
</html>
Y el contenido del archivo app.js podría ser:
// app.js
console.log("¡Este mensaje proviene de un archivo JS externo!");
document.addEventListener('DOMContentLoaded', () => {
const encabezadoPrincipal = document.querySelector('h1');
if (encabezadoPrincipal) {
encabezadoPrincipal.textContent = "Contenido actualizado por JavaScript";
}
});
Variables, Constantes e Identificadores
Variables en JavaScript
Las variables son contenedores para almacenar valores de datos. En JavaScript, históricamente se declaraban con la palabra clave var. Sin embargo, con las versiones modernas de ECMAScript (ES6+), se recomienda usar let y const por su mejor manejo del ámbito (scope) y para evitar ciertos errores comunes.
var: Declara una variable con ámbito de función o global. Puede ser redeclarada y reasignada.let: Declara una variable con ámbito de bloque. Puede ser reasignada, pero no redeclarada en el mismo ámbito.const: Declara una constante con ámbito de bloque. Debe ser inicializada al declararla y su valor no puede ser reasignado (aunque el contenido de un objeto o array declarado conconstsí puede modificarse).
Ejemplos de declaración de variables:
// Usando 'var' (aún válido, pero con algunas particularidades)
var nombreCliente = "Ana López";
var precioTotal = 150.75;
// Usando 'let' (preferido para variables cuyo valor puede cambiar)
let contadorItems = 0;
contadorItems = 5; // Se puede reasignar
// let contadorItems = 10; // Error: 'contadorItems' ya ha sido declarado
// Usando 'const' (preferido para valores que no deberían cambiar)
const TASA_IMPUESTO = 0.16;
const MAX_INTENTOS = 3;
// TASA_IMPUESTO = 0.18; // Error: Asignación a una constante
JavaScript es un lenguaje de tipado dinámico, lo que significa que no es necesario especificar el tipo de dato de una variable al declararla; el tipo se determina automáticamente en tiempo de ejecución según el valor asignado.
Reglas para nombrar variables (identificadores):
- Deben comenzar con una letra (
a-z,A-Z), un guion bajo (_) o un signo de dólar ($). - No pueden comenzar con un número.
- Pueden contener letras, números, guiones bajos y signos de dólar.
- Son sensibles a mayúsculas y minúsculas (
miVariablees diferente demivariable). - No se pueden usar palabras reservadas de JavaScript (como
if,for,function,let,const, etc.) como nombres de variables.
Convenciones de Nomenclatura Comunes:
- Camel Case (Camel Hump): La primera letra de la primera palabra es minúscula, y la primera letra de cada palabra subsiguiente es mayúscula (ej.
miPrimeraVariable,calcularTotal). Esta es la convención más común en JavaScript. - Pascal Case (Upper Camel Case): La primera letra de cada palabra es mayúscula (ej.
MiClase,UsuarioRegistrado). A menudo utilizada para nombres de clases o constructores. - Snake Case: Todas las letras son minúsculas y las palabras están separadas por guiones bajos (ej.
nombre_usuario,total_ventas). Aunque no es la convención principal de JavaScript, se encuentra en algunos contextos.
Constantes (Valores Literales)
En el contexto de la programación, una "constante" puede referirse a dos cosas: a un valor literal que aparece directamente en el código (ej. 10, "Texto", true) o a una variable declarada con const cuyo valor no se puede reasignar, como se explicó anteriormente.
Identificadores
Los identificadores son los nombres que se dan a las variables, funciones, clases y otros elementos en el código. Deben seguir las reglas de nombrado mencionadas anteriormente y no pueden ser palabras reservadas del lenguaje.
Tipos de Datos en JavaScript
JavaScript posee varios tipos de datos primitivos que son fundamentales para la manipulación de información. Los principales son:
/*
* number -> Números (enteros y flotantes)
* boolean -> Valores lógicos (verdadero/falso)
* string -> Cadenas de texto
* undefined -> Valor asignado a variables no inicializadas
* null -> Ausencia intencional de cualquier valor o objeto
* symbol -> Valores únicos e inmutables (introducido en ES6)
* bigint -> Números enteros de precisión arbitraria (introducido en ES11)
*/
También existe el tipo de dato object para colecciones de datos y estructuras más complejas.
Tipo Numérico (number)
En JavaScript, no hay distinción explícita entre números enteros y de punto flotante. Todos los números se representan internamente como números de punto flotante de doble precisión de 64 bits (según el estándar IEEE 754), similar al tipo double en lenguajes como Java o C.
- Números Enteros: Ejemplos:
25,-100,1000000. El rango de enteros que pueden representarse con precisión es entre-(2^53 - 1)y(2^53 - 1). - Números de Punto Flotante: Ejemplos:
3.1416,-0.75,6.022e23(notación científica para 6.022 x 10^23). - Representación de Números en Diferentes Bases:
- Decimal: La forma predeterminada (ej.
87). - Hexadecimal: Prefijo
0x(ej.0x57es 87 en decimal). - Octal: Prefijo
0o(desde ES6, ej.0o127es 87 en decimal). Históricamente, se usaba un0como prefijo para octal, pero esta sintaxis está obsoleta y puede generar errores en modo estricto. - Binario: Prefijo
0b(desde ES6, ej.0b1010111es 87 en decimal).
- Decimal: La forma predeterminada (ej.
Ejemplos de Conversiones Numéricas entre Bases:
Binario: 1010 1100 <---> Hexadecimal: 0xAC <---> Decimal: 172
Binario: 010 101 100 <---> Octal: 0o254 <---> Decimal: 172
Tipo Cadena de Texto (string)
Las cadenas de texto son secuencias de caracteres Unicode. Se definen encerrando el texto entre comillas simples (') o dobles ("). JavaScript no tiene un tipo de dato separado para caracteres individuales.
let saludoInicial = '¡Hola, visitante!';
let productoBuscado = "Televisor Smart";
let descripcionProducto = `El artículo cuesta ${1250.99}.`; // Las comillas invertidas permiten plantillas de cadena (ES6+)
Caracteres de Escape Comunes en Cadenas:
\n: Nueva línea\t: Tabulación\': Comilla simple\": Comilla doble\\: Barra invertida
Tipo Booleano (boolean)
El tipo booleano solo puede tener dos valores: true (verdadero) o false (falso). Se utilizan comúnmente en estructuras de control de flujo (como if/else, while) y para representar estados lógicos.
let estaConectado = true;
let permisoAcceso = false;
// Ejemplo de uso en una estructura condicional
let nivelUsuario = 7;
if (nivelUsuario >= 5) {
permisoAcceso = true;
console.log("Acceso concedido al área VIP.");
} else {
permisoAcceso = false;
console.log("Acceso denegado. Nivel insuficiente.");
}
console.log(`¿Tiene permiso de acceso? ${permisoAcceso}`); // Output: ¿Tiene permiso de acceso? true
Tipos null y undefined
undefined
El tipo undefined tiene un único valor: undefined. Este valor se asigna automáticamente a las variables que han sido declaradas pero no inicializadas. También es el valor que devuelven las funciones que no tienen una declaración return explícita o que simplemente usan return; sin un valor.
let variableNoInicializada;
console.log(variableNoInicializada); // Output: undefined
function obtenerDatos() {
// Esta función no retorna ningún valor explícitamente
}
console.log(obtenerDatos()); // Output: undefined
null
El tipo null tiene un único valor: null. Representa la ausencia intencional de cualquier valor o la no referencia a un objeto. Es un valor que se asigna explícitamente para indicar que una variable no apunta a ningún objeto o valor significativo.
let objetoConfiguracion = null;
console.log(objetoConfiguracion); // Output: null
// Comparación entre null y undefined
console.log(null == undefined); // Output: true (comparación laxa de valores, ignorando el tipo)
console.log(null === undefined); // Output: false (comparación estricta, considera tipo y valor)
Aunque null == undefined es verdadero, es importante recordar que tienen significados distintos: undefined denota una varible no inicializada, mientras que null se usa para indicar explícitamente la ausencia de un valor o la referencia a un objeto.