10 - Javascript objektid ja nende moodustamine PDF Trüki
Kirjutas Mario Metshein   

Andmete organiseerimiseks kasutatakse Javascriptis objekte. Objekt on kogum muutujatest (parameetritest, omadustest) ja funktsioonidest (meetoditest). Omadusteks võivad olla kas Javascripti muutujad või teised objektid.

Javascripti programmides saab vajaduse korral moodustada soovikohaseid objekte ning kasutada ka sisseehitatud objekte. Sisseehitatud objektid on:

  • Array (massiiv)
  • Date (kuupäevaobjekt)
  • String (tekstiobjekt)
  • Math (matemaatikaobjekt)

Seoses veebilehitsejaga ja selle aknas kuvatava veebilehega tekivad nn brauseri objektid

  • window
  • navigator
  • frames
  • location
  • history
  • document

Iga dokument võib omakorda sisaldada mitmeid objekte

  • form
  • image
  • area
  • jt

Kõik need objektid koos moodustavad hierarhia. Dokumendiga seotud objektide hierarhia moodustab objekti dokument mudeli (DOM - document object model)

Moodustamine

Objekti mooduistamiseks saame kasutada initsialisaatorit:

  1. objekti_nimi={omadus1:väärtus1, omadus2:väärtus2, ...}

Kui on vaja modoustada objekt opilased omadustega enimi, pnimi, vanus, elukoht, siis teeme seda järgmiselt...

  1. opilane1=(enimi: "Einar", pnimi:"Kootikumidele", vanus:20, elukoht:"Haapsalu");

Uue objekti võib moodustada ka konstrueerimisfunktsiooni ja operaatori new abil. Konstrueerimisfunktsioon määrab objekti struktuuri.
Võtmesõna this kasutatakse funktsiooni sees jooksva objekti omadustele väärtuste määramiseks - seega saab objekti opilased jaoks moosustada konstrueerimisfunktsiooni järgmiselt...

  1. function opilased(enimi,pnimi,vanus,elukoht)
  2.  {
  3.   this.enimi = enimi;
  4.   this.pnimi = pnimi;
  5.   this.vanus = vanus;
  6.   this.elukoht = elukoht;
  7.  }

Näitena toodud konstrueerimisfunktsiooni opilased ja operaatori new abil on moodustatud objektid opilane1, opilane2 ja opilane3.

  1.   opilane1=new opilased("Einar", "Kootikumidele", 20, "Haapsalu");
  2.   opilane2=new opilased("Karin", "Eegreid", 22, "Pärnu");
  3.   opilane3=new opilased("Ülle", "Doos", 18, "Tallinn");

Objektiga seotud funktsioonid on meetodid. Objekti meetodid panankse kirja avaldisega object.method.Koodi objekti opilane jaoks võiks näitena moodustada meetodi kuva(), mis prindib õpilaste nimekkirja

  1. function kuva()
  2.   {
  3.    var nimekiri=this.enimi+" "+this.pnimi+", "+this.vanus+" - "+this.elukoht;
  4.    document.write(nimekiri);
  5.   }

meetodi võib panna konstrueerimisfunktsiooni:

  1. function opilased(enimi,pnimi,vanus,elukoht)
  2.   {
  3.    this.enimi = enimi;
  4.    this.pnimi = pnimi;
  5.    this.vanus = vanus;
  6.    this.elukoht = elukoht;
  7.    this.kuva = kuva;
  8.   }

Meie programm moodustab objekti opilased  ja sellesse kuuluvad objektid opilane1, opilane 2 ja opilane3. Avaldisega opilane.kuva pöördutakse funktsioon kuva() poole. 

Kogu kood:

Objekti moodustamine
  1. <html>
  2. <head>
  3.   <title>Moodustamine</title>
  4. <script type="text/javascript">
  5.   //konstrueerimisefunktsioon
  6.   function opilased(enimi,pnimi,vanus,elukoht)
  7.     {
  8.       this.enimi = enimi;
  9.       this.pnimi = pnimi;
  10.       this.vanus = vanus;
  11.       this.elukoht = elukoht;
  12.       this.kuva = kuva;
  13.     }
  14.   //objekti moodustamine
  15.   opilane1=new opilased("Einar", "Kootikumidele", 20, "Haapsalu");
  16.   opilane2=new opilased("Karin", "Eegreid", 22, "Pärnu");
  17.   opilane3=new opilased("Ülle", "Doos", 18, "Tallinn");
  18.  
  19.   //õpilaste nimekirja kuvamise funktsioon
  20.   function kuva()
  21.     {
  22.       var nimekiri=this.enimi+" "+this.pnimi+", "+this.vanus+" - "+this.elukoht;
  23.     document.write(nimekiri);
  24.     }
  25.    
  26.   document.write("<h1>Õpilased</h1>");
  27.   document.write("<hr />");
  28.   opilane1.kuva(); //selle avaldisega pöördume funktsiooni poole kuva()
  29.   document.write("<hr />");
  30.   opilane2.kuva();
  31.   document.write("<hr />");
  32.   opilane3.kuva();
  33.   document.write("<hr />");
  34.  
  35. </script>
  36. </head>
  37. <body>
  38. </body>
  39. </html>

 

 

 
 
< Järgmine   Eelmine >
[ Tagasi ]

Lingid

ooo.jpeg getnotepad.jpg getsketchup.jpg

Viimati lisatud failid

HKHK esitlusmall
2009-09-05
Small Icons - 700tk
2008-06-30
Flag Icons
2008-06-30

Menüü

Foorum
Galerii