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

Els objectes en JavaScript

1. Programació amb objectes en JavaScript
2. Creació dels nostres objectes
1. Inizcialització d'objectes
2. Constructors d'objectes
3. Mètodes dels objectes
4. Herència
5. Altres utilitats
3. Objectes predefinits del nucli del llenguatge JavaScript
1. Objecte Array
2. Objecte Boolean
3. Objecte Date
4. Objecte Function
5. Objecte Math
6. Objecte Number
7. Objecte RegExp
8. Objecte String
4. Objectes del navegador
5. El events de JavaScript

3.1 Programació amb objectes en JavaScript

Diferents tipus d'objectes

• En JavaScript podem declarar els nostres objectes (classes i instàncies d'aquestes classes) per mitja del DOM de Java Script (Document object model).
• També hi ha una sèrie d'objectes ja definits com els objectes Array, Math, Date, etc. objectes del nucli de Java Script
• Tenim accés al conjunt d'objectes que es crea en el moment d'executar una pàgina HTML, ASP, XML etc. en el navegador. És el conjunt d'objectes del costat del client.
• Naturalment existeixen els objectes necessaris per tal d'executar en el servidor que constitueixen els objectes del costat del servidor i que no s'executen en el navegador.
• En darrer lloc, esmentar que també tenim accés als objectes que es creen en el navegador quan a un TAG li donem un ID o un NAME i podem accedir de manera dinàmica a les propietats d'aquests tags (Aquest darrer apartat és el que s'anomena DHTML).

3.2 Creació dels nostres objectes

Si tenim ja creat un objecte miCotxe amb les propietats Marca, Model i Any podem accedir a aquestes propietats de la manera següent:

miCotxe.Marca="Seat"
miCotxe.Model="Ibiza"
miCotxe.Any="2000"

En realitat les propietats d'un objecte són un vector de valors amb un nom de variable associat. De fet un array i un objecte en JavaScript són diferents interfaces per a una mateixa estructura interna de dades.

Així que podem accedir a les dades d'un objecte de la mateixa manera que a les de un vector.

Si volem veure en el navegador el valor de les propietats de miCotxe podem escriure

document.write(miCotxe["Marca"]);
document.write(miCotxe["Model"]);
document.write(miCotxe["Any"]);

A l'exemple següent veiem com podem fer ús de les propietats de l'objecte miCotxe per tal d'accedir als seus valors.

Exemples d'objecte

Visualització per pantalla

<script>    function Cotxe(Marca, Model, Any)    {       this.Marca=Marca || "";       this.Model=Model || "";       this.Any=Any || "";    }    miCotxe = new Cotxe();    miCotxe.Marca="Seat";    miCotxe.Model="Ibiza"    miCotxe.Any="2000";    document.write(miCotxe["Marca"],"<br>");    document.write(miCotxe["Model"],"<br>");    document.write(miCotxe["Any"],"<br>");    function MostraPropietats(Objecte, NomObjecte)    {       var Cadena       for (var PropietatI in Objecte)       {          Cadena = NomObjecte +"." + PropietatI + " = " +          Objecte[PropietatI] + "<br>";          document.write(Cadena);       }    }    MostraPropietats(miCotxe,"miCotxe"); </script>

3.2.1 Inizcialització d'objectes

Mitjançant la següent instrucció creem l'objecte Disquete1 amb les propietats Color i Títol que tenen els valors Vermell i Ús diari:

És evident que entre les claus podem posar una llista de propietats i valors que assignem. Entre els elements de la llista podem afegir la creació d'un nou objecte i així creem un arbre d'objectes.

A la declaració següent fem l'objecte Disquete2 que té com a propietat l'objecte Característiques amb les propietats Capacitat i Mida.

Així per accedir ara a les propietats de l'objecte Caracteristiques hem de fer ús de la notació:

Exemples d'objecte creat amb inicialitzador

Visualització per pantalla

