2a:null 2b:["$","title",null,{"children":"Pop Quiz! | Steve Oney | Observable"}] 30:T843,# Pop Quiz! Try your best to answer all the following: ## Problem 1: Declaring Variables Answer the following: 1. What does it mean to "declare" a variable? 2. What is the difference between declaring a variable with `var`, `let`, or `const`? 3. Write a piece of code that illustrates the difference between `var` and `let` 4. Why does Professor Oney prefeer to use `const` by "default"? ## Problem 2: The DOM What is the DOM? What language(s) do we use to manipulate the DOM? What JavaScript object allows us to access the DOM? ## Problem 3: Function Call Timing What is the output of the following code? ```JavaScript function func_A() { console.log("A"); } function func_B() { console.log("B"); } function func_C() { console.log("C"); } function func_D() { console.log("D"); } function func_E() { console.log("E"); } setTimeout(func_A, 1000); setTimeout(func_B, 0); func_C(); setTimeout(func_D, 1000); ``` ## Problem 4: Debugging Why does the following code produce the error "`Uncaught TypeError: can't access property "addEventListener", btn is null`"? ```HTML ``` ## Problem 5: Checking for Equality What is the difference between `==` and `===`? Which one should you use by "default"? ## Problem 6: Threading True or false: JavaScript is multi-threaded (can run multiple things at once) ## Problem 7: Callbacks What is a callback function? How (and why) do we use them? ## Problem 8: classes vs ids What is the difference between a "class" in HTML and an "id"? Where should you use them? How do you select the elements with a specific class in CSS? How do you select the elements with a specific class in JavaScript? How do you select the elements with a specific id in CSS? How do you select the elements with a specific id in JavaScript?31:T6c5,## Problem 12: Event Listener Debugging Suppose a developer wanted to `console.log` `"You clicked the button {x} times!"` whenever the user presses a button. They wrote the following **incorrect** code: ```HTML ``` What is the value of `count` in the following scenarios? - The user has not yet clicked the button. - The user has clicked the button one time. - The user has clicked the button two times. - The user has clicked the button three times. - *(challenge)* The user has clicked the button {n} times. ## Problem 13: Event Ordering What is the output of the following code after the user has pressed the button? ```HTML ``` ## Problem 14: Keep JavaScript Weird Two ways of defining functions...`var` vs. `let`...`0 == []`...Why is JavaScript so *weird*??32:[] 2e:{"id":"f978bb61648653b2","slug":"si-579-pop-quiz","title":"Pop Quiz!","thumbnail":"39ea963b12ef7d4838ef48e95bcb31dc3e7f0b6dccad92becb16815ccf7cc578","access_level":"public","create_time":"$D2021-09-22T15:27:14.298Z","update_time":"$D2023-10-02T17:43:40.678Z","view_time":null,"first_public_time":"$D2021-09-29T18:37:11.673Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":91,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Pop Quiz!","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":38,"value":"## Problem 9: Semantics\n\nSuppose we want to create a list of clickable items. When the user clicks on an item, it should be highlighted, as illustrated below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":25,"value":"\n

This is the first item
This is the second item
This is the third item
This is the fourth item

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":28,"value":"setTimeout(function() {\n const lst = document.getElementById(\"sample_lst\");\n lst.addEventListener(\"click\", (event) => {\n if(event.target.tagName.toUpperCase() === 'LI') {\n event.target.classList.toggle('selected');\n }\n });\n}, 1000);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"Which is the better architectural design in JavaScript for this? Why?\n\n- **Alternative 1:** Write JavaScript code that changes the background color when the user clicks on an element:\n ```JavaScript\n item.setAttribute(\"style\", \"background-color: yellow\");\n ```\n- **Alternative 2:** Write CSS code that specifies elements with the class `.yellow-background` should have a yellow background color:\n ```CSS\n .yellow-background {\n background-color: yellow;\n }\n ```\n ...**and** write JavaScript code that adds the `.yellow-background` class when the user clicks on and element:\n ```JavaScript\n item.setAttribute(\"class\", \"yellow-background\");\n ```\n- **Alternative 3:** Write CSS code that specifies elements with the class `.highlighted` should have a yellow background color:\n ```CSS\n .highlighted {\n background-color: yellow;\n }\n ```\n ...**and** write JavaScript code that adds the `.highlighted` class when the user clicks on and element:\n ```JavaScript\n item.classList.add(\"highlighted\");\n ```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":51,"value":"## Problem 10: Defining Functions\n\nJavaScript includes several different ways to define functions (for example, using the `function` keyword vs. arrow functions). Try defining a function named `plusOne` that accepts one argument and returns that argument plus `1`\n\n## Problem 11: Definition Order\n\nWhy does the following code work:\n```JavaScript\ndoThing();\nfunction doThing() {\n console.log(\"I did something!\");\n}\n```\n\n...but the following code throws the runtime error `Uncaught ReferenceError: can't access lexical declaration 'doThing' before initialization`:\n```JavaScript\ndoThing();\nconst doThing = function() {\n console.log(\"I did something!\");\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":60,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"