WEBVTT

00:00:01.587 --> 00:00:03.650
OK, zacznijmy i zróbmy jakiś program.

00:00:03.650 --> 00:00:08.712
Zaczniemy od zera i zrobimy świetny mini program do rysowania.

00:00:08.753 --> 00:00:14.645
Będzie to szybka wycieczka przez kilka pierwszych lekcji na Khan Academy, żebyś mógł zobaczyć, co w ogóle jest możliwe.

00:00:14.645 --> 00:00:18.441
Teraz nie musisz jeszcze wszystkiego dobrze rozumieć.

00:00:18.441 --> 00:00:20.197
Chcemy tylko pokazać Ci to, co nas czeka

00:00:20.197 --> 00:00:23.107
i jakie programy będzie niedłujgo sam pisał.

00:00:23.369 --> 00:00:26.985
Na razie jakoś tutaj pusto - narysujmy coś.

00:00:26.985 --> 00:00:32.531
Chcę narysować elipsę, czyli coś w rodzaju koła. Jak się nauczysz, oto jak to się robi

00:00:32.855 --> 00:00:35.602
I oto ona, trochę to magiczne.

00:00:35.602 --> 00:00:42.179
To dlatego, żę jest kilka specjalnych rzeczy, z których możemy tutaj korzystać i na szczęście elipsa jest jednym z nich.

00:00:42.179 --> 00:00:46.451
Nie przejmuj się tym, co znaczą te wszystkie liczby. Dowiesz się o nich więcej w części "Wprowadzenie do Rysowania"

00:00:46.451 --> 00:00:48.660
Tymczasem, zróbmy małą zapowiedź.

00:00:48.660 --> 00:00:57.682
Zmieniając te liczby, widzimy, że pierwsza z nich oznacza przesunięcie w poprzek, druga - przesunięcie w górę i w dół.

00:00:57.682 --> 00:01:04.117
trzecia oznacza szerokość, a ostatnia - wysokość.

00:01:04.117 --> 00:01:10.232
Nie musisz tego teraz wiedzieć. Jeśli chcesz, możesz zatrzymać to wideo i samemu pobawić się naszą elipsą.

00:01:10.232 --> 00:01:16.517
Wszystkich szczegółów nauczysz się w kolejnych lekacjach, teraz wystarczy , że wiesz, że te liczby określeją to, jak wygląda nasza figura.

00:01:16.517 --> 00:01:19.984
Dobrze, to wygląda ciekawie, ale pewnie nie robi jeszcze dużego wrażenia.

00:01:19.984 --> 00:01:26.799
Zrobię coś, co wygląda trochę trudniej, a potem włożę do środka naszą elipsę.

00:01:26.799 --> 00:01:31.390
OK. Nic się nie zmieniło i nadal pewnie nie jesteś pod wrażeniem.

00:01:31.390 --> 00:01:37.151
Ale teraz zrobię coś innego i wynik będzie robił trochę większe wrażenie - program który robi animację.

00:01:37.151 --> 00:01:42.602
Teraz, jak widzisz, mamy mnóstwo kółek i podążają one wskaźnikiem myszki, kiedy nim poruszam.

00:01:42.602 --> 00:01:46.572
Możesz zatrzymać ten program i użyć do tego własnej myszk.i

00:01:46.572 --> 00:01:48.822
Dobrze, więc jak to w właściwie działa?

00:01:48.822 --> 00:01:51.191
Skąd się biorą te wszystkie kółka?

00:01:51.191 --> 00:01:58.671
Wszystkiego dowiesz się podczas "Wprowadzenia od Animacji". Ale, skoro się zastanawiasz, komputer mówi naszemu programowi automatycznie

00:01:58.671 --> 00:02:02.515
"rysuj", "rysuj", "rysuj", "rysuj","rysuj" - i tak w kółko.

00:02:02.515 --> 00:02:09.972
Mogłoby się wydawać, że nasz program w końcu będzie miał tego dość, ale zamiast tego on po prostu robi to, co jest wewnętrz tej magicznej sekcji "draw".

00:02:09.972 --> 00:02:13.099
Więc po prostu rysuje elipsę, po elipsie, po elipsie.

00:02:13.099 --> 00:02:21.046
I to właśnie się dzieje, kiedy ruszamy w kółko naszą myszką - powstaje mnóstwo elips mimo, że napisaliśmy tylko jedną.

00:02:21.046 --> 00:02:27.619
A skąd program wie, gdzie narysować elipsę? Skąd wie na przykład, że ma rysować podążając za wskaźnikiem myszki?

