JavaScript

* [What is it?](#what-is-it) * [Why should I care?](#why-should-i-care) * [Details](#details) + [Statements](#statements) + [Functions](#functions) + [Objects](#objects) + [Loading from an HTML5 Page](#loading-from-an-html5-page) * [Where can I find more information?](#where-can-i-find-more-information)

What is it?

JavaScript is a programming language. Even though the name contains Java, it has little to do with this programming language.

It was developed by Brendan Eich (@BrendanEich, Blog) and first introduced as JavaScript in December of 1995. Brendan Eich was working for Netscape at the time. Netscape's strategy had been that dynamic content in web pages should be delivered as Java Applets, but Brendan Eich felt strongly that a programming language for non-programmers was needed.

He co-founded the Mozilla Project and was it's CEO until April of 2014. Mozilla is known for developing the Firefox browser.

top

Why should I care?

JavaScript is the programming language of a Chrome Application. It is JavaScript that is executed when we use the mouse or the keyboard to interact with our application.

top

Details

Statements

Statements describe things to do. Each statement is ended with a semi-colon (;). Multiple statements can be combined into a set of curly brackets {} called a block statement. A block statement is not ended with a semi-colon.

statement1;
statement2;
{
  statement3;
  statement4;
}

Please note that block statements do not provide a scope. In other languages such as Java, something inside curly brackets are considered private to that area, but this is not the case in JavaScript

Variable Statement

Variables must be declared with the var keyword followed by the name of the variable. You can optionally also assign a value when you declare variables. Once declared, the var keyword must not be used.

var some;
var other = 5;
other = 6;

Names of variables must not be one of the keywords or built-in global variables.

If...else Statement

The if...else statement is used to execute some statements if a condition is true and something else if it is false.

var a = 5;
if(a < 6) {
  statement1;
  statement2;
} else {
  statement3;
  statement4;
}

Since the variable a has the value 5 which is less than 6, statements statement1 and statement2 will be executed.

The following values are considered false:

undefined, null, 0, NaN, ""

Everything else is considered true.

For Statement

The for statement creates a loop. The statement takes three expressions separated by semicolon enclosed in parentheses followed by the statement to execute.

The first expression is the initial statement to execute.

Then comes a condition that has to be true in order for the loop to continue.

The final expression is the statement to execute after each iteration of the loop.

for(initialStatement; condition; afterIteration)
  loopStatement

So the order of execution is:

1. initialStatement
2. condition
3. loopStatement
4. afterIteration
5. condition

Steps 3-5 will be repeated as long as the condition is true. If the condition is initially false, they will not be executed at all.

Example:

for(var i=1; i<10; i++) {
  console.log(i);
}

Outputs:

1
2
3
4
5
6
7
8
9

The console is a global object that can output information to the browser's log.

To see the log, use the Chrome browser developer tools.

Functions

Functions is a way of grouping statements together and giving the group a name. This is convenient if you want to execute the same statements from different areas of your application.

A function can be created in two different ways. Either as an expression or a declaration.

Expression:

var log = function(argument) {
  console.log(argument);
}

Declaration:

function log(argument) {
  console.log(argument);
}

Objects

An object in JavaScript is a set of functions and set of variables grouped together with a name. We say that the functions defines the behavior, and the variables define the state of the object.

One special thing in JavaScript that is different from many other languages is that a function is also an object. This means that you do cool stuff like passing a function as an argument to a function.

To create an object, you can just define it literally like this:

var person = {};

You can then add variables and functions to your object like this:

person.name = "Palle Cogburn";
person.speak = function() {
  console.log("Hello, my name is " + this.name);
}

Then to call the speak function on the person object, you will write this:

person.speak();

Loading from an HTML5 page

A JavaScript file is loaded from an HTML5 page using the script element.

<html>
  <head>
    <script type="text/javascript" src="background.js">Your browser does not support JavaScript</script>
  </head>
  <body>
  </body>
</html>

The type attribute indicates the type of script. It is necessary to specify this because browsers support other script languages. Internet Explorer for example has its own types; JScript, and VBScript.

The src attribute gives the name of the file that contains the JavaScript source code.

Where can I find more information?

Mozilla JavaScript Reference