JavaScript Quiz 1

How do you get that JSON data into your application?

- JSONP - AJAX - AJAX with CORS (Cross Origin Resource Sharing)

Client-Side Templating

A document that contains parameters, identified by some special syntax, that are replaced by actual arguments by the template processing system.

JSON values

A value can be a string in double quotes, or a number, or true or false or null, or an object or an array. These structures can be nested.

Constructors: property lookups

Defining a property with the same name on an object and on the prototype. JavaScript will try and lookup a property on the object itself (an "own property"). If it exists, that property is used. If not, it will look at the prototype of the function that created the object.

Why Would You Use Client-Side Templating?

In general, leveraging templates is a great way to separate markup and logic in views, and to maximize code reusability and maintainability.

JSON

JSON stands for JavaScript Object Notation. JSON is a data exchange format that is valid JavaScript. JSON is made up of JavaScript objects, arrays, strings, booleans, numbers, and null.

JSONP

JSON with Padding (JSONP) is a technique used to circumvent the same origin policy in AJAX. JSONP requests allow us to specify a function we want to execute with the data passed to it when we receive a response. (the script tag is not restricted by the same origin policy)

JSON keys

Object keys must be in double quotes to be valid JSON whereas in JavaScript, object keys can optionally be in quotes.

Why don't we dynamically create a script element on our page that references the JSON served from another domain?

Scripts injected into the page dynamically are asynchronous requests like AJAX. Once the script is appended to the head of our page, we have no way of accessing the data. You can think of this as one giant object literal sitting in a script tag, but the data hasn't been saved to a variable so we cannot access it.

Working with the Same Origin Policy

Server-side proxy

Extending native constructors

This is often considered a bad practice because if you for example create a custom String method and browsers in the future implement that method, then there can be lots of confusion among a team of developers and your code may not always work as expected. String.prototype.dashify = function() { return this.replace(/\s/g, '-'); };

Constructors: Methods and "this"

To create methods for your objects, assign a function to a property. var Person = function(name) { this.name = name; this.hi = function() { console.log('Hi! my name is ' + this.name); }; }; var eminem = new Person('Slim Shady'); eminem.hi(); // Hi! my name is Slim Shady

Same Origin Policy

You cannot make requests to resources outside of your current domain

Redefining the Prototype Object

var Person = function(name) { this.name = name; }; Person.prototype = { constructor: Person, hi: function() { console.log('hi, my name is ' + this.name); }, sleep: function() { console.log(this.name + ' is sleeping.'); } };

Defining methods on the prototype

var Person = function(name) { this.name = name; }; Person.prototype.hi = function() { console.log('hi, my name is ' + this.name); }; Person.prototype.sleep = function() { console.log(this.name + ' is sleeping.'); }; var david = new Person('David'); david.hi(); // hi, my name is David david.sleep(); // David is sleeping var patrick = new Person('Patrick'); patrick.hi(); // hi, my name is Patrick patrick.sleep(); // Patrick is sleeping Here we have defined a Person constructor or Person "class". Every function in JavaScript has a property called prototype which is just an almost empty object. This property is useful when you are using a function as a constructor. We are attaching 2 methods to Person.prototype, hi and sleep. Whenever a Person instance is created, the object constructed will inherit any properties or methods defined on Person.prototype.

Constructors: Creating Properties and Methods

var Person = function(name, position) { this.name = name; this.position = position; };

Downside of creating methods on objects

Every time an instance of Person is created, a new function is defined and assigned to the hi property of that object. So if we create 5 Person objects, they will all have their own hi methods that behave the EXACT same. Having 5 copies of a function that does the same thing takes up more memory, especially if you are dealing with hundreds of objects.

Prototypal Inheritance

Methods can be shared across object instances via the prototype property which is just an object. Object instances inherit the properties and methods defined on the prototype property of the constructor function that created the object.