< Return to Video

Pole objektů

  • 0:01 - 0:04
    Pojďme se podívat na další věci,
    které můžeme s objekty dělat.
  • 0:04 - 0:08
    Máme zde program, který jsme
    používali v tutoriálu o funkcích.
  • 0:08 - 0:11
    Program obsahuje
    funkci drawWinston,
  • 0:11 - 0:14
    která kreslí Winstona
    na určitých pozicích x a y.
  • 0:15 - 0:18
    A pak zde dolů čtyřikrát
    voláme drawWinston,
  • 0:18 - 0:21
    ale pokaždé s jinými
    souřadnicemi x a y.
  • 0:22 - 0:26
    A jak mě znáte, když se na
    tyto čtyři řádky kódu podívám,
  • 0:26 - 0:32
    hned vidím, jak jsou si podobny
    a chci namísto toho použít cyklus.
  • 0:33 - 0:36
    Uvnitř cyklu by kód
    stačilo zavolat jenom jednou,
  • 0:36 - 0:39
    přičemž by se pokaždé
    změnily souřadnice x a y.
  • 0:40 - 0:45
    Abychom to provedli, musíme najít
    způsob, jak uložit pozice x a y jako pole.
  • 0:45 - 0:48
    Tak uděláme cyklus.
  • 0:48 - 0:50
    Máme dvě řady hodnot,
  • 0:50 - 0:56
    takže bychom mohli mít dva pole,
    jedno pro pozici x a druhé pro y.
  • 0:56 - 1:02
    Jako pozici x můžeme mít
    99, 294, 101 a 294.
  • 1:02 - 1:09
    Pro pozici y použijeme
    117, 117, 316, 316.
  • 1:10 - 1:12
    A teď můžeme udělat cyklus:
  • 1:12 - 1:19
    for (var i = 0;
    i < xPositions.length; i++)
  • 1:19 - 1:22
    Takže projdeme každý prvek
    pozice x a napíšeme:
  • 1:22 - 1:30
    drawWinston(xPositions[i],
    yPositions[i]);
  • 1:32 - 1:35
    Poďme zkusit, jestli to
    funguje a smažeme toto.
  • 1:35 - 1:36
    Funguje to!
  • 1:36 - 1:40
    Takže teď stačí přivolat
    tento jeden řádek kódu,
  • 1:40 - 1:45
    který Winstona nakreslí pro
    každou pozici x pole xPositions.
  • 1:46 - 1:49
    Můžeme jich přidat víc,
    stačí napsat například 10.
  • 1:49 - 1:58
    Můžeme napsat 1, pak 1,
    znovu 1 a potom 100 a 1.
  • 1:59 - 2:02
    Teď to vypadá trochu chaoticky.
  • 2:02 - 2:05
    A to se mi moc nelíbí,
    protože se těžko rozeznává,
  • 2:05 - 2:08
    které x náleží ke kterému y.
  • 2:08 - 2:15
    A já chci, abych se při pohledu
    na program v párech x-y orientovala.
  • 2:15 - 2:17
    Nechce se mi dávat pozor na to,
  • 2:17 - 2:21
    abych je nad sebou
    perfektně srovnala.
  • 2:23 - 2:27
    Chtěla bych najít jiný způsob,
    jak tyto pozice ukládat.
  • 2:27 - 2:31
    Mohli bychom je
    uložit jako objekty.
  • 2:31 - 2:36
    Každá pozici jsou vlastně
    dva kusy informací, x a y.
  • 2:36 - 2:39
    Mohli bychom mít objekt,
    který ma vlastnosti x a y.
  • 2:39 - 2:43
    A pak bychom mohli
    mít pole objektů,
  • 2:43 - 2:45
    které by všechny
    pozice x a y obsahovalo.
  • 2:45 - 2:46
    Pojďme to udělat.
  • 2:46 - 2:49
    Napíšeme:
    "var positions" rovná se.
  • 2:49 - 2:51
    A uvnitř bude pole.
  • 2:51 - 2:56
    Ale každý jeho element bude
    namísto čísla objektem.
  • 2:56 - 2:59
    Zde máme složené závorky
  • 2:59 - 3:05
    A pak napíšeme x: 99, y: 117.
  • 3:06 - 3:09
    Tím jsme uložili jednu
    z našich pozic.
  • 3:09 - 3:13
    Teď přidáme další.
  • 3:14 - 3:19
    Napíšeme x: 294, y: 117.
  • 3:19 - 3:24
    Třetí bude x: 101, y: 316.
  • 3:26 - 3:31
    A poslední x: 294, y: 316.
  • 3:32 - 3:35
    A teď máme pole objektů,
  • 3:35 - 3:38
    ve kterém má každý objekt
    svoje vlastnosti x a y.
  • 3:39 - 3:43
    A tady dolů v našem cyklu for
    změníme toto takovým způsobem,
  • 3:43 - 3:49
    že se bude opakovat positions.legth
    a pak sem dolů předáme objekty.
  • 3:49 - 3:54
    Momentálně to předává celý objekt,
    ale my chceme předat jen x a y.
  • 3:54 - 3:59
    Takže napíšeme:
    "positions[i].x" a "positions[i].y".
  • 4:01 - 4:04
    Teď můžeme smazat
    tyto seskupená pole.
  • 4:05 - 4:10
    Náš kód je teď mnohem hezčí
    a zároveň je mnohem čitelnější.
  • 4:10 - 4:13
    A čím více čitelného kódu, tím lépe.
  • 4:13 - 4:16
    Mimo jiné je jednoduchší
    něco do kódu přidávat.
  • 4:16 - 4:24
    Mohla bych přidat pár souřadnic
    s hodnotami x: 200, y: 200.
  • 4:24 - 4:26
    A v prostředku se nám
    objeví Winston!
  • 4:28 - 4:31
    Nyní vám ukážu něco,
    co je ještě o něco lepší.
  • 4:32 - 4:37
    Všimněte si, že naše funkce
    momentálně očekává dva čísla.
  • 4:37 - 4:39
    Pak tyto dva čísla používá.
  • 4:39 - 4:42
    Můžeme naši funkci změnit tak,
    že namísto čísel očekává objekt.
  • 4:42 - 4:45
    A pak z tohoto objektu
    získá hodnoty x a y.
  • 4:45 - 4:50
    To znamená, že tady dolů
    by nám stačilo vložit objekt.
  • 4:50 - 4:51
    Pojďme to zkusit.
  • 4:51 - 4:54
    Máme zde jen objekt
    a je to pokazený.
  • 4:54 - 4:58
    A to proto, že naše funkce
    pořád očekává dva objekty.
  • 4:58 - 5:00
    A dostává pouze jeden.
  • 5:00 - 5:03
    Změníme to a řekneme,
    že dostane facePosition.
  • 5:03 - 5:05
    A dostali jsme chybu.
  • 5:05 - 5:07
    Říká, že faceX není definováno.
  • 5:07 - 5:10
    Protože předtím jsme ho
    použili jako argument,
  • 5:10 - 5:13
    teď ale neexistuje a
    předáváme pouze objekt.
  • 5:13 - 5:21
    Mohli bychom proto uložit
    pozici x objektu do proměnné faceX.
  • 5:21 - 5:25
    Říkáme tím, že máme tento objekt
    a víme, že má vlastnost x,
  • 5:25 - 5:28
    a proto ji uložíme do
    proměnné faceX.
  • 5:28 - 5:31
    A to samé můžeme
    udělat pro y:
  • 5:31 - 5:34
    faceY = facePosition.y
  • 5:35 - 5:39
    A zbytek funkce používá
    faceX a faceY.
  • 5:39 - 5:40
    Musíme je ale napsat správně.
  • 5:40 - 5:43
    Pokud bychom napsali xx,
    nebude to fungovat,
  • 5:43 - 5:47
    protože to tady dolů v našem
    poli objektů není.
  • 5:47 - 5:48
    Musí se to tedy shodovat.
  • 5:49 - 5:52
    Je to celkem užitečné, protože
    teď můžeme použít pole objektů,
  • 5:52 - 5:54
    dokonce i funkce pracující s objekty.
  • 5:55 - 6:01
    A jak zjistíte, vaše programy mohou
    být velmi efektivní s jejich použitím dat.
  • 6:01 - 6:04
    Obzvláště párování hodnot x a y
    je něčím velmi častým.
  • 6:04 - 6:09
    Věřím, že se vám hodí při tvorbě
    všech zdejších animací a kreseb.
  • 6:09 - 6:11
    Takže hurá na ta.
Title:
Pole objektů
Description:

Pamela ukazuje, jak ukládat pole objektů - velmi důležitý nástroj pro tvorbu vašich programů.

more » « less
Video Language:
English
Duration:
06:12

Czech subtitles

Incomplete

Revisions