Digital Kids

Unelte utilizator

Unelte site

Sidebar

module:11-basic-web-dev:lectie-06

Cuprins

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: 

<script type="text/javascript">
        // aici se poate scrie cod JavaScript
        // ...
</script>

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

Exemplu de utilizare a limbajului: 

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

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: 

<script src="cod.js" type="text/javascript"></script>

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
}

sau 

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: 

<script type="text/javascript">
    window.alert("Bine ai venit la Digita Kids");
</script>

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: 

<script type="text/javascript">
    window.prompt("Scrieți numele", "Nume");
</script>

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: 

<script type="text/javascript">
intrebare = window.confirm("Rezultatul lui 0+0 este 0?");
if (intrebare) { 
alert("Corect");
}
    else { 
alert("Incorect"); 
}
</script>

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 <br>");
	else
		document.write("Numar impar <br>");
}

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 3×4 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.

module/11-basic-web-dev/lectie-06.txt · Ultima modificare: 2016/11/26 18:35 de către giorgiana.vlasceanu

Unelte pagină

Exceptând locurile unde este altfel specificat, conținutul acestui wiki este licențiat sub următoarea licență: CC Attribution 3.0 Unported
CC Attribution 3.0 Unported Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki