JavaScript - introducere

1. Rolul limbajului JavaScript în universul Web2. Limbajul JavaScript

3. JavaScript şi HTML

4. Primul script, exerciţiu 5. Variabile şi funcţii

1

JavaScript - introducere1. Rolul limbajului JavaScript in universul Web

• Scopul iniţial al HTML era de a localiza documentele şi a le reda pe ecranele monitoarelor.

• Documentele create cu HTML de bază sunt statice. • JavaScript dă viaţă documentelor:

• Permite interacţiunea cu utilizatorul prin intermediul formularelor sau jocurilor

• Creează efecte vizuale, precum animaţia • Modifică modul de redare a documentului în fereastra navigatorului • Controlează însăşi fereastra navigatorului.

2

JavaScript - introducere2. Limbajul JavaScript

• Creat de Netscape pentru a da dinamicitate documentelor• Adoptat rapid de toţi producătorii de navigatoare• Este un limbaj de scripting sau scriptare• Disponibil în două formate: client-side şi server-side• Limbajul este bazat pe obiecte (versiunile 2015 si 2016 accepta clase)

Client-side Trăsături Server-sideJavaScript comune JavaScript

3

*

*Începând cu anul 2015, limbajul este Orientat Obiect pentru că acceptă clase (ECMAScript 2015)

JavaScript - introducere3. JavaScript si HTML

• Codul Javascript este inclus in documentul HTML • Este plasat acolo unde trebuie executat; de regulă funcţiile

sunt plasate în antetul documentului, între etichetele <script> şi </script>, pentru a fi imediat disponibile când sunt apelate din corpul documentului

• În situaţiile când codul trebuie executat în corpul documentului, codul este inclus în corpul documentului, în locul unde trebuie executat • Poate fi inclus în fişier distinct, referit în antetul documentului cu atributul src: ex. 1: <script src="scripturi/myscript.js"> ex. 2: <script src="http://mysite.com/scripturi/myscript.js">

4

JavaScript - introducere4. Primul script • Eticheta <script>

• Este folosită pentru a notifica navigatorul că ceea ce urmează trebuie interpretat de interpretorul de limbaj. • Se foloseşte împreună cu atributul type pentru a specifica

tipul media (MIME) al scriptului, ex: <script type="text/javascript">* • Daca nu se specifica tipul, el este implicit text/javascript • Instructiunile se încheie cu eticheta </script>, fapt care notifica navigatorului încheierea misiunii de interpretare.

Inserati scriptul în corpul documentului!

Încercaţi urmatorul script: <pre><script type="text/javascript">document.writeln("Hello World"); document.writeln("Acesta e primul meu 'script'");</script></pre>

5

JavaScript - introducere4. Primul script • JavaScript este Case-sensitive!

• Document.Write; document.WRITE sau DOCUMENT.write nu sunt executate, generează EROARE

• document este obiectul Javascript Document

• Şirurile text sunt şirurile cuprinse între ghilimele, " ". Citările se introduc între apostroafe ' '.

• Ghilimelele si apostroafele sunt interschimbabile. Pentru a afisa semnul " intr-un sir incadrat intre ghilimele, se folosesc secvente escape \". Similar si pentru apostroafe.• Instructiunea writeln() produce efect doar între etichetele <pre></pre>.• Comentarii JavaScript: // pentru o singură linie, /* ..*/ pentru bloc de instrucţiuni.

6

JavaScript - introducere4. Primul script • Javascript tratează multe lucruri ca obiecte

• Obiectele sunt secvenţe de cod program şi date care pot fi tratate ca un tot unitar.

• Liniile individuale de program se numesc declaraţii • Grupurile de declaraţii înrudite, asociate unui obiect se numesc

metode. • Unul din obiectele cele mai importante este obiectul Document,

care reprezintă documentul afisat ferestre a navigatorului. • Pentru a executa sau apela metoda unui obiect, se adaugă metoda

documentului, separată prin punct şi se includ argumentele necesare în paranteze. document.write("exemplu de utilizare a metodei write");

• Argument este orice tip de informaţie care trebuie transmis metodei.

7

JavaScript - introducere4. Primul script • Când un script trebuie folosit în mai multe documente HTML este

preferabil ca scriptul să fie stocat într-un fişier extern cu extensia js;• Apelul scriptului se face, din fiecare document, astfel:

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

Folosiţi această metodă când: • scriptul trebuie folosit de mai multe documente

• scriptul are o lungime mare, făcând dificilă interpretarea codului HTML de către programator

• ascunde codul program celor care vizionează documentul (nu mai este accesibil cu view source)

• ascunde codul program browser-elor incompatibile (acestea afişeazăcodul JavaScript dacă este inclus în document)

8

JavaScript - introducere4. Primul script- exerciţiu

creaţi două documente HTML similare celor din figurile de mai jos:

Animale de prada • Tigrul

• Pantera

• Leul

• Rasul

Ce stiu despre JavaScript.

JavaScript este un limbaj de scripting, orientat pe obiecte. Codul scripturilor este inclus în documentele HTML sau apelat din fişiere externe. Codul se încarcăodată cu documentele şi este executat în interiorul navigatorului.

9

JavaScript - introducere4. Primul script - ascunderea codului

1. Browser-ele moderne recunosc limbajul JavaScript şi îlinterpretează şi execută

2. JavaScript este la versiunea 1.8. Browserele vechi, neactualizate, nu pot interpreta si executa corect functiile si metodele noi introduse in ver- siunile recente. 3. Multe browser-e permit dezactivarea interpretorului limbajului JavaScript şi nu vor executa codul. Pentru aceste situatii este indicat să se ascundăcodul în aceeaşi manieră în care se comenteaz codul HTML:

<!-- aici intra codul JavaScript --> notificări sub forma:

10

4. Pentru a preveni afisarea incorecta a continutului unei pagini care contine cod JavaScript într-un browser care are dezactivat interpretorul se folosesc etichetele <noscript></noscript> intre care se introduce un mesaj de avertizare <noscript> Activeaza javascript pentru a putea vedea continutul</noscript>

JavaScript - introducere5. Variabile şi funcţii

• Variabilelele sunt valorile stocate în memoria computerelor • Pentru a putea fi referite în programe, variabilele poartă un nume,

identificator de variabilă• Identificatorii sunt şiruri alfanumerice; acestea pot începe cu orice

literă, caracterul _ sau $, dar nu cu o cifră.

Nume valide de variabile Nume invalide de variabile

Nume_angajat !numeangajat

NumeAngajat 2_nume_angajat

$numeangajat Nume angajat

_numeangajat $nume angajat

-nume_angajat

11

JavaScript - introducere5. Variabile şi funcţii

• Variabilelele nu pot avea nume din lista cuvintelor rezervate:

•abstract •delete •goto •null •this

•boolean •do •if •package •throw

•break •double •implements •private •throws

•byte •else •import •protected •transient

•base •extends •in •public •true

•batch •false •int •return •try

•char •final •instanceof •short •typeof

•class •finally •interface •static •var

•const •float •long •super •void

•continue •for •native •switch •while

•default •function •now •synchronized •with

JavaScript - introducere5. Variabile şi funcţii

• Variabilelele nu trebuie declarate obligatoriu la începutulprogramului; numele variabilelor sunt Case-sensitve;

• Declararea se face cu ajutorul cuvantului rezervat var, cu sintaxa: • var nume_var = valoare

• Nu este obligatorie atribuirea unei valori variabilei la declararea ei.Variabila este nedefinită in acest caz.

• Tipul de variabilă se modifică prin atribuirea unei valori de alt tip. <script> var my_pet="kity";Încercaţi exemplul document.writeln(my_pet);alăturat: my_pet="doggy";

Nu uitaţi să introduceţi document.writeln(my_pet);totul între etichetele my_pet=3;<pre></pre> document.writeln(my_pet);

</script> 13

JavaScript - introducere5. Variabile şi funcţii

• Funcţiile permit gruparea declaraţiilor în unităţi logice ce pot fi folosite în program pentru executarea unor operaţii;

• Funcţiile se includ între etichetele <script> şi </script>; • Funcţia trebuie declarată înainte de a fi folosită, după sintaxa

