3a sessió: Successos i objectes JavaScript.

JavaScript és un llenguatge orientat a objectes, com ara els formularis o les imatges. Podem actuar sobre aquests objectes quan detectem un esdeveniment o succés: fer un clic amb el ratolí, carregar una pàgina, ...

Successos

Podem utilitzar diferents successos per activar codi JavaScript:

...
<BODY OnLoad="funció()">
...

...
<IMG SRC="flor.gif" OnMouseOver="funció()">
...

...
<INPUT TYPE="button" VALUE="Corregir" OnClick="funció()">
...

Els principals successos són:

OnClick : quan fem clic amb el ratolí.
OnMouseOver, OnMouseOut : quan coloquem el ratolí a sobre o el retirem.
OnLoad, OnUnLoad : quan es carrega o abandonem la pàgina o marc.
OnChange : quan canviem el contingut d'un control d'un formulari.
OnSubmit : quan enviem un formulari.
OnFocus, OnBlur : quan ens col·loquem en un determinat control d'un formulari o l'abandonem.
OnSelect : quan seleccionem text dintre d'un control d'un formulari.
OnAbort : quan cancel·lem la càrrega d'una imatge.
OnReset : quan esborrem el contingut d'un formulari.
OnKeyDown, OnKeyUp, OnKeyPress: quan premem una tecla, deixem de fer-lo o la mantenim.
OnMouseDown, OnMouseMove, OnMouseUp : quan premem un botó del ratolí, el movem o deixem de prémer el botó.
OnMove, OnResize : quan canviem la posició o mida de la finestra.

Objectes

Un objecte es compon de dos elements:

Un conjunt de propietats que conetenen dades.
Un conjunt de mètodes que permeten desenvolupar operacions amb aquestes dades.

Podem accedir als objectes ,dades o mètodes d'un objecte combinant el nom de l'objecte i la part requerida amb l'operador punt: document.write("Hola món"); .

Podem crear un objecte amb el constructor new :
...
avui = new Date();
...

A la taula següent podem veure els principals objectes del navegador. Quan és possible accedir als objectes interns com un vector s'especifica el nom d'aquest vector:

Objecte Vector Utilització

window Per a accedir a una finestra del navegado o a un marc de la finestra.

document Per a accedir al document carregat a la finestra.

location Per a representar una URL, bé per crear-la, accedir a les seves parts o modificar-la.

history Per al manteniment del historial de URLs visitades des d'una finestra.

frame frames Per a accedir a un marc HTML.

link links Per a accedir al text o imatge d'un enllaç.

anchor anchors Per a accedir a la destinació d'un enllaç.

image images Per a accedir a una imatge.

area Per a accedir a una zona d'un mapa.

applet applets Per a accedir a un applet Java.

event Per a accedir a la informació sobre un succés.

Event Per a accedir a les constants que identifiquen els successos.

form forms Per a accedir a un formulari HTML.

elements Per a accedir a tots els controls d'un formulari.

text Per a accedir a un camp de text d'un formulari.

textarea Per a accedir a un àrea de text d'un formulari.

radio Per a accedir a un camp d'opció d'un formulari.

checkbox Per a accedir a un camp de verificació d'un formulari.

button Per a accedir a un botó d'un formulari.

submit Per a accedir al botó d'acceptació d'un formulari.

reset Per a accedir al botó d'esborrar d'un formulari.

select Per a accedir a una llista de selecció d'un formulari.

option Per a accedir als elements d'una llista de selecció d'un formulari.

password Per a accedir a un camp de contrasenya d'un formulari.

hidden Per a accedir a un camp amagat d'un formulari.

FileUpload Per a accedir a un camp de selecció de fitxer d'un formulari.

navigator Per a accedir a la informació sobre el navegador.

screen Per a accedir a la informació sobre resolució i clors de pantalla de l'usuari.

embed embeds Per a accedir a un objecte incrustrat.

mimoType mimeTypes Per a accedir a la informació sobre un tipus MIME determinat.

plugin plugins Per a accedir a la informació sobre un complement del navegador.

Al 1stPage 2000 podem veure l'estructura d'arbre d'aquests objectes amb el Script Object Tree - Integrated Script Editor:

Altres objectes importants són:

Objecte Array

mètode descripció

toString() Retorna una cadena amb els elements del vector separats per comes

join(separador) Retorna una cadena amb els elements del vector separats pel caràcter separador

reverse() Inverteix l'ordre dels elements del vector

sort(funció) Ordena els elementsdel vector segons la funció, que ha de tornar un valor negatiu si el primer argument s'ordena abans que el segon.

Objecte Date

