Objekt

Nám umožňuje reprezentovat prvky skutečného světa pomocí objektů ve zdrojovém kódu.

Objektem může být Firma, Osoba, Bankovní účet, ...

Objekt je prostor, který obsahuje:

• atributy = vlastnosti (např. jméno, číslo účtu, zůstatek), jim přidělujeme hodnoty, data
• funkce = metody, které pracují s těmito daty (např. vklad, výběr, ...)

Syntax a vnořování objektů je popsané v článku o JS.

var bankUcet = {
    cislo: 124578,
    zustatek: 25789
}

alert(bankUcet.zustatek);   // tečkový zápis = objekt.vlastnost (nebo objekt.metoda)

DOM (Document Object Model) = Objektový model dokumentu

V okně prohlížeče = Window se otevírá stránka = Document (stránka je textový dokument). Okno prohlížeče i stránka jsou objekty. 

Proto s jejich vlastnostmi a metodami pracujeme jako s objekty pomocí tečkového zápisu:

objekt.vlastnost=hodnota;
window.document.bgColor="blue"     // nastaví modré pozadí

window.document.write(window.document.bgColor);   // vypíše na stránku jakou barvu má pozadí této stránky

Protože window je v hierarchii nejvýše, (pro zjednodušení) není potřeba ho psát. Stačí document.write("text").

Metody objektů

S vlastnostmi bychom neměli pracovat přímo (přes bankUcet.zustatek), pro získání hodnoty nějaké vlastnosti bychom měli vytvořit metodu:

var bankUcet = {
    cislo: 124578,
    zustatek: 25789
    kolikPenez: function() {return bankUcet.zustatek;}
}

Hodnotu vlastnosti "zustatek" získáme zavoláním metody bankUcet.kolikPenez(), která vrátí zůstatek.

THIS

Místo zápisu {return bankUcet.zustatek;} píšeme {return this.zustatek;} 

THIS odkazuje na objekt, který ho vlastní, na element, ve kterém je obsažen. V našem případě na objekt "bankUcet". Říká KDO (čím), nebo KDE právě jsem?

Příklad:

<button id="btn" onMouseOver="this.style.color='red'" onMouseOut="btn.style.color='black'" >Najeďte myší na tlačítko</button>

Vlastníkem je element <button>. THIS je právě "uvnitř" tlačítka. Funkce je v tomto případě stejná, jako, když se odkazujeme na "id" elementu.

Objektově orientované programování (OOP) 

Třída je něco jako "konstruktér" objektu nebo „plán“ pro vytváření objektů. Třída reprezentuje skupinu objektů, které nesou stejné vlastnosti.

Třída představuje "objektový typ", samotný objekt se nazývá instancí třídy. Třída může mít libovolné množství instancí (objektů).

Konstruktor slouží k tomu, abychom řekli objektu, jaké hodnoty se mají přiřadit atributům (vlastnostem). Konstruktor naplní objekt počátečními údaji (daty). Konstruktor je "metoda" třídy.

Odkaz na celkem dobrý popis tohoto problému v Javě.

Příklad:

Třída je "auto"

Objekty jsou Škoda, Mercedes, Ford, ...

Všechna auta mají nějaké označení, výkon, barvu, ... řeč je o atributech (vlastnostech), které jsou u všech objektů v rámci třídy stejné, mění se ale hodnoty (Superb, 110 kW, bílá) přiřazené parametrům (v každém objektu je jiná hodnota přiřazená parametru).

Všechna auta mají v objektu v rámci třídy stejné metody: jeď, zastav, brzdi, ale volají se v různou dobu. 

Jiným příkladem třídy je "účet". Objekty jsou: "běžný, spořící". Vlastnosti uvnitř každého z těchto objektů jsou: "číslo účtu", "zůstatek". A metody: "vlož", "vyber".

HTML část (příklady)  

V HTML části se dá také vytvořit instance (princip jako událost):

<input type="button" onclick="const kabrio = new Auto('kabriolet','červená',120,220); kabrio.vypisParametry()" value="Vypiš parametry auta">

Jako argument u volané události v HTML můžeme použít i ID jiného elementu:

<input type="number" id="inputCislo" min="0" max="10" step="2"><br>
<button type="button" onclick="funkce(inputCislo)">Ukaz nastavene cislo</button>
<p id="zk"></p>

function funkce(inputElement) {
  document.getElementById("zk").innerHTML = inputElement.value;
}