Prispôsobený preklad článku "Full-Stack Javascript za šesť týždňov: sprievodca učebných osnov"

Webový vývoj je jedným z najjednoduchších a najobľúbenejších smerov medzi programátormi začiatočníkov. Pre prácu textový editor A prehliadač nie je potrebné študovať algoritmy na pokročilej úrovni, výsledkom každého kroku písania programu je vizuálne - všeobecne, veľa dávok. Kľúčové zručnosti v kontexte vývoja webového vývoja sa považujú za vedomosti JavaScript.

Teraz sa JavaScript rozvíja veľmi rýchlo, a preto pri učení sa jazyka je ľahké sa zmiasť. Ponúkame Vám učebné osnovy s pohodlnou štruktúrou, ktorá pokrýva všetky potrebné aspekty Javascriptu a súvisiacich technológií.

Prečo JavaScript?

Stojí za zmienku otvorenosť jazykových spoločností, zvyčajne súťaží medzi sebou, spolupracovať na vývoj Javascript. Jazyk je veľmi flexibilný a vyhovuje priaznivcom objektovo orientovaného aj funkčného prístupu. Obrovské množstvo knižníc a rámcov vám umožňuje ľahko vyriešiť akékoľvek typy úloh a serverová platforma NODDE.JS umožňuje používať jazyk nielen v prehliadači, ale aj v konzole. Môžete dokonca písať desktopy a mobilné aplikácieNajprv - s elektrónovým rámcom a druhá je na Nativescript alebo reagovať natívne.

Základy

Najprv je potrebné študovať základné pojmy JavaScript, vývoj webového vývoja a programovania ako celku:

• objektovo orientovaný JS - dizajnéri a továrne, dedičstvo;
• funkčné funkcie JS - vyššej objednávky, uzávery, rekurzia;
• Špecifikácia skúšky jazmínu;
• základy HTML, CSS a JQuery.

Git.

Git je nástroj, ktorý potrebujete pre vývojárov, takže potrebuje čo najskôr. Tu sú základné zručnosti, ktoré musíte mať:

• vytváranie a pohybovanie súborov v adresároch;
• inicializácia a zaväzuje sa v git;
• nastavenie archívov v Github.

Algoritmy a dátové štruktúry

Potom stojí za to skúmať algoritmy (najmä koncepciu zložitosti algoritmov), ako aj základné dátové štruktúry: pripojené zoznamy, fronty, hromady, binárne vyhľadávacie stromy a hash tabuľky. To vám pomôže.

Spraviť

Node.js.

Pred 10 rokmi by sa JavaScript mohol používať len na vývoj frontend. Teraz vďaka node.js, prípad nie je obmedzený na jeden "front". Uzol je len prostredie pre vykonávanie js kódu na strane servera, takže nebudete musieť študovať novú syntax, ale budete musieť importovať a exportovať súbory, rozdeliť kód na moduly a použite NPM Package Manager.

Servery, http, express.js

Po štúdiu uzla je potrebné naďalej oboznámiť s vývojom backend a triediť servery a smerovanie. Môžete začať z portov a protokolov s dôrazom na HTTP, a potom vykonajte knižnicu Express - uzla na spracovanie požiadaviek.

Asynchrónny javascript.

Databázy, schémy, modely a orm

Databázy sú jedným z najdôležitejších prvkov vývoja webového vývoja. Ak vaša aplikácia potrebuje prevziať alebo uložiť akékoľvek údaje, ktoré sa nestratia pri aktualizácii stránky, bude musieť použiť databázu. Je potrebné sa naučiť rozlišovať medzi relačnými a ne-relačnými databázami a porozumieť typom pripojení. Potom sa zoznámiť s rôznymi. Schopnosť pracovať s ORM nebude príliš zbytočná.

Predĺžiť

HTML a CSS.

HTML a CSS je základom základov pre každý webový vývojár. Nemusíte ich dokonale poznať, ale musíte ich pochopiť. Môžete tiež preskúmať akejkoľvek populárnej knižnice (napríklad bootstrap) a predprocesor CSS ako Sass - to pomôže urobiť CSS podobné obvyklému kódu. Ak chcete zjednodušiť prácu s HTML, môžete si vybrať jeden z populárnych templátérií, napríklad PUG.

jQuery a manipulácia DOM

Po vytvorení vzhľadu stránky pomoc HTML A CSS, použijete knižnicu JQuery na ovládanie DOM. Mnohí sa domnievajú, že JQuery je zbytočné a čoskoro bude nahradené uhlovým a reagovať, ale je to šialene populárne, a preto to stojí za to vedieť. Okrem toho, jeden deň budete spadnúť do situácie, keď budete nepohodlie, aby ste skóre reagovať mikroskop, a potom jednoducho jquery príde na záchranu.

Nástroje Chrome Developer Tools

Bolo by neodvolateľné rozdeliť pozornosť chrómových nástrojov, ktoré dávajú obrovské množstvo príležitostí. S nimi môžete študovať DOM Elements, Debug cez konzolu, sledujte trasy a oveľa viac. Nasledujú výhodné vlastnosti chrómovej konzoly, ktorá zjednoduši vykonanie rutinných úloh.

Ajax

Ak chcete, aby aplikácia nečítala stránky po každej operácii databázy, budete určite potrebovať AJAX - pošle pozadie asynchrónne požiadavky HTTP, odpovede, na ktoré sa aktualizuje iba časť displeja. Môžete pracovať s Ajax cez jQuery pomocou metódy.Ajax.

Programovanie nie je len spôsob, ako zarobiť veľké peniaze a ani úplne duševné práce. Toto je príležitosť pochopiť, čo svet okolo neho pozostáva, rozkladá ho do malých častíc, a potom znovu zostaviť, vedené vlastnou logikou a vedomosťami.

Programovacie jazyky sú len nástrojom, s ktorým osoba stavia pravidlá v vytvorených systémoch.

Internet je veľa príležitostí, pre ktoré sú zachytené svetlé a podnikajúce mysle. Samozrejme, webový vývoj má tiež vlastné nástroje na implementáciu myšlienok do života. Jeden z nich - jazyk javaScript programovanie ktorý bude prerokovaný v tomto článku:

Všeobecné informácie

Mnohí ľudia, dokonca, ktorí nemajú vzťah k IT-sfére, počul slovo Java. Revolučný nezávislý jazyk na jazyku, na ktorom sa aplikácie aktívne píše mobilné systémy. Bola vyvinutá sľubnou spoločnosťou Sun, ktorá potom prekročila "pod krídlom" Oracle. Ale ani jeden, ani iné spoločnosti nemajú nič spoločné s Javascriptom:

Z Slnka trvalo len povolenie použiť časť mena. Prekvapivo, JavaScript nevlastní žiadnu firmu vôbec.

Pri písaní webových aplikácií sa najčastejšie používa programovanie JavaScript. Ak je krátko zoznam kľúčové funkcie Tento jazyk by mal byť vybraný takto:

• Objektovo orientovaný. Vykonávanie programu je interakcia objektov;
• Prináša typy údajov sa vykonáva automaticky;
• Funkcie sú objektmi základnej triedy. Táto funkcia robí Javascript podobný mnohým funkčným programovým jazykom, ako je LISP a Haskell;
• Automatické čistenie pamäte. Takzvaná kolekcia odpadu robí Javascript podobný C # alebo Java.

Ak hovoríme o podstate používania JavaScriptu, tento jazyk vám umožňuje "oživiť" pevné stránky lokalít pomocou kódu, ktorý je možné spustiť ( takzvané skripty). To znamená, že môžete urobiť analógiu s karikatúrami, kde sú HTML a CSS pro-Gan Heroes a Javascript je to, čo ich robí pohybom.

Ak hovoríme o syntaxi JavaScript, potom sú neoddeliteľné nasledujúce funkcie:

• Register je dôležitý. Funkcie s názvami FUNC () a FUNC () - úplne iné;
• Po prevádzkovateľoch je potrebné dať bod so čiarkou;
• Vstavané objekty a operácie;
• Medzery sa neberú do úvahy. Môžete použiť koľko zarážok, ako aj preklady reťazcov na usporiadanie vášho kódu.

Najjednoduchší kód na Javascript vyzerá takto:

Pôsobnosť

S cieľom pochopiť, prečo je potrebný JavaScript, a koľko je potrebné študovať, niektoré oblasti, v ktorých sa uplatňuje tento jazyk Programovanie.

• Vývoj webových aplikácií. Chcete inštalovať jednoduchý pult, zariadiť prenos dát medzi formulármi alebo položte si hru na stránke? Potom JavaScript urobí verný asistent v tejto veci;
• "Aktívna účasť" v Ajax. Táto technológia významne zrýchlil aplikácie, uplatnenie výmeny údajov so serverom v režime "Pozadie":

• OS. Možno niekto nevedel, ale Windows, Linux a Mac majú svoj prehliadač konkurentov, leví podiel kódexu, ktorý je napísaný v Javascript;
• Mobilné aplikácie;
• Rozsah výcviku. Každý programátor špeciality na univerzite zahŕňa štúdium Javascriptu jedným alebo iným. Je to spôsobené tým, že jazyk bol pôvodne vyvinutý pre veľmi silní programátori. Lekcie Javascript sú logicky tkané do základne HTML Course, takže vývoj prechádza jednoducho.

Výhody a nevýhody

Nemyslite si, že Javascript je nejaký druh Panatea zo všetkých problémov a každý programátor s úsmevom na tvári má tento jazyk. Všetko na svete má svoje vlastné pozitívne a negatívne strany. Ak chcete začať, poznamenávame sa, že nedostatky.

• Potreba poskytovať cross-prehliadač. Keďže Javascript funguje ako internetovú technológiu, musíte sa vyrovnať s pravidlami, ktoré vytvoria World Wide Web. Kód musí byť vykonaný správne vo všetkých alebo aspoň najobľúbenejších prehliadačoch;
• Systém dedičstva v jazyku spôsobuje ťažkosti pri pochopení toho, čo sa deje. JavaScript implementovaný dedičstvo na základe prototypov. Ľudia, ktorí študovali iné objektovo orientované programovacie jazyky, sú zvyknutí na obvyklé " triedny potomok zdedí rodičovská trieda" Ale v JavaScriptovi sú takéto veci priamo zapojené do objektov, a to sa nezmestí do hlavy;
• Neprítomný Štandardná knižnica. JavaScript neposkytuje žiadne príležitosti na prácu so súbormi, I / O prúdmi a inými užitočnými vecami;
• Syntax ako celok sťažuje pochopenie. Krása kódu zjavne nie je Javascript Hustle, ale hlavné pravidlo programátorov je pozorované: " Tvorba? Neskúšaj!».

Teraz stojí za zmienku nejaké výhody

• Javascript poskytuje veľký počet príležitosti na riešenie širokej škály úloh. Jazyková flexibilita vám umožňuje používať viaceré programovacie šablóny vo vzťahu k špecifickým podmienkam. Myseľ podľa vynálezu dostane súčasnú radosť;
• Popularita Javascriptu otvára značné množstvo hotových knižníc pred programátorom, ktorý vám umožní výrazne zjednodušiť kód písania kódu a na úrovni nedokonalosti syntaxe;
• Aplikácie v mnohých oblastiach. Široké funkcie Javascript Dajte programátorom šancu vyskúšať sa ako developer širokej škály aplikácií, a to určite je vykurovací záujem o odborné aktivity.

Neodávajte pozor na skutočnosť, že mínusy sa ukázali viac ako výhody. Javascript pevne upevnený v jeho výklenku a žiadna kritika odtiaľ tento moment Nevyberá.

Pre tých, ktorí chcú študovať

Ťažká a dlhá cesta bude musieť tých, ktorí sa rozhodli dôkladne naučiť Javascript. Pre začiatočníkov existujú základné odporúčania, podľa ktorého je možné výrazne zjednodušiť svoj tréning.

• Po prvé, HTML. Nie je možné začať niečo pre internet bez základov základov. Kaskádové štýlové listy (CSS) budú veľmi užitočné;
• Použite novú literatúru. Programovanie nie je fyzika, ktorých zákony sú nevyhnutné a nové učebnice sú strihané staré. IT technológie sa neustále vyvíjajú a nemali by byť zanedbané s užitočnými aktualizáciami;
• Pokúsiť sa napísať všetky časti programu. Ak niečo nie je vôbec, sa nám ukáže - môžete si požičať kód niekoho iného, \u200b\u200bale len pre-pochopenie pre seba každý riadok;
• Debugovanie je váš verný priateľ. Rýchlo nájsť chyby - jeden z najdôležitejšie body v programovaní;
• Neignorujte normy formátovania. Samozrejme, že kód nebude lepší alebo horší z iného počtu zarážok a medzier, ale jednoduchosť čítania a pochopenia programátora je tiež dôležitým momentom. Kód uvedený nižšie? veľmi ťažké vnímané, najmä ak nie ste jeho

• Názvy premenných musia mať lexikálnu hodnotu. V procese písania jednoduché programy Zdá sa, že vôbec nie je dôležité, ale keď počet riadkov kódu v roliach cez tisíc - všetky diably zlomia nohy;

JavaScript je neustále vývojový jazyk, najmä teraz, keď bol vytvorený ročný plán o aktualizácii ECMACMIST. V tejto súvislosti sa zvyšuje význam vedomostí Javascriptu mimo JQuery.

Samozrejme, v tomto článku nebudeme schopní pokryť celú potrebu vedomostí. Určite budú chvíle, že som zmeškal, možno som sa mýlil alebo naše názory s vami týkajúce sa potrebného súboru vedomostí sa bude líšiť.

Vzhľadom na tieto aspekty sa začneme ...

Čo je Fizzizbiz test

Fizzizzz - spravidla malý test zameraný na štiepenie neskúsených vývojárov. Myslím, že budete prekvapení, koľko vývojárov Javascriptu nevedia, ako písať takéto testy.

Takéto skúšky spravidla nenosia veľké zmyslové zaťaženie. Je zameraný výlučne na kontrolu schopností potenciálnych kandidátov.

Pamätajte si, že pravdepodobnosť, že budete požiadaný, aby ste vykonali podobný test na rozhovore, je veľmi veľký.

Príklad Classic Fizzizzizz test:

Možnosti takýchto testov sú neobmedzené. Akonáhle, na pohovore, som v takomto teste bežal, po ktorom som musel vyriešiť ďalšie dve možnosti.

