• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript Primer
 

JavaScript Primer

on

  • 1,948 views

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.

Statistics

Views

Total Views
1,948
Views on SlideShare
1,932
Embed Views
16

Actions

Likes
1
Downloads
25
Comments
1

3 Embeds 16

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript Primer JavaScript Primer Presentation Transcript

    • JavaScriptA Primer In Far Too Many Parts
    • History
    • Mocha April 1995 LiveScript JavaScriptBrendan EichCTO, Mozilla Corp.
    • JScriptJavaScript ECMAScript ActionScript
    • Basics
    • Data Types• number• string• boolean• object• null• NaN• undefined
    • Strings• Are Objects, have methods
    • 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
    • String to NumberparseInt("56"); //56parseInt("42.567"); //42parseInt("asdf"); //NaNparseInt("5a6"); //5parseFloat("24.68"); //24.68parseFloat("asdf"); //NaNparseFloat("24a"); //24
    • 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
    • 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
    • in or hasOwnProperty()• Tough call: • .hasOwnProperty() more consistent • in checks inherited properties • Used in for loop
    • 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
    • Arrays• Special object• Numerical keys only• Keeps intrinsic ordering• Short ([]) and Long (new Array()) syntax
    • 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"]
    • 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]
    • Arraysvar arr1 = [1,2,3];var arr2 = [3,4,5];arr1.concat(arr2); //[1,2,3,3,4,5]
    • 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
    • Functionsfunction Foo() { //...}Foo(); //validBar(); //validfunction Bar() { //...}
    • Functionsfunction Foo() {}Foo.bar = "value";bar in Foo; //trueFoo.bar == "value"; //true
    • Function Arguments• No way to assign default arguments• But arguments are not required • If an argument is not specified, it is set to undefined
    • arguments• A special variable found inside a function• A not-quite array object containing all the function arguments
    • argumentsfunction sum() { var x = 0; for (var i = 0; i < arguments.length; ++i) { x += arguments[i]; } return x;}sum(1, 2, 3); //6
    • typeof• Determines a variables type• Returns a string
    • 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"
    • 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
    • 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
    • Scoping
    • 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
    • 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
    • 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
    • Closures
    • 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
    • Closuresfunction Foo() { var count = 0; return function() { count = count + 1; return count; };}var bar = Foo();bar(); //1bar(); //2bar(); //3
    • 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
    • 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
    • this
    • this• Trips everyone up• Special variable used within a function• Refers to the “contextual object”• Changes based on where a function executes
    • thisvar Foo = { bar: "bar", baz: function() { return this.bar; }};Foo.baz(); //"bar"Foo.bar = "bat";Foo.baz(); //"bat"var baz = Foo.baz;baz(); //undefined
    • thisvar Foo = { bar: "bar", baz: function() { return this.bar; }};Foo.bat = function() { return this.bar + "bat";};Foo.bat(); //"barbat"
    • call & apply• Methods in the function prototype• Change the context in which a function executes!
    • 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"
    • Exceptions
    • Exceptions• All errors are thrown• Classic try...catch...finally blocks
    • Exceptionstry { funcDoesNotExist();} catch (e) { alert(e); //ReferenceError: funcDoesNotExist is not defined} finally { //Always Executes}
    • 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}
    • Prototype
    • 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
    • OOP... Kinda... Foofunction Foo() { //The "Constructor"} ‣ barFoo.bar = function() { //A "Static" Function ‣ prototype} ‣ bazFoo.prototype.baz = function() { ‣ constructor //A "Method"}; ‣ __proto__
    • new instancevar instance = new Foo();instance.baz(); //worksinstance.bar(); //error ‣ __proto__Foo.bar(); //works ‣ bazFoo.baz(); //error ‣ constructorFoo.prototype.baz(); //works ‣ __proto__ ‣ ...
    • new instanceinstance.bat = function() { /* ... */} ‣ batinstance.bat(); //works ‣ __proto__Foo.bat(); //error ‣ bazFoo.prototype.bat(); //error ‣ constructor ‣ __proto__ ‣ ...
    • 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
    • Asynchronous
    • Asynchronous• setTimeout, setInterval allow you to have code executing asynchronously while other code executes
    • setIntervalvar id = setInterval(function() { //Code to execute every 1000 milliseconds}, 1000);//clearInterval(id); to stop
    • setTimeoutvar id = setTimeout(function() { //Code to execute after 1000 milliseconds have passed}, 1000);//clearTimeout(id); to cancel
    • 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
    • DOM
    • DOM• Document Object Model• API to interact with the HTML/XHTML document
    • 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);
    • JSON
    • 2001 JSONDouglas Crockford Awesome
    • 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
    • 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()"} ] }}}
    • jQuery
    • January 2006 jQueryJohn ResigAuthor, jQuery
    • jQuery• Cross-browser JavaScript library• Simplifies and normalizes DOM, AJAX, etc.• Centers around using extended CSS selectors to grab an element(s)
    • jQuery$("div").addClass("special"); Find all div tags Add class special
    • jQuery$("#foo") <div id="foo"></div> .html("<strong>bar</strong> baz"); <div id="foo"> <strong>bar</strong> baz </div>
    • 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
    • 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
    • Events• jQuery wraps an event handling system• Handles browser events, AJAX events, and custom events
    • 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});
    • Events$(img).hover(function(){ //Do something when user hovers over //any img tag});
    • 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
    • AJAX$.ajax({ url: "test.php", success: function(data){ $(div.status).addClass("done") .html(data); }});
    • Resourceshttp://api.jquery.com/
    • Tools
    • Chrome/Safari Devel. Tools
    • Firefox FireBug