Laboration 2 b - Webbteknik 2

I den här labben skall vi undersöka uttryck som resulterar i värdena true eller false. Denna typ av värden kallas för booleska värden och är centrala i programmering när vi vill fatta beslut baserat på olika förutsättningar, och köra olika kod beroende på dessa.

0 - Skapa en arbetsmapp

Innan du börjar, skapa en ny labb-mapp som du kan kalla lab-2b där du sparar filerna för just den här laborationen.

1 - Skapa HTML-sidan

Skapa en fil index.html med innehållet nedan och en tom script.js och öppna sedan sidan med Live Server:

<!DOCTYPE html>
<html>
  <head>
    <title>Boolska värden och logiska uttryck</title>
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <h1>Boolska värden och logiska uttryck</h1>
    <p>Öppna webbläsarens konsol (F12 → Console)</p>
  </body>
</html>

2 - Sant och falskt

Börja med att lägga in följande i script.js:

let isWarm = true;
let isRainy = false;

console.log("Is it warm?", isWarm);
console.log("Is it rainy?", isRainy);

Fundera:
Vad betyder egentligen true och false?
Hur kan man beskriva dessa värden med andra ord?

3 - Jämförelser

Jämförelseoperatorer utvärderas till boolska värden. Lägg in följande kod i script.js:

let x = 5;
let y = 8;
let y2 = "8";
console.log("x = ", x);
console.log("y = ", y);
console.log("y2 = ", y2);
console.log("(mindre än) x < y:", x < y);
console.log("(större än) x > y:", x > y);

console.log("(lika med) x == y:", x == y);
console.log("(inte lika med) x != y:", x != y);

console.log("(lika med) x === y:", x === y);
console.log("(inte lika med) x !== y:", x !== y);

console.log("(lika med) y == y2:", y == y2);
console.log("(inte lika med) y != y2:", y != y2);

console.log("(lika med) y === y2:", y === y2);
console.log("(inte lika med) y !== y2:", y !== y2);

Fundera:
Vad betyder de olika jämförelseoperatorerna? Vad är skillnaden mellan == och ===?
Vad är relationen mellan == och !=, respektive === och !==?

4 - Logiska operatorer

Med hjälp av logiska operatorer kan vi kombinera olika villkor. Vi kan kolla om det ena OCH det andra är sant, eller det ena ELLER det andra. Testa att kombinera villkor. Jobba vidare i script.js:

let age = 14;
let hasTicket = true;
let withAdult = false;

console.log("Age: ", age);
console.log("hasTicket: ", hasTicket);
console.log("withAdult: ", withAdult);
console.log("Old enough?", age >= 15);
console.log("Can enter movie alone?", age >= 15 && hasTicket);
console.log("Can enter movie with adult?", hasTicket && (age >= 15 || withAdult));
console.log("Needs adult supervision?", !withAdult && age < 15);

Reflektera:

Prova ändra age, hasTicket och withAdult. Verkar logiken stämma?
Vad betyder && respektive ||
Vad betyder !?
- ledtråd: samma tecken används i jämförelseoperatorerna != och !== ovan.

5 - “Truthy” och “falsy”

Vissa värden beter sig som true eller false även om de inte är det. Återigen är det javascript som försöker att hjälpa oss genom att automatiskt konvertera värden till boolska i vissa sammanhang, t.ex. i villkorssatser. Testa följande. Här tvingar vi javascript att att tolka olika värden som boolska med Boolean()-funktionen, somliga värden blir true, andra false. Lägg in följande i script.js:

console.log("Boolean(0)", Boolean(0));
console.log("Boolean(1)", Boolean(1));
console.log('Boolean("")', Boolean(""));
console.log('Boolean("hello")', Boolean("hello"));
console.log('Boolean(null)', Boolean(null));
console.log('Boolean(undefined)', Boolean(undefined));

Fundera:
Vilka värden räknas som “falsy”? Verkar det rimligt?
Varför kan det vara viktigt att känna till?

Bonusutmaningar

Vi har inga bonusutmaningar för denna labb, gå stället vidare till nästa laboration som använder villkor som dessa i praktiken!

Webbteknik 2

Laboration 2B

boolska värden och logiska uttryck