Robert Whitney
Detta är den andra delen av blogginläggsserien om JavaScript som tar dig från nybörjare till avancerad. I slutet av denna serie kommer du att känna till alla grunder du behöver veta för att börja koda i JavaScript. Utan vidare ado, låt oss börja med den andra handledningen.
JavaScript grunder – innehållsförteckning:
I detta blogginlägg kommer vi att fortsätta där vi slutade från det första blogginlägget. Vid detta stadium bör du ha din Google Chrome-webbläsare öppen och mer specifikt ha din JavaScript-konsol öppen. Om du av någon anledning stängde dem, skulle det vara en bra tid att öppna dem igen. Låt oss börja lära oss JavaScript-grunder.
Om du är på en Mac är tangentbordsgenvägen för att öppna konsolen att trycka på “option + command + J”, efter att du har öppnat Chrome. Om du använder en Windows-enhet kan du använda tangentbordsgenvägen “Control + Shift + J” för att öppna JavaScript-konsolen, när du har öppnat Chrome. Eller så kan du också gå till menyn högst upp och gå till Visa -> Utvecklare -> JavaScript-konsol.
JavaScript grunder
JavaScript, precis som alla andra programmeringsspråk, är ett språk du använder för att kommunicera med datorer. Precis som ett naturligt språk har grammatik och kända ord för att bilda korrekta meningar, har programmeringsspråk också vissa regler som du bör följa för att effektivt kommunicera med datorn.
Till exempel betyder vissa ord vissa saker för JavaScript-motorn som kör vår kod, såsom “alert”-nyckelordet vi använde i den föregående handledningen hade betydelsen att visa en varning för användaren med de specifika orden som de satte in i parenteserna direkt efter. I vårt fall skrev vi “Hello, World!” så vi fick en varning som sa “Hello, World!”.
Det finns också andra reserverade nyckelord i JavaScript som vi bör vara medvetna om så att vi kan kommunicera effektivt med datorn med rätt ord och grammatik. Precis som grammatik vi har i naturligt språk, finns det också en grammatik i programmeringsspråk. Den grammatik kallas vanligtvis “syntax” i programmeringsspråk och JavaScript är inget undantag. Därför är det en bra idé att förstå de viktigaste nyckelorden och grammatiken vi har i JavaScript när vi börjar lära oss om JavaScript-grunder. Låt oss se några av de viktigaste sakerna vi bör veta om JavaScript.
Rad för rad exekvering
När det kommer till JavaScript-grunder, är en av de första sakerna du bör veta att koden du skriver kommer att exekveras rad för rad, från topp till botten. Denna stil av kodexekvering kallas också för att JavaScript är ett “tolkat programmeringsspråk”.
Tvärtom är vissa programmeringsspråk “kompilerade programmeringsspråk”. Några exempel på kompilerade språk skulle vara: C, C++, C#, Swift, Java och så vidare. Huvudskillnaden är att med kompilerade programmeringsspråk kommer all kod du skriver att “kompileras” och kommer att exekveras i ett stycke av datorn. Det är också därför det kan vara svårare att börja lära sig ett kompilerat programmeringsspråk eftersom det kan vara svårare att upptäcka var du gjorde ett fel i ditt program.
Några exempel på tolkade programmeringsspråk skulle vara JavaScript, Python, Bash och Matlab. Med tolkade programmeringsspråk har du den inneboende fördelen att se vilken rad du gjorde felet, till exempel att glömma ett semikolon eller att inte matcha parenteser i din kod. Att ha denna egenskap kanske inte gör en stor skillnad i vissa applikationer, men när vi försöker ladda en webbplats med en långsam internetanslutning, föredrar du att varje enskild rad av JavaScript exekveras så snabbt som möjligt.
Två sätt att avsluta instruktioner
En datorprogram är i slutändan en uppsättning instruktioner till datorn. Men var slutar ett program och var börjar nästa instruktion? Det finns olika tillvägagångssätt för detta problem. JavaScript använder två huvudsakliga saker, semikolon och parenteser.
Beroende på vilken typ av instruktion vi skriver, kommer vi generellt att använda antingen en för att avsluta eller paketera en uppsättning instruktioner. Vi kommer att använda olika typer av parenteser för olika funktionaliteter och datatyper. Till exempel, i alert(“Hello, World”); koden som vi tidigare exekverade, berättar parenteserna som omger hello world-skrivningen för datorn vad varningen ska säga, och semikolonet i slutet av instruktionen berättar för datorn att denna instruktion slutar här, du kan gå vidare till nästa instruktion. Detta är mycket likt hur vi använder en punkt “.” för att avsluta meningar på engelska.
Kommentarer
Att lägga till kommentarer i koden är en väsentlig del av programmering. Det kan vara lätt att förstå vilken kod du skriver medan du skriver den, men beroende på kodens komplexitet kan du ha mycket lite aning sex månader senare, när du återvänder till koden.
Att lägga till kommentarer gör det inte bara mycket lättare att förstå din kod för framtiden, utan det gör det också mycket lättare för alla som du arbetar med att förstå koden också. Det kan också hjälpa dig att bättre utveckla din förståelse för problemet du arbetar med, eftersom det vanligtvis är mycket lättare att lösa problem genom att dela upp dem i mindre bitar. De kommenterade delarna av din kod kommer att ignoreras av tolken och kommer inte att exekveras.
Det finns två sätt att lägga till kommentarer i JavaScript. Det första är att lägga till en enkel “enradig” kommentar med två snedstreck så här:
// detta är en kommentar
På detta sätt kommer vad du än skriver efter de två snedstrecken att ignoreras på den specifika raden där du satte snedstrecken. Du kan upprepa detta så många gånger som du vill för att ha flera rader täckta med kommentarer så här:
// detta är en kommentar. // detta är en annan kommentar. // du kan fortsätta kommentera så här.
En annan anledning till att vi använder kommentarer är att kommentera ut en del av koden för att experimentera med koden. Till exempel kan du skriva samma funktionalitet på flera sätt och du kanske vill kommentera en version av samma kod för att jämföra deras individuella prestanda eller resultat. Låt oss se det med ett exempel också.
Gå vidare och kopiera och klistra in följande kod i din JavaScript-konsol som du öppnade i Chrome.
// hälsa användaren alert("Hello, User!"); alert("Hi, User!");
Om du vill ha extra övning genom att skriva hela koden själv kan du göra det också. En sak du bör veta om att skriva flera rader kod i konsolen är att för att komma till nästa rad utan att exekvera den kan du trycka på “shift + enter” för att göra det. Annars, efter att ha skrivit en enda rad kod, om du bara trycker på enter, kommer den att köra den raden kod. I detta exempel är detta inte ett stort problem och det är faktiskt okej att exekvera det rad för rad också, eftersom vi har ett enkelt exempel som också kan fungera i den stilen.
Efter att ha kopierat och klistrat in det eller skrivit koden själv, gå vidare och tryck på “enter” för att köra koden. Resultatet bör ge dig två separata varningar. För att stänga av varningarna kan du också klicka på “OK”, i det här fallet kommer de inte att göra något eftersom detta är en enkel varning och den utlöser inget efter att ha visat meddelandet vi vill visa.
När vi exekverade koden på detta sätt, exekverar vi samma funktionalitet två gånger. Men vad ska du göra om du vill se endast en implementation åt gången? Tja, du vet exakt vad du ska göra i det här fallet eftersom vi redan har pratat om det. Gå vidare och kommentera ut en av raderna efter att ha klistrat in eller skrivit ut koden så att endast den andra implementationen av “Hi, User!” exekveras.
När du har slutfört utmaningen, eller om du fastnar under utmaningen kan du se lösningskoden till utmaningen nedan. Innan du tittar på lösningen rekommenderar jag alltid starkt att du försöker själv eftersom du lär dig bäst när du verkligen övar. Om du framgångsrikt har slutfört utmaningen bör du titta på en skärm som denna:
Observera att när du kommenterar ut en rad kod blir den samma färg som den tidigare kommenterade raden. Denna färgskillnad gör faktiskt ingen skillnad för datorn, men det är en ganska hjälpsam funktion för oss när vi skriver kod. På detta sätt är det mycket lättare om du av misstag kommenterar ut en rad kod eftersom färgerna gör det uppenbart.
En annan metod för att kommentera kod är att använda snedstrecket och asterisktecknet. På detta sätt kan vi skapa enradiga eller flerradiga kommentarer i vår kod.
/* en enradig kommentar */ /* kommenteringen börjar när vi sätter ett snedstreck och en asterisk och de kommenterade områdena slutar när vi stänger kommentaren med en asterisk och snedstreck så här */
Nu känner du till JavaScript-grunderna. I nästa handledning kommer vi att se ett extremt vanligt koncept inom programmering som kallas “variabler” tillsammans med grundläggande datatyper i JavaScript.
Robert Whitney
JavaScript-expert och instruktör som coachar IT-avdelningar. Hans huvudmål är att höja teamets produktivitet genom att lära andra hur man effektivt samarbetar medan man kodar.
