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

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 16

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



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: