Zajawka (Wersja Wideo)

To jest nagranie ekranu z naszego interaktywnego wprowadzenia do kodowania, zrobione żeby ułatwić pracę nad napisami i tłumaczeniami. Lepiej obejrzeć właściwe wprowadzenie tutaj:
https://www.khanacademy.org/cs/programming/

OK, zacznijmy i zróbmy jakiś program.

Zaczniemy od zera i zrobimy świetny mini program do rysowania.

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

Teraz nie musisz jeszcze wszystkiego dobrze rozumieć.

Chcemy tylko pokazać Ci to, co nas czeka

i jakie programy będzie niedłujgo sam pisał.

Na razie jakoś tutaj pusto - narysujmy coś.

Chcę narysować elipsę, czyli coś w rodzaju koła. Jak się nauczysz, oto jak to się robi

I oto ona, trochę to magiczne.

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

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

Tymczasem, zróbmy małą zapowiedź.

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

trzecia oznacza szerokość, a ostatnia - wysokość.

Nie musisz tego teraz wiedzieć. Jeśli chcesz, możesz zatrzymać to wideo i samemu pobawić się naszą elipsą.

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

Dobrze, to wygląda ciekawie, ale pewnie nie robi jeszcze dużego wrażenia.

Zrobię coś, co wygląda trochę trudniej, a potem włożę do środka naszą elipsę.

OK. Nic się nie zmieniło i nadal pewnie nie jesteś pod wrażeniem.

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

Teraz, jak widzisz, mamy mnóstwo kółek i podążają one wskaźnikiem myszki, kiedy nim poruszam.

Możesz zatrzymać ten program i użyć do tego własnej myszk.i

Dobrze, więc jak to w właściwie działa?

Skąd się biorą te wszystkie kółka?

Wszystkiego dowiesz się podczas "Wprowadzenia od Animacji". Ale, skoro się zastanawiasz, komputer mówi naszemu programowi automatycznie

"rysuj", "rysuj", "rysuj", "rysuj","rysuj" - i tak w kółko.

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".

Więc po prostu rysuje elipsę, po elipsie, po elipsie.

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

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

Dowiesz się o tym w części "Interakcja z Myszką"

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.

Nie musisz się teraz tym przejmować - mouseX to oznacza odległość myszki w poziomie, a mouseY - w poziomie.

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"

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

A to oznacza "narysuj elipsę w dokładnie tam, gdzie jest wskaźnik myszki" za każdym razem kiedy rysujemy elipsę.

Dwa ostatnie parametry oznaczają rozmiar naszej elipsy.

Jak już wspominałam, nie przejmuj się teraz tymi wszystkimi szczegółami. Po pierwszych kilku lekcja, to wszystko nabierze sensu.

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.

Spróbuj teraz zatrzymać program i pobawić się trochę samemu, żeby zobaczyć, co będzie się działo.

OK, to mamy coś fajnego. Ale co jeszcze możemy zrobić?

To kółko są trochę brzydkie. Są po prostu białe. Może moglibyśmy je pokolorować?

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

Tada! Super. Teraz za naszym wskaźnikiem podążają czerwone kółka.

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.

To może spróbujemy fioletowy? O tym, dlaczego kolory się zmieniają, kiedy to robimy, dowiesz się w części "Wprowadzenie do kolorowania".

Więc jeśli zaczniemy od początku... super, mamy już tylko fioletowe kółka.

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

"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ć.

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.

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

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

A w przeciwnym wypadku, po prostu nic nie chcemy robić. Więc tę część na dole zostawimy pustą.

Jeśli teraz uruchomimy program i zaczniemy ruszać myszką, nic się nie dzieje. Ale jeśli nacisnę, to mogę rysować... na fioletowo.

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

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

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.

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

Ale możesz zwrócić uwagę: dlaczego mamy te brzydkie linie wokół kółek?

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ć.

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!

Super. Teraz to wygląda na bardziej realistyczny program do rysowania.

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"?

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

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.

Więc jesteś w dobrym towarzystwie.

Zrobiliśmy tej fajny program do rysowania, ale to wcale nie znaczy, że skończyliśmy.

Możesz zatrzymać ten program i zmieniać go w dowolny sposób.

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.

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.

Może chcesz zrobić fajną animację z pingwinami albo ciekawą grę albo po prostu coś sympatycznego dla rodziny i przyjaciół.

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

Mam nadzieję, że Ci się spodobało. Jeśli tak, zagłosuj na nas.

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

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.

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.

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