< Return to Video

Vnořené cykly

  • 0:01 - 0:04
    Drahokam, a velmi pěkný drahokam!
  • 0:04 - 0:06
    Ale víte, co je lepší
    než jeden drahokam?
  • 0:06 - 0:08
    Je to celá řada drahokamů!
  • 0:08 - 0:10
    Nyní již samozřejmě víme,
  • 0:10 - 0:13
    že nejlepší způsob, jak řadu
    drahokamů udělat, bude cyklem.
  • 0:13 - 0:16
    Pojďme tedy použít cyklus for k
    nakreslení 12 drahokamů v řadě.
  • 0:16 - 0:20
    Zleva doprava přes obrazovku.
  • 0:20 - 0:22
    Takhle.
  • 0:22 - 0:31
    Napíšeme tedy:
    for (var i = 0; i < 12; i++).
  • 0:31 - 0:35
    Poté vezmeme tento řádek
    a přesuneme ho dovnitř, sem.
  • 0:36 - 0:38
    Takže zde máme 12 drahokamů,
  • 0:38 - 0:40
    ale všechny jsou momentálně
    nahrnuty přímo na sebe.
  • 0:40 - 0:43
    A my je chceme
    vidět přes obrazovku.
  • 0:43 - 0:46
    To znamená, že musíme
    upravit proměnnou x.
  • 0:46 - 0:50
    Proměnná x je nyní 36 a my chceme,
    aby měla pokaždé jinou hodnotu.
  • 0:50 - 0:52
    To znamená, že musí být x
    závislé na i.
  • 0:52 - 0:56
    Co můžeme udělat,
    je jednoduše napsat: i krát 36.
  • 0:56 - 1:02
    Takže první je na 0, pak 36
    a pak 72 atd.
  • 1:03 - 1:05
    Super, nyní máme
    řádek drahokamů.
  • 1:05 - 1:08
    Připomíná mi to jednu z těch scén
    v Indianě Jones nebo Aladdinovi,
  • 1:08 - 1:11
    kde hrdina v podzemní objeví
    pokladnice drahokamů.
  • 1:11 - 1:14
    Obvykle ale najdou
    mnohem více drahokamů než tohle.
  • 1:14 - 1:17
    Nejen řadu drahokamů,
    ale přímo hromadu drahokamů.
  • 1:17 - 1:24
    Jak tedy můžeme vyrobit další drahokamy,
    které by byly i směrem dolů po obrazovce?
  • 1:24 - 1:30
    No, mohli bychom začít opakováním
    cyklu for a zkopírovat ho sem.
  • 1:30 - 1:33
    Poté musíme pokaždé
    změnit proměnnou y.
  • 1:34 - 1:38
    Takže to změníme
    na 60 a poté na 90.
  • 1:38 - 1:44
    Nyní máme tři řady drahokamů,
    ale začíná to být velmi nudné,
  • 1:44 - 1:49
    protože jenom kopírujeme a vkládáme,
    přičemž měníme jenom tuto jednu věc.
  • 1:49 - 1:53
    Obvykle, když bychom přišli na to,
    že píšeme opakující se kód,
  • 1:53 - 1:57
    řekli bychom si: „Možná bychom
    místo toho měli použít cyklus. “
  • 1:57 - 1:59
    Jenže my již používáme cyklus.
  • 1:59 - 2:01
    Jaké je tedy řešení,
  • 2:01 - 2:04
    abychom se vyhnuly opakujícímu se
    kopírování a vkládání?
  • 2:04 - 2:09
    Je to něco, čemu říkáme "vnořené
    for cykly", tedy cyklus uvnitř cyklu.
  • 2:09 - 2:12
    Co tedy budeme dělat je to,
    že vytvoříme vnější cyklus,
  • 2:12 - 2:15
    který se postará o to,
    aby drahokamy šly dolů po obrazovce.
  • 2:15 - 2:19
    A pak se náš vnitřní cyklus
    postará o to, co dělá teď,
  • 2:19 - 2:21
    tedy aby drahokamy
    šly zleva doprava.
  • 2:22 - 2:24
    Hned vám ukážu,
    co mám na mysli.
  • 2:24 - 2:28
    Začneme "for" a použijeme
    novou proměnnou "j",
  • 2:28 - 2:30
    protože "i" už používáme.
  • 2:30 - 2:36
    for (var j = 0; j < 13; j++).
  • 2:37 - 2:41
    Takže to bude tedy náš vnější cyklus,
    pro směr od shora dolů.
  • 2:41 - 2:45
    A pak si prostě vezmeme
    jeden z našich předchozích for cyklů,
  • 2:45 - 2:49
    vložíme ho dovnitř a
    opravíme odsazení.
  • 2:50 - 2:52
    A tyto staré odstraníme.
  • 2:53 - 2:59
    Takže všechny cykly máme
    nahromaděné nahoře ve stejné řadě.
  • 2:59 - 3:01
    Teď chceme změnit y,
    je to tak?
  • 3:01 - 3:04
    To je to, co jsme změnili předtím,
    když jsme kód kopírovali.
  • 3:04 - 3:06
    A momentálně je y vždy 90.
  • 3:06 - 3:09
    A my chceme změnit y
    pro každý řádek.
  • 3:09 - 3:15
    Takže pokud je x závislé na i,
    chceme, aby y bylo závislé na j.
  • 3:16 - 3:25
    Můžeme to tedy změnit
    na něco jako: j krát 30.
  • 3:26 - 3:28
    Tolik drahokamů!
  • 3:30 - 3:32
    Pojďme si kód znovu
    projít a říct si, co dělá.
  • 3:32 - 3:37
    Vnější cyklus vytvoří proměnnou j
    a zvyšuje ji až na hodnotu 13.
  • 3:38 - 3:43
    Po každém vykonání tohoto vnějšího cyklu
    poběží i tento vnitřní cyklus.
  • 3:44 - 3:48
    Vnitřní cyklus vytvoří proměnnou i,
    která stoupá až na hodnotu 12.
  • 3:48 - 3:52
    A po každém provedení vnitřního cyklu
    se nakreslí obrázek na x a y,
  • 3:52 - 3:54
    které jsou založeny na i a j.
  • 3:55 - 3:59
    Proměnná i se kvůli tomu mění
    mnohem častěji mění než j.
  • 3:59 - 4:05
    Abychom to pochopili lépe,
    zkusme si hodnoty i a j vizualizovat.
  • 4:05 - 4:12
    Takže toto zakomentuji
    a pak nastavím barvu výplně.
  • 4:12 - 4:15
    Budu používat textový příkaz
    pro zobrazení hodnoty j.
  • 4:15 - 4:20
    Takže "text j" a pak to dám
    na příslušné místo zde.
  • 4:21 - 4:26
    Nyní můžeme vidět, jak
    se j pohybuje od 0 do 12.
  • 4:26 - 4:30
    To je v podstatě místo,
    kde jsou umístěny řady drahokamů.
  • 4:32 - 4:35
    A teď si vizualizujeme "i"
    a uvidíte, jak se mění.
  • 4:35 - 4:39
    Takže pro "i"
    uděláme jinou barvu.
  • 4:43 - 4:46
    Pak "i" někam dáme.
  • 4:46 - 4:49
    A jeho hodnotu x změníme tak,
    že jde přes obrazovku.
  • 4:49 - 4:53
    Uděláme to samé pro y.
  • 4:55 - 5:00
    Nyní můžeme vidět, že "i"
    jde od 0 do 11.
  • 5:00 - 5:04
    A "i", jak jsem říkala,
    se mění mnohem častěji.
  • 5:04 - 5:09
    Tento řádek kódu bude vykonán
    mnohem častěji, než tento řádek kódu.
  • 5:09 - 5:14
    Protože tento řádek kódu je spuštěn
    při každém provedení vnitřního cyklu,
  • 5:14 - 5:18
    zatímco tento řádek kódu se vykoná
    pouze při každém provedení vnějšího cyklu.
  • 5:19 - 5:27
    Doufám, že vám tato vizualizace i a j
    pomůže lépe pochopit vnořené for cykly.
  • 5:27 - 5:30
    Nyní vrátíme zpět naše drahokamy,
    protože jsou mnohem hezčí!
  • 5:30 - 5:34
    S vnořenými cykly toho
    můžete dělat opravdu mnoho.
  • 5:34 - 5:37
    Stačí popřemýšlet o čemkoliv,
    co na světě existuje.
  • 5:37 - 5:40
    Něco jako dvourozměrná mřížka,
    šachovnice, přikrývka,
  • 5:40 - 5:44
    hvězdy na americké vlajce,
    zajímavé vzory a tapety.
  • 5:44 - 5:47
    Nastartujte svou fantazii a
    pohrajte si s tímto kódem.
  • 5:47 - 5:49
    Například změňte obrázek.
  • 5:49 - 5:53
    Já začnu tím, že ho
    změním na srdce!
  • 5:54 - 5:58
    Abych vám ukázala, jak moc
    mám vnořené for cykly ráda!
Title:
Vnořené cykly
Description:

Pamela vysvětluje, jak používat vnořené cykly pro složitější opakující se kód.

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

Czech subtitles

Revisions