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 6: Introducere in JavaScript. ======

==== Ce este JavaScript? ====
**JavaScript** este un limbaj de programare orientat obiect (dar despre acest detaliu probabil ca veți învăta mult mai târziu la scoală) și este folosit în general în documente **HTML** pentru introducerea unor //funcționalități// în paginile web.

**JavaScript** este dependent de browser-ul web (Mozilla Firefox, Google Chrome, etc) deoarece browser-ul interpretează codul JavaScript după care acest cod este executat și astfel sunt realizate funcționalitățile pe care ni le dorim.

==== Sintaxa ====
Sintaxa JavaScript este următoarea:
<code html>
<script type="text/javascript">
        // aici se poate scrie cod JavaScript
        // ...
</script>
</code>

Atributul **type** specifică browser-ului limbajul folosit pentru interpretarea codului pe care îl conține între tag-urile **<script>**.

Exemplu de utilizare a limbajului:
<code html>
<html>
<head>
<title>Cod JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        document.write("Textul care va fi afisat pe ecran");
    </script>
</body>
</html>
</code>

=== 1. Cum afișăm? ===
Comanda **document.write** este folosită pentru a tipări un text în pagină.

În exemplul anterior am arătat cum poate fi folosit codul JavaScript introdus direct în codul HTML. Însă, la fel ca și la codul CSS, codul JavaScript poate fi scris intr-un fișier separat. Pentru a specifica fișierul în care a fost scris codul JavaScript scriem în codul HTML între tag-urile <head> următoarea linie de cod:
<code html>
<script src="cod.js" type="text/javascript"></script>
</code>
Atributul **src** specifică numele fișierului ce contine codul JavaScript. 

Iată un exemplu în CodePen:
<html>
<p data-height="268" data-theme-id="0" data-slug-hash="idLGp" data-default-tab="result" data-user="giac" class='codepen'>See the Pen <a href='http://codepen.io/giac/pen/idLGp/'>idLGp</a> by Gia (<a href='http://codepen.io/giac'>@giac</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//codepen.io/assets/embed/ei.js"></script>
</html>

=== 2. Variabile ===
În continuare vom învăța de variabile. Variabilele sunt niște cutii în care păstrăm valori care sunt folosite în execuție. Acestea se pot modifica sau nu în timpul execuției programului (codului JavaScript).
O variabilă poate fi declarată astfel:
**var nume = valoare** sau **nume = valoare**

**var** specifică faptul că o variabilă urmează a fi declarată. În cod îl putem folosi sau nu.

Tipuri de variabile:
* numere
* string-uri (șiruri de caractere)
* boolene (true sau false)
* mulțimi
* obiecte

Exemplu de variabile:
**var s = “string”;**
**nr = 10;**

Dacă doriți să aflați tipul unei variable puteți folosi **typeof nume_variabilă**. 

=== 3. Instructiuni conditionale ===

Partea cea mai interesantă, dar și dificilă în acelaș timp, în scrierea de astfel de cod o reprezintă proiectarea acestuia astfel încât să ia decizii în timp ce se execută. Pentru acest lucru avem nevoie de instrucțiuni condiționale. Instrucțiunile condiționale despre care vom învăța astăzi sunt:
<code html>
instrucțiunea if
</code>
și
<code html>
instrucțiunea if … esle
</code>
Aceste doua instrucțiuni sunt foarte asemănătoare, a doua instrucțiune fiind o extensie a primei instrucțiune.

Sintaxa:
<code html>
if (conditie) {
// conditia este adevarata
} </code>

sau

<code html>
if (conditie) {
// conditia este adevarata 
}
else {
// conditia este falsa
}
</code>

După **if**, intre paranteze rotunde se găsește o condiție care trebuie îndeplinită pentru a se executa codul care este scris între acolade. Același lucru se întâmplă și în a doua sintaxă. Diferența constă în faptul că, în cazul în care condiția dintre paranteze rotunde nu este adevărată, se va executa codul ce este scris între acolade după **else**.


=== 4. Ferestre Alert, Prompt si Confirm ===

Mai mult ca sigur că fiecare dintre voi a folosit până acum o fereastra de Alert, Prompt sau Confirm care v-a apărut pe o anumită pagină web in timp ce navigați pe Internet. De acum veți ști și cât de ușor se pot crea și utiliza.

**1. Fereastra Alert**

Sintaxa:

<code html>
window.alert("mesaj") - mesaj este textul care va apărea în fereastra Alert.
</code>

Exemplu de utilizare:
<code html>
<script type="text/javascript">
    window.alert("Bine ai venit la Digita Kids");
</script> 
</code>

**2. Fereastra Prompt**

Sintaxa:

<code html>
window.prompt("mesaj", "default")
</code>
//__mesaj__// este textul care va apărea în fereastra **Prompt** iar //__default__// este o valoare predefinită pe care o putem da ca indiciu.

Exemplu de utilizare:
<code html>
<script type="text/javascript">
    window.prompt("Scrieți numele", "Nume");
</script> 
</code>

**3. Fereastra Confirm**

Sintaxa:

<code html>
window.confirm("intrebare")
</code>
Între ghilimele poate fi pusă o întrebare la care vrem să aflăm un răspuns pentru a lua ulterior o decizie.

Exemplu de utilizare:
<code html>
<script type="text/javascript">
intrebare = window.confirm("Rezultatul lui 0+0 este 0?");
if (intrebare) { 
alert("Corect");
}
    else { 
alert("Incorect"); 
}
</script> 
</code>
=== Task-uri ===
Task-urile următoare se vor realiza in CodePen.

1. Afișează valoarea unei variabile de tip număr folosind **Fereastra Alert** 

2. Afișează valorile a doua variabile de tip string folosind **Fereastra Prompt** 

3. Afișeaza valorea unui string și valoarea unui număr folosind **document.write** 

4. Afișeaza valorea unui string și valoarea unei variabile de tip boolean folosind **console.log**

5. Creați o lista cu nume de animale. Dacă animalul vostru preferat se afla în lista, afișați numele animalului, altfel afișați mesajul “Nu aveți un animal preferat în listă”

6. Creați o  **Fereastra Confirm** care vă întreabă dacă faceți parte din grupul Magenta Elephants. Dacă spuneți că nu, fereastra de confirmare trebuie să vă întrebe din nou și tot aș până spuneți că e adevărat.

7. Verificați care este diferența între **document.writeln(“string”)** și **document.write(“string”)
**

Bonus:
1. Declarați un vector de dimensiune 7. Afișați vectorul in documentul vostru. Stergeți primele doua elemente folosind funcția delete elem . Afișați din nou vectorul.

2. Declarați o matrice de 3x4 folosind codul de creare a unui vector. Practic, matricea voastra este de fapt formată din 3 array-uri de câte 4 valori fiecare.
       <code html> var myArray = new Array(); </code>
            
Populați matrice cu valori. Afișați matricea în documentul vostru însoțită de un string.
Verificați dacă matricea conține numere pare și afișați un mesaj corespunzător.
=== Recapitulare ===
Digital Kids

Unelte utilizator

Unelte site

Unelte pagină
