Inserir un JavaScript extern

Què és el JavaScript?

Tot i haver estat un dels elements fonamentals en el desenvolupament i l'expansió de la Word Wide Web, el llenguatge HTML té una important limitació: és estàtic, ja que per si mateix no té la capacitat de proporcionar interacció amb l'usuari. 

El disseny actual de webs es dirigeix de forma decidida cap a la creixent inclusió d'interactivitat. Això ha fet que s'hagin incorporat tota una sèrie de recursos per dotar les pàgines web d'un aspecte més dinàmic i participatiu per a l'usuari/ària.

Un dels recursos més utilitzat per ampliar les possibilitats del llenguatge HTML és el JavaScript. La seva combinació permet incorporar diversos efectes visuals, missatges personalitzats, etc., que apareixen o desapareixen segons les accions que faci l'usuari/ària.

El JavaScript és un llenguatge de programació utilitzat para crear petits programes encarregats de dur a terme accions dins d'una pàgina web. Aquests programes (scripts) formen part, juntament amb l'HTML, del codi de la pàgina web. Amb el JavaScript podem crear efectes visuals a les pàgines i definir interactivitats amb l'usuari/ària. El navegador del client és l'encarregat d'interpretar les instruccions JavaScript.

Amb freqüència, es confon el JavaScript amb el Java. Tot i compartir una sintaxi semblant, són llenguatges independents. La pràctica 2 d'aquest mòdul tractarà dels applets del Java i de les diferències dels dos llenguatges, però en aquesta només parlarem del JavaScript.

 

Sintaxi bàsica d'un JavaScript

 

La sintaxi del JavaScript és molt semblant a la de C++. Els elements més importants d'aquesta sintaxi són:
 
  • Sentències: Són línies de codi.
  • Blocs: Agrupen sentències.
  • Comentaris: Permeten introduir comentaris sobre el codi per fer modificacions o correccions posteriors.
  • Dades: Informacions en què es basa el programa.
  • Expressions: Permeten fer diferents operacions amb les dades que s'utilitzen.
  • Variables: S'utilitzen per emmagatzemar les dades.
  • Funcions: Serveixen per utilitzar el codi en seccions que tenen nom.
  • Control de flux: Permet que el programa dugui a terme diferents accions al llarg de la seva execució.
  • Objectes: Permeten agrupar les dades i les variables.
  • Matrius: Emmagatzemen gran quantitat de dades i permeten accedir a diferents elements individuals.

Un dels exemples típics i més senzills d'utilització de les possibilitats del JavaScript és el fet que permet obrir una finestra on es mostra un missatge determinat. Podem utilitzar-lo com a mostra de la seva sintaxi. Observeu el codi següent, que correspon a una simple pàgina HTML, i feu clic al botó de la dreta per veure'n el resultat:

<HTML>
<HEAD>
<SCRIPT LANGUAJE="JavaScript">
function CursD98()
{
alert ("Hola, aquesta és la pràctica 1 del mòdul 7 del curs D98");
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<p aling="center">
<input type="button" name="Boton" value="Cliqueu" onClick="CursD98()">
</FORM>
</BODY>
</HTML>

  • Les etiquetes <HTML>, </HTML>, <HEAD>, </HEAD>, <BODY> i </BODY>, ja són conegudes i es troben a totes les pàgines HTML.
  • Les etiquetes <FORM> i </FORM> corresponen a un formulari. Estudiarem els formularis a la pràctica 2 del mòdul 8.
  • El programa fet en JavaScrip es troba entre les etiquetes <SCRIPT> i </SCRIPT>. El que fa és definir la funció CursD98() que després es crida des del formulari mitjançant el botó Cliqueu i la instrucció onClick.

A la carpeta ../materials/m7 teniu el fitxer salutacio.htm amb el codi anterior; el podeu obrir amb el Dreamweaver MX 2004 i canviar el contingut del missatge. Comproveu que funciona bé.

Aquest exemple no deixa de ser una mostra molt petita del llenguatge del JavaScript. El grau de complexitat de molts dels JavaScript que podeu observar en algunes pàgines web és proporcional als efectes dinàmics o visuals que implementen.

No cal, però, conèixer el mètode de programació d'aquest recurs per poder utilitzar-lo convenientment a la pàgina que es vulgui elaborar. Però, si voleu aprofundir els vostres coneixements, hi ha un curs telemàtic, el D108 , dedicat a les pàgines dinàmiques i al JavaScript.

Podeu trobar a la xarxa centenars d'adreces on els JavaScript estan elaborats i agrupats per categories. Només cal cercar el que s'adapti a les nostres necessitats i després copiar-lo. A més a més, incorporen instruccions d'instal·lació i indicacions sobre quines característiques es poden modificar sense alterar les propietats. La majoria d'aquests JavaScript són de lliure utilització i l'única condició imposada pels autors és que no s'elimini la línia de comentari on està inclosa l'autoria.

 

Els programes d'edició de pàgines web més actuals, entre ells el Dreamweaver MX 2004,  disposen de la possibilitat d'incorporar efectes dinàmics i interactivitat mitjançant la creació automàtica del JavaScript adaptats al nostre treball, sense necessitat d'escriure una sola línia de codi. 

Abans d'entrar en aquesta opció que el Dreamweaver MX 2004 ofereix i que s'explica a la pràctica 3 d'aquest mòdul, podeu veure com aprofitar alguns recursos externs. 
 

Per facilitar les pràctiques comproveu si la configuració del Dreamweaver MX 2004 és la que permet treballar amb el JavaScript amb més facilitat.

Obriu el menú Edición | Preferencias. Feu clic a la categoria Elementos invisibles. Comproveu que teniu seleccionat Mostrar Scripts. Si no és així, feu clic per seleccionar-ho.

Finestra preferencias | Elementos invisibles

Obriu ara el menú Ver | Ayudas visuales i seleccioneu Elementos invisibles. D'aquesta manera, el programa mostra a la vista Diseño la icona Icona JavaScriptcada vegada que inseriu un JavaScript.

Menú Ver | Ayudas visuales

Si en algún moment voleu deixar de veure aquesta informació, només cal fer el procés invers.

 
Pràctica

Inserir un JavaScript extern

Aquest apartat de la pràctica ajuda a conèixer la manera d'inserir un JavaScript a una pàgina web i modificar-lo sense perdre'n la funcionalitat.

L'exemple que fareu consisteix a afegir un JavaScript que farà un efecte especial sobre el document. Començaran a caure fulles o neu. No és gaire útil, però pot quedar bonic. Mireu uns models ja fets clicant a les icones següents.

Fulla Floc neu
  Heu de crear una carpeta nova amb el nom c:\cursd98\m7\tardor\

Copieu-hi tots el arxius de la carpeta tardor, que són dins de ../materials/m7/javascript/.

Obriu el fitxer mpol_tardor.htm amb el Dreamweaver MX 2004. Veureu que és només una taula de 300 píxels d'amplada amb el títol TARDOR.

Obriu l'arxiu text_tardor.txt. Aquí trobareu el text del poema de Miquel Matí i Pol. Seleccioneu i copieu-ne tot el contingut dins la taula. Canvieu el tipus de lletra a Verdana de 12 punts i color #804000.

Canvieu a la vista Código.

Recupereu l'arxiu codi_tardor.txt. Aquí trobareu el codi que permet moure les fulles al document. Seleccioneu-ho i copieu-ne tot el contingut.

A continuació, des de la vista Código, col·loqueu el cursor després de l'etiqueta <BODY> del document. Feu clic a Edición I Pegar. Torneu a guardar el document i comproveu si funciona tant amb l'Explorer com amb el Firefox.

 

Si canvieu ara a la vista Diseño o Dividir, observareu que ha aparegut la icona Icona JavaScripta la part superior de la pàgina. Si hi feu clic sobre, se selecciona tot el codi que heu introduït anteriorment.

Document mpol_tardor.htm vista Dividir

Si feu la pràctica creant un document nou amb el Dreamweaver MX 2004, és possible que les fulles no es moguin quan es visualitza amb el Mozilla Firefox. Això es deu al fet que el Dreamweaver MX 2004, en crear un document nou HTML, insereix al començament de tot les línies de codi següent:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Aquesta instrucció fa que el Firefox no interpreti bé alguns JavaScript. El que heu de fer és eliminar aquestes línies des de la vista Código, i veureu que funciona.

Als models podeu veure que la finestra té unes mides que s'ajusten a la mida del poema i que no té cap barra d'eines. Això fa que quedi una mica millor. Veureu com es fa a la pràctica 3 d'aquest mòdul quan parlem de Comportamientos.

 

Podeu fer el mateix ara amb els fitxers mpol_hivern.htm, text_hivern.txt i codi_neu.txt que hi ha a la carpeta ../materials/m7/javascript/hivern.

Heu de crear una carpeta nova amb el nom c:\cursd98\m7\hivern\

Copieu-hi tots el arxius de la carpeta hivern que són dins de ../materials/m7/javascript/.

Si us hi fixeu, a la línia 11 del codi podreu veure la instrucció
var snowsrc="snow.gif". Si canvieu snow.gif pel nom d'una altra imatge que es trobi a la carpeta, les imatges que "cauran" seran diferents. A la mateixa carpeta teniu dues imatges més, snow2.gif i fulla.gif, per fer proves.
Pràctica

Inserir JavaScript a partir d'un fitxer *.js

  En aquesta pràctica veureu què són els arxius amb extensió js i com utilitzar-los en una pàgina web.
Heu de crear una carpeta nova amb el nom c:\cursd98\m7\dates\

Copieu-hi tots el arxius de la carpeta dates que són dins de ../materials/m7/javascript/.

Obriu el el fitxer revista.htm, que teniu a la carpeta que heu creat, amb un navegador. Observeu que és una pàgina d'una revista. Si mireu la part superior dreta, veureu que surt la data actual, i si mireu la part inferior dreta, hi ha una línia que indica la data d'actualització del document.

Retall document revista.htm 1

Retall document revista.htm 2

Vegem com s'ha generat.

Obriu ara el fitxer revista.htm amb el Dreamweaver MX 2004. Seleccioneu la vista Código i observeu el que hi ha.

codi revista.htm 1

A les línies 5 i 6 hi ha les etiquetes <SCRIPT> i </SCRIPT>, que ja coneixeu, amb el paràmetre scr="dates.js".

D'aquesta manera, s'incorporen a la pàgina web unes funcions definides en un fitxer extern amb nom dades.js.

El codi de la fila 8 indica que la pàgina té vinculat un full d'estils amb el nom revista.css.

Baixeu una mica i continueu mirant el codi de la pàgina.

codi revista.htm 2

A les línies 24, 25 i 26 veieu que es crida a Escriure(Avui());. Aquesta és la instrucció que genera la data actual al document. Si reviseu tot el codi, no trobareu la definició d'aquestes funcions, ja que són al document dades,js.

Si seguiu baixant fins a arribar quasi al final del document, trobareu el següent:

codi revista.htm 3

El codi és molt semblant a l'anterior, només canvia la funció Data_actualitzacio(), que també està definida al fitxer dades.js.

Si obriu amb el Dreamweaver MX 2004 el fitxer dades.js, podeu veure la definició de les funcions. Una explicació detallada queda fora de l'abast del curs. Però podeu observar que al document s'ha cridat a la composició de dues funcions: la funció Escriure(), que el que fa és escriure al document HTML el paràmetre enviat i les funcions que generen el text amb la data actual o d'actualització del document.

Feu un petit canvi al fitxer revista.htm i torneu a desar el document. Si el visualitzeu ara amb un navegador, podreu observar que la data de modificació ha canviat.

Utilitzar arxius js pot ser molt útil per diferents motius:

Primer, perquè clarifica molt el codi de la pàgina. Heu de tenir en compte que a vegades el mateix Dreamweaver MX 2004 genera codi JavaScript per incloure certs elements (com per exemple, els comportaments i les imatges de substitució que veureu a la pràctica 3 d'aquest mòdul).

Una altra raó és la possibilitat d'utilitzar una mateixa funció (o més d'una) a diferents pàgines HTML sense necessitat de definir-la a totes. Només cal tenir una pàgina amb les funcions i vincular-la a totes les pàgines que desitgeu.

 
Pràctica

Modificar un JavaScript

Ara fareu uns canvis mínims en un JavaScrip ja fet. Els canvis a les funcions, sentències, requereixen coneixement de la sintaxi, però un petit canvi en els paràmetres permet personalitzar els JavaScript.

Personalitzeu una pàgina amb un JavaScript molt típic anomenat scroller. Podeu observar-ne el comportament en el model. El resultat actual és un pannell d'informació. Les diferents pantalles donen informació sobre l'script.

Heu de crear una carpeta nova amb el nom c:\cursd98\m7\scroller\

Copieu-hi tots el arxius de la carpeta scroller que són dins de ../materials/m7/javascript/.

Obriu l'arxiu codi_scroller.txt. Aquí trobareu el codi de l'script corresponent a l'scroller. Seleccioneu-lo i copieu-ne tot el contingut.

Obriu el el fitxer scroller.htm amb el Dreamweaver MX 2004. Veureu que és una taula amb un cel·la en blanc a la part central. Situeu-vos dins la cel·la i aneu a la vista Código. Enganxeu el contingut de codi_scroller.txt i torneu a canviar a la vista Diseño. Si tot ha anat bé, el contingut de la finestra serà aquest:

Captura vista diseño

Deseu el document i comproveu que funciona.

Feu clic sobre la icona corresponent al JavaScript que heu inseritIcona JavaScript. Observareu que el pannell Propiedades es refereix a l'script.

Panell Propiedades Script

A l'apartat Lenguaje es pot especificar en quin llenguatge està basat l'script. En el vostre cas, és JavaScript, encara que no passa res si es deixa en blanc. A l'apartat Origen es pot escollir un fitxer de codi, en el cas que es trobi en un arxiu del tipus js com a la pràctica anterior. En el vostre cas, el codi està inserit a la pàgina. El botó Editar permet fer canvis al codi.

Feu clic al botó Editar; veureu que s'obre una finestra amb el codi del vostre script.

Finestra Propiedades Script

En aquest moment podeu fer canvis al valor de les variables, però cal una explicació del seu significat.

  • Delay: Indica el temps d'espera d'un missatge a l'altre en mil·lisegons.
  • Maxsteps: Indica en quants passos es fa la transició d'un text a l'altre.
  • Stepdelay: Indica el temps en mil·lisegons d'un pas a un altre en el moment de la transició.
  • Startcolor: Indica el color inicial del text en codi RGB.
  • Endcolor: Indica el color final del text en codi RGB.

Canvieu els valors al vostre gust, deseu el document i comproveu-ne el resultat.

Torneu a fer els passos anteriors per editar l'script i aneu codi avall fins arribar a:

Finestra Propiedades Script

A les línies fcontent[0], fcontent[1]hi ha els missatges que apareixen després en visualitzar-ho. El contingut del text es pot canviar. Es poden afegir noves línies i es pot introduir codi HTML per donar atributs o inserir un vincle. Només heu de tenir en compte una cosa: si cal escriure un apòstrof, s'ha d'introduir el codi \' . Si no es fa així, l'script l'interpreta com el final del text que esteu escrivint. Els accents els accepta sense problemes.

Canvieu el contingut del text, deseu el document i comproveu-ne el resultat.

   
 
Pràctica

On es pot trobar JavaScript?

 

Podeu trobar moltes pàgines amb recursos del JavaScript fent la cerca als cercadors més importants teclejant en els camps de cerca la paraula javascript.

 
Encara que n'hi ha moltes, com a mostra aquí teniu algunes adreces que us poden ajudar a trobar recursos i a ampliar coneixements:
Dynamic Drive http://www.dynamicdrive.com/
JavaScript Kit http://javascriptkit.com/
JavasSript.com http://www.javascript.com/
WebStilo http://www.webestilo.com/javascript/
Javascript City http://www.javascriptcity.com/

Cal ser prudent a l'hora d'inserir els JavaScript a la web. Una pàgina on apareguin massa efectes o hi hagi una interactivitat mal entesa pot provocar l'efecte contrari pel qual ha estat pensada, dificultant la navegació o alentint la càrrega. Per tant, cal filar prim i tenir clar el propòsit del recurs que s'inclou.