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

Atributul **type** specifică browser-ului limbajul folosit pentru interpretarea codului pe care îl conține între tag-urile ** ==== 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 următoarea linie de cod:

Atributul **src** specifică numele fișierului ce contine codul JavaScript. Iată un exemplu în CodePen:

See the Pen idLGp by Gia (@giac) on CodePen.

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


instrucțiunea if

și


instrucțiunea if … else

Aceste doua instrucțiuni sunt foarte asemănătoare, a doua instrucțiune fiind o extensie a primei instrucțiune. Sintaxa:


if (conditie) {
// conditia este adevarata
}


if (conditie) {
// conditia este adevarata 
}
else {
// conditia este falsa
}

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:


window.alert("mesaj") - mesaj este textul care va apărea în fereastra Alert.

Exemplu de utilizare:

**2. Fereastra Prompt** Sintaxa:


window.prompt("mesaj", "default")

//__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:

**3. Fereastra Confirm** Sintaxa:


window.confirm("intrebare")

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

==== 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. 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ă”. Folosiți **document.write** pentru a afișa răspunsul. Hint: cum se folosește **for** în JavaScript. Codul următor verifică dacă un număr dintr-o **lista de numere** este par sau impar.


var numere = [1, 2, 3, 4, 5, 6];
var i;
for(i = 0; i < numere.length; i++) {
	if(numere[i] % 2 == 0)
		document.write("Numar par 
");
	else
		document.write("Numar impar 
");
}

5. 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. **Hint** : este nevoie de o structură repetitivă. 6. 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. var myArray = new Array(); Populați matricea 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.