• Like
  • Save
JavaScript Literacy
Upcoming SlideShare
Loading in...5

JavaScript Literacy



Intermediate Language Features for Reading and Understanding JavaScript

Intermediate Language Features for Reading and Understanding JavaScript



Total Views
Views on SlideShare
Embed Views



3 Embeds 17

http://twitter.com 7
http://www.linkedin.com 5
https://www.linkedin.com 5



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

    JavaScript Literacy JavaScript Literacy Presentation Transcript

    • JavaScript LiteracyIntermediate Language Featuresfor Reading and Understanding JavaScript
      David Jacobs
    • 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"
    • 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
    • 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 …
    • 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"
    • 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")} )
    • 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.
    • || 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);
    • 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
    • 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
    • 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.
    • 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
      An excellent utility library for functional programming in JavaScript: