1.1.

Introducción a JavaScript
JavaScript es un lenguaje de programación que "da vida" a las páginas web. Los
programas en JavaScript, llamados scripts, se pueden escribir directamente en
HTML y se ejecutan automáticamente al cargar la página, sin necesidad de
compilación especial como Java.

Origen del Nombre y su Creador

Brendan Eich desarrolló JavaScript en 1995 mientras trabajaba en Netscape
Communications Corporation. El lenguaje fue creado en tan solo 10 días, y
originalmente se llamó LiveScript. Sin embargo, fue renombrado a JavaScript
para aprovechar la popularidad de Java en ese momento. A pesar de la similitud
en el nombre, JavaScript es un lenguaje independiente regido por la
especificación ECMAScript.

Motores de JavaScript
Los scripts de JavaScript son procesados por motores como V8 (utilizado en
Chrome) y SpiderMonkey (en Firefox). Estos motores analizan, compilan y
ejecutan el código, optimizando su rendimiento para una ejecución eficiente.
Qué puede hacer JavaScript en el navegador:
• Manipular el HTML: Permite agregar y modificar contenido y estilos.
• Reaccionar a acciones del usuario: Se ejecuta con clics, movimientos del
ratón y teclas.
• Realizar solicitudes de red: Permite descargar y cargar archivos usando
AJAX.
• Gestionar cookies: Muestra mensajes y realiza preguntas al usuario.
• Almacenar datos: Permite guardar información en el almacenamiento
local del navegador.
Qué NO puede hacer JavaScript en el navegador:
• Acceso a archivos: No puede leer o escribir archivos directamente en el
disco duro, salvo de forma limitada.
• Interacción con dispositivos: Requiere permiso para usar la cámara o el
micrófono.
• Comunicación entre pestañas: No puede acceder a la información de
otras pestañas, salvo que compartan el mismo origen (por la "política del
mismo origen").
 • Limitaciones de red: JavaScript puede comunicarse con el servidor de la
página actual, pero el acceso a otros dominios está restringido, salvo que
haya una política de permisos como CORS (Cross-Origin Resource
Sharing).
Importante: Estas limitaciones no aplican cuando JavaScript se ejecuta en otros
entornos, como en servidores (Node.js).
Características Únicas:
JavaScript se integra perfectamente con HTML y CSS, es fácil de usar y
compatible con la mayoría de los navegadores.
Lenguajes Transpilados a JavaScript:
Varios lenguajes se transpilan a JavaScript, cada uno con características propias:
• CoffeeScript: Ofrece una sintaxis más clara y concisa.
• TypeScript: Agrega tipado estricto a JavaScript.
• Brython: Permite escribir en Python, que luego se convierte en
JavaScript.
Conclusión:
JavaScript ha evolucionado de ser un lenguaje para navegadores a convertirse en
una tecnología versátil utilizada en múltiples entornos, tanto del lado del cliente
como del servidor. Comprender JavaScript es esencial para el desarrollo web
moderno.

1.1. Manuales y especificaciones

Este libro te enseña JavaScript paso a paso, pero necesitarás más recursos
después:
• Especificación ECMA-262: Es el documento más completo sobre
JavaScript. Aunque es difícil de leer, es la mejor fuente para entender el
lenguaje. Se actualiza cada año y puedes encontrarlo en
tc39.es/ecma262. Para conocer nuevas funciones en desarrollo, visita
github.com/tc39/proposals.
Manuales:
• MDN JavaScript Reference: Es el manual más útil, con ejemplos y
explicaciones sobre funciones. Accede a él en developer.mozilla.org.
Busca información usando “MDN” en Google para obtener respuestas
rápidas.
 Tablas de compatibilidad:

• Can I Use: Ve a caniuse.com para saber qué funciones de JavaScript son

compatibles con diferentes navegadores.
• Kangax Compatibility Table: Visita kangax.github.io/compat-table para
ver la compatibilidad de características específicas.
1.2. Editores de Codigo:
Son herramientas esenciales para los programadores. Se dividen en dos tipos
principales: IDEs y editores livianos. La mayoría de los desarrolladores utilizan
ambos, dependiendo de la tarea.
IDE (Integrated Development Environment)
Los IDEs son editores avanzados que manejan proyectos completos. Ofrecen
características como autocompletado avanzado, integración con control de
versiones (como git), y herramientas para pruebas y depuración. Ejemplos
destacados:
• Visual Studio Code: Gratuito y multiplataforma (Windows, macOS,
Linux). Ideal para desarrollo web y tiene una gran cantidad de
extensiones.
• WebStorm: IDE de pago, multiplataforma, con un enfoque fuerte en
JavaScript y desarrollo web.
• Visual Studio: Solo para Windows, centrado en la plataforma .NET,
pero también soporta otros lenguajes. La versión gratuita es Visual
Studio Community.
Editores livianos
Estos son más rápidos y simples que los IDEs, perfectos para abrir y editar
archivos de manera instantánea. Aunque no tienen todas las características de
un IDE, muchos soportan plugins para autocompletado y análisis de código.
Ejemplos:

• Sublime Text: Multiplataforma, rápido y con muchas funcionalidades,

pero es de pago (con opción de prueba gratuita).
• Notepad++: Gratuito y exclusivo para Windows, sencillo pero efectivo
para tareas rápidas.
Cada uno puede usar el editor que quiera.

Consola de Desarrollador:
El código es propenso a errores, y como programador, es casi seguro que
cometerás algunos. Sin embargo, los navegadores no muestran
automáticamente estos errores al usuario, lo que dificulta la identificación y
corrección de problemas en los scripts.
Para ayudar a los desarrolladores, se han incorporado herramientas de
desarrollo en los navegadores. Los más utilizados son Chrome y Firefox, ya que
ofrecen las mejores características. Otros navegadores también tienen
herramientas, pero suelen estar en proceso de actualización.
Cómo Usar la Consola en Google Chrome
• Abre la página bug.html, donde hay un error en el código JavaScript.
• Accede a las herramientas presionando F12 o Cmd+Opt+J en Mac.
En la pestaña Consola, podrás ver:
• Mensajes de error (en rojo) con detalles sobre lo que salió mal (como
un comando desconocido).
• Un enlace que indica la línea donde ocurrió el error.
• Un símbolo azul > donde puedes escribir y ejecutar comandos
JavaScript al presionar Enter.
Entrada Multilínea
Para ingresar múltiples líneas de código, utiliza Shift+Enter para crear nuevas
líneas sin ejecutar el código.
Uso en Otros Navegadores
• La mayoría de los navegadores, como Firefox y Edge, utilizan F12 para
abrir las herramientas de desarrollador.
• En Safari (solo para Mac), primero debes habilitar el "Menú de
desarrollo" en Preferencias > Avanzado, y luego puedes abrir la consola
con Cmd+Opt+C.
Resumen
Las herramientas para desarrolladores te permiten ver errores, ejecutar
comandos y examinar variables.
• Se abren generalmente con F12 en Windows. En Mac: Cmd+Opt+J
(Chrome) y Cmd+Opt+C (Safari, después de habilitar el menú).
Ahora que tienes el entorno listo, puedes comenzar a trabajar con JavaScript en
la siguiente sección.

2.1. Hola Mundo:

La Etiqueta <script>
Los programas de JavaScript se insertan en documentos HTML utilizando la
etiqueta <script>. Por ejemplo:
<!DOCTYPE HTML>
<html>
<body>
<p>Antes del script...</p>
<script>
alert('¡Hola, mundo!');
</script>
<p>...Después del script.</p>
</body>
</html>
El código dentro de <script> se ejecuta automáticamente al cargar la página.
Marcado Moderno
• Atributo type: Antes, se usaba para especificar el tipo de script
(type="text/javascript"), pero ahora no es necesario, ya que JavaScript
es el lenguaje predeterminado.
• Atributo language: Este atributo ya no se utiliza, ya que JavaScript es el
único lenguaje disponible.
• Comentarios antiguos: En el pasado, se incluían comentarios para
ocultar scripts de navegadores que no los entendían. Esto no es
necesario hoy en día.
Ejemplo de comentarios:
Antiguo:
<script type="text/javascript"><!--
alert('¡Hola, mundo!'); // Este comentario ocultaba el código de navegadores
antiguos
// --></script>
Moderno:
<script>
 alert('¡Hola, mundo!'); // Este código es visible para todos los navegadores
</script>
Scripts Externos
Si tienes mucho código JavaScript, es recomendable usar un archivo separado.
Puedes adjuntar un archivo con el atributo src:
<script src="/path/to/script.js"></script>
Esto puede ser una ruta relativa o una URL completa:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js">
</script>
Para múltiples scripts, se utilizan varias etiquetas:
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
Consideraciones

• Código en HTML vs. Archivos Externos: Generalmente, solo se colocan

scripts simples directamente en HTML; los más complejos se guardan
en archivos separados para mejorar el rendimiento al ser almacenados
en caché.
• Regla de src: Si un script tiene el atributo src, el contenido interno se
ignora. Por lo tanto, no puedes usar src y tener código JavaScript en la
misma etiqueta.
Resumen
Usa la etiqueta <script> para añadir código JavaScript a una página.
Los atributos type y language ya no son necesarios.
Para scripts externos, utiliza <script src="path/to/script.js"></script>.

2.2. Estructura de Código:

Sentencias:
• Las sentencias son un conjunto de expresiones que realizan acciones,
como alert('¡Hola, mundo!'), que muestra un mensaje.
• Las sentencias se pueden separar con punto y coma (;), aunque no
siempre es necesario. Por ejemplo:
alert('Hola'); alert('Mundo');
Para mejorar la legibilidad, se recomienda escribir cada sentencia en líneas
separadas:
alert('Hola');
alert('Mundo');
Punto y Coma
En la mayoría de los casos, se puede omitir el punto y coma si hay un salto de
línea. JavaScript asume un punto y coma "implícito".
Sin embargo, hay excepciones, como en:
alert(3 +
1
+ 2);
En este caso, no se necesita un punto y coma.
Un ejemplo de error es omitir el punto y coma:
alert("Hello")
[1, 2].forEach(alert);

• Esto provoca que el código no funcione como se espera porque

JavaScript lo interpreta incorrectamente.
Comentarios
Los comentarios son esenciales para la claridad del código y no afectan su
ejecución.
Los comentarios de una línea comienzan con //:
// Este es un comentario.
alert('Hello'); // Comentario tras una sentencia.
Los comentarios de varias líneas comienzan con /* y terminan con */:
/* Este es un comentario
que ocupa varias líneas. */
alert('Hola');
No se pueden anidar comentarios de varias líneas:
/*
 /* comentario anidado ?!? */ // Esto genera un error.
*/
alert('Mundo');
• Usar comentarios es una buena práctica que facilita la comprensión del
código.
Consejos Útiles
• Puedes usar atajos de teclado para comentar líneas: Ctrl+/ para
comentarios de una línea y Ctrl+Shift+/ para comentarios de varias
líneas (en Mac, usar Cmd en lugar de Ctrl).
• Los comentarios aumentan el tamaño del código, pero no afectan el
rendimiento en producción, ya que pueden ser eliminados por
herramientas de minimización antes de publicar.

2.3. El modo moderno, "use strict"

Evolución y Compatibilidad
• Evolución sin problemas: JavaScript se desarrolló durante mucho tiempo
sin romper la compatibilidad con el código existente.
• Desventaja: Los errores o decisiones incorrectas de diseño se mantenían
en el lenguaje indefinidamente.
• ECMAScript 5 (ES5): Lanzado en 2009, esta versión introdujo nuevas
características y modificó algunas existentes.
• Modo estricto: Se activa mediante la directiva "use strict", que se debe
colocar al inicio del script o de una función. Esto permite ejecutar el
código en un modo más moderno y seguro.
• Ejemplo de uso: "use strict"; // Este código funciona bajo el modo
estricto
Ubicación de "use strict": Debe estar al principio del script; cualquier comentario
es aceptable, pero no puede haber código antes de esta directiva.
• Sin reversión: No se puede desactivar el modo estricto una vez activado.
• Consola del navegador: Por defecto, la consola del navegador no utiliza el
modo estricto.

Glosario de términos
• DOM (Document Object Model): Son los nodos que representa los
elementos de una página web, permitiendo su modificación mediante
 JavaScript, la desventaja es que va cambio a cambio, lo que al final puede
hacer que sea lento.
• DOM virtual: Copia en memoria del DOM real, utilizada para optimizar el
rendimiento al actualizar todo a la vez y no uno a uno como el dom
original
• JSX: Extensión de JavaScript que permite escribir código HTML junto con
JavaScript en un mismo archivo, utilizado en frameworks como React.
• Package Manager: Herramienta para instalar, actualizar y gestionar
paquetes de software, como npm en JavaScript.
• Patrón de diseño: Soluciones reutilizables para resolver problemas
comunes en el desarrollo de software.
• Renderizar: Proceso de mostrar visualmente un elemento o página web
en el navegador.

Selección de arquitecturas y herramientas de programación

Introducción: La web ha crecido enormemente desde 1989, y el W3C que fue
creada por Tim Berners-Lee regula los estándares. Hoy en día, muchas empresas
migran sus sistemas a la nube, lo que aumenta la demanda de desarrolladores
web.
Front-end y Back-end:
• Back-end: Gestiona la lógica del servidor y las bases de datos.
• Front-end: Parte visible que maneja la interacción con el usuario usando
HTML, CSS y JavaScript.
Lenguajes de programación en entorno cliente
• HTML: Define la estructura del contenido en una página.
• CSS: Controla la apariencia visual del contenido.
• JavaScript: Lenguaje de programación que añade interactividad y
dinamismo.
Frameworks de JavaScript:
• ReactJS
• AngularJS
• Vue.js
Características de los lenguajes de script

• JavaScript: Es un lenguaje interpretado, no necesita compilación y se usa

en combinación con HTML. No genera archivos ejecutables y es fácil de
usar.
Posibilidades que ofrece JavaScript
Modificar el contenido HTML dinámicamente: JavaScript permite cambiar el
contenido de una página en respuesta a eventos como clics del usuario.
Ejemplo:
<p id="miParrafo">Texto original</p>
<button onclick="cambiarTexto()">Cambiar Texto</button>
<script>
function cambiarTexto() {
document.getElementById("miParrafo").innerHTML = "Texto modificado";
}
</script>
Explicación: Al hacer clic en el botón, la función cambiarTexto() actualiza el
contenido del párrafo.
Cambiar atributos HTML de elementos: Puedes modificar atributos como la
imagen que se muestra en un elemento <img>.
Ejemplo:
<img id="miImagen" src="imagen1.jpg" alt="Imagen original">
<button onclick="cambiarImagen()">Cambiar Imagen</button>
<script>
function cambiarImagen() {
document.getElementById("miImagen").src = "imagen2.jpg";
}
</script>
Explicación: La función cambiarImagen() cambia la imagen mostrada al modificar
el atributo src.
Cambiar el estilo CSS de los elementos: Puedes modificar el estilo de los
elementos, como el color y el tamaño de fuente.
Ejemplo:
<p id="miTexto">Este texto cambiará de estilo</p>
<button onclick="cambiarEstilo()">Cambiar Estilo</button>
<script>
function cambiarEstilo() {
var texto = document.getElementById("miTexto");
texto.style.color = "red";
texto.style.fontSize = "20px";
}
</script>
Explicación: Al hacer clic, la función cambiarEstilo() modifica el color y tamaño
del texto.

document.getElementBy y sus opciones:

Es un conjunto de métodos en JavaScript que permiten seleccionar y manipular
elementos del DOM. Existen varias opciones:
document.getElementById(id): Selecciona el primer elemento del documento
con el id especificado.
Ejemplo:
<p id="miParrafo">Texto original</p>
<script>
var parrafo = document.getElementById("miParrafo");
parrafo.innerHTML = "Texto modificado";
</script>
document.getElementsByClassName(className): Devuelve una colección de
todos los elementos que tienen la clase especificada.
Ejemplo:
<div class="miClase">Elemento 1</div>
<div class="miClase">Elemento 2</div>
<script>
var elementos = document.getElementsByClassName("miClase");
elementos[0].style.color = "blue"; // Cambia el color del primer elemento
 </script>
document.getElementsByTagName(tagName): Selecciona todos los elementos
de un tipo de etiqueta HTML específica, como <div>, <p>, <h1>, etc. Devuelve
una colección de nodos.
Ejemplo con <p>:
<p>Texto 1</p>
<p>Texto 2</p>
<script>
var parrafos = document.getElementsByTagName("p"); // Selecciona todas las
etiquetas <p>
parrafos[1].innerHTML = "Texto cambiado"; // Modifica el contenido del
segundo párrafo
</script>
Explicación: En este caso, parrafos[1] se refiere al segundo elemento <p> en la
colección, permitiendo acceder y modificar su contenido.
Comunicación con el usuario: JavaScript puede interactuar de diversas maneras
con el usuario:

• Escribir en la consola: Útil para depuración.

<script>
console.log("Mensaje en la consola");
</script>
• Modificar contenido con innerHTML:
<div id="contenido"></div>
<script>
document.getElementById("contenido").innerHTML = "Nuevo contenido
agregado dinámicamente";
</script>
• Generar HTML con document.write():
<script>
document.write("<h2>Hola, bienvenido!</h2>");
</script>

• Mostrar alertas con window.alert():

<script>
windowr.alert("Este es un mensaje de alerta.");
</script>
Resumen
• Uso de la etiqueta <script>: Es fundamental para incluir JavaScript en
páginas HTML. Se recomienda usar archivos externos cuando el código
es extenso.
• Sentencias en JavaScript: Aunque no siempre es obligatorio usar punto
y coma, se recomienda para evitar errores de interpretación.
• Comentarios: Facilitan la lectura del código, pueden ser de una línea
(//) o de varias líneas (/* */).
• "use strict": Activa el modo estricto, lo que mejora la seguridad y el
rendimiento del código. Debe colocarse al inicio del script y no puede
desactivarse una vez activado.