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-04 [2014/04/08 17:58]
teobaluta [Recapitulare 1: Condiții]
+++ module:07-bucle-in-programare:lectia-04 [2016/02/27 20:00] (curent)
andreea creat
@@ Linia 1: / Linia 1: @@
-====== Lecția 4: Bucle în Khan ======
+====== Lecția 4: Condiții î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.
+Până acum am folosit Khan pentru desenarea unor figuri sau operații simple din matematică. Așa cum foloseam Scratch pentru a face jocuri ce aveau o anumită logică, așa putem scrie în Khan aceea logică. Diferența cea mai mare dintre Scratch și Khan este că în Khan nu mai avem blocuri predefinite de instrucțiuni și nu le mai putem folosi prin "drag and drop" (adică nu mai putem da click pe ele și să le punem într-un spațiu de Scripts pentru un obiect). Acum în Khan vom avea mai mare libertatea de a scrie codul, dar asta introduce un grad de complexitate mai mare.
-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?
+O variabilă se creează așa:
+<code javascript>
+var variabila;
+</code>
-===== Recapitulare =====
+Pentru a-i da o valoarea la creare, folosim operatorul de atribuire ''='' în felul următor:
+<code javascript>
+var variabila = 5;
+</code>
+Acum variabila este 5. O poți afișa folosind instrucțiunile de mai jos:
+<code javascript>
+textSize(30);
+fill(255, 0, 0);
+text(variabila, 5, 100);
+</code>
-==== Recapitulare 1: Condiții ====
+<note warning>La sfârșitul fiecărei instrucțiuni/actiuni din Khan vei avea semnul ''%%;%%''!</note>
-Î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>
+<note warning> Comentariile nu fac parte din cod, adică nu sunt interpretate de calculator! În Khan, comentariile sunt colorate cu verde. Comentariile pe o singură linie încep cu ''%%//%%''. Dacă vrem să scriem comentarii pe mai multe linii, putem pune în fața fiecărei linii ''%%//%%'' sau să folosim ''%%/*%%'' pentru a deschide comentariul pe mai multe linii și ''%%*/%%'' închide comentariul. Vezi mai jos un exemplu. </note>
 <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>
+<h2><a href="http://www.khanacademy.org/cs/comentarii-in-khan/6558304760233984">Comentarii in Khan</a></h2> <script src="http://www.khanacademy.org/cs/comentarii-in-khan/6558304760233984/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 ====
+===== Recapitulare =====
-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.
+<note warning>Intră pe khanacademy.org cu contul personal (dacă nu mai știi utilizatorul și parola, întreabă unul dintre instructori) și salvează-ți programele! </note>
-Ai deja variabilele pe care trebuie să le pui în loc de semnul întrebării ''?'' și să decomentezi:
+Desenează o fată zâmbitoare (smiley) în Khan!
-''var xfata''
+  - Desenează două ovale pentru ochi cu instrucțiunea ''ellipse(...)'' și colorează-le cu ''fill(...)''
-\\
+  - Desenează un pătrat sau oval pentru nas. Colorează-l!
-''var xspate''
+  - Pentru zâmbet putem folosi 3 linii groase: grosimea seteaz-o cu ''strokeWeight'', iar culoarea cu ''stroke''.
-\\
+  - Încadrează totul într-un oval pentru conturul feței.
-''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.
+Dacă ai făcut asta, desenează o pălărie pentru personajul zâmbitor! :-)
-<html>
+<note important>Dacă vrei să continui aici sau acasă, un proiect interesant propus de Khan Academy este să desenezi mâncarea de pe o masă. Intră la [[https://www.khanacademy.org/cs/programming/coloring/p/project-whats-for-dinner]]: numele proiectului s-ar traduce în "Ce avem la cină?". Lucrează la el și dă click pe **Save as a spin-off** pentru a salva modificările tale pe acest proiect!</note>
-<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 ====
+===== Tutorial =====
-<note warning>**Citește cu atenție tot ce scrie mai jos înainte de a te apuca de exerciții!**</note>
+==== 1. Variabile în Khan ====
-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:
+În Khan, nu mai avem blocuri de instrucțiuni și va trebui să scriem noi codul pentru ele. Astfel, pentru a putea crea o variabila ''latime'', scriem în Khan ''var latime;''.
-<code javascript>
+Cu ce ne ajută variabilele? Ele rețin niște valori la un moment dat din program și pot face mai ușoară munca noastră.
-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 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ă ''}''.
-<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 ====
-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.
+Desenează 6 dreptunghiuri la distanță de 10 unități. Ai deja desenat primul și ultimul, mai ai de desenat 4. Acțiunea de desenare a dreptunghiului este ''rect(pozitia pe orizontala, pozitia pe verticala, latime, lungime)''.
 <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>
+<h2><a href="http://www.khanacademy.org/cs/dreptunghiuri-cu-variabile/4801408659357696">Dreptunghiuri cu variabile</a></h2> <script src="http://www.khanacademy.org/cs/dreptunghiuri-cu-variabile/4801408659357696/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:
+Pentru a desena la distanta de 10 unități dreptunghiurile, va trebui să aduni la poziția pe orizontală, latimea, adica 50.
-''textSize(i * 10)''
-\\
-''textSize(i + 20)''
-==== Tutorial 2 : Text din ce în ce mai mare și în coloană ====
+<code javascript>
+rect(80, 150, 50, 200);
+rect(140, 150, 50, 200);
+rect(200, 150, 50, 200);
+rect(260, 150, 50, 200);
+</code>
-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.
+Adaugă după instrucțiunea ''background(...);'' următoarea linie:
-<spoiler | Arată-mi cum!>
 <code javascript>
-    text("Bună!", 100, i * 35);
+var x = 20;
 </code>
-</spoiler>
-===== Exercițiul 1: Text aleator de dimensiuni diferite =====
+Rescrie instrucțiunile de mai sus astfel încât să faci adunarea în Khan:
+<code javascript>
+x = x + 60;
+rect(x, 150, 50, 200);
+</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''.
+==== 2. Animație în Khan ====
-Î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)''!
+Urmărește programul de mai jos pentru a face mingea să se miște pe ecran. Schimbă culorea fundalului și a bilei, apoi scrie o instrucțiune pentru ca bila să se miște pe orizontală.
-===== 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>
+<h2><a href="http://www.khanacademy.org/cs/animatie-bila/5548090015612928">Animatie Bila</a></h2> <script src="http://www.khanacademy.org/cs/animatie-bila/5548090015612928/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 =====
+Bravo! Ai făcut prima ta animație pe ziua de astăzi! 8-)
-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:
+==== 3. Condiție în Khan ====
+Adaugă o condiție pentru ca bila să se miște în sens invers când ajunge la marginea din dreapta. Adaugă următoarea structură:
 <code javascript>
