JavaScript Basics Adam Crabtree (Adapted from Joar Gullestad Pettersen’s http://slideshare.net/Peanuts_Stavanger/javascript-basics-29353026)
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
JavaScript BasicsAdam Crabtree
(Adapted from Joar Gullestad Pettersen’s
http://slideshare.net/Peanuts_Stavanger/javascript-basics-29353026)
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 andmethods.
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') { console.log("true"); }
• «A String is obviously not true or false, you probablymean 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?
JavaScript (Ad-hoc) namespace
var Peanuts = {}; // Object used as namespace
JavaScript (Ad-hoc) namespace
var Peanuts = Peanuts || {}; // in case it alreadyexists
«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 (innerValue) {
• // logic/code here
• })(outerValue);
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
Related Documents
