WEBVTT

00:00:01.066 --> 00:00:04.598
Protože už jsme se naučili používat text,
pojďme si s ním trochu pohrát.

00:00:04.598 --> 00:00:08.206
Nejprve použijeme „string"
neboli česky "řetězec“.

00:00:08.206 --> 00:00:11.205
Možná si pomyslíte:
"A co je to ten řetězec?".

00:00:11.205 --> 00:00:14.560
Je to název
pro text v kódu.

00:00:14.560 --> 00:00:16.996
Je to vlastně řetězec znaků.

00:00:16.996 --> 00:00:19.403
Vaše jméno je řetězec,
název vaší školy je taky řetězec.

00:00:19.403 --> 00:00:22.448
Každá textová zpráva,
kterou jste kdy poslali, je také řetězec.

00:00:22.448 --> 00:00:25.498
Jednoduše řečeno
řetězec se rovná text.

00:00:25.978 --> 00:00:28.425
Řetězce jsme již dříve
používali k malování.

00:00:28.425 --> 00:00:30.266
Ale mohli bychom použít proměnné
s řetězci?

00:00:30.266 --> 00:00:30.987
Samozřejmě!

00:00:30.987 --> 00:00:33.615
Stejně jako byste 
vložili číslo do proměnné,

00:00:33.615 --> 00:00:35.453
můžete do proměnné
dát i řetězec.

00:00:35.453 --> 00:00:39.781
Napíšeme tedy:
var myName rovná se a vaše jméno.

00:00:39.781 --> 00:00:40.965
Já napíšu "Sophia".

00:00:40.965 --> 00:00:42.599
a nezapomeneme na uvozovky.

00:00:42.599 --> 00:00:48.536
A teď do funkce místo „Sophia“ 
napíšeme myName.

NOTE Paragraph

00:00:48.536 --> 00:00:50.528
Přestože to
vypadá stejně,

00:00:50.528 --> 00:00:55.333
můžeme to nyní
napsat třeba několikrát.

00:00:55.333 --> 00:00:57.316
A můžeme být i víc kreativní.

00:00:57.316 --> 00:00:59.872
Stačí pouze
změnit tuto proměnnou.

00:00:59.872 --> 00:01:02.658
Můžu tam napsat třeba "Your name",
tedy anglicky "Vaše jméno".

00:01:02.658 --> 00:01:04.135
Nyní to tu máme
dokonce třikrát.

00:01:04.135 --> 00:01:06.513
Teď si to zase vratím zpátky,

00:01:06.513 --> 00:01:08.127
a co když si s tím zkusíme
ještě pohrát?

00:01:08.127 --> 00:01:10.081
Můžeme třeba
řetězce spojovat?

00:01:10.081 --> 00:01:13.009
Vzpomínáte, jak jsme 
dříve spojovali proměnné?

00:01:13.009 --> 00:01:14.581
To samé můžeme udělat i teď.

00:01:14.581 --> 00:01:17.063
Počítač prostě spojí
oba řetězce dohromady.

00:01:17.063 --> 00:01:19.547
Tyhle řádky si už smažu.

00:01:19.547 --> 00:01:23.268
Nechám tu jméno jen jednou a
vytvořím proměnnou nazvanou message.

00:01:23.268 --> 00:01:27.900
Ta bude obsahovat proměnnou myName
plus třeba několik vykřičníků.

00:01:27.900 --> 00:01:31.095
Pokud teď message vložíme do funkce text,
tak proměnnou nakreslí.

00:01:31.095 --> 00:01:33.830
Místo jména
vidíme jméno s vykřičníky.

00:01:33.830 --> 00:01:37.458
Příkaz přidal k našemu
jménu vykřičníky.

00:01:38.062 --> 00:01:40.402
Můžeme to dokonce udělat
ještě zajímavější.

00:01:40.402 --> 00:01:43.410
Třeba tuto proměnnou
necháme vypsat dvakrát.

00:01:43.410 --> 00:01:45.528
To vlastně dává celkem smysl.

00:01:45.528 --> 00:01:49.264
Sečtení řetězců znamená nalepit druhý
řetězec k zadní části prvního řetězce.

00:01:49.264 --> 00:01:51.797
Možná přemýšlíte, co jiného
můžeme s řetězci provádět.

00:01:51.797 --> 00:01:55.015
Můžeme je násobit nebo dělit
nebo odečítat?

00:01:55.811 --> 00:01:57.348
Ne, to nejde.

00:01:57.348 --> 00:01:59.326
Řetězce můžeme pouze spojovat.

00:01:59.326 --> 00:02:01.754
Mohli jsme dělit
a odečítat číselné proměnné.

00:02:01.754 --> 00:02:04.662
Řetězcové proměnné nám 
umožňují jenom spojování.

00:02:04.662 --> 00:02:07.324
To jsem ale zvědavá, co?

00:02:07.324 --> 00:02:09.526
Ale jenom zvědavostí se člověk 
dozvídá víc.

00:02:11.344 --> 00:02:16.930
Zkusme si teď ukázat animaci, a to
interakci myši s textovými řetězci.

00:02:17.500 --> 00:02:20.551
Vytvoříme si řetězec,
který sleduje kurzor myši,

00:02:20.551 --> 00:02:23.636
a to pouhým přilepením do cyklu.

00:02:23.636 --> 00:02:27.285
Jak bychom to udělali...
Vytvoříme funkci var draw,

00:02:27.285 --> 00:02:29.664
a poté vše dáme přímo do ní.

00:02:29.664 --> 00:02:32.905
Vypadá to povědomě,
to už jsme používali, když jsme se učili animovat.

00:02:32.905 --> 00:02:39.459
Pokud má řetězec sledovat kurzor myši, tak
určitě potřebujeme použít mouseX a mouseY.

00:02:39.459 --> 00:02:40.487
A máme hotovo.

00:02:40.487 --> 00:02:43.188
Je to vlastně takové malování
naším jménem.

00:02:43.188 --> 00:02:46.823
A samozřejmě, pokud bychom chtěli,
mohli bychom snadno nastavit pozadí.

00:02:46.823 --> 00:02:50.828
Například nastavit
nějakou pěknou světle modrou.

00:02:50.828 --> 00:02:55.082
A teď vidíme text,
který sleduje kurzor myši.

00:02:55.082 --> 00:02:57.186
Úplně stejně jako jsme to
dřív dělali s objekty.

00:02:57.186 --> 00:03:00.133
A na závěr si pojďme
vyzkoušet použití animace.

00:03:00.133 --> 00:03:02.640
Chceme, aby velikost textu
rostla.

00:03:02.640 --> 00:03:04.844
Tady nastavujeme
výchozí velikost textu na 30.

00:03:04.844 --> 00:03:06.619
Ale protože už známe proměnné,

00:03:06.619 --> 00:03:10.794
tak místo 30 bychom mohli říci:
var howBig se rovná 30.

00:03:10.794 --> 00:03:14.199
A teď tuto proměnnou použijeme
místo toho, abychom psali přímo 30.

00:03:14.649 --> 00:03:16.417
To je úplně to samé.

00:03:16.417 --> 00:03:19.986
Musíme ale něco měnit,
aby se jednalo o animaci.

00:03:20.485 --> 00:03:25.424
Můžeme to udělat třeba tak, že řekneme:
howBig se rovná howBig plus jedna.

00:03:25.424 --> 00:03:28.344
To bude určovat, 
jak se proměnná howBig mění.

00:03:28.344 --> 00:03:32.214
Vezmeme původní hodnotu howBig a
přičteme jedna, aby to bylo o trochu větší.

00:03:32.214 --> 00:03:34.754
A nyní stačí restartovat program.

00:03:34.754 --> 00:03:39.856
Když pohybujeme myší,
velikost textu roste.

00:03:39.856 --> 00:03:43.262
To vše díky tomuto řádku kódu.

00:03:43.262 --> 00:03:44.716
No a dál je to jen na vás.

00:03:44.716 --> 00:03:47.590
Můžete si zkusit animaci
třeba zrychlit.

00:03:48.086 --> 00:03:51.653
Tak a tím jsme se naučili, nejen jak
manipulovat s tvary pomocí kódu,

00:03:51.653 --> 00:03:57.000
ale i jak používat s kódem text.