JavaScript a ES6 (masívny kurz)

napísal , 15 Dec 2017 [ CSS HTML JavaScript jQuery NodeJs Skriptovanie Tutoriály Videá ]

JavaScript je najpopulárnejší jazyk súčasnosti.
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.

Je to veľký kurz.
Môžeš si ho kúpiť už teraz, videá doň stále pribúdajú.
Na konci ich bude cez 100.

Teraz ho máš za 129 eur. Zdarma ak máš predplatné.
Plná cena, po dokončení všetkých videí, bude 179 eur.

Nový Webrebel kurz kupuj tu: JavaScript a ES6

pozri si pár drobných ukážok z úvodu, ňach máš predstavu

 

JAVASCRIPT

JavaScript začal ako skriptovací jazyk v prehliadači.
Slúžil na overenie, čo si správne vyplnil formulár.
Dnes toho zvládne 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ť server, 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.

 

JAVASCRIPT A ES6

Prvá polovica online kurzu ťa oboznámi s jazykom na menších príkladoch. Dám ti 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. JavaScript sa svojou syntaxou tvári ako bežný OOP jazyk. Ale to iba, beťár, klame telom. V skutočnosti je oveľa divnejší. Ale ako uvidíš, nemá sa za čo hanbiť.

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. Tieto technológie samozrejme nemusíš používať, ale po tomto kurze na ne budeš pripravený. Naučíš sa:

  • 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
  • kopu iného

 

POTREBUJEM TO, AK MÁM WEBREBEL 1?

Prvý Webrebel ti dal intro do JavaScriptu. Ale bol zameraný na knižnicu jQuery, dostal si úvod do AJAXu a robili sme hlavne animácie. Tu nepoužívame žiadnu knižnicu, iba čistý jazyk JavaScript.

A hlavne postupne prejdeme na jeho modernú verziu, ES6/ES2015 a ďalej.
Keď k tomu prihodíme module bundlers a transpilers, JavaScript dnes vyzerá inak, ako pred pár rokmi.

Webpack, Babel, Moduly, práca s terminálom.
Uvidíš tu všetky veci, ktoré potrebuješ, ak chceš používať Angular, React alebo Vue.
Všetko veci, ktoré v prvom Webrebelovi neboli.

Po tomto kurze spravím kurz na Vue.js. Podobne ako React alebo Angular ti pomáha s UI, hlavne pri single page stránkach a "reaktívnych" aplikáciách. Predstav si veci ako Netflix, Trello alebo Spotify. Tento JavaScript a ES6 kurz ťa na to pripraví.

Tento kurz počíta s tým, že HTML a CSS máš zmáknuté. Ak si úplný začiatočník, choď najprv do Webrebel 1 videí o HTML a CSS, ktoré sú mimochodom zdarma :)

 

JavaScript a ES6 sa dá kúpiť tu za 129 eur.
179 po dokončení.

  1. JavaScript, kto je to?
  2. JavaScript, pekný je, ale čo sa s ním dá robiť?
  3. Dám ti knihy od múdrejších ľudí, MDN = áno
  4. Prvý kód a prvotriedne funkcie()
  5. Devtools break/point callStack (anonymné funkcie())

rozbaliť zvyšné epizódy

  1. Event {object} console.log Devtools beforeunload
  2. Šaháme na CSSko, lietame šípkami
  3. Install #1 Node, npm, package manažéri, Terminal
  4. Install #2 Textové editory, Sublime nastavenia, JS package
  5. Install #3 Lepšie dopĺňanie kódu cez Tern.js
  6. Devtools je plný klenotov, Audits, JS a CSS láska
  7. Click na mašinu, String vs Number, Type Coercion
  8. Kolekcia na pole, NodeList vs Array, poľná frustrácia
  9. DOM Polyfill Shim, si sochár, vyhadzuj kód veselo
  10. _lodash, externé knižnice, otherDude
  11. localStorage - ako cookies, len sexy
  12. JSON formát, náš kamarát, v localStorage
  13. localStorage limitácie a kde sa používa naozaj
  14. JSON, tučné triky v Devtools konzole
  15. Default operátor || "všetko je fajn, keď mám funkciu"
  16. Document vs. Window object, globálne premenné, JS environment
  17. MODULE PATTERN #1 anonymné IIFE, local function scope
  18. MODULE PATTERN #2 fun Declaration vs. Expression, Hoisting
  19. Ak začínaš + ktorý jazyk si vybrať (či neskoro na takú otázku?)
  20. Špecialitky #1 JavaScript wat
  21. Špecialitky #2 Začiatky JS, ECMAScript, Node.js, V8
  22. Špecialitky #3 JS dnes, JS nemá Classy, letmý stret s Prototypom
  23. Špecialitky #4 Elegantný kód, Java vs JavaScript
  24. Špecialitky #5 String, Number, Math.object()
  25. Špecialitky #6 NaN a Infinity, číselné kuriozity (to sa rýmuje)
  26. Špecialitky #7 Truthy/Falsy && Coercion|| == vs === comedy !!
  27. Špecialitky #8 Premenné, Hoisting, Scope, for a VAR vs. LET
  28. Špecialitky #9 {object} [array] prototype, srandy s FOR cyklom
  29. Špecialitky #10 funkcie() expression/stmnt, arguments.obj(), hodnota this
  30. Špecialitky #X-II funkcie() call/apply, "konštruktor" cez new
  31. 'use strict', buď na mňa BDSM
  32. SVG formát, SVG HTML element, vektory sú tvoj kamarát
  33. SVG atribúty, smeksi animácie, appky a galérie SVG ikoniek
  34. SVG v HTML, aký máš dlhý a nebuď deprecated
  35. Keď píšem do inputu, SVG kruh sa vypĺňa jak treba
  36. Ja som mal trojku z matiky, čo sa bojíš
  37. Točíme kruh, už sa hráme s farbami, dočkal si sa, juch
  38. Classlist.toggle(), SVG stroke zdedil farbu z color
  39. SVG + CSS3 bounce animácia, máme spinner jak nišť
  40. Kompatibilitititalita s vieš čím, finálne SVG slová, úlohy
  41. Úvod do ES6 alebo ES2015, pretože je to to isté ale ES6 je kratšie
  42. Tvoj prvý ES6 kód (...rest, => fun, class)
  43. Ešte stále tvoj prvý ES6 kód (default params, method(), BABEL)
  44. NPM a rozprávka o moduloch, sadnite si deti
  45. NPM, Code Reuse, Modul vs Package, [n]ode [p]ackage [m]anager
  46. NPM, konzolový rýchlokurz, local vs global inštalácia
  47. NPM init, package.json súbor, sladké dependencies
  48. NPM, node_modules, koľko ti zaberá? pošli mi tvoj package
  49. NPM, devDependencies, Production vs Development prostredie
  50. (npm) BABEL, moderný kód v starých prehliadačoch, Babel pluginy
  51. (npm) BABEL, ES2015+/ES6+ polyfill veď, watcher
  52. (npm) BABEL, transpiller, večná súčasť života nášho
  53. ES6/01 ES6 v zmysle ES2015+
  54. ES6/02 Arrow => functions(1)
  55. ES6/03 Arrow functions(2) => pravidlá pre this
  56. ES6/04 Arrow functions(3) nemá this => non-binding this
  57. ES6/05 { block scope } 01 let, hoisting, implicit/explicit block
  58. ES6/06 { block scope } 02 let v cykloch, async programovanie
  59. ES6/07 CONST vs. VAR vs. LET, style guides
  60. ES6/08 Object Literal Extensions, objekty sú fajn a teraz ešte viac
  61. ES6/09 Object destructuring / Destructuring assignment
  62. ES6/10 ...rest / spread... parametre
  63. ES6/11 Default parameters vs. Default operator
  64. ES6/12 Template `Strings`, Smart Strings
  65. ES6/13 Novinky v String / Number / Math
  66. ES6/14 Novinky v Array
  67. ES6/15 Iterators, nový FOR...OF cyklus
  68. ES6/16 Generator functions* 1
  69. ES6/17 Generator functions* 2, idGenerator
  70. ES6/18 Promises 01 - AJAX, len lepšie (teória)
  71. ES6/19 Promises 02 - timer cez sľub, all, race (prax)
  72. ES6/20 Asynchrónne programovanie, ASYNC/AWAIT (teória)
  73. ES6/21 ASYNC/AWAIT (prax), callback hell choď preč
  74. ES6/22 SET (ako pole, kde každá hodnota je unikát)
  75. ES6/23 MAP (ako objekt, kde kľúč môže byť aj ne-string)
  76. ES6/24 Symbol (nový dátový typ)
  77. ES6/25 Getters, Setters
  78. ES6/26 Proxies, sprav si špióna, zostaneš čistý
  79. ES6/27 Chuťovky z budúcnosti, Exponentiation, UNICODE, viac
  80. ES6/28 Class, extends, super()
  81. ES6 Modules 01, rozbi kód na súbory
  82. ES6 Modules 02, z Patternu na Modul
  83. ES6 Modules 03, IMPORT / EXPORT
  84. ES6 moduly zatiaľ pomalé, prepáč
  85. Vue.js appka 01: reaktívny kód
  86. Vue.js appka 02: reaktívne elementy
  87. Vue.js appka 03: animácie
  88. Email obfuscation, skry ho pred robotom;)
  89. Efektívny kód, async/defer
  90. link="preload" prefetch preconnect, daj súborom prioritu
  91. Performance 01 / ako spúšťať menej kódu, Progress Indicator 01
  92. Performance 02 / Progress Indicator 02
  93. Performance 03 / odmeraj si FPS (lebo chceš 60fps a nemáš)
  94. Throttle
  95. Debounce (video 100, ha!)
  96. DevTools PerfTools (zmákni Performance Tab v DevTools)
  97. Rendering / Painting / Scripting / Reflow / Layout v prehliadači
  98. Ako nájsť BOTTLENECK v kóde cez Performance Tools
  99. ...nové videá pridávam priebežne...


Do zoznamu postupne pridávam každú novú várku videí.

Edit 17.12.2017, 2 nové videá
Edit 18.12.2017, 4 nové videá
Edit 21.12.2017, 9 nových videí
Edit 30.12.2017, 3 nové... zadania plné domácich úloh;)
Edit 31.12.2017, 4 nové zbierky domácich, dokopy máš 24 úloh
Edit 15.01.2018, 3 nové videá, ES6
Edit 20.01.2018, 6 nových videí, BABEL / NPM
Edit 21.01.2018, 3 nové videá
Edit 13.02.2018, 4 nové (es6)
Edit 14.02.2018, 8 nových (69, nice)
Edit 24.02.2018, 5 nových
Edit 19.03.2018, 11 nových videí
Edit 23.03.2018, 3 nové (es6 časť kurzu done!)
Edit 22.06.2018, 15 nových (vuejs! performance!)

Ak chceš nové info o všetkom, choď na facebook.com/yablko.smrdi.
Ak chceš ďalšie moje videá, choď na youtube.com/yablko.
Ak chceš všetky kurz na rok, skús predplatné.
Ak sa ti kurz páči, povedz každému:)

napísal , 15 Dec 2017

16 komentárov

komentuj ku každému komentáru sa v databáze ukladá iba meno, text a dátum, iba za účelom zobrazenia pod článkom
neukladá sa email, IP adresa ani informácie o prehliadači a údaje sa nepoužívajú na reklamu, newsletter, na žiadnu ekonomickú aktivitu, nikam sa neposielajú, sú v databáze len aby sa mohli zobraziť pod článkom
  1. Michal [ Nedeľa 17.12.2017, 11:48 ]

    Díky! Díky Webrebelu má předplatné lear2code smysl :)

  2. yablko [ Nedeľa 17.12.2017, 18:25 ]

    dík:)

    ...a pridal som 2 videá

    31. Špecialitky #7 Truthy/Falsy && Coercion || == vs === comedy !!
    32. Špecialitky #8 Premenné, Hoisting, Scope, for a VAR vs. LET

  3. Jozef [ Pondelok 18.12.2017, 10:03 ]

    Zdravím vás, je kurz aj pre úplného začiatočníka? Chcel som začať s WEBREBEL 1 , ale to by menilo situáciu. Díík

  4. Jozef [ Pondelok 18.12.2017, 10:14 ]

    Mysle som že nemám ani šajnu o HTML a CSS

  5. yablko [ Pondelok 18.12.2017, 19:39 ]

    čau, určite by si najprv mal ísť do Webrebel 1
    tento nový je pokročilejší a počíta s tým, že html a css dobre poznáš
    ( a pozri sem https://brm.sk/770/webrebel-html-css-kurz-zdarma )

    ...

    a 4 nové videá

    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
    36 'use strict', buď na mňa BDSM

  6. yablko [ Štvrtok 21.12.2017, 18:10 ]

    9 nových

    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

    SVG + animácie

  7. yablko [ Nedeľa 31.12.2017, 10:49 ]

    včera 3 nové... zadania plné domácich úloh;)
    dnes 4 nové... zbierky domácich!

    si sa tešil, jak na nový rok pridám nové videá
    ale keďže som prísna učiteľka, namiesto toho som do kurzu pridal 7 kapitol plných domácich úloh, 24 úloh dokopy pre veselú zábavu

    ale furt hovorím, jediný spôsob ako sa naučiť písať kód, je písať kód
    tak píš kód

    plus je tam kopa kvalitného textu, kde do zadaní úloh pridávam informácie a vysvetlenia, ktoré sa do videí nezmestili

    takže daj si predsavzatie, že ich všetky v novom roku spravíš, ale po pár týždňoch si povieš, "ok, tak si ich aspoň prečítam teda"

    choď, šup
    a snáď prežijeme ten ďalší rok, držme si palce

  8. yablko [ Pondelok 15.1.2018, 20:59 ]

    3 nové videá, šlapeme ďalej, ES6

    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)

  9. yablko [ Sobota 20.1.2018, 15:52 ]

    6 nových videí NPM / BABEL

    V JavaScript svete máš dnes milión nástrojov. Nie všetky potrebuješ poznať, neboj. Každopádne my chceme písať moderný JavaScript, ale zároveň chceme, aby kód fungoval aj v starších prehliadačoch.

    Na to potrebujeme Babel.
    Aby sme Babel nainštalovali, potrebujeme npm.
    Cez npm môžeš sťahovať moduly pre Node.js.
    Lenže mi nepracujeme v Node.js, my pracujeme v prehliadači.
    Webpack vie Node moduly rozbehať v prehliadači.

    Babel je tzv. tanspiller.
    Npm je tzv. package manager.
    Webpack je tzv. module bundler.

    Každý z nich má aj svoju konkurenciu, ale tieto sú asi najpoužívanejšie.
    O nich bude táto časť kurzu.

    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

  10. yablko [ Nedeľa 21.1.2018, 15:06 ]

    3 nové videá

    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

  11. yablko [ Utorok 13.2.2018, 22:53 ]

    4 nové videá
    zajtra prídu ďalšie

    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

  12. yablko [ Streda 14.2.2018, 15:12 ]

    8 nových

    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

    (69, nice)

  13. yablko [ Sobota 24.2.2018, 10:20 ]

    5 nových

    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

  14. yablko [ Utorok 20.3.2018, 14:02 ]

    11 nových videí

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

    toto sú posledné z es6-prezentácioidnej časti kurzu, potom znova do visual studio code a idem na moduly, importy, exporty, kde môžeš javascript kód rozbíjať do

    viacerých súborov a vkladať ich do seba, podobne ako require/include z phpčka napr

    - potom vyrobím ďalšiu mini-stránku na štýl sex mašiny, nech nezabudneme ozajstný kód programovať, tam ukážem ďalšie koncepty javascriptové

    - potom module bundlers ako webpack/rollup a tzv. build tools

    - potom dám trochu teórie o veciach ako event loop, možno rôzne spôsoby ako dosiahnuť dedičnosť v js a iné špecialitky šéfkuchárky

    - potom vyrobím posledný kos kódu ozajstný, rozmýšľam, že možno ukážem ako spraviť vlastný blockchain:) a tým to uzavrieme

    ...a niekde by som tam mal vtesnať videá a visual studio code...

    a neskôr mám v pláne z tohoto kurzu vytiahnuť 2 menšie kurzy, podobne ako som to spravil s kurzom Základy programovania a OOP, ktorý je vlastne rozšírená verzia niektorých videí z PHP a Laravel kurzov

    potom pôjdem buď na Vue alebo Zákady programovania v JavaScripte alebo si dám oddych od JS na chvíľu a pridám pár videí o CSS Grid Layout do prvého Webrebela

  15. yablko [ Piatok 23.3.2018, 10:23 ]

    3 nové videá

    86 ES6 Modules 01, rozbi kód na súbory
    87 ES6 Modules 02, z Patternu na Modul
    88 ES6 Modules 03, IMPORT / EXPORT

    o es6 moduloch
    jak by názvy mohli napovedať
    import/export
    a hlavne týmto je es6+ časť kurzu hotová
    takže vieme písať nový kód, teraz s ním spravím ďalšiu mini appku, potom module bunlders / build tools

  16. yablko [ Piatok 22.6.2018, 10:24 ]

    15 nových videí
    prvá ukážka Vue.js! a performance v prehliadači, efektívny kód, animácie, ako nájsť bottleneck, devtools performance tab, ...

    89 ES6 moduly zatiaľ pomalé, prepáč

    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
    93 [BONUS] Email obfuscation, skry ho pred robotom;)

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

ku každému komentáru sa v databáze ukladá iba meno, text a dátum, iba za účelom zobrazenia pod článkom
neukladá sa email, IP adresa ani informácie o prehliadači a údaje sa nepoužívajú na reklamu, newsletter, na žiadnu ekonomickú aktivitu, nikam sa neposielajú, sú v databáze len aby sa mohli zobraziť pod článkom