Thông tin tài liệu
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> [...]... 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 Slide 7 - Làm vi c với thành phần mới và phạm vi ứng dụng của HTML5 27 Ứ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 28 ỨNG DỤNG HTML5 CHO THIẾT BỊ DI ĐỘNG Trang HTML JavaScript: chứa các hàm điều khiển của ứng dụng Cascading... 7 - Làm vi c với thành phần mới và phạm vi ứng dụng của HTML5 24 HTML5 DRAG & DROP Xác định hàm dragDrop: 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 ỨNG DỤNG HTML5 CHO THIẾT BỊ DI ĐỘNG ỨNG DỤNG HTML5 CHO THIẾT BỊ DI ĐỘNG Sử dụng. .. phần nghìn giây) 0 Slide 7 - Làm vi c với thành phần mới và phạm vi ứng dụng của HTML5 Mili giây 13 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 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. .. 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 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' Slide 7 - Làm vi c với thành phầ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 22 HTML5 DRAG & DROP 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. .. phần mới và phạm vi ứng dụng của HTML5 18 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 function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } Slide 7 - Làm vi c với thành phần mới và phạm vi ứng. .. vi ứng dụng của HTML5 14 HTML5 GEOLOCATION Sử dụ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 15 HTML5 GEOLOCATION Tạo HTML5 Geolocation... 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 Slide 7 - Làm vi c với thành phần mới và phạm vi ứng dụng của HTML5 29 TỔNG KẾT Sử dụng localStorage: dữ liệu... 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 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ả Slide 7 - Làm vi c với thành phần mới và phạm vi ứng dụng của HTML5 30 ... 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 HTML5 DRAG & DROP Code demo: #div1 {width:350px;height :70 px;padding:10px;border:1px solid #aaaaaa;} function allowDrop(ev){ . 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. 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. 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ỹ
Ngày đăng: 23/05/2014, 17:36
Xem thêm: 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ài 7 làm việc với thành phần mới và phạm vi ứng dụng của html5
