What is Javascript?
The only client-side programming language that executes in the browser
The only client-side programming language that executes in the browser
Add atime
element inside everytd
in the schedule
When I click on this button, validate the form and display errors
When a message arrives, display an OS-level notification popup
Display my 9 latest Instagram posts in the sidebar
I was under marketing orders to make it look like Java but not make it too big for its britches … [it] needed to be a silly little brother language.
Brendan Eich (source)
statement1;
statement2;
statement3;
if (condition) {
statements
}
for (init; test; step) {
statements
}
function name(arg1, arg2) {
return value;
}
⟨script type="module"⟩
src
attribute specifies a url whose contents should be fetched and executedtype="module"
null
and undefined
+
-
*
/
**
%
== != > < >= <=
&&
(for and) ||
(for or)+
-
!
(for not)name(arguments)
[1, 2, 3, "anything goes"]
if (condition) {
statement1;
}
if (condition) {statement1;}
if (condition)
statement1;
if (condition) statement1;
if (condition) {
statement1;
statement2;
}
if (condition) {statement1; statement2;}
if (condition)
statement1;
statement2;
if (condition) statement1; statement2;
$('#id')
$$('.class')
$0
- $4
$_
<script type="module">
console.log("Hello world", 4 * 2 ** 3 + 10)
console.log({firstName: "David", lastName: "Karger"})
</script>
>
4
*
2
** 3
+ 10
< 42
>
$$("h1, h2, h3")
< [h1,
h2,
h3#general-information, ...]
4 * "2" ** 3 + 10
4 * 2 ** 3 + "10"
+
is overloaded: It performs addition and concatenationslider.step = (slider.max - slider.min)/10
if (new Date() - date < 60000) {
console.log("Less than a minute ago")
}
Code | Result |
---|---|
|
|
|
|
|
|
|
Code | Result | |
---|---|---|
Type conversion |
|
|
Strict equality |
|
|
Number parsing |
|
if (heading && heading.id) {
// Heading is non-empty and has an id, linkify
heading.innerHTML = `<a href="#${heading.id}">
${heading.textContent}
</a>`;
}
"Hello" && 0
?&&
and ||
do not (necessarily) return boolean
JS expression | Python expression |
---|---|
a ? b : c |
b if bool(a) else c |
a && b |
b if bool(a) else b |
a || b |
a if bool(a) else b |
let
declares a variable
mondayLectures
is an array of HTMLElement
objects
length
is a property of all arrays, and returns (or sets) the number of items
Brackets allow us to access individual items
textContent
is a property of all elements, and returns (or sets) the textual content
Notice how the title of the first lecture changed!
// let declares a variable
let r = 10;
// const declares a constant
const π = Math.PI;
Again, everything so far seems run-of-the-mill…
var
. Don't use it, there are many pitfalls with var
that let
avoids!
let x = "Hello";
x = 1;
console.log(x);
let x;
console.log(x);
undefined
?
const π = 3.1415926;
π = 22 / 7;
console.log(π);
const squares = [1, 4, 9, 16];
squares[4] = 25;
console.log(squares);
let today = new Date();
console.log(today.toLocaleString("en-GB", {
day: "numeric",
month: "long",
year: "numeric",
dayPeriod: "long"
}));
let user = {
name: "Lea Verou",
age: 34
};
let user = {
name: "Lea Verou"
};
user.age = 34;
let user = {};
user["name"] = "Lea Verou";
user["age"] = 34;
let user = {
"name": "Lea Verou",
"age": 34,
"hobbies": ["Coding", "cooking"]
};
delete user.hobbies;
let user = {
name: "Lea Verou",
age: 34
};
console.log(user.hobbies);
undefined
let user = {
name: "Lea Verou",
age: 34
};
user.age = undefined;
console.log(user);
undefined
can also be a legit property value. Setting a property to undefined
does not delete it.
let hobbies = ["Coding", "Cooking"];
hobbies.user = "Lea Verou";
console.log(hobbies.length, hobbies.user);
let hobbies = ["Coding", "Cooking"];
hobbies["1"] = "Dining";
console.log(hobbies[1], hobbies["1"]);
if (true) {
let x = 1;
}
console.log(x);
let
(and const
) are block-scoped
if (true) {
let x = 1;
log();
}
function log() {
console.log(x);
}
if (true) {
let x = 1;
log();
}
function log() {
console.log(x);
}
var x=10;
let
let
window
window
(so window.window=window
)
⟨script type="module"⟩
)