JavaScript Notes

July 15, 2019 483 words 3 minutes

Contents

Basics

Variables:
- Global variables live as long as the page.
- If we forget to declare a variable before using it, it’ll always be global even if we first use it in a function.

The syntax for an array is similar to Python, using [] instead of {}:

1
2
3
4


var foo = [1, 2, 3, 4, 5];
foo.push(6);
console.log(foo.length);
foo[6] = 7; // We can do this, but be sure to avoid creating a sparse array

undefined vs null vs isNaN():
- undefined is used for;
  - Unassigned/ Uninitiated variables;
  - A missing property for an object;
  - A missing value for an array;
- null is used for uncreated objects (like .getElementById()'s returned value;)
- isNaN(foo) is true if foo is the number can’t be represented by a computer like 0/0.
=== is the strict equality check (both the type and value) while == is not strict.
=== between two object references will be true only if they refer to the same object.
A function in JavaScript can behave just like any data type. It can be assigned to, passed, and returned.

OOP

Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var foo = {
    name: "bar", // A comma here
    coding: function() {
        this.name = "coding bar"; // Must add `this.`
        alert.log("I'm coding now.");
    }, // A comma here
    age: 17 // NO comma here. But can be added after ES5. However, not in JSON.
};
foo.height = 190; // This adds a new property
console.log(foo["name"]); // Also works
delete foo.age; // This deletes the property
for (var prop in foo) { // Prints all properties
    console.log(prop + ": " + foo[prop]);
}

Like in Java, use this and new for constructors.

JavaScript (before ES6) doesn’t have classes. For inheritance, we have prototypal inheritance. (Prototype is like the parent class.)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


function Foo(bar, stuff) {
    this.bar = bar;
    this.stuff = stuff;
}

Foo.prototype.foobar = "hello";
var bob = new Foo("this is", "cool");
console.log(bob.foobar) // "hello"
function Foooo(bar, stuff, more) {
    Foo.call(this, bar, stuff); // calling the Foo constructor
    this.more = more;
}
Foooo.prototype = new Foo();
Foooo.prototype.new_property = "blah";
Foooo.prototype.constructor = Foooo;

DOM (Document Object Model)

document.getElementById("foo").innerHTML gives the content of the html element with the id ‘foo’. JavaScript does this by interacting with the DOM.
foo.setAttribute("class", "bar") sets the attribute and var text = document.getElementById("bar").getAttribute("alt") gets the ‘alt’ attribute.

Handling events

onclick:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var image = document.getElementById("foo");
image.onclick = bar();
function bar() {
    var image = document.getElementById("foo");
    image.src = "new.png"; // We can change the property when we have the element.
}
var images = document.getElementsByTagName("img"); // Get a bunch
for (var i = 0; i < images.length; i++) {
    images[i].onclick = bar();
}

References

Head First JavaScript Programming: A Brain-Friendly Guide, 1st Edition