2d:null 2e:["$","title",null,{"children":"(WIP) Introduction to programming through JavaScript | Daniel Manning | Observable"}] 33:Tdaf,## Preface This notebook will introduce you to the fundamentals of the JavaScript langauge and programming in general. It expects little to no prior knowledge about programming. Think of programming similar to learning a new word, using it in a sentence, and eventually being able to make your own sentences using a bunch of new words. In addition, you'll need to learn new syntax and grammatical *structures*, similar to learning for example that an exclamation point is always at the end of a sentence, or that a sentence is generally made up of a subject, verb, and object. Programming languages are, however, different to spoken ones in a very important way: there are *never exceptions to a rule*. In English, you can't say that a "verb ALWAYS comes before a noun". In a programming language, grammatical/syntactic rules like this are never broken, and in fact, the *compiler* (the program that verifies and executes your code) will never let anything run unless it is correct. At each step we'll introduce you to a new abstract idea; a description of a concept that makes sense at a high level. Every abstract idea will also be paired with a number of concrete examples to help the idea sink in, and you'll be asked to "follow the pattern" and write a new bit (an exercise) that causes you to apply the new concept. After a few of these, a larger task will be proposed, and will expect you to combine everything you've learned so far. **Be aware**: it will take time for you to be able to synthesize intricate programs. Similar to learning a spoken language, you cannot expect to be able to write and speak detailed paragraphs or stories on your first day. However, the very nice thing about programming is that you can apply what you learn almost immediately, and make an infinite number of mistakes before an abstract idea really makes sense. Some other tips to help you learn: - **Be ok with ambiguity, at least in the beginning**. Most programmers, if not all, don't know every tiny detail about what they are building because there is just too much to know. But, they know enough. - **Have the perspective of a researcher or a scientist**: Run experiment -> Observe results -> Ask yourself why the results are so. Repeat. So much learning comes from making mistakes. If you are trying and failing consistently at any point, try to remember you're doing it right! - **If you have an idea, try it out!** Questions like *"Can i do \_\_\_?"*, or *"What happens when i do \_\_\_?"*, are questions worth answering yourself by trying them out. Whether you get it wrong, or right, you've gained invaluable knowledge. - **Do the exercises**. You can't learn to ride a bike by watching a video on how to do it, you have to actually do it, even if it seems trivial or obvious sometimes. Hopefully we have done a good enough job at making the exercises interesting and inspiring! - **You can always backtrack if you forget.** If you forget what something means or what something is, please feel free to backtrack through prior content, or in external resources. However, we recommend that you don't jump straight to exercise solutions if you come across something hard. As alluded to: learning from mistakes is much more valuable than getting the right answer. - **Stick to one programming language in the beginning**. There is evidence that indicates it is more productive for students to not mix programming languages while they are initially learning to understand fundamental concepts ${ref(0)}34:T430,

## Functions A function is a **reusable bit of code that takes an input and returns an output**. We deal with functions in real life all the time: - Adding two numbers together gives you another third number (two inputs, one output) - String two words together to form a small phrase (two inputs, one output) - Enter a URL into your browser, a HTML web page is retrieved for you (one input, one output) Functions are one of the fundamental ways we make **abstractions**. If I gave you a function that could return you a web page when you give it a URL, you don't need to care about *how* it did it, unless you're really interested.

### Your boring first function that adds two numbers together. A function written in the JavaScript language: ```js function add(x, y) { return x + y } ``` Heres an English translation for it: > Define a function with the name "add", that takes two parameters x and y. The function computes the sum of x and y, and returns it to whoever uses the function. This is how we use it, and what it returns: 35:T820,We're **calling** a function, it has a **name** called `add`, and we're seeing that it can add two numbers `x` and `y` together. As you can see, `x` and `y` are able to change every time we call the function. The function *does some work* for us, given some prior information. Lets break everything down a bit more.

```js function ``` **"function"** is a JavaScript specific keyword used to **begin** the definition of a function.

```js function add(...) ``` Directly after the word `function` should be the **name** or **identifier** of the function. In any program, you're likely to define many different functions that do different things, and we need a way to refer to them unambiguously.

```js function add(x, y) ``` Within the parentheses of `add(...)` are `x` and `y`. These are the **parameters** of the function; the things that determine how the function will run; the things that are able to change. You can define as many parameters as you like. E.g. `function doSomething(withThis, andThat, andThis)` which takes 3 parameters, or `function clear()` which takes no parameters.

