PW C07 JavaScript Obiectele Navigatorului

Universitatea TRANSILVANIA din Brasov
Facultatea de Inginerie Electric i tiina Calculatoarelor
Programare Web
JavaScript Gestionarea evenimentelor Obiectele navigatorului
Delia UNGUREANU
Evenimente i gestionari de evenimente
JavaScript este un limbaj condus de evenimente. Multe din programele scrise n limbajul JavaScript rspund la un eveniment iniiat fie de ctre utilizator, fie de ctre browser. Reacia la un eveniment este cunoscut sub numele de prelucrarea evenimentului, iar codul JavaScript corespunztor este cunoscut sub numele de gestionar de evenimente. Un gestionar de evenimente este o metod special care va fi apelat n mod automat de ctre navigator ori de cte ori va surveni un eveniment particular.
Evenimentele generate de utilizator nu sunt singurele evenimente generate de JavaScript, ci pot fi generate si de navigator. De exemplu, evenimentul load, declanat automat de ctre navigator - se produce atunci cnd este ncheiat ncrcarea unui document (X)HTML ntr-un navigator. Acelai eveniment se poate aplica mai multor obiecte. Evenimentele stau la baza interactivitii documentelor Web.

Evenimentele care survin n mod frecvent :
Eveniment abort blur click change error focus load mouseOut mouseOver reset select submit unload Se declanseaza atunci cnd ncarcarea unui obiect este ntrerupta. un element nu este activat. utilizatorul executa clic pe un obiect. valoarea unui element este modificata. se produce o eroare la ncarcarea unui document sau a unei imagini. un element devine activ. un document sau o imagine se ncarca. mouse-ul se deplaseaza n afara elementului. mouse-ul se deplaseaza pe deasupra elementului. datele introduse ntr-un formular sunt sterse. utilizatorul selecteaza un cmp ntr-un formular. utilizatorul expediaza un formular. un document este descarcat.
Codul gestionarului de evenimente trebuie s fie inclus ca un atribut al unui tag (X)HTML care declaneaz evenimentul:
< tag (X)HTML gestionarEvenimente = cod JavaScript >
Conventie de numire: on este scris mereu cu minuscule iar iniiala fiecrui cuvnt al evenimentului, cu majuscule. Exemple: onAbort, onBlur, onClick, onChange, onError, onFous, onLoad, onMouseOut, onMouseOver, onReset, onSelect, onSubmit, onUnLoad.

Gestionarii de evenimente ai limbajului JavaScript :




Obiectele navigatorului
Obiectele cel mai des utilizate pe parte de client sunt cele care aparin DOM-ului (Document Object Model), cu ajutorul crora script-urile vor putea manipula paginile Web, ferestrele i documentele. Obiectivul acestui model (DOM) este acela de a oferi o interfa simpl i coerent ntre programele JavaScript i browserul Web. DOM-ul definete obiectele disponibile, proprietile, metodele i evenimentele acestora.
Hierarchy of objects in an example HTML DOMDocument Object Model
Obiectele navigatorului Ierarhia obiectelor

