Co je to JavaScript a jak to funguje?

JavaScript je programovací jazyk pro web. Podporuje ji většina webových prohlížečů včetně Chrome, Firefox, Safari, Internet Explorer, Edge, Opera atd. Většina mobilních prohlížečů pro chytré telefony podporuje také JavaScript.

Používá se především k vylepšení webových stránek, které poskytují uživatelsky příjemnější prostředí. Mezi ně patří dynamická aktualizace webových stránek, vylepšení uživatelského rozhraní, jako jsou nabídky a dialogová okna, animace, 2D a 3D grafika, interaktivní mapy, přehrávače videa a další. Tento režim použití JavaScriptu ve webovém prohlížeči se také označuje jako javascript na straně klienta.

Webová triáda

Když vezmete v úvahu součásti, které tvoří webovou stránku, tvoří třetí komponentu trojice JavaScript, další dvě představují HTML a CSS. HTML popisuje stránku, včetně textu, grafiky atd. CSS se používá k ovládání a přizpůsobení vzhledu webové stránky, včetně barev, písem atd. JavaScript se používá k přidání dynamické komponenty na webovou stránku a co nejvíce prvky na stránce programovatelné.

Historie JavaScriptu

Vývoj JavaScriptu začal v roce 1995 v Netscape Communications, tvůrci prohlížeče Netscape. Uvědomili si, že přidání a “lepidlo jazyk” zlepšení uživatelského prostředí webu by zvýšilo jeho absorpci. Přivedli tedy Brendana Eicha, aby vložili programovací jazyk Scheme. Protože však Java byla v té době horkým novým jazykem webu, rozhodli se jazyk přiblížit syntaxi Java. Výsledkem byl JavaScript s vlastnostmi schématu, objektovou orientací SmallTalk a syntaxí Java. První verze tohoto jazyka byla vlastně pojmenována Mocha v květnu 1995, přejmenována na LiveScript v září 1995 a znovu přejmenována na JavaScript v prosinci 1995.

V roce 1996 byl JavaScript předložen ECMA International k dokončení jako standardní specifikace. V červnu 1997 byla vydána první oficiální specifikace jazyka jako ECMA-262. Nejnovější verzí jazyka je ECMAScript 2017, která byla vydána v červnu 2017.

Co mohu dělat s JavaScriptem?

JavaScript je plnohodnotný interpret programovacího jazyka zabudovaný do vašeho webového prohlížeče. V JavaScriptu můžete dělat cokoli, co umožňuje běžný jazyk, jako je Java. Tyto zahrnují:

• Deklarovat proměnné
• Uložte a načtěte hodnoty
• Definujte a vyvolejte funkce
• Definujte své vlastní třídy
• Načíst a používat externí moduly
• Psát obslužné rutiny událostí, které reagují na uživatelské a další události
• A mnohem víc

Webový prohlížeč načte webovou stránku, analyzuje HTML a z obsahu vytvoří tzv. DOM Object Object Model (DOM). DOM představuje živé zobrazení webové stránky ve vašem kódu JavaScript. Váš kód pak může provést aktualizaci DOM a nechat jej okamžitě zobrazit uživateli. Prohlížeč vám také umožňuje zaregistrovat kód, který má být upozorňován na události uživatelského rozhraní, jako je pohyb myši, kliknutí na tlačítko atd. Pomocí všech těchto zařízení můžete vytvářet chladné (a ne málo) aplikace, které budou sloužit jakémukoli účelu, který si můžete vybrat.

Varování: Protože JavaScript je takový mocný jazyk JavaScript a vývoj webu: Použití modelu objektu dokumentu JavaScript a vývoj webu: použití modelu objektu dokumentu Tento článek vás seznámí s kostrou dokumentu, se kterou JavaScript pracuje. Po znalosti práce s tímto abstraktním objektovým modelem dokumentu můžete napsat JavaScript, který funguje na jakékoli webové stránce. , je také možné psát malware, viry, prohlížeče únosci a další nasties, které jim způsobují uživatele. Od krádeže souborů cookie prohlížeče, hesel, kreditních karet až po stahování virů do počítače.

Jak funguje JavaScript?

Když webový prohlížeč načte webovou stránku, analyzátor HTML začne analyzovat kód HTML a vytvoří DOM. Kdykoli se syntaktický analyzátor setká s direktivou CSS nebo JavaScript (vloženou nebo externě načtenou), bude podle potřeby předán analyzátoru CSS nebo JavaScriptu. Stroj JavaScript načítá externí soubory JavaScriptu a vložený kód, ale nespustí kód okamžitě. Čeká na dokončení analýzy HTML a CSS. Po dokončení se JavaScript spustí v pořadí, v jakém byly nalezeny na webové stránce: jsou definovány proměnné a funkce, jsou vyvolávány funkce, jsou spouštěny obsluhy událostí atd. Tyto činnosti vedou k aktualizaci DOM pomocí JavaScriptu a je okamžitě vykreslen prohlížečem.

Načítám JavaScript na webové stránce

Nejběžnějším způsobem načtení JavaScriptu na webové stránce je použití skript Značka HTML. V závislosti na vašich požadavcích můžete použít jednu z následujících metod.

• Načtěte externí soubor javascript na webovou stránku takto:

• Úplnou adresu URL můžete zadat, pokud je javascript z jiné domény z webové stránky, a to následovně:

• JavaScript lze přímo vložit do HTML. Následující způsobí, že webová stránka při načtení zobrazí vyskakovací okno.

   alert ("Stránka je načtena");  

Kromě těchto metod existují způsoby dynamického načítání kódu JavaScript na vyžádání. Ve skutečnosti existují celé rámce věnované načítání a spouštění modulů JavaScriptu se správnými závislostmi vyřešenými za běhu. Diskuse o těchto technikách musí být odložena na pokročilý článek.

Ukázky fragmentů kódu JavaScript

Zde je několik jednoduchých ukázek kódu JavaScript, které ilustrují, jak snadné je použití na vaší webové stránce.

• Následující vybere všechny tučně prvky v dokumentu a nastaví barvu první na červenou.

  var elems = document.getElementsByTagName ('b'); elems [0] .style.color = 'red'; 

• Chcete změnit obrázek v img štítek? Následující přidruží obsluhu události pro klikněte událost tlačítka.

   Změnit obrázek 

• Aktualizujte textový obsah odstavce (str) prvek? Nastav vnitřníHTML vlastnost prvku podle obrázku:

  Ahoj světe
   Klikni na mě 

Tyto ukázky kódu nabízejí jen krátký pohled na to, co můžete udělat pomocí JavaScriptu na své webové stránce. Existuje spousta tutoriálů Freebie: Naučte se kódovat s 27 hodinami video tutoriálů. na webu, abyste mohli začít. Vyzkoušejte to ještě dnes!

Zabalení

Doufejme, že tento úvod přinesl několik nahlédnutí do JavaScriptu a vzbudil vaši chuť k programování webových stránek obecně a zejména JavaScript.

Jak používáte (nebo plánujete) používat JavaScript na své webové stránce? Prosím, dejte nám vědět v komentářích níže.

Image Credit: [email protected]/Depositphotos