Microsoft Official Course         ®             My Learning to 070-480              HTML5 Certification
Anchor Pseudo-classes• remember the hierarchy for Anchor Pseudo-classes Links can be displayed in different ways in a CSS-...
CSS text-transform propertyValue        Descriptionnone         No capitalization. The text renders as it is. This is defa...
How to extend an object by adding a method to it?Using prototypal inheritance, objects can still inherit from other object...
CSS Display - Block and Inline ElementsA block element is an element that takes up the full width available, and has a lin...
CSS Opacity / Transparency / rgbaThe CSS3 property for transparency is opacity.Example for Image Opacity,img{    opacity:0...
Cascading Style Sheets (CSS) ExclusionsCascading Style Sheets (CSS) Exclusions are new in Internet Explorer 10 and Windows...
Hands-On: Windows 8 on HTML5 PlatformThis page introduces a set of “Hands On” demos of the graphic features ofWindows 8 HT...
try...catch...finally Statement (JavaScript)The try...catch...finally statement provides a way to handle some or all of th...
try...catch...finally Statement (JavaScript)Example:-------------------------------try {document.write("try running...<br/...
CSS Position PropertyThe position property is supported in all major browsers.Note: The value "inherit" is not supported i...
Page Layout (breakup)                    Headers and footers are self-explanatory                    and <nav> creates a n...
JavaScript Comparison Operators
Features Available to Web WorkersDue to their multi-threaded behavior, web workers only has accessto a subset of JavaScrip...
Resource of GeoLocation APIThe getCurrentPosition() function has an optional third argument, aPositionOptions object. Ther...
Geolocation API - „getCurrentPosition‟Difference between getCurrentPosition and watchPositionThe main difference between "...
Study Material programming-in-html5-with-javascript   http://geekswithblogs.net/wtfnext/   archive/2012/10/08/exam-70-480-...
Upcoming SlideShare
Loading in...5
×

My 70-480 HTML5 certification learning

4,123

Published on

keep visiting for regular updates to this presentation.
This presentation includes the link for Hands On - Windows 8 HTML5 Platform demos

Published in: Technology
2 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,123
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
2
Likes
6
Embeds 0
No embeds

No notes for slide
  •  
  • Example 1:-------------------------------try {addalert(&quot;bad call&quot;);}catch(e) {document.write (&quot;Error Message: &quot; + e.message);document.write (&quot;&lt;br /&gt;&quot;);document.write (&quot;Error Code: &quot;);document.write (e.number &amp; 0xFFFF)document.write (&quot;&lt;br /&gt;&quot;);document.write (&quot;Error Name: &quot; + e.name);}// Output:Error Message: &apos;addalert&apos; is undefinedError Code: 5009Error Name: ReferenceError-------------------------------Example 2:-------------------------------try {document.write(&quot;try running...&lt;br/&gt;&quot;);throw new Error(301, &quot;an error&quot;);}catch (e) {document.write (&quot;catch caught &quot; + e.message + &quot;&lt;br/&gt;&quot;);}finally {document.write (&quot;finally is running...&lt;br/&gt;&quot;);}
  • Transcript of "My 70-480 HTML5 certification learning"

    1. 1. Microsoft Official Course ® My Learning to 070-480 HTML5 Certification
    2. 2. Anchor Pseudo-classes• remember the hierarchy for Anchor Pseudo-classes Links can be displayed in different ways in a CSS-supporting browser:• Example 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 */
    3. 3. CSS text-transform propertyValue Descriptionnone No capitalization. The text renders as it is. This is defaultcapitalize Transforms the first character of each word to uppercaseuppercase Transforms all characters to uppercaselowercase Transforms all characters to lowercaseinherit Specifies that the value of the text-transform property should be inherited from the parent element
    4. 4. How to extend an object by adding a method to it?Using prototypal inheritance, objects can still inherit from other objects. However, there isno specific keyword or operator - such as "extends" in Java - to achieve that end. Whathappens is that when you instantiate an object using the "new" keyword, "new myObject()"produces a new object that inherits from myObject.prototype rather than directly from theobject itself.Example:function Person(name) { if ( arguments.length > 0 ) this.init(name); }Person.prototype.init = function(name) { this.name = name; }
    5. 5. CSS Display - Block and Inline ElementsA block element is an element that takes up the full width available, and has a line breakbefore and after it.An inline element only takes up as much width as necessary, and does not force line breaks.Changing an inline element to a block element, or vice versa, can be useful for making thepage look a specific way, and still follow web standards.The following example displays list items as inline elements:Example li {display:inline;}The following example displays span elements as block elements:Example span {display:block;}
    6. 6. CSS Opacity / Transparency / rgbaThe CSS3 property for transparency is opacity.Example for Image Opacity,img{ opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */}RGBACSS3 has added a new feature to color setting. Next to rgb you can now also use rgba. The “a” in thisproperty-name stands, for, you guessed it: alpha. This new feature allows us to specify an opacity valuefor a color.<div style="background: rgba(255, 0, 0, 0.4);"></div>The key difference between the two declarations is this:Opacity sets the opacity value for an element and all of its children;RGBA sets the opacity value only for a single declaration.
    7. 7. Cascading Style Sheets (CSS) ExclusionsCascading Style Sheets (CSS) Exclusions are new in Internet Explorer 10 and Windows Store apps usingJavaScript. With CSS Exclusions, web authors can now wrap text so that it completely surrounds elements,thereby avoiding the traditional limitations of floats.CSS Exclusions can be positioned at a specified distance from the top, bottom, left, or right sides of acontaining block, while remaining part of the document flow.Note : Because of the preliminary status of CSS Exclusions, the properties described in this topic must be used with theMicrosoft-specific vendor prefix, "-ms-", to work with Internet Explorer 10 and Windows Store apps using JavaScript inWindows 8. Also, be aware that the properties and syntax defined in the CSS Exclusions specification might not correspondexactly to those described in this topic. As development on the specification continues, this might change.Wrap-Flow PropertyAn element becomes an exclusion when its „wrap-flow‟ property has a computed value other than „auto‟.In case of IE, -ms-wrap-flow property makes an element an exclusion element.See following URLs for more reading,http://dev.w3.org/csswg/css3-exclusions/#definitionshttp://msdn.microsoft.com/en-us/library/ie/hh673558(v=vs.85).aspx
    8. 8. Hands-On: Windows 8 on HTML5 PlatformThis page introduces a set of “Hands On” demos of the graphic features ofWindows 8 HTML5 Platform and Internet Explorer 10 http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/Default.html
    9. 9. try...catch...finally Statement (JavaScript)The try...catch...finally statement provides a way to handle some or all of the errors thatmay occur in a given block of code, while still running code. If errors occur that are nothandled, JavaScript provides the normal error message.The try block contains code that may provoke an error, while the catch block contains thecode that handles some or all errors. If an error occurs in the try block, program control ispassed to the catch block. The value of exception is the value of the error that occurred inthe try block. If no error occurs, the code in the catch block is never executed.You can pass the error up to the next level by using the throw statement to re-throw theerror.After all the statements in the try block have been executed and error handling has beendone in the catch block, the statements in the finally block are executed, whether or not anerror was handled. The code in the finally block is guaranteed to run unless an unhandlederror occurs (for example, a run-time error inside the catch block).
    10. 10. try...catch...finally Statement (JavaScript)Example:-------------------------------try {document.write("try running...<br/>");throw new Error(301, "an error");}catch (e) {document.write ("catch caught " + e.message + "<br/>");}finally {document.write ("finally is running...<br/>");}
    11. 11. CSS Position PropertyThe position property is supported in all major browsers.Note: The value "inherit" is not supported in IE7 and earlier.IE8 requires a !DOCTYPE. IE9 supports "inherit".[static] Default. Elements render in order, as they appear in the document flow[absolute] The element is positioned relative to its first positioned (not static) ancestorelement[fixed] The element is positioned relative to the browser window[relative] The element is positioned relative to its normal position, so "left:20" adds 20pixels to the elements LEFT position[inherit] The value of the position property is inherited from the parent element
    12. 12. Page Layout (breakup) Headers and footers are self-explanatory and <nav> creates a navigation or menu bar. You can use sections and articles to group your content. Finally, the aside element can be used for secondary content, for example, as a sidebar of related links.
    13. 13. JavaScript Comparison Operators
    14. 14. Features Available to Web WorkersDue to their multi-threaded behavior, web workers only has accessto a subset of JavaScripts features: ■The navigator object ■The location object (read-only) ■XMLHttpRequest ■setTimeout()/clearTimeout() and setInterval()/clearInterval() ■The Application Cache ■Importing external scripts using the importScripts() method ■Spawning other web workers Web Workers do NOT have access to: ■The DOM (its not thread-safe) ■The window object ■The document object ■The parent objecthttp://www.html5rocks.com/en/tutorials/workers/basics/
    15. 15. Resource of GeoLocation APIThe getCurrentPosition() function has an optional third argument, aPositionOptions object. There are three properties you can set in aPositionOptions object. All the properties are optional. You can set any or all ornone of them.PositionOptions ObjectProperty: Type: Default: NotesenableHighAccuracy: Boolean: false: true might be slowertimeout: long: (no default): in millisecondsmaximumAge: long: 0: in millisecondsThe enableHighAccuracy property is exactly what it sounds like. If true, andthe device can support it, and the user consents to sharing their exactlocation, then the device will try to provide it. Both iPhones and Androidphones have separate permissions for low- and high-accuracy positioning, so itis possible that calling getCurrentPosition() with enableHighAccuracy:true willfail, but calling with enableHighAccuracy:false would succeed.http://diveintohtml5.info/geolocation.html
    16. 16. Geolocation API - „getCurrentPosition‟Difference between getCurrentPosition and watchPositionThe main difference between "getCurrentPosition" and"watchPosition" is that watchPosition keeps informing yourcode should the position change, so basically it keepsupdating the user‟s position.This is very useful if they‟re on the move and you want tokeep track of their position, whereas getCurrentPosition is aonce off. This method also returns a watchID which isrequired when you want to stop the position constantlybeing updated by calling clearWatch method is called.
    17. 17. Study Material programming-in-html5-with-javascript http://geekswithblogs.net/wtfnext/ archive/2012/10/08/exam-70-480- study-material-programming-in- html5-with-javascript-and.aspx

    ×