javascript basics
DESCRIPTION
Presentasjon fra Peanuts Talks som er en intern arena for å dele kunnskap med kollegaer. Presentasjonen ble holdt av Joar Gullestad PettersenTRANSCRIPT
![Page 1: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/1.jpg)
JavaScript Basics
Joar Gullestad Pettersen
![Page 2: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/2.jpg)
JavaScript Data Types
String, Number, Boolean, Array, Object, Null, Undefined
![Page 3: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/3.jpg)
Dynamic Types
• var x;
![Page 4: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/4.jpg)
Dynamic Types
var x; // x is: undefined
![Page 5: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/5.jpg)
Dynamic Types
var x; // x is: undefined
x = 5; // x is set to a Number: 5
![Page 6: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/6.jpg)
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"
![Page 7: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/7.jpg)
Strings
var car = "Telsa Model S";
var car2 = 'Tesla Model S';
![Page 8: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/8.jpg)
Numbers
• var x = 42; // Written without decimals
• var y = 13.37; // Written with decimals
• var z = 10e3; // Exponential notation
![Page 9: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/9.jpg)
Booleans
• var x = true;
• var y = false;
![Page 10: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/10.jpg)
Array
var frukt = new Array();
frukt[0] = "eple";
frukt[1] = "banan";
frukt[2] = "pære";
["eple", "banan", "pære"]
![Page 11: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/11.jpg)
Array 2
var frukt = new Array("eple", "banan", "pære");
["eple", "banan", "pære"]
![Page 12: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/12.jpg)
Array 3
var frukt = ["eple", "banan", "pære"];
["eple", "banan", "pære"]
![Page 13: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/13.jpg)
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"]
![Page 14: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/14.jpg)
Objects
• Everything is an Object
![Page 15: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/15.jpg)
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
![Page 16: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/16.jpg)
Object literalAn object is just a special kind of data,
with properties and methods.
var person = {
firstName: "John",
lastName: "Doe",
id: 5
};
![Page 17: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/17.jpg)
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
![Page 18: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/18.jpg)
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"
![Page 19: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/19.jpg)
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;
}
![Page 20: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/20.jpg)
Object Constructor
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var randomPerson = new Person("John", "Doe");
![Page 21: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/21.jpg)
Object
var randomPerson = new Object();
randomPerson.firstName = "John";
randomPerson.lastName = "Doe";
![Page 22: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/22.jpg)
Boolean expressions
if (a == 2) {//if this is true
//do this...
}
![Page 23: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/23.jpg)
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!»
![Page 24: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/24.jpg)
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"
![Page 25: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/25.jpg)
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
![Page 26: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/26.jpg)
More type coercion
1 == "1"
true == "1"
false == "0"
![Page 27: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/27.jpg)
More type coercion
1 == "1"
true
true == "1"
false == "0"
![Page 28: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/28.jpg)
More type coercion
1 == "1"
true
true == "1"
true
false == "0"
![Page 29: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/29.jpg)
More type coercion
1 == "1"
true
true == "1"
true
false == "0"
true
![Page 30: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/30.jpg)
More type coercion
1 == "1"
true
true == "1"
true
false == "0"
truefalse == "0" == 1 == true == [] == ""
![Page 31: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/31.jpg)
More type coercion
1 == "1"
true
true == "1"
true
false == "0"
truefalse == "0" == 1 == true == [] == ""
true
![Page 32: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/32.jpg)
Confusing?
• Solution?
![Page 33: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/33.jpg)
Confusing?
• Solution?
• Avoid bugs| and use: ===
![Page 34: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/34.jpg)
===
1 == true
true
1 === true
false
1 == "1"
true
1 === "1"
false
![Page 35: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/35.jpg)
Scope & global variables
• C#/Java: anything inside curly brackets, {} , defines a scope
• Example:
if (true) {
var scopeVariable = "Test";
}
scopeVariable = "Test2"; // variable not defined
![Page 36: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/36.jpg)
Scope & global variables
• Javascript: only functions define a new scope
• Example:
if (true) {
var scopeVariable = "Test";
}
scopeVariable; // value: "Test";
![Page 37: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/37.jpg)
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
};
};
![Page 38: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/38.jpg)
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
};
};
![Page 39: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/39.jpg)
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
}
![Page 40: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/40.jpg)
Namespaces
• Not built into JavaScript
• Problem?
![Page 41: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/41.jpg)
![Page 42: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/42.jpg)
C# namespace
namespace Peanuts
{
}
![Page 43: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/43.jpg)
JavaScript (Ad-hoc) namespace
var Peanuts = {}; // Object used as namespace
![Page 44: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/44.jpg)
JavaScript (Ad-hoc) namespace
var Peanuts = Peanuts || {}; // in case it already exists
![Page 45: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/45.jpg)
C# Namespace
namespace Peanuts
{
public class Person
{
}
}
![Page 46: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/46.jpg)
«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
![Page 47: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/47.jpg)
Immediately invoked function expressions
• (function () {
• // logic/code here
• })();
![Page 48: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/48.jpg)
Why?
• Executes an expression and therefore code immediately
• Creates «privacy» for your code (function scope ftw!)
![Page 49: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/49.jpg)
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.
![Page 50: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/50.jpg)
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).
![Page 51: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/51.jpg)
Immediately invoked function expressions
• (function ($) {
• // logic/code here
• })(jQuery);
![Page 52: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/52.jpg)
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
![Page 53: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/53.jpg)
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
![Page 54: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/54.jpg)
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
![Page 55: Javascript basics](https://reader035.vdocument.in/reader035/viewer/2022062405/555e28f3d8b42a6a4c8b5097/html5/thumbnails/55.jpg)
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