1. Web Design: HTML5, CSS3 and JavaScript 小朱 MS MVP on Windows azure

2. Agenda HTML Execution Concepts JavaScript Fundamentals HTML DOM HTML5 layout and features CSS and CSS3

3. HTML Execution Concepts

4. What’s HTML? HTML is the main markup language for creating web pages and other information that can be displayed in a web browser. Each markup contains elements, attributes or contents. Each markup has different visual effect or layout meanings. Pure text, can be edited by text editor.

5. Execution of HTML Browser downloads HTML content from server pointed by URL string. Browser parse HTML, create the object model at sandbox. JavaScript code will be initialized and fire on event or sequence. CSS guides the browser to render the visual elements.

6. HTML Context A HTML sandbox and scope of JavaScript execution. Rendered DOM tree, can be controlled by browser service. Notification (event firing) Represents all HTML elements to object.

7. HTML API HTML API is a set of interface can interact to HTML “object”. HTML object represents a set of property and method for public access. Browser hosts objects and works with JavaScript.

8. HTML API STATIC REFERENCE Static Reference means the JavaScript code is declared statically. DYNAMIC REFERENCE Dynamic Reference means JavaScript creates the object at runtime.

9. Root node  Browser hosts each pages in window object, represents the browser’s UI service.  Like: Open window, create a new dialog, control IFRAME, change status bar or title, …

10. JavaScript Fundamentals

11. JavaScript History Created by Netscape (Live Script) in 1994. Renamed to JavaScript in 1995. ECMA standard begins 1996, named ECMAScript. Supported by all mainstream browsers.

12. ECMA standards EditionDate publishedChanges from prior edition 1June 1997First edition 2June 1998 Editorial changes to keep the specification fully aligned with ISO/IEC 16262 international standard 3December 1999 Added regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and other enhancements 4Abandoned Fourth Edition was abandoned, due to political differences concerning language complexity. Many features proposed for the Fourth Edition have been completely dropped; some are proposed for ECMAScript Harmony. 5December 2009 Adds "strict mode", a subset intended to provide more thorough error checking and avoid error-prone constructs. Clarifies many ambiguities in the 3rd edition specification, and accommodates behaviour of real-world implementations that differed consistently from that specification. Adds some new features, such as getters and setters, library support for JSON, and more complete reflection on object properties. [7]JSONreflection [7] 5.1June 2011 This edition 5.1 of the ECMAScript Standard is fully aligned with third edition of the international standard ISO/IEC 16262:2011 HarmonyWork in progress. Version 6 is rumored to have support for classes, a concept long supported by languages like Java, C++ and C#, in addition to multiple new concepts and language features.

13. JavaScript Language C style like. Interpreter Language Loose-coupled Client-based Presentation Service Base on Browser Out-of-browser (HTML application supported by IE) CommonJS (2009) Server-side Scripting Netscape Enterprise Server Node.js (2010) – Supported by Google V8 Engine

14. JavaScript Language (cont’d) Variable Dynamic data type resolution. Any type, any object. Control Conditional: if... Loop: for, for each, while, do... while

15. JavaScript Operators OperatorDescriptionExampleResult of xResult of y +Additionx=y+275 -Subtractionx=y-235 *Multiplicationx=y*2105 /Divisionx=y/22.55 %Modulus (division remainder) x=y%215 ++Incrementx=++y66 x=y++56 --Decrementx=--y44 x=y--54

16. JavaScript Operators OperatorExampleSame AsResult =x=y x=5 +=x+=yx=x+yx=15 -=x-=yx=x-yx=5 *=*=x*=yx=x*yx=50 /=x/=yx=x/yx=2 %=x%=yx=x%yx=0

17. JavaScript Operators OperatorDescriptionComparingReturns ==is equal tox==8false x==5true ===is exactly equal to (value and type)x==="5"false x===5true !=is not equalx!=8true !==is not equal (neither value nor type)x!=="5"true x!==5false >is greater thanx>8false <is less thanx<8true >=is greater than or equal tox>=8false <=is less than or equal tox<=8true

