1. díl - Úvod do JavaScriptu

JavaScript Základní konstrukce Úvod do JavaScriptu

Vítám vás u tutoriálu tvorba webových aplikací v JavaScriptu. V tomto úvodním dílu si vysvětlíme k čemu je JavaScript dobrý, kde se používá a jaký je rozdíl mezi webovou stránkou a webovou aplikací. V příštích dílech se podíváme na samotnou tvorbu webové aplikace v JavaScriptu.

JavaScript

Když nám o JavaScriptu přednášeli na škole, použil náš profesor termín "Nepochopený programovací jazyk". Tento termín se mi zalíbil natolik, že si ho dovolím použít i zde. Většina lidí totiž vůbec neví, co to JavaScript je, nebo si to myslí špatně. Tento jazyk nachází své uplatnění na webu až v posledních letech a stává se stále více a více populární. Je nedílnou součástí moderních webů. Udělejme si rychlou odbočku do minulosti a řekněme si více o vzniku tohoto jazyka, jen tak pochopíme, za jakým účelem byl vytvořen a k čemu by měl sloužit.

JavaScript logo

Okolnosti vzniku jazyka

Vznik jazyka je úzce spojen se společností Sun, ve které v roce 1992 vzniká jazyk Java. Jeho cílem je tvořit přenosné programy mezi různými operačními systémy a dokonce i různými architekturami. Nový multiplatformní jazyk měl být také přívětivý syntaxí podobnou jazyku C (tzv. C-like syntaxe) a měl obsahovat věci, které C++ nemá (např. garbage collector).

V roce 1995 Bill Gates z Microsoftu prohlašuje slavnou větu: "Internet? Ten nás nezajímá". Microsoft měl Windows a myslel si, že nově vznikající médium, internet, není po obchodní stránce pro firmu zajímavý. Sun viděl na webu příležitost, ale současné prohlížeče dokázali zobrazovat jen statický HTML obsah. Nebylo možné na web vkládat žádné interaktivní prvky. Sun začíná protlačovat JavaApplety pro prohlížeče, které umožňují vkládat do stránek Java aplikace, běžící na straně klienta. Netscape jde na větší interaktivnost jinak, vytváří jazyk LiveScript, který je v podstatě spojením jazyků Java (odtud syntaxe), Scheme (funkcionální paradigma, více dále) a Self (prototypové programování). Java + Scheme + Self = LiveScript. Nový jazyk byl navržen a naprogramován již za neuvěřitelné 3 týdny! Zde se zrodilo první z úskalí tohoto jazyka, problémem totiž je, že je šitý trochu horkou jehlou. Sun chtěl, aby se jazyk jmenoval JavaScript. Název je čistě obchodní tah a měl symbolizovat jakousi jednodušší verzi Javy. V podstatě je to ale úplně nový jazyk, který přebírá jen část syntaxe Javy a její filozofii už vůbec ne. Zde je druhé úskalí, název je opravdu matoucí - JavaScript nebyl, není a nikdy nebude Java, má s ní jen pramálo společného .

V roce 1996 Microsoft otevírá oči a implementuje ve svém Internet Exploreru JavaScript pod názvem JScript. JavaScript se rozšiřuje a je v roce 1998 standardizován jako ECMAScript. Cesta ke standardizaci jazyka byla poněkud krkolomná, tvůrci si nakonec nechali jazyk standardizovat u evropské firmy, protože ani W3C ani ISO jim nechtěli standard schválit. Implementace jazyka v prohlížečích byla dlouhou dobu problém, protože si ji každý dělal po svém. V současné době se situace značně zlepšila a to nejen postupným slaďováním rozdílů, ale také vznikem JavaScriptových frameworků, které poskytují unifikované rozhraní a sami řeší odchylky v prohlížečích. Masivní rozšíření JavaScriptu se přisuzuje firmě Google, která ve svém Gmailu použila technologii AJAX, založenou na JavaScriptu. Technologie sice byla již nějakou dobu známa, ale Google byl první, kdo se odhodlal na ní postavit vážný projekt. Protože se jedná o poměrně komplikovanou věc, budeme se jí věnovat až na konci tohoto seriálu. Nyní prozradím, že technologie umožňuje načítat části webových stránek bez nutnosti obnovení okna. To jistě znáte z moderních webů, často v podobě načítacího kolečka, kde se vám vkládají na stránku nové informace aniž byste ji museli obnovit nebo přejít na jinou adresu v prohlížeči. Nebo například z Facebooku, který automaticky po nějaké době přidává do otevřeného okna nové příspěvky, aniž by došlo k nepříjemnému efektu obnovení stránky.

Využití JavaScriptu

Důležité je si uvědomit, že JavaScript běží na straně klienta, všechny ty aplikace jsou tedy spouštěny v prohlížeči u uživatele. To je obrovský rozdíl oproti serverovým jazykům, jako je např. PHP. Pomocí JavaScriptu tedy můžeme měnit obsah webové stránky u uživatele, nabízí se tvorba dynamických menu, různých roletek a dalších kontejnerů, které umožňují ušetřit místo na stránce když jsou zavřené a po najetí myší se otevřou. To je jistě šikovné a přehledné. JavaScript je skvělý k formátování textu, pomocí něj si můžete do napsané zprávy vkládat smajlíky nebo dokonce formátovat text jako ve Wordu. Když je na webové stránce nějaký editor, je to na 90% JavaScript. Další využití nalezneme u ukazatelů času a data a dalších efektů na webových stránkách (např. padající sníh na vánoce).

Protože odeslání stránky na server a čekání na následnou odpověď serveru je pomalé, používá se JavaScript také na validaci webových formulářů. Když například napíšete špatně email, webová stránka vás na to ještě před odesláním upozorní a není třeba stránku znovu načítat. Musíme si však uvědomit, že protože JavaScript běží na klientovi, může si ho uživatel vypnout nebo přepsat, proto nesmíme na takovouto validaci spoléhat a email musíme podruhé zkontrolovat i na serveru. Výhodou JavaScriptu je však pohodlnost a efektivnost bez zbytečných načítání stránky a prodlev. To samé platí u dříve zmíněných JavaScriptových menu, které by se i s vypnutým JavaScriptem měly zobrazit. Je jedno, že už to nebude tak hezké, protože JavaScript má 99% lidí zapnutý a některé prohlížeče ho dokonce ani neumožňují vypnout, problém je hlavně například u indexovacích robotů Googlu, který je potom nevidí, protože JavaScript nepoužívá. To by mohlo pak znamenat, že se přes menu nedostane na zbytek webu. Již zmíněné JavaScriptové frameworky (například nejznámější JQuery, kterou používá i gigant Google, nebo Mootools), obsahují tzv. widgety, předpřipravené miniaplikace například na ty menu, kde si jen nastavíte co v nich má být z zbytek za vás řeší framework a to i s případem, kdyby někdo JavaScript vypnul.

V poslední době se v JavaScriptu objevují i hry a vytlačuje platformu Flash. Díky příchodu HTML5, které poskytuje hardwarově akcelerované plátno, a s podporou SVG si totiž můžeme přes JavaScript kreslit velmi rychlou vektorovou grafiku. Možná znáte hru AngryBirds pro prohlížeč Chrome, tak ty jsou v JavaScriptu :)

V JavaScriptu se začínají psát aplikace, jak je známe nyní z desktopů (např. Office). Taková JavaScriptová aplikace je totiž plně multiplatformní a funguje na kterémkoli zařízení, kde je internetový prohlížeč. Může se jednat o počítač, tablet, telefon nebo třeba i hodinky. Na operačním systému také vůbec nezáleží, aplikaci napíšete jednou a funguje všude, uživatel nemusí ani poznat, že funguje přes prohlížeč. To je přeci levné a výhodné. Takové aplikace se vytváří např. pomocí projektu PhoneGap. Budoucnost JavaScriptu je zkrátka velmi příznivá.

Struktura jazyka

Následující popis bude trochu odborný, pokud vás problematika zajímá, můžete si přečíst článek Objektově Orientované Programování, nebo se tím netrapte a následující odstavec klidně ignorujte, není to až tak důležité :)

JavaScript je jazyk interpretovaný, je tedy překládaný za běhu a vykonáván podle svého zdrojového kódu. Syntaxe je tedy C-like a jazyk je dynamicky typovaný, obsahuje pouze jeden numerický typ a to number, string pro text, boolean pro pravdivostní hodnotu a Object pro cokoliv jiného. Jazyk je objektově orientovaný, ale je zde velká zvláštnost v návrhu, protože zde neexistuje nic jako třída. Objekt je totiž to samé jako slovník, tedy obecný kontejner. JavaScript využívá tzv. funkcionální paradigma, které umožňuje do běžné proměnné uložit funkci. To se nabízí např. pro tvorbu Lambda funkcí. Tato zdánlivě jednoduchá vlastnost potom umožňuje předávat funkce v parametru jiné funkce (tzv. callback) nebo dokonce využít funkci jako konstruktor objektu. Objektově orientované programování zde nabývá úplně nových rozměrů, funguje zde prototypová dědičnost, tedy objekt je předlohou jiného objektu. Když jsem toto viděl, připadalo mi to naprosto dokonalé a líbí se mi to mnohem více, než standardní OOP založené na třídách, nicméně chápu, že je to něco nového a lidé se tomu brání, máme tu tedy další úskalí JavaScriptu - funkcionální paradigma. Jazyk se až teď začíná více využívat a jeho čas teprve nastává.

Pozn. JavaScript je svým návrhem natolik zajímavý, že se začíná používat i na serverech, mluvíme potom o tzv. serverovém JavaScriptu, který konkuruje jazykům jako jsou PHP. Pro zájemce doporučuji nastudovat si něco o Node.JS.

Pokud někdo prahne po více informacích o návrhu JavaScriptu, odkáži na knihu JavaScript - The good parts, můžete nelézt i stejnojmenné video.

Předchozí odstavce jsou založeny na přednášce Ing. Tomáše Holase z Unicorn College, která byla opravdu perfektní.

Webová stránka × webová aplikace

Snad každý z nás již někdy viděl jak webovou stránku, tak webovou aplikaci. Jaký je však mezi nimi rozdíl? Webová stránka nejčastěji slouží k informativnímu účelu a nejčastěji ani JavaScript nepoužívá. Podívali bychom se na ni (opomeneme-li serverovou část), tak samotný obsah stránky je statický. Zato webová aplikace se spíše podobá počítačové aplikaci, jen běží ve webovém prohlížeči a využívá jeho výhod, nejčastěji je tudíž celá dynamická. Jak příklad webové stránky je zde i samotný ITnetwork, většina obsahu je statická, jako webová aplikace je krásný příklad webová kancelář v cloudových balících jako je OneDrive nebo Google drive. Tyto kancelářské balíky se podobají klasickým desktopovým a umí (pokud to neruší firemní politiku) v podstatě totéž. Nicméně podívejme se na diskuzi na ITnetwork, ta již statická není a tedy lze ji považovat částečně za webovou aplikaci.

OpenSource?

JavaScript trpí jedním zásadním problémem. Tím že je zdrojový kód u klienta, každý jej může zobrazit, popřípadě si někam uložit a předělat, tento model připomíná OpenSource, kdy každý si může zdarma stáhnout zdrojový kód a podle libosti upravovat a dále publikovat. Pokud se nám takový model nelíbí nebo se pro naši aplikaci nehodí, nemusíte vše zahazovat. Jednou z možností je kód tzv. obfuskovat, ale na to se podíváme, až nějaký kód mít budeme. Teď na úvod jsem vám chtěl jen sdělit, že to jde.

ECMAscript

JavaScript je obchodní název pro ECMAscript, pokud se tedy budeme učit JavaScript, učíme se vlastně ECMAscript. ECMAscript je standardem, dnes již jsou rozdíly mezi prohlížeči v jeho implementaci srovnané a většinou stačí napsat jeden kód pro všechny prohlížeče, historicky to byl vždy trochu zádrhel.

V příštím dílu si popíšeme základy jazyka a naprogramujeme první skripty.


 

  Aktivity (2)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (35 hlasů) :
4.914284.914284.914284.914284.91428


 



 

 

Komentáře
Zobrazit starší komentáře (23)

Avatar
relycanx
Člen
Avatar
relycanx:

ahá :) takových skvělých, nových věcí. Jen se to sem už asi pod JavaScript moc nehodí no :/ Ale zeptat jsem se stejně musel :D

 
Odpovědět 17.4.2013 18:00
Avatar
Kit
Redaktor
Avatar
Kit:

Zabudovaný hosting ve Windows je trapný, zvládá jen jednu doménu.

V současné době mají význam hlavně Apache, lighttpd a Nginx.

Odpovědět  -2 17.4.2013 18:02
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na relycanx
Jiří Gracík:

Ideální je XAMPP, mě naprosto vyhovuje. Balíček - Apache, MySQL, ... - krása :)

Odpovědět  +2 17.4.2013 18:07
Creating websites is awesome till you see the result in another browser ...
Avatar
Patrik Neumann:

Dobrý den, jde nějak nastavit jazyk javascriptu? Potřebuju, aby se mi zobrazovaly písmena s diakritikou a ne např.: tento text: "Kalkulačka v Javě" se zobrazí takhle: "KalkulaÄŤka v JavÄ›"

Odpovědět 19.12.2014 15:48
Nic není nemožné, proto se snažím dál.
Avatar
Odpovídá na Patrik Neumann
Patrik Neumann:

Aha, chyběl mi v indexu v <meta charset="UTF-8" /> první apostrof

Odpovědět 19.12.2014 15:52
Nic není nemožné, proto se snažím dál.
Avatar
Odpovídá na Patrik Neumann
Patrik Neumann:

Aha, chyběl mi v indexu v <meta charset="UTF-8" /> první apostrof

Odpovědět 19.12.2014 15:52
Nic není nemožné, proto se snažím dál.
Avatar
antonin.stribrny:

Ahoj všem, když si v PSPadu zakládám nový soubor, mám si v záložce Nový soubor vybrat klasicky HTML? pokud ano tak stačí jen to HTML nebo si mám v záložce Podle šablony vybrat konkrétní typ? Předem děkuji. Přeji všem vše nejlepší do nového roku :-)

 
Odpovědět 27.12.2014 11:29
Avatar
vojtanosek
Člen
Avatar
Odpovídá na antonin.stribrny
vojtanosek:

Teď tě nechápu ale můžu ti něco poradit. V PSpadu můžeš editovat html soubor i css soubor. Otevřeš klasickou html stránku (asi i .htm stránku). A jestli zakládáš novou stárnku tak si vyber html a ne html multi...

 
Odpovědět 4.6.2015 22:34
Avatar
h.hajk
Člen
Avatar
Odpovídá na Kit
h.hajk:

Není trapný, jen jej neznáš. IIS zvládá vše co Apache. Rychlejší je už jen HHVM, což je už virtuální běhové prostředí, kde se PHP kompiluje.

Test requestů za sekundu (Vyšší je lepší)
http://www.webperformance.com/…_second1.png

Test délky requestu (Nižší je lepší)
http://www.webperformance.com/…se_time1.png

 
Odpovědět 5.8.2015 18:54
Avatar
torhanmichal
Člen
Avatar
torhanmichal:

Ahoj bude velmi rád , když mi někdo poradí.. ve svém html kódu mám 2 java scripty. Jeden, aby se mi rozbalil hamburger při menším rozlišení, druhý aby se mi Fixní menu při rolování přilepilo k hornímu okraji obrazovky( při plném rozlišení). Problém je v tom, že nějak nechcou spolupracovat. Když odejmu jeden z těch skriptu tak to funguje, když ho přidám, tak zas ne (záleží, zda ten 1 sript dám před 2 sript a naopak).. vždy jeden s těch skriptu funguje, když je za tím druhým, ale nikdy nespolupracujou naráz.. snad jsem to vysvětlil trochu srozumitelně.

 
Odpovědět 1. prosince 19:33
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 33. Zobrazit vše