JavaScript Primer

  • 1,585 views
Uploaded on

A primer for JavaScript that covers from basic variable definition to scoping, "this", and a brief foray into the DOM and jQuery.

A primer for JavaScript that covers from basic variable definition to scoping, "this", and a brief foray into the DOM and jQuery.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,585
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
26
Comments
1
Likes
1

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. JavaScriptA Primer In Far Too Many Parts
  • 2. History
  • 3. Mocha April 1995 LiveScript JavaScriptBrendan EichCTO, Mozilla Corp.
  • 4. JScriptJavaScript ECMAScript ActionScript
  • 5. Basics
  • 6. Data Types• number• string• boolean• object• null• NaN• undefined
  • 7. Strings• Are Objects, have methods
  • 8. Strings"Foo" + "Bar"; //"FooBar"var str = "Lorem Ipsum Dolor Sit Amet";str.toLowerCase(); //"lorem ipsum dolor sit amet"str.toUpperCase(); //"LOREM IPSUM DOLOR SIT AMET"str.split(" "); //["Lorem", "Ispum", "Dolor", "Sit", "Amet"]str.substring(6,9); //"Ips"new String("Lorem Ipsum Dolor Sit Amet") == str; //true
  • 9. String to NumberparseInt("56"); //56parseInt("42.567"); //42parseInt("asdf"); //NaNparseInt("5a6"); //5parseFloat("24.68"); //24.68parseFloat("asdf"); //NaNparseFloat("24a"); //24
  • 10. Objects• “Dictionary” / “Associative Array”• Key: Value or Key: Value • Without : A-Z0-9 only• Does not keep intrinsic ordering• Accessed keys using . (dot) or [] notation
  • 11. Objectsvar object = { foo: value, complex key: 0, bar: { nested: true }};object.foo; //valueobject.[complex key]; //0object.bar.nested; //trueobject.bar[nested]; //trueobject[bar].nested; //trueobject[bar][nested]; //true
  • 12. in or hasOwnProperty()• Tough call: • .hasOwnProperty() more consistent • in checks inherited properties • Used in for loop
  • 13. invar test = { foo: value, bar: value, baz: value}for (var key in test) { console.log(key + ": " + test[key]);}//PRINTS://foo: value//bar: value//baz: value
  • 14. Arrays• Special object• Numerical keys only• Keeps intrinsic ordering• Short ([]) and Long (new Array()) syntax
  • 15. Arraysvar arrayShort = [ one, two];arrayShort[2] = three;var arrayLong = new Array();arrayLong[0] = one;arrayLong[1] = two;arrayLong[2] = three;//arrayShort: ["one", "two", "three"]//arrayLong: ["one", "two", "three"]
  • 16. Arraysvar arr = [1,2,3,4,6];arr.indexOf(2); //1arr.join(:); //"1:2:3:4:6"arr.pop(); //6//[1,2,3,4]arr.push(7); //5//[1,2,3,4,7]arr.reverse(); //[7,4,3,2,1]arr.shift(); //1//[2,3,4,7]arr.unshift(8); //5//[8,2,3,4,7]arr.slice(1); //[2,3,4,7]arr.slice(1,3); //[2,3]arr.slice(-3); //[3,4,7]arr.slice(-3,-1); //[3,4]
  • 17. Arraysvar arr1 = [1,2,3];var arr2 = [3,4,5];arr1.concat(arr2); //[1,2,3,3,4,5]
  • 18. Functions• Are Objects as well• “Elevated” • You can use a named function before it is defined in code • Function definitions are elevated to the top
  • 19. Functionsfunction Foo() { //...}Foo(); //validBar(); //validfunction Bar() { //...}
  • 20. Functionsfunction Foo() {}Foo.bar = "value";bar in Foo; //trueFoo.bar == "value"; //true
  • 21. Function Arguments• No way to assign default arguments• But arguments are not required • If an argument is not specified, it is set to undefined
  • 22. arguments• A special variable found inside a function• A not-quite array object containing all the function arguments
  • 23. argumentsfunction sum() { var x = 0; for (var i = 0; i < arguments.length; ++i) { x += arguments[i]; } return x;}sum(1, 2, 3); //6
  • 24. typeof• Determines a variables type• Returns a string
  • 25. typeoftypeof true; //"boolean"typeof 12; //"number"typeof "string"; //"string"typeof []; //"object"typeof {}; //"object"typeof NaN; //"number"typeof null; //"object"typeof undefined; //"undefined"function Foo() {}typeof Foo; //"function"
  • 26. Comparison• a == b / a != b • A and B compared by value alone • 1 == “1” evaluates to true• a === b / a !== b • A and B compared by value and by type • 1 === “1” evaluates to false
  • 27. window, document• Built in, global, Objects• window • Provides access to the browser window • The “global” object: foo === window.foo • Things like window.location.href, etc• document • Provides access to the current DOM
  • 28. Scoping
  • 29. Global & Local• Functions are the only way to create new scopes• Variables defined with var are local• Variables defined without var are global• Global variables are members of window
  • 30. Global & Localvar outerScope = 10;var outerScope2 = 10;function Foo() { var outerScope = 20; var innerScope = 20; globalVariable = 30; outerScope2 = 40;}Foo();alert(outerScope); //10alert(outerScope2); //40alert(innerScope); //erroralert(globalVariable); //30
  • 31. Lexical Scopingfunction Foo() { function Foo() { var baz = 1; var baz = 1; return Bar();} function Bar() { return baz;function Bar() { } return baz;} return Bar(); }Foo(); //baz is not defined Foo(); //1
  • 32. Closures
  • 33. Closures• First-Class • Can assign functions to variables, pass as arguments and return as values• Anonymous • Not required to have a name• A function that “closes over” variables defined outside itself
  • 34. Closuresfunction Foo() { var count = 0; return function() { count = count + 1; return count; };}var bar = Foo();bar(); //1bar(); //2bar(); //3
  • 35. Closuresfunction createAdder(amount) { return function(input) { return input + amount; };}var add2 = createAdder(2);add2(2); //4add2(8); //10var add3 = createAdder(3);add3(3); //6add3(7); //10
  • 36. Module Pattern (function(exports, undefined){ //ALL your code here var localVar = "bar" globalVar = "baz"; exports.foo = "bat"; })(window); alert(localVar); //error alert(globalVar); //"baz" alert(window.globalVar); //"baz" alert(foo); //"bat" alert(window.foo); //"bat"BEWARE: export (singular) is a reserved word in Safari
  • 37. this
  • 38. this• Trips everyone up• Special variable used within a function• Refers to the “contextual object”• Changes based on where a function executes
  • 39. thisvar Foo = { bar: "bar", baz: function() { return this.bar; }};Foo.baz(); //"bar"Foo.bar = "bat";Foo.baz(); //"bat"var baz = Foo.baz;baz(); //undefined
  • 40. thisvar Foo = { bar: "bar", baz: function() { return this.bar; }};Foo.bat = function() { return this.bar + "bat";};Foo.bat(); //"barbat"
  • 41. call & apply• Methods in the function prototype• Change the context in which a function executes!
  • 42. call & applyvar Foo = { bar: "bar", baz = function(param1, param2) { return this.bar + param1 + param2; }};var Foo2 = { bar: "123"};Foo.baz("baz", "bat"); //"barbazbat"Foo.baz.apply(Foo2, "baz", "bat"); //"123bazbat"Foo.baz.call(Foo2, ["baz", "bat"]); //"123bazbat"
  • 43. Exceptions
  • 44. Exceptions• All errors are thrown• Classic try...catch...finally blocks
  • 45. Exceptionstry { funcDoesNotExist();} catch (e) { alert(e); //ReferenceError: funcDoesNotExist is not defined} finally { //Always Executes}
  • 46. Exceptionsfunction Foo() { throw new Error("Message");}function Bar() { throw "Message";}try { Foo();} catch (e) { e.message == "Message"; //true}try { Bar();} catch (e) { e == "Message"; //true}
  • 47. Prototype
  • 48. OOP... Kinda...• Almost no real difference between a dictionary and an object• Named Functions double as object constructors• Function objects contain a prototype dictionary that is copied to instance when using new
  • 49. OOP... Kinda... Foofunction Foo() { //The "Constructor"} ‣ barFoo.bar = function() { //A "Static" Function ‣ prototype} ‣ bazFoo.prototype.baz = function() { ‣ constructor //A "Method"}; ‣ __proto__
  • 50. new instancevar instance = new Foo();instance.baz(); //worksinstance.bar(); //error ‣ __proto__Foo.bar(); //works ‣ bazFoo.baz(); //error ‣ constructorFoo.prototype.baz(); //works ‣ __proto__ ‣ ...
  • 51. new instanceinstance.bat = function() { /* ... */} ‣ batinstance.bat(); //works ‣ __proto__Foo.bat(); //error ‣ bazFoo.prototype.bat(); //error ‣ constructor ‣ __proto__ ‣ ...
  • 52. Overriding Prototypefunction Foo(baz) { this.baz = baz;}Foo.prototype.bar = function() { return this.baz;};var foo1 = new Foo(1);var foo2 = new Foo(2);foo1.bar(); //1foo2.bar(); //2Foo.prototype.bar = function() { return this.baz * 2;};foo1.bar(); //2foo2.bar(); //4
  • 53. Asynchronous
  • 54. Asynchronous• setTimeout, setInterval allow you to have code executing asynchronously while other code executes
  • 55. setIntervalvar id = setInterval(function() { //Code to execute every 1000 milliseconds}, 1000);//clearInterval(id); to stop
  • 56. setTimeoutvar id = setTimeout(function() { //Code to execute after 1000 milliseconds have passed}, 1000);//clearTimeout(id); to cancel
  • 57. Nifty TricksetTimeout(function() { //Code to run in parallel //while the code after is //executed.}, 1);//Code here will execute immediately//without waiting on the above
  • 58. DOM
  • 59. DOM• Document Object Model• API to interact with the HTML/XHTML document
  • 60. DOMvar paragraph = document.createElement(p);var content = document.createTextNode("Lorem Ipsum");paragraph.appendChild(content);paragraph.classList.add(my-class);document.getElementsByTagName(body)[0].appendChild(paragraph);
  • 61. JSON
  • 62. 2001 JSONDouglas Crockford Awesome
  • 63. JSON• JavaScript Object Notation• Serialization format that is basically JavaScript code minus comments• Can be eval()’ed• Minimal overhead compared to XML • No advanced parsers needed
  • 64. JSON{"menu": { <menu id="file" value="File"> "id": "file", <popup> "value": "File", <menuitem value="New" "popup": { onclick="CreateNewDoc()" /> "menuitem": [ <menuitem value="Open" {"value": "New", onclick="OpenDoc()" /> "onclick": "CreateNewDoc()"}, <menuitem value="Close" {"value": "Open", onclick="CloseDoc()" /> "onclick": "OpenDoc()"}, </popup> {"value": "Close", </menu> "onclick": "CloseDoc()"} ] }}}
  • 65. jQuery
  • 66. January 2006 jQueryJohn ResigAuthor, jQuery
  • 67. jQuery• Cross-browser JavaScript library• Simplifies and normalizes DOM, AJAX, etc.• Centers around using extended CSS selectors to grab an element(s)
  • 68. jQuery$("div").addClass("special"); Find all div tags Add class special
  • 69. jQuery$("#foo") <div id="foo"></div> .html("<strong>bar</strong> baz"); <div id="foo"> <strong>bar</strong> baz </div>
  • 70. jQuery$(img.preview).hide();$(.button).click(function(){ •Hide all images with}); $(img.preview).show(); the class preview •When element with the class button is clicked, show all images with the class preview
  • 71. Animation$(.button).click(function(){ $(img.preview) When .button is clicked, .fadeOut(600, function() { fade out img.preview $(this).remove(); }); over 600 milliseconds}); and then remove it from the DOM
  • 72. Events• jQuery wraps an event handling system• Handles browser events, AJAX events, and custom events
  • 73. Events$(document).ready(function() { //Only execute when the document fires //its onready event (page is done loading)});$(document).bind(ready, function() { //Equivalent to the above});
  • 74. Events$(img).hover(function(){ //Do something when user hovers over //any img tag});
  • 75. AJAX• Asynchronous JavaScript And XML • Though never use XML, use JSON• jQuery has an AJAX library• Wraps all the different browser quirks • IE is weird
  • 76. AJAX$.ajax({ url: "test.php", success: function(data){ $(div.status).addClass("done") .html(data); }});
  • 77. Resourceshttp://api.jquery.com/
  • 78. Tools
  • 79. Chrome/Safari Devel. Tools
  • 80. Firefox FireBug