CHAPTER 13. HTML5 위치정보와드래그앤드롭
SVG SVG(Scalable Vector Graphics) 는 XML- 기반의벡터이미지포맷 웹에서벡터 - 기반의그래픽을정의하는데사용 1999 년부터 W3C 에의하여표준
SVG 의장점 SVG 그래픽은확대되거나크기가변경되어도품질이손상되지않는다. SVG 파일에서모든요소와속성은애니메이션이가능하다. SVG 이미지는어떤텍스트에디터로도생성하고편집할수있다.
원예제 <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="100" r="50" stroke="black" stroke-width="3" fill="red" /> </svg> </body> </html>
사각형예제 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" style="fill: rgb(255,0, 0); stroke-width: 3; stroke: rgb(128, 128, 128)" /> </svg>
다각형예제 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="100,20 250,160 60,210" style="fill: red; stroke: black; stroke-width: 3" /> </svg>
폴리라인예제 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="10,10 150,20 180,70 230,80" style="fill: none; stroke: red; stroke-width: 3" /> </svg>
애니메이션 #1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="100" height="100" fill="red"> <animate attributename="height" from="0" to="100" dur="10s" /> </rect> </svg> 구글크롬을사용한다!
애니메이션 #2 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle r="100" cx="200" cy="110" fill="slategrey" stroke="#000" strokewidth="7"> <animate attributename="r" from="0" to="100" dur="3s" /> <animate attributename="cx" from="100" to="200" dur="3s" /> </circle> </svg> 구글크롬을사용한다!
드래그와드롭 드래그 (drag) 와드롭 (drop) - 윈도우에서아주많이사용하는사용자인터페이스중의하나 객체를마우스로끌어서다른애플리케이션에놓는것
발생하는이벤트
예제 <!DOCTYPE HTML> <html> <head> <style> #shopping_cart { width: 450px; height: 100px; padding: 10px; border: 1px dotted red; </style> <script> function allowdrop(e) { e.preventdefault(); 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> <body> <p> 원하는물건을끌어서옮기세요.</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>
웹브라우저로실행하기 실행결과
HTML5 위치정보 위치정보 (Geolocation) 은자신의위치를웹사이트와공유 현재지역의날씨, 유명한맛집등의정보를제공받을수있다.
geolocation 객체 var geolocation = navigator.geolocation;
예제 <!DOCTYPE html> <html> <body> <button onclick="getgeolocation()"> 위치정보얻기 </button> <div id="target"></div> <script> var mydiv = document.getelementbyid("target"); function getgeolocation() { if (navigator.geolocation) { navigator.geolocation.getcurrentposition(showlocation); function showlocation(location) { mydiv.innerhtml = "( 위도 : " + location.coords.latitude + ", 경도 : " + location.coords.longitude + ")" </script> </body> </html>
지도에위치표시하기 <!DOCTYPE html> <html> <body> <button onclick="getgeolocation()"> 지도보이기 </button> <script> var mydiv = document.getelementbyid("target"); function getgeolocation() { if (navigator.geolocation) { navigator.geolocation.getcurrentposition(showgeolocation); function showgeolocation(position) { var pos = position.coords.latitude + "," + position.coords.longitude; var url = "http://maps.googleapis.com/maps/api/staticmap?center=" + pos + "&zoom=14&size=500x300&sensor=false"; window.open(url); </script> </body> </html>
웹브라우저로실행하기 실행결과
이동하면서위치정보를얻기 geolocation 객체의 watchposition() 을호출 watchposition() - 사용자의현재위치를연속하여출력한다. clearwatch() - watchposition() 메서드를중지한다.
이동하면서위치정보를얻기 <!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); function showgeolocation(location) { mydiv.innerhtml = "( 위도 : " + location.coords.latitude + ", 경도 : " + location.coords.longitude + ")"; function stopgeolocation() { if (navigator.geolocation) { navigator.geolocation.clearwatch(id); </script> </body> </html>
실행결과
HTML5 웹워커 웹워커 (web worker): 자바스크립트에백그라운드에서실행되는스레드 (thread) 를도입한것
소수구하기 worker.js // 소수를찾는자바스크립트소스 var n = 1; search: while (true) { n += 1; for (var i = 2; i <= Math.sqrt(n) ; i += 1) if (n % i == 0) continue search; // 소수를발견할때마다바로웹페이지로전달한다. postmessage(n);
소수구하기 <!DOCTYPE HTML> <html> <head> <title> 웹워커예제 </title> </head> <body> <button onclick="startworker()"> 웹워커시작 </button> <button onclick="stopworker()"> 웹워커종료 </button> <p> 현재까지발견된가장큰소수는 <output id="result"></output> </p> <script> var w;
소수구하기 function startworker() { if (typeof (Worker)!== "undefined") { if (typeof (w) == "undefined") { w = new Worker("worker.js"); w.onmessage = function (event) { document.getelementbyid("result").innerhtml = event.data; ; else { document.getelementbyid("result").innerhtml = " 웹브라우저가웹워커를지원하지않음 "; function stopworker() { w.terminate(); </script> </body> </html>