Nummòlt - Documents de programació 1 - Objectes, propietats i mètodes

NUMMÒLT - Documents de programació 1:

Objectes en JavaScript 1.2: ( ECMAscript: Veure: http://www.ecma.ch )
Standard ECMA 262 - Desembre 1999

"La construcció de programes d'ordinador requereix organitzar prèviament els raonaments".
"Els objectes són molt útils en aquesta feina."

INDEX:
Què és un document html
Què és JavaScript
Què és un objecte en JavaScript
Què és una variable
Quan té sentit l’ús d’un objecte?
Exemple amb construcció d'un objecte

1.- Definició de l'objecte
2.- Operacions amb objectes
2.1.- Suma de fraccions
2.2.- Multiplicació de fraccions
2.3 - Funció que inverteix un objectee fraccionari
2.3.1.- Inclusió de la funció que inverteix un objecte fraccionari dins de les propietats de l'objecte
2.3.2.- Inclusió dels constructors necessaris per a quan no s'entren totes les dades

3.- Funcions necessàries per a construir una calculadora de fraccions
3.1.- Suma de fraccions
3.2.- Resta de fraccions
3.3.- Multiplicació de fraccions
3.4.- Divisió de fraccions
4.- Funcions necessàries per a relacionar-se amb el codi html
5.- Codi HTML (Sols la part del form)
6.- Tota la pàgina amb l'script incrustat
7.- Veure l'aplicació en funcionament

(En verd codi executable dins d'un document html)

Què és un document html:

Un document html, per a nosaltres és l'escrit contingut entre els dos termes <html> ......</html>
Els navegadors o exploradors d'Internet són capaços de llegir els documents html.
Ara esteu llegint això amb un browser capaç de llegir html.

Què és JavaScript:

És un llenguatge d'ordinador que funciona en els navegadors d'internet.
Ès tant senzill, que pensem que pot ser una eina pedagògica molt útil.
Aquest llenguatge està escrit de forma llegible i incrustat a les pàgines construides amb HTML.
Explicar el funcionament d'aquest llenguatge va més enllà d'aquest escrit. Hi ha llocs per a consultar: http://developer.netscape.com. On podreu trobar manuals de referència sobre JavaScript i HTML.
Aquest escrit sols es centra en la utilització dels objectes.
És el concepte més difícil. (almenys per a nosaltres, ho ha estat).

El JavaScript és el text contingut entre els dos termes <script language="JavaScript"> .......... </script>
Tot el codi que es mostra a partir d'ara, se suposa que està dins d'un document "html" i dins d'un "script" JavaScript:

<html>
........................
<script language="JavaScript">
........................
/* Lloc on posar el codi que s'explica en aquest document */
........................
</script>
.......................
</html>

Els navegadors o exploradors d'Internet són capaços de llegir els documents "html" amb "JavaScript".

Què és un objecte en JavaScript.

Què és una variable:

Una variable es defineix amb la paraula clau var.
El signe = significa assignació de valor en aquest <-- sentit.
var NombreEnter = 1;
Hem creat la variable NombreEnter i hem fet que tingui valor 1.

Quan té sentit l’ús d’un objecte?

Un objecte és com una variable, però més complicada.
Per a declarar un enter i donar-li el valor 1, sols cal escriure: var nombre=1;
Però si volem declarar nombres fraccionaris, complexes, etc. i operar amb ells, hem de fer més coses.
Cal fer servir un objecte quan hem de tractar amb un concepte amb més d'una variable, o un conjunt de dades sobre les que es pot treballar (gràfics, etc.) com a un concepte únic.

Un objecte es defineix amb la paraula clau function.
Un objecte tindrà la forma següent:

function obj_meu(dades1, dades2)
    {
    this.propietat1=dades1;
    this.propietat2=dades2;
    }

Un objecte s'instancia amb la paraula clau new
Per a crear una instància d'aquest objecte cal fer:

nouObjecte=new obj_meu(1,2);

on nouObjecte.propietat1 és igual a 1 i nouObjecte.propietat2 és igual a 2

Aquí iniciem un exemple sobre operacions amb nombres fraccionaris:
En aquest text s'explica tot el procés per a construir una pàgina web amb uns objectes que operaràn com a una petita calculadora de nombres fraccionaris.
No entrarem en la simplificació de fraccions (Va més enllà de la intenció d'aquest text).
El codi es veurà en verd.

L'objecte fraccionari és un dels més senzills que es poden construir.

Exemple amb construcció d'un objecte

1.- Definició de l'objecte:

En aquest exemple no es controlarà l'aparició del zero al denominador, perque mai s'arribarà a fer una divisió.
Per a fer un programa realment funcional, falten totes les funcions de control d'error i desbordament causades per la divisió per zero. Això aniria més enllà de les intencions d'aquest document.

Constructor:
Un nombre fraccionari pot ser un objecte:
Un nombre fraccionari té numerador i denominador.
.

function fraccionari(a,b)
{
this.numerador=a;
this.denominador=b;
}

Aquesta expressió s'anomena constructor. (De l'objecte)
Ja tenim definit l'objecte fraccionari.
numerador i denominador són les propietats de l'objecte
A partir d'ara podem definir una fracció. Per a fer-ho, cal declarar una instància:
Per a instanciar el nombre fraccionari mig (1/2), caldria fer: mig =new fraccionari (1,2);
Per a usar en la variable x el contingut del numerador de mig var x=mig.numerador;
Per a usar en la variable y el contingut del denominador de mig var y=mig.denominador;
Per a llegir o escriure el contingut d'una propietat d'un objecte s'ha de fer referència a objecte.propietat (amb un punt entre l'objecte i la propietat).

2.- Operacions amb objectes:

2.1.- Suma de fraccions:

Cal usar dos objectes fraccionari i retornar un objecte fraccionari:

function suma_frac (fa,fb)
{
var nou_numerador_a = fa.numerador * fb.denominador;
var nou_numerador_b = fb.numerador * fa.denominador;
var nou_numerador = nou_numerador_a + nou_numerador_b;
var nou_denominador = fa.denominador * fb.denominador;
resultat_frac=new fraccionari (nou_numerador,nou_denominador);
return resultat_frac;
}

2.2.- Multiplicació de fraccions:

Cal usar dos objectes fraccionari i retornar un resultat objecte fraccionari:

function multi_frac (fa,fb)
{
var nou_numerador = fa.numerador * fb.numerador;
var nou_denominador = fa.denominador * fb.denominador;
resultat_frac=new fraccionari (nou_numerador,nou_denominador);
return resultat_frac;
}

2.3.- Funció que inverteix un objecte fraccionari:
(no té retorn, perque inverteix el mateix objecte)

function invert_frac()
{
aux= this.numerador;
this.numerador=this.denominador;
this.denominador=aux;
}

2.3.1.- Inclusió de la funció que inverteix un objecte fraccionari dins de les propietats de l'objecte:

Afegir un mètode a l'objecte

(En gris el codi ja explicat)

    Cal assenyalar que estem incrustant una funció dins del constructor de l'objecte.
    Per tant cal declarar la funció com a mètode de l'objecte:
    ( this.inverteix=invert_frac; )
    i a continuació, definir-la:

function fraccionari(a,b)
{
this.numerador=a;
this.denominador=b;
this.inverteix=invert_frac;

    function invert_frac()
      {
      aux= this.numerador;
      this.numerador=this.denominador;
      this.denominador=aux;
      }
}

   A partir d'ara, per a usar el mètode s'ha de fer d'una forma semblant a com s'usa una propietat.
    Donat l'objecte fraccionari   mig (1,2) o sigui 1/2.
    Si fem:
mig.inverteix();

mig serà igual a (2,1), o sigui 2/1

2.3.2.- Inclusió dels constructors necessaris per a quan no s'entren totes les dades:
    Quan s'entren el numerador i el denominador, la cosa ja està resolta.
    Quan s'entra un sol terme, s'entén que és el numerador, i que el denominador és 1.
    Quan no s'entra cap terme al constructor, és que la fracció és 0/1.
    El nombre d'arguments que s'entren, es detecta amb la funció arguments.length
    El primer terme, és el de l'esquerra. Per tant, si hi hagués tres termes, es descartaria el tercer.
    En el nostre exemple, si hi ha tres termes, es descarta tot, i té valor 0/1.

function fraccionari(a,b)
{
this.numerador=0;
this.denominador=1;

    if (arguments.length == 1)
     {
     this.numerador=a;
     this.denominador=1;
     }
    else
     {
         if (arguments.length == 2)
          {
           this.numerador=a;
           this.denominador=b;
          }
     }
this.inverteix=invert_frac;

function invert_frac()
      {
      aux= this.numerador;
      this.numerador=this.denominador;
      this.denominador=aux;
      }
}

3.- Funcions necessàries per a construir una calculadora de fraccions:

3.1.- Suma de fraccions:
S'usa la funció ja creada sense modificacions.

function suma (fa,fb)
{
return suma_frac(fa,fb);
}

3.2.- Resta de fraccions:
S'usa la funció ja creada canviant el signe del numerador.

function resta (fa,fb)
{
fb.numerador=-fb.numerador;
return suma_frac(fa,fb);
}

3.3.- Multiplicació de fraccions:
S'usa la funció ja creada sense modificacions.

function multiplica (fa,fb)
{
return multi_frac(fa,fb);
}

3.4.- Divisió de fraccions:
S'usa la funció ja creada invertint la segona fracció.

function divideix (fa,fb)
{
fb.inverteix();
return multi_frac(fa,fb);
}

4.- Funcions necessàries per a relacionar-se amb el codi html:

Al codi html hi ha d'haver unes finestres amb les claus <input> .... </input> que contindràn les dades.
Hem d'agafar les dades d'aquí, i escriure els resultats.
A dins del form (el formulari per a entrada i extracció de dades d'una pàgina html) hi ha una clau <select> ... </select> que conté un array de les diferents opcions:
+,-,*,/ . El llenguatge javascript pot accedir als valors d'aquest array:
En aquest cas sols volem saber quina opció és la seleccionada en aquest moment.
això ho sabem llegint la propietat :
form.prc.selectedIndex
(A la pàgina html hem definit que l'objecte de selecció es diu prc: <select name="prc" size="1" onChange="mira_ho_tot(form)">)

function mira_ho_tot(form)
{

var opcio=form.prc.selectedIndex;
    var numa=form.numerador1.value;
    var denoa=form.denominador1.value;
    var numb=form.numerador2.value;
    var denob=form.denominador2.value;
    fa=new fraccionari(numa,denoa);
    fb=new fraccionari(numb,denob);
    fc=new fraccionari();

if (opcio==0)
{
fc=suma(fa,fb);
}
else
{
if(opcio==1)
   {
   fc=resta(fa,fb);
   }
else
   {
   if(opcio==2)
    {
    fc=multiplica(fa,fb);
    }
   else
    {
    if(opcio==3)
     {
     fc=divideix(fa,fb);
     }
    else
     {
     alert("Error!");
     }
    }
   }
}
form.numerador3.value=fc.numerador;
form.denominador3.value=fc.denominador;
}

5.- Codi HTML (Sols la part del form)

<form name="form">
<table>
<caption><font face="arial">Calculadora de fraccions</font>
<tr>
<td><input type="text" name="numerador1" value="0" size="3" onChange="mira_ho_tot(form)"></td>
<td> </td>
<td><input type="text" name="numerador2" value="0" size="3" onChange="mira_ho_tot(form)"></td>
<td> </td>
<td><input type="text" name="numerador3" value="0" size="3"></td>
</tr>
<tr>
<td>---------</td>
<td><select name="prc" size="1" onChange="mira_ho_tot(form)"><option>+</option><option>-</option><option>*</option><option>/</option></select></td>
<td>---------</td>
<td> = </td>
<td>---------</td>
</tr>
<tr>
<td><input type="text" name="denominador1" value="1" size="3" onChange="mira_ho_tot(form)"></td>
<td> </td>
<td><input type="text" name="denominador2" value="1" size="3" onChange="mira_ho_tot(form)"></td>
<td> </td>
<td><input type="text" name="denominador3" value="1" size="3"></td>
</tr>
</table>
</form>

6.- Tota la pàgina amb l'script incrustat:

function fraccionari(a,b)
{
this.numerador=0;
this.denominador=1;

if (arguments.length == 1)
{
this.numerador=a;
this.denominador=1;
}
else
{
if (arguments.length == 2)
{
this.numerador=a;
this.denominador=b;
}
}
this.inverteix=invert_frac;

function invert_frac()
{
aux= this.numerador;
this.numerador=this.denominador;
this.denominador=aux;
}
}

function suma_frac(fa,fb)
{
var nou_numerador_a = fa.numerador * fb.denominador;
var nou_numerador_b = fb.numerador * fa.denominador;
var nou_numerador = nou_numerador_a + nou_numerador_b;
var nou_denominador = fa.denominador * fb.denominador;
resultat_frac=new fraccionari (nou_numerador,nou_denominador) ;
return resultat_frac;
}

function multi_frac(fa,fb)
{
var nou_numerador = fa.numerador * fb.numerador;
var nou_denominador = fa.denominador * fb.denominador;
resultat_frac=new fraccionari (nou_numerador,nou_denominador);
return resultat_frac;
}

function suma (fa,fb)
{
return suma_frac(fa,fb);
}

function resta (fa,fb)
{
fb.numerador=-fb.numerador;
return suma_frac(fa,fb);
}

function multiplica (fa,fb)
{
return multi_frac(fa,fb);
}

function divideix (fa,fb)
{
fb.inverteix();
return multi_frac(fa,fb);
}

function mira_ho_tot(form)
{
var opcio=form.prc.selectedIndex;
    var numa=form.numerador1.value;
    var denoa=form.denominador1.value;
    var numb=form.numerador2.value;
    var denob=form.denominador2.value;
    fa=new fraccionari(numa,denoa);
    fb=new fraccionari(numb,denob);
    fc=new fraccionari();

if (opcio==0)
{
fc=suma(fa,fb);
}
else
{
if(opcio==1)
   {
   fc=resta(fa,fb);
   }
else
   {
   if(opcio==2)
    {
    fc=multiplica(fa,fb);
    }
   else
    {
    if(opcio==3)
     {
     fc=divideix(fa,fb);
     }
    else
     {
     alert("Error!");
     }
    }
   }
}

form.numerador3.value=fc.numerador;
form.denominador3.value=fc.denominador;
}
</script>

7.- Veure l'aplicació en funcionament:

objectes.html