JavaScriptovy objektovy model

JavaScript je zalozen na jednoduchem objektove orientovanem paradigmatu (vzoru). Objekt je konstrukt s vlastnostmi, ktere jsou JavaScriptovymi promennymi. Vlastnosti mohou byt taktez i jine objekty. Funkce, ktere jsou asociovany s objekty, jsou znamy jako objektove metody.

Navic k objektum, ktere jsou zabudovany do klienta Netscape Navigator a do serveru LiveWire si muzete definovat sve vlastni objekty.

• Objekty a vlastnosti
• Funkce a metody
• Vytvoreni noveho objektu

S JavaScriptovym objektem jsou neoddelitelne spojeny vlastnosti. Pristup na tyto vlastnosti je pres jednoduchou teckovou notaci :

objectName.propertyName

Jmeno objektu i vlastnosti jsou "case sensitive". Vlastnost se definuje prirazenim hodnoty, napr. predpokladejme, ze uz mame vytvoreny objekt myCar (pozdeji ukazeme jak vytvoreny) a muzeme mu pridat vlastnosti make, model, year takto :

myCar.make = "Ford"
myCar.model = "Mustang"
myCar.year = 69;

Pole je usporadana mnozina hodnot spojenych s jednim jmenem promenne. Vlastnosti a pole jsou si v JavaScriptu velmi blizke; de-facto jde o rozdilny inteface pro stejnou datovu strukturu. Takze napriklad muzete ziskat vlastnosti objektu myCar i takto :

myCar["make"] = "Ford"
myCar["model"] = "Mustang"
myCar["year"] = 67;

Naprosto ekvivalentne i timto zpusobem :

myCar[0] = "Ford"
myCar[1] = "Mustang"
myCar[2] = 67;

Tento typ pole je znam jako asociativni pole, protoze kazdy prvek seznamu je take spojen s hodnotou retezce. Na priblizeni toho jak toto pracuje nasledujici funkce zobrazi vlastnosti objektu, kdyz ji zadate objekt a jmeno objektu jako argumenty :

function show_props(obj, obj_name) {
    var result = ""
    for (var i in obj)
        result += obj_name + "." + i + " = " + obj[i] + "\n"
    return result;
} 

Takze, volani funkce show_props(myCar, "myCar") vraci nasledujici :

myCar.make = Ford
myCar.model = Mustang
myCar.year = 67

Funkce jsou jednim ze zakladnich kamenu v jazyku JavaScript. Funkce je JavaScriptova procedura - mnozina prikazu, ktere vykonanvaji urcitou specifickou ulohu.

Definice funkce se sklada z klicoveho slova function, nasledovaneho

• jmenem funkce
• seznamem parametru funkce, uzavrenych v zavorkach, a oddelenych carkama
• JavaScript prikazy, ktere definuji funkci, uzavrene ve slozenych zavorkach, {...}

V aplikaci Navigator muzete pouzit kteroukoliv funkci definovanou na dane strance. Obecne je dobry napad definovat vsechny funkce v HEAD (hlave) stranky. Kdyz si uzivatel nahraje stranku tak bude mit funkce jiz pripravene.

Prikaz ve funkci muze obsahovat volani jinych funkci, ktere jsou definovany pro danou aplikaci.

Napriklad zde je definice jednoduche funkce nazvane pretty_print :

Tato funkce vezme retezec jako svuj argumnet, prida nejake HTML tagy pomoci konkatenace (+) a pak zobrazi vysledek do dokumnetu.

Definice funkce ji ale nespusti !!! Musite funkci zavolat aby provedla to co ma. Napriklad muzete takto zavolat funkci pretty_print :

Parametry funkce nejsou limitovany pouze na retezce a cisla. Je mozno take predavat cele objekty a funkce. Funkce show_props je prikladem funkce ktera si bere objekt jako argument.

Funkce muze bvt dokonce i rekurzivni, tj. muze volat sama sebe. Jednoduchy priklad na vypocet faktorialu :

function factorial(n) {
  if ((n == 0) || (n == 1))
    return 1
  else {
    result = (n * factorial(n-1) )
    return result
  }
}

Tuto funkci muzete volat s argumentem od 1 do 5 ve smycce :

for (x = 0; x < 5; x++) {
   document.write(x, " factorial is ", factorial(x))
   document.write("
")
}

Vysledek bude takovyhle :
0 factorial is 1
1 factorial is 1
2 factorial is 2
3 factorial is 6
4 factorial is 24
5 factorial is 120

Metody

Metoda je funkce asociovana s objektem. Metodu definujeme uplne stejne jako definujeme standardni funkci. Pak pouzijeme nasledujici syntaxi na spojeni funkce s existujicim objektem :

object.methodname = function_name

Muzete volat metodu v kontextu s objektem takto :

object.methodname(params);

Pouziti "this" pro objektove reference

JavaScript ma specialni klicove slovo this, ktere muzete pouzit k odkazu na soucasny objekt. Tak napriklad predpokladejme funkci nazvanou validate, ktera zvaliduje hodnotu vlastnosti objektu, pri zadani objektu a nejnizsi a nejvyssi hodnoty :

function validate(obj, lowval, hival) {
   if ((obj.value < lowval) || (obj.value > hival))
      alert("Invalid Value!")
}

Pak muzete zavolat validate v kazdem prvku formulare pri pouziti onChange event handleru a pomoci this predat prvek formulare tak jako v nasledujicim prikladu :

Obecne, v metode this odkazuje na volajici objekt.

Vytvoreni noveho objektu

Klient i server JavaScript mam radu preddefinovanych objektu. Navic si muzete vytvorit sve vlastni objekty, coz obnasi dva kroky :

• Definovat typ objektu pomoci napsani funkce.
• Vytvorit instanci objektu pomoci new.

Chceme-li definovat objekt vytvorime funkci pro tento objektovy typ, ktera bude specifikovat jeho jmeno, vlastnosti a metody. Napriklad predpokladejme, ze chceme vytvorit objekt pro auta. Chceme aby se tento typ objektu jmenoval car a jeho vlastnosti byly make, model, year, a color. Abychom toto splnili vytvorime nasledujici funkci :

function car(make, model, year) {
   this.make = make;
   this.model = model;
   this.year = year;
}

Pouziti this nam priradi hodnoty k objektovym vlastnostem podle hodnot predanych funkci.

A nyni muzete vytvorit objekt nazvany mycar :

mycar = new car("Eagle", "Talon TSi", 1993);

Tento prikaz vytvori mycar a priradi mu specificke hodnoty pro jeho vlastnosti. Pak hodnotou mycar.make je retezec "Eagle", mycar.year cele cislo 1993, a tak dale.

Muzete vytvorit jakekoliv mnozstvi objektu typu car dalsimi volanimi new. Napriklad

kenscar = new car("Nissan", "300ZX", 1992)

function person(name, age, sex) {
   this.name = name;
   this.age = age;
   this.sex = sex;
}

rand = new person("Rand McNally", 33, "M")
ken = new person("Ken Jones", 39, "M")

function car(make, model, year, owner) {
   this.make = make;
   this.model = model;
   this.year = year;
   this.owner = owner;
}

car1 = new car("Eagle", "Talon TSi", 1993, rand);
car2 = new car("Nissan", "300ZX", 1992, ken)

car2.owner.name

car1.color = "black"

function displayCar() {
   var result = "A Beautiful " + this.year
                + " " + this.make + " " + this.model;
   pretty_print(result)
}

this.displayCar = displayCar;

function car(make, model, year, owner) {
   this.make = make;
   this.model = model;
   this.year = year;
   this.owner = owner;
   this.displayCar = displayCar;
}

car1.displayCar()
car2.displayCar()