JavaScript tutoriál: Hello world

Tento tutoriál vám pomůže začít s JavaScriptem. Vysvětluje, co potřebujete k napsání vašeho prvního programu v JavaScriptu. Začíná základy: naučíte se, kde najít a stáhnout potřebné nástroje, jak je nainstalovat, a provede vás celým procesem až po sestavení a spuštění vašeho kódu. Pokud jste nikdy předtím nepsali program v JavaScriptu, je toto místo, kde začít. Vytvořili jsme tento článek, abyste mohli začít s JavaScriptem a pokračovat k našim SMS příkladům. Pokud už JavaScript znáte, můžete přeskočit přímo k jednomu z následujících SMS projektů.

Příklady SMS v JavaScriptu:

Odeslání SMS pomocí HTTP REST API v JavaScriptu (ukázka kódu)
Odeslání více SMS pomocí HTTP REST API v JavaScriptu (ukázka kódu)
Naplánování SMS pomocí HTTP REST API v JavaScriptu (ukázka kódu)
Příjem SMS pomocí HTTP REST API v JavaScriptu (ukázka kódu)
Smazání SMS pomocí HTTP REST API v JavaScriptu (ukázka kódu)
Stažení nejnovější knihovny JavaScript SMS API z Githubu

Co je HTML

Hypertext Markup Language (HTML) je nástroj pro definování struktury webových stránek. HTML je standardní značkovací jazyk pro vytváření webových stránek. Společně s CSS vytvářejí vzhled webových stránek. HTML se skládá z řady elementů, které říkají prohlížeči, jak zobrazit obsah. V tomto tutoriálu jej použijeme k zobrazení zprávy "Hello world".

Co je JavaScript

JavaScript je skriptovací programovací jazyk. Je podobný přirozenému jazyku, jako je angličtina. Používá se ke komunikaci s počítačem. Hlavní rozdíl mezi přirozeným jazykem a programovacím jazykem je v tom, že programovací jazyky mají přísnější strukturu, aby počítač lépe porozuměl. V tomto tutoriálu použijeme JavaScript k vypsání zprávy "Hello world".

Co je webový server

Termín webový server může odkazovat na hardware nebo software, nebo na obojí pracující společně. Na hardwarové straně je webový server počítač, který slouží webovým klientům. Na softwarové straně webové servery spouštějí PHP kód, který zpracovává HTTP požadavky webových klientů.

Co je webový prohlížeč

Webový prohlížeč je aplikace pro přístup k World Wide Webu. Když uživatel požaduje webovou stránku z konkrétního webu, webový prohlížeč načte potřebný obsah z webového serveru a poté stránku zobrazí na zařízení uživatele. Funguje tak, že uživatel může vytvářet HTTP požadavky na webové servery. Pomocí webového prohlížeče můžeme přistupovat k webovému serveru zadáním jeho IP adresy nebo domény do pole URL.

Co je WAMP

WampServer odkazuje na řešení pro operační systém Microsoft Windows, které se skládá z webového serveru Apache, OpenSSL pro podporu SSL, databáze MySQL a programovacího jazyka PHP. WAMP funguje jako virtuální server na vašem počítači. Umožňuje vám testovat všechny webové funkce bez jakýchkoli následků, protože je lokalizován na vašem počítači a není připojen k internetu. Použijeme jej k hostování naší HTML webové stránky lokálně.

Jak napsat svůj první program v JavaScriptu

Pro napsání vašeho prvního programu v JavaScriptu:

Nainstalujte WAMP na svůj počítač
Nastavte WAMP server
Vytvořte nový soubor index.html
Vytvořte svůj první HTML dokument
Napište svůj první JavaScriptový kód do souboru .html
Spusťte svůj první JavaScriptový program
Otevřete režim Inspect pro oznámení chyb
Opravte chybu

Předpoklady

Počítač s Windows 10
WAMP prostředí
Prohlížeč Chrome
Příklad HTML Hello World
Příklad JavaScript Hello World

Stáhnout WAMP

V tomto videu si stáhneme WAMP server. Toto je software, který použijeme k hostování našeho JavaScriptového kódu. Nejprve musíte navštívit https://wampserver.com a stáhnout instalační program WampServer (Video 1). Po dokončení stahování bude instalační program umístěn ve vašem adresáři pro stahování v prohlížeči. Otevření tohoto exe souboru spustí instalační proces WAMP serveru.

Video 1 - Jak stáhnout WampServer (Video tutoriál)

Stáhnout WampServer

Začněte tím, že ve svém prohlížeči otevřete https://wampserver.com. Klikněte na tlačítko Stáhnout nahoře, abyste byli automaticky přesunuti do sekce stahování. Klikněte na WAMPSERVER 64 BITS (X64) pro stažení instalačního programu WampServer na váš počítač (Obrázek 1).

Instalace WAMP

Dalším krokem po stažení WampServeru je jeho instalace. Toto video vám ukáže, jak úspěšně dokončit instalaci. Otevřete instalační program, nakonfigurujte podrobnosti instalace a počkejte na dokončení procesu (Video 2). Po instalaci WAMP Serveru se automaticky spustí. Nyní, když je WAMP Server spuštěn, můžete začít programovat v JavaScriptu.

Video 2 - Jak nainstalovat WampServer (Video tutoriál)

Chcete-li napsat svůj první HTML dokument, měli byste vytvořit nový soubor index.html v adresáři \www\ WampServeru.
Cesta: C:\wamp64\www\

<!DOCTYPE html>
<html>
	<head>
		<title>Hello world!</title>
	</head>
	<body>
		<h1 id="text">Hello world!</h1>
	</body>
</html>

Kód 1 - Váš první HTML dokument

Napište svůj první HTML dokument

Toto video vám ukáže, jak můžete vytvořit HTML dokument (Video 3). Tento dokument později použijeme k jeho lokálnímu hostování. Protože na našem počítači běží WampServer, můžeme naše soubory sledovat na adrese http://localhost/. K tomu byste měli vytvořit nebo umístit svůj HTML soubor do adresáře \www\.
Cesta: C:\wamp64\www\

Video 3 - Napište svůj první HTML dokument (Video návod)

Napište a spusťte svůj první Javascript program

V tomto příkladu nahradíme text v tagu <h1> s id "text". K tomu použijeme vestavěný selektor JavaScriptu. Může se to zdát složité, ale je to snadné. Vybereme prvek s id "text" a nastavíme jeho atribut innerText (pro náš prvek je to jako lidská vlastnost) na text "Hello Ozeki!".

/*Tento JavaScript kód nahradí text v tagu,
který má id "text".*/
document.getElementById("text").innerText = "Hello Ozeki!";

Kód 2 - Váš první JavaScirpt kód

Napište a spusťte svůj JavaScript kód

Toto video ukazuje, jak můžete napsat JavaScript kód a spustit ho ve svém prohlížeči (Video 4). Samotný příkaz, který zobrazí zprávu, musí být uvnitř script tagů. Tyto tagy označují, že zde má být proveden kus Javascript kódu. Samotný kód je funkce, která má jako argument "Hello Ozeki". Po napsání a uložení kódu jej můžete spustit ve svém prohlížeči.

Video 4 - Jak napsat a spustit svůj první JavaScript kód (Video návod)

Vložte chybu do JavaScript kódu

Pokud uděláme chybu v našem JavaScript kódu, můžeme ji sledovat v režimu prohlížení prohlížeče. K tomu bychom měli kliknout pravým tlačítkem myši a vybrat Prozkoumat z menu. Nebo můžeme jednoduše stisknout (Ctrl + Shift + I). Tam vybereme Konzoli, a všechny chyby budou zobrazeny.

Co je syntaktická chyba?

Syntaktická chyba znamená "Nerozumím". Pokud mluvíte s někým anglicky a on nerozumí tomu, co říkáte, odpoví "Nerozumím". Pokud mluvíte s počítačem v JavaScriptu a počítač nerozumí tomu, co říkáte, odpoví "Syntaktická chyba".

Jak řešit syntaktickou chybu v JavaScriptu?

V kódu níže úmyslně vytvoříme syntaktickou chybu tím, že nedáme středník za řádek Hello World. Uvidíte, jak počítač reaguje, jak chybu opravíme a jak úspěšně spustíme počítačový program.

Opravte chybu ve vašem JavaScript kódu

Toto video vám ukáže, jak můžete zkontrolovat, zda je ve vašem kódu chyba, pomocí režimu Prozkoumat ve vašem prohlížeči. Toto je neuvěřitelně užitečná funkce, která vám pomůže opravit vaše chyby (Video 5). Ladicí konzole v režimu Prozkoumat zobrazuje chybové zprávy, které naznačují, co se pokazilo. Můžete kliknout na index těchto chybových zpráv a zvýraznit přesný řádek kódu, který způsobil chybu.

Video 5 - Jak opravit chybu v našem JavaScript kódu (Video návod)

Shrnutí

Výše uvedený článek je o tom, co potřebujete napsat ve svém prvním JavaScript programu, což je příkladový kód Hello World. Tento program se může zdát jednoduchý a možná toho moc nedělá, ale takto začínají velké věci; podle tohoto průvodce jste udělali první krok k tomu, abyste se stali vývojářem JavaScriptu. Znalost kódování v JavaScriptu a vytváření programů jako řešení vašich problémů vám hodně pomůže, aby práce byla plynulejší.

To, co jste se zde naučili, je cenné, na webu Ozeki jsou další užitečné průvodce, jděte do toho! Přejděme k dalšímu článku na toto téma o jak poslat SMS z JavaScriptu.

Nyní si stáhněte Ozeki SMS Gateway a pusťte se do práce!