Curs11 - JavaScript Si HTML

Document Object Model (DOM)
Limbajul JavaScript si HTML
n n
Mihai Gabroveanu
Pentru a schimba continutul paginii afisate in fereastra browserului este necesara cunoastrea modului de accesare a elementelor Basic DOM este stardard al W3C si este compatibil cu majoritatea browserelor Elementul care se afla la baza ierahiei este window, si toate celelalte elemente sunt descendente ale acestuia:

Fiecare variabila JavaScript este un camp al acestui obect In DOM, toate variabilele se presupun ca incep cu window.
Limbajul JavaScript
HTML DOM si JavaScript

n
Ierarhia de clase DOM
JavaScript permite manipularea unei pagini HTML prin intermediul Document Object Model (DOM) ce descrie structura paginii HTML
HTML DOM XML DOM
Prin intermediul DOM-ului putem face o multime de operatii:

Putem accesa prin elementele din cadrul unei pagini HTML Putem schimba continutul unei pagini HTML Putem captura evenimente atasand hadlere de evenimente
Limbajul JavaScript
Limbajul JavaScript
HTML DOM - Exemplu

1. 2. 3. 4. 5. 6. 7. 8. 9.
Campurile obiectului window, I

n n n n n
<html> <head> <title>My Title</title> </head> <body> <a href="">My Link</a> <h1>My Header</h1> </body> </html>
window

Ferestra curenta (de regula nu se specifica). Referinta la fereastra curenta. Identica cu window (window.window). Referinta la fereastra/cadrul parinte al ferestrei/cadrului curent. Referinta catre fereastra navigatorului situata n prim plan. Setul de cadre (frames, n limba engleza) afisate. Frame-urile la randul lor sunt de tipul window. numarul de cadre din ferestra curenta.
self parent top

frames[ ] frames.length
DOM-ul asociat paginii HTML
Limbajul JavaScript
Limbajul JavaScript
Document Object Model (DOM)

n
Campurile obiectului window, II

n n
Fiecare document HTML incarcat intr-o ferastra (window) devine un obiect de tip Document. n Obiectul Document pune la dispozitie metode prin care putem accesa toate elementele HTML din cadrul paginii
document

Documentul HTML ce este afisat in fereastra curenta. URL-ul documentului afisat in ferestar curenta. Daca acesta proprietate primeste un nou URL atunci document referit de acest URL este incarcat. Daca dorim sa facem refresh la pagina curenta putem apela location.reload(). Referinta la un obiect de tip Navigator ce reprezinta browser-ul ce a incarcat acea pagina.
n n
location
navigator
navigator.appName numele browserului, ex: "Netscape" navigator.platform numele sistemlui de operare, ex: "Win32"
status

Sirul de caractere afisat in bara de status a browserului. Putem schimba acest text printr-o simpla atribuire.
Limbajul JavaScript
Limbajul JavaScript
Exemplu
<html> <head> <title>Proprietatile obiectului window</title> </head> <body> <script type="text/javascript"> document.write("Location " + window.location +"<br>"); document.write("Navigator " + navigator.appName + "<br>"); document.write("Platforma " + navigator.platform + "<br>"); window.status = "Mesaj in bara de status"; </script> </body> </html>
Metode ale obiectului window, II

n
open(URL)
Deschide
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.
o fereastra noua in care se incarca documentul specificat prin URL. fereastra (nu un frame).
close()
Inchide
Limbajul JavaScript
Limbajul JavaScript
11
Metode ale obiectului window, I

n
Exemplu
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18.
alert(string)
Afiseaza un casuta de dialog ce contine stringul specificat si un butor cu eticheta OK. Afiseaza o ferestra de confirmare ce contine stringul specificat impreuna cu butoanele Cancel si OK. Returneaza true daca este apasat OK, false daca este apasat Cancel. Afiseaza o ferestra de confirmare ce contine stringul specificat, un input de tip text impreuna cu butoanele Cancel si OK. Returneaza stringul introdus de user daca este apasat OK, null daca este apasat Cancel.
confirm(string)
prompt(string)
<html> <head> <title>Proprietatile obiectului window</title> </head> <body> <script type="text/javascript"> var url = prompt('Introduceti adresa unei pagini web:'); if (url != null){ var myWindow = open(url); if (confirm('Doriti inchiderea paginii ' + url + '?')){ myWindow.close(); } } else { alert('Nu ati introdus nimic'); } </script> </body> </html>
Limbajul JavaScript 12
Limbajul JavaScript
10
Proprietati ale obiectului document, I

n n
Proprietati ale obiectului document, III

n
Toate aceste proprietati trebuie prefixate de document. anchors[ ] Un tablou de obiecte de tip Anchor (ce contin tag-urile <a name=...>) applets[ ] Un tablou de obiecte de tip Applet reprezentand apletii din document n Proprietatile acestr obiecte sunt campurile declatate public in aplet n Metodele sunt metodele publice din aplet
bgColor
Culoarea de backgroud a paginii web

n
Poate fi schimbata in orice moment
title
Propietate read-only ce retine titlul paginii web
URL
Propietate read-only ce retine URL-ul documentului curent
Limbajul JavaScript
15
Proprietati ale obiectului document, II

n
Metode ale obiectului document

n n
forms[ ]
getElementByID(string)
Un tablou de obiecte de tip Form ce reprezinta formele din document

n
Intoarce o referinta la primul element cu id-ul specificat Intoarce un tablou ce contine toate obiectele cu un nume specificat Intoarce un tablou ce contine toate obiectele cu tag-ul specificat
Daca documentul contine numai o forma, atunci acesta este forms[0]
images[ ]
getElementsByName(string)
Un tablou de obiecte de tip Image reprezentand imaginile din document

