JavaScript Primer
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

JavaScript Primer

  • 2,127 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
2,127
On Slideshare
2,111
From Embeds
16
Number of Embeds
3

Actions

Shares
Downloads
25
Comments
1
Likes
1

Embeds 16

http://sdcjira01.burstabit.lan 12
http://coderwall.com 2
http://www.linkedin.com 2

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