Xây dựng ứng dụng trò chơi ghép hình swap it đatn

iv DANH MỤC CÁC TỪ VIẾT TẮT 2D, 3D Two Dimension, Three Dimension: Hai chiều, ba chiều AJAX Asynchronous JavaScript and XML: JavaScript và XML không đồng bộ API Application Programming

ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU ĐẠI HỌC ĐÀ NẴNG TẠI KON TUM

-o0o -

ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG ỨNG DỤNG TRÒ CHƠI GHÉP HÌNH SWAP IT

NGÀNH: CÔNG NGHỆ THÔNG TIN HỆ: VỪA LÀM VỪA HỌC

SVTH: Bùi Hữu Bình MSSV: 144109001 SVTH: Nguyễn Ngọc Rin

MSSV: 144109016

KON TUM, THÁNG 02/2017

ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU ĐẠI HỌC ĐÀ NẴNG TẠI KON TUM

-o0o -

ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG ỨNG DỤNG TRÒ CHƠI GHÉP HÌNH SWAP IT

NGÀNH: CÔNG NGHỆ THÔNG TIN HỆ: VỪA LÀM VỪA HỌC

SVTH: Bùi Hữu Bình MSSV: 144109001 SVTH: Nguyễn Ngọc Rin

MSSV: 144109016

GVHD: PGS.TS Nguyễn Thanh Bình

KON TUM, THÁNG 02/2017

i

LỜI CẢM ƠN

Trước tiên chúng em xin chân thành cảm ơn tất cả các thầy cô đã trực tiếp dạy dỗ

và truyền đạt các kiến thức môn học cho chúng em trong thời gian học tại trường Chúng em xin chân thành cám ơn thầy giáo PGS.TS Nguyễn Thanh Bình Cám

ơn Thầy đã tận tình hướng dẫn góp ý cho chúng em trong quá trình thực hiện đồ án này

Chúng em cũng xin được cám ơn những người bạn cùng lớp đã giúp đỡ chúng

em trong suốt thời gian làm đồ án

Mặc dù đã cố gắng, nhưng vì khả năng và thời gian có hạn, đề tài nghiên cứu này chắc chắn sẽ có nhiều khiếm khuyết Vì vậy chúng em rất mong các Thầy Cô giáo chỉ bảo giúp đỡ thêm, mong sự đóng góp ý kiến của các bạn trong lớp để đề tài được hoàn thiện hơn nữa

ii

MỤC LỤC

LỜI CẢM ƠN i

MỤC LỤC ii

DANH MỤC CÁC TỪ VIẾT TẮT iv

DANH MỤC BẢNG BIỂU v

DANH MỤC CÁC HÌNH VẼ vi

MỞ ĐẦU 1

1 Lý do chọn đề tài 1

2 Mục đích và ý nghĩa của đề tài 1

3 Phương pháp thực hiện 2

4 Bố cục của luận văn 2

CHƯƠNG 1: TỔNG QUAN 3

1.1 Cơ sở lý luận 3

1.1.1 Sự phát triển của HTML 3

1.1.2 Các công nghệ mới 6

1.1.3 Khả năng kết hợp với các công nghệ khác 16

1.2 Giới thiệu đề tài 26

1.2.1 Tên đề tài 26

1.2.2 Mục đích 26

1.2.3 Đối tượng, phạm vi 26

1.2.4 Môi trường, công cụ thực hiện 26

1.3 Phân tích đặc tả yêu cầu 26

1.3.1 Mô tả bài toán 26

1.3.2 Phân tích và đặc tả yêu cầu 27

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 28

2.1 Phân tích 28

2.1.1 Các yêu cầu chức năng 28

2.1.2 Yêu cầu phi chức năng 28

iii

2.2 Các biểu đồ 28

2.2.1 Biểu đồ tổng quát 28

2.2.2 Use- case người chơi 29

2.2.3 Biểu đồ hoạt động 29

2.3 Thiết kế 31

2.3.1 Biểu đồ lớp 31

CHƯƠNG 3: TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ 32

3.1 Công cụ và môi trường phát triển 32

3.2 Các thành phần cài đặt 32

3.2.1 Yêu cầu tài nguyên 32

3.2.2 Hướng dẫn cài đặt triển khai 32

3.3 Đánh giá 32

3.4 Các giao diện - ảnh chụp màn hình 32

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 36

1 Kết quả đạt được 36

2 Hạn chế 36

3 Hướng phát triển 36

TÀI LIỆU THAM KHẢO 37

iv

DANH MỤC CÁC TỪ VIẾT TẮT

2D, 3D Two Dimension, Three Dimension: Hai chiều, ba chiều

AJAX Asynchronous JavaScript and XML: JavaScript và XML không

đồng bộ API Application Programming Interface: Giao diện lập trình ứng dụng CSS Cascading Style Sheets: Tập tin định kiểu theo tầng

DOM Document Object Model: Mô hình đối tượng tài liệu, là một giao

diện lập trình ứng dụng (API) HTML HyperText Markup Language: Ngôn ngữ đánh dấu siêu văn bản HTTP HyperText Transfer Protocol: Giao thức truyền tải siêu văn bản

JS JavaScript - một ngôn ngữ lập trình kịch bản

SVG Scalable Vector Graphic: Ngôn ngữ đánh dấu (định dạng) miêu tả

hình ảnh đồ hoạ véc tơ 2 chiều W3C World Wide Web Consortium: Tổ chức tiêu chuẩn thiết kế web WebGL Web-based Graphics Library

XHTML Extensible Hypertext Markup Language: Ngôn ngữ siêu văn bản mở

rộng XML eXtensible Markup Language: Ngôn ngữ đánh dấu mở rộng

v

DANH MỤC BẢNG BIỂU

STT Số hiệu

2 Bảng 1.2 Các thành phần và thuộc tính của thẻ SVG 8

3 Bảng 1.3 Sự hỗ trợ của các trình duyệt cho Canvas 9

4 Bảng 1.4 Các thuộc tính và phương thức của thẻ Canvas 9

5 Bảng 1.5 Các thành phần input mới của Form 12

6 Bảng 1.6 Các thuộc tính mới của các thành phần Form 12

8 Bảng 1.8 Các dạng biểu thức phổ biến trong JavaScript 21

10 Bảng 1.10 Các thành phần mới trong CSS3 25

vi

DANH MỤC CÁC HÌNH VẼ

STT

Số hiệu hình, ảnh

Tiêu đề hình vẽ, ảnh Trang

1 Hình 1.1 Các ảnh chụp màn hình trình duyệt web bị thiếu

hoặc hỏng plugin Flash

6

2 Hình 1.2 Mối quan hệ giữa JavaScript, WebGL và GPU 15

3 Hình 2.1 Biểu đồ tổng quát của webgame 29

4 Hình 2.2 Biểu đồ Use - case người chơi 29

5 Hình 2.3 Biểu đồ hoạt động chức năng Chơi 30

6 Hình 2.4 Biểu đồ hoạt động chức năng Xem ảnh 30

9 Hình 3.2 Giao diện chính của trang web 33

10 Hình 3.3 Giao diện lựa chọn Số lượng mảnh ghép 33

11 Hình 3.4 Giao diện trò chơi khi nháy nút “Chơi!” 34

12 Hình 3.5 Ảnh chụp màn hình khi nháy nút “Xem ảnh!” 34

13 Hình 3.6 Giao diện trò chơi khi ghép lại các mảnh ghép 35

14 Hình 3.7 Giao diện trò chơi khi ghép lại đúng bức tranh 35

và JavaScript để ứng dụng xây dựng một webgame Nhóm thực hiện chúng em đã

chọn đề tài: “Xây dựng ứng dụng trò chơi ghép hình Swap it” là một trò chơi ghép

hình trên web bằng cách sử dụng chuột máy tính

2 Mục đích và ý nghĩa của đề tài

Thuở bé, chắc hẳn mọi người ai cũng từng có lần chơi ghép tranh từ các mảnh ghép được chia nhỏ Cảm giác hoàn thành bức tranh sau một thời gian ghép từng mảnh lại với nhau thật tuyệt Ngày nay khi mà máy tính và Internet dường như là một phần của cuộc sống, các trò chơi cũng theo đó xuất hiện trên máy tính, trò chơi ghép tranh cũng vậy; có nhiều nhà phát triển sản xuất chúng dưới dạng miễn phí và trả phí với nhiều chức năng, chúng ta có thể tải về máy tính và cài đặt để chơi Với mong muốn tự viết được một ứng dụng thực tế trên nền web cũng như là một game ghép tranh như vậy để giải trí từ các ngôn ngữ, công cụ lập trình với các kiến thức đã học; và người chơi không phải trải qua các bước cài đặt, thiết lập phức tạp, chỉ cần truy cập vào trang web là có thể chơi được ngay Đặc biệt với cuộc sống gia đình, công việc hiện tại của các thành viên nhóm thực hiện đều có liên quan đến các cháu nhỏ, lứa tuổi đang bắt đầu tiếp xúc với máy tính và các thiết bị thông minh, các cháu rất ham thích các trò chơi, nội dung giải trí trên các thiết bị này, nhưng có một số nội dung không phù hợp, nên nhóm thực hiện mong muốn tạo một trò chơi cho các cháu, kiểm soát được nội dung được cung cấp Trò chơi này được làm để giúp các cháu có một trò chơi giải đố, rèn luyện khả năng quan sát ghi nhớ và, thao tác với chuột máy tính

4 Bố cục của luận văn

MỞ ĐẦU

Phần này giới thiệu về đề tài, lý do chọn đề tài, mục đích và ý nghĩa của đề tài, chọn công nghệ, công cụ để cài đặt

CHƯƠNG 1 - TỔNG QUAN

Chương nói về cơ sở lý luận để thực hiện đề tài

CHƯƠNG 2 - PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

Chương phân tích chi tiết về nội dung của ứng dụng

CHƯƠNG 3 - TRIỂN KHAI VÀ ĐÁNH GIÁ

Chương trình bày cài đặt và đánh giá

3

CHƯƠNG 1: TỔNG QUAN 1.1 Cơ sở lý luận

1.1.1 Sự phát triển của HTML

1.1.1.1 Sự phát triển của HTML

HTML (HyperText Makeup Language) đã trải qua nhiều phiên bản, đã và đang được phát triển, có thêm nhiều thành phần sau mỗi phiên bản, phiên bản đầu tiên của HTML được phát hành vào năm 1991 bởi Tim Berners-Lee với tên gọi HTML HTML 1.0 cung cấp một nền tảng độc lập trong việc đánh dấu dữ liệu để trao đổi Phiên bản này bao gồm 20 thành phần (elements) và 13 thành phần trong số này vẫn còn lại cho đến phiên bản phổ biến HTML 4.01

Phiên bản HTML+: Năm 1993 Dave Ragget đã gợi ý một bản nháp cho HTML

đó là HTML+ HTML+ kết hợp các thành phần đồ họa và hiển thị vào HTML, bổ sung các thành phần mũ trên, mũ dưới, chú thích, lề, chèn và xóa văn bản

Phiên bản HTML 2.0: Được phát hành năm 1994 và trở thành chuẩn chính thức

đầu tiên của HTML – tiêu chuẩn cơ bản mà tất cả các trình duyệt áp dụng cho đến

phiên bản HTML 3.2 Phiên bản này có thêm các thành phần: INPUT, SELECT,

OPTION và TEXTAREA cộng với các thành phần BR cho ngắt dòng Nó cũng được

thêm vào các thành phần META để mô tả chi tiết các tài liệu, thay đổi những miêu tả

về vùng đầu trang (HEAD) và phần thân (BODY)

Phiên bản HTML 3.0: Được phát hành bản nháp năm 1995 Phiên bản đã hỗ trợ

bảng, các thành phần FIG, các thuộc tính ALIGN để căn lề và bổ sung thêm các thuộc

tính ảnh nền, tab, chú thích, banner Ở phiên bản này, CSS trở thành một đề nghị của W3C (World Wide Web Consortium - Tổ chức chuẩn thiết kế web) dùng trong thiết

kế, tạo hình Web

Phiên bản HTML 3.2: Phát hành bản nháp đầu năm 1997, có thêm thẻ SCRIPT

và STYLE Cũng cung cấp những thành phần và thuộc tính mới cho trang web trở nên

sinh động với ảnh động, màu sắc và âm thanh, đây là thời gian phổ biến của việc sử

dụng khung trang (frame) và tự động chạy các tệp tin nhạc midi

Phiên bản HTML 4.0: Phát hành tháng 7 - 1997 và là bản chính thức vào tháng

4 - 1998, giới thiệu thêm các thành phần OBJECTS, và STYLE, DIV và SPAN để kết

hợp với CSS

Phiên bản HTML 4.01: Phát hành tháng 12 - 1999 và được W3C đề nghị sử

dụng HTML 4.01 hỗ trợ các tùy chọn đa phương tiện, các ngôn ngữ kịch bản, style, in

ấn và tạo sự thuận tiện cho người dùng là người khuyết tật HTML 4.01 có những bước đi lớn trong việc quốc tế hóa các văn bản với mục tiêu là làm cho trang web trở nên toàn cầu hóa

4

Phiên bản kết hợp XHTML 1.0 - sự kết hợp giữa HTML và XML (eXtensible

Markup Language: Ngôn ngữ đánh dấu mở rộng), được W3C khuyến cáo sử dụng vào tháng 2-2000 XHTML có cú pháp chặt chẽ hơn HTML Tuy nhiên XHTML lại không được nhiều nhà phát triển sử dụng cũng vì chính sự chặt chẽ trong cú pháp này

HTML 5.0 (hay HTML5): Năm 2008, bản nháp đầu tiên của HTML5 được phát

hành bởi Web Hypertext Application Technology Work Group (WHATWG) Và hiện tại WHATWG cùng với W3C đang cùng nhau phát triển phiên bản này HTML5 như

là một tiêu chuẩn HTML mới mà tất cả các nhà phát triển đều đang sử dụng

Cấu trúc của một tài liệu HTML5

Ví dụ minh hoạ nội dung một tài liệu HTML5:

Trong đó: <!DOCTYPE HTML> định nghĩa tài liệu HTML5

<html></html> xác nhận nội dung tài liệu HTML, nội dung của tài liệu sẽ được

đặt giữa cặp thẻ này

<head></head> xác định phần mở đầu của tài liệu, thường chứa các nội dung sẽ

được load trước của trang web, như là tiêu đề trang, các nội dung JavaScript,…

<title></title> Tiêu đề của trang tài liệu, chỉ sử dụng trong phạm vi giới hạn của

cặp thẻ <head>

<body></body> Xác định nội dung chính của tài liệu

Các dạng thẻ HTML:

- Các thẻ HTML dùng để viết lên các thành phần HTML

- Thẻ HTML (<HTML>) được bao quanh bởi cặp dấu nhỏ hơn < và > lớn hơn

- Các thẻ HTML thường là một cặp, với thẻ đầu là mở và thẻ sau là kết thúc Nội

dung được trình bày sẽ ở giữa hai thẻ này Có một số thẻ không có thẻ đóng: <br>…

Ví dụ: <title> Trang web của tôi </title>

Trong đó <title> là thẻ mở

</title> là thẻ đóng

5

Trang web của tôi là tiêu đề của trang web sẽ hiển thị trên thanh

tiêu đề của trình duyệt web

- Các thẻ HTML không phân biệt viết hoa hay viết thường

- Các thẻ HTML đều có các thuộc tính riêng, cung cấp các thông tin thành phần Các thuộc tính này luôn luôn được thêm vào thẻ mở đầu Các thuộc tính có đi kèm một

cặp như name/value, ví dụ: <body bgcolor= “blue”> thẻ này định nghĩa phần màu nền của trang là màu xanh, với tên thuộc tính là bgcolor, giá trị là blue

Sử dụng màu sắc trong HTML

Màu sắc trong HTML được sử dụng với các thẻ có thuộc tính bgcolor hoặc color

Giá trị của các thuộc tính này là một giá trị số nguyên Hexa, thường dùng với hệ màu

RGB (Red Green Blue) với định dạng #RRGGBB

Trong đó: RR là mã màu đỏ, GG là mã màu xanh lá cây, BB là mã màu xanh nước biển

Ngoài ra còn có thể dùng tên tiếng Anh của màu, nhưng với cách chỉ định màu này thì chỉ có 16 màu cơ bản

Bảng 1.1: Một số giá trị màu cơ bản

Màu hải quân

#000080

#4169E1

#7FFFD4

NAVY ROYALBLUE AQUAMARINE

6

1.1.1.2 Các ưu điểm của HTML5

Các ưu điểm cũng như là các tính năng được cung cấp của HTML5:

- Bổ sung và cải tiến các thẻ thành phần, mô tả chính xác những gì được thiết kế

- Tăng cường khả năng truyền thông trên mạng và làm việc trên nền Web (Web Workers) cũng như chạy các chương trình nền Sử dụng giao diện WebSocket để kết nối giữa các ứng dụng đến trên máy chủ

- Truy vấn dữ liệu đã được lưu trữ tốt hơn và cải thiện khả năng lưu trữ chung của các dữ liệu Sử dụng API (Application Program Interface - Giao diện lập trình ứng dụng) cơ sở dữ liệu dựa trên SQL (Structured Query Language - Ngôn ngữ truy vấn cấu trúc) cho phép lưu trữ cục bộ, phía máy khách

- Cải thiện tốc độ nạp và lưu trang; sử dụng các form biểu mẫu, dữ liệu thông minh hơn, giảm tải mã JavaScript, cho phép truyền thông hiệu quả hơn (nhất là giữa các thiết bị di động và máy chủ đám mây)

- Định hướng nội dung với sự hỗ trợ kết hợp CSS3 để quản lý giao diện người dùng đồ họa (GUI - Graphical User Interface)

- Tính năng làm nên điểm nhấn của HTML5: Hỗ trợ vẽ hình Canvas và load video, để thêm đồ họa và video mà không cần cài đặt các plugin của bên thứ ba (như Flash, ShockwaveFlash,…)

- Đặc tả Geolocation API (API định vị toàn cầu), sử dụng khả năng định vị của máy điện thoại thông minh để kết hợp các dịch vụ và các ứng dụng đám mây di động

1.1.2 Các công nghệ mới

1.1.2.1 Audio, Video

Thông thường với các trình duyệt trước đây, để có thể chạy được các tập tin âm thanh, video, thì người dùng phải cài đặt thêm các plug-in cho trình duyệt, đơn cử như plug-in Adobe Flash Dưới đây là ảnh chụp các thông báo, lỗi không hiển thị do (các) trình duyệt bị thiếu plug-in Adobe Flash (hoặc bị disable), một số trình duyệt yêu cầu cài đặt nó (đặc biệt với trình duyệt Mozilla FireFox)

Hình 1.1: Các ảnh chụp màn hình trình duyệt web bị thiếu hoặc hỏng Plugin Flash

Ngày nay với HTML5, người sử dụng không cần phải qua bước cài đặt plug - in như vậy nữa, HTML5 cho phép các tập tin âm thanh và video được chạy trực tiếp bằng

các thẻ <audio> và <video> Với các API (Application Programming Interface - Giao

diện lập trình ứng dụng) mới được cung cấp, người dùng còn có thể truy cập, điều

7

khiển và thao tác với các tập tin này Phiên bản trình duyệt Google Chrome 53 là trình duyệt đầu tiên chặn các nội dung Flash Riêng trang web Youtube đã bỏ Flash (vốn đã xuất hiện nhiều lỗ hổng bảo mật, gây mất an toàn cho người sử dụng) và mặc định chuyển sang HTML5 vào tháng 1/2016 Các trình duyệt khác sẽ dần ngưng hỗ trợ Flash vào tháng 9/2016 Từ phiên bản Google Chrome 53 trở đi, trình duyệt sẽ mặc định nội dung HTML5 và chỉ để lại các nội dung Flash cho các trang web chưa nâng cấp lên các nội dung mới

1.1.2.2 Drag and Drop - Kéo và thả

Tính năng kéo - thả là một tính năng rất phổ biến trong nhiều chương trình phần mềm hiện đại, đặc biệt với các chương trình thiết kế theo kiểu WYSIWYG (What You See Is What You Get - Bạn nhận được những gì bạn thấy, giao diện tương tác tức thời) Các trình duyệt web cũng có xu hướng này, nay HTML5 cũng đã hỗ trợ tính năng này, kéo - thả là một chuẩn mới và bất kỳ thành phần nào cũng có thể “kéo” và

“thả” được (thuộc tính draggable trong các thẻ) Để có thể kéo thả được với đối tượng thì đặt thuộc tính draggable = “true”, ví dụ làm cho đối tượng là hình ảnh có thể được kéo thả: <img draggable= “true”>

1.1.2.3 Offline Web Applications

Ứng dụng WebOffffline - Application Cache: HTML5 có thể dễ dàng tạo ra

các ứng dụng WebOffline không dùng kết nối Internet

Có 3 lợi thế khi sử dụng Application Cache:

- Không dùng kết nối Internet - duyệt web offline

- Tốc độ

- Server được giảm tải

Để dùng Application Cache, chèn thêm thuộc tính manifest vào thẻ <html> như

ví dụ minh hoạ bên dưới (phần mở rộng của file manifest là appcache):

<!DOCTYPE HTML>

<html manifest="thunghiem.appcache">

</html>

CacheManifest có 3 phần chính là: Cache Manifest (khai báo các file được tải

về), Network (khai báo các file cần có kết nối Internet), Fallback (khai báo trang html

offline để thay thế cho trang không truy cập được)

Việc cập nhật Cache

Khi một trong các điều sau xảy ra, việc cache sẽ bị ngắt:

- Người dùng xóa cache của trình duyệt

- File manifest được chỉnh sửa

8

- Bộ nhớ cache ứng dụng được cập nhật theo chương trình

Một số trình duyệt có thể có những giới hạn dung lượng cache khác nhau (một vài trình duyệt giới hạn dung lượng cache là 5MB cho một website)

1.1.2.4 Scalable Vector Graphics (SVG)

Cơ bản về SVG

Scalable Vector Graphics (SVG) là một định dạng hình ảnh vector dựa trên XML cho đồ họa hai chiều, hỗ trợ tương tác và hoạt hình Đặc tả kỹ thuật của SVG là một chuẩn mở được phát triển bởi W3C từ năm 1999

Các hình ảnh SVG và hành vi của chúng được định nghĩa trong tập tin văn bản XML Điều này có nghĩa rằng họ có thể được tìm kiếm, lập chỉ mục, kịch bản, và nén Khi các tập tin XML, hình ảnh SVG có thể được tạo ra và chỉnh sửa với bất kỳ trình soạn văn bản, nhưng thường được tạo ra với phần mềm vẽ

Ưu điểm của SVG so với các định dạng ảnh khác (như JPEG và GIF) là:

- Có thể được tạo và chỉnh sửa với bất kỳ trình biên tập văn bản nào

- Có thể được tìm kiếm, lập chỉ mục, nén…

