DESARROLLO DE APLICACIONES WEB EN ENTORNO CLIENTE

UD2. SINTAXIS DE JAVASCRIPT

1. INTRODUCCIÓN

Javascript es un lenguaje de programación que inicialmente nació como un lenguaje que permitía
ejecutar código en nuestro navegador (cliente), ampliando la funcionalidad de nuestros sitios web.

Una de las versiones más extendidas de Javascript moderno, es la llamada por por muchos
Javascript ES6 (ECMAScript 6), también llamado ECMAScript 2015 o incluso por algunos llamado
directamente Javascript 6.

Aunque en este módulo nos centramos en la ejecución de Javascript en el navegador, lo aprendido

puede ser utilizado para otras implementaciones de Javascript.

2. HOLA MUNDO Y COMENTARIOS

Para añadir JavaScript al código HTML se usa la etiqueta SCRIPT.

Este puede estar en cualquier lugar de la página. El código se ejecuta en el lugar donde se
encuentra de forma secuencial a medida que el navegador lo va encontrando.

<SCRIPT LANGUAGE="JavaScript">
Aquí va el código
</SCRIPT>

En Javascript los comentarios se pueden hacer con // para una línea y con /* */ para varias líneas.
Asimismo, desde Javascript es posible escribir mensajes en la consola de desarrollo mediante la
orden “[Link](texto)”.
Este ejemplo podría ser un pequeño hola mundo que al ejecutarse se mostrará en la consola de
desarrollo. Ejemplo con “[Link]” y comentarios de linea y multilínea.

<SCRIPT LANGUAGE="JavaScript">
[Link] ("Hola mundo");
// Esto es un comentario en Javascript de una línea
/* Esto es un comentario en
Javascript multilínea */
</SCRIPT>

Otra vía para mostrar información al usuario desde una ventana, es el comando “alert(texto)”.

<SCRIPT LANGUAGE="JavaScript">
alert("Hola mundo");
</SCRIPT>

Hay una forma mucho más práctica y ordenada de usar código Javascript, la inclusión de ficheros.
Se pueden incluir uno o varios ficheros con código Javascript en nuestro documento HTML. Se
pueden incluir tantos como se desee. Esta es la forma más adecuada para trabajar con código
Javascript.
Un ejemplo de inclusión de ficheros.

<script type="text/javascript" src="[Link]"/>

Para incluir varios ficheros empleamos la sintaxis:

<script type="text/javascript" src="[Link]"></script>

<script type="text/javascript" src="[Link]"></script>

3. VARIABLES, CONSTANTES Y ARRAYS

En este punto hablaremos de variables, constantes y arrays. Antes de empezar, comentar que es
recomendable mantener un estilo de nombramiento de variables.
3.1 Ámbito de variables y constantes
Antes de comenzar, vamos a hablar del ámbito de variables. El ámbito de variables en un lenguaje
de programación indica en qué lugares del programa puede ser accedida una variable/constante.
Al comentar cada uno de los tipos, definiremos en qué ámbito existen.
3.2 Variables

Las variables son elementos del lenguaje que permiten almacenar distintos valores en cada
momento. Se puede almacenar un valor en una variable y consultar este valor posteriormente.
También podemos modificar su contenido siempre que queramos.

Para declarar las variables en JavaScript podemos utilizar let o var, según el ámbito donde
queramos que sea accesible.

● let: let permite declarar una variable que sea accesible únicamente dentro del bloque
donde se ha declarado (llamamos bloque al espacio delimitado por { }).
● var: var permite declarar una variable que sea accesible desde todos los lugares dentro de
la función donde ha sido declarada. Si una variable con var se declara fuera de cualquier
función, el ámbito de esta son todas las funciones del código.
● Variables sin declarar: Javascript nos permite usar variables no declaradas. Si hacemos
esto, será equivalente a declararlas con var fuera del código, es decir, serán variables
accesibles por cualquier función.

function ejemplo(){
ejemplo=3; // Equivale a declararla fuera de la función con var
if (ejemplo === 3){
var variable1 = 1;
let variable2 = 2;
}
[Link](variable1); // variable1 existe en este lugar
[Link](variable2); // variable2 no existe en este lugar
}
3.3 Tipos de datos

Los principales tipos de datos que puede contener variables en Javascript son:

● Numéricos (tipo “number”): puede contener cualquier tipo de número real (0.3, 1.7, 2.9) o
entero (5, 3, -1).
● Enteros grandes (tipo “bigint”): pueden contener enteros con valores superiores a 2^53 -1.
Se pueden nombrar escribiendo una letra “n” al final del entero. No pueden utilizarse con
la mayoría de los operadores matemáticos de Javascript.
● Booleanos (tipo “boolean”) : puede contener uno de los siguientes valores: true, false.
● Cadenas (tipo “string”): cualquier combinación de caracteres (letras, números, signos
especiales y espacios). Las cadenas se delimitan mediante comillas dobles (“Lolo”,”lalO”).
Para concatenar cadenas puede usarse el operador “+”.

El tipo de una variable puede comprobarse usando la estructura typeof variable===”tipo”.

let edad=23, nueva_edad, incremento=4;

const nombre="Rosa García";
[Link](typeof incremento===”number”)
nueva_edad=edad+incremento;
[Link](nombre+ " tras "+incremento +" años tendrá "+ nueva_edad);

Asimismo, existen otros tipos que Javascript considera primitivos: “undefined”, “null”, “symbol”,
“object” y “function”.

Todos los valores que NO son de un tipo básico son considerados objetos: arrays, funciones,
valores compuestos, etc. Esta distinción es muy importante porque los valores primitivos y los
valores objetos se comportan de distinta forma cuando son asignados y cuando son pasados como
parámetro a una función.
3.4 Coerción
Javascript es un lenguaje de tipado blando (es decir, al declarar una variable no se le asigna un
tipo), aunque internamente Javascript si maneje tipos de datos.

En determinados momentos, resulta necesario convertir un valor de un tipo a otro. Esto en JS se

llama “coerción”, y puede ocurrir de forma implícita o podemos forzarlo de forma explícita.

Por ejemplo:

let numero = 5;
[Link](numero); // Coerción implícita

En este código, ocurre una coerción implícita de número (que es de tipo number) a un tipo string,
de modo que puede ser impreso por consola. Podríamos realizar la conversión de forma explícita
de la siguiente forma:

[Link]([Link]()); // Coerción explícita

Las coerciones implícitas ocurren muy a menudo en JS, aunque muchas veces no seamos
conscientes de ello. Resulta muy importante entender cómo funcionan para poder deducir cuál
será el resultado de una comparación.

let a = "2", b = 5;
[Link]( typeof a + " " + typeof b); // string number
[Link]( a + b ); // nos muestra 25 (Coerción implícita)

En los lenguajes de tipado duro (por ejemplo, Java) se nos prohíbe realizar operaciones entre
distintos tipos de datos. Sin embargo, Javascript, no hace eso, ya que permite operar entre
distintos tipos, siguiendo una serie de reglas:
● Javascript tiene el operador === y !=== para realizar comparaciones estrictas, pero no
posee esos operadores para desigualdades (>, <, >=, <=).
● Si es posible, JS prefiere hacer coerciones a tipo number por encima de otros tipos básicos.
Por ejemplo, la expresión (“15” < 100) se resolverá como true porque JS cambiará “15”, de
tipo string, por 15 de tipo number.
● A la hora de hacer coerción a boolean, los siguientes valores se convertirán en false:
undefined, null, 0, “”, NaN. El resto de valores se convertirán en true.
Ejemplo coerción a number

// <, <=, >, <= también hacen coercion. No existe >== ni <==
let arr = [ "1", "10", "100", "1000" ];
for (let i = 0; i < [Link] && arr[i] < 500; i++) {
[Link](i);
}//0,1,2

Ejemplo donde no se hace coerción

var x = "10";
var y = "9";
[Link](x < y);// true, los dos son String y los compara como cadena

Ejemplo de coerción con undefined

let altura; // variable no definida
[Link](altura ? true : false); //Al no estar definido, false
3.5 Arrays

Un array (también llamado vector o arreglo) es una variable que contiene diversos valores. Lo
creamos simplemente con “[]” o con “new Array()” o inicializando los elementos. Podemos
referenciar los elementos de un array indicando su posición.

Los arrays poseen una propiedad llamada “length” que podemos utilizar para conocer el número
de elementos del array.

