Presentation is loading. Please wait.

Presentation is loading. Please wait.

Introduction to HTML5 Programming donghao. HTML5 is the New HTML Standard New Elements, Attributes. Full CSS3 Support Video and Audio 2D/3D Graphics Local.

Similar presentations


Presentation on theme: "Introduction to HTML5 Programming donghao. HTML5 is the New HTML Standard New Elements, Attributes. Full CSS3 Support Video and Audio 2D/3D Graphics Local."— Presentation transcript:

1 Introduction to HTML5 Programming donghao

2 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

3 HTML Elements and jQuery HTML Elements –,,,, etc. CSS – Styling HTML elements. – border-radius, gradient, etc. jQuery – A Javascript library to manipulate HTML elements efficiently. – $("p.neat").addClass("ohmy").show("slow");

4 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/

5 Graphics / 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();

6 Graphics / SVG

7 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;

8 Client-Server Communication AJAX: Asynchronous Javascript And XML jQuery syntax: $.ajax(options) – http://api.jquery.com/jQuery.ajax/ Data format: – Plain text. – XML – JSON: JavaScript Object Notation

9 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.

10 Asynchronous Example // define a callback function. var callback = function(txt) { alert("Got text:" + txt); }; // start fetching data. $.get("example.txt", callback); alert("Next job.");

11 JSON: Javascript Object Notation http://www.json.org Good way to exchange data. Serialization: Object String.

12 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

13 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


Download ppt "Introduction to HTML5 Programming donghao. HTML5 is the New HTML Standard New Elements, Attributes. Full CSS3 Support Video and Audio 2D/3D Graphics Local."

Similar presentations


Ads by Google