2a:null 2b:["$","title",null,{"children":"Exercises: Basic Interactivity (2) | Steve Oney | Observable"}] 30:[{"id":"1193fcb8eefcdc7298278138b0e51c2b36fc7bd5a96fb2b28c7925e6bd948acccf3304ecbb26741fb93fbac4e1c8e1f8a6a929989b378b6402f7b20da04fd101","href":"https://static.observableusercontent.com/files/1193fcb8eefcdc7298278138b0e51c2b36fc7bd5a96fb2b28c7925e6bd948acccf3304ecbb26741fb93fbac4e1c8e1f8a6a929989b378b6402f7b20da04fd101","name":"javascript_books.jpg","type":"image/jpeg","lastModified":1632123813390.135,"size":810742},{"id":"fdccbbb06977ea13dbe1a94d753311e453754be792f40dc0a5adc70d58b6786e40218f92a775eb60a9709d88b5f0824ad0a8a29aead6162c581dafd7515e193a","href":"https://static.observableusercontent.com/files/fdccbbb06977ea13dbe1a94d753311e453754be792f40dc0a5adc70d58b6786e40218f92a775eb60a9709d88b5f0824ad0a8a29aead6162c581dafd7515e193a","name":"balls.jpg","type":"image/jpeg","lastModified":1612809146402.753,"size":146534}] 2e:{"id":"72f8acfa4d9874fa","slug":"si-579-lecture-6","title":"Exercises: Basic Interactivity (2)","thumbnail":"a0745b1f22643c41752239d88992c86c659068ab417d8919033b38b546763d65","access_level":"public","create_time":"$D2021-02-08T07:33:00.160Z","update_time":"$D2023-10-02T17:48:34.247Z","view_time":null,"first_public_time":"$D2021-02-08T07:37:08.892Z","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":136,"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":3,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Exercises: Basic Interactivity (2)","cells":[{"id":0,"value":"md`# Exercises: Basic Interactivity (2)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"## Fun Book Thing of the Day\n\nO'Reilly Media publishes two fairly popular JavaScript books:\n\n- [JavaScript: The Definitive Guide](https://www.oreilly.com/library/view/javascript-the-definitive/9781491952016/) is 706 pages long\n- [JavaScript: The Good Parts](https://www.oreilly.com/library/view/javascript-the-good/9780596517748/) is 176 pages long.\n\nFor comparison, here are those two books side-by-side (\"The Good Parts\" is on the right):\n

\n[(credit: Reddit u/Xyexs)](https://www.reddit.com/r/ProgrammerHumor/comments/621qrt/javascript_the_good_parts/)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":97,"value":"md`\nThere is also a good (but somewhat old) video summarizing the \"Good Parts\" book:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"md`\n## [Introduction to JavaScript Callbacks](https://observablehq.com/@soney/introduction-to-javascript-callbacks)\n## [Manipulating the DOM with JavaScript](https://observablehq.com/@soney/manipulating-the-dom-with-javascript)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`\nLast lecture's exercise: write code that creates a box and **using JavaScript**, toggles between making the box red and blue every 2 seconds.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"html`\n\n \n \n \n \n

\n \n \n\n`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"setInterval(() => {\n const box = document.getElementById(\"thebox\");\n const cl = box.getAttribute(\"class\");\n if(cl === \"color1\") {\n box.setAttribute(\"class\", \"color2\");\n } else {\n box.setAttribute(\"class\", \"color1\");\n }\n}, 2000);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"Sample solution:\n\n```HTML\n\n\n\n \n \n \n \n \n \n

\n \n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":25,"value":"md`\n## [JavaScript Events](https://observablehq.com/@soney/si-579-javascript-events)\n## [Building an Understanding of Execution Order and Timing](https://observablehq.com/@soney/si-579-building-an-understanding-of-execution-order-and-tim)\nhttp://latentflip.com/loupe\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"md`\n# Exercise: Basic Interactivity 2\n\nNow, write code where you need to **click a button** to toggle the box color between red and blue.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"html`\n\n \n \n \n \n \n

\n \n \n\n`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"setTimeout(() => {\n const box = document.getElementById(\"thebox2\");\n const buttn = document.getElementById(\"change_box_color\");\n\n buttn.addEventListener(\"click\", () => {\n const cl = box.getAttribute(\"class\");\n if(cl === \"color1\") {\n box.setAttribute(\"class\", \"color2\");\n } else {\n box.setAttribute(\"class\", \"color1\");\n }\n });\n}, 1000);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"md`\n### Sample Solution:\n\nHTML:\n\\`\\`\\`HTML\n\n\n \n \n \n \n \n \n

\n \n\n\\`\\`\\`\n\nJavaScript (\\`box2.js\\`):\n\\`\\`\\`JavaScript\nconst box = document.getElementById(\"thebox2\");\nconst buttn = document.getElementById(\"change_box_color\");\n\nbuttn.addEventListener(\"click\", () => {\n const cl = box.getAttribute(\"class\");\n if(cl === \"color1\") {\n box.setAttribute(\"class\", \"color2\");\n } else {\n box.setAttribute(\"class\", \"color1\");\n }\n});\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"md`\n## Exercise: Colored Image on Hover\n\nWrite code that uses JavaScript to add color to an image when the user hovers their mouse over it (see the example below). You can make an \\`\\` element appear in black and white by setting the \\`filter\\` CSS attribute to \\`grayscale(100%)\\`:\n\\`\\`\\`CSS\nfilter: grayscale(100%);\n\\`\\`\\`\n\n\n\n- Note: This is possible to do with CSS alone by using the [\\`:hover\\`](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) pseudo-class. However, try to do it in JavaScript first (and then if you finish that, try doing it in CSS)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"html`\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"setTimeout(() => {\n const balls_image = document.getElementById('balls_image');\n balls_image.addEventListener('mouseover', () => {\n balls_image.setAttribute('class', '');\n });\n balls_image.addEventListener('mouseout', () => {\n balls_image.setAttribute('class', 'grayscale');\n });\n}, 1000);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"md`\n### Sample Solution:\n\nHTML:\n\\`\\`\\`HTML\n\n\n \n \n \n \n \n

\n \n\n\\`\\`\\`\n\nJavaScript (\\`hover_script.js\\`):\n\\`\\`\\`JavaScript\nconst balls_image = document.getElementById('balls_image');\n\nballs_image.addEventListener('mouseover', () => {\n balls_image.setAttribute('class', '');\n});\nballs_image.addEventListener('mouseout', () => {\n balls_image.setAttribute('class', 'grayscale');\n});\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"