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 1: Funcții =======

Astăzi vom învăța ce sunt funcțiile, cum să scriem funcții și la ce ne folosec acestea. Vom folosi noile cunoștințe pentru a crea programe interesante în Khan (animații, joculețe etc.). 


====== Recapitulare șiruri de caractere ======
Intraţi pe următorul link şi completaţi formularul [[https://docs.google.com/forms/d/1VPl8FvLLmMN8HR4V8YK_Ji5J4msUPIo7RmarzvojjS4/viewform|acesta]]

====== Tutorial ======

===== Ce este o funcție? =====

O funcție este o parte separată de cod căreia îi atribuim un nume. Astfel, putem folosi acea parte de cod de mai multe ori fără să o rescriem.

Pe parcursul lecțiilor trecute am folosit funcții care exista deja in Khan (text, fill, rect etc.). Acum le vom explica mai în detaliu, și vom crea funcțiile noastre.

==== Exemplu ====

Pentru a desena un dreptunghi avem 2 variante:

  * Să îl construim din patru linii.
<code>
line(20, 20 , 120, 20);
line(20, 20 , 20, 180);
line(20, 180 , 120, 180);
line(120, 180 , 120, 20);
</code>
  * Să îl construim folosind functia //rect// care exista deja.
<code>
rect(20, 20, 120, 180);
</code>
Ambele variante de cod vor afișa același dreptunghi.
{{:module:10-functii-si-rutine:screen_shot_2014-02-21_at_21.21.03.png?200|}}

Pentru a desena o imagine cu 4 dreptunghiuri ar trebui să folosim 16 linii. Mult mai simplu este să folosim funcția //rect// de patru ori.
<html>
<h2><a href="http://www.khanacademy.org/cs/m10_l1_ex1/4574253990019072">M10_L1_ex1</a></h2> <script src="http://www.khanacademy.org/cs/m10_l1_ex1/4574253990019072/embed.js?editor=yes&amp;buttons=yes&amp;author=yes&amp;embed=yes"></script> 
</html>
<note>
Pentru a desena o linie folosim //line// care este tot o funcție. Funcția //line// desenează de fapt o mulțime de puncte care formează linia. 
</note>

===== Cum se definește o funcție? =====

Toate funcțiile se scriu într-un anumit fel pentru a putea fi recunoscute de calculator. Când scriem o funcție se numește că definim o funcție. În Khan funcțiile se definesc astfel: 
<code>
var primaFunctie = function() {
    fill(255, 0, 0);
    text("hello world", 100, 100);
};
</code>
<note important>**Numele funcției** este //primaFunctie//, iar ce face funcția se află între acolade și se numește **corpul funcției**.</note>


==== Exemplu ====

Mai jos este definită o funcție care desenează un fulg de nea.

{{:module:10-functii-si-rutine:fulg_de_nea_definire.png|}}
  * Creați un nou proiect în Khan Academy în care să definiția funcția, urmărind codul din imaginea de mai sus
  * Observați că deocamdată funcția nu desenează nimic pe ecran.
  * Pentru a folosi funcția ca să desenăm fulgi de nea trebuie să o **apelăm**.



===== Cum se apelează o funcție? =====

Pentru a folosi o funcție aceasta trebuie apelată (chemată). O funcție poate fi apelată numai după ce a fost declarată. Din această cauză vom declara toate funcțiile la începutul programului. 

Apelarea unei funcții se face folosind numele funcției urmat de paranteze și punct și virgula: //numeFunctie();//.

====Exercițiu====
Mergeți la exemplul //Fulgi de nea// de mai sus și sub funcția //desenFulg// scrieți mai multe apeluri la această funcție.

<note>
Când am definit funcția desenFulg am specificat cum se construiește un fulg de nea.
Ca să construim fizic (pe spațiul de desen) fulgul de nea am apelat funcția.
</note>

<note>
Pentru a desena mai mulți fulgi de nea a fost suficient să apelăm funcția de mai multe ori,
dar nu am mai rescris codul care construiește un fulg de nea.
</note>
===== Parametrii unei funcții =====

Parametrii unei funcții reprezintă valori care sunt transmise funcției din afara acesteia. Funcția își va modifica rezultatul în funcție de parametri transmiși.

  * Transmiterea parametrilor se face la apelul funcței astfel: //numeFunctie(parametru1, parametru2);//

<note>
Funcția //ellipse// primește patru parametri, primi doi stabilesc pozitia elipsei iar următorii doi dimensiunea acesteia: //ellipse(150, 150, 50, 30);//
</note>

  * O funcție trebuie declarată astfel pentru a putea primi parametri:
<code>
var numeFunctie = function(parametru1, parametru2) {
    // corp functie
};
</code>

==== Exercițiu ====

  * Modificati programul precedent astfel încât fulgii de nea să fie poziționați unde vrem noi pe ecran.
  * Pentru aceasta, va trebui să definiți variabilele ''x'' și ''y'' ca parametri ai funcției.
  * Desenați apoi 5 fulgi de nea astfel: câte unul în fiecare colț și unul în centrul ecranului.

===== Funcții care întorc valori =====

Funcțiile nu se folosesc numai pentru desen. Câteodată dorim ca o funcție să calculeze un rezultat sau să modifice un text. În aceste cazuri o să dorim ca funcția să ne întoarcă un rezultat acolo unde am apelat-o.

==== Exemplu ====

Să presupunem că avem mai multe propoziții și dorim să aflăm numărul de vocale din fiecare. Pentru a nu scrie cod care face același lucru de mai multe ori vom folosi o funcție care primește ca parametru o propoziție, apoi calculează și întoarce numărul de vocale din aceasta.


{{:module:10-functii-si-rutine:fulg_de_nea_definire.png?500|}}
==== Exercițiu ====

Modificați codul astfel încât funcția să returneze numărul de consoane din propoziție.

// note
  * Pentru a întoarce o valoare trebuie să scriem la sfârșitul funcției //return ceVremSaIntoarca//.
  * Rezultatul va fi întors exact în locul de unde am făcut apelul funcției.
  * O funcție poate întoarce un singur rezultat.
// note closed

====== Exerciții ======
Figuri geometrice custom    
  * Creați un program nou cu numele **figuri geometrice custom**.

  * Scrieți o funcție cu numele **triunghiGalben** care să primească parametri x1, y1, x2, y2, x3, y3 și să deseneze un triunghi galben cu coordonatele primite. Apelați funcția o dată cu ce parametri vreți.

  * Scrieți o funcție **cerc** care desenează un cerc în funcție de poziție, rază și culoare. Testați funcția.

  * Construiți o funcție **verificaPatrat** care primește poziția și dimensiunile unui dreptunghi, apoi verifică dacă dreptunghiul este și pătrat.
    * Dacă este pătrat, funcția îl va desena de culoarea albastră
    * Dacă nu este pătrat, funcția va desena dreptunghiul cu proprietățile primite de culoare roșie.
  * Desenați un pătrat și un dreptunghi apelând funcția.

  * Folosind funcțiile de mai sus creați un desen pe ce temă vreți voi (Exemple: lumea roboților, micul dejun, în parc ...). Puteți folosi și funcțiile din Khan, dar folosiți cel puțin două dintre funcțiile scrise de voi.

Zmeie

  * Aveți aici background-ul unei zile senine, dar cu vânt, numai bună de înălțat zmeie http://www.khanacademy.org/cs/zmeie-backgound/5923981364297728.

  * Va trebui să scrieți o funcție care să deseneze zmeie ca în desenul de mai jos.
{{:module:10-functii-si-rutine:screen_shot_2014-03-02_at_19.41.16.png?300|}}

  * Funcția va primi parametri centrul rombului care reprezintă zmeul, lungimea diagonalei pe x și lungimea diagonalei pe y. Va trebui să desenați un poligon colorat în formă de romb și peste el două linii (diagonalele rombului) pentru a obține imaginea unui zmeu.


// note
În funcție veți folosi:  
* //quad(x1, y1, x2, y2, x3, y3, x4, y4)// o data
* //line(x1, y1, x2, y2)// de doua ori
// note closed

  * Aveți aici un desen cu proprietățile rombului.
{{:module:10-functii-si-rutine:screen_shot_2014-03-02_at_19.56.44.png?300|}}
===== Bonus =====
  * Construiți o funcție care desenează o bucată dintr-un gard.
//note
Folosiți funcțiile [[https://www.khanacademy.org/cs/beginshapeendshape/5462945756610560|beginShape() și endShape()]].
// note closed
  * Desenați un gard apelând funcția definită într-un loop.

====== Exerciții pentru acasă ======
Noaptea:
  * Creați un program nou cu numele //noaptea//.

  * Definiți o funcție pentru a desena o stea.

  * Scrieți o funcție care desenează luna.

  * Definiți o funcție care desenează un copac.

  * Creați un peisaj de noapte prin mai multe apeleuri la funcțiile definite.
Digital Kids

Unelte utilizator

Unelte site

Unelte pagină
