En aquest mòdul ja hem vist uns quants elements interessants de JavaScript que permeten efectuar coses que no seria possible fer-ho solament amb HTML. Hem vist que són els events i alguns exemples d'ús, hem après i utilitzat funcions, treball amb formularis i creació de noves finestres.

Ara ho posarem en pràctica.

EXERCICIS:

Els exercicis es classifiquen en dos blocs, l'un d'implementació simple i l'altre d'implementació més complexa dels exemples de les pràctiques, on s'hi troba un apartat opcional.

Per començar modificarem la pàgina index.htm que hi ha dins la carpeta del mòdul 3 per tal que tinguem 4 enllaços amb noms: Exercici 1, Exercici 2, Exercici 3 i Exercici 4.

Cada enllaç apuntarà a una pàgina html diferent que correspondrà a quatre exercicis, un per pàgina. Heu de donar un nom a cadascuna d'aquestes pàgines, es recomana "m3p1_1.htm", "m3p2_2.htm", ... o similar.

Bloc I:

Els tres primers han de correspondre a un exercici, a elegir, dels que es troben dins les pràctiques 1, 2 i 4 respectivament amb alguna variació que faci que no siguin idèntics. Són senzills d'implementar, ja que només cal copiar-los de com estan en les pràctiques i modificar-los lleugerament.


Bloc II:

El quart exercici consta d'una pàgina que contindrà una barreja dels conceptes vistos en les pràctiques 1, 2 i 4 i part de les pràctiques del mòdul anterior.

La seva descripció és la següent:

En obrir-se la pàgina ens ha de mostrar un missatge de benvinguda i en tancar la finestra un missatge de comiat, mitjançant un alert (vegeu el m3p1apartat 1). Aquesta finestra ha de contenir un formulari i un text descriptiu de com s'ha fet. Opcionalment, també contindrà un enllaç per obrir una nova finestra que mostrarà números aleatoris.

El formulari ha de constar de tres camps de text i un botó. Els camps de text 1 i 2 han de convidar a introduir un valor de text o numèric a cadascun d'ells i al fer clic sobre el botó s'ha d'invocar una funció que escrigui un text sobre el camp de text 3 indicant si el contingut dels dos camps 1 i 2 són iguals o diferents. (guieu-vos pel m3p2 ap2 i ap3). Quan els camps 1 o 2 canviïn de valor, s'ha d'esborrar el contingut del camp 3, o sigui, rescriure'l amb ' ' (vegeu m3p1ap1).

Apartat opcional
L'enllaç ha d'invocar a una altra funció que sol·liciti un valor numèric n mitjançant un prompt. S'ha de validar que aquest és numèric (ha de mostrar un missatge d'error amb alert en cas contrari).

Si el valor numèric és correcte, ha d'obrir una finestra filla (el seu contingut no ha d'existir com a tal pàgina html) (vegeu m3p4 ap2) i, dinàmicament, s'ha d'escriure en el seu interior una taula de 10 x 10 cel·les (vegeu m2p1ap2) i cada cel·la ha de contenir un número aleatori entre 0 i n (vegeu m3p1ap4). També ha de contenir un link que serveixi per tancar-la (m3p4 ap4).

Els passos a seguir per fer aquest exercici no. 4 poden ser els següents:

1.- Creem la pàgina mare mitjançant l'editor del Dreamweaver o la llibreta amb la seva estructura mínima, introduïm els events onLoad i onUnload dins la directiva <body...> per crear els missatges de benvinguda i comiat.

2.- Dins el bloc <body> creem el formulari, a mà, amb els tres camps de text i el botó. Creem una nova funció, de nom compara(), que en invocar-la efectuï una comparació del contingut del camp 1 i camp 2 i escrigui 'són iguals' o 'són diferents' dins el camp 3. Associem aquesta funció al controlador d'event onClick del botó.

3.- Afegim al camp 1 i camp 2 un controlador d'event onChange que, quan s'activi, assigni al camp 3 una cadena buida, esborrant el seu contingut.

4.- Creeu una nova funció de nom numsAleatoris(), que en invocar-la sol·liciti un número mitjançant un prompt, comproveu amb isNaN() si el valor introduït és un número. Si no és un número, es mostrarà un missatge d'error amb un alert i acabarà la funció.

5.- Si s'ha introduït un número correctament, s'ha de crear una nova finestra filla, al crear-la, heu d'assignar una variable, de nom finestra, al valor retornat per windows.open(...). Aquesta variable ens servirà per fer les referències posteriors a la finestra filla.

6.- Posteriorment, heu de crear dinàmicament (for...) la taula de 10x10 dins la finestra filla amb el mètode write() referenciat adequadament. Quan hagueu d'escriure el contingut de cada cel·la, l'heu d'obtenir utilitzant adequadament el mètode random() per obtenir el número aleatori entre 0 i n.

7.- Un cop creada la taula dinàmicament, heu d'introduir dins la finestra filla, un link nul que en fer-li clic tanqui la finestra. La funció ha d'acabar amb un return false, per evitar que s'executi el link nul que la invocarà.

8.- Heu de ficar a la pàgina un enllaç nul amb el text "Crear 100 nos. aleatoris" que enl fer-li clic, invoqui a la funció numsAleatoris().

9.- Un cop funcioni adequadament tot l'exercici, introduïu a la pàgina, conjuntament amb el formulari i l'enllaç, una descripció clarificadora de com ho heu fet per al vostre tutor. Doneu-li també, els formats estètics que considereu oportuns.

  Trucs, consells i receptes
La forma d'editar els exercicis és mitjançant el Dreamweaver amb la vista código o mitjançant la llibreta, visualitzant el resultat des del navegador.

L'exercici 4 és més complex. No el vulgueu fer tot de cop i provar-lo al final. Aneu per passos, seguint la seqüència indicada i al final de cada pas comproveu el correcte funcionament.

Guieu-vos amb les referències a les pràctiques indicades per a cada apartat i copieu i enganxeu el tros de codi que us faci falta i modifiqueu-lo adequadament.

Envieu un missatge a la vostra tutoria un cop l'exercici estigui penjat a Internet. Indiqueu sempre l'adreça de forma que s'hi pugui accedir directament.