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.