Your SlideShare is downloading. ×
0
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
JavaScript 101
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

JavaScript 101

2,743

Published on

Short presentation I gave on JavaScript Basics

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
2,743
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
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 101 Sven Lito - Front-end Developer slito@tagworldwide.com + @svenlito + http://svenlito.comFriday, 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-OrientedFriday, 13 May 2011
  • 5. What it’s not..Friday, 13 May 2011
  • 6. JavaScript jQuery probs to: rebecca murpheyFriday, 13 May 2011
  • 7. Friday, 13 May 2011
  • 8. JavaScript BasicsFriday, 13 May 2011
  • 9. Variable Declaration: var arnoldSchwarzenegger = "Actor", isNiceGuy = false;Friday, 13 May 2011
  • 10. Function Declaration: function arniQuote() { return "Ill 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 OperatorsFriday, 13 May 2011
  • 14. ★ = Assignment ★ == Equality ★ === IdentityFriday, 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 typesFriday, 13 May 2011
  • 21. Primitive data types: ★ Undefined ★ Null ★ Boolean ★ Number ★ String ★ objectFriday, 13 May 2011
  • 22. Primitive data types: ★ Undefined ★ Null ★ Boolean ★ Number ★ String ★ object << not this guyFriday, 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 SchwarzeneggerFriday, 13 May 2011
  • 25. Type checkingFriday, 13 May 2011
  • 26. typeof return values: ★ string ★ number ★ boolean ★ function ★ object ★ undefinedFriday, 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 instanceofFriday, 13 May 2011
  • 32. obj instanceof Array // false arr instanceof Array // trueFriday, 13 May 2011
  • 33. FunctionsFriday, 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 operatorFriday, 13 May 2011
  • 39. Function argumentsFriday, 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); // NaNFriday, 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); // 26Friday, 13 May 2011
  • 43. ObjectsFriday, 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 syntaxFriday, 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: @svenlitoFriday, 13 May 2011

×