8
8. JavaScript

Els objectius de la vuitena lliçó són:

Activitat 8.1. Funcionament bàsic de JavaScript

JavaScript és el germà menor del llenguatge Java. S’utilitza molt en la creació de pàgines web per aconseguir que aquestes siguin mésdinàmiques. JavaScript està basat en scripts que s’introdueixen en les etiquetes d’una pàgina web per produir els comportaments que desitja el seu creador. No cal saber programar amb aquest llenguatge per poder utilitzar de forma gratuïta els molts scripts que es troben en pàgines web. Només cal saber on posar-los dins del codi font del document. Les possibilitats que té el llenguatge JavaScript són amplíssimes i s’utilitzen molt en la Xarxa.

A vegades aquests scripts es troben en un fitxer extern amb extensió.js (de JavaScript), i llavors cal escriure una trucada a la capçalera del document on volem que funcioni:

<Script src ="cercadors"> </script>

Però en aquesta lliçó comentarem diversos scripts de JavaScript que es troben incrustats en el mateix document. El primer d’ells s’utilitza molt en pàgines web i consisteix en obrir una finestra d’una mida i característiques concretes en prémer un botó. Part del codi ha d’estar a la capçalera del document, delimitat per les etiquetes <head> de tancament i d’obertura:

< script language ="JavaScript">
<! -
abre_ventana funció () { obert ("EXEMPLES /index2.htm","Finestra","width = 500, alçada = 400, barres de desplaçament = yes, toolbar = no"); } //-> < /script >
 

Amb la primera expressió indiquem que el llenguatge de scripts utilitzat és JavaScript. Després s’introdueix una funció que anomenemabre_ventana i que consisteix en obrir (open) una finestra d’una mida determinada (500 píxels d’ample per 400 d’alt) que, a més, tindrà disponibles les barres de desplaçament (Scrollbars = yes). Aquesta funció tindrà efecte quan l’usuari premi el botó que s’ha introduït en una altra part del document. Dins de l’etiqueta del botó ha d’haver, per tant, una crida a aquesta funció, la qual cosa s’aconsegueix d’aquesta manera:

<Input type ="button"name ="finestra"value ="Pàgina del Monstre"onclick ="abre_ventana ()">

En prémer el botó (esdeveniment onClick), cridem a la funció abre_ventana definida a la capçalera del document. Vegem el botó:

Activitat 8.2. Activitat nº8: Exemples d’scripts

Activitat 8.2.1. Finestra d’alerta

Anem a fer ara una senzilla activitat que ens il·lustra les possibilitats de JavaScript a la creació de pàgines web. Es tracta d’introduir unscript al nostre document perquè aparegui una finestreta donant les gràcies a l’usuari quan premeu el botó Enviar de l’enquesta. El script ho incloem dins de la capçalera (<head>) de l’arxiu monstre.html perquè el navegador el llegeixi res més carregar el document:

<Script language ="JavaScript">
<! -
function gràcies () { alert (’Gràcies per enviar els teus comentaris’); } //-> </script>

Després, hem d’introduir la crida a la funció"gràcies"des del formulari, és a dir, quan l’usuari prem el botó Enviar s’origina l’esdeveniment onsubmit, que cal incloure dins l’etiqueta del formulari (<form>) i que consisteix que apareixerà una finestra d’avís (alert) amb una frase d’agraïment:

<Form action ="mailto: avaler3@fresno.pntic.mec.es"method ="POST"
enctype ="text /plain"name ="Formulari"onsubmit ="gràcies ()">

Quan l’usuari ompli el formulari i premi el botó Enviar, sorgirà un quadre de diàleg semblant a aquest:


 

Activitat 8.2.2. Menú desplegable

Un script molt utilitzat a Internet és el menú desplegable, que pot contenir opcions com ara les adreces de les seccions més importants d’una pàgina web concreta o les adreces d’altres pàgines d’Internet. S’utilitza generalment per estalviar espai dins d’un document i oferir a l’usuari una forma ràpida d’arribar a alguns continguts d’un lloc. Un exemple podria ser el següent:


 

Anem a crear un menú desplegable o llista d’opcions que contingui la direcció del nostre arxiu de fotos i les tres direccions de les pàgines que hem considerat com enllaços d’interès. El següent codi, que correspon al menú desplegable, el podem incloure en qualsevol part del nostre document, és a dir entre les etiquetes <body> d’obertura i tancament.

