Introducere în limbajul JavaScript

Transcriere

1 Introducere în limbajul JavaScript (III)

2 HTML DOM (Document Object Model) DOM este un standard W3C (World Wide Web Consortium) care permite programelor și scripturilor accesarea dinamică a documentelor și actualizarea conținutului, structurii și stilurilor acestora. La încărcarea unei pagini web, browser-ul construiește modelul DOM al acesteia.

3 Modelul HTML DOM este construit ca un arbore de obiecte:

4 Pe baza modelului DOM, JavaScript poate crea conținut HTML dinamic și: JavaScript poate schimba toate elementele HTML din pagină JavaScript poate schimba toate atributele HTML în pagina JavaScript poate schimba toate stilurile CSS în pagina JavaScript poate elimina elemente HTML și atribute existente JavaScript poate adăuga noi elemente HTML și atribute JavaScript poate reacționa la toate evenimentele HTML existente in pagina JavaScript poate crea noi evenimente HTML în pagina

5 Modificarea conţinutului unui element HTML document.getelementbyid. innerhtml ex_1.html Modificarea atributelor unui element HTML document.getelementbyid.atribute ex_2.html

6 Găsirea elementelor HTML Metodă document. getelementbyid( id ) document. getelementsbytagname( name ) Găsirea unui element cu element id Găsirea de elemente după nume etichetă document. getelementsbyclassname( name ) Găsirea de elemente după numele clasei

7 Schimbarea de elemente HTML Metodă element.innerhtml = new html content element. attribute = new value element.setattribute (attribute, value) element.style. property = new style Descriere Schimbarea HTML interior al unui element Modificarea valorii attribute al unui element HTML Modificarea valorii attribute al unui element HTML cu value Schimbarea stilului unui element HTML

8 Adăugarea și ștergerea elementelor Metodă Descriere document. createelement( element ) Crearea unui element HTML document. removechild( element ) Eliminarea unui element HTML document. appendchild( element ) Adăugarea un element HTML document. replacechild( element ) Înlocuirea unui element HTML document. write( text ) Scrierea în fluxul de ieșire HTML

9 Adăugarea Evenimente Handlere Metodă document. getelementbyid( id ).onclick = function() { code } Descriere Adăugarea de cod de tratare a evenimentului la un onclick eveniment

10 Modelul Obiectului Document - DOM HTML DOM este un model de obiecte și o interfață de programare standard pentru HTML Definește: Elementele HTML ca obiecte Proprietățile tuturor elementelor HTML Metodele pentru a avea acces la toate elementele HTML Evenimentele pentru toate elementele HTML HTML DOM este un standard pentru a obține, a schimba, a adăuga sau a șterge elemente HTML.

11 Obiectul document este deținătorul tuturor obiectelor din pagină Toate elementele HTML sunt proprietăţi ale obiectului document, şi la rândul lor acestea sunt obiecte.

12 Modelul Obiectului Document (DOM)

13 this.nume_proprietate Obiectul document are următoarele proprietăţi: propr_doc.pdf Obiectul document are următoarele metode: metode_doc.pdf Obiectul document si Formulare Formularele pot fi considerate si tratate ca obiecte dintr-un document HTML, acestea fiind sub-obiecte ale obiectului "document. ex_ierarhie.html

14 Obiecte pe partea de client Pentru a accesa sau transfera conținutul unei etichete HTML se utilizează id-ul acesteia, folosind expresia: nume_var = document.getelementbyid("id").innerhtml; "nume_var" este o variabilă care preia conținutul incadrat de tag-ul HTML care are atributul id="id ex_inner1.html ex_getelementsid.html Pentru a schimba sau adăuga conținut intr-un element HTML cu un id specific, se va folosi expresia: document.getelementbyid("id").innerhtml = "continut" unde "id" este valoarea atributului "id" din eticheta HTML respectiva iar "continut" este continutul (text, tag-uri) care va fi adaugat in aceasta eticheta HTML (va inlocui orice alt context care se afla in cadrul acestui element HTML). ex_inner2.html

15 Obiectul_Form.pdf Obiecte de nivel 3

16 Obiectul Button 3 obiecte buttons: Button, Submit şi Reset. Proprietati ale obiectului "Button" : form - returnează obiectul Form al cărui membru este butonul name - returnează şirul specificat in atributul name al etichetei HTML <input> type - returnează şirul specificat in atributul type al etichetei HTML <input> value - returnează şirul care apare in reprezentarea grafică a unui buton, afişată in browser Metode ale obiectului "Button": blur() - dezactivează butonul click() - apelează un eveniment click pentru butonul respectiv. focus() - eveniment de activare a butonului handle Event() - transferă un eveniment handlerului de eveniment corespunzător

17 Obiectul Checkbox Proprietati ale obiectului "Checkbox : checked - returnează o valoare booleana care determină dacă este bifată caseta de validare defaultchecked - returnează o valoare booleană care păstrează starea iniţială a casetei de validare. Este stabilita cu atributul "checked" form name type - value Metode ale obiectului "Checkbox : blur() - dezactivează caseta de validare click() - apelează un eveniment click pentru caseta de validare respectivă. focus() - eveniment de activare a casetei de validare handle Event() - transferă un eveniment handlerului de eveniment corespunzător

18 Obiectul FileUpload Proprietati ale obiectului "FileUpload": form - face referire la obiectul Form ce contine caseta FileUpload name - contine sirul specificat in atributul name al casetei FileUpload type - contine sirul specificat in atributul type al casetei FileUpload value - conţine şirul care specifică numele căii fişierului pt. upload Metode ale obiectului "FileUpload": blur() - dezactiveaza caseta FileUpload focus() - activeaza caseta FileUpload handle Event() - transfera un eveniment handlerului de eveniment corespunzator select() - selecteaza suprafata de adaugare a datelor pentru caseta FileUpload.

19 Obiectul Hidden Proprietati ale obiectului "Hidden : form - face referire la formularul ce contine obiectul Hidden name - contine numele obiectului Hidden type - contine sirul specificat in atributul type al casetei Hidden value - contine sirul specificat in atributul "value" al obiectului Hidden

20 Obiectul Password Proprietati ale obiectului "Password": defaultvalue - face referire la atributul "value" al casetei pt. parola din formularul HTML form - face referire la obiectul Form ce contine caseta pt. parola name - contine sirul specificat in atributul name al pt. parola type - contine sirul specificat in atributul type al casetei pt. parola value - face referire la continutul curent din caseta pt. parola Metode ale obiectului "Password": blur() - dezactiveaza caseta pt. parola focus() - activeaza caseta pt. parola handle Event() - transfera un eveniment handlerului de eveniment corespunzator select() - selecteaza textul adaugat in caseta pt. parola.

21 Obiectul Radio Proprietati ale obiectului "Radio" : checked - returneaza o valoare care determina daca este bifat obiectul radio defaultchecked - returneaza o valoare care pastreaza starea initiala a obiectului Radio, care se stabileste cu atributul "checked" al etichetei <input> respective form - returneaza obiectul Form ce contine obiectul Radio name - contine sirul specificat in atributul name al etichetei <input> type - contine sirul specificat in atributul type al etichetei <input> value - face referire la atributul value al etichetei <input> Metode ale obiectului "Radio" : blur() - dezactiveaza obiectul Radio click() - apeleaza un eveniment "click" pt. obiectul Radio focus() - activeaza un buton radio handle Event() - transfera un eveniment handlerului de eveniment corespunzator

22 Obiectul Reset Proprietati ale obiectului "Reset" : form - returneaza obiectul Form ce contine butonul name - contine sirul specificat in atributul name al etichetei <input> corespunzatoare butonului type - contine sirul specificat in atributul type al etichetei <input> value - returneaza sirul adaugat in atributul value din eticheta <input> a butonului Metode ale obiectului "Reset" : blur() - dezactiveaza butonul click() - apeleaza un eveniment "click" pt. butonul respectiv focus() - activeaza butonul

23 Obiectul Submit Proprietati ale obiectului "Submit" : form - returneaza datele din intreg formularul ce contine butonul "submit" name - returneaza sirul specificat in atributul name al etichetei <input> corespunzatoare butonului type - returneaza sirul specificat in atributul type din eticheta <input> a butonului "submit" value - returneaza sirul adaugat in atributul value din eticheta <input> a butonului Metode ale obiectului "Submit" : blur() - dezactiveaza butonul click() - apeleaza un eveniment "click" pt. butonul respectiv focus() - activeaza butonul handle Event() - apeleaza handlerul pt. evenimentul specificat

24 Obiectul Text Proprietati ale obiectului "Text": defaultvalue - returneaza valoarea casetei de text, specificate de atributul value. form - returneaza obiectul Form ce contine caseta de text name - returneaza sirul specificat in atributul name al etichetei HTML corespunzatoare type - returneaza sirul specificat in atributul type al etichetei HTML value - returneaza valoarea afisata in caseta de text Metode ale obiectului "Text": blur() - dezactiveaza caseta de text focus() - activeaza caseta de tip text handleevent() - transfera un eveniment handlerului de eveniment corespunzator select() - selecteaza textul din caseta de text

25 Obiectul Textarea Proprietati ale obiectului "Textarea": defaultvalue - returneaza valoarea zonei de text, specificate intre etichetele <textarea> form - returneaza obiectul Form ce contine caseta textarea name - returneaza sirul specificat in atributul name al etichetei HTML corespunzatoare type - returneaza sirul specificat in atributul type al etichetei HTML value - returneaza valoarea afisata in caseta textarea Metode ale obiectului "Textarea": blur() - dezactiveaza zona de text focus() - activeaza zona de text handleevent() - transfera un eveniment handlerului de eveniment corespunzator select() - selecteaza textul din campul de text

26 Obiectul Select Proprietati ale obiectului "Select": form - returneaza obiectul Form ce contine lista de selectare length - returneaza numarul de optiuni din lista de selectare name - returneaza sirul specificat in atributul name al etichetei HTML corespunzatoare type - returneaza sirul specificat in atributul type al etichetei HTML (pentru instantele select ce contin atributul "multiple" returneaza "select-multiple", iar pentru cele fara acest atribut returneaza "selectone") options - returneaza un tablou ce contine toate elementele din caseta de selectare. Elementele sunt definite cu eticheta HTML <options>. aceasta proprietate are doua subproprietati: "length" si "selectedindex" selectedindex - returneaza un numar care specifica indicele optiunii selectate din caseta de selectare Metode ale obiectului "Select" : blur() - dezactiveaza caseta de selectare click() - apeleaza un eveniment "click" pt. caseta de selectare handleevent() - transfera un eveniment handlerului de eveniment corespunzator

27 Obiectul Option (nivel 4) Obiectul option este un subobiect a obiectului "Select". face referire la elementele <option> definite intre etichetele <select> Proprietatile obiectului "Option": defaultselected - face referire la optiunea care este selectata in mod prestabilit in caseta de selectare index - face referire la locatia indexata a unui element in tabloul "Select.options" (incepe cu 0) selected - face referire la valoarea selectata a casetei de selectare text - face referire la textul pentru optiune value - face referire la valoarea care este returnata cand este selectata optiunea

28 Evenimente JavaScript sunt actiuni provocate de cele mai multe ori de vizitatorul paginii. JavaScript poate reacționa la unele evenimente. Aceasta se poate realiza cu ajutorul "event-handlers" (manageri de evenimente sau gestionari de evenimente). Handlerele de evenimente se adaugă ca atribute ale etichetelor HTML. Evenimentele JavaScript Evenimente_Java.pdf Gestionarii de evenimente Gestionari_ ev.pdf Exemple ex_3.html ex_4.html ex_5.html

29 Tratarea evenimentelor de către sistem onerror va acționa în urma unei erori de încărcare a unei imagini sau a unui document. ex_onerror.html onload va acționa în urma încărcării unui document, a tuturor cadrelor dintr-o etichetă FRAMESET sau a unei imagini. ex_onload.html onunload va acționa în momentul în care utilizatorul părăseşte documentul afişat în fereastra curentă. onunload este event handler pentru obiectul: Window. ex_onunload.html

30 Validarea formularelor validarea datelor introduse de utilizator. Se pot valida câmpuri de intrare, grupuri de câmpuri sau întregul formular, utilizând gestionari de evenimente şi funcţii JavaScript. construirea formularelor interactive, în care o parte sau întreaga prelucrare are loc pe parte de client. a testa conformitatea datelor introduse de utilizator cu politicile de procedură impuse (exemplu de politică de procedură: data de livrare a unei comenzi nu poate fi în ziua de sâmbătă/duminică a săptămânii). a testa prezenţa datelor în câmpurile obligatorii ale unui formular (un câmp este prezent dacă nu este vid).

31 Scrieţi un program JavaScript care verifică dacă conţinutul celor trei câmpuri ale unui formular: nume, prenume, codcard este vid. În caz de eroare afişaţi unul din mesajele de mai jos: Aţi uitat să introduceţi numele dumneavoastră! Aţi uitat să introduceţi prenumele dumneavoastră! Aţi uitat să introduceţi numărul dumneavoastră de card! ex_6.html

32 Obiectul image In JavaScript toate imaginile sunt reprezentate intr-o matrice numită images (document.images[0], document.images[1], ) Declararea imaginii <img src="fisier.gif" name="nume_img" id="id_img" /> folosirea proprietății "getelementbyid("id_element"), unde "id_element" este id-ul imaginii dat cu atributul id="... Ex. document.nume_img.height sau document.getelementbyid("id_img").height Obiectul "image" are o singură metodă: handleevent() - reprezintă evenimentul specificat pentru executarea unei anumite actiuni Proprietățile obiectului image propr_image.pdf

33 Exemplu de pagina HTML cu doua link-uri (legaturi) care, printr-un script JS schimba afisarea mai multor imagini in acelasi loc. Imaginile sunt declarate si stocate intr-o variabila tablou "imagini". Pentru schimbarea imaginilor se folosesc 2 functii: "gonext" si "goback ex_imag.html