- Có thể được co giãn kích thước

- Có thể được in với chất lượng cao ở bất kỳ độ phân giải nào

- Có thể phóng to hoặc thu nhỏ mà không mất chất lượng ảnh (hiện tượng “vỡ hạt” thường thấy ở các ảnh bitmap)

Tất cả các trình duyệt web hiện đại, bao gồm cả chính Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, và Microsoft Edge có ít nhất một số mức độ

Text Các ký tự Unicode dưới dạng dữ liệu XML

Painting Như là tô màu, lấp đầy mô hình với 1 màu, 1 pattern,

Color

Tô màu với tất cả các yếu tố mà SVG có thể thấy “Màu”

được sử dụng có thể với tên màu, chuỗi số hệ thập lục phân,

hệ màu RGB (Red Green Blue)

9

Filter effects Các hiệu ứng bộ lọc

Interactivity Tương tác với người sử dụng

Linking Hình SVG có thể chứa link đến các tài liệu khác

Scripting Viết mã như JS (JavaScript) gồm các thao tác, sự kiện theo

yêu cầu Animation Tạo hiệu ứng hoạt hình với các yếu tố hoạt hình được xây

dựng: <animate>, <animateMotion>, <animateColor>

Fonts Văn bản SVG có thể có font ngoài (như font của hệ thống) Metadata Cung cấp siêu dữ liệu cho nội dung SVG

Thêm đối tượng SVG vào web

Sử dụng cặp thẻ <svg> và </svg> để thêm một đối tượng SVG Phần nội dung

giữa cặp thẻ chính là đối tượng SVG cần vẽ ra

1.1.2.5 Canvas API - API Vẽ hình

Giới thiệu về Canvas

Canvas được dùng để vẽ hình đồ hoạ 2D (Two Dimension), tạo ảnh theo toạ độ,

xử lý đồ hoạ với mã JS (JavaScript) Phương thức getContext() trả về một đối tượng cung cấp các phương thức và thuộc tính để vẽ trên thẻ canvas Canvas thể hiện hình ảnh một cách trực quan:

- Các sơ đồ đơn giản, biểu đồ và đồ thị

- Trang trí thêm cho giao diện người dùng

- Tạo hình ảnh động

- Có thể nhúng các ứng dụng vẽ

- Đặc biệt Canvas hoạt động tốt với những hạn chế của CSS

Khi hiển thị trên trình duyệt, Canvas hiển thị ở dạng ảnh png

Sự hỗ trợ của các trình duyệt cho Canvas

Bảng 1.3: Sự hỗ trợ của các trình duyệt cho Canvas Trình

duyệt

Google Chrome Cốc Cốc Mozilla

FireFox

Internet Explorer Safari Opera

Bảng 1.4: Các thuộc tính và phương thức của Canvas Thuộc tính, phương thức Mô tả thuộc tính, phương thức

fillStyle Thiết lập màu, dải màu, mẫu hoạ tiết trên hình

strokeStyle Thiết lập màu, dải màu, mẫu hoạ tiết của đường viền shadowColor Đổ bóng với màu được cung cấp

10

shadowOffsetX Đặt khoảng cách từ bóng tới hình (ngang)

shadowOffsetY Đặt khoảng cách từ bóng tới hình (dọc)

lineCap Thiết lập kiểu mũ cho hai đầu dòng kẻ

lineJoin Thiết lập kiểu góc tạo bởi hai đầu dòng kẻ

lineWidth Thiết lập độ rộng của dòng kẻ

miterLimit Thiết lập chiều dài tối đa của mũ tạo bởi hai dòng kẻ font Thiết lập font hiện tại của nội dung

textAlign Thiết lập lề cho nội dung

textBaseline Thiết lập đường cơ sở hiện tại của chữ

globalAlpha Giá trị độ trong suốt từ 0.1 đến 1

globalCompositeOperation Thiết lập cách ảnh được vẽ lên ảnh có sẵn

createLinearGradient() Phương thức tạo dải màu đường thẳng dùng cho nội

dung của Canvas createPartten() Phương thức tạo mẫu hoạ tiết

createRadialGradient() Phương thức tạo dải màu dạng tròn cho nội dung AddColorStop() Phương thức thêm màu và điểm dừng cho dải màu

fillRect() Phương thức tạo hình chữ nhật có đổ màu

strokeRect() Phương thức tạo hình chữ nhật không đổ màu

clearRect() Phương thức xoá các điểm ảnh trong hình chữ nhật fill() Phương thức đổ màu cho hình hiện tại

moveTo() Di chuyển tới một điểm trong canvas để vẽ

clip() Cắt một khu vực theo hình dạng và kích thước

quadraticCurveTo() Tạo đường cong Bézier bậc 2