18. JavaScript Operators OperatorDescriptionExample &&and(x 1) is true ||or(x==5 || y==5) is false !not!(x==y) is true

19. Regular Expression Regular Expression provides a concise and flexible means to "match" (specify and recognize) strings of text, such as particular characters, words, or patterns of characters. Common abbreviations for "regular expression" include regex and regexp. JavaScript supports Regular Expression by several methods. test(): searches a string for a specified value, and returns true or false, depending on the result exec(): searches a string for a specified value, and returns the text of the found value. If no match is found, it returns null.

20. JavaScript and HTML JavaScript can interact to HTML DOM object model. DOM Object Tree document object window object Event Binding addEventListener (non-IE) attachEvent (IE) Find element document.getElementById() document.getElementsByName() document.getElementsByTagName() HTML element properties and methods

21. Unobtrusive JavaScript Separate HTML markup and JavaScript. Easy to maintain. SoC (Separation of Certainly) Support by mainstream JavaScript Frameworks jQuery ExtJS YUI... etc

22. HTML DOM

23. JavaScript’s OO Object Oriented Programming for JavaScript JavaScript can implement inheritance, encapsulation and polymorphism, but can’t use contract-based restrictions (implement interface). Declare your object. Extend object with “prototype” object. Constructor initialization.

24. Document object A entry point of HTML document. DOM tree represented all elements of HTML page. Browser’s DOM supports search and manipulation.

25. Document object DOM’s object model has parent/child relationship. Browser Service can support the relationship search.

26. DOM and Browser Service Browser creates Document Object Model (DOM) when HTML content parsed. JavaScript can use browser service to interact DOM elements Create a new element Remove a element Change element’s attribute Change element’s behavior

27. DOM and Browser Service Point to DOM elements example: document.anchors, document.body

28. DOM and Browser Service Searching element by tag or identifier getElementById() getElementsByName() getElementsByTagName() Searching element by attribute querySelector() querySelectorAll()

29. DOM Events Event Capturing (top-down) Event Bubbling (bottom-up) Event Table and Registration

30. Client and Server Browser is a client application Server application generates the HTML content to browser. Browser unable to know Server’s behavior. Communicate by Form, cookie or query string.

31. jQuery introduction jQuery is a powerful JavaScript Framework to handle HTML and JavaScript interactions. Selector-based search (CSS like). Easy to learn and use. Unobtrusive JavaScript Pattern. More plug-ins and UI services (jQuery UI) Support to mobile application (jQuery Mobile)

32. Running jQuery Basic syntax is: $(selector).action() A $ sign to define/access jQuery A (selector) to "query (or find)" HTML elements A jQuery action() to be performed on the element(s) Running on Page loaded. $(document).ready(function() {... }); $(function() {... }); Event binding $(selector).eventname(handler) $(selector).bind(“eventname”, handler) $(selector).on()/off() $(selector).one(“eventname”, handler) Callbacks

33. AJAX Asynchronous JavaScript and XML Communication between Server and Client Founded by Microsoft (Outlook Web Access) MSXML.XMLHTTP object XMLHttpRequest native object send() method async property readystate property onreadystatechange event jQuery AJAX $.ajax(), $.post(), $.get(), $.getJSON(),...

34. Error Handling JavaScript supports try/catch/finally structure exception handling mechanism. Fire a new exception: throw statement openMyFile(); try { writeMyFile(theData); //This may throw a error }catch(e){ handleError(e); // If we got a error we handle it }finally { closeMyFile(); // always close the resource } if (months[mo] !== undefined) { return months[mo]; } else { throw new UserException("InvalidMonthNo"); }

35. JSON JSON = JavaScript Object Notation A object encapsulation format for JavaScript. Single Format Nested Format Parsing JSON JSON.parse(); Native or JSON2 library. JSON to string JSON.stringify(); Native or JSON2 library. { "firstName": "John", "lastName": "Smith", "male": true, "age": 25, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021" }, "phoneNumber": [ { "type": "home", "number": "212 555-1234" }, { "type": "fax", "number": "646 555-4567" } ] }

36. HTML5

37. What’s HTML5? HTML5 is: The next version of HTML. More multimedia features (Canvas, Audio, Video) More semantic markup (article, nav, aside,...) More programming interfaces (APIs) More browser capabilities (Web Worker, Local Storage,...) More Rendering effects (supported by CSS3) Geo-aware (Geolocation, Location-based Service) Created by: W3C WHATWG (Web Hypertext Application Technology Working Group)

39. HTML5 new tags (semantic) TagDescription Defines an article Defines content aside from the page content Isolates a part of text that might be formatted in a different direction from other text outside it Defines a command button that a user can invoke Defines additional details that the user can view or hide Defines a visible heading for a element Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. Defines a caption for a element Defines a footer for a document or section Defines a header for a document or section Groups a set of to elements when a heading has multiple levels Defines marked/highlighted text Defines a scalar measurement within a known range (a gauge) Defines navigation links Represents the progress of a task Defines a ruby annotation (for East Asian typography) Defines an explanation/pronunciation of characters (for East Asian typography) Defines what to show in browsers that do not support ruby annotations Defines a section in a document Defines a date/time Defines a possible line-break

40. HTML5 new tags (multimedia) TagDescription Defines sound content Defines a video or movie Defines multiple media resources for and Defines a container for an external application or interactive content (a plug-in) Defines text tracks for and TagDescription Used to draw graphics, on the fly, via scripting (usually JavaScript)

41. HTML5 new tags (forms) TagDescription Specifies a list of pre-defined options for input controls Defines a key-pair generator field (for forms) Defines the result of a calculation

42. HTML5 Canvas The HTML5 element is used to draw graphics, on the fly, via scripting (usually JavaScript). The element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, characters, and adding images. This text is displayed if your browser does not support HTML5 Canvas. var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = 'red'; context.fillRect(30, 30, 50, 50);

43. HTML5 SVG SVG stands for Scalable Vector Graphics, used to define vector-based graphics for the Web. SVG defines the graphics in XML format SVG graphics do NOT lose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated SVG is a W3C recommendation

44. Canvas vs. SVG CanvasSVG Resolution dependent No support for event handlers Poor text rendering capabilities You can save the resulting image as.png or.jpg Well suited for graphic-intensive games Resolution independent Support for event handlers Best suited for applications with large rendering areas (Google Maps) Slow rendering if complex (anything that uses the DOM a lot will be slow) Not suited for game applications

45. HTML5 Form Original Types: text radio checkbox password submit button reset New Input Types: color date datetime datetime-local email month number range search tel time url week

46. HTML5 Audio HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the element. Your browser does not support the audio element.

47. HTML5 Audio Support audio formats: BrowserMP3WavOgg Internet Explorer 9+YESNO Chrome 6+YES Firefox 3.6+NOYES Safari 5+YES NO Opera 10+NOYES

48. HTML5 Video HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the element. Your browser does not support the video tag.

49. HTML5 Video Support Video Formats: BrowserMP4 (video/mp4) WebM (video/webm) Ogg (video/ogg) Internet Explorer 9+YESNO Chrome 6+YES Firefox 3.6+NOYES Safari 5+YESNO Opera 10.6+NOYES

50. HTML5 APIs The canvas element for immediate mode 2D drawing. See Canvas 2D API Specification 1.0 specification Timed media playback Offline Web Applications Document editing Drag-and-drop Cross-document messaging Browser history management MIME type and protocol handler registration Microdata Web Storage, a key-value pair storage framework that provides behavior similar to cookies but with larger storage capacity and improved API. Geolocation Web SQL Database, a local SQL Database. The Indexed Database API, an indexed hierarchical key-value. HTML5 File API, handles file uploads and file manipulation. Directories and System. This API is intended to satisfy client-side-storage use cases not well served by databases. File Writer. An API for writing to files from web applications. Web Audio API, a high-level JavaScript API for processing and synthesizing audio in web applications. Web Worker, Web sockets for client/server communication.

51. Geolocation API The HTML5 Geolocation API is used to get the geographical position of a user. Since this can compromise user privacy, the position is not available unless the user approves it. function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{ x.innerHTML="Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude; }

52. Geolocation API function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } }

53. Local Storage API HTML5 includes 2 types of storage APIs: The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year. The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window. // detect local storage service is available. if(typeof(Storage)!=="undefined") { // Yes! localStorage and sessionStorage support! // Some code..... } else { // Sorry! No web storage support.. }

54. Local Storage API localStorage object: sessionStorage object: if (localStorage.clickcount){ localStorage.clickcount = Number(localStorage.clickcount)+1; } else { localStorage.clickcount = 1; } $("#result").innerHTML = "clicked " + localStorage.clickcount + " time(s)."; if (sessionStorage.clickcount){ sessionStorage.clickcount = Number(localStorage.clickcount)+1; } else { sessionStorage.clickcount = 1; } $("#result").innerHTML = "clicked " + sessionStorage.clickcount + " time(s).";

55. Web Worker A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

56. Web Worker Define a job script in external script file: var i=0; function timedCount() { i=i+1; postMessage(i); // fire Client’s onmessage event setTimeout("timedCount()",500); } timedCount();

57. Web Worker Initialize a new Web Worker: Handling Message Callback: Terminate (Stop): if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data; }; w.terminate();

58. Web Worker (Page-side) Web page Web Worker’s communication: function sayHI() { worker.postMessage({'cmd': 'start', 'msg': 'Hi'}); } function stop() { worker.postMessage({'cmd': 'stop', 'msg': 'Bye'}); } function unknownCmd() { worker.postMessage({'cmd': 'foobard', 'msg': '???'}); } var worker = new Worker('doWork2.js'); worker.addEventListener('message', function(e) { document.getElementById('result').textContent = e.data; }, false);

59. Web Worker (Worker-side) Web page Web Worker’s communication: self.addEventListener('message', function(e) { var data = e.data; switch (data.cmd) { case 'start': self.postMessage('WORKER STARTED: ' + data.msg); break; case 'stop': self.postMessage('WORKER STOPPED: ' + data.msg); self.terminate(); break; default: self.postMessage('Unknown command: ' + data.msg); }; }, false);

60. CSS3

61. What’s CSS3 CSS3 is split up into "modules". The old specification has been split into smaller pieces, and new ones are also added. Some of the most important CSS3 modules are: Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface

62. CSS3 selectors element1~element2p~ulSelects every element that are preceded by a element [attribute^=value]a[src^="https"]Selects every element whose src attribute value begins with "https" [attribute$=value]a[src$=".pdf"]Selects every element whose src attribute value ends with ".pdf" [attribute*=value]a[src*="w3schools"]Selects every element whose src attribute value contains the substring "w3schools" :first-of-typep:first-of-typeSelects every element that is the first element of its parent :last-of-typep:last-of-typeSelects every element that is the last element of its parent :only-of-typep:only-of-typeSelects every element that is the only element of its parent :only-childp:only-childSelects every element that is the only child of its parent :nth-child(n)p:nth-child(2)Selects every element that is the second child of its parent :nth-last-child(n)p:nth-last-child(2)Selects every element that is the second child of its parent, counting from the last child :nth-of-type(n)p:nth-of-type(2)Selects every element that is the second element of its parent :nth-last-of-type(n)p:nth-last-of-type(2)Selects every element that is the second element of its parent, counting from the last child :last-childp:last-childSelects every element that is the last child of its parent :root Selects the document’s root element :emptyp:emptySelects every element that has no children (including text nodes) :target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name) :enabledinput:enabledSelects every enabled element :disabledinput:disabledSelects every disabled element :checkedinput:checkedSelects every checked element :not(selector):not(p)Selects every element that is not a element ::selection Selects the portion of an element that is selected by a user

63. CSS3 box model

64. CSS3 Borders With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop. border-radius box-shadow border-image div { border:2px solid; border-radius:25px; } div { box-shadow: 10px 10px 5px #888888; } div { border-image:url(border.png) 30 30 round; }

65. CSS3 Background PropertyDescription background-clipSpecifies the painting area of the background images background-originSpecifies the positioning area of the background images background-sizeSpecifies the size of the background images

66. CSS3 Text effects PropertyDescription hanging-punctuationSpecifies whether a punctuation character may be placed outside the line box punctuation-trimSpecifies whether a punctuation character should be trimmed text-align-lastDescribes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" text-emphasisApplies emphasis marks, and the foreground color of the emphasis marks, to the element's text text-justifySpecifies the justification method used when text-align is "justify" text-outlineSpecifies a text outline text-overflowSpecifies what should happen when text overflows the containing element text-shadowAdds shadow to text text-wrapSpecifies line breaking rules for text word-breakSpecifies line breaking rules for non-CJK scripts word-wrapAllows long, unbreakable words to be broken and wrap to the next line

67. CSS3 2D transformation PropertyDescription transformApplies a 2D or 3D transformation to an element transform-originAllows you to change the position on transformed elements ActionDescription matrix(n,n,n,n,n,n)Defines a 2D transformation, using a matrix of six values translate(x,y)Defines a 2D translation, moving the element along the X- and the Y-axis translateX(n)Defines a 2D translation, moving the element along the X-axis translateY(n)Defines a 2D translation, moving the element along the Y-axis scale(x,y)Defines a 2D scale transformation, changing the elements width and height scaleX(n)Defines a 2D scale transformation, changing the element's width scaleY(n)Defines a 2D scale transformation, changing the element's height rotate(angle)Defines a 2D rotation, the angle is specified in the parameter skew(x-angle,y-angle)Defines a 2D skew transformation along the X- and the Y-axis skewX(angle)Defines a 2D skew transformation along the X-axis skewY(angle)Defines a 2D skew transformation along the Y-axis

68. CSS 3D transformation PropertyDescription transformApplies a 2D or 3D transformation to an element transform-originAllows you to change the position on transformed elements transform-styleSpecifies how nested elements are rendered in 3D space perspectiveSpecifies the perspective on how 3D elements are viewed perspective-originSpecifies the bottom position of 3D elements backface-visibilityDefines whether or not an element should be visible when not facing the screen

69. CSS 3D transformation FunctionDescription matrix3d (n,n,n,n,n,n,n,n,n,n, n,n,n,n,n,n) Defines a 3D transformation, using a 4x4 matrix of 16 values translate3d(x,y,z)Defines a 3D translation translateX(x)Defines a 3D translation, using only the value for the X-axis translateY(y)Defines a 3D translation, using only the value for the Y-axis translateZ(z)Defines a 3D translation, using only the value for the Z-axis scale3d(x,y,z)Defines a 3D scale transformation scaleX(x)Defines a 3D scale transformation by giving a value for the X-axis scaleY(y)Defines a 3D scale transformation by giving a value for the Y-axis scaleZ(z)Defines a 3D scale transformation by giving a value for the Z-axis rotate3d(x,y,z,angle ) Defines a 3D rotation rotateX(angle)Defines a 3D rotation along the X-axis rotateY(angle)Defines a 3D rotation along the Y-axis rotateZ(angle)Defines a 3D rotation along the Z-axis perspective(n)Defines a perspective view for a 3D transformed element

70. CSS3 animation PropertyDescription @keyframesSpecifies the animation animationA shorthand property for all the the animation properties, except the animation-play-state property animation-nameSpecifies the name of the @keyframes animation animation-durationSpecifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0 animation-timing-functionDescribes how the animation will progress over one cycle of its duration. Default "ease" animation-delaySpecifies when the animation will start. Default 0 animation-iteration-countSpecifies the number of times an animation is played. Default 1 animation-directionSpecifies whether or not the animation should play in reverse on alternate cycles. Default "normal" animation-play-stateSpecifies whether the animation is running or paused. Default "running"

71. CSS3 Multiple Column Layout PropertyDescription column-countSpecifies the number of columns an element should be divided into column-fillSpecifies how to fill columns column-gapSpecifies the gap between the columns column-ruleA shorthand property for setting all the column-rule-* properties column-rule-colorSpecifies the color of the rule between columns column-rule-styleSpecifies the style of the rule between columns column-rule-widthSpecifies the width of the rule between columns column-spanSpecifies how many columns an element should span across column-widthSpecifies the width of the columns columnsA shorthand property for setting column-width and column-count

72. CSS3 User Interface PropertyDescription appearanceAllows you to make an element look like a standard user interface element box-sizingAllows you to define certain elements to fit an area in a certain way iconProvides the author the ability to style an element with an iconic equivalent nav-downSpecifies where to navigate when using the arrow-down navigation key nav-indexSpecifies the tabbing order for an element nav-leftSpecifies where to navigate when using the arrow-left navigation key nav-rightSpecifies where to navigate when using the arrow-right navigation key nav-upSpecifies where to navigate when using the arrow-up navigation key outline-offsetOffsets an outline, and draws it beyond the border edge resizeSpecifies whether or not an element is resizable by the user

73. JavaScript and CSS Control CSS via jQuery: hasClass(“class”) addClass(“class”) removeClass(“class”).css(“style”) – return specified style’s value..css(“style”, “value”) – set specified style’s value. DOM’s style control: HTML element’s style property. Example: document.getElementById(“div1”).style.display = “none”;

74. CSS Apply value sequences Style sheets may have three different origins: Author. The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally. User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did). User agent: Conforming user agents must apply a default style sheet (or behave as if they did). A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font).

75. CSS Apply value sequences Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence: user agent declarations (Low priority) user normal declarations author normal declarations author important declarations user important declarations (High priority) (Reference: http://www.w3.org/TR/CSS21/cascade.html#specificity) http://www.w3.org/TR/CSS21/cascade.html#specificity

76. CSS Pseudo Class ’s pseudo class sequence: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!! a:active MUST come after a:hover in the CSS definition in order to be effective!! (Reference: http://www.w3schools.com/css/css_pseudo_classes.asp) http://www.w3schools.com/css/css_pseudo_classes.asp a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */

77. Recommend Readings (Web Application Development Study Path) 網頁用戶端應 用程式開發 (HTML5, JS, CSS3) 伺服器端應用 程式開發 (ASP.NET) 雲端應用程式 開發 (Windows Azure)

78. References W3School.com JavaScript Subject: http://www.w3schools.com/js/default.asp http://www.w3schools.com/js/default.asp jQuery Official site: http://jquery.comhttp://jquery.com Mozilla Developer Center: https://developer.mozilla.org/en- US/docs/JavaScripthttps://developer.mozilla.org/en- US/docs/JavaScript Wikipedia.org: JavaScript, HTML5, CSS3, Web Worker, Web Storage article. W3School.com JavaScript Subject: http://www.w3schools.com/js/default.asp http://www.w3schools.com/js/default.asp jQuery Official site: http://jquery.comhttp://jquery.com Mozilla Developer Center: https://developer.mozilla.org/en- US/docs/JavaScripthttps://developer.mozilla.org/en- US/docs/JavaScript