Lenguajes de Script

¿Qué es un lenguaje de script de cliente?

Un lenguaje de script de cliente es un lenguaje que se ejecuta en el navegador del
usuario (no en el servidor) y que permite:

Interactuar con el contenido de la página web (DOM)

Crear efectos visuales dinámicos
Validar formularios antes de enviarlos
Mejorar la experiencia del usuario sin recargar la página

Clasificación de los lenguajes de script de cliente

1. JavaScript (el estándar principal)
Lenguaje oficialmente estandarizado por *ECMAScript (ECMA-262)
Soportado por *todos los navegadores modernos
Permite manipular el DOM, manejar eventos, comunicarse con servidores ( fetch ,
AJAX ), etc.

Versiones importantes (ESx):

Versión Año Novedades clave

ES3 1999 Ampliación de funcionalidades básicas
ES5 2009 strict mode , JSON, forEach , map , etc.
ES6 (ES2015) 2015 let , const , arrow functions, clases, promesas
ES7 (2016) 2016 includes() , exponenciación ( ** )
ES8+ 2017–2024 async/await , [Link] , optional chaining , etc.

ES6 en adelante ha marcado el cambio moderno en el lenguaje.

2. TypeScript (superset de JavaScript)

Incluye todo lo que tiene JavaScript, pero además añade nuevas funcionalidades por lo
que Todo código válido en JavaScript también es válido en TypeScript, pero no
todo lo que puedes hacer en TypeScript es válido en JavaScript.
No es un lenguaje de script de cliente directamente ejecutable.
Tiene tipado estático, una variable al ser declarada ya se le asigna un tipo de dato.
Se transpila a JavaScript para ejecutarse en el navegador.
 Muy usado en aplicaciones complejas y en frameworks modernos como Angular.

3. VBScript (obsoleto)
Fue un lenguaje de scripting desarrollado por Microsoft.
Solo funcionaba en Internet Explorer.
Obsoleto y no soportado en navegadores modernos.
Ya no se utiliza en desarrollo web moderno.

4. CoffeeScript (casi obsoleto)

Lenguaje que simplificaba la sintaxis de JavaScript.
Se transpila a JavaScript.
Hoy en día reemplazado por ES6+ y TypeScript.

5. Otros (históricos o experimentales):

Dart: de Google, pensado para reemplazar JS, pero se usa más en Flutter (framework
de Google).
JScript: implementación antigua de Microsoft de ECMAScript.
Elm, ReasonML, etc.: experimentales, compilados a JavaScript.

JavaScript. Sintaxis Básica

¿Qué es JavaScript?
JavaScript es un lenguaje de scripting multiplataforma y orientado a objetos. Como
lenguaje de scripting, permite añadir comportamiento dinámico a páginas web y
aplicaciones. Es multiplataforma porque funciona en diversos sistemas operativos y
navegadores. Su paradigma orientado a objetos significa que organiza el código en objetos
reutilizables que contienen datos y funcionalidad.

Es importante recordar: JavaScript ≠ JAVA

Son lenguajes completamente diferentes con propósitos distintos, a pesar de la similitud en
sus nombres. JavaScript se ejecuta "sobre la marcha" a través de un intérprete (un
navegador web), mientras que Java requiere un paso de compilación (traducir el código
fuente en java a un formato que es ejecutado por la MVJ) previo para crear un archivo
ejecutable

JavaScript se suele utilizar dentro del contexto de los navegadores web para dotar a las
páginas de comportamientos dinámicos. El uso de programas JavaScript en el contexto de
los navegadores web se puede realizar principalmente de dos maneras:

Incluyendo el código en el propio documento HTML delimitado por las etiquetas script
 Almacenando el código en un fichero externo con extensión .js y cargándolo desde el
documento HTML.

Mostrando información: Consola JavaScript vs

Pantalla
Cuando decimos "mostrar información por pantalla" en JavaScript, nos referimos a:
 Mostrar algo al usuario (como un mensaje, alerta o texto en la página).
Mostrar algo al programador (usando la consola).

La consola es una herramienta que viene en todos los navegadores web (como
Chrome, Firefox o Edge) y que permite a los programadores ver lo que está pasando "por
detrás" de una página web. Muestra información sobre la página web que se está
ejecutando en ese momento, y también incluye la línea de comando que puedes usar para
ejecutar expresiones JavaScript en la página actual.

1. La función [Link]() muestra la información en la consola JavaScript y que

solamente será visible para el programador:

[Link]('Hola, mundo');

No hay que confundirse con la información mostrada por consola con la información que se
muestra por pantalla.

2. Las funciones alert() y [Link]() muestran la información por pantalla y

que si será visible por el usuario. Mientras que alert() muestra la información en un
pop-up emergente, [Link]() la mostrará directamente en la página:

let nombre = "Hugo";

alert("Hola " + nombre);
↑
Salta un ventana emergente con el mensaje Hola Hugo 💡

<body>
<script>
[Link]("Hola Mundo desde JavaScript");
</script>
</body>
↑
Excribe directamente en el cuerpo del documento HTML 💡

Una última forma sería haciendo uso del DOM (lo veremos en el último punto de este tema),
manipulando elementos del documento HTML con la función [Link]()
y sus atributos textContent o innerText

<p id="saludo"></p>
<script>
[Link]("saludo").textContent = "¡Hola desde el DOM!";
</script>
↑
Manipula el elemento <p> de html para mostrar el mensaje 💡
Entender la diferencia entre mostrar algo por consola y mostrarlo en pantalla es clave
en JavaScript.

Captando información del usuario información:

prompt() y confirm()
Cuando necesitamos interactuar con el usuario y captar su respuesta utilizamos prompt()
y confirm()

1. prompt() : Muestra un cuadro de texto donde el usuario puede escribir algo. El valor
se guarda en una variable.

let edad = prompt("¿Cuántos años tienes?");

[Link]("Tu edad es: " + edad);

2. confirm() : Muestra un cuadro con Aceptar y Cancelar. Devuelve true o false

según la elección del usuario.

let salir = confirm("¿Estás seguro de que quieres salir?");

[Link]("Confirmación del usuario: " + salir);

Comentarios
JavaScript tiene dos tipos de sintaxis de comentarios:

// comentario en una sola línea

/* este es un comentario
multilínea
*/

/* no puedas, sin embargo, /* anidar comentarios */

↑
SyntaxError ⚠️
Los comentarios son anotaciones en el código fuente de un programa que son ignoradas
por el intérprete. Los comentarios deben usarse para describir aspectos importantes, por
ejemplo aspectos que permitan una mejor comprensión del código.

Declaraciones de variables
Las variables se usan como nombres simbólicos para valores en tu aplicación. Los nombres
de las variables, llamados identificadores, se rigen por ciertas reglas.

Un identificador en JS tiene que empezar por una letra, un guion bajo (_) o un símbolo
de $, y los valores subsiguientes pueden ser números.
JavaScript diferencia entre mayúsculas y minúsculas, por lo tanto las letras incluyen
desde la "A" a la "Z" y desde la "a" a la "z".

Hay 3 tipos de declaraciones en JavaScript:

var: Declara una variable, inicializándola opcionalmente a un valor. Solo existen dentro
de la función en la que se declaran. Ignoran bloques como if, for, etc. (es decir, si la
declaro dentro de un if, será visible también fuera, algo que no sucede con let)
let: Declara una variable local en un bloque de ámbito (solo vive dentro del bloque { }
donde fue declarada), inicializándola opcionalmente a un valor. Podrá cambiar su valor.
Es la forma más usada.
const: Declara una variable de sólo lectura en un bloque de ámbito (igual que let). No
será posible cambiar su valor mediante la asignación, es decir siempre mantiene el valor
que se le dio en su declaración.

Conclusión: Usa let para variables que pueden cambiar. Usa const para valores que no
deben cambiar. Evita var , salvo que sepas lo que estás haciendo (por el hoisting y el
ámbito de función).

Ámbito de una variable

Cuando declaras una variable fuera de una función, se le denomina VARIABLE
GLOBAL, porque está disponible para cualquier otro código en el documento actual.
Cuando declaras una variable dentro de una función, se le denomina VARIABLE
LOCAL, porque está disponible sólo dentro de esa función donde fue creada.

Variable hoisting
Las variables en JavaScript pueden hacer referencia a una variable declarada más
tarde. Este concepto se le conoce como HOISTING.
Las variables son "elevadas" a la parte superior de la función o la declaración.
Las variables que no se han inicializado todavía devuelven un valor undefined.

Tenemos esto:
 [Link](x); // undefined (no error)
var x = 5;

Internamente JS hace esto:

var x; // se eleva
[Link](x); // undefined
x = 5; // se asigna después

Pero con let y const no ocurre lo mismo, no se pueden usar hasta que se inicializan:

[Link](y); // ❌ Error: Cannot access 'y' before initialization

let y = 10;

En el caso de las funciones, esas se elevan completas, por lo que si se pueden llamar
antes de definirlas:

saludar(); // ¡Hola!

function saludar() {
[Link]("¡Hola!");
}

TIPOS DE DATOS
String: Secuencia de caracteres que representan un valor.
Ej: 'Hola'
Number: Valor numérico (entero, decimal...)
Ej: 555
Boolean: Valores true o false
Null: Denota valor nulo.
JavaScript es case-sensitive (null). null no es lo mismo que Null, NULL. ⚠️
Undefined: Valor sin definir.
Symbol: Tipo de dato, cuyo valor es únicos e inmutable. Se usa para crear propiedades
privadas o únicas en objetos.
Object: Objeto. { } Puede contener más variables en su interior.

typeof
La función typeof es utilizada para obtener el tipo de dato que tiene una variable.
Veamos algunos ejemplos:
(¡Te vas a encontrar con resultados inesperados!)
 Strings:

typeof "string" // "string"

typeof Date(2020,01,01) // "string" La función Date llamada sin el new
devuelve un string. Si la llamamos con new, devuelve un objeto

Numbers:

typeof 555 // "number"

Object

typeof {} // "object"
typeof [] // "object"
typeof null // "object"
typeof Error() // "object"

Undefined

var hola;
typeof hola // "undefined"

Conversión de tipos de datos

JavaScript es un lenguaje de tipo dinámico. Esto significa que, al declarar una variable, no
tienes que especificar el tipo de dato.
Así, por ejemplo, puedes definir una variable de la siguiente manera:

var ejemplo = 55;

Y luego, puedes asignarle un string a esa variable:

ejemplo = "¿Qué te pasó, viejo? Antes eras chévere";

Ya que es un lenguaje de tipo dinámico, esta asignación no causa un mensaje de error.

Convertir string a números

En caso que un valor que representa a un número esté en memoria como string, por
ejemplo "1234":

parseInt() [Retornará números enteros]

Sirve para "parsear" una cadena (string) e intentar obtener un valor numérico.
Ejemplo:

var s = "1234"
var n = parseInt(s) // 1234

parseFloat() [El número siempre se interpreta como decimal]

Ejemplo con parseInt:

var s = 3.14
var n = parseInt(s) // 3

Ejemplo con parseFloat:

var s = 3.14
var n = parseFloat(s) // 3.14

¿Qué pasa si intentamos esto con un string que no representa un valor numérico
("hola")?
Ejemplo:

var s = "hola"
var n = parseInt(s) // NaN (Not a Number)

Operadores
OPERADORES DE ASIGNACIÓN
adición

x = x + 4
x += 4

sustracción

x = x - 4
x -= 4

multiplicación

x = x * 4
x *= 4
 división

x = x / 4
x /= 4

resto

x = x % 4
x %= 4

OPERADORES DE COMPARACIÓN
Igualdad → Devuelve true si ambos operandos son iguales ( == )

5 == '5' // true → convierte el string '5' a número

0 == false // true → convierte false a 0
null == undefined // true → considerados iguales en este caso

Desigualdad → Devuelve true si ambos operandos no son iguales ( != )

Estrictamente iguales → Devuelve true si ambos operandos son iguales y tienen el
mismo tipo ( === )

5 === '5' // false → número vs string

0 === false // false → number vs boolean
null === undefined // false → tipos diferentes
5 === 5 // true → mismo valor y tipo

Estrictamente desiguales → Devuelve true si los operandos no son iguales y/o no son
del mismo tipo ( !== )
Mayor que → Devuelve true si el de la izq. es mayor ( > )
Mayor o igual que → Devuelve true si el de la izq. es mayor o igual ( >= )
Menor que → Devuelve true si el de la izq. es menor ( < )
Menor o igual que → Devuelve true si el de la izq. es menor o igual ( <= )

Operadores aritméticos
Además de las operaciones de aritmética estándar (+, -, * y /). JavaScript brinda los
siguientes operadores aritméticos:

Resto %
Corresponde al módulo de una operación.
Devuelve el resto de una división.
 12 % 5 // devuelve 2

Incremento ++
Incrementa en una unidad al operando.
Si es usado ++x, devuelve el valor del operando después de añadirle 1.
Si se usa x++, devuelve el valor antes de añadirle 1.

// si x = 3
++x // x = 4
x++ // devuelve 3 y luego establece x = 4

Decremento --
Resta una unidad al operando.
Dependiendo la posición con respecto al operando, tiene el mismo comportamiento que
el incremento.

// si x = 3
--x // x = 2
x-- // devuelve 3 y luego establece x = 2

Operador de concatenación
Une dos valores de tipo String, devolviendo otro String correspondiente a la unión.
Ejemplo:

[Link]("mi" + "string"); // mi string

Operador ternario
Necesita tres operandos:

condición ? valor1 : valor2

Si la condición es true, tomará el valor1; si no, el valor2.

let edad = 18;

let mensaje = edad >= 18 ? "Eres mayor de edad" : "Eres menor de edad";
[Link](mensaje); // "Eres mayor de edad"

Sentencias condicionales
Una sentencia condicional es un conjunto de comandos que se ejecutan si una condición es
verdadera.
JavaScript soporta dos sentencias condicionales: if...else y switch

if...else
Se utiliza if para comprobar si la condición es verdadera.
Se utiliza else para ejecutar una sentencia si la condición es falsa.

if (condicion) {
sentencia1;
} else {
sentencia2;
}

let mensaje;
if (edad >= 18) {
mensaje = "Eres mayor de edad";
} else {
mensaje = "Eres menor de edad";
}

La condición puede ser cualquier expresión que evalúe un booleano: true o false.
Puedes utilizar else if para evaluar múltiples condiciones.

VALORES FALSOS
Los siguientes valores se evalúan como falsos:

false
undefined
null
0
NaN
la cadena vacía ("")

El resto de valores, incluidos todos los objetos, son evaluados como verdaderos cuando
son pasados a una sentencia condicional.

switch
Condicional que permite hacer múltiples operaciones y tomar decisiones en función de
distintos estados de las variables.
Evalúa una expresión, comparando el valor de esa expresión con una instancia case, y
ejecuta declaraciones asociadas a ese case, así como las declaraciones en los case que
siguen.

Sintaxis del switch

switch (expresión) {
case valor1:
// Sentencias a ejecutar si la expresión tiene como valor a valor1
break;
case valor2:
// Sentencias a ejecutar si la expresión tiene como valor a valor2
break;
case valor3:
// Sentencias a ejecutar si la expresión tiene como valor a valor3
break;
default:
// Sentencias a ejecutar si el valor no es ninguno de los anteriores
}

let dia = prompt("Introduce un número del 1 al 7:");

switch (parseInt(dia)) {
case 1:
[Link]("Lunes");
break;
case 2:
[Link]("Martes");
break;
case 3:
[Link]("Miércoles");
break;
case 4:
[Link]("Jueves");
break;
case 5:
[Link]("Viernes");
break;
case 6:
[Link]("Sábado");
break;
case 7:
[Link]("Domingo");
break;
default:
[Link]("Número no válido. Introduce del 1 al 7.");
}
Bucles e iteraciones
Forma rápida y sencilla de hacer algo repetidamente:

for
while
do...while

For:
Un bucle for se repite hasta que la condición especificada sea false:

for (expresiónInicial; condición; expresiónIncremento) {

sentencia
}

Ejemplo:

for (i = 0; i < 5; i++) {

sentencia;
}

Expresión inicial: si existe, se ejecuta. Esta expresión inicializa uno o más contadores
del bucle. Aquí también se puede declarar variables.
Condición: si el valor es true, se ejecuta la sentencia del bucle; si es false, el bucle
finaliza.
Expresión incremento: aumenta el valor de la expresión inicial y vuelve al paso 2
(Condición).

