Chapter 13 HTML5 Functions - Networking...
Transcript of Chapter 13 HTML5 Functions - Networking...
![Page 1: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/1.jpg)
Web Programming Networking Laboratory 1/50
Sungkyunkwan University
Copyright 2000-2012 Networking LaboratoryCopyright 2000-2018 Networking Laboratory
Chapter 13
HTML5 Functions
Prepared by H. Ahn and H. Choo
![Page 2: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/2.jpg)
Web Programming Networking Laboratory 2/50
Chapter 13 Outline
13.1 SVG
13.2 Drag-and-drop
13.3 HTML5 Geolocation
13.4 HTML5 Web Worker
![Page 3: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/3.jpg)
Web Programming Networking Laboratory 3/50
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
![Page 4: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/4.jpg)
Web Programming Networking Laboratory 4/50
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
13.1 SVG
![Page 5: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/5.jpg)
Web Programming Networking Laboratory 5/50
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
13.1 SVGDifference between SVG and Canvas
![Page 6: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/6.jpg)
Web Programming Networking Laboratory 6/50
13.1 SVGDifference between SVG and Canvas
SVG Canvas
500% Scale 500% Scale
![Page 7: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/7.jpg)
Web Programming Networking Laboratory 7/50
13.1 SVGCircle Example
<!DOCTYPE html><html><body>
<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-
width="4" fill="yellow" /></svg>
</body></html>
![Page 8: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/8.jpg)
Web Programming Networking Laboratory 8/50
13.1 SVGCircle Example
fill="blue"fill="red"
![Page 9: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/9.jpg)
Web Programming Networking Laboratory 9/50
13.1 SVGRectangle 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>
![Page 10: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/10.jpg)
Web Programming Networking Laboratory 10/50
13.1 SVGRectangle Example
![Page 11: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/11.jpg)
Web Programming Networking Laboratory 11/50
13.1 SVGRounded 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>
![Page 12: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/12.jpg)
Web Programming Networking Laboratory 12/50
13.1 SVGRounded Rectangle Example
rx="20" ry="20"
rx="50" ry="50" rx="100" ry="100"
![Page 13: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/13.jpg)
Web Programming Networking Laboratory 13/50
13.1 SVGPolygon Example
<!DOCTYPE html><html><body>
<svg width="300" height="300"><polygon points="100,20 250,160 160,210"
style="fill: red; stroke: black; stroke-width: 3" /></svg>
</body></html>
![Page 14: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/14.jpg)
Web Programming Networking Laboratory 14/50
13.1 SVGPolygon Example
![Page 15: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/15.jpg)
Web Programming Networking Laboratory 15/50
13.1 SVGLogo 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);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient></defs><ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /><text fill="#ffffff" font-size="45" font-
family="Verdana" x=“40" y="86">SKKU</text></svg>
</body></html>
![Page 16: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/16.jpg)
Web Programming Networking Laboratory 16/50
13.1 SVGLogo Example
![Page 17: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/17.jpg)
Web Programming Networking Laboratory 17/50
13.1 SVGPolyline 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>
![Page 18: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/18.jpg)
Web Programming Networking Laboratory 18/50
13.1 SVGPolyline Example
![Page 19: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/19.jpg)
Web Programming Networking Laboratory 19/50
13.1 SVGAnimation 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>
![Page 20: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/20.jpg)
Web Programming Networking Laboratory 20/50
13.1 SVGAnimation Example
![Page 21: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/21.jpg)
Web Programming Networking Laboratory 21/50
13.1 SVGAnimation 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>
![Page 22: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/22.jpg)
Web Programming Networking Laboratory 22/50
13.1 SVGAnimation Example
![Page 23: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/23.jpg)
Web Programming Networking Laboratory 23/50
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
![Page 24: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/24.jpg)
Web Programming Networking Laboratory 24/50
13.2 Drag and DropEvents
Drag source Passing elements Drop target
![Page 25: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/25.jpg)
Web Programming Networking Laboratory 25/50
13.2 Drag and DropExample
<!DOCTYPE html><html><head>
<style>#shopping_cart {
width: 450px;height: 100px;padding: 10px;border: 1px dotted red;
}</style><script>
function allowDrop(e) {e.preventDefault();
}
![Page 26: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/26.jpg)
Web Programming Networking Laboratory 26/50
13.2 Drag and DropExample
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>
![Page 27: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/27.jpg)
Web Programming Networking Laboratory 27/50
13.2 Drag and DropExample
<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>
![Page 28: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/28.jpg)
Web Programming Networking Laboratory 28/50
13.2 Drag and DropExample - Result
![Page 29: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/29.jpg)
Web Programming Networking Laboratory 29/50
13.2 Drag and DropExample - Result
![Page 30: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/30.jpg)
Web Programming Networking Laboratory 30/50
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
![Page 31: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/31.jpg)
Web Programming Networking Laboratory 31/50
13.3 HTML5 GeolocationGeolocation Object
var geolocation = navigator.geolocation;
Method Description
getCurrentPosition() Returns the user's position
watchPosition() Returns the current position of the user and continues to
return updated position as the user moves
clearWatch Stops the watchPosition() method
![Page 32: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/32.jpg)
Web Programming Networking Laboratory 32/50
13.3 HTML5 GeolocationExample
<!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 {
![Page 33: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/33.jpg)
Web Programming Networking Laboratory 33/50
13.3 HTML5 GeolocationExample
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>
![Page 34: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/34.jpg)
Web Programming Networking Laboratory 34/50
13.3 HTML5 GeolocationExample
![Page 35: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/35.jpg)
Web Programming Networking Laboratory 35/50
13.3 HTML5 GeolocationExample - 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.";}
}
![Page 36: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/36.jpg)
Web Programming Networking Laboratory 36/50
13.3 HTML5 GeolocationExample - Mark on a map
function showPosition(position) {var latlon = position.coords.latitude + "," +
position.coords.longitude;var img_url =
"https://maps.googleapis.com/maps/api/staticmap?center="+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;
![Page 37: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/37.jpg)
Web Programming Networking Laboratory 37/50
13.3 HTML5 GeolocationExample - 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>
![Page 38: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/38.jpg)
Web Programming Networking Laboratory 38/50
13.3 HTML5 GeolocationExample - Result
![Page 39: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/39.jpg)
Web Programming Networking Laboratory 39/50
13.3 HTML5 GeolocationThe getCurrentPosition() Method
Property Returns
coords.latitude The latitude as a decimal number (always returned)
coords.longitude The longitude as a decimal number (always returned)
coords.accuracy The accuracy of position (always returned)
coords.altitude The altitude in meters above the mean sea level (returned if available)
coords.altitudeAcc
uracy
The altitude accuracy of position (returned if available)
coords.heading The heading as degrees clockwise from North (returned if available)
coords.speed The speed in meters per second (returned if available)
timestamp The date/time of the response (returned if available)
![Page 40: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/40.jpg)
Web Programming Networking Laboratory 40/50
13.3 HTML5 GeolocationGet 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
![Page 41: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/41.jpg)
Web Programming Networking Laboratory 41/50
13.3 HTML5 GeolocationGet 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);}
}
![Page 42: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/42.jpg)
Web Programming Networking Laboratory 42/50
13.3 HTML5 GeolocationGet 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>
![Page 43: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/43.jpg)
Web Programming Networking Laboratory 43/50
13.3 HTML5 GeolocationGet Location while Moving
It keep update the current position until the user stops
![Page 44: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/44.jpg)
Web Programming Networking Laboratory 44/50
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
![Page 45: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/45.jpg)
Web Programming Networking Laboratory 45/50
13.4 HTML5 Web WorkerCounting Example
// worker.js// javascropt source to find prime number
var i = 0;
function timedCount() {i = i + 1;postMessage(i);setTimeout("timedCount()",500);
}
timedCount();
![Page 46: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/46.jpg)
Web Programming Networking Laboratory 46/50
13.4 HTML5 Web WorkerCounting 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) {
![Page 47: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/47.jpg)
Web Programming Networking Laboratory 47/50
13.4 HTML5 Web WorkerCounting 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>
![Page 48: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/48.jpg)
Web Programming Networking Laboratory 48/50
13.4 HTML5 Web WorkerCounting Example
![Page 49: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/49.jpg)
Web Programming Networking Laboratory 49/50
13.4 HTML5 Web WorkerFinding 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 itpostMessage(n);
}
![Page 50: Chapter 13 HTML5 Functions - Networking Laboratorymonet.skku.edu/wp-content/uploads/2018/08/Chapter-13... · 2018. 11. 29. · Web Programming Networking Laboratory 2/50 Chapter 13](https://reader036.fdocuments.in/reader036/viewer/2022071006/5fc35e7b7a8d3b1cb606981f/html5/thumbnails/50.jpg)
Web Programming Networking Laboratory 50/50
13.4 HTML5 Web WorkerExample – Find Prime Number