HTML5 APIs

HTML5 cung cấp một tập các API hữu ích cho người phát triển web, các API có thể phân loại như sau:

HTML5 Geolocation
HTML5 Drag/Drop
HTML5 Local Storage
HTML5 Web Workers
HTML5 SSE

HTML5 Geolocation

Dùng để xác định vị trí (địa lý) người dùng. Vì liên quan đến thông tin riêng tư nên chỉ nhận được vị trí khi người dùng chấp nhận.

Phiên bản trình duyệt đầu tiên hỗ trợ HTML Geolocation API

Chrome

IE/Edge

Firefox

Safari

Opera

Geolocation API

5.0 – 49.0 (http)

50.0 (https)

9.0

3.5

5.0

16.0

Dùng HTML5 Geolocation

Sử dụng phương thức getCurrentPosition() được dùng để trả về vị trí người dùng. Đoạn mã dưới đây minh hoạ cách lấy kinh độ (longitude) và vĩ độ (latitude) của vị trí người dùng:


<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);

} else {

x.innerHTML = "Geolocation không được hỗ trợ bởi trình duyệt.";

}

}

function showPosition(position) {

x.innerHTML = "Vĩ độ: " + position.coords.latitude +

"<br>Kinh độ: " + position.coords.longitude;

}

</script>

Xem thêm HTML Geolocation API tại https://www.w3schools.com/html/html5_geolocation.asp

HTML5 Drag/Drop

Kéo (drag) và thả (drop) là đặc trưng phổ biến trong giao diện tương tác. Trong HTML5, kéo và thả thể hiện tiêu chuẩn: mọi phần tử có thể được kéo và thả và có thể dùng HTML Drag/Drop API.

Trình duyệt hỗ trợ HTML Drag/Drop API

	Chrome	IE/Edge	Firefox	Safari	Opera
Drag/Drop API	4.0 +	9.0 +	3.5 +	6.0 +	12.0 +

Sử dụng HTML Drag/Drop API thông qua các bước sau:

Đảm bảo phần tử có thể được kéo (draggable) với thuộc tính draggable, ví dụ:


<img draggable="true">

Xác định điều gì sẽ xảy ra khi phần tử được kéo, ví dụ gọi hàm drag (event) thông qua thuộc tính ondragstart:


<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

Phương thức dataTransfer.setData() dùng để thiết lập kiểu dữ liệu và giá trị của dữ liệu được kéo:


function drag(ev) {

// kiểu dữ liệu là text, giá trị là ev.target.id

ev.dataTransfer.setData("text", ev.target.id);

}

Dùng sự kiện ondragover để xác định nơi dữ liệu có thể được thả. Mặc định, các phần tử/dữ liệu không được phép thả trong một phần tử khác (ví dụ một phần tử img không được thả trong div). Để có thể thực hiện thả, chúng ta phải ngăn chặn ứng xử mặc định của phần tử với phương thức preventDefault() trong sự kiện ondragover:


event.preventDefault()

Khi phần tử/dữ liệu được thả sẽ xuất hiện sự kiện gọi hàm, ví dụ hàm drop (event) như sau:


function drop(ev) {

ev.preventDefault();

// nhận dữ liệu cùng kiểu được thiết lập tron setData

// dữ liệu nhận là id của phần tử được kéo

var data = ev.dataTransfer.getData("text");

// kết nối phần tử được kéo đến phần tử thả

ev.target.appendChild(document.getElementById(data));

}

Đoạn mã hoàn chỉnh minh hoạ cách dùng HTML Drag/Drop API như sau:


<!DOCTYPE HTML>

<html>

<head>

<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>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>

</html>

HTML5 Local Storage

Trước HTML5, dữ liệu ứng dụng phải được lưu trong các cookies tại ổ đĩa cục bộ người dùng. Với HTML Local Storage, dữ liệu có thể được lưu trữ an toàn hơn, không gian lưu trữ lớn hơn (ít nhất 5MB) và thông tin không bao giờ được chuyển đến máy chủ.

