Desarrollo de Aplicaciones Web

Lenguajes de marcas
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

Tema 6. JavaScript
1. Introducción
JavaScript es un lenguaje interpretado. Se utiliza principalmente en el lado del cliente,
implementado como parte de un navegador web, aunque actualmente es posible ejecutar
JavaScript en el propio servidor (NodeJS).

Es un lenguaje de programación que permite crear contenido nuevo y dinámico, controlar

archivos de multimedia, crear imágenes animadas, etc, por lo que es el complemento perfecto
a HTML y CSS en la creación de páginas web, ya que aporta funcionalidad. Algunos de los usos
que se le suele dar a JavaScript son:

 Cambiar la apariencia de la página web de acuerdo a acciones que sobre ella

realice el usuario, por ejemplo variando estilos CSS o modificando código HTML.
 Ofrecer distintos tipos de respuesta según el navegador y sistema operativo que
esté utilizando el usuario.
 Validación de datos en formularios antes de su envío al servidor.
 Ejecutar cálculos o pequeños programas del lado del cliente.

Se diseñó con una sintaxis similar al lenguaje C, aunque adopta nombres y convenciones
de Java. Sin embargo Java y JavaScript no están relacionados.

El lenguaje LiveScript nació, a principios de los 90 en Netscape, de la necesidad de evitar

grandes tiempos de espera a la respuesta que diera un servidor a un formulario enviado. En
esa época, la velocidad de navegación era muy baja, por lo que se pensó en un lenguaje que se
ejecutara del lado del cliente.

Posteriormente, Netscape firmó una alianza con Sun para el desarrollo del nuevo lenguaje
de programación al que decidió cambiar el nombre por el de JavaScript.

El organismo ECMA (European Computer Manufacturers Association), a través de un

comité creado para la ocasión, lanzó el estándar en el que se definió por primera vez el
lenguaje ECMAScript. Es decir, el estándar de JavaScript es ECMAScript. Desde el 2012, todos
los navegadores modernos soportan completamente ECMAScript 5.1. El 17 de Julio de 2015,
ECMA International publicó la sexta versión de ECMAScript. Desde entonces, los estándares
ECMAScript están en ciclos de lanzamiento anuales.

2
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

2. Sintaxis
La sintaxis de JavaScript es muy similar a la de lenguajes como Java y C. Sus normas básicas
son las siguientes:

 No tiene en cuenta los espacios en blanco y las nuevas líneas por lo que el código
se puede ordenar tabulando las líneas, añadiendo espacios, creando nuevas líneas,
etc, para entenderlo mejor.
 Distingue entre mayúsculas y minúsculas.
 No define el tipo de las variables. Una misma variable puede almacenar diferentes
tipos de datos durante la ejecución del script.
 No es necesario terminar cada sentencia con “;” pero es conveniente.
 Al incluir comentarios su contenido no se visualiza por pantalla, pero sí que se
envía al navegador junto con el resto del script, por lo que hay que tener cuidado
con la información que contengan. Los comentarios se definen de dos formas:

//Esto es un comentario de una sola línea. No hay que cerrarlo

/* Este comentario puede ocupar más de una línea.
Se deberá cerrar al terminar */

2.1. Incluir JavaScript en un documento

Para incluir JavaScript en un documento tenemos las tres mismas opciones que para CSS:

 Incluir JavaScript en el cuerpo del documento:

<span aqui</span>
 Agregar JavaScript a un archivo HTML en su cabecera: Si se va a mantener código
JavaScript en el HTML, lo recomendable es hacerlo entre las etiquetas de head,
aunque es fácil encontrarlo al final del documento. Se incluirá entre las etiquetas
<script> </script>.
<script>
function alerta() { alert('Hola');}
</script>
Y luego en el body tendremos:
<span aquí</span>
 Mantener el código JavaScript agrupado en archivos aparte: Esta será la forma en
que se mantenga el código JavaScript salvo que, por necesidades específicas de
funcionalidad, se necesite incluirlo en el documento HTML. El archivo que
contenga el código JavaScript tendrá extensión .js, y para referenciarlo desde el
documento HTML solo habrá que hacer:
<script src="./scripts/[Link]"></script>
Los archivos JavaScript en caché mejoran el rendimiento general del sitio web al disminuir
el tiempo que tardan las páginas en cargarse.

3
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

2.2. Carga de scripts

Al cargarse el HTML de una página en el orden en que aparece, si utiliza JavaScript para
manipular elementos de la página, su código no funcionará si el JavaScript es cargado y
analizado antes que el código HTML al que está intentando manipular.

Para evitar esto tenemos dos opciones: async y defer.

 Los scripts async descargarán el script sin bloquear la renderización de la página y

lo ejecutarán tan pronto como el script termine de descargarse. Los scripts no
tiene por qué ejecutarse en un orden específico, pero no impedirán que se
muestre el resto de la página. Se recomienda usar async cuando los scripts de la
página se ejecuten independientemente unos de otros.

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

<script async src="../scripts/[Link]"></script>
 defer cargará los scripts en el orden en que aparecen en la página y los ejecutará
tan pronto como el script y el contenido sean descargados:

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

<script defer src="../scripts/[Link]"></script>
EJERCICIO 1

 En un directorio organizado, donde los scripts JavaScript estarán en una carpeta

propia, incluir:
 Un documento HTML llamado pagPrincipal.
