Jaké jsou povinnosti programátora javascriptu. Programovací jazyk JavaScript: Informace pro začátečníky. Co je JavaScript

Javascript je neustále se vyvíjející jazyk, zvláště nyní, kdy jsou aktualizace specifikace ECMAScript nastaveny na každoroční vydávání. V tomto ohledu roste důležitost znalosti Javascriptu mimo jQuery.

Samozřejmě v tomto článku nebudeme schopni pokrýt veškeré potřebné množství znalostí. Jistě se najdou okamžiky, které jsem propásl, možná jsem se spletl, nebo se naše názory na požadovaný soubor znalostí budou lišit.

Vzhledem k těmto aspektům začněme...

Co je test FizzBizz

FizzBizz je obvykle malý test zaměřený na vyřazení nezkušených vývojářů. Myslím, že byste byli překvapeni, kolik vývojářů javascriptu neví, jak takové testy psát.

Takové testy zpravidla nenesou velkou sémantickou zátěž. Je zaměřen výhradně na testování schopností potenciálních kandidátů.

Pamatujte, že šance, že budete požádáni, abyste na pohovoru udělali takový test, je velmi vysoká.

Příklad klasického testu FizzBizz:

Možnosti takových testů jsou nekonečné. Jednou jsem na pohovoru narazil na takový test, po kterém jsem se musel rozhodnout ještě pro dvě možnosti.

Pro (var i = 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 == a ===

Oba operátory porovnání pravděpodobně znáte. Víte však, jak přesně se tito operátoři liší? Váš Javascript Linter vyžaduje, abyste použili operátor ===, divte se proč?

Neporovnává typy operandů, místo toho je přetypuje na stejný typ. Taková operace má negativní pověst.

Console.log(24 == "24"); // skutečný

Jak vidíte, hodnota řetězce 24 (v jednoduchých uvozovkách) byla přetypována na typ celé číslo. Samozřejmě existují situace, kdy je to přesně to, co chcete, ale častěji pravděpodobně nechcete, aby operátor porovnání manipuloval s datovými typy. Porovnávání dat pomocí operátoru == se nedoporučuje, většina systémů pro kontrolu stylu kódu javascript vás na tuto chybu upozorní.

=== (přísné porovnání) porovnává datové typy, aniž by je převáděla na stejný typ, to znamená, že data budou porovnána tak, jak jsou. Protože tato operace nezahrnuje přetypování, funguje rychleji. Pro správnou funkci tohoto operátoru jsou tedy nutné operátory stejného typu.

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

Console.log(24 === "24"); // Nepravdivé

Jako odpověď dostaneme false , protože operandy jsou různých typů, jeden z nich je celočíselný a druhý je řetězcový.

Jak vybrat prvky DOM bez dalších knihoven

Určitě jste obeznámeni s výběrem prvků pomocí jQuery, ale dokážete totéž bez pomoci této knihovny?

Nemluvím jen o výběru prvku s konkrétním ID nebo sadou tříd, mluvím o výrazech pro hledání prvků pomocí jQuery.

Existuje několik nativních metod pro nalezení prvků v DOM, které jsou stejně dobré jako jQuery. Můžeme také použít first-child , last-child , a tak dále.

Pojďme se na některé z těchto metod podívat.

• document.getElementById je klasická metoda pro hledání prvků podle jejich ID.
• document.getElementsByClassName - načte prvky podle hodnoty pole className
• document.querySelector je skvělá metoda, která téměř úplně nahrazuje selektor $() jQuery, ale je již součástí Javascriptu. Jediný rozdíl je v tom, že vrací pouze první nalezený prvek.
• document.querySelectorAll je podobná předchozí metodě, ale vrací pole nalezených prvků.
• document.getElementsByTagName – Tato metoda vám pomůže vybrat prvky podle názvu značky. Pokud potřebujete najít všechny prvky div, pak potřebujete tuto metodu.

Chci také poznamenat, že metody querySelector a querySelectorAll lze použít nejen na celý dokument, ale také na jednotlivé prvky, to znamená, že můžete provést výběr v rámci jednoho nadřazeného prvku.

Úplný popis těchto metod naleznete v dokumentaci k mozille.

Deklarace proměnných a funkcí

Javascript je zajímavý tím, jak zachází s deklarovanými proměnnými a funkcemi, z nichž všechny jsou automaticky povýšeny na vrchol rozsahu. Tímto způsobem na ně můžete odkazovat dříve, než budou deklarovány v rozsahu (např. funkce v javascriptu mají svůj vlastní rozsah).

Pro čitelnost kódu proto udělejte pravidlo VŽDY deklarovat proměnné na začátku rozsahu. Pokud v horní části skriptu nebo funkce zadáte 'use strict', při přístupu k nedeklarované proměnné se zobrazí chyba.

Většina nástrojů pro kontrolu stylu kódu, jako je Jshint, vám dá chybu, pokud nepoužijete 'use strict' , takže pokud se snažíte napsat dobrý kód, nebudete moci používat proměnné, než budou stejně deklarovány. Jako vždy, pokud máte nějaké dotazy, podívejte se prosím do dokumentace od mozilly, tam vždy najdete kompletní a vyčerpávající popis vašeho problému.

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

Nejčastěji se takové nástroje používají k ladění javascriptových skriptů, ale jejich funkčnost není omezena na toto. Můžete například použít bod přerušení, procházet skriptem a přitom vstupovat do každé funkce.

Tyto nástroje jsou nepostradatelným pomocníkem, protože můžete plně sledovat výkon vaší aplikace a najít problémové oblasti.

Naučíte-li se používat vývojářské nástroje v prohlížečích, jako je Chrome, Firefox a nejnovější verze Internet Exploreru, můžete ladit svůj skript, měřit jeho výkon a najít místa, kde stojí za to algoritmus vylepšit.

Nikdy se nepokoušejte ladit kód naslepo, vždy jej nejprve analyzujte pomocí vývojářských nástrojů. Řešení problémů, které neexistují, je ztráta času.

Příkazy konzole

Přejděme k dalšímu bodu v poznávání vývojářských nástrojů. Obvykle všechny nabízejí konzolu, kde můžete interaktivně spouštět kód Javascript.

Pravděpodobně již znáte příkazy jako console.log a console.error , ale funkčnost konzole není omezena na toto.

Chci hned poznamenat, že ne všechny uvedené příkazy budou fungovat ve všech prohlížečích. Pokusím se zmínit pouze ty, které fungují v moderních prohlížečích. Jako radu však řeknu, že před jejich použitím se pokuste sami zkontrolovat jejich výkon, abyste kód nehromadili zbytečně.

• console.log – používá se pro protokolování událostí. Podporuje formátování.
• console.error - pro protokolování chyb v kódu. Tento příkaz používám, když jsou chyby v požadavcích AJAX a v jiných potenciálně nebezpečných částech kódu. Metoda je podobná předchozí, ale vytiskne seznam volání zásobníku.
• console.dir(object) - Zobrazí formátovaný obsah objektu. Tato metoda je zpravidla velmi užitečná při ladění kódu.
• console.group(title) - umožňuje vytvořit skupinu zpráv protokolu s názvem title. Zprávy tak můžete seskupit například podle části kódu, kde jsou generovány.
• console.groupCollpased je podobný předchozímu příkazu s jednou výjimkou. Konkrétně zobrazuje zprávy ve sbalené podobě.
• console.groupEnd - Ukončí dříve vytvořenou skupinu.
• console.time(label) - umožňuje sledovat rychlost webu v milisekundách. Metoda je užitečná pro zachycení potenciálně obtížných částí kódu.
• console.timeEnd(label) je podobná metodě groupEnd, ale funguje ve vztahu k console.time().
• copy(string) – V konzoli Chrome a Firefox existuje metoda, která umožňuje zkopírovat obsah řetězce do schránky. Velmi užitečná metoda, vyzkoušejte ji.

Co přesně je v tom obsaženo

Především je to velký zdroj problémů pro ty, kteří plně nechápou, co přesně se za tímto klíčovým slovem skrývá. A je velmi snadné v tom udělat chybu, protože jeho obsah zcela závisí na struktuře kódu.

V tradičních programovacích jazycích to obsahuje odkaz na aktuální objekt třídy. Ale protože javascript není zdaleka tradiční, v něm tato proměnná odkazuje na nadřazený objekt metody.

Nejjednodušší způsob, jak to pochopit, je vzít to jako vlastník nebo rodič metody. toto vždy odkazuje na nadřazený objekt, kromě případů, kdy používáte metody call , apply nebo bind .

V následujícím příkladu se to týká objektu okna:

Funkce myFunction() ( console.log(toto === okno); // true ) myFunction();

Jistě máte otázku, jak se to může rovnat oknu, pokud na to odkazujeme v rámci metody? Pokud znáte odpověď na tuto otázku, pak skvělé, jinak čtěte dál a pokusím se vysvětlit.

Když je funkce deklarována tímto způsobem, je vázána na globální objekt okna. Pamatujete si, když jsme řekli, že se to týká rodiče metody?

Změna hodnoty tohoto na zcela nový objekt (ne okno):

Funkce myFunction() ( console.log(toto === okno); // false ) new myFunction();

Zastánci čistoty kódu jsou pravděpodobně takovým příkladem šokováni. S takovými příklady jen kráčíme po špičce ledovce. Jak sami vidíte, hodnota tohoto se již nerovná window .

Proč se to stalo?

Nejjednodušším vysvětlením je, že ve druhém příkladu jsme použili klíčové slovo new , čímž jsme vytvořili nový rozsah a nový objekt.

V následujícím příkladu vytvoříme fiktivní API pro nahrávání dat z knihovny ze serveru. Pomocí některých metod vytvoříme objekt API.

Při použití slova nový se kontext skriptu přesune z kontextu okna do rozhraní API.

Var API = ( getData: function() ( console.log(toto === okno); // false console.log(this === API); // true ) ); API.getData();

Jak vidíte, tato hodnota je zcela nastavena způsobem, jakým je metoda volána. Protože je funkce volána v rámci objektu API, jeho rodiče, hodnota this odkazuje na objekt API.

Pamatujte, že hodnota tohoto se mění. Mění se v závislosti na tom, jak ji voláte, ale pokud použijete metodu bind, pak její hodnota zůstane stejná.

Více o klíčovém slově this v javascriptu se můžete dozvědět v článku Quirksmode a dokumentaci od Mozilly.

'použít přísné';

Jak jsme již zmínili, user strict se používá k vynucení přísnější verze jazyka javascript. Tato direktiva by měla být použita ve všech skriptech.

Ve výchozím nastavení je javascript ve své syntaxi docela volný. Jednoduše přeskočí chybný kus kódu a pokusí se provést následující řádky, aniž by vám něco řekl.

V dokumentaci mozilly je na toto téma celý článek, vřele doporučuji si jej přečíst.

Různé typy cyklů

Budete se divit, ale setkal jsem se s velkým množstvím vývojářů, kteří nevěděli, jak správně používat smyčku for a absolutně neslyšeli o jiných typech smyček. A schopnost smyčky na poli nebo objektu je pro vývojáře velmi důležitá dovednost. Neexistuje jasný návod, kdy a jaký typ cyklu použít, ale měli byste se v této věci řídit. Pravděpodobně to na chvíli znáte, ale co ostatní?

Seznam smyček v javascriptu:

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

pro smyčku

Naprosto povinný cyklus, který musíte znát a pochopit. ON vykoná své tělo, když je splněna podmínka 2.

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

Podmínka 1 – je splněna jednou před začátkem série cyklů. Ve většině případů zde inicializujete čítač smyček. Tuto položku lze přeskočit, pokud jste inicializaci provedli dříve.

Podmínka 2 – Tato podmínka se používá k určení, zda má smyčka pokračovat nebo ne. Zde budete pravděpodobně porovnávat svůj čítač s velikostí pole. Pokud je srovnávací hodnota pravdivá, cyklus pokračuje. Pokud smyčku interně přerušíte přerušením, lze tuto podmínku přeskočit.

Podmínka 3 - tato sekce se provádí po každé iteraci, zpravidla zde zvyšujete svůj počítadlo.

pro...ve smyčce

Další nejdůležitější typ cyklu. S ním budete moci projít všemi obory třídy.

Vezměme si příklad.

Var osoba = ( jméno: "Dwayne", příjmení: "Charrington", věk: 27, hvězdné znamení: "Vodnář") ; // Níže uvedená smyčka vypíše: // "Dwayne" // "Charrington" // 27 // "Aquarius" for (var p osobně) ( if (person.hasOwnProperty(p)) ( console.log(person[ p]);))

pro...smyčku

Do ES6 byl přidán poměrně nový typ smyčky. Vzhledem k jeho novosti jej nepodporují všechny prohlížeče. Ale s použitím určitých technologií je dnes docela možné to aplikovat.

Tato smyčka je přesným opakem for...in , iteruje přes hodnoty polí a funguje pouze s datovými typy, které podporují iteraci, což Object není.

Var ovoce = ["pomeranč", "jablko", "dýně", "hruška"]; for (var fruit of fruits) ( console.log(ovoce); )

Velkou výhodou tohoto typu smyčky je, že již nepotřebujeme vytvářet ukazatel a sledovat délku pole, abychom mohli kompletně iterovat jeho prvky.

pro každou smyčku

Další typ cyklu, který se svou hloubkou nijak neliší od dříve uvedených typů cyklů.

Funguje pouze s poli, nikoli s objekty. Má to výhodu, že nemusíte vytvářet další proměnné, které nakonec znečišťují váš kód.\

Toto je pravděpodobně nejomezenější typ cyklu, ale má své vlastní oblasti použití, o kterých byste měli vědět:

Var ovoce = ["jablko", "banán", "pomeranč", "hrozny", "hruška", "mučenka"]; // Tři hodnoty ve funkci zpětného volání jsou: // element - prvek, který je procházen // index - aktuální index položky v poli začínající na 0 // pole - pole, které prochází (pravděpodobně většinou irelevantní) ovoce.proKazdy(funkce(prvek, index, pole) ( console.log(index, prvek); ) );

Někdy stačí projít všechny prvky v poli a možná v nich provést nějaké změny. Jeho chování je podobné jako u jQuery.each.

Jednou nevýhodou tohoto typu cyklu je, že jej nelze přerušit. Pokud potřebujete vytvořit smyčku podle pravidel ES5, pak použijte metodu Array.every, kterou najdete v dokumentaci k mozille.

zatímco smyčka

Cyklus while je podobný jako for , ale zabírá pouze jeden parametr – samotnou podmínku, podle které smyčka určuje, zda v iteracích pokračovat, nebo je zastavit.

Přestože je tento typ cyklu považován za nejrychlejší, považuji tento bod za poněkud kontroverzní. Myslím, že nebudete tvrdit, že tento typ smyčky nevypadá úhledněji než ostatní a jeho rychlost lze vysvětlit pouze jednoduchostí vnitřní logiky.

Podle mých zkušeností je nejrychlejší while smyčka dekrementační smyčka, dekrementujete ji o jedničku, dokud se nedostanete na nulu (což je také diskutabilní).

Vari = 20; while (i--) ( console.log(i); )

do...během smyčka

Takový cyklus je poměrně vzácný, ale přesto stojí za to se s ním seznámit, abyste pochopili jeho práci.

Cyklus while nemusí dokončit žádné iterace. To znamená, že pokud předáte falešnou hodnotu jako podmínku do smyčky, neprovede se ani jedna iterace. Smyčka do...while je zaručena, že provede alespoň jednu operaci.

Tím rozdíl nekončí. Cyklus while zpracovává podmínku před iterací a smyčka do...while poté.

Jako vždy v dokumentaci od mozilly najdete podrobný popis tohoto druhu smyček.

Základní metody a úkoly

V javascriptu existují základní metody, o kterých byste měli vědět. Pokud jde o práci s poli a řetězci, javascript nabízí velkou sadu vestavěných metod. Dotkneme se pouze polí a řetězců a objekty necháme na později.

Pokud máte zájem o práci s jinými datovými typy, pak se neváhejte podívat do dokumentace mozilly. Všechny tyto metody by člověk samozřejmě neměl znát nazpaměť, popíšu jen ty, které považuji za nutné.

Práce se strunami

V JavaScriptu budete nejčastěji pracovat s řetězcovými daty, snad s výjimkou polí a objektů. I když se strunami nepracujete, nebo si myslíte, že nepracujete, přesto stojí za to se s těmito metodami seznámit.

• String.replace(regexp | co nahradit, čím nahradit, zpětné volání) - umožňuje nahradit část řetězce, regulární výrazy jsou povoleny.
• String.concat(řádek 1, řádek 2...) - zřetězení více řádků do jednoho.
• String.indexOf(value) - metoda umožňuje najít pořadové číslo znaku požadované části řetězce, -1 - pokud řetězec není nalezen
• String.slice(startIndex, endIndex) - vrátí část řetězce od startIndex do endIndex
• String.split(separator, limit) - rozdělí řetězec do pole pomocí separátoru, maximální délka je limit.
• String.subsctr(startIndex, délka) - vrací část řetězce začínající na startIndex s délkou délky.
• String.toLowerCase – Převede všechny znaky v řetězci na malá písmena
• String.toUpperCase - převede všechny znaky řetězce na velká písmena
• String.trim - odstranění mezer ze začátku a konce řetězce

Práce s poli

S poli se setkáte velmi často. Osvědčily se jako způsob ukládání dat. Tyto metody se určitě vyplatí znát každému javascriptovému vývojáři, negooglujte je.

• Array.pop - Vrátí poslední prvek a odstraní jej z pole.
• Array.shift - Vrátí první prvek a odstraní jej z pole.
• Array.push(val1, val2) - přidá jednu nebo více hodnot na konec pole. Vrátí novou délku pole.
• Array.reverse - obrátí pořadí prvků pole.
• Array.sort([porovnávací funkce]) - umožňuje seřadit pole pomocí vlastní funkce.
• Array.join(separator) - Vrací řetězec skládající se z prvků pole oddělených znakem oddělovače (ve výchozím nastavení čárkou).
• Array.indexOf(value) - Vrátí index prvku v poli, -1, pokud prvek nebyl nalezen.

Toto není úplný seznam metod pro práci s poli. Ostatní lze nalézt v dokumentaci k mozille. Od ES6 byly přidány některé velmi zajímavé metody.

Rozdíl mezi voláním a žádostí

Vývojáři tyto dvě metody často zaměňují. Často se bez nich obejdete, ale pomáhají vám volat metody a měnit tuto hodnotu během provádění.

Rozdíl mezi nimi je velmi malý, ale existuje. Při použití metody volání můžete zadat nekonečný počet argumentů tak, že je oddělíte čárkou.

Pomocí metody apply můžete předat argumenty jako pole a změnit hodnotu tohoto .

Pokud potřebujete pouze předat pole jako argumenty metodě, pak od ES6 byl přidán rozšířený (spread) operátor. Neumožňuje vám to změnit hodnotu. Můžete se s tím seznámit, jako vždy v oficiální dokumentaci od mozilly.

příklad volání:

Funkce myFunc() ( console.log(argumenty); ) myFunc.call(this, 1, 2, 3, 4, 5);

použít příklad:

Funkce myFunc() ( console.log(argumenty); ) myFunc.call(null, );

Úvod do knihoven a frameworků

Dnes jsou nejpozoruhodnějšími představiteli javascriptových frameworků AngularJS, React.js a Ember. Samozřejmě existuje řada dalších.

Jak jsou webové aplikace stále větší a větší, tyto knihovny usnadňují práci s nimi. Mělo by být zřejmé, že nyní znalost jQuery sama o sobě zjevně nestačí. U většiny volných pracovních míst je základním požadavkem znalost dalších javascriptových knihoven.

Node.js

Není pochyb o tom, že Node.js má silnou pozici. Téměř každý front-endový nástroj je postaven na node.js a používá npm (správce balíčků uzlů), pokud s ním nejste obeznámeni, důrazně vám doporučuji toto opomenutí opravit. Vzhledem k tomu, že node.js používá javascript, jeho učení není příliš obtížné pro ty, kteří již tento jazyk znají. Strávíte více času nastavováním balíčků uzlů než psaním skutečného kódu.

Osobně si myslím, že Node by měl v roce 2015 znát každý vývojář. Nemluvím o hlubokých znalostech, stačí je umět použít pro vývoj na straně serveru, prototypování, testování atd.

Existuje fork node.js nazvaný IO.js, který je dnes v podstatě stejný a na konci dne stačí napsat Javascript s několika malými rozdíly.

Testování

Kdysi jsme javascriptový kód vůbec netestovali, protože jsme to nepovažovali za nutné. Ale skripty jsou stále větší a větší díky AngularJS a Node.js.

Javascript se vyvíjí a objem skriptů roste a testování se stává životně důležitým. Pokud svůj kód netestujete, děláte to špatně. Můj oblíbený tester je Karma. Existují další, ale tento se nejlépe osvědčil při práci s AngularJS. A pokud je vhodný pro AngularJS, pak je vhodný pro mě.

Nástroje

Být javascriptovým vývojářem v roce 2015 znamená nejen výbornou znalost jazyka, ale také velké množství nástrojů pro práci s ním.

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

Zde je sada nástrojů, které je třeba mít na paměti: Gulp, Webpack a BabelJS. Existuje mnoho dalších nástrojů, ale nástroje jako Gulp a Grunt vám velmi pomáhají při vývoji a správě javascriptových aplikací.

Pryč jsou dny, kdy si stačí stáhnout soubor javascript a přidat ho na svou stránku. Nyní používáme správce balíčků NPM nebo Bower.

Skripty kombinujeme a minifikujeme, testujeme, což pomáhá organizovat strukturu projektu.

Javascriptové nástroje jdou ruku v ruce při vývoji izomorfního Javascriptu (kódu používaného na straně klienta i serveru). ECMAScript 6, aka ES6, aka ESNext

Prohlížeče zatím většinu funkcionality ECMAScriptu 6 neimplementovaly. Dnes už ale můžete novinky z ES6 využívat s pomocí javascriptových kompilátorů. Seznamte se s novými API a metodami: řetězci, pole a další metody jako WeakMaps, Symbols a Classes. Vždy byste si měli být vědomi nadcházejících změn.

Závěr

Můžu ti toho říct mnohem víc. Soudě podle velikosti tohoto článku si dokážete představit, kolik toho potřebuje vývojář javascriptu vědět. Dotkli jsme se pouze špičky ledovce. Nemyslete si, že tento článek je třeba brát jako návod pro vývojáře. Toto je jen můj osobní pohled na problém.

Převzato z Full-Stack JavaScript in Six Weeks: A Curriculum Guide

Vývoj webu je jednou z nejjednodušších, a proto oblíbenou oblastí mezi začínajícími programátory. K práci stačí jakýkoli textový editor a prohlížeč, nemusíte studovat algoritmy na pokročilé úrovni, výsledek každé fáze psaní programu je jasný - obecně existuje mnoho výhod. Klíčovou dovedností v kontextu vývoje webu je znalost JavaScriptu.

JavaScript se nyní vyvíjí velmi rychle, a proto je snadné se při učení jazyka zmást. Nabízíme vám dobře strukturovaný učební plán, který pokrývá všechny nezbytné aspekty JavaScriptu a souvisejících technologií.

Proč JavaScript?

Za povšimnutí stojí otevřenost jazyka – společnosti, které si obvykle konkurují, spolupracují na vývoji JavaScriptu. Jazyk je velmi flexibilní a bude vyhovovat příznivcům objektově orientovaného i funkčního přístupu. Obrovské množství knihoven a frameworků usnadňuje řešení jakéhokoli typu úloh a serverová platforma Node.js umožňuje používat jazyk nejen v prohlížeči, ale také v konzoli. Můžete dokonce psát desktopové a mobilní aplikace, první pomocí frameworku Electron a druhé pomocí NativeScript nebo React Native.

Základy

Nejprve se musíte naučit základní pojmy JavaScriptu, vývoje webu a programování obecně:

• objektově orientovaný JS - konstruktory a továrny, dědičnost;
• 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 nezbytný nástroj pro vývojáře, takže s ním musíte začít co nejdříve. Zde jsou základní dovednosti, které musíte mít:

• vytváření a přesouvání souborů v adresářích;
• inicializace a potvrzení v Gitu;
• nastavení repozitářů na GitHubu.

Algoritmy a datové struktury

Pak byste měli studovat algoritmy (zejména koncept složitosti algoritmů) a také základní datové struktury: propojené seznamy, fronty, zásobníky, binární vyhledávací stromy a hashovací tabulky. To vám pomůže.

Backend

Node.js

Před 10 lety bylo možné JavaScript používat pouze pro vývoj front-endu. Nyní, díky Node.js, věci nejsou omezeny na jednu „přední stranu“. Node je pouze prostředí pro spouštění kódu JS na straně serveru, takže se nemusíte učit novou syntaxi, ale potřebujete importovat a exportovat soubory, rozdělit kód do modulů a používat správce balíčků npm.

Servery, HTTP, Express.js

Poté, co se naučíte Node, stojí za to pokračovat ve vašem seznámení s vývojem back-endu a pochopením serverů a směrování. Můžete začít s porty a protokoly se zaměřením na HTTP a poté přejít na Express, knihovnu uzlů 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 potřebuje načíst nebo uložit jakákoli data, která se při aktualizaci stránky neztratí, budete muset použít databázi. Musíte se naučit rozlišovat mezi relačními a nerelačními databázemi a porozumět typům vztahů. Pak se seznamte s různými lidmi. Zbytečná nebude ani schopnost pracovat s ORM.

Frontend

HTML a CSS

HTML a CSS jsou páteří základů pro každého webového vývojáře. Nemusíte je dokonale znát, ale měli byste jim rozumět. Můžete se také naučit některé populární knihovny (jako je Bootstrap) a preprocesor CSS, jako je Sass, aby vaše CSS vypadalo jako normální kód. Pro zjednodušení práce s HTML si můžete vybrat jeden z oblíbených šablonovacích motorů, jako je pug.

jQuery a DOM manipulace

Jakmile vytvoříte vzhled a chování stránky pomocí HTML a CSS, budete také používat knihovnu jQuery k manipulaci s DOM. Mnoho lidí si myslí, že jQuery je k ničemu a brzy bude nahrazeno Angular a React, ale je šíleně populární, a proto stojí za to ho znát. Navíc se jednoho dne ocitnete v situaci, kdy pro vás bude nepohodlné zatloukat hřebíky mikroskopem React a pak přijde na pomoc odlehčený jQuery.

Nástroje pro vývojáře Chrome

Bylo by neodpustitelné opomíjet nástroje Chrome, které poskytují obrovské množství možností. S nimi můžete zkoumat prvky DOM, ladit pomocí konzole, sledovat trasy a mnoho dalšího. C popisuje několik užitečných funkcí konzole Chrome, které zjednoduší provádění rutinních úkolů.

AJAX

Pokud chcete, aby vaše aplikace nenačítala stránky po každé operaci s databází, určitě potřebujete AJAX – odesílá na pozadí asynchronní HTTP požadavky, jejichž odpovědi aktualizují pouze část displeje. S AJAXem můžete pracovat prostřednictvím jQuery pomocí metody .ajax.

Programování není jen způsob, jak vydělat velké peníze a dokonce ani mentální práce. Toto je příležitost pochopit, z čeho se skládá okolní svět, rozložit jej na malé částice a poté jej znovu sestavit, veden svou vlastní logikou a znalostmi.

Programovací jazyky jsou pouze nástrojem, pomocí kterého člověk vytváří pravidla ve vytvořených systémech.

Internet představuje nepřeberné množství příležitostí, kterých se chytré a podnikavé mysli chytají. Vývoj webu má samozřejmě také své vlastní nástroje pro uvádění nápadů do života. Jedním z nich je programovací jazyk JavaScript, o kterém bude řeč v tomto článku:

obecná informace

Mnoho lidí, dokonce i těch, kteří nemají s IT oborem nic společného, ​​slyšelo slovo Java. Revoluční platformně nezávislý jazyk, který je aktivně psán pro aplikace pro mobilní systémy. Vyvinula jej nadějná společnost Sun, která tehdy přešla pod křídla Oracle. Ale ani jedna společnost nemá nic společného s JavaScriptem:

Sun potřeboval pouze povolení k použití části jména. JavaScript kupodivu nevlastní vůbec žádná firma.

Při psaní webových aplikací se nejčastěji používá programování v JavaScriptu. Pokud stručně vyjmenujeme klíčové vlastnosti tohoto jazyka, měli bychom zdůraznit následující:

• Orientace objektu. Provádění programu je interakce objektů;
• Konverze typu dat 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. Díky takzvanému garbage collection vypadá JavaScript jako C# nebo Java.

Pokud mluvíme o podstatě používání JavaScriptu, pak vám tento jazyk umožňuje „oživovat“ stacionární stránky webů pomocí kódu, který lze spustit pro spuštění ( tzv. skripty). To znamená, že můžete nakreslit analogii s karikaturami, kde html a css jsou nakreslené znaky a JavaScript je to, co je nutí se pohybovat.

Pokud mluvíme o syntaxi JavaScriptu, pak má následující funkce:

• Registrace je důležitá. Funkce pojmenované func() a Func() jsou zcela odlišné;
• Za příkazy musíte vložit středník;
• Vestavěné objekty a operace;
• Prostory se neberou v úvahu. Ke stylování kódu můžete použít libovolný počet odsazení a také nové řádky.

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

Rozsah použití

Abychom pochopili, proč je JavaScript potřebný a jak moc je nutné jej studovat, je nutné zdůraznit některé oblasti, ve kterých se tento programovací jazyk používá.

• Vývoj webových aplikací. Chcete si nastavit jednoduché počítadlo, organizovat přenos dat mezi formuláři nebo umístit hru na svůj web? Pak bude JavaScript v této věci fungovat jako věrný pomocník;
• "Aktivní účast" v AJAX. Tato technologie umožnila výrazně urychlit práci aplikací výměnou dat se serverem v režimu „na pozadí“:

• OS. Možná to někdo nevěděl, ale Windows, Linux a Mac mají své konkurenty v prohlížečích, jejichž kód je lví podíl napsán v JavaScriptu;
• Mobilní aplikace;
• Oblast učení. Jakákoli specializace programování na univerzitě zahrnuje studium JavaScriptu v jednom nebo druhém svazku. Je to dáno tím, že jazyk byl původně vyvinut pro nepříliš silné programátory. Lekce JavaScriptu jsou logicky vetkány do základního kurzu HTML, takže zvládnutí je celkem jednoduché.

Výhody a nevýhody

Neměli byste si myslet, že JavaScript je nějakým všelékem na všechny problémy a každý programátor tento jazyk používá s úsměvem na tváři. Všechno na světě má své kladné i záporné stránky. Nejprve se podívejme na nedostatky.

• Potřeba zajistit kompatibilitu mezi prohlížeči. Protože JavaScript funguje jako internetová technologie, musíte se smířit s pravidly, která stanovuje World Wide Web. Kód musí správně fungovat ve všech, nebo alespoň v nejpopulárnějších prohlížečích;
• Dědičný systém v jazyce ztěžuje pochopení toho, co se děje. JavaScript implementuje dědičnost založenou na prototypech. Lidé, kteří studovali jiné objektově orientované programovací jazyky, jsou zvyklí na známé „ podřízená třída zdědí rodičovskou třídu". Ale v JavaScriptu jsou tyto věci řešeny přímo objekty, a to se nevejde do hlavy;
• Neexistuje žádná standardní knihovna. JavaScript neposkytuje žádné prostředky pro práci se soubory, I/O proudy a dalšími užitečnými věcmi;
• Syntaxe obecně ztěžuje pochopení. Krása kódu zjevně není silnou stránkou JavaScriptu, ale hlavní pravidlo programátorů je dodržováno: „ funguje? Nedotýkejte se!».

Nyní stojí za zmínku některé výhody

• JavaScript poskytuje velké množství možností pro řešení široké škály úloh. Flexibilita jazyka umožňuje použití mnoha programovacích vzorů ve vztahu ke konkrétním podmínkám. Vynalézavá mysl bude mít skutečné potěšení;
• Obliba JavaScriptu otevírá programátorovi značné množství hotových knihoven, které mohou výrazně zjednodušit psaní kódu a vyrovnat syntaktické nedokonalosti;
• Aplikace v mnoha oblastech. Široké možnosti JavaScriptu dávají programátorům možnost vyzkoušet si jako vývojář široké škály aplikací, a to samozřejmě podněcuje zájem o profesionální aktivity.

Nevěnujte pozornost skutečnosti, že tam bylo více mínusů než plusů. JavaScript je pevně zakořeněn ve svém výklenku a žádná kritika ho v tuto chvíli nevytlačí.

Pro ty, kteří chtějí studovat

Těm, kteří se rozhodli důkladně prostudovat JavaScript, čeká těžká a dlouhá cesta. Pro začátečníky existují základní doporučení, podle kterých si můžete trénink výrazně zjednodušit.

• Za prvé, HTML. Bez základů nemůžete začít dělat nic pro internet. Velmi užitečné jsou také kaskádové styly (CSS);
• Používejte novou literaturu. Programování není fyzika, jejíž zákony jsou nedotknutelné a nové tutoriály jsou odstraněny ze starých. IT technologie se neustále vyvíjejí a užitečné aktualizace by neměly být opomíjeny;
• Pokuste se napsat všechny části programu sami. Pokud něco nefunguje vůbec, můžete si půjčit kód někoho jiného, ​​​​ale pouze po vyjasnění každého řádku pro sebe;
• Ladění je váš skutečný přítel. Rychlé hledání chyb je jednou z nejdůležitějších věcí v programování;
• Neignorujte pravidla formátování. Kód se samozřejmě nezlepší ani nezhorší z jiného počtu odsazení a mezer, ale důležitým bodem je také snadnost čtení a porozumění pro programátora. Kód níže? velmi obtížné vnímat, zvláště pokud nejste jeho

• Názvy proměnných musí mít lexikální význam. V procesu psaní jednoduchých programů se to nezdá být vůbec důležité, ale když počet řádků kódu přesáhne tisíc, všichni čerti si podlomí nohy;