Els objectes en JavaScript

Ordre de creació dels objectes en el navegador
Algunes propietats d'objectes que són vectors

El events de JavaScript

3.4 Objectes del navegador

En el moment d'executar una pàgina en el navegador, aquest crea una sèrie d'objectes que són accessibles des de JavaScript, objectes que contenen tota la informació adient per executar-se en el Navegador.

Aquests objectes responen a una jerarquia que mostrem en la imatge següent.

Aquesta jerarquia està formada per la relació de pertinència entre objectes, es a dir els objectes són propietats d'altres objectes. No és una jerarquia d'objectes de tipus herència.

Així l'objecte Window té una propietat que és l'objecte Document i l'objecte Document pot tenir una propietat o més de tipus Image, etc.

Per a accedir a les diferents propietats hem de fer ús de la notació següent:

document.frmMoneda.txtCaras.value

En aquesta instrucció tomada d'un exemple del capítol 2 veiem que l'objecte document té com a propietat un formulari anomenat frmMoneda, que té un quadre de text anomenat txtCares, que té la propietat value.

Totes les pàgines tenen els següents objectes:

navigator: té com a propietats el nom i la versió del navegador que estem fent ús i també els tipus MIME que suporta així com els pulg-ins instal·lats a l'ordinador.

Exemple d'us de l'objecte navigator	Visualització per pantalla
<script> document.write(navigator.appName,"<br>"); document.write(navigator.appVersion); </script>

window: té totes les propietats de la finestra del navegador i moltes de les funcions que té una finestra de windows.

Exemple d'us de l'objecte window	Visualització per pantalla
<script> function TancaFinestra() { window.close(); } </script> <form name="frm01"> <input type="button" value="Tanca el navegador" onClick="TancaFinestra()"> </form>

document: té totes les propietats basades en tot el contingut del document com el títol, el color de fons, links, formularis, etc...

location: té les propietats basades en la URL actual.

Exemple d'us de l'objecte location	Visualització per pantalla
<script> document.write(location.href); </script>

history: té propietats que contenen la informació de les URL visitades anteriorment pel navegador client.

3.4.1 Ordre de creació dels objectes en el navegador

El navegador té un intèrpret que a mesura que va llegint el document va executant les instruccions que rep i així va creant els objectes necessaris i també la imatge que ha de posar en pantalla.

Això vol dir que una vegada creada la imatge d'un objecte no podem canviar les seves propietats.

La regla ens diu que no podem canviar dinàmicament propietats, però existeix una important excepció i correspon a la propietat value de diferents objectes, com és l'objecte de tipus quadre de text.

3.4.2 Algunes propietats d'objectes que són vectors

Alguns objectes tenen un vector com a propietat dins les seves propietas. Així, com a exemple, l'objecte formulari té la propietat elements que és un vector en el que cada objecte creat per mitjà de tags html és un element. L'ordre en que estan escrits aquests tags dins el codi HTML determina la posició de l'element dins el vector.

A l'exemple següent veiem que hem creat dins el formulari, anomenat frmIncrement, 10 objectes que estaràn dins el vector elements en el mateix ordre que estan escrits. Així, si volem accedir a la propietat value del botó que esborra les dades hem de fer una instrucció com la següent:

document.frmIncrement.elements[9].value

Exemples d'objecte creat amb inicialitzador

Visualització per pantalla

<form name="frmIncrement">
  0<input type = "text" size=4 value="">
  1<input type = "text" size=4 value="">
  <br>
  2<input type = "text" size=4 value="">
  3<input type = "text" size=4 value="">
  <br>
  4<input type = "text" size=4 value="">
  5<input type = "text" size=4 value="">
  <br>
  6<input type = "text" size=4 value="">
  7<input type = "text" size=4 value="">
  <br>
  8<input type="button" value="Incrementa" onClick="incrementa()">
  9<input type="reset" value="Esborra">
</form>

<script>
 function incrementa()
 {
   var i;
   for(i=0;i<7;i+=2)
   {
     document.frmIncrement.elements[i+1].value = 
	    parseInt(document.frmIncrement.elements[i].value)+1;
   }
   with (document.frmIncrement.elements[9])
     if (value == "Esborra") value = "Neteja";
     else value = "Esborra";
}
</script>

En la descripció de tots els vectors hem de dir que l'ordre en el que els elements són dins el vector és el mateix que l'ordre en el que hi s´çon escrits dins el document.

Els vectors més importants són els següents:

Objecte	Propietat (vector)	Descripció
document	anchors	Conté tots els tags <A> del document que contenen l'atribut NAME.
	applets	Conté tots els tags <APPLET> del document.
	embeds	Conté tots els tags <EMBED> del document.
	forms	Conté tots els tags <FORM> del document.
	images	Conté tots els tags <IMAGE> del document. Les imatges creades amb el constructor image() no estan incluides en el vector.
	layers	Conté tots els tags <LAYER> i <ILAYER> del document.
	links	Conté tots els tags <AREA HRF="...">, els tags <A HREF="..."> i els objectes Link creats amb el métode link.