While
Ejecuta sus sentencias mientras la condición sea verdadera.

while (condicion) {
sentencia
}

Ejemplo:

i = 0;
x = 0;
while (i < 10) {
i++;
 x += i;
}

En cada iteración, el bucle incrementa i y añade ese valor a x.

Después de la primera iteración: i = 1 y x = 1

Después de la segunda iteración: i = 2 y x = 3
Después de la tercera iteración: i = 3 y x = 6

Cuando el bucle llega a i = 10, la condición ya no será verdadera y no se ejecutará la

sentencia.

⚠️ Evite los bucles infinitos. Asegúrese de que la condición en un bucle llegue finalmente
a ser falsa; de otra forma, el bucle nunca terminará.

do...while
Ejecuta una sentencia al menos una vez, y luego repite la ejecución mientras la
condición sea verdadera.

do {
sentencia
} while (condición);

Ejemplo:

let resultado = '';

let i = 0;
do {
i += 1;
resultado += i + ' ';
} while (i < 5);
// resultado: "1 2 3 4 5 "

Funciones
¿Qué son?
Son uno de los pilares fundamentales en JavaScript.

Una función se compone de una secuencia de declaraciones, que conforman el cuerpo de

la función.

Se pueden pasar valores a una función, y la función puede devolver un valor.

Para devolver un valor específico, una función debe tener una sentencia return.
Los parámetros en la llamada a una función son los argumentos en la función.
Los argumentos se pasan a las funciones por valor.

function nombre(argumento1, argumento2) {

// instrucciones
}

function saludar(nombre) {
[Link]("Hola, " + nombre + "!");
}

saludar("Carlos"); // Muestra: Hola, Carlos!

saludar("Ana"); // Muestra: Hola, Ana!

function doble(numero) {
return numero * 2;
}

let resultado = doble(5);

[Link]("El doble de 5 es: " + resultado); // Muestra: El doble de 5 es:
10

Array
Los arrays son un conjunto de datos ordenados por posiciones, asociados en una sola
variable.

Los datos pueden ser de cualquier tipo de dato.

Ejemplo:

var persona = ['Majo', 22, true];

→ Este array contiene 3 elementos y una longitud de 3.

var hobbies = new Array(5);

→ Dentro de los paréntesis, o mejor llamado constructor, se establece el número de

elementos que puede contener este array.
A su vez, se puede indicar los elementos del array:

var hobbies = new Array('surfear', 'dibujar');

// o
hobbies = ['surfear', 'dibujar'];
Así fijamos dos datos en el array.

Acceder a un elemento Array

Con el ejemplo:

var hobbies = ['surfear', 'dibujar', 'escribir'];

hobbies[1]; // dibujar

Este array mostrará 'dibujar'.

⚠️ Hay que tener en cuenta que las posiciones comienzan desde 0 (cero).

hobbies[0]; // surfear

Añadir elemento al final

[Link]('escalar', 'codear');
// ['surfear', 'dibujar', 'escribir', 'escalar', 'codear']

(¡puedes agregar cuantos quieras!)

Eliminar elemento del final

[Link]();
// elimina 'codear'

Añadir elemento al inicio

[Link]('correr');
// agrega 'correr' al inicio del array

Conocer el número de elementos

[Link];
// mostrará 5

Métodos del array

El método filter()
El método filter() crea un nuevo array con todos los elementos que cumplan con la condición
por la función dada.
 const palabras = ['espejo', 'límite', 'invierno', 'color'];
const resultado = [Link](palabra => [Link] >= 6);
[Link](resultado);
// ["espejo", "límite", "invierno"]

Sintaxis

var newArray = [Link](function(elemento, indice, array));

// o también usando arrow function como en el ejemplo anterior
var newArray = [Link](elemento => condición);

Callback: Es una función, que puede ser definida por nosotros, y que usaremos como
filtro para que comprobar que cada elemento del array cumple la condición. Debe
retornar un valor: true o false.
elemento: ítem actual del array
índice: índice del ítem actual del array
array: array actual

Ejemplo usando un callback externo:

// Callback: función que usaremos como filtro

