BÀI 7 Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 - Giáo trình FPT

BÀI 7
LÀM VIỆC VỚI THÀNH PHẦN MỚI VÀ PHẠM VI ỨNG
DỤNG CỦA HTML5

NHẮC LẠI BÀI TRƯỚC
Giới thiệu CSS3 Media Queries
Làm việc với CSS3 layout dạng nhiều cột (Multi-
columns) và cấu trúc hộp Flex (Flexboxes)
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 2

MỤC TIÊU BÀI HỌC
Làm việc với các thành phần mới trong HTML5:
Offline storage
Geolocation
Drag & drop
Giới thiệu sơ lược về ứng dụng HTML5 cho thiết bị
di động
Làm việc với các thành phần mới trong HTML5:
Offline storage
Geolocation
Drag & drop
Giới thiệu sơ lược về ứng dụng HTML5 cho thiết bị
di động

OFFLINE STORAGE
Có 2 khả năng offline trong HTML5:
ứng dụng bộ nhớ đệm
Lưu trữ offline (lưu trữ phía máy khách): thu thập dữ
liệu được tạo ra bởi người dùng và nguồn dữ liệu của
người dùng quan tâm tới

OFFLINE STORAGE
Thành phần trong HTML5 storage
HTML5
storage
Kỹ thuật
lưu trữ
tại local
HTML5
storage
Giá trị từ
bộ nhớ
đệm
Tập tin
lưu trữ
Lưu trữ
CSDL SQL

OFFLINE STORAGE
Kiểu HTML5 storage:
sessionStorage: dữ liệu được lưu trữ chỉ kéo dài trong
thời gian trình duyệt sử dụng. Dữ liệu sẽ bị xóa khi
đóng trình duyệt
HTML5 storage
sessionStorage
Kiểu HTML5 storage:
sessionStorage: dữ liệu được lưu trữ chỉ kéo dài trong
thời gian trình duyệt sử dụng. Dữ liệu sẽ bị xóa khi
đóng trình duyệt
HTML5 storage
localStorage

OFFLINE STORAGE
localStorage:
• Là một phiên bản của sessionStorage
• Dữ liệu được lưu trữ trên máy tính cho đến khi được
loại bỏ bởi ứng dụng hay người dùng
• Sử dụng đối tượng localStorage trên các đối tượng
window global để truy cập tới HTML5 storage
localStorage:
• Là một phiên bản của sessionStorage
• Dữ liệu được lưu trữ trên máy tính cho đến khi được
loại bỏ bởi ứng dụng hay người dùng
• Sử dụng đối tượng localStorage trên các đối tượng
window global để truy cập tới HTML5 storage
Function supports_html5_storage() {
try{
return ‘localStorage’ in window && window
[‘localStorage’] != null;
}
catch (e) {
return false;
}
}

OFFLINE STORAGE
Phương thức localStorage:
Phương thức Định nghĩa
setItem(key, value) Lưu giá trị dưới tên khóa mới hoặc cập nhật giá trị
cho khóa hiện tại
getItem (key) Lấy giá trị cho tên khóa quan trọng
removeItem(key) Xóa một mục trong dữ liệu lưu trữ
removeItem(key) Xóa một mục trong dữ liệu lưu trữ
Clear() Xóa tất cả khóa/ giá trị trong dữ liệu lưu trữ cho
chương trình ứng dụng hiện hành
length Thuộc tính chỉ độc, sẽ trả lại giá trị số lượng key
cho dữ liệu lưu trữ

OFFLINE STORAGE
Ví dụ về localStorage
<head>
<style type="text/css">
#note{
width: 320px;
height: 200px;
background: LightYellow;
border: 1px dashed gray;
overflow-y: scroll;
padding: 4px;
font: normal gray 13px Arial;
}
</style>
</head>
<body onload="initialize()">
<section>
<div id="note" contenteditable="true">
(Enter some text, close your browser and
reload this page.)
</div>
<a href="#" onclick="reset_note();return
false">Reset Note</a>
</section>
</body>
<head>
#note{
width: 320px;
height: 200px;
background: LightYellow;
border: 1px dashed gray;
overflow-y: scroll;
padding: 4px;
font: normal gray 13px Arial;
}
</style>
</head>
<body onload="initialize()">
<section>
<div id="note" contenteditable="true">
(Enter some text, close your browser and
reload this page.)
</div>
<a href="#" onclick="reset_note();return
false">Reset Note</a>
</section>
</body>

