2f:[{"id":"edfcd83519b042922c517bc17529e6a6be78401062d64ce07d99ae4dadfc178e3b2b811aa118d020544908db6a9c759a5ac96b472e99ce78c0b253571707b9ba","href":"https://static.observableusercontent.com/files/edfcd83519b042922c517bc17529e6a6be78401062d64ce07d99ae4dadfc178e3b2b811aa118d020544908db6a9c759a5ac96b472e99ce78c0b253571707b9ba","name":"image.png","type":"image/png","lastModified":1682064037466.197,"size":31156}] 2d:{"title":"Functional JavaScript for beginners: building a QR code generator","cells":[{"id":0,"value":"# Functional JavaScript for beginners: building a QR code generator\n","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"## Variables and basic types: `number`, `string`, `boolean`","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"num = 42","pinned":true,"hidden":false,"mode":"ojs"},{"id":1410,"value":"pi = 3.14159","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"// This line is a JavaScript comment!\n\n// In this notebook, you can use the checkType function to see the type of a variable\n// here, we see that num has the number type\ncheckType(num)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1412,"value":"checkType(pi)","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"str = 'hello, world!'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1406,"value":"str2 = \"double quotes!\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":940,"value":"_**Tip:** JavaScript strings can be enclosed in `'single quotes'` or `\"double quotes\"`, but you have to use the straight versions — curly versions `“” ‘’` won’t work, so watch out if you’re in Chinese input mode!_","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"checkType(str)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1408,"value":"checkType(str2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"// booleans can have one of two values - true or false\n// you can also think of them as meaning \"on\" or \"off\", \"yes\" or \"no\", 1 or 0 in binary, etc.\nbool = true","pinned":true,"hidden":false,"mode":"ojs"},{"id":952,"value":"bool2 = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"checkType(bool)","pinned":true,"hidden":false,"mode":"ojs"},{"id":954,"value":"checkType(bool2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1398,"value":"### Exercise : assign simple variables\n\nIn JS, `null` is one way of representing an empty value. Change the `null` values to values of the correct type to make the tests pass.","pinned":false,"hidden":false,"mode":"md"},{"id":1415,"value":"myString = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":1424,"value":"expectEqual(checkType(myString), \"string\", \"myString should be a string\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1417,"value":"myBoolean = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":1428,"value":"expectEqual(checkType(myBoolean), \"boolean\", \"myBoolean should be a boolean\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1419,"value":"myNumber = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":1430,"value":"expectEqual(checkType(myNumber), \"number\", \"myNumber should be a number\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"## Complex types: `Array`, `Object`","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"arr = [num, str, bool]","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"checkType(arr)","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"// in Observable, we need to wrap objects in parentheses ()\n// in plain JavaScript, we could write this as obj = { num, str, bool, otherProperty: 'foo' }\nobj = (\n { num, str, bool, otherProperty: 'foo' }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"checkType(obj)","pinned":true,"hidden":false,"mode":"ojs"},{"id":704,"value":"### Note: variable names\n\nA variable can be named however you like, as long as it:\n* Isn't a reserved keyword in JavaScript\n* Starts with a letter, `$`, or `_`\n* Contains only letters, numbers, `$`, and `_`\n\nFor example:\n* ✅ `myVar`\n* ✅ `var1`\n* ✅ `$hello`\n* ✅ `_underscore`\n* ✅ `变量` (Unicode “letters” are OK too)\n* ❌ `var` (is a reserved keyword)\n* ❌ `1var` (starts with number)\n* ❌ `var💩` (contains emoji)\n* ❌ `hyphen-var` (contains hyphen)\n* ❌ `has space` (contains space)\n* ❌ `has.dot` (this accesses the `dot` property on the `has` variable, so it can’t be a variable name itself)","pinned":false,"hidden":false,"mode":"md"},{"id":1439,"value":"### Exercise : fix the errors","pinned":false,"hidden":false,"mode":"md"},{"id":1442,"value":"myArray = [1, 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1444,"value":"my-variable-name = 'xyz'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1448,"value":"var = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":1489,"value":"helloWorldStr = “hello, world!”","pinned":true,"hidden":false,"mode":"ojs"},{"id":1473,"value":"## Expressions and math","pinned":false,"hidden":false,"mode":"md"},{"id":1497,"value":"* Add: `1 + 1`\n* Subtract: `1 - 1`\n* Multiply: `1 * 1`\n* Divide: `1 / 1`","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"1 + 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":1637,"value":"We can use a variable we assigned earlier! As `num` is set to `${num}`, `num + 1` will be `${num + 1}`!","pinned":false,"hidden":false,"mode":"md"},{"id":1463,"value":"num","pinned":true,"hidden":false,"mode":"ojs"},{"id":1466,"value":"num + 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":1478,"value":"num + 1 * 2 - 3 / 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":690,"value":"## Functions","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"function addOne(num) {\n return num + 1\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"addOne(5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1469,"value":"addOne(num)","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"// functions are also a type of value in JavaScript!\ncheckType(addOne)","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"### Exercise : double a number\n\n Write a function that doubles a number","pinned":false,"hidden":false,"mode":"md"},{"id":150,"value":"// check the addOne function above if you get stuck!\n\nfunction double(num) {\n return -1\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"expectEqual(double(1), 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"expectEqual(double(2), 4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"expectEqual(double(42), 84)","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"## Functions with multiple arguments","pinned":false,"hidden":false,"mode":"md"},{"id":279,"value":"function addTwoNumbers(num1, num2) {\n return num1 + num2\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"addTwoNumbers(999, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"### Exercise : multiply two numbers\n\nWrite a function that multiplies two numbers. ","pinned":false,"hidden":false,"mode":"md"},{"id":272,"value":"// Remember to add the names of the arguments between the parentheses!\n// You can name your arguments with any name you like, using the same rules as for variables above.\n// For example: function multiply(num1, num2)\n// Or: function multiply(a, b)\n\nfunction multiply() {\n return -1\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"expectEqual(multiply(2, 5), 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"expectEqual(multiply(12, 12), 144)","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"expectEqual(multiply(3, -2), -6)","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"## Checking equality","pinned":false,"hidden":false,"mode":"md"},{"id":925,"value":"Checking two values for equality in JavaScript results in a `boolean` (`true` or `false`):","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"// is 1 greater than 0? true!\n1 > 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"// is 0 less than 1? true!\n0 < 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"// 1 is equal to itself\n// we use === to check equality\n1 === 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"// 1 is not equal to 0, so this is false\n1 === 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"## Conditional statements with the ternary `? :` operator","pinned":false,"hidden":false,"mode":"md"},{"id":813,"value":"Format of ternary conditional statements:\n\n```js\ncondition ? valueIfTrue : valueIfFalse\n```\n\nOr (on multiple lines):\n\n```js\ncondition\n ? valueIfTrue\n : valueIfFalse\n```\n\nFor example:\n\n```js\ntrue\n ? '🦄 this one'\n : 'not this one'\n\nfalse\n ? 'not this one'\n : '🦄 this one'\n\n1 === 1\n ? '🦄 this one'\n : 'not this one'\n\n0 === 1\n ? 'not this one'\n : '🦄 this one'\n```\n\nOr, a slightly more realistic example:","pinned":false,"hidden":false,"mode":"md"},{"id":1604,"value":"viewof userAge = Inputs.number([0], { label: 'userAge', value: 10 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1606,"value":"message = userAge < 18\n ? 'Sorry, you’re not allowed to drink here ⛔'\n : 'Here’s your beer! 🍺'","pinned":true,"hidden":false,"mode":"ojs"},{"id":861,"value":"### `let` and variable declaration/assignment\n\nThere are a few ways to declare (give a name to a new variable) and assign (give it a value) in JavaScript, but on Observable, we just need to remember 2 rules for now:\n\n* Outside of functions, we always use _bare assignment_ (`varName = value`)\n* Within a function, we always use `let` (`let varName = value`)\n\nAs you can see in the `getRandomMessage` function below, we’ve used `let` to declare the variables `randomNumber` and `message`.","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"function getRandomMessage() {\n // this gives a number between 0 and 1 with 2 decimal places\n let randomNumber = Number(Math.random().toFixed(2))\n\n // here's the ternary conditional statement...\n let message = randomNumber > 0.5\n ? '💥 Sorry, too random!'\n : '💩 Sorry, not random enough!'\n\n return { randomNumber, message }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":867,"value":"html`\nResults:\n\n${md`\\`\\`\\`json\n${msg}\n\\`\\`\\``}\n\n

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"### Exercise : convert booleans to strings\n\n Write a function that converts a `boolean` into the string \"on\" (if it's `true`) or \"off\" (if it's `false`)","pinned":false,"hidden":false,"mode":"md"},{"id":205,"value":"function booleanToString(bool) {\n // use a ternary conditional statement, for example:\n // return condition\n // ? 'value if true'\n // : 'value if false'\n // tip 1: remember you can use triple-equals === for checking equality!\n // tip 2: `bool` is already a boolean, so maybe you can use that directly?\n\n return 'to do!'\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"expectEqual(booleanToString(true), 'on')","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"expectEqual(booleanToString(false), 'off')","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"## Array methods: `map` and `join`","pinned":false,"hidden":false,"mode":"md"},{"id":106,"value":"numArr = [1, 2, 3]","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"doubledArr = numArr.map(double)","pinned":true,"hidden":false,"mode":"ojs"},{"id":985,"value":"expectEqual(doubledArr, [2, 4, 6])","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"strBools = [true, false, true].map(booleanToString)","pinned":true,"hidden":false,"mode":"ojs"},{"id":981,"value":"expectEqual(strBools, ['on', 'off', 'on'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"arr.join(' // ')","pinned":true,"hidden":false,"mode":"ojs"},{"id":363,"value":"numArr.map(double).join(' // ')","pinned":true,"hidden":false,"mode":"ojs"},{"id":716,"value":"// '' is an empty string, so we join the array's items directly to each other, with no spaces\narr.join('')","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"## 2-dimensional arrays","pinned":false,"hidden":false,"mode":"md"},{"id":266,"value":"arr2d = [\n [1, 2, 3],\n [4, 5, 6],\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"mappedArr2d = arr2d.map(function doubleAllCells(row) {\n return row.map(double)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":891,"value":"function doubleAllCells(row) {\n return row.map(double)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":889,"value":"mappedArr2dVersion2 = arr2d.map(doubleAllCells)","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"// this will automatically pass once the `double` function is fixed\nexpectEqual(mappedArr2d, [[2, 4, 6], [8, 10, 12]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":895,"value":"expectEqual(mappedArr2dVersion2, [[2, 4, 6], [8, 10, 12]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"## QR code generation!","pinned":false,"hidden":false,"mode":"md"},{"id":933,"value":"`qr(...)` is a function from an external _code library_ that we’ve imported to help us. It converts text (such as a website URL) into a 2D array of booleans, representing the rows and cells of a QR code.\n\nFor example:\n\n```js\n[\n [true, false, true],\n [false, true, false],\n [true, false, true],\n]\n```\n\nWould represent the following rows and cells:\n\n

\n \n \n \n

","pinned":false,"hidden":false,"mode":"md"},{"id":1004,"value":"viewof example = Inputs.text({ value: 'https://example.com', label: 'Example' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"// click the arrow above to see the individual rows and cells of the output\nexampleQr = qr(example)","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"checkType(exampleQr)","pinned":true,"hidden":false,"mode":"ojs"},{"id":756,"value":"We can get a particular item from an array by writing `arr[num]`, where `num` is a number starting from 0. For example, `arr[0]` gets the first item, `arr[1]` gets the second, and so on.","pinned":false,"hidden":false,"mode":"md"},{"id":350,"value":"exampleQr[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":761,"value":"checkType(exampleQr[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":766,"value":"We can chain these array accesses together to get (for example) the first item of the first item of a 2D array:","pinned":false,"hidden":false,"mode":"md"},{"id":764,"value":"exampleQr[0][0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"checkType(exampleQr[0][0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1010,"value":"### Rendering a QR code\n\nLet’s render (display) our example QR code by mapping all those booleans to either a dark block `'▓▓▓'` or a light block `' '`","pinned":false,"hidden":false,"mode":"md"},{"id":318,"value":"function toBlock(bool) {\n // block drawing characters\n\n return bool ? '▓▓▓' : ' '\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"function renderBlocks(qrCode) {\n // note: '\\n' is the new-line character\n // for example, printing 'hello\\nworld' will print 'hello' on 1 line, then 'world' on the next line\n // so joining with '\\n' means we print each row on its own line\n \n return qrCode.map(function(row) {\n return row.map(toBlock).join('')\n }).join('\\n')\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"html`

${renderBlocks(exampleQr)}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"### Exercise : convert booleans to emojis\n\n Write a function that converts a `boolean` into the corresponding emoji below.","pinned":false,"hidden":false,"mode":"md"},{"id":334,"value":"emojiTrue = '🈵'","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"emojiFalse = '⬜'","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"function toEmoji(bool) {\n // use the booleanToString and toBlock functions above as a reference\n\n return 'to do!'\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":783,"value":"expectEqual(toEmoji(true), emojiTrue)","pinned":true,"hidden":false,"mode":"ojs"},{"id":787,"value":"expectEqual(toEmoji(false), emojiFalse)","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"### Exercise : render QR code as emojis\n\n Write a function that renders a QR code (2d array of booleans) as emojis","pinned":false,"hidden":false,"mode":"md"},{"id":367,"value":"function renderEmojis(qrCode) {\n // use renderBlocks function above as a reference\n\n return 'to do!'\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"expectEqual(renderEmojis(exampleQr), exampleAnswer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":376,"value":"html`

${renderEmojis(exampleQr)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"## HTML","pinned":false,"hidden":false,"mode":"md"},{"id":504,"value":"HTML (**H**yper**T**ext **M**arkup **L**anguage) is the basic technology used to display content on a webpage. HTML consists of _elements_, and each element typically has this structure:\n\n $\"Structure$ \n\nNote:\n* The start and end tags always use angle brackets `<>`, a.k.a. less-than `<` and greater-than `>` signs.\n* The end tag always has a forward-slash `/` after the less-than sign — this indicates “closing” the element.\n* The attribute name and value is separated with an equals sign `=`, and the value is wrapped in straight quotation marks `\"\"`.\n\nAttributes and content are optional, and each element can have 0-to-many attribute name-value pairs, so any of the following are valid HTML:\n\n```html\n

Hello, world!

\n...etc.\n```","pinned":false,"hidden":false,"mode":"md"},{"id":721,"value":"

This is a paragraph.

","pinned":true,"hidden":false,"mode":"html"},{"id":531,"value":"HTML elements can be **nested** inside each other like this:\n\n```\n

\n \n

\n```\n\nHere, we can say that `span` is a “child” of `div`, and `div` is a “parent” of `span`.\n\nThe `div` and `span` elements are just some generic HTML elements, which don’t do much on their own, but we’ll be using some styled versions of these elements later on as our building blocks for our QR code.","pinned":false,"hidden":false,"mode":"md"},{"id":498,"value":"### HTML inside JavaScript\n\nOn Observable, we can “magically” switch our JS code into HTML mode using `` html`...` `` (this is enabled by a special library that Observable notebooks use).\n\nFor example, writing this in JavaScript:","pinned":false,"hidden":false,"mode":"md"},{"id":495,"value":"html`

\n Hello, world!\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":792,"value":"...is exactly the same as writing this in HTML:","pinned":false,"hidden":false,"mode":"md"},{"id":727,"value":"

\n Hello, world!\n

","pinned":true,"hidden":false,"mode":"html"},{"id":1024,"value":"#### Note: typing backticks ``` `` ```\n\nThose ``` `` ``` marks are called backticks, and they’re different from both straight (`'`) and curly (`‘’`) single-quotes. If your keyboard uses the default Chinese or US layout, you can find the backtick key at the top-left, just under Esc:\n\n![image.png](${await FileAttachment(\"image.png\").url()})\n\nMore info: [How do I type the tick and backtick characters on Windows?](https://superuser.com/questions/254077/how-do-i-type-the-tick-and-backtick-characters-on-windows)","pinned":false,"hidden":false,"mode":"md"},{"id":1066,"value":"### Excercise : Write a HTML paragraph element in JS\n\nWrite a HTML paragraph (`

`) element between the backticks in JS. The paragraph should have 2 child elements (e.g. `bold text` and `italic text`). Give your `p` element a `class` attribute of `pink-background`. Look above for examples if you get stuck!","pinned":false,"hidden":false,"mode":"md"},{"id":1074,"value":"htmlParagraph = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1076,"value":"expect(htmlParagraph?.innerHTML?.trim().length, 'HTML shouldn’t be empty')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"expect(html`