31:[] 2f:{"title":"Chapter 2: Simple programs","cells":[{"id":6557,"value":"chapterTitle(chapterIndex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6572,"value":"chapterProgress(chapterIndex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6585,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7269,"value":"We learned a lot of basics in the last chapter. Now, we focus on manipulating data of different types. This is essential to building even simple programs.","pinned":false,"hidden":false,"mode":"md"},{"id":6577,"value":"toc = getToc(chapterIndex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":806,"value":"## Moving between types","pinned":false,"hidden":false,"mode":"md"},{"id":801,"value":"Let’s do something with data of different _types_. What should the following programs return?","pinned":false,"hidden":false,"mode":"md"},{"id":771,"value":"1 + 2 // Clearly sum of two numbers","pinned":true,"hidden":false,"mode":"ojs"},{"id":776,"value":"\"A\" + \"B\" // Clearly combination of two strings","pinned":true,"hidden":false,"mode":"ojs"},{"id":769,"value":"1 + \"2\" // Join a number and a piece of text?","pinned":true,"hidden":false,"mode":"ojs"},{"id":759,"value":"The operator `+` has a different meaning with numbers and strings. In the last example, the _number_ `1` is actually automatically turned into the _string_ `\"1\"` under the hood.\n\nFor practical reasons, many languages don’t need you to be totally explicit with data types.","pinned":false,"hidden":false,"mode":"md"},{"id":795,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":810,"value":"Consider a program that gets the _number_ of miles that a car has driven, and uses it to check if the car is new or not:","pinned":false,"hidden":false,"mode":"md"},{"id":1134,"value":"function get_miles_driven () {\n return 200\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1155,"value":"get_miles_driven()","pinned":true,"hidden":false,"mode":"ojs"},{"id":7344,"value":"This expression will return a `true`, which is a _boolean_:","pinned":false,"hidden":false,"mode":"md"},{"id":1159,"value":"get_miles_driven() > 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":1218,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1144,"value":"These two if statements will give you the same result:","pinned":false,"hidden":false,"mode":"md"},{"id":1138,"value":"get_miles_driven() > 0 ? \"Car is used\" : \"Car is new\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1139,"value":"get_miles_driven() ? \"Car is used\" : \"Car is new\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7359,"value":"Logically, an `if` statement is looking for either `true` or `false`.\n\nBut we can actually give it a _number_ as well: if a number is `0`, it is usually considered _falsy_, i.e. \"close enough\" to `false`). Conversely, non-zero numbers and other values, are _truthy_.\n\nSo if the number was `0`, it would be the same as `false` in this context. Since cars cannot drive negative miles, both programs work the same way.","pinned":false,"hidden":false,"mode":"md"},{"id":7259,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1226,"value":"These types of \"shortcuts\" are quite common and you will get adjusted to them, as you write more complex programs.","pinned":false,"hidden":false,"mode":"md"},{"id":2710,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6689,"value":"## Working with booleans","pinned":false,"hidden":false,"mode":"md"},{"id":6715,"value":"Let’s see this in practice and write the following program:\n\n> _If a historical person is alive, return green; otherwise return red._","pinned":false,"hidden":false,"mode":"md"},{"id":7166,"value":"viewof is_alive = Inputs.toggle({ label: varLabel(\"is_alive\") })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7168,"value":"is_alive","pinned":true,"hidden":false,"mode":"ojs"},{"id":7173,"value":"is_alive ? \"green\" : \"red\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7177,"value":"Toggle `is_alive` between `true` and `false` to see the output change. The value of `is_alive` controls what happens in the program.","pinned":false,"hidden":false,"mode":"md"},{"id":7091,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7421,"value":"### And, or","pinned":false,"hidden":false,"mode":"md"},{"id":7190,"value":"If we have multiple boolean values, we can check if only some of them, or all of them, are `true` or `false`.","pinned":false,"hidden":false,"mode":"md"},{"id":7196,"value":"viewof is_healthy = Inputs.toggle({ label: varLabel(\"is_healthy\") })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7198,"value":"viewof is_old = Inputs.toggle({ label: varLabel(\"is_old\") })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7199,"value":"is_healthy","pinned":true,"hidden":false,"mode":"ojs"},{"id":7201,"value":"is_old","pinned":true,"hidden":false,"mode":"ojs"},{"id":7206,"value":"is_healthy && is_old // and","pinned":true,"hidden":false,"mode":"ojs"},{"id":7207,"value":"is_healthy || is_old // or","pinned":true,"hidden":false,"mode":"ojs"},{"id":7212,"value":"You might already be familiar with the concept of _and_ and _or_ conditions from logic, or even electrician workshops.","pinned":false,"hidden":false,"mode":"md"},{"id":7187,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7414,"value":"### Bits","pinned":false,"hidden":false,"mode":"md"},{"id":7092,"value":"_Bits_ are boolean values: `0` represents `false`, `1` represents `true`. Because there are only two possible values for each bit, it is called _binary data_.\n\nYou can compose base-2 numbers from bits. For example, we can represent the decimal numbers 0–15 using only four booleans:","pinned":false,"hidden":false,"mode":"md"},{"id":7098,"value":"viewof bits = {\n const inputs = {};\n const l = 4;\n\n for (let i = 0; i < l; ++i) {\n inputs[\"bit\" + i] = Inputs.radio([false, true], {\n label: html`Bit ${i + 1}: 2^${i}`,\n value: false\n });\n }\n\n return Inputs.form(inputs);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7106,"value":"\"Base 2: \" +\n _.values(bits)\n .slice()\n .reverse()\n .map((x) => (x ? 1 : 0))\n .join(\"\") +\n\n` Base 10: ${parseInt(\n _.values(bits)\n .slice()\n .reverse()\n .map((x) => (x ? 1 : 0))\n .join(\"\"),\n 2\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7581,"value":"All data is ultimately stored as bits. The common phrase _ones and zeros_ actually refers to this type of data.","pinned":false,"hidden":false,"mode":"md"},{"id":6692,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6699,"value":"## Working with numbers","pinned":false,"hidden":false,"mode":"md"},{"id":7513,"value":"Whole numbers (often called _integers_) are everywhere. Let's imagine a program dealing with birth years:","pinned":false,"hidden":false,"mode":"md"},{"id":6902,"value":"napoleon_birth_year = 1769","pinned":true,"hidden":false,"mode":"ojs"},{"id":6903,"value":"current_year = new Date().getFullYear()","pinned":true,"hidden":false,"mode":"ojs"},{"id":6899,"value":"With these two _variables_ holding _number values_, we can write a program that does a little bit of math for us:","pinned":false,"hidden":false,"mode":"md"},{"id":6906,"value":"current_year - napoleon_birth_year","pinned":true,"hidden":false,"mode":"ojs"},{"id":6958,"value":"Most modern programming environments can handle much more complex math as well. They will help you in the fields of physics, engineering, chemistry and so on.","pinned":false,"hidden":false,"mode":"md"},{"id":6919,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6921,"value":"Decimal numbers (often called _floating point numbers_, or simply _floats_) are similar but offer more precision:","pinned":false,"hidden":false,"mode":"md"},{"id":6923,"value":"(current_year - napoleon_birth_year) / 1000","pinned":true,"hidden":false,"mode":"ojs"},{"id":6925,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6928,"value":"Percentages are often represented as decimal numbers:","pinned":false,"hidden":false,"mode":"md"},{"id":6931,"value":"tax_rate = 0.24","pinned":true,"hidden":false,"mode":"ojs"},{"id":6932,"value":"price = 17.99","pinned":true,"hidden":false,"mode":"ojs"},{"id":6934,"value":"tax_free_price = price / (1 + tax_rate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6936,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6938,"value":"A daily interest calculator is easy to implement using decimal numbers:","pinned":false,"hidden":false,"mode":"md"},{"id":6948,"value":"viewof capital = Inputs.number({\n label: html`capital =`,\n value: 1000\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6945,"value":"interest_rate = 0.0288","pinned":true,"hidden":false,"mode":"ojs"},{"id":6946,"value":"daily_interest_rate = interest_rate / 365","pinned":true,"hidden":false,"mode":"ojs"},{"id":6950,"value":"daily_interest = capital * daily_interest_rate","pinned":true,"hidden":false,"mode":"ojs"},{"id":6953,"value":"capital + daily_interest","pinned":true,"hidden":false,"mode":"ojs"},{"id":6697,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6980,"value":"Numbers are often used to represent other, more complex types of data. For example, _date_ and _time_:","pinned":false,"hidden":false,"mode":"md"},{"id":6981,"value":"Date.now()","pinned":true,"hidden":false,"mode":"ojs"},{"id":6995,"value":"The number above marks the _number of milliseconds since 00:00:00 on January 1, 1970_. This Unix time is a common way to represent time in programming.","pinned":false,"hidden":false,"mode":"md"},{"id":6978,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6972,"value":"_Colors_ can be represented as mix of red, green and blue. Knowing this, we can implement a colour picker:","pinned":false,"hidden":false,"mode":"md"},{"id":7003,"value":"viewof r = Inputs.range([0, 256], { label: varLabel(\"r\"), step: 1, value: 20 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7005,"value":"viewof g = Inputs.range([0, 256], { label: varLabel(\"g\"), step: 1, value: 80 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7007,"value":"viewof b = Inputs.range([0, 256], {\n label: varLabel(\"b\"),\n step: 1,\n value: 120\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7024,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7015,"value":"[r, g, b]","pinned":true,"hidden":false,"mode":"ojs"},{"id":7053,"value":"Using _RGB values_ like this is very common when programming _user interfaces_.","pinned":false,"hidden":false,"mode":"md"},{"id":7001,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6695,"value":"## Working with strings","pinned":false,"hidden":false,"mode":"md"},{"id":6717,"value":"In chapter 1, we learned to combine strings:","pinned":false,"hidden":false,"mode":"md"},{"id":7227,"value":"first_name = \"Napoleon\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7229,"value":"last_name = \"Bonaparte\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7225,"value":"full_name = first_name + \" \" + last_name","pinned":true,"hidden":false,"mode":"ojs"},{"id":6710,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7240,"value":"When writing useful programs, you often have to manipulate strings in many ways. We can count the number of characters they have:","pinned":false,"hidden":false,"mode":"md"},{"id":7244,"value":"full_name.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":7246,"value":"We can find the position of a particular character:","pinned":false,"hidden":false,"mode":"md"},{"id":7249,"value":"full_name.indexOf(\"B\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":7449,"value":"We can replace characters:","pinned":false,"hidden":false,"mode":"md"},{"id":7445,"value":"full_name.replaceAll(\"a\", \"Σ\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":7457,"value":"We can manipulate casing:","pinned":false,"hidden":false,"mode":"md"},{"id":7453,"value":"full_name.toUpperCase()","pinned":true,"hidden":false,"mode":"ojs"},{"id":7464,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":7465,"value":"With these skills, we could write a simple program that makes our name safe to use in a _URL_:","pinned":false,"hidden":false,"mode":"md"},{"id":7468,"value":"\"https://aliveordead.com/\" + full_name.toLowerCase().replaceAll(\" \", \"-\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6687,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2993,"value":"## Working with lists","pinned":false,"hidden":false,"mode":"md"},{"id":3006,"value":"Manipulating lists is extremely common in any program. Remember that lists are called _arrays_ in JavaScript.\n\nWhat could you do with these lists?","pinned":false,"hidden":false,"mode":"md"},{"id":3010,"value":"numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3028,"value":"letters = [\"a\", \"b\", \"c\", \"d\", \"e\", \"f\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3034,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3085,"value":"We can measure how many items are in a list:","pinned":false,"hidden":false,"mode":"md"},{"id":3087,"value":"numbers.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":3089,"value":"letters.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":6732,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6733,"value":"We can pick a list item in a given _index_:","pinned":false,"hidden":false,"mode":"md"},{"id":6735,"value":"letters[1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":6737,"value":"We talked about indices earlier. Remember that they start from `0`, not `1`.","pinned":false,"hidden":false,"mode":"md"},{"id":3124,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3209,"value":"We can combine multiple lists:","pinned":false,"hidden":false,"mode":"md"},{"id":6793,"value":"[...numbers, ...letters]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3083,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3043,"value":"We can reverse a list:","pinned":false,"hidden":false,"mode":"md"},{"id":3044,"value":"_.reverse([...numbers])","pinned":true,"hidden":false,"mode":"ojs"},{"id":3155,"value":"note(\n md`**This looks weird.** On this page, we do not want to alter the original \\`numbers\\` and \\`letters\\` lists. We want every piece of code to return a new version of the list.\n\nIn JavaScript, the \\`reverse\\` function alters the original list. If we don’t want this to happen, we have to make a new list that the function will modify.\n\nMany consider this a design flaw – which all programming languages have.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3061,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3057,"value":"We can make the list shorter:","pinned":false,"hidden":false,"mode":"md"},{"id":3069,"value":"_.slice(letters, 0, 2) // Picks 2 values, starting from the 0th position","pinned":true,"hidden":false,"mode":"ojs"},{"id":3103,"value":"_.slice(letters, letters.length / 2) // Get latter half of the list","pinned":true,"hidden":false,"mode":"ojs"},{"id":3051,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3014,"value":"We can filter lists. This program keeps any numbers below `5`:","pinned":false,"hidden":false,"mode":"md"},{"id":3020,"value":"function number_filter_condition (number) {\n return number < 5\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3011,"value":"_.filter(numbers, number_filter_condition)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3041,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3128,"value":"We can _map_ list items into new values. This program maps each item into the value incremented by `10`:","pinned":false,"hidden":false,"mode":"md"},{"id":3129,"value":"numbers_plus_ten = _.map(numbers, (num) => num + 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3207,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3121,"value":"We can easily do other things with the values of a list. Getting sum of all numbers in a list:","pinned":false,"hidden":false,"mode":"md"},{"id":3183,"value":"_.sum(numbers)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3186,"value":"_.sum(numbers_plus_ten)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3222,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3190,"value":"`join` _strings_ of a list:","pinned":false,"hidden":false,"mode":"md"},{"id":3193,"value":"letters.join(\" and \")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3119,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3232,"value":"Remember that lists can contain other lists:","pinned":false,"hidden":false,"mode":"md"},{"id":3233,"value":"[numbers, numbers_plus_ten]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3238,"value":"And we can keep using all these different operations to do useful things, like get a list of the sums of each list:","pinned":false,"hidden":false,"mode":"md"},{"id":3243,"value":"_.map([numbers, numbers_plus_ten], _.sum)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6880,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3247,"value":"You can probably see a _pattern_ here. We have a list of numbers from `1` to `9`, which we can repeat to get to the teens, twenties, thirties and so on.\n\nThis could be useful for a program that deals with people’s ages, or perhaps splits conference participants into groups of 10.\n\nHere we manually wrote a piece of code to give us the numbers from `10` to `19`. But if we used a _loop_ to do the same for 20s, 30s and so on, we would have our first useful, [complex program](${chapters[chapterIndex + 1].url}).","pinned":false,"hidden":false,"mode":"md"},{"id":6600,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6601,"value":"chapterFooter(chapterIndex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6605,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6606,"value":"aboutAuthor","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":6592,"value":"chapterIndex = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":2777,"value":"import {\n wip,\n getToc,\n tocCopyButton,\n note,\n bookStyles,\n youtube,\n chapters,\n chapterTitle,\n chapterProgress,\n chapterFooter,\n aboutAuthor,\n style,\n varLabel\n} from \"b20b90ae4c08d3fb\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7684,"value":"tocCopyButton(toc)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7553,"value":"bookStyles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}