Uddrag og kontrolstrukturer. Del 4 JavaScript-kursus fra begynder til avanceret i 10 blogindlæg

Dette er del 4 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 fjerde tutorial.

Snippets og kontrolstrukturer – indholdsfortegnelse:

1. Opgradering af vores kodningsopsætning til snippets
2. Kontrolstrukturer

I dette blogindlæg vil vi fortsætte fra, hvor vi slap i det tredje 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.

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 har åbnet Chrome. Eller du kan også gå til menuen øverst og gå til Vis -> Udvikler -> JavaScript-konsol.

Opgradering af vores kodningsopsætning til snippets

Indtil dette punkt i kurset kunne vi have skrevet alt linje for linje og udført det linje for linje. Det ville ikke være den mest bekvemme måde at køre tingene på, men det ville fungere alligevel. Fra denne tutorial vil vi skrive kode, der kræver flere linjer kode for at skabe et komplet sæt instruktioner. For at opnå dette vil vi bruge noget, der kaldes “snippets” i Google Chrome. Uden videre, lad os opgradere vores opsætning fra JavaScript-konsol til Chrome-snippets.

Du bør i øjeblikket have din konsol åben, og hvis du har fulgt de tidligere tutorials, bør du have en skærm, der ser sådan ud:

Når du ser på denne skærm, eller din skærm for den sags skyld, bør du se: Elementer, Konsol, Kilder, Netværk, Ydeevne, Hukommelse, Applikation osv. skrevet ved siden af hinanden i den øverste bjælke i det mørke område. Hvis du ser dem i lysere farver, er det helt fint også. Det betyder, at du bruger lys tilstand, som kan være standardtilstand for dagtimerne. Den skærm, jeg viser, bruger i øjeblikket farveskemaet for mørk tilstand i Chrome-konsolindstillingerne. Hvis du ser Elementer, Konsol, Kilder, Netværk osv. dukke op, i enten farveskema, er du klar til at gå.

Hvis du ser nærmere på den øverste bjælke i konsollen, kan du se, at teksten “Konsol” ser lidt anderledes ud i farven. Gå videre og klik på “Kilder” lige ved siden af den.

Når du klikker på kilder, bør du se en skærm, der på en eller anden måde ser sådan ud.

En forskel, du måske forventer, er, at du sandsynligvis ikke vil se “notes.js” filen, da jeg har oprettet den tidligere. Udover det bør det se ret lignende ud. For at oprette en ny fil skal du klikke på “+ Ny snippet”. Når du klikker på det, opretter det en ny JavaScript-fil til dig, og du kan navngive den, som du vil. I denne tutorial vil vi navngive den “index.js”, da det er en almindelig praksis at navngive den første eller primære fil som “index.js”.

Hvis du vil følge denne tutorial ord for ord, kan du efter at have klikket på “+ Ny Snippet” indtaste navnet “index.js” og trykke på enter-tasten på dit tastatur. Nu kan vi klikke inde i den åbnede fil i det store område, der åbnede sig, for at begynde at kode i JavaScript.

Lad os starte med noget, vi allerede ved, der virker. Og det er:

Du kan enten skrive det selv for ekstra øvelse eller kopiere og indsætte kodeafsnittet til den fil, vi har oprettet. Jeg anbefaler stærkt at skrive det selv, da dette er, hvordan du lærer det i mange tilfælde. Når du har skrevet det, hvis du trykker på enter-tasten, vil du se, at koden ikke udføres. I stedet vil din markør bare gå til næste linje, som med ethvert andet tekstredigeringsområde. Der er to hovedmåder, vi kan udføre vores kode på. Den første er at klikke på play-knappen, der er placeret i nederste højre hjørne.

Hvis du klikker på den play-knap, bør den udføre vores kode og vise os resultaterne.

Når du klikker på “OK”, lad os også køre vores kode ved hjælp af den anden hovedmetode. Den anden hovedmetode til at køre din kode, eller køre dit snippet, er at bruge tastaturgenvejen. Som vi kan se, viser den allerede genvejen, når vi klikker på kør-knappen. Den tastaturgenvej er “Command + Enter”. For at gøre det kan vi trykke på Command-tasten og derefter trykke på Enter-tasten. At gøre det vil også køre vores kode og give os de samme resultater som at klikke på play-knappen.

Og med det, ved du nu de to måder at udføre vores JavaScript-kode i Chrome-snippets.

Hvis du vil oprette nye filer for måske at tage noter om JavaScript, eller for at øve noget JavaScript-kode, kan du altid oprette nye filer ved at klikke på “+ Ny snippet” og navngive dine filer, som du vil. Nu hvor vi har vores nye kodningsopsætning klar, lad os se noget mere JavaScript.

Kontrolstrukturer

Når vi skriver kode, skal vi tage højde for mange scenarier og handlinger, som brugeren kan tage. Denne forberedelse til forskellige scenarier kan komme fra forskellige kilder, såsom den enhed, vores kode kører på, skærmstørrelse, der skal vises, forskellige typer browsere, som brugeren måtte have osv. Men hvordan sikrer vi, at vi kan være forberedt på forskellige scenarier? Hvis du skriver forskellige koder en efter en, ville det give mening at udføre dem alle for brugeren? For at besvare alt dette og mere, vil vi bruge kontrolstrukturer.

Kontrolstrukturer giver os mulighed for at styre udførelsen af koden, så vores kode kan tilpasse sig forskellige betingelser. Der er flere almindelige elementer, der bruges til kontrolstrukturer. I denne tutorial vil vi starte med den simpleste og bevæge os derfra. Den første, vi vil se, bruger If, else, else if udsagn til at styre udførelsen af koden.

If, else og else if

Dette er den simpleste kontrolstruktur at komme i gang med. Hvad det giver os mulighed for at gøre, er at udføre et stykke kode, hvis en bestemt betingelse er sand, og udføre et andet stykke kode, hvis en anden betingelse er sand. Lad os se det med et eksempel. Lad os antage, at hvis det regner udenfor, vil jeg tage min paraply med mig. Ellers vil jeg ikke tage en paraply. Vi kan oversætte den præcise logik og ræsonnering til kode som følger:

(Før vi skriver denne kode, vil vi kommentere koden fra den tidligere kode, vi har i filen ved at placere to skråstreger foran den, så den ikke bliver udført, men du stadig har en kopi af den. Efter at have tilføjet skråstregene, bør det se sådan ud:)

At køre denne kode ville give os følgende output:

Mens kørsel af denne version af koden, der siger, at der ikke er regn, ville give følgende output:

Når du skriver koden for at foretage ændringer i kodefilen, hvis du ser nærmere på filnavnet, vil du se, at det vil have en stjerne før filnavnet. Dette betyder, at kodefilen, vi skriver, ikke er helt gemt. Dette gør måske ikke en stor forskel, hvis du kun skriver et par linjer kode, som du altid kan skrive, men oftere end ikke vil du gerne gemme din kode, så du kan genbruge eller gennemgå den senere. Vi kan gemme denne kodefil på samme måde, som vi gemmer andre filer, så det ville være “Command + S” på Mac og “Control + S” på Windows.

I vores tilfælde, fordi vi udfører vores kode lige efter at have skrevet den, gemte den automatisk vores fil, når vi udførte koden. Så hvis du skal skrive noget kode og lade det stå i timer, er det en god idé at gemme din kode ind imellem for at sikre, at du ikke mister nogen betydelig fremgang.

Det er fantastisk, at vi kan få vores kode til at tilpasse sig en binær betingelse ved hjælp af en If og en else-udsagn, men hvad hvis vi har flere ting at overveje, hvilket sandsynligvis vil være tilfældet i det virkelige liv. For eksempel, hvad hvis det er koldt, og du har brug for at tage en hoodie med, når det er koldt. En måde, vi kunne gøre det på, ville være en “else if”-udsagn, og vi kan gøre det som følger:

Nu undrer du dig måske over, hvordan jeg kan løse dette? Hvilken er vigtigere, at vejret er koldt, eller at det regner? Skal du vælge en betingelse og ofre den anden betingelse? Skal du overhovedet træffe en sådan beslutning? Nå, ikke rigtig. Dette er et meget almindeligt problem, og det har en meget almindelig og relativt simpel løsning. Vi kan bruge et “og”-udtryk til at dække flere scenarier. For at fortælle JavaScript, at vi vil bruge et “og” til at forbinde vores programmeringslogik, vil vi bruge to af dette symbol: “&”. Og fordi vores kode tjekkes fra top til bund, vil vi bruge den mest omfattende mulighed til den første if-erklæring. Den opdaterede kode ser så sådan ud.

At køre denne kode ville give dig en advarsel, der ser sådan ud:

Meget bedre. Nu kan vi kombinere flere forskellige scenarier, herunder forskellige kombinationer af disse scenarier. Men hvad hvis vi vil overveje et scenarie, der ikke er koldt, men regnfuldt. Og antag, at vi vil fortælle brugeren ikke at tage en hoodie specifikt, og kun tage en paraply. For at gøre netop det kan vi bruge den logiske “ikke”, vi kan bruge den i vores kode med udråbstegnet før den betingelse, vi vil specificere. Lad os tilføje den betingelse til vores kode, så den er mere komplet.

Når vi tilføjer en ny betingelse til et if else-træ, så længe det er den mere omfattende betingelse, kan vi placere den et sted øverst. På denne måde har vi meget mindre chance for fejl sammenlignet med den modsatte tilgang. En bivirkning ved at injicere ny kode i eksisterende kode er, at noget af koden kan blive overflødig eller måske ikke fungerer på den mest effektive måde. Vi vil ikke fokusere meget på effektivitet, men for nu kan vi se, at vi dækker både de kolde og ikke kolde betingelser for et regnfuldt vejr, så vi kan valgfrit fjerne betingelsen, der blot tjekker for “regnfuld” betingelse. At foretage disse kodejusteringer kaldes også “Code Refactoring”, i refaktoreringsprocessen er pointen at gøre koden gradvist mere ren og effektiv.

Når vi vil tjekke for, at en hvilken som helst betingelse er sand, kan vi bruge “eller”-operatoren, som er pipe-symbolet, der bruges to gange på dit tastatur og ser sådan ud “||”.

Lad os se et eksempel på det med et andet eksempel. For at tilføje flere eksempler til den samme fil uden at forstyrre de nye kommandoer, kan vi kommentere den tidligere kode, vi brugte, ved at pakke den tidligere kode ind i disse symboler, som vi har set før:

Som er en skråstreg og et asterisk og de samme symboler i den modsatte rækkefølge for at lukke den kommenterede del. Lad os pakke vores nuværende kode ind i disse symboler, så de ikke forstyrrer den nye kode, der skal komme. Nu bør din kodefil se sådan ud:

Fra nu af vil vi fokusere på de nye dele, vi tilføjer til filen, så vi kan fokusere på at lære én ting ad gangen. Du kan valgfrit beholde den tidligere kode i kommentarmode, flytte dem til en ny fil til dine referencer, eller hvis du ikke vil se det længere, kan du slette det for en renere fil.

Lad os fortsætte med vores eksempel til et “eller”-tilfælde. Overvej et scenarie, hvor du besøger dit køleskab for mad og drikke hver gang du føler dig sulten eller tørstig. Hvordan ville koden fungere for det?

At udføre denne kode, som du også sandsynligvis har gættet, ville give os følgende resultat:

Indtil nu kom de eksempler, vi brugte, fra næsten virkelige livsscenarier, men ofte vil du arbejde med tal i koden. Du har set tal tidligere i denne serie, men vi har ikke talt meget om sammenligningen eller de operationer, vi kunne udføre med dem. Nu hvor vi har lært om if else-udsagn, lad os se lidt mere om tal.

Når vi arbejder med if- og else if-udsagn, tjekker vi for sandhed af en erklæring. Men kan vi også lave en meningsfuld if-erklæring, hvis alt, hvad vi har, er tal? For eksempel, hvad hvis jeg vil have en paraply, hvis der er mere end 50% chance for regn, kan vi opnå det med kode? Ja, det kan vi, og her er hvordan det ville gå.

Når vi arbejder med tal, har vi brug for en måde at konvertere det til en form for sandhed eller falskhed, så if-erklæringen kan fungere. Der er flere måder, vi kan opnå det på, afhængigt af vores brugssag.

For eksempel kan vi tjekke, om to tal er præcist ens med tre lighedstegn som dette:

Dette ville give os advarslen, der siger “De er de samme.”.

Vi kan også tjekke for ikke at være ens med følgende kode:

At køre koden ovenfor vil give os advarslen, der siger “De er ikke det samme!”.

Vi kan også tjekke, hvilken der specifikt er større, større lig med, mindre eller mindre lig med. Du kan finde et resumé af tegnene for din bekvemmelighed.

Lad os også se et par flere af dem for ekstra øvelse og kodeeksponering. Her er et par eksempel koder, der alle vil vise den advarsel, de har inde i if-udsagnene:

Større end:

Større end eller lig med:

Et andet eksempel på større end eller lig med:

De første fire vil fungere, som du forventer:

Modulo-operationen vil give os resten efter at have divideret det første tal med det andet tal. Hvis vi fortsætter med den tidligere a, b og c kode:

Eksponentoperatoren udfører eksponentiering i JavaScript. Den repræsenteres med to stjernesymboler og tager det første element til anden elementets potens.

Dette var en relativt lang tutorial, og du klarede det! Vi har opgraderet vores kodningsopsætning og lært en hel del i denne tutorial. I den næste tutorial vil vi fortsætte med flere måder at kontrollere strømmen af vores kode!