When I click on the close button, close the dialog box
Add a navigation menu on every page, and give a class of ‘current’ to the current pageNot the best way to do templating
When a message arrives, display an OS-level notification
Display my 9 latest Instagram posts in the sidebar
<script type="module" src="hello.js"></script>
import "./hello.js";
import * as util from "./util.js";
<script type="module">
alert("Hello world!");
</script>
<button onclick="alert('Hello world!')">
Click me
</button>
$$(
"*"
)
.length
<style>
a:hover {
background: gold;
}
</style>
<a href="#">Come here</a>
<a href="#"
onmouseover="this.style.background = 'gold';"
>Come here</a>
<a href="#"
onmouseover="this.style.background = 'gold';"
onmouseout="this.style.background = '';"
>Come here</a>
2 .5 -11.8
1_000_000_000
Infinity -Infinity NaN
"Hello"
'This is some text'
`x is ${ x }
and y is ${ y }`
true
false
null
undefined
Lists of values
let numbers = [1, 2, 3, 4, 5];
let names = ["Lea", "David", "Jen"];
console.log(numbers.length); // 5
console.log(names[0]); // "Lea"
names[2] = "Jo";
names.splice(1, 1);
console.log(names); // ["Lea", "Jo"]
numbers.push(6);
numbers.unshift(0);
console.log(numbers); // [0, 1, 2, 3, 4, 5, 6]
Key → value pairs
let pages = {
"Home": "index.html",
About: "about.html",
Contact: "contact.html",
};
let pages2 = {
home: {
title : "Home",
url: "index.html"
},
about: {
title : "About me",
url: "about.html"
},
contact: {
title : "Contact",
url: "contact.html"
},
};
Reading & Writing
object.key for simple static keys, object[keyExpr] for anything elseobject.property = 5;
All of the following return "contact.html":
pages.Contact
pages["Contact"]
pages["Con" + "tact"]
pages2.contact.url
let title = "Contact";
pages[title];
let id = "contact";
pages2[id].url;
A data format based on JS syntax
"-quoted), booleans, null
let x = 1;
let y = 2;
let z = x + y;
x = 2;
.console.log(z);
let x = 1, y = 2;
let min;
if (x < y) {
min = x;
}
else {
min = y;
}
console.log(min);
let numbers = [2, -1, 3, 0, 5];
let min = Infinity;
for (let n of numbers) {
if (n < min) {
min = n;
}
}
console.log(min);
let min = (numbers) => {
let result = Infinity;
for (let n of numbers) {
if (n < result) {
result = n;
}
}
return result;
};
let minimum = min([2, -1, 3, 0, 5]);
console.log(minimum);
Object properties whose values are functions
let pages2 = {
home: {
title : "Home",
url: "index.html",
getAbsoluteURL: function (base) {
return `${base}/${this.url}`;
},
},
about: {
title : "About me",
url: "about.html",
getAbsoluteURL: function (base) {
return `${base}/${this.url}`;
},
},
contact: {
title : "Contact",
url: "contact.html",
getAbsoluteURL: function (base) {
return `${base}/${this.url}`;
}
},
};
Blueprints for objects
The blueprint
class Page {
constructor(title, url) {
this.title = title;
this.url = url;
}
getAbsoluteURL(base) {
return `${base}/${this.url}`;
}
}
“Creating instances”
let pages = {
home: new Page("Home", "index.html"),
about: new Page("About me", "about.html"),
contact: new Page("Contact", "contact.html"),
};
| Math | JS |
|---|---|
x + y |
|
x - y |
|
x * y |
|
x / y |
|
x ** y |
|
x % y |
| Math | JS |
|---|---|
x < y |
|
x > y |
|
x <= y |
|
x >= y |
|
x !== y |
|
x === y |
| Math | JS |
|---|---|
| (x AND y) | x && y |
| (x OR y) | x || y |
| (NOT x) | !x |
Getting them into a JS variable
| Element | JS |
|---|---|
<html> |
document.documentElement |
<body> |
document.body |
<head> |
document.head |
<button id="test_button">
Click me
</button>
console.log(test_button);
// See all links on a page
let allLinks = document.querySelectorAll('a');
console.log(allLinks);
// Get closest ancestor with a class
let container = element.closest("select, article");
let p = document.createElement("p");
p.textContent = "Hello";
document.body.append(p);
document.body.insertAdjacentHTML("beforeend", `
<p>Hello</p>
`);
Manipulating them (the fun part!)
a.classList.add("current");
el.style.setProperty("--value", value);
h1.id = slugify(h1.textContent);
a.setAttribute("target", "_blank");
checkbox.indeterminate = true;
code.before(a);
a.append(code);
h1.textContent = "Hi there";
p.innerHTML = "Yo <em>sup?</em>";
“When X happens, do Y”
<button id="button">Click me</button>
button.addEventListener("click", function () {
alert("You clicked me! 🥹 Thank you!");
});
document.addEventListener("mousemove", (event) => {
document.body.textContent = `${event.x} ${event.y}`;
});
<button id="button">Click me</button>
button.addEventListener("click", document.body.style.background = "pink");
<button id="button">Click me</button>
button.addEventListener("click", () => {
document.body.style.background = "pink"
});
Ports and Local servers
http://
localhost:4000
/labs/1/hello.html
Variables are scoped to closest {}
let x = 1, y = 2;
if (x < y) {
let min = y;
}
else {
let min = x;
}
console.log(min);
Uncaught ReferenceError: min is not definedReuse chunks of logic (and actions)
| Math | JS |
|---|---|
|
|
|
| Math | JS |
|---|---|
|