HTML5 - Hướng dẫn nhanh
HTML5 là bản sửa đổi lớn tiếp theo của tiêu chuẩn HTML thay thế cho HTML 4.01, XHTML 1.0 và XHTML 1.1. HTML5 là một tiêu chuẩn để cấu trúc và trình bày nội dung trên World Wide Web.
HTML5 là sự hợp tác giữa World Wide Web Consortium (W3C) và Nhóm làm việc về Công nghệ Ứng dụng Siêu văn bản Web (WHATWG).
Tiêu chuẩn mới kết hợp các tính năng như phát lại video và kéo và thả mà trước đây phụ thuộc vào các plugin trình duyệt của bên thứ ba như Adobe Flash, Microsoft Silverlight và Google Gears.
Hỗ trợ trình duyệt
Các phiên bản mới nhất của Apple Safari, Google Chrome, Mozilla Firefox và Opera đều hỗ trợ nhiều tính năng HTML5 và Internet Explorer 9.0 cũng sẽ hỗ trợ một số chức năng HTML5.
Các trình duyệt web di động được cài đặt sẵn trên iPhone, iPad và điện thoại Android đều hỗ trợ tuyệt vời cho HTML5.
Các tính năng mới
HTML5 giới thiệu một số yếu tố và thuộc tính mới có thể giúp bạn xây dựng các trang web hiện đại. Đây là tập hợp một số tính năng nổi bật nhất được giới thiệu trong HTML5.
New Semantic Elements - Chúng giống như <header>, <footer> và <section>.
Forms 2.0 - Cải tiến các biểu mẫu web HTML trong đó các thuộc tính mới đã được giới thiệu cho thẻ <input>.
Persistent Local Storage - Để đạt được mà không cần dùng đến các plugin của bên thứ ba.
WebSocket - Công nghệ giao tiếp hai chiều thế hệ tiếp theo cho các ứng dụng web.
Server-Sent Events - HTML5 giới thiệu các sự kiện truyền từ máy chủ web đến trình duyệt web và chúng được gọi là Sự kiện do máy chủ gửi (SSE).
Canvas - Điều này hỗ trợ một bề mặt vẽ hai chiều mà bạn có thể lập trình bằng JavaScript.
Audio & Video - Bạn có thể nhúng âm thanh hoặc video trên các trang web của mình mà không cần dùng đến các plugin của bên thứ ba.
Geolocation - Giờ đây, khách truy cập có thể chọn chia sẻ vị trí thực của họ với ứng dụng web của bạn.
Microdata - Điều này cho phép bạn tạo các từ vựng của riêng mình ngoài HTML5 và mở rộng các trang web của bạn với ngữ nghĩa tùy chỉnh.
Drag and drop - Kéo và thả các mục từ vị trí này sang vị trí khác trên cùng một trang web.
Tương thích ngược
HTML5 được thiết kế càng nhiều càng tốt để tương thích ngược với các trình duyệt web hiện có. Các tính năng mới của nó đã được xây dựng dựa trên các tính năng hiện có và cho phép bạn cung cấp nội dung dự phòng cho các trình duyệt cũ hơn.
Đề xuất phát hiện hỗ trợ cho các tính năng HTML5 riêng lẻ bằng cách sử dụng một vài dòng JavaScript.
Nếu bạn không quen thuộc với bất kỳ phiên bản HTML nào trước đây, tôi khuyên bạn nên xem qua HTML Tutorial trước khi khám phá các tính năng của HTML5.
Ngôn ngữ HTML 5 có cú pháp HTML "tùy chỉnh" tương thích với các tài liệu HTML 4 và XHTML1 được xuất bản trên Web, nhưng không tương thích với các tính năng SGML bí truyền hơn của HTML 4.
HTML 5 không có các quy tắc cú pháp giống như XHTML, nơi chúng tôi cần tên thẻ viết thường, trích dẫn các thuộc tính của chúng tôi, một thuộc tính phải có một giá trị và để đóng tất cả các phần tử trống.
HTML5 đi kèm với rất nhiều tính linh hoạt và nó hỗ trợ các tính năng sau:
- Tên thẻ viết hoa.
- Trích dẫn là tùy chọn cho các thuộc tính.
- Giá trị thuộc tính là tùy chọn.
- Việc đóng các phần tử trống là tùy chọn.
LOẠI TÀI LIỆU
DOCTYPE trong các phiên bản HTML cũ hơn vì ngôn ngữ HTML dựa trên SGML và do đó yêu cầu tham chiếu đến một DTD.
Các tác giả HTML 5 sẽ sử dụng cú pháp đơn giản để chỉ định DOCTYPE như sau:
<!DOCTYPE html>
Cú pháp trên không phân biệt chữ hoa chữ thường.
Mã hóa ký tự
Tác giả HTML 5 có thể sử dụng cú pháp đơn giản để chỉ định Mã hóa ký tự như sau:
<meta charset = "UTF-8">
Cú pháp trên không phân biệt chữ hoa chữ thường.
Thẻ <script>
Thực tế phổ biến là thêm thuộc tính type có giá trị là "text / javascript" vào các phần tử script như sau:
<script type = "text/javascript" src = "scriptfile.js"></script>
HTML 5 loại bỏ thông tin bổ sung cần thiết và bạn có thể sử dụng cú pháp đơn giản sau:
<script src = "scriptfile.js"></script>
Thẻ <link>
Cho đến nay bạn đã viết <link> như sau:
<link rel = "stylesheet" type = "text/css" href = "stylefile.css">
HTML 5 loại bỏ thông tin bổ sung cần thiết và bạn có thể chỉ cần sử dụng cú pháp sau:
<link rel = "stylesheet" href = "stylefile.css">
Phần tử HTML5
Các phần tử HTML5 được đánh dấu bằng thẻ bắt đầu và thẻ kết thúc. Các thẻ được phân tách bằng dấu ngoặc nhọn với tên thẻ ở giữa.
Sự khác biệt giữa thẻ bắt đầu và thẻ kết thúc là thẻ sau bao gồm dấu gạch chéo trước tên thẻ.
Sau đây là ví dụ về một phần tử HTML5:
<p>...</p>
Tên thẻ HTML5 không phân biệt chữ hoa chữ thường và có thể được viết bằng tất cả chữ hoa hoặc chữ hoa, mặc dù quy ước phổ biến nhất là gắn với chữ thường.
Hầu hết các phần tử chứa một số nội dung như <p> ... </p> chứa một đoạn văn. Tuy nhiên, một số phần tử bị cấm chứa bất kỳ nội dung nào và chúng được gọi là phần tử trống. Ví dụ,br, hr, link, meta, Vân vân.
Đây là danh sách đầy đủ các Phần tử HTML5 .
Thuộc tính HTML5
Phần tử có thể chứa các thuộc tính được sử dụng để thiết lập các thuộc tính khác nhau của một phần tử.
Một số thuộc tính được xác định trên toàn cục và có thể được sử dụng trên bất kỳ phần tử nào, trong khi những thuộc tính khác chỉ được xác định cho các phần tử cụ thể. Tất cả các thuộc tính đều có tên và giá trị và trông giống như hình bên dưới trong ví dụ.
Dưới đây là ví dụ về thuộc tính HTML5 minh họa cách đánh dấu phần tử div với thuộc tính có tên là lớp bằng cách sử dụng giá trị "example" -
<div class = "example">...</div>
Các thuộc tính chỉ có thể được chỉ định trong thẻ bắt đầu và không bao giờ được sử dụng trong thẻ kết thúc.
Các thuộc tính HTML5 không phân biệt chữ hoa chữ thường và có thể được viết bằng tất cả chữ hoa hoặc chữ hoa hỗn hợp, mặc dù quy ước phổ biến nhất là gắn với chữ thường.
Đây là danh sách đầy đủ các Thuộc tính HTML5 .
Tài liệu HTML5
Các thẻ sau đã được giới thiệu để có cấu trúc tốt hơn:
section- Thẻ này đại diện cho một phần tài liệu hoặc ứng dụng chung. Nó có thể được sử dụng cùng với h1-h6 để chỉ ra cấu trúc tài liệu.
article - Thẻ này đại diện cho một phần nội dung độc lập của tài liệu, chẳng hạn như một mục blog hoặc bài báo.
aside - Thẻ này đại diện cho một phần nội dung chỉ liên quan một chút đến phần còn lại của trang.
header - Thẻ này đại diện cho tiêu đề của một phần.
footer - Thẻ này đại diện cho chân trang cho một phần và có thể chứa thông tin về tác giả, thông tin bản quyền, v.v.
nav - Thẻ này đại diện cho một phần của tài liệu dành cho điều hướng.
dialog - Thẻ này có thể được sử dụng để đánh dấu một cuộc trò chuyện.
figure - Thẻ này có thể được sử dụng để liên kết chú thích cùng với một số nội dung được nhúng, chẳng hạn như hình ảnh hoặc video.
Đánh dấu cho tài liệu HTML 5 sẽ giống như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>...</title>
</head>
<body>
<header role = "banner">
<h1>HTML5 Document Structure Example</h1>
<p>This page should be tried in safari, chrome or Mozila.</p>
</header>
<nav>
<ul>
<li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li>
<li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li>
<li><a href = "https://www.tutorialspoint.com/javascript">
JavaScript Tutorial</a></li>
</ul>
</nav>
<article>
<section>
<p>Once article can have multiple sections</p>
</section>
</article>
<aside>
<p>This is aside part of the web page</p>
</aside>
<footer>
<p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p>
</footer>
</body>
</html>
Nó sẽ tạo ra kết quả sau:
Như đã giải thích trong chương trước, các phần tử có thể chứa các thuộc tính được sử dụng để đặt các thuộc tính khác nhau của một phần tử.
Một số thuộc tính được xác định trên toàn cục và có thể được sử dụng trên bất kỳ phần tử nào, trong khi những thuộc tính khác chỉ được xác định cho các phần tử cụ thể. Tất cả các thuộc tính đều có tên và giá trị và trông giống như hình bên dưới trong ví dụ.
Dưới đây là ví dụ về thuộc tính HTML5 minh họa cách đánh dấu phần tử div bằng thuộc tính có tên là lớp bằng cách sử dụng giá trị "example" -
<div class = "example">...</div>
Các thuộc tính chỉ có thể được chỉ định trong start tags và không bao giờ được sử dụng trong end tags.
Các thuộc tính HTML5 không phân biệt chữ hoa chữ thường và có thể được viết bằng tất cả chữ hoa hoặc chữ hoa hỗn hợp, mặc dù quy ước phổ biến nhất là gắn với chữ thường.
Thuộc tính chuẩn
Các thuộc tính được liệt kê bên dưới được hỗ trợ bởi hầu hết các thẻ HTML 5.
Thuộc tính | Tùy chọn | Chức năng |
---|---|---|
khóa truy cập | Đã xác định người dùng | Chỉ định một phím tắt để truy cập một phần tử. |
căn chỉnh | phải, trái, giữa | Căn chỉnh theo chiều ngang các thẻ |
lý lịch | URL | Đặt hình nền phía sau một phần tử |
bgcolor | giá trị số, hệ thập phân, RGB | Đặt màu nền phía sau một phần tử |
lớp học | Đã xác định người dùng | Phân loại một phần tử để sử dụng với Trang tính kiểu xếp tầng. |
có thể bằng lòng | đúng sai | Chỉ định xem người dùng có thể chỉnh sửa nội dung của phần tử hay không. |
danh mục | Id menu | Chỉ định menu ngữ cảnh cho một phần tử. |
dữ liệu-XXXX | Đã xác định người dùng | Thuộc tính tùy chỉnh. Tác giả của một tài liệu HTML có thể xác định các thuộc tính của riêng họ. Phải bắt đầu bằng "data-". |
có thể kéo được | true, false, auto | Chỉ định người dùng có được phép kéo một phần tử hay không. |
Chiều cao | Giá trị số | Chỉ định chiều cao của bảng, hình ảnh hoặc ô bảng. |
ẩn | ẩn | Chỉ định xem phần tử có nên hiển thị hay không. |
Tôi | Đã xác định người dùng | Đặt tên một phần tử để sử dụng với Trang tính kiểu xếp tầng. |
mục | Danh sách các yếu tố | Dùng để nhóm các phần tử. |
itemprop | Danh sách các mục | Dùng để nhóm các mặt hàng. |
kiểm tra chính tả | đúng sai | Chỉ định nếu phần tử phải được kiểm tra chính tả hoặc ngữ pháp. |
Phong cách | CSS Style sheet | Chỉ định một kiểu nội tuyến cho một phần tử. |
môn học | Người dùng xác định id | Chỉ định mục tương ứng của phần tử. |
tabindex | Số tab | Chỉ định thứ tự tab của một phần tử. |
tiêu đề | Đã xác định người dùng | Tiêu đề "bật lên" cho các phần tử của bạn. |
giá trị | trên cùng, giữa, dưới cùng | Căn chỉnh theo chiều dọc các thẻ trong phần tử HTML. |
chiều rộng | Giá trị số | Chỉ định chiều rộng của bảng, hình ảnh hoặc ô bảng. |
Để có danh sách đầy đủ các Thẻ HTML5 và các thuộc tính liên quan, vui lòng kiểm tra tài liệu tham khảo của chúng tôi về Thẻ HTML5 .
Thuộc tính tùy chỉnh
Một tính năng mới đang được giới thiệu trong HTML 5 là việc bổ sung các thuộc tính dữ liệu tùy chỉnh.
Thuộc tính dữ liệu tùy chỉnh bắt đầu bằng data-và sẽ được đặt tên dựa trên yêu cầu của bạn. Đây là một ví dụ đơn giản -
<div class = "example" data-subject = "physics" data-level = "complex">
...
</div>
Đoạn mã trên sẽ là HTML5 hoàn toàn hợp lệ với hai thuộc tính tùy chỉnh được gọi là datasubject và data-level . Bạn sẽ có thể nhận các giá trị của các thuộc tính này bằng cách sử dụng JavaScript API hoặc CSS theo cách tương tự như khi bạn lấy các thuộc tính chuẩn.
Khi người dùng truy cập trang web của bạn, họ thực hiện các hoạt động khác nhau như nhấp vào văn bản và hình ảnh và liên kết, di chuột qua các phần tử đã xác định, v.v. Đây là những ví dụ về những gì JavaScript gọi events.
Chúng tôi có thể viết các trình xử lý sự kiện của mình bằng Javascript hoặc VBscript và bạn có thể chỉ định các trình xử lý sự kiện này làm giá trị của thuộc tính thẻ sự kiện. Đặc tả HTML5 xác định các thuộc tính sự kiện khác nhau như được liệt kê bên dưới:
Chúng tôi có thể sử dụng tập hợp các thuộc tính sau để kích hoạt bất kỳ javascript hoặc là vbscript mã được cung cấp dưới dạng giá trị, khi có bất kỳ sự kiện nào diễn ra đối với bất kỳ phần tử HTML5 nào.
Chúng tôi sẽ đề cập đến các sự kiện cụ thể cho từng yếu tố trong khi thảo luận chi tiết về các yếu tố đó trong các chương tiếp theo.
Thuộc tính | Giá trị | Sự miêu tả |
---|---|---|
ngoại tuyến | kịch bản | Kích hoạt khi tài liệu ngoại tuyến |
onabort | kịch bản | Kích hoạt sự kiện hủy bỏ |
onafterprint | kịch bản | Kích hoạt sau khi tài liệu được in |
onbeforeonload | kịch bản | Kích hoạt trước khi tải tài liệu |
onbeforeprint | kịch bản | Kích hoạt trước khi tài liệu được in |
onblur | kịch bản | Kích hoạt khi cửa sổ mất tiêu điểm |
oncanplay | kịch bản | Kích hoạt khi phương tiện có thể bắt đầu phát, nhưng có thể phải dừng để lưu vào bộ đệm |
oncanplaythrough | kịch bản | Kích hoạt khi phương tiện có thể được phát đến cuối mà không dừng lại để lưu vào bộ đệm |
sự thay đổi | kịch bản | Kích hoạt khi một phần tử thay đổi |
trong một cái nhấp chuột | kịch bản | Kích hoạt khi nhấp chuột |
oncontextmenu | kịch bản | Kích hoạt khi menu ngữ cảnh được kích hoạt |
ondblclick | kịch bản | Kích hoạt khi nhấp đúp chuột |
ondrag | kịch bản | Kích hoạt khi một phần tử được kéo |
ondragend | kịch bản | Kích hoạt khi kết thúc thao tác kéo |
ondragenter | kịch bản | Kích hoạt khi một phần tử được kéo đến mục tiêu thả hợp lệ |
ondragleave | kịch bản | Kích hoạt khi một phần tử rời khỏi mục tiêu thả hợp lệ |
ondragover | kịch bản | Kích hoạt khi một phần tử đang được kéo qua một mục tiêu thả hợp lệ |
ondragstart | kịch bản | Kích hoạt khi bắt đầu thao tác kéo |
ondrop | kịch bản | Kích hoạt khi phần tử được kéo đang bị loại bỏ |
ondurationchange | kịch bản | Kích hoạt khi độ dài của vật liệu in được thay đổi |
có giấy tờ | kịch bản | Kích hoạt khi một phần tử tài nguyên phương tiện đột nhiên trống rỗng. |
gắn bó | kịch bản | Kích hoạt khi phương tiện đến cuối |
onerror | kịch bản | Kích hoạt khi xảy ra lỗi |
vào trọng tâm | kịch bản | Kích hoạt khi cửa sổ được lấy nét |
onformchange | kịch bản | Kích hoạt khi biểu mẫu thay đổi |
onforminput | kịch bản | Kích hoạt khi một biểu mẫu được người dùng nhập vào |
onhaschange | kịch bản | Kích hoạt khi tài liệu có thay đổi |
oninput | kịch bản | Kích hoạt khi một phần tử được người dùng nhập vào |
oninvalid | kịch bản | Kích hoạt khi một phần tử không hợp lệ |
onkeydown | kịch bản | Kích hoạt khi một phím được nhấn |
onkeypress | kịch bản | Kích hoạt khi nhấn và thả một phím |
onkeyup | kịch bản | Kích hoạt khi khóa được phát hành |
đang tải | kịch bản | Kích hoạt khi tải tài liệu |
onloadeddata | kịch bản | Kích hoạt khi dữ liệu phương tiện được tải |
onloadedmetadata | kịch bản | Kích hoạt khi thời lượng và dữ liệu phương tiện khác của phần tử phương tiện được tải |
onloadstart | kịch bản | Kích hoạt khi trình duyệt bắt đầu tải dữ liệu phương tiện |
trên tàu | kịch bản | Kích hoạt khi thông báo được kích hoạt |
onmousedown | kịch bản | Kích hoạt khi nhấn nút chuột |
onmousemove | kịch bản | Kích hoạt khi con trỏ chuột di chuyển |
onmouseout | kịch bản | Kích hoạt khi con trỏ chuột di chuyển ra khỏi một phần tử |
onmouseover | kịch bản | Kích hoạt khi con trỏ chuột di chuyển qua một phần tử |
onmouseup | kịch bản | Kích hoạt khi thả nút chuột |
onmousewheel | kịch bản | Kích hoạt khi con lăn chuột đang được xoay |
onoffline | kịch bản | Kích hoạt khi tài liệu ngoại tuyến |
onoine | kịch bản | Kích hoạt khi tài liệu trực tuyến |
ononline | kịch bản | Kích hoạt khi tài liệu trực tuyến |
onpagehide | kịch bản | Kích hoạt khi cửa sổ bị ẩn |
onpageshow | kịch bản | Kích hoạt khi cửa sổ hiển thị |
tạm dừng | kịch bản | Kích hoạt khi dữ liệu phương tiện bị tạm dừng |
onplay | kịch bản | Kích hoạt khi dữ liệu phương tiện sẽ bắt đầu phát |
chơi trực tuyến | kịch bản | Kích hoạt khi dữ liệu phương tiện bắt đầu phát |
onpopstate | kịch bản | Kích hoạt khi lịch sử của cửa sổ thay đổi |
sự vi phạm | kịch bản | Kích hoạt khi trình duyệt đang tìm nạp dữ liệu phương tiện |
onratechange | kịch bản | Kích hoạt khi tốc độ phát của dữ liệu phương tiện thay đổi |
onreadystatechange | kịch bản | Kích hoạt khi trạng thái sẵn sàng thay đổi |
onredo | kịch bản | Kích hoạt khi tài liệu thực hiện làm lại |
kích thước lớn | kịch bản | Kích hoạt khi cửa sổ được thay đổi kích thước |
cuộc dạo chơi | kịch bản | Kích hoạt khi thanh cuộn của một phần tử đang được cuộn |
onseeked | kịch bản | Kích hoạt khi thuộc tính tìm kiếm của phần tử phương tiện không còn đúng nữa và quá trình tìm kiếm đã kết thúc |
onseeking | kịch bản | Kích hoạt khi thuộc tính tìm kiếm của phần tử phương tiện là đúng và việc tìm kiếm đã bắt đầu |
chọn | kịch bản | Kích hoạt khi một phần tử được chọn |
đã cài đặt | kịch bản | Kích hoạt khi có lỗi khi tìm nạp dữ liệu phương tiện |
sự tấn công | kịch bản | Kích hoạt khi tải tài liệu |
gửi đi | kịch bản | Kích hoạt khi biểu mẫu được gửi |
phụ thuộc vào | kịch bản | Kích hoạt khi trình duyệt đang tìm nạp dữ liệu phương tiện, nhưng đã dừng trước khi toàn bộ tệp phương tiện được tìm nạp |
ontimeupdate | kịch bản | Kích hoạt khi phương tiện thay đổi vị trí phát |
onundo | kịch bản | Kích hoạt khi tài liệu thực hiện hoàn tác |
onunload | kịch bản | Kích hoạt khi người dùng rời khỏi tài liệu |
onvolumechange | kịch bản | Kích hoạt khi phương tiện thay đổi âm lượng, cũng như khi âm lượng được đặt thành "tắt tiếng" |
chờ đợi | kịch bản | Kích hoạt khi phương tiện đã ngừng phát, nhưng dự kiến sẽ tiếp tục |
Web Forms 2.0 là phần mở rộng cho các tính năng của biểu mẫu trong HTML4. Các phần tử và thuộc tính của biểu mẫu trong HTML5 cung cấp mức độ đánh dấu ngữ nghĩa cao hơn HTML4 và giải phóng chúng ta khỏi rất nhiều kiểu tạo và tạo tập lệnh tẻ nhạt vốn được yêu cầu trong HTML4.
Phần tử <input> trong HTML4
Các phần tử đầu vào HTML4 sử dụng type để chỉ định kiểu dữ liệu. HTML4 cung cấp các kiểu sau:
Sr.No. | Loại & Mô tả |
---|---|
1 | text Trường văn bản dạng tự do, trên danh nghĩa không có ngắt dòng. |
2 | password Trường văn bản dạng tự do cho thông tin nhạy cảm, trên danh nghĩa không có ngắt dòng. |
3 | checkbox Tập hợp không hoặc nhiều giá trị từ danh sách được xác định trước. |
4 | radio Một giá trị được liệt kê. |
5 | submit Một biểu mẫu nút miễn phí bắt đầu gửi biểu mẫu. |
6 | file Một tệp tùy ý với kiểu MIME và tùy chọn tên tệp. |
7 | image Một tọa độ, liên quan đến kích thước của một hình ảnh cụ thể, với ngữ nghĩa bổ sung rằng nó phải là giá trị cuối cùng được chọn và bắt đầu gửi biểu mẫu. |
số 8 | hidden Một chuỗi tùy ý thường không được hiển thị cho người dùng. |
9 | select Một giá trị được liệt kê, giống như kiểu radio. |
10 | textarea Trường văn bản dạng tự do, trên danh nghĩa không có giới hạn ngắt dòng. |
11 | button Một dạng nút miễn phí có thể bắt đầu bất kỳ sự kiện nào liên quan đến nút. |
Sau đây là ví dụ đơn giản về việc sử dụng nhãn, nút radio và nút gửi -
...
<form action = "http://example.com/cgiscript.pl" method = "post">
<p>
<label for = "firstname">first name: </label>
<input type = "text" id = "firstname"><br />
<label for = "lastname">last name: </label>
<input type = "text" id = "lastname"><br />
<label for = "email">email: </label>
<input type = "text" id = "email"><br>
<input type = "radio" name = "sex" value = "male"> Male<br>
<input type = "radio" name = "sex" value = "female"> Female<br>
<input type = "submit" value = "send"> <input type = "reset">
</p>
</form>
...
Phần tử <input> trong HTML5
Ngoài các thuộc tính được đề cập ở trên, các phần tử đầu vào HTML5 đã giới thiệu một số giá trị mới cho typethuộc tính. Chúng được liệt kê dưới đây.
NOTE - Hãy thử tất cả các ví dụ sau bằng cách sử dụng phiên bản mới nhất của Opera trình duyệt.
Sr.No. | Loại & Mô tả |
---|---|
1 | ngày giờ Ngày và giờ (năm, tháng, ngày, giờ, phút, giây, phần nhỏ của giây) được mã hóa theo ISO 8601 với múi giờ được đặt thành UTC. |
2 | datetime-local Ngày và giờ (năm, tháng, ngày, giờ, phút, giây, phần nhỏ của giây) được mã hóa theo ISO 8601, không có thông tin múi giờ. |
3 | ngày Ngày (năm, tháng, ngày) được mã hóa theo ISO 8601. |
4 | tháng Ngày bao gồm một năm và một tháng được mã hóa theo ISO 8601. |
5 | tuần Ngày bao gồm một năm và một số tuần được mã hóa theo ISO 8601. |
6 | thời gian Thời gian (giờ, phút, giây, giây phân số) được mã hóa theo ISO 8601. |
7 | con số Nó chỉ chấp nhận giá trị số. Thuộc tính step chỉ định độ chính xác, mặc định là 1. |
số 8 | phạm vi Loại phạm vi được sử dụng cho các trường đầu vào phải chứa giá trị từ một phạm vi số. |
9 | e-mail Nó chỉ chấp nhận giá trị email. Kiểu này được sử dụng cho các trường nhập phải chứa địa chỉ e-mail. Nếu bạn cố gắng gửi một văn bản đơn giản, nó buộc chỉ nhập địa chỉ email ở định dạng [email protected]. |
10 | url Nó chỉ chấp nhận giá trị URL. Loại này được sử dụng cho các trường nhập phải chứa địa chỉ URL. Nếu bạn cố gắng gửi một văn bản đơn giản, nó buộc chỉ nhập địa chỉ URL ở định dạng http://www.example.com hoặc ở định dạng http://example.com. |
Phần tử <output>
HTML5 đã giới thiệu một phần tử mới <output> được sử dụng để biểu diễn kết quả của các loại đầu ra khác nhau, chẳng hạn như đầu ra được viết bởi một tập lệnh.
Bạn có thể dùng forđể chỉ định mối quan hệ giữa phần tử đầu ra và các phần tử khác trong tài liệu đã ảnh hưởng đến phép tính (ví dụ: dưới dạng đầu vào hoặc tham số). Giá trị của thuộc tính for là danh sách ID của các phần tử khác được phân tách bằng dấu cách.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function showResult() {
x = document.forms["myform"]["newinput"].value;
document.forms["myform"]["result"].value = x;
}
</script>
</head>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
Enter a value : <input type = "text" name = "newinput" />
<input type = "button" value = "Result" onclick = "showResult();" />
<output name = "result"></output>
</form>
</body>
</html>
Nó sẽ tạo ra kết quả sau:
Thuộc tính giữ chỗ
HTML5 đã giới thiệu một thuộc tính mới có tên là placeholder. Thuộc tính này trên các phần tử <input> và <textareosystem cung cấp gợi ý cho người dùng về những gì có thể được nhập vào trường. Văn bản giữ chỗ không được chứa ký tự xuống dòng hoặc nguồn cấp dữ liệu dòng.
Đây là cú pháp đơn giản cho thuộc tính trình giữ chỗ -
<input type = "text" name = "search" placeholder = "search the web"/>
Thuộc tính này chỉ được hỗ trợ bởi các phiên bản mới nhất của trình duyệt Mozilla, Safari và Crome.
<!DOCTYPE HTML>
<html>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get">
Enter email : <input type = "email" name = "newinput"
placeholder = "[email protected]"/>
<input type = "submit" value = "submit" />
</form>
</body>
</html>
Điều này sẽ tạo ra kết quả sau:
Thuộc tính lấy nét tự động
Đây là một mẫu một bước đơn giản, được lập trình dễ dàng bằng JavaScript tại thời điểm tải tài liệu, tự động tập trung vào một trường biểu mẫu cụ thể.
HTML5 đã giới thiệu một thuộc tính mới có tên là autofocus sẽ được sử dụng như sau:
<input type = "text" name = "search" autofocus/>
Thuộc tính này chỉ được hỗ trợ bởi các phiên bản mới nhất của trình duyệt Mozilla, Safari và Chrome.
<!DOCTYPE HTML>
<html>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get">
Enter email : <input type = "text" name = "newinput" autofocus/>
<p>Try to submit using Submit button</p>
<input type = "submit" value = "submit" />
</form>
</body>
</html>
Thuộc tính bắt buộc
Bây giờ bạn không cần phải có JavaScript để xác thực phía máy khách như hộp văn bản trống sẽ không bao giờ được gửi vì HTML5 đã giới thiệu một thuộc tính mới được gọi là required sẽ được sử dụng như sau và sẽ đòi hỏi phải có một giá trị -
<input type = "text" name = "search" required/>
Thuộc tính này chỉ được hỗ trợ bởi các phiên bản mới nhất của trình duyệt Mozilla, Safari và Chrome.
<!DOCTYPE HTML>
<html>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get">
Enter email : <input type = "text" name = "newinput" required/>
<p>Try to submit using Submit button</p>
<input type = "submit" value = "submit" />
</form>
</body>
</html>
Nó sẽ tạo ra kết quả sau:
SVG là viết tắt của Scan đảm Vector Graphics và nó là một ngôn ngữ để mô tả các ứng dụng đồ họa và đồ họa 2D trong XML và XML sau đó được trình xem SVG hiển thị.
SVG chủ yếu hữu ích cho các biểu đồ loại vectơ như biểu đồ hình tròn, biểu đồ hai chiều trong hệ tọa độ X, Y, v.v.
SVG đã trở thành Khuyến nghị của W3C 14. Tháng 1 năm 2003 và bạn có thể kiểm tra phiên bản mới nhất của đặc tả SVG tại Đặc điểm kỹ thuật SVG .
Xem tệp SVG
Hầu hết các trình duyệt web có thể hiển thị SVG giống như chúng có thể hiển thị PNG, GIF và JPG. Người dùng Internet Explorer có thể phải cài đặt Adobe SVG Viewer để có thể xem SVG trong trình duyệt.
Nhúng SVG trong HTML5
HTML5 cho phép nhúng SVG trực tiếp bằng cách sử dụng <svg>...</svg> thẻ có cú pháp đơn giản sau:
<svg xmlns = "http://www.w3.org/2000/svg">
...
</svg>
Firefox 3.7 cũng đã giới thiệu một tùy chọn cấu hình ("about: config"), nơi bạn có thể bật HTML5 bằng các bước sau:
Kiểu about:config trên thanh địa chỉ Firefox của bạn.
Nhấp vào "Tôi sẽ cẩn thận, tôi hứa!" trên thông báo cảnh báo xuất hiện (và đảm bảo bạn tuân thủ nó!).
Kiểu html5.enable vào thanh bộ lọc ở đầu trang.
Hiện tại, nó sẽ bị vô hiệu hóa, vì vậy hãy nhấp vào nó để chuyển giá trị thành true.
Bây giờ trình phân tích cú pháp HTML5 của Firefox của bạn sẽ được bật và bạn có thể thử nghiệm với các ví dụ sau.
HTML5 - Vòng kết nối SVG
Sau đây là phiên bản HTML5 của một ví dụ SVG sẽ vẽ một vòng tròn bằng cách sử dụng thẻ <circle> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Circle</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
</svg>
</body>
</html>
Điều này sẽ tạo ra kết quả sau trong phiên bản Firefox mới nhất được kích hoạt HTML5.
HTML5 - Hình chữ nhật SVG
Sau đây là phiên bản HTML5 của một ví dụ SVG sẽ vẽ một hình chữ nhật bằng cách sử dụng thẻ <rect> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Rectangle</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<rect id = "redrect" width = "300" height = "100" fill = "red" />
</svg>
</body>
</html>
Điều này sẽ tạo ra kết quả sau trong phiên bản Firefox mới nhất được kích hoạt HTML5.
HTML5 - Dòng SVG
Sau đây là phiên bản HTML5 của ví dụ SVG sẽ vẽ một đường bằng thẻ <line> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Line</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<line x1 = "0" y1 = "0" x2 = "200" y2 = "100"
style = "stroke:red;stroke-width:2"/>
</svg>
</body>
</html>
Bạn có thể dùng style thuộc tính cho phép bạn thiết lập thông tin kiểu bổ sung như nét vẽ và màu tô, độ rộng của nét vẽ, v.v.
Điều này sẽ tạo ra kết quả sau trong phiên bản Firefox mới nhất được kích hoạt HTML5.
HTML5 - SVG Ellipse
Sau đây là phiên bản HTML5 của một ví dụ SVG sẽ vẽ một hình elip bằng cách sử dụng thẻ <ellipse> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Ellipse</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill = "red" />
</svg>
</body>
</html>
Điều này sẽ tạo ra kết quả sau trong phiên bản Firefox mới nhất được kích hoạt HTML5.
HTML5 - Đa giác SVG
Sau đây là phiên bản HTML5 của một ví dụ SVG sẽ vẽ một đa giác bằng cách sử dụng thẻ <polygon> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Polygon</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<polygon points = "20,10 300,20, 170,50" fill = "red" />
</svg>
</body>
</html>
Điều này sẽ tạo ra kết quả sau trong phiên bản Firefox mới nhất được kích hoạt HTML5.
HTML5 - SVG Polyline
Sau đây là phiên bản HTML5 của một ví dụ SVG sẽ vẽ một polyline bằng cách sử dụng thẻ <polyline> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Polyline</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<polyline points = "0,0 0,20 20,20 20,40 40,40 40,60" fill = "red" />
</svg>
</body>
</html>
Điều này sẽ tạo ra kết quả sau trong phiên bản Firefox mới nhất được kích hoạt HTML5.
HTML5 - SVG Gradients
Sau đây là phiên bản HTML5 của một ví dụ SVG sẽ vẽ một hình elip bằng cách sử dụng thẻ <ellipse> và sẽ sử dụng thẻ <radialGradient> để xác định một gradient xuyên tâm SVG.
Tương tự, bạn có thể sử dụng thẻ <linearGradient> để tạo độ dốc tuyến tính SVG.
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Gradient Ellipse</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient" cx = "50%" cy = "50%" r = "50%" fx = "50%"
fy = "50%">
<stop offset = "0%" style = "stop-color:rgb(200,200,200); stop-opacity:0"/>
<stop offset = "100%" style = "stop-color:rgb(0,0,255); stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx = "100" cy = "50" rx = "100" ry = "50"
style = "fill:url(#gradient)" />
</svg>
</body>
</html>
Điều này sẽ tạo ra kết quả sau trong phiên bản Firefox mới nhất được kích hoạt HTML5.
HTML5 - SVG Star
Sau đây là phiên bản HTML5 của một ví dụ SVG sẽ vẽ một ngôi sao bằng cách sử dụng thẻ <polygon>.
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Star</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<polygon points = "100,10 40,180 190,60 10,60 160,180" fill = "red"/>
</svg>
</body>
</html>
Điều này sẽ tạo ra kết quả sau trong phiên bản Firefox mới nhất được kích hoạt HTML5.
Cú pháp HTML của HTML5 cho phép các phần tử MathML được sử dụng bên trong tài liệu bằng các thẻ <math> ... </math>.
Hầu hết các trình duyệt web có thể hiển thị các thẻ MathML. Nếu trình duyệt của bạn không hỗ trợ MathML, thì tôi khuyên bạn nên sử dụng phiên bản Firefox mới nhất.
Ví dụ về MathML
Sau đây là một tài liệu HTML5 hợp lệ với MathML -
<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<title>Pythagorean theorem</title>
</head>
<body>
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo> = </mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
</body>
</html>
Điều này sẽ tạo ra kết quả sau:
Sử dụng các ký tự MathML
Hãy xem xét, sau đây là đánh dấu sử dụng các ký tự & InvisibleTimes; -
<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<title>MathML Examples</title>
</head>
<body>
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mrow>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mrow>
<mn>4</mn>
<mo></mo>
<mi>x</mi>
</mrow>
<mo>+</mo>
<mn>4</mn>
</mrow>
<mo>=</mo>
<mn>0</mn>
</mrow>
</math>
</body>
</html>
Điều này sẽ tạo ra kết quả sau. Nếu bạn không thể thấy kết quả thích hợp như x 2 + 4x + 4 = 0, hãy sử dụng phiên bản Firefox 3.5 trở lên.
Điều này sẽ tạo ra kết quả sau:
Ví dụ về trình bày ma trận
Hãy xem xét ví dụ sau đây sẽ được sử dụng để biểu diễn một ma trận 2x2 đơn giản:
<!doctype html>
<html>
<head>
<meta charset = "UTF-8">
<title>MathML Examples</title>
</head>
<body>
<math xmlns = "http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>A</mi>
<mo>=</mo>
<mfenced open = "[" close="]">
<mtable>
<mtr>
<mtd><mi>x</mi></mtd>
<mtd><mi>y</mi></mtd>
</mtr>
<mtr>
<mtd><mi>z</mi></mtd>
<mtd><mi>w</mi></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>
</body>
</html>
Điều này sẽ tạo ra kết quả sau:
Điều này sẽ tạo ra kết quả sau. Nếu bạn không thể thấy kết quả phù hợp, hãy sử dụng phiên bản Firefox 3.5 trở lên.
HTML5 giới thiệu hai cơ chế, tương tự như cookie phiên HTTP, để lưu trữ dữ liệu có cấu trúc ở phía máy khách và để khắc phục các nhược điểm sau.
Cookie được bao gồm trong mọi yêu cầu HTTP, do đó làm chậm ứng dụng web của bạn bằng cách truyền cùng một dữ liệu.
Cookie được bao gồm trong mọi yêu cầu HTTP, do đó gửi dữ liệu không được mã hóa qua internet.
Cookie được giới hạn trong khoảng 4 KB dữ liệu. Không đủ để lưu trữ dữ liệu cần thiết.
Hai kho là session storage và local storage và chúng sẽ được sử dụng để xử lý các tình huống khác nhau.
Các phiên bản mới nhất của hầu hết mọi trình duyệt đều hỗ trợ HTML5 Storage bao gồm cả Internet Explorer.
Lưu trữ phiên
Bộ lưu trữ phiên được thiết kế cho các tình huống trong đó người dùng đang thực hiện một giao dịch duy nhất, nhưng có thể thực hiện nhiều giao dịch trong các cửa sổ khác nhau cùng một lúc.
Thí dụ
Ví dụ: nếu người dùng mua vé máy bay ở hai cửa sổ khác nhau, sử dụng cùng một trang web. Nếu trang web sử dụng cookie để theo dõi người dùng đã mua vé nào, thì khi người dùng nhấp từ trang này sang trang khác trong cả hai cửa sổ, vé hiện đang được mua sẽ "rò rỉ" từ cửa sổ này sang cửa sổ khác, có khả năng khiến người dùng mua hai vé cho cùng một chuyến bay mà không thực sự để ý.
HTML5 giới thiệu thuộc tính sessionStorage sẽ được các trang web sử dụng để thêm dữ liệu vào bộ nhớ phiên và nó sẽ có thể truy cập vào bất kỳ trang nào từ cùng một trang web được mở trong cửa sổ đó, tức làsession và ngay sau khi bạn đóng cửa sổ, phiên sẽ bị mất.
Sau đây là đoạn mã sẽ đặt một biến phiên và truy cập vào biến đó:
<!DOCTYPE HTML>
<html>
<body>
<script type = "text/javascript">
if( sessionStorage.hits ) {
sessionStorage.hits = Number(sessionStorage.hits) +1;
} else {
sessionStorage.hits = 1;
}
document.write("Total Hits :" + sessionStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>
Điều này sẽ tạo ra kết quả sau:
Lưu trữ cục bộ
Bộ nhớ cục bộ được thiết kế để lưu trữ trên nhiều cửa sổ và kéo dài ngoài phiên hiện tại. Cụ thể, các ứng dụng Web có thể muốn lưu trữ hàng megabyte dữ liệu người dùng, chẳng hạn như toàn bộ tài liệu do người dùng tạo hoặc hộp thư của người dùng, ở phía máy khách vì lý do hiệu suất.
Một lần nữa, cookie không xử lý tốt trường hợp này, vì chúng được truyền theo mọi yêu cầu.
Thí dụ
HTML5 giới thiệu thuộc tính localStorage sẽ được sử dụng để truy cập vùng lưu trữ cục bộ của trang mà không có giới hạn thời gian và vùng lưu trữ cục bộ này sẽ khả dụng bất cứ khi nào bạn sử dụng trang đó.
Sau đây là đoạn mã sẽ đặt một biến lưu trữ cục bộ và truy cập vào biến đó mỗi khi trang này được truy cập, kể cả lần sau, khi bạn mở cửa sổ -
<!DOCTYPE HTML>
<html>
<body>
<script type = "text/javascript">
if( localStorage.hits ) {
localStorage.hits = Number(localStorage.hits) +1;
} else {
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>
Điều này sẽ tạo ra kết quả sau:
Xóa bộ nhớ web
Lưu trữ dữ liệu nhạy cảm trên máy cục bộ có thể nguy hiểm và có thể để lại lỗ hổng bảo mật.
Các dữ liệu lưu trữ phiên sẽ bị xóa bởi các trình duyệt ngay lập tức sau khi phiên giao dịch bị chấm dứt.
Để xóa cài đặt bộ nhớ cục bộ, bạn cần gọi localStorage.remove('key'); trong đó 'key' là khóa của giá trị bạn muốn xóa. Nếu bạn muốn xóa tất cả cài đặt, bạn cần gọilocalStorage.clear() phương pháp.
Sau đây là đoạn mã sẽ xóa hoàn toàn bộ nhớ cục bộ -
<!DOCTYPE HTML>
<html>
<body>
<script type = "text/javascript">
localStorage.clear();
// Reset number of hits.
if( localStorage.hits ) {
localStorage.hits = Number(localStorage.hits) +1;
} else {
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>Refreshing the page would not to increase hit counter.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>
Điều này sẽ tạo ra kết quả sau:
API cơ sở dữ liệu Web SQL thực sự không phải là một phần của đặc tả HTML5 nhưng nó là một đặc tả riêng giới thiệu một tập hợp các API để thao tác cơ sở dữ liệu phía máy khách bằng cách sử dụng SQL.
Tôi cho rằng bạn là một nhà phát triển web tuyệt vời và nếu đúng như vậy thì chắc chắn bạn sẽ hiểu rõ về các khái niệm SQL và RDBMS. Nếu bạn vẫn muốn có một phiên với SQL sau đó, bạn có thể xem qua Hướng dẫn SQL của chúng tôi .
Cơ sở dữ liệu Web SQL sẽ hoạt động trong phiên bản Safari, Chrome và Opera mới nhất.
Các phương pháp cốt lõi
Có ba phương pháp cốt lõi sau đây được xác định trong thông số kỹ thuật mà tôi sẽ trình bày trong hướng dẫn này -
openDatabase - Phương pháp này tạo đối tượng cơ sở dữ liệu bằng cách sử dụng cơ sở dữ liệu hiện có hoặc tạo mới.
transaction - Phương pháp này cung cấp cho chúng tôi khả năng kiểm soát giao dịch và thực hiện cam kết hoặc khôi phục dựa trên tình huống.
executeSql - Phương thức này được sử dụng để thực thi truy vấn SQL thực tế.
Mở cơ sở dữ liệu
Các OpenDatabase phương pháp chăm sóc mở một cơ sở dữ liệu nếu nó đã tồn tại, phương pháp này sẽ tạo ra nó nếu nó đã không tồn tại.
Để tạo và mở cơ sở dữ liệu, hãy sử dụng đoạn mã sau:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
Phương thức trên lấy năm tham số sau:
- Tên cơ sở dữ liệu
- Số phiên bản
- Mô tả văn bản
- Kích thước của cơ sở dữ liệu
- Gọi lại tạo
Đối số cuối cùng và thứ 5, lệnh gọi lại tạo sẽ được gọi nếu cơ sở dữ liệu đang được tạo. Tuy nhiên, không có tính năng này, các cơ sở dữ liệu vẫn đang được tạo nhanh chóng và được tạo phiên bản chính xác.
Thực thi truy vấn
Để thực hiện một truy vấn, bạn sử dụng hàm database.transaction (). Hàm này cần một đối số duy nhất, đây là một hàm đảm nhận việc thực thi truy vấn như sau:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});
Truy vấn trên sẽ tạo một bảng có tên LOGS trong cơ sở dữ liệu 'mydb'.
INSERT hoạt động
Để tạo các yêu cầu vào bảng, chúng tôi thêm truy vấn SQL đơn giản trong ví dụ trên như sau:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});
Chúng ta có thể chuyển các giá trị động trong khi tạo nhập như sau:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?'), [e_id, e_log];
});
Đây e_id và e_log là các biến bên ngoài, và executeSql ánh xạ từng mục trong đối số mảng thành "?" s.
ĐỌC hoạt động
Để đọc các bản ghi hiện có, chúng tôi sử dụng một cuộc gọi lại để thu thập các kết quả như sau:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++) {
alert(results.rows.item(i).log );
}
}, null);
});
Ví dụ cuối cùng
Vì vậy, cuối cùng, chúng ta hãy giữ ví dụ này trong một tài liệu HTML5 chính thức như sau và cố gắng chạy nó bằng trình duyệt Safari.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
msg = '<p>Log message created and row inserted.</p>';
document.querySelector('#status').innerHTML = msg;
})
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>Found rows: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++) {
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
</head>
<body>
<div id = "status" name = "status">Status Message</div>
</body>
</html>
Điều này sẽ tạo ra kết quả sau:
Các ứng dụng web thông thường tạo ra các sự kiện được gửi đến máy chủ web. Ví dụ: một cú nhấp chuột đơn giản vào một liên kết yêu cầu một trang mới từ máy chủ.
Loại sự kiện đang truyền từ trình duyệt web đến máy chủ web có thể được gọi là sự kiện do máy khách gửi.
Cùng với HTML5, ứng dụng web WHATWG 1.0 giới thiệu các sự kiện truyền từ máy chủ web đến trình duyệt web và chúng được gọi là Sự kiện do máy chủ gửi (SSE). Sử dụng SSE, bạn có thể đẩy các sự kiện DOM liên tục từ máy chủ web của mình đến trình duyệt của khách truy cập.
Phương pháp truyền trực tuyến sự kiện mở ra một kết nối liên tục với máy chủ, gửi dữ liệu đến máy khách khi có thông tin mới, loại bỏ nhu cầu thăm dò liên tục.
Các sự kiện do máy chủ gửi chuẩn hóa cách chúng tôi truyền dữ liệu từ máy chủ đến máy khách.
Ứng dụng web cho SSE
Để sử dụng Sự kiện do máy chủ gửi trong ứng dụng web, bạn cần thêm phần tử <eventsource> vào tài liệu.
Các src thuộc tính của phần tử <eventsource> phải trỏ đến một URL sẽ cung cấp kết nối HTTP liên tục để gửi luồng dữ liệu có chứa các sự kiện.
URL sẽ trỏ đến một PHP, PERL hoặc bất kỳ tập lệnh Python nào sẽ đảm nhận việc gửi dữ liệu sự kiện một cách nhất quán. Sau đây là một ví dụ đơn giản về ứng dụng web mong đợi thời gian máy chủ.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
/* Define event handling logic here */
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker">
<TIME>
</div>
</body>
</html>
Tập lệnh phía máy chủ cho SSE
Một tập lệnh phía máy chủ sẽ gửi Content-typetiêu đề xác định loại text / event-stream như sau.
print "Content-Type: text/event-stream\n\n";
Sau khi thiết lập Loại nội dung, tập lệnh phía máy chủ sẽ gửi Event: thẻ theo sau là tên sự kiện. Ví dụ sau sẽ gửi Server-Time dưới dạng tên sự kiện được kết thúc bởi một ký tự dòng mới.
print "Event: server-time\n";
Bước cuối cùng là gửi dữ liệu sự kiện bằng Data: thẻ sẽ được theo sau bởi số nguyên của giá trị chuỗi được kết thúc bằng một ký tự dòng mới như sau:
$time = localtime(); print "Data: $time\n";
Cuối cùng, sau đây là hoàn chỉnh ticker.cgi được viết bằng Perl -
#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true) {
print "Event: server-time\n";
$time = localtime(); print "Data: $time\n";
sleep(5);
}
Xử lý các sự kiện do máy chủ gửi
Hãy để chúng tôi sửa đổi ứng dụng web của mình để xử lý các sự kiện do máy chủ gửi. Sau đây là ví dụ cuối cùng.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
document.getElementsByTagName("eventsource")[0].addEventListener("server-time",
eventHandler, false);
function eventHandler(event) {
// Alert time sent by the server
document.querySelector('#ticker').innerHTML = event.data;
}
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker" name = "ticker">
[TIME]
</div>
</body>
</html>
Trước khi thử nghiệm các sự kiện do Máy chủ gửi, tôi khuyên bạn nên đảm bảo rằng trình duyệt web của bạn hỗ trợ khái niệm này.
WebSockets là công nghệ giao tiếp hai chiều thế hệ tiếp theo dành cho các ứng dụng web hoạt động trên một ổ cắm duy nhất và được hiển thị thông qua giao diện JavaScript trong các trình duyệt tuân thủ HTML 5.
Khi bạn có kết nối Web Socket với máy chủ web, bạn có thể gửi dữ liệu từ trình duyệt đến máy chủ bằng cách gọi send() và nhận dữ liệu từ máy chủ đến trình duyệt bằng một onmessage xử lý sự kiện.
Sau đây là API tạo một đối tượng WebSocket mới.
var Socket = new WebSocket(url, [protocal] );
Đây là đối số đầu tiên, url, chỉ định URL để kết nối. Thuộc tính thứ hai, giao thức là tùy chọn và nếu có, chỉ định giao thức con mà máy chủ phải hỗ trợ để kết nối thành công.
Thuộc tính WebSocket
Sau đây là thuộc tính của đối tượng WebSocket. Giả sử chúng ta đã tạo đối tượng Socket như đã đề cập ở trên -
Sr.No. | Thuộc tính & Mô tả |
---|---|
1 | Socket.readyState Thuộc tính readyState chỉ đọc biểu thị trạng thái của kết nối. Nó có thể có các giá trị sau:
|
2 | Socket.bufferedAmount Thuộc tính chỉ đọc bufferedAmount đại diện cho số byte văn bản UTF-8 đã được xếp hàng đợi bằng cách sử dụng phương thức send (). |
Sự kiện WebSocket
Sau đây là các sự kiện liên quan đến đối tượng WebSocket. Giả sử chúng ta đã tạo đối tượng Socket như đã đề cập ở trên -
Biến cố | Xử lý sự kiện | Sự miêu tả |
---|---|---|
mở | Socket.onopen | Sự kiện này xảy ra khi kết nối ổ cắm được thiết lập. |
thông điệp | Socket.onmessage | Sự kiện này xảy ra khi máy khách nhận dữ liệu từ máy chủ. |
lỗi | Socket.onerror | Sự kiện này xảy ra khi có bất kỳ lỗi nào trong giao tiếp. |
đóng | Socket.onclose | Sự kiện này xảy ra khi kết nối bị đóng. |
Phương thức WebSocket
Sau đây là các phương thức được liên kết với đối tượng WebSocket. Giả sử chúng ta đã tạo đối tượng Socket như đã đề cập ở trên -
Sr.No. | Phương pháp & Mô tả |
---|---|
1 | Socket.send() Phương thức gửi (dữ liệu) truyền dữ liệu bằng cách sử dụng kết nối. |
2 | Socket.close() Phương thức close () sẽ được sử dụng để chấm dứt bất kỳ kết nối hiện có nào. |
Ví dụ về WebSocket
WebSocket là một ổ cắm TCP hai chiều tiêu chuẩn giữa máy khách và máy chủ. Ổ cắm bắt đầu dưới dạng kết nối HTTP và sau đó "Nâng cấp" lên ổ cắm TCP sau một lần bắt tay HTTP. Sau cái bắt tay, một trong hai bên có thể gửi dữ liệu.
Mã HTML & JavaScript phía Máy khách
Tại thời điểm viết bài hướng dẫn này, chỉ có một số trình duyệt web hỗ trợ giao diện WebSocket (). Bạn có thể thử ví dụ sau với phiên bản mới nhất của Chrome, Mozilla, Opera và Safari.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function WebSocketTest() {
if ("WebSocket" in window) {
alert("WebSocket is supported by your Browser!");
// Let us open a web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function() {
// Web Socket is connected, send data using send()
ws.send("Message to send");
alert("Message is sent...");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("Message is received...");
};
ws.onclose = function() {
// websocket is closed.
alert("Connection is closed...");
};
} else {
// The browser doesn't support WebSocket
alert("WebSocket NOT supported by your Browser!");
}
}
</script>
</head>
<body>
<div id = "sse">
<a href = "javascript:WebSocketTest()">Run WebSocket</a>
</div>
</body>
</html>
Cài đặt pywebsocket
Trước khi kiểm tra chương trình khách trên, bạn cần một máy chủ hỗ trợ WebSocket. Tải xuống mod_pywebsocket-xxxtar.gz từ pywebsocket nhằm mục đích cung cấp phần mở rộng Web Socket cho Máy chủ Apache HTTP và cài đặt nó theo các bước sau.
Giải nén và gỡ bỏ tệp đã tải xuống.
Đi vào bên trong pywebsocket-x.x.x/src/ danh mục.
$ python setup.py bản dựng
$ sudo python setup.py cài đặt
Sau đó, đọc tài liệu bằng cách -
- $ pydoc mod_pywebsocket
Thao tác này sẽ cài đặt nó vào môi trường python của bạn.
Khởi động máy chủ
Đi đến pywebsocket-x.x.x/src/mod_pywebsocket thư mục và chạy lệnh sau:
$sudo python standalone.py -p 9998 -w ../example/
Thao tác này sẽ bắt đầu lắng nghe máy chủ ở cổng 9998 và sử dụng handlers thư mục được chỉ định bởi tùy chọn -w nơi echo_wsh.py của chúng tôi cư trú.
Bây giờ bằng cách sử dụng trình duyệt Chrome, hãy mở tệp html mà bạn đã tạo lúc đầu. Nếu trình duyệt của bạn hỗ trợ WebSocket (), thì bạn sẽ nhận được cảnh báo cho biết trình duyệt của bạn hỗ trợ WebSocket và cuối cùng khi bạn nhấp vào "Chạy WebSocket", bạn sẽ nhận được thông báo Tạm biệt do tập lệnh máy chủ gửi.
Phần tử HTML5 <canvas> cung cấp cho bạn một cách dễ dàng và mạnh mẽ để vẽ đồ họa bằng JavaScript. Nó có thể được sử dụng để vẽ đồ thị, tạo bố cục ảnh hoặc tạo các hoạt ảnh đơn giản (và không đơn giản như vậy).
Đây là một phần tử <canvas> đơn giản chỉ có hai thuộc tính cụ thể width và height cộng với tất cả các thuộc tính HTML5 cốt lõi như id, tên và lớp, v.v.
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
Bạn có thể dễ dàng tìm thấy phần tử <canvas> đó trong DOM bằng phương thức getElementById () như sau:
var canvas = document.getElementById("mycanvas");
Hãy để chúng tôi xem một ví dụ đơn giản về cách sử dụng phần tử <canvas> trong tài liệu HTML5.
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
</body>
</html>
Điều này sẽ tạo ra kết quả sau:
Bối cảnh kết xuất
<canvas> ban đầu trống và để hiển thị một cái gì đó, trước tiên một script cần truy cập vào ngữ cảnh kết xuất và vẽ trên đó.
Phần tử canvas có một phương thức DOM được gọi là getContext, được sử dụng để lấy bối cảnh kết xuất và các chức năng vẽ của nó. Hàm này nhận một tham số, loại ngữ cảnh2d.
Sau đây là mã để có được ngữ cảnh cần thiết cùng với kiểm tra xem trình duyệt của bạn có hỗ trợ phần tử <canvas> hay không -
var canvas = document.getElementById("mycanvas");
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
Hỗ trợ trình duyệt
Các phiên bản mới nhất của Firefox, Safari, Chrome và Opera đều hỗ trợ HTML5 Canvas nhưng IE8 không hỗ trợ canvas nguyên bản.
Bạn có thể sử dụng ExplorerCanvas để hỗ trợ canvas thông qua Internet Explorer. Bạn chỉ cần bao gồm JavaScript này như sau:
<!--[if IE]><script src = "excanvas.js"></script><![endif]-->
Ví dụ về Canvas HTML5
Hướng dẫn này bao gồm các ví dụ sau liên quan đến phần tử HTML5 <canvas>.
Sr.No. | Ví dụ & Mô tả |
---|---|
1 | Vẽ hình chữ nhật Tìm hiểu cách vẽ hình chữ nhật bằng phần tử <canvas> của HTML5 |
2 | Vẽ đường dẫn Tìm hiểu cách tạo hình bằng cách sử dụng đường dẫn trong phần tử <canvas> của HTML5 |
3 | Vẽ đường Tìm hiểu cách vẽ đường bằng phần tử <canvas> của HTML5 |
4 | Vẽ Bezier Tìm hiểu cách vẽ đường cong Bezier bằng phần tử <canvas> của HTML5 |
5 | Vẽ bậc hai Tìm hiểu cách vẽ đường cong bậc hai bằng cách sử dụng phần tử HTML5 <canvas> |
6 | Sử dụng hình ảnh Tìm hiểu cách sử dụng hình ảnh với phần tử <canvas> của HTML5 |
7 | Tạo Gradients Tìm hiểu cách tạo gradient bằng phần tử HTML5 <canvas> |
số 8 | Kiểu dáng và màu sắc Tìm hiểu cách áp dụng kiểu và màu bằng phần tử <canvas> của HTML5 |
9 | Văn bản và Phông chữ Học cách vẽ văn bản tuyệt vời bằng cách sử dụng các phông chữ khác nhau và kích thước của chúng. |
10 | Hoa văn và Bóng Học cách vẽ các mẫu khác nhau và đổ bóng. |
11 | Canvas States Tìm hiểu cách lưu và khôi phục trạng thái canvas trong khi thực hiện các bản vẽ phức tạp trên canvas. |
12 | Bản dịch Canvas Phương pháp này được sử dụng để di chuyển canvas và điểm gốc của nó đến một điểm khác trong lưới. |
13 | Xoay canvas Phương pháp này được sử dụng để xoay canvas xung quanh điểm gốc hiện tại. |
14 | Quy mô canvas Phương pháp này được sử dụng để tăng hoặc giảm các đơn vị trong lưới canvas. |
15 | Chuyển đổi canvas Các phương pháp này cho phép sửa đổi trực tiếp ma trận biến đổi. |
16 | Thành phần canvas Phương pháp này được sử dụng để che một số khu vực nhất định hoặc xóa các phần khỏi canvas. |
17 | Hoạt ảnh Canvas Tìm hiểu cách tạo hoạt ảnh cơ bản bằng HTML5 canvas và JavaScript. |
Các tính năng của HTML5 bao gồm hỗ trợ âm thanh và video gốc mà không cần Flash.
Các thẻ <audio> và <video> trong HTML5 giúp việc thêm phương tiện vào trang web trở nên đơn giản. Bạn cần đặtsrc để xác định nguồn phương tiện và bao gồm thuộc tính điều khiển để người dùng có thể phát và tạm dừng phương tiện.
Nhúng video
Đây là hình thức đơn giản nhất để nhúng tệp video vào trang web của bạn -
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>
Đặc tả bản nháp HTML5 hiện tại không chỉ định trình duyệt định dạng video nào sẽ hỗ trợ trong thẻ video. Nhưng hầu hết các định dạng video được sử dụng phổ biến là -
Ogg - Các tệp Ogg với codec video Thedora và codec âm thanh Vorbis.
mpeg4 - Các tệp MPEG4 với codec video H.264 và codec âm thanh AAC.
Bạn có thể sử dụng thẻ <source> để chỉ định phương tiện cùng với loại phương tiện và nhiều thuộc tính khác. Phần tử video cho phép nhiều phần tử nguồn và trình duyệt sẽ sử dụng định dạng được nhận dạng đầu tiên -
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls autoplay>
<source src = "/html5/foo.ogg" type ="video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the <video> element.
</video>
</body>
</html>
Điều này sẽ tạo ra kết quả sau:
Đặc tả thuộc tính video
Thẻ video HTML5 có thể có một số thuộc tính để kiểm soát giao diện và các chức năng khác nhau của điều khiển -
Sr.No. | Thuộc tính & Mô tả |
---|---|
1 | autoplay Thuộc tính Boolean này nếu được chỉ định, video sẽ tự động bắt đầu phát lại ngay khi có thể làm như vậy mà không dừng lại để hoàn tất quá trình tải dữ liệu. |
2 | autobuffer Thuộc tính Boolean này nếu được chỉ định, video sẽ tự động bắt đầu lưu vào bộ đệm ngay cả khi nó không được đặt để tự động phát. |
3 | controls Nếu thuộc tính này có mặt, nó sẽ cho phép người dùng kiểm soát phát lại video, bao gồm âm lượng, tìm kiếm và tạm dừng / tiếp tục phát lại. |
4 | height Thuộc tính này chỉ định chiều cao của vùng hiển thị của video, tính bằng pixel CSS. |
5 | loop Thuộc tính Boolean này nếu được chỉ định, sẽ cho phép video tự động quay lại phần bắt đầu sau khi đến phần cuối. |
6 | preload Thuộc tính này chỉ định rằng video sẽ được tải khi tải trang và sẵn sàng chạy. Bỏ qua nếu tính năng tự động phát hiện có. |
7 | poster Đây là URL của hình ảnh để hiển thị cho đến khi người dùng phát hoặc tìm kiếm. |
số 8 | src URL của video để nhúng. Đây là tùy chọn; thay vào đó, bạn có thể sử dụng phần tử <source> trong khối video để chỉ định video để nhúng. |
9 | width Thuộc tính này chỉ định chiều rộng của vùng hiển thị của video, tính bằng pixel CSS. |
Nhúng âm thanh
HTML5 hỗ trợ thẻ <audio> được sử dụng để nhúng nội dung âm thanh vào tài liệu HTML hoặc XHTML như sau.
<audio src = "foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>
Đặc tả bản nháp HTML5 hiện tại không chỉ định trình duyệt định dạng âm thanh nào sẽ hỗ trợ trong thẻ âm thanh. Nhưng hầu hết các định dạng âm thanh thường được sử dụng làogg, mp3 và wav.
Bạn có thể sử dụng <source & ggt; để chỉ định phương tiện cùng với loại phương tiện và nhiều thuộc tính khác. Một phần tử âm thanh cho phép nhiều phần tử nguồn và trình duyệt sẽ sử dụng định dạng được nhận dạng đầu tiên -
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>
Điều này sẽ tạo ra kết quả sau:
Đặc điểm thuộc tính âm thanh
Thẻ âm thanh HTML5 có thể có một số thuộc tính để kiểm soát giao diện và các chức năng khác nhau của điều khiển -
Sr.No. | Thuộc tính & Mô tả |
---|---|
1 | autoplay Thuộc tính Boolean này nếu được chỉ định, âm thanh sẽ tự động bắt đầu phát lại ngay khi nó có thể làm như vậy mà không cần dừng lại để hoàn tất quá trình tải dữ liệu. |
2 | autobuffer Thuộc tính Boolean này nếu được chỉ định, âm thanh sẽ tự động bắt đầu lưu vào bộ đệm ngay cả khi nó không được đặt để tự động phát. |
3 | controls Nếu thuộc tính này xuất hiện, nó sẽ cho phép người dùng điều khiển phát lại âm thanh, bao gồm âm lượng, tìm kiếm và tạm dừng / tiếp tục phát lại. |
4 | loop Thuộc tính Boolean này nếu được chỉ định, sẽ cho phép âm thanh tự động tìm kiếm trở lại phần đầu sau khi đến phần cuối. |
5 | preload Thuộc tính này chỉ định rằng âm thanh sẽ được tải khi tải trang và sẵn sàng chạy. Bỏ qua nếu tính năng tự động phát hiện có. |
6 | src URL của âm thanh để nhúng. Đây là tùy chọn; thay vào đó, bạn có thể sử dụng phần tử <source> trong khối video để chỉ định video để nhúng. |
Xử lý sự kiện truyền thông
Thẻ âm thanh và video HTML5 có thể có một số thuộc tính để kiểm soát các chức năng khác nhau của điều khiển bằng JavaScript -
Không. | Sự kiện & Mô tả |
---|---|
1 | abort Sự kiện này được tạo ra khi quá trình phát lại bị hủy bỏ. |
2 | canplay Sự kiện này được tạo khi có đủ dữ liệu để có thể phát phương tiện. |
3 | ended Sự kiện này được tạo khi phát lại hoàn tất. |
4 | error Sự kiện này được tạo ra khi xảy ra lỗi. |
5 | loadeddata Sự kiện này được tạo khi khung đầu tiên của phương tiện tải xong. |
6 | loadstart Sự kiện này được tạo ra khi quá trình tải phương tiện bắt đầu. |
7 | pause Sự kiện này được tạo ra khi quá trình phát bị tạm dừng. |
số 8 | play Sự kiện này được tạo khi phát lại bắt đầu hoặc tiếp tục. |
9 | progress Sự kiện này được tạo định kỳ để thông báo tiến trình tải xuống phương tiện. |
10 | ratechange Sự kiện này được tạo ra khi tốc độ phát lại thay đổi. |
11 | seeked Sự kiện này được tạo khi hoạt động tìm kiếm hoàn tất. |
12 | seeking Sự kiện này được tạo ra khi hoạt động tìm kiếm bắt đầu. |
13 | suspend Sự kiện này được tạo ra khi quá trình tải phương tiện bị tạm dừng. |
14 | volumechange Sự kiện này được tạo khi âm lượng thay đổi. |
15 | waiting Sự kiện này được tạo ra khi thao tác được yêu cầu (chẳng hạn như phát lại) bị trì hoãn trong khi chờ hoàn thành một thao tác khác (chẳng hạn như tìm kiếm). |
Sau đây là ví dụ cho phép phát video đã cho:
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function PlayVideo() {
var v = document.getElementsByTagName("video")[0];
v.play();
}
</script>
</head>
<body>
<form>
<video width = "300" height = "200" src = "/html5/foo.mp4">
Your browser does not support the video element.
</video>
<br />
<input type = "button" onclick = "PlayVideo();" value = "Play"/>
</form>
</body>
</html>
Điều này sẽ tạo ra kết quả sau:
Định cấu hình máy chủ cho loại phương tiện
Theo mặc định, hầu hết các máy chủ không phân phát phương tiện Ogg hoặc mp4 với các loại MIME chính xác, vì vậy, bạn có thể cần thêm cấu hình thích hợp cho việc này.
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
API vị trí địa lý HTML5 cho phép bạn chia sẻ vị trí của mình với các trang web yêu thích của bạn. JavaScript có thể nắm bắt được vĩ độ và kinh độ của bạn và có thể được gửi tới máy chủ web phụ trợ và thực hiện những việc quan tâm đến vị trí như tìm các doanh nghiệp địa phương hoặc hiển thị vị trí của bạn trên bản đồ.
Ngày nay hầu hết các trình duyệt và thiết bị di động đều hỗ trợ API vị trí địa lý. Các API định vị địa lý hoạt động với một thuộc tính mới của đối tượng điều hướng toàn cầu, tức là. Đối tượng định vị địa lý có thể được tạo như sau:
var geolocation = navigator.geolocation;
Đối tượng định vị địa lý là một đối tượng dịch vụ cho phép các widget truy xuất thông tin về vị trí địa lý của thiết bị.
Phương pháp định vị địa lý
Đối tượng định vị địa lý cung cấp các phương thức sau:
Sr.No. | Phương pháp & Mô tả |
---|---|
1 | getCurrentPosition () Phương pháp này truy xuất vị trí địa lý hiện tại của người dùng. |
2 | watchPosition () Phương pháp này truy xuất các bản cập nhật định kỳ về vị trí địa lý hiện tại của thiết bị. |
3 | clearWatch () Phương thức này hủy cuộc gọi watchPosition đang diễn ra. |
Thí dụ
Sau đây là mã mẫu để sử dụng bất kỳ phương pháp nào ở trên:
function getLocation() {
var geolocation = navigator.geolocation;
geolocation.getCurrentPosition(showLocation, errorHandler);
}
Ở đây showLocation và errorHandler là các phương thức gọi lại sẽ được sử dụng để có được vị trí thực tế như được giải thích trong phần tiếp theo và để xử lý lỗi nếu có.
Thuộc tính vị trí
Các phương thức định vị địa lý getCurrentPosition () và getPositionUsingMethodName () chỉ định phương thức gọi lại lấy thông tin vị trí. Các phương thức này được gọi là không đồng bộ với một đối tượngPosition nơi lưu trữ thông tin vị trí đầy đủ.
Các Positionđối tượng chỉ định vị trí địa lý hiện tại của thiết bị. Vị trí được biểu thị dưới dạng một tập hợp các tọa độ địa lý cùng với thông tin về hướng và tốc độ.
Bảng sau đây mô tả các thuộc tính của đối tượng Vị trí. Đối với các thuộc tính tùy chọn nếu hệ thống không thể cung cấp giá trị, thì giá trị của thuộc tính được đặt thành null.
Bất động sản | Kiểu | Sự miêu tả |
---|---|---|
coords | các đối tượng | Chỉ định vị trí địa lý của thiết bị. Vị trí được biểu thị dưới dạng một tập hợp các tọa độ địa lý cùng với thông tin về hướng và tốc độ. |
coords.latitude | Con số | Chỉ định ước tính vĩ độ theo độ thập phân. Phạm vi giá trị là [-90,00, +90,00]. |
coords.longitude | Con số | Chỉ định ước tính kinh độ theo độ thập phân. Phạm vi giá trị là [-180,00, +180,00]. |
coords.altitude | Con số | [Tùy chọn] Chỉ định ước tính độ cao tính bằng mét trên WGS 84 ellipsoid. |
coords.accuracy | Con số | [Tùy chọn] Chỉ định độ chính xác của các ước tính vĩ độ và kinh độ tính bằng mét. |
coords.altitudeAccuracy | Con số | [Tùy chọn] Chỉ định độ chính xác của ước tính độ cao tính bằng mét. |
coords.heading | Con số | [Tùy chọn] Chỉ định hướng di chuyển hiện tại của thiết bị theo độ đếm theo chiều kim đồng hồ so với hướng bắc thực. |
coords.speed | Con số | [Tùy chọn] Chỉ định tốc độ mặt đất hiện tại của thiết bị tính bằng mét trên giây. |
dấu thời gian | ngày | Chỉ định thời gian khi thông tin vị trí được truy xuất và đối tượng Vị trí được tạo. |
Thí dụ
Sau đây là một mã mẫu sử dụng đối tượng Vị trí. Ở đây phương thức showLocation là một phương thức gọi lại -
function showLocation( position ) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
...
}
Xử lý lỗi
Việc xác định vị trí địa lý rất phức tạp và rất cần phải bắt lỗi và xử lý nó một cách khéo léo.
Các phương thức định vị địa lý getCurrentPosition () và watchPosition () sử dụng phương thức gọi lại trình xử lý lỗi mang lại PositionErrorvật. Đối tượng này có hai thuộc tính sau:
Bất động sản | Kiểu | Sự miêu tả |
---|---|---|
mã | Con số | Chứa một mã số cho lỗi. |
thông điệp | Chuỗi | Chứa mô tả lỗi mà con người có thể đọc được. |
Bảng sau đây mô tả các mã lỗi có thể được trả về trong đối tượng PositionError.
Mã | Không thay đổi | Sự miêu tả |
---|---|---|
0 | LỖI KHÔNG RÕ | Phương pháp này không thể truy xuất vị trí của thiết bị do lỗi không xác định. |
1 | PERMISSION_DENIED | Phương pháp này không thể truy xuất vị trí của thiết bị vì ứng dụng không có quyền sử dụng Dịch vụ vị trí. |
2 | POSITION_UNAVAILABLE | Không thể xác định vị trí của thiết bị. |
3 | HẾT GIỜ | Phương pháp này không thể truy xuất thông tin vị trí trong khoảng thời gian chờ tối đa được chỉ định. |
Thí dụ
Sau đây là một mã mẫu sử dụng đối tượng PositionError. Ở đây phương thức errorHandler là một phương thức gọi lại -
function errorHandler( err ) {
if (err.code == 1) {
// access is denied
}
...
}
Tùy chọn vị trí
Sau đây là cú pháp thực tế của phương thức getCurrentPosition ():
getCurrentPosition(callback, ErrorCallback, options)
Đây đối số thứ ba là PositionOptions đối tượng chỉ định một tập hợp các tùy chọn để truy xuất vị trí địa lý của thiết bị.
Sau đây là các tùy chọn có thể được chỉ định làm đối số thứ ba:
Bất động sản | Kiểu | Sự miêu tả |
---|---|---|
enableHighAccuracy | Boolean | Chỉ định xem tiện ích con có muốn nhận ước tính vị trí chính xác nhất có thể hay không. Theo mặc định, điều này là sai. |
hết giờ | Con số | Thuộc tính thời gian chờ là số mili giây ứng dụng web của bạn sẵn sàng chờ một vị trí. |
tối đa | Con số | Chỉ định thời gian hết hạn tính bằng mili giây cho thông tin vị trí được lưu trong bộ nhớ cache. |
Thí dụ
Sau đây là mã mẫu cho thấy cách sử dụng các phương pháp đã đề cập ở trên:
function getLocation() {
var geolocation = navigator.geolocation;
geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000});
}
Vi dữ liệu là một cách tiêu chuẩn hóa để cung cấp ngữ nghĩa bổ sung trong các trang web của bạn.
Vi dữ liệu cho phép bạn xác định các phần tử tùy chỉnh của riêng mình và bắt đầu nhúng các thuộc tính tùy chỉnh vào các trang web của bạn. Ở cấp độ cao, vi dữ liệu bao gồm một nhóm các cặp tên-giá trị.
Các nhóm được gọi là itemsvà mỗi cặp tên-giá trị là một property. Các mục và thuộc tính được biểu diễn bằng các phần tử thông thường.
Thí dụ
Để tạo một mục, itemscope thuộc tính được sử dụng.
Để thêm một thuộc tính vào một mục, itemprop thuộc tính được sử dụng trên một trong những con của mặt hàng.
Ở đây có hai mục, mỗi mục có thuộc tính "name" -
<html>
<body>
<div itemscope>
<p>My name is <span itemprop = "name">Zara</span>.</p>
</div>
<div itemscope>
<p>My name is <span itemprop = "name">Nuha</span>.</p>
</div>
</body>
</html>
Nó sẽ tạo ra kết quả sau:
Các thuộc tính thường có các giá trị là chuỗi nhưng nó có thể có các kiểu dữ liệu sau:
Thuộc tính toàn cầu
Microdata giới thiệu năm thuộc tính toàn cục sẽ có sẵn cho bất kỳ phần tử nào sử dụng và cung cấp ngữ cảnh cho các máy về dữ liệu của bạn.
Sr.No. | Thuộc tính & Mô tả |
---|---|
1 | itemscope Điều này được sử dụng để tạo một mục. Thuộc tính itemscope là thuộc tính Boolean cho biết rằng có Vi dữ liệu trên trang này và đây là nơi nó bắt đầu. |
2 | itemtype Thuộc tính này là một URL hợp lệ xác định mặt hàng và cung cấp ngữ cảnh cho các thuộc tính. |
3 | itemid Thuộc tính này là định danh toàn cầu cho mặt hàng. |
4 | itemprop Thuộc tính này xác định một thuộc tính của mặt hàng. |
5 | itemref Thuộc tính này cung cấp danh sách các phần tử bổ sung cần thu thập thông tin để tìm các cặp tên-giá trị của mặt hàng. |
Các kiểu dữ liệu thuộc tính
Các thuộc tính thường có giá trị là chuỗi như đã đề cập trong ví dụ trên nhưng chúng cũng có thể có giá trị là URL. Ví dụ sau có một thuộc tính, "image", có giá trị là một URL -
<div itemscope>
<img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint">
</div>
Thuộc tính cũng có thể có các giá trị là ngày, giờ hoặc ngày và giờ. Điều này đạt được bằng cách sử dụngtime nguyên tố và nó datetime thuộc tính.
<html>
<body>
<div itemscope>
My birthday is:
<time itemprop = "birthday" datetime = "1971-05-08">
Aug 5th 1971
</time>
</div>
</body>
</html>
Nó sẽ tạo ra kết quả sau:
Bản thân các thuộc tính cũng có thể là nhóm các cặp tên-giá trị, bằng cách đặt thuộc tính itemscope vào phần tử khai báo thuộc tính.
Hỗ trợ API vi dữ liệu
Nếu trình duyệt hỗ trợ API vi dữ liệu HTML5, sẽ có một hàm getItems () trên đối tượng tài liệu chung. Nếu trình duyệt không hỗ trợ vi dữ liệu, thì hàm getItems () sẽ không được xác định.
function supports_microdata_api() {
return !!document.getItems;
}
Modernizr chưa hỗ trợ kiểm tra API vi dữ liệu, vì vậy bạn sẽ cần sử dụng chức năng như chức năng được liệt kê ở trên.
Tiêu chuẩn vi dữ liệu HTML5 bao gồm cả đánh dấu HTML (chủ yếu dành cho công cụ tìm kiếm) và một tập hợp các hàm DOM (chủ yếu dành cho trình duyệt).
Bạn có thể bao gồm đánh dấu vi dữ liệu trong các trang web của mình và các công cụ tìm kiếm không hiểu các thuộc tính vi dữ liệu sẽ bỏ qua chúng. Nhưng nếu bạn cần truy cập hoặc thao tác vi dữ liệu thông qua DOM, bạn sẽ cần kiểm tra xem trình duyệt có hỗ trợ API DOM vi dữ liệu hay không.
Định nghĩa từ vựng vi dữ liệu
Để xác định từ vựng vi dữ liệu, bạn cần một URL không gian tên trỏ đến một trang web đang hoạt động. Ví dụ: https://data-vocabulary.org/Person có thể được sử dụng làm không gian tên cho từ vựng vi dữ liệu cá nhân với các thuộc tính được đặt tên sau:
name - Tên người dưới dạng một chuỗi đơn giản
Photo - Một URL đến ảnh của một người.
URL - Một trang web thuộc về một người.
Việc sử dụng về thuộc tính vi dữ liệu của một người có thể như sau:
<html>
<body>
<div itemscope>
<section itemscope itemtype = "http://data-vocabulary.org/Person">
<h1 itemprop = "name">Gopal K Varma</h1>
<p>
<img itemprop = "photo"
src = "http://www.tutorialspoint.com/green/images/logo.png">
</p>
<a itemprop = "url" href = "#">Site</a>
</section>
</div>
</body>
</html>
Nó sẽ tạo ra kết quả sau:
Google hỗ trợ vi dữ liệu như một phần của chương trình Rich Snippets của họ. Khi trình thu thập dữ liệu web của Google phân tích cú pháp trang của bạn và tìm thấy các thuộc tính vi dữ liệu phù hợp với từ vựng http://datavocabulary.org/Person, nó sẽ phân tích cú pháp các thuộc tính đó và lưu trữ chúng cùng với phần còn lại của dữ liệu trang.
Bạn có thể kiểm tra ví dụ trên bằng Công cụ kiểm tra đoạn mã chi tiết bằng cách sử dụng http://www.tutorialspoint.com/html5/microdata.htm
Để phát triển thêm về Microdata, bạn luôn có thể tham khảo Microdata HTML5 .
Kéo và thả (DnD) là khái niệm Giao diện người dùng mạnh mẽ giúp dễ dàng sao chép, sắp xếp lại và xóa các mục với sự trợ giúp của các cú nhấp chuột. Điều này cho phép người dùng nhấp và giữ nút chuột trên một phần tử, kéo phần tử đó đến vị trí khác và thả nút chuột để thả phần tử đó.
Để đạt được chức năng kéo và thả với HTML4 truyền thống, các nhà phát triển sẽ phải sử dụng lập trình JavaScript phức tạp hoặc các khung JavaScript khác như jQuery, v.v.
Giờ đây, HTML 5 đã đưa ra API Kéo và Thả (DnD) mang đến hỗ trợ DnD nguyên bản cho trình duyệt, giúp dễ dàng lập mã hơn nhiều.
HTML 5 DnD được hỗ trợ bởi tất cả các trình duyệt chính như Chrome, Firefox 3.5 và Safari 4, v.v.
Sự kiện kéo và thả
Có một số sự kiện được kích hoạt trong các giai đoạn khác nhau của thao tác kéo và thả. Những sự kiện này được liệt kê dưới đây -
Sr.No. | Sự kiện & Mô tả |
---|---|
1 | dragstart Kích hoạt khi người dùng bắt đầu kéo đối tượng. |
2 | dragenter Được kích hoạt khi lần đầu tiên di chuyển chuột qua phần tử mục tiêu trong khi đang xảy ra một thao tác kéo. Người nghe cho sự kiện này sẽ cho biết liệu có được phép thả qua vị trí này hay không. Nếu không có người nghe hoặc người nghe không thực hiện thao tác nào, thì theo mặc định, việc giảm không được phép. |
3 | dragover Sự kiện này được kích hoạt khi chuột được di chuyển qua một phần tử khi xảy ra thao tác kéo. Phần lớn thời gian, hoạt động xảy ra trong trình lắng nghe sẽ giống như sự kiện trình soạn thảo. |
4 | dragleave Sự kiện này được kích hoạt khi chuột rời khỏi một phần tử trong khi đang xảy ra hành động kéo. Người nghe nên xóa bất kỳ điểm đánh dấu hoặc điểm chèn nào được sử dụng cho phản hồi thả. |
5 | drag Kích hoạt mỗi khi di chuyển chuột trong khi đối tượng đang được kéo. |
6 | drop Sự kiện thả được kích hoạt trên phần tử nơi xảy ra thả ở cuối thao tác kéo. Một người nghe sẽ chịu trách nhiệm truy xuất dữ liệu đang được kéo và chèn nó vào vị trí thả. |
7 | dragend Kích hoạt khi người dùng thả nút chuột trong khi kéo một đối tượng. |
Note- Lưu ý rằng chỉ các sự kiện kéo mới được kích hoạt; chuột các sự kiện như MouseMove không bị sa thải trong một hoạt động kéo.
Đối tượng DataTransfer
Các phương pháp trình xử lý sự kiện cho tất cả các sự kiện kéo và thả chấp nhận Event đối tượng có thuộc tính chỉ đọc được gọi là dataTransfer.
Các event.dataTransfer trả lại DataTransfer đối tượng được liên kết với sự kiện như sau:
function EnterHandler(event) {
DataTransfer dt = event.dataTransfer;
.............
}
Các DataTransfer đối tượng chứa dữ liệu về hoạt động kéo và thả. Dữ liệu này có thể được truy xuất và đặt theo các thuộc tính khác nhau được liên kết với đối tượng DataTransfer như được giải thích bên dưới:
Sr.No. | Thuộc tính DataTransfer và mô tả của chúng |
---|---|
1 | dataTransfer.dropEffect [ = value ]
|
2 | dataTransfer.effectAllowed [ = value ]
|
3 | dataTransfer.types Trả về DOMStringList liệt kê các định dạng đã được đặt trong sự kiện dragstart. Ngoài ra, nếu bất kỳ tệp nào đang được kéo, thì một trong các kiểu sẽ là chuỗi "Tệp". |
4 | dataTransfer.clearData ( [ format ] ) Loại bỏ dữ liệu của các định dạng được chỉ định. Loại bỏ tất cả dữ liệu nếu đối số bị bỏ qua. |
5 | dataTransfer.setData(format, data) Thêm dữ liệu được chỉ định. |
6 | data = dataTransfer.getData(format) Trả về dữ liệu được chỉ định. Nếu không có dữ liệu như vậy, trả về chuỗi trống. |
7 | dataTransfer.files Trả về Danh sách tệp của các tệp đang được kéo, nếu có. |
số 8 | dataTransfer.setDragImage(element, x, y) Sử dụng phần tử đã cho để cập nhật phản hồi kéo, thay thế mọi phản hồi được chỉ định trước đó. |
9 | dataTransfer.addElement(element) Thêm phần tử đã cho vào danh sách các phần tử được sử dụng để hiển thị phản hồi kéo. |
Quá trình kéo và thả
Sau đây là các bước cần thực hiện để thực hiện thao tác Kéo và thả -
Bước 1 - Tạo một đối tượng có thể kéo được
Dưới đây là các bước cần thực hiện -
Nếu bạn muốn kéo một phần tử, bạn cần đặt draggable gán cho true cho phần tử đó.
Đặt trình nghe sự kiện cho dragstart lưu trữ dữ liệu đang được kéo.
Người nghe sự kiện dragstart sẽ thiết lập các hiệu ứng được phép (sao chép, di chuyển, liên kết hoặc một số kết hợp).
Sau đây là ví dụ để làm cho một đối tượng có thể kéo -
<!DOCTYPE HTML>
<html>
<head>
<style type = "text/css">
#boxA, #boxB {
float:left;padding:10px;margin:10px; -moz-user-select:none;
}
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script type = "text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to drag the purple box around.</div>
<div id = "boxA" draggable = "true"
ondragstart = "return dragStart(ev)">
<p>Drag Me</p>
</div>
<div id = "boxB">Dustbin</div>
</center>
</body>
</html>
Điều này sẽ tạo ra kết quả sau:
Bước 2 - Bỏ đối tượng
Để chấp nhận giảm, mục tiêu giảm phải nghe ít nhất ba sự kiện.
Các dragentersự kiện được sử dụng để xác định xem mục tiêu giảm có chấp nhận việc giảm hay không. Nếu việc giảm được chấp nhận, thì sự kiện này phải bị hủy bỏ.
Các dragoversự kiện được sử dụng để xác định phản hồi nào sẽ được hiển thị cho người dùng. Nếu sự kiện bị hủy, thì phản hồi (thường là con trỏ) được cập nhật dựa trên giá trị của thuộc tính dropEffect.
cuối cùng drop sự kiện này cho phép thực hiện việc giảm thực tế.
Sau đây là ví dụ để thả một đối tượng vào một đối tượng khác:
<html>
<head>
<style type="text/css">
#boxA, #boxB {
float:left;padding:10px;margin:10px;-moz-user-select:none;
}
#boxA { background-color: #6633FF; width:75px; height:75px; }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnter(ev) {
event.preventDefault();
return true;
}
function dragOver(ev) {
return false;
}
function dragDrop(ev) {
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}
</script>
</head>
<body>
<center>
<h2>Drag and drop HTML5 demo</h2>
<div>Try to move the purple box into the pink box.</div>
<div id="boxA" draggable="true" ondragstart="return dragStart(event)">
<p>Drag Me</p>
</div>
<div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
</center>
</body>
</html>
Điều này sẽ tạo ra kết quả sau:
JavaScript được thiết kế để chạy trong môi trường đơn luồng, có nghĩa là nhiều tập lệnh không thể chạy cùng một lúc. Hãy xem xét một tình huống mà bạn cần xử lý các sự kiện giao diện người dùng, truy vấn và xử lý một lượng lớn dữ liệu API cũng như thao tác với DOM.
JavaScript sẽ treo trình duyệt của bạn trong tình huống sử dụng CPU cao. Hãy để chúng tôi lấy một ví dụ đơn giản trong đó JavaScript đi qua một vòng lặp lớn -
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script>
function bigLoop() {
for (var i = 0; i <= 10000; i += 1) {
var j = i;
}
alert("Completed " + j + "iterations" );
}
function sayHello(){
alert("Hello sir...." );
}
</script>
</head>
<body>
<input type = "button" onclick = "bigLoop();" value = "Big Loop" />
<input type = "button" onclick = "sayHello();" value = "Say Hello" />
</body>
</html>
Nó sẽ tạo ra kết quả sau:
Khi bạn nhấp vào nút Big Loop, nó sẽ hiển thị kết quả sau trong Firefox:
Nhân viên web là gì?
Tình huống được giải thích ở trên có thể được xử lý bằng cách sử dụng Web Workers người sẽ thực hiện tất cả các nhiệm vụ tính toán tốn kém mà không làm gián đoạn giao diện người dùng và thường chạy trên các luồng riêng biệt.
Web Worker cho phép các tập lệnh chạy dài không bị gián đoạn bởi các tập lệnh phản hồi với các nhấp chuột hoặc các tương tác khác của người dùng và cho phép các tác vụ dài được thực thi mà không cần năng suất để giữ cho trang luôn phản hồi.
Web Worker là các tập lệnh nền và chúng có dung lượng tương đối nặng và không nhằm mục đích sử dụng với số lượng lớn. Ví dụ: sẽ không phù hợp nếu khởi chạy một công nhân cho mỗi pixel của hình ảnh bốn megapixel.
Khi một tập lệnh đang thực thi bên trong Web Worker, nó không thể truy cập đối tượng cửa sổ của trang web (window.document), điều đó có nghĩa là Web Worker không có quyền truy cập trực tiếp vào trang web và API DOM. Mặc dù nhân viên web không thể chặn giao diện người dùng của trình duyệt, nhưng chúng vẫn có thể tiêu tốn chu kỳ CPU và làm cho hệ thống kém phản hồi.
Nhân viên web hoạt động như thế nào?
Web Worker được khởi tạo bằng URL của một tệp JavaScript chứa mã mà worker sẽ thực thi. Mã này thiết lập các trình xử lý sự kiện và giao tiếp với tập lệnh tạo ra nó từ trang chính. Sau đây là cú pháp đơn giản:
var worker = new Worker('bigLoop.js');
Nếu tệp javascript được chỉ định tồn tại, trình duyệt sẽ sinh ra một luồng công nhân mới, được tải xuống không đồng bộ. Nếu đường dẫn đến công nhân của bạn trả về lỗi 404, công nhân sẽ không thành công.
Nếu ứng dụng của bạn có nhiều tệp JavaScript hỗ trợ, bạn có thể nhập chúng importScripts() phương thức lấy (các) tên tệp làm đối số được phân tách bằng dấu phẩy như sau:
importScripts("helper.js", "anotherHelper.js");
Khi Web Worker được tạo, giao tiếp giữa web worker và trang mẹ của nó được thực hiện bằng cách sử dụng postMessage()phương pháp. Tùy thuộc vào trình duyệt / phiên bản của bạn, postMessage () có thể chấp nhận một chuỗi hoặc đối tượng JSON làm đối số duy nhất của nó.
Thông báo do Web Worker chuyển được truy cập bằng onmessagesự kiện trong trang chính. Bây giờ chúng ta hãy viết ví dụ về bigLoop bằng cách sử dụng Web Worker. Dưới đây là trang chính (hello.htm) sẽ tạo ra một web worker để thực hiện vòng lặp và trả về giá trị cuối cùng của biếnj -
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script>
var worker = new Worker('bigLoop.js');
worker.onmessage = function (event) {
alert("Completed " + event.data + "iterations" );
};
function sayHello() {
alert("Hello sir...." );
}
</script>
</head>
<body>
<input type = "button" onclick = "sayHello();" value = "Say Hello"/>
</body>
</html>
Sau đây là nội dung của tệp bigLoop.js. Điều này làm cho việc sử dụngpostMessage() API để chuyển giao tiếp trở lại trang chính -
for (var i = 0; i <= 1000000000; i += 1) {
var j = i;
}
postMessage(j);
Điều này sẽ tạo ra kết quả sau:
Ngừng nhân viên web
Nhân viên web không tự dừng lại nhưng trang đã bắt đầu họ có thể ngăn họ bằng cách gọi terminate() phương pháp.
worker.terminate();
Một Web Worker bị chấm dứt sẽ không còn trả lời thư hoặc thực hiện bất kỳ tính toán bổ sung nào. Bạn không thể khởi động lại một nhân viên; thay vào đó, bạn có thể tạo một nhân viên mới bằng cách sử dụng cùng một URL.
Xử lý lỗi
Sau đây là ví dụ về chức năng xử lý lỗi trong tệp JavaScript Web Worker ghi lại lỗi vào bảng điều khiển. Với mã xử lý lỗi, ví dụ trên sẽ trở thành như sau:
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script>
var worker = new Worker('bigLoop.js');
worker.onmessage = function (event) {
alert("Completed " + event.data + "iterations" );
};
worker.onerror = function (event) {
console.log(event.message, event);
};
function sayHello() {
alert("Hello sir...." );
}
</script>
</head>
<body>
<input type = "button" onclick = "sayHello();" value = "Say Hello"/>
</body>
</html>
Kiểm tra hỗ trợ trình duyệt
Sau đây là cú pháp để phát hiện hỗ trợ tính năng Web Worker có sẵn trong trình duyệt:
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script src = "/js/modernizr-1.5.min.js"></script>
<script>
function myFunction() {
if (Modernizr.webworkers) {
alert("Congratulation!! you have web workers support." );
} else {
alert("Sorry!! you do not have web workers support." );
}
}
</script>
</head>
<body>
<button onclick = "myFunction()">Click me</button>
</body>
</html>
Điều này sẽ tạo ra kết quả sau:
Indexeddb là một khái niệm HTML5 mới để lưu trữ dữ liệu bên trong trình duyệt của người dùng. indexeddb mạnh hơn lưu trữ cục bộ và hữu ích cho các ứng dụng yêu cầu lưu trữ lượng lớn dữ liệu. Các ứng dụng này có thể chạy hiệu quả hơn và tải nhanh hơn.
Tại sao sử dụng indexeddb?
W3C đã thông báo rằng cơ sở dữ liệu Web SQL là một đặc tả lưu trữ cục bộ không được dùng nữa nên nhà phát triển web không nên sử dụng công nghệ này nữa. indexeddb là một giải pháp thay thế cho cơ sở dữ liệu SQL web và hiệu quả hơn các công nghệ cũ.
Đặc trưng
- nó lưu trữ các giá trị cặp khóa
- nó không phải là một cơ sở dữ liệu quan hệ
- API IndexedDB chủ yếu là không đồng bộ
- nó không phải là một ngôn ngữ truy vấn có cấu trúc
- nó đã hỗ trợ truy cập dữ liệu từ cùng một miền
IndexedDB
Trước khi nhập vào một indexeddb, chúng ta cần thêm một số tiền tố triển khai như hình dưới đây
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB ||
window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction ||
window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange ||
window.webkitIDBKeyRange || window.msIDBKeyRange
if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB.")
}
Mở cơ sở dữ liệu IndexedDB
Trước khi tạo cơ sở dữ liệu, chúng ta phải chuẩn bị một số dữ liệu cho phần bắt đầu của data base.let với thông tin chi tiết về nhân viên của công ty.
const employeeData = [
{ id: "01", name: "Gopal K Varma", age: 35, email: "[email protected]" },
{ id: "02", name: "Prasad", age: 24, email: "[email protected]" }
];
Thêm dữ liệu
Tại đây thêm một số dữ liệu theo cách thủ công vào dữ liệu như hình dưới đây -
function add() {
var request = db.transaction(["employee"], "readwrite")
.objectStore("employee")
.add({ id: "01", name: "prasad", age: 24, email: "[email protected]" });
request.onsuccess = function(event) {
alert("Prasad has been added to your database.");
};
request.onerror = function(event) {
alert("Unable to add data\r\nPrasad is already exist in your database! ");
}
}
Truy xuất dữ liệu
Chúng tôi có thể truy xuất dữ liệu từ cơ sở dữ liệu bằng cách sử dụng get ()
function read() {
var transaction = db.transaction(["employee"]);
var objectStore = transaction.objectStore("employee");
var request = objectStore.get("00-03");
request.onerror = function(event) {
alert("Unable to retrieve daa from database!");
};
request.onsuccess = function(event) {
if(request.result) {
alert("Name: " + request.result.name + ", Age:
" + request.result.age + ", Email: " + request.result.email);
} else {
alert("Kenny couldn't be found in your database!");
}
};
}
Sử dụng với get (), chúng ta có thể lưu trữ dữ liệu trong đối tượng thay vì chúng ta có thể lưu trữ dữ liệu trong con trỏ và chúng ta có thể lấy dữ liệu từ con trỏ.
function readAll() {
var objectStore = db.transaction("employee").objectStore("employee");
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
alert("Name for id " + cursor.key + " is " + cursor.value.name + ",
Age: " + cursor.value.age + ", Email: " + cursor.value.email);
cursor.continue();
} else {
alert("No more entries!");
}
};
}
Xóa dữ liệu
Chúng tôi có thể xóa dữ liệu khỏi IndexedDB bằng remove (). Đây là cách mã trông như thế nào
function remove() {
var request = db.transaction(["employee"], "readwrite")
.objectStore("employee")
.delete("02");
request.onsuccess = function(event) {
alert("prasad entry has been removed from your database.");
};
}
Mã HTML
Để hiển thị tất cả dữ liệu, chúng tôi cần sử dụng sự kiện onClick như mã dưới đây -
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title>IndexedDb Demo | onlyWebPro.com</title>
</head>
<body>
<button onclick = "read()">Read </button>
<button onclick = "readAll()"></button>
<button onclick = "add()"></button>
<button onclick = "remove()">Delete </button>
</body>
</html>
Mã cuối cùng phải là:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<script type = "text/javascript">
//prefixes of implementation that we want to test
window.indexedDB = window.indexedDB || window.mozIndexedDB ||
window.webkitIndexedDB || window.msIndexedDB;
//prefixes of window.IDB objects
window.IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange ||
window.msIDBKeyRange
if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB.")
}
const employeeData = [
{ id: "00-01", name: "gopal", age: 35, email: "[email protected]" },
{ id: "00-02", name: "prasad", age: 32, email: "[email protected]" }
];
var db;
var request = window.indexedDB.open("newDatabase", 1);
request.onerror = function(event) {
console.log("error: ");
};
request.onsuccess = function(event) {
db = request.result;
console.log("success: "+ db);
};
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore("employee", {keyPath: "id"});
for (var i in employeeData) {
objectStore.add(employeeData[i]);
}
}
function read() {
var transaction = db.transaction(["employee"]);
var objectStore = transaction.objectStore("employee");
var request = objectStore.get("00-03");
request.onerror = function(event) {
alert("Unable to retrieve daa from database!");
};
request.onsuccess = function(event) {
// Do something with the request.result!
if(request.result) {
alert("Name: " + request.result.name + ",
Age: " + request.result.age + ", Email: " + request.result.email);
} else {
alert("Kenny couldn't be found in your database!");
}
};
}
function readAll() {
var objectStore = db.transaction("employee").objectStore("employee");
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
alert("Name for id " + cursor.key + " is " + cursor.value.name + ",
Age: " + cursor.value.age + ", Email: " + cursor.value.email);
cursor.continue();
} else {
alert("No more entries!");
}
};
}
function add() {
var request = db.transaction(["employee"], "readwrite")
.objectStore("employee")
.add({ id: "00-03", name: "Kenny", age: 19, email: "[email protected]" });
request.onsuccess = function(event) {
alert("Kenny has been added to your database.");
};
request.onerror = function(event) {
alert("Unable to add data\r\nKenny is aready exist in your database! ");
}
}
function remove() {
var request = db.transaction(["employee"], "readwrite")
.objectStore("employee")
.delete("00-03");
request.onsuccess = function(event) {
alert("Kenny's entry has been removed from your database.");
};
}
</script>
</head>
<body>
<button onclick = "read()">Read </button>
<button onclick = "readAll()">Read all </button>
<button onclick = "add()">Add data </button>
<button onclick = "remove()">Delete data </button>
</body>
</html>
Nó sẽ tạo ra kết quả sau:
Nhắn tin web là khả năng gửi tin nhắn thời gian thực từ máy chủ đến trình duyệt máy khách. Nó ghi đè vấn đề giao tiếp miền chéo trong các miền, giao thức hoặc cổng khác nhau
Ví dụ: bạn muốn gửi dữ liệu từ trang của mình đến vùng chứa quảng cáo được đặt tại iframe hoặc ngược lại bằng giọng nói, trong trường hợp này, Trình duyệt đưa ra một ngoại lệ bảo mật. Với tin nhắn web, chúng ta có thể chuyển dữ liệu dưới dạng một sự kiện tin nhắn.
Sự kiện tin nhắn
Sự kiện tin nhắn kích hoạt Nhắn tin chéo tài liệu, tin nhắn kênh, sự kiện do máy chủ gửi và web sockets. Nó đã được mô tả bằng giao diện Sự kiện tin nhắn.
Thuộc tính
Sr.No. | Thuộc tính & Mô tả |
---|---|
1 | data Chứa dữ liệu chuỗi |
2 | origin Chứa tên miền và cổng |
3 | lastEventId Chứa số nhận dạng duy nhất cho sự kiện tin nhắn hiện tại. |
4 | source Chứa một tham chiếu đến cửa sổ của tài liệu gốc |
5 | ports Chứa dữ liệu được gửi bởi bất kỳ cổng tin nhắn nào |
Gửi tin nhắn liên tài liệu
Trước khi gửi tin nhắn tài liệu chéo, chúng ta cần tạo bối cảnh duyệt web mới bằng cách tạo iframe mới hoặc cửa sổ mới. Chúng ta có thể gửi dữ liệu bằng cách sử dụng postMessage () và nó có hai đối số. Họ là -
- message - Tin nhắn cần gửi
- targetOrigin - Tên xuất xứ
Ví dụ
Gửi tin nhắn từ iframe tới nút
var iframe = document.querySelector('iframe');
var button = document.querySelector('button');
var clickHandler = function() {
iframe.contentWindow.postMessage('The message to send.',
'https://www.tutorialspoint.com);
}
button.addEventListener('click',clickHandler,false);
Nhận thông báo tài liệu chéo trong tài liệu nhận
var messageEventHandler = function(event){
// check that the origin is one we want.
if(event.origin == 'https://www.tutorialspoint.com') {
alert(event.data);
}
}
window.addEventListener('message', messageEventHandler,false);
Nhắn tin kênh
Giao tiếp hai chiều giữa các bối cảnh duyệt được gọi là tin nhắn kênh. Nó hữu ích cho việc giao tiếp giữa nhiều nguồn gốc.
Đối tượng MessageChannel và MessagePort
Trong khi tạo messageChannel, nội bộ nó tạo ra hai cổng để gửi dữ liệu và chuyển tiếp đến một ngữ cảnh duyệt khác.
postMessage() - Đăng tin ném kênh
start() - Nó gửi dữ liệu
close() - Nó đóng các cổng
Trong trường hợp này, chúng tôi đang gửi dữ liệu từ iframe này sang iframe khác. Ở đây chúng tôi đang gọi dữ liệu trong hàm và chuyển dữ liệu đến DOM.
var loadHandler = function() {
var mc, portMessageHandler;
mc = new MessageChannel();
window.parent.postMessage('documentAHasLoaded','http://foo.example',[mc.port2]);
portMessageHandler = function(portMsgEvent) {
alert( portMsgEvent.data );
}
mc.port1.addEventListener('message', portMessageHandler, false);
mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);
Đoạn mã trên, nó đang lấy dữ liệu từ cổng 2, bây giờ nó sẽ chuyển dữ liệu sang iframe thứ hai
var loadHandler = function() {
var iframes, messageHandler;
iframes = window.frames;
messageHandler = function(messageEvent) {
if( messageEvent.ports.length > 0 ) {
// transfer the port to iframe[1]
iframes[1].postMessage('portopen','http://foo.example',messageEvent.ports);
}
}
window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);
Bây giờ tài liệu thứ hai xử lý dữ liệu bằng cách sử dụng hàm portMsgHandler.
var loadHandler() {
// Define our message handler function
var messageHandler = function(messageEvent) {
// Our form submission handler
var formHandler = function() {
var msg = 'add <[email protected]> to game circle.';
messageEvent.ports[0].postMessage(msg);
}
document.forms[0].addEventListener('submit',formHandler,false);
}
window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);
Cross-origin resource sharing (CORS) là một cơ chế cho phép các tài nguyên bị hạn chế từ một miền khác trong trình duyệt web.
Giả sử, nếu bạn nhấp vào trình phát video HTML5 trong các phần demo html5. nó sẽ yêu cầu sự cho phép của máy ảnh. nếu người dùng cho phép quyền thì chỉ nó mới mở máy ảnh hoặc nếu không nó sẽ không mở máy ảnh cho các ứng dụng web.
Đưa ra yêu cầu CORS
Ở đây, Chrome, Firefox, Opera và Safari đều sử dụng đối tượng XMLHttprequest2 và Internet Explorer sử dụng đối tượng XDomainRequest tương tự.
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// Check if the XMLHttpRequest object has a "withCredentials" property.
// "withCredentials" only exists on XMLHTTPRequest2 objects.
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// Otherwise, check if XDomainRequest.
// XDomainRequest only exists in IE, and is IE's way of making CORS requests.
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// Otherwise, CORS is not supported by the browser.
xhr = null;
}
return xhr;
}
var xhr = createCORSRequest('GET', url);
if (!xhr) {
throw new Error('CORS not supported');
}
Xử lý sự kiện trong CORS
Sr.No. | Xử lý sự kiện & mô tả |
---|---|
1 | onloadstart Bắt đầu yêu cầu |
2 | onprogress Tải dữ liệu và gửi dữ liệu |
3 | onabort Hủy bỏ yêu cầu |
4 | onerror yêu cầu đã thất bại |
5 | onload yêu cầu tải thành công |
6 | ontimeout đã hết thời gian trước khi yêu cầu có thể hoàn thành |
7 | onloadend Khi yêu cầu hoàn thành hoặc thành công hoặc thất bại |
Ví dụ về sự kiện onload hoặc onerror
xhr.onload = function() {
var responseText = xhr.responseText;
// process the response.
console.log(responseText);
};
xhr.onerror = function() {
console.log('There was an error!');
};
Ví dụ về CORS với trình xử lý
Ví dụ dưới đây sẽ hiển thị ví dụ về makeCorsRequest () và trình xử lý onload
// Create the XHR object.
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// XHR for Chrome/Firefox/Opera/Safari.
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// CORS not supported.
xhr = null;
}
return xhr;
}
// Helper method to parse the title tag from the response.
function getTitle(text) {
return text.match('<title>(.*)?</title>')[1];
}
// Make the actual CORS request.
function makeCorsRequest() {
// All HTML5 Rocks properties support CORS.
var url = 'http://www.tutorialspoint.com';
var xhr = createCORSRequest('GET', url);
if (!xhr) {
alert('CORS not supported');
return;
}
// Response handlers.
xhr.onload = function() {
var text = xhr.responseText;
var title = getTitle(text);
alert('Response from CORS request to ' + url + ': ' + title);
};
xhr.onerror = function() {
alert('Woops, there was an error making the request.');
};
xhr.send();
}
Web RTC do World Wide Web Consortium (W3C) giới thiệu. Điều đó hỗ trợ các ứng dụng trình duyệt trình duyệt để gọi thoại, trò chuyện video và chia sẻ tệp P2P.
Nếu bạn muốn thử? web RTC có sẵn cho Chrome, Opera và Firefox. Một nơi tốt để bắt đầu là ứng dụng trò chuyện video đơn giản tại đây . Web RTC triển khai ba API như hình dưới đây:
MediaStream - có quyền truy cập vào máy ảnh và micrô của người dùng.
RTCPeerConnection - có quyền truy cập vào cơ sở gọi âm thanh hoặc video.
RTCDataChannel - có quyền truy cập vào giao tiếp ngang hàng.
MediaStream
MediaStream đại diện cho các luồng phương tiện được đồng bộ hóa, Ví dụ: Nhấp vào Trình phát video HTML5 trong phần trình diễn HTML5 hoặc nếu không, hãy nhấp vào đây .
Ví dụ trên chứa stream.getAudioTracks () và stream.VideoTracks (). Nếu không có đoạn âm thanh, nó sẽ trả về một mảng trống và nó sẽ kiểm tra luồng video, nếu webcam được kết nối, stream.getVideoTracks () trả về một mảng gồm một MediaStreamTrack đại diện cho luồng từ webcam. Một ví dụ đơn giản là các ứng dụng trò chuyện, một ứng dụng trò chuyện được phát trực tiếp từ máy ảnh web, máy ảnh sau, micrô.
Mã mẫu của MediaStream
function gotStream(stream) {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();
// Create an AudioNode from the stream
var mediaStreamSource = audioContext.createMediaStreamSource(stream);
// Connect it to destination to hear yourself
// or any other node for processing!
mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);
Chụp màn hình
Nó cũng có thể trong trình duyệt Chrome với mediaStreamSource và nó yêu cầu HTTPS. Tính năng này chưa có trong opera. Bản demo mẫu có sẵn tại đây
Kiểm soát phiên, Thông tin mạng & phương tiện
Web RTC yêu cầu giao tiếp ngang hàng giữa các trình duyệt. Cơ chế này yêu cầu báo hiệu, thông tin mạng, điều khiển phiên và thông tin phương tiện. Các nhà phát triển web có thể chọn cơ chế khác nhau để giao tiếp giữa các trình duyệt như SIP hoặc XMPP hoặc bất kỳ giao tiếp hai chiều nào. Một ví dụ mẫu của XHR là ở đây .
Mã mẫu của createSignalingChannel ()
var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;
// run start(true) to initiate a call
function start(isCaller) {
pc = new RTCPeerConnection(configuration);
// send any ice candidates to the other peer
pc.onicecandidate = function (evt) {
signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
};
// once remote stream arrives, show it in the remote video element
pc.onaddstream = function (evt) {
remoteView.src = URL.createObjectURL(evt.stream);
};
// get the local stream, show it in the local video element and send it
navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
selfView.src = URL.createObjectURL(stream);
pc.addStream(stream);
if (isCaller)
pc.createOffer(gotDescription);
else
pc.createAnswer(pc.remoteDescription, gotDescription);
function gotDescription(desc) {
pc.setLocalDescription(desc);
signalingChannel.send(JSON.stringify({ "sdp": desc }));
}
});
}
signalingChannel.onmessage = function (evt) {
if (!pc)
start(false);
var signal = JSON.parse(evt.data);
if (signal.sdp)
pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
else
pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
};