```js function add(x, y) { ... } ``` Notice that there is a **body** of the function; we've just defined a function named add, began defining the body using "`{`" and ended it using "`}`". The body of a function is the definition of what the function does.

```js function add(x, y) { return ... } ``` Heres a new JavaScript keyword: **"return"**. It tells people who use the function what they'll get if they use it. The bit of code *directly* after the keyword "return" will be the output. **You cannot add a new line here.** You must write: ```js return something ``` NOT ```js return something ```

```js function add(x, y) { return x + y } ``` We see a new bit: `x + y`. This is a new concept, called an **"expression"**, that we will delve deeper into later. We can see here that in JavaScript we are able to use the mathematical operator: `+`. 36:[] 31:{"id":"b6230f6787b16a2f","slug":"introduction-to-programming-through-javascript","title":"(WIP) Introduction to programming through JavaScript","thumbnail":"a5d337db5d9530bdd9e63fd75e5df8bf4dc76ed24dfa3d0c91fded9f1b3bfb12","access_level":"public","create_time":"$D2021-11-25T03:57:11.764Z","update_time":"$D2022-08-14T06:08:42.776Z","view_time":null,"first_public_time":"$D2021-11-26T05:43:53.436Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bd2105631a778392","login":"dmisdm","name":"Daniel Manning","avatar_url":"https://avatars-next.observableusercontent.com/5bced4a52a61cf5a9cfef28321bdd9a8146d201fd9ce4393ef164f5cc868ee5b","tier":"starter_2024"},"version":341,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b7f352d825637a4f","login":"dmisdm","name":"Daniel Manning","avatar_url":"https://avatars-next.observableusercontent.com/5bced4a52a61cf5a9cfef28321bdd9a8146d201fd9ce4393ef164f5cc868ee5b","tier":null}],"members":[{"type":"individual","id":"b7f352d825637a4f","login":"dmisdm","name":"Daniel Manning","avatar_url":"https://avatars-next.observableusercontent.com/5bced4a52a61cf5a9cfef28321bdd9a8146d201fd9ce4393ef164f5cc868ee5b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"(WIP) Introduction to programming through JavaScript","cells":[{"id":58,"value":"# (WIP) Introduction to programming through JavaScript ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"### Todo\n- Drill into WHY you should learn this. Excitement should be a first class concept.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":306,"value":"
\n
\n
\n## Code Cells\nTake a second to play around and run the code in the cell below (for example, change one of the numbers, and re-run it). In this guide, this is how we'll **execute** code. The idea might seem foreign, but it will become more normal as we go along.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":323,"value":"5 + 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"
\n
\n
\n## Agenda\n1. Functions\n2. Variables\n3. Expressions\n4. Algorithms\n5. Arrays\n6. Objects\n7. Classes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"add(1, 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"add(5, 10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"add(9998, 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"add(1.659, 2.944)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"//Try it out here! This is a JavaScript code cell that can be executed.\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"

\n If you're feeling overwhelmed, like there is a lot going on behind the scenes, you would be right.
As mentioned, we need to be ok with ambiguity in the beginning, and focus on one thing at a time, in order to be productive.\n\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"
\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"### Exercises","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"#### Define a subtract function\nNow, all I will tell you is that in JavaScript we can use the operator \"`-`\" for subtraction.\nCan you define a new function, called `subtract`, that can subtract two numbers together?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"// Write your answer in this box","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"// Here we validate that you've got the right answer\ntestAnswer(() => {\n if (typeof window.subtract !== \"undefined\") {\n expect(subtract(5, 5), 0);\n expect(subtract(10, 1), 9);\n expect(subtract(100.5, 200), -99.5);\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"
\n
\n
\n
\n
\n
\n
\n#### References and utilities (you can ignore this)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"references = [\n {url: \"https://www.sciencedirect.com/science/article/pii/B9780121889500500084\"}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"function ref(refIndex) {\n const url = references[refIndex].url\n return `[[${refIndex + 1}](${url})]`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"function expect(result, correctAnswer) {\n if(result !== correctAnswer) {\n throw Error(`Incorrect output: ${result}. Expected: ${correctAnswer}`)\n }\n return \"Correct!!!\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"function testAnswer(block) {\n try {\n block()\n return md`### You got it right!`\n } catch(e) {\n return md`### Hmmm, that doesn't seem right...keep trying!`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"function add(x, y) { return x + y }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"