HTML5 GEOLOCATION
Geolocation API:
Phát hiện và hiển thị vị trí trình duyệt của người dùng
HTML5 mở rộng khả năng của javascript để bao gồm
cả Geolocation API
Nhận biết vị trí của người dùng:
HTML5 Geolocation API cho phép javascript yêu cầu
lấy vị trí địa lý của người dùng
Phần lớn những yêu cầu đều dựa trên đối tượng
navigator.geolocation, cụ thể là hàm
getCurrentPosition
Geolocation API:
Phát hiện và hiển thị vị trí trình duyệt của người dùng
HTML5 mở rộng khả năng của javascript để bao gồm
cả Geolocation API
Nhận biết vị trí của người dùng:
HTML5 Geolocation API cho phép javascript yêu cầu
lấy vị trí địa lý của người dùng
Phần lớn những yêu cầu đều dựa trên đối tượng
navigator.geolocation, cụ thể là hàm
getCurrentPosition

HTML5 GEOLOCATION
Đối tượng positionOptions:
Được sử dụng để thiết lập cấu hình cho hàm getCurrentPosition
Đối tượng này chứa tối ba thuộc tính:
• enableHighAccuracy
• getCurrentPosition
• Timeout
• maximumAge: cho phép thiết bị sử dụng thông tin ngày
(date) để nâng cao hiệu suất, nhưng độ chính xác không cao
Đối tượng positionOptions:
Được sử dụng để thiết lập cấu hình cho hàm getCurrentPosition
Đối tượng này chứa tối ba thuộc tính:
• enableHighAccuracy
• getCurrentPosition
• Timeout
• maximumAge: cho phép thiết bị sử dụng thông tin ngày
(date) để nâng cao hiệu suất, nhưng độ chính xác không cao
Thuộc tính Kiểu Mặc định Ghi chú
enableHighAccuracy Boolean false True
Timeout Long Mili giây ( một
phần nghìn giây)
maximumAge long 0 Mili giây

HTML5 GEOLOCATION
Hiển thị vị trí của người dùng trên Google Map:
Google cung cấp API mã nguồn mở cho Google Map
Google Maps API sử dụng tọa độ địa lý để tạo bản đồ
tương tác với từng vùng
Google Map sử dụng <div> trong HTML để trích xuất
trên bản đồ
Hiển thị vị trí của người dùng trên Google Map:
Google cung cấp API mã nguồn mở cho Google Map
Google Maps API sử dụng tọa độ địa lý để tạo bản đồ
tương tác với từng vùng
Google Map sử dụng <div> trong HTML để trích xuất
trên bản đồ

HTML5 GEOLOCATION
Sử dụng:
<script type="text/javascript"
src="http://maps.goo
gle.com/maps/api/js?sensor=
false">
</script>
src="http://code.goo
gle.com/apis/gears/gears_init
.js">
</script>
src="geo.js">
</script>
src="http://maps.goo
gle.com/maps/api/js?sensor=
false">
</script>
src="http://code.goo
gle.com/apis/gears/gears_init
.js">
</script>
src="geo.js">
</script>

HTML5 GEOLOCATION
Tạo HTML5 Geolocation & Google Map:
Chèn Google Map vào trang bản đồ:
<body onload="initialize()" onunload="GUnload()">
<section id="wrapper">
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<article>
<p>Finding your location: <span id="status">checking...</span></p>
</article>
<script type="text/javascript">
function initialize() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(show_location,
error_handler);
} else {
alert('Geolocation not supported in this browser.');
}
}
<body onload="initialize()" onunload="GUnload()">
<section id="wrapper">
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<article>
<p>Finding your location: <span id="status">checking...</span></p>
</article>
function initialize() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(show_location,
error_handler);
} else {
alert('Geolocation not supported in this browser.');
}
}

HTML5 DRAG & DROP
Được xây dựng dựa vào sự thực hiện trên IE
API đã được tiêu chuẩn hóa
Drag-drop: là tính năng phổ biến
Kéo thả: hình ảnh, link, vùng lựa chọn chữ, …
Cơ chế thực hiện drag-drop:
Để thực hiện sự kiện kéo, thiết lập thuộc tính
draggable ='true'
Được xây dựng dựa vào sự thực hiện trên IE
API đã được tiêu chuẩn hóa
Drag-drop: là tính năng phổ biến
Kéo thả: hình ảnh, link, vùng lựa chọn chữ, …
Để thực hiện sự kiện kéo, thiết lập thuộc tính
draggable ='true'
<img draggable="true" />

