Índex
 
 cap12_aux.zip      
13. El JavaScript

1. Descripció general

El JavaScript és un llenguatge de programació. S'executa en el navegador i permet interactuar amb els elements de la pàgina de forma que pot convertir una pàgina web en una pàgina que interactua amb l'usuari.

Per entendre globalment el que volem dir mireu el formulari següent i calculeu la longitud d'una circumferència de radi 2 i la superfície d'un cercle de radi 4.

Introdueix el radi i et calcularé la longitud i la superfície d'una circumferència
Radi d'una circumferència

Longitud de la circumferència
Superfície del cercle

Aquí la interactivitat consisteix en que l'usuari pot introduir unes dades i aconseguir que l'ordinador li doni uns resultats.

Examinem els actors, els fets i les conseqüències d'aquest programa:

  1. Els actors són els següents

    • L'ordinador i el sistema operatiu.
    • El navegador i els seus interpretes de diferents llenguatges.
    • Un document HTML amb diferents objectes com els quadres de texts i els botons.
    • Un programa JavaScript que mira les dades i calcula els resultats.
    • L'usuari del sistema.

  2. Els fets

    L'usuari mou el ratolí i fa clic en un objecte botó.

  3. Les conseqüències

    El sistema operatiu agafa el clic de l'usuari i el transmet a través del navegador a l'objecte botó i el programa JavaScript, associat al clic del ratolí, calcula i fa visibles els resultats.

Hem dit que l'usuari a fet clic i que aquest clic ha arribat fins al seu destinatari que és un botó. Diem que s'ha produït un event i que un programa ha executat unes accions en resposta a aquest event.

De fet el JavaScript té un conjunt d'objectes que poden respondre a un conjunt d'events que es produeixen.

2.- Inserció de comportaments amb el Dreamweaver

Tot el que el Dreamweaver anomena comportaments es pot torbar al activant l'opció de Ventana/Comportamientos.

Al quadre veieu que el paràgraf de sota té associat una acció anomenada Mensaje emergente acció que s'executarà quan es faci clic a sobre del paràgraf. Proveu el resultat:

Fes clic a sobre d'aquest text

2.1- Els events més comuns són els següents

  1. Events del ratolí

    • onClick: es produeix quan es prem un botó qualsevol del ratolí.
    • onDoubleClick: es fa click dues vegades sobre un objecte.
    • onMouseOver: es mou el ratolí a sobre d'un objecte.
    • onMouseOut: el ratolí surt d'un objecte.
    • Tots els events Drag són d'arrosegar i desar anar el ratolí.

  2. Events de la pàgina

    • onLoad: es produeix quan la pàgina es carrega en el navegador.
    • onUnload: es produeix quan la pàgina es descarrega del navegdor.

  3. Events de teclat

    • onKeyPress: es produeix quan es prem una tecla del teclat.
    • onKeyUp: es produeix quan es desa anar una tecla del teclat.

En realitat hi ha un munt d'events possibles segons el tipus d'objectes al que estan destinats. També depèn de la classe de navegador que tinguem alguns events desen de funcionar. L'abast d'aquest apunts no permet fer una descripció de tot el llenguatge JavaScrip.

 

 

2.2 Algunes accions preprogramades del Dreamweaver

Les accions que proposa el Dreamweaver són les que es troben a la figura de la dreta.

En principi hem de pensar que aquestes accions ha de respondre a un event. Així que hem de llegir aquest quadre junt amb els events amb frases com les següents:

  • Quan es carregui la pàgina sortirà un missatge emergent amb una salutació.
  • Quan es descarregui la pàgina es mostrarà un missatge d’acomiadament.
  • Quan es mogui el ratolí a sobre d'una imatge apareixerà el contingut d'una capa oculta.
  • Quan es mogui el ratolí a sobre d'una capa canviarem una propietat (el color d'una altra capa).
  • Quan es faci clic en un botó es validaran els camps d'un formulari.

Es clar que la llista de accions és molt limitada tot pensant que aquestes accions són funcions preprogramades de JavaScript.

El PIE disposa d'un curs de programació en JavaScript que ens permetrà crear les nostres pròpies funcions.

Curs de JavaScript del PIE: Pàgines web dinàmiques

 

3. Realització d'alguns exercicis

3.1 Inserir missatges emergents

  1. Quan es carregui un document

    • Feu un document html nou i mireu la finestra de comportaments. Heu de tenir el cursor del document inmediatament després de l'etiqueta <body>, abans de qualsevol altra etiqueta o text.
    • Feu clic en el botó + i trieu Mensaje Emergente.
    • Escriviu "S'ha carregat la pàgina de prova" com a cos del missatge
    • Ara cliqueu a sobre de l'event i trieu l'event onLoad. Si no apareix a la llista d'events trieu Mostrar eventos/Para IE6.
    • Feu la prova de carregar el document en el navegador.

  2. En el mateix objecte es poden posar diferents comportaments. Quan es descarregui el document del navegador s'obrirà un missatge emergent d'acomiadament.

    • Treballeu al mateix document que abans.
    • Afegiu un missatge emergent associat a l'event onUnload per a l'etiqueta body amb la frase "Adéu, aquesta pàgina es descarrega del navegador"
    • Proveu el resultat. Un cop hagueu carregat la pàgina descarregueu-la carregant una altra en el navegador.

  3. Quan feu clic a sobre d'una capa sortirà un missatge.


    • A la mateixa pàgina dibuixeu una capa i poseu el color vermell de fons.
    • Poseu nom a la capa. On diu Layer1, a la finestra de propietats poseu capaVermella.
    • Amb el cursor dins de la capa aneu a comportaments.
    • Afegiu un missatge emergent amb el text "Has fet clic a sobre de la capa vermella" associat a l'event onClick.
    • Proveu el resultat carregant la pàgina en el navegador i fent clic a sobre de la capa.

  4. Comprova el resultat.

3.2 Canvi de propietats d'objectes

  1. Observa el comportament de les capes que tens a la pàgina Canvi de propietats.

    • Intervenen quatre capes de diferents color i una capa sobre la que actuen les altres quatre.
    • Les quatre primeres capes tenen les mateixes mides i només es diferencien en el color del fons. També hem posat nom (id de capa) per a cadascuna. Es diuen capaVermella, capaBlau ....
    • La cinquena capa es diu capaMovil, no té color de fons i l'estat inicial de la de la seva visibilitat és oculta (hidden).
  2. Els events i els comportaments

    • En cada capa hi ha definits comportaments pels events onMouseOver i onMoseOut.
    • Quan es passa el ratolí a sobre d'una d'aquestes quatre capes es realitzen dues accions. La capaMovil canvia de color i també apareix.
      Així, pel event onMouseOver de cadascuna de les quatre capes, hi ha definits dos comportaments.

      Definiu el primer event onMouseOver: Quan es tria Cambiar propiedad apareix el quadre següent



      Heu de triar com a tips d'objecte les capes (DIV) i com a objecte amb nom la capaMovil. Trieu la propietat backGroundColor i poseu-li el color que té la capa on esteu posant el comportament.
      El segon comportament de onMouseOver és Mostrar ocultar capas que ha de mostrar la capaMovil.
    • L'event onMouseOut de cadascun de les quatre capes fa que la capaMovil desaparegui. Així heu de afegir un comportament a cadascuna de les quatre capes per ocultar la capaMovil.

3.3 Arrossegar una capa. Un puzzle.

  1. Hem fet un exemple amb les peces del Tangram. Prova el resultat a la pàgina Tangram.htm. Es manifesten els següents fets:

    • Hi ha set capes que es poden arrossegar.
    • Cadascuna d'aquestes capes té una imatge de les peces del Tangram. Aquestes imatges són gifs que tenen com a color transparent el del fons de la imatge.
    • Quan arrosseguem les imatges in ens apropem al seu lloc original sembla que la peça s'ajusti sola a la seva posició.
    • Hi ha una capa de color gris que fa de fons de la imatge final.

  2. Els passos per crear aquesta pàgina són els següents:

    • Tenir preparades les imatges del puzle.
    • Crear les capes de les peces i donar el seu nom a cadascuna.
    • Inserir les imatges dins de les capes i ajustar la mida de les capes a la seva imatge inserida.
    • Posar les imatges en el seu lloc definitiu.
    • Afegir els comportaments a totes les capes que han de moure's. Heu de posar el comportament Arrastrar capa associat a l'event onDrag. Heu de tenir cura de tenir seleccionada la capa, i no la imtage que té dins, quan crideu a la finestra de comportaments.



      Segon es veu al quadre de diàleg de si fem clic al botó "Obtener posición actual" el Dreamweaver ens calcula la posició de destí de la peça.

    • Col·locar les capes desordenades per a la presentació de la pàgina del puzle als usuaris.

         

3.4 Mostrar i ocultar menús.

  1. Proveu la pàgina menus.htm i observeu els seus elements i les propietats que tenen.

    • En primer lloc tenim una pàgina enquadrada en una taula d'una columna i tres files (cel·les).
    • La primera cel·la serveix pels títols i logotips.
    • La segona conté tres imatges de substitució a les que hem afegit un comportament. Ha de aparèixer un menú en cadascuna quan passem a sobre d'elles amb el ratolí. Aquests menús es defineixen com a comportaments que s'executen quan s'esdevé l'event onMouseOver.
    • La tercera cel·la tindrà el contingut de la pàgina.

  2. Els passos per fer uns menús d'aquest tipus són els següents:
    • Hem de tenir les imatges per fer les imatges de sustitució. Les de l'exemple estan fetes amb el Fireworks.
    • Creem les imatges de substitució amb l'opció Insertar/Objetos de imagen/Imagen de sustitución. No heu de posar cap enllaç a aquestes imatges.
    • Crear els menús de cadascuna de les imatges. Amb la imatge seleccionada afegiu el comportament Mostrar menú emergente associat a l'event onMouseOver.

      Quan apliquem el comportament apareix un quadre de diàleg com el següent:



      En aquest quadre de diàleg hi ha quatre fulls. En el primer, anomenat Contenido es creen totes les opcions del menú amb els enllaços necessaris. Mireu els botons de dalt que permeten afegir opcions, aplicar o anular sagnia d'un element i canviar l'ordre dels elements. Amb la sagnia, després, es defineixen els submenús.

      Els quadres Apariencia i Avanzado permeten donar format als menús. En darrer lloc el quadre posició permet col·locar el menú amb mesura en pixels respecte al vèrtex superior esquerra de la imatge de substició que el crida.
    • Al final heu de tenir en cada imatge de substitució quatre comportaments, dos onMouseOver i dos onMouseOut. El primer onMouseOver i el primer onMouseOut es creen quan feu la imatge de substitució. El segon onMouseOut el genera automàticament el Dreamweaver quan creem el comportament d'obrir un menú.
    • NOTA: El Dreamweaver afegeix al mateix directori on es desa la pàgina amb el menú els fitxers mm_menu.js i arrow.gif que són necessaris pel funcionament del menú i que heu de pujar al servidor quan publiqueu la vostra pàgina web.