Tema 4

JAVASCRIPT
Lenguaje interpretado, dialecto de ECMAScript.
La sintaxis es semejante al C pero las variables no están tipificadas y no distingue entre mayúsculas y
minúsculas.
No existe un cuerpo principal del programa (main), todo lo que no esté dentro de una función es ejecutado.
En JavaScript todo son objetos.
Declarar las variables y funciones antes de usarse.
No es obligado usar ; al final de las sentencias
El sangrado es para mejorar la lectura.
Un grupo de sentencias multiples se agrupan con {}

Herramientas en Javascript

JavaScript: Integrado en navegador o Node.

API del navegador/Servidor: construcciones integradas en el navegador/servidor que se asientan sobre el
lenguaje JavaScript y le permiten implementar la funcionalidad más fácilmente.
API de terceros: construcciones integradas en plataformas de terceros (por ejemplo, Twitter, Facebook) que
le permiten usar algunas de las funciones de esas plataformas en sus propias páginas web (por ejemplo,
mostrar sus últimos Tweets en su página web).
JavaScript Library: por lo general, uno o más archivos de JavaScript que contienen funciones personalizadas
que puede adjuntar a su página web para acelerar o permitir la escritura de funciones comunes. Los
ejemplos incluyen jQuery, Mootools y React .
Frameworks de JavaScript: (por ejemplo, Angular y Ember - Expres,Koa.js..) tienden a ser paquetes de HTML,
CSS, JavaScript y otras tecnologías que instala y luego se usa para escribir una aplicación completa desde
cero.
Objetos JS

Una lista es en realidad una clase de objeto.

Un objeto de JavaScript es un array asociativo formado por sus propiedades y sus métodos.
Objetos predefinidos en el núcleo de JavaScript:
Date: objeto genérico para representar fechas (por defecto es la fecha actual). let fin = Date.now();
Math: objeto que incorpora las funciones matemáticas y constantes. var pi = Math.pi;
console: objeto para comunicarnos con la consola console.log('Hola');.

● Instancia directa formato breve.

personObj = {nombre: "Carlos Sempere", apodo:"Doe", edad:50};

● Instancia directa creando objeto "vacío". ● Con un constructor.

