MANUAL

BÁSICO
DE
Manual Básico de JavaScript © 2024 by Juan Pueyo is licensed under CC BY-NC-ND 4.0
Manual Básico de JavaScript Juan Pueyo

Contenido
Capítulo 1. Introducción ................................................................................................................ 8
1.1. ¿Qué es JavaScript? ............................................................................................................ 8
Frontend (Lado del Cliente): .................................................................................................. 8
Backend (Lado del Servidor):................................................................................................. 9
1.2. Breve historia ..................................................................................................................... 9
1.3. Especificaciones oficiales ................................................................................................. 10
1.4. Cómo incluir JavaScript en documentos HTML ................................................................ 11
Atributo defer o async: ........................................................................................................ 12
1.5. E�queta noscript .............................................................................................................. 12
1.6. Sintaxis.............................................................................................................................. 12
1. Mayúsculas y minúsculas: ............................................................................................... 12
2. Espacios en Blanco: ......................................................................................................... 13
3. Punto y Coma (;): ............................................................................................................. 13
4. Bloques de Código: .......................................................................................................... 13
5. Comentarios: ................................................................................................................... 13
6. Cadenas de Texto:............................................................................................................ 13
7. Variables: ......................................................................................................................... 14
1.8. Posibilidades y limitaciones.............................................................................................. 14
Posibilidades ........................................................................................................................ 14
Limitaciones......................................................................................................................... 14
1.9. JavaScript y navegadores .................................................................................................. 15
Capítulo 2. Programación Básica. ................................................................................................ 16
2.1. Variables ........................................................................................................................... 16
2.1.1 Iden�ficadores............................................................................................................ 16
2.1.2. Declaración de variables. .......................................................................................... 17
2.1.3. Tipos de variables. ..................................................................................................... 19
1. Operadores Aritmé�cos: ................................................................................................. 20
2. Operadores de Asignación: ............................................................................................. 20
3. Operadores de Comparación: ......................................................................................... 21
4. Operadores Lógicos: ........................................................................................................ 21
5. Operadores de Concatenación: ....................................................................................... 21
6. Operador Ternario: .......................................................................................................... 21
7. Operador de Incremento/Decremento: .......................................................................... 22
2.3. Estructuras de control de flujo. ........................................................................................ 23

3
Manual Básico de JavaScript Juan Pueyo

2.3.1. Estructura if…else ...................................................................................................... 23

2.3.2. Estructura switch ....................................................................................................... 24
2.3.3. Estructura while ........................................................................................................ 25
2.3.4. Estructura do…while.................................................................................................. 25
2.3.5. Estructura for............................................................................................................. 26
2.3.6. break y con�nue ........................................................................................................ 26
2.3. Arrays................................................................................................................................ 28
2.3.1. Declaración de un Array: ........................................................................................... 28
2.3.2. Acceso a Elementos:.................................................................................................. 28
2.3.3. Modificación de Elementos: ...................................................................................... 28
2.3.4. Longitud del Array: .................................................................................................... 28
2.3.5. Iteración a través del Array: ...................................................................................... 29
2.3.6. Estructura for...in ....................................................................................................... 29
2.3.6. Estructura for...of ....................................................................................................... 29
2.3.6. Método forEach() ...................................................................................................... 30
2.3.7. Recomendaciones. .................................................................................................... 30
2.4. Arrays de múl�ples dimensiones. .................................................................................... 31
2.5. Métodos con cadenas ú�les en JavaScript. ...................................................................... 32
Métodos toUpperCase() y toLowerCase() ........................................................................... 32
Métodos charAt, indexOf y lastIndexOf. ............................................................................. 32
Método substring. ............................................................................................................... 33
Método split. ....................................................................................................................... 33
Atributo length. ................................................................................................................... 34
2.6. Métodos con arrays ú�les en JavaScript. ......................................................................... 34
Atributo length. ................................................................................................................... 34
Método concat. ................................................................................................................... 34
Método join. ........................................................................................................................ 34
Método push. ...................................................................................................................... 35
Método pop......................................................................................................................... 35
Método shi�. ....................................................................................................................... 35
Método unshi�.................................................................................................................... 35
Método reverse. .................................................................................................................. 36
Método slice. ....................................................................................................................... 36
2.7. Conversión explícita de �pos............................................................................................ 36
Number para conversión a número. ................................................................................... 36
String para conversión a cadena. ........................................................................................ 36

4
Manual Básico de JavaScript Juan Pueyo

Boolean para conversión a booleano. ................................................................................. 36

2.8. Otras funciones de conversión. ........................................................................................ 37
parseInt para conver�r una cadena a entero. ..................................................................... 37
parseFloat para conver�r una cadena a decimal. ............................................................... 37
2.9. Otras funciones. ............................................................................................................... 37
Función isNaN. .................................................................................................................... 37
Función eval. ....................................................................................................................... 38
2.9. EJERCICIO.......................................................................................................................... 38
3. Funciones ................................................................................................................................ 39
3.1. Definición y llamada a una función. ................................................................................. 39
3.2. Lugar de definición de las funciones. ............................................................................... 39
3.3. Parámetros. ...................................................................................................................... 40
3.4. Paso de parámetros por valor........................................................................................... 40
3.5. Retorno de funciones. ...................................................................................................... 41
3.6. Ámbito de las variables. ................................................................................................... 41
3.6.1. Ámbito Global............................................................................................................ 41
3.6.2. Ámbito Local. ............................................................................................................. 41
3.7. Funciones flecha =>. ......................................................................................................... 42
4. DOM ........................................................................................................................................ 44
4.1. Principales conceptos del DOM: ...................................................................................... 44
1. Nodos. ............................................................................................................................. 44
2. Árbol de Nodos. ............................................................................................................... 44
4.2. Tipos de nodos. ................................................................................................................ 45
1. Element Node (Nodo de Elemento). ............................................................................... 45
2. Atribute Node (Nodo de Atributo). ................................................................................ 45
3. Text Node (Nodo de Texto). ............................................................................................. 46
4. Comment Node (Nodo de Comentario). ......................................................................... 46
5. Document Node (Nodo de Documento). ........................................................................ 46
6. DocumentType Node (Nodo de DocumentType). ........................................................... 46
4.3. Acceso a los nodos del DOM. ........................................................................................... 46
Manipulación Dinámica del Contenido. .............................................................................. 46
Interac�vidad del Usuario. .................................................................................................. 46
Validación y Modificación de Formularios. ......................................................................... 46
Animaciones y Transiciones................................................................................................. 47
Dinámica de Es�los y Clases. ............................................................................................... 47
Manipulación de Eventos. ................................................................................................... 47

5
Manual Básico de JavaScript Juan Pueyo

Actualización Asíncrona de Contenido con AJAX. ............................................................... 47

4.4. Métodos de acceso a los elementos del DOM ................................................................. 48
4.4.1 Método getElementsByTagName. .............................................................................. 48
4.4.2 Método getElementById. ........................................................................................... 49
4.4.3 Métodos querySelector y querySelectorAll. .............................................................. 49
4.5. Creación y eliminación de nodos. .................................................................................... 52
4.5.1. Creación de un nodo. ................................................................................................ 52
4.5.2. Eliminación de un nodo. ............................................................................................ 53
4.5.3. Creación de un nodo de atributo. ............................................................................. 55
4.6. Acceso directo a los atributos HTML. ............................................................................... 56
4.6.1. Acceder a un Atributo por su nombre. ...................................................................... 56
4.6.2. Modificar el Valor de un Atributo: ............................................................................. 56
4.6.3. Acceder a Todos los Atributos de un Elemento:........................................................ 57
4.7. Manejo de propiedades CSS desde JavaScript. ................................................................ 57
4.7.1 Ejemplo....................................................................................................................... 58
4.8. Manejo de clases CSS desde JavaScript............................................................................ 59
4.7.1. Leer Clases: ................................................................................................................ 59
4.7.2. Eliminar Clases: ......................................................................................................... 59
4.7.3. Agregar Clases: .......................................................................................................... 60
4.7.4. Toggle (Agregar o Eliminar): ...................................................................................... 60
4.7.5. Contains ..................................................................................................................... 60
4.8. Ejercicio. ........................................................................................................................... 61
4.9. EJERCICIO PARA ENTREGAR. ......................................................................................... 61
5. Eventos. ................................................................................................................................... 62
5.1. Modelo de eventos........................................................................................................... 62
5.2. Tipos de eventos............................................................................................................... 62
5.3. Control de eventos. .......................................................................................................... 62
5.4. Obtener información de los eventos. ............................................................................... 63
1. Obtener el Elemento Obje�vo (Target). .......................................................................... 64
2. Obtener coordenadas del ratón. ..................................................................................... 64
3. Obtener tecla pulsada. .................................................................................................... 64
4. Obtener �po de evento. .................................................................................................. 64
5. Detener la Propagación del Evento. ................................................................................ 65
6. Prevenir el comportamiento predeterminado. ............................................................... 65
5.5. Controlar varios eventos con una misma función ............................................................ 66
5.6. DOMContentLoaded ........................................................................................................ 67

6
Manual Básico de JavaScript Juan Pueyo

5.7. Ejercicio 1. ........................................................................................................................ 67

5.8. Ejercicio 2. ........................................................................................................................ 67
6. Formularios ............................................................................................................................. 68
6.1. Acceso a elementos de un formulario.............................................................................. 68
6.1.1 Acceso mediante forms. ............................................................................................. 68
6.1.2 Acceso mediante named elements. ........................................................................... 70
6.2. Obtener información de los elementos de un formulario. .............................................. 70
6.2.1. Cuadros de texto y textarea. ..................................................................................... 70
6.2.2. Radiobuton. .............................................................................................................. 71
6.2.3. Checkbox. .................................................................................................................. 72
6.2.4. Select. ........................................................................................................................ 73
6.3. Validación de formularios................................................................................................. 74
6.3.1. Esquema �pico de validación. ................................................................................... 74
6.3.2. Validación de diferentes �pos de datos y elementos en formularios. ...................... 75
6.4. Evitar varios envíos del mismo formulario. ...................................................................... 76
7. Otras u�lidades. ...................................................................................................................... 77
7.1. Funciones para el control de ejecuciones de funciones................................................... 77
7.1.1. setTimeout() .............................................................................................................. 77
7.1.2. setInterval() y clearInterval() ..................................................................................... 78

7
Manual Básico de JavaScript Juan Pueyo

Capítulo 1. Introducción

1.1. ¿Qué es JavaScript?

JavaScript es un lenguaje de programación de alto nivel, interpretado y orientado a objetos. Es
ampliamente u�lizado para agregar interac�vidad y dinamismo a las páginas web. A diferencia
de otros lenguajes de programación, JavaScript se ejecuta directamente en el navegador del
usuario, lo que permite realizar acciones del lado del cliente.

JavaScript se u�liza tanto en el frontend (lado del cliente) como en el backend (lado del servidor)
del desarrollo web, lo que permite a los desarrolladores u�lizar el mismo lenguaje en ambos
entornos. Uso en el frontend y en el backend:

Frontend (Lado del Cliente):

1. Manipulación del DOM (Document Object Model):
JavaScript se u�liza para interactuar con el DOM, que representa la estructura de una página
web. Se puede cambiar el contenido de la página, manejar eventos del usuario, y modificar
es�los y atributos.

2. Interactividad en el Navegador:
A través de eventos y manipulación del DOM, JavaScript permite crear experiencias interac�vas
para el usuario en el navegador. Esto incluye formularios dinámicos, validación de datos,
animaciones y actualizaciones en �empo real.

3. AJAX (Asynchronous JavaScript and XML):

JavaScript se u�liza para realizar solicitudes asíncronas al servidor, lo que permite cargar o enviar
datos en segundo plano sin tener que recargar toda la página. Esto es esencial para aplicaciones
web modernas y la creación de interfaces de usuario fluidas.

4. Frameworks y Bibliotecas Frontend:

Hay numerosos frameworks y bibliotecas de JavaScript diseñados para simplificar el desarrollo
frontend, como React, Angular y [Link]. Estos facilitan la creación de interfaces de usuario
complejas y estructuradas.

8
Manual Básico de JavaScript Juan Pueyo

Backend (Lado del Servidor):

1. [Link]:
[Link] es un entorno de ejecución de JavaScript en el servidor. Permite a los desarrolladores
u�lizar JavaScript para construir aplicaciones del lado del servidor. [Link] u�liza el motor V8 de
Google Chrome para ejecutar JavaScript de manera eficiente en el servidor.

2. [Link]:
[Link] es un marco de desarrollo web para [Link] que simplifica la creación de aplicaciones
web y APIs en el lado del servidor.

3. Manipulación de Datos y Acceso a Bases de Datos:

JavaScript se u�liza para manipular datos en el servidor, interactuar con bases de datos y
proporcionar respuestas a las solicitudes del cliente. Se pueden u�lizar diversas bases de datos
como MongoDB, MySQL o PostgreSQL.

La capacidad de u�lizar JavaScript en ambos lados del desarrollo web ha llevado a la

popularización de la pila MEAN (MongoDB, [Link], Angular, [Link]) y MERN (MongoDB,
[Link], React, [Link]) para construir aplicaciones web de extremo a extremo con un solo
lenguaje. Esto facilita el desarrollo y la colaboración entre el frontend y el backend del equipo de
desarrollo.

1.2. Breve historia

La historia de JavaScript se remonta a 1995, cuando fue creado por Brendan Eich mientras
trabajaba en Netscape Communica�ons Corpora�on. La creación de JavaScript se realizó en un
período de 10 días y fue inicialmente llamado "LiveScript". Sin embargo, la colaboración
estratégica entre Netscape y Sun Microsystems llevó al cambio de nombre a "JavaScript" para
aprovechar el creciente interés en Java, otro lenguaje de programación desarrollado por Sun
Microsystems.

