Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.
Both sides previous revision Previous revision Next revision | Previous revision | ||
module:07-bucle-in-programare:lectia-05 [2014/04/12 01:35] teobaluta [Tutorial 1: Operații ș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&buttons=yes&author=yes&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 aritmetice și comparaț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&buttons=yes&author=yes&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&buttons=yes&author=yes&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> | <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> | </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''): |
- | ==== Exercițiul 1: Numere mari ==== | + | === 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 warning>Autentifică-te cu contul personal pe [[khanacademy.org]] și rezolvă exercițiul!</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! | ||
- | Scrie un program în Khan în care să generezi aleator un număr între 0 și 10000. Fă asta folosind ''random(0, 10000);''. | + | === Pasul 3: a este 5 === |
- | * dacă este între 1 și 1000, afișează "Sub o mie!" | + | Este valoarea lui ''a'' mai mică decât 6? **Da!** Deci ''a'' va fi egal cu ''a + 2'', adică ''5 + 2 = 7''. |
- | * dacă restul împarțirii la 3 este 0, afișează "Divizibil cu 3!" | + | |
- | * dacă restul împărțirii la 3 nu este 0, afișează "Nedivizibil cu 3!" | + | |
+ | === Pasul 4: 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ă ''}''. | ||
- | ==== Tutorial 2: Operatorul ȘI ==== | + | <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> |
+ | ==== Tutorial 1 : Text din ce în ce mai mare ==== | ||
- | <note important>Operatorul ȘI în Khan îl scriem cu ''&&''! Vezi exemplu mai jos!</note> | + | 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. |
- | 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. | + | <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&buttons=yes&author=yes&embed=yes"></script> <p>Made using: <a href="http://www.khanacademy.org/cs">Khan Academy Computer Science</a>.</p> | ||
+ | </html> | ||
- | <code javascript> | + | Poți încerca mai multe variante. De exemplu: |
- | var inaltimeAndrei = 138; // inaltimea lui Andrei in centimetri | + | ''textSize(i * 10)'' |
- | var varstaAndrei = 10; // varsta lui Andrei... in ani :) | + | \\ |
+ | ''textSize(i + 20)'' | ||
- | if (inaltimeAndrei < 150 && varstaAndrei < 14) { | + | ==== Tutorial 2 : Text din ce în ce mai mare și în coloană ==== |
- | fill(255, 0, 0); | + | |
- | textSize(20); | + | |
- | text("Intra gratuit!", 100, 100); | + | |
- | } | + | |
+ | 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> | </code> | ||
+ | </spoiler> | ||
- | Deci are Andrei voie să călărească poneiul gratis? | + | ===== 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ă);'' | ||
- | ==== Tutorial 3: Operatorul SAU ==== | + | **Indiciu!** Pentru generare aleatoare, folosește ''random(0, 400)''! |
+ | ===== Tutorial: for ===== | ||
- | <note important>Operatorul SAU în Khan îl scriem cu ''||''! Vezi exemplu mai jos!</note> | + | <note warning>**Citește cu atenție tot ce scrie mai jos înainte de a te apuca de exerciții!**</note> |
- | 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. | + | ''for (setarea valorii unei variabile; cât timp continuăm bucla; schimbarea valorii unei variabile)'' |
- | <code javascript> | + | ==== Tutorial 4: Dreptunghiuri și bucle === |
- | var inaltimeAndrei = 152; // inaltimea lui Andrei in centimetri | + | |
- | var varstaAndrei = 10; // varsta lui Andrei... in ani :) | + | |
- | if (inaltimeAndrei < 150 || varstaAndrei < 14) { | + | Î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''. |
- | fill(255, 0, 0); | + | Urmărește programul de mai jos și modifică-l să afișeze doar 4 dreptunghiuri! |
- | textSize(20); | + | |
- | text("Intra gratuit!", 100, 100); | + | <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&buttons=yes&author=yes&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> | </code> | ||
- | Deci are voie Andrei să meargă pe ponei gratis? | + | ===== Bonus 1: Suma numerelor naturale ===== |
- | ==== Exercițiul 1: Conditii compuse ==== | + | |
+ | 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? | ||
- | ==== Exercițiul 2: Bucle și condiții ==== | + | ===== Bonus 2: Acumulează puncte pe Khan Academy! ===== |
- | <html> | + | 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 |
- | <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&buttons=yes&author=yes&embed=yes"></script> <p>Made using: <a href="http://www.khanacademy.org/cs">Khan Academy Computer Science</a>.</p> | + | |
- | </html> | + | 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==== |