Úvod do JavaScriptu a základní syntaxe

Když jsem se začala učit programovat, tak byl JavaScript prvním opravdovým programovacím jazykem, do kterého jsem se pustila. Protože jak mi bylo párkrát na TikToku laskavě připomenuto, učit se HTML a CSS neznamená, že se člověk učí programovat. Čemuž rozumím, první je značkovací jazyk a to druhé jsou kaskádové styly. Přesto ale pokud půjdete třeba do frontendu, tak k tomu neodmyslitelně patří. Začala jsem tedy s HTML, CSS a JavaScriptem. Možná bych to i nazvala takovou základní, svatou trojicí frontendu? Opravte mě, pokud jsem vedle. No a toto je tedy můj úvod do JavaScriptu pro vás.

Kdo se chce začít učit programovat, ať už webové aplikace, spravovat systémy, dělat na backendu nebo na frontendu, tak by měl podle mého prostě hlavně začít. Já třeba ze začátku netušila, čím vlastně chci začít a co pak chci dělat. Ale začala jsem tím, co jsem tak nějak už uměla a přidala k tomu právě JavaScript. Abych mohla interaktivně rozhýbat to, co už jsem uměla napsat v HTML a CSS. A protože jsem vlastně velmi vizuální člověk, tak jsem si nemohla vlastně vybrat líp, než říct ano frontendu. Backendu se vyhýbám jako čert kříži, protože mě stále velmi děsí.

Pokud vás zajímá, jak začít s JavaScriptem, jak třeba rozhýbat svoje webové stránky, které jsou zatím jenom statické. Pokud chcete začít programovat a nevíte, jak se odrazit. Tak možná právě tahle série bude to pravé pro vás. Připravila jsem sérii několika článků věnovaných základům JavaScriptu pro začátečníky. Budete k tomu potřebovat nějaké IDE (já používám VS Code) a prohlížeč.

Úvod do JavaScriptu – a co je JavaScript?

Původně jsem si myslela, že je JavaScript ještě starší, než já. Nakonec se však ukázalo, že tomu tak není. Je jenom o trošičku mladší. Konkrétně tu s námi straší od roku 1995, kdy byl vyvinut společností Netscape. Jde o jeden z nejpopulárnějších programovacích jazyků (možná proto jsem po něm podvědomě sáhla jako po prvním, který jsem se začala učit). Používá se k vytváření interaktivních a dynamických webových stránek. Proto je fajn, pokud vás vytváření webovek zajímá, začít se zajímat o to, jak JavaScript funguje. JavaScript jako takový se používá na straně klienta (prohlížeče), ale lze i na straně serveru, například s Node.js.

Co JavaScript není? Není to Java. Ač mají podobný název, podobnou syntaxi, tak jde o dva odlišné programovací jazyky.

Výhody a nevýhody JavaScriptu

Tvrdí to internet a osobně si to myslím i já, že hlavní výhodou JavaScriptu je to, že má vcelku jednoduchou syntaxi. Ne třeba tak jako Python, ale furt to není nic komplikovaného, z čeho by se člověku zamotala hlava jako na horské dráze.

Výhody JavaScriptu:

1. Interaktivita: JavaScript umožňuje vytvářet interaktivní webové stránky, kde se stránka může dynamicky měnit podle uživatelova vstupu a nezávisle na serveru. Díky tomu jsou webové stránky pro uživatele mnohem pohodlnější a efektivnější.
2. Podpora: JavaScript je podporován téměř všemi moderními webovými prohlížeči. To znamená, že vývojáři používají JavaScript k tvorbě webových stránek a aplikací, které jsou dostupné pro většinu uživatelů.
3. Snadnost použití: JavaScript je relativně snadný jazyk k použití a naučení. S pomocí mnoha knihoven a frameworků mohou i začátečníci rychle vytvářet vlastní webové stránky a aplikace.
4. Rozšiřitelnost: JavaScript umožňuje rozšiřovat funkce a možnosti webových stránek pomocí různých knihoven a pluginů, jako jsou například jQuery, React, nebo Angular.

Nevýhody JavaScriptu:

1. Bezpečnost: JavaScript běží na straně klienta, což znamená, že může být zneužit pro útoky jako cross-site scripting (XSS). Kód JavaScriptu je třeba psát opatrně a s omezenými přístupy k citlivým datům.
2. Výkon: JavaScript může být pomalý na starších zařízeních a prohlížečích, což může vést k zpoždění v načítání webových stránek a aplikací.
3. Kompatibilita: Ne všechny prohlížeče interpretují JavaScript stejně. To znamená, že vývojáři testují svůj kód na různých prohlížečích, aby se ujistili, že funguje správně pro všechny uživatele.
4. Omezení: Pokud uživatel má zakázáno používat JavaScript, nemůže používat webové stránky nebo aplikace, které ho používají, což může být pro některé uživatele problém.

Jak JavaScript funguje?

Už jsem to tu zmínila – běží na straně klienta. To znamená, že běží v prohlížeči uživatele, který si danou stránku v prohlížeči otevře. Neběží na serveru. Kód se běžně vkládá do HTML stránek pomocí značky <script>. A když někdo danou stránku otevře, tak prohlížeč načte tento kód a spustí ho. A to umožňuje už několikrát zmiňovanou interaktivitu a dynamiku na stránce.

Základní syntaxe a struktura JavaScriptového kódu

Kolují řeči, že JavaScriptová syntaxe je vcelku jednoduchá. No je samozřejmě na každém, co považuje za jednoduché. Obecně se JavaScript bere jako programovací jazyk vhodný pro začátečníky. Základem jsou proměnné, do kterých se ukládají hodnoty. Najdeme zde také operátory, které nám umožňují provádět s hodnotami různé operace.

Nesmíme zapomenout ani na datové typy, kterými jsou třeba string (řetězec), integer (číslo) a boolean (true&false). Pak jsou podmínky – if/else, cykly – for/while, a funkce, které umožňují kód strukturovat a usnadnit jeho čitelnost a úpravu.

Proměnné v JavaScriptu se deklarují pomocí klíčového slova “let” nebo “const” následované názvem proměnné a přiřazením hodnoty, například:

let x = 5 // integer
const y = "Hello" // string
const z = true // boolean

Příkladem jednoduché funkce může být například toto:

function add(a, b) {
  return a + b;
}

add(5, 6) // voláme funkci, která nám vrátí součet a + b, tedy 11

Podmínky se v základu píší takto, za předpokladu použití pouze if/else:

if (x > y) {
  console.log("x je větší než y");
} else {
  console.log("y je větší než x");
}

Vkládání JavaScriptového kódu do HTML stránky

JavaScriptový kód se vkládá do HTML stránky pomocí značky <script>, jak už bylo zmíněno. Tuto značku umístíme buď přímo do zdrojového kódu HTML stránky, nebo odkazem na externí JavaScriptový soubor.

Příklad vložení přímo do HTML souboru:

<!DOCTYPE html>
<html>
<head>
	<title>Název dokumentu</title>
</head>
<body>
	<h1>Hello world!</h1>

	<script>
		// JavaScriptový kód
		console.log("Hello, world!");
	</script>
</body>
</html>

Mnohem lepší, přehlednější a udržitelnější je ovšem psát JavaScript do samostatného externího souboru. Vložení JavaScriptového kódu do HTML stránky totiž přináší i některé nevýhody. Kód umístěný přímo v HTML stránce zpomaluje načítání stránky, protože se musí nejprve stáhnout celá stránka a poté se spustí JavaScriptový kód. Další nevýhodou může být nutnost psát JavaScriptový kód přímo v HTML stránce, což může být nepraktické pro větší projekty.

Vložení do HTML souboru přes externí JavaScript soubor:

<!DOCTYPE html>
<html>
<head>
	<title>Název dokumentu</title>
</head>
<body>
	<h1>Hello World!</h1>
</body>
	<script type="text/javascript" src="script.js"></script>
</html>

Externí JavaScriptové soubory mají několik výhod. Jednou z nich je možnost sdílení kódu mezi více stránkami webu. Pokud máte například stejnou funkcionalitu implementovanou v různých částech webu, můžete tuto funkcionalitu napsat pouze jednou v externím souboru a ten poté použít na všech stránkách, které tuto funkcionalitu potřebují. Díky tomu se sníží objem kódu na stránce a zvýší se jeho čitelnost.

Toto byl úvod do JavaScriptu 🙂 další články o JavaScriptu můžete najít na mém blogu v kategorii JavaScript.