00:02:27.715 --> 00:02:30.749
Dowiesz się o tym w części "Interakcja z Myszką"

00:02:30.749 --> 00:02:38.216
Chodzi o to, że za każdym razem, komputer mówi naszemu programowi gdzie jest myszką za pomocą tych dwóch specjalnych słów: mouseX i mouseY.

00:02:38.216 --> 00:02:45.221
Nie musisz się teraz tym przejmować - mouseX to oznacza odległość myszki w poziomie, a mouseY - w poziomie.

00:02:45.221 --> 00:02:52.635
Podsumowując: kiedy tworzymy tę elipsę, pierwszy parametr mówi "narysuj elipsę w takiej odległości od lewej krawędzi ekranu, na jakiej jest wskaźnik myszki"

00:02:52.635 --> 00:02:57.172
a drugi: "narysuj elipsę w takiej odległości od dolnej krawędzik, na jakiej jest wskaźnik".

00:02:57.172 --> 00:03:02.925
A to oznacza "narysuj elipsę w dokładnie tam, gdzie jest wskaźnik myszki" za każdym razem kiedy rysujemy elipsę.

00:03:03.820 --> 00:03:07.600
Dwa ostatnie parametry oznaczają rozmiar naszej elipsy.

00:03:07.600 --> 00:03:14.403
Jak już wspominałam, nie przejmuj się teraz tymi wszystkimi szczegółami. Po pierwszych kilku lekcja, to wszystko nabierze sensu.

00:03:14.403 --> 00:03:22.130
Teraz, jak widzisz, zrobiło się trochę tłoczno, więc możemy nacisnąć guzik "restart" i zacząć program od początku, z pustym ekranem.

00:03:22.130 --> 00:03:26.990
Spróbuj teraz zatrzymać program i pobawić się trochę samemu, żeby zobaczyć, co będzie się działo.

00:03:26.990 --> 00:03:33.425
OK, to mamy coś fajnego. Ale co jeszcze możemy zrobić?

00:03:33.425 --> 00:03:39.804
To kółko są trochę brzydkie. Są po prostu białe. Może moglibyśmy je pokolorować?

00:03:39.804 --> 00:03:47.823
We części "Wprowadzenie do kolorowania" dowiesz się wszystkiego o kolorach, ale teraz popsuję Ci niespodziankę i od razu powiem, jak to się robi.

00:03:47.823 --> 00:03:51.335
Tada! Super. Teraz za naszym wskaźnikiem podążają czerwone kółka.

00:03:51.335 --> 00:03:59.853
Ale nie muszą być tylko czerwone - jeśli klikniesz na ten kolor tutaj, sam zobaczysz, że możesz wybrać dowolny kolor, całą tęczę kolorów.

00:03:59.853 --> 00:04:07.215
To może spróbujemy fioletowy? O tym, dlaczego kolory się zmieniają, kiedy to robimy, dowiesz się w części "Wprowadzenie do kolorowania".

00:04:07.215 --> 00:04:11.986
Więc jeśli zaczniemy od początku... super, mamy już tylko fioletowe kółka.

00:04:11.986 --> 00:04:19.328
Możesz sobie teraz myśleć "no tak, włożyliśmy tyle pracy, żeby rysować różne kolorowe kształty, kiedy poruszamy myszką,

00:04:19.328 --> 00:04:27.287
"ale fajnie by było rysować tylko w określonych momentach, na przykład, tylko jeśli naciśniemy myszkę". I zaraz pokażę Ci, jak to zrobić.

00:04:27.287 --> 00:04:35.714
W zasadzie, to nie jest takie trudne. Mówimy tylko: jeśli naciśnięto myszkę - narysuj kółko. W przeciwnym razie, w ogóle nic nie rób.

00:04:35.714 --> 00:04:45.745
W kodzie wygląda to tak: piszemy "if" czyli "jeżeli", a potem te dziwne nawiasy, którymi teraz nie musisz się przejmować.

00:04:45.745 --> 00:04:51.254
Więc: "jeżeli naciśnięto myszkę"... i co chcemy zrobić, jak naciśnięto myszkę? Chcemy po prostu narysować elipsę.

00:04:51.254 --> 00:04:56.835
A w przeciwnym wypadku, po prostu nic nie chcemy robić. Więc tę część na dole zostawimy pustą.

00:04:56.835 --> 00:05:06.880
Jeśli teraz uruchomimy program i zaczniemy ruszać myszką, nic się nie dzieje. Ale jeśli nacisnę, to mogę rysować... na fioletowo.

00:05:06.880 --> 00:05:15.213
Pisać, rysować, no wiesz, robić różne takie rzeczy. Całkiem fajnie. Tak niewiele kodu, a zrobiliśmy mały program do rysowania.

00:05:15.213 --> 00:05:21.677
W cześci "Wprowadznie do wyrażeń warunkowych" dowiesz się wszystkiego o tym, co robi ten kod, który właśnie napisaliśmy.

00:05:21.677 --> 00:05:31.674
Ale na pewno już zaczynasz rozumieć ogólną ideę. Mówimy po prostu: jeśli naciśnięto myszkę zrób to, a jeśli myszka nie jest naciśnięta, to po prostu nic nie rób.

00:05:31.674 --> 00:05:36.321
Super. To jest dokładnie taka sama logika, o której myśleliśmy na początku. Po prostu teraz opisaliśmy ją kodzie.

00:05:36.321 --> 00:05:41.292
Ale możesz zwrócić uwagę: dlaczego mamy te brzydkie linie wokół kółek?

00:05:41.292 --> 00:05:49.018
Wkrótce nauczysz się to kontrolować. Może ją powiększyć albo zmniejszyć. Możesz ją pokolorować. Ale teraz, po prostu chcę się jej pozbyć.

00:05:49.018 --> 00:05:58.256
Na górze dopiszę "no stroke" bo ta linia tak właśnie nazywa "stroke" czyli po polsku kreska. A jeśli teraz uruchomimy program... Zobacz! Nie ma już tej linii!

00:05:58.256 --> 00:06:03.197
Super. Teraz to wygląda na bardziej realistyczny program do rysowania.

00:06:03.197 --> 00:06:12.924
OK, wróćmy na chwilę. Możesz się teraz zastanawiać, skąd się biorą te wszystkie magiczne słowa jak "if" czy "ellpse" albo "draw"?

00:06:12.924 --> 00:06:19.876
To są przydatne komendy wbudowane w Khan Academy. My to już zrobiliśmy, a zabawa polega na tym, jak ich używać w programach.

00:06:19.876 --> 00:06:28.697
Jeśli jesteś bardzo ciekawy, to na Khan Academy używamy języka, który nazywa się JavaScript. JavaScript to jeden z najpopularniejszych języków do pisania programów, szczególnie w internecie.

00:06:28.697 --> 00:06:30.734
Więc jesteś w dobrym towarzystwie.

00:06:30.734 --> 00:06:35.456
Zrobiliśmy tej fajny program do rysowania, ale to wcale nie znaczy, że skończyliśmy.

00:06:35.456 --> 00:06:39.222
Możesz zatrzymać ten program i zmieniać go w dowolny sposób.

00:06:39.222 --> 00:06:50.282
Możesz zmienić wielkość kółko, jego kolor... i jak już wszystko będzie pięknie wyglądać, to możesz zapisać tę wersję za pomocą tego guzika na dole i potem pokazać wszystkim znajomym.

00:06:50.282 --> 00:06:57.645
Ale na pewno też masz masę pomysłów na ulepszenie tego programu, o których jeszcze nie mówiliśmy. No wiesz, poza zmianą koloru czy rozmiaru.

00:06:57.645 --> 00:07:03.886
Może chcesz zrobić fajną animację z pingwinami albo ciekawą grę albo po prostu coś sympatycznego dla rodziny i przyjaciół.

00:07:03.886 --> 00:07:09.821
Dobrze trafiłeś - jeśli zostaniesz z nami, nauczysz się jak robić to wszystko i więcej z kodem.

00:07:09.821 --> 00:07:14.953
Mam nadzieję, że Ci się spodobało. Jeśli tak, zagłosuj na nas.

00:07:14.953 --> 00:07:20.653
Zrobienie małego programu do rysowania zajęło nam tylko kilka minut, ale nauczyliśmy trochę w jaki sposób działa kod.

00:07:20.653 --> 00:07:27.309
W następnych kilku lekcjach omówimy wszystko szczegółowo i nauczysz się dokładnie tego, co zrobiliśmy, żeby to nie wyglądało tak tajemniczo.

00:07:27.309 --> 00:07:33.864
Zaczniemy od początku, po kolei ucząc się podstaw. Możesz wierzyć lub nie, ale już niedługo okaże się, że to nie jest wcale takie trudne.

00:07:33.864 --> 00:07:38.337
Tak naprawdę, idąc dalej, szybko będziesz mógł robić rzeczy o wiele trudniejsze niż ten mały program.