Úvod do objektů

Pamela ukazuje, jak během programování upravovat objekty a jak pomocí nich měnit nebo přidávat nové vlastnosti.

Udělala jsem program,

který o Winstonovi prozrazuje
řadu zajímavých detailů.

Ale neprozrazuje úplně vše,
protože si to Winston nepřeje.

Tak to prostě Winston chce.

Pojďme se podívat, jak jsem
tento program vytvořila.

Nejdřív jsem vytvořila proměnné,
které v sobě ukládají části informací.

První proměnná obsahuje
číslo, Winstonův věk.

Druhá proměnná obsahuje
textový řetězec, jeho oči.

A třetí proměnná obsahuje
pole řetězců,

což jsou věci, které
Winston rád dělá.

A poslední dvě proměnné
obsahují řetězce,

které popisují Winstonovo
místo narození.

A tady dolů jsem informace vypsala
pomocí textových příkazů a proměnných.

U pole musím samozřejmě
zpřístupnit každý z jeho prvků.

K tomu používám
zápis v závorce.

Všech pět proměnných popisují
jednu a tu samou věc: Winstona.

Proměnné ale nevědí,
že popisují tu samou věc.

Když chceme v JavaScriptu uložit
hromadu souvisejících informací,

používáme k tomu
mnohem lepší způsob.

A tím způsobem je "objekt".

To znamená, že namísto pěti
proměnných nám stačí jedna,

která všechny naše
informace uloží pohromadě.

Pojďme si to vyzkoušet
na Winstonových informacích.

Nejdříve si vytvoříme proměnnou
a nazveme ji Winston.

Poté vložíme složené závorky.

Dejte si pozor, aby byly
složené a ne hranaté.

A na konec dáme prostředník.

Vytvořili jsme objekt!

Neobsahuje ale žádné informace.

Aby nějaké informace obsahoval,
musíme mu dát nějaké vlastnosti.

A každá vlastnost se skládá
z klíče a hodnoty.

Věk napíšeme následovně:
age: 19.

A oči napíšeme takhle:
eyes: "black"

Winston má teď uvnitř
svého objektu dvě vlastnosti.

Pro koníčky napíšeme "likes: "
a překopírujeme horní část kódu.

Takže Winston už má
tři vlastnosti.

Každá z vlastností má klíč,
který je na levé straně,

a pak hodnotu,
která je na pravé straně.

Pro klíč platí stejná pravidla jako
pro jména proměnných v JavaScriptu.

Žádné mezery, začínáme
písmenem a tak dále.

Co se týče hodnoty,

může se jednat o jakoukoli hodnotu,
na kterou jsme zatím narazili.

Může to být číslo, řetězec, pole...

Mohl by to dokonce být i boolean.

Můžeme napsat "isCool: true",
což je samozřejmě pravda.

Popravdě můžeme jako hodnotu
použít i nějaký jiný objekt.

Například město a stát
narození jsou informace,

které popisují tu samou věc.

Jedno a to samé místo.

Dávalo by proto smysl, abychom
hodnotu uložili jako objekt.

Přidám další klíč,
místo narození.

A jako hodnotu nejdřív
vložím složené závorky.

Uvnitř pak budu mít klíč
pro město, "city: ".

"Mountain View"

A stát, "state: ".

"California".

A teď už můžete do objektu
ukládat celkem detailní informace.

A protože už máme
tento pěkný objekt,

který o Winstonovi
prozrazuje zajímavé informace,

můžeme všechny tyto
zastaralé proměnné smazat.

A dostali jsme chybové hlášení!

Je to kvůli tomu, že naše textové
příkazy odkazují na staré proměnné.

Musíme informace aktualizovat
a použít informace z objektu.

Začneme tím, že zakomentujeme
poslední tři řádky kódu,

abychom je mohli
aktualizovat jeden po druhém.

Momentálně zde máme "winstonAge"
a potřebujeme to něčím nahradit.

Nejprve napíšeme "winston",
což je název proměnné.

Všimněte si, že pokud to necháme tak,
dostaneme hlášení "object Object".

A to není vůbec hezké.

Je to zpráva JavaScriptu,

která nám říká, že se snažíme převést
celý objekt do řetězcové hodnoty.

My se ale snažíme získat
pouze vnitřní hodnotu pro věk.

Takže za to napíšeme tečku,
"winston." a napíšeme název klíče.

Klíčem je "age".

A máme věk!

Toto se nazývá tečkový zápis.

Je to typ zápisu,

kdy nejprve napíšeme název proměnné
objektu, tečku a pak klíč dané vlastnosti.

Podobně můžeme dodělat zbytek.

Tohle odkomentuji.

A namísto "winstonEyes"
napíšeme "winston.eyes".

A tady to bude "winston.likes".

A potom "winston.likes[1]".

A pro tento poslední to bude
o trošku komplikovanější,

protože se jedná o objekt
uvnitř jiného objektu.

Napíšeme "winston.birthplace",

což ale pořád odkazuje
k celému objektu.

A proto musíme napsat
"winston.birthplace.city".

A tady napíšeme
"winston.birthplace.state".

Toto se celkem hodí,

protože se můžete vnořovat
do objektů, které jsou v objektech.

Jak můžete vidět,

objekty jsou skvělým způsobem, jak
uložit související informace pohromadě.

Můžeme je pak později
vyhledat a použít.

A čím více je budete používat,
tím více budete z objektů nadšeni!