HTML5
Lecture Notes for CS 142
Winter 2014
John Ousterhout
- Additional reading for this topic:
- Online documentation for HTML features, such as www.w3schools.com.
- HTML5: new HTML standard
- Huge: many new features
- Most features now implemented in current versions of most browsers
- Many new HTML elements:
- Timed media playback: <video> and <audio>.
- Before HTML5, had to use Adobe Flash for these.
- Canvas: allows general-purpose graphics
- Text, lines, curves, filled shapes
- Rotations, transparency, gradients
- All drawing is done from Javascript (only the canvas is
an HTML object)
- SVG (simple vector graphics):
- Alternative to canvas
- Graphical objects are HTML DOM objects, such as <polygon>.
- New form element input types:
- Many other new HTML elements: <article>, <aside>,
<bdi>, <command>, <details>,
<figcaption>, <figure>, <footer>,
<header>, <mark>, <meter>,
<nav>, <progress>, <rp>, <rt>,
<ruby>, <section>, <summary>, <wbr>
- Semantic elements provide structural information for
programs that search/manipulate HTML
- E.g. <aside> identifies extra information not essential to
the main presentation.
- Additional graphical elements
- E.g. <progress> displays progress bar.
- Web storage: local storage for key-value pairs
- Accessed through the localStorage object:
localStorage.setItem("state", "California");
localStorage.getItem("state");
localStorage.removeItem("state");
localStorage.state = "Missouri";
- Values are always strings.
- Same-origin policy limits access.
- Cross-document messaging (postMessage).
- Web workers: run Javascript code in the background:
w = new Worker("workerCode.js");
- Worker code does not have access to DOM.
- Communicates with main window via postMessage.
- Drag and drop support:
- Mark elements draggable:
- New event types:
- ondragstart
- ondragover
- ondrop
- Passing data from the drag source to the drag destination:
event.dataTransfer.setData(type, value);
var data = event.dataTransfer.getData(type);
- Geolocation: navigator.geolocation.getCurrentPosition
- Will ask user for permission first