În conversaţiile anterioare am acordat atenţie limbajului de programare JavaScript şi obiectelor interne ale acestuia (Arguments, Array, Boolean, Date, Function, Math, Number, Object, RegExp, String, This). Obiectele pe care le veţi utiliza cel mai des, pe parte de client sunt cele care aparţin DOM-ului (Document Object Model), cu ajutorul cărora script-urile dumneavoastră vor putea manipula paginile Web, ferestrele şi documentele.

Obiectivul acestui model (DOM) este acela de a vă oferi o interfaţă (între două feţe există ... o interfaţă!) simplă şi coerentă între programele JavaScript şi navigatorul Web.
DOM-ul defineşte obiectele disponibile, proprietăţile, metodele şi evenimentele acestora. Cu o parte din obiectele DOM-ului aţi făcut deja cunoştinţă.

În afară de aceste obiecte, DOM-ul mai conţine şi alte obiecte ierarhizate (structură arborescentă), obiectul Window aflându-se în vârful arborescenţei.

Când examinaţi îndeaproape ierarhia generală a obiectelor în JavaScript, puteţi vedea că cele mai multe obiecte sunt fie pe parte de client sau pe parte de server.

În această lucrare vom examina obiectele numai pe parte de client şi vom prezenta proprietăţile şi metodele lor.

În figura 7.1 sunt prezentate obiectele pe parte de client şi tag-urile (X)HTML corespunzătoare.

Pe măsură ce veţi examina aceste obiecte veţi vedea modalităţile diverse în care ele sunt prezentate utilizatorilor şi programatorilor în limbajul JavaScript.

Lista obiectelor JavaScript este prezentată în ordine alfabetică în figura 7.2, iar ierarhia obiectelor este ilustrată în figura 7.3.

Obiectele sunt ierarhizate după cum urmează:
– Obiectul Window, de nivelul cel mai înalt (nivelul 0), pe parte de client;
– Obiecte de nivelul 1: Document, Frame, History, Location, Event, Style;
– Obiecte de nivelul al doilea: Anchor, Area, Applet, Form, Image, Layer, Link, Plugin;
– Obiecte de nivelul al treilea: Button, Checkbox, FileUpload, Hidden, Password, Radio, Reset, Submit, Select, Text, Textarea;
– Obiecte de nivelul al patrulea: Option.

În cursul încărcării fişierului XHTML, navigatorul Web foloseşte un ansamblu complet de obiecte ale DOM-ului pentru a le reprezenta (vezi figura 7.5).

În figura 7.6 se prezintă modul de imbricare al obiectelor create.

Obiectele navigatorului sunt exterioare limbajului JavaScript dar sunt recunoscute de către navigatoare. Din păcate există încă diferenţe între navigatoare, care nu de puţine ori se manifestă în mod supărător.

După Netscape 3.0 şi Internet Explorer 4.0 toate obiectele de bază sunt luate în considerare de către cele două browser-e, iar noile norme DOM sunt recunoscute de ultimele versiuni Netscape şi Internet Explorer.
W3C (World Wide Web Consortium) a pus recent la punct norma DOM de nivel 1. Această normă nu conţine decât obiectele de bază, toate obiectele acoperind integral componentele unui document (X)HTML. O normă de nivel 2 este în curs de apariţie. Ierarhia obiectelor de care noi vorbim în această conversaţie este cunoscută sub numele de DOM 0 iar obiectele sunt incluse în norma DOM 1.

Obiectul Window de nivelul cel mai înalt reprezintă fereastra navigatorului în care este afişat obiectul Document. Fiecare fereastră a navigatorului şi fiecare cadru au propriul lor obiect Window.

Fişa obiectului Window este prezentată în figura 7.7.

Spre deosebire de alte obiecte care pot să fie prezente sau nu, obiectul Window există permanent.

Cele mai importante proprietăţi ale obiectului Window sunt prezentate în detaliu în figura 7.8.

Metodele fundamentale ale obiectului Window sunt prezentate în detaliu în figura 7.9.

Una din aplicaţiile cele mai interesante ale obiectului Window este crearea şi închiderea unei noi ferestre. Vă prezentăm în cele ce urmează câteva aplicaţii simple, reprezentative pentru metodele şi proprietăţile obiectului Window.

În figura 7.11 este prezentată pagina Web afişată în Internet Explorer, cu noua fereastră deschisă.

În figura 7.12 este prezentat documentul XHTML complet.