mètode descripció

getDate()
getUTCDate()
setDate()
setUTCDate() Retorna o fixa el dia del mes.

getDay()
getUTCDay() Retorna o fixa el dia de la setmana.

getHours()
getUTCHours()
setHours()
setUTCHours() Retorna o fixa l'hora.

getMilliseconds()
getUTCMilliseconds()
setMilliseconds()
setUTCMilliseconds() Retorna o fixa els milisegons.

getMinutes()
getUTCMinutes()
setMinutes()
setUTCMinutes() Retorna o fixa els minuts.

getMonth()
getUTCMonth()
setMonth()
setUTCMonth() Retorna o fixa el mes.

getSeconds()
getUTCSeconds()
setSeconds()
setUTCSeconds() Retorna o fixa els segons.

getTime()
setTime() Retorna o fixa l'hora

getTimeZoneoffset() Retorna la diferencia horaria en minuts.

getYear()
getFullYear()
getUTCFullYear()
setYear()
setFullYear()
setUTCFullYear() Retorna o fixa l'any.

toGMTString() Converteix una data en cadena GMT d'Internet.

toLocaleString() Converteix una data en cadena amb format local.

toString() Converteix una data en cadena.

valueOf() Retorna el nombre de milisegons desde 01.01.1970.

toUTCString() Retorna una cadena amb l'hora en format UTC.

Objecte Math

propietat descripció

E e=2.71828...

LN2 ln(2)

LN10 ln(10)

LOG2E log₂(e)

LOG10E log₁₀(e)

PI 3.14159265...

SQRT1_2 Arrel quadrada de 0.5

SQRT2 Arrel quadrada de 2

mètode descripció

abs(x) Valor absolut

acos(x) Arc cosinus en radians

asin(x) Arc sinus en radians

atan(x) Arc tangent en radians

atan2(x,y) argument polar de (x,y)

ceil(x) Arrodoniment sencer per excés

cos(x) cosinus

exp(x) Exponencial

floor(x) Arrodoniment sencer per defecte

log(x) Logaritme natural

max(x,y) Màxim de x, y

min(x,y) Mínim de x, y

pow(x,y) x^y

random() Retorna un nombre a l'atzar entre 0 i 1

round(x) Arrodoniment sencer

sin(x) Sinus

sqrt(x) Arrel quadrada

tan(x) Tangent

Objecte string

propietat descripció

length Longitut de la cadena.

mètode descripció

charAt(index) Retorna el caràcter a la posició index

charCodeAt(index) Retorna el codi Unicode del caràcter a la posició index

fromCharCode(codes) Converteix una seqüència de codis separats per comes en una cadena.

indexOf(pattern) Retorna la posició de la primera coincidència de pattern en la cadena

indexOf(pattern,startIndex) Igual que l'anterior, però la cerca comença en la posició startIndex

lastIndexOf(pattern)
lastIndexOf(pattern,startIndex) Igual que els anteriors, començant la cerca des del final de la cadena.

split(separador) separa una cadena en un vector en funció del separador

substring(startIndex) Retorna una cadena començant en la posició startIndex

substring(startIndex,endIndex) retorna la cadena des de la posició startIndex fins la posició endIndex

toLowerCase() Converteix la cadena en minúscules.

toUpperCase() Converteix la cadena en majúscules.

Objecte	Vector	Utilització
window		Per a accedir a una finestra del navegado o a un marc de la finestra.
document		Per a accedir al document carregat a la finestra.
location		Per a representar una URL, bé per crear-la, accedir a les seves parts o modificar-la.
history		Per al manteniment del historial de URLs visitades des d'una finestra.
frame	frames	Per a accedir a un marc HTML.
link	links	Per a accedir al text o imatge d'un enllaç.
anchor	anchors	Per a accedir a la destinació d'un enllaç.
image	images	Per a accedir a una imatge.
area		Per a accedir a una zona d'un mapa.
applet	applets	Per a accedir a un applet Java.
event		Per a accedir a la informació sobre un succés.
Event		Per a accedir a les constants que identifiquen els successos.
form	forms	Per a accedir a un formulari HTML.
elements		Per a accedir a tots els controls d'un formulari.
text		Per a accedir a un camp de text d'un formulari.
textarea		Per a accedir a un àrea de text d'un formulari.
radio		Per a accedir a un camp d'opció d'un formulari.
checkbox		Per a accedir a un camp de verificació d'un formulari.
button		Per a accedir a un botó d'un formulari.
submit		Per a accedir al botó d'acceptació d'un formulari.
reset		Per a accedir al botó d'esborrar d'un formulari.
select		Per a accedir a una llista de selecció d'un formulari.
option		Per a accedir als elements d'una llista de selecció d'un formulari.
password		Per a accedir a un camp de contrasenya d'un formulari.
hidden		Per a accedir a un camp amagat d'un formulari.
FileUpload		Per a accedir a un camp de selecció de fitxer d'un formulari.
navigator		Per a accedir a la informació sobre el navegador.
screen		Per a accedir a la informació sobre resolució i clors de pantalla de l'usuari.
embed	embeds	Per a accedir a un objecte incrustrat.
mimoType	mimeTypes	Per a accedir a la informació sobre un tipus MIME determinat.
plugin	plugins	Per a accedir a la informació sobre un complement del navegador.

