JavaScript Basics

Joar Gullestad Pettersen

JavaScript Data Types

String, Number, Boolean, Array, Object, Null, Undefined

Dynamic Types

• var x;              

Dynamic Types

var x;                // x is: undefined

Dynamic Types

var x;                // x is: undefined

x = 5;           // x is set to a Number: 5

Dynamic Types

var x;                // x is: undefined

x = 5;           // x is set to a Number: 5

x = "Bond";         // x is changed to a String: "Bond"

Strings

var car = "Telsa Model S";

var car2 = 'Tesla Model S';

Numbers

• var x = 42;      // Written without decimals

• var y = 13.37; // Written with decimals

• var z = 10e3;  // Exponential notation

Booleans

• var x = true;

• var y = false;

Array

var frukt = new Array();

frukt[0] = "eple";

frukt[1] = "banan";

frukt[2] = "pære";

["eple", "banan", "pære"]

Array 2

var frukt = new Array("eple", "banan", "pære");

["eple", "banan", "pære"]

Array 3

var frukt = ["eple", "banan", "pære"];

["eple", "banan", "pære"]

Array 4

• var frukt = ["eple", "banan", "pære"]

• frukt.pop(); // ["eple", "banan"]

• frukt.push("tomat"); // ["eple", "banan", "tomat"]

• frukt.shift(); // ["banan", "tomat"]

• frukt.unshift("tomat"); // ["tomat", "banan", "tomat"]

Objects

• Everything is an Object

Objects

• Everything is an Object

• Booleans can be objects or primitive data treated as objects

• Numbers can be objects or primitive data treated as objects

• Strings are also objects or primitive data treated as objects

• Dates, Maths, Regular expressions, Arrays and functions are always objects

Object literalAn object is just a special kind of data,

with properties and methods.

var person = {

firstName: "John",

lastName: "Doe",

id: 5

};

Object literalAn object is just a special kind of data,

with properties and methods.

var person = {

firstName: "John",

lastName: "Doe",

id: 5

};

person.id; // 5

Object literalAn object is just a special kind of data,

with properties and methods.

var person = {

firstName: "John",

lastName: "Doe",

address: {

street: "Strandsvingen",

number: "14B"

}

};

person.address.street; // "Strandsvingen"

Functionsa block of code that will be executed when "someone" calls

it:

function add(a, b) {

return a + b;

}

var add = function(a, b) {

return a + b;

}

Object Constructor

function Person(firstName, lastName) {

this.firstName = firstName;

this.lastName = lastName;

}

var randomPerson = new Person("John", "Doe");

Object

var randomPerson = new Object();

randomPerson.firstName = "John";

randomPerson.lastName = "Doe";

Boolean expressions

if (a == 2) {//if this is true

//do this...

}

Type coercion

• When JavaScript are unsure what you mean, It makes a guess

• Example:

if ('false') { alert("true"); }

• «A String is obviously not true or false, you probably mean true!»

True!

• if (true) { alert("true"); } // alerts "true"

• if ('false') { alert("true"); } // alerts "true"

• if ([]) { alert("true"); } // alerts "true"

• if (5) { alert("true"); } // alerts "true"

• if ({}) { alert("true"); } // alerts "true"

False

• if (false) { alert("false"); } // does nothing

• if (0) { alert("false"); } // does nothing

• if (null) { alert("false"); } // does nothing

• if (undefined) { alert("false"); } // does nothing

• if ("") { alert("false"); } // does nothing

More type coercion

1 == "1"

true == "1"

false == "0"

More type coercion

1 == "1"

true

true == "1"

false == "0"

More type coercion

1 == "1"

true

true == "1"

true

false == "0"

More type coercion

1 == "1"

true

true == "1"

true

false == "0"

true

More type coercion

1 == "1"

true

true == "1"

true

false == "0"

truefalse == "0" == 1 == true == [] == ""

More type coercion

1 == "1"

true

true == "1"

true

false == "0"

truefalse == "0" == 1 == true == [] == ""

true

Confusing?

• Solution?

Confusing?

• Solution?

• Avoid bugs| and use: ===

===

1 == true

true

1 === true

false

1 == "1"

true

1 === "1"

false

Scope & global variables

• C#/Java: anything inside curly brackets, {} , defines a scope

• Example:

if (true) {

var scopeVariable = "Test";

}

scopeVariable = "Test2"; // variable not defined

Scope & global variables

• Javascript: only functions define a new scope

• Example:

if (true) {

var scopeVariable = "Test";

}

scopeVariable; // value: "Test";

Scope & global variables

function scope1() {

var member; //is a member of the scope defined by the function example

//this function is also part of the scope of the function example

var innerScope = function() {

member= 12; // traverses scope and assigns member in scope1 to 12

};

};

Scope & global variables

function scope1() {

var member; //is a member of the scope defined by the function example

//this function is also part of the scope of the function example

var innerScope = function() {

var member= 12; // defines member in this scope and do not traverse

};

};

Scope & global variables

function scope1() {

var member; //is a member of the scope defined by the function example

//this function is also part of the scope of the function example

var bar = function() {

member= 12; // traverses scope and assigns scope1member.foo to 12

};

};

function scope2() {

member = 15; // traverses scope and assigns global.member to 15

}

Namespaces

• Not built into JavaScript

• Problem?

C# namespace

namespace Peanuts

{

}

JavaScript (Ad-hoc) namespace

var Peanuts = {}; // Object used as namespace

JavaScript (Ad-hoc) namespace

var Peanuts = Peanuts || {}; // in case it already exists

C# Namespace

namespace Peanuts

{

public class Person

{

}

}

«Classes» and «methods» ?

var Peanuts = Peanuts || {};

Peanuts.Calculator = {

add: function (a,b) {

return a + b;

},

subtract: function () {

return a - b;

}

};

Peanuts.Calculator.add(1, 2); // 3

Immediately invoked function expressions

• (function () {

• // logic/code here

• })();

Why?

• Executes an expression and therefore code immediately

• Creates «privacy» for your code (function scope ftw!)

How?

• JavaScript, parenthesis can’t contain statements.

• When the parser encounters the function keyword, it knows to parse it as a function expression and not a function declaration.

Immediately invoked function expressions

• (function () {

• // logic/code here

• })();

• The key thing about JavaScript expressions is that they return values.

• To invoke the function expression right away we just need to tackle a couple of parentheses on the end(like above).

Immediately invoked function expressions

• (function ($) {

• // logic/code here

• })(jQuery);

Revealing module pattern

var Peanuts = Peanuts || {};

Peanuts.Calculator = function () {

var add = function(a, b) {

return a + b;

};

var subtract = function(a, b) {

return a - b;

};

return {

add: add,

subtract: subtract

};

};

Peanuts.Calculator().add(1, 2); // 3

Revealing module pattern 2

var Peanuts = Peanuts || {};

Peanuts.Calculator = (function () {

var add = function(a, b) {

return a + b;

};

return {

add: add,

};

})();

Peanuts.Calculator.add(1, 2); // 3

Revealing module pattern 3

var Peanuts = Peanuts || {};

Peanuts.Calculator = (function () {

var PI = 3.14; // private variable!

var getCircleArea = function(r) {

return PI * r * r;

};

return {

getCircleArea: getCircleArea // public method

};

})();

Peanuts.Calculator.getCircleArea(2); // 12.56

Sources

• http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/

• www.w3schools.com

• http://www.youtube.com/watch?v=wOMLlEAqgRk

• http://designpepper.com/blog/drips/an-introduction-to-iifes-immediately-invoked-function-expressions