Přizpůsobený překlad článku "Full-Stack JavaScript za šest týdnů: průvodce učebně"

Vývoj webu je jedním z nejjednodušších a nejoblíbenějších pokynů mezi začínajícími programátory. Pro práci docela kdokoliv textový editor a prohlížeč, není nutné studovat algoritmy na pokročilé úrovni, výsledek každého kroku psaní programu je vizuálně - obecně, mnoho výhod. Klíčové dovednosti v kontextu vývoje webu jsou považovány za znalosti JavaScript.

Nyní se JavaScript vyvíjí velmi rychle, a proto se naučí jazyk snadno zaměňovat. Nabízíme Vám kurikulum s pohodlnou strukturou, která pokrývá všechny nezbytné aspekty JavaScriptu a souvisejících technologií.

Proč JavaScript?

Stojí za zmínku otevřenost jazyka - společnosti, obvykle soutěžit mezi sebou, spolupracovat na vývoj Javascriptu. Jazyk je velmi flexibilní a bude vyhovovat příznivcům objektu orientovaného i funkčního přístupu. Obrovský počet knihoven a rámců umožňuje snadno vyřešit všechny typy úkolů a náplní server Node.js je možné použít jazyk nejen v prohlížeči, ale také v konzole. Můžete dokonce zapsat stolní počítače a mobilní aplikace: Nejprve - s rámcem elektronů a druhý je na Nativerscript nebo reagovat nativní.

Základy

Zpočátku je nutné studovat základní pojmy JavaScript, vývoj webu a programování jako celku:

• objektově orientované JS - návrháři a továrny, dědictví;
• funkční JS - funkce vyššího řádu, uzávěry, rekurze;
• specifikace jasmínového testu;
• základy HTML, CSS a jQuery.

Git.

Git je nástroj, který potřebujete pro vývojáře, takže potřebuje co nejdříve. Zde jsou základní dovednosti, které musíte mít:

• vytváření a pohybování souborů v adresářích;
• inicializace a spáchání v git;
• nastavení repozitářů v GitHub.

Algoritmy a datové struktury

Pak stojí za to zkoumat algoritmy (zejména pojetí složitosti algoritmů), stejně jako základní datové struktury: připojené seznamy, fronty, zásobníky, binární vyhledávání stromů a hash stůl. To vám pomůže.

Backend.

Node.js.

Před 10 lety, JavaScript mohl být použit pouze pro rozvoj předního financování. Díky node.js, případ není omezen na jednu "front". Uzel je jen prostředím pro provádění kódů JS na straně serveru, takže nebudete muset studovat novou syntaxi, ale budete muset importovat a exportovat soubory, rozdělit kód na moduly a používat Správce balíčků NPM.

Servery, http, express.js

Po studiu uzlu je nutné i nadále seznámit se s vývojem backend a vyřešit servery a směrování. Můžete začít z portů a protokolů s důrazem na HTTP a potom vezměte knihovnu Express - uzel pro zpracování požadavků.

Asynchronní JavaScript.

Databáze, schémata, modely a ORM

Databáze jsou jedním z nejdůležitějších prvků vývoje webu. Pokud vaše aplikace musí stáhnout nebo ukládat všechna data, která nejsou ztracena při aktualizaci stránky, bude muset použít databázi. Je nutné se naučit rozlišovat mezi relačními a bez relačních databází a pochopit typy připojení. Pak se seznámit s jinými. Schopnost pracovat s ORM nebude také nadbytečná.

Frontend

Html a css.

HTML a CSS je základem základů pro všechny webové vývojáře. Nemusíte je dokonale znát, ale měli byste jim porozumět. Můžete také prozkoumat jakoukoliv populární knihovnu (například Bootstrap) a CSS PreProcessor jako Sass - pomůže, aby CSS podobná obvyklému kódu. Chcete-li zjednodušit práci s HTML, můžete si vybrat jeden z populárních templatizerů, například mops.

jQuery a Manipulace Dom

Po vytvoření vzhledu stránky na adrese pomoci html. A CSS, budete používat knihovnu JQuery pro ovládání DOM. Mnozí věří, že jQuery je k ničemu a bude brzy nahrazeno úhlovým a reaguje, ale je to šíleně populární, a proto to stojí za to vědět. Kromě toho jednoho dne spadnete do situace, kdy budete nepříjemní skóre reagovat mikroskop, a pak snadné jquery přijde k záchraně.

Chrome Developer Tools.

Bylo by neodpustitelné rozdělit pozornost chromových nástrojů, které dávají obrovské množství příležitostí. S nimi můžete studovat dom prvky, ladění konzoly, sledovat cesty a mnohem více. Následují následující funkce Chrome Console, která zjednodušuje provádění rutinních úkolů.

Ajax.

Chcete-li, aby aplikace nemá znovu načíst stránky po každé operaci databáze, určitě potřebujete AJAX - odešle pozadí Asynchronous HTTP, odpovědi, na které jsou aktualizovány pouze část displeje. Můžete pracovat s Ajaxem prostřednictvím jQuery pomocí metody.AJAX.

Programování není jen způsob, jak vydělat velké peníze a ani úplně duševní práce. To je příležitost pochopit, co svět kolem něj spočívá, rozkládá se do malých částic, a pak se sestaví, řídí vlastní logikou a znalostí.

Programovací jazyky jsou jen nástrojem, se kterým člověk vytváří pravidla v systémech vytvořených.

Internet je spousta příležitostí, pro které jsou zabaveny jasné a podnikatelské mysli. Samozřejmě, vývoj webu má také své vlastní nástroje pro implementaci myšlenek do života. Jeden z nich - jazyk programování JavaScriptu který bude diskutován v tomto článku:

obecná informace

Mnoho lidí, dokonce nemá žádný vztah k IT-sféře, slyšel slovo Java. Revoluční nezávislý jazyk v jazyce, na kterém jsou aplikace aktivně psány mobilní systémy. To bylo vyvinuty slibnou společnost Sun, která pak překročila "pod křídlem" Oracle. Ale ani jeden ani jiné společnosti nemají nic společného s JavaScriptem:

Od Slunce trvalo pouze povolení k použití části jména. Překvapivě, JavaScript nevlastní žádnou firmu vůbec.

Při psaní webových aplikací se programování JavaScript používá nejčastěji. Pokud je stručně seznam klíčové funkce Tento jazyk by měl být vybrán následovně:

• Objektově orientovaný. Provedení programu je interakce objektů;
• Přijetí datových typů se provádí automaticky;
• Funkce jsou objekty základní třídy. Tato funkce dělá JavaScript podobný mnoha funkčním programovacím jazykům, jako je Lisp a Haskell;
• Automatické čištění paměti. Takzvaná kolekce odpadků dělá JavaScript podobný C # nebo Java.

Pokud hovoříme o podstatě použití JavaScriptu, tento jazyk vám umožňuje "oživit" pevné stránky stránek pomocí kódu, který lze spustit ( tzv. Skripty). To znamená, že můžete provést analogii s karikatury, kde html a css jsou pro-ruce hrdinové a javascript je to, co je činí pohybovat.

Pokud hovoříme o syntaxi JavaScriptu, pak jsou následující funkce inherentní:

• Registr je důležitý. Funkce s názvy func () a func () - zcela odlišné;
• Po operátorech je nutné dát bod s čárkou;
• Vestavěné objekty a operace;
• Prostory nejsou zohledněny. Můžete použít, kolik odsazení, stejně jako překlady řetězců uspořádat kód.

Nejjednodušší kód na JavaScriptu vypadá takto:

Rozsah použití

Abychom pochopili, proč je zapotřebí JavaScript a kolik je nutné studovat, některé oblasti, ve kterých je aplikován tento jazyk Programování.

• Vývoj webových aplikací. Chcete nainstalovat jednoduchý čítač, uspořádat přenos dat mezi formami nebo umístit hru webu? JavaScript bude v této věci věrný asistent;
• "Aktivní účast" v Ajaxu. Tato technologie má výrazně urychlené aplikace, cvičení výměny dat se serverem v režimu "Pozadí":

• Os. Možná, že někdo nevěděl, ale Windows, Linux a Mac mají své konkurenty prohlížeče, lví podíl na kodexu, jehož je napsán v JavaScriptu;
• Mobilní aplikace;
• Rozsah školení. Každá specialita programátoru na univerzitě zahrnuje studium JavaScriptu jedním nebo jiným způsobem. To je způsobeno tím, že jazyk byl původně vyvinut pro ne příliš silné programátoři. Javascript lekce jsou logicky tkané na základní html kurz, takže vývoj prochází prostě dost.

Výhody a nevýhody

Nemyslete si, že JavaScript je nějaký druh panacea ze všech problémů a každý programátor s úsměvem na tváři má tento jazyk. Všechno na světě má své vlastní pozitivní a negativní strany. Chcete-li začít, všimneme si nedostatky.