Objecte Array
mètode	descripció
toString()	Retorna una cadena amb els elements del vector separats per comes
*join(separador)*	Retorna una cadena amb els elements del vector separats pel caràcter separador
reverse()	Inverteix l'ordre dels elements del vector
*sort(funció)*	Ordena els elementsdel vector segons la funció, que ha de tornar un valor negatiu si el primer argument s'ordena abans que el segon.

Objecte Date
mètode	descripció
getDate() getUTCDate() setDate() setUTCDate()	Retorna o fixa el dia del mes.
getDay() getUTCDay()	Retorna o fixa el dia de la setmana.
getHours() getUTCHours() setHours() setUTCHours()	Retorna o fixa l'hora.
getMilliseconds() getUTCMilliseconds() setMilliseconds() setUTCMilliseconds()	Retorna o fixa els milisegons.
getMinutes() getUTCMinutes() setMinutes() setUTCMinutes()	Retorna o fixa els minuts.
getMonth() getUTCMonth() setMonth() setUTCMonth()	Retorna o fixa el mes.
getSeconds() getUTCSeconds() setSeconds() setUTCSeconds()	Retorna o fixa els segons.
getTime() setTime()	Retorna o fixa l'hora
getTimeZoneoffset()	Retorna la diferencia horaria en minuts.
getYear() getFullYear() getUTCFullYear() setYear() setFullYear() setUTCFullYear()	Retorna o fixa l'any.
toGMTString()	Converteix una data en cadena GMT d'Internet.
toLocaleString()	Converteix una data en cadena amb format local.
toString()	Converteix una data en cadena.
valueOf()	Retorna el nombre de milisegons desde 01.01.1970.
toUTCString()	Retorna una cadena amb l'hora en format UTC.

Objecte Math
propietat	descripció
E	e=2.71828...
LN2	ln(2)
LN10	ln(10)
LOG2E	log₂(e)
LOG10E	log₁₀(e)
PI	3.14159265...
SQRT1_2	Arrel quadrada de 0.5
SQRT2	Arrel quadrada de 2
mètode	descripció
abs(x)	Valor absolut
acos(x)	Arc cosinus en radians
asin(x)	Arc sinus en radians
atan(x)	Arc tangent en radians
atan2(x,y)	argument polar de (x,y)
ceil(x)	Arrodoniment sencer per excés
cos(x)	cosinus
exp(x)	Exponencial
floor(x)	Arrodoniment sencer per defecte
log(x)	Logaritme natural
max(x,y)	Màxim de x, y
min(x,y)	Mínim de x, y
pow(x,y)	x^y
random()	Retorna un nombre a l'atzar entre 0 i 1
round(x)	Arrodoniment sencer
sin(x)	Sinus
sqrt(x)	Arrel quadrada
tan(x)	Tangent

Objecte string
propietat	descripció
length	Longitut de la cadena.
mètode	descripció
*charAt(index)*	Retorna el caràcter a la posició index
*charCodeAt(index)*	Retorna el codi Unicode del caràcter a la posició index
fromCharCode(codes)	Converteix una seqüència de codis separats per comes en una cadena.
*indexOf(pattern)*	*Retorna la posició de la primera coincidència de pattern* en la cadena**
*indexOf(pattern,startIndex)*	Igual que l'anterior, però la cerca comença en la posició startIndex
lastIndexOf(pattern) lastIndexOf(pattern,startIndex)	Igual que els anteriors, començant la cerca des del final de la cadena.
split(separador)	separa una cadena en un vector en funció del separador
*substring(startIndex)*	Retorna una cadena començant en la posició startIndex
*substring(startIndex,endIndex)*	retorna la cadena des de la posició startIndex fins la posició endIndex
toLowerCase()	Converteix la cadena en minúscules.
toUpperCase()	Converteix la cadena en majúscules.

3a sessió: Successos i objectes JavaScript.

Successos

Objectes

© Jordi Orts, març 2001