Your SlideShare is downloading. ×
Learn html5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Learn html5

711
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
711
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
76
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. mos.bayomi@gmail.comHTML 5The New Standard For HTML
  • 2. mos.bayomi@gmail.com
  • 3. mos.bayomi@gmail.comHTML[New] TagsJavaScriptAPIsHTML5
  • 4. mos.bayomi@gmail.com
  • 5. mos.bayomi@gmail.com
  • 6. mos.bayomi@gmail.com
  • 7. mos.bayomi@gmail.com
  • 8. mos.bayomi@gmail.com<!DOCTYPE><!DOCTYPE><!DOCTYPE><!DOCTYPE>SGML(StandardGeneralized Markup Language)
  • 9. mos.bayomi@gmail.com<!DOCTYPE>(cont’d)
  • 10. mos.bayomi@gmail.com
  • 11. mos.bayomi@gmail.com<article> <aside> <bdi> <command> <details> <summary><figure> <figcaption> <footer> <header> <hgroup><mark> <meter> <nav> <progress> <ruby> <rt> <rp><section> <time> <wbr><audio> <video> <source> <embed> <track><datalist> <keygen> <output>
  • 12. mos.bayomi@gmail.com.
  • 13. mos.bayomi@gmail.com<div>
  • 14. mos.bayomi@gmail.com<div>
  • 15. mos.bayomi@gmail.com<div id= "header"><ul id="nav"> </ul></div><div id="content"><div id="blogpost"><h1>This is my Blogpost</h1><p>This is my first paragraph.</p></div></div><div id="sidebar" ><div id="blogroll"><p>My blogroll Content.</p></div></div><div id="footer"><p>My Footer Content.</p></div>
  • 16. mos.bayomi@gmail.com<header><nav></nav></header><div id="content"><article id="blogpost"><section><h1>This is my Blogpost</h1><p>This is my first paragraph.</p></section></article></div><div id="sidebar"><aside id="blogroll"><p>My blogroll Content.</p></aside></div><footer><p>My Footer Content.</p></footer>
  • 17. mos.bayomi@gmail.com<div>ID
  • 18. mos.bayomi@gmail.com
  • 19. mos.bayomi@gmail.comwindownavigator
  • 20. mos.bayomi@gmail.com<script src="modernizr.min.js"></script>modernizr_init()
  • 21. mos.bayomi@gmail.comModernizr.video truefalseif (Modernizr.video) {// lets play some video!}else{// no native video support available :(}
  • 22. mos.bayomi@gmail.com<header><footer><nav><nav>
  • 23. mos.bayomi@gmail.comHEADER:<header><h1>Heading Text</h1><p> Text or images can be included here</p><p> Logos are frequently placed here too</p></header>The <header> tag can also contain an <hgroup> tag, as shown. The <hgroup> taggroups headings together, using the <h1> to <h6> heading levelsshown here with a main heading and a sub-heading.<header><hgroup><h1>Main Heading</h1><h2>Sub-heading </h2></hgroup><p> Text or images can be included here</p></header>
  • 24. mos.bayomi@gmail.comFOOTER:The <footer> element contains information about a page, article, or section, such asthe author or date of the article.As a page footer, it may contain copyright or other important legal information.<footer><p>Copyright 2011 Acme United. All rights reserved.</p></footer>The HTML5 specification says: ―A footer typically contains information about itssection such aswho wrote it, links to related documents, copyright data, and the like.‖------------------------------------------------------------------------------------------------------------------The Navigation area<nav><ul><li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Our Products</a></li><li><a href="#">Contact Us</a></li></ul>
  • 25. mos.bayomi@gmail.com<menu><nav><article><section><section>
  • 26. mos.bayomi@gmail.com<menu><button type="button" >Clio</button><button type="button" >Thalia</button><button type="button">Urania</button><button type="button">Calliope</button></menu>------------------------------------------------------------------------------------------------------------------<section>The <section> element is commonly misused. Most people would think of using thesection tag as a container block level element to contain a portion of the site. This isincorrect.The true way to use the section element is to think of it in terms of grouping specificportions of content. Inside a section you may have multiple headings to further narrowthe focus of the section and there may be multiple sections inside a particular piece ofcontent.
  • 27. mos.bayomi@gmail.comThe <section> tag—and the <article> tag, as well—can contain headers, footers, orany other components required to complete the section. The <section> tag is forgrouping content. The content for both the <section> tag and the <article> tag usuallystarts with a <header> and ends with a <footer>, with the content for the tag inbetween.The <section> tag can also contain <article> tags, just as the <article> tag can containthe <section> tag------------------------------------------------------------------------------------------------------------------<article><section> Content </section><section> Content </section></article>------------------------------------------------------------------------------------------------------------------<section><article> Content </article><article> Content </article></section>
  • 28. mos.bayomi@gmail.com<aside><figure><figure> <figcaption><figure><figure><img src="koala.jpg" width="304" height="228"><figcaption>Caption for the figure</figcaption></figure>
  • 29. mos.bayomi@gmail.com<aside>Think of this tag as holding supplementary content that is not part of the flow of thearticle it supplements. In magazines, asides are frequently used to highlight a pointthat was made in the article itself. The <aside> tag contains content that can beremoved without affecting the information conveyed by the article, section, or pagethat contains it.<p>My family and I visited Euro Disney last year.</p><aside><h4>Disney in France</h4><p>Besides Euro Disney, there is a Disneyland in California.</p></aside>
  • 30. mos.bayomi@gmail.comA Form of Madness
  • 31. mos.bayomi@gmail.com<form>
  • 32. mos.bayomi@gmail.com• Input type= datetime global date-and-time input control• input type = datetime-local local date-and-time input control• input type = date date input control• input type = month year-and-month input control• input type = time time input control• input type = week year-and-week input control• input type = number number input control• input type = range imprecise number-input control• input type = email e-mail address input control• input type = url URL input control• input type = search search field• input type = tel telephone-number-input field• input type = color color-well control•
  • 33. mos.bayomi@gmail.comDojo jQuery UI YUI.date, month, week, time, date + time, anddate+time–timezone.• See Demos
  • 34. mos.bayomi@gmail.comHow to solve the problem for browsers that doesn’t support new input typesEx<form><input type="date" id="idate"></form>...<script>var idate = document.getElementById("idate");if (idate.type != "date"){$("#idate").datepicker(); // using jQuery UI}</script>
  • 35. mos.bayomi@gmail.comInput type Browserstype="date"type="month"type="week"type="time"type="datetime"type="datetime-local"
  • 36. mos.bayomi@gmail.com<input type="number" min="0" max="10" step="2" value="6"/> type min max step value
  • 37. mos.bayomi@gmail.com• Input.stepUp(n)• input.stepDown(n)• input.valueAsNumberinput.value
  • 38. mos.bayomi@gmail.comif (!Modernizr.inputtypes.number) {// no native support for type="number" fields// maybe try Dojo or some other JavaScript framework}
  • 39. mos.bayomi@gmail.com<input type="range" min="0" max="10" step="2" value="6"/>
  • 40. mos.bayomi@gmail.comThe latest versions of Safari, Chrome, and Opera all do this.(Sadly, the iPhone renders it as a simple text box. It doesn’t even optimize itsonscreen keyboard for numeric input.)All other browsers simply treat the field as type="text"
  • 41. mos.bayomi@gmail.com• <input type="email">setCustomValidity().• object.setCustomValidity("WRONG!!");
  • 42. mos.bayomi@gmail.comThe email INPUT tag gives you a way to request email addresses in your web form.In most web browsers, this wont look any different than a standard .Where this field becomes important is on mobile devices that change their interfacefor email address fields, such as the iPhone, iPad, and iPod.On those devices, email form fields are given a different keyboard with things likereadily available @-key, period, and minimized spacebar.
  • 43. mos.bayomi@gmail.com• <input type="url">
  • 44. mos.bayomi@gmail.com• <input type="search">• <input type="tel">
  • 45. mos.bayomi@gmail.com• <input type="color">
  • 46. mos.bayomi@gmail.comNew form attributes and functions
  • 47. mos.bayomi@gmail.complaceholdertext,search, url, tel, email password<input placeholder="First and last name" required/>
  • 48. mos.bayomi@gmail.comautocomplete<input type="text" name="creditcard" autocomplete="off">
  • 49. mos.bayomi@gmail.comonoffunspecified
  • 50. mos.bayomi@gmail.comautofocusautofocus<input type="search" name="criteria" autofocus>boolean
  • 51. mos.bayomi@gmail.comlist datalist<datalist id="contactList"><option value="x@example.com" label="Racer X"><option value="peter@example.com" label="Peter"></datalist><input type="email" list="contactList">
  • 52. mos.bayomi@gmail.comTo use this combination:1. Create a datalistelement in your document with its id set to a unique value.The datalist can be located anywhere in the document.2. Populate the datalist with as many option elements as needed to representthe full set of suggestions for values of a control.For example, a datalist representing e-mail contacts should contain all of the contacte-mail addresses as individual option children.<datalist id="contactList"><option value="x@example.com" label="Racer X"><option value="peter@example.com" label="Peter"></datalist>3. Link the input element to the datalistby setting the listattribute to a valuewhich is the idof the associated datalist.<input type="email" id="contacts" list="contactList">
  • 53. mos.bayomi@gmail.comrequired<input type="text" required>
  • 54. mos.bayomi@gmail.comThe valueMissing ConstraintPurpose: Ensure that some value is set on this form controlUsage: Set the requiredattribute on the form control to trueUsage example: <input type="text" name="myText" required>Details: If the required attribute is set on a form control, the control will be in aninvalid state unless the user or a programmatic call sets some value to the field.For example, a blank text field will fail a required check, but will pass as soon as anytext is entered. When blank, the valueMissing will return true.
  • 55. mos.bayomi@gmail.com<input type="text" pattern="[0-9]{16}">
  • 56. mos.bayomi@gmail.commos.bayomi@gmail.com
  • 57. mos.bayomi@gmail.com• <canvas><canvas>
  • 58. mos.bayomi@gmail.commos.bayomi@gmail.comWhat Is a Canvas?When you use a canvas element in your web page, it creates a rectangulararea on the page.By default, this rectangular area is 300 pixels wide and 150 pixels high, butyou can specify the exact size and set other attributes for your canvaselement.
  • 59. mos.bayomi@gmail.com<canvas>
  • 60. mos.bayomi@gmail.com<canvas id="myCanvas" width="200" height="100"></canvas>
  • 61. mos.bayomi@gmail.com<canvas id="myCanvas" width="200" height="100">Your Browser Doesn’t Support Canvas</canvas>
  • 62. mos.bayomi@gmail.com<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>
  • 63. mos.bayomi@gmail.comif (canvas.getContext){...}else{ // put code for browsers that dont support canvas here}ORif (Modernizr.canvas) {. . .}else{// put code for browsers that dont support canvas here}
  • 64. mos.bayomi@gmail.com<head><!--[if IE]><script src="excanvas.js"></script><![endif]--></head>
  • 65. mos.bayomi@gmail.com• <script type="text/javascript">var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script>
  • 66. mos.bayomi@gmail.commos.bayomi@gmail.comTo programmatically use a canvas, you have to first get itscontext.You can then perform actions on the context and finally applythose actions to the context.You can think of making canvas modifications as similar todatabase transactions: you start a transaction, perform certainactions, and then commit the transaction.
  • 67. mos.bayomi@gmail.comgetContext("2d")
  • 68. mos.bayomi@gmail.comfillStylefillRect(x,y,width,height)strokeStyle fillStyle —• strokeRect(x,y,width,height)
  • 69. mos.bayomi@gmail.commos.bayomi@gmail.comEXAMPLE:<script type="text/javascript">function drawSquare () {var canvas = document.getElementById(draw-square);if (canvas.getContext) {var context = canvas.getContext(2d);context.fillStyle = "rgb(150,29,28)";context.fillRect (2,2,96,96);} else {// put code for browsers that dont support canvas here}} </script>
  • 70. mos.bayomi@gmail.commos.bayomi@gmail.comThe first thing this script does is find the element with theid draw-square:var canvas = document.getElementById(draw-square);Then it checks to see if the browser supports the contextmethod on this element.This is an easy way to make sure that your canvas will onlydisplay on browsers that support the tag.if (canvas.getContext) { ... }
  • 71. mos.bayomi@gmail.commos.bayomi@gmail.comThe context is the rendering context that is used to manipulatecontent that is displayed.You should use a 2-dimensional (2d) rendering context. But inthe future, 3-dimensional context may be supported.Once I have the context, I need to build my square with the twolines:context.fillStyle = "rgb(150,29,28)";context.fillRect (2,2,96,96);I created a square that is red (rgb(150,29,28)) and is positioned2 pixels down and 2 pixels over and 96 pixels wide and high(fillRect (2,2,96,96)).Then, in the else section of my script, I can put any JavaScript Iwant to display if the canvas element isn’t supported.
  • 72. mos.bayomi@gmail.com• fillRect(x,y,width,height):strokeRect(x,y,width,height):clearRect(x,y,width,height):
  • 73. mos.bayomi@gmail.comfillRect()
  • 74. mos.bayomi@gmail.commos.bayomi@gmail.comLike other 2d platforms, it uses a flat Cartesian coordinatesystem with the origin (0, 0) at the top left.Moving to the right will increase the x value, and movingdownwards will increase the y value.Understanding how the coordinate system works is integral ifyou want to have things draw in the right place.A single unit in the coordinate system is usually equivalent to 1pixel on the screen, so the position (24, 30) would be 24 pixelsright and 30 pixels down.
  • 75. mos.bayomi@gmail.com• moveTo(x,y)• lineTo(x,y)stroke().• closePath():• lineWidth = 4:• context.lineJoin=round‘ :
  • 76. mos.bayomi@gmail.com• quadraticCurveTo(x1,y1, x2,y2):
  • 77. mos.bayomi@gmail.comX2,Y2X1,Y1
  • 78. mos.bayomi@gmail.com• drawImage(image, dx, dy)(dx, dy)(0,0)• drawImage(image, dx, dy, dw, dh)dw dh(dx, dy).
  • 79. mos.bayomi@gmail.com• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)(sx, sy, sw, sh),(dw, dh), (dx,dy).<img> Image
  • 80. mos.bayomi@gmail.com• createLinearGradient(x0,y0,x1,y1)(x0,y0) (x1,y1).
  • 81. mos.bayomi@gmail.com• createRadialGradient(x0,y0,r0,x1,y1,r1)(x0,y0) r0.(x1,y1) r1.
  • 82. mos.bayomi@gmail.comaddColorStop
  • 83. mos.bayomi@gmail.com<canvas id="d" width="300" height="225"></canvas><script>var d_canvas = document.getElementById("d");var context = d_canvas.getContext("2d");var my_gradient = context.createLinearGradient(0,0,300,0);my_gradient.addColorStop(0, "black");my_gradient.addColorStop(1, "white");context.fillStyle = my_gradient;context.fillRect(0, 0, 300, 225);</script>
  • 84. mos.bayomi@gmail.comvar bg= new Image();bg= "gravel.jpg";bg.onload = function (){.....context.strokeStyle=context.createPattern(bg,repeat).....}
  • 85. mos.bayomi@gmail.commos.bayomi@gmail.comAs you can see, we are still calling stroke() for our path.However, this time we have set a strokeStyle property on thecontext first, passing in the result of a call tocontext.createPattern. and once again the image needsto be previously loaded in order for the canvas to perform theoperation.The second argument is a repetition pattern that can be one ofthe choices :repeat (Default) The image is repeated in both directionsrepeat-x The image is repeated only in the X dimensionrepeat-y The image is repeated only in the Y dimensionno-repeat The image is displayed once and not repeated
  • 86. mos.bayomi@gmail.com
  • 87. mos.bayomi@gmail.comscale(x,y)
  • 88. mos.bayomi@gmail.comcontext.rotate(angle)context.save();// rotation angle is specified in radianscontext.rotate(1.57);context.drawImage(myImage, 0, 0, 100, 100);context.restore();
  • 89. mos.bayomi@gmail.com• fillText (text, x, y, maxwidth)• strokeText (text, x, y, maxwidth)
  • 90. mos.bayomi@gmail.commos.bayomi@gmail.comBoth functions take the text as well as the location at which itshould be drawn.Optionally, a maxwidth argument can be provided to constrainthe size of the text by automatically shrinking the font to fit thegiven size.
  • 91. mos.bayomi@gmail.com• font• textAligntext-alignstart, end, left, right, center.• textBaselinetop, hanging, middle, alphabetic,ideographic, and bottom.
  • 92. mos.bayomi@gmail.com• textBaseline
  • 93. mos.bayomi@gmail.commos.bayomi@gmail.comThe top of the em square is roughly at the top of the glyphs in afont, the hanging baseline is where some glyphs like ը areanchored, the middle is half-way between the top of theem square and the bottom of the em square, the alphabeticbaseline is where characters like Á, ÿ, f, and Ω are anchored,the ideographic baseline is where glyphs like 私 and達 are anchoredand the bottom of the em square is roughly at the bottom of theglyphsin a font.The top and bottom of the bounding box can be far from thesebaselines, dueto glyphs extending far outside the em square
  • 94. mos.bayomi@gmail.comcontext• shadowColor• shadowOffsetX:• shadowOffsetY:• shadowBlur
  • 95. mos.bayomi@gmail.comrequestAnimFrame
  • 96. mos.bayomi@gmail.comwindow.requestAnimFrame = (function(callback) {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function(callback) {window.setTimeout(callback, 1000 / 60);};})(); // call function after its declaration
  • 97. mos.bayomi@gmail.comfunction animate() {// get canvas and its context.....// clear canvas contextcontext.clearRect(0, 0, canvas.width, canvas.height);// draw stuff.....// request new framerequestAnimFrame(function() {animate();});}// end of animate function
  • 98. mos.bayomi@gmail.comSVGVector-based graphics for the Web
  • 99. mos.bayomi@gmail.com
  • 100. mos.bayomi@gmail.com<svg viewBox="0 0 320 240“ style=“border: 1px solid #999;width: 320px; height:240px;"></svg>
  • 101. mos.bayomi@gmail.com<svg id="mysvg" viewBox="0 0 320 240" style="border: 1pxsolid #999; width: 320px; height:240px;"><rect x="50" y="50" width="100" height="100“style="fill: rgb(255,0,0)"></rect><line x1="50" y1="50" x2="150" y2="150"style="stroke: rgb(0,127,127); stroke-width: 5;"></line><circle cx="165" cy="100" r="50"style="fill:rgb(0,255,0);"></circle></svg>
  • 102. mos.bayomi@gmail.com<polygon points="265,50 315,150 215,150"style="stroke: rgb(51,51,51); fill: rgb(204,204,204);stroke-width: 5;"></polygon>
  • 103. mos.bayomi@gmail.com<polyline>
  • 104. mos.bayomi@gmail.com<rect x="50" y="50" width="100" height="100"fill="rgb(255,0,0)"></rect><line x1="50" y1="50" x2="150" y2="150"stroke="rgb(0,127,127)" stroke-width="5"></line>
  • 105. mos.bayomi@gmail.comrect {fill: rgb(255,0,0);}line {stroke: rgb(0,127,127);stroke-width: 5;}
  • 106. mos.bayomi@gmail.com<image x="10" y="10"width="236" height="260"xlink:href="example.png"></image>xlink:href
  • 107. mos.bayomi@gmail.com<text x="10" y="20">Hi everybody , everything is OK!</text>
  • 108. mos.bayomi@gmail.com
  • 109. mos.bayomi@gmail.comNo Plugin?? -- Yes -- no plugin
  • 110. mos.bayomi@gmail.com<audio>– The <audio> tag identifies sound content, such as music or any other audiostreams.– The <audio> tag has attributes that control what, when, and how audio will beplayed. The attributes are src, preload, controls, loop, and autoplay.<audio src="MyFirstMusic.ogg" controls autoplay loop>Your browser does not support the audio tag.</audio>
  • 111. mos.bayomi@gmail.com<source><source>– The <video> and <audio> tags can contain the <source> tag, whichdefines multimedia resources for <video> and <audio>tags.– With this element, you specify alternative video and audio files fromwhich the browser can then choose based on its media type or codecsupport.<audio controls><source src="MyFirstAudio.ogg" /><source src=" MyFirstAudio.mp3" /><p>Your browser does not support the audio tag</p></audio>
  • 112. mos.bayomi@gmail.comBrowser MP3 Wav OggInternet Explorer 9 YES NO NOFirefox 4.0 NO YES YESGoogle Chrome 6 YES YES YESApple Safari 5 YES YES NOOpera 10.6 NO YES YES<audio>
  • 113. mos.bayomi@gmail.com
  • 114. mos.bayomi@gmail.com1. load():2. play():3. pause():4. canPlayType(type):
  • 115. mos.bayomi@gmail.com1. Duration :2. Paused:3. ended4. startTime5. error6. currentSrc :
  • 116. mos.bayomi@gmail.com1. autoplay :2. loop3. currentTime4. controls5. volume6. muted
  • 117. mos.bayomi@gmail.comProblems, Problems, and Solutions
  • 118. mos.bayomi@gmail.com
  • 119. mos.bayomi@gmail.com<embed><embed><embed src="intro.swf" height="200" width="200">• Problems:
  • 120. mos.bayomi@gmail.com<object><object><object data="intro.swf" height="200" width="200">• Problems:
  • 121. mos.bayomi@gmail.com<video><video>– allows you to broadcast video clips or streaming visual media.– It has all the attributes of the <audio> tag plus three more: poster, width,and height.– The poster attribute lets you identify an image to be used while the video isloading or in the case when the video wont load at all.<video src="MyFirstMovie.ogg" controls="controls">Your browser does not support the video tag</video>• Problems:<video>
  • 122. mos.bayomi@gmail.com<video><video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"><source src="movie.webm" type="video/webm"><object data="movie.mp4" width="320" height="240"><embed src="movie.swf" width="320" height="240"></object></video>
  • 123. mos.bayomi@gmail.com1. poster :2. width, height3. videoWidth, videoHeight
  • 124. mos.bayomi@gmail.comYou Are Here (And So Is Everybody Else)
  • 125. mos.bayomi@gmail.com
  • 126. mos.bayomi@gmail.com
  • 127. mos.bayomi@gmail.comnavigatornavigator.geolocationfunction get_location() {navigator.geolocation.getCurrentPosition(show_map);}if (Modernizr.geolocation)
  • 128. mos.bayomi@gmail.comgetCurrentPosition()
  • 129. mos.bayomi@gmail.comshow_map()getCurrentPosition()getCurrentPosition(callback function)
  • 130. mos.bayomi@gmail.comfunction show_map(position) {var latitude = position.coords.latitude;var longitude = position.coords.longitude;// lets show a map or do something interesting!}coords timestampgetCurrentPosition(callback function)
  • 131. mos.bayomi@gmail.com(Since this is all happening asynchronously, you can’t reallyknow when that will happen in advance.It might take some time for the user to read the info bar and agree to shareher location, devices with dedicated GPS hardware may take some moretime to connect to a GPS satellite, and so on.)
  • 132. mos.bayomi@gmail.composition.coordsposition.coordsProperty Type Notescoords.latitude double Decimal degreescoords.longitude double Decimal degreescoords.altitude doubleor null Meters above the reference ellipsoidcoords.accuracy double Meterscoords.altitudeAccuracy doubleor null Meterscoords.heading doubleor null Degrees clockwise from true northcoords.speed doubleor null Meters/second
  • 133. mos.bayomi@gmail.comOnly three of the properties are guaranteed to be there (coords.latitude,coords.longitude, and coords.accuracy).The rest might come back as null, depending on the capabilities of yourdevice and the backend positioning server with which it communicates.The headingand speedproperties are calculated based on the user’sprevious position, if possible.
  • 134. mos.bayomi@gmail.comgetCurrentPosition()navigator.geolocation.getCurrentPosition(show_map, handle_error).PositionErrorcode message
  • 135. mos.bayomi@gmail.comcode
  • 136. mos.bayomi@gmail.comfunction handle_error(err) {if (err.code== 1) {// user said no!}}
  • 137. mos.bayomi@gmail.comgetCurrentPosition()PositionOptionsPositionOptions• enableHighAccuracy• timeout• maximumAge
  • 138. mos.bayomi@gmail.comEx:navigator.geolocation.getCurrentPosition(success_callback, error_callback, {maximumAge: 75000});What you’re saying is that you don’t necessarily need the user’scurrentlocation.You would be satisfied with knowing where he was 75 seconds (75000milliseconds) ago.
  • 139. mos.bayomi@gmail.comwatchPosition()getCurrentPosition().
  • 140. mos.bayomi@gmail.comwatchPosition()clearWatch(t)setInterval() clearInterval()
  • 141. mos.bayomi@gmail.comgeolocation<scriptsrc=" http://maps.google.com/maps/api/js?sensor=false"></script>var map = newgoogle.maps.Map(document.getElementById("map_div"), myOptions);//the div to display on , and options for map
  • 142. mos.bayomi@gmail.comvar myOptions = {zoom: 8, //the zoom level 0 to 21center: new google.maps.LatLng(latitude, longitude),//the center of map displayedmapTypeId: google.maps.MapTypeId.ROADMAP//Map Type}
  • 143. mos.bayomi@gmail.com
  • 144. mos.bayomi@gmail.com
  • 145. mos.bayomi@gmail.com– sessionStorage localStoragewindow
  • 146. mos.bayomi@gmail.comwindow.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’);myFirstValue myFirstKey
  • 147. mos.bayomi@gmail.comgetItemalert(window.sessionStorage.getItem(‘myFirstKey’));window.sessionStorage.myFirstKey = ‘myFirstValue’;alert(window.sessionStorage.myFirstKey);
  • 148. mos.bayomi@gmail.comlocalStorage
  • 149. mos.bayomi@gmail.comsessionStorage localStorageValues persist only as long asthe window or tab in whichthey were storedValues persist beyond window andbrowser lifetimes.Values are only visible withinthe window or tab that createdthem.Values are shared across every windowor tabrunning at the same origin.
  • 150. mos.bayomi@gmail.comlengthkey(index)• getItem(key)null
  • 151. mos.bayomi@gmail.com• setItem(key, value)QUOTA_EXCEEDED_ERR
  • 152. mos.bayomi@gmail.com• removeItem(key) :
  • 153. mos.bayomi@gmail.comThreads in JS
  • 154. mos.bayomi@gmail.com
  • 155. mos.bayomi@gmail.comworker = new Worker("myWorker.js");
  • 156. mos.bayomi@gmail.compostMessagepostMessage().worker.postMessage("a message from parent page");
  • 157. mos.bayomi@gmail.compostMessage()onmessageevent.dataonmessage = function myFunction(event){event.data;……postMessage(a message to the parent page);}myWorkers.js
  • 158. mos.bayomi@gmail.comErrorEventWorker.onerror = function(e){…………}
  • 159. mos.bayomi@gmail.com
  • 160. mos.bayomi@gmail.com
  • 161. mos.bayomi@gmail.com

×