HTML5 DRAG & DROP
Sau đó, xác định những sự kiện xảy ra khi thực hiện
drag (kéo):
• Ondragstart(): gọi một chức năng, sự kiện, xác định
những dữ liệu được kéo
• setData(): phương thức thiết lập các kiểu dữ liệu và giá
trị của dữ liệu được kéo
Sau đó, xác định những sự kiện xảy ra khi thực hiện
drag (kéo):
• Ondragstart(): gọi một chức năng, sự kiện, xác định
những dữ liệu được kéo
• setData(): phương thức thiết lập các kiểu dữ liệu và giá
trị của dữ liệu được kéo
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

HTML5 DRAG & DROP
Xác định vị trí thả (drop):
• Ondragover(): quy định cụ thể nơi dữ liệu được thả
• Theo mặc định, dữ liệu / các yếu tố không thể được
thả trong các yếu tố khác.
• Để cho phép thả, phải ngăn chặn việc xử lý mặc định
của phần tử.
• Điều này được thực hiện bằng cách gọi phương pháp
event.preventDefault () cho các sự kiện ondragover:
Xác định vị trí thả (drop):
• Ondragover(): quy định cụ thể nơi dữ liệu được thả
• Theo mặc định, dữ liệu / các yếu tố không thể được
thả trong các yếu tố khác.
• Để cho phép thả, phải ngăn chặn việc xử lý mặc định
của phần tử.
• Điều này được thực hiện bằng cách gọi phương pháp
event.preventDefault () cho các sự kiện ondragover:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
event.preventDefault()

HTML5 DRAG & DROP
Thực hiện thả (drop):
• Ondrop(): gọi sự kiện thả
• preventDefault(): ngăn chặn xử lý mặc định dữ liệu của
trình duyệt (ví dụ: như liên kết trên thả)
• dataTransfer.getData (" "): lấy dữ liệu được drag.
Phương pháp này sẽ trả lại bất kỳ dữ liệu đã được thiết
lập để cùng loại trong setData ()
• Các dữ liệu được rê là id của các yếu tố drag ("drag1")
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
Thực hiện thả (drop):
• Ondrop(): gọi sự kiện thả
• preventDefault(): ngăn chặn xử lý mặc định dữ liệu của
trình duyệt (ví dụ: như liên kết trên thả)
• dataTransfer.getData (" "): lấy dữ liệu được drag.
Phương pháp này sẽ trả lại bất kỳ dữ liệu đã được thiết
lập để cùng loại trong setData ()
• Các dữ liệu được rê là id của các yếu tố drag ("drag1")
function drop(ev)
{
ev.target.appendChild(document.getElementById(data));
}

HTML5 DRAG & DROP
Code demo:
<html>
<head>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
function allowDrop(ev){
ev.preventDefault();}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev) {
ev.target.appendChild(document.getElementById(data));}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="i…" draggable="true" ondragstart="drag(event)” />
</body>
</html>
<html>
<head>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
function allowDrop(ev){
ev.preventDefault();}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev) {
ev.target.appendChild(document.getElementById(data));}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="i…" draggable="true" ondragstart="drag(event)” />
</body>
</html>

HTML5 DRAG & DROP
stopPropagation(): chặn một số đáp ứng (respond) sự kiện
này
preventDefault ():
ngăn chặn một số sự kiện mặc định trên trình duyệt
Là hàm gọi lại sự kiện, giá trị mặc định trả về: false
function preventDefault( event ){
event.stopPropagation();
event.preventDefault();
return false;
}
stopPropagation(): chặn một số đáp ứng (respond) sự kiện
này
preventDefault ():
ngăn chặn một số sự kiện mặc định trên trình duyệt
Là hàm gọi lại sự kiện, giá trị mặc định trả về: false

HTML5 DRAG & DROP
Trong một số trình duyệt, sự kiện dragover hiển thị
một biểu tượng tương tự như sự kiện dragenter, chỉ
ra vùng thả hợp lệ không hợp lệ
function setup(){
shoppingcart = document.getElementById('shoppingcart');
shoppingcart.ondragenter = preventDefault;
shoppingcart.ondragover = preventDefault;
shoppingcart.ondrop = dragDrop;
}
function setup(){
shoppingcart = document.getElementById('shoppingcart');
shoppingcart.ondragenter = preventDefault;
shoppingcart.ondragover = preventDefault;
shoppingcart.ondrop = dragDrop;
}
function dragStarted( event ){
dragging = event.target;
var dragImage = document.createElement('canvas');
var ctx = dragImage.getContext('2d');
ctx.drawImage(dragging,0,0);
ctx.font = 'bold 1.8em sans-serif';
ctx.fillText('$2', 30, 100);
event.dataTransfer.setDragImage(dragImage, 0, 0);
}