Pre (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"); } }

Rozdiel medzi \u003d\u003d a \u003d\u003d\u003d

Pravdepodobne ste oboznámení s oboma prenosnými operátormi. Viete, čo sa títo operátori líšia? Váš JavaScript Linter vyžaduje, aby ste aplikovali operátora \u003d\u003d\u003d, premýšľal prečo?

Namiesto toho neporovnáva typy operandov, vedie k jednému typu. Takáto operácia má negatívnu povesť.

Konzola.log (24 \u003d\u003d "24"); // pravda.

Ako vidíte, hodnota reťazca 24 (v jednoduchých úvodzoch) bola daná pre celý typ. Samozrejme, existujú situácie, keď presne a či chcete, ale najčastejšie, či chcete riadiť porovnávacie operátor manipulovaných typov údajov. Porovnanie údajov pomocou operátora \u003d\u003d sa neodporúča, väčšina systémov na kontrolu štýlu kódu JavaScriptu vám na túto chybu označuje.

\u003d\u003d\u003d (prísne porovnanie) porovnáva typy údajov, bez toho, aby ich konvertovali na jeden typ, to znamená, že údaje budú porovnané, ako je. Tiež, pretože typ typov nie je zapojený do tejto operácie, funguje to rýchlejšie. Aby sa tento operátor správne rozšíril, budú vyžadované prevádzkovatelia rovnakého typu.

Rovnaký príklad, ale s operátorom \u003d\u003d\u003d

Konzola.log (24 \u003d\u003d\u003d "24"); // FALSE

V reakcii na to získame falošné, pretože operandy rôznych typov, jeden z nich a druhý reťazec.

Ako si vybrať DOM Elements bez ďalších knižníc

Určite ste oboznámení s tým, ako urobiť vzorku prvkov pomocou jQuery, ale môžete urobiť to isté, ale bez pomoci tejto knižnice?

Nemyslím si, že si jednoducho vyberte položku so špecifickým ID alebo súborom tried, hovorím o výrazoch na vyhľadávanie položiek pomocou jQuery.

Existuje niekoľko natívnych metód na vyhľadávanie prvkov v DOM, ktoré nie sú horšie ako JQuery. Môžeme tiež použiť výber prvého dieťaťa, posledného typu dieťaťa, atď.

Zoznámte sa s niektorými z týchto metód

• dokument.GetElementById je klasická metóda pre nájdenie položiek podľa ich ID.
• document.geTelementsbyClassName - Výber prvkov na hodnotu poli ClassName
• document.QuerceSector je vynikajúcou metódou, ktorá prakticky úplne nahradí volič $ () z JQuery, ale je už zahrnutý v JavaScript. Jediný rozdiel je, že vráti len prvý prvok.
• document.QuerySeCetorAll - Analóg predchádzajúcej metódy, ale vráti pole nájdených položiek.
• document.geTelementsByTagname - Táto metóda vám pomôže vybrať prvky podľa značky. Ak potrebujete nájsť všetky DIV položky, potom potrebujete túto metódu.

Chcem tiež poznamenať, že metódy QuerySector a QueryECECTORALL môžu byť použité nielen na celom dokumente, ale aj na jednotlivých položkách, to znamená, že vzorku môžete vykonať v rámci jedného rodičovského prvku.

V dokumentácii Mozilla nájdete kompletný popis týchto metód.

Zvýšenie reklamy premenných a funkcií

Javascript má záujem o to, ako spracúva deklarované premenné a funkcie, všetky z nich automaticky vyskúšať rozsah. Môžete teda odkazovať na nich pred ich reklamami v rozsahu viditeľnosti (napríklad funkcie v JavaScript má svoj vlastný rozsah).

Preto pre pohodlie čítania kódu vykonajte pravidlo, aby ste vždy deklarovali premenné na začiatku rozsahu pôsobnosti. Ak zadáte "Použiť prísne" v hornej časti skriptu alebo funkcie, potom pri prístupe k nepotrebnej premennej dostanete chybu.

Väčšina nástrojov na kontrolu štýlu kódu, ako napríklad Jshint, bude indikovať pri chybe, ak ste nepoužívali "Použite prísne", na základe toho, ak sa pokúsite napísať dobrý kód, potom nebudete používať premenné v každom prípade ropucha. Ako vždy, ak existujú otázky, obráťte sa na dokumentáciu z Mozilla, vždy nájdete kompletný a komplexný popis vášho problému.

Používanie nástrojov pre vývojárov v prehliadači

Najčastejšie sa takéto nástroje používajú na ladenie skriptov Javascript, ale ich funkčnosť nie je obmedzená. Napríklad môžete použiť bod zastavenia, vykonajte krok skriptu za krokom, zadaním každej funkcie v rovnakom čase.

Tieto nástroje poskytujú nepostrádateľnú pomoc, pretože môžete plne sledovať prevádzku vašej aplikácie a nájsť zúfalé oblasti.

Naučili sa aplikovať vývojárske nástroje v takýchto prehliadačoch ako chróm, Firefox a najnovšie verzie programu Internet Explorer, môžete vykladať skript, zmerať jeho rýchlosť a nájdite miesta, kde stojí za zlepšenie pracovného algoritmu.

Nikdy sa nepokúšajte slepý kód slepý, najprv ho vždy analyzujete pomocou nástrojov pre vývojárov. Riešenie neexistujúcich problémov je zbytočným trávením.

Konzolové tímy

Poďme na ďalšiu položku v štúdii vývojárskych nástrojov. Spravidla ponúkajú konzolu, v ktorej môžete inhibovať kód JavaScriptu.

Určite ste už oboznámení s takýmito tímami ako Console.log a Console.Error, ale to nie je obmedzené na funkčnosť konzoly.

Chcem okamžite poznamenať, že nie všetky uvedené príkazy budú fungovať vo všetkých prehliadačoch. Pokúsim sa spomenúť len tie, ktoré pracujú v moderných prehliadačoch. Avšak, ako Rada, poviem, že pred ich aplikovaním sa pokúsite otestovať svoj výkon, takže v márni kladivo kladivo.

• console.log - používa sa na udržanie denníka udalostí. Podporuje formátovanie.
• console.Error - pre chyby v kódexe. Tento príkaz používam, keď sa vyskytnú chyby v dotazoch AJAX a v iných potenciálne nebezpečných častiach kódexu. Spôsob je podobný predchádzajúcemu, ale zobrazí zoznam hovorov.
• console.Dir (objekt) - Zobrazuje formátovaný obsah objektu. Ako sa používa, táto metóda je veľmi užitočná pri ladení kódu.
• console.Group (titul) - Umožňuje vytvoriť skupinu správ v log nazývanom titule. Týmto spôsobom môžete zoskupiť správy, napríklad segmentom kódu, kde sú generované.
• console.GroupCollPased je analógom predchádzajúceho príkazu v jednej výnimke. Konkrétne zobrazí správy v zloženej forme.
• console.Groupend - končí predtým vytvorenú skupinu.
• console.Time (Label) - Umožňuje sledovať rýchlosť stránky v milisekundách. Metóda je užitočná pri užívaní potenciálne zložitých kódových sekcií.
• console.Timeend (Label) je analógová metóda skupiny, ale funguje to s ohľadom na konzoly ().
• kopírovať (String) - V Console Chrome a Firefox je metóda, ktorá vám umožní kopírovať obsah reťazca do schránky. Veľmi užitočná metóda, skúste ho použiť.

Čo presne je obsiahnuté

Po prvé, toto je veľký zdroj problémov pre tých, ktorí úplne nerozumejú, čo presne obsahuje toto kľúčové slovo. A aby sa v tomto veľmi jednoduchom mýlite, pretože jeho obsah je úplne závislý od štruktúry kódu.

V tradičných programovacích jazykoch obsahuje odkaz na aktuálny objekt triedy. Ale pretože JavaScript je ďaleko od tradície, potom v ňom táto premenná označuje rodičovský objekt objektu.

Najjednoduchší spôsob, ako to pochopiť, je vziať ho pre majiteľa alebo rodičovstva metódy. To vždy odkazuje na rodič (rodič), s výnimkou prípadov, keď používate hovor, aplikujte alebo viažu metódy.

V nasledujúcom príklade je to odkazujúce na okno:

Funkcia MyFunkcia () (Console.Log (toto \u003d\u003d\u003d okno); // Pravda) MyFunkcia ();

Určite máte otázku, ako to môže byť rovné okno, ak na to apelujeme v rámci metódy? Ak poznáte odpoveď na túto otázku, potom dokonale, inak prečítajte a pokúsim sa to vysvetliť.

Pri deklarovaní funkcie týmto spôsobom je pripojený k objektu globálneho okna. Pamätajte si, že sme to odkazovali na spôsob metódy?

Zmena hodnoty tohto na úplne novom objekte (nie okno):

Funkcia MyFunkcia () (Console.Log (toto \u003d\u003d\u003d okno); // false) nová myfunkcia ();

Podporovatelia čistejšieho kódu určite v šoku z takéhoto príkladu. Len pôjdeme na vrchol ľadovca s takýmito príkladmi. Ako vidíte, táto hodnota sa už rovná oknom.

Prečo sa to stalo?

Najjednoduchšie vysvetlenie - v druhom príklade sme použili kľúčové slovo nové, tieto najviac sme vytvorili nový rozsah a nový objekt.

V nasledujúcom príklade vytvoríme fiktívne API na vyloženie údajov z knižnice zo servera. S niektorými metódami vytvoríme objekt API.

Pri použití slova nové, kontext skriptu sa pohybuje z kontextu okna do API.

Var API \u003d (Getdata: Funkcia () (Console.log (toto \u003d\u003d\u003d okno); // false console.log (toto \u003d\u003d\u003d API); // TRUE)); Api.getdata ();

Ako vidíte, hodnota je plne nastavená v spôsobe volania metódy. Keďže funkcia sa nazýva v objekte API, jej rodič, potom hodnota je odkazovaná objektom API.

Pamätajte, že táto hodnota sa zmení. To sa líši v závislosti od spôsobu volania, ale ak používate metódu Bind, hodnota tohto zostáva nezmenená.

Podrobnejšie s kľúčovým slovom v Javascript, môžete zoznámiť v článku Quirksmode a dokumentáciu z Mozilla.

"Použite prísne";

Ako sme už zadali skôr, používateľ sa používa na použitie prísnejšej verzie jazyka Javascriptu. Nasleduje táto smernica, aby sa uplatňovala vo všetkých skriptoch.

V predvolenom nastavení je JavaScript v jeho syntaxi celkom zadarmo. Bude jednoducho vynechať chybnú časť kódu a pokúsiť sa vykonať nasledujúce riadky, pričom vám nič nehovoríte.

V dokumentácii z Mozilla je na túto tému úplne veľký článok, odporúčam, aby ste sa s ňou stretli.

Rôzne typy cyklov

Budete prekvapení, ale som sa stretol s obrovským počtom vývojárov, ktorí nevedeli, ako správne používať cyklus a absolútne nepočuli o iných typoch cyklov. A byť schopný používať cyklus na poli alebo objekte - veľmi dôležitá zručnosť pre vývojára. Neexistuje žiadna jasná inštrukcia, keď a čo aplikovať typ cyklu, ale mali by ste sa v tejto veci navigovať. Určite ste oboznámení s a kým, ale čo iní?

Zoznam cyklov v Javascript:

• pre
• pre ... (pridané do ESS6)
• pre každý.
• zatiaľ čo
• urobte to ..

Cyklus

Absolútne povinný cyklus, ktorý musí vedieť a pochopiť. Vykonáva svoje telo pri vykonávaní stavu 2.

Pre (podmienka 1; stav 2; stav 3) (// Váš kód)

Podmienka 1 - vykonaná raz pred začiatkom série cyklov. Vo väčšine prípadov tu budete inicializovať cyklotrasy. Táto položka môže byť zmeškaná, ak inicializujete skôr.

Stav 2 - Táto podmienka sa používa na určenie na pokračovanie cyklu alebo nie. Pravdepodobne budete porovnať svoj pult s veľkosťou polí. Ak hodnota skutočného porovnania, cyklus pokračuje. Ak prerušujete cyklus vo vnútri prestávku, potom sa tento stav môže preskočiť.

Podmienka 3 - Táto stránka sa vykonáva po každom iterácii, spravidla je tu, že zvýšite počítadlo.

Cyklus pre ... v

Nasleduje typ cyklu. S ním môžete prejsť všetky polia triedy.

Uveďte príklad.

VAR Osoba \u003d (FirstName: "Dwayne", LastName: "Charrington", Vek: 27, Starsign: "Aquarius"); // Nižšie uvedená slučka vydá: // "dwayne" // "charrington" // 27 // "Aquarius" pre (ak (osoba.Hasownproperty (P)) (Console.Log (osoba [p]);)

Cyklus pre ... z

Do ES6 bol pridaný docela nový typ cyklu. Na základe svojej novosti, nie je podporovaná všetkými prehliadačmi. Ale keď používate určité technológie, možno ho už používať.

Tento cyklus je kompletný oproti ... In, prechádza cez hodnoty poľa a funguje len s typmi údajov, ktoré podporujú iterácie, ku ktorému sa objekt neplatí.

Var fruits \u003d ["oranžová", "Apple", "squash", "hruška"]; Pre (var plodov) (Console.log (ovocie);)

Veľký plus tohto typu cyklu je, že už nemusíme vytvoriť ukazovateľ a sledovať dĺžku poľa, aby ste úplne prešli svojimi prvkami.

Cyklus foreach

Ďalší typ cyklu, ktorý vo svojich hĺbkach nie je odlišný od predtým uvedených typov cyklov.

Pracuje len s poliami, nie objektov. Je prospešný pre to, že nemusíte vytvárať ďalšie premenné, ktoré nakoniec znečisťujú váš kód. \\ T

Určite je to najviac obmedzený typ typu cyklu, ale má svoje vlastné aplikácie, o ktorých bude vedieť, že pozná:

Var fruits \u003d ["jablko", "banán", "oranžová", "hrozno", "hruška", "passionfruit"]; // Tri hodnoty na funkcii spätného volania sú: // Element - Prvok je Traverse // Index - aktuálny index položky v poli, počnúc pri 0 // Array - pole je prechádzanie (pravdepodobne väčšinou irelevantné) Ovocie. Fúzia (funkcia (prvok, index, pole) (konzola.log (index, prvok););

Niekedy potrebujete prejsť všetky prvky poľa a možno, aby ste v nich urobili nejaké zmeny. Jeho správanie je podobné jquery.each.

Jeden nedostatok tohto typu cyklov - nemôže byť prerušený. Ak potrebujete vytvoriť cyklus podľa pravidiel ES5, použite metódu array.every, aby ste sa zoznámili s ktorým môžete v dokumentácii Mozilla.

Kým cyklus

Zatiaľ čo cyklus je podobný pre, ale prijíma iba jeden parameter - podmienka samotný, ktorým cyklus určuje, aby pokračoval v iteráciách alebo ich zastaviť.

Hoci tento typ cyklu je považovaný za najrýchlejší, myslím, že tento okamih je pomerne kontroverzný. Myslím, že nebudete tvrdiť, že tento typ cyklu nevyzerá opatrne ako iné, a jeho rýchlosť je možné vysvetliť len jednoduchosťou vnútornej logiky.

Podľa skúseností, poviem, že najrýchlejšia verzia tohto cyklu je cyklus so znížením merača, znížíte ho na jednotku, kým nedosiahnete nulu (ktorá je tiež tvrdená).

Var i \u003d 20; Zatiaľ čo (i--) (console.log (i);)

Cyklus robiť ... zatiaľ čo

Takýto cyklus je pomerne zriedkavý, ale stále ho stojí za to predstavovať, aby pochopil jeho prácu.

Zatiaľ čo cyklus nesmie vykonávať žiadnu iteráciu. To znamená, že ak prejdete falošnú hodnotu ako stav cyklu, potom nebude vykonaná žiadna iterácia. Do ... Kým cyklus je zaručený aspoň jednu operáciu.

Tento rozdiel nekončí. Zatiaľ čo cyklus spracováva stav pred vykonaním iterácie, a robiť ... zatiaľ čo.

Ako vždy, v dokumentácii z Mozilla nájdete podrobný opis tohto typu cyklov.

Základné metódy a úlohy

JavaScript existuje základné metódy, ktoré by mali byť známe. S ohľadom na prácu s poliami a riadkami ponúka JavaScript veľký súbor vstavaných metód. Dotkneme sa len polia a línií, zanechávame objekty neskôr.

Ak máte záujem pracovať s inými typmi údajov, potom odvážne kontaktujte dokumentáciu Mozilla. Samozrejme, nemali by ste poznať všetky tieto metódy srdcom, budem opísať iba tie, ktoré sa zdajú byť potrebné.

Práca s reťazcami

V JavaScript ste najčastejšie pracujete s reťazcovými údajmi, s výnimkou, pravdepodobne poliami a objektmi. Aj keď nefunguje s radmi, alebo si myslíte, že nefunguje, potom stále stojí za to oboznámiť s týmito metódami.

• String.Replace (regexp | Čo nahradiť, čo nahradiť, spätné volanie) - Umožňuje nahradiť časť čiary, je povolené používať regulárne výrazy.
• String.concat (Storok 1, riadok 2 ...) - pripojenie niekoľkých riadkov v jednom.
• String.indexof (hodnota) - Metóda vám umožňuje nájsť poradové číslo symbolu požadovanej časti riadku, -1 - ak sa reťazec nenašiel
• String.slice (Startindex, Entindex) - vráti oblasť reťazec od Startindex do Entindexu
• String.split (separátor, limit) - rozbije reťazec na pole od separátora, maximálna limitná dĺžka.
• String.subsctr (Startindex, Dĺžka) - Vráti časť reťazca začínajúcemu s dlhou dĺžkou Startindex.
• String.Tolowercase - prekladá všetky znaky reťazcov v malých písmenách
• String.touppercase - Preneste všetky znaky reťazcov v hornom registri
• String.trim - Odstráni medzery od začiatku a konca riadku

Práca s poliami

Často sa budete musieť stretnúť s poliami. Ukázali sa ako spôsob, ako ukladať údaje. Tieto metódy presne stojí za to poznať akýkoľvek vývojár JavaScript, nemali by ste ich hľadať v službe Google.

• Array.POP je nasmerovaný posledným prvkom a odstráni ho z poľa.
• Array.shift - vráti prvý prvok a odstráni ho z poľa.
• Array.Push (Val1, Val2) - pridáva jednu alebo viac hodnôt do konca poľa. Vráti novú dĺžku poľa.
• Array.Reverse - Zrkadlenie Zmení poradie prvkov poľa.
• Array.Sort - Umožňuje triedenie poľa pomocou vlastnej funkcie.
• Array.join (Separátor) - Vráti reťazec pozostávajúci z prvkov poľa oddelených symbolom separátora (predvolená čiarka).
• Array.indexof (hodnota) - Vracia index prvku v poli -1, ak sa položka nenachádza.

Toto nie je kompletný zoznam metód pre prácu s poliami. S ostatnými si môžete prečítať dokumentáciu z Mozilla. Počnúc ES6 boli pridané veľmi zaujímavé metódy.

Rozdiel medzi výzvou a platí

Tieto dve metódy sú pomerne často zmätené. Často môžete bez nich robiť, ale pomáhajú zavolať metódam a meniť hodnotu tohto počas vykonávania.

Rozdiel medzi nimi je pomerne malý, ale existuje. Pri použití metódy volania môžete nastaviť nekonečné číslo argumentov rozdelením čiarkou.

Pomocou metódy Apply môžete preniesť argumenty ako pole a zmeňte túto hodnotu.

Ak potrebujete jednoducho preniesť pole ako metódu argumentu, potom počínajte s ES6 Advanced (Spread) operátorom. Nedovolí vám to zmeniť. Môžete sa s ním oboznámiť, ako vždy v oficiálnej dokumentácii z Mozilly.

Príklad hovoru:

Funkcia MyFunc () (Console.log (argumenty);) MyFunc.call (toto, 1, 2, 3, 4, 5);

Použiť príklad:

Funkcia MyFunc () (Console.log (argumenty);) MyFunc.call (NULL,);

Zoznámenie s knižnicami a rámcami

Dnes sú najvýraznejšie zástupcovia javascriptových rámcov angularjs, react.js a ember. Samozrejme, stále existuje niekoľko ďalších.

Keďže webové aplikácie sa stávajú čoraz viac, táto knižnica s nimi zjednodušia prácu. Stojí za to chápať, že teraz vedia, že jeden jquery zjavne nestačí. Väčšina voľných pracovných miest je nastavená na znalosť ďalších knižníc Javascript ako hlavnej požiadavky.

Node.js.

Nepochybne node.js zaberá pevnú pozíciu. Prakticky akýkoľvek nástroj front-end je postavený na node.js a používa NPM (Node Package Manager), ak je neznáme, dôrazne vám odporúčam opraviť toto opomenutie. Vzhľadom k tomu, node.js používa JavaScript, potom sa učí, že nepredstavuje žiadne zvláštne ťažkosti pre tých, ktorí sú už oboznámení s týmto jazykom. Urobíte viac času na nastavenie balení uzla, než napísanie samotného kódu.

Osobne si myslím, že s uzlom by mal byť podpísať každý vývojár v roku 2015. Nehovorím o hlbokom vedomostiach, stačí ho byť schopný ho použiť na vývoj servera, prototypovanie, testovanie atď.

Tam je vidličkový node.js nazývaný io.js, dnes sú prakticky analógy, a nakoniec len napíšete do JavaScriptu okrem malých rozdielov.

Testovanie

Akonáhle sme nestratili kód JavaScriptu vôbec, pretože to nepovažovali za potrebné. Ale skripty sa stávajú čoraz viac a viac vďaka Angularjs a Node.js.

Vyvíja sa Javascript a objem skriptov zvyšuje a testovanie sa stáva životne dôležitým. Ak nebudete testovať svoj kód, potom robíte zle. Môj obľúbený tester je karma. Tam sú iní, ale toto konkrétne sa ukázalo lepšie ako všetci pri práci s Angularjs. A ak je to vhodné pre hnuljs, potom je pre mňa vhodné.

Nástroje

Byť vývojár Javascript v roku 2015 znamená nielen vynikajúce znalosti jazyka, ale aj veľký počet nástrojov na prácu s ním.

Niekedy nástroje obsahujú samotný prehliadač, ktorý používame. A niekedy musíte odkazovať na nástroje tretích strán, aby ste získali hlbšiu analýzu situácie.

Tu je súbor nástrojov, ktoré by ste mali pamätať: Gulp, Webback a Babeljs. Existuje oveľa viac nástrojov, ale nástroje ako GULP a Grunt vám pomôžu vyvíjať a spravovať aplikácie JavaScript.

Prešli tie dni, keď ste si práve stiahli súbor Javascript a pridal ho na vašu stránku. Teraz používame manažérov npm alebo bábky.

Kombinujeme a minimalizujeme skripty, otestujú ich, čo pomáha organizovať štruktúru projektu.

Nástroje JavaScript Choďte ruka v ruke pri vývoji izomorfného Javascriptu (kód používaný na strane klienta aj servera). Ecmascript 6, on je ES6, je to esnext

Prehliadače stále musia byť implementované väčšinu funkčnosti ECMAScript 6. Ale dnes môžete používať nové položky z ES6 pomocou kompilátorov Javascript. Zoznámte sa s novými API a metódami: Riadky, polia a iné metódy, ako sú slabé pády, symboly a triedy. Mali by ste si byť vždy vedomí nadchádzajúcich zmien.

Záver

Môžem vám veľa povedať. Súdiac podľa veľkosti tohto článku si dokážete predstaviť, koľko potrebujete vedieť vývojára JavaScriptu. Práve sme sa dotkli vrcholov ľadovca. Nemyslite si, že tento článok by mal byť vnímaný ako návod pre developer. Toto je len moja osobná vízia problému.