La Web 2.0 i les tecnologies que la fan possible/JavaScript, donant dinamisme a la pàgina
El JavaScript és un llenguatge de programació interpretat que permet afegir dinamisme a les pàgines integrant-se dins d'aquestes. Si abans dèiem que amb HTML tan sols podíem mostrar dades i que amb CSS tan sols les podíem formatar i donar-les-hi un disseny, però de que cap manera podíem realitzar operacions matemàtiques ni res propi dels llenguatges de programació, amb JavaScript sí que podem.
Breu història modifica
El llenguatge fou inventat el 1995 per el desenvolupador Brendan Eich, de Netscape Communications, sota el nom de LiveScript. El llenguatge estava pensat inicialment perquè funcionés al costat del servidor, però els enginyers aviat arribaren a la conclusió de que amb un poc d'implementació al seu navegador, Netscape, es podien fer moltes coses sense tenir que connectar amb el servidor, des del mateix navegador del client. Sun Microsystems i Netscape col·laboraren per acabar la sintaxi LiveScript amb aquest propòsit. Rebatejaren el llenguatge amb el nom de JavaScript, ja que el Java, un llenguatge desenvolupat per Sun Microsystems, tenia molt d'èxit aquells anys, així que li canviaren el nom per raons de màrqueting.
No tenen, però, cap relació entre ells. El JavaScript s'assembla al Java com qualsevol altre llenguatge orientat a objectes, i val a dir que JavaScript no és un llenguatge orientat a objectes pròpiament dit, ja que no disposa d'Herència.
El 1997, els seus creadors proposaren JavaScript com a estàndard de la ECMA (European Computer Manufacturers' Association), els qui l'acceptaren i li posaren al estàndard el nom d'ECMAScript, i que ha servit com a referència per al llenguatge ActionScript, que s'utilitza en les animacions Flash des de la quarta versió del programa i que s'explicaran en capítols posteriors.
Microsoft, per la seua part, implementà al seu navegador Internet Explorer la seua pròpia versió de l'estàndard, el JScript, molt similar al JavaScript de Netscape però amb certes diferències en el model d'objectes del document (DOM, veure més avant), que fan ambdós versions incompatibles inclòs fins als nostres dies.
Què permet fer? modifica
Amb d'introducció d'un llenguatge de programació dins de documents que fins llavors havien sigut simples fulles informatives, s'aconsegueix una dinamització i una interactivitat de la pàgina cap a l'usuari. Les línies de codi JavaScript (també anomenades scripts) són interpretades per el navegador un cop descarregades, i aquestes modifiquen el document (X)HTML només carregar-se la pàgina o donats uns esdeveniments, com passar el cursor per damunt d'un element, fer clic damunt d'un enllaç, canviar el contingut d'un camp de formulari, etc.
Els primers anys de vida de JavaScript s'utilitzava un terme per anomenar aquestes pàgines interactives i dinàmiques, els DHTML o Dinamic HTML. La paraula dinamisme també es feia servir, però, per referir-se als programes CGI dels que parlarem més endavant i que s'executen al costat del servidor, abans que la pàgina arribi al navegador. Això provocà moltes confusions, però els conceptes són totalment diferents. Els DHTML impliquen l'ús de llenguatges de script que modificaven els documents HTML o les seues presentacions CSS un cop el servidor ja ha enviat la pàgina al navegador i aquesta la interpreta executant el codi JavaScript que porta, mentre que el dinamisme ofert pels CGI dels servidors és present en la mateixa creació de la pàgina, seleccionant de les bases de dades la inforamció a enviar o responent de diferent manera segons les circumstàncies amb les que es troba la pàgina. No són incompatibles, però, els llenguatges de script i els CGI, sinó que funcionen d'una manera complementària i ara amb l'aparició de l'AJaX (del que se'n parlarà aviat), conjuntament.
Els primers anys d'implementació, els usos més habituals del DHTML eren canviar imatges pertanyents a enllaços d'una barra de navegació per unes altres (popularment anomenat rollover), donar moviment a elements de la pàgina (com per exemple flocs de neu que cauen de la part superior de la pàgina, molt utilitzats en temps nadalencs), desplaçar un determinat text de la pàgina, etc.
Aquests efectes tan sols requerien unes línies de codi que fàcilment es podien reutilitzar per a altres projectes. I fou per això que aparegueren molts llocs a la Web que oferien aquests scripts i que donaven instruccions de com utilitzar-los (normalment tan sols feia falta enganxar-los dins l'etiqueta <head>).
El JavaScript tenia, però, una reputació de llenguatge poc reforçat per al desenvolupament web seriós. La guerra de navegadors entre Netscape i Internet Explorer creà greus problemes per als webmestres ja que, encara que ambdós navegadors utilitzessin JavaScript, els objectes no es comportaven de la mateixa forma o la implementació d'alguns no era compatible per a tots dos, el que provocava molts cops haver de programar la mateixa pàgina dos vegades, una per a Netscape i l'altra per a l'Explorer.
Això provocà que JavaScript sols s'utilitzés per a processos simples i no decisius, com la validació de formularis que posteriorment es tornaven a validar al servidor o tasques merament decoratives (els ja explicats scrolls, rollovers, etc.). No ha sigut fins ara, quan tots els navegadors suporten mitjanament bé els estàndards inclòs l'estàndard ECMAScript, l'ús de JavaScript en projectes professionals com les aplicacions web de la Web 2.0. Exemples d'aquests són el Google Maps, wikis com la Viquipèdia, tendes en línia, pàgines d'inici personalitzades com el Netvibes o aplicacions de webmail com el GMail.
Això ha sigut possible gràcies a que han aparegut noves llibreries que fan molt simple el que abans hagués costat molt temps de programar. El 2005, Sam Stephenson programà la primera versió de la llibreria Prototype, que ha causat una revolució en la manera de programar amb JavaScript. Arran aquesta llibreria n'hi han sortit d'altres que han aprofitat les seues extensions i han facilitat molt l'ús del JavaScript per fer animacions i funcionalitats abans impensables.
Una d'aquestes noves funcionalitats és el típic "arrossega i deixa" ("drag and drop" en anglès) amb el que tants anys em conviscut en els nostres entorns d'escriptori, al moure arxius d'una carpeta a una altra, i que aquestes llibreries han facilitat la seua implementació a la Web. Amb poques línies de codi es pot fer que un element de la pàgina pugui ser arrossegat per el cursor de l'usuari i quedi on ell el deixa. Aquesta funcionalitat l'han usada alguns llocs de comerç electrònic per permetre als seus usuaris arrossegar els productes que volen comprar dins una secció de la pàgina habilitada perquè es puguin deixar allí, a mode de cistella de comprar, o pàgines d'inici personalitzades com el Netvibes que permet arrossegar i deixar els seus panells per fer la pàgina més personalitzable.
JavaScript s'utilitza, actualment, per realitzar funcions molt més complexes que ara fa uns anys eren realitzades a la banda del servidor, el que permet agilitzar molt els processos ocorreguts a les pàgines web. A més, amb l'AJaX també s'han agilitzat tots els processos que requereixen el servidor, com la recol·lecció d'informació de les bases dades, per exemple. Així doncs, de ser un llenguatge sense gaire potencial, el JavaScript ha passat a ser el responsable d'una bona part de la funcionalitat bàsica dels llocs més i menys importants de la Web.
Integració dins la pàgina modifica
Quan el JavaScript aparegué i l'HTML no estava del tot estandarditzat amb la DTD tant estricta com avui dia, el JavaScript es podia ficar a qualsevol lloc de la pàgina dins de l'etiqueta <script> (entre <script> i </script>). Ara, però, amb l'aparició de l'XHTML s'ha restringit l'ús d'aquestes etiquetes i tan sols es pot ficar dins l'etiqueta <head> i s'ha de tractar el codi JavaScript com a una secció CDATA.
Una secció CDATA tant en XML com en SGML és una part del document que incorpora etiquetes que no es vol que es passegin i que per tant, dins d'aquesta secció, són marcats perquè siguin interpretats com a simple text enlloc de llenguatge de marcatge. Aquestes seccions comencen amb <![CDATA[ i acaben amb ]]>, però per augmentar la compatibilitat amb els navegadors que no suporten XHTML i que el llegeixen com si fos HTML a voltes es tanquen les etiquetes <![CDATA[ i ]]> dins de comentaris, així: /* <![CDATA[ */ i /* ]]> */. Un exemple de codi Javascript dins l'exemple que ja s'ha donat d'XHTML seria:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca">
<head>
<title> Exemple de pàgina XHTML </title>
<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
</script>
</head>
<body>
<p>
Seleccioni un dia:
<br />
<br />
<select name="dia">
<option selected="selected">Dilluns</option>
<option>Dimarts</option>
<option>Dimecres</option>
</select>
</p>
</body>
</html>
El motiu per el qual s'ha d'inserir el codi sota una secció CDATA és perquè a vegades s'introdueix el caràcter < o > quan es programa amb JavaScript, sobretot dins d'estructures condicionals i bucles. Quan això passa, si el codi no està dins d'una d'aquestes estructures el navegador interpreta que amb el < es comença una etiqueta XHTML, el que ocasiona una ruptura del codi i un error en temps d'execució.
Hi ha una altra opció, més recomanada, que és la de no incorporar el codi JavaScript a la mateixa pàgina sinó de transmetre'l en un arxiu apart. D'aquesta manera es separa l'estructura de la programació aprofitant els beneficis que això comporta. Per a incorporar un arxiu extern amb codi JavaScript al (X)HTML tan sols fa falta incloure la URL de l'arxiu a l'atribut src d'una etiqueta <script> buida, així:
<script type="text/javascript" src="ruta/arxiu.js"></script>
La llibreria Prototype que nombrava anteriorment és un simple arxiu amb codi JavaScript dins, i s'ha d'adjuntar d'aquesta manera a les pàgines.
Tot i que l'especificació XML ens deixaria estalviar-nos l'etiqueta </script> de tancament, tancant-la abans amb />, és millor no fer-ho perquè Internet Explorer no llegeix etiquetes <script> tancades així. Tampoc llegeix scripts amb "application/javascript" com a valor al atribut type, tot i ser aquest l'aconsellat i "text/javascript" l'obsolet. Per sort, tancar l'etiqueta d'aquesta manera i especificar un type amb "text/javascript" no infringeix els estàndards.
L'aparició de l'XHTML també ha comportat la desaparició de molts atributs utilitzats per a definir les funcions JavaScript que s'han d'executar quan passen diferents eventualitats. Algunes d'aquestes etiquetes són l'"onload", l'"onmouseover" o l'"onchange", a les que se les hi aplica com a valor una funció JavaScript que s'executa quan es carrega la pàgina, quan el cursor passa per damunt de l'element definit per l'etiqueta amb aquest atribut o quan el contingut del camp de formulari al qual se li aplica canvia, respectivament. Aquests atributs han quedat desaprovats i el que s'aconsella es especificar aquests esdeveniments des del mateix codi JavaScript (des del DOM, concepte explicat més endavant), fent l'aplicació molt més entenedora i sostenible i fent servir el codi XHTML per al que realment serveix: per descriure dades i no comportaments o formats. Aquesta tècnica de separar el codi JavaScript del contingut HTML s'anomena JavaScript no obstructiu.
Conceptes bàsics de programació modifica
En JavaScript, com en molts altres llenguatges de programació, una de les bases que sostenen el llenguatge són les variables. Aquestes són estructures de dades que poden canviar durant l'execució del programa i que reben un nom. Per assignar-li un valor a una variable cal escriure el nom d'aquesta seguit de l'operador d'assignació (=) i el valor que es vol donar-li. Aquests valors poden ser cadenes de caràcters (textos, llargs o curts), nombres, valors booleans i objectes complexos. Aquí tenim exemples d'assignació de variables:
nom = "Antonio Machado"; any_mort = 64; frase = 'Machado digué: "Caminante no hay camino, se hace camino al andar".'; gen98 = true;
En l'anterior codi s'assigna valor a quatre variables. A la primera, anomenada nom, se li aplica una cadena de caràcters, que es marca al començament i al final per cometes dobles (") o simples ('); la segona variable té assignat un valor numèric, al que no fa falta cometes; la tercera també té assignada una cadena, aquesta marcada per cometes simples, d'aquesta manera les cadenes dobles que conté no afecten en la interpretació del codi; la quarta té assignada un valor booleà, és a dir, un valor que tan sols té dos opcions, verdader (true) o fals (false). Els noms de les variables poden contenir minúscules, majúscules i nombres, aquests últims no poden, però, estar al començament del nom.
Amb l'ús d'operadors matemàtics es poden fer operacions amb nombres:
nombre1 = 1500; nombre2 = 2000; suma = nombre1 + nombre2; mitjana = suma / 2;
Primer es defineixen dos variables, nombre1 i nombre2, amb dos nombres numèrics i se'n defineix una altra, suma, amb la suma de les dues primeres (és a dir, 3500). Finalment, a la variable mitjana se li assigna el valor de la suma dividit entre 2, que és 1750. Existeixen altres operadors com l'operador resta (-) i l'operador multiplicació (*), que, òbviament, resta i multiplica.
També s'han implementat al llenguatge operadors relacionals i lògics basats en l'Àlgebra de Boole i que, per tant, generen valors booleans. Els relacionals són els operadors més gran que (>), més petit que (<), igual que (==), diferent que (!=) i combinacions, que tenen sentit en la comparació de nombres però que també es poden utilitzar en cadenes de caràcters, on es seguirà l'ordre alfabètic[1].
var1 = 5 < 6; var2 = 3 > 4; var3 = "a" < "z"; var4 = "A" < "a";
Així doncs, quan el navegador executi el codi la primera variable rebrà com a valor true, ja que 5 és més petit que 6; la segona serà false, ja que 3 no és més gran que 4; les altres dos seran true perquè la lletra "a" està situada abans en l'abecedari que la "z", i tota lletra majúscula és més petita que tota lletra minúscula.
Es poden complicar un pel més aquestes estructures amb l'addició d'operadors lògics: AND (&&), OR (||), XOR (^) i NOT (!). AND requereix que els dos valors booleans que uneix siguin true per retornar true, OR amb que un dels valors que uneix sigui true ja en té prou per retornar-lo, XOR retorna true si un dels dos que uneix ho és, però no si ho son els dos, i NOT canvia el true per el false.
var1 = false && true; var2 = (5 < 6) || (3 > 4); var3 = !var2;
A var1 se li assigna false perquè l'operador AND (&&) requereix dos true per retornar-lo; var2 serà true perquè tot i que 3 no sigui major que 4, 5 si que és menor que 6; i var3 serà el contrari de var2, és a dir, false.
És obvi que els valors de totes aquestes variables no estaran sempre dins el codi, sino els programes sempre tindrien el mateix comportament. Els valors d'aquestes variaran segons el que l'usuari fiqui dins dels camps de formulari definits amb (X)HTML, principal mètode que té JavaScript per interactuar amb ell, però també de la informació rebuda del servidor o d'altres circumstàncies com poden ser, per exemple, el dia o l'hora d'execució del script.
Un altre element comú en tots els llenguatges de programació pareguts a C són les funcions. Aquestes són porcions de codi, subalgoritmes, molt útils per a projectes complexos, ja que permet un cert ordre de l'aplicació i a més la seua reutilització. Aquí hi és l'exemple de la mitjana estructurat en forma de funció:
function fer_mitja (nombre1, nombre2){
suma = nombre1 + nombre2;
mitjana = suma / 2;
return mitjana;
}
mitjana1 = fer_mitja (1500, 2000);
mitjana2 = fer_mitja (3, 5);
mitjana3 = fer_mitja (-6, 4);
La funció fer_mitja té dos paràmetres, nombre1 i nombre2, que són dos variables que s'especifiquen al executar-la. Aquestes dos variables es sumen i se li assignen a la variable suma, que llavors es divideix per 2, se li assigna a la variable mitjana el resultat i finalment és retornat per la funció. De moment, però, encara no s'ha fet cap operació, sinó que es quan s'executa la funció per assignar-li el valor que retorna aquesta a la variable mitjana1, mitjana2 i mitjana3 quan es fan totes les operacions matemàtiques. La variable mitjana1, doncs, rebrà el valor numèric 1750 perquè li passa com a paràmetres a la funció els valors 1500 i 2000; mitjana2 4, al passar-li 3 i 5; i mitjana3 -1, al passar-li com a paràmetres el -6 i el 4. La reutilització del codi que permeten les funcions és clarament molt avantatjosa.
Però no tota la programació JavaScript és redueix a simples operacions matemàtiques contingudes dins o fora de funcions. Existeixen estructures de control que permeten conduir la interpretació del codi segons les variables donades, les estructures condicionals i els bucles.
L'estructura condicional més comuna és l'if-else. Aquesta analitza una condició, i si és certa (true) executa les sentències del primer bloc, i si és falsa (false) executa les sentències del bloc else si aquest hi és present (el bloc és opcional). Aquí l'exemple:
if (val1 != val2){
val2 = val1;
else{
val1 = val2;
}
A l'exemple, si el valor de val1 i val2 són diferents a val2 se li defineix el valor de val1, i si són igual a l'inrevés.
Són menys comunes les estructures swich, però són molt útils quan es té més d'una condició:
switch (lletra){
case 'a':
nom = "Alba";
break;
case 'b':
nom = "Bart";
break;
case 'c':
nom = "Cinta";
break;
case 'd':
nom = "David";
break;
case 'e':
nom = "Evaristo";
break;
default:
nom = false;
}
L'exemple li assigna a la variable nom un nom de persona si lletra conté una de les cinc primeres lletres de l'alfabet, i si no, li assigna false.
Els bucles són estructures que repeteixen un codi tantes vegades com les condicions especifiquen. N'hi ha essencialment de dos tipus, els definits, en els que s'especifica el nombre de repeticions i els indefinits, en els que no s'especifica i aquests paren la seua execució quan es compleixen unes determinades condicions.
Els bucles while són els bucles indefinits més utilitzats. Tan sols fa falta especificar la condició que mentre sigui certa farà que el bucle continuï repetint-se. Si volguessim saber el múltiple de 7 més pròxim a 1000 però que el superi, faríem:
while (mult < 1000){
mult = mult + 7;[2]
}
Els bucles for són un tipus de bucles definits en els que s'especifica, a més del codi que es repeteix dins el bucle, unes variables inicials, una condició de repetició, com l'especificada als bucles while, i una expressió que modificarà les variables inicials per tal d'aproximar el seu valor al que fa la condició de repetició falsa, per així finalitzar el bucle. Tot i que pareguin a simple vista molt complicats, no ho són gens en realitat.
for (i=0; i<100; i++){
nombres = nombres + ", " + i;
}
L'exemple generaria una cadena amb 100 nombres, del 0 al 99, separats amb comes. Cal dir que l'operador suma (+) a més de servir per sumar nombres serveix per unir cadenes.
Un cop vists els elements més bàsics, veurem ara la tipologia de valor de variable que em queda explicar, els objectes complexos, és a dir, els que no són ni cadenes, ni nombres ni valors booleans. Passem ara a la programació orientada a objectes (abreviat POO).
^ En realitat al comparar caràcters amb aquests operadors no predomina el seu lloc en l'alfabet, sinó la seua codificació en ASCI, que assigna a cada caràcter un número. Resulta que l'alfabet està comprès entre el 97 i el 122 i al estar en ordre, de l'"a" a la "z", es pot considerar que "a" és més petit que "z".
^ Fent ús dels operadors unitaris, no explicats aquí, aquesta sentència podria quedar reduïda a mult+=7;.
^ Els operadors unitaris també servirien per unir cadenes: nombres+=", "+i;.
Iniciació al POO modifica
La programació orientada a objectes (POO) és un paradigma de la programació, una manera de programar, que enlloc de basar aquesta en variables i funcions, la basa en estructures més complexes anomenats objectes. JavaScript suporta alguna de les característiques d'aquest tipus de programació que permet fer fer els programes més fàcils d'escriure, mantenir i reutilitzar.
Els objectes s'especifiquen com si es tractés de simples variables, identificant-los com identificàvem abans a aquestes. El que és diferent, i alhora innovador, és a aquests objectes, un cop creats i identificats, se'ls hi poden assignar propietats i mètodes.
Les propietats són estructures de dades com les variables en la programació tradicional, però que pertany al objecte i que descriu alguna de les seues qualitats. Al igual que les variables, el tipus de dades dels seus valors poden ser cadenes (strings), nombres, booleans o altres objectes.
Els mètodes també són una sèrie de línies de codi com les funcions però que serveixen per interactuar amb l'objecte i modificar-lo. Com les funcions tradicionals, accepten tants paràmetres com se'ls vulgui passar i poden retornar algun valor.
S'ha desenvolupat un format lleuger per tal de definir els objectes amb les seues propietats i mètodes, anomenat JavaScript Object Notation (JSON). En aquesta notació, els objectes estan tancats entre cotxets ({ i }), i dins d'aquests es defineixen les propietats i els mètodes, separats per comes (,). L'operador d'assignació utilitzat no és el signe igual (=) sinó que son els dos punts (:), i els mètodes es defineixen com a funcions de la manera com es mostra a l'exemple següent:
llibre={
"títol": "Software libre para una sociedad libre",
"autor": "Richard Stallman",
"ISBN": "84-933555-1-8",
"idioma": "ES",
"preu": 16.5,
"canviarPreu": function(nouPreu){
this.preu=nouPreu;
}
"passarPtes":function(){
return this.preu*166.386;
}
"pagines": 317,
dimensions:{alt: 21.5, ample: 15}
}
Un cop definit l'objecte, es pot accedir a cadascuna de les seues propietats i mètodes escrivint l'identificador l'objecte seguit d'un punt i el nom de la propietat o el mètode:
var1 = llibre.preu; llibre.canviarPreu(var1+3); var2 = llibre.preu; var3 = (var1==var2); var4 = llibre.passarPtes();
La variable var1 recupera el preu del llibre, 16.5 €, es crida el mètode canviarPreu i s'apuja tres euros, per tant, al tornar a recuperar amb var2 el preu aquest és 19.5, i la var3 és false perquè no són el mateix. La var4 contindrà el valor que retorna el mètode passarPtes, que, havent-se apujat 3 €, serà 3245 ptes.
El JSON també és molt utilitzat per passar informació (amb propietats) i comportaments (amb els mètodes) quan s'utilitzen tècniques AJaX, enlloc de fer-ho amb XML. Quan el navegador rep el codi JSON, el rep en format de cadena de text i per ejecutar-lo s'ha de valdre de la funció, ja predefinida per el llenguatge, eval(), que executa el codi de la cadena que se li passa com a paràmetre.
El llenguatge JavaScript ja porta incorporats alguns objectes predefinits que permeten un control major sobre el navegador. Aquests són el window, el navigator, el screen, el history, el location i el document, tots pertanyents al Model d'objectes del document (DOM), estandarditzat per el W3C i explicat en el següent apartat.
També cal destacar l'existència de l'objecte Math que augmenta les capacitats de càlcul de JavaScript. Les seues propietats són constants matemàtiques nom el nombre pi, el nombre e, i d'altres de més específiques com el logaritme neperià de dos o l'arrel quadrada d'un mig. Entre els seus mètodes té les funcions trigonomètriques, la potència, l'arrel quadrada, el logaritme neperià, i d'altres.
En programació orientada a objectes també incorpora unes estructures anomenades classes que funcionen com a motlles d'objectes. A partir d'aquestes estructures que defineixen unes propietats i uns mètodes inicials, es poden crear objectes, anomenats també, en aquest cas, instàncies de la classe, que es personalitzen durant la mateixa creació o un cop creats.
JavaScript també proporciona unes classes predefinides molt útils a l'hora de programar. Aquestes són Array, que treballa com una variable amb múltiples valors, cadascun d'ells identificats normalment amb un nombre, un índex; Date, que permet definir una data i obtindre'n després aspectes com el día de la setmana. Fins i tot els mateixos String (cadenes), Number (nombres) i Bolean (valors booleans), possibles tipus de valors de les variables, són classes, i els valors enmmagatzemats a les variables són instàncies d'aquests. Una cadena emmagatzemada a una variable, pel simple fet de ser una instància de la classe String, té tota una sèrie de mètodes i propietats que permeten al programador modificar-la i treure'n informació, com ara el mètode toUpperCase() que canvia tots els caràcters de la cadena a majúscules o la propietat length que informa de quants caràcters té la cadena.
El Document Object Model modifica
El DOM és la col·lecció d'objectes que permeten modificar el comportament del navegador i més concretament del document (X)HTML en el que treballen. Tot i estar estandarditzada per la W3C des del 1998, cada navegador ha tingut fins fa recentment poc la seua implementació del DOM, el que ha ocasionat molts maldecaps als webmestres.
L'objecte window és l'objecte arrel de tota la jerarquia que descriu el contingut del document (DOM). Des d'aquest anteriorment es controlaven els frames de la pàgina, que actualment han estat desaprovats, el missatge que sortia a la barra d'estat, ara generalment desactivada des dels mateixos navegadors, i permet la creació de pop-ups, que ara també són parcialment bloquejats pels navegadors. Els seus mètodes alert(), confirm() i prompt() permeten fer sortir quadres de diàleg, però que tampoc s'acostumen a fer servir actualment. Potser els dos mètodes més utilitzats de l'objecte són el setTimeout() i el setInterval(), que tenen la funció de temporitzadors.
L'objecte location és una propietat de window, per tant s'hauria d'accedir a ell mitjançant window.location, però no fa falta especificar el window davant. L'objecte location treballa amb la URL actual, de manera que les seues propietats aniran enfocades a aquesta. Té la propietat protocol, que permet saber el protocol utilitzat (normalment http: o https;) o definir-lo, i hostname, que retorna el nom de domini, però la que té més ús és href, que retorna tota l'adreça URL i la permet definir. La propietat href també es pot elidir, de manera que el simple objecte location serveix per obtenir o definir l'adreça.
L'objecte history s'assembla molt a l'objecte location. Serveix per fer anar a l'usuari avant o enrere del seu historial, i fins i tot saber quantes pàgines hi té guardades. No permet, però, saber les pàgines que ha visitat, cosa que violaria la privacitat de l'usuari.
L'objecte navigator permet saber quin navegador està visualitzant la pàgina i la seua versió, cosa que pot ser molt útil quan es vol que els scripts siguin compatibles amb tots els navegadors.
L'objecte screen permet saber, mitjançant les tres propietats que té, la resolució de la pantalla de qui fa servir el navegador i la seua profunditat de color. No és molt útil.
Finalment, l'objecte document és el responsable de la modificació dinàmica dels elements de la pàgina. És el més complex i el més utilitzat dels objectes del 'window', i alhora el que més problemes ha portat d'implementar per part dels navegadors. Actualment, però, tots els navegadors suporten més o menys bé la recomanació que fa el W3C, i que permet canviar l'estructura dels documents XML i XHTML (és important que tinguin una estructura tan estricta com XML per fer una cosa així) o modificar els atributs dels seus elements.
Els mètodes que permeten fer aquesta reesrtucturació són createElement() per crear nous nodes i appendChild() per inserir-los dins d'elements del document. El removeChild() els elimina.
El mètode getElementById() permet trobar dins el document l'element amb l'identificador únic (atribut id) que se li especifica com a únic paràmetre. El resultat es pot tractar com un objecte JavaScript, així que es pot accedir als elements que conté o fins i tot canviar-li l'estil CSS molt fàcilment. En ser un mètode que es pot cridar des de qualsevol node i no tan sols des de l'objecte document, podríem agafar el node resultant i fer una altra cerca d'un element que estigui dins d'aquest node.
Els mètodes getElementsByName() i getElementsByTagName() també permeten trobar els elements que tinguin per nom (atribut name) i nom d'etiqueta la cadena que es passa com a paràmetre, respectivament. Com que poden ser més d'un, al contrari del que passaba amb el getElementById(), el que retornen és una llista de nodes que poden ser accedides mitjançant un bucle.
Els atributs poden ser accedits mitjançant getAttribute(), amb l'atribut com a paràmetre, i modificar-los amb setAttribute(), amb l'atribut com a primer paràmetre i el seu valor com a segon. Per modificar l'interior de l'etiqueta tan sols fa falta canviar el valor de la propietat innerHTML que tenen tots els elements.
Els events, principals causes de dinamisme a la pàgina, s'especifiquen ara per aquí, no com atributs sinó com a mètodes de l'element. A l'exemple següent s'eliminarà el text de l'element amb ID contenidor quan es passi el ratolí per damunt:
el = document.getElementById("contenidor");
el.onmouseover=function(){
this.innerHTML="";
}