Sodoben JavaScript s ES6 do ES13

Sodoben JavaScript z ES6–ES13 (JS-vodič)

Jezik: nemščina

Sodoben JavaScript z ES6-ES13 (JS-vodnik)

JavaScript obvladaš, vendar ti manjka pri funkcijah novejših JS različic? Potem si v tem tečaju prav! Spoznaj vse funkcije od ES6 do ES13, ki se najpogosteje uporabljajo v praksi in ti prinašajo največ koristi - za bolj razumljiv, vitkejši, lažje vzdrževan kodo z manjšo možnostjo napak. Tvoj trener: razvijalec programske opreme Stephan Haewß. Tvoja trening enota: več kot 6 ur. Tvoj uspeh: Kot spletni razvijalec boš takoj začel/-a pisati sodoben JavaScript!

Izboljšajte svojo kodo za spletne strani in spletne aplikacije z modernimi funkcijami JavaScripta.
Spoznaj podrobno vse praktično pomembne in koristne značilnosti od ES6 do ES13.
Pišite vitko, minimalistično kodo, ki jo je enostavno vzdrževati.
Več kot 6-urni priročnik avtorja programske opreme Stephana Haewßa.

Odkrijte, kaj novega in pomembnega se je pojavilo za skriptni jezik JavaScript od ECMAScript 6 - z enim samim celovitim priročnikom!

podrobnosti

Vsebina: 7 h Video vadničenje
Licenca: zasebna in komercialna Pravice uporabe

Kategorije

Spletno oblikovanje, CMS in razvoj

Z ljubeznijo ustvarjeno od:

Stephan Haewß

Primeri uporabe

Odpri galerijo

Sedaj preskočite od starega do sodobnega JavaScripta - v samo enem vodiču!
Odpri galerijo

Naučite se vse pomembne, praktične JS funkcije različic ES6 do ES13.
Odpri galerijo

Napišite elegantne, vitke in lažje razumljive JavaScript kode.

Uvod v tečaj

Kaj te čaka v tečaju JavaScript ES6–ES13?

JavaScript ES6-ES13: 1 | Kaj te čaka v tečaju?

To te čaka v tej spletni tečaj JavaScript ES6.

Uvod

JavaScript ES6–ES13: 2.1 | Zakaj ES6? Ali ne morem ostati pri dobrem starem JavaScriptu?

JavaScript ES6-ES13: 2.1 | Zakaj ES6? Ali se ne morem držati dobrega starega JavaScripta?

Javascript obstaja že mnogo let v brskalnikih. Skoraj vsaka spletna stran vsebuje več ali manj JS kodo. Čeprav so bile prve verzije še zelo trmaste, se je do sedaj dobro delalo s standardom ES5, vsaj če ste znali spretno obiti pasti in nepredvidljivosti. Zakaj se torej učiti nekaj novega in ne ostati pri preizkušenem? V tej lekciji bom pokazal prednosti novega standarda ES6 in razloge, zakaj se pravzaprav ne bi smeli odreči temu.

ECMAScript: ES6 do ES13 – nove možnosti

JavaScript ES6–ES13: 3.1 | Deklaracija spremenljivk z let in const proti var

JavaScript ES6–ES13: 3.1 | Deklaracija spremenljivk z let in const nasproti var

Do vključno ES5 je bila ključna beseda var edina možnost za deklaracijo spremenljivk ter je zaradi svojih posebnosti pogosto povzročala nezaželeno obnašanje ali celo napake. ES6 prinaša dve novi ključni besedi let in const, ki odpravljata nekatere pomanjkljivosti var.

JavaScript ES6-ES13: 3.2 | Zanka for

Zanka for je znana vsakemu spletnemu razvijalcu. Pogosto se uporablja tudi za pregledovanje polj. Z ES6 obstaja različica zanke for, ki to omogoča veliko krajše in preglednejše.

JavaScript ES6-ES13: 3.3 | Puščične funkcije

Funkcije so v JS bistvenega pomena in doslej so bile deklarirane in definirane samo prek ključne besede function. ES6 uvaja zelo eleganten in kratek zapis, ki ne le naredi kodo bolj berljivo, ampak tudi ponuja rešitev za nadležen problem z this.

JavaScript ES6–ES13: 3.4 | Neobvezni parametri funkcije

Izbirni parametri se v ES5 uresničijo nekoliko nerodno in se ne razkrivajo klicatelju funkcije. V ES6 lahko izbirne parametre s privzetimi vrednostmi zapišemo neposredno v podpis funkcije.

JavaScript ES6–ES13: 3.5 | Razčlenjevanje

JavaScript ES6–ES13: 3.5 | Razgradnja

Razkropljenje omogoča selektivno ekstrahiranje elementov iz objektov in nizov. Ob natančnem pregledu se pokažejo številne možnosti uporabe, ki ustvarjajo eleganten in kompakten JS-kodo.

JavaScript ES6–ES13: 3.6 | Rest parameter

Jezikovni označevalci so priznani in dopolnjem one-voice-commentary. Ta funkcionalnost ni podprta v Python, vendar je Python zelo popularen pri uporabnikih.

JavaScript ES6–ES13: 3.6 | Preostali parametri

Rokovanje z arguments-spremenljivko je bilo do ES6 potrebno, da je bilo dovoljeno uporabiti spremenljivo število parametrov pri funkcijah. V ES6 je to veliko lažje z uporabo t. i. preostalih parametrov.

JavaScript ES6–ES13: 3.7 | Rest-operator

Ne le pri definicijah funkcij se operator …- uporablja pri preostalih parametrih, ampak tudi pri razčlenjevanju matrik se ga lahko uporabi, da zajame "preostanek" elementov in jih ponudi kot matriko.

JavaScript ES6–ES13: 3.8 | Rest-operator z objekti

JavaScript ES6–ES13: 3.8 | Rest operator s predmeti

Restni operator se lahko uporabi ne le pri poljih, temveč tudi pri objektih, kjer lahko zajame preostale lastnosti in jih ponudi kot objekt.

JavaScript ES6–ES13: 3.9 | Operator razširitve pri tabelah

JavaScript ES6-ES13: 3.9 | Operator razširitve pri seznamih

Nasprotno od operatorja Rest je operator Spread. Izgleda enako (…), vendar stoji na drugi strani dodelitve in razporedi polje na svoje posamezne dele.

JavaScript ES6–ES13: 3.10 | Razširitveni operator pri objektih

JavaScript ES6-ES13: 3.10 | Operator razpečanja pri objektih

Trikk s širilnim operatorjem deluje zelo dobro tudi pri objektih. S tem lahko objekte »vmešamo« v druge objekte. Alternativa, Object.assign(), pa je prav tako zelo dobra.

JavaScript ES6–ES13: 3.11 | Deklaracija metod v objektnih dobesedah

JavaScript ES6–ES13: 3.11 | Deklaracija metod v objektnih literalih

Metode v objektnih dobesedcih so zelo nerodne za pisanje s ključno besedo function-. S pomočjo ES6 pa jih lahko napišemo veliko krajše in jedrnateje.

JavaScript ES6–ES13: 3.13 | Predloge nizi

JavaScript ES6-ES13: 3.13 | Predlog-Eseji

Težko je reči drugače: Večvrstične nizke konstante z vgrajenimi vrednostmi spremenljivk so bile do ES6 prava muka in tudi zelo neprijetne za branje. Novi predlogi za konstante v ES6 pa so prava sintaktična poslastica.

JavaScript ES6-ES13: 3.15 | Map kot slovar in shramba za ključe in vrednosti

JavaScript ES6-ES13: 3.15 | Map kot slovar in hramba ključ-vrednost

Objekte se je vedno dalo zlorabiti kot Key-Value-Store ali slovar, vendar z nekaterimi slabostmi. Nova podatkovna struktura Map se znebi teh slabosti ter ponuja trdno funkcionalnost slovarja, kot jo poznamo iz drugih programskih jezikov.

JavaScript ES6–ES13: 3.17 | Async in čakanje

JavaScript ES6-ES13: 3.17 | Asinhrono in čakanje

Po tem, ko se s pomočjo promisov izognemo peklu povratnih klicev, async/await konstrukt dodatno izboljša sintaktični sladkor. Temelji na promisih in omogoča programiranje asinhronih operacij skoraj tako kot sinhronih. Kdor enkrat programira z async/await, se izogne neposredni uporabi then- metode promisov (in še toliko bolj uporabi povratne klice).

JavaScript ES6–ES13: 3.19 | Dinamični uvozi

Poleg statičnega uvažanja modulov s ključno besedo import, ES6 tudi podpira dinamično uvažanje z uporabo funkcije import. Ker deluje asinhrono, se vrne obljuba (Promise), na katere rešitev lahko počakamo z uporabo await. S tem je omogočeno nalaganje modulov med delovanjem brez ovir.

JavaScript ES6–ES13: 3.21 | Dedovanje

Tudi dedovanje še vedno temelji na prototipih, vendar se v ES6 zapiše veliko lažje in pregledneje s ključno besedo extends. Ko se ga uporablja, je treba konstruktor osnovnega razreda poklicati ob pravem času z super. Kako to storiti, bo seveda pojasnjeno tudi v tej lekciji.

JavaScript ES6–ES13: 3.23 | Zasebna polja

Zdaj je mogoče deklarirati tudi zasebna polja, do katerih zagotovo ne moremo dostopati od zunaj. Malce nenavaden je način deklaracije, ki se opazno razlikuje od drugih programskih jezikov.

JavaScript ES6–ES13: 3.24 | Ustvarjanje objektov brez razreda

Z novim ključnim besedilom razred in povezanimi funkcijami, kot sta dedovanje in inkapsulacija podatkov (zasebna polja), bi morali biti vsi OO programerji zadovoljni, kajne? V tem poglavju želim predstaviti alternativo za ustvarjanje objektov, ki se popolnoma izognemo razredom, prototipom in temu, vendar pa omogoča bolj prilagodljiv način "dedovanja" oziroma boljše "komponiranje".

Sklep

JavaScript ES6-ES13: 4 | Povzetek in napotki

JavaScript ES6-ES13: 4 | Povzetek in poglednaprej

Najpomembnejše funkcije različice ES6 in novejše bi morale biti zdaj obravnavane. Ažuriranja pa se še vedno pojavljajo. Nekatere manj pogosto uporabljene funkcije še niso bile omenjene. V tem poglavju bo pojasnjeno, kaj lahko pričakujemo v prihodnosti, in katere funkcije bi še vedno bile zanimive v posebnih primerih.

Podrobnosti vsebine

Kako JS deluje danes!
Ali gre za ES-module, razredno in razredno neodvisno objektno programiranje ali puščične funkcije – s funkcijami, ki so se pojavile za JavaScript od ECMAScript 6 (ES6), je jezik za skriptiranje praktično odrasel. Želiš rasti skupaj, da boš svoje vrstice kode pisal/a sodobno? Potem začni ta več kot 6-urni tečaj JS programskega razvijalca Stefana Haewßa.

JavaScript od ES6 do ES13 – s temi funkcijami boš pisal/a sodobno kodo

Tečaj je namenjen spletnim razvijalcem, oblikovalcem spletnih strani in razvijalcem JavaScripta. Da lahko razumeš vsebino, že poznaš osnove razvoja JS-a. Med tečajem se boš naučil/a naslednje funkcije JavaScripta:

Deklaracija spremenljivk z let in const
Zanka For in puščične funkcije
Moduli v ES6
Deklaracija metod v objektnih doslednicah (literals)
Koristne in nove metodne funkcije nizov
Koristne nove funkcije matrike, kot so find, filter, map, reduce
Pisanje elegantne in kratke kode z razkrajanjem
Operator Rest in Spread
Razredi in dedovanje z class-Keyword
Uporaba obljub (Promises)

Vitkejši, elegantnejši in manj napak – tvoja nova koda v JavaScriptu

Ali gre za novo modulsko strukturo, puščične funkcije, obljube ali async/await – od ES6 do ES13 je bilo za JavaScript uvedenih veliko koristnih funkcij, ki jih uporabljajo tudi JS ogrodja, kot so VueJS, React in Redux.

Na splošno lahko rečemo, da se z vsem, kar se je zgodilo od ES6 naprej, zdaj lahko piše precej boljše in lažje razumljive kode. Zato bi moral/a tudi ti postati seznanjen/a z modernimi standardi. Začni preprosto z tem tečajem JavaScripta – in spoznaj, kako deluje sodobno JS kodiranje danes!