Public
Edited
Jan 28
thisYear = 2025
myBirthYear = 1996 // update with your birth year and observe what happens to the cell below!
thisYear - myBirthYear
<html>
<head>
<title>My title</title>
</head>
<body>
<h1>A heading</h1>
<a href="link.url">Link text</a>
</body>
</html>
<svg width="70" height="70" style="border: 1px solid black">
<circle cx="35" cy="35" r="25" fill="green" stroke = "blue" stroke-width = "3"/>
</svg>
<svg width="160" height="28" style="border: 1px solid black">
<text x="50%" y="50%" font-size="17" text-anchor = "middle" dominant-baseline = "middle">Hello, World!</text>
</svg>
<svg width="160" height="160" style="border: 1px solid black">
<g style="transform: translate(30px, 30px);">
<rect x="0" y="0" width="100" height="100" fill="orange" />
<g fill = blue>
<circle cx="25" cy="25" r="20" />
<circle cx="75" cy="25" r="20" />
<circle cx="25" cy="75" r="20" />
<circle cx="75" cy="75" r="20" />
</g>
</g>
</svg>
lastYear = 2024 // one line code
repeatedString = { // code block with a return value stored as a global variable
let outputString = "";
for (let i = 0; i < 5; i++) {
outputString += "Goodbye " + lastYear + "! "; // we can use any global variable in a code block
}
return outputString;
}
repeatedString // we can access this global variable, but we cannot access the `outputString` variable from the above code block
x = 240 // a number assigned to a new variable named `x`
y = 7 // a number assigned to a new variable named `y`
courseNum = x + y // a number (calculated) assigned to a new variable named `courseNum`
deptCode = "INFO" // a string assigned to a new variable named `deptCode`
deptCode + " " + courseNum // concatenate strings and numbers with the `+` operator
// this works fine because JavaScript is a "weakly-typed" language
x > y // number comparison returns a boolean value
"a" > "b" // strings can be compared too
// this returns false because it evaluates the ASCII values of the letters, and "b" comes after "a"
1 < 2 && 3 > 4 // this is how you AND comparisons
1 < 2 || 3 > 4 // this is how you OR comparisons
null == undefined // both null and undefined are falsy values, so in this loose equality comparison they are equal
null === undefined // but in a strict equality comparison, they are different
function generateRandomNumber() {
return Math.floor(Math.random() * 100); // Math.random() returns a float between 0 and 1
// Math.floor() rounds a float down to the previous integer
}
generateRandomNumber() // try rerunning this cell several times, what does it print each time?
a1 = [] // initialize an empty array
rainbowColors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"] // create an array of string elements
rainbowColors[0] // JavaScript uses zero-indexing
rainbowColors[rainbowColors.length - 1] // `.length` lets you access the length of any array
// Why do we have to do -1 here? Because of zero-indexing
snoopy = ({
name: "Snoopy",
age: 75,
type: "dog",
isSmart: true
})
snoopy.type // one way to access an object property
snoopy["type"] // another way to access an object property
Object.keys(snoopy) // This function prints just the property names of an object
// It's like the header of a CSV file that gives names to the columns
Object.values(snoopy) // This function prints just the property values of an object
// It's like one row of a CSV file
snoopy.favorites = ({ // set the snoopy object's "favorites" property to an object
color: "orange",
food: "root beer"
})
pets = [ // initialize an array of pet objects
snoopy,
{name: "Tom", age: 85, type: "cat", isSmart: false, favorites: {color: "blue", food: "ice cream"}},
{name: "Jerry", age: 85, type: "mouse", isSmart: true, favorites: {color: "green", food: "cheese"}}
]
[{candy: "gumdrop", color: "red"}]
myPet = ({
animal: "dog",
age: "8",
color: "white",
type: "husky"
})
// uncomment the code below to add your pet to the `pets` array
pets.push(myPet)
ages = [31, 28, 27, 29, 23, 22, 24, 28, 26, 34]
canRentCar = function(age) { // this function returns true if the passed-in age is greater than or equal to 25
return age >= 25;
}
// use the filter function to get the ages that meet the car rental age requirement
ages.filter(canRentCar)
// we can also pass in an "anonymous function" (i.e. unnamed) if this function isn't likely to be reused elsewhere
ages.filter(function(age) {
return age >= 25;
})
// we can also write the anonymous function using the "arrow function notation"
ages.filter((age) => age >= 25)
// we can also use the index parameter to specify how to filter the elements
// here we keep the elements whose indices are even numbers
ages.filter((age, i) => i % 2 == 0)
smartPets = pets.filter((pet) => pet.isSmart)
{
for (let i = 0; i < pets.length; i++) {
pets[i].raffle = generateRandomNumber(1, 100); // Assign a random raffle number between 1 and 100
}
}
{
let raffleWinners = pets.filter(
(pet) => pet.raffle >= 30 && pet.raffle <= 80
);
{
console.log("Raffle Winners:", raffleWinners);
raffleWinners;
}
}
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.