Trình duyệt hỗ trợ HTML Local Storage

	Chrome	IE/Edge	Firefox	Safari	Opera
Web Storage	4.0 +	8.0 +	3.5 +	4.0 +	11.5 +

HTML Local Storage cung cấp hai đối tượng lưu trữ dữ liệu trên client (hay trình duyệt):

localStorage – lưu trữ dữ liệu không thời hạn
sessionStorage – lưu trữ dữ liệu cho một session (dữ liệu mất khi tab trình duyệt đóng).

Trước khi dùng Local Storage cần kiểm tra trình duyệt có hỗ trợ localStorage và sessionStorage hay không:


if (typeof(Storage) !== "undefined") {

// Code for localStorage/sessionStorage.

} else {

// Sorry! No Web Storage support..

}

Đối tượng window.localStorage

Lưu trữ dữ liệu không thời hạn. Dữ liệu không bị xoá khi trình duyệt đóng và vẫn tồn tại trong những ngày, tuần, tháng, năm kế tiếp.

Đoạn mã sau minh hoạ cách dùng localStorage:


// Store

localStorage.setItem("lastname", "Smith");

// Retrieve

document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Tạo ra một cặp localStorage name/value với name = lastname và value = Smith

Nhận giá trị lastname và gán đến phần tử có id = result.

Chú ý: cặp name/value luôn được lưu trữ như các chuỗi. Thực hiện chuyển đổi sang các định dạng khác nếu cần thiết.

Đoạn mã trên cũng có thể được viết tương đương:


// Store

localStorage.lastname = "Smith";

// Retrieve

document.getElementById("result").innerHTML = localStorage.lastname;

Để xoá lastname khỏi đối tượng localStorage chúng ta có thể viết:


localStorage.removeItem("lastname");

Đoạn mã sau minh hoạ cách đếm số lần người dùng nhấp chuột vào một button. Chúng ta cần thực hiện việc chuyển kiểu chuỗi sang số:


if (localStorage.clickcount) {

localStorage.clickcount = Number(localStorage.clickcount) + 1;

} else {

localStorage.clickcount = 1;

}

document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";

Đối tượng window.sessionStorage

Đối tượng sessionStorage có chức năng tương tự đối tượng localStorage ngoại trừ rằng nó chỉ lưu trữ dữ liệu trong một session, nghĩa là, dữ liệu lưu trữ sẽ bị xoá khi người dùng đóng tab trình duyệt.

Đoạn mã sau minh hoạ cách dùng sessionStorage để đếm số lần người dùng nhấp chuột vào một button tại session hiện tại (trình duyệt hiện tại đang mở):


if (sessionStorage.clickcount) {

sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;

} else {

sessionStorage.clickcount = 1;

}

document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";

HTML5 Web Workers

Web Workers là một đặc trưng quan trọng ít được chú ý trong HTML5. Nó cung cấp một API cho phép chạy đoạn mã JavaScript trong một tiểu trình (thread) độc lập không ảnh hưởng đến giao diện người dùng của ứng dụng web và chạy song song với các script khác.

Trình duyệt hỗ trợ Web Workers

	Chrome	IE/Edge	Firefox	Safari	Opera
Web Workers	4.0 +	10.0 +	3.5 +	4.0 +	11.5 +

Một vài thao tác cơ bản với Web Workers:

Kiểm tra trình duyệt có hỗ trợ Web Workers hay không:


if (typeof(Worker) !== "undefined") {

// Yes! Web worker support!

// Some code.....

} else {

// Sorry! No Web Worker support..

}

Tạo một tập tin Web Worker: tạo ra một đoạn mã JavaScript và lưu trữ trong một tập tin JS.Ví dụ đoạn mã sau minh hoạ tạo một đoạn mã và lưu trữ trong tập tin demo_workers.js:


var i = 0;

function timedCount() {

i = i + 1;

postMessage(i);

setTimeout("timedCount()",500);

}

timedCount();

Tạo một đối tượng Web Worker:

Chúng ta có tập tin JavaScript (ví dụ demo_workers.js) và chúng ta cần gọi nó từ một trang HTML. Đoạn mã sau minh hoạ kiểm tra một Web Worker đã tồn tại hay chưa, nếu chưa thì tạo một đối tượng Web Worker mới và thực thi đoạn mã trong tập tin demo_workers.js:


if (typeof(w) == "undefined") {

w = new Worker("demo_workers.js");

}

Lúc này chúng ta có thể gửi và nhận thông điệp từ Web Worker.

Giải phóng đối tượng Web Worker: dùng phương thức terminate để đóng một Web Worker và giải phóng tài nguyên cho máy tính:


w.terminate();

Dùng lại Web Worker: nếu chúng ta thiết lập biến Web Worker đến giá trị undefined, chúng ta có thể dùng lại nó sau khi nó bị đóng:


w = undefined;

Một đoạn mã ví dụ hoàn chỉnh về cách dùng Web Worker:


<!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("demo_workers.js");

}

w.onmessage = function(event) {

document.getElementById("result").innerHTML = event.data;

};

} else {

document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";

}

}

function stopWorker() {

w.terminate();

w = undefined;

}

</script>

</body>

</html>

Web Workers và DOM

Web Workers là các tập tin độc lập với trang HTML nên chúng sẽ không truy cập được các đối tượng JavaScript sau: window, document, và parent.

HTML5 Sever-Sent Events (HTML SSE)

Cung cấp API cho phép một trang web nhận các cập nhật tự động từ server (ví dụ cập nhật Facebook, giá cổ phiếu, tin tức, kết quả bóng đá, v.v.).

Trình duyệt hỗ trợ:

	Chrome	IE/Edge	Firefox	Safari	Opera
SSE	6.0 +	Không hỗ trợ	6.0 +	5.0 +	11.5 +

Dùng HTML SSE API

Kiểm tra trình duyệt có hỗ trợ SSE không:


if(typeof(EventSource) !== "undefined") {

// Yes! Server-sent events support!

// Some code.....

} else {

// Sorry! No server-sent events support..

}

Dùng đối tượng EventSource nhận thông báo SSE như đoạn mã minh hoạ sau:


var source = new EventSource("demo_sse.php");

source.onmessage = function(event) {

document.getElementById("result").innerHTML += event.data + "<br>";

};

Đoạn mã trên dùng sự kiện onmessage để nhận các thông điệp. Đối tượng EventSource hỗ trợ các sự kiện như sau:

Sự kiện (event)	Mô tả
onopen	Khi một kết nối đến server được mở
onmessage	Khi một thông điệp được nhận
onerror	Khi một lỗi xuất hiện

Học HTML & CSS >

Trần Ngọc Minh Notes

Stay hungry, stay foolish!

HTML5 APIs

HTML5 Geolocation

HTML5 Drag/Drop

HTML5 Local Storage

Đối tượng window.localStorage

Đối tượng window.sessionStorage

HTML5 Web Workers

HTML5 Sever-Sent Events (HTML SSE)

Trần Ngọc Minh

Ý kiến bài viết Hủy trả lời

BÀI MỚI NHẤT

Trần Ngọc Minh Notes

Stay hungry, stay foolish!

HTML5 APIs

HTML5 Geolocation

HTML5 Drag/Drop

HTML5 Local Storage

Đối tượng window.localStorage

Đối tượng window.sessionStorage

HTML5 Web Workers

HTML5 Sever-Sent Events (HTML SSE)

Chia sẻ:

Thích bài này:

Related

Trần Ngọc Minh

Ý kiến bài viết Hủy trả lời

BÀI MỚI NHẤT