Full-Stack Web Development busaco demos.com 5 profs.info.uaic.ro/~ html Dr. Sabin Sabin Buraga Dr. API-uri JavaScript în contextul HTML5 – partea I Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/ busaco “You are never too old to set another goal or to dream a new dream.” profs.info.uaic.ro/~ C.S. Lewis Dr. Sabin Sabin Buraga Dr. Încărcarea & redarea documentelor busaco prezentarea conținutului (reprezentării) unei resurse – uzual, obiecte ale arborelui DOM – are loc în cadrul unui context de navigare profs.info.uaic.ro/~ (browsing context) Dr. Sabin Sabin Buraga Dr. Încărcarea & redarea documentelor busaco context de navigare mediu în care sunt redate obiectele de tip Document profs.info.uaic.ro/~ Dr. Sabin Sabin Buraga Dr. Încărcarea & redarea documentelor busaco context de navigare mediu în care sunt redate obiectele de tip Document profs.info.uaic.ro/~ exemple tipice: tab-ul unei instanțe de browser Web elementul <iframe> în care se încarcă o altă resursă Sabin Buraga Dr. Încărcarea & redarea documentelor busaco context de navigare are asociat un obiect WindowProxy profs.info.uaic.ro/~ care referă obiectul Window Dr. Sabin Sabin Buraga Dr. Încărcarea & redarea documentelor busaco context de navigare include un istoric al sesiunii curente (session history) profs.info.uaic.ro/~ memorând secvența instanțelor de tip Document care au fost redate utilizatorului documentul curent e considerat ca fiind document activ Sabin Buraga Dr. Încărcarea & redarea documentelor busaco context de navigare posedă un proprietar (creator browsing context) profs.info.uaic.ro/~ desemnat de o origine (origin) uzual, tuplul <schema, host, port, domain> Dr. Sabin Sabin Buraga Dr. Încărcarea & redarea documentelor busaco context de navigare posedă un proprietar (creator browsing context) profs.info.uaic.ro/~ desemnat de o origine (origin) originile pot fi partajate și sunt imutabile, în general Dr. Sabin Sabin Buraga Dr. Încărcarea & redarea documentelor busaco context de navigare posedă un proprietar (creator browsing context) profs.info.uaic.ro/~ desemnat de o origine (origin) originile pot fi partajate și sunt imutabile, în general Dr. Sabin Sabin Buraga Dr. doar domeniul unei origini poate fi alterat via proprietatea document.domain Încărcarea & redarea documentelor busaco context de navigare anumite elemente – de exemplu, <iframe> – profs.info.uaic.ro/~ pot instanția alte contexte: contexte imbricate (nested browsing contexts) Dr. Sabin Sabin Buraga Dr. Încărcarea & redarea documentelor busaco context de navigare anumite elemente – de exemplu, <iframe> – profs.info.uaic.ro/~ pot instanția alte contexte: contexte imbricate (nested browsing contexts) astfel, un context imbricat are asociat un context părinte Sabin Buraga Dr. pot exista diverse contexte copil „legate” de un context părinte Încărcarea & redarea documentelor busaco context de navigare anumite elemente – de exemplu, <iframe> – profs.info.uaic.ro/~ pot instanția alte contexte: contexte imbricate (nested browsing contexts) un context imbricat poate fi setat să întârzie încărcarea Sabin Buraga Dr. unei resurse (delaying load events mode) Încărcarea & redarea documentelor busaco context de navigare poate avea asignat un nume (browsing context name) profs.info.uaic.ro/~ nu există niciun nume prestabilit Dr. Sabin Sabin Buraga Dr. Încărcarea & redarea documentelor busaco context de navigare poate avea asignat un nume (browsing context name) profs.info.uaic.ro/~ denumiri speciale – valori ale atributului target desemnând numele contextului de navigare: _blank _self _parent _top Sabin Buraga Dr. <a href="http://undeva.info/" target="_blank">…</a> Încărcarea & redarea documentelor busaco remarcă: un document (instanță de tip Document) nu trebuie obligatoriu să aibă atașat un context profs.info.uaic.ro/~ cazuri tipice: instrumente de indexare a conținutului (roboți ai motoarelor de căutare) Sabin Buraga Dr. sau instanțe de navigator Web neinteractiv (headless browser) Încărcarea & redarea documentelor busaco uzual, unei instanțe de tip Document îi corespunde un obiect Window (relație 1-la-1) profs.info.uaic.ro/~ Dr. Sabin Sabin Buraga Dr. Încărcarea & redarea documentelor busaco uzual, unei instanțe de tip Document îi corespunde un obiect Window (relație 1-la-1) profs.info.uaic.ro/~ excepție: reutilizarea unui obiect Window pentru prezentarea altei instanțe de Document în cadrul aceluiași context Dr. Sabin Sabin Buraga Dr. e.g., înlocuirea unui document vid (about:blank) cu altul Încărcarea & redarea documentelor busaco uzual, unei instanțe de tip Document îi corespunde un obiect Window (relație 1-la-1) profs.info.uaic.ro/~ excepție: refolosirea unei instanțe de Document pentru a încărca alte obiecte Window via metoda document.open() Dr. Sabin Sabin Buraga Dr. interface Window : EventTarget { // contextul curent de navigare [Unforgeable] readonly attribute WindowProxy window; [Replaceable] readonly attribute WindowProxy self; [Unforgeable] readonly attribute Document document; attribute DOMString name; busaco [PutForwards=href, Unforgeable] readonly attribute Location location; readonly attribute History history; readonly attribute CustomElementRegistry customElements; [Replaceable] readonly attribute BarProp locationbar; [Replaceable] readonly attribute BarProp menubar; [Replaceable] readonly attribute BarProp personalbar; profs.info.uaic.ro/~ [Replaceable] readonly attribute BarProp scrollbars; [Replaceable] readonly attribute BarProp statusbar; [Replaceable] readonly attribute BarProp toolbar; attribute DOMString status; void close (); readonly attribute boolean closed; Sabin Buraga Dr. void stop (); void focus (); void blur (); interfață declarată cu WebIDL interface Window : EventTarget { // contextul curent de navigare [Unforgeable] readonly attribute WindowProxy window; [Replaceable] readonly attribute WindowProxy self; [Unforgeable] readonly attribute Document document; attribute DOMString name; busaco [PutForwards=href, Unforgeable] readonly attribute Location location; readonly attribute History history; readonly attribute CustomElementRegistry customElements; [Replaceable] readonly attribute BarProp locationbar; [Replaceable] readonly attribute BarProp menubar; [Replaceable] readonly attribute BarProp personalbar; profs.info.uaic.ro/~ [Replaceable] readonly attribute BarProp scrollbars; [Replaceable] readonly attribute BarProp statusbar; [Replaceable] readonly attribute BarProp toolbar; attribute DOMString status; void close (); interface BarProp { readonly attribute boolean closed; readonly attribute boolean visible; Sabin Buraga Dr. void stop (); }; void focus (); void blur (); // alte contexte de navigare USV = Unicode [Replaceable] readonly attribute WindowProxy frames; Scalar Values [Replaceable] readonly attribute unsigned long length; toate posibilele [Unforgeable] readonly attribute WindowProxy? top; valori scalare attribute any opener; [Replaceable] readonly attribute WindowProxy? parent; busaco readonly attribute Element? frameElement; WindowProxy? open (optional USVString url = "", optional DOMString target = "_blank", profs.info.uaic.ro/~ optional [TreatNullAs=EmptyString] DOMString features = ""); getter object (DOMString name); // informații despre client readonly attribute Navigator navigator; Sabin Buraga Dr. [SecureContext] readonly attribute ApplicationCache applicationCache; // interacțiune cu utilizatorul – se pot înlocui cu <dialog> (HTML 5.2) void alert (); void alert (DOMString message); boolean confirm (optional DOMString message = ""); DOMString? prompt (optional DOMString message = "", optional DOMString default = ""); busaco void print (); // plasarea de mesaje altei instanțe de fereastră void postMessage (any message, USVString targetOrigin, optional sequence<object> transfer = []); profs.info.uaic.ro/~ void postMessage (any message, optional WindowPostMessageOptions options = {}); // stabilirea de funcții pentru tratarea evenimentelor // e.g., onplay ondrag onprogress Window implements GlobalEventHandlers; Sabin Buraga Dr. Window implements WindowEventHandlers; html.spec.whatwg.org/multipage/window-object.html#the-window-object Control asupra cache-ului navigatorului Web busaco ApplicationCache profs.info.uaic.ro/~ Dr. Sabin Sabin Buraga Dr. CACHE MANIFEST # Aplicație Web minunată (versiunea 1.0.1) # resurse (proprii / din alte domenii) ce pot fi plasate în cache index.html cache.html html5.css fig.jpg busaco img/logo.png http://www.penguin.info/tux.css # preia de pe rețea conținutul unor resurse, dacă e posibil NETWORK: profs.info.uaic.ro/~ news.html # conținut alternativ, dacă suntem offline FALLBACK: /fallback.html politica de caching e specificată de un fișier .appcache Sabin Buraga Dr. referit prin <html manifest="offline.appcache"> pentru fiecare pagină Web a aplicației Control asupra cache-ului navigatorului Web busaco ApplicationCache operații asupra cache-ului: update() abort() swapCache() profs.info.uaic.ro/~ starea cache-ului este furnizată de atributul status Dr. Sabin Sabin Buraga Dr. Control asupra cache-ului navigatorului Web busaco ApplicationCache actualmente, această tehnică e considerată învechită profs.info.uaic.ro/~ “This feature is in the process of being removed from the Web platform. (This is a long process that takes many years.) Using any of the offline Web application features at this time is highly discouraged. Use service workers instead.” Sabin Buraga Dr. conform html.spec.whatwg.org/multipage/offline.html#offline Specificarea contoarelor de timp busaco WindowTimers setTimeout() clearTimeout()