This document provides an introduction to JavaScript, covering its history, data types, operators, functions, and objects. It was created by Sven Lito, a front-end developer. The document discusses that JavaScript was created in 1995 and influenced by Scheme, Java, and Self. It also clarifies that JavaScript is not the same as jQuery. The basics sections cover variables, functions, comparison operators, typecasting, and primitive data types. Later sections explain functions, objects, and real-world usage of JavaScript.

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