Programacion de aplicaciones web teoria 5

Vista previa del material en texto

Programación de 
Aplicaciones Web
Javascript - Parte III
JAVASCRIPT
Temario: Algunos conceptos importantes
● APIS de Navegador
● Eventos
● DOM
● JQUERY
Javascript - APIS de Navegador
BOM y DOM
Mejorar la experiencia de los usuarios que navegan en 
nuestras páginas.
Javascript - APIS de Navegador
History
Representa el historial de navegación de la pestaña actual. Podemos interactuar con él.
// Devuelve el número de entradas en el historial
console.log(history.length)
// Admite números enteros y nos mueve en el historial tantas posiciones cómo le 
indiquemos
history.go()
// Nos lleva atrás en el historial
history.back() // Equivalente a history.go(-1)
// Nos lleva adelante en el historial
history.forward() // Equivalente a history.go(1)
Javascript - APIS de Navegador
Navigator
Representa el navegador con el que el usuario está interactuando
const informacionSistema = () => {
 console.log("appCodeName:", window.navigator.appCodeName);
 console.log("appName:", window.navigator.appName);
 console.log("appVersion:", window.navigator.appVersion);
 console.log("platform:", window.navigator.platform);
 console.log("product:", window.navigator.product);
 console.log("userAgent:", window.navigator.userAgent);
 console.log("javaEnabled:", window.navigator.javaEnabled());
 console.log("language (used):", window.navigator.language);
 console.log("language (support):", window.navigator.languages);
 console.log("conectado a internet?", window.navigator.onLine);
 console.log("mimeTypes:",window.navigator.mimeTypes);
 console.log("Plugins:", navigator.plugins);
 }
Javascript - APIS de Navegador
Screen
Representa la pantalla del dispositivo. El objeto screen nos provee de información relativa a 
la pantalla donde se está renderizando el contenido.
const informacionPantalla = () => {
 console.log("availTop:", window.screen.availTop);
 console.log("availLeft:", window.screen.availLeft);
 console.log("availHeight:", window.screen.availHeight);
 console.log("availWidth:", window.screen.availWidth);
 console.log("colorDepth:", window.screen.colorDepth);
 console.log("height:", window.screen.height);
 console.log("left:", window.screen.left);
 console.log("orientation:", window.screen.orientation);
 console.log("pixelDepth:", window.screen.pixelDepth);
 console.log("top:", window.screen.top);
 console.log("width:", window.screen.width);
 }
Javascript - APIS de Navegador
Document
DOM (Document Object Model) representa al documento HTML con el que estamos tratando.
● .parentNode o parentElement: Guardan una referencia al elemento padre.
● .childNodes: Devuelve un iterable NodeListcon los hijos.
● .children: Devuelve un iterable HTMLCollection con los hijos.
● .firstElementChild o firstChild: Devuelve el primer hijo.
● .lastElementChild o lastChild: Devuelve el último hijo.
● .nextSibling o .nextElementSibling: Devuelve el hermano del elemento actual.
● .previousSibling o .previousElementSibling: Devuelve el anterior hermano del 
elemento actual.
Javascript - APIS de Navegador
Document
Modificando los elementos HTML
● .getAttribute(atributo): Obtiene el valor de un atributo HTML.
● .setAttribute(atributo, valor): Modifica el valor de un atributo HTML.
● .removeAttribute(atributo): Borra el atributo del elemento DOM.
● .textContent: Contiene el texto del elemento. Reemplazando este atributo se modifica 
el texto del elemento.
● .innerHTML: Sirve para acceder al contenido HTML que hay dentro de un elemento. 
Reemplazándolo se modifica el HTML del elemento.
● .outerHTML: Sirve para acceder y modificar el HTML del propio elemento.
Javascript - Drag and Drop
Permite al usuario arrastrar elementos HTML por la pantalla de su dispositivo usando su ratón y 
soltarlos en otro elemento.
Lo primero que tendremos que hacer es marcar el elemento que queremos arrastrar como 
draggable.
<li class="card-item" draggable="true">
 <img src="url imagen" alt="" class="card-image">
 <div class="card-content">
 <p class="card-title">Nombre</p>
 <p class="card-text">Nombre real</p>
 <p class="card-text">Genero</p>
 </div>
</li>
Javascript - Drag and Drop
Una vez que ya hemos indicado que un elemento es arrastrable, tenemos que capturar los 
eventos que este elemento comenzará a lanzar:
● dragstart: Tiene lugar cuando el elemento comienza a ser arrastrado. Capturando este 
evento podremos personalizar el comportamiento del drag.
● drag: Salta mientras el elemento es arrastrado.
● dragend: La operación de arrastra acaba, ya sea porque se suelta el ratón o porque se pulsa 
escape.
● dragenter: El elemento arrastrado entra en una zona en la que se maneja el drop.
● dragleave: El elemento deja la zona de drop.
● dragover: Salta mientras el elemento se arrastre sobre una zona de drop.
● drop: El elemento se suelta sobre una zona de drop valida. Este evento se debe escuchar 
desde el elemento donde se va a soltar. Por defecto, el navegador evita el comportamiento 
de cualquier elemento para este evento, por lo que para poder escucharlo siempre 
tendremos que ejecutar preventDefault()
Javascript - WebStorage
Permite almacenar en el navegador información en formato texto de forma totalmente 
independiente del servidor.
Esta API proporciona dos interfaces sessionStorage y localStorage para interactuar con el objeto 
Storage. Ambas tienen los mismos métodos y propiedades y soportan hasta 10MB, lo única 
diferencia es la durabilidad de los datos. 
localStorage mantendrá los datos sin límites de expiración.
sessionStorage sólo los matendrá mientras esté abierta la pestaña del navegador.
Javascript - Geolocation
Permite obtener los datos geográficos (latitud y longitud) del dispositivo de un usuario. Esta API 
necesita que el usuario apruebe el permiso de geolocalización por lo que es totalmente asíncrona.
const info = (position) => {
 console.log('Estas aparecen siempre')
 console.log(position.coords.latitude);
 console.log(position.coords.longitude);
 console.log(position.coords.accuracy);
 console.log('Estas sólo aparecen si están disponibles')
 console.log(position.coords.altitude)
 console.log(position.coords.altitudeAccuracy)
 console.log(position.coords.speed)
 console.log(position.timestamp)
}
Javascript - Geolocation
<p>Click para obtener sus coordenadas.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
 if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(showPosition);
 } else { 
 x.innerHTML = "Geolocation is not supported by this browser.";
 }
}
function showPosition(position) {
 x.innerHTML = "Latitude: " + position.coords.latitude + 
 "<br>Longitude: " + position.coords.longitude;
}
</script>
Javascript - Geolocation
<p>Click para obtener sus coordenadas.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
 if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(showPosition);
 } else { 
 x.innerHTML = "Geolocation is not supported by this browser.";
 }
}
function showPosition(position) {
 x.innerHTML = "Latitude: " + position.coords.latitude + 
 "<br>Longitude: " + position.coords.longitude;
}
</script>