Your SlideShare is downloading. ×
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
LinkedIn TBC JavaScript 100: Intro
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

LinkedIn TBC JavaScript 100: Intro

168

Published on

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

No Downloads
Views
Total Views
168
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript Basics Adam Crabtree (Adapted from Joar Gullestad Pettersen’s http://slideshare.net/Peanuts_Stavanger/javascript-basics-29353026)
  • 2. JavaScript Data Types String, Number, Boolean, Array, Object, Null, Undefined
  • 3. Dynamic Types • var x;
  • 4. Dynamic Types var x; // x is: undefined
  • 5. Dynamic Types var x; // x is: undefined x = 5; // x is set to a Number: 5
  • 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. Strings var car = "Telsa Model S"; var car2 = 'Tesla Model S';
  • 8. Numbers • var x = 42; • var y = 13.37; • var z = 10e3; // Written without decimals // Written with decimals // Exponential notation
  • 9. Booleans • var x = true; • var y = false;
  • 10. Array var frukt = new Array(); frukt[0] = "eple"; frukt[1] = "banan"; frukt[2] = "pære"; ["eple", "banan", "pære"]
  • 11. Array 2 var frukt = new Array("eple", "banan", "pære"); ["eple", "banan", "pære"]
  • 12. Array 3 var frukt = ["eple", "banan", "pære"]; ["eple", "banan", "pære"]
  • 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. Objects • Everything is an Object
  • 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. Object literal An object is just a special kind of data, with properties and methods. var person = { firstName: "John", lastName: "Doe", id: 5 };
  • 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. 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. 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. Object Constructor function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } var randomPerson = new Person("John", "Doe");
  • 21. Object var randomPerson = new Object(); randomPerson.firstName = "John"; randomPerson.lastName = "Doe";
  • 22. Boolean expressions if (a == 2) {//if this is true //do this... }
  • 23. 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 probably mean true!»
  • 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. 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. More type coercion  1 == "1" true == "1" false == "0"
  • 27. More type coercion  1 == "1" true true == "1" false == "0"
  • 28. More type coercion  1 == "1" true true == "1" true false == "0"
  • 29. More type coercion  1 == "1" true true == "1" true false == "0" true
  • 30. More type coercion 1 == "1" true true == "1" true false == "0" true false == "0" == 1 == true == [] == ""
  • 31. More type coercion  1 == "1" true true == "1" true false == "0" true false == "0" == 1 == true == [] == "" true
  • 32. Confusing? • Solution?
  • 33. Confusing? • Solution? • Avoid bugs| and use: ===
  • 34. === 1 == true true 1 === true false 1 == "1" true 1 === "1" false
  • 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. Scope & global variables • Javascript: only functions define a new scope • Example: if (true) { var scopeVariable = "Test"; } scopeVariable; // value: "Test";
  • 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. 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. 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. Namespaces • Not built into JavaScript • Problem?
  • 41. JavaScript (Ad-hoc) namespace var Peanuts = {}; // Object used as namespace
  • 42. JavaScript (Ad-hoc) namespace var Peanuts = Peanuts || {}; // in case it already exists
  • 43. «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
  • 44. Immediately invoked function expressions • (function () { • // logic/code here • })();
  • 45. Why? • Executes an expression and therefore code immediately • Creates «privacy» for your code (function scope ftw!)
  • 46. 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.
  • 47. 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).
  • 48. Immediately invoked function expressions • (function (innerValue) { • // logic/code here • })(outerValue);
  • 49. 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
  • 50. 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
  • 51. 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

Ă—