Your SlideShare is downloading. ×
0
JavaScript Literacy
JavaScript Literacy
JavaScript Literacy
JavaScript Literacy
JavaScript Literacy
JavaScript Literacy
JavaScript Literacy
JavaScript Literacy
JavaScript Literacy
JavaScript Literacy
JavaScript Literacy
JavaScript Literacy
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript Literacy

2,130

Published on

Intermediate Language Features for Reading and Understanding JavaScript

Intermediate Language Features for Reading and Understanding JavaScript

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

×