Digital Kids

Această pagină poate fi doar citită. Poți vedea sursa, dar nu poți modifica pagina. Consultă administratorul dacă ești de părere că ceva este în neregulă.
====== Lecția 4: Bucle în Khan ======

Cum facem o acțiune repetitivă în Scratch? Folosim bucle, fie că erau //**repetă mereu**//, adică''forever'' sau //**repetă de x ori**//, adică ''repeat <x> times'' sau //**repetă cât timp <condiție>**//, adică ''repeat until <condition>''. Khan ne oferă mecanisme asemănătoare. De exemplu, am folosit până acum acțiunea sau funcția ''draw''. ''draw'' este ca o buclă ce se repetă mereu. Instrucțiunile ce se găsesc în interiorul lui ''draw'' se vor repeta mereu și astfel putem crea animații.

Astăzi vei învăța să lucrezi cu bucle în Khan, dar mai întâi fă recapitularea. Mai știi să folosești condiții în Khan?

===== Recapitulare =====

==== Recapitulare 1: Condiții ====
În exercițiul recapitulativ de mai jos, vei găsi comentarii ce trebuie să faci. Completează instrucțiunile ''if'' cu condițiile potrivite pentru a afișa un singur cristal în funcție de ce număr este ales la întâmplare.

<html>
<h2><a href="http://www.khanacademy.org/cs/dk-modul7-lectia4-recap/5498561409056768">Condiții - Piatră prețioasă la întâmplare</a></h2> <script src="http://www.khanacademy.org/cs/dk-modul7-lectia4-recap/5498561409056768/embed.js?editor=yes&amp;buttons=yes&amp;author=yes&amp;embed=yes"></script> <p>Made using: <a href="http://www.khanacademy.org/cs">Khan Academy Computer Science</a>.</p> 
</html>

==== Recapitulare 2: Variabile și Animație ====

Ai făcut data trecută variabile și animație. Momenta programul de mai jos nu funcționează. Completează-l astfel încât să se miște mașina.

Ai deja variabilele pe care trebuie să le pui în loc de semnul întrebării ''?'' și să decomentezi:
''var xfata''
\\
''var xspate''
\\
''var xcorp''

Declară tu variabilele pentru roți. Ți-a apărut o mașină? Scrie la sfârșit ceea ce trebuie pentru ca mașina să se miște.

<html>
<h2><a href="http://www.khanacademy.org/cs/variabile-i-animaie-maina-albastr/4507547915517952">Variabile și animație - Mașina albastră</a></h2> <script src="http://www.khanacademy.org/cs/variabile-i-animaie-maina-albastr/4507547915517952/embed.js?editor=yes&amp;buttons=yes&amp;author=yes&amp;embed=yes"></script> <p>Made using: <a href="http://www.khanacademy.org/cs">Khan Academy Computer Science</a>.</p>  
</html>
===== Tutorial : while =====

==== While ====

<note warning>**Citește cu atenție tot ce scrie mai jos înainte de a te apuca de exerciții!**</note>

Instrucțiunea ''while (<condition>)'' se poate traduce în ''repetă până când <condiție> este adevărată'' sau ''cât timp condiția este adevărată, fă următoarele acțiuni''. De exemplu:

<code javascript>
var a = 1;
while (a < 6) {
  a = a + 2;
}
</code>

Avem o variabilă ''a'' căreia îi setăm valoarea 1. Calculatorul cum va interpreta aceste instrucțiuni? Când ajunge în buclă va face următorii pași (adică suntem la ''while''):

=== Pasul 1: a este 1 ===
Este valoarea lui ''a'' mai mică decât 6? **Da!** Atunci fă acțiunile dintre acolade ''{'' ''}''! Deci ''a'' devine valoarea veche a lui ''a'' plus 2, adică ''a'' o să fie egal cu ''1 + 2 = 3''!

=== Pasul 2: a este 3 ===
Este valoarea lui ''a'' mai mică decât 6? Este 3 mai mic decât 6? **Da!** Atunci ''a'' cât devine? Corect, 5!

=== Pasul 3: a este 5 ===
Este valoarea lui ''a'' mai mică decât 6? **Da!** Deci ''a'' va fi egal cu ''a + 2'', adică ''5 + 2 = 7''.

=== Pasul 3: a este 7 ===
Este valoarea lui ''a'' mai mică decât 6? **Nu!** Nu mai repetăm nicio acțiune din buclă și continuăm cu următoarea instrucțiune după ''}''.

<note warning>Deschide programele de mai jos și dă click pe butonul **Save as a spin-off**. Doar așa se vor salva programele în contul tău și poți să le vezi dând click pe "My programs" de la link-ul https://www.khanacademy.org/computing/cs!</note>

==== Tutorial 1 : Text din ce în ce mai mare ====

Salvează programul ca spin-off (echivalentul lui remix din Scratch) și modifică-l astfel încât la fiecare pas să crească dimensiunea textului. Dimensiunea textului se poate modifica prin instrucțiunea ''textSize(x)'', unde x este cât de mare sau mic să fie textul.

<html>
<h2><a href="http://www.khanacademy.org/cs/while-text-cresctor/5101829118492672">While - Text crescător</a></h2> <script src="http://www.khanacademy.org/cs/while-text-cresctor/5101829118492672/embed.js?editor=yes&amp;buttons=yes&amp;author=yes&amp;embed=yes"></script> <p>Made using: <a href="http://www.khanacademy.org/cs">Khan Academy Computer Science</a>.</p> 
</html>

Poți încerca mai multe variante. De exemplu:
''textSize(i * 10)''
\\
''textSize(i + 20)''

==== Tutorial 2 : Text din ce în ce mai mare și în coloană ====

Aliniază textul astfel încât să apară pe o coloană, pe verticală. **Atenție!** Textul trebuie să devină din ce în ce mai mare, nu modifica ce ai făcut la pasul anterior.

<spoiler | Arată-mi cum!>
<code javascript>
    text("Bună!", 100, i * 35);
</code>
</spoiler>

===== Exercițiul 1: Text aleator de dimensiuni diferite =====

Scrie textul în locuri aleatoare, cu dimensiuni variabile. Adaugă două variabile a căror valoare este aleasă la întâmplare care vor semnifica poziția pe verticală a textului, adică ''y'' și poziția pe orizontală a textului, adică ''x''.
În instrucțiunea pentru desenarea textului avem așa:
''text("Bună", poziția pe verticală, poziția pe orizontală);''

**Indiciu!** Pentru generare aleatoare, folosește ''random(0, 400)''!
===== Tutorial: for =====

<note warning>**Citește cu atenție tot ce scrie mai jos înainte de a te apuca de exerciții!**</note>

''for (setarea valorii unei variabile; cât timp continuăm bucla; schimbarea valorii unei variabile)''

==== Tutorial 4: Dreptunghiuri și bucle ===

În lecția precedentă ai desenat 6 dreptunghiuri la o distanță fixă între ele. Acum poți face asta foarte ușor cu bucla ''for''.
Urmărește programul de mai jos și modifică-l să afișeze doar 4 dreptunghiuri!

<html>
<h2><a href="http://www.khanacademy.org/cs/for-dreptunghiuri/6387554690531328">For - Dreptunghiuri</a></h2> <script src="http://www.khanacademy.org/cs/for-dreptunghiuri/6387554690531328/embed.js?editor=yes&amp;buttons=yes&amp;author=yes&amp;embed=yes"></script> <p>Made using: <a href="http://www.khanacademy.org/cs">Khan Academy Computer Science</a>.</p> 
</html>

==== Tutorial 5 : Bucle echivalente ====

Refă exercițiile de la tutorial 1, 2 și 3 astfel încât să folosești bucla de tip ''for''. Uite un exemplu de transformare:

<code javascript>
var i = 0;
while (i < 10) {
  i = i + 1;
}
</code>

este echivalent cu
<code javascript>
var i;
for (i = 0; i < 10; i += 1) {

}
</code>

===== Bonus 1: Suma numerelor naturale =====

Realizează un program care calculează suma numerelor naturale până la 100 folosind una din buclele învățate astăzi, adică poți folosi o buclă ''while'' sau o buclă ''for''. 

Afișează suma pe ecran! Cât ți-a dat?

===== Bonus 2: Acumulează puncte pe Khan Academy! =====

Fă provocarea de la https://www.khanacademy.org/computing/cs/programming/looping/p/challenge-a-loopy-ruler și pe cea de la https://www.khanacademy.org/computing/cs/programming/looping/p/challenge-lined-paper

Dacă nu înțelegi ce îți cere, întreabă unul din traineri!

===== Bonus 3: Cercuri cu același mijloc =====

Realizează un program care să deseneze cercuri de culori diferite (alese aleator culorile). Cercurile vor avea același centru, în mijlocul planșei. Pentru a genera aleator o culoare vei folosi ''random(0, 255)'' pentru câmp din ''fill(R, G, B)'', unde ''R'' este cât de mult roșu are culoarea, ''G'' - cât de mult verde are culoarea si ''B'' cât de mult albastru are culoarea.

Ar trebui să obții ceva asemănător cu:
{{:module:07-bucle-in-programare:cercuri_for.png?400|}}


===== Lucru pentru acasă =====

Dacă nu ai reușit să termini lecția, rezolvă toate exercițiile și bonusurile!
Apoi, pornind de la bonusul 3, realizează o țintă cu multe cercuri. Acum nu va mai trebui să generezi la întâmplare (aleator) culorile, ci va trebui să alternezi culorile: o dată un cerc este alb, iar următorul va fi roșu. Folosește o buclă, fie ''while'', fie ''for''!
Digital Kids

Unelte utilizator

Unelte site

Unelte pagină
