BLOGas.lt
Sukurk savo BLOGą Kitas atsitiktinis BLOGas

HTML 5 naršyklėse IE8 ir FF3.5 – 4 dalis – CSS selektoriai

Parašė Sergejus | 2009-11-02 22:43

Praeitą kartą aš aprašiau vieną įdomiausių HTML5 naujovių – DOM saugyklą. Šiandien norėčiau labai trumpai aptarti kitą naujovę – CSS selektorius. Tikriausiai nemaža jūsų dalis esate naudoję jQuery CSS selektorius, kurių pagalba galima ypač patogiai ieškoti reikalingų HTML elementų. HTML5 neatsilieka ir siūlo greitesnį bei tokį patį galingą CSS selektorių mechanizmą.

Tiek Internet Explorer 8, tiek Firefox 3.5 palaiko HTML5 metodus querySelector bei querySelectorAll. querySelector grąžina pirmą paieškos sąlygą atitinkantį elementą, o querySelectorAll – atitinkamai visus elementus. Žemiau pateiktas pavyzdys, kuriame randami visi label elementai ir pastorinamas jų šriftas, o El. pašto label elementas įgauna mėlyną spalvą:

ie8_dev7

Nuo šiol taip greitai ir patogiai mes galėsime vykdyti HTML elementų paiešką naudojant gryną HTML5 ir JavaScript!

Rodyk draugams

HTML 5 naršyklėse IE8 ir FF3.5 – 3 dalis – DOM saugyklos

Parašė Sergejus | 2009-10-26 22:13

Dažna problema programuojant Web aplikacijas – kur patalpinti tarpinius duomenis pereinant nuo vieno puslapio prie kito. Jeigu mes programuojame serverio pusėje, ASP.NET turi sesiją, ViewState ir kitus mechanizmus. Kita alternatyva, kuri palaikoma ir tiesiogiai iš JavaScript – cookies. Cookies yra labai populiarūs, norint išsaugoti nedidelį duomenų kiekį. Jeigu reikia išsaugoti daugiau duomenų – atsiranda problemų. Pagrindinė cookies problema – jie teleidžia išsaugoti vos 4 KB duomenų.

HTML 5 minėtą duomenų saugojimo problemą siūlo spręsti DOM saugyklos pagalba. Specifikacija apibrėžia dviejų tipų saugyklas – sesijos ir lokalią DOM saugyklas. Pirmoji saugo duomenis naršyklės atmintyje visos aktyvios sesijos metu, antroji – visus duomenis saugo neribotą laiką. Svarbiausia tai, kad abi saugyklos leidžia saugoti net iki 10 MB informacijos vienam domenui!

Tarkime, mes turime puslapį DOM1, kuriame galima įvesti tam tikrą informaciją, ir puslapį DOM2, kuriame prieš tai įvesta informacija atvaizduojama. HTML kodas atrodys taip:

DOM1

ie8_dev5

DOM2
ie8_dev6

Kaip matyti, šiame pavyzdyje aš naudoju sesijos saugyklą, kuri yra pasiekiama iš window objekto (window.sessionStorage). DOM saugyklos programavimas yra labai paprastas ir intuityvus, užtenka sessiosStorage objektui apibrėžti norimą savybę (pvz., text) ir priskirti jai reikšmę ar kitą objektą.

Sesijos saugykla, kaip ir minėjau, saugo duomenis tik aktyvios sesijos metu, t.y. uždarius naršyklę – visi duomenys dings. Norėdami išsaugoti informaciją neribotam laikui (panašiai kaip yra su cookies), užtenka aukščiau pateiktame kode window.sessionStorage pakeisti į window.localStorage. Nuo šiol jus visada galėsite pasiekti anksčiau išsaugotus duomenis.

Apibendrinant, HTML 5 informacijos saugojimo būdas kliento pusėje man atrodo labai perspektyvus. Tik įsivaizduokite, vietoje to, kad aprauti serverį naudojant sesiją ar ViewState, jus galite saugoti šią informaciją tiesiogiai kliento naršyklėje!

Rodyk draugams

HTML 5 naršyklėse IE8 ir FF3.5 – 2 dalis – įvykiai online ir offline

Parašė Sergejus | 2009-10-07 20:19

Praeitame straipsnyje aš aprašiau gimtąjį (Native) JSON palaikymą naršyklėse IE8 ir FF3.5. Šiandien norėčiau aprašyti naujus HTML 5 įvykius online ir onoffline bei atributą navigator.onLine.

Kaip tikriausiai supratote, HTML 5 leis labai paprastai gauti prisijungimo prie tinklo būseną bei reaguoti į šios būsenos pasikeitimus. Noriu atkreipti dėmesį į tai, kad nustatoma būtent tinklo būseną, bet ne Interneto ryšio buvimas. Tai reiškia, kad tikrinama ar tinklo interfeisas yra įjungtas ir turi priėjimą prie tinklo bei žiūrima ar naršyklėje nėra įjungtas autonominis režimas (File → Work Offline).

Žemiau pateikiu labai paprastą puslapį, kuriame pasikrovimo metu atributo navigator.onLine pagalba nustatoma prisijungimo būsena bei įvykių online ir offline pagalba nurodoma kokį pranešimą rodyti (ONLINE ar OFFLINE). Suderinamumo dėlei, įvykio apdorojimo funkcijas aš nurodau ne tiesiogiai document.body, bet naudojant pagalbinę funkciją addHandler (IE8 reikėtų rašyti document.body.ononline, Firefox – document.body.online):

ie8_dev3

Rezultate mes turime puslapį, kuris momentaliai reaguoja į tinklo būsenos pasikeitimus:

ie8_dev4

Praktikoje, atpažinę kad tinklo būsena pasikeitė, jus galite išsaugoti duomenis į / pakrauti duomenis iš lokalios saugyklos, apie kurią rašysiu ateityje.

Rodyk draugams

HTML 5 naršyklėse IE8 ir FF3.5 – 1 dalis – gimtasis JSON palaikymas

Parašė Sergejus | 2009-10-05 20:07

Prieš kelias savaites man teko skaityti pranešimą „Internet Explorer 8 programuotojams“. Pristatymas sukėlė didžiulį susidomėjimą ir gavo geriausią renginio įvertinimą. Viena iš sėkmės priežasčių – pranešime aš nagrinėjau ne tiek IE8 specifines galimybes, bet labiau HTML5 naujoves (kurios yra palaikomos IE8). Šį savaitgalį kilo mintis parašyti kelių straipsnių ciklą iš dalinio HTML5 palaikymo Internet Explorer 8 ir Firefox 3.5 naršyklėse.

Šiandien trumpai aprašysiu vieną svarbiausių IE8 ir FF3.5 naujovių – gimtąjį (Native) JSON palaikymą (Chrome, Safari ir Opera kol kas to nepalaiko). Iki šiol egzistavo du galimi darbo su JSON būdai: nesaugi JavaScript funkcija eval() ir saugi, bet ne tokia greita Crockfordo JavaScript biblioteka JSON2.js. Atsiradus gimtajam JSON palaikymui, tampa saugu ir ypač efektyvu dirbti su JavaScript objektais. Tai yra daroma JSON.parse ir JSON.stringify metodų pagalba.

JSON.parse, kaip ir seka iš pavadinimo, moka saugiai konvertuoti perduotą eilutę JSON formatu į JavaScript objektą:

ie8_dev1

JSON.stringify, skirtingai nei JSON.parse, paverčia JavaScript objektą į tekstinę eilutę JSON formatu:

ie8_dev2

Kodėl verta naudoti gimtąjį JSON palaikymą? Jis yra saugus, labai greitas ir kas svarbiausia, ateityje bus palaikomas visose pagrindinėse naršyklėse (skaityk cross-browser).

Rodyk draugams

Laimėkite Microsoft Arc Mouse naršydami su IE8

Parašė Sergejus | 2009-08-30 19:30

Apie naują Internet Explorer 8 aš jau esu rašęs ne vieną kartą. Tikriausiai didžioji jūsų dalis jau perėjo prie jos nuo senesnių IE versijų. Jeigu ne - pats laikas pereiti, nes ką tik sužinojau apie Microsoft Lietuva vykdomą akciją - Naršyk su IE8 ir laimėk. Akcija skirta Internet Explorer 8 populiarumui didinti, bet mums ji dar yra įdomi ir tuo, kad galima laimėti Microsoft Arc Mouse ar pagrindinį prizą - Lenovo IdeaPad S10-2! Vienintelė sąlygą - naršyti puslapį su IE8.

Taip pat, rugsėjo vidurį aš skaitysiu pranešimą “Internet Explorer 8 programuotojams”. Daugiau informacijos paskelbsiu vėliau.

Rodyk draugams