v2.0
document
de recolzament al mòdul
d'interactivitat a la web basada en llenguatges de propòsit general
jaume ferrer i rosera
Aquest document no pretén ser una guia, ni tan sols una introducció i en cap cas es pot prendre com un manual de consulta. El seu objectiu és ajudar l'alumne/a a entendre millor els exemples presentats a classe i proporcionar material escrit que complementi les explicacions del professor sobre alguns principis bàsics del codi HTML i el seu lligam amb JavaScript.
2.
Sobre la notació i els colors d'aquest document
Per distingir entre el text de les explicacions i el del codi d'exemple, en la mesura del possible s'ha procurat tractar ambdós de forma diferenciada tant a nivell d'estil, font de lletra i/o color. El codi està escrit en diferents colors per distingir les diferents parts del document HTML:
| <HTML>
<!- > |
Tags <HTML> i comentaris |
| <HEAD> | Codi HTML dins del HEAD, excepte el que estigui dins del SCRIPT |
| <SCRIPT> | Codi inclós dins d'un SCRIPT |
| <BODY> | Codi HTML dins del BODY, excepte IMG i A HREF |
| <IMG> | Tags <IMG> |
| <A HREF > | Tags <A> |
La major part
de pàgines web estan basades en documents de tipus HTML. Aquests documents
es construeixen segons un sistema d'etiquetes (tag) que defineixen les parts
del document, els objectes que el composen i el formateig de tots els seus elements.
Un tag és una paraula clau escrita entre els símbols <>.
Es poden escriure en majúscules o minúscules. La majoria de tags
són tancats, és a dir, tenen un principi i un final, i al mig
trobaríem allò que pretenen definir. Per
exemple, si volem que dins de la frase avui tinc molta gana la
paraula molta aparegui escrita en negreta, haurem de disposar
els tags així:
avui tinc <B>molta</B> gana
I al navegador es visualitzarà:
avui tinc molta gana
Noteu
que el tag de finalització porta un símbol / al davant.
En canvi, d'altres tags són oberts i només posant-ne un és
suficient. Per exemple: <BR>, <IMG>...
La llista completa de tags definits per les especificacions HTML es pot
trobar a http://www.w3.org
4. L'estructura bàsica del document
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Un document HTML comença i acaba sempre amb el tag HTML i conté dues part: el HEAD i el BODY.
5.
Dins del HEAD
<HEAD>
<TITLE>text que
apareix dalt de la finestra del navegador</TITLE>
<META></META>
<SCRIPT>
</SCRIPT>
</HEAD>
La part HEAD es carrega a la memòria abans de que aparegui la pàgina construida a la finestra del navegador, de manera que ens interessa situar el nostre Script aquí per tal de que tot el programa estigui apunt per funcionar quan l'usuari vegi la interfície i comenci a interactuar. També hi trobem altres tags, com ara <TITLE>, que permet definir el títol que apareixerà al capdamunt de la finestra del navegador, o <META>, on s'insereix una descripció de la pàgina i una llista de paraules clau perquè els buscadors la trobin.
Podem veure a continuació l'exemple anterior en mode codi HTML:
<BODY
bgcolor="#FFFFFF">
Aquest text es visualitza directament
a la finestra del navegador
<BR>
<B>Aquest text
es visualitza en negreta</B>
<P><H3>Aquest
text es visualitza amb mida de titol H3</H3><P>
<P ALIGN="center">Aquest
text es visualitza centrat</P>
<!- aquesta linia no es veurà perquè
és un comentari ->
<P
ALIGN="right"><H4><B>Aquest
text es visualitza aliniat a la dreta,
en titol H4 i en negreta</B></H4></P>
<A href="pagina3.htm">Anar
a la pagina 3</A><BR>
<FONT color="#FF0000" face="Arial, Helvetica, sans- serif" size="-2">Aquest
text es visualitza en color magenta, tipus Helvetica i a un tamany menor que
el tamany per defecte del navegador</FONT>
</BODY>
A la part BODY
trobarem tots els continguts que es visualitzaran a la finestra del navegador.
Gairebé tot el que fem amb un editor de HTML, com ara Dreamweaver, anirà
a parar al BODY. Per aquesta raó
normalment no cal escriure gaire cosa directament en codi, perquè el
propi editor s'encarrega de generar el codi mentres dissenyem la pàgina
a la finestra normal d'edició interactiva.
Qualsevol text que no estigui entre símbols <>
apareixerà escrit directament a la finestra del navegador. Els tags ens
permetran donar format, per tal de que es mostrin amb l'aspecte que nosaltres
desitgem. Alguns tags van acompanyats d'atributs que acaben de concretar algunes
característiques, com ara el color, el tamay, l'aliniació... Alguns
Scripts també es situen dins del BODY.
Aquests són alguns tags d'ús freqüent:
| <BODY> | El propi tag <BODY> disposa d'atributs com ara bgcolor o background, entre d'altres, que permeten definir el color o la imatge de fons de la pàgina |
| <B> | Negreta |
| <I> | Cursiva |
| <H6> | Titolars. El número va del 1 al 6 i defineix el tamany |
| <FONT> | Defineix atributs de la tipografia, com ara el color, el tipus i el tamany |
| <BR> | Salt de línia. És un tag obert, sense terminació |
| <P> | Indicador de pàrraf. Defineix atributs com ara l'aliniació de blocs de text i d'imatges |
| <A href="" > |
Defineix
un hiperenllaç de text o d'imatge. L'atribut href
s'ha d'omplir amb el nom del document o bé l'adreça de la
pàgina web on volem que vagi a parar l'usuari quan cliqui amb el
mouse damunt. També el podem utilitzar per cridar una funció
si utilitzem una expressió com ara: |
| <!- > | Comentari. No es veurà a la finestra del navegador |
| casella 1 |
casella 2
|
casella 3
|
| casella 4 | casella 5 | casella 6 |
Les taules són molt útils per situar la informació en pantalla malgrat el seu aspecte rudimentari.Tot i que és possible dissenyar amb molta més llibertat utilitzant les capes, la seva complexitat excedeix els objectius d'aquest mòdul. Per tant, ens centrarem en els tags de formateix de les taules.
Tal i com passa amb la major part d'allò contingut al BODY, podem dissenyar una taula de forma interactiva amb Dreamweaver sense escriure un sol tag, però tot seguit es fa una descripció dels tags més rellevants que hi intervenen. La taula anterior es mostra a continuació en codi HTML. Cal observar que la casella 2 té el text centrat i la casella 3 el té aliniat a la dreta. La casella 6 mostra el fons de color groc.
<TABLE
width="75%" border="1">
<TR>
<TD>casella 1</TD>
<TD><DIV align="center">casella
2</DIV></TD>
<TD><DIV
align="right">casella
3</DIV></TD>
</TR>
<TR>
<TD>casella
4</TD>
<TD>casella
5</TD>
<TD bgcolor="#FFFF66"
>casella
6</TD>
</TR>
</TABLE>
Observeu que el
tag <TABLE> duu atributs que especifiquen
quina amplada tindrà la taula en relació a l'ample total de la
finestra del navegador i quin gruix tindran les línies.
El tag <TD>
defineix cada cel.la i disposa de l'atribut bgcolor,
que defineix el color de fons. El tag <DIV>
permet definir l'aliniació del text.
Els tags
<TR> defineixen ajunten totes les
cel.les que pertanyen a la mateixa fila o pis.
<IMG src="imatges/arbre.gif" witdh="120" height="80" name="tardor">
El tag <IMG>
és obert, no té tancament. El seu atribut més important
és src,
que permet definir el camí per tal de que el navegador arribi fins a
l'arxiu d'imatge que es vol mostrar en pantalla. En l'exemple es tracta d'un
arxiu anomenat arbre
amb l'extensió gif
que es troba dins la carpeta imatges.
Altres atributs són l'ample i l'alt (en píxels) i el nom que volem
que tingui per tal de que el nostre script la pugui trobar.
|
|
<FORM
method="post"
action=""
name="formulariA">
<INPUT type="text"
name="campDeText1"
value="0">
<INPUT
type="button"
name="boto1"
value="No
fa res">
</FORM>
Igual que passa amb les imatges, és molt important que cada element, inclós el tag <FORM> tingui un atribut name amb un nom concret per tal de poder-lo utlitzar des del nostre script. Els camps de text permeten que l'usuari entri dades però també permeten que el programa hi escrigui resultats perquè l'usuari els pugui llegir. Els botons són una de les formes més bàsiques d'interacció entre amb l'usuari.
<FRAMESET
rows="85,*" frameborder="NO" border="0" framespacing="0">
<FRAME
src="arxiuA.htm" scrolling="NO" noresize frameborder="NO" marginwidth="0" marginheight="0"
name="dalt" >
<FRAME
src="arxiuB.htm" scrolling="NO" noresize frameborder="NO" marginwidth="0" marginheight="0"
name="baix" >
</FRAMESET>
Un FRAME és una subdivisió de la finestra del navegador i un FRAMESET és una descripció del conjunt de divisions. Totes les seves característiques es poden controlar interactivament amb Dreamweaver mitjançant les finestres frames (marcos) i properties (propietats) sense necessitat d'escriure codi HTML.
Dins del tag <FRAMESET> trobem atributs que defineixen si la divisió serà en rows (files) o en cols (columnes). En l'exemple es tracta d'una divisió en files. La primera fila començant per dalt medirà 85 píxels i la segona s'adaptarà al que quedi de finestra del navegador (*). La resta d'atributs fan referència a l'aspecte visual dels límits entre frames i als marges.
Els tags <FRAME> són oberts i semblants al tag <IMG>. Tenen atributs com src, que indica el nom de l'arxiu htm que apareixerà dins del frame o name, que permet posar-li un nom al frame per poder-nos-hi referir des d'un script o des d'un enllaç. Atributs com scrolling o noresize frameborder es refreeixen respectivament a la possibilitat d'incloure barres de desplaçament o de permetre que les mides del frame siguin modificables per l'usuari arrossegant el cursor. La resta d'atributs fan referència a l'aspecte visual dels límits.
Des del tag <A HREF> podem especificar en quin frame volem que es carregui un document indicant el nom del frame mitjançant l'atribut target.
<SCRIPT
language="JavaScript1.2"
>
</SCRIPT>
El tag <SCRIPT> incorpora l'atribut language per tal de que el navegador sàpiga en quin llenguatge ha estat escrit. Opcionalment, al nom del llenguatge se li pot afegir el número de versió per tal d'evitar possibles incompatibilitats amb segons quines versions de navegadors.
Entre dues etiquetes SCRIPT trobarem sempre codi de programació. Podem trobar més d'un Script en un mateix document, tant al HEAD com al BODY, i fins i tot fora del document. El tag <SCRIPT> disposa d'un atribut src, com a les imatges, que defineix un camí per anar a buscar un document extern, a partir del qual pot obtindre un altre Script.
<SCRIPT language="JavaScript1.2" >
function diguesHola(){
var paraula = "Hola"
alert(paraula)}
</SCRIPT>
Les instruccions del programa o script es basen en l'existència de variables i funcions. Les variables són contenidors que permeten emmagatzemar dades concretes a la memòria de l'ordinador. Les funcions són conjunts d'instruccions que poden ser cridades a actuar des d'un altre punt del programa.
En l'exemple anterior, hem definit una funció anomenada diguesHola, dins de la qual hem creat una variable anomenada paraula. D'això se'n diu inicialitzar la variable. Després hem assignat un valor concret a aquesta variable, en aquest cas "Hola". Com que va escrita entre cometes es tracta d'una cadena de caracters, d'un text, no d'un valor numèric. Després hem escrit l'expressió alert() que provoca l'aparició d'una finestra d'alerta amb un missatge que correspon al text que estigui escrit dins del parèntesi.
El llenguatge requereix l'ús de certes paraules clau, que tenen que ser escrites exactament tal i com defineixen les especificacions, i d'altres noms que ens inventem. És molt important recordar que, a dieferència del codi HTML, el codi JavaScript sí és sensible a majúscules.
Quan definim una funció sempre escribim la paraula clau function davant del nom i sempre posem () després del nom. El contingut de la funció ha d'estar tancat entre els símbols {}. Podem escriure les diferents instruccions en línies separades per salt de línia o totes seguides en la mateixa línia si les separem amb un símbol de ;
13. Events i crides a funcions
<HTML>
<HEAD>
<SCRIPT
language="JavaScript1.2" >
function diguesHola(){
var paraula = "Hola"
alert(paraula)}
</SCRIPT>
</HEAD>
<BODY onLoad="diguesHola()">
</BODY>
</HTML>
Una funció es manté latent a la memòria de l'ordinador sense fer res esperant que algun esdeveniment la posi en marxa. Per tal de que una funció actui cal que sigui cridada pel seu nom. En l'exemple anterior trobem que el tag <BODY> duu un atribut anomenat onLoad. Es tracta d'una captura d'event. En aquest cas, en començar a carregar-se la part BODY del document s'està cridant a la funció diguesHola(), fet que provocarà que es vagin ejecutant totes les seves línies fins arribar a l'alert() i mostrar en pantalla la finestra d'alerta tal i com hem vist al punt anterior.
Ara comparem-ho amb l'exemple següent:
<HTML>
<HEAD>
<SCRIPT
language="JavaScript1.2" >
function diguesHola(missatge){
var paraula = missatge
alert(paraula)}
</SCRIPT>
</HEAD>
<BODY onLoad="diguesHola('Bon
dia')">
</BODY>
</HTML>
En aquest cas, quan cridem la funció li estem posant dins dels parèntesis un text. Quan aquesta crida arriba a la funció, l'expressió missatge (que es troba dins del parèntesi) actua com un receptor. Es tracta d'una mena de variable que es carrega amb les dades que enviem des de la crida. D'això en diem passar paràmetres. A partir d'aquest moment, missatge valdrà "Bon dia" perquè es carrega amb el valor d'allò que li enviem. Per tant, quan assignem paraula = missatge estem dient que paraula valgui el mateix que missatge, és a dir, que valgui "Bon dia".
En aquest cas, la finestra d'alerta mostrarà el missatge "Bon dia".
Alguns events que ens permeten capturar accions i fer crides a funcions són, entre d'altres:
| onLoad | Detecta quan es produeix la càrrega en memòria. El podem trobar al tag body segons els exemples anteriors |
| onClick | Detecta
un click del ratolí. El podem trobar en un botó de formulari: <INPUT type="button" name="boto1" value="saluda" onClick="diguesHola()" > |
| onMouseOver | Detecta
quan el ratolí entra dins d'una zona. El podem trobar en una imatge
per detectar que li estem passant per sobre i acompanyaria el tag <A
href=>: <A href="javascript:diguesHola()" onMouseOver="canvia()"><IMG src="imatges/arbre.gif" witdh="120" height="80" name="tardor"></A> |
| onMouseOut | Detecta
quan el ratolí surt d'una zona. Actua a l'inrevés que onMouseOver
i també l'acompanyaria dins del tag <A href=> d'una imatge
durant un procés de rollover, per exemple: <A href="javascript:diguesHola()" onMouseOver="canviaImatge('tardor')" onMouseOut="retornaImatge('tardor')" ><IMG src="imatges/arbre.gif" witdh="120" height="80" name="tardor"></A> |
|
|
||||||||||||||||||||||||
15. Objectes. La sintaxi de punt
document.formulariA.campDeText1.value
= "Hola"
JavaScript permet la utilització i creació d'objectes. Cada objecte pot tenir diversos "mètodes" o funcions i també propietats. Utilitzem la sintaxi del punt per estalviar codi a l'hora d'establir referències de pertenència entre objectes, elements i mètodes.
En l'exemple anterior,
hauriem de llegir de dreta a esquerra per entendre el significat de l'expressió:
"El
contingut (value)
de l'element anomenat campDeText1
pertanyent al formulari anomenat formulariA
que forma part de la pàgina que estic mirant (document)
és "Hola"
L'exemple següent s'hauria de llegir com: utilitza el mètode write() per escriure la variable anomenada paginaVirtual dins de la pàgina actual (document) que es troba dins del frame anomenat dreta, el qual és un frame del nivell més superior (parent).
parent.frames.dreta.document.write(paginaVirtual)
Altres exemples:
16. Intercanvi de dades entre HTML i JavaScript
El
processament de dades en un formulari és possible gràcies a la
possibilitat d'intercanviar informació entre els elements HTML i les
funcions JavaScript. Per fer-ho possible cal que tots els elements i funcions
disposin d'un nom concret que permeti referir-s'hi quan sigui necessàri
per poder obtindre o canviar propietats dels elements HTML o per poder cridar
funcions JavaScript des del codi HTML.
En l'exemple següent, al nostre formulari (que anomenarem formulari1) disposarem d'un camp de text anomenat entrada1, on l'usuari podria escriure quelcom. Per poder recuperar aquesta informació des del nostre script utilitzaríem una expressió com la següent, on la variable dadesEntrada s'omple amb el contingut de l'element anomenat entrada1 que es troba dins del formulari1. Es tractaria d'un camp de text on l'usuari pot escriure quelcom:
dadesEntrada = document.formulari1.entrada1.value
En l'exemple següent, afegim com a novetat el mètode parseInt(), que permet fer la conversió a valor numèric. D'aquesta manera, dadesEntrada ja estaria llesta per poder-se operar matemàticament amb qualsevol altre valor:
dadesEntrada = parseInt(document.formulari1.entrada1.value)
L'efecte contrari, és a dir, mostrar en pantalla el resultat d'una processament de dades, es pot fer d'una forma semblant. En aquest cas considerarem que volem mostrar en el mateix camp de text del mateix formulari el contingut d'una variable anomenada resposta:
document.formulari1.entrada1.value = String(resposta)
El mètode String() s'utilitza per convertir el contingut de la variable a dades de tipus text, atès que en els camps de text no s'hi poden escriure valors númerics directament.
17. Generar codi HTML des de JavaScript
En
molts casos desitjarem mostrar en un frame una composició
que es construeixi directament des del codi de programació en funció
de la interacció amb l'usuari en comptes de mostrar un document HTML
dissenyat prèviament. Aquesta és una pràctica habitual
quan es treballa amb moltes dades o amb actualitzacions freqüents dels
continguts i es vol evitar la manipulació d'una quantitat excessiva de
documents HTML.
Aleshores el que
fem és composar tot el codi d'un document HTML normal amb tots els seus
tags dins d'una variable que després enviem com un text perquè
s'escrigui en un frame concret.
Per exemple:
var textQueCanviaSovint
= "Avui disposem de trenta articles"
textQueCanviaSovint = textQueCanviaSovint + "<BR><IMG
src='arbre.gif' witdh='120' height='80' name='imatge'>"
var paginaVirtual = "<HTML><HEAD></HEAD><BODY>"
+ textQueCanviaSovint + "</BODY></HTML>"
parent.frames.baix.document.write(paginaVirtual)
parent.frames.baix.document.close()
La variable textQueCanviaSovint es carrega amb el text que volem veure. A continuació a la mateixa variable s'hi afegeix una segona cadena de caracters, que aquest cop inclou tags HTML (un salt de línia i la creació d'un objecte d'imatge). Observeu que els atributs porten cometes simples, atès que tota la cadena es troba entre cometes dobles.
A continuació es crea una altre variable anomenada paginaVirtual formada per una cadena de caracters amb tots els tags habituals d'un document HTML. Entre els tags de la part BODY incorporem la variable textQueCanviaSovint, amb això completem tot el codi de la nostra futura pàgina virtual.
Finalment, escribim el contingut de la variable paginaVirtual dins del frame anomenat baix mitjançant el mètode write(). És aconsellable afegir una darrera línia de tancament amb el mètode close() per tancar el flux d'informació que enviem des del script fins al frame. Això facilitarà, entre d'altres coses, que quan tornem a escriure sobre el mateix frame la nova pàgina virtual substitueixi a l'anterior.
18. Estructures condicionals: if() i if() - else
Disposem
de la instrucció if()
que ens permet ejecutar parts del codi només si es compleix una condició.
L'exemple següent s'interpretaria així: si la variable any
val 2001, aleshores ejecuta la línia de codi entre les {},
per tant mostra l'alerta dient Bon
any 2001. Si la variable any
no val 2001, aleshores passa de llarg el codi entre les {}
i continua ejecutant el que vingui després. Per tant, en aquest cas,
si la condició es compleix apareixerà l'alerta Bon
any 2001 seguida de l'alerta Hem
sortit del IF i si no es compleix només apareixerà la darrera
alerta.
if( any == 2001 ){
alert("Bon any 2001")
}
alert("Hem sortit
del IF")
A l'exemple següent afegim un else{}. Amb aquesta variant podem fer que el codi es bifurqui. Si es compleix la condició definida al if(), aleshores s'ejecutarà el codi disposat entre les {} del if() i després el else{} serà ignorat i es passarà a ejecutar el codi fora del if(), és a dir, la darrera línia. El resultat serà que si any val 2001 apareixerà una alerta dient Bon any 2001 i tot seguit una altra indicant que hem sortit del if(). Si la condició no es compleix, aleshores s'ejecutarà directament el codi del else{} i després s'jecutarà la darrera línia ja fora del if(), de manera que el resultat serà que la primera alerta dirà No som al 2001 i la segona dirà Hem sortit del IF.
if( any == 2001 ){
alert("Bon any 2001")
}
else{
alert("No som al 2001")
}
alert("Hem sortit
del IF")
Dins d'un else{} poden incloure altres if() o altres if()-else, per la qual cosa el sistema de condicions es pot complicar tant com es vulgui. Observeu que, igual que passa amb les funcions, les línies que estan dins de les {} s'enretiren amb el tabulador cap a la dreta, per tal de facilitar la lectura quan revisem el codi i entendre millor què està dins de què. Es recomana consultar la taula d'operadors de comparació per tal de poder programar altres tipus de condicions.
if( any == 2001 ){
alert("Bon any 2001")
}
else{
if( any == 2000 ){alert("Bon any 2000")
}
}
alert("Hem sortit
del IF")
Un
array és una llista de dades. Quan treballem amb sèries de dades,
en comptes de tenir una variable per a cada una creem un objecte que les conté
totes referenciades amb un número d'index. A continuació es mostra
un exemple d'array que conté els noms dels planetes del sistema solar:
var sistemaSolar = new Array(9)
sistemaSolar[0]
= "Mercuri"
sistemaSolar[1] = "Venus"
sistemaSolar[2] = "Terra"
sistemaSolar[3] = "Mart"
sistemaSolar[4] = "Júpiter"
sistemaSolar[5] = "Saturn"
sistemaSolar[6] = "Urà"
sistemaSolar[7] = "Neptú"
sistemaSolar[8] = "Plutó"
Noteu que la primera posició correspon al índex zero. La longitut total de l'array és 9, perque es compten tots els elements inclós el zero. Per recuperar un valor ho faríem indicant el seu índex:
var recupera = sistemaSolar[2]
En aquest exemple, després de l'assignació, la variable recupera conté la cadena Terra.
També podem disposar d'arrays multidimensionals, és a dir, de llistes on cada element constitueix la seva pròpia subllista. A continuació veiem un exemple de com construir-ne una i com omplir-la amb dades. Es tracta de definir una funció que actui com un constructor d'objectes i on cada paràmetre correspongui al tipus de dades que volem guardar per a cada element de la llista:
function planeta( nom, diametre, gravetat){
this.nom = nom
this.diametre = diametre
this.gravetat = gravetat
}
var sistemaSolar
= new Array(9)
sistemaSolar[0] =
new planeta("Mercuri", "4.880","0,39")
sistemaSolar[1] = new planeta("Venus","12.100","0,91")
sistemaSolar[2] = new planeta("Terra","12.756","1")
sistemaSolar[3] = new planeta("Mart","6.794","0,38")
sistemaSolar[4] = new planeta("Júpiter","143.200","2,6")
sistemaSolar[5] = new planeta("Saturn","120.000","1,1")
sistemaSolar[6] = new planeta("Urà","51.800","0,88")
sistemaSolar[7] = new planeta("Neptú","49.500","1,14")
sistemaSolar[8] = new planeta("Plutó","3.100","0,05")
Si volem obtindre les dades corresponents a, per exemple Júpiter, l'assignació es faria així:
var saberNom = sistemaSolar[4].nom
var saberDiametre = sistemaSolar[4].diametre
var saberGravetat = sistemaSolar[4].gravetat
En aquest exemple, després de l'assignació les variables valdrien:
saberNom = "Júpiter"
saberDiametre = "143.200"
saberGravetat = "2,6"
Quan
desitgem que el
nostre codi ejecuti les mateixes instruccions de forma repetitiva un cert nombre
de vegades podem utilitzar una estructura de cicle. Un dels més utilitzats
és el cicle for{}.
Es basa en la utilització d'una variable que actua com un comptador que
normalment es va incrementant, i d'una condició que comprova l'estat
del comptador a cada passada del cicle.
for( i = 0; i < 3; i++){
alert( "passada " + i )
}
alert("Hem sortit del cicle")
L'exemple anterior
s'interpretaria així: sigui i
(ens podem inventar qualsevol nom) una variable que inicialment val zero. Si
i és menor
que 3, aleshores ejecuta el codi que es troba dins de les {}
i quan acaba incrementa en +1 el valor de i
(l'expressió
i++ equival a i
= i+1 ). Ara i
val 1 i es torna a comprovar la condició: si i
és menor que 3, aleshores ejecuta el codi que es troba dins de les {}
i així successivament.
En el moment que els increments de i
facin que i valgui
3, com que ja no es complirà la condició i
< 3, aleshores el cicle s'interromprà i continuarà la
interpretació del codi més enllà de les {}.
En aquet exemple, obtindrem alertes successives dient: passada
0, passada 1,
passada 2 i finalment
Hem sortit del cicle.
Podem utilitzar qualsevol tipus de condició sempre i quan sigui una condició
que tard o d'hora es compleixi. Si no fos així el cicle continuaria començant
altre cop indefinidament i impediria que el programa pogués fer res de
bo, per la qual cosa provablement provocaríem una caiguda del navegador.
L'exemple següent mostra un cicle que posa a valor zero tots els elements d'una array. En aquest cas la condició no defineix un límit concret sino que el límit el fixa la longitut de la pròpia array que estem manipulant. Com que i va variant cada cop, això ens permet assignar zero a una posició diferent de l'array durant cada passada del cicle:
var matriuProves
= new Array(6)
matriuProves[0] = 20
matriuProves[1] = 150
matriuProves[2] = 30
matriuProves[3] = 46
matriuProves[4] = 315
matriuProves[5] = 82
for( i = 0; i < matriuProves.length; i++){
matriuProves[ i ] = 0
}
Dins d'un cicle podem incloure altres estructures com els if() i fer-lo tan complex com es vulgui. De vegades es prefereix abandonar el cicle abans d'hora perquè es compleix la condicó definida en algun if(). Per sortir d'un cicle sobtadament s'utilitza l'expressió break(). En l'exemple següent a cada cicle es va posant a zero cada element de l'array però tot seguit es comprova si l'element correponent al proper cicle valdrà 46. Si se'n troba un que ho valgui, aleshores el cicle és interromput, per tant, aquest cicle s'interrompria inmediatament després de posar a zero matriuProves[2]:
var matriuProves
= new Array(6)
matriuProves[0] = 20
matriuProves[1] = 150
matriuProves[2] = 30
matriuProves[3] = 46
matriuProves[4] = 315
matriuProves[5] = 82
for( i = 0; i < matriuProves.length; i++){
matriuProves[ i ] = 0
if( matriuProves[ i + 1] == 46 ){break()
}
}
//
Comentari
d'una línia. Si escribim la doble barra, tot el que vingui a continuació
escrit a la mateixa línia de codi es considerarà un comentari
i no es tindrà en compte.
/*
*/
Comentari
de múltiples línies. Tot el que estigui escrit entre /*
i */
, es considerarà
un comentari i no es tindrà en compte.
alert("textExplicatiu")
Genera una
finestra amb un text i un botó de confirmació. L'únic paràmetre
que té és el text que volem que es vegi a la finestra. Resulta
molt útil durant la fase de desenvolupament per comprovar si l'ejecució
arriba fins a certes línies de codi o per obtindre el valor d'una variable
en un moment donat.
prompt("textExplicatiu","textPelCampDeText")
Genera una
finestra amb un text, una entrada de text, un botó de cancel.lar i un
de confirmar. Disposa de dos paràmetres: el text que té que aparéixer
escrit a la finestra perquè l'usuari el llegeixi i el text que es vol
que aparegui dins de l'entrada de text.
setTimeout("funcioQueCridarem(
)",20000)
Atura l'ejecució
durant el temps (expressat en milisegons) del segon paràmetre i passat
aquest temps fa la crida a la funció que trobem al primer paràmetre.
Utilitzat per fer animacions o per incorporar retards durant l'ejecució..
GAMPERL, J
i NEFZGER, W. JavaScript.
Marcombo Boixareu Editores. Col.lecció Marcombo Multimedia, núm.
1277. Barcelona. 2000.
Manual
d'iniciació a JavaScript amb exemples d'aplicacions senzilles però
molt útils. Molt recomanable.
BRADENBAUGH,
J . Aplicaciones
JavaScript.
Anaya. Col.lecció Anaya Multimedia. Madrid. 2000.
Exemples
d'aplicacions complexes. Nivell avançat per a desenvolupadors que ja
coneixen JavaScript.
DevEdge
Online - JavaScript Resources
http://devedge.netscape.com/tech/javascript/index.html?content=/tech/javascript/resources.html
Pàgina de
Netscape on podreu trobar tota mena d'adreces d'interès sobre
recursos, tutorials i exemples de JavaScript
JavaScript
Guide
http://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htm
Complert tutorial
de JavaScript elaborat des del propi Netscape
Voodoo's
Instroduction on JavaScript
http://200.25.9.3/enlaces/javascript/index.html
Tutorial
de JavaScript traduït a l'espanyol.
Kazuhiro
Moriyama
http://plaza.harmonix.ne.jp/~jimmeans/
Jocs
programats en JavaScript per Kazuhiro Moriyama. Un autèntic catàl.leg
de possibilitats d'interacció amb aquest llenguatge. És possible
estudiar el codi i fins i tot baixar-los sencers per jugar-hi offline.