// Array definido 1 a 1
let miVector=[]; // let miVector=new Array(); es equivalente
miVector[0]=22;
miVector[1]=12;
miVector[2]=33;
//Array definido en una línea inicializando elementos
let otroArray=[1,2,"Cancamusa"]; // Valores dentro del array
[Link](miVector[1]);
[Link](otroArray[2]);
[Link](miVector + " "+[Link] ); // array y tamaño
// Array bidimensional 5x4 declarado sin rellenar
// Para saber mas de map, mirar seccion de funciones flecha
let matrizBi = new Array(5).fill().map(x => new Array(4));
// Otro array bidimensional 3x5, relleno de ceros
let otraMatrizBi = [...Array(3)].map(x=>Array(5).fill(0));
3.6 Clonando arrays (y objetos)
Los arrays en Javascript internamente almacenan referencias a donde está alojado cada objeto en
memoria, por lo cual copiar un array no es tan simple como hacer miArray=miOtroArray.
En Javascript ES6, se puede hacer una copia sencilla de los valores de un array unidimensional así:

let miArray= { ...miOtroArray };

Esta copia solo funciona con arrays unidimensionales, ya que con multidimensionales, solo copiará
las referencias de memoria de cada uno de estos.
Se pueden hacer copias completas con métodos como este, que se basa en convertir el array a
JSON y volver a obtenerlo desde JSON:

let miArrayMultidimensional =
[Link]([Link](miOtroArrayMultidimensional));

3.7 Conversiones entre tipos

Javascript no define explícitamente el tipo de datos de sus variables. Según se almacenen, pueden
ser cadenas (Entre Comillas), enteros (sin parte decimal) o decimales (con parte decimal).

Elementos como la función “prompt” para leer de teclado con una ventana emergente del
navegador, leen los elementos siempre como cadena. Para estos casos y otros, merece la pena
usar funciones de conversión de datos.

let num="100"; //Es una cadena

let num2="100.13"; //Es una cadena
let num3=11; // Es un entero
let n=parseInt(num); /* Almacena un entero. Si hubiera habido parte
decimal la truncará */
let n2=parseFloat(num2); // Almacena un decimal
let n3=[Link](); // Almacena una cadena
3.8 Constantes
Las constantes son elementos que permiten almacenar un valor, pero ese valor una vez
almacenado es invariable (permanece constante). Para declarar constantes se utiliza la instrucción
“const”. Suelen ser útiles para definir datos constantes, como el número PI, el número de Euler,
etc…
Su ámbito es el mismo que el de let, es decir, solo son accesibles en el bloque que se han
declarado.
const PI=3.1416;
[Link](PI);
PI=3; // Esto produce un error

Aunque resulta posible definir arrays y objetos usando const, no es recomendable hacerlo, ya que
es posible que su uso no sea el que pensamos.

Por ejemplo, al declarar un array/objeto, realmente lo que ocurre es que la variable almacena la
dirección de memoria del objeto/array. Si lo declaramos usando const, lo que haremos es que no
pueda cambiarse esa dirección de memoria, pero nos permitirá cambiar sus valores.

const miArray=[1,2,3]
[Link](miArray[0]); // Muestra el valor 1
miArray[0]=4;
[Link](miArray[0]); // Muestra el valor 4
miArray=[]; // Esto falla

3.9 Modo estricto “use strict”

Javascript ES6 incorpora el llamado “modo estricto”. Si en algún lugar del código se indica la
sentencia “use strict” indica que ese código se ejecutará en modo estricto:
● Escribir “use strict” fuera de cualquier función afecta a todo el código.
● Escribir “use strict” dentro de una función afecta a esa función.

Entre las principales características de “use strict” tenemos que obliga a que todas las variables
sean declaradas.

Las principales características de “use strict” son:

● No permite usar variables/objetos no declarados (los objetos son variables).
● No permite eliminar (usando delete) variables/objetos/funciones.
● No permite nombres duplicados de parámetros en funciones.
● No permite escribir en propiedades de objetos definidas como solo lectura.
● Evita que determinadas palabras reservadas sean usadas como variables (eval, arguments,
this, etc…)

Ejemplo:

"use strict";
pi=3.14; // Da error ya que pi es una palabra reservada

4. ENTRADA Y SALIDA EN NAVEGADORES

4.1 alert

El método alert() permite mostrar al usuario información literal o el contenido de variables en una
ventana independiente. La ventana contendrá la información a mostrar y el botón Aceptar.

alert("Hola mundo");
4.2 [Link]

El método [Link] permite mostrar información en la consola de desarrollo. En versiones de

Javascript de escritorio tipo NodeJS, permite mostrar texto “por pantalla”.

[Link]("Otro hola mundo");

4.3 [Link]
El método [Link], ya en desuso, escribe en el documento HTML el texto que se le pasa
como parámetro. Antes de ello la su primera ejecución elimina el contenido que ya estuviera
cargado en la página.

[Link]("Otro hola mundo más"+"<br>");

4.4 confirm

A través del método confirm() se activa un cuadro de diálogo que contiene los botones Aceptar y
Cancelar. Cuando el usuario pulsa el botón Aceptar, este método devuelve el valor true; Cancelar
devuelve el valor false. Con ayuda de este método el usuario puede decidir sobre preguntas
concretas e influir de ese modo directamente en la página.

let respuesta;
respuesta=confirm ("¿Desea cancelar la suscripción?");
alert("Usted ha contestado que "+respuesta);
4.5 prompt

El método prompt() abre un cuadro de diálogo en pantalla en el que se pide al usuario que
introduzca algún dato. Si se pulsa el botón Cancelar, el valor de devolución es false/null. Pulsando
en Aceptar se obtiene el valor true y la cadena de caracteres introducida se guarda para su
posterior procesamiento.

let provincia;
provincia=prompt("Introduzca la provincia ","Cantabria");
alert("Usted ha introducido la siguiente información "+provincia);
[Link]("Operación realizada con éxito");

5. OPERADORES

Combinando variables y valores, se pueden formular expresiones más complejas. Las expresiones
son una parte clave en la creación de programas. Para formular expresiones utilizamos los
llamados operadores. Pasamos a comentar los principales operadores de Javascript.
5.1 Operadores de asignación
Los operadores de asignación se utilizan para asignar valores a las variables. Algunos de ellos,
además de asignar el valor, también incluyen operaciones (Ejemplo += asigna y suma).

Operador Descripción

= Asigna a la variable de la parte izquierda el valor de la parte derecha.

 += Suma los operandos izquierdo y derecho y asigna el resultado al operando
izquierdo.

-= Resta el operando derecho del operando izquierdo y asigna el resultado al

operando izquierdo.

*= Multiplica ambos operandos y asigna el resultado al operando izquierdo.

/= Divide ambos operandos y asigna el resultado al operando izquierdo.

Ejemplo:

let num1=3;
let num2=5;
num2+=num1;
num2-=num1;
num2*=num1;
num2/=num1;
num2%=num1;

5.2 Operadores aritméticos

Los operadores aritméticos se utilizan para realizar cálculos aritméticos.

Operador Descripción

+ Suma.

- Resta.

* Multiplicación.

/ División.

% Calcula el resto de una división entera.

Además de estos operadores, también existen operadores aritméticos unitarios: incremento (++),
disminución (--) y la negación unitaria (-).
Los operadores de incremento y disminución pueden estar tanto delante como detrás de una
variable, con distintos matices en su ejecución. Estos operadores aumentan o disminuyen en 1,
respectivamente, el valor de una variable.

Operador Descripción (Suponiendo x=5)

y = ++x Primero el incremento y después la asignación. x=6, y=6.

y = x++ Primero la asignación y después el incremento. x=6, y=5.

y = --x Primero el decremento y después la asignación. x=4, y=4.

 y = x-- Primero la asignación y después el decremento x=4, y=5.

y =-x Se asigna a la variable “y” el valor negativo de “x”, pero el valor de la variable
“x” no varía. x=5, y= -5.

Ejemplo:

let num1=5, num2=8,resultado1, resultado2;

resultado1=((num1+num2)*200)/100;
resultado2=resultado1%3;
resultado1=++num1;
resultado2=num2++;
resultado1=--num1;
resultado2=num2--;
resultado1=-resultado2;

5.3 Operadores de comparación

Operadores utilizados para comparar dos valores entre sí. Como valor de retorno se obtiene
siempre un valor booleano: true o false.

Operador Descripción

=== Compara dos elementos, incluyendo su tipo interno. Si son de distinto tipo, no
realiza conversión y devuelve false ya que siempre los considera diferentes. Uso
recomendado.

!== Compara dos elementos, incluyendo su tipo interno. Si son de distinto tipo, no
realiza conversión y devuelve true ya que siempre los considera diferentes. Uso
recomendado.

== Devuelve el valor true cuando los dos operandos son iguales. Si los elementos
son de distintos tipos, realiza una conversión. No está recomendado su uso.

!= Devuelve el valor true cuando los dos operandos son distintos. Si los elementos
son de distintos tipos, realiza una conversión. No está recomendado su uso.

> Devuelve el valor true cuando el operando de la izquierda es mayor que el de la

derecha.

