Tečaj E − Petlje 1 − Petlje i animacije

U ovoj ćeš se lekciji upoznati s osnovnim primjerom korištenja petlje i iteracije.

  • Computer science
  • looping
Print lesson
  • Starosna dob 9+
  • 65+ minute
  • JavaScript Blocks

Uvod

U ovoj ćeš se lekciji upoznati s osnovnim primjerom korištenja petlje i iteracije. Radi se o petlji 'for'. Petlje nam omogućuju ponavljanje, ali se razlikuju po funkcijama. Petlje ponavljaju kôd iznova na jednom određenom mjestu, ali funkcije se koriste da 'rašire' ponavljajući kôd kroz aplikacije.

Razmisli o korištenju primjera iz stvarnog života poput pranja zubi kako bi ilustrirao razliku između petlji i funkcija. Većina ljudi pere zube nakon jela, dakle oko 3 puta dnevno. Pranje zubi nakon svakog jela bi bila funkcija. Postoje aktivnosti koje se odvijaju u međuvremenu. Možemo ujutro prati zube, ići voziti bicikl, igrati tenis, potom prati zube nakon ručka i tako dalje... Funkcija je proširena.

Čin pranja zubi, četkanje naprijed i nazad bi bila petlja. Činimo to kontinuirano od 4 do 8 minuta i potom izađemo i petlje.

Ova prva lekcija u petljama ima za cilj upoznati učenike da razumiju kako se pomiče petlja i kako kontroliramo kretanje. Također, eksperimentiramo s različitim stvarima koje bismo mogli staviti u petlje.

Naše micro:bit lekcije prilagođene su za primjenu znanja dobivenih iz Code.org osnova računalne znanosti (Code.org CS Fundamentals). Prije nego što učenici počnu s ovim lekcijama, potičemo ih da, kao preduvjet, prvo završe sve gradivo iz Osnova računalne znanosti. Učenici bi trebali biti upoznati s petljama iz Code.org osnova računalne znanosti.

Osnove

Učenicima osobito preporučujemo da prvo završe sljedeće:

Nastavniku se izrazito preporuča da prvo završi sljedeće:

Vodič za nastavnike

Otvorite

Aktivnost

Ono što ćeš trebati

  • 1 − micro:bit
  • 1 − USB kabel
  • 1 − pakiranje AAA baterija (nije obvezatno)
  • 2 − pakiranje AAA baterija (nije obvezatno)

Dokumentacija

basic.forever(() => {})

forever

Nastavi s pokretanjem dijela programa u pozadini.


for(let i = 0; i < 5; ++i) {
  basic.showNumber(i)
}
            

for

Pokreni dio programa onoliko puta koliko narediš.


basic.showLeds(`
    . . . . .
    . . . . .
    . . # . .
    . . . . .
    . . . . .
    `)
            

showLeds

Prikaži sliku na LED zaslonu.


basic.showString("Hello!")
            

showString

Prikaži 'string' na LED zaslonu


basic.showNumber(0)
            

showNumber

Prikaži broj na LED zaslonu


let item = 0 
item = 0
            

setItem

Upotrijebi znak jednakosti kako bi varijabla pohranila broj ili 'string' koji si naredio.

3 koraka

Vodič za vježbu

Za micro:bit ćemo napraviti online upute ili kôd. Potom, idi na: makecode.microbit.org


let Number_of_Times_Through_Loop = 0
let PassThroughLoop = 0
PassThroughLoop = 0
Number_of_Times_Through_Loop = 4
basic.forever(() => {
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showNumber(PassThroughLoop)
    }
})
        

Ovaj kôd prikazuje 0, 1, 2, 3, 4. Radi se o 'forever' petljama.

Imamo dvije varijable ili dva broja koje spremamo.

Broj Number_of_Times_Through_Loop je postavljen na 4. Ipak ćemo proći ćemo kroz našu petlju 5 puta jer počinjemo na 0. Ovo je zbunjujuće, ali mnoge stvari u programiranju funkcioniraju s polazišnom točkom nula, stoga je važno ovo naučiti.

Naš drugi važan broj je PassThroughLoop. PassThroughLoop nam govori o trenutnom vremenu u petlji. PassThroughLoop počinje na 0 i svaki put kada prođe kroz 'for' petlju, uveća se za 1.

