Java Script Istoria Java Script a fost dezvoltat

  • Slides: 98
Download presentation
Java. Script

Java. Script

Istoria Java. Script a fost dezvoltat prima data de catre firma Netscape, cu numele

Istoria Java. Script a fost dezvoltat prima data de catre firma Netscape, cu numele de Live Script, un limbaj de script care extindea capacitatile HTML pentru prelucrarea informatiilor din formulare si care adauga dinamism in paginile web. Dupa lansarea limbajului Java, Netscape a inceput sa lucreze cu firma Sun, cu scopul de a crea un limbaj de script cu o sintaxa si semantica asemanatoare cu a limbajului Java, si din motive de marketing numele noului limbaj de script a fost schimbat in "Java. Script". Java Script a aparut din nevoia ca logica si inteligenta sa fie si pe partea de client , nu doar pe partea de server. Pe langa Jscript, Microsoft a introdus si un concurent pentru Java. Script, numit VBScript, realizat pentru a usura patrunderea pe web a programatorilor VB. VBScript este un subset al limbajului Visual Basic. Cu toate acestea Java. Script a devenit cunoscut ca limbajul de scripting standard pentru web.

Noţiuni de bază • Java. Script poate fi introdus in HTML. • Java. Script

Noţiuni de bază • Java. Script poate fi introdus in HTML. • Java. Script este dependent de mediu – Java. Script este un limbaj de scriptare; software-ul care ruleaza de fapt programul este browser-ul web (Firefox, Opera, Netscape Navigator, Internet Explorer, Safari, etc. ) Este important de luat in considerare aceasta dependenta de browser utilizînd aplicatii Java. Script. • Java. Script este un limbaj in totalitate interpretat – codul scriptului va fi interpretat de browser inainte de a fi executat. Java. Script nu necesita compilari sau preprocesari, ci ramane parte integranta a documentului HTML.

Noţiuni de bază • Java. Script este bazat pe obiecte – Java. Script nu

Noţiuni de bază • Java. Script este bazat pe obiecte – Java. Script nu este un limbaj de programare orientat obiect, ca Java, ci mai corect, este "bazat pe obiecte"; modelul de obiect Java. Script este bazat pe instanţă şi nu pe moştenire. • Java. Script este condus de evenimente – mare parte a codului Java. Script raspunde la evenimente generate de utilizator sau de sistem. Obiectele HTML, cum ar fi butoanele, sunt imbunătăţite pentru a accepta handlere de evenimente. • Java. Script nu este Java – Cele doua limbaje au fost create de companii diferite, motivul denumirii asemanatoare este legat doar de marketing.

Noţiuni de bază • Java. Script este multifunctional – limbajul poate fi folosit intr-o

Noţiuni de bază • Java. Script este multifunctional – limbajul poate fi folosit intr-o multitudine de contexte pentru a rezolva diferite probleme: grafice, matematice, si altele. • Java. Script evolueaza. • Java. Script acopera contexte diverse – programarea cu acest limbaj este indreptata mai ales catre partea de client, dar este posibil de a folosi Java. Script si pentru partea de Server. Java. Script este limbajul nativ pentru unele instrumente de dezvoltare web, ca Borland Intra. Builder sau Macromedia Dreamweaver.

Adaugarea Java. Script intr-un document HTML (1) <html> <body> <h 1>My First Web Page</h

Adaugarea Java. Script intr-un document HTML (1) <html> <body> <h 1>My First Web Page</h 1> <p id="demo"> Textul documentului in care este adaugat Java. Script </p> <script type="text/javascript">. . . codul Java. Script . . . </script> </body> </html> Textul documentului in care este adaugat Java. Script Reprezentarea rezultatului codului

Adaugarea Java. Script intr-un document HTML (1) <html> <body> <h 1>Textul documentului in care

Adaugarea Java. Script intr-un document HTML (1) <html> <body> <h 1>Textul documentului in care este adaugat Java. Script</h 1> <script type="text/javascript"> document. write("<h 1>Titlul Java. Script</h 1>"); document. write("<p>Un paragraf in Java. Script. </p>"); </script> </body> </html> Textul documentului in care este adaugat Java. Script Titlul Java. Script Un paragraf in Java. Script

Adaugarea Java. Script intr-un document HTML (1) <html> <body> <h 1>Textul documentului in care

Adaugarea Java. Script intr-un document HTML (1) <html> <body> <h 1>Textul documentului in care este adaugat Java. Script</h 1> <script> document. write("<h 1>Titlul Java. Script</h 1>"); document. write("<p>Un paragraf in Java. Script. </p>"); </script> </body> </html> Textul documentului in care este adaugat Java. Script Titlul Java. Script Un paragraf in Java. Script

Adaugarea Java. Script intr-un document HTML (1) <html> <body> <h 1>Textul documentului in care

Adaugarea Java. Script intr-un document HTML (1) <html> <body> <h 1>Textul documentului in care este adaugat Java. Script</h 1> <script> document. write("<h 1>This is a heading</h 1>"); document. write("<p>This is a paragraph. </p>"); </script> </body> </html> Textul documentului in care este adaugat Java. Script Titlul Java. Script Un paragraf in Java. Script este bazat pe obiecte

Adaugarea Java. Script intr-un document HTML (1) <div id="demo">Elementul schimbat de Java. Script</div> <script>

Adaugarea Java. Script intr-un document HTML (1) <div id="demo">Elementul schimbat de Java. Script</div> <script> document. get. Element. By. Id("demo"). inner. HTML = "<h 1>Salut la toti!</h 1>"; </script> Salut la toti!

Adaugarea Java. Script intr-un document HTML (1) <p id="demo">Elementul schimbat de Java. Script</p> <script>

Adaugarea Java. Script intr-un document HTML (1) <p id="demo">Elementul schimbat de Java. Script</p> <script> document. get. Element. By. Id("demo"). inner. HTML = "<h 1>Salut la toti!<h 1>"; </script> Salut la toti! Java. Script este bazat pe obiecte

Adaugarea Java. Script intr-un document HTML (1) <html> <body> < h 1>Textul documentului in

Adaugarea Java. Script intr-un document HTML (1) <html> <body> < h 1>Textul documentului in care este adaugat Java. Script</h 1 > <p id="demo">Elementul schimbat de Java. Script</p> <!-- <script type="text/javascript"> document. get. Element. By. Id("demo"). inner. HTML=Date(); </script> //--> </body> </html> Textul documentului in care este adaugat Java. Script Fri Oct 14 01: 03: 35 2011

Adaugarea Java. Script intr-un document HTML (1) <html> <body> < h 1>Textul documentului in

Adaugarea Java. Script intr-un document HTML (1) <html> <body> < h 1>Textul documentului in care este adaugat Java. Script</h 1 > Textul documentului in care este adaugat Java. Script Fri Oct 14 01: 03: 35 2011 <p id="demo">Elementul schimbat de Java. Script</p> <script> document. get. Element. By. Id("demo"). inner. HTML=Date(); </script> </body> </html> Java. Script este dependent de mediu

Adaugarea Java. Script intr-un document HTML (2) <html> <head> <script type="text/javascript"> function display. Date()

Adaugarea Java. Script intr-un document HTML (2) <html> <head> <script type="text/javascript"> function display. Date() { document. get. Element. By. Id("demo"). inner. HTML=Date(); } </script> </head> <body> <h 1>Java. Script in head</h 1> <p id="demo">Textul documentului in care este adaugat Java. Script</p> <button type="button" onclick="display. Date()">Data si ora</button> </body> </html>

