The avatar for @jerryjappinen
Jerry Jäppinen
Design, tech, engineering and science. Head of Design and User Research.
Public
New Programmer’s Handbook
Edited
Apr 10
Fork of Chapter 2: Simple programs
Importers
2 stars
New Programmer’s Handbook
New Programmer’s HandbookChapter 1: LogicChapter 2: Simple programs
Chapter 3: Complex programs
Chapter 4: ServicesChapter 5: LanguagesChapter 6: AIChapter 7: Next stepsSlidesExtras
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
username = _.kebabCase(first_name + last_name)
.toLowerCase()
.replaceAll("-", "")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
username_is_too_long = username.length > 16
Insert cell
username_is_too_long
? "Username '" + username + "' is too long. Please use something shorter."
: "Username is ok."
Insert cell
Inputs.button("Save username", {
disabled: username_is_too_long
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
(n) => !(n % 2) // Remainder after division by 2 must be zero
Insert cell
Insert cell
_.filter([1, 2, 3, 4], (n) => !(n % 2))
Insert cell
Insert cell
Insert cell
_.map([1, 2, 3, 4, 5, 6], (n) => n * 10)
Insert cell
Insert cell
Insert cell
function has_any(list, callback) {
for (const item of list) {
if (callback(item)) {
return true;
}
}
return false;
}
Insert cell
Insert cell
[
has_any([1, 2, 3], (n) => !(n % 2)),
has_any([1, 2, 3], (n) => !(n % 3)),
has_any([1, 2, 3], (n) => !(n % 4))
]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function count_files (folder) {
return folder.length
}
Insert cell
Insert cell
count_files(["file-1", "file-2", "file-3"])
Insert cell
count_files([
"file-1",

// Subfolder
[
"file-2",
"file-3",

// Subfolder of subfolder
["file-4", "file-5", "file-6"]
]
])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function count_all_files(filesAndSubfolders) {
var file_count = 0

for (const item of filesAndSubfolders) {

// File
if (!_.isArray(item)) {
file_count += 1

// Folder
} else {
file_count += count_all_files(item)
}

}

return file_count
}
Insert cell
Insert cell
Insert cell
Insert cell
count_all_files(main_folder)
Insert cell
main_folder = {
var simple_folder = ["file", "file", "file"]

var folder_with_subfolders = [
simple_folder,
"file"
]

var folder_with_nested_subfolders = [
simple_folder,
folder_with_subfolders,
"file"
]

return [
simple_folder,
folder_with_subfolders,
folder_with_nested_subfolders,
"file"
]
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mutable alert_message = ""
Insert cell
addEventListener("offline", () => {
mutable alert_message = "🚨 Connection lost";
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function times_two (number) {
return number * 2
}
Insert cell
times_two(2)
Insert cell
times_two(-4)
Insert cell
times_two(100 * (9 + 1))
Insert cell
Insert cell
Insert cell
times_two()
Insert cell
times_two("Hello world")
Insert cell
times_two([1, 2, 3])
Insert cell
times_two(true)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
new Error("Tried to do math with non-numbers. This is not allowed.")
Insert cell
Insert cell
Insert cell
Insert cell
function times_two_strict(number) {
if (!_.isNumber(number)) {
throw new Error("Cannot multiply non-numbers")
}

return number * 2
}
Insert cell
times_two_strict(2)
Insert cell
times_two_strict("Hello world")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sum = (a, b) => {
// Something might be wrong here...
return a - b
}
Insert cell
Insert cell
Insert cell
sum_tests = [
sum(0, 0) === 0,
sum(1, 2) === 3,
sum(1, 2) === sum(2, 1),
sum(0, 10) === 10
]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function measure_time (code) {
const start = Date.now()
code()
const end = Date.now()
return end - start
}
Insert cell
Insert cell
Insert cell
count_to_billion = function () {
let x = 0
for (let i = 0; i < 1000 * 1000 * 1000; ++i) {
x++
}
return x
}
Insert cell
count_duration = measure_time(count_to_billion)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
1 * 2 * 3 * 4
Insert cell
5 * 6 * 7 * 8
Insert cell
Insert cell
Insert cell
Insert cell
multiply_consecutive_numbers_1 = () => {
let i = 1
let r = ""

while (i < 8000000) {
const s = i * (i + 1) * (i + 2) * (i + 3)
r += " " + s
i += 4
}

return r.trim()
}
Insert cell
Insert cell
multiply_consecutive_numbers_2 = () => {
let i = 1
let r = []

while (i < 8000000) {
const s = i * (i + 1) * (i + 2) * (i + 3)
r.push(s)
i += 4
}

return r.join(" ")
}
Insert cell
Insert cell
Insert cell
measure_time(multiply_consecutive_numbers_1)
Insert cell
measure_time(multiply_consecutive_numbers_2)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more