JavaScript Web API

Geolocation API
Drag and Drop API
1. Drag and Drop Example
2. Drag and Drop Explain
Web Storage API
Web Workers API
SSE API

Geolocation API

What is Geolocation API?

locate a user’s position

Using HTML Geolocation

getCurrentPosition() : used to return the user’s position

<button onclick="getLocation()">Click the button to get your coordinates</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>

W3C Example

Handling Errors and Rejections

getCurrentPosition()메소드 의 두 번째 매개 변수는 오류를 처리하는 데 사용됨

사용자의 위치를 얻지 못하면 실행할 함수를 지정

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    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>

W3C Example

Displaying the Result in a Map

맵을 표시하려면 맵 서비스를 이용해야함

네이버, 다음(best), 구글에서 지원함 (구글은 유료)

Daum Kakao API

Drag and Drop API

Drag and Drop Example

<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

Drag and Drop Explain

요소를 끌리게 만들기
```
 <img draggable="true">
```
무엇을 드래그할지 설정하기
```
 <script>
 function drag(ev) {
   ev.dataTransfer.setData("text", ev.target.id);
 }
 </script>
    
 <img draggable="true" ondragstart="drag(event)">
```
▸ ondragstart : 함수를 부르고, 드래그할 데이터를 지정함
▸ dataTransfer.setData() : 데이터 유형, 드래그 된 데이터의 값을 설정
어디에 드롭할지 설정하기
▸ ondragover : 드래그 한 데이터를 놓을 수있는 위치를 지정
▸ event.preventDefault() : 기본적으로 데이터 / 요소는 다른 요소에서 삭제할 수 없어서 드롭을 허용하려면 요소의 기본 처리를 방지해야하기 위해 사용

드롭하기

ondrop 드롭한 후 드롭 이벤트 처리하기

 function drop(ev) {
   ev.preventDefault();
   var data = ev.dataTransfer.getData("text");
   ev.target.appendChild(document.getElementById(data));
 }

W3C Example

Web Storage API

What is Web Storage?

웹 애플리케이션이 사용자 브라우저 내에 로컬로 데이터를 저장

Features of Web Storage?

▸ 안전하게 웹 사이트 성능에 영향을주지 않고 대량의 데이터를 로컬에 저장

▸ 쿠키와 달리 스토리지 제한은 훨씬 크다 (최소 5MB)

▸ 정보는 서버로 전송되지 않음

▸ 원본과 도메인 및 프로토콜별로 제공

▸ 한 출처의 모든 페이지는 동일한 데이터를 저장하고 액세스 할 수 있다

Web Storage Objects

window.localStorage
stores data with no expiration date
브라우저 창이 닫히지 않으면 언제든지 이용가능함
```
  // Store
  localStorage.setItem("lastname", "Smith");

  // Retrieve
  document.getElementById("result").innerHTML = localStorage.getItem("lastname");
```
이렇게도 작성 가능함
```
  // Store
  localStorage.lastname = "Smith";
  // Retrieve
  document.getElementById("result").innerHTML = localStorage.lastname;
```
Removing localStorage Syntax
localStorage.removeItem(“lastname”);
Note
Name/value pairs are always stored as strings. Remember to convert them to another format when needed!
로컬 저장소를 이용한 숫자세기
window.sessionStorage
stores data for one session (data is lost when the browser tab is closed)
세션 저장소를 이용한 숫자세기

Check Web Storage Support

Before using web storage, check browser support for localStorage and sessionStorage

if (typeof(Storage) !== "undefined") {
  // Code for localStorage/sessionStorage.
} else {
  // Sorry! No Web Storage support..
}

Web Workers API

What is a Web Worker?

JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page

You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background

Check Web Worker Support

Before creating a web worker, check whether the user’s browser supports it

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
  // Some code.....
} else {
  // Sorry! No Web Worker support..
}

How to make Web Worker File

Create a Web Worker File (demo_workers.js)
```
 var i = 0;

 function timedCount() {
   i = i + 1;
   postMessage(i);
   setTimeout("timedCount()",500);
 }

 timedCount();
```
▸ postMessage() : post a message back to the HTML page
Note
Normally web workers are not used for such simple scripts, but for more CPU intensive tasks.
Create a Web Worker Object
checks if the worker already exists
```
 if (typeof(w) == "undefined") {
   w = new Worker("demo_workers.js");
 }
```
can send and receive messages from the web worker
```
 w.onmessage = function(event){
   document.getElementById("result").innerHTML = event.data;
 };
```
When the web worker posts a message, the code within the event listener is executed. The data from the web worker is stored in event.data.
Terminate a Web Worker
When a web worker object is created, it will continue to listen for messages (even after the external script is finished) until it is terminated.
```
 w.terminate();
```
▸ terminate() : To terminate a web worker, and free browser/computer resources
Reuse the Web Worker
If you set the worker variable to undefined, after it has been terminated, you can reuse the code
```
 w = undefined;
```

Full Web Worker Example Code

SSE API

Server-Sent Events (One Way Messaging)

when a web page automatically gets updates from a server

This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically

Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.

Receive Server-Sent Event Notifications

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  document.getElementById("result").innerHTML += event.data + "<br>";
};

▸ EventSource : receive server-sent event notifications

Check Server-Sent Events Support

In the tryit example above there were some extra lines of code to check browser support for server-sent events

if(typeof(EventSource) !== "undefined") {
  // Yes! Server-sent events support!
  // Some code.....
} else {
  // Sorry! No server-sent events support..
}

Server-Side Code Example

The server-side event stream syntax is simple. Set the “Content-Type” header to “text/event-stream”. Now you can start sending event streams.

Code in PHP (demo_sse.php)

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

Code in ASP (VB) (demo_sse.asp)

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

Example Code

Full Explain

JavaScript Web API

Table of contents

Geolocation API

What is Geolocation API?

Using HTML Geolocation

Handling Errors and Rejections

Displaying the Result in a Map

Drag and Drop API

Drag and Drop Example

Drag and Drop Explain

Web Storage API

What is Web Storage?

Features of Web Storage?

Web Storage Objects

Check Web Storage Support

Web Workers API

What is a Web Worker?

Check Web Worker Support

How to make Web Worker File

SSE API

Server-Sent Events (One Way Messaging)

Receive Server-Sent Event Notifications

Check Server-Sent Events Support

Server-Side Code Example

Table of contents