CSE-316-Software-Development · ksaslow · Jan 29, 2024 · Jan 29, 2024 · Jan 29, 2024 · Jan 29, 2024
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
 # learn-js
 JavaScript tutorial repo
 
-### REPLACE WITH YOUR FULL NAME
+### Katie Saslow
diff --git a/quiz/arrow.html b/quiz/arrow.html
@@ -12,15 +12,17 @@
     <script>
         const obj = {
             msg: 'Hello World',
-            hello:  () => {
+            hello:  function() {
                 document.getElementById('demo').innerHTML += this.msg;
             }
         };
         window.addEventListener('load', () => {
             obj.hello();
+            console.log(this);
         });
         document.getElementById('btn').addEventListener('click', () => {
             obj.hello();
+            console.log(this);
         });
     </script>
 </body>

diff --git a/quiz/scripts/addEvent.js b/quiz/scripts/addEvent.js
@@ -1,18 +1,24 @@
 window.onload = function() {
     let x = document.getElementById('myBtn');
-    x.addEventListener('mouseover', myFunction('Moused over!'));
+    x.addEventListener('mouseover', myFunction('Moused over!')); // now these functions take input parameters!
     x.addEventListener('click', mySecondFunction('Clicked!'));
     x.addEventListener('mouseout', myThirdFunction('Moused out!'));
 }
 
 function myFunction(msg) {
-    document.getElementById('demo').textContent = msg;
+    return () => document.getElementById('demo').textContent = msg;
 }
 
 function mySecondFunction(msg) {
-    document.getElementById('demo').textContent = msg;
+    return () => document.getElementById('demo').textContent = msg;
 }
 
 function myThirdFunction(msg) {
-    document.getElementById('demo').textContent = msg;
+    return () => document.getElementById('demo').textContent = msg;
 }
+
+// why doesnt this work as expected? What changed now that the functions in EventListeners take parameters?
+// maybe that the functions to be handled don't return anything? 
+// the functions need to return CLOSURES! 
+// How do we do this? Convert the function into arrow function at line 3
+// OR return closures below in the individual functions! (done KS)
diff --git a/quiz/scripts/closure.js b/quiz/scripts/closure.js
@@ -1,13 +1,20 @@
 function setColor(set) {
         let changeColor = set;
-        if(changeColor) {
+        return () => { // added (KS), need to return a closure! could do either return () => OR return fucntion() 
+            if(changeColor) {
             let userColor = document.getElementById('color').value;
             document.getElementById('myPara').style.color = userColor;
         }
+    }
 
 }
 
 window.onload = function() {
     let toggle = true;
     document.getElementById('btn').onclick = setColor(toggle);
 }
+
+
+// error: the function setColor is not actually returning anything!
+// fix: need the function to execute when the click happens. To do this, we need to create a nested function, aka a closure!!
+// added line 3 to add the arrow func
diff --git a/quiz/scripts/javascript.js b/quiz/scripts/javascript.js
@@ -0,0 +1 @@
+let sum
diff --git a/quiz/scripts/js b/quiz/scripts/js
diff --git a/quiz/scripts/logger.js b/quiz/scripts/logger.js
@@ -1 +1,11 @@
 // Define a JavaScript function called logMsg() that can be used to log an error message for any object that contains the property errMsg. 
+
+function logMsg() {
+    console.log(`Error message: ${this.errMsg}`);
+};
+
+const o1 = {
+    errMsg: '01'
+};
+
+logMsg.call(o1)
diff --git a/quiz/scripts/test_code.js b/quiz/scripts/test_code.js
diff --git a/quiz/vars1.html b/quiz/vars1.html
@@ -2,12 +2,12 @@
     <head>
         <script>
             // Fix the error in the code below 
-            let x = 1;
+            let x = 1;  
             var y = 2;
             {
-                y = y + 1;
+                y = y + 1; // cannot access y before initialization, Reference Error, using before line 10! 
                 console.log(x+y);
-                let y = 2;
+                var y = 2; // change from let y = 2 to var y = 2 (KS). (This changes the semantic rules around declaring variables)
             }
             console.log(x);
             console.log(y);

diff --git a/quiz/vars2.html b/quiz/vars2.html
@@ -2,11 +2,17 @@
     <head>
         <script>
             // change the script such that i=0,1,2,3,4 is logged in the console
-            for (var i = 0; i < 5; i++) {
+            for (let i = 0; i < 5; i++) { // changed var i = 0 to let i = 0 (KS)
                 // setTimeout executes the function after 5 ms
-                setTimeout(function() {
-                    console.log(i);
-                }, 0);
+                setTimeout(function() { // setTimeout is an API call. lookup
+                    console.log(i); // each time we console log it, we get 5, not 0, 1, 2, 3, 4, 5. 
+                }, 0); 
+                // this is how you do ASYNCHRONOUS programming. The whole for loop is going to run, and with each iteration, 
+                // this function is going to be put on some Q. Once the whole loop runs, every function in the Q will get executed!!!
+                // we want to console log 0 to 4 sequentially, so we do this asynchronous programming 
+
+                // NOTE: We see the changes I made (when I changed var to let in line 5), because of BLOCK SCOPE! the variable 
+                // declared with var i was NOT ACCESSIBLE to the block function. Needed to change it to let i.
             }
         </script>
     </head>

diff --git a/quiz/vars3.html b/quiz/vars3.html
@@ -2,11 +2,12 @@
     <head>
         <script>
             // Fix all errors in the code below
-            const PI = 3.14159;
+            let PI = 3.14159; // change const to let (done KS)
+            let area = 0; // addded this line (done KS)
             {
                 let radius = 5;
-                let area = PI * radius * radius;
-                PI = 3.0;
+                let area = PI * radius * radius; // we have not defined area yet! added line 6 to declare let area;
+                PI = 3.0; // error here because we are trying to reinitialize a CONST! Cant change its value. 
             }
             console.log(area);
 

diff --git a/quiz/where2putjs.html b/quiz/where2putjs.html
@@ -4,19 +4,19 @@
     <meta charset="UTF-8">
     <title>Title</title>
     <link rel="stylesheet" href="../css/index.css">
-    <script>
-        document.getElementById("demo").textContent = "A paragraph";
-        function myFunction() {
-            document.getElementById("demo").textContent = "Paragraph changed after click.";
-        }
-    </script>
+
 </head>
 <body>
 <div id="root">
     <h2>Demo JavaScript in Body</h2>
     <p id="demo"> Placeholder ... </p>
     <button type="button" onclick="myFunction()">Try it</button>
 </div>
-
+<script>
+    document.getElementById("demo").textContent = "A paragraph";
+    function myFunction() {
+        document.getElementById("demo").textContent = "Paragraph changed after click.";
+    }
+</script>
 </body>
 </html>