Manual de Estudio
JavaScript
Docente: Carlos Castro Aguirre
1
Contenido
Introducción al Manual de Estudio: JavaScript ................................................................................... 3
Historia ................................................................................................................................................ 4
Evolución de JavaScript ....................................................................................................................... 4
ECMAScript.......................................................................................................................................... 5
Tipos de datos primitivos .................................................................................................................... 5
Importancia de los tipos de datos ....................................................................................................... 7
Variables con diferencias en alcance y mutabilidad. .......................................................................... 8
Estructuras de datos en JavaScript ..................................................................................................... 9
Arreglos tipados en JavaScript ............................................................. ¡Error! Marcador no definido.
Operadores........................................................................................................................................ 10
Modelo de Concurrencia y Bucle de Eventos.................................................................................... 11
Bloques de construcción JavaScript .................................................................................................. 11
Sentencias y declaraciones ............................................................................................................... 12
Iteraciones ......................................................................................................................................... 13
Control de flujo ................................................................................................................................. 13
Funciones y clases ............................................................................................................................. 14
Introducción a los objetos JavaScript ................................................................................................ 15
Objetos globales en JavaScript .......................................................................................................... 16
Arrays ................................................................................................................................................ 16
Funciones .......................................................................................................................................... 17
Clases ESG ......................................................................................................................................... 18
JavaScript asíncrono .......................................................................................................................... 18
Promesas ........................................................................................................................................... 19
APIs en JavaScript .............................................................................................................................. 19
Tipos de APIs en JavaScript ............................................................................................................... 20
Herramientas de empaquetado ........................................................................................................ 20
2
Introducción al Manual de Estudio: JavaScript
Bienvenido al estudio del lenguaje de programación JavaScript, esencial para el desarrollo
web moderno. Este manual lo guiará a través de conceptos fundamentales. Siguiendo el
temario proporcionado, abordaremos cada tópico con definiciones, sintaxis, y ejemplos
prácticos.
Este manual servirá como un recurso de referencia durante su proceso de aprendizaje de la
asignatura. Practique con ejemplos y proyectos propios para consolidar su comprensión y
habilidades en JavaScript.
3
Historia
Los orígenes de JavaScript
JavaScript nació a mediados de los años 90, en una época en la que la web era un espacio
estático y poco interactivo. Netscape, uno de los primeros navegadores web populares,
buscaba una forma de hacer que las páginas web fueran más dinámicas y respondieran a
las acciones del usuario.
Brendan Eich, un ingeniero de Netscape, fue el encargado de crear este nuevo lenguaje de
programación. Inicialmente se llamó Mocha, luego LiveScript y finalmente se adoptó el
nombre de JavaScript para aprovechar la popularidad de Java en ese momento.
El objetivo inicial
El objetivo principal de JavaScript era permitir a los desarrolladores web crear pequeñas
aplicaciones que se ejecutaran directamente en el navegador, sin necesidad de enviar
solicitudes al servidor. Esto permitía crear interfaces de usuario más interactivas y mejorar
la experiencia del usuario.
La estandarización de ECMAScript
A pesar del éxito inicial de JavaScript, existían diferentes implementaciones del lenguaje en
los distintos navegadores, lo que generaba incompatibilidades y hacía más difícil el
desarrollo de aplicaciones web.
Para solucionar este problema, se creó el estándar ECMAScript. Este estándar define las
características y el comportamiento del lenguaje JavaScript, asegurando así que las
aplicaciones escritas en JavaScript funcionen de manera similar en todos los navegadores.
Evolución de JavaScript
Ha pasado de ser un lenguaje simple para crear pequeñas animaciones a convertirse en un
lenguaje de programación completo y poderoso, capaz de desarrollar aplicaciones web
complejas y sofisticadas.
Algunos hitos importantes en la evolución de JavaScript son:
4
AJAX: Esta tecnología permitió crear aplicaciones web más interactivas, al permitir
cargar contenido de forma dinámica sin necesidad de recargar toda la página.
[Link]: Este entorno de ejecución permitió ejecutar JavaScript fuera del
navegador, lo que abrió las puertas a la creación de aplicaciones de servidor y
aplicaciones de línea de comandos.
ES6 (ECMAScript 2015): Esta versión introdujo muchas características nuevas y
poderosas en el lenguaje, como las clases, las funciones flecha, los módulos y más.
Frameworks y bibliotecas: El ecosistema de JavaScript se ha enriquecido con una
gran cantidad de frameworks y bibliotecas que facilitan el desarrollo de aplicaciones
web, como React, Angular y [Link].
ECMAScript
ECMAScript es la especificación estándar del lenguaje JavaScript, mantenida por Ecma
International. Define las reglas, detalles y características que los navegadores y entornos
deben implementar. ES6 (ECMAScript 2015) introdujo muchas características, como
let/const, funciones flecha, promesas, y más.
Tipos de datos primitivos
JavaScript tiene seis tipos de datos primitivos:
- Number: representa tanto enteros como decimales.
Ejemplos: 42, 3.14, -7
Nota: tiene algunas características especiales, como Infinity (resultado de dividir
entre cero) y NaN (Not-a-Number, resultado de una operación matemática
inválida).
- String: cadenas de texto delimitadas por comillas simples ‘ ’, dobles “ ” y o comillas
invertidas ` ` (estas últimas permiten incluir variables y expresiones).
Ejemplo: var name = "John";
- Boolean: representa valores verdaderos o falsos.
Ejemplo: var isStudent = true;
5
- Undefined: Representa una variable que ha sido declarada pero no se le ha asignado
ningún valor. También es el valor devuelto por funciones que no tienen return.
Ejemplo: var x;
- Null: un valor especial que representa "vacío" o "nulo intencionalmente". Es diferente
de undefined, aunque ambos representan "ausencia de valor".
Ejemplo: var y = null;
- Symbol: un tipo único y no modificable. Los símbolos siempre son únicos, incluso si
tienen la misma descripción.
Ejemplo: var sym = Symbol('foo');
-BigInt: Representa números enteros de precisión arbitraria, demasiado grandes para el
tipo Number.
Ejemplo: 9007199254740991n
Nota: Se define agregando una n al final del número. Útil para manejar valores
muy grandes, como en criptografía o grandes conteos.
6
Plantillas literales (Template literals)
Usando comillas invertidas `, puedes insertar variables dentro del texto con ${variable}. Esto es
más claro y evita el uso excesivo de +.
Ejemplo:
let nombre = "Ana";
let edad = 25;
// Concatenación con +
let mensaje1 = "Hola, " + nombre + ". Tienes " + edad + " años.";
[Link](mensaje1); // "Hola, Ana. Tienes 25 años."
// Concatenación con template literals
let mensaje2 = `Hola, ${nombre}. Tienes ${edad} años.`;
[Link](mensaje2); // "Hola, Ana. Tienes 25 años."
Importancia de los tipos de datos
Operaciones: El tipo de dato determina las operaciones que se pueden realizar con un
valor. Por ejemplo, podemos sumar dos números, pero no podemos sumar un número y
una cadena.
Almacenamiento: Cada tipo de dato ocupa una cantidad diferente de memoria.
Comportamiento: El comportamiento de un valor puede variar según su tipo de dato.
Nota: puedes utilizar el operador typeof para obtener el tipo de dato de una variable:
let numero = 42;
[Link](typeof numero); // Output: "number"
let texto = "Hola";
[Link](typeof texto); // Output: "string"
7
Variables con diferencias en alcance y mutabilidad.
var let const
Funcional o global. Esto De bloque. Una De bloque
significa que una variable variable declarada
declarada con var puede ser con let solo está
accedida desde cualquier disponible dentro del
Alcance parte de la función en la que bloque en el que se
se declara o incluso desde declara (por ejemplo,
fuera de cualquier función si dentro de un if, for, o
se declara en el ámbito un par de llaves {}).
global.
Se puede redeclarar y Se puede reasignar No se puede ni
reasignar una variable var una variable let, pero redeclarar ni
Redeclaración
dentro de su ámbito no se puede reasignar una variable
y reasignación
redeclarar dentro del const después de su
mismo ámbito. inicialización.
Las declaraciones var son Las declaraciones let Al igual que let, las
"hoistadas" al principio de su también son declaraciones const
ámbito, lo que significa que hoistadas, pero no se son hoistadas pero no
puedes usar una variable inicializan, por lo que se inicializan.
Hoisting antes de declararla sin si intentas usar una
generar un error de variable let antes de
referencia (aunque su valor declararla, obtendrás
será undefined). un error de
referencia.
Nota: si el valor de const es un objeto o un array, sus propiedades internas pueden
cambiar.
Resumen
Característica var let const
Alcance Global o de función Bloque Bloque
Reasignación Sí Sí No
Inicialización No No Sí
obligatoria
Hoisting Sí (como undefined) Sí (pero no Sí (pero no accesible
accesible antes) antes)
8
Concejos:
• Usa let para variables que puedan cambiar a lo largo de la ejecución.
• Usa const para variables que no cambiarán de valor (como constantes).
• Evita var siempre que sea posible, ya que puede llevar a errores difíciles de
depurar debido a su alcance global y comportamiento de hoisting.
Estructuras de datos en JavaScript
JavaScript ofrece estructuras de datos complejas tales como objetos y arrays:
- Arrays: listas ordenadas de valores, que pueden ser de cualquier tipo.
Ejemplo: let fruits = ["apple", "banana", "cherry"];
- object: el tipo de dato object es más complejo y sirve como base para crear estructuras
de datos más grandes y complejas, como arrays y objetos personalizados. Un objeto es
una colección de pares clave-valor.
- Objects: colección de pares clave-valor.
Ejemplo:
let car = { type: "Fiat",
model: "500",
color: "white"
};
Ejemplo de un array y un objeto:
let array = ["JavaScript", 2023, true];
let object = {
language: "JavaScript",
year: 1995
};
9
Operadores
JavaScript ofrece varios tipos de operadores:
- Aritméticos: +, -, *, /, %
- Asignación: =, +=, -=, *=, /=, %=
- Comparación: ==, ===, !=, !==, <, >,<=, >=
- Lógicos: &&, ||, !
Ejemplo:
let x = 5;
let y = 10;
let sum = x + y; // Aritmético
let isEqual = (x === y); // Comparación
let andCondition = (x < 10 && y > 5); // Lógico
10
Modelo de Concurrencia y Bucle de Eventos
JavaScript usa un modelo de concurrencia basado en un "event loop" para soportar la
ejecución de código, recolección de eventos y sub-tareas encoladas. Su ejecución no es
bloqueante, permitiendo operaciones asíncronas.
Ejemplo:
[Link]("Inicio");
setTimeout(() => {
[Link]("Proceso asincrónico");
}, 2000);
[Link]("Fin");
Bloques de construcción JavaScript
JavaScript usa bloque de construcción como variables, funciones, y clases para estructurar
programas.
- Variables: se usan para almacenar datos.
Ejemplo: let number = 5;
- Funciones: bloques de código ejecutables que pueden ser invocados.
Ejemplo:
function greet() {
[Link]("Hello.");
- Clases: plantillas para crear objetos.
Ejemplo:
class Car {
11
constructor(brand) {
[Link] = brand;
Sentencias y declaraciones
Estas controlan el flujo y lógica del programa:
- do-while: similar a while, pero con ejecución garantizada al menos una vez.
- for-in: itera sobre las propiedades de un objeto.
- for-of: específicamente para recorrer objetos iterables como Array.
- try-catch: manejo de excepciones.
- if-else, switch: estructuras condicionales.
Ejemplo de `if-else`:
let number = 10;
if (number > 5) {
[Link]("Mayor que 5");
} else {
[Link]("No es mayor que 5");
12
Iteraciones
JavaScript ofrece varias estructuras para iterar:
- do...while: ejecuta un bloque una vez, luego comprueba la condición después de
cada ejecución.
- for: un bucle iterativo componible.
- for...in: iteración sobre las propiedades de un objeto.
- for...of: iteración sobre valores de objetos iterables.
- while: ejecuta un bloque mientras una condición sea verdadera.
Ejemplo de for:
for (let i = 0; i < 5; i++) {
[Link](i);
Control de flujo
JavaScript maneja el flujo del programa mediante estructuras condicionales y de bucle
para determinar qué código se ejecuta, conduciendo acciones basadas en condiciones
específicas.
Ejemplo de control de flujo:
let trafficLight = "green";
switch (trafficLight) {
case "red":
[Link]("Stop");
break;
case "yellow":
13
[Link]("Caution");
break;
case "green":
[Link]("Go");
break;
default:
[Link]("Invalid signal");
```
Funciones y clases
Funciones
Bloques de código diseñados para realizar tareas particulares:
- function: funciones estándar.
Ejemplo:
function add(a, b) {
return a + b;
- async function: permite operaciones asincrónicas.
Ejemplo: async function fetchData() { /* ... */ }
14
Clases
Plantillas para crear objetos con propiedades y métodos:
class Animal {
constructor(name) {
[Link] = name;
speak() {
[Link](`${[Link]} makes a sound.`);
const dog = new Animal('Dog');
[Link]();
Introducción a los objetos JavaScript
Los objetos JS son colecciones de pares clave-valor, propiedades de datos y métodos:
let person = {
firstName: "John",
lastName: "Doe",
age: 25,
fullName: function() {
return [Link] + " " + [Link];
15
};
[Link]([Link]());
Objetos globales en JavaScript
Los objetos globales en JavaScript son aquellos que están disponibles en cualquier parte
de tu código sin necesidad de una declaración previa. Son como variables y funciones que
se encuentran en un ámbito global, accesible desde cualquier lugar. Ofrecen funcionalidad
básica para manejo de datos, operaciones matemáticas, y más.
Ejemplos de objetos globales comunes
window: Representa el objeto global en un navegador. Proporciona propiedades y
métodos para interactuar con el navegador.
document: Representa la página HTML que se está cargando. Permite acceder y
modificar el contenido de la página.
console: Proporciona métodos para ver mensajes en la consola del navegador (por
ejemplo, [Link]()).
Math: Contiene propiedades y métodos para realizar operaciones matemáticas
(por ejemplo, [Link], [Link]()).
Date: Representa un objeto de fecha y hora.
Array: Constructor para crear arrays.
Object: Constructor para crear objetos.
Ejemplo de objeto Math:
[Link]([Link](16)); // 4
Arrays
Son listas ordenadas de elementos:
const colors = ["red", "green", "blue"];
[Link]("yellow");
16
[Link](colors);
Funciones
Una función en Java es un bloque de código reutilizable que realiza una tarea específica.
Las funciones permiten organizar el código de manera más clara y modular, facilitando la
lectura, mantenimiento y reutilización del mismo.
Sintaxis:
function nombreFuncion(parametro1, parametro2, ...) {
// Código que realiza la tarea
return valorDeRetorno; // Opcional, si la función devuelve un valor
Ejemplo:
function greet(name) {
return `Hello, ${name}`;
[Link](greet("Alice"));
Tipos de funciones:
Declaradas: Se declaran con la palabra clave function.
Expresiones: Se asignan a una variable.
Funciones de orden superior: Funciones que pueden ser asignadas a variables,
pasadas como argumentos o retornadas por otras funciones.
Flecha: Una sintaxis más concisa para funciones cortas.
Ejemplo de función flecha:
const sumar = (a, b) => a + b;
17
Alcance
Ámbito: Las variables declaradas dentro de una función solo son accesibles dentro
de esa función.
Recursividad: Una función que se llama a sí misma.
Clases ESG
Las clases ECMAScript son una forma de crear "clases" o plantillas:
class Car {
constructor(brand, model) {
[Link] = brand;
[Link] = model;
show() {
return `${[Link]} - ${[Link]}`;
const myCar = new Car("Ford", "Mustang");
[Link]([Link]());
JavaScript asíncrono
Permite operaciones no bloqueantes como manejo de solicitudes HTTP, y es crucial en la
programación moderna de aplicaciones web. Se usan promesas y async/await para
manejar la asincronía.
Ejemplo con promesas:
18
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Data fetched"), 1000);
});
fetchData().then(data => [Link](data));
Promesas
Las promesas representan una operación que se completará en el futuro.
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Resolved!"), 1000);
});
[Link](result => [Link](result));
APIs en JavaScript
API son las siglas de Interfaces de Programación de Aplicaciones. En el contexto de
JavaScript, una API es un conjunto de funciones y objetos que nos permiten interactuar
con diferentes partes de un navegador web o con servicios externos.
Imagínate una API como una biblioteca que te proporciona herramientas preconstruidas
para realizar tareas comunes. En lugar de reinventar la rueda, puedes utilizar estas
herramientas para acceder a datos, manipular el DOM, hacer solicitudes a servidores, y
mucho más.
19
Tipos de APIs en JavaScript
APIs del navegador: Estas APIs son parte del navegador y te permiten interactuar con las
características del navegador, como el DOM (Document Object Model), el
almacenamiento local, la geolocalización, el canvas, etc. Algunos ejemplos son:
DOM: Manipular el contenido y la estructura de una página web.
Fetch API: Hacer solicitudes HTTP a servidores.
Web Storage: Almacenar datos en el navegador.
Geolocation API: Obtener la ubicación del usuario.
Canvas API: Crear gráficos 2D.
APIs de terceros: Estas APIs son proporcionadas por servicios externos y te permiten
acceder a sus funcionalidades. Por ejemplo, puedes utilizar la API de Google Maps para
mostrar un mapa en tu página web, o la API de Twitter para mostrar tus tweets.
Herramientas de empaquetado
Las herramientas de empaquetado como Webpack, Parcel o Rollup permiten optimizar y
modularizar el código para su despliegue, reduciendo el tamaño de archivos y mejorando
el rendimiento mediante bundling, minificación, y tree-shaking.
20