4. JAVASCRIPT_completo

JAVASCRIPT
INTRODUCCIÓN
• JavaScript (abreviado como JS), es un lenguaje de
programación nacido en 1995 de alto nivel (su sintaxis esta
más cercano al hombre que a la máquina), que se ejecuta en
tiempo de compilación (no hay un paso previo de compilar el
código en un binario). Todo ello nos facilitará su aprendizaje y
posterior desarrollo.
¿Donde pongo mi código JavaScript?
Debe estar dentro en la etiqueta <script></script>, pero te
preguntarás… ¿donde debe estar esa etiqueta en mi HTML?
Opción 1:
Dentro de <head> suelta.
Opción 2:
Al final de <body>.
Opción 3:
con el código en un archivo externo.
Comentarios
• Los comentarios serán ignorados por el lenguaje, por lo que no
ahorres en ellos. Cuanto más documentado esté tu código más
fácil será de modificar y que crezca.
En línea
Debe empezar por //.
Comentarios
• En bloque
Empezará por /* y se cerrará con */.
Posibilidades de visualización de
JavaScript
• Escribir en la salida HTML usando document.write().
• Escribir en un cuadro de alerta, usando window.alert().
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Posibilidades de visualización de JavaScript
Para que tu código pueda interactuar con el usuario. Lo haremos con el método
prompt().
let nombre;
nombre = prompt("Introduce tu nombre");
document.write("Bienvenido/a a mi sitio web, " +
nombre);
Gracias a prompt(), se despliega una ventanita parecida a la del alert(), solo que en
este caso, a parte de informar con un string, va a permitir introducir algo con el
Variables
• Las variables son una herramientas de guardar un contenido
en la memoria. Se estructuran de la siguiente forma:
[tipo] [clave] = [valor];
Ejemplo:
const nombre = 'Andrea';
Variables
• Las claves no pueden contener espacios, acentos, ñ o empezar por un
número.
const nombre = 'Andrea'; // Bien

const 2nombre = 'Joan'; // Mal
const nombre con apellido = 'Joan Chamorro'; // Mal
const nombreConApellido = 'Andrea Motis'; // Bien
Variables
• Tipos
https://www.w3schools.com/js/js_let.asp
const: acceso local, solo lectura.

let: acceso local, editable.
var: alcance global, editable.
Ejemplo:
const discografica = 'jazztojazz’;
let pistas = 16;
var titulo = 'Feeling good';
Operaciones aritméticas
• Sumar • Multiplicar
const resultado = num1 + num2; const resultado = num1 * num2;
• Restar • Resto
const resultado = num1 - num2; const resultado = num1 % num2;
• Dividir • Potencia (Elevado a…)

const resultado = num1 / num2; const resultado = num1 ** num2;
Condicionales
Los condicionales nos permiten tomar decisiones: ¿bajo que
condiciones debo ejecutar las instrucciones? ¿qué hago si no se
cumple mis condiciones?
if (condición) {
... ... ...
}
Operadores de comparación
Símbolo Explicación Ejemplo
> es mayor que if (1 > 0)
< es menor que if (1 < 0)
&& y if (1 > 0 && 67 > 0)
|| o if (1 > 10 || 67 > 0)
== es igual en valor if ('3' == 3)
!= no es igual if ('Doctor' != 'Who')
>= es mayor o igual que if (10 >= 10)
<= es menor o igual que if (10 <= 20)
if (10 > 2 && true && 'HBO' != 'Netflix') {

document.write('Entro seguro’);
}
else
• Nos permite realizar otras acciones si no se cumple la
condición.
if (condición) {
...
} else {
...
}
elseif
• Es posible tener varios condicionales, aunque solo se ejecutará
uno de ellos.
if (condición) {
...
} else if (condición) {
}else{
}
EJEMPLO
var cajon = parseInt(prompt('Elegir el cajón abierto (1-4):'));
if (cajon == 1) {
alert('Contiene varias herramientas de dibujo: papel, lápices, etc.');
} else if (cajon == 2) {
alert('Contenido hardware: cables, componentes, etc.');
alert('Ah, el cajón está cerrado, ¡qué malo!');
alert('Contiene la ropa: camisas, pantalones, etc.');
} else {
alert('La noticia del día: el gabinete contiene sólo cuatro cajones y hasta que se demuestre
lo contrario, los cajones negativos no existen.');
}
Switch
Se comporta como un condición cuyo valor es igualado en todos los casos.
switch (variable) {
case 0:
...
break;
case 1:
...
break;
case 2:
...
break;
default:
...
break;
}
Ejemplo
const edad = 18;

switch (edad) {
case 0: document.write('Recién nacio’);
break;
case 18: document.write('Ya es un hombre’);
break;
case 65: document.write('Recién jubilado’);
break;
default: document.write('¿Aún estas vivo?’);
break;
}
EJERCICIOS CONDICIONALES
1. Teniendo una nota de 0 a 10, mostrarla de la forma: Insuficiente, Suficiente, Bien, notable, Sobresaliente.
De 0 a 4.9 Insuficiente.
De 5.0 a 5.9 Suficiente
De 6.0 a 6.9 Bien.
De 7.0 a 8.9 Notable.
De 9.0 a 10 Sobresaliente.
2.Desarrolla un programa donde por medio del tipo de un motor, determinar qué tipo de fluido puede
trasportar éste según las siguientes condiciones:
-Si el tipo de motor es 0, mostrar un mensaje por consola indicando “No hay establecido un valor definido
para el tipo”.
- Si el tipo de motor es 1, mostrar un mensaje por consola indicando “Agua”.
- Si el tipo de motor es 2, mostrar un mensaje por consola indicando “Gasolina”.
- Si el tipo de motor es 3, mostrar un mensaje por consola indicando “Hormigón”.
- Si no se cumple ninguno de los valores anteriores mostrar el mensaje “No existe un valor válido”.
Bucles FOR
for ([expresionInicial]; [condicion]; [expresionIncremento])
En este ejemplo donde mostramos los números del 0 al 3.
// Bucle for tradicional
for (let i = 0; i <= 3; i += 1) {

document.write(i);
}
//0 //1 //2 //3

Bucles FOR
// Decrecer del 10 al 0
let i=0;
for (i = 10; i > 0; i -= 1) {

document.write(i);
} //
Intervalo de 5 entre el 0 a 100

for (let i = 0; i <= 100; i += 5) {
document.write(i);
}
Bucles For In
La declaración de JavaScript for in recorre las propiedades de un objeto:
Sintaxis:
for (key in object) {

// code block to be executed
}
Ejemplo 1:
const person = {fname:"John", lname:"Doe",
age:25}; let text = "";

for (let x in person) {
text += person[x];
}
Bucles For In
Ejemplo 2:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For In</h2>

<p>The for in statement can loops over array values:</p>
<p id="demo"></p>
<script>
const numbers = [45, 4, 9, 16, 25];
let txt = "";

for (let x in numbers) {
txt += numbers[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
While
Solo admite un condicional, por lo que si nuestro software
no llega a cambiar esa variable tendremos un bucle infinito.
let i = 0;
while (i<=5) {
document.write('me ejecuto hasta que alguien que la condición
sea verdadera’);
i += 1;
}
While
Un sencillo ejemplo que recorre los números del 30 al 50.
let num = 30;
while (num <= 50) {

num += 1;
document.write(num);
}
Do While
El do whilebucle es una variante del bucle while. Este ciclo
ejecutará el bloque de código una vez, antes de verificar si la
condición es verdadera, luego repetirá el ciclo mientras la
condición sea verdadera.
Sintaxis:
do {
// code block to be executed
}
while (condition);
Do While
Ejemplo:
<html>
<body>
<h2>JavaScript Do While Loop</h2>
<p id="demo"></p>
<script>
let text = ""
let i = 0;
do {
text += "<br>The number is " + i;
i++;
}
while (i < 10);
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
EJERCICIO BUCLES
1. Dado un número N, mostrar todos los números del 1 al N.
2. Dado N sueldos. Mostrar su suma y cuantos hay mayores de $1.000.000.
3.Hacer un programa que imprima los números del 10 a 20 pero saltando cada otro número, es
decir, que imprima 10, 12, 14, 16, 18 y 20.
4. Imprimir los números del 1 a al 100 pero deforma descendente, es decir, 100, 99, 98 ... 1
JavaScript Arrays
• Un array es una estructura de datos en la que se puede almacenar
una colección de elementos ordenados, todos bajo un mismo
identificador (nombre del array).
• Estos elementos pueden ser de cualquier tipo de dato, como

números, cadenas de texto, objetos, o incluso otros arrays.
• Cada elemento dentro del array se encuentra en una posición, o

índice, lo que permite acceder a ellos de forma secuencial.
JavaScript Sintaxis Arrays
• nombreDelArray es el nombre del array que has declarado.
• indice es el número que corresponde a la posición del elemento al

que deseas acceder (comenzando desde 0).
JavaScript Declaración de Arrays
• Se declaran utilizando corchetes ([])
JavaScript Arrays
• Los elementos en un array están ordenados por su índice, que
comienza en 0 (es decir, el primer elemento está en el índice 0, el
segundo en el índice 1, y así sucesivamente).
• El orden de los elementos es una característica fundamental, ya

que permite acceder a los datos de manera rápida y predecible.
JavaScript Arrays
• En JavaScript, los arrays son indexados desde 0, lo que significa que
el primer elemento de un array está en el índice 0, el segundo en el
índice 1, y así sucesivamente.
• Para acceder a un elemento específico de un array, debes utilizar el

índice correspondiente dentro de corchetes ([]).
JavaScript Asignación de datos a un Arrays
• Asignación Inicial al Declarar un Array
Puedes asignar valores a un array directamente en el momento en
que lo declaras.
• Esto se hace usando corchetes ([]) y separando los valores por

comas.
let frutas = ['Manzana', 'Banana', 'Naranja'];
• Ejemplo Asignación Inicial al Declarar un Array
<!DOCTYPE html>
<html>
<head>
<title>Asignación Inicial</title>
</head>
<body>
<script>
document.write("Frutas: " + frutas + "<br>");
</script>
</body>
</html>
• Asignación de Datos a un Array Vacío
Si declaras un array vacío, puedes asignar datos a posiciones

específicas utilizando su índice.
let numeros = []; // Array vacío
// Asignar valores a posiciones específicas

numeros[0] = 10;
numeros[1] = 20;
numeros[2] = 30;
<!DOCTYPE html>
JavaScript Asignación
<html>
<head>
de datos a un Arrays
<title>Asignación de Datos a Array Vacío</title>
</head>
<body>
<script>
• Ejemplo Asignación de let numeros = []; // Array vacío
Datos a un Array Vacío
// Asignar valores a posiciones específicas
numeros[0] = 10;
numeros[1] = 20;
numeros[2] = 30;
document.write("Números: " + numeros + "<br>");

</script>
</body>
</html>
• Modificar un Elemento Existente
Puedes modificar un elemento ya existente en el array accediendo a

su índice y asignándole un nuevo valor.
//Cambiar el valor en la posición 1 (índice 1)

frutas[1] = 'Pera';
JavaScript Asignación
<!DOCTYPE html>
<html>
de datos a un Arrays
<head>
<title>Modificar Elemento del Array</title>
</head>
<body>
<script>
• Ejemplo Modificar un Elemento let frutas = ['Manzana', 'Banana', 'Naranja'];
Existente
// Cambiar el valor en la posición 1 (índice 1)
frutas[1] = 'Pera';
document.write("Frutas modificadas: " + frutas +

"<br>");
</script>
</body>
</html>
Propiedad .length en JavaScript
La propiedad .length de un array en JavaScript se utiliza para conocer la longitud del array,
es decir, la cantidad de elementos que contiene.
Esta propiedad devuelve un número entero que representa el número de elementos en el

array, comenzando desde 1 para el primer elemento.
El valor de .length siempre es 1 más grande que el índice más alto del array, ya que los
índices comienzan desde 0.
<!DOCTYPE html>
<html>
<head>
<title>Propiedad length</title>
</head>
<body>
Ejemplo <script>
Propiedad .length // Usamos document.write para mostrar la longitud del array

document.write("El array frutas tiene " + frutas.length + "
en JavaScript elementos.<br>");
// Modificar el array y verificar la nueva longitud

frutas.push('Uva');
document.write("Después de agregar una fruta, el array frutas
tiene " + frutas.length + " elementos.<br>");
</script>
</body>
</html>
Modificación de arrays
1. Agregar Elementos al Array
Puedes agregar elementos a un array utilizando varios métodos:
a) push(): Agrega uno o más elementos al final del array.
let frutas = ['Manzana', 'Banana'];

frutas.push('Naranja');
// ['Manzana', 'Banana', 'Naranja']

1. Agregar Elementos al Array
b) unshift(): Agrega uno o más elementos al inicio del array.
let frutas = ['Banana', 'Naranja']; frutas.unshift('Manzana');
// ['Manzana', 'Banana', 'Naranja']

2. Eliminar Elementos del Array
Puedes eliminar elementos de un array con los siguientes métodos:
a) pop(): Elimina el último elemento del array.
let frutas = ['Manzana', 'Banana', 'Naranja']; frutas.pop();
// ['Manzana', 'Banana']
2. Eliminar Elementos del Array
b) shift(): Elimina el primer elemento del array.
let frutas = ['Manzana', 'Banana', 'Naranja']; frutas.shift();
// ['Banana', 'Naranja']
3. Modificar o Reemplazar Elementos
Puedes acceder a cualquier elemento de un array mediante su índice y asignarle un

nuevo valor para modificarlo.
let frutas = ['Manzana', 'Banana', 'Naranja'];frutas[1] = 'Pera';
// Reemplaza 'Banana' por 'Pera'

4. Eliminar, Agregar o Reemplazar Elementos con splice()
El método splice() permite eliminar, agregar o reemplazar elementos en una

posición específica del array.
a) Eliminar Elementos: Puedes eliminar un número específico de elementos a

partir de una posición dada.
b) Agregar Elementos: Puedes agregar elementos en una posición específica sin
eliminar nada.
c) Reemplazar Elementos: Puedes reemplazar uno o más elementos a partir de
una posición específica.
4. Ejemplos Eliminar, Agregar o Reemplazar Elementos con splice()
let frutas = ['Manzana', 'Banana', 'Naranja', 'Uva']; frutas.splice(1, 2);

// Elimina 2 elementos desde la posición 1
// ['Manzana', 'Uva']
let frutas = ['Manzana', 'Uva']; frutas.splice(1, 0, 'Banana', 'Naranja');

// Agrega en la posición 1
// ['Manzana', 'Banana', 'Naranja', 'Uva']
let frutas = ['Manzana', 'Banana', 'Naranja']; frutas.splice(1, 1, 'Pera');

// Reemplaza 'Banana' por 'Pera'
// ['Manzana', 'Pera', 'Naranja']
5. Concatenar Arrays con concat()Puedes combinar dos o más arrays en uno solo
utilizando el método concat().
let frutas = ['Manzana', 'Banana'];

let otrasFrutas = ['Naranja', 'Uva'];
let todasLasFrutas = frutas.concat(otrasFrutas);
// ['Manzana', 'Banana', 'Naranja', 'Uva']
6. Invertir o Ordenar Elementos
a) reverse(): Invierte el orden de los elementos en el array.
let numeros = [1, 2, 3, 4];

numeros.reverse();
// [4, 3, 2, 1]
<!DOCTYPE html>
<html>
<head>
<title>Modificación de Arrays</title>
</head>
<body>
<script>
// Crear un array
Ejemplo completo
// Agregar un elemento al final
frutas.push('Uva');
document.write("Después de push: " + frutas + "<br>");
Modificación de // Eliminar el último elemento

frutas.pop();
arrays document.write("Después de pop: " + frutas + "<br>");
// Reemplazar un elemento
frutas[1] = 'Pera';
document.write("Después de reemplazar: " + frutas + "<br>");
// Eliminar y agregar elementos con splice

frutas.splice(1, 1, 'Fresa', 'Melón');
document.write("Después de splice: " + frutas + "<br>");
</script>
</body>
</html>
Recorrer Arrays en JavaScript
Recorrer un array significa iterar sobre cada uno de sus elementos, ya sea para
procesarlos, mostrarlos, o realizar alguna acción específica en cada uno de ellos.
JavaScript ofrece varias formas de recorrer arrays, cada una con características y
ventajas dependiendo del uso.
Recorrer Arrays en <!DOCTYPE html>
JavaScript
<html>
<head>
<title>Recorrer Array con for</title>
</head>
Usando un Bucle for Tradicional. <body>
<script>
El bucle for es la forma clásica de let frutas = ['Manzana', 'Banana', 'Naranja'];
recorrer un array, y te permite
for (let i = 0; i < frutas.length; i++) {
acceder a cada elemento usando su document.write("Fruta " + (i + 1) + ": " + frutas[i] +
índice. "<br>");
}
</script>
</body>
</html>
JavaScript
<html>
<head>
<title>Recorrer Array con forEach</title>
</head>
Usando el Método forEach() <body>
<script>
El método forEach() es una forma let frutas = ['Manzana', 'Banana', 'Naranja'];
moderna y más declarativa de
frutas.forEach(function(fruta, indice) {
recorrer un array. document.write("Fruta " + (indice + 1) + ": " + fruta
+ "<br>");
Es una función de orden superior });
</script>
que recibe otra función como
</body>
argumento para ejecutar sobre cada </html>
elemento.
JavaScript
<html>
<head>
<title>Recorrer Array con for...in</title>
</head>
Usando el Bucle for...in <body>
<script>
El bucle for...in recorre los índices let frutas = ['Manzana', 'Banana', 'Naranja'];
del array, no los valores.
for (let indice in frutas) {
document.write("Fruta " + indice + ": " +
frutas[indice] + "<br>");
}
</script>
</body>
</html>
JavaScript Arrays
Con JavaScript, se puede acceder al array completoa haciendo referencia al nombre de la matriz:
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
JavaScript Arrays
La length propiedad de una matriz devuelve la longitud de una matriz (el número de
elementos de la matriz).
<!DOCTYPE html>
<html>
<body>
<p>The length property returns the length of an array.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.length;
</script>
</body>
</html>
JavaScript Arrays
Una forma de recorrer un array es usando un for bucle:
<html>
<body>
<p>The best way to loop through an array is using a standard for loop:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
for (let i = 0; i < fLen; i++) {

text += "<li>" + fruits[i] + "</li>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Ejercicios con arrays
• Almacene en un array los 10 primeros números pares y luego imprímalos en pantalla.
• Desarrollar un programa que por medio de un array de permita almacenar el peso de 5 personas para
posteriormente:
‐ Determinar el promedio del peso de las 5 personas.

‐ Determinar cuántas personas superar el promedio del peso.
‐ Determinar cuántas personas son inferiores al promedio del peso.
• parseInt()
• Convierte una cadena a un número entero.

• Sintaxis: parseInt(string, radix)
• parseFloat()
• Convierte una cadena a un número de punto flotante.

• Sintaxis: parseFloat(string)
• Number()
• Convierte un valor a un número.

• Funciona con cadenas que representan enteros o flotantes, pero
devuelve NaN si la conversión no es posible.
• Sintaxis: Number(value)
• Boolean()
• Convierte un valor a su equivalente booleano.

• Sintaxis: Boolean(value)
• String()
• Convierte un valor a una cadena de texto.

• Sintaxis: String(value)

4. JAVASCRIPT_completo

Cargado por

Copyright:

Formatos disponibles

4. JAVASCRIPT_completo

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

4. JAVASCRIPT_completo

Cargado por

Copyright:

Formatos disponibles

JAVASCRIPT

[tipo] [clave] = [valor];

const nombre = 'Andrea'; // Bien

const: acceso local, solo lectura.

• Dividir • Potencia (Elevado a…)

> es mayor que if (1 > 0)

< es menor que if (1 < 0)

&& y if (1 > 0 && 67 > 0)

== es igual en valor if ('3' == 3)

!= no es igual if ('Doctor' != 'Who')

>= es mayor o igual que if (10 >= 10)

<= es menor o igual que if (10 <= 20)

if (10 > 2 && true && 'HBO' != 'Netflix') {

const edad = 18;

En este ejemplo donde mostramos los números del 0 al 3.

// Bucle for tradicional

for (let i = 0; i <= 3; i += 1) {

//0 //1 //2 //3

for (i = 10; i > 0; i -= 1) {

Intervalo de 5 entre el 0 a 100

for (key in object) {

age:25}; let text = "";

<h2>JavaScript For In</h2>

let txt = "";

let num = 30;

while (num <= 50) {

1. Dado un número N, mostrar todos los números del 1 al N.

2. Dado N sueldos. Mostrar su suma y cuantos hay mayores de $1.000.000.

• Estos elementos pueden ser de cualquier tipo de dato, como

• Cada elemento dentro del array se encuentra en una posición, o

• nombreDelArray es el nombre del array que has declarado.

• indice es el número que corresponde a la posición del elemento al

• El orden de los elementos es una característica fundamental, ya

• Para acceder a un elemento específico de un array, debes utilizar el

• Esto se hace usando corchetes ([]) y separando los valores por

Si declaras un array vacío, puedes asignar datos a posiciones

// Asignar valores a posiciones específicas

document.write("Números: " + numeros + "<br>");

Puedes modificar un elemento ya existente en el array accediendo a

//Cambiar el valor en la posición 1 (índice 1)

document.write("Frutas modificadas: " + frutas +

Esta propiedad devuelve un número entero que representa el número de elementos en el

Propiedad .length // Usamos document.write para mostrar la longitud del array

// Modificar el array y verificar la nueva longitud

Puedes agregar elementos a un array utilizando varios métodos:

a) push(): Agrega uno o más elementos al final del array.

let frutas = ['Manzana', 'Banana'];

// ['Manzana', 'Banana', 'Naranja']

b) unshift(): Agrega uno o más elementos al inicio del array.

let frutas = ['Banana', 'Naranja']; frutas.unshift('Manzana');

// ['Manzana', 'Banana', 'Naranja']

Puedes eliminar elementos de un array con los siguientes métodos:

a) pop(): Elimina el último elemento del array.

let frutas = ['Manzana', 'Banana', 'Naranja']; frutas.pop();

b) shift(): Elimina el primer elemento del array.

let frutas = ['Manzana', 'Banana', 'Naranja']; frutas.shift();

Puedes acceder a cualquier elemento de un array mediante su índice y asignarle un

let frutas = ['Manzana', 'Banana', 'Naranja'];frutas[1] = 'Pera';

// Reemplaza 'Banana' por 'Pera'

El método splice() permite eliminar, agregar o reemplazar elementos en una