API Dr. Sabin Full - uri JavaScript - Stack Corneliu Buraga Web în contextul – profs.info.uaic.ro/~ Development HTML 5 – busaco partea I html5demos.com /
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco “ You are never too old to set another goal or to dream anew dream C.S. Lewis . ”
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco prezentarea conținutului (reprezentării) unei resurse resurse unei (reprezentării) conținutului prezentarea are locînunui cadrul Î nc – ă uzual, obiecte ale arborelui DOM ale arborelui obiecte uzual, rcarea ( browsing & redarea context de navigare navigare de context context documentelor ) –
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco mediu în caresuntredate Î nc ă rcarea context de navigare de context & redarea obiectele de tip obiectele documentelor Document
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco mediu în caresuntredate elementul elementul Î nc tab ă rcarea - < ul iframe unei unei de instanțe context de navigare de context > & exemple exemple tipice: în care se încarcă oaltăresursă în carese încarcă redarea obiectele de tip obiectele documentelor browser Web Document
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Î nc are asociat un obiect ă rcarea care referă obiectul care referăobiectul context de navigare de context & redarea WindowProxy documentelor Window
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco documentul curent e considerat ca e considerat ca fiind curent documentul include un istoric al include unistoric sesiunii ( curente memorând secvența instanțelor de instanțelor tip memorând secvența Î nc ă care au fostredate utilizatorului care au rcarea context de navigare de context & redarea documentelor session document activ document Document history )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco posedă un proprietar ( posedă proprietar un Î nc uzual, uzual, ă desemnat desemnat de o rcarea tuplul context de navigare de context & < redarea schema creator browsing contextcreatorbrowsing origine origine , host documentelor , port ( origin , domain ) > )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco originile pot fi partajate și sunt imutabile, îngeneral și imutabile, fipartajate sunt pot originile posedă un proprietar ( posedă proprietar un Î nc ă desemnat desemnat de o rcarea context de navigare de context & redarea creator browsing contextcreatorbrowsing origine origine documentelor ( origin ) )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco originile pot fi partajate și sunt imutabile, îngeneral și imutabile, fipartajate sunt pot originile posedă un proprietar ( posedă proprietar un doar domeniul unei origini poate poate fi alterat unei origini doar domeniul Î nc ă via proprietatea via proprietatea desemnat desemnat de o rcarea context de navigare de context & redarea creator browsing contextcreatorbrowsing origine origine document. documentelor ( origin domain ) )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco contexte imbricate contexte anumite anumite elemente Î nc ă rcarea pot instanția contexte: alte instanția pot context de navigare de context & redarea ( nested browsing contexts browsing nested – de exemplu, documentelor < iframe > – )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco astfel, un context imbricat are asociat părinte areasociat context imbricat un un context astfel, contexte imbricate contexte anumite anumite elemente Î pot exista diverse exista pot contexte copil nc ă rcarea pot instanția contexte: alte instanția pot de un context părinte de uncontext context de navigare de context & redarea ( nested browsing contexts browsing nested – de exemplu, documentelor < „ iframe legate > ” – )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco un context imbricat poate fi setat poate să întârzieîncărcarea imbricat un context contexte imbricate contexte anumite anumite elemente Î nc unei resurse( unei ă rcarea pot instanția contexte: alte instanția pot context de navigare de context & delaying redarea ( nested browsing contexts browsing nested – de exemplu, load documentelor events < iframe mode > – ) )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco poate poate avea asignatun Î nc ă nu există niciun nume niciunnume prestabilit nu există rcarea context de navigare de context & nume redarea ( browsing context name browsing documentelor )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco poate poate avea asignatun target … )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco instan nu trebuie obligatoriu să aibă obligatoriuatașat un nu trebuie context țe Î de navigator un document (instanță de (instanță tip un document instrumente de indexare a conținutului deindexare instrumente a conținutului nc ă (roboți ai motoarelor de căutare) ai motoarelor (roboți rcarea & Web Web caz redarea remarcă: uri neinteractiv sau tipice documentelor : Document ( headless ) browser ) Dr. Sabin Buragaprofs.info.uaic.ro/~busaco îi corespunde un obiect îi corespunde Î nc uzual, unei unei de instanțe tip uzual, ă rcarea & redarea Window documentelor Document (relație (relație 1 - la - 1 )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco e.g. altei altei de instanțe reutilizarea unui obiect obiect unui reutilizarea , înlocuirea unui document vid( document unui înlocuirea , îi corespunde un obiect îi corespunde Î nc uzual, unei unei de instanțe tip uzual, ă rcarea Document & redarea excepție: Window în cadrul aceluiași aceluiași context în cadrul Window documentelor pentru prezentarea prezentarea pentru about:blank Document (relație (relație 1 - la ) altul cu - 1 )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco refolosirea unei instanțe uneiinstanțe de refolosirea alte obiecte alte obiecte îi corespunde un obiect îi corespunde Î nc uzual, unei unei de instanțe tip uzual, ă rcarea Window & redarea excepție: via metoda via metoda Window Document documentelor document. Document (relație (relație pentru a încărca pentru 1 open - la - 1 () )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco [ [ [ [ readonly readonly [ attribute [ [ [ // contextul curent navigare de interface void void void readonly void attribute [ [ Replaceable Replaceable Replaceable Replaceable Replaceable PutForwards Unforgeable Replaceable Unforgeable Replaceable blur focus stop close DOMString DOMString attribute attribute attribute Window (); (); (); (); ] ] ] ] ] ] ] ] ] = readonly readonly readonly readonly readonly readonly readonly readonly readonly href : CustomElementRegistry History boolean , EventTarget Unforgeable status name attribute attribute attribute attribute attribute attribute attribute attribute attribute ; history ; closed { ] WindowProxy BarProp BarProp BarProp BarProp BarProp BarProp Document WindowProxy ; readonly ; interfață declarată cu toolbar statusbar scrollbars personalbar menubar locationbar attribute customElements document window self ; ; ; ; ; Location ; ; ; ; ; location ; WebIDL
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco [ [ [ [ readonly readonly [ attribute [ [ [ // contextul curent navigare de interface void void void readonly void attribute [ [ Replaceable Replaceable Replaceable Replaceable Replaceable PutForwards Unforgeable Replaceable Unforgeable Replaceable blur focus stop close DOMString DOMString attribute attribute attribute Window (); (); (); (); ] ] ] ] ] ] ] ] ] = readonly readonly readonly readonly readonly readonly readonly readonly readonly href : CustomElementRegistry History boolean , EventTarget Unforgeable status name attribute attribute attribute attribute attribute attribute attribute attribute attribute ; history ; closed { ] WindowProxy BarProp BarProp BarProp BarProp BarProp BarProp Document WindowProxy ; readonly ; toolbar statusbar scrollbars personalbar menubar locationbar attribute customElements }; interface readonly document window self ; ; ; ; ; Location ; BarProp ; attribute attribute ; ; ; location { boolean ; visible ;
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco WindowProxy readonly [ attribute [ [ [ de navigare contexte alte // [ readonly client informații // despre getter SecureContext Replaceable Unforgeable Replaceable Replaceable object any attribute attribute ] ] ] ] ( opener ? DOMString readonly readonly readonly readonly ] open readonly Element Navigator ; ( optional DOMString optional optional attribute attribute attribute attribute name attribute ? frameElement navigator USVString ); [ DOMString TreatNullAs WindowProxy WindowProxy WindowProxy unsigned features ApplicationCache ; url ; long = ""); target = EmptyString = "", ? ? frames length top parent = "_ ; blank applicationCache ; ; ; ] toate posibilele ", USV = valori scalare Scalar Value Unicode ; s Dr. Sabin Buragaprofs.info.uaic.ro/~busaco void void de fereastră instanțe altei mesaje de plasarea// void DOMString boolean void void cu utilizatorul interacțiune // Window Window // funcții de pentru evenimentelor tratarea stabilirea // html.spec.whatwg.org/multipage/ e.g. postMessage postMessage print alert alert , onplay confirm confirm implements implements ( (); (); DOMString ? prompt ondrag ( optional ( ( optional optional any any ( WindowEventHandlers GlobalEventHandlers optional optional onprogress message message message DOMString WindowPostMessageOptions sequence – DOMString DOMString se pot înlocui cu
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Control asupra ApplicationCache cache - ului navigatorului Web
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco politica fig.jpg html cache.html index.html # # MANIFEST CACHE /fallback.html FALLBACK: # con news.html NETWORK: # http://www.penguin.info/tux.css img Aplica preia resurse referit /logo.png 5 ț .css inut pentru fiecare fiecare pentru pagină Web a aplicației de de ție Web ție minunată ( ( pe alternativ proprii caching prin re ț ea
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco opera Control starea ț ii asupra cache asupra - ului cache ApplicationCache cache este - ului furnizat - : ului update() update() abort() swapCache() navigatorului ă de atributul status Web
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco the Web platform.the Web (Thisis a processlong thattakes manyyears.) actualmente, această tehnică e considerată tehnică această actualmente, Control Using any of theofflineWeb application features at this time conform “ This featureis inthe process of is highly discouraged.Useservice workers instead. html.spec.whatwg.org/ asupra ApplicationCache cache - ului multipage navigatorului being being removed / offline.html#offline învechită from Web ”
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco html.spec.whatwg.org/multipage/ Specificarea setTimeout setInterval WindowTimers contoarelor () () timers clearTimeout clearInterval - and - user de () - prompts.html#timers () timp
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco “ Timers can becan nested; after Timers observații ( “ This API does not guarantee that timers will run exactly exactly run will timers that guarantee not does API This the interval is forced to be at least four milliseconds. four to beatleast is forced the interval on schedule. Delays due to CPU load, other tasks, due to load, CPU Delays schedule. on Specificarea HTML Living Standard HTML are to beexpected. WindowTimers contoarelor 5 such nested timers, such , 26 ” de noiembrie noiembrie timp however, 2019 etc ” , ):
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco html.spec.whatwg.org/multipage/ Navigator NavigatorOnline NavigatorConcurrentHardware NavigatorContentUtils NavigatorCookies NavigatorPlugins interf Starea NavigatorID Language ața Navigator – ș i starea – propriet – – preferințe lingvisticepreferințe aleclientului – informații privindinformații identitatea system managementul managementul – online manipularea conținuturilor manipularea având s - state.html#system ăț – / ile arhitectura arhitectura offline browser ub sistemului - interfe plugin a navigatorului cookie - - state ului ț hardware - e - urilor and le: - urile - capabilities
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface }; [Exposed=Window] readonly readonly readonly readonly readonly readonly mixin attribute attribute attribute attribute attribute attribute attribute Starea NavigatorID DOMString DOMString DOMString DOMString DOMString DOMString readonly ș i propriet { attribute attribute userAgent product platform appVersion appName appCodeName ; ăț ; DOMString ; ; ile ; ; sistemului // constanta"Gecko" // // constanta" // constanta" // vendor ; Netscape Mozilla " "
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco browser - Starea ul implicații asupra intimității intimității asupra ( implicații ar trebui să informații cât mai ar trebui ofere puține datele furnizate pot fi folosite fifolosite pot datele furnizate la identificarea la identificarea utilizatorului ș i propriet remarcă: ăț ile sistemului privacy )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco that Web authors are forced to work around. to work are forced authors that Web “ In certain cases, despite the best efforts of the entireof the despiteefforts thebest certain cases, In se presupune că versiunile viitoare/necunoscute că versiunile se presupune industry, detectarea clientului trebuie întotdeauna întotdeauna trebuie clientului detectarea să ia actuale în considerație versiunile Starea vor fi compatibile cu cea cea curentă cu fi compatibile vor Web browsers have bugs and limitationshave and browsers bugs Web ș i propriet remarcă: ăț ile sistemului ” (W 3 C, 2019 ) Dr. Sabin Buragaprofs.info.uaic.ro/~busaco pot fi manipulate manipulate pot fi via interfața implicit, într implicit, registerProtocolHandler bitcoin ce pot fi gestionate de navigatorul Web Web gestionate de navigatorul fi ce pot Starea protocoalele și/sau tipurile de date și/sau tipurile protocoalele sms irc geo smsto - ș un URI se permit scheme se scheme URI precum: permit un i mailto propriet ssh magnet tel () registerContentHandler() urn ăț ile webcal mms Navigator sistemului news xmpp ContentUtils nntp sip
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco application pot fi manipulate manipulate pot fi via interfața text/ / x ce pot fi gestionate de navigatorul Web Web gestionate de navigatorul fi ce pot - Starea www cache image de date și/sau tipurile protocoalele tipuri tipuri - form - manifest manifest / gif ș Media - urlencoded image i propriet text/ / jpeg - Type css image application text/ ăț (MIME) uzuale: (MIME) ile / html png Navigator sistemului text/ image / xhtml+xml plain / svg+xml ContentUtils text/ application xml / xml
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface interface [ enum }; Exposed void void void void void readonly attribute readonly replaceState pushState forward back go ScrollRestoration (optional long delta = History = ( ScrollRestoration attribute any attribute unsigned long Window HTML Living Standard Living HTML (); Managementulistoricului navigării (); html.spec.whatwg.org/ (any data, { ] (any data, state { "auto", "manual" { "auto","manual" }; DOMString scrollRestoration ; DOMString 0 ); length title, optional multipage , ; title, optional 26 ; noiembrie /history.html USVString USVString 201 ? url ? 9 url ) = null); = null);
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco www.quirksmode.org/dom/events/tests/hashchange.html la traversarea istoricului, pot fiemise la traversarea pot istoricului, evenimentele: Managementulistoricului navigării bestvpn.org/html exempl pagetransition hashchange e popstate demonstrativ 5 demos/ history e : /
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco adi o unică instanță a unui obiect obiect detip instanță a unui o unică Managementulistoricului navigării țional href origin , fiecărui obiect , obiect fiecărui proprietăți (mutabile): (mutabile): proprietăți pathname protocol protocol search host Window hostname hash i se asociază i seasociază Location port
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco alte adi o unică instanță a unui obiect obiect detip instanță a unui o unică detalii Managementulistoricului navigării țional a s sign la , fiecărui obiect obiect , fiecărui developer.mozilla.org/Web/API/Location () replace metode: metode: () reload Window () toString i se asociază i seasociază Location ()
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco html.spec.whatwg.org/multipage/ developer.mozilla.org/Web/API/ stocarea î n vederea fragmentelor efectu Drag & drop ă rii de date opera interaction.html#drag HTML_Drag_and_Drop_API ț iilor î n diverse drag & drop formate - and , - drop
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco ce dac un element HTML un element stocheaz ă o are func ata ă ț ie ș datele at de atributul tratare ce poate Drag & drop vor a draggable fi fi evenimentului transferate surs ă pentru ="true" c ă ș drag & drop & drag dragstart tre i are destina definit ț ie ă
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco se permit diversese permit opera developer.mozilla.org/Web/API/ datele realizarea de un mutare copiere de Drag & drop transferat obiect unei ț ( ( ii move copy – leg DataTransfer precizate ă linkMove copyLink turi vor DataTransfer fi ( link stocate ) ) de , ) etc. effectsAllowed :
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco e.g. atributul destinatarul , string:text sau dropzone / file:image/jpeg plain al opera datelor pentru a accepta orice șir dea caractere orice accepta pentru a c ț Drag & drop iunii ă rui ce pentru un fișier fișier un JPEG pentru vor valoare drag &drop drag fi acceptate specific va avea ă tipul definit MIME
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco pentru a oferi un a oferi pentru evenimentele evenimentele ținta operației ținta operației o soluție alternativă: alternativă: o soluție dragenter Drag & drop feedback drop și, eventual, și, eventual, vizual utilizatorului vizual poate trata poate dragover
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco evenimente Drag & drop dragenter dragover dragen drop ce pot fi fi ce pot tratate: d
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco pentru exemplificări exemplificări și altedetalii, a se pentru www.tutorialspoint.com/html dev.opera.com/ www.html bestvpn.org/html 5 rocks.com/tutorials/dnd/basics/ Drag & drop articles / view 5 5 demos/drag/ /html /drag 5 _drag_drop.htm - and - consulta drop / :
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco pe platformepe mobile suport incomplet incomplet suport
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Exist ă alte specifica ț ii/ ini ț iative de interes ?
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco pe detalii define baza html.spec.whatwg.org/multipage/web disponibil ș protocolului te un API abstract abstract un API e î ( 26 WebSocket n de transfer noiembrie specificația pentru 201 API WebSocket HTML Living Standard Living HTML transmiterea 9 ) - sockets.html – RFC de date 6455
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco la nivel ulterior,mesaje deserverde arecepționa, pentru un program program un tip răspuns în modasincron( răspunsîn tip trimite mesaje de tip cerere spre o aplicație aplicație mesajede o invocată trimite cererespre tip succesor al abordării alabordării succesor JavaScript WebSocket rulat de navigatorul Web poate Web poate de navigatorul rulat Comet event API – - ReverseAjax driven responses )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface [ Exposed readonly readonly attribute attribute attribute readonly readonly short CLOSEDunsigned const short CLOSINGunsigned const unsignedconstshort OPEN short CONNECTINGunsigned const readonly c onstructor optional ( WebSocket =( EventHandler EventHandler EventHandler attribute attribute attribute attribute unsignedlong attribute short unsigned attribute Window,Worker DOMString ( USVString specificați DOMString DOMString USVString : EventTarget or onclose onerror onopen url sequence< ) ] , a url protocol extensions ; ; WebIDL ; ; { bufferedAmount readyState DOMString // // // = = = = ; a datelor p datelor a vizând func 3 2 1 0 ; ; ; ; ; // a constante ț ii deii interfe ; comunicarea >) protocols >) tratare rin ; re ței : starea ț ea a evenim asincronă = [] conexiunii ) , entelor
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco } void void void void attribute attribute // void // de studiat și diverse maniere de maniere diverse î nchide send send send send close BinaryType EventHandler rea ( ( ( ( (optional optional (optional short code, unsigned ArrayBufferView ArrayBuffer Blob USVString conexiun data); developer.mozilla.org/Web/API/WebSockets_API binaryType transfer transfer de data); ii onmessage data); data); ; mesaje // { // " ; blob (date) ", " ", arraybuffer USVString " }; " reason);
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco fiecare fiecare se î n recurge transferul regim folosind WebSocket WebSocket full duplex full la schemele datelor un singur are asociat URL un asociat are ( se bidirec URI URI API realizeaz socket ws ț ional : ș i ă wss ), :
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco sock. }; sock. }; sock. }; sock. // var // sock. am// sock. // }; console. console.log("Am ("Socketconsole.log // trimitem asociem cre socket sock = new sock ă close send onerror onmessage onclose onopen î nchis m un m - error ul date func (" (); socket conexiunea Salut a fost deschis, transferul transferul a fost deschis, = function = function ( = function = function ( = function ( ("A ț WebSocket iile = function = function ( ă ri Web survenit recep de hibernale - tratare ul ț ev ev a ev ionat fost ) { ) ) { (" ) { o ev ws://www.undeva.info/ a eroa ! mesajul ) { ) evenimentelor î :) nchis "); re … ; cod de stare: " + " de stare: cod ; "); "); datelor : " + : ev. maniera poate începe data transfer al ); "); ev. general … code datelor ) ă de
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco sock. var // la // }; setInterval new actualiz }, if ( sock. sock = fiecare 33 sock. onopen WebSocket ); send ă bufferedAmount rile dedate 33 (function() (function() { = function = function () { ms ( oferaDate , (' dac ws://joc.undeva.org: ă vor re ()); ț eaua fi = trimise = = ofer 0 ) ă cu ratade ce suficient ofer n 1974 - au ă num 0 fost /updates ă o l ă actualizare transmi ăț rul ime de '); de band octeți ș i î nc ă ă Dr. Sabin Buragaprofs.info.uaic.ro/~busaco sock. // implementarea unuicomutator pentru a controla o veioză // }; } } else if( if ( exemplu încontextul lamp.turn lamp event. onmessage . turnOn ev. data www.websocket.org/aboutwebsocket.html Off(); data == == ' (); www.websocket.org/demos.html exemple exemple și resurse deinteres: = ( == == ' html on ev ') { off 5 ) => ) => { IoT demos.com/web ') { ( Internet of Things - socket ):
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco I nstrumente HornetMQ la nivel Nchan W de server deepstream ebsocketd de , Jetty (modul NGINX) NGINX) (modul programare de considerat și , MigratoryData – independente independente de limbaj: – – websocketd.com deepstream.io pentru – nchan.io , websockify WebSocket
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Node.js: Node.js: I nstrumente C/C++: Java: C#: Netflux Python Mongoose Embedded WebServerEmbedded Library Mongoose ASP.NET Atmosphere PHP: QtWebSockets la , : nodejs nivel de Autobahn Ruby phpws programare SignalR de server : - websocket Faye , , Scarlet Ratchet , Tornado , - , websocket websocket µ WebSockets – (pentru Android) (pentru , specifice: , Sandstone pentru S , ocket websockets - manager . IO WebSocket , SockJS - node ,
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco I Java API for Java API Tyrus nstrumente la github.com/ nivel (Java), Arduino de client WebSocket ZTWebSocket Web de facundofarias WebSocket programare - socket (aplicații) (JSR - js (Objective (C++), , /awesome 356 clasa – API pentru ) , Beast WebSocket libwebsockets - uri/ - - websockets C), (C++), biblioteci WebSocket … ( Dart (C), : ),
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco ofer vezi navigatorul ă suport WebSub și dezvoltare Pub RPC pentru Web Web (W /Sub ( 3 Remote WebSocket C, poate diverse 2018 ( Publish a aplica fi Procedure + ) considerat – paradigme paradigme de comunicare: www.w / ț Subscribe iilor API Internet 3 Call .org/TR/websub/ platform ) ) ă de
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco de studiat exemple folositoare: software exemple de instrumente și WAMP Autobahn.js crossbar.io crossbar.io WebSocket – wamp Web Application Messaging Protocol Messaging Application Web - – proto.org – router client WAMP client API WAMP
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Dr. Sabin Buragaprofs.info.uaic.ro/~busaco a unui tratarea recepționării datelor provenite de laserver provenite datelor recepționării tratarea manieră EventSource flux flux continuu de la server se realizează se realizează via evenimente DOM standardizat fără închiderea fără închiderea conexiunii de date API spre ă ( de Server client – transmitere în format în format ( - push Send Events text/event events prin HTTP prin ) - ) stream – Dr. Sabin Buragaprofs.info.uaic.ro/~busaco detalii html.spec.whatwg.org/multipage/server EventSource disponibil e î ( 26 n specificația specificația API noiembrie ( Server 201 HTML - Send Events 9 ) - 5 sent Living Standard Living - events.html )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface interface }; void attribute attribute attribute // readonly const const const stării conexiuniiale // valori readonly readonly constructor evenimente de rețea ce pot tratate fi rețea ce de evenimente close unsigned short unsigned short unsigned short unsigned EventSource EventHandler EventHandler EventHandler attribute attribute unsignedshort attribute attribute (); ( optional USVString specificați boolean USVString EventSourceInit : CLOSED OPEN CONNECTING EventTarget onerror onmessage onopen url , = url withCredentials a 1 ; ; = ; WebIDL ; 2 readyState ; ; { = eventSourceInitDict 0 ; a interfe ; ; ței = {});
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco flux. flux. // const // flux. trat instan onerror onmessage onopen ă flux =newflux github.com/ m ț iem evenimentele pentru un exemplu un a sestudia: pentru complet, = ( = () = () o surs ev => = ( EventSource ) mdn => {}; ev ă console.log de date ( de ) / => dom // raportarea erorilor raportarea // console.log - examples/tree/master/server un (" ("Am // flux) news deschis (" .info/web/today D ate de la server: " + + " server: de la ate fluxul "); "); "); - sent ev. - events data );
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco developer.mozilla.org/Web/API/Server resurse de interes: - sent_events / Using_server - sent_events
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco ofer html.spec.whatwg.org/multipage/web ă API - î uri ntre pentru diverse Web Messaging realizarea contexte transferului de navigare - messaging.html de mesaje
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco mesajele documentele HTML documentele sau chiar dacă aparțin unor domenii Internet diferite unordomenii Internet dacăaparțin chiar de la de tip pot pot alte mesajele pot conține obiecte obiecte conține mesajele pot proveni documente File Web Messaging Blob 5 de via la server, pot transmite date unul altuia, date transmite altuia, pot unul , FileList via , canale ArrayBuffer de socket comunica etc. - uri Web ț ie
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco a unui datele mesaj se efectuează se efectuează cu privind sunt transmiterea specificate Web Messaging evenimentul metoda unui de interfa postMessage de mesaj recep ț a MessageEvent ț ionare ()
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco constituit un interfa canal decanal vezi din ț a ș Web Messaging i MessageChannel 2 interfa porturi transmitere ț a ( MessagePort surs ă de specific ș i mesaje destina ă ț ie )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface interface typedef }; attribute detransmitere erorile tratează // attribute // void void void void // plaseaz trat close start postMessage postMessage ează sequence< optional optional sequence
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco permite comunicații simple între contexte de navigare simple contexte comunicații între permite (ferestre, expedierea expedierea se face via datelor metoda developer.mozilla.org/Web/API/ recepționarea datelor se datelor realizează recepționarea tab ( tratând evenimentul evenimentul tratând i.e. - Broadcast Channel API uri pagini ale aceluiași sit Web) aleaceluiași pagini , < iframe > - uri) având Broadcast_Channel_API onmessage aceeași origine aceeași postMessage ()
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco developer.mozilla.org/Web/API/ developers.google.com/web/updates/ Channel_Messaging_API exemplificări: 2016 / 09 / broadcastchannel / Using_channel_messaging
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco (în loc de) pauză locde) (în
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco script rulat independent de nu î interac n fundal nu are acces la arborele DOM laarborele nu areacces conceptul ț ioneaz Web Workers – î n alte accep de ă direct cu direct worker programe ț iunea Web utilizatorul daemon JavaScript : - ilor Unix – Dr. Sabin Buragaprofs.info.uaic.ro/~busaco script codul mediul rulat independent de fiind de î n fundal execu rulat conceptul ț concurent ie Web Workers – a î n unui alte accep de worker programe worker / paralel ț iunea e Web , daemon complet î JavaScript n mod : - asincron ilor separat Unix , – Dr. Sabin Buragaprofs.info.uaic.ro/~busaco se ofer HTML Living Standard Living HTML html.spec.whatwg.org/multipage/workers.html programelor ă un API un pentru Web Workers JavaScript instan ( 26 ț ierea noiembrie noiembrie de tip ș i worker manipularea 2019 )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco un specificat prezint worker ă – un de desemnat Web Workers domeniu interfa ț a de global de global WorkerGlobalScope interfa ț execu a Worker ț ie –
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface interface [ }; Exposed WorkerGlobalScope attribute attribute attribute attribute attribute attribute attribute // void readonly readonly readonly tratarea SharedWorkerGlobalScope importScripts de obiecte specifice: WorkerGlobalScope = Worker EventHandler EventHandler EventHandler EventHandler EventHandler OnError attribute attribute attribute attribute evenimentelor ] EventHandler WorkerNavigator WorkerLocation WorkerGlobalScope ( USVString are rol declasă bază instanțepentru onunhandledrejection onrejectionhandled ononline onoffline onlanguagechange : EventTarget ... DedicatedWorkerGlobalScope onerror ; urls ; , ); navigator location ServiceWorkerGlobalScope ; self ; { ; ; ; ; ; // contextulnavigării// originea // worker - ului ,
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco o mulțime de proprietari ( o mulțimede proprietari un obiect un obiect de tip Document Document WorkerGlobalScope Web Workers sau owner WorkerGlobalScope set ) desemnați ) de obiecte are asociată:
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco ce poate fi populată cu obiecte de tip cuobiecte fi populată ce poate o mulțimede un obiect un obiect „ lucrători WorkerGlobalScope Web Workers ” ( worker set are asociată: WorkerGlobalScope ) – inițial, inițial, vidă –
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco o stare a conexiunii ( o stareaconexiunii HTTPS un obiect un obiect o politică de securitate (CSP desecuritate o politică WorkerGlobalScope un nume un nume un tip o adresă – Web Workers – type name – ( url classic (șir de caractere) "none" are asociate, de are asociate, asemenea: (inițial, (inițial, – Content sau , "deprecated" module null Security ) ) , "modern" Policy ) )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interac ț prin intermediul intermediul prin iunea vezi se „ legat realizează dedicated worker interfa Web Workers ” de porturi ț creatorul a via MessagePort canale de comunicație de canale comunicație lor lui de mesaje
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface [Global=(Worker, }; attribute survenite erorile tratează // attribute fi poatece procesatapariția unuimesaj tratează // void void void [Replaceable] theprocessmain theyand can communicateonly withit. close postMessage postMessage optional optional sequence
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco …
Re "> zultatul 2 1 "> "> Al doilea numărAl doilea numărPrimul number number înmulțirii mdn – înmulțirea numere: a două /simple 2 1 " value=" " value=" " : 0
: : -- - > : web 0 0 "> "> - workerDr. Sabin Buragaprofs.info.uaic.ro/~busaco nr }; nr const let let let // Program principalcareva recurgelaun }; lucrator }; console.log re console.log lucrator console.log lucrator 2 1 re nr nr z . . onchange onchange ult z 2 1 ult lucrator at = = . onmessage . at document.querySelector document.querySelector . . textContent postMessage postMessage = document.querySelector ('Mesa ('Mesa ( ' = function = function = new Mes aj j expediatj lucrătorului expediatj lucrătorului = function primit de lalucrător Worker = e ([ ([ v nr nr () { () { . data 1 1 .value, .value, (" ; worker.js (e v ('# ('# ) { ) nr nr number number 2 2 (' .value]); .value]); .result "); // // date primite de la // // vor fi ceplasate documentul Web în // // s // s '); '); '); worker // - - 2 1 a modificat valoareacâmpului alII a modificat valoarea câmpprimului instanțiem ’ '); '); ); // // // preluăm câmpurile din formular se trimitdate se trimitdate pentru procesareadatelor un „ worker lucrător worker ” dedicat - ului - lea
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco onmessage Codul// } } else { } else if ( let tablou ca fost transmise programul au principal de la datele// console.log postMessage console.log postMessage console. isNaN rezultat - sursă al lucrătorului: lucrătorului: al worker.js sursă (re error = (e = e z (' ult (' Mes v Trimitem programului principal răspunsulTrimitem cu mesaj v ( (' (' . at ` data ) Furnizați Furnizați Parametri incorecți Re => )) )) { aj z recepționat de la programul la principal recepționat de [ { ult 0 ] * e ] atul 2 v . înmulțirii numere data [ 1 ]; '); '); : ${rezultat}` ); '); ');
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco are un nume ce desemnează cod cedesemnează unnume are browser, elemente elemente browser, poate fi utilizat de toate procesele având (rulând pe) pe) având (rulând detoate procesele poate fi utilizat aceeași aceeași origine comunicând cu acestea cuacestea comunicând Web Workers – < shared iframe tab - uri > worker sau alți lucrători partajați partajați sau alți lucrători ale aceleași instanțe de JavaScript partajabil partajabil – , Dr. Sabin Buragaprofs.info.uaic.ro/~busaco }; interface [Global=(Worker, via evenimente attribute attribute // void [Replaceable] are asociate URL o origineșiun și va recepționa mesaje trat close area Shared EventHandler apari (); un readonly WorkerGlobalScope ției „ Shared lucrător unei conectări connect Worker), on attribute attribute connect ” partajat ( partajat pentru fiecare pentru conexiune în parte Exposed= DOMString la ; : worker WorkerGlobalScope shared Shar din partea unui client din parteaunui name edWorker ; worker // opreșteexecuția // // nume// specific ] { )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Dr. Sabin Buragaprofs.info.uaic.ro/~busaco cod JS responsabil cu accesarea accesarea cod JSresponsabil cu unor serviciiexterne ( Candidate specificație specificație W www.w Recommendation (disponibile prin Internet) prin (disponibile 3 Web Workers .org/TR/service service worker service 3 C încursdefinalizare , 19 - workers/ noiembrie noiembrie 2019 )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco between things) things) “ Service workers essentially act as act as Serviceworkers essentially (when available). They are intended to (amongst other areintendedThey to(amongst (when available). intercepting networkintercepting requests, action based on whether the network is available, whether the networkis on based action developer.mozilla.org/Web/API/ enable the creation of effective offline experiences ofeffective creation enable the W eb updated assets reside on theserver. resideupdated assets applications, and the browser and theand thenetworkand browser applications, Web Workers service worker service and appropriate taking Service_Worker_API proxy servers ” that sit and and
Dr. Sabin, Buragaprofs.info.uaic.ro/~busaco ce va răspunde la evenimente specifice origini unei specifice la evenimente varăspunde ce localStorage fiind asincron, opțiunile sincronealeAPI opțiunile fiind asincron, comunicarea se comunicarea reprezintă un reprezintă un și XMLHttpRequest Web Workers „ realizează realizează service worker service lucrător ” – exclusiv prin HTTPS exclusiv fișier nu pot fi utilizate pot nu JavaScript - urilor –
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco developers.google.com/web/fundamentals/primers/service ciclul de viață lui ciclul al service worker - workers/
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco la început, trebuie înregistratprin metoda trebuie la început, care întoarce un obiect de tip obiect un care întoarce ServiceWorkerContainer. Web Workers service worker service register Promise ()
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco if (' if } }); window.addEventListener de tip codulJS și înregistrează se resursei laîncărcarea// }); ( }, navigator. serviceWorker .then console.log er console.log(' oare reg. ( (reg) scope ) serviceWorker => => { (' ); ServiceWorker ' in navigator) { in ' ServiceWorker { // // succes // se indică și domeniul de vizibilitate ( vizibilitate domeniul de și indică se // // a apărut o eroare a apăruto . register (' load – ', () // există suport disponibil în există// – eroare survenităeroare înregistrat cu succes cuînregistrat (' => /s ervice { … - w :( orker : ', : . js er ') oa : ', r e service ); browser scope worker ) ?
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco politica destocare în politica tratându după înregistrare, se va instalacodul înregistrare, după - se evenimentul se evenimentul Web Workers service worker service cache install a resurselor ce vor fi folosite folosite ce vor fi a resurselor și, controlând opțional, „ lucrătorului ” –
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco controlul controlul care poate include obiecte de tip include obiecte care poate memoriei memoriei developer.mozilla.org/Web/API/ developer.mozilla.org/Web/API/Cache cache Web Workers service worker service se realizează se realizează via CacheStorage Cache CacheStorage
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco this ]; var }); ); ev. '/ '/script '/styles/ '/', images caches. . . url waitUntil then addEventListener - add uriCache s stil ((cache) /main.js' / open logo () . css ( addAll . // se așteaptă până când resursele sunt plasate în sunt plasate resursele cândpână așteaptă se // png ('v ', metode oferite de interfața = [ , => 1 ' ') cache. () () put() (' install addAll match ', function ( url () - // ale resurselorstatice // ale Web adreselor lista // // prima versiune a // prima versiune în pot stocatefi care// uriCache matchAll ( ev ) { )) () Cache keys () cache : delete cache - ului creat ului cache ()
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco când se solicită o resursă aflată sub controlul controlul când sesolicită o resursăaflată sub pentru fiecare fiecare pentru eveniment fie fie de ladistanță poate oferi conținutul solicitat din solicitat (fie conținutul poate oferi evenimentul evenimentul fetch Web Workers – service worker service e.g. este emis este emis de fiecare dată , invocând un serviciu Web) invocând un , fetch recepționat, recepționat, „ „ cache lucrătorului lucrătorul , ”
” Dr. Sabin Buragaprofs.info.uaic.ro/~busaco this evenimentul tratează se// }); ); ev. ) caches. developer.mozilla.org/Web/API/ .then } . respondWith addEventListener return fetch } if (response){ return response; developers.google.com/web/fundamentals/primers/service ( (response) match ( ( ( ev.request ev.request => (' exemplificări complete: fetch { fetch ) ); ', ( // se execută un execută se // // da ( // // resursa solicitată există deja în deja există solicitată resursa // ev Service_Worker_API ) => cache hit cache { ) fetch / Using_Service_Workers () () real - workers/ cache ?
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco fir deexecuție ( main principal principal thread ) navigatorWeb onmessageerror postMessage onmessage Service cod JS de tip JScod ☁ cache Worker
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco jakearchibald.github.io/ resursede interes: isserviceworkerready /resources.html
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco cu instrumentele cu oferite de inspectarea inspectarea browser worker pentru pentru – about:debuggin - ilor dezvoltatori Web g
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco a unui depanarea coduluiJS de navigatorul Web worker instanțiat
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco tutoriale + exemple de practicăbună ( serviceworke.rs Mozilla ):
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco ofer ă mecanisme sub formade la nivel de Web Storage de client( stocare perechi (persistent cheie browser — valoare ) ă ) a ) datelor
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco html.spec.whatwg.org/multipage/webstorage.html HTML Living Standard Living HTML recomandare a Consorțiului Web aConsorțiului recomandare specificația specificația cea mai recentă: www.w Web Storage 3 .org/TR/webstorage/ ( 26 noiembrie noiembrie ( 201 2019 6 ) )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interfa ț a Storage de forma ofer Web Storage ă acces cheie la olist — valoare ă de perechi ( itemi )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface interface } void // deleter // setter creatorvoid // getter // DOMString // readonly // m asignarea consultarea cheie ș eliminarea tergerea ă rimea clear DOMString void Storage pentru attribute attribute long unsigned (); ? spa spa de removeItem unui key unui metodele ț acces valori iului ț { iului (unsigned long (unsignedindex); se consideră ca fiindatomice item getItem setItem item de de la date la pentru stocare stocare ( DOMString ( DOMString ( setItem DOMString un item length () key); key); și key, ; removeItem DOMString value); ()
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco maniera via atributele de stocare sessionStorage Web Storage a itemilor ș se i localStorage precizeaz ă
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco (suport pentru sesiuni) pentru (suport stocare nepersistentă maniera via atributele de stocare sessionStorage Web Storage a itemilor ș se i localStorage precizeaz ă
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco maniera via atributele de stocare sessionStorage Web Storage a itemilor alternativăla ș se i localStorage precizeaz cookie ă - uri
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface interface }; readonly readonly readonly readonly readonly StorageEvent attribute attribute attribute attribute attribute attribute laemiterea evenimentului conduce orice modificare orice modificare a zonei de stocare Storage DOMString DOMString DOMString DOMString : Event { : Event ? Web Storage ? ? ? storageArea url newValue oldValue key ; ; ; ; ; storage
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco document.querySelector id=" eveniment editor . . setItem setItem " placeholder=" ) { (' (' // la // (' data valoare #editor stoc fiecare ', (new Date ()). Date ', (new ă m con ', '). this. addEventListener Î ncepe eliberare ț inutul value ț i s ); ă getTime ș a i tasta tastei data edit ț i ... … (' ()); keyup "> ă rii ',
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco (pot fi șterseexplicit de utilizator sau (pot prin program) față față de nu au un timp timp de viață stabilit un nu au cookie - uri, datele stocate în datele stocate uri, Web Storage a localStorage - priori
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco via un program ce le transferă explicit prin explicit ce letransferă via unprogram sunt disponibile nivel local disponibile numai la sunt serverul datele memorate datele memorate în Web nu le poate accesa accesa direct decât nulepoate Web Web Storage localStorage – în browser HTTP(S)
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco (navigatorul Web poate impune o anumită oanumită valoare, poate impune Web (navigatorul pentru stocarea locală a datelor cu adatelor locală stocarea pentru nu este precizată o dimensiune odimensiune precizată nu este maximă eventual ulterior modificată de modificată utilizator) ulterior eventual Web Storage localStorage
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco github.com/ de explorat softvar Awesome /awesome Web - web Storage - storage
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco via un API asincron, inclusiv pentru pentru asincron, inclusiv via unAPI suport ( de W Indexed Indexed Database API www.w Indexed Database API 3 stocare C RecommendationC 3 .org/TR/IndexedDB/ de datela nivel , 201 2.0 obiectual WebWorker 8 )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco fiecare baz obiectele ă de date are Indexed Database API de identificate stocare asociat compun prin ă o nume versiune baze de date ( num ă r >= 0 ) Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface [ }; Exposed attribute attribute attribute attribute attribute void IDBTransaction void IDBObjectStore readonly readonly readonly close deleteObjectStore interfa IDBDatabase =( EventHandler EventHandler EventHandler EventHandler attribute attribute attribute long unsigned attribute storeNames Window,Worker optional (); ță transaction createObjectStore modelând oconexiune la baza de date, DOMStringList DOMString IDBObjectStoreParameters : , optional , rezultândo tranzacție EventTarget onversionchange onerror on onabort ( DOMString )] close (( DOMString ; ; ; IDBTransactionMode objectStoreNames version name ( { DOMString name); ; ; or sequence< ; // tratează actualizările tratează // erori posibile tratează // conexiunii închiderea// operații unei abandonarea// option name, ; s mode = " mode = ); DOMString // stocare // // ștergere // readonly >) >) "); Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface [ }; Exposed attribute attribute attribute attribute attribute void IDBTransaction void IDBObjectStore readonly readonly readonly close deleteObjectStore IDBDatabase =( EventHandler EventHandler EventHandler EventHandler attribute attribute attribute long unsigned attribute storeNames Window,Worker optional (); transaction createObjectStore DOMStringList DOMString IDBObjectStoreParameters : , optional , EventTarget onversionchange onerror on onabort ( DOMString )] close var function (( tranz.db. DOMString db = ; ; { ; IDBTransactionMode keyPath objectStoreNames version name indexedDBSync. ( { DOMString name); ( tranz createObjectStore ; : ' : ; or sequence< ; , id versVeche ', // tratează actualizările tratează // erori posibile tratează // conexiunii închiderea// operații unei abandonarea// autoIncrement option name, open ; s mode = " mode = ) { ) ); DOMString (' (' Agenda Adrese : true } ); }); // stocare // // ștergere // readonly ', >) >) ', 1 , "); Dr. Sabin Buragaprofs.info.uaic.ro/~busaco posed datele ă o sunt cheie ( conform specificației specificației conform ECMA indexate Indexed Database API unic ă de tip , î n sensul Number c ă , fiecare String Script) , î Date nregistrare ori Array
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco ( uzual de valoarea corespunzătoare unui tip dedate tip unui corespunzătoare asemenea , un , a ș a - ș numitei ir propriu de Indexed Database API , o caractere î nregistrare c - ă zis i asocia ă e ob ori te ț ( inut ș record cheii iruri ă prin delimitate delimitate de ( ) key path ECMAScript are o evaluarea valoare ) „ . ” )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface interface IDBRequest IDBRequest IDBRequest IDBRequest IDBRequest IDBRequest IDBRequest IDBRequest IDBRequest readonly readonly readonly readonly readonly IDBObjectStore attribute attribute attribute attribute attribute attribute count get get get get clear delete add put AllKeys All Key (any (any value, optional any key); any optional (any value, (any value, optional any key); optional any (any value, (); boolean IDBTransaction DOMStringList DOMString DOMString (optional (optional any ( (any optional optional [ optional [ (any query { ( query optional query ); any EnforceRange EnforceRange ); ); query query any transaction keyPath name autoIncrement indexNames // specifică maniera de stocare maniera specifică // query ); , ; ; , ] unsigned long count); unsigned ] long count); unsigned ] ; ; // operații privind cheile operații privind // ;
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco }; }; dictionary boolean boolean void IDBIndex IDBIndex indecșiivizând operații // IDBRequest IDBRequest privind cursoarele operații // optional ( optional optional DOMString deleteIndex multiEntry unique IDBIndexParameters createIndex index IDBIndexParameters IDBCursorDirection IDBCursorDirection open openCursor = false; or sequence< ( DOMString ( Key DOMString = false; Cursor ( DOMString (optional any? name); (optional (optional any? indexName DOMString { // folosit pentru precizarea opțiunilor folositpentru// precizarea direction ="next"); direction direction ="next"); direction option name, s query >) >) ); ); keyPath query , , ,
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco }; interface [ Exposed attribute attribute attribute readonly interogării: (" starea în așteptare // readonly readonly readonly readonly IDBRequest =( EventHandler EventHandler Window developer.mozilla.org/Web/API/ attribute attribute attribute attribute ( attribute DOME attribute any , Worker : IDBRequestReadyState IDBTransaction IDBObjectStore EventTarget onerror onsuccess )] xception alte detalii: result ; { pending ? ; ? or ; error // funcții de tratare funcții detratare // a // rezultatul interogării emise interogării rezultatul // // modelează o cerere modelează // IDBIndex ") sau efectuată (" ") sauefectuată ; transaction readyState // eventuala eroare survenită eroare eventuala// IDBRequest or IDBCursor ; ; evenim done )? source ") .
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco; accesul developer.mozilla.org/Web/API/ la get() get() specificați specificați de interfața î nregistr openCursor Indexed Database API getKey ă metode metode utile: ri () se () count getAll openKeyCursor poate () () getAllKeys realiza IDBIndex IDBIndex ș () i () via indec ș i
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco o tranzac se fiecare opera realizeaz readonly ț ie ț iile tranzac poate Indexed Database API asupra ă , prin readwrite fi ț ie deschis intermediul are datelor asociat , ă (inițiată) î ă (inițiată) versionchange din ă baza tranzac o conexiune de date n modurile ț iilor :
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface interface }; attribute attribute attribute attribute // tratarea evenimentelor void IDBObjectStore readonly readonly readonly tranzacției: a modulde efectuare // readonly abort IDBTransaction EventHandler EventHandler EventHandler attribute attribute attribute attribute attribute (); objectStore DOMError IDBDatabase IDBTransactionMode DOMStringList onerror oncomplete onabort : EventTarget ( DOMString ; ; ; readonly { objectStoreNames error db mode name); name); ; , ; readwrite ; // include eroarea apărută includeeroarea // , versionchange ;
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface interface }; attribute attribute attribute attribute // tratarea evenimentelor void IDBObjectStore readonly readonly readonly tranzacției: a modulde efectuare // readonly abort IDBTransaction EventHandler EventHandler EventHandler var var var var attribute attribute attribute attribute attribute (); loc loc = adr tran objectStore atie DOMError IDBDatabase IDBTransactionMode DOMStringList = t = adr. db. ran = onerror oncomplete onabort adr. : transaction add . EventTarget objectStore ( get DOMString ( { ; ; ( nume 1 ; ); ); readonly { (); objectStoreNames error : ' db mode (' name); name); // // Copou Adrese ; loc crearea , ; readwrite ; // include eroarea apărută includeeroarea // atie ', '); . numar nume unei , versionchange ; tranzac : ' ======' 11 ' }); Copou ț ii ' Dr. Sabin Buragaprofs.info.uaic.ro/~busaco via iterarea IDBCursorDirection valorile unui direc num Indexed Database API ț ă iei r de de : next î parcurgere nregistr , nextunique ă ri se face via un sunt , prev specificate specificate , prevunique cursor
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface interface [ }; Exposed void void void IDBRequest IDBRequest readonly readonly readonly readonly continuePrimaryKey continue advance IDBCursor =( attribute attribute any attribute any attribute attribute ( Window developer.mozilla.org/Web/API/ delete update ([ (optional key); (optional any EnforceRange , IDBCursorDirection IDBObjectStore (); { Worker (any value); (any value); primaryKey key (any key, any (any key, ; )] ] unsigned long count); long count); unsigned] ; or IDBIndex direction primaryKey // actualizarea valorilor actualizarea // // cheia primară cheia// // cheia // ) ; source IDBCursor // direcția de iterare // direcția de ); ; // sursa datelor sursa//
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco TransactionInactiveError NotFoundError AbortError UnknownError excepții preluate de laDOM: excepții preluate SyntaxError Indexed Database API TimeoutError InvalidStateError excepții excepții specifice: ConstraintError DataCloneError ReadOnlyError QuotaExceededError InvalidAccessError DataError VersionError
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco www.smashingmagazine.com/ pentru detalii pentru și exemplificări, a se experimenta: developer.mozilla.org/Web/API/ developers.google.com/web/ gist.github.com/ ( exemple specifice Progressive Indexed Database API JamesMessinger 2018 / 11 Web /guide IndexedDB_API ilt / pwa Applications - vizând PWA /a pwa / working 0 d 6389 - progressive a - / 5 with Using_IndexedDB detalii detalii într d 0 curs viitor e - 3 indexeddb ) a - 24814 web - applications/ b - un
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Indexed Database API
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco asincron set de API al bazelor www.w specifica Web SQL Database - uri 3 de date la .org/TR/webdatabase/ pentru ț ie abandonat managementul nivel de viaSQL client ă !
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco server. var var new de date Date demo Date pe ce baza ) { ) valoare ( efectueaz cheie 1 existente cheii ], date[], ', " , 10240 valoare (comanda e "+" sau " sau(comandae "+" ă 2 ]); ]); }); opera ); ); '); '); la ) VALUES (?, ?)', VALUES(?, ) // // nivel baza conexiunea ț ii asupra de client de date de - ") cu Dr. Sabin Buragaprofs.info.uaic.ro/~busaco dar implementată dar implementată de unelenavigatoare Web Web SQL abordare demodată API ,
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco specifica suit ț ie ă developer.mozilla.org/ de API W 3 C î n - www.w uri stadiu pentru File API 3 .org/TR/FileAPI/ de ciorn manipularea docs ă /Web/API/File ( 11 septembrie septembrie fi ș ierelor 2019 ) Dr. Sabin Buragaprofs.info.uaic.ro/~busaco FileList XMLHttpRequest FileReader File Blob – – lista unor fișiere, via fișiere, eventual lista unor API consultarea informațiilor fișier vizând un informațiilor consultarea – - consultarea datelor consultarea binare imutabile ul – , se poate folosi în conjuncție cu înconjuncție se poate folosi citirea dintr citirea datelor postMessage interfețe interfețe de interes: File API , drag drag & - drop un , …
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface interface readonly // readonly = short DONEunsigned const const short EMPTYunsigned const = // void void void void void // coduri metode rezultatul abort readAsDataURL readAsText readAs readAsArrayBuffer unsigned= short LOADING FileReader de stare attribute attribute ( attribute short unsigned de (); ob BinaryString citire ț inut (Blob asincron : File : DOMString EventTarget (Blob blob); blob sau (Blob blob); (Blob blob); (Blob blob); ă , optional , Blob 2 or 0 ; ; { ArrayBuffer 1 readyState ; DOMString ; )? result encoding ; );
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco interface interface readonly // readonly = short DONEunsigned const const short EMPTYunsigned const = // void void void void void // onloadstart coduri metode rezultatul abort readAsDataURL readAsText readAs readAsArrayBuffer unsigned= short LOADING FileReader de stare attribute attribute ( attribute short unsigned de (); ob BinaryString citire ț inut on (Blob evenimente tratate: fi ce pot asincron progress : File : DOMString EventTarget (Blob blob); blob sau (Blob blob); (Blob blob); (Blob blob); ă , optional , Blob on 2 or 0 ; ; load { ArrayBuffer 1 readyState ; DOMString on abort ; )? result on encoding error ; onload ); end
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco developer.mozilla.org/ capturarea de imagini de la capturarea în conjuncție cu în conjuncție github.com/ html diverse exemplificări: 5 demos.com/file Using_files_from_web_applications File API coremob drag drag & /camera - api drop Webcam /
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco Web Storage API Web Storage File Application Cache Application & asupra Web Web SQL Directory Entries API Entries Directory Privire inițiative inițiative neoficiale: stoc cookie – : specificație specificație abandonată localStorage I ă ndexedDB File APIs rii de - uri – la ansamblu via clasice nivel Service și Cookie Cookie APIStore + de client sessionStorage Worker
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco partajarea conținutului curent la o destinație la odestinație specifică curent conținutului partajarea File acces acces asincron ladatelestocatede and acces acces la elementele sistemului defișiere Cookie Cookie APIStore Web Web Directory Entries API Entries Directory Alte inițiative inițiative Alte Share wicg.github.io/cookie wicg.github.io/ w 3 c.github.io/web API ( – ( 06 0 unele neoficiale: unele 2 noiembrie noiembrie entries decembrie decembrie ( 30 - share/ - store/ - septembrie septembrie api / 2019 cookie 2019 ) ) - uri 2019 )
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco ( readable alte API flux citibil stream - uri ) JavaScript episodul viitor: consumator specifice HTML procesate date 5
Dr. Sabin Buragaprofs.info.uaic.ro/~busaco