Javascript basics

JavaScript Basics
Joar Gullestad Pettersen

JavaScript Data Types
String, Number, Boolean, Array, Object, Null, Undefined

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;
• var y = 13.37;
• var z = 10e3;

// Written without decimals
// Written with decimals
// 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");

Array 3
var frukt = ["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 literal
An object is just a special kind of data,
with properties and methods.
var person = {
firstName: "John",
lastName: "Doe",
id: 5
};

Object literal
var person = {
firstName: "John",
lastName: "Doe",
id: 5
};
person.id; // 5

Object literal
var person = {
firstName: "John",
lastName: "Doe",
address: {

street: "Strandsvingen",
number: "14B"
}
};

person.address.street; // "Strandsvingen"

Functions
a 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"

1 == "1"
true
true == "1"
false == "0"

1 == "1"
true
true == "1"

true
false == "0"

1 == "1"
true
true == "1"

true
false == "0"
true

More type coercion
1 == "1"
true
true == "1"

true
false == "0"
true
false == "0" == 1 == true == [] == ""

1 == "1"
true
true == "1"

true
false == "0"
true
false == "0" == 1 == true == [] == ""
true

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

• Javascript: only functions define a new scope
• Example:
if (true) {
var scopeVariable = "Test";
}
scopeVariable; // value: "Test";

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
};
};

function scope1() {
var member; //is a member of the scope defined by the function example

var innerScope = function() {
var member= 12; // defines member in this scope and do not traverse
};
};

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.

•
•
•
•
•

(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).

• (function ($) {
•
// logic/code here
• })(jQuery);

Revealing module pattern
Peanuts.Calculator = function () {
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
Peanuts.Calculator = (function () {
return a + b;

};
return {
add: add,
};
})();

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

Revealing module pattern 3
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/understandingjavascript-prototypes/

• www.w3schools.com
• http://www.youtube.com/watch?v=wOMLlEAqgRk
• http://designpepper.com/blog/drips/an-introduction-to-iifes-immediatelyinvoked-function-expressions

Javascript basics

More Related Content

What's hot

Viewers also liked

Similar to Javascript basics

More from Solv AS

Recently uploaded

Javascript basics