<script>    Disquete1 = {Color : "Vermell", Titol:"Us diari"};    document.write("Color: ",Disquete1["Color"]);    document.write("<br>")    document.write("Títol: ",Disquete1["Titol"]);    document.write("<br>")    Disquete2 = {Color:"Vermell", Titol:"Us diari", Caracteristiques:{Capacitat:"1.4", Mida:"Estandar"}};    document.write("Capacitat disquete 2: ", Disquete2.Caracteristiques.Capacitat);    document.write("<br>")    document.write("Mida disquete 2: ",Disquete2.Caracteristiques.Mida); </script>

3.2.2 Constructors d'objectes i propietats

La funció constructora ens permet declarar un nou tipus d'objecte i amb new podem crear tantes instàncies de l'objecte com siguin necessàries.

A l'exemple d'objecte hem creat un nou tipus d'objecte amb la funció constructora Cotxe:
 

                function Cotxe(Marca, Model, Any)
                {
                 this.Marca=Marca || "";
                 this.Model=Model || "";
                 this.Any=Any || "";
                }

                miCotxe = new Cotxe();

                miCotxe.Marca="Seat";
                miCotxe.Model="Ibiza"
                miCotxe.Any="2000";

                miCotxe = new Cotxe("Seat", "Ibiza", "2000");

Senyalem que podem posar com a propietats d'un objecte altres objectes, com ja hem comentat al punt anterior.

Aquest mètode ens permet crear instàncies diferents i serà el mètode més norma de crear objectes; també ens permetrà crear vectors d'objectes:

                cotxeEmpresa = new Cotxe("Peugeot", "205", "2003");

En el cas de les propietats dels objectes d'una pàgina HTML, com els vectors de formularis de l'objecte document, ens podem referir de tres formes diferents:

   document.forms[1]                Pel segon formulari del document
   document.forms["miFormuari"]     Pel seu nom
   document.miFormulari             Pel seu nom

3.2.3 Mètodes dels objectes Els objectes poden tenir mètodes, que en realitat són funcions associades al tipus d'objecte. Podem fer l'associació d'una funció a un tipus d'objecte amb una instrucció com la següent:

         Objecte.NombreMetode = NombreFuncio

Encara que podem assignar una funció a un mètode amb nombre diferent es normal donar el mateix nom a la propietat i a la funció.

A l'exemple següent afegim a l'objecte Cotxe el mètode que mostra les seves propietats MostraPropietats dins la funció constructora

    this.MostraPropietats = MostraPropietats;

    miCotxe.MostraPropietats();

   function MostraPropietats()
   {
      document.write("Marca: ", this.Marca, <br>");
      document.write("Model: ", this.Model, <br>");
      document.write("Color: ", this.Color, "<br>");
      document.write("Any: ", this.Any, "<br>");
   }

<script>
   function Cotxe(Marca, Model, Any, Color)
   {
      this.Marca=Marca || "";
      this.Model=Model || "";
      this.Any=Any || "";
      this.Color = Color;
 
      this.MostraPropietats = MostraPropietats;
   }

   function MostraPropietats()
   {
      document.write("Marca: ", this.Marca, <br>");
      document.write("Model: ", this.Model, <br>");
      document.write("Color: ", this.Color, "<br>");
      document.write("Any: ", this.Any, "<br>");
   }

   miCotxe = new Cotxe("Seat","Ibiza","2000","Vermell");
   miCotxe.MostraPropietats();
</script>

3.2.4 Herència

Considerem l'arbre de la figura. Veiem que existeixen els objectes Vehicle, Vterrestre, VtraccionMotor, VtraccionAnimal i VehiculoAereo. Les condicions de propietats i mètodes d'aquest objectes són les següents.
 

Així que hem de crear un arbre en el que l'objecte arrel és l'objecte Vehicle. Aquest té dos fills, els objectes VTerrestre i VehiculoAereo. L'objecte Vterrestre té també dos fills que són els objectes VTraccionMotor y VTraccionAnimal.
 

Descripció objectes	Codificació dels objectes
Objecte Vehiculo: Com que aquest objecte és l'objecte arrel la seva funció constructora és igual que la explicada al paràgraf anterior.	function Vehiculo(Marca, Color, Tipo) {  this.Marca = Marca || "";  this.Color = Color || "";  this.Tipo = Tipo || "";  this.ImprimeVehiculo = ImprimeVehiculo  };          function ImprimeVehiculo() {  document.write("Marca: ",this.Marca,"<br>");  document.write("Color: ",this.Color,"<br>");  document.write("Tipo: ",this.Tipo,"<br>"); }
Objecte Vterrestre: En la funció constructora d'aquest objecte veiem les dues instruccions següents   this.Padre = Vehiculo; this.Padre(Marca, Color, Tipo); Aquestes instruccions fan que els objectes de tipus Vterrestre heretin les propietats i els mètodes dels objectes Vehiculo. També és necessària la instrucció que tenim després de la funció:   VTerrestre.prototype = Vehiculo; Fem notar que en el moment de cridar a la funció constructora de l'objecte Vehicle li passem els paràmetres adients de Marca, Color i Tipo.	function VTerrestre(Marca, Color, nRuedas, Tipo) {  this.NumRuedas = nRuedas || 0;  this.Padre = Vehiculo;  this.Padre(Marca, Color, Tipo);            this.ImprimeVTerrestre = ImprimeVTerrestre; } VTerrestre.prototype = Vehiculo;          function ImprimeVTerrestre() {  this.ImprimeVehiculo();  document.write("Número de ruedas: ", this.NumRuedas,"<br>"); }
Objecte VtraccionMotor: Aquest objecte té una funció constructora que li fa ser fill de la classe Vterrestre la qual cosa li fa tenir totes les propietats de Vterrestre, incloent les de Vehicle ja que Vterrestre les tenia. Es a dir que VtraccionMotor hereta a Vterrestre que hereta de Vehicle.	function VTraccionMotor(Marca, Color, nRuedas, CC, Tipo) {  this.CentimetrosCubicos=CC || 0;  this.Padre = VTerrestre;  this.Padre(Marca, Color, nRuedas, Tipo);             this.ImprimeVTMotor=ImprimeVTMotor; } VTraccionMotor.prototype = VTerrestre;           function ImprimeVTMotor() {   this.ImprimeVTerrestre();   document.write("C. Cubicos: ",this.CentimetrosCubicos,"<br>"); }
Objecte VtraccioAnimal: És un objecte que a l'arbre que estem construint es troba en el mateix nivell que VtraccionMotor i que té els mateixos antecessors.	function VTraccionAnimal(Marca, Color, nRuedas, Animal, Tipo) {  this.Animal=Animal;  this.Padre = VTerrestre;  this.Padre(Marca, Color, nRuedas, Tipo);            this.ImprimeVTAnimal=ImprimeVTAnimal; }  VTraccionAnimal.prototype = VTerrestre;  function ImprimeVTAnimal() {   this.ImprimeVTerrestre();   document.write("Animal: ",this.Animal,"<br>"); }
Objecte VehiculoAereo: Aquest objecte està en el nivell de l'objecte Vterrestre i hereta de l'objecte arrel Vehiculo.	function VehiculoAereo(Marca, Color, nAlas, Tipo) {  this.Padre = Vehiculo;  this.Padre(Marca, Color, Tipo);  this.nAlas = nAlas;            this.ImprimeVAereo=ImprimeVAereo; }  VehiculoAereo.prototype = Vehiculo; function ImprimeVAereo() {  this.ImprimeVehiculo();  document.write("Numero Alas: ", this.nAlas) }

Veiem que el mecanisme d'herència ens permet tenir objectes cada cop més específics de manera que els objectes fills afegeixen propietats i mètodes als que hereten dels antecessors.

Nota important: En JavaScript no existeix l'herència múltiple, és a dir que un objecte no pot tenir més d'un objecte pare. 

3.2.5 Altres utilitats

3.3 Objectes predefinits del nucli del llenguatge JavaScript

Nota important: Recordem que els objectes tenen diferents propietats o mètodes segons tinguem el llenguatge JavaScript de Netscape o el del Internet explorer. Per aixó i d'aqui en endavant posarem només les propietats i mètodes comunes a tots dos models d'objectes.

Objecte Array

Ja hem tractat aquest tema a l'apartat de vectors del primer capítol on està explicat la forma de crear objectes array, donar valor als seus elements i referir-se a les dades d'aquest que tenim en els arrays. També s'explica com podem fer arrays bi-demensionals
 

Propietats

                   miVector.length

Mètodes

NuevoARray=unArray.slice(2,5)

Array.sort(function)

unString=unArray.toSource()

unString=unArray.toSource()

Objecte Boolean

Internament aquest dos estats estan representats per un 1 i un 0 respectivament.

Per a declarar un objecte de tipus Boolean hem de fer nomObjecteBoolean = new Boolean(valor) on valor pot ser o true o false.

Quan fem una instrucció de declaració varBool = Boolean(false) estem fent una variable de tipus Boolean que te valor false. No és un objecte de tipus Boolean. Són dues coses diferents. 

Objecte Date

Aquest objecte disposa de mètodes per a construir l'objecte a partir de unes certes dades, com la dat i hora, i d'altres mètodes per a obtenir la data o l'hora, tot allò a partir d'aquest número de mil·lisegons esmentat abans.
 

Constructors

Mètodes

Per tal de fer un exemple posem un rellotge en pantalla que mira l'hora que tenim en el nostre ordinador. Hem de dir que també es fa ús de les funcions setTimeout i clearTimeout que serveixen per a arrancar o aturar execució de funcions en un cert interval de temps.

Exemple de l'objecte date

Visualització per pantalla

<FORM NAME="reloj"> <center> <INPUT TYPE="text" NAME="texto" SIZE=12 VALUE =""><br> <input type=BUTTON value="Pon en marcha" onClick="ponEnMarchaReloj()"><br> <input type=BUTTON value="Para" onClick="paraReloj()"> </center> </FORM> <SCRIPT LANGUAGE="JavaScript"> <!-- var relojID = null var relojEnMarcha = false function paraReloj() {  if(relojEnMarcha) clearTimeout(relojID) relojEnMarcha = false } function ponEnMarchaReloj() {  paraReloj() muestraHora() }    function muestraHora() {  var ahora = new Date() var hora = ahora.getHours() var minutos = ahora.getMinutes() var segundos = ahora.getSeconds() var valorHora = "" + ((hora > 12) ? hora - 12 : hora) valorHora += ((minutos < 10) ? ":0" : ":") + minutos valorHora += ((segundos < 10) ? ":0" : ":") + segundos document.reloj.texto.value = valorHora relojID = setTimeout("muestraHora()",1000) relojEnMarcha = true } ponEnMarchaReloj(); //--> </SCRIPT>

També teniu un exemple de com fer ús d'aquest objecte en el calendari que es troba en la pàgina de Complements.

Objecte Function

<form name ="frmProva"
   <input type="text" name = "txtProva" value="" 
             onMouseover="ponText()">
   <input type="reset" value="Vacia""> 
</form">

<script">
  var ponText = new Function("document.frmProva.txtProva.value='Hola Pep'")
</script">

Objecte Math

Propietats de l'objecte Math

Funcions de l'objecte Math

Objecte Number

Objecte RegExp

Objecte String

<script>
  varSalutacio = "Hola Món";
  document.write("VarSalutació té ",varSalutacio.length," caràcters");
</script>

Mètodes de l'objecte String.

<script>
  var miString=new String("Capítol 1");
  document.write(miString.link("jscap01.html"));
</script>

<script>
   document.write("Vermell".fontcolor('#FF3300'));
</script>

<script>
   document.write("HOLA MARTA".charAt(3));
   document.write("HOLA MARTA".charCodeAt(3));
</script>

<script>
   miString = new String("0123456789");
   document.write(miString.slice(2,8));
   document.write("<br>",miString.slice(4));
</script>

<script>
  miString=new String("Los que se van no volverán");
  unVector=miString.split(" ");
  for(var i=0; i<unVector.length; i++)
  {
   document.write(unVector[i],"<br>");
  }
</script>