MS 70-480

Use the JSON methods

JSON.stringify

and

JSON.parse

Get JSON is short hand for an AJAX call that retrieves a JSON object from the server asynchronously.

Example:

$.getJSON('ajax/test.json', function(data) {
    // some code
}

All of jQuery's Ajax methods return a superset of the XMLHTTPRequest object.

This jQuery XHR object, or "jqXHR," is for insstance returned by $.getJSON()  

var jqxhr = $.getJSON( "example.json", function() {
   console.log( "success" );
  })
  .done(function() { console.log( "second success" );})
  .fail(function() { console.log( "error" ); })
  .always(function() { console.log( "complete" ); });

A Promise is an object that represents a one-time event, typically the outcome of an async task like an AJAX call. 

At first, a Promise is in a pending state. Eventually, it’s either resolved (meaning the task is done) or rejected (if the task failed).  Once a Promise is resolved or rejected, it’ll remain in that state forever, and its callbacks will never fire again.

You can combine Promises logically into new Promises. That makes it trivially easy to write code that says, “When all of these things have happened, do this other thing.”

composedPromise = $.when(anAsyncFunction(), anotherAsyncFunction());

The Deferred object exposes a then method which allows the developer to handle both the fulfillment and error states.   

Example:

$.ajax({

url: 'http://search.twitter.com/search.json',

dataType: 'jsonp',

data: { q: '#IE10', rpp: 100 }

})

transition:  [ <transition-property> ||               <transition-duration> ||               <transition-timing-function> ||               <transition-delay> ]

Example:

transition: width 2s, height 2s, transform 2s;

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• cubic-bezier(n,n,n,n)

cubic-bezier(n,n,n,n) - Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1

text-shadow: h-shadow v-shadow blur color;

• translate()
• rotate()
• scale()
• skew()
• matrix()

navigator.geolocation.getCurrentPosition(function (pos) {
    alert("yallo... your determined position is: " +
    pos.coords.longitude + " / " + pos.coords.latitude);
});

Web Workers allow you to do things like fire up long-running scripts to handle computationally intensive tasks, but without blocking the UI or other scripts to handle user interactions.

var worker = new Worker('task.js');

worker.postMessage(); // Start the worker.

When postMessage() is called from the main page, our worker handles that message by defining an onmessage handler for the message event. The message payload (in this case 'Hello World') is accessible in Event.data.

There are two ways to stop a worker: by calling worker.terminate() from the main page or by calling self.close() inside of the worker itself.

CACHE MANIFEST

Cache

Network

Fallback

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html

article aside figcaption figure footer header hgroup mark nav section time

audio  = muted,
autoplay = autoplay,
controls  = controls,
loop = loop,
poster = (some URL),
preload = auto, metadata, none 

And of couse width, height and src.

autoplay = autoplay,
controls  = controls,
loop = loop,
preload = auto, metadata, none 

And of couse src.

• required
• type ("email" / "url" / "phone", etc...)
• pattern (RegEx)
• placeholder (some string)
• autofocus
• autocomplete

FormData gives you a way to create HTML forms on-the-fly using JavaScript, and then submit them using XMLHttpRequest.send().  

Example: 

var formData = new FormData(); formData.append("part_num", "123ABC");  formData.append("part_price", 7.95); formData.append("part_image", somefile)   var xhr =

new XMLHttpRequest(); xhr.open("POST", "http://some.url/");   xhr.send(formData);

The API allows you to do things like set a custom error, check whether an element is valid, and determine the reason that an element is invalid.

Example:

if (input.value != document.getElementById('email_addr').value) {

input.setCustomValidity('The two email addresses must match.');  

}

else {    

// input is valid -- reset the error message    

input.setCustomValidity('');  

}

div,p

div p

div>p

div+p

[target]

[target=_blank]

[title~=flower]

[lang|=en]

p:first-letter

p:first-line

p:first-child

p:before

p:after