JavaScript a ES6

22h 34m 50s
Čas
190
Kapitol
4 796
Studentů
4.9
Hodnocení
Pokročilý
Level
slovenský
Jazyk kurzu

Popis online kurzu 

JavaScript je nejpopulárnější programovací jazyk současnosti. Má nejživější vývojářskou komunitu, o pracovní ponuky není nouze.   React, Angular, Vue a Node patří mezi nejžádanější technologie. Všechny z nich vyžadují moderní JavaScript. Tento kurz tě naučí moderní JavaScript.

JavaScript  

JavaScript začal jako skriptovací jazyk internetových prohlížečů. Sloužil na ověření, zda jsi správně vyplnil formulář. Dnes toho ví omnoho víc. Víš ním : 
  • číst, upravovat a mazat HTML a CSS
  • reagovat na události v prohlížeči
  • reagovat na akce uživatele
  • ovládat prohlížeč samotný
  • dělat tak stránky interaktivními a měnit je na aplikace
Dnes JavaScript existuje i mimo prohlížeče. Node.js ti dovolí jazykem JavaScript programovat na serveru, tím pádem JavaScript dnes ví nahradit aj PHP, Ruby či Python. Když se zaměříš na JavaScript, nebudeš potřebovat žádný jiný programovací jazyk na vytvoření plnohodnotné webové aplikace. 
Tento online kurz se věnuje JavaScriptu v prohlížeči. Na skutečných příkladech se naučíš syntax a pravidla jazyka, které platí všude, i kdyby později skočíš na server.
Na konci budeš umět JavaScript používat v prohlížeči i bez knižnic, jako jQuery. Ale hlavně se naučíš psát dost moderní JavaScript na to, aby si uměl používat Angular, React, Node, Vue a cokoli dalšího, co přijde v budoucnu.

Co se naučíš 

Krom jiného se naučíš:
  • syntax a pravidla jazyka JavaScript
  • JavaScript v prohlížeči
  • moderní ES6/ES7 JavaScript
  • npm / yarn
  • zkrotit Document Object Model
  • zvládnout Event Loop
  • SVG animace
  • Webpack / Babel
  • ES6 moduly
  • asynchronní programování, async/await, promises
První polovina online kurzu tě obeznámí s jazykem na menších příkladech. Obdržíš taktéž kopu praktických rad pro práci s Developer Tools v prohlížeči a pochopíš, čím se JavaScript liší od jiných programovacích jazyků
Druhá polovina se věnuje  ES6, tzv. modernímu JavaScriptu. Modulom, bundlerom, package manažerem. Všechno věci, které potřebuješ zvládnout pro Angular či React.

Co všechno dostaneš

  • ve finále více jako 100 kapitol online kurzu
  • zdrojové kódy ke stažení
  • certifikát o absolvování online kurzu
  • garance vrácení peňez v prípadě, že s kurzem nebudeš spokojen
Online kurz JavaScript a ES6 je možné

Seznam kapitol

JavaScript je tu
03 Dám ti knihy od múdrejších ľudí, MDN = áno
★ Zadanie 01
Naučím ťa programovať hry!
Tipy, rady a pravidlá pre každý kurz
Inštaluj si, nastavím ti
★ Zadanie 02
08 Install #1 Node, npm, package manažéri, Terminal
09 Install #2 Textové editory, Sublime nastavenia, JS package
10 Install #3 Lepšie dopĺňanie kódu cez Tern.js
JS v prehliadači
★ Zadanie 03
12 Click na mašinu, String vs Number, Type Coercion
13 Kolekcia na pole, NodeList vs Array, poľná frustrácia
14 DOM Polyfill Shim, si sochár, vyhadzuj kód veselo
15 _lodash, externé knižnice, otherDude
16 localStorage - ako cookies, len sexy
17 JSON formát, náš kamarát, v localStorage
18 localStorage limitácie a kde sa používa naozaj
★ Zadanie 04
19 JSON, tučné triky v Devtools konzole
20 Default operátor || "všetko je fajn, keď mám funkciu"
21 Document vs. Window object, globálne premenné, JS environment
22 MODULE PATTERN #1 anonymné IIFE, local function scope
23 MODULE PATTERN #2 fun Declaration vs. Expression, Hoisting
Nemusíš všetko (+ frustrujúce úlohy)
JavaScriptové špecialitky 1
24 Ak začínaš + ktorý jazyk si vybrať (či neskoro na takú otázku?)
25 Špecialitky #1 JavaScript wat
26 Špecialitky #2 Začiatky JS, ECMAScript, Node.js, V8
27 Špecialitky #3 JS dnes, JS nemá Classy, letmý stret s Prototypom
28 Špecialitky #4 Elegantný kód, Java vs JavaScript
29 Špecialitky #5 String, Number, Math.object()
★ Zadanie 05
30 Špecialitky #6 NaN a Infinity, číselné kuriozity (to sa rýmuje)
31 Špecialitky #7 Truthy/Falsy && Coercion || == vs === comedy !!
32 Špecialitky #8 Premenné, Hoisting, Scope, for a VAR vs. LET
33 Špecialitky #9 {object} [array] prototype, srandy s FOR cyklom
34 Špecialitky #10 funkcie() expression/stmnt, arguments.obj(), hodnota this
35 Špecialitky #X-II funkcie() call/apply, "konštruktor" cez new
★ Zadanie 06
SVG (a strict mode)
37 SVG formát, SVG HTML element, vektory sú tvoj kamarát
38 SVG atribúty, smeksi animácie, appky a galérie SVG ikoniek
39 SVG v HTML, aký máš dlhý a nebuď deprecated 👎 😭
40 Keď píšem do inputu, SVG kruh sa vypĺňa jak treba
41 Ja som mal trojku z matiky, čo sa bojíš
42 Točíme kruh, už sa hráme s farbami, dočkal si sa, juch
43 Classlist.toggle(), SVG stroke zdedil farbu z color
44 SVG + CSS3 bounce animácia, máme spinner jak nišť
45 Kompatibilitititalita s vieš čím, finálne SVG slová, úlohy
★ Zadanie 07
NPM a Babel
46 Úvod do ES6 alebo ES2015, pretože je to to isté ale ES6 je kratšie
47 Tvoj prvý ES6 kód (...rest, => fun, class)
48 Ešte stále tvoj prvý ES6 kód (default params, method(), BABEL)
49 NPM a rozprávka o moduloch, sadnite si deti
50 NPM, Code Reuse, Modul vs Package, [n]ode [p]ackage [m]anager
51 NPM, konzolový rýchlokurz, local vs global inštalácia
52 NPM init, package.json súbor, sladké dependencies
53 NPM, node_modules, koľko ti zaberá? pošli mi tvoj package
54 NPM, devDependencies, Production vs Development prostredie
55 (npm) BABEL, moderný kód v starých prehliadačoch, Babel pluginy
56 (npm) BABEL, ES2015+/ES6+ polyfill veď, watcher
57 (npm) BABEL, transpiller, večná súčasť života nášho
ESLint a VSCode videá
ES6+ / ES2015+
58 ES6/01 ES6 v zmysle ES2015+
60 ES6/03 Arrow functions(2) => pravidlá pre this
61 ES6/04 Arrow functions(3) nemá this => non-binding this
62 ES6/05 { block scope } 01 let, hoisting, implicit/explicit block
63 ES6/06 { block scope } 02 let v cykloch, async programovanie
64 ES6/07 CONST vs. VAR vs. LET, style guides
65 ES6/08 Object Literal Extensions, objekty sú fajn a teraz ešte viac
66 ES6/09 Object destructuring / Destructuring assignment
67 ES6/10 ...rest / spread... parametre
68 ES6/11 Default parameters vs. Default operator
69 ES6/12 Template `Strings`, Smart Strings
70 ES6/13 Novinky v String / Number / Math
71 ES6/14 Novinky v Array
72 ES6/15 Iterators, nový FOR...OF cyklus
73 ES6/16 Generator functions* 1
74 ES6/17 Generator functions* 2, idGenerator
76 ES6/19 Promises 02 - timer cez sľub, all, race (prax)
77 ES6/20 Asynchrónne programovanie, ASYNC/AWAIT (teória)
78 ES6/21 ASYNC/AWAIT (prax), callback hell choď preč
79 ES6/22 SET (ako pole, kde každá hodnota je unikát)
80 ES6/23 MAP (ako objekt, kde kľúč môže byť aj ne-string)
81 ES6/24 Symbol (nový dátový typ)
83 ES6/26 Proxies, sprav si špióna, zostaneš čistý
84 ES6/27 Chuťovky z budúcnosti, Exponentiation, UNICODE, viac
85 ES6/28 Class, extends, super()
86 ES6 Modules 01, rozbi kód na súbory (teória)
87 ES6 Modules 02, z Patternu na Modul
88 ES6 Modules 03, IMPORT / EXPORT
89 ES6 moduly zatiaľ pomalé, prepáč
Vue.js a jQuery BONUSY
91 [BONUS] Vue.js appka 02: reaktívne elementy
92 [BONUS] Vue.js appka 03: animácie
🔥Vue.js + SPA kurz! 🔥
★ Zadanie 08
93 [BONUS] Email obfuscation, skry ho pred robotom;)
Efektívny JavaScript a animácie
94 Efektívny kód, async/defer
95 link="preload" prefetch preconnect, daj súborom prioritu
96 Performance 01 / ako spúšťať menej kódu, Progress Indicator 01
97 Performance 02 / Progress Indicator 02
98 Performance 03 / odmeraj si FPS (lebo chceš 60fps a nemáš)
99 Throttle
100 Debounce (video 100, ha!)
★ Zadanie 09
101 DevTools PerfTools (zmákni Performance Tab v DevTools)
102 Rendering / Painting / Scripting / Reflow / Layout v prehliadači
103 Ako nájsť BOTTLENECK v kóde cez Performance Tools
104 Svižné animácie 01 / ScaleX brácho
105 Svižné animácie 02 / žiadny PAINT cez TRANSFORM
106 Svižné animácie 03 / oklam oko cez EASING
107 Top/Left vs CSS transform (gule nablýskané)
108 Compositing
109 Čo môžeš a NESMIEŠ meniť, ak chceš rýchle animácie
110 will-change
111 DOM výkon 01 / odmeraj si koľko ti trvá (kód)
112 DOM výkon 02 / prvý veľký performance test
113 DOM výkon 03 / 5 spôsobov rýchlej DOM manipulácie
114 requestAnimationFrame (a nie setTimeout/setInterval)
115 requestAnimationFrame - zosynchronizuj sa s monitorom
116 setInterval vs setTimeout vs rAF (kedy ktorý? jeden nikdy)
117 Multithreading, buď vláčna, vláknatá
118 Web Workers 01
119 Web Workers 02, sieťový roboš
120 Micro Tasks (rozbi masívny náklad na kúsky)
★ Zadanie 10
121 269 tipov pre rýchly JavaScript
122 Ďalších 167 tipov pre rýchly JavaScript
123 Animačné knižnice
124 anime.js
125 Posledný trik a finále JS efektivity
★ Zadanie 11
Module Bundler (Parcel) a YARN
126 Používam BUNDLER, kradnem z Redditu 01
127 Používam BUNDLER, kradnem z Redditu 02
128 Čo je MODULE BUNDLER? PARCEL vs WEBPACK
129 Užitočné NPM package, tvoj švédsky stôl technológií, nažer sa
130 PARCEL WORKFLOW 01 sass, babel, autoprefix
131 PARCEL WORKFLOW 02 postcss-uncss, build
132 BUILD STEP, DEV vs PRODUCTION server, Document Root
133 YARN vs NPM
134 JavaScript frontend 2018, toto všetko musím vedieť? Spoiler: NIE
135 yarn outdated, upgrade-interactive, package.json ~verzie
136 Návrh nového projektu, Vanilla Dudes, Class pre formuláre
137 Form.js Getters/Setters, žiadne bodkočiarky??
138 EVENT DELEGATION
139 Create new dude, z Formu do DOMu
140 Validácia, HTML5 dataset
141 Z JSONu do stránky, default parameters
142 Môj proces™, ako som to spravil naozaj, každý je iný #verydeep
★ Zadanie 12
Webpack (Module Bundler)
146 WEBPACK
147 WEBPACK 4+ zero config - bundling ÁNO, konfigurák NIE
148 WEBPACK config file, source maps, cache busting
149 WEBPACK plugins, CleanWebpackPlugin, HtmlWebpackPlugin
150 WEBPACK config pre DEV a PRODUCTION, Webpack DEV SERVER
151 WEBPACK loaders 01, babel, regex, config generátory
152 WEBPACK loaders 02, Sass, CSS, style
153 WEBPACK extract CSS to file, CleanCSS, PostCSS, PurifyCSS
154 WEBPACK img/file loaders, obrázky, CHUNKHASH vs HASH
155 Webpack TREE SHAKING (automaticky vysekne nepoužívaný JS kód)
156 Náš kód je prerastené prasa, ale taký je život (+ ENV variables)
157 WEBPACK ezoterično (Hot Module Replacement, ImageOptim a tak)
158 jQuery je mŕtve? Sám si! (pozor: padnú nadávky, rúham sa)
159 WEBPACK Visualizer
JavaScriptové špecialitky 2
160 JavaScript špecialitky #2, stiahni si moje šťavnaté PDF
161 Nečakané CSS tipy a takmer že až programátorské rady
162 CLOSURES
163 Ukradni mi dáta z kurzov, vypočímatematikuj priemernú dĺžku videí
164 PROTOTYPE
165 3 spôsoby ako zadeliť DEDIČNOSŤ v JS
166 OLOO vs ES6 Class
★ Zadanie na koniec
Vlastný NPM package
169 Vlastný NPM package, Maštalizátor 03, NPM PUBLISH, Tomáš žije
170 Sme tu, sme povznesení
Poď ma sledovať, creep

Hodnocení kurzu

Martin P.
Marek D.

Pozri aj tieto kurzy