Aici sunt prezentate diferențele dintre versiunile selectate și versiunea curentă a paginii.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
module:11-basic-web-dev:lectie-06 [2014/10/19 09:00] gchelu |
module:11-basic-web-dev:lectie-06 [2016/11/26 16:13] giorgiana.vlasceanu [Task-uri] |
||
---|---|---|---|
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ă” | + | <code html> |
+ | 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 <br>"); | ||
+ | else | ||
+ | document.write("Numar impar <br>"); | ||
+ | } | ||
+ | </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. | ||
Linia 180: | Linia 190: | ||
Populați matrice cu valori. Afișați matricea în documentul vostru însoțită de un string. | 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. | Verificați dacă matricea conține numere pare și afișați un mesaj corespunzător. | ||
- | === Recapitulare === |