• Potřebu poskytnout křížový prohlížeč. Vzhledem k tomu, JavaScript působí jako internetová technologie, pak musíte se vyrovnat s pravidly, která vytvoří World Wide Web. Kód musí být proveden správně ve všech nebo nejméně nejoblíbenějším prohlížečům;
• Systém dědictví v jazyce způsobuje potíže s pochopením toho, co se děje. JavaScript implementoval dědictví na základě prototypů. Lidé, kteří studovali jiné objektově orientované programovací jazyky, jsou zvyklí na obvyklé " třída potomka zdědí rodičovskou třídu" Ale v JavaScriptu jsou tyto věci zabývající se objekty přímo, a to se nevejde do hlavy;
• Nepřítomný standardní knihovna. JavaScript neposkytuje žádné příležitosti pracovat se soubory, toky I / O a dalšími užitečnými věcmi;
• Syntaxe jako celek je obtížné pochopit. Krása kódu není jednoznačně ne javascript šustí, ale je pozorován hlavním pravidlem programátorů: " Funguje? Nezkoušej!».

Nyní stojí za zmínku určitým výhodám

• JavaScript poskytuje velký počet Možnosti vyřešit širokou škálu úkolů. Jazyková flexibilita umožňuje používat více programovacích šablon ve vztahu ke specifickým podmínkám. Mysl vynálezce obdrží současný potěšení;
• Popularita JavaScriptu se otevírá značné množství hotových knihoven před programátorem, což vám umožní výrazně zjednodušit psaní kódu a úrovni nedokonalosti syntaxe;
• Aplikace v mnoha oblastech. Široké funkce JavaScriptu poskytují programátoři šanci vyzkoušet si jako vývojář široké škály aplikací a to je určitě ohřívací zájem o profesní činnost.

Nevěnujte pozornost tomu, že minusy se ukázaly více než výhody. JavaScript pevně opraven ve svém výklenku, a žádná kritika odtud tento moment Nevybere.

Pro ty, kteří chtějí studovat

Obtížný a dlouhý způsob bude mít ty, kteří se rozhodli důkladně naučit Javascript. Pro začátečníky existují základní doporučení, po které je možné výrazně zjednodušit jejich školení.

• Nejprve HTML. Není možné začít dělat něco pro internet bez základů základů. Kaskádové listy (CSS) budou také velmi užitečné;
• Použijte novou literaturu. Programování není fyzika, jejichž zákony jsou nepostradatelné a nové učebnice jsou staré. IT technologie se neustále rozvíjí a neměly by být opomíjeny s užitečnými aktualizacemi;
• Pokusit se napsat všechny sekce programu. Pokud něco není vůbec, ukazuje se - můžete si půjčit někoho jiného kódu, ale pouze předběžné porozumění pro sebe každý řádek;
• Ladění je váš věrný přítel. Rychle najít chyby - jeden z nejdůležitější body v programování;
• Neignorujte formátovací normy. Samozřejmě, že kód nebude lepší nebo horší z jiného počtu odrážek a mezer, ale důležitým momentem je snadnost čtení a porozumění programátorem. Kód níže? velmi obtížné vnímané, zejména pokud nejste jeho

• Názvy proměnných musí mít lexikální hodnotu. V procesu psaní jednoduché programy Zdá se, že není důležité vůbec, ale když počet řádků kódů kódu přes tisíc - všechny ďáblové rozbíjené nohy;

JavaScript je neustále rozvíjejícím se jazykem, zejména nyní, kdy byl zřízen roční plán aktualizace specifikací ECMAScript. V tomto ohledu se význam znalostí JavaScriptu mimo jQuery zvyšuje.

Samozřejmě, v tomto článku nebudeme schopni pokrýt celou potřebu znalostí. Určitě budou momenty, které jsem zmeškal, možná jsem se mýlil nebo naše názory s vámi o potřebný soubor znalostí se bude lišit.

Vzhledem k těmto aspektům pojďme ...

Co je test fizzizbiz

Fizzizizz - Zpravidla malý test zaměřený na odolání nezkušených vývojářů. Myslím, že budete překvapeni, kolik vývojářů JavaScriptu neví, jak tyto testy napsat.

Tyto testy zpravidla nesou velké smyslové zatížení. Je zaměřen výhradně ke kontrole schopností potenciálních kandidátů.

Pamatujte si, že pravděpodobnost, že budete požádáni o provedení podobného testu na rozhovoru je velmi velký.

Příklad klasického testu Fizzizizbizz:

Možnosti pro takové testy jsou neomezené. Jednou, v rozhovoru jsem narazil do takového testu, po kterém jsem musel vyřešit dva další možnosti.

Pro (var i \u003d 1; i<= 100; i++) { if (i % 15 == 0) { console.log("FizzBuzz"); } if (i % 3 == 0) { console.log("Fizz"); } if (i % 5 == 0) { console.log("Buzz"); } }

Rozdíl mezi \u003d\u003d a \u003d\u003d\u003d

Jste pravděpodobně obeznámeni s oběma srovnávacími operátory. Nicméně víte, co přesně tito operátoři liší? Váš JavaScript Linter vyžaduje, abyste použili operátor \u003d\u003d\u003d, přemýšlel proč?

Namísto toho není porovnává typy operandů, vede k jednomu typu. Taková operace má negativní pověst.

Console.log (24 \u003d\u003d "24"); // Skutečný.

Jak vidíte, hodnota řetězce 24 (v jednoduchých uvozovkách) byla dána na celočíselný typ. Samozřejmě existují situace, kde jste přesně a zda chcete, ale nejčastěji, zda chcete řídit srovnávací operátor manipulované datové typy dat. Porovnání dat pomocí operátora \u003d\u003d se nedoporučuje, většina systémů pro kontrolu kódu JavaScript Style Určit na této chybě.

\u003d\u003d\u003d (přísné srovnání) porovnává typy dat, aniž by je převedly na jeden typ, to znamená, že data budou porovnána tak, jak je. Také, protože typ typů není do této operace zapojen, funguje rychleji. Aby tento provozovatel probíhal správně, musí být povinni operátory stejného typu.

Stejný příklad, ale s operátorem \u003d\u003d\u003d

Console.log (24 \u003d\u003d\u003d "24"); // Nepravdivé

V reakci získáme nepravdivé, protože operandy různých typů, jeden z nich celé číslo a druhý řetězec.

Jak vybrat Dom prvky bez dalších knihoven

Jistě jste obeznámeni s tím, jak udělat vzorek prvků pomocí jQuery, ale můžete udělat totéž, ale bez pomoci této knihovny?

Nemám jen vybrat položku s konkrétním id nebo sadou tříd, mluvím o výrazech pro vyhledávání položek pomocí jQuery.

Existuje několik nativní metody pro vyhledávání prvků v Dom, které nejsou nižší než jQuery. Můžeme také použít první dítě, poslední selektory typu podřízeného dítěte atd.

Seznámit se s některými z těchto metod

• document.GetElementbyid je klasická metoda pro nalezení položek podle jejich ID.
• document.GetElementsbyClassname - výběr prvků na hodnotě pole CLASSNAME
• document.QuerySelektor je vynikající metodou, která prakticky zcela nahrazuje volič $ () od jQuery, ale je již zahrnuta do JavaScriptu. Jediný rozdíl je, že vrací pouze první nalezený prvek.
• document.QuerySelektorall - analog předchozí metody, ale vrátí řadu nalezených položek.
• document.GetElementsByTagName - Tato metoda vám pomůže zvolit prvky značkou. Pokud potřebujete najít všechny položky DIV, potřebujete tuto metodu.

Také chci poznamenat, že metody QuerySelector a QuerySelectorall lze použít nejen na celý dokument, ale také na jednotlivých položkách, to znamená, že vzorek můžete provést v rámci jednoho nadřazeného prvku.

V dokumentaci Mozilla naleznete kompletní popis těchto metod.

Zvedněte reklamy proměnných a funkcí

JavaScript se zajímá o to, jak zpracovává deklarované proměnné a funkce, všechny automaticky zvýší rozsah. Můžete tedy odkazovat na ně před jejich reklamami v rozsahu viditelnosti (například funkce v JavaScriptu má svůj vlastní rozsah).

Proto pro pohodlí čtení kódu proveďte pravidlo, abyste vždy deklarovali proměnné na začátku rozsahu. Pokud zadáte "Použít přísný" v horní části skriptu nebo funkce, pak při přístupu k zbytečné proměnné obdržíte chybu.

Většina nástrojů pro kontrolu stylu kódu, jako je JSHIt, zobrazí se na chybě, pokud jste nepoužívali "Použít přísný", na základě toho, pokud se pokusíte napsat dobrý kód, pak nebudete používat proměnné v každém případě na reklamu. Jako vždy, pokud existují otázky, obraťte se na dokumentaci z Mozilly, vždy najdete úplný a komplexní popis vašeho problému.

Použití nástrojů pro vývojáře v prohlížeči

Nejčastěji se tyto nástroje používají k ladění skriptů JavaScriptu, ale jejich funkce není omezena. Můžete například použít bod STOP, proveďte krok za krokem skript, zadejte každou funkci současně.

Tyto nástroje poskytují nepostradatelnou pomoc, protože můžete plně sledovat provoz vaší aplikace a najít zoufalé oblasti.