n
Daca dorim sa schimbam o anumita imagina, atribuim noul URL propetatii src
getElementsByRagName(string)
links[ ]
Un tablou de obiecte de tip Link objects reprezentand link-urile din pagina

n
Proprietarea ce retine adresa paginii referite este href

Limbajul JavaScript 14 Limbajul JavaScript 16
Propietatile obectului Form

n n
Evenimente
n
elements[ ]
Tablou
ce contine toate input-urile din forma
action
URL-ul
Majoritatea elementelor dintr-o pagina HTML raspund la actiuni ale utilizatorului (apasarea tastelor, efectuarea de click-uri) prin generarea de evenimente

spcficat in atributul action catre care se vor trimite datele din forma prin care se trimit datele din forma (POST,GET)
Fiecare tip de element produce evenimente specifice. Ne vom concentra pe evenimentele recunoscute de elementele de tip form si cele comune
method
Metoda
Pentru a gestiona evenimentele trebuie sa scriem niste functii speciale numite handlere care le asociem diverselor tipuri de evenimente
La aparitia evenimentului respectiv, este apelat automat handlerul corespunzator
Limbajul JavaScript
19
Metode obectului Form

n n
Exemplu
n
submit()
Trimite(submite)
datele catre server
reset()
Reseteaza
<form method="post" action=""> <input type="button" name= "testButton" value="Apasa-ma!" onclick="alert('Ai apasat butonul');"> </form>
continutul formei
Apasarea butonului va declansa executia instructiunii JavaScript

alert('Ai apasat butonul');
care va afisa pe ecran o fereastra de dialog cu mesajul specificat.

Limbajul JavaScript 18 Limbajul JavaScript 20
Evenimente si handlere de evenimente, I

Event Load Unload Error Abort Applies to Document body Document body Occurs when User loads the page in a browser User exits the page Handler onLoad onUnload onError onAbort
Evenimente si handlere de evenimente, III

Event
MouseDown
Applies to
Documents, buttons, links Documents, buttons, links Buttons, radio buttons, checkboxes, submit buttons, reset buttons, links
Occurs when
User depresses a mouse button User releases a mouse button User clicks a form element or link
Handler
onMouseDown
MouseUp Click
onMouseUp onClick
Images, window Error on loading an image or a window Images User aborts the loading of an image
Limbajul JavaScript
21
Limbajul JavaScript
23
Evenimente si handlere de evenimente, II

Event
KeyDown
Evenimente si handlere de evenimente, IV

Event Applies to Occurs when Handler
MouseOver Links MouseOut Select Areas, links Text fields, text areas User moves cursor over a onMouseOver link User moves cursor out of an image map or link User selects form elements input field onMouseOut onSelect
Applies to
Documents, images, links, text areas Documents, images, links, text areas Documents, images, links, text areas Text fields, text areas, select lists
Occurs when
User depresses a key
Handler
onKeyDown
KeyUp
User releases a key
onKeyUp
KeyPress
User presses or holds down a key User changes the value of an element
onKeyPress
Change
onChange
Limbajul JavaScript
22
Limbajul JavaScript
24
Evenimente si handlere de evenimente, V

Event Move Resize Applies to Windows Windows Occurs when Handler User or script moves onMove a window User or script resizes onResize a window User drops an object onDragDrop onto the browser window
DragDrop Windows
Limbajul JavaScript
25
Evenimente si handlere de evenimente, VI

Event Focus Blur Reset Applies to Occurs when Handler onFocus onBlur onReset
Windows and all User gives element form elements input focus Windows and all User moves focus to form elements some other element Forms User clicks a Reset button
Limbajul JavaScript
26

Curs11 - JavaScript Si HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs11 - JavaScript Si HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Document Object Model (DOM)

Limbajul JavaScript si HTML

HTML DOM si JavaScript

Ierarhia de clase DOM

HTML DOM XML DOM

Prin intermediul DOM-ului putem face o multime de operatii:

HTML DOM - Exemplu

Campurile obiectului window, I

self parent top

DOM-ul asociat paginii HTML

Document Object Model (DOM)

Campurile obiectului window, II

Metode ale obiectului window, II

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.

Metode ale obiectului window, I

Proprietati ale obiectului document, I

Proprietati ale obiectului document, III

Culoarea de backgroud a paginii web

Poate fi schimbata in orice moment

Propietate read-only ce retine titlul paginii web

Propietate read-only ce retine URL-ul documentului curent

Proprietati ale obiectului document, II

Metode ale obiectului document

Un tablou de obiecte de tip Form ce reprezinta formele din document

Daca documentul contine numai o forma, atunci acesta este forms[0]

Un tablou de obiecte de tip Image reprezentand imaginile din document

Un tablou de obiecte de tip Link objects reprezentand link-urile din pagina

Proprietarea ce retine adresa paginii referite este href

Propietatile obectului Form

ce contine toate input-urile din forma

La aparitia evenimentului respectiv, este apelat automat handlerul corespunzator

Metode obectului Form

datele catre server

Apasarea butonului va declansa executia instructiunii JavaScript

care va afisa pe ecran o fereastra de dialog cu mesajul specificat.

Evenimente si handlere de evenimente, I

Evenimente si handlere de evenimente, III

Evenimente si handlere de evenimente, II

Evenimente si handlere de evenimente, IV

User releases a key

Evenimente si handlere de evenimente, V

Evenimente si handlere de evenimente, VI

S-ar putea să vă placă și