Javascript Tutorial

M6-DESENVOLUPAMENT WEB EN ENTORN CLIENT
UF1 Sintaxi del llenguatge. Objectes predefinits del llenguatge.
3. Identificaci i aplicaci dels objectes predefinits del llenguatge

Fins ara hem vist alguns temes molt bsics de JavaScript. Hem assignat valor i manipulat
variables, creat expressions, usat sentncies condicionals, executat bucles... Vaja, el que podrem
dir lestructura bsica de qualsevol llenguatge de programaci. De fet tot el que hem vist fins ara
ha sigut una mica pesat, ms que res perqu els exemples que hem tractat han estat creat
expressament per documentar les diferents instruccions i en la majoria dels casos no tenien cap
inters prctic.
A partir dara comenarem a treballar amb algunes de les operacions ms comuns per les que va
ser dissenyat JavaScript, com ara treballar amb el document, accedir a les propietats del
navegador, obrir finestres noves , redirigir el navegador a una altra pgina, validar formularis,
canviar laparena dels elements de la pgina, i un llarg etctera dopcions. Per aconseguir-ho
necessitarem treballar amb els diferents objectes que conformen el llenguatge JavaScript.
3.1 Utilitzaci dobjectes. Objectes nadius del llenguatge
3.1.1 Utilitzaci dobjectes
Javascript, igual que la majoria dels llenguatges moderns, es basa en el que anomenem
Programaci Orientada a Objectes.
En aquests llenguatges partim de la premissa que, tot el que interv en la programaci s un
objecte. Aix tenim que la finestra on es mostra la pgina s un objecte, la pgina en si mateixa
tamb s un objecte (lobjecte document); dins de la pgina tenim elements com ara textos, imatges i
formularis, que tamb sn objectes. Alguns daquests elements alhora tamb tenen els seus propis
components que tamb sn objectes, (un formulari t botons, caixes de text, ckeckboxes...).
Un dels avantatges dutilitzar JavaScript, s que podem manipular els documents web i el seu
contingut directament des del navegador desprs que shagi carregat completament la pgina, aix
des del nostre script podrem carregar una nova pgina, treballar amb els diferents elements de la
finestra del navegador, obrir noves finestres o fins i tot modificar dinmicament el contingut de la
pgina actual.
Per aconseguir-ho, JavaScript utilitza una srie dobjectes definits nativament i organitzats de
manera jerrquica, anomenada DOM (Document Object Model). Aquests components sorganitzen
en forma darbre i amb ells podem representar i accedir a tot el contingut dun document web.
Aquests objectes tenen entitat prpia i es podem definir i manipular amb tres caracterstiques:
Propietats, sn valors que semmagatzemen amb el propi objecte i defineixen les
caracterstiques del mateix, per exemple una pgina t un determinat color de fons.
Mtodes, sn funcions que incorpora cada objecte, es a dir codi associat a lobjecte que li
permet tenir un comportament determinat, per exemple, totes les variables (que tamb
sn objectes) tenen el mtode toString, que permet convertir el contingut de la variable a
string.
Esdeveniments. Sn accions que es poden produir sobre un objecte i que poden
desencadenar, o no, una resposta per part de lobjecte segons els nostres interessos. Per
exemple, quan cliquem un bot en la nostra pgina web, sha produt lesdeveniment
onClick, per sn nosaltres qui decidim si volem que el programa reaccioni o no a aquest
esdeveniment.
Quan sexpliquen els objectes, sempre es fa una analogia amb objectes del mn real per tractar de
fer entendre ms b el concepte, doncs b, jo no ser menys i aqu teniu la meva comparaci:
Imagineu que tenim una classe dobjectes genrica cotxe, que representa qualsevol cotxe, fixeu-vos
que he dit que representa qualsevol cotxe, no que s un cotxe en concret, sin que s una mena de
plantilla o un motllo per crear cotxes. Aquesta classe t propietats, com ara color, nmero de
Miquel Lara Pea -Professor dAplicacions i Sistemes InformticsInstitut Vidal i Barraquer Tarragona
-1-

portes, cilindrada, etc. s a dir tots els cotxes que creem a partir daquesta classe tindran un color,
un nmero de portes, una cilindrada... on, evidentment, el valor de la propietat pot ser diferent per
cada exemplar (un ser blanc, 4 portes, 1200cc; laltre blau, 5 portes; 1600cc, etc.).
El cotxe incorporar mtodes, com ara accelerar, frenar i molts ms. Nosaltres com a
programadors no necessitem saber com est creat el mtode ni com funciona internament (aix ja
ve implementat en el propi objecte encapsulaci-), noms hem de saber que si cridem al mtode
accelerar, la velocitat augmenta i que si cridem al mtode frenar disminueix.
Finalment el cotxe tamb detecta alguns esdeveniments, per exemple, se nadona que hem polsat
el boto dalavidres elctric i genera el corresponent esdeveniment, aix aquesta acci, comprova
si hem especificat algun mtode o alguna funci associada a lesdeveniment que accioni el motor
del alavidres i faci que la finestra es tanqui. El mtode que dna resposta a un esdeveniment pot
ser un mtode nadiu, ja incorporat al llenguatge, o pot haver estat programat expressament per
nosaltres en forma de funci (ho veurem ms endavant).
La nostra pgina web genera constantment gran quantitat desdeveniments, per no sempre ens
interessa donar-hi resposta. En la majoria dels casos els podrem ignorar. Per exemple, quan
passem el punter del ratol per sobre duna imatge la mateixa imatge genera un esdeveniment
conegut com a mousemove, al que podrem donar resposta o no. La majoria desdeveniments que es
produeixen queden sense resposta.
Si seguim amb lanalogia, cada vegada que necessitem treballar amb un objecte cotxe al nostre
programa, haurem de crear un exemplar a partir de la plantilla (de la classe, en terminologia
Orientada a Objectes), seguint la sintaxi general:
var nomDelObjecte=new Objecte();
Que al nostre exemple en concret podria ser:

var elmeuCotxe=new Cotxe();
A lexemple anterior, la variable elMueCotxe rep una nova instncia de lobjecte cotxe, creada amb la
paraula clau new, que s el constructor de la classe. En terminologia de la programaci orientada a
objectes diem que elMeuCotxe s una instncia de la classe cotxe, o sigui, s un exemplar de la classe
cotxe. Amb aquesta instncia ja podrem treballar, li podem canviar el valor de les seves variables,
per exemple elmeuCotxe.color=Verd, podem cridar els seus mtodes, elmeuCotxe.frenar() o fins i tot
podem programar la resposta als diferents esdeveniments del mateix.
Observeu que per treballar amb objectes fem servir la notaci punt. Consisteix en escriure el nom
de lobjecte seguit dun punt i la propietat o el mtode a que ens referim. Aix per accedir a la
propietat color de lobjecte elMeuCotxe, fem elMeuCotxe.color, si volem accedir a un mtode utilitzarem
la mateixa tcnica elMeuCotxe.frenar() la diferncia est en que el mtode sempre acaba amb un
parell de parntesis. Alguns mtodes requereixen que dins dels parntesis li passem un o ms
parmetres, que sn valors que necessita la funci associada al mtode pel seu correcte
funcionament.
A la figura 3.1 podeu veure com est estructurat el model dobjectes duna pgina web. Observeu
que hi ha elements que sn considerats objectes i hi ha daltres que sn colleccions. Com ja sabem tot
en JavaScript es considera un objecte, per dins les nostres pgines hi ha objectes que es
repeteixen ms duna vegada, per exemple les imatges, doncs acostuma ha haver-hi ms duna en
cada pgina. En aquests casos el model dobjectes agrupa aquests elements en forma de
colleccions, daquesta manera els mant organitzats i ens facilita accedir a cada element de la
collecci duna manera ms rpida. Ms endavant veurem com treballar amb colleccions.
-2-

Figura 3.1 Model dobjectes
Veureu que en el nivell ms alt tenim lobjecte window del que penja tota lestructura del nostre
web. Lobjecte window representa la finestra en la que est corrent el navegador.
La nostra web pot estar formada per una nica pgina, que en el DOM sidentifica per lobjecte
document. Tamb podem tenir un sistema de pgines format per frames (una collecci) en aquest
sistema, com ja sabeu, cada frame mostra la seva prpia pgina, s a dir el seu propi document.
Si seguim explorant el model dobjectes veurem que cada pgina (document) t nomes un objecte
body a banda dun component element mitjanant el que podrem accedir a qualsevol element de la
pgina. Tamb podem veure les diferents colleccions dels elements que pot contenir una pgina
web: all, anchors, applets, forms... Observeu tamb que en la collecci forms, cada formulari pot
contenir una srie delements: botons, caixes de text, camps ocults...
Tamb tenim la collecci all que engloba a tots els elements de la pgina, siguin del tipus que
siguin. Ja veurem la seva utilitat quan tractem les colleccions.
3.1.2 Objectes nadius del llenguatge.
Tret de les arrays a les que dedicarem un apartat ms endavant, a continuaci veurem els objectes
predefinits del llenguatge, que es defineixen just per sota del nivell de window. Molts daquests
objectes en realitat sn un embolcall (wrapper) dels tipus de dades nadius, que ja hem vist
(booleans, numrics i cadenes), aix vol dir que crear una instncia dun daquests objectes
equival a declarar una variable directament amb un valor. Per tant des daquetes variables que
declarem directament podem fer servir les propietats i mtodes de lobjecte embolcall.
-3-

3.1.2.1 Lobjecte Boolean.
L'objecte boolean s'utilitza per crear variables del tipus boolean (true o false). Observeu lexemple:
<script type="text/javascript">
var b1=new Boolean(0);
var b2=new Boolean(1);
var b3=new Boolean("");
var b4=new Boolean(null);
var b5=new Boolean(NaN);
var b6=new Boolean("false");
document.write("0 s el boolean "+ b1 +"<br />");
document.write("1 s el boolean "+ b2 +"<br />");
document.write("Una cadena buida s el boolean "+ b3 + "<br />");
document.write("null s el boolean "+ b4+ "<br />");
document.write("NaN s el boolean "+ b5 +"<br />");
document.write("La cadena 'false' s el boolean "+ b6 +"<br />");
</script>
Produeix la sortida de la figura 3.2. Fixeu-vos, que al constructor se li pot passar opcionalment un
valor, que ser el que determinar el valor inicial de la variable que estem creant, tenint en
compte els segents criteris: si no assignem valor inicial, o si el valor passat s 0, -0, null, "", fals,
sense definir o NaN el valor de l'objecte s'estableix en false. Per a qualsevol altre valor s'estableix
a true (fins i tot per la cadena "false")!
Figura 3.2 Lobjecte boolean
Aquesta seria la manera formal de declarar una variable booleana (lembolcall explicat ms
amunt), per la creaci de variables no sacostuma a fer daquesta manera, perqu ja hem vist que
hi ha una forma ms rpida de crear una variable de tipus boolean:
var bol1=true;
3.1.2.2. Lobjecte Date.

L'objecte Date ens facilita treballar amb dates i hores dins les nostres pgines web. Com la resta
dobjectes es crea amb new Date ().
Els valors de tipus data semmagatzemen internament en forma dun valor numric, que
representa el nmero de millisegons que han transcorreguts des de l1 de gener de 1970 a les
00:00:00 (Hora Universal UTC). Les dates anteriors a aquesta semmagatzemen amb valors
negatius. Un dia cont 86.400.000 millisegons. Tot aix s informaci tcnica amb la que no ens
haureu denfrontar, ja que aquest objecte disposa duna gran quantitat de mtodes que ens
facilitar treballar amb les dates.
Tenim quatre maneres de crear instncies (objectes) del tipus data, segons el valor que li passem
al constructor (amb la instrucci new):
new
new
new
new
Date() // es crea amb la data i hora actual del sistema

Date(milisegons) //La data que correspon als milisegonds des de
Date(Data en forma de cadena)
Date(any, mes, dia, hores, minuts, segons, millisegons)
1970/01/01
-4-

Observeu lexemple:
var avui = new Date()
var dia2 = new Date(86400000)
var dia3 = new Date("October 13, 2012 11:13:00")//El mes en angls
var dia4 = new Date(2009,5,24)// El mes va de 0 a 11 (5 s juny)
var dia5 = new Date(79,5,24,11,33,0) //mes de 0 a 11
document.write("avui s <b>"+ avui +"</b><br />");
document.write("86400000 genera <b>"+ dia2 +"</b><br />");
document.write("October 13, 2012 11:13:00, genera <b>"+ dia3 + "</b><br />");
document.write("2009,5,24 genera <b>"+ dia4 + "</b><br />");
document.write("79,5,24,11,33,0 genera <b>"+ dia5+ "</b><br />");
</script>
Genera la sortida de la figura 3.3
Figura 3.3. Sortida de Date
Tot i que aquest exemple pretn mostrar la forma en que podem assignar una data en el moment
de crear-la, tamb ens ensenya que la informaci en que es mostra una data s bastant
complicada. Fins i tot podrem dir que inclou massa dades, per com ja hem dit, lobjecte Date
tamb ofereix molts mtodes que ens permetran separar la informaci en parts (any, mes, dia
hora..) per poder treballar amb ella duna manera ms cmoda.
MTODES DOBTENCI DE DADES DE LOBJECTE DATE
Amb els mtodes daquest grup, podrem obtenir informaci parcial sobre qualsevol data
emmagatzemada dins un objecte Date.
Mtode
Descripci
getDate()
Retorna el dia del mes, un nmero de l1 al 31
getDay()
Retorna el dia de la setmana, un nmero entre 0 i 6 (0

dilluns a 6 dissabte)
getFullYear()
Retorna lany (en quatre dgits)
getHours()
Retorna la hora del dia (de 0 a 23)
getMilliseconds()
Retorna els millisegons (de 0 a 999)
getMinutes()
Retorna els minuts (de 0 a 59)
getMonth()
Retorna el mes (de 0 a 11)
getSeconds()
Retorna els segons (de 0 a 59)
getTime()
Retorna el nmero de millisegons transcorreguts des de la

mitjanit de 1/1/1970
getTimezoneOffset() Retorna la diferncia entre la hora UTC i la hora local, en

minuts
-5-

getUTCDate()
Retorna el dia del mes que correspon a la hora universal (de

1 a 31)
getUTCDay()
Retorna el dia de la setmana que correspon a la hora

universal (de 0 a 6)
getUTCFullYear()
Retorna lany dacord a lhora universal, en format de 4

dgits. Entre el 2 de gener i el 30 de desembre sempre
coincideix amb el retornat per getFullTear().
getUTCHours()
Retorna la hora segons UTC (de 0 a 23)
getUTCMilliseconds() Retorna els millisegons de lhora UTC (de 0 a 999)

getUTCMinutes()
Retorna els minuts de lhora UTC (de 0 a 59)
getUTCMonth()
Retorna el mes dacord amb UTC (de 0 a 11)
getUTCSeconds()
Retorna els segons de lhora UTC (de 0 a 59)
getYear()
Desaprovat. Retorna lany en dos dgits. Per dates a partir de

2000 retorna 3 dgits. De fet retorna lany-1900. Es
recomana usar getFullYear()
A continuaci veurem un exemple que inclou la majoria daquests mtodes

<SCRIPT type="text/javascript">
var data = new Date()
var any=data.getFullYear();
var any2=data.getYear()
var mes=data.getMonth();
var dia=data.getDate();
var diaS=data.getDay();
var hora=data.getHours();
var horaUTC=data.getUTCHours();
document.write("Avui s <b>"+ data +"</b><br />");
document.write("L'any amb getFullYear s <b>"+ any +"</b><br />");
document.write("L'any amb getYear s <b>"+ any2 +"</b><br />");
document.write("El mes s <b>"+ mes +"</b> (comenant per 0)<br />");
document.write("El dia del mes s <b>"+ dia +"</b><br />");
document.write("El dia de la setmana s <b>"+ diaS +"</b> (0=diumenge,
1=dilluns... 6=dissabte).");
var d
switch (diaS){
case 0: d="diumenge";break;
case 1: d="dilluns";break;
case 2: d="dimarts";break;
case 3: d="dimecres";break;
case 4: d="dijous";break;
case 5: d="divendres";break;
case 6: d="dissabte";break;
}
document.write("Avui s <b>"+ d +"</b><br />");
document.write("La hora s <b>"+ hora +"</b><br />");
document.write("La hora UTC s <b>"+ horaUTC +"</b><br />");
</SCRIPT>
Examineu el codi i compareu-lo amb el resultat que produeix (figura 3.4). Com podeu veure, el
mtode getDay(); dna com a resultat un nmero que indica el dia de la setmana que correspon a la
data, comenant per 0 que s el diumenge. Aquest nmero lhem fet servir en una estructura switch
per seleccionar el dia de la setmana en lletres. Hi ha una manera ms fcil de fer-ho, que s fent
servir arrays, que veurem ms endavant.
-6-

Figura 3.4. Mtodes de Date
Qu s UTC-GMT?
s el temps universal coordinat (Universal Time Coordinated). El temps de la zona horria de
referncia respecte de la qual es calculen totes les altres zones del mn. Aix tenim que, per
exemple, quan a Tarragona sn les 10 de la nit, a Nova York sn les 4 de la tarda, aix s aix
perqu la sortida i posta de sol s diferent en cada lloc de la terra i en Tarragona respecte a Nova
York tenim una diferncia de 6 hores.
Arran de la necessitat de coordinar accions de diferents indoles: econmiques, socials, militars,
aeronutiques, etc. es va acordar definir un punt de referncia horria comuna per tot el mn.
Daquesta manera es va crear la zona GMT (Greenwich Meridian Time: temps mitj de
l'Observatori de Greenwich, a Londres).
L'hora GMT es basa en la posici mitjana del Sol i va ser definida per primera vegada a partir del
migdia de Greenwich. Per l'1 de gener de 1925 es va adoptar la convenci que les 00:00
representessin la mitjanit, endarrerint aquell dia 12 hores. A partir daleshores GMT se segueix
definint segons la mitjanit de Greenwich.
Com que la rotaci de la Terra s estable per no constant i es retarda o avana de manera nfima
respecte al temps atmic, GMT pateix de certa imprecisi ja que es basa en el moviment mitj del
Sol i en la rotaci de la terra. Va ser per aix que es va definir l'hora UTC, la qual t una gran
precisi, ja que est calculada per rellotges atmics, i representa quin s el temps universal (basat
en les estrelles). A efectes prctics, pel nostre curs, considerarem que GMT i UTC s el mateix.
Tamb sha de tenir en compte la incorporaci de lhorari destiu en la gran majoria de pasos del
mn. Com veiem, JavaScript tamb ho reconeix quan treballem amb els seus mtodes. Fixeu-vos a
la primera sortida de lexemple anterior:
Avui s Tue Aug 21 2012 11:00:50 GMT+0200 (Hora de verano romance)
Lexemple est executat el dia 21 dagost de 2012 a les 11:00:05 en Tarragona. El navegador ens
informa que lhora est 2 per sobre de GMT, una per la diferncia horria entre Espanya i lhora de
Greenwich i una altra perqu estem en lhorari destiu.
Perqu tot aix funcioni correctament, el nostre ordinador ha de tenir la data i lhora configurades
correctament, ja que JavaScript sexecuta en el client i per tant les dates de referncia les agafa de
la configuraci del Sistema Operatiu del client.
A la taula de mtodes podeu veure que molts daquests estan repetits, diferenciant-se entre ells
noms perqu apareix la paraula UTC, ara ja sabeu a que es refereix. Tot seguit veiem un altre
exemple que calcula la diferncia local amb la UTC:
var dif=data.getTimezoneOffset();
-7-

document.write("La diferncia entre la hora local i la UTC s de <b>"+ dif +
"minuts</b><br />");
</SCRIPT>
El resultat daquests codi s el que apareix a la figura 3.5
Figura 3.5. Funcionament de getTimezone()
La sortida indica -120 minuts, es a dir 2 hores (igual que abans), per, perqu s negatiu? Quan
aquest mtode mostra el resultat en forma dun nmero negatiu, indica que la nostra zona horria
es troba a lest de la zona GMT, mentre que un nmero positiu indica que ens troben a loest.
Lexemple sest executant al meu ordinador en Tarragona, el sistema operatiu t activada la
configuraci regional dEspanya. Per tant el resultat negatiu est indicant que Espanya es troba a
lest (a la dreta) de la zona GMT. Podeu tenir una referncia aproximada de les zones horries
mirant el mapa de la figura 3.6
Igual que a lexemple anterior, aquest mtode tamb t en compte si la data est afectada per
lhorari destiu o no.
Figura 3.6. Mapa de zones o fusos horaris. Els lmits no s'ajusten als meridians per adaptar-se a les fronteres internacionals o
a les diferents unitats administratives en qu es divideixen els pasos.
MTODES PER AJUSTAR EL VALOR DUN OBJECTE DATE

Una vegada que disposem dun objecte de tipus Date que emmagatzema una data vlida, tenim al
nostre abast una srie de mtodes que ens permeten manipular la data, amb la finalitat de
realitzar clculs amb ella. Aquests mtodes apareixen en la segent taula:
-8-

Mtode
Descripci
setDate()
Estableix el dia del mes d'un objecte Date
setFullYear()
Estableix l'any (quatre dgits) d'un objecte Date
setHours()
Estableix l'hora d'un objecte Date
setMilliseconds()
Estableix els millisegons d'un objecte de data
setMinutes()
Estableix els minuts d'un objecte Date
setMonth()
Estableix el mes d'un objecte Date
setSeconds()
Estableix els segons d'un objecte Date
setTime()
Estableix la data i hora resultant de sumar o restar un

nombre especificat de millisegons a/des de la mitjanit 1
gener 1970
setUTCDate()
El dia del mes d'un objecte Date d'acord amb l'hora universal
setUTCFullYear()
Estableix l'any del objecte Date d'acord amb l'hora universal

(quatre dgits)
setUTCHours()
Estableix l'hora
universal
d'un
objecte
Date
d'acord amb
l'hora
setUTCMilliseconds() Estableix els milisegons d'un objecte de data, d'acord amb

l'hora universal
setUTCMinutes()
Estableix els minuts d'un objecte Date d'acord amb l'hora

universal
setUTCMonth()
Estableix el mes d'un objecte Date d'acord amb l'hora

universal
setUTCSeconds()
Estableix els segons d'un objecte de data, d'acord amb l'hora

universal
setYear()
Desaprovat. Utilitzeu el mtode setFullYear () en el seu lloc.
Tant el mtode setYear(), com el getYear() de lapartat anterior, estan marcats com obsolets i
desaprovats, i es recomana utilitzar els seus equivalents setFullYear() i getFullYear().
Inicialment noms existien els dos primers ( setYear() i getYear() ) que tractaven lany com a un
nmero de dos dgits. Amb larribada de lany 2000 ens vrem trobar amb un problema: lany 12,
sest referint a 1912 o a 2012? En aquest moment van haver disparitat de solucions, cada
navegador anava a la seva. Per evitar aquest problema, la ECMA International, que s lorganisme que
regula el llenguatge JavaScript (tcnicament anomenat ECMAScript) va incorporat les noves
versions daquestes instruccions ( setFullYear() i getFullYear() ), amb les quals lany es va passar a
tractar com a un nmero de 4 dgits, daquesta manera el problema va desaparixer de soca-rel.
Els navegadors encara accepten les formes obsoletes, noms per compatibilitat amb pgines
antigues, que encara les puguin incloure.
Amb aquests mtodes podem, per exemple, calcular la data de venciment duna factura a pagar en
3 mesos:
var nouMes=data.getMonth()+3;
data.setMonth(nouMes);
document.write("El venciment de la factura s el <b>"+ data +"</b><br />");
</SCRIPT>
-9-

Figura 3.7 Assignant dates
Com podeu veure, hem recuperat el ms que correspon a la data davui, li hem sumat 3 i lhem
desat a la variable nouMes. A continuaci hem substitut el mes de lobjecte data pel contingut de la
variable nouMes, generant aix la nova data, s a dir a la data original li hem sumat 3 mesos.
Quan fem aquests tipus doperacions no hem de patir per si ens passem del rang. Per exemple, si
estem en octubre, que seria el mes 9 (recordeu que es numeren de 0 a 11) i diem que li sumi 3
mesos, donar el mes 9+3=12, que no existeix. JavaScript sap que estem treballant amb dates i
automticament el converteix en gener (mes 0) i li suma 1 a lany. s a dir la data resultant ser
gener de lany segent.
Aquest comportament tamb el t quan operem amb la resta de components de lobjecte Date
(dies, mesos, hores, minuts...). Si al fer una operaci ens passem del lmit perms, inicia de nou el
compte i incrementa en 1 el interval immediatament superior. Per exemple, si a 59 minuts li
sumem 20, utilitza un minut per completar una hora i la data final tindr una hora ms i els 19
minuts restants.
Si li hagussim sumat un nmero ms gran, que impliqui vries hores (per exemple sumar-li 500
minuts), el clcul es far igualment de manera correcta, incrementant les hores que calgui. s ms,
si el nmero que sumem es tan gran que implicaria canviar de dia, tamb ho far sense cap
problema.
Tampoc ens hem de preocupar de si el mes t 28, 29, 30 o 31 dies, JavaScript tamb ho sap.
Finalment, tamb se nadona si un any de trasps o no, treballant perfectament amb les dates que
els inclouen.
MTODES DE CONVERSI
Es tracta de diferents mtodes de lobjecte Date que ens permeten bsicament convertir els valors
entre strings i dates. A la taula segent els podeu veure.
Mtode
Descripci
parse()
Analitza una cadena que representa una data i a partir de

ella retorna el nombre de milisegons des de la mitjanit del 1
gener 1970.
toDateString()
Converteix la data d'un objecte Date en una cadena llegible
toGMTString()
Obsolet i desaprovat. Utilitzeu el mtode toUTCString () en el

seu lloc
toLocaleDateString() Retorna la part de la data d'un objecte Date com una

cadena, utilitzant les convencions de configuraci regional
toLocaleTimeString() Torna la part del temps d'un objecte Date com una cadena,
utilitzant les convencions de configuraci regional
toLocaleString()
Converteix un objecte Date en una cadena, utilitzant les

convencions de configuraci regional
- 10 -

toString()
Converteix un objecte Date en una cadena
toTimeString()
Converteix la part del temps d'un objecte Date en una

cadena
toUTCString()
Converteix un objecte Date en una cadena, d'acord amb

l'hora universal
UTC()
Retorna el nombre de milisegons en una cadena de data des

de la mitjanit de l'1 de gener de 1970, d'acord amb l'hora
universal
valueOf()
Retorna el valor simple d'un objecte Date. Fa el mateix que

getTime()
A continuaci veurem el funcionament del mtode parse():

<!-var cadena="08/21/2012";
var data=Date.parse(cadena);
document.write(data);
//-->
</SCRIPT>
Retorna el nmero 1345500000000 que no
t res de particular, es tracta del nmero de millisegons

que han passat de la mitjanit de l1/1/1970 a la mitjanit del 21/9/2012.
s curiosa la forma que hem fet servir el mtode. Si heu prestat atenci haureu vist que en tots els
exemples anteriors, primer crevem una instncia de lobjecte Date var avui=new Date(); i desprs
utilitzvem els seus mtodes, per exemple: m=avui.getMonth();. Sempre treballvem amb lexemplar
(la instncia) que hem creat prviament.
El mtode parse lhem fet servir directament sobre la prpia classe, sense haver declarat
prviament cap instancia: var data=Date.parse(cadena); En programaci orientada a objectes, les
classes que permeten aquest comportament sen diuen classes esttiques. A continuaci veurem
ms classes esttiques de JavaScript.
3.1.2.3 Lobjecte Math

L'objecte Math ens permet realitzar tasques matemtiques en JavaScript. Anteriorment ja hem
vist com podem fer operacions per mitj dels operadors numrics. Bsicament sumes, restes,
multiplicacions..., Math ens permet fer operacions ms complexes.
s una classe esttica. No t un constructor, es a dir no es poden crear instncies de Math amb la
clusula new. Per tant, totes les seves propietats i/o mtodes shan dexecutar utilitzant la prpia
classe.
PROPIETATS DE LOBJECTE MATH
Totes les seves propietats sn readOnly, s a dir, sn propietats de solament lectura, les podrem
fer servir en els nostres clculs per no podem alterar el seu valor.
Propietat
Descripci
Retorna el nombre d'Euler (aprox. 2.718)
LN2
Retorna el logaritme natural de 2 (aprox. 0.693)
LN10
Retorna el logaritme natural de 10 (aprox. 2.302)
LOG2E
Retorna el logaritme base-2 d'E (aprox. 1.442)
- 11 -

LOG10E
Retorna el logaritme en base 10 d'E (aprox. 0.434)
PI
Retorna PI (aprox. 3.14)
SQRT1_2
Retorna l'arrel quadrada de 1/2 (aprox. 0.707)
SQRT2
Retorna l'arrel quadrada de 2 (aprox. 1.414)
Exemple:
<!-document.write("El valor de PI s " + Math.PI +"<BR />");
document.write("El nmero d'Eules s " + Math.E +"<BR />");
document.write("L'arrel quadrada de 2 s " + Math.SQRT2 +"<BR />");
document.write("Longitut d'una circunferncia de radi 5 = " + 2 * Math.PI * 5);
//-->
</SCRIPT>
Figura 3.8 Propietats de Math
MTODES DE LOBJECTE MATH

A travs daquests mtodes tenim accs a una varietat doperacions aritmtiques complexes per
treballar amb els nostres programes. Normalment reben un ms parmetres, que sn els valors
sobre els que efectuar els clculs. Tenim els segents mtodes:
Mtode
Descripci
abs(x)
Retorna el valor absolut de x (x sense signe)
acos(x)
Retorna l'arc cosinus de x, en radiants
asin(x)
Retorna l'arc sinus de x, en radiants
atan(x)
Retorna l'arc tangent de x com un valor numric entre -PI/2 i PI/2

radians
atan2(x,y)
Retorna el arctangent del punt determinat per les coordenades

cartesianes x i y
ceil(x)
Retorna x, arrodonit cap amunt a l'enter ms proper
cos(x)
Retorna el cosinus de x (x est en radians)
exp(x)
Retorna el nmero E elevat a x
floor(x)
Retorna x, arrodonit a la baixa a l'enter ms proper
log(x)
Retorna el logaritme natural (base e) de x
max(x,y,z,...,n) Retorna el nmero amb el valor ms alt de la srie de parmetres

min(x,y,z,...,n) Retorna el nmero amb el valor ms baix de la srie de
parmetres
pow(x,y)
Retorna el valor de x elevat a y (xy)
random()
Retorna un nombre aleatori entre 0.0000000... i 0.9999999...
- 12 -

round(x)
Arrodoneix x al sencer ms proper
sin(x)
Retorna el sinus de langle x (x est en radians)
sqrt(x)
Retorna l'arrel quadrada de x
tan(x)
Retorna la tangent d'un angle de n graus (en radians)
Alguns daquests mtodes gaireb no els utilitzarem mai a les nostres pgines web, s poc
probable que feu servir els mtodes dedicats a clculs trigonomtrics, daltres potser si que els
farem servir ms.
Si us fixeu a la taula, tenim un mtode per resoldre larrel quadrada (sqrt(x)), per potser trobareu
a faltar mtodes per calcular altres arrels diferents a larrel quadrada. Per exemple, com es fa una
arrel cbica? En matemtiques sabem que una arrel sempre es pot expressar en forma de
potncia. Aix tenim que larrel quadrada de 16 s el mateix que 16 elevat a .
i en general
Com que disposem del mtode pow que pot realitzar qualsevol potncia, ja tenim resolt el nostre
problema. Al segent exemple calculem larrel cbica de 27.
<script language="javascript">
<!-var resultat=Math.pow(27,1/3);
document.write ("L'arrel cbica de 27 s " + resultat);
//-->
</script>
El mtode Random cada vegada que el cridem ens proporciona un nmero aleatori diferent
comprs entre 0.0000000... i 0.999999... s a dir, pot ser 0 per no arribar mai a 1 tot i que shi
pot acostar molt. Per tant aquest mtode el podem utilitzar per fer simulacions o fins i tot
programar jocs datzar. Ara b, potser us esteu preguntant, si noms retorna nmeros entre 0 i
0.99999... com ho faig per simular un dau, per exemple? La resposta est, com abans, en la
utilitzaci de les matemtiques. Al segent exemple simulem el llanament de un dau 10 vegades.
<!-var r;
for(x=1;x<=10;x++){
r = Math.floor((Math.random()*6))+1;
document.write ( "Tirada " + x + ", ha sortit " + r + "<BR />");
}
//-->
</script>
Figura 3.9. Nmeros aleatoris, simulaci dun dau.
Repassant el codi, veureu que es tracta dun bucle for que es repetir 10 vegades, per tant ja tenim
els 10 llanament del dau. El llanament ho simulem en la lnia:
- 13 -

r = Math.floor((Math.random()*6))+1;
Anem a estudiar-ho pas a pas:

Tenim Math.random(), que ens donar un nmero de lestil 0.5069738544989377, com hem vist,
els possibles nmeros que es podem obtenir van de 0.00000.... a 0.9999999...
Multipliquem el nmero anterior por 6, daquesta manera, estem modificant el rang, el
lmit inferior continuaria sent zero (0*6=0) per, el lmit superior passaria a ser
5.9999999... (0.99999... * 6 = 5.99999...), per tant hem modificat el rang de 0 seguit dun
munt de decimals a 5 tamb seguit dun mut de decimals. Lexemple quedar
0.5069738544989377 * 6 = 3.0418431269936264.
Com que un dau no t nmeros decimals, arrodonim aquest nmero a lenter
immediatament inferior, amb el mtode floor. Es a dir, li traiem els decimals. Daquesta
manera els possibles nmeros ara es mouen en el rang de 0 a 5. El nostre exemple sha
convertit en un 3. Aquest pas tamb lhaurem pogut resoldre amb parseInt() .
Ja tenim un rang que va de 0 a 5, per els valors del dau van de 1 a 6, per tant, la nica cosa
que hem de fer s sumar-li 1, daquesta manera el rang passar de l1 al 6. En el nostre
exemple, el llanament del dau ens hauria donat un 4.
ALTRES POSSIBLES FORMES DUTILITZAR RANDOM. NMEROS ALEATORIS COMPRESOS ENTRE UN RANG
DETERMINAT.
<!-var r, inf, sup;
r=Math.floor((Math.random()*10)); //Entre 0 i 9
document.write ( "Aleatori entre 0 i 9 = " + r + "<BR />");
r=Math.floor((Math.random()*11)); //Entre 0 i 10
document.write ( "Aleatori entre 0 i 10 = " + r + "<BR />");
inf=parseInt(prompt("Entra el lmit inferior",""));
sup=parseInt(prompt("Entra el lmit superior",""));
document.write("10 nmeros entre "+inf+" i "+sup);
for (x=1;x<=10;x++){
var r = Math.floor(Math.random()*(sup-inf+1)) + inf;
document.write ( "Nm. "+ x + " = " + r + "<BR />");
}
//-->
</script>
A la figura 3.10 podeu veure la sortida que produeix. Estudieu detingudament el codi, presteu
especial atenci a la lnia que apareix en negreta, mostra com es poden generar nmeros aleatoris
entre un rang determinat, en lexemple els lmits del rang els hem demanat a lusuari mitjanant la
instrucci prompt().
Veiem que hem fet:
Demanem el lmit inferior i el superior i els emmagatzemen en les variable inf i sup,
respectivament.
Muntem un bucle for que donar 10 voltes i generar 10 nmeros, aix podrem comprovar que el
resultat sadapta als lmits especificats. En cada volta del bucle, treien un nmero aleatori
comprs entre els lmits desats a les variables inf i sup. La instrucci amb la que ho aconseguim s:
r = Math.floor(Math.random()*(sup-inf+1)) + inf;
Per tractar dentendre com funciona, farem dordinador:

Imagineu que inf=10, sup=20 i que Math.random() ha generat el nmero 0.5069738544989377
El truc est en multiplicar el resultat de Math.random() per (sup-inf+1), que en el nostre exemple seria
20-10+1 = 11, al multiplicar per onze farem que el rang de sortida original de random que anava de 0 a
0.999999.. passi a ser de 0 a 10.999999... El nostre exemple queda: 0.5069738544989377 * 11 =
5.576712399488315
- 14 -

Tota la operaci anterior est inclosa dins Math.floor( ) que li treu els decimals. Per tant el rang
quedar entre 0 i 10. (Al nostre exemple quedar un 5).
Ara tenim nmeros compresos entre 0 i 10, per els volem entre 10 i 20. Noms cal sumar-li al
resultat el lmit inferior (inf=10) amb la qual cosa ja tindrem nmeros en el rang que volem, entre
10 i 20 : r = Math.floor(Math.random()*(sup-inf+1)) + inf;
Figura 3.10 Mtode random
ARRODONINT UNA XIFRA A UN DETERMINAT NOMBRE DE POSICIONS DECIMALS

En algunes operacions necessitarem arrodonir el resultat a un cert nombre de posicions decimals.
JavaScript t el mtode round(n) que arrodoneix el nmero n a l'enter ms proper. Podem fer-ho
servir per arrodonir a un nmero fraccionari amb un determinat nmero de posicions decimals.
Per exemple si al nmero n = 3.942987 li apliquem mtode round(n) ens retornaria un 4. Ara, imagineu
que el volem arrodonir a 3 decimals; s a dir, volem obtenir el resultat 3.943, (atenci, 3,943 en
comptes de 3.942, perqu estem arrodonim i el nmero original est ms prxim de 3.943 que de
3.942).
Noms haurem de multiplicar n per 1000, arrodonir el resultat amb Math.round() i dividir el nou
resultat entre 1000:
var n = 3.942987;
n = Math.round(n * 1000) / 1000;
alert (n);
El resultat ser 3.943 tal com volem.
Si el mirem pas a pas veurem el que hem fet:

3.942987 * 1000 = 3942.987 (hem desplaat la coma 3 posicions)
Arrodonim el resultat anterior Math.round(3942.987) = 3943 (lenter ms prxim)
El resultat anterior el dividim entre 1000; 3943/1000 = 3.943, hem obtingut el que volem.
La mateixa tcnica es pot utilitzar per arrodonir a qualsevol quantitat de llocs decimals, ja que
cada lloc s igual a una potncia de deu. El nostre multiplicador ser deu elevat al nombre de
posicions decimals que vulguem aconseguir: 10num. decimals.
Mireu el segent exemple, en el que demanem el nmero que volen arrodonir i a continuaci el
nmero de decimals (recordeu que prompt sempre retorna una cadena, per tant abans doperar
amb ella lhem de convertir a numrica).
<!-num=parseFloat(prompt("Quin nmero vols arrodonir?",""))
decimals=parseInt(prompt("Quants decimals ha de tenir?",""))
var multiplicador = Math.pow(10, decimals);
- 15 -

var r = Math.round(num * multiplicador) / multiplicador;
document.write("El nmero " + num + " ara val <b>" + r +"</b>" )
//-->
</script>
En la lnia marcada en negreta estem calculant el nostre multiplicador.
Proveu amb diferents valors, tant pel nmero inicial com pels decimals, fins i tot podeu provar
dentrar un numero enter i dir-li que larrodoneixi a 2 decimals, per exemple.
Si esteu realitzant clculs financers, recordeu que l'arrodoniment no necessriament s sempre
l'enfocament correcte. El total d'una cistella de la compra, per exemple, sempre sha darrodonir al
cntim ms proper. Per, en altres casos, s possible que vulgueu utilitzar Math.floor o Math.ceil (per
arrodonir cap avall o cap amunt, respectivament), en lloc de Math.round.
3.1.2.4 Lobjecte Number

Es tracta dun objecte que ens permet fer tasques relacionades amb les dades numriques.
Tot i que es poden crear instncies de la classe Number fent var num = new Number(valor); no
sacostuma a fer ja que aquesta instrucci fa el mateix que quan declarem una variable de la forma
var num = valor; que s molt ms prctica. El ms normal s que utilitzem el nom de la classe per
accedir als seus mtodes i propietats, igual que hem fet amb Math.
A continuaci podem veure les propietat de la classe Number.
Propietat
Descripci
MAX_VALUE
Retorna el major nombre possible en JavaScript
MIN_VALUE
Retorna el nombre ms petit possible en JavaScript
NEGATIVE_INFINITY Representa infinit negatiu (retornat en cas de desbordament)

NaN
Representa un valor "Not-a-Number"
POSITIVE_INFINITY Representa infinit (retornat en cas de desbordament)
Veiem un exemple de les propietats de Number:

<!-document.write("MAX_VALUE
s "+Number.MAX_VALUE+"<BR />");
document.write("MIN_VALUE s "+Number.MIN_VALUE+"<BR />");

document.write("NEGATIVE_INFINITY s "+Number.NEGATIVE_INFINITY+"<BR />");
//-->
</script>
Lobjecte t els segents mtodes, (tots ells retornen un valor de tipus string):
Mtode
Descripci
toExponential(x)
Converteix un nombre en una notaci exponencial
toFixed(x)
Dna format a un nmero amb un nombre x de dgits desprs

del punt decimal
toPrecision(x)
Dna format a un nombre amb longitud x
toString()
Converteix un objecte Number en una cadena
valueOf()
Retorna el valor simple d'un objecte Number
- 16 -

.
Exemple:
<!-var num=Math.PI;
document.write("Valor de PI: "+num+"<BR />");
document.write("toExponential(): "+num.toExponential()+"<BR />");
document.write("toExponential(5): "+num.toExponential(5)+"<BR />");
document.write("toFixed(4): "+num.toFixed(4)+"<BR />");
document.write("toFixed(): "+num.toFixed()+"<BR />");
document.write("toPrecision(2): "+num.toPrecision(2)+"<BR />");
document.write("toString(): "+num.toString()+"<BR />");
document.write("valueOf(): "+num.valueOf()+"<BR />");
//-->
</script>
Produeix la sortida de la figura 3.11
Figura 3.11. Mtodes de Number
Hem utilitzat el valor de PI per provar els diferents mtodes. Observacions:

El mtode toExponential() admet un parmetre opcional, es tracta dun nombre enter entre 0 i 20
que representa el nombre de dgits en la notaci desprs del punt decimal. Si s'omet,
s'estableix en tants dgits com sigui necessaris per representar el valor.
El mtode toFixed(x) converteix el nmero en una cadena, amb tants decimals com li hem
especificat al parmetre x. Si en x especifiquem ms decimals que xifres t el nombre real,
s'afegeixen zeros per completar la cadena amb la longitud demanada. Si no especifiquem els
decimals que volem, per defecte agafa zero.
Fixeu-vos que toFixed(x) arrodoneix el valor a un determinat nombre de decimals, tal com havien
fet per programaci a lapartat Math. La diferncia est en que aquest mtode retorna una
string, mentre que la forma en que ho hem fet amb Math sempre tenim un nmero. Potser una
forma ms fcil darrodonir a un nmero de decimals, hauria estat utilitzar aquest mtode i
posteriorment tornar a convertir el resultat a numric:
<!-var num=Math.PI;
var pi2=parseFloat(num.toFixed(4));
document.write("Valor numric de PI amb 4 decimals : "+pi2+"<BR />");
//-->
</script>
Una altra cosa que hem de tenir en compta s que si volem mostrar informaci formatada, per
exemple amb dos decimals, i no tenim prou xifres per generar els dos decimals, el resultat en
forma de string afegeix zeros, mentre que si convertim a numric aquests zeros desapareixen:
var num = 185;
document.write(num.toFixed(3));//Mostra 185.000
- 17 -

document.write(parseFloat(num.toFixed(3)));//Mostra 185
toPrecision(x), s semblant a lanterior, per ara el parmetre x indica la longitud que tindr la
cadena resultant, contant tant la part entera com els decimals (el punt de separaci de
decimals no es compta). Si no passem el parmetre x, retorna el nmero sencer.
toString(), ja lhem vist en un apartat anterior, retorna el valor numric convertit en string. T
un parmetre opcional que indica la base en la que volem que ens retorni el valor. Pot de ser un
nombre enter entre 2 i 36. (2-binary, 8-octal, 16-hexadecimal, etc.). Proveu el segent exemple:
<!-var num = 185;
var a = num.toString();
document.write(a+"<br />");
var b = num.toString(2);
document.write(b+"<br />");
var c = num.toString(8);
document.write(c+"<br />");
var d = num.toString(16);
document.write(d+"<br />");
var e = num.toString(25);
document.write(e+"<br />");
//-->
</script>
valueOf(), fa el mateix que toString() sense parmetres, retorna el nmero convertit en cadena.
3.1.2.5 Lobjecte String
Amb aquest objecte podrem manipular cadenes de text. Noms t una propietat length, que retorna
la longitud de la cadena, s a dir, el nmero de carcters que la forma.
<!-var cadena = "Hola Manola";
document.write(cadena.length+"<br />");
//-->
</script>
El resultat daquest codi s el valor numric 11, que sn el nmero de carcters de la frase Hola
manola fixeu-vos que lespai tamb compta.
Pel que respecta als mtodes, tenim un ampli ventall, amb ells podrem manipular totes les
variables de tipus string.
Mtodes genrics de lobjecte String :
Mtode
Descripci
charAt()
Retorna el carcter situat en la posici especificada
charCodeAt()
Retorna el Unicode del carcter situat en la posici especificada
concat()
Retorna el resultat dajuntar dues o ms cadenes
fromCharCode() Converteix valors Unicode en carcters

indexOf()
Retorna la posici de la primera aparici en la cadena del carcter

passat com a parmetre.
lastIndexOf()
Retorna la posici de la ltima aparici en la cadena del carcter

passat com a parmetre.
match()
Busca les coincidncies duna expressi regular en una cadena, i

les retorna en forma darray.
replace()
Busca coincidncies en una cadena, i les reemplaa per una altra

cadena que passem com a parmetre.
- 18 -

search()
Busca una coincidncia entre una expressi regular i una cadena i

retorna la posici on lha trobat.
slice()
Retorna la porci de cadena compresa entre les posicions donades

per dos arguments inici i ltim, o el final de la cadena si s'omet
ltim.
split()
Divideix una cadena en una matriu de subcadenes
substr()
Extreu un nmero especificat de carcters d'una cadena, a partir

d'una posici d'inici tamb especificada
substring()
Extreu els carcters d'una cadena, entre dos ndexs especfics
toLowerCase()
Converteix una cadena a minscules
toUpperCase()
Converteix una cadena a majscules
valueOf()
Retorna el valor de lobjecte String
Estudiem-los en detall:
charAt(pos), torna el carcter que es troba en la posici marcada per l'atribut pos. Hem de
tenir en compte que l'ndex del primer carcter de la cadena s 0, per tant lltim ser el
resultat de length-1 . Si el valor de pos no s vlid (igual o major que la longitud de la cadena o
negatiu) el mtode retorna undefined. Exemple, el segent codi retorna la posici del tercer
carcter de la cadena nom:
var cadena = "HOLA MANOLA";
var C3 = cadena.charAt(2);
Retornar "L", que s el tercer carcter per l'esquerra (el seu ndex s 2).
charCodeAt(pos), Funciona igual que lanterior, per en comptes del carcter que hi ha a la
posici, aquest retorna el codi Unicode del carcter. Exemple:
var cadena = "HOLA MANOLA";
var c3 = cadena.charCodeAt(2);
Retornar 76 que s el codi Unicode de la tercera lletra (la L).
Concat(cad), aquest mtode li afegeix (concatena) a la cadena el parmetre passat cad. El

parmetre ha de ser una variable o una constant literal, qualsevol altre tipus s convertit
automticament a cadena. Per exemple el segent codi concatena 'Bon' i 'dia':
var salut1 = "Bon ";
var salut2 = salut1.concat("dia");
Salut2 contindr Bon dia
fromCharCode(codis). Crea una cadena a partir dels codis Unicode que se li passin com
parmetres. Aquest s un mtode esttic de l'objecte String, i la sintaxi s sempre
String.fromCharCode ().Per exemple:
var cadena = String.fromCharCode (65,66,67);
La variable cadena contindr "ABC", que sn els carcters corresponents als codis 65, 66 i 67.
indexOf( cad, inici), retorna la posici de la primera aparici d'un valor especificat en una
cadena. Aquest mtode retorna -1 si el valor no es troba.
Nota: El mtode indexOf () distingeix entre majscules i minscules. Admet un segon argument
inici opcional, que indica des de quina posici sha de comenar la recerca, si s'omet comena a
buscar pel primer carcter. Si donem valors negatius o majors que la longitud de la cadena al
segon argument es consideren 0. Exemple:
var cadena = "m.lara@mimail.com";
var arrova = cadena.indexOf ('@');
var punt = cadena.indexOf ('.', arrova);
- 19 -

El resultat assigna a la variable arrova la posici 6 mentre que la variable punt cont un 13 ja
que la recerca es fa des de la posici on hi ha el carcter arrova. Recordeu que les posicions en
les cadenes s'enumeren des de 0.
lastIndexOf(cadena, inici), funciona igual a lanterior, per les cerques es fa de dreta a
esquerra (cerca comenant pel final)
var cadena = "m.lara@mimail.com";
var arrova = cadena.lastIndexOf ('@');
var punt = cadena.lastIndexOf ('.', arrova);
Aquesta versi assigna a arrova un 6, igual que abans, ja que noms existeix una arrova i est en
la posici 6, per la seva banda, punt ara cont un 1, per que li hem dit que comenci a buscar des
de la posici 6 per cap enrere, el punt que ara troba s el primer, que est en la posici 1
(recordeu que es comena a numerar des de 0).
Match(ExpReg). A aquest mtode se li passa com a parmetre una expressi regular i va

buscant en l'objecte alguna subcadena que concordi amb aquesta expressi. Totes les que trobi
les retorna en forma dun array. Si no en troba cap retorna null. Una expressi regular s un
patr de recerca construt amb carcters comodins i text. Si l'expressi regular no inclou
l'opci g (per fer una cerca global), el mtode match () noms buscar el primer element que
sajusti a lexpressi regular. En una altra part daquest curs treballarem ms a fons les
expressions regulars.
Exemple:
<!-var frase = new String();
frase="Els Setze Jutges va ser un grup de cantants en llengua catalana";
var result=new Array();
result=frase.match(/\b\w{1,4}\b/g);
document.write("Dins la frase:<b> " + frase +"</b><br>");
document.write("les paraules <b>: "+result+ "</b> tenen menys de 5 lletres");
//-->
</script>
Fixeu-vos en que lexpressi regular /\b\w{1,4}\b/g fa que es busquin totes les paraules de entre 1
i 4 lletres. El resultat es desa en una array var result=new Array(); que encara no hem vist que s,
per us puc avanar que s com una llista amb tots els resultats.
replace( subcadena, cadena ) totes les cadenes que concordin amb el primer argument
subcadena seran reemplaades pel segon argument, cadena. El primer parmetre pot ser una
cadena o una expressi regular. Per exemple en la cadena "Cada paraula dita s una paraula
falsa" volem canviar paraula per frase
<!-var cadena = new String("Cada paraula dita s una paraula falsa");
cadena = cadena.replace("paraula", "frase");
document.write(cadena);
//-->
</script>
Proveu lexemple i observeu que shan substitut totes les ocurrncies de paraula per frase. La
sortida ha estat: Cada frase dita s una frase falsa. Aquest mtode diferencia entre majscules i
minscules, mireu aquest altre exemple:
<script language="JavaScript">
<!-var cadena = new String("Joan Pera menja una pera en la sopera");
cadena = cadena.replace(/pera/g, "poma");
document.write(cadena);
//-->
</script>
- 20 -

Ara hem fet servir una expressi regular (no va entre cometes) que dna com a resultat la frase Joan
Pera menja una poma en la sopoma si us fixeu ha canviat noms les dues aparicions de la cadena pera
en minscula. El cognom Pera t la P en majscula, per tant, no coincideix amb lexpressi
regular. Observeu tamb que canvia les concordances all on les troba, no cal que sigui una
paraula sencera (sopera sha canviat per sopoma).
Si voleu que ignori majscules i minscules, afegiu una lletra i a lexpressi regular (/pera/gi).
Feu el canvi i proveu, ara obtindrem Joan poma menja una poma en la sopoma. Tamb ho podeu provar
traient la g de lexpressi regular, veureu com ara noms fa un canvi.
search (), cerca en la cadena un valor especificat, o una expressi regular i retorna la posici
on lha trobat o un -1 si no es troba cap coincidncia. Majscules i minscules les considera
diferents. Exemple:
<!-var cadena = new String("Joan Pera menja pera en la sopera ");
pos1 = cadena.search("pera");
pos2=cadena.search(/pera/i);
document.write("pos1= "+pos1+"<br />");
document.write("pos2= "+pos2);
//-->
</script>
Desprs dexecutar lexemple, pos1 valdr 16 i pos2 valdr 5, fixeu-vos que en
el primer cas hem

cercat la cadena pera i lhem trobada a la posici 16. En el segon cas hem buscat lexpressi
regular /pera/i on la i indica ignorar majscules i minscules, per tant ara hem trobat la
subcadena Pera a la posici 5.
slice(inici,final), retorna la porci de cadena compresa entre les posicions donades pels
arguments inici i final, o el final de la cadena si s'omet el segon argument. Si final s negatiu,
s'interpreta com el final de la cadena menys el nmero negatiu.
<!-var frase="Hola Manola";
var n=frase.slice(0);
document.write("Treballem la frase<b> "+ frase+"</b><br />");
document.write("frase.slice(0) = <b>"+n+"</b><br />");
n=frase.slice(5)
document.write("frase.slice(5) = <b>"+n+"</b><br />");
n=frase.slice(5,9)
document.write("frase.slice(5,9) = <b>"+n+"</b><br />");
n=frase.slice(1,-3)
document.write("frase.slice(1,-3) = <b>"+n+"</b><br />");
//-->
</script>
Obtenim el resultat de la figura 3.12
Figura 3.12. Mtode slice()
Amb el segon parmetre negatiu, n=frase.slice(1,-3), estem dient: des de la posici 1 fins 3 abans del
final. Recordeu que les posicions comencen per zero.
- 21 -

Split(separador), crea una matriu que cont les porcions en qu queda separada la cadena si
tallem cada vegada que trobem el separador indicat mitjanant l'argument separador. El
separador pot ser una expressi regular o cadena. Si aquest separador s una cadena buida el
text es desglossa en tots els seus carcters. Si s'omet el separador el resultat s una matriu d'un
nic element amb la cadena original completa.
<!-var f="Pere Calders va nixer i va morir a Barcelona entre el 1912 i el 1994";
var n=f.split(" ");
document.write(n+"<br />");
document.write(n[3]);
//-->
</script>
Produeix la sortida de la figura 3.13. A la frase original a anat tallant cada vegada que trobava un
espai i les porcions les ha anat desant en una matriu. Tot i que encara no hem treballat les
matrius, ja sabem que s com una llista, quan li diem que mostri el contingut de la matriu n,
mostra tots els elements de la llista separats per una coma, si li diem que mostri n[3] li estem
manant que mostri el element que es troba a la posici 3 de la llista i mostra nixer, les llistes
tamb es comencen a numerar per zero.
Figura 3.13. Mtode split()
substr( inici, longitud), Extreu una subcadena que comena en el carcter indicat per inici, i
retorna el nombre de carcters especificat en longitud. Per extreure carcters des del final de la
cadena, doneu a inici un valor negatiu (Aquesta caracterstica no funciona en IE 8 ni anteriors).
El mtode substr() no canvia la cadena original.
<!-var frase="Pere Calders va nixer i va morir a Barcelona entre el 1912 i el
1994";
var n=frase.substr(5,7);
n=frase.substr(-14,4)
//-->
</script>
En la primera instrucci en negreta frase.substr(5,7); li estem dient: a partir de la posici 5 agafa 7
carcters, retorna Calders.

En la segona, frase.substr(-14,4), li estem dient comenant 14 abans del final agafa 4 i retorna 1912
substr( desDe, finsA), Funciona igual que en el cas anterior, per extreu la subcadena que va
des del carcter indicat per desDe, fins a un carcter abans de lespecificat en finsA. (Atenci, el
carcter indicat a finsA, no sinclou en la selecci). Si no sespecifica el segon parmetre agafa
des del parmetre inici fins al final.
var frase="Automovil";
var n=frase.substring(2,6);
document.write(n+"<br />");// mostra tomo
Agafa la subcadena de la posici 2 fins a la 5

- 22 -

toLowerCase(),Retorna una cadena igual a l'original per amb tots els carcters en
minscules. Exemple:
var frase="JOAN GMEZ PEA";
document.write(frase.toLowerCase()+"<br />");
Escriu a la pantalla joan gmez pea, proveu lexemple amb altres frases amb accents i
diferents tipus de carcters.
toUpperCase(), funciona igual que lanterior per retorna la cadena en majscula.
var frase="joan lvarez ocaa";
document.write(frase.toUpperCase()+"<br />");// retorna JOAN LVAREZ OCAA
Mtodes de lobjecte String que afecten a HTML:

Mtode
Descripci
anchor()
Crea una cadena contenint un element HTML ANCHOR, amb

l'atribut NAME igual a la cadena que se li passi
big()
Mostra una cadena utilitzant un tipus de lletra gran (big)
blink()
Mostra una cadena que parpelleja
bold()
Mostra una cadena en negreta
fixed()
Mostra una cadena utilitzant un tipus de lletra de pas fix
fontcolor()
Mostra una cadena amb un color especificat
fontsize()
Mostra una cadena amb una mida especificada
italics()
Mostra una cadena en cursiva
link()
Mostra una cadena com un hipervincle
small()
Mostra una cadena amb una font petita (small)
strike()
Mostra una cadena amb ratllada (tatxada)
sub()
Mostra una cadena de text com subndex
sup()
Mostra una cadena de text com superndex
A continuaci teniu un exemple:

<script>
var txt = "La frase s: Hola Manola, com no?";
document.write("<p>Big: " + txt.big() + "</p>");
document.write("<p>Small: " + txt.small() + "</p>");
document.write("<p>Bold: " + txt.bold() + "</p>");
document.write("<p>Italic: " + txt.italics() + "</p>");
document.write("<p>Fixed: " + txt.fixed() + "</p>");
document.write("<p>Strike: " + txt.strike() + "</p>");
document.write("<p>Fontcolor: " + txt.fontcolor("green") + "</p>");
document.write("<p>Fontsize: " + txt.fontsize(6) + "</p>");
document.write("<p>Subscript: " + txt.sub() + "</p>");
document.write("<p>Superscript: " + txt.sup() + "</p>");
document.write("<p>Link: " + txt.link("http://www.vidalibarraquer.net") + "</p>");
document.write("<p>Blink: " + txt.blink() + " (no funciona en IE, Chrome ni
Safari)</p>");
</script>
Feu el bloc 1 d exercicis. Punt 3, del full de prctiques (Pg. 3).

- 23 -

3.2 Objectes predefinits associats al navegador
Es tracta duns objectes predefinits que ens permeten controlar diferents caracterstiques del
navegador, com ara obrir i tancar noves finestres, manipular la barra destat, etc.
3.2.1 lObjecte Navigator
Ens permet identificar diferents dades referents a la plataforma en que sest executant una
pgina. Ms concretament ens permet identificar el navegador i el sistema operatiu del client.
Aquesta caracterstica ens pot ser de gran ajuda, ja que algunes comandes de JavaScript no es
comporten de manera similar en tots els navegadors
Mtodes de navigator
Propietat
Descripci
appCodeName
Retorna el nom clau del navegador
appName
Retorna el nom del navegador
appVersion
Retorna la versi del navegador
cookieEnabled
Determina si les galetes estan habilitades al navegador
onLine
s un Boolean que retorna true si el navegador est en

la lnia, en cas contrari fals.
platform
Retorna en quina plataforma sest executant el

navegador
userAgent
Retorna la capalera complerta d'agent d'usuari enviat

pel navegador al servidor
Exemple dels mtodes de navigator:

<script>
document.write("appCodeName: <b>" + navigator.appCodeName+"</b><br />");
document.write("appName: <b>" + navigator.appName+"</b><br />");
document.write("appVersion: <b>" + navigator.appVersion+"</b><br />");
document.write("cookieEnabled: <b>" + navigator.cookieEnabled+"</b><br />");
document.write("onLine: <b>" + navigator.onLine+"</b><br />");
document.write("platform: <b>" + navigator.platform+"</b><br />");
document.write("userAgent: <b>" + navigator.userAgent+"</b><br />");
</script>
Que produeix en Internet Explorer la sortida que podeu veure a la figura 3.14
Figura 3.14. Propietats de navigator en IE
Lobjecte navigator t com a mtodes noms dos, javaEnabled() i taintEnabled(), el primer retorna un
boolean que informa si el navegador t actiu o no Java. El segon est obsolet i saconsella no
utilitzar-lo, va desaparixer amb JavaScript 1.2, indica si est actiu o no un mtode antic denviar
- 24 -

dades al servidor de manera no segura (que ja no es fa servir), aquest mtode actualment noms
el contempla IE i Opera.
A continuaci veurem un altre exemple molt interessant, amb el que recorrerem totes les
propietats de lobjecte navigator mostrant el seu valor. Per dur a terme aquesta acci utilitzarem
la sentencia for-in de JavaScript.
<script>
for (prop in window.navigator){
document.write(prop + " = " + window.navigator[prop] + "<br />")
}
</script>
Executeu aquest exemple en diferents navegadors i observeu que no en tots

ells lobjecte navigator t les mateixes propietats.
La sentncia for-in, executa el cos del bucle per cada element duna collecci o dun array. Al
exemple for (prop in window.navigator) la collecci que fem servir s window.navigator que inclou totes les
propietats de lobjecte navigator.
Li estem diem: agafa la primera propietat de window.navigator, assigna-la a lobjecte prop i a
continuaci executa el cos del bucle, quan acabis agafa la segona propietat de window.navigator,
torna a assignar-la a prop i torna a executar el bucle. Continua aix fins hagis passat per totes les
propietats. Com podeu veure es tracta duna forma senzilla de recrrer tots els elements duna
collecci, sense ni tan sols saber quants nhi ha a la mateixa.
En el cos del bucle hem fet : document.write(prop + " = " + window.navigator[prop] + "<br />") , escrivim prop,
que s el nom de la propietat que sest avaluant, concatenada amb un igual i el valor de la
propietat, que lobtenim fent window.navigator[prop].
3.3 Gesti de laparena de la finestra.

3.3.1 Lobjecte screen
Representa la pantalla del monitor, s el lloc on es mostrar la finestra del navegador (window)
que veurem tot seguit. A travs daquest objecte podem esbrinar caracterstiques de la pantalla de
lusuari com ara la resoluci o la profunditat de color, i poder actuar en conseqncia, si ens cal, al
mostrar les nostres pgines.
Totes les propietat de lobjecte screen sn noms de lectura, es a dir, no podem modificar el seu
valor. Lobjecte screen no t mtodes, noms te propietats, que sn les segents:
Propietat
Descripci
availHeight
Retorna l'alada de la pantalla (excepte la barra de

tasques de Windows)
availWidth
Retorna l'amplada de la pantalla (amb exclusi de la barra

de tasques)
colorDepth
Retorna la profunditat de bits de la paleta de colors per a

la visualitzaci d'imatges
height
Retorna l'alada total de la pantalla
pixelDepth
Torna la resoluci de color (en bits per pxel) de la pantalla
width
Retorna l'amplada total de la pantalla
- 25 -

Tot seguit podeu veure un exemple:
<script>
document.write("screen.availHeight: <b>" + screen.availHeight+"</b><br />");
document.write("screen.availWidth: <b>" + screen.availWidth+"</b><br />");
document.write("screen.colorDepth: <b>" + screen.colorDepth+"</b><br />");
document.write("screen.height: <b>" + screen.height+"</b><br />");
document.write("screen.width: <b>" + screen.width+"</b><br />");
document.write("screen.pixelDepth: <b>" + screen.pixelDepth+"</b><br />");
</script>
Executat al meu porttil, produeix la sortida de la figura 3.15
Figura 3.15 Objecte screen
3.3.2 Lobjecte window

Representa una finestra oberta en un navegador. Si un document cont frames (<frame>), el
navegador crea un objecte de window per al document HTML, i un objecte window addicional per
a cada frame.
Com que window est a larrel del DOM, JavaScript el considera com un lobjecte de ms alta
jerarquia i per tant lobjecte implcit, es a dir no cal fer referncia a ell quan accedim als objectes
que t per sota. Per exemple: si volem saber quan es va realitzar la ltima modificaci de la
pgina actual, haurem daccedir a la propietat lastModified fent:
document.write(window.document.lastModified);
per tamb podem ometre la paraula window:

document.write(document.lastModified);
De fet, si us pareu a pensar una mica, veureu que aquesta regla ja lhem estat utilitzant en tots els
exemples en els que apareixia lordre document.write(), ja que la sintaxis complerta hauria de ser
window.document.write(), doncs document depn directament de window. Podeu provar :
window.document.write(window.document.lastModified);
3.3.2.1 Propietats de l0bjecte window

Propietat
Descripci
closed
Retorna un valor Boolean que indica si una finestra s'ha

tancat o no
defaultStatus estableix o torna el text per defecte a la barra d'estat a la

part inferior del navegador (el text es mostrar quan es
carrega la pgina).
document
Representa l'objecte Document depenent de window (el

veurem ms endavant)
frames
Retorna una matriu de tots els frames a la finestra actual
history
Conjunt delements que representa les URL visitades
innerHeight
Estableix o retorna l'alada interior de l'rea utilitzable

d'una finestra
- 26 -

innerWidth
Estableix o retorna lamplada interior de l'rea utilitzable

d'una finestra
length
Retorna el nombre de frames que hi ha en una finestra
location
La URL de la barra dadreces
name
Estableix o retorna el nom de la finestra
opener
Retorna una referncia a la finestra que ha crear la

finestra actual.
outerHeight
Estableix o retorna l'altura exterior d'una finestra, incloent

