Variabler (30 min)

💡 Introduktion till ämnet (flipped classroom)

⏰ Tidsåtgång: c.a. 30 min

Variabler (16 min)

Namnge variabler (6 min)

Strängfunktioner (8 min)

WAT

• 📹 Varmt välkommen till ditt liv som JavaScript-utvecklare: Wat (5 min)

(Om du inte tycker det är roligt eller du bara blir förvirrad, lägg in en kalenderpåminnelse att kika på denna igen om 8 veckor 😉 )

💬 Kodexempel

Typkonvertering

"Typecasting" är ett begrepp inom JavaScript som ni kommer att bli väl bekanta med. Det betyder att en variabeltyp görs om till en annan. Exempelvis att en sträng konverteras till en siffra.

JavaScript har en fantastisk egenskap (eller besvärlig sådan) som gör att exempelvis nedan kod ger ett oväntat resultat:

const num1 = '1'; // sträng - siffran 1
const num2 = '456'; // sträng - siffran 456
const sum = num1 + num2;
console.log(sum); // resultat: 1456

JavaScript plussar alltså ihop bokstäverna 1 + 456 => 1456, istället för siffrorna.

För att komma runt det behöver s.k. "typecasting" användas, där vi konverterar t.ex. bokstäver till siffror (men går att använda till många olika typkonverteringar):

const num1 = '1'; // sträng - siffran 1
const num2 = '456'; // sträng - siffran 456
const sum = Number(num1) + Number(num2);
console.log(sum); // resultat: 457

📖 Läsanvisningar

• JavaScript - The Definitive Guide: 2.1 The text of a JavaScript program
• JavaScript - The Definitive Guide: 2.3 Literals till och med 2.7
• JavaScript - The Definitive Guide: Hela kapitel 3
• JavaScript - The Definitive Guide: 5.7 - Declarations
• JavaScript Data Structures
• Keywords/reserverade ord (ord du inte kan döpa din variabel till)

🏋️ Övningsuppgifter

Grund

• Variables | w3schools
• Operators | w3schools
• Data Types | w3schools
• Strings | w3schools
• String methods | w3schools
• Variables | codecademy
• Quiz | codecademy

Säg hej till dig själv

Skapa en variabel som du tilldelar värdet ditt namn. Skriv ut ditt namn i konsolen.

Omvandla ditt namn till versaler

Variabeln som du precis skapade, använd en strängfunktion för att omvandla den till versaler, och skriv ut resultatet i konsolen.

Medel

Två siffror

Skapa två variabler, petAge och myAge. Skapa en tredje variabel som heter jointBirthdayParty som plussar ihop era åldrar. Skriv ut i konsolen en inbjudnings-sträng för er gemensamma födelsedagsfest. Använd template literals för att berätta hur gamla ni blir tillsammans.

Fler övningsuppgifter

Vi kommer att göra en rad övningar på lektionstid som "knyter ihop" koncepten/pusselbitarna, men vill du träna mer så rekommenderar jag varmt t.ex. detta repo, som har massor med bra övningsuppgifter: 4GeeksAcademy | JavaScript Beginner Exercises Tutorial

✅ Avstämning

Använd denna lista för att "checka av" att du förstår modulens koncept.

Terminologi

• case-sensitive
• keyword
• identifier
• variable
• statement termination
• primitive type
• object type
• null
• undefined
• let
• const
• string literals
• template literals
• boolean
• number
• String
• Symbol

Du är klar när…

• Du vet vad som är ett giltigt och ogiltigt variabelnamn
• Du känner till de olika variabeltyperna (string, number, boolean, osv.)

📚 Resurser

• Om att namnge variabler

Våga Fråga-lådan

Anonyma frågelådan

Klar?