num = 42
pi = 3.14159
// This line is a JavaScript comment!
// In this notebook, you can use the checkType function to see the type of a variable
// here, we see that num has the number type
checkType(num)
checkType(pi)
str = 'hello, world!'
str2 = "double quotes!"
checkType(str)
checkType(str2)
// booleans can have one of two values - true or false
// you can also think of them as meaning "on" or "off", "yes" or "no", 1 or 0 in binary, etc.
bool = true
bool2 = false
checkType(bool)
checkType(bool2)
myString = "word"
expectEqual(checkType(myString), "string", "myString should be a string")
myBoolean = false
expectEqual(checkType(myBoolean), "boolean", "myBoolean should be a boolean")
myNumber = 890
expectEqual(checkType(myNumber), "number", "myNumber should be a number")
arr = [num, str, bool]
checkType(arr)
// in Observable, we need to wrap objects in parentheses ()
// in plain JavaScript, we could write this as obj = { num, str, bool, otherProperty: 'foo' }
obj = (
{ num, str, bool, otherProperty: 'foo' }
)
checkType(obj)
myArray = [1, 2]
myVariableName = 'xyz'
truth = false
helloWorldStr = "hello, world!"
1 + 1
num
num + 1
num + 1 * 2 - 3 / 4
function addOne(num) {
return num + 1
}
addOne(5)
addOne(num)
// functions are also a type of value in JavaScript!
checkType(addOne)
// check the addOne function above if you get stuck!
function double(num) {
return num * 2
}
expectEqual(double(1), 2)
expectEqual(double(2), 4)
expectEqual(double(42), 84)
function addTwoNumbers(num1, num2) {
return num1 + num2
}
addTwoNumbers(999, 1)
// Remember to add the names of the arguments between the parentheses!
// You can name your arguments with any name you like, using the same rules as for variables above.
// For example: function multiply(num1, num2)
// Or: function multiply(a, b)
function multiply(a, b) {
return a * b
}
expectEqual(multiply(2, 5), 10)
expectEqual(multiply(12, 12), 144)
expectEqual(multiply(3, -2), -6)
// is 1 greater than 0? true!
1 > 0
// is 0 less than 1? true!
0 < 1
// 1 is equal to itself
// we use === to check equality
1 === 1
// 1 is not equal to 0, so this is false
1 === 0
message = userAge < 18
? 'Sorry, you’re not allowed to drink here ⛔'
: 'Here’s your beer! 🍺'
function getRandomMessage() {
// this gives a number between 0 and 1 with 2 decimal places
let randomNumber = Number(Math.random().toFixed(2))
// here's the ternary conditional statement...
let message = randomNumber > 0.5
? '💥 Sorry, too random!'
: '💩 Sorry, not random enough!'
return { randomNumber, message }
}
function booleanToString(bool) {
// use a ternary conditional statement, for example:
// return condition
// ? 'value if true'
// : 'value if false'
// tip 1: remember you can use triple-equals === for checking equality!
// tip 2: `bool` is already a boolean, so maybe you can use that directly?
return bool === true ? 'true' : 'false';
return 'to do!'
}
expectEqual(booleanToString(true), 'on')
expectEqual(booleanToString(false), 'off')
numArr = [1, 2, 3]
doubledArr = numArr.map(double)
expectEqual(doubledArr, [2, 4, 6])
strBools = [true, false, true].map(booleanToString)
expectEqual(strBools, ['on', 'off', 'on'])
arr.join(' // ')
numArr.map(double).join(' // ')
// '' is an empty string, so we join the array's items directly to each other, with no spaces
arr.join('')
arr2d = [
[1, 2, 3],
[4, 5, 6],
]
mappedArr2d = arr2d.map(function doubleAllCells(row) {
return row.map(double)
})
function doubleAllCells(row) {
return row.map(double)
}
mappedArr2dVersion2 = arr2d.map(doubleAllCells)
// this will automatically pass once the `double` function is fixed
expectEqual(mappedArr2d, [[2, 4, 6], [8, 10, 12]])
expectEqual(mappedArr2dVersion2, [[2, 4, 6], [8, 10, 12]])
// click the arrow above to see the individual rows and cells of the output
exampleQr = qr(example)
checkType(exampleQr)
exampleQr[0]
checkType(exampleQr[0])
exampleQr[0][0]
checkType(exampleQr[0][0])
function toBlock(bool) {
// block drawing characters
return bool ? '▓▓▓' : ' '
}
function renderBlocks(qrCode) {
// note: '\n' is the new-line character
// for example, printing 'hello\nworld' will print 'hello' on 1 line, then 'world' on the next line
// so joining with '\n' means we print each row on its own line
return qrCode.map(function(row) {
return row.map(toBlock).join('')
}).join('\n')
}
html`<pre>${renderBlocks(exampleQr)}</pre>`
emojiTrue = '🈵'
emojiFalse = '⬜'
function toEmoji(bool) {
// use the booleanToString and toBlock functions above as a reference
return 'to do!'
}
expectEqual(toEmoji(true), emojiTrue)
expectEqual(toEmoji(false), emojiFalse)
function renderEmojis(qrCode) {
// use renderBlocks function above as a reference
return 'to do!'
}
expectEqual(renderEmojis(exampleQr), exampleAnswer)
<p class="pink-background">This is a paragraph.</p>
html`<p>
<strong>Hello</strong>, <em>world</em>!
</p>`
<p>
<strong>Hello</strong>, <em>world</em>!
</p>
htmlParagraph = html``
html`<p>
7 + 9 = <strong>${7 + 9}</strong>
</p>`
function row1() {
return html`<div>
<span class="on"></span>
<span class="off"></span>
<span class="on"></span>
</div>`
}
function row2() {
return html`<div>
<span class="off"></span>
<span class="on"></span>
<span class="off"></span>
</div>`
}
html`<div class="qr-code">
${row1()}
${row2()}
${row1()}
</div>`
function toHtmlCell(bool) {
// how can we use conditional ternary statements here?
// hint - consider using any of these formats:
// return bool ? html`to do!` : html`to do!`
// let className = bool ? 'to do!' : 'to do!'
// return html`<span class="${className}"></span>`
// return html`<span class="${bool ? 'to do!' : 'to do!'}"></span>`
// which format seems best? which is most concise? which is easiest to read and understand?
return html`to do!`
}
expectEqual(
toHtmlCell(true),
html`<span class="on"></span>`,
)
expectEqual(
toHtmlCell(false),
html`<span class="off"></span>`,
)
function toHtmlRow(row) {
// this function should make use of toHtmlCell above.
// it should returning an HTML <div></div> element containing the cells for this row.
// remember ${...} for JS code within the HTML
// Also remember to use the array map method!
// row.map(...)
return html`to do!`
}
expectEqual(
toHtmlRow([true, false, true]),
html`
<div>
<span class="on"></span>
<span class="off"></span>
<span class="on"></span>
</div>
`,
)
expectEqual(
toHtmlRow([false, true, true]),
html`
<div>
<span class="off"></span>
<span class="on"></span>
<span class="on"></span>
</div>
`,
)
function renderQrCodeHtml(qrCode) {
// this function should call toHtmlRow above
// you can also use renderBlocks and renderEmojis functions above as a reference
// remember to use map here, too! but this time, you're mapping the rows of the qr code, not the cells of each row
// we'll use a div with a class attribute of "qr-code" as the outer HTML element for the whole QR code.
return html`to do!`
}
expectEqual(
renderQrCodeHtml([[true, false], [false, true]]),
html`
<div class="qr-code">
<div><span class="on"></span><span class="off"></span></div>
<div><span class="off"></span><span class="on"></span></div>
</div>
`,
)
expectEqual(
renderQrCodeHtml([[false, true], [true, true]]),
html`
<div class="qr-code">
<div><span class="off"></span><span class="on"></span></div>
<div><span class="on"></span><span class="on"></span></div>
</div>
`,
)
renderQrCodeHtml(qr(website))
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
