JavaScript 101

3,256 views
3,115 views

Published on

Short presentation I gave on JavaScript Basics

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

No Downloads
Views
Total views
3,256
On SlideShare
0
From Embeds
0
Number of Embeds
498
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

JavaScript 101

  1. 1. JavaScript 101 Sven Lito - Front-end Developer slito@tagworldwide.com + @svenlito + http://svenlito.comFriday, 13 May 2011
  2. 2. Friday, 13 May 2011
  3. 3. What is JavaScript ?Friday, 13 May 2011
  4. 4. JavaScript: ★ Created by Brendan Eich 1995 ★ Developed in less than 2 Weeks ★ First release in NetScape 2 ★ Influenced by Scheme,Java,Self ★ Interpreted language ★ Object-OrientedFriday, 13 May 2011
  5. 5. What it’s not..Friday, 13 May 2011
  6. 6. JavaScript jQuery probs to: rebecca murpheyFriday, 13 May 2011
  7. 7. Friday, 13 May 2011
  8. 8. JavaScript BasicsFriday, 13 May 2011
  9. 9. Variable Declaration: var arnoldSchwarzenegger = "Actor", isNiceGuy = false;Friday, 13 May 2011
  10. 10. Function Declaration: function arniQuote() { return "Ill be back."; };Friday, 13 May 2011
  11. 11. function makeMovie(withLindaHamilton) { var rad = withLindaHamilton || false; };Friday, 13 May 2011
  12. 12. isGovernor ? "Cool Dude" : "No? Awww..";Friday, 13 May 2011
  13. 13. Comparison OperatorsFriday, 13 May 2011
  14. 14. ★ = Assignment ★ == Equality ★ === IdentityFriday, 13 May 2011
  15. 15. // Assignment var bestFriend = "T1000"; // Equality if (5 == "5") { //true } // Identity if (5 === "5") { //false }Friday, 13 May 2011
  16. 16. // Short-circuit logic if (true || false) if (false && true) // Makes this code safe if (obj && obj.property)Friday, 13 May 2011
  17. 17. Typecasting, baby! "..changing an entity of one data type into another."Friday, 13 May 2011
  18. 18. // true 5 == "5" // "123" "1" + 2 + 3;Friday, 13 May 2011
  19. 19. // 6, manual type conversion parseInt("1", 10) + 2 + 3; parseInt: Parses a string argument and returns an integer of the specified radix or base.Friday, 13 May 2011
  20. 20. JavaScript data typesFriday, 13 May 2011
  21. 21. Primitive data types: ★ Undefined ★ Null ★ Boolean ★ Number ★ String ★ objectFriday, 13 May 2011
  22. 22. Primitive data types: ★ Undefined ★ Null ★ Boolean ★ Number ★ String ★ object << not this guyFriday, 13 May 2011
  23. 23. Primitive data types: ★ Undefined ★ Null ★ Boolean ★ Number ★ String ★ object Hi, I’m smart..Friday, 13 May 2011
  24. 24. "Everything in JavaScript acts like an object, with the only two exceptions being null and undefined." - Arnold SchwarzeneggerFriday, 13 May 2011
  25. 25. Type checkingFriday, 13 May 2011
  26. 26. typeof return values: ★ string ★ number ★ boolean ★ function ★ object ★ undefinedFriday, 13 May 2011
  27. 27. typeof fanClub // "undefined" var title = "Conan the Barbarian"; typeof title // Equals "string" var age = 64; typeof age // Equals "number"Friday, 13 May 2011
  28. 28. function anotherQuote() { return "If it bleeds, we can kill it."; } typeof anotherQuote; // "function"Friday, 13 May 2011
  29. 29. var obj = {}; typeof obj // "object" var arr = ["A", "R", "N", "O", "L", "D"]; typeof arr // "object"Friday, 13 May 2011
  30. 30. var obj = {}; typeof obj // "object" var arr = ["A", "R", "N", "O", "L", "D"]; typeof arr // "object" Blimey!Friday, 13 May 2011
  31. 31. using instanceofFriday, 13 May 2011
  32. 32. obj instanceof Array // false arr instanceof Array // trueFriday, 13 May 2011
  33. 33. FunctionsFriday, 13 May 2011
  34. 34. procedural function notAHit() { return "Stay Hungry"; }Friday, 13 May 2011
  35. 35. Functions as variables var wroteScript = function () { return "The 6th Day"; }; wroteScript();Friday, 13 May 2011
  36. 36. Anonymous $(#conan).bind(click, function (e) { alert("some string"); }); I’m in your jQuery’s binding yo clicks..Friday, 13 May 2011
  37. 37. Immediately-Invoked Function Expression (IIFE) (function() { var judgmentDay = "Shot in 1991"; return judgmentDay; })();Friday, 13 May 2011
  38. 38. (function() { var judgmentDay = "Shot in 1991"; return judgmentDay; })(); Invocation operatorFriday, 13 May 2011
  39. 39. Function argumentsFriday, 13 May 2011
  40. 40. ★ the arguments collection ★ Property: arguments.length ★ NOT an array (array-like object)Friday, 13 May 2011
  41. 41. function sum(a, b, c) { return a + b + c; } sum(1, 2, 3); // 6 sum(1, 2); // NaNFriday, 13 May 2011
  42. 42. function sum() { var sum = 0, l = arguments.length, i = 0; for (i; i < l; i++) { sum += arguments[i]; } return sum; } sum(1, 2, 3); // 6 sum(1, 2); // 3 sum(1, 2, 7, 11, 5); // 26Friday, 13 May 2011
  43. 43. ObjectsFriday, 13 May 2011
  44. 44. Object literal var arnold = { name : "Arnold Schwarzenegger", gotAnOscar : true }; alert(arnold.name); // "Arnold Schwarzenegger"Friday, 13 May 2011
  45. 45. Object notation arnold["arms"] = 2; arnold.arms = 2; did you just say array?Friday, 13 May 2011
  46. 46. Object notation arnold["arms"] = 2; arnold.arms = 2; Same thing, different syntaxFriday, 13 May 2011
  47. 47. works with any object var arnold = {}; arnold[1972] = "Year of birth"; arnold["born"] = 1972; arnold[true] = false;Friday, 13 May 2011
  48. 48. var decentMovie = { title : "Red Sonia", year : 1997 }; for (var item in decentMovie) { /* make sure we only check decentMovie and not the whole prototype chain */ if (decentMovie.hasOwnProperty(item)) { alert(item + ": " + decentMovie[item]); } }Friday, 13 May 2011
  49. 49. Arni aside, srsly. How do I use all of this in real life?Friday, 13 May 2011
  50. 50. // TAG namespace TAG = window.TAG || {}; var TAG = (function ($) { // private vars var privateVar1 = $(#boo-selecta), privateVar2 = $(#braaap), badAssArray = []; return { // approvals module approvals: { methodCall1: function (jQuery, TAG) { alert("some string"); } } }; })(jQuery); TAG.approvals.methodCall1(); // "some string"Friday, 13 May 2011
  51. 51. Questions??Friday, 13 May 2011
  52. 52. Thanks! email: slito@tagworldwide.com twitter: @svenlitoFriday, 13 May 2011

×