Palautetaan mieleen edellisen tunnin laskuri, mutta muutetaan koodia siten, että laskurin kasvattaminen laitetaan jos-valintalauseen sisälle eli kasvata laskuri yhdellä jos laskuri on pienempi kuin 10. Kun laskuri saa arvon 10, niin silloin ehto ei ole enää voimassa ja laskuria ei enää kasvateta. Ohjelman alussa laskuri saa arvon 0, mutta aina ennen tulostusta kasvatetaan laskuria yhdellä, jos ehto on voimassa, niin käytännössä ohjelma tulostaa luvut 1,2,3,4,5,6,7,8,9 ja 10 eli laskuria toistetaan vain tietty rajallinen määrä.
Sama ohjelma käyttäen p5.js koodia olisi seuraavanlainen.
var laskuri = 0; // Aseta laskurille alkuarvo
function setup() {
createCanvas(400, 400); // Ikkunan koko
textSize(50); // Tekstin koko 50
fill(0); // Tekstin väri musta
frameRate(1); // Ikkunan päivitysnopeus 1 ruutu/sekunti
}
function draw() {
background(255); // Tyhjennä tausta ja väritä se valkoiseksi
if (laskuri < 10) { // Jos laskuri on pienempi kuin 10, niin silloin
laskuri++; // kasvata laskuria yhdellä
}
text(laskuri,50,100); // Tulosta laskurin arvo paikkaan 50 px oikealle ja 100 px alas
}
|
Toisaalta Scratch-ohjelmassa löytyy valmis toistorakenne, joka toistaa 10-kertaa silmukkaa. Se on seuraavanlainen.
Tämä on sama asia kuin käyttäisimme for-silmukkaa P5.js ohjelmassa. For-silmukan yleinen rakenne on seuraava:
for (alkuarvo; ehto; laskuri) {
toistettavat lauseet;
}
Yllä oleva ohjelma voidaan nyt lyhentää seuraavasti.
function setup() {
createCanvas(400, 400); // Ikkunan koko 400 x 400
textSize(30); // Tekstin koko 30
fill(0); // Täyttöväri musta
}
function draw() {
background(255,255,0); // Tyhjennä tausta ja väritä se keltaiseksi
var laskuri = 0; // Määrittele laskuri ja anna laskurille alkuarvo 0
for (var a=0; a<10; a++) { // 10 toistoa eli a saa arvot 0,1,2,3,4,5,6,7,8,9
laskuri++; // Kasvata laskuria yhdellä
text(laskuri,50,50+30*laskuri); // Tulosta laskurin arvot allekkain
} // Lopeta for-silmukka
}
|
Jotta luvut eivät tulostu päällekkäin, niin y-koordinaattiin on lisättävä laskuri-muuttuja eli komento: 30*laskuri tulostaa y:n arvot allekkain. Lopputulos näyttää tältä.
Koska for-silmukassa on oma laskuri a, joka saa alkuarvon 0. Sekä silmukkaa kasvatetaan yhdellä laskurin a++ avulla ja silmukaa toistetaan, niin kauan kun a on pienempi kuin 10 eli käytännössä a saa arvoja 0,1,2,3,4,5,6,7,8,9. Kun a saa arvon 10, niin silmukan toisto lopetetaan. Käytännössä tämä tarkoittaa sitä, että erillinen laskuri-muuttuja on tarpeeton. Käytännössä for-silmukan oma laskuri-muuttuja riittää. Edellinen koodi on lyhennettävissä muotoon.
function setup() {
createCanvas(400, 400); // Ikkunan koko 400 x 400
textSize(30); // Tekstin koko 30
fill(0); // Tekstin väri musta
}
function draw() {
background(255,255,0); // Taustaväri keltainen
for (var a=0; a<10; a++) { // For-silmukka, jossa 10 toistoa eli a saa arvot 0,1,2,3,4,5,6,7,8,9
text(a,50,50+30*a); // Tulosta a:n arvot
}
}
|
Mikäli käytät laskuria, niin laskurin avulla voidaan liikuttaa for-silmukalla luotua merkkijonoa. Kokeile esimerkiksi ajaa seuraava koodi.
var laskuri=0; // Määrittele laskuri ja anna sille alkuarvo
function setup() {
createCanvas(400, 400); // Ikkunan koko 400 x 400
textSize(30); // Tekstin koko 30
fill(0); // Täyttöväri musta
}
function draw() {
background(255,255,0); // Tyhjennä tausta ja väritä se keltaiseksi
laskuri++; // Kasvata laskuria yhdellä
for (var a=0; a<10; a++) { // 10 toistoa
text(a,laskuri,50+30*a); // Tulosta muuttujan a arvot allekkain, liikuta oikealle laskurin avulla
} // Lopeta for-silmukka
if (laskuri > 400) { // Jos laskuri on suurempi kuin 400 (oikealla), niin
laskuri=0; // anna laskurille uusi alkuarvo (tällöin vasemalla)
} // Lopeta if-lause
}
|