Adaugarea Java. Script intr-un document HTML (2) <html> <head> <script> function display. Date() {

Adaugarea Java. Script intr-un document HTML (2) <html> <head> <script> function display. Date() { document. get. Element. By. Id("demo"). inner. HTML=Date(); } </script> </head> <body> <h 1>Java. Script in head</h 1> <p id="demo">Textul documentului in care este adaugat Java. Script</p> <button type="button" onclick="display. Date()">Data si ora</button> </body> </html>

Adaugarea Java. Script intr-un document HTML (2) <html> <head> <script> function display. Date() {

Adaugarea Java. Script intr-un document HTML (2) <html> <head> <script> function display. Date() { document. get. Element. By. Id("demo"). inner. HTML=Date(); } </script> </head> <body> <h 1>Java. Script in head</h 1> <p id="demo">Textul documentului in care este adaugat Java. Script</p> <button type="button" onclick="display. Date()">Data si ora</button> </body> </html>

Adaugarea Java. Script intr-un document HTML (2) <html> <head> <script> function display. Date() {

Adaugarea Java. Script intr-un document HTML (2) <html> <head> <script> function display. Date() { document. get. Element. By. Id("demo"). inner. HTML=Date(); } </script> </head> <body> Java. Script este <h 1>Java. Script in head</h 1> condus de evenimente <p id="demo">Textul documentului in care este adaugat Java. Script</p> <button type="button" onclick="display. Date()">Data si ora</button> </body> </html>

Rezultat

Rezultat

Adaugarea Java. Script intr-un document HTML (1) <button type="button" onclick="alert('Welcome!')" > Click Me! </button>

Adaugarea Java. Script intr-un document HTML (1) <button type="button" onclick="alert('Welcome!')" > Click Me! </button>

Adaugarea Java. Script intr-un document HTML (3) <html> <head> </head> <body> <script type="text/javascript" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=“myscript.

Adaugarea Java. Script intr-un document HTML (3) <html> <head> </head> <body> <script type="text/javascript" src=“myscript. js"> </script> <p> Scriptul se afla in fisierul "myscript. js". </p> </body> </html>

Adaugarea Java. Script intr-un document HTML (3) <html> <head> <script type="text/javascript" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="myscript. js"></script> </head>

Adaugarea Java. Script intr-un document HTML (3) <html> <head> <script type="text/javascript" src="myscript. js"></script> </head> <body> <p> Scriptul se afla in fisierul "myscript. js". </p> </body> </html>

Adaugarea Java. Script intr-un document HTML (3) <html> <head> myscript. js <title> Pagina lui

Adaugarea Java. Script intr-un document HTML (3) <html> <head> myscript. js <title> Pagina lui Georgica function display. Date() </title> { <script type="text/javascript" document. get. Element. By. Id("demo" src="myscript. js"></script> ). inner. HTML=Date(); </head> } <body> <h 3>Inserarea Java. Script in documentul HTML</h 3> <p id="demo"></p> <button type="button" onclick="display. Date()">Data si ora</button> </body> </html>

Adaugarea Java. Script intr-un document HTML (3) <html> <head> myscript. js <title> Pagina lui

Adaugarea Java. Script intr-un document HTML (3) <html> <head> myscript. js <title> Pagina lui Georgica function display. Date() </title> { <script type="text/javascript" document. get. Element. By. Id("demo" src="myscript. js"></script> ). inner. HTML=Date(); </head> } <body> <h 3>Inserarea Java. Script in documentul HTML</h 3> <p id="demo"></p> <button type="button" onclick="display. Date()">Data si ora</button> </body> </html>

Rezultat

Rezultat

Adaugarea Java. Script intr-un document HTML (3) <html> <head> <title> Pagina lui Georgica </title>

Adaugarea Java. Script intr-un document HTML (3) <html> <head> <title> Pagina lui Georgica </title> </head> <body> <h 3>Inserarea Java. Script in documentul HTML</h 3> <p align=right> <SCRIPT SRC="copyright. js"> </SCRIPT> </body> </html> copyright. js var lastmoddate = document. last. Modified; if(lastmoddate == 0) {document. writeln("Lastmodified: Unknown<BR>© 1999 Copyright Shelley Biotech")} else {document. writeln("Last. Modified: " + lastmoddate + "<BR>© 1999 Copyright Shelley Biotech")}

Rezultat

Rezultat

Sintaxa Java. Script 1. Case-sensitive - se face diferenta intre literele mari si mici,

Sintaxa Java. Script 1. Case-sensitive - se face diferenta intre literele mari si mici, astfel cuvinte precum "exemple, Exemple" vor fi tratate diferit. 2. Punct si virgula (; ) - Toate declaratiile trebuie sa se termine cu un caracter "punct si virgula" (; ). 3. Spatiile libere - Java. Script ignora spatiile libere. Recunoaste doar spatiile care apar în string-uri (sirurile de caractere). Exemplu: "var 1 = 2 ; " este la fel cu "var 1=2; ". 4. Ghilimelele - Ghilimelele simple ('') si duble ("") sunt folosite pentru a delimita sirurile de caractere (string). 5. Carcactere speciale: n - indica o linie noua t - indica o apasare a tastei TAB \ - indica un caracter backslash " - indica ghilimele duble

Sintaxa Java. Script • 6. Comentarii: Pentru a adauga un comentariu, pe o singura

Sintaxa Java. Script • 6. Comentarii: Pentru a adauga un comentariu, pe o singura linie, in interiorul codului, incepem scrierea acestuia cu succesiunea // (Exemplu: // Comentariu). Daca dorim sa scriem comentarii pe mai multe randuri, se foloseste /* la inceputul comentariului si */ la sfarsitul acestuia (Exemplu: /*. . . comentariu pe mai multe randuri. . . */) • 7. Numele variabileler si functiilor - numele dat variabilelor si functiilor trebuie sa respecte urmatoarele reguli: – - primul caracter trebuie sa fie o litera, un caracter de subliniere (_) sau semnul $ - primul caracter nu poate fi un numar - numele nu trebuie sa contina spatii libere - nu se folosesc cuvinte rezervate, care fac parte din limbajul Java. Script (cum sunt "array", "status", "alert").

Sintaxa Java. Script operatori • - Operatori aritmetici - Operatori de atribuire - Operatori

Sintaxa Java. Script operatori • - Operatori aritmetici - Operatori de atribuire - Operatori de comparare - Operatori logici (numiti si booleeni) - Operatori pentru siruri - Operator conditional ? - Operatori pentru functii - Operatori pentru structuri de date

Sintaxa Java. Script Operatori aritmetici • • adunare (+), scadere (-), inmultire (*), impartirere

Sintaxa Java. Script Operatori aritmetici • • adunare (+), scadere (-), inmultire (*), impartirere (/) mod (%) - (8%3 da rezultatul 2 ) Incrementare (++) Decrementare (--)

Sintaxa Java. Script Operatori de atribuire

Sintaxa Java. Script Operatori de atribuire

Sintaxa Java. Script Operatori de comparare

Sintaxa Java. Script Operatori de comparare

Sintaxa Java. Script Operatori logici (booleeni) • && - si (and) - Compara doua

Sintaxa Java. Script Operatori logici (booleeni) • && - si (and) - Compara doua expresii si returneaza TRUE daca amandoua sunt adevarate, in caz contrar returneaza FALSE. Eexemplu: – x = 5 y = 8 x<7 && y>3 (returneaza TRUE) • || - sau (or) - Compara doua expresii si returneaza TRUE daca cel putin una din ele este adevarata, in caz contrar returneaza FALSE. Eexemplu: – x = 5 y = 8 x>7 || y<3 (returneaza FALSE) • ! - not - este operator unar, foloseste o singura expresie si returneaza TRUE daca expresia este falsa, daca expresia este adevarata returneaza FALSE. Eexemplu: – x = 5 y = 8 !(x==y) (returneaza TRUE deoarece 'x' nu este egal cu'y')

Sintaxa Java. Script Operator pentru string (sir) concatenare a sirurilor + t 1 =

Sintaxa Java. Script Operator pentru string (sir) concatenare a sirurilor + t 1 = "Astazi este o zi" t 2 = "frumoasa" t 3 = t 1+t 2 (Variabila 't 3' va contine sirul "Astazi este o zifrumoasa") Adaugarea spatiului intre variabilele string Exemplu: t 1 = "Astazi este o zi" t 2 = "frumoasa" t 3 = t 1+" "+t 2 (Variabila 't 3' va contine sirul "Astazi este o zi frumoasa")

Sintaxa Java. Script Operatori pentru structuri de date (obiecte) Un operator care ar trebui

Sintaxa Java. Script Operatori pentru structuri de date (obiecte) Un operator care ar trebui cunoscut bine este punctul ". " numit operator pentru membrul unei structuri. Acesta ne permite sa ne referim la un membru ( variabila, functie sau obiect ) care apartine obiectului specificat. Sintaxa este urmatoarea : nume. Obiect. nume_proprietate nume. Obiect. nume_metoda() nume. Obiect. alt_obiect

Sintaxa Java. Script Operator indice al tabloului Acesta este simbolizat printr-o pereche de paranteze

Sintaxa Java. Script Operator indice al tabloului Acesta este simbolizat printr-o pereche de paranteze drepte [ ] , si permite sa ne referim la orice membru al unui tablou. Sintaxa de folosire a operatorului pentru tablou este : nume_tablou[cheie]

Sintaxa Java. Script Operatorul conditional "? " variabila = (conditie)? val 1: val 2

Sintaxa Java. Script Operatorul conditional "? " variabila = (conditie)? val 1: val 2 - se evalueaza conditia, daca este adevarata atunci variabila ia valoarea 'val 1', altfel ia valoarea 'val 2'. Exemplu: vizitator = "barbat" mesaj = (vizitator=="barbat")? "Stimate domn": "Stimata doamna" document. write(mesaj)

Sintaxa Java. Script Instructiuni conditionale • if - executa comenzile dorite cand o conditie

Sintaxa Java. Script Instructiuni conditionale • if - executa comenzile dorite cand o conditie este adevarata. • if. . . else - executa anumite comenzi cand o conditie este adevarata si alte comenzi cand aceasta este falsa. • switch - selecteaza care comanda va fi executata.

Sintaxa Java. Script Instructiuni conditionale - if <script > // daca ora > 11,

Sintaxa Java. Script Instructiuni conditionale - if <script > // daca ora > 11, // va scrie în fereastra Buna ziua! var d = new Date() var time = d. get. Hours() if (time>11) { document. write("<b>Buna ziua!</b>") } </script>

Sintaxa Java. Script Instructiuni conditionale if …else <script> // daca ora > 11, //

Sintaxa Java. Script Instructiuni conditionale if …else <script> // daca ora > 11, // va scrie în fereastra Buna ziua! // Alfel afiseaza "Este ora. . . " var d = new Date() var time = d. get. Hours() if (time>11) { document. write("<b>Buna ziua!</b>") } else { document. write("<b>Este ora " +time+ "</b>") } </script>

Sintaxa Java. Script Instructiuni conditionale - switch var d = new Date() var ziua

Sintaxa Java. Script Instructiuni conditionale - switch var d = new Date() var ziua = d. get. Day() switch (ziua) { case 5: document. write("Astazi e vineri"); break case 6: document. write("Astazi e sambata"); break case 0: document. write("Astazi e duminica"); break default: document. write("Mai e pana sambata"); }

Sintaxa Java. Script Instructiuni ciclice (repetitive) for - executa codul de un numar specificat

Sintaxa Java. Script Instructiuni ciclice (repetitive) for - executa codul de un numar specificat de ori; while - repeta codul atata timp cat o anumita conditie este adevarata; do. . . while - intai executa o data codul apoi il repeta atata timp cat o anumita conditie este adevarata;

Sintaxa Java. Script Instructiunea for <script type="text/javascript"> <!-for (x=1; x<5; x++) { document. write

Sintaxa Java. Script Instructiunea for <script type="text/javascript"> <!-for (x=1; x<5; x++) { document. write ("<br /> x este "+x); } //--> </script>

Sintaxa Java. Script Instructiunea for <script type="text/javascript"> <!-for (x=1; x<5; x++) { document. write

Sintaxa Java. Script Instructiunea for <script type="text/javascript"> <!-for (x=1; x<5; x++) { document. write ("<br /> x este "+x); } //--> </script> x este 1 x este 2 x este 3 x este 4

Sintaxa Java. Script Instructiunea while <script type="text/javascript"> <!-var x = 1; while (x<5) {

Sintaxa Java. Script Instructiunea while <script type="text/javascript"> <!-var x = 1; while (x<5) { document. write ("<br /> x este "+x); x++; } //--> </script>

Sintaxa Java. Script Instructiunea while <script type="text/javascript"> <!-var x = 1; while (x<5) {

Sintaxa Java. Script Instructiunea while <script type="text/javascript"> <!-var x = 1; while (x<5) { document. write ("<br /> x este "+x); x++; } //--> </script> x este 1 x este 2 x este 3 x este 4

Sintaxa Java. Script Instructiunea do. . . while <script type="text/javascript"> <!-var x = 8;

Sintaxa Java. Script Instructiunea do. . . while <script type="text/javascript"> <!-var x = 8; do { document. write("<br /> x este "+x); x++; } while (x<5) //--> </script>

Sintaxa Java. Script Instructiunea do. . . while <script type="text/javascript"> <!-var x = 8;

Sintaxa Java. Script Instructiunea do. . . while <script type="text/javascript"> <!-var x = 8; do { document. write("<br /> x este "+x); x++; } while (x<5) //--> </script> x este 8

Sintaxa Java. Script Fereastra Alert <script type="text/javascript"> window. alert("Bine ai venit"); </script>

Sintaxa Java. Script Fereastra Alert <script type="text/javascript"> window. alert("Bine ai venit"); </script>

Sintaxa Java. Script Fereastra Prompt <script type="text/javascript"> window. prompt("Scrieti numele", "Nume"); </script>

Sintaxa Java. Script Fereastra Prompt <script type="text/javascript"> window. prompt("Scrieti numele", "Nume"); </script>

Sintaxa Java. Script Fereastra Prompt <script type="text/javascript"> var nume = window. prompt("Scrieti numele", "Nume");

Sintaxa Java. Script Fereastra Prompt <script type="text/javascript"> var nume = window. prompt("Scrieti numele", "Nume"); alert("Salut "+nume+"n Bine ai venit. "); </script>

Sintaxa Java. Script Fereastra Confirm <script type="text/javascript"> intrebare = window. confirm("Rezultatul lui 0+0 este

Sintaxa Java. Script Fereastra Confirm <script type="text/javascript"> intrebare = window. confirm("Rezultatul lui 0+0 este 0? "); if (intrebare) alert("Corect"); else alert("Incorect"); </script>

Sintaxa Java. Script Functii • Predefinite • Create de programator – - care returneaza

Sintaxa Java. Script Functii • Predefinite • Create de programator – - care returneaza o valoare – - care nu returneaza o valoare

Sintaxa Java. Script Crearea (definirea) functiilor function nume_functie(argument 1, argument 2, . . .

Sintaxa Java. Script Crearea (definirea) functiilor function nume_functie(argument 1, argument 2, . . . ) { codul care va fi executat } Instructiunea return function suma(x, y) { z = x+y; return z }

Exemplu de funcţie cu return <html> <head> <script type="text/javascript"> <!-- function exemplu 1() {

Exemplu de funcţie cu return <html> <head> <script type="text/javascript"> <!-- function exemplu 1() { return document. write("Bine ati venit!") } //--> </script> </head> <body> <script> exemplu 1() </script> </body> </html>

Exemplu de funcţie cu argumente <html> <head> <script type="text/javascript"> <!-- function exemplu 3(x, y)

Exemplu de funcţie cu argumente <html> <head> <script type="text/javascript"> <!-- function exemplu 3(x, y) { var z = 0; z = x+y; return alert("Suma lui "+x+" si "+y+" este: "+z) } //--> </script> </head> <body> <form> <input type="button" onclick="exemplu 3(7, 8)" value="Suma" /> </form> </body> </html>

Evenimente <html> <head> <script type="text/javascript"> function display. Date() { document. get. Element. By. Id("demo"

Evenimente <html> <head> <script type="text/javascript"> function display. Date() { document. get. Element. By. Id("demo" ). inner. HTML=Date(); } </script> </head> <body> <h 1>Exemplu de eveniment</h 1> <p id="demo">Oarecare text. </p> <button type="button" onclick="display. Date()">Data si ora</button> </body> </html>

Evenimente • Trecerea cursorului mouse peste o area pe pagina web • Încărcarea paginii

Evenimente • Trecerea cursorului mouse peste o area pe pagina web • Încărcarea paginii web ori a imaginii • Click mouse, double click • Selectarea unui cîmp de întroducere a datelor într-un formular HTML • Submit unui HTML formular • Apăsarea unei taste • etc.

Evenimente <html> <head> <title>Exemplu de eveniment</title> <script> function Hello. World() { alert ('Salut la

Evenimente <html> <head> <title>Exemplu de eveniment</title> <script> function Hello. World() { alert ('Salut la toti!'); } </script> </head> <body on. Load="Hello. World()"> Textul paginii </body> </html>

Evenimente <html> <head> <title>Exemplu de eveniment</title> <script> function Hello. World() { alert ('Salut la

Evenimente <html> <head> <title>Exemplu de eveniment</title> <script> function Hello. World() { alert ('Salut la toti!'); } </script> </head> <body> <p> <span on. Mouse. Over="Hello. World()">Salut</span> </p> </body> </html>

Evenimente <html> <head> <title>Exemplu de eveniment</title> <script> function Hi() { alert ('Nu ai apasat!');

Evenimente <html> <head> <title>Exemplu de eveniment</title> <script> function Hi() { alert ('Nu ai apasat!'); } </script> </head> <body> <a href= "nou. html" on. Mouse. Out="Hi()">Hello</a> </body> </html>

Evenimente Onresize Onload on. Mouse. Out Onunload on. Change on. Blur on. Select sizes

Evenimente Onresize Onload on. Mouse. Out Onunload on. Change on. Blur on. Select sizes 2. html exemple_evenimente. html examples_img_m. html exemple_evenimente. html ex_form_Java. Script. html JS 9. html

Obiecte în Java. Script • Java. Script nu este un program orientat pe obiecte

Obiecte în Java. Script • Java. Script nu este un program orientat pe obiecte (OO), cum sunt C++ sau Java, dar este bazat pe obiecte. • Toate elementele dintr-o pagina sunt vazute de Java. Script ca fiind obiecte. • Obiectele au anumite proprietati, de exemplu: formularele au buton, ferestrele au titluri, textul are culoare, etc. • Metodele reprezinta functiile care pot fi aplicate la un obiect. Ferestrele se deschid cu metoda "open()", butoanele au metoda "click()“, . . .

Sintaxa Java. Script Operatori pentru structuri de date (obiecte) Un operator care ar trebui

Sintaxa Java. Script Operatori pentru structuri de date (obiecte) Un operator care ar trebui cunoscut bine este punctul ". " numit operator pentru membrul unei structuri. Acesta ne permite sa ne referim la un membru ( variabila, functie sau obiect ) care apartine obiectului specificat. Sintaxa este urmatoarea : nume. Obiect. nume_proprietate nume. Obiect. nume_metoda() nume. Obiect. alt_obiect

Adaugarea Java. Script intr-un document HTML (1) <p id="demo">Elementul schimbat de Java. Script</p> <script>

Adaugarea Java. Script intr-un document HTML (1) <p id="demo">Elementul schimbat de Java. Script</p> <script> document. get. Element. By. Id("demo"). inner. HTML = "<h 1>Salut la toti!<h 1>"; </script> Salut la toti! Java. Script este bazat pe obiecte

Manipularea obiectelor • • • examples_img_2. html openwin. html JS_styles. html events_styles_mod. html JS

Manipularea obiectelor • • • examples_img_2. html openwin. html JS_styles. html events_styles_mod. html JS 9_mod 2. html

Obiecte în Java. Script Sintaxa pentru folosirea obiectelor: obiect. prorietate obiect. metoda() Categorii de

Obiecte în Java. Script Sintaxa pentru folosirea obiectelor: obiect. prorietate obiect. metoda() Categorii de obiecte predefinite în Java. Script: - Obiecte pe partea de client - Obiecte pe partea de server - Obiecte esenţiale

Obiecte în Java. Script Obiecte esenţiale: 1 - String 2 - Math 3 -

Obiecte în Java. Script Obiecte esenţiale: 1 - String 2 - Math 3 - Date 4 - Array 5 - Global

Obiectul string Proprietatea: length ( exemplu: v=text. length; ) Metodele: bold() - Returneaza un

Obiectul string Proprietatea: length ( exemplu: v=text. length; ) Metodele: bold() - Returneaza un sir cu litere ingrosate char. At() - Returneaza un caracter de la pozitia care este specificata concat() - Returneaza doua siruri concatenate replace() - Inlocuieste intr-un sir unele caractere specificate cu altele noi specificate. search() - Returneaza un numar intreg daca sirul contine caracterele specificate, altfel returneaza -1 slice() - Returneaza un sir incepand de la pozitia index specificata etc. . .

Obiectul string <html> <body> <script type="text/javascript"> var str="Hello world!"; document. write(str. match("world") + "<br

Obiectul string <html> <body> <script type="text/javascript"> var str="Hello world!"; document. write(str. match("world") + "<br />"); document. write(str. match("World") + "<br />"); document. write(str. match("world!")); </script> </body> </html>

Obiectul string <script type="text/javascript"> var str="Mar. Plo. net - Cursuri, Jocuri si Anime" document.

Obiectul string <script type="text/javascript"> var str="Mar. Plo. net - Cursuri, Jocuri si Anime" document. write(str+"<br />") document. writeln("Acest sir are "+ str. length + " caractere") var pos=str. index. Of("Jocuri") if (pos>=0) { document. write("Jocuri incepe de la pozitia: ") document. write(pos + "<br />") } else { document. write("Cuvântul nu a fost gasit!") } </script>

Obiectul Array Crearea obiectului Array var nume_colegi = new Array(4); sau var nume_colegi =

Obiectul Array Crearea obiectului Array var nume_colegi = new Array(4); sau var nume_colegi = Array('Cristi', 'Ion', 'Simona', 'Adi');

Obiectul Array Proprietatea: Length ( exemplu: v=nume_colegi. length; ) Metodele: concat() - returneaza un

Obiectul Array Proprietatea: Length ( exemplu: v=nume_colegi. length; ) Metodele: concat() - returneaza un tablou rezultat din concatenarea a doua tablouri; join() - returneaza un tablou format din toate elementele unui tablou concatenat; reverse() - Returneaza inversul unui tablou; slice() - Returneaza o parte specificata a unui tablou; sort() - Returneaza tabloul ordonat;

Obiectul Array <script type="text/javascript"> <!-- var nume_colegi = new Array(); nume_colegi[0] = "Cristi"; nume_colegi[1]

Obiectul Array <script type="text/javascript"> <!-- var nume_colegi = new Array(); nume_colegi[0] = "Cristi"; nume_colegi[1] = "Ion"; nume_colegi[2] = "Simona"; nume_colegi[3] = "Adi"; var nr_elemente = nume_colegi. length; document. write("Afiseaza numele fiecarui coleg: <br />"); for (i=0; i<nr_elemente; i++) { document. write(nume_colegi[i] + "<br />"); } //--> </script>

Obiectul Date Crearea instanţei a obiectului "Date“: var data = new Date(); Metodele obiectului

Obiectul Date Crearea instanţei a obiectului "Date“: var data = new Date(); Metodele obiectului Date: • get. Date() - Returneaza data (ziua) din luna (intre 1 -31) • get. Day() - Returneaza ziua dintr-un obiect Date (intre 0 -6; 0=Duminica, 1=Luni, etc. ) • get. Month() - Returneaza luna dintr-un obiect Date (intre 0 -11. 0=January, 1=February, etc. ) • get. Full. Year() - Returneaza anul dintr-un obiect Date (patru cifre) • get. Hours() - Returneaza ora dintr-un obiect Date (intre 0 -23) • get. Minutes() - Returneaza minutele dintr-un obiect Date (intre 0 -59) • get. Seconds() - Returneaza secunda dintr-un obiect Date (intre 0 -59) • get. Milliseconds() - Returneaza milisecunda dintr-un obiect Date (intre 0 -999) • etc.

Obiectul Date <script type="text/javascript"> <!-var d = new Date() document. write("Afiseaza data curenta a

Obiectul Date <script type="text/javascript"> <!-var d = new Date() document. write("Afiseaza data curenta a zilei: <br /> ") document. write(d. get. Date()) document. write(". ") document. write(d. get. Month() + 1) document. write(". ") document. write(d. get. Full. Year()) //--> </script>

Obiectul Date <html> <head> <script type="text/javascript"> function start. Time() { var today=new Date(); var

Obiectul Date <html> <head> <script type="text/javascript"> function start. Time() { var today=new Date(); var h=today. get. Hours(); var m=today. get. Minutes(); var s=today. get. Seconds(); // add a zero in front of numbers<10 m=check. Time(m); s=check. Time(s); document. get. Element. By. Id('txt'). inner. HTML= h+": "+m+": "+s; t=set. Timeout('start. Time()', 500); } function check. Time(i) { if (i<10) { i="0" + i; } return i; } </script> </head> <body onload="start. Time()"> <div id="txt"></div> </body> </html>

Obiectul Math Acest obiect include constante matematice si functii. Nu este nevoie sa fie

Obiectul Math Acest obiect include constante matematice si functii. Nu este nevoie sa fie creat (instantat) un obiect Math inainte de a fi folosit. • • Proprietatile obiectului Math E - Returneaza constanta lui Euler (2. 7182. . . . ) LN 2 - Returneaza logaritm natural din 2 LN 10 - Returneaza logaritm natural din 10 LOG 2 E - Returneaza logaritm in baza 2 din E LOG 10 E - Returneaza logaritm in baza 10 din E PI - Returneaza PI SQRT 1_2 - Returneaza radical din 0. 5 SQRT 2 - Returneaza radical din 2

Obiectul Math Metodele obiectului Math: • abs(x) - Returneaza valoarea absoluta din x •

Obiectul Math Metodele obiectului Math: • abs(x) - Returneaza valoarea absoluta din x • ceil(x) - Returneaza cel mai apropiat intreg mai mare sau egal cu x • cos(x) - Returneaza cosinus din x • exp(x) - Returneaza valoarea lui E la puterea x • floor(x) - Returneaza cel mai apropiat intreg mai mic sau egal cu x • log(x) - Returneaza log natural din x • max(x, y) - Returneaza maximul dintre x si y • min(x, y) - Returneaza minimul dintre x si y • pow(x, y) - Returneaza valoare a lui x la puterea y • random() - Returneaza un numar aleator intre 0 si 1 • round(x) - Rotunjeste pe x la cel mai apropiat intreg • sin(x) - Returneaza sinus din x • sqrt(x) - Returneaza radical din x

Obiecte de tip Global Obiectele de tip Global grupeaza proprietatile si metodele de nivel

Obiecte de tip Global Obiectele de tip Global grupeaza proprietatile si metodele de nivel cel mai inalt, fara un obiect parinte, cum sunt functiile. Obiectul Global are trei proprietati: Infinity - cuvant-cheie care reprezinta plus sau minus infinit Na. N - reprezinta un obiect null, care nu are vreo valoare undefined - Indica daca o variabila a fost sau nu definita

Obiecte de tip Global Metodele acestui obiect (care pot fi considerate si functii Java.

Obiecte de tip Global Metodele acestui obiect (care pot fi considerate si functii Java. Script) sunt: • escape() - Intoarce un obiect sir in care toate caracterele non alfa-numerice sunt transformate in echivalentele lor numerice • eval() - Accepta un sir de instructiuni Java Script si il evalueaza ca fiind cod sursa • is. Finite() - determina daca o variabila are limite finite • is. Na. N() - determina daca o variabila este sau nu un numar. • Number() - Converteste valoarea unui obiect in numar • parse. Float() - transforma un sir intr-un numar de tip float (cu virgula) • parse. Int() - transforma un sir intr-un numar intreg • string() - Converteste valoarea unui obiect in string (de tip sir) • unescape() - ia o valoare hexazecimala si intoarce echivalentul sau in ISOLatin-1 ASCII

Obiecte de tip Global <script type="text/javascript"> function calculeaza(form) { form. rezultat. value = eval(form.

Obiecte de tip Global <script type="text/javascript"> function calculeaza(form) { form. rezultat. value = eval(form. expresie. value); } eval("alert('Bine ati venit pe site!')"); </script> <form> <p>Introduceti o expresie matematica (adunare, scadere, inmultire, impartire), de exemplu (7*8 sau 3+8/2): </p> <input type="text" name="expresie" size="35" > <input type="button" name="calc" value="Calculare" onclick="calculeaza(this. form)"> Rezultatul este: <input type="text" name="rezultat" size="18"> </form>

Obiecte pe partea de client • Java. Script organizeaza toate elementele unei pagini web

Obiecte pe partea de client • Java. Script organizeaza toate elementele unei pagini web intr-o ierarhie. Toate elementele sunt vazute ca obiecte si fiecare obiect are anumite proprietati si metode sau alte obiecte. Java. Script înţelege fereastra browser-ului ca pe un obiect window, acesta conţine anumite elemente, cum ar fi de exemplu bara de stare (status bar). • In fereastra browser-ului poate fi încărcat (afişat) un document HTML (sau si de alt tip). Aceasta pagina din interiorul navigatorului este un obiect document.

Obiectul document toate elementele HTML sunt proprietati ale obiectului document. Sintaxa de adresare la

Obiectul document toate elementele HTML sunt proprietati ale obiectului document. Sintaxa de adresare la o proprietate: this. nume_proprietate Proprietăţile: • all - tabloul tuturor etichetelor HTML din document • anchors - tabloul de obiecte "Anchor", in ordinea specificata in sursa • bgcolor - culoarea de fundal a documentului • cookie - fisier cookie asociat cu documentul • fgcolor - culoarea textului in document • forms[] - tablou de obiecte "Form" (formular) • images - tablou de obiecte "Image" • last. Modified - data cand a fost modificat ultima oara documentul • link. Color - culoarea legaturilor • links - tablou de obiecte "Link", ce corespund tuturor link-urilor HREF din document, in ordinea specificata in sursa • title - titlul documentului • URL - adresa URL a documentului curent • etc.

Obiectul document Exemplu cu proprietăţi: <script type="text/javascript"> <!-- document. bg. Color = '#eaeafe' document.

Obiectul document Exemplu cu proprietăţi: <script type="text/javascript"> <!-- document. bg. Color = '#eaeafe' document. fg. Color = '#fe 1111' document. link. Color = '#01 ff 01' document. title = "Lectie Java. Script" //--> </script>

Obiectul document Metodele: • capture. Events() - captureaza evenimentele care vor fi tratate de

Obiectul document Metodele: • capture. Events() - captureaza evenimentele care vor fi tratate de document • close() - inchide fluxul datelor de iesire spre document • contextual() - permite sa aplicam in mod selectiv un stil unui element HTML care apare intr-un anumit context specific • get. Selection() - intoarce textul selectat • handle. Event() - apeleaza handlerul pentru evenimentul specificat • open() - deschide fluxul datelor de iesire spre document • release. Events() - elibereaza evenimentele capturate de document • route. Event() - dirijeaza evenimentele capturate spre alte obiecte • write() - adauga text in document • writeln() - adauga text si un caracter linie noua in document (textul pe linia lui) • get. Element. By. Id() • get. Elements. By. Name() • get. Elements. By. Tag. Name()

Exemplu cu metode: <html> <head> <script type="text/javascript"> function create. Doc() { var doc=document. open("text/html",

Exemplu cu metode: <html> <head> <script type="text/javascript"> function create. Doc() { var doc=document. open("text/html", "replace"); var txt="<html><body>Learning about the HTML DOM is fun!</body></html>"; doc. write(txt); doc. close(); } </script> </head> <body> <input type="button" value="New document" onclick="create. Doc()" /> </body> </html>

DOM - Modelul Obiectului Document

DOM - Modelul Obiectului Document

Browser Object Model (BOM) Comunicarea între Java. Script și browser Obiectul window. document. get.

Browser Object Model (BOM) Comunicarea între Java. Script și browser Obiectul window. document. get. Element. By. Id("header");

Obiectul window proprietatea size <!DOCTYPE html> <body> <p id="demo"></p> <script> var w=window. inner. Width

Obiectul window proprietatea size <!DOCTYPE html> <body> <p id="demo"></p> <script> var w=window. inner. Width // For Internet Explorer, Chrome, Firefox, Opera, and Safari || document. Element. client. Width // For Internet Explorer 8, 7, 6, 5 || document. body. client. Width; // For Internet Explorer 8, 7, 6, 5 var h=window. inner. Height // For Internet Explorer, Chrome, Firefox, Opera, and Safari || document. Element. client. Height // For Internet Explorer 8, 7, 6, 5 || document. body. client. Height; // For Internet Explorer 8, 7, 6, 5 x=document. get. Element. By. Id("demo"); x. inner. HTML="Browser inner window width: " + w + ", height: " + h + ". " </script> </body> </html>

Obiecte de nivel 1: Obiectul Navigator Proprietăţi: • app. Code. Name - reprezinta numele

Obiecte de nivel 1: Obiectul Navigator Proprietăţi: • app. Code. Name - reprezinta numele de cod al browserului • app. Name - reprezinta numele oficial al browserului • app. Version - versiunea browserului • language - limbajul browserului • mime. Types - face referire la un tablou de obiecte "Mimetype" care contine toate tipurile MIME pe care le accepta browserul • platform - un sir care reprezinta platforma pe care ruleaza browserul • plugins - face referire la un tablou de obiecte "Plugin" care contine toate modulele plugin instalate pe browser • user. Agent - sir care reprezinta antetul utilizator-agent Metode: • java. Enabled() - functie care testeaza daca browserul cunoaste sau nu limbajul JAVA • plugins. refresh() - cauta orice module plugin nou instalate • preference() - permite citirea si stabilirea diverselor preferinte ale utilizatorului in browser • taint. Enabled() - testeaza daca este activata contaminarea datelor

Obiecte de nivel 1: Obiectul Navigator <body> <script type="text/javascript"> <!-document. write("Nume cod : ".

Obiecte de nivel 1: Obiectul Navigator <body> <script type="text/javascript"> <!-document. write("Nume cod : ". bold()+navigator. app. Code. Name+" "); document. write("Nume browser : ". bold()+navigator. app. Name+" "); document. write("versiune : ". bold()+navigator. app. Version+" "); document. write("limbaj : ". bold()+navigator. language+" "); document. write("MIME Type : ". bold()+navigator. mime. Types+" "); document. write("Platforma : ". bold()+navigator. platform+" "); document. write("Plugin-uri : ". bold()+navigator. plugins+" "); document. write("Agent : ". bold()+navigator. user. Agent+" "); document. close(); //--> </script> </body>

Obiecte de nivel 1: Obiectul Navigator Rezultat: Nume cod : Mozilla Nume browser :

Obiecte de nivel 1: Obiectul Navigator Rezultat: Nume cod : Mozilla Nume browser : Microsoft Internet Explorer versiune : 4. 0 (compatible; MSIE 8. 0; Windows NT 6. 1; WOW 64; Trident/4. 0; SLCC 2; . NET CLR 2. 0. 50727; . NET CLR 3. 5. 30729; . NET CLR 3. 0. 30729; Media Center PC 6. 0; . NET 4. 0 C) limbaj : undefined MIME Type : Platforma : Win 32 Plugin-uri : [object] Agent : Mozilla/4. 0 (compatible; MSIE 8. 0; Windows NT 6. 1; WOW 64; Trident/4. 0; SLCC 2; . NET CLR 2. 0. 50727; . NET CLR 3. 5. 30729; . NET CLR 3. 0. 30729; Media Center PC 6. 0; . NET 4. 0 C)

Acces la obiectele documentului nume_var = document. forms[0]. elements[0]. value; document. forms[0]. elements[0]. value

Acces la obiectele documentului nume_var = document. forms[0]. elements[0]. value; document. forms[0]. elements[0]. value = nume_var; sau nume_var = document. get. Element. By. Id("id"). inner. HTML; document. get. Element. By. Id("id"). inner. HTML = "continut"

Obiecte de nivel 2: Obiectul Link Metoda: handle. Event() apeleaza handlerul pentru evenimentul specificat

Obiecte de nivel 2: Obiectul Link Metoda: handle. Event() apeleaza handlerul pentru evenimentul specificat Proprietăţie: hash - reprezinta o denumire de ancora in adresa URL pentru legatura, care cu caracterul diez ( # ) host - reprezinta portiunea de calculator gazda din adresa URL asociata cu o legatura hostname - reprezinta portiunea de nume al calculatorului gazda din adresa URL asociata cu o legatura href - reprezinta adresa URL completa asociata cu o legatura pathname - reprezinta portiunea numelui de cale a legaturii URL port - reprezinta portiunea de port a legaturii URL protocol - specifica portiunea de protocol a legaturii URL search - reprezinta portiunea de interogare a legaturii URL target - reprezinta numele obiectului "Window" in care este afisata legatura x - face referire la coordonata X a legaturii y - face referire la coordonata Y a legaturii text - textul folosit pentru crearea legaturii

Obiecte de nivel 2: Obiectul Link <html> <body> <p><a id="w 3 s" href="http: //www.

Obiecte de nivel 2: Obiectul Link <html> <body> <p><a id="w 3 s" href="http: //www. w 3 schools. com/">W 3 Schools</a></p> <script type="text/javascript"> document. write("Return href of link: "); document. write(document. get. Element. By. Id('w 3 s'). href); </script> </body> </html>

Obiecte de nivel 3: obiectul Button Proprietăţi: • form - returneaza obiectul Form al

Obiecte de nivel 3: obiectul Button Proprietăţi: • form - returneaza obiectul Form al carui membru este butonul name - returneaza sirul specificat in atributul name al etichetei HTML <input> type - returneaza sirul specificat in atributul type al etichetei HTML <input> value - returneaza sirul care apare in reprezentarea grafica a unui buton, afisata in browser Metodele: • blur() - dezactiveaza butonul click() - apeleaza un eveniment click pentru butonul respectiv. focus() - eveniment de activare a butonului handle Event() - transfera un eveniment handlerului de eveniment corespunzator

Exemplu de manipulare a obiectelor de nivelul 3 • <html> <head> <title>Script JS</title> <script

Exemplu de manipulare a obiectelor de nivelul 3 • <html> <head> <title>Script JS</title> <script type="text/javascript"> <!-function Scrie. Div(){ val. Text = document. formular 2. text 2. value; document. get. Element. By. Id("div_id 2"). inner. HTML = val. Text; } // --> </script> </head> <body> <div id="div_id 2">Aici va apare textul din formular</div> <form name="formular 2"> <textarea cols="30" rows="5" name="text 2" id="textul 2"></textarea> <input type="button" value="Afiseaza" onclick="Scrie. Div(); " /> </form> </body> </html>