function esMayorQueDiez(numero) {
return numero > 10;
}

// Array de números
const numeros = [5, 8, 12, 20, 7, 15];

// Usamos .filter() con el callback

const mayores = [Link](esMayorQueDiez);

[Link](mayores); // [12, 20, 15]

El método map()
Crea un nuevo array con los resultados de la llamada a la función indicada, aplicados a
cada uno de sus elementos.

const arreglo = [1, 2, 3, 4];

const nuevoArreglo = [Link](numero => numero * 2);
[Link](nuevoArreglo);
// [2, 4, 6, 8]

📝 Recorrió cada uno de los números y cada uno lo multiplica por 2.

El método reduce()
Aplica una función a un acumulador y a cada valor de un array (de izquierda a derecha)
para reducirlo a un único valor.

const suma = [10, 20, 30].reduce((a, b) => a + b);

[Link](suma);
// suma = 60

📌 El método reduce se encarga de recorrer todos los elementos del array e ir acumulando
sus valores (o alguna operación diferente) y sumarlo todo, para devolver su resultado final.

Objetos
Un objeto es una colección de datos relacionados (clave-valor), que generalmente consta
de variables y funciones, que se denominan propiedades y métodos cuando están dentro
de objetos. Se puede ver como una estructura que agrupa información que guarda una
relación.

Hay dos formas de crear un objeto:

var objeto = new Object();

var objeto = {}; // Objeto literal

Agreguemos propiedades:

var persona = {
nombre: 'María',
edad: 28,
profesión: 'Astronauta'
};

Podemos acceder a las propiedades de un objeto a través de:

🔹 Notación de puntos:
[Link]
[Link]

🔸 Notación de corchetes:
 persona['nombre']
persona['edad']

Podemos actualizar los valores de un objeto:

[Link] = 31;
persona['nombre'] = 'Belén';

Podemos crear propiedades nuevas en un objeto:

[Link] = 'Canadá';
persona['ojos'] = 'avellana';

Uso del this

Se refiere al objeto actual en el que se está escribiendo el código.

var persona = {
nombre: 'María',
edad: 28,
profesión: 'Astronauta',
saludo: function() {
alert('¡Buen día ' + [Link] + '!'); //con alert lanzamos un
mensaje emergente (popup)
}
};

[Link](); //¡Buen día Maria!

🔹 En este caso, definimos el método saludo dentro del objeto persona y usamos this que
es equivalente a persona.

This es muy útil a la hora de crear constructores, etc., ya que asegura que se usen los
valores correctos.
Ejemplo: con dos instancias de objetos persona.

var persona1 = {
nombre: 'Luján',
saludo: function() {
alert('¡Buen día! ' + [Link] + '!');
}
};
// ¡Buen día!, Luján.

var persona2 = {
 nombre: 'Mariano',
saludo: function() {
alert('¡Buen día! ' + [Link] + '!');
}
};
// ¡Buen día!, Mariano.

⚠️ En las arrow functions, el this refiere a window.

¿Qué es un constructor?
Es un método llamado en el momento de la creación de instancias. Se puede decir que se
trata de una plantilla para crear objetos con una similar estructura.

En JavaScript, la función sirve como el constructor del objeto, por lo que no hay necesidad
de definir explícitamente un método constructor.

El constructor se usa para establecer las propiedades del objeto o para llamar a los
métodos para preparar el objeto para su uso.

function Persona(nombre, edad, profesion) {

[Link] = nombre;
[Link] = edad;
[Link] = profesion;
[Link] = function() {
[Link]('¡Buen día ' + [Link] + '!');
}
};

// Crear objetos con el constructor

let maria = new Persona("María", 28, "Astronauta");
let juan = new Persona("Juan", 35, "Ingeniero");

[Link](); // Hola, soy María

[Link](); // Hola, soy Juan

Cuando creamos un objeto de manera literal, este se forma con unos valores determinados
para sus atributos, mientras que a través de un constructor, podremos crear múltiples
instancias de ese objeto pasándole los valores en el momento de crear el objeto.

Clases
Proveen una sintaxis más clara y simple para crear objetos y lidiar con la herencia. Son
consideradas una mejora sintáctica sobre la herencia, por lo que se considera la alternativa
moderna a los constructores para crear instancias de un objeto

Dos componentes
🔹 Declaración de clases:
Para declarar una clase se utiliza la palabra reservada class y un nombre para la clase.

class Persona {
constructor(nombre, edad, profesion) {
[Link] = nombre;
[Link] = edad;
[Link] = profesion;
}

saludo() {
[Link]("Hola, soy " + [Link]);
}
}

Esta clase hace lo mismo que el constructor function Persona(...) , pero de forma más
clara y moderna

🔹 Expresión de clases:
Otra manera de definir una clase. Pueden ser nombradas o anónimas.

Anónima

var Polígono = class {

constructor(alto, ancho) {
[Link] = alto;
[Link] = ancho;
}
};

Nombrada

var Polígono = class Polígono {

constructor(alto, ancho) {
[Link] = alto;
[Link] = ancho;
}
};

Herencia de clases: extends

La palabra extends es usada en declaraciones o expresiones de clase para crear una
clase hija.

class Animal {
constructor(nombre) {
 [Link] = nombre;
}
hablar() {
[Link]([Link] + ' hace ruido.');
}
}

class Perro extends Animal {

hablar() {
[Link]([Link] + ' ladra.');
}
}

El método constructor es un método especial para crear e inicializar un objeto creado

con una clase.
Solo puede haber un método especial con el nombre constructor en una clase.

Función Callback
Función que se pasa a otra función como argumento, y que se ejecuta dentro de ésta.

function saludar(nombre) {
alert('Hola ' + nombre);
}

function ingresarUsuario(callback) {
var nombre = prompt('Por favor ingresa tu nombre:'); //con prompt
mostramos un cuadro para que el usuario ingrese texto. Este texto es el que
guardamos en nombre
callback(nombre);
}

ingresarUsuario(saludar);

Este ejemplo es una callback sincrona, ya que se ejecuta inmediatamente.

A menudo, las callbacks se utilizan para continuar con la ejecución del código después de
que se haya completado una operación asíncrona.

Asincronismo
¿Qué es?
Es la acción que no ocurre al mismo tiempo, es decir, es una forma de ejecutar tareas sin
bloquear el flujo principal del programa.
Esto es muy importante en JS ya que al ejecutarse en un solo hilo, solo puede hacer una
cosa a la vez.

Callback es una pieza clave en asincronismo. Al pasar una función como argumento a
otra función es como decir ¿Qué quieres hacer una vez que tu operación asíncrona
termine?

Con un ejemplo:

setTimeout(function () {[Link]('¡Hola, llegas a tiempo!');}, 1000);

setTimeout:
Función asíncrona que programa la ejecución de un callback una vez transcurrido cierto
tiempo (1000ms = 1 segundo).

⚠️ Recuerda que un callback en un loop de eventos espera su turno.

setTimeout(function () {
[Link]('¡Hola, llegas a tiempo!');
}, 1000); //Incluso si el tiempo fuese **0ms**, no significa que el callback
se ejecute inmediatamente

[Link]('¡Yo llego primero!');

Resultado:

¡Yo llego primero!

¡Hola, llegas a tiempo!

Promesas
Es el resultado de una operación asíncrona, el cual podría estar disponible ahora o en el
futuro. Esta operación podría finalizar con éxito o con fallo.

Para esto, a una promesa le adjuntamos un par de callbacks:

Para indicarle a la promesa qué debe hacer si todo va bien:

👉 Resolución de la promesa o resolve
Para indicarle a la promesa qué debe hacer en caso de fallo:
👉 Rechazo de la promesa o reject
Para obtener el resultado de una promesa puede utilizarse su método .then():

let promesa = new Promise(function(resolve, reject) {

setTimeout(function() {
 resolve('timeout');
}, 1000);
});

[Link](function(data) {
[Link](data);
});

Una promesa tendrá 3 estados posibles:

PENDING: todavía no hay resultado

FULFILLED: se ejecutó exitosamente
REJECTED: en el cual falló

El método .then, además, devuelve otra promesa, que resuelve al valor devuelto por la
función original, o, si ésta también devuelve una promesa, espera por la misma, y luego
resuelve a su resultado.

Es frecuente consumir más de una promesa a la vez (¡y que se ejecuten en paralelo!)

[Link]([]):
Acepta un array de promesas y devuelve una nueva promesa cuya resolución con éxito
una vez que todas las promesas originales se hayan resuelto originalmente,
o en caso de fallo, será rechazada en cuanto una de las promesas originales sea
rechazada.
[Link]([]):
La promesa compuesta que devuelve .race() será resuelta tan pronto como se resuelva
alguna de las promesas originales, ya sea con éxito o con fallo.

async / await
La función async implícitamente devuelve una promesa y puede, en su cuerpo, esperar a
que otras promesas se resuelvan de manera que simula ser sincrónica, utilizando la
keyword await.

Para hacer que una función sea asíncrona se indica async antes de function. Cuando la
función es llamada, devuelve una promesa. En cuanto el cuerpo de la misma devuelve algo,
esa promesa es resuelta. Si devuelve una excepción, la promesa es rechazada.

Dentro de la función async, podemos utilizar await antes de una expresión para esperar a
que una promesa sea resuelta antes de continuar con la ejecución de la función.

Ejemplo:

function convertirMinus(valor) {
return new Promise((resolve, reject) => {
 resolve([Link]());
});
}

async function mensaje(x) {

try {
const mensaje = await convertirMinus(x);
[Link](mensaje);
} catch (err) {
[Link]('No se pudo convertir:', [Link]);
}
}

Acceso a documentos HTML ¿Qué es el DOM?

DOM significa Document Object Model, o en español, Modelo de Objetos del
Documento.

Es una representación estructurada en forma de árbol de todo el contenido HTML de

una página web.

El navegador traduce el HTML en un conjunto de objetos en memoria, que pueden

ser accedidos, modificados o eliminados desde JavaScript.

¿Cómo se ve ese "árbol"?

Imagina el siguiente HTML:

<html>
<body>
<h1>Hola</h1>
<p>Bienvenidos</p>
</body>
</html>

El DOM lo convierte en una estructura de nodos como esta:

Document
└── html
└── body
├── h1
└── p

Cada etiqueta se convierte en un nodo, que puedes manipular desde JavaScript.

¿Para qué se usa el DOM?

Se usa para:

Leer contenido de la página (textos, valores, etc.)

Modificar elementos (cambiar texto, colores, estilos…)
Crear nuevos elementos (botones, imágenes, listas…)
Eliminar elementos
Responder a acciones del usuario (clics, formularios, teclas…)

Usos principales con JavaScript:

Acceder a elementos

let titulo = [Link]("miTitulo");

Cambiar contenido

[Link] = "¡Nuevo título!";

Cambiar estilos

[Link] = "blue";

Escuchar eventos (como clics)

[Link]("click", () => {
alert("¡Haz hecho clic!");
});

¿Por qué es importante?

Porque sin el DOM, JavaScript no podría interactuar con la página web.
Gracias al DOM, podemos crear páginas interactivas y dinámicas, como formularios
inteligentes, sliders, juegos, etc.

Ejemplo:
Cambiar el texto de un párrafo <p> al hacer clic en un botón

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo DOM básico</title>
 </head>
<body>

<h1>Manipulación del DOM</h1>

<p id="mensaje">Este es el mensaje original.</p>

<button id="cambiarBtn">Cambiar mensaje</button>

<script>
// Paso 1: Accedemos a los elementos
const parrafo = [Link]("mensaje");
const boton = [Link]("cambiarBtn");

// Paso 2: Escuchamos el evento clic

[Link]("click", () => {
// Paso 3: Modificamos el contenido del párrafo
[Link] = "¡El mensaje ha cambiado con JavaScript!";
});
</script>

</body>
</html>

El DOM es el "puente" entre HTML y JavaScript:

El HTML define el contenido y la estructura de una página.

El JavaScript permite interactuar con esa estructura.
El DOM (Document Object Model) es el modelo intermedio que representa ese HTML
como objetos que JavaScript puede manipular.

Sin el DOM, JavaScript no podría ni leer ni modificar la página web. El DOM

permite que JavaScript le hable al HTML y le diga: cambia esto, muéstrame
aquello, o reacciona cuando el usuario haga algo.