Índex
Miguel A. Almarza
Departament d'Informàtica
IES Mare de Deu de la Merce



lenguaje2000.mdb
Capítol 1.

Introducció a la programació Javascrip

  1. Introducció
  2. El primer codi de JavaScript
  3. Les varibles numèriques. L'objecte NUMBER.
  4. Un altre object. L'objecte MATH.
  5. Les funcions. On s'escriuen i on s'executen.
  6. Els events i la seva gestió
  7. Scripts interactius amb l'usuari.

 

1.1 Introducció

Javascript és un llenguatge de programació amb programació dirigida a objectes.

El codi d'aquest llenguatge es deriva del llenguatge Java però és molt més senzill i molt més limitat.

A les intranents, internet o estranets existeixen els ordinadors servidors i els ordinadors client.

Per això existeixen dues parts diferents (objectes diferents) d'aquest llenguatge. Una és la part de codi corresponent al client i altra és la part del codi corresponent al servidor.
 
On s'escriu el codi HTML On s'executa aquest codi
El codi s'escriu dins les pàgines HTML El codi JavaScript del client s'executa en el navegador.
El codi JavaScript del servidor s'executa en el servidor.
JavaScript és un llenguatge interpretat


En aquests primers capítols veurem el JavaScript del costat del Client, que s'executa en els navegadors.

1.2 El primer codi de JavaScript

El codi Javascript s'escriu dins les pàgines HTML amb l'etiqueta <script>: 
   <script language="JavaScript">
   <!-- 
      Lloc on s'insereix el codi JavaScript
   --> 
   </script>
Veiem que aquesta etiqueta té la propietat language on indiquem el tipus de llenguatge d'escript que estem utilitzant. Entre d'altres llenguatges d'escript hi són també el Visual Basic Script i l'Ecma Scrip.

També existeixen les diferents versions de Java Script segons les versions del navegadors on s'executen. En principi el valor JavaScript dins la propietat language deixa que sigui el navegador el que trïi la versió de Java Script.
Faig notar que el codi JavaSicrip s'insereix entre les marques de comentari per tal que els navegadors que no tinguin implementat aquest llenguatge deixin aquest codi de banda.

Pàgina HTML amb el primer codi JavaScript  Visualització per pantalla 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
   <title>Primera prova</title>
</head>

<body>

   <h3>Primera prova amb JavaScript.</h3>

   <script language="JavaScript">
   <!--
      var cincDuros = 5;
      var IVA = 0.06;

      document.write("La venda és de ", cincDuros, " duros.");
      document.write("<br>");
      document.write("amb un IVA de ", 5*IVA," duros");
      -->
   </script>
   <BR><BR>
   <h3>Fi de la prova</h3>

</body>
</html>

Primera prova amb JavaScript.



Fi de la prova

Comentaris al codi anterior

  • En el moment de carregar una pàgina HTM en el navegador aquest crea un objecte que s'anomena Document en el que podem escriure amb el mètode write.
  • Hem inserit aquest codi en un lloc molt precís de la pàgina HTML, allà on volem que apareixi text creat a travès de codi.
  • De fet el navegador construeix aquesta porció de la pàgina amb les intruccions escrites dins els document.write(""). Per tant s'executarà el tag <br> que està en el segon write que donarà un salt línia.
  • Veiem que hi ha una forma genèrica de declarar variables amb la paraula reservada var. No hi ha diferents tipus de dades numèriques.

1.3 Les varibles numèriques. L'objecte NUMBER.

En el llenguatge Java Scrip només existeix com a dada de tipus numéric el tipus equivalent al float del C. Així tenim que internament el llenguatge no fa distinció entre els números enters i els reals.

També disposem de l'objecte Number que descriurem més endevant i que, entre d'altres, té dues propietas MAX_VALUE i MIN_VALUE que ens donen el màxim valor i el mínim d'una dada numèrica.

Veiem a l'exemple següent que així podem fer ús de números enters molts grans.

Exemple d'script amb dades numèriques Visualització per pantalla 
<script language="Javascript">
<!--

   var numeroGran1=100000000531;
   var numeroGran2=150000000642;

   document.write("numeroGran1 = ",numeroGran1,"<br>");
   document.write("numeroGran2 = ",numeroGran2,"<br>");
   document.write("Suma = ",numeroGran1+numeroGran2,"<br><br>");

   document.write("Número més gran ", Number.MAX_VALUE,"<br>");
   document.write("Número més petit ", Number.MIN_VALUE,"<br>");

//-->
</script>

1.4 Un altre object. L'objecte MATH.

Com ja hem esmentat el Javascript és un llenguatge de programació dirigit a objectes.

Ja hem vist dos objectes, l'objecte document i l'objecte Number. Ara presentem l'objecte Math.

Aquest objecte disposa, com a propietats, de les constants més importants com só el número e i el número ¶.

També disposa de mètodes per a moltes funcions matemàtiques, com les funcions trigonomètriques, exponencials, logarítmiques, etc.

En el codi següent mostrem com es fa ús d'aquestes propietats i mètodes.
Exemple d'script amb funcions Visualització per pantalla 
<script language="Javascript">
<!--
   document.write("El número pi: ", Math.PI);
   document.write("<br>");
   document.write("El númerto e: ", Math.E);
   document.write("<br>");
   document.write("La longitud de una circunferencia de radio 5 es: ", 2*Math.PI*5);
   document.write("<br>");

   var a = Math.sin(0);
   document.write("sen(0°)=",a);
   a = Math.sin(Math.PI/2);
   document.write("<br>");
   document.write("sen(90°)=",a);
//-->
</script>

1.5 Les funcions. On s'escriuen i on s'executen.

Si mirem el codi següent veiem que una funció que realitza una tasca pot escriure's a l'encapçalament de la pàgina. En realitat pot escriure's en qualsevol part de la pàgina HTML.

Així que haurem de triar nosaltres el joc on escriurem les funcions. D'aquesta manera podem fer-nos un bon hàbit d'escriure totes les funcions adients en el mateix lloc de la pàgina, per exemple a l'encapçalament.

També veiem que podem executar una funció dins cos del document HTML, entre les etiquetes <body> i </body> de manera que la sortida de la funció cap a pantalla es faci en el lloc de la pàgina on voldrem que apareixi.

En realitat una funció es pot executar des de qualsevol codi Javascript de la pàgina.
Exemple d'script amb dades numèriques Visualització per pantalla 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
   <title>Castigo</title>
   <script language="Javascript">
   <!--
      function Castigo()
      {
         for (i=1;i<11;i++)
         {
         document.write(i,".-La vaca se escribe con v <br>")
         }
      }
   //-->
</script>
</head>

<body>
Text anterior a l'execució de la funció castic en la pàgina.
<script language="Javascript">
<!--
   Castigo();
//-->
</script>
Text posterior a l'execució de la funció castic en la pàgina.
</body>
</html> 		Text anterior a l'execució de la funció castic en la pàgina.
Text posterior a l'execució de la funció castic en la pàgina.

1.6 Els events i la seva gestió

En els sistemes operatius de tipus Windows es produeixen events, com el fet que l'usuari mou el ratolí, fa clic a sobre d'un botó, prem una tecla del teclat, etc.

El sistema operatiu s'encarrega de capturar aquest events i ditribuir-los entre els objectes que hi ha en execució fins fer-los arribar a l'objecte destinatari de l'event.

Així a l'script següent veiem que existeix un objecte, de tipus botó, que ha de ser capaç de rebre l'event fer clic amb el ratolí i actuar quan rebi aquest event.

El botó es crea amb el tag següent:

<input type="button" name="Boto" value="Fes clic" onClick="HolaMon()">

Veiem que li dotem de la manera de respondre a l'event clic del ratolí amb onClick="HolaMon()" que farà executar la funció HolaMon();

La funció HolaMon() fa ús de l'objecte Window i el seu mètode alert. L'objecte window es crea en el moment que es troba un dels tags <body>, <frameset> o<frame>. El mètode alert("") fa aparèixer un quadre de diàleg amb el missatge que li passarem.

Exemple d'script amb gestió d'events Visualització per pantalla 
<html>
<head>
   <script language="Javascript"">
      function HolaMon() {
      alert("¡Hola, món!");
      }
   </script>
</head>
<body>
<form>
   <input type="button" name="Boto" value="Fes clic"
         onClick="HolaMundo()">
</form>
</body>
</html>

1.7 Scripts interactius amb l'usuari.

L'HTML disposa d'uns objectes que es crean en el moment que el navegador llegeix i interpreta el codi HTML. Tots els tags de tipus <input> generan diferents tipus d'objectes.

El problema que plantejem és fer un quadre de diàleg amb tres quadres de text i dos botons. El primer quadre, que es diurà txtRadi, servirà per a que l'usuari introduexi un número.

Els altres dos per a donar la informació de longitud de la circumferència i superfície del circle, valors obtinguts per mitjà de l'execucuó de la funció calcula quan premem el botó adient.

Visualització per pantalla 

Càlcul de longituts d'una circumferència i superfícies de circles.

Introdueix el radi



Longitut de la circumferència

Superfície de la circumferència


Notem que tenim els següents objectes amb els seus nom corresponents:

Objecte name
document document
Formulari formCircun
Text txtRadi
Text txtLongitut
Text txtSuperficie
Botó normal  
Botó reset  

Si ens fixem a la instrucció

document.formCircun.txtSuperficie.value=superficie;

veurem en el objecte document hi ha un objecte nomenat formCircum, i aquest té un altre objecte txtSuperficie que conté la dada dins la propietat value.

Així podem llegir o escriure una dada en un quadre de text.

Nota: Els noms triats pels objectes es composen de dues parts. El nom comença per l'abreviatura del tipus d'objecte i la segona que és el nombre pròpiament dit. Això fa molt més entenedora la programació dirigida a objectes.

Exemple d'script interactiu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
   <title>Circumferències</title>
</head>
   <script language="Javascript">
   <!--
      function Calcula()
      {
         var r = document.formCircun.txtRadi.value;
         if (r>0)
         {
            var longitut = 2*Math.PI*r;
            var superficie = Math.PI*r*r;
            document.formCircun.txtLongitut.value=longitut;
            document.formCircun.txtSuperficie.value=superficie;
         }
         else
         {
            window.alert("Introdueix un número positiu");
         }
      }
   //-->
   </script>
<body>

<h3>Càlcul de longituts de una circumferències y superficies de circles.</h3>
<form name="formCircun">
   Introdueix el radi <input name="txtRadi" type="text" value="">
   <br><br>
   <input type="button" value="Calcula longitut i superfície" onClick="Calcula()">
   <input type="reset" value="Esborra">
   <br><br>
   Longitut de la circumferència
   <input name="txtLongitut" type="text" value="">
   <br><br>
   Superficie de la circunferencia
   <input name="txtSuperficie" type="text" value="">
   <br><br>
</form>

</body>
</html>