130 likes | 266 Views
Introduction to HTML5 Programming. d onghao. HTML5 is the New HTML Standard. New Elements, Attributes. Full CSS3 Support Video and Audio 2D/3D Graphics Local Storage Local SQL Database Web Applications. HTML Elements and jQuery. HTML Elements <div>, <p>, <body>, <span>, etc. CSS
E N D
HTML5 is the New HTML Standard • New Elements, Attributes. • Full CSS3 Support • Video and Audio • 2D/3D Graphics • Local Storage • Local SQL Database • Web Applications
HTML Elements and jQuery • HTML Elements • <div>, <p>, <body>, <span>, etc. • CSS • Styling HTML elements. • border-radius, gradient, etc. • jQuery • A Javascript library to manipulate HTML elements efficiently. • $("p.neat").addClass("ohmy").show("slow");
Graphics • Canvas • Use Javascript to draw graphics on the fly. • Bitmap graphics. • http://www.w3.org/TR/2dcontext/ • SVG (Scalable Vector Graphics) • Define graphics in XML format. • Attributes can be animated. • Can attach event handlers. • Vector graphics. • http://www.w3.org/TR/SVG/
Graphics / Canvas • <canvas id="canvas" width="200" height="100"></canvas> • var canvas = document.getElementById("canvas"); • var context = canvas.getContext("2d"); • context.beginPath(); • context.moveTo(0, 0); • context.lineTo(100,100); • context.strokeStyle = "black"; • context.stroke();
Graphics / SVG • <?xml version="1.0" standalone="no"?> • <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> • <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> • <circlecx="100" • cy="50" • r="40" • stroke="black" • stroke-width="2" • fill="red" /> • </svg>
Data Storage • Cookies • Use the jQuery-Cookies plugin. • $.cookie("key", value, { expires: 10 }); • var value = $.cookie("key"); • Local Storage • Store data in the browser. • About 5M, depends on browser's setting. • localStorage['key'] = value;
Client-Server Communication • AJAX: AsynchronousJavascript And XML • jQuery syntax:$.ajax(options) • http://api.jquery.com/jQuery.ajax/ • Data format: • Plain text. • XML • JSON: JavaScript Object Notation
Asynchronous Programming • Javascript is Single threaded. • Synchronous: • Start job A. • Wait until A is finished. • Do job B. • Asynchronous: • Start job A, register callback for A. • Do job B.
Asynchronous Example • // define a callback function. • varcallback = function(txt) { • alert("Got text:" + txt); • }; • // start fetching data. • $.get("example.txt", callback); • alert("Next job.");
JSON: Javascript Object Notation • http://www.json.org • Good way to exchange data. • Serialization: Object <-> String.
Other Cool Stuff • Mustache • Template engine. • Template + Data => HTML. • D3: Data Driven Documents • http://d3js.org • Bind data to HTML elements. • Tutorial: • http://mbostock.github.com/d3/tutorial/circle.html
Reading List • http://www.w3schools.com/html5 • http://jquery.com • http://www.w3.org/TR/2dcontext/ • http://www.w3.org/TR/SVG/ • http://www.json.org • http://mustache.github.com • http://d3js.org