Poté, co se naučil aplikovat nástroje pro vývojáře v takových prohlížečích jako Chrome, Firefox a v nejnovějších verzích aplikace Internet Explorer, můžete svůj skript ladit, měřit jeho rychlost a najít místa, kde stojí za to zlepšit pracovního algoritmu.

Nikdy se nepokoušejte slepě rozebrat kód, nejprve jej vždy analyzujete pomocí nástrojů pro vývojáře. Řešení neexistujících problémů je zbytečný čas trávení.

Týmy konzoly

Pojďme se obrátit na další položku ve studiu nástrojů pro vývojáře. Zpravidla nabízejí konzolu, ve které můžete inhibovat kód JavaScriptu.

Jistě, jste již obeznámeni s takovými týmy jako konzoly.log a console.Error, ale to není omezeno na funkčnost konzoly.

Chci okamžitě poznamenat, že ne všechny uvedené příkazy budou fungovat ve všech prohlížečích. Pokusím se zmínit pouze ty, kteří pracují v moderních prohlížečích. Nicméně, jako rada, řeknu, že před jejich použitím, zkuste se otestovat jejich výkon, takže v marném případě není kladivo kladivo.

• console.log - slouží k udržení protokolu událostí. Podporuje formátování.
• console.Error - pro chyby protokolování v kódu. Používám tento příkaz, když se chyby vyskytují v dotazech AJAX a v jiných potenciálně nebezpečných sekcích kódu. Metoda je podobná předchozí, ale zobrazí seznam volání zásobníku.
• console.dir (objekt) - Zobrazuje formátovaný obsah objektu. Jako použitý je tato metoda velmi užitečná při ladění kódu.
• console.group (název) - umožňuje vytvořit skupinu zpráv v protokolu nazvaném název. Tímto způsobem můžete skupinové zprávy, například segmentem kódu, kde jsou generovány.
• console.GroupCollPased je analog předchozího příkazu v jedné výjimce. Jmenovitě zobrazuje zprávy ve složeném formuláři.
• console.groupend - končí dříve vytvořenou skupinu.
• konzola (štítek) - umožňuje sledovat rychlost webu v milisekundách. Metoda je užitečná při užívání potenciálně složitých kódových sekcí.
• console.TimeEd (štítek) je analogem metody skupiny, ale funguje s ohledem na konzolu ().
• kopírovat (řetězec) - V konzolové Chrome a Firefox je metoda, která umožňuje kopírovat obsah řetězce do schránky. Velmi užitečná metoda, zkuste ji aplikovat.

Co přesně je obsaženo

Za prvé, to je velký zdroj problémů pro ty, kteří plně nerozumí, co přesně obsahuje toto klíčové slovo. A být mylný v tomto velmi jednoduchém, protože jeho obsah je zcela závislý na struktuře kódu.

V tradičních programovacích jazycích obsahuje odkaz na objekt aktuální třídy. Ale protože JavaScript je daleko od tradice, pak v něm tato proměnná odkazuje na rodičovský objekt objektu.

Nejjednodušší způsob, jak to pochopit, je vzít ji pro majitele nebo rodiče metody. To se vždy vztahuje na rodič (rodič), s výjimkou případů, kdy používáte hovor, použijte nebo vázat metody.

V následujícím příkladu je to odkazováno oknem:

Funkce MyFunction () (konzole.log (toto \u003d\u003d\u003d okno); // true) MyFunction ();

Jistě máte otázku, jak se může být rovnající se okno, pokud se k ní oslovíme v rámci metody? Pokud znáte odpověď na tuto otázku, pak dokonale, jinak si přečtěte a pokusím se vysvětlit.

Při deklaraci této funkce je připojen k celosvětovému objektu okna. Nezapomeňte, že to znamená, že to odkazuje na metodu metody?

Změna hodnoty na plně novým objektu (ne okénka):

Funkce MyFunction () (konzole.log (tento \u003d\u003d\u003d okno); // false) Nová myfunkce ();

Ze takového příkladu z takového příkladu je z takového příkladu napjaté čistoty kódu. Jdeme jen na vrchol ledovce s takovými příklady. Jak vidíte, tato hodnota již není rovna oknu.

Proč se to stalo?

Nejjednodušší vysvětlení - Ve druhém příkladu jsme použili klíčové slovo nové, tyto většiny jsme vytvořili nový rozsah a nový objekt.

V následujícím příkladu vytvoříme fiktivní rozhraní API pro vyločení dat z knihovny ze serveru. Vytvoříme objekt API s některými metodami.

Při použití aplikace Word, kontext skriptu se přesune z kontextu okna do rozhraní API.

VAR API \u003d (GetData: Funkce () (console.log (toto \u003d\u003d\u003d okno); // false console.log (tento \u003d\u003d\u003d API); // true)); Api.getdata ();

Jak vidíte, hodnota je plně nastavena ve způsobu volání metody. Vzhledem k tomu, že funkce je volána v rámci objektu API, jejího rodiče, pak hodnota je odkazována na objekt API.

Nezapomeňte, že tato hodnota se změní. To se liší v závislosti na metodě volání, ale pokud používáte metodu vazby, hodnota toho zůstane nezměněna.

Podrobněji s klíčovým slovem v JavaScriptu, můžete se seznámit v článku QuirksMode a dokumentaci z Mozilly.

"Použití přísné";

Vzhledem k tomu, že již dříve upustili dříve, uživatel je používán aplikovat přísnější verzi jazyka JavaScriptu. Tato směrnice se řídí u všech skriptů.

Ve výchozím nastavení je JavaScript docela zdarma v jeho syntaxi. Bude jednoduše vynechat chybnou část kódu a pokusit se provést následující řádky, zatímco vám nic neříká.

V dokumentaci z Mozilly je na tomto tématu celý článek, důrazně doporučuji, abyste se s ní setkali.

Různé typy cyklů

Budete překvapeni, ale setkal jsem se s obrovským počtem vývojářů, kteří nevěděli, jak používat pro cyklus správně a absolutně neslyšel o jiných typech cyklů. A být schopen použít cyklus na řadě nebo objektu - velmi důležitá dovednost pro vývojáře. Neexistuje žádná jasná instrukce, když a co použít typ cyklu, ale měli byste se v této věci navigovat. Jistě jste obeznámeni s pro a to, ale co ostatní?

Seznam cyklů v JavaScriptu:

• pro ...
• pro..of (přidán do ES6)
• pro každého.
• zatímco
• dělat, zatímco

Cyklus

Absolutně povinný cyklus, který potřebuje vědět a rozumět. Při provádění stavu vykonává své tělo.

Pro (podmínka 1; podmínka 2; podmínka 3) (// váš kód)

Stav 1 - provedeno jednou před začátkem série cyklů. Ve většině případů zde budete inicializovat počítadlo cyklu. Tato položka může být vynechána, pokud inicializujete dříve.

Stav 2 - Tato podmínka slouží k určení cyklu nebo ne. Pravděpodobně budete porovnat svůj pult s velikostí pole. Pokud je hodnota pravého srovnání, cyklus pokračuje. Pokud přerušujete cyklus uvnitř s přestávkou, pak může být tato podmínka přeskočena.

Stav 3 - Tato stránka je prováděna po každé iteraci, zpravidla, je zde, že zvýšíte svůj pult.

Cyklus pro ... v

Následuje typ cyklu. S ním můžete projít všemi poli třídy.

Uveďte příklad.

Var osoba \u003d (Jméno: "Dwayne", Příjmení: "Charrington", Věk: 27, StarSign: "Aquarius"); // níže uvedená smyčka bude vydávat: // "dwayne" // "charrington" // 27 // "Aquarius" pro (pokud (osoba.hasownProperty (p)) (konzole.log (osoba [p])))

Cyklus pro ... z

Do ES6 byl přidán docela nový typ cyklu. Na základě jeho novinky, která nejsou podporována všemi prohlížeči. Ale při použití určitých technologií může být již dnes použita.

Tento cyklus je úplným opakem pro ... v, to prochází hodnotami pole a funguje pouze s datovými typy, které podporují iterace, na které se nepoužije.

Var ovoce \u003d ["oranžová", "jablko", "squash", "hruška"]; Pro (var funo ovoce) (konzole.log (ovoce);)

Velkým plusem tohoto typu cyklu je, že již nemusíte vytvořit ukazatel a dodržovat délku pole, abychom mohli plně projít jeho prvky.

Foreach cyklus

Dalším typem cyklu, který ve svých hloubkách není odlišný od dříve uvedených typů cyklů.

Pracuje pouze s poli, ne objekty. Je prospěšné pro skutečnost, že nemusíte vytvořit další proměnné, které nakonec znečišťují kód. \\

Jistě je to nejmezenější typ typu cyklu, ale má své vlastní aplikace, o kterých bude známo, že:

Var ovoce \u003d ["jablko", "banán", "oranžová", "hrozny", "hruška", "passionfruit"]; // tři hodnoty na funkci zpětného volání jsou: // prvek - prvek je traverse // index - aktuální index položky v poli počínaje 0 // Array - pole je traverza (pravděpodobně většinou irelevantní) Ovoce. Fureach (funkce (prvek, index, pole) (konzole.log (index, prvek);));

Někdy jen potřebujete projít všechny prvky pole a možná, aby některé změny v nich. Jeho chování je podobné JQuery.each.

Jeden nedostatek tohoto typu cyklů - nemůže být přerušen. Pokud potřebujete vytvořit cyklus podle pravidel ES5, použijte metodu Array.Every, abyste se seznámili, s níž můžete v dokumentaci Mozilla.

Zatímco cyklus

Zatímco cyklus je podobný jako pro, ale přijímá pouze jeden parametr - stav samotný, kterým cyklus určuje pokračování iterací nebo zastavit je.

I když je tento typ cyklu považován za nejrychlejší, myslím, že tento okamžik je docela kontroverzní. Myslím, že nebudete hádat, že tento typ cyklu nevypadá opatrně než ostatní a jeho rychlost může být vysvětlena pouze jednoduchostí vnitřní logiky.

Podle zkušeností budu říci, že nejrychlejší verze v průběhu cyklu je cyklus s poklesem měřidla, snížíte jej na jednotku, dokud se nedostanete nulovou (což také nárokuje).

Var i \u003d 20; Zatímco (i--) (konzole.log (i);)

Cyklus ... zatímco

Takový cyklus je poměrně vzácný, ale stále stojí za to zavést ho, aby pochopil jeho práci.

Zatímco cyklus nemusí provádět iteraci. To znamená, že pokud projdete falešnou hodnotu jako stav cyklu, pak nebude provedena iterace. Do ... Zatímco cyklus zaručuje alespoň jednu operaci.

Tento rozdíl nekončí. Zatímco cyklus zpracuje podmínku před provedením iterace a do ... Zatímco po.

Jako vždy v dokumentaci z Mozilly najdete podrobný popis tohoto typu cyklů.

Základní metody a úkoly

JavaScript existuje základními metodami, které by měly být známy. S ohledem na práci s maticemi a řadami nabízí JavaScript velký soubor vestavěných metod. Dotkneme se pouze polí a linek, takže objekty později.

Máte-li zájem o práci s jinými typy dat, pak odvážně kontaktujte dokumentaci Mozilla. Samozřejmě byste neměli znát všechny tyto metody srdcem, popíšu pouze ty, které se zdají být nezbytné.

Práce s řetězci

V JavaScriptu, nejčastěji pracujete s daty řetězce, s výjimkou, pravděpodobně polí a objekty. I když nefungujete s řádky, nebo si myslíte, že nefungujete, pak stojí za to seznámit s těmito metodami.

• String.Replace (regexp | Co nahradit, co nahradit, callback) - umožňuje nahradit část řádku, je povoleno používat regulární výrazy.
• String.concat (Storok 1, Line 2 ...) - Připojení několika řádků v jednom.
• String.Indexof (hodnota) - Metoda umožňuje najít pořadové číslo symbolu požadované části řádku, -1 - pokud není nalezen řetězec
• String.Slice (StartIndex, EndIndex) - vrátí oblast řetězce od StartIndex do EndIndex
• String.Split (Separator, Limit) - Rozbije řetězec na pole se separátorem, maximální limitní délka.
• String.Subsctr (StartIndex, Délka) - Vrátí část řetězce počínaje dlouhou délkou startindexu.
• String.ToLowercase - překládá všechny znaky řetězců v malých písmenech
• String.touppercase - Přeneste všechny znaky řetězců v horním registru
• String.trim - Odstraňuje mezery od začátku a konce řádku

Práce s maticemi

Často se musíte setkat s poli. Osvědčili se jako způsob, jak ukládat data. Tyto metody stojí přesně vědět jakýkoliv vývojář JavaScriptu, neměli byste je hledat ve společnosti Google.

• Array.pop je směrován posledním prvkem a odstraní ji z pole.
• Array.Shift - vrátí první prvek a odstraní ji z pole.
• Array.Push (Val1, Val2) - přidává jeden nebo více hodnot na konec pole. Vrátí novou délku pole.
• Array.Reverse - zrcadlení mění pořadí prvků pole.
• Array.Sort - Umožňuje třídit pole pomocí vlastní funkce.
• Array.Join (separátor) - Vrátí řetězec sestávající z prvků pole oddělené separátorem symbolem (výchozí - čárka).
• Array.Indexof (hodnota) - vrátí index prvku v poli, -1, pokud není položka nalezena.

Toto není úplný seznam metod práce s poli. S ostatními si můžete přečíst dokumentaci z Mozilly. Počínaje ES6 byly přidány velmi zajímavé metody.

Rozdíl mezi voláním a aplikovat

Tyto dvě metody jsou často zmatené. Často můžete dělat bez nich, ale pomáhají volat metody a změnit hodnotu tohoto průběhu provádění.

Rozdíl mezi nimi je poměrně malý, ale existuje. Při použití metody volání můžete nastavit nekonečný počet argumentů rozdělením čárkou.

Pomocí metody Aplikace můžete přenášet argumenty jako pole a změnit tuto hodnotu.

Pokud potřebujete jednoduše převést pole jako metoda argumentu, počínaje operátorem ES6 Advanced (Spread). To vám nedovolí změnit. Můžete se s ním seznámit, jako vždy v oficiální dokumentaci z Mozilly.

Příklad volání:

Funkce MyFunc () (konzole.log (argumenty);) myfunc.call (to, 1, 2, 3, 4, 5);

Použít Příklad:

Funkce myfunc () (konzole.log (argumenty);) myfunc.call (,);

Seznámení s knihovnami a rámcy

Dnes jsou nejpozoruhodnější zástupci JavaScriptu rámců Angularjs, Reage.js a Ember. Samozřejmostí je ještě několik druhých.

Vzhledem k tomu, že webové aplikace jsou stále více a více, tato knihovna s nimi zjednodušují práci. Stojí za pochopení, že nyní poznání jednoho jQuery není jednoznačně dost. Většina volných pracovních míst je stanovena na znalosti dalších knihoven JavaScriptu jako hlavního požadavku.

Node.js.

Nepochybně uzl.js zabírá pevnou polohu. Prakticky jakýkoli nástroj front-end je postaven na nod.js a používá NPM (Správce uzlu), pokud je neznámý, důrazně vám doporučuji opravit toto opomenutí. Vzhledem k tomu, že node.js používá JavaScript, pak se učí, že nepředstavuje žádné zvláštní potíže pro ty, kteří jsou již obeznámeni s tímto jazykem. Chcete-li nastavit balíčky uzlů, budete mít více času než psát sám kód.

Osobně si myslím, že s uzlem by mělo být známkou každého developera v roce 2015. Nemluvím o hlubokých znalostech, stačí ho použít pro vývoj serveru, prototypování, testování atd.

Tam je vidlice uzl.js nazvaný Io.js, dnes jsou prakticky analogy, a nakonec jen psát do JavaScriptu s výjimkou malých rozdílů.

Testování

Jakmile jsme nečistili kód JavaScriptu vůbec, protože to nepovažovali za nezbytné. Skripty jsou však stále více a více díky Angularjs a node.js.

JavaScript se vyvíjí, a objem skriptů se zvyšuje a testování se stává životně důležitým. Pokud neužíte kód, pak se mýlíte špatně. Můj oblíbený tester je karma. Existují jiní, ale tato konkrétní se ukázala jako lepší než každý při práci s Angularjs. A pokud je vhodný pro Angularjs, pak je to vhodné pro mě.

Nástroje

Být vývojářem JavaScript v roce 2015 znamená nejen vynikající znalosti jazyka, ale také velký počet nástrojů pro práci s ním.

Někdy nástroje zahrnují samotný prohlížeč, který používáme. A někdy musíte odkazovat na nástroje třetích stran, abyste získali hlubší analýzu situace.

Zde je sada nástrojů, které byste měli pamatovat: gulp, webpack a babeljs. Existuje mnohem více nástrojů, ale nástroje jako doušek a grunt vám pomohou rozvíjet a spravovat JavaScript aplikace.

Prošel tyto dny, kdy jste právě stáhli soubor JavaScriptu a přidal jej na stránku. Nyní používáme manažery balíčků NPM nebo bower.

Kombinujeme a minimalizujeme skripty, testují je, což pomáhá organizovat strukturu projektu.

Nástroje JavaScript jdou ruku v ruce při vývoji Isomorphic JavaScript (kód používaný jak na straně klienta, tak serveru). Ecmascript 6, on je ES6, on je esnext

Prohlížeče musí být stále realizovány většinu funkce ECMAScript Functional 6. Ale dnes můžete použít nové položky z ES6 pomocí kompilátorů JavaScriptu. Seznamte se s novými API a metodami: řádky, pole a další metody, jako jsou slabosti, symboly a třídy. Měli byste být vždy vědomi nadcházejících změn.

Závěr

Můžu vám hodně říct. Soudě podle velikosti tohoto článku si můžete představit, kolik potřebujete znát vývojáře JavaScriptu. Dotkli jsme se vrcholky ledovce. Nemyslete si, že tento článek by měl být vnímán jako průvodce pro developer. To je jen moje osobní vize problému.