I II III IV V
Window
Document Frame History Location Event Style
Anchor Area Applet Form Image Layer Link Plugin
Button Checkbox FileUpload Hidden Password Radio Reset Submit Select Text Textarea
Option
Obiect JavaScript Button Checkbox Hidden Fileupload Password Radio Reset Select Frame Document Layer
Tag (X)HTML corespondent <input type="button" /> <input type="checkbox" /> <input type="hidden" /> <input type="file" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <select> <frame> <body> <layer> sau <ilayer>
Obiect JavaScript Link Image Area Anchor Applet Plugin Form Submit Text Textarea Option
Tag (X)HTML corespondent <a href=" " /> <img /> <map> <a name=" " /> <applet> <embed> <form> <input type="submit" /> <input type="text" /> <textarea> <option>
Obiectul navigator
Obiectul navigator reprezinta programul, aplicatia browser folosita pentru vizualizarea rezultatelor. Cu acest obiect putem gasi informatii despre denumirea si versiunea browser-ului, precum si alte informatii specifice. Exemplu:
Obiectul navigator
Proprietati ale obiectului navigator: appCodeName - reprezinta numele de cod al browserului appName - reprezinta numele oficial al browserului appVersion - versiunea browserului language - limbajul browserului mimeTypes - 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 userAgent - sir care reprezinta antetul utilizator-agent
Obiectul navigator
Metode ale obiectului "navigator" sunt urmatoarele: javaEnabled() - 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 taintEnabled() - testeaza daca este activata contaminarea datelor
Obiectul navigator
Exemplu:
Obiectul navigator
Exemplu:
Exemplu: n cursul ncrcrii fiierului XHTML, navigatorul Web folosete un ansamblu complet de obiecte ale DOMului pentru a le reprezenta
Obiect
Obiectul Window Obiectul Document Un obiect Form cu numele "demo" Trei obiecte input cu numele: "nume", "prenume", "email"
Descriere
Reprezinta navigatorul Web Reprezinta fisierul XHTML Reprezinta tag-ul <form> definit n fisierul XHTML Reprezinta zonele de text definite n formular
Modul de imbricare:
Exemplu: n cursul ncrcrii fiierului XHTML, navigatorul Web folosete un ansamblu complet de obiecte ale DOMului pentru a le reprezenta
window document
form
input
Obiectul Window
Obiectul Window este de nivelul cel mai nalt Reprezint fereastra navigatorului n care este afiat obiectul Document. Fiecare fereastr a navigatorului are propriul su obiect Window. Un obiect Window i proprietile sale pot fi atribuite unei variabile JavaScript ca orice alt obiect. Spre deosebire de alte obiecte care pot s fie prezente sau nu, obiectul Window exist permanent. Mai multe obiecte window pot exista n acelai timp, fiecare reprezentnd o fereastr a navigatorului deschis. Cadrele (frames, n limba englez) sunt de asemenea reprezentate prin obiecte Window Straturile (layers, n limba englez) permit modificarea n mod dinamic a coninutului unui document Web sunt analoge obiectelor Window
Obiectul Window
Obiectului Window Subobiecte: document, event, history, location, navigator, style content, clientinformation, clipboard, closed, defaultstatus, dialogArguments, dialogHeight, dialogLeft, dialogTop, dialogWidth, document, event, frames[], history, innerHeight, innerWidth, length, name, navigator, offscreenBuffering, opener, outerHeight, outerWidth, pageXOFFset, pageYOffset, parent, returnValue, screen, screenLeft, screenTop, screenX, screenY, self, status, style, top, window alert(), back(), blur(), clearInterval(), clearTimeout(), close(), confirm(), createPopup(), execScript(), focus(), forward(), home(), moveBy(), moveTo(), navigate(), open(), print(), prompt(), resizeBy(), resizeTo(), scroll(), scrollBy(), scrollTo(), setActive(), setInterval(), setTimeout(), showHelp(), showModaldialog(), showModelessDialog(), stop() onActivate, onAfterPrint, onBeforeActivate, onBeforePrint, onBeforeUnload, onBlur, onControlSelect, onDeActivate, onDragDrop, onError, onFocus, onHelp, onLoad, onMouseMove, onMove, onMoveEnd, onMoveStart, onResize, onResizeEnd, onResizeStart, onScroll, onUnload
Proprietati:
Metode:
Gestionarii de evenimente:
Obiectul Window
Exemplu:
Obiectul Window
Exemplu:
Obiectul Window
Exemplu:
Obiectul Window
Exemplu:
Obiectul Window
Exemplu:
Obiectul Document
Obiectul Document reprezint pagina Web afiat ntr-o fereastr a navigatorului. Obiectele Document sunt fii ai obiectelor Window. n msura n care obiectul Window reprezint ntotdeauna fereastra activ (cea care conine script-ul), putei utiliza window.document pentru a v referi la documentul curent sau, mai simplu, utilizai 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.
Obiectul Document
Fisa obiectului Document Obiectul parinte: Subobiecte: Window Anchor, Area, Applet, Form, Image, Layer, Link, Plugin activeElement, alinkColor, all[], anchors[], applets[], attributes[], background, bgColor, body, characterSet, charSet, childNodes[], cookie, defaultcharset, domain, embeds[], fgcolor, fileCreatedDate, fileModifiedDate, fileSize, forms[], frames[], height, images[], innerHTML, innerText, lastModified, layers[], links[], location, outerHTML, outerText, parentWindow, plugins[], protocol, readyState, referrer, scripts[], selection, style, stylesheets[], title, URL, vlinkColor, width clear(), close(), createElement(), createStyleSheet(), elementFormPoint(), getElementByld(), getElementsByName(), getElementsByTagName(), getSelection(), open(), setActive(), write(), writeln onActivate, onBeforeCut, onBeforeDeActivate, onBeforeEditFocus, onBeforePaste, onBeforeUpdate, onCellChange, onClick, onContextMenu, onControlSelect, onCut, onDblClick, onDrag, onDragEnd, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, onHelp, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseOut, onMouseOver, onMouseUp, onPaste, onPropertyChange, onSelectionChange, onSelectStart, onStop
Proprietati:
Metode:
Obiectul Document
Exemplu:
Obiectul Document
Exemplu:
Obiectul Document
Exemplu:
Obiectul Form
Obiectul Form subobiect al obiectului Document Obiectul Form este un obiect JavaScript reprezentat prin perechea de tag-uri (X)HTML: <form> i </form>.
Obiectul Form
Obiectul Form Obiectul parinte: Subobiecte: Proprietati: Metode: Document button, checkbox, fileupload, hidden, input, password, select, option, radio, reset, text, textarea, submit acceptCharset, action, elements[], encoding, enctype, length, method, name, target reset(), submit(), tags() onContextMenu, onControlSelect, onCopy, onCut, onDblClick, onDeActivate, onDrag, onDragend, onDragenter, onDragLeave, onDragOver, onDragStart, onFocusOut, onHelp, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onMousewheel, onMove, onMoveend, onMovestart, onPaste, onPropertyChange, onReset, onResize, onResizeEnd, onResizeStart, onSelectStart, onSubmit
Obiectul Form
Exemplu:
Obiectul Image
Obiectului Image Obiectul parinte: Cum se creeaza obiectul? Proprietati: Document
Constructorul Image()
border, complete, height, width, hspace, vspace, name, src, lowsrc Obiectul Image nu poseda nici o metoda dar puteti modifica proprietatile imaginilor n mod dinamic. onAbort, onError, onKeyDown, onKeyPress, onKeyUp, onLoad, onClick, onDblClick, onMouseDown, onMouseOut, onMouseOver
Metode: Gestionarii de evenimente:
Obiectul Image
n cursul ncrcrii documentului (X)HTML n navigatorul Web, interpretorul JavaScript creeaz un obiect Image pentru fiecare tag <img> prezent n document. El plaseaz toate obiectele Image ntr-o matrice images (subobiect al obiectului Document). Obiectul Image poate fi accesat cu una din instruciunile prezentate mai jos: document.images[0]; document.nume_image.
Obiectul Image
Exemplu:
Obiectul Image
Image maps (harti de imagini)
O image_map este o imagine partitionata pe mai multe zone (<area>); zonele pot avea forme diferite (shape) si link-uri diferite Pentru <area> se pot gestiona evenimente (onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, and onBlur ) care pot apela functii JavaScript
Obiectul Image
Exemplu: image_map
Obiectul Obiect ul iframe/frame
Cea mai mare parte a navigatoarelor actuale recunosc cadrele (frames) care permit divizarea paginii Web n mai multe zone. n fiecare zon a paginii se poate afia un document (X)HTML sau rezultatul unui script. Atunci cnd o fereastr conine mai multe cadre, fiecare dintre ele este reprezentat n JavaScript printr-un obiect Frame. Acest obiect este echivalent cu un obiect Window. Numele obiectului Frame este acelai cu cel pe care l afectai atributului name al tag-ului <frame>.
Obiectul Obiect ul iframe/frame

Exemplu:
Obiecte personalizate
Obiect = date + metode 1. Crearea direct a unei instante personObj=new Object(); personObj.firstname="John"; personObj.lastname="Doe"; personObj.age=50; personObj.eyecolor="blue"; personObj.afisare=afisare; 2. Crearea unui template function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; }
Exemplu instantiere directa
Exemplu definire template
Tratarea erorilor
Erorile JavaScript sunt identificate de browser la ncrcarea paginii Web. Erorile pot fi clasificate n urmtoarele categorii: erori de sintax; greeli de tastare (confuzia ntre majuscule i minuscule, inversarea literelor, etc.); greeli de punctuaie (tag-uri i paranteze orfeline, ghilimele i apostrofuri plasate greit, etc.); greeli de plasare a instruciunilor JavaScript; confuzia ntre irurile de caractere i valori numerice erori de logic; erori generate de incompatibilitatea ntre navigatoare.
Tratarea erorilor
Erorile JavaScript sunt identificate de browser la ncrcarea paginii Web.
Tratarea erorilor
Instruciunile throw i try catch
Tratarea erorilor
Instruciunile throw i try catch
Tratarea erorilor
onerror - eveniment

PW C07 JavaScript Obiectele Navigatorului

Î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

PW C07 JavaScript Obiectele Navigatorului

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea TRANSILVANIA din Brasov

Facultatea de Inginerie Electric i tiina Calculatoarelor

Evenimente i gestionari de evenimente

Evenimente i gestionari de evenimente

Evenimente i gestionari de evenimente

Evenimente i gestionari de evenimente

< tag (X)HTML gestionarEvenimente = cod JavaScript >

Evenimente i gestionari de evenimente

Evenimente i gestionari de evenimente

Evenimente i gestionari de evenimente

Evenimente i gestionari de evenimente

Evenimente i gestionari de evenimente

Hierarchy of objects in an example HTML DOMDocument Object Model

Obiectele navigatorului Ierarhia obiectelor

Document Frame History Location Event Style

Anchor Area Applet Form Image Layer Link Plugin

Obiectului Image Obiectul parinte: Cum se creeaza obiectul? Proprietati: Document

Metode: Gestionarii de evenimente:

Image maps (harti de imagini)

Obiectul Obiect ul iframe/frame

Obiectul Obiect ul iframe/frame

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