<Form name ="buscar">
<select name ="llista"size ="1">
<option value ="coleccion.html"> La meva col·lecció de fotos </option>
<option value ="http: //alirburia. 8m.com"> Halloween.com </option>
<option value ="http://www.halloween.com"> Alirburia </option>
<option value ="http://www.museoceramadrid.com"> Museu de cera de Madrid </option>
</select>
<input type = valor"botó"="Anem"onclick ="cerca ()">
</form>

Dins del codi del botó hem escrit, com es veu més amunt, la crida a aquesta funció utilitzant l’esdeveniment onClick (onClick ="cerca ()"), que ocorre quan l’usuari fa un clic amb el ratolí sobre un objecte.

I a la capçalera de la pàgina (<head>) hem de col·locar el següent script perquè funcioni aquest menú desplegable en prémer el botóAnem :

<Script language ="JavaScript">
<! -
la funció de cerca () {
ubicació = document.buscar.lista.options [document.buscar.lista.selectedIndex].value;
}
//->
</script>

Aquest menú també ho podem crear amb el nostre editor Kompozer tal com ho vam fer a la lliçó dels formularis. Aquesta vegada cal escriure l’adreça d’Internet en el camp on s’ha d’especificar el valor.

El botó ho crearem amb el menú Insereix -> Formulari -> Definir botó, i triem el tipus Botó.Ppero ara caldrà introduir el codi de crida a la funció que està a la capçalera. Per a això cal prémer el botó Edició avançada ; llavors s’obre la finestra de Editor avançat de propietats i premem la pestanya Esdeveniments de JavaScript. A la part inferior dreta triem l’atribut onclick del menú deplegable i escrivim la paraula recerca en el camp de text del valor ; automáticament s’escriurà dins del quadre de la pestanya.


 

Només queda un petit detall: nomenar el formulari perquè el script funcioni adequadament. Introduïm el cursor del ratolí dins del rectangle de línia discontínua que indica el formulari i fem doble clic per mostrar la finestra de Propietats del formulari. En el camp Nom del formulari escrivim  buscar, tal com es mostra en aquesta imatge:


 

Activitat 8.2.3. El rollover

Un altre script que s’utilitza constantment en les pàgines web és l’anomenat rollover, que consisteix a substituir una imatge per una altra quan l’usuari col·loca el punter del ratolí a sobre de la primera imatge que apareix en el document, i se sol emprar com hipervincle. El codi en si és molt senzill. A la capçalera del document col·loquem les dues funcions que hem d’utilitzar:

<Script language ="JavaScript">
<! -
function sobre () {
document.dibujo.src ="imatges /hola2.gif"
}
function fora () {
document.dibujo.src ="imatges /hola.gif"
}
//->
</script>

La primera funció serveix per quan el punter del ratolí es troba a sobre de la imatge (en el nostre cas la funció sobre, que després inclourem en l’esdeveniment onMouseOver), que fa que es vegi la segona imatge, i una altra per quan el ratolí està fora de la imatge (fora, inclosa en l’esdeveniment OnMouseOut), que fa que es vegi la primera imatge. En aquest cas es tracta d’un botó de color groc i de vora i text vermells (primera imatge) el color de fons canviarà a verd quan l’usuari posi el ratolí a sobre:

A més, aquest botó servirà de hipervincle: quan l’usuari faci clic sobre d’ell, serà conduït a un altre document; en el nostre cas, a la pàgina del Monstre. Per a això caldrà col·locar la imatge en qualsevol part de la pàgina i fer un doble clic sobre ella perquè s’obri la finestra de Propietats d’imatge. A continuació escriurem la ruta de l’arxiu que volem que s’obri en prémer la imatge. També haurem de donar un nom a la imatge (no l’arxiu, que ja ho té) perquè el script la identifiqui, i per això premem el botó Edició avançada i afegim l’atribut HTMLname, el valor és dibuix, per exemple.


 

Només queda per escriure les crides a les dues funcions des del codi de l’hipervincle de la imatge:

<a href="index.htm"onMouseOver="encima()"onMouseOut="fuera()">
<img src ="imatges /hola.gif"alçada name ="dibuix"border = 0 width ="89"="34"> </a>

Això ho podrem fer directament sobre el codi font o obrint la pestanya Esdeveniments de Javascript i configurant els atributs onmouseout i onMouseOver amb els valors fora i sobre respectivament, com mostra la imatge anterior.