Short presentation I gave on JavaScript Basics

1. JavaScript 101
Sven Lito - Front-end Developer
slito@tagworldwide.com + @svenlito + http://svenlito.com
Friday, 13 May 2011

2. Friday, 13 May 2011

3. What is JavaScript ?
Friday, 13 May 2011

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-Oriented
Friday, 13 May 2011

5. What it’s not..
Friday, 13 May 2011

6. JavaScript
jQuery
probs to: rebecca murphey
Friday, 13 May 2011

7. Friday, 13 May 2011

8. JavaScript Basics
Friday, 13 May 2011

9. Variable Declaration:
var arnoldSchwarzenegger = "Actor",
isNiceGuy = false;
Friday, 13 May 2011

10. Function Declaration:
function arniQuote() {
return "I'll be back.";
};
Friday, 13 May 2011

11. function makeMovie(withLindaHamilton) {
var rad = withLindaHamilton || false;
};
Friday, 13 May 2011

12. isGovernor ? "Cool Dude" : "No? Awww..";
Friday, 13 May 2011

13. Comparison Operators
Friday, 13 May 2011

14. ★ = Assignment
★ == Equality
★ === Identity
Friday, 13 May 2011

15. // Assignment
var bestFriend = "T1000";
// Equality
if (5 == "5") {
//true
}
// Identity
if (5 === "5") {
//false
}
Friday, 13 May 2011

16. // Short-circuit logic
if (true || false)
if (false && true)
// Makes this code safe
if (obj && obj.property)
Friday, 13 May 2011

17. Typecasting, baby!
"..changing an entity of one data type into another."
Friday, 13 May 2011

18. // true
5 == "5"
// "123"
"1" + 2 + 3;
Friday, 13 May 2011

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. JavaScript data types
Friday, 13 May 2011

21. Primitive data types:
★ Undefined
★ Null
★ Boolean
★ Number
★ String
★ object
Friday, 13 May 2011

22. Primitive data types:
★ Undefined
★ Null
★ Boolean
★ Number
★ String
★ object << not this guy
Friday, 13 May 2011

23. Primitive data types:
★ Undefined
★ Null
★ Boolean
★ Number
★ String
★ object Hi, I’m
smart..
Friday, 13 May 2011

24. "Everything in JavaScript
acts like an object, with
the only two exceptions
being null and undefined."
- Arnold Schwarzenegger
Friday, 13 May 2011

25. Type checking
Friday, 13 May 2011

26. typeof return values:
★ string
★ number
★ boolean
★ function
★ object
★ undefined
Friday, 13 May 2011

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. function anotherQuote() {
return "If it bleeds, we can kill it.";
}
typeof anotherQuote; // "function"
Friday, 13 May 2011

29. var obj = {};
typeof obj // "object"
var arr = ["A", "R", "N", "O", "L", "D"];
typeof arr // "object"
Friday, 13 May 2011

30. var obj = {};
typeof obj // "object"
var arr = ["A", "R", "N", "O", "L", "D"];
typeof arr // "object"
Blimey!
Friday, 13 May 2011

31. using instanceof
Friday, 13 May 2011

32. obj instanceof Array // false
arr instanceof Array // true
Friday, 13 May 2011

33. Functions
Friday, 13 May 2011

34. procedural
function notAHit() {
return "Stay Hungry";
}
Friday, 13 May 2011

35. Functions as variables
var wroteScript = function () {
return "The 6th Day";
};
wroteScript();
Friday, 13 May 2011

36. Anonymous
$('#conan').bind('click', function (e) {
alert("some string");
});
I’m in your jQuery’s binding yo clicks..
Friday, 13 May 2011

37. Immediately-Invoked
Function Expression
(IIFE)
(function() {
var judgmentDay = "Shot in 1991";
return judgmentDay;
})();
Friday, 13 May 2011

38. (function() {
var judgmentDay = "Shot in 1991";
return judgmentDay;
})();
Invocation operator
Friday, 13 May 2011

39. Function arguments
Friday, 13 May 2011

40. ★ the arguments collection
★ Property: arguments.length
★ NOT an array (array-like object)
Friday, 13 May 2011

41. function sum(a, b, c) {
return a + b + c;
}
sum(1, 2, 3); // 6
sum(1, 2); // NaN
Friday, 13 May 2011

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); // 26
Friday, 13 May 2011

43. Objects
Friday, 13 May 2011

44. Object literal
var arnold = {
name : "Arnold Schwarzenegger",
gotAnOscar : true
};
alert(arnold.name); // "Arnold Schwarzenegger"
Friday, 13 May 2011

45. Object notation
arnold["arms"] = 2;
arnold.arms = 2;
did you just say array?
Friday, 13 May 2011

46. Object notation
arnold["arms"] = 2;
arnold.arms = 2;
Same thing, different syntax
Friday, 13 May 2011

47. works with any object
var arnold = {};
arnold[1972] = "Year of birth";
arnold["born"] = 1972;
arnold[true] = false;
Friday, 13 May 2011

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. Arni aside, srsly.
How do I use all of
this in real life?
Friday, 13 May 2011

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. Questions??
Friday, 13 May 2011

52. Thanks!
email: slito@tagworldwide.com
twitter: @svenlito
Friday, 13 May 2011