-var i = 0;
+    if (x > 400) {
-while (i < 10) {
+        speed = -5;
-  i = i + 1;
+    }
-}
+    if (x < 0) {
+        speed = 5;
+    }
 </code>
-este echivalent cu
+===== Exerciții =====
+==== Exercițiul 1: Provocare variabile! ====
+Te descurci foarte bine! Ce-ar fi să câștigi niște insigne (în engleză, "badge-uri") care să îți ateste cunoștințele?
+Fă provocarea de la https://www.khanacademy.org/cs/programming/variables/p/challenge-bucktooth-bunny !
+  * Folosește o variabilă pentru ochi și înlocuiește ultimele 2 valori din instrucțiunile pentru desenarea ochilor.
 <code javascript>
-var i;
+var __ = __;
-for (i = 0; i < 10; i += 1) {
+ellipse(170, 150, __, __);
+ellipse(230, 150, __, __);
-}
+</code>
+  * Folosește o variabilă pentru lungimea dinților.
+<code javascript>
+var __ = __;
+rect(185, 200, 15, __);
+rect(200, 200, 15, __);
 </code>
-===== Bonus 1: Suma numerelor naturale =====
+Cum ți se pare iepurele de aici: http://www.khanacademy.org/cs/weird-bunny/6124070950141952?
-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
+==== Exercițiul 2: Provocare pentru mișcarea bilei pe verticală ====
+Fă provocarea de la https://www.khanacademy.org/cs/programming/logic-if-statements/p/challenge-bouncy-ball ! Ai obținut vreo insignă ("badge") ca recunoaștere a eforturilor tale?
-Dacă nu înțelegi ce îți cere, întreabă unul din traineri!
+Bravo! :-)
-===== Bonus 3: Cercuri cu același mijloc =====
+==== Bonus 1: Desenează forme! ====
-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.
+Creează un program nou, accesând link-ul https://www.khanacademy.org/cs/new. Dă-i numele **Diverse Forme**. Urmează pașii de mai jos:
+  - creează o variabilă numită ''forma''
+  - dacă variabila ''forma'' este egală (în Khan, egal este ''==='') cu 1, atunci desenează un **cerc bleu**
+  - dacă variabila ''forma'' este egală cu 2, desenează o **linie neagră**
+  - dacă variabila ''forma'' este egală cu 3, deseanează un **triunghi galben**
+  - dacă variabila ''forma'' este egală cu 4, desenează un **dreptunghi verde**
+  - dacă variabila ''formă'' este egală cu 5, desenează un **pentagon gri**
-Ar trebui să obții ceva asemănător cu:
+Schimbă valoarea variabilei ''forma'' și verifică corectitudinea programului tău!
-{{:module:07-bucle-in-programare:cercuri_for.png?400|}}
+==== Lucru pentru acasă ====
-===== Lucru pentru acasă =====
+Scrie un program care conține o variabilă ''operator'', o variabilă ''a'' și o variabilă ''b''. În funcție de valoarea variabilei ''operator'', putem face următoarele:
+  - adunăm ''a'' cu ''b'' și afișăm rezultatul
+  - scădem ''a'' din ''b'' și afișăm rezultatul
+  - înmulțim ''a'' cu ''b'' și afișăm rezultatul
+  - împărțim ''a'' la ''b'' și afișăm rezultatul
-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

Diferențe

Unelte pagină