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