Slijedi poveznicu do početnog kôda. Dodatni blokovi su na dnu kako bi ti pomogli za počneš.

Početni kôd je dostupan ovdje.

NAPOMENA: Neiskorišteni blokovi na dnu kôda namijenjeni su za upotrebu u izazovima.

Izazovi

Početni kôd je dostupan ovdje.

Izazov 1

Kako bismo umjesto toga mogli izbrojati do sedam?

Pogledaj kôd

let Number_of_Times_Through_Loop = 0
Number_of_Times_Through_Loop = 7
basic.forever(() => {
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showNumber(PassThroughLoop)
    }
})
          

Gotov kôd je dostupan ovdje

Izazov 2

Što kažeš o brojanju do devet?

Pogledaj kôd

let Number_of_Times_Through_Loop = 0
Number_of_Times_Through_Loop = 9
basic.forever(() => {
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showNumber(PassThroughLoop)
    }
})
          

Gotov kôd je dostupan ovdje

Izazov 3

Možeš li brojati od 0 do 3 i potom prikazati srce na 3 sekunde? Za ovo ćeš trebati dodati vlastitu 'for' petlju. Zatim upotrijebi jedan od programskih blokova prikazanih na dnu našeg primjera.

Pogledaj kôd

let Number_of_Times_Through_Loop = 0
let PassThroughLoop = 0
Number_of_Times_Through_Loop = 3
basic.forever(() => {
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showNumber(PassThroughLoop)
    }
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showIcon(IconNames.Heart)
    }
})
          

Gotov kôd je dostupan ovdje

Izazov 4

Sada, brojimo od 0 do 2, pokaži srce na 4 sekunde, ali ovaj put neka treperi i konačno pokaži riječ "Go" 3 puta. (Trik: Za treperenje ćeš trebati očistiti sadržaj zaslona.). Također, svi blokovi će se koristiti za ovaj izazov.)

Pogledaj kôd

let Number_of_Times_Through_Loop = 0
let PassThroughLoop = 0
Number_of_Times_Through_Loop = 2
basic.forever(() => {
    for (let PassThroughLoop = 0; PassThroughLoop <= Number_of_Times_Through_Loop; PassThroughLoop++) {
        basic.showNumber(PassThroughLoop)
    }
    for (let PassThroughLoop = 0; PassThroughLoop <= 4; PassThroughLoop++) {
        basic.showIcon(IconNames.Heart)
        basic.showLeds(`
            . . . . .
            . . . . .
            . . . . .
            . . . . .
            . . . . .
            `)
    }
    for (let PassThroughLoop = 0; PassThroughLoop <= 2; PassThroughLoop++) {
        basic.showString("Go")
    }
})
          

Gotov kôd je dostupan ovdje

Samostalna vježba

Kreiraj vlastitu micro:bit animaciju koristeći se s najmanje tri petlje kako bi prikazao nešto zanimljivo. Budi spreman ispričati priču o tri stvari koje si prikazao na zaslonu.

Početni kôd se može naći ovdje.

Kviz

Pitanje 1

Što je "for petlja"?

Prikaži odgovor

Općenito, 'for' petlja se odnosi na kôd koji ponavlja 'for' određeni broj puta.

Pitanje 2

Opiši što se događa u donjem kôdu.


let index = 0
index = 0
basic.forever(() => {
    for (let index = 0; index <= 4; index++) {
        basic.showNumber(index)
    }
})
        
Prikaži odgovor

Kreiramo petlju čija varijabla iteracije petlje "i" ima početnu vrijednost 0 i završnu vrijednost 4. Varijabla iteracije petlje će se na kraju svake iteracije petlje povećati za 1. Petlja završava kada je i=4.

Pitanje 3

Opiši donji kôd.


let index = 0
index = 0
basic.forever(() => {
    for (let index = 0; index <= 6; index++) {
        basic.showNumber(index)
    }
})
        
Prikaži odgovor

Napravili smo 'for' petlju u kojoj je 0 početna vrijednost petlje, 'i' je indeks varijable i 6 je završna vrijednost. Varijabla iteracije petlje 'i' povećava se za 1 svaki put kada prođe kroz petlju. Petlja završava kada je i=6.

Selecting this opens external content from our support system, which adheres to their privacy policy.