JavaScript Literacy

  • 2,074 views
Uploaded on

Intermediate Language Features for Reading and Understanding JavaScript

Intermediate Language Features for Reading and Understanding JavaScript

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,074
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
9
Comments
0
Likes
0

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 LiteracyIntermediate Language Featuresfor Reading and Understanding JavaScript
    David Jacobs
    @MetaThis
  • 2. Object Literal Notation
    // create a person object
    varperson = {};
    person.firstName = "Joe";
    person.lastName = "Jones";
    person.address = {};
    person.address.street = "123 main";
    person.address.zip = "12345";
    person.address.state = "MO";
    // same thing in object literal notation
    var person = {
    firstName: "Joe",
    lastName: "Jones",
    address: {
    street: "123 main",
    zip: "12345",
    state: "MO"
    }
    };
  • 3. Object Literals with Functions
    // can include functions
    var person = {
    firstName: "Joe",
    lastName: "Jones",
    address: {
    street: "123 main",
    zip: "12345",
    state: "MO"
    },
    getFullName: function() {
    return this.firstName + " " + this.lastName;
    }
    };
    Inline function
  • 4. Object Literals - JSON
    JSON is a subset of Object Literal notation
    Requires property names to be in quotes
    Functions are not allowed
    Special characters must be escaped/encoded
    Other than these restrictions, you can
    simply think of JSON as a JavaScript object
    All valid JSON is a valid Object Literal
    var person = {
    "firstName ": "Joe",
    "lastName": "Jones",
    "address": {
    "street": "123 main",
    "zip:": "12345",
    "state ": "MO"
    }
    getFullName: function() {
    return …
    }
    };
  • 5. Arguments
    function doSomething(a, b, c) {
    // something
    }
    // arguments are optional
    doSomething(); //this is valid!
    // can pass extra arguments
    doSomething("apple", “banana", "cat", "wtf"); //this is also valid!
    // regardless of declared parameters, functions have access
    // to all arguments through a special arguments array
    function doSomething() {
    return arguments[3]; //returns "wtf"
    }
  • 6. Object Literals as Arguments
    JavaScript Idiom for Optional Named Parameters
    Functions often have an optional “options” or “settings” parameter
    jQuery.ajax( url, [settings] )
    Object Literals are often used as constructors, providing or overriding defaults
    jQuery.ajax( {url: "test.html", data: myObject, success: alert("success")} )
  • 7. Arrays
    The Array prototype contains methods specific to arrays, but as a data structure…
    Arrays are essentially just object literals with an implicit number as the property name
    Which generalizes to a universal property:value pattern for all objects (and JSON data)
    Which enables a universal data access pattern of object[property]
    var array = ["first","second", "third"];
    var object = {0: "first", 1: "second", 2: "third"};
    array[1] //returns "second"
    object[1] //returns "second“
    Don’t take this point too literally…but it may help you better understand JavaScript data structures.
  • 8. || and &&
    You know
    || is a boolean Or
    && is a boolean And
    Do you know?
    Expressions using them can return a non-boolean value
    This is useful
    // if userInput is null or an empty string, then the Or case
    // is evaluated and returned as a value
    var name = userInput || "Bob";
    // conditional execution – validate() is only called if there’s a value
    var valid = userInput && validate(userInput);
  • 9. Functions
    Functions are objects
    Functions are values
    Can be assigned to a variable
    Can be passed to another function as an argument
    Can be returned by a function
    Functions are the building blocks of scope
    A function created inside a function is a nested scope
    The outer scope is available to the inner scope
    The inner scope is not available to the outer
  • 10. Function Pointers
    What is the $ in jQuery?
    // in this example, $ is a variable that points to a function
    var $ = function (id) {
    return document.getElementById(id);
    };
    // this is a function call on the $ variable, setting the onClick handler
    // on the DOM element returned by the function
    $('yourDiv').onClick = function (event) {
    //do something
    };
  • 11. Callbacks
    A callback is just a function that is passed to another function, typically with the intent of it being called later (“called back”)
    TIP: Callbacks are often easier to understand if you use function pointers (assigning a function to a variable) instead of creating an anonymous function on-the-spot.
  • 12. Higher Order Functions
    A higher order function is a function that takes or returns a function
    All asynchronous callback-style function calls involve higher order functions
    They are used nearly everywhere in JavaScript
    AJAX calls, event handling, Node.js, etc
    A better understanding of functional programming will improve your JavaScript code and your programming skills
    Learn More about Functional JavaScript
    Article: http://www.hunlock.com/blogs/Functional_Javascript
    Book: JavaScript Patterns by StoyanStefanov
    Underscore.js
    An excellent utility library for functional programming in JavaScript:
    http://documentcloud.github.com/underscore/