40:null 41:["$","title",null,{"children":"HALP, I don't know any javascript at all 🔰🆘 | Martin Milan | Observable"}] 47:T9af,md`# HALP, I don't know any javascript at all 🔰🆘😺 That's fine, but let's see if we can change that. I've put new terms in _itallics_ so that you can see that they're important words. Try to pay attention to these words, they come up a lot. ## What is javascript? I'm guessing that given that you're here, you have _heard_ of javascript (JS), and have _some_ motivation to learn how to use it. But that doesn't mean that you know what it _is_. JS is a _programming language_, which—mainly by luck&mdashbecame the default programing language of web browsers. It's got a bit of a [dodgy history](https://en.wikipedia.org/wiki/JavaScript#History), and it had [a lot of detractors](https://github.com/denysdovhan/wtfjs/blob/master/README.md), but it's become a pretty [popular](https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-programming-scripting-and-markup-languages) now. If you click something on a website, and something other than a full page-reload happens, the odds are that some javascript made that happen. The level of knowledge needed to make that kind of thing happen is for another day, but this page is about getting the basics into your brain so that you're ready to do more interesting things another day. ## What is a _notebook_? This webpage [waves arms at the screen] is a notebook. It isn't like a normal website, it's not just _showing_ you code, it's running it too. When you change the symbols on the screen, those changes recalculate and the outcomes change too. The bit in grey boxes are input cells. You can click these and change them. The text just above, usually in this nice teal is the result of running that cell. There are some [excellent tutorials about how to use notebooks here](https://observablehq.com/tutorials) so you could stop here and watch the first couple, or you can just muddle along and you'll get it soon enough. In other programming _environments_ there's a lot of _boilerplate_ needed to get going. Boilerplate is a term that means "_code that doesn't really do anything, but you need to put in anyway, don't ask why, just remember it_", and it sucks when you're first learning to code. One of the nice things about a notebook is that it shows the results of the things we do without needing to do any other things, for example:`48:T5cd,That might look simple, but there's a LOT going on there. Let's unpack it a bit. Words in this pinky colour are keywords, or reserved words. They are used by JS and we can't use them to name anything else. They say to the language "pay attention, something specific is coming up here". function is telling the language that what's coming up a going to be a function, and to start understanding the pattern of things coming up. theNameOfTheFunction is the name of the function. This is used as a way to _call_ the function in future. You should spend a bit of time coming up with good names for your functions because they're the interface for YOUR mind to use. The variable names in brackets `(argument1, argument2)` are the _arguments_. These are placeholders for real values that you'll give the function later on. The _block_ of code inside the `{}` is the _body_ of the function. That's the code that's doing the work. lastly, return gives us the result back. You don't need a return, but if you don't have one you won't get anything back. People often forget this step when they're learning and wonder why they are getting back `undefined` instead of something useful. So we've defined a function, how do we use it? Or in programming speak, how do we _call_ it?49:[{"id":"8583a5fc7bd2ea0769fa8871a1b89c5a2258458f34574b7938b1809f65914ddb115b6965073dca589ea76f9d3ede808f18018dbd92943cfe06577d2cd9688fdf","href":"https://static.observableusercontent.com/files/8583a5fc7bd2ea0769fa8871a1b89c5a2258458f34574b7938b1809f65914ddb115b6965073dca589ea76f9d3ede808f18018dbd92943cfe06577d2cd9688fdf","name":"image@1.png","type":"image/png","lastModified":1712432665093.908,"size":193918},{"id":"1ee80053b31f47a2a608930230fe7f72a5b9c168ed538024e03e755bfa72ece55c9fdbf8f73822eb4cf749a2da9e7342709d5f92a443f63423aa92bcaf79ffcd","href":"https://static.observableusercontent.com/files/1ee80053b31f47a2a608930230fe7f72a5b9c168ed538024e03e755bfa72ece55c9fdbf8f73822eb4cf749a2da9e7342709d5f92a443f63423aa92bcaf79ffcd","name":"image.png","type":"image/png","lastModified":1712432665093.908,"size":475018}] 45:{"id":"e8dd8ee12fcefb4b","slug":"halp-i-dont-know-any-javascript-at-all","title":"HALP, I don't know any javascript at all 🔰🆘","thumbnail":"a6eb7b8d386053a3ea1bd52814bfd83c93df6ccd1cd03b8bd6d54ec4853ff1a2","access_level":"public","create_time":"$D2024-04-06T19:44:25.093Z","update_time":"$D2024-04-06T19:55:20.649Z","view_time":null,"first_public_time":"$D2024-04-06T19:44:25.093Z","has_unpublished_edits":null,"fork":{"id":"d551ce0e4956b6e0","slug":"halp-i-dont-jnow-any-javascript-at-all","title":"HALP, I don't know any javascript at all 🔰🆘😺","owner":{"id":"87ed458e5c9c1a1f","login":"notionparallax","name":"Ben"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6d3bbae82acc2d78","login":"martin12333","name":"Martin Milan","avatar_url":"https://avatars-next.observableusercontent.com/c7304c0d899196f1b61b2b1a83be600a6aac516768e86aed9ab1dd095612ca83","tier":"starter_2024","bio":"","following":false},"version":368,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c1cfd494ec60e2b3","login":"martin12333","name":"Martin Milan","avatar_url":"https://avatars-next.observableusercontent.com/c7304c0d899196f1b61b2b1a83be600a6aac516768e86aed9ab1dd095612ca83","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"6d3bbae82acc2d78","login":"martin12333","name":"Martin Milan","avatar_url":"https://avatars-next.observableusercontent.com/c7304c0d899196f1b61b2b1a83be600a6aac516768e86aed9ab1dd095612ca83","tier":"starter_2024","role":"editor"},{"type":"individual","id":"c1cfd494ec60e2b3","login":"martin12333","name":"Martin Milan","avatar_url":"https://avatars-next.observableusercontent.com/c7304c0d899196f1b61b2b1a83be600a6aac516768e86aed9ab1dd095612ca83","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"HALP, I don't know any javascript at all 🔰🆘","cells":[{"id":334,"value":"# HALP, I don't know any javascript at all 🔰🆘\n\nMartin: this notebook is a fork of the original [HALP, I don't know any javascript at all ](https://observablehq.com/@notionparallax/halp-i-dont-jnow-any-javascript-at-all)\n\nall the cells have been selected, and then opened and pinned (their **code** part is shown) \n\nresults are always **above** the code (HTML, Markdown, JS)\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"35 + 7","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`\\`35 + 7\\` is a _statement_, the notebook shows us the result of the statement above the cell. The statement _evaluates_ to a _number_. \n\nFor some reason these notebooks show the result above the statement that generates them, which isn't how we're used to reading. Usually the result is below, but you will get used to it eventually. You might be more accustomed to seeing it written as: 35 + 7 = 42 but most things you'd be doing in a notebook aren't this small. Often we'll be making very big, very cool graphs or maps. \n\nThis statement doesn't _mean_ anything, it's just adding one number to another and giving us a result. we can also work with words:`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"\"Hello, world!\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`That's a statement too, but this time we're making a _string_. The idea that 12.7 is a _number_ is pretty easy, but why _string_? As far as I know, it's becasue it's a string of _char_s (characters). It's basically text, and is anything at all, wrapped by quotes, so \\`\"hello\"\\` or \\`\"!!!\"\\` or \\`\"75\"\\`. \n\n_Note_: That last one isn't a number, it's the character seven and the character 5, sitting next to each other, not the number for 15×5. That might trip you up one day, so keep an eye out for it.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"myName = \"Ben\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`If I want to store a value so that I can use it later, I can use a _variable_. in this case, the _variable name_ is \\`myName\\` and it now has the _value_ \\`\"Ben\"\\`. It has that value because we _assigned_ it. \n\nThe value on the right of the \\`=\\` is assigned to the variable name on the left.\n\nThere are a couple of rules about variable naming:\n1. It can't start with a number\n1. No spaces inside it\n1. other stuff that's complicated and we'll get to another day.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"myEuroShoeSize = 4 * (10 + 1) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`The european shoe size number is clearly the best, but like an old English person, I can't possibly express it simply. Luckily, the computer has no problems with that. It _evaluates_ the _expression_ on the right of the \\`=\\` and _assigns_ it to the variable.\n\n

