Javascript
From WebOS101
We're going to step through some examples of javascript with code.
Contents |
Introduction
JavaScript is the language that powers Mojo apps. JavaScript is an object-oriented language that uses prototype-based inheritance. Javascript is an extremely powerful, interpreted language. You'll notice that data types (like int, char, string, bool) don't have to be declared by the developer and instead are all under the var identifier. The programmer doesn't have to declare any of these things, instead we use a generic var term. The interpreter (V8 or another VM) manages the data types internally. Any problems let Alex Haefner know, or just make the changes yourself (provided you know they are accurate!).
Variables
These examples are all through code:
var x = 1; //javascript doesn't distinguish between ints and doubles, everything is a var
var y = 0.9999999999;
var n = "webOS"; //A string
n += x; //The result: "webOS1" a string
var truth = false; //bool, but again we don't have to deal with data types
Prototypes, This, & Functions
First we're going to declare a function in javascript:
function Main() {
}
Functions in javascript are objects, and every one of these objects has a prototype. We're going to walk through some examples of javascript functions as objects, and prototypes right now:
//First let's add a method called add(x, y) to Main's prototype
Main.prototype.add = function(x,y) {
return x + y;
}
//Later on, if we wanted to call the add function
Main.add(10,2); //returns 12
Adding variables to a prototype and accessing them is very simple. You simply chain using the . identifier in javascript. It's a familiar pattern of:
function_name.prototype.<what we want to add here> = {};
In javascript we use the this identifier inside of a function. Lets go back to the original Main function:
function Main() {
}
Main.prototype.add = function (x,y) {
this.x = x;
this.y = y;
return x+y;
}
var m = new Main(); //Create a new instance of Main in m
//Later on in the code...
m.add(10,2); // returns 12
m.x; // returns 10
m.y; // returns 2
In the previous example, where this.x and this.y are used, this refers to everything inside the current function. Let's take a moment to look at some arbitrary functions:
function n() {
this.x;
}
function y() {
this.x;
}
Note that in this example, the this identifier refers to different scopes inside of different functions. For more on that you can check out Tim Caswell's excellent article on this. The take away is that this only holds it's scope inside of the function it's written in, and if you write outside of that function, you may not be referring to what you intend to use. It's a source of confusion for many developers (I needed a correction when writing this article). But to keep it simple, if you imagine javascript code as a series of functions, this is the reference to inside of the current function. So you just need to be aware of what function this is referring too.
We're going to step into a more complex example:
function Main() {
}
function add() {}
add.prototype.three = function (x1, x2, x3) {
return x1+x2+x3;
}
Main.prototype.add = add.prototype;
var m = new Main(); //Create a new instance of Main in m
//Later on in the code...
m.add.three(2,3,4); // returns 2+3+4 which is 9
So what's the purpose of the prototype? It's a way to create a definition of an object that can be used over again.
Also, methods added to a prototype are applied recursively to all previous instances of that object. Let's take a look at the following example. In this example, we use javascript's new to create instances of a javascript object:
function Main() {}
function Broken() {}
Main.prototype.add = function (x,y) {
return x+y;
}
Broken.add = function(x,y) {
return x+y;
}
//Create a few instances
var works = new Main(); // create a new instance of Main called works
var doesnot = new Broken(); // create a new instance of Broken called doesnot
if(works.add(2, 4) == 6)
"Yay!"; // occurs
if(doesnot.add(2,4) == 6)
"Double yay!"; // doesn't occur
And a bit on that recursive addition of methods to previous instances:
function Main() {}
var trust = new Main();
trust.add(3,5); // does not work, as add is not a member of trust's prototype
Main.prototype.add = function (x,y) {
return x + y;
}
trust.add(3,5); // returns 8
For more on javascript functions, I highly recommend Tim Caswell's article on different ways to instantiate objects.
DOM Access (Mojo & Browser)
Lets say you have the following html in your .html file:
//all the other stuff we don't care about above and below this <html> <body> etc
<div id="ours"></div>
If you want to get references to elements of the DOM, in vanilla javascript you use:
var element = document.getElementById("ours");
In Mojo (a webOS application that uses Mojo), however, you should use the following to get a reference to an element in a scene
var element = this.controller.get("ours");
Also note, that inside a closure you can set a reference using the this identifier. For example:
function Main() {
}
Main.prototype = {
setup: function() {
this.element = this.controller.get("ours");
}
};
Thoughts
That's all you need to learn from here. We'll have more specific code to Mojo in the Mojo examples. For more javascript training, check out the links. I've ordered them in a list from more beginner articles to slightly more advanced articles.
External Resources
More links are always being added!
W3C Javascript tutorials
A Number of javascript optimization examples
John Ressig's Browser-based Tutorial