< Devuelve el valor true cuando el operando de la derecha es menor que el de la

izquierda.

>= Devuelve el valor true cuando el operando de la izquierda es mayor o igual que
el de la derecha.

<= Devuelve el valor true cuando el operando de la derecha es menor o igual que el
de la izquierda.

let a=4;b=5,c="5";
[Link]("El resultado de la expresión 'a==c' es igual a "+(a==c));
[Link]("El resultado de la expresión 'a===c' es igual a "+(a===c));
[Link]("El resultado de la expresión 'a!=c' es igual a "+(a!=c));
[Link]("El resultado de la expresión 'a!==c' es igual a "+(a!==c));
[Link]("El resultado de la expresión 'a==b' es igual a "+(a==b));
[Link]("El resultado de la expresión 'a!=b' es igual a "+(a!=b));
[Link]("El resultado de la expresión 'a>b' es igual a "+(a>b));
[Link]("El resultado de la expresión 'a<b' es igual a "+(a<b));
[Link]("El resultado de la expresión 'a>=b' es igual a "+(a>=b));
[Link]("El resultado de la expresión 'a<=b' es igual a "+(a<=b));

5.4 Operadores lógicos

Los operadores lógicos se utilizan para el procesamiento de los valores booleanos. A su vez el valor
que devuelven también es booleano: true o false.

Operador Descripción

&& Y “lógica”. El valor de devolución es true cuando ambos operandos son

verdaderos.

|| O “lógica”. El valor de devolución es true cuando alguno de los operandos es

verdadero o lo son los dos.

! No “lógico”. Si el valor es true, devuelve false y si el valor es false, devuelve true.

Se muestra el resultado de distintas operaciones realizadas con operadores lógicos. (En el ejemplo
se usa directamente los valore true y false en lugar de variables).

[Link]("El resultado de la expresión 'false&&false' es igual a "+(false&&false));

[Link]("El resultado de la expresión 'false&&true' es igual a "+(false&&true));
[Link]("El resultado de la expresión 'true&&false' es igual a "+(true&&false));
[Link]("El resultado de la expresión 'true&&true' es igual a "+(true&&true));
[Link]("El resultado de la expresión 'false||false' es igual a "+(false||false));
[Link]("El resultado de la expresión 'false||true' es igual a "+(false||true));
[Link]("El resultado de la expresión 'true||false' es igual a "+(true||false));
[Link]("El resultado de la expresión 'true||true' es igual a "+(true||true));
[Link]("El resultado de la expresión '!false' es igual a "+(!false));

6. ESTRUCTURAS DE CONTROL

6.1 Instrucciones if/else

Para controlar el flujo de información en los programas JavaScript existen una serie de estructuras
condicionales y bucles que permiten alterar el orden secuencial de ejecución. Estas son las
instrucciones if y else.

La instrucción if es permite la ejecución de un bloque u otro de instrucciones en función de una

condición.

Sintaxis

if (condición) {
// bloque de instrucciones que se ejecutan si la condición se cumple
}
else{
// bloque de instrucciones que se ejecutan si la condición no se cumple
}

Las llaves solo son obligatorias cuando haya varias instrucciones seguidas pertenecientes a la
ramificación. Si no pones llaves, el if se aplicará únicamente a la siguiente instrucción.

Puede existir una instrucción if que no contenga la parte else. En este caso, se ejecutarán una serie
de órdenes si se cumple la condición y si esto no es así, se continuaría con las órdenes que están a
continuación del bloque if. Ejemplos de uso:

let diaSem;
diaSem=prompt("Introduce el día de la semana ", "");
if (diaSem === "domingo")
{
[Link]("Hoy es festivo");
}
else // Al no tener {}, es un "bloque de una instrucción"
[Link]("Hoy no es domingo!!");

Otro ejemplo

let edadAna,edadLuis;
// Usamos parseInt para convertir a entero
edadAna=parseInt(prompt("Introduce la edad de Ana",""));
edadLuis=parseInt(prompt("Introduce la edad de Luis",""));

if (edadAna > edadLuis){

[Link]("Ana es mayor que Luis.");
[Link](" Ana tiene "+edadAna+" años y Luis "+ edadLuis);
}
else{
[Link]("Ana es menor o de igual edad que Luis.");
[Link](" Ana tiene "+edadAna+" años y Luis "+ edadLuis);
}

6.2 Ramificaciones anidadas

Para las condiciones ramificadas más complicadas, a menudo se utilizan las ramificaciones
anidadas. En ellas se definen consultas if dentro de otras consultas if, por ejemplo:

let edadAna,edadLuis;
// Convertirmos a entero las cadenas
edadAna=parseInt(prompt("Introduce la edad de Ana",""));
edadLuis=parseInt(prompt("Introduce la edad de Luis",""));
if (edadAna > edadLuis){
[Link]("Ana es mayor que Luis.");
}
else{
if (edadAna<edadLuis){
[Link]("Ana es menor que Luis.");
}else{
[Link]("Ana tiene la misma edad que Luis.");
 }
}
[Link](" Ana tiene "+edadAna+" años y Luis "+ edadLuis);

6.3 Uso del operador ?

Se puede usar el operador ? : que actúa como un if que devuelve un valor que definimos después
del operador:
let esMayorDeEdad = (edad>18)?true:false;

6.4 Estructura condicional: switch-case

La instrucción switch actúa como un selector condicional evaluando el valor que se le pasa como
parámetro y ejecutando el código dentro del case que coincida con dicha evaluación. Se emplea la
instrucción break al final de cada bloque para que no continúe evaluando el resto de bloques. Se
puede omitir el uso de break si se desea que se ejecuten los bloques siguientes al que posee la
coincidencia:
switch(color) {
case 'blanco':
case 'amarillo': // Ambos colores entran aquí
[Link]('Elegiste blanco o amarillo');
break;
case 'azul':
[Link]('Elegiste azul');
break;
default: // Para cualquier otro valor
[Link]('Elegiste '+ color);
}

Javascript permite que el switch en vez de evaluar valores pueda evaluar expresiones. En este caso
se pone como condición true y los operadores de comparación se añaden en cada case:
switch(true) {
case age < 18:
[Link]('Eres muy joven para entrar');
break;
case age < 65:
[Link]('Puedes entrar');
break;
default:
[Link]('Eres muy mayor para entrar');
}

7. ESTRUCTURA REPETITIVAS (BUCLES)

7.1 Bucle for

Cuando la ejecución de un programa llega a un bucle for:
● Lo primero que hace es ejecutar la “Inicialización del índice”, que solo se ejecuta una vez.
● A continuación analiza la condición de prueba y si esta se cumple ejecuta las instrucciones
del bucle.
● Cuando finaliza la ejecución de las instrucciones del bucle se realiza la modificación del
índice, se retorna a la cabecera del bucle for y se realiza de nuevo la condición de prueba.
● Si la condición se cumple se ejecutan las instrucciones y si no se cumple la ejecución
 continúa en las líneas de código que siguen posteriores al bucle.
Sintaxis

for (Inicialización del índice; Condición de prueba; Modificación en el

índice){
// ...instrucciones...
}

Ejemplo: Imprimir por consola los números pares del 2 al 30

for (i=2;i<=30;i+=2) {
[Link](i);
}
[Link]("Se han escrito los números pares del 2 al 30");

Ejemplo: Escribe en la consola las potencias de 2 hasta el 3000

let aux=1;
for (i=2;i<=3000;i*=2) {
[Link]("2 elevado a "+aux+" es igual a "+i);
aux++;
}
[Link]("Se han escrito las potencias de 2 menores de 3000");

7.2 Bucle while

Con el bucle while se pueden ejecutar un grupo de instrucciones mientras se cumpla una
condición.
● Si la condición nunca se cumple, entonces tampoco se ejecuta ninguna instrucción.
● Si la condición se cumple siempre, nos veremos inmersos en el problema de los bucles
infinitos, que pueden llegar a colapsar el navegador, o incluso el ordenador.
○ Por esa razón es muy importante que la condición deba dejar de cumplirse en algún
momento para evitar bucles infinitos.
Sintaxis

while (condición){
//...instrucciones...
}
Ejemplo: Escribe los números pares de 0 a 30

let i=2;
while (i<=30) {
[Link](i);
i+=2;
}
[Link]("Ya se han mostrado los números pares del 2 al 30");

Ejemplo: Pregunta una clave hasta que se corresponda con una dada.

let auxclave="";
while (auxclave!=="vivaYO"){
auxclave=prompt("introduce la clave ","claveSecreta")
}
[Link]("Has acertado la clave");

7.3 Bucle do-while

La diferencia del bucle do-while frente al bucle while reside en el momento en que se comprueba
la condición: el bucle do-while no la comprueba hasta el final, es decir, después del cuerpo del
bucle, lo que significa que el bucle do-while se recorrerá, una vez, como mínimo, aunque no se
cumpla la condición.