var Autor = new Object(); function Persona(nombre, apodo, edad){

Autor.nombre = "Carlos Sempere"; this.nombre = nombre;
Autor.apodo = "Doe" ; this.apodo = apodo;
Autor.edad = 50; this.age = edad;
//objeto 'Autor' con atributos }
var Autor = new Persona("Anas Sempere",
"Doe", 50);

Declaracion de variables
var: permite definir una variable local en una función o global si está fuera de una función.
let: declara una variable local al ámbito en el que esté definida.
const: Declara una constante de solo lectura en un ámbito.

var z; // sin inicializarla (vale undefined)

var x = 42;
y = 42 // sin declarar variable
let y = 13;
const PI = 3.14;
let arr = [ 3 , 5 , 7 ];
arr.foo = "hola";
 ● Uso de un array: ● Recorrido arrays
//Directamente con elementos const numeros = [1, 2, 3, 4, 5];
let colors = ["red", "green", "blue"]; for (let i = 0; i < numeros.length; i++) {
//Crear un array vacio y luego poner los console.log(i,numeros[i]);
elementos: }
let colors = new Array(); for (let i in numeros) {
colors[0] = "red"; colors[2] = "blue"; console.log(numeros[i]);
colors[1]="green"; }
//Crear un array con sus elementos: for (let i of numeros) {
let colors = new Array(3,2,1,0); console.log(i);

Funciones
function grado() {
function titulo(name) {
return "Dr. " + name; }
return titulo; //una función!
}
let phd = grado();
phd("Turing"); //Dr Tuning

● asignar funciones a variables, y referenciarlas utilizando la variable

● pasar funciones como parámetros a otras funciones
● obtener funciones como resultados de la ejecución de la función.

DOM -> DOCUMENT OBJECT MODEL

● Interfaz de programación para documentos HTML,SVG o XML.
● Conecta documentos ( HTML, SVG o XML ) con lenguajes de programación, modelado los
documentos como objetos.
● Interfaz de lenguaje neutral independiente de plataforma que permite a los programas y scripts el
acceso dinámico y la actualización del contenido, la estructura o estilo de documentos.
● Proporciona una representación estructurada del documento como una estructura lógica que es
muy parecida a un árbol. Cada elemento es un nodo (document, head, frame, body, p, div) los cuales
contienen propiedades, métodos y eventos asociados a los mismos.
 Árbol del DOM
● root node: Nodo raíz (no tiene padre).
● father node: Todos los nodos (excepto raíz) tienen padre.
● child node: Un nodo puede tener varios hijos.
● leaf node: Un nodo hoja es un nodo sin hijos.
● sibling nodes: Los nodos hermanos comparten el mismo padre.

Tipos de nodos

● DOCUMENT_NODE: Representa el documento entero.

● ELEMENT_NODE: Las tiquetas son nodos tipo elemento.
● ATTR_NODE: Los atributos de las etiquetas. Se asocia a un nodo elemento.
● TEXT_NODE: Contiene el texto entre las etiquetas de un elemento.
● COMMENT_NODE: Representa un comentario.
● DOCUMENT_TYPE_NODE: Contiene el docType del documento.
● DOCUMENT_FRAGMENT_NODE: Representa un fragmento de documento que debe estar bien
formado (“template”).

Ejemplo DOM PHP Ejemplo DOM JS en navegador

<?php var father, child;
$doc = new DOMDocument(); father = document.querySelector('head');
$root = $doc->createElement('html'); child = document.createElement('title');
$doc->appendChild($root); child.textContent = 'HTMLDOM';
$head = $doc->createElement('head'); father.appendChild(child);
$root->appendChild($head); father = document.querySelector('body');
child = document.createElement('h1');
$title = $doc->createElement('title'); child.textContent = 'Bienvenido <span > Pepe </span>';
$title->appendChild ($doc->createTextNode child = document.createElement('h2');
('Este es el título')); child.innerHTML = 'Adios <span > Pepe </span>';
$head->appendChild($title); father.appendChild(child);
$body = $doc->createElement('body');
$root->appendChild($body);
$h1 = $doc->createElement('h1');
$root->appendChild($h1);
$h1->appendChild($doc->createTextNode
('Esto es el cuerpo'));
$doctype="<!DOCTYPE html >";
echo $doctype.$doc->saveHTML();
?>
Componentes navegador WEB
● Interfaz de usuario : incluye la barra de direcciones, el botón de avance/retroceso...Todo excepto la
ventana principal donde se muestra la página web.
● Motor del Navegador : coordina las acciones entre la interfaz y el motor de renderización. Carga URL,
mensajes error, botón atrás.
● Motor de renderización : responsable de mostrar el contenido.
● Red : responsable de las llamadas de red, como las solicitudes HTTP (Caché de documentos).
● Intérprete de JavaScript : permite analizar y ejecutar el código Javascript. El resultado se pasa al
motor de renderización.
● Almacenamiento de datos : capa de persistencia. Gestiona los datos de usuario, tales como
cookies,indexDB, WebStorage.
● Backend de interfaz de usuario: proporciona primitivas de dibujo, widgets de la interfaz de usuario,
fuentes, etc. (utiliza métodos sistema operativo)

● Un motor de renderizado (web browser engine) es el software que toma contenido marcado (como
HTML, XML, archivos de imágenes, etc.) e información de formateo (como CSS, XSL, etc.) y luego
muestra el contenido ya formateado en la pantalla.
■ Los motores de renderizado lo usan los navegadores web, clientes de correo electrónico, u
otras aplicaciones que deban mostrar contenidos web.
■ Cada motor de renderizado del navegador suele tener su propio intérprete Javascript (script
engine).

Render Tree
● Los árboles DOM y CSSOM se combinan para formar el árbol de representación.
● Render tree: El árbol de representación solo contiene los nodos necesarios para representar la
página.
● Layout: El diseño calcula la posición y el tamaño exactos de cada objeto.
● Paint: El último paso es la pintura, que recibe el árbol de representación final y representa los píxels
en la pantalla.
JS en el navegador
● Dentro de la etiqueta script tanto en la cabecera como en el body.
<script> console.log(‘hola’); </script>
● Importando un fichero externo
<script src="mi_url" defer></script>
<script src="mi_url2" defer></script>
La etiqueta script tiene 2 atributos cuando se importa un el código de un fichero externo:
● async: Indica que los recursos se cargan asíncronamante y se ejecutan cuando están preparados
● defer: Los recursos se cargan asíncronamente y se ejecutan cuando el DOM se ha cargado
ejecutándose los scripts por orden.

DIFERENCIAS JAVASCRIPT/NODEJS
JavaScript se ejecuta en el navegador, mientras que el uso de Node.js nos permite ejecutar JavaScript fuera
del navegador (Script Engine V8).

La salida de JavaScript en el navegador puede ser:

● HTML element: element.innerHTML().
● HTML output: document.write().
● En un cuadro de alerta: window.alert().
● En la consola del navegador: console.log().

API HTML DOM

Definen la funcionalidad de cada uno de los elementos del HTML. Estas interfaces ofrecen acceso a la
ventana del navegador y al documento que contiene el HTML, así como al estado del navegador, los
complementos disponibles.

Interfaz WINDOW
● La interfaz Window representa una ventana que contiene un documento DOM HTML.
● El objeto window es el de mayor nivel en la jerarquía de objetos de JavaScript en el navegador.
● Es un objeto global en JavaScript. Contiene todas las variables y funciones globales.
● Representa la "ventana del navegador" y proporciona los métodos para controlarlo.

● window : OBJETO GLOBAL que contiene todas las variables.

● window.document o document : objeto que tiene el documento html cargado en el navegador, o sea
el DOM del documento HTML.
Document Object
● Es el Nodo raíz del HTML DOM
● Todos los nodos heredan los atributos del objeto eventTarget
● Atributos:
○ document.documentURI: URI del documento
○ document.contentType: tipo de contenido (html, imagen, etc.)
○ document.styleSheets: node con las hojas de estilos
○ document.images : lista de imágenes
○ document.anchors: lista de hiperenlaces
○ document.body: nodo del elemento body
NODO ELEMENT Y DOCUMENT
Propiedades de un elemento x:
x.events: lista de Eventos de x
x.methods: lista de métodos de x
x.elements: colección de nodos de tipo elementos de x
x.name: lista de hijos de x con el nombre 'name'
x.innerHTML: asigna o devuelve el contenido html del nodo elemento(Crítico).
x.style: permite dar estilo a las etiquetas.
Eventos:
x.blur(): Quita el foco en de un elemento.
x.click(): Realiza un clic en un elemento.
x.focus(): Pone el foco en un elemento.
x.toString(): Convierte el contenido en una cadena.

Selección de nodos con MediaQueries

Podemos utilizar la notación de los mediaqueries de las reglas CSS para seleccionar nodos document o
element.
● x.querySelector(selector) // Recuperar el primer nodo que cumple la condición
● x.querySelectorAll(selector) //Recuperar todos los nodos que cumplen la condición
x.querySelector("div");
x.querySelector("#form1");
x.querySelectorAll("div");
THIS OBJECT
● Cuando estamos dentro del atributo de una etiqueta html, this se refiere a la etiqueta que contiene
el atributo.
● Cuando estamos en un Objeto, this.xxx se llama dentro de un método propiedad, refiere al objeto
que lo contiene.
● En otro caso, this se refiere a la variable global, window del documento HTML activo cargado en la
ventana.Esto permite en objetos como alert o document, no referenciar al padre window.

Gestión de eventos
● EventTarget permite detectar/recibir los eventos que se producen en el DOM o HTML DOM
● Window, Document y Element (SVGELEMENT)soportan definir detectores de eventos, “event
handlers”.
<script type="text/javascript"> function recuperar(Id) {
var Autor=""; var node0=null; var node = document.getElementById(Id);
node.appendChild(node0);
function borrar(val) { node0=val; alert("nodo recuperado:");}
console.info("nodo a </script>
borrar:"+node0.nodeName);
console.info("val:"+val.nodeName); <div>
var node=val.parentNode; <p id="borrar">Mueve ratón <span
node.removeChild(node0); onMouseOver="borrar(this) ;">AQUÍ</span>:</p>
alert("¿Algo borrado ?");} <p><span onClick="recuperar('borrar');">PULSA
AQUI</span> para recuperar el original</p>
</div>

Registro eventos
x.addEventListener ("Evento", funcionEjecutar, boolean)

- El evento es el nombre del evento “click”, “load”, etc.

- La funcionEjecutar se ejecuta cuando se produce el evento
- El Boolean es opcional especifica si el evento debe ser capturado (true) o no (false, valor por defecto).

Fases eventos
● Capture : Al realizar el cliente un evento, el navegador sabe que se ha producido un evento,y busca
desde la raíz del DOM para ver donde se ha producido (event object)
● Target : Una vez sabe en qué elemento se ha producido (event target object) el explorador
comprueba si tiene algún controlador en ese elemento, si existe lo ejecuta.
● Bubbling : Después de disparar el lanzador, busca hacia la raíz, si en los niveles padre del elemento
hay algún otro controlador que se active con ese evento, en su caso lo lanzará. Esta etapa de su
movimiento hacia arriba se llama la propagación de eventos
JSON: Datos estructurados para intercambio de datos
JSON, acrónimo de JavaScript Object Notation, es un formato ligero para el intercambio de datos.

Propiedades:
● Ligero: Formato ligero para el intercambio de datos.
● Simple: Formato sencillo de leer por humanos y de parsear/analizar por máquinas.
● Funcional: Los objetos JSON están tipificados.
● Abierto: Formato de texto independiente del lenguaje.
● Extensible: Formado por unas estructuras que pueden anidarse.

Estructura datos JSON

● JSON es una sintaxis para serializar objetos, arreglos, números, cadenas, booleanos y nulos.
● La estructura de datos de JSON está basada en pares nombre:valor
● Las 2 estructuras principales son el objeto JSON y la lista JSON.

JSON en HTTP
En HTTP se transmite texto por ello :

● Envío ● Recepción : Se recibe una cadena. Convertirla

○ Definir un objeto JSON ○ a objeto JSON en JavaScript.
○ Convertir JSON a una cadena ○ a un diccionario o array en PHP.
■ ¿y en NodeJS?

Métodos del objeto JSON en JS

● JSON .parse (): Analiza una cadena de texto con formato JSON retornando un objeto JSON. Se puede
añadir una función para la transformación como parámetro.
● JSON .stringify (): Devuelve un string a partir de un JSON. Se puede añadir una función para la
transformación como parámetro. JSON PHP
Métodos del objeto JSON en PHP
● json_encode (cadena): A partir de una cadena con sintaxis JSON la función que devuelve arreglo o
objeto.
● json_decode (dato): Función que devuelve un objeto o arreglo en formato cadena con sintaxis JSON.

var foo = {};

foo.bar ="new property";
foo.baz = 3 ;
console.log (JSON.stringify(foo));
//{"bar":"new property","baz":3}

<?php
$json ='[{"id_fruta":"1","nombre_fruta":"Manzana","cantidad":"5"},
{"id_fruta":"2","nombre_fruta":"Platano","cantidad":"3"}]';
$arrayF = json_decode($json);
//OBTENER UN DATO DIRECTAMENTE DEL ARRAY.
print_r($arrayF[0]->nombre_fruta);
//RECORRER Y RECUPERAR VALORES JSON CON FOREACH.
foreach($arrayF as $obj){
$id_fruta = $obj->id_fruta;
$nombre_fruta = $obj->nombre_fruta;
$cantidad = $obj->cantidad;
echo "<br>\n".$id_fruta." ".$nombre_fruta." ".$cantidad;
}
?>

header('Content-type: application/json');
$result = $pdo->prepare("SELECT * FROM A_GrupoCliente");
$result->execute();
$datos = $result->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($datos);
m
CORS
● Por seguridad JS no permite que una aplicación que reside en un servidor pueda extraer datos de
otro.
● El uso compartido de recursos de origen cruzado (CORS- introducido en HTML5) permite a las
aplicaciones web de un dominio realizar solicitudes de dominio cruzado.
● Hay que habilitar estas llamadas tanto en el servidor como en el cliente.

Se puede que habilitar CORS de dos formas:

● Con un encabezado (header) para permitir solicitudes de example.com:
<?php header('Access-Control-Allow-Origin: *');?>
● o en el fichero .httacess
Header set Access-Control-Allow-Origin "*"
Tema 5

Modelo asíncrono y AJAX

Asincronía: acción que no tiene lugar en total correspondencia temporal con otra acción. (Fuente: Wikipedia).

AJAX es un acrónimo de Asynchronous JavaScript + XML , que se puede traducir como "JavaScript asíncrono
+ XML".
● AJAX mejora la interacción del usuario con la aplicación, evitando las recargas constantes de la
página.
● En el cliente requiere un motor del Ajax que se conecta con el servidor de forma asíncrona,(API
XMLHttpRequest).
● En el servidor no se requiere nada en particular, simplemente debe devolver el recurso que se le
solicita.

Promesas
● Las promesas son un Patrón de diseño para controlar la ejecución de un determinado cómputo del
cual no sabemos: ni cómo, ni cuándo se nos va a devolver un determinado valor.
● Una promesa es un objeto que por medio de una máquina de estados podemos controlar cuándo
un valor está disponible o no.
● Los métodos de las promesas devuelven promesas, permitiendo que las promesas se puedan
encadenar.

Métodos promesas
promise = new Promise(function(resolve, [reject]) { });

● promise.resolve (Obligatorio). Si la promesa devuelve el valor deseado , se ejecuta este método.

● promise.reject (Opcional). Método que se ejecuta cuando la promesa no devuelve el valor deseado.
● promise.then(onFulfilled,onRejected) : Método para indicar que hacer cuando una promesa devuelve
el valor deseado. Resolve
● promise.catch(onRejected): Método para indicar que hacer cuando una promesa devuelve el valor no
deseado. Reject

function isDinnerTime() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
 const now = new Date();
if (now.getHours() >= 22) {
resolve("yes");
} else {
reject("no");
}
}, 1000);
});
}
isDinnerTime()
.then((data) => console.log("success: " + data))
.catch((data) => console.log("error: " + data));

API FETCH
● es una API más simple y limpia que XHTMLRequest.
● No envia ni recibe ninguna cookie.
● Utiliza las promesas de JavaScript.
● El objeto Fetch permite solicitar recursos definidos y devuelve un objeto Response que es una
promesa.
● fetch(resource[, initRequest])*
FETCH GET
fetch("./api/some.json")
.then(function (response) {
if (response.status !== 200) {
console.log(
"Looks like there was a problem.
Status Code: " + response.status
);
return;
} // Examine the text in the response
response.json().then(function (data) {
console.log(data);
});
})
.catch(function (err) {
console.log("Fetch Error :", err);
});

Objeto FETCH
● resource(recurso de la petición):
○ una cadena con la URL .
○ o un objeto Request.
● initRequest: Objeto JSON de inicialización de la petición, cuyos valores sobrescriben los que existen
en el objeto Request. Es optativo. Estos parámetros pueden ser:
○ Cadena method: request HTTP method:Por defecto GET.
○ Objeto headers: request HTTP headers.
○ Objeto body: request HTTP body.
○ Cadena mode: cors, no-cors, same-origin, navigate.

Objeto REQUEST
Objeto que contiene los datos para la solicitud de un recurso para la petición Fetch.
request = new Request([recurso][,requestInit]])

const request = new Request('https://www.mozilla.org/favicon.ico');

const url = request.url;
const method = request.method;
const credentials = request.credentials;
Objeto HEADERS
Objeto que Representa los encabezados de la respuesta/solicitud, lo que le permite consultar y tomar
diferentes acciones en función de los resultados.

var myHeaders = new Headers();

myHeaders.append('Content-Type', 'text/xml');
myHeaders.get('Content-Type') // should return 'text/xml'

Objeto BODY
Objeto proporciona métodos relacionados con el contenido de la respuesta/solicitud, lo que le permite
declarar cuál es su tipo y cómo debe manejarse.

body: "foo=bar&lorem=ipsum";

RESPONSE
● Representa la respuesta a una solicitud.
● Es la promesa que devuelve fetch.
● Devolverá un error sólo cuando hay un error de red. No el código de error HTTP como 404 o 500.
● Métodos:
○ response.ok : true (false) si el estado esta entre 200-299.
○ response.status: Código HTTP de respuesta.
Tipos de respuesta:
● response.arrayBuffer(): El objeto ArrayBuffer se usa para representar un buffer genérico, de datos
binarios crudos (raw) con una longitud específica
● response.blob():Un objeto Blob representa un objeto tipo fichero de datos planos inmutables
● response.json()
● response.text()

Ejemplo carga imagen

function asyncCall() {
var myImage = document.querySelector("#mi_imagen");
fetch("https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg")
.then(function (response) {
if (!response.ok) {
throw new Error(response.statusText);
}
response.blob().then(function (data) {
var objectURL = URL.createObjectURL(data);
myImage.src = objectURL;
});
})
.catch(function (error) {
console.log(error);
}); }
Servicio WEB
Los Servicios Web son un conjunto de aplicaciones o de tecnologías con capacidad para interoperar en la
Web y que intercambian datos entre sí con el objetivo de ofrecer servicios.
Podemos clasificar los servicios web en:
● Servicios Web REST, el propósito principal del servicio es manipular las representación de los
recursos WEB (XML,JSON) usando un conjunto uniforme de operaciones sin estado(Métodos).
● Servicios Web SOAP: en el cual el servicio se expone con un conjunto arbitrario de
operaciones.(XML)

REST API O SERVICIO WEB REST

Los sistemas REST utilizan estos métodos para identificar operaciones sobre los distintos recursos
● GET (read): Se utiliza para consultar, leer y en definitiva acceder a un recurso
● POST (create): Envía datos para crear un recurso.
● PUT (update): Utilizado para editar un recurso.
● DELETE (delete): Es la opción para eliminar un recurso

WP REST API
Existe un Endpoint especial, llamado wp-json, al que se accede mediante la ruta raíz o inicial y que devuelve
toda la información relativa a la API REST.
La api Rest de Wordpress permite realizar operaciones CRUD pueden afectar a cualquiera de los elementos
de información de nuestro sitio WordPress:

● Entradas ------------------------------------> /wp/v2/posts

● Páginas -------------------------------------> /wp/v2/pages
● Usuarios ------------------------------------> /wp/v2/users
● Multimedia ---------------------------------> /wp/v2/media
● Taxonomías --------------------------------> /wp/v2/taxonomies
● CustompostTypes -------------------------> /wp/v2/customType

Devuelven un json con toda la información.

Seguridad
La seguridad supone un coste económico y de eficiencia.
● El riesgo cero no es práctico
● Hay diversas formas de mitigar el riesgo
 ● No se puede gastar un millón para proteger un céntimo

Tipos de seguridad:
1. Seguridad en el Cliente:
Aparece incrustado en un documento HTML. Un cliente de correo o un navegador que
cargue el documento lo ejecutará en la máquina cliente.
2. Seguridad en el Servidor:
Revisar periódicamente los ficheros de log (access_log y error_log en Apache) para detectar
posibles ataques.
3. Seguridad en la Comunicación:
Conectar con un sitio web protegido con SSL
4. Seguridad en la Aplicación:
Almacenar los datos sensibles de forma encriptada