Gestión de objetos en JavaScript

¿Qué es un objeto?

Todo en JavaScript es un objeto o puede comportarse como uno y se puede acceder  los elementos del navegador para manipularlos mediante dichos objetos.

JS es un lenguaje de guión orientado a objetos.

Jerarquía

– Window es el objeto global (raíz de todo).

Dentro de window existen objetos como:

▪ Document
▪ Location
▪ Navigator
▪ History
▪ Screen
▪ Console

01. Window

Es el objeto principal/global. Cuenta con múltiples propiedades que podemos modificar, estas propiedades son:

innerHeight, innerWidth: nos da el alto y ancho de la ventana

let w = window.innerWidth;
let h = window.innerHeight;

print(): lanzamos a la impresora la ventana actual

<button>Imprime esta página</button>

open(): abre una ventana nueva (URL, nombre, valores)

var miVentana = window.open("", "", "width=800,height=600");

Close(): cierra la ventana indicada

miVentana.close();

alert(): lanza un mensaje al usuario en forma de pop-up

window.alert("HOLA");

confirm(): mensaje de confirmación OK (true) o Cancel (false)

if confirm(“Acepta”) { alert("hola")}

02. Location

Representa la URL actual.

Propiedades y métodos:

href(): devuelve la URL de la página actual

let url = location.href;

assign(): carga una nueva ventana en la actual

location.assign("https://www.google.es");

reload():: recarga la página actual

location.reload();

protocol, hostname, path, search: devuelve las
distintas partes de una URL

location.hostname; // www.nba.com
location.path; // /team/lakers
location.search; // ?IDplayer=234

03. Navigator

Información sobre el navegador del usuario:

▪ cookieEnabled: indica si el navegador tiene las
cookies habilitadas (true / false)

let cookies = navigator.cookieEnabled;

▪ language: determina el idioma del navegador

let language = navigator.language;

▪ geolocation:geolocation: determina la posición del usuario

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        document.getElementById("demo").innerHTML = "Geolocation is not supported by this browser.";
}

function showPosition(position) {
    document.getElementById("demo").innerHTML = "Latitude: " + position.coords.latitude
+ " " + "Longitude: " + position.coords.longitude;
}

04. History

Historial de navegación. Se usa para manipular navegación del usuario.

back(): va a la página anterior

<button>Go Back</button>

forward(): va a la página siguiente

<button>Go Forward</button>

go(): va hacia atrás tantas páginas como se indique

2 páginas atrás

05. Screen

Da información sobre la pantalla del visitante.
availHeight(): alto de la pantalla

let height = screen.availHeight;

availWidth(): ancho de la pantalla

let width = screen.availWidth;

depth(): profundidad de color

let depth = screen.colorDepth;

06. Console

Podemos manipular la consola indicando mensajes especiales u otras notificaciones.
error(): muestra el mensaje indicado como error

console.error(“Has cometido un error");

info(): muestra un mensaje en la consola

console.info("Hello world!");

table(): muestra información como tabla ordenable

console.table(["Audi", "Volvo", "Ford"]);

console.time() y console.timeEnd(): mide tiempos de ejecución

console.time();
for (let i = 0; i < 100000; i++) {
    // codigo
}
console.timeEnd();

07. Document

Representa todo el contenido HTML.

Propiedades:

document.title  //cambia el título del documento

document.body.style.backgroundColor

document.forms, document.images, document.links

Métodos:

getElementById();
querySelector();,
write();
open();
close(); 

// Modifican el flujo de la escritura

Más info:

www.w3schools.com

developer.mozilla.org