les barres d'eines / barres de desplaament
outerWidth
Estableix o retorna lamplada exterior d'una finestra,

incloent les barres d'eines / barres de desplaament
pageXOffset
Retorna el nombre de pxels que el document actual s'ha

desplaat (horitzontalment) de la cantonada superior
esquerra de la finestra
pageYOffset
Retorna el nombre de pxels que el document actual s'ha

desplaat (verticalment) de la cantonada superior
esquerra de la finestra
parent
Torna una referncia a la finestra pare de la finestra

actual. Utilitzada amb frames s la finestra contenidora.
screen
Retorna l'objecte screen de la finestra actual (ja el veurem

en detall)
screenLeft
Torna la coordenada x de la finestra en relaci amb la

pantalla
screenTop
Torna la coordenada y de la finestra en relaci amb la

pantalla
screenX
Torna la coordenada x de la finestra en relaci amb la

pantalla
screenY
Torna la coordenada y de la finestra en relaci amb la

pantalla
self
Torna una referncia a la finestra actual (a si mateixa)
status
Estableix el text a la barra d'estat de la finestra
top
Torna la finestra dun nivell superior
La propietat defaultStatus no funciona en la configuraci per defecte de l'IE, Firefox, Chrome o

Safari. Per permetre els scripts canviar el text de la barra destat de l'usuari ha de configurar la
preferncies daquests navegadors.
3.3.2.2 Mtodes de window
Abans de mostrar alguns exemples de lobjecte window, passarem a veure els seus mtodes,
desprs estudiarem alguns exemples en els que utilitzarem tant els mtodes com les propietats de
lobjecte.
- 27 -

Mtode
Descripci
alert()
Mostra un quadre d'alerta amb un missatge i un bot

Acceptar
blur()
Treu el focus de la finestra actual
clearInterval() Atura lexecuci dun procs amb temporitzador que es
va iniciar amb setInterval (Ref.). Ref s la referncia al

procs.
clearTimeout() Atura un temporitzador iniciat amb setTimeout ()

close()
Tanca la finestra actual, no demana confirmaci si la

finestra la hem obert des de codi.
confirm()
Mostra un quadre de dileg amb un missatge, un bot

OK i un bot Cancel
createPopup() Crea una finestra emergent (pop-up)

focus()
Estableix el focus a la finestra actual
moveBy()
Mou una finestra amb relaci a la seva posici actual
moveTo()
Mou una finestra a la posici especificada
open()
Obre una nova finestra del navegador
print()
Imprimeix el contingut de la finestra actual
prompt()
Mostra un quadre de dileg que li fa una pregunta al

visitant
resizeBy()
Redimensiona la finestra amb valors relatius als actuals
resizeTo()
Redimensiona la finestra a l'amplada i alada fixa

especificades.
scrollBy()
Mou el contingut de la pantalla (scroll), el nombre de

pxels especificat (valors relatius).
scrollTo()
Mou el contingut de la pantalla(scroll) a les coordenades

especificades (valors absoluts)
setInterval()
Inicia un procs que sexecutar a intervals especificats

(en milisegons)
setTimeout()
Inicia un procs que sexecuta una sola vegada desprs

de transcorregut un temps en milisegons. Per repetir el
cicle sha de tornar a executar setTimeout.
A continuaci veurem una srie dexemples comentats dutilitzaci de lobjecte window:

3.3.2.3. Exemple de temporitzadors
<!DOCTYPE html>
<html>
<body>
<span id="hora"></span><br />
<script>
var tempo=setInterval("rellotge()",1000);
- 28 -

var funciona=true;
function rellotge(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("hora").innerHTML=t;
}
function polsaBoto(){
funciona=!funciona;
if (funciona){
tempo=setInterval("rellotge()",1000);
document.getElementById("boto").value="Aturar rellotge";
}else{
clearInterval(tempo);
document.getElementById("boto").value="Engegar rellotge";
}
}
</script>
<input type="button" id="boto" value="Aturar rellotge" onclick="polsaBoto()" />
</body>
</html>
Observeu el resultat a la figura 3.16:
Figura 3.16. Temporitzadors
Analitzem el codi:
Primer que res observeu la instrucci var tempo=setInterval("rellotge()",1000); est dient que cada 1000
milisegons (1 segon) executi la funci rellotge(), i que desi en la variable tempo una referncia al
temporitzador que acaba de crear.
Tamb declarem una variable booleana funciona que la inicialitzat a true. La farem servir per marcar
lestat del rellotge (si est en marxa o aturat).
Com li hem manant que cada segon sexecuti la funci rellotge(), la funci ha dexistir sin ens
donar error. Fixeu-vos en el codi i veureu que lhe escrita una mica ms avall.
La funci rellotge() fa el segent:
Crea una variable d amb la data i hora del sistema i a partir de ella extreu la hora local i la desa en
una altra variable t. Finalment la instrucci document.getElementById("hora").innerHTML=t; cerca en tot el
document un element que estigui identificat amb la propietat id=hora, quan el trobi, li assigna a
la seva propietat innerHTML el valor de la variable t, es a dir la hora actual (aquest procs es
repeteix cada segon).
Si analitzeu el codi veure que al comenament hi ha una lnia de HTML, que diu:
<span id="hora"> </span><br />
s aquest element <span> el que trobar la instrucci getElementById, perqu est identificat
id="hora". Per la seva banda innerHTML=t li est dient que el contingut de <span>, es a dir el que hi ha
entre la etiqueta <span> i </span>, ha de mostrar el valor de t (la hora).
- 29 -

Amb aix ja tindrem un bonic rellotge a la nostra pgina web que avana cada segon, per he
volgut fer-ho una mica ms complert i li he posat un bot que ens permet aturar/engegar el
rellotge. Veiem com funciona tot plegat:
Primer que res quan la pgina es posa en marxa, el rellotge ja est en funcionament (lhem posat
en marxa amb la instrucci var tempo=setInterval("rellotge()",1000); ) per tant, mostrem un bot en la
pgina que digui: Aturar rellotge
<input type="button" id="boto" value="Aturar rellotge" onclick="polsaBoto()" />
Tamb li programem lesdeveniment onclick de manera que executi la funci polsaBoto() cada vegada
que el cliquin. Aix que, ara ens toca examinar que fa la funci polsaBoto():
Comencem invertint el valor de la variable global funciona, amb la instrucci funciona=!funciona; si s

true la canvien a false i viceversa. Tot seguit mirem si la variable funciona que acabem dinvertir
est true -el rellotge sha dactivar- o est false el rellotge sha daturar-.
Si est true activem el rellotge amb tempo=setInterval("rellotge()",1000); igual que havem fet la primera
vegada i a ms li canviem el rtol al bot document.getElementById("boto").value="Aturar rellotge"; perqu
mostri aturar rellotge. Fixeu-vos que ho fem utilitzant la mateixa tcnica que utilitzvem amb
getElementById per mostrar la hora dins <span>. Per, ara lelement implicat s un bot i fem
servir la propietat value, que s lencarregada de mostrar el text del bot.
Si el valor de funciona s false executarem la part else de la instrucci if, que ser lencarregada
daturar el rellotge i de canviar el rtol del bot perqu digui Engegar el rellotge:
clearInterval(tempo);
Amb aquesta instrucci aturem el temporitzador referenciat per tempo, si us recordeu agafvem
aquesta referncia en el moment de crear el temporitzador tempo=setInterval("rellotge()",1000); De la
seva banda la instrucci document.getElementById("boto").value="Engegar rellotge"; fa el mateix que hem
explicat abans, cerca el element identificat com a boto (que s el bot) i li canvia la seva propietat
value per "Engegar rellotge".
3.3.2.4. Exemple redimensionat de finestres
<!DOCTYPE html>
<html>
<head>
<script>
var finestra;
function obrir(){
finestra=window.open('','', 'width=100,height=100');
finestra.focus(); //Li assignem el focus perqu no s'amagui
}
function redi(){
finestra.resizeTo(500,500);
finestra.focus();
}
function augmenta(){
finestra.resizeBy(5,5);
finestra.focus();
}
function mou(){
finestra.moveTo(100,100);
finestra.focus();
}
function mouRel(){
finestra.moveBy(-10,-10);
finestra.focus();
}
</script>
- 30 -

</head>
<body>
<button
<button
<button
<button
<button
</body>
</html>
onclick="obrir()">Crear window</button>
onclick="redi()">Redimensionar window</button>
onclick="augmenta()">Augmentar mida</button>
onclick="mou()">Moure a 100,100 mida</button>
onclick="mouRel()">Moure -10, -10</button>
3.3.2.5 Exemple tancar finestra amb temporitzador.

Com a ltim exemple de lobjecte window, farem que aparegui una nova finestra amb la pgina de
Google i utilitzarem el mtode setTimeout, per que es tanqui automticament al cap de 4 segons.
<!DOCTYPE html>
<html>
<head>
<script>
var finestra;
function obrir(){
finestra=window.open('http://www.google.es','google', 'width=400,height=400');
finestra.moveTo(200,200)
setTimeout("tancar()",4000) //Dins de 4 segons executar tancar() una sola
vegada
}
function tancar(){
finestra.close();
}
</script>
</head>
<body>
<h3>Clica per obrir Google i espera. La finestra
segons</h3>
<button onclick="obrir()">Obrir finestra</button>
</body>
</html>
es
tancar
passats
Executeu aquest exemple i intenteu entendre-ho. A classe ja el repassarem.

3.3.2.6 Mtodes de window per treballar amb quadres de dileg
Lobjecte window inclou tres mtodes complementaris per treballar amb tres quadres de dileg,
dos dells ja han anat sortint en alguns exemples que hem vist fins el moment. Tot i aix, els
explicarem tots tres ara formalment.
alert(missatge), mostra un quadre de dileg amb el missatge que li hem especificat, una
icona dadvertncia (triangle groc amb signe dadmiraci) i un bot Acceptar (figura 3.17). No
retorna cap valor. El missatge ha de ser un valor de tipus cadena.
Figura 3.17. Sortida dalert en Explorer
- 31 -

prompt(missatge, valorPerDefecte), ens permet fer una pregunta a lusuari i
emmagatzemar la seva resposta en una variable. Aquesta instrucci, fa que aparegui una
quadre de dileg que ens fa una pregunta i espera una resposta. Observeu la figura 3.18. El
valor que nosaltres teclegem sassignar a la variable.
Podeu veure que la sintaxi de prompt inclou dos parmetres dins dels parntesis, separats
per una coma. El primer s un string on escriurem la pregunta (Entra el teu nom), el segon s un
valor que ja sortir escrit com a resposta a la caixa de text, diguem-ne que s con un
suggeriment que li fent a lusuari, (li escrivim la resposta); per descomptat que ell, si vol, la
pot canviar per la que vulgui. Si no volem suggerir cap resposta hem descriure com a segon
parmetre una cadena buida -dues cometes seguides sense res al mig- ("").
Si lusuari clica el bot cancellar la instrucci prompt retorna un valor null. En algunes
versions antigues dInternet Explorer es retornava una cadena buida "".
Figura 3.18. Exemple de prompt en Chrome
confirm(), genera un quadre de dileg amb una pregunta i dos botons (dacord i cancellar)
que ens permeten respondre afirmativament o negativament a la pregunta. Retorna true o
false segons el bot polsat. Exemple:
<script>
var r=confirm("Voleu continuar?")
if (r==true)
{
alert("Has seleccionat SI")
}
else
{
alert("Has seleccionat No")
}
</script>
Figura 3.19 Exemple de confirm
Executeu aquest exemple i observeu el comportament segons el bot que cliqueu.

Els tres quadres de dileg sn del tipus modal, aix vol dir que, fins que la finestra no es tanqui, el
programa no continuar.
El format daquests quadres de dileg varia lleugerament entre els diferents navegadors. A ms,
per evitar confondre a lusuari, en la barra de ttol, mostren un missatge aclaridor, sobre qui est
generant el quadre de dileg: Missatge de pgina web en Explorer, o Alerta de Javascript en
Chrome, per exemple.
- 32 -

3.3.3. Lobjecte location
Cont propietats relacionades amb ladrea de la pgina que estem veiem, es a dir la que est
carregada l navegador.
T les segents propietats:
hash: Retorna la part de la URL que hi ha al darrere del coixinet # (si sha especificat). Com
ja sabeu representa el punt darribada o ancoratge dun enlla a una part especfica duna
pgina.
host: El nom del domini i el port.
hostname: Nom del domini de la pgina.
href: Adrea complerta de la pgina. Si el canviem per un altre podrem canviar de pgina.
pathname: Ruta daccs a la pgina, sense el nom de domini
port: Nmero del port pel que hem accedit a la pgina
protocol: Tipus de protocol de la connexi.
search: Si li hem passat parmetres a la pgina en el moment de cridar-la, en la forma
www.miweb.com?nom=pep&cognom=garcia. Search els cont en forma de cadena del tipus
nom=valor (s la cadena QueryString).
A continuaci podem usar la tcnica for-in per recrrer totes les propietats de lobjecte:
<script>
document.write("<h2>Propietats de location</h2>")
for (prop in window.location){
document.write(prop + " = " + window.location[prop] + "<br />")
}
</script>
Que produeix el resultat de la figura 3.20
Figura 3.20. Propietats de location
Podeu veure que, hi ha propietats que estan en blanc, aix passa perqu estem executant la pgina
directament des de larxiu, sense la intervenci de cap servidor, (fixeu-vos que el protocol s file).
El mtode search(), retorna la cadena amb els parmetres que li passem en el moment de
cridar-la, mireu la figura 3.21 i observeu que ara hem cridat la mateixa pgina dabans, per
passant-li dos valors com a parmetres i observeu tamb el resultat del mtode search().
- 33 -

Figura 3.21. Mtode location.search()
Mtodes de lobjecte location per interactuar amb una URL.

Assign(URL), Carrega una nova pgina. Crea una nova entrada en lobjecte history (que
veurem tot seguit).
Reload(forar), Recarrega la pgina. Fa el mateix que el bot de recrrega del navegador, o
la tecla F5. Per defecte, reload () torna a carregar el mtode de la memria cau, per podem
forar la recrrega de la pgina des del servidor establint el parmetre forar a true (equival a
fer Ctr+F5).
Replace(URL), Reemplaa la pgina actual per una altra. A diferncia del mtode assign no
crea una entrada en el objecte history, sin que reemplaa la actual.
A continuaci podem veure un exemple del mtode reload().
Quan es carrega, la pgina mostra la hora actual amb un alert. Fixeu-vos que quan cliquem el bot
sexecuta la funci recarregar(), que t com objectiu tornar a carregar la pgina location.reload(). Podeu
comprovar que efectivament sha recarregat perqu es torna a mostrar el alert amb la nova hora.
<!DOCTYPE html>
<html>
<head>
<!-function recarregar()
{
location.reload()
}
//-->
</script>
</head>
<body>
<!-var hora=new Date();
hora=hora.toLocaleTimeString();
alert(hora);
//-->
</script>
<input type="button" value="Reload" onclick="recarregar()" />
</body>
</html>
3.3.4 Lobjecte history

Sencarrega demmagatzemar lhistorial de visites del navegador, o sigui, una llista de les pgines
per les que hem estat navegant. Podem mourens cap al davant i cap enrere dins aquesta llista.
- 34 -

history noms t una propietat, es tracta de length() que retorna la quantitat d'adreces URL que hi ha
a la llista de l'historial.
Pel que fa als mtodes noms hi ha tres, sn els que ens permetran desplaar-nos per lhistorial.
back(), carrega la pgina immediatament anterior, s el mateix que clicar el bot anterior
del navegador o fer history.go(-1).
forward(), carrega la pgina immediatament posterior a lactual. s el mateix que clicar el
bot segent del navegador o fer history.go(1).
go(posici), carrega la URL de la llista de l'historial que ocupa la posici indicada. El
parmetre pot ser un nombre enter positiu o negatiu (positiu per pgines posteriors i
negatiu per les anteriors), tamb pot ser una cadena que representa una URL.
3.3.5 Lobjecte document.
Fa referncia al document o pgina que estem visualitzant en el navegador. Tots els elements que
formen part de la pgina (pargraf, imatges, formularis, enllaos, etc.) estan inclosos dins de
lobjecte document i per tant podem accedir a ells des del nostre codi.
Mitjanant aquest objecte podrem afegir o modificar el contingut de la nostra pgina. Potser sigui
un dels objectes ms utilitzats en la programaci en JavaScript, ja que ens dona accs a tots els
elements que conformen la pgina.
Si torneu a la figura 3.1 de la pgina 46, veureu que lobjecte document est format per una srie
de colleccions. Tots els elements dun mateix tipus que apareixen dins una pgina estan agrupats
en forma de collecci. Aix tenim que si, per exemple, a la pgina hi ha nou imatges, (creades amb
letiqueta <img>) el conjunt de totes elles formen la collecci document.images. El mateix passa amb
la resta delements de la pgina. A continuaci fem una referncia a les colleccions de la pgina:
anchors: s una collecci de tots els punts darribada dun enlla (ancores) dins la pgina.
Dit duna altra manera es tracta de tots els elements <A> de HTML que tenen definit
latribut NAME.
Embeds: tots els elements embeds de la pgina (est obsolet i desaconsellat).
forms: la collecci de tots els formularis que apareguin en el nostre document.
images: com ja hem vist, totes les imatges que apareixen a la pgina.
links: es tracta de tots els enllaos que hi ha definits a la pgina. Generalment es tracta de
tots els enllaos de tipus <A> que tenen definit latribut href:, per tamb inclou a les
etiquetes <Area> que tinguin activat latribut href: .Recordeu que letiqueta <AREA> de
HTML sutilitza amb imatges mapejades per indicar lrea o regi duna imatge associada a
un enlla: <area shape="rect" coords="0,0,80,100" href="altes.htm" />.
Totes aquestes colleccions es consideren com a un array, en el que cada element emmagatzema
una referncia al corresponent objecte de la pgina. Les referncies s'emmagatzemen en la matriu
en el mateix ordre en qu shan definit en el codi HTML.
Per tant podem accedir als seus elements de la mateixa manera en que fem amb els arrays: var
primerLink=document.liks[0]; (seria el primer link que apareix a la pgina).
Si no sabem la posici en que apareix a la pgina, tamb podem accedir a elles utilitzant el nom
que li vrem assignar en HTML en el moment de crear-les, per exemple:
var link=document.links[institut]; ens retornaria lenlla corresponent a letiqueta de HTML:
<A href=http://www.vidalibarraquer.net NAME=institut> Web de linstitut </A>
Tot i que us les he mostrat de manera allada, les colleccions de lobjecte document en realitat sn
propietats, que emmagatzemen una array dobjectes. Tot seguit veurem la resta de propietats de
document, que no sn colleccions.
- 35 -

Propietats de lobjecte document
cookie: ens retorna una cadena amb tots els parells nom/valor de les galetes del document
actual.
domain: Indica el nom del domini del servidor on est allotjat el document
lastModified: Retorna la data i l'hora de la darrera vegada que es va modificar el document
readyState: Retorna l'estat de crrega del document actual. Pot ser un dels quatre possibles
valors:
uninitialized - no s'ha iniciat encara la crrega
loading Sest carregant
interactive - Ha carregat prou i que l'usuari pot interactuar amb ell
complete - Completament carregat
referrer: Retorna l'adrea URL del document que ha carregat el document actual fent servir
un enlla.
title: El ttol de la pgina, el que hem especificat amb letiqueta <TITLE>
URL: retorna el URL de la pgina, igual que fa location.href.
Mtodes de lobjecte document
write(text): escriu text i expressions string en un document. Ja hem treballat amb ella en
molts exemples.
writeln(text): igual a lanterior per afegeix un carcter de nova lnia al final del text que
escriu.
Open(): Obre un flux de sortida que recull tot el que sescriu amb qualsevol ordre
document.write() o document.writeln().
Una vegada que shan realitzat totes les ordres descriptura, quan es dna lordre del
mtode document.close()es mostra tot el flux de sortida, reemplaant el contingut anterior
de la pgina.
Close(): dna per finalitzat el procs descriptura sobre el document que havem iniciat
amb document.open().
<script>
function provarNova() {
var m1 = "Hola Manela";
var m2 = "Un altre missatge.";
nova.document.open("text/html", "replace");
nova.document.writeln(m1)
nova.document.write(m2)
nova.document.close()
}
nova=window.open("","","toolbar=no,scrollbars=no,width=200,height=200")
provarNova()
</script>
Els parmetres de document.open indiquen: el primer text/html, s el tipus (MIMEtype) del
document en el que estem treballant. El segon replace, si s'estableix, l'entrada de history

per al nou document hereta l'entrada de history del document que ha obert aquest
document. (tots dos sn opcionals)
getElementById (id): rep una cadena que cont l'id d'un element especfic de la nostra
pgina i retorna una referncia al mateix. Com que la referncia representa lobjecte, podem
usar-la per treballar amb les seves propietats com si estigussim treballant amb lobjecte.
getElementsByName (nom), retorna una array que cont les referncies a tots els
elements de la pgina que tinguin com atribut <NAME> el nom que li hem especificat com a
parmetre. Fixeu-vos que a diferncia de lanterior propietat, aquesta retorna una array,
observeu tamb que la sintaxi diu getElements..., en plural. Aix s aix perqu en una
- 36 -

pgina web podem tenir ms dun element amb el mateix nom (<NAME>), mentre que
lidentificador id, s nic per un sols element, no es pot repetir a la pgina.
getElementsByTagName(etiqueta), mitjanant aquest mtode es crea una array de
referncies a tots els elements del mateix tipus que lespecificat com a parmetre. El
parmetre s una cadena amb letiqueta HTML que estem cercant, per sense els
delimitadors < i >, per exemple "img" en comptes de "<img>" Lndex que sassigna a cada una
de les entrades es correspon a l'ordre en qu apareixen en la pgina.
En general, per treballar amb aquests mtodes que retornen una array podem fer:
document.getElementsByTagName('element');
document.getElementsByTagName('element')[ndex_del_element];
Amb la primera lnia obtenim larray amb totes les referncies i en la segona accedim a un
lelement concret de la llista. Exemple:
document.getElementsByTagName("p");
document.getElementsByTagName("p")[3];
La primera lnia obt un array amb la referncia a tots els pargrafs que hi ha a la nostra pgina,
mentre que la segona, accedeix directament al quart pargraf (es comencen a numerar per 0).
Finalment, indicar que es poden combinar els mtodes vistos per seleccionar una llista d'elements
dins d'un element concret:
document.getElementById("unID").getElementsByTagName("li");
document.getElementsByTagName("div")[1].getElementsByTagName("p");
La primera lnia ens retornaria tots els elements <li> duna llista identificada
com a unID dins del

nostre document. La segona ens tornaria la llista dels pargrafs descendents del segon div del
document.
Tot i que anteriorment, quan veiem els temporitzadors, getElementById ja havia sortit en un exemple,
aqu podem veure un altre:
<!DOCTYPE html>
<html>
<head>
<script>
function getId(){
var d=document.getElementById("text");
alert("Elcontingut de span s: "+ d.innerHTML + "\nEl canviar per: Hola");
d.innerHTML="Hola";
}
</script>
</head>
<body>
<span id="text">Aquest s el text original</span><br />
<input type="button" onclick="getId()" value="Pulsa per canviar" />
</body>
</html>
Si us fixeu dins del body apareix un text delimitat per letiqueta <span id=text>, seguit dun
que quan el cliquem crida a la funci getId().
bot,
La funci mitjanant getElementById localitza un element que tingui un id=text (letiqueta <span>) i
ho assigna a la variable d, per tant ara d s letiqueta <span>. A continuaci, mostra un missatge
alert informant del text contingut en letiqueta <span> d.innerHTML i en la lnia segent el canvia per
Hola, fent: d.innerHTML="Hola";
Tot seguit podeu veure un exemple en el que fem servir getElementsByName(). Copieu-lo,
executeu-lo i mireu el resultat. Examineu detingudament el codi i intenteu comprendre el seu
funcionament.
- 37 -

<html>
<head>
<script>
function opcions(){
var co=document.getElementsByName("co");
alert("Total d'opcions: "+co.length+" la segona s "+co[1].value);
}
</script>
</head>
<body>
<h2>Trieu color</h2>
Vermell <input name="co" type="radio" value="vermell" />
Verd <input name="co" type="radio" value="verd" />
Groc <input name="co" type="radio" value="groc" />
Blau <input name="co" type="radio" value="blau" />
<br />
<input type="button" onclick="opcions()" value="Procesar" />
</body>
</html>
3.4 Generaci de text i elements HTML des de codi.

Com acabem de veure cada finestra del navegador est representant un document o una pgina
HTML, que en el DOM es correspon amb lobjecte document. Document est format per tots els
elements que formen la pgina, com ara imatges, pargrafs, enllaos,etc. Des de JavaScript s
possible accedir a tots aquests elements, aix com a les seves propietats per modificar-les o crearles de manera dinmica.
Fins ara, tamb hem vist que podem escriure text directament en el document fent servir el
mtode document.write(text), i que, si com a part del text incloen marques HTML, aquestes eren
interpretades correctament pel navegador i apareixien a la pgina. Aix podem mostrar
dinmicament informaci com ara:
document.write("<h3>ltima modificaci "+document.lastModified+"</h3>")
Tamb podem crear una finestra en blanc amb window.open i escriure en ella tota la informaci
que volguem fent servir el mateix mtode:
finestra=window.open("","","width=300,height=200");
finestra.document.write("<h1>Finestra 1</h1>");
A banda daquest sistema, JavaScript tamb ens ofereix una srie de mtodes per afegir elements a
lestructura d'un document. Els ms bsics sn createElement, que crea un element, i
createTextNode, que crea un node de text o dit duna altra manera: el text que contindr
lelement.
createElement
Amb aquest mtode podrem crear un element especfic. La seva sintaxi s molt senzilla:
document.createElement ("elementACrear");
Aix, per crear un nou pargraf farem document.createElement ("p") presteu atenci a les cometes i a les
majscules i minscules, en HTML no importa per en JavaScript letiqueta sha dexpressar en
minscules. Amb aquesta instrucci hem creat lelement, per encara no lhem incorporat a la
posici que li correspondr dins de la pgina, per tant encara no s visible. Tingueu pacincia, una
mica ms endavant veurem com incloure'l a la seva posici.
createTextNode
Una vegada creat lelement, podem crear un text mitjanant createTextNode amb el que poblar-lo.
La seva sintaxi s:
document.createTextNode ("text");
El text a crear mitjanant aquest mtode tamb ha d'anar entre cometes. Igual que passava al
mtode anterior, fins que no ubiquem lelement el text no ser visible.
- 38 -

Si volgussim, per exemple, crear un nou pargraf en un document amb el text Hola Manola,
haurem de crear un element p, desprs el node de text, a continuaci convertir el node de text en el
fill del pargraf mitjanant appendChild, que veurem tot seguit. Quedaria una cosa aix:
var paragraf = document.createElement ("p");
var text = document.createTextNode ("He afegit un nou pargraf");
paragraf.appendChild (text);
Amb aix la nostra variable paragraf contindria un element <p> amb el seu text corresponent, a punt
per ser incls en l'arbre del document (encara no s visible).

appendChild
Acabem de veure com crear elements i nodes de text, per tamb hem vist que aquests nodes
creats no es mostraran en el document fins que no els incloguem en al mateix. Per dur a terme
aquest incorporaci comptem amb diferents mtodes un dells s appendChild. La seva sintaxi s:
elementPare.appendChild (nouNode);
El nou node s'inclou immediatament desprs dels fills ja existents (si hi ha algun).
Per exemple, el segent codi incorpora a la pgina el pargraf que havem creat i dna per
finalitzat lexemple que fins ara anvem seguint:
<html>
<head>
<script>
function afegirP(){
var paragraf = document.createElement("p");
var text = document.createTextNode("He afegit un nou pargraf");
paragraf.appendChild(text);
document.body.appendChild(paragraf);
}
</script>
</head>
<body id="cos">
<h2>Benvinguts</h2>
<br />
<input type="button" onclick="afegirP()" value="afegir pargraf" />
</body>
</html>
Com hem vist, primer creem el pargraf document.createElement ("p"), desprs el text que
contindr document.createTextNode("He afegit un nou pargraf") . A continuaci fem servir dues
vegades appendChild, una per inserir el node de text dins de lelement p, i una altra per incloure el
pargraf directament dins el body del document document.body.appendChild(paragraf);. Si us en
recordeu, la forma de indicar el contenidor era: elementPare.appendChild(nouNode); fixeu-vos
que com a elementPare, he fet servir el resultat de document.body es a dir, el body de la pgina.
insertBefore
Bsicament fa el mateix que el mtode anterior, per insertBefore ens permet triar un node
(element) del document i incloure el que volem afegir per davant que ell. La seva sintaxi s:
elementPare.insertBefore (nouNode, nodeDeReferencia);
Si tingussim un fragment d'un document com aquest:

<div id="pare">
<p> Un pargraf. </ p>
<p> Un altre pargraf. </ p>
</ div>
i volgussim afegir un nou pargraf abans del segon, ho farem aix:

<html>
<head>
<script>
function afegirP(){
- 39 -

//Creem el nou pargraf amb el text corresponent
var nouP = document.createElement("p");
var text=document.createTextNode("Nou pargraf.");
nouP.style.color="red";//assignem color
nouP.appendChild(text);
//Cerquem i recollim en una variable el segon pargraf
var segonP = document.getElementById("pare").getElementsByTagName("p")[1];
//I ara el inserim
document.getElementById("pare").insertBefore(nouP, segonP);
}
</script>
</head>
<body>
<div id="pare" style="background-color: yellow">
<p>Un pargraf.</p>
<p>Un altre pargraf.</p>
</div>
<input type="button" onclick="afegirP()" value="afegir pargraf" />
</body>
</html>
Quan sexecuta la funci creem un nou pargraf igual que havem fet a lapartat anterior, i li
assignem el text Nou pargraf. Una vegada que lelement est creat, ja podem accedir a les seves
propietats, tot i que encara no sigui visible, a lexemple li he dit que la lletra sigui vermella
(nouP.style.color="red";). Abans dinserir el nou pargraf a la pgina, necessitem una referncia al
element que volem fer servir com a referncia per inserir davant seu el nou pargraf (el segon
pargraf) segonP = document.getElementById("pare").getElementsByTagName("p")[1];
A continuaci inserim el nou pargraf (nouP) al davant del segon pargraf (segonP) que aparegui
dins del div pare document.getElementById("pare").insertBefore(nouP, segonP);
Tot seguit podeu veure un altre exemple en el que cada vegada que cliquem un bot afegim una
caixa de text input a un formulari. Tamb tenim un bot que informa de quants inputs tenim creats i
com podem accedir a ells. Copieu-lo, executeu-lo i mireu el resultat. Examineu detingudament el codi
i intenteu comprendre el seu funcionament.
<html>
<head>
<script type="text/javascript"><!-// crear entrades input davant del bot Submit
function afegir() {
var nouInput = document.createElement("input");
nouInput.setAttribute("type", "text");
nouInput.setAttribute("name", "num[]");
nouInput.style.display = 'block';// estil css --> display:block;
//hem creat: <input type="text" name="num[]"style="display:block" />
var referencia = document.getElementById('submit');
var pare = referencia.parentNode; //El pare de submit (de refer), o sigui form
// Afegeix l'input davant del bot submit amb insertBefore
pare.insertBefore(nouInput, referencia);
}
function quants(){
alert("Total de caixes; "+document.forms[0].elements['nume[]'].length +
"\nla primera cont " +document.forms[0].elements['nume[]'][0].value)
}
--></script>
</head>
<body>
<form action="">
<input type="text" name="num[]" /> //El name ser num[0]
<input type="submit" value="Submit" id="submit" /><br /><br />
<input type="button" value="Afegir caixa" onclick="afegir()" />
<input type="button" value="Quants porten?" onclick="quants()" />
- 40 -

