JavaScript Notes
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
vsnull
vsisNaN()
: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
andnew
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 andvar 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(); }