JavaScript a ES6

Späť na kurzy

Cena

179,00 €


alebo

4.9 z 5

Hodnotenie

5x
97%
4x
0%
3x
0%
2x
3%
1x
0%

Všetky online kurzy za 199 €

Viac info

Course duration 22h 26m 23s
Course chapters 186 kapitol
Course difficulty Mierne pokročilý

Popis online kurzu

JavaScript je najpopulárnejší programovací jazyk súčasnosti. Má najživšiu vývojársku komunitu, o pracovné ponuky nie je núdza. React, Angular, Vue a Node patria medzi najžiadanejšie technológie. Všetky z nich vyžadujú moderný JavaScript. Tento kurz ťa naučí moderný JavaScript.


Kurz JavaScript a ES6 je už úplne dokončený, tento kurz si však môžeš objednať za špeciálnu cenu 129 Eur do konca augusta. Potom sa cena kurzu zvýši na 179 Eur.

JavaScript 

JavaScript začal ako skriptovací jazyk internetových prehliadačov. Slúžil na overenie, čo si správne vyplnil formulár. Dnes toho vie oveľa viac. Vieš ním:

  • čítať, upravovať a mazať HTML a CSS
  • reagovať na udalosti v prehliadači
  • reagovať na akcie používateľa
  • ovládať prehliadač samotný
  • robiť tak stránky interaktívnymi a meniť ich na aplikácie

Dnes JavaScript existuje aj mimo prehliadača. Node.js ti dovolí jazykom JavaScript programovať na serveri, tým pádom JavaScript dnes vie nahradiť aj PHP, Ruby či Python. Ak sa zameriaš na JavaScript, nebudeš potrebovať žiaden iný programovací jazyk na vytvorenie plnohodnotnej webovej aplikácie. 

Tento online kurz sa venuje JavaScriptu v prehliadači. Na skutočných príkladoch sa naučíš syntax a pravidlá jazyka, ktoré platia všade, aj keby neskôr skočíš na server.

Na konci budeš vedieť JavaScript používať v prehliadači aj bez knižníc, ako jQuery. Ale hlavne sa naučíš písať dosť moderného JavaScriptu na to, aby si vedel používať Angular, React, Node, Vue a čokoľvek ďalšie, čo príde v budúcnosti.


Čo sa naučíš 

Okrem iného sa naučíš:

  • syntax a pravidlá jazyka JavaScript
  • JavaScript v prehliadači
  • moderný ES6/ES7 JavaScript
  • npm / yarn
  • skrotiť Document Object Model
  • zvládnuť Event Loop
  • SVG animácie
  • Webpack / Babel
  • ES6 moduly
  • asynchrónne programovanie, async/await, promises

Prvá polovica online kurzu ťa oboznámi s jazykom na menších príkladoch. Dostaneš tiež kopu praktických rád pre prácu s Developer Tools v prehliadači. A pochopíš, čím sa JavaScript líši od iných programovacích jazykov. 

Druhá polovica sa venuje ES6, tzv. modernému JavaScriptu. Modulom, bundlerom, package manažérom. Všetko veci, ktoré potrebuješ zvládnuť pre Angular či React.

Kurz JavaScript a ES6 je už úplne dokončený, tento kurz si však môžeš objednať za špeciálnu cenu 129 Eur do konca augusta. Potom sa cena kurzu zvýši na 179 Eur.

Čo všetko dostaneš

  • nadupaných 170 kapitol online kurzu
  • viac ako 22 hodín videotutoriálov
  • zdrojové kódy na stiahnutie
  • certifikát o absolvovaní online kurzu
  • garancia vrátenia peňazí v prípade, ak nebudeš s kurzom spokojný

Zoznam kapitol online kurzu *

  • JavaScript je tu

    • 01 JavaScript, kto je to?  

    • 02 JavaScript, pekný je, ale čo sa s ním dá robiť?  

    • 03 Dám ti knihy od múdrejších ľudí, MDN = áno  

    • 04 Prvý kód a prvotriedne funkcie()  

    • 05 Devtools break/point callStack (anonymné funkcie())  

    • ★ Zadanie 01  

    • 06 Event {object} console.log Devtools beforeunload  

    • 07 Šaháme na CSSko, lietame šípkami  

  • 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  

    • 11 Devtools je plný klenotov, Audits, JS a CSS láska  

    • 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  

  • 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)   

    • 36 'use strict', buď na mňa BDSM  

    • 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+  

    • 59 ES6/02 Arrow => functions(1)  

    • 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  

    • 75 ES6/18 Promises 01 - AJAX, len lepšie (teória)  

    • 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)  

    • 82 ES6/25 Getters, Setters  

    • 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   

    • 90 [BONUS] Vue.js appka 01: reaktívny kód  

    • 91 [BONUS] Vue.js appka 02: reaktívne elementy  

    • 92 [BONUS] Vue.js appka 03: animácie  

    • ★ 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  

  • NPM build tool (vs Grunt/Gulp)   

    • 143 NPM ako TASK RUNNER 01 (Grunt, Gulp)  

    • 144 NPM ako TASK RUNNER 02, nepotrebuješ Grunt/Gulp  

    • 145 NPM ako TASK RUNNER 03, NPM je tvoj BUILD TOOL  

  • 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  

  • Vlastný NPM package  

    • 167 Vlastný NPM package, Maštalizátor 01  

    • 168 Vlastný NPM package, Maštalizátor 02  

    • 169 Vlastný NPM package, Maštalizátor 03, NPM PUBLISH, Tomáš žije  

    • 170 Sme tu, sme povznesení