Cuprins

Lecția 4: Condiții în Khan

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.

O variabilă se creează așa:

var variabila;

Pentru a-i da o valoarea la creare, folosim operatorul de atribuire = în felul următor:

var variabila = 5;

Acum variabila este 5. O poți afișa folosind instrucțiunile de mai jos:

textSize(30);
fill(255, 0, 0);
text(variabila, 5, 100);

La sfârșitul fiecărei instrucțiuni/actiuni din Khan vei avea semnul ;!

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.

Comentarii in Khan

Made using: Khan Academy Computer Science.

Recapitulare

Intră pe khanacademy.org cu contul personal (dacă nu mai știi utilizatorul și parola, întreabă unul dintre instructori) și salvează-ți programele!

Desenează o fată zâmbitoare (smiley) în Khan!

  1. Desenează două ovale pentru ochi cu instrucțiunea ellipse(…) și colorează-le cu fill(…)
  2. Desenează un pătrat sau oval pentru nas. Colorează-l!
  3. Pentru zâmbet putem folosi 3 linii groase: grosimea seteaz-o cu strokeWeight, iar culoarea cu stroke.
  4. Încadrează totul într-un oval pentru conturul feței.

Dacă ai făcut asta, desenează o pălărie pentru personajul zâmbitor! :-)

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!

Tutorial

1. Variabile în Khan

Î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;.

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ă.

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).

Dreptunghiuri cu variabile

Made using: Khan Academy Computer Science.

Pentru a desena la distanta de 10 unități dreptunghiurile, va trebui să aduni la poziția pe orizontală, latimea, adica 50.

rect(80, 150, 50, 200);
rect(140, 150, 50, 200);
rect(200, 150, 50, 200);
rect(260, 150, 50, 200);

Adaugă după instrucțiunea background(…); următoarea linie:

var x = 20;

Rescrie instrucțiunile de mai sus astfel încât să faci adunarea în Khan:

x = x + 60;
rect(x, 150, 50, 200);

2. Animație în Khan

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ă.

Animatie Bila

Made using: Khan Academy Computer Science.

Bravo! Ai făcut prima ta animație pe ziua de astăzi! 8-)

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ă:

    if (x > 400) {
        speed = -5;
    }
 
    if (x < 0) {
        speed = 5;
    }

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 !

Cum ți se pare iepurele de aici: http://www.khanacademy.org/cs/weird-bunny/6124070950141952?

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?

Bravo! :-)

Bonus 1: Desenează forme!

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:

  1. creează o variabilă numită forma
  2. dacă variabila forma este egală (în Khan, egal este ===) cu 1, atunci desenează un cerc bleu
  3. dacă variabila forma este egală cu 2, desenează o linie neagră
  4. dacă variabila forma este egală cu 3, deseanează un triunghi galben
  5. dacă variabila forma este egală cu 4, desenează un dreptunghi verde
  6. dacă variabila formă este egală cu 5, desenează un pentagon gri

Schimbă valoarea variabilei forma și verifică corectitudinea programului tău!

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:

  1. adunăm a cu b și afișăm rezultatul
  2. scădem a din b și afișăm rezultatul
  3. înmulțim a cu b și afișăm rezultatul
  4. împărțim a la b și afișăm rezultatul