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
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.72 MB, 30 trang )
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
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 3
HTML5 OFFLINE STORAGE
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
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 5
OFFLINE STORAGE
Thành phần trong HTML5 storage
HTML5
storage
Kỹ thuật
lưu trữ
tại local
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 6
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
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 7
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
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 8
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ữ
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 9
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>
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 10
<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>
HTML5 GEOLOCATION
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
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 12
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
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 13
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 đồ
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 14
HTML5 GEOLOCATION
Sử dụng:
<script type="text/javascript"
src="
gle.com/maps/api/js?sensor=
false">
</script>
<script type="text/javascript"
src="
gle.com/apis/gears/gears_init
.js">
</script>
<script type="text/javascript"
src="geo.js">
</script>
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 15
<script type="text/javascript"
src="
gle.com/maps/api/js?sensor=
false">
</script>
<script type="text/javascript"
src="
gle.com/apis/gears/gears_init
.js">
</script>
<script type="text/javascript"
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">
<script type="text/javascript"
src=" /><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.');
}
}
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 16
<body onload="initialize()" onunload="GUnload()">
<section id="wrapper">
<script type="text/javascript"
src=" /><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.');
}
}
HTML5 DRAG & DROP
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ữ, …
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'
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 18
<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
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 19
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:
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 20
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")
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 21
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
HTML5 DRAG & DROP
Code demo:
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
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>
<br />
<img id="drag1" src="i…" draggable="true" ondragstart="drag(event)” />
</body>
</html>
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 22
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
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>
<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
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 23
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;
}
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 24
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);
}
Slide 7 - Làm việc với thành phần mới và phạm vi ứng dụng của HTML5 25
<div class="tile_list"
ondragstart="dragStarted(event)"> </div>