</form>
</body>
</html>
Els mtodes que hem vist aqu no funcionen en versions anteriors a Internet Explorer 9.
Una altra forma de fer createTextNode
Com hem vist createTextNode, genera el text que inserirem en lelement que estem creant. A
vegades aquest text tamb pot incloure altres etiquetes que li donen format, per exemple,
imagineu que volem crear un pargraf com ara el segent:
<p>Aquest pargraf t <em>formats</em> i ms <strong> formats</strong>. </p>
Des del punt de vista del DOM tenim un node pare (p), que cont:
Un primer fill que s un node de text (Aquest pargraf t).

Un segon fill que s em, que dins seu t un fill (formats).
Un tercer fill que s un altre node de text (i ms).
Un quart fill, strong, amb el seu propi fill (formats).
Un cinqu fill, tamb un node de text, el punt final ( . ).
Crear-lo amb els dos mtodes vistos requeriria un codi bastant complicat,com ara aquest:
var elem_p = document.createElement('p');
var elem_em = document.createElement('em');
var elem_strong = document.createElement('strong');
var txt_01 = document.createTextNode(' Aquest pargraf t ');
var txt_02 = document.createTextNode('formats');
var txt_03 = document.createTextNode(' i ms ');
var txt_04 = document.createTextNode('formats');
var txt_05 = document.createTextNode('.');
elem_em.appendChild(txt_02);
elem_strong.appendChild(txt_04);
elem_p.appendChild(txt_01);
elem_p.appendChild(elem_em);
elem_p.appendChild(elem_strong);
document.body.appendChild(elem_p);//Afegim el pargraf al body
Com podeu veure s una feina bastant tediosa, tot i que aquesta s la manera correcta de crear-lo.
Per podem fer servir un altre mtode, que consisteix en usar el mtode innerHTML, quedaria:
var nouP=document.createElement('p');
nouP.innerHTML ='Aquest pargraf t
</strong>.'
<em>formats</em>
ms
<strong>formats
Atenci: La propietat innerHTML no est reconeguda per cap especificaci del W3C, encara que
es podria considerar com un estndard de consens, ja que tots els navegadors actuals el suporten.
3.5 Aplicacions prctiques dels marcs
Els marcs o frames permeten partir la pantalla del nostre navegador en dos o ms parts, de
manera que podem mostrar una pgina (un document) diferent en cada una delles
simultniament. Per comenar podem fer un petit reps a com es crea una pgina amb marcs,
observeu lexemple:
<!DOCTYPE html>
<html>
<head>
<title>Marcs</title>
</head>
<frameset cols="50%,*" border=1>
<frame name="esquerre" src="pag1.html" />
<frame name="dreta" src="pag2.htm " />
</frameset>
</html>
- 41 -

Amb aquest petit exemple em partit la pantalla en dos marcs verticals, a un lhem anomenat
esquerre i a laltre dreta. A ms hem especificat que al marc esquerre sha de carregar la pgina
pag1.html i al dret la pgina pag2.html.
Hem de dir que cada marc t la seva prpia finestra window i el seu propi document, aix el
nostre exemple est format per un objecte window principal, que cont dos objectes window ms,
un per cada marc.
En el DOM, els marcs formen una collecci frames que depn directament de lobjecte window
principal, els elements daquesta collecci sordenen segons shan creat en la pgina, el primer s
frames[0], el segon frames[1].... Cada frame pot estar a la vegada dividit en altres frames, amb la qual
cosa lobjecte window que correspon al frame tindr una altra collecci frames que representa
els seus propis marcs.
Un frame sempre estar contingut en una finestra principal o en un altre frame; la finestra o el
marc que cont un frame s el marc pare del frame.
Tots els frames tenen la propietat parent per fer referncia a lelement que els cont. Tamb
tenen la propietat top que en aquest cas fa referncia a la finestra superior, lobjecte window
principal a partir del qual sha generat tota lestructura de frames (recordeu que podem tenir
varis nivelles). Amb aquestes propietats podrem fer referncia a un marc des duna altre.
A continuaci tenim una mostra de com podem accedir a les propietats dun marc des dun altre:
Partim de lexemple anterior que dividia la pgina en dos frames verticals. Si mireu el codi de la
pagina, podeu comprovar que necessitem crear dues pgines ms, una anomenada pag1.html que
s la que mostrarem en el frame esquerre i una altra pag2.html que mostrarem en el frame de la
dreta.
El codi de pag1.html s el segent:
<html>
<head>
<title>Esquerra</title>
</head>
<body>
<form name="f1">
<h2>Canviar color de fons</h2>
<select id="colorF">
<option value="blue">Blau</option>
<option value="red">Vermell</option>
<option value="yellow">Groc</option>
<option value="chartreuse">Chartreuse</option>
</select>
<h2>A quin marc?</h2>
<select id="marc">
<option value="esquerre">Esquerra</option>
<option value="dreta">Dreta</option>
</select>
</form>
</body>
</html>
Fixeu-vos que s una pgina HTML que no inclou JavaScript, mostra dues llistes de selecci
<select> que ens permeten triar un color i un dels marcs al que assignar-li lesmentat color.
Pel que fa a pag2.html, que mostrarem en el frame dret:
<html>
<head>
<title>Dreta</title>
function canviar(){
var co = parent.frames[0].document.getElementById("colorF");
var nouColor = co.options[co.selectedIndex].value;
- 42 -

var fram=parent.frames[0].document.getElementById("marc").selectedIndex;
parent.frames[fram].document.bgColor=nouColor;
}
</script>
</head>
<body>
<input type="button" value="Canviar" onclick="canviar()" />
</body>
</html>
Tenim un bot que crida a la funci canviar() quan el cliquem. La funci, fent
servir les propietats

que us acabo dexplicar, esbrina el color seleccionat en el primer <select> i el frame seleccionat en
el segon <select> i canvia el color de fons segons aquestes seleccions.
Fixeu-vos que la funci sest executant en un frame (el dret) i accedeix a les propietats de laltre
frame.
Examineu el codi i intenteu comprendre el seu funcionament, si no ho enteneu no patiu, a classe

ho explicar detingudament.
Un altre exemple prctic. Imagineu que tenim una pgina publicada en Internet i no volem que
altres llocs lincloguin com un frame a dins seu, ho podem evitar amb un poc de JavaScript:
<body onload=" if(top.location!=this.location) top.location=this.location;">
Hem programat lesdeveniment onload de body, o sigui cada vegada que es carregui la pgina
sexecutar el codi.
Bsicament s fa una pregunta: if(top.location!=this.location), la URL de la pgina principal (top.location)
s diferent de la URL daquesta pgina (this.location)? Si la resposta s vertadera, significa que estan
intentant inclourem en un frame i ho impedeixo top.location=this.location.
Lobjecte this, representa al propi frame des del que estem donant lordre. En comptes de this,
tamb podrem haver fet servir self, que s una propietat de lobjecte window i fa referncia a la
prpia finestra. Recordeu que cada frame en realitat s un objecte window, per tant, tcnicament
self es referix al frame en el que est contingut. Lodre podria haver estat:
<body
onload="
if(top.location!=self.location)
top.location=self.location;">
Si voleu provar el funcionament, noms haureu de modificar el body de pag1.html o de

pag2.html de lexemple anterior i tornar a provar-ho, veureu que ara no es deixa incloure en un
frame i que agafa tota la pantalla superior (top) per ell.
3.6 Creaci de noves finestres
<!DOCTYPE html>
<html>
<head>
<script>
var finestra;
function obrir(){
}
function tancar(){
if(finestra)
finestra.close();
}
function estat(){
if (!finestra){
alert ("La finestra no ha estat mai oberta")}
else{
if (finestra.closed){
- 43 -

alert("La finestra ja ha est tancada");}
else
{alert("La finestra est oberta")
}
}
}
</script>
</head>
<body>
<input type="button" value="Obrir finestra" onclick="obrir()" />
<input type="button" value="Tancar finestra" onclick="tancar()" />
<input type="button" value="Estat de la finestra" onclick="estat()" />
</body>
</html>
En aquest programa hem donat entrada per primera vegada a un concepte nou, al que dedicarem
tot un apartat per ell sols ms endavant. Es tracta del concepte de funci definida per lusuari.
Una funci s una porci de codi que escriurem generalment en la secci <HEAD> de la pgina, la
identifiquem amb la paraula clau function seguida dun nom pel que la volem identificar, uns
parntesis i finalment el codi que la conforma, delimitat per claus { i }:
function salutacio()
{
Alert("Hola com estas?");
}
Aquest codi no sexecuta immediatament, sin que resta a lespera de ser cridat perqu sexecuti.
Lavantatge s que el podem cridar/executar tantes vegades com necessitem des de una mateixa
pgina, de manera directa des del nostre codi, o com a resposta a una acci de lusuari, tal com
hem fet a lexemple:
<input type="button" value="Obrir finestra Vidal" onclick="obrir()">.
Com veieu, he creat un bot i l estic dient que quan el polsin (onclick) busqui una funci que es
diu obrir() i que lexecuti.
Anlisis del codi:
Primer de tot, fixeu-vos que he declarat una variable finestra al comenament del codi, fora de
qualsevol funci i de qualsevol estructura de codi. Es tracta duna variable global que mantindr
el seu valor durant tota lexecuci de la pgina (veieu lapartat 2.1.3).
A continuaci hem creat 3 funcions, que com hem dit resten a lespera de ser cridades per entrar
en escena.
Finalment dins la secci BODY de HTML, hem creat 3 botons, cadascun dells cridar a la funci
corresponent cada vegada que el cliquem.
La funci obrir()
function obrir(){
}
La primera instrucci window.open s la que sencarrega dobrir una finestra nova, fixeu-vos que
el resultat lassignem a la variable finestra, el que fa aquesta assignaci s desar una referncia
de la nova finestra a la variable/objecte finestra. Podem dir que finestra representa la finestra
que acabem de crear.
Qu fa la lnia finestra.document.write("<h1>Finestra 2</h1>");?
Ja hem vist que la instrucci document.write(), escriu en el document actual, amb aquesta instrucci
per, li diem
finestra.document.write("<h1>Finestra 2</h1>"). Li estem dient que la instrucci
document.write sha de realitzar sobre lobjecte finestra, que s la que acabem de crear i lhem
associat al noma finestra.
- 44 -

