JavaScripti veebikursus. Veebiliideste professionaalne areng - HTML Academy tasuta kursus, koolitus 9 nädalat, kuupäev 15.10.2023.

1. jaotis JavaScripti sissejuhatus
Vaatame, kuidas kursus töötab, milliseid tööriistu vajate ja kuidas neid seadistada. Vaatame, mis on JavaScripti keel, sealhulgas ECMAScripti spetsifikatsioon ja brauser.

Kuidas kursus töötab? Organisatsioonilised asjad.

Kursusel töötamise skeem.
Projektide läbivaatamine.
Kvaliteedikriteeriumid.

JavaScripti keel

ECMAScripti spetsifikatsioon.
Mida brauser JavaScripti annab?

JavaScripti põhitõed.

Põhiline süntaks: sulud, lokkis sulud, operaatorid, reserveeritud sõnad, kommentaarid.
Põhilised ehitusplokid on muutujad ja funktsioonid.
Primitiivid ja keerulised andmetüübid.

Tööriistad.

Koodiredaktorid.
Linterid.
Arendusserver.

2. jaotis JavaScripti põhifunktsioonid
Alustame JavaScripti põhikonstruktsioonide, eriti funktsioonide uurimist. Vaatame muutujate deklareerimise nüansse. Tutvume arendaja tööriistadega.

Muutujad.

Nähtavusalad.

Tingimuslikud väited.

Kolmekordne operaator.
Mitme valikuga operaatori lüliti.

Tsüklid.

Cast.

Funktsioonid.

Noole funktsioonid.
Funktsiooni vaikeparameetrid.

puhkeparameetrid.

Muutujate ja funktsioonide tõstmine.

DevToolsi (arendaja tööriistad) tutvustus.

Jaotis 3 Objektid ja massiivid
Jaotis ilma otseülekandeta

Saate tuttavaks keerukate andmetüüpidega: massiivid ja objektid. Õppige neid looma ja haldama.

Keerulised andmetüübid.

Massiivid.

Põhilised massiivimeetodid.

Objektid.

Tagasihelistamised (tagasihelistamise funktsioonid).

Jaotis 4 Sisseehitatud objektid ja funktsioonid
Vaatame objekte ja funktsioone, mis JavaScripti keeles endas eksisteerivad. Puudutagem selle teostuse konteksti. Käivitame ja silume koodi arendaja tööriistade konsoolis.

Destruktureerimine.

levitada süntaksit.

Sisseehitatud objektid ja nende meetodid.

String.
Number.
Boolean.
Kuupäev.
matemaatika.

Operaator uus.

JavaScripti sisseehitatud funktsioonid.

Funktsiooni kontekst.

Märksõna on see.
Keskkonna kaotus.

DevTools. Konsooli kasutamine.

5. jagu Koodi korraldus
Vaatame ulatuste mõistet. Arutame DRY printsiipi (ärge korrake ennast) ja kuidas selle abil vähem koodi kirjutada ja ikkagi rohkem ära teha. Õppime, mis on moodulid ja kuidas nende koodi "murda"; Mis on sisenemispunkt?

Nähtavusalad.

Akna globaalne ulatus.
Sulgemised

Modulaarsus.

Koodi taaskasutus, DRY põhimõte.
Mooduli mõiste.
Sisenemispunkt.
ECMAScripti moodulid, impordi ja ekspordi süntaks.

DevTools: koodi silumine allikate abil.

6. jagu DOM ja sündmused
Jaotis ilma otseülekandeta

Saate tuttavaks dokumendiobjekti mudeliga. Dokumendiobjekti mudel või DOM). Mõelge, kuidas kirjeldada reaktsioone kasutaja toimingutele: tekstisisestus, teatud elementidel klõpsamine, kerimine jne.

DOM-puu.

dokument on kõige juur.
DOM-i puu struktuur.
Otsige lehelt elemente.
Elemendi atribuutide haldamine.

Mallid ja andmed.

Sündmused lehel.

Sündmuste korraldajad.

Jaotis 7 DOM-i manipuleerimine
Proovime DOM-i elemente luua, kustutada, teisaldada ja nendega manipuleerida. Mallide abil joonistame varem loodud andmed.

DOM-puude haldamine.

DOM-i elemendi atribuutide haldamine.
Elementide teisaldamine DOM-puus.

DOM-i elementide loomise lähenemisviisid.

DOM-objektide loomine.
Märgistushaldus: lisamine, prepend, insertAdjacentHTML, innerHTML, textContent.

Mallimine.

Stringi mallimine (malli stringid).
Spetsiaalne silt

8. jagu Sündmustega töötamine
Käsitleme kasutaja interaktsiooni nii, et leht reageeriks vormidesse sisestatud tekstile, teatud elementide klõpsamisele, kerimisele jne. Vaatame, kuidas see suhtlus kättesaadavaks teha.

Sündmused.

Sündmusobjekt, sündmuste haldamine: preventDefault ja stopPropagation.
Ürituse etapid ja delegeerimine.
Klaviatuurisündmused ja juurdepääsetavus.

Sündmustsükkel.

Vormi kinnitamine.

Pristine on vormide kinnitamise teek.

Valideerimine regulaaravaldiste abil.

DevTools: elementide (inspektori) võimalused DOM-i ja sündmustega töötamiseks.

Jaotis 9 Välised API-d ja kolmandate isikute teegid
Vaatame, kuidas mitte "oma jalgratast kirjutada", vaid taaskasutada kellegi teise kogemust ja koodi. Tutvume tarkvaraliidese kontseptsiooniga. Rakenduse programmeerimisliides või API), kaaluge kolmanda osapoole JavaScripti teekide API-d ja kaarditeenuste JavaScripti API-d. Vaatame lühidalt API-sid, mida brauser arendajatele pakub.

API kontseptsioon.

Kaarditeenused ja nende JavaScripti API.

OpenStreetMap.
Infoleht.

Kolmandate osapoolte raamatukogud.

Miks on raamatukogusid vaja?
Kuidas projektiga ühendust luua.
noUiSlider.

Brauseri API ülevaade.

Jaotis 10 Võrk
Jaotis ilma otseülekandeta

Vaatate HTTP-protokolli ja JSON-i andmevormingut iseseisvalt. Mõelge, kuidas muutub kasutaja suhtlus saidiga võrgu kasutamisel ja mis võib valesti minna.

HTTP-protokoll ja andmevormingud.

JSON.

Erandi käsitlemine.

proovi... püüa kinni.

Tööriistad võrgupäringutega töötamiseks.

Jaotis 11 Asünkroonsus. Võrgustiku loomine
Vaatame asünkroonsuse mõistet ja seda, kuidas seda lubaduste abil saavutada. lubadus, lubadus). Tutvume tehnoloogiatega, mis võimaldavad brauserist serverisse päringuid teha. Vaatame, kuidas võrguga töötamisel praktikas vigu käsitleda, kui midagi läheb valesti.

Asünkroonsus.

setTimeout ja setInterval.
Lubadus.

Võrguga töötamine.

hankige serveriga ühenduse võtmiseks.
Taotlustes esinevate vigade käsitlemine.

DevTools: võrgupäringutega töötamine võrgus.

Esimene kaitsenädal
Töö lõpetamine projektiga ja ettevalmistus lõpukaitsmiseks.

Jaotis 12 Tagasiside ja optimeerimine
Optimeerime tööd andmete ja sündmustega meie veebisaidil. Rakendame selget ja kasutajasõbralikku liidese tagasisidet.

Täiustatud töö massiividega.

Sorteerimine.
Filtreerimine.

Toimivuse optimeerimine.

Langetavad raamid - drossel.
Põrke kõrvaldamine – põrgatamine.

Faili API.

URL.createObjectURL().
FileReader.

Kaitse teine ​​nädal
Projekti esimene hindamine läbivaatava mentori poolt vastavalt kvaliteedikriteeriumidele.

Kolmas nädal kaitset
Projekti täiustamine läbivaatava mentori kommentaaride põhjal ja teiseks hindamiseks esitamine.

Jaotis 13 Lõplik
Teeme kursusest kokkuvõtte ja seejärel arutleme JavaScripti funktsioonide üle, millega võib tööl kokku puutuda. Pärandkoodi mõiste ja mida sellega teha, koodiga. Heidame kiire pilgu täiustatud esiotsa arendaja tööriistadele, et saaksite aru, kuhu edasi minna.

Spetsiaalne JavaScript.

Range režiim 'kasuta ranget'.
Valikulised semikoolonid.

Pärandkood.

jQuery.
vari ja funktsionaalne ulatus.
XMLHttpRequest.

Konstruktori funktsioonid.

Prototüübid.

Täiustatud tööriistad.

Veebipakk.

Transpilerid ja polüfillid.

Paabel.

Neljas nädal kaitset
Lõplike toimetuste tegemine ja lõpliku hinde saamine.