Chapter 13 HTML5 Functions

Size: px

Start display at page:

Download "Chapter 13 HTML5 Functions"

Roxanne York
5 years ago
Views:

1 Sungkyunkwan University Chapter 13 HTML5 Functions Prepared by H. Ahn and H. Choo Web Programming Copyright Networking Laboratory Copyright Networking Laboratory Networking Laboratory 1/50

2 Chapter 13 Outline 13.1 SVG 13.2 Drag-and-drop 13.3 HTML5 Geolocation 13.4 HTML5 Web Worker Web Programming Networking Laboratory 2/50

3 13.1 SVG Scalable Vector Graphics (SVG) is an XML-based vector image format SVG is used to define vector-based graphics on the Web SVG is recommended by W3C since 1999 Web Programming Networking Laboratory 3/50

4 13.1 SVG SVG graphics don t lose quality when enlarged or resized All elements and attributes in an SVG file are animatable SVG images can be created and edited with any text editor Web Programming Networking Laboratory 4/50

5 13.1 SVG Difference between SVG and Canvas SVG is a language for describing 2D graphics in XML SVG is XML based, which means that every element is available within the SVG DOM In SVG, each drawn shape is remembered as an object If attributes of an SVG object are changed, the browser can automatically re-render the shape Canvas draws 2D graphics, on the fly with a JavaScript Canvas is rendered pixel by pixel In canvas, once the graphic is drawn, it is forgotten by the browser If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic Web Programming Networking Laboratory 5/50

6 13.1 SVG Difference between SVG and Canvas SVG Canvas 500% Scale 500% Scale Web Programming Networking Laboratory 6/50

7 13.1 SVG Circle Example <!DOCTYPE html> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" strokewidth="4" fill="yellow" /> </svg> </body> </html> Web Programming Networking Laboratory 7/50

8 13.1 SVG Circle Example fill="red" fill="blue" Web Programming Networking Laboratory 8/50

9 13.1 SVG Rectangle Example <!DOCTYPE html> <html> <body> <svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke -width:10;stroke:rgb(0,0,0)" /> </svg> </body> </html> Web Programming Networking Laboratory 9/50

10 13.1 SVG Rectangle Example Web Programming Networking Laboratory 10/50

11 13.1 SVG Rounded Rectangle Example <!DOCTYPE html> <html> <body> <svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg> </body> </html> Web Programming Networking Laboratory 11/50

12 13.1 SVG Rounded Rectangle Example rx="20" ry="20" rx="50" ry="50" rx="100" ry="100" Web Programming Networking Laboratory 12/50

13 13.1 SVG Polygon Example <!DOCTYPE html> <html> <body> <svg width="300" height="300"> <polygon points="100,20 250, ,210" style="fill: red; stroke: black; stroke-width: 3" /> </svg> </body> </html> Web Programming Networking Laboratory 13/50

14 13.1 SVG Polygon Example Web Programming Networking Laboratory 14/50

15 13.1 SVG Logo Example <!DOCTYPE html> <html> <body> <svg height="130" width="500"> <defs> <lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stopopacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stopopacity:1" /> </lineargradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" fontfamily="verdana" x= 40" y="86">skku</text> </svg> </body> </html> Web Programming Networking Laboratory 15/50

16 13.1 SVG Logo Example Web Programming Networking Laboratory 16/50

17 13.1 SVG Polyline Example <!DOCTYPE html> <html> <body> <svg> <polyline points="10,10 150,20 180,70 230,80" style="fill: none; stroke: red; stroke-width: 3" /> </svg> </body> </html> Web Programming Networking Laboratory 17/50

18 13.1 SVG Polyline Example Web Programming Networking Laboratory 18/50

19 13.1 SVG Animation Example <!DOCTYPE html> <html> <body> <svg> <rect width="100" height="100" fill="red"> <animate attributename="height" from="0" to="100" dur="10s" /> </rect> </svg> </body> </html> Web Programming Networking Laboratory 19/50

20 13.1 SVG Animation Example Web Programming Networking Laboratory 20/50

21 13.1 SVG Animation Example <!DOCTYPE html> <html> <body> <svg height="500" width="500"> <circle r="100" cx="150" cy="110" fill="slategrey" stroke="#000" stroke-width="7"> <animate attributename="r" from="0" to="100" dur="3s" /> <animate attributename="cx" from="50" to="150" dur="3s" /> </circle> </svg> </body> </html> Web Programming Networking Laboratory 21/50

22 13.1 SVG Animation Example Web Programming Networking Laboratory 22/50

23 13.2 Drag and Drop Drag and drop is one of the most popular user interfaces in Windows Dragging an object to another application with the mouse In HTML5, drag and drop is part of the standard: Any element can be draggable Drag Drop Web Programming Networking Laboratory 23/50

24 13.2 Drag and Drop Events Drag source Passing elements Drop target Web Programming Networking Laboratory 24/50

25 13.2 Drag and Drop Example <!DOCTYPE html> <html> <head> <style> #shopping_cart { width: 450px; height: 100px; padding: 10px; border: 1px dotted red; } </style> <script> function allowdrop(e) { e.preventdefault(); } Web Programming Networking Laboratory 25/50

26 13.2 Drag and Drop Example function handledragstart(e) { e.datatransfer.effectallowed = 'move'; e.datatransfer.setdata("text", e.target.id); } function handledrop(e) { e.preventdefault(); var src = e.datatransfer.getdata("text"); e.target.appendchild(document.getelementbyid(src)); } </script> </head> Web Programming Networking Laboratory 26/50

27 13.2 Drag and Drop Example <body> <p>move things by dragging.</p> <div id="shopping_cart" ondrop="handledrop(event)" ondragover="allowdrop(event)"></div> <br> <img id="img1" src="tv.png" draggable="true" ondragstart="handledragstart(event)" width="150" height="100"> <img id="img2" src="audio.png" draggable="true" ondragstart="handledragstart(event)" width="150" height="100"> <img id="img3" src="camera.png" draggable="true" ondragstart="handledragstart(event)" width="150" height="100"> </body> </html> Web Programming Networking Laboratory 27/50

28 13.2 Drag and Drop Example - Result Web Programming Networking Laboratory 28/50

29 13.2 Drag and Drop Example - Result Web Programming Networking Laboratory 29/50

30 13.3 HTML5 Geolocation The HTML Geolocation API is used to get the geographical position of a user Geolocation allows you to share your location with a website Web Programming Networking Laboratory 30/50

31 13.3 HTML5 Geolocation Geolocation Object var geolocation = navigator.geolocation; Method getcurrentposition() watchposition() clearwatch Description Returns the user's position Returns the current position of the user and continues to return updated position as the user moves Stops the watchposition() method Web Programming Networking Laboratory 31/50

32 13.3 HTML5 Geolocation Example <!DOCTYPE html> <html> <body> <script> <p>click the button to get your coordinates.</p> <button onclick="getlocation()">try It</button> <p id="demo"></p> var x = document.getelementbyid("demo"); function getlocation() { if (navigator.geolocation) { navigator.geolocation.getcurrentposition(showposition); } else { Web Programming Networking Laboratory 32/50

33 13.3 HTML5 Geolocation Example x.innerhtml = "Geolocation is not supported by this browser."; } } function showposition(position) { x.innerhtml = "Latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude; } </script> </body> </html> Web Programming Networking Laboratory 33/50

34 13.3 HTML5 Geolocation Example Web Programming Networking Laboratory 34/50

35 13.3 HTML5 Geolocation Example - Mark on a map <!DOCTYPE html> <html> <body> <p id="demo">click the button to get your position.</p> <button onclick="getlocation()">try It</button> <div id="mapholder"></div> <script> var x = document.getelementbyid("demo"); function getlocation() { if (navigator.geolocation) { navigator.geolocation.watchposition(showposition); } else { x.innerhtml = "Geolocation is not supported by this browser."; } } Web Programming Networking Laboratory 35/50

36 13.3 HTML5 Geolocation Example - Mark on a map function showposition(position) { var latlon = position.coords.latitude + "," + position.coords.longitude; var img_url = " +latlon+"&zoom=14&size=400x300&key=aizasybu- 916DdpKAjTmJNIgngS6HL_kDIKU0aU"; document.getelementbyid("mapholder").innerhtml = "<img src='"+img_url+"'>"; } function showerror(error) { switch(error.code) { case error.permission_denied: x.innerhtml = "User denied the request for Geolocation." break; Web Programming Networking Laboratory 36/50

37 13.3 HTML5 Geolocation Example - Mark on a map 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; } } </script> </body> </html> Web Programming Networking Laboratory 37/50

38 13.3 HTML5 Geolocation Example - Result Web Programming Networking Laboratory 38/50

39 13.3 HTML5 Geolocation The getcurrentposition() Method Property coords.latitude coords.longitude coords.accuracy coords.altitude coords.altitudeacc uracy coords.heading coords.speed timestamp Returns The latitude as a decimal number (always returned) The longitude as a decimal number (always returned) The accuracy of position (always returned) The altitude in meters above the mean sea level (returned if available) The altitude accuracy of position (returned if available) The heading as degrees clockwise from North (returned if available) The speed in meters per second (returned if available) The date/time of the response (returned if available) Web Programming Networking Laboratory 39/50

40 13.3 HTML5 Geolocation Get Location while Moving Call watchposition() on geolocation object watchposition(): Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car). clearwatch(): stops the watchposition () method Web Programming Networking Laboratory 40/50

41 13.3 HTML5 Geolocation Get Location while Moving <!DOCTYPE html> <html> <body> <button onclick="startgeolocation()"> 위치정보시작 </button> <button onclick="stopgeolocation()"> 위치정보중지 </button> <div id="target"></div> <script> var id; var mydiv = document.getelementbyid("target"); function startgeolocation() { if (navigator.geolocation) { id = navigator.geolocation.watchposition(showgeolocation); } } Web Programming Networking Laboratory 41/50

42 13.3 HTML5 Geolocation Get Location while Moving function showgeolocation(location) { mydiv.innerhtml = "( 위도 : " + location.coords.latitude + ", 경도 : " + location.coords.longitude + ")"; } function stopgeolocation() { if (navigator.geolocation) { navigator.geolocation.clearwatch(id); } } </script> </body> </html> Web Programming Networking Laboratory 42/50

43 13.3 HTML5 Geolocation Get Location while Moving It keep update the current position until the user stops Web Programming Networking Laboratory 43/50

44 13.4 HTML5 Web Worker When executing scripts in an HTML page, the page becomes unresponsive until the script is finished A web worker is a JavaScript that runs in the background, without affecting the performance of the page Users can continue to do whatever they want: Clicking, selecting things, etc., while the web worker runs in the background Web Programming Networking Laboratory 44/50

45 13.4 HTML5 Web Worker Counting Example // worker.js // javascropt source to find prime number var i = 0; function timedcount() { i = i + 1; postmessage(i); settimeout("timedcount()",500); } timedcount(); Web Programming Networking Laboratory 45/50

46 13.4 HTML5 Web Worker Counting Example <!DOCTYPE html> <html> <body> <p>count numbers: <output id="result"></output></p> <button onclick="startworker()">start Worker</button> <button onclick="stopworker()">stop Worker</button> <script> var w; function startworker() { if(typeof(worker)!== "undefined") { if(typeof(w) == "undefined") { w = new Worker("worker.js"); } w.onmessage = function(event) { Web Programming Networking Laboratory 46/50

47 13.4 HTML5 Web Worker Counting Example document.getelementbyid("result").innerhtml = event.data; }; } else { document.getelementbyid("result").innerhtml = "Sorry, your browser does not support Web Workers..."; } } function stopworker() { w.terminate(); w = undefined; } </script> </body> </html> Web Programming Networking Laboratory 47/50

48 13.4 HTML5 Web Worker Counting Example Web Programming Networking Laboratory 48/50

49 13.4 HTML5 Web Worker Finding Prime Number Example // worker2.js // javascript source to find prime number var n = 1; search: while (true) { n += 1; for (var i = 2; i <= Math.sqrt(n) ; i += 1) if (n % i == 0) continue search; // deliver prime number to a web page whenever it finds it postmessage(n); } Web Programming Networking Laboratory 49/50

50 13.4 HTML5 Web Worker Example Find Prime Number Web Programming Networking Laboratory 50/50

CSCU9B2 Practical 8: Location-Aware Web Pages NOT USED (DOES NOT ALL WORK AS ADVERTISED)

CSCU9B2 Practical 8: Location-Aware Web Pages NOT USED (DOES NOT ALL WORK AS ADVERTISED) Aims: To use JavaScript to make use of location information. This practical is really for those who need a little