Co je to JavaScript a jak to funguje?

reklama

JavaScript se stal základem v moderním vývoji webových aplikací. Tento výkonný jazyk se vyvinul v nezbytný nástroj, kterému může každý webový vývojář porozumět.

JavaScript má speciální funkce, které jej odlišují od tradičních programovacích jazyků. Budeme se kopat do toho, co to je, jak to funguje a co s tím můžete dělat. Pojďme to rozebrat.

Co je to JavaScript?

JavaScript je skriptovací jazyk pro web. Je to interpretovaný jazyk, což znamená, že k překladu kódu, jako je C nebo C ++, nepotřebuje překladač. JavaScript kód běží přímo ve webovém prohlížeči.

Poslední verzí jazyka je ECMAScript 2018, která byla vydána v červnu 2018.

JavaScript pracuje s HTML a CSS při vytváření webových aplikací nebo webových stránek. JavaScript je podporován většinou moderních webových prohlížečů, jako je Google Chrome, Firefox, Safari, Microsoft Edge, Opera atd. Většina mobilních prohlížečů pro Android a iPhone nyní podporuje i JavaScript.

JavaScript řídí dynamické prvky webových stránek. Funguje ve webových prohlížečích a v poslední době také na webových serverech. Rozhraní API pro programování aplikací (API) jsou také podporována skriptem JavaScript, což vám poskytuje více funkcí.

Pochopení všech způsobů, jak JavaScript pracuje, je o něco jednodušší, když pochopíte, jak web programování funguje, takže se dovíme více.

Bloky budování webové aplikace

Webové stránky a aplikace vytvářejí tři součásti: jazyk HTML (HTML), kaskádové styly (CSS) a JavaScript. Každá z nich má roli při vytváření webové aplikace.

• HTML je značkovací jazyk, který vytváří kostru webové stránky. Všechny odstavce, sekce, obrázky, nadpisy a text jsou psány v HTML. Obsah se na webu zobrazí v pořadí, v jakém jsou napsány v HTML.
• CSS řídí styl a další aspekty rozvržení. CSS se používá k vytvoření designu webové stránky vytvářející barvy, písma, sloupce, ohraničení atd. Převádí web z prvků prostého textu na barevné vzory.
• Třetí prvek je JavaScript. Strukturu tvoří HTML a CSS, ale odtud nedělají nic. JavaScript vytváří dynamickou aktivitu ve vaší aplikaci. Skriptování v JavaScriptu ovládá funkce po kliknutí na tlačítka, způsob ověřování formulářů hesel, způsob ovládání médií.

Všechny tři části vzájemně spolupracují při vytváření aplikací v plném měřítku. Byl by to dobrý nápad Další informace o HTML a CSS Naučte se HTML a CSS s těmito návody krok za krokemZajímá vás HTML, CSS a JavaScript? Pokud si myslíte, že máte talent pro učení, jak vytvářet webové stránky od nuly - zde je několik skvělých návodů, které stojí za to vyzkoušet. Přečtěte si více pokud s nimi nejste úplně v pohodě.

Jak funguje JavaScript?

Než začnete psát JavaScript, je důležité vědět, jak to funguje pod kapotou. O dvou důležitých kusech se dozvíte: Jak webový prohlížeč funguje, a Object Object Model (DOM).

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.

Prohlížeč poté vezme vše spojené s HTML, jako jsou obrázky a soubory CSS. Informace CSS pocházejí z analyzátoru CSS.

HTML a CSS jsou sestaveny DOM k vytvoření webové stránky jako první. Potom prohlížečový JavaScriptový modul načte soubory JavaScript a vložený kód, ale nespustí kód okamžitě. Čeká na dokončení načítání HTML a CSS.

Po dokončení se JavaScript spustí v pořadí, v jakém je kód zapsán. To má za následek, že DOM je aktualizován kódem JavaScript a vykreslen prohlížečem.

Pořadí zde je důležité. Pokud JavaScript nečekal na dokončení HTML a CSS, nebylo by možné změnit prvky DOM.

Co mohu dělat s JavaScriptem?

JavaScript je plnohodnotný programovací jazyk, který umí dělat většinu věcí, které dokáže běžný jazyk, jako je Python. Tyto zahrnují:

• Deklarování proměnných Jak deklarovat proměnné v JavaScriptuChcete-li začít s JavaScriptem, musíte porozumět proměnným. Zde jsou tři způsoby, jak deklarovat proměnné v JavaScriptu. Přečtěte si více .
• Ukládání a načítání hodnot.
• Definování a vyvolání funkcí, včetně funkce šipek.
• Definování objektů a tříd JavaScriptu.
• Načítání a používání externích modulů.
• Psaní obsluhy událostí, které reagují na události kliknutí.
• Zápis kódu serveru.
• A mnohem víc.

Varování: Od té doby JavaScript je takový mocný jazyk JavaScript a vývoj webových aplikací: Použití objektového modelu dokumentuTento č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. Přečtěte si více , je také možné psát malware, viry a hackery prohlížečů, aby je způsobili uživatelům. Od krádeže souborů cookie prohlížeče, hesel, kreditních karet až po stahování virů do počítače.

Pomocí JavaScriptu

Podívejme se na některé základy jazyka JavaScript s příklady kódu.

Deklarování proměnných

JavaScript je dynamicky zadán, což znamená, že nemusíte deklarovat typ vašich proměnných v kódu.

let num = 5; let myString = "Hello"; var úroková sazba = 0,25; 

Operátoři

Přidání

12 + 5. >> 17. 

Odčítání

20 - 8. >> 12. 

Násobení

5 * 2. >> 10. 

Divize

50 / 2. >> 25. 

Modulus

45 % 4. >> 1. 

Pole

let myArray = [1,2,4,5]; let stringArray = ["ahoj", "svět"]; 

Funkce

JavaScript umí psát funkce, zde je jednoduchá funkce, která přidává čísla.

function addNumbers (num1, num2) { návrat num1 + num2; } >> addNumbers (10,5); >> 15.

Smyčky

JavaScript může provádět smyčky pro iteraci, podobně jako smyčky pro smyčky a zatímco smyčky.

pro (nechť i = 0; i <3; i ++) {console.log ("echo!"); } >> echo! >> echo! >> echo! 

nechť i = 0; while (i <3) {console.log ("echo!"); i ++; } >> echo! >> echo! >> echo! 

Komentáře

// Napsání komentáře. 

/ * Psaní víceřádkového komentáře. Můžete použít libovolný počet řádků. rozdělit text a učinit komentáře čitelnějšími. */

Na webové stránce

Nejběžnějším způsobem načtení JavaScriptu na webové stránce je použití skript HTML značka. 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 JavaScriptu 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. Tady je.

Kromě těchto metod existují způsoby načtení kódu JavaScript na vyžádání. Ve skutečnosti existují rámce určené pro načítání a spouštění modulů JavaScriptu se správnými závislostmi vyřešenými za běhu.

To jsou pokročilejší témata, právě teď se učíte základy.

Ukázky fragmentů kódu JavaScript

Zde je několik jednoduchých ukázek kódu JavaScript, které ilustrují, jak se používá na webových stránkách. Toto jsou příklady kódu, který pracuje s DOM.

• 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. Existují spousta tutoriálů, které vás naučí, jak kódovat Freebie: Naučte se kódovat s 27 hodinami video tutoriálůBalíček Ultimate Coding Bundle, který zahrnuje pět video kurzů a 27 hodin prémiové výuky, je nyní ZDARMA. Přečtěte si více abych začal. Můžete to vyzkoušet na jakékoli webové stránce, dokonce i na této! Otevřete konzoli a vyzkoušejte nějaký kód JavaScript.

Nyní víte, co dělá JavaScript

Doufejme, že tento úvod přinesl nějaké nahlédnutí do JavaScriptu a dostane vás nadšení programováním webu. Můžete to shrnout vše náš šikovný cheat JavaScript The Ultimate JavaScript Cheat SheetZískejte rychlý opakovací test na prvky JavaScript s tímto podvádět. Přečtěte si více . O JavaScriptu se dozvíte mnohem více. Jakmile se budete cítit pohodlněji, proč to nezkusit Naučte se používat objektový model dokumentu? Můžete být také zajímat se o TypeScript Co je TypeScript a proč by to měli vývojáři vyzkoušet?Je pro vás obtížné přizpůsobit JavaScript po učení jiného programovacího jazyka? Zde je návod, jak vám TypeScript pomůže přepnout. Přečtěte si více .