Webbteknik 2

Laboration 1E

Variabler och datatyper

I den här labben skall vi titta mer på att använda variabler samt olika såkallade “primitiva” datatyper i JavaScript.

0 - Skapa en arbetsmapp

Förslagsvis med namnet lab-1e, där du sparar filerna för just den här laborationen.

1 - Förbered filerna

Skapa en fil index.html och länka in en fil script.js med type="module":

<!DOCTYPE html>
<html>
  <head>
    <title>Variabler och datatyper</title>
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <h1>Variabler och datatyper</h1>
    <p>Öppna webbläsarens konsol (F12 eller högerklick → Inspektera → Console)</p>
  </body>
</html>

2 - Deklarera variabler

Börja med att skriva följande i script.js:

const namn = "Spaceman Spiff";
const födelseÅr = 1985;

console.log("Hej", namn);
console.log("Född:", födelseÅr);

Testa att ändra värdet på namn på en ny rad:

namn = "Nya Namnet";

Testa sedan att ändra födelseÅr på en ny rad - vad händer?

födelseÅr = 2001;

Fråga: Vad är skillnaden mellan let och const?

Ta bort raden födelseÅr = 2001; så att koden fungerar igen.

3 - Primitiva datatyper

Skapa några variabler av olika typer och logga dem:

const tal = 42;
const text = "42";
const sant = true;
const inget = null;
let odefinierad;
const konstigt = NaN;

console.log(tal, text, sant, inget, odefinierad, konstigt);

Lägg till raden:

console.log(typeof tal, typeof text, typeof sant, typeof inget, typeof odefinierad, typeof konstigt);

Fundera:

  • Vad är skillnaden på null och undefined?

4 - Räkna med numeriska värden

Nu ska vi öva på vanliga räknesätt med tal. Skapa några variabler och utför beräkningar. Klistra in följande i script.js:

const tal1 = 10;
const tal2 = 3;

console.log("Addition:", tal1 + tal2);
console.log("Subtraktion:", tal1 - tal2);
console.log("Multiplikation:", tal1 * tal2);
console.log("Division:", tal1 / tal2);
console.log("Modulo (rest):", tal1 % tal2);
console.log("Exponent:", tal1 ** tal2);

Testa även att räkna med decimaltal. Observera, när vi skall använda decimaltal i javascript använder vi alltid punkt (.) som decimaltecken, aldrig komma (,). Klistra in följande i script.js:

const pris = 99.90;
const moms = 0.25;
let prisMedMoms = 0;
prisMedMoms = pris * (1 + moms);

console.log("Pris utan moms:", pris);
console.log("Pris med moms:", prisMedMoms);

När vi arbetar med primitiva värden i variabler så har vi också möjlighet att direkt uppdatera värdet i variabeln när vi gör en beräkning. Testa följande i script.js:

let antal = 0;
antal += 1;
console.log("Antal efter första ökningen:", antal);
antal += 5;
console.log("Antal efter andra ökningen:", antal);
antal -= 2;
console.log("Antal efter minskning:", antal);

Motsvarade fungerar för de flesta operatorer och primitiva datatyper.

5 - Arbeta med strängar

Nu går vi vidare och tittar lite på text-strängar:

const förnamn = "Spaceman";
const efternamn = "Spiff";


// Konkatenering ("ihopslagning") med +
const fullNamn = förnamn + " " + efternamn;
console.log(fullNamn);

const ålder = 2025 - födelseÅr;

let presentation = "Hej!";
console.log(presentation);

// Kombinera strängar och tal
presentation = "Jag heter " + fullNamn + " och jag är " + ålder + " år gammal.";
console.log(presentation);

Reflektera: Vad händer när du försöker lägga ihop en sträng och ett tal med +?

6 - Typomvandlingar

Som du märkte ovan så hjälper javascript gärna till att automatiskt konvertera värden från en typ till en annan för ett få ett uttryck att fungera. Detta automatiska beteende kan vara både hjälpsamt men också förvirrande. Nu skall vi undersöka omvandlingar mellan olika datatyper lite mer utförligt. Testa följande uttryck:

console.log('"5" + 3 = ', "5" + 3);
console.log('"5" - 3 = ', "5" - 3);
console.log('"5" * "2" = ', "5" * "2");
console.log("10 + true = ", 10 + true);
console.log("10 + false = ", 10 + false);
console.log('"hej" * 3 = ', "hej" * 3);

Fundera:

  • Varför tror du resultatet blir olika beroende på vilket tecken du använder (+, -, *)?
  • Vad betyder NaN och när kan det uppstå?

7 - Konvertera själv

Prova att explicit konvertera till strängar respektive tal genom att använa String() och Number():

const textTal = "123";
const riktigtTal = Number(textTal);
const tillbakaTillText = String(riktigtTal);

console.log(textTal, typeof textTal);
console.log(riktigtTal, typeof riktigtTal);
console.log(tillbakaTillText, typeof tillbakaTillText);

Reflektera: Vad händer om du försöker köra Number("hej")?

Bonusutmaningar

  1. Experimentera med att kombinera olika typer i samma uttryck. Kan du förutsäga resultatet innan du loggar det?
  2. Prova att använda += för att bygga upp en sträng bit för bit.

Reflektion

  • När ska man använda const istället för let?
  • Vad händer när JavaScript försöker tolka "5" + 1 jämfört med "5" - 1?
  • Hur kan man undvika oönskade typomvandlingar i sin kod?