JavaScript a webové aplikace

4IZ268 – Webové technologie

Jirka Kosek

Poslední modifikace: $Date: 2016/11/11 08:39:37 $

Úvod

Nová platforma

  • původně byl web navržen pro sdílení statických dokumentů

  • dnes v něm lze používat různé aplikace

    • elektronické obchody

    • internetové vyhledávače

    • firemní informační systémy

    • hry

  • web je nová platforma pro provozování aplikací

Výhody webové platformy

  • globální dosah – aplikaci mohou využívat uživatelé z celého světa

  • minimalizace nákladů na správu aplikací – vše je uloženo na webovém serveru, není potřeba instalovat klientskou část aplikace, tu zajistí standardní prohlížeč

Nevýhody webové platformy

  • ovládání aplikací nedosahuje pohodlí a interaktivity nativních klientských aplikací určených pro konkrétní operační systém

  • webové vývojové nástroje zatím většinou nedosahují kvalit prostředí (IDE) pro vývoj klasických klientských aplikací

  • je potřeba pochopit a naučit se používat několik nových technologií

    • HTML/XHTML + CSS

    • JavaScript + DOM

    • HTTP

    • serverový skriptovací jazyk/framework – PHP, ASP.NET, JSP, Ruby on Rails, …

Přístupy k tvorbě webových aplikací

  • výkonná část aplikace běží přímo v prohlížeči

  • výkonná část aplikace běží na serveru

  • nejčastěji se dnes používá kombinace obou technologií

Klientské technologie pro tvorbu aplikací

Co umí každý prohlížeč

  • zobrazovat HTML stránky

  • používat v HTML stránce formuláře (obdoba dialogových oken)

  • odeslat data vyplněná do formuláře pomocí protokolu HTTP zpět serveru

  • bez formulářů by webové aplikace nemohly vůbec existovat

  • spouštět kód v jazyce JavaScript

Nevýhody použití JavaScriptu

  • nefunguje v některých hodně starých nebo speciálních prohlížečích

  • složité aplikace mohou mít na slabším HW problém s výkonem

  • špatně použtý JavaScript může stránku udělat nepřístoupnou, nepoužitelnou a obtížněji indexovatelnou pro vyhledávače

  • čistě informační webové stránky by v ideálním případě měly fungovat i s vypnutým JavaScriptem

  • při použití horkých novinek je potřeba rozmyslet a ošetřit, co se staršími prohlížeči

JavaScript v prohlížeči

Princip

  • přímo do HTML stránky lze zařadit programový kód

  • program může reagovat na události vyvolané uživatelem

  • program může manipulovat s dokumentem a prohlížečem

  • teoreticky lze použít libovolný jazyk, ale v praxi se dnes používá pouze JavaScript

  • pro zvládnutí klientského skriptování musíme znát: jazyk JavaScript, způsob jeho vložení do stránky HTML, objektový model dokumentu (DOM) a webová API

Vložení skriptu do stránky

  • skript vložený přímo do HTML

    <script>
      …příkazy…
    </script>
  • skript načtený z externího souboru

    <script src="…adresa skriptu…">
    </script>
  • skripty prováděné v okamžiku načtení stránky většinou jen nadefinují funkce, které se pak vyvolávají jako odezva na reakci uživatele

  • dokud se skript nenačte a neprovede, nezpracovávají s následující části kódu HTML

Události

  • každý element na stránce může být cílem různých událostí vyvolaných uživatelem nebo stavem prohlížeče

  • obslužný kód pro jednotlivé události lze zadat do atributu se názvem odpovídajícím události

  • jako hodnota atributu se uvádí kód, který se má provést

    <tag událost="obslužný kód">…</tag>
  • <button onclick="alert('Ahoj')">Pozdrav</button>
  • pomocí událostí lze vytvářet interaktivní stránky – reagují na chování uživatele

Přehled události

onabort onloadeddata onreset onresize
oncancel onloadedmetadata onseeked onscroll
oncanplay onloadstart onseeking onafterprint
oncanplaythrough onmousedown onselect onbeforeprint
onchange onmouseenter onshow onbeforeunload
onclick onmouseleave onstalled onhashchange
oncuechange onmousemove onsubmit onmessage
ondblclick onmouseout onsuspend onoffline
ondurationchange onmouseover ontimeupdate ononline
onemptied onmouseup ontoggle onpagehide
onended onmousewheel onvolumechange onpageshow
oninput onpause onwaiting onpopstate
oninvalid onplay onblur onstorage
onkeydown onplaying onerror onunload
onkeypress onprogress onfocus onreadystatechange
onkeyup onratechange onload  

Definice obsluhy události

  • přímo v odpovídajícím HTML atributu

    <element onclick="doSomething()">
    • při větším množství elementů a události značně nepřehledné

  • inicializace pomocí skriptu přiřazením do odpovídající vlastnosti

    element.onclick = doSomething();
    • lepší varianta

  • přidání pomocí funkce addEventListener()

    element.addEventListener("click", doSomething());
    • lepší varianta

  • využití pomocných knihoven, např. jQuery

    element.click(doSomething());

Jazyk JavaScript

Jazyk JavaScript

  • jednoduchý skriptovací jazyk se syntaxí vycházející z Javy a C

  • netypované proměnné, podmínky, cykly, funkce, prototypové objekty

  • postupně existovalo několik verzí; prohlížeče nabízely různé své varianty (JavaScript/JScript)

  • standardizovaná verze JavaScriptu se jmenuje ECMAScript

DOM

Objektový model dokumentu

Objektový model dokumentu

  • skupina objektů, které zpřístupňují objekty stránky a prohlížeč

  • základní objekt, který umožňuje přístup k prohlížeči se jmenuje window, takže jeho jméno můžeme při zápisu cesty o objektu obvykle vynechat

  • v rámci window jsou pak dostupné další objekty:

    location

    Informace o URL stránky zobrazené v okně

    frames

    Rámy na stránce

    history

    Historie dokumentů prohlížeče

    navigator

    Informace o prohlížeči

    document

    nejdůležitější objekt reprezentující celou právě zobrazenou stránku

Přístup k objektům

  • při přístupu k nějaké části dokumentu, se objekty oddělují tečkou

    location.href
    navigator.appName
    document.documentElement.nodeName
  • objekt document strukturou vnořených objektů kopíruje strukturu elementů na stránce a umožňuje jejich čtení a modifikaci, včetně práce se styly atd.

  • jednotlivým elementům odpovídají uzly (node) ve stromu DOM

  • kompletní popis všech objektů, metod a vlastností je definován

Důležité vlastnosti uzlu

  • nodeName – jméno elementu (velkými písmeny)

  • nodeType – typ uzlu (element, komentář, text, …)

  • localName/namespaceURI – jméno a jmenný prostor, pokud potřebujeme

  • innerHTML – obsah elementu jako HTML kód

  • textContent – obsah elementu jako prostý text

  • className – třídy elementu

  • style – styl elementu

Průchod stromem

  • parentNode/childNodes – primitivní způsob průchodu

  • document.getElementById(id) – vrátí element s daným ID

  • document.getElementsByClassNames(třída) – vrátí elementy s danou třídou

  • document.getElementsByTagName(jméno elementu) – vrátí elementy s daným jménem

  • document.querySelect(selektor) – vrátí první element vyhovující danému selektoru

  • document.querySelectAll(selektor) – vrátí všechny element vyhovující danému selektoru

  • výše uvedené metody lze volat i na konkrétním elementu a pak se prohledává jen podstrom celého dokumentu

Modifikace DOM

  • modifikace pomocí vlastnosti innerHTML

  • přímá manipulace se stromem pomocí speciálních metod:

    • appendChild(), insertBefore(), removeChild() a replaceChild()

    • createElement(), createTextNode(), …

Speciality DOM

  • z historických důvodů je v DOM mnoho podivností

  • některé atributy se mapují na vlastnosti a při interakci s prohlížečem se pak již jen mění vlastnosti, nikoliv původní atributy v DOM (např. pro formuláře)

  • metody vracející více elementů používají podivné struktury HTMLCollection a NodeList

JS frameworky

  • současné aplikace vyžadují stále složitější klientské skripty

  • mezi prohlížeči pořád existují drobné rozdíly a jejich detekování a obcházení je pracné

  • řešení nabízejí tzv. javascriptové frameworky

    • nabízejí vlastní objektový model, který překlenuje případnou nekompatibilitu mezi prohlížeči

    • nabízejí hotové knihovny pro mnoho běžných operací

    • usnadňují manipulaci s DOM

    • většinou nabízejí efektivní mechanismus pro hromadné definování obsluhy událostí

    • např. Dojo, jQuery, Prototype, Yahoo User Library