JavaScript grundlæggende. Del 2 JavaScript kursus fra begynder til avanceret

Dette er den anden del af JavaScript blogindlæg serien, der vil tage dig fra nybegynder til avanceret. Ved slutningen af denne serie vil du kende alle de grundlæggende ting, du har brug for at vide for at begynde at kode i JavaScript. Uden videre, lad os komme i gang med den anden tutorial.

JavaScript grundlæggende – indholdsfortegnelse:

1. JavaScript grundlæggende
2. Linje for linje udførelse
3. To måder at afslutte instruktioner på
4. Kommentarer

I dette blogindlæg vil vi fortsætte fra, hvor vi slap i det første blogindlæg. På dette tidspunkt bør du have din Google Chrome-browser åben og mere specifikt have din JavaScript-konsol åben. Hvis du af en eller anden grund har lukket dem, ville det være et godt tidspunkt at åbne dem igen. Lad os begynde at lære JavaScript grundlæggende.

Hvis du er på en Mac, er tastaturgenvejen til at åbne konsollen at trykke på “option + command + J”, efter du har åbnet Chrome. Hvis du bruger en Windows-enhed, kan du bruge tastaturgenvejen “Control + Shift + J” for at åbne JavaScript-konsollen, når du åbner Chrome. Eller du kan også gå til menuen øverst og gå til Vis -> Udvikler -> JavaScript-konsol.

JavaScript grundlæggende

JavaScript, ligesom alle andre programmeringssprog, er et sprog, du bruger til at kommunikere med computere. Ligesom et naturligt sprog har grammatik og kendte ord til at danne korrekte sætninger, har programmeringssprog også visse regler, du bør følge for effektivt at kommunikere med computeren.

For eksempel betyder visse ord bestemte ting for JavaScript-motoren, der kører vores kode, såsom “alert”-nøgleordet, vi brugte i den forrige tutorial, havde betydningen at vise en advarsel til brugeren med de specifikke ord, de satte inden for parenteserne lige efter. I vores tilfælde skrev vi “Hello, World!”, så vi fik en advarsel, der sagde “Hello, World!”.

Der er også andre reserverede nøgleord i JavaScript, som vi bør være opmærksomme på, så vi effektivt kan kommunikere med computeren ved at bruge de rigtige ord og grammatik. Ligesom der er grammatik i naturligt sprog, er der også en grammatik i programmeringssprog. Den grammatik kaldes almindeligvis “syntaks” i programmeringssprog, og JavaScript er ingen undtagelse. Derfor er det en god idé at forstå de vigtigste nøgleord og den grammatik, vi har i JavaScript, når vi begynder at lære om JavaScript grundlæggende. Lad os se nogle af de vigtigste ting, vi bør vide om JavaScript.

Linje for linje udførelse

Når det kommer til JavaScript grundlæggende, er en af de første ting, du bør vide, at den kode, du skriver, vil blive udført linje for linje, fra top til bund. Denne stil af kodeudførelse kaldes også, at JavaScript er et “fortolket programmeringssprog”.

Modsat er nogle programmeringssprog “kompilerede programmeringssprog”. Nogle eksempler på kompilerede sprog ville være: C, C++, C#, Swift, Java og så videre. Den største forskel er, at med kompilerede programmeringssprog vil al den kode, du skriver, blive “kompileret” og vil blive udført i ét stykke af computeren. Det er også derfor, det kan være sværere at begynde at lære et kompileret programmeringssprog, da det kan være sværere at finde ud af, hvor du har lavet en fejl i dit program.

Nogle eksempler på fortolkede programmeringssprog ville være JavaScript, Python, Bash og Matlab. Med fortolkede programmeringssprog har du den iboende fordel ved at se, hvilken linje du lavede fejlen på, for eksempel at glemme et semikolon eller ikke matche parenteser i din kode. At have denne egenskab gør måske ikke en stor forskel i visse applikationer, men når vi prøver at indlæse en hjemmeside med en langsom internetforbindelse, foretrækker du at få hver eneste linje af JavaScript udført så hurtigt som muligt.

To måder at afslutte instruktioner på

Et computerprogram er i sidste ende en bunke instruktioner til computeren. Men hvor slutter et program, og hvor begynder den næste instruktion? Der er forskellige tilgange til dette problem. JavaScript bruger to hovedting, semikolon og parenteser.

Afhængigt af typen af instruktion, vi skriver, vil vi generelt bruge enten den ene til at afslutte eller pakke et sæt instruktioner. Vi vil bruge forskellige typer parenteser til forskellige funktionaliteter og datatyper. For eksempel, i alert(“Hello, World”); koden, som vi tidligere udførte, fortæller parenteserne, der omgiver hello world-skrivningen, computeren, hvad advarslen skal sige, og semikolonet i slutningen af instruktionen fortæller computeren, at denne instruktion slutter her, du kan gå videre til den næste instruktion. Dette er meget ligesom hvordan vi bruger et punktum “.” til at afslutte sætninger på engelsk.

Kommentarer

At tilføje kommentarer til koden er en væsentlig del af programmering. Det kan være let at forstå, hvad kode du skriver, mens du skriver det, men afhængigt af kompleksiteten af koden kan du have meget lidt idé seks måneder senere, når du vender tilbage til koden.

At tilføje kommentarer gør ikke kun det meget lettere at forstå din kode for dit fremtidige jeg, men det gør det også meget lettere for alle, du arbejder med, at forstå koden. Det kan også hjælpe dig med bedre at udvikle din forståelse af det problem, du arbejder med, da det normalt er meget lettere at løse problemer ved at opdele dem i mindre bidder. De kommenterede dele af din kode vil blive ignoreret af fortolkeren og vil ikke blive udført.

Der er to måder, du kan tilføje kommentarer i JavaScript. Den første er at tilføje en simpel “enkelt linje” kommentar med to skråstreger som dette:

// dette er en kommentar

På denne måde vil alt, hvad du skriver efter de to skråstreger, blive ignoreret på den specifikke linje, hvor du satte skråstregerne. Du kan gentage dette så mange gange som nødvendigt for at have flere linjer dækket med kommentarer som dette:

// dette er en kommentar.
// dette er en anden kommentar.
// du kan fortsætte med at kommentere på denne måde.

En anden grund til, at vi bruger kommentarer, er at kommentere en del af koden for at eksperimentere med koden. For eksempel kan du skrive den samme funktionalitet på flere måder, og du kan ønske at kommentere en version af den samme kode for at sammenligne deres individuelle ydeevne eller resultater. Lad os se det med et eksempel også.

Gå videre og kopier og indsæt følgende kode i din JavaScript-konsol, som du åbnede i Chrome.

// hils bruger
alert("Hello, User!");
alert("Hi, User!");

Hvis du ønsker ekstra øvelse med at skrive hele koden selv, kan du også gøre det. En ting, du skal vide om at skrive flere linjer kode i konsollen, er, at for at komme til den næste linje uden at udføre den, kan du trykke på “shift + enter” for at gøre det. Ellers, efter at have skrevet en enkelt linje kode, hvis du bare trykker enter, vil det køre den linje kode. I dette eksempel er det ikke et stort problem, og det er faktisk fint at udføre det linje for linje også, fordi vi har et simpelt eksempel, der også kan fungere i den stil.

Efter enten at have kopieret og indsat det eller skrevet koden selv, gå videre og tryk “enter” for at køre koden. Resultatet skal give dig to separate advarsler. Også for at afvise advarslerne kan du klikke “OK”, i dette tilfælde vil de ikke gøre noget, fordi dette er en simpel advarsel, og den udløser ikke noget efter at have vist den besked, vi ønsker at vise.

Når vi udførte koden på denne måde, udfører vi den samme funktionalitet to gange. Men hvad skal du gøre, hvis du kun vil se én implementering ad gangen? Nå, du ved præcis, hvad du skal gøre i dette tilfælde, fordi vi allerede har talt om det. Gå videre og kommenter en af linjerne efter at have indsat eller skrevet koden, så kun den anden implementering af “Hi, User!” bliver udført.

Når du har gennemført udfordringen, eller hvis du sidder fast under udfordringen, kan du se løsningskoden til udfordringen nedenfor. Før du kigger på løsningen, anbefaler jeg altid stærkt at prøve det selv, da du lærer bedst, når du virkelig øver det. Hvis du har gennemført udfordringen med succes, bør du se en skærm som denne:

Bemærk, at når du kommenterer en linje kode, bliver den den samme farve som den tidligere kommenterede linje. Denne farveforskel gør faktisk ikke en forskel for computeren, men det er en ret nyttig funktion for os, når vi skriver kode. På denne måde er det meget lettere, hvis du ved en fejltagelse kommenterer en linje kode, da farverne vil gøre det åbenlyst.

En anden måde at kommentere kode på er ved at bruge skråstregen og stjerne-tegnet. På denne måde kan vi oprette enkeltlinje- eller multilinjekommentarer i vores kode.

/* en enkelt linje kommentar *//* kommenteringen starter, når vi sætter en skråstreg og en stjerne
og de kommenterede områder slutter
når vi afslutter kommentaren med en stjerne og skråstreg
som dette */

Nu kender du JavaScript grundlæggende. I den næste tutorial vil vi se et ekstremt almindeligt koncept i programmering kaldet “variabler” sammen med grundlæggende datatyper i JavaScript.