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

OFFLINE STORAGElocalStorage: • 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 localStor

Trang 1

BÀI 7LÀM VIỆC VỚI THÀNH PHẦN MỚI VÀ PHẠM VI ỨNG

DỤNG CỦA HTML5

Trang 2

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)

Trang 3

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

Trang 4

HTML5 OFFLINE STORAGE

Trang 5

Trang 6

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

Trang 8

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

return false;

Trang 9

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ữ

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ữ

Trang 10

(Enter some text, close your browser and reload this page.)

(Enter some text, close your browser and reload this page.)

Trang 11

HTML5 GEOLOCATION

Trang 12

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

Phần lớn những yêu cầu đều dựa trên đối tượng

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

Trang 13

Đố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:

Đố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:

Thuộc tính Kiểu Mặc định Ghi chú

enableHighAccuracy Boolean false True

phần nghìn giây)

Trang 14

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

Google 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ùng

Google Map sử dụng <div> trong HTML để trích xuấttrên bản đồ

Trang 15

Sử dụng:

src="http://maps.goo gle.com/maps/api/js?sensor=

false">

</script>

src="http://code.goo gle.com/apis/gears/gears_init

false">

</script>

src="http://code.goo gle.com/apis/gears/gears_init

Trang 16

Tạo HTML5 Geolocation & Google Map:

Chèn Google Map vào trang bản đồ:

alert('Geolocation not supported in this browser.');

Trang 17

HTML5 DRAG & DROP

Trang 18

Đượ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'

Trang 19

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 đị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ệndrag (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);

}

Trang 20

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

}

Trang 21

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

• 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

Trang 22

Trang 23

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;

}

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

Trang 24

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;

Trang 25

Trang 26

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

ĐỘNG

Trang 27

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

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 28

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

Trang 29

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

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 30

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

Cơ chế thực hiện drag-drop:

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

Cơ chế thực hiện drag-drop:

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ả

Định dạng
Số trang	30
Dung lượng	2,72 MB