Es importante destacar que, aunque JavaScript comparte el nombre "Java", no está directamente
relacionado con Java en términos de diseño o funcionalidad. La elección del nombre "JavaScript"
fue en gran medida una decisión de marke�ng para capitalizar el auge de Java en ese momento.

JavaScript fue introducido en Netscape Navigator 2.0 en 1995 y, debido a su capacidad para
proporcionar interac�vidad en el lado del cliente en las páginas web, se convir�ó rápidamente
en un componente esencial del desarrollo web. A medida que la web evolucionaba, JavaScript
se volvía cada vez más importante, y su adopción se amplió con la estandarización a través de
ECMAScript, el estándar que define la especificación del lenguaje.

Con el �empo, JavaScript se ha conver�do en uno de los lenguajes de programación más

populares y ampliamente u�lizados en el desarrollo web, y ha experimentado un crecimiento

9
Manual Básico de JavaScript Juan Pueyo

significa�vo gracias a la expansión de las tecnologías web y el auge de los frameworks y

bibliotecas, como jQuery, Angular, React y [Link], que facilitan el desarrollo de aplicaciones más
complejas y dinámicas en el navegador.

1.3. Especificaciones oficiales

JavaScript ha experimentado varias versiones a lo largo de los años, con cada versión
introduciendo nuevas caracterís�cas, mejoras de rendimiento y correcciones de errores. La
especificación subyacente de JavaScript se llama ECMAScript, y aquí hay algunas de las versiones
más destacadas:

1. ECMAScript 1 (ES1): La primera versión de ECMAScript se lanzó en 1997, coincidiendo con la

introducción de JavaScript en Netscape.

2. ECMAScript 2 (ES2): Lanzado en 1998, esta versión incluyó correcciones de errores y mejoras
en la especificación.

3. ECMAScript 3 (ES3): Lanzado en 1999, ES3 introdujo nuevas caracterís�cas como manejo de
excepciones mejorado y soporte para expresiones regulares.

4. ECMAScript 4 (ES4): Originalmente planeado como la siguiente versión importante después

de ES3, pero el desarrollo se detuvo debido a desacuerdos en la comunidad sobre la complejidad
de las propuestas.

5. ECMAScript 5 (ES5): Lanzado en 2009, ES5 trajo muchas mejoras, incluyendo métodos de
arreglos adicionales, soporte para geters y seters, y el método bind().

6. ECMAScript 6 (ES6) o ECMAScript 2015 (ES2015): Lanzado en 2015, ES6 fue una de las
actualizaciones más grandes e introdujo muchas caracterís�cas nuevas, como clases, arrow
func�ons, const y let para la declaración de variables, entre otras.

7. ECMAScript 2016 (ES2016): Esta versión fue una actualización más pequeña, introduciendo el
operador de exponenciación ().

8. ECMAScript 2017 (ES2017): Introdujo nuevas caracterís�cas como async/await para simplificar
el trabajo con código asíncrono, así como [Link]/[Link], entre otros.

10
Manual Básico de JavaScript Juan Pueyo

9. ECMAScript 2018 (ES2018): Introdujo mejoras como las expresiones regulares lookbehind,
rest/spread proper�es para objetos, y [Link].finally.

10. ECMAScript 2019 (ES2019): Incluyó caracterís�cas como [Link].flat/flatMap,

[Link], y mejoras en el manejo de errores.

11. ECMAScript 2020 (ES2020): Introdujo caracterís�cas como BigInt para representar enteros
más grandes, [Link] y nullish coalescing operator (??).

Estas son solo algunas de las versiones más notables de ECMAScript. Desde ES6, la comunidad
ha adoptado un enfoque de lanzamientos anuales más pequeños para introducir nuevas
caracterís�cas de manera más constante y manejable. Es importante tener en cuenta que no
todas las caracterís�cas de las especificaciones pueden ser compa�bles con todos los
navegadores de inmediato, ya que la implementación puede llevar �empo.

1.4. Cómo incluir JavaScript en documentos HTML

Para incluir JavaScript en documentos HTML, se u�liza el elemento <script>. Se puede colocar el
código directamente entre las e�quetas <script></script> o enlazar a un archivo externo
u�lizando el atributo src dentro de la e�queta de apertura.

Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Mi Página Web</title>
</head>
<body>
<!-- Tu contenido HTML aquí -->

<!-- Incluir JavaScript en el cuerpo de la página -->

<script>
// Tu código JavaScript aquí
alert("¡Hola, mundo!");
</script>

<!-- Enlazar a un archivo externo -->

<script src="js/[Link]"></script>
</body>
</html>

11
Manual Básico de JavaScript Juan Pueyo

Atributo defer o async:

Estos atributos se pueden agregar a la e�queta <script> para controlar cómo se ejecuta el script
en relación con la carga de la página.

<script defer src="[Link]"></script>

<script async src="[Link]"></script>

- defer: Indica que el script se ejecutará después de que la página se haya analizado.
- async: Descarga el script de manera asíncrona y lo ejecuta tan pronto como esté disponible,
sin esperar a que se complete la carga de la página.

El método que se elija depende de las necesidades específicas y de la forma en que se prefiera
organizar el código.

1.5. E�queta noscript

La e�queta <noscript> se u�liza para proporcionar contenido alterna�vo que se mostrará si el
navegador del usuario no admite JavaScript o si está deshabilitado.

<noscript>
<p>Por favor, habilita JavaScript en tu navegador.</p>
</noscript>

1.6. Sintaxis
JavaScript es un lenguaje de programación flexible en términos de su sintaxis. Pautas generales
sobre la sintaxis de JavaScript:

1. Mayúsculas y minúsculas:
JavaScript es sensible a mayúsculas y minúsculas, lo que significa que miVariable y mivariable
son tratadas como dos variables diferentes.

var miVariable = 5;
var mivariable = 10;

[Link](miVariable); // Imprimirá 5
[Link](mivariable); // Imprimirá 10

12
Manual Básico de JavaScript Juan Pueyo

2. Espacios en Blanco:
JavaScript es bastante flexible en el uso de los espacios en blanco. Se pueden usar espacios y
saltos de línea para hacer que el código sea más legible.
var x = 5;
var y = 10;

if (x < y) {
[Link]("x es menor que y");
}

3. Punto y Coma (;):

Aunque no es estrictamente necesario en todas las situaciones, es una buena prác�ca terminar
las declaraciones con punto y coma.
var a = 5;
var b = 10;
var resultado = a + b;

4. Bloques de Código:
Las llaves {} se u�lizan para definir bloques de código, como el cuerpo de una función o una
estructura de control (if, for, while, etc.).
if (x < y) {
[Link]("x es menor que y");
} else {
[Link]("x no es menor que y");
}