HTML5 DRAG & DROP
Xác định hàm dragDrop:
<div class="tile_list"
ondragstart="dragStarted(event)"> </div>
function dragDrop(event){
addToCart( dragging, 1 );
return preventDefault(event);
}
<div class="tile_list"
ondragstart="dragStarted(event)"> </div>

ỨNG DỤNG HTML5 CHO THIẾT BỊ DI
ĐỘNG

ỨNG DỤNG HTML5 CHO THIẾT BỊ DI ĐỘNG
Sử dụng 2 thành phần của HTML5 khi phát triển các
ứng dụng cho di động:
Ứng dụng Web chạy Offline (Offline Web
Applications).
Công nghệ lưu trữ dữ liệu bên phía Client (Client-
side database storage).
Người dùng sử dụng chức năng của dịch vụ điện toán
đám mây (clouf functions) trên điện thoại, làm việc
offline với một ứng dụng đã được cài đặt trên máy
điện thoại, đồng thời sử dụng một cơ sở dữ liệu lưu
trữ ngay trên máy (local database), và có thể chia sẻ
dữ liệu với phần còn lại của dịch vụ điện toán đám
mây khi chương trình kết nối trở lại với mạng
Sử dụng 2 thành phần của HTML5 khi phát triển các
ứng dụng cho di động:
Ứng dụng Web chạy Offline (Offline Web
Applications).
Công nghệ lưu trữ dữ liệu bên phía Client (Client-
side database storage).
Người dùng sử dụng chức năng của dịch vụ điện toán
đám mây (clouf functions) trên điện thoại, làm việc
offline với một ứng dụng đã được cài đặt trên máy
điện thoại, đồng thời sử dụng một cơ sở dữ liệu lưu
trữ ngay trên máy (local database), và có thể chia sẻ
dữ liệu với phần còn lại của dịch vụ điện toán đám
mây khi chương trình kết nối trở lại với mạng

Trang HTML
JavaScript: chứa các hàm điều khiển của ứng
dụng
Cascading Style Sheet: mô tả giao diện hiển thị
của trang HTML
Database: Công nghệ HTML5 chuẩn có hỗ trợ
công nghệ lưu trữ dữ liệu trên máy người dùng
(local database storage).
Manifest: File manifest là phần bắt buộc phải
triển khai cho ứng dụng Web chạy offline. Nó
chứa một danh sách những file cần thiết phải tải.
Trang HTML
JavaScript: chứa các hàm điều khiển của ứng
dụng
Cascading Style Sheet: mô tả giao diện hiển thị
của trang HTML
Database: Công nghệ HTML5 chuẩn có hỗ trợ
công nghệ lưu trữ dữ liệu trên máy người dùng
(local database storage).
Manifest: File manifest là phần bắt buộc phải
triển khai cho ứng dụng Web chạy offline. Nó
chứa một danh sách những file cần thiết phải tải.

TỔNG KẾT
Sử dụng localStorage: dữ liệu được lưu trên máy
tính cho đến khi loại bỏ bởi ứng dụng hay người
dùng
Google cung cấp API mã nguồn mở cho Google Map, sử
dụng <div> trong HTML giúp hiển thị vị trí của người
dùng trên bản đồ
Thiết lập thuộc tính drag cho thành phần: true
Xác định những sự kiện sẽ xảy ra khi thực hiện kéo
Xác định vị trí thả (drop)
Thực hiện thả
Sử dụng localStorage: dữ liệu được lưu trên máy
tính cho đến khi loại bỏ bởi ứng dụng hay người
dùng
Google cung cấp API mã nguồn mở cho Google Map, sử
dụng <div> trong HTML giúp hiển thị vị trí của người
dùng trên bản đồ
Thiết lập thuộc tính drag cho thành phần: true
Xác định những sự kiện sẽ xảy ra khi thực hiện kéo
Xác định vị trí thả (drop)
Thực hiện thả

BÀI 7 Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 - Giáo trình FPT

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to BÀI 7 Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 - Giáo trình FPT

Similar to BÀI 7 Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 - Giáo trình FPT (20)

More from MasterCode.vn

More from MasterCode.vn (20)

BÀI 7 Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 - Giáo trình FPT