Form	elements	Conté tots els elements d'un formulari com els objects Checkbox, Radio i Text.
Function	arguments	Conté els arguments d'una funció
navigator	mimeTypes	Conté tots els tipus MIME soportats pel navegador client (interns, per plug-ins o via aplicacions d'ajuda).
navigator	plugins	Conté tots els plug-ins instal·lats en el client.
select	options	Conté totes les opcions de l'objecte select (tabs <OPTION>).
window	frames	Conté tots els tags <FRAME> en una window que conté el tag <FRAMESET>.
window	history	Conté les adreces URL de les pàgines visitades des de aquesta finestra.

3.5 El events de JavaScript

Els events són accions que generalment s'esdevenent quan l'usuari fa alguna acció com fer clic en el botó del ratolí o prèmer una tecla del teclat. El sistema operatiu s'encarrega de capturar aquests events i de pasar-los als objectes que tenen definit un manejador d'events per a un tip d'event determinat.

Com a exemple veiem en el següent codi que tenim un objecte quadre de text anomenat txtProva en el hem declarat que aquest objecte ha donar resposta als events MouseOver (pasar el ratolí pel demunt de l'objecte) i MouseOut (fer sortir el mouse de l'objecte) mitjançant les funcions ponText() i quitaText() que seran els manejadors d'events respectiu.

Exemples d'events

Visualització per pantalla

<form name ="frmProva">
  Pasa el cursor pel demunt del quadre de text i despres surt del quadre.
  <input type="text" name = "txtProva" value="" 
            onMouseOver="ponText()" onMouseOut="quitaText()"> 
</form>
<script>
  function ponText()
  { 
    document.frmProva.txtProva.value='Hola Pep';
  }
  function quitaText()
  {
    document.frmProva.txtProva.value='';
  }
</script>

En la taula següent podeu veure una relació dels events que es poden manejar des de JavaScript.

Per a una descripció més complerta dels events i els manejadors d'events heu de consultar El manual de Netscape Client Reference, capítol 3 Event Handlers.

Event	S'aplica a	Succeeis quan	Manejador d'event
Abort	images	L'usuari aborta la càrrega d'una imtage (per exemple fent click a un nou enllaç o aturant la càrrega de la pàgina mitjançant el botó stop del navegador)	onAbort
Blur	windows i tots els elements form	L'usuari quita e focus d'un element window o d'un element form.	onBlur
Change	quadres de text i àrees de text, objectes de llistes tipus select	L'usuari canvia la propietat value de l'element	onChange
Click	buttons, radio buttons, checkboxes, submit buttons, reset buttons, links	L'usuari fa click en un d'aquests elements	onClick
DragDrop	windows	L'usuari desa (drag and drop, arrosegar i desar) dins la finestra del navegador.	onDragDrop
Error	images, windows	Es produeix una errada mentre es carrega una imatge o un document.	onError
Focus	1010702>windows i tots els elements form	L'usuari dona el focus de tipus input a un element window o a un element form	onFocus
KeyDown	documents, images, links, text areas	L'usuari prem una tecla.	onKeyDown
KeyPress	documents, images, links, text areas	L'usuari prem una tecla	onKeyPress
KeyUp	documents, images, links, text areas	L'usuari desa anar una tecla.	onKeyUp
Load	document body	L'usuari carrega una pàgina en el navegador	onLoad
MouseDown	documents, buttons, links	L'usuari prem una tecla del ratolí	onMouseDown
MouseMove	tots per defecte	User moves the cursor	onMouseMove
MouseOut	areas, links	L'usuari treu el ratolí de l'area o del link.	onMouseOut
MouseOver	links	L'usuari mou el cursor del ratolí pel demunt del lin.	onMouseOver
MouseUp	documents, buttons, links	L'usuari desa anar una tecla del ratolí.	onMouseUp
Move	windows	L'usuari o u script mou la finestra.	onMove
Reset	forms	L'usuari fa un reset d'un formulari fent clic a sonre d'un botó de reset.	onReset
Resize	windows	L'usuari canvia les mides de la finestra.	onResize
Select	text fields, textareas	L'usuari selecciona un text dins un camp de text.	onSelect
Submit	forms	L'usuari fa click en un botó d'enviar el formulari.	onSubmit
Unload	document body	L'usuari surt de la pàgina	onUnload

Miguel A. Almarza Departament d'Informàtica IES Mare de Deu de la Mercè

Els objectes en JavaScript

3.4 Objectes del navegador

3.4.1 Ordre de creació dels objectes en el navegador

3.4.2 Algunes propietats d'objectes que són vectors

3.5 El events de JavaScript

Miguel A. Almarza
Departament d'Informàtica
IES Mare de Deu de la Mercè