Sintaxis
do {
// ...instrucciones...
} while(condición);

Ejemplo: Preguntar por una clave hasta que se introduzca la correcta

let auxclave;
do {
auxclave=prompt("introduce la clave ","vivaYo")
} while (auxclave!=="EstaeslaclaveJEJEJE")
[Link]("Has acertado la clave");

7.4 Instrucciones BREAK y CONTINUE

En los bucles for, while y do-while se pueden utilizar las instrucciones break y continue para
modificar el comportamiento del bucle.
La instrucción “break” dentro de un bucle hace que este se interrumpa inmediatamente, aun
cuando no se haya ejecutado todavía el bucle completo. Al llegar la instrucción, el programa se
sigue desarrollando inmediatamente a continuación del final del bucle.

Ejemplo: Pregunta por la clave y permitir tres respuestas incorrectas

let auxclave=true;
let numveces=0;
//Mientras no introduzca la clave y no se pulse Cancelar
while (auxclave !== "anonimo" && auxclave){
auxclave=prompt("Introduce la clave ","");
numveces++;
if (numveces === 3)
break;
}
if (auxclave=="SuperClave"{
[Link]("La clave es correcta");
}else{
[Link]("La clave no es correcta correcta");
}

El efecto que tiene la instrucción “continue” en un bucle es el de hacer retornar a la secuencia de

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

Ejemplo: Presenta todos los números pares del 0 al 50 excepto los que sean múltiplos de 3
let i;
for (i=2;i<=50;i+=2){
if ((i%3)===0)
continue;
[Link](i);
}

8. FUNCIONES

Una función es un conjunto de instrucciones que se agrupan bajo un nombre de función. Se

ejecuta solo cuando es llamada por su nombre en el código del programa. La llamada provoca la
ejecución de las órdenes que contiene.
Las funciones son muy importantes por diversos motivos:
● Ayudan a estructurar los programas para hacerlos su código más comprensible y más fácil
de modificar.
● Permiten repetir la ejecución de un conjunto de órdenes todas las veces que sea necesario
sin necesidad de escribir de nuevo las instrucciones.

Una función consta de las siguientes partes básicas:

● Un nombre de función.
● Los parámetros pasados a la función separados por comas y entre paréntesis.
● Las llaves de inicio y final de la función.
● Desde Javascript ES6, se pueden definir valores por defecto para los parámetros.

Sintaxis de la definición de una función

function nombrefuncion (parámetro1, parámetro2=valorPorDefecto...){

// instrucciones
//si la función devuelve algún valor añadimos:
return valor;
}

Sintaxis de la llamada a una función

// La función se ejecuta siempre que se ejecute la sentencia.

valorRetornado=nombrefuncion (parám1, parám2...);

Es importante entender la diferencia entre definir una función y llamarla:

● Definir una función es simplemente especificar su nombre y definir qué acciones realizará
en el momento en que sea invocada, mediante la palabra reservada function.
● Para llamar a una función es necesario especificar su nombre e introducir los parámetros
que queremos que utilice. Esta llamada se puede efectuar en una línea de órdenes o bien a
la derecha de una sentencia de asignación en el caso de que la función devuelva algún valor
debido al uso de la instrucción return.

La definición de una función se puede realizar en cualquier lugar del programa, pero se
recomienda hacerlo al principio del código o en un fichero “js” que contenga funciones.
La llamada a una función se realizará cuando sea necesario, es decir, cuando se demande la
ejecución de las instrucciones que hay dentro de ella.
Ejemplo: funciones que devuelve la suma de dos valores que se pasan por parámetros y que
escriben el nombre del profesor.

// Definiciones de las funciones

function suma (a,b){
// Esta función devuelve un valor
return a+b;
}

// Esta función muestra un texto, pero no devuelve un valor

function profe (){
[Link]("El profesor es...");
// OJO: esto es un ejemplo, pero rara vez se realiza en una función real
}
// Código que se ejecuta
let op1=5, op2=25;
let resultado;
// Llamada a función
resultado=suma(op1,op2);
// llamada a la función
[Link] (op1+"+"+op2+"="+resultado);
// Llamada a función
profe();

Desde Javascript ES6, las funciones soportan los llamados parámetros REST.
Los parámetros REST son un conjunto de parámetros que se almacenan como array en un
“parámetro final” nomenclado con ...nombreParametro. Esto nos permite manejar la función sin
tener que controlar el número de parámetros con los que esta es llamada.
Importante: sólo el último parámetro puede ser REST.

Ejemplo:
function pruebaParREST(a, b, ...masParametros) {
[Link]("a: "+a+" b: "+ b + " otros: " + masParametros);
}
pruebaParREST("param1", "param1", "param3", "param4", "param5");

Para saber más de los parámetros REST

[Link]

9. FUNCIONES FLECHA (ARROW FUNCTIONS)

Una función flecha (arrow function) es una alternativa compacta al uso de funciones tradicionales.
● Este tipo de funciones tienen sus limitaciones y deben ser utilizadas solo en algunos
contextos donde sean útiles.
● No son adecuadas para ser utilizadas como métodos.

Soporta varias formas de sintaxis, a continuación indicamos las más típicas:

● (parametro1, parametro2, ...) => {sentencias}
● () => {sentencias}
● parámetro => sentencia
A veces, son utilizados con la función “map” de los arrays. Esta función crea un nuevo array
formado por la aplicación de una función a cada uno de sus elementos:
[Link]
También es muy útil con la función “reduce” de los arrays. Esta función ejecuta una “función
reductora” sobre cada elemento del array, devolviendo un único valor.
[Link]

Ejemplo:

let nombres = ['Pedro', 'Juan', 'Elena'];

[Link]([Link](nom => [Link]));
// Muestra el array con los valores [5, 4, 5]
let sumaNombres= [Link]((acumulador, elemento) => {
return acumulador + [Link];
}, 0);
// Muestra la suma de la longitud de los nombre
[Link](sumaNombres);

Para saber más:

[Link]

10. CLASES EN JAVASCRIPT

Javascript ES6 permite una mejor definición de clases que en anteriores versiones de Javascript.
Mediante la palabra reservada “class”, permite definir clases, métodos, atributos, etc…
Recordad que los objetos en Javascript se guardan como referencias de memoria. En apartados
anteriores hablamos de como clonar arrays y objetos.

Ejemplo:

class Punto {
constructor ( pX , pY ){ // Constructor de la clase
[Link] = pX;
[Link] = pY;
}
// Método estático para calcular distancia entre dos puntos
static distancia ( a , b) {
const dx = [Link] - [Link];
const dy = [Link] - [Link];

return [Link] ( dx * dx + dy * dy );
}
// Método indicado para ser usado como getter
get coordX() {
return [Link];
}
// Método normal
devuelveXporY () {
return [Link] * [Link];
}
}
let p1 = new Punto(5, 5);
let p2 = new Punto(10, 10);
//Llamada método estático
[Link] ([Link](p1, p2));
//Llamada método normal
[Link] ([Link]());
// Al ser un getter, puede usarse como una propiedad
[Link] ([Link]);

Para saber más:

[1] Clases en JS: [Link]

[2] OBJETOS EN JS: HTTPS://[Link]/ES/DOCS/WEB/JAVASCRIPT/GUIDE/WORKING_WITH_OBJECTS

11. MÁS COSAS INTERESANTES DE JAVASCRIPT ES6

Este documento pretende ser una simple guía y no podemos incluir todas las novedades de
Javascript ES6, pero desde aquí enlazamos las más interesantes por si queréis ampliar:
● Iteradores y generadores
○ [Link]
tors
● Operadores de propagación (spread)
○ [Link]
ad_operator
● Plantillas de cadenas de texto (template strings)
○ [Link]
● For … of
○ [Link]
f
● Tail Call Optimization (hace más seguras funciones recursivas)
○ [Link]

12. INTRODUCCIÓN A LA MANIPULACIÓN DEL DOM

Con el fin de facilitar la realización de pequeños ejercicios, incluimos unos primeros conceptos de
manipulación del DOM (Document Object Model). Conociendo la id de algún objeto HTML
existente en la página podemos cambiar sus propiedades.
Cuando queremos cambiar una propiedad de un objeto presente en el documento, utilizamos su
ID (nombre único que define a un elemento) y el método “[Link]()” para
acceder al elemento en sí.

Ejemplo:
Para cambiar una imagen con id 'matrix', accedemos al elemento y modificamos la propiedad src :

[Link]('matrix').src = "[Link]";

Esto se puede usar para cualquier propiedad existente en cualquier objeto HTML.

Una función Javascript genérica para cambiar una imagen sería:

function cambiarImagen (id, rutaImagen) {

[Link](id).src=rutaImagen;
}