• function nume_functie (listă argumente) { declaraţii;

}

• Remarcaţi cele 3 părţi ale declaraţiei: cuvântul cheie function, numele funcţieicu argumente şi declaraţiile, între acolade.

• O funcţie poate sau nu să intoarcă o valoare

• În cadrul programului funcţia este folosită prin apelare, prin simpla scriere a numelui functiei

14

JavaScript - introducere5. Variabile si functii

Exemplu de utilizare a unei funcţii fără parametri

Observaţi definirea funcţiei în antetul documentului şi apelul ei în corpul documentului

<html> <head><title>tipareste antet</title><script>function print_antet(){document.writeln("SC Webdeveloper");document.writeln("Str. Aries Nr.3");

}</script></head><body><pre><script>print_antet();</script></pre></body></html>

15

JavaScript - introducere 5. Variabile si functii

Exemplu de utilizare a unei functii cu parametri, fara intoarcerea unei valori.

Observati definierea functiei in antetul documentului si apelul ei in corpul documentului

Nu tastaţi Enter când scrieţi parametrii de apel ai funcţiei; veţi obţine eroare!

<html> <head><title>tipareste antet</title><script>function print_antet(nume_firma,adresa){document.writeln(nume_firma);document.writeln(adresa);

}</script></head><body><pre><script>print_antet("SC Webdeveloper","Str. AriesNr.3");</script></pre></body></html>

16

JavaScript - introducere5. Variabile si funcţii

Exemplu de utilizare a unei funcţii cu intoarcerea unei valori. Remarcati utilizarea cuvantu- lui cheie return

Un program poate conţine mai multe funcţii

<html><head><title>calcul ipotenuza</title><script>function calcul_ipotenuza(a,b){var a,b,c;c=a*a+b*b;return c;}

</script></head><body><pre><script>var ipotenuza=calcul_ipotenuza(3,4);document.writeln(ipotenuza);</script></pre></body></html>

17

JavaScript - introducere5. Domeniul de valabilitate al variabilelor (scope)

• Variabilele Javascript pot fi locale si globale • Variabilele globale sunt declarate în afara funcţiilor şi sunt disponibile întoate părţile programului.• Variabilele locale se declară în interiorul funcţiilor şi sunt recunoscute doar în interiorul respectivelor funcţii

Exemplul 1 <pre><script> var a=10 ; //variabila globala function localVarEx(){ var b = 20; //variabila locala document.writeln("variabila locala in interiorul functiei, b="+ b);

} document.writeln ("variabila globala a=" +a); // scrie 10 localVarEx(); //tipareste var. locala din interiorul functiei, scrie 20 document.writeln ("variabila locala in afara functiei b=" +b); // genereaza eroare sau nu scrie nimic *</script></pre>* IE generează eroare, FF şi Chrome nu afişează nimic 18

JavaScript - introducere 5. domeniul de valabilitate al variabilelor (scope)

Rezultatul executiei exemplului 1

variabila globala a=10

variabila locala in interiorul functiei, b=20

La incercarea de tiparire a variabilei locale in afara functiei apare eroare; Variabila b nu este recunoscuta in afara functiei!

Mozilla Firefox nu afiseaza mesaj de eroare, dar nici rezultatul corect!

19

JavaScript - introducere

5. Domeniul de valabilitate al variabilelor (scope) Temă

Modificaţi programul numind variabila locală tot a

Rulaţi programul şi interpretaţi rezultatul

Declaraţi o variabilă globală şi atribuiţi-i o valoare. Afişaţi valoarea variabilei din interiorul unei funcţii. Comentaţi rezultatul.

Programul afişează caniche şi nu Exemplul 2 pitbull, cum ne-am aştepta.<pre> Observaţi lipsa cuvântului cheie <script type="text/javascript"> var in corpul funcţiei, în faţavar dog="pitbull";

variabilei dog.function duplicare_var(){dog ="caniche"; Pentru a evita confuziile şi facilita

} urmărirea programului se duplicare_var();

recomandă folosirea de document.writeln(dog);</script> identificatori diferiţi în interiorul </pre> funcţiilor şi al programelor

20