JavaScriptový program je sekvence instrukcí (příkazů). Někdy se instrukce také nazývají příkazy JavaScriptu.

Aby byl program spuštěn, musí být spuštěn. Pokud je program klientským skriptem, je automaticky spuštěn prohlížečem, ale pouze pokud je samozřejmě přítomen v kódu stránky. Prohlížeč spustí program, obvykle během načítání webové stránky.

Při psaní pokynů je nutné je oddělit středníkem. JavaScript umožňuje vynechat středník na konci příkazu if další instrukce začne s nový řádek.

Ukončení příkazů středníkem v JavaScriptu není vyžadováno, pokud bude další příkaz zapsán na nový řádek, ale je to vysoce doporučeno. Je také vhodné umístit každý pokyn na samostatný řádek.

Pokyny JavaScriptu se skládají z: hodnot, operátorů, výrazů, klíčových slov a komentářů.

Tato instrukce například říká prohlížeči, aby napsal "Ahoj, světe!" uvnitř HTML prvek s id="main":

Document.getElementById("main").textContent = "Ahoj světe!";

Význam JavaScriptu

Syntaxe JavaScriptu definuje následující typy hodnot: pevné hodnoty (literály), konstantní hodnoty a proměnné hodnoty.

Příklady literálů reprezentujících různé hodnoty v JavaScriptu:

17 // celočíselný literál 23,8 // zlomkový číselný literál "HTML" // řetězcový literál "HTML" // řetězcový literál true // booleovský literál // maticový literál // maticový literál () // objektový literál ( name: "Dennis " , language: "ru" ) // objektový literál (ab|bc) // literál regulárního výrazu

V programovacích jazycích se k ukládání datových hodnot používají konstanty a proměnné.

K deklaraci konstant se používá klíčové slovo const, variables – var a let.

Const MAX_LENGTH = 17; // konstantní var section = "HTML"; // proměnná let arr = ["HTML","CSS"]; // proměnná

let je nový způsob deklarace proměnných, který se objevil od verze ES-2015 (ES6). Let se liší od var tím, že proměnná deklarovaná pomocí let má jiný rozsah (rozsah bloku) a také tím, že k ní lze přistupovat až poté, co byla vytvořena.

Operátoři JavaScriptu

V JavaScriptu existuje mnoho různých operátorů. Označují operaci, kterou je třeba provést.

Podle počtu operandů, se kterými operátor operuje, se dělí na binární a unární. JavaScript má ale také podmíněný operátor, který se skládá ze 3 operandů. Tento operátor se nazývá ternární.

Například operátor přiřazení (= znaménko):

// operand1 = operand2; coorX = 100; // například přiřaďte číslo 100 proměnné coordX

Tento operátor se používá k přiřazení (nastavení) operandu1 stejné hodnotě jako operand2 .

Operátor přiřazení je binární, protože funguje na dvou operandech.

Ke zvýšení se používá například operátor inkrementace (znak ++). číselná hodnota operand na 1:

Var num = 5; ++num; // 6

Operátor přírůstku je unární, protože funguje na jednom operandu.

JavaScriptové výrazy

Výraz je kombinací hodnot, proměnných a operátorů, které buď přiřadí hodnotu proměnné, nebo vrátí hodnotu bez jejího přiřazení.

Například výraz num = 955,47 používá operátor = k přiřazení hodnoty 7 proměnné num.

Například výraz "Ahoj, " + "Timofey" používá operátor + k přidání řetězců "Ahoj, " a "Timofey" bez přiřazení.

Klíčová slova JavaScriptu

Pokyny pro JavaScript často začínají klíčovým slovem. Toto (klíčové slovo) má určit, jakou akci JavaScriptu je třeba provést.

Například klíčové slovo var říká prohlížeči, aby vytvořil proměnné:

Var coordX = 5, coordY = 130;

Seznam některých klíčových slov: break, continue, do ... while, for, function, if ... else, return, switch, try ... catch, var.

Komentáře v JavaScriptu

Ne všechny příkazy JavaScriptu jsou spustitelné.

Kód za dvojitými lomítky // nebo mezi /* a */ je považován za komentář.

Komentáře jsou ignorovány a neprováděny:

Var direction = "top"; // jednořádkový komentář // var speed = 10; tato instrukce nebude provedena /* Funkce, která přidá třídu show k prvku s id="myBtn" */ function showBtn() ( document.getElementById("myBtn").classList.add("show"); )

// - je jednořádkový komentář, tzn. jakýkoli text mezi // a koncem řádku bude JavaScriptem ignorován (nebude spuštěn).

/* */ je víceřádkový komentář, jakýkoli text mezi /* a */ bude JavaScriptem ignorován.

Instrukční blok JavaScriptu

Pokyny JavaScriptu lze seskupit pomocí bloku (složené závorky (...)).

Obvykle se používá ve funkcích, řídicích strukturách (for, while) atd.

Funkce myFunction() ( document.getElementById("id__1").textContent = "Text 1..."; document.getElementById("id__2").textContent = "Text 2..."; )

Rozlišování malých a velkých písmen

JavaScript je jazyk citlivý na velká a malá písmena. To znamená, že klíčová slova, proměnné, názvy funkcí a další jazykové identifikátory musí obsahovat stejnou sadu velkých a malých písmen. Například metoda upozornění by měla být zadána pouze jako alert , nikoli Alert , ALERT atd.

Mezera v JavaScriptu

JavaScript ignoruje více mezer. Do skriptu můžete přidat mezery, aby byl čitelnější.

Následující řádky jsou ekvivalentní:

Var str = "Text"; var str="Text";

Délka řádku kódu

Pokud je instrukce JavaScriptu dlouhá, je vhodné ji přerušit. Ve většině případů je lepší porušit pokyn po nějakém operátorovi.

Například:

Document.getElementById("aside__nav_header").innerHTML = "Další navigace (podle sekce)";

• název skládající se z jednoho slova by měl být napsán malými písmeny (například: článek);
• jméno skládající se z několika slov by mělo být psáno malými písmeny dohromady, kromě písmen na spojnici slov by měla být psána velkými písmeny (například: článekTitul);
• počet slov v názvu by neměl překročit 3 (například: articleDatePublishedon)
• proměnné (ne pro ukládání funkcí) a vlastnosti objektu musí být podstatná jména (například: textComment);
• pole a kolekce hodnot by měly být specifikovány podstatnými jmény v množný(například: lastComments);
• funkce a metody objektů musí být pojmenovány pomocí sloves (například: getLastArticles);
• názvy tříd musí začínat velkým písmenem (například: Komentáře).

JavaScript lze implementovat pomocí Operátoři JavaScriptu, které jsou umístěny v HTML tagy skript ... /script na webové stránce.

Značky skriptu obsahující váš JavaScript můžete umístit kamkoli na svou webovou stránku, ale obecně se doporučuje ukládat je do značek head.

Značka skriptu upozorní program prohlížeče, aby začal interpretovat veškerý text mezi těmito značkami jako skript. Jednoduchá syntaxe vašeho JavaScriptu by vypadala takto.

JavaScript kód

Značka skriptu obsahuje dva důležité atributy -

• Jazyk – Tento atribut označuje, jaký skriptovací jazyk používáte. Jeho hodnota bude obvykle javascript. Ačkoli nedávné verze HTML (a XHTML, jeho nástupce) přestaly tento atribut používat.
• Typ. Tento atribut se nyní doporučuje k označení použitého skriptovacího jazyka a jeho hodnota by měla být nastavena na "text/javascript".

Váš segment JavaScript by tedy vypadal takto:

JavaScript kód

Váš první skript JavaScript

Vezměme si příklad výtisku „Ahoj světe“. přidali jsme dodatečný komentář HTML, který obklopuje náš kód JavaScript. Důvodem je uložení našeho kódu z prohlížeče, který nepodporuje JavaScript. Komentář končí "// ->". Zde „//“ znamená komentář v JavaScriptu, takže jej přidáváme, aby prohlížeč nemohl přečíst konec komentáře HTML jako součást kódu JavaScript. Poté zavoláme funkci document.write, která zapíše řetězec do našeho HTML dokumentu.

Tuto funkci lze použít k psaní textu, HTML nebo obojího. Podívejte se na následující kód.

Tento kód poskytne následující výsledek:

Ahoj světe!

Mezery a zalomení řádků

JavaScript ignoruje mezery, tabulátory a nové řádky, které se objevují v programech JavaScript. Ve svém programu můžete volně používat mezery, tabulátory a nové řádky a můžete formátovat a odsazovat své programy úhledným a konzistentním způsobem, aby byl váš kód snadno čitelný a srozumitelný.

Středníky v JavaScriptu

V jednoduché instrukce v JavaScriptu je obvykle následován středníkem, jako v C, C++ a Java. JavaScript vám však umožňuje tento středník přeskočit, pokud umístíte každý ze svých příkazů na samostatný řádek. Například následující kód lze napsat bez středníků.

Ale při formátování v jednom řádku, jako je tento, musíte použít středníky -

Poznámka. Dobrý trénink programování je používat středníky.

Rozlišování malých a velkých písmen

JavaScript je jazyk citlivý na velká a malá písmena. To znamená, že klíčová slova, proměnné, názvy funkcí a jakékoli další identifikátory musí být vždy zadávány s konzistentním velkým písmenem.

Takže identifikátory Time a TIME budou JavaScriptu předávat různé významy.

POZNÁMKA. Při psaní názvů proměnných a funkcí v JavaScriptu byste měli být opatrní.

Když se člověk učí psát, musí se naučit základy pravopisu, gramatiky a pravopisu. Každý například ví, že věta začíná na velké písmeno a končí tečkou, text se dělí na odstavce atp.

Programovací jazyky fungují podobným způsobem: aby program fungoval, musí být dodržována určitá pravidla. Sada pravidel, která definují strukturu programovacích jazyků, se nazývá syntaxe. Mnoho programovacích jazyků je postaveno na stejných konceptech, ale používají jinou syntaxi.

Tento tutoriál vás seznámí se základy syntaxe a strukturování kódu v JavaScriptu.

Funkčnost a čitelnost

Funkčnost a čitelnost jsou velmi důležité aspekty syntaxe JavaScriptu, na které je třeba se zaměřit samostatně.

Některá pravidla syntaxe jsou pro kód JavaScript povinná. Pokud nejsou splněny, konzole vyhodí chybu a skript se zastaví.

Zvažte tuto chybu v programu „Hello, World!“.

// Příklad nefunkčního programu JavaScript
console.log("Ahoj, světe!"

Na konci chybí uzavírací závorka, takže místo řádku „Ahoj, světe!“ program vrátí chybu:

Uncaught SyntaxError: missing) po seznamu argumentů

Chcete-li, aby skript pokračoval v běhu, musíte přidat závorku. Takto může chyba v syntaxi JavaScriptu ovlivnit chod programu.

Některé aspekty syntaxe a formátování JavaScriptu pocházejí z různých pohledů. Jednoduše řečeno, existují stylistická pravidla a varianty, které jsou volitelné a nezpůsobují chyby při spouštění kódu. Existuje však také mnoho obecných konvencí, které je rozumné sledovat, aby vývojáři projektů a kódu věděli o aktualizacích stylu a syntaxe. Dodržování běžných konvencí zlepší čitelnost vašeho kódu.

Zvažte následující tři možnosti přiřazení hodnoty proměnné:

const greeting="Ahoj"; // žádné mezery mezi proměnnou a řetězcem
const pozdrav = "Dobrý den"; //nadměrná mezera po přiřazení
const pozdrav = "Dobrý den"; // jeden prázdný znak mezi proměnnou a řetězcem

Všechny tři výše uvedené řádky budou fungovat stejně. Ale třetí možnost (pozdrav = "Dobrý den") je zdaleka nejpoužívanějším a nejčitelnějším způsobem zápisu kódu, zvláště když se na něj díváte v kontextu většího programu.

Je velmi důležité sledovat integritu a konzistenci veškerého programového kódu.

Níže se podíváme na několik příkladů, abychom se seznámili se syntaxí a strukturou kódu JavaScript.

Prázdné znaky

Mezi znaky JavaScriptu jsou mezery, tabulátory a posuny řádků (tato akce se provádí klávesou Enter). Jak bylo uvedeno výše, přebytečné bílé místo mimo řádek, prázdné místo mezi operátory a další znaky jsou interpretem JavaScriptu ignorovány. To znamená, že následující tři příklady přiřazení proměnných budou mít stejný výsledek:

const userLocation = "New York City, " + "NY";
const userLocation="New York City, "+"NY";
const userLocation = "New York City, " + "NY";

Proměnná userLocation bude mít hodnotu „New York City, NY“ bez ohledu na styl přiřazení této hodnoty. U JavaScriptu je jedno který prázdné znaky Jsou používány.

Při psaní programů existuje jedno osvědčené pravidlo: když používáte mezery, dodržujte stejná pravidla, která používáte v matematice nebo gramatice. Například řádek:

snadněji čitelné než:

Důležitou výjimkou z tohoto pravidla je přiřazení více proměnných. Všimněte si pozice = v následujícím příkladu:

const companyName = "Mojespolečnost";
Const CompanyHeadquarters = "New York City";
const companyHandle = "moje společnost";

Všechny operátory přiřazení (=) jsou zarovnány na jeden řádek pomocí mezer. Tento typ struktury není používán všemi bázemi kódu, ale může zlepšit čitelnost.

Další zalomení řádků jsou v JavaScriptu také ignorovány. Zpravidla navíc prázdné řádky se vkládají nad komentář a za blok kódu.

Kulaté závorky

Klíčová slova jako if, switch a for mají obvykle před a za závorkami mezery. Zvažte následující příklad:

// Příklad syntaxe příkazu if
pokud () ( )
// Zkontrolujte matematickou rovnici a vytiskněte řetězec do konzole
pokud (4< 5) {
console.log("4 je menší než 5.");
}
// Příklad syntaxe cyklu for
pro () ( )
// Opakujte 10krát a vytiskněte každé číslo iterace do konzole
for (ať i = 0; i 0) (
čtverec(číslo);
}

Buďte opatrní, protože ne každý kód uzavřený ve složených závorkách středník nevyžaduje. Objekty jsou uzavřeny ve složených závorkách a musí končit středníkem.

// Příklad objektu
const název_objektu = ();
// Inicializace trojúhelníkového objektu
konstantní trojúhelník = (
typ: "pravý",
úhel: 90,
strany: 3,
};

Je běžnou praxí umisťovat středníky za každý příkaz a výraz JavaScriptu kromě těch, které končí složenými závorkami.

Strukturování kódu

Technicky lze veškerý kód v programu JavaScript umístit na jeden řádek. Ale takový kód je velmi obtížné číst a udržovat. Proto je program rozdělen do řádků.

Například příkaz if/else lze napsat na jeden řádek nebo jej rozdělit:

// Podmíněný příkaz napsaný na jednom řádku
if (x === 1) ( /* spustit kód, pokud je pravda */ ) else ( /* spustit kód, pokud je nepravda */ )
// Podmíněný příkaz s odsazením
if (x === 1) (
// spustit kód, pokud je true
) jinak (
// spustit kód, pokud je false
}

Upozornění: jakýkoli kód obsažený v bloku je odsazen. Můžete odsadit pomocí dvou mezer, čtyř mezer nebo tabulátorů. Výběr metody odsazení závisí pouze na osobních preferencích nebo doporučeních vaší organizace.

Otevřená závorka na konci prvního řádku je běžný způsob strukturování příkazů a objektů JavaScriptu. Někdy jsou závorky umístěny na samostatných řádcích:

// Podmíněný příkaz se složenými závorkami na nových řádcích
if (x === 1)
{
// spustit kód, pokud je true
}
jiný
{
// spustit kód, pokud je false
}

Tato struktura se v JavaScriptu, stejně jako v jiných jazycích, používá jen zřídka.

Vnořené příkazy musí být odděleny:

// Inicializace funkce
funkce jeEqualToOne(x) (
// Zkontrolujte, zda se x rovná jedné
if (x === 1) (
// při úspěchu vrátí true
vrátit true;
) jinak (
vrátit false;
}
}

Díky správnému odsazení je kód čitelný. Jedinou výjimkou z tohoto pravidla, kterou je třeba mít na paměti, je, že komprimované knihovny odstraňují všechny nepotřebné symboly, aby se zmenšila velikost souboru.

Identifikátory

Názvy proměnných, funkcí nebo vlastností v JavaScriptu se nazývají identifikátory. Identifikátory se skládají z písmen a číslic, ale nemohou obsahovat znaky přesahující $ a _ a nemohou začínat číslem.

Rozlišování malých a velkých písmen

U jmen se rozlišují velká a malá písmena. To znamená, že myVariable a myvariable budou považovány za dvě různé proměnné.

var mojeProměnná = 1;
var mojeproměnná = 2;

Podle obecné konvence se jména píší velbloudím písmem: první slovo se píše malým písmenem, ale každé následující slovo začíná velkým písmenem. Globální proměnné nebo konstanty se píší velkými písmeny a oddělují se podtržítky.

const INSURANCE_RATE = 0,4;

Výjimkou z tohoto pravidla jsou názvy tříd, kde každé slovo obvykle začíná velkým písmenem (PascalCase).

// Inicializace třídy
třída PříkladClass (
konstruktor()
}

Chcete-li zajistit čitelnost kódu, musíte identifikátory používat konzistentně ve všech programových souborech.

Vyhrazená klíčová slova

Identifikátory také nesmí obsahovat žádná vyhrazená klíčová slova. Klíčová slova jsou slova JavaScriptu, která mají vestavěnou funkci. Patří mezi ně var, if, for a this.

Nemůžete například přiřadit hodnotu proměnné s názvem var.

var var = "Nějaká hodnota";

JavaScript zná klíčové slovo var, takže vyvolá chybu:

SyntaxError: Neočekávaný token (1:4)