Scribd
Cargar
10 vistas164 páginas

Javascript Sas

El documento presenta un curso sobre JavaScript, cubriendo fundamentos de programación Front End, características del lenguaje, su historia, y la sintaxis básica. Se abordan temas como la manipulación del DOM, tipos de datos, variables, operadores, y la creación de contenido dinámico e interactivo. Además, se discuten las diferencias entre las declaraciones de variables 'var', 'let', y 'const', así como la conversión de tipos y el uso de herramientas para la edición de código.

Cargado por

pau.rodriguez
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
10 vistas164 páginas

Javascript Sas

El documento presenta un curso sobre JavaScript, cubriendo fundamentos de programación Front End, características del lenguaje, su historia, y la sintaxis básica. Se abordan temas como la manipulación del DOM, tipos de datos, variables, operadores, y la creación de contenido dinámico e interactivo. Además, se discuten las diferencias entre las declaraciones de variables 'var', 'let', y 'const', así como la conversión de tipos y el uso de herramientas para la edición de código.

Cargado por

pau.rodriguez
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/ 164

IFCD0110

Módulo 2
Javascript

Formador: Borja Mulleras Vinzia


1. Caracterización de los fundamentos de la programación Front End:
JavaScript
2. Aplicación de los elementos más avanzados de JavaScript
3. Interpretación y reescritura de llamadas, datos y código AJAX
4. Reproducción con código, de prototipos realizados con
herramientas de diseño gráfico
5. Manipulación de códigos de terceros
6. Elaboración de documentación técnica y de usuario de lenguaje
Javascript

Formador: Borja Mulleras Vinzia


JavaScript (ES6)
1. Caracterización de los fundamentos de la programación
Front End: JavaScript
§ Historia y evolución de JavaScript
§ Variables
§ Tipos de datos: Boolean, Number, String, Date, undefined, BigInt y
Symbol
§ Objetos
§ Valores especiales: null, NaN e Infinity
§ Operadores y precedencia de operadores
§ Expresiones
§ Bloque de control del flujo y control / tratamiento de errores

02
§ Scopes
§ Funciones
§ Gestión de eventos
§ JavaScript y DOM: cómo se relacionan HTML, CSS y JavaScript

Formador: Borja Mulleras Vinzia


JavaScript
De contenido estático a contenido dinámico e interactivo
§ A excepción de los elementos hipervínculos HTML (tag <a>), el contenido es estático, es
decir, no es interactivo, pues no cambia frente a acciones del usuario.
§ Utilizando reglas de estilo CSS, se enriquece el aspecto, y se crear hacer efectos interactivos
limitados, como por ejemplo cambiar el aspecto de un hyperlink al pasar sobre este.
§ JavaScript permite crear contenido interactivo y dinámico:
§ Modificación del aspecto visual del documento web
§ Validación avanzada de formularios
§ Manejo de eventos
§ Interacción con el servidor para descarga de datos (AJAX)
§ Soportado en todos los navegadores

Formador: Borja Mulleras Vinzia


Características
§ Originalmente llamado LiveScript
§ Es interpretado y orientado a objetos
§ Basado en la especificación del lenguaje, ECMAScript (ES)
§ Su uso se ha incrementado significativamente por el enfoque interactivo y dinámico de los
sitios web actuales.
§ Desde 2009 podemos crear aplicaciones fullsatck con un solo lenguaje de programación
tanto en el cliente como en el servidor.

TypeScript

JavaScript

Formador: Borja Mulleras Vinzia


JavaScript
Historial de versiones
Versión Fecha Características principales
ES1 1997 Primera edición
ES2 1998 Alineación con ISO/IEC 16262
ES3 1999 Expresiones regulares, manejo de cadenas, try / catch, formatos
ES4 Nunca
lanzada
ES5 2009 strict mode, getters / setters, JSON, reflection
ES6 2015 Let y const, arrays tipados, promises
ECMAScript 2016 2016 ES2016, aislado del código, ** y Array.prototype.includes
ECMAScript 2017 2017 Concurrencia, await / async, sobrecarga de operadores, registros
ECMAScript 2018 2018 Propiedades de descanso/propagación, iteración asíncrona

Formador: Borja Mulleras Vinzia


JavaScript
Estructura general
§ El tag <script> permite añadir un bloque de instrucciones JavaScript
§ El bloque JS normalmente en el <head> del documento.
<script type="text/javascript">
type: Define el tipo MIME del script
//código JavaScript
incluido. Debe ser "text/javascript".
Actualmente se puede omitir.
</script>

§ Algunos navegadores no soportan scripts, por lo que ignorarán la marca <script>, pero no
el contenido. La solución es escribir el bloque JS entre los símbolos de comentarios:
<script type="text/javascript">
<!– ocultar script
//código JavaScript -->
</script>

Formador: Borja Mulleras Vinzia


JavaScript
Código JS externo
§ Código JavaScript contenido en archivo de extensión .js referenciado desde el documento:

<script type="text/javascript" src="myscript.js"></script>

src: URL que referencia al archivo


que contiene el código JavaScript.
Permite rutas relativas y absolutas.

§ El contenido de myscript.js es directamente el código JavaScript, sin etiquetas.

§ Esta opción permite reutilizar el código en otras páginas, por lo que es la recomendable.

Formador: Borja Mulleras Vinzia


JavaScript
§ “Hola Mundo” en JavaScript

<script>
window.alert("Hello world!");
document.write("<p>Hola Mundo!</p>");
</script>

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Mensajes interactivos
§ JavaScript provee comandos para mostrar mensajes interactivos al usuario:
§ alert: mensajes informativos o de advertencia.

alert("El formato de fecha es incorrecto");

El idioma del botón


es el del navegador

10

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Mensajes interactivos
§ confirm: mensajes de decisión.
El retorno indica el
botón presionado:
if (confirm("Confirme si desea continuar.")) { § Aceptar/OK: true
//lógica si marca Aceptar/OK § Cancelar: false
}

§ prompt: permite recoger valores alfanuméricos.

11

Formador: Borja Mulleras Vinzia


Manejar herramientas online para edición y prueba de código JavaScript, HTML
y CSS.

1. Probar las funciones alert, prompt y confirm en el editor de código online


codepen.
https://codepen.io/

15 min

12

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Comentarios
§ Los comentarios pueden ser por línea o por bloque:

//Comentarios /*
//de Comentario de bloque
//línea */

Ejemplo: Ejemplo:

var a = 56; //asign. básica /*


Con el siguiente comando se obtienen
las propiedades del navegador
*/
var nav = window.navigator;

13

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
§ Un identificador es un nombre para referenciar a un elemento del código (clase, variable, método…)
§ Es una secuencia alfanumérica cuyo primer carácter no es un número.
§ Se pueden incluir vocales acentuadas, la ñ y letras con símbolos (ç, ...), aunque no es recomendable
por problemas de portabilidad entre plataformas, ya que los juegos de caracteres pueden afectar el
código.
§ Se permiten incluir otros caracteres imprimibles ($, _) exceptuando aquellos que tienen un significado
especial dentro del lenguaje (por ejemplo % y ?). De todas formas, no se recomienda.
§ Ejemplos válidos pero no todos cumplen las convenciones:
Arriba, caña, C3P0, àëÎò, hola, _barco_
§ Ejemplos no válidos:
3com, 123, 4D5v, C#, a!b, r¨t, qwe`t

comienzan con número caracteres no válidos

14

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Variables
§ Una variable es una referencia a un valor u objeto de un determinado tipo. Para referirse
al valor utilizamos su identificador.
§ Declaración o definición de una variable con var:

var <identificador>;
var x; var letra; var mensaje; var obj;

§ Asimismo se puede inicializar una variable asignándole un valor u objeto en la declaración,


utilizando el símbolo "=":
var x = 45;
var mensaje = "Hola";
var enabled = true;
var today = new Date();

15

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
const
§ A partir de la versión 2015 de JavaScript (ES6 - ECMAScript 2015) podemos usar const
para declarar una constante (no se puede reasignar).

const A_STRING = 'I am a string';


const A_NUMBER = 100;
const AN_ARRAY = [ 'var1', 12, { foo: 'bar' } ];
const AN_OBJECT = { name: 'MyAPP', ver: '1.0' };
/*
Convención: escribir las constantes en mayúsculas para
distinguirlas del resto de variables
*/

16

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
let
§ A partir de la versión 2015 de JavaScript (ES6 - ECMAScript 2015) podemos usar let para definir una
variable con alcance restringido.
§ Su ámbito o scope es el bloque en donde está definida:

Alcance de var es en
cualquier parte
dentro la función

Alcance de let es
dentro del bloque {}

17

Formador: Borja Mulleras Vinzia


const vs let vs var

keyword const let var

Alcance Global NO NO SÍ

Alcance Función SÍ SÍ SÍ

Alcance Bloque SÍ SÍ NO

Re-asignable NO SÍ SÍ

18

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Ciclo de vida de una variable
§ Una variable se crea en el ámbito de un bloque que la contiene:

Las variables que están fuera de un bloque


son globales dentro de la página.
var count;
Inicio bloque
function inc() {
count++; Variable local

var message = "La cuenta es " + count; Si una variable se declara sin 'var', se
considera global. Esto es no
recomendable.
alert(message);
} Fin bloque

§ Todas las variables creadas son destruidas al salir de la página.


§ Si se vuelve a entrar a la página, las variables se crean nuevamente, no estando relacionadas con
valores anteriores de las mismas.

19

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Tipos de variables
§ Una variable puede ser de varios tipos, aunque siempre se identifica como var.
§ Los tipos utilizados son:
§ texto (string): se asignan con una cadena, con comillas dobles o simples:

var mensaje = "El campo 'nombre' es requerido";

var mensaje = 'Comillas "dobles"'; Las comillas simples y dobles


son intercambiables, siempre
que se mantenga el orden de
cierre.

§ número (number): se asignan con un número de cualquier tipo. No se hace distinción


entre enteros o números con decimales.
var max = 10;
var distancia = 12.34; Separador decimal: punto.

20

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Número
§ JavaScript maneja variables de tipo numérico (number). Internamente se representan
como un número de punto flotante de 64 bits, lo que permite doble precisión y el rango
siguiente:

-1.7976·10308 -4.9·10-324 0 4.9·10-324 1.7976·10308


Rango Incluye Rango
negativo el cero positivo

Utiliza un punto como Posiblemente en futuras versiones se


separador decimal utilizarán tamaños mayores (128 bits)

21

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
String
§ JavaScript maneja variables de tipo texto (string). Se declaran como textos entre comillas
simples o dobles. Internamente se almacenan como una cadena de caracteres, sin un largo
máximo establecido. Ejemplo:

var mensaje = "Hola";

§ Las cadenas son objetos que tienen asociadas algunas funciones y propiedades
predefinidas útiles para su manejo.
§ Para conocer la longitud de un string, es decir, el número de caracteres, se utiliza la
propiedad length:

str = "12345"; str.length 5

22

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Boolean
§ lógico (boolean): se asignan con los valores true o false.

var enabled = true;


var isValid = false;

23

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
§ JavaScript maneja variables de tipo lógico (boolean). Internamente se representan como
un valor equivalente a un bit.
§ Ejemplos:

var enabled = true;

var isFinished = count > 10; Un boolean puede


contener el resultado de
var hasValue = message != ""; un operador relacional

Asignación Comparación

24

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Conversión de Tipos
§ Si se tiene un valor tipo texto, por ejemplo "1", y se quiere manejar como número,
JavaScript provee funciones para convertir entre tipos de variables. Esto es útil porque al
ser todas 'var', no es posible diferenciarlas por su tipo.
§ Ejemplos:
var strOne = "1";
var numOne = Number(strOne);

var strEnabled = "true";


var enabled = Boolean(strEnabled);

§ También es posible obtener el tipo interno de una variable, utilizando typeof. Ejemplo:
if (typeof numOne == "number") {
alert("numOne es un number");
}

25

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Operadores aritméticos y relacionales
§ Un operador es un símbolo formado por uno o más caracteres, que permite realizar una
determinada operación entre uno o más datos y produce un resultado.
Operadores aritméticos:
§ Unarios: negativo (-) y positivo (+)
§ Binarios: suma (+), resta (-), producto (*), división (/) y módulo (%)

Operadores relacionales:
§ igualdad (==). No confundir con =, que es para asignación.
§ desigualdad (!=)
§ mayor que (>)
§ menor que (<)
§ mayor o igual que (>=)
§ menor o igual que (<=)

26

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Operadores y asignación
§ El operador de asignación básico es (=) que, a parte de asignar, devuelve el valor asignado.
La asignación es asociativa por la derecha.

§ Operadores compuestos: realizan una operación y asignan el resultado. Existen para la


suma (+=), resta (-=), producto (*=), división (/=), módulo (%=).

§ Operadores incrementales: realizan un incremento (++) o decremento (--) de una unidad


en una variable. Si el operador se coloca antes del nombre de la variable devuelve el valor
de la variable antes de incrementarla; si se hace después, se incrementa y devuelve el valor
ya incrementado.

27

Formador: Borja Mulleras Vinzia


Incremento
var numero = 5; var numero = 5;
++numero; numero = numero + 1;
alert(numero); // numero alert(numero); //
=6 numero = 6
Decremento
var numero = 5; var numero = 5;
--numero; numero = numero - 1;
alert(numero); // numero alert(numero); //
=4 numero = 4

Formador: Borja Mulleras Vinzia


Incremento / Decremento
var numero1 = 5; var numero1 = 5;
var numero2 = 2; var numero2 = 2;
numero3 = numero1++ + numero3 = ++numero1 +
numero2; numero2;
// numero3 = 7, numero1 = 6 // numero3 = 8, numero1 =
6
NO ES LO MISMO ++6 QUE 6++

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Operadores y asignación
§ Ejemplos de asignación (todos son var tipo number):

a = 56; //asignación básica

b = 78 + a; //asignación básica

c += 23; //asignación compuesta. Equivale a c = c + 23

i++; //Incremento. Equivale a i = i + 1

d = i++; //Asigna e incrementa. Si i vale 3 al inicio, d vale 3.

d = ++i; //Incrementa y asigna. Si i vale 3 al inicio, d vale 4.

30

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Concatenación
§ Los textos se pueden concatenar utilizando el operador "+":
§ Como el operador "+" también se utiliza para sumar números, hay ciertos matices a tener en cuenta,
los que se ilustran a continuación:
var str = "Esto es " + "un string";
Regla de izquierda a derecha.
s1 = 1 + 3 + "5" + "7"; 457 Suma 1 + 3, y luego concatena "5" y "7"

s2 = 1 + (3 + "5") + 7; 1357 Calcula el paréntesis primero.


Concatena 1, el resultado, y 7

Como el primer operando es un string,


s3 = "1" + (3 + 5) + 7; 187 comienza concatenando

Como la primera operación incluye a un


s4 = 1 + "3" + 5 + 7; 1357 string, comienza concatenando

Si se quieren concatenar sólo números, se


s5 = "" + 1 + 3 + 5 + 7; 1357 puede agregar un string vacío

Si se quiere convertir una suma a string,


s6 = "" + (1 + 3 + 5 + 7); 16 similar a la anterior y también String(...)
s6 = String(1 + 3 + 5 + 7);
31

Formador: Borja Mulleras Vinzia


Ejemplo prompt
<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo PROMPT</title>
<script type="text/javascript">
var numero = prompt("Introduce tu número de DNI
(sin la letra)");
var letra = prompt("Introduce la letra de tu DNI (en
mayúsculas)");
alert(numero);
letra = letra.toUpperCase();
alert(letra);
</script>
</head>
<body>
<p>Ejemplo de prompt</p>
</body> Formador: Borja Mulleras Vinzia
Ejercicio JS2

Modificar el primer ejemplo para que:

• Utilizando la diapositiva anterior, realizar una


suma cualquiera de dos número y mostrar el
resultado con una alerta.

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Caracteres especiales
§ En JavaScript existe una representación específica para algunos caracteres especiales, que
permite definirlos y utilizarlos:

Carácter Significado Utilización


\n newline (Nueva línea) Para saltos de línea en manejo de cadenas
\r carriage return (Salto de Idem anterior, en Windows.
carro)
\t tab (tabulación) Detectar o insertar tabulaciones

\" comillas (también existe \') Colocar comillas en un String. Ej:


str = "Esto va \"entre comillas\".";
\\ escapa un \ Para escribir un "\" en una cadena. Ej:
str = "Para newline se utiliza \\n";
\b backspace Poco usado

\f form feed Poco usado

34

Formador: Borja Mulleras Vinzia


Ejercicio JS3
Crear un script para
que:

El mensaje que se
muestra al usuario se
almacene en una
variable llamada
mensaje y el
funcionamiento del
script sea el mismo.

El mensaje mostrado
sea el de la imagen.

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Operadores lógicos
§ Unarios: not (!)
§ Binarios: and (&&) y or (||). Son perezosos (no evalúan el segundo operando cuando se
deduce el resultado del primero). No perezosos: & y |, que son poco utilizados.

var a = false;
var b = true;
var c = true;
Evalúa sólo a, y resulta false
var j = a && (b || c);
Evalúa sólo b, y resulta true
var k = b || (b && c);
Evalúa !b y también el paréntesis, del cual sólo evalúa
b. Resultado se convierte con Boolean(m)
var m = !b & (b || c);
Evalúa !a y también el paréntesis, del cual evalúa b y c.
var n = !a | (b && c); Resultado se convierte con Boolean(n)

36

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Operador condicional
§ Es el único de JavaScript con tres operandos, cuya sintaxis es:
<condición> ? <expresión1> : <expresión2>
§ Se evalúa <condición>
§ Si es verdadera se devuelve el resultado de evaluar <expresión1>
§ Si es falsa, el resultado de evaluar <expresión2>
§ Ambas expresiones deben ser del tipo al que se asigna el resultado.

§ Ejemplo:
Si a es mayor que b, devuelve
max = (a > b) ? a : b; a. En caso contrario, devuelve b

37

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Precedencia de operadores

Operadores Prioridad
!, +, - (unarios) mayor
*, /, %
+, -
<, <=, >=, >
==, !=
&&
||
= (asignación) menor

38

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Control de flujo
§ Sentencia condicional if

if (<condición>) { if (<condición1>) {
<instrucciones> <instrucciones>
} else { } else if (<condición2>) {
<instrucciones> <instrucciones>
} }

Ejemplo: //varias condiciones else if…

if (a > b) { } else if (<condiciónN>) {


alert("A gana"); <instrucciones>
} else { } else {
alert("B gana"); <instrucciones>
} }

http://www.w3schools.com/js/js_if_else.asp
39

Formador: Borja Mulleras Vinzia


Ejercicio JS5
Completar las condiciones de los if del siguiente
script para que los mensajes de los alert() se
muestren siempre de forma correcta:

var numero1 = 5; Solicitar por prompt/input


var numero2 = 8; Solicitar por prompt /input
if(numero2>=numero1) { alert("numero1 no es
mayor que numero2"); }

if(...) { alert("numero2 es positivo"); }

if(...) { alert("numero1 es negativo o distinto de


cero"); }

if(...) { alert("Incrementar en 1 unidad el valor de


numero1 no lo hace mayor
Formador: o igual
Borja Mulleras que numero2"); }
Vinzia
Ejercicio JS6
Ejercicio A7
Desarrolle un algoritmo que permita convertir calificaciones
numéricas a letras según la siguiente tabla de conversión:

NÚMERO LETRA
19-20 A
16-18 B
12-15 C
9-11 D
0-8 E

Formador: Borja Mulleras Vinzia


Ejercicio JS7
Ejercicio A8
Desarrolle un algoritmo para determinar el pago de
entradas de espectáculo en función del número que
compren.
NÚMERO DESCUENTO
1 -
2 10%
2*10*0,90
3 15%
3*10*0,85
4 20%
4*10*0,80
5 o más 25%
5*10*0,75

Formador: Borja Mulleras Vinzia


Ejercicio JS9
Ejercicio A3
Desarrollar un algoritmo que permita leer dos valores
distintos y determinar cual de los dos valores es el mayor.
Escribir el resultado.

Realizar un algoritmo, además, que sume los dos


números.

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Control de flujo
Permite cualquier tipo de
§ Sentencia condicional switch-case variable. Normalmente se
utiliza Number y String

switch (<expresión>){ Ejemplo:


case <literal1>: switch (estado){
<instrucciones> case 0:
break; alert("Opción 0");
case <literal2>: break;
<instrucciones> case 1:
break; alert("Opción 1");
//N valores… case 2:
case <literalN>: alert("Opción 2");
<instrucciones> break;
break; default:
default: alert("Ninguna");
<instrucciones> } Ya que no hay
si estado es 0: break en case 1
}
Cuando entra a un "Opción 0"
"case", continúa hasta el si estado es 1:
siguiente "break" "Opción 1"
"Opción 2"

44

Formador: Borja Mulleras Vinzia


Switch
switch(variable) { switch(numero var raw_value = 11.0;
case valor_1: ){ switch(true) {
... case 5: case (raw_value >
break; ... 10.0):
case valor_2: break; height = 48;
... case 8: width = 36;
break; ... break;
... break; case (raw_value >
case valor_n: case 20: 5.0):
... ... height = 40;
break; break; width = 30;
default: default: break;
... default:
... http://www.w3schools.com/js/js_switch.asp
break; break; height = 16;
} } width = 12;
}
Formador: Borja Mulleras Vinzia
Ejercicio JS6-Switch
Ejercicio A7
Desarrolle un algoritmo que permita convertir calificaciones
numéricas a letras según la siguiente tabla de conversión:

NÚMERO LETRA
19-20 A
16-18 B
12-15 C
9-11 D
0-8 E

Formador: Borja Mulleras Vinzia


Ejercicio JS7-Switch
Ejercicio A8
Desarrolle un algoritmo para determinar el pago de
entradas de espectáculo en función del número que
compren.
NÚMERO DESCUENTO
1 -
2 10%
2*10*0,90
3 15%
3*10*0,85
4 20%
4*10*0,80
5 o más 25%
5*10*0,75

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Control de flujo
§ Sentencia iterativas while y do-while

while (<condición>) { do {
<instrucciones> <instrucciones>
} while (<condición>);

Ejemplo: Ejemplo:

var a = 3; var a = 0;
Pasa al menos
while (a > 0) { do { una vez
alert(a); alert(a);
a--; a--;
} } while (a > 0);

48

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Control de flujo
§ Sentencia iterativa for

for (<declaración>; <condición>; <instrucción>) {


<instrucciones> for (var <índice> in <iterable>) {
<instrucciones>
} }

for (var i = 0; i < 3; i++) {


var v = [4, 7, 9, 1];
alert(i);
}
for (var a in v){
alert(v[a]);
}

Lista de números (array)

49

Formador: Borja Mulleras Vinzia


Estructura for..in
for(indice in array)
{
...
}

var dias = ["Lunes", "Martes",


"Miércoles", "Jueves", "Viernes",
"Sábado", "Domingo"];

for(i in dias)
{
alert(dias[i]);
http://www.w3schools.com/js/js_loop_for.asp
}

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Break y continue
§ Existen dos elementos de control para los ciclos:
§ break: detiene el ciclo, continuando con las instrucciones posteriores.
§ continue: detiene la iteración, continuando con la siguiente.

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


if (i == 3) { 0
break; 1
} 2
alert(i);
}

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


if (i == 3) { 0
continue; 1
} 2
alert(i);
} 4

51

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Arrays
§ Conjunto de valores accesibles mediante un índice que indica su posición dentro del array.
var nums = [1, 2, 3];

§ Otra forma de declarar un array:


var nums = new Array();
nums[0] = 1;
nums[1] = 2;
nums[2] = 3;

§ Otros ejemplos de array:


̎
var ̍
̎ ̎
finDeSemana = ["sábado", "̎
domingo"];
̍ ̎
̎
var random
̎ = ["sábado", 5, 7, "̎
domingo",];

52

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Atributo length de Arrays

var nums = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
for (var i=0; i < nums.length; i++) {
//se accede con nums[i]
}

53

Formador: Borja Mulleras Vinzia


Ejercicio JS8
El cálculo de la letra del Documento Nacional de Identidad
(DNI) es un proceso matemático sencillo que se basa en
obtener el resto de la división entera del número de DNI y el
número 23. El array de letras es:A partir del resto de la
división, se obtiene la letra seleccionándola dentro de un array
de letras.

var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N',
'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];

Por tanto si el resto de la división es 0, la letra del DNI es la T


y si el resto es 3 la letra es la A.

38000000 % 23 = 21 --à letras[21] --- K

Formador: Borja Mulleras Vinzia


Ejercicio JS8
Con estos datos, elaborar un pequeño script que:

Almacene en una variable el número de DNI indicado por el


usuario y en otra variable la letra del DNI que se ha indicado.
(Pista: si se quiere pedir directamente al usuario que indique su
número y su letra, se puede utilizar la función prompt())

En primer lugar (y en una sola instrucción) se debe comprobar


si el número es menor que 0 o mayor que 99999999. Si ese es
el caso, se muestra un mensaje al usuario indicando que el
número proporcionado no es válido y el programa no muestra
más mensajes.

Si el número es válido, se calcula la letra que le corresponde


según el método explicado anteriormente. (var resto =
operador1 % operador2; )
Formador: Borja Mulleras Vinzia
Una vez calculada la letra, se debe comparar con la letra
Ejercicio JS10

El factorial de un número entero n es una operación


matemática que consiste en multiplicar todos los factores n
x (n-1) x (n-2) x ... x 1. Así, el factorial de 5 (escrito como
5!) es igual a: 5! = 5 x 4 x 3 x 2 x 1 = 120

For (i=1; i<=numfactororial; i++) {


factorial = factorial*i
}
Utilizando la estructura for, crear un script que calcule el
factorial de un número entero.

Formador: Borja Mulleras Vinzia


Ejercicio JS11
Ejercicio A4
Desarrolle un algoritmo que lea cuatro números distintos y
determine cual de los cuatro es mayor.

Pista: Utilizar una tabla

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Búsqueda de elementos en Arrays
§ El método de los arrays indexOf() devuelve la posición del elemento pasado como
parámetro, si no lo encuentra devuelve -1:
dias = ["lunes", "martes", "miércoles", "jueves"]
var posicion = días.indexOf("jueves");

§ Otra forma de buscar un elemento recorriendo el array a través del método forEach():

<script>
var dias = ["lunes", "martes", "miércoles", "jueves"];
dias.forEach(function(dato, indice){
document.write("Hoy es " + dato + "indice: " + índice + "<br/>");})
</script>

58

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Métodos útiles de Arrays
§ push() añade un elemento al final del array
§ pop() elimina el último elemento del array
§ shift() elimina el primer elemento del array
§ unshift() inserta un elemento al principio del array
§ concat() fusiona dos arrays en uno
§ split() convierte un string en array pasando como parámetro el carácter separador a utilizar
§ join() convierte un array en un string
§ sort() ordena los elementos del array en orden ascendente
§ reverse() invierte el orden de un array
§ splice() reemplaza elementos del array desde una posición concreta, si se omiten elementos a
reemplazar se puede usar para eliminar elementos en cualquier posición del array

http://www.w3schools.com/js/js_array_methods.asp
59

Formador: Borja Mulleras Vinzia


Funciones
var resultado;
var numero1 = 3;
var numero2 = 5;
// Se suman los números y se muestra
el resultado
resultado = numero1 + numero2;
alert("El resultado es " + resultado);

numero1 = 10; // Definición de la función


numero2 = 7; function
suma_y_muestra(num1,num2) {
// Se suman los números y se muestra
el resultado var resultado = num1 + num2;
resultado = numero1 + numero2;alert("El resultado es " +
resultado);
alert("El resultado es " + resultado);
}
numero1 = 5;
numero2 = 8;
// Se suman los números y Formador:
se muestra
Borja Mulleras Vinzia
el resultado
Funciones
// Definición de la función
function suma_y_muestra(num1,num2)
{
var resultado = num1 + num2;
alert("El resultado es " + resultado);
}

// Declaración de las variables


var numero1 = 3;
var numero2 = 5;
// Llamada a la función
suma_y_muestra(numero1, numero2);

numero1 = 10;
numero2 = 7;
suma_y_muestra(numero1, numero2);

numero1 = 5;
Formador: Borja Mulleras Vinzia
numero2 = 8;
Funciones
// Definición de la función
function calculaPrecioTotal(precio) {
var impuestos = 1.21;
var gastosEnvio = 10;
var precioTotal = ( precio * impuestos ) +
gastosEnvio;
// percioTotal=38,2414function calculaPrecioTotal(precio) {
} var impuestos = 1.21;
var gastosEnvio = 10;
// Llamada a la función var precioTotal = ( precio * impuestos ) +
gastosEnvio;
calculaPrecioTotal(23.34);
return precioTotal;
}

// El valor devuelto por la función, se


guarda en una variable
var precioTotal = calculaPrecioTotal(23.34);
// Seguir trabajando con la variable
Formador: Borja Mulleras Vinzia
"precioTotal"
Funciones

function calculaPrecioTotal(precio, porcentajeImpuestos) {


var gastosEnvio = 10;
var precioConImpuestos = (1 +
porcentajeImpuestos/100) * precio;
var precioTotal = precioConImpuestos + gastosEnvio;
return precioTotal;
}

var precioTotal = calculaPrecioTotal(23.34, 21);


Rendondear a =dos
var otroPrecioTotal decimales el precio total4);devuelto por la función
calculaPrecioTotal(15.20,
alert(precioTotal.round(2));
alert(otroPrecioTotal.round(2));

Formador: Borja Mulleras Vinzia


Ejercicios JS13

Escribir el código de una función a la que se


pasa como parámetro un número entero y
devuelve como resultado una cadena de texto
que indica si el número es par o impar. Mostrar
por pantalla el resultado devuelto por la función.

Formador: Borja Mulleras Vinzia


Funciones - Variables

function creaMensaje() function creaMensaje()


{ {
var mensaje = mensaje =
“Prueba”; “Prueba”;
} }
creaMensaje(); creaMensaje();
alert(mensaje); alert(mensaje);

mensaje es una variable mensaje es una variable


local de la función global
mensaje=“”; mensaje = “Prueba”

Formador: Borja Mulleras Vinzia


Funciones - Variables

var mensaje = "gana la de var mensaje = "gana la de


fuera"; fuera";
function muestraMensaje() function muestraMensaje()
{ {
var mensaje = "gana la mensaje = "gana la de
de dentro"; dentro";
alert(mensaje); alert(mensaje);
} }
alert(mensaje); alert(mensaje);
muestraMensaje(); muestraMensaje();
alert(mensaje); alert(mensaje);
http://www.w3schools.com/js/js_function_definition.asp
gana la de fuera gana la de fuera
gana la de dentro gana la de dentro
gana la de fuera gana la de dentro
Formador: Borja Mulleras Vinzia
Sintaxis básica JavaScript
Funciones
§ Declaración de una función en JavaScript:

function mensaje() {
alert("Se ha presionado el botón
'Enviar'");
}

§ Llamada a la función (en el ejemplo asociamos la función a un evento de un botón):

<input type="button" value="Enviar" onclick="mensaje()" />

Evento "click" del Función manejadora que se


botón. Nomenclatura ejecuta cuando sucede el
comienza con "on" evento "click" del botón

67

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Función asignada a una variable

var suma = function(a, b){ Declaración


de la función
return a * b;
}

alert(suma(7, 9)); Llamada


a la
función

68

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Funciones Flecha
§ Definición de una función (ECMA5):

function suma(x, y) {
return x + y;
}

§ ECMA6 permite declarar funciones de forma abreviada llamada función flecha:

var suma = (x, y) => { x + y };

§ Sintaxis:
Las funciones flecha son siempre anónimas
Sintaxis más limpia y simplificada

( param1, param2, ..., param n ) => { expression; }

https://www.w3schools.com/js/js_arrow_fu 69

nction.asp

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Tipo String: funciones
§ Para buscar la primera posición de un string dentro de otro, se utiliza indexOf, y la última,
con lastIndexOf:

str = "ser o no ser, esa es la cuestión";

0123456789 18 26
str.indexOf("ser"); 0 str.lastIndexOf("es"); 26

str.indexOf("ser", 3); 9 str.lastIndexOf("es", 25); 18

str.indexOf("hamlet"); -1 -1 cuando no lo encuentra

70

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Tipo String: funciones
§ Continuando:
§ indexOf se utiliza también para saber si un string contiene una cadena:

str = "Cinema Paradiso"; str.indexOf("a P") != -1 true

§ Para extraer un caracter en una posición, se utiliza charAt:


0 a n-1

str = "Cinema Paradiso"; str.charAt(2) 'n'

§ Para extraer un trozo de una cadena, se utiliza substring:


Restar: 6 – 2 = 4
Desde 2, largo 4 4

str = "casablanca"; str.substring(2, 6) "sabl"

0123456789
Ubicar posición 2

71

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Tipo String: funciones
§ Continuando:
§ Para pasar el contenido todo a minúsculas, se utiliza toLowerCase(), y a mayúsculas es
con toUpperCase():

str = "Artificial Intelligence";


str.toLowerCase() "artificial intelligence"
str.toUpperCase() "ARTIFICIAL INTELLIGENCE"

§ Para comparar dos textos, se utiliza "==":

var str1 = "euro";


str1 == str2 true
var str2 = "\u0065\u0075\u0072\u006f";
"euro" en unicode

72

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Tipo String: funciones
§ Para comparar dos textos, ignorando mayúsculas y minúsculas (case-insensitive), se
deben pasar a mayúsculas o minúsculas y utilizar "==":

str1 = "lower or UPPER";


str2 = "Lower or Upper";
str1.toLowerCase() == str2.toLowerCase() true

§ Si se compara un texto y un número con el mismo valor, sucede lo siguiente:

str1 = "12"; Compara valores


str2 = 12; str1 == str2 true
str1 === str2 false
Compara valores y tipos
str1 === String(str2) true
Number(str1) === str2 true
73

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Tipo String: funciones
§ Para reemplazar en un String las ocurrencias de una cadena de caracteres por otra, se
utiliza el método replace:
Por default, sólo reemplaza la
primera ocurrencia
name = "les aventures de tintin et milou";
name = name.replace("tin","tan"); "les aventures de tantin et milou"

§ El método replace admite expresiones regulares (se ven más adelante), lo que flexibiliza su
uso:
Encuentra las minúsculas de Reemplaza la primera
la "a" a la "z" por un "_"
name = "Déjà vu";
name.replace(/[a-z]/, "_"); "Dé_à vu" Reemplaza todas las
minúsculas por un "_"
name.replace(/[a-z]/g, "_"); "Dé_à __"
Reemplaza todas, ignorando
name.replace(/[a-z]/gi, "_"); "_é_à vu" mayúsculas y minúsculas

http://www.w3schools.com/js/js_string_methods.asp 74

Formador: Borja Mulleras Vinzia


JavaScript
Template Strings (ECMA6)
<script>
var numUno = 10;
var numDos = 20;
document.write(`La suma de ${numUno} + ${numDos} =`, numUno + numDos);
</script>

Las variables numUno y numDos son sustituídas por sus


valores cuando escribimos el nombre entre ${ }

75

Formador: Borja Mulleras Vinzia


Ejercicios JS12Bis

Escribir un Javascript que solicita una cadena de


caracteres y la devuelve letra a letra.

Formador: Borja Mulleras Vinzia


Ejercicios JS14

Definir una función que muestre información


sobre una cadena de texto que se le pasa como
argumento. A partir de la cadena que se le pasa,
la función determina si esa cadena está formada
sólo por mayúsculas, sólo por minúsculas o por
una mezcla de ambas.

Formador: Borja Mulleras Vinzia


Eventos
§ Señales generadas cuando ocurren acciones específicas.
§ Son la base para la interacción con el usuario.
§ Los eventos se pueden asociar a una función que se ejecute cuando el evento se produzca:
funciones manejadoras.
hace referencia
Función manejadora:
al evento

<input type="text" onChange="validarCampo(this)">

Bloque de instrucciones:

<input type="text" onChange="


if (parseInt(this.value) <= 5)
{ alert('Escriba un número mayor que 5.'); }">

78

Formador: Borja Mulleras Vinzia


Eventos
Tipos de eventos

Evento Descripción
blur Cuando el usuario hace click fuera de un campo en un formulario

click Cuando el usuario hace click en un botón, un link o un elemento de un formulario


change Cuando el usuario cambia el valor de un campo
focus Cuando se activa el foco en un campo de entrada
load Cuando se carga una página en el navegador
mousevoer Cuando el puntero del ratón pasa por encima de un hipervínculo
select Cuando el usuario selecciona un campo de un elemento de formulario
submit Cuando el usuario envía un formulario
unload Cuando un usuario abandona una página (para cerrar la ventana o cambiar de página)

79

Formador: Borja Mulleras Vinzia


Eventos
Ejemplo eventos onLoad y onUnload

<html>
<head><title>Ejemplo Eventos </title></head>
<body onLoad="alert('Bienvenido!');"
onUnload="alert('Adios!');">
<h1>Página con eventos</h1>
</body>
</html>

80

Formador: Borja Mulleras Vinzia


Actividad

Procesar eventos de usuarios mediante funciones JS manejadoras.

1. Copia el ejemplo de formulario de autenticación que se acompaña:


login.html y login.css
2. Modifica el formulario de login.html para que cuando se haga clic en
el botón se muestre un mensaje con alert().

20 min

81

Formador: Borja Mulleras Vinzia


<!doctype html>
<html>
<head>
<title>Login Page</title>
<meta charset="utf-8">
<link rel="stylesheet" href="login.css"/>
</head>

<body>
<div class="login-page">
<div class="form">
<form class="login-form">
<input type="text" id="username" placeholder="Enter username..."/><br>
<input type="password" id="password" placeholder="Type password..."/><br>
<button type="button">Login</button>
</form>
</div>
</div>
</body>
</html>

20 min

82

Formador: Borja Mulleras Vinzia


DOM: Document Object Model
Modelo de Objetos del Documento
§ El DOM (Modelo de Objetos del Documento) es un estándar del W3C (World Wide Web
Consortium) que nos permite el acceso y la modificación de los diferentes elementos
de un documento HTML.

Página HTML
JavaScript
JavaScript
Lógica de «El DOM es una (…) interface que permite
window
interacción document a programas y scripts acceder
dinámica location dinámicamente y actualizar el contenido,
estructura y estilo de un documento.»
Definición del W3C
Árbol DOM

83

Formador: Borja Mulleras Vinzia


DOM: Document Object Model
Funcionamiento
§ Cuando creamos un documento HTML, este se compone de diferentes etiquetas que el
navegador debe interpretar para poder mostrar los elementos visuales que queremos que el
usuario vea en pantalla.

§ El navegador realiza la tarea de interpretar las etiquetas y genera una estructura (el DOM)
en la que organiza jerárquicamente todos los elementos que conforman el documento
(<html>, <body>, <a>…).

§ La estructura DOM o diagrama en árbol está compuesta por nodos que pueden ser padres,
hijos o hermanos de otros nodos. Existen diferentes tipos de nodo según su contenido.

84

Formador: Borja Mulleras Vinzia


DOM: Document Object Model

85

Formador: Borja Mulleras Vinzia


DOM: Document Object Model
Árbol DOM del documento

<html>
<head>
<title>DOM</title>
</head>
<body>
<h1>DOM</h1>
<p>
Ejemplo <em>árbol DOM</em>
<a href="#">Volver</a>
</p>
</body>
</html>

86

Formador: Borja Mulleras Vinzia


DOM: Document Object Model
Objetos predefinidos
§ Un documento HTML tiene objetos JavaScript predefinidos, que pueden ser manipulados de
forma programática con JavaScript y la interfaz de programación de aplicaciones (DOM
API).

window: referencia a la ventana propiamente tal.


Por ejemplo, el método alert(...)
Todos los elementos pertenecen implícitamente al pertenece al objeto window
objeto window. Si se abre una nueva ventana o
pestaña, corresponde a otro window.

document: es la raíz del documento HTML, y el


"padre" de todos los elementos. Provee atributos y Por ejemplo, document.write()
imprime texto
métodos para acceder a los elementos de la página,
lo que permite modificarlos dinámicamente, y de
este modo realizar los efectos interactivos.

87

Formador: Borja Mulleras Vinzia


DOM: Document Object Model
Objetos predefinidos
§ navigator: contiene información sobre el navegador. Permite particularizar la programación, lo
que es útil cuando existen diferencias entre los navegadores. También permite restringir una
aplicación a un tipo o versión de navegador.
§ location: contiene información sobre la URL de la página. Si se modifica, se abre una nueva
URL, lo que permite utilizarlo para navegar programáticamente.
§ screen: contiene información de la pantalla, incluyendo alto y ancho. Permite ajustar una
página en función de la resolución de pantalla.
§ history: contiene el historial de URLs visitadas, lo que permite volver atrás
programáticamente.

88

Formador: Borja Mulleras Vinzia


Casos de usos del lenguaje JavaScript
§ Modificar el contenido HTML y los estilos CSS, a través de la utilización del API DOM.
§ Controlar la visibilidad de una sección de la página, lo que permite hacer efectos como
pestañas, menús o acordeón.
§ Cambio dinámico de estilo css, lo que permite por ejemplo mostrar selecciones, o efectos de
habilitación y deshabilitación.
§ Crear controles personalizados que no existen nativamente en HTML, como barras de
progreso.
§ Actualizar secciones del documento pantalla, como por ejemplo una de noticias, sin tener
que recargar la página.

89

Formador: Borja Mulleras Vinzia


DOM – Funciones Javascript
//Obtener elementos P
var parrafos =
document.getElementsByTagName(“p");

//Obtener el primer párrafo


var primerParrafo = parrafos[0];

//Obtener y tratar todos los párrafos


for(var i=0; i<parrafos.length; i++) {
var parrafo = parrafos[i];
}

//Obtener nodos por Id


document.getElementById(“demo")

//Contenido HTML
Formador: Borja Mulleras Vinzia
document.getElementById("demo").innerHTML
DOM – Funciones Javascript
<html>
<body>
<p>An unordered list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementsByTagName("LI");
document.getElementById("demo").innerHTML =
x[1].innerHTML;
}
</script>
Formador: Borja Mulleras Vinzia
</body>
Ejercicios JS15-a

A partir del ejemplo anterior definir una lista de


bebidas ordenadas y numeradas. Solicitar al
usuario que introduzca el número de bebida que
quiere seleccionar y mostrar ese dato en pantalla.

Formador: Borja Mulleras Vinzia


DOM Crear Nodos

// Crear nodo de tipo Element


var parrafo = document.createElement("p");

// Crear nodo de tipo Text


var contenido = document.createTextNode("Hola
Mundo!");

// Añadir el nodo Text como hijo del nodo Element


parrafo.appendChild(contenido);

// Añadir el nodo Element como hijo de la pagina


document.body.appendChild(parrafo);

Formador: Borja Mulleras Vinzia


Ejercicios JS15-b

A partir del ejemplo anterior definir una lista de


bebidas ordenadas y numeradas. Solicitar al
usuario que introduzca el nombre de una nueva
bebida y mostrar ese dato en pantalla
añadiéndolo a la lista de bebidas.

Formador: Borja Mulleras Vinzia


DOM Eliminar Nodos

var negrita =
document.getElementById("provisional");
negrita.parentNode.removeChild(negrita);

<p>Esta página es <strong


id=“provisional”>muy
sencilla</strong></p>

Formador: Borja Mulleras Vinzia


Ejercicios JS15-c

A partir del ejemplo anterior definir una lista de


bebidas ordenadas y numeradas. Solicitar al
usuario que introduzca el nombre de una nueva
bebida y mostrar ese dato en pantalla
añadiéndolo a la lista de bebidas.

Además solicitar al usuario el número de una


bebida a eliminar y eliminarla.

Formador: Borja Mulleras Vinzia


Interfaz de programación de aplicaciones (DOM API)
Cambio de contenido
§ Para cambiar el contenido HTML de una parte de una pantalla en forma dinámica, se utiliza la
propiedad innerHTML. Aunque no es parte del estándar, todos los navegadores conocidos manejan la
propiedad. Por ejemplo, se puede modificar el contenido de un elemento.

Cuando se presiona el botón,


cambia dinámicamente el valor

97

Formador: Borja Mulleras Vinzia


Interfaz de programación de aplicaciones (DOM API)
Cambio de contenido
§ Código HTML y JavaScript:

<h1>Dynamic</h1>
<p id="par">
Valor aleatorio: 0 Al presionar el botón, se invoca
</p> la función change()

<input type="button" value="Cambiar"


onclick="change()">

Obtiene el objeto asociado al


<script> párrafo, con el id="par"
function change() {
var p = document.getElementById("par");
Genera un número aleatorio
var num = 1 + Math.floor((9*Math.random()));
entre 1 y 9
p.innerHTML = "Valor aleatorio: " + num;
} Cambia el contenido del objeto p,
</script> que corresponde al párrafo

98

Formador: Borja Mulleras Vinzia


Interfaz de programación de aplicaciones (DOM API)
Cambio de regla de estilo
§ Podemos cambiar dinámicamente la clase de estilo de una sección de pantalla. Por ejemplo,
un párrafo tiene un estilo normal y uno destacado, y se quiere que al pasar el puntero
sobre él, cambie.
.sec {
font-family: Courier;
border: 1px solid blue;
padding: 3px;
cursor: default;
width: 200px;
}

.pnormal {
font-weight: normal;
}

.phigh {
font-weight: bold;
}

99

Formador: Borja Mulleras Vinzia


Interfaz de programación de aplicaciones (DOM API)
Cambio de regla de estilo
§ Código HTML y JavaScript: Cuando se pasa el mouse sobre el área del
div, se invoca la función change(true)
<div class="sec"
onmouseover="change(true)"
onmouseout="change(false)"> Cuando se saca el mouse del área del div,
<p id="par" class="pnormal"> se invoca la función change(false)
Párrafo que cambia al pasar el mouse.
</p>
</div>

Obtiene el objeto asociado al


<script> párrafo, con el id="par"
function change(opt) {
var p = document.getElementById("par");
Cambia dinámicamente la
p.className = (opt) ? "phigh" : "pnormal";
clase de estilo del párrafo,
} según el parámetro
</script>

100

Formador: Borja Mulleras Vinzia


Interfaz de programación de aplicaciones (DOM API)
Control de visibilidad
§ Para controlar la visibilidad de una parte de una página, se controla el atributo de estilo
llamado display asociado a la rama del árbol DOM correspondiente.

101

Formador: Borja Mulleras Vinzia


Interfaz de programación de aplicaciones (DOM API)
Control de visibilidad
§ Estilos:

.header {
border: 1px solid black;
cursor: pointer;
width: 200px;
height: 30px;
padding: 3px;
background-color: #C0C0FF;
font-size: 1.1em;
}

.content {
border: 1px solid black;
font-size: 0.9em;
width: 200px;
height: 80px;
padding: 3px;
}

.ocultar {
display: none;
} 102

Formador: Borja Mulleras Vinzia


Interfaz de programación de aplicaciones (DOM API)
Control de visibilidad
§ Elementos HTML:
Al hacer click sobre el div, se ejecuta el
método JavaScript "visib"

<div class="header" onclick="visib('ht')">


HTML
</div>
<div class="content" id="ht">
Lenguaje de contenido web
</div>
<div class="header" onclick="visib('cs')">
CSS
</div>
<div class="content" id="cs" style="display: none">
Estilos gráficos
</div> Inicialmente oculta el contenido del
<div class="header" onclick="visib('js')"> div y el espacio que utiliza
JavaScript
</div>
<div class="content" id="js" style="display: none">
Lenguaje para interacción dinámica
</div>
103

Formador: Borja Mulleras Vinzia


Interfaz de programación de aplicaciones (DOM API)
Control de visibilidad
§ Función JavaScript:

function visib(divId) { array con ids de Accede al objeto del


var ar = ["ht", "cs", "js"]; los contenidos árbol DOM con el
for (var i=0; i < ar.length; i++) { contenido, dado el id.
var divElem = document.getElementById(ar[i]);
if (divElem == ar[i]) {
divElem.classList.remove('ocultar') Cambia el atributo de estilos
} else { display, en función del parámetro:
divElem.classList.add('ocultar') • remove: mostrar contenido
} • add: ocultar contenido
};
}
divId = "ht"
divId = "cs"

104

Formador: Borja Mulleras Vinzia


Interfaz de programación de aplicaciones (DOM API)
Timeout
§ A través del método setTimeout del objeto implícito window, se pueden ejecutar funciones
un tiempo después. Esto permite controlar efectos en el tiempo. Por ejemplo, una página
que muestra una clave durante 5 segundos, y luego la oculta.

§ Resultado:

Al presionar el botón, se muestra


durante 5 segundos la clave, y luego
5 seg se vuelve a ocultar

105

Formador: Borja Mulleras Vinzia


Interfaz de programación de aplicaciones (DOM API)
Cambio de contenido
§ Código HTML y JavaScript:
Al presionar el botón se invoca la
función manejadora showPwd()
<h1>Timeout</h1>
<p id="pwd">****</p>
<input type="button" value="Mostrar clave" onclick="showPwd()">

<script> Cambia el contenido del objeto con id="pwd", que


function showPwd() { corresponde al párrafo que muesta la clave
var pwd = "4321";
document.getElementById("pwd").innerHTML = pwd;
setTimeout(hidePwd, 5000); 5000 milisegundos después, invoca la función
} hidePwd. Se coloca la referencia, sin paréntesis

function hidePwd() {
document.getElementById("pwd").innerHTML = "****";
} Vuelve a colocar los **** en el
</script> contenido del párrafo con la clave

106

Formador: Borja Mulleras Vinzia


Actividad

Procesar eventos de usuarios y validarlos mediante una función JS


manejadora.

1. Modifica el formulario de autenticación de la actividad previa, Evento


onclick, login.html y asocia al evento onclick un función manejadora
llamada validar().
2. Para implementar el código de validar() crearemos un fichero
Javascript login.js
3. La lógica de validar() será comparar los valores introducidos en los
campos de usuario y password y validarlos con tu nombre y una
contraseña fácil. Si los valores coinciden mostrar cuadro de éxito o fallo
en caso contrario.
30 min

107

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
Geo-Localización
§ Con navigator.geolocation, controlamos el soporte, a la vez que programamos las peticiones
y respuestas.
§ Una llamada a este objeto desde JavaScript, nos devolverá un valor falso si no existe.
§ Para programar el funcionamiento para un navegador podríamos usar:
<head>
<meta charset="utf-8" />
<title>Geo-localización nativa con HTML 5</title>
</head>
<body onload="comprobarNavegador()">
<h1>Ejemplo de Geo-localización nativa con HTML 5</h1>
<p id="nivelSoporte">La Geo-localización nativa NO está soportada en este
navegador.</p>
<h2>Ubicación actual:</h2>
<h5>Latitud: <span id="latitud">n/c</span></h5>
<h5>Longitud: <span id="longitud">n/c</span></h5>
<h5>Precisión: <span id="precision">n/c</span></h5>

108

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
Geo-Localización
§ Primero, comprobamos el soporte en el navegador llamando a la función de
geolocalización:
<script>
function comprobarNavegador() {
if(navigator.geolocation) {
document.getElementById("nivelSoporte").innerHTML =
"La Geo-Localización HTML5 está soportada en este navegador.";
navigator.geolocation.getCurrentPosition(updateLocation);
}
}

§ A continuación, consultamos los datos geográficos.

109

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
Geo-Localización
function updateLocation(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var pre = position.coords.accuracy;
if (!lat || !lon) {
document.getElementById("nivelSoporte").innerHTML =
"Geo-Localizacion HTML5 soportada, pero no en este momento.";
return;
}
document.getElementById("latitud").innerHTML = lat;
document.getElementById("longitud").innerHTML = lon;
document.getElementById("precision").innerHTML= pre + " ms.";
}
</script>
</body>
</html>

110

Formador: Borja Mulleras Vinzia


Multimedia: Tipos
§ Multimedia hace referencia a cualquier objeto o sistema que utiliza múltiples medios de
expresión digitales para presentar la información.
§ Los medios pueden ser variados, desde texto e imágenes, gráficos, animación, sonido,
video, alto nivel de interactividad.
§ La realidad virtual es una extensión de multimedia que utiliza los elementos básicos de ésta
como imágenes, sonido y animación.

111

Formador: Borja Mulleras Vinzia


Multimedia: Audio
Formatos y Compatibilidad con navegadores
Formato Media Type

MP3 audio/mpeg

WAV audio/wav
OGG audio/ogg

Browser MP3 WAV OGG


Edge/IE SI NO NO
Chrome SI SI SI
Firefox SI SI SI
Safari SI SI NO
Opera SI SI SI

112

Formador: Borja Mulleras Vinzia


Multimedia: Audio
§ Para incluir y reproducir un archivo de audio se usa el elemento HTML <audio>
<audio controls>
<source src="opera.ogg" type="audio/ogg">
<source src="opera.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</video>
§ El atributo controls muestra controles de audio, como reproducción, pausa y volumen.

§ El elemento <source> permite especificar archivos de audio alternativos entre los que el
navegador puede elegir. El navegador utilizará el primer formato reconocido.

§ El texto entre <audio> </audio> sólo se mostrará en los navegadores que no lo


soportan. Navegadores compatibles: Chrome 4.0, Internet Explorer 9.0, Firefox 3.5, Opera
10.5 y Safari 4.0.

113

Formador: Borja Mulleras Vinzia


Multimedia: Video
Formatos y Compatibilidad con navegadores

Formato Media Type

MP4 video/mp4

WebM video/webm
Ogg video/ogg

Browser MP4 WebM Ogg


Edge SI SI SI
Chrome SI SI SI
Firefox SI SI SI
Safari SI SI NO
Opera SI SI SI

114

Formador: Borja Mulleras Vinzia


Multimedia: Video
§ Para incluir y reproducir un video se usa el elemento HTML <video>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
§ El atributo controls muestra controles de video, como reproducción, pausa y volumen.
Podemos usar autoplay para que el video se inicie automáticamente.
§ Es recomendable especificar los atributos width y height (ancho y alto).
§ El elemento <source> permite especificar archivos de video alternativos entre los que el
navegador puede elegir. El navegador utilizará el primer formato reconocido.
§ El texto entre <video> </video> sólo se mostrará en los navegadores que no lo
soportan. Navegadores compatibles: Chrome 4.0, Internet Explorer 9.0, Firefox 3.5, Opera
10.5 y Safari 4.0.

115

Formador: Borja Mulleras Vinzia


Multimedia
Formato Extensión Descripción

MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on
.mpeg the web. Not supported anymore in HTML.

AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and
TV hardware. Plays well on Windows computers, but not in web browsers.
WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras
and TV hardware. Plays well on Windows computers, but not in web browsers.
QuickTime .mov QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays
well on Apple computers, but not in web browsers.
RealVideo .rm RealVideo. Developed by Real Media to allow video streaming with low bandwidths. Does not
.ram play in web browsers.
Flash .swf Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in
.flv web browsers.
Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.
WebM .webm WebM. Developed by Mozilla, Opera, Adobe, and Google. Supported by HTML.
MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Commonly used in video cameras and
or MP4 TV hardware. Supported by all browsers and recommended by YouTube.
Formatos compatibles con el estándar HTML: MP4, WebM y Ogg
116

Formador: Borja Mulleras Vinzia


JavaScript (ES6)

2. Aplicación de los elementos más


avanzados de JavaScript
§ Herencia basada en prototipos
§ Herencia en ES6
§ Programación funcional: map, filter y reduce
§ Módulos y elementos introducidos en ES6

02
117

Formador: Borja Mulleras Vinzia


Objetos
POO (Programación Orientada a Objetos):
Paradigma de programación en la que todo Propiedades o atributos
§ Tipo de pantalla
se representa como una entidad u objeto de § Espacio de memoria
la vida real o imaginario. § Cantidad de tonos
§ Tipo de antena
§ Cantidad de idiomas
En su definición se especifican: § Otros
§ Propiedades: características que Métodos o comportamientos
distinguen a los objetos del mismo § Iniciar alarma
§ Asignar tonos
tipo o Clase. § Registrar llamadas
§ Superclase: Teléfonos
§ Métodos: funcionalidades del § Clase: Teléfono celular
§ Iniciar juego
§ Utilizar calculadora
objeto. Tareas que se pueden § Subclase: SmartPhone § Enviar mensajes
realizar con las propiedades de un § Otros

objeto.

̎La orientación a objetos será la más importante de las tecnologías que surjan en los años noventa̎
Bill Gates

118

Formador: Borja Mulleras Vinzia


Clase o Tipo
§ Una clase especifica qué propiedades y métodos caracterizan a
sus objetos, pero no asigna valores a sus miembros.

§ Automóvil
§ Marca
§ Modelo

§ Persona Ejemplos de clases


§ Nombre y sus propiedades
§ Edad

§ Estudiante
§ Nivel
§ Curso
§ Especialidad

119

Formador: Borja Mulleras Vinzia


Objeto o Instancia
§ Un objeto es una instancia de clase definida, con valores en su
propiedades o atributos.
§ Persona
§ Nombre: Luis
§ Edad: 36
§ Alumno
§ Nombre: Juan
§ Edad: 19
§ Carrera: Diseño Gráfico

Ejemplos de objetos y sus estados


(valores de sus propiedades)

120

Formador: Borja Mulleras Vinzia


Herencia y Jerarquía de clases

121

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Objetos
§ Definición de un objeto:

var person = {
firstName: "John",
lastName : "Denver", Propiedades del objeto {
id : 12345, "id" :1,
fullName : function() { "name" :"Me",
return this.firstName + " " + this.lastName; "email" : [email protected]
} }
};

Método del objeto

122

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
Objetos
§ Formas de acceder a propiedades y métodos de un objeto:

// person.id
nombreObjeto.nombrePropiedad;

// person["id"]
nombreObjeto["nombrePropiedad"]

// person.fullName()
nombreObjeto.nombreMetodo();

123

Formador: Borja Mulleras Vinzia


JavaScript ES6
Clases
§ Nueva sintaxis para escribir clases en JavaScript
§ Declaración explícita de clases con class

Declaración de Declaración de
clases en JS clases en ES6
tradicional
124

Formador: Borja Mulleras Vinzia


JavaScript ES6
Herencia
§ Utilizar extends después de la declaración de la clase (class) e indicar el nombre de la clase de la cual
queremos que herede todos los métodos y propiedades:
Herencia en ES6

Herencia con JS
tradicional

125

Formador: Borja Mulleras Vinzia


Programación Funcional
Código funcional
§ Es un sub-paradigma del paradigma declarativo, esto afecta la forma en que escribes código funcional.
Generalmente conduce a menos código, porque JavaScript ya tiene muchas de las funciones integradas que
normalmente necesitas
§ Reglas del código funcional: Diseñar a partir de funciones puras y aisladas + Evitar mutabilidad y efectos
secundarios

126

Formador: Borja Mulleras Vinzia


Programación Funcional
map, reduce y filter
§ Las funciones de arreglos incluidas en JavaScript .map, .reduce y .filter aceptan una función. Son ejemplos de
funciones de orden superior, ya que iteran sobre un arreglo y llaman a la función que recibieron para cada elemento
del arreglo.

127

Formador: Borja Mulleras Vinzia


JavaScript (ES6)

3. Interpretación y reescritura de llamadas,


datos y código AJAX
§ Callback
§ Promises
§ Programación asíncrona, HTTP, API REST y Fetch API

02
128

Formador: Borja Mulleras Vinzia


Callback
Funciones Callback
§ Una callback es una función anónima que se le pasa como argumento a otra función y se ejecuta
en un determinado momento (asíncrona).
§ Utilidad: cuando no sabemos lo que tarda en responder una función con el valor de retorno.
§ Casos de uso: programación asíncrona y reactiva, funciones de escritura en ficheros y en
peticiones HTTP en servicios web de tipo REST.

129

Formador: Borja Mulleras Vinzia


Programación Asíncrona

130

Formador: Borja Mulleras Vinzia


Sintaxis básica JavaScript
JavaScript ES5: Closures
§ En JavaScript toda variable declarada fuera de una función, pertenece a este objeto.
§ Esto puede entrar en conflicto con otros elementos declarados en librerías de soporte
cargadas por la página.
§ Pero una variable declarada dentro de una función es local a la función…
§ La solución se presenta en forma de una construcción llamada closure.

var nombre_numero_c = function () {


var numeros = ['cero', 'uno', 'dos', 'tres', 'cuatro'];
return function (n) {
return numeros[n];
};
}();
alert(nombre_numero_c(1));

131

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
Programación Reactiva
§ Programación Asíncrona
§ Considera el procesamiento de datos de manera asíncrona
§ Procesamiento de datos = Flujo de datos asíncrono (Stream)
§ Establece los mecanismos para manipular streams (Observable y Observer)
§ Implementación ReactiveX: API for asynchronous programming with observable streams
§ Soporte para distintos lenguajes de programación
§ RxJX Reactive API para lenguaje JavaScript

132

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
API de AJAX con soporte de datos JSON { "id" :1,
"name" :"Me",
"email" : "[email protected]" }
§ AJAX significa Asynchronous JavaScript And XML.
§ La API de AJAX permite la ejecución de llamadas asíncronas al servidor, que devuelven
datos para actualizar fragmentos de una página.
§ Se basan en el objeto XMLHttpRequest.
§ Existen dos versiones o niveles de llamada.
§ El nivel 1, es prácticamente compatible con todos los navegadores, incluyendo los más
antiguos.
§ El nivel 2, ya disponible en todos los navegadores modernos, permite controlar el nivel de
progreso de la llamada, con lo que se simplifica el código.
§ Mediante este tipo de llamadas, podemos conseguir actualizaciones parciales de la página,
logrando una experiencia de usuario mucho más agradable.

133

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
API de AJAX con soporte de datos JSON
§ Hay que tener en cuenta que, por motivos de seguridad, este API genera un error en la
respuesta cuando se intenta llamar a servicios de este tipo en un dominio distinto.
§ En otros entornos, como Silverlight, los ficheros de servidor CrossDomain.xml, permiten
establecer los permisos para este tipo de llamadas.
§ Un objeto XMLHttpRequest puede devolver datos en formatos diversos, como XML, JSON,
Texto plano, etc.
§ La petición adopta un formato como el siguiente:

GET /recurso HTTP/1.1


Host: host:puerto
User-Agent: Mozilla/5.0

134

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
API de AJAX con soporte de datos JSON

function leerVentas() {
var url = "http://localhost:1565/DemosJS5/ventas.json";
var request = new XMLHttpRequest();
request.responseType = "application/json"; //Predeterminado
request.open("GET", url); //Solo configura la llamada
request.onload = function() {
if (request.status == 200) { //200 significa correcto.
actualizarIU(request.responseText); }
};
request.send(null);
}

135

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
API de AJAX con soporte de datos JSON

function actualizarIU(respuestaJSON) {
var DivVentas = document.getElementById("DIV_ventas");
var ventas = JSON.parse(respuestaJSON);
for (var i = 0; i < ventas.length; i++) {
var venta = ventas[i];
var div = document.createElement("div");
div.setAttribute("class", "FormatoVenta");
div.innerHTML = "Total ventas de " + venta.name + ": " + venta.TVentas;
DivVentas.appendChild(div);
}
}

136

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
API de AJAX con soporte de datos JSON
§ En el caso de que tengamos que dar soporte a algunos navegadores muy antiguos
deberíamos comprobar el evento onreadystatechange

function leerVentas_XHRv1() {
var url = "http://localhost:1565/DemosJS5/ventas.json";
var request = new XMLHttpRequest();
request.open("GET", url);
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
actualizarIU(request.responseText); }
};
request.send(null);
}

137

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
API de AJAX con soporte de datos JSON
§ Para la manipulación de datos JSON, las implementaciones de JavaScript de los
navegadores actuales, incluyen un objeto del mismo nombre, que incorpora métodos útiles
para facilitar su manejo.
§ stringify() convierte un objeto JavaScript a cadena.
§ parse() realiza la operación contraria.

138

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
API Storage: Almacenamiento local y de sesión
§ El objetivo de estas API es la persistencia de información entre distintas peticiones
Web.
§ Almacenar datos entre peticiones, de una forma distinta y más adecuada a la que es
posible hacer ahora mediante cookies.
§ Estos servicios son accedidos mediante objetos vinculados con el objeto window:
window.sessionStorage y window.localStorage
§ El funcionamiento es a través de una "base de datos" manejada internamente por el
navegador y accedida mediante estas API.
§ El primer paso es la comprobación del soporte por parte del navegador utilizado.

139

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
Almacenamiento local y de sesión
• Para comprobar si una referencia a estos objetos devuelve un valor
verdadero:
function comprobarSoporte() {
//sessionStorage
if (window.sessionStorage) {
alert('Este navegador soporta sessionStorage');
} else {
alert('Este navegador NO soporta sessionStorage');
}
//localStorage
if (window.localStorage) {
alert('Este navegador soporta localStorage');
} else {
alert('Este navegador NO soporta localStorage');
}
}

140

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
Almacenamiento local y de sesión
§ sessionStorage y localStorage disponen de varios métodos para asignación (escritura) y
recuperación (lectura) de información.
§ En la actualidad solo encontramos soporte para cadenas.
§ La instrucción de escritura utilizada es setItem(clave, valor).
§ Recibe parejas clave/valor y las almacena para recuperación posterior en la base de
datos asignada (al navegador).
§ La lectura se realiza mediante el método getItem(clave) que permite recuperar
cualquier valor guardado a partir de su clave y la devuelve en formato cadena.

141

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
Almacenamiento local y de sesión

<body>
<form action="valida.html" id="Formulario" >
<p>Almacenamiento de valores de sesión</p>
<input type="text" id="claveini" />
<input type="button" value="Guardar"
onclick="escribirClave('Dato');" /><br />
<input type="text" id="claveLeida" />
<input type="button" value="Leer" onclick="leerClave('Dato');"
/>
</form>
</body>

142

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
Almacenamiento local y de sesión

function escribirClave(datos) {
var valor = document.getElementById("claveini").value;
window.sessionStorage.setItem(datos, valor);
}

function leerClave(datos) {
var valor = window.sessionStorage.getItem(datos);
document.getElementById("claveLeida").value = valor;
}

143

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
Almacenamiento local y de sesión
§ También existen limitaciones a la cantidad de información que puede guardarse en el
apartado valor vinculado con una clave dada.

§ Existen unos valores de cuota que deberán de ser configurables por el usuario:

sessionStorage localStorage
La persistencia se limita a la página o La persistencia se mantiene incluso
solapa de navegación dentro del sitio después de cerrar el navegador
Los valores almacenados o recuperados Los valores se mantienen entre distintas
solo son visibles desde la página o solapa ventanas o solapas ejecutando el mismo
que los creó. origen URL.

144

Formador: Borja Mulleras Vinzia


localStorage vs sessionStorage

localStorage sessionStorage
Stores data with no expiration date Stores data only for a session (until the tab/browser is closed)

Gets cleared through JS or Browser cache / Locally Stored Data Storage limit is larger than a cookie (at least 5 MB). Max 4KB

Changes available for all current and future visits to the site Persists over page reloads and restores.
Opening a new tab/window will initiate a new session.

Data is never transferred to the server*

§ Both extend Storage


§ Both can only be read on client-side
§ Web storage is per origin (per domain and protocol)
§ Both allow to storage JS primitive types (integers, strings, …) but nor arrays neither objects à we must convert them to
JSON

145

Formador: Borja Mulleras Vinzia


localStorage methods

Method Description
setItem() Add key and value to local storage

getItem() Retrieve a value by the key

removeItem() Remove an ítem by key

clear() Clear all storage

localStorage.length Nº de elementos almacenados en el espacio local.

146

Formador: Borja Mulleras Vinzia


HTML Web Storage Objects

Check browser support for localStorage and


sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support…
}

147

Formador: Borja Mulleras Vinzia


IndexedDB API

IndexedDB persistently allows to store objects indexed with a "key"

§ It’s an asynchronous API


§ IndexedDB is object-oriented
§ IndexedDB databases store key-value pairs
§ It’s build on a transactional database model
§ It does not use SQL

148

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
API para acceso a archivos locales (File API)
§ Podemos programar una sencilla interfaz que habilite la selección de uno o más
archivos por parte del usuario y muestre posteriormente la información de detalles de
esos archivos en la página.
§ En la parte HTML 5 tendríamos:
<!DOCTYPE html >
<html>
<head>
<title>API de ficheros</title>
</head>
<body>

<h3>Seleccionar fichero(s)</h3>
<p><input id="files-upload" type="file" multiple /></p>
<h3>Ficheros subidos</h3>
<ul id="file-list"><li>(no hay ficheros todavía)</li></ul>

149

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
API para acceso a archivos locales (File API)

<script>
(function () {
// Recuperamos las referencias a los dos elementos implicados
var filesUpload = document.getElementById("files-upload"),
fileList = document.getElementById("file-list");

// Función para recorrer el conjunto de archivos


// y actualizar la interfaz de usuario con la información
// sobre ellos.
function traverseFiles(files) {
var li,file,fileInfo;
fileList.innerHTML = "";

150

Formador: Borja Mulleras Vinzia


Casos de uso JavaScript
API para acceso a archivos locales (File API)

for (var i = 0, il = files.length; i < il; i++) {


li = document.createElement("li");
file = files[i];
fileInfo = "<div><strong>Fichero:</strong> " + file.name + "</div>";
fileInfo += "<div><strong>Tamaño:</strong> " + file.size + " bytes</div>";
fileInfo += "<div><strong>Tipo:</strong> " + file.type + "</div>";
li.innerHTML = fileInfo;
fileList.appendChild(li);
};
};
filesUpload.onchange = function () {
traverseFiles(this.files);
};
})();

151

Formador: Borja Mulleras Vinzia


JavaScript (ES6)

5. Manipulación de código de terceros


6. Elaboración de documentación técnica y de usuario
de lenguaje Javascript
§ Documentación destinada al usuario final de una
aplicación
§ Documentación técnica destinada a programadores

02
152

Formador: Borja Mulleras Vinzia


Documentación de aplicaciones web

¿Para qué documentar? / Beneficios


§ Evitar problemas por falta de planificación y diseño previo del componente / API
§ Evitar inconsistencia entre los objetos y métodos
§ Evitar agujeros de seguridad
§ Uso de herramientas que tienen en cuenta la usabilidad y necesidades de los
consumidores/aplicaciones que van a utilizar los servicios
§ Realizar mocks testeables
§ Posibilitar el versionado
§ Crear de forma conjunta al desarrollo de la documentación

153

Formador: Borja Mulleras Vinzia


Herramientas de documentación técnica
§ La documentación técnica va en paralelo con el proceso de desarrollo y no es necesario
esperar a que termine todo el trabajo.

§ Javadoc: generador de documentación creado por Sun Microsystems para


el lenguaje Java para generar documentación de API en formato HTML
desde el código fuente de Java.
§ Markdown: lenguaje de marcado suave con sintaxis de formato de texto
plano. Permite convertir a HTML y muchos otros formatos utilizando una
herramienta con el mismo nombre. Markdown se usa a menudo para
formatear archivos “readme”, para escribir mensajes en foros de discusión
online y para crear texto usando un editor de texto simple.
§ Swagger: ayuda en el desarrollo de todo el ciclo de vida de la API, desde
el diseño y la documentación, hasta la prueba y la implementación.
§ RAML: lenguaje de definición de APIs que permite escribir su especificación
siguiendo un estándar.

154

Formador: Borja Mulleras Vinzia


Herramientas para la creación y diseño de APIs
RAML (RESTful API Modeling Language)
§ Lenguaje de definición de APIs que permite escribir su especificación
siguiendo un estándar.
§ Lenguaje de modelado para definir APIs REST de sintaxis sencilla y
fácilmente comprensibles para seres humanos y software.
§ Especificación no propietaria e independiente basada en YAML y JSON.
§ Permite definir versión, recursos, métodos, parámetros de URL, seguridad
respuestas, tipos de medios y otros componentes HTTP básicos.
§ Genera la documentación de la API, casos de prueba, implementa un mock
para acelerar el desarrollo y genera el esqueleto de nuestra aplicación.
§ Permite definir las respuestas y ejemplos escritos en la especificación como
documentación.
155

Formador: Borja Mulleras Vinzia


156

Formador: Borja Mulleras Vinzia


Herramientas para la creación y diseño de APIs
Swagger

§ Permite describir, producir, consumir y visualizar


APIs RESTful.
§ Framework open source para generar
documentación de APIs RESTful.
§ Interfaz visual a modo de sandbox para testear
llamadas al API, y consulta de su documentación
en el navegador.
§ Código del servidor sincronizado automáticamente
con la documentación generada.
§ Generación de documentación para Java,
Javascript, Ruby, PHP, Scala, ActionScript y su
sandbox correspondiente.

157

Formador: Borja Mulleras Vinzia


Swagger

158

Formador: Borja Mulleras Vinzia


Swagger2
Documentación formato Web
§ http://localhost:8080/swagger-ui.html

159

Formador: Borja Mulleras Vinzia


swagger.json
Documentación formato JSON
§ /v2/api-docs

160

Formador: Borja Mulleras Vinzia


Swagger2
Documentación con visor JSON

161

Formador: Borja Mulleras Vinzia


§ ECMA International
https://www.ecma-international.org/

§ World Wide Web Consortium (W3C)


https://www.w3.org/

§ Principios de Accesibilidad (WAI)


https://www.w3.org/WAI/fundamentals/accessibility-principles/es

§ Web Content Accessibility Guidelines (WCAG)


https://www.w3.org/WAI/standards-guidelines/wcag/

162

Formador: Borja Mulleras Vinzia


§ RAML Specification: https://raml.org/developers/raml-100-tutorial
§ Swagger: https://swagger.io
§ Otras webs de referencia:
§ http://www.w3schools.com/
§ http://stackoverflow.com/
§ http://www.codecademy.com/

163

Formador: Borja Mulleras Vinzia


IFCD0110
Módulo 2
Javascript

Formador: Borja Mulleras Vinzia

También podría gustarte