Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.
Both sides previous revision Previous revision Next revision | Previous revision | ||
module:11-basic-web-dev:lectie-06 [2014/10/25 09:45] gchelu |
module:11-basic-web-dev:lectie-06 [2016/11/26 18:35] (curent) giorgiana.vlasceanu [Bonus] |
||
---|---|---|---|
Linia 1: | Linia 1: | ||
- | ====== Lecția 6: Introducere in JavaScript. ====== | + | ====== Lecția 6: Introducere in JavaScript ====== |
==== Ce este JavaScript? ==== | ==== Ce este JavaScript? ==== | ||
Linia 31: | Linia 31: | ||
</code> | </code> | ||
- | === 1. Cum afișăm? === | + | ==== 1. Cum afișăm? ==== |
Comanda **document.write** este folosită pentru a tipări un text în pagină. | Comanda **document.write** este folosită pentru a tipări un text în pagină. | ||
Linia 46: | Linia 46: | ||
</html> | </html> | ||
- | === 2. Variabile === | + | ==== 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). | Î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: | O variabilă poate fi declarată astfel: | ||
Linia 66: | Linia 66: | ||
Dacă doriți să aflați tipul unei variable puteți folosi **typeof nume_variabilă**. | Dacă doriți să aflați tipul unei variable puteți folosi **typeof nume_variabilă**. | ||
- | === 3. Instructiuni conditionale === | + | ==== 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: | 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: | ||
Linia 74: | Linia 74: | ||
și | și | ||
<code html> | <code html> | ||
- | instrucțiunea if … esle | + | instrucțiunea if … else |
</code> | </code> | ||
Aceste doua instrucțiuni sunt foarte asemănătoare, a doua instrucțiune fiind o extensie a primei instrucțiune. | Aceste doua instrucțiuni sunt foarte asemănătoare, a doua instrucțiune fiind o extensie a primei instrucțiune. | ||
Linia 98: | Linia 98: | ||
- | === 4. Ferestre Alert, Prompt si Confirm === | + | ==== 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. | 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. | ||
Linia 154: | Linia 154: | ||
</script> | </script> | ||
</code> | </code> | ||
- | === Task-uri === | + | ==== Task-uri ==== |
Task-urile următoare se vor realiza in CodePen. | Task-urile următoare se vor realiza in CodePen. | ||
Linia 163: | Linia 163: | ||
3. Afișeaza valorea unui string și valoarea unui număr folosind **document.write** | 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** | + | 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. | ||
- | 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ă”. Folotiți **document.write** pentru a afișa răspunsul. | ||
- | Hint: cum se folosește **for** în JavaScript. | ||
<code html> | <code html> | ||
var numere = [1, 2, 3, 4, 5, 6]; | var numere = [1, 2, 3, 4, 5, 6]; | ||
Linia 178: | Linia 177: | ||
</code> | </code> | ||
- | 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. | + | 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ă. | ||
- | 7. Verificați care este diferența între **document.writeln(“string”)** și **document.write(“string”) | + | 6. Verificați care este diferența între **document.writeln(“string”)** și **document.write(“string”)** |
- | ** | + | |
- | Bonus: | + | ==== 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. | 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. | 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> | + | <code> var myArray = new Array(); </code> |
| | ||
- | Populați matrice cu valori. Afișați matricea în documentul vostru însoțită de un string. | + | 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. | Verificați dacă matricea conține numere pare și afișați un mesaj corespunzător. | ||
- | === Recapitulare === |