Napisao Maks Vejnrajt
KOMPJUTERSKO KODIRANJE Prevela Eli Gilić
SADRŽA J Naslov originala HOW TO CODE Max Wainewright Copyright © QED Publishing 2016 Translation Copyright © 2016 za srpsko izdanje, Laguna Maks Vejnrajt KODIRANJE - Vodič za kompjutersko kodiranje Dizajn i ilustracije: Majk Henson Za izdavača: Dejan Papić Prevod: Eli Gilić Lektura: Maja Mihajlović Slog i prelom: Branislava Marjanović Beograd, 2016 Tiraž: 3000 Štampano u Kini Izdavač: Laguna Beograd, Resavska 33 www.laguna.rs
[email protected] CIP - Каталогизација у публикацији Народна библиотека Србије, Београд 004.22(02.053.2.025.2) ВЕЈНРАЈТ, Макс Kodiranje : vodič za kompjutersko kodiranje / Maks Vejnrajt ; [ilustracije Majk Henson] ; prevela Eli Gilić. - Beograd : Laguna, 2016 (Kina). - 127 str. : ilustr. ; 26 cm Prevod dela: How to Code / Max Wainewright. - Tiraž 3.000. - Rečnik: str. 124-125. - Registar. ISBN 978-86-521-2390-2 a) Кодирање COBISS.SR-ID 225633292
PRVO POGLAVLJE Uvod Uputstva Korak po korak Kodirane poruke Zavrti se
5 6 8 10 12 14
LO GO
Upoznavanje s logoom Logo oblici
16 18
SKRAČ
Upoznavanje sa skracom Spusti olovku Pritisni taster Ulazi i uputstva Skiciranje s ulazima Ispravljanje grešaka Odgovori i rešenja iz prvog poglavlja DRUGO POGLAVLJE Uvod
20 22 24 26 28 30 32 34 36
LO GO
Petlje Obrasci s petljama
38 40
SKRAČ
SKRAČ
Petlje u skracu Ponavljaj petlje Ponavljaj dok ne... Ponavljaj dok te ne uhvate Dodajmo zvuk Zvucni efekti Promenljive Cuvanje rezultata Brojanje klikova Ispravljanje grešaka Odgovori i rešenja iz drugog poglavlja TRECE POGLAVLJE Uvod
42 44 46 50 52 54 56 58 60 62 64 66 68 70 72 74
PAJTON
Pokreni pajton Kucanje u pajtonu Pitanja u pajtonu Petlje u pajtonu Grafika u pajtonu Slucajnosti u pajtonu
88 90 92
48
SKRAČ
Komanda „ako“ Vreme je za kviz Komanda „u suprotnom“ Kad se likovi dodirnu
Slucajne slike Ispravljanje grešaka Odgovori i rešenja iz treceg poglavlja
76 78 80 82 84 86
CETVRTO POGLAVLJE Uvod
94 96
HTML
Pravljenje internet stranice Kako se koristi HTML Adrese i linkovi Gomila linkova Oboj stranicu
98 10 0 10 2 10 4 10 6
JAVASKRIPT
Dodaj javaskript 10 8 Petlje u javaskriptu 110 Funkcije u javaskriptu 112 Javaskript funkcije sa HTML-om 114 Projekat 116 Pokreni svoj sajt 118 Ispravljanje grešaka 12 0 Odgovori i rešenja iz cetvrtog poglavlja 12 2 Podaci o izvorima 12 3 RECNIK INDEKS
124 12 6
O I C A D O P A M I R O V IZ Evo kako možeš da se domogneš kompjuterskih jezika logo, skrač i pajton i počneš da eksperimentišeš.
LOGO Logo je prvobitno osmislio Simor Papert pre više od četrdeset godina. Postoji više verzija ovog jezika. Ako koristiš PC, možeš da preuzmeš besplatnu verziju logoa sa sajta: www.softronix.com/logo.html A možeš i da koristiš logo tako što ćeš u internet pretraživaču otkucati: http://turtleacademy.com/ playground/en ili www.calormen.com/jslogo/
SKRAČ Možeš da koristiš skrač na PC-ju ili maku tako što ćeš u internet pretraživaču otkucati: http://scratch.mit.edu. Na dnu stranice podesi jezik na srpski. Postoji sličan sajt po imenu Snap u kojem možeš raditi i na ajpedu: http://snap.berkeley.edu/run Ako hoćeš da koristiš skrač bez interneta, možeš ga preuzeti sa sledećeg sajta, ali zasad ne postoji verzija za preuzimanje na srpskom: http://scratch.mit.edu/scratch2download/
INSTALIRANJE PAJTONA NA PC 1. Idi na sajt: www.python.org 2. Klikni na „Downloads“ pa izaberi
„Download Python“ (verzija 3.4 ili novija) Klikni dva puta na preuzeti fajl, pa prati uputstva na ekranu. 4. Klikni na taster Start zatim na „Python“ i konačno na „IDLE“. (Ako imaš operativni sistem vindous 8, idi u gornji desni ugao ekrana i klikni na „Search“, zatim na „idle“ i onda klikni na program da ga pokreneš).
3.
INSTALIRANJE PAJTONA NA MAK 1. Idi na sajt: www.python.org 2. Klikni na „Downloads“ pa izaberi
„Download Python“ (verzija 3.4 ili novija). Klikni dva puta na preuzeti fajl, pa prati uputstva na ekranu. 4. Ako hoćeš brzo da počneš da koristiš pajton, klikni na „Spotlight“ ( u gornjem desnom uglu ekrana). 5. Ukucaj „idle“ i onda pritisni taster Enter. 3.
File
Edit
New
Decu bi trebalo nadgledati dok koriste internet, pogotovo ako su prvi put na nepoznatom sajtu. Izdavač i autor ne snose odgovornost za sadržaj sajtova spomenutih u ovoj knjizi.
4
1. Otvori „Finder“. 2. Uđi u meni „Go“ i klikni na „Applications“. 3.
Skroluj sve do reči Python i klikni na nju.
4.
Dovuci ikonu IDLE do „dock-a“ (polja s menijem) u dnu ekrana ili sa strane.
Edit
New New
File New New
Napravi ikonu za pajton na maku (tako ćeš ga lakše pronaći):
Bezbednost na internetu
File
Edit
SADRŽAJ :: PRVO POGLAVLJE Uvod
6
Uputstva
8
Korak po korak
10
Kodirane poruke
12
Zavrti se
14
LO GO
Upoznavanje s logoom
16
Logo oblici
18
SKRAČ
Upoznavanje sa skracom
20
Spusti olovku
22
Pritisni taster
24
Ulazi i uputstva
26
Skiciranje s ulazima
28
Ispravljanje grešaka
30
Odgovori i rešenja iz prvog poglavlja
32
Enter
U VOD
Unutar tvog kompjutera Ulaz Miš, tastatura i ekran osetljiv na dodir su „ulazni uređaji“. Oni nam omogućuju da unesemo podatke u kompjuter ili tablet.
Ova knjiga će te naučiti kako da kodiraš ‒ što je samo drugi način da kažemo kako ćeš naučiti da govoriš kompjuterima šta da rade. Pre svega, hajde da upoznamo našeg druželjubivog robota Ejdu, nazvanog po prvoj programerki na svetu ‒ Ejdi Lavlejs.
Ula
z
Ulaz
U la z
Izlaz
Upoznaj se s Ejdom
Štampač, monitor i zvučnici su „izlazni uređaji“. Oni služe da nam kompjuter govori razne stvari.
Ejda Lavlejs (1815–1852) rođena je u Engleskoj pre dvesta godina. Ona je shvatila da mašina može da rešava zadatke ako joj dajemo uputstva korak po korak ‒ što je zapravo program. Međutim, tad nisu postojali kompjuteri na kojima bi isprobala svoje ideje!
Šta je kodiranje? Kodiranje znači zapisati niz reči, ili „kodova“, koji će kompjuteru reći šta da radi. Te reči moraju biti napisane posebnim jezikom koji kompjuter razume. Ovo poglavlje će se pozabaviti s dva jezika: logoom i skračom. Kodiranje se zove i kompjutersko programiranje. Svim kompjuterima je potreban program koji im govori šta da rade. Laptopi, tableti, telefoni i desktop računari moraju imati programe da bi bili korisni. 6
Izlaz
Iz la z
Iz la z
Mi radimo u kompjuterskoj memoriji. Kompjuteru je potrebna memorija da bi u njoj čuvao podatke.
U memoriji se podaci čitaju i pretvaraju u jednostavna kodirana uputstva.
Dobro došli u procesor kompjuterski mozak!
Ulazni uređaji se koriste za ubacivanje programa ili njihovo menjanje.
Procesor
Mi slušamo uputstva dajemo korisniku rezultate putem izlaznih uređaja.
7
A V T S T UPU Možemo zamoliti druge da urade nešto na više načina. Ako neko kaže „upali svetlo“, „upali lampu“ ili čak „mračno je, uključi ono čudo“, znaš šta bi trebalo da uradiš. Ali da bismo programirali kompjuter, moramo izgovoriti prave reči ‒ i to po redu. Reči kojima govorimo ljudima i kompjuterima šta da rade zovu se uputstva.
Cokoladne pahuljice
Spremanje dorucka Zamisli da programiraš našeg prijateljskog robota Ejdu da spremi doručak. Možeš li da poređaš ova uputstva po tačnom redu? A Otvori kutiju sa žitaricama. B Sipaj mleko preko žitarica. C Skini poklopac s tetrapaka mleka. D Sipaj malo žitarica u činiju. E Uzmi činiju iz kredenca.
Pretvori se u ljudskog robota Vreme je da postaneš ljudski robot! To će ti pomoći da smisliš kako da izdaješ tačna uputstva. Potreban ti je partner za ovu igru. Jedno od vas mora da se pretvara da je robot. Drugo će biti programer i izdavaće uputstva robotu. Zadatak tog igrača je da robotu naredi da ode do vrata. Jedina uputstva koja može dati robotu glase:
Hodaj napred. Okreni se levo. Okreni se desno. Stani.
8
Netačn uputst o vo! o Netačn o! v uputst
Robot slikar Evo još jedne igre koja će ti pomoći da vežbaš davanje uputstava. Biće ti potrebni: 1. Partner 2. List papira 3.
Sedi za sto pored partnera. Jedno od vas će biti robot slikar, dok će drugo biti programer. Programer mora robotu da daje uputstva kako da nacrta sličice prikazane dole. Ovog puta će robot pomerati samo olovku. Robot sme da radi samo ono što mu programer govori. Evo uputstava koje može da koristi: Idi gore
Olovka Idi levo
STANI!
Idi desno
Idi dole
2.
1.
3.
4.
Kad se izveštite u ovoj igri, možete se igrati dok robot žmuri. Pazite da nijedno ne crta po stolu! Možeš li navesti robota da nacrta još nešto?
Kljucn a r e c Progr am: U k oja gov p ore ko utstva m pju ili robo tu šta teru da rad i.
9
K A R O K O P K A KOR Kompjuterskim programima su potrebna uputstva da bi uradili nešto. Nekad nam je potreban program da reši određeni zadatak. Da bismo rešili taj zadatak, moramo osmisliti korake koje će program morati da preuzme ‒ ti koraci se zovu algoritam.
Da bi prešla s polja
GORE
Evo tvog zadatka: Ejda mora da pređe s polja 3 na polje 4. Prokljuvi koje će korake morati da preuzme:
4 3
3 na 4 , Ejda mora da preduzme sledeće korake:
DESNO
GORE
Koristi plan na naspramnoj stranici, počni od broja Gde ćeš završiti? Potraži odgovor na strani 32.
DOLE
Podimo na putovanje
DOLE
DOLE
DESNO
1
DESNO
DOLE
Napiši algoritam koji objašnjava kako stići od polja 6 do polja Sad pokušaj da pređeš s polja 5 na 6 . 3. Putuj od polja 2 do polja 4 . Proveri odgovore na stranici 32.
10
DESNO
i preduzmi sledeće korake.
DOLE
1
LEVO
Kljucn a r e c Algor itam:
Ako želiš, možeš da zapišeš slova umesto da crtaš strelice. Recimo, možeš da zapišeš desno, desno, gore, dole kao RRUD (zato što je ovaj kompjuterski jezik na engleskom, a na njemu se desno kaže right, gore ‒ up, a dole ‒ down).
1. 2.
DOLE
.
U ...… 1. R U 2.
progra K m m oraci koje da bi r ora da napr ešio za a datak. vi
Neverovatna igra s algoritmom Za ovu igru će ti biti potrebni samo kockica i žeton. Pokušaj:
1. Baci kockicu. Stavi novčić na broj koji vidiš na kockici. 2. Ponovo baci kockicu (ako dobiješ isti broj, baci još jednom).
Koristi novčić ili igračkicu umesto žetona.
3. Ovo je broj do kojeg bi trebalo da odeš. 4.
Zapiši korake koji će te odvesti tamo.
1
2
6
4 5
3 11
E K U R O P E N A KODIR
Izdavanje komandi R5 znači idi 5 polja desno. Crvena tačka pokazuje odakle da počneš.
Naša uputstva će biti korisnija ako upotrebimo brojeve kako bismo pokazali koliko daleko moramo da se krećemo u različitim pravcima. Takva posebna uputstva zovu se komande.
Primeri komandi U4 znači: Idi 4 polja gore. L3 znači: Idi 3 polja levo. D7 znači: Idi 7 polja dole. R4 znači: Idi 4 polja desno.
1
2
4
L3
U3
R3 Jao! To je bilo predaleko.
5
Hajde da vidimo kakav će crtež biti ako koristiš komande R3 U3 L3 D3. Moraš početi od crvene tačke.
D3
12
3
Posto jedno ji više od odgovg tačnog neke ora za o zadat d ovih aka!
Igra recima Sad pokušaj da zapišeš komande koje će naterati program da napiše ove reči 1.
6.
2.
3.
7.
4.
8.
5.
9.
Odgovori su na strani 32.
Kljucn a r e c Koma nda
da se u : Uputstv o radi o zadata dređeni k.
1.
2.
U2 L3 L3 D3
Napiši svoje ime! Pokušaj da napišeš komande koje će ispisati tvoje ime ili inicijale. Potrebno je da uzmeš list papira na kvadratiće i olovku. 1. Napiši svoje ime na papiru. Moraćeš da pretvoriš dijagonale (kao V ili M) u horizontalne ili vertikalne linije.
2.
Zabeleži komande za pisanje tih slova.
3. Izdaj komande partneru da vidiš hoće li moći da ih izvrši.
13
E S I T R V ZA Sad ćemo naučiti kako da nateramo robota da se okreće. Moramo da koristimo tri komande: idi napred, okreni se ulevo ili okreni se udesno ‒ kao i koliko da se okrene.
Savladaj stepene Okretanje robota meri se stepenima. Možda je teško naučiti sve o stepenima, ali ako savladaš osnove, moći ćeš da nateraš svog robota da se okreće. Prav ugao iznosi 90 stepeni. Pun krug iznosi 360 stepeni. U suštini, što je veći broj, veći je i okret.
Stepeni se mere od 0 do 360. Okret od 360 stepeni znači da je napravljen pun krug.
Okreni se udesno za 90 stepeni
Evo primera kako da se pomoću jednostavnih komandi tvoj robot okrene udesno i ulevo. 14
Okreni se ulevo za 90 stepeni
Kaži mu da se okrene
Napred 25
Isprobaćemo ovaj program: Napred 25 Desno 90 Napred 20 Desno 90 Napred 25 Levo 90 Levo 90 Napred 10 Ako ti je teško da odrediš koliko treba da se okreneš ulevo i udesno, pokušaj da okrećeš ovu stranicu tako da gledaš u istom pravcu kao kornjača.
Desno 90
Napred 20 Napred 25 Desno 90
Napred 10
Pisanje slova
Pikseli Kretanje robota napred meri se pikselima. Ako je reč o ekranizovanom robotu (koji se nekad zove kornjača), koraci se najčešće mere pikselima. Piksel je majušni „deo slike“ ili tačka na ekranu.
A sad pokušaj da otkriješ koja će uputstva ispisati ova slova. Proveri rešenja na stranici 32.
1.
3.
2.
Donja kutija je široka 7 piksela i visoka 7 piksela.
4.
d 20 1. Napre 0 9 o n Des 20 d e r p a N
15
M O O G O L S E J N A V A N Z O P U
Logo ekran
Naučićemo da programiramo u logou, najjednostavnijem kompjuterskom jeziku. Logo je odličan za izvođenje osnovnih komandi!
Pre nego što počnemo da učimo komande, pogledajmo šta ćemo videti na ekranu kad otvorimo logo. Na donjem primeru smo već uneli tri komande u polje. Možemo da pritisnemo Enter posle svake komande ‒ ili da ukucamo niz komandi odvojenih razmacima, pa onda da kliknemo Enter da vidimo rezultat.
Ovo je deo za crtanje. Sve verzije logoa se malkice razlikuju. Jedne imaju taster Run dok druge nemaju. Ako tvoja verzija nema taj taster, klikni polje Enter nakon što uneseš komandu. Ako imaš samo jedno tanko polje, kucaj komande jednu po jednu pa pritisni Enter ili klikni Run da ih pokreneš. Možeš i da uneseš nekoliko komandi odvojenih razmakom u polje, pa da pritisneš Enter ili Run da ih isprobaš.
Vrati se na stranu 4 ako ti zatreba pomoć da preuzmeš program logo ili da nađeš sajt na kojem možeš da ga koristiš.
16
Ovo je komandno polje. Tu ćeš ukucati svoj program.
fd 50 rt 90 fd 50
Klikni Run ili klikni taster Enter da isprobaš kod.
Run
Osnovne komande 1.
Ukucaj fd 50 da se pomeriš 50 polja napred.
Pritisni Run da isprobaš svoj kod.
fd 50
Run
2.
Ukucaj lt 90 i klikni Run da skreneš ulevo.
3.
lt 90
fd 50
Run
Run
Otkucaj fd 50 pa pritisni Run da se pomeriš još 50 polja napred.
17
I C I L B LOGO O
Oblikuj se Otkucaj ove programe da vežbaš kodiranje s logoom:
fd 60 rt 90 fd 60 rt 90 fd 60 rt 90 fd 60
Pošto smo naučili kako da koristimo logo, pokušaj da nacrtaš različite oblike. Eksperimentiši s onim što možeš da praviš ‒ sad se baviš pametnim kodiranjem!
fd 100 rt 90 fd 50 lt 90 lt 90 fd 100
fd 50 lt 90 fd 100 lt 90 fd 50 lt 90 fd 100
Lt 90 znači da se okreneš 90 stepeni ulevo.
Otkucaj cs kad hoćeš da izbrišeš sve što je na ekranu.
fd 25 rt 90 fd 25 lt 90 fd 25 rt 90 fd 25
Otkucaj seth 0 da bi kornjača ponovo pokazivala nagore.
A sad eksperim malo en šta sve m tiši. Vidi nacrtaš s ožeš da logoom. 18
Isprobaj ovo
Šta ćeš nacrtati s ovim programima?
1.
lt 90 fd 50 rt 90 fd 100 rt 90 fd 50
2.
3.
fd 100 rt 90 fd 100 rt 90 fd 100 rt 90 fd 100
Super kompjuter 7000
fd 50 rt 90 fd 50 lt 90 fd 50 rt 90 fd 50 rt 90 fd 100 rt 90 fd 100
Oblikuj se!
Neverovatno!
A sad pokušaj da nacrtaš ove oblike koristeći logo: 4.
5.
Ooooo!
6.
7.
Aaahh!
Potraži predložena rešenja na stranici 32. Postoji više tačnih odgovora. 19
E J N A V A UPOZNSA SKRAČOM
Idi 2 0 korak a
Skrac ekran
Skrač je sličan logou. U ovom programu možeš naterati kornjaču (odnosno animirani lik koji se na engleskom zove sprite) da se pomera po ekranu.
Pre svega, upoznajmo se s osnovama skrača. U ovom programu vučeš komande i onda ih spajaš umesto da ih kucaš. Počnimo time što ćemo otići na skračov sajt.
Klikni Stvaraj. Na ekranu bi trebalo da vidiš donju sliku.
Vrati se na stranu 4 ako ti treba pomoć da pronađeš skrač i slične programe.
Datoteka
Uredi
STVARAJ
Programi
Kostimi
Kretanje Izgled Zvuk Olovka Podaci
Idi
Ovaj deo se zove pozornica. Tu možeš da gledaš kako se tvoj animirani lik pomera. 20
Ovde ćeš izabrati grupu komandi.
Saveti O programu
10
Zvukovi
Događaji Upravljanje Osećaji Operacije Ostalo
koraka
Spusti olovku Idi
10
Okret
za
15 stepeni
Okret
Okret
za
15 stepeni
Idi
Ovo su komande u grupi koja je trenutno otvorena.
80
koraka za
10 stepeni
koraka
Ovo je je sekcija za programe ‒ dovuci svoje komande ovde. Ako hoćeš da skloniš jednu komandu, samo je izvuci iz sekcije za programe.
Ja sam animirani lik koji izvršava tvoje komande.
Kako napraviti jednostavan program Preuzmi naše robote koje možeš koristiti kao animirane likove u skraču! Idi na adresu: http://www. qed-publishing.co.uk/ extra-resources.php ili skeniraj ovo:
1.
Idi 10 koraka
2.
Okret za 10 stepeni Idi 10 koraka
Okret
za 10 stepeni
Idi 10 koraka
Idi 10 koraka Okret za 10 ste peni Idi 10 korak a Okret za 10 s tepeni Idi 1 0 ko raka
Okret
3.
4.
Idi na grupu komandi „Kretanje“. Dovuci komandu „Idi 10 koraka“ u sekciju za programe.
Klikni! Na pozornici bi animirani lik u obliku mačke trebalo da se pomeri 10 koraka.
Okret
za 15 stepeni
Okret
za 15 stepeni
5.
Okret
za 15 stepeni
Okret
za 15 stepeni
Promeni kod na „Idi 20 koraka“ tako što ćeš kliknuti na polje i otkucati „20“.
Idi 20 koraka
Dovuci blok s kodom „Okret za 15 stepeni“ ispod prvog.
Možeš da dovučeš nekoliko blokova sa kodovima da napraviš program!
Idi 10 koraka
Idi 10 koraka
Idi 20 koraka Okret za 15 stepeni
za 10 stepeni
Eksperimentiši tako što ćeš menjati brojeve kako bi se lik pomerao i okretao.
Idi 10 koraka
Idi 10 koraka
Idi 20 koraka
Okret
za 15 stepeni
Idi 80 koraka Okret
za 15 stepeni
Klikni bilo koji blok da bi se program pokrenuo. 21
U K V O L O I T S U SP Hajde sad da naučimo da crtamo u skraču. Moraćemo da koristimo komandu „Spusti olovku“ kako bismo naterali animirani lik da se kreće.
4. Dovuci blok „Idi 10 koraka“ u svoj program. Idi 10 koraka
Idi 10 koraka
5. Promeni broj 10 u 60.
Spusti olovku
Kocka do kocke 1.
Idi 60 koraka
Probaj da nacrtaš kvadrat:
6.
Klikni na grupu „Olovka“.
Izgled Zvuk Olovka Podaci
2.
Upravljanje Osećaji Operacije Ostalo
Završi program:
Spusti olovku Idi 60 koraka Okret
Dovuci blok „Spusti olovku“ u sekciju za programe. Spusti olovku
Spusti olovku
za 90 stepeni
Idi 60 koraka Okret
za 90 stepeni
Idi 60 koraka Okret
za 90 stepeni
Idi 60 koraka
.
3
Klikni na grupu „Kretanje“.
Kretanje Izgled Zvuk 22
Spusti olovku
Događaji Upravljanje Osećaji
Klikni na bilo koji blok da pokreneš program.
Ne pa niči! Ne PA NIČI !
Crtanje oblika Sad promeni kod da izgleda ovako:
Spusti olovku Idi 20 koraka Okret
za 90 stepeni
Idi 80 koraka Okret
za 90 stepeni
Pokušaj da šta će tv pogodiš nacrtati. oj kod A na prvu onda klikni komand u da pokrene š kod.
Idi 20 koraka Okret
za 90 stepeni
Idi 80 koraka
Sacuvaj svoj rad Klikni meni „Datoteka“ u gornjem levom uglu ekrana. A onda klikni: Novo ‒ da počneš novi rad Preuzmi na svoj kompjuter ‒ da sačuvaš fajl u kompjuteru Pošalji sa svog kompjutera ‒ da otvoriš fajl koji si već sačuvao
Još oblika! 1
A sad pokušaj da nacrtaš ove oblike u skraču:
2
4
3
Potraži rešenja na strani 33. 23
R E T S A T I N S I T PRI Zasad su se svi kodovi koje smo napravili pokretali kad smo im rekli da počnu. Sad ćemo naučiti kako da promenimo kod pritiskanjem različitih tastera. Pritiskanje tastera za vreme započetog programa je vrsta ulazne radnje.
Levo i desno Kad pritisnemo R, želimo da se lik pomeri desno (na engleskom se desno kaže right). Kad pritisnemo L, hoćemo da ga poguramo levo (na engleskom se levo kaže left).
Pritisni R da skreneš udesno 1.
2.
3. Programi
Browser Pretraživač
Kretanje Izgled Zvuk Olovka Podaci
scratch.mit.edu
Pokreni skrač. Klikni na „Stvaraj“.
Kostimi
Zvukovi
Klikni na grupu „Događaji“.
5.
4. Kada je dirka razmak pritisnuta p q r s
Izaberi slovo „r“.
Kada je dirka razmak pritisnuta
Događaji Upravljanje Osećaji Operacije Ostalo
Dovuci ikonu „Kada je dirka razmak pritisnuta“ u sekciju za programe.
6. Programi
Kostimi
Zvukovi
Kretanje Događaji Izgled Upravljanje Zvuk Osećaji Olovka Operacije Ostalo Podaci Klikni na grupu „Kretanje“.
Kada je dirka r pritisnuta Idi 10 koraka
Dovuci blok „Idi_ koraka“ u sekciju za programe.
Sad pokušaj da pritisneš taster R na tastaturi...
24
Pritisni L da se kreceš ulevo 1.
2. Programi Kretanje Izgled Zvuk Olovka
Kostimi
Kada je dirka
Zvukovi
Događaji Upravljanje Osećaji Operacije
Klikni na grupu „Događaji“.
Programi
Kostimi
j k l m
Kada je dirka razmak pritisnuta
Dovuci blok „Kada je dirka razmaka pritisnuta“ u sekciju za programe. kada je dirk Idi 20 korak
Zvukovi
Događaji Kretanje Upravljanje Izgled Osećaji Zvuk Operacije Olovka Ostalo Podaci Klikni na grupu „Kretanje“.
Kada je dirka razmak pritisnuta
Idi 20 korak
5.
4.
3.
kada je dirka l pritisnuta
Izaberi slovo „l“.
6.
Kada je dirka l pritis Idi -10 koraka
Idi 10 koraka
Dovuci blok „Idi _ koraka“.
Smanji broj koraka za 10.
Sad pritiskaj taster L na tastaturi da bi išao ulevo i taster R da bi se kretao udesno!
Šta kod radi? Sad smo napravili dva različita dela koda. Kad pritisnemo taster R na tastaturi, to govori skraču da pomeri animirani lik 10 koraka udesno. Kad pritisnemo taster L, govorimo skraču da pomeri animirani lik za minus deset koraka ‒ odnosno da ode 10 koraka u suprotnom smeru. Svaki deo koda se pokreće pritiskom na jedan taster. Obavljamo dve različite ulazne radnje da bi naš program pokrenuo dva različita dela koda.
Možeš li naterati svoj animirani lik da se brže kreće?
Promeni kod tako da se animirani lik pomera kad pritiskaš tastere sa strelicama na tastaturi.
Kljucn a r e c Ulaz ( input)
: Radn što je p ja (kao r it is k a koja go n vori pr je tastera) uradi n ogramu da ešto.
25
A V T S T U P U I I ULAZ Koristi stepene za okretanje
Naučili smo da pomeramo animirani lik ulevo i udesno. Sad ćemo otkriti kako da ga nateramo da ide gore, dole i u svim ostalim pravcima tako što ćemo pritiskati različite tastere.
Napravićemo program koji ima četiri različita ulazna tastera. Svaki od njih će pokretati kod koji usmerava animirani lik u drugom pravcu.
Pritisni U da ideš gore 1.
2. Programi
Kostimi
Zvukovi
3.
s t u v
Kretanje Događaji Izgled Upravljanje Zvuk Osećaji Olovka Operacije Pokreni skrač i klikni na grupu „Događaji“.
Dovuci blok „Kada je dirka razmak pritisnuta“ u sekciju za programe.
5.
4. Programi
Kostimi
Zvukovi
Kretanje Događaji Izgled Upravljanje Zvuk Osećaji Olovka Operacije Podaci Ostalo Klikni na grupu „Kretanje“.
Kada je dirka razmak pritisnuta
Kada je dirka razmak pritisnuta
Izaberi slovo„u“.
6. Kada je dirka u pritisnuta Kada je dirka u pritisnuta Usmeri se ka 90
Dovuci blok „Usmeri se ka_“ u sekciju za programe.
Vidi šta će se desiti kad pritisneš taster U . Kod kaže: kad pritisneš taster U, okrenućeš se za 0 stepeni što znači usmerićeš se nagore. 26
Usmeri se ka 90 (90) desno (-90) levo (0) gore (180) dole
Izaberi „(0) gore“.
Pritisni taster D za dole
I dalje ostaje da nateramo animirani lik da se kreće. Kad pritisnemo taster D, usmerićemo ga nadole.
1.
2.
Kada je dirk
Kada je dirka razmak pritisnuta Usmeri se ka 0
3. Kada je dirka razmak pritisnuta
Idi 20 korak
b c d e
Kada je dirka razmak pritisnuta
Idi 10 koraka
Dovuci još jedan blok „Kada je dirka razmak pritisnuta“. Postavi ga pored prvog.
Dovuci blok „Idi_koraka“. Pritisni taster U da vidiš šta će se desiti!
5.
4.
6. Kada je dirka d pritisnuta
Kada je dirka d pritisnuta
Usmeri se ka 90 (90) desno (-90) levo (0) gore (180) dole
Usmeri se ka 90
Dovuci blok „Usmeri se ka_“.
Ovog puta izaberi slovo „d“.
Izaberi „(180) dole“.
Kada je dirka d pritisnuta Usmeri se ka 180 Idi 10 koraka
Dovuci još jedan blok „Idi_ koraka“.
Proveri svoj kod tako što ćeš pritiskati tastere U i D .
Moraš da završiš ovaj program tako što ćeš dodati kod kojim ćeš pomerati animirani lik levo i desno. Dodaj još dva bloka „Kada je dirka pritisnuta“ da promeniš pravac kretanja animiranog lika kad pritisneš tastere L i R. Usmeri se levo i pomeraj se:
Juu upi ii!
Usmeri se desno i pomeraj se:
Кada je dirka l pritisnuta
Кada je dirka r pritisnuta
Usmeri se ka -90
Usmeri se ka 90
Idi 10 koraka
Idi 10 koraka
27
A M I Z A L U S E J N A R I C I Kreiraj svoj program SK za crtanje
Pošto smo naučili kako da pomeramo animirani lik ulaznim radnjama, napravićemo jednostavan program za skiciranje. Igrači će moći da crtaju šta žele tako što će pritiskati različite tastere da bi crtali nagore, nadole, ulevo ili udesno.
1. Pokreni skrač pa napravi program koji će pomerati animirani lik gore, dole, levo i desno. Vrati se na stranu 26 da se podsetiš kako se to radi. Isprobaj svoj program! Kada je dirka u pritisnuta Usmeri se ka 0 Idi 10 koraka
Izazov
Kada je dirka l pritisnuta
Kada je dirka r pritisnuta
Usmeri se ka -90
Usmeri se ka 90
Idi 10 koraka
Idi 10 koraka
promeniš Pokušaj da a pomeraš tastere kojim nu. Možeš ra stvari po ek ursore ik da koristiš trelicama). s a s re (taste
2.
Usmeri se ka 180 Idi 10 koraka
3. Moramo da nateramo animirani lik da povlači crtu za sobom dok se kreće. Klikni na grupu „Olovka“. Dovuci blok „Spusti olovku“ u sekciju za programe. Klikni na blok „Spusti olovku“ pa pokušaj da pritisneš tastere U, D, R i L.
Izgled Zvuk Olovka Podaci
28
Kada je dirka d pritisnuta
Spusti olovku
Da bismo obrisali ekran, moramo da koristimo blok „Obriši“. Dovuci ga u sekciju za programe, pa klikni na njega.
Izgled Zvuk Olovka Podaci
Obriši
4. Spoj blokove „Obriši“ i „Spusti olovku“. Klikni na grupu „Događaji“. Dovuci blok „Kada je kliknuto na zelenu zastavu“ i postavi ga iznad blokova „Obriši“ i „Spusti olovku“. Sad će animirani lik biti spreman da nacrta novu sliku kad god klikneš na zelenu zastavu.
Kada je kliknuto
na zelenu zastavu
Obriši Spusti olovku
5. Veliki animirani lik može da ti smeta dok crtaš. Smanji ga pomoću ove ikone: Klikni na ikonu, a onda i na animirani lik da ga smanjiš.
Kompjuteri označavaju boje brojevima. Skrač koristi brojeve od 0 do 199. Neki drugi jezici koriste čak i šesnaest miliona različitih boja!
Sviđa li ti se moj novi džemper? Hteo sam malo boje 15 999 999!
Programi Tvoj program je sad gotov! Klikni na zelenu zastavu da počneš da crtaš.
Izazov Možeš li dodati komande kojima će igrači promeniti boju olovke? Moraćeš da koristiš blok „Kada je dirka pritisnuta“ iz grupe „Događaji“ i blok „Neka boja olovke bude“ iz grupe „Olovka“.
Kada je dirka g pritisnuta Neka boja olovke bude 50
Moraćeš da dodaš blokove „Kada je dirka pritisnuta“ i „Neka boja olovke bude“ za svaku boju koju želiš da koristiš. Igraj se različitim brojevima i nastavi da isprobavaš svoj kod.
29
A K A Š E R G E J N A J L V A R P IS 1.
Kad kodiraš, nekad moraš da isprobaš nekoliko različitih rešenja da dođeš do pravog. Pritom se često prave greške. Greška u nekom delu koda koja sprečava da program glatko teče na engleskom se zove bug (doslovno značenje je buba). Zato se otklanjanje tih grešaka zove i debugging. Pronaći ćeš odgovore na ova pitanja na strani 33.
2.
Pronađi grešku u ovim uputstvima za pečenje tosta.
1. 2.
o b, kao što di da nacrtaš slov an m ko o lik ko ne Evo im šta nije u redu s ov je ovo na slici. Ali komandama?
Uzmi parče hleb a. Stavi ga u toster .
3. Namaži pa rče tosta maslace m. 4. Izvadi parč e tosta iz toster a.
3.
B greška
Bubice za dorucak
Greška u logou Ovaj pravougaonik je visok 100 piksela, a širok 300 piksela.
300
Počni od tačke. D4 R3 D2 L3
100
Ovim kodom bi trebalo da nacrtaš taj pravougaonik ‒ ali negde se krije greška, a možda i dve!
30
fd 100 rt 90 fd 300 rightrtt 90 fd 100 rt 90 fd 90
4.
Greška u skracu
Kljucn a r e c Debug ging
ta u skraču. Ovde je kod za crtanje kvadra širok 200 piksela. i ok Kvadrat bi trebalo da bude vis
200
5. 200
Pronađi grešku u kodu:
Spusti olovku
Idi 200 koraka Okret za 90 stepeni Idi 200 koraka Okret za 90 stepeni Idi 200 koraka Okret za 90 stepeni Idi 200 koraka
je n a lj v a r p is a z i t e Sav grešaka š: radi ono što hoće ne d ko oj tv ad šta K k i razmisli o tome ra ko po k ra ko d 1. Pregledaj ko da radi. svaka koman u da ti bude lakše. 2. Nacrtaj sliku ili šem edah! 3. Napravi kratak pr
: grešak a zbog Ispravljanje koji radi ka ko bi t h kod ne rebalo .
Prekinuta igra
Ovaj skračov pr og animirani lik da ur ram trebalo bi da natera adi dve stvari: Da se kreće go re Kada je dirka u pritis nuta kad se pritisne Usmeri se ka 0 taster U . Da se kreće dole kad se pritisne taster D . Pronađi grešku u kodu.
Idi 10 koraka Kada je dirka d pritisnuta Usmeri se ka 90
Idi 10 koraka
Evo nekoliko saveta koji će ti pomoći u ispravljanju grešaka.
raš: nicama dok kodi er sm im ov o j lja Razmiš kše ako program. Biće ti la li is m os o jiv žl pa 1. Najpre u ili beleške. koristiš šem go je je početi od mno ol jb na š, ra di ko 2. Kad učiš da programa nego od jednog velikog i malih i lakih teškog. moj čekati dok ga praviš ‒ ne m ra og pr aj av ob 3. Ispr mande. da uneseš sve ko
31