5. Comentarios:
Los comentarios en JavaScript pueden ser de una sola línea (//) o de varias líneas (/* ... */).
// Este es un comentario de una sola línea

/*
Este es un comentario
de varias líneas
*/

6. Cadenas de Texto:
Puedes definir cadenas de texto con comillas simples (') o comillas dobles (").
var nombre = 'Juan';
var saludo = "Hola, " + nombre + "!";

13
Manual Básico de JavaScript Juan Pueyo

7. Variables:
Declara variables con var, let, o const. let y const son introducidos en ECMAScript 6 (ES6) y �enen
un ámbito de bloque más estricto que var.
var variable1 = 5;
let variable2 = 10;
const PI = 3.14;

1.8. Posibilidades y limitaciones

Posibilidades
AJAX (Asynchronous JavaScript and XML) es una técnica de desarrollo web que permite realizar
solicitudes asíncronas al servidor desde el navegador sin tener que recargar toda la página. En
lugar de esperar la respuesta del servidor de manera síncrona, AJAX permite que las solicitudes
y respuestas se manejen de manera asíncrona, lo que significa que la página web puede seguir
siendo u�lizada y actualizada mientras se espera la respuesta del servidor. AJAX le dio un empuje
muy importante a JavaScript. Webs como Gmail, Google Maps, Facebook, Twiter, etc. se basan
en AJAX.

JavaScript ha permi�do durante muchos años realizar y controlar comportamientos en las

páginas web. Hoy en día, muchos de esos comportamientos se pueden realizar con CSS, pero
eso no ha hecho más que aumentar las posibilidades de JavaScript.

Solo con JavaScript se pueden incluir aplicaciones dentro de páginas web que an�guamente solo
podían desarrollarse en entornos de escritorio.

Limitaciones
JavaScript es un lenguaje de programación muy versá�l y potente, pero también �ene sus
limitaciones y hay ciertas cosas que no puede hacer:

1. Acceso al sistema de archivos: por razones de seguridad, JavaScript en un navegador web �ene
restricciones para acceder al sistema de archivos local del usuario. No puede leer ni escribir
archivos directamente desde el sistema de archivos del cliente.

2. Acceso a recursos fuera del dominio: debido a la polí�ca de mismo origen (Same-Origin Policy),
JavaScript en un navegador web �ene limitaciones en cuanto a realizar solicitudes a dominios
diferentes al de la página que lo con�ene. Esto ayuda a prevenir ataques de seguridad como la
manipulación de recursos de otros dominios.

3. Manipulación directa del DOM en páginas externas: JavaScript no puede manipular

directamente el DOM de otra página web cargada en otra pestaña o ventana del navegador.
Nuevamente, esto se debe a medidas de seguridad.

4. Interacción con el sistema opera�vo: JavaScript no �ene acceso directo al sistema opera�vo
ni puede realizar operaciones de sistema, como la instalación de so�ware o el manejo de
archivos del sistema.

14
Manual Básico de JavaScript Juan Pueyo

5. Acceso a hardware específico: JavaScript no �ene acceso directo a hardware específico del
disposi�vo del usuario, como la cámara o el micrófono, sin el consen�miento explícito del
usuario.

6. Operaciones de bajo nivel: JavaScript no es un lenguaje de bajo nivel como C o Assembly. No

se pueden realizar operaciones de bajo nivel directamente, como la manipulación de bits o la
ges�ón directa de memoria.

7. Mul�hilos real: JavaScript en el navegador es de un solo hilo (aunque existen tecnologías como
Web Workers para realizar operaciones en segundo plano). [Link] en el servidor puede manejar
concurrencia, pero sigue siendo de un solo hilo mediante el uso de eventos y operaciones no
bloqueantes.

Es importante destacar que algunas de estas limitaciones son específicas del entorno del
navegador web y no se aplican necesariamente a entornos como [Link], donde JavaScript
puede tener más acceso al sistema opera�vo. Sin embargo, incluso en entornos de servidor, hay
ciertas restricciones y precauciones que deben tenerse en cuenta por razones de seguridad y
estabilidad.

1.9. JavaScript y navegadores

JavaScript es compa�ble con la mayoría de los navegadores modernos, pero pueden exis�r
pequeñas variaciones en la implementación entre ellos. Es fundamental conocer estas
diferencias para escribir código compa�ble. Ciertas librerías como jQuery ayudan a salvar estas
limitaciones.

15
Manual Básico de JavaScript Juan Pueyo

Capítulo 2. Programación Básica.

2.1. Variables

2.1.1 Iden�ficadores
Nombrar variables en JavaScript es una tarea importante para escribir un código limpio,
comprensible y mantenible. Pautas y convenciones comunes para nombrar variables:

1. Camel Case.
Se recomienda la convención de Camel Case para nombrar variables. Comienza con una letra
minúscula y las palabras siguientes comienzan con mayúsculas. Ejemplo: miVariable,
nombreUsuario, saldoCuenta.

var nombreCompleto = "Juan Pérez";

var edadUsuario = 25;

2. Descriptivo y Significativo.
Se deben u�lizar nombres de variables que sean descrip�vos y que transmitan su propósito. Se
deben evitar nombres genéricos o abreviaciones que puedan ser di�ciles de entender.
// No recomendado:
var x = 10;
var n = "John";
// Preferible:
var edad = 10;
var nombreCliente = "John";

3. Evitar Palabras Reservadas.

Como en otros lenguajes, no se pueden u�lizar palabras reservadas de JavaScript como nombres
de variables.
// No permitido:
var function = 5;

4. Evitar nombres de una sola letra (a menos que sea un índice de un bucle).
Aunque es común usar i como índice en bucles, evita nombres de una sola letra para variables,
excepto en contextos específicos y bien entendidos.
// Aceptable para índices de bucle:
for (var i = 0; i < 5; i++) {
// ...
}
// No recomendado:
var x = 10;

16
Manual Básico de JavaScript Juan Pueyo

2.1.2. Declaración de variables.

En JavaScript, hay tres maneras de declarar variables: var, let, y const. Cada una �ene sus propias
caracterís�cas y casos de uso:

1. var.
var fue la forma original de declarar variables en JavaScript. Sin embargo, �ene algunas
caracterís�cas que pueden causar problemas, especialmente en términos de ámbito. Además, si
se declaran dos variables iguales con var, JavaScript no genera ningún error.
var edad = 25;
var nombre = "Ana";

// Ámbito de función
function ejemplo() {
var variableLocal = "Solo visible dentro de la función";
[Link](edad); // Accesible desde cualquier parte de la
función
}

[Link](nombre); // Accesible fuera de la función

[Link](variableLocal); // Error, variableLocal no está
definida aquí

2. let.
let fue introducido en ECMAScript 6 (ES6) y se u�liza para declarar variables con ámbito de
bloque. A diferencia de var, las variables declaradas con let �enen un ámbito de bloque más
estricto.

let edad = 25;

let nombre = "Juan";

// Ámbito de bloque
if (true) {
let variableLocal = "Solo visible dentro del bloque if";
[Link](edad); // Accesible desde cualquier parte
dentro del bloque if
}

[Link](nombre); // Accesible fuera del bloque if

[Link](variableLocal); // Error, variableLocal no está
definida aquí

17
Manual Básico de JavaScript Juan Pueyo

3. const.
const también fue introducido en ES6 y se u�liza para declarar variables cuyos valores no
cambiarán. Las variables declaradas con const deben inicializarse al momento de la declaración,
y no se les puede asignar un nuevo valor.
const PI = 3.14;
const nombre = "Juan Pueyo";

// No permitido, ya que PI ya está asignado

PI = 3.1416;

// No permitido, ya que la variable debe ser inicializada al

momento de la declaración
const nuevaVariable;

Es recomendable u�lizar const siempre que sea posible, ya que ayuda a evitar cambios
accidentales en el código. Si una variable puede cambiar de valor, entonces se debe u�lizar let.
Hay que evitar el uso de var a menos que se esté trabajando con código an�guo o situaciones
específicas donde se necesita su comportamiento par�cular.

4. Uso de variables sin declarar.

Otra opción a evitar es el uso de variables sin declarar, ya que, en ese caso, JavaScript genera una
variable global aunque esta haya sido usada dentro de una función.
function ejemploFuncion() {
// Acceso o creación de una variable global dentro de una
función
miVariableGlobal = 0;
}

// Llamada a la funición ejemploFuncion()

ejemploFuncion();

// Muestra el valor de la variable por considerarse global

[Link](miVariableGlobal);

// Genera error porque miOtraVariable se declaró con var dentro

de la función.
[Link](miOtraVariable);

18
Manual Básico de JavaScript Juan Pueyo

2.1.3. Tipos de variables.

JavaScript es un lenguaje de programación de �pado débil, lo que significa que no es necesario
declarar explícitamente el �po de una variable al crearla. Los �pos de variables en JavaScript se
determinan dinámicamente en �empo de ejecución. Tipos de variables básicos:

1. Number.
Representa números, ya sean enteros o de punto flotante.
let edad = 25; // Entero
let altura = 1.75; // Punto flotante

2. String.
Representa cadenas de texto.
let nombre = "Elena";
let mensaje = 'Hola, ¿cómo estás?';

3. Boolean.
Representa un valor lógico, true o false.
let esActivo = true;
let tieneCuenta = false;

4. Undefined.
Representa una variable que ha sido declarada pero no inicializada.
let variableNoInicializada;
[Link](variableNoInicializada); // Imprimirá undefined

5. Null.
Representa la ausencia de valor o un valor nulo de forma intencionada.
let valorNulo = null;

6. Objeto Literal.
Representa un objeto, que puede contener propiedades y métodos y que se define sin llamar a
un constructor, por eso se denomina “literal”.
let persona = {
nombre: "Ana",
edad: 30,
ciudad: "Ejemplo"
};

7. Array.
Representa una colección de elementos.
let colores = ["rojo", "verde", "azul"];

19
Manual Básico de JavaScript Juan Pueyo

8. BigInt.
Introducido en ECMAScript 2020, representa números enteros mayores que
Number.MAX_SAFE_INTEGER. Se representan con una n al final del número.
let numeroGrande = 1234567890123456789012345678901234567890n;

2.2. Operadores.

JavaScript incluye varios operadores que permiten realizar diversas operaciones, como
aritmé�ca, comparación, asignación, lógica, y más.

1. Operadores Aritmé�cos:
- +: Suma

- -: Resta

- *: Mul�plicación

- /: División

- %: Módulo (devuelve el resto de la división)

let a = 10;
let b = 3;

[Link](a + b); // 13
[Link](a - b); // 7
[Link](a * b); // 30
[Link](a / b); // 3.3333333333333335
[Link](a % b); // 1

2. Operadores de Asignación:
- =: Asignación simple

- +=, -=, *=, /=: Asignación con operación

let x = 5;
x += 3; // x ahora es 8 (equivalente a x = x + 3)

20
Manual Básico de JavaScript Juan Pueyo

3. Operadores de Comparación:
- ==: Igualdad (compara valores, no �pos)

- ===: Igualdad estricta (compara valores y �pos)

- !=: Desigualdad (compara valores, no �pos)

- !==: Desigualdad estricta (compara valores y �pos)

- >, <, >=, <=: Mayor, menor, mayor o igual, menor o igual

let num1 = 10;

let num2 = "10";

[Link](num1 == num2); // true (compara valores)

[Link](num1 === num2); // false (compara valores y tipos)

4. Operadores Lógicos:
- &&: AND lógico

- ||: OR lógico

- !: NOT lógico

let llueve = true;

let haceFrio = false;

[Link](llueve && haceFrio); // false

[Link](llueve || haceFrio); // true
[Link](!llueve); // false

5. Operadores de Concatenación:
- +: Concatenación de cadenas
let nombre = "Juan";
let apellido = "Pérez";

let nombreCompleto = nombre + " " + apellido; // "Juan Pérez"

6. Operador Ternario:
- condición ? expresiónSiVerdadero : expresiónSiFalso
let edad = 20;
let esMayor = edad >= 18 ? "Es mayor de edad" : "Es menor de edad";

21
Manual Básico de JavaScript Juan Pueyo

7. Operador de Incremento/Decremento:
- ++: Incremento

- --: Decremento
let contador = 5;
contador++; // Incrementa el contador a 6

22
Manual Básico de JavaScript Juan Pueyo

2.3. Estructuras de control de flujo.

2.3.1. Estructura if…else

La estructura if en JavaScript se u�liza para ejecutar un bloque de código si una condición
especificada se evalúa como verdadera. Puedes usar la estructura básica if, así como también
agregar cláusulas else if y else para manejar múl�ples casos. Diferentes ejemplos de la estructura
if en función de las diferentes formas de uso:

1. Estructura Básica if.

let edad = 20;
if (edad >= 18) {
[Link]("Es mayor de edad");
}

2. Estructura if con else.

let hora = 14;
if (hora < 12) {
[Link]("Buenos días");
} else {
[Link]("Buenas tardes o noches");
}

3. Estructura if con else if.

let hora = 18;
if (hora < 12) {
[Link]("Buenos días");
} else if (hora < 18) {
[Link]("Buenas tardes");
} else {
[Link]("Buenas noches");
}

4. Operador Ternario (Shorthand if-else).

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

23
Manual Básico de JavaScript Juan Pueyo

2.3.2. Estructura switch

La estructura switch en JavaScript proporciona una forma de ejecutar diferentes bloques de
código según el valor de una expresión. Se trata de una forma más organizada de manejar
múl�ples casos que podrían surgir. Cada opción se establece con case y un break es el que finaliza
la ejecución del case.

let diaDeLaSemana = 3;
let nombreDelDia;

switch (diaDeLaSemana) {
case 1:
nombreDelDia = "Lunes";
break;
case 2:
nombreDelDia = "Martes";
break;
case 3:
nombreDelDia = "Miércoles";
break;
case 4:
nombreDelDia = "Jueves";
break;
case 5:
nombreDelDia = "Viernes";
break;
case 6:
case 7:
nombreDelDia = "Fin de semana";
break;
default:
nombreDelDia = "Día no válido";
}

[Link]("Hoy es " + nombreDelDia);

En este ejemplo, la expresión diaDeLaSemana se evalúa, y el código dentro del bloque switch se
ejecuta según el valor de esa expresión. Cada case representa un posible valor que puede tener
diaDeLaSemana. Cuando se encuentra el valor correcto, se ejecuta el bloque de código
correspondiente. El break se u�liza para salir del switch después de que se ha ejecutado un
bloque.

Si diaDeLaSemana no coincide con ninguno de los case, se ejecuta el bloque default (opcional).
Si no hay un bloque default, no se realiza ninguna acción si ninguno de los casos coincide.

Puede haber múl�ples casos que compartan el mismo bloque de código sin la necesidad de un
break entre ellos. Además, a par�r de ECMAScript 2015 (ES6), puedes u�lizar switch con cadenas
y expresiones más complejas. La estructura switch es ú�l cuando �enes múl�ples casos que
quieres evaluar de manera más clara y organizada que con una serie de instrucciones if-else if.

24
Manual Básico de JavaScript Juan Pueyo

const valor = 75;

switch (true) {
case (valor >= 0 && valor <= 49):
[Link]("Valor en el rango de 0 a 49");
break;
case (valor >= 50 && valor <= 74):
[Link]("Valor en el rango de 50 a 74");
break;
case (valor >= 75 && valor <= 100):
[Link]("Valor en el rango de 75 a 100");
break;
default:
[Link]("Valor fuera de rango");
}

2.3.3. Estructura while

La estructura while en JavaScript se u�liza para ejecutar un bloque de código mientras una
condición especificada sea verdadera. La condición se evalúa antes de ejecutar el bloque de
código, y si es verdadera, el bloque se ejecuta. Si la condición es falsa, la ejecución del bucle se
de�ene. Ejemplo:
let contador = 0;

while (contador < 5) {

[Link]("Iteración " + contador);
contador++;
}

En este ejemplo, el bloque de código dentro del while se ejecutará mientras la variable contador
sea menor que 5. En cada iteración, se imprime un mensaje y se incrementa el valor de contador.
Cuando contador alcanza el valor de 5, la condición se vuelve falsa y el bucle finaliza.

2.3.4. Estructura do…while

La estructura do-while en JavaScript es similar a la estructura while, pero con una diferencia
crucial: en un bucle do-while, el bloque de código se ejecuta al menos una vez, incluso si la
condición es falsa desde el principio. Después de ejecutar el bloque de código, se verifica la
condición y, si es verdadera, el bucle se repite. Ejemplo:

let contador = 0;

do {
[Link]("Iteración " + contador);
contador++;
} while (contador < 5);

En este ejemplo, el bloque de código dentro del do se ejecutará al menos una vez, ya que la
condición se verifica después de la ejecución del bloque. Luego, la condición se evalúa, y si es

25
Manual Básico de JavaScript Juan Pueyo

verdadera, el bucle se repe�rá. El bucle con�nuará ejecutándose mientras la condición

especificada sea verdadera.

2.3.5. Estructura for

La estructura for en JavaScript se u�liza para ejecutar un bloque de código repe�damente,
controlando el número de iteraciones mediante una expresión de inicialización, una condición y
una expresión de actualización. La sintaxis básica es la siguiente:

for (inicialización; condición; actualización) {

// Bloque de código a ejecutar en cada iteración
}

Ejemplo simple de un bucle for que imprime los números del 0 al 4:

for (let i = 0; i < 5; i++) {
[Link](i);
}

En este ejemplo:

- let i = 0: La expresión de inicialización establece el valor inicial de la variable de control del bucle
(i en este caso).

- i < 5: La condición verifica si la variable de control (i) es menor que 5. Si es verdadera, el bucle
con�núa; de lo contrario, se de�ene.

- i++: La expresión de actualización incrementa la variable de control (i) después de cada

iteración.

El resultado de este bucle sería imprimir:

0
1
2
3
4

2.3.6. break y con�nue

Las instrucciones break y con�nue son u�lizadas en JavaScript para controlar el flujo de ejecución
dentro de bucles (for, while, do-while, etc.).

26
Manual Básico de JavaScript Juan Pueyo

1. break.
La instrucción break se u�liza para salir de un bucle antes de que se complete su ejecución
normal. Puede u�lizarse en bucles for, while, do-while, y también en bloques switch. Ejemplo:

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

[Link](i);
if (i === 2) {
break; // Sale del bucle cuando i es igual a 2
}
}

En este ejemplo, el bucle se detendrá cuando i sea igual a 2, y no con�nuará a las iteraciones
siguientes.

2. continue.
La instrucción con�nue se u�liza para saltar a la siguiente iteración de un bucle sin ejecutar el
resto del código en el bloque del bucle. Ejemplo:

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

if (i === 2) {
continue; // Salta a la siguiente iteración cuando i es
igual a 2
}
[Link](i);
}

En este ejemplo, cuando i es igual a 2, se ejecutará la instrucción con�nue, saltando a la siguiente

iteración sin imprimir el valor de i en ese caso par�cular.

Ambas instrucciones (break y continue) son herramientas poderosas para controlar el flujo de
ejecución en situaciones específicas. Sin embargo, se recomienda su uso cuidadoso para evitar
resultados inesperados y mantener un código claro y fácil de entender.

27
Manual Básico de JavaScript Juan Pueyo

2.3. Arrays.

En JavaScript, los arrays son objetos que almacenan múl�ples valores en una única variable. Los
arrays pueden contener elementos de cualquier �po de datos, como números, strings, objetos,
funciones, otros arrays, etc.

2.3.1. Declaración de un Array:

// Declaración de un array vacío
let miArray = [];

Como los arrays en JavaScript son objetos, también se pueden crear instancias de la clase Array.
// Crear un array vacío
let miArray = new Array();

// Crear un array con longitud específica (10 elementos, todos

undefined)
let arrayConLongitud = new Array(10);

// Declaración de un array con elementos

let numeros = [1, 2, 3, 4, 5];
let frutas = ['manzana', 'banana', 'uva'];

// Crear un array con elementos iniciales

let numeros = new Array(1, 2, 3, 4, 5);

2.3.2. Acceso a Elementos:

[Link](numeros[0]); // Acceder al primer elemento (índice 0)
[Link](frutas[1]); // Acceder al segundo elemento (índice 1)

2.3.3. Modificación de Elementos:

frutas[1] = 'kiwi'; // Modificar el segundo elemento

2.3.4. Longitud del Array:

Mediante el atributo length se puede obtener la longitud de un array.
// Obtener la longitud del array
[Link]([Link]);

28
Manual Básico de JavaScript Juan Pueyo

2.3.5. Iteración a través del Array:

Mediante un bucle for u�lizando su longitud:
for (let i = 0; i < [Link]; i++) {
[Link](frutas[i]);
}

2.3.6. Estructura for...in

La estructura for...in se u�liza para iterar sobre las propiedades enumerables de un objeto. Esta
sentencia es especialmente ú�l para recorrer las propiedades de un objeto, ya que no solo itera
sobre las propiedades propias del objeto, sino también sobre las propiedades heredadas del
proto�po del objeto. Aunque se puede usar con arrays, para los arrays es mejor u�lizar for…of o
forEach():

let miArray = [1, 2, 3, 4, 5];

// Utilizando for...in con arrays

for (let indice in miArray) {
[Link](indice + ": " + miArray[indice]);
}

2.3.6. Estructura for...of

La sentencia for...of en JavaScript se u�liza para iterar sobre elementos iterables, como arrays,
cadenas de texto, mapas, conjuntos, etc. Como contrapar�da, no se puede u�lizar para modificar
los elementos del array, solo para su lectura. Ejemplo de uso con arrays y con strings:

let miArray = [1, 2, 3, 4, 5];

// Usando for...of para iterar sobre elementos de un array

for (let elemento of miArray) {
[Link](elemento);
}

let miString = "Hola";

// Usando for...of para iterar sobre caracteres de una cadena

for (let caracter of miString) {
[Link](caracter);
}

29
Manual Básico de JavaScript Juan Pueyo

2.3.6. Método forEach()

forEach es un método en JavaScript que se u�liza para iterar sobre elementos de un array o sobre
los valores de un objeto iterable. Este método toma una función de devolución de llamada
(callback) y la ejecuta una vez por cada elemento en el array. Ejemplo de uso:

let miArray = [1, 2, 3, 4, 5];

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

En este ejemplo, la función de devolución de llamada se ejecuta una vez por cada elemento en
miArray, y elemento toma el valor de cada elemento en cada iteración.

Con el método forEach sí se pueden realizar diversas operaciones en cada elemento del array,
como se muestra en el siguiente ejemplo:

let miArray = [1, 2, 3, 4, 5];

[Link](function(elemento, indice, array) {

array[indice] = elemento * 2;
});

[Link](miArray);

2.3.7. Recomendaciones.
Aunque forEach() es más moderno, para iteraciones simples puede ser un poco engorroso. for..of
es muy cómodo pero solo sirve para leer, por lo tanto, la recomendación es que para iteraciones
simples en las que sea necesario modificar el array, se u�lice el método tradicional, y si solo es
para leer, for..of.

30
Manual Básico de JavaScript Juan Pueyo

2.4. Arrays de múl�ples dimensiones.

Los arrays mul�dimensionales en JavaScript son simplemente arrays que con�enen otros arrays
como elementos. Estos arrays dentro de arrays pueden tener diferentes longitudes, lo que
proporciona flexibilidad para representar estructuras de datos bidimensionales o incluso
tridimensionales. Ejemplo de array de dos dimensiones (matriz):

// Array bidimensional (matriz)

let matriz = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];

// Acceso a elementos de la matriz

[Link](matriz[0][1]); // Imprime el elemento en la primera
fila, segunda columna (2)

// Iteración sobre los elementos de la matriz

for (let i = 0; i < [Link]; i++) {
for (let j = 0; j < matriz[i].length; j++) {
[Link](matriz[i][j]);
}
}

También es posible crear arrays mul�dimensionales a par�r de instancias de la clase Array.

// Crear una matriz de 3x3 instanciando la clase Array
let matriz = new Array(3);

// Inicializar cada fila como un array de longitud 3

for (let i = 0; i < 3; i++) {
matriz[i] = new Array(3);
}

// Asignar valores a los elementos de la matriz

matriz[0][0] = 1;
matriz[0][1] = 2;
matriz[0][2] = 3;

matriz[1][0] = 4;
matriz[1][1] = 5;
matriz[1][2] = 6;

matriz[2][0] = 7;
matriz[2][1] = 8;
matriz[2][2] = 9;

// Imprimir la matriz
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
[Link](matriz[i][j]);
}
}

31
Manual Básico de JavaScript Juan Pueyo

2.5. Métodos con cadenas ú�les en JavaScript.

A con�nuación, se muestran algunos métodos de cadenas muy u�lizados en JavaScript:

Métodos toUpperCase() y toLowerCase()

Son métodos que se u�lizan para conver�r todos los caracteres de una cadena de texto a
mayúsculas y minúsculas respec�vamente. Ejemplo:

let mensaje = "Hola, mundo!";

let mensajeEnMayusculas = [Link]();

[Link](mensajeEnMayusculas); // Salida: HOLA, MUNDO!

Estos métodos no modifican la cadena original, sino que devuelven una nueva cadena con los
caracteres modificados.

Métodos charAt, indexOf y lastIndexOf.

Estos métodos también se u�lizan con cadenas de texto.

charAt.
Este método devuelve el carácter en el índice especificado de una cadena. Los índices en
JavaScript comienzan desde 0. Ejemplo:

let mensaje = "Hola, mundo!";

let caracterEnIndice2 = [Link](2);

[Link](caracterEnIndice2); // Salida: l

En este ejemplo, charAt(2) devuelve el carácter en la posición 2 de la cadena, que es "l".

indexOf.
Este método se u�liza para encontrar la primera ocurrencia de un valor en una cadena y devuelve
el índice de la primera aparición. Si el valor no se encuentra, devuelve -1. Ejemplo:
let mensaje = "Hola, mundo!";
let indiceDeComa = [Link](',');

[Link](indiceDeComa);

En este ejemplo, indexOf(',') devuelve el índice de la primera aparición de la coma en la cadena.

32
Manual Básico de JavaScript Juan Pueyo

lastIndexOf.
Igual que indexOf pero empezando por el final de la cadena. Ejemplo:
let mensaje = "Hola, mundo! Hola de nuevo!";
let ultimoIndiceDeHola = [Link]('Hola');

[Link](ultimoIndiceDeHola); // Salida: 13

Método substring.
Se u�liza para extraer una parte de una cadena de texto, especificando los índices de inicio y fin.
Ejemplo:
let mensaje = "Hola, mundo!";
let subcadena = [Link](0, 5);

[Link](subcadena); // Salida: Hola,

En este ejemplo, substring(0, 5) extrae los caracteres desde el índice 0 hasta el índice 4 (sin incluir
el 5), por lo que la subcadena resultante es "Hola,".

Es importante mencionar que si se omite el segundo argumento en substring, la función tomará

todos los caracteres desde el índice de inicio hasta el final de la cadena:
let mensaje = "Hola, mundo!";
let subcadena = [Link](6);

[Link](subcadena); // Salida: mundo!

Aquí, substring(6) extrae los caracteres desde el índice 6 hasta el final de la cadena, dando como
resultado la subcadena "mundo!".

Método split.
Se u�liza para dividir una cadena en un array de subcadenas en función de un delimitador
especificado. Ejemplo:
let listaFrutas = "manzana,banana,uva,kiwi";

// Dividir la cadena en un array usando la coma como delimitador

let arrayFrutas = [Link](',');

[Link](arrayFrutas);
// Salida: ["manzana", "banana", "uva", "kiwi"]

En este ejemplo, la cadena "manzana,banana,uva,kiwi" se divide en un array de frutas u�lizando

la coma como delimitador. Cada elemento del array resultante con�ene una de las frutas.

33
Manual Básico de JavaScript Juan Pueyo

Atributo length.
Se u�liza para obtener la longitud (número de caracteres) de una cadena de texto. Ejemplo:

let mensaje = "Hola, mundo!";

let longitudMensaje = [Link];

[Link](longitudMensaje); // Salida: 12

2.6. Métodos con arrays ú�les en JavaScript.

A con�nuación, se muestran algunos métodos de arrays ú�les y muy u�lizados en JavaScript:

Atributo length.
Al igual que con las cadenas, se u�liza para obtener la longitud de un array. Ejemplo:

let miArray = [1, 2, 3, 4, 5];

let longitudArray = [Link];

[Link](longitudArray); // Salida: 5

Método concat.
Se u�liza para combinar dos o más arrays creando un nuevo array resultante de la concatenación
de los arrays originales. Ejemplo:

let array1 = [1, 2, 3];

let array2 = [4, 5, 6];
let arrayConcatenado = [Link](array2);

[Link](arrayConcatenado);
// Salida: [1, 2, 3, 4, 5, 6]

Método join.
Se u�liza para unir todos los elementos de un array en una cadena. Se puede especificar un
separador opcional que se u�lizará entre cada elemento del array. Ejemplo:
let miArray = ["Hola", "mundo", "con", "JavaScript"];
let cadenaUnida = [Link](" ");

[Link](cadenaUnida);
// Salida: "Hola mundo con JavaScript"

En este ejemplo, join(" ") une todos los elementos del array miArray en una cadena, u�lizando
un espacio como separador entre cada elemento.

Si no se proporciona un separador, join() u�lizará una coma por defecto:

34
Manual Básico de JavaScript Juan Pueyo

let otroArray = [1, 2, 3, 4, 5];

let cadenaDefault = [Link]();

[Link](cadenaDefault);
// Salida: "1,2,3,4,5"

Método push.
Añade uno o más elementos al final de un array.
let miArray = [1, 2, 3];
[Link](4, 5);

[Link](miArray);
// Salida: [1, 2, 3, 4, 5]

Método pop.
Elimina el úl�mo elemento de un array y devuelve ese elemento.
let miArray = [1, 2, 3, 4, 5];
let ultimoElemento = [Link]();

[Link](ultimoElemento); // Salida: 5
[Link](miArray);
// Salida: [1, 2, 3, 4]

Método shi�.
El método shi�() elimina el primer elemento de un array y devuelve ese elemento.
let miArray = [1, 2, 3, 4, 5];
let primerElemento = [Link]();

[Link](primerElemento); // Salida: 1
[Link](miArray);
// Salida: [2, 3, 4, 5]

Método unshi�.
El método unshi�() añade uno o más elementos al inicio de un array.
let miArray = [2, 3, 4, 5];
[Link](1);

[Link](miArray);
// Salida: [1, 2, 3, 4, 5]

35
Manual Básico de JavaScript Juan Pueyo

Método reverse.
Se u�liza para inver�r el orden de los elementos en un array. Ejemplo:
let miArray = [1, 2, 3, 4, 5];
[Link]();

[Link](miArray);
// Salida: [5, 4, 3, 2, 1]

Método slice.
Sirve para obtener una porción del array, desde la posición del primer parámetro hasta la
posición del segundo parámetro -1.

let subArray = [Link](1, 3); // Obtiene una porción del array

// desde la posición 1 hasta la
// posición 2 (3-1)

2.7. Conversión explícita de �pos.

JavaScript es un lenguaje de programación de �pado dinámico, lo que significa que no es
necesario declarar explícitamente el �po de una variable, sin embargo puede ser necesario
realizar algunas conversiones de �po.

Number para conversión a número.

let cadenaNumero = "123";
let numeroConvertido = Number(cadenaNumero);

[Link](numeroConvertido);
// Salida: 123
String para conversión a cadena.
let numero = 456;
let cadenaConvertida = String(numero);

[Link](cadenaConvertida);
// Salida: "456"

Boolean para conversión a booleano.

let valor = "Hola";
let booleanoConvertido = Boolean(valor);

[Link](booleanoConvertido);
// Salida: true (cualquier cadena no vacía se evalúa como true)

36
Manual Básico de JavaScript Juan Pueyo

2.8. Otras funciones de conversión.

Las siguientes funciones son necesarias para conver�r cadenas a valores numéricos y poder
operar con esos valores, como por ejemplo cuando se quiere operar con unidades de medida de
CSS.

parseInt para conver�r una cadena a entero.

let entero1 = parseInt("2.75");
let entero2 = parseInt("2.75rem");

[Link](entero1, entero2);
// Salida: 2 2

parseFloat para conver�r una cadena a decimal.

let numero3 = parseFloat("10.5");
let numero4 = parseFloat("10.5rem");
let numero5 = parseFloat("50%");
let numero3floor = [Link](numero3);
let numero3ceil = [Link](numero3);

[Link](numero3, numero4, numero5, numero3floor, numero3ceil);

// Salida: 10.5 10.5 50 10 11

En el siguiente ejemplo se muestra cómo modificar un valor rem

obtenido de alguna propiedad CSS, como por ejemplo fontSize.

let size = "2.5rem";

let nuevoSize = parseFloat(size) + 0.3 + "rem";
[Link](nuevoSize);
// Salida: "2.8rem"

2.9. Otras funciones.

Función isNaN.
Se u�liza para determinar si un valor es NaN (Not a Number). Ejemplo:

let valor1 = 42;

let valor2 = "Hola";
let valor3 = NaN;

[Link](isNaN(valor1)); // Salida: false (valor1 no es NaN)

[Link](isNaN(valor2)); // Salida: true (valor2 se convierte
a NaN)
[Link](isNaN(valor3)); // Salida: true (valor3 ya es NaN)

37
Manual Básico de JavaScript Juan Pueyo

Función eval.
Se u�liza para evaluar o ejecutar una cadena de texto como código JavaScript. Sin embargo, su
uso generalmente se desaconseja debido a problemas de seguridad y rendimiento, ya que puede
abrir la puerta a ejecución de código malicioso o ineficiencias en la interpretación del código.
Ejemplo de uso:

let x = 10;
let y = 20;
let resultado = eval("x + y");

[Link](resultado); // Salida: 30

2.9. EJERCICIO.
Escribe el código necesario para crear una matriz de 20x20 con los valores del 1 al 400 pero
par�endo de una estructura vacía y sin u�lizar new Array():

let matriz = [];

38
Manual Básico de JavaScript Juan Pueyo

3. Funciones

3.1. Definición y llamada a una función.

Las funciones en JavaScript son bloques de código reu�lizable que realizan una tarea específica.
Las funciones se definen en una parte del código para luego llamarlas según sea necesario. Para
definir una función se u�liza la palabra reservada function:

function nombreFuncion(parametros) {
…
}

Ejemplo:
// Definición de una función llamada suma
function suma(a, b) {
let resultado = a + b;
[Link](resultado);

En este ejemplo, se define una función llamada suma que toma dos parámetros (a y b) y muestra
la suma de estos dos valores.

Para llamar a una función se indica el nombre de la función seguido de los parámetros, que
�enen que corresponder con los de la definición de la función.

// Llamada a la función suma

suma(5, 3);

En este caso, se llama a la función suma con los argumentos 5 y 3, y el resultado se muestra por
la consola.

3.2. Lugar de definición de las funciones.

En principio las funciones se pueden colocar en cualquier parte, aunque es recomendable que
siempre se encuentren al principio del código. Si la función se encuentra en un <script> diferente
al de la llamada, es obligatorio que el <script> de la función se encuentre antes que el <script>
donde se encuentre la llamada.

39
Manual Básico de JavaScript Juan Pueyo

3.3. Parámetros.
Los parámetros de las funciones en JavaScript son u�lizados para pasar información a la función
cuando es llamada. Estos parámetros actúan como variables locales dentro de la función y
permiten que la función realice operaciones específicas con los valores proporcionados. Gracias
a los parámetros, las funciones aumentan su funcionalidad y permiten ahorrar y aprovechar
código.

Para especificar los parámetros, estos se indican entre paréntesis después del nombre de la
función. Si son varios, se separan por comas y su correspondencia es de izquierda a derecha.
Dado que JavaScript no especifica el �po de sus variables, en los parámetros tampoco se realiza.
En el ejemplo anterior se u�lizaron dos parámetros, a y b.

JavaScript permite el uso de valores por defecto en los parámetros indicando su valor junto al
parámetro. En el siguiente ejemplo se mostraría por la consola 0 y undefined.
function ejemploFuncion(a = 0, b) {
[Link](a, b);
}

ejemploFuncion(); // Llamada a la función ejemploFuncion()

Como se puede observar, la llamada a la función no �ene ningún parámetro y JavaScript no

genera error. Lo que hace es asignar el valor por defecto 0 al parámetro a, y el parámetro b se
queda como undefined.

Hay que indicar que JavaScript permite el envío de un número variable de parámetros a la
función, sin embargo, no se van a explicar en este manual.

3.4. Paso de parámetros por valor.

Cuando un parámetro se pasa por referencia, las modificaciones realizadas dentro de la función
�enen efecto fuera de la misma. En JavaScript todas las variables pasan por valor y los objetos
por referencia. No existe la posibilidad de modificar esta caracterís�ca. Dado que un array se
considera un objeto, todos los arrays pasan por referencia. En el siguiente ejemplo se puede ver
cómo las modificaciones realizadas dentro de la función han tenido efecto mientras que la
modificación de la variable no, ya que ésta pasa por valor y el array por referencia:
// Función que modifica un array
function modificarArray(arr, v) {
[Link](4);
arr[0] = 99;
v = 100;
}

// Array y variable
let miArray = [1, 2, 3];
let miVariable = 0;

// Llamada a la función
modificarArray(miArray, miVariable);

// El array ha sido modificado pero la variable no

[Link](miArray, miVariable); // Salida: [99, 2, 3, 4] 0

40
Manual Básico de JavaScript Juan Pueyo

3.5. Retorno de funciones.

Las funciones normalmente retornan un valor, el cual es reemplazado por donde se encuentre
su llamada. En JavaScript se realiza con la palabra reservada return seguida de la expresión de
retorno. Solo se permite que se retorne un valor, sin embargo, no hay limitación con el �po que
�ene que devolver, por lo tanto, si se quieren retornar varios valores, se puede retornar un array
que incluya dichos valores.

En cuanto al número de returns, no hay limitación, pero hay que tener presente que en cuanto
se ejecuta un return, la función finaliza y devuelve el valor de dicho return.

3.6. Ámbito de las variables.

El ámbito de una variable se refiere a la región del código donde la variable es accesible y puede
ser u�lizada. JavaScript �ene dos �pos principales de ámbitos: el ámbito global y el ámbito local.

3.6.1. Ámbito Global.

Las variables declaradas fuera de cualquier función o bloque de código �enen un ámbito global.
Estas variables son accesibles desde cualquier parte del código, ya sea dentro de funciones,
bloques o incluso en otros archivos, siempre que no se u�lice una palabra clave como var, let, o
const para restringir su ámbito. Si se u�liza una variable sin u�lizar var, let o const, incluso dentro
de una función, JavaScript la considera global, lo que puede dar lugar a problemas.

// Variable global
let variableGlobal = "Soy global";

function ejemploGlobal() {
cuidadoTambienSoyGlobal = "Soy global";
[Link](variableGlobal);
}

ejemploGlobal(); // Salida: Soy global

[Link](cuidadoTambienSoyGlobal);
// Salida: Soy global Soy global

3.6.2. Ámbito Local.

Las variables declaradas dentro de una función o bloque de código �enen un ámbito local. Estas
variables solo son accesibles dentro de la función o bloque donde fueron declaradas. Solo let y
const, permiten declarar variables a nivel de bloque.

Ejemplo con var:

function ejemploLocal() {
// Variable local con 'var'
var variableLocal = "Soy local";

[Link](variableLocal);
}

ejemploLocal(); // Salida: Soy local

41
Manual Básico de JavaScript Juan Pueyo

// La variable local no es accesible fuera de la función

// [Link](variableLocal); // Esto generará un error

Ejemplo con let y const:

function ejemploBloque() {
if (true) {
// Variable local con 'let' y 'const' (ámbito de bloque)
let variableBloque = "Soy de bloque";
const otraVariableBloque = "Otra de bloque";

[Link](variableBloque);
[Link](otraVariableBloque);
}

// Las variables de bloque no son accesibles fuera del bloque

// [Link](variableBloque); // Esto generará un error
// [Link](otraVariableBloque); // Esto generará un error
}

ejemploBloque();

En general, se recomienda u�lizar let y const en lugar de var para evitar problemas relacionados
con el ámbito. Además, JavaScript ahora favorece el uso de let y const por sus comportamientos
más predecibles y menos propensos a errores.

3.7. Funciones flecha =>.

Las funciones flecha surgieron con ECMAScript 6, como parte de la modernización del lenguaje
JavaScript.

Una función flecha es una expresión de función con una sintaxis más breve que no �ene su
propio this, arguments, super ni [Link]. Hereda el this del contexto donde se define y No
puede usarse como constructor. Dado que no �enen nombre, solo se pueden usar como
resultado de una expresión y asignar su valor, o como parámetro de una función (mo�vo por el
que se incluye aquí).

Se define con la sintaxis:

(parametros) => { cuerpo }

En vez de:

function nombreFuncion(parametros) {
cuerpo…
}

42
Manual Básico de JavaScript Juan Pueyo

Incluso si solo �ene una instrucción, se pueden omi�r las llaves y el return. En el siguiente
ejemplo se muestra una equivalencia:

function suma1(a, b) {
return a + b;
}
[Link](suma1(10, 20));

const suma2 = (a, b) => a + b;

[Link](suma2(10, 20));

43
Manual Básico de JavaScript Juan Pueyo

4. DOM

El DOM, o Modelo de Objetos del Documento (Document Object Model, por sus siglas en inglés),
es una interfaz de programación para documentos HTML y XML. En el contexto de JavaScript, el
DOM proporciona una representación estructurada y orientada a objetos de un documento web.
Es una interfaz que permite a los programas (como scripts de JavaScript) modificar la estructura,
es�lo y contenido de un documento.

En esencia, el DOM convierte un documento web en una estructura de árbol de nodos, donde
cada nodo representa parte del documento, como elementos HTML, atributos, texto, etc. Este
árbol de nodos es accesible a través de JavaScript, lo que permite a los desarrolladores manipular
dinámicamente el contenido y la apariencia de una página web.

4.1. Principales conceptos del DOM:

1. Nodos.
Se consideran nodos del árbol del DOM a los elementos HTML, atributos, texto y otros
componentes del documento HTML.

2. Árbol de Nodos.
La estructura jerárquica de nodos que representa la organización del documento.

Ejemplo de árbol de nodos DOM:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de DOM</title>
</head>
<body>
<a href="[Link]"><p>Esto es un enlace.</p></a>

</body>
</html>

44
Manual Básico de JavaScript Juan Pueyo

Documento

HTML

Elemento Elemento

<head> <body>

Elemento Elemento Elemento

<meta> <�tle> <a>

Atributo Texto Atributo Elemento

charset=”…” Ejemplo de DOM
href=”…” <p>

Texto
Esto es un enlace

4.2. Tipos de nodos.

Existen varios �pos de nodos que representan diferentes elementos y componentes de un
documento HTML. Cada �po de nodo �ene sus propias propiedades y métodos específicos. Tipos
de nodos:

1. Element Node (Nodo de Elemento).

- Representa un elemento HTML y es el �po de nodo más común en el DOM.
- Por ejemplo, un nodo de elemento podría representar un elemento <p> o <header>.

2. Atribute Node (Nodo de Atributo).

- Representa un atributo de un elemento.
- Los nodos de atributo son hijos de nodos de elemento.
- Por ejemplo, el atributo class de un elemento sería un nodo de atributo.

45
Manual Básico de JavaScript Juan Pueyo

3. Text Node (Nodo de Texto).

- Representa el contenido de texto dentro de un elemento.
- Los nodos de texto son hijos de nodos de elemento.
- Por ejemplo, el texto dentro de una e�queta <p> sería un nodo de texto.

4. Comment Node (Nodo de Comentario).

- Representa un comentario en el código HTML.
- Los nodos de comentario no �enen hijos y no afectan el diseño de la página.
- Por ejemplo, <!-- Esto es un comentario --> sería un nodo de comentario.

5. Document Node (Nodo de Documento).

- Representa todo el documento.
- Es el nodo raíz del árbol del DOM.
- Incluye todos los demás nodos en el documento como sus hijos.

6. DocumentType Node (Nodo de DocumentType).

- Representa la declaración del �po de documento (DOCTYPE) en el HTML.
- Proporciona información sobre la versión de HTML que se está u�lizando.

4.3. Acceso a los nodos del DOM.

Acceder a los nodos del DOM (Modelo de Objetos del Documento) es esencial en el desarrollo
web, ya que proporciona la capacidad de interactuar dinámicamente con los elementos de una
página HTML. Ejemplos para los que es necesario acceder a los elementos del DOM:

Manipulación Dinámica del Contenido.

Permite modificar, agregar o eliminar contenido HTML de forma dinámica, como por ejemplo
para modificar el texto de un elemento, agregar nuevos elementos o eliminar elementos
existentes.

Interac�vidad del Usuario.

Permite controlar los eventos que suceden en la página web, como clics, pulsaciones de teclas,
etc., y reaccionar a ellos, como por ejemplo, cambiando el color de un botón del menú al hacer
clic en él.

Validación y Modificación de Formularios.

Permite validar y modificar datos en formularios antes de enviarlos al servidor, como por
ejemplo, verificando si un campo de entrada está lleno antes de enviar un formulario. Esto es
imprescindible para reducir la carga de validación en el servidor.

46
Manual Básico de JavaScript Juan Pueyo

Animaciones y Transiciones.
Facilita la creación de animaciones y transiciones en elementos HTML. Por ejemplo, cambiar
gradualmente la posición de un elemento a lo largo del �empo.

Dinámica de Es�los y Clases.

Permite cambiar dinámicamente es�los y clases CSS en los elementos.

Manipulación de Eventos.
Permite adjuntar y quitar manejadores de eventos a elementos HTML. Por ejemplo, ejecutar una
función cuando se produce un clic en un botón.

Actualización Asíncrona de Contenido con AJAX.

Facilita la carga asíncrona de datos desde el servidor y la actualización del contenido de la página
sin recargarla completamente. Por ejemplo, cargar nuevos comentarios en una sección de
comentarios de una página de redes sociales.

47
Manual Básico de JavaScript Juan Pueyo

4.4. Métodos de acceso a los elementos del DOM

Existen diversos métodos de acceso a los elementos del DOM. Algunos solo ob�enen un
elemento y otros ob�enen varios en un array que habrá que recorrer.

4.4.1 Método getElementsByTagName.

La función getElementsByTagName es un método del DOM en JavaScript que devuelve un array
de objetos del DOM (Elements está en plural), con todos los elementos de un elemento del DOM
de la e�queta indicada. Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo getElementsByTagName</title>
</head>
<body>

<h1>Ejemplo DOM</h1>
<p>Este es un párrafo.</p>
<p>Este es otro párrafo.</p>
<div>
<p>Un párrafo dentro de un div.</p>
</div>

<script>
// Acceder a todos los elementos <p>
let parrafos = [Link]("p");

// Iterar sobre la colección y modificar el contenido

for (let i = 0; i < [Link]; i++) {
parrafos[i].innerHTML = "Modifico cada párrafo.";
}
</script>

</body>
</html>

Explicación:

1. Se u�liza getElementsByTagName("p") para obtener una colección de todos los elementos <p>
en el documento.

2. Se u�liza un bucle for para iterar sobre la colección y modificar el contenido de cada párrafo
con innerHTML.

innerHTML es un atributo que �enen aquellos nodos que admiten Text Node y que permite
modificar su contenido directamente.

48
Manual Básico de JavaScript Juan Pueyo

4.4.2 Método getElementById.

El método getElementById se u�liza para acceder a un único (Element está en singular) elemento
del DOM por su iden�ficador (id). Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo getElementById</title>
</head>
<body>

<h1 id="titulo">Título de la Página</h1>

<p id="parrafo">Este es un párrafo.</p>

<script>
// Acceder a elementos por su ID
let titulo = [Link]("titulo");
let parrafo = [Link]("parrafo");

// Modificar el contenido de los elementos

[Link] = "Nuevo Título de la Página";
[Link] = "Este párrafo ha sido modificado.";

// Cambiar el estilo del elemento

[Link] = "blue";
[Link] = "bold";
</script>

</body>
</html>

1. Se u�liza [Link]("titulo") para obtener la referencia al elemento con el id

"�tulo".

2. Se u�liza innerHTML para modificar el contenido de ese elemento.

3. Se hace lo mismo para el elemento con el id "parrafo".

4. Se u�liza style para cambiar el es�lo de los elementos, por ejemplo, el color del texto y el peso
de la fuente.

4.4.3 Métodos querySelector y querySelectorAll.

Son dos métodos que se incluyeron en la versión del 2015 y que prác�camente son los únicos
que se u�lizan hoy en día debido a su versa�lidad. Estos dos métodos permiten obtener
elementos del DOM u�lizando selectores CSS. La diferencia entre ellos es que querySelector solo
ob�ene el primer elemento si el selector devuelve varios, mientras que querySelectorAll, ob�ene
todos. Ejemplo:

49
Manual Básico de JavaScript Juan Pueyo

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo querySelector y querySelectorAll</title>
<style>
.parrafo {
color: green;
}
</style>
</head>
<body>

<h1 id="titulo">Título de la Página</h1>

<p class="parrafo">Este es un párrafo.</p>
<p class="parrafo">Este es otro párrafo.</p>
<div>
<p class="parrafo">Un párrafo dentro de un div.</p>
</div>

<script>
// Ejemplo de querySelector
let primerParrafo = [Link]("[Link]");
[Link] = "Primer párrafo con
querySelector.";

// Ejemplo de querySelectorAll
let todosLosParrafos =
[Link]("[Link]");

// Iterar sobre la colección y modificar el contenido

[Link](function(parrafo) {
[Link] = "bold";
});

// Igual pero utilizando for..of. Con for..in no se puede.

for (parrafo of todosLosParrafos) {
[Link] = "blue";
}

</script>

</body>
</html>

Explicación:

1. [Link]("[Link]") selecciona el primer elemento <p> con la clase parrafo.

2. Se modifica el contenido de ese elemento.

3. [Link]("[Link]") selecciona todos los elementos <p> con la clase

parrafo.

4. Se u�liza forEach para iterar sobre la colección y cambiar el es�lo de cada párrafo.

Dado que con querySelector() se puede acceder a los elementos por su id (selector #) y con
querySelectorAll() a todos los elementos con la misma e�queta, getElementById y

50
Manual Básico de JavaScript Juan Pueyo

getElementsByTagName, a día de hoy también están en desuso, pero se pueden seguir

encontrando en muchos libros y páginas web que no estén actualizados.

4.4.4. EJERCICIO

Crea una página HTML donde se seleccionen varios elementos usando getElementById y
querySelector. Al cargar la página, el JavaScript debe modificar el contenido y los es�los de estos
elementos:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Ejercicio con getElementById y querySelector</title>
<style>
.highlight {
color: blue;
font-weight: bold;
}
.container {
background-color: #f0f0f0;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<h1 id="main-title">Título principal</h1>
<p class="intro">Este es el párrafo de introducción.</p>
<div id="content" class="container">
<p id="paragraph-1">Primer párrafo en el contenedor.</p>
<p id="paragraph-2">Segundo párrafo en el contenedor.</p>
</div>
<footer>
<p class="footer-text">Texto de pie de página</p>
</footer>

<script src="[Link]"></script>
</body>
</html>

51
Manual Básico de JavaScript Juan Pueyo

4.5. Creación y eliminación de nodos.

4.5.1. Creación de un nodo.

Crear y eliminar nodos de una página web es una tarea muy común en JavaScript. Para crear un
nuevo nodo hay que seguir los siguientes pasos:

1. Creación de un Element Node para el nuevo elemento con createElement().

2. Creación de un Text Node que represente el texto del elemento con createTextNode().
3. Asociar el Text Node al Element Node como hijo con appendChild().
4. Añadir el Element Node a otro elemento de la página. Si es a la propia página, se añadirá
al objeto Document.

Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Crear y Eliminar Nodos</title>
</head>
<body>

<div id="contenedor">
<!-- Aquí se agregarán nuevos elementos -->
</div>

<script>
// Crear nodo de tipo Element
let parrafo = [Link]("p");
// Crear nodo de tipo Text
let contenido = [Link]("Hola Mundo!");
// Añadir el nodo Text como hijo del nodo Element
[Link](contenido);
// Añadir el nodo Element como hijo de la pagina
[Link](parrafo);
</script>

</body>
</html>

52
Manual Básico de JavaScript Juan Pueyo

Otra forma de hacer lo mismo, pero en este caso añadiendo el nuevo elemento al elemento
<div>:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Crear y Eliminar Nodos</title>
</head>
<body>

<div id="contenedor">
<!-- Aquí se agregarán nuevos elementos -->
</div>

<script>
// Crear un nuevo elemento <p>
let nuevoParrafo = [Link]("p");
[Link] = "Este es un nuevo párrafo.";

// Agregar el nuevo elemento al contenedor

let contenedor = [Link]("contenedor");
[Link](nuevoParrafo);
</script>

</body>
</html>

4.5.2. Eliminación de un nodo.

Para eliminar el nodo el proceso es más sencillo. Se realiza con el método removeChild(), pero
para ello hay que acceder al padre del objeto que se quiere eliminar. Si no se conoce el elemento
padre, se puede acceder a él con el método parentNode().

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Crear y Eliminar Nodos</title>
</head>
<body>

<div id="contenedor">
<p id="parrafoAEliminar">Este párrafo será eliminado.</p>
</div>

<script>
// Obtener el elemento a eliminar
let parrafoAEliminar =
[Link]("#parrafoAEliminar");

// Eliminar el elemento del DOM

[Link](parrafoAEliminar);
</script>

</body>
</html>

53
Manual Básico de JavaScript Juan Pueyo

Ejemplo de eliminación del úl�mo elemento de una Lista:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Crear y Eliminar Nodos</title>
</head>
<body>

<ul id="miLista">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

<button id="eliminarUltimoElemento">Eliminar Último

Elemento</button>

<script>
// Función para eliminar el último elemento de la lista
function eliminarUltimoElemento() {
let miLista = [Link]("miLista");
let ultimoElemento = [Link];

if (ultimoElemento) {
[Link](ultimoElemento);
}
}

// Asignar el evento al botón

let btnEliminar =
[Link]("eliminarUltimoElemento");
[Link]("click",
eliminarUltimoElemento);
</script>

</body>
</html>

54
Manual Básico de JavaScript Juan Pueyo

4.5.3. Creación de un nodo de atributo.

Para crear un nodo de atributo existe el método createAttribute() al cual se le pasa por parámetro
el atributo que se quiere crear, sin embargo hay que tener cuidado porque si el atributo ya existe,
lo sobreescribe, por lo tanto es recomendable comprobar si ya existe con el método
hasAttribute(). Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Crear Nodo de Atributo (Class)</title>
</head>
<body>

<div id="miDiv" class="container">

</div>

<script>
// Acceso al elemento div
let miDiv = [Link]("#miDiv");

// Crear un nodo de atributo para la clase

let nuevaClase = [Link]("class");

// Verificar si ya existe el atributo de clase

if (![Link]("class")) {
// Asignar un valor al atributo de clase
[Link] = "miClase";

// Agregar el atributo de clase al elemento div

[Link](nuevaClase);
}
else {
// Añadir la clase a lo ya existente
[Link] += " miClase";
}
</script>
</body>
</html>

55
Manual Básico de JavaScript Juan Pueyo

4.6. Acceso directo a los atributos HTML.

Se puede acceder directamente a los atributos HTML de un elemento u�lizando las propiedades
del objeto element. La mayoría de los atributos se llaman igual que en HTML, aunque hay algunos
que no lo hacen, como por ejemplo el atributo class, al que se accede por className.

4.6.1. Acceder a un Atributo por su nombre.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Acceder a Atributos HTML</title>
</head>
<body>

<a id="miEnlace" href="[Link]

target="_blank">Enlace de Ejemplo</a>

<script>
// Acceder al atributo 'href' del enlace
let enlace = [Link]("miEnlace");
let hrefValor = [Link];

// Mostrar el valor en la consola

[Link]("Valor del atributo 'href':", hrefValor);
</script>

</body>
</html>

En este ejemplo, [Link] accede al valor del atributo href del elemento <a> y lo almacena en
la variable hrefValor.

4.6.2. Modificar el Valor de un Atributo:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Acceder a Atributos HTML</title>
</head>
<body>

<img id="miImagen" src="[Link]" alt="Imagen de Ejemplo">

<script>
// Modificar el atributo 'src' de la imagen
let imagen = [Link]("#miImagen");
[Link] = "nueva_foto.webp";
</script>

</body>
</html>
En este ejemplo, [Link] se u�liza para modificar el valor del atributo src de la imagen,
cambiándolo a "nueva_foto.webp".

56
Manual Básico de JavaScript Juan Pueyo

4.6.3. Acceder a Todos los Atributos de un Elemento:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Acceder a Atributos HTML</title>
</head>
<body>

<div id="miDiv" data-color="rojo" data-

tamanio="grande">Contenido del Div</div>

<script>
// Acceder a todos los atributos del div
let div = [Link]("#miDiv");
let todosAtributos = [Link];

// Iterar sobre los atributos y mostrarlos en la consola

for (let i = 0; i < [Link]; i++) {
[Link](todosAtributos[i].name + ": " +
todosAtributos[i].value);
}
</script>

</body>
</html>

En este ejemplo, [Link] devuelve una colección de todos los atributos del <div>, y luego
se itera sobre la colección para mostrar cada atributo y su valor en la consola.

4.7. Manejo de propiedades CSS desde JavaScript.

En ejemplos anteriores se ha mostrado cómo modificar propiedades CSS desde JavaScript
u�lizando .style, sin embargo hay que aclarar ciertos aspectos:

• No se puede leer una propiedad CSS u�lizando [Link] si esta no ha sido

especificada en el atributo style o por JavaScript , ya que lo que se lee es el valor del
atributo style. Si no se ha especificado así, el valor será una cadena vacía.
• Si se quiere obtener el valor final de una propiedad CSS que �ene un nodo, y no ha sido
como se indica en el punto anterior, hay que recurrir al método getComputedStyle(), que
devuelve el valor que �ene una propiedad independientemente del método empleado,
incluso si �ene el valor por defecto asignado por el navegador.
• Para establecer valores se puede u�lizar [Link] o setProperty(). La primera
opción es la más sencilla pero �ene limitaciones, como por ejemplo que no permite
asignar un valor con !important. Sintaxis de setProperty():

[Link](propiedad, valor, prioridad);

57
Manual Básico de JavaScript Juan Pueyo

4.7.1 Ejemplo
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.azul {background-color: blue;}
.rojo {background-color: red;}
</style>
</head>
<body>
<div class="container text-center">
<div class="row align-items-start">
<div class="col azul">
<p class="parrafo">Texto primera columna</p>
</div>
<div class="col rojo">
<p class="parrafo">Texto segunda columna</p>
</div>
<div class="col verde" style="background-color: green;">
<p class="parrafo">Texto tercera columna</p>
</div>
</div>
</div>
<script>
let columna1 = [Link](".azul");
let columna2 = [Link](".rojo");
let columna3 = [Link](".verde");
let parrafo = [Link](".parrafo");

// Muestra cadena vacía

[Link]([Link]);

// Muestra "black"
[Link] = "black";
[Link]([Link]);

// Muestra rgb(255, 0, 0)
[Link](getComputedStyle(columna2).backgroundColor);

// Muestra rgb(0, 128, 0) por estar establecido en el atrib style.

[Link](getComputedStyle(columna3).backgroundColor);

// Muestra 16px
[Link](getComputedStyle(parrafo).fontSize);

// Establece el valor con style

[Link] = "white";

// Establecer una propiedad con setProperty - !important

[Link]("color", "green", "important");
</script>
</body>
</html>

58
Manual Básico de JavaScript Juan Pueyo

4.8. Manejo de clases CSS desde JavaScript.

Aunque se pueden manejar las clases de un elemento accediendo a su atributo class mediante
la propiedad className, existen técnicas más apropiadas para hacerlo a través del objeto
classList, mediante el cual se pueden leer, eliminar y modificar las clases de un elemento HTML.

4.7.1. Leer Clases:

<div id="miDiv" class="clase1 clase2 clase3"></div>

<script>
let miDiv = [Link]("#miDiv");

// Leer clases
let clases = [Link];

// Mostrar las clases en la consola

[Link]("Clases del div:", clases);
</script>
</body>
</html>
En este ejemplo, classList devuelve un objeto que representa las clases del elemento. Se pueden
usar métodos como contains, add, remove, y toggle para trabajar con las clases.

4.7.2. Eliminar Clases:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Eliminar Clases de un Elemento</title>
</head>
<body>

<div id="miDiv" class="clase1 clase2 clase3"></div>

<script>
let miDiv = [Link]("miDiv");

// Eliminar una clase específica

[Link]("clase2");

// Mostrar las clases después de la eliminación en la consola

[Link]("Clases del div después de eliminar 'clase2':",
[Link]);
</script>

</body>
</html>

En este ejemplo, [Link]("clase2") elimina la clase específica "clase2" del elemento.

59
Manual Básico de JavaScript Juan Pueyo

4.7.3. Agregar Clases:

<script>
let miDiv = [Link]("miDiv");

// Agregar una clase

[Link]("clase2");

</script>

En este ejemplo, [Link]("clase2") agrega la clase "clase2" al elemento.

4.7.4. Toggle (Agregar o Eliminar):

El método toggle() elimina una clase si ya existe o la añade si no existe.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Toggle de Clases en un Elemento</title>
</head>
<body>

<div id="miDiv" class="clase1"></div>

<script>
let miDiv = [Link]("miDiv");

// Toggle: Agregar si no existe, eliminar si existe

[Link]("clase1");

// Mostrar las clases después del toggle en la consola

[Link]("Clases del div después del toggle 'clase1':",
[Link]);

// Toggle: Agregar si no existe, eliminar si existe

[Link]("clase2");

// Mostrar las clases después del toggle en la consola

[Link]("Clases del div después del toggle 'clase2':",
[Link]);
</script>

</body>
</html>

En este ejemplo, [Link]("clase1") agrega "clase1" si no está presente y la elimina si ya

está presente. [Link]("clase2") agrega "clase2" ya que no está presente.

4.7.5. Contains
Con el método contains() se puede saber si un elemento ya �ene asignada o no una clase.
Ejemplo:

60
Manual Básico de JavaScript Juan Pueyo

<div id="miDiv" class="clase1 clase2 clase3"></div>

<script>
let miDiv = [Link]("miDiv");

// Verificar si una clase específica está presente

let contieneClase2 = [Link]("clase2");

// Mostrar el resultado en la consola

[Link]("¿La clase 'clase2' está presente?:", contieneClase2);

</script>

4.8. Ejercicio.

1. Crea un documento HTML con al menos estos 4 elementos:

- Un <h1> con un ID.

- Un <ul> con al menos tres <li> dentro.
- Un <input> de �po texto con un ID.

2. U�liza JavaScript para realizar las siguientes acciones:

- Modifica el contenido del <h1> con una frase cualquiera.

- Recorre la lista <ul> y cambia el texto de cada <li> a algo de tu elección.
- Accede al <input> por su ID y cambia su atributo placeholder.
- Cambia el valor de atributo class del elemento <h1>
- Muestra en la página web cuántos elementos <li> hay en la página suponiendo que
desconoces cuántos hay.
- Incrementa el tamaño de la fuente de los h1 en un 15%.
- Crea un enlace a una página web de manera que lo abra en una nueva ventana.

4.9. EJERCICIO PARA ENTREGAR.

Realiza una función en JavaScript para sumar dos matrices de la siguiente manera:

- Las matrices se rellenarán en otra función con números aleatorios u�lizando

[Link]() y Math.floor(). A dicha matriz se le llamará dos veces.
- Luego se mandarán por parámetro a la función suma, la cual retornará la matriz
resultado de la suma.
- Finalmente, desde el programa principal se llamará a otra función tres veces para que
muestre cada una de las matrices en la página web con formato de tabla u�lizando los
elementos HTML correspondientes. Los elementos se deben crear desde JavaScript.

61
Manual Básico de JavaScript Juan Pueyo

5. Eventos.

5.1. Modelo de eventos.

Desde las primeras versiones de JavaScript, el modelo de eventos ha ido cambiando. Aunque
hoy en día se pueden seguir u�lizando los métodos an�guos, solo se recomienda un método
para controlar eventos, y es mediante el método addEventListener() que veremos a
con�nuación.

5.2. Tipos de eventos.

Existen mul�tud de eventos que pueden ser controlados desde JavaScript, pero en la siguiente
tabla solo se recogen los más comunes:
Evento Descripción
click Se activa cuando se hace clic en un elemento.
dblclick Se activa cuando se hace doble clic en un elemento.
mousedown Se activa cuando se presiona un botón del mouse.
mouseup Se activa cuando se suelta un botón del mouse.
mousemove Se activa cuando se mueve el mouse sobre un elemento.
keydown Se activa cuando se presiona una tecla del teclado.
keyup Se activa cuando se suelta una tecla del teclado.
keypress Se activa cuando se presiona y se suelta una tecla.
change Se activa cuando el valor de un elemento cambia (por ejemplo, un input).
input Se activa cuando se introduce texto en un input o textarea.
focus Se activa cuando un elemento recibe el foco.
blur Se activa cuando un elemento pierde el foco.
submit Se activa cuando se envía un formulario.
resize Se activa cuando la ventana del navegador se redimensiona.
scroll Se activa cuando se realiza un desplazamiento en una página.
load Se activa cuando se completa la carga de un recurso (como una imagen o un documento).
unload Se activa cuando se descarga una página.
mouseenter Se activa cuando el ratón entra en un elemento.
mouseleave Se activa cuando el ratón sale de un elemento.

5.3. Control de eventos.

Para controlar los eventos que se produzcan en una página web se u�liza el método
addEventListener() que �enen todos los objetos del DOM. Su sintaxis es la siguiente:

objeto_dom.addEventListener(evento , función); //¡¡¡función sin paréntesis!!!

La función puede tener nombre y escribirse en otro lugar o puede ser anónima.

62
Manual Básico de JavaScript Juan Pueyo

Actualmente es el único modelo de eventos recomendado por los siguientes mo�vos:

1. addEventListener() permite separar el código HTML del de JavaScript de una manera más
clara. La lógica de control de eventos se realiza exclusivamente en el código JavaScript, lo
que facilita la lectura y el mantenimiento del código.

2. Permite asignar múl�ples eventos a un mismo elemento.

let miBoton = [Link]("miBoton");

// Controladores con funciones anónimas

[Link]("click", function() {
// Lógica del primer controlador
});

[Link]("dblclick", function() {
// Lógica del segundo controlador
});

3. Se pueden añadir controladores en �empo de ejecución y también eliminarlos con

removeEventListener().
let miBoton = [Link]("miBoton");

function controlDinamico() {
// Lógica dinámica
}

[Link]("click", controlDinamico);

// En algún momento posterior

[Link]("click", controlDinamico);

4. Contexto de this: en el método addEventListener(), se puede controlar el contexto (this)

dentro de la función que controla el evento, lo que proporciona más flexibilidad.
let miElemento = [Link]("miElemento");

[Link]("click", function() {
// 'this' se refiere a 'miElemento'
[Link]("resaltado");
});

5.4. Obtener información de los eventos.

Cuando se trabaja con eventos, suele ser necesario obtener información del propio evento, como
por ejemplo la posición del cursor en la pantalla o qué tecla ha pulsado el usuario. Para obtener
dicha información se u�liza el objeto event. Ejemplos:

63
Manual Básico de JavaScript Juan Pueyo

1. Obtener el Elemento Obje�vo (Target).

[Link]("miBoton").addEventListener("click",
function(event) {
let elementoClicado = [Link];
[Link]("Elemento clicado:", elementoClicado);
});

2. Obtener coordenadas del ratón.

// Ejemplo con función flecha =>
[Link]("mousemove", (event) => {
let coordenadaX = [Link];
let coordenadaY = [Link];
[Link]("Coordenadas del mouse:", coordenadaX, coordenadaY);
});

3. Obtener tecla pulsada.

[Link]("keydown", function(event) {
let teclaPulsada = [Link];
[Link]("Tecla pulsada:", teclaPulsada);
});

4. Controlar el scroll del ratón.

[Link]("wheel", function (event) {
let desplazamiento = [Link];

[Link]("Scroll detectado:", desplazamiento);

if (desplazamiento > 0) {
[Link]("Scroll hacia abajo");
} else {
[Link]("Scroll hacia arriba");
}
});

5. Obtener �po de evento.

[Link]("miInput").addEventListener("input",
function(event) {
let tipoEvento = [Link];
[Link]("Tipo de evento:", tipoEvento);
});

64
Manual Básico de JavaScript Juan Pueyo

6. Detener la Propagación del Evento.

[Link]("miBoton").addEventListener("click",
function(event) {
[Link](); // Detener la propagación del evento
[Link]("Clic en el botón");
});

7. Prevenir el comportamiento predeterminado.

Controla el evento predeterminado de un elemento y lo bloquea.
[Link]("miEnlace").addEventListener("click",
function(event) {
[Link](); // Prevenir el comportamiento
predeterminado del enlace
[Link]("Enlace clicado");
});

Mismo ejemplo pero sin función anónima:

// Función sin paréntesis. Si se colocasen paréntesis,
// haría una llamada en vez de asignar el evento
[Link]("miEnlace").addEventListener("click",
controlClic);
function controlClic(event) {
[Link]();
[Link]("Se ha hecho clic en el enlace");
}

65
Manual Básico de JavaScript Juan Pueyo

5.5. Controlar varios eventos con una misma función

Para aprovechar código y realizar una programación más eficiente, se pueden controlar
diferentes eventos con una misma función. Si dentro de esa función en necesario saber en qué
objeto se produjo el evento, se puede u�lizar [Link] para obtener el objeto y a acceder a
alguno de sus atributos, como por ejemplo el id, como ya se mencionó en el punto anterior.
Ejemplo donde se muestra cómo asignar eventos a varios objetos con un bucle y cómo
dis�nguirlo posteriormente dentro de la función.

<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="UTF-8">
<title>Control del objeto</title>
</head>

<body>

<h1 id="primerH1">Pasa el ratón por encima 1</h1>

<br>
<h1 id="segundoH1">Pasa el ratón por encima 2</h1>
<h3 id="mensaje"></h3>

<script>
function mostrarMensaje(event) {
miH3 = [Link]("mensaje");
if ([Link] == "primerH1") {
[Link] = "Estoy en el primero"
}
else {
[Link] = "Estoy en el segundo"
}
}

function colorAleatorio() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[[Link]([Link]() * 16)];
}
return color;
}

function cambiarColor(event) {
[Link] = colorAleatorio();
}

let misH1 = [Link]("h1");

for (let i = 0; i < [Link]; i++) {
misH1[i].addEventListener("mouseover", mostrarMensaje);
misH1[i].addEventListener("click", cambiarColor);
}
</script>
</body>
</html>

66
Manual Básico de JavaScript Juan Pueyo

5.6. DOMContentLoaded
Algo muy importante en JavaScript es garan�zar que la captura de los objetos se realiza después
de haber sido cargados en la página, ya que sino, JavaScript no lo reconocerá y no se podrá
manipular. Para hacer esto, no es mala costumbre enlazar nuestro archivo JavaScript al final del
<body>, aunque hay otra alterna�va más moderna que es crear una función de captura de
objetos a la cual no se la llamará hasta que se haya cargado la página por completo, y eso se
puede realizar mediante el evento DOMContentLoaded. En el siguiente ejemplo la instrucción
para capturar la caja de texto y cambiar su valor no se ejecuta hasta que la página se haya cargado
por complejo, de ahí que, aunque su código JavaScript se encuentre antes que el formulario en
el documento HTML, no genera error.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Prevenir Envíos Duplicados con addEventListener</title>
</head>
<body>

<script>
function inicio() {
let nombre = [Link]("nombre");

[Link] = "Te reconozco";

}
[Link]("DOMContentLoaded", inicio);
</script>

<form id="miFormulario">
<input type="text" id="nombre" name="nombre"></input>
<button type="submit" id="botonEnvio">Enviar</button>
</form>

</body>
</html>

5.7. Ejercicio 1.
Escribe un script que muestre por pantalla la posición del puntero del ratón según se mueve y la
úl�ma tecla que ha pulsado el usuario.

5.8. Ejercicio 2.
Escribe un script para realizar un juego de adivinanza de números entre el 0 y 9. Para ello el
usuario pulsará una tecla y en la página le aparecerán los siguientes mensajes en función de lo
que haya pulsado:

- No has pulsado un número entre 0 y 9.

- Has acertado.
- El número es mayor que el que has elegido.
- El número es menor que el que has elegido.

67
Manual Básico de JavaScript Juan Pueyo

6. Formularios

La validación de formularios mediante JavaScript es una prác�ca importante y complementaria

a la validación que se realiza en el lado del servidor, de hecho, JavaScript en parte nació por la
necesidad de validar formularios sin que para ello se recargara la página y se perdieran los datos
de los usuarios si algún campo no era correcto. Por otro lado, gracias a la validación en cliente,
se reduce el ancho de banda y la carga del servidor, ya que, si algún formulario no cumple con
las condiciones, éste no llega al servidor para ser validado. No obstante, aunque un formulario
se valide correctamente en el cliente, siempre �ene que ser validado en el servidor para
garan�zar la integridad y seguridad de los datos. La validación del lado del servidor es crucial, ya
que el código del lado del cliente puede modificarse o el formulario puede enviarse de formas
no previstas. La combinación de validación del lado del cliente y del lado del servidor ofrece una
estrategia completa y robusta.

6.1. Acceso a elementos de un formulario.

Para acceder a los elementos de un formulario se pueden u�lizar los métodos vistos
anteriormente, aunque también se puede acceder mediante el objeto [Link] o por el
name de los elementos.

6.1.1 Acceso mediante forms.

Se puede acceder a los elementos de forms por nombre o por posición:

Acceso por nombre:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Acceder a Elementos de un Formulario por Nombre</title>
</head>
<body>

<form name="miFormulario">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre>

<label for="email">Correo Electrónico:</label>

<input type="email" name="email" id="email">

<button type="button">Obtener Valores</button>

</form>

68
Manual Básico de JavaScript Juan Pueyo

<script>
function obtenerValores() {
// Acceder a elementos por Nombre
let nombre = [Link]["miFormulario"]["nombre"].value;
let email = [Link]["miFormulario"]["email"].value;

// Realizar acciones con los valores

[Link]("Nombre: " + nombre + "\nCorreo Electrónico: " +
email);
}

[Link]("button").addEventListener("click",
obtenerValores);
</script>

</body>
</html>

Acceso por posición: el objeto forms devuelve todos los formularios de la página web por lo que
si solo hay uno, ese será forms[0] y forms[0][0] será el primer elemento del primer formulario.
<form name="miFormulario">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre>

<label for="email">Correo Electrónico:</label>

<input type="email" name="email" id="email">

<button type="button">Obtener Valores</button>

</form>

<script>
function obtenerValores() {
// Acceder a elementos por Índice
let nombre = [Link][0][0].value; // Primer elemento
let email = [Link][0][1].value; // Segundo elemento

// Realizar acciones con los valores

alert("Nombre: " + nombre + "\nCorreo Electrónico: " + email);
}

[Link]("button").addEventListener("click",
obtenerValores);
</script>

69
Manual Básico de JavaScript Juan Pueyo

6.1.2 Acceso mediante named elements.

Named elements es una forma an�gua de acceso a los elementos que no se explicó en el tema
4 ya que no está recomendada hoy en día. Su forma de acceso es u�lizar directamente el name
o el id del elemento sin el uso de métodos. Aunque no se recomienda, todavía se usa y es
conveniente conocerla. Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Acceder a Elementos de un Formulario por Nombre</title>
</head>
<body>

<form name="miFormulario">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre>

<label for="email">Correo Electrónico:</label>

<input type="email" name="email" id="email">

<button type="button">Obtener Valores</button>

</form>

<script>
function obtenerValores() {
// Acceder a elementos por Nombre
let nombre = [Link];
let email = [Link];

// Realizar acciones con los valores

[Link]("Nombre: " + nombre + "\nCorreo Electrónico: " +
email);
}

[Link]("button").addEventListener("click",
obtenerValores);
</script>

</body>
</html>

6.2. Obtener información de los elementos de un formulario.

6.2.1. Cuadros de texto y textarea.
Para acceder al contenido de estos elementos se u�liza el atributo value.
<script>
function obtenerContenidos() {
// Acceder al contenido del input de tipo
let nombreContenido = [Link]("#nombre").value;

// Acceder al contenido del textarea

let mensajeContenido = [Link]("#mensaje").value;

</script>

70
Manual Básico de JavaScript Juan Pueyo

6.2.2. Radiobuton.
Para saber si un radiobuton está marcado se u�liza el atributo checked. Para recorrer todos los
radiobuton se pueden almacenar en un array y recorrerlos. Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Determinar Radio Button Marcado</title>
</head>
<body>

<form>
<label>
<input type="radio" name="grupo" value="opcion1"> Opción 1
</label>
<br>
<label>
<input type="radio" name="grupo" value="opcion2"> Opción 2
</label>
<br>
<label>
<input type="radio" name="grupo" value="opcion3"> Opción 3
</label>
<br>
<button type="button">Obtener Radio Button Marcado</button>
</form>

<script>
function obtenerRadioButtonMarcado() {
// Obtener todos los radio buttons con el nombre 'grupo'
let radioButtons = [Link]("grupo");

// Iterar a través de los radio buttons

for (let i = 0; i < [Link]; i++) {
if (radioButtons[i].checked) {
// Radio button encontrado, realizar acciones con el valor
[Link]("Radio button marcado: " +
radioButtons[i].value);
return; // Salir de la función si hay marcado
}
}

// Si no se encuentra ningún radio button marcado

[Link]("Ningún radio button está marcado");
}

[Link]("button").addEventListener("click",
obtenerRadioButtonMarcado);
</script>

</body>
</html>

71
Manual Básico de JavaScript Juan Pueyo

6.2.3. Checkbox.
El acceso a los checkbox también se realiza comprobando el atributo checked, sin embargo, en
este caso hay que comprobar uno por uno, ya que son independientes entre sí. En el siguiente
ejemplo se muestra cómo acceder a todos los checkbox u�lizando un selector CSS condicional.

<!DOCTYPE html>

<html lang="es">
<head>
<meta charset="UTF-8">
<title>Determinar Checkbox Marcado sin addEventListener</title>
</head>
<body>

<form>
<label>
<input type="checkbox" name="opcion1" value="opcion1"> Opción 1
</label>
<label>
<input type="checkbox" name="opcion2" value="opcion2"> Opción 2
</label>
<label>
<input type="checkbox" name="opcion3" value="opcion3"> Opción 3
</label>
<button type="button">Obtener Checkbox Marcado</button>
</form>

<script>
function obtenerCheckboxMarcado() {
// Obtener todos los checkboxes con el nombre 'opciones'
let checkboxes =
[Link]('input[type="checkbox"]:checked');
if ([Link] > 0) {
// Si al menos un checkbox está marcado
let marcados = []
for (let i = 0; i < [Link]; i++){
[Link](checkboxes[i].value);
}
[Link]("Checkboxes marcados: " + [Link](', '));
return marcados;
} else {
// Si ningún checkbox está marcado
[Link]("Ningún checkbox está marcado");
}
}
[Link]("button").addEventListener("click",
obtenerCheckboxMarcado);
</script>
</body>
</html>

72
Manual Básico de JavaScript Juan Pueyo

6.2.4. Select.
Para saber qué elemento ha seleccionado un usuario en un Select, se u�liza el atributo
selectedIndex, el cual devuelve el índice de la lista. Si no hay seleccionado nada devuelve -1.
Ejemplo de cómo acceder a la información del elemento elegido por el usuario:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Acceder a Elementos de un Select</title>
</head>
<body>

<form>
<label for="seleccion">Selecciona una opción:</label>
<select id="seleccion" name="seleccion">
<option value="opcion1">Opción 1</option>
<option value="opcion2">Opción 2</option>
<option value="opcion3">Opción 3</option>
</select>
<br>
<button type="button" id="boton">Obtener Opción
Seleccionada</button>
</form>

<script>
function obtenerSeleccion() {
// Obtener el elemento select por ID
let selectElement = [Link]("seleccion");

// Obtener el índice de la opción seleccionada

let indiceSeleccionado = [Link];

// Obtener el valor y el texto de la opción seleccionada

let valorSeleccionado =
[Link][indiceSeleccionado].value;
let textoSeleccionado =
[Link][indiceSeleccionado].text;

// Mostrar la opción seleccionada

[Link]("Opción seleccionada:\nValor: " + valorSeleccionado
+ "\nTexto: " + textoSeleccionado);
}
[Link]("boton").addEventListener("click",
obtenerSeleccion);
</script>

</body>
</html>

73
Manual Básico de JavaScript Juan Pueyo

6.3. Validación de formularios.

6.3.1. Esquema �pico de validación.

Aunque existen librerías para validación de formularios, para validar un formulario simple se
puede realizar directamente con JavaScript de una manera muy sencilla: lo primero que hay que
hacer es crear una función de validación que vaya validando cada uno de los campos. Si alguno
de los campos no cumple con los requisitos, la función llama al método [Link]()
que se encarga de cancelar el envío del formulario.

Un esquema �pico del código de validación sería el siguiente:

<form action="" method="" id="miFormulario" name="miFormulario">

...
</form>
<script>
function validacion(event) {
if (condicion primer campo del formulario) {
// Instrucciones si no cumple la condición.
[Link]();
else if (condicion segundo campo del formulario) {
// Instrucciones si no cumple la condición.
[Link]();
}
...
else if (condicion campo n del formulario) {
// Instrucciones si no cumple la condición.
[Link]();
}

[Link]("miFormulario").addEventListener("submit",
validacion);
</script>

A con�nuación, se muestra un ejemplo en el que se valida por JavaScript si los dos campos están
rellenos. Hoy en día no haría falta hacerlo por JavaScript salvo que se requiera personalizar las
acciones cuando el formulario falla, ya que con el atributo required de HTML también se puede
controlar.

<form id="miFormulario" action="#">

<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" >

<label for="email">Correo Electrónico:</label>

<input type="email" id="email" name="email" >

<button type="submit">Enviar</button>
</form>

74
Manual Básico de JavaScript Juan Pueyo

<script>
function validacion(event) {
// Validar los campos
let nombre = [Link]("nombre").value;
let email = [Link]("email").value;

if (nombre === "" || email === "") {

alert("Por favor, complete todos los campos.");
[Link](); // Cancela envío del formulario.
}
}

[Link]("miFormulario").addEventListener("submit",
validacion);

</script>

6.3.2. Validación de diferentes �pos de datos y elementos en formularios.

Dada la can�dad de posibilidades que existen a la hora de validar los diferentes campos de un
formulario así como la variedad de valores que se pueden dar, se recomienda buscar en Internet
cómo validar el campo, incluso con el uso de expresiones regulares, las cuales no se van a explicar
en este manual. En el siguiente ejemplo se muestra cómo validar una dirección de email
u�lizando una expresión regular:

<script>
function validacion(event) {
// Obtener el valor del campo de correo electrónico
let email = [Link]("email").value;

// Expresión regular para validar un correo electrónico

let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

// Verificar si la dirección cumple con la expresión regular

if () {
alert("Por favor, ingrese un correo electrónico válido.");
[Link](); // Evitar el envío del formulario
}
}

[Link]("miFormulario").addEventListener("submit",
validacion);
</script>

75
Manual Básico de JavaScript Juan Pueyo

6.4. Evitar varios envíos del mismo formulario.

Una de los posibles escenarios que se dan a la hora de rellenar un formulario es que el usuario
haga clic varias veces en el botón de envío, ya sea sin querer o no, por lo tanto, aunque es algo
que también se controla en el servidor, es buena medida desac�var el botón de envío del
formulario una vez se haya hecho clic. A con�nuación, se muestra un código muy �pico para
realizar esto en el que botón se ac�va nuevamente transcurrido un �empo. El método
setTimeout() se explicará en el tema siguiente.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Prevenir Envíos Duplicados con addEventListener</title>
</head>
<body>

<form id="miFormulario">
<input type="text" id="nombre" name="nombre"></input>
<p id="error" style="visibility:hidden;">Rellene el nombre</p>
<button type="submit" id="botonEnvio">Enviar</button>

</form>

<script>
function validacion(event) {
let nombre = [Link]("nombre");

// Deshabilitar el botón de envío

[Link]("botonEnvio").disabled = true;

if ([Link] === ""){

// Prevenir el envío del formulario por defecto
[Link]();

// Mostrar mensaje
let error = [Link]("error");
[Link] = "visible";

// Activar botón de envío pasado un tiempo

setTimeout(function() {
[Link]("botonEnvio").disabled = false;
}, 2000);
}
}

// Agregar un evento al formulario para manejar el envío

var formulario = [Link]("miFormulario");
[Link]("submit", validacion);
</script>

</body>
</html>

76
Manual Básico de JavaScript Juan Pueyo

7. Otras u�lidades.

En JavaScript, sin contar lo que aportan algunas librerías, existen mul�tud de funciones que
ayudan o posibilitan la realización de mul�tud de tareas.

7.1. Funciones para el control de ejecuciones de funciones.

setTimeout() y setInterval() son funciones en JavaScript que se u�lizan para ejecutar código
después de un cierto período de �empo.

7.1.1. setTimeout()
setTimeout() se u�liza para ejecutar una función después de un �empo específico (en
milisegundos). La sintaxis es la siguiente:
setTimeout(funcion, tiempo);

Ejemplo:

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

// Se ejecutará la función escribir() después de 2000

milisegundos (2 segundos)
setTimeout(escribir, 2000);

77
Manual Básico de JavaScript Juan Pueyo

7.1.2. setInterval() y clearInterval()

setInterval() se u�liza para ejecutar una función repe�damente a intervalos regulares. La sintaxis
es la siguiente:
setInterval(función, tiempo);

Para finalizar la ejecución periódica se u�liza el método clearInterval().

Ejemplo de un reloj que se actualiza cada segundo y se para cuando se pulsa un botón. La función
de parada se ha realizado como función anónima.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Reloj con setInterval y Botón para Detener</title>
</head>
<body>

<h1>Reloj en Tiempo Real</h1>

<p id="horaActual"></p>
<button id="detenerBoton">Detener Reloj</button>

<script>
function mostrarHora() {
var fecha = new Date();
var horas = [Link]();
var minutos = [Link]();
var segundos = [Link]();

// Formatear las horas, minutos y segundos con dos dígitos

horas = horas < 10 ? "0" + horas : horas;
minutos = minutos < 10 ? "0" + minutos : minutos;
segundos = segundos < 10 ? "0" + segundos : segundos;

// Mostrar la hora en la página web

[Link]("horaActual").innerHTML = horas + ":" +
minutos + ":" + segundos;
}

// Mostrar la hora inicial

mostrarHora();

// Actualizar la hora cada segundo

var intervaloReloj = setInterval(mostrarHora, 1000);

// Agregar un evento al botón para detener el reloj

[Link]("detenerBoton").addEventListener("click",
function() {
clearInterval(intervaloReloj);
[Link]("Reloj detenido manualmente");
});
</script>

</body>
</html>

78