Script-ul redefineşte stilul caracterelor pentru întreg documentul de fiecare dată când fereastra îşi schimbă dimensiunile (figura 7.14, figura 7.15).

În figura 7.17 este afişat documentul complet XHTML.

În figurile 7.18, 7.19, 7.20 sunt prezentate rezultatele execuţiei programului JavaScript.

Obiectul Window, considerat ca fiind obiectul de cel mai înalt nivel în ierarhia obiectelor JavaScript pe parte de client conţine toate celelalte obiecte pe parte de client, cu excepţia obiectului Navigator.

Este important să faceţi cunoştinţă cu aceste obiecte, şi ... să rămâneţi împreună! Ele sunt:
– Document;
– Frame;
– History;
– Location;
– Event;
– Style.

Manipularea documentelor Web

Obiectul Document reprezintă pagina Web afişată într-o fereastră a navigatorului. Nu pare deci surprinzător faptul că obiectele Document sunt fii ai obiectelor Window. În măsura în care obiectul Window reprezintă întotdeauna fereastra activă (cea care conţine script-ul), puteţi utiliza window.document pentru a vă referi la documentul curent sau, mai simplu, utilizaţi numai document.

Dacă mai multe ferestre sau mai multe cadre sunt deschise, atunci vor exista mai multe obiecte window şi un singur obiect Document pentru fiecare dintre ele. Pentru a utiliza un astfel de obiect Document ne folosim de numele ferestrei urmat de numele obiectului.

Fişa obiectului Document este prezentată în figura 7.21.

Proprietăţile fundamentale ale obiectului Document

Proprietăţile fundamentale ale obiectului Document sunt prezentate în detaliu în figura 7.22.

Metodele fundamentale ale obiectului Document

Cele mai utilizate metode ale obiectului Document sunt prezentate în detaliu în figura 7.23.

Revenind la metodele open() şi close() ale obiectului Document

Obiectul Document conţine metodele open() şi close() (vezi metodele obiectului Document, figura 7.23).

Atunci când utilizaţi metoda write() sau writeln() (vezi metodele obiectului Document, figura 7.23) trimiteţi, de fapt, datele către ceva care se cheamă stream (flux), care corespunde unei zone rezervate de date. Datele rămân în stream până în momentul în care navigatorul este pregătit să le afişeze în fereastra sa. Va trebui să deschideţi (open) iar stream-ul înainte de a-l utiliza apoi să-l închideţi (close).

Metodele open() şi close() efectuează cele două acţiuni.

Metoda open() indică navigatorului că doriţi să scrieţi un nou flux de date în obiectul Document curent.

Metoda close() semnalează sfârşitul acţiunii de scriere; ea obligă navigatorul să afişeze toate datele care au mai rămas în flux (stream).

Utilizarea celor două metode nu este însă obligatorie întrucât write() şi writeln() realizează în mod automat deschiderea (open) şi închiderea (close) stream-ului.

În concluzie, pentru a trimite un flux de date către fereastra navigatorului, parcurgeţi următorii paşi:
– Utilizaţi document.open() pentru a deschide obiectul Document şi pentru a putea din nou scrie.
– Utilizaţi document.write()/document.writeln().
– Utilizaţi document.close() pentru a indica navigatorului că aţi terminat de scris în fereastra sa.

Cu metoda document.open puteţi specifica un tip MIME care vă oferă posibilitatea de a crea un document de un anume tip ce conţine imagini şi documente utilizate în cadrul plug-ins.

Aplicaţii ale metodelor open() şi close()

Atunci când o fereastră conţine mai multe cadre, fiecare dintre ele este reprezentat în JavaScript printr-un obiect Frame.

Obiectul Location este un fiu al obiectului Window. El stochează informaţii despre adresa URL a unei ferestre specificate. Fişa obiectului Location este prezentată în figura 7.26.

Proprietăţile obiectului Location

Proprietăţile obiectului Location sunt prezentate în detaliu, în figura 7.27. Ele reprezintă părţi ale URL-ului.

Metodele obiectului Location

Metodele obiectului Location sunt prezentate în detaliu în figura 7.28.

În figura 7.29 este prezentată secvenţa HTML corespunzătoare.

În figura 7.30 este prezentat documentul XHTML complet al aplicaţiei.

Obiectul History este un alt obiect fiu al obiectului Window. Acest obiect conţine URL-ul paginilor vizitate înainte şi după pagina curentă.

Fişa obiectului History este prezentată în figura 7.31.

Proprietăţile obiectului History

Proprietăţile obiectului History sunt prezentate în detaliu în figura 7.32.

Metodele obiectului History

Trei metode ale obiectului History permit deplasarea în lista de istoric (vezi figura 7.33).

Obiectul Event este un alt fiu al obiectului Window.
Fişa obiectului Event este prezentată în figura 7.34.

Proprietăţile obiectului Event

Câteva din proprietăţile obiectului Event sunt prezentate în detaliu în figura 7.35.

Aşa cum există subobiecte ale obiectului Window, tot aşa există şi subobiecte – obiecte de nivelul al doilea ale obiectului Document. Subobiectele obiectului Document sunt următoarele:
– Anchor;
– Area;
– Applet;
– Form;
– Image;
– Layer;
– Link;
– Plugin.

Obiectele Anchor sunt fii ai obiectului Document. Fiecare obiect Anchor reprezintă o ancoră a documentului curent, adică un loc specific în document care poate fi atins direct printr-un link.

Matricea anchors[]

Singurul mod în care puteţi folosi realmente un obiect Anchor în limbajul JavaScript este prin intermediul matricii anchors[] al obiectului Document (document.anchors[]).
Folosiţi matricea document.anchors[] pentru a determina numărul de ancore dintr-un document (figura 7.36).

Folosiţi proprietatea name pentru a recupera numele unei ancore şi proprietatea innerText pentru a recupera textul său (figura 7.36).