bezierCurveTo() Tạo đường cong Bézier bậc 3

arcTo() Vẽ vòng cung, đường tròn giữa hai tiếp tuyến

scale() Phóng to, thu nhỏ hình hiện tại trên canvas

isPointInPath() Trả về giá trị True nếu điểm kiểm tra có trong đường

11

hiện tại translate() Di chuyển vị trí điểm (0,0) trên canvas

tranform() Thay thế ma trận biến đổi hiện tại của hình vẽ

setTranform() Thiết lập lại ma trận biến đổi, sau đó chạy phương

thức transform()

measureText() Trả về đối tượng chứa chiều dài chữ

drawImage() Vẽ tranh, ảnh, video trong canvas

createImageData() Tạo ra ImageData rỗng

getImageData() Trả về đối tượng ImageData chứa dữ liệu điểm ảnh

đã được sao chép trong hình chữ nhật được chỉ định putImageData() Chèn dữ liệu ảnh lấy từ ImageData() vào canvas

restore() Khôi phục lại trạng thái nét vẽ, các thuộc tính đã lưu

getContext() Trả về một đối tượng cung cấp các phương thức và

thuộc tính để vẽ trên canvas

Chèn một ảnh Canvas

Đặt cặp thẻ <canvas> </canvas> tại vị trí muốn hiển thị tranh, ảnh; sử dụng các

API và HTML5 đã cung cấp bên trong cặp thẻ với nội dung là các lệnh JavaScript

1.1.2.6 Communication APIs - Các API truyền thông

HTML5 có cung cấp hai khối giao tiếp thời gian thực: Cross Document Messaging và XMLHttpRequest 2 Cả hai khối này đã thêm nhiều tùy chọn giao tiếp mới để cho phép các ứng dụng HTML5 phục vụ nhiều tên miền khác nhau một cách

an toàn

Cross Document Messaging

Cross Document Messaging là một API cho phép các trang tài liệu giao tiếp với nhau qua những nguồn khác nhau hay những tên miền nguồn khác Sử dụng phương

thức postMessage() của API giao tiếp này, những thông điệp text có thể được gửi đi từ

tên miền này tới tên miền khác Đối tượng Window được tạo để nhận thông điệp đó

XMLHttpRequest 2

XMLHttpRequest là một đối tượng được sử dụng để trao đổi dữ liệu với một máy chủ ở sau Điều đó có nghĩa nó có thể cập nhật một hoặc nhiều phần nào đó của trang web mà không phải tải lại trang đó

12

Cross - origin XMLHttpRequest

Đối tượng XMLHttpRequest có thể gửi gửi cầu tới nhiều máy chủ khác nhau, được gọi là cross - origin resource sharing (CORS - Cross-Origin Resource Sharing:

Kỹ thuật trình duyệt cho phép lấy dữ liệu hoặc tài nguyên từ 1 domain khác với domain website mà người dùng đang duyệt) Nhưng để có thể sử dụng được CORS thì trình duyệt phải hỗ trợ nó và máy chủ phải đồng ý với yêu cầu cross-origin

Progress event - Sự kiện Progress

Sự kiện progress sẽ gửi lại thông tin về tiến trình đang thực hiện một việc gì đó

của đối tượng XMLHttpRequest Có hai khả năng của progress là: quá trình tải xuống

và tải lên (download và upload) Sự kiện progress cho tải về thuộc về đối tượng là

XMLHttpRequest, còn đối tượng XMLHttpRequest.upload là của quá trình tải lên

Nhận dữ liệu nhị phân

Trong phiên bản XMLHttpRequest cũ chỉ có thể nhận dữ liệu text từ máy chủ, với XMLHttpRequest 2 thì có thể nhận dữ liệu nhị phân Các dữ liệu sẽ được xử lý như văn bản và cần chuyển đổi chúng thành dữ liệu nhị phân

1.1.2.7 Forms API

HTML5 có thêm các kiểu input mới đa dạng và thuận tiện hơn cho người dùng:

color (nhập màu), email (nhập email - trình duyệt tự kiểm tra dữ liệu nhập vào có phải

dạng email hay không), search (tìm kiếm), number (nhập số), month (nhập tháng),

week (nhập tuần trong tháng của năm), tel (nhập số điện thoại), datetime (nhập ngày

giờ), datetime-local (nhập thời gian với ngày giờ không gồm múi giờ), number (nhập số), time (nhập thời gian), range (nhập một sốn thông qua thanh trượt điều khiển), url

(nhập địa chỉ url và trình duyệt tự kiểm tra tính hợp lệ)

Bảng 1.5: Các thành phần input mới của Form

Datalist Như một chức năng “autocomplete” cho thành phần input dưới

dạng một danh sách, người dùng lựa chọn mục

Bảng 1.6: Các thuộc tính mới của các thành phần Form

autocomplete Kích hoạt chức năng autocomplete cho form Có giá trị “on”

hoặc “off”

13

autofocus Tự động focus con trỏ vào vị trí <input> nó được chỉ định form

Xác định một hoặc nhiều <input> thuộc form nào đó

formaction Được sử dụng cho kiểu submit và image Xác định URL sẽ xử

lý form khi gửi đi

formenctype

Được sử dụng cho kiểu submit và image Xác định dữ liệu form

sẽ được mã hóa như thế nào khi gửi đi (chỉ sử dụng với form có

method= “post”)

formmethod Được sử dụng cho kiểu submit và image Xác định phương thức

HTTP sẽ gửi dữ liệu form tới URL action

formnovalidate Được sử dụng với kiểu submit Không kiểm tra tính hợp lệ của

<input>

formtarget

Được sử dụng cho kiểu submit và image Xác định một tên hay

một từ khóa cho biết nơi hiển thị các response nhận được sau khi gửi form đi

height, width

Chỉ được sử dụng cho kiểu image Xác định chiều cao và chiều rộng của <input> list Thuộc tính này sẽ sử dụng một danh sách được tạo ra từ <datalist> đưa vào <input>

min, max Xác định giá trị tối thiểu và tối đa của <input> cho phép người

dùng được phép nhập nhiều hơn một giá trị trong <input>

novalicate Khi được sử dụng sẽ không kiểm tra giá trị được nhập vào khi

gửi đi

pattern Cho phép người dùng đặt một mẫu có thể được kết hợp với các

giá trị được nhập vào bởi người sử dụng trước khi được gửi đi placeholder

Hiển thị một gợi ý ngắn miêu tả giá trị nên được nhập vào một

<input> Xác định trường <input> đó phải được điền trước khi gửi đi

step

Được sử dụng cho các kiểu: number, range, date, datetime, datetime-local, month, time và week Xác định bước nhảy khi tăng hoặc giảm giá trị

14

mới xác định vị trí gần chính xác Các nguồn định vị mà Geolocation API dùng đến có thể kể ra như sau:

- Địa chỉ IP

- Hệ thống định vị toàn cầu: Global Positioning System (GPS)

- Wi-Fi kết hợp địa chỉ MAC (Media Access Control - Điều khiển truy cập môi trường) từ RFID (Radio Frequency Identification- Nhận dạng tần số vô tuyến), Wi-Fi,

và Bluetooth

- Sử dụng mạng lưới thuê bao di động GSM (Global System for Mobile Communications (Tiếng Anh), Groupe Spécial Mobile (Tiếng Pháp): Hệ thống thông tin di động toàn cầu) hoặc CDMA (Code Division Multiple Access - Đa truy cập chia theo mã số)

- Do người dùng tự định nghĩa

Khai thác sử dụng tính năng của Geolocation API:

- Lấy vị trí người dùng với phương thức getCurrentPosition()

- Hiển thị vị trí trên bản đồ với ảnh tĩnh của một hệ bản đồ trực tuyến như Google Maps

- Khả năng giả lập một hệ thống GPS trên ô tô cho các thiết bị di động với

phương thức watchPosition() (Phương thức này trả lại vị trí hiện tại của người dùng và

tiếp tục cập nhật vị trí khi người dùng di chuyển)

1.1.2.9 Storage APIs

WebStorage (DOM Storage - Document Object Model Storage - Mô hình đối tượng tài liệu)

Các trang web có thể lưu lại dữ liệu tại máy khách bằng cách sử dụng cookies

Các cookie này cho phép lưu trữ tối đa 4KB và vài chục cookie cho một domain với nội dung chủ yếu là những thông tin đơn giản như email, username, mật khẩu người dùng,… nhằm mục đích tự động đăng nhập web vào lần truy cập sau Dù có tiện lợi như vậy như cookie có tiềm ẩn các mối nguy hiểm về lộ thông tin người dùng Nay với

HTML5, việc này được thực hiện với Web Storage, nó đảm bảo an toàn và nhanh hơn

nhiều

Local Storage và Session Storage:

Hai đối tượng local Storage và session Storage được tạo ra từ interface Storage, bạn sử dụng hai đối tượng này trong JavaScript qua hai biến được tạo sẵn là:

window.localStorage và window.sessionStorage Hai lợi ích mà chúng mang lại là:

- Dễ sử dụng: Có thể truy xuất dữ liệu của hai đối tượng này thông qua các thuộc tính hoặc các phương thức Dữ liệu được lưu trữ theo từng cặp key/value và không cần bất kì công việc khởi tạo hay chuẩn bị nào