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: "B...
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
// Exponentia...
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");

// ["ep...
Objects
• Everything is an Object
Objects
•
•
•
•
•

Everything is an Object
Booleans can be objects or primitive data treated as objects
Numbers can be obj...
Object literal
An object is just a special kind of data,
with properties and methods.
var person = {
firstName: "John",
la...
Object literal
An object is just a special kind of data,
with properties and methods.
var person = {
firstName: "John",
la...
Object literal
An object is just a special kind of data,
with properties and methods.
var person = {
firstName: "John",
la...
Functions
a block of code that will be executed when "someone" calls it:
function add(a, b) {
return a + b;
}
var add = fu...
Object Constructor
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var rand...
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"); }

• «...
True! 
• if (true) { alert("true"); } // alerts "true"
• if ('false') { alert("true"); } // alerts "true"

• if ([]) { al...
False 
• if (false) { alert("false"); } // does nothing
• if (0) { alert("false"); } // does nothing

• if (null) { alert...
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"
true
false == "0" == 1 == true == [] == ""
More type coercion 
1 == "1"
true
true == "1"

true
false == "0"
true
false == "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 scop...
Scope & global variables
• Javascript: only functions define a new scope
• Example:
if (true) {
var scopeVariable = "Test"...
Scope & global variables
function scope1() {
var member; //is a member of the scope defined by the function example
//this...
Scope & global variables
function scope1() {
var member; //is a member of the scope defined by the function example
//this...
Scope & global variables
function scope1() {
var member;

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

//th...
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;

},
subt...
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
pa...
Immediately invoked function expressions
•
•
•
•
•

(function () {
// logic/code here
})();
The key thing about JavaScript...
Immediately invoked function expressions
• (function ($) {
•
// logic/code here
• })(jQuery);
Revealing module pattern
var Peanuts = Peanuts || {};
Peanuts.Calculator = function () {
var add = function(a, b) {
return...
Revealing module pattern 2
var Peanuts = Peanuts || {};
Peanuts.Calculator = (function () {
var add = function(a, b) {
ret...
Revealing module pattern 3
var Peanuts = Peanuts || {};
Peanuts.Calculator = (function () {
var PI = 3.14; // private vari...
Sources
• http://javascriptweblog.wordpress.com/2010/06/07/understandingjavascript-prototypes/

• www.w3schools.com
• http...
Javascript basics
Upcoming SlideShare
Loading in...5
×

Javascript basics

331

Published on

Presentasjon fra Peanuts Talks som er en intern arena for å dele kunnskap med kollegaer. Presentasjonen ble holdt av Joar Gullestad Pettersen

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
331
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript basics

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

    Clipping is a handy way to collect important slides you want to go back to later.

×