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

BÀI 7LÀ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 QueriesLà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 storageGeolocationDrag & 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 storageGeolocationDrag & drop

Giới thiệu sơ lược về ứng dụng HTML5 cho thiết bịdi động


HTML5 OFFLINE STORAGE

OFFLINE STORAGE

Có 2 khả năng offline trong HTML5:ứng dụng bộ nhớ đệmLư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ủangười dùng quan tâm tới


OFFLINE STORAGE

Thành phần trong HTML5 storage

HTML5storage

Kỹ thuậtlưu trữtại local


HTML5storage

Giá trị từbộ nhớ

đệm

Tập tinlư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 trongthờ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 trongthờ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 keycho 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 andreload this page.)</div><a href="#" onclick="reset_note();returnfalse">Reset Note</a></section></body>


<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 andreload this page.)</div><a href="#" onclick="reset_note();returnfalse">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ùngHTML5 mở rộng khả năng của javascript để bao gồmcả Geolocation API

Nhận biết vị trí của người dùng:HTML5 Geolocation API cho phép javascript yêu cầulấy vị trí địa lý của người dùngPhần lớn những yêu cầu đều dựa trên đối tượngnavigator.geolocation, cụ thể là hàmgetCurrentPosition

Geolocation API:Phát hiện và hiển thị vị trí trình duyệt của người dùngHTML5 mở rộng khả năng của javascript để bao gồmcả Geolocation API

Nhận biết vị trí của người dùng:HTML5 Geolocation API cho phép javascript yêu cầulấy vị trí địa lý của người dùngPhần lớn những yêu cầu đều dựa trên đối tượngnavigator.geolocation, cụ thể là hàmgetCurrentPosition


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ộtphầ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 MapGoogle Maps API sử dụng tọa độ địa lý để tạo bản đồtương tác với từng vùngGoogle Map sử dụng <div> trong HTML để trích xuấttrê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 MapGoogle Maps API sử dụng tọa độ địa lý để tạo bản đồtương tác với từng vùngGoogle Map sử dụng <div> trong HTML để trích xuấttrên bản đồ


HTML5 GEOLOCATION

Sử dụng:

<script type="text/javascript"src="http://maps.goo

gle.com/maps/api/js?sensor=false"></script><script type="text/javascript"

src="http://code.google.com/apis/gears/gears_init.js"></script><script type="text/javascript"src="geo.js"></script>


<script type="text/javascript"src="http://maps.goo

gle.com/maps/api/js?sensor=false"></script><script type="text/javascript"

src="http://code.google.com/apis/gears/gears_init.js"></script><script type="text/javascript"src="geo.js"></script>

http://maps.goo

http://code.goo

http://maps.goo

http://code.goo

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

<script type="text/javascript"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.');}}

http://maps.google.com/maps/api/js

http://maps.google.com/maps/api/js

HTML5 DRAG & DROP

HTML5 DRAG & DROP

Được xây dựng dựa vào sự thực hiện trên IEAPI đã được tiêu chuẩn hóaDrag-drop: là tính năng phổ biếnKé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ínhdraggable ='true'

Được xây dựng dựa vào sự thực hiện trên IEAPI đã được tiêu chuẩn hóaDrag-drop: là tính năng phổ biếnKé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ínhdraggable ='true'


<img draggable="true" />

HTML5 DRAG & DROP

Sau đó, xác định những sự kiện xảy ra khi thực hiệndrag (kéo):

• Ondragstart(): gọi một chức năng, sự kiện, xác địnhnhữ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ệndrag (kéo):

• Ondragstart(): gọi một chức năng, sự kiện, xác địnhnhữ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ủatrì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ếtlậ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ủatrì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ếtlậ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));}

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>


<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ệnnày

preventDefault ():ngăn chặn một số sự kiện mặc định trên trình duyệtLà 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ệnnày

preventDefault ():ngăn chặn một số sự kiện mặc định trên trình duyệtLà 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 WebApplications).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ệcoffline 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ưutrữ 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 đámmâ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 WebApplications).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ệcoffline 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ưutrữ 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 đámmây khi chương trình kết nối trở lại với mạng



Trang HTMLJavaScript: chứa các hàm điều khiển của ứngdụngCascading Style Sheet: mô tả giao diện hiển thịcủa trang HTMLDatabase: 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ảitriể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 HTMLJavaScript: chứa các hàm điều khiển của ứngdụngCascading Style Sheet: mô tả giao diện hiển thịcủa trang HTMLDatabase: 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ảitriể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áytính cho đến khi loại bỏ bởi ứng dụng hay ngườidùngGoogle 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ườidùng trên bản đồCơ chế thực hiện drag-drop:Thiết lập thuộc tính drag cho thành phần: trueXác định những sự kiện sẽ xảy ra khi thực hiện kéoXác định vị trí thả (drop)Thực hiện thả

Sử dụng localStorage: dữ liệu được lưu trên máytính cho đến khi loại bỏ bởi ứng dụng hay ngườidùngGoogle 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ườidùng trên bản đồCơ chế thực hiện drag-drop:Thiết lập thuộc tính drag cho thành phần: trueXác định những sự kiện sẽ xảy ra khi thực hiện kéoXá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...

Documents

Transcript of 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...