2a:null 2b:["$","title",null,{"children":"Mixing in JavaScript | Steve Oney | Observable"}] 30:T66e,md`We've (briefly) covered enough HTML and CSS to get started. However, the primary focus of this course is going to be on JavaScript. Unlike HTML and CSS, JavaScript is a programming language in the way that we think about "traditional" programming languages; it is "general-purpose" like Python, C, and other languages you've probably heard of. Unlike most other languages, the initial version of JavaScript was designed as a [ten-day hack](https://dl.acm.org/doi/10.1145/3386327). It borrows bits and pieces from other programming langues, including [Self](https://en.wikipedia.org/wiki/Self_%28programming_language%29), [Lisp](https://en.wikipedia.org/wiki/Lisp_%28programming_language%29), and [C](https://en.wikipedia.org/wiki/C_%28programming_language%29). It has many "unique" features, which has led to it being diredeb by many programmers (just search for "JavaScript bad" and you will get plenty of results). However, it has many great aspects as we will learn throughout the semester. When we write a website, we will use HTML to define an initial page structure, CSS to specify how the browser should render the page, and JavaScript species the "interactive" part of a page; how it should react to things like input events. If we think of an analogy to the human body, HTML could be thought of as the bones (it largely defines the shape of the page), JavaScript could be thought of as the muscles and brain (they can move the bones), and CSS can be thought of as the skin (what is visible externally).

`31:T5d1,md` ## Where Should I Put \`\n \n \n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"md`\n## Loading JavaScript from an External File\n\nWe can also specify an \\`src\\` attribute in the \\`\n \n \n\n\\`\\`\\`\n\n- Note 1: JavaScript files typically end with the extension \\`.js\\`\n- Note 2: Even though externally loaded JavaScript code will typically result in an empty \\`\\`\n\n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`\n## A Simple JavaScript example (editing the DOM when a button is clicked))\n\nThe following code example\n\\`\\`\\`html\n\n \n \n \n \n

Click the button and the Javascript function will change the text.

\n \n \n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"md`\n### The \"Traditional\" Solution: \\`