Objectes predefinits del llenguatge¶
Objectes nadius del llenguatge¶
JavaScript disposa d'una sèrie d'objectes predefinits i independents del navegador que podem utilitzar en tot moment, entre ells:
Interacció amb el navegador¶
JavaScript disposa d'una sèrie d'objectes que permeten el control del navegador on s'està executant.
L'objecte Navigator¶
Conté informació sobre el navegador i la plataforma sobre la que s'està executant el codi JavaScript.
Permet per exemple identificar el tipus i versió del navegador i el sistema operatiu de treball.
Gràcies a això es pot determinar si és necessari prendre alguna decisió que afecti al codi a executar, però cal tenir en compte que és un paràmetre modificable per l'usuari i per tant no sempre serà fiable.
| propietat / mètode | informació que retorna | valor en aquest navegador |
|---|---|---|
| navigator.platform | sistema operatiu | |
| navigator.userAgent | agent d'usuari | |
| navigator.javaEnabled() | Java habilitat? |
Identificació del navegador
Per raons històriques de compatibilitat, tots els navegadors s'identifiquen com a Mozilla
Navigator (MDN)
L'objecte Screen¶
Conté informació sobre la pantalla del dispositiu que està utilitzant l'usuari.
És útil per poder adaptar la presentació de l'aplicació a la mida disponible, o per mostrar elements centrats a la pantalla.
| propietat | informació que retorna | valor en aquest navegador |
|---|---|---|
| screen.width | amplada de la pantalla en píxels | |
| screen.height | alçada de la pantalla en píxels | |
| screen.colorDepth | profunditat de color | bits |
Atenció!
La forma recomanada d'adaptar el contingut a la pantalla del dispositiu és utilitzant media queries de CSS.
Screen (MDN)
L'objecte Window¶
Representa cada finestra oberta del navegador, i si el document conté frames, representa cada frame individual.
Permet obrir i tancar finestres, crear-ne de noves, moure-les i canviar-ne la mida, etc.
També és l'objecte que gestiona els esdeveniments de temporització, que permeten executar codi donat un període de temps.
Utilitat
La variable global window està exposada al codi per defecte, per tant no cal escriue window. davant de cada propietat o mètode d'aquest objecte.
Per exemple, és el mateix utilitzar window.innerWidth que directament innerWidth.
Algunes propietats de window a tenir en compte són:
| propietat | informació que retorna | valor en aquest navegador |
|---|---|---|
| innerWidth | Amplada interior de la finestra actual en píxels | |
| innerHeight | Alçada interior de la finestra actual en píxels | |
| outerWidth | Amplada exterior de la finestra actual en píxels, comptant menús i barres laterals | |
| outerHeight | Alçada exterior de la finestra actual en píxels, comptant menú superior, barra d'estat, etc. | |
| scrollX | Desplaçament horitzontal de la finestra en píxels (només lectura) | |
| scrollY | Desplaçament vertical de la finestra en píxels (només lectura) |
Pàgines amb exemples basats en la posició de scroll
L'objecte window també dona accés a l'emmagatzematge local a través de l'objecte Storage i les seves propietats localStorage i sessionStorage, que veurem més endavant.
Alguns mètodes de window a tenir en compte són:
| mètode | funció que realitza | exemple |
|---|---|---|
| alert() | Obre una finestra emergent amb un missatge | Prova-ho |
| confirm() | Obre una finestra emergent que demana confirmació a un missatge i retorna un booleà en funció de la resposta de l'usuari | Prova-ho |
| prompt() | Obre una finestra emergent amb un missatge que retorna la cadena introduida per l'usuari | Prova-ho |
| print() | Obre el diàleg d'impressió per la pàgina actual | Prova-ho |
| scroll() | Desplaça la finestra a una posició donada | Prova-ho |
Funcions de temporització¶
Tots són mètodes de l'objecte window.
setInterval()
Executa indefinidament una funció cada interval de mil·lisegons donat
function missatge() {
console.log("Ha passat un segon");
}
// S'executarem la funció missatge cada segon indefinidament
let intervalMissatge = setInterval( missatge, 1000);
clearInterval()
Cancel·la un setInterval() en progrés, sempre que l'haguem assignat a una variable:
clearInterval(intervalMissatge);
setTimeout()
Executa una sola vegada una funció després d'un nombre de mil·lisegons donat
function missatge() {
alert("Han passat cinc segons");
}
// S'executarem la funció missatge un sol cop després de 5 segons
let intervalMissatge = setTimeout( missatge, 5000);
clearTimeout()
Cancel·la un setTimeout() en progrés, sempre que l'haguem assignat a una variable:
clearTimeout(intervalMissatge);
Els mètodes setInterval i setTimeout són intercanviables:
function missatge() {
/// ...
let temps = 1000;
setTimeout(missatge, temps);
}
// setTimeout funcionant com un setInterval,
// es reinicia cada cop que acaba el temps
setTimeout(missatge, 1000);
Avantatge
La variable temps podria tenir diferents valor en funció de condicions del codi.
function missatge() {
/// ...
if (condicioFinal) clearInterval(interval);
}
// setInterval funcionant com un setTimeout,
// la funció determina si continua o l'aturem
let interval = setInterval(missatge, 1000);
Avantatge
Podem aturar el comptador en funció de condicions del codi cada cop que s'executa la funció.
Important
Els intervals de temps d'aquests dos mètodes no són exactes, ja que estan en funció del temps que necessiti la funció que es crida per executar-se. Si el temps necessari per executar la funció és major que l'interval de repetició establert, s'anirà acumulant un error de temps a cada execució.
Si necessitem comptar temps exactes és millor utilitzar l'objecte Date.
Window (MDN)
L'objecte Document¶
Representa tot el contingut del document actual, on cada element és representat com un node que forma part del model d'objectes del document (DOM)
Conté subobjectes que representen els diferents tipus d'elements d'un document: formularis, enllaços, imatges, etc. i té propietats i mètodes per manipular qualsevol element del document (getElementById, write, etc.)
El veurem amb més detall més endavant.
Referència
Document (MDN)
L'objecte History¶
Conté l'historial del navegador per la finestra o pestanya activa.
Per protegir la privacitat dels usuaris, no permet conèixer la URL de les adreces individuals, sinó només desplaçar-se per la llista i saber-ne la mida.
S'utilitza principalment per poder recular una pàgina en el navegador sense necessitat d'especificar una adreça de destinació concreta.
| propietat / mètode | resultat |
|---|---|
| history.length | número d'elements a l'historial |
| history.back() | navegar a la pàgina anterior |
| history.forward() | navegar a la pàgina següent |
| history.go( -n ) | navegar n pàgines enrere |
History (MDN)
L'objecte Location¶
Conté informació sobre la URL actual, i en pot extreure parts concretes com el domini, protocol o port.
Permet també recarregar la pàgina actual o carregar una pàgina nova.
| propietat / mètode | informació que retorna | valor en aquest navegador |
|---|---|---|
| location.href | URL completa de la pàgina actual | |
| location.protocol | Protocol que utilitza la URL | |
| location.host | Nom del servidor i port | |
| location.hostname | Domini de la URL | |
| location.port | Port la de URL, si en forma part | |
| location.pathname | Part corresponent a la ruta de la URL | |
| location.search | Paràmetres de la URL si n'hi ha, incloent el ? |
|
| location.hash | Marcador dins la pàgina, incloent el # |
|
| location.reload() | Recarrega la pàgina actual | Recarrega |
| location.assign(url) | Carrega la url indicada | Carrega URL |
| location.replace(url) | Carrega la url subtituint l'actual a l'historial de navegació | Reemplaça URL |
Propietat útil!
Si modifiquem el valor de location.href el document carregarà la nova pàgina.
D'aquesta manera podem aconseguir el mateix comportament que en clicar un enllaç, però des de codi JavaScript i sense interacció per part de l'usuari.
Location (MDN)