Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript 101                      Sven Lito - Front-end Developer                 slito@tagworldwide.com + @svenlito + h...
Friday, 13 May 2011
What is JavaScript ?Friday, 13 May 2011
JavaScript:           ★          Created by Brendan Eich 1995           ★          Developed in less than 2 Weeks         ...
What it’s not..Friday, 13 May 2011
JavaScript                                               jQuery      probs to: rebecca murpheyFriday, 13 May 2011
Friday, 13 May 2011
JavaScript BasicsFriday, 13 May 2011
Variable Declaration:             var arnoldSchwarzenegger = "Actor",                 isNiceGuy = false;Friday, 13 May 2011
Function Declaration:                      function arniQuote() {                         return "Ill be back.";          ...
function makeMovie(withLindaHamilton) {             var rad = withLindaHamilton || false;          };Friday, 13 May 2011
isGovernor ? "Cool Dude" : "No? Awww..";Friday, 13 May 2011
Comparison OperatorsFriday, 13 May 2011
★ = Assignment                      ★ == Equality                      ★ === IdentityFriday, 13 May 2011
// Assignment                var bestFriend = "T1000";                // Equality                if (5 == "5") {          ...
// Short-circuit logic                if (true || false)                if (false && true)                // Makes this co...
Typecasting, baby!                      "..changing an entity of one data type into another."Friday, 13 May 2011
// true                5 == "5"                // "123"                "1" + 2 + 3;Friday, 13 May 2011
// 6, manual type conversion                parseInt("1", 10) + 2 + 3;                      parseInt: Parses a string argu...
JavaScript data typesFriday, 13 May 2011
Primitive data types:                      ★   Undefined                      ★   Null                      ★   Boolean   ...
Primitive data types:                      ★   Undefined                      ★   Null                      ★   Boolean   ...
Primitive data types:                      ★   Undefined                      ★   Null                      ★   Boolean   ...
"Everything in JavaScript                      acts like an object, with                      the only two exceptions     ...
Type checkingFriday, 13 May 2011
typeof return values:                      ★   string                      ★   number                      ★   boolean    ...
typeof fanClub // "undefined"                var title = "Conan the Barbarian";                typeof title // Equals "str...
function anotherQuote() {            return "If it bleeds, we can kill it.";          }          typeof anotherQuote; // "...
var obj = {};       typeof obj // "object"       var arr = ["A", "R", "N", "O", "L", "D"];       typeof arr // "object"Fri...
var obj = {};       typeof obj // "object"       var arr = ["A", "R", "N", "O", "L", "D"];       typeof arr // "object"   ...
using instanceofFriday, 13 May 2011
obj instanceof Array // false         arr instanceof Array // trueFriday, 13 May 2011
FunctionsFriday, 13 May 2011
procedural                function notAHit() {                  return "Stay Hungry";                }Friday, 13 May 2011
Functions as variables           var wroteScript = function () {              return "The 6th Day";           };          ...
Anonymous         $(#conan).bind(click, function (e) {           alert("some string");         });                      I’...
Immediately-Invoked                      Function Expression                            (IIFE)                (function() ...
(function() {                  var judgmentDay = "Shot in 1991";                  return judgmentDay;                })();...
Function argumentsFriday, 13 May 2011
★ the arguments collection                      ★ Property: arguments.length                      ★ NOT an array   (array-...
function sum(a, b, c) {                        return a + b + c;                      }                      sum(1, 2, 3);...
function sum() {                  var sum = 0,                      l = arguments.length,                      i = 0;     ...
ObjectsFriday, 13 May 2011
Object literal                      var arnold = {                         name : "Arnold Schwarzenegger",                ...
Object notation                       arnold["arms"] = 2;                       arnold.arms = 2;                       did...
Object notation                          arnold["arms"] = 2;                          arnold.arms = 2;                    ...
works with any object                      var arnold = {};                      arnold[1972] = "Year of birth";          ...
var decentMovie = {        title : "Red Sonia",        year : 1997     };     for (var item in decentMovie) {       /*    ...
Arni aside, srsly.                      How do I use all of                      this in real life?Friday, 13 May 2011
// TAG namespace                TAG = window.TAG || {};                var TAG = (function ($) {                      // p...
Questions??Friday, 13 May 2011
Thanks!    email: slito@tagworldwide.com    twitter: @svenlitoFriday, 13 May 2011
Upcoming SlideShare
Loading in …5
×

JavaScript 101

3,545 views

Published on

Short presentation I gave on JavaScript Basics

Published in: Technology
  • Be the first to comment

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

×