Obiectul Area vă permite să definiţi o suprafaţă a unei imagini reactive.
Proprietăţile obiectului Area sunt: hash (porţiunea de adresă URL care este ancora, inclusiv simbolul #); host (numele calculatorului gazdă (adresa IP) şi portul specificate în adresa URL); hostname (numele calculatorului gazdă specificat în URL); href (adresa URL completă); pathname (calea fişierului specificat în adresa URL, începând cu simbolul (”/”); port (portul specificat în adresa URL); protocol (protocolul specificat în adresa URL, inclusiv simbolul final (”:”); search (partea de căutare a adresei URL, inclusiv simbolul (”?”); target (numele ferestrei ţintă în care se afişează adresa URL); text (textul care apare între tag-urile <area> ...</area>).

Obiectul Applet reprezintă echivalentul JavaScript al tag-ului (X)HTML <applet>.

Obiectul Form este un obiect JavaScript reprezentat prin perechea de tag-uri (X)HTML: <form> şi </form>.

Obiectul Image este echivalentul JavaScript al tag-ului (X)HTML <img />.

Obiectul Layer permite accesarea straturilor în interiorul documentelor.

Obiectul Link este echivalentul JavaScript al unei legături hipertext.

Fişa obiectului Link este prezentată în figura 7.37.

Un document poate avea mai multe obiecte Link, fiecare dintre ele conţinând informaţii cu privire la URL-ul sau ancora corespunzătoare.

Matricea links[]

Obiectele Link nu au o proprietate name, deci nu puteţi referi un obiect Link prin el însuşi.
Puteţi accesa obiecte Link cu ajutorul matricii links[] (document.links[]) care este o colecţie a tuturor legăturilor din documentul curent. Ordinea din matrice se bazează pe ordinea în care sunt localizate legăturile în fişierul sursă. O proprietate a matricii, documents.links.length precizează numărul de link-uri ale paginii.

Proprietăţile obiectului Link

Obiectul Link conţine numeroase proprietăţi (acelaşi ca şi obiectul Location) care permit cunoaşterea cu precizie a legăturii (X)HTML care îl reprezintă. Aceste proprietăţi reprezintă părţi ale adresei URL.

Proprietăţile obiectului Link sunt prezentate în detaliu în figura 7.38.

Obiectul Plugin, foarte asemănător obiectului Applet reprezintă o modalitate de accesare a modulelor plug-in instalate în browser.
Proprietăţile obiectului Plugin sunt: description (conţine descrierea modulului plug-in); filename (conţine numele fişierului unui program plug-in); length (conţine numărul de tipuri MIME acceptate de modulul plug-in); name (conţine numele modulului plug-in).

Următorul nivel de obiecte pe parte de client ale limbajului JavaScript este nivelul al treilea. Toate obiectele de nivelul al treilea sunt subobiecte ale obiectului Form: Button; Checkbox; FileUpload; Hidden; Password; Radio; Reset; Submit; Select; Text; Textarea.

Ultimul nivel de obiecte pe parte de client ale limbajului JavaScript este nivelul al patrulea. Există un singur obiect de nivelul al patrulea: obiectul Option, care este un subobiect al obiectului Select.

Obiectul Option este folosit pentru referirea la elementele <option> care apar între tag-urile <select> ... </select>

Fişa obiectului Option este prezentată în figura 7.40.

Obiectul Option este prezentat în detaliu în figura 7.41.

Proprietăţile obiectului Option

Proprietăţile obiectului Option sunt prezentate în detaliu în figura 7.42.

Noul standard DOM (Document Object Model) a eliminat multe dintre diferenţele care există (încă!) între navigatoare, dar veţi întâlni numeroase situaţii care impun scrierea unui script pentru fiecare navigator, separat. Puteţi utiliza JavaScript pentru a identifica navigatorul pe care îl utilizaţi, folosind obiectul window.navigator.

Obiectul Navigator nu face parte din DOM deci, îl puteţi referi direct.
El este unic şi deci, imposibil de instanţiat (creat).

Puteţi adăuga proprietăţi personale obiectului Navigator. Ele sunt disponibile pentru toate obiectele Window ale navigatorului Netscape. Spre deosebire de Netscape Navigator, Internet Explorer creează un obiect Window pentru fiecare o nouă fereastră. Noile proprietăţi rămân deci limitate la obiectul Window în care ele au fost create.

Fişa obiectului Navigator este prezentată în figura 7.43.

Proprietăţile obiectului Navigator sunt prezentate în detaliu în figura 7.44.

Metoda JavaEnabled() a obiectului Navigator este prezentată în figura 7.45

În figura 7.46 este prezentat documentul XHTML complet în care s-a inserat script-ul aplicaţiei.

În figura 7.47 şi figura 7.48 se prezintă cele două pagini Web afişate în Netscape 6, respectiv Internet Explorer.

În figura 7.50 este prezentat documentul XHTML complet în care s-a inserat script-ul aplicaţiei.

În figura 7.51, figura 7.52, figura 7.53, figura 7.54 sunt prezentate rezultatele afişării paginii Web în navigatorul Internet Explorer.

În figura 7.55 se prezintă o soluţie a aplicaţiei pe care vă rugăm să o comentaţi.

Obiectul MimeType este un subobiect al obiectului Navigator. El vă permite să accesaţi informaţii despre tipurile MIME pe care le recunosc modulele
plug-in. Ca şi obiectul Plugin, el nu este recunoscut de Internet Explorer.

Instanţele obiectului MimeType sunt accesibile prin intermediul matricii navigator.mimeTypes[] ale cărei elemente reprezintă tipurile MIME.

Fişa obiectului MimeType este prezentată în figura 7.56.

Obiectul MimeType este prezentat în detaliu în figura 7.57.

Proprietăţile obiectului MimeType

Proprietăţile obiectului MimeType sunt prezentate în detaliu în figura 7.58.

În figura 7.59 este prezentat script-ul aplicaţiei.

Obiectul Plugin este un subobiect al obiectului Navigator. El este creat prin instalarea de module plug-in pentru browser. Obiectul Plugin conţine o matrice de elemente şi tipuri MIME tratate de fiecare modul plug-in.

În figura 7.60 este prezentată fişa obiectului Plugin.

Manipularea plug-ins cu ajutorul obiectelor

Plug-ins au apărut cu versiunea 3.0 a navigatorului Netscape.
Există sute de plug-in pentru Internet Explorer şi Netscape. Prezentăm în continuare pe cele mai cunoscute:
– Macromedia Shockwave şi Flash;
– Adobe Acrobat;
– Real Player;
– Beatnik.

Obiectul JavaScript Navigator posedă un obiect fiu numit Plugins. Acest obiect este o matrice, fiecare plug-in instalat în navigator reprezentând un element al matricii.

Obiectul Plugins face referire la plug-ins instalate în navigator.
Instanţele obiectului Plugins sunt accesibile prin matricea navigator.plugins[] ale cărei elemente reprezintă plug-ins.

Fiecare plug-in este de asemenea inclus în matricea MimeTypes[].

Fişa obiectului Plugins este prezentată în figura 7.61.

În figura 7.62 este prezentat script-ul aplicaţiei.

Proprietăţile obiectului Plugins

Proprietăţile obiectului Plugins sunt prezentate în detaliu în figura 7.63.

Rezultatele execuţiei script-ului (figura 7.65).