2d:null 2e:["$","title",null,{"children":"April - Pt I - Fundamentals (ResPlat Workshop) | maegul | Observable"}] 33:T583,md` ${topic("Making Things - Variables")} Programming is all about making things, giving them names, and then using them. A common name for these things is **variables** ... because they can be many things, they can vary, which is because we can control what they are and what they're names are. To make things / variables in **Javascript**, we write code as below. The main ingredient is the **equals** (=) sign. --- \`\`\`javascript my_variable = 42 \`\`\` --- **The variable \`\`\`my_variable\`\`\` is now a thing. That thing is the number 42, and we can use it by using the name, which we're in control of, \`\`\`my_variable\`\`\` ** Variables don't have to be numbers, they can also be **characters** or **letters** like "Hello World" or "my name is BB8". In programming, these are called **strings**, because they are kind of like stones tied to a string, in a particular order, like on a necklace. To make **strings**, use quotation marks: --- \`\`\`javascript my_string_variable = "Hello World" // Notice that single quotation marks are also fine my_other_string = 'Errol is my name' // Numbers can also be strings my_number_string = '42' \`\`\` --- ${topic(`Doing Maths`)} Javascript can do many things ... but it can also do basic maths, like adding etc, in the way you would expect. ${ch_js(`my_sum = 8 + 4 // my_sum is 12 my_multiplication = 3 * 4 // my_multiplication is 12 `)} `34:T73f,md` ${topic(`Chunks of Code - Functions!`)} One of the most useful things programming lanugages let us do, is take a small chunk of code, and make it **its own special independent thing, with its own name**. We can then reuse that chunk of code very easily - by calling it by the name we gave it, like with **variables**. These are called **functions**. Let's say we want to do the following: ${ch_js(`coca_cola = 3.50 pizza = 16.30 total = cocal_cola + pizza total `)} And then we want to repeat it. **Instead of typing it all out again, we put this chunk of code into a function**. #### How to make a function ${ch_js(`function myFunction() { //code goes in here }`)} #### How to use a function ${ch_js`myFunction() // Will perform the chunk of code`} #### Making the function give something back Functions are private people. They don't share what they're doing with the outside world in which we use them. The variables they make and use are hidden to any code outside of the function. So, if we want something back from teh function, we have to tell it to share. ${ch_js`function sharing_function(){ var greeting = 'hello world'; // return makes the function share what follows it. // It also stops the function from running return greeting }`} #### Helping the function - providing information - Making Arguments!! Functions can take information, which you specify to be whatever you want, and can then use them, however you have coded the function to do so. ${ch_js`function my_argumentative_function(argument1, argument2){ var big_argument = argument1 + argument2 return big_argument }`}

Notice!!

Within functions, making **variables** requires the special **keyword** *var*. ${ch_js('var myVariable')} This is because **variables** are private in functions. `35:[] 31:{"id":"40a9babf20f18ac8","slug":"april-pt-i-fundamentals-resplat-workshop","title":"April - Pt I - Fundamentals (ResPlat Workshop)","thumbnail":"6172baf9dbb165150ba9e6ad45da98745f6fbeb5a9a7ec2442d642d0b4f7b9d7","access_level":"public","create_time":"$D2018-04-17T00:28:43.246Z","update_time":"$D2018-04-22T05:46:21.750Z","view_time":null,"first_public_time":"$D2018-04-22T14:24:36.800Z","has_unpublished_edits":null,"fork":{"id":"75885c337ea74354","slug":"pt-i-fundamentals-resplat-workshop","title":"Pt I - Fundamentals (ResPlat Workshop)","owner":{"id":"582a897bfa71c421","login":"maegul","name":"maegul"}},"stars":1,"starred":false,"owner":{"type":"team","id":"582a897bfa71c421","login":"maegul","name":"maegul","avatar_url":"https://avatars-next.observableusercontent.com/7c5e31845af2035aa4a8c86acb7900e91c2a4d1789ca552d83278ab76227e151","tier":"starter_2024"},"version":747,"publish_version":747,"role":null,"authored":false,"authors":[{"type":"individual","id":"8e919082e67bc8f5","login":"maegul","name":"Errol Lloyd","avatar_url":"https://avatars-next.observableusercontent.com/7c5e31845af2035aa4a8c86acb7900e91c2a4d1789ca552d83278ab76227e151","tier":null}],"members":[{"type":"individual","id":"8e919082e67bc8f5","login":"maegul","name":"Errol Lloyd","avatar_url":"https://avatars-next.observableusercontent.com/7c5e31845af2035aa4a8c86acb7900e91c2a4d1789ca552d83278ab76227e151","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"April - Pt I - Fundamentals (ResPlat Workshop)","cells":[{"id":0,"value":"md`# April - Pt I - Fundamentals (ResPlat Workshop)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"topic_head(`Observable - Getting Started`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"welcome = md`\nWelcome to the Observable Notebook!\n\nThink of this as the quickest way to make a webpage on the internet ...\n\n... as well as the quickest way to put into your webpage:\n\n* **interactivity**\n\n* **dynamic content and graphics**\n\n* **and easily viewable and shareable code + data + research**\n\n including ${tex`\\LaTeX`} equations:\n\n${tex.block`\\oint_C {E \\cdot d\\ell = - \\frac{d}{{dt}}} \\int_S {B_n dA}`}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"waves_of_red = {\n var i = 0;\n \n if (pause_animation == 'true') return yield svg`\n \n`;\n while (pause_animation == 'false'){\n i = i+0.01\n \n var graph = svg`\n\n`\n \n yield graph\n \n }\n\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"viewof pause_animation = DOM.select(['false', 'true'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"viewof blue = DOM.range(0, 255, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"viewof green = DOM.range(0, 255, 1, 20)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`\n---\n${topic('Cells')}\n**Cells** are blocks of code or content. They're helpful in a few ways as we'll see.\n\n*BUT*, their main purpose is to let you try little things out in separate bits of code, and keep all the parts of your code in separate easy to manage places.\n\n#### How to Use CELLS\n\n* **To Add** - hover the mouse at the bottom of the vertical line on the left\n* **To Type** - click the grey area right of the vertical line\n* **To Run** - hit \"Shift + Enter\"\n* **To Hide the Code & Stop Typing** - hit \"Escape\"\n* **To See Code Again** - click grey area left of vertical line\n* **To Keep Code Always Visible** - click pin symbol when code is visible\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"chall('Cells and Markdown')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md`\nPerform each of the above actions on the cells below\n\n${ext()}\n\nBy copying and pasting the markdown cell at the bottom into a new cell, use [this markdown cheatsheet](/@ajlimbert/github-flavored-markdown-cheatsheet-observable) to experiment with text formatting.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"answer(\"Cells\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"// Below is javascript code\nthis_is_a_cell = true","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"this_is_ALSO_a_cell = true","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md`\nAnd this is markdown.\n\nthis is more stuff im typing\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"md`\n---\n${topic_head(`Javascript Basics`)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"demo()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"// variables | maths | reference (public)\nmy_variable = 42","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"my_variable + 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"my_string = '42'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"// Javascript will add strings by combining them into one string\n\nmy_string+\"10\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"demo()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"function hello(name){\n var greeting = 'Hello ' + name\n \n return greeting\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"hello(\"Virginia\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"md`\n${chall('Functions')}\n\nMake a function that takes some arguments, does some maths with them (addition?), and returns the result \n\n${ext()}\nBuilt into javascript is the \\`\\`Math\\`\\` library. Inside of it are some useful mathematical functions which use as so:\n\n${ch_js`Math.sin()`}\n\nMake a function that takes a number and provides the value of the following equation:\n\n${tex`10\\sin(\\frac{1}{x})`}\n\nCan you make the returned value rounded to the nearest whole number?\n\nCan you make the returned value a string such as \"The value of your function is ...\"?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"md`\n### Math\n* random()\n* sin()\n* ...\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"answer('Maths Functions')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"function our_maths_function(x_argument){\n \n var output = 10 * Math.sin( 1 / x_argument )\n \n return output\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"not_maths = our_maths_function(Math.PI)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"function our_stringy_maths_function(x_argument){\n \n var output = 10 * Math.sin( 1 / x_argument )\n \n return \"The value of our function is \" + output\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"our_stringy_maths_function(10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"md`\n${topic`Chunks of Code in Observable - Code Blocks`}\n\nIn **Observable** there's another way to put chunks of code together.\n\nInstead of making a variable in a cell, put code between two curly brackets, like with a function:\n\n${ch_js`{\n// code goes here, like with a function\nvar my_private_variable = 42\n\n}`}\n\nIf you want to give the private viarables back out to the notebook, you do it just as with a function:\n\n${ch_js`{\n// code goes here, like with a function\nvar my_private_variable = 42\nvar my_private_sum = my_private_variable + 112\n\nreturn my_private_sum\n\n}`}\n\nIf you want to take the variable that the code chunk has just shared with you and make it public so you can refer to it later, you can give the whole code chunk a name:\n\n${ch_js`my_public_sum = {\n// code goes here, like with a function\nvar my_private_variable = 42\nvar my_private_sum = my_private_variable + 112\n\nreturn my_private_sum\n\n}`}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"demo()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"awesome_lyrics = {\n var my_new_thing = \"42 again\"\n \n my_new_thing = my_new_thing + \" oops, I did it again, I played with your heart, got lost in the game\"\n \n \n return my_new_thing\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"awesome_lyrics","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"import {chall, ext, demo, topic, topic_head, ch_js, answer, d3} from \"@maegul/workshoptools\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"