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());
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);// getter
window.getComputedStyle(document.getElementById("id"));
window.getComputedStyle(document.body).getPropertyValue('display');
// setter
document.body.style.display="none";
document.getElementById("id").style.display="none";-
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- 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"));