La funci tancar()
function tancar(){
if(finestra)
finestra.close();
}
Aquesta funci s mol senzilla, primer de tot mirem si finestra t valor, if(finestra) si encara no sha
obert la finestra aquesta variable est declarada per encara no se li ha assignat res per tant cont
el valor undefined i la instrucci if retorna false. En cas contrari la variable cont un objecte window,
que representa la finestra que acabem dobrir i la instrucci if retorna true, que vol dir que la
finestra existeix, amb la qual cosa la tanquem amb finestra,close().
La funci estat()
function estat(){
if (!finestra){
alert ("La finestra no ha estat mai oberta")}
else{
if (finestra.closed){
alert("La finestra ja ha est tancada");}
else
{alert("La finestra est oberta")
}
}
Finalment, aquesta funci treballa de manera similar a lanterior, si la finestra no existeix

if(!finestra) mostrem un missatge dient que no sha creat mai (fixeu-vos en la utilitzaci de
loperador NOT (!). En cas contrari, ens preguntem (amb la propietat closed) si est tancada o no,
mostrant el missatge adient segons la condici sigui vertadera o falsa.
Manejament desdeveniments
Tot i que encara no toca, i que els veurem ms detingudament en un altre apartat, en aquest codi
han aparegut per primera vegada els esdeveniments. Fixeu-vos a la lnia:
<input type="button" value="Obrir finestra" onclick="obrir()" />
Daquesta manera li estem diem que mostri un bot amb el rtol Obrir finestra, aix no t cap
dificultat ja que s HTML, normal i corrent, la novetat est en la part marcada en negreta. Li estem
dient que controli lesdeveniment onclik del bot i que quan es produeixi que executi la funci
obrir(). Ms endavant ja tractarem ms detingudament els esdeveniments i veurem que hi ha
gran varietat dells segons lobjecte al que saplica (botons, imatges, enllaos, caixes de text...).
La sintaxis del mtode window.open()
Abans dacabar el comentari de lexemple voldria aprofitar per explicar la sintaxis de
window.open(), t la forma segent:
window.open(URL,nom,opcions,reemplaar).
URL, s una cadena on sespecifica l'adrea URL de la pgina que es mostrar en la finestra que
acabem de crear. Si no s'especifica una URL (si es passa una cadena buida "" ), la nova finestra
mostra about: blank.
nom, s una cadena que especifica el nom que li volem posar a la finestra, es pot ometre passant
una cadena buida "".
Opcions, Una cadena que cont una llista delements separada per comes que indica el
comportament o laparena que tindr la nova finestra. Podem especificar les segents opcions:
Modificador
Descripci
directories=yes|no|1|0
Si volem o no botons de vincles. Per defecte s s.

Noms en Explorer
fullscreen=yes|no|1|0
Si volem que es mostri el navegador en mode de

pantalla completa. Per defecte s no. Una finestra
- 45 -

en mode de pantalla completa tamb ha d'estar en
channelmode. Noms en Explorer
width=pixels
L'amplada de la finestra. Valor mnim 100
height=pixels
L'alada de la finestra. Valor mnim s 100
left=pixels
Els pixels que separen la posici esquerra de la

finestra respecte a la part esquerra de la pantalla.
Noms Explorer, en Firefox haurem de fer servir
screenX
top=pixels
Els pixels que separen la posici superior de la

finestra respecte a la part superior de la pantalla.
Noms Explorer, en Firefox haurem de fer servir
screenY
location=yes|no|1|0
Si mostra el camp de direcci. Per defecte s s
menubar=yes|no|1|0
Si mostra la barra de mens. Per defecte s s
resizable=yes|no|1|0
Si la finestra ser redimensionable o no. Per

defecte s s.
scrollbars=yes|no|1|0
Si mostrar o no les barres de desplaament. Per

defecte s s
status=yes|no|1|0
Si mostra o no la barra de estat. Per defecte s s
titlebar=yes|no|1|0
Si mostra o no la barra de ttol. Per defecte s s
toolbar=yes|no|1|0
Si mostrar o no la barra d'eines del navegador. Per

defecte s s
A la taula anterior yes o 1 vol dir que volem activar el modificador mentre que no o 0 indica
que no el volem.
Atenci: Els navegadors moderns tenen la tendncia al minimalisme, treballant amb pestanyes i
procurant deixar el mxim despai per visualitzar la pgina. Per aconseguir-ho oculten la majoria
delements dels que hem parlat aqu (menubar, directories, toolbar, status...). Quan nosaltres
obrim una finestra des de codi, malgrat que li diguem que mostri qualsevol daquests elements, si
el navegador est configurat per no mostrar-los la nova finestra no els mostrar.
Per tant, si voleu provar aquestes opcions haure dactivar prviament la visualitzaci daquests
elements al vostre navegador. Veiem el segent exemple:
finestra=window.open("","","width=300, height=200, menubar=1, toolbar=1,
directories=1, location=1, status=1, resizable=1");
El meu navegador Internet Explorer 9, per defecte noms mostra location (el lloc on escrivim
ladrea a la que volem navegar), tot i que jo li estic demanant que la finestra nova mostri tots els
elements, fixeu-vos que passa (figura 3.22).
Figura 3.22. Obrir finestra en Explorer
- 46 -

Lnic que ha aparegut ha estat status. A continuaci activarem la visualitzaci de tots els
elements per defecte a Explorer, i a la nova finestra triarem que alguns elements es vegin i daltres
no, canvieu el codi.
finestra=window.open("","","width=300, height=200, menubar=1, toolbar=1,
directories=1, location=0, status=0, resizable=1");
Tornem a provar el programa amb la qual cosa obtenim el resultat de la figura 3.23.
Figura 3.23. Treballant amb window.open
Fixeu-vos en la finestra de sota, com tenim visibles tots els elements (mens, barra destat,
location,...), quan cliquem el bot sobre la finestra2, on podeu veure que tamb t visibles tots els
elements tret de location i status, que els hem marcat amb un 0 en la instrucci window.open.
3.7 Comunicaci entre finestres

Al punt anterior hem vist com obrir i tancar finestres des del nostre codi JavaScript, la finestra des
de la que obrim una altra s la finestra pare o finestra principal, mentre que la que acabem dobrir
s la finestra secundaria o filla. Una finestra principal pot tancar les finestres secundries que han
estat creades per ella, per per motius de seguretat una finestra filla no pot tancar la seva finestra
pare.
Per tant, per a la comunicaci entre finestres, hi ha d'haver una finestra pare que cridi a una
finestra filla, desprs des de la finestra filla podem manipular o enviar valors a les propietats de la
finestra pare.
Ja hem vist que les noves finestres es creen amb el mtode open() de window. Que en el moment
de crear-les retornen una referncia que desem en una variable. Posteriorment mitjanant
aquesta variable podem establir una comunicaci i interacci entre la finestra pare i la filla.
Al punt anterior ja heu vist exemples en els que hem fet servir aquesta tcnica.
La pregunta ara s: com podem accedir des de la finestra filla als elements de la finestra principal?
Des duna finestra secundria farem referncia a la seva finestra pare amb la propietat
window.opener, observeu lexemple:
<html>
<head>
<script>
function crearFinestra(){
nova=window.open('','','width=200,height=200');
- 47 -

nova.document.write("<p>Finestra nova</p>");
nova.document.write('<input type="button" value="pulsame" onclick='+
"\"opener.document.f1.nom.value='hola';\" />")
nova.focus();
}
</script>
</head>
<body>
<form name="f1">
<input type="text" size="50" name="nom">
<input type="button" value="Obrir finestra" onclick="crearFinestra()" />
</form>
</body>
</html>
Hem creat una finestra i hem desat una referncia a ella en la variable nova, posteriorment la fem
servir per afegir contingut a la finestra que acabem de crear, Un cas especial s la lnia:
nova.document.write('<input type="button" value="pulsame" onclick='+
"\"opener.document.f1.nom.value='hola';\" />")
Mitjanant document.write, est generant en la finestra nova el segent codi:

<input type="button" value="pulsame" onclick= "opener.document.f1.nom.value='hola';">
s a dir, un bot que quan el polsem (onclick), escriu hola dins la caixa de text nom que pertany
al formulari f1, del document de la finestra pare: opener.document.f1.nom.value='hola' fixeu-vos que lhe
interpretat al revs comenant pel final, de vegades aquesta sintaxi per treballar amb objectes
sentn millor daquesta manera.
3.8 Galetes (cookies)
Les galetes sn una petita pea d'informaci enviada per un lloc web, sn emmagatzemades al
navegador de l'usuari, d'aquesta manera el lloc web pot consultar aquesta informaci per
controlar l'activitat prvia de l'usuari.
Per exemple, podem portar el control d'usuaris: Quan un usuari introdueix el seu nom d'usuari i
contrasenya, aquestes es poden emmagatzemar en una cookie perqu no lhagi de tornar a
introduir en cada pgina del servidor. No obstant aix, la galeta no identifica una persona, sin a
una combinaci ordinador-navegador-usuari.
Originalment, noms podien ser emmagatzemades per petici des del servidor, per Netscape va
donar al llenguatge Javascript la capacitat d'introduir-les directament des del client. Les galetes
poden ser esborrades, acceptades o bloquejades segons es desitgi, per fer-ho, noms sha de
configurar convenientment el navegador web.
3.8.1 Estructura duna galeta
Es pot emmagatzemar gran varietat d'informaci fent servir galetes. Aquesta informaci s una
cadena de text en la forma variable = valor. Heu de tenir en compte que totes aquestes variables van
en una sola cadena de no ms de 4KB i que podem tenir ms duna parella variable=valor
separant-les de la segent per un punt i coma (;).
La informaci mnima obligatria que ha de tenir una cookie ha de ser una parella variable/valor,
formada per un nom de variable i el valor corresponent que volem assignar, aquest valor no pot
contenir els carcters punt, espai en blanc ni punt i coma. Si no tenim ms remei que fer servir un
daquests carcters abans els haurem de codificar. Entre els mtodes que podem utilitzar tenim
encodeURIComponent() per codificar i decodeURIComponent() per descodificar. Tamb ho podem fer amb
escape() i unescape().
Aquestes funcions reemplacem els carcters especials pel seu valor UNICODE en la forma
%ValorHex, per exemple:
- 48 -

<script>
var valor="JavaScript s fcil";
var codif=encodeURIComponent(valor);
var restaurat=decodeURIComponent(codif);
document.write ("Codificat:<b> "+ codif+"</b><br />");
document.write ("Decodificat:<b> "+ restaurat+"</b>");
</script>
Que produeix la sortida de la figura 3.24:
Figura 3.24. Funci encodeURIComponent
Quan acabem despecificar les parelles variable=valor podem especificar una srie de camps
opcionals que afectaran al comportament de la galeta:
max-age, per defecte totes les galetes tenen una vida til igual a la sessi del navegador, s
a dir, quan tanquem el navegador la galeta desapareix. Lopci max-age pot alterar aquest
comportament per defecte i fer que sigui vlida durant ms o menys temps. Per especificar
el temps de vida simplement li hem de donar a la variable max-age el nombre de segons
desitjat. Per exemple, si volem que la galeta sigui vlida per 30 dies posarem:
"idioma=cat; max-age=2592000
expires, fa el mateix que lanterior, per indicant la data de caducitat de la galeta, aquesta
data ha destar expressada en format GMT, per tant podem fer servir el mtode toGMString de
lobjecte Date. Atenci: Aquest sistema est obsolet i desaconsellat, es mant per
compatibilitat, es recomana fer servir max-age.
Exemple imagineu que volem enviar una galeta amb el valor idioma=catal i que caduqui
en 30 dies, la cadena que formar la cookie la generem de la segent forma (encara no lhem
enviat):
var galeta
var avui=new Date();
avui.setDate(avui.getDate() + 30);//li sumen 30 dies a avui
galeta="idioma="+escape("catal") + "; expires="+avui.toUTCString();
alert (galeta)
Figura 3.25 Expires duna galeta
path, Tota galeta, per defecte, noms s vlida per les pgines de la carpeta de la pgina
actual i inferiors. s a dir, si la pgina http://domini.com/seccio-1/article4.html envia una galeta,
aquesta ser vlida tamb per a totes les pgines sota http://domini.com/seccio-1/ i per pgines
inferiors com per exemple http://domini.com/seccio-1/categoria-3/article8.html per no per
http://domini.com o http://domini.com/seccio-2.
- 49 -

A travs de la variable path es pot alterar aquest valor per defecte. Per exemple si volem
que la galeta sigui vlida per tot el nostre lloc li donarem el valor "/" a la variable path, o si
volem que sigui vlida per a una determinada carpeta li donarem el valor "/carpeta".
domain, indica a quin servidor li haurem denviar la cookie quan es recarregui la pgina. De
fet amb aquesta variable estem especificant els subdominis per als quals la galeta s vlida,
fixeu-vos que he dit subdominis.
Si el nostre lloc s midomini.com, el navegador no acceptar cookies per altres dominis
com ara altredomini.com o google.com. El que fem amb la variable domain s dir-li al
navegador si la galeta s vlida noms per al domini principal (domain =
www.midomini.com), per al domini principal i per als subdominis (domain =
midomini.com) o per a un subdomini concret (domain = subdomini.midomini.com).
secure, lhaurem despecificar si volem que la galeta sigui enviada noms si l'usuari est
visitant la nostra web a travs d'una connexi segura (https). s lnic camp que no porta
valor associat, es representa a si mateix. Si no lespecifiquem, la cookie senvia tant si la
connexi s segura com si no. Exemple:
galeta="idioma="+escape("catal") + "; expires="+avui.toUTCString()+";secure";
document.write (galeta)
Produeix la sortida:
idioma=catal%E0; expires=Sun, 07 Oct 2012 16:48:24 GMT;secure
Totes aquestes opcions que acabem de veure sn noms reservats que tenen un significat per la
cookie, per tant no els podem fer servir com a nom en una parella nom=valor.
3.8.2 Com enviar una galeta en JavaScript
Enviar una galeta s bastant simple, noms necessitem assignar-li a la propietat document.cookie el
valor duna cadena de text amb lestructura correcta duna galeta, es a dir, que contingui les
variables de la nostra galeta i els modificadors que creiem convenients:
var galeta
document.cookie=galeta;
Si volem afegir altres galetes a la mateixa pgina, amb informaci diferent (dades, caducitat...),
noms haurem de repetir el procs: generar la nova galeta i assignar-la a document.cookie. :
Document.cookie=novaGaleta;
Amb qualsevol altra propietat o variable, al assignar-li un valor esborra el contingut anterior i el
substitueix pel nou. Per la propietat cookie t un comportament especial, quan es troba una
assignaci no esborra el contingut anterior, sin que el nou lincorpora a una collecci que
contindr totes les galetes de la pgina (atenci no existeix cap collecci cookies en plural-).
3.8.3 Com llegir una galeta
En aquest punt ja hem enviat una galeta, per no ens servir de res si no la podem recuperar quan
l'usuari torni a visitar la nostra pgina.
Per llegir una galeta, el primer ser comprovar si la galeta existeix, o sigui, si l'hem enviada i
roman guardada en el navegador.
if (document.cookie.length != 0)
La propietat length ens retorna el nombre de galetes que tenim, per tant, si sacompleix la
condici existeixen galetes.
- 50 -

Un cop obtinguda la llegirem com el que s, una cadena de text. Fixeu-vos en lexemple, i en la
sortida que produeix (figura 3.26).
<script>
var galeta
galeta="nom=pepe;expires="+avui.toUTCString();
alert(document.cookie);
</script>
Figura 3.26 Collecci de galetes
Hem creat dues galetes idioma=catal i nom=pepe, cadascuna delles amb la seva corresponen data de
caducitat. Amb la instrucci alert li diem que ens mostri el contingut de les galetes i fixeu-vos que
ha mostrat: idioma=catal%E0;nom=pepe, est mostrant el conjunt de parelles nom=valor, la resta de la
informaci de la galeta (en el nostre cas la data de caducitat) tamb la t controlada el navegador,
per no la mostra en cap cas.
Mireu tamb que catal surt codificat catal%E0, aix passa perqu quan vrem crear la galeta
vam utilitzar lordre escape("catal"). Aquests casos shan de tenir en compte quan recuperem el
valor de la galeta, per recuperar el valor original, fent unescape(valorRecuperat).
Per localitzar la galeta que ens interessa haurem de fer una mica de programaci:
var inici,fi,valor;
var galeta="idioma=" //volem llegir la galeta idioma
var dc = document.cookie; // Recuperem la cadena amb totes les galetes
if (dc.length > 0)//Si la cadena no est buida, hi ha galetes
{
inici = dc.indexOf(galeta); //cerquem la galeta a la cadena
if (inici != -1)
{
//l'hem trobada
inici += galeta.length;
fi = dc.indexOf(";", inici);
if (fi == -1) fi = dc.length;
valor= unescape(dc.substring(inici, fi));
alert(valor);
}
else
{
alert("no trobada");
}
}
Aquest codi est lligat a que prviament, shagin generat les galetes idioma i nom, com hem fet a
lexemple anterior.
Podeu estudiar el codi i mirar dentendre-ho, si no lenteneu no patiu, a classe ho explicar
detingudament. Canvieu la segona lnia var galeta="idioma=" per var galeta="nom=", Observeu el
resultat.
- 51 -

3.8.4 Modificar una galeta
Per modificar una galeta noms cal tornar a crear-la amb els valors nous. Cada vegada que donem
lordre per crear una galeta, el navegador abans de crear-la comprova si ja existeix prviament
una amb el mateix nom, si s aix entn que volem modificar els valors. Si no existeix la crea.
3.8.5 Esborrar una galeta
Noms cal modificar la galeta, assignant-li una data de caducitat ja passada, (o el moment actual)
el navegador detectar automticament que la galeta ha caducat i leliminar de la collecci.
Podem fer:
document.cookie = "nom=joan;expires=+new.Date();
Recordeu que new.Date, retorna la data i la hora (hora:minuts:segon:milisegons) actuals, per tant
la galeta nom caducar un milisegon desprs dexecutar-se lordre.
Una altra forma en que ho podrem haver fet s amb lopci max-age:
document.cookie = "nom=joan;max-age=0;
Li estem dient que el temps de vida de la galeta nom s de 0 segons, es a dir: ja ha caducat.
- 52 -

Javascript Tutorial

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript Tutorial

Uploaded by

Copyright:

Available Formats

M6-DESENVOLUPAMENT WEB EN ENTORN CLIENT

UF1 Sintaxi del llenguatge. Objectes predefinits del llenguatge.

3. Identificaci i aplicaci dels objectes predefinits del llenguatge

M6-DESENVOLUPAMENT WEB EN ENTORN CLIENT

Que al nostre exemple en concret podria ser:

M6-DESENVOLUPAMENT WEB EN ENTORN CLIENT

Figura 3.1 Model dobjectes

M6-DESENVOLUPAMENT WEB EN ENTORN CLIENT

Figura 3.2 Lobjecte boolean

3.1.2.2. Lobjecte Date.

Date() // es crea amb la data i hora actual del sistema

M6-DESENVOLUPAMENT WEB EN ENTORN CLIENT

Genera la sortida de la figura 3.3

Figura 3.3. Sortida de Date

Retorna el dia del mes, un nmero de l1 al 31

Retorna el dia de la setmana, un nmero entre 0 i 6 (0

Retorna lany (en quatre dgits)

Retorna la hora del dia (de 0 a 23)

Retorna els millisegons (de 0 a 999)

Retorna els minuts (de 0 a 59)

Retorna el mes (de 0 a 11)

Retorna els segons (de 0 a 59)

Retorna el nmero de millisegons transcorreguts des de la

getTimezoneOffset() Retorna la diferncia entre la hora UTC i la hora local, en

M6-DESENVOLUPAMENT WEB EN ENTORN CLIENT

Retorna el dia del mes que correspon a la hora universal (de

Retorna el dia de la setmana que correspon a la hora

Retorna lany dacord a lhora universal, en format de 4

Retorna la hora segons UTC (de 0 a 23)

getUTCMilliseconds() Retorna els millisegons de lhora UTC (de 0 a 999)

Retorna els minuts de lhora UTC (de 0 a 59)

Retorna el mes dacord amb UTC (de 0 a 11)

Retorna els segons de lhora UTC (de 0 a 59)

Desaprovat. Retorna lany en dos dgits. Per dates a partir de

A continuaci veurem un exemple que inclou la majoria daquests mtodes

M6-DESENVOLUPAMENT WEB EN ENTORN CLIENT

Figura 3.4. Mtodes de Date

M6-DESENVOLUPAMENT WEB EN ENTORN CLIENT

El resultat daquests codi s el que apareix a la figura 3.5

Figura 3.5. Funcionament de getTimezone()

MTODES PER AJUSTAR EL VALOR DUN OBJECTE DATE

M6-DESENVOLUPAMENT WEB EN ENTORN CLIENT

Estableix el dia del mes d'un objecte Date

Estableix l'any (quatre dgits) d'un objecte Date

Estableix l'hora d'un objecte Date

Estableix els millisegons d'un objecte de data

Estableix els minuts d'un objecte Date

Estableix el mes d'un objecte Date

Estableix els segons d'un objecte Date

Estableix la data i hora resultant de sumar o restar un

Estableix l'any del objecte Date d'acord amb l'hora universal

setUTCMilliseconds() Estableix els milisegons d'un objecte de data, d'acord amb

Estableix els minuts d'un objecte Date d'acord amb l'hora

Estableix el mes d'un objecte Date d'acord amb l'hora

Estableix els segons d'un objecte de data, d'acord amb l'hora

Desaprovat. Utilitzeu el mtode setFullYear () en el seu lloc.

M6-DESENVOLUPAMENT WEB EN ENTORN CLIENT

Figura 3.7 Assignant dates

Analitza una cadena que representa una data i a partir de

Converteix la data d'un objecte Date en una cadena llegible

Obsolet i desaprovat. Utilitzeu el mtode toUTCString () en el

toLocaleDateString() Retorna la part de la data d'un objecte Date com una

Converteix un objecte Date en una cadena, utilitzant les