HTML

○ geolocation ○ local storage ○ battery status ○ gamepad API ○ device orientation ○ page visibility ○ vibration ○ web sockets (which now have their own spec)

A number of JavaScript APIs have been added, either as a part of the HTML5 spec, or moved into their own spec, name few.

ensures the element will receive input focus when page is loaded

A number of new attributes have been introduced like the autofocus. what does it do ?

placeholder - allows us to specify text to appear in an empty input until it receives focus: <input type="text" placeholder="User name" />

A number of new attributes have been introduced like the placeholder. what does it do ?

○ search - allows the browser to render the element in a platform-specific way ○ email - allows the browser to customize the input and include the @ symbol in the keyboard (useful on handheld devices) ○ url - when displaying urls, similar to the email type ○ tel - telephone number ○ range - implements a slider with a min/max ○ number - browsers may display a spinner attached to the input ○ date, datetime, time, month, week ○ color - displays the OS color dialog

A number of new input types and attributes are introduced in HTML5. The most notable new <input> types are:

Can be used to implement autocomplete, contains a list of <option>

A number of other form-related elements have been introduced like <datalist>. What does it represent ?

when requesting certificates

A number of other form-related elements have been introduced like <keygen>. What is it used for ?

represents a scalar value within a known range, which value will usually not change

A number of other form-related elements have been introduced like <meter>. What does it represent ?

It should be used to display the result of some calculation

A number of other form-related elements have been introduced like <output>. What is it used for ?

It represents the completion progress of a task

A number of other form-related elements have been introduced like <progress>. What does it represent ?

"data-" Example: <span data-songlength="3m27s">Rio</span> ● Usage: for application-specific storage of data, where no other attributes would be appropriate

All elements may use attributes with custom names, as long as the name starts with what ?

We must "wrap" the changes to our scope objects in $scope.$apply: socket.on("somemessage", function(data){ $scope.$apply(function(){ $scope.rooms = data; }); });

Events received from the Socket.io server are not visible to Angular by default. What can we do ?

They can specify min/max values, plus how much values could increment

Forms in HTML5 are validated by default, assuming we're specifying how to validate the input fields (one or more). How do the "min/max/step" attributes trigger the validation ?

It accepts a regular expression

Forms in HTML5 are validated by default, assuming we're specifying how to validate the input fields (one or more). How does the "pattern" attribute trigger the validation ?

The browser won't submit a form if a required field is left empty

Forms in HTML5 are validated by default, assuming we're specifying how to validate the input fields (one or more). How does the "required" attribute trigger the validation ?

It could be used to use resources wisely, i.e. do less work if battery is low

HTML5 includes a number of JavaScript APIs. One of them is Battery status which If supported by the device/browser, this API can tell us about the status of the battery. How can this API benefit us ?

It returns latitude/longitude coordinates (and possibly more information, depending on the capabilities of the device)

HTML5 includes a number of JavaScript APIs. One of them is Geolocation which is a property of the navigator object, and contains a single function called getCurrentPosition(). What does that function return ?

By using cookies

HTML5 includes a number of JavaScript APIs. One of them is Local Storage which is a simple key/value store, stored only on the client. What was the only method web pages had for storing data locally before HTML5 ?

Allows us to specify for how long the device should vibrate (in milliseconds)

HTML5 includes a number of JavaScript APIs. One of them is Vibration. Obviously not supported by all devices! but what does it allow us to do on those devices that it support ?

var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // Later versions might support more // than just "2d"

How do you get access to the canvas element with jQuery ?

○ structural elements: <header>, <footer>, <nav>, <article>, <section>, <aside> ○ form elements and their attributes: <input type=" color|date|range etc.">, <input placeholder> ○ multimedia elements: <canvas>,<audio>, <video> and <source> ○ other elements: <command>, <datagrid>, <datalist>, <datatemplate>, <details>, <dialog>, <eventsource>, <figure>, <mark>, <meter>, <menu>, <nest>, <output>, <progress>, <ruby>, <rule>

Name few elements in html5 that are new

In HTML5, the <figure> and <figcaption> elements have been introduced: <figure> <img src="cat.png" alt="Cute cat" /> <figcaption>A picture of a cute cat</figcaption> </figure> Each figure may contain multiple <img> elements

Previously, if an image was supposed to have a caption, we would have to use a <div> plus another element for the text(p, heading, etc.). What better way does html5 introduce in regards to this ?

// Assuming we're using the same socket object as above var data = { // This object can contain any data whatsoever, // Socket.io doesn't care what we send. It is // up to us to send something which the server // knows how to handle. }; socket.emit("someMessage", data, function(returnData){ // Do something when a reply from the server arrives });

Sending data using Socket.io is similar, i.e. we specify what message we're sending, and (optionally, depending on the server and the message type) a callback function:

The Modernizr lib checks each feature individually for us

Since support for HTML5 is not a 0/1 property, we must check each feature separately. doing browser checks is definitely not recommended since it becomes spaghetti very quickly. What library can help us in this regard ?

the novalidate attribute

Validation can be turned off by using what attribute on a <form> tag ?

// Client code: var socket = io.connect("http://url.to.server"); socket.on("firstMessage", function(data){ // Do something when this message arrives }); socket.on("anotherMessageType", function(data){ // Do something else here... });

Web sockets simply deal with buffers of data (which is ok), but there is no notion of different types of messages. Socket.io encapsulates web sockets and allows us to define specific message types. Flip for Example:

They open the possibility of pushing data from server to client, without the client explicitly requesting the data

What are html5 web sockets good for ?

○ <footer> - similar to header, i.e. may appear more than once (not limited to be a page footer) ○ <nav> - a major navigation block. Might contain an <ul> of links ○ <aside> - related to the content around it ○ <main> - the main part of the document, only one such element in a document

What are the new structural elements in html5 called

○ <section> - a generic document or application section, similar to div, groups related content together ○ <article> - a "specialized" version of a section: some kind of an article (blog post, news article etc.) ○ <header> - represents the header of a section/article. Can appear more than once in a document (for instance, once in each section) ○ <hgroup> - may contain multiple heading elements, but nothing else. Used to hide subheadings from the outline algorithm (see below)

Which of the new html5 elements could (partially) replace the <div> element ?

you can use <h1> more than once in a page, i.e. once in each section

note that the new element headings are now only logically grouped within a section. How can that benefit us ?

a command in a <menu> element

the new html5 elemen <menuitem> is used for ?

"highlighting" some text

the new html5 element <mark> is used for

a list of commands

the new html5 element <menu> is used for?

for East Asian characters

the new html5 element <ruby>/<rp>/<rt> - is used for ?

displays a machine-readable time value

the new html5 element <time> does what ?