Přejít k navigační liště

Zdroják » JavaScript » Novinky pro vývojáře v Internet Exploreru 8

Novinky pro vývojáře v Internet Exploreru 8

Internet Explorer 8 přináší kromě novinek pro koncové uživatele a web designéry také mnoho nového pro vývojáře. Novinky vychází z doporučení konsorcia W3 (implementace nových vlastností z připravovaného HTML 5). Možnosti prohlížeče dále rozšiřují WebSlices, Accelerators a Search Suggestions.

Protože jsem vývojář a ne webdesigner, hned na začátku uvádím odkaz na přehledovou tabulku podporovaných CSS v Internet Exploreru od verze 5.0 pro nedočkavé webdesignery. Zbytek článku bude již věnovaný vývojářům.

Novinky pro vývojáře vycházejí z již existujících doporučení konsorcia W3 nebo ze zavedených de facto standardů. Daly by se shrnout do čtyř skupin.

  • Bezpečnost,
  • rozšíření a usnadnění tvorby AJAX aplikací,
  • podpora offline aplikací,
  • usnadnění a zrychlení práce koncového uživatele.

V tomto článku se nebudeme věnovat změnám, které se týkají manipulace s DOM a nástrojům pro vývojáře, jako je například integrovaný debugger pro JavaScript.

Bezpečnost

Velmi často se ke zpracování informací, které dorazí ze serveru jako odpověď na volání objektem XMLHttpRequest, používá funkce eval. To může ale být potenciální bezpečnostní problém, pokud dojte k podstrčení nežádoucího kódu. V Internet Explorer 8 proto přibyl globální objekt JSON, který slouží k bezpečnému zpracování textového řetězce, který má obsahovat serializovaný objekt ve formátu JSON. Objekt JSON má dvě metody parse a stringify.

Pokud předpokládáte, že by na vstupu mělo být čisté HTML, které se má například vložit na dané místo ve stránce, můžete použít window.toStaticHTML(str). Tato metoda odstraní z textu vše, co neodpovídá HTML, zejména JavaScript kód, a je specifická pro Internet Explorer 8. Objekt JSON a metoda toStaticHTML nabývají na významu zejména ve spojení s Cross Domain Request, který si popíšeme dále.

Rozšíření a usnadnění tvorby AJAX aplikací

Současné webové aplikace, které jsou využívají AJAX, mají pro vývojáře řadu úskalí a řešení některých problémů je zbytečně složité. Ty nejproblematičtější jsou již ale vyřešeny v návrzích některých specifikací konsorcia W3.

AJAX History

Pomocí vlastnosti hash objektu location můžete měnit URL aplikace a tím pádem zaktivnit tlačítka Zpět/Vpřed prohlížeče. Do hodnoty hash si v podstatě uložíte všechny informace, které budete potřebovat pro zrekonstruování stránky do stavu, jak ji měl uživatel. Pokud uživatel začne procházet historii, změní se hash a je vyvolána událost hashchange. V této události na základě hodnoty hash zrekonstruujete stránku do příslušné podoby. Je důležité si uvědomit, že rekonstrukci stránky děláte vy a ne prohlížeč. Proto musíte mít uloženy všechny potřebné informace.

XMLHttpRequest timeout

V návrhu specifikace objektu XMLHttpRequest přibyla vlastnost timeout a událost timeout. Událost timeout je pak vyvolána po uplynutí doby nastavené ve vlastnosti timeout, pokud se objekt XMLHttpRequest nedočkal odpovědi ze serveru.

Cross-domain Request (XDR)

Klasický mashup kombinuje informace z různých zdrojů. Kvůli bezpečnosti není možné se na informace z jiné domény dotazovat přímo, ale je třeba jít oklikou přes vlastní server, který v podstatě jen přepošle volání na cílovou službu. Objekt XDomainRequest je v podstatě obdoba objektu XMLHttpRequest s tím rozdílem, že je určen pro komunikaci se servery na jiných doménách. Aby byla takováto komunikace možná, je třeba splnit tři podmínky:

  1. Hlavička HTTP dotazu musí obsahovat klíč XDomainRequest s hodnotou 1.
  2. Odpověď HTTP musí obsahovat klíč XDomainReques­tAllowed s hodnotou 1.
  3. Musí být splněna bezpečnostní matice.

Cross-Document Messaging (XDM)

XDM slouží pro zasílání textových zpráv do a z vložených dokumentů, např. v iframe. Příjemce si zaregistruje událost message a odesílatel metodou postMessage(str) může zprávu odeslat. To je možné i u dokumentů, které nepocházejí ze stejné domény.

Registrace události:

document.addEventListener('message', receiver, false);

function receiver(e) {
  if (e.domain == 'example.com') {
    if (e.data == 'Hello world') {
      e.source.postMessage('Hello');
    } else { 
      alert(e.data); 
    } 
  } 
} 

Odeslání zprávy:

var o = document.getElementById('...');
o.contentWindow.postMessage('Hello world'); 

Selector API

Selector API usnadňuje výběr elementů dokumentu na základě jejich názvu případně třídy CSS. Pokud potřebuji vybrat například všechny elementy div, které mají třídu CSS „adresa“, stačí zavolat:

var adresy = document.querySelectorAll("div.adresa"); 

Výsledkem je pole elementů.

Podpora offline aplikací

Jistě každý znáte tu nádhernou vizi, kdy všechny aplikace budou dostupné online jako služba (Software as a Service) a tím pádem kdekoliv bude připojení k internetu, budete mít váš software dostupný. Myšlenka je to parádní, dokud máte připojení do internetu v dostatečné kvalitě. Stačí vyjet mimo velká města a budete na cestách odkázáni na GPRS s reálnou rychlostí kolem 27 kbit/s. Na tuto rychlost nejsou současné webové aplikace opravdu stavěné. Nebo nějaký šikula s velkým krumpáčem sekne kousek vedle, než měl. Kdo z vás bydlí na Praze 2, si možná vzpomene na vyhoření ústředny v Blanické ulici. ADSL mi nefungovalo několik týdnů. Proto připravované HTML 5 myslí i na situace, kdy potřebujeme, aby naše webová aplikace měla alespoň základní offline funkcionalitu. Jedná se o Connectivity Events a DOM Storage.

Connectivity Events

Element body byl rozšířen o dvě události – online, offline. Tyto události se vyvolají při ztrátě konektivity, resp. při připojení do internetu. Stav online/offline lze také zjistit z vlastnosti window.naviga­tor.onLine.

DOM Storage

DOM Storage je perzistentní úložiště, které si uchovává data i po vypnutí počítače. Do tohoto úložiště máte možnost uložit až 10 MB dat na doménu. Data se ukládají systémem klíč-hodnota a nejste omezeni počtem klíčů, jako například u session.

Usnadnění a zrychlení práce koncového uživatele

Následující novinky se snaží v maximální míře usnadnit a zrychlit práci uživatele. Představte si klasickou situaci, kdy vás někdo pozve do hospody, kterou neznáte. Najdete si ji na webu, projdete si její stránky a najdete adresu. Tu zkopírujete, otevřete nové okno, přejdete na svoje oblíbené mapy, tam adresu vložíte a necháte si místo na mapě najít. S těmito běžnými úkony budou pomáhat Accelerators, WebSlices a Search Suggetions.

Accelerators

Accelerators (akcelerátory) typicky umožňují rychlý přístup k vyhledávacím službám různého druhu. Accelerator nedělá v podstatě nic jiného, než že sestaví URL, které je možné parametrizovat, a takto sestavené URL otevře na nové záložce nebo v malém okně pro náhled. Parametrem může být označený text, URL dokumentu, jméno stránky atd. Pokud je Accelerator vázaný na označený text, je dostupný přes ikonu, která se zobrazí po označení textu ve stránce. Jinak jsou Acceleratory dostupné z nabídky Stránka.

Accelerator je popsaný pomocí XML a instalace do prohlížeče probíhá pomocí JavaScriptu.

Příklad

Tento Accelerator je jednoduché volání překladového slovníku na serveru Seznam.

<?xml version="1.0" encoding="utf-8" ?>
<openServiceDescription
  xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
  <homepageUrl>http://slovnik.seznam.cz/</homepageUrl>
  <display>
    <name>Seznam.cz - překladový slovník</name>
    <icon>="http://slovnik.seznam.cz/img/favicon.ico</icon>
  </display>
  <activity category="translate">
    <activityAction context="selection">
      <execute action="http://slovnik.seznam.cz/">
        <parameter name="q" value="{selection}" type="text" />
        <parameter name="lang" value="en_cz" type="text" />
      </execute>
    </activityAction>
  </activity>
</openServiceDescription> 

Instalace Accelerator:

window.external.AddService('slovnik.xml'); 

WebSlices

WebSlices vychází z mikroformátu hAtom a umožňují se přihlásit k odběru části webové stránky, jako by to byl RSS Feed. Vytvoření WebSlice pak tedy spočívá pouze v použití speciálních názvů tříd CSS a hlavní element (třída CSS hslice) musí mít atribut id.

<div class="hslice" id="1">
  <p class="entry-title">…</p>
  <div class="entry-content">…</div>
</div> 

Takto „označkovanou“ část stránky Internet Explorer 8 rozpozná jako WebSlice a zpřístupní jeho registraci. Pokud chcete využívat WebSlices i ve Firefoxu, stačí si doinstalovat rozšíření WebChunks.

Search Suggestions

Česky by se tato funkce dala označit také jako našeptávač. Jde o přidání dalšího URL do OpenSearchDes­cription, kde se jako návratový typ uvede application/x-suggestions+xml. Prohlížeč pak při napsání každého znaku do vyhledávacího pole volá příslušné URL. Server pak vrátí „našeptané“ hodnoty buď ve formátu JSON nebo XML. Formát XML může obsahovat i odkazy na obrázky.

Příklad dokumentu OpenSearchDes­cription:

<?xml version="1.0" encoding="utf-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
    <ShortName>Northwind Search</ShortName>
    <Url type="text/html" template="http://.../Search.ashx?q={searchTerms}&source=IE"/>
    <Url type="application/x-suggestions+xml" template="http://.../SearchSuggestion.ashx?q={searchTerms}"/>
    <Image height="16" width="16" type="image/png">http://.../Search.png</Image>
</OpenSearchDescription> 

Příklad odpovědi ve formátu XML: 

<?xml version="1.0"?>
<SearchSuggestion version="2.0" xmlns="http://opensearch.org/searchsuggest2">
    <Query>seattle</Query>
    <Section>
        <Item>
            <Text>seattle weather</Text>
            <Description>rainy all the time</Description>
            <Url>http://www.weather.com/seattle</Url>
        </Item>
        <Item>
            <Text>seattle seahawks</Text>
            <Description>football team</Description>
            <Url>http://www.nfl.com/seahawks</Url>
        </Item>
        <Item>
            <Text>seattle mariners</Text>
            <Description>baseball team</Description>
            <Url>http://www.mlb.com/mariners</Url>
        </Item>
    </Section>
</SearchSuggestion> 

Malá ukázka na konec

Ukázka zdrojového kódu je jednoduché rozhraní k RESTFul Web Service. Kompletní zdrojový kód, včetně serverové strany a SQL skriptu pro vytvořené ukázkové databáze je k dispozici. Zip archiv obsahuje projekt určený pro Visual Studio 2008. Postačí vám verze Visual Web Developer 2008 Express SP1, která je zdarma.


Autorem článku je Štěpán Bechynský, specialista pro vývojové nástroje ve společnosti Microsoft v České republice. Více informací o online technologiích, a samozřejmě i Internet Exploreru 8, se zdarma dozvíte na online konferenci Vort-ex ve dnech 18. a 19. 11. 2008. Informace pro vývojáře také najdete na blogu odborníků z českého Microsoftu.

Líbí se vám novinky v Internet Exploreru 8?

Komentáře

Subscribe
Upozornit na
guest
5 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Kazzan

Pokud Vás některá z uvedených novinek a funkcí, které přináší Internet Explorer verze 8, zaujala a chcete se o ní dozvědět více, či se zajímáte o tvorbu internetových stránek a chcete vědět na co se připravit nebo jak zajímavě vylepšit Vaše stránky nebo se Vám jen nechce sedět doma u počítače a hltat nové informace pouze z RSS čtečky, doporučuji navštívit meetingy Windows User Group věnované IE8. Přednášejícím bude právě autor článku Štěpán Bechynský. Diskuze a dotazy možné.

WUG Liberec – 17. října 2008
WUG Písek – 13. listopadu 2008

Více na http://www.wug.cz/.

VfB

že si autor ještě plete bookmarks (záložky – které IE nemá) s tabs (panely, karty)

Kazzan

Hlavně, že víme o co jde. Řekl bych zlozvyk z českého překladu.

Stanislav.Hoferek

mam otazku – bude IE uz konecne pouzitelny?

osobne mam velmi zaujimavu poziadavku – gesta mysou. nie som schopny bez nich efektivne pracovat. Dokaze s nimi IE8 robit?

avatar

Človeče, mať tvoje problémy a Gatesove milióny …

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.