nota: aquest document és una còpia en format pdf del curs ... · pàgines web dinàmiques sgti :...

Pàgines web dinàmiquesSGTI : Curs D108

Pàgines vives

Interactivitat

Formularis

Animació de capes

Control del temps

Persistència de dades

Reconèixer l'entorn

Autors: Artur Guillamet - Ramon Molins

Octubre de 2006

Nota: Aquest document és una còpia en format Pdf del curs: “DHTML i JavaScript”, creat l'any 2002 en format Web. L'original es troba disponible a:

http://www.xtec.cat/formaciotic/ateneu_historic/materials/td108/nucli/index.htm

http://www.xtec.cat/formaciotic/ateneu_historic/materials/td108/nucli/index.htm

m1 Programar la web

m1p1 Dreamweav er ef icaç

m1p2 Organització del lloc

m1p3 Fulls d'estils amb estil

m1p4 Jav aScript bàsic

m1ex Estructura i portada del curs

m2 Estructures JavaScript

m2p1 Bucles f or

m2p2 Recórrer matrius i objectes

m2p3 Bucles while

m2p4 Condicionals i selectors

m2ex Menús d'enllaços

m3 L'usuari en acció

m3p1 Ev ents i f uncions

m3p2 Entrada de dades

m3p3 Variables i operadors

m3p4 Obre la f inestra

m3ex Comparacions aleatòries

m4 Atenció a la diversitat

m4p1 El model d'objectes (DOM)

m4p2 Detectar el nav egador

m4p3 Af inem el estils

m4p4 Control de l'entorn

m4ex Inf orme del client

m5 El temps al meu costat

m5p1 Rellotges

m5p2 Calendaris

m5p3 Barra de progrés

m5p4 Accions en segon pla

m5ex Temps controlat

m6 L'aspecte visual

m6p1 Imatges i scripts

m6p2 Estils per a capes

m6p3 Animació

m6p4 Menús i persianes

m6ex Ef ectes animats

m7 Interacció i comunicació

m7p1 Ev ents i comportaments

m7p2 Validació

m7p3 La pàgina respon

m7p4 Interacció entre marcs

m7ex Projecte interactiu

m8 Calaix desastre

m8p1 Persistència de dades

m8p2 Passar parámetres

m8p3 Fem aplicacions

m8p4 Reutilitzar el codi

m8ex Pàgines amb memòria

Pàgines web dinàmiques

SGTI : Curs D108

Mòdul: 1

Programar la web

En aquest curs estudiarem tècniques que ens han d'ajudar a millorar la f uncionalitat de lespàgines web i dotar-les d'interactiv itat. Haurem, doncs, de programar.

En principi, això pot espantar qui no ho hagi f et mai, per aquest motiu proposem unaprenentatge suau i assequible. Els conceptes, mètodes i estratègies que planteja el curssón una bona base per començar. I, si ja hem programat abans... tampoc no ensav orrirem.

Comencem aclarint conceptes.

Tu programes?

Un programa és una sèrie d'instruccions. Segur que algun cop hem programat el v ídeo, larentadora, o el microones. També programem aspectes relacionats amb la nostra f eina,activ itats, economia, ... d'alguna manera, tothom programa. Quan donem instruccions a unordinador perquè executi una tasca, podem parlar d'un programa inf ormàtic.

Per comunicar-nos amb l'ordinador hem d'utilitzar un llenguatge que la màquina puguientendre. Si guardem les instruccions en un arxiu, podrem repetir el programa mésv egades sense hav er-les de tornar a escriure. Alguns programes que utilitzem habitualmenttenen molts arxius, organitzats en contenidors (carpetes) que s'estructuren en arbres.

Els programes disseny ats per executar-se en un únic ordinador s'escriuen i es compilen, ésa dir, s'empaqueten, juntament amb totes les instruccions i llibreries per crear unexecutable autònom. Tot el que necessiten per f uncionar és al disc dur, de manera que v anmolt ràpids.

Xarxes, servidors i clients

Una xarxa és un grup d'ordinadors connectats que comparteixen inf ormació i/o recursos.En xarxes locals ben organitzades la velocitat de comunicació és acceptable. En xarxesmés grans i disperses interv enen molts f actors que redueixen aquesta v elocitat.

La solució adoptada, anomenada Client-Servidor, es basa enminimitzar el tràf ic per la xarxa. El serv idor (un programa, no unamàquina) i el client (el nav egador, un altre programa), esreparteixen la f eina. Tots dos han d'estar d'acord en el llenguatgeque utilitzen per donar-se instruccions mútuament i, alhora, sercapaços d'executar les que li env ia l'altre.

Internet és, de moment, una xarxa lenta. El serv idor pot ser ràpid,però pot rebre moltes peticions alhora i això el pot f er anar lent. Entot cas, el client sempre haurà d'esperar que les dades li arribin. LaXarxa és un tub estret i la solució és f er-hi passar poca cosa. Amés, cada cop hi ha més serv eis i usuaris.

Llenguatges de la web

L'objectiu inicial de la web era (encara ho és, amb matisos) posar inf ormació a l'abast de lagent. Les unitats d'inf ormació, les pàgines, només pretenien ser com les d'un diari o unllibre: en contingut i aspecte. Amb el temps i les possibilitats dels multimèdia han pogutev olucionar condicionades, però, a la v elocitat de la tecnologia que les transmet.

HTML és el llenguatge de la web. Descriu els elements que f ormen una pàgina i permetenllaçar amb d'altres documents. Es basa en marques, que anomenem etiquetes (tags, enanglès). Si hem v ist el codi f ont d'una pàgina, sabem que comença amb l'etiqueta <html> iacaba amb </html>. No és un llenguatge de programació. La sev a sintaxi és molt senzilla,el v ocabulari limitadíssim i tots els nav egadors l'interpreten correctament.

CSS (f ulls d'estils) és un complement de HTML que permet tenir més control sobre

l'aspecte i posició dels elements que f ormen la pàgina. Tampoc és un llenguatge deprogramació. Aporta els identificadors, que permeten tractar els contenidors de la pàginacom a objectes indiv iduals, i les classes, que f aciliten l'agrupament d'aquests objectes i lamanipulació de les sev es propietats. Pel que f a a compatibilitat, hi ha un mínim garantit imoltes dif erències a partir d'aquest límit.

JavaScript és un llenguatge que s'utilitza per ampliar les capacitats de HTML i per inserirpetites accions en pàgines web. Permet crear ef ectes especials i aporta interactiv itat. Noés un llenguatge de programació com ho són Jav a o C++, més av iat sembla un llenguatgede macros, com els de Flash o l'Of f ice. El nav egador és l'encarregat d'interpretar iexecutar les instruccions, que v iatgen per la xarxa tal com s'han escrit.. Va néixer i haev olucionat amb Internet, de manera que les dif erències d'interpretació dels div ersosnav egadors i v ersions són notables.

Hi ha d'altres tecnologies que el client pot f er f uncionar. La majoria es basen en petitsprogrames (plug-ins) que s'han de tenir instal·lats. És el cas de Flash o dels applets deJav a. Uns altres llenguatges poden executar f eines al serv idor: Perl, PHP, ASP, ... i unJav aScript per a serv idors. Aquests dos grups, però, no f ormen part dels objectius delcurs.

HTML Dinàmic

La utilització combinada de f ulls d'estils, html i Jav ascript s'anomena HTML dinàmic, oDHTML, tot i que hi ha div ersitat d'opinions sobre l'abast de la def inició. Tots tress'executen a la màquina client, de manera que el seu àmbit d'actuació queda ben clar ... ilimitat.

En aquesta banda de la xarxa (la del client) hi ha, però, molta f eina a f er. Es podenpreparar les pàgines perquè "exprimeixin" els recursos que té el nav egador: millorarl'aspecte, af egir f uncionalitat, automatitzar processos, controlar el f lux, prendre decisions.Quan s'utilitzen com cal aquests recursos, les pàgines semblen... més v iv es.

Per treballar amb DHTML cal conèixer bé els llenguatges i les possibilitats que of ereixen.Els editors de pàgines, com Dreamweav er o Frontpage, poden ajudar molt, però bona partde la f eina s'ha de f er "a mà", escriv int el codi amb un editor de text.

Haurem de preparar un entorn ben estructurat i, si v olem aprof undir i treure-li rendiment,també haurem d'estructurar i ordenar les nostres idees i mètodes de treball. L'estructura il'organització han de ser, doncs, la base i, per aquí començarem.

A punt?

En aquest mòdul:

Pràctica 1: Dreamweaver eficaç

Pràctica 2: Organització del lloc

Pràctica 3: Fulls d'estils amb estil

Pràctica 4: JavaScript bàsic

Exercic is: Estructura i portada del curs


SGTI : Curs D108

Mòdul: 1 Pràctica: 1

Programar la web > Dreamweaver eficaç

Fem aquest curs perquè sabem f er pàgines web i hem utilitzat el Dreamweav er. Si no és

així, abans de començar hauríem de f er una bona repassada dels cursos D72 i D98 sobre

Disseny i Creació de Pàgines Web. Sigui com sigui, donem per certa l'af irmació inicial.

Dreamweav er permet disseny ar pàgines utilitzant un editor v isual. Per sota, genera codi

HTML, css i Jav aScript. Entendre aquest codi és f onamental si es v ol anar més enllà.

Es pot aprendre molt si s'observ a com treballa Dreamweav er, tot i que cal tenir present que

només és un programa i que s'ha d'assegurar la possibilitat de tornar enrera (desf er).

Sov int, genera més codi del que hauríem f et a mà, sobretot, quan crea scripts.

En aquesta pràctica, però, només treballarem sobre HTML. No es tracta

de programar (tot arribarà), sinó d'utilitzar Dreamweav er de la f orma

més ef icaç i, de passada, aconseguir que generi meny s codi, i més

net.

Farem l'esquema d'una pàgina utilitzant tècniques que ens permetin av ançar amb rapidesa.

Més endav ant, aquest disseny ens serv irà de base per aplicar nous conceptes.

Les etiquetes HTML més utilitzades

<head> </head> (cap), <title> </title> (títol), <body> </body> (cos), zones de la pàgina.

<table> </table> Def ineixen l'inici i f i d'una taula.

<tr> </tr> cada f ila d'una taula i <td> </td> cada cel·la indiv idual dins d'una f ila.

<p> </p> Def ineixen un paràgraf .

<b> </b> (negreta), <i> </i> (inclinada), <u> </u> (subratllada), etiquetes de f ormat del text.

<br> (no té parella) Fa un salt de línia.

<font> </font> Tipus de lletra, mida i color del text.

<img src="..."> Posa una imatge.

Algunes d'aquestes etiquetes tenen modif icadors:

width i heigh estableixen l'amplada i l'altura.

color i bgColor def ineixen el color del text i del f ons.

align i valign permeten establir l'alineació horitzontal i v ertical.

1.- Començar amb bon peu

Si encara no ho hem f et, hauríem de crear al nostre disc dur una carpeta on guardarem els

treballs del curs. Més endav ant f arem tota l'estructura de treball de f orma ordenada i

ràpida. De moment, amb això n'hi ha prou. Farem tot el curs dins d'aquesta carpeta.

Prepararem una pàgina amb títol, sense marges i amb una taula..

Obrim el Dreamweaver i fem clic al botó "Mostrar vistas de código ydiseño". Si el nostre monitor ens fa incòmoda aquesta vista, podemalternar entre les dues de les puntes, "código" i "diseño".

Observem que el programa ja ha generat l'estructura de la pàgina. Si la vista de codi no téactivada la numeració de línies, anem al menú Ver - Opciones de vista de Código - Númerosde líneas i l'activem.

Ara anem al menú Modificar - Propiedades de la página i escrivim un títol per al curs, perexemple "Curs d108" o el que vulguem. A continuació posarem tots els marges a 0 d'unapassada. Ens situem al quadre Margen izquierdo, i escrivim:

0 (tabulador) 0 (tabulador) 0 (tabulador) 0 (intro)

Inserim una taula de 2 files, 3 columnes, 770 píxels (resolució del monitor menys 30), rellenocelda: 2, espacio celda: 0 i borde: 0. Observem el codi que ha creat.

2.- La barra d'estat, la finestra de propietats i el teclat

HTML treballa sobre contenidors. Si marquem una zona amb el mouse, Dreamweav er

crearà un contenidor per poder-li assignar les propietats que especif iquem, normalment, un

<div >. En molts casos això no és necessari, perquè els elements ja ocupen tot un

contenidor.

Donarem f ormat a la taula i en f arem una còpia. Tindrem dues taules de la mateixa mida,

l'una sota l'altra, de manera que l'aspecte f inal serà d'una única taula. Ho f em així per

millorar el temps psicològic. Quan es carrega la pàgina des d'Internet, HTML no mostra les

taules f ins que troba l'etiqueta </table>. Seguint aquesta tècnica, la taula superior es v eurà

abans.

1.- Amb el ratolí, seleccionem les dues cel·les de l'esquerra.

2.- Comprovem que la taula <table> queda seleccionada a la barra d'estat i la línia foscaocupa les dues cel·les. Dreamweaver aplica format als elements seleccionats.

3.- A la finestra de propietats, establim l'alineació, la mida i el color de fons. Com que volemque es mantingui la mida (190), seleccionem "No ajustar". Ignorem els botons d'alineació a lapart superior dreta de la finestra de propietats. Els utilitzarem poc o gens.

Després fem clic sobre la paraula <table> a la barra d'estat. Premem Control+C (Copiar), Fin(desmarcar i situar-se darrera) i Control+V (Pegar). Tenim dues taules iguals.

Ens situem a la segona fila de la primera taula, fem clic <tr> a la barra d'estat i premem latecla Suprimir. La primera taula ha quedat amb una única fila. Seleccionem les columnessegona i tercera, i les combinem. Ara té una fila amb dues cel·les.

3.- Taules enniuades

Observ em un moment aquest disseny , perquè f arem una pàgina similar. Donem un cop

d'ull, també, al codi HTML que s'ha generat f ins ara. De moment, l'hauríem d'entendre.

La primera taula serà el cap de pàgina. La f ila inf erior de la segona taula en serà el peu. La

f ila del mig (primera f ila, segona taula) f arà de contenidor dels menús, la zona de contingut

i uns hipotètics enllaços (d'esquerra a dreta). Crearem, doncs, tres taules enniuades.

Seleccionem la cel·la de l'esquerra i la del centre (taula inferior, primera fila). A la finestra depropietats posem alineació horitzontal centrada i vertical superior. Després, ens situem a lacel·la de la dreta i li assignem alineació horitzontal a la dreta, vertical superior, 190 píxelsd'amplada i marquem "No ajustar".

Tornem a la cel·la dels menús (esquerra). Inserim una taula de 8 files, una columna, 186píxels, relleno celda: 1, espacio celda: 1 i borde: 0. Marquem l'última <table> a la barrad'estat i premem Control+C per copiar-la. Després, ens situem a la cel·la que contindrà elslinks (dreta) i premem Control+V per enganxar la taula que hem copiat.

A la cel·la de contingut crearem, de moment, una taula de 2 files, una columna i el 98%

d'amplada, sense borde. En aquesta cel·la no hem marcat "No ajustar", només ho fem a lesque tenen amplada exacta. Més endavant, si cal, podrem esborrar o afegir files.

Donem format a les tres taules. Treballem sempre amb la barra d'estat i la finestra depropietats. Seleccionem grups de cel·les i apliquem format.

Quan acabem, tanquem el Dreamweaver i, quan ens demani si volem desar els canvis,contestem que sí i guardem l'arxiu a la carpeta rel del nostre lloc, amb el nom "index.htm". Jatenim la primera pàgina. A la pràctica següent farem l'estructura.

4.- Codi net

Ja ho hem dit, en aquest curs necessitarem entendre HTML. Dreamweav er, com a editor,

f a exactament el que li manem. Això signif ica que si la nostra tècnica de treball es basav a

en seleccionar amb el ratolí i aplicar f ormat, haurem de f ilar molt prim ... o canv iar de

tècnica.

Fins i tot quan seleccionem, per exemple, un bocí de text per canv iar-li la f ont, mida o

color, és conv enient que ho f em d'una passada. Si no ens queda al nostre gust, el millor és

desf er l'acció i tornar-ho a prov ar.

Quan hem de modif icar una zona amb f ormat establert abans, utilitzarem també la barra

d'estat, seleccionant etiquetes com ara <font>, <b> o <i>. El programa marcarà tot el bloc

i, així, no haurem de patir per si l'encertem o no.

Observ ar el codi amb regularitat és una bona prov a per saber si treballem correctament.

Quan v eiem etiquetes duplicades (<f ont color ...> i, després, <f ont size ...>) o que no hem

demanat (<div > i <span> són les més habituals), és que alguna cosa no v a bé.

Generar codi net f a que les pàgines ocupin meny s i es carreguin més ràpidament. A més, a

més s'entenen millor i és més f àcil modif icar-les o reutilitzar-les.

Un cop hem fet la pràctica, l'hauríem de repetir d'una passada fins que no ens calgui mirarl'explicació. Primer escrivim les mesures i alineacions en un full, o, millor encara, fem unesquema amb anotacions. Podem fer variacions en el disseny.

L'objectiu és saber fer l'esquelet d'una pàgina, net, en menys de cinc minuts.


SGTI : Curs D108


Programar la web > Organització del lloc

Treballem més còmodes i millor quan ho tenim tot a l'abast i sabem on és. Com méscomplex és un projecte, més necessari és tenir un entorn ben estructurat. És com unedif ici: primer els plànols, després l'estructura, els acabats, la decoració, ...

Aquest curs és un edif ici moderadament gran, però d'estructura senzillaque ens v e marcada pels propis mòduls, pràctiques i exercicis. Perf ecte!Per una banda, ens serv irà d'experiència per a f utures realitzacions i, perl'altra, ens f acilitarà la f eina i podrem dedicar el temps a allò que toca,en comptes de perdre'l buscant coses que hauríem de saber on són.

L'estructura de carpetes i subcarpetes serà semblant a la dels materialsdel curs, com és lògic. Si tenim aquests materials al disc dur o al CD,podem usar l'explorador per v eure com s'han organitzat i com s'hananomenat els arxius. Nosaltres f arem el mateix, però amb noms méscurts, perquè no hi escriurem "d108".

L'ús de l'explorador de Windows (o similar) és imprescindible si v olementendre les estructures de carpetes i treballar-hi amb agilitat. Si no hiestem acostumats, hauríem d'aparcar temporalment aquesta pràctica irev isar el curs de Windows.

Elements HTML en aquest capítol

<script> i </script> delimiten un bocí de codi Jav aScript.<a href="..."> </a> Delimiten un enllaç.

Deixem les instruccions Jav aScript, perquè n'hi ha poques i senzilles, per més endav ant.

1.- La pàgina per defecte

Com que v olem crear una estructura buida, i que f uncioni, haurem de tenir una pàgina perdef ecte, d'aquestes "en construcció" o similar. Podem f er-la tan sof isticada com v ulguem.Aquí, però, en proposem una de ben senzilla, només l'adreça de l'arxiu.

Si encara no ho hem f et, hem de crear una drecera a la Llibreta del Windows dins de lacarpeta "Windows \ SendTo", per tenir-la associada al menú del botó dret "Env iar a".

Obrim l'explorador, i ens situem a la carpeta de treball del curs i, a dins, en creem una denov a, anomenada "base". Ens hi situem. És buida. A la zona d'arxius (dreta de l'explorador)f em clic en el botó dret del ratolí i seleccionem "Nou - Document de text". L'anomenem"index.htm". Si el Windows ens av isa que hem canv iat l'extensió, ho ignorem.

A continuació, sobre l'arxiu que acabem de crear, tornem a f er clic en el botó dret iseleccionem "Env iar a - Llibreta". Quan s'obri, escriv im el codi següent, després tanquem iguardem.

<script language="javascript">document.write(location) ;</script>

1.- Indiquem al navegador que comença un script.

2.- Escrivim l'adreça al document.

3.- Tanquem

2.- La carpeta base

És el moment de ref lexionar. Què han de tenir en comú totes les carpetes? Perquè, perestalv iar f eina, si ja ho sabem, ho posarem tot a la carpeta base i, després, la clonaremper crear les altres.

En aquest curs no cal que ens hi trenquem massa el cap, és clar. En projectes méscomplexos, però, hi haurem de dedicar el temps i l'atenció que mereixi cada cas. Un bonplantejament d'aquesta carpeta ens pot estalv iar moltes hores de f eina.

Amb l'explorador, ens situem a la carpeta "base", al quadre d'arxius. Hi ha l'index.htm, quehem creat abans. Fem una nova carpeta per a imatges. Li podem posar "imatges" o "images"o "icons" o ... Si en tots els nostres projectes utilitzem els mateixos noms, ens resultaran méscòmodes (la força dels hàbits és immensa). Aquí hem triat "images".

Parlant d'hàbits, com que construïm per a la web, ens hem d'acostumar a posar els nomsd'arxius i carpetes en minúscules, i curts, fins a 8 caràcters. Aconseguirem la màximacompatibilitat amb tots els sistemes.

3.- Crear l'estructura

Un cop tenim una estructura base, podem copiar-la, enganxar-la, reanomenar-la, i entindrem dues. Si ho anem repetint, en tindrem les que v ulguem.

Aquesta tècnica de copiar i enganxar la utilitzarem molt. Conv é, des d'ara mateix, que ensacostumem a f er-ho amb el teclat. És molt més ràpid:

Control + X = Tallar Control + C = Copiar Control + V = Enganxar

De v egades, l'estructura que en resulta pot ser, al seu torn, la base, o una de les bases,per f er-ne una altra de més complicada. Això, com v eurem durant el curs, es pot aplicar enmolts camps. Amb el temps, podem tenir biblioteques d'estructures, scripts, plantilles,recursos, ... que ens f acilitaran la f eina de disseny ar llocs web.

Situats a la rel del nostre lloc, marquem la carpeta base al quadre d'arxius (dreta) del'explorador i la copiem. La desmarquem i, amb el botó dret del ratolí sobre una zona buida,l'enganxem 10 vegades.

Reanomenem les còpies "m1", ..., "m8", "projecte" i "proves". Estructura acabada. Cadacarpeta, còpia de "base", té a dins una pàgina i la carpeta d'imatges. Comprovem-ho.

4.- Enllaçar les pàgines

Ara hem d'aconseguir que f uncioni. La pàgina principal, encara buida, ha d'enllaçar ambtotes les altres. L'editem amb el Dreamweav er i li af egim contingut. De moment, no ensf ixem en el f ormat. Això ho tractarem a la pràctica següent.

Editem la pàgina d'entrada, "index.htm" amb el Dreamweaver. Abans de modificar-la, definimel lloc a la finestra "Sitio".

A continuació ens situem a la primera cel·la de la taula destinada als menús, escrivim "Menú1", marquem l'últim <td> a la barra d'estat i fem clic sobre la icona de carpeta de "Vinculo",a la finestra de propietats. Seleccionem l'arxiu "index.htm" de la carpeta "m1".

Amb el <td> encara marcat, premem Control+C (copiar), ens situem a la cel·la de sota, lamarquem a la barra d'estat i premem Control+V (Pegar). Ara ens posem a la tercera cel·la, lamarquem i tornem a prémer Control+V. Ho repetim en totes les cel·les.

Només ens queda canviar els títols i enllaços dels mòduls 2 a 8. Provem de fer-ho a la "Vistade código" del Dreamweaver. Ens familiaritzarem més amb el llenguatge i és més ràpid queno pas fer-ho amb l'editor.

5.- Prova pilot

Si tot ha sortit com cal, la nostra pàgina d'entrada enllaça amb tots els "index.htm" de lescarpetes. Deixem l'enllaç amb el projecte per a l'exercici d'aquest mòdul.

Podem f er una prov a per v eure com la pàgina d'entrada carrega els mòduls. Com que els

hem f et amb Jav ascript, cada un mostra l'adreça de la pàgina. Naturalment, ho hem deprov ar amb div ersos nav egadors.

Si tenim la intenció de guardar l'estructura per poder-la reutilitzar, ara és un bon moment.Podem comprimir la carpeta amb el Winzip i guardar-la. Anomenem l'arxiu, per exemple,"curs8mod.zip" i així sabrem que es ref ereix a un curs de 8 mòduls.

També podem esperar, perquè, a la pràctica següent, li aplicarem estils.


SGTI : Curs D108


Programar la web > Fulls d'estils amb estil

HTML té greus limitacions a l'hora d'aplicar el f ormat a una pàgina. La sev a estructura

seqüencial obliga a f ormatar elements indiv iduals, i no es poden tractar en bloc. Es v a

disseny ar en entorns científ ics i acadèmics, on importav a molt el contingut i poc la f orma.

Els f ulls d'estils CSS han solucionat aquest problema, i aporten quelcom més:

- Podem aplicar f ormat a un lloc, una pàgina, elements concrets o una única etiqueta.

- Permeten tenir maquetacions dif erents per a la pantalla i la impressora.

- Tenen moltes més possibilitats i apliquen el f ormat d'una manera més f ina, més exacta.

Els nav egadors entenen CSS a partir de la v ersió 4 (Internet Explorer, a partir de la 3, amb

limitacions), però no tot ho entenen igual. Per això, s'han de manejar amb cura i reserv es, o

hi pot hav er usuaris que no v egin el f ormat ... o la pàgina.

En general, els nav egadors actuals mostren; totes les propietats que def inim als estils, si

ho f em bé, respectarà l'herència al peu de la lletra. Netscape 4.7, en canv i, és tota una

av entura, perquè no sabrem si alguna cosa f unciona f ins que no ho prov em. Cal, doncs,

f er moltes prov es per tal d'assegurar que tothom v eurà, més o meny s bé, els nostres

disseny s.

Elements CSS en aquest capítol

font-family : estableix l'ordre de prioritats en l'ús de f onts per a un element.

color : color del text. Pot usar v alors hexadecimals (#FFFFFF) o literals (white).

text-decoration: decoració del text: res, subratllat, intermitent, ...

font-size: mida de la lletra. Es pot especif icar en div erses unitats.

width: def ineix l'amplada que ocuparà un element.

background-color: especif ica el color de f ons.

1.- Jerarquia

HTML i CSS són sistemes basats en una jerarquia. Això v ol dir que uns elements en

contenen uns altres que, al seu torn, en contenen d'altres. No és estrany , els sistemes

jeràrquics són abundants, en aquest entorn, només cal que ens f ixem en com s'estructura

un lloc web, una xarxa o el nostre disc dur.

La jerarquia v a de contenidor a contingut, de general a concret. L'element més alt de

l'escala és el cos del document (body ), i a partir d'aquí, v an deriv ant els altres. Les

característiques s'hereten. Això té molts av antatges, i algun inconv enient.

Triar una bona manera de def inir els estils és important perquè pot condicionar les f ases

posteriors del disseny i, si prenem una decisió equiv ocada, podem hipotecar possibilitats

que, d'una altra manera, tindríem a l'abast.

Si redef inim una etiqueta HTML, - per exemple "table", un contenidor en la part alta de la

jerarquia -, ens v eurem limitats per dues bandes: quan v ulguem tenir una v ersió dif erent

d'aquest contenidor i quan intentem aplicar f ormat als elements que conté.

La solució, normalment, passa per def inir pocs estils i f er-ho de manera que als més

generals els apliquem opcions generals. Per exemple podem def inir la f ont al <body >, les

mesures als estils personalitzats i aplicar colors directament amb HTML.

Amb la jerarquia comencen les incompatibilitats. Mentre Explorer i Mozilla la respecten

f idelment, Netscape 4.7 no ho f a, o ho f a parcialment i en segons quines v ersions. No

accepta, per exemple, la def inició d'una f ont per al cos, de manera que l'haurem d'assignar

a totes les classes, una per una.

Obrim la pàgina d'entrada ("index.htm" de la rel) amb el Dreamweaver i anem al menú"Texto - Estilos CSS - Editar hoja de estilos..." o, més ràpid, premem Control+Majús+E.

Marquem "Redefinir etiqueta HTML", "Sóloeste documento" i seleccionem body. Liapliquem només el tipus de lletra iacceptem. A continuació redefiniml'etiqueta a (els enllaços). Aquí triem colors(lletra i/o fons) i decoració.

Passem als estils personalitzats, pocs. Enaquest cas en farem quatre: .titol, .menu,.normal i .lnk. No utilitzem la paraula"link" perquè és reservada ni "enllaç"perquè té una "ç". En alguns sistemes podrien funcionar, en altres donarien problemes.

Què definim en aquests estils? Poc, bàsicament la mida de la lletra. També la font, si ha deser diferent de la general definida per al cos. El nombre ideal de fonts és d'una o dues en totel lloc web, tot i que, en alguns casos, se'n poden necessitar més.

Utilitzem les fonts que proporciona Dreamweaver, per exemple, Arial per a fonts grans imitjanes i Verdana per a les petites. Establim les mesures en píxels: no més de 20 ni menysde 10, de manera que siguin llegibles sense arribar a molestar.

Evidentment, com s'ha dit abans, si volem que Netscape 4.7 mostri un estil personal amb unafont determinada, li ho hem de dir, perquè no heretarà pas la que hem definit al body.

2.- Comportament dels enllaços

Hem redef init els enllaços. Amb això n'hi hauria prou per a l'antic nav egador de Netscape,

però els nav egadors actuals tenen més possibilitats, i les v olem aprof itar. A més, potser

ens interessa que algunes zones (per exemple, els menús) tinguin un aspecte o

comportament dif erents.

Dreamweav er no f acilita la def inició d'aspecte per als enllaços dels estils personalitzats,

però tampoc ho prohibeix. Només cal saber com es f a.

El següent pas serà "Usar selector CSS". Triem a:hover i definim colors i/o decoració. Comque al pas anterior havíem redefinit els enllaços (a) en lloc d'usar el selector (a:link), ens hemestalviat dues definicions. Si ho volem, però, també podem definir els a:active i a:visited,tot i que no és imprescindible.

A l'hora de definir enllaços especials, tornem a "Usar selector CSS" i, en lloc de triar, escrivim.menu a per tal d'establir l'aspecte dels enllaços dels menús. Utilitzarem un petit truc que,com passa sovint, només funciona amb l'Explorer. Es tracta d'aconseguir que l'enllaç ocupitota la cel·la. Per això, ens dirigim a la secció "Cuadro" i establim un "Ancho" del 100%.

Finalment, definim .menu a:hover i li assignem colors de lletra i fons que contrastin ambl'estat normal dels menús. Tindrem un aspecte similar als menús de Windows.

Un cop acabada la definició d'estils, els revisem des de la "Vista de código" per entendre comho ha fet el Dreamweaver i quina codificació ha utilitzat. Normalment, ho haurà situat a lasecció <head> del document:

<style type="text/css"></style>

3.- Aplicar estils a contenidors

Els estils s'apliquen a les etiquetes, als contenidors, com f èiem al f ormat HTML (pràctica

1), de manera que haurem d'actuar igual. Treballarem, doncs, amb la barra d'estat.

Es tracta d'aplicar estils amb el mínim de passos possibles, i aconseguir que Dreamweav er

no ens f aci cap contenidor nou no desitjat. Utilitzarem la f inestra d'estils CSS.

Podem, com s'ha v ist en pràctiques anteriors, seleccionar grups de cel·les amb el ratolí o

marcar directament les etiquetes a la barra d'estat. En qualsev ol cas, les cel·les són els

únics contenidors on aplicarem estils en aquesta pràctica.

Com que ja tenim la base suf icient per treballar així, l'explicació d'aquesta tasca es queda

intencionadament curta.

Obrim la finestra d'estils. Marquem la zona on volem aplicarun estil i el seleccionem de la llista. Un cop hem establertels estils a tota la pàgina, tanquem la finestra i comprovemque funcionen amb tots dos navegadors.

4.- Estils segons el medi

L'etiqueta de def inició d'estils permet altres modif icadors que Dreamweav er no contempla.

Un dels més interessants és aquell que ens permet establir un conjunt d'estils per a un

medi específ ic. Es tracta del modif icador media:

<sty le ty pe="text/css" media="screen"">

Com a v alors, podem posar-hi: all (tots, predeterminat), screen (pantalla), print

(impressora), tv (endev ina-ho), projection (projector), handheld (ordinadors de butxaca),

braille (dispositiu tàctil), aural (sintetitzador de v eu), tty (teletip) ... En properes v ersions,

la llista es pot ampliar.

Sov int, el disseny d'una pàgina és per ser v isualitzat en pantalla, i resulta horrorosa quan

s'imprimeix o, senzillament, no es v eu. Imaginem una pàgina amb lletra blanca i amb una

imatge f osca de f ons. Quan s'intenta imprimir amb un nav egador que té la impressió de

f ons desactiv ada, no es v eu res. Una bona opció és preparar dos f ulls d'estils en arxius

independents i enllaçar-los a la capçalera del document:

<link rel="sty lesheet" href ="pantalla.css" media="screen" ty pe="text/css">

<link rel="sty lesheet" href =".impre.css" media="print" ty pe="text/css">

Amb aquesta tècnica podem assegurar la presentació en pantalla i la impressió, de manera

que es v egi perf ectament en tots dos medis. De passada, si enllacem els mateixos arxius

en totes les pàgines del nostre lloc (en aquest curs ho hem f et així), tindrem el

manteniment més f àcil perquè, quan v ulguem f er modif icacions d'aspecte, només haurem

de rev isar dos arxius.

SGTI : Curs D108


Programar la web > JavaScript bàsic

En aquesta pràctica iniciarem els primers passos amb Jav aScript. A dif erència de les tres

anteriors, que tenien com a objectiu preparar l'espai de treball que utilitzarem durant tot el

curs, aquí començarem a v eure els codis Jav aScript més senzills.

Farem el primer script analitzat detalladament i v eurem les dif erents f ormes d'introduir codi

Jav aScript dins la pàgina HTML.

També estudiarem com podem interactuar amb el programa, mitjançant senzills exemples

per introduir dades i obtenir els resultats.

Aquests són exemples bàsics que es tornaran a utilitzar al llarg de tot el curs f ormant part

d'altres conceptes més av ançats.

Elements JavaScript en aquest capítol.

Mètode document.write() : Introdueix un text en el document actiu.

Mètode document.writeln() : Introdueix un text i un salt de línia en el document actiu.

Mètode prompt() : Mostra un quadre de diàleg que f a una consulta a l'usuari.

Mètode alert() : Mostra un missatge d'alerta a l'usuari.

Declaració var : Declara una v ariable.

1.- El meu primer programa en JavaScript.

El codi Jav aScript s'inclou entre les directiv es:

<script language="Jav aScript">

.....

</script>

El codi que es trobi dins aquestes directiv es s'executarà en el moment que la càrrega de la

pàgina llegeixi el seu contingut.

Observ eu el paràmetre language="Jav aScript". Això indica al nav egador que el codi

correspon a Jav aScript. Si f os conv enient, també podríem indicar la v ersió implementada,

per exemple: "... Jav aScript1.2", "... Jav aScript1.3", etc.

Hi ha d'altres llenguatges de programació que es poden indicar en aquest mateix paràmetre,

per exemple "VBScript". Aquest és el llenguatge de programació implementat per Microsof t i

deriv at del Visual Basic. Solament és reconegut pel nav egador Internet Explorer i en aquest

curs no l'estudiarem.

Les directiv es <script> ... </script> s'han d'incloure dins la secció de capçalera <head> i/o

la secció de cos <body> de la pàgina HTML.

A continuació, crearem una pàgina HTML que en el procés de càrrega executarà una

instrucció en Jav aScript que escriurà "Hola, món". Podeu utilitzar el Dreamweav er, amb la

"Vista Código" o la llibreta per crear la pàgina d'exemple. El codi és el següent:

<html><head></head><body> <script language="JavaScript">  </script></body></html>

Quan es carrega aquesta pàgina en el nav egador s'executa el codi que es troba entre

<script> i </script>, la sev a f unció és molt simple: escriure en el cos del document la f rase

"Hola, món". D'aquesta tasca s'encarrega el mètode writeln() de l'objecte document ( En

mòduls posteriors, aquest objecte l'estudiarem amb més detall).

Situat dins els parèntesi de writeln() es troba la f rase que v olem escriure a la pàgina web.

Aquesta és una cadena de text i per tant es troba situada entre cometes ( " ). Observ eu

com les paraules document i writeln() es troben unides mitjançant un punt.

En l'argot inf ormàtic s'entén per cadena un conjunt de caràcters alf anumèrics, habitualment

inclosos entre cometes, és a dir, un text. Per tant, no és un v alor que pugui ser av aluable

numèricament. També s'anomena amb el seu nom equiv alent String.

També es pot observ ar com el codi ha estat introduït entre els símbols  que

corresponen als elements delimitadors dels comentaris en HTML, això es f a d'aquesta

f orma per ev itar que els nav egadors de v ersions antigues, o actualitzats amb Jav aScript

desactiv at per l'usuari, no detectin aquest codi ja que no el podrien interpretar.

Ara bé, utilitzant els nav egadors actualitzats no hi ha cap inconv enient en no utilitzar els

símbols delimitadors de comentari, ja que els nav egadors moderns interpreten correctament

el codi Jav aScript i rares v egades l'usuari desactiv a aquesta opció. De f et, al llarg del

curs, trobarem molts exemples que ja no contenen els delimitadors de comentari HTML al

v oltant del codi Jav aScript.

Dav ant de --> hi ha situades dues barres ( // ). Aquestes dues barres corresponen als

comentaris de Jav aScript. Tot el que es trobi a continuació de les dues barres f ins el f inal

de la línia serà considerat com un comentari. En aquest cas, són utilitzades per ev itar que

Jav aScript interpreti erròniament el f inalitzador de comentari HTML (-->).

També podem indicar comentaris Jav aScript de més d'una línia situant-los entre els símbols

/* .... */. Aquest tipus de comentaris són els originals de C.

La línia document.writeln(....); està f inalitzada amb un punt i coma ; . Aquest element

serv eix per indicar el f inal d'una instrucció Jav aScript, però, no és imprescindible si al f inal

de la instrucció hi ha un salt de línia, com en l'exemple. En cas de tenir més d'una

instrucció en la mateixa línia, és imprescindible el ; per separar-les.

Al llarg del curs trobarem codis Jav aScript que contenen el ; i d'altres que no. No té massa

importància, ja que és opcional si solament hi ha una instrucció per línia. Ara bé, trobarem

molts altres codis que sempre el contenen, el motiu és per analogia amb altres llenguatges

de programació com el C, Jav a, etc. en els quals és obligatori sempre la utilització del ; .

2.- Interacció amb l'usuari.

Un dels principals objectius de Jav aScript utilitzat dins una pàgina HTML és interaccionar

amb l'usuari. Això implica rebre una inf ormació, processar-la i posteriorment mostrar els

resultats.

Hi ha moltes f ormes d'introduir i mostrar la inf ormació que es v eurà al llarg del curs, a

continuació v eurem les f ormes més elementals mitjançant quadres de diàleg.

Introducció d'informació

per introduir una dada podem utilitzar el mètode: prompt(). Aquest mètode obre un quadre

de diàleg que ens f a una consulta. La sev a sintaxi és:

prompt("Missatge inf ormatiu", "Resposta per def ecte");

Si la inv oquem segons el següent exemple:

resposta = prompt("Com et dius?", "Introdueix el teu nom");

ens mostrarà un quadre de diàleg com el següent:

Després de prémer sobre "Aceptar", el v alor introduït al quadre de diàleg quedarà assignat a

la v ariable resposta com una cadena de caràcters.

Una altra f orma d'introduir inf ormació és mitjançant el mètode confirm(). La sev a utilització

detallada la podeu v eure al mòdul 2 pràctica 4.

Mostra de resultats

Si el que desitgem és treure inf ormació per a l'usuari, es pot utilitzar el mètode alert(). La

sev a sintaxi és la següent:

alert(missatge);

Per exemple podem inv ocar-la de les següents f ormes:

alert("Bon dia!");

alert(23);

alert("Aquest és\nun text\namb salts\nde línia.");

alert(8*2/3);

es v euran unes f inestres de diàleg com les següents:

Observ eu com en la tercera f orma, la que conté un text amb salts de línia, es prov oca el

salt de línia introduint \n, en els llocs apropiats entre mig de la f rase. Si es v ol mostrar una

f rase ho f em indicant-la entre cometes " ", en canv i, si es v ol mostrar un v alor numèric o

el resultat numèric d'una operació aritmètica no s'ha de posar entre cometes " " .

També es pot treure inf ormació directament a sobre de la pàgina HTML que conté el codi

mitjançant els mètodes d'escriptura de l'objecte document.

Els més habituals són les següents (s'ha utilitzat writeln() a l'exemple de l'apartat 1):

document.write() --> Escriu text i codi HTML en el document.

document.writeln() --> Escriu text i codi HTML, més un salt de línia, en el document.

El següent exemple mostra com podem produir un diàleg interactiu amb l'usuari mitjançant

quadres de diàleg.

<html><head></head><body><script language="JavaScript"> </script></body></html>

En aquest codi es declara inicialment una v ariable de nom resposta.

v ar resposta;

Seguidament s'inv oca el mètode prompt() amb dos paràmetres, el primer és la pregunta

que es mostrarà en el quadre de diàleg ("Com et dius") i el segon paràmetre ("Introdueix el

teu nom") representa la resposta per def ecte.

resposta = prompt("Com et dius?", "Introdueix el teu nom");

L'usuari té l'opció de f er clic sobre dos botons: "Aceptar" i "Cancelar". El primer botó env ia

com a retorn d'aquest mètode el v alor que es troba dins el quadre de text i el segon botó

env ia el v alor "null", tant en un cas com en l'altre, el v alor retornat s'assigna a la v ariable

resposta.

Finalment, la línia:

alert("Hola " + resposta);

mostra un missatge d'alerta que conté el text f ormat per la cadena "Hola " concatenat ( + )

amb el contingut de la v ariable resposta.

3.- JavaScript dins un link.

Una altra f orma d'inv ocar l'execució d'instruccions Jav aScript és mitjançant un link. En

aquest cas el codi pot estar inclòs dins el paràmetre href. En el següent exemple v eiem

com s'inv oca l'execució del mètode alert() cada cop que es f a clic sobre l'enllaç.

Observ eu com el link comença per : 'jav ascript : ....' . Aquesta paraula indica que a

continuació no hi ha un hiperenllaç normal, sinó, un codi Jav aScript que s'ha d'executar.

Molts nav egadors interpreten correctament el codi Jav aScript sense aquesta paraula, per

tant, en moltes ocasions ja no s'utilitza i es posa el codi directament.

Aquesta f orma d'executar codi Jav aScript també es pot utilitzar per inv ocar f uncions

d'usuari més complexes.

<html><head></head><body> <a href='javascript:alert("Hola, món");'>Clica'm a sobre</a></body></html>


SGTI : Curs D108

Mòdul: 1

Programar la web > Estructura i portada del curs

En aquest mòdul hem v ist de quina manera podem organitzar un lloc, f er que f uncioni apartir d'una pàgina d'entrada i aplicar-li f ormat amb f ulls d'estils. Tot això de f orma ràpida,neta i organitzada. Com a exercici, f arem la rev isió i ampliació de la pàgina d'entrada,posarem els estils en un arxiu independent i ho env iarem a la nostra carpeta al serv idor.

Exercici

El primer pas serà separar els estils de la pàgina principal, de manera que els puguemenllaçar des de tot el lloc i, si cal, canv iar l'aparença de totes les pàgines de cop. Una deles maneres més ràpides per f er-ho és:

Amb l'Explorador, ens situem sobre la pàgina d'entrada "index.htm", premem el botódret i triem "Env iar a - Llibreta". Marquem tot el bloc d'estils (entre <sty le ...> i</sty le>) i premem Control+X (Cortar). Tanquem l'arxiu i guardem els canv is.

1.

Fem un nou arxiu i l'anomenem "pantalla.css". L'obrim i premem Control+V (Pegar).Eliminem les dues línies HTML del principi i del f inal. Deixem només les línies quecontenen la def inició d'estils. Tanquem i guardem.

2.

Obrim "index.htm" amb el Dreamweav er, anem al menú "Texto - Estilos CSS -

Adjuntar hoja de estilos..." i seleccionem la que acabem de crear.3.

La pàgina torna a tenir els estils, ara en un arxiu independent. Aprof item que la tenim obertaper af egir-hi contingut, enllaços, capçalera, peu, el nostre correu, ... i un enllaç cap alprojecte, que l'hav íem oblidat. Mireu com ho ha f et en Bill.

A la zona de contingut podem posar el text i lesimatges que v ulguem, per exemple: sobrenosaltres i les nostres motiv acions per f eraquest curs (original, oi?). A la zona d'enllaços,els dels materials del curs i les adrecesrelacionades, les nostres pàgines a internet, ...

Com a capçalera i peu, per exemple: el títol delcurs i la nostra adreça de correu. És un boncostum af egir-hi també un enllaç a l'adreça quetenim a Internet. Així, si algú mira la pàgina descarregada en local, sempre podrà accedir ala v ersió actualitzada de la xarxa.

Un cop realitzada la f eina hem de crear el nostre lloc a Internet (última pràctica del primermòdul del curs d98), i transf erir-hi l'estructura i el contingut del lloc local i, si v olem, lescarpetes "base" i "prov es".

Recomanacions

Hem de rev isar el codi per tal que no hi restin instruccions de f ormat innecessàries, perquèés això, precisament, el que es v alorarà.

És ev ident que el model exposat en aquest mòdul és només un exemple. Podem f er eldisseny que més ens agradi. El més important és seguir el mètode.

Env ieu un missatge a la v ostra tutoria un cop la web estigui penjada a Internet. Indiqueusempre l'adreça de f orma que s'hi pugui accedir directament.


SGTI : Curs D108

Mòdul: 2

Estructures JavaScript

A partir d'aquest mòdul, comencem a programar. Això v ol dir que l'editor, Dreamweav er oqualsev ol altre, no ens podrà ajudar. I, encara que ho pogués f er, no seria conv enient,perquè intentem aprendre un llenguatge, i l'hem de "xerrar" (amb una màquina!!!). Tot i això,si utilitzem Dreamweav er tindrem una eina v aluosa. En parlarem més endav ant.

Tal com hem v ist, Jav aScript executa instruccions sobre unesdades. Si li diem "escriu" també li hem de dir què v olem escriure, osi li diem "f es-ho x v egades", hem d'especif icar el v alor de x il'acció que ha de f er cada v egada. Aquesta acció, al seu torn, hauràd'actuar sobre unes altres dades i, potser, executar altres accions.Tornem a ser dav ant d'una estructura.

Hi ha dades que tenen una utilitat immediata i s'escriuenassociades a una instrucció, per exemple, alert("Hola món"). D'altres, però, s'han de guardarper tal de poder-les reutilitzar, o perquè serv eixen per controlar el f lux del programa.Aquestes s'assignen a variables.

L'autèntica potència d'un llenguatge resideix en les instruccions que permeten repetiroperacions, o desv iar el f lux del programa, en f unció dels v alors guardats en v ariables. Enaquest mòdul aprendrem què f an i com s'utilitzen.

Potser, si no hem programat mai, ens resulti dif ícil d'assimilar, en principi. Com engegar uncotxe per primera v egada costa amunt : molta f orça, poca v elocitat. Després, però,posarem les altres marxes i tot serà dif erent. Cal que coneguem els conceptes i elementsdel llenguatge d'aquest mòdul, ja que són bàsics i els tornarem a v eure moltes v egadesdurant el curs.

Bucles

Un bucle és una f eina que es repeteix mentre es compleixi una condició. El dia, l'any , lesnostres rutines, el mateix sistema de numeració, són bucles. Qualsev ol tasca que s'hagid'executar repetidament és un bucle.

Les pàgines web també tenen estructures repetitiv es. Per exemple, la nostra pàginaprincipal té enllaços cap a tots el mòduls. Si diem "Fer els enllaços des del mòdul 1 f ins al8" ho entenem perf ectament. Al disseny , però, hem escrit v uit v egades les instruccionsper crear f iles, cel·les i enllaços. És ev ident que es pot millorar.

Condicionals

"Si et portes bé, tindràs un regalet. Si no, carbó.". Estem acostumats a les condicions. Estracta de f er una comparació: si el resultat és cert, s'actua en un sentit i, si és f als, en unaltre. "O blanc, o negre", diem, i hem de prendre una decisió.

Amb els condicionals atorguem a les pàgines la capacitat de decidir i, en conseqüència,d'adaptar-se a l'entorn i les circumstàncies. La web es torna més intel·ligent i autònoma.

Selectors

Un selector és una estructura condicional en què hi ha div erses possibilitats. No sempre ésblanc o negre, de v egades tenim tonalitats de gris o colors. De f et, els condicionals de quèparlàv em abans no són més que selectors duals.

Jav aScript utilitza els selectors per dirigir el f lux de la pàgina en div erses direccions a partirdel v alor que conté una v ariable. Si, per exemple, hem f et una web en div ersos idiomes,podem utilitzar un selector per encaminar l'usuari cap a l'opció escollida.

En aquest mòdul:

Pràctica 1: Bucles for

Pràctica 2: Recórrer matrius i objectes

Pràctica 3: Bucles while

Pràctica 4: Condicionals i selectors

Exercic is: Menús d'enllaços

Per fer les pràctiques, obrim el Dreamweaver i ens situem a la "Vista de código", al mig de lasecció <body> que, normalment, és a la línia 8. Allí hem d'inserir el codi dels exercicis. Si notenim activada la numeració de línies, anem al menú Ver - Opciones de vista de Código -Números de líneas i l'activem.

SGTI : Curs D108


Estructures JavaScript > Bucles for

En el disseny de pàgines sov int hem de repetir la mateixa estructura moltes v egades, amb

lleugeres v ariacions de contingut o f ormat. Copiem el bocí que ens interessa i l'enganxem

en un altre lloc o, si v olem repetir l'estructura en pàgines dif erents, utilitzem plantilles.

Els bucles permeten escriure f ragments de codi només un cop i repetir-los mentre es

compleixi una condició, tot inserint-hi elements v ariables. Són al nucli de tots els

llenguatges de programació i constitueixen una eina molt poderosa. En aquesta pràctica

proposem quatre exercicis per entendre els bucles for, un dels recursos més usats en

Jav aScript.

Al primer mòdul ja v am tenir la primera experiència amb el llenguatge i, si hem arribat f ins

aquí sense errades, ens podem sentir af ortunats. Escriure codi és, bàsicament, cometre

errades. Bé, potser no cal exagerar, però, per si un cas, en acabar aquesta pràctica hi ha

uns consells útils. (Si no podeu esperar, f eu clic aquí)

Conceptes JavaScript en aquest capítol

Declaració for() : determina quantes v egades s'han de repetir les instruccions.

Declaració var : declara una v ariable i li assigna un v alor.

Declaració if() : condicional que av alua si una expressió o comparació és certa.

Mètodes document.write() , document.writeln() : escriuen a la pàgina.

Assignació = : estableix el v alor d'una v ariable.

Comparacions == , < , >= :igual, menor que, major o igual que.

Operacions ++ , + , - , * , % : increment, suma, resta, multiplicació i residu de la div isió.

Fixeu-v os: utilitzem "=" per assignar i "==" per comparar. Conf ondre-les pot resultar f atal.

1.- Comptar fins a 100

Els bucles for es basen en una variable numèrica que f a d'índex. Comença per un v alor,

estableix una condició per mantenir-se f uncionant i def ineix una operació per assignar nous

v alors a la v ariable. Comptar f ins a 100, seria, en el nostre llenguatge:

- Començar per 1 i, mentre el número sigui menor que 101, incrementar un.

La declaració del bucle for té tres elements, entre parèntesi i separats per punt i coma:

- Inicialització de la v ariable i assignació del primer v alor: var i=1

- Condició per mantenir-se dins del bucle: i<101

- Incrementar un: i++

La declaració queda, doncs: for ( var i=1 ; i<101 ; i++ )

En cada v olta s'executen les instruccions que hi ha entre les claus { }. Normalment, aquest

bocí del codi s'escriu tabulat (més a la dreta) per tal de f acilitar la lectura. Aquest és un

hàbit que cal adquirir. En estructures més complexes o scripts més llargs, resulta

imprescindible.

En el cas que ens ocupa, el que f em és, senzillament, escriure a la pàgina el v alor que té la

v ariable, seguit d'un espai en blanc: document.write( i + ' ' )

<script language="javascript">



</script>

2.- Donar format

L'exemple anterior f a el que v olíem, però el resultat és lineal. Cal donar f ormat. Per això,

inserim el codi Jav aScript dins d'una taula. La f arem amb "borde", alineada al centre. Els

números s'escriuran en cel·les, alineats a la dreta, i cada 10, començarà una nov a f ila.

Utilitzem l'operador %, que dóna com a resultat el mòdul (residu) de la div isió, per saber

quan hem de començar i acabar la f ila (obrir i tancar <td>): si el mòdul de div idir l'índex per

10 és 1, obrim la f ila, i si és 0, la tanquem.

La f unció if executa el codi que s'escriu a continuació si és v eritat l'expressió que av alua.

Si i%10 és 1, escriu un <tr>. document és la representació interna de la pàgina - un objecte

- que maneja el nav egador i write és el mètode per escriure-hi. Així, doncs:

- quan escriv im if ( i%10==1 ) document.write( '<tr>')

- estem dient: si el residu de dividir per 10 és 1 escriu a la pàgina "<tr>"

A la línia central del bucle, que s'executarà en totes les passades, utilitzem els dos tipus de

cometes. Les simples (apòstrof ) delimiten el text que s'env ia al document. Les dobles

f ormen part d'aquest text, que no és més que llenguatge HTML. La v ariable ( i ),

ev identment, queda f ora de qualsev ol tipus de cometes.

<table border="1" cellspacing="0" align="center">




</script>

</table>

3.- Ordre Invers, només parells, deu a cada fila

Un bucle també pot anar decreixent, i no cal que ho f aci d'un en un. El tercer element de la

declaració pot ser qualsev ol operació v àlida, en aquest cas, restar-ne dos: i = i - 2

Mantindrem el bucle mentre sigui més gran o igual que 0. Hem d'ajustar les condicions

d'inici i f i de cada f ila. Tornem a utilitzar l'operador mòdul, %, ara div idint per v int.

Comencem pel 98. El primer residu és, doncs,18, i l'últim, 0. Aquest cop, a més, pintem les

cel·les.

for(), if(), write(), ... tenen f orma de f unció (v eurem les f uncions més endav ant).

Pràcticament totes les accions en Jav aScript utilitzen aquest f ormat: instrucció seguida de

parèntesis i, a dins, els arguments, o paràmetres, sobre els quals s'executa l'acció.

Aquests arguments poden ser v ariables, codi HTML, altres f uncions, ...





</script>

</table>

4.- Bucles enniuats: les taules de multiplicar

Podem f er un bucle dins d'un altre, cadascun amb la sev a v ariable-índex. D'aquesta

manera, en cada v olta del bucle exterior s'executa tot el bucle interior.

El nostre sistema de numeració es basa en bucles enniuats. Penseu en un comptador, per

exemple, el de la llum. Les xif res de les unitats són el bucle més interior. Giren i, després

del 9, f an saltar la xif ra de les desenes (bucle extern al de les unitats), i tornen a començar

per 0. El mateix passa entre desenes i centenes. Imagineu f ins on pot arribar el niv ell

d'enniuament.

En aquest cas, les f iles de la taula s'inicien i s'acaben al bucle de la v ariable "i", i les

cel·les, al de la v ariable "x". Utilitzem el mètode writeln per tal de f orçar un salt de línia en

acabar. El mètode write no ho f a i, en conseqüència, genera un codi f ont més dif ícil de

llegir.



for ( var i=1 ; i<11 ; i++ ) {

document.writeln( '<tr>')

for ( var x=1 ; x<11 ; x++ ) {

document.writeln( '<td width="30" align="center">' + (i*x) + '</td>' )

}

document.writeln( '</tr>' )

}

</script>

</table>

A l'exemple anterior no hem utilitzat els signes d'ocultar el codi als nav egadors anteriors a

la v ersió 4,  per acabar. Tampoc hem usat el ; per acabar les línies.

Si tenim nav egadors actuals, f unciona, si no ... què hi f em en un curs de Jav aScript?

5.- Com localitzar les errades

Quan escriv im codi Jav ascript és normal cometre errades.

Sortosament, el propi nav egador ens ajuda a localitzar-les.

Netscape ho posa f àcil: esborrem la barra d'adreces i

escriv im: javascript: (atenció als : f inals). Premem Intro i

s'obrirà una f inestra que ens inf orma.

Internet Explorer mostra un triangle groc i una descripció a

l'esquerra de la barra d'estat. Si f em doble clic sobre el triangle, s'obrirà una f inestra amb

més inf ormació. I, encara més f àcil, el podem conf igurar per tal que la f inestra s'obri tota

sola:

1.- Anem el menú Herramientas, Opciones de Internet, Opciones Avanzadas.

2.- Marquem Mostrar una notificación sobre cada error de secuencia de comandos.

3.- Acceptem. Quan aparegui l'errada, potser haurem de f er clic Mostrar detalles.

Si el nostre nav egador i/o sistema operatiu disposen d'un

depurador de codi, no cal utilitzar-lo, de moment. Serà més

ràpid i còmode f er-ho a mà. Si utilitzem l'Explorer i el tenim

activ at, tornem a les Opciones Avanzadas i marquem

Deshabilitar depuración de secuencias de comandos.

Una de les errades f reqüents es produeix per manca de

"paritat" entre els signes (cometes, parèntesis). Si, per

exemple, escriv im una f rase amb un apòstrof entre cometes simples ('), s'interpretarà

l'apòstrof com a f i de cadena. Es pot solucionar escriv int una antibarra dav ant l'apòstrof

(\'). Aquesta tècnica f arà que s'interpreti com a part de la cadena.

Tots dos nav egadors ens diuen el tipus d'errada i la línia on s'ha produït, a partir de l'inici

de l'arxiu, de manera que és f àcil localitzar-la. El problema és que, sov int, una errada en

prov oca una altra, i la llista pot ser llarga. En aquest cas, hem de localitzar i arreglar primer

la primera errada, i prov ar. Potser les altres hauran desaparegut.

Si utilitzem Dreamweav er com a editor, ja dev em saber que disposa d'una excel·lent eina.,

un depurador de codi Jav aScript en temps de disseny . S'explica a la propera pràctica.


SGTI : Curs D108


Estructures JavaScript > Recórrer matrius i objectes

A la pràctica anterior hem treballat amb números. Està bé per entendre com f uncionen elsbucles. La sev a utilitat, però, no es limita a f er operacions aritmètiques i escriure'n elresultat. En aquesta pràctica v eurem com es treballa amb matrius i objectes.

Una matriu (Array) és una col·lecció de dades indexades, per exemple, una llista.És un objecte predef init de Jav aScript que té elements, propietats i mètodes.

- Els elements són els v alors de la llista.- Les propietats són les característiques d'aquests elements o de la pròpia llista.- Els mètodes són les accions que es poden executar.

Si pensem en l'Array "Dies de la setmana", un element seria "dijous", una propietat d'aquestelement seria "està f ormat per lletres", una propietat de la llista seria el nombre d'elements(7) i un mètode seria "escriure la llista en ordre inv ers".

Un objecte (object) té una def inició una mica més àmplia i abstracta, però similar.Pensem, per exemple, en el concepte "bombeta". Coneixem les sev es propietats (potència,f orma, color, ...) i mètodes (s'encén, s'apaga, es f on, ... ). Sabem tot això, en general,però només ho podem aplicar a bombetes concretes, no pas al concepte.

Pel que f a als llenguatges de programació, el concepte s'anomena "objecte" i la realitatconcreta, "instància". En el cas d'abans, "matriu (Array )" era l'objecte i "dies de la setmana",la instància que hem triat. I, al paràgraf anterior, podríem dir que "bombeta" és un objecte i"la mev a bombeta de 60w marca Acme" és la nostra instància concreta.

Sov int, però, s'utilitza la paraula "objecte" per ref erir-se a una instància, igual com diem "elcotxe" per ref erir-nos a un v ehicle en particular. Jav aScript no f a distincions.

El nav egador crea una jerarquia d'objectes per tal de poder manejar la pàgina i Jav aScriptpot manipular aquesta estructura. Els enllaços, per exemple, són objectes d'aquestajerarquia, com ho són les imatges, els estils, els f ormularis, la f inestra o el mateixnav egador.


Constructor new Array() : crea una instància de matriu i, opcionalment, li assigna v alors.Propietat lenght: numèrica, indica la longitud (nombre d'elements) d'un objecte o Array .Declaració for ... in : bucle per recórrer un objecte.Constructor new String() : crea una instància de cadena i li assigna un v alor.Propietat href : inf ormació sobre l'adreça.Mètode indexOf() : retorna la posició d'un caràcter o una subcadena en una cadena.

Atenció: Hem d'utilitzar majúscules i minúscules tal com s'han escrit aquí.

1.- Els dies de la setmana

Utilitzarem l'exemple del principi. Farem la llista i l'escriurem en una taula amb l'ajut d'unbucle. Per això, declarem la v ariable dies i li assignem un Array :: var dies = new Array( ...

).

Dins dels parèntesis escriv im els elements entre cometes, separats per comes (després del'últim, no). Ho podem f er en una mateixa línia, però, si ho f em com a l'exemple, es millorala llegibilitat. Quan ens v olem ref erir a un element utilitzem la sintaxi element [ índex ]. Elprimer element té l'índex 0, no 1. La propietat lenght ens indica quants elements hi ha.

Un cop acabada la declaració, f em un bucle que llegeixi l'Array des de la posició 0 (dilluns) imentre l'índex sigui menor que la longitud (lenght, 7). Cada v olta del bucle crea una f ilaamb una cel·la de 140 píxels, alineada al centre, que conté un element de l'Array .

<table border="1" cellspacing="0" bgcolor="#CCDDEE">




</script>

</table>

2.- Llista d'enllaços

Jav aScript pot manejar Array s de més d'una dimensió. De f et, cada element d'un Array potser, al seu torn, un altre Array . Imaginem-nos f ins on podem arribar. L'exemple més senzillseria un bidimensional, que el podem imaginar situat en una graella o un f ull de càlcul.

Per f er una llista d'enllaços, però, en tenim prou amb tractar l'Array com a parelles, és adir, incrementar el comptador del bucle de dues en dues (o de tres en tres, si, per exemple,v olem que cada enllaç tingui una imatge dif erent).

Això sí, és necessari que les parelles segueixin un ordre i, al bucle, que cada element delparell v agi on ha d'anar. Per tal de v isualitzar-ho millor, utilitzarem dues v ariables dins delbucle, url i nom, tot i que no caldria.

3.- Mostrar els enllaços d'una pàgina

Ara plantegem la qüestió gairebé oposada a l'anterior, en lloc de f er una llista d'enllaços,comprov arem els que hi ha en una pàgina. Els enllaços, com hem dit abans, són objectesdins del document. Farem un bucle que els mostrarà.

Utilitzarem el bucle for ... in, una v ariant dels bucles f or, ideal per recórrer objectes. Lasev a sintaxi és més senzilla: for ( v ariable in objecte ). En cada v olta la v ariable pren elv alor de l'objecte recorregut, de manera que ens hi podem ref erir f àcilment.

El nav egador coneix l'objecte document.links de la pàgina i ho aprof itarem. La sintaxi delsobjectes es basa en escriure la jerarquia de dalt a baix, o de general a particular, amb elsnoms separats per punts. Quan un dels elements és un altre objecte, utilitzem elsclaudàtors per asseny alar l'índex, com f èiem als Array s.

Com que, d'entrada, no sabem quin tipus de dades ens proporcionarà el recorregut, a cadav olta crearem una v ariable, url, i li assignarem el v alor que ens proporcioni l'objecte,conv ertit en cadena. "Cadena" signif ica literal, f ormat per lletres.

- La línia v ar url = new String( document.links[item].href )

- Vol dir.la v ariable url serà una nov a cadena, amb el v alor que té la propietat href de l'objectelinks de l'item que està passant en aquesta v olta, i que pertany a document (la pàginaactual).

Un cop f et això, comprov em si url conté el text ".htm", per saber si li hem de posar unenllaç. Per això, utilitzem el mètode url.indexOf(), que ens inf orma sobre la posició queocupa una subcadena en una cadena. Si és major que 0, aleshores és un enllaç. L'escriv imal document, preparat per obrir-se en una f inestra nov a (target="_blank").


for( var item in document.links ){

var url = new String( document.links[item].href )

if( url.indexOf(".htm")>0 ){

document.writeln('<a href="' + url + '" target="_blank">' + url + '<br>')

}

}

</script>

4.- La sintaxi del punt

Com hem v ist, la sintaxi per accedir a les propietats dels objectes és relativ ament senzilla,es basa en separar la jerarquia amb punts. Per executar els seus mètodes hem d'af egir, amés, el parell de parèntesis i, a dins, els paràmetres, si cal.

Sense aprof undir més en el tema, v eurem algunes propietats d'objectes. Quins? Intentemesbrinar-ho ... Més endav ant hi tornarem.




</script>

5.- Depuració d'errades amb Dreamweaver

Si utilitzem Dreamweav er com a editor, disposem d'un depurador de codi Jav aScript queens permet detectar les errades en temps de disseny (bé, no és del tot cert, ja que obliga aguardar l'arxiu, però el codi queda editable).

Per iniciar la depuració obrim el menú "Archiv o - Depurar ennav egador" o f em clic a la barra d'eines el botó "Vistaprev ia / Depurar en nav egador" i triem el que ens calgui.

Si hi ha errades de sintaxi, apareix la f inestra "Errores desintaxi Jav aScript". Quan ens situem sobre un element de la llista, mostra l'explicació alquadre inf erior i un botó "Ir a línea" que ens permet anar al punt del codi que conté l'errada.

Si el depurador localitza errades de lògica, en canv i, apareix la f inestra "DepuradorJav aScript", que ens permet, per exemple, def inir punts d'aturada, executar el codi línia alínia, v eure l'estat de les v ariables, ... Però, tot això i més ho tenim a l'ajuda delDreamweav er, a la secció "Depurar código Jav aScript".


SGTI : Curs D108


Estructures JavaScript > Bucles while

En la pràctica 1 d'aquest mòdul hem estudiat una estructura de control repetitiv a: elsbucles for. Aquesta estructura té la particularitat que el nombre d'iteracions a ef ectuar ésun v alor constant i que s'ha de conèixer des d'un principi.

Hi ha altres ocasions en què també s'ha d'aplicar estructures de control iterativ es, però,sense saber inicialment, quin serà el nombre de repeticions a ef ectuar. Per a aquestscasos existeix l'estructura de control while.

La f unció d'un bucle while és repetir un bloc accions mentre sigui certa una determinadacondició.

Ev identment, la condició s'haurà de modif icar dins de les accions a repetir i en algunaocasió f utura haurà de canv iar el seu v alor a f als, en cas contrari, si la condició maicanv iés, es produiria un bucle sense f i que prov ocaria un error del programa.

En aquesta pràctica v eurem la utilització de la sentència while, de la sev a v ariant do ...

while i altres conceptes associats, conjuntament amb exemples senzills d'aplicació.

Elements JavaScript en aquest capítol.

Sentència while() : executa un bloc de codi mentre una condició sigui certa, és possibleque no s'executi cap v egada..Sentència do ... while() : executa un bloc de codi mentre una condició sigui certa, almeny suna v egada.Sentència continue : prov oca que es torni a executar des de l'inici el bloc de codi.Sentència break : prov oca que f inalitzi l'execució repetitiv a del bloc de codi,independentment del v alor de la condició.Mètode parseInt(cadena) : Conv erteix en v alor numèric enter el contingut de cadena. Si noes pot, retorna NaN (Not a Number).Mètode isNaN(valor) : Retorna true si el contingut de v alor no és numèric, en cas contrari,retorna f alse.

1.- La mitjana aritmètica. Bucles while().

La sintaxi genèrica de while és la següent:

while(condició) { ..instruccions.. [break] ..instruccions.. [continue] ..instruccions.. }

Aquesta estructura de control s'ha de llegir de la següent f orma: Mentre la condició sigui certa fer ...

Els elements que estan entre [ ] són d'ús opcional i es descriuran més endav ant. El blocd'instruccions que es trobi entre { i } s'executarà de f orma repetitiv a mentre el resultat decondicio sigui true.

La condició pot estar f ormada per una v ariable booleana (que sol pot contenir dos v alorstrue o false) o bé per una operació lògica o de comparació que retorna com a resultat unv alor booleà.

L'exemple següent ens mostra el f uncionament d'aquesta estructura de control. L'objectiués calcular la mitjana d'un conjunt de números. Aquests números s'introduiran per part del'usuari mitjançant un quadre de diàleg. Inicialment es desconeix el nombre de v alors que

s'introduiran.

La introducció dels números f inalitzarà quan l'usuari premi sobre el botó "Cancelar" delquadre de diàleg, per tant, inicialment no sabem quina quantitat de números s'introduiran.

<script language="JavaScript"> </script>

En el f uncionament d'aquest codi, es declaren i s'inicialitzen les v ariables acumulat, nValors

i valor. Les dues primeres, seran de tipus numèric, ja que s'han inicialitzat amb zero, ara bé,la v ariable valor s'inicialitza a un f ormat de cadena de text, ja que la f unció prompt retornauna cadena de text.

La v ariable acumulat contindrà la suma acumulada dels v alors numèrics i nValors laquantitat de v alors introduïts per l'usuari.

La línia while (valor != null) és l'inici del bloc while i el contingut del parèntesi la condició queha de ser certa perquè es repeteixi el contingut interior del bucle. S'ha de tenir en compteque el quadre de diàleg prompt retorna el v alor null quan es prem a sobre del botóCancelar. Aquesta condició compara el contingut de la v ariable de cadena valor amb null. Sisón dif erents retornarà el v alor booleà true, en cas contrari retornarà false.

A l'interior del bloc while, tenim les següents línies de codi:

acumulat += parseInt(v alor);Aquesta línia af egeix a la v ariable acumulat el v alor numèric de la v ariable valor, l'operadord'assignació += equiv al a: acumulat = acumulat + parseInt(valor);. La f unció parseInt()

conv erteix la cadena de text que conté valor a un v alor numèric, per poder-ho sumar a lav ariable acumulat.

++nValors;Aquesta línia incrementa en una unitat a la v ariable nValors, l'operador aritmètic ++ equiv ala la següent operació: nValors = nValors + 1.

v alor=prompt("Introdueix un no. (CANCELAR per acabar)","");Aquesta última línia del bucle és igual a la que existeix just abans d'iniciar el bucle while. Lasev a f unció és sol·licitar un nou v alor a l'usuari i assignar-lo a la v ariable valor. L'existènciad'aquesta línia és molt important ja que introdueix la v ariació sobre la v ariable que s'av aluaen la condició de while, si la v ariable valor no canv ies mai, no seria possible acabar elbucle while i, generalment, produiria un error.

En el moment que l'usuari prem el botó Cancelar, la condició del bucle while passa a serfalse i f inalitza el bucle de repetició. S'ha de remarcar que hi ha la possibilitat que elcontingut del bucle while no s'arribi a executar ni una sola v egada, això es pot aconseguir sien l'execució del primer prompt, que està just abans de l'inici del while, es prem directamentsobre Cancelar.

Finalment, quan s'ha sortit del bucle, s'executa la línia:

alert("La mitjana v al: " + ev al(acumulat/nValors));Aquesta línia mostra un missatge amb el text "La mitjana val: " concatenat amb el resultatd'av aluar l'operació algebraica: acumulat / nValors que ens dóna la mitjana aritmètica delconjunt numèric introduït per l'usuari.

2.- Evitem els errors.

El programa de l'apartat 1 és molt v ulnerable. Suposem que l'usuari introdueix un v alor queno és numèric o en blanc, en aquest cas, es continuarà de f orma normal, però, a l'hora demostrar el resultat v eurem que no és correcte (mostrarà NaN, Not a Number).

També hi cap la possibilitat que l'usuari premi Cancelar just en la primera consulta, enaquest cas ja s'ha dit que el bloc del bucle no s'arribarà a executar mai, això prov oca que lav ariable nValors contingui el v alor 0 i a la línia de l' alert es f arà una div isió per zero ja queaquesta v ariable està situada en el denominador. S'ha d'ev itar que en aquesta situació esf aci la div isió per zero.

Les instruccions break i continue es poden introduir dins l'estructura while (també dins el for

i el do...while) i prov oquen un comportament dif erent d'aquesta estructura. Habitualment sesolen executar en f unció d'una determinada situació que es detecta mitjançant unaestructura condicional if.

La instrucció break situada dins un bucle, prov oca la interrupció de l'execució de lesinstruccions del bloc i f inalitza el bucle, independentment del resultat de la condició delbucle.

La instrucció continue, en canv i, prov oca que es torni a iniciar l'execució de lesinstruccions del bucle sense acabar la seqüència actual.

L'exemple següent resol els inconv enients indicats prèv iament. És a dir, quan s'introdueixiun v alor que no pugui ser conv ertit en numero enter o sigui un camp buit, s'executarà unbreak que prov ocarà la f inalització del bucle independentment del v alor de la condició delbucle. per f er-ho es f a anar la línia:

if (isNaN(v alor) || v alor=="") break;

if és un condicional que s'estudia amb més detall en la pràctica següent. Dins el parèntesitenim una condició que av alua si el contingut de la v ariable valor és numèrica mitjançant elmètode isNaN(), que v erif ica si el contingut de valor pot ser conv ertit en número. Tambés'av alua si el contingut de valor és un v alor buit (valor==""). Si es compleix una condició ol'altra se surt del bucle amb el break. El símbol || indica l'operació lògica o.

Si desitgéssim meny sprear el v alor no numèric i tornar a demanar un nou v alor sense sortirdel bucle, podríem utilitzar la sentència continue per tornar a iniciar el bucle, però abans,hauríem de tornar a demanar un nou v alor numèric a l'usuari, adv ertint-lo del seu error. Lalínia que conté el break la podríem substituir per les següents:

if (isNaN(v alor) || v alor=="") { v alor=prompt("No. erroni, introdueix un nou v alor numèric (FI per acabar)",""); continue; }

En el cas d'utilitzar l'opció amb la sentència continue, si s'introdueix un v alor no numèrices tornarà a demanar a l'usuari el nou v alor f ins que aquest sigui correcte o bé, premi sobreCancelar.per ev itar l'error de la div isió per zero v erif icarem si nValor no v al zero, si és cert nos'executarà la instrucció alert, les següents línies de codi serv eixen per aquestav erif icació:

if (nValors != 0) alert("La mitjana v al: " + ev al(acumulat/nValors)); else alert("Ep! No has introduït cap v alor");

El codi complet és el que s'indica a continuació, s'hi ha utilitzat l'opció de break en el casque s'hagi introduït un v alor no numèric. Podeu f er la prov a de substituir la línia del break

per les línies de codi indicades prèv iament amb l'opció de continue i comprov ar el seuf uncionament dif erenciat.

<script language="JavaScript"> <!-- var acumulat=0; var nValors=0; var valor=prompt("Introdueix un no. (CANCELAR per acabar)",""); while (valor != null)

{ if(isNaN(valor) || valor=="") break; acumulat += parseInt(valor); ++nValors; valor=prompt("Introdueix un no. (CANCELAR per acabar)",""); } if (nValors != 0) alert("La mitjana val: " + eval(acumulat/nValors)); else alert("Ep! No has introduït cap valor"); // --></script>

3.- Llista de nombres parells. Bucles do ... while().

L'estructura iterativ a do ... while és molt semblant al comportament de while. L'únicadif erència és que en aquest cas, la condició s'av alua al f inal del bloc, per tant, a dif erènciadel while, el bloc de codi a repetir s'executarà sempre, com a mínim una v egada.

La sintaxi genèrica d'aquesta estructura és:

do { ..instruccions.. [break] ..instruccions.. [continue] ..instruccions.. } while(condicio)

Aquesta estructura de control s'ha de llegir de la següent f orma: fer ... mentre la condició sigui certa.

El següent exemple escriu sobre el document els nombres parells entre 0 i el màxim indicatper l'usuari. Per f er-ho s'utilitza la sentència do ... while. Observ eu com, encara que espremi Cancelar o Aceptar amb un v alor zero o buit o no numèric, sempre apareix com amínim el primer v alor 0.

<script language="JavaScript"> </script>

4.- Els números primers.

L'exemple que tenim a continuació mostra una altra aplicació amb l'estructura de controlwhile. Aquest és una mica més complex, ja que el bloc contingut dins el while és mésextens i conté altres estructures de control.

L'objectiu d'aquest codi consisteix en escriure sobre la f inestra un nombre determinat denombres primers començant pel 1.

Inicialment ens sol·licita la introducció del màxim nombre primer a representar mitjançantuna f inestra de diàleg emergent, aquest v alor el desa a la v ariable fi.

Posteriorment s'inicia el bucle while que s'executarà de f orma iterativ a mentre la v ariablenumero tingui un v alor inf erior al v alor contingut per la v ariable fi. Al f inal del bucle while

tenim la línia amb el codi ++numero; encarregada d'incrementar el v alor de numero i a lav egada, modif icar el v alor de la condició.

També dins el bucle while hi tenim una altra estructura iterativ a, en aquest cas és la for.Aquest bucle for s'encarrega de determinar si numero és un v alor primer o no. Per f er-ho,s'utilitza la v ariable primer com a booleana i se li assigna inicialment el v alor true.

Dins el bucle for, s'ef ectua múltiples div isions entre el numero i qualsev ol altre númeroentre 2 i numero/2. A cada div isió es v erif ica si el residu (%) és igual a 0, en cas deser-ho, v ol dir que el numero no és primer i es posa la v ariable primer a false i sortim delbucle for mitjançant el break.

Seguidament, si primer v al true, v ol dir que el numero és primer i s'escriu sobre la f inestraactiv a el v alor de numero.

El bucle while es repetirà tants cops com sigui necessari f ins arribar al número màximindicat per l'usuari, desat dins la v ariable fi.

<script languaje="JavaScript">//numeros primers.

var fi=prompt("Introdueix el màxim nombre primer a visualitzar:",""); var a, primer, numero=1; while(numero <= fi) { primer = true; for(a=2; a<=numero/2; a++) { if ((numero % a) == 0) { primer = false; break; } } if (primer) document.write(numero + " "); ++numero; }</script>

SGTI : Curs D108


Estructures JavaScript > Condicionals i selectors

Les pàgines es llegeixen i s'executen de f orma seqüencial, de dalt a baix i d'esquerra adreta. HTML no té cap més possibilitat. Si utilitzem capes i f ulls d'estils, podem situarelements a qualsev ol lloc de la pàgina, però, com abans, tot està decidit.

Amb Jav aScript, en canv i, podem dirigir el f lux en f unció de què es compleixin, o no, unescondicions. Ja ho hem v ist en pràctiques anteriors. Ara hi tornem amb més prof unditat.

Un condicional f a una comparació o, si ho v olem més precís, "av alua una expressió". Siel resultat és cert (true), s'executa una instrucció, un bloc de codi o tota una pàgina, el quev ulguem. Opcionalment, si el resultat és f als (f alse) es pot tirar per un altre camí.

Sov int, però, dues opcions són poques. L'expressió que s'av alua pot tenir div ersosresultats i cal un mecanisme que permeti triar sense hav er de f er eleccions binàries. Elsselectors ens of ereixen, precisament, aquesta f uncionalitat.


Declaració if() ... else : av alua una expressió i dirigeix el f lux segons el resultat.Operador ? : av alua una expressió i retorna (assigna) un v alor segons el resultat.Mètode confirm() : presenta un missatge i permet triar entre dues respostes.Declaració switch() ... case : estructura que permet seleccionar entre div erses opcions.Objecte Math : proporciona una interf ície per treballar amb números.Mètode random() : genera un número aleatori entre 0 i 1.Mètode floor() : elimina els decimals d'un número.Mètode location.reload() : torna a carregar la pàgina.

1.- Paper de llistat

Recordeu el paper d'impressora a ratlles blanques i blav es? De v egades, v a bé tenir colorsalterns, sobretot, quan v isualitzem llistats de dades. Veurem com es pot f er.

Necessitem un interruptor, alguna cosa que només tingui dues possibilitats. Alguna idea?Naturalment, el mòdul de div idir per 2, parells i senars. Tornem a utilitzar una taula i pintemles cel·les. Al mateix temps, v eurem com es poden escriure instruccions dinàmiques, abocinets, en f unció d'una decisió.

"Si es compleix la condició, per aquí, si no, per allà", en Jav aScript seria:

if ( condició ) {

... bloc cert ... }

else {

... bloc f als ... }

Al codi, utilitzem el mètode document.write() quan no v olem f er un salt de línia, és a dir,quan v olem que el text d'una instrucció s'escrigui a la pàgina "enganxat" al següent. Encanv i, utilitzem el mètode document.writeln() per f er un salt de línia després d'escriure.Cal recordar que HTML reconeix els salts de línia i que és HTML el que escriv im aldocument.

Aplicarem els colors a les f iles (<tr>), no pas a les cel·les (<td>). Això també ho podem f eramb Dreamweav er, si sabem usar la barra d'estat, tal com s'explica al mòdul 1. Cada f ila,tindrà dues cel·les del mateix color. La de l'esquerra ens serv irà per numerar les línies.

<table border="0" cellspacing="0" width="100%">


<!--

for ( var i=1 ; i<21 ; i++ ) {

document.write( '<tr bgcolor="#' ) ;

if ( i%2==1 ){

document.write( 'FFFFFF') ;

}

else {

document.write( 'DDEEFF') ;

}

document.writeln( '"><td width="20" align="right">' + i + '</td>' ) ;

document.writeln( '<td> </td></tr>' ) ;

}

// -->

</script>

</table>

2.- Més compacte

Per f er això, però, no cal tant codi. Jav aScript disposa d'un operador ternari (és l'únicque té tres elements), que pot resoldre aquesta situació de f orma més compacta i elegant.És un "condicional en línia" que actua com un "if ... else ...", però de manera més breu:

( condició ) ? bloc cert : bloc f als

Si es compleix la condició s'executa el primer bloc, si no, el segon. Això resulta molt útil,sobretot quan tots dos, cert i f als, són curts o només s'ha de retornar un v alor.

L'expressió: ( i%2==1 ) ? 'EEFFDD' : 'EEDDFF'

es llegeix: Si el residu de dividir i per 2 és 1, retorna 'EEFFDD', si no, retorna 'EEDDFF'

<table border="0" cellspacing="0" width="100%">


for ( var i=1 ; i<21 ; i++ ) {

document.writeln( '<tr bgcolor="#' + ( ( i%2==1 ) ? 'EEFFDD' : 'EEDDFF' ) + '">' )

document.writeln( '<td width="20" align="right">' + i + '</td>' )

document.writeln( '<td> </td></tr>' )

}

</script>

</table>

3.- Tu tries

Als exemples anteriors, l'usuari f a d'espectador. Si li v olem donar l'oportunitat de triar,necessitem un mecanisme que retorni cert o f als. El tenim. Es tracta de la f unció"conf irm", germana d'alert i cosina de prompt, que hem v ist al mòdul anterior. Tots tres sónmètodes de l'objecte window. Si no s'especif ica la f inestra, es suposa l'actual.

La sev a sintaxi és molt senzilla: confirm ( missatge ) Es pot usar de dues maneres:

1.- Assignem el resultat a una v ariable: v ar tu_tries = conf irm ( missatge )2.- Av aluem el resultat a la pròpia estructura condicional:

if ( conf irm ( missatge ) ) { ... resposta af irmativ a ... } else { ... resposta negativ a ... }

Com es pot v eure, és una f orma ràpida i ef icaç de consultar l'usuari. Això sí, només tédues opcions i obliga a redactar de manera que s'hagi de triar entre Acceptar o Cancel·lar.


if ( confirm ( 'Vols veure una bona imatge?' ) ) {

document.writeln( '<img src="images/foto01.jpg">' )

}

else {

document.writeln( 'Tu t'ho perds !' )

}

</script>

4.- Joc d'atzar

Un selector (switch) és una estructura que permet dirigir el f lux del programa en div ersesdireccions, depenent del v alor d'una v ariable. Cada cas (case) executa un blocd'instruccions. Si aquest bloc es tanca amb la instrucció de ruptura (break), salta al'acabament de l'estructura; si no, llegeix el cas següent.

Opcionalment, podem utilitzar la paraula default per indicar què s'ha de f er si no s'ha donatcap dels casos prev istos. Això només té sentit si els blocs anteriors acabav en amb"break", en cas contrari, sempre s'executaria el bloc de "def ault".

switch ( expressió ) {

case cas1 :

bloc d'instruccions per al cas1; break;

case cas2 :

bloc d'instruccions per al cas 2; break;

...

default :

bloc d'instruccions per def ecte;}

Si els blocs d'instruccions no són massa llargs, es pot escriure cada cas en una línia. Al'exemple següent ho hem f et així. Cal recordar que Jav aScript interpreta el punt i coma (;)com a salts de línia. Atenció, també, amb els dos punts (:) obligatoris que porta cada cas.

L'exemple proposa un senzill joc d'atzar. Es tracta d'aconseguir quatre quadres del mateixcolor. Dins d'un bucle es crea, a cada v olta, un número aleatori entre 0 i 3. Segons quinsigui, es pintarà una cel·la d'un color o un altre. Finalment, posem un enllaç per repetir lajugada.

Jav aScript té l'objecte Math per treballar amb números. Un dels seus mètodes, random(),proporciona un número aleatori entre 0 i 1, sempre dif erent. Si el multipliquem per 4, tenimun número decimal entre 0 i 4. Com que només ens interessa la part sencera, ho "passem"pel mètode floor(), que descarta els decimals. El resultat l'assignem a la v ariable rnd:

v ar rnd = Math.f loor( Math.random() * 4 ); r n d serà la part sencera d'un número aleatori multiplicat per quatre.

A continuació posem el selector. Als casos 0, 1 i 2, assignem a la v ariable clr els codis decolor roig, groc i v erd, respectiv ament, i trenquem l'estructura. Per def ecte, assignem elblau.

Un cop f eta la selecció (una per cada v olta del bucle) tenim la v ariable "rnd" amb unnúmero i la v ariable "clr" amb un codi de color. Dibuixem una cel·la d'aquest color i escriv imel número.

Finalment, tanquem la f ila i en f em una altra, de quatre cel·les d'amplada, amb un enllaçque torni a carregar la pàgina. D'això se n'encarrega el mètode reload() de l'objectelocation. Per acabar-ho, tanquem cel·la, f ila i taula.

<table border="0" cellspacing="4" cellpadding="30"><tr>


for ( var i=0 ; i<4 ; i++ ) {

var rnd = Math.floor( Math.random() * 4 );

switch ( rnd ) {

case 0: clr = 'FF6666'; break;

case 1: clr = 'DDCC00'; break;

case 2: clr = '00CC00'; break;

default: clr = '0099FF';

}

document.writeln( '<td bgcolor = "#' + clr + '">' + rnd + '</td>' );

}

document.writeln( '</tr><tr><td colspan="4" align="center">' );

document.writeln( '<a href="javascript:location.reload()">Tornar-ho a provar</a>' );

document.writeln( '</td></tr>' );

</script>

</table>

5.- Noms de variables

Les normes són ben simples: una v ariable (o una f unció, les v eurem al mòdul següent) hade tenir un nom, f ormat per lletres i números - sense espais en blanc -, que no pugui entraren conf licte amb qualsev ol altre.

Tot i que no és norma, els noms de v ariables i f uncions han de ser curts i signif icatius.Una tècnica, f orça ef ectiv a, és l'anomenada "mescla de paraules" (wordmixing), que esbasa en encadenar bocins de paraules abreujades. Hi ha qui, a més, comença amb unainicial minúscula que identif ica el tipus de v ariable: a (Array s), o (objectes), n (números), c(cadenes de text) , b (booleans, lògics), ... : aLnk, oWin, nInd, cTxt, bLog, ...

En general, els noms més curs es reserv en per a v ariables amb un àmbit petit. Perexemple, s'utilitzen noms d'una lletra ( i, j, k ) per als índex dels bucles - que es declarendins del bucle - i, en canv i, noms més signif icatius per a v ariables que af ecten tota lapàgina.

SGTI : Curs D108

Mòdul: 2

Estructures JavaScript > Menús d'enllaços

En aquest mòdul hem v ist algunes declaracions bàsiques del Jav aScript. Tenen en comúque totes controlen el f lux del programa.

Els bucles (for i while), amb l'ajut dels Arrays i objectes, permeten simplif icar lesestructures repetitiv es i estalv iar temps.

Amb els condicionals i selectors podem dirigir el f lux en un o altre sentit, de tres maneres:preguntant l'usuari (prompt i confirm), de f orma aleatòria (random) i a partir de les dadesdel programa. Tot això amb eleccions binàries (if...else) o multiopció (switch).

També hem introduït alguns conceptes f orça útils: declaració, assignació, operacions icomparació de v ariables i v alors; constructors (new), propietats (lenght, href, ...) imètodes (parseInt, indexOf, reload,...) dels objectes; trucs, receptes i, f ins i tot, un petitjoc.

És l'hora de posar en pràctica els aprenentatges.

Exercici

Es tracta de f er:

1.- Els enllaços dels mòduls a la pàgina principal, utilitzant Jav aScript (tindrem el codi).2.- Els altres enllaços de la pàgina principal.3.- La pàgina "index.htm" del mòdul 2, amb enllaços a quatre (o més) pràctiques.4.- Les pràctiques enllaçades, ev identment.

En primer lloc, f arem el menú d'enllaços als mòduls de la pàgina d'entrada, en Jav aScript.Utilitzem la tècnica que hem v ist al segon exemple de la pràctica 2.

Obrim la pàgina amb el Dreamweav er, ens situem a la "v ista de código" i busquem la tauladels menús, (a l'esquerra si hem seguit el model), l'esborrem i, en el seu lloc, hi posemaixò:

<table width="168" border="0" cellspacing="1" cellpadding="2"><script language="javascript"></script></table>

Bé, en aquest cas només es tractav a de copiar i enganxar, perquè l'Array i el bucle ens elshem trobat f ets. A partir d'aquest model, haurem de ref er també els menús que hi ha a ladreta de la pàgina, que contenen enllaços a llocs relacionats.

Finalment, haurem de ref er la pàgina "index.htm" de la carpeta "m2". Hi posarem enllaçosals arxius de les pràctiques que hem guardat (quatre, com a mínim). Podem tornar a utilitzarel bucle Jav aScript que hem f et a la pàgina principal, amb les v ariacions que calgui. També

cal recordar que tenim un f ull d'estils a la rel que podem enllaçar.

Pel que f a als quatre (o més) arxius enllaçats, poden ser v ariacions (experimentar és lamillor manera d'aprendre) sobre exemples de les pràctiques. Es poden anomenar dequalsev ol manera, tot i que, és clar, es recomana "m2p1_1.htm", "m2p1_2.htm", ...

Recomanacions

Utilitzem, sempre que sigui possible, les tècniques de copiar i enganxar amb el teclat:Control+C i Control+V respectiv ament. Així ens hi acostumarem.

En acabar aquest mòdul hem de tenir clares les estructures i la sev a lògica. Si encara nohem memoritzat prou bé les instruccions i la sintaxi, no cal que ens preocupem, és normal.Durant el curs utilitzarem moltes v egades el que hem f et aquí, i ho incorporarem alsnostres coneixements sense cap esf orç.

Env ieu un missatge a la v ostra tutoria un cop l'exercici estigui penjat a Internet. Indiqueusempre l'adreça de f orma que s'hi pugui accedir directament.


SGTI : Curs D108

Mòdul: 3

L'usuari en acció

Ja hem arribat al mòdul 3, f ins ara hem v ist les estructures bàsiques de programació.Aquestes són comunes a gairebé tots els llenguatges de programació, tant si són per allenguatges d'àmbit general, com si són d'entorns reduïts, com ara el nav egador web.

Continuarem v eient conceptes genèrics de programació, peròalguns ja són específ ics de Jav aScript i la sev a interacció amb elcodi HTML de les pàgines web i l'usuari.

Tots són aspectes comuns a qualsev ol aplicació en Jav aScript iper tant els v eurem de f orma regular al llarg del curs. És important assolir bé aquestsconceptes, però, si us costa arribar als detalls, no us preocupeu, en la resta de pràctiquesdel curs s'incideix de f orma indirecta amb tots aquests conceptes.

Començarem v eient a la pràctica 1, primer contacte amb els events i les funcions. Elsprimers seran els elements clau per determinar quines són les accions ef ectuades perl'usuari i els segons per indicar què ha de f er el programa quan ha detectat un event.Encara que les funcions tenen una utilitat molt més important: l'estructuració del codi.

A la pràctica 2 v eurem els formularis. Aquests elements són els clàssics per env iarinf ormació de l'usuari al WebMaster. En aquesta pràctica, però, analitzarem una nov af uncionalitat: permetre establir una comunicació entre l'usuari i les aplicacions Jav aScript, ialguna cosa més...

A la pràctica 3 ens dedicarem a ordenar les idees. Fins ara hem estat utilitzantassíduament algunes variables i operadors, es tracta, doncs, de tenir una v isió més globalde tots aquests elements indispensable per qualsev ol aplicació de programació.

La pràctica 4 ens mostrarà com podem crear finestres f illes a partir de la f inestra en la queestem v isualitzant el document base. Per que crear nov es f inestres? La raó és clara:mostrar una nov a inf ormació o una sol·licitud de dades dif erenciada de la que tenim dins laseqüència establerta dins la pàgina base.

En aquest mòdul:

Pràctica 1: Events i funcions

Pràctica 2: Entrada de dades

Pràctica 3: Variables i operadors

Pràctica 4: Obre la finestra

Exercic is: Comparacions aleatòries


Quan escrivim codi JavaScript, cal recordar que Dreamwever disposa d'una eina, el depurador,que ens facilita la detecció i el tractament d'errades. Es pot activar des del menú "Archivo -Depurar en navegador" o fent clic al botó de la barra d'estat "Vista previa/depurar enexplorador".


SGTI : Curs D108


L'usuari en acció > Events i funcions

Fins ara hem v ist totes les accions realitzades amb Jav aScript com a part de la seccióbody , de tal manera que quan es carrega la pàgina, s'executa el codi corresponent def orma gairebé instantània. En aquesta pràctica s'introdueix dos elements més delllenguatge: les funcions i els events.

Sobre els ev ents es f arà un anàlisi introductori, per poder-los utilitzar conjuntament amb lesf uncions, posteriorment, al mòdul 7 pràctica 1 s'analitzaran amb més detall.

Per event s'entén qualsev ol cosa que passi en l'entorn prov ocada per les accions del propiusuari o bé pel canv i d'estat d'algun objecte.

Per exemple, quan l'usuari f a clic a sobre d'un botó amb el ratolí esta prov ocant un ev ent,un altre exemple podria ser quan una pàgina acaba de carregar-se completament alnav egador.

Quan estem interaccionant amb una pàgina, s'estan produint ev ents constantment, ara bé,això no v ol dir que a nosaltres, com a programadors de la web, ens hagin d'interessar tots iper tant no en f arem cap cas a la majoria d'ells.

Però, si algun ev ent interessa tractar-lo d'una f orma específ ica, l'haurem de detectarmitjançant els controladors d'events, i posteriorment s'hagi detectat, ef ectuarem unesaccions determinades que, generalment, estaran descrites dins una f unció.

Les funcions ens serv iran per agrupar blocs de codi de programa que realitzaran unesaccions específ iques. Aquests blocs de codi tindran un nom: el nom de la f unció.

Les f uncions han de ser d'ús general, es a dir, les hem de poder utilitzar en múltiplessituacions similars. Cada situació ha de poder tenir uns v alors dif erents a tractar per partde la f unció. Per f acilitar l'af irmació anterior es disposa dels paràmetres que passarem a laf unció.

Elements del llenguatge en aquest capítol.

Declaració function : Declara el bloc de codi que correspon a una f unció.Controlador d'ev ents on... : Permet detectar i tractar un determinat ev ent.Sentència return : Ens retorna un v alor resultant de la f unció al lloc on s'ha inv ocat.Objecte Math : Of ereix mètodes per f er tractaments matemàtics dels v alors numèrics.Mètode round : Arrodoneix un v alor amb decimals al v alor sencer més proper.Mètode random : Retorna un v alor numèric aleatori entre 0 i 1.

1.- Els events. Ha passat alguna cosa?

Es diu de Jav aScript que és un llenguatge de programació orientat a ev ents. Però, què ésun ev ent? Un ev ent és qualsev ol cosa que passa en el l'àmbit d'acció del programa.

Per exemple, cada cop que f em un clic amb el ratolí , passem el ratolí per sobre d'unobjecte, canv iem la grandària d'una f inestra, es tanca una f inestra, etc. s'està prov ocantun ev ent. La majoria dels ev ents que es produeixen no tenen cap interès en elf uncionament del programa i són ignorats.

Però, en algunes situacions ens pot interessar que el programa f aci algunes accionsespecíf iques quan es produeix un determinat ev ent. En aquests casos, hem de detectar-lo if er que el programa actuï en conseqüència.

La següent llista ens mostra algun dels ev ents més habituals :

blur.- es produeix quan un element de f ormulari perd el f ocus, per exemple, quan es f a clica un altre lloc dif erent d'aquest element.

click.- es produeix quan es f a un clic amb el ratolí a sobre d'un element.change.- es produeix quan l'usuari canv ia el v alor d'un camp de f ormulari.focus.- es produeix quan un element rep el f ocus.load.- es produeix quan es carrega una pàgina en el nav egador.mouseover.- es produeix quan l'usuari mou el cursor per sobre d'un v incle d'hipertext.submit.- es produeix quan es f a clic a sobre del botó per a env iar les dades d'un f ormulari.unload.- es produeix quan l'usuari abandona una pàgina.etc.

Per detectar un ev ent s'utilitza els controladors d'events, aquests elements de programatenen una estructura com la següent:

onXXXX = codi d'accions a realitzar;

Les lletres XXXX indiquen el tipus d'ev ent a detectar i el codi indicat a l'esquerra de símbol =serà l'acció a realitzar quan es produeixi aquest ev ent.

Els controladors d'ev ent corresponents als ev ents indicats anteriorment són els següents.

onBlur, onClick, onChange, onFocus, onLoad, onMouseOver, onSubmit i

onUnLoad

Aquests controladors s'apliquen dins les directiv es HTML que els poden suportar ambl'estructura indicada prèv iament.

S'ha de tenir en compte que si un element de codi HTML que incorpora un controladord'ev ent està inclòs dins una altre element que també incorpora un altre controlador d'ev ent,l'element inclòs heretarà també l'ev ent de l'element que l'inclou. A aquest ef ecte sel'anomena bombolleig d'events.

Si el codi que ha d'executar un controlador d'ev ents és molt extens, no s'acostuma aincloure a la dreta del signe = . Habitualment, se sol def inir una f unció que inclou tot el codique ha d'executar l'ev ent i solament s'assigna el nom de la f unció al controlador d'ev ents.En els apartats següents es pot v eure com es treballa amb f uncions i ev ents.

El següent exemple ens mostra com són utilitzats alguns dels ev ents indicats prèv iament.L'ef ecte que produeix la detecció de cada ev ent és molt simple: ens traurà un missatged'alerta quan l'ev ent sigui detectat. El codi a executar serà el mètode "alert" ubicat desprésdel signe =.

Podem observ ar com dins la directiv a <body > hi ha situats els ev ents onLoad i onUnload.

<body ..... onLoad="alert('S\'ha carregat la pàgina.');" onUnload="alert('Adéu.');">

Aquests ev ents mostraran un missatge quan es carregui la pàgina i quan es descarregui.

Dins la primera f ila de la taula hi ha def inits dos ev ents, l'un dins de <td> i l'altre dins de<p>, com que <p> està inclòs dins de <td> es produeix un ef ecte de bombolleig d'events

al f er un clic a sobre del text "Text 1", per tant, es mostraran dos missatges d'alerta.

<tr ... ><td ... onClick="alert('Bombolleig d\'events.');">

<p onClick="alert('Has fet un clic a sobre de Text 1.');">Text 1.</p></td></tr>

A la segona f ila de la taula s'hi aplica el controlador d'ev ent onMouseov er, per tant, cadacop que passem el ratolí per sobre se'ns mostrarà el corresponent missatge d'alerta.

<p onMouseOver="alert('Has passat el ratolí per sobre de Text 2.');">Text 2.</p>

Dins el f ormulari, s'apliquen quatre controladors d'ev ents, el primer és onSubmit, ques'activ arà quan f em clic a sobre el botó "Clica'm". L'ev ent onChange el podrem observ arcada cop que canv iï el contingut del "Quadre 1" i l'ev ent onBlur, s'activ arà cada cop que el"Quadre 2" perdi el f ocus.

Els ev ents sobre "Text 1" i "Text 2" no es podran observ ar amb el nav egador Netscape 4.x.Aquest nav egador reconeix molts meny s ev ents i ef ectua un tractament dels ev ents def orma molt dif erent a com ho f an els nav egadors Internet Explorer i Netscape 6.x.

<html><head><title>Exemple</title></head><body bgcolor="#E0E8E0" onLoad="alert('S\'ha carregat la pàgina.');" onUnload="alert('Adéu.');"> <table border="1" align="center"> <tr align="center"><td bgcolor="#ffffcc" onClick="alert('Bombolleig d\'events.');"> <p onClick="alert('Has fet un clic a sobre de Text 1.');">Text 1.</p></td></tr> <tr align="center"><td bgcolor="#66ffcc"><p onMouseOver="alert('Has passat el ratolí per sobre de Text 2.');">Text 2.</p></td></tr> </table> <center> <form onSubmit="alert('Ho sento, aquest formulari no pot enviar res.'); return false;"> Quadre 1: <input type="text" onChange="alert('Ha canviat el contingut del Quadre 1.');"><br> Quadre 2: <input type="text" onBlur="alert('El Quadre 2 ha perdut el focus.');"><br> <input type="submit" value="Clica'm"> </form> </center></body></html>

2.- Què són les funcions?

Una f unció és un bloc de codi al que li donem un nom específ ic: el nom de la f unció.Aquest bloc de codi realitzarà unes accions determinades i el podrem inv ocar tantesv egades com desitgem, des de qualsev ol altre lloc de la plana web, escriv int el seu nom.

El nom de la f unció sempre anirà seguit de dos parèntesi ( ). Dins aquest parèntesi hi podràhav er, o no, els paràmetres separats amb comes , . Les accions que ha de realitzar lainv ocació de la f unció han d'estar situades entre claus { }.

Els paràmetres són v alors que es passen a la f unció, de tal manera que, el comportamentde la f unció pot ser modif icat segons quins siguin els paràmetres que se li han passat. Enuna f unció hi pot hav er molts paràmetres dins el parèntesi o no hav er-ni cap. En cas de nohav er-hi cap paràmetre no es pot obv iar la utilització dels dos parèntesi ( ) al f inal del nomde la f unció.

La sintaxi genèrica d'una f unció és la següent:

nom_funcio( paràmetre1, paràmetre2, paràmetre3, ..... ) { ......... Accions a realitzar per la f unció ............... .........Finalitzem amb return únicament si s'ha de retornar algun v alor......... }

En qualsev ol altre lloc del codi es pot inv ocar a la f unció indicant el seu nom i elsparàmetres entre parèntesi. Si la f unció ens ha de retornar algun resultat el podem assignara una v ariable.

Inv ocació sense que retorni cap v alor (només realitzarà accions):

nom_funcio(v alor1, v alor2, .....);

Inv ocació retornant un v alor resultant (també pot realitzar accions, a més a més):

v ariable = nom_funcio(v alor1, v alor2, .....);

S'ha de tenir en compte que els paràmetres són opcionals i que si no n'hi ha cap, elsparèntesi s'han de mantenir.

Habitualment les f uncions se solen def inir dins el bloc <head> del codi HTML, encara queno hi ha cap inconv enient que estiguin def inides dins el bloc <body>

En el següent exemple podem v eure com inv oquem a una f unció i li passem unsparàmetres. La f unció de nom escriu s'encarrega d'escriure a la f inestra activ a indicant elv alors dels paràmetres que li hem passat.

La inv ocació de la f unció es prov oca quan es detecta l'ev ent Clic sobre un botó, per tanten aquest exemple, també podem observ ar una utilització molt habitual dels ev ents queinv oquen a una f unció, en lloc, d'executar el codi directament tal com s'ha f et a l'apartatsobre ev ents.

<html><head><title>Exemple</title><script language="JavaScript"> function escriu(parametre1, parametre2, parametre3) { document.writeln("Acabes d'invocar a la funció <b>escriu</b> i li has passat els següents paràmetres:"); document.writeln("<br>El primer paràmetre és: <font color='#FFOOOO'>" + parametre1+ "</font>"); document.writeln("<br>El segon paràmetre és: <font color='#FFOOOO'>" + parametre2 + "</font>"); document.writeln("<br>El tercer paràmetre és: <font color='#FFOOOO'>" + parametre3 + "</font><p>"); }</script></head>

<body bgcolor="#E0E8E0"><form name="form1"><table border="0" width="370" align="center"> <tr><td align="right">Primer paràmetre:</td><td align="center"> <input type="text" name="param1" value="A"></td></tr> <tr><td align="right">Segon paràmetre:</td><td align="center"> <input type="text" name="param2" value="B"></td></tr> <tr><td align="right">Tercer paràmetre:</td><td align="center"> <input type="text" name="param3" value="C"></td></tr> <tr><td colspan="2" align="center"><input type="button" value="Prem aquí" onClick="escriu(param1.value, param2.value, param3.value)"></td></tr></table></form></body></html>

3.- Les funcions ens poden retornar resultats.

En l'exemple anterior, hem inv ocat una f unció passant-li uns paràmetres i ella ha f et lesaccions que tenia programades i que consistien en mostrar el v alors dels tres paràmetrespassats.També podem f er que la f unció ens retorni un resultat al lloc des d'on s'ha inv ocat.

El següent exemple mostra com mitjançant la sentència return podem retornar un v alorresultant al lloc que ha inv ocat a la f unció. La següent línia dins la f unció s'encarrega deretornar el v alor que s'indica a continuació de return.

return parametre1 + " " + parametre2;

De f et, el codi de la f unció és molt simple. Retorna la concatenació ( + )de les cadenes detext passades com a paràmetres amb un espai en blanc enmig.

Al mateix temps, des del f ormulari form1 situat dins del bloc <body>, en el mateix lloc ons'ha inv ocat la f unció, assignem el v alor retornat a la propietat value del quadre de text denom resul.

resul.v alue=escriu(param1.v alue, param2.v alue)

És a dir, en f er el clic sobre el botó, es prov oca un ev ent que és detectat pel controladord'ev ents onClick. Aquest controlador d'ev ents inv oca la f unció escriu() i li passa com aparàmetres el contingut de param1.value i param2.value. Un cop processada la f unció,aquesta retorna un resultat i s'assigna a resul.value.

<html><head><title>Exemple</title><script language="JavaScript"> function escriu(parametre1, parametre2) { return parametre1 + " " + parametre2; }</script></head>

<body bgcolor="#E0E8E0"><form name="form1"><table border="0" width="370" align="center"> <tr><td align="right">Primer paràmetre:</td><td align="center"> <input type="text" name="param1" value="A"></td></tr> <tr><td align="right">Segon paràmetre:</td><td align="center"> <input type="text" name="param2" value="B"></td></tr> <tr><td align="right">Valor retornat:</td><td align="center"> <input type="text" name="resul" value=""></td></tr> <tr><td colspan="2" align="center"><input type="button" value="Prem aquí" onClick="resul.value=escriu(param1.value, param2.value)"></td></tr></table></form></body></html>

4.- Evitem les repeticions.

Les f uncions ens han de serv ir per reduir i estructurar el codi.

Ref erent a l'estructuració del codi del programa, en v eurem un petit exemple descriptiu almòdul 8 pràctica 3. Aquí, en canv i, v eurem un exemple en què utilitzarem les f uncions perreduir la grandària del codi.

Suposem que hem d'escriure un tros de codi que s'ha de repetir moltes v egades. Si aquestcodi és extens, prov ocarà que el programa sigui massa llarg de f orma innecessària.

La millor solució per ev itar això és incloure aquest codi dins una f unció i, a tots els llocs ons'hagi de repetir, inv ocarem la f unció simplement escriv int el seu nom. Si a més, desitgemque aquest codi f aci les accions de f orma dif erent en f unció d'unes v ariables, podem posara la f unció els paràmetres apropiats.

El següent exemple pretén il·lustrar aquest concepte. Es pretén crear una taula oncadascuna de les caselles tingui un color dif erent de f orma aleatòria. Mitjançant codi,creem la taula de f orma dinàmica i apliquem a cada cel·la el paràmetre "bgcolor".

El v alor del color assignat a bgcolor, el determinem de f orma aleatòria a partir d'una llistade colors ubicada dins un Array . Per f er la selecció aleatòria utilitzem els mètodesrandom() i round() de l'objecte Math. El codi per f er la selecció està ubicat dins la f unciócolor( ) que retorna el nom del color corresponent. Aquesta f unció no té paràmetres.

Posteriorment, dins la taula s'inv oca la f unció color() cada cop que es desitja obtenir uncolor aleatori d'entre els de la llista.

Es pot apreciar que l'ús de la f unció redueix bastant l'extensió del codi, ja que en cascontrari, el codi de la f unció color() s'hauria de repetir tantes v egades com cel·les tenim,en canv i, ara solament ha calgut repetir el nom de la f unció.

<html><head><script language="JavaScript"> function color() { var colors=new Array("black", "blue", "brown", "fuchsia", "green", "magenta", "orange", "red", "yellow"); return colors[Math.round(9 * Math.random() - 0.5)]; }</script></head>

<body><script language="JavaScript"> document.writeln('<table border="1" width="350" align="center" >'); document.writeln('<tr><td bgcolor="' + color() + '"> </td><td bgcolor="' + color() + '"> </td><td bgcolor="' + color() + '"> </td><td bgcolor="' + color() + '"> </td></tr>'); document.writeln('<tr><td bgcolor="' + color() + '"> </td><td bgcolor="' + color() + '"> </td><td bgcolor="' + color() + '"> </td><td bgcolor="' + color() + '"> </td></tr>'); document.writeln('<tr><td bgcolor="' + color() + '"> </td><td bgcolor="' + color() + '"> </td><td bgcolor="' + color() + '"> </td><td bgcolor="' + color() + '"> </td></tr>'); document.writeln('<tr><td bgcolor="' + color() + '"> </td><td bgcolor="' + color() + '"> </td><td bgcolor="' + color() + '"> </td><td bgcolor="' + color() + '"> </td></tr>'); document.writeln('</table>');</script></body></html>

Pàgines web dinàmiquesSGTI : Curs D108Mòdul: 3 Pràctica: 2

L'usuari en acció > Entrada de dades

Els f ormularis són una f orma ef ectiv a d'establir comunicació ambels v isitants de les nostres pàgines. L'altra opció, l'adreça decorreu, passa sov int inadv ertida. Un f ormulari, en canv i, conv idaa escriure.

Jav aScript amplia les possibilitats dels f ormularis. Si nomésutilitzem HTML, els podem env iar per correu i poca cosa més. Uncop env iats, aniran a parar a una bústia o bé els rebrà un programa CGI o un script deserv idor, si en tenim algun a la nostra disposició. Aquest utilitzarà les dades per a f einesdiv erses. En tot cas, aquesta mena de programes són una ajuda externa que no sempretindrem o podrem controlar.

Ja hem v ist recursos alguns Jav aScipt que f aciliten la interacció: els quadres de diàleg(alert, prompt i conf irm). Els f ormularis ens proporcionen, a més:

Camps de text: corresponen als tipus HTML text, textarea, password i hidden.Camps lògics (marcat o desmarcat): controls checkbox i radio.Capses de selecció: select i option.Botons per env iar, esborrar i el que v ulguem: submit, reset i button.Tria d'arxius: tenim el camp file, si utilitzem un nav egador actualitzat.

El nav egador maneja un Array - document.f orms - que conté tots els f ormularis de lapàgina Cada element de l' Array , al seu torn, té tots els camps i les sev es propietats. Desde Jav aScript podem manipular aquesta estructura. Les possibilitats són enormes.


Objecte document.forms : matriu que conté els f ormularis d'una pàgina.Operador += : af egeix el v alor de la dreta a la v ariable de l'esquerra.Mètode focus() : enf oca, situa el cursor sobre un element.Propietat value : el v alor contingut en un camp de text o f ile.Propietat selectedIndex : l'element seleccionat d'un control de tipus select - option.Propietat options[n].text : el text que acompany a cada opció d'un control tipus select.

1.- Escriure a la pàgina des d'un formulari

Per començar, cal observ ar que un f ormularis té, normalment, una acció associada (action)i un botó que l'executa (submit). Això és massa genèric i, de moment, ens serv eix de poc.

Per tal de manejar amb més f lexibilitat les dades dels camps, haurem de manejar ev ents.Com que aquests són particulars i dif erents per a cada camp, tindrem control totals sobreel que passa a cada un, a més del control general sobre el f ormulari.

La manera més ef ectiv a, però no única, de tractar el contingut del f ormulari, és interceptarl'ev ent onClick d'un simple botó (tipus button). L'utilitzarem en lloc del típic submit. Enaquest cas, com que l'exemple és molt senzill, no utilitzarem cap f unció. L'únic que v olemés escriure el contingut d'un camp de text.

Aquesta no és una bona manera de plantejar les coses. La utilitzem aquí perquè resultamés f àcil d'entendre. Normalment, f arem una f unció i passarem el f ormulari com aparàmetre.

En aquest cas, però, ho f em directament: document.write(nom.v alue), és a dir, escriu al

document el valor del camp "nom". Hi af egim un salt de línia, \n, de manera que, si v olemescriure un altre text sense tornar a carregar la pàgina, ho f aci sota l'anterior.

La f orma correcta de ref erir-nos al text d'entrada és: document.f orms[0].nom.v alue, tot ique, en aquest cas, no cal. L'índex 0 indica que es tracta del primer f ormulari de la pàgina.Una manera més elegant (i segura, sempre podem inserir-ne un altre abans del que hi ha)seria posar-li un nom: <f orm name="f orm1">. Després podem ref erenciar el v alor d'uncamp utilitzant la sintaxi document.f orm1.nom.v alue. Ho v eurem més endav ant.

<form> <input type="text" name="nom" size="32" maxlength="60"> <input type="button" name="enviar" value="Mostrar" onClick="document.write(nom.value)+'\n')"></form>

2.- Escriure en un altre camp i netejar l'entrada

L'exemple anterior no neteja el camp d'entrada. Si es v ol escriure un altre text, s'had'esborrar a mà. A més, escriu directament a la pàgina, i això poques v egades seràpossible.

Com que tenim a l'abast tota l'estructura del f ormulari, ho aprof itarem per env iar el queescriv im a un altre camp. Podem assignar el v alor d'un camp a un altre, o el podem af egir.

En aquest exemple utilitzarem un camp multilínia (textarea) per anar af egint el que escriv imen un camp de text simple. Com abans, utilitzem l'ev ent onClic per indicar què s'ha de f er:

result.v alue += nom.v alue + '\n' ; nom v alue = ' '

Hi ha dues instruccions, separades pel (;). En primer lloc af egim (amb l'operador +=) elv alor del camp nom al del camp result, més el signe de salt de línia. Després assignemuna cadena buida al v alor de nom. Això f arà que s'esborri.

<form> <input type="text" name="nom" size="32" maxlength="60"> <input type="button" name="enviar" value="Mostrar" onClick="result.value += nom.value +'\n' ; nom.value=' '"><br> <textarea name="result" rows="8" cols="40"></textarea></form>

3.- Utilitzar una funció i validar els camps

Tractar l'ev ent onClick amb una f unció dóna més f lexibilitat i possibilitats. D'una banda,podem posar-hi més instruccions i es llegiran millor. De l'altra, podem usar la f unció, ques'escriu només una v egada, des de div ersos llocs de la pàgina o, si l'escriv im en un arxiuextern, accedir-hi des de div erses pàgines.

En el disseny d'una f unció d'aquesta mena, hem de considerar l'ús que en f arem. Si nomésactua sobre un f ormulari, no cal que tingui massa paràmetres; en canv i, si ha de controlardiv ersos f ormularis o pàgines, l'haurem de parametritzar, per tal que sigui més f lexible.

Farem un f ormulari que demani el nom de l'usuari i li permeti triar un arxiu per env iar, amés d'especif icar des d'on l'env ia. De f et, no s'env ia enlloc - només és un exemple -només és un quadre de text, per tal de v eure'n el resultat. Hi posem dos botons, un perexecutar la f unció i un altre per esborrar les dades. El primer passarà el control a la f uncióprocessa().

La f unció rep el nom del f ormulari i comprov a que cap dels campsestigui buit. S'encarrega de f er la comprov ació una estructuracondicional if() que v e a dir, en el cas del nom:

Si el valor del camp "nom" del formulari és buit, alerta que no s'ha

escrit el nom, enfoca aquest camp i retorna el control al formulari.

I, així, per a cada camp que v ulguem v alidar. "Enf ocar" (focus) un element és centrar-hil'atenció o, en el cas dels f ormularis, situar-hi el cursor. Així f acilitarem que els usuarispuguin escriure o triar directament, sense hav er-hi de f er clic abans.

Al camp select, que tria el lloc des d'on s'env ia, f arem la comprov ació utilitzant la propietatselectedIndex, numèrica, que indica quina és l'opció seleccionada. La primera opció és lazero que, intencionadament, hem deixat buida i seleccionada per def ecte. Si l'opcióescollida és aquesta, aleshores no s'ha especif icat el lloc, i hem d'alertar.

Quan v olem saber què s'ha triat en un componen "select", com aquest, utilitzem a propietat"text", que és el text que mostra cada opció: f ormulari.camp.options[ número ].text.

Finalment, si tots els camps són plens, s'escriu al quadre "result" un text basat en elsv alors que ha proporcionat l'usuari. Utilitzem '\n' per indicar un salt de línia dins del camp.També hem d'utilitzar la f órmula de l'antibarra a les alertes, per indicar que posem unapòstrof .

<script language="javascript">function processa( f1 ){ if (f1.nom.value =='') { alert('No has escrit el teu nom') f1.nom.focus() return false } if (f1.arxiu.value =='') { alert('Tria l\'arxiu que vols enviar') f1.arxiu.focus() return false } if (f1.lloc.selectedIndex ==0) { alert('Has d\'especificar un lloc') f1.lloc.focus() return false } f1.result.value = 'Arxiu: ' + f1.arxiu.value + '\n' f1.result.value += 'Enviat des de ' + f1.lloc.options[f1.lloc.selectedIndex].text f1.result.value += ' per ' + f1.nom.value + '\n' f1.result.value += '\nGràcies per la tramesa.'}</script></head>

<body ... ><h3>Enviar un arxiu</h3><form name="form1"> Nom: <input type="text" name="nom" size="42" maxlength="60"><br> Arxiu: <input type="file" name="arxiu" size="28"><br><br> Enviat des de: <select name="lloc"> <option selected></option> <option>Barcelona</option> <option>Girona</option> <option>Lleida</option> <option>Tarragona</option> </select> <input type="button" name="enviar" value="Enviar" onClick="processa(form1)"> <input type="reset" name="reset" value="Esborrar"><br><br> <textarea name="result" rows="6" cols="40"></textarea></form>...

4.- FerÍndex: un exemple d'ús dels formularis

L'eina FerÍndex crea una pàgina d'enllaços en unacarpeta amb arxius numerats, del tipus pag001.htm,pag002.htm, ... Utilitza un f ormulari per establiralgunes característiques de l'índex i v eure'n elresultat.

Tot i que, en aquest moment del curs, resultariacomplicat entendre la codif icació, sí que ens podemf ixar en el f uncionament. Es tria una pàgina model, estria el número de pàgines que es v ol analitzar, les columnes que ha de tenir el llistat, eltipus de codif icació (HTML o Jav aScript) i es prem un botó que engegarà la f unció (enaquest cas, les f uncions) per crear el codi. Tot això a la part superior de la pantalla.

El f ormulari té una segona part (a sota), destinada a l'edició d'aquest codi i la creació de lapàgina en una f inestra nov a. Això ho v eurem més endav ant.

Podem engegar FerÍndex en qualsev ol moment des del menú d'Eines. Cal tenir una carpetaamb pàgines numerades i títols dif erents. Si no en tenim cap a mà, podem prov ar-ho sobrela carpeta d'un mòdul del curs o, millor encara, sobre una còpia d'aquesta carpeta.


SGTI : Curs D108


L'usuari en acció > Variables i operadors

Ja s'han f et unes quantes pràctiques en què s'han utilitzat les v ariables i els operadors.Quan ha estat necessari utilitzar-ne algun s'ha f et la corresponent descripció local d'aquestelement.

Tot i això, és necessari v eure una v isió més global d'aquests elements, és a dir tots ells enconjunt. Les v ariables, tipus de dades i operadors de Jav aScript són molt similars a les ques'utilitzen en C/C++ i Jav a. Però, tenim la sort que es simplif ica molt el seu ús i són mésf lexibles, ja que no és necessari declarar expressament el seu tipus. Es diu per això queJav aScript és un llenguatge amb v ariables de 'tipus lliure'.

En aquesta pràctica es pretén donar una descripció àmplia d'aquests elements i a lav egada v eure'n uns altres de nous, classif icats en els dif erents tipus que existeixen. Ésuna pràctica eminentment teòrica i la utilització del seu contingut es practica al llarg de totel curs.


Tipus de dades : Classif icació de les dades segons la sev a naturalesa.Sentència var : Declara una v ariable.Variables : Elements de programació encarregats d'encabir les dades.Operadors : Elements de programació que realitzen operacions amb les dades oconstants.Caràcters d'escape : Caràcters especials que es poden af egir dins les cadenes.Mètode parseInt() : Retorna el v alor numèric d'una cadena amb dígits en f ormat enter.Mètode parseFloat() : Retorna el v alor numèric d'una cadena amb dígits en f ormat comaf lotant.

1.- Variables.

Les v ariables són uns elements de programació encarregades de contenir les dades ques'utilitzen en el programa. El seu v alor pot canv iar en f unció de com ev olucioni laseqüència del programa.

Per declarar una v ariable s'utilitza la paraula reserv ada var. Aquesta indica que el nom quev a a continuació és una v ariable i li reserv a l'espai corresponent a la memòria. Ladeclaració d'una v ariable es pot f er al principi del programa, o bé, entremig del programa enel moment que es produeix la sev a primera utilització.

A continuació de la paraula var, s'indica el nom que tindrà la v ariable. Aquest nom ha de serúnic i representatiu del v alor que contindrà la v ariable. També se li pot af egir unaassignació inicial.

v ar camí; v ar setmana = 0;

Els noms de les v ariables han de tenir com a primer caràcter una lletra o bé el guió baix (_),el nom pot ser qualsev ol, però, no ha de coincidir amb cap nom igual als de les paraulesreserv ades del llenguatge i no pot contenir espais o caràcters especials.

Jav aScript dif erencia entre majúscules i minúscules. Per exemple, no és la mateixav ariable "mostraValor" que "mostrav alor".

Les següents declaracions de v ariable són incorrectes, ja que el nom no compleix elsrequisits indicats anteriorment:

v ar 1dia;v ar temps passat;v ar temps-passat;

Incorrecte, ja que el primer caràcter és numèric.Incorrecte, ja que s'ha inclòs un espai en blanc.Incorrecte, ja que s'ha inclòs un caràcter especial.

En una mateixa línia es pot declarar més d'una v ariable:

v ar dia1, temps_passat, hora, setmana=0;

A les v ariables se'ls assignen les dades. Les dades es classif iquen segons quin sigui elseu tipus. Els dif erents tipus de dades són:

enters, coma f lotant, hexadecimals i octals, booleans, nuls i cadena

Quan es declara una v ariable, si no se li ha assignat cap v alor inicial, contindrà el v alornull. Posteriorment., quan se li assigna un v alor, la v ariable passarà a tenir assignat undeterminat tipus de dades. El tipus dependrà de quin sigui el v alor assignat inicialment. Acontinuació tenim una breu descripció de cada tipus de dades:

"Enter", aquest tipus correspon a dades numèriques f ormades únicament perv alors enters. Exemple: 25, -234, 7000239, -234000123, etc.

"Coma flotant", aquest tipus correspon a dades numèriques amb decimals. Enaquest tipus dif erenciem la part sencera de la decimal mitjançant la utilització d'unpunt separador. També en f orma part els v alors exponencials mitjançant una "e" o"E" per indicar l'exponent. Per exemple, els següents v alors són números de comaf lotant. 25.0, 0.23452, -1234.9876, -18374592.938457, 3e5, -8E-12.

"Hexadecimals i Octals". Si es desitja representar un número en notacióhexadecimal ho f arem indicant a dav ant del número els caràcters 0x. Per exemple.0x3832, 0xFA74, etc. En el cas dels números en notació octal, s'ha de posar unzero al dav ant. Per exemple: 0374, 01264, 0227, 0202.

Recordem que els dígits del sistema de numeració hexadecimal són 0, 1, 2, 3, 4, 5,6, 7, 8, 9, A, B, C, D, E i F, i els del sistema de numeració octal són: 0, 1, 2, 3, 4,5, 6 i 7.

"Booleà" Aquest és un tipus de dades molt usat en programació. Els dos possiblesv alors que pot tenir són true i false. Aquests v alors són els que se solen obtenirquan s'ef ectuen comparacions lògiques entre dos o més elements.

"Nul" Aquest és el v alor null, un v alor que indicarà que a una v ariable no se li haassignat cap v alor.

"Cadena", s'entén per cadena a un conjunt de caràcters tipus lletres, espais,números i símbols tancat entre cometes dobles ( " ) o entre cometes simples ( ' ).Uns exemples de cadenes correctes i incorrectes poden ser els següents:

Correcte Incorrecte

"Això és una cadena"'Això també és una cadena''Aquesta cadena es "correcta" ja que les cometes inicials són també les del f inal'"2354""Preu = 25 €"

"Cadena incorrecta'"Cadena "incorrecta""Cadena ' incorrecta " '

Les cadenes han d'estar tancades entre el mateix tipus de cometes (simples odobles), és a dir, les que s'utilitzen al principi són les que han de serv ir per tancar lacadena i en el seu interior no s'hi pot trobar les mateixes cometes, però, si que hipodem trobar les cometes de l'altre tipus.

Si dins una cadena es v ol introduir algun caràcter especial com ara un salt de línia ounes cometes simples o dobles, una barra inv ertida, etc. es pot f er utilitzant elsanomenats caràcters d'escape propis del llenguatge C. Entre els més habituals hiha els següents:

\n : introdueix un salt de línia. \' : introdueix unes cometes simples. \" : introdueix unes cometes dobles. \\ : introdueix una barra inv ertida (antibarra).

Aquests elements són molt utilitzats dins les cadenes de text, permeten introduirsalts de línia, també permeten introduir cometes simples i cometes dobles quan els

delimitadors de la cadena també són cometes simples o dobles, respectiv ament.

Els següents exemples mostren la utilització d'aquests caràcters d'escape:

La cadena ... Es v eurà com ...

"Aquí tenim un salt \n de línia."

'Cometa simple a l\'interior.'

"Aquesta \"cadena\" conté \". "

Aquí tenim un saltde línia.

Cometa simple a l'interior.

Aquesta "cadena" conté ".

Per acabar aquest apartat, v eiem més exemples de declaració de v ariables, a la columnade l'esquerra hi tenim unes declaracions de v ariables no inicialitzades (es podran inicialitzarposteriorment, de moment contenen el v alor "null"), per tant no tenen un tipus de dadesdef init.

En canv i en la columna de la dreta hi v eiem unes v ariables inicialitzades: les dues primeressón tipus "cadena", la tercera és tipus "coma f lotant", la quarta és tipus "enter" i l'última éstipus "booleà":

Variables no inicialitzades Variables inicialitzades

v ar nom;v ar cadena;v ar preu;v ar quantitat;v ar esMajor;

v ar nom = "Ramon";v ar cadena = 'El preu de cost dels productes';v ar preu = 223.14;v ar quantitat = 12;v ar esMajor = true;

2.- Variables locals i globals.

Segons sigui el lloc on es declarin les v ariables, aquestes es poden classif icar en v ariablesglobals o locals.

Les v ariables globals es declaren f ora de qualsev ol f unció. Aquestes v ariables poden serutilitzades des de qualsev ol lloc de la pàgina, en scripts situats en el bloc body o en el blochead i dins i f ora de qualsev ol f unció. És a dir, la sev a v ida és global i existiran mentre lapàgina estigui carregada en el nav egador.

Les v ariables locals es declaren dins d'una f unció. Aquestes v ariables existiran solamentdins d'aquesta f unció i desapareixeran quan no s'estigui executant el codi de la f unció.

Observ eu el següent codi. És un exemple per observ ar el comportament de les v ariablesglobals i locals. La v ariable de nom varGlobal està def inida f ora de qualsev ol f unció, pertant, al carregar la pàgina aquesta v ariable quedarà declarada i el seu ús serà v àlid des dequalsev ol lloc de la pàgina web, mentre aquesta estigui carregada.

En canv i, la v ariable de nom varLocal, està def inida dins d'una f unció. Per tant, solamentes declararà quan s'executi el codi d'aquesta f unció i desapareixerà quan la f unciófuncioProva() acabi la sev a execució.

La f unció funcioProva(), a més, conté un alert() que mostra el contingut de la v ariablevarLocal i també conté dues instruccions per incrementar en una unitat a les v ariablesvarLocal i varGlobal.

El f ormulari que hi ha dins el bloc <body> conté tres botons que serv eixen per mostrar elv alor de les dues v ariables.

- El botó 1 mostra mitjançant un alert() el v alor de la v ariable varGlobal.

- El botó 2 intenta mostrar, mitjançant el sistema del botó 1 el v alor de varLocal, però, sempre dóna error, indicant que aquesta v ariable no existeix.

- El botó 3 executa la f unció funcioProva(), per tant, es declara localment a la v ariable varLocal i es mostra el seu contingut mitjançant alert(), també s'incrementa a varLocal

i varGlobal en una unitat.

Observ eu que sempre que es prem el botó 3, el v alor que es mostra per a varLocal sempreés 0, malgrat existir la línia ++v arLocal; . El motiu és perquè aquesta v ariable, tot i que ésincrementada, desapareix en acabar la f unció funcioProva() i la propera v egada es f a clicsobre el botó 3, aquesta v ariable es torna a crear de nou i se li assigna el v alor 0 i el tornaa mostrar.

En canv i, si hem polsat múltiples v egades al botó 3, i posteriorment polsem sobre el botó1, observ arem que el v alor de la v ariable varGlobal si que s'ha incrementat, ja que aquestav ariable es accessible des de qualsev ol lloc de la pàgina web i l'increment prov ocat per lalínia ++v arGlobal es manté encara que hagi acabat la f unció funcioProva().

<html><head><script language="JavaScript">

var varGlobal=0;

function funcioProva() { var varLocal=0; alert(varLocal); ++varGlobal; ++varLocal; }

</script></head><body><form> <input type="button" value="1- Mostra varGlobal" onClick="alert(varGlobal);"><p> <input type="button" value="2- Mostra varLocal, (error)" onClick="alert(varLocal);"><p> <input type="button" value="3- Mostra varLocal, (funcioProva)" onClick="funcioProva();"></form></body></html>

3.- Operadors.

Els operadors són els elements de codi que ens serv iran per f er operacions amb lesv ariables i altres v alors constants. En Jav aScript s'utilitzen bàsicament els mateixosoperadors que en C/C++.

Els operadors es classif iquen en: Operadors d'assignació, operadors aritmètics, operadorslògics, operadors de comparació, operadors condicionals i operadors de cadena (existeixenaltres tipus, però no els tractarem ja que són d'ús molt específ ic).

Les taules que v énen a continuació classif iquen els dif erents operadors amb una descripciói un exemple d'ús.

Operadors d'assignació:

Operador Descripció Exemple d'ús

=Assigna el v alor de l'operand de la dreta a l'operand del'esquerra.

t = r ;

+ =Assigna la suma dels operands de la dreta i l'esquerra al'operand de la dreta.

t += r ;(t = t + r)

- =Assigna la resta dels operands de la dreta i l'esquerra al'operand de la dreta.

t -= r ;(t = t - r)

* =Assigna el producte dels operands de la dreta i l'esquerra al'operand de la dreta.

t *= r;(t = t * r)

/ =Assigna el quocient dels operands de la dreta i l'esquerra al'operand de la dreta.

t /= r;(t = t / r)

% =Assigna el residu del quocient dels operands de la dreta il'esquerra a l'operand de la dreta.

t %= r ;( t = residu(t/r))

Operadors aritmètics:


Binaris:

+ Suma el v alor de dos operands. a + b;

- Resta el v alors de dos operands. a - b;

* Multiplica el v alor de dos operands. a * b ;

/ Div ideix els v alors de dos operands. a / b ;

% Calcula la resta de la div isió de dos operands. a % b;

Monaris:

– Canv ia el signe de l'operand de la sev a dreta. - preu ;

++ Incrementa en un unitat l'operand de la sev a dreta o esquerra.++a ;a++;

– –Disminueix en una unitat l'operand de la sev a dreta oesquerra.

--a;a--;

Operadors lògics:


&&Operador binari. Fa l'operació "i lògica", retorna true si els dosoperands són true.

a && b;

||Operador binari. Fa l'operació "o lògica", retorna true si un delsdos operands és true.

a | | b;

!Operador monari. Fa l'operació "negació lògica", retorna true sil'operador és f alse.

! a;!esMenor;

Operadors de comparació:


= = Retorna true si els dos operadors són iguals. a = = b;

! = Retorna true si els dos operadors són dif erents. a ! =b;

>Retorna true si l'operador de l'esquerra és més gran que el dela dreta.

a > b;

<Retorna true si l'operador de l'esquerra és més petit que el dela dreta.

a < b ;

> =Retorna true si l'operador de l'esquerra és més gran o igualque el de la dreta.

a > = b ;

< =Retorna true si l'operador de l'esquerra és més petit o igualque el de la dreta.

a < = b;

Operador condicional ( ? : ) :

Aquest és un operador ternari, la sev a sintaxi és la següent:

(condició) ? v alor1 : v alor2

Si el contingut del parèntesi (la condició) és true, s'av aluarà el v alor1, de cas contrari, si lacondició és f alse, s'av aluarà el v alor2. El següent exemple ens mostra una possibleutilització.

a = (3>2) ? 10 : 2 ;

En aquesta assignació, la v ariable a contindrà el v alor 10. Per determinar aquest v alor,inicialment, s'av alua la condició (3 > 2), com que és certa, es retorna el v alor 10 per f erl'assignació. Si la condició hagués estat f alsa, s'hauria retornat el v alor 2.

Operador de concatenació de cadenes:

L'operador binari +, és un operador de cadena que ens permet concatenar dues cadenesalf anumèriques. La sev a aplicació ens retorna una nov a cadena que serà la concatenacióde les altres dues sobre les que opera.

Exemple:

v ar cadena1 = "Hola, "; v ar cadena2 = "que tal"; v ar cadena3 = cadena1 + cadena2;

La v ariable "cadena3" contindrà el v alor: "Hola, que tal".

4.- Barreja de tipus.

Operacions entre cadenes i valors numèrics:

En algunes ocasions és necessari concatenar cadenes amb dades que no són cadenes, perexemple, pot ser necessari concatenar un tipus cadena amb un tipus enter. En aquests casoses pot fer directament ja que JavaScript detecta aquesta situació i, automàticament, efectua laconversió del tipus numèric a cadena. En el següent exemple:

var perfecte = "Nota: " + 10;

La variable "perfecte" contindrà el valor de cadena "Nota: 10", ja que el numèric 10 s'hauràconvertit automàticament, per part de JavaScript, en una cadena.

La situació contrària no és tan simple d'implementar, si es vol fer una suma algebraica d'unvalor de cadena que conté dígits numèrics amb un valor numèric tipus enter, és necessariefectuar una conversió prèvia mitjançant la funció parseInt(cadena). Per exemple: varnumero = 3 + "10"; és incorrecte. La forma correcta seria la següent:

var numero = 4 + parseInt("10"); //numero valdrà 14

La sintaxi completa de parseInt() és: parseInt(cadena[, base]), on el paràmetre opcional base

indica la base de numeració.

Pel cas dels valors tipus coma flotant tenim una altra funció equivalent: parseFloat(cadena). Aquesta funció retornarà el valor numèric en coma flotant d'una cadena amb dígits numèricsen un format de coma flotant.. Per exemple:

var numdec = 3 + parseFloat("3.6"); //numdec valdrà 6.6

SGTI : Curs D108


L'usuari en acció > Obre la finestra

Window és l'objecte més alt de la jerarquia, inclou tots els

altres. Cada f inestra del nav egador és una instància d'aquest

objecte. Les sev es propietats i mètodes ens inf ormen sobre

les característiques i comportaments de la f inestra i, si el

nav egador ho permet, les podrem manipular.

Quan f em ref erència als elements de la pròpia f inestra no

utilitzem la nomenclatura completa, tot i que ho podem f er.

Tant és si escriv im "location" com "window.location". Si no ho

especif iquem, el nav egador suposa que ens ref erim a la f inestra activ a (potser hauríem de

dir "enf ocada"?). En canv i, sí que és obligatori usar aquesta nomenclatura quan ens ref erim

a una altra f inestra, no la paraula "window", sinó el nom de la v ariable que en conté la

instància:

n o v a F i n e s t r a . d o c u m e n t . w r i t e ( . . .

Més endav ant, quan tractarem el DOM (Document Object Model), v eurem amb més detall

tota la jerarquia d'objectes Jav aScript.


Objecte window : la f inestra.

Declaració with() : estableix l'objecte base per a un conjunt d'instruccions.

Mètode open() : obre una nov a f inestra del nav egador.

Mètode close() : tanca la f inestra, el document o l'element que especif iquem.

1.- Com ho fa Dreamweaver

Amb el Dreamweav er tenim el "Comportamiento" "Abrir v entana del nav egador" que ens

f acilita la creació del codi necessari per obrir una nov a f inestra del nav egador.

Aquesta tindrà les característiques que establim al quadre de diàleg: pàgina que obrirà,

amplada, altura, barres de desplaçament, menús, eines, estat, ... si la v olem maximitzar i,

també, un nom. Podrem f er ref erència a la f inestra utilitzant aquest nom, per exemple:

<a href ="pagina1.htm" target="lamev af inestra"> ... </a>

Es dóna per f et que, a la f inestra, hi haurà una altra pàgina i, l'únic que podem f er des de

Dreamweav er o HTML és això, obrir pàgines. Si v olem manipular el contingut des de la

pàgina que l'ha oberta, o v olem llegir inf ormació de la f inestra, necessitem Jav aScript.

Obrim el Dreamweaver amb un arxiu nou.A la barra "Lanzador" fem clic a la icona"Mostrar Comportamientos". També hopodem fer des del menú "Ventana -Comportamientos" o amb les teclesMajús+F3.

A la nova finestra, fem clic al botó "+" itriem "Abrir ventana del navegador".Deixem en blanc "Mostrar URL", marquem algunes opcions, li posem un títol i acceptem.Mirem ara la vista de codi:

<script language="javascript"></script></head>

<body bgcolor="#FFFFFF" text="#000000"onLoad="MM_openBrWindow('','win1','toolbar=yes,scrollbars=yes,resizable=yes')">...

Quin és el problema? Doncs que l'única opció que ens ha deixat per referir-nos a la novafinestra és a través del HTML, com a destí (target) d'un formulari o un vincle. Per podermanejar la nova finestra des de JavaScript, necessitem una variable global. Això sí: ha deixatpistes que ens permetran crear la nostra pròpia funció.

2.- Obrir una finestra

Des d'un ev ent (onClick, onLoad) podem obrir una nov a f inestra amb la declaració:

onLoad = "window.open( adreça , nom , característiques )"

En la majoria de casos, però, és millor f er que l'ev ent es dirigeixi a una f unció, així tindrem

més possibilitats i control. Dreamweav er n'utilitza una que podem f er serv ir com a base.

Assignarem la f inestra a una v ariable global, def inida f ora de la f unció. En aquest exemple

no caldria, però ho f em així per assegurar que ens hi podrem ref erir des d'altres f uncions.

Per f er l'exemple utilitzem l'arxiu del tercer exemple de la pràctica 2.

La f unció rep com a paràmetre el nom del f itxer que s'ha d'obrir a la nov a f inestra. A

continuació enf oca la f inestra "mare" per desmarcar l'enllaç i assigna l'acció (window.open)

a la v ariable global. Finalment tanca el document de la f inestra, l'enf oca i retorna "f als".

A la secció <body > f arem l'enllaç amb un petit truc: deixarem l'adreça en blanc i

assignarem l'acció a lev ent onClick, utilitzant la f orma onClick="return(funció())". Com

que la f unció que s'executa retorna f als, el v incle buit no s'executarà.

<script language="javascript">var finestrafunction obreFinestra(fitxer) { window.focus() finestra = window.open( fitxer, 'win1', 'width=440,height=300,top=100,left=100' ) finestra.document.close() finestra.focus() return false}</script></head>

<body ...><a href="" onClick="return( obreFinestra('m3p2_3.htm') )">Enviar arxius</a><br>...

3.- Escriure a la finestra

En el cas anterior teníem un arxiu que s'obria en una f inestra. Ara crearem una f inestra

sense arxiu i l'omplirem de contingut. Utilitzem, naturalment, finestra.document.write().

De f et, podem f er div erses accions sobre el document o altres components de la f inestra:

f inestra.element[.subelements].acció()

També podem consultar i, depenent del nav egador, modif icar, propietats, v alors en camps

de f ormularis i, f ins i tot, v ariables contingudes en scripts. En el cas que ens ocupa, però,

només es tracta d'escriure a la f inestra. Agaf em com a base l'exemple anterior.

La f unció rep com a paràmetre un codi de color, que serà dif erent segons quin sigui l'enllaç

que l'ha f eta obrir. A continuació s'escriu tota l'estructura d'una pàgina web senzilla. Com a

color de f ons utilitza el del paràmetre i, a més, l'escriu a la pàgina.

Com que hem d'utilitzar mètodes de l'objecte "document" de la f inestra en div erses línies,

emprem la declaració with(), que ens permet especif icar sobre quin objecte base s'apliquen

les instruccions de tot un bloc. A dintre del bloc, no cal escriure l'objecte.

Només hem utilitzat DHTML i Jav aScript, de manera

que el propi inspector pot ser objecte d'estudi, més

endav ant, per v eure com s'ha f et.

Només pot f uncionar a la mateixa màquina on és la

pàgina que inspecciona, és a dir, ni el podem utilitzar

des de la xarxa, ni podem analitzar pàgines a trav és

d'una connexió.


SGTI : Curs D108

Mòdul: 3

L'usuari en acció > Comparacions aleatòries

En aquest mòdul ja hem v ist uns quants elements interessants de Jav aScript que

permeten ef ectuar coses que no seria possible f er-ho solament amb HTML. Hem v ist que

són els ev ents i alguns exemples d'ús, hem après i utilitzat f uncions, treball amb f ormularis

i creació de nov es f inestres.

Ara ho posarem en pràctica.

EXERCICIS:

Els exercicis es classif iquen 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 modif icarem 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 dif erent 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 respectiv ament amb alguna v ariació que f aci 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

modif icar-los lleugerament.

Bloc II:

El quart exercici consta d'una pàgina que contindrà una barreja dels conceptes v istos en les

pràctiques 1, 2 i 4 i part de les pràctiques del mòdul anterior.

La sev a descripció és la següent:

En obrir-se la pàgina ens ha de mostrar un missatge de

benv inguda i en tancar la f inestra un missatge de comiat,

mitjançant un alert (v egeu el m3p1apartat 1). Aquesta f inestra ha

de contenir un f ormulari i un text descriptiu de com s'ha f et.

Opcionalment, també contindrà un enllaç per obrir una nov a

f inestra 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 conv idar a introduir un v alor de text o numèric a cadascun d'ells

i al f er clic sobre el botó s'ha d'inv ocar una f unció que escrigui un text sobre el camp de

text 3 indicant si el contingut dels dos camps 1 i 2 són iguals o dif erents. (guieu-v os pel

m3p2 ap2 i ap3). Quan els camps 1 o 2 canv iïn de v alor, s'ha d'esborrar el contingut del

camp 3, o sigui, rescriure'l amb ' ' (v egeu m3p1ap1).

Apartat opcional

L'enllaç ha d'inv ocar a una altra f unció que sol·liciti un v alor numèric n mitjançant un

prompt. S'ha de v alidar que aquest és numèric (ha de mostrar un missatge d'error amb alert

en cas contrari).

Si el v alor numèric és correcte, ha d'obrir una f inestra f illa (el seu

contingut no ha d'existir com a tal pàgina html) (v egeu m3p4 ap2) i,

dinàmicament, s'ha d'escriure en el seu interior una taula de 10 x 10

cel·les (v egeu m2p1ap2) i cada cel·la ha de contenir un número

aleatori entre 0 i n (v egeu m3p1ap4). També ha de contenir un link

que serv eixi per tancar-la (m3p4 ap4).

Els passos a seguir per f er aquest exercici no. 4 poden ser els

següents:

1.- Creem la pàgina mare mitjançant l'editor del Dreamweav er o la llibreta amb la sev a

estructura mínima, introduïm els ev ents onLoad i onUnload dins la directiv a <body ...> per

crear els missatges de benv inguda i comiat.

2.- Dins el bloc <body > creem el f ormulari, a mà, amb els tres camps de text i el botó.

Creem una nov a f unció, de nom compara(), que en inv ocar-la ef ectuï una comparació del

contingut del camp 1 i camp 2 i escrigui 'són iguals' o 'són dif erents' dins el camp 3.

Associem aquesta f unció al controlador d'ev ent onClick del botó.

3.- Af egim al camp 1 i camp 2 un controlador d'ev ent onChange que, quan s'activ i, assigni

al camp 3 una cadena buida, esborrant el seu contingut.

4.- Creeu una nov a f unció de nom numsAleatoris(), que en inv ocar-la sol·liciti un número

mitjançant un prompt, comprov eu amb isNaN() si el v alor introduït és un número. Si no és

un número, es mostrarà un missatge d'error amb un alert i acabarà la f unció.

5.- Si s'ha introduït un número correctament, s'ha de crear una nov a f inestra f illa, al

crear-la, heu d'assignar una v ariable, de nom finestra, al v alor retornat per

windows.open(...). Aquesta v ariable ens serv irà per f er les ref erències posteriors a la

f inestra f illa.

6.- Posteriorment, heu de crear dinàmicament (for...) la taula de 10x10 dins la f inestra f illa

amb el mètode write() ref erenciat 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 f inestra f illa, un link nul que

en f er-li clic tanqui la f inestra. La f unció ha d'acabar amb un return false, per ev itar que

s'executi el link nul que la inv ocarà.

8.- Heu de f icar a la pàgina un enllaç nul amb el text "Crear 100 nos. aleatoris" que enl f er-li

clic, inv oqui a la f unció numsAleatoris().

9.- Un cop f uncioni adequadament tot l'exercici, introduïu a la pàgina, conjuntament amb el

f ormulari i l'enllaç, una descripció clarif icadora de com ho heu f et per al v ostre tutor.

Doneu-li també, els f ormats estètics que considereu oportuns.

Trucs, consells i receptes

La f orma d'editar els exercicis és mitjançant el Dreamweav er amb la v ista código o

mitjançant la llibreta, v isualitzant el resultat des del nav egador.

L'exercici 4 és més complex. No el v ulgueu f er tot de cop i prov ar-lo al f inal. Aneu per

passos, seguint la seqüència indicada i al f inal de cada pas comprov eu el correcte

f uncionament.

Guieu-v os amb les ref erències a les pràctiques indicades per a cada apartat i copieu i

enganxeu el tros de codi que us f aci f alta i modif iqueu-lo adequadament.

Env ieu un missatge a la v ostra tutoria un cop l'exercici estigui penjat a Internet. Indiqueu

sempre l'adreça de f orma que s'hi pugui accedir directament.


SGTI : Curs D108

Mòdul: 4

Atenció a la diversitat

És clar que els humans som dif erents els uns dels altres - sortosament - i que, sov int, enscosta posar-nos d'acord. Tot i que les TIC són gestionades per màquines i programes, hihem deixat l'empremta i la div ersitat és ev ident. A més, la tecnologia av ança molt depressa i el ritme de renov ació dels usuaris, de v egades, no tant.

Jav aScript v a néixer amb la v ersió 2 de Netscape i, des d'aleshores, ha ev olucionat. Alprincipi tenia les instruccions bàsiques per actuar sobre pàgines web, però no disposav a degaires recursos per crear ef ectes. Amb l'aparició dels f ulls d'estils i de les capes,Jav aScript s'ha adaptat per tal de poder manejar aquestes nov es f uncionalitats.

La v ersió 1.1, que acompany av a els nav egadors 3.0, ja tractav a imatges i Array s. A partirde la v ersió 1.2 (nav egadors 4.0), i coincidint amb un període de lluita pel mercat,comencen les incompatibilitats greus. Microsof t s'inv enta la sev a pròpia v ersió, JScript.Aquestes dif erències es mantenen, tot i que hi ha hagut intents per suav itzar-les.

Si amb els nav egadors ja hi ha dif erències, amb la resta del programari i amb els equipsinf ormàtics podem trobar encara més v arietat. Serv idors, sistemes operatius i maquinaridiv ers intenten v eure les nostres pàgines, i tots esperen v eure-les bé.

Quan disseny em, no podem pensar que tothom té,per exemple, un monitor i una tarja gràf ica com elsnostres. Això ens obliga a f er div erses prov es iadoptar solucions, sov int, salomòniques, perquèresulta pràcticament impossible adaptar-se a totesles possibilitats i, alhora, f er una mica de disseny .

Podem usar una gamma de colors estàndard, perexemple, la que proporciona Dreamweav er. Tambépodem disseny ar per a 800x600 i esperar que lamajoria dels usuaris tinguin aquesta resolució osuperior i que, en aquest últim cas, no els molesti massa desaprof itar una part de lapantalla.

Està bé que pensem en mínims i f em el que calgui per assegurar que tothom podrà v eureel que pretenem mostrar. Però, i si la pàgina tingués la capacitat de saber on és? I si, al'hora de disseny ar, poguéssim tenir en compte els div ersos entorns, i actuar enconseqüència? Doncs, alguna cosa tenim, encara que potser no tot el que v oldríem.

El nav egador maneja una estructura, el DOM (Document Object Model) que conté algunesinf ormacions sobre, per exemple, el propi nav egador o la pantalla, i ens proporciona unsmètodes (una interf ície) per poder-les manipular ... relativ ament.

Veurem com es prepara una pàgina per tal que f uncioni amb tots dos nav egadors. A més,treballarem amb els estils i les propietats de pantalla, per aconseguir una aparença similar.Caldrà conèixer una mica millor com s'organitzen els objectes de la pàgina.

En aquest mòdul:

Pràctica 1: El model d'objectes (DOM)

Pràctica 2: Detectar el navegador

Pràctica 3: Afinem els estils

Pràctica 4: Control de l'entorn

Exercic is: Informe del client

Per fer les pràctiques, obrim el Dreamweaver i ens situem a la "Vista de código", al mig de lasecció <body> que, normalment, és a la línia 8. Hi hem d'inserir el codi dels exercicis. Si notenim activada la numeració de línies, anem al menú Ver - Opciones de vista de Código -Números de líneas i l'activem.


SGTI : Curs D108


Atenció a la diversitat > El model d'objectes (DOM)

El Model d'Objectes del Document és l'estructura f ormadaper tots els elements manipulables de la pàgina. Juntamentamb els ev ents proporciona la interf ície que permet alsscripts comunicar-se amb el nav egador.

L'objecte més alt de la jerarquia és window. És tot el que hiha a la f inestra. Quan ens ref erim a la pantalla, nav egador,marcs, adreça o historial, ho f em a partir de l'objecte window.

L'altre objecte important és document, l'amo de tots elselements de la pàgina: cos, paràgraf s, enllaços, f ormularis,imatges, estils, scripts, ...

Un objecte és una estructura que conté dades assignades av ariables, que anomenem propietats, i unes f uncions quemanipulen aquestes v ariables, i que s'anomenen mètodes.

A partir d'aquesta estructura es crea la programacióorientada a objectes, basada en l'herència de propietats imètodes, i en el polimorf isme, que f a que les v ariables i f uncions semblants d'objectesdif erents puguin tenir el mateix nom. Jav a i C++ són llenguatges orientats a objectes, elJav aScript també ho és, tot i que més simplif icat i f lexible.

No cal que ens preocupem, de moment, pels conceptes d'herència i polimorf isme. EnJav aScript, l'única herència és "f ormar part de", és a dir, el document f orma part de laf inestra, un f ormulari f orma part del document i un camp de text f orma part del f ormulari.Ens podem ref erir a qualsev ol propietat d'un objecte utilitzant la sintaxi del punt, que ja hemv ist:

f i n e s t r a . d o c u m e n t . f o r m u l a r i . c a m p . v a l u e

Pel que f a al polimorf isme, usar els mateixos noms per a propietats i mètodes similars enobjectes dif erents, només ens f arà la programació més f àcil.

Window, document i tots els seus deriv ats no són els únics objectes que manejaJav aScript. N'hem v ist d'altres, com ara Array , Math o String. De f et, tota l'estructura enbasa en object, la "primitiv a" que permet deriv ar els altres. Aleshores, quina és ladif erència?

Podríem dir que hi ha dos grups o classes d'objectes: d'una banda, aquells que f anf uncions internes del llenguatge, no tenen una representació a la pàgina i s'han de crearamb la declaració new(). D'altra banda, els objectes del DOM, que es corresponen ambelements de la pàgina i s'han de crear... amb HTML. També és cert que podem crearobjectes DOM des de Jav aScript, per exemple, ja hem utilitzat window.open(). En la majoriadels casos, però, ja són a la pàgina i Jav aScript només els maneja.


La llista d'objectes, propietats i mètodes del DOM depèn del nav egador. Tot i així, hi ha unsestàndards més o meny s acceptats que f uncionen en la majoria dels casos.

Aquest capítol és més teòric que no pas pràctic, de manera que hi ha molts conceptes. Nohi són tots, i l'explicació de cadascun és molt breu. Presentar el DOM com cal requeriria totun manual, així que, li f arem una ullada i l'anirem coneixent millor la resta del curs.

En aquesta pràctica només hem d'observar les pecesdel DOM i, per això, utilitzarem l'inspector d'objectes,que ja hem vist en altres pràctiques.

En primer lloc, obrim una pàgina. Per defecte, al marcde l'inspector apareix l'objecte document. Els seus

objectes apareixen com a enllaç.

Si volem veure un altre objecte, l'escrivim al quadre Obji fem clic en el botó Mostrar. També ho hem de fer si lapàgina del marc de la dreta canvia, per exemple, perquè hem fet clic en un enllaç.

Segons el navegador i la versió, ens podem trobar amb una llista curta o llarguíssima. A més,cada cop que surt una nova versió, s'afegeixen objectes, propietats i/o mètodes "segons lavisió del fabricant", que poden no tenir equivalents als altres navegadors. La llista següent és,doncs, limitada i obsoleta, però només podia ser així.

1.- Window

Cada f inestra del nav egador, o cada "f rame" en una estructura de marcs, és una instànciade l'objecte window. Si, des de Jav aScript, ens v olem ref erir a la pròpia f inestra o marc,podem utilitzar els noms window o self. Tot i que no és necessari, el codi queda més clar.

En canv i, si que és obligatori utilitzar un nom quan, des d'una f inestra o marc, ens v olemref erir a una altra o als elements que conté. Si no ho f éssim, s'entendria que v olem actuarsobre la pròpia f inestra o marc i, és clar, no f uncionaria.

Ja hem v ist algunes propietats, mètodes i objectes de window. Aquí en tenim un resum.

Objectes:

document: la pàgina continguda en la f inestra o marc.event: els ev ents que es produeixen en l'àmbit de la f inestra o marc.frames: cadascun dels marcs, si n'hi ha.history: llista d'adreces v isitades i mètodes de desplaçament.location: inf ormació sobre l'adreça de la pàgina que mostra la f inestra.navigator: el nav egador que maneja la f inestra.screen: propietats i mètodes de la pantalla.

Propietats:

closed: especif ica que la f inestra és tancada..defaultStatus: missatge per def ecte a la barra d'estat.innerHeight, innerWidth: dimensions (v ertical i horitzontal) de l'àrea de contingut.length: número total de marcs (f rames) que conté la f inestra.locationbar, menubar: barres d'adreces i menús.name: el nom de la f inestra, que ha de ser únic.opener: si s'ha obert amb el mètode open, el nom de la f inestra que ha obert l'actual.outerHeight, outerWidth: dimensions, v ertical i horitzontal, de la f inestra.parent: la f inestra que conté a la f inestra o marc actual.scrollbars, statusbar: barres de desplaçament i d'estat.status: missatge a la barra d'estat.top: l'objecte window més alt en una estructura de marcs.

Mètodes:

alert: mostra un missatge d'alerta.blur: treu el f ocus de la f inestra o de l'objecte especif icat.captureEvents: prepara la f inestra o el document per capturar un tipus d'ev ent.close: tanca la f inestra especif icada.confirm: mostra un quadre de diàleg amb les opcions Acceptar i Cancel·lar.find: cerca una cadena especif icada en una f inestra o marc.focus: enf oca l'objecte especif icat.handleEvent: inv oca la f unció que controla un determinat ev ent.moveBy: mou la f inestra una quantitat especif icada en píxels.moveTo: mou la f inestra a unes coordenades de la pantalla (superior, esquerra).open: obre una f inestra nov a.print: imprimeix el contingut de la f inestra o del marc.prompt: mostra un quadre de diàleg amb un missatge i un camp d'entrada de dades.releaseEvents: allibera els ev ents capturats del tipus especif icat.resizeBy: redimensiona la f inestra mov ent la cantonada inf erior dreta una quantitat.resizeTo: redimensiona la f inestra a la mida especif icada.scroll: desplaça ta f inestra a una coordenada especif icada.scrollBy: desplaça l'àrea de contingut una quantitat especif icada.scrollTo: desplaça el contingut d'una coordenada a la cantonada superior esquerra.setHotKeys: activ a o desactiv a les tecles ràpides d'una f inestra.setInterval, setTimeout, clearInterval i clearTimeout: controlen els temporitzadors, i els

v eurem detalladament en una altra pràctica.

2.- Document

L'objecte document és la pàgina, el seu contingut, les sev es propietats i els mètodes perpoder-hi env iar i controlar codi HTML. El nav egador crea una instància de l'objectedocument per cada etiqueta <body >. Cada f inestra o marc té el seu objecte document.

Hem v ist alguns dels seus objectes, propietats i mètodes. Ara en f em un resum.

Objectes:

all: tots els elements de l'objecte document. Només Internet Explorer.anchors: col·lecció dels punts de f ixació amb nom o identif icador.applets: els applets de Jav a del document.body: el cos, entre les etiquetes <body > i </body >.embeds: objectes "clav ats" al document.forms: Array que conté una entrada per a cada f ormulari de la pàgina.frames: tots els objectes window presents al document.images: un Array amb totes les imatges del document i les sev es propietats.layers: Array que conté una entrada per a cada capa de la pàgina. Només Netscape.links: els enllaços de la pàgina.plugins: un Array amb tots els plug-ins del document.styleSheets: tots els f ulls d'estils del document. També els enllaçats.

Propietats:

alinkColor: codi de color dels enllaços actius.bgColor: codi de color del f ons de la pàgina.cookie: especif ica una cookie, inf ormació que es guarda a l'ordinador del client.domain: nom del domini que ha serv it la pàgina.fgColor: codi de color del text.fileSize: mida (pes) del document, en by tes. Només Internet Explorer.formName: cada nom de f ormulari especif icat al document.height: altura del document, en píxels.lastModified: cadena que especif ica la data de l'última modif icació de la pàgina.linkColor: color dels enllaços.title: títol de la pàgina.URL: adreça completa del document.vlinkColor: codi de color dels enllaços v isitats.width: amplada del document, en píxels.

Mètodes:

captureEvents: prepara la f inestra o el document per capturar un tipus d'ev ent.close: tanca el document i l'obliga a mostrar-se.getElementById: retorna l'objecte que té l'identif icador especif icat. Només v ersions 6getElementsByName: retorna una col·lecció d'objectes amb el mateix nom. Versions 6getSelection: retorna una cadena que conté el text actualment seleccionat a la pàgina.handleEvent: inv oca la f unció que controla un determinat ev ent.open: obre un espai per recollir la sortida dels mètodes write o writeln.releaseEvents: allibera els ev ents capturats del tipus especif icat.write: escriu expressions HTML al document de la f inestra especif icada.writeln: escriu al document i f orça un salt de línia en acabar.

Com a complement d'una llista que sembla que no s'hagi d'acabar mai, una funció queensenya com podem modificar la propietat document.bgColor (atenció a la C majúscula) apartir d'uns botons que pot prémer l'usuari.

El formulari mostra molts més matisos (4096) que no pas els anomenats "colors segurs"(216), que utilitza el Dreamweaver. La funció resulta senzilla d'entendre i, en tot cas, ens potresultar útil per provar noves combinacions.

Mireu el codi i proveu de contestar aquesta pregunta: com ho hem fet per aconseguir que elscamps de text no siguin editables? (és a dir, que no s'hi pugui escriure). Una pista: l'operadorespecial this, situat en una etiqueta, especifica el propi objecte.

SGTI : Curs D108


Atenció a la diversitat > Detectar el navegador

El DOM i el model d'ev ents que manegen els dif erents nav egadors i v ersions sóndif erents. Això implica que els scripts han de tenir en compte aquestes dif erències, siv olem que f uncionin en tots dos.

Els nav egadors actuals permeten modif icar gairebé tots els elements de la pàgina quan jaha estat descarregada. Netscape 4.7, en canv i, és més restrictiu, com ho és també quanes tracta de f ulls d'estils i, f ins i tot, d'algunes etiquetes HTML.

No és estrany que Internet Explorer sigui el pref erit a niv ell mundial (75% d'usuaris, icreixent). Això, però, no v ol dir que tothom l'utilitzi. El seu lligam amb Windows f a que elsusuaris d'altres Sistemes hagin d'utilitzar Netscape o Mozilla, i no els podem pas oblidar.L'ideal és f er pàgines amb la màxima compatibilitat entre tots els exploradors.

En aquesta pràctica aprendrem a detectar el nav egador i dirigir el f lux de la pàgina en un oaltre sentit , de manera que puguem superar, en la mesura que sigui possible, les greusincompatibilitats que els separen.


Objecte navigator : el nav egador.Propietat appName : mostra el nom del nav egador.Propietat appVersion : v ersió del nav egador, en f ormat text.Propietat platform : la "plataf orma" (sistema operatiu) del client.Propietat userAgent : capçalera HTTP que inf orma sobre el nav egador.Mètode javaEnabled() : comprov a si es poden executar applets de Jav a.Objecte document.all : tots els elements de l'objecte document. Només Internet Explorer.Objecte document.layers : Array que conté una entrada per a cada capa. NomésNetscape.

1.- Navegador i versió

Hi ha molts nav egadors i v ersions. Com que aquests programes són els responsablesd'interpretar la pàgina i, entre ells, hi ha dif erències notables, serà dif ícil que tot el queescriv im f uncioni de la mateixa manera en totes les ocasions. De v egades hauremd'escriure porcions de codi o, f ins i tot, pàgines senceres, específ iques per a cadanav egador.

Sortosament, Jav aScript reconeix el nav egador. Podem consultar les propietats de l'objectewindow.navigator per saber amb quin estem tractant. Per v eure-les, obrim qualsev olpàgina amb l'inspector d'objectes, escriv im "nav igator" al quadre "Obj" i f em clic en elbotó "Mostrar".

En aquest exemple només comprov arem dues propietats: el nom del nav egador(appName) i la v ersió (appVersion). Aquesta última és un text i, en alguna ocasió,necessitarem discriminar a partir del número pelat. Cap problema, ho passem per la f uncióparseInt().

El número de v ersió f a ref erència al nucli del nav egador, de manera que si, per exemple,tenim Internet Explorer 6, la v ersió és 4, perquè les v ersions 4, 5 i 6 d'aquest nav egador esbasen en el mateix nucli, i aquest és el que interessa per saber com es comportaran lespàgines. Alguna v egada, però, necessitarem l'altre, perquè hi ha dif erències importants.

<script language="javascript"></script>

2.- Més informació

L'objecte nav igator també proporciona altres inf ormacions (té altres propietats) que,curiosament, depenen del nav egador que utilitzem. Aquí sí, Netscape en té més, i algunesf orça interessants, com ara mimeTy pes i plugins, dos Array s que inf ormen,respectiv ament, sobre els tipus d'arxius reconeguts pel sistema i els plug-ins que téinstal·lats.

Pel que f a a les propietats "compatibles", que reconeixen tots dos nav egadors, n'hi ha tresque en algun moment podem necessitar saber: plataf orma, agent d'usuari i jav a activ at.

Plataf orma (platform) és el tipus de sistema operatiu que utilitza l'ordinador client. Elsv alors possibles són Min32, Win16, Mac68k, MacPPC i Unix. Naturalment, com que elssistemes i els nav egadors ev olucionen, aquest v alors poden quedar obsolets en quatredies.

I què v ol dir "Agent d'usuari" (userAgent)? Quan el client env ia una petició al serv idor atrav és del protocol HTTP, s'acompany a d'algunes dades, és el que s'anomena "capçaleresHTTP". Aquesta, en concret, és la inf ormació completa sobre el nav egador que utilitza elclient.

L'objecte navigator té un mètode que comprov a si el nav egador pot executar applets dejav a (javaEnabled()), molt útil abans de carregar-ne, doncs ho podem detectar i, en casque no estigui activ at, of erir una v ia alternativ a.

En aquest exemple utilitzem una v ariable (jav aOk) i l'operador condicional ternari (?) per talde crear una f rase a bocins: "Jav a " + (si Jav a activ at, res, si no, "des") + "activ at".

<script language="javascript"></script>

3.- Carregar arxius diferents

Quan no hi ha manera de f er compatibles els estils i/o les f uncions entre tots dosnav egadors, podem optar per mantenir arxius separats i utilitzar els uns o els altres. Enaquest exemple s'enllaça un f ull d'estils i un script.

Si el nav egador llegeix </script>, interpretarà que s'ha acabat jav ascript i ha tornat a HTML.Per tal d'ev itar-ho utilitzem el truc, - barroer, però ef ectiu - d'escriure-ho a bocinets.

document.writeln( '</s" + "cript>');

Abans de decidir una solució com aquesta cal v alorar, d'una banda, el f et de mantenirarxius separats i, de l'altra, el "pes" de carregar un únic arxiu amb tots els condicionals. Enel primer cas, tenim l'inconv enient que, si f em modif icacions, haurem de rev isar dosarxius. En el segon ens estalv iem aquesta f eina, però la càrrega de la pàgina pot resultarmés lenta.

<script language="javascript"></script>

4.- Fes-ho, ... si ho pots fer

De v egades interessa saber si el nav egador té una propietat específ ica o pot executar unmètode concret. Per exemple, quan tractem amb capes, Explorer i Netscape 4.7, a més deser incompatibles, no les tracten de la mateixa manera en totes les v ersions.

Abans d'intentar usar aquestes propietats o mètodes cal, doncs, comprov ar què es pot f er.Si coneixem totes les peculiaritats de les div erses v ersions dels nav egadors podrem usarla tècnica de l'exemple anterior. Gairebé sempre, però, resulta més pràctic, curt i segurcomprov ar directament la disponibilitat d'allò que v olem utilitzar.

Internet Explorer i els altres nav egadors actuals tenen document.all, un Array amb totsels components de la pàgina. Si un element no pertany a cap col·lecció (p.ex. no és capimatge, f ormulari, marc, ... ) però li hem posat un identif icador, el tindrem a l'abast adocument.all[ identificador ]..

Netscape 4.7, en canv i, té la col·lecció document.layers. Es tracta d'un Array amb totesles capes def inides. Els seus elements no són accessibles directament (són objectes),però sí que ho són les propietats, p.ex. document.lay ers[ identificador ].bgColor.

La v ersió 2 del DOM, implementada a Netscape 6, a Mozilla i, qui sap, potser un f uturestàndard, aporta el mètode document.getElementById, que permet ref erir-se alsobjectes pel seu identif icador. En aquest exemple, però, no l'utilitzarem.

Aquí v olem utilitzar aquesta dif erència per dirigir el f lux de la pàgina, segons el nav egador.Si té document.all, és l'Explorer, i si té document.lay ers, és Netscape 4.0 o superior. Si hohem de comprov ar div erses v egades és millor que ho guardem en una v ariable de tipuslògic:

v ar ns = document.lay ers; if ( ns ) ... instruccions Netscape 4.7 ... else ... instruccions iExplorer ...

L'exemple crea "rollov ers" de text, enllaços que, quan passa el ratolí, canv ien el seu colorde f ons. Farem els v incles sobre contenidors (span), amb identif icador únic i posiciórelativ a.

Assignarem els ev ents onMouseOv er i onMouseOut a la f unció "pinta", de manera que,quan passi el ratolí, s'activ i un color de f ons i, quan surti, es desactiv i. A més, utilitzaremcolors dif erents i f uncionarà amb Netscape 4.7, tot un luxe i una alternativ a al a:hover decss.

La f unció rebrà dos paràmetres: l'identif icador i el color. Si s'utilitza amb Netscape 4.7,primer comprov arà que el color no estigui buit i, si és així, li assignarà el v alor null. Acontinuació modif icarà el color de f ons del contenidor, document.layers[idSpan].bgColor.Si utilitzem Éxplorer, la sintaxi és dif erent: document.all[idSpan].style.background.

Les propietats all i layers només són un petit exemple del que es pot f er. Si observ emqualsev ol pàgina amb l'inspector d'objectes, amb tots dos nav egadors, v eurem que tenenpropietats ben dif erents. Així podem saber què f uncionarà i, alhora, com els podemdistingir.

A la pràctica següent v eurem més detalls sobre identif icadors, posicions... .Tornen elsestils!

<script language="javascript"></script></head>

<body><h3><a href="pagina1.htm"onMouseOver="pinta( 'lnk1', '#CCEEBB' )" onMouseOut="pinta( 'lnk1', '' )"><span id='lnk1' style="position:relative">Enllaç 1</span></a><a href="pagina2.htm"onMouseOver="pinta( 'lnk2', '#FFDDBB' )" onMouseOut="pinta( 'lnk2', '' )"><span id='lnk2' style="position:relative">Enllaç 2</span></a><a href="pagina3.htm"onMouseOver="pinta( 'lnk3', '#CCDDFF' )" onMouseOut="pinta( 'lnk3', '' )"><span id='lnk3' style="position:relative">Enllaç 3</span></a></h3>...


SGTI : Curs D108


Atenció a la diversitat > Afinem els estils

En aquesta pràctica v eurem una introducció al concepte d'estils.En el mòdul 1, pràctica 3 ja s'ha f et una introducció als estilsCSS, en aquell cas, des de l'aplicació amb el Dreamweav er.

Amb el que s'explica a continuació es pretén donar una v isiómésglobal del concepte d'estils i les sev es f ormes d'aplicació, tant en temps de disseny comen temps de v isualització.

Abans de començar hem de tenir molt clar que les directiv es d'HTML són objectes queactuen de contenidors d'inf ormació. Aquests "contenidors" poden contenir, a la v egada,d'altres directiv es (contenidors) i inf ormació.

S'estableix d'aquesta f orma una jerarquia d'objectes i per tant una herència (les directiv esmés enniuades hereten propietats de les directiv es que les contenen). Aquesta últimaaf irmació té, però, excepcions, poques, en algunes v ersions del nav egador Netscape quesón una de les principals f onts d'incompatibilitat que cal detectar.

Per def ecte, les directiv es apliquen al seu contingut els aspectes propis de la directiv a queha def init el disseny ador del programa nav egador (Netscape i Microsof t). Així, per exemple,la directiv a <b> ... </b> és un objecte contenidor de dades que hereta les propietats d'altresdirectiv es (objectes) que la contenen i a més af egeix la propietat de negreta.

Fixeu-v os que estem parlant de propietats que s'apliquen al contingut de les directiv es.Fins l'aparició dels Fulls d'estil en cascada (CSS) no teníem l'opció de modif icar aquestespropietats que aplica cada contenidor, tret de les que podíem manipular mitjançant elsparàmetres d'algunes directiv es.

Una bona manera d'aprendre el f uncionament dels estils i v eure totes les sev espossibilitats, és mitjançant el Dreamweav er. Podem aplicar estils CSS utilitzant la sev ainterf ície i posteriorment v isualitzar el codi que ha generat. També disposem d'una ajuda enlínia que ens mostra totes les propietats disponibles i les sev es compatibilitats entrev ersions dels nav egadors a "Ay uda/Ref erencia" o prement "Majúscules + F1".

En aquesta pràctica es pretén v eure com podem modif icar les propietats de les directiv es(objectes) HTML, en temps de disseny i en temps de v isualització mitjançant els estils CSSi Jav aScript.

També es comentarà una llista resumida dels principals estils utilitzables per modif icarpropietats de text, colors i f ons. Altres tipus de propietats CSS es deixen per mésendav ant.

Elements CSS en aquest capítol.

Paràmetre Style : Paràmetre per modif icar propietats CSS de les directiv es HTML.Propietat background-image : Def ineix la imatge de f ons.Valor CSS url(url_imatge) : assigna una url a una propietat.Directiv es <DIV> i <SPAN> : Directiv es HTML.Clases a :hover,a :active,a :link,a:visited : classes per modif icar el comportament delslinks.Directiv a <LINK ...> : Carrega un f itxer .css amb def inicions d'estils.

1.- Aplicació dels estils.

Hi han div erses maneres d'aplicar estils a les dif erents directiv es d'HTML. La méselemental consisteix a af egir un nou paràmetre de nom "Sty le" a la directiv a en quèdesitgem modif icar una propietat. Qualsev ol directiv a d'HTML contenidora d'inf ormació i/oaltres directiv es admet aquest nou paràmetre. (Tingueu en compte que gairebé totes lesdirectiv es tenen propietats CSS modif icables).

CSSCSS

La f orma d'aplicar v alors a les propietats CSS és f a amb el parell: propietat : valor .Noteu com s'utilitzen els : per a f er l'assignació. Múltiples parells "propietat : v alor" espoden encadenar mitjançant el punt i coma ; . Un exemple d'ús podria ser:

<directiv a sty le="propietat:v alor; propietat:v alor; ....."> ........

Si aquesta directiv a contingués d'altres directiv es, aquestes últimes també heretarien elsv alors de les propietats indicades, tret d'algunes excepcions que s'han de comprov ar ambels dif erents nav egadors.

Directives <DIV> i <SPAN>

Aquestes dues directiv es HTML són les contenidores per excel·lència. S'utilitzen per def iniràrees i blocs d'inf ormació, sobre les quals s'hi poden af egir estils CSS i ref erenciar-les desde Jav aScript. Elles, per si soles, no af egeixen cap propietat nov a al seu contingut. Però<div > inclou un salt de línia, abans i després i <span> no. Habitualment <div > es f a anarper blocs de dades més grans i <span> per blocs de dades més petits i enniuats dins deblocs <div >.

Les utilitzarem en aquesta pràctica per aplicar les dif erents propietats dels estils CSS. Mésendav ant, també les utilitzarem per def inir capes.

El següent exemple ens mostra com modif iquem algunes propietats de directiv es HTMLque f an que el seu comportament sigui totalment dif erent del que estem acostumats av eure.

<body> <b style="Font-weight:normal; Font-style:italic"> Hauria de ser negreta, en canvi no ho és </b><br>

<font color="red"><p style="color:blue"> Hauria d'esser vermell, però no ho és. </p></font><br>

<p align="left" style="text-align:right"> Això no hauria d'estar a l'esquerra? </p></body>

2.- Algunes propietats modificables amb CSS.

En aquest apartat es f arà un resum de les principals propietats CSS classif icades dins elseu àmbit d'actuació. No hi són totes, però, si que hi són les més habituals. Algunes nosón compatibles amb tots els nav egadors i v ersions. Recordeu que podeu trobar una guiamés extensa i ref erències sobre compatibilitat a l'ajuda del Dreamweav er(Ay uda/Ref erencia).

Unitats de mesura.

Les unitats de mesura es precedeixen opcionalment amb el signe + o - i f inalitzen amb elsímbol de la unitat. Aquestes unitats de longitud poden ser:

em Un em és igual a la mida de la f ont actual.

ex Un ex és igual a la mitjana de l'alçada de la f ont actual. Habitualment,l'alçada de la lletra x.

px píxels

in polsades

cm centímetres

mm mil·límetres

pt punts (1 pt = 1/72 polsada)

pc pica (1 pc = 12 pt)

% percentatge corresponent a la mida de la f ont actual.

Colors:

Per als colors podem utilitzar les paraules bàsiques disponibles: blue, red, cy an, green,

y ellow, etc. o bé els colors RGB:

#rrggbb Exemple: #335a4c

#rgb Exemple: #03a

rgb(n,n,n) on n és un núm. entre 0 i 255. Exemple: rgb(80, 245, 135)

rgb(%, %, %) on % és el percentatge de color. Exemple: rgb(34%, 80%, 100%)

Propietats de tipus de lletra:

Font-size: Mida de la lletra. small, medium, large, o v alor enter o percentatge (%).

Font-weight: Gruix de la lletra. Normal, bold, bolder, lighter o un v alor enter.

Font-sty le: Estil del tipus de lletra. Normal, itàlic, oblique.

Font-f amily : Família genèrica de tipus de lletra. Serif, sans-serif, cursive, fantasy,monoespace,

Font: Propietat genèrica que def ineix totes les anteriors d'un sol cop. L'ordrea indicar les dif erents propietats és el següent: Font-f amily ,f ont-weight, f ont-sty le, f ont-size.

Propietats de color i fons:

Color: Color de l'element Html.

Background-color: Color de f ons d'un element Html

Background-image: Imatge de f ons d'un element Html.

Propietats de text:

Word-spacing: Indica la longitud de l'espai entre paraules

Letter-spacing: Indica la longitud de l'espai entre lletres.

Text-decoration: Mostra ef ectes de text. Pot v aler: none, underline, overline,line-through i blink.

Vertical-align: Indica l'alineació v ertical, pot ser un percentatge o les paraules:baseline, middle, sub, super, text-top, text-bottom, top i bottom.

Text-transf orm:Indica ef ectes de text. Pot v aler: capitalize, uppercase, lowercase,none.

Text-align: Indica l'alineació del text. Pot v aler: left, right, center i justify.

Text-indent: Indica la indentació del text. Pot v aler una longitud o un percentatge.

Propietats de quadre:

Margin-lef t: Especif iquen els marges esquerra, dret, superior i inf erior deldocument respectiv ament, la propietat margin els engloba a tots enconjunt. Exemple: Margin-lef t: 20px; Margin-right: 3.5em; Margin-top:10%; Margin-bottom: 15px . Tots ells es podrien hav er englobatamb Margin: 20px 3.5em 10% 15px.

Margin-right:

Margin-top:

Margin-bottom:

Margin:

Padding-lef t: Especif iquen l'espai esquerra, dret, superior i inf erior entre el contingutd'un element i el marge, respectiv ament. La propietat Padding: elsengloba a tots en conjunt.Exemple: Padding-lef t: 20px; Padding-right: 3.5 em; Padding-top: 10%;Padding-bottom: 15px. Tots ells es poden englobar amb Padding.

Padding-right:

Padding-top:

Padding-bottom:

Padding:

Border-sty le: Indica l'estil d'un marge. Pot v aler: none, dotted, dashed, solid,double, groove, ridge, inset i outset.

Border-width: Indica l'ample del marge d'un element. Pot v aler: thin, medium, thick ouna longitud.

Border-color: Especif ica el color d'un marge. Es pot indicar entre 1 i 4 v alors.

BorderDetermina l'ample, l'estil i el color del marge d'un element en l'ordreindicat.

3.- Altres formes d'incloure estils a la web.

A l'apartat 1 hem v ist com manipulem els estils dels contenidors HTML mitjançant elparàmetre sty le. Aquest és un mètode prou v àlid, però, no és gaire ef icaç, sobretot sidesitgem modif icar els estils de múltiples directiv es. En aquest apartat v eurem les f ormesmés habituals de def inir els estils, aquestes f ormes són les recomanades pel W3C.

Existeixen tres mètodes de def inir estils globalment: les classes, la redefinició de

directives i els identificadors. També comentarem com podem introduir tots els estilsdins un f itxer .css i carregar-lo en una o v àries pàgines a la v egada. Totes aquestesopcions s'introdueixen dins el bloc <head> entre les directiv es <sty le> i </sty le>.

Mitjançant /* .... */ podem introduir comentaris dins les def inicions de les propietats CSS.

Redefinició de directives.

Aquesta opció permet redef inir el comportament de les directiv es de f orma global dins totel document. S'ha d'indicar el nom de la directiv a seguida de { }. Dins les claus s'indiquenels parells propietat : valor separats amb un ; . Els v alors dels paràmetres indicatsaf ectaran totes les directiv es del tipus indicat dins del document HTML. Per exemple:

<sty le ty pe="text/css"> P {f ont-size: large; f ont-weight:bold} H1 U {color:#f f 0000} /*introdueix el color v ermell*/ H2, A {f ont-sty le: italic; background-color : #00f f 00} </sty le>

La línia començada per P, def ineix per al contingut de totes les directiv es <p> del documentuna mida de f ont igual a large i un gruix de f ont igual a bold.

La línia començada per H1 def ineix per al contingut de totes les directiv es <u> inclosesdins de directiv es <h1> el color de text v ermell (f ixem-nos que en aquest cas no hi ha unacoma per separar a H1 i U i això implica un comportament molt dif erent al que s'explica acontinuació).

La línia començada per H2 def ineix per al contingut de totes les directiv es <h2> i <a> untipus de f ont itàlica i un color de f ons v erd (aquí les dues directiv es estan separades percoma, el comportament és dif erent en aquest cas).

Les classes.

Podem indicar un conjunt de propietats i assignar-los un nom de classe. El nom de classees situarà a continuació del nom de la directiv a unida per un punt: directiva.nom_classe {

..... }. Això ens permet def inir propietats dif erents per a una mateixa directiv a. Dins ladirectiv a corresponent en el bloc <body >, s'haurà d'indicar la classe que desitgem utilitzarmitjançant el paràmetre "class=....".

També podem def inir classes genèriques, és a dir, que no estan associades inicialment acap directiv a. Aquestes s'indiquen solament amb el nom de la classe amb un punt aldav ant. .nom_classe_genèrica { .... }. La classe genèrica la podem associar a qualsev oldirectiv a mitjançant el paràmetre "class= ... ". En el següent exemple:

<sty le ty pe="text/css"> P.groc {color:#f f f f 00} P.blauf luix {color:#00f f f f } .lila {color : #A801FF} </sty le>

Les dues línies començades per P def ineixen dues classes aplicables a directiv es <p> queintrodueixen els colors groc i blau f luix al seu contingut. A dif erència de la redef iniciód'etiquetes, això ens permetrà elegir el color a aplicar per qualsev ol directiv a tipus P.

La línia començada per .lila def ineix una classe genèrica aplicable a qualsev ol directiv a queintroduirà el color lila al seu contingut.

Un cop def inides les classes dins el bloc <head>, les podem aplicar a les directiv escorresponents dins el bloc <body > de la següent f orma:

<body > ... <p class="blauf luix"> Això es v eurà de color blau f luix </p> ... <h2 class="lila"> Això es v eurà de color lila </h2> ... <p class="groc"> Això es v eurà de color groc </p> ...

</body >

Existeixen també en l'estàndard CSS les anomenades classes falses. Aquestes detectenl'estat d'una directiv a <a ...> i en f unció de l'estat apliquen uns estils o no. No totes sónreconegudes per Netscape. Aquestes són :

:link - Representa qualsev ol element que es comporti com un enllaç :visited - Representa un enllaç v isitat. :hover - Representa un enllaç asseny alat. :active - Representa un enllaç amb el f ocus activ at.

La f orma habitual d'utilitzar aquestes classes és per modif icar l'aspecte dels enllaços:

<sty le ty pe="text/css"> a:hov er { color:#f f f f 00} a:v isited {color:#f f 0000} a:link {color:#00f f 00} a:activ e {color:#0000f f } </sty le>

Els identificadors.

Els identif icadors serv eixen per identif icar una directiv a mitjançant un nom específ ic i únic.Per donar-li un nom a una determinada directiv a s'utilitza el paràmetreid="nom_identificador". No pot hav er més d'una directiv a dins un document HTML ambel mateix identif icador. Això permet ref erenciar la directiv a des d'un altre lloc del document.

La utilitat de l'identif icador també s'estén a altres opcions de DHTML que es v euran al'apartat següent.

Aquesta opció ens permet indicar propietats CSS d'una determinada directiv a f ora del llocque aquesta ocupa . Podríem dir que equiv al al que s'ha explicat en l'apartat 1, però, si elnombre de propietats CSS és elev at quedarà més bé si aquestes estan situades en el bloc<head>.

La sev a utilització es v eu en el següent exemple:

<head> ... <sty le ty pe="text/css"> #ident1 {margin-lef t : 150px; margin-right : 100 px; color : #0000f f ; f ont-weight : bold} #ident2 {color:y ellow; f ont-size:12 pt; text-align:justif y ; background-image:url(/img/f ons.gif )} </sty le> ... </head>

<body > ... <p id=ident1> Text entre marges de color blau i negreta </p> <div id=ident2> Àrea amb una imatge de f ons i text justif icat de color groc </div > ... </body >

Les dif erents f ormes de def inir estils que s'han comentat en aquest apartat es podenincloure dins un f itxer de text amb extensió .css. Posteriorment, es pot carregar elcontingut d'aquest f itxer a la pàgina desitjada mitjançant la següent directiv a HTML situadaal bloc <head> :

<link rel="sty lesheet" href ="f itxer.css" ty pe="text/css">

D'aquesta f orma, s'aconsegueix tenir una única def inició d'estils que es pot aplicar amúltiples documents HTML tot donant un aspecte unif orme per a totes les pàgines i, amés, f er que siguin f àcilment modif icables, ja que la def inició es troba en un únic f itxer.

Quan existeixen múltiples assignacions sobre una mateixa propietat CSS, l'única queprev aldrà serà l'última assignada.

En el següent exemple es pot v eure com es def ineixen div ersos estils en el bloc <head> i

s'apliquen a dif erents directiv es dins el bloc <body >. De les def inicions ef ectuades dins ladirectiv a <sty le> corresponen les tres primeres a redef inició de directiv es, les cincsegüents a classes i l'última a def inició mitjançant identif icador.

En el bloc <head>:

...<style type="text/css"> body {Background-color: #cad5fa} td b {color:rgb(100%,0%,0%)} /*color vermell*/ i,u {letter-spacing:4px}

h3.tcap {text-transform:capitalize} h3.tindent {text-indent:5em} .blau {color: #0000ff; border:medium groove #00ffff} .marro {color: #6A3A3A; background-color:#3A6A60} .caixa {background-image:url(fons.gif);color:blue}

#ident1 {color:#ff0000}</style>...

En el bloc <body>:

...Text sense cap estil aplicat.<table border=1> <tr><td><b>Text afectat per la redefinició "td b".</b></td> <td>Text sense cap estil aplicat.</td></tr></table><form> <input type="text" size=30 value='Afectat per la clase "caixa" ' class="caixa"> <br><br> <textarea rows=4 cols=25 class="caixa"> Contingut afectat per la clase "caixa" </textarea></form><b>No afectat per la redefinició "td b"</b><br><i>Afectat per l'estil redefinit per "i, u"</i><br><u>Afectat per l'estil redefinit per "i, u"</u><h3>No afectat per la redefinició de h3</h3><h3 class=tcap>afectat per la classe "h3.tcap"</h3><h3 class=tindent>Afectat per la classe "h3.tindent"</h3><div class=blau>Afectat per la classe genèrica ".blau"</div><span class=marro>Afectat per la classe genèrica ".marro"</span><div id=ident1>Afectat per l'identificador d'estil "#ident1"</div>...

4.- Contenidors i identificadors. Manipulació amb JavaScript.

Els estils CSS són un gran av enç a l'hora de def inir les propietats dels documents HTML def orma f àcil, però, en tot el que hem v ist f ins ara, aquestes propietats s'han aplicat entemps de disseny . És a dir, hem modif icat propietats CSS mentre disseny em la pàgina,però un cop s'està v isualitzant el resultat ja no és possible tornar-lo a canv iar.

Jav aScript inclou la possibilitat de modif icar aquestes propietats en temps de v isualització,és a dir, mentre s'està v isualitzant la pàgina. Tal com ja s'ha dit des del principi, lesdirectiv es HTML són objectes que tenen propietats. Per tant, podem f er ref erència aqualsev ol d'aquests objectes (directiv es) i modif icar les sev es propietats.

Ara bé, en aquest cas ens trobarem amb greus dif icultats de compatibilitat entre elsnav egadors de Microsof t i Netscape. Aquest últim no permet accedir a determinadespropietats en temps d'execució, per tant, els exemples que v énen a continuació nof uncionen totalment per Netscape.

Per poder-ho f er, és imprescindible que cada directiv a a modif icar tingui un identif icador, elmateix que ja s'ha indicat en l'apartat 3 ref erent a l'aplicació d'estils mitjançantidentif icador. Un cop tenim aquest identif icador ja el podem utilitzar com un objecte dins elprograma Jav aScript.

Si dins el codi HTML tenim una directiv a d'aquests tipus:

<div id=ident1 sty le="color:blue"> text en color blau, i minúscules </div >

Dins un programa Jav aScript podríem f er ref erència a aquesta directiv a i canv iar-li algunapropietat. En l' iExplorer existeix l'objecte document.all que conté a totes les ref erènciesque existeixen dins el bloc <body>. Per exemple, les següents línies de codi:

document.all.ident1.sty le.color="red"; document.all.ident1.sty le.textTransf orm="uppercase";

Canv iarien el color de la f rase a v ermell i totes les lletres passarien a majúscules. IEtambé permet ref erir-nos als identif icadors sense utilitzar el text document.all, tal comv eurem en l'exemple que hi ha en aquest apartat.

Noteu que en aquest cas, ja no s'utilitza els : per assignar un nou v alor a la propietat CSS ia més, les propietats que inclouen un guionet en el seu nom, aquest desapareix i s'utilitza elnom sense guionet i la primera lletra de la segona paraula en majúscula, tal com es potv eure a la propietat text-transf orm.

En el següent exemple podem v eure com canv iem aquestes propietats amb Jav aScript.Aquest exemple utilitza dues directiv es <div > per ubicar dins la pàgina dos textos iguals.Algunes lletres dels textos també estan incloses dins de directiv es <span> per poder-lesref erenciar de f orma particular. Totes aquestes directiv es estan ref erenciades per unidentif icador.

L'ef ecte produït consisteix en la f rase "DHTML i Jav ascript", el primer <div > correspon altext superior i el segon <div > correspon al text inf erior que representa l'ombra. Noteu com,dins la def inició d'estils situada dins de <head>, les propietats top i left de les etiquetessup i inf estan desf asades 5 punts per ef ectuar l'ef ecte d'ombra.

L'identif icador de les directiv es <div > i <span> serv irà per poder-les ref erenciar des de ladef inició d'estils i des de la f unció Jav aScript cambia(), manipulant d'aquesta f orma lessev es propietats. Aquesta f unció s'inicia per primer cop en carregar-se la pàgina mitjançantel controlador d'ev ent onLoad situat dins la directiv a <body>. Posteriorment, la f unció esrepeteix periòdicament per l'acció del temporitzador activ at amb el setTimeout().

Al bloc <head>, dins la directiv a <sty le> s'indiquen els estils inicials a aplicar a cadascundels contenidors <div > i <span>. L'ef ecte que es v isualitza és el d'un text amb lletres decolors i una ombra de f ons.

La f unció cambia() alterna els colors del text "Dhtml" de f orma rotativ a llegint i assignantels v alors de les propietats color i modif ica les posicions de les lletres "h" i "m" manipulantla sev a propietat vertical-align.

La f unció cambia() solament s'executa per al nav egador IE (detecta l'objecte document.all),en el cas de tractar-se d'un nav egador NN4 es mostra un text alternatiu i si és unnav egador NN6 es mostra la f rase sense animació. Si v oleu aprof undir una mica més pelque f a a la compatibilització entre IE i NN6 podeu analitzar el codi per intercanv iar elscolors de les lletres CSS situades al principi d'aquesta pàgina, v eureu també, coms'introdueix el text alternatiu per a NN4.

<html><head><title>Exemple</title>

<style type="text/css"> .comu {position:absolute; font-size:50px; font-family:impact} #sup {top:20pt; left:20pt; z-index:1; color:#405048} #inf {top:25pt; left:25pt; z-index:0; color:#B8B8B8}</style>

<script language="JavaScript">function cambia(){ if (document.all) { //detectem que correspongui a un navegador IE.

//efectuem la alternancia de colors en les lletres DHTML var colorlD = lD.style.color; lD.style.color = lh.style.color;

lh.style.color = lt.style.color; lt.style.color = lm.style.color; lm.style.color = ll.style.color; ll.style.color = colorlD;

//efectuem la alternancia de posició vertical de les lletres h i m i les seves ombres. if(lh.style.verticalAlign=="sub") { lh.style.verticalAlign="baseline"; lh2.style.verticalAlign="baseline"; lm.style.verticalAlign="sub"; lm2.style.verticalAlign="sub"; } else { lh.style.verticalAlign="sub"; lh2.style.verticalAlign="sub"; lm.style.verticalAlign="baseline"; lm2.style.verticalAlign="baseline"; } setTimeout("cambia()", 1000); //repetim la funció al cap d'1 s. }}</script>

</head>

<body onLoad="cambia();">

<div class="comu" id="sup">  <span id="lD" style="color:#0070E0">D</span> <span id="lh" style="color:#FF0000">h</span> <span id="lt" style="color:#009000">t</span> <span id="lm" style="color:#9000D8">m</span> <span id="ll" style="color:#FF8000">l</span> i Javascript</div>

<div class="comu" id="inf">  D<span id="lh2">h</span>t<span id="lm2">m</span>l i Javascript</div>

</body></html>

SGTI : Curs D108


Atenció a la diversitat > Control de l'entorn

Quan disseny em una pàgina, l'ideal seria que ocupés tota l'àrea disponible i mostrés elscolors correctament. Com que, d'entrada, no sabem quina mida tindrà la pantalla, i a més,esperem tenir molts v isitants amb monitors de tot tipus, procurem f er un disseny ques'adapti a la majoria de conf iguracions.

Amb Jav aScript podem saber les mesures de la pantalla i la prof unditat del color, és a dir,quants bits utilitza la targeta per representar cada píxel. A partir d'aquesta inf ormaciópodem f er que la pàgina prengui decisions.

L'objecte window guarda aquestes inf ormacions, i d'altres, al'objecte screen. En aquest cas, però, no utilitzarem mai lasintaxi window.screen perquè, per a qualsev ol f inestra, lapantalla és sempre la mateixa. La sintaxi serà, doncs,només screen.propietat.

En aquesta pràctica aprendrem a detectar la conf iguració ia usar les dades de l'objecte screen. També aprendrem atreure la pàgina dels marcs, i estudiarem com f er pàginesque no deixin rastre i com camuf lar l'adreça de correu.


Objecte screen : Propietats de la pantalla (en realitat, de la targeta gràf ica). No témètodes.Propietats width i height : amplada i altura total de la pantalla.Propietats availWidth i availHeight : amplada i altura que pot ocupar una f inestra.Propietats colorDepth i pixelDepth : prof unditat de la paleta i dels píxels, en bits.Mètode Math.pow() : f a una potència (base elev ada a un exponent).Mètodes de window, moveTo() i sizeTo() : mouen i dimensionen la f inestra.Instàncies de window, parent i top : la f inestra anterior i la més alta en la jerarquia.Mètode location.replace() : reemplaça l'adreça actual per la que rep com a paràmetre.

1.- Resolució i colors

L'objecte screen no té instàncies ni mètodes. No podem f er res amb la pantalla des d'unapàgina web. És més, seria perillós que es pogués f er perquè, aleshores, qualsev ol pàginad'Internet podria desconf igurar-nos l'ordinador i posar-nos en un bon embolic. Què passariasi, per exemple, es f orcés una conf iguració que la màquina no pot admetre?

Les propietats de l'objecte screen només inf ormen. Això sí, podem utilitzar les dades percrear f inestres o modif icar-ne la mida o posició. I, si hem d'usar condicionals, també enspodem plantejar pàgines senceres que s'adaptin als dif erents entorns.

En aquest exemple mostrarem la resolució i els colors disponibles. Utilitzarem les propietatsscreen.width i screen.height que ens donen, respectiv ament, l'amplada i l'altura totals dela pantalla. Per als colors, utilitzarem screen.colorDepth que ens diu quants bits utilitza lapaleta per def inir cada color. Si, com és normal av ui en dia, la targeta gràf ica no es basaen una gamma de colors, es mostra la "prof unditat" del píxel (pixelDepth) també en bits.

Aquestes són propietats que només podem llegir (read only ). No es poden modif icar.

Per saber quants colors mostra la tarja gràf ica, f em una potència amb el número 2 com abase i colorDepth com a exponent. Per això, utilitzem la f unció pow de l'objecte Math. Hoescriurem tot en una f inestra nov a que s'obrirà quan f em clic en un v incle.

<script language="javascript"><!--function pantalla() { window.focus(); var fn = window.open( '', 'win1', 'width=360,height=100,top=260,left=200' );

with( fn.document ) { writeln( 'Resolució de pantalla: <b>' + screen.width ); writeln( 'x ' + screen.height + '</b><br>' ); writeln( 'Profunditat de color: <b>' + screen.colorDepth + ' bits,' ); writeln( Math.pow( 2, screen.colorDepth ) + ' colors</b><br>' ); close(); } fn.focus(); return false;}// --></script></head>

<body ...><a href="" onClick="return( pantalla() )">Propietats de la pantalla</a><br>...

2.- Ocupar tot l'espai disponible

Des d'una pàgina no podem crear f inestres maximitzades ni maximitzar la f inestra, això hoha de f er el sistema operatiu. Si utilitzem Internet Explorer podem f er que la pàgina ocupitota la pantalla quan creem una f inestra, escriv int fullscreen=1 a les sev es propietats:

v ar f nestra = window.open( 'arxiu.htm', 'nom', 'f ullscreen=1' )

De v egades ens pot interessar aquest ef ecte tot i que, quan el trobem en una altra web, noens f a massa gràcia. Maximitzar és una altra cosa: és tenir la f inestra, amb tots els seuselements (menús, botons,...) ocupant tot l'espai disponible i sense "bordes".

No ho podem f er ... del tot. Es pot ocupar l'espai màxim, però no ens lliurarem dels"bordes". A més, haurem de seguir estratègies dif erents per als dos nav egadors.

Primer, mov em la f inestra a l'angle superior esquerre: window.moveTo(0,0). Acontinuació, declarem dues v ariables (x,y ) que contindran l'amplada i alçada de l'àreadisponible per a f inestres. En aquesta mesura ja s'ha descomptat l'espai ocupat pelselements f ixos del sistema operatiu, p.ex. la barra de f eines, del Windows.

v ar x = screen.availWidth

v ar y = screen.availHeight

A partir d'aquí, hem de detectar el nav egador. Si és un nav egador actual, només cal utilitzarel mètode resizeTo(x,y) de l'objecte window. Si prov em el mateix amb Netscape 4.7, laf inestra es f arà més gran que la pantalla. Hem d'utilitzar un altre mètode.

Netscape 4.7 reconeix les propietats outerWidth i outerHeight de la f inestra, queindiquen l'amplada i l'alçada (iExplorer no les accepta). Comparem si alguna de les dues ésmenor del que poden ser. Utilitzem l'operador "o lògic" ( || ):

Si l'amplada de la finestra és menor que "x" o l'altura és menor que "y " ...

Aleshores assignem "x" a l'amplada i "y " a l'altura. El nav egador redimensionarà la f inestra itornarà a "pintar" la pàgina. Probablement ens quedarà més clar si llegim el codi del scriptque no pas amb l'explicació. És molt senzill.

<script language="javascript">window.moveTo(0,0)var x = screen.availWidthvar y = screen.availHeightif ( document.all ) { window.resizeTo( x,y )}else { if ( window.outerWidth<x || window.outerHeight<y ){ window.outerWidth = x window.outerHeight = y }}document.writeln( '<h1>Tot l\'espai és meu!</h1>' )</script>

3.- Sortir de la gàbia

Hem disseny at una pàgina amb cura, ha quedat bé i algú l'enllaça des de la sev a web.Com queden les mides i els elements? Si la nostra pàgina s'obre a la mateixa f inestra,perf ecte, tot i que no és habitual que algú conv idi els v isitants a abandonar el seu lloc peranar al nostre. El més probable és que ens l'obrin en una f inestra o en un marc.

Si la pàgina s'obre en una nov a f inestra, en podem controlar, relativ ament, la mida, tal comhem v ist a l'exemple anterior. Si s'obre en un marc ... però, com sabem que som en unmarc?

Un marc (f rame) és una f inestra en una f inestra. El marc, un objecte, és f ill d'un altreobjecte, i sap com es diu el seu pare (ja passa, això). El pare (parent) té una adreça i elmarc-f ill en té una altra. El pare pot ser, alhora, f ill. De tota la saga, el primer es top. Enaquest cas, i només en aquest, l'adreça és la mateixa que la de son pare, perquè no en té.

Si l'adreça del pare no és la meva, aleshores, vull la del pare !!!

Això és exactament el que f arem, comprov ar que l'adreça de la f inestra de la nostra pàginaés la mateixa que la del contenidor. Si no és així, segur que hem caigut en un f rame.Aleshores assignem la nostra adreça a la del pare. Com que la pàgina es tornarà acarregar, es torna a f er la comprov ació i, si encara no hem arribat al "top", repetim.

És clar que també podem anar directament a dalt: posem la nostra adreça atop.location.href i ja hi som. Aquí ho f em de les dues maneres. La segona compara lesf inestres, no pas les adreces. En tot cas, aquestes instruccions han d'anar al principi de lapàgina.

Mètode "pas a pas"<script language="javascript"></script>

Mètode directe<script language="javascript"></script>

4.- La web invisible (pastilles anti-paranoia)

L'exemple anterior ens hauria de demostrar que, amb Jav aScript i, en general, quan esprograma, hi pot hav er div erses estratègies que produeixin el mateix resultat. Trobar elmillor algoritme no sempre és f àcil i, de v egades, coses que poden semblar complicades,es basen en idees extremadament senzilles. Per exemple, no deixar rastre.

Veurem dues f uncions ben senzilles: uns enllaços que no permeten tornar a la pàgina queels ha f et, i unes adreces de correu inv isibles per als robots publicitaris.

En el primer cas, f em els enllaços a trav és d'una f unció que reemplaça l'adreça de lapàgina actual per la del v incle que s'ha obert, utilitzant el mètode location.replace(). Lapàgina no es guarda a l'historial i no queda cap rastre de que s'ha v isitat.

Si no v olem rebre correu publicitari, apliquem la segona f unció. Com l'anterior, utilitza elmètode "replace" i té, a més, l'adreça trossejada (mailto:[email protected]). No esmostra completa ni al codi, - que és el que analitzen els robots - ni a la barra d'estat. Peròf unciona.


SGTI : Curs D108

Mòdul: 4

Atenció a la diversitat > Informe del client

En aquest mòdul hem desplegat el DOM, hem v ist com detectar el nav egador i controlarl'entorn, i com podem af inar els estils. Intentarem posar en una pàgina alguns d'aquestsaprenentatges. Crearem o modif icarem l'arxiu "index.htm" situat a la carpeta "m4".

Per començar, f arem un f ull d'estils tal com s'ha explicat a la pràctica 3. Amb elDreamweav er, posarem títol a la pàgina, per exemple, "Inf orme del client", i crearem unataula de cinc f iles i una columna. Aplicarem els estils a les cel·les.

La primera f ila serà el títol de la pàgina, en Jav aScript. El títol és una propietat deldocument, tal com s'explica a la pràctica 1.

A la segona f ila hi posarem, també enJav aScript, l'adreça de l'arxiu i la data de l'últimamodif icació i comprov arem que, quanmodif iquem i guardem l'arxiu, s'actualitza.

Detectarem el nav egador i, si és InternetExplorer, inf ormarem sobre la mida de l'arxiuutilitzant la propietat document.fileSize, que elnav egador Netscape 4.7 no reconeix.

La tercera f ila contindrà tota la inf ormació quepuguem of erir sobre el nav egador.

A la quarta, inf ormarem sobre la pantalla, colors i entorn en general. Podem utilitzar com abase el primer exemple de la pràctica 4.

A l'última f ila f arem un enllaç a la nostra adreça de correu de manera que no la puguindetectar els robots, tal com s'ha explicat a la pràctica 4, i posarem un v incle per tornar a lanostra pàgina principal i que no es guardi a l'historial. Farem tots dos enllaços tal coms'explica a l'últim exemple de la pràctica 2, amb la tècnica de canv i de color quan passi elratolí, sigui quin sigui l'explorador utilitzat

Programar com cal

És important que utilitzem v ariables globals i f uncions a la capçalera de la pàgina, demanera que, des del cos, es puguin "cridar" amb una única línia.

Tot i que en aquest exercici no és imprescindible, v a bé que ens hi anem acostumant,perquè és la tècnica habitual de programar i és la que utilitzarem durant la resta del curs..



SGTI : Curs D108

Mòdul: 5

El temps al meu costat

Qui no v ol tenir el temps de part sev a? "Time is on my side", que deien els Stones. Si, en

el mòdul anterior, hem v ist com controlar el nav egador i l'entorn - i actuar en conseqüència

-, en aquest f arem el mateix amb el temps. Ara que ja sabem com ens v isiten, mirarem de

saber, també, quan ho f an. I més.

La màquina té rellotge

El control del temps és important. Jav aScript, com a llenguatge que

s'executa en un nav egador, no pot saber la data i hora del serv idor,

però sí les del client. Això f a que l'ús de f uncions basades en aquestes

dades tingui un cert risc, perquè no podem estar segurs que seran

correctes. En canv i, no té importància si, per exemple, v olem calcular

interv als.

Jav aScript proporciona l'objecte Date, que permet manejar la data i

l'hora del sistema. Els mètodes d'aquest objecte ja existeixen, de

manera que només els hem d'agaf ar i usar.

A partir d'aquest objecte podem extreure inf ormació detallada: hores, minuts, segons, dia

del mes i de la setmana, mes, any , ... i amb els mètodes podem f er operacions amb

aquestes dades. En aquest mòdul aprendrem a f er rellotges i calendaris per posar a les

nostres pàgines, un serv ei més per als v isitants de la nostra web.

Programar accions

Un altre aspecte f onamental del control sobre el temps ens l'of ereixen els temporitzadors,

sobretot quan es tracta d'animació. Un temporitzador no és més que un ev ent prov ocat pel

rellotge intern de la màquina. Jav aScript els maneja de dues maneres: de f orma puntual o

cíclica. Amb la primera podrem programar una acció al cap d'un temps i, amb la segona, f er

una acció cada interv al de temps.

També mirarem com es f a una barra de progrés. De moment, aquest serà l'exercici més

inútil del curs, ja que no f arem progressar res més que els nostres coneixements. Ens

serv iran per indicar que la pàgina no s'ha mort - que continua activ a, v aja - quan s'hagin de

f er operacions que tinguin una bona estona la màquina o la línia ocupada.

Finalment, v eurem un dels usos més interessants dels temporitzadors: les accions en

segon pla, que ens han de permetre aprof itar el temps d'inactiv itat per av ançar continguts.

Es tracta de treure el màxim partit de les connexions quan sabem què ha de v enir a

continuació. A la pràctica 4 en v eurem un exemple complet, una mini-exposició v irtual de

paisatges pintats per Van Gogh, tot un luxe!

Amb tot això, ... algú sap quina hora és?

En aquest mòdul

Pràctica 1: Rellotges

Pràctica 2: Calendaris

Pràctica 3: Barra de progrés

Pràctica 4: Accions en segon pla

Exercic is: Temps controlat


10:17:59


SGTI : Curs D108


El temps al meu costat > Rellotges

En aquesta pràctica es v eurà com podemmesurar i mostrar el temps en les nostresaplicacions web. Introduirem inicialment elsconceptes bàsics que ens han de permetre utilitzar el rellotge del sistema i les f ormes méshabituals de mostrar-lo en la pàgina web.

També v eurem com podem implementar un cronòmetre que ens permeti mesurar interv alsde temps acotats entre dos ev ents, que poden ser originats per l'usuari o per altres ev entsde la web.

Finalment es mostrarà un sistema de presentació més elaborat: un rellotge digital ambpresentació mitjançant una matriu de punts.

Doncs bé, comencem?

Elements del llenguatge en aquest capítol.

Mètode setTimeout() : Inicia un temporitzador.Mètode clearTimeout() : Atura un temporitzador que estigui actiu.Propietat status : Propietat de l'objecte window que conté el contingut que es v eu a la barrad'estat.Mètode split() : Descompon una cadena de text, segons l'element separador, creant unarray dels elements separats.Objecte Date : Ens permet treballar amb dates i hores.Mètodes div ersos de l'objecte Date.

1.- L'hora actual.

La mesura del temps és una utilitat molt habitual en els llenguatges de programació iJav aScript no podia ser meny s. El llenguatge ens proporciona un objecte d'aplicacióespecíf ica per aquest concepte. És l'objecte Date.

L'objecte Date ens proporciona un conjunt de mètodes i propietats per treballar amb dates ihores. Qualsev ol v ariable instanciada de l'objecte Date contindrà internament el nombre demil·lisegons (positius o negatius) que han passat des del dia 1 de Gener de 1970.per crear una instància de l'objecte Date, s'utilitza el constructor new de la f orma següent:

v ar data = new Date(paràmetres);

Els paràmetres poden ser: - El nombre de mil·lisegons transcorreguts des de l' 1 de Gener de 1.970. - Una cadena de text, en el f ormat data i/o hora reconegut per l'objecte Date. - Un conjunt de v alors numèrics, separats amb coma que representen a: any , mes, dia, hora, minut i segon. Els tres últims són opcionals. - Cap paràmetre.

Si no s'indica cap paràmetre, l'objecte Date agaf arà la data i hora de l'ordinador ques'estigui utilitzant.

Un cop s'hagi creat una instància de l'objecte Date (en l'exemple anterior, la v ariable data)podrem aplicar sobre aquesta v ariable un conjunt de mètodes que ens permeten obtenir(get...) i assignar (set...) dif erents v alors que composen aquesta data.

Entre els més importants tenim: getHours().-Retorna l'hora. setHours().- Assigna l'hora. getMinutes().- Retorna el nombre de minuts. setMinutes().- Assigna el nombre de minuts. getSeconds().- Retorna el nombre de segons. setSeconds().- Assigna el nombre de segons.

getFullYear().- Retorna l'any indicat amb quatre xif res. setFullYear().- Assigna l'any indicat amb quatre xif res. getMonth().- Retorna el número del mes. 0- Gener ... 11- Desembre setMonth().- Assigna el número del mes. 0- Gener ... 11- Desembre. getDate().- Retorna el número del dia. setDate().- Assigna el número del dia. getDay().- Retorna el número del dia de la setmana. 0- Diumenge ... 6- Dissabte.

El següent codi ens mostra uns exemples d'ús d'alguns d'aquests mètodes.

La f unció horaAra() és la responsable de detectar la data i hora actual del rellotge delsistema, amb la línia v ar ara = new Date(), es declara una v ariable instanciada de l'objecteDate que conté la data i hora actual, ja que no s'ha passat cap paràmetre al constructorDate().

Un cop es té aquest v alor, declarem i assignem la v ariable hora. El v alor assignat és elque obtenim del mètode getHours() aplicat a la v ariable ara. Però abans f em unacomprov ació per si de cas el seu v alor f os inf erior a 10. Per f er-ho utilitzem l'operadorcondicional ternari ?:, tal com s'indica a la següent línia:

(ara.getHours()<10) ? "0"+ara.getHours() : ara.getHours();

La condició és: (ara.getHours()<10). Si aquesta és certa, és a dir el v alor de l'horasolament té un dígit, retornem un "0" af egit al v alor retornat per ara.getHours(). De cascontrari, retornem el v alor subministrat per ara.getHours() tal qual. Per tant, el contingutde la v ariable hora sempre contindrà dos dígits, un d'ells serà un zero a l'esquerra si ésnecessari.

Per a les v ariables minuts i segons es f a un procés similar a l'anterior.

Un cop es tenen els tres v alors de les v ariables corresponents és necessari mostrar-losdins la pàgina web. La f orma d'implementar aquesta operació pot ser molt div ersa, i de f et,per les pàgines d'Internet es poden trobar moltes f ormes de mostrar la data i hora, algunesd'elles amb ef ectes v istosos i espectaculars.

En aquest primer exemple serem una mica més modestos i ens limitarem a mostrar-hosobre dos elements molt simples d'implementar: un camp de f ormulari i la barra d'estat delnav egador.

La línia document.f orms.f orm1.contenidor.v alue = hora + ":" + minuts + ":" + segons;s'encarrega de mostrar el v alor de hora, minuts i segons amb els : enmig dins un camp detext de nom contenidor situat dins un f ormulari de nom form1 situat en el bloc <body> dela pàgina.

La línia window.status = hora + ":" + minuts + ":" + segons; també representa el v alor dehora, minuts i segons amb uns : entre mig, a la barra d'estat del nav egador.

status és una propietat de l'objecte window que conté el v alor que es mostra a la barrad'estat del nav egador. Observ eu que és molt senzill utilitzar aquesta sortida d'inf ormació.De f et, aquesta propietat és molt utilitzada per f er-hi ef ectes de text. Ha Internet es potv eure moltes aplicacions que utilitzen aquesta propietat "status" per f er ef ectes més omeny s elaborats amb cadenes de text. A més, és totalment compatible amb qualsev oltipus de nav egador.

Per acabar la descripció de la f unció ens queda la línia setTimeout("horaAra()",1000);Aquesta s'encarrega d'engegar un temporitzador que al cap de 1000 mil·lisegons torni aexecutar de nou la f unció horaAra(). D'aquesta f orma s'aconsegueix que els rellotgess'actualitzin cada segon. Prov eu d'eliminar aquesta línia i observ areu com el v alor delrellotge no s'actualitza a no ser que es recarregui la pàgina.

La f unció horaAra() s'inv oca per primer cop mitjançant l'ev ent onLoad situat a la directiv a<body >.

<html><head><title>Rellotges</title><script language="JavaScript">

function horaAra(){ var ara = new Date(); var hora = (ara.getHours()<10) ? "0"+ara.getHours() : ara.getHours(); var minuts = (ara.getMinutes()<10)?"0"+ara.getMinutes():ara.getMinutes(); var segons = (ara.getSeconds()<10)?"0"+ara.getSeconds():ara.getSeconds(); document.forms.form1.contenidor.value = hora + ":" + minuts + ":" + segons; window.status = hora + ":" + minuts + ":" + segons; setTimeout("horaAra()",1000);}</script></head>

<body bgcolor="#FFFFE7" onLoad="horaAra();"><p><p><p><form name="form1"><center> Hora actual: <input type="text" name="contenidor" value=""></center></form><p><p>També ho pots veure a la barra d'estat:</body></html>

2.- La data actual

Per obtenir la data actual indicada pel sistema es pot f er utilitzant un codi estructurat def orma similar a l'exemple anterior. Però, en aquest cas, s'ha de tenir en compte quegetMonth() retorna el número de mes entre 0 i 11, i getDay() retorna el número de lasetmana entre 0 i 6 (diumenge - dissabte). Per tant s'ha de f er la conv ersió.

És pot observ ar com s'assigna a una cadena la llista de noms de mesos i la llista de nomsde dies de la setmana. Posteriorment amb el mètode split() es crea un array a nomMes i anomDia, utilitzant com a separador l'espai (" "). Ara nomMes i nomDia són dos array s, on elprimer element serà el primer de la llista i l'últim element serà l'últim de la llista.per ref erenciar cada element de l'array es podrà f er amb nomMes[index] i nomDia[índex], oníndex és el v alor que ens retorna getMonth() i getDay() respectiv ament.

Finalment, mitjançant document.write, s'escriu la cadena de text sobre el document perf ormar la data actual.

...... Codi dins el bloc <body>

<script language = "JavaScript"> var ara=new Date(); var nomMes="Gener Febrer Març Abril Maig Juny Juliol Agost Setembre Octubre Novembre Desembre"; var nomDia="Diumenge Dilluns Dimarts Dimecres Dijous Divendres Dissabte"; nomMes= nomMes.split(" "); nomDia= nomDia.split(" "); document.write(nomDia[ara.getDay()] + ", a " + ara.getDate() + " de " + nomMes[ara.getMonth()] + " de " + ara.getFullYear() );</script>

......

3.- Cronòmetre

La implementació de cronòmetres consisteix en determinar un v alor de Date inicial i unv alor de Date al f inal de l'interv al. La dif erència serà el temps transcorregut.

Recordem que una v ariable instanciada de l'objecte Date conté el nombre de mil·lisegonsdes de l'1 de Gener de 1.970, per tant, la dif erència entre dues v ariables tipus Date donaràcom a resultat els mil·lisegons transcorreguts.

El següent exemple es basa en aquest concepte. Quan f em un clic a sobre el botó "Inicia",es crea una instància de Date en la v ariable abans. Aquesta v ariable conté el temps inicial.Posteriorment, dins el mateix controlador d'ev ent onClick, s'inv oca a la f unció cron().

La f unció cron() torna a instanciar una nov a v ariable tipus Date de nom ara, i assigna a lapropietat value del camp de text crono del f ormulari form1, la dif erència respecte abans

div idit per 1.000 per obtenir el resultat en segons.

També s'ef ectua la mateixa operació per assignar-ho a la propietat status de l'objectewindow. És a dir, també es v eurà el comptador a la barra d'estat de la f inestra.

En acabar de f er les dues assignacions per mostrar el resultat de la dif erència, s'engega untemporitzador mitjançant setTimeout(). La f unció d'aquest temporitzador és tornar a inv ocarla f unció cron() al cap de 10 mil·lisegons. A la v egada, setTimeout() retorna un v alor atID, el v alor retornat és l'identif icador numèric del temporitzador que està en execució.

Quan desitgem aturar el cronòmetre, f arem clic a sobre del botó "Atura", el seu ev entonClick inv ocarà a la f unció clearTimeout() passant-li el paràmetre corresponent al'identif icador del temporitzador que estigui actiu en aquest moment. La f uncióclearTimeout() atura el temporitzador indicat en el seu paràmetre tID. Amb aixòaconseguim aturar el cronòmetre.

Observ eu com a la v ariable abans solament se li assigna un v alor al principi del procés,quan es f a clic a sobre de "Inicia". En canv i, a la v ariable ara se li assigna un v alor cadacop que s'inv oca a la f unció cron() (cada 10 ms.). Lògicament, el temps transcorregut (ara

- abans) cada cop serà més gran.

Una aplicació similar a la que s'ha descrit en aquest apartat consisteix a mesurar el tempsque un v isitant ha estat v isualitzant una pàgina web. Quan tanqueu aquesta pàgina web, usapareixerà un missatge alert() que us mostrarà el temps que heu estat v isualitzant lapàgina.

L'ef ecte s'ha aconseguit de f orma similar a la descrita pel cronòmetre, desant en unav ariable el temps actual mitjançant l'ev ent onLoad situat en la directiv a <body>. En tancarla pàgina, mitjançant un altre ev ent onUnload() situat a la directiv a <body> es torna adeterminar el temps actual i es mostra mitjançant l' alert() la dif erència de temps entre lesdues v ariables.

<html><head><title>Cronòmetre</title><script language="JavaScript"> var abans; var tID; function cron() { var ara=new Date(); document.forms.form1.crono.value=(ara-abans)/1000 + " s."; window.status=(ara-abans)/1000 + " s."; tID=setTimeout("cron()",10); }</script></head>

<body bgcolor="#FFFFE7"> <form name="form1"> <input type="text" name="crono" value=""> <input type="button" value="Inicia" onClick="abans=new Date(); cron();"> <input type="button" value="Atura" onClick="clearTimeout(tID);"> </form></body></html>

4.- Millorem la presentació de sortida.

Fins ara ens hem limitat a mostrar la sortida del rellotge, data i cronòmetre en treselements relativ ament f àcils d'implementar com són un camp de text de f ormulari, la barrad'estat del nav egador i directament sobre el bloc 'body ' del document ambdocument.write().

Si v olem millorar l'aspecte gràf ic de sortida de les dades es pot f er mitjançant la utilitzaciód'estils, però, en aquest apartat es proposa la creació de dígits numèrics mitjançant una

matriu de punts.

La matriu de punts de cada dígit és de 3 columnes per 5 f iles. En cada matriu asseny alemamb un " * " el punt que ha de quedar activ at a ON i amb un " · " el punt que ha de quedar aOFF. Tot el conjunt de dígits numèrics i símbol " : " f ormat amb matrius de puntss'introdueix en una v ariable de cadena de nom caràcters .

En la secció de codi es pot v eure la v ariable "caràcters". S'ha indicat mitjançant líniesnumerades per v eure millor com estan f ormats els caràcters, però, en la implementaciódins el codi, la v ariable ha de tenir tots els punts i asteriscs indicats en una sola línia,sense cap espai, de la f orma següent:

v ar caracters = "·*·*·**·**·*·*··*·**··*· .................................. ";

Les v ariables col i fil han de contenir el nombre de columnes i f iles de la matriu,respectiv ament.

La f unció digital() rep com a paràmetre una cadena de text, de longitud indeterminada,f ormada per caràcters dels que estan def inits dins de la v ariable "caràcters". Seguidament,analitza cadascun dels caràcters de la cadena de text i extreu la sev a representació segonsla matriu de punts.

En f unció de quina sigui la representació del caràcter, assignarà una imatge de nom "on.gif "si és un asterisc o bé una imatge de nom "of f .gif " si és un punt. D'això se n'encarrega laf unció auxiliar ferImg().

En aquest exemple s'ha utilitzat la imatge per a "on.gif " i la imatge per a "of f .gif ".Aquestes imatges es poden modif icar pel que f a a la mida i colors per obtenir altresresultats gràf ics.

La f unció "f erImg()" rep com a paràmetres cad, f i ncar. cad és un array f ormat per totsels caràcters de la cadena "caràcters". f és el número de f ila que s'està f ormant en aquestmoment i ncar és la posició del caràcter dins de l'array (el 0 ocupa la posició 0, el 1 laposició 1, el : la posició 10 .... , teniu en compte que una posició d'un caràcter dins del'array ocupa (f il*col) elements de l'array .

Finalment, la f unció digital() retorna una taula que conté les ref erències HTML permostrar les imatges "on.gif " i "of f .gif ", ordenades adequadament per f ormar el text desitjat.Aquesta taula es pot situar on es desitgi dins la pàgina web.

Aquesta f unció és molt v ersàtil i permet altres modif icacions. Noteu que no estem pasrestringits a utilitzar solament dígits numèrics. Podem crear tot l'alf abet amb majúscules,minúscules i caràcters especials i af egir-los a la v ariable "caràcters" i a la v egada, tambés'hauran d'af egir els nous caràcters dins l'estructura "case", de f orma similar a com s'haf et entre les línies 10 i 20 de la f unció digital().

Per millorar l'aspecte dels dígits i donar-los més "resolució" es pode crear matrius de puntsamb més f iles i columnes (p.e. 7x5, 9x5, etc.) i incorporar-los a la v ariable "caràcters". Enaquest cas s'hauran de modif icar també les v ariables "f il" i "col".

Modif icant les imatges "on.gif " i "of f .gif ", pel que f a a colors i mida, es poden aconseguiraltres v ariacions d'ef ecte estètic.

1 var caracters="2 · * · 3 * · *4 * · *5 * · *6 · * · 7 · * ·8 * * ·9 · * ·10 · * ·11 · * ·

12 · * · 13 * · *14 · * · 15 * · · 16 * * * 17 * * · 18 · · * 19 · * · 20 · · * 21 * * ·

22 * · · 23 * · *24 * * *25 · · * 26 · · *

27 * * * 28 * · · 29 * * · 30 · · * 31 * * ·

32 · * · 33 * · · 34 * * · 35 * · * 36 · * ·

37 * * * 38 · · * 39 · * · 40 · * · 41 · * ·

42 · * · 43 * · * 44 · * · 45 * · * 46 · * ·

47 · * · 48 * · * 49 · * * 50 · · * 51 · * ·

52 · · · 53 · * · 54 · · · 55 · * · 56 · · · 57 ";

var col = 3;var fil = 5;

1 function digital(text)

2 {3 var car;4 var cad = caracters.split("");5 var taula="<table border='0' cellspacing='0' cellpadding='0'>\n";6 for (var f=0; f<fil; ++f) {7 taula += "<tr><td>"8 for (car=0; car<text.length; ++car) {9 switch (text.substring(car,car+1)) {10 case '0': taula += ferImg(cad,f,0);break;11 case '1': taula += ferImg(cad,f,1);break;12 case '2': taula += ferImg(cad,f,2);break;13 case '3': taula += ferImg(cad,f,3);break;14 case '4': taula += ferImg(cad,f,4);break;15 case '5': taula += ferImg(cad,f,5);break;16 case '6': taula += ferImg(cad,f,6);break;17 case '7': taula += ferImg(cad,f,7);break;18 case '8': taula += ferImg(cad,f,8);break;19 case '9': taula += ferImg(cad,f,9);break;20 case ':' : taula += ferImg(cad,f,10);break;21 }22 if (car != text.length-1) taula += "<img src='off.gif'>";23 }24 taula += "</td></tr>\n";25 }26 taula += "</table>";27 return taula;28 }

1 function ferImg(cad,f,ncar)2 {3 var img = "";4 for (var i=0; i<col; ++i) {5 img += "<img src='";6 img += (cad[col*fil*ncar+col*f+i] == '*')?"on.gif":"off.gif";7 img += "'>";8 }9 return img;10 }

<html><head><title>Rellotge digital</title><script language="JavaScript"> ...... introduïm la variable "caracters" ..... ...... introduïm les variables "col" i "fil" ..... ...... introduïm la funció digital() ..... ...... introduïm la funció ferImg() .....</script></head><body><script language="JavaScript"> var ara = new Date(); var hora = (ara.getHours()<10)?"0"+ara.getHours():ara.getHours(); var minuts = (ara.getMinutes()<10)?"0"+ara.getMinutes():ara.getMinutes(); var segons = (ara.getSeconds()<10)?"0"+ara.getSeconds():ara.getSeconds();

document.write( digital(hora + ":" + minuts + ":" + segons) );</script></body></html>


SGTI : Curs D108


El temps al meu costat > Calendaris

Hem v ist en la pràctica anterior com podem determinar dadesref erents a la data i hora del sistema i com les v isualitzem enel document. Ara es tracta de v eure una aplicació una micamés complexa: La creació d'un calendari.

Gairebé tota la pràctica girarà a l'entorn d'una f uncióencarregada de crear el calendari. Aquesta serà la f unció méscomplexa i a la que dedicarem més temps a explicar.

Un cop tindrem f eta la f unció de creació del calendari, la complementarem amb exemplesd'utilització i altres f uncionalitats addicionals per f er-la més atractiv a i interactiv a.

Conceptes JavaScript en aquest capítol.

Objecte Date : Proporciona mètodes per treballar amb dates.Mètode getFullYear() : Retorna el número de l'any que conté l'objecte Date.Mètode getMonth() : Retorna el número del mes que conté l'objecte Date.Mètode getDay() : Retorna el número del dia de la setmana que conté l'objecte Date.Mètode getDate() : Retorna el dia que conté l'objecte Date.Mètode setDate() : Estableix el número del dia que conté l'objecte Date.Propietat opener : Propietat de l'objecte Window que conté el nom de la f inestra mare.

1.- Descripció del codi. Inicialitzacions.

Començarem disseny ant el codi per crear un calendari mitjançant una f unció. S'ha elegitf er-ho en f orma de f unció ja que així serà més f àcilment transportable.

La f unció de nom calendari haurà de rebre dos paràmetres:, l'any i el número de mes (0 ..12) que desitgem v isualitzar. La sev a sintaxi serà la següent:

calendari(pAny , pMes);

Si els paràmetres pAny i/o pMes v alen 0, la f unció prendrà per def ecte l'any i el més delsistema. Un cop inv ocada la f unció, aquesta retorna una cadena que conté tot el codiHTML de la taula que f ormarà el calendari.

De f orma genèrica, la f unció està div idida en dues parts principals: la inicialització i lacreació de la taula dins una v ariable de cadena de nom cal. Cada part es pot subdiv idir en:

Inicialitzacions prèv ies:

Inicialitzar Array s i v ariables.

Obtenir la data actual del sistema.

Si els paràmetres que se li han passat són dif erents de zero, substituirà la data d'av uiper la dels paràmetres.

Determina si es tracta d'un any de traspàs.

Determinar el dia de la setmana del primer dia del mes.

Creació de la taula calendari:

Representar la primera f ila de la capçalera on hi ha el nom del mes i l'any .

Representar la f ila on hi ha els noms dels dies de la setmana.

Representar les primeres cel·les en blanc, si n'hi ha.

Representar les cel·les de les f iles on hi ha els números dels dies.

Representar les últimes cel·les en blanc, si n'hi ha.

El codi i la descripció de la f unció és extensa i per tant es div idirà en blocs f uncionals, alf inal de la pràctica, s'ha d'introduir tot el codi en conjunt, per treballar dins una pàgina HTMLd'aplicació. Per f acilitar la lectura del codi, les línies de la f unció calendari() estan

numerades. En l'aplicació pràctica, els números de línia no s'han de posar.

La f unció és la següent:

1 function calendari(pAny, pMes)2 {3 var nomDiaSem = new Array("Dl", "Dm", "Dc", "Dj", "Dv", "Ds", "Dg");4 var nomMes = new Array("Gener", "Febrer", "Març", "Abril", "Maig", "Juny", "Juliol", "Agost", "Setembre", "Octubre", "Novembre", "Desembre");5 var diesMes = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);6 var ampleCol = 30;

En aquestes primeres línies tenim la capçalera de la f unció calendari. Se li passen dosparàmetres, pAny i pMes. Les línies 3, 4 i 6 són v ariables amb continguts que es podenmodif icar per canv iar les abrev iacions, l'idioma, l'ample de columna, etc.

La línia 5 conté els dies de cada mes començant pel Gener, cal observ ar que en la dadaque correspon al més de Febrer s'hi ha posat 28 dies. Si l'any és de traspàs, aquest v alors'haurà de canv iar a 29. Més endav ant es f a aquesta comprov ació i es modif ica sis'escau.

La v ariable ampleCol conte l'amplada de cada cel·la de la taula del calendari en píxels, sies desitja f er el calendari més ample es pot f er canv iant aquest v alor.

7 var avui = new Date();8 if (pAny!=0) var any=pAny;9 else var any=avui.getFullYear();10 if (pMes!=0) var mes=pMes-1;11 else var mes=avui.getMonth();12 var dia=avui.getDate();13 var dataCal = new Date(any, mes, dia);14 if ( ((any%4==0) && (any%100 != 0)) || (any%400==0) ) diesMes[1] = 29;15 var numDies = diesMes[mes];

Cada cop que s'utilitza una v ariable per primera v egada ha d'anar precedida per lacorresponent declaració de v ariable var.

Mitjançant Date(), a la línia 7, s'obté la data del sistema i s'assigna a la v ariable tipus Datede nom avui. Aquesta data s'utilitzarà per assignar-la a les v ariables any, mes i dia, a noser que s'hagi posat en els paràmetres pAny i/o pMes un v alor dif erent de 0.

Les línies 8 i 9 s'encarreguen d'assignar a la v ariable any, l'any que indica el sistema, encas que pAny v algui 0 o en cas contrari, l'any indicat per pAny. Les línies 10 i 11 f an elmateix per la v ariable mes. La v ariable dia sempre contindrà el v alor de la data actual (línia12).

Cal notar que per determinar el v alor del dia, mes i any actuals, s'utilitzen els mètodesgetDate(), getMonth() i getFullYear() de Date. A la línia 10, es resta una unitat de pMes

per que el paràmetre pMes enumera els mesos entre 1 i 12, en canv i la v ariable mes elsenumera entre 0 i 11.

A la línia 13 es crea un nou objecte tipus Date, però en aquest cas, ja no és amb la dataper def ecte del sistema, sinó amb la data que nosaltres li passem com a paràmetres. Aixídoncs, dataCal contindrà la data que es mostrarà en el calendari (ens interessa per tenir elmes i any que s'ha de mostrar). Cal recordar que avui sempre conté la data actual delsistema i no té per que ser la mateixa que dataCal. Si totes dues són dif erents serà perquèalgun dels paràmetres passats a la f unció és dif erent de 0.

La línia 14 v erif ica si l'any és de traspàs o no, per això v erif iquem si any és un múltiple de4 i no és múltiple de 100, o bé, any és múltiple de 400. En cas que la condició sigui certa,v oldrà dir que és un any de traspàs i per tant, el nombre de dies del mes de Febrer hauràde v aler 29. Amb diesMes[1], f em ref erència al segon element (Febrer) de l'array diesMes

i el modif iquem, si s'escau.

Finalment, assignem a la v ariable numDies el nombre de dies que tindrà el mes arepresentar, obtenint el v alor de l'Array diesMes.

16 var primerDia = dataCal; //Determinem el dia de la setmana del primer dia del mes17 primerDia.setDate(1);18 var diaSem1 = (primerDia.getDay()==0)?7:primerDia.getDay(); //1->dilluns, 7->diumenge

Una altra dada que és necessari conèixer és el dia de la setmana en què comença el mes,és a dir, quin dia de la setmana és el dia 1 del més a representar.

Per això ens pot ser molt útil el mètode getDay() de Date. Aquest mètode retorna un v alorenter entre 0 i 6, on 0 correspon al Diumenge i 6 al Dissabte. Noteu que l'ordenació delsdies és la pròpia dels països anglosaxons.

Per determinar aquest dia, assignem, en la línia 16, a primerDia el v alor de dataCal, es adir, ara primerDia també serà un objecte tipus Date i conté la mateixa data que dataCal. Ala línia 17, utilitzem el mètode setDate(), aquest mètode assigna a un objecte tipus Date elv alor numèric corresponent al dia passat com a paràmetre. Per tant ara primerDia conté ladata del primer dia del mes sense hav er modif icat el v alor del mes i de l'any .

Finalment, a la línia 18, utilitzant el mètode getDay(), assignem el número del dia de lasetmana a diaSem1. Com que nosaltres v olem tenir una ref erència dels dies de la setmanasegons els nostres usos i costums i no, tal com ho f an en els països anglosaxons, hemd'ef ectuar una conv ersió amb l'ajut de l'operador ternari condicional ? : .

Aquest operador ternari ? : ja s'ha estudiat al mòdul 2, pràctica 4 i en el mòdul 3 pràctica 3.En aquest cas, té la f unció de seleccionar entre dos v alors en f unció de la condició. Si elv alor retornat per getDay() és 0, s'assignarà un 7 a diaSem1. En canv i, per a qualsev olaltre v alor retornat per getDay(), serà assignat directament a diaSem1. Amb això tindremque diaSem1, v aldrà un v alor entre 1 i 7 on 1 correspondrà a Dilluns i 7 a Diumenge.

Fins aquí ja s'han inicialitzat tots els v alors prev is a la creació del calendari. I en resum,sabem que les v ariables més importants que necessitarem a partir d'ara són:

av uiObjecte Date amb la data actual del sistema (pot coincidir, o no ambdataCal).

dataCal Objecte Date amb la data que es v ol representar al calendari.

dia Valor numèric corresponent al dia d'av ui.

mes Valor numèric corresponent al mes a representar. (0 - Gener, 11 - Desembre)

any Valor numèric corresponent a l'any a representar.

diaSem1 Valor numèric del dia de la setmana del dia 1 (1 - Dilluns, 7 - Diumenge).

ampleCol Amplada en píxels de cada columna del calendari.

nomMes Array amb els noms dels mesos.

nomDiaSem Array amb els noms dels dies de la setmana.

2.- Descripció del codi. Creació de la taula - calendari.

Les línies de codi que v enen a partir d'ara s'encarreguen de crear la taula - calendari.Únicament s'indica el codi imprescindible per a la correcta v isualització, més endav ant jas'af egiran altres elements estètics i de f uncionalitats més específ iques.

Gairebé tota la representació es basa en l'escriptura de codi HTML, f ormant l'estructura dela taula. Tota aquesta estructura de la taula s'introduirà seqüencialment en una v ariable detipus cadena de nom cal. Al f inal, tot el contingut d'aquesta v ariable serà retornat per laf unció.

Les cel·les que hagin d'estar en blanc, s'omplen amb espais . Totes les línies decodi són per crear una estructura de taula similar a la següent, on, ev identment, els v alorscanv iaran segons quin sigui el mes a representar.

19 var cal="<table border='1'>\n";20 cal += "<tr><th colspan='7'>" + nomMes[mes] + " " + any + "</th></tr>\n";

La línia 19 inicialitza la taula. Declarem inicialment la v ariable cal i li assignem la directiv a<table...>.La línia 20 s'encarrega d'escriure la capçalera de la taula, resultant un f ormat similar alsegüent:

Noteu com en la línia 20 s'utilitza l'operador +=, en aquesta aplicació, aquest operadorassigna a la v ariable de l'esquerra la concatenació dels v alors que hi ha a la dreta i al'esquerra. Per exemple: Si 'v ble' és una v ariable que v al "cadena1" i f em v ble += "cadena2", la v ariable 'v ble' v aldrà "cadena1 cadena2", això és equiv alent a f er: v ble = v ble+ "cadena2".

21 cal += "<tr>";22 for(var i=0; i<7; i++) cal += "<th width=' " + ampleCol + " '>" + nomDiaSem[i] + "</th>";23 cal += "</tr>\n";

Aquest bloc de codi recorre l'array nomDiaSem i crea una f ila de la taula amb 7 cel·les,una per a cada dia. En cada cel·la s'introdueix el nom del dia de la setmana llegit de l'arraynomDiaSem. En aquesta secció també s'especif ica l'amplada de la cel·la segons el v alord' ampleCol, per tant, s'està introduint l'ample de les columnes de tota la taula. El tros detaula creat serà el següent:

24 var columna = 1;25 cal += "<tr>";26 for(i=1; i<diaSem1; i++) {27 cal += "<td> </td>";28 ++ columna;29 }

Segons quin sigui el mes a representar, pot passar que les primeres cel·les estiguin enblanc. El blucle for, entre les línies 26 i 29, s'encarrega d'escriure cel·les en blanc f ins aarribar al v alor de diaSem1, recordem que aquesta v ariable té el v alor numèric del nom del

dia corresponent al dia 1r del mes.

A la línia 24 s'inicialitza una v ariable de nom columna, aquesta v ariable s'utilitzarà enaquest bloc i els següents per saber en quina columna s'està escriv int de les 7 que té elcalendari. Això serv irà per saber quan s'ha de f er un canv i de f ila.

30 for(i=1; i<=numDies; i++) {31 cal += "<td><center>" + i + "</center></td>";32 if(++columna > 7) {33 cal += "</tr>\n";34 if (i < numDies) cal += "<tr>";

35 columna = 1;36 }37 }

Aquestes línies són les responsables d'escriure el cos principal del calendari. Per això escrea un bucle for on la v ariable i canv iarà des de 1 f ins al màxim nombre de dies delcalendari (numDies).

A la línia 31, per cada v alor d'i, s'af egeix a cal una cel·la que contindrà el numero de diacorresponent que s'obté de la v ariable i.

A més, a cada cel·la, també s'incrementa el v alor de la v ariable columna, si aquestav algués 7, v oldria dir que ja s'ha completat una f ila i s'ha de començar la següent, per tant,si columna v al 7, s'af egeix a cal un </tr> per tancar la f ila. En el cas que no s'hagi acabatd'escriure el calendari també s'af egeix un <tr> per obrir la nov a f ila i es torna a posar elv alor de columna a 1, tal com es pot v eure a les línies 33, 34 i 35.

Al sortir del bucle for, ja s'hauran af egit a cal totes les cel·les que tenen un contingutnumèric corresponent a un dia del mes, de f orma similar a la següent imatge:

38 if (columna!=1) {39 for(i=0; i <= 7-columna; ++i) cal += "<td> </td>";40 cal += "</tr>\n";41 }42 cal += "</table>";4344 return cal;45 }

Finalment, en el cas que el v alor de columna sigui dif erent de 1, v oldrà dir que encara nos'ha acabat d'omplir amb cel·les l'última f ila. Per això, s'inicia un altre bucle for queintrodueix les cel·les en blanc necessàries per completar la f ila. Si columna v algués 1, (línia38) no f aria f alta acabar de completar la f ila, ja que aquesta hauria acabat amb un v alornumèric corresponent a un número de dia.

La línia 42 tancarà la taula. Amb tot això ja estarà creat el calendari i també haurà acabat laf unció. Ara solament queda retornar el v alor de la v ariable cal, que conté tota lainf ormació HTML de la taula creada representant el calendari desitjat, tal com es f a a lalínia 44.

Per prov ar el seu f uncionament s'ha de crear una pàgina web que incorpori aquesta f unció il'executi. El següent exemple ens mostra el seu f uncionament. En aquest cas s'inv oca a laf unció amb els paràmetres 0 per l'any i 0 pel mes, per tant, ens mostrarà el calendari delmes i any que indiqui el rellotge del sistema. Si v olem un altre mes i/o any s'haurà decanv iar el v alor dels paràmetres de la inv ocació de la f unció dins el bloc <body >.

<html><head><title>Calendari</title><script language="JavaScript"> ...codi corresponent a la funció calendari()... descrit des de la línia 1 fins la 45</script></head><body><script language="JavaScript">

document.writeln(calendari(0,0));</script></body></html>

3.- Afegim colors i altres funcionalitats.

El que v e a continuació són v ariacions sobre el codi anterior de la f unció calendari(). Noes rescriurà tot el codi de nou, solament s'indicaran les línies que es modif iquen, s'esborreno s'af egeixen per introduir les nov es f uncionalitats.

Si s'af egeix alguna línia al codi de la f unció original, aquesta línia portarà com a número elmateix de l'anterior seguit d'una lletra ( p. e. 32, 32a, 32b, ... ).

Es tracta d'afegir colors a les dif erents cel·les del calendari, a més es desitja que la cel·laque mostra el dia, mes i any actuals quedi marcada amb un altre color. Per f er-ho s'af egeixla directiv a d'HTML bgcolor als <th> i <td> corresponents per indicar el color de f onsdesitjat. Així es f a a les línies 20, 22, 27, 31 i 39. Per f er que la cel·la que indica el diaactual quedi d'un altre color es f a mitjançant un condicional if. Aquest condicional quedaindicat en les nov es línies 31a i 31b. Si el dia, any i hora coincideix amb el dia, any i horaactuals, la cel·la quedarà marcada en v ermell, en cas contrari en groc.

A continuació podem v eure les modif icacions i af egits a f er (per prov ar-ho es pot f er ambla mateixa plana HTML def inida al f inal de l'apartat anterior):

Modificar:

20 cal += "<tr><th colspan='7' bgcolor='#ffff00'>" + nomMes[mes] + " " + any + "</th></tr>";22 for(var i=0; i<7; i++) cal += "<th width=' " + ampleCol + " ' bgcolor='#ffff00'>" + nomDiaSem[i] + "</th>";27 cal += "<td bgcolor='#ffffc0'> </td>";39 for(i=0; i <= 7-columna; ++i) cal += "<td bgcolor='#ffffc0'> </td>";

Modificar i afegir:

31 cal += "<td bgcolor=";31a if (i==dia && avui.getMonth()==dataCal.getMonth() && avui.getFullYear()==dataCal.getFullYear()) cal += " '#ff8080' ";31b else cal += " '#ffffc0' ";31c cal += "><center>" + i + "</center></td>";

4.- El calendari interactiu.

Des del principi, ja s'ha dit que la f unció calendari() que hem creat admet dos paràmetres,l'any i el mes. Fins ara no els hem f et anar i ens hem limitat a posar-hi 0 per l'any i 0 peldia. Per tant, sempre ens apareix el calendari del mes actual.

En aquest apartat, es tracta de f er que el nostre calendari sigui interactiu, és a dir, desd'una f inestra mare, hem de poder elegir el mes i/o l'any desitjat i f er que es mostri elcorresponent calendari en una f inestra f illa.

Encara més, també f arem que cada dia del calendari sigui un link que al f er-li clic a sobreens indiqui, en un quadre de text de la f inestra mare, la data seleccionada.

Com en l'apartat anterior, tampoc rescriurem el codi de la f unció calendari(), simplementaf egirem i/o modif icarem aquelles línies que f acin f alta.

La f unció esta preparada per rebre paràmetres, però, no n'esta per f er que cada dia sigui un'link'. Per f acilitar la tasca de posteriors modif icacions, crearem una nov a f unció ques'encarregarà d'escriure el link en el lloc on v agi el dia.

Aquesta nov a f unció es diu escriuDia(pAny , pMes, pDia) i se li han de passar elsparàmetres corresponents al dia, mes i any que s'està escriv int a sobre el calendari.Aquesta f unció s'encarregarà d'escriure el dia i a més deixarà preparat el 'link' per poderretornar la data elegida a la f inestra mare.

Per ref erenciar la f inestra mare des d'una f inestra f illa s'utilitza la propietat opener del'objecte Window. Aquesta propietat conté el nom de la f inestra mare.

La nov a f unció serà la següent:

function escriuDia(dia,mes,any){ ++mes; return "<a href=' ' onClick='opener.document.form1.data.value=\"" + dia +"-"+ mes +"-"+ any +"\"; return false;'>" + dia + "</a>";}

En aquesta nov a f unció, s'ha d'incrementar el v alor del mes, ja que internament a la f unciócalendari(), la v ariable mes es troba dins el rang entre 0 i 11. La f unció retorna una cadenaamb el codi HTML necessari per f er el 'link' desitjat, conjuntament amb el número de dia.

Si es desitgés donar una nov a f uncionalitat als links dels dies que f ormen el calendari,solament caldria modif icar el contingut de la f unció escriuDia().

Per incorporar la nov a f unció escriuDia() dins la f unció calendari(), modif icarem i/oaf egirem les línies següents a la f unció calendari() :

Modificar:

31c cal += "><center>";

Afegir:

31d cal += escriuDia(i,mes,any);31e cal += "</center></td>";

Per prov ar el f uncionament s'ha de crear una pàgina HTML que permeti env iar i rebreparàmetres com la que es v eu a continuació. Dins el bloc <head>, a part de les f uncionscalendari() i escriuDia(), també hi ha la f unció popup().

La f unció popup() s'encarrega de crear la f inestra que contindrà el calendari, a la pràctica

4 del mòdul 3 s'explica com obrir f inestres f illes des d'una f inestra mare.

Dins el bloc <body > es crea un f ormulari, de nom form1, amb tres camps de text i dosbotons. En els dos primers camps de text s'introdueix el mes i any a env iar a la f unció. Eltercer camp de text rebrà el v alor al que hem f et clic en el 'link' del calendari.

Quan f em clic sobre el botó "Crear cal.", s'inv oca la f unció popup() mitjançant el seucontrolador d'ev ent onClick, passant-li a la v egada el v alor del mes i any . La f unciópopup() és la que crearà la f inestra f illa i a la v egada inv ocarà la f unció calendari()

passant-li els mateixos paràmetres.

El codi HTML és el següent:

<html><head><title>Calendari</title><script language="JavaScript">

var finestra;

.... afegir la funció calendari() .....

.... afegir la funció escriuDia() .....

function popup(pAny, pMes)

{ window.focus(); opt = 'resizable=1,scrollbars=1,width=300,height=225,left=5,top=60'; finestra=window.open('', 'popup', opt); with (finestra.document) { writeln('<html>\n<head>\n<title>Calendari</title>\n</head>'); writeln('<body bgcolor="#c0c0c0">'); writeln(calendari(pAny, pMes)); writeln('</body>\n</html>'); close(); } finestra.focus();}</script></head>

<body bgcolor="#99ffcc"><form name="form1"> <table border="0" width="250" align="center"> <tr> <td>Mes (1..12, 0 actual):</td> <td align="center"><input type="text" name="mes" size="5" value="0"></td> </tr> <tr> <td>Any (0 actual):</td> <td align="center"><input type="text" name="any" size="5" value="0"></td> </tr> <tr> <td colspan="2" align="center"> <input type="button" value="Crear cal." onClick="popup(any.value,mes.value);"> </td> </tr> <tr> <td>Data elegida:</td> <td><input type="text" name="data" size="11" value=""></td> </tr> </table></form></body></html>


SGTI : Curs D108


El temps al meu costat > Barra de progrés

Quan instal·lem un programa, f em una còpia d'arxius o carreguem una pàgina desd'Internet, una barra de progrés ens ajuda a saber com v a la f eina.

A les pàgines web, aquesta pot ser una manera d'indicar quela pàgina no està inactiv a, que s'ha engegat un procés iencara no s'ha acabat. També podríem usar un missatge deltipus "Espereu un moment ...", però una barra inf orma més.

Hi ha moltes maneres de f er barres de progrés, però aquí només en v eurem una. Amb tresexemples, ens aproximarem a un estil de programació que genera codi curt i net. La barraés l'excusa. El que compta és l'algoritme i el llenguatge n'és una eina.


Mètodes setTimeout() i clearTimeout() : creen i eliminen un temporitzador.Mètodes setIntervalt() i clearInterval() : creen i eliminen un interv al de temps.Funció eval() : av alua una expressió o bloc de codi.Operador -= : resta el v alor de la dreta a la v ariable de l'esquerra i li assigna el resultat.

1.- Barra gràfica

Per començar, f arem una barra gràf ica amb els elements imprescindibles i poc codi.Donem per suposat que les imatges que la f ormen són les úniques o, si més no, lesprimeres que hi ha a la pàgina. No és la millor manera, perquè poques v egades ho tindremtan f àcil, però ens serv irà per entendre'n el f uncionament i poder ampliar-la més endav ant.

Es tracta de dibuixar una tira d'imatges iguals i, després, substituir-les progressiv ament perunes altres. Al cos (<body >) de la pàgina f arem un bucle que dibuixi les imatges:

f or( i=0; i<40; i++ ) { document.write( '<img src="images/punt.gif " width="5" height="20">' ) }

Utilitzem com a base un arxiu .gif de 1x1 píxels, "estirat" f ins a 5x20. Posem 40 imatgesiguals d'aquesta mida amb el mètode write, perquè no quedi separació entre elles.Tanquem jav ascript i f em un parell de v incles, l'un per engegar la barra i l'altre per reiniciar.

A la capçalera, declarem una v ariable (tm) pel temporitzador. També declarem el númerod'imatge (nImg), que ens f arà d'índex, i el posem a zero. A continuació f em la f unciópinta(), que anirem activ ant mentre quedi barra per pintar.

Temporitzadors i recursiv itat. Dins de la f unció, primer "netegem" el temporitzador amb elmètode clearTimeout() i després comparem el número d'imatge amb la longitud de la barra.Si encara és menor, canv iem la imatge actual per una de nov a, incrementem l'índex i f emun temporitzador que torni a engegar la f unció al cap d'un temps: tm = setTimeout( "pinta()",50 ).

El mètode setTimeout() av alua una expressió o crida una f unció al cap del tempsespecif icat al segon paràmetre, en mil·lisegons. La f unció ha d'anar entre cometes, si nov olem que s'executi immediatament. Només ho f a una v egada.

<script language="javascript">var tmvar nImg = 0function pinta() { clearTimeout( tm ) if ( nImg<40 ){ document.images[id].src = "images/barra.gif" nImg++ tm = setTimeout( "pinta()", 50 ) }

}</script></head>

<body ...><h2>Barra de progrés</h2><script language="javascript">for( i=0; i<40; i++ ) { document.write( '<img src="images/punt.gif" width="5" height="20"> ' )}</script><h3><a href="javascript:pinta()">Començar</a> <a href="javascript:location.reload()">Reiniciar</a></h3>...

2.- Millorar la funcionalitat

L'exemple anterior, tot i que aquí f unciona, està conf eccionat, perquè es basa en l'Arrayimages. Si la pàgina conté imatges abans de la barra, no f uncionaria.

Tenim l'excusa per prov ar nov es maneres. Farem la mateixa barra amb lleugeresv ariacions: 25 quadres en lloc de 40 i els colors inv ertits. També canv iarem eltemporitzador: en lloc de setTimeout() utilitzarem setInterval().

L'objectiu és f er una barra de progrés que puguem posar en qualsev ol lloc. Si baixem lesimatges des d'una f unció situada a la capçalera: Per cridar-la des d'un lloc del cos (<body >)cal escriure <script language="jav ascript">base()</script>. També f arem dif erent el v incleper activ ar la barra, amb un enllaç f als i l'ev ent onClick="return inicia()".

Deixem el cos i anem a les f uncions. La primera, base(), pinta l'espai de la barra. Abansera al <body > (sense "f unction") i ara és al <head>. La nov etat més important és que, ara,les imatges tenen un nom, f ormat per la paraula "quadre" i el número d'índex del bucle. Uncop hem passat per aquí, les imatges de la barra s'anomenen "quadre0", "quadre1", ... Ambaixò, ja ens és igual si la pàgina conté més imatges abans o després.

La f unció inicia() que hem associat a l'ev ent onClick, ha de retornar f als, això ja hosabem. Abans, però, crea un temporitzador: tm = setInterv al( 'pinta()', 50 ), que crida laf unció "pinta()" cada 50 mil·lisegons (i continuaria indef inidament si no la parem).

La f unció pinta() també està canv iada. Primer crea el nom de les imatges amb la paraula"quadre" i l'índex (nImg), de f orma que ens hi podem ref erir amb "document." més el nom:

ev al( 'document.' + nom + '.src = "images/punt.gif "' )

La f unció interna eval(), la "perla" de Jav aScript, permet av aluar expressions f ormades perconstants, v ariables, literals o tots junts, i les executa. En aquest cas, cada v egada el nomde la imatge és dif erent (quadre0, quadre1, ...) i per això no el podem posar com a partd'una instrucció. La f unció ev al() ho soluciona. A cada pas donarà com a resultat:

document.quadre0.src = "images/punt.gif ", document.quadre1.src = "images/punt.gif ", ...

Finalment, haurem d'incrementar el comptador i, si ha arribat a 25, "netejar" el temporitzadorperquè no continuï actuant: if ( nImg==25 ) clearInterv al( tm ). Com passa sov int enJav aScript, el codi és més f àcil d'entendre que l'explicació:

<script language="javascript">var tmvar nImg = 0function base() { for( i=0; i<25; i++ ) { document.writeln( '<img src="images/barra.gif" width="8"' ) document.write( 'height="16" name="quadre' + i + '">' ) }}function inicia() { tm = setInterval( 'pinta()', 50 ) return false}function pinta() {

var nom = "quadre" + nImg eval( 'document.' + nom + '.src = "images/punt.gif"' ) nImg++ if ( nImg==25 ) clearInterval( tm )}</script></head>

<body ...><h2>Barra de progrés</h2><script language="javascript">base()</script><br><br><a href="" onClick="return inicia()">Començar</a> <a href="javascript:location.reload()">Reiniciar</a></h3>...

3.- Vertical i a la carta

L'estructura del segon exemple queda més clara, però el temporitzador del primer és millor.Al següent exemple v eurem una barra v ertical, que s'omple de baix a dalt, i que f uncionasense la limitació del número d'imatges, és a dir, s'adapta als passos que hagi de f er. Percomprov ar-ho, establirem els passos i el temps d'espera amb un f ormulari.

Amb el Dreamweav er, f em una taula de dues cel·les. En una hi posarem la barra. L'altracontindrà un f ormulari amb dos camps de text, passos i retard, i dos botons, l'un perengegar la barra i l'altre per reiniciar la pàgina. Utilitzem l'ev ent onClick = "return inicia(f orm1 )".

Un cop disseny at el cos, passarem a les f uncions Jav aScript de la capçalera. En aquestcas, comencem declarant quatre v ariables globals:

- factor : un número que indica com ha de créixer la barra. - temps : quants mil·lisegons ha d'esperar f ins al proper intent. - tm : "temps mort", v ariable per ref erenciar el temporitzador. - nImg : número d'imatge que es substitueix a cada pas. S'inicialitza al 21.

Ja coneixem la f unció base(), que dibuixa la barra. Ara anirà dins d'una cel·la. Cada imatgeserà de 40x8 amb un píxel de separació per sobre i per sota (v space). Com abans, el nomde les imatges es f orma amb "quadre" i l'índex del bucle.

Deixem, de moment, la f unció de pintar, i f em la f unció inicia( f1 ), que processa elf ormulari. L'hem passat com a paràmetre i, a dins de la f unció s'assigna a una v ariable, f1.També assignem a la v ariable "temps" el v alor del camp "retard", conv ertit a enter ambparseInt().

Fem el mateix amb els "passos" i els assignem a una v ariable local, nPas. Si és menor que1, li posem 1, i guardem a la v ariable "f actor" el quocient de div idir 20 entre el número depassos. Com que el div isor ha estat triat per l'usuari, el resultat pot ser decimal. Nomésens queda cridar la f unció de pintar i retornar "f alse" al botó del f ormulari que l'hav iaactiv at.

La f unció pinta() és la peça clau. Tot i que no és complicada, cal analitzar-ladetingudament. La f arem de manera que pinti la barra independentment del número depassos. Recordem que tenim 20 imatges. Haurem de prev eure que els passos siguinmenors o majors que aquest número. Com? Mirem i prov em un moment el codi, i hoaclarim després.

<script language="javascript">var factor, temps, tmvar nImg = 21function base() { for( i=1; i<21; i++ ) { document.writeln( '<img src="images/punt.gif" width="40"' ) document.writeln( 'height="6" vspace="1" name="quadre' + i + '"><br>' ) }}function pinta() { clearTimeout(tm) nImg -= factor if( nImg>=1 ) { if( factor>1 ) {

for( i=20; i>nImg-1; i-- ) { eval( 'document.quadre' + i + '.src="images/barra.gif"' ) } } eval( 'document.quadre' + Math.floor(nImg) + '.src="images/barra.gif"' ) tm = setTimeout( 'pinta()', temps ) } else document.img1.src="images/barra.gif"}function inicia( f1 ) { temps = parseInt( f1.retard.value ) var nPas = parseInt( f1.passos.value ) if( nPas<1 ) nPas = 1 factor = 20/nPas pinta() return false}</script></head>

<body ...><table width="350" cellpadding="3" align="center"><form name="form1"> <tr> <td align="center" width="42" nowrap bgcolor="#99AA99"> <script language="javascript">base()</script> </td> <td align="center" bgcolor="#BBCCBB"><h3>Barra de progrés</h3> Passos: <input type="text" name="passos" size="3" value="20" maxlength="3"> Retard: <input type="text" name="retard" size="3" value="50" maxlength="3"> milisegons<br><br><br> <input type="button" name="ok" value="Començar" onClick="return inicia(form1)"> <input type="button" name="reset" value="Reiniciar" onClick="location.reload()"><br> </td> </tr></form></table>...

La f unció pinta() comença amb la neteja del temporitzador, clearTimeout( tm ), i, acontinuació assigna al número d'imatge el v alor que tenia meny s el del f actor: nImg -=f actor. És a dir, hem començat per la imatge de sota i anirem restant f ins arribar a laprimera. Com que "f actor" pot ser un decimal, "nImg" també ho pot ser. Aquest detall ésimportant.

Després, comprov em que el número d'imatges és encara major o igual que 1: if ( nImg >=1). Si és així, hem de considerar que, potser, haurem de representar amb 20 imatges unnúmero menor que 20, o, dit d'una altra manera, el "f actor" pot ser major que 1 if (f actor>1), i s'haurà de pintar més d'una imatge cada v egada. Per això, f em un bucle queles pinti des del peu de la barra f ins a l'anterior de la que toca:

ev al( 'document.quadre' + i + '.src="images/barra.gif "' )

Sigui quin sigui el f actor, ara hem de pintar la imatge de la barra que correspon al v aloractual. Com que "nImg" pot ser decimal, utilitzem el mètode Math.floor(), que, com hemv ist en altres pràctiques, elimina els decimals i es queda amb l'enter:

ev al( 'document.quadre' + Math.f loor(nImg) + '.src="images/barra.gif "' )

Finalment, només ens queda establir el temporitzador que tornarà a executar la mateixaf unció al cap del temps que hagi establert l'usuari: tm = setTimeout( 'pinta()', temps ). Si jas'ha arribat a la primera imatge, pot ser que el v alor de "nImg" sigui menor que 1 i encarano l'hagi pintada. Per això, la pintem directament, sense "ev al()", perquè sabem el seu nom:

else document.img1.src="images/barra.gif "

Tenim una f unció univ ersal, que s'adaptarà a qualsev ol necessitat. Hem utilitzat duestècniques av ançades, la recursiv itat i l'av aluació de codi. I ens ha quedat curteta. Ho hemtrobat dif ícil? En programació, el que compta és l'algoritme.


SGTI : Curs D108


El temps al meu costat > Accions en segon pla

Què f a la connexió mentre es llegeix la pàgina? Sov int, res. En canv i quan, després,l'usuari f a clic sobre un enllaç, ha d'esperar que l'arxiu arribi i, si és una imatge gran, pottrigar. Amb els temporitzadors de Jav aScript i una mica d'estratègia podem aprof itar el"temps mort" en què la connexió està aturada per carregar el que s'ha de v eure acontinuació.

Això no sempre està ben v ist, i s'ha d'utilitzar amb molta cura.Hem d'estar segurs (o gairebé) que l'usuari v oldrà v eure allòque li colem al seu disc dur sense permís, i que s'estimarà mésque f em aquest joc brut que no pas hav er d'esperar.

En aquesta pràctica només v eurem un exemple: una col·leccióde f otos sobre pintures de Vincent Van Gogh. Quan s'acabi demostrar la primera imatge, engegarem un procés en segon plaque carregarà les altres, de manera que, quan l'usuari les v ulguiv eure, les pugui tenir a l'instant.

Tot i que els aspectes gràf ics es tracten al mòdul següent, aquíiniciarem el treball amb imatges des de Jav aScript. Ens serv iràd'aperitiu.


Ev ent onLoad() : (aplicat a imatges) executa una acció quan la imatge està carregada.Objecte document.images : Array amb totes les imatges d'una pàginaPropietat complete : determina si una imatge ja està totalment carregada.Mètode new Image() : crea un objecte imatge de Jav aScript, buit.Propietat src : adreça de l'arxiu que conté una imatge

1.- Variables globals i estructura

Les accions en segon pla són un concepte genèric que es pot aplicar en molts llocs i dediv erses maneres. Aquí plantegem una aplicació d'objectiu didàctic, per v eure com es f a, iaixò condiciona l'estructura. Només és un exemple, l'important és observ ar l'estratègia.

Utilitzarem Jav aScript en dos llocs: a la capçalera <head> hi posarem les v ariables globals iles f uncions, i al cos <body >, el bucle que f arà els enllaços amb les f otos. L'aplicaciósuposa que totes les f otos són a la mateixa carpeta, que tenen f ormat .jpg, i que el seunom és la paraula "v g0", seguida d'un número entre 1 i 9: v g01.jpg, v g02.jpg, ... v g09.jpg.

Comencem amb les v ariables globals: - model : la primera part del nom de les f otos: images/v g0. S'assigna des del cos. - nImg : el número de la imatge. S'incrementa quan la imatge anterior està carregada. - nMax : número màxim de f otos. S'utilitza per saber quan s'ha d'acabar. - tm : ref erència al temporitzador. - foto : Array d'objectes imatge. És el que anirem omplint amb les f otos.

També a la capçalera hi escriurem tres f uncions, que v eurem en detall més endav ant: - fesImg() : resol el nom de cada f oto, l'af egeix a l'Array i n'inf orma. - tempsMort() : f a comprov acions i gestiona el temps mort. - segonPla() : rep els paràmetres, assigna les v ariables globals i engega el procés.

Passem al cos. Posem un f ormulari amb un camp de text que ens inf ormarà sobre elnúmero d'imatge que s'està carregant. A continuació, situem una imatge, amb laparticularitat que assignem l'ev ent onLoad="segonPla('images/v g0','9')". És a dir, quan laf oto s'hagi acabat de carregar (onLoad), s'executarà la f unció "segonPla" amb dosparàmetres: el model de f oto i el número màxim.

Després, obrim Jav aScript i f em el bucle dels enllaços. Tot i que no és la f orma habitual,aquí hem f et el f amós enllaç buit i assignem l'ev ent onClick, de manera que es substitueixi

la f oto que es mostra en pantalla: onClick="img1.src=\'' + imatge + '\';return f alse". Altrecop utilitzem l'antibarra (\) per indicar que el que v e a continuació són unes cometessimples o apòstrof .


var model, nImg, nMax, tm

var foto = new Array()

function fesImg() ...

function tempsMort() ...

function segonPla() ...

</script>

<body>

<center>

<form name="form1">

<b>Carregar imatges en segon pla:</b>

<input type="text" name="actual" size="1" value="0" >

</form>

<img name="img1" src="images/vg01.jpg" border="1" width="360"

height="260" onLoad="segonPla('images/vg0','9')"><br><br>


for( i=1; i<10; i++ ) {

var imatge = 'images/vg0' + i + '.jpg'

document.writeln( '[<a href="" onClick="img1.src=\'' + imatge + '\';return false">' )

document.writeln( '<b> ' + i + ' </b></a>] ' )

}

</script>

...

2.- Funció segonPla( m, n )

Suposem que s'acaba de carregar la primera imatge. Tal com hem prev ist, cridarà la f unció"segonPla" amb dos paràmetres, el model i el número màxim de f otos. La f unció els rep iels assigna a dues v ariables locals, m i n. Primer, "neteja" el temporitzador.

A continuació cal comprov ar que totes les imatges de la pàgina s'han acabat de carregar.En aquest cas, no caldria, perquè sabem que només n'hi ha una, però és un bon hàbit.Utilitzem una v ariable ok = true i f em un bucle que repassi les imatges del document. Sialguna encara no s'ha completat, assignem ok = f alse i sortim del bucle (break).

L'expressió "! document.images[ i ].complete" utilitza l'operador de negació (!) i consulta lapropietat complete de la imatge actual.

Si "ok" és encara true és que totes les imatges de la pàgina s'han carregat. Aleshores,assignem les v ariables globals i f em un temporitzador a la f unció "tempsMort()". En cascontrari, tornem a intentar-ho al cap d'un temps utilitzant recursiv itat, és a dir, f em untemporitzador a la pròpia f unció "segonPla" amb els paràmetres que hav ia rebut.

function segonPla( m, n ) {

clearTimeout( tm )

var ok = true

for( i=0; i<document.images.lenght; i++ ) {

if( !document.images[i].complete ) {

ok = false

break

}

}

if( ok ) {

model = m

nMax = parseInt( n )

nImg = 0

tm = setTimeout( 'tempsMort()', 100 )

}

else tm = setTimeout( 'segonPla("' +m + '","' + n + '")', 100 )

}

3.- Funció tempsMort()

Bé, si arribem a aquesta f unció és que som en un temps mort, la pàgina ha acabat la sev acàrrega d'imatges. Com que hi haurem arribat amb un temporitzador, primer, el netegem, i,seguidament, comprov em si també s'han carregat les f otos en segon pla. Si és així,tornem.

La línia: if( nImg>=nMax || nImg==nImg-1 ) return

Vol dir: si el número d'imatge ha arribat al màxim o és el mateix de la vegada anterior, torna.

A continuació hem de f er una distinció: si la imatge encara no és la segona, incrementem elcomptador i cridem la f unció "f esImg()". Si no, abans hem de comprov ar que la imatgeanterior ja és completa. Si no ho f éssim, el nav egador intentaria carregar-les totes alhora.En qualsev ol cas, la f unció, recursiv a, acaba cridant-se a ella mateixa amb untemporitzador.

function tempsMort() {

clearTimeout( tm )

if( nImg>=nMax || nImg==nImg-1 ) return

if( nImg<2 ) {

nImg++

fesImg()

}

else {

if( foto[nImg-1].complete ) {

nImg++

fesImg()

}

}

tm = setTimeout( 'tempsMort()', 100 )

}

4.- Funció fesImg()

Aquí s'hi arriba en f ila. Quan aquesta f unció processa la primera f oto en segon pla ésperquè totes les imatges de la pàgina són completes i, quan processa cadascuna de lesaltres, és perquè està totalment carregada l'anterior.

És ben simple: crea el nom de la imatge a partir del model, el número i ".jpg". A continuació,f a un nou objecte "Image()" i assigna el nom que ha creat a la propietat .src. Amb això elnav egador en té prou per començar la càrrega de la f oto.

Finalment, com que l'objectiu de l'exemple és didàctic i v olem saber què f a la f unció,escriu el número d'imatge al camp del f ormulari que hav íem posat per aquest motiu.

function fesImg() {

var nomImg = model + nImg + '.jpg'

foto[nImg] = new Image()

foto[nImg].src = nomImg

document.forms[ 0 ].actual.value = nImg

}

5.- Tot plegat

Per v eure el codi de l'aplicació, l'obrim amb qualsev ol dels botons anteriors i utilitzem elv isor de codi f ont del nostre nav egador.

Resumint, tenim una pàgina que carrega una f oto i, quan ho ha f et, engega una f unció quecomprov a si queden f eines pendents. Quan v eu que no en queden, engega una altra f uncióque carrega una f oto en segon pla i, un cop acabada, una altra, f ins al màxim que li hemdit.

La principal dif icultat de treballar amb temporitzadors és psicològica: les div erses f uncionsno s'executen en l'ordre en què les hem escrites, sinó quan es "dispara" el temporitzador.Això f a que la lectura del codi resulti dif ícil de seguir, perquè hem d'imaginar que "s'haesgotat el termini i aleshores salta a ...". Potser haurem de rev isar el codi div ersesv egades.

A l'exemple hem posat a tots els temporitzadors un temps d'espera de 100 mil·lisegons. Ésaixí perquè escriv im el número en un quadre de text i v olem que es v egi. Quan s'aplica auna pàgina "de v eritat", normalment pretenem tot el contrari: que no es perdi temps i que noes noti que f em f eina en segon pla. Fàcil, traiem el quadre de text i posem 1 mil·lisegon.

Algú pot opinar que no cal tant codi, i que amb un bucle n'hi hauria prou. Això està molt béper a la precàrrega (ho v eurem al mòdul següent) però aquí no. Un bucle deixaria alnav egador la f eina de gestionar la càrrega, i aquest ho posaria a la sev a "cua" deprocessament. Quan l'usuari f es clic en un v incle, hauria d'esperar el seu torn mentre escarreguen les imatges.

Una última observ ació: tot això s'engega des de l'ev ent "onLoad" en acabar la càrrega decada f oto. D'aquesta manera, si l'usuari f a clic en un v incle quan encara no s'han carregattotes, es mostra la que demana i es torna a començar el procés de comprov ació. Sil'algoritme és correcte, haurem aprof itat el temps mort al màxim. Time is on my side.


SGTI : Curs D108

Mòdul: 5

El temps al meu costat > Temps controlat

A hores d'ara segur que controlem molt millor el que passa a les nostres pàgines, perquè

comencem a controlar el temps. Per acabar aquest mòdul, f arem un parell d'exercicis que

ens obligaran a rev isar i consolidar gairebé tot el que hem v ist a les pràctiques.

Exercici 1

El primer exercici es basa en les pràctiques 1 i 2. Es tracta de f er un rellotge i un calendari

que marquin l'hora i la data actual, indicant el dia de la setmana. Cal que ho f em en un

f ormat petit perquè, el seu objectiu hipotètic - o real, si ho v olem - seria el de f ormar part

d'una pàgina més gran, com a serv ei o v alor af egit que s'of ereix als usuaris.

Per f er-ho petit i compacte, haurem de jugar una mica amb els estils i les mesures de la

taula. Més endav ant aprendrem a posar-ho tot dins d'una capa i situar-ho al lloc de la

pàgina amb precisió. Ho podem intentar ara amb l'ajut de Dreamweav er o a mà.

Exercici 2

El segon exercici es basa en les pràctiques 3 i 4. Aquí haurem de f er una aplicació - podem

prendre com a model l'àlbum de f otos o inv entar-ne un altre - que f aci una f eina en segon

pla i v agi mostrant el progrés amb una barra.

Podem utilitzar el tipus de barra que més ens agradi tot i que - cal recordar - els estàndards

tenen més acceptació. Tindrem el problema d'hav er de gestionar dos temporitzadors. Si ens

hi atrev im (no és dif ícil) podem usar-ne només un, f ent que la barra progressi en la mateixa

f unció que f a la f eina en segon pla. Aquesta és la millor opció.

Naturalment, haurem de comprov ar que tots dos exercicis f uncionin correctament en tots

dos nav egadors. De v egades (potser ja ho hem experimentat) això és el que costa més.

Finalment, hem d'integrar els exercicis dins l'estructura del nostre curs, al disc dur local i a

Internet, de f orma que s'hi pugui accedir des de la pàgina d'entrada.

Aquest curs també té projecte

En acabar el mòdul següent (mòdul 6) haurem de plantejar una proposta de projecte i, un

cop acceptada, desenv olupar-la.

Per això, abans de començar el mòdul, llegiu les Recomanacions per al projecte i f eu un

cop d'ull als títols dels mòduls següents o, f ins i tot, mireu una mica les pràctiques, per

poder tenir una v isió més acurada dels temes que encara no s'han tractat.




SGTI : Curs D108

Mòdul: 6

L'aspecte visual

Més v al una imatge que mil paraules. Tots ho hem sentit dir alguna v egada.

Aquesta és la f ilosof ia màxima de les pàgines web: multimèdia. La inf ormació ens arriba

per dif erents sentits i f a que sigui més agradable i entenedora per als usuaris.

L'aspecte v isual d'una pàgina representa l'esf orç del seu creador per

f acilitar la tramesa d'inf ormació cap a l'usuari. Hem de f er que

estigui còmode, i "v egi", més que llegeixi, la inf ormació que li

subministrem. Les imatges ens ajuden a f er que el missatge

s'entengui més ràpidament.

Però, hem d'anar en compte! No hem d'oblidar mai que el més

important de la pàgina és la inf ormació que transmet i no els "ef ectes

especials". Per tant, s'ha de tenir bon gust en l'elecció d'aquests ef ectes i pensar sempre

que són un complement de la inf ormació i mai l'objectiu de la pàgina.

En aquest mòdul analitzarem el tractament de les imatges i els altres elements que

introdueixen dinamisme a la pàgina web.

A la pràctica 1 v eurem com podem manipular les imatges des de Jav aScript, ef ectuar

substitucions i precàrregues.

A la pràctica 2 s'introduiran els estils aplicats a capes, v eurem com podem canv iar

propietats de les capes, f acilitant la disposició d'objectes dins l'àrea disponible a la pàgina

web i, a la v egada, manipular-los des de Jav aScript.

A la pràctica 3 es mostrarà com podem canv iar les propietats dels objectes situats sobre

la pàgina i f er animacions, mov iments iniciats automàticament o a petició de l'usuari que

serv iran per estructurar les dades sobre el document.

A la pràctica 4 crearem una de les aplicacions més preuades pels programadors Web: Els

menús, amb rollov er's, animats i situats en capes.

Veurem, també, que el treball amb els objectes del nav egador i les propietats CSS són la

principal f ont d'incompatibilitat amb els dif erents nav egadors. Si un ef ecte es considera

prou útil per a la majoria d'usuaris, no hem de meny sprear-lo, pel f et de no ser totalment

compatible.

El millor és detectar el nav egador, i si s'escau, of erir la inf ormació mitjançant un ef ecte

alternatiu per a cada nav egador, o com a mínim, mostrar un text inf ormatiu de la

incompatibilitat. El que hem d'ev itar sempre és deixar "penjat" l'usuari amb un error del

nav egador que desconcerta i f a pensar que la pàgina no està prou ben disseny ada.

En aquest mòdul:

Pràctica 1: Imatges i scripts

Pràctica 2: Estils per a capes

Pràctica 3: Animació

Pràctica 4: Menús i persianes

Exercic is: Efectes animats



SGTI : Curs D108


L'aspecte visual > Imatges i scripts

El nav egador crea un objecte image per a cada etiqueta <img ...>

que troba a la pàgina i els v a col·locant a l'Array document.images.Podem accedir a cada una a trav és d'aquest Array , utilitzant la f orma

d o c u m e n t . i m a g e s [ n u m ] . p r o p i e t a t

Per exemple, es poden mostrar les adreces de totes les imatges f entun bucle sobre aquest objecte

Jav aScript proporciona, a més, un mètode constructor, new Image(),que permet carregar imatges sense hav er d'escriure HTML. En totsdos casos, podrem consultar i, depenent del nav egador, modif icarles propietats de cada imatge. Les instàncies d'aquest objecte poden tenir un identif icador isón sensibles a uns ev ents. Són molts recursos, tot plegat.

Conceptes JavaSript en aquest capítol

Constructor new Image() : crea una instància de l'objecte imatge, buida.Propietat name : nom de la imatge, si en té.Propietat src : (ja v ista) adreça de l'arxiu. És l'única que permet modif icar Netscape 4.7.Propietat border : el" borde" de la imatge, si en té.Propietats width i height : amplada i altura, respectiv ament.Propietats hspace i vspace : espai buit a l'entorn de la imatge, horitzontal i v ertical.Propietat complete : (ja v ista) determina si una imatge ja està totalment carregada.

1.- Propietats de les imatges

Un cop s'ha carregat una imatge, des de Jav aScript o HTML, s'estableixen les sev espropietats. Ja n'hem v istes algunes en pràctiques anteriors, però ara les v eurem totes. Bé,totes no. D'una banda ens deixem "lowsrc", que carrega un arxiu alternatiu en baixaresolució i està obsoleta. De l'altra, Internet Explorer mostra (i permet modif icar) moltesmés propietats. Només cal que obrim una pàgina amb l'Inspector d'objectes i miremdocument.images[0].

Farem una pàgina amb un parell d'imatges, cadascuna dins d'un v incle. Les imatges han detenir un nom i el v incle cridarà una f unció Jav aScript amb aquest nom com a paràmetre:

<a href = "javascript:propImg( 'nom_de_la_imatge' )">

<img name="nom_de_la_imatge" src= . . .

La f unció propImg(), que f arem a la capçalera de la pàgina, rebrà el nom i crearà unav ariable local amb l'objecte: v ar nomImg = document[nom]

A continuació, declarem una v ariable "txt" que anirem omplint amb text i les propietats.Després de cada propietat escriv im '\n' per tal de f orçar un salt de línia dins del text de lav ariable. No posem la propietat "complete" perquè l'hem v ista a l'última pràctica del mòdulanterior i, en aquest cas, sempre és "true". Finalment, env iem una alerta amb el text creat.


function propImg( nom ) {

var nomImg = document[nom]

var txt = 'Nom: ' + nomImg.name + '\n'

txt += 'Arxiu: ' + nomImg.src + '\n'

txt += 'Mides: ' + nomImg.width + ' x ' + nomImg.height + '\n'

txt += 'Espai horitzontal: ' + nomImg.hspace + '\n'

txt += 'Espai vertical: ' + nomImg.vspace + '\n'

txt += 'Borde: ' + nomImg.border + '\n'

alert( txt )

}

</script>

</head>

<body ...>

<h2>Propietats de les imatges</h2>

<a href="javascript:propImg('Desert')">

<img name="Desert" src="images/foto1.jpg" hspace="2" border="0"></a>

<a href="javascript:propImg('Marroc')">

<img name="Marroc" src="images/foto2.jpg" vspace="1" border="2"></a>

...

2.- Precàrrega

No cal crear una instància en Jav aScript de les imatges que ja són a la pàgina, en HTML.De v egades, però, sí que l'haurem de crear si f em precàrrega. I, quan cal f er precàrrega?Doncs, en principi, quan hi hagi rollov ers o moltes imatges a la pàgina. Cal tenir en compteque, a més del propi "pes" de cada imatge, el nav egador ha d'establir una nov a connexió, iaixò pot f er perdre molt de temps. No es guany a massa si la pàgina té un parell d'imatgesgrans. En canv i, si n'hi ha moltes de petites, la precàrrega és un gran inv ent.

En qualsev ol cas, utilitzem el mètode constructor:

var foto1 = new Image( [amplada] , [altura] )

Els paràmetres amplada i altura són opcionals. Si no els utilitzem, el constructor els llegeixde la pròpia imatge i els guarda ... quan l'hagi carregada del tot. El constructor, podríem dir,només crea l'estructura, però, de moment, buida. Per omplir-la cal carregar la imatge:

foto1.src = "images/natura01.jpg"

És ev ident que aquest mètode resulta lent. Si tenim moltes imatges, el millor és usar unbucle que les v agi carregant. Si les imatges tenen el mateix patró i v an numerades, entindrem prou amb un Array . Si no és així, i la majoria de v egades no ho serà, ennecessitem dos. El primer contindrà les adreces (si més no, la part "dif erent") i el segon,els objectes.

// Mètode directe (utilitzant variables)<script language="javascript">

var foto1 = new Image()

foto1.src = 'images/foto1.jpg'

var foto2 = new Image()

foto2.src = 'images/foto2.jpg'

// ...

</script>

// Array i bucle, per a imatges indexades<script language="javascript">

var imatge = new Array()

for ( i=1; i<5; i++ ) {

imatge[i] = new Image()

imatge[i].src = 'images/foto' + i + '.jpg'

}

</script>

// Utilitzant dos Arrays i un bucle<script language="javascript">

var arxiu = new Array( 'primera', 'segona', 'tercera', 'quarta' )


for ( i=0; i<arxiu.lenght; i++ ) {


imatge[i].src = 'images/' + arxiu[i] + '.jpg'

}

</script>

3.- Intercanvi i rollovers

El que Dreamweav er anomena "imagen de sustitución" i la majoria "rollov er" no és més quecanv iar una imatge per una altra de la mateixa mida, com a resposta a un ev ent, en aquestcas, onMouseOv er i el seu company , onMouseOut.

Això es pot f er de div erses maneres i pot tenir altres usos. Per exemple, no és

imprescindible que hagi de canv iar la imatge que té el ratolí a sobre. Tampoc ho és quenomés es pugui canv iar una imatge, o que els ev ents hagin de ser, necessàriament,aquests.

Per què cal precarregar les imatges que hem de substituir dinàmicament? És v eritatque si assignem el nom de l'arxiu a la propietat .src a la pròpia def inició dels ev ents -onMouseOut i onMouseOv er -, l'inv ent f unciona, però cada cop que f em unasubstitució, la nov a imatge s'intenta tornar a carregar del serv idor. Amb la precàrrega,el nav egador sap que té les imatges i les carrega a l'instant.

Del que es tracta és d'escriure una f unció com a resposta a un ev ent. Si tenim les imatgesde la pàgina identif icades, les podrem manipular. Internet Explorer ens permet modif icargairebé totes les propietats, Netscape 4.7 només "src", és a dir, el nom de l'arxiu.

En aquest cas, f arem una f unció chgImg() que no només f aci l'intercanv i de la imatgeenf ocada, sinó que també haurà d'actualitzar una altra imatge. Comencem f ent unaprecàrrega de les 7 imatges: dos botons enrera, dos endav ant, les dues f otos que s'han demostrar quan el ratolí passa sobre els botons i la f oto per def ecte.

Cridarem la f unció des dels v incles, assignada als env ents onMouseOut i onMouseOv er:

<a href ="#" onMouseOut="chgImg('ant',0)" onMouseOv er="chgImg('ant',1)">

Passem com a paràmetres l'identif icador de la posició (el mateix que el "name" de laimatge) i el número que correspon a l'índex de l'Array que hem creat a la precàrrega. Laf unció els identif ica com a "id" i "n" i els utilitza per f er l'intercanv i, sempre ref erit a l'Array :

document[id].src = imatge[n].src

Aquí s'acaba l'ef ecte rollov er que af ecta els botons. Hem intercanv iat una imatge per unaaltra, de la mateixa mida, com a resposta al pas del ratolí. Si no necessitem res més, ja espot tancar la f unció. En aquest cas, però, v olem intercanv iar una altra imatge en f unció dequin sigui el botó sobre el qual ens hem situat, o no. Un condicional i un operador ternariens ho solucionen.

Hi ha dos estats quan s'analitza el residu de div idir "n" per 2: si és zero (imatges amb índexparell, no som sobre cap botó), assigna la f oto per def ecte, que té l'índex 6. Si no és zero,assigna la f oto 4 o 5, en f unció que "n" sigui menor de 2, és a dir, assigna la primera (4)quan som sobre el botó de l'esquerra i la segona (5) quan som sobre el de la dreta.



var arxiu = new Array( 'b_ant1', 'b_ant2', 'b_pos1', 'b_pos2', 'foto1', 'foto2', 'foto3' )

for ( var i=0; i<arxiu.length; i++ ) {


imatge[i].src = "images/" + arxiu[i] + ".jpg"

}

function chgImg( id, n ) {

document[id].src = imatge[n].src

if (n%2==0) document[ 'foto' ].src = imatge[6].src

else document[ 'foto' ].src = imatge[ ( (n<2) ? 4 : 5 ) ].src

}

</script>

</head>

<body ...>

<img name='foto' src='images/foto3.jpg'><br><br>

<a href="#" onMouseOut="chgImg('ant',0)" onMouseOver="chgImg('ant',1)">

<img name="ant" src="images/b_ant1.jpg" width="28" height="28" border="0"></a>

<a href="#" onMouseOut="chgImg('pos',2)" onMouseOver="chgImg('pos',3)">

<img name="pos" src="images/b_pos1.jpg" width="28" height="28" border="0"></a>

...

En aquest codi hem usat, intencionadament, f otos de div erses mides, i no les hemespecif icades enlloc. Amb els nav egadors que incorporen la v ersió 2 del DOM, quan es f al'intercanv i, tot balla. Si, en canv i, ho prov em amb Netscape 4.7, la pantalla es mantéestable, però les f otos es mostren def ormades.

Si no hi ha mesures assignades, l'explorador de Microsof t - que, recordem-ho, permetcanv iar mesures de f orma dinàmica - assigna les originals de la imatge. Nav igator 4.7

censidera les propietats width i height només de lectura, i no permet que els scripts lesmodif iquin. Cal tenir-ho molt en compte a l'hora de programar.

Si quan posem la f oto per def ecte <img name='f oto' src='images/f oto3.jpg'> especif iquemles mides, els nav egadors actuals es comportaràn com Netscape 4.7, i les imatges esv euran def ormades. En canv i, no hi ha manera d'aconseguir que Netscape 4.7 les mostriamb les sev es mides.

Quina és la solució? Doncs, en principi, utilitzant aquest mètode, no n'hi ha. Sempre queposem una imatge en una pàgina, Netscape 4.7 bloqueja les mesures i, si la v olem canv iarper una altra, o bé haurà de tenir les mateixes mides, o es v eurà def ormada.

Però, f eta la llei, f eta la trampa. Si s'han de tornar a escriure les instruccions per crearl'espai d'una imatge, doncs ho f em, dins d'una capa. Però aquesta és una altra història, quev eurem més detalladament als mòduls següents.


SGTI : Curs D108


L'aspecte visual > Estils per a capes

Les capes són un dels elements que permeten donar més dinamisme a les pàgines web. Elseu comportament està molt lligat amb les propietats CSS, per tant, és conv enient tenirclars aquests conceptes preliminars. La descripció bàsica sobre els estils CSS la podeutrobar a la pràctica 3 del mòdul 4.

Tant l'IE com el NN permeten treballar ambcapes, però, malauradament, ho f an de maneresdif erents. S'haurà de tenir en compte aquestaspecte per que les pàgines siguin compatibles.

En aquesta pràctica estudiarem quines són lespropietats per treballar amb les capes encadascun dels principals nav egadors iimplementarem unes f uncions que puguin f ercompatible el treball amb capes de f ormatransparent per l'usuari, independentment delnav egador emprat.

Elements CSS, HTML i Javascript en aquest capítol.

Directiv es <div> i <span> : Def ineixen una capa dins el bloc <body >.Directiv a <style> : Def ineix els estils a aplica a un document HTML.Objecte document.all : Objecte de IE.Objecte document.layers : Objecte de Netscape Nav igator v ersió 4.Objecte document.getElementById : Objecte de Netscape Nav igator v ersió 6.Propietats CSS per a la manipulació de capes.

1.- Propietats CSS per a capes.

Les capes són seccions de la pàgina web, amb contingut HTML, que poden tenir div ersespropietats com ara: posició, mida, colors, v isibilitat, etc.

Per def inir una capa, s'ha d'incloure tot el seu contingut dins les directiv es <div>.... <div>

o <span> ..... <span>. També existeixen les directiv es <lay er>, <ilay er>, però aquestessolament són reconegudes per NN, per tant no les utilitzarem.

Les capes es poden enniuar, és a dir, es pot crear una capa dins una altra. La sev autilització és la mateixa que a totes les capes, però, part de les sev es propietats les potheretar de la sev a capa mare.

Les propietats CSS aplicables a les capes són els següents:

position: Pot ser absolute o relative. La posició absoluta of ereix les dimensions des de la cantonada superior esquerra de la f inestra. La posició relativ a pren com a ref erència l'última posició seqüencial de l'objecte a la f inestra del nav egador.left: Distància des del lateral esquerre de la f inestra del nav egador f ins el lateral esquerrede la capa.top: Distància des de la part superior de la f inestra del nav egador f ins a la part superior dela capa.width: Indica l'amplada de la capa.height: Alçada de la capa.clip: Def ineix l'àrea rectangular v isible de la capa. S'indiquen els quatre costats de la següent f orma: clip: rect(dalt, dreta, baix, esquerra), també pot ser auto, on s'agaf a lazona per def ecte de la capa.visibility: Indica la v isibilitat de la capa. Els v alors són: visible, hidden, inherit. El v alor per def ecte és inherit, és a dir, hereta la v isibilitat de la capa mare. S'ha de tenir en compte que la f inestra del nav egador també és considerat com una capa.

z-index: Indica l'eix Z, és a dir, la posició Z de la capa. És un v alor numèric, les capesamb un z-index més gran que altres quedaran situades per sobre en el cas de superposició.background-color: Color de f ons de la capa. Amb NN4 aquesta propietat solament aplicael f ons al text. Per a tota la capa, en el NN4 s'ha d'usar la propietat explicada acontinuació.layer-background-color: Color de f ons de la capa per a NN4.background-image: Imatge de f ons. Amb el NN4 solament aplica la imatge al text que contingui la capa. Per a tota la capa, en el NN4 s'ha d'aplicar la propietat explicada a continuació.layer-background-image: Imatge de f ons de la capa per a NN4.overflow: Indica que s'ha de f er si el contingut de la capa no hi cap dins l'àrea def inida. Pot ser: scroll, hidden i auto. Amb scroll f em aparèixer una barra de desplaçament, amb hidden queda inaccessible la part no v isible i auto permet decidir al nav egador quan han d'aparèixer les barres de desplaçament. Aquesta propietat no és reconeguda per NN4.

Per def ecte, si no s'indica cap color de f ons, la capa quedarà transparent.

A les capes també s'hi poden aplicar les propietats CSS v istes a la pràctica 3 del mòdul 4.En aquesta pràctica no les utilitzarem per f acilitar la claredat dels exemples.

2.- Aplicació dels estils per capes.

L'exemple següent ens mostra com hem utilitzat algunes d'aquestes propietats. S'handef init tres capes: "capa1", "capa2" i "capa3". La sev a ubicació dins el bloc <body > s'ha f etamb l'ús de les directiv es <div > per la primera i tercera i <span> per a la segona. Acadascuna d'elles se li ha donat un identif icador. El contingut de cada capa és HTMLconv encional.

Per aplicar les propietats de les capes s'utilitza la directiv a <style> dins el bloc <head> iref erències amb identif icador per cada capa. També es podria hav er f et, utilitzant elparàmetre "sty le=..." dins la directiv a corresponent, però, ja que el nombre d'estils a aplicarés llarg, queda millor si es def ineix dins el bloc <head>.

Podem observ ar com per a cada capa se li assigna una posició absoluta, és a dir, lesref erències left i top preses des de la cantonada superior esquerra de la f inestra (origen decoordenades absolutes x=0 i y =0).

Amb les propietats CSS left i top es posiciona cada capa, les dimensions indicadescorresponen a la cantonada superior esquerra de la capa, comptades des de l'origen decoordenades. Amb width i height indiquem la mida de la capa. Si no s'indica es prendràcom a mida el mínim imprescindible per encabir el seu contingut, tal com passa a la"capa3".

Observ eu com s'utilitzen per def inir el color de f ons les propietats background-color i layer-

background-color amb el mateix color. Això és perquè la primera és interpretada per IE i lasegona per NN. La "capa 3" no té def init un color de f ons, això v ol dir que serà transparent.

El paràmetre z-index indica la posició en l'eix Z. La capa que tingui un v alor més alt essituarà per sobre de la que té un v alor més baix. La "capa1" i la "capa2" no estansobreposades, per tant no té cap importància el v alor de z-index. En canv i, la "capa1" i la"capa3" si que estan sobreposades, per tant és necessari que z-index de la "capa3" siguisuperior al z-index de la "capa1" per aconseguir que el text quedi per sobre de la imatge.

A la "capa1" hi ha la propietat overflow:auto, en aquest cas, com que el contingut de lacapa és més gran que l'espai disponible, apareix una barra de desplaçament v ertical. ElNN4 no reconeix aquesta propietat.

Prov eu de canv iar el v alor de visibility a hidden, o els v alors de z-index de les capes 1 i 3,o el v alor de position a relative, etc i observ eu els canv is que es produeixen.

Dins el bloc <head>:...<style type="text/css"> #capa1 {position: absolute; left:350px; top:30px; width:200px; height:200px;

visibility:visible; z-index:1;background-color:#B0B1EE; layer-background-color:#B0B1EE;overflow:auto} #capa2 {position: absolute; left:50px; top:30px; width:286px; height:402px; visibility:visible; z-index:1;background-color:#FFC0FF; layer-background-color:#FFC0FF} #capa3 {position: absolute; left:250px; top:330px; visibility:visible; z-index:2}</style>...

Dins el bloc <body>:...<div id="capa1"> <u>Capa 1.</u> Descripció.<br>El <b>Parc Nac...</div>...<div id="capa3"> <font color="#ff0000" size="38">Aigüestortes</font></div>...<span ID="capa2"> <u>Capa 2.</u> Aigüestortes.<br> <img src="imatge.jpg"></span>...

3.- Capes interactives

Les propietats de les capes assignades en temps de disseny també poden ser modif icadesen temps de v isualització, és a dir, mentre es v isualitza la pàgina. Jav aScript ens serv iràper modif icar aquestes propietats en temps de v isualització.

Ara bé, l'accés a les propietats de les capes no es f a de la mateixa manera segons sigui unnav egador IE o NN. A més, el NN tampoc ho f a de la mateixa manera entre el NN4 i elNN6.Per tant és necessari detectar si el nav egador és NN4, NN6 o IE.

En la pràctica anterior ja s'ha explicat com es detecta el nav egador. En aquest exempleassignarem tres v ariables al v alor true en cas que s'hagi detectat el corresponentnav egador. La detecció es f a comprov ant si existeixen els objectes "document.lay ers","document.all" i "document.getElementBy Id" propis per a cada tipus de nav egador.

- ns4 v aldrà true si és NN v ersió 4, en cas contrari v aldrà false. v ar ns4=document.lay ers;- ie v aldrà true si és IE, en cas contrari v aldrà false. v ar ie=document.all;- ns6 v aldrà true si és NN v ersió 6 o és IE, en cas contrari v aldrà false. v ar ns6=document.getElementBy Id;

L'accés a les propietats es f a de f orma dif erent segons el nav egador.

- Per a Netscape Nav igator v ersió 4 utilitzem: document.lay ers.NomCapa.propietat = v alor

- Per a Netscape Nav igator v ersió 6 utilitzem: document.getElementBy Id( ' NomCapa ' ).sty le.propietat = v alor

- Per a Internet Explorer utilitzem: document.all["NomCapa"].sty le.propietat = v alor ó document.all.NomCapa.sty le.propietat =v alor (es pot obv iar el text "document.all")

El codi del següent d'exemple s'ha d'af egir al de l'exemple anterior. Fent clic a sobre delsbotons, podrem commutar entre capes per mostrar la imatge, el text descriptiu del ParcNacional d'Aigüestortes, o bé, el seu plànol d'accés.

S'hi han af egit dues capes més:

La capa "planol" conté la imatge del plànol d'accés i un botó per commutar les capes dedescripció i d'imatge del parc. Si observ em les propietats d'aquesta capa en la sev a

def inició dins la directiv a <sty le> del bloc <head> podem v eure que per def ecte estàoculta, ja que la sev a propietat visibility v al hidden.

La capa "botoactplanol" solament conté un botó que ha de serv ir per f er la commutacióde capes. La sev a ubicació dins de la capa ens és útil per posicionar-lo f àcilment dins lapàgina i ocultar-lo quan s'estigui mostrant el plànol.

Cada botó activ a una f unció Jav aScript que realitza l'acció esperada: f er la commutació decapes.

El codi Jav aScript conté la detecció del tipus de nav egador que s'assigna a ns4, ie i ns6.També conté 4 f uncions capaON(), capaOFF(), v eure() i ocultar().

La f unció capaON() s'encarrega de posar a visible la propietat visibility de la capa que se liposa com a paràmetre. Observ eu com amb tres "if " es permet accedir a l'acciócorresponent segons sigui el nav egador. Mitjançant el "ev al()" corresponent, es construeixla cadena de codi segons s'ha indicat prèv iament i s'executa per modif icar la propietatvisibility. La f unció capaOFF() f a el mateix, però, posant el v alor de visibility a hidden.

La f unció veure() s'encarrega de cridar les f uncions "capaON()" i "capaOFF()" segons si lacapa s'ha de f er v isible o no, per mostrar el plànol. El mateix f a la f unció ocultar() perocultar la capa del plànol i mostrar les capes: descripció, imatge i nom del parc.

Af egiu el codi següent al codi descrit en l'exemple anterior i podreu comprov ar el seuf uncionament amb tots tres nav egadors.

Afegir al bloc <head> dins de la directiva <style>:

#planol {position: absolute; left:120px; top:60px; width:396px; height:299px; visibility:hidden; z-index:1}#botoactplanol {position: absolute; left:500px; top:410px; visibility:visible; z-index:1}

Afegir el següent codi JavaScript dins el bloc <head>:

<script language="Javascript"> var ns4=document.layers; var ie=document.all; var ns6=document.getElementById;

function capaON(pNomCapa) { if (ns4) eval("document.layers." + pNomCapa + ".visibility = 'visible' "); if (ie) eval("document.all." + pNomCapa + ".style.visibility = 'visible' "); if (ns6 && !ie) eval("document.getElementById(' " + pNomCapa + " ').style. visibility = 'visible' "); } function capaOFF(pNomCapa) { if (ns4) eval("document.layers." + pNomCapa + ".visibility = 'hidden'"); if (ie) eval("document.all." + pNomCapa + ".style.visibility = 'hidden'"); if (ns6 && !ie) eval("document.getElementById(' " + pNomCapa + " ').style. visibility = 'hidden' "); } function veure() { capaOFF("capa1"); capaOFF("capa2"); capaOFF("capa3"); capaOFF("botoactplanol"); capaON("planol"); } function ocultar() { capaON("capa1"); capaON("capa2"); capaON("capa3"); capaON("botoactplanol"); capaOFF("planol"); }</script>

Afegir dins el bloc <body>:

...<div id="planol"> <center><img src="planol.jpg"> <form> <input type="button" value="Ocultar plànol" onClick="ocultar();"> </form></center></div>...<div id="botoactplanol"> <form> <input type="button" value="Veure plànol" onClick="veure();"> </form></div>...


SGTI : Curs D108


L'aspecte visual > Animació

L'animació dels objectes que es v isualitzen en la pàgina web és un dels ef ectes mésapreciats pels disseny adors web. Existeixen moltes f ormes de donar dinamisme a lapàgina, utilitzen applets, gif s animats, presentacions Flash, etc. Tots aquests elementsindicats són externs al nav egador i generalment es carreguen com a plug-in's.

En aquest apartat crearem animació, però, senseutilitzar cap element extern. Únicament utilitzaremels recursos que ens proporciona el mateixnav egador, és a dir, manipularem les propietats delsobjectes en temps de v isualització.

Les propietats dels objectes són f àcilmentajustables en temps de disseny , però, permodif icar-los en temps de v isualitzaciónecessitarem l'ajut de Jav aScript.

En aquesta pràctica es presenten dues animacions, una sobre objectes imatge i l'altrasobre capes, però, existeixen moltes més animacions que es podem implementar, l'úniclímit està en els recursos que ens subministra el nav egador i l'habilitat i imaginació delprogramador.

Ara bé, el problema més greu serà la compatibilitat entre els dif erents nav egadors, hi hauràcoses que no es podran f er en alguns nav egadors i coses que es podran f er en tots peròde f orma dif erent. Haurem de saber en quin nav egador es v isualitza i si l'ef ecte no éscompatible haurem de mostrar algun altre contingut alternatiu.

Elements del llenguatge en aquest capítol

Mètode eval() : Av alua el contingut d'una cadena de text.Propietat height : Conté l'altura d'un objecte.Propietat width : Conté l'ample d'un objecte.Propietats left i top : Permeten assignar la posició horitzontal i v ertical d'un objectePropietat offsetLeft i offsetTop: Conté la posició horitzontal i v ertical d'un objecte (NS6, IE)Propietat clientWidht i clientHeight : Conté l'ample i l'alt de la f inestra (IE)Propietat innerWidth i innerHeight : Conté l'ample i l'alt de la f inestra (NS)Propietat src : Assignació del f itxer imatge a un objecte Imatge.Propietat visibility : Indica si l'objecte serà v isible o no.Mètode Math.round() : Arrodoneix al sencer més proper un v alor numèric.Mètode Math.random() : retorna un v alor numèric aleatori entre 0 i 1.Propietat zIndex : Indica la coordenada Z d'un objecte (enter).Operador ? : : Operador condicional ternari.Directiv a <style> : Permet def inir els estils CSS.Objecte document.layers : Objecte de Netscape 4.Objecte document.all : Objecte d'Internet Explorer.Objecte document.getElementById : Objecte de Netscape 6.Mètode document.captureEvents() : Mètode per def inir la captura d'ev ents (NN)Objecte window.event : Objecte que conté inf ormació sobre l'últim ev ent (IE)Ev ents onmouseup i onmousemove

Propietats pageX, pageY : retornen la posició del ratolí (a NS)Propietats clientX, clientY : retornen la posició del ratolí (a IE)

1.- Commutació d'imatges.

Aquest exemple f a un intercanv i d'imatges f usionant-les entre si. Tot l'ef ecte consisteix enmanipular amb Jav aScript les propietats de dos objectes "Image". Les propietats que esmanipulen en temps de v isualització són l'alçada (height), l'amplada (width) i la sev acoordenada Z (z-index).

Les dues imatges estan situades en el mateix espai f ísic. Mentre una imatge v aaugmentant la mida, l'altra la v a disminuint. Al mateix temps, v an alternant la sev a

coordenada Z per ev itar que una d'elles quedi def initiv ament amagada a sota.

Aquest ef ecte no f unciona amb NN4. Per tant, si detectem que utilitzem aquest nav egadormostrarem un contingut alternatiu. Aquest contingut ha d'ésser una alternativ a, per tant, sies considera conv enient, es pot substituir per alguna altra imatge estàtica.

Tot i que pot f uncionar amb els nav egadors IE i NN6, la f orma d'implementar-lo és dif erent.Ajustar aquesta incompatibilitat és el més complicat del codi.

Dins el codi, a les línies 7-9, detectem el tipus de nav egador i dins el bloc <body > creem lapàgina d'una f orma o una altra segons sigui el nav egador (el codi dins el bloc <body > potanar conjuntament a un altre codi HTML conv encional). Les línies 41-51 creen el contingut,si el nav egador és NN4, solament s'escriu un text alternatiu d'av ís (línia 42), aquest text espot substituir per algun altre contingut alternatiu.

Les línies 43 a 50 creen el contingut en cas que sigui un nav egador NN6 o IE. Aquestcontingut consisteix en def inir dues imatges amb identif icadors img1 i img2 i una capa queconté el botó de commutació. Observ eu com les línies 43-50 són la continuació de lacadena iniciada dins de "document.write", per clarif icar-ho, s'ha posat la cadena en líniesdif erents, però, per indicar a l'intèrpret Jav ascript que la cadena continua a la línia següent,s'af egeix el símbol " \ "en el lloc d'on es parteix.

Les línies 2,3 i 4 def ineixen les propietats CSS per a les dues imatges i la capa. La capabotocambia no té cap utilitat en l' ef ecte del programa, solament s'utilitza per f acilitar elposicionament del botó de commutació.

L'accés a les propietats dels objectes es f a de f orma dif erent amb NN6 i IE. Per exemple: - Per llegir el v alor de la propietat height, width o zIndex d'un objecte Image es f a així: Per a IE: document.all.ObjecteImage.propietat Per a NS6: document.ObjecteImage.propietat

- Per assignar un v alor a les propietats height, width o zIndex de l'objecte Image es f a així: Per a IE: document.all.ObjecteImage.sty le.propietat = ... Per a NS6: document.getElementBy Id('ObjecteImage').sty le.propietat = ...

Com es pot v eure són f ormes totalment dif erents de llegir o assignar v alors segons sigui elnav egador, ja que la manera de ref erenciar l'objecte és molt dif erent. La f unció refObj() ésl'encarregada de f acilitar aquestes incompatibilitats. Si la inv oquem, ens retorna unacadena per ref erenciar l'objecte adequadament, segons quin sigui el nav egador emprat isegons si v olem llegir un paràmetre o el v olem modif icar (en aquest últim cas hem depassar-li el nom de l'objecte).

La creació de la modif icació d'una propietat es f a conjuntament entre la inv ocació derefObj(), que retorna una cadena, i la concatenació de la resta de paràmetres per f ormar lacadena. Un cop creada tota la cadena, amb l'ajut de la f unció eval(), s'executa el seucontingut. Tal com es pot v eure a les línies 17-21, 25-31 i 34-35

La f unció cambia() és l'encarregada de f er la manipulació de les propietats, ajudada per laf unció refObj() per crear les ref erències dels objectes. Es pren com a ref erència lesdimensions en píxels de les dues imatges, en aquest exemple: img1 és 343x343 i img2 és227x343 (les dues imatges poden ser de la mateixa mida o dif erent). Fixeu-v os com a lalínia 3, s'ha indicat per a la imatge 2 un ample i un alt inicial de 0px, és a dir, inicialment laimatge 2 no existeix.

La v ariable booleana sentit representa quina és la imatge que ha de créixer i decréixer encada moment, inicialment v al true, això v ol dir que la imatge 1 haurà de decréixer i la 2créixer, un cop f eta la transició, s'inv erteix el v alor d'aquesta v ariable a la línia 22.

Prenent com a ref erència la imatge 1, considerem sentit descendent quan aquesta decreix(sentit=true) i ascendent quan aquesta augmenta (sentit=false) i f arem que aquestamodif iqui la sev a mida en passos de 5 píxels.

La condició de la línia 17 diu : quan imatge 1 decreixi, si la sev a alçada és inf erior a 5píxels o bé quan imatge 2 decreixi i la sev a alçada sigui inf erior a 5 píxels s'acaba latransició i s'assignen els v alors f inals a totes dues imatges segons sigui el v alor de sentit(línies 18-21).

En cas contrari, (línies 25-28) segons sigui el v alor de sentit, s'incrementarà o decreixerà el

v alor d'alçada i amplada de la imatge 1 i 2 amb 5 píxels (excepte l'ample d'imatge 2, que esf arà en 3 píxels, ja que proporcionalment l'ample d'imatge 2 és inf erior al d'imatge 1).També es f arà, a cada pas, un intercanv i de la propietat z-index per ev itar que una imatgequedi def initiv ament oculta per l'altra (línies 29-36). També es programa un temporitzador(línia 37) per repetir el mateix procés inv ocant la f unció "cambia()", al cap de 10 ms.,mentre la imatge que decreix no v algui una alçada inf erior a 5 píxels.

El codi a implementar és el següent:

Dins el bloc <head>:

1 <style type="text/css">2 #img1 {position: absolute; left:10px; top:30px; width:343px; height:343px; visibility:visible; z-index:1;}3 #img2 {position: absolute; left:10px; top:30px; width:0px; height:0px; visibility:visible; z-index:2;}4 #botocambia {position: absolute; left:218px; top:380px; visibility:visible; z-index:1}5 </style>

6 <script language="JavaScript">7 var ns4=document.layers;8 var ie=document.all;9 var ns6=document.getElementById;10 var sentit=true;11 function refObj(obj) {12 if (ie) return (obj!=null)?("document.all." + obj) : ("document.all");13 if (ns6) return (obj!=null)?("document.getElementById(' " + obj + " ')") : ("document");14 }15 function cambia()16 {17 if ( (sentit && eval(refObj() + '.img1.height<5')) || (!sentit && eval(refObj() + '.img2.height<5')) ) {18 eval(refObj('img1') + '.style.width = (sentit)?0:343');19 eval(refObj('img1') + '.style.height= (sentit)?0:343');20 eval(refObj('img2') + '.style.width = (sentit)?227:0');21 eval(refObj('img2') + '.style.height= (sentit)?343:0');22 sentit=!sentit;23 }24 else {25 eval(refObj('img1') + '.style.width = (sentit)?(' + refObj() + '.img1.width - 5):(' + refObj() + '.img1.width + 5)');26 eval(refObj('img1') + '.style.height= (sentit)?(' + refObj() + '.img1.height - 5): (' + refObj() + '.img1.height + 5)');27 eval(refObj('img2') + '.style.width = (sentit)?(' + refObj() + '.img2.width + 3):(' + refObj() + '.img2.width - 3)');28 eval(refObj('img2') + '.style.height= (sentit)?(' + refObj() + '.img2.height + 5):(' + refObj() + '.img2.height - 5)');29 if(eval(refObj('img1') + '.style.zIndex==1')) {30 eval(refObj('img1') + '.style.zIndex=2');31 eval(refObj('img2') + '.style.zIndex=1');32 }33 else {34 eval(refObj('img1') + '.style.zIndex=1');35 eval(refObj('img2') + '.style.zIndex=2');36 }37 setTimeout("cambia();", 10);38 }39 }40 </script>

Dins el bloc <body>: ...41 <script language="JavaScript">42 if (ns4) document.write("Ep! Aquest efecte no esta adaptat per funcionar amb NN4");43 else document.write("\44 <img id='img1' src='stmaurici.jpg'>\45 <img id='img2' src='aigtortes.jpg'>\46 <div id='botocambia'>\47 <form>\48 <input type='button' value='Cambia imatge' onClick='cambia();'>\49 </form>\

50 </div>");51 </script> ...

2.- Capes animades.

En aquest apartat v eurem com podem manipular els paràmetres de les capes en temps dev isualització, aconseguint ef ectes d'animació.

El codi de l'exemple és molt extens (242 línies), per aquest motiu no s'ha inclòs en aquestapàgina, per v eure el codi, heu de v isualitzar la f inestra de l'exemple i f ent clic amb el botódret del ratolí sobre la f inestra, seleccioneu la "Visualització del Codi Font".

Tot i ser un exemple extens, es pot considerar com si f ossin quatre exemples dif erentsd'animació de capes. Els blocs de codi queden clarament dif erenciats ja que f an ref erènciaa una única capa de les quatre de mostra.

Capa1.- Desplaçament lateral des de l'esquerra a petició de l'usuari.Capa2.- Capa que simula el comportament d'una f inestra de Windows. Inclou una capaenniuada de nom capa2a.Capa3.- Capa superior que conté el títol, la sev a animació s'inicia automàticament encarregar la f inestra i es desplaça progressiv ament des de l'esquerra f ins al centre.Capa4.- Capa que conté una icona (smiley ) que es mou constantment per sobre de lapantalla rebotant aleatòriament en els marges. L'animació s'inicia quan la capa3 s'haposicionat en el centre de la f inestra.

Podem aïllar cadascun dels 4 exemples copiant les línies de codi indicades a continuació enuna pàgina web a part. En la nov a ubicació s'ha de respectar que també estiguin situadesdins els corresponents blocs <sty le> i <script> de <head> i <body >.

- Comú a tots els exemples: 14-16. - Capa1: línia 7, línies 17-41 i línies 195-212. - Capa2: línies 8-9, línies 42-112 i línies 213-234. - Capa3: línia 10, línies 113-124 i línies 235-237. - Capa4: línia 11, línies 125-191 i línies 238-240.

El codi indicat dins el bloc <body > i la def inició d'estils dins la directiv a <sty le> del bloc<head> apliquen els objectes HTML i els v alors de les propietats que es v euen, perdef ecte, en carregar-se la pàgina. En canv i, el codi, dins la directiv a <script> aplica lamanipulació de les propietats dels objectes HTML en temps de v isualització, de manera queobtenim l'animació desitjada.

No es comentaran les dif erents f ormes d'assignar o llegir v alors de les propietats delsobjectes ja que tal com està f et el codi es pot interpretar molt f àcilment quina és la f ormapròpia de cada nav egador. Només cal distingir les línies començades amb if (ie) .... , if(ns4) .... i if (ns6) ... que serv eixen per discriminar el codi propi per a cada nav egador iinterpretar la f orma en la qual es llegeix i s'assigna cada propietat.

Part comuna:

La part comuna a tot el codi són les línies 14-16, la sev a f unció és detectar el tipus denav egador IE, NN4 o NN6 amb què es v isualitza la pàgina. Per això es testeja l'existènciadels objectes document.all, document.layers i document.getElementById propis de cadascundels nav egadors indicats, respectiv ament. La v ariable ie, ns4 o ns6 v aldrà true en el casque sigui el nav egador corresponent.

La detecció del nav egador és necessària perquè l'accés a les propietats de les capes itractament d'ev ents són dif erents per cada cas. Dins el codi propi de cada capa trobaremcondicionals que testegen aquestes v ariables i apliquen la manipulació de la propietatcorresponent amb el f ormat apropiat, en cas contrari obtindríem errors.

Aquesta f orma de dif erenciar la manipulació de les propietats no és l'habitual enprogramació Jav aScript, en aquest exemple s'ha pref erit f er-ho així per f acilitar la llegibilitatdel codi.

La f orma habitual consisteix en la utilització d'una f unció, a la qual, passant-li elsparàmetres corresponents retorni el codi apropiat segons el tipus de nav egador.Posteriorment s'av alua aquest codi amb la f unció eval(). A l'apartat anterior (exemple de

commutació d'imatges), en tenir un codi meny s complex ja s'ha f et d'aquesta f ormautilitzant la f unció refObj().

Si v oleu aïllar el codi corresponent a un sol tipus de nav egador, només cal eliminar elsblocs de codi que comencen amb if (tipusNavegador) ... , on tipusNavegador nocorrespongui amb el que v oleu aïllar. La resta de codi és comuna a tots els nav egadors.

Capa1:

La capa1 està parcialment oculta en carregar-se la pàgina. Observ eucom a la línia 7 s'ha indicat una propietat left de -124px. Per aquestmotiu queda oculta a l'esquerra. Solament es v eu una imatge en f ormade botó. La capa conté una taula per f acilitar el posicionament del text ila imatge.

La imatge "barra.gif " està dins un link nul (línies 206-208) que detectal'ev ent onClick. Aquest ev ent inv oca a la f unció obreTancaCapa1(). Observ ant el codipropi d'aquesta f unció (línies 17-41) tenim que inicialment s'ha declarat i assignat unav ariable global i externa a la f unció de nom estat amb el v alor false.

La v ariable estat indica si la capa esta oberta (true) o tancada (false). Quan s'inv oca laf unció obreTancaCapa1(), el primer que es f a és determinar el v alor de la propietat left dela capa segons sigui el tipus de nav egador (línies 20-22) i s'assigna a espaiEsq.Posteriorment es mira el v alor d'estat (línia 23), si v al false s'inicia l'apertura de la capa1(línies 33-39), si v al true s'inicia el tancament de la capa1 (línies 24-30).

L'obertura i tancament es f a en passos de 5 px, que s'af egeixen o resten (línies 25-27 i34-36) a la propietat left de la capa. A cada increment o disminució ef ectuat s'activ a untemporitzador que tornarà a repetir el mateix procés (línies 28 i 37) f ins que ja no escompleixin les condicions (espaiEsq > -124 i espaiEsq < 0, línies 24 i 33). En aquestmoment es considera que la capa ja està totalment oberta o tancada, solament quedacanv iar el v alor d'estat (línies 30 i 39) i ja s'atura tot el procés f ins que l'usuari desitgi tornara obrir o tancar.

Capa3:

Aquesta és la capa que conté el títolsuperior. El f uncionament de la capa3 és

molt similar al de la capa 1, encara que més senzill, perquè només es desplaça en unsentit. A la línia 10 tenim la def inició d'estils d'aquesta capa, també podem v eure com lapropietat left està a -400 px, és a dir, totalment amagada a l'esquerra.

Al carregar la pàgina, s'activ a automàticament l'ev ent onLoad (línia 194) que inv oca laf unció mouCapa3(). Aquesta f unció (línies 113-124) s'encarrega de desplaçar la capad'esquerra a dreta igual com ho f a la Capa1 quan s'obre.

El desplaçament es f a en unitats de 5px. Cada 100 ms. es torna a inv ocar la f unció (línia121) i f a un pas més de 5 px, sumant-los a la v ariable capa3PosX que posteriorments'assigna a la propietat left de la capa (línies 117-120).

Quan s'arriba a la posició f inal (capa3PosX < 10, línia 116) f inalitza el posicionamentd'aquesta capa i s'inicia l'animació de la Capa4 en inv ocar-la des de la línia 123. Si no esdesitja que s'iniciï l'animació de la Capa 4 solament f a f alta eliminar aquesta línia.

Capa4:

Aquesta capa és la que correspon a l' "smiley " que està rebotant aleatòriament per laf inestra.La capa està def inida a les línies 238-240. El seu contingut és una imatge de 16x16 px. Laimatge f orma part d'un link nul. Si f eu clic a sobre de la imatge (si ho podeu aconseguir ;-)), s'atura el mov iment, ja que s'executa un clearTimeout() sobre la v ariable sTO que contél'identif icador del temporitzador d'aquesta capa.

L'estat inicial de la capa es def ineix a la línia 11, observ eu com té una coordenada Zsuperior a les altres capes per f er que sempre v agi per sobre d'elles i la sev a v isibilitat

inicial és oculta.

Quan f inalitza el posicionament de la Capa3, s'inv oca a la f unció mouCapa4() (línia 123).La f unció mouCapa4() (línies 125-191), s'encarrega de moure aleatòriament la capa4 i el seucontingut. El seu mov iment són desplaçaments en línia recta f ins a trobar un costat de laf inestra on rebota. Cada cop que rebota, canv ia aleatòriament la sev a trajectòria iv elocitat.

El primer que f a la f unció mouCapa4() és determinar la mida de la superf ície disponible enel cos del document (línies 129-136) i ho assigna a les v ariables ampleBody i altBody. Enel cas que el mida de la f inestra sigui més gran que el de l'objecte que conté la capa(16x16, línia 137) es determina un v alor inicial aleatori capa4PosX i capa4PosY i es f a lacapa v isible (línies 140-156).

Posteriorment, es determina un v alor d'increment X i Y aleatori entre 1 i 11, i un signed'aquest increment igual a -1 o 1 aleatori (línies 157-160). Finalment es posa la v ariableposCapa4 a false (línia 161) perquè no es torni a ef ectuar aquest procés i s'activ a untemporitzador per tornar a inv ocar la f unció al cap de 50 ms. (línia 189).

Al tornar-se a executar la f unció mouCapa4() (per la f inalització del temporitzador), es tornaa v erif icar la mida de la f inestra i es v a directament a la línia 164 on es comprov a que lacapa estigui dins l'àrea de la f inestra (línia 164).

Si s'està dins la f inestra, es v erif ica si l'increment de coordenades portarà la capa f ora dela f inestra, si és així, es calcula de nou, aleatòriament els v alors de l'increment i el signe dedesplaçament (línies 165-172). Un cop es té un v alor que no ens porti f ora de la f inestra,s'incrementa a capa4PosX i capa4PosY i posteriorment s'assigna a les propietats left i top

de la capa4 (línies 173-186).

Globalmentl, l'ef ecte mostra una capa que es mou de f orma rectilínia dins la f inestra, ambuns increments i signe de X i Y constants (v elocitat i angle constants), però que quan arribaal límit de la f inestra, es tornen a calcular aleatòriament els increments i signe de X i Y,canv iant la v elocitat i l'angle aleatòriament respecte a la trajectòria anterior.

Capa2:

La capa 2 és la més complexa de totes. Per aquest motiu s'hadeixat pel f inal. De f et està f ormada per dues capes la capa2 ila capa2a. Aquesta animació no és compatible amb Netscape4, per tant, si detectem aquest nav egador s'haurà de mostrarun contingut alternatiu.

En aquesta capa és necessari capturar els ev entsonmousemove i onmouseup, encara no s'ha explicat res

sobre la captura d'ev ents, per tant, no s'explicarà amb detall. En la pràctica 1 del mòdul 7s'explica com es capturen els ev ents. Quan hagueu f et aquesta pràctica, podeu tornar aaquest apartat i analitzar amb més detall com es f a aquesta capa.

La def inició de les propietats d'aquestes dues capes es f a a les línies 8 i 9, observ eu comla capa2a té un posicionament relatiu. Com que està situada dins la capa 2 les sev esref erències top i left tindran com origen de coordenades les de la capa 2. La v isibilitat de lacapa2a s'hereta de la capa2 i si el seu contingut és extens apareixeran les barres dedesplaçament (overflow:auto).

Aquestes dues capes es posicionen dins el bloc <body > a les línies 213-234. Observ eucom la sev a inclusió es f a a partir de codi Jav aScript. És necessari detectar el nav egador,ja que si es tracta de NN4 no podem crear la capa2a perquè es v euria malament (línia 219).Per als altres dos nav egadors IE i NN6, es crea el contingut de la capa a les línies 221-231.

La v ariable de text txt, conté tot el contingut de la capa2 i la capa2a. Inicialments'introdueixen tres imatges corresponents a la capçalera de la capa, són la barra de títol, elbotó de minimitzar i el botó de tancar (línies 221-223). Posteriorment es crea la capa2a i elseu contingut (línies 224-230).

Les tres imatges de la capçalera responen a ev ents introduïts amb el ratolí. Quan es f a clic

a sobre de la imatge (capa2_3.jpg) s'inv oca l'ev ent onClick i es canv ia la propietat de

v isibilitat de la capa2 a oculta (línia 223). Si es f a clic a la imatge (capa2_2.jpg),

s'inv oca la f unció minMaxCapa2() (línia 222), observ eu que aquesta imatge té un

identif icador : id="imgMinMax", aquest identif icador serv irà per poder canv iar la imatge a (capa2_4.jpg) a les línies 49 i 54, quan la capa2 sigui minimitzada. Les línies 62 i 67 f anl'ef ecte contrari.

La imatge (capa2_1.jpg) introduïda a la línia 221, tambérespon a un ev ent, en aquest cas l'ev ent onMouseDown. Aquest ev ent inv oca la f unciómouCapa2(), que s'encarrega de capturar els ev ents onmousemove i onmouseup i permetendesplaçar la capa per sobre de la f inestra.

La f unció minMaxCapa2() (línies 42-71) minimitza o maximitza la capa2. Per això utilitza lav ariable global minMax per saber si està oberta o tancada. Per tancar la capa, posa a 0pxl'alçada de la capa2a i a 23px/19px l'alçada de la capa2, segons sigui per a IE o NN6.També canv ia la imatge amb identif icador imgMinMax per mostrar l'altre símbol alternatiu(línies 46-54).

En cas contrari, si s'ha d'obrir la capa, f a el mateix procés, però a la inv ersa (línies 59-67).Per acabar cadascun dels dos processos (obertura o tancament de la capa) es canv ia elv alor de la v ariable minMax (línies 56-69).

La f unció mouCapa2() és la responsable de f acilitar el desplaçament. Com ja s'ha ditmanipula la captura dels ev ents onmousemove i onmouseup. A la pràctica 1 del mòdul 7trobareu més inf ormació sobre aquests conceptes.

La incompatibilitat amb el Netscape 4 bé determinada per la utilització de la capa2a

enniuada dins la capa2. Aquest f et, més la propietat overflow assignada a la capa2, f a quesigui incompatible amb el NN4. Si aquest mateix exemple no contingues la capa2a podriaf uncionar perf ectament amb el NN4 ja que el sistema de captura d'ev ents és el mateix ques'ha aplicat pel cas del NN6.

Per veure el codi d'aquest exemple, s'ha de visualitzar la finestra de mostra i fer clic a sobrede la finestra amb el botó dret del ratolí. Al menú contextual que apareix, heu de seleccionarl'opció de "Visualització del codi font".


SGTI : Curs D108


L'aspecte visual > Menús i persianes

Els menús, de tots tipus, mides i colors, són una part de la interf ície delsprogrames que ens resulta molt f amiliar. Això f a que siguin un recurs oportúper a les pàgines web, on l'usuari entra per primer cop sense saber què estrobarà. Si li of erim solucions que reconegui a primera v ista, la v isita liresultarà més ef ectiv a i gratif icant.

S'anomenen "persianes" les capes en mov iment que aparèixen, generalment,en sentit v ertical. Poden contenir qualsev ol element, també un menú. Lasev a utilitat es f onamenta en un millor aprof itament de l'espai. També en la possibilitat demantenir una inf ormació amagada i mostrar-la només quan es necessita. Finalment, tenenuna f unció estètica i donen imatge de dinamisme.


Mètode split() : crea un Array a partir d'una cadena, partint-la pel caràcter especif icat.Propietat innerHTML : assigna el contingut d'una capa de f orma dinàmica. NomésiExplorer

1.- Menú amb rollover

Volem f er un menú on cada línia comenci per una imatge que es substitueixi per una altraquan passa el ratolí. Això ho v am v eure a la pràctica "Imatges i scripts". Ara, però, hov olem automatitzar amb una mica de Jav aScript.

De f et, és el mateix menú que v am f er a l'exercici del mòdul 2, i el podem prendre com abase. Com aleshores, comencem f ent un Array que tractarem com a parells adreça - títol.Fins aquí és el mateix. Les dif erències comencen al bucle.

A cada v olta, def inim els ev ents onMouseOver i onMouseOut de manera que canv iïn lapropietat .src d'una imatge. Quina? Doncs, muntem un nom, per exemple, a base d'unalletra i l'índex actual del bucle. És clar que també podem f er precàrrega i utilitzar una f unciód'intercanv i, com hem v ist a la pràctica 1. Això ho deixem a l'elecció de cadascú.

Ja que hi som, també redef inim l'ev ent onClick perquè ens tregui el marquet de punts delv incle. Després posem la imatge per def ecte, amb el seu nom (tal com hem f et abans),l'adreça i les mesures. Finalment, escriv im el v incle i tanquem la f ila.

<script language="javascript">var menu = new Array("m1/index.htm", "Programar la web","m2/index.htm", "Estructures JavaScript","m3/index.htm", "L'usuari en acció","m4/index.htm", "Atenció a la diversitat","m5/index.htm", "El temps al meu costat","m6/index.htm", "L'aspecte visual","m7/index.htm", "Interacció i comunicació","m8/index.htm", "Calaix desastre");var i, url, nomfor ( i=0; i<menu.length; i+=2 ) { url = menu[i] nom = menu[i+1] with( document ) { writeln( '<tr><td class="menu"><a href="' + url + '"') writeln( 'onMouseOver="m' + i + '.src=\'images/bola2.gif\'"' ) writeln( 'onMouseOut="m' + i + '.src=\'images/bola1.gif\'"' ) writeln( 'onClick="window.focus()">') writeln( '<img name="m' + i + '" src="images/bola1.gif" border="0"' ) writeln( 'width="12" height="12" hspace="4">' ) writeln( nom + '</a></td></tr>' ) }}</script>

2.- Esquema desplegable

Com a segon plat, prepararem la base del que podria arribar a ser un menú més complet:un esquema desplegable. Per tal d'entendre millor l'algoritme, el deixarem pelat. Si algús'anima i ho v ol combinar amb intercanv i d'imatges i amanir-ho amb una mica de bon gusta l'hora de disseny ar els estils, pot quedar f orça bé.

Comencem aplicant la lògica a la construcció d'un Array . Cada element serà una carpeta i,com que té una certa complexitat, els declararem d'un en un. A la carpeta, que tindrà untítol, hi haurà els submenús, f ormats per parells adreça - nom. Utilitzarem el símbol punt icoma (;) per separar submenús i la barra v ertical per separar els elements del parell:

carpeta[0] = 'Primer menú ; sub1.htm | Primer v incle ; sub2.htm | Segon v incle ; ...'

És clar que, si ho escriv im en línies separades, s'entendrà millor. De moment, cadaelement té el títol i els parells. Si v olem més submenús només ens cal af egir (o inserir)més parelles. També necessitem un Array , paral·lel a l'anterior, que recordi l'estat de cadacarpeta. El declarem i omplim de v alors f alse. D'entrada, totes les carpetes quedentancades:

v ar obert = new Array () f or ( i=0; i<carpeta.length; i++ ) { obert[i] = f alse }

Ja tenim les dades. Ara necessitem una f unció per processar-les. obreTanca(n) rep com aparàmetre el número de carpeta. Més endav ant f arem que els títols de les carpetes siguinv incles cap a aquesta f unció. Això v ol que, quan s'inicia la f unció, és perquè s'ha f et clicsobre una carpeta i, en conseqüència s'ha de canv iar d'estat: obert[n] = ! obert[n]

A continuació declarem la v ariable txt buida. L'anirem omplint de codi HTML que, en acabar,bolcarem en una capa. De moment, ja sabem què toca: engegar un bucle que f aci elrecorregut per les carpetes. A cada v olta, es troba amb una autèntica "botif arra" de dades,que haurem de partir pel lloc correcte. Com? Localitzant els caràcters separadors, els punt icoma: v ar item = carpeta[i].split(';')

El mètode split() crea un Array a partir d'una cadena, utilitzant com a "punts de tall" elcaràcter que li especif iquem. En el cas que ens ocupa, ara tenim un array "ítem" de treselements: el primer, ítem[0], és el nom de la carpeta i, els altres, les parelles de submenús.Haurem d'af egir al text (v ariable txt) de la capa el v incle per obrir i tancar la carpeta:

txt += '<b><a href ="jav ascript:obreTanca(' + i + ')">' + item[0] + '</a></b><br>'

Si la carpeta és oberta, f em un altre bucle que v agi repassant les parelles, les parteixi peron trobi la barra v ertical i f aci els enllaços. Comencem per l'índex 1 (el 0 era la carpeta):

f or ( j=1; j<item.length-1; j++ ) { v ar url = item[j].split( '| ' ) txt += ' <a href = "' + url[0] + '">' + url[1] + '</a><br>' }

Un cop acabats els bucles hem d'escriure el text generat a la capa. Ja sabem que els dosexploradors ho f an dif erent (mireu el codi). Finalment, hem d'activ ar el sistema al <body >quan es carrega la pàgina (onLoad), amb el número del menú que v ulguem obrir perdef ecte, i crear una capa per posar el menú. Tindrà, ev identment, l'identif icador que hemutilitzat per escriure el text que ha generat la f unció, en aquest cas, id="menu".

<script language="javascript">var carpeta=new Array()carpeta[0]='Primer menú;'+ 'sub11.htm|Primer submenú;'+ 'sub12.htm|Segon submenú;'carpeta[1]='Segon menú;'+ 'sub21.htm|Submenú 2.1;'+ 'sub22.htm|Submenú 2.2;'+ 'sub23.htm|Submenú 2.3;'var obert = new Array()for ( i=0; i<carpeta.length; i++ ) {

obert[i] = false}function obreTanca(n) { obert[n] = !obert[n] var txt='' for ( i=0; i<carpeta.length; i++ ) { var item = carpeta[i].split(';') txt += '<b><a href="javascript:obreTanca(' + i + ')">' + item[0] + '</a></b><br>' if ( obert[i] ){ for ( j=1; j<item.length-1; j++ ) { var url = item[j].split('|') txt += ' <a href="' + url[0] + '">' + url[1] + '</a><br>' } } } if (document.all) menu.innerHTML=txt else { document.menu.document.write(txt) document.menu.document.close() }}</script></head>

<body onload="obreTanca(999)"><div id="menu" style="position:absolute;top:20px;left:30px"></div>...

A l'exemple podem veure una combinació d'aquest exercici i l'anterior, és a dir, un esquemadesplegable amb rollover. Mireu el codi font per a més detalls.

3.- Persiana (Internet Explorer)

Farem un menú amb l'estil del d'inici dels Windows, en una capa que s'obre cap amunt.Haurem de combinar scripts, css i HTML i només f uncionarà amb Internet Explorer. Lesdif erències entre tots dos nav egadors, en el tractament d'estils i capes, són enormes. Siv olem compatibilitat, és més pràctic i curt escriure dos arxius dif erents. A més, el codi decadascun ja és prou complex, de manera que, així, l'entendrem millor.

Al cos de la pàgina f arem una capa amb identif icador <div id="Lay er1">, hi escriurem elsv incles i la tancarem. A sota, en una altra capa, hi posarem un f ormulari amb un parell debotons que pujaran la persiana a dif erents v elocitats.

<input ty pe="button" v alue=" Lent " onClick="Persiana( true, 'Lay er1' , 2 )">

En el f ull d'estils establim la lletra del cos (body ) - Explorer ho permet -, el color i decoraciódels v incles (a), el comportament rollov er (a:hov er) i les característiques de la capa(#Lay er1): posició absoluta, 115x115, z-índex 1, v isibilitat oculta, bordes amb relleu, f onsgris, lletra de 14, interlineat de 20 i marge intern de 5, tot píxels.

Fixem-nos en el coixinet ( # ) que utilitzem per def inir els estils de la capa. Quan s'utilitzaaquest signe, css interpreta que ens ref erim a una etiqueta concreta (un objecte) i no unaclasse.

I ara, Jav aScript. Comencem declarant una v ariable global buida: (v ar obj='') i, acontinuació, la f unció persiana, que, com hem v ist, rebrà tres paràmetres: estat,identif icador de capa i v elocitat. A dins, haurem d'actuar segons l'estat (v ariable "inici").

Quan hem d'inicialitzar la capa, l'assignem a la v ariable global "obj" i li af egim propietats: - obj.y contindrà l'altura de la capa i ens serv irà per f er càlculs. - obj.clp serà la zona que es mostra, en f orma de tant per cent. L'iniciem a zero. - obj.sub, establert en 140, és la coordenada v ertical d'inici de la capa, el seu "borde"superior. - obj.incr serà l'increment, que arrodonim multiplicant altura per v elocitat i div idint percent.

Si la capa ja estav a inicialitzada, el que toca és incrementar la zona que es mostra -utilitzant "obj.incr" - i v igilar que no passi de 100.

Un cop acabada aquesta distinció, redef inim la zona v isible (obj.sty le.clip) a partir del v alorde "obj.clp", en f orma de %. També calculem la posició superior d'inici de la capa:

obj.sty le.posTop = Math.round( obj.sup - obj.y * obj.clp / 100 )

Si estàv em inicialitzant la capa, ara és el moment de f er-la v isible. Finalment, comprov emsi "obj.clp" és encara menor que 100. Si ho és, f em un temporitzador que torni a cridar laf unció, amb el paràmetre inici a "f alse" i els altres dos, buits. Si, en canv i, "obj.clp" ja no ésmenor que 100, el posem a zero i acabem la f unció

<script language="JavaScript">var obj=''function Persiana( inici, capa, vel ) { if ( inici ) { obj = document.all[capa] obj.y = obj.offsetHeight obj.clp = 0 obj.sup = 140 obj.incr = Math.round( obj.y * vel / 100 ) } else { obj.clp += obj.incr if ( obj.clp > 100 ) obj.clp = 100 } obj.style.clip = 'rect( auto, auto, '+ obj.clp+'%, auto )' obj.style.posTop = Math.round( obj.sup - obj.y * obj.clp / 100 ) if ( inici ) obj.style.visibility = 'visible' if ( obj.clp < 100 ) setTimeout( 'Persiana( false, "", "")', 5 ) else obj.clp = 0}</script><style type="text/css">body { font-family: Arial, Helvetica, sans-serif}a { color: #000000; text-decoration: none}a:hover { color: #990000; font-weight: bold; text-decoration: underline}#Layer1 { position: absolute; width: 115px; height: 115px; z-index: 1;visibility: hidden;border: 1 solid black; border-left: 1 solid #FFFFFF; border-top: 1 solid #FFFFFF;background:#D0D0C8; font-size: 14px; line-height: 20px; padding: 5px}</style></head>

<body ... ><div id="Layer1"><a href="enlloc1.htm" target="_blank"><b>P</b>rimer vincle</a><br><a href="enlloc2.htm" target="_blank"><b>S</b>egon vincle</a><br><a href="enlloc3.htm" target="_blank"><b>T</b>ercer vincle</a><br><a href="enlloc4.htm" target="_blank"><b>Q</b>uart vincle</a><br><a href="enlloc5.htm" target="_blank"><b>C</b>inquè vincle</a></div><div style="position:absolute; top: 144px"><form name="f1"><input type="button" value=" Lent " onClick="Persiana( true, 'Layer1', 2 )"><input type="button" value=" Ràpid " onClick="Persiana( true, 'Layer1', 8 )"></form></div>...


SGTI : Curs D108

Mòdul: 6

L'aspecte visual > Efectes animats

En aquest mòdul hem v ist div erses aplicacions per treballar amb un dels aspectes més

importants de les pàgines web, després de la inf ormació: l'entorn v isual.

En aquesta pràctica treballarem aquestes aplicacions.

Els exercicis a realitzar són dos, a elegir entre els tres que es proposen a continuació.

Abans de començar modif icarem la pàgina index.htm que tenim dins la carpeta m6 i li

introduirem dos enllaços, cadascun d'ells ens portarà a un dels dos exercicis que hem

elegit.

Exercici 1. Rellotge reubicable.

Aquest exercici és una modif icació de l'exercici 1 del mòdul 5.

Es tracta de crear una capa animada (podeu extreure'n una de les que f ormen la pràctica 3

apartat 2) o una capa estàtica com les de la pràctica 2 que mostri la data i hora actual en el

seu interior.

Exercici 2. Imatge amb rollover

Es tracta de crear una pàgina en la que hi hagi una imatge v isible. A la v egada, s'ha de f er

una precàrrega d'una segona imatge. Posteriorment, quan es passi el ratolí sobre la imatge

v isible s'ha d'intercanv iar per la imatge que hem precarregat.

Fins aquí hem descrit el que és habitual en un rollov er. Però en aquest exercici, la imatge

original no ha de retornar quan el ratolí surt, sinó quan el ratolí torna a entrar a l'àrea

ocupada per la imatge.

Exercici 3. Menú.

Es tracta que implementeu un dels menús v istos en la pràctica 4.




SGTI : Curs D108

Mòdul: 7

Interacció i comunicació

Tot i que ja hem v ist div ersos aspectes de la interacció i la comunicació, en aquest mòdul

hi entrem de ple. De f et, això és el que ens v am proposar a l'inici del curs. Si f em DHTML i

Jav aScript és, sobretot, per aconseguir pàgines més interactiv es i millorar la comunicació -

o l'intercanv i d'inf ormació - amb els usuaris.

Per poder interactuar hem de saber què passa. El

nav egador ho sap, i Jav aScrpt pot tenir accés a

aquesta inf ormació. Cada cop que es mou el ratolí,

es f a clic en un v incle, es prem una tecla, es

carrega una pàgina o s'abandona, ... es produeix un

ev ent, que podem analitzar i preparar una acció com

a resposta.

En aquest mòdul v eurem els ev ents i el seu

tractament: els comportaments. Amb això f arem

que la web estigui "més atenta" al que passa.

Tractarem amb especial atenció la v alidació de f ormularis, que ens permetrà, d'una banda,

assegurar la consistència de les dades que s'env ien i, de l'altra, orientar els usuaris de

manera que els puguin utilitzar millor.

La pàgina pot respondre de div erses maneres. Podem, per exemple, aconseguir que els

f ormularis ens env iïn més inf ormació de la que mostren, utilitzant camps ocults. També

ens pot interessar restringir l'accés a algunes zones (pàgines) de la web, de manera que

només hi pugui accedir qui conegui la clau. O desactiv ar el botó dret del ratolí, de manera

que no ens puguin copiar el codi o robar les imatges ...

Un altra qüestió interessant és la interacció entre marcs. Mentre programàv em només en

HTML, els marcs presentav en més problemes que av antatges. Amb Jav aScript, però, els

podem mantenir sincronitzats. I, encara més; v eurem que tots els elements d'un marc són

accessibles i manipulables des dels altres, no només els de la pàgina - imatges, v incles,

també les v ariables i les f uncions, és a dir, tot. Els marcs, que potser ja donàv em per

morts, ara tornen a aixecar el cap, més v ius que mai.

En def initiv a, aquest mòdul tracta de les pàgines interactiv es, on l'usuari essent com és el

centre d'atenció i qui maneja la pàgina, el traiem del pati de butaques i el f em pujar a

l'escenari. I el nostre paper? Doncs, nosaltres, dirigim l'obra a distància.

A partir d'aquí comença, també, el nostre treball sobre el projecte. Les pràctiques següents

han de serv ir per donar-li un caire més d'eina i no tant d'aparador. Hem de procurar que les

pàgines "f acin coses" i, per això, han d'estar atentes al que passa al seu entorn i tenir una

resposta preparada.

En aquest mòdul

Pràctica 1: Events i comportaments

Pràctica 2: Validació de formularis

Pràctica 3: La pàgina respon

Pràctica 4: Interacció entre marcs

Exercic is: Projecte interactiu



SGTI : Curs D108


Interacció i comunicació > Events i comportaments

Quan s'utilitza DHTML tots els elements d'una pàgina poden tenir ev ents associats, que elnav egador utilitzarà per executar f uncions, és a dir, tots els elements poden f er accions.

Els ev ents es desencadenen de div erses maneres. Ja n'hem v ist algunes: - Accions del nav egador: entrar o sortir d'una pàgina, carregar imatges, detectarerrades,... - Accions d'usuari: f er clic o moure el ratolí, prémer una tecla, ... - Accions del rellotge: els dos tipus de temporitzadors

Els elements d'una pàgina "disparen" els ev ents sempre. El que nosaltres podem f er ésdirigir les accions que es f an per def ecte, cap a f uncions que puguem controlar. Així, quanen HTML escriv im onclick="..." o bé onmouseov er="...", el que f em és dirigir la sortida del'ev ent cap a on ens interessa. Les f uncions - que, ev identment, haurem d'escriure -s'anomenen "manejadors d'ev ents" o "Ev ent Handlers". Dreamweav er ho tradueix per"Comportaments", i així és com les anomenarem.

Un exemple de com f unciona tot plegat l'hem v ist div erses v egades. Els v incles tenen, perdef ecte, l'ev ent Click associat a una f unció del nav egador que llegeix la propietat href il'intenta carregar. De v egades (per exemple, als enllaços buits que tant hem usat), però, nov olem que s'executi aquesta f unció, i dirigim l'ev ent Click a un altre lloc que retorni "f alse".O sí que v olem que s'executi, però, abans, v olem f er una altra cosa.

Ja v am parlar sobre els ev ents al mòdul 3, i els hem utilitzat moltes v egades. En aquestapràctica els presentarem de f orma més detallada i v eurem nov es possibilitats.


Propietat this : ref erència a l'objecte que prov oca un ev ent o acció.Objecte event : interf ície Jav aScript per manejar ev ents.Mètode captureEvents() : habilita un objecte per respondre a un tipus d'ev ent (Netscape).

1.- Llista d'events

Els nav egadors controlen i manegen tot el que passa a trav és dels ev ents, però cadascunho f a a la sev a manera, com anirem v eient. La llista següent no és, doncs, massa segurai, en tot cas, intenta mostrar els mínims:

Event S'aplica a ... Passa quan ...

Abort

onabortimatges L'usuari interromp la càrrega d'una imatge

Blur

onblurfinestres i elements deformulari

El component deixa d'estar enfocat o perd elcursor

Change

onchangecamps de text i llistes deselecció

Ha canviat el valor del camp

Click

onclickbotons, controls de radio iverificació, enllaços

L'usuari ha fet clic sobre l'element

DragDrop

ondragdropfinestres L'usuari fa clic i arrossega un objecte

Error

onerrorimatges i finestres La càrrega d'una imatge o pàgina produeix

una errada

Focus

onfocusfinestres i elements deformulari

L'element queda enfocat o rep el cursor

KeyDown

onkeydownpàgines, imatges, vincles iàrees de text

L'usuari prem una tecla

KeyPress

onkeypresspàgines, imatges, vincles iàrees de text

L'usuari prem i deixa anar una tecla

KeyUp

onkeyuppàgines, imatges, vincles iàrees de text

L'usuari deixa de prémer una tecla

Load

onloadimatges i pàgines Es carrega una pàgina o imatge

MouseDown

onmousedownpàgines, botons i vincles L'usuari prem un botó del ratolí

MouseMove

onmousemoveper defecte, no s'aplicaenlloc

L'usuari mou el ratolí

MouseOut

onmouseoutmapes d'imatge i vincles El cursor del ratolí surt del mapa o vincle

MouseOver

onmouseovervincles El cursor es situa sobre un vincle

MouseUp

onmouseuppàgines, botons i vincles L'usuari deixa de prémer un botó del ratolí

Move

onmovefinestres La finestra es mou

Reset

onresetformularis L'usuari esborra un formulari

Resize

onresizefinestres La finestra canvia de mida

Select

onselectcamps de text L'usuari selecciona en un camp d'entrada de

text

Submit

onsubmitformularis S'envia un formulari

Unload

onunloadcos de la pàgina L'usuari abandona la pàgina

2.- Definir comportaments

Un comportament, segons Dreamweav er, no és més que una f unció que s'executa com aresposta a un ev ent. N'hem v ist en div erses pràctiques.

Podem def inir el comportament dav ant d'un ev ent de dues maneres:

- Des de HTML: <img src="bola.gif " onmouseov er = "ctrlEv ()">- Des de Jav aScript: document.images[0].onmouseov er = ctrlEv

La def inició d'un comportament es f a com qualsev ol altra f unció. Els comportamentspoden rebre paràmetres. En tots els casos, però, hi ha un paràmetre especial, this, ques'assigna sempre i que serv eix per ref erenciar l'objecte que ha prov ocat l'ev ent. Si v olemev itar que també s'executi el comportament per def ecte, hem de retornar "f alse".

A l'exemple següent f em una f unció que s'activ a des de div ersos llocs: quan es carrega lapàgina o quan es f a clic en un v incle. També hem posat una imatge amb un ev entonmouseover. Si ho prov em amb els nav egadors actuals, f unciona; amb Netscape 4.7,no.

<script language="javascript">function avisa( txt ) { alert( 'Aquesta funció s\'activa des ' + txt )}</script></head>

<body onLoad="avisa( 'de la càrrega de la pàgina' )"><img src="images/docs.gif" onMouseOver="avisa( 'd\'una imatge' )"><a href="" onClick="avisa( 'd\'un vincle' );return false">Vincle buit</a>...

3.- L'objecte Event

Per tal de manipular els ev ents, Jav aScript disposa d'una interf ície, l'objecte event. Lessev es propietats s'actualitzen de f orma automàtica quan es produeix un ev ent determinat, iles podem consultar per saber què ha passat, amb tota mena de detalls.

Si, en general, les dif erències entre nav egadors són importants, en aquest objecte hi ha unautèntic abisme. Com gairebé sempre, Internet Explorer of ereix més opcions i f lexibilitat. Amés, no totes les propietats es poden aplicar a tot tipus d'objectes. Si v olem af inar,

haurem de consultar la documentació específ ica de cada f abricant per a cada objecte:

Propietat Informació

x Coordenada X del ratolí, referida a la finestra

y Coordenada Y del ratolí, referida a la finestra

type Cadena (String) que representa el nom de l'event

Les úniques propietats compatibles entre tots dos nav egadors són x, y i type, de maneraque, tot i que el tractament de l'objecte "ev ent" proporciona una potència i controlinsospitats, pràcticament sempre haurem de detectar el nav egador i of erir solucionsdif erents.

El plantejament del sistema d'ev ents també és radicalment oposat entre els dosnav egadors:

- Els navegadors del DOM 2 permeten que l'objecte que rep l'ev ent el pugui processar i, sino, el passen a l'objecte pare de la jerarquia, seguin aquest ordre: v incle > contenidor >document > f inestra > comportament per def ecte. Pràcticament tots els objectes podenprocessar ev ents.

- Netscape 4.7 f a tot el contrari, intenta processar l'ev ent a la part més alta de la jerarquia(window) i, si no el pot manejar, el passa al seu inf erior (document) f ins arribar a l'objecteque l'ha generat. Això f a que pocs elements tinguin l'oportunitat de processar ev ents.

Una f orma, barroera però ef ectiv a, de f orçar Netscape 4.7 perquè processi els ev ents, perexemple, en una capa, és escriure-hi un script intern que redef ineixi el(s) comportament(s):

En aquest cas f arem una capa que reaccioni als ev ents onmouseover i onmouseout entots dos nav egadors. Després d'escriure-ho a l'etiqueta de la f orma habitual, obrim unscript i f em dues f uncions amb el mateix nom dels ev ents i el mateix resultat que hemdef init a l'etiqueta.

<div style="position:absolute; left:100; top:80;"onmouseover=" alert('Ratolí sobre la capa\nInternet Explorer'); "onmouseoOut=" alert('Ratolí fora de la capa\nNavegador DOM 2'); ">Aquí podem posar el<br>contingut de la capa<script language="JavaScript" >function onmouseover() { alert( 'Ratolí sobre la capa\nNetscape 4.7' );}function onmouseout() { alert( 'Ratolí fora de la capa\nNetscape 4.7' );}</script></div>

4.- Capturar events

Una manera més ef ectiv a d'assegurar que els objectes respondran a uns determinatsev ents és f er-ne una captura. És dif erent per als dos nav egadors. Amb Netscape 4.7 hemd'utilitzar el mètode captureEvents(), abans de començar. L'ev ent es passarà com aparàmetre a la f unció controladora. Explorer, en canv i, reconeix l'ev ent dins de la f unció.

Farem que la pàgina (document) capturi l'ev ent MouseDown i el processarem amb unaf unció que ens dirà el tipus d'ev ent i el lloc de la pàgina on s'ha produït. En primer llocdetectarem el nav egador. A continuació, si és Netscape 4.7, f em que el document capturil'ev ent:

if ( ns ) document.captureEv ents( Ev ent.MOUSEDOWN )

Si v olem capturar més d'un ev ent els podem separar amb una barra v ertical:

document.lay er1.captureEv ents( Ev ent.CLICK | Ev ent.MOUSEMOVE )

A continuació hem de f er una f unció - comportament - que processi l'ev ent:

f unction processa( e ) { ... }

Finalment, hem d'enregistrar la f unció com a comportaments de l'objecte:

document.onmousedown = processa

A dins de la f unció, hem de detectar si no s'utilitza Netscape 4.7 per capturar l'ev ent de laf inestra. Internet Explorer no reconeix el paràmetre, per això escriv im: if ( ! ns ) e =window.ev ent . Finalment, amb el tipus d'objecte i les coordenades, f em un missatged'alerta.

<script language="javascript">var ns = document.layersif ( ns ) document.captureEvents( Event.MOUSEDOWN )function processa(e) { if( !ns ) e = window.event var txt = 'S\'ha capturat un event del tipus ' + e.type + '\n' txt += 'a la posició X: ' + e.x + ', Y: ' + e.y + '.\n' alert( txt ) return true}document.onmousedown = processa</script>


SGTI : Curs D108


Interacció i comunicació > Validació de formularis

En aquesta pràctica tractarem de la v alidació de les dades introduïdes per l'usuari v isitantde la nostra pàgina.

Hi ha ocasions que l'usuari ha d'introduir inf ormació sol·licitada per la pàgina, per exempledades d'un f ormulari que posteriorment s'ha d'env iar, v alors numèrics per processar en unprograma de càlculs, v alors textuals acotats entre poques opcions de resposta a algunespreguntes. etc.

No podem ref iar-nos que la inf ormació introduïda perl'usuari estigui d'acord amb el f ormat de les dadesesperades. Introduir un text quan s'espera un número,una adreça de correu sense el símbol @, etc. solen sererrors habituals.

Per tant, el programa Jav aScript ha de v erif icar que elsv alors introduïts siguin coherents, és a dir, ha de v alidarl'entrada d'inf ormació, i si no és correcta, adv ertir l'usuaridel seu error.

La manera de v erif icar si la inf ormació és correcta es f a analitzant les dades introduïdesmitjançant comparacions amb els possibles v alors correctes, o bé, comparant ambexpressions regulars.


Propietat length : Conté la longitud de la cadena en nombre de caràcters.Mètode charAt(n) : Retorna el caràcter situat en la posició n dins la cadena, començant per 0.Mètode substring(inici,final) : Retorna la subcadena ubicada entre les posicions inici-final

d'una cadena.Mètodes indexOf(car) i lastIndexOf(car) : Retornen la posició dins una cadena d'un caràcter car, començant a buscar des del principi o des del f inal, respectiv ament. Retornen -1 si no l'han trobat.Mètodes toLowerCase() i toUpperCase() : Conv erteixen a minúscules i majúscules, respectiv ament, els caràcters d'una cadena.Mètode isNaN(valor) : Retorna true si valor és v alor no numèric (is not a number). En cas contrari, si valor és numèric, retorna false.Mètode match(patró) : Retorna la cadena coincident amb el patró si l'ha trobat, sinó retorna null.Metode replace(patró, subst) : Substitueix la cadena subst per la subcadena quecoincideix amb el patró.Expressions Regulars.

1.- Validació per comparació.

Dreamweav er incorpora una opció a "Ventana/Comportamientos/+/Validar f ormularios" queof ereix opcions de v alidació de dades de f ormularis. Les opcions són limitades i ho f a percomparació amb la incorporació de la f unció genèrica MM_v alidateForm().

En aquest apartat f arem una f unció de nom valida(), que serv irà per f er unes v alidacionsper comparació, similars a les que introdueix el Dreamweav er, però, f etes per nosaltres.Així les entendrem millor i ens serà més f àcil adaptar-les a qualsev ol altra situació.

Per f er l'anàlisi del text a v alidar és necessari treballar amb cadenes. Per això, ens seranmolt útils els mètodes i propietats de l'objecte String. S'ha de tenir en compte que elscaràcters que f ormen una cadena es numeren progressiv ament començant amb el índex 0per al primer caràcter. Al principi d'aquesta pràctica hi ha una descripció dels mètodes queutilitzarem.

La següent f unció eliminaBlancsExtrems() és una f unció auxiliar que elimina els espais enblanc al principi i al f inal de la cadena que se li passa com a paràmetre i retorna la mateixacadena sense els espais en blanc.

De v egades, sol passar que l'usuari introdueix de f orma inv oluntària espais en blanc alprincipi i/o al f inal del text. Aquests espais en blanc solen ser dif ícils de localitzar ja que noes v euen, sobretot si estan al f inal. Podem ajudar a ev itar aquests tipus d'errorsimplementant la f unció que elimina aquests espais en blanc.

La línia 3 comprov a si el primer caràcter (charAt(0)) és igual a un espai en blanc (' '). Si hoés s'extreu la subcadena situada entre la posició 1 i el f inal de la cadena (cadena.length) il'assigna un altre cop a la v ariable cadena. Aquest procés es repeteix tantes v egades comcalgui (while) mentre el primer caràcter de la cadena contingui un espai en blanc.

La línia 4 f a el mateix que la 3, però, ref erent als espais en blanc que hi pugui hav er al f inalde la cadena. Per això comprov a si hi ha un espai en blanc al f inal de la cadena totcomprov ant la posició charAt(cadena.length-1). Recordem que length retorna la longitud dela cadena en nombre de caràcters, i que la cadena comença a comptar els caràcters ambel 0, per tant l'última posició tindrà l'índex ...length -1. Això ho repeteix mentre hi hagiespais en blanc al f inal (while).

Un cop s'han eliminat els espais en blanc al principi i al f inal, es retorna el v alor resultant(línia 5). Aquesta f unció s'inv ocarà des de dins la f unció valida().

1 function eliminaBlancsExtrems(cadena)2 {3 while (cadena.charAt(0)==' ') cadena = cadena.substring(1,cadena.length);4 while (cadena.charAt(cadena.length-1)==' ') cadena = cadena.substring(0,cadena.length-1);5 return cadena;6 }

A continuació, iniciarem la creació comentada de la f unció de nom valida(), que seràl'encarregada de v alidar els dif erents camps del f ormulari indicat al f inal d'aquest apartat.Repetirem el procés de v alidació per a cadascun dels quatre camps que conté el f ormulari.Si és correcte la v ariable resCampX v aldrà true, sinó v aldrà false. Mireu abans l'últim blocde codi d'aquest apartat on hi ha el codi HTML amb els camps dins el f ormulari que v olemv alidar.

El camp no. 1 és un camp que ha de contenir dades numèriques obligatòriament. A la línia 9assignem a valCamp1 el contingut del quadre de text camp1, eliminant-ne prèv iament elspossibles espais en blanc que s'hagin introduït al principi i al f inal amb la f uncióeliminaBlancsExtrems().

A la línia 9 assignem per def ecte el v alor true a la v ariable resCamp1 i a la línia 11v erif iquem si el camp 1 és buit o conté un v alor no numèric amb isNaN(). Si és així,assigna a resCamp1 el v alor false.

7 function valida()8 {9 var valCamp1=eliminaBlancsExtrems(document.form1.camp1.value);10 var resCamp1=true;11 if (valCamp1 =='' || isNaN(valCamp1)) resCamp1=false;

Les línies de codi següents corresponen a la v alidació del camp no. 2. Aquest Camp no. 2,també és obligatori i ha de contenir un v alor numèric comprés entre -4 i 8. A les línies 12 i13, assignem a valCamp2 el v alor de camp2 sense espais en blanc extrems i a resCamp2

el v alor true, respectiv ament.

A la línia 14 és la que f a la v alidació pròpiament dita, i consisteix en ef ectuarcomparacions, si valCamp2 és una cadena buida, o és un v alor no numèric o és inf erior a-4 o és superior a 8, s'assigna a resCamp2 el v alor false.

12 var valCamp2=eliminaBlancsExtrems(document.form1.camp2.value);13 var resCamp2=true;14 if (valCamp2 =='' || isNaN(valCamp2) || valCamp2<-4 || valCamp2>8)

resCamp2=false;

A continuació s'ef ectua la v alidació de l'adreça electrònica sol·licitada com a obligatòria enel Camp no. 3. La majoria de v alidacions d'una adreça de correu solament v erif iquenl'existència del símbol @ dins el text. Així és com ho f a el Dreamweav er. El codi següentef ectua una v alidació més detallada.

Primer hem de tenir clar quina és l'estructura mínima d'una adreça e-mail, l'estructurageneral és: [email protected] on x potser un o més caràcters alf abètics o numèrics, majúscules ominúscules, o un punt . o una ratlla baixa _ . y potser un o més caràcters alf abèticsminúscules o numèrics i pot incloure el "." . dom és un dels dominis de primer niv ellexistent, per exemple: .es, .com, .f r, .org, .net, etc.

Lògicament, aquest codi solament v erif ica que l'estructura de l'e-mail sigui correcta, el queno pot f er és comprov ar si aquest e-mail existeix realment.

La línia 15 llegeix el v alor del camp de text del f ormulari i l'assigna a valCamp3, hav enteliminat prèv iament els espais en blanc inicials i f inals si hi f ossin. Les línies 16 i 17assignen el v alor inicial a resCamp3 i v erif iquen que l'adreça no sigui buida,respectiv ament.

A continuació de la línia 17, es f an múltiples comprov acions. Si alguna d'elles no éscorrecta, s'assignarà el v alor false a resCamp3.

La línia 18, s'assegura que dins la cadena no hi hagi cap espai en blanc. La línia 19 cerca laposició d'un punt començant des del f inal i assigna aquesta posició a la v ariableposUltimPunt. A la línia 20, es v erif ica que aquest últim punt existeix.

Sabem que des de la posició de l'últim punt f ins el f inal de la cadena s'hi ha de trobar elnom del domini de primer niv ell (.es, .org, .com, ... ). Per tant, a la línia 21 assignem a lav ariable domini el contingut que es troba des de la posició de l'últim punt f ins al f inal de lacadena, f ent una extracció amb substring entre la posició de l'últim punt (posUltimPunt) iel f inal de la cadena determinat amb la propietat length.

La línia 22 v erif ica que el contingut de la v ariable domini correspongui amb algun delsdominis existents. En aquest exemple solament hem posat 5 dominis. Si desitgemampliar-ho a tots els altres coneguts, s'hauran d'af egir dins la condició del if amb el següentf ormat: ...&&domini!='.dom'.

La línia 23 assigna a longDomini el v alor de la longitud de domini, a la 24 determinem laposició del símbol @ i a la 25 comprov em que no existeixi més d'un símbol @ f ent unanov a cerca d'aquest símbol des del f inal de la cadena. Si solament existeix una @ les duescerques de posició ens donaran el mateix resultat.

A la línia 26 v erif iquem que la posició de @ no estigui situada com a primer caràcter nitampoc com a últim caràcter tenint en compte la longitud del domini.

Si la v alidació de l'adreça e-mail passa correctament totes aquestes prov es, resCamp3

v aldrà true, sinó v aldrà false.

15 var valCamp3=eliminaBlancsExtrems(document.form1.camp3.value);16 var resCamp3=true;17 if (valCamp3 == '') resCamp3=false;18 if (valCamp3.indexOf(' ')!=-1) resCamp3=false;19 var posUltimPunt = valCamp3.lastIndexOf('.');20 if (posUltimPunt==-1) resCamp3=false;21 var domini=valCamp3.substring(posUltimPunt,valCamp3.length);22 if (domini!='.es' && domini!='.com' && domini!='.net' && domini!='.org' && domini!='.fr') resCamp3=false;23 var longDomini=domini.length;24 var posArroba=valCamp3.indexOf('@');25 if (posArroba!=valCamp3.lastIndexOf('@')) resCamp3=false;26 if (posArroba<=0 || posArroba>=valCamp3.length-longDomini-1) resCamp3=false;

Les línies següents corresponent a la v alidació del camp 4. Aquest camp solament pot tenirtres possibles v alors, en majúscules o minúscules, o deixar-lo en blanc.

Com que és igual que estigui en majúscules o en minúscules, abans de f er les

comparacions, hem de conv ertir tots els caràcters de la cadena a minúscules amb laf unció toLowerCase() de la línia 29. També podríem passar-ho tot a majúscules ambtoUpperCase(), en aquest cas, les comparacions de la línia 30 s'haurien de f er amb el texten majúscules.

La línia 30 és on es f a la v alidació. És compara amb els tres v alors possibles o bé ambuna cadena buida, si és que és en blanc. Si no es compleix la condició resCamp4 v aldràfalse, de cas contrari, v aldrà true.

27 var valCamp4=eliminaBlancsExtrems(document.form1.camp4.value);28 var resCamp4=true;29 valCamp4=valCamp4.toLowerCase();30 if (valCamp4!='verd' && valCamp4!='blau' && valCamp4!='blanc' && valCamp4!='') resCamp4=false;

En aquest punt de la f unció valida() ja tenim quatre v ariables resCampX amb el v alor true

o false, segons hagi estat el resultat de la v alidació. Ara queda adv ertir a l'usuari delspossibles errors, si hi són.

A les línies 31 i 32, si totes les v ariables resCampX v alen true, assignem a la v ariablenoError el v alor true de cas contrari, assignem false. És a dir, noError v al false si hi haalguna v alidació incorrecta.

La línia 33 conté un alert que mostra el resultat a l'usuari. Per a cada camp, mostrem "OK!"o" Error" mitjançant l'operador ternari ? : , i un text indicador del resultat f inal av aluant lav ariable noError.

La línia 34 retorna el resultat global (indicat per noError) de la v alidació a l'ev ent onSubmit

que ha inv ocat a la f unció valida(). Si es retorna true, s'ef ectuarà l'acció d'env iament de lesdades, en canv i, si retorna false, quedarà anul·lada l'acció d'env iament de les dades i ensquedarà el f ormulari pendent per modif icar els errors que hi hagi.

31 if (resCamp1 && resCamp2 && resCamp3 && resCamp4) var noError=true;32 else var noError=false;33 alert('Camp 1 : ' + ((resCamp1)?'OK!':'Error!') + '\n' + 'Camp 2 : ' + ((resCamp2)?'OK!':'Error!') + '\n' + 'Camp 3 : ' + ((resCamp3)?'OK!':'Error!') + '\n' + 'Camp 4 : ' + ((resCamp4)?'OK!':'Error!') + '\n\n' + ((noError)?'Tot correcte, les dades s\'enviaran ara.' :'Tens errors, verifica\'ls abans d\'enviar.'));

34 return noError;35 }

Finalment, a continuació, tenim el codi HTML on està inclòs el f ormulari d'exemple i lesdues f uncions descrites prèv iament.

Com a element destacable podem observ ar com s'inv oca l'ev ent Submit mitjançant elcontrolador d'ev ents onSubmit, dins la línia d'inici del f ormulari. Aquest ev ent s'inv ocaràquan f em clic a sobre del botó "Env iar".

L'ev ent Submit inv oca a la f unció valida() de la següent f orma: return valida(); . Això f aque el resultat de la v alidació (true o false) es passi a l'acció d'env iament del f ormulari, detal manera que si el v alor retornat és true, s'ef ectuarà l'acció d'env iament, en canv i, si ésfalse, no s'ef ectuarà cap env iament.

<html><head><title>Exemple</title>

<script language='JavaScript'> ... Introduïm les línies 1 - 35 descrites prèviament ...</script>

</head>

<body bgcolor='#BAE8E7'> <form name='form1' method='post' action='mailto:[email protected]' onSubmit='return valida();'> Introdueix un valor numèric:<br> # 1: <input type='text' name='camp1'> (Obligatori.)<p> Introdueix un valor numèric entre -4 i 8:<br> # 2: <input type='text' name='camp2'> (Obligatori.)<p> Introdueix un e-mail:<br> # 3: <input type='text' name='camp3'> (Obligatori.)<p> Introdueix 'verd', 'blau' o 'blanc' (majúscules o minúscules):<br> # 4: <input type='text' name='camp4'> (Es pot deixar en blanc.)<p> <input type='submit' value='Enviar'> <input type='reset' value='Esborrar'> </form></body></html>

2.- Validació mitjançant comparacions amb "ExpressionsRegulars".

A l'apartat anterior, el codi es complica excessiv ament quan les comparacions a ef ectuarsón molt v ariades. En aquest apartat introduirem el concepte de Expressions Regulars queens permetran f er patrons de v alidació més complexos de f orma més senzilla. Aplicaremaquests conceptes per substituir part del codi Jav aScript descrit a l'apartat anterior.

Per entendre ràpidament el que són les Expressions Regulars recordarem els 'comodins' * i? utilitzats a l'MS-DOS i Windows per seleccionar múltiples f itxers. Podríem dir que lesExpressions Regulars són una ev olució molt més av ançada d'aquells rudimentaris'comodins'.

El tema de les Expressions Regulars és molt extens, disposa de moltes opcions i la sev aaplicació és comuna a altres llenguatges de programació dif erents del Jav aScript, com ara,el Perl, etc. En aquest apartat no tractarem aquest tema amb extensió. Solamentdescriurem aquells aspectes introductoris necessaris per aplicar-ho al codi de l'apartatanterior.

Podeu buscar més inf ormació sobre el tema a Internet, llibres especialitzats o, percomençar, v eure l'ajuda de Dreamweav er (Ay uda/Ref erencia/Jav aScript.... cercant laparaula RegExp).

Una Expressió Regular és un patró per a cadenes de caràcters. Tenim dues f ormes decrear els patrons corresponents a les Expressions Regulars. Mitjançant l'ús de l'objecteRegExp o bé declarant el patró com una expressió literal situada entre dues barres /(/patró/). Aquí utilitzarem la segona f orma.

Un cop tenim creat el patró, el podem utilitzar en els mètodes exec() i test() de l'objecteRegExp o els mètodes match(), replace(), search() i split() de l'objecte String. Els principalscaràcters especials per generar patrons són:

\ Indica que el següent caràcter és especial i no s'ha de considerar un literal. ^ Permet trobar coincidències que comencen al principi de la cadena. $ Permet trobar coincidències que comencen al f inal de la cadena. * Permet trobar coincidències dels caràcters que el precedeixen 0 o més v egades. + Permet trobar una o més coincidències dels caràcters que el precedeixen. ? Permet trobar 0 o una coincidència dels caràcters que el precedeixen. . Localitza qualsev ol caràcter sempre que no estigui al principi de la cadena. a|b Localitza qualsev ol dels patrons (a o b). [...] Localitza qualsev ol dels caràcters situats dins els [ ]. \d Localitza dígits dins la cadena.

Disposem també dels modif icadors següents: g Aplica el patró de f orma global a tota la cadena, no solament a la primeracoincidència. i Ignora si els caràcters són majúscula o minúscula.

Els modif icadors s'introdueixen al f inal de la Expressió Regular, després de la / f inal.

Els següents exemples de patrons d'expressions regulars ens seran útils per aplicar-los enel codi de l'apartat anterior:

/[-+]?\d*\.?\d*/

Localitza números decimals.[-+]? - Indica 0 o 1 caràcter + o - .\d* - Indica 0 o més dígits numèrics.\.? - Indica 0 o 1 punt.\d* - Indica 0 o més dígits numèrics.

/[A-Za-z0-9._]+@[a-z0-9.]+(.es|.com|.net|.org|.fr)/g

Localitza cadenes amb el f ormat adequat per ser considerades una adreça e-mail.[A-Za-z0-9._]+ - Indica 1 o més caràcters entre A i Z, a i z, 0 i 9 o un punt o un guió baix.@ - Indica el símbol literal @.[a-z0-9.]+ - Indica 1 o més caràcters entre a i z, 0 i 9 o un punt.(.es|.com|.net|.org|.f r) - Indica una de les cadenes de text separades amb | , si es desitjaaugmentar el nombre de dominis v àlids s'ha de f er af egint-los aquí.

/verd|blau|blanc|/gi

Localitza cadenes amb els continguts v erd o blau o blanc o buit, en majúscules ominúscules. Fixeu-v os com després de la paraula blanc hem af egit un símbol | seguit de laf inalització del patró /, aquesta part és la que permet seleccionar els camps buits. Tambés'ha inclòs el modif icador g per indicar tota la cadena i per indicar majúscules i minúscules.

/^ +| +$/g

Localitza espais en blanc al principi o al f inal d'una cadena. ̂+ - Cerca espais en blanc a l'inici de la cadena.

+$ - Cerca espais en blanc al f inal de la cadena.

Utilitzarem també els següents mètodes: - Mètode match(patró) : Retorna la cadena coincident amb el patró si l'ha trobat, sinóretorna null. - Mètode replace(patró, subst) : Substitueix la cadena subst per la subcadena quecoincideix amb el patró.

En el codi següent apliquem les Expressions Regulars al programa de v alidació v ist al'apartat anterior.

La línia que substitueix a les línies 3, 4 i 5 s'encarrega de substituir els espais en blanc delprincipi i f inal de la cadena. Per això cerca el patró d'un o més espais en blanc des delprincipi ( ̂+) o un o més espais en blanc des del f inal ( +$) i els substitueix per una cadenabuida ' '. El modif icador g indica que es f aci per a tota la cadena.

La part de codi v alCamp1 != v alCamp1.match(/[+-]?\d*\.?\d*/) que substitueix a la línia11ef ectua una comparació entre el contingut de la v ariable valCamp1 i el v alor retornat permatch() a l'aplicar el patró /[+-]?\d*\.?\d*/, si no coincideixen, v ol dir que el contingut delcamp1 no és un número.

A la línia 14 es f a una acció similar a la indicada en el paràgraf anterior.

El codi v alCamp3.match(/[A-Za-z0-9._]+@[a-z0-9.]+(.es|.com|.net|.org|.f r)/g) de la línia quesubstitueix a les línies 17-26 comprov a el contingut de la v ariable valCamp3. Per això,s'extreu una cadena de la v ariable valCamp3 segons el patró indicat com a paràmetre dematch(). Si aquesta cadena no coincideix amb el v alor que conté la v ariable valCamp3, v oldir que l'adreça e-mail no s'ajusta al patró.

El codi v alCamp4!=v alCamp4.match(/v erd|blau|blanc|/gi) de la línia que substitueix a leslínies 29 i 30 comprov a si el v alor retornat per match() segons el patró indicat, és dif erentdel contingut de valCamp4. Si és dif erent v ol dir que el contingut de valCamp4 no s'ajustaals requeriments sol·licitats pel camp4.

Observ em que la utilització de les expressions regulars redueix el codi necessari per f erv alidacions per comparació, sobretot si aquest codi de comparació és extens com en elcas de la v alidació de l'adreça e-mail.

En el cas concret de la v alidació de l'adreça e-mail, la utilització de les expressions regulars

ens permet ajustar-ho amb més precisió. Si en l'apartat anterior, s'acceptav a qualsev olcaràcter per f ormar l'e-mail en els texts prev is i posteriors a l'@, en aquests cas, aquestscaràcters són determinats dins els [ ] i es pot ev itar la introducció de caràcters estrany s.

Substituïm les següents línies pel codi indicat a continuació:

la 3, 4 i 5 per: return cadena=cadena.replace(/^ +| +$/g,'');

la 11 per: if (valCamp1 =='' || valCamp1 != valCamp1.match(/[+-]?\d*\.?\d*/)) resCamp1=false;

la 14 per: if (valCamp2 =='' || valCamp2!=valCamp2.match(/[+-]?\d*\.?\d*/) || valCamp2<-4 || valCamp2>8) resCamp2=false;

de la 17 fins la 26 per: if(valCamp3 != valCamp3.match(/[A-Za-z0-9._]+@[a-z0-9.]+(.es|.com|.net|.org|.fr)/g)) resCamp3=false;

la 29 i 30 per: if (valCamp4!=valCamp4.match(/verd|blau|blanc|/gi)) resCamp4=false;


SGTI : Curs D108


Interacció i comunicació > La pàgina respon

Les pàgines estàtiques, amb una orientació purament inf ormativ a, v an deixant lloc a

d'altres, més intel·ligents, que es mouen seguint els interessos dels seus autors i dels

usuaris. De l'aparador es passa a l'intercanv i d'inf ormació.

Sota el títol "La pàgina respon" agrupem dos aspectes més relacionats

amb aquest intercanv i que no pas amb el disseny : v eurem com podem

saber més del que els usuaris ens v olen dir; aprendrem a protegir les

pàgines de manera que només hi pugui entrar qui conegui la clau d'accés,

desactiv arem el botó dret, ...

En def initiv a, no es tracta d'ef ectes espectaculars,sinó més av iat de conèixer unes

tècniques que ens aportaran més control sobre el que passa amb les nostres pàgines.


Comportament oncontextmenu : acció quan s'activ a el menú de context amb el botó dret.

Mètode history.go() : salta a la pàgina de l'historial especif icada i al lloc on l'hav ia deixada.

1.- Camps ocults

En un f ormulari hi pot hav er dades que s'env iaran i/o serv iran per processar la resposta i

que l'usuari no v eu. Es tracta de camps que l'autor introdueix amb el modif icador "hidden",

ocult.

Aquest tipus de camps ens poden resultar molt útils en algunes ocasions. Per exemple,

podem donar a un mateix f ormulari div erses utilitats depenent del v alor d'un camp ocult:

podem env iar un mateix f ormulari a llocs dif erents, f iltrar els missatges, obtenir inf ormació

sobre el client, ...

Els camps ocults s'utilitzen com qualsev ol altre camp d'un f ormulari:

<input ty pe="hidden" name="noEsVeu" v alue="ocult">

En aquest exemple prepararem un f ormulari que, a més del nom i el missatge de l'usuari,

tindrà altres dades que ens poden ser útils: títol i adreça de la pàgina, nav egador, v ersió,

sistema, pantalla i el temps que ha trigat a carregar-se la pàgina.

Al cos f arem un f ormulari amb 8 camps, sis d'ocults i dos de v isibles. També hi posarem

un botó per esborrar i un altre per env iar. S'env iarà pel mètode POST, sense encriptar

(encty pe="text/plain"), com a acció tindrà un "mailto:" a la nostra adreça i def inirem

onSubmit="return noDupli(this)", és a dir, que en el moment d'env iar-lo es passi a si mateix

com a paràmetre d'una f unció.

Assignarem l'ev ent onLoad del cos a una altra f unció que s'executarà quan s'acabi de

carregar la pàgina. Aquesta f unció, Fet(), posarà a la v ariable fi el temps actual.

A la capçalera declararem tres v ariables:

- inici: li assignem el temps actual quan comença la càrrega de la pàgina.

- fi: ja esmentada, serv irà per calcular el temps de càrrega. No la inicialitzem.

- trameses: de moment a 0, ev itarà que s'env iï el f ormulari dues v egades.

A continuació, la f unció noDupli() rep com a paràmetre una ref erència al f ormulari.

Comprov a que el f ormulari existeix i, si és així, assigna als camps ocults les dades que

v olíem obtenir, entre elles, la resta ( f i - inici ) que ens diu quant ha trigat la pàgina a

carregar-se. Després incrementa les trameses i, si encara són meny s de 2 (és a dir, la

primera) retorna a "true" i permet que s'env iï el f ormulari. En tots els altres casos retorna a

"f alse".

Bé, ja tenim un f ormulari que ens inf orma més del que sembla i, de passada, hem v ist com

ev itar trameses duplicades. Això només és el principi. Més endav ant, quan tractarem les

Cookies, caldrà recordar que els seus v alors, que poden hav er estat dies guardats a

l'ordinador del client, també es poden assignar a camps ocults. Això ens permetria, per

exemple, f er un seguiment detallat de les v isites de cada usuari.

A l'exemple, en lloc d'env iar el missatge per correu, hem posat un camp de text on es

mostren els v alors dels camps ocults que s'env ien.

<script language="javascript">var inici = new Date()inici = inici.getTime()var fivar trameses = 0function noDupli(f1) { if (f1) { f1.pag.value = document.title f1.tmp.value = (fi - inici) + ' mil·lisegons' f1.url.value = location.href f1.sis.value = navigator.appName f1.ver.value = navigator.appVersion f1.pan.value = screen.width + 'x' + screen.height + ', ' + screen.colorDepth + ' bits' trameses++ if (trameses<2) return true } return false}function Fet() { fi = new Date() fi = fi.getTime()}</script></head>

<body onLoad="Fet()"><form name="form1" method="POST" enctype="text/plain" action="mailto:[email protected]?Subject=Info" onSubmit="return noDupli(this)"><input type="hidden" name="pag" value=""><input type="hidden" name="tmp" value=""><input type="hidden" name="url" value=""><input type="hidden" name="sis" value=""><input type="hidden" name="ver" value=""><input type="hidden" name="pan" value="">Nom: &nbsp <input type="text" name="nom" size="40" maxlength="60"><br><textarea name="missatge" rows="7" cols="48"></textarea><br><input type="reset" name="Reset" value="Esborrar les dades"> <input type="submit" name="Enviar" value="Enviar el missatge">...

2.- Afegir informació al formulari

L'exemple anterior v a una mica carregat de camps. La v eritat és que no cal. Podem f er el

mateix, f ins i tot de f orma més elegant, sense utilitzar camps ocults. Un f ormulari amb el

nom, el missatge i els botons és suf icient.

La f unció que comprov av a els duplicats - i omplia els camps ocults -, s'haurà d'encarregar

d'af egir aquesta inf ormació a continuació del missatge. Hem preparat un exemple que ho

f a, però ens hem oblidat d'escriure la solució.

No té massa gràcia af egir unes dades al cos del missatge, perquè l'usuari el podrà

v eure i, potser, no li agradarà. Si el nostre objectiu és recollir el màxim d'inf ormació

sobre els usuaris d'una pàgina, la millor opció és posar-hi alguna cosa senzilla i

gormanda, com ara una v otació o una enquesta. Podem recollir les dades en un camp

ocult.

El que es planteja - som en un mòdul avançat - és descobrir la forma de fer-ho. Un parell depistes: es basa en l'exemple anterior i es fa un bon ús de l'operador "+=".

3.- Accés restringit

Jav aScript, com a llenguatge que pot executar el client, no disposa d'opcions de seguretat

ni d'autentif icació d'usuaris. Qualsev ol pàgina que es carregui es podrà inv estigar, si més

no, a partir de la còpia que queda a la memòria cau.

Podem intentar que no es guardi amb un parell de directiv es <meta>: una que li diu

que la pàgina expira a l'instant i l'altra que demana que no es guardi. Però la pàgina

ja és al nav egador, i hi ha moltes maneres d'interceptar-la. Si v olem una autentif icació

segura hem d'utilitzar llenguatges que s'executin al serv idor.

Si la pàgina que v olem protegir no conté inf ormació v ital, o el nostre serv idor no permet

tenir executables, podem usar trucs que amaguin la contraseny a. En aquest cas f arem una

pàgina que demana la clau i no deixa accedir a la sev a codif icació.

Per això, hem de f er que l'arxiu s'obri en una f inestra nov a, sense botons ni menús, i que

v agi directament a demanar la clau. Si l'usuari l'encerta, carrega la pàgina protegida a la

f inestra base (opener) i tanca la nov a. Si no, presenta un missatge - que esborra el

contingut de la pàgina - i prepara un temporitzador per tancar la f inestra al cap de dos

segons.

Amb aquest mètode, la v ersió que queda a la memòria cau si han f allat els 'metas' dels

usuaris que no han encertat la clau i només conté el missatge "Clau incorrecta". Mirem el

codi, perquè la f unció és prou senzilla i s'explica tota sola. La clau és "dhtml".

<meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><script language="javascript">function clau() { var pwd = prompt('Clau d\'accés', '') if (pwd == 'dhtml') { opener.location.href = 'd108m7p4.htm' window.close() } else { document.write( '<h2>Clau incorrecta</h2>' ) setTimeout( 'window.close()', 2000 ) }}</script></head>

<body onload="clau()"><font face="Arial" size="3"><br><br><br><br><br><br><br>Escriviu la clau per accedir a la pràctica següent</font>...

4.- Desactivar el botó dret

Amb el botó dret del ratolí els nav egadors activ en un menú de context. Hi ha opcions com

ara "v eure el codi de la pàgina", "Guardar imatge", "Copiar f ons", "Crea una drecera", ... De

v egades, no ens interessa gens que els usuaris tinguin aquestes possibilitats.

Per exemple, tenim una imatge original que no v olem que es pugui guardar o no v olem que

es pugui v eure el codi. Doncs, obrim una f inestra sense menús i desactiv em el botó dret.

En aquest últim cas, els usuaris espav ilats obriran una nov a f inestra (amb Control + N o,

en nav egadors moderns, + U) i el v isualitzaran amb el menú. Més dif ícil ho tindran, en

canv i, si posem la pàgina que v olem protegir en un marc.

Hi ha div erses maneres de desactiv ar el botó dret del ratolí. Al segon exemple d'aquesta

pàgina n'hem utilitzat un. Ara prov arem un model dif erent. Es tracta, en tots dos casos,

d'interceptar l'ev ent onmousedown, env iar-ho a una f unció que comprov i, segons el

nav egador, amb quin botó s'ha f et clic, i que bloquegi la resposta.

L'exemple anterior es f a env iant una alerta. En aquest, més sof isticat, senzillament

retornem f als. Això sí, interceptem també l'ev ent oncontextmenu, assignem un v alor f als

al retorn (en lloc del menú de context) i, altre cop, retornem f als. Amb aquesta estratègia,

ni f unciona el botó dret, ni passa res, senzillament, la sev a f uncionalitat ha desaparegut.

Pàgines web dinàmiquesSGTI : Curs D108Mòdul: 7 Pràctica: 4

Interacció i comunicació > Interacció entre marcs

Si utilitzem només HTML, o f em les pàgines amb un editor (Dreamweav er), els marcs tenen

més inconv enients que no pas av antatges. Són f àcils de crear, però el seu comportament

és dif erent segons el nav egador. A més, és dif ícil mantenir-los sincronitzats i, és clar, al

cap d'una estona de f er clic en v incles i tornar enrera, ja no sabem on som.

Aleshores, quan hem d'usar marcs? Doncs, quan els av antatges superin els inconv enients,

o quan no hi hagi altre remei. Això sí, abans de començar hem de tenir clar que haurem de

dedicar molta atenció a la sincronització.

Algunes de les eines que hem disseny at per aquest curs es

basen en una estructura de marcs. En tots els casos resultav en

imprescindibles o, com a mínim, eren l'opció més ef ectiv a i amb

meny s complicacions.

A l'Inspector d'Objectes, per exemple, el marc superior conté els controls, el de la dreta

carrega la pàgina i el de l'esquerra l'analitza. La sincronització f alla quan l'usuari segueix un

v incle de la pàgina que s'analitza. El marc de l'inspector s'actualitza, però l'adreça de la

pàgina - al quadre del marc superior, un control "f ile" - no canv ia.

FerÍndex, en canv i, necessita un marc ocult per poder obrir les pàgines i extreure'n el títol.

Ull v iu amb aquesta tècnica: com que Jav aScript només pot analitzar pàgines carregades

en un nav egador, amb aquest truc aconseguim v eure-les i que no es noti.


Objecte window.frames : Array amb tots els marcs d'una f inestra.

Propietat frames.length : número de marcs que conté una f inestra.

Propietat parent : ref erència a la f inestra que def ineix una estructura de marcs.

1.- Crear l'estructura de marcs

Si es crea l'estructura de marcs en HTML és probable que les mides no siguin correctes en

algun dels dos nav egadors. Per tal d'ev itar-ho, podem usar v ariables i codi Jav aScript que

ens f acin les mides exactes per a cada nav egador. Aquí proposem observ ar l'estructura

que hem utilitzat a l'inspector d'objectes.

Un truc basat en l'estructura és el del f rame zero: un marc ocult (es v eu una ratlleta, si ens

hi f ixem bé) que s'utilitza com a f inestra "v isible per a la pàgina, inv isible per a l'usuari". Es

tracta de distribuir l'espai d'una f inestra de manera que un dels marcs tingui dimensions 0.

Ho hem d'utilitzar a l'eina FerIndex per tal de poder obrir les pàgines que analitza. No és

l'única estratègia, però és pràctica, ràpida i neta, perquè gairebé no es nota.

Sempre que f em una estructura de marcs cal recordar que les v ersions 4 de Netscape no

els actualitzen quan es redimensiona la f inestra, o bé ho f an malament. Amb Dreamweav er

es pot solucionar. Per això, anem al menú "Comandos" i seleccionem "Agregar/Quitar

reparación de cambio de tamaño de Netscape ...". Podem aprof itar l'espai per a scripts que

genera per inserir-hi les instruccions de correcció de mesures.

Al codi podem v eure un bocí del que ha escrit Dreamweav er en lletra gris.

<script language="javascript"></script>

<frame name="menu" src="menu.htm" scrolling="no"> <frameset cols="280,*" frameborder="1" framespacing="1"> <frame name="inspect" src="ajut.htm" scrolling="auto"> <frame name="pag" src="portada.htm" scrolling="auto"> </frameset></frameset><noframes> <body> <p>Aquesta pàgina utilitza marcs, i el vostre navegador no els pot mostrar.</p> </body></noframes>

2.- Referenciar marcs i objectes

En una estructura de marcs hi ha un document principal i div ersos f ills. Cada marc és una

instància de l'objecte window, amb totes les sev es propietats i mètodes. Normalment,

l'arxiu on es def ineix l'estructura no conté instruccions operativ es, només conté les de

creació dels marcs i, en tot cas, un bocí de codi sota l'etiqueta <nof rames>.

Per tal de manipular els marcs, el DOM proporciona l'objecte window.frames, un Array on

cada element és un objecte del tipus "window" que conté la pàgina d'un marc. Com tots els

Array s, podem ref erenciar els elements a partir del seu índex.

L'única propietat de l'objecte frames que no té window és length, que ens inf orma sobre el

número de marcs continguts en una f inestra. Amb aquest número, per exemple, podem f er

un bucle que el v agi recorrent i ens inf ormi sobre les característiques de cada marc.

Els marcs tenen un nom que s'assigna en el moment de la sev a creació. Des de la f inestra

principal ens podem ref erir a un marc pel seu nom. Des de cada marc, ens podem ref erir a

la f inestra principal utilitzant la propietat parent. Si, des d'un marc, ens v olem ref erir a

objectes d'un altre, ho hem de f er a partir de "parent" i hem d'usar l'índex o el nom del

marc:

parent.marc1.document.images[0].src = 'imatge1.gif ' ... o bé ...

parent.f rames[0].dcocument.f orms[0].nom.v alue = 'unNomQualsev ol"

A continuació tenim un exemple que mostra div erses possibilitats. Crearem una estructura

amb dos marcs, al 50%. Els anomenem "f 1" i "f 2". Els arxius que es carreguen també

tenen aquests noms per simplif icar-ho, però poden tenir-ne qualsev ol altre. Un cop hem

identif icat els marcs pel seu nom, el dels arxius no té cap importància.

<html><title>Exemple</title><frameset cols="50%,50%"> <frame name="f1" src="f1.htm"> <frame name="f2" src="f2.htm"></frameset></html>

Al marc de l'esquerra, arxiu f1.htm, f arem un f ormulari amb tres botons, i els def inirem

l'ev ent onClick. El primer botó carregarà la f unció posaNom, que és en aquest mateix

arxiu. El segon executarà la f unció "hola()" en el marc f 2, que encara no hem f et. El tercer

tornarà a carregar una f unció del seu propi arxiu, "obrePag()".

La f unció posaNom() rep un paràmetre, txt, i l'assigna a un camp de text en un f ormulari

de l'altre marc, que encara no hem f et. Per ref erenciar l'objecte utilitza la sintaxi d'índex:

parent.f rames[1].document.f orms[0].nom.v alue = txt

Hem dit que l'últim botó executa una f unció, obrePag(). Rep com a paràmetre una adreça,

url, i la utilitza per actualitzar el marc de la dreta. Utilitza la sintaxi del nom:

parent.f 2.location.replace( url )

Després, prepara un temporitzador que tornarà a carregar, també a la dreta, l'arxiu original,

f 2.htm. Com podem v eure, tots tres botons acaben actuant sobre el marc de la dreta, a

trav és de f uncions pròpies (botons 1 i 3) o, directament, "cridant" una f unció de l'altre marc

(botó 2). Això només és possible, ev identment, si sabem amb seguretat quina pàgina

contindrà.

<html><head><script language="javascript">function posaNom(txt){ parent.frames[1].document.forms[0].nom.value = txt}function obrePag(url){ parent.f2.location.replace( url ) tm = setTimeout( 'parent.f2.location.replace("f2.htm")', 2000 )}</script></head><body bgcolor="#CCDDFF"><form name="Form1"><h3>Actua sobre la dreta</h3><input type="button" value="Nom (camp)" onClick="posaNom('Un Nom')"><br><input type="button" value="Hola (funció)" onClick="parent.f2.hola('esquerra')"><br><input type="button" value="Obrir pàgina" onClick="obrePag('prova.htm')"></html>

Bé, només ens queda f er l'arxiu f2.htm, que es mostrarà al marc de la dreta. Aquest ha de

tenir, de moment, un camp i una f unció condicionats per l'arxiu anterior.

Al cos hi posarem un altre f ormulari amb tres controls. El primer serà el camp "nom" que,

com hem v ist, s'ha de poder actualitzar des de l'esquerra. El segon serà un botó que

engegui la mateixa f unció "hola()" que s'engegav a des de l'altre marc. Ara, però, és al

mateix arxiu i, per tant, s'ha de cridar d'una altra manera ... o no? Doncs, com v ulguem, si

ho escriv im com a l'altre, parent.f 2.hola(), també f uncionarà. La conclusió és ev ident.

L'últim control del f ormulari serà un altre botó, que f a una f eina, si més no, curiosa:

executa una f unció de l'altre marc. El que té d'especial és que la f unció actua sobre el

marc de la dreta, que és el mateix que conté el botó. De manera que un control de la dreta

li demana a una f unció de l'esquerra que actualitzi un altre control de la dreta. Com ho

v eiem?

Finalment, la f unció "hola()", que s'utilitza des de tots dos marcs, només f a una alerta a

partir del text que rep com a paràmetre. A hores d'ara ja queda clar que els controls de

f ormulari i les f uncions són accessibles des de tots els marcs. També ho són les v ariables

i tots els altres objectes, si utilitzem la ref erència correcta.

<html><head><script language="javascript">function hola(txt){ alert( 'Hola!\nEt saluda el marc: ' + txt )}</script></head><body bgcolor="#FFEEBB"><form name="Form2"><h3>Reacciona i actua</h3>Nom: <input type="text" name="nom"><br><input type="button" value="Hola (funció)" onClick="hola('dreta')"><br><input type="button" value="Nom (camp)" onClick="parent.f1.posaNom('Un Altre')"></html>


SGTI : Curs D108

Mòdul: 7

Interacció i comunicació > Projecte interactiu

Un cop hem tractat els ev ents i els comportaments, hem v ist la v alidació de dades delsf ormularis i hem prov at la interacció a la pròpia pàgina i entre marcs, ens podem plantejarun tipus de pàgines per al projecte que no siguin merament inf ormativ es, sinó que "f acincoses" en resposta a les accions dels usuaris i demostrin dominar la comunicació.

Preparem la pàgina "index.htm" de la carpeta "m7" de manera que contingui un botó o unv incle per obrir una nov a f inestra. La pàgina índex no anirà al projecte, però el contingut dela f inestra sí. Podem f er que s'obri directament des d'una pàgina del projecte, si hopref erim. En qualsev ol cas, el resultat d'aquest exercici ha d'anar en una f inestra creadades de Jav aScript, sense barres de menú ni botons ni adreça.

A la f inestra hi ha d'hav er un f ormulari que contingui, com a mínim, els camps: nom,adreça de correu i un quadre de text per a opinions. També els dos botons típics, peresborrar les dades i env iar el f ormulari. Hem de f er una f unció de v alidació que comprov ique cap d'aquests tres camps queda buit i que l'adreça de correu té un f ormat correcte.

El f ormulari ha d'env iar tota la inf ormació possible sobre elnav egador, l'entorn i el temps de càrrega en un únic camp ocult.Aquesta és una v ariació dels exercicis 1 i 2 de la pràctica 3. També hem de desactiv ar elbotó dret del ratolí per tal de dif icultar la v isió del codi f ont.

Com sempre, cal comprov ar que tot f uncioni correctament amb div ersos nav egadors.

És una web o és un programa?

Una de les tendències amb més èxit és aquella que intenta que les pàgines web siguin cadacop més útils i pràctiques, sense que això v ulgui dir, necessàriament, que s'hagi d'oblidarl'aspecte atractiu. I és que la gent nav ega a la recerca d'alguna cosa que l'interessa, i v oltrobar-ho ràpid i sense problemes.

La "usabilitat" d'una web - tècniques que f aciliten la f eina - implica un disseny senzill i,sobretot, comprensible a primera v ista. Si els usuaris v euen que necessitaran perdre tempsper entendre'n la interf ície, buscaran un lloc que els resulti més f amiliar.

Des d'aquesta perspectiv a, una web és un entorn on l'usuari treballa, i hem de f er que siguicòmoda i ef icaç, si v olem millorar el seu grau de satisf acció. Com un programa. Quins sónels que utilitzem habitualment, els de disseny espectacular o els que ens resolen elsproblemes?

El disseny , diuen, ha de ser com l'àrbitre en els esports: com meny s es f aci notar, millor.



SGTI : Curs D108

Mòdul: 8

Calaix desastre

Aquest mòdul f a un recull d'aquells temes que no han tingut una ubicació en els mòduls

anteriors, però, que també són prou interessants de conèixer per la sev a utilitat.

De ben segur que ens deixem moltes altres coses sobre DHTML i Jav aScript, aquí, però,

en f em un petit recull.

La pràctica 1 introdueix les galetes, f ragments d'inf ormació que la

pàgina desa en el nostre ordinador. La sev a utilitat és important ja

que permeten personalitzar una pàgina a les pref erències de l'usuari.

Segur que en el v ostre ordinador hi teniu desada alguna galeta. Mireu

dins de la carpeta 'windows/cookies' si f eu anar l'Internet Explorer, o

mireu el f itxer cookies.txt que hi ha al directori d'instal·lació del

Netscape, si f eu anar el Netscape.

La pràctica 2 mostra com es poden comunicar dues pàgines web mitjançant el pas de

paràmetres introduïts en l'adreça URL. Aquests paràmetres serv iran per crear interactiv itat

entre elles.

La pràctica 3 és una introducció a la metodologia a utilitzar quan es v olen crear aplicacions

Jav aScript complexes o programes extensos considerats com a aplicacions completes de

gestió, control, etc. (amb les limitacions pròpies del f et d'executar-se en un nav egador de

client) i tenir les tècniques de depuració disponibles per corregir errors de sintaxi i disseny .

Optimitzar la f eina f eta és el principal objectiu de la pràctica 4. El temps inv ertit per f er

una aplicació v àlida per a una pàgina ha de ser utilitzable per a d'altres pàgines que

realitzem en el f utur, són les llibreries de codi Jav aScript i f ulls d'estils reutilitzables. En

aquest cas, el millor és poder-ho desar en f itxers independents de l'aplicació que f em i

carregar-los quan sigui necessari.

En aquest mòdul:

Pràctica 1: Persistència de dades

Pràctica 2: Passar paràmetres

Pràctica 3: Fem aplicacions

Pràctica 4: Reutilitzar el codi

Exercic is: Pàgines amb memòria



SGTI : Curs D108


Calaix desastre > Persistència de dades

Alguna v egada heu estat v isitant una pàgina web que us ha reconegut i s'ha recordat de lesv ostres pref erències, manif estades en alguna v isita anterior? Per Internet es trobenpàgines que tenen aquesta habilitat.

Però, com s'ho f an per recordar aquesta inf ormació? La resposta està enles cookies, altrament dit, galetes.

Quin nom més curiós! Igual que altres conceptes d'Internet, aquest nom noté cap relació amb el que representa, però, ha estat acceptat per tothom.


Propietat document.cookie : Facilita el treball amb les cookies.Objecte Date : Objecte Jav aScript per treballar amb dates.Mètode toGMTString() : Retorna una cadena amb f orma de dataMètode setTime() : Estableix la data i hora d'un objecte Date.Mètode getTime() : Retorna la data i hora d'un objecte Date.Funcions escape() i unescape() : Codif iquen i descodif iquen els caràcters no ASCII.Funció replace() : Substitueix un tros de cadena de text per un altre.Funció split() : Descompon una cadena en un v ector separant-la pel caràcter separador.

1.- Concepte i creació de cookies.

Les cookies ens serv eixen per memoritzar dades d'una pàgina web entre dif erents sessionsde treball amb el nav egador.

Es poden def inir de dues maneres dif erents: Mitjançant una crida al serv idor HTTP imitjançant Jav aScript. En el primer cas, es f a utilitzant la directiv a Set-cookie: situada a lacapçalera de resposta HTTP originada per un programa CGI que s'executa al serv idor.L'altre mètode consisteix en la def inició local de la cookie mitjançant Jav aScript.

En aquesta descripció no es tractarà del cas de cookies def inides en el serv idor HTTP, jaque la sev a implementació requereix la creació de programes CGI situats en el serv idor, iaixò, no és l'objectiu d'aquest curs. En canv i, tot el que tractarem a partir d'aracorrespondrà al treball amb cookies mitjançant Jav aScript.

Una cookie consisteix en un parell nom=valor que es pot desar en l'ordinador client.IE desa aquests v alors dins la carpeta "cookies" i NN ho f a dins el f itxer "cookies.txt".

La f orma de f er-ho és mitjançant la propietat document.cookie. La sev a sintaxi general ésla següent:

document.cookie = "nom=v alor;expires=data;path=cami;domain=domini;secure";

nom : Aquest és el nom de la cookie. A aquest paràmetre se li assigna el valor de lacookie. És l'única dada imprescindible per crear la cookie.

expires : Aquest v alor estableix la data en f ormat GMT (Greenwich Mean Time) a partir dela qual la cookie deixarà de tenir v alidesa. Si no s'especif ica, es pren el v alor de la data ihora actual, per tant la cookie caducarà en tancar el nav egador. Habitualment s'acostuma aexpressar la data corresponent a un nombre de dies especif icat en crear la cookie.

path : Aquest v alor estableix una expressió patró que representa el camí on tindrà v alidesala cookie. Si no s'especif ica, agaf arà per def ecte el camí de la pàgina web que ha creat lacookie.

domain : Aquest v alor estableix una expressió patró que representa el domini en què tindràv alidesa la cookie. Si no s'especif ica agaf arà per def ecte el domini de la pàgina web quecrea la cookie.

secure : L'existència d'aquest paràmetre estableix que només es pot env iar la cookie sis'ha accedit a un serv idor segur per mitja del protocol HTTPS.

Exemples de creació de cookies:

- document.cookie = "Usuari=Joan Costa";Es crea una cookie de nom "Usuari" i v alor "Joan Costa". Com que no s'ha especif icat capaltre v alor, aquesta tindrà v alidesa mentre no es tanqui el nav egador i dins el domini i pathpropis de la pàgina web que l'ha creat.

- document.cookie= "Color = blue; expires=' Thu, 11-Aug-2002 12:30:00 GMT ' ";Cookie de nom Color i v alor blue, que tindrà v alidesa pel domini i path de la pàgina web quel'ha creat, mentre no s'hagi superat la data del 11-8-2002 a l'hora especif icada.

Les cookies també tenen en consideració l'usuari identificat en la sessió de Windowsactual. Si aquest usuari no coincideix amb el que ha creat la cookie, aquesta no tindrà capef ecte, encara que coincideixin els altres paràmetres.

S'ha de tenir en compte que la cookie desa per def ecte el camí i domini de la pàgina webque l'ha creat, això v ol dir que qualsev ol altra pàgina que s'hagi descarregat des del mateixcamí i domini també podrà tenir accés al contingut de la cookie i, per tant, llegir i escriure elseu contingut. Això pot ser molt útil per passar dades d'una pàgina web a una altra. Si esdesitja ampliar l'àmbit de pàgines on la cookie serà accessible, s'haurà d'introduir elcontingut corresponent als v alors domain i path.

Sempre que desitgem llegir el v alor d'una cookie, s'haurà d'utilitzar la propietatdocument.cookie, sense indicar cap assignació. Aquesta ens retornarà una cadenaf ormada pel conjunt de parelles nom=valor separades amb un ; de totes les cookies quecompleixen la condició de domini, path i data d'expiració del document que la sol·licita. Lacadena retornada s'haurà de tractar per obtenir els v alors indiv iduals.

Si es desitja esborrar una cookie s'ha de f er posant-li una data de caducitat anterior a ladata actual.

Tal com s'ha dit, és necessari treballar amb dates per establir la data de caducitat. Per aixòhem de conèixer bé el treball amb l'objecte Date. Si teniu algun dubte podeu consultar lapràctica 1 del mòdul 5. La data de caducitat s'ha d'establir en f ormat GMT, això és f àcild'implementar mitjançant el mètode toGMTString() de l'objecte Date que retorna unacadena de text amb aquest f ormat.

Per exemple, si desitgem obtenir la data en f ormat GMT, corresponent a 3 dies, a partird'av ui ho podem f er seguint els tres passos següents:

1 - Obtenim la data actual. data conté la data del sistema: data = new Date();

2 - Establim la data al v alor de la data actual més tres dies. Recordem que l'objecte Dateemmagatzema la data en f orma de mil·lisegons, per tant tres dies són: 3 dies * 24 hores/dia* 60 minuts/hora * 60 segons/minut * 1000 ms/s . data.setDate( data.getDate + 3 *24*60*60*1000);

3.- Obtenim la data en f ormat GMT: data.toGMTString();

Amb això obtindrem la cadena de text amb el f ormat GMT següent: DiaSem, DD-Mes-YY HH:MM:SS GMT.

El següent exemple ens mostra la creació i eliminació de les cookie's. S'ha implementatmitjançant la creació de la f unció crearCookie() perquè és el mètode més habitual i ensserv irà per a exemples posteriors.

S'ha eliminat la utilització dels paràmetres domain, path i secure, per simplif icar l'exemple iperquè són d'ús més específ ic i poc habitual, encara que la f unció és f àcilment modif icableper af egir aquests paràmetres si és necessari.

Si introduïm uns Dies de v ida negatius, la cookie serà esborrada. Si no s'indica cap Dia dev ida, la cookie solament existirà f ins que es tanquni totes les f inestres del nav egador.

Si s'indica un determinat nombre de Dies de v ida positius, la cookie tindrà v ida durant

aquests dies f ins la sev a caducitat. En aquest cas la cookie queda desada dins la carpeta"cookies" en el IE o dins el f itxer "cookies.txt" en el NN. Si no s'indica cap data, la cookiequeda emmagatzemada a la memòria i desapareix en tancar totes les f inestres delnav egador.

Observ eu també, com s'utilitza la f unció escape() per codif icar aquells caràcters que nosón ASCII, com per exemple, espais en blanc, accents, caràcters especials, etc. Aquestaf unció és necessària per codif icar els caràcters especials dins el v alor de la cookie.Posteriorment, en llegir la cookie, haurem de f er el procés inv ers amb unescape().

La f unció crearCookie() també la utilitzarem en els següents apartats.


<script language='JavaScript'> function crearCookie(pNom, pValor, pDiesCaducitat) { if (pNom != ' ') { var txt = pNom + '=' + escape(pValor); if (pDiesCaducitat != ' ') { var dataCad = new Date(); dataCad.setTime(dataCad.getTime() + pDiesCaducitat*24*60*60*1000); txt += '; expires=' + dataCad.toGMTString(); } document.cookie = txt; } }</script>

Dins el bloc <body>:

...<form name="form1"> Nom cookie: <input type="text" name="nom"><br> Valor: <input type="text" name="valor"><br> Dies de vida: <input type="text" name="dies"> <input type="button" value="Crear Cookie" onClick="crearCookie(form1.nom.value, form1.valor.value, form1.dies.value);"><p> <input type="button" value="Veure les Cookie per aquest document" onClick="alert(document.cookie);"></form>...

2.- Recollir les dades de les cookies.

Si una pàgina carregada en el nav egador té cookies a la sev a disposició, les pot obtenirmitjançant la propietat document.cookie. Aquesta ens retorna una cadena de text amb elsparells nom=valor de les cookies.

A l'exemple anterior, f ent clic sobre el botó "Veure les cookies ....", hem v ist quina f orma téla cadena que ens retorna. Aquesta està f ormada per un conjunt de parells nom=valor unitsper un punt i coma més un espai, de f orma similar a la següent:

nom1=v alor1; nom2=v alor2; nom3=v alor3; .......

Si desitgem obtenir el v alor d'una sola d'aquestes cookies haurem de tractar la cadena, és adir, descompondre-la en els dif erents parells nom=valor i posteriorment v erif icar si existeixel nom que busquem i obtenir el seu v alor.

En aquest apartat v eurem com analitzem aquesta cadena per obtenir el v alor desitjat d'unasola cookie.

Crearem una f unció de nom llegirCookie(). Passant-li com a paràmetre el nom de lacookie, ens ha de retornar el seu v alor, en el cas que la cookie existeixi, o bé, null en elcas que no existeixi.

També aprof itarem aquest apartat per crear una altra f unció més senzilla, però que tambéserà útil posteriorment: és la f unció esborraCookie(). Passant-li el nom de la cookie, ensl'esborrarà assignant-li la data corresponent al 1-1-1970.

La f unció llegirCookie() rep com a paràmetre el nom de la cookie a llegir. Si el nom delparàmetre pNom té un v alor, s'assigna a la v ariable dc el contingut de document.cookie. Sidc té una longitud superior a 0, es descompon aquesta v ariable en un v ector mitjançantsplit(). Aquesta descomposició crea un v ector, que també s'assigna a dc, on cada elementconté un parell nom=valor, ja que s'ha escollit com a element separador el ;.

Posteriorment, dins el bloc while(...), s'analitza cadascun dels elements del v ector dc.Cada element del v ector dc es torna a descompondre mitjançant split(), assignant el v ectorresultant a la v ariable parell, el caràcter separador, en aquest cas és "=".

El v ector parell constarà de dos elements, el nom i el valor, ref erits amb l'índex del v ector0 i 1 respectiv ament. Els noms corresponents a un índex i superior a zero, tindran af egit unespai en blanc al dav ant, que prov é de la cadena retornada per document.cookie. Aquestespai en blanc af egit s'elimina amb la f unció de cadena replace().

La f unció replace() cerca un patró dins la cadena i si el troba el substitueix per una cadena

nul·la amb ''. El patró és: /^ / . Aquest indica que cerqui un sol espai en blanc a partir delprincipi de la cadena. Si el troba, serà substituït per la cadena nul·la.

Quan parell[0] ja conté correctament el nom de la cookie, aquest es compara amb elparàmetre pNom. Si coincideixen s'assigna a la v ariable valor el contingut deparell[1],prèv iament es f a el unescape() per desf er la substitució de caràcters que no sónASCII.

Finalment, en acabar el recorregut pel v ector dc dins el bloc while(...)... es retorna alcontingut de la v ariable valor. Aquesta v aldrà null si no s'ha trobat la cookie o v aldrà elv alor de la cookie si ha estat trobada.

La f unció esborraCookie() f a el mateix que f èiem en l'apartat anterior quan v olíemesborrar una cookie. A la cookie indicada pel paràmetre pNom, li assigna un v alor de data, alparàmetre expires de la cookie, inf erior a la data actual. En aquest cas li assigna la data1-1-1970 determinat per dataCad=new Date(0), on s'ha utilitzat el constructor de Date ambun v alor inicial de 0 mil·lisegons.

Funcions a afegir dins el paràmetre <script> del bloc <head>:

<script language="javascript">function llegirCookie(pNom){ var valor=null; var parell; if (pNom!='') { var dc=document.cookie; if (dc.length > 0) { dc=dc.split(';'); var i=0; while (i<dc.length) { parell=dc[i].split('='); if (i!=0) parell[0]=parell[0].replace(/^ /,'');//elimina l'espai en blanc del principi. ++i; if (parell[0]==pNom) valor=unescape(parell[1]); } } } return valor;}

function esborraCookie(pNom){ var txt= pNom + '= null'; var dataCad = new Date(0); txt += '; expires=' + dataCad.toGMTString(); document.cookie = txt;}</script>

Afegir dins el paràmetre <form> del bloc <body>:

<input type='button' value='Llegir Cookie' onClick='llegirCookie(Nom de la cookie)'>

<input type='button' value='Esborrar Cookie' onClick='esborraCookie(Nom de la cookie)'>

3.- Exemple d'aplicació de cookies.

En aquest apartat f arem una aplicació d'ús de les cookies. Consistirà en crear una pàginaweb, que inicialment, sol·liciti a l'usuari el seu nom i l'idioma pref erit. Posteriorment mostraràun missatge personalitzat en aquest idioma. A més, també mostrarà el nombre de v egadesque hem v isualitzat la pàgina i la data de l'últim accés. La caducitat de les cookies serà de30 dies.

Disposarem, també, d'un botó auxiliar per esborrar totes les cookies i reiniciar l'exemplesense hav er d'esperar que caduquin les cookies.

Utilitzarem dos blocs amb codi Jav aScript, dins la secció <body > i dins la secció <head>. Elcodi del bloc <head> conté les tres f uncions descrites als apartats anteriors més una nov af unció de nom inicialitza(). Aquestes f uncions seran inv ocades des del codi Jav aScript delbloc <body >.

La f unció inicialitza() (línies 5-12) serv eix per inicialitzar les cookies en el cas que encarregar la pàgina, aquestes no existeixin. Les cookies a inicialitzar són 4: nom, idioma,comptador i dataUltimAcces. Les dues primers agaf en el v alor dels camps nom i idioma

del f ormulari form1 que es crea des d'el bloc <body >. Un cop inicialitzades les cookies, esrecarrega la pàgina amb la f unció reload() de la línia 11.

Dins el bloc <body > tenim el codi Jav aScript entre les línies 14-60, aquest codi s'executaimmediatament després de carregar la pàgina. El primer que f a és obtenir el v alor decadascuna de les quatre cookies (línies 15-18). Si alguna d'elles no existeix, retornarà null ala v ariable nomUsuari, idioma, comptador o dataUltimAcces corresponent. En cascontrari, aquestes v ariables contindran el v alor de la cookie.

A la línia 19 es v erif ica si cookie nom ha retornat null. Si és així, s'executarà el codi

d'inicialització entre les línies 20-27. En cas contrari, s'executa el codi de representació

(línies 29-52) del missatge personalitzat de la pàgina i el codi d'actualització de les cookies(línies 53-58).

El codi d'inicialització (línies 20-27) s'encarrega de treure per la f inestra un text inf ormatiumés un f ormulari que conv iden a introduir el nom i les pref erències respecte l'idioma. Uncop introduïdes aquestes dues dades, en prémer sobre el botó "OK!" s'inv oca la f uncióinicialitzacio() i es creen les cookies amb els v alors inicials.

El codi de representació del missatge (línies 29-52) és el que es mostra de f orma habitualen la majoria dels casos. En f unció del v alor de la v ariable idioma s'executa un sol dels tresblocs que el composen, línies 29 -36 per al català, línies 37-44 per a l'anglès, i línies 45-52per al f rancès. Conjuntament amb el text, es mostra el nom de l'usuari, el nombre dev isites personalitzades i la data i hora de l'última v isita, v alors obtinguts de les v ariablesnomUsuari, comptador i dataUltimaVisita.

Un cop s'ha mostrat el text inf ormatiu personalitzat, les línies 53-58 s'encarreguend'actualitzar les cookies. És necessari actualitzar aquests v alors perquè com a mínims'actualitzi la data de caducitat de les cookies. Aquest procés es f a rescriv int el v alor de lescookies amb crearCookie().

Per a les cookies nom i idioma (línies 53 i 54) es rescriu el mateix v alor, amb el qualsolament s'ha actualitzat la data de caducitat. En el cas de la cookie comptador (línia 55),s'hi rescriu el v alor de la v ariable comptador incrementat en una unitat, així, la propera v isitaes v eurà el comptador incrementat.

Per a la cookie dataUltimAcces és necessari determinar prèv iament el v alor de la dataactual i obtenir la cadena de data i hora en el f ormat apropiat (línies 56 i 57), el resultat esdesa a la v ariable dataHora. Per entendre les f uncions de tractament de dates i horespodeu consultar la pràctica 1 del mòdul 5 on es detallen específ icament .

Un cop dataHora ja conté el v alor apropiat, es rescriu la cookie dataUltimAcces a la línia 58.

Dins el bloc <body > i f ora del bloc de codi Jav aScript, s'introdueix la resta de codi HTML.En aquest cas solament hi ha def init un f ormulari que conté un botó per esborrar les

cookies. Aquest és un botó d'ús auxiliar, serv eix per esborrar totes les cookies amb laf unció esborraCookie() inv ocada per a cada cookie. D'aquesta f orma, en tornar a obrir lapàgina d'exemple, ens apareixerà el f ormulari d'inicialització i podrem f er prov es sensehav er d'esperar que caduquin les cookies.

Per observ ar el correcte f uncionament de l'exemple, s'ha d'obrir i tancar l'exemple múltiplesv egades, observ ant com s'incrementa el comptador, es mantenen la data, les pref erènciesd'idioma i nom d'usuari. Les prov es s'han de f er tenint la f inestra del nav egador oberta otancant totes les f inestres del nav egador, o tancant i tornant a obrir l'ordinador. S'ha detornar a comprov ar si f uncionen al cap d'uns quants dies.

El botó "Esborrar totes les....." solament s'ha de polsar quan es desitgin reiniciarmanualment totes les cookies sense esperar la sev a caducitat. Això és per f acilitar larealització de prov es de f uncionament.


1 <script language='JavaScript'> 2 ... Introduïu la funció crearCookie() ... 3 ... Introduïu la funció llegirCookie() ... 4 ... Introduïu la funció esborraCookie() ...

5 function inicialitzacio() 6 { 7 crearCookie('nom', document.form1.nom.value, '30'); 8 crearCookie('idioma', document.form1.idioma.options[document.form1.idioma.selectedIndex]. value, '30'); 9 crearCookie('comptador','1','30');10 crearCookie('dataUltimAcces',' ' ,'30');11 location.reload();12 }13 </script>

Dins el bloc <body> :

...14 <script language="JavaScript">15 var nomUsuari=llegirCookie('nom');16 var idioma=llegirCookie('idioma');17 var comptador=llegirCookie('comptador');18 var dataUltimAcces=llegirCookie('dataUltimAcces');

19 if (nomUsuari==null || nomUsuari=='null') {20 document.writeln('Hola, sembla ser que és el primer cop que accedeixes a aquesta pàgina<br>');21 document.writeln('Has d'omplir les següents dades per personalitzar-la.<p>');22 document.writeln('<form name=\'form1\'>');23 document.writeln('Introdueix el teu nom: <input type=\'text\' name=\'nom\'> <p>');24 document.writeln('Selecciona idioma: <select name=\'idioma\'> <option selected value=\'ca\'>Català<option value=\'an\'>Anglès <option value=\'fr\'>Francés</select>');25 document.writeln('<input type=\'button\' value=\' OK! \' onClick=\'inicialitzacio();\'>');26 document.writeln('</form>');27 }28 else {29 if (idioma=='ca') {30 document.writeln('Hola, ' + nomUsuari + '. ');31 if (comptador==1) document.writeln('És el primer accés que fas a aquesta pàgina. ');32 else {33 document.writeln('És l\'accés número ' + comptador + ' que fas a aquesta pàgina. ');34 document.writeln('L\'últim acces va esser el ' + dataUltimAcces + '.');35 }36 }37 if (idioma=='an') {38 document.writeln('Hello, ' + nomUsuari + '. ');

39 if (comptador==1) document.writeln('This is the first access that you do to this web. ');40 else {41 document.writeln('This is the access number ' + comptador + ' that you do to this web. ');42 document.writeln('The last access was on ' + dataUltimAcces + '.');43 }44 }45 if (idioma=='fr') {46 document.writeln('Salut, ' + nomUsuari + '. ');47 if (comptador==1) document.writeln('C\'est la première visite que vous faites à ce site. ');48 else {49 document.writeln('C\'est la visite numéro ' + comptador + ' que vous faites à ce site. ');50 document.writeln('La dernière visite était le ' + dataUltimAcces + '.');51 }52 }53 crearCookie('nom', nomUsuari, '30');54 crearCookie('idioma', idioma, '30');55 crearCookie('comptador', ++comptador, '30');56 var ara=new Date();57 var dataHora = ara.getDate() + '/' + (ara.getMonth()+1) + '/' + ara.getFullYear() + ' -- ' + ((ara.getHours()<10)?('0'+ara.getHours()):(ara.getHours())) + ':' + ((ara.getMinutes()<10)?('0'+ara.getMinutes()):(ara.getMinutes())) + ':' + ((ara.getSeconds()<10)?('0'+ara.getSeconds()):(ara.getSeconds()));58 crearCookie('dataUltimAcces',dataHora, '30');59 }60 </script>

61 <form name='form2'>62 <center>63 <input type='button' value='Esborrar totes les cookies' onClick= 'esborraCookie("nom"); esborraCookie("idioma"); esborraCookie("comptador"); esborraCookie("dataUltimAcces");'>64 </center>65 </form> ...

��gines web dinàmiques

SGTI : Curs D108


Calaix desastre > Passar paràmetres

Un dels principals problemes en el disseny amb HTML és l'aïllament de les pàgines, que f aque no puguin passar-se inf ormació. Bé, les pàgines sí que poden env iar dades, però no enpoden recollir i processar. Amb Jav aScript això té solució.

A la pràctica anterior hem v ist com podem guardar dades a les Cookies i recuperar-lesdesprés. Aquesta és l'única opció que tenim, en Jav aScript, per tenir dades persistentsentre sessions. Això no f unciona, és clar, si l'usuari ha desactiv at les Cookies.

De v egades, però, el que necessitem és env iar unes dades des d'una pàgina i rebre-les ala següent, sense risc. En HTML tenim dos mètodes per env iar dades:

- POST: s'env ien els camps d'un f ormulari, normalment, per correu electrònic. - GET: s'env ien les dades enganxades amb l'adreça, en f ormat URL.

Aquest últim és f àcilment manipulable a partir de l'objecte location, queconeixem des de l'inici del curs. Es tractarà, doncs, d'analitzar l'adreça iextreure'n les dades.

Si, f ins ara, hav íem après com interactuar entre objectes d'una pàgina, entre f inestresmares i f illes, i entre marcs, amb aquesta pràctica tancarem el cercle: aprendrem ainteractuar entre pàgines dif erents, que poden estar situades, f ins i tot, en serv idorsdif erents.


Funció escape() : codif ica una cadena en f ormat hexadecimal.Funció unescape() : descodif ica una cadena hexadecimal codif icada amb escape().Mètode substring() : retorna una subcadena a partir d'un punt d'inici i una longitud.Funció isNaN() : av alua una expressió i retorna "cert" si no és un número (is not a number).Funció parseFloat() : analitza una cadena i, si es pot, retorna un número.Mètode replace() : aplicat a una cadena, canv ia uns caràcters per uns altres.Expressió Regular : plantilla que s'utilitza per cercar patrons en cadenes.

1.- Passar un valor

En la declaració d'un f ormulari, si especif iquem el mètode GET, o no n'especif iquem cap, elbotó "submit" passa l'adreça, el signe "?" i els parells "v ariable=v alor". Sov int, però, l'únicque v olem passar és un v alor, que la pàgina receptora processarà i utilitzarà.

Tot i que podem utilitzar el mètode per def ecte, tal com v eurem al segon exemple, si lesnostres necessitats són mínimes podem escriure un codi més senzill. En tot cas, el v alor oels parells f ormaran part de l'adreça (location) que el nav egador env ia.

L'objecte location treballa amb URLs. Les adreces tenen aquesta estructura:

protocol :// host : port / pathname ? search # hash

Cadascuna d'aquestes és una propietat de location. Fixem-nos en search. S'utilitza perpassar paràmetres als programes (CGI) o pàgines: asp, php,,, i Jav aScript !!! Només calposar un interrogant (?) a l'adreça. La cadena que segueix és search.

Per tal d'env iar aquesta cadena, el nav egador "escapa" els caràcters no ASCII. La f uncióque els rebrà ho ha de prev eure per retornar-los (unescape) al seu f ormat original. Tambéha de tenir en compte que search comença al "?", i l'haurà de descartar. Per això, utilitzemel mètode substring(), que retorna una subcadena, començant per la posició especif icadael primer paràmetre i que té la longitud del segon o, si no l'especif iquem, f ins al f inal.

Necessitem, doncs, f er dues f eines: a la pàgina origen, una f unció que construeixi lacadena i la posi a la propietat location.href; a la pàgina destí, una línia que llegeixi l'adreça,descodif iqui la zona search i l'assigni a una v ariable.

Pàgina origen: passar<script language="javascript">function passar( url, param ) { location.href = url + '?' + escape( param )}</script></head><body><form name="form1"><input type="text" name="txt" value=""><input type="button" name="enviar" onClick="passar( 'pag2.htm', form1.txt.value )"></form>

Pàgina destí (pag2.htm): llegir<script language="javascript">var param = unescape( location.search ).substring(1)</script>

2.- Passar variables i els seus valors

A l'exemple anterior hem v ist com passar un v alor, però, i si el que v olem és passar unallista de v ariables amb els seus v alors? Doncs, en principi, la tècnica és la mateixa:enganxar a continuació del "?" i recollir-ho de la propietat location.search. Ambparticularitats.

El primer que cal saber és com es codif ica una cadena GET amb div ersos paràmetres i, siens hem f ixat en les adreces dels cercadors, segur que ja ho sabem:

(adreça) ? v ariable1=v alor1 & v ariable2=v alor2 & ... (Hem posat espais en blanc per llegir-ho millor, però no hi han d'anar).

La f unció que crearà l'adreça haurà de recollir - d'un f ormulari, un v incle o un altre lloc - unsv alors per af egir a la cadena. Les v ariables de cada parell, en canv i, les escriurà com aliterals. S'utilitzen com a ref erència "pactada", que el programa o pàgina receptorsutilitzaran.

També hem de tenir en compte que el que passem és una URL. En conseqüència, hi hauràmolts caràcters que no podrem utilitzar, com ara espais en blanc o accents.Af ortunadament, tenim dues f uncions que ho f aciliten, escape() i unescape(), ques'encarreguen de codif icar i descodif icar una cadena a f ormat hexadecimal, compatibleamb URL.

El que f arem és crear una cadena a partir de l'adreça de la pàgina. Primer li af egim '?'.Després, f em un v ector a base de partir la cadena de noms amb el mètode split() i, ambun bucle, af egim a la cadena el nom de cada v ariable, el seu v alor i el signe '&'. Finalment,esborrem l'últim signe de la cadena carreguem la pàgina amb la cadena.

Per tal d'assignar el v alor de les v ariables hem utilitzat la f unció eval(), que av alua unaexpressió, i, per assegurar que no hi ha caràcters estrany s, hem passat el resultat perescape(). A partir d'ara, podem utilitzar la f unció des de Jav aScript o HTML.

Pàgina origen: passar<script language="javascript">function pasParams( pag, noms ) { pag += '?' vect = noms.split( ',' ) for ( i=0; i<vect.length; i++ ) { pag += vect[i] + '=' + escape( eval( vect[i] ) ) + '&' } pag = pag.substring( 0, pag.length-1 ) location.href = pag}var v1 = "Això és un text"var v2 = 166.386</script></head>

<body><a href="javascript:pasParams( 'pag2.htm', 'v1, v2' )"><b>Enviar</b></a>

...

A la pàgina destí també hi haurà una mica de codi, que haurem de posar a la capçalera, demanera que puguem processar i utilitzar les dades rebudes des de l'inici.

En primer lloc, eliminem el signe d'interrogació de la cadena search, com a l'exempleanterior. Després, f em un Array a base de partir els paràmetres pel signe '&'. Acontinuació, f em un bucle sobre aquest Array , partim cada element pel signe '=' i assignema cada v ariable el seu v alor:

Per tal d'assegurar que cada v ariable rebrà v alors del tipus que espera, hem f et uncondicional: si el v alor no és numèric - isNaN( parseFloat( aVar[1] ) ) - hem d'af egir-hicometes, si ho és, no cal. És un sistema arriscat: si v olem passar paràmetres literals quecontenen números (p.ex. de telèf on o DNI), s'interpretarien com a numèrics. En aquestscasos ho hauríem de prev eure i escriure les línies de correcció de casos concrets.

Pàgina destí (pag2.htm): llegir<script language="javascript">var param = location.search.substring(1)aParams = param.split( '&' )for ( i=0; i<aParams.length; i++ ) { aVar = aParams[i].split("=") if ( isNaN( parseFloat( aVar[1] ) ) ) eval( aVar[0] + '="' + unescape( aVar[1] ) + '";' ) else eval( aVar[0] + '=' + aVar[1] + ';' )}</script>

3.- Enviar un formulari a la pròpia pàgina

Es tracta d'una v ariació de l'exemple anterior. En aquest cas, les pàgines origen i destí sónla mateixa. Aquesta és una tècnica utilitzada moltes v egades, i en podem v eure unexemple al cercador intern d'aquest curs.

L'únic que ens cal és tenir una mica d'ordre a l'hora de disseny ar els scripts:

1.- Si cal, declarem les v ariables a l'inici. Depèn de si passem només un v alor o parells.2.- Comprov em si, amb l'adreça, es reben paràmetres. Si és així, els assignem.3.- Com que sabem quants i quins paràmetres es reben, l'assignació serà més senzilla.

En aquest exemple utilitzem el mètode GET, establim com a acció (action) la pròpia pàgina iposem un botó "submit" que l'env ia. Així haurem v ist tres models. Val a dir que, tots tres("button" més f unció, v incle més f unció i GET) són v àlids, i l'elecció és qüestió de gustos.

L'av antatge d'aquest mètode és, per una banda, que podem usar "submit" en lloc de"button" (no cal def inir l'ev ent onClick) i, per l'altra, que ens estalv iem una f unció.

El mètode GET env ia parelles camp=v alor. Les v ariables, doncs, tenen el nom dels campsdel f ormulari. Els v alors s'env ien en un f ormat dif erent: en lloc d'espais s'utilitza el signe'+'. Això v a molt bé als CGIs, però, en el nostre cas, és un problema. El solucionemutilitzant el mètode de l'objecte String replace(), que permet canv iar uns caràcters per unsaltres. El primer paràmetre ha de ser una expressió regular. Què?

Una expressió regular és una mena de plantilla que s'utilitza per cercar patrons encadenes. Té una zona per def inir el patró i una pels modif icadors: / patró / modificadors.En el nostre cas v olem que es substitueixin tots els signes "+" per espais blancs. el patróserà \+ (usem l'antibarra per indicar que és un caràcter, no un operador) i el modif icador,"global":

/ \ + / g v ol dir: el caràcter "+", globalment.

L'altre modif icador habitual és /i, que v ol dir que s'ignorin majúscules i minúscules. Espoden escriure tots dos junts, /gi. En aquest exemple, però, no cal. Conèixer iaprendre totes les possibilitats de les expressions regulars és una tasca llarga i f eixugai, en tot cas, no f orma part dels objectius d'aquest curs.

Finalment, el codi que controla la recepció i assignació de paràmetres es basa en l'exempleanterior, però és més senzill - i meny s univ ersal - perquè sabem el què s'espera.

<html><head><title>Exemple</title><script language="javascript">var txt1 = '', txt2 = ''var param = location.search.substring(1)if (param>''){ aParams = param.split( '&' ) for ( i=0; i<2; i++ ) { aVar = aParams[i].split("=") eval( aVar[0] + '="' + unescape( aVar[1].replace( /\+/g, ' ' ) ) + '";' ) }}</script></head>

<body bgcolor="#EEEECC"><h3>Enviar paràmetres a la pròpia pàgina</h3><form name="form1" method="GET" action="m8p2_3.htm">Camp 1: <input type="text" name="txt1" value=""><br>Camp 2: <input type="text" name="txt2" value=""> <input type="submit" value="Enviar"></form><hr><h3>Els valors rebuts són:</h3><script language="javascript">document.writeln( 'Camp 1: ' + txt1 + '<br>Camp 2: ' + txt2 )</script></html>


SGTI : Curs D108


Calaix desastre > Fem aplicacions

La creació d'aplicacions complexes amb Jav aScript comporta l'ús d'una metodologiaespecíf ica. Si intentem abastar un problema complex sense seguir uns mètodes apropiatsens podem trobar desbordats i sense poder resoldre el problema.

La creació d'una aplicació complexa consta de dues f asesprincipals: el disseny i la depuració.

Abans de començar a escriure un programa extens ésnecessari dedicar un temps a pensar com s'ha de resoldre elproblema. L'enf ocament més apropiat és la programació

estructurada. Entendre els principis d'aquest tipus deprogramació és senzill: Div ideix i v enceràs. És a dir, f em elproblema global i complex en petits trossos més assequibles.

Dins de la programació estructurada hi ha dif erents f ormesd'actuar. El disseny descendent és la més utilitzada.

Un cop s'ha f et el disseny s'ha de passar a la implementació.Per això, haurem de codif icar els blocs disseny ats iexecutar-los. En aquesta f ase ens trobarem que sorgiranmúltiples errors i per solucionar-los s'hauran d'aplicar elsmètodes de depuració.

La detecció d'errors i la sev a resolució ens obligaran a ef ectuarun f eedback entre les f ases de disseny i depuració. El codil'haurem de repassar múltiples v egades f ins a obtenir-ne elresultat desitjat.

En aquesta pràctica v eurem els principals conceptes aplicables a les f ases de disseny idepuració d'errors. Per si mateixos no seran suf icients per poder-los aplicar a qualsev oltipus de problema, ja que és necessari disposar d' una certa habilitat i experiència en laprogramació, i això, solament s'aconsegueix amb el temps.

Conceptes de programació en aquest capítol

Concepte de Programació estructurada.Concepte de Disseny descendent.Tècniques de depuració del codi.

1.- La fase de disseny. Concepte de disseny descendent

La metodologia de disseny més acceptada dins la Programació Estructurada és la deldisseny descendent. A partir d'un problema complex, es desenv olupa en blocs operatiusenniuats que cada cop seran més concrets. Cadascun d'aquests blocs serà una f unció querebrà paràmetres i retornarà v alors.

A la v egada cada bloc es subdiv ideix en altres blocs que també seran f uncions que rebranparàmetres i retornaran v alors, i així successiv ament.

D'aquesta f orma s'aconsegueix passar d'un bloc inicial més abstracte a uns altres blocs enniv ells inf eriors enniuats, més concrets.

Vegem-ho millor amb un exemple:

Suposem que desitgem f er un programa que serv eixi per calcular la nota mitjana d'un grupd'alumnes.

De cada alumne tenim les sev es notes parcials i la ponderació dins un array amb la

següent estructura:

v ar dades = new Array (Grup; nNotes; pondNota1; pondNota2; pondNota3; .....nomAlumne1; nota1; nota2; nota3; ...nomAlumne2; nota1; nota2; nota3; ........);

Desitgem extreure la inf ormació d'aquest array de f orma que s'obtingui f inalment la notamitjana global de tot el grup.

A grans trets, el niv ell d'anàlisi més elev at i més abstracte constaria dels següents passos:

1. Llegir el nom del grup i posar-lo en una v ariable.2. Llegir el número de notes i posar-les en una v ariable.3. Llegir la ponderació de cada nota i posar-la en una v ariable-array .4. Obtenir la nota mitjana de tot el grup.5. Mostrar la nota mitjana de tot el grup.

El punt 4 representa un concepte molt extens, la sev a implementació s'ha de desglossar enapartats més senzills. Seria conv enient aïllar-lo i resoldre'l a part mitjançant una f uncióespecialitzada en aquesta tasca.

En un primer niv ell de concreció el punt 4 el podem div idir en:

4.1. Obtenir la nota mitjana d'un alumne.4.2. Acumular la nota mitjana de tots els alumnes.4.3. Repetir els passos 4.1 i 4.2 f ins a l'últim alumne.4.4. Div idir la suma acumulada de notes mitjanes pel nombre d'alumnes.4.5. Retornar la nota mitjana de tots els alumnes.

Tots els apartats 4.x indicats prèv iament seran una f unció que rebrà com a paràmetres elnúmero de notes per alumne i la ponderació de cada nota. Un cop ef ectuats els passoscorresponents, retornarà la nota mitjana de tots els alumnes.

L'apartat 4.1, també és complex i per tant, també el f arem més concret mitjançant unaaltra f unció més específ ica, amb les mateixes condicions que l'anterior.

En un segon niv ell de concreció el punt 4.1 anterior es pot div idir en:

4.1.1. Obtenir el nom de l'alumne4.1.2. Obtenir una nota de l'alumne i acumular-la a una v ariable.4.1.3. Repetir el pas anterior f ins a l'última nota.4.1.4. Retornar el v alor de la nota ponderada mitjana de l'alumne.

Finalment, el pas 4.1.2 anterior també el podem especif icar mitjançant una altra f unció enun niv ell de concreció més específ ic. Per tant, en un tercer niv ell de concreció, el pas 4.1.2es pot div idir en:

4.1.2.1. Obtenir una nota de l'alumne i multiplicar-la per la ponderació.4.1.2.2. Retornar la nota de l'alumne amb la ponderació.

Observ em que s'ha anat del més abstracte al més concret. És a dir, hem desglossat elproblema general en petits problemes, cada cop més assequibles. Cada niv ell de concrecióque s'aprof undeix està f ormat per una o més f uncions i cada f unció rep uns paràmetres iretorna un resultat.

Tot i que no se n'ha parlat f ins ara, aquest mètode és el que s'ha utilitzat en tot el curs.Però, per a problemes molt més complexos, aquest sistema es torna inef icaç. És enaquesta situació on es f a necessari aplicar els conceptes de la POO (ProgramacióOrientada a Objectes), que ja no s'explicarà aquí per la sev a gran extensió.

Les v ersions actuals de Jav aScript no implementen la POO completament (tot i queconstantment es treballa amb mètodes i propietats d'objectes) encara que mitjançant lapropietat prototype és possible crear models equiv alents a les classes de la POO.

2.- La fase de Depuració del codi

Un cop ef ectuada la f ase de disseny indicada a l'apartat anterior, és necessari conv ertircada niv ell de concreció en les f uncions corresponents mitjançant el codi Jav aScript iprov ar el seu f uncionament. És a dir, hem de codificar el disseny ef ectuat.

És en aquest moment que ens apareixen els errors, generalment inev itables quan el codiés mitjanament extens. Ara és quan hem de f er la depuració del codi. En aquesta f asetenim dos tipus d'errors: els errors de sintaxi i els errors de disseny.

Errors de sintaxi.

Els errors de sintaxi són els originats per la introducció incorrecta de les ordres. Aqueststipus d'errors ens els detecta el mateix nav egador i són deguts, generalment, a errades detecleig a l'hora d'escriure els comandaments o a errors per paritats incorrectes en escriure {} , ( ) o " ", etc. La f orma d'indicar l'existència d'un d'aquests errors és dif erent per IE o NN.

IE ens mostra el símbol a l'esquerra de la barra d'estat. En f er clic asobre del símbol apareix una f inestra amb el número de línia i el tipus d'error.

NN ens mostra el text a la barra d'estatdel nav egador. Llav ors, hem d'escriure el text 'javascript:' a la barra d'adreces delnav egador i ens apareixerà una f inestra amb la indicació del número de línia que haprov ocat l'error i el tipus d'error.

Un cop sabem el tipus d'error i número de línia hem de mirar de trobar l'error a la líniaindicada i solucionar-lo. Aquest pas pot ser complex, ja que a v egades l'error no es troba enla línia indicada sinó en una línia anterior (per exemple, obrir unes cometes i no tancar-les, oun parèntesi, etc.). També es pot donar el cas que s'hagin produït múltiples errors. Enaquesta situació, és aconsellable solucionar el primer error i tornar a executar. Moltesv egades els següents errors són conseqüència del primer de tots.

Errors de disseny.

Un cop hem solucionat tots els error de sintaxi, hem de comprov ar si el nostre programa f ael que n'esperem. Si no és així, v ol dir que tenim errors de disseny . Aquests tipus d'errorssón dif ícils de localitzar i, generalment, es f a necessari ef ectuar una anàlisi del codi pas apas. Els llenguatges de programació conv encionals disposen dels programes debugger odepuradors que permeten ef ectuar una anàlisi detallada del f uncionament del programa.

La f orma de depurar el codi per trobar els errors de disseny pot ser mitjançant "xiv atos" omitjançant el depurador.

Els "xiv atos" consisteixen en trossos de codi af egits dins el codi a depurar per mostrar,estàticament (aturant l'execució del codi) o dinàmicament (sense aturar l'execució del codi)el v alor de v ariables en punts determinats de la seqüència d'execució.

El "xiv ato" estàtic utilitzat habitualment és el mètode alert() i el dinàmic més habitual és labarra d'estat (window.status).

El següent exemple de codi correspon a la f unció eliminaBlancsExtrems() utilitzada almòdul 7, pràctica 2, apartat 1. S'hi ha introduït un error de disseny intencionadament (s'hasubstituït la condició cadena.charAt(0)==' ' per cadena.charAt(1)==' ' dins el primer while).Aquest error prov oca que no s'eliminin tots els espais en blanc inicials quedant-ne sempreun.

Mitjançant tres xiv atos temporals implementats amb alert() podem f er el seguiment pas apas de l'ev olució de la v ariable cadena i determinar en quin pas f unciona malament. Un copdetectat l'error de disseny i solucionat, els xiv atos s'hauran d'eliminar.

En executar el codi següent, observ arem com el "Xiv ato 1" s'activ a una v egada meny s queel nombre d'espais en blanc introduïts al principi. Això ens ha de f er v eure que dins aquestwhile hi ha un error que prov oca que sempre quedi un espai sense eliminar al principi.

function eliminaBlancsExtrems(cadena){ while (cadena.charAt(1)==' '){ alert('Xivato 1: Eliminació blancs inicials de la cadena:\n\'' + cadena + '\''); cadena = cadena.substring(1,cadena.length); } while (cadena.charAt(cadena.length-1)==' ') { alert('Xivato 2: Eliminació blancs finals de la cadena:\n\'' + cadena + '\'');

cadena = cadena.substring(0,cadena.length-1); } alert('Xivato 3: Resultat final:\n\'' + cadena + '\''); return cadena;}

La utilització de la barra d'estat ens pot serv ir per implementar un "xiv ato" que ens mostril'estat d'algunes v ariables d'un programa o bé el pas per determinats llocs del programa def orma dinàmica, és a dir, sense hav er de parar l'execució del programa. El següentexemple és el mateix que l'anterior, amb el mateix error.

En aquest cas, no s'atura l'execució del codi, però, a la barra d'estat del nav egador ensindica cada cop que passa per l'interior d'un dels blocs while i al f inal v eiem com ha quedatla cadena introduïda. Per cada espai eliminat al principi apareix un símbol ' * ' i per cadaespai eliminat al f inal apareix un símbol ' + '.

Podem observ ar com el nombre de v egades que passa pel primer while és sempre unameny s que el nombre d'espais introduïts a l'inici de la cadena. Per tant, es dedueix queaquesta part de codi no f unciona correctament com a conseqüència de l'error de dissenyque hi hem introduït intencionadament.

A l'igual que l'exemple anterior, un cop detectat i solucionat l'error, s'han d'eliminar els"xiv atos" introduïts.

function eliminaBlancsExtrems(cadena){ while (cadena.charAt(1)==' '){ window.status += " * "; cadena = cadena.substring(1,cadena.length); } while (cadena.charAt(cadena.length-1)==' ') { window.status += " + "; cadena = cadena.substring(0,cadena.length-1); } window.status += " Resultat: '" + cadena +"'"; return cadena;}

3.- Altres opcions de depuració.

En aquest apartat comentarem lleugerament dues utilitats interessants per ef ectuar ladepuració de codi: el provador de codi incorporat a les eines d'aquest curs i un depurador

f et en Jav a per Netscape.

El provador de codi que tenim en aquests curs és molt útil per prov ar petits blocs de codiabans d'incorporar-los dins el programa. Per utilitzar-lo, es tracta d'introduir el bloc de codien el quadre de text, mitjançant l'escriptura directa o bé amb copiar i enganxar i prémersobre el botó "Prov ar Script". Posteriorment v eurem una f inestra amb el resultat del'execució del codi. Podem ef ectuar modif icacions en el codi f ins a obtenir el resultatdesitjat.

Una altra opció per ef ectuar la depuració és la utilització d'un programa depurador, al'estil del que s'utilitza en altres llenguatges tipus C/C++, Pascal, Visual Basic, etc. Aquestdepurador l'of ereix Netscape i solament f unciona en aquest nav egador. A més, ésimprescindible tenir disponible el Jav a per al nav egador (compte, el NN6.x no el portaincorporat per def ecte i s'ha de descarregar de la web per instal·lar-lo).

Aquest depurador el podeu trobar a l'adreça http://dev eloper.netscape.com/sof tware/jsdebug.html, disponible per a v àries v ersions del nav egador NN. Per si no hi f os, aquí enteniu una de les primeres v ersions, la v ersió Jav aScript Debugger 1.1 per a NN 4.0 osuperior.

Per utilitzar-lo l'hem de descomprimir dins una carpeta i amb el NN obrir el f itxer"jsdebugger.html" . Automàticament s'executa un programa Jav a que of ereix les opcions dedepuració.

A la f inestra del nav egador NN s'ha d'obrir la pàgina

HTML que conté el codi Jav aScript que v olemdepurar. Aquesta f inestra serà la que utilitzarem perexecutar el codi. Posteriorment, dins la f inestra deldebugger hem d'obrir la mateixa pàgina HTML.Automàticament quedaran identif icades les parts decodi Jav aScript dif erenciant-lo del codi HTMLmitjançant una barra lateral de color groc.

En el tros de codi seny alitzat amb la barra lateralpodrem indicar el punts de parada de l'execució(breakpoints). Quan executem el codi dins la f inestradel nav egador NN corresponent als llocs on hi hagiun breakpoint, aquest s'aturarà i ens permetràef ectuar la v isualització del v alor de les v ariables, executar pas a pas, etc.

S'ha de tenir en compte que el depurador que tenim disponible aquí reconeix lesinstruccions del NN4. Per a d'altres nav egadors superiors de Netscape és necessaridescarregar el depurador corresponent si desitgem que es reconeguin les nov esprestacions aportades. Si el que v olem depurar és codi que no implementi objectes propisd'un determinat nav egador, aquest depurador ens serà perf ectament v àlid.

Les dues eines indicades permeten més opcions que les que s'han comentat. Però, aquí noés possible descriure-les completament. Amb la pràctica es v an descobrint totes les sev espossibilitats.


SGTI : Curs D108


Calaix desastre > Reutilitzar el codi

Bé, aquesta és l'última pràctica del curs i segur que ens hem deixat molts aspectes sobreDHTML i Jav aScript sense comentar o aprof undir. Entendre i aprendre un llenguatge no ésel mateix que dominar totes les sev es possibilitats. Això requereix molt de temps, potserany s, f ins i tot hi ha qui pensa que no s'acaba mai.

Sigui com sigui, tenim la base suf icient per donar un gir espectacular ales nostres pàgines i continuar aprenent. Ara, el que toca és serpràctics i v eure com podem rendibilitzar al màxim el que sabem f er i elque anirem incorporant. Tots els exemples d'aquesta pràctica sóncandidats a f ormar part de moltes pàgines.


Propietat prototype : permet af egir, esborrar o modif icar propietats i mètodes d'un objecte.Comportament onerror : determina què s'ha de f er si es produeixen errades.Mètode sidebar.addPanel() : af egir una adreça als pref erits (Netscape 6+, Mozilla)Mètode external.AddFavorite() : el mateix, però amb Internet Explorer.

1.- Enllaçar arxius externs

Si v olem utilitzar bocins de codi en div ersos llocs, el més pràctic és que els guardem enarxius i els enllacem a les pàgines. Això, que f em per f orça amb les imatges, els sons, elsv ídeos o el Flash - tots són bits - ho podem f er també amb arxius de text.

Un script contingut en un arxiu s'enllaça utilitzant l'etiqueta <script> amb el modif icador src

assignat a l'arxiu. També hi podem af egir el tipus o el llenguatge utilitzat:

<script language="Jav aScript" type="text/jav ascript" src="arxiu.js"></script>

Si l'arxiu enllaçat només conté f uncions - sense codi que s'hagi d'executar mentre esllegeix -, podem f orçar que es v agi carregant "de f ons", mentre es v a llegint la pàgina,utilitzant el modif icador defer. Així accelerem la càrrega de la pàgina.

<script defer language="Jav aScript" ty pe="text/jav ascript" src="arxiu.js"></script>

Per enllaçar un arxiu de def inició d'estils utilitzem l'etiqueta <link> amb l'arxiu assignat ahref. A més, def inim la relació, el tipus i el medi:

<link rel="sty lesheet" href="pantalla.css" media="screen" type="text/css">

L'etiqueta <link> pot tenir altres utilitats i altres modif icadors. Els nav egadors no en f an ús,però no es descarta que els utilitzin en f utures v ersions. Alguns cercadors, en canv i, sí queels poden utilitzar per crear una mena de "mapa del lloc". Alguns d'aquests modif icadorssón: target (f inestra destí), href lang (idioma), charset (conjunt de caràcters), ...

El modif icador "rel" pot tenir, al seu torn, div ersos v alors: start, prev , next, help, glossary ,contents, copy right, f ontdef , alternate, ... De tots els possibles, els nav egadors utilitzenl'últim, alternate, per especif icar un f ull d'estils alternatiu. Amb això i alguns scriptspodríem, per exemple, f er pàgines personalitzades. Aquest és un tema "d'última f ornada",massa extens per ser tractat aquí. Això sí, sabem que hi és i, a partir d'ara, el trobaremcada cop en més pàgines.

Com a curiositat, i també com a component útil, tenim un arxiu, styleswitcher.js, queproporciona tota la funcionalitat per utilitzar fulls d'estils alternatius. El seu autor és un jovebritànic, Paul Sowden. Més informació a la seva web: http://idontsmoke.co.uk

2.- Llibreries

Alguns llenguatges de programació av ançats utilitzen llibreries. Es tracta de col·leccions def uncions organitzades que s'enllacen de f orma dinàmica - només les que es necessiten -amb el codi que escriv im, en el moment de la compilació, per generar els executables.

Jav aScript no es compila i no disposa de llibreries. Però podem crear, organitzar i guardararxius amb les f uncions més comunes, de manera que, quan les necessitem, només enscalgui enllaçar-les amb el f ont, o "copiar i enganxar" a les nostres pàgines.

De f et, la creació de llibreries no està limitada al Jav aScript. Podem f er-ne també de f ullsd'estils, d'estructures HTML o, com v am f er al primer mòdul, d'estructures de carpetes. Totallò que puguem tornar a necessitar, ho podem guardar i considerar una llibreria.

Com que aquestes col·leccions, amb el temps, poden anar creixent, és f onamental teniruna bona organització i molta claredat. Això sí, si ens dediquem a inserir comentaris al propicodi, ocuparem un espai i un temps de càrrega innecessaris. És pref erible acompany arcada carpeta amb un arxiu de text que inclogui explicacions sobre el seu contingut.

Pel que f a als scripts, els podem escriure com v ulguem, prov ar, rectif icar, ... Un copacabats - hem d'estar segurs que ja no els modif icarem més -, hauríem de f er que ocupinel mínim espai. Per això, guardem la f unció en el seu f ormat original (amb comentaris, sical) i en f em una còpia. Podem anomenar els originals, per exemple, "xxxx.ori" i les còpies"xxxx.js".

A la còpia, substituïm els noms de les v ariables, els deixem només amb una lletra,eliminem els espais innecessaris i canv iem els salts de línia pel signe ";" (punt i coma).Queda com una botif arra de signes, dif ícil de llegir. És el més semblant a una compilació.

Com a exemple, f em una f unció per f ormatar els milers. Rebrà un número (amb o sensedecimals), el conv ertirà en cadena, separarà enters i decimals, partirà els enters en grupsde tres - començant per la cua - i ens tornarà la cadena amb els milers separats per punts iels decimals per una coma.

Primer hem escrit la f unció amb v ariables normals. Un cop prov ada, les hem canv iadesper v ariables d'una lletra (ho podem v eure al codi) i, f inalment, hem tret els espais. Laf unció ha passat dels 523 by tes inicials als 232 f inals, és a dir un 45% del que ocupav a. Amés, el codi resultant és més dif ícil d'interpretar i, en conseqüència, té meny s interès per ala pirateria.

Com hem escrit la funció (amb variables d'una lletra):<script language="javascript">function formatMil(x) { x += '' var a = x.split( '.' ) var n = a[0] var l = n.length var c= '' if (parseInt(n) + '' == n) { while (l>3) { c = "." + n.substr( l-3, 3 ) + c n = n.substr( 0, l-3 ) l = n.length } if (n.length>0) c = n + c if (x.indexOf( '.' )>0) c += ',' + a[1] } return c}</script>

Funció preparada per formar part d'una llibreria:function formatMil(x){x+='';var a=x.split('.');var n=a[0];var l=n.length;var c='';if(parseInt(n)+''==n){while(l>3){c="."+n.substr(l-3,3)+c;n=n.substr(0,l-3);l=n.length}if(n.length>0)c=n+c;if(x.indexOf('.')>0)c+=','+a[1]}return c}

3.- Noves funcionalitats per a vells objectes

Els llenguatges orientats a objectes - Jav a, C++ - basen la sev a herència en classes. Elsobjectes Jav aScript, en canv i, utilitzen l'herència basada en prototips. Els constructorscreen instàncies basades en les propietats i mètodes def inits al prototip dels objectes.

Tots els objectes tenen la propietat prototype, que permet af egir, esborrar o modif icarpropietats i mètodes de l'objecte original, de manera que les nov es instàncies els heretin.Això ens permet, per exemple, atorgar als objectes nov es f uncionalitats.

Af egirem quatre mètodes nous a les cadenes (objecte String). Són típics d'altresllenguatges, de manera que molts programadors hi estan acostumats. Els dos primers,left(n) i right(n), retornen un bocí de la cadena, per l'esquerra o per la dreta, amb lalongitud que indiquem. Utilitzen el mètode substr() (també podem escriure "substring"), queja coneixem.

El següent mètode, trim(), elimina els espais en blanc que hi pugui hav er a l'inici i/o la f id'una cadena, utilitzant una expressió regular. L'últim mètode, rep(n), retorna una cadena abase de repetir els caràcters de què està f ormada, el número de v egades queespecif iquem.

De passada, v eurem una nov a manera de declarar mètodes i f uncions, recomanada pelW3C, l'organisme que regula els estàndards d'Internet:

Objecte.prototype.metode = function( paràmetres ) { ... instruccions ... }

Aquests quatre mètodes f uncionen. Recordem, però, que si els v olem incorporar en f ormade llibreria, hauríem d'eliminar abans els espais que sobren.

<script language="javascript">String.prototype.left = function(n) { return this.substr( 0, n )}String.prototype.right = function(n) { return this.substr( this.length - n, n )}String.prototype.trim = function() { return this.replace( /^\s*(\b.*\b|)\s*$/, '$1')}String.prototype.rep = function(n) { var s = '', t = this.toString() while (--n >= 0) s += t return s}</script>

4.- Control d'errades

Amb les errades passa una cosa curiosa: sempre n'hi ha. Quan es mostra el missatge queproporciona el nav egador, f a mal ef ecte. En canv i, si el missatge és personalitzat, lanostra reputació com a programadors millora. Doncs, bé; com que no sempre podemev itar-les, almeny s, aprof item-les.

L'exemple següent mostra un mecanisme per inf ormar sobre les errades, molt simple.L'ideal seria incloure-hi un f ormulari i un botó, amb el prec que es premi per inf ormar-nossobre les incidències. Això sí que és donar-li la v olta a la truita!

Per començar, desv iem les errades cap a una f unció: window.onerror = eAf egir. Acontinuació declarem tres Array s que contindran, respectiv ament, el missatge, l'adreça i lalínia de l'errada. El nav egador passa aquests paràmetres a la f unció de f orma automàtica.

La f unció receptora, senzillament, af egirà elements a cada Array amb els v alors rebuts.Per això s'utilitza la propietat length, que és l'índex de l'últim element. La f unció retorna"true" i, com ja sabem, s'ev ita que s'engegui el comportament per def ecte.

Farem encara una altra f unció que mostri l'inf orme. Crearem una f inestra on escriurem,amb l'ajut d'un bucle, els v alors dels tres Array s. Finalment, tanquem el document de laf inestra. Això és el mínim. Com ja hem dit, aquí s'hauria de donar bona impressió i demanara l'usuari que ens inf ormi sobre les errades. Podem aprof itar per incloure-hi altresinf ormacions, que ja hem v ist als exemples del mòdul anterior (mòdul 7, pràctica 3,exemples 1 i 2).


SGTI : Curs D108

Mòdul: 8

Calaix desastre > Pàgines amb memòria

Ja som a l'últim exercici del curs, que tracta dels continguts de les pràctiques d'aquest

mòdul, però, heu de procurar que siguin adaptables per al v ostre projecte. Si ho considereu

conv enient, podeu af egir altres f uncionalitats que pugueu necessitar, mantenint sempre els

mínims que es demanen aquí.

Abans de començar modif icarem la pàgina index.htm que teniu dins la carpeta m8 i hi

introduireu un enllaç, que ens porti a la primera pàgina de l'exercici.

Exercici

Consisteix en la realització de dues pàgines HTML, la segona serà enllaçada des de la

primera.

Fer una pàgina que recordi el nom de l'usuari i la data de l'últim accés. En el primer accés a

la pàgina, si les cookies no existeixen, s'ha de sol·licitar el nom a l'usuari. Posteriorment,

s'han de desar les cookies corresponents amb un temps d'expiració elev at.

En els propers accessos a la pàgina, hem de mostrar una salutació personalitzada i la data

de l'últim accés a la capçalera de la pàgina. La resta de la pàgina pot contenir inf ormació

pròpia del v ostre projecte.

Com a element auxiliar, per f er prov es, af egirem un botó que permeti esborrar les cookies

creades per aquest document (aquest botó s'haurà d'eliminar quan incorporeu el contingut

d'aquest exercici al v ostre projecte).

La pàgina ha de disposar d'un altre botó. En f er-li clic, ha d'obrir una segona pàgina que rebi

com a paràmetres mitjançant GET el nom d'usuari, la data d'últim accés i la url des d'on

s'ha cridat (location.href ) i també els mostri a la capçalera de la pàgina.

L'objectiu consisteix que un conjunt de pàgines (en aquest exercici, solament dues) d'un

mateix lloc web, mostrin constantment el nostre nom, el darrer accés i d'on v enim.

D'aquesta f orma es produeix l'ef ecte com si les pàgines haguessin estat creades

personalitzades per a nosaltres.

Si al cap d'un temps es torna a v isitar el mateix lloc web, pel f et de mostrar el nostre nom

directament amb inf ormació personalitzada, serà més impactant per a l'usuari.

Les pàgines han d'estar f ormatades mitjançant els mateixos estils CSS. Tots els estils

CSS i el codi Jav aScript no han de f ormar part de les pàgines directament, sinó que han

d'estar inclosos i s'han d'enllaçar adequadament, mitjançant f itxers externs amb extensió

.css i .js .

Adapteu aquestes pàgines d'exercici i el f ull d'estils perquè puguin ser v àlides per al v ostre

projecte.

Trucs, consells i receptes

Aprof iteu les f uncions disponibles a la pràctica 1 per treballar amb cookies. Introduïu

aquestes f uncions directament al f itxer .js. Us podran serv ir per a altres aplicacions com si

es tractés de f uncions de llibreria.




SGTI : Curs D108

Recomanacions per al projecte

El projecte ha de serv ir per sintetitzar els nous coneixements adquirits durant el curs i a la

v egada, utilitzar-los en la realització d'una aplicació web que pugui ser útil per a la nostra

tasca docent o personal.

La correcta realització del projecte, conjuntament amb els exercicis dels mòduls, ens

permetrà f inalitzar satisf actòriament el curs i disposar de la certif icació corresponent.

El projecte ha de ser personal i inèdit.

El treball sobre el projecte comença amb la proposta del tema al tutor al f inal del mòdul 5.

La realització d'aquesta proposta ha de seguir les indicacions que es donen en aquesta

pàgina. A partir del mòdul 7, els exercicis que es realitzaran s'han d'orientar per f ormar part

del projecte.

A grans trets, el projecte ha de reunir les següents característiques.

La interactivitat entre l'usuari i la web. Hem v ist al llarg del curs múltiples exemples

on l'usuari "controla" el que desitja v eure, el nostre projecte n'ha de ser un bon

exemple.

La presentació ha de ser entenedora i agradable per l'usuari i s'ha de deduir

ràpidament la sev a utilitat. D'aquesta manera ev itarem que sigui rebutjada per

l'usuari en no poder-la entendre.

La uniformitat en els estils s'ha d'aconseguir mitjançant un f ull d'estils comú a

totes les pàgines.

La reutilització també és imprescindible. Per exemple, si f em una aplicació per

mostrar les f otos del v iatge de f inal de curs, el curs següent també hem de poder

utilitzar la mateixa aplicació canv iant únicament les imatges, descripcions i estils

que podran estar def inits en un únic arxiu de text. Hem de f er que tot el codi i

estructura de les pàgines es puguin tornar a aprof itar gairebé sense modif icar-les.

La globalitat dels continguts. S'ha de procurar utilitzar la majoria dels continguts

estudiats durant el curs. Com a mínim hem d'implementar algun dels conceptes

corresponents a cadascun dels blocs temàtics del curs. A més, han d'estar

contextualitzats amb la resta d'elements de la web.

En la valoració del projecte es tindrà en compte que incorpori el màxim de solucions

possibles mitjançant Jav aScript i DHTML. Sempre que sigui possible i contextualment

justif icable, s'han d'aplicar els conceptes descrits en aquest curs. Si algun apartat es pot

f er amb HTML o amb Jav aScript, seleccionarem pref erentment l'opció de Jav aScript.

L'aplicació web ha d'ésser compatible amb els principals nav egadors (Netscape Nav igator,

Mozilla, Internet Explorer). Si alguna part no és possible compatibilitzar-la, ho hem de

detectar, i si s'escau, mostrar alguna altra opció alternativ a que tingui la mateixa

f uncionalitat. Hem d'ev itar que apareguin errors per incompatibilitat, ja que desconcerten a

l'usuari i donarien una mala impressió del nostre treball.

Exemples de projectes:

A continuació s'exposa alguns exemples de projecte. No és obligatori que el triem d'entre

aquesta llista, tot i que també són opcions v àlides. La sev a descripció ens serv irà per

donar-nos una idea de com pot ser el nostre projecte.

Calendari de curs: Aplicació web que mostra un calendari, amb opció de selecció

anual, mensual, setmanal i diària, i on cadascun dels dies indiquen els principals

ev ents que habitualment són programats des del principi de curs (reunions

periòdiques de tutors o equips docents, dates d'av aluació, períodes de v acances i

f estius, etc.). Les dades dels ev ents s'han de trobar en un únic f itxer, de tal manera

que f aciliti qualsev ol canv i amb agilitat i f acilitat.

Notes alumnes: Aplicació web que permeti mostrar les notes dels alumnes que hi

ha desades en un únic f itxer de dades. Introduint una dada identif icadora de

l'alumne ha de mostrar la llista de qualif icacions parcials obtinguda en una

determinada assignatura.

Qüestionaris: Aplicació web que mostra un conjunt de preguntes tipus test,

generades aleatòriament d'entre un conjunt ampli que es troba desat dins un únic

f itxer i conv ida a seleccionar les respostes correctes. El resultat s'ha d'env iar al

correu electrònic del prof essor i/o s'ha de mostrar directament sobre la pantalla de

l'usuari indicant la v aloració obtinguda.

Àlbum d'imatges: Aplicació web per mostrar múltiples imatges, classif icades i

comentades, corresponents als ev ents habituals del centre, com v iatges f i de curs,

f estes escolars, activ itats, etc. La relació d'imatges i els estils que s'han d'aplicar

s'ha de trobar ref erenciada en un f itxer, que serà l'únic a modif icar si s'ha de crear

un nou àlbum.

Automatitzar la revista escolar: Es tracta de crear l'estructura (arxius .js i .css)

que ens permetin editar div ersos números d'una rev ista escolar o web del centre

canv iant, únicament, el contingut de les pàgines. Això signif ica que, tant els estils,

com la disposició dels elements, els menús i el sistema de nav egació han de ser

reutilitzables sense f er-hi, pràcticament, cap modif icació. Ho podem acompany ar de

div ersos f ormularis, amb v alidació, que permetin els usuaris posar-se en contacte

amb els editors de la web per demanar inf ormació o expressar opinions.

Durant la f ase de creació del projecte, aquest ha d'estar penjat dins una carpeta de nom

"projecte" situada dins l'espai web f acilitat per la SGTI per a la realització del curs. En

aquest espai, el tutor podrà f er el seguiment del projecte i v eure'l per poder atendre les

consultes. La ubicació f inal del projecte acabat també es f arà en la mateixa carpeta.

La carpeta "projecte" s'ha d'hav er creat seguint les directrius indicades en les pràctiques 1,

2 i 3 del mòdul 1 i la sev a pàgina principal d'accés s'ha d'anomenar "index.htm". A la

pàgina principal del directori arrel del nostre espai web també hi ha d'hav er un enllaç que

ens porti f ins al projecte (conjuntament amb els enllaços als exercicis dels mòduls), tal com

està explicat a l'exercici del mòdul 1.

Recomanacions

Per la realització del projecte és important acompany ar-nos d'una bona eina d'edició web.

Dreamweav er ens pot ser útil, principalment per f er les maquetacions de les pàgines i per

editar text amb gran extensió.

En canv i, per crear i prov ar el codi Jav aScript són més útils els editors de text

conv encional o el Dreamweav er amb l'opció de "Mostrar v ista código". El codi Jav aScript

s'ha de prov ar en petits blocs i en f itxers apart. Ens podem ajudar amb les tècniques dedepuració explicades a la pràctica 3 del mòdul 8. Quan ja hem comprov at el correcte

f uncionament, l'incorporem a la pàgina web corresponent.

Per f acilitar la reutilització de les pàgines hem de f er que el seu contingut sigui independent

de la pàgina contenidora. Podem crear un f itxer de nom dades.js que contingui un array i/o

v ariables globals amb dades com imatges, textos, ev ents, etc. i després els enllacem a la

pàgina contenidora tal com s'explica als apartats 1 i 2 de la pràctica 4 del mòdul 8. Amb

els estils també f arem una cosa semblant.

Si hem separat adequadament les dades de les pàgines contenidores, aconseguirem la

màxima reutilització, ja que en properes modif icacions solament f arà f alta canv iar les

dades i els estils que estaran en f itxers separats.

Proposta

A l'hora de presentar la proposta, hem de f er una pàgina web amb aquestes dades:

Identificació. Nom i cognoms, adreça de correu, títol de la web i tema.

Descripció. Resum dels continguts, breu.

Esquema. Seccions, pàgines i relació entre elles.

Components. Aquesta és la part més important. Hem d'explicar quins tipus de

components i recursos de cada tecnologia pensem utilitzar, per què, i com.

Interfície. Més que l'aspecte gràf ic, interessa explicar la lògica i la f uncionalitat, com es

lliguen els div ersos components i quines estratègies utilitzem.

Calendari del projecte

E v e n t D a t a

Proposta dimarts, dia 28 de gener de 2003

Exercicis del mòdul 7 (al projecte) dimarts, dia 11 de febrer de 2003

Exercicis del mòdul 8 (al projecte) dimarts, dia 25 de febrer de 2003

Revisió i seguiment dimarts, dia 25 de març de 2003

Lliurament i fi dimarts, dia 8 d'abril de 2003


Guia del curs

L'objectiu és conèixer els llenguatges de la web - HTML, css i Jav aScript -, que ens han depermetre f er o adaptar pàgines per tal que siguin més interactiv es i dinàmiques.

El curs s'organitza en 8 mòduls, de 6 hores cadascun, més 12 hores addicionals per acabarel projecte, en total, 60 hores. Cada mòdul consta d'una presentació, quatre pràctiques iexercicis. A cada pràctica hi ha, a més dels conceptes, div ersos exemples amb solucions.

1.- Coneixements previs

Per seguir aquest curs s'han de tenir unes destreses av ançades en l'entorn Windows,sobretot, amb l'explorador: crear, esborrar i moure carpetes i f itxers; retallar i enganxar,instal·lar i conf igurar programes, ... Conv é hav er f et el curs sobre Windows i, encara millor,el de xarxes. És interessant, tenir pàgina web pròpia i/o mantenir la pàgina del centre.

També hem de dominar l'editor de pàgines Dreamweav er i tenir coneixements suf icientssobre HTML. Si no els tenim, abans de continuar hauríem de f er una bona repassada delscursos D72 i D98 sobre Disseny i Creació de Pàgines Web.

Si es coneixen altres llenguatges de programació, millor. Naturalment, també hem de sabernav egar per Internet, env iar correu electrònic i trametre f itxers al serv idor. El curs ensresultarà més f àcil si tenim, a més, algunes habilitats. La capacitat d'estructurar i organitzardades i materials resulta imprescindible. També, una bona lògica i un xic de meticulositat.

2.- Requeriments tècnics

L'ordinador ha de tenir instal·lat i ser capaç d'executar l'editor Dreamweav er i, com a mínim,un parell dels nav egadors més populars: Microsof t Internet Explorer, Netscape Nav igator oMozilla. Tots han de poder executar Jav aScript i tenir les cookies activ ades.

Tot i que DHTML no està lligat a cap plataf orma, el curs planteja els exemples basant-se enel sistema operatiu Windows, que hi ha a la majoria de centres, i dóna per suposat quetenim connexió a Internet i un espai al serv idor de la XTEC.

3.- Interfície del curs

Sistema de navegació:

Doble, a l'inici i a la f i de cada pàgina. Quan el cursor se situa sobre una opció de menú, esmostra un missatge amb el títol de la pàgina. A la zona superior, el logotip del curs ésun v incle amb la portada. Al peu de la pàgina hi ha un botó per tornar al principi.

Totes les opcions es mostren sobre la mateixa f inestra del nav egador, excepte la pàginad'eines, que s'obre en una f inestra nov a, i l'índex-cercador, que crea una f inestra al margedret de la pantalla. Els resultats dels exemples s'activ en amb un botó i es mostren en unaf inestra tipus "pop-up", superposada a la pàgina.

Índex i cercador:

El curs disposa d'un índex amb cercador intern que permet localitzar ràpidament qualsev olconcepte. S'activ a des del botó Índex del menú de cada pàgina. Si no hi ha cap condicióde cerca establerta, es mostra tot el temari. Quan es f a clic sobre un v incle, la pàgina destísubstitueix la que teníem a la f inestra principal del curs.

Per localitzar una paraula, l'escriv im al quadre de text i f em clic en el botó "Cerca" opremem Intro. El sistema només localitza paraules: si n'escriv im més d'una, mostrarà lespàgines que en continguin alguna. Si no troba res, es f a una segona cerca, més imprecisa.

Eines:

Hi ha algunes eines, f etes específ icament per a aquest curs, que podem carregar f ent clicsobre el botó Eines de la barra de menús. El seu objectiu és doble: per una banda, tenenuna utilitat pràctica que v eurem al llarg del curs. Per l'altra, s'han disseny at utilitzant nomésDHTML i Jav aScript, raó per la qual poden ser objecte d'estudi.

Versió per imprimir:

La interf ície detecta automàticament quan s'env ia algun document a la impressora, demanera que adapta les f onts i elimina els elements de nav egació. Cada pàgina té un botód'impressió.

Significat de les icones:

Informació. Documentació sobre el contingut que s'està tractant a les pàgines.

Mans al teclat. Treball que l'alumnat ha de realitzar seguint les propostes guiades.

Qüestions. Problemes plantejats i resolts a les pràctiques.

Exercicis. Problemes plantejats que ha de resoldre l'alumnat.

Atenció. Trucs i suggeriments complementaris a la documentació i a les pràctiques.

Dreamweaver. Inf ormació o pràctiques sobre l'editor.

Imprimir. Env iar a la impressora la v ersió imprimible de la pàgina actual.

4.- Sintaxi dels llenguatges

Tot i que utilitzarem l'editor Dreamweav er, aquest curs enseny a a programar. Percomençar, el nostre niv ell en HTML ha de ser bo, és a dir, que coneixem la majoria de lesetiquetes, sabem el que f an i com s'utilitzen.

Es dóna per suposat que hem utilitzat estils amb el Dreamweav er i també algunes de lesf uncions Jav aScript que incorpora, de manera que estem f amiliaritzats amb els signes queutilitzen. A continuació en f em un resum.

4.1.- HTML

És un llenguatge de marques, basat en etiquetes, que crea contenidors per situar-hi bocinsd'inf ormació. La mateixa paraula serv eix per indicar que comença un contenidor i, amb unabarra al dav ant, que s'acaba: <body > ... contingut del cos ... </body >.

Un contenidor pot tenir, al seu torn, altres contenidors i, aquests, uns altres. L'únicacondició és que l'últim en obrir-se sigui el primer en tancar-se. Les etiquetes poden tenirmodif icadors que especif iquen algunes característiques.

HTML és insensible a l'ús de majúscules i minúscules. Dreamweav er codif ica sempre enminúscules, que són més f àcils de llegir. Aquest curs segueix el mateix criteri.

4.2.- CSS

Els f ulls d'estils css són un af egit que permet manipular els elements d'una pàgina def orma més acurada que HTML. Es basen en la def inició de característiques d'aquestselements. Podem redef inir contenidors propis de HTML (body , a, td, img, ... ) o crear estilnous. S'utilitzen sempre lletres minúscules, excepte en els codis de colors.

Cada estil comença i acaba amb unes claus { }. A dins, les div erses propietats s'escriuenseparades per punt i coma ( ; ) amb el f ormat: estil { prop1 : v alor1 ; prop2 : v alor2 ; ... }

Els estils personalitzats comencen per un punt ( . ) quan són genèrics (s'apliquen alscontenidors d'una classe), o per un coixinet ( # ) si es ref ereixen a una etiqueta indiv idual.

4.3.- JavaScript

Jav aScript és sensible a l'ús de majúscules i minúscules, de manera que Nom i nom sóndues v ariables dif erents. Com a llenguatge de programació té moltes més f uncionalitatsque els altres dos i, en conseqüència, una sintaxi més complexa.

On posem els scripts?

1.- En línia: <a href ="jav ascript: alert( 'Hola!' )"> ... Si les instruccions són prou curtes espoden associar a elements HTML, escriv int la paraula "jav ascript" seguida dels dos punts.

2.- A la pròpia pàgina, entre les etiquetes <script language="Jav aScript"> i </script>. Aquí,com en el cas següent, al lloc concret on s'hagin d'executar o, si no, al <head>.

3.- En un arxiu extern: en aquest cas, l'arxiu no ha d'incloure les etiquetes anteriors. Des dela pàgina s'enllaça escriv int: <script language="Jav aScript" src="arxiu.js"></script>.

Comentaris:

Un comentari és un text que escriv im per clarif icar el codi i que el nav egador no executarà.Així quan el tornem a mirar, l'entendrem millor. Els podem f er de dues maneres:

1.- // (doble barra) comentari que ocupa només una línia, o un bocí.

2.- ./* aquesta combinació indica que comença un comentari, que pot ocupar més d'unalínia i, en conseqüència, hem d'indicat quan s'acaba */

Delimitadors:

1.- Delimitació de sentències: Per separar unes instruccions de les altres, tots elsnav egadors entenen el salt de línia (Intro) com a delimitador. Ara bé, el signe punt i coma (; ) és el delimitador predeterminat en molts altres llenguatges, i Jav aScript l'ha adoptat.Podem usar qualsev ol dels dos per separar instruccions, o tots dos alhora.

2.- Delimitació de blocs: S'utilitzen les claus { } per indicar els límits un blocd'instruccions, que es tracta com una unitat. Una f unció comença i acaba amb aquestesclaus. També un bucle o un condicional. Si un bloc de codi té només una instrucció no calposar les claus:if ( i == 0 ) document.writeln( 'No hi ha res per mostrar' ). Els blocs es poden enniuar, demanera que dins d'un bloc n'hi pot hav er un altre.

3.- Delimitació de literals: Es tracta de v alors constants o v ariables. No cal delimitar elsnúmeros i v alors lògics: 125, 3.1416, f alse. En canv i, sí que s'han de delimitar lescadenes de text: 'Hola, dia', "Adéu, nit". Podem usar cometes simples (apòstrof ) o dobles,tot i que és un bon costum usar les simples per al Jav aScript i les dobles per al codi HTML:document.write( '<a href ="arxiu.htm">Carregar un arxiu</a>' );

Si, en algun moment, la cadena que ja v a entre cometes n'ha d'incloure unes altres oun apòstrof , podem usar l'antibarra \ per indicar que el que escriv im a continuacióf orma part del literal i no pas de la instrucció: document.write( 'Cadena que incloul\'apòstrof ' );

4.- Ús de parèntesis ( ): Tenen dues utilitats: Primer, com en el llenguatge habitual imatemàtic, indicar en quin ordre s'han d'executar les operacions: ( ( 6 + 4 ) / 2 ) - 3 ) dóna2. També serv eixen per indicar els paràmetres d'una f unció: alert( 'Hola món' ).

5.- Llistes d'elements: Podem utilitzar la coma ( , ) per separar llistes d'elements, perexemple, en la declaració de v ariables: v ar n = 0, i = 0, x = 99;. També per separarelements d'un v ector (Array ): v ar aLaboral = new Array ( 'dilluns', 'dimarts', 'dimecres','dijous', 'div endres' );

6.- Índex d'un element: Els claudàtors [ ] s'utilitzen per identif icar un element d'unacol·lecció, objecte o Array . El primer element és el zero [0]. En el cas anterior, aLaboral[3]és 'dijous' i document.images[0], la primera imatge d'una pàgina. L'índex no ha de serf orçosament un número. Com v eurem al llarg del curs, els identif icadors poden f er la

mateixa f eina:document.images[ 'primera' ] també v al, si hav íem escrit <img name="primera" ... >.

7.- Delimitació d'objectes: El punt ( . ) s'utilitza per indicar jerarquia, és a dir, que unobjecte, propietat o mètode f orma part d'un altre que té un status superior o f a decontenidor (llegit de dreta a esquerra): document.f orms[0].nom.v alue indica el v alor delcamp nom del primer f ormulari contingut al document.

5.- Tutoria

Cada participant tindrà un tutor o tutora que l'orientarà en el seu treball. Podem f ormular lesconsultes i preguntes que calgui per correu electrònic. D'aquesta manera també podràdemanar orientacions, suggeriments o recomanacions per desenv olupar el projecte.

La persona responsable de la tutoria f arà un seguiment personal del procés de cadaparticipant en base als exercicis. Les pràctiques es poden trametre a la carpeta delserv idor, tot i que no és imprescindible, excepte quan s'especif ica expressament.

6.- Projecte

A partir del mòdul 7 haurem de començar a treballar en un projecte f inal, l'elaboració d'unaweb, on posarem en pràctica els coneixements del curs. Aquest és l'element av aluadordef initiu per obtenir el certif icat.

La web del projecte ha de ser d'interès educatiu, lliure de motiv acions comercials. Elcontingut es regeix per la mateixa normativa que les pàgines personals i les webs decentres hostatjades en el serv idor de la XTEC. El contingut de les pàgines ha de seroriginal. Si s'utilitzen imatges o textos aliens, cal citar la f ont. Les imatges o textos citatsno poden superar mai el 10% de l'obra. El projecte és un treball personal i no es pot f er enequip.

El calendari estableix una data per al lliurament del projecte i una altra per al lliuramentd'una v ersió rev isada. Cal entendre que el projecte ha d'estar enllestit a la primera data.Només si el tutor considera que s'han d'ef ectuar modif icacions perquè no es compleixenels requisits, el podrem corregir i lliurar-lo la data termini de la v ersió rev isada.

7.- Calendari

Vegeu calendari de l'activitat.

dhtml jav ascript css


Eines i recursos

Aquestes eines ens poden ajudar en la realització del curs.

Eines

Provador de codi JavaScript. [obrir]

Permet escriure i prov ar el codi dels scripts. També resulta útil per v eure com f uncionen

els scripts agaf ats d'Internet, abans de guardar-ne una còpia. Cal marcar el codi a la pàgina

origen i prémer Control+C (Copiar). Després, ens situem al quadre d'addició, premem

Control+V (Pegar) i el prov em. Si el codi conté un "onload()", s'haurà d'actualitzar la pàgina.

FerÍndex: generador d'índex [obrir]

Si tenim una carpeta amb pàgines numerades (p.e.

pag01.htm, pag02.htm, ... ) aquesta eina genera una

pàgina amb l'índex. Per això, v a obrint els arxius i en

memoritza el nom i el títol. El codi que genera (HTML i

Jav aScript) es pot editar després amb Dreamweav er.

Incorpora un prov ador de codi amb f ull d'estils.

Inspector d'objectes JavaScript. [obrir]

El nav egador crea, per a cada pàgina, una estructura

jeràrquica d'objectes (dades i accions), anomenada

Document Object Model (DOM). Jav aScript pot

manejar el DOM. L'inspector mostra el seu contingut i

organització. Molt útil per v eure les dif erències entre

nav egadors i les possibilitats de cadascun.

Recursos

Referència JavaScript 1.3 de Netscape:[http://dev eloper.netscape.com/docs/manuals/js/client/jsref /index.htm]

La web dels creadors de l'inv ent of ereix una ref erència completa sobre cadascun dels

elements del llenguatge. En anglès, és clar. Ep! l'adreça és d'Internet, i pot canv iar.

Cerca a Google: [google.com]

Al món hi ha milers de pàgines!

nota: aquest document és una còpia en format pdf del curs ... · pàgines web dinàmiques sgti :...

Documents