JavaScript online kurs. Faglig utvikling av webgrensesnitt - gratis kurs fra HTML Academy, opplæring 9 uker, dato 15. oktober 2023.

Del 1 Introduksjon til JavaScript
La oss se på hvordan kurset fungerer, hvilke verktøy du trenger, og hvordan du setter dem opp. La oss se på hva JavaScript-språket er, inkludert ECMAScript-spesifikasjonen og nettleseren.

Hvordan fungerer kurset? Organisatoriske forhold.

Arbeidsplan på kurset.
Gjennomgang av prosjekter.
Kvalitetskriterier.

JavaScript-språk

ECMAScript-spesifikasjon.
Hva gir nettleseren JavaScript?

Grunnleggende om JavaScript.

Grunnleggende syntaks: parenteser, krøllete klammeparenteser, operatorer, reserverte ord, kommentarer.
De grunnleggende byggesteinene er variabler og funksjoner.
Primitiver og komplekse datatyper.

Verktøy.

Koderedaktører.
Linters.
Utviklingsserver.

Del 2 Grunnleggende JavaScript-funksjoner
La oss begynne å studere de grunnleggende konstruksjonene av JavaScript, spesielt funksjoner. La oss se på nyansene ved å deklarere variabler. La oss bli kjent med utviklerverktøyene.

Variabler.

Synlighetsområder.

Betingede uttalelser.

Ternær operatør.
Flervalgsoperatørbryter.

Sykluser.

Cast.

Funksjoner.

Pilfunksjoner.
Standard funksjonsparametere.

hvile-parametere.

Heising av variabler og funksjoner.

Introduksjon til DevTools (utviklerverktøy).

Del 3 Objekter og matriser
Seksjon uten live

Du vil bli kjent med komplekse datatyper: matriser og objekter. Lær å lage og administrere dem.

Komplekse datatyper.

Matriser.

Grunnleggende array-metoder.

Objekter.

Tilbakeringing (tilbakeringingsfunksjoner).

Seksjon 4 Innebygde objekter og funksjoner
La oss se på objektene og funksjonene som finnes i selve JavaScript-språket. La oss berøre utførelseskonteksten til dette. La oss kjøre og feilsøke koden i konsollen for utviklerverktøy.

Destrukturering.

spredt syntaks.

Innebygde objekter og deres metoder.

String.
Antall.
boolsk.
Dato.
Matte.

Operatør ny.

JavaScript innebygde funksjoner.

Funksjonskontekst.

Nøkkelordet er dette.
Tap av miljø.

DevTools. Bruke konsollen.

Seksjon 5 Kodeorganisasjon
La oss se på konseptet med omfang. La oss diskutere DRY-prinsippet (ikke gjenta deg selv) og hvordan du bruker det til å skrive mindre kode og fortsatt få gjort mer. La oss lære hva moduler er og hvordan du "bryter" kode på dem; Hva er et inngangspunkt?

Synlighetsområder.

Globalt omfang av vinduet.
Nedleggelser

Modularitet.

Kode gjenbruk, DRY-prinsippet.
Konseptet med en modul.
Inngangspunkt.
ECMAScript-moduler, import og eksport syntaks.

DevTools: feilsøkingskode ved hjelp av kilder.

Seksjon 6 DOM og hendelser
Seksjon uten live

Du vil bli kjent med dokumentobjektmodellen. Document Object Model eller DOM). Vurder hvordan du beskriver reaksjoner på brukerhandlinger: tekstinntasting, klikk på enkelte elementer, rulling osv.

DOM-tre.

dokumentet er roten til alt.
DOM trestruktur.
Søk etter elementer på en side.
Administrere elementattributter.

Maler og data.

Arrangementer på siden.

Hendelsesbehandlere.

Seksjon 7 DOM-manipulasjon
La oss prøve å lage, slette, flytte og manipulere DOM-elementer. Ved hjelp av maler vil vi tegne dataene som er opprettet tidligere.

DOM-treadministrasjon.

Administrere DOM-elementattributter.
Flytte elementer i DOM-treet.

Tilnærminger til å lage DOM-elementer.

Opprette DOM-objekter.
Markup management: append, prepend, insertAdjacentHTML, innerHTML, textContent.

Mal.

Strengmaling (malstrenger).
Spesiell merkelapp

Del 8 Arbeide med hendelser
Vi vil håndtere brukerinteraksjon slik at siden reagerer på tekstinntasting i skjemaer, klikk på enkelte elementer, rulling osv. La oss se på hvordan du gjør denne interaksjonen tilgjengelig.

Arrangementer.

Hendelsesobjekt, hendelseshåndtering: preventDefault og stopPropagation.
Arrangementsfaser og delegering.
Tastaturhendelser og tilgjengelighet.

Event Loop.

Skjemavalidering.

Pristine er et skjemavalideringsbibliotek.

Validering ved hjelp av regulære uttrykk.

DevTools: Elements (inspektør) evner for å jobbe med DOM og hendelser.

Del 9 Eksterne APIer og tredjepartsbiblioteker
La oss se på hvordan du ikke kan "skrive din egen sykkel", men å gjenbruke andres erfaring og kode. La oss bli kjent med konseptet med et programvaregrensesnitt. Application Programming Interface eller API), vurdere API-en til tredjeparts JavaScript-biblioteker og JavaScript API for karttjenester. La oss ta en rask titt på API-ene som nettleseren gir utviklere.

Konseptet med API.

Karttjenester og deres JavaScript API.

OpenStreetMap.
Brosjyre.

Tredjeparts biblioteker.

Hvorfor trengs biblioteker?
Hvordan koble til et prosjekt.
noUiSlider.

Oversikt over nettleser-API.

Seksjon 10 Nettverk
Seksjon uten live

Du vil se på HTTP-protokollen og JSON-dataformatet på egen hånd. Vurder hvordan brukerens interaksjon med nettstedet endres ved bruk av nettverket, og hva som kan gå galt.

HTTP-protokoll og dataformater.

JSON.

Avvikshåndtering.

prøv... fange.

Verktøy for å jobbe med nettverksforespørsler.

Seksjon 11 Asynkroni. Nettverk
La oss se på konseptet asynkroni og hvordan du oppnår det ved å bruke løfter. Lover, lover). La oss bli kjent med teknologier som lar deg sende forespørsler til serveren fra en nettleser. La oss se på hvordan man håndterer feil i praksis når man jobber med nettverket hvis noe går galt.

Asynkroni.

setTimeout og setInterval.
Love.

Jobber med nettverket.

hent for å kontakte serveren.
Håndtering av feil i forespørsler.

DevTools: arbeider med nettverksforespørsler i nettverket.

Første uke med forsvar
Gjennomføring av arbeidet med prosjektet og forberedelse til sluttforsvar.

Seksjon 12 Tilbakemelding og optimalisering
Vi optimerer arbeidet med data og hendelser på nettsiden vår. Vi implementerer tydelige og brukervennlige tilbakemeldinger på grensesnittet.

Avansert arbeid med arrays.

Sortering.
Filtrering.

Ytelsesoptimaliseringer.

Slippe rammer - struping.
Eliminering av sprett - debounce.

Fil API.

URL.createObjectURL().
FileReader.

Andre uke med forsvar
Den første vurderingen av prosjektet av vurderende mentor i henhold til kvalitetskriterier.

Tredje uke med forsvar
Forbedre prosjektet basert på kommentarene fra den vurderende mentoren og sende det inn for en ny vurdering.

Seksjon 13 Final
La oss oppsummere kurset, og deretter diskutere funksjonene til JavaScript som du kanskje må møte på jobben. Konseptet med legacy kode og hva du skal gjøre med det, med koden. La oss ta en rask titt på de avanserte front-end-utviklerverktøyene slik at du kan forstå hvor du skal gå videre.

Spesiell JavaScript.

Streng modus 'bruk streng'.
Valgfrie semikolon.

Eldre kode.

jQuery.
var og funksjonelt omfang.
XMLHttpRequest.

Konstruktørfunksjoner.

Prototyper.

Avanserte verktøy.

Webpack.

Transpilatorer og polyfills.

Babel.

Fjerde uke med forsvar
Gjøre siste redigeringer og motta en endelig karakter.