JS Topics
- Basic syntax
- The console
- Types and Coercion
- Variables and Constants
- Scoping
- Objects
- The DOM and manipulation
Java: Early syntactic influence
statement1;
statement2;
statement3;
if (condition) {
statements
}
for (init; test; step) {
statements
}
function name(arg1, arg2) {
return value;
}
In fact, these particular syntactic aspects are not exclusive to (or even introduced with) Java, but are part of the general C-like syntax of many programming languages
- Why not python syntax? Python was barely known in 1995 (first book was in 1996).
- Fun fact: Semicolons are actually optional, and may be inserted by the browser if deemed missing (semicolon insertion). This is the cause of many headaches because missing semicolons change the meaning of your code without producing an error. There are linters like [ESLint](https://eslint.org/) to make sure you never forget semicolons.
Script tag
⟨script type="module"⟩
- contents of script element are executed after page is loaded
- alternatively,
src attribute specifies a url whose contents should be fetched and executed
- older code omits
type="module"
- works kind of the same, but quirky—avoid
- Java
⟨applet⟩ loaded compiled code but JS didn't—why?
- This is how you run JS in a page. You may find older code without `type="module"` but that has certain quirks and does not allow you to include other scripts.
At first glance, everything seems normal
- Common Primitive types: Number, String, Boolean
- Emptiness:
null and undefined
- Common arithmetic operators:
+ - * / ** %
- Common logical operators:
== != > < >= <= && (for and) || (for or)
- Common unary operators:
+ - ! (for not)
- Function calls:
name(arguments)
- Arrays:
[1, 2, 3, "anything goes"]
- Objects with properties
Braces for blocks, not whitespace
All of the following are functionally equivalent
if (condition) {
statement1;
}
if (condition) {statement1;}
if (condition)
statement1;
if (condition) statement1;
Braces for blocks, not whitespace
Are the following functionally equivalent?
if (condition) {
statement1;
statement2;
}
if (condition) {statement1; statement2;}
if (condition)
statement1;
statement2;
if (condition) statement1; statement2;
It's a good practice to always use braces.
Otherwise, it's very easy to get carried away by indentation when we add a second statement and not notice that it's not part of the block.
Furthermore, while we could technically do everything on the same line, it's hard to scan, and less convenient for version control.
Objects
person = {
age: 34,
name: {
"1st": "Lea",
last: "Verou"
},
height: 170-height(sneaker)
};
JSON
Restricted format used to send and store objects
- JavaScript Object Notation
- all properties must be quoted
- no computed values—only literals
- valid in code as well
person = {
"age": 34,
"name": {
"1st": "Lea",
"last": "Verou"
}
"height": 164;
};
Property access
These all result in the same object
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;
What will happen here?
let user = {
name: "Lea Verou",
age: 34
};
console.log(user.hobbies);
AttributeError: 'user' object has no attribute 'hobbies'nullundefined
Any non-existent property, on any object, can be read and just returns undefined
What will be logged here?
let user = {
name: "Lea Verou",
age: 34
};
user.age = undefined;
console.log(user);
{name: "Lea Verou"}{name: "Lea Verou", age: 34}{name: "Lea Verou", age: undefined}
undefined can also be a legit property value. Setting a property to undefined does not delete it.
null vs. undefined
- js has two different ways of saying "no value"
undefined means there is no value naturallynull means something has no value on purpose- would have been simpler to make them the same
- by the time people paid attention, it was too late
What will be logged here?
let hobbies = ["Coding", "Cooking"];
hobbies.user = "Lea Verou";
console.log(hobbies.length, hobbies.user);
TypeError: Cannot set property 'user' on array2 "Lea Verou"3 "Lea Verou"2 undefined
Arrays are just special objects. Any object can have properties added to it at any point.
What will be logged here?
let hobbies = ["Coding", "Cooking"];
hobbies["1"] = "Dining";
console.log(hobbies[1], hobbies["1"]);
TypeError: Cannot set property '1' on arrayCooking DiningDining Dining
Array indices are merely numerical properties (including strings that evaluate to numbers)
Functions can be object properties
let greet = function() {
console.log(`Hi, I’m ${this.name}`);
};
let instructors = [
{name: "Lea", greet: greet},
{name: "David", greet: greet}
];
for (let instructor of instructors) {
instructor.greet();
}
- When functions are properties of objects they are called *methods*
- There is nothing special about these properties, they can be overwritten, reassigned, added to objects we don’t own etc.
- When a function is called as a method, its special `this` parameter points to the object itself.
This is called the *function context* and we will explore it in more detail soon.
- Note that `console.log()` is a method of the `console` object.
Methods = Functions + Object properties
" Hello! ".trim() // "Hello!"
- Lets the object carry behavior as well as data
- The calling object becomes an implicit parameter that we access via
this
- A heuristic worth remembering about whether we need a method: if we don't actually need access to an object, then there's no point making the function a method.
Window Object and Global scope
- Each window's global scope defines a
window global variable
- Which holds an object that represents the window
- so e.g.
window.innerHeight tells you its height
- and you can invoke
window.close()
- Every global variable is a property of the window object and vice versa
- setting a global creates/modifies a property in window
- setting a property in window creates/modifies a global
- Including
window (so window.window=window)
…the functionality of Scheme
…the object orientation of Self
…and the syntax of Java
DOM API
Fetch API
