Struktura kódu

První věc, kterou prostudujeme, jsou stavební kameny kódu.

Prohlášení

Příkazy jsou syntaktické konstrukce a příkazy, které provádějí akce.

Již jsme viděli prohlášení alert('Hello, world!') , která zobrazuje zprávu „Ahoj, světe!“.

V našem kódu můžeme mít tolik příkazů, kolik chceme. Příkazy lze oddělit středníkem.

Zde například rozdělíme „Hello World“ na dvě upozornění:

alert('Hello'); alert('World');

Obvykle se příkazy píší na samostatné řádky, aby byl kód čitelnější:

alert('Hello');
alert('World');

Středníky

Středník může být ve většině případů vynechán, pokud existuje zalomení řádku.

To by také fungovalo:

alert('Hello')
alert('World')

Zde JavaScript interpretuje zalomení řádku jako „implicitní“ středník. Toto se nazývá automatické vkládání středníků.

Ve většině případů nový řádek znamená středník. Ale „ve většině případů“ neznamená „vždy“!

Jsou případy, kdy nový řádek neznamená středník. Například:

alert(3 +
1
+ 2);

Výstup kódu 6 protože JavaScript sem středníky nevkládá. Je intuitivně zřejmé, že pokud řádek končí plusem "+" , pak je to „neúplný výraz“, takže středník by tam byl nesprávný. A v tomto případě to funguje tak, jak bylo zamýšleno.

Jsou však situace, kdy JavaScript „nepřevezme“ středník tam, kde je to skutečně potřeba.

Chyby, které se v takových případech vyskytují, je poměrně těžké najít a opravit.

Příklad chyby

Pokud vás zajímá konkrétní příklad takové chyby, podívejte se na tento kód:

alert("Hello");

[1, 2].forEach(alert);

Není třeba přemýšlet o významu závorek [] a forEach dosud. Budeme je studovat později. Prozatím si pamatujte výsledek spuštění kódu:ukazuje Hello a poté 1 a poté 2 .

Nyní odstraníme středník za alert :

alert("Hello")

[1, 2].forEach(alert);

Rozdíl oproti výše uvedenému kódu je pouze jeden znak:středník na konci prvního řádku je pryč.

Pokud spustíme tento kód, pouze první Hello (a došlo k chybě, možná budete muset otevřít konzolu, abyste ji viděli). Už nejsou žádná čísla.

Je to proto, že JavaScript nepředpokládá středník před hranatými závorkami [...] . Kód v posledním příkladu je tedy považován za jeden příkaz.

Motor to vidí takto:

alert("Hello")[1, 2].forEach(alert);

Vypadá to divně, že? Takové sloučení je v tomto případě prostě špatné. Za alert musíme vložit středník aby kód fungoval správně.

To se může stát i v jiných situacích.

Mezi příkazy doporučujeme vkládat středníky, i když jsou odděleny novými řádky. Toto pravidlo je široce přijímáno komunitou. Ještě jednou poznamenejme – je to možné většinu času vynechávat středníky. Je však bezpečnější – zejména pro začátečníky – je používat.

Komentáře

Jak čas plyne, programy jsou stále složitější. Je nutné přidat komentáře které popisují, co kód dělá a proč.

Komentáře lze vkládat na libovolné místo ve skriptu. Neovlivňují jeho provádění, protože je motor jednoduše ignoruje.

Jednořádkové komentáře začínají dvěma lomítky // .

Zbytek řádku je komentář. Může zabírat celý svůj vlastní řádek nebo může následovat za příkazem.

Jako zde:

// This comment occupies a line of its own
alert('Hello');

alert('World'); // This comment follows the statement

Víceřádkové komentáře začínají lomítkem a hvězdičkou /* a končí hvězdičkou a lomítkem */ .

Takhle:

/* An example with two messages.
This is a multiline comment.
*/
alert('Hello');
alert('World');

Obsah komentářů je ignorován, pokud tedy vložíme kód do /* … */ , neprovede se.

Někdy může být užitečné dočasně zakázat část kódu:

/* Commenting out the code
alert('Hello');
*/
alert('World');
Používej klávesové zkratky!

Ve většině editorů lze řádek kódu okomentovat stisknutím Ctrl+/ klávesová zkratka pro jednořádkový komentář a něco jako Ctrl+Shift+/ – pro víceřádkové komentáře (vyberte část kódu a stiskněte klávesovou zkratku). Pro Mac zkuste Cmd místo Ctrl a Možnost místo Shift .

Vnořené komentáře nejsou podporovány!

Nemusí být /*...*/ uvnitř jiného /*...*/ .

Takový kód zanikne s chybou:

/*
 /* nested comment ?!? */
*/
alert( 'World' );

Neváhejte prosím svůj kód okomentovat.

Komentáře zvyšují celkovou stopu kódu, ale to vůbec není problém. Existuje mnoho nástrojů, které minimalizují kód před publikováním na produkční server. Odstraňují komentáře, takže se nezobrazují v pracovních skriptech. Komentáře tedy vůbec nemají negativní dopad na produkci.

Později v tutoriálu bude kapitola Kvalita kódu, která také vysvětluje, jak psát lepší komentáře.