JS follows the [BODMAS](https://www.mathsisfun.com/operation-order-bodmas.html) rules of operator precedence. Unlike boomers who use facebook.\n\n---\n\nThere's a newish feature in JS called template strings. Most beginner courses don't teach it, but I think it's super useful.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"`My name is ${myName} and my shoes are size ${myEuroShoeSize}, which is the only way to measure feet.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md`Regular strings are wrapped in \"\" quotes, but template strings are wrapped in `` backticks. That's this key:`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`\n

A large print keyboard from [visionaustralia](https://shop.visionaustralia.org/shop/product/es0202)

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`Then you can put little bits of regular JS inside \\`$\\{some js\\}\\` sections and it'll show up inside your string output.\n\n---\n \nSo far, we've seen two _types_ of data, numbers and strings. The third you might see is a _boolean_. These can be true or false, and show up like this:`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"4 > 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"0 == (10 - 5 - 5) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`The statement that four is more than five is \\`false\\`. It's \\`true\\` that the result of \\`10 - 5 - 5\\` is the same as zero.\n\nThere are lots of _comparisons_ ( < > ==)and _logical operations_ AND, NOT, etc. but we'll get to them later.\n\nTask: Make that comparison be different, but still balance out to _true_\n\n---\n\nIt's all very well having a thing, but sooner or later you'll want lots of things. JS gives us two main ways to tidy up. We can have _lists_ and _objects_. This is a list:`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"myList = [1,2,4, myName, myEuroShoeSize, \"hello\", false, \"...one last thing\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`Lists are wrapped in [] square brackets, or staples $\"some$ \n\nThey can have any number of things in them, including zero:`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"[]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`This is called an empty list, and shows up a lot more than you'd expect`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md` $\"a$ Lists are the easiest way to put something into a _collection_, but the easiest way to get it our again is to use an object. Objects use _key_:_value_ pairs. They're wrapped in _curley braces_, or crab claws `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"myObject = ({animalType:\"dog\", petName:\"Patch\", isGood:true, legs:4})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"md`Task: play with this to make it be your pet, or name the crab.\n\n_Note: the round-brackets are an Observable thing, not a JS thing, just go with it for now and we'll come back to it later._\n\nWe've put things into a list and an object, but how do we get things back out again? For this we need to use the _index_ of the thing we want to get out. Like this:`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"myList[3]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"The _definition_ of that list is off the screen now, so to jog our memory `myList` is: `${myList.join(\", \")}`\n\nor maybe a bit clearer:\n\n\n| 0| 1| 2| 3| 4| 5| 6| 7|\n|--|--|--|--|--|--|--|--| \n|`${myList.join(\"|\")}`|","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"myList[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"`0` what?! For reasons that are too complicated to go into now, lists in almost all programing languages start counting at zero.\n\nAgain, to jog our memory: `${JSON.stringify(myObject)}`\n\nTo get something (a _value_) out of an object, we need to use its _key_:","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"myObject[\"animalType\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md`You can also get fancy and nest things. This example is pretty silly, but things _like_ this come up much more often than you'd expect.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"myList[myObject[\"legs\"]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"md`Task: see if you can work out why that works.\n\n---\n\nThe last type of thing we're going to see today is a _function_. I'll talk a lot more about these later, but they're basically a lump of code that represents an idea.`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"function greet(name){\n return `Hello ${name}`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"greet(\"Kermit the Frog\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md`They save us typing the same code over and over, and they keep ideas together. Making functions is _a good thing to do_™.\n\n---\n\nJS uses a _lot_ of functions, for example:`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"myList.map(greet)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md`\\`map\\` applies a function to each of the values in a list, and gives you back a list of the transformed values. Again, this is a pretty silly example but it allows for some super powerful things, like all the websites you see on the internet!\n\n(Well, not map specifically, but people using JS)\n\nThat's a lot for today, slurp it up, and then stop. or you'll burn out your brain. If you have questions you can ask them in the #programming channel on slack. I'll make more of these notebooks to explain the answers to your questions.\n\n![](https://i.pinimg.com/originals/df/1a/ff/df1aff8395678d11b99b575f0e3b19d5.gif)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"# The anatomy of functions\n\nWe talked about functions at the end of the previous session, but I left so much unsaid.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"function theNameOfTheFunction(argument1, argument2){\n const result = argument1 + argument2\n return result\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"$48","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"theNameOfTheFunction(10, 15)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"Like wizards casting spells in books, you need to use the name of the ~~spell~~ function to get it to work. You need to _pass_ in some arguments too. In this case, we're passing `10` and `15` as the arguments, so we get back `25`. (Or in programmer speak, \"the function returns `25`\")\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 46:"$45:body"