Lesson 3, Thursday, 2023-09-21
What do you remember so far?
Number:
42
-3.1415String:
"John"
'Berlin'Boolean:
true
false| Group | Operators | Example |
|---|---|---|
| Numerical Operators | + - * / ** |
5 + 4 * 37 / 2 - 2"Hello" + " World" |
| Comparison Operators | === !== < > <= >= |
30 !== 2520 >= 18 |
- VSCode
- Logical Operators
So far, we've used the JavaScript console to enter JavaScript code. This is great for trying small snippets of code (REPL: Read-Eval-Print-Loop).
But what if we want to write something more complex, e.g. more than one line?
Create a new HTML page and open it in the browser, for example:
- Open VSCode
- Click on File -> New File
- Click on File -> Save File, save it as e.g.
index.html - Enter
!and confirm with the Enter key to create a skeleton HTML file - Right click on the tab with the name
index.html, choose Copy Path - Paste the path to the browser
Your HTML body now looks something like this:
<body>
Test Test Test
</body>How do we get JavaScript into the page?
We can use the <script> tag to include JavaScript code:
<body>
Test Test Test
<script>
1 + 1
</script>
</body>The browser defines a global variable document.body.textContent for us. We can assign a string to this variable to change the text of the body:
<body>
Test Test Test
<script>
document.body.textContent = "Hello from JavaScript";
</script>
</body>What do you observe?
Create a website that uses JavaScript to compute how much you need to pay to go to the cinema with your friends.
Create variables for the number of friends, the price of a ticket and the total sum you need to pay.
Show the total amount on your web page.
Change the amount of friends or the price for a ticket, then reload your page. Does it work?
These operators work on boolean values:
&&AND||OR!NOT
Logical NOT negates a boolean:
!true // false
!false // trueExample:
let hatesPineapple = false;
let canEatPizzaHawaii = !hatesPineapple;let temperature = 28;
let isWarm = temperature > 25;
let goSwimming = isWarm;
let goBiking = !isWarm;Answer: we go swimming
let isNotWarm = temperature <= 25;
let goSwimming = !isNotWarm; // No. Just no. Please Don't.Better:
let isWarm = temperature > 25;
let goSwimming = isWarm;AND takes two booleans and returns true if both booleans are true
Example:
let reviewedSlides = true;
let didHomework = true;
let canWatchMovie = reviewedSlides && didHomework;
// canWatchMovie is truetrue && true // true
true && false // false
false && true // false
false && false // falseI need bread and cheese to make a cheese toast
let hasCheese = true;
let hasBread = true;
let canMakeCheeseToast = hasCheese && hasBread;
// what's the value of canMakeCheeseToast ?true
OR takes two booleans and returns true if at least one is true
let ateCookie = false;
let ateChocolate = true;
let shouldDoSports = ateCookie || ateChocolate;
// shouldDoSports is truetrue || true // true
true || false // true
false || true // true
false || false // falseTo apply to a job, I need to know German or English
let knowsGerman = false;
let knowsEnglish = false;
let canApply = knowsGerman || knowsEnglish;
// what's the value of canApply?false
What happens when there's more than one of the same operator in one line?
1 / 2 / 2Answer: 0.25
Most operators are left-to-right associative. If in doubt, consult MDN
What's the result?
2 ** 3 ** 2Answer: 512 (exponentiation is right-to-left associative!)
Note: Round parentheses (or "grouping operator") () can be used to group expressions:
(2 ** 3) ** 2 // 64
2 ** (3 ** 2) // 512What happens if we mix different operators in one line? What could the result be?
2 + 2 * 2Result: 6
- JavaScript supports precedence (priority) for operators
- Operators with higher precedence are evaluated before operators with lower precedence
- Full List: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
- Multiplication (15) has higher precedence than addition (14) - multiplication wins
Parentheses have the highest precedence (21) and always win:
(2 + 2) * 2 // 8
2 + (2 * 2) // 6When in doubt, use parentheses!
What is x ?
let x = 4 + 6 < 3 + 8;Result: true
Which of the two is more readable?
let x = 4 + 6 < 3 + 8;let sum1 = 4 + 6;
let sum2 = 3 + 6;
let x = sum1 < sum2;What is x?
let x = 5 < 6 < 7- Answer: It's pointless
Let's break it down:
5 < 6 < 7
(5 < 6) < 7 // 5 < 6 is true
true < 7 // pointless comparison!Comparing a boolean to a number makes no sense. Do not chain comparison operators.
What does the following return?
5 === 5 === 5(5 === 5) === 5
true === 5 // Pointless. Returns falseA job add requires JavaScript or Python knowledge. Can you finish the code below?
let canProgramJavaScript = true;
let canProgramPython = true;
let canApply = // ???BONUS: The job also requires German language skills. Can you extend the code above?
let pricePerTicket = 8;
let friends = 3;
let totalPrice = friends * pricePerTicket;- Copy/paste this code
- Add a new variable that points to the price of popcorn (7 EUR).
- Can you add the price for one popcorn to the
totalPricevariable? - Create a new variable containing your total budget (30 EUR).
- Create a new variable that is
trueif the budget is high enough for cinema,falseotherwise. - BONUS: Create a new variable
isCheapthat istrueif the price of popcorn is less than 5 EUR and the price for a ticket is less than 7 EUR.
A job add requires JavaScript or Python knowledge. Can you finish the code below?
let canProgramJavaScript = true;
let canProgramPython = true;
let canApply = canProgramJavaScript || canProgramPython;let canProgramJavaScript = true;
let canProgramPython = true;
let canSpeakGerman = false;
let canProgram = canProgramJavaScript || canProgramPython;
let canApply = canProgram && canSpeakGerman;let pricePerTicket = 8;
let friends = 3;
let totalPrice = friends * pricePerTicket;
let popcornPrice = 7;
totalPrice = totalPrice + popcornPrice;
let budget = 30;
let enoughMoney = budget >= totalPrice;
let isPopcornCheap = popcornPrice < 5;
let isTicketCheap = pricePerTicket < 7;
let isCheap = isPopcornCheap && isTicketCheap;