Scribd
Cargar
11 vistas46 páginas

8-Javascript para El Desarrollo Web

Cargado por

crepuscularcorso
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
11 vistas46 páginas

8-Javascript para El Desarrollo Web

Cargado por

crepuscularcorso
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 46

IBM SkillsBuild | Introducción a Python

Desarrollo Web
JavaScript para el desarrollo web

1
IBM SkillsBuild | Introducción a Python

Índice

Introducción 4

Características de JavaScript 5

¿Dónde va JavaScript? 5
En el head 5
En una etiqueta 5
Linkar una página JavaScript a nuestro HTML 5

Entrada y salida de datos 5

Prompt() 6

Alert() 6
Alerta normal 6
Alertas de confirmación 6

console.log() 6

Document.write() 7

Estructuras básicas 7
Sentencias 7
Funciones predefinidas 8

Comentarios 8

Tipos de datos 8

Modo estricto 8

Declaración de variables 8

Casting de variables 10

Constantes 10

Ejemplos de operaciones con variables 10

Strings 12
Funciones de los strings 12
Plantillas en strings 14

Operadores 14

Operadores de Asignación 14

Operadores Incremento y decremento 15

Operadores Lógicos 16
Negación 16
AND 17
OR 17

Operadores Matemáticos 18
2
IBM SkillsBuild | Introducción a Python

Operadores Relacionales 18

Condiciones y bucles en JavaScript 20

Condicionales 21

Comparadores 21
IF…ELSE 21
SWITCH…CASE 23

Bucles 24
El bucle determinado FOR 24
WHILE. DO…WHILE 26

Break 28

Arrays 28

Funciones de los arrays 29

Recorrer arrays con for 30

Recorrer arrays con for each 31

Recorrer arrays con for in 31

Búsquedas en un array 31

Arrays multidimensionales 32

POO 32

Funciones 33

Parametros rest y spread 36


Parámetros spread 36

Funciones anónimas 36

Callback 36

Funciones flecha 39

Eventos 40

Manejadores de evento especificados en el código HTML 40

Manejadores de eventos asociados con addEventListener 42

Apéndice de eventos de JavaScript 43

DOM 44

Seleccionar clases y etiquetas 45

BOM 46

3
IBM SkillsBuild | Introducción a Python

Introducción

Comenzamos en este tema con la tercera pata que


compone el estándar HTML5, JavaScript.

Una página web HTML5 constará de tres partes bien


definidas:

• El código HTML: Compuesto por etiquetas HTML


que conformará el esqueleto de nuestra página
WEB.
• El código CSS: Con el que daremos un aspecto
gráfico a nuestra página WEB.
• El código JavaScript: Con el que aportaremos
animación e interactividad a nuestra página WEB.

4
IBM SkillsBuild | Introducción a Python

Características de En una etiqueta

JavaScript
<p onClick="alert('Hola
mundo');">Página de prueba JavaScript</p>
• Se ejecuta en local.
• Es interpretado, no compilado.
• Es de respuesta inmediata. Con el anterior comando hemos sacado un mensaje
• Agrega interactividad a los sitios web. de alerta que dice “Hola mundo”
• Proporciona efectos visuales dinámicos.

Linkar una página JavaScript a nuestro


¿Dónde va JavaScript? HTML

En este caso, creamos la página JavaScript y en el


Para “linkar” una página JavaScript a un html, se head de nuestra página HTML ponemos:
puede poner en el head, en cualquier etiqueta o
“linkar” la página entera (de forma similar a como lo
hacíamos con CSS);
<head>
<meta charset="UTF-8" />
<title>Ejemplo de página con
JavaScript externo</title>
En el head <script
src="nombre_de_la_página_JavaScript.js"><
Entre etiquetas <script></script>. /script>
</head>

<head>
<meta charset="UTF-8"> De esa forma el contenido del archivo .js quedará
<title>Ejemplo de HEAD con anexado a nuestra página web.
JavaScript</title>
<script>
alert("Hola mundo");
</script> Entrada y salida de datos
</head>

Para la entrada de datos JavaScript dispone de dos


Nota: Si nuestra página va a tener en el head tanto
herramientas:
CSS como JavaScript, lo habitual es poner primero
el código CSS, ya que es muy frecuente que el script • El comando prompt()
haga referencia a elementos CSS y deben estar ya • La entrada de datos por formulario HTML
cargados en memoria cuando la ejecución llegue a la
parte de JavaScript.

5
IBM SkillsBuild | Introducción a Python

Prompt() Alerta normal

alert("Esto es una alerta");


Con prompt introducimos la variable mediante una
ventana.

Lo que nos sacará en el navegador lo siguiente:


var nombre=prompt("Introduce nombre "
, "nombre por defecto");

En este ejemplo, lo que el usuario introduzca en la


ventana que se le abrirá, será guardado en la variable
nombre. Alertas de confirmación
A la función prompt() puedo pasarle dos parámetros.
El primer parámetro es el texto a mostrar y el var confirmacion = confirm("Estas
segundo el valor por defecto. seguro de continuar?");

var edad = prompt("Que edad tienes?:


", 18);

Importante: Todo lo que se introduzca por prompt()


siempre será considerado como string, aunque sean En la variable confirmación almaceno la contestación
números. Si quiero poder operar con dichos números del usuario que será true o false dependiendo de si

tengo que hacer la conversión con parseint, acepta o cancela.

parsefloat, etc.

Para la salida de datos disponemos de tres opciones:

• El comando alert()
console.log()
• El comando console.log()
• El comando document.write() Con este comando se nos mostrará un mensaje en la
consola del navegador. No será visible a menos que
abramos la consola. En la mayoría de los
navegadores esto se hace con F12.
Alert()
console.log("Esto es un mensaje
El commando alert() nos sacará una ventana escrito por consola");
emergente con un aviso. Hay dos tipos de alert():

6
IBM SkillsBuild | Introducción a Python

Ejemplos de entrada y salida de datos

//Salida por ventana emergente


alert("Esto es una ventana
emergente.");
La consola nos permite trabajar con JavaScript de
manera instantánea, corregir errores, ver que llevan //Entrada de datos
variable dentro ver qué pasa en nuestro código ver var edad = prompt("Introduzca edad:
por dónde va el flujo del programa etcétera. ");

// Salida de datos leyendo desde una


variable
alert("La edad introducida es: " +
edad);

// Salida de datos por consola


Document.write() console.log("Ha terminado el
programa");

Con document.write() podemos escribir directamente // Salida de datos al BODY de mi


en el código HTML de nuestra página. página
document.write("<h1>Esto es un H1
Se devuelve un String si el usuario hace clic en "OK ", puesto desde JavaScript</h1>");
se devuelve el valor de entrada. Si el usuario hace clic
en "cancelar ", se devuelve NULL. Si el usuario hace
clic en aceptar sin introducir ningún texto, se
devuelve una cadena vacía.

Estructuras básicas
<head>
<meta charset="utf-8">
<title>Documento sin título</title> Sentencias
<script>
var nombre = "Angel"; Llamamos sentencia a cada “orden” que
var apellido = "García"; programemos en JavaScript. Terminan con “;”.
document.write("<h1>Tu nombre
es</h1>" + nombre + " " + apellido);
</script> alert("Esto es una sentencia ");
</head> document.write("Esta es otra ");

7
IBM SkillsBuild | Introducción a Python

Funciones predefinidas Modo estricto


Son comandos que ya vienen por defecto en
JavaScript listos para ser utilizados. Siempre llevan
En JavaScript tenemos un modo que, al activarlo,
paréntesis.
nos permite ser más restrictivo en nuestro modo de
programar. Para ello, al principio de nuestra página
alert(); pondremos:
document.write();
‘use strict’

Por ejemplo, sin este modo activo podríamos definir


Además de estas funciones predefinidas, nosotros una variable con la siguiente sintaxis:
podremos crear las nuestras.

num=5;

Con el modo estricto activo tendríamos que poner:


Comentarios
var num=5;
En JavaScript tenemos dos tipos de comentarios, de
una sola línea o de varias:

Además, existen determinadas funcionalidades que


// Comentario de una sola línea.
solo funcionan con el modo estricto activado.
/*…*/ Comentario de varias líneas.

// Comentario de una sola línea.


Declaración de variables
/* Comentario de varias líneas.
Siempre va entre
los signos de asterisco y barra Por definición, una variable es un espacio en la
invertida */ memoria del ordenador donde se guardará un valor,
que puede cambiar a la largo de la ejecución del
programa.

Se pueden declarar las variables de dos formas, con


Tipos de datos let y con var:

• Let: permite declarar variables limitando su


JavaScript tiene solo tres tipos básicos: alcance al bloque o declaración donde se está
usando. Es decir, las variables declaradas con let

• Valores numéricos: Ya sean números enteros o solo se pueden usar desde dentro de funciones,

de coma flotante (con decimales). condicionales o bucles.

• Strings: Caracteres alfanuméricos, es decir, • Var: define una variable global o local (en una

palabras o frases. función) sin importar el ámbito del bloque. Las

• Booleans: Con dos posibles valores True o False. variables declaradas con var estarán disponibles
para todos los elementos del código.
8
IBM SkillsBuild | Introducción a Python

Las variables tienen dos ámbitos posibles: let lo que realmente hace es crear una nueva variable
local a nivel de bloque, en este caso dentro del if.
• Global: Podemos acceder a ellas desde cualquier
Fuera no tiene validez.
parte de nuestro código.
• Local: Podemos acceder a ellas solo dentro del
ámbito en que fueron definidas. Normalmente var puntuación;
funciones. Serán accesibles desde la propia puntuación=500;
función o desde funciones anidadas en niveles
superiores a la anterior. Es decir, las variables var puntuación=500, record=1000,
jugador= "Angel";
locales se pueden ver desde dentro hacia fuera,
pero nunca desde fuera hacia dentro de la
función. Si declaramos una variable entre comillas, JavaScript
entiende que es un string, aunque sea un número:

var num = 5;
document.write(num); //num vale 5 var num1=5; //Aquí num1 es un
número (int).
if (true) { var num2= "5"; //Aquí num2 es un
var num = 10; string.
document.write(num); //num
vale 10
}
Para modificar una variable ya declarada no ponemos
document.write(num); //num vale 10 var, simplemente el nombre y el valor:

var num=5; //Declaracion y


Con let: asignación
num=10; //Reasignación

let num = 5;
document.write(num); //num vale 5 El comando typeof() nos indica el tipo de una
variable.
if (true) {
let num = 10; Podemos poner typeof num; o typeof(num);
document.write(num); //num
vale 10
}

document.write(num); //num vale 5

9
IBM SkillsBuild | Introducción a Python

Casting de variables Ejemplos de operaciones


con variables
Si necesitamos convertir un string a number tenemos
dos opciones:
//Podemos trabajar con números, strings y
1-Usar la función Number(): booleans
// Declaración de variables:
// No puede empezar por un número
var num1=45; // Esto de error: var 2_cliente;
Resultado= num1+Number(num2); // Evitar tildes y Ñ

//Variable correctamente declarada


let _numero;
2-Usar parseInt:

// Inicialización de la variable
alert(parseInt(num2)+23); _numero = 63;

//Variable declara e inicializada


var numero4 = 647;
De igual forma tenemos disponible la función
parseFloat() para convertir strings a números // Sepueden declara e inicializar varias
decimales. variables a la vez.
var a=3, b=4, c=5;

//Sería lo mismo que poner:

Constantes /*
var a=3;
let b=4;
var c=5;
Por definición, una variable es un espacio en la
*/
memoria del ordenador donde se guardará un valor,
que puede cambiar a la largo de la ejecución del
// JavaScript es Case sensitive.
programa. En el caso de una constante, se define Distingue entre mayúsculas/minúsculas
como un espacio en la memoria del ordenador donde var numero = 10;
se guardará un valor, que NO puede cambiar a la var Numero = 20;
largo de la ejecución del programa. Es decir, si
declaramos una constante y dentro guardamos un console.log("La variable 'numero' vale:"
valor, dicho valor ya no podrá ser modificado. + numero);
console.log("La variable 'Numero' vale:"
Sintaxis: + Numero);

//Con variable numéricas podemos operar


const nombre="Antonio"; matemáticamente

var sumando1 = 35;


var sumando2 = 45;

10
IBM SkillsBuild | Introducción a Python

var resultado = sumando1+sumando2; // Se declaran en mayúsculas


const MICONSTANTE = 4765;
console.log("El resultado de sumar " + //MICONSTANTE = 345; Esto daría error
sumando1 + " + "
+ sumando2 + " es " + // Hay que declararlas e inicializarlas
resultado); obligatoriamente.
//const MICONSTANTE2; Esto daría error

// Operador modulo o resto de la


división
var resto = 46 % 5;
console.log("El resto de 46/5 es " +
resto);

//Operador incremento
var numeroInicial = 10;
let numeroIncrementado =
++numeroInicial;

//Sería como poner que


numeroIncrementado = numeroInicial +1;
console.log("El operador incremento
sobre numeroInicial daría " +
numeroIncrementado);

//IMPORTANTE: No es lo mismo ++variable


que variable++
var numero5 = 5;

document.write("El número antes del


incremento vale " + numero5++);
document.write("<br>");
document.write("El número después del
incremento vale " + numero5);

document.write("<br>");
document.write("<br>");

// Ahora al revés
let numero6 = 5;

document.write("El número antes del


incremento vale " + ++numero6);
document.write("<br>");
document.write("El número después del
incremento vale " + numero6);

//Constantes. Como las variables pero no


se puede cambiar su valor
11
IBM SkillsBuild | Introducción a Python

Strings Funciones de los strings


JavaScript dispone de funciones predefinidas que
nos facilitan la labor de trabajar con strings. Las más
Los strings se definen como variables cuyo contenido
usadas son:
son caracteres alfanuméricos, es decir, texto.
Siempre van entre comillas. Parseint(): Convierte un STRING a número. Otra
opción es usar la función Number().
//Declarión de strings
//------------------------ toString: Convierte un número a string:
//------------------------
let nombre = "Mi nombre es Angel";
let nombre2 = 'Mi nombre es Angel'; var num=3;
var num2=num.toString();
/* Aunque declaremos números, si lo
hacemos entre comillas,
nos lo tratará como strings */
let edad2 = "43"; toUppercase: Convierte un string a mayúsculas.
console.log(edad2+20);
toLowercase: Convierte un String a minúsculas.

//Las comillas anidadas siempre alternas, Length: Calcula la longitud de un texto. Si la usamos
let nombre3 = 'Mi nombre es "Angel" ';
con arrays me dice el número de elementos del
let nombre4 = "Mi nombre es 'Angel' ";
array.

/* Cuando declaremos numeros con los que Concat: Para concatenar texto. Como el +
no vamos a operar
matemáticamente lo haremos como strings
*/ var texto=texto1.concat(" "+texto2);
let telefono = "666666666";

//Los strings no se suman, se concatenan:


let nombre5 = "Angel"; indexOF(): Para buscar un texto dentro de otro. Me
let espacio = " "; saca si existe un texto dentro de otro y en qué
let apellido = "García"; posición está. Busca la primera coincidencia.
let nombreCompleto =
nombre+espacio+apellido; También tenemos un LastIndexOf() que nos saca la
última coincidencia.
console.log(nombreCompleto);

//Otra forma de hacerlo


var texto="Esto es el texto";
console.log(nombre5 + " " +apellido);
var busqueda= texto.indexOf("texto");
document.write(busqueda);
console.log(nombre5 + " " +edad2);

12
IBM SkillsBuild | Introducción a Python

En este caso me imprimiría 11. Es decir, si el texto comienza por los caracteres que
le digamos.
El método search() funciona igual:

var texto="Hola mundo";


var busqueda= texto.search("texto"); var busqueda= texto.StarWith("Hola");

Si no encuentra el texto me devolverá -1. En este caso daría true.

Match(): Funciona como indexOF o search, pero en


este caso nos devuelve un array con los resultados. var busqueda=
En principio me devuelve la primera coincidencia. Si texto.StarWith("mundo");
quiero que me saque todas tengo que usar la
expresión regular:

En este caso daría false.


var busqueda= texto.match(/texto/gi);
endsWith(); Como el anterior pero mirando si el texto
termina con los caracteres que le digamos.

Substr(): Sácame desde el carácter 14, 5 caracteres includes(); Busca una palabra en un texto. Es case
en adelante: sensitive.

replace(); Nos permite reemplazar un texto por otro.


var busqueda= texto.substr(14,5);

var busqueda= texto.replace("Hola",


"Adiós");
CharAt(): Para seleccionar una letra determinada de
un string.

Me busca “Hola” y me lo reemplaza por “Adiós”.


var busqueda= texto.CharAt(44);
slice(); Me separa un string a partir del carácter que
le digamos.

Me mostraría la letra que se encuentre en la posición


var texto= "Hola mundo";
44.
var busqueda= texto.slice(5);
StartWith(): Para buscar un texto al inicio del string.
Devuelve true o false, dependiendo de si lo ha
encontrado o no. Me corta el string a partir del carácter 5, es decir, me
deja solo “mundo”.

13
IBM SkillsBuild | Introducción a Python

También puedo decirle posición de comienzo y fin: Con plantilla:

var busqueda= texto.slice(5,7); var texto= `


<h3>Tu nombre es $(nombre)</h3>
split(); Me mete el string en un array. <h3> y tus apellidos
$(apellidos)</h3>
`;
var busqueda= texto.split();

Podemos indicarle un separador y nos mete las Operadores


palabras que hay entre espacios, por ejemplo:

Las variables por sí solas son de poca utilidad. Hasta


var busqueda= texto.split(" "); ahora, solo se ha visto cómo crear variables de
diferentes tipos y cómo mostrar su valor mediante la
función alert(). Para hacer programas realmente
útiles, son necesarias otro tipo de herramientas.
trim(): Me quita los espacios por delante y por detrás
del string. Los operadores permiten manipular el valor de las
variables, realizar operaciones matemáticas con sus
valores y comparar diferentes variables. De esta
forma, los operadores permiten a los programas
Plantillas en strings realizar cálculos complejos y tomar decisiones
lógicas en función de comparaciones y otros tipos de
Podemos sustituir valores dentro un string sin
condiciones.
necesidad de estar concatenándolos, usando una
plantilla. Para ello uso las comillas invertidas y la
interpolación de variables con $().

Modo normal: Operadores de Asignación

var nombre=prompt("Introduce tu El operador de asignación es el más utilizado y el más


nombre: "); sencillo. Este operador se utiliza para guardar un
var apellidos=prompt("Introduce tus valor específico en una variable. El símbolo utilizado
apellidos: "); es = (no confundir con el operador == que se verá
var texto="Tu nombre es "+nombre+" y más adelante):
tus apellidos"+apellidos;

var numero1 = 3;

14
IBM SkillsBuild | Introducción a Python

A la izquierda del operador, siempre debe indicarse el Por tanto, el anterior ejemplo es equivalente a:
nombre de una variable. A la derecha del operador, se
pueden indicar variables, valores, condiciones lógicas,
etc.: var numero = 5;
numero = numero + 1;
alert(numero); // numero = 6
var numero1 = 3;
var numero2 = 4;

/* Error, la asignación siempre se De forma equivalente, el operador decremento


realiza a una variable, (indicado como un prefijo -- en el nombre de la
por lo que en la izquierda no se variable) se utiliza para decrementar el valor de la
puede indicar un número */ variable:
5 = numero1;

// Ahora, la variable numero1 vale 5 var numero = 5;


numero1 = 5; --numero;
alert(numero); // numero = 4
// Ahora, la variable numero1 vale 4
numero1 = numero2;

El anterior ejemplo es equivalente a:

Operadores Incremento y var numero = 5;

decremento
numero = numero - 1;
alert(numero); // numero = 4

Estos dos operadores solamente son válidos para las


variables numéricas y se utilizan para incrementar o Los operadores de incremento y decremento no
decrementar en una unidad el valor de una variable. solamente se pueden indicar como prefijo del
nombre de la variable, sino que también es posible
utilizarlos como sufijo. En este caso, su
var numero = 5; comportamiento es similar pero muy diferente. En el
++numero;
siguiente ejemplo:
alert(numero); // numero = 6

var numero = 5;
numero++;
El operador de incremento se indica mediante el
alert(numero); // numero = 6
prefijo ++ en el nombre de la variable.

El resultado es que el valor de esa variable se


incrementa en una unidad.

15
IBM SkillsBuild | Introducción a Python

Operadores Lógicos
El resultado de ejecutar el script anterior es el mismo
que cuando se utiliza el operador ++numero, por lo
que puede parecer que es equivalente indicar el
operador ++ delante o detrás del identificador de la
Los operadores lógicos son imprescindibles para
variable. Sin embargo, el siguiente ejemplo muestra
realizar aplicaciones complejas, ya que se utilizan
sus diferencias:
para tomar decisiones sobre las instrucciones que
debería ejecutar el programa en función de ciertas

var numero1 = 5; condiciones.


var numero2 = 2;
El resultado de cualquier operación que utilice
numero3 = numero1++ + numero2;
operadores lógicos siempre es un valor lógico
// numero3 = 7, numero1 = 6
o booleano.
var numero1 = 5;
var numero2 = 2;
Negación
numero3 = ++numero1 + numero2;
// numero3 = 8, numero1 = 6 Uno de los operadores lógicos más utilizados es el de
la negación. Se utiliza para obtener el valor contrario
al valor de la variable:
Si el operador ++ se indica como prefijo del
identificador de la variable, su valor se
var visible = true;
incrementa antes de realizar cualquier otra alert(!visible); // Muestra "false"
operación. Si el operador ++ se indica como sufijo del y no "true"
identificador de la variable, su valor se
incrementa después de ejecutar la sentencia en la
que aparece.
La negación lógica se obtiene prefijando el
Por tanto, en la instrucción numero3 = numero1++ símbolo ! al identificador de la variable. El
+ numero2;, el valor de numero1 se incrementa funcionamiento de este operador se resume en la
después de realizar la operación (primero se suma siguiente tabla:
y numero3 vale 7, después se incrementa el valor
variable !variable
de numero1 y vale 6). Sin embargo, en la
instrucción numero3 = ++numero1 + numero2;,
true false
en primer lugar se incrementa el valor de numero1 y
después se realiza la suma (primero se false true
incrementa numero1 y vale 6, después se realiza la
suma y numero3 vale 8).

Es decir, aunque ambas expresiones se parecen Si la variable original es de tipo booleano, es muy
mucho, no es lo mismo el operador suma e sencillo obtener su negación. Sin embargo, ¿qué
incremento (numero++) que incremento y suma sucede cuando la variable es un número o una
(++numero). cadena de texto?

16
IBM SkillsBuild | Introducción a Python

Para obtener la negación en este tipo de variables, se


realiza en primer lugar su conversión a un var valor1 = true;
valor booleano: var valor2 = false;
resultado = valor1 && valor2; //
• Si la variable contiene un número, se transforma resultado = false
en false si vale 0 y en true para cualquier otro
número (positivo o negativo, decimal o entero). valor1 = true;
• Si la variable contiene una cadena de texto, se valor2 = true;
transforma en false si la cadena es vacía ("") y resultado = valor1 && valor2; //
en true en cualquier otro caso.
resultado = true

var cantidad = 0;
vacio = !cantidad; // vacio = true
OR
cantidad = 2; La operación lógica OR también combina dos valores
vacio = !cantidad; // vacio = false booleanos. El operador se indica mediante el
símbolo || y su resultado es true si alguno de los dos
var mensaje = ""; operandos es true:
mensajeVacio = !mensaje; //
mensajeVacio = true variable1 variable2 variable1 || variable2

mensaje = "Bienvenido"; true true true


mensajeVacio = !mensaje; //
mensajeVacio = false true false true

false true true

false false false


AND
La operación lógica AND obtiene su resultado
combinando dos valores booleanos. El operador se
indica mediante el símbolo && y su resultado var valor1 = true;
solamente es true si los dos operandos son true: var valor2 = false;
resultado = valor1 || valor2; //
variable1 variable2 variable1 && variable2
resultado = true

true true true


valor1 = false;
valor2 = false;
true false false
resultado = valor1 || valor2; //
resultado = false
false true false

false false false

17
IBM SkillsBuild | Introducción a Python

Operadores Matemáticos
El operador módulo en JavaScript se indica mediante
el símbolo %, que no debe confundirse con el cálculo
del porcentaje:

JavaScript permite realizar manipulaciones


matemáticas sobre el valor de las variables var numero1 = 10;
numéricas. Los operadores definidos son: suma (+), var numero2 = 5;
resta (-), multiplicación (*) y división (/). Ejemplo: resultado = numero1 % numero2; //
resultado = 0

var numero1 = 10; numero1 = 9;


var numero2 = 5; numero2 = 5;
resultado = numero1 % numero2; //
resultado = numero1 / numero2; // resultado = 4
resultado = 2
resultado = 3 + numero1; //
resultado = 13
resultado = numero2 - 4; // Los operadores matemáticos también se pueden
resultado = 1 combinar con el operador de asignación para abreviar
resultado = numero1 * numero2; // su notación:
resultado = 50

var numero1 = 5;
numero1 += 3; // numero1 = numero1 +
Además de los cuatro operadores básicos, JavaScript 3 = 8
define otro operador matemático que no es sencillo numero1 -= 1; // numero1 = numero1 -
de entender cuando se estudia por primera vez, pero 1 = 4
que es muy útil en algunas ocasiones. numero1 *= 2; // numero1 = numero1
* 2 = 10
Se trata del operador "módulo" (o resto de la numero1 /= 5; // numero1 = numero1
división), que calcula el resto de la división entera de / 5 = 1
dos números. Si se divide por ejemplo 10 y 5, la numero1 %= 4; // numero1 = numero1
división es exacta y da un resultado de 2. El resto de % 4 = 1
esa división es 0, por lo que módulo de 10 y 5 es igual
a 0.

Sin embargo, si se divide 9 y 5, la división no es


exacta, el resultado es 1 y el resto 4, por lo
Operadores Relacionales
que módulo de 9 y 5 es igual a 4.
Los operadores relacionales definidos por JavaScript
son idénticos a los que definen las matemáticas:
mayor que (>), menor que (<), mayor o igual (>=),
menor o igual (<=), igual que (==) y distinto de (!=).

18
IBM SkillsBuild | Introducción a Python

Los operadores que relacionan variables son Los operadores relacionales también se pueden
imprescindibles para realizar cualquier aplicación utilizar con variables de tipo cadena de texto:
compleja, como se verá en el siguiente capítulo de
programación avanzada. El resultado de todos estos
var texto1 = "hola";
operadores siempre es un valor booleano:
var texto2 = "hola";
var texto3 = "adios";
var numero1 = 3;
var numero2 = 5; resultado = texto1 == texto3; //
resultado = numero1 > numero2; // resultado = false
resultado = false resultado = texto1 != texto2; //
resultado = numero1 < numero2; // resultado = false
resultado = true resultado = texto3 >= texto2; //
resultado = false
numero1 = 5;
numero2 = 5;
resultado = numero1 >= numero2; //
Cuando se utilizan cadenas de texto, los operadores
resultado = true
"mayor que" (>) y "menor que" (<) siguen un
resultado = numero1 <= numero2; //
razonamiento no intuitivo: se compara letra a letra
resultado = true
resultado = numero1 == numero2; // comenzando desde la izquierda hasta que se
resultado = true encuentre una diferencia entre las dos cadenas de
resultado = numero1 != numero2; // texto. Para determinar si una letra es mayor o menor
resultado = false que otra, las mayúsculas se consideran menores que
las minúsculas y las primeras letras del alfabeto son
menores que las últimas (a es menor que b, b es
menor que c, A es menor que a, etc.)
Se debe tener especial cuidado con el operador de
igualdad (==), ya que es el origen de la mayoría de
errores de programación, incluso para los usuarios
que ya tienen cierta experiencia desarrollando
scripts. El operador == se utiliza para comparar el
valor de dos variables, por lo que es muy diferente
del operador =, que se utiliza para asignar un valor a
una variable:

// El operador "=" asigna valores


var numero1 = 5;
resultado = numero1 = 3; // numero1
= 3 y resultado = 3

// El operador "==" compara variables


var numero1 = 5;
resultado = numero1 == 3; // numero1
= 5 y resultado = false

19
IBM SkillsBuild | Introducción a Python

Condiciones y bucles en
Con los condicionales vamos a modificar el flujo de
ejecución según nos convenga en función de si se

JavaScript cumple una condición.

En el siguiente diagrama se representa el flujo de


ejecución de un condicional simple. Se evalúa la
En los lenguajes de programación, las instrucciones
variable nota y si esta es igual o mayor que 5 se
que te permiten controlar las decisiones y bucles de
ejecutarán una serie de instrucciones, de lo contrario
ejecución se denominan "Estructuras de Control".
se ejecutarán otras, pero nunca ambas, o unas u
Una estructura de control dirige el flujo de ejecución
otras.
a través de una secuencia de instrucciones, basadas
en decisiones simples y en otros factores.
Introduce nota
Una parte muy importante de una estructura de
control es la “condición”. Cada condición es una
expresión que se evalúa a true o false.
Nota >=5?
JavaScript ofrece un total de cuatro instrucciones
para procesar código de acuerdo a condiciones
determinadas por el
programador: if, switch, for y while.
Nota >=5 Nota <5
Hasta ahora nosotros hemos realizado script de
ejecución lineal. Es decir, ejecutando instrucciones
una detrás de otra. Hasta que no terminaba una
Aprobado Suspenso
instrucción, no se ejecutaba la siguiente:

Instrucción 1

Instrucción 2

Instrucción 3

Instrucción 4

20
IBM SkillsBuild | Introducción a Python

Según las necesidades de nuestro código, el Dichas comparaciones se llevan a cabo mediante los
condicional se puede complicar lo que sea necesario: operadores de comparación y los operadores lógicos:

OPERADOR DE DESCRIPCIÓN EJEMPLO


COMPARACIÓN

Introduce == Igual que… x==y


edad Comprueba valor.
=== Estrictamente igual. x===y
Comprueba valor y
Edad >18 Edad <18 Edad >100
tipo.
!= Diferente. Es igual x!=y x<>y
Mayor de Menor de que poner <>
Edad errónea
edad edad
< Menor que… x<y
> Mayor que… x>y
<= Menor o igual que… x<=y
>= Mayor o igual que… x>=y

Condicionales
OPERADOR DESCRIPCIÓN EJEMPLO
LÓGICO
La toma de decisiones en programación es similar a && Y lógico a>b && b<c
la toma de decisiones en la vida real. En
programación también enfrentamos algunas || O lógico a=b || a=c
situaciones en las que queremos que se ejecute un
! NO lógico x!=y
cierto bloque de código cuando se cumple alguna
condición.
JavaScript trabaja con dos tipos de condicionales,
Los lenguajes de programación utilizan instrucciones
IF…ELSE y SWITCH…CASE. A continuación, veremos
condicionales para controlar el flujo de ejecución del
el uso de ambos.
programa en función de ciertas condiciones. Estos se
utilizan para hacer que el flujo de ejecución avance y
se ramifique en función de los cambios en el estado
de un programa.
IF…ELSE
Esta declaración es la condición más simple para
tomar decisiones. Se utiliza para decidir si una
Comparadores determinada declaración o bloque de instrucciones
se ejecutará o no, es decir, si una determinada
condición es verdadera, entonces un bloque de
Para poder tomar decisiones se han de hacer
instrucción se ejecuta de otro modo se ejecutarán
comparaciones.
otras instrucciones de código.

21
IBM SkillsBuild | Introducción a Python

La sintaxis puede tener varias formas: Se pueden poner tantos else…if como queramos.

Opción 1. Una sola condición a comprobar: El else final no es obligatorio pero es útil para
ejecutar instrucciones en caso de que ninguna de las
If( Condición a cumplir ){
condiciones anteriores se cumpla.
Instrucciones a ejecutar en caso de que la condición
se cumpla
}else{ Vamos a añadir al ejemplo anterior una segunda
Instrucciones a ejecutar en caso de que la condición
condición. Además de tener el dinero, para comprar
no se cumpla
} el coche se ha de ser mayor de edad:

var precio = 30000;


Por ejemplo, un coche cuesta 30000€. Preguntar al var dinero = prompt("Introduce cuánto
usuario cuánto dinero tiene. Comparar ambas dinero tienes: ");
cantidades y sacar un mensaje de alerta diciendo si var edad = prompt("Introduce tu edad:
puede o no comprar el coche. ");
if ((precio < dinero) && (edad >=
18)) {
alert("Te puedes comprar el
var precio=30000; coche");
var dinero=prompt("Introduce cuanto } else if ((precio < dinero) && (edad
dinero tienes: "); < 18)) {
alert("Tienes el dinero pero no
if(dinero>precio){ la edad");
alert("Te puedes comprar el }
coche"); else if ((precio > dinero) && (edad
}else{ >= 18)) {
alert("Te vas en autobus"); alert("Tienes la edad pero no el
} dinero");
}
else if ((precio > dinero) && (edad <
En este ejemplo hemos evaluado como condición que
18)) {
el dinero que se tiene ha de ser igual o mayor al
alert("Ni dinero ni edad");
precio del coche para poder comprarlo. }

Opción 2. Más de una condición a comprobar


Si el usuario me introdujese por ventana un valor que
If( Condición a cumplir ){
Instrucciones a ejecutar en caso de que la condición no es un número tendríamos un problema ya que
se cumpla recordemos que todo lo que el usuario introduzca por
}else IF( Segunda condición a cumplir){ prompt se considera un string y, para hacer la
Instrucciones a ejecutar en caso de que la segunda comprobación de si edad>=18 necesitamos que edad
condición se cumpla
sea un número.
}else{
Instrucciones a ejecutar en caso de que ninguna
condición se cumpla
}

22
IBM SkillsBuild | Introducción a Python

Para averiguar si un valor es numérico usamos la Analizamos un poco más en detalle la sintaxis de
función isNaN(). este código que incluye las palabras
claves: switch, case, break y default:

var num1=prompt("Introduce numero"); • Al lado de la palabra clave ‘switch’ pondremos


var num2=prompt("Introduce numero2"); entre paréntesis el nombre de la variable cuyo
if(!isNaN(num1)&&!isNaN(num2)){ valor queremos comprobar. Según sea dicho
alert(parseInt(num1)+parseInt(num2)); valor se debe de ejecutar una serie de
}else{
instrucciones.
alert("No has introducido números");
• Cada valor contra el que vamos a comparar se
}
incluye tras la palabra clave ‘case‘ separada por
dos puntos ( : ) y el valor encerrado en comillas
Por ejemplo, si nuestro programa solicitara un
número del 1 al 10, y según eligiera el usuario el
SWITCH…CASE programa le diera un resultado concreto,

Otra opción que nos brinda JavaScript para usar escribiríamos un ‘case’ para cada nº: 1, 2…10

condicionales es switch…case. • Incluimos un ‘break‘ en cada cláusula ‘case’ para


que el programa no se pare ahí, sino que salga de
Cualquier evaluación de se pueda hacer con ese punto y continúe después del final de la
switch…case también se puede hacer con IF... else. instrucción switch con las instrucciones
siguientes que contenga el programa.
La sintaxis del condicional switch…case es:
• La última clausula ‘default‘ realiza el mismo
switch(Variable_a_comprobar) { cometido que el último ‘else’ que ponemos tras
una serie de ‘else if’. Es decir, si no se ha
case "opcion1" : cumplido ninguna de las condiciones y queremos
que se ejecute algo concreto, lo ponemos en esa
instrucciones;
cláusula ‘default’.
break;

case "opcion2" : En resumen, la instrucción ‘switch’ actúa como un


conmutador en conjunto con los diferentes ‘case’ (la
instrucciones; traducción de la palabra ‘switch’ es precisamente
esa: interruptor, conmutador). Imagina una vía de
break;
tren que en un punto se desdobla en múltiples vías
...................... que van en diferentes direcciones. Igual que se
accionaba un mecanismo para que el tren siguiera
case "opcionN" : por una de esas vías en función de su destino, los
switch…case consiguen ese efecto, haciendo que el
instrucciones;
programa se encamine por el case que cumple la
break; condición, y por tanto, que el programa ejecute las
instrucciones que se han definido allí.
default :

instrucciones;}

23
IBM SkillsBuild | Introducción a Python

Partiendo de una variable edad, crear un programa Además, los bucles se ejecutan a través de una
que imprima diferentes mensajes según sea el valor condición.
de edad.
Existen dos tipos de bucles:

• Bucles determinados: Aquellos en los que se


var edad = 18;
var imprime = ""; sabe de antemano cuántas veces se va a repetir
un código. Un bucle de este tipo es “For”.
switch (edad) { • Bucles indeterminados: Aquellos en los que no
case 18: se sabe a priori cuántas veces se va a repetir el
imprime = "Acabas de cumplir código. Dependerá de que se cumpla o no una
la mayoría de edad"; condición. Dos bucles de este tipo son “While” y
break; “Do while”.
case 25:
imprime = "Eres un adulto";
break;
case 50:
imprime = "Eres maduro"; El bucle determinado FOR
break;
Es un tipo de bucle cuya ejecución dura un número
default:
determinado de veces o hasta que su condición se
imprime = "Otra edad no
contemplada" evalué como falsa (false).

Su sintaxis es:
break;
document.write(imprime); for(inicio ; condición ;
}
incremento/decremento){

código a repetir}

Es importante destacar que switch…case evalúa


condiciones concretas de igualdad. Es decir, es
nuestro ejemplo hemos comprobado si edad = 18 o si La estructura se describe de la siguiente manera:
edad = 25 o edad = 50.
• inicio: Esta expresión indica la condición para el
Pero no podríamos hacer comprobaciones del tipo inicio del ciclo. Usualmente es la declaración de
edad >= 18, por ejemplo. Para este tipo de una variable numérica. Se suele crear una
comprobaciones hay que usar un if…else. variable de nombre i, j, k, etc.
• condición: Esta expresión es la condición que se
debe mantener para que siga ejecutando el ciclo.
• incremento/decremento: Esta expresión cambia
Bucles el valor de la variable numérica indicada en inicio.
• código a repetir : Cuerpo del Bucle. Es el
conjunto de instrucciones que se ejecutan
Los bucles, son una estructura de programación que durante cada iteración del bucle (en cada vuelta).
nos permite ejecutar instrucciones de forma
repetitiva dentro de un bloque de programación.

24
IBM SkillsBuild | Introducción a Python

Otro ejemplo. Crear un bucle for que se ejecute 10


for(var i=0;i<10;i++){ veces y que imprima en pantalla lo que vale la
document.write("Hola"+"<br>"); variable local en cada una de las vueltas.
}

document.write("Ejecución for (i=0 ; i<10 ; i++){


terminada."); document.write("En esta vuelta de
bucle I vale " + i);
document.write("<br>");
}

En este bucle for hemos creado una variable local document.write("Ejecución terminada.");
llamada i que hemos inicializado a cero. La condición
es que el bucle se repita mientras que i<10. A cada
vuelta de bucle i se incrementará en una unidad (con
lo que en la décima vuelta la condición dejará de
cumplirse). Y en cada vuelta de bucle se imprimirá la
palabra hola.

Después de la décima vuelta la condición dejará de


cumplirse ya que i pasará a valer 10 y nuestro
programa se saldrá del bucle y continuará con la
siguiente línea de ejecución, en este caso, imprimir
Ejecución terminada.

El principal uso del bucle for es recorrer arrays,


poniendo como condición que el bucle se repetirá
tantas veces como elementos tengamos en nuestro
array:

var meses = ["Enero", "Febrero",


"Marzo", "Abril", "Mayo", "Junio",
"Julio", "Agosto", "Septiembre",
"Octubre", "Noviembre", "Diciembre"];
for (var i = 0; i < meses.length; i++)
{
document.write(meses[i] + "<br/>");
}

25
IBM SkillsBuild | Introducción a Python

Veamos un ejemplo de while.

Repetir el ejemplo de los meses del año que vimos en


el for, pero implementándolo con un bucle while:

var contador = 0;
var meses = ["Enero", "Febrero",
"Marzo", "Abril", "Mayo", "Junio",
"Julio", "Agosto", "Septiembre",
"Octubre", "Novienbre", "Diciembre"];
while (contador < meses.length) {
document.write(meses[contador] +
"<br>");
contador++;
}

WHILE. DO…WHILE
Es similar al ciclo for explicado anteriormente. Se
ejecuta hasta que la condición sea falsa (false). La
diferencia se basa en que la evaluación se realiza al
final de cada iteración.

Si usamos while podemos encontrarnos con que la


condición no se cumple ni en la primera
comprobación, con lo que el código no se ejecutaría
nunca.

En el caso de do…while nos aseguramos de que el


código se ejecuta al menos una vez.

Sintaxis:

While( Condición a cumplir){

Código a ejecutar mientras se cumpla la condición}

do{ Código a ejecutar mientras se cumpla la


condición }

While(Condición a cumplir)

26
IBM SkillsBuild | Introducción a Python

Otro ejemplo sería crear un programa que pida al Un ejemplo de do…while es crear un número
usuario el número de ejecuciones e imprima en aleatorio entre 0-100 y pedir al usuario que intente
consola cuánto vale una variable contador que se adivinarlo.
incremente en cada ciclo que va haciendo el bucle:
Cada intento incrementará un contador.

let contador = 0;
let ciclos = Number(prompt("Introduce //Creamos un número aleatorio entre 0
número de ejecuciones")); y 1.
// Despues lo multiplicamos por 100
para que esté entre 0-100
while(contador < ciclos){ //Lo redondeamos para que sea entero
console.log("Contador vale ahora var numero =
" + contador); parseInt(Math.random()*100);
contador++;
} var numero_introducido;
var contador = 0;

while (numero != numero_introducido)


{
numero_introducido =
Number(prompt("Introduce número: "));
contador++;

if (numero_introducido > numero) {


alert("Demasiado alto");
}

if (numero_introducido < numero) {


alert("Demasiado bajo");
}
}

alert("CORRECTO¡¡¡, el número era el


" + numero + ". Has acertado en " +
contador + " intentos.");

27
IBM SkillsBuild | Introducción a Python

Break
En JavaScript los valores del array NO tienen que
ser del mismo tipo.

• var
Nos permite salir de un bucle de ejecución al Articulos=[“zapatilla”,”camiseta”,”pantalon”,”cal
cumplirse una condición. cetines”];
• var Articulos=new array
En el siguiente ejemplo tenemos un bucle que
[“zapatilla”,”camiseta”,”pantalon”,”calcetines”];
imprimiría los años del 2000 al 2010. Pero hemos
introducido un break cuando el año = 2005:
Artículos: zapatilla, camiseta, pantalón y calcetines.
var year = 2000;
while (year < 2010) {
En JavaScript un array se declara de las siguientes
document.write(year + "<br>");
formas:
if (year == 2005) {
break;
}
year++; var
} Articulos=["zapatilla","camiseta","pantal
ón","calcetines"];

O:

var Articulos =new


array("zapatilla","camiseta","pantalón","ca
lcetines");

En ambos ejemplos hemos creado un array (es decir,


una colección de elementos) al que hemos llamado
En este caso cuando el año sea igual a 2005, se sale Artículos y dentro hemos almacenado los valores:
del bucle y no ejecuta el resto de instrucciones del zapatilla, camiseta, pantalón y calcetines.
mismo.
Para poder trabajar con los datos que contiene un
array hay que referirnos a ellos según su posición en
el array.
Arrays Este es un ejemplo de acceso a un array:

Hasta ahora hemos visto cómo dentro de una


variable metíamos un único valor, ya sea numérico, alert(Articulos[1]); Resultado
de texto o boleano. : camiseta

Los arrays nos permiten trabajar con conjuntos de La posición de los elementos empieza a contar desde
valores y almacenarlos en una única dirección de cero, es decir, en nuestro array Artículos, el elemento
memoria. en la posición cero es zapatilla, en la posición 1

28
IBM SkillsBuild | Introducción a Python

tenemos camiseta, en la posición 2 tenemos Aquí podemos ver un ejemplo de estas funciones:
pantalón y en la posición 3 tenemos calcetines.

Dado que en nuestro ejemplo hemos pedido que se <html>


nos saque por pantalla un mensaje de alerta con el
<head>
elemento en la posición 1, nos sacará camiseta.
<meta charset="utf-8">
Si queremos cambiar o ingresar un elemento en un <title>Documento sin título</title>
array, de la misma forma lo haremos refiriéndonos a <script>
var articulos = ["balon", "botas",
su posición dentro del array:
"camiseta", "pantalon"];
En el siguiente ejemplo vamos a crear un array de </script>
tres elementos y vamos a pedir al usuario que </head>
introduzca un valor mediante un comando prompt.
<body>
Dicho valor se almacenará en la posición 4.
<script>
document.write("<p>El primer articulo
var es < strong > "+articulos[0]+"</strong
array1=["objeto1","objeto2","objeto3"]; ></p > ");
document.write("<P>La longitud del
array1[3]="objeto4";
array1[4]=prompt("Introduce array es " + articulos.length + "</p>");
objeto4"); document.write("<p>El último articulo
alert(array1[4]); es <strong>" + articulos[articulos.length
- 1] + "</strong></p>");
articulos.unshift("pelota");
articulos.push("canasta");
document.write("<p>Añadimos el

Funciones de los arrays artículo <strong>" + articulos[0] +


"</strong></p>");
document.write("<p>El primer articulo
ahora es <strong>" + articulos[0] +
JavaScript nos brinda una serie de funciones
"</strong></p>");
predefinidas listas para que nos faciliten el trabajo
document.write("<p>El último articulo
con arrays: ahora es <strong>" +
articulos[articulos.length - 1] +
• Length: Devuelve la longitud del array. "</strong></p>");
• push: Agrega elementos al final del array.
document.write("<P>La longitud del
array ahora es " + articulos.length +
• unshift: Agrega elementos al principio del array.
"</p>");
• pop: Elimina elementos al final del array.
document.write(articulos);
• shift: Elimina elementos al principio del array.
articulos.push(prompt("introduce
nuevo articulo"));
document.write("<br>");
document.write(articulos);

</script>
</body>
</html>

29
IBM SkillsBuild | Introducción a Python

Recorrer arrays con for


Podemos poner un elemento como undefined, con lo
que su valor será no definido (o desconocido);

articulos[0]= undefined; A veces necesitaremos recorrer todos los elementos


de un array buscando uno o unos en concreto.

Para recorrer un array hay que usar el bucle FOR:


Para averiguar la posición de un elemento:

var
posicion=articulos.indexof("pantalones"); document.write("<ul>");
var nombres = ["Angel", "Sara",
"Manolo", "Ana"];
Convertir un array a texto: for (var i = 0; i < nombres.length;
i++) {
document.write("<li>" +
nombres[i] + "</li>");
var miString=artículos.join(); };
document.write("</ul>");

Me lo convierte a un string separado por comas.


Ejemplo, rellenar un array y recorrerlo después:
Para hacer lo contrario, es decir convertir un string
en array lo haremos con el método split(). Dentro de
los parámetros pondremos el carácter que hará de var trabajadores = new Array();
separador. var contador = 0;
var persona;

var cadena="nombre1,nombre2,nombre3"; while (persona != "salir") {


persona = prompt("Introduce nombre");
var miArray=cadena.split(“,”); trabajadores[contador] = persona;
contador++;
}
trabajadores.pop();
Para ordenar un array usaremos el método el método
for (var i = 0; i <
short(). Para ordenar por orden inverso el método
trabajadores.length; i++) {
reverse(); document.write(trabajadores[i] +
"<br>");
}
cadena.short();
cadena.reverse();

Esto nos ordena un array alfabéticamente.

30
IBM SkillsBuild | Introducción a Python

Recorrer arrays con for Recorrer arrays con for in


each
Otra forma de recorrer un array es con el bucle for in.

Existe una modificación del bucle FOR creada


específicamente para facilitar el trabajo con arrays, for( let nombre in nombres){
Es el bucle foreach. document.write("<li>"+nombres[nom
bre]+"</li>");
Utilizamos la función foreach que va a recibir el };
elemento por parámetro.

En este caso nombre es el índice.


document.write("<ul>");
var nombres=["Angel", "Sara",
"Manolo", "Ana"];
nombres.forEach((elemento)=>{ Búsquedas en un array
document.write("<li>"+elemento+"</li>
");
}); Para realizar búsquedas en un array podemos usar el
document.write("</ul>"); método find() que tiene dentro una función de carga.

var
Opcionalmente la función foreach puede recibir más
busqueda=nombres.find(function(nombre){
parámetros.
return nombre==nombre1;
});
Un segundo parámetro puede ser el índice.

nombres.forEach(elemento, index) => {


busqueda almacena el texto que estamos buscando.
document.write("<li>" + index + " - "
+ elemento + "</li>");} Esto se puede simplificar poniéndolo de la siguiente
forma:

var busqueda=nombres.find(nombre =>


nombre==nombre1;);

De forma similar podemos buscar el índice con el


método findIndex().

var busqueda=nombres.findIndex(nombre
=> nombre==nombre1);

31
IBM SkillsBuild | Introducción a Python

Otro método interesante es some() que nos permite


comprobar si alguno de los elementos del array var peliculas=['Batman', 'Cars',
cumple una determinada condición. Por ejemplo, 'It'];
comprobar si hay elementos mayores de 40: var categoria=['Acción',
'infantil', 'Terror'];
var cine=[ películas, categoria];
var numeros=[3,45,33,65,776]; console.log(cine);
var
busqueda=numeros.some(numero=>numero>40);

Para acceder a un elemento, por ejemplo, categoría


infantil, deberemos indicar la posición que dicho
Almacena true o false. elemento ocupa en el primer array (en el array
contenedor) seguida de la posición que ocupa en el
segundo array (el array contenido):

Arrays multidimensionales
console.log(cine[0][1]);

No son más que un array compuesto de otros arrays.


Es decir, un array que, en lugar de tener números o
En este ejemplo nos imprimiría Cars.
strings en su interior, tiene otros arrays.
Coloquialmente podríamos decir que es un array de Los arrays multidimensionales no son una
arrays. herramienta muy usada, pero no está de más que el
alumno los conozca.

Cine

Películas Categoría
POO
Batman Acción Ya vimos en anteriores temas los principios de la
programación orientada a objetos. Pues bien,
JavaScript es un lenguaje de programación orientado
Cars Infantil a objetos, por lo que comparte los conceptos clave
de dicho paradigma de programación. No obstante la
POO en JavaScript no se suele usar, ya que la POO
está pensada para otro tipo de programas diferentes
It Terror
de las páginas web. Realmente en programación web
no tiene mucho sentido el uso de clases, objetos,
atributos, métodos, etc. Pero no está de más que el
alumno se familiarice con dichos conceptos.

En JavaScript los objetos tienen propiedades y


métodos.
32
IBM SkillsBuild | Introducción a Python

Funciones
Las propiedades se modifican con la nomenclatura
del punto y el valor entre comillas:

Las funciones se definen como un conjunto de


nombreDelObjeto.propiedad= "valor "; instrucciones preparadas para ser llamadas en
Renault.ancho= "2000 "; cualquier momento. Solo se ejecutarán si las
Botton.style.width= "500px "; llamamos. Su finalidad es, pues, la reutilización de
Document.write(); código.
Windows.alert();
Sintaxis:

Para llamar a los métodos: Para usar una función, hay que definirla primero:
nombreDelObjeto.metodo();
function nombre_funcion(){

Renault.acelera(); //Código a ejecutar

}
Ejemplo:

<body> Y luego, en otro punto de la página HTML llamamos a


<input type="button" id="boton"> la función:
<input type="button" id="boton2">
<script> nombre_funcion();
var
miBoton=document.getElementById("boton");
miBoton.style.width="300px";
Salvo las funciones predefinidas de JavaScript, es
miBoton.style.height="300px";
indispensable llamar a una función para que se
var ejecute.
miBoton2=document.getElementById("boton2"
);
miBoton2.style.width="300px";
miBoton2.style.height="300px"
;
miBoton2.focus();
</script>
</body>

33
IBM SkillsBuild | Introducción a Python

Este es un ejemplo para declarar una función de En la declaración de la función hemos puesto que
nombre suma. Dicha función leerá el valor de dos nuestra función, al ser llamada, recibirá dos
variables y sacará el valor de la suma de ambas. parámetros, num1 y num2. Por lo tanto, en la
llamada a la función estamos obligados a pasarle
dichos parámetros o nos dará error.
//Declaración de la función
let num1 =5; Al llamar a la función hemos pasado el valor de 3
let num2 = 10; para num1 y 7 para num2.

function suma(){ Al margen de las funciones que nosotros creemos


console.log("La suma de "+ num1 +" y según nuestras necesidades, existen funciones
"+ num2 +" es " + (num1+num2)); predefinidas en JavaScript listas para que las
} usemos, como por ejemplo la función Date() que nos
muestra la hora del sistema.
//Llamada a la función
suma(); <html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
En esta ocasión, nuestra función ha tomado dos
<script>
variables que ya estaban instanciadas e incializadas,
function fecha() {
pero podemos crear funciones que trabajen con
document.write(Date());
valores que deberemos pasarles cuando las }
llamemos. Son las llamadas funciones con </script>
parámetros. </head>

<body>
//Declaración de la función <h1>Hola es día:
<script>fecha();</script>
</h1>
function suma2(num1, num2){ </body>
console.log("La suma de "+num1+" </html>
y "+num2+" es "+(num1+num2));
}

//Llamada a la función
suma(3, 7);

Ya no hemos cogido el valor de num1 y num2 de dos


variables preexistentes. Se las hemos pasado por
parámetro a nuestra función.

34
IBM SkillsBuild | Introducción a Python

Escribir una función que pida el nombre al usuario y Crear una función que sume dos números
confeccione un mensaje de bienvenida con dicho introducidos por el usuario:
nombre:

<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Documento sin título</title> <title>Documento sin título</title>
<script> <script>
var nombre; var num1;
function pedir_nombre() { var num2;
nombre = prompt("Introduce function suma(num1, num2) {
nombre"); num1 = prompt("Introduce número
document.write(nombre); 1: ");
} num2 = prompt("Introduce número 1
</script> :");
</head> document.write("La suma de " +
num1 + " y " + num2 + " es= " +
<body> (Number(num1) + Number(num2)));
<p>Hola }
<script>pedir_nombre();</script> , </script>
cómo estás? </head>
</p>
</body> <body>
</html> <script>
suma(num1, num2);
</script>
</body>
</html>

35
IBM SkillsBuild | Introducción a Python

Parámetros rest y spread Funciones anónimas

Cuando no sepamos con exactitud el número de Las funciones anónimas son aquellas que no tienen
parámetros que le pueden llegar a nuestra función, nombre y las podemos guardar dentro de una
pondremos tres puntos para hacer referencia al resto variable.
de posibles parámetros. Dichos parámetros serán
almacenados en un array con el nombre de mi
var miFuncion=function(nombre);
parámetro. return "El nombre es " + nombre;

function numeros(num1,
num2,...otros){ Para llamarla:
document.write(num1 +" , "+
num2+"<br>");
document.write(otros); miFuncion("Angel");
}

numeros(2,3,4,54,332);

En este ejemplo otros vale 4,54,332. Es un array.


Callback
Si no tuviese los tres puntos valdría 4.
Los Callbacks en JavaScript son como su propio
nombre en inglés, indica, llamadas de vuelta, quiere
Parámetros spread decir que cuando invoco una función pasándole como
parámetro otra función (el callback) esta función
De forma similar, en el siguiente ejemplo hemos
parámetro se ejecuta cuando la función principal ha
creado un array con dos elementos y se lo hemos
terminado de ejecutarse. O cuando a nosotros nos
pasado a la función como parámetro. Si no usamos
interese…
los tres puntos, lo que le estamos diciendo es que
num1=[1,10] y num2=3 y otros =[4,54,332]. Pero si Este concepto que parece muy complicado es en
le ponemos los tres puntos lo que me coge es realidad muy sencillo de entender si lo hacemos con
num1=1, num2=10 y otros=[3,4,54,332] casos prácticos, por ejemplo:

function numeros(num1,
num2,...otros){ function funcionPrincipal(callback){
document.write(num1 +" , "+ alert('hago algo y llamo al
num2+"<br>"); callback avisando que terminé');
document.write(otros); callback();
} }
var arrayNumeros=[1,10];
numeros(…arrayNumeros,3,4,54,332); funcionPrincipal(function(){
alert('termino de hacer algo');
});

36
IBM SkillsBuild | Introducción a Python

Aquí vemos como la función funcionPrincipal se Con esto ya vemos la fuerza que puede tener esta
ejecuta recibiendo un argumento que es otra función forma de programación, pero ahora imaginemos que
y que se ejecuta después de que termine su labor queremos encadenar diferentes funciones con
llamando a callback. callbacks, lo cual es muy sencillo siguiendo con la
misma lógica:
Pero no te preocupes si no lo has entendido, vamos a
hacer algunos ejemplos más para ir cogiéndolo, en
realidad es muy sencillo. function funcionPrincipal(callback1,
callback2, callback3){
Siguiendo con el caso anterior, podemos hacer //código de la función principal
incluso que la función callback1();
callback reciba argumentos que se envían desde la //más código de la función
función principal… principal
callback2();
//más código de la función
function funcionPrincipal(callback){ principal
alert('hago algo y llamo al callback3();
callback avisando que terminé'); //más código si fuera necesario
callback('Miguel'); }
}
funcionPrincipal(
funcionPrincipal(function(nombre){ function(){
alert('me llamo ' + nombre); alert('primer callback');
}); },
function(){
alert('segundo callback');
},
function(){
alert('tercer callback');
}
);

Aquí vemos como al invocar a la función principal se


le pasan como argumentos las tres funciones, que se
ejecutan, las cuales podrían recibir parámetros…
como hemos visto más arriba, pero de este modo el
código queda un poco sucio, ya que no podemos ver
claramente las funciones.

37
IBM SkillsBuild | Introducción a Python

De modo que podemos declarar las funciones que se Esto que parece un lío, vamos a verlo en un código
enviarán como argumentos aparte, lo cual nos donde mostraremos un alert, un reloj y un texto, y
permite también utilizarlas en otras partes del donde el reloj se va modificando cada segundo y el
código, tal y como vemos en el siguiente ejemplo: texto tardará en aparecer 3 segundos:

function funcionPrincipal(callback1, <html>


callback2, callback3){ <head>
//código de la función principal <meta charset="utf-8">
callback1(); <title>Documento sin título</title>
//más código de la función </head>
principal
callback2(); <body>
//más código de la función <h3 id="demo"></h3>
principal <h3 id="demo2"></h3>
callback3(); <script>
//más código si fuera necesario function funcionPrincipal(callback1,
} callback2, callback3){
//código de la función principal
function callback1(){ callback1();
alert('primer callback'); //más código de la función
} principal
var miVar =
function callback2(){ setInterval(function(){ callback2() },
alert('segundo callback'); 1000);
} //más código de la función
principal
function callback3(){ var miVar2 =
alert('tercer callback'); setInterval(function(){ callback3() },
} 3000);
//más código si fuera necesario
funcionPrincipal(callback1, }
callback2, callback3);
function callback1(){
alert('primer callback');
}
Podemos observar cómo se declaran todas funciones
y luego se pasan como argumentos de la función function callback2(){
principal para poder utilizarlas dentro de la misma. var d = new Date();
Pero aunque esto daría para otra entrada, vamos a var t =
ver por encima el uso de otra función de JavaScript d.toLocaleTimeString();
llamada setInterval(), esta función nos sirve para document.getElementById("demo
retardar acciones, y necesita dos parámetros para ").innerHTML = t;
funciones; una función que invoca a la función que
}
vamos a usar y un valor numérico que dice en
function callback3(){
milisegundos el retraso y actualización de la función
document.getElementById("demo
invocada.
2").innerHTML = 'Esto es el callback3';
}
38
IBM SkillsBuild | Introducción a Python

funcionPrincipal(callback1,
Funciones flecha
callback2, callback3);
</script>
Las funciones de flecha son una manera de definir
</body>
funciones de callback de una manera mucho más
</html>
clara y limpia. Simplemente sustituyendo la palabra
function por una flecha. Si lleva un parámetro no
hace falta poner los paréntesis, si lleva dos ya sí.
El ejemplo en esencia es el mismo, cambiando las
funcionalidades de las funciones de callback, pero
function sumame(num1, num2,
hemos añadido la función setInterval() para que se
sumaYmuestra, sumaPorDos) {
retrasen e incluso se actualice, aprovechando de var suma = num1 + num2;
paso la forma de hacer un reloj en JavaScript…
sumaYmuestra(suma);
Existe una sintaxis para las funciones de callback
sumaPorDos(suma);
llamada funciones de flecha, en las que se omite la
palabra function y se sustituye por una flecha puesta return suma;
tras el nombre de la función: }

sumame(5, 7, dato => {


funcionPrincipal(function(nombre){ console.log('La suma es ', dato);
alert('me llamo ' + nombre); },
}); dato => {
console.log('La suma de dos
es ', (dato * 2));
Quedaría así:
});

funcionPrincipal(nombre =>{
alert('me llamo ' + nombre);
});

39
IBM SkillsBuild | Introducción a Python

Eventos
Para definir las acciones que queremos realizar al
producirse un evento utilizamos los manejadores de
eventos. Existen muchos tipos de eventos sobre los
que podemos asociar manejadores de eventos, para
Los eventos son la manera que tenemos en
muchos tipos de acciones del usuario.
JavaScript de controlar las acciones de los
visitantes y definir un comportamiento de la página En JavaScript podemos definir eventos de dos
cuando se produzcan. Cuando un usuario visita una maneras distintas. Una manera es en el propio código
página web e interactúa con ella se producen los HTML, usando atributos de los elementos (etiquetas)
eventos y con JavaScript podemos definir qué a los que queremos asociar los manejadores de
queremos que ocurra cuando se produzcan los eventos. Otra manera un poco más avanzada es
eventos. usando los propios objetos del DOM. Vamos a ver
ambas maneras a continuación.
Para entender los eventos necesitamos conocer
algunos conceptos básicos:

• Evento: Es algo que ocurre. Generalmente los


eventos ocurren cuando el usuario interactúa con
el documento, pero podrían producirse por
situaciones ajenas al usuario, como una imagen
Manejadores de evento
•
que no se puede cargar porque esté indisponible.
Tipo de evento: Es el tipo del suceso que ha
especificados en el código
ocurrido, por ejemplo, un clic sobre un botón o el HTML
envío de un formulario. Cada tipo de elemento de
la página ofrece diversos tipos de eventos de
JavaScript. El maneador de eventos se puede colocar en la
• Manejador de evento: es el comportamiento que etiqueta HTML del elemento de la página que
nosotros podemos asignar como respuesta a un queremos que responda a las acciones del usuario.
evento. Se especifica mediante una función Para ello usamos atributos especiales en las
JavaScript, que se asocia a un tipo de evento en etiquetas del HTML, que tienen el prefijo "on"
concreto. Una vez asociado el manejador a un seguido del tipo de evento. Por ejemplo, el
tipo de evento sobre un elemento de la página, manejador asociado en el atributo "onclick" se
da vez que ocurre ese tipo de evento sobre ese ejecuta cuando se produce un clic en una etiqueta.
elemento en concreto, se ejecutará el manejador
Vamos a poner un ejemplo sobre el manejador de
de evento asociado.
eventos onclick. Ya sabemos que sirve para describir
Con JavaScript podemos definir qué es lo que pasa acciones que queremos que se ejecuten cuando se
cuando se produce un evento, como podría ser que hace un clic. Por tanto, si queremos que al hacer click
un usuario pulse sobre un botón, edite un campo de sobre un botón se ejecuta alguna función, escribimos
texto o abandone la página. el manejador onclick en la etiqueta <INPUT
type=button> de ese botón.
El manejo de eventos es el caballo de batalla para
hacer páginas interactivas, porque con ellos
podemos responder a las acciones de los usuarios.

40
IBM SkillsBuild | Introducción a Python

Algo parecido a esto: Lo habitual es colocar una sola instrucción, y si se


desean colocar más de una se suele crear una
función con todas las instrucciones y dentro del
<INPUT type="button" value="pulsame"
manejador se coloca una sola instrucción que es la
onclick="miFunción()"></INPUT>
llamada a la función.

Vamos a ver cómo se colocarían en un manejador


varias instrucciones.
Se coloca un atributo nuevo en la etiqueta que tiene
el mismo nombre que el evento, en este caso onclick.
El atributo se iguala a las sentencias JavaScript que <input type=button value=Pulsar
queremos que se ejecuten al producirse el evento. onclick="x=30; window.alert(x);
window.document.bgColor = 'red'">

<INPUT type="button" value="pulsar"


onclick="alert('Botón pulsado')">
</INPUT> Son instrucciones muy simples como asignar a x el
valor 30, hacer una ventana de alerta con el valor de
x y cambiar el color del fondo a rojo.

Dado el código anterior, al hacer clic sobre el botón


Sin embargo, tantas instrucciones puestas en un
aparecerá un mensaje de alerta con el texto "Botón
manejador quedan un poco confusas, habría sido
pulsado".
mejor crear una función:

Cada elemento de la página tiene su propia lista de


eventos soportados, vamos a ver otro ejemplo de
<script>
manejo de eventos, esta vez sobre un menú function ejecutaEventoOnclick(){
desplegable, en el que definimos un comportamiento var x = 30;
cuando cambiamos el valor seleccionado. window.alert(x);
window.document.bgColor = 'red';
}
</script>

<SELECT
<FORM>
onchange="window.alert('Cambiaste la
<input type="button" value="Pulsar"
selección')">
onclick="ejecutaEventoOnclick()">
<OPTION value="opcion1">Opcion 1
</FORM>
<OPTION value="opcion2">Opcion 2
</SELECT>

Siempre es una idea hacer un código mantenible y


poner varias instrucciones en un atributo onclick no
Dentro de los manejadores de eventos podemos es una buena idea.
colocar tantas instrucciones como deseemos, pero
siempre separadas por punto y coma.

41
IBM SkillsBuild | Introducción a Python

Manejadores de eventos
Lo más cómodo para acceder a un elemento de la
página y recuperar el objeto del DOM asociado a esa

asociados con etiqueta es usar el identificador (atributo "id"). En


este caso el identificador es "miBoton". Para acceder
addEventListener a ese elemento usamos el método getElementById()
del objeto document, enviando el identificador.

La segunda forma de asociar manejadores de


eventos a elementos de la página es mediante el var miBoton =
document.getElementById('miBoton');
método addEventListener(). Es una forma un poco
más avanzada, pero mejora todavía la mantenibilidad
del código, ya que permite separar mejor el código de
la funcionalidad del código del contenido.
Ahora tenemos el objeto del DOM asociado a ese
El código HTML debería usarse simplemente para botón en la variable "miBoton". Sobre ese objeto ya
definir el contenido de neustra página. Si tenemos podemos invocar el método addEventListener(). A
instrucciones JavaScript dentro de las etiquetas, este método debemos pasarle dos parámetros. El
colocando atributos como "onclick" o "onchange" lo primero es el tipo de evento que queremos detectar y
que estamos haciendo es colocar código de la el segundo la función manejadora del evento que
funcionalidad dentro del código HTML, lo que es poco queremos que se ejecute cuando se produce el
recomendable. Por tanto, la técnica que vamos a evento.
conocer ahora es todavía más adecuada, porque nos
va a permitir escribir el código de la funcionalidad
miBoton.addEventListener('click',
(los eventos JavaScript) sin ensuciar el código HTML.
function() {
Para asociar un evento a un elemento de la página alert('Has hecho clic!!')
})
necesitamos hacer dos pasos:

• Acceder al objeto sobre el que queremos definir


el evento. Para esto tenemos que acceder al
DOM para localizar el objeto adecuado, que Al hacer clic sobre el botón se mostrará el mensaje
representa la etiqueta sobre la que queremos de alerta.
asociar el manejador del evento.
Vamos a ver un segundo ejemplo, sobre una imagen
• Sobre el objeto del DOM, aplicamos
en la que vamos a asociar un manejador para el tipo
addEventListener(), indicando el tipo de evento y
de evento "mouseover", que se produce cuando el
la función manejadora.
usuario pone el puntero del ratón encima de un
Por ejemplo, tenemos este elemento de la página: elemento.

Tenemos una imagen, en la que hemos puesto un


<input type="button" id="'miBoton'" atributo id para llegar a ella.
value="Pulsa click">

<img
src="https://picsum.photos/200/300"
id="imagen">

42
IBM SkillsBuild | Introducción a Python

Apéndice de eventos de
Ahora le asociamos el manejador de evento para el
tipo de evento "mouseover" con este código
JavaScript.
JavaScript
var miImagen =
La siguiente tabla resume los eventos más
document.getElementById('imagen');
importantes definidos por JavaScript:
miImagen.addEventListener('mouseover'
, function() {
alert('Has pasado el ratón encima de Evento Descripción Elementos
la imagen') para los que
}) está definido

onblur Deseleccionar <button>, <inp


el elemento ut>, <label>, <s
elect>, <textare
a>, <body>

oncha Deseleccionar <input>, <selec


nge un elemento t>, <textarea>
que se ha
modificado

onclic Pinchar y Todos los


k soltar el ratón elementos

ondblc Pinchar dos Todos los


lick veces elementos
seguidas con
el ratón

onfocu Seleccionar <button>, <inp


s un elemento ut>, <label>, <s
elect>, <textare
a>, <body>

onkey Pulsar una Elementos de


down tecla (sin formulario
soltar) y <body>

onkey Pulsar una Elementos de


press tecla formulario
y <body>

43
IBM SkillsBuild | Introducción a Python

onkey Soltar una Elementos de onresi Se ha <body>


up tecla pulsada formulario ze modificado el
y <body> tamaño de la
ventana del
navegador
onload La página se <body>
ha cargado
completamen onsele Seleccionar <input>, <texta
te ct un texto rea>

onmou Pulsar (sin Todos los onsub Enviar el <form>


sedow soltar) un elementos mit formulario
n botón del
ratón
onunlo Se abandona <body>
ad la página (por
onmou Mover el ratón Todos los ejemplo al
semov elementos cerrar el
e navegador)

onmou El Todos los


seout ratón "sale" d elementos
el elemento
(pasa por
encima de DOM
otro
elemento)
La finalidad de JavaScript es interactuar con el
código HTML, para ello tenemos que tener muy claro
onmou El Todos los
lo que es el DOM. (Document Object Model). Es decir,
seover ratón "entra" elementos
en el el árbol de etiquetas que componen nuestro HTML.
elemento
(pasa por Suponiendo que tenemos un elemento HTML con un
encima del id=caja podemos referirnos a él con:
elemento)

var
onmou Soltar el Todos los cajas=document.getElementById("caja").inn
seup botón que elementos
erHTML;
estaba
pulsado en el
ratón
De esta forma cargamos en la variable cajas el valor
onrese Inicializar el <form> del elemento con id=caja.
t formulario
(borrar todos
sus datos)

44
IBM SkillsBuild | Introducción a Python

También podemos modificar las propiedades o el y con punto para hacer referencia a su clase.
valor del elemento con id=caja.

var
var cajas=document.querySelector(".caja");
cajas=document.getElementById("caja");
cajas.innerHTML;
cajas.style.background="red";

Otra forma de seleccionar un elemento de nuestra


página es con querySelector. Seleccionar clases y
etiquetas
var
cajas=document.querySelector("#caja");
Acabamos de ver cómo seleccionar elementos
concretos por su etiqueta, nombre o clase.

De esta forma selecciono también el elemento con Para seleccionar todos los elementos de un tipo:
id=caja.

Si quiero seleccionar un elemento cuya class=caja: var


todos_los_div=document.getElementsByTagNa
me('div');
var
cajas=document.querySelector(".caja");

Con esto he seleccionado todos los elementos de


tipo div y me los mete en un array. Ahora ya
Vemos pues cómo podemos, desde JavaScript,
seleccionar y modificar elementos de HTML mediante podríamos sacar el contenido de un elemento de
el uso del DOM. dicho array:

var
De esta forma si selecciono el elemento solo es para
contenido=todos_los_div[2].textContent();
seleccionar el nombre de la etiqueta, console.log(contenido);

var
cajas=document.querySelector("caja"); Me mostraría lo que hay en el elemento [2] del array.

También podríamos haber utilizado el innerHTML:

con # para hacer referencia a su ID


var
contenido=todos_los_div[2].innerHTML();
var
cajas=document.querySelector("#caja");

45
IBM SkillsBuild | Introducción a Python

La única diferencia es que con innerHTML(), si Abrir una pestaña nueva en el navegador:
quiero, puedo añadirle un valor nuevo al contenido.
window.open(URL_de_destino);
También podemos seleccionar elementos por su
etiqueta .class con:

document.getElemenByClassname();

BOM

El BOM (Browser Object Model) contiene multitud de


propiedades que nos permiten trabajar con el
navegador.

De igual forma que en el DOM podemos seleccionar


objetos del documento, con el BOM podemos
seleccionar objetos del navegador y modificarlos. Por
ejemplo, podemos seleccionar la ventana:

console.log(window.innerHeight);
console.log(window.innerWidth);

En este caso jugamos con el tamaño de la ventana.

No existen estándares oficiales para el modelo de


objetos de navegador ( BOM ) por lo que no suele ser
muy usado, pero es interesante que el alumno sepa
al menos de su existencia y funcionamiento.

Más cosas que podemos hacer:

console.log(screen.Width); Similar a lo
anterior

Sacar la URL cargada y más datos:

console.log(window.location);

Sacar la Href:

console.log(window.location.href);

46

También podría gustarte