Diferențe

Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.

Link către această vizualizare comparativă

--- module:07-bucle-in-programare:lectia-05 [2014/04/12 01:27]
teobaluta [Tutorial 3: Bucle și condiții]
+++ module:07-bucle-in-programare:lectia-05 [2016/02/27 20:00] (curent)
andreea creat
@@ Linia 1: / Linia 1: @@
-====== Lecția 5: Recapitulare Khan: bucle și condiții ======
+====== Lecția 5: Bucle în Khan ======
-====Recapitulare:====
+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.
-  * Afișează o parte din numerele de la **1** la **10** pe o coloană folosind un **for**(cele pare), iar pe o altă coloană folosind un **while**(cele impare).
+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?
-  * Urmărește cu atenție comentariile din următorul program în Khan: <html><h2><a href="http://www.khanacademy.org/cs/m7_l5_recap_ex1/5403965253484544">M7_L5_recap_ex1</a></h2> <script src="http://www.khanacademy.org/cs/m7_l5_recap_ex1/5403965253484544/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 =====
-  * Uită-te cu atenție la următoarea imagine și încearcă să desenezi **10 pătrate** pe ecran cu aproximativ aceleași culori și folosind la alegere **for/while** (apasă **Click to display**):
-                       <hidden>  {{ :module:07-bucle-in-programare:circle_in_circle.png?nolink&300 |}}</hidden>
+==== 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.
+<note important>În Khan, operatorul "ȘI" este ''&&'', iar operatorul "SAU" este ''||''. De exemplu, dacă vrem să verificăm că un număr este între 2 și 3, scriem ''if (numar > 2 && numar < 3) {...}''</note>
-==== Tutorial 1: Operații și condiții ====
+<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>
-Hai să ne amintim operatorii pe care i-am învățat!
+==== Recapitulare 2: Variabile și Animație ====
-^ Tipul operației      ^ Operator       ^ Exemplu          ^
+Ai făcut data trecută variabile și animație. Momentan programul de mai jos nu funcționează. Completează-l astfel încât să se miște mașina.
-| Adunare              |  ''+''    | <code javascript>
-var a = 2;
-a = a + 4; // a va fi 6
-var b = 0;
-b = b + 3; // b va fi 3
-var c = 0;
-c++; // c va fi 1
-</code> |
-| Scădere              |  ''-''    | <code javascript>
-var a = 2;
-a = 10 - a; // a va fi 8
-var b = 8 - a; // b va fi 0
-</code> |
-| Înmulțire            |  ''*''    | <code javascript>
-var a = 5 * 4; // a este 20
-a = 2 * 20; // a este 40
-</code> |
-| Câtul împărțirii     |  ''/''    | <code javascript>
-var a = 100 / 4; // a este 25
-a = a / 2; // a este 12
-</code> |
-| Restul împărțirii     |  ''%''    | <code javascript>
-var a = 100 % 2; // a este 0
-a = 5 % 2; // a este 1
-</code> |
-Putem folosi acești operatori pentru a calcula diverse numere, de exemplu. Poți vedea un exemplu aici: [[http://www.khanacademy.org/cs/operatii/6109778351751168]].
+Ai deja variabilele pe care trebuie să le pui în loc de semnul întrebării ''?'' și să decomentezi:
+''var xfata''
+\\
+''var xspate''
+\\
+''var xcorp''
-Hai să facem un mic exemplu cu niște comparații. Cum facem să vedem că un număr este mai mic decât 10?
+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 numar = 3;
+var a = 1;
-// variabila număr se tot schimbă și noi vrem să vedem dacă e mai mică decât 10
+while (a < 6) {
-if (numar < 10) {
+  a = a + 2;
- // afiseaza valoarea variabilei numar
 }
 </code>
-Mai sus am folosit o **condiție**. Cum te-ai obișnuit, ''if'' (adică ''dacă'' în limba engleză) verifică adevărul unei acțiuni sau stări. De fapt, ''numar < 10'' poate lua două valori: ''true'' (adevărat) sau ''false'' (fals) și ''if'' spune calculatorului să facă ce e între acolade, cum e mai sus afișarea variabilei numar, doar dacă condiția dintre paranteze este ''true''.
+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''):
-=== Operatorul ȘI ===
+=== 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''!
-<note important>Operatorul ȘI în Khan îl scriem cu ''&&''! Vezi exemplu mai jos!</note>
+=== 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!
-Uneori vrem să verificăm că mai multe lucruri sunt adevărate în același timp într-o condiție. De exemplu, dacă Andrei are sub 150 cm și Andrei are sub 14 ani, are voie să meargă pe ponei gratuit.
+=== 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''.
-<code javascript>
+=== Pasul 4: a este 7 ===
-var inaltimeAndrei = 138; // inaltimea lui Andrei in centimetri
+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ă ''}''.
-var varstaAndrei = 10; // varsta lui Andrei... in ani :)
-if (inaltimeAndrei < 150 && varstaAndrei < 14) {
+<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|https://www.khanacademy.org/computing/cs]]!</note>
-  fill(255, 0, 0);
+==== Tutorial 1 : Text din ce în ce mai mare ====
-  textSize(20);
-  text("Intra gratuit!", 100, 100);
-}
-</code>
+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.
-Deci are Andrei voie să călărească poneiul gratis?
+<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>
-=== Operatorul SAU ===
+Poți încerca mai multe variante. De exemplu:
+''textSize(i * 10)''
+\\
+''textSize(i + 20)''
-<note important>Operatorul SAU în Khan îl scriem cu ''||''! Vezi exemplu mai jos!</note>
+==== Tutorial 2 : Text din ce în ce mai mare și în coloană ====
-Uneori vrem să verificăm cel puțin un lucru este adevărat într-o condiție. De exemplu, dacă Andrei are sub 150 cm sau Andrei are sub 14 ani, are voie să meargă pe ponei gratuit.
+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>
-var inaltimeAndrei = 152; // inaltimea lui Andrei in centimetri
+    text("Bună!", 100, i * 35);
-var varstaAndrei = 10; // varsta lui Andrei... in ani :)
+</code>
+</spoiler>
-if (inaltimeAndrei < 150 || varstaAndrei < 14) {
+===== Exercițiul 1: Text aleator de dimensiuni diferite =====
-  fill(255, 0, 0);
-  textSize(20);
-  text("Intra gratuit!", 100, 100);
-}
-</code>
+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ă);''
-Deci are voie Andrei să meargă pe ponei gratis?
+**Indiciu!** Pentru generare aleatoare, folosește ''random(0, 400)''!
-==== Exercițiul 1: Conditii compuse ====
+===== 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)''
-==== Exercițiul 2: Bucle și condiții ====
+==== 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/nava-spre-steluta/4703992924864512">Nava spre steluta </a></h2> <script src="http://www.khanacademy.org/cs/nava-spre-steluta/4703992924864512/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>
+<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>
+===== Exercițiul 2: 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''!
+Tema pentru ACUM constă în următoarele exerciții:
+* Calculati cu *for* produsul primelor 7 numere
+* Calculati cu *for* produsul primelor 5 numere pare, fără 0
+* Calculați cu *for* suma numerelor intre 10 si 20
+* Calculați cu *for* produsul numerelor între 5 și 11
+* Calculați cu *while* produsul numerelor între 8 și 14
+* Calculați cu *while* suma primelor 10 numere impare
-====Bonus====

Digital Kids

Unelte utilizator

Unelte site

Diferențe

Unelte pagină