o El cuerpo del documento contendrá únicamente un título.
o En la cabecera se incluirá un script con la sentencia alert("¡Hola Mundo
1!");
o En la cabecera, tras el paso anterior, se referenciará el archivo JavaScript
creado.
 Un documento JavaScript llamado javascript (extensión js) que contenga la
siguiente sentencia:

alert("¡Hola Mundo 2!");

4
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

3. Interacción con el usuario

3.1. Mensajes de alerta
alert()
Mediante el método alert() se mostrará un mensaje por pantalla al usuario. La alerta
mostrada quita el foco de la ventana del navegador, por lo que el usuario no podrá acceder a
otras partes de la página hasta que no acepte el mensaje mostrado. Este método no devuelve
ningún valor.

prompt()
Utilizando este método se mostrará al usuario un mensaje en una ventana modal
solicitando información. De la misma forma que el método alert, el foco pasa a la nueva
ventana y no se puede continuar accediendo a otras partes de la página.

prompt() devuelve el valor introducido, en forma de cadena, si el usuario pulsa Aceptar, o

null en caso contrario:

let dato = prompt("Introduzca su nombre por favor");

confirm()
Al utilizar este método se mostrará por pantalla un mensaje de alerta para su confirmación
o cancelación, de nuevo en una ventana modal. Al igual que los dos métodos anteriores, el
foco pasa a la ventana modal.

Este método devuelve true si el usuario acepta el mensaje y false en caso contrario.

3.2. Mensajes por consola

Con Javascript es posible imprimir mensajes por la consola del navegador. Esto es muy útil
en tiempo de desarrollo, aunque no es recomendable dejar mensajes informativos en
producción(los errores si). Los principales métodos que proporciona la consola son:

[Link]("Mensaje de consola.");
[Link]("Mensaje informativo.");
[Link]("Mensaje de aviso.");
[Link]("Mensaje de error.");
[Link]();//Para limpiar la consola

EJERCICIO 2
Modifica la página y los scripts del ejercicio 1 para que:

 Cuando se haga click sobre el título se llame a una función que:

o Pida al usuario que introduzca su nombre.
o Compruebe si el valor introducido por el usuario es un valor vacío, y en
caso de serlo, :
 Muestre un error por consola indicando que no se ha introducido
valor.

5
Desarrollo de Aplicaciones Web Lenguajes de Marcas


 Informe al usuario mediante un alert de que no ha escrito su
nombre.
o Por el contrario, si no es un valor vacío, pida confirmación del nombre
mostrándoselo. En caso de que el usuario confirme:
 Se mostrará un log por consola con el texto “El nombre es
correcto”.
 Se muestre un alert con el texto “Bienvenido”.
o Y como última opción, en caso de que el usuario no confirme su nombre,
se mostrará un warning por consola con el texto “No se sabe su nombre”.

6
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

4. Primeros pasos con JavaScript

4.1. Variables
Variables
Las variables son contenedores para almacenar valores. Una variable se declara con una de
las siguientes palabras clave: var, let o const; y se le asigna valor en la creación o más tarde:

var variable1 = "valor";

let variable2;
variable2 = "valor";
Hay que saber que un bloque es una estructura que agrupa sentencias, delimitada por un
par de llaves. Puede ser una función, una sentencia condicional, un bucle, etc.

La declaración con var define una variable en el ámbito local actual (función) y se hereda a
elementos descendientes por referencia(bloques por ejemplo). Si la variable es declarada
fuera de una función, o dentro de ella pero sin la palabra var, la variable será global.

Si se declara una variable con let o const tendrá alcance de bloque y no será visible para la
función que lo contenga. La variable declarada con const no podrá ser reasignada.

El nombre de una variable podrá contener letras, números, guiones bajos o símbolos dólar
($) y no podrá comenzar por número. Es recomendable que se siga la sintaxis
lowerCamelCase(esteEsUnEjemploDeNombre). Su contenido podrá ser:

 Numérico: cualquier tipo de número real o entero.

 Lógico o booleano: true, false, 1 o 0.
 Cadena de caracteres: cualquier combinación de caracteres (letras, números,
signos especiales y espacios). Se delimitan mediante comillas dobles o simples.

En javascript no es necesario declarar el tipo de variable antes de usarla. El tipo será

determinado automáticamente cuando el programa comience a ser procesado. Esto también
significa que puedes tener la misma variable con diferentes tipos:

let variable1 = "valor";

variable1 = 13;
variable1 = true;

Tipos de datos
Los tipos de datos que define el estándar son:

 Tipos primitivos:
o Boolean: tomará los valores true o false.
o Null: tendrá el valor null.
o Undefined: Se trata de una variable a la que no se le ha asignado valor.
Tendrá el valor undefined.

7
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

oNumber: número entre -(253 -1) y 253 -1. Además, tiene tres valores
simbólicos: +Infinity, -Infinity, and NaN.
o String: Cadena de texto. Irá entre comillas. Una vez creada, la cadena, no
es posible modificarla. Pero si es posible crear otra basándose en una
operación de la cadena original. Por ejemplo:
 [Link]():seleccionar una subcadena de la original.
 [Link](): concatenar dos cadenas existentes.
o Symbol: Tipo nuevo de la última versión. Se trata de un valor primitivo
único e inmutable y puede ser usado como la clave de una propiedad de
un Object.
 Tipos Object:
o Un objeto es una colección de propiedades, una lista de pares clave-valor
donde la clave será un String o un Symbol y el valor cualquier tipo de dato.
Un ejemplo sencillo de objeto sería:
var usuario= { id: 5, fechaReg: “22/02/2019”, nombre: Elena };
y para acceder a uno de sus valores:
[Link];
o Además, existe un conjunto de objetos especiales como puede ser el
“objeto global”, el “objeto prototipo”, los arrays, las funciones, las clases
definidas por el programador, las clases predefinidas JavaScript (Date,
Error entre otras) y otros.

EJERCICIO 3

 Realiza los cambios necesarios en el archivo [Link] del ejercicio 1 para que se
muestren alertas con la información que se genere en cada paso:
 Incluir un título en el documento HTML que capture el evento onclick:
o Añadir el atributo del elemento h1: >  Crear la función mostrarVariables en el fichero .js de la siguiente manera:
function mostrarVariables() { }
 Ya dentro de la función:
o Mostrar una alerta con el valor de la variable variable1(sin declararla primero).
alert('Variable1: ' + variable1);
o Asignar a la variable(sin declarar primero) variable2 el valor null y mostrarlo
seguidamente mediante una alerta.
o Declarar la variable variable1 y en la misma sentencia asignarle el valor 34.
Mostrarlo después mediante una alerta.
o Asignar a la variable(sin declarar primero) variable3 el valor 15,9 y
seguidamente mostrar una alerta con la multiplicación de variable1 y
variable3. (variable1*variable3)
o Asignar a variable3 la cadena de texto “ahora soy un texto”. Mostrarlo
seguidamente mediante una alerta.

8
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

o En la siguiente alerta mostrar la multiplicación de variable3 y 35.

o Crear el objeto del ejemplo y mostrar uno de sus valores mediante una alerta.
***IMPORTANTE: Aunque en este ejemplo hayamos creado o declarado variables en
cualquier punto, lo correcto es declararlas al comienzo de la función que la contenga.

4.2. Conversión entre tipos

Para las operaciones, JavaScript realiza de manera automática las conversiones necesarias:

8 * true = 8, ya que la operación que se realiza es 8*1.

15 + ‘5’ = ‘155’, ya que convierte 15 a cadena y concatena.

Luego hay elementos, como la función prompt(), que devuelven siempre cadenas, y para
casos como este existen funciones de conversión de datos. Algunas de las más usadas son:

 Number(“cadena”): Convierte una cadena a valor numérico.

 parseInt(valor): convierte el valor pasado como parámetro a un número entero.
Siempre que el valor empiece por un número lo convertirá:

parseInt(5.7) // Devuelve 5
parseInt('5.7') // Devuelve 5
parseInt('5 coches') // Devuelve 5, Number devolvería NaN
 parseFloat(valor): Igual que el anterior pero a número decimal.
 Boolean(valor): Convierte cualquier valor a booleano. Cualquier valor se evaluará a
true excepto 0, NaN, null, undefined o cadena vacía (‘’) que se evaluarán a false.

EJERCICIO 4

Realiza los siguientes ejercicios en la consola del navegador:

 Comprueba, utilizando el operador typeof(), el tipo de dato de 3, “3”, tres y 3.6.

 Comprueba el resultado de las siguientes conversiones: parseInt(“345.87”),
parseFloat(“345.87”), parseInt(‘8 manzanas’) y Number(‘8 manzanas’).
 Comprueba el tipo de dato del resultado de las conversiones del punto anterior.
 Comprueba el resultado de convertir a booleano una cadena de caracteres y un
valor numérico.

4.3. Operadores
Un operador es básicamente un símbolo matemático que puede actuar sobre dos valores
(o variables) y producir un resultado. Los tipos de operadores más comunes en JavaScript son:

 Operadores aritméticos: Sirven para realizar operaciones aritméticas con valores y/o
variables.
 Operadores comparativos: Para establecer comparaciones entre valores y/o variables.
 Operadores lógicos: Se utilizan para establecer condiciones.

9
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

Operadores aritméticos

+ Adición Asigna a un resultado la suma de otros dos

numerales ó concatena cadenas. Si se intenta sumar
un número y una cadena, JavaScript convierte el
primero a cadena y después las concatena
- Sustracción Resta
* Multiplicación Producto
/ División asigna al resultado el cociente de dos numerales
% Módulo de división asigna al resultado el resto de la división de dos
numerales
++ Incremento Incrementa en una unidad
-- Decremento Decrementa en una unidad
Solo el operador Adición tiene una función distinta de las aritméticas, para el resto, si se
emplean tipos de variable que no sean números, el resultado es NaN (Not a Number).

Operadores lógicos

> Mayor que var1 > var2 true si var1 mayor que var2
< Menor que var1 < var2 true si var1 menor que var2
== Igual a var1 == var2 true si var1 igual que var2
!= Distinto de var1 != var2 true si var1 distinta que var2
>= Mayor o igual a var1 >= var2 true si var1 mayor o igual que var2
<= Menor o igual que var1 <= var2 true si var1 menor o igual que var2
=== Idéntico a var1 === var2 true si ambas son idénticas, es decir,
si sus valores coinciden y son del mismo tipo de
variable
!== No idéntico a var1 !== var2 true si no son idénticas, es decir, si
sus valores no coinciden o no son del mismo tipo de
variable
Hay que tener en cuenta que:

 == y !=: Comparan las series de caracteres variables, y su orden.

 >, <, >=, <=: Comparan el orden alfabético de los caracteres, para ver cuál sería
anterior, característica que se iguala a mayor.

Operadores condicionales

! NOT true si no se cumple la condición

&& AND true si se cumplen ambas condiciones
|| OR true si se cumple una de las dos condiciones
En los casos de AND y OR, cada condición que se establezca deberá ir entre paréntesis.

if((var1>0) && (var2<0)) { … }

10
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

EJERCICIO 5

Añade la función comprobarOperadores al fichero JavaScript de tu proyecto. Tendrá que

mostrar por pantalla lo siguiente:

 Habiendo declarado las variables var1 y var2 como cadenas de texto con
valor(comparar diferentes resultados, se puede meter todo en un mismo alert):
o var1==var2.
o var1!=var2.
o var1<var2.
o var1>var2.
o var1<=var2.
o var1>=var2.
 Ahora, siendo var3 un valor numérico, y var4 una cadena cuyo texto son números,
compara los resultados si pones lo siguiente:
o var3==var4.
o var3===var4.
 Siendo var5, var6 y var7 valores numéricos:
o Mostrar el resultado de var5<var6 y var6<var7.
o Mostrar el resultado de var5<=var6 y var6>var7.
o Asignar a var7 !true y mostrarlo.

11
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

5. Arrays
Un array es un tipo especial de object que se utiliza para almacenar más de un valor en
una sola variable. En un array se usan índices numéricos y en los objetos nombres.

Los arrays pueden almacenar múltiples valores bajo un mismo nombre, y se podrá acceder
a cada valor mediante un índice numérico. Las dos formas siguientes de declaración hacen
exactamente lo mismo, aunque es más simple y rápida en ejecución la primera de ellas.

var variables = ["var1","var2","var3","var4"];

var variables = new Array("var1","var2","var3","var4");
Se accede a un elemento del array indicando su posición dentro del mismo. Hay que tener
en cuenta que las posiciones empiezan en 0 y no en 1. Con la siguiente sentencia accedemos a
la posición 2 del array, que será el tercer elemento:

var num3 = variables[2];

Y se puede acceder al array completo simplemente por su nombre. Las siguientes

sentencias muestran, la primera de ellas, el valor de la posición tercera, la segunda, los valores
de la primera y la sexta y, la última, todos los valores que almacena el array:

alert(num3);
alert(variables[0] +"---"+ variables[5]);
alert(variables);
Un array puede almacenar valores de distintos tipos en cada elemento. Y pueden
almacenar objetos, funciones u otros arrays además de los tipos primitivos:

var array1 = [1,2,3,4,5];

array1[1] = ["cadena1","cadena2", "cadena3"];
array1[2] = "pepito";

5.1. length, sort, push, pop

La propiedad length devuelve el número de elementos que tiene el array:

var array1 = ["pepe","juan","pedro"];

[Link];

Mediante la función sort(), se ordena un array alfabéticamente, por lo que no servirá para
ordenar arrays con valores numéricos(si los hay, los tratará como cadenas de números).

Y, utilizando la función push(), podemos meter un nuevo elemento en el array.

var deportes = ["futbol", "baloncesto", "balonmano", "tenis"];

[Link]("padel");
[Link]();
Aunque podemos añadir un nuevo elemento utilizando la propiedad length:

deportes[[Link]] = "atletismo";

12
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

Y para eliminar la última posición de un array, se puede hacer uso de la propiedad pop,
que devolverá el valor eliminado:

[Link]();

EJERCICIO 6

Implementa una función donde:

 Primero se creará un array vacío.

 Después se pedirá al usuario, repetidamente, que introduzca un número(que
podrá ser positivo, negativo o 0) y un nombre de persona.
 Cada vez se preguntará al usuario si se va a añadir el valor indicado:
o Si acepta que se añada:
 Si ha introducido un número mayor o igual que 0 se incluye el
nombre en el array en la posición indicada.
 Si el número es negativo, se añadirá al final del array sin
sobrescribir ninguno.
o Si no lo acepta:
 Si el número es mayor o igual que 0, se eliminará el valor del
elemento que se encuentre en la posición indicada ignorando el
introducido.
 Si es negativo, se eliminará el primero.
 La ejecución terminará cuando , en lugar de un número, se introduzca una cadena.
Antes de finalizar se mostrará el contenido final del array por consola.

5.2. slice, splice

El método slice() devuelve, en un nuevo array, los elementos contenidos en el array de
acuerdo a los parámetros que se le pasan, que serán uno o dos valores numéricos. El array
original no se verá modificado.

 El primer valor indicará la posición a partir de la cual empieza la extracción. Si es

negativo, indica un desplazamiento desde el final del array. Si, por el contrario, es
mayor a la longitud del array, se devuelve un array vacío. Si es omitido el valor por
defecto es 0:

var deportes2 = [Link](1,3);

var deportes3 = [Link](-2);
 El segundo valor indicará hasta donde se extrae, pero sin incluir ese último
elemento. Si es negativo, indicará un desplazamiento desde el final de la
secuencia. Si no se incluye o es mayor a la longitud del array, slice extrae hasta el
final del array ([Link]).

var deportes4 = [Link](0,-2);

13
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

Mediante el método splice() se puede cambiar el contenido de un array eliminando

elementos existentes y/o agregando nuevos:

 Supresión: Se puede eliminar elementos de un array indicando la posición del

primer elemento a eliminar y el número de elementos:

[Link](1, 2);
 Inserción o reemplazo: Se puede insertar elementos en un array indicando la
posición donde se van a agregar, el número de elementos a eliminar y el elemento
a insertar. Opcionalmente, se puede especificar una cuarta, quinta, o cualquier
número de otros parámetros a insertar:

[Link](3, 0, "frontón", "bailes de salón");

[Link](2,2, "halterofilia");
[Link](2, 1, "natación", "waterpolo");
EJERCICIO 7

 Prueba todos los ejemplos del apartado de arrays, sacando por consola el
resultado de cada cambio.
 Si se explica algún caso que no esté en los ejemplos incluirlo también.
 Implementa una función que incluya en un array la siguiente lista: tela, bies, hilo,
tijeras, máquina de coser, botón. Después, utilizando las funciones vistas:
o Elimina el bies. Muestra el array por consola.
o Añade, entre hilo y tijeras, hilo torzal. Muéstralo de nuevo por consola.
o Quita tijeras y sustitúyelas por cúter rotatorio y mesa de corte. Una vez
mas, muestra el array por consola.
o Crea, a partir del primer array, dos nuevos donde el primero incluya los
tres primeros elementos del original y el segundo del cuarto al sexto.
o En el segundo de los nuevos array creados:
 Incluye, en la primera posición, remalladora.
 Incluye, en la penúltima posición, cinta métrica.
o Muestra por consola el contenido de los tres arrays.

14
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

6. Estructuras de control de flujo

Antes de ver las distintas estructuras, vamos a ver el concepto de bloque. Se trata de una
estructura que se utiliza para agrupar sentencias. Se delimitarán por un par de llaves.

Las variables que declaramos con var, no tienen alcance de bloque, es decir, si declaro
dentro de un bloque una variable, al salir de ese bloque el valor seguirá siendo visible:

var var1 = 1;
{
var1 = 2;
}
alert(var1); // mostrará 2

En resumen, la declaración con var define una variable en el ámbito local actual (función) y
se hereda a elementos descendientes por referencia(bloques por ejemplo). Si la variable es
declarada fuera de una función, la variable será global.

Sin embargo, si declaramos las variables con let o const, si tendrán alcance de bloque. Si
declaramos una variable con let o const dentro de un bloque, la variable pertenece solo a ese
bloque y no será visible para la función que lo contenga.

La diferencia entre estas dos última opciones radica en que con const no es posible
reasignar la variable. Si se intenta reasignar una variable constante se obtendrá un error tipo
TypeError:

const i = 0;
i = 1; //Al hacer esta asignación dará un error de tipo TypeError

Que no se puedan reasignar no es que sean inmutables. Si el valor de una variable

constante es «algo» mutable, se pueden cambiar los valores de sus elementos. Por ejemplo:

const user = { name: 'Juan' };

[Link] = 'Manolo';

Se puede concluir que, en general, let se usaría dentro de un bloque, función o ámbito
global, const para variables que no van sufrir reasignación y var para usos esporádicos.

6.1. If / if..else
Si se cumple la condición especificada, se ejecutará el bloque entre llaves. En caso de que
no se cumpla, se ejecutará el bloque indicado por el else (en caso de que se haya incluido).
Para una única sentencia, los paréntesis no son obligatorios, pero si recomendables:

if (condición) {
sentencia1;
}else {
sentencia2;
sentencia3;
}

15
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

6.2. switch
Permite listar una serie de bloques de enunciados que se ejecuten dependiendo del valor
de una variable. El valor se comprobará usando comparación estricta, ===:

switch (variable){
case 1:
sentencias;
break;
…
case n:
sentencias;
break;
default:
sentencias;
break;
}

Si no se incluye algún break, el programa continuará ejecutando el siguiente case. Si

ponemos dos case seguidos(sin sentencias ni break entre ellos), en ambos casos se ejecutará la
sentencia detallada para el segundo de ellos:

switch (var1) {
case 'uno':
case 'dos':
case 'tres':
case 'cuatro':
[Link]('menor que 5');
break;
case 'cinco':
case 'seis':
[Link]('mayor o igual que 5');
break;
}

6.3. for / for…in

La sintaxis de un blucle for es la siguiente:

for(expresionInicial ; condición ; variaciónContador){

sentencias;
}
for (var i = 0; i < 9; i++) {
n += i;
}

16
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

La sentencia for..in, por su parte, se suele utilizar para recorrer un objeto pasando por
cada una de sus propiedades para actuar sobre ellas de alguna manera. Además, como en
Javascript los arrays son también objetos, se podrá utilizar para iterar por cada uno de los
valores de estos últimos.

En este ejemplo, utilizamos for..in para mostrar datos de un objeto. Se mostrará el nombre
de la propiedad, para mostrar su valor habría que acceder a través de ese nombre utilizándolo
como índice.

var obj1 = {
var1 : 1,
var2 : 2,
var3 : 3
}
for( var property in obj1 ){
[Link]( property );
}

En este segundo ejemplo, vemos como recorrer un array:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Do

mingo"];
for(i in dias) {
alert(dias[i]);
}

Un array se puede recorrer también haciendo uso de su método foreach(), donde para
cada elemento se hará una llamada a la función que se indique(más adelante, cuando veamos
funciones, veremos como declarar la función en cuestión):
[Link](element => [Link](element));

6.4. do…while
El bucle do…while tiene el mismo comportamiento que un bucle for solo que primero se
ejecutan las sentencias y después se evalúa la condición, por lo que siempre se va a ejecutar
una vez como mínimo.

do{
sentencias
} while (condición);

En este caso, habría que declarar el contador fuera del bloque para poder utilizarlo.

17
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

6.5. while
Mismo comportamiento que en el caso anterior, do…while, salvo que en este caso la
sentencia se evalúa antes de la ejecución de cualquier sentencia.

while (condicion) {
sentencias
}

EJERCICIO 8

Teniendo en cuenta que se puede utilizar la función prompt() para pedir valor por pantalla
al usuario, utiliza las diferentes estructuras de control para lo siguiente:

 Crea un array con el nombre de los doce meses. Muéstralos por pantalla o por
consola uno a uno.
 Pide al usuario que introduzca un número. Calcula el factorial de ese número y
mostrarlo por pantalla. ** prompt() recoge cadenas siempre, por lo que utiliza la
función Number() para pasarlo a valor numérico.
 Pide al usuario que introduzca su edad, y dependiendo del valor que introduzca
muestra por pantalla una recomendación de Netflix:
o Si es menor de 6 años: Patrulla Canina.
o Si está entre 7 y 13 años: Alexa y Katie.
o Si tiene entre 13 y 18: Anne with an E
o Si tiene entre 19 y 35: Stranger Things
o Si tiene más de 35: Sherlock
 Crea un bucle del que solo se salga si el usuario mete un número comprendido
entre 45 y 72.

6.6. Instrucciones break y continue

En la ejecución de un bucle for, while o do-while, se puede modificar la secuencia lógica de
ejecución mediante el uso de las instrucciones break y continue.

La instrucción break dentro de un bucle hace que la ejecución del mismo se interrumpa
inmediatamente y continúe el programa inmediatamente a continuación del final del bucle.

Por su parte, el uso de la instrucción continue en un bucle hace que se retorne a la

cabecera del bucle, volviendo a ejecutar la condición o a incrementar los índices cuando sea un
bucle for, permitiendo saltarse recorridos del bucle.

18
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

En este primer ejemplo se pide al usuario la introducción de la palabra “Coche”,

permitiéndole 5 intentos. En caso de introducir la palabra correcta no se seguirá ejecutando:

var numVeces = 1;
var palabra;
while (numVeces <= 5) {
palabra = prompt("Escribe la palabra Coche ");
[Link]("Intento número " + numVeces);
numVeces++;
if (palabra == "Coche") {
[Link](palabra);
break;
}
}

En el siguiente ejemplo, dependiendo de la elección del usuario se ejecutarán las

sentencias siguientes o se volverá a la cabecera del bucle:

var eleccion;
for (var i = 0; i < 10; i++) {
[Link](" Valor del contador: " + i);
eleccion = confirm("¿Terminar la ejecución de la iteración?");
if (eleccion)
continue;
[Link]("Se realiza un incremento extra del contador");
i++;
}
EJERCICIO 9

 Prueba, en la consola del navegador, los dos ejemplos de las sentencias break y
continue.
 Define una función donde se pida, repetidamente, al usuario que introduzca un
color. Utiliza las sentencias break y continue donde corresponda:
o Si el color introducido es el rojo, la ejecución saldrá del bucle.
o Si el color indicado es el verde, se volverá al comienzo del bloque sin
ejecutar las sentencias siguientes.
o Si se trata de cualquier otro color, se incluirá éste en un array. Si el color
ya estuviera se repite.
o Tras terminar la ejecución del bucle se mostrará por pantalla el número de
veces que el usuario ha introducido un color y todos los valores
almacenados en el array.

19
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

7. Funciones
Una función es un fragmento de código que puede ser invocado para realizar tareas y/o
devolver un resultado. Esta división del código en funciones es efectiva a la hora de resolver
problemas complejos. Además una función se puede llamar tantas veces como se desee, lo
cual evita repetición de código, y permite un mantenimiento de código mas sencillo.

En JavaScript, las funciones son objetos, es decir, se pueden manipular y transmitir al igual
que cualquier otro objeto. Concretamente son objetos de tipo Function.

Definición de una función

Para poder hacer uso de una función, primero hay que definirla de la siguiente manera:

function función (par1, par2, …,parN) {

sentencias…
}
Siendo parN los parámetros que se le pasan a la función, en caso de tener parámetros de
entrada. Una función declarada de esta manera se cargará antes de la ejecución del código.

También se podrá crear una expresión de función(una función anónima) que se asigna a
una variable. En este caso, la función no estará disponible hasta que no se ejecute esa línea:

var variable = function(){

sentencias…
}

Parámetros de entrada y salida

Si una función va a tener parámetros de entrada, éstos se mostrarán en la definición
únicamente con el nombre, no se indicará el tipo. En Javascript los parámetros siempre se
pasan por valor, lo que quiere decir que si dentro de la función se modifica el valor del
parámetro de entrada, ese cambio será local y no se verá reflejado en el fragmento de código
desde el que se haya llamado a la función.

Si la función va a devolver algún valor cuando termine su ejecución, simplemente se hará

uso de la palabra return, no hay que declarar en la cabecera ningún tipo de datos del retorno.

function suma(a,b,c){
return a+b+c;
}
function principal() {
var suma = Suma(4,6,2);
}
Si a una función se le pasan más parámetros de los que ha definido, se ignorarán los
parámetros sobrantes. Por el contrario, si se pasan menos parámetros de los necesarios,
JavaScript asignará valor undefined a los parámetros de los que falta el valor y se ejecutará sin
que surja ningún mensaje de error (aparte de los posibles resultados extraños que esto
pudiera ocasionar).

20
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

EJERCICIO 10

 Implementa una función llamada calcularPrecioFinal que:

o Reciba como parámetro el precio de un artículo y el tipo de IVA que se le
va a aplicar.
o Para el tipo de IVA se pasará una G si se trata del tipo General, una R si se
trata del reducido y una S si se trata del súper reducido.
o La función realizará el cálculo, aplicando el IVA que corresponda
dependiendo del tipo indicado, y devolverá el importe final con el
impuesto ya aplicado.
 La ejecución de la función se desencadenará cuando el usuario pulse el botón
Pagar. Para ello:
o Se capturará en el botón el evento onclick, que cuando ocurra dicho
evento se llamará a una función inicial llamada pagar.
o La función Pagar no tendrá argumentos ni devolverá ningún valor.
o Ésta función pedirá al usuario(recuerda, prompt()) que introduzca el precio
del artículo, y después le pedirá el tipo de IVA.
o Con esos dos valores llamará a la función calcularPrecioFinal.
o Se mostrará al usuario el precio final mediante un alert().

21
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

8. DOM
DOM(Document Object Model) permite identificar cada elemento de una página web para
poder manipularlo y modificar sus propiedades, e incluso mostrarlo o no dependiendo de las
necesidades de cada momento y situación.

El W3C definió el estándar DOM que define qué elementos se considera que conforman
una página web, cómo se nombran, cómo se relacionan entre sí, cómo se puede acceder a
ellos, etc. Cuando se carga una página web, el navegador crea un modelo de objetos de la
misma. El modelo se construye como un árbol de objetos, donde cada elemento es un nodo:

A partir de este modelo, JavaScript puede cambiar los elementos y atributos de la página,
cambiar los estilos CSS, eliminar elementos y atributos HTML, añadir nuevos elementos y
atributos, reaccionar a todos los eventos que se produzcan en la página, crear nuevos eventos
HTML, etc.

El estándar establece Core DOM para todo tipo de documentos, XML DOM para
documentos XML y HTML DOM para documentos HTML.

HTML DOM define:

 Los elementos HTML como objetos.

 Las propiedades de todos los elementos.
 Los métodos para acceder a todos los elementos.
 Los eventos de todos los elementos.

Los métodos de HTML DOM son acciones que se pueden ejecutar sobre elementos HTML,
mientras que las propiedades son valores de elementos HTML que se puede establecer o
eliminar.

El modelo de objetos de HTML puede ser accedido mediante JavaScript(entre otros

lenguajes) teniendo en cuenta que todos los elementos son nodos.

22
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

8.1. Métodos y propiedades básicos

Objeto document
El objeto document representa a la página web. Si se quiere acceder a cualquier elemento
de una página HTML, se accede a él siempre a través del objeto document.

getElementById()
La manera más habitual de acceder a un elemento HTML es a través de su id:

[Link]("div1");

Con esto se recupera el elemento completo, no solo su valor. Para poder recuperarlo
habría que utilizar otros métodos o propiedades sobre el elemento recuperado en primera
instancia.

getElementsByTagName()
Mediante este método, se puede recuperar una lista de elementos con un nombre
determinado. Si se le pasa como argumento la cadena "*" se estarán pidiendo todos los
elementos.

[Link](“h1”);
[Link](“h1”)[0];

getElementsByClassName()
Similar al anterior, permite recuperar una lista de elementos a partir de uno o varios
nombre de clase. Si se pone más de uno se separarán por espacios.

getElementsByClassName se puede llamar sobre cualquier elemento, no solo sobre

document. El elemento sobre el que se llama será usado como la raíz de la búsqueda.

var elementos = [Link]("h1Clase");

var elemento = [Link]("h1Clase")[1];

innerHTML
La forma más fácil de acceder al contenido de un elemento es a través de ésta propiedad,
ya sea para recuperar el contenido o para cambiarlo:

var contenido = [Link]("div1").innerHTML;

[Link]("div1").innerHTML = "Cambio el contenido";
Esta propiedad es aplicable a cualquier elemento html, incluso <html> y <body>.

Es importante recordar que innerHTML hace referencia a todo el contenido de un

elemento, por lo que si se asigna algo nuevo como contenido de un elemento, este algo
sustituirá a todo el contenido anterior.

23
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

Añadir, modificar y eliminar atributos

A través del método setAttribute() se puede modificar el valor de un atributo de un
elemento HTML. Si el atributo no estaba definido previamente para el elemento, se creará con
el valor indicado.

[Link]("boton1").setAttribute("requiered","");
[Link]("texto1").setAttribute("value","Primero");
Por su parte, getAttribute() devuelve el valor del atributo que se le haya pasado como
parámetro.

var value = [Link](“texto1”).getAttribute(“value”);

Por último, removeAttribute() elimina el atributo que se indique como parámetro.

[Link]("H1")[1].removeAttribute("value");

Añadir y eliminar elementos

Haciendo uso del método createElement(), se puede crear un nuevo elemento HTML para
añadir a la página web. Se le pasará como parámetro el nombre del elemento.

El elemento creado no se añade automáticamente al documento, hay que añadirlo a

través del método appendChild().

var titulo = [Link]("h2");

[Link] = "Título 2";
[Link](titulo);
Con appendChild el nuevo elemento se añadirá como último hijo del elemento padre. Si se
quiere insertar el elemento en cualquier otra posición, se puede hacer uso de métodos como
insertBefore(), el cual permite añadir un nuevo nodo como hijo del elemento colocándolo
antes del nodo hijo pasado como segundo parámetro.

var titulo0 = [Link]("h2");

[Link] = "Título Anterior";
[Link](titulo0, titulo);
Si, por el contrario, lo que se quiere es eliminar un elemento ya existente en el
documento, se puede hacer utilizando el método removeChild(). Este método se debe invocar
sobre el elemento padre del elemento a eliminar.

var objeto = [Link]("seccion1");

var eliminado = [Link](objeto);
Si se mantiene una referencia al elemento eliminado, más adelante es posible restaurarlo.

Se puede dar el caso en que sea necesario sustituir un elemento por otro. Esto es posible
utilizando el método replaceChild().

[Link](nuevoElemento, elementoViejo);

24
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

EJERCICIO 11

Crea un documento HTML que contenga únicamente un título.

 Utilizando las propiedades y métodos DOM que hemos visto, introduce en el

documento creado una lista ordenada con los valores Uno, Dos y Tres.
 Una vez creada la lista y mostrada en el documento, sustituye el elemento Tres por
un elemento que muestre el valor Cuatro.
 Dentro del elemento Cuatro, añadirle un hijo de tipo párrafo con el texto “Soy hijo
de Cuatro”.
 Cambiar el contenido del título por “He creado una lista”

8.2. Cambiar el estilo a un elemento

Para cambiar el estilo de un elemento en un documento HTML, se puede hacer uso de la
propiedad style y, a través de ella, acceder a la propiedad concreta a la que se quiera dar valor.

[Link]("titulo1").[Link] = "green";
[Link]("titulo1").[Link] = "2px green dotted";
Normalmente no se asignan estilos concretos a un elemento a través de DOM, sino que se
añaden(o eliminan) valores al atributo class del elemento en cuestión:

[Link]("class", "nombreDeClase");
[Link] = "nombreDeClase2";
En el ejemplo anterior se modifica el valor del atributo class, pero es posible añadir o
quitar una clase concreta sin eliminar el resto:

let titulo1 = [Link]("tit1");

[Link]("claseColor");
[Link]("claseNegrita");
classList es una propiedad de un elemento que no todos los navegadores soportan, por lo
que hay que tener cuidado si se pone en producción.

EJERCICIO 12

Siguiendo con la página creada en el ejercicio 11, se va a trabajar con el cambio de estilo.
Para llevar a cabo todos los cambios de estilo haz uso de clases, no asignes estilos de manera
individual.:

 Añade tres botones a la página: botón 1, botón 2 y botón 3.

 Cuando se pulse sobre el botón 1:
o Se cambiará el color del texto del párrafo a rojo y a negrita.
o Se dará color de fondo amarillo a los elementos de la lista ordenada y
cambiará su color de texto a azul.
o El título pasará a tener sombra naranja y rosa.
 Cuando se pulse el botón 2:
o Se cambiará el color del texto del párrafo a amarillo, el fondo pasará a ser

25
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

negro y aparecerá un borde punteado rojo.

o Se dará color de fondo rosa a los elementos de la lista ordenada y el texto
aumentará de tamaño.
o El título será de color azul claro y cursiva.
 Cuando se pulse el botón 3, todos los elementos volverán a sus estilos originales,
es decir, dejarán de tener estilo.

8.3. Objeto window y navegación entre elementos

Hemos visto que DOM considera el documento HTML como un árbol, por ello podemos
recorrer todos sus objetos(también llamados nodos) teniendo en cuenta las relaciones entre
los mismos. Las relaciones son jerárquicas y por ello podemos hablar de objetos padre, hijos y
hermanos.

Hay un objeto que no obedece a estas reglas, se trata del objeto window. Éste representa
la ventana que contiene un documento DOM, por lo que no es parte del árbol DOM, es más, el
árbol DOM será hijo del objeto window. El objeto window al que pertenece un documento
puede ser obtenido usando la propiedad [Link].

Para los demás elementos, aplican las reglas siguientes:

 El objeto primero del árbol se denomina objeto raíz.

 Todos los objetos del árbol tendrá un padre(y solo uno) excepto por el elemento
raíz, que no tendrá padre.
 Cada objeto puede tener un número determinado de hijos.
 Hermanos son nodos con el mismo padre.

Para navegar entre objetos se puede utilizar las siguientes propiedades:

 parentNode: Objeto padre del elemento en cuestión.

 childNodes[numeroNodo]: Nodos hijos del elemento.
 firstChild: primero hijo del elemento.
 lastChild: último hijo del elemento.
 nextSibling: siguiente hermano.
 previousSibling: hermano anterior.

Teniendo en cuenta lo anterior, vamos a ver diferentes maneras de acceder a los objetos y
su contenido.

Nodos de tipo texto

Ya hemos visto que podemos acceder al contenido de un elemento, o establecerlo,
mediante la propiedad innerHTML, pero esta propiedad no necesariamente nos devolverá un
texto. Si lo aplicamos a elementos que tengan otros elementos hijo, nos devolverá el conjunto
de los mismos.

26
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

Si por ejemplo tenemos:

<h1 id="tit1">Título1</h1>

Para recuperar el texto “Título 1” podemos hacer:

[Link]("tit1").innerHTML;
[Link]("tit1").[Link];
[Link]("tit1").childNodes[0].nodeValue;

Y las tres opciones devolverán lo mismo. Nota que el texto se considera el contenido de un
nodo hijo(nodeValue), el cual será un nodo de tipo texto.

Y sabiendo que el texto que contiene un elemento realmente es otro objeto de tipo texto,
también podemos crear ese objeto mediante createTextNode(), y añadirlo a cualquier otro
como un hijo, haciendo:

var textNode = [Link]("nuevo objeto de tipo texto");

var nodoN = [Link]("p").appendChild(textNode);
[Link](nodoN);

Añadir elementos en cualquier posición

Hemos visto que podemos añadir un elemento mediante el uso del método appendChild().
Dicho método, añade el elemento como último hijo del padre. También se ha mencionado que
si lo que se quiere es añadirlo en cualquier otra posición, podemos hacerlo con el método
insertBefore().

Si como primer argumento de insertBefore() se le pasa un elemento ya existente en el

documento, éste cambiará de posición pero no se duplicará.

Si como segundo elemento se le pasa null, el nuevo elemento se añadirá como último hijo
del padre.

var elem1 = [Link]("li");

var text1 = [Link]("nuevo punto de lista");
[Link](text1);
var lista = [Link]("ol1");
var segundoPunto = [Link]("li2");
//Se añade el nuevo punto de la lista como segundo punto,
//relegando al elemento que era antes 2º, a la tercera posición
[Link](elem1, segundoPunto);
//A continuación se mete como último punto el primero, pero no se duplica,
//sino que deja de estar en la primera posición
var elem2 = document. getElementById("li1");
[Link](elem2, null);

27
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

EJERCICIO 13

Copiar el resultado del ejercicio 11 en otro fichero JavaScript. Sobre la copia realizar las
modificaciones necesarias para que, una vez creada la lista, se ejecute un bucle en el que se
realice lo siguiente:

 Si se trata de la primera iteración, que se pida por pantalla un texto y se añada

como nuevo elemento en la primera posición de la lista creada.
 A partir de la segunda iteración:
o Si se trata de una iteración par, que se pida por pantalla un texto y se
añada como nuevo elemento en la tercera posición de la lista.
o Si se trata de una iteración impar, que se cambie el elemento que se
encuentre en primera posición a la segunda.

28
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

9. Eventos
Los eventos son acciones u ocurrencias que suceden y de los que el sistema, aplicación o
página que se está desarrollando avisa, por lo que, si es necesario, se puede definir una
respuesta a los mismos.

Los eventos se lanzan en la ventana del navegador, y suelen estar relacionados con un
elemento concreto de la misma que puede ser un elemento solo, un grupo de elementos, el
documento HTML cargado en la pestaña o la página entera.

A continuación se detallan los eventos más comunes:

 blur: Ocurre cuando un elemento pierde el foco.

 change: Cuando se modifica un elemento.
 click: Pulsar y soltar el botón, sobre cualquier elemento.
 focus: Cuando un elemento obtiene el foco.
 load: Supone que la página se ha terminado de cargar.
 mouseout: Cuando el cursor sale de un elemento.
 mouseover: Cuando el cursor entra de un elemento.
 select: Ocurre cuando se selecciona un texto.
 reset: Evento que se da cuando se resetean los valores de un formulario.
 submit: Ocurre cuando se envía un formulario.

No todos los eventos tienen acción por defecto, pero si se quiere dar una o cambiar la
existente, hay que capturarlos. Para capturar un evento sobre un objeto, se asigna una función
específica para manejar el evento cuando este ocurra.

Se pueden asignar eventos a un elemento HTML, añadiendo un atributo de evento al

elemento. El atributo de evento se conforma con el nombre del evento que se quiera capturar
precedido por la palabra on:

<button ">texto1</button>

<form …</form>

EJERCICIO 14

Crear una página HTML con un formulario que pida el nombre de usuario, la contraseña, la
edad, el sexo mediante radiobuttons y que tenga botones de limpiar y enviar formulario:

 Una vez que la página haya terminado de cargar, mostrar un mensaje por pantalla
que pregunte al usuario si es mayor de edad.
o En caso de que lo sea, introducir un nuevo campo llamado nº cuenta
debajo del campo edad.
 Cuando el foco se ponga en el campo contraseña, el borde del campo cambia de
color.

29
 Desarrollo de Aplicaciones Web Lenguajes de Marcas

 Cuando el ratón pase por encima de cualquier nombre de los campos del
formulario, se cambiará el tamaño de letra a una mayor.
 Cuando se envíe un formulario, se capturará el evento para que, antes de enviarlo
definitivamente, se pida confirmación al usuario:
o En caso de que cancele no se hará nada.
o En caso de que acepte el envío, realizarlo. Busca la manera en que se
lanzaría de nuevo el envío del formulario.

30