En aquesta pràctica iniciarem els primers passos amb JavaScript. A diferè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 veure els codis JavaScript més senzills.

Farem el primer script analitzat detalladament i veurem les diferents formes d'introduir codi JavaScript 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 formant part d'altres conceptes més avanç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 fa una consulta a l'usuari.
Mètode alert() : Mostra un missatge d'alerta a l'usuari.
Declaració var : Declara una variable.

  1.- El meu primer programa en JavaScript.
El codi JavaScript s'inclou entre les directives:

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


El codi que es trobi dins aquestes directives s'executarà en el moment que la càrrega de la pàgina llegeixi el seu contingut.

Observeu el paràmetre language="JavaScript". Això indica al navegador que el codi correspon a JavaScript. Si fos convenient, també podríem indicar la versió implementada, per exemple: "... JavaScript1.2", "... JavaScript1.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 Microsoft i derivat del Visual Basic. Solament és reconegut pel navegador Internet Explorer i en aquest curs no l'estudiarem.

Les directives <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 JavaScript que escriurà "Hola, món". Podeu utilitzar el Dreamweaver, 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">
      <!--
        document.writeln("Hola, món");
      //-->
    </script>
</body>
</html>




Quan es carrega aquesta pàgina en el navegador s'executa el codi que es troba entre <script> i </script>, la seva funció és molt simple: escriure en el cos del document la frase "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 frase que volem escriure a la pàgina web. Aquesta és una cadena de text i per tant es troba situada entre cometes ( " ). Observeu com les paraules document i writeln() es troben unides mitjançant un punt.

En l'argot informàtic s'entén per cadena un conjunt de caràcters alfanumèrics, habitualment inclosos entre cometes, és a dir, un text. Per tant, no és un valor que pugui ser avaluable numèricament. També s'anomena amb el seu nom equivalent String.

També es pot observar com el codi ha estat introduït entre els símbols <!-- i --> que corresponen als elements delimitadors dels comentaris en HTML, això es fa d'aquesta forma per evitar que els navegadors de versions antigues, o actualitzats amb JavaScript desactivat per l'usuari, no detectin aquest codi ja que no el podrien interpretar.

Ara bé, utilitzant els navegadors actualitzats no hi ha cap inconvenient en no utilitzar els símbols delimitadors de comentari, ja que els navegadors moderns interpreten correctament el codi JavaScript i rares vegades l'usuari desactiva aquesta opció. De fet, al llarg del curs, trobarem molts exemples que ja no contenen els delimitadors de comentari HTML al voltant del codi JavaScript.

Davant de --> hi ha situades dues barres ( // ). Aquestes dues barres corresponen als comentaris de JavaScript. Tot el que es trobi a continuació de les dues barres fins el final de la línia serà considerat com un comentari. En aquest cas, són utilitzades per evitar que JavaScript interpreti erròniament el finalitzador de comentari HTML (-->).

També podem indicar comentaris JavaScript 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à finalitzada amb un punt i coma ; . Aquest element serveix per indicar el final d'una instrucció JavaScript, però, no és imprescindible si al final 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 JavaScript 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, Java, etc. en els quals és obligatori sempre la utilització del ; .
 

2.-
Interacció amb l'usuari.
Un dels principals objectius de JavaScript utilitzat dins una pàgina HTML és interaccionar amb l'usuari. Això implica rebre una informació, processar-la i posteriorment mostrar els resultats.

Hi ha moltes formes d'introduir i mostrar la informació que es veurà al llarg del curs, a continuació veurem les formes 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 fa una consulta. La seva sintaxi és:

      prompt("Missatge informatiu", "Resposta per defecte");

Si la invoquem 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 valor introduït al quadre de diàleg quedarà assignat a la variable resposta com una cadena de caràcters.

Una altra forma d'introduir informació és mitjançant el mètode confirm(). La seva utilització detallada la podeu veure al mòdul 2 pràctica 4.



Mostra de resultats

Si el que desitgem és treure informació per a l'usuari, es pot utilitzar el mètode alert(). La seva sintaxi és la següent:

      alert(missatge);

Per exemple podem invocar-la de les següents formes:

      alert("Bon dia!");
      alert(23);
      alert("Aquest és\nun text\namb salts\nde línia.");
      alert(8*2/3);


es veuran unes finestres de diàleg com les següents:


Observeu com en la tercera forma, la que conté un text amb salts de línia, es provoca el salt de línia introduint \n, en els llocs apropiats entre mig de la frase. Si es vol mostrar una frase ho fem indicant-la entre cometes " ", en canvi, si es vol mostrar un valor numèric o el resultat numèric d'una operació aritmètica no s'ha de posar entre cometes " " .

També es pot treure informació 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">
  <!--
    var resposta;
    resposta = prompt("Com et dius?", "Introdueix el teu nom");
    alert("Hola " + resposta);
  //-->
</script>
</body>
</html>


 
En aquest codi es declara inicialment una variable de nom resposta.

     var resposta;

Seguidament s'invoca 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 defecte.

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

L'usuari té l'opció de fer clic sobre dos botons: "Aceptar" i "Cancelar". El primer botó envia com a retorn d'aquest mètode el valor que es troba dins el quadre de text i el segon botó envia el valor "null", tant en un cas com en l'altre, el valor retornat s'assigna a la variable resposta.

Finalment, la línia:

      alert("Hola " + resposta);

mostra un missatge d'alerta que conté el text format per la cadena "Hola " concatenat ( + ) amb el contingut de la variable resposta.
 
3.-
JavaScript dins un link.
Una altra forma d'invocar l'execució d'instruccions JavaScript és mitjançant un link. En aquest cas el codi pot estar inclòs dins el paràmetre href. En el següent exemple veiem com s'invoca l'execució del mètode alert() cada cop que es fa clic sobre l'enllaç.

Observeu com el link comença per : 'javascript : ....' . Aquesta paraula indica que a continuació no hi ha un hiperenllaç normal, sinó, un codi JavaScript que s'ha d'executar. Molts navegadors interpreten correctament el codi JavaScript sense aquesta paraula, per tant, en moltes ocasions ja no s'utilitza i es posa el codi directament.

Aquesta forma d'executar codi JavaScript també es pot utilitzar per invocar funcions d'usuari més complexes.

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