Adding week 3 lecture notes

HibaArafeh · Mar 4, 2019 · Jun 25, 2019 · Jun 26, 2019 · Jul 13, 2019 · Aug 11, 2019
commit d6318703e409e91495aabe94d3d7dfcc170843cc
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ Here you can find course content and homework for the JavaScript2 module
 |----|-----|----|--------|--------|
 |1.|• Capturing user input through forms <br>• [Events](http://javascript.info/introduction-browser-events)<br>• [Basic DOM manipulations](../../../fundamentals/blob/master/fundamentals/DOM_manipulation.md)<br>• [Code debugging using the browser](http://javascript.info/debugging-chrome) <br>• [Code commenting](../../../fundamentals/blob/master/fundamentals/code_commenting.md)<br>• Structuring code files<br>• [Code formatting](../../../fundamentals/blob/master/fundamentals/code_formatting.md)<br>• [Handing in homework via PR](../../..//fundamentals/blob/master/fundamentals/homework_pr.md) |[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)|
 |2.|• Functions + JSON/Arrays<br>• [Array Manipulations](../../../fundamentals/blob/master/fundamentals/array_manipulation.md)<br>• JSON<br>• [Map and filter](../../../fundamentals/blob/master/fundamentals/map_filter.md)<br>• Arrow functions |[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|[Notes](/Week2/LECTURENOTES.md)
-|3.|• [Closures](../../../fundamentals/blob/master/fundamentals/scope_closures_this.md) <br>• Callbacks|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|
+|3.|• [Closures](../../../fundamentals/blob/master/fundamentals/scope_closures_this.md) <br>• Callbacks|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|[Notes](/Week3/LECTURENOTES.md)
 
 ## Test
 At the end of this module you'll be doing a formative test. It will be done on **paper** and will consist of **4 exercises** that will test your JavaScript1 and JavaScript2 knowledge. 

diff --git a/Week3/LECTURENOTES.md b/Week3/LECTURENOTES.md
@@ -0,0 +1,35 @@
+### Lecture Notes Week 4
+
+## Reviewing
+
+Cover individual topics that students may still be stuck on from previous lectures and homework
+
+## Callbacks
+
+- How do DOM event listeners work?
+  - Can reference color-change-example.html
+  - One INEFFICIENT way would be to actually have each element listening/polling every second whether is has been clicked
+    - > Let's say you bring your car into the shop, and you need to know when it's ready. The inefficient way: Come back every 15 minutes and ask if it's ready yet. The better way: Leave your phone number and ask that they notify you when it's ready. Now let's say you have an HTML element, and you need to know when it's been clicked. The inefficient way: Come back every 15 ms and ask if there's been a click. The better way (and how event listeners work): Give the HTML element a function and ask that they invoke it for you when a click happens.
+    - This is really a problem because Javascript is single threaded
+      - When you block the thread... nothing else can work. Add this to the script and see what happens:
+        ```
+        for (let i = 0; i < 100000; i++) {
+          console.log(`Executing for the ${i}th time...`);
+        }
+        ```
+  - Even listeners work using callbacks. After a event is triggered, the passed function gets called.
+- We are now in the topic of ASYNCRONOUS programming
+  > One approach to asynchronous programming is to make functions that perform a slow action take an extra argument, a callback function. The action is started, and when it finishes, the callback function is called with the result.
+  > \- Eloquent Javascript
+- Examples
+  - addEventListener takes 1) the event and 2) a callback function
+  - setInterval()... how can we do the same color example using setInterval?
+  - Mouse move example
+- Event loop. Most amazing lecture on this is from [Philip Roberts](https://www.youtube.com/watch?v=8aGhZQkoFbQ).
+  - Browser engine / Node
+- Callback hell
+  - Request library example: https://github.com/request/request (only node!)
+
+## Scope
+
+## Closures
diff --git a/Week3/color-change-example.html b/Week3/color-change-example.html
@@ -0,0 +1,25 @@
+<!-- Taken from https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#A_simple_example -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <button id="change-btn">Change Color</button>
+    <script>
+      function random(number) {
+        return Math.floor(Math.random() * (number + 1));
+      }
+      function setRandomBackgroundColor() {
+        const randomColor = `rgb(${random(255)},${random(255)},${random(255)})`;
+        document.body.style.backgroundColor = randomColor;
+      }
+      document.getElementById('change-btn').addEventListener('click', setRandomBackgroundColor);
+    </script>
+  </body>
+</html>
diff --git a/Week3/mouse-move-example.html b/Week3/mouse-move-example.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: none;
+      }
+
+      #box {
+        transition: height 1s, width 1s, background-color 1s;
+        background-color: lightseagreen;
+        width: 100px;
+        height: 100px;
+        position: absolute;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="coordinates"></div>
+    <div id="box"></div>
+    <script>
+      const boxEl = document.getElementById('box');
+      boxEl.addEventListener('mousedown', () => {
+        boxEl.style.width = '500px';
+        boxEl.style.height = '500px';
+        boxEl.style.backgroundColor = 'coral';
+      });
+
+      boxEl.addEventListener('mouseup', () => {
+        boxEl.style.width = '100px';
+        boxEl.style.height = '100px';
+        boxEl.style.backgroundColor = 'lightseagreen';
+      });
+
+      document.body.addEventListener('mousemove', event => {
+        const coordEl = document.getElementById('coordinates');
+        coordEl.innerText = `X: ${event.pageX}, Y: ${event.pageY}`;
+
+        boxEl.style.left = `${event.pageX}px`;
+        boxEl.style.top = `${event.pageY}px`;
+      });
+    </script>
+  </body>
+</html>