Na základě populární poptávky spouštíme sérii Lekce JavaScriptu... Pokud jste odhodláni zvládnout JS, znamená to, že máte základní znalosti HTML a CSS, protože toto je základ, bez kterého je těžké pochopit, o čem se bude diskutovat.

Z naší strany se pokusím vysvětlit srozumitelným jazykem, ukázat na skutečných příkladech ze života, protože vše se učí ve srovnání.

Co je JavaScript, nebo jak porozumět tomu, za jakým účelem je při vývoji webu potřeba!

Žijeme ve světě, kde je všechno hmatatelné, realizujeme myšlenky, které se nám honí hlavou. Stavíme domy, auta, pohybujeme se pomocí různých zařízení. To znamená, že to, co můžeme dělat v reálném světě, si lze představit ve srovnání s HTML, kde funguje jako stavební materiál, základ, na kterém vše spočívá, a kdy Nápověda CSS zdobíme tento svět, děláme ho barevným, tak, jak bychom ho rádi viděli sami.

Pravděpodobně se ptáte, jestli nás obklopuje HTML a CSS, co je tedy JavaScript? Kde se to v našem světě projevuje.

Myslím, že to bude snazší vysvětlit na příkladu filmu od Garyho Pottera, myslím, že mnoho z vás to sledovalo a pochopí, o čem se bude diskutovat. Ze scénáře filmu víme, že Gary disponoval super schopnostmi, byl čarodějem a kouzelná hůlka mu v tom pomohla. Byla to kouzelná hůlka, která mu dala příležitost vytvořit magii na takové úrovni, jakou měl znalosti, aby byla jedinečná.

JavaScript je kouzelná hůlka, kterou má každý webový vývojář, ale jaké kouzlo s ním můžete vytvořit, závisí pouze na znalostech vývojáře, které vlastní. Ti, kteří zvládli daný jazyk, jsou kouzelníci a v pravdě dělají zázraky.

Jazyk JavaScript není kompletní bez komponent HTML a CSS. Mnoho programátorů zmiňuje tři jazyky, které tvoří „vrstvy“ webové stránky: HTML, CSS a JavaScript.

Html první hypertextový značkovací jazyk - poskytuje strukturální vrstvy expresivně organizující obsah stránky, jako je text, obrázky a další prvky.

Druhý, CSS(Kaskádové styly), formulář krásný design, vzhled a dojem z obsahu HTML.

A třetí - JavaScript–Přidává vrstvy chování, animuje webovou stránku, činí ji interaktivní, tj. Vytváří prvky pro interakci s návštěvníky.

Stručně řečeno, abyste zvládli jazyk JavaScript, musíte dobře rozumět HTML i CSS.

Programování se může zdát neuvěřitelnou magií mimo dosah pouhého smrtelníka. Většinu jeho konceptů však není těžké pochopit. JavaScript je pro začínající programátory docela přátelský, ale přesto je složitější než HTML nebo CSS, takže v této sérii lekcí zvládneme základní pojmy programování, abyste je mohli použít při psaní skriptů v JavaScriptu.

Seznámíte se s novými symboly () ,,; , (),!, naučíme se označení nových slov (var, null, else if), rozebereme pravidla interpunkce a syntaxi samotného jazyka a to vše za účelem fungování naší magie.

Materiál připravil Denis Gorelov, napište své komentáře a nezapomeňte tento materiál sdílet se svými přáteli.

• Překlad

Materiál, jehož překlad dnes zveřejňujeme, je věnován základům JavaScriptu a je určen začínajícím programátorům. Lze jej také považovat za malý odkaz na základní konstrukce JS. Zde konkrétně budeme hovořit o systému datových typů, o proměnných, o polích, o funkcích, o prototypech objektů a některých dalších vlastnostech jazyka.

Primitivní datové typy

JavaScript poskytuje následující primitivní datové typy: number, boolean, string, undefined, null. Hned je třeba poznamenat, že při práci s primitivními datovými typy, například s řetězcovými literály, budeme i bez provedení explicitní konverze mít přístup k jejich metodám a vlastnostem. Jde o to, že při pokusu o provedení takových operací jsou literály automaticky vybaveny příslušným obalovým objektem.

UmbersČísla

V JavaScriptu existuje pouze jeden typ čísla - čísla s plovoucí desetinnou čárkou s dvojitou přesností. To vede k tomu, že výsledky hodnocení některých výrazů jsou aritmeticky nesprávné. Možná už víte, že v JS se hodnota výrazu 0,1 + 0,2 nerovná 0,3. Současně při práci s celými čísly nejsou takové problémy pozorovány, tj. 1 + 2 === 3.

JavaScript má objekt Number, což je obálka objektu pro číselné hodnoty. Číselné objekty lze vytvořit buď pomocí příkazu jako var a = nové číslo (10), nebo se můžete spolehnout na výše popsané automatické chování systému. To zejména umožňuje vyvolat metody uložené v Number.prototype v číselných literálech:

(123) .toString (); // "123" (1,23) .toFixed (1); //"1.2 "
Existují globální funkce pro převod hodnot jiných typů na číselné typy. Jedná se o parseInt (), parseFloat () a konstrukci Number (), která v tomto případě funguje jako běžná funkce, která provádí převod typů:

ParseInt ("1") // 1 parseInt ("text") // NaN parseFloat ("1.234") //1.234 Number ("1") // 1 Number ("1.234") //1.234
Pokud se v průběhu operace s čísly získá něco, co není číslo (v průběhu některých výpočtů nebo při pokusu převést něco na číslo), JavaScript nevyvolá chybu, ale bude představovat výsledek takového operace jako hodnota NaN (Not-a-Number, not a number). Chcete -li zkontrolovat, zda je hodnota NaN, můžete použít funkci isNaN ().

Aritmetické operace JS funguje poměrně známým způsobem, ale všimněte si, že operátor + může provádět sčítání čísel i zřetězení řetězců.

1 + 1 //2 "1" + "1" //"11" 1 + "1" //"11"

TrŘetězce

Řetězce v JavaScriptu jsou sekvence znaků Unicode. Řetězcové literály se vytvářejí uzavřením textu, který má být uzavřen, ve dvojitých ("") nebo jednoduchých ("") uvozovkách. Jak již bylo zmíněno, při práci s řetězcovými literály se můžeme spolehnout na odpovídající obal objektu, jehož prototyp má mnoho užitečných metod, včetně substring (), indexOf (), concat ().

"text" .substring (1,3) // ex "text" .indexOf ("x") // 2 "text" .concat ("end") // konec textu
Řetězce, stejně jako jiné primitivní hodnoty, jsou neměnné. Metoda concat () například nemění existující řetězec, ale vytvoří nový.

▍ Booleovské hodnoty

Booleovský datový typ v JS je reprezentován dvěma hodnotami- true a false. Jazyk může automaticky převádět různé hodnoty na booleovské datové typy. Takže false, kromě logické hodnoty false, jsou hodnoty null, undefined, "" (prázdný řetězec), 0 a NaN. Všechno ostatní, včetně jakýchkoli předmětů, je skutečnou hodnotou. Probíhá logické operace vše, co je považováno za pravdu, je převedeno na pravdu a vše, co je považováno za nepravdu, je převedeno na nepravdu. Podívejte se na následující příklad. V souladu s výše uvedenými zásadami bude prázdný řetězec převeden na hodnotu false a v důsledku spuštění tohoto kódu bude do konzoly odeslán řádek This is false.

Nechť text = ""; if (text) (console.log ("This is true");) else (console.log ("This is false");)

Objekty

Objekty jsou dynamické struktury tvořené páry klíč – hodnota. Hodnoty mohou být primitivních datových typů, mohou to být objekty nebo funkce.

Objekty se nejsnadněji vytvářejí pomocí syntaxe doslovného objektu:

Nechte obj = (zpráva: „Zpráva“, doSomething: function () ())
Vlastnosti objektu lze kdykoli číst, přidávat, upravovat a mazat. Postupujte takto:

• Vlastnosti čtení: object.name, object.
• Zápis dat do vlastností (pokud vlastnost, ke které se přistupuje, neexistuje, přidejte novou vlastnost pomocí zadaného klíče): object.name = value, object = value.
• Mazání vlastností: odstranit object.name, delete object.

Zde jsou nějaké příklady:

Nechť obj = (); // vytvoření prázdného objektu obj.message = "Zpráva"; // přidat novou vlastnost obj.message = "Nová zpráva"; // upravit vlastnost delete object.message; // odebrat vlastnost
Objekty v jazyce jsou implementovány jako hashovací tabulky. Jednoduchou hashovací tabulku lze vytvořit pomocí příkazu Object.create (null):

Let french = Object.create (null); francouzsky ["yes"] = "oui"; francouzsky ["no"] = "non"; francouzsky ["ano"]; // "oui"
Pokud chcete, aby byl objekt neměnný, můžete použít příkaz Object.freeze ().

Chcete -li iterovat všechny vlastnosti objektu, můžete použít příkaz Object.keys ():

Funkce logProperty (název) (console.log (název); // název vlastnosti console.log (obj); // hodnota vlastnosti) Object.keys (obj) .forEach (logProperty);

▍Porovnávání hodnot primitivních typů a objektů

V praktická práce s primitivními hodnotami, jak již bylo zmíněno, je můžete vnímat jako objekty, které mají vlastnosti a metody, přestože to nejsou objekty. Primitivní hodnoty jsou neměnné; vnitřní struktura objektů se může měnit.

Proměnné

V jazyce JavaScript lze proměnné deklarovat pomocí klíčových slov var, let a const.

Při použití klíčového slova var můžete deklarovat proměnnou a v případě potřeby ji inicializovat nějakou hodnotou. Pokud proměnná není inicializována, její hodnota není definována. Proměnné deklarované pomocí klíčového slova var mají funkční rozsah.

Klíčové slovo let je velmi podobné varu, rozdíl je v tom, že proměnné deklarované pomocí klíčového slova let jsou blokovány.

Proměnné deklarované pomocí klíčového slova const mají také rozsah bloku, který, vzhledem k tomu, že hodnoty těchto proměnných nelze změnit, by bylo správnější nazývat je „konstanty“. Klíčové slovo const, které „zmrazí“ hodnotu proměnné deklarované pomocí ní, lze přirovnat k metodě Object.freeze (), která „zmrazí“ objekty.

Pokud je proměnná deklarována mimo jakoukoli funkci, její rozsah je globální.

Pole

Pole JavaScript jsou implementována pomocí objektů. V důsledku toho, když mluvíme o polích, ve skutečnosti diskutujeme o objektech, které vypadají jako pole. S prvky pole můžete pracovat pomocí jejich indexů. Číselné indexy jsou převedeny na řetězce a použity jako názvy pro přístup k hodnotám prvků pole. Například konstrukce podobná arr je podobná konstrukci jako arr ["1"] a obě umožní přístup ke stejné hodnotě: arr === arr ["1"]. Podle výše uvedeného je jednoduché pole deklarované příkazem let arr = ["A", "B", "C"] reprezentováno jako objekt podobný následujícímu:

(„0“: „A“, „1“: „B“, „2“: „C“)
Odstranění prvků pole pomocí příkazu delete v něm zanechá „díry“. Abyste se tomuto problému vyhnuli, můžete použít příkaz splice (), který ale funguje pomalu, protože po odebrání prvku přesune zbývající prvky pole, ve skutečnosti je přesune na začátek pole, aby levá.

Nechť arr = ["A", "B", "C"]; odstranit arr; console.log (arr); // ["A", prázdné, "C"] console.log (arr.length); // 3
Metody pole usnadňují implementaci datových struktur, jako jsou zásobníky a fronty:

// stack let stack =; stack.push (1); // stack.push (2); // let last = stack.pop (); // console.log (last); // 2 // queue let queue =; queue.push (1); // queue.push (2); // let first = queue.shift (); // console.log (first); // jeden

Funkce

Funkce v JavaScriptu jsou objekty. Funkce lze přiřadit proměnným, ukládat do objektů nebo polí, předávat jako argumenty jiným funkcím a vracet z jiných funkcí.

Existují tři způsoby, jak deklarovat funkce:

• Klasické prohlášení o funkci (prohlášení o funkci nebo prohlášení o funkci).
• Používání funkčních výrazů, nazývaných také funkční literály.
• Pomocí syntaxe funkce Arrow.

Declaration Deklarace klasické funkce

S tímto přístupem k deklarování funkcí platí následující pravidla:

• První klíčové slovo na řádku deklarace funkce je funkce.
• Funkci musíte přiřadit název.
• Funkci lze použít v kódu před jejím prohlášením zvýšením deklarace funkce na začátek rozsahu, ve kterém je deklarována.

Takto vypadá klasická deklarace funkcí:

Funkce doSomething () ()

▍Funkční výrazy

Při používání funkčních výrazů zvažte následující:

• Klíčové slovo funkce již není prvním slovem na řádku deklarace funkce.
• Název funkce je volitelný. Lze použít jak anonymní, tak pojmenované funkční výrazy.
• Příkazy pro volání takových funkcí musí následovat příkazy pro jejich deklaraci.
• Takovou funkci lze vyvolat bezprostředně po deklaraci pomocí syntaxe IIFE (Immediately Invoked Function Expression).

Funkční výraz vypadá takto:

Nechte doSomething = funkce () ()

▍Šipkové funkce

Šipkové funkce jsou v podstatě „syntaktický cukr“ pro vytváření výrazů anonymních funkcí. Je třeba poznamenat, že tyto funkce nemají své vlastní entity toto a argumenty. Deklarace funkce šipky vypadá takto:

Nechť doSomething = () => ();

AysZpůsoby volání funkcí

Funkce lze volat různými způsoby.

Normální volání funkce

doSomething (argumenty)

Volání funkce jako objektové metody

theObject.doSomething (argumenty) theObject ["doSomething"] (argumenty)

Volání funkce jako konstruktoru

new doSomething (argumenty)

Volání funkce pomocí metody apply ()

doSomething.apply (theObject,) doSomething.call (theObject, argumenty)

Volání funkce pomocí metody bind ()

nechte doSomethingWithObject = doSomething.bind (theObject); doSomethingWithObject ();
Funkce lze volat s více nebo méně argumenty, než je počet parametrů, které byly zadány při jejich deklaraci. Během provozu funkce budou argumenty „navíc“ jednoduše ignorovány (přestože k nim funkce bude mít přístup), chybějící parametry obdrží hodnotu nedefinovanou.

Funkce mají dva pseudoparametry: this a arguments.

KeywordToto klíčové slovo

Toto klíčové slovo představuje kontext funkce. Hodnota, na kterou ukazuje, závisí na tom, jak byla funkce volána. Zde jsou významy tohoto klíčového slova v závislosti na způsobu volání funkce (s příklady kódu, jejichž konstrukce jsou zde použity, jsou popsány výše):

• Běžné volání funkce je okno / nedefinováno.
• Volání funkce jako metody objektu - theObject.
• Volání funkce jako konstruktoru je nový objekt.
• Volání funkce pomocí metody apply () - theObject.
• Volání funkce pomocí metody bind () - theObject.

Klíčové slovo Argumenty

Klíčové slovo argumenty je pseudo parametr, který umožňuje přístup ke všem argumentům použitým ve volání funkce. Vypadá to jako pole, ale není to pole. Zejména nemá žádné metody pole.

Funkce RedukceToSum (celkem, hodnota) (návrat celkem + hodnota;) součet funkcí () (ať args = Array.prototype.slice.call (argumenty); návrat args.reduce (ReduToSum, 0);) součet (1,2, 3);
Alternativou ke klíčovému slovu argumenty je nová syntaxe pro zbývající parametry. V následujícím příkladu je args pole obsahující vše, co je předáno funkci při volání.

Součet funkcí (... args) (návrat args.reduce (ReduToSum, 0);)

StatementVrácení zboží

Funkce bez příkazu return vrátí undefined. Při použití klíčového slova return věnujte pozornost tomu, jak funguje mechanismus automatického vkládání středníků. Následující funkce například nevrátí prázdný objekt, ale nedefinovanou hodnotu:

Funkce getObject () (return ()) getObject ()
Chcete -li se tomuto problému vyhnout, umístěte úvodní složenou závorku na stejný řádek jako příkaz return:

Funkce getObject () (return ())

Dynamické psaní

JavaScript je dynamicky psaný jazyk. To znamená, že konkrétní hodnoty mají typy, ale proměnné nikoli. Během provádění programu lze hodnoty zapisovat do stejné proměnné odlišné typy... Zde je příklad funkce, která pracuje s hodnotami různých typů:

Protokol funkcí (hodnota) (console.log (hodnota);) log (1); log („text“); log ((zpráva: "text"));
Chcete -li zjistit typ dat uložených v proměnné, můžete použít operátor typeof ():

Nechť n = 1; typeof (n); // číslo let s = "text"; typ (y); // řetězec nech fn = function () (); typeof (fn); // funkce

Model spouštění s jedním vláknem

Modul JavaScript runtime má jedno vlákno. To je zejména vyjádřeno v nemožnosti současného provádění dvou funkcí (pokud neberete v úvahu možnosti asynchronního spouštění kódu, kterých se zde nedotýkáme). Modul runtime má takzvanou frontu událostí, která ukládá seznam úloh, které mají být zpracovány. Výsledkem je, že schéma spouštění JS s jedním vláknem nemá problém se zablokováním prostředků, takže není potřeba zamykací mechanismus. Kód, který skončí ve frontě událostí, se však musí spustit rychle. Pokud přetížíte hlavní vlákno v aplikaci prohlížeče tvrdou prací, stránka aplikace nebude reagovat na vstup uživatele a prohlížeč nabídne zavření této stránky.

Zpracování výjimek

JavaScript má mechanismus pro zpracování výjimek. Funguje podle principu, který je u takových mechanismů zcela obvyklý: kód, který může způsobit chybu, je sestaven pomocí konstrukce try / catch. Samotný kód je v try bloku, chyby jsou zpracovány v catch bloku.

Je zajímavé poznamenat, že někdy JavaScript nevydává chybové zprávy, když dojde k neobvyklé situaci. Důvodem je skutečnost, že JS před přijetím standardu ECMAScript 3 nevrhal chyby.

Například v následujícím fragmentu kódu se pokus o úpravu zmrazeného objektu nezdaří, ale nebude vyvolána žádná výjimka.

Nechť obj = Object.freeze (()); obj.message = "text";
Některé z „tichých“ chyb JS se projevují v přísném režimu, můžete je povolit pomocí konstrukce „použít přísné“; ...

Prototypový systém

Mechanismy JS, jako jsou funkce konstruktoru, příkaz Object.create () a klíčové slovo class, jsou založeny na prototypovém systému.
Zvažte následující příklad:

Nechť service = (doSomething: function () ()) nech specializovanou službu = Object.create (služba); console.log (specializovaná služba .__ proto__ === služba); // skutečný
Zde byl pomocí příkazu Object.create () vytvořen objekt specialiservice, jehož prototypem měl být objekt služby. V důsledku toho se ukazuje, že metodu doSomething () lze volat přístupem k objektu dedicatedService. To také znamená, že vlastnost __proto__ objektu specialiservice ukazuje na objekt služby.

Pojďme nyní vytvořit podobný objekt pomocí klíčového slova class:

Třída Service (doSomething () ()) třída SpecializedService rozšiřuje Service () let specializService = new SpecializedService (); console.log (dedicatedService .__ proto__ === SpecializedService.prototype);
Metody deklarované ve třídě Service budou přidány do objektu Service.prototype. Instance třídy Service budou mít stejný prototyp (Service.prototype). Všechny instance budou delegovat volání metod na objekt Service.prototype. V důsledku toho se ukazuje, že metody jsou deklarovány pouze jednou, v Service.prototype, poté jsou „zděděny“ všemi instancemi třídy.

▍ Prototypový řetězec

Objekty mohou být „dědici“ jiných objektů. Každý objekt má prototyp, jehož metody má k dispozici. Pokud se pokusíte získat přístup k vlastnosti, která není v samotném objektu, JavaScript jej začne hledat v řetězci prototypů. Tento proces bude pokračovat, dokud nebude vlastnost nalezena, nebo dokud hledání nedosáhne konce řetězce.

O funkčním programování v JavaScriptu

V Funkce JavaScriptu jsou objekty první třídy, jazyk podporuje mechanismus uzávěrů. To připravuje cestu pro implementaci technik funkčního programování v JS. Zejména mluvíme o možnosti využití funkcí vyššího řádu.

Uzavření je interní funkce, která má přístup k proměnným deklarovaným uvnitř nadřazené funkce, a to i poté, co byla nadřazená funkce spuštěna.

Funkce vyššího řádu je funkce, která může brát jiné funkce jako argumenty, návratové funkce nebo obojí.

Funkčním programováním v JS se věnuje řada publikací. Pokud vás to zajímá - zde je několik materiálů na toto téma, věnovaných

Kurz syntaxe JavaScriptu

Než začnete číst Jazykový kurz JavaScript musíte o tom vědět.

Bude velkým přínosem při učení se syntaxi JavaScriptu, pokud již znáte programovací jazyk, jako je PHP, C nebo Pascal, a také rozumíte tomu, co je to proměnná, datový typ, funkce nebo pole.

Pokud však nejste obeznámeni s programovacími jazyky, neměli byste si s tím dělat starosti JavaScript tutorial právě navrženo pro ty, kteří se začínají učit programovat poprvé.

JavaScript (JavaScript) Je programovací jazyk na straně klienta, pomocí kterého můžete ovládat prvky stránky HTML (značky HTML) a webový prohlížeč, přimět je k pohybu, reagovat na různé události (kliknutí myší, stisknutí kláves), vytvářet mnoho zajímavých programů (skriptů): testy , animace, fotogalerie (například jako ve Vkontakte), hry a mnoho dalšího.

Jak se učí JavaScript

Studie Jazyk JavaScript je obvykle rozdělen do čtyř fází:
1. Zvládnutí syntaxe JavaScriptu (tento návod),
2. Studium DOM a BOM,
3. Správa modelu DOM a kusovníku pomocí JavaScriptu,
4. Učení různých knihoven JavaScriptu. jQuery- nejoblíbenější na tento moment knihovna (Výukový program jQuery by se měl na tomto webu objevit koncem roku 2015).

DOM je objektový model dokumentu. Díky technologii DOM začínají značky HTML stránek představovat strom objektů a každý objekt v tomto stromu má svou vlastní jedinečnou adresu. Jazyk JavaScript odkazující na tuto adresu může přistupovat k té či oné značce HTML a ovládat ji (měnit barvu, velikost, pozici atd.).

Kusovník je model dokumentu založený na prohlížeči. Struktura je stejná jako u DOM, pouze místo objektů stránky HTML existují objekty prohlížeče: okno prohlížeče, velikosti obrazovky prohlížeče, historie návštěv, stavový řádek atd.

Po prostudování modelu DOM a kusovníku začnou vytvářet více či méně složité skripty JavaScript, které interagují se stránkou a prohlížečem.

Poté se s trochou známosti naučí nějakou knihovnu JavaScript, například jQuery, díky ní můžete vytvářet stejné programy jako v JavaScriptu, jen mnohem rychleji a efektivněji.

Někteří webmasteři se jQuery začínají učit hned, předchozí tři kroky přeskočí, ale nedoporučuji to dělat, protože v každém případě musíte porozumět syntaxi JavaScriptu a znát objekty DOM / BOM, jejich vlastnosti, metody a účely.

Jaké programy lze psát pomocí JavaScriptu

S pomocí můžete vytvořit mnoho zajímavých programů (skriptů):
- můžete vytvářet skripty, které změní prvky stránky webu nebo jejich umístění kliknutím na toto nebo ono tlačítko,
- můžete vytvářet animace,
- manipulovat s formuláři, například kontrolovat správnost údajů zadaných uživatelem,
- vytvořit různé testy, například typ zkoušky (školní zkoušky) a okamžitě získat výsledek,
- díky kusovníku můžete zjistit vlastnosti prohlížeče a počítače uživatele, který navštívil váš web, což vám umožňuje vytvářet různé čítače návštěv,
- pomocí JavaScriptu můžete dokonce vytvářet hry, karikatury a mnoho dalších zajímavých a užitečných programů.

Jaký je účel tohoto tutoriálu k JavaScriptu?

Účel tohoto JavaScriptové knihy je tě vzdělávat Základy syntaxe JavaScriptu, představit programování a koncepty, jako jsou proměnné, datové typy, operace, operátory větví, funkce, smyčky, pole, objekty atd. To vše najdete v jiných programovacích jazycích, takže jakmile zvládnete JavaScript, bude pro vás mnohem snazší naučit se další jazyky, jako je PHP, C ++ nebo Python.

Struktura výukového programu JavaScript

V JavaScript tutorial, budou probrána následující témata a lekce.

JavaScript - vstupuje do hry, když potřebujeme provést nějakou akci na straně klienta, který přistoupil na naši webovou stránku.

JavaScript může upravovat webovou stránku bez kontaktu se serverem, ověřovat vstupní hodnoty uživatelů a provádět jakékoli další operace.

Tento článek shromáždil základy, abyste mohli začít používat JavaScript.

Vložení skriptu přímo do kódu stránky

Kód JS můžete vložit přímo do stránky.

Odebrání kódu do samostatného souboru

Lze vyjmout JavaScriptový kód na externí soubor a použijte na něj odkaz na stránce

V tomto případě je vyžadována uzavírací značka.

Nejlepší je vložit skripty před uzavírací značku

Proměnné

Proměnné názvy

Názvy proměnných mohou začínat velkými nebo malými písmeny, podtržítkem nebo znakem $.

Název může obsahovat čísla, ale název proměnné nelze začínat číslem.

JavaScript rozlišuje velká a malá písmena: mytext a myText jsou dvě různé proměnné.

Pro pojmenování je lepší použít CamelCase s velkým písmenem každého slova v názvu proměnné.

Deklarace proměnných

K deklaraci proměnných v Javascriptu použijte var.

Var myText; // undefined myText = "Ahoj!"; alert (myText);

Ihned po deklaraci proměnné je její hodnota nedefinována.

Proměnné můžete přiřadit hodnotu při deklaraci:

Var myText = "Ahoj!";

V jedné var můžete také deklarovat více proměnných:

Var sum = 4 + 5, myText = "Ahoj!";

Při přiřazování hodnoty můžete var vynechat, ale je lepší ne.

Variabilní typy

V JavaScriptu můžete použít řetězce:

Var myText = "Dobrý den!";

celá čísla:

Var myNumber = 10;

Zlomková čísla:

var pi = 3,14;

Booleovské hodnoty:

Var isBoolean = false;

Podrobnosti syntaxe JavaScriptu

Komentáře (1)

Komentáře na jednom řádku jsou zvýrazněny "//". Cokoli po těchto postavách je považováno za komentář.

Chcete -li okomentovat více řádků, použijte „ / *“ k označení začátku komentáře a „ * /“ k označení konce komentáře.

/ * zde je komentovaný kód a je to také komentář * /

Oddělující operátoři

K oddělení operátorů musíte použít ";"

Doporučuje se, ale nevyžaduje, používat mezery ke zlepšení čitelnosti textu.

Práce s řetězci

var str = 4 + 5 + "7"

dá řetězcovou hodnotu " 97 »K str

Var str2 = "7" + 4 + 5

dá řetězcovou hodnotu " 745 „V str2

Faktem je, že hodnota během přidávání se vypočítává postupně - zleva doprava. Když jsou přidána 2 čísla, výsledkem je číslo. Když je přidán řetězec a číslo, je číslo považováno za řetězec a dva řetězce jsou zřetězeny.

Převod řetězce na číslo

Chcete -li převést řetězec na číslo, použijte parseInt () a parseFloat ()

Tyto funkce mají dva argumenty. První je řetězec, který bude přeložen na číslo, a druhý je radix, který bude použit k překladu. Interpretace řetězce jako desetinný, jako druhý argument musíte použít 10

Var myNumber = parseInt ("345", 10);

Funkce JavaScriptu

Funkce v JavaScriptu jsou deklarovány takto:

Funkce myFunction () (nějaký kód JS)

Chcete -li vrátit hodnotu, použijte vrátit se:

Funkce myMultiplication (paramOne, paramTwo) (návrat paramOne * paramTwo)

„Anonymní“ funkci můžete deklarovat vynecháním názvu funkce.

Funkci lze předat jako parametr jiné funkci zadáním jejího názvu.

Objekty

Všechno v JavaScriptu dědí z Object.

Vytvoření nového objektu

var person = nový Object (); // vytvoření objektu osoby person.firstname = "Andrew"; // přidat první atribut person.lastname = "Peterson"; // přidat druhý atribut person.getFullName = function () (// přidat metodu return this.firstname + "" + this.lastname;)

Druhá, výstižnější možnost pro vytvoření objektu

Var person = (// vytvoření osobního objektu křestní jméno: „Andrew“, příjmení: „Peterson“, getFullName: function () (vrátit this.firstname + "" + this.lastname;))

Práce s vlastnostmi objektu

var me = nový Object ();

já ["name"] = "Serg";
me.age = 33;

Pole v JavaScriptu

Vytvoření pole

var arr = new Array (11, „Hello!“, true); // Vytvořte pole

Nový způsob záznamu

Var arr =; // Vytvořte pole

Práce s poli v JavaScriptu

Počet prvků v poli

var length = arr.length; // 3

Přidání prvků do pole - push

arr.push ("Nová hodnota");

Načítání posledního prvku pole - pop

var lastValue = arr.pop ();

Kombinace polí

var arr2 =; var longArray = arr.concat (arr2); // Spojte dvě pole arr a arr2 do jednoho longArray

Připojit - sloučit všechny prvky pole

var longString = arr.join (":") // "11: Dobrý den !: true"

Porovnání a logické funkce v JavaScriptu

Víceméně

var isTrue = 6> = 5; // více nebo rovno

Rovnost

var isFalse = 1 == 2; // se rovná isTrue = 1! = 2; // nerovná se var alsoTrue = "6" == 6;

Identita

var notIdentical = "3" === 3 // false, protože datové typy se neshodují notIdentical = "3"! == 3 // true, protože datové typy se neshodují

IF prohlášení

pokud (5< 6) { alert("true!"); } else { alert("false!") }

Příkaz SWITCH

var lunch = prompt („Co chcete k obědu?“, „Sem zadejte svůj výběr oběda“); přepínač (oběd) (případ „sendvič“: console.log („Jasná věc! Jeden sendvič, blíží se.“); přestávka; případ „polévka“: console.log („Rozumím! Rajčata jsou moje oblíbené.“) ; break; case "salad": console.log ("To zní dobře! Co takhle salát caesar?"); break; case "pie": console.log ("Pie" s not a meal! "); break; default : console.log („Aha! Nejsem si jistý, co je to„ + oběd + “. Jak zní sendvič?“);)

Logické AND - &&

if (1 == 1 && 2 == 2) (upozornění („pravda!“);)

Logické NEBO - ||

if (1 == 1 || 2 == 3) (upozornění („pravda!“);)

Logické NE -!

if (! (1 == 1)) (upozornění ("nepravda!");)

Cykly

PRO

pro (var i = 0; i< 10; i = i + 1) { alert(i); } var names = [ "Sergey", "Andrey", "Petr" ]; for (var i = 0, len = names.length; i < len; i = i + 1) { alert(names[i]); }

ZATÍMCO

while (true) (// Endless loop alert („This will never stop!“);) var names = ["Sergey", "Andrey", "Petr"]; while (names.length> 0) (alert (names [i]);)

DĚLAT, ZATÍMCO

do (alert („This will never stop!“);) while (true) (// Endless loop

Řetězce

text = "Bla bla bla bla bla bla bla Eric \ bla bla bla bla Eric bla bla bla Eric bla bla \ bla bla bla bla bla bla Eric";

Podřetězce

Někdy nechcete zobrazit celýřetězec, jen jeho část. Například ve své doručené poště v Gmailu můžete nastavit, aby zobrazovalo prvních zhruba 50 znaků každé zprávy, abyste si je mohli prohlédnout. Tento náhled je a podřetězec původního řetězce (celé zprávy).

„nějaké slovo“ .podřetězec (x, y) kde x je místo, kde začínáte sekat a y je místo, kde dokončujete sekání původního řetězce.

Číselná část je trochu zvláštní. Chcete -li vybrat „on“ v „ahoj“, zadejte toto: „ahoj“. podřetězec (0, 2);

Přemýšlejte o tom, že nalevo od každého znaku je značka: 0-h-1-e-2-l-3-l-4-o-5.

Pokud seknete na 0 a znovu na 2, zůstane vám jen on.

Další příklady:

1. První 3 písmena „Batmana“
"Batman". Podřetězec (0,3)

2. Od 4. do 6. písmene „notebooku“
"laptop" .podřetězec (3.6)

• Jak vložit skript do dokumentu HTML (obecné informace);
• Komentáře JavaScriptu
• jak deklarovat proměnné a dát jim správná jména;
• analýza skriptu a syntaxe metod;
• metoda alert ();
• užitečná maličkost: „pahýl“ pro dočasně nefunkční odkaz

Od autora

Při vytváření webových stránek existuje mnoho různých jemností. Existují ale také tři velryby. Jedná se o HTML, CSS a JavaScript.

Doporučuji organizovat sebevzdělávání následovně: jakmile zvládnete syntaxi HTML a naučíte se vytvářet primitivní stránky s textem, obrázky a tabulkami, okamžitě se připojte ke studiu CSS. Jakmile pochopíte, jak pracovat s CSS, začněte zvládat JavaScript a rozšiřujte svou „slovní zásobu“ ve všech třech jazycích. Myslím, že za šest měsíců budete moci vytvořit velmi krásný a funkční web.

Dlouho jsem nevěděl, jak začít s JavaScriptem. Narazili jste na učebnice, které byly buď příliš abstraktní - teorie, teorie, a nebylo jasné, jak ji aplikovat v praxi, nebo naopak příliš konkrétní: zde je soubor hotových receptů, vezměte si je a použijte, ale jak to všechno dopadne, není tvoje malá mysl.

Jednou jsem narazil na učebnici Vadima Dunaeva. Mnoho, já vím, nadává tento návod. Kromě toho jsem si stáhl nechutný naskenovaný PDF, kde místo „()“ mohlo být například „Q“ a latinská písmena v kódech byla nahrazena (místy!) Podobnými ruskými, proto tyto kódy nefungují. Obecně jsem musel dýchat. A abych byl upřímný, kdybych předtím nic o JavaScriptu nečetl, na tyto chyby bych nepřišel a přidal bych se k počtu nadávačů. Ale pak jsem byl bez práce, byl čas se do toho ponořit a učebnice se mi líbila. Je ale velmi podrobný a je určen pro lidi, kteří již s programováním přišli do styku.

Poznámka 2012

Nyní, po několika letech, zacházím s touto učebnicí bez dřívějšího nadšení. Je zastaralý, „vybroušený“ pro IE, spíše povrchní; v kódu jsou skutečné chyby a nepřesnosti a některé užitečné věci nebyly nalezeny. Ale ve srovnání s těmi „tyap-blooper-guides“, které vyhledávače vydávaly v hojnosti, to bylo něco.

Takže se chci pokusit zabít dvě mouchy jednou ranou. Napište něco, co je pro jakoukoli konvici srozumitelné a zároveň konstruktivní a kognitivní. Aby tato konvice na základě mých rad mohla napsat jednoduchý, ale zcela originální scénář.

Vložte do dokumentu HTML

Pravděpodobně jste v HTML kódech viděli tyto značky:

Tento blábol mezi tagy je skript.

Samotná značka

Tento atribut je nepovinný. Měl by být použit buď k vyjasnění jazykové verze (javascript1.1, javascript1.2 atd.), Nebo pokud používáte jiný jazyk (např.

Atribut typu, který udává typ textu: text / javascript... Objevil se v HTML 4.0. To je to, co doporučuji použít.

Než přejdeme k atributu src, pojďme zjistit, do kterých částí kódu HTML můžete vkládat skripty.

Žádný. Ale moudře.

Skript často určuje výstup konkrétního textu, jak se říká, tady a teď. Takový skript je vložen přímo do "Na scénu."

Existují skripty s deklaracemi proměnných, které lze použít v jiných skriptech na stránce, s funkcemi, které lze volat odkudkoli z kódu HTML. Je rozumné umisťovat takové skripty mezi tagy. a .

Můžete to však také udělat tak, že skript můžete použít na několika webových stránkách najednou. K tomu musí být jeho kód zapsán do samostatného souboru s příponou .js(Například, myscript_1.js). Značky už do něj nemusíte psát.

A potom, abychom skript zavolali z webové stránky, potřebujeme tento atribut src... Funguje to stejným způsobem jako odpovídající atribut značky. :

Takto je stejné záhlaví nebo nabídka zapsaná v souboru skriptu umístěna na různých stránkách. To je obzvláště užitečné u těch hostingových služeb, kde SSI nefunguje.

Do některých atributů značek HTML můžete také vložit malé skripty, ale o tom později.

Někdy je třeba skript umístit na úplný konec tělo nebo dokonce po zavření : například pokud potřebujeme, aby skript před spuštěním prozkoumal všechny odkazy nebo všechny obrázky v dokumentu. Ale o tom později, když zjistíme, jak JavaScript funguje. Můžete nakouknout.

Komentáře (1)

Prý stále existuje několik prohlížečů, které skriptům nerozumí. Existují také maniakální uživatelé, kteří jsou v zabezpečení tak odstrčeni, že deaktivují skripty. V této situaci nebude skript spuštěn, ale jeho kód, stejný „blábol“, jednoduše vypadne na obrazovce.

Aby to nevypadlo, přikládáme to do HTML komentářů.

Mmm ... jaké jsou ty dvě lomítka před uzavřením komentáře?

Závěrečný komentář je již v "těle" skriptu. A JavaScript nerozumí těmto neohrabaným závorkám HTML ", protože se jedná o cizí těleso, které generuje chybu. Takže musíte tuto zavírací značku ve skriptu skrýt a umístit ji jako komentář JavaScriptu. V JavaScriptu komentáře trochu vypadají elegantnější: //. Po tomto znaku skript nevidí uzavírací závorku HTML a HTML bezpečně skryje text skriptu a na obrazovce nejsou vidět žádné „levé“ položky.

Jelikož jsme se dotkli komentářů, musím říci, že v JavaScriptu mají dvě formy - stejné jako v C a C ++ (a mimochodem také v CSS).

// Tato forma komentáře // funguje pouze na jednom řádku, // tj. Na každém novém řádku // musíte vložit značku komentáře. A toto je kód skriptu ... / * A tato forma komentáře působí na libovolný počet řádků, dokud nenarazí na zavírací ikonu, která zrcadlí počáteční. * / A teď znovu kód skriptu ...

Nepleťte si komentáře HTML a komentáře JavaScriptu! Jedná se o různé jazyky, přestože koexistují „v jedné láhvi“. Nebo přesněji v jedné bance. Jako pavouci ...

Vraťme se k problému starších prohlížečů. Například pomocí JavaScriptu jste ze dvou obrázků vytvořili něco jako animovaný banner. Pak můžete potěšit uživatele „chudých“ prohlížečů (a vy, doufám, nejste zcela bez altruismu), uvažováním alespoň o jednom z těchto obrázků pomocí tagu

Ve kterých editorech psát skripty

Možná existují nějaké speciální editory pro JavaScript. S takovými lidmi jsem se nesetkal a příliš jsem je nehledal. Skripty jsou obvykle psány ve stejných editorech, jaké se používají k vytváření webových stránek. Například miluji HomeSite. Psaní skriptu v těchto editorech se neliší od psaní v jednoduchém poznámkovém bloku, kromě zvýraznění kódu. A někdy hodně pomáhá. Jednou jsem si stáhl skript (z nějaké němčiny), ale nefunguje. Podíval jsem se pozorně na kód a viděl to klíčové slovo přepínač z nějakého důvodu není zvýrazněn. Dívám se - a není přepínač, ale switsch„Donnere, Wettere! Odstranil jsem dopis - a můžeme vyrazit.

Mimochodem, ve všech našich příkladech kód vypadá přesně jako v okně HomeSite.

Hned z pálky

Dalším příkladem je plagiátorství od Dunaeva. Ale je to tak jednoduché a hluboké, že nemohu odolat. Přidal jsem zde pouze několik podrobností o designu záznamu, abych je zároveň vysvětlil.

Okamžitě vás varuji: tento příklad je prakticky zcela zbytečný. Koncentruje však mnoho klíčových konceptů jazyka JavaScript a jeho syntaxe.

Skript samotný

Pokud zkopírujete tento kód na prázdnou stránku programu Poznámkový blok a uložíte jej jako soubor .html, při otevření souboru uvidíte následující:

Uvidíme, jak to vyjde.

var x = 5;

Zde deklarujeme proměnnou x, která je 5.

Stop! Víte, co je to proměnná?

Pokud ne, klikněte na toto a přečtěte si vysvětlení.

Jak funguje počítač? Všechna data jsou uložena na disku a místo, kde leží, by mělo být označeno, aby bylo jasné, kde co hledat. Jakýkoli program (a skript není nic jiného než malý program) pracuje s některými daty. Proto je vhodné okamžitě pro ně „vyplnit místo“. Na tomto místě, na tomto označená paměť a stane se proměnnou. Proč „variabilní“? Protože tuto oblast lze vyplnit různými hodnotami. Když například pracujeme s kalkulačkou, čísla a akce s nimi, které zadáme, program zapíše do odpovídajících proměnných. A když kliknete na tlačítko Spustit, převezme algoritmus pomocí hodnot, které jsme zadali.

V programovém kódu jsou proměnné označeny názvy, které pro ně vymyslíme sami. Pro vytváření jmen existují určitá pravidla, která se mohou v různých programovacích jazycích lišit. Omezení, která budou popsána níže, jsou specifická pro jazyk JavaScript.

var- klíčové slovo pro deklaraci proměnné (proměnná v angličtině).

X je název proměnné.

Omezení: V názvu proměnné lze použít pouze latinská písmena (v každém případě), čísla a podtržítko. V tomto případě by proměnná neměla začínat čísly. A žádné mezery.

Správné názvy proměnných:

Neplatné názvy proměnných:

JavaScript rozlišuje velká a malá písmena.

myvar, MyVar a myVar- různé proměnné.

(Mimochodem, o velikosti písmen. Název samotného jazyka je napsán velkými J a S: JavaScript. Existuje mylná představa, že toto je způsob, jak napsat toto slovo do HTML tagů. HTML ale nerozlišuje velká a malá písmena, takže můžete tam psát, jak chcete. Jsem zvyklý na malé, jako moje oblíbené HomeSite, některé velké.)

V tomto skriptu je proměnné přiřazena hodnota ihned po deklaraci. Není to povinné. Hodnotu lze přiřadit později. Na konci řádku je středník. V tomto případě to také není nutné. Ale ve velkých a složitých skriptech se to někdy ukazuje jako důležité, takže ukazuji úplné podrobné zadání. Dunaevova linie vypadá jednoduše x = 5, explicitní prohlášení var ani zde není nutné. Ale (IMHO) je to stále žádoucí.

V dalším řádku, jak asi tušíte, je proměnná deklarována y... Byla přiřazena hodnota relativně k již deklarované X, 3 více než X.

A poté se metoda zavolá výstraha ().

Tato metoda zobrazí dialogové okno se zprávou uvedenou v závorkách. Toto je syntaxe všech metod javascriptu: název metody a závorky s jejím obsahem.

Obsahem této metody je hodnota proměnné y a v dialogovém okně uvidíme osmičku. Chápeš proč?

Užitečná maličkost

Od té doby, co jsme se s metodou seznámili výstraha (), pak zde je jeho jednoduchá a užitečná aplikace: někdy některé stránky na webu ještě nebyly vytvořeny, ale odkazy již byly připraveny. Přistání na „stránce 404“ může být nepříjemné. Také není moc příjemné čekat, až se načte, a pak zjistit, že úsek je ve výstavbě. Vždy připojuji podobné odkazy takto:

"javascript: alert (" Tato stránka je ve výstavbě ");"> Položka nabídky

Mimochodem, toto je další způsob, jak vložit kód JavaScript do kódu HTML. Zde je vložen do atributu href značka odkazu a zadává se pomocí klíčového slova „ javascript:»(S dvojtečkou následovanou mezerou: vždy věnujte pozornost syntaktickým vědomostem). Všimněte si také tradičních dvojitých uvozovek hodnoty atributu HTML a „vnořených“ jednoduchých uvozovek v samotném skriptu.

Velmi brzy se dozvíme o speciálních atributech „události“ HTML tagů, např. při kliknutí které jsou speciálně navrženy pro vkládání kódu JavaScript a nevyžadují klíčové slovo.

Dozvěděli jsme se tedy:

jak deklarovat skript v dokumentu HTML, jaké formuláře mají komentáře JavaScriptu, jak deklarovat proměnné a dát jim správná jména a syntaxe metody a konkrétně metoda alert ().

A také se naučil: