Frontend :: Advanced JS, week 2

SUMMARY.md

@@ -89,10 +89,12 @@
     - [Week 1](courses/frontend/advanced-javascript/week1/README.md)
       - [Preparation](courses/frontend/advanced-javascript/week1/preparation.md)
       - [Session Plan](courses/frontend/advanced-javascript/week1/session-plan.md)
+      - [Exercises](courses/frontend/advanced-javascript/week1/session-materials/exercises.md)
       - [Assignment](courses/frontend/advanced-javascript/week1/assignment.md)
     - [Week 2](courses/frontend/advanced-javascript/week2/README.md)
       - [Preparation](courses/frontend/advanced-javascript/week2/preparation.md)
       - [Session Plan](courses/frontend/advanced-javascript/week2/session-plan.md)
+      - [Exercises](courses/frontend/advanced-javascript/week2/session-materials/exercises.md)
       - [Assignment](courses/frontend/advanced-javascript/week2/assignment.md)
     - [Week 3](courses/frontend/advanced-javascript/week3/README.md)
       - [Preparation](courses/frontend/advanced-javascript/week3/preparation.md)

courses/frontend/advanced-javascript/week2/assignment.md

@@ -8,32 +8,32 @@
 
 The warmup is a **little abstract**, it will get more concrete later on!
 
-1. Log out the text `Called after 2.5 seconds` 2.5 seconds after the script is loaded.
+1. Display the text `Called after 2.5 seconds` on the page 2.5 seconds after the script is loaded.
 
-2. Create a function that takes 2 parameters: `delay` and `stringToLog`. Calling this function should log out the `stringToLog` after `delay` seconds. Call the function you have created with some different arguments.
+2. Create a function that takes 2 parameters: `delay` and `stringToLog`. Calling this function should display the `stringToLog` on the page after `delay` seconds. Call the function you have created with some different arguments.
    ![second task](session-materials/carbon.png)
 
-3. Create a button in html. When clicking this button, use the function you created in the previous task to log out the text: `Called after 5 seconds` 5 seconds after the button is clicked.
+3. Create a button in html. When clicking this button, use the function you created in the previous task to display the text `Called after 5 seconds` on the page 5 seconds after the button is clicked.
 
 ![second task](session-materials/button-delay.gif)
 
-4. Create two functions and assign them to two different variables. One function logs out `Earth`, the other function logs out `Saturn`. Now create a new third function that has one parameter: `planetLogFunction`. The only thing the third function should do is call the provided parameter function. Try call the third function once with the `Earth` function and once with the `Saturn` function.
+4. Create two functions and assign them to two different variables. One function displays `Earth` on the page, the other displays `Saturn`. Now create a new third function that has one parameter: `planetLogFunction`. The only thing the third function should do is call the provided parameter function. Try calling the third function once with the `Earth` function and once with the `Saturn` function.
 
 ![second task](session-materials/planet-log.png)
 
-5. Create a button with the text called "Log location". When this button is clicked the location (latitude, longitude) of the user should be logged out using this [browser api](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
+5. Create a button with the text "Log location". When this button is clicked, display the user's location (latitude, longitude) on the page using this [browser API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API).
 
 ![second task](session-materials/log-location.gif)
 
 6. _Optional_ Now show that location on a map using e.g. the [Google maps api](https://developers.google.com/maps/documentation/javascript/tutorial)
 
-7. Create a function called `runAfterDelay`. It has two parameters: `delay` and `callback`. When called the function should wait `delay` seconds and then call the provided callback function. Try and call this function with different delays and different callback functions
+7. Create a function called `runAfterDelay`. It has two parameters: `delay` and `callback`. When called the function should wait `delay` seconds and then call the provided callback function. Add an input in the HTML for the delay (in seconds) and a button; when the button is clicked, read the delay from the input and call `runAfterDelay` with that delay and a callback that displays something on the page.
 
 ![second task](session-materials/run-after-delay.png)
 
-8. Check if we have double clicked on the page. A double click is defined by two clicks within 0.5 seconds. If a double click has been detected, log out the text: "double click!"
+8. Check if the user has double-clicked on the page. A double click is two clicks within 0.5 seconds. If a double click is detected, display the text "double click!" on the page.
 
-9. Create a function called `jokeCreator` that has three parameters: `shouldTellFunnyJoke` - boolean, `logFunnyJoke` - function and `logBadJoke` - function. If you set `shouldTellFunnyJoke` to `true` it should call the `logFunnyJoke` function that should log out a funny joke. And vice versa.
+9. Create a function called `jokeCreator` that has three parameters: `shouldTellFunnyJoke` (boolean), `logFunnyJoke` (function), and `logBadJoke` (function). If `shouldTellFunnyJoke` is `true` it should call `logFunnyJoke`, which displays a funny joke on the page. Otherwise it should call `logBadJoke`, which displays a bad joke on the page.
 
 ## 3. Function as a variable
 
@@ -62,7 +62,7 @@ Here is a gif of how the site should work:
 You can implement it exactly like you want to, but here is my recommended order:
 
 1. **Create an input and a button in html**. When the button is clicked, get the value of the input. This value will be the amount of time the game should run.
-2. **Set a timeout for the time specified by the user.** After that time has run out just log out a simple string.
+2. **Set a timeout for the time specified by the user.** After that time has run out, display a message on the page (e.g. "Time's up!").
 3. **Create an event listener** so you can call a function **when any key is pressed**. Now grab the actual key that was pressed. e.g. was it a `j` or an `i`. We are interested in `s` and `l`. Here Google is your friend!
 4. **Keep a counter** for how many times `l` and `s` was pressed.
 5. **Now put it all together!** After the timeout is done figure out which of the counters is largest. Give some kind of feedback to the users indicating who won.

courses/frontend/advanced-javascript/week2/session-materials/console-order.md

@@ -0,0 +1,107 @@
+# Console order – what runs first?
+
+Use these in class: show the code, ask “In what order will we see the output in the console?”, then run it and compare.
+
+---
+
+## Task 1
+
+```js
+console.log("A");
+
+setTimeout(function () {
+  console.log("B");
+}, 0);
+
+console.log("C");
+```
+
+<details>
+<summary>Answer</summary>
+
+Order: A, C, B
+
+Sync code runs first (A, then C). The callback for `setTimeout(..., 0)` goes to the task queue and runs after the current script and the event loop picks it up, so B appears last.
+
+</details>
+
+---
+
+## Task 2
+
+```js
+console.log("1");
+
+setTimeout(function () {
+  console.log("2");
+}, 1000);
+
+setTimeout(function () {
+  console.log("3");
+}, 0);
+
+console.log("4");
+```
+
+<details>
+<summary>Answer</summary>
+
+Order: 1, 4, 3, 2
+
+Sync first: 1, 4. Then the event loop runs callbacks: the 0 ms timer fires first (3), then after ~1 s the second timer fires (2).
+
+</details>
+
+---
+
+## Task 3
+
+```js
+console.log("start");
+
+setTimeout(function () {
+  console.log("timeout");
+}, 0);
+
+for (let i = 0; i < 3; i++) {
+  console.log("loop " + i);
+}
+
+console.log("end");
+```
+
+<details>
+<summary>Answer</summary>
+
+Order: start, loop 0, loop 1, loop 2, end, timeout
+
+All sync code (including the for loop) runs to completion first. The setTimeout callback runs only after the call stack is empty, so "timeout" appears last.
+
+</details>
+
+---
+
+## Task 4
+
+```js
+console.log("X");
+
+setTimeout(function () {
+  setTimeout(function () {
+    console.log("Z");
+  }, 0);
+
+  console.log("Y");
+}, 100);
+
+console.log("W");
+```
+
+<details>
+<summary>Answer</summary>
+
+Order: X, W, Y, Z
+
+Sync: X, W. After ~100 ms the outer callback runs (Y), then it schedules the inner setTimeout; that callback (Z) runs on the next tick of the event loop.
+
+</details>

courses/frontend/advanced-javascript/week2/session-materials/demo/index-solution.js

@@ -0,0 +1,86 @@
+// Week 2 demo – callbacks & asynchronous code (solution)
+
+// =============================================================================
+// Functions
+// =============================================================================
+// Task: Implement functionRunner so it calls the function that was passed in (e.g. add logging before/after).
+
+function functionRunner(functionToRun) {
+  console.log("Runner function");
+  const res = functionToRun();
+  console.log("Runner function ends", res);
+}
+
+functionRunner(function () {
+  console.log("hello");
+});
+
+// We don't see anything, why??
+functionRunner(Math.random);
+
+function functionRunnerImproved(functionToRun) {
+  console.log(typeof functionToRun);
+  const capturedReturnValue = functionToRun();
+  console.log(capturedReturnValue);
+}
+
+functionRunnerImproved(Math.random);
+
+// =============================================================================
+// Callbacks :: setTimeout + Event loop
+// =============================================================================
+
+setTimeout(() => {
+  console.log("Run after N seconds");
+}, 1000);
+
+const callback = () => {
+  console.log("Run after N seconds");
+};
+
+setTimeout(callback, 1000);
+
+// Next: Look at event-loop demo, explain how it works
+// Next: tasks from console-order.md
+
+// =============================================================================
+// Infinite loop
+// =============================================================================
+// Task: try to make an infinite loop with Sync and Async operations
+
+function infiniteSync() {
+  while (true) {
+    console.log("Im alive");
+  }
+}
+
+function infiniteAsync() {
+  const runTimeout = () => {
+    console.log("Im alive");
+    setTimeout(runTimeout, 0);
+  };
+
+  runTimeout();
+}
+
+const btn = document.getElementById("start");
+btn.addEventListener("click", infiniteAsync);
+
+// Function to test if browser is responsive
+const btnClick = document.getElementById("click");
+btnClick.addEventListener("click", function () {
+  console.log("Im clicked");
+});
+
+// =============================================================================
+// Callbacks :: addEventListener
+// =============================================================================
+// Task: Keep track of how many times the button is clicked; show the count on the page.
+
+const buttonElement = document.getElementById("click-me");
+let counter = 0;
+
+buttonElement.addEventListener("click", function () {
+  counter = counter + 1;
+  console.log("Button clicked " + counter + " times so far");
+});

courses/frontend/advanced-javascript/week2/session-materials/demo/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Demo – Week 2</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <main>
+      <h1>Demo</h1>
+    </main>
+    <script src="index.js"></script>
+  </body>
+</html>

courses/frontend/advanced-javascript/week2/session-materials/demo/index.js

@@ -0,0 +1,25 @@
+// Week 2 demo – callbacks & asynchronous code
+
+// =============================================================================
+// Functions
+// =============================================================================
+// Task: Implement functionRunner so it calls the function that was passed in (e.g. add logging before/after).
+
+function functionRunner(functionToRun) {}
+
+// =============================================================================
+// Callbacks :: setTimeout + Event loop
+// =============================================================================
+
+// Next: Look at event-loop demo, explain how it works
+// Next: tasks from console-order.md
+
+// =============================================================================
+// Infinite loop
+// =============================================================================
+// Task: try to make an infinite loop with Sync and Async operations
+
+// =============================================================================
+// Callbacks :: addEventListener
+// =============================================================================
+// Task: Keep track of how many times the button is clicked; show the count on the page.

courses/frontend/advanced-javascript/week2/session-materials/demo/style.css

@@ -0,0 +1,27 @@
+/* Week 2 demo – base styles */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+  line-height: 1.5;
+}
+
+main {
+  max-width: 40rem;
+  margin: 0 auto;
+  padding: 1.5rem;
+}
+
+h1 {
+  margin: 0 0 1rem;
+  font-size: 1.5rem;
+}