Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 12

BOM (Browser Object Model)

Window history

history.length

// Ir atras
history.go(-1);
history.back();

// Ir adelante
history.go(1);
history.forward();

Window Navigator

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

Window Screen

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 & document location

	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

.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());

Terminología

<a href="https://fictizia.com">Fictizia</a>

a es la etiqueta o tag
href es el atributo
"https://fictizia.com" es el valor del atributo
Fictizia es el texto

Data-Attibutes

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

var article = document.getElementById('electriccars');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

article::before {
  content: attr(data-parent);
}

article[data-columns='4'] {
  width: 600px;
}

Render del browser

An Introduction to Browser Rendering
Ryan Seddon: So how does the browser actually render a website | JSConf EU 2015
Kruno: How browsers work | JSUnconf 2017

DOM

DOM - Document Object Model
Element
Node
NodeList
Tipos de nodos en el dom

DOM Selectores: Root Nodes

document
document.head
document.body

DOM Selectores: Parent Nodes

parentNode
parentElement

DOM Selectores: Children Nodes

childNodes
firstChild
lastChild
children
firstElementChild
lastElementChild

DOM Selectores: Sibling Nodes

previousSibling
nextSibling
previousElementSibling
nextElementSibling

DOM Selectores: Acceso a los elementos

getElementById():

    // <tag id = "x" >
    document.getElementById("id");

getElementsByName():

    // <tag name = "x" >
    document.getElementsByName("x");

getElementsByTagName():

    // <tag >
    document.getElementsByTagName("input");

getElementsByClassName():

    // <tag class="test-class">
    document.getElementsByClassName("test-class");

DOM Selectores: querySelector & querySelectorAll

Soporte querySelector
⚠️ 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);
}

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

Mas info en Convert NodeList to Array de David Walsh

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

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

DOM: Recursos

Todos los selectores CSS3
Introduction to the DOM
Understanding the DOM Tree and Nodes
How To Access Elements in the DOM

DOM: Depuración por consola

Más información

$('code')		// Muestra el primer elemento que coincide con el selector de CSS especificado.
			// Combinación de teclas para document.querySelector().
$$('figure')		// Muestra un conjunto de todos los elementos que coinciden con el selector de CSS especificado. 
			// Alias para document.querySelectorAll().
$x('html/body/p')	// Muestra un conjunto de elementos que coinciden con XPath especificada.

DOM: 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";

Ejercicios

1 - Saca una lista de los cursos disponibles en Fictizia en el área de Desarrollo interactivo y Web y conviertelo en Markdown.

	//Solución aquí. Pista: buscar por la clase .plan en la web

Respuesta esperada (consola):

# Cursos de Fictizia en el Área de Desarrollo interactivo y Web

- [Máster en Diseño de interfaz y Front-end con HTML5, CSS3 y jQuery (165 HORAS)](https://fictizia.com/formacion/master-interfaz-frontend-html5-css3-jquery)
- [Máster en Programación FullStack con JavaScript y Node.js (300 HORAS)](https://fictizia.com/formacion/master-javascript-nodejs)
- [Curso de Diseño de interfaz en proyectos Web, Apps y Smart TV (45 HORAS)](https://fictizia.com/formacion/curso-diseno-interfaz-web-apps-smart-tv)
- [Curso de UX y diseño de productos digitales (56 HORAS)](https://fictizia.com/formacion/curso-ux)
- [Curso de maquetación y animación Web con HTML5 y CSS3 (72 HORAS)](https://fictizia.com/formacion/curso-frontend-html5-css3)
- [Curso de jQuery para maquetadores web (36 HORAS)](https://fictizia.com/formacion/curso-programacion-jquery)
- [Curso de JavaScript para desarrolladores web (45 HORAS)](https://fictizia.com/formacion/curso-javascript)
- [Curso de JavaScript Avanzado para desarrolladores Front-end (72 HORAS)](https://fictizia.com/formacion/curso-javascript-avanzado)
- [Curso de Angular (v6.x) (36 HORAS)](https://fictizia.com/formacion/curso-angular-javascript)
- [Curso de React + Redux (30 HORAS)](https://fictizia.com/formacion/curso-react-js-redux)
- [Curso de Node.js para desarrolladores Front-end (24 HORAS)](https://fictizia.com/formacion/curso-nodejs)
- [Curso de AngularJS (v1.x) (30 HORAS)](https://fictizia.com/formacion/curso-angularjs)
- [Curso de Polymer (42 HORAS)](https://fictizia.com/formacion/curso-polymer)
- [Curso de PHP (45 HORAS)](https://fictizia.com/formacion/curso-php)
- [Curso de PHP Avanzado con Laravel (36 HORAS)](https://fictizia.com/formacion/curso-laravel-php-avanzado)
- [Curso de Python (45 HORAS)](https://fictizia.com/formacion/curso-python)
- [Curso de aplicación y entrenamiento de Seguridad OWASP Top 10 (32 HORAS)](https://fictizia.com/formacion/curso-seguridad-owasp)
- [Curso de metodologías ágiles para desarrollo de proyectos (33 HORAS)](https://fictizia.com/formacion/curso-agile-scrum)
- [Curso de Vue.JS + Vuex (36 HORAS)](https://fictizia.com/formacion/curso-vue-js)

2 - Hagamos la web del Metro más divertida.

Saca el estado actual de todas las líneas del metro de Madrid por consola.
Antes de Diciembre de 2018

	var lineas = document.querySelectorAll('.bloquet');
	
	for (var i = 0; i < lineas.length; i++) {
	  var estado = lineas[i].querySelector('.circulacion > .txt > a');
	  
	  if(!estado) estado = lineas[i].querySelector('.circulacion > .r > a');
	  
	  if(estado) console.log(estado.innerText.trim());
	  
	}

Después de Diciembre de 2018

function capitalizeFirstLetter(string) {
	if(string && typeof(string) === "string") {
		return string.charAt(0).toUpperCase() + string.slice(1);
	} else {
		return false
	}
    
}

function warningDetails (el, name) {
	if (elContainsClass (el, name)) {
		var idRef = el.parentNode.dataset.toggle
		return document.getElementById(idRef).innerText
	} else {
		return false;
	}
}

function cleanName (item) {
	var imgSlctr = item.querySelector("img")
	if(imgSlctr && imgSlctr.className) {
		var firstClass = imgSlctr.className.split(' ')[0]
		return firstClass.split("-").join(" ")
	} else {
		return false
	}
}

function elContainsClass (el, name) {
	if(el && el.classList) {
		return el.classList.contains(name)
	} else {
		return false
	}
}

function printTheLegend (data){
	return `En ${data.line} circulación ${data.working ? "normal" : "deficiente"}. ${data.warnings ? data.warnings : ""}`
}


var lineas = Array.prototype.slice.call(document.querySelectorAll(".list__otraslineas > li:not(:last-child)"));
lineas.forEach(function (item) {
	var spanSlctr = item.querySelector("span > span") || item.querySelector("span");

	var text = printTheLegend({
		line: capitalizeFirstLetter(cleanName(item)),
		working: elContainsClass (spanSlctr, "state--green"),
		warnings: warningDetails (item.querySelector("span > span"), "state--alert")
	})
	console.log(text)
})

Respuesta esperada:

Circulación normal en Línea 1
Circulación normal en Línea 8
Circulación normal en Línea 2
Circulación normal en Línea 9
Circulación normal en Línea 3
Circulación normal en Línea 10
Circulación normal en Línea 4
Circulación normal en Línea 11
Circulación normal en Línea 5
Circulación normal en Línea 12
Circulación normal en Línea 6
Circulación normal en Ramal
Circulación normal en Línea 7
Circulación normal en ML1

3 - Diseña un script que sustituya todas las imágenes de las entradas de Tecnología del Mundo Today por imágenes dummy de gatitos.

		
		// Solución aquí. Pista: buscar las imagenes por el selector ".td-module-thumb img"

		
		// Bucle para recorrer las imagenes
			// url

			// Ancho

			// Alto

			// Crear string con la URL a placekitten.com con 
			var sustituto = "https://placekitten.com/"+ancho+"/"+alto;
			// Añadir al elemento adecuado la nueva URL

			// Hack para solucionar el visionado
			document.querySelectorAll('.td-module-thumb img')[i].removeAttribute("srcset");
		}

4 - Nos creamos un array de objetos con la informacion, links y fotografias de l@s profes de Fictizia

	// Guardar aquí los datos de cada profesor
	var listaProfesores = [];
	
	// Pista: los profesores están guardados en la clase .microCard

	// Bucle para recorrer cada profesor
		// Generar un JSON con los datos de cada profesor
				
		// Acceder a los links de cada profesor usando el selector .microBtns > li

		// Iterar sobre los links de cada profesor
		// Añadir cada link como un nuevo elemento al JSON

		// Guardar en el array los datos de cada profesor
	}
	// Sacar por pantalla los datos de cada profesor

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

clase12.md

clase12.md

Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 12

BOM (Browser Object Model)

Window history

Window Navigator

Window Screen

window & document location

Terminología

Data-Attibutes

Render del browser

DOM

DOM Selectores: Root Nodes

DOM Selectores: Parent Nodes

DOM Selectores: Children Nodes

DOM Selectores: Sibling Nodes

DOM Selectores: Acceso a los elementos

DOM Selectores: querySelector & querySelectorAll

DOM: Recursos

DOM: Depuración por consola

DOM: Estilos con Javascript

Ejercicios

Files

clase12.md

Latest commit

History

clase12.md

File metadata and controls

Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 12

BOM (Browser Object Model)

Window history

Window Navigator

Window Screen

window & document location

Terminología

Data-Attibutes

Render del browser

DOM

DOM Selectores: Root Nodes

DOM Selectores: Parent Nodes

DOM Selectores: Children Nodes

DOM Selectores: Sibling Nodes

DOM Selectores: Acceso a los elementos

DOM Selectores: querySelector & querySelectorAll

DOM: Recursos

DOM: Depuración por consola

DOM: Estilos con Javascript

Ejercicios