Skip to content

Latest commit

 

History

History
307 lines (239 loc) · 9.05 KB

clase6.md

File metadata and controls

307 lines (239 loc) · 9.05 KB
Raw

Clase 6

Open Source Weekends (OSWeekends)

company

Lugar - Campus Madrid Fecha - Sábado, 4 de Marzo. 10:30-14:30 Contenido - Microcharla de React con xDae - Microtaller de Git y Github con cbravobernal - Grupos de Trabajo y Proyectos activos Apuntate - Meetup - Slack

BOM (Browser Object Model)

DOM, BOM y JS

window.history

  • propiedades:
	history.length
  • Métodos:
	// Ir atras
	history.go(-1);
	history.back();
	
	// Ir adelante
	history.go(1);
	history.forward();

window.navigator

  • Propiedades:
	function conversorTiempo(segundos){
		var fecha = new Date(segundos * 1000);
		var hh = fecha.getUTCHours();
		var mm = fecha.getUTCMinutes();
		var ss = fecha.getSeconds();

		if (hh < 10) {hh = "0"+hh;}
		if (mm < 10) {mm = "0"+mm;}
		if (ss < 10) {ss = "0"+ss;}

		return hh+":"+mm+":"+ss;
	}

	function 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);

		navigator.getBattery().then(function(bateria){
			console.log("Batería cargando?", bateria.charging)
			
			if(bateria.charging){
				console.log("Tiempo de carga:", bateria.chargingTime)
			}
			console.log("Batería %:", bateria.level*100)
			console.log("Tiempo restante:", conversorTiempo(bateria.dischargingTime))

		});

	}

window.screen

  • Propiedades:
	function 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);
	}

Window.location y Document.location

  • Propiedades:
	function informacionEnlace(url){
	
		var enlace = document.createElement('a');
		enlace.href = url || 'https://fictizia.com:3000/formacion/curso_javascript?q=JS#contenido-curso';
		
		console.log("href:" ,enlace.href);
		console.log("protocol:", enlace.protocol);
		console.log("host:", enlace.host);
		console.log("hostname:", enlace.hostname);
		console.log("port:", enlace.port);
		console.log("pathname:", enlace.pathname);
		console.log("search:", enlace.search);
		console.log("hash:", enlace.hash);
		console.log("origin:", enlace.origin);
	}
  • Métodos:
    • .assign() Carga una página nueva
     	document.location.assign('http://fictizia.com/formacion/curso_javascript');
    • .reload() Recarga
     	document.location.reload(); // Recarga
 	document.location.reload(true); // Recarga sin usar el cache
 	document.location.reload(forcedReload); // Recarga SIEMPRE sin usar el cache
    • .replace() Carga una página nueva, sustituyendo la actual en el historial
     	document.location.replace('http://fictizia.com/formacion/curso_javascript');
    • .toString() Devuelve el href como cadena
     	var enlace = document.createElement('a');
 	enlace.href = 'http://fictizia.com/formacion/curso_javascrip';
 	
 	console.log("toString:" ,enlace.toString());

DOM

IMPORTANTE: Los retornos de Node.childNodes y document.querySelectorAll - NO son arrays.

var listaDivs = document.querySelectorAll('div');

// Iteración
for (var i = 0; i < listaDivs.length; ++i) {
  var elemento = listaDivs[i];
  console.log("Elemento: ", elemento);
}

// Conversión
var listaDivsArray = Array.prototype.slice.call(listaDivs);

Estilos con Javascript

// getter
window.getComputedStyle(document.getElementById("id"));
window.getComputedStyle(document.body).getPropertyValue('display');
// setter
document.body.style.display="none";
document.getElementById("id").style.display="none";

Selectors

  • Soporte

  • Convencional:

    • getElementById():
        // <tag id = "x" >
    document.getElementById("id");
    • getElementsByName():
        // <tag name = "x" >
    document.getElementsByName("fname");
    • getElementsByTagName():
        // <tag >
    document.getElementsByTagName("input");

  • Selectores CSS3:

    • URL que empieza con "javascript:"
        a[href^="javascript:"] {color:blue;}
    • URL que contiene "google.es"
        a[href*="google.es"] {color:orange;}
    • URL que termina con ".pdf"
        a[href$=".pdf"] {color:red;}

  • Comprobando disponibilidad del API:

// op.1 - Positivo

    if( document.querySelector && document.querySelectorAll ){
        console.info("querySelector() y querySelectorAll() estan soportados!!")
    } else {
        console.warn("querySelector() y querySelectorAll() no estan soportados!!")
    }
// op.2 - Negativo

    if( typeof document.querySelector !== "function" && typeof document.querySelectorAll !== "function" ){
        console.warn("querySelector() y querySelectorAll() no estan soportados!!")
    } else {
        console.info("querySelector() y querySelectorAll() estan soportados!!")
    }
  • querySelector(): Devuelve el primer elemento que coincida con el selector
    <div id="miDiv">
        <span id="miId5" class="miClase" title="cinco"></span>
        <span id="miId4" class="miClase" title="cuatro"></span>
        <span id="miId3" class="miClase" title="tres"></span>
        <span id="miId2" class="miClase" title="dos"></span>
        <span id="miId1" class="miClase" title="uno"></span>
    </div> 
    document.getElementById('miId1').title // uno
    document.querySelector('#miDiv .miClase').title // cinco
    document.querySelector('#miDiv #miId1.miClase').title // uno
    document.querySelector('#miDiv .inventado').title // ERROR -> undefined
    document.querySelector('#miDiv .miClase[title^=u]').title // uno
  • querySelectorAll(): Devuelve todos los elementos que coincida con el selector en un pseudo-array
    document.querySelectorAll('#miDiv .miClase') // [<span id="miId5" ... ]
    document.querySelectorAll('p') // todos los parrafos
    document.querySelectorAll('div, img') // todos los divs e imágenes
    document.querySelectorAll('a > img') // todos las imágenes contenidas en enlaces

Conversión a Arrays

//Opción 1
var nodesArray = Array.prototype.slice.call(document.querySelectorAll("div"));

//Opción 2
var nodesArray = [].slice.call(document.querySelectorAll("div"));

Trabajar sin JQuery

Extras

Ejercicios

¡No pierdas el tren! Llevemos pocos días de curso pero han sido intensos...

Para la próxima clase tienes que haber terminado los ejercicios del cajero automático y del sistema acuapónico.

¡Toma la delantera! Empieza a pensar en el proyecto personal....

  • ¿Qué tema te apaasiona lo suficiente para no rendirte con las dificultades?
  • ¿Qué librerías te gustaría utilizar?
  • En cuanto a los datos... ¿De donde sacar la información?