Các quy tắc cơ bản của HTML5 Phần 4: Phần cuối

Vai trò của tác giả HTML5, một sự kết hợp dũng cảm của nhà thiết kế và nhà phát triển, là để xây dựng các ứng dụng Internet phong phú có hiệu quả (RIA) và đặc biệt là các UI phong phú. Về hiệu quả tôi muốn nói về việc tạo các cải tiến nói chung và các cải tiến có tính hệ thống mà về mặt kỹ thuật số làm cho đàm thoại dễ dàng giữa chủ sở hữu trang web, các đại lý của chủ sở hữu và người sử dụng của trang web.
Các RIA là nguồn gốc và phương tiện truyền bá kinh nghiệm làm thỏa mãn người dùng và, do đó, là một phần thiết yếu của bất kỳ công việc kinh doanh lấy mạng làm trung tâm thành công nào. Theo tự nhiên, các hoạt động lấy mạng làm trung tâm có tính chất cộng tác ở mức độ này hay khác. Một cách tiếp cận thành công với sự cộng tác kỹ thuật số là cần thiết cho sự thành công của đại lý ở tất cả các cấp, bao gồm tiếp thị và quản lý. Cần vượt qua khả năng để trang web đáp ứng được những mong đợi về chất lượng của khách truy cập của nó.
HTML5, như bạn đã thấy, là hoàn toàn thích hợp cho "một thế giới web" có tính cộng tác về các khả năng xuyên qua các nền tảng, hội tụ viễn thông, ngôn ngữ thống nhất, điện toán ở khắp nơi, và các hệ thống mở. Ba bài đăng đầu tiên của loạt bài này tập trung vào ngữ nghĩa, các phương thức mã hóa thích hợp, đầu vào đóng vai trò trong quá trình trao đổi quan trọng, và các cách thực hành tốt nhất về quản lý trang web, tất cả đều được thiết kế để đặt nền móng tạo ra các RIA theo cách có tổ chức và hợp lý. Các chủ đề phổ biến trong mỗi bài viết đã đăng là việc sản xuất và quản lý một trải nghiệm người dùng phong phú là rất quan trọng để đạt được các mục tiêu đại lý của chủ sở hữu trang web đó. Canvas của HTML5 đóng một vai trò quan trọng trong sự phát triển các RIA hiệu quả.

Canvas là?

Canvas HTML5 là một phần tử vẽ và tạo hình ảnh động vô cùng có ích. Canvas sử dụng JavaScript để vẽ đồ họa trực tiếp trên trang web. Đây là vùng chữ nhật mà bạn định nghĩa và điều khiển và nó cho phép dựng hình 2D và hình ảnh bitmap động, theo bảng kịch bản lệnh.
Canvas HTML5 là lý tưởng để sản xuất tài liệu hình ảnh thú vị nhằm nâng cao các UI, các bản vẽ, các album ảnh, các biểu đồ, các đồ thị, các hình ảnh động, và các ứng dụng bản vẽ nhúng. Phần tử Canvas có một số phương thức để vẽ các đường, hình chữ nhật, hình tròn, và các nhân vật.

Các tọa độ canvas

Một điều kiện tiên quyết để vẽ trên canvas (khung nền ảnh) là phải biết rõ về vùng lưới hoặc vùng tọa độ. Các phép đo vùng khung nền này theo chiều rộng và chiều cao được tính bằng pixel (điểm ảnh). Canvas được dựng lên xung quanh việc sử dụng các tọa độ x và y. Các tọa độ của canvas tại x=0, y=0 nằm ở góc trên bên trái.
Các thuộc tính mặc định cho vùng hình chữ nhật của canvas có chiều rộng là 300 pixels và chiều cao là 150 pixels, nhưng bạn có thể xác định kích thước chính xác của phần tử canvas này bằng cách quy định chiều rộng và chiều cao. Bản vẽ trong Hình 1 cho thấy cách triển khai thực hiện tọa độ x và y.

Hình 1. Các tọa độ canvas

Hình 1 cho thấy một vùng canvas 100 pixel x 100 pixel:

• Các góc trên bên trái có x=0, y=0.
• Giá trị x tăng theo chiều ngang, và giá trị y tăng theo chiều dọc.
• Góc dưới cùng bên phải có x=100, y=100.
• Tâm điểm có x=50, y=50.

Bắt đầu

Để đặt bất cứ thứ gì trên canvas (khung nền ảnh), trước tiên bạn phải định nghĩa canvas trong tệp HTML. Bạn phải tạo mã JavaScript để truy cập thẻ <canvas> và giao tiếp với Canvas API của HTML5 để vẽ hình ảnh của bạn.
Cấu tạo chính của thẻ <canvas> là:

<canvas id="myCanvas" width="200" height="200"></canvas>

Một phần tử canvas có hai thuộc tính riêng của nó: width (chiều rộng) và height (chiều cao). Ngoài ra, phần tử canvas còn sở hữu tất cả các thuộc tính HTML5 quan trọng, chẳng hạn như class (lớp), id (mã định danh), và name (tên). Thuộc tính id thường dùng trong các mã được hiển thị ở trên. JavaScript sử dụng id của phần tử canvas được tạo ở đây để xác định phần tử canvas để vẽ lên. JavaScript xác định phần tử canvas thích hợp bằng cách sử dụng phương thức document.getElementById(), như được hiển thị dưới đây:

var canvas = document.getElementById("myCanvas");

Mỗi phần tử canvas phải có một định nghĩa ngữ cảnh, như hình dưới đây. Hiện nay, đặc tả chính thức chỉ công nhận môi trường 2D:

var context = canvas.getContext("2d");

Sau khi bạn xác định phần tử canvas và xác định rõ ngữ cảnh của nó, bạn đã sẵn sàng bắt đầu vẽ.

Các công cụ vẽ, các hiệu ứng, và các phép biến đổi

Cuộc thảo luận này về Canvas của HTML5 đi qua các công cụ vẽ, các hiệu ứng, và các phép chuyển đổi khác nhau. Các công cụ vẽ bao gồm:

• Các đường kẻ
• Các hình chữ nhật
• Các cung tròn
• Các đường cong Bezier và đường cong bậc hai
• Các hình tròn và hình bán nguyệt

Các hiệu ứng Canvas mà bạn sẽ sử dụng là:

• Tô đầy và các nét
• Các gradien tuyến tính và xuyên tâm

Các phép biến đổi được thảo luận bao gồm:

• Tỉ lệ
• Quay tròn
• Tịnh tiến

Các đường vẽ

Để vẽ một đường trên canvas, sử dụng các phương thức moveTo(), lineTo(), và stroke(). Ngoài ra, bạn sử dụng phương thức beginPath() để thiết lập lại đường dẫn hiện tại:

• context.beginPath();
• Context.moveTo(x,y);
• Context.lineTo(x,y);
• Context.stroke(x,y);

Phương thức beginPath() bắt đầu một đường dẫn mới. Trước khi bạn vẽ một đường kẻ mới với các đường dẫn nhỏ khác nhau, bạn phải sử dụng phương thức beginPath() để cho biết rằng một điểm khởi đầu mới cho hướng đi của bản vẽ. Không cần phải gọi phương thức beginPath() khi bạn vẽ đường thẳng đầu tiên.
Phương thức moveTo() cho biết nơi bắt đầu đường dẫn nhỏ mới. Phương thức lineTo() tạo các đường dẫn nhỏ. Bạn có thể thay đổi sự xuất hiện của đường kẻ bằng các phần tử lineWidth và strokeStyle. Phần tử lineWidth thay đổi độ dày của đường này, và strokeStyle thay đổi màu sắc.
Trong Hình 2, ba đường kẻ được vẽ tương ứng bằng màu xanh dương, xanh lá cây, và màu đỏ tía.

Hình 2. Canvas có các đường kẻ theo ba màu khác nhau

Các đường kẻ trong Hình 2 do đoạn mã trong Liệt kê 1 tạo ra. Đường kẻ màu xanh dương có hai đầu làm tròn được tạo ra bằng cách đầu tiên thiết lập một đường dẫn mới để bắt đầu: context.beginPath(). Tiếp theo là:

• context.moveTo(50, 50), đặt điểm đầu cho đường dẫn này (x=50, y-50)
• context.lineTo(300,50), xác định điểm cuối cho đường kẻ này
• context.lineWidth = 10, là độ rộng của đường kẻ này
• context.strokeStyle = "#0000FF", là màu sắc của đường kẻ này
• context.lineCap = "round", làm tròn các đầu đường kẻ
• context.stroke(), thực sự vẽ đường kẻ này trên canvas

Tất cả các đường kẻ đều có chiều dài là 50 pixel, mặc dù chúng xuất hiện có các chiều dài khác nhau — một ảo giác gây ra bởi các mũ đường kẻ khác nhau. Có ba kiểu mũ đường kẻ có thể:

• Context.round (xanh dương)
• Context.square (xanh lá cây)
• Context.butt (màu đỏ tía — mặc định)

Mũ ghép là giá trị mặc định. Khi bạn sử dụng một kiểu mũ tròn hoặc hình vuông, chiều dài của đường kẻ này tăng lên một lượng đúng bằng chiều rộng của đường kẻ này. Ví dụ, một đường kẻ dài 200 pixel và rộng 10 pixel có kiểu mũ tròn hoặc vuông sẽ có chiều dài đường kẻ là 210 pixel, bởi vì mỗi nắp sẽ bổ sung thêm 5 pixel cho mỗi đầu của đường kẻ này. Một đường kẻ dài 200 pixel và rộng 20 pixel có kiểu mũ tròn hoặc vuông sẽ có chiều dài đường kẻ kết quả là 220 pixel, vì mỗi mũ sẽ thêm 10 pixel cho mỗi đầu của đường kẻ này.
Thực hiện và làm thay đổi mã trong Liệt kê 1 để có được hiểu biết nhiều hơn về cách vẽ các đường kẻ.

Liệt kê 1. Tạo ba đường kẻ có màu khác nhau trên canvas

<!DOCTYPE HTML>
<html>
    <head>
	    <title>Line Example</title>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
            
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script>
            
          window.onload = function() {
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                
                // blue line with round ends
                context.beginPath();
                context.moveTo(50, 50);
                context.lineTo(300,50);
                context.lineWidth = 10;
                context.strokeStyle = "#0000FF"; 
                context.lineCap = "round";
                context.stroke();

                // green line with square ends
                context.beginPath();
                context.moveTo(50, 100);
                context.lineTo(300,100);
                context.lineWidth = 20;
                context.strokeStyle = "#00FF00"; 
                context.lineCap = "square";
                context.stroke();

                // purple line with butt ends
                context.beginPath();
                context.moveTo(50, 150);
                context.lineTo(300, 150);
                context.lineWidth = 30;
                context.strokeStyle = "#FF00FF"; 
                context.lineCap = "butt";
                context.stroke();
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="400" height="200">
        </canvas>

    </body>
</html>

Vẽ các hình chữ nhật

Có ba phương thức để xử lý một vùng hình chữ nhật trên canvas:

• fillRect(x,y,width,height), vẽ một hình chữ nhật thêm vào
• strokeRect(x,y,width,height), vẽ nét ngoài của một hình chữ nhật
• clearRect(x,y,width,height), xóa vùng cụ thể và làm cho nó hoàn toàn trong suốt

Đối với một trong ba phương thức nói trên, x và y chỉ ra vị trí trên canvas tương đối so với góc trên bên trái của hình chữ nhật (x=0, y=0), và width và height tương ứng là chiều rộng và chiều cao của hình chữ nhật.
Hình 3 cho thấy ba vùng hình chữ nhật do đoạn mã trong Liệt kê 2 tạo ra.

Hình 3. Canvas hình chữ nhật

Phương thức fillRect() tạo ra một hình chữ nhật được tô đầy bằng màu đen mặc định. Phương thức clearRect() xóa một vùng hình chữ nhật ở giữa hình chữ nhật đầu tiên. Đó là cùng giữa hình chữ nhật được hình thành bởi phương thức fillRect(). Phương thức strokeRect tạo ra một hình chữ nhật chỉ có đường viền màu đen nhìn thấy được.

Liệt kê 2. Mã canvas hình chữ nhật

<!DOCTYPE HTML>
<html>
<head>
<title>Rectangle Example</title>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
            
            #myCanvas {
                border: 1px solid #000000;
                background-color: #ffff00;
            }
        </style>
<script type="text/javascript">
function drawShape(){
   var canvas = document.getElementById('myCanvas');

    var context = canvas.getContext('2d');


    context.fillRect(25,25,50,50);
    context.clearRect(35,35,30,30);
    context.strokeRect(100,100,50,50);

}
</script>
</head>
<body onload="drawShape();">
   <canvas id="myCanvas" width="200" height="200"></canvas>
</body>
</html>

Vẽ các cung, các đường cong, các hình tròn, và các hình bán nguyệt

Cả hai hình tròn và hình bán nguyệt đều sử dụng phương thức arc(). Phương thức arc() có sáu đối số:

context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);

Các đối số centerX và centerY là các tọa độ của tâm hình tròn. Đối số radius (bán kính) giống như với toán học là: một đường thẳng từ tâm đến chu vi. Cung được tạo ra sẽ là một phần của hình tròn đã định. Các đối số startAngle và endAngle tương ứng là điểm đầu và điểm cuối của cung tính bằng radian. Đối số anticlockwise (ngược chiều kim đồng hồ) là một giá trị Boolean. Khi giá trị này true (đúng) thì cung được vẽ ngược chiều kim đồng, khi là false (sai) thì cung được vẽ theo chiều kim đồng hồ.
Để vẽ một hình tròn bằng phương thức arc(), hãy định nghĩa góc đầu là 0 và góc cuối là 2*PI, như được hiển thị dưới đây:

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

Để vẽ một hình bán nguyệt bằng phương thức arc(), hãy xác định góc cuối là startingAngle + PI, như được hiển thị dưới đây:

context.arc(centerX, centerY, radius, startingAngle, startingAngle + Math.PI, false);

Đường cong bậc hai

Bạn tạo một đường cong bậc hai bằng cách sử dụng phương thức quadraticCurveTo() được hiển thị dưới đây. Các đường cong bậc hai được xác định bởi điểm ngữ cảnh, một điểm điều khiển, và một điểm cuối. Điểm điều khiển xác định độ cong của đường thẳng này.

context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, endX, endY);

Đường cong Bezier

Cũng như với đường cong bậc hai, đường cong Bezier có một điểm đầu và cuối; nhưng không giống đường cong bậc hai, nó có hai điểm điều khiển:

context.moveTo(x, y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);

Bạn tạo một đường cong Bezier bằng phương thức bezierCurveTo(). Vì đường cong Bezier được định nghĩa có hai điểm điều khiển chứ không phải chỉ có một, nên bạn có thể tạo các độ cong phức tạp hơn.
Hình 4 hiển thị — từ trái sang phải — một cung, một đường cong bậc hai, một đường cong Bezier, một hình bán nguyệt, và một hình tròn.

Hình 4. Cung, các đường cong, và các hình tròn

Hình 4 được tạo bằng cách sử dụng mã trong Liệt kê 3.

Liệt kê 3. Mã của cung, đường cong, và hình tròn

<!DOCTYPE HTML>
<html>
    <head>
	<title>Arcs, Curves, Circles, & Semicircles</title>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
            
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
<script>
function drawArc(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    var centerX = 100;
    var centerY = 160;
    var radius = 75;
    var startingAngle = 1.1 * Math.PI;
    var endingAngle = 1.9 * Math.PI;
    var counterclockwise = false;
 
    context.arc(centerX, centerY, radius, startingAngle, 
        endingAngle, counterclockwise);
 
    context.lineWidth = 10;
    context.strokeStyle = "black"; 
    context.stroke();
};

function drawQuadratic(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    context.moveTo(200, 150);
 
    var controlX = 288;
    var controlY = 0;
    var endX = 388;
    var endY = 150;
 
    context.quadraticCurveTo(controlX, controlY, endX, endY);
    context.lineWidth = 10;
    context.strokeStyle = "black"; 
    context.stroke();
};

function drawBezier(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    context.moveTo(350, 350);
 
    var controlX1 = 440;
    var controlY1 = 10;
    var controlX2 = 550;
    var controlY2 = 10;
    var endX = 500;
    var endY = 150;
 
    context.bezierCurveTo(controlX1, controlY1, controlX2, 
        controlY2, endX, endY);
 
    context.lineWidth = 10;
    context.strokeStyle = "black"; 
    context.stroke();
};

function drawCircle(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    var centerX = 450;
    var centerY = 375;
    var radius = 70;
 
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
 
    context.fillStyle = "#800000";
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = "black";
    context.stroke();
};


function drawSemicircle(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    var centerX = 100;
    var centerY = 375;
    var radius = 70;
    var lineWidth = 5;
 
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, Math.PI, false);
    context.closePath();
 
    context.lineWidth = lineWidth;
    context.fillStyle = "#900000";
    context.fill();
    context.strokeStyle = "black";
    context.stroke();
};

window.onload = function (){
drawArc();
drawQuadratic(); 
drawBezier(); 
drawCircle(); 
drawSemicircle()
}
</script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="500">
        </canvas>
    </body>
</html>

Các phép biến đổi: tịnh tiến, tỷ lệ, và quay tròn

Các phương thức translate(), scale(), và rotate() tất cả đều sửa đổi ma trận hiện tại. Phương thức translate(x, y) di chuyển các mục trên canvas đến một điểm khác trên lưới. Trong phương thức translate(x,y), các tọa độ (x,y) cho biết số điểm ảnh mà ảnh nên được di chuyển theo hướng-x và số điểm ảnh mà ảnh phải được di chuyển theo hướng-y.
Nếu bạn vẽ một ảnh tại (15,25) bằng phương thức drawImage(), bạn có thể sử dụng phương thức translate() có các đối số (20,30), để đặt ảnh này ở vị trí (15+20, 25+30) = (35, 55).
Phương thức scale(x,y) thay đổi kích thước của một ảnh. Đối số x xác định rõ hệ số tỷ lệ theo chiều ngang, và đối số y xác định rõ hệ số tỷ lệ theo chiều dọc. Ví dụ, scale(1.5, .75) sẽ tạo một ảnh lớn hơn 50% theo hướng x và chỉ bằng 75% kích thước hiện tại theo hướng y. Phương thức rotate(angle) chuyển đổi một đối tượng dựa trên góc đã định.
Hình 5 là một ví dụ về những gì có thể được đưa ra khi sử dụng các phương thức translate(), scale(), và rotate().

Hình 5. Sử dụng các phép biến đổi

Liệt kê 4 cung cấp đoạn mã đã tạo ảnh trong Hình 5.

Liệt kê 4. Mã để tạo các phép biến đổi

<!DOCTYPE HTML>
<html>
<head>
<Title>Transformations Example</title>
<script>
 
window.onload = function() {
	var canvas=document.getElementById("myCanvas");
	var context=canvas.getContext("2d");
 
	var rectWidth = 250;
	var rectHeight = 75;
 
	// translate context to center of canvas
	context.translate(canvas.width/2,canvas.height/2); 		
 
	// half the y component 
	context.scale(1,0.5);

	// rotate 45 degrees clockwise
	context.rotate(-Math.PI/4); 
 
	context.fillStyle="blue";
	context.fillRect(-rectWidth/2,-rectHeight/2,
		rectWidth,rectHeight);


	// flip context horizontally
	context.scale(-1,1);
 
	context.font="30pt Calibri";
	context.textAlign="center";
	context.fillStyle="#ffffff";
	context.fillText("Mirror Image",3,10);

}
 
</script>
</head>
<body>
	<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

Các gradien

Một gradien là một vùng tô đầy di chuyển từ một màu này sang màu khác, pha trộn các màu ở nơi chúng giao nhau. Có hai kiểu gradien mà bạn có thể tạo trong Canvas là: tuyến tính và xuyên tâm.
Bạn tạo ra một gradien tuyến tính bằng phương thức createLinearGradient(). Phương thức createLinearGradient(x0,y0,x1,y1) tạo ra một gradien dọc theo một đường thẳng được xác định bởi hai điểm: (x0,y0) và (x1,y1)— tương ứng, là điểm đầu và điểm cuối của gradien. Phương thức này trả về một đối tượng.
Một gradien màu có thể có nhiều màu sắc. Phương thức addcolorStop(offset, color) xác định rõ sự lưu lại màu với màu sắc được chỉ ra cho gradien ở giá trị bù cụ thể. Phương thức addColorStop() cho phép bạn chỉ rõ một giá trị bù giữa 0 và 1, ở đây quá trình chuyển tiếp sang màu bên cạnh bắt đầu. Giá trị 0 là giá trị bù ở một đầu của gradien; 1 là giá trị bù ở đầu kia. Sau khi đã định nghĩa gradien màu, đối tượng gradien có thể được gán cho phương thức fillStyle(). Bạn cũng có thể vẽ văn bản bằng một gradien bằng cách sử dụng phương thức fillText().
Gradien xuyên tâm —createradialGradient(x0,y0,r0,x1,y1,r1)— kết hợp hai hoặc nhiều màu trong một mẫu hình tròn hoặc hình nón bằng cách sử dụng sáu đối số:

• (x0,y0). Tâm của hình tròn đầu tiên của một hình nón
• r0. Bán kính của hình tròn đầu tiên
• (x1,y1). Tâm của hình tròn thứ hai của hình nón
• r1. Bán kính của hình tròn thứ hai

Hình 6 có bốn gradien: một gradien tuyến tính, một gradien văn bản, một gradien tuyến tính theo đường chéo, và một gradien xuyên tâm.

Hình 6. Ví dụ về gradien

Hình 6 đã được tạo bằng cách sử dụng mã trong Liệt kê 5.

Liệt kê 5. Mã mẫu của gradien

<!doctype>
<html>
<head>
<title>Gradient Example</title>
<script>
   window.onload = function() {
      var canvas = document.getElementById("myCanvas");

      var context = canvas.getContext("2d");

      //Let's try the gradient on a rectangle

      // Create a linear gradient 
      var fillColor = context.createLinearGradient(50,50, 150,50);

      // Set  gradient colors
      fillColor.addColorStop(0.15,"red");
      fillColor.addColorStop(0.35,"black");
      fillColor.addColorStop(0.65,"green");
      fillColor.addColorStop(0.87,"yellow");

      // Assign gradient object to fillstyle
      context.fillStyle= fillColor;

      // Draw rectangle
      context.fillRect(50,50,100,100);

      // With text  

      var fillColorText = context.createLinearGradient(300,50,600,50);
 
      fillColorText.addColorStop(0.2,"red");
      fillColorText.addColorStop(0.4,"black");
      fillColorText.addColorStop(0.6,"green");
      fillColorText.addColorStop(0.8,"yellow");


     context.fillStyle= fillColorText;

      context.font="40px verdana";
      context.textBaseline="top";
      context.fillText("With text too!", 300,50)

      // Gradient on a diagonal
      var fillColordiagonal = context.createLinearGradient(50,200, 100,450);

      // Gradient colors
      fillColordiagonal.addColorStop(0.2,"red");
      fillColordiagonal.addColorStop(0.4,"black");
      fillColordiagonal.addColorStop(0.6,"green");
      fillColordiagonal.addColorStop(0.75,"yellow");

      // Assign gradient object to fillstyle
      context.fillStyle= fillColordiagonal;

      // Draw  rectangle
      context.fillRect(50,225, 100,250);

      // Draw radial gradient
     fillColorRadial = context.createRadialGradient(450,300,0, 450,300,200);
     fillColorRadial.addColorStop(0, "red");
     fillColorRadial.addColorStop(0.2, "black");
     fillColorRadial.addColorStop(0.4, "green");
     fillColorRadial.addColorStop(0.7, "yellow");
     context.fillStyle = fillColorRadial;
     context.rect(300,200,500,400);
     context.fill();

}
</script>
</head>
<body>
<div>
    <p><canvas id="myCanvas" width="600" height="400"></canvas></p>
</div>
</body>
</html>

Cắt ảnh

Bạn có thể thay đổi các ảnh bằng cách cắt các vùng đã chọn bên ngoài chúng. Cắt trên canvas là một hàm chất tải lên phương thức drawImage(). Phương thức drawImage() có ba tùy chọn. Bạn có thể sử dụng hoặc ba, năm, hoặc chín đối số.
Cấu hình ba-đối số —drawImage(image, dx, dy)— vẽ ảnh này trên canvas ở tọa độ đích (dx, dy). Các tọa độ này thiết lập góc trên bên trái của hình ảnh.
Cấu hình năm-đối số —drawImage(image, dx, dy, dw, dh)—đưa ra chiều rộng và chiều cao của ảnh đích. Hình ảnh này được điều chỉnh để phù hợp với chiều rộng và chiều cao của đích này.
Cấu hình chín-đối số —drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)— lấy một hình ảnh, cắt rời ra một vùng hình chữ nhật bắt đầu ở các tọa độ nguồn (sx,sy) với chiều rộng và chiều cao (sw,sh), và điều chỉnh nó cho phù hợp với chiều rộng và chiều cao (dw,dh) của đích này, đặt nó trên canvas tại (dx,dy).
Hình 7 cho thấy hình ảnh mà bạn sẽ cắt ra.

Hình 7. Cắt một ảnh

 

Khi sử dụng ảnh được hiển thị trong Hình 7, một tập các ảnh được đặt trên canvas (khung nền ảnh) này. Một ảnh là một canvas đã định kích thước và được sử dụng làm khung nền. Một ảnh khác được tạo ra nhỏ hơn và chèn vào phía dưới bên phải của khung nền đó. Một ảnh thứ ba là ảnh cắt ra phần đầu của Napoleon mà bạn đặt ở góc trên bên trái của khung nền này. Ảnh đã cắt xong được hiển thị trong Hình 8.

Hình 8. Ảnh đã cắt xong

Hình 8 được tạo bằng cách sử dụng đoạn mã trong Liệt kê 6. Trước khi thực hiện mã này, hãy chắc chắn tải tệp ảnh Napolean.png được dùng trong ví dụ này.

Liệt kê 6. Đoạn mã để cắt ảnh ví dụ

<!doctype>
<html>
<head>
<title>Crop Example</title>
<script type="text/javascript">
  window.onload = function()  {
  var canvas=document.getElementById("cropNapolean");
	var context=canvas.getContext("2d");
 
	var imageObj = new Image();
	imageObj.onload = function() {
	// draw image to cover the entire canvas
		context.drawImage(imageObj,0,0, 600, 400);
 
	// draw small image in bottom right corner
		var sourceX = 0;
		var sourceY = 0;
		var sourceWidth = 1200;
		var sourceHeight = 801;
		var destX = 300;
		var destY = 200;
		var destWidth = sourceWidth - 900;
		var destHeight = sourceHeight - 600;
 
		context.drawImage(imageObj, sourceX, sourceY, sourceWidth,
			sourceHeight, destX, destY, destWidth, destHeight);
	
	 //draw Napolean's head only
		var sourceNapoleanX = 460;
		var sourceNapoleanY = 25;
		var sourceNapoleanWidth = 250;
		var sourceNapoleanHeight = 175;
		var destNapoleanX = 0;
		var destNapoleanY = 0;
		var destNapoleanWidth = sourceNapoleanWidth - 150 ;
		var destNapoleanHeight = sourceNapoleanHeight - 100;
 
        context.drawImage(imageObj, sourceNapoleanX, sourceNapoleanY, 
             sourceNapoleanWidth, sourceNapoleanHeight, 
               destNapoleanX, destNapoleanY, 
                 destNapoleanWidth, destNapoleanHeight);
	}
	imageObj.src = "Napoleon.png";	
}
</script>
  
  </head>
<body>
  <div>
    <p><canvas id="cropNapolean" width="600" height="400"></canvas></p>
  </div>
</body>
</html>

Hình ảnh động và nhiều canvas

Khi làm việc với hình ảnh động, câu hỏi về các lớp luôn phát sinh. Các lớp cho phép các thành phần được tách rời nhau, làm cho việc mã hóa và gỡ lỗi dễ dàng hơn và hiệu quả hơn. Canvas API không có các lớp, nhưng bạn có thể tạo nhiều khung nền ảnh (canvas).
Hình ảnh động phải được kiểm soát theo thời gian. Vì vậy, để tạo một hình ảnh động, bạn phải giải quyết từng khung hình của hình ảnh động. Canvas API có hạn chế chủ yếu khi nó tạo hình ảnh động: Sau khi một hình được gỡ khỏi canvas, nó vẫn như vậy. Để di chuyển hình này, bạn phải vẽ lại nó.
Để tạo một hình ảnh động:

1. Hãy xóa canvas của các hình bất kỳ đã được vẽ trước đó.
2. Lưu lại trạng thái canvas để đảm bảo trạng thái ban đầu được sử dụng mỗi khi một khung được vẽ.
3. Thực hiện các bước để hiển thị các khung hình.
4. Nếu bạn đã lưu trạng thái đó, hãy khôi phục lại nó trước khi vẽ một khung mới.

Bạn có thể điều khiển hình ảnh động theo hai cách: bằng cách sử dụng các hàm setInterval hay setTimeout, mỗi hàm có thể được dùng để gọi một hàm theo một khoảng thời gian đặt trước. Hàm setInterval thực hiện mã được cung cấp lặp lại nhiều lần. Hàm setTimeout chỉ thực hiện một lần sau khi thời gian đặt trước đã trôi qua.
Hình 9 cho thấy một khung hình của hình ảnh động nhiều canvas của người bơi. Nước ở trên một canvas, và người bơi ở trên một canvas khác.

Hình 9. Hình ảnh động khi sử dụng các hình ảnh trên nhiều canvas

Bạn tạo người bơi bằng cách sử dụng đoạn mã trong Liệt kê 7. Người bơi này sử dụng một gradien tuyến tính để tạo nước. Nước có bốn sắc thái của màu xanh, cung cấp một ảo giác hợp lý của nước. Bạn tạo chuyển động cho người bơi bằng cách sử dụng các giá trị positionX và positionY, để làm thay đổi các tư thế của ảnh. Bạn tạo đầu của người bơi bằng cách sử dụng phương thức arc(). Các chân và cánh tay của người bơi được tạo bằng cách vẽ các đường kẻ rồi thay đổi các vị trí lineTo() của chúng. Bạn thay đổi thân bằng cách thay đổi vị trí moveTo(). Vì đây là một hình ảnh động, nên bạn sẽ phải thực hiện đoạn mã này để xem người bơi chuyển động như thế nào.

Liệt kê 7. Ví dụ về hình ảnh động

<!DOCTYPE HTML>
<html>
    <head>
	<title>Animation & Multiple Canvas Example</title>
<script>            
// Water canvas
function  drawWater() {
    var canvasWater = document.getElementById("myWaterCanvas");
    var contextWater = canvasWater.getContext("2d");
	contextWater.globalAlpha = .50 ;

    // Create a linear gradient fill
    var linearGrad = contextWater.createLinearGradient(0,0,400,400);
    linearGrad.addColorStop(0, '#0000ff'); // sets the first color
    linearGrad.addColorStop(.25, '#0099ff'); // sets the second color
    linearGrad.addColorStop(.50, '#00ccff'); // sets the third color
    linearGrad.addColorStop(.75, '#00ffff'); // sets the fourth color
    contextWater.fillStyle = linearGrad;
    contextWater.fillRect(0,0,400,400);
}

// Swimmer canvas
           setInterval(drawSwimmer, 30);
           var positionX = 0;
           var positionY = 0;
            
          function  drawSwimmer(){
                var canvasSwimmer = document.getElementById("mySwimmerCanvas");
                var contextSwimmer = canvasSwimmer.getContext("2d");
                contextSwimmer.clearRect(0,0,400,400);

                if (positionX < 30)
                  {
                     positionX += 1;
                     positionY += 1;
                  }
                else
                {
                     positionX = 0;
                     positionY = 0;
                }
               

                contextSwimmer.save();

               // draw circle for head
               var centerX = 200;
               var centerY = 50;
               var radius = 20;
 
               contextSwimmer.beginPath();
               contextSwimmer.arc(centerX, centerY+positionY, 
			                         radius, 0, 2 * Math.PI, false);
 
               contextSwimmer.fillStyle = "#000000";
               contextSwimmer.fill();
               contextSwimmer.lineWidth = 5;


                // torso
                contextSwimmer.beginPath();
                contextSwimmer.moveTo(200,70+positionY);
                contextSwimmer.lineTo(200,175);
                contextSwimmer.lineWidth = 10;
                contextSwimmer.strokeStyle = "#000000"; 
                contextSwimmer.lineCap = "round";
                contextSwimmer.stroke();

               // image right arm
                contextSwimmer.beginPath();
                contextSwimmer.moveTo(200, 100);
                contextSwimmer.lineTo(175-positionX,140-positionY);
                contextSwimmer.lineWidth = 10;
                contextSwimmer.strokeStyle = "#000000"; 
                contextSwimmer.lineCap = "round";
                contextSwimmer.stroke();

               // image left arm
                contextSwimmer.beginPath();
                contextSwimmer.moveTo(200, 100);
                contextSwimmer.lineTo(225+positionX,140-positionY);
                contextSwimmer.lineWidth = 10;
                contextSwimmer.strokeStyle = "#000000"; 
                contextSwimmer.lineCap = "round";
                contextSwimmer.stroke();

               // image right leg
                contextSwimmer.beginPath();
                contextSwimmer.moveTo(200, 175);
                contextSwimmer.lineTo(190-positionX,250-positionY);
                contextSwimmer.lineWidth = 10;
                contextSwimmer.strokeStyle = "#000000"; 
                contextSwimmer.lineCap = "round";
                contextSwimmer.stroke();


               // image left leg
                contextSwimmer.beginPath();
                contextSwimmer.moveTo(200, 175);
                contextSwimmer.lineTo(210+positionX,250-positionY);
                contextSwimmer.lineWidth = 10;
                contextSwimmer.strokeStyle = "#000000"; 
                contextSwimmer.lineCap = "round";
                contextSwimmer.stroke();

                contextSwimmer.restore();

           };

</script>

</head>
    <body onload="drawWater();">
        <canvas id="myWaterCanvas" width="400" height="400" style="z-index: 2; 
		              position:absolute;left:0px;top:0px;">
        </canvas>
        <canvas id="mySwimmerCanvas" width="400" height="400" style="z-index: 1; 
		              position:absolute;left:0px;top:0px;">
        </canvas>

    </body>
</html>

Kết luận

Canvas HTML5 là điểm chính để xây dựng các RIA dựa trên trình duyệt. Nó cung cấp một môi trường vẽ thiết thực được JavaScript và trí tưởng tượng của bạn thúc đẩy. Nó không thực sự khó học, và có nhiều công cụ hỗ trợ trên trang web cho nhu cầu rèn luyện và học tập của bạn, bao gồm các cẩm nang, các blog, các bài viết trực tuyến, các hướng dẫn video và không-video, và các ứng dụng mẫu.
Khả năng để thay đổi văn bản và hình ảnh trực quan và để mô phỏng chuyển động làm cho Canvas trở thành một công cụ vô cùng có giá trị. Cho dù bạn tiếp cận nó từ quan điểm của một nhà thiết kế hay nhà phát triển, việc sử dụng Canvas để xây dựng các ứng dụng trò chơi chạy trên các thiết bị di động, hoặc chỉ muốn nâng cao việc sử dụng toàn bộ tài sản thực của màn hình, thì Canvas vẫn là một thành phần quan trọng của trải nghiệm HTML5.            

Read More

Các quy tắc cơ bản của HTML5 Phần 3: Sức mạnh của các API

API là gì?

Một giao diện lập trình ứng dụng (API - Application Programming Interface) là một tập các lệnh và các tiêu chuẩn lập trình để truy cập ứng dụng phần mềm. Với API, bạn có thể thiết kế các sản phẩm được hỗ trợ bởi dịch vụ mà API cung cấp.
HTML5 có một số API mới. Ví dụ:

• Một API vẽ 2D được dùng với phần tử canvas mới để biểu diễn các biểu đồ hoặc hình ảnh trực quan khác.
• Một cơ cấu bộ nhớ đệm API để hỗ trợ các ứng dụng web không nối mạng.
• Một API để phát video và âm thanh được dùng với các phần tử video và âm thanh mới.
• Một history API giúp dễ dàng truy cập lịch sử duyệt web và cho phép các trang web thêm vào nó.
• Một API kéo-và-thả để sử dụng với các thuộc tính draggable (có khả năng kéo).
• Một API chỉnh sửa để sử dụng với thuộc tính contenteditable (có khả năng chỉnh sửa nội dung).
• Lưu trữ phía máy khách với các API JavaScript cho các cặp giá trị-khóa và các cơ sở dữ liệu SQL nhúng.

Bài viết này tập trung vào hai API: Geolocation (Định vị địa lý) và Web Worker (Trình làm việc trên nền Web). Đầu tiên, bài viết phân tích chính các API đó, sau đó bạn sẽ thử tạo một trang có chứa cả hai API này.

Kinh doanh ở khắp mọi nơi: Định vị địa lý

Bạn sử dụng Geolocation API (API Định vị địa lý) để xác định và chia sẻ các vị trí địa lý. API này trả về các tọa độ kinh độ và vĩ độ — thông tin mà các doanh nghiệp có thể sử dụng để cung cấp dịch vụ trong vùng gần đúng tọa độ. Những dịch vụ này thường được gọi là các dịch vụ dựa vào vị trí (LBS - Location-Based Services).
LBS đề cập đến các nguồn dữ liệu địa lý được dùng để xác định vị trí vật lý của thiết bị đang được theo dõi và, do đó, con người có liên quan đến vị trí đó. Chức năng này cung cấp cho các bên quan tâm cơ hội để tương tác với cá nhân đó dựa vào thị trường với một số điểm trung tâm-định vị địa lý quan tâm.
Kinh doanh thực sự liên quan đến việc tạo ra chất lượng, tiện ích, và giá trị cho các khách hàng, trong khi đồng thời tạo ra lợi ích kinh tế và tài chính cho các bên liên quan, các chủ nợ, các cổ đông, các nhân viên, và các nhà cung cấp. LBS có hỗ trợ - Định vị địa lý giúp việc bám sát và theo dõi một gói bưu kiện hay một người dễ dàng hơn khi sử dụng một thiết bị không có trình duyệt hoặc có trình duyệt. Về thương mại, việc định vị địa lý có liên quan đến tất cả việc sử dụng các tài sản địa lý để xác định nơi một người nào đó hoặc một cái gì đó có ở vị trí đó, rồi bán tập thông tin cụ thể đó cho bất kỳ ai muốn sử dụng nó cho các mục đích xã hội, thương mại, hoặc các mục đích khác, dựa vào sự cho phép hợp pháp từ chủ sở hữu thông tin để làm như vậy.

Định vị địa lý hoạt động như thế nào

Geolocation API (API Định vị địa lý) được dựa vào một đặc tính của đối tượng navigator chung: navigator.geolocation. Đối tượng JavaScript navigator cung cấp thông tin có ích về trình duyệt và hệ thống của khách truy cập. Việc định vị địa lý có thể xác định vĩ độ và kinh độ bằng các địa chỉ IP, cơ sở dữ liệu dựa trên-web, các kết nối mạng không dây, và công nghệ phép đo tam giác hoặc GPS (Hệ thống định vị toàn cầu). Cần lưu ý rằng độ chính xác của thông tin định vị địa lý được cung cấp khác nhau dựa trên các phương tiện thu nhận thông tin. Đôi khi, và ở một số địa điểm, bạn có thể không có khả năng nhận được một kết quả định vị đầy đủ hoặc bất kỳ dữ liệu nào.
Các kịch bản lệnh có thể sử dụng đối tượng navigator.geolocation để xác định thông tin vị trí liên quan đến thiết bị lưu trữ của người dùng. Sau khi lấy ra thông tin vị trí, hãy tạo một đối tượng vị trí và đặt nó chung với dữ liệu.
Đối tượng navigator.geolocation có ba phương thức:

• getCurrentPosition()
• watchPosition()
• clearWatch()

Phương thức getCurrentPosition()

Phương thức getCurrentPosition() lấy ra vị trí hiện tại của người dùng, nhưng chỉ một lần. Khi được một kịch bản lệnh gọi, phương thức này cố gắng thu nhận vị trí hiện tại của thiết bị lưu trữ theo cách không đồng bộ. Truyền thông không đồng bộ có nghĩa là người gửi và người nhận không đồng thời được tham gia vào truyền thông. Sử dụng truyền thông không đồng bộ cho phép trình duyệt tiếp tục các hoạt động khác sao cho nó không phải chờ đợi một phản hồi từ thực thể đang thu nhận.
Phương thức getCurrentPosition() có thể có đến ba đối số:

• geolocationSuccess. Gọi lại với vị trí hiện tại (bắt buộc)
• geolocationError. Gọi lại nếu có một lỗi (tùy chọn)
• geolocationOptions. Các tùy chọn định vị địa lý (tùy chọn)

Phương thức navigator.geolocation.getCurrentPositon() trả về vị trí hiện tại của thiết bị lưu trữ theo cuộc gọi lại geolocationSuccess với một đối tượng Position làm tham số. Nếu có lỗi, hàm geolocationError được gọi ra với một đối tượng PositionError. Bạn có thể thiết lập ba đặc tính cho geolocationOptions: enableHighAccuracy, timeout, và maximumAge. Các đặc tính tùy chọn này có khả năng chính xác cao, nếu thiết bị hỗ trợ, tương ứng là, một khoảng thời gian chờ để trả về một vị trí, và một khoảng thời gian tối đa để có thể sử dụng một vị trí đã lưu trữ.
Phương thức getCurrentPosition() được gọi như được hiển thị dưới đây:

void navigator.geolocation.getCurrentPosition(
          geolocationSuccess, geolocationError, geolocationOptions);

Phương thức watchPosition()

Phương thức watchPosition() thăm dò vị trí người dùng một cách thường xuyên, theo dõi để xem liệu vị trí người dùng đã thay đổi chưa. Nó có thể có đến ba đối số.
Khi watchPosition được gọi, nó bắt đầu một quá trình theo dõi không đồng bộ liên quan đến việc thu nhận một đối tượng Position mới và tạo watchID. Nếu việc thu nhận này thành công, geolocationSuccess liên quan tới một đối tượng Position làm đối số được gọi ra. Dựa vào lỗi liên quan đến một phương thức được gọi ra với một đối số geolocationError khác không, phương thức này tạo geolocationError với một đối tượng PositionError làm đối số. Khi vị trí thiết bị thay đổi, một lời gọi lại thích hợp với đối tượng Position mới được gọi ra.
Phương thức watchPosition() được gọi như được hiển thị dưới đây:

long navigator.geolocation.watchPosition(
          geolocationSuccess, geolocationError, geolocationOptions);

Phương thức clearWatch()

Phương thức clearWatch() có tác dụng kết thúc một phương thức watchPosition() đang diễn ra. Phương thức này có thể chỉ có một đối số. Khi được gọi, nó tìm đối số watchID đã khởi động trước đây và ngưng ngay nó lại.
Phương thức clearWatch() được gọi như được hiển thị dưới đây:

void navigator.geolocation.clearWatch(watchID)

Dữ liệu định vị địa lý: Đối tượng Position

Geolocation API trả về một đối tượng Position (vị trí địa lý). Đối tượng này có hai đặc tính: timestamp và coords. Đặc tính timestamp (dấu thời gian) cho biết thời điểm tạo ra dữ liệu định vị địa lý. Đặc tính coords (các tọa độ) có bảy thuộc tính:

• coords.latitude. Vĩ độ ước tính
• oords.longitude. Kinh độ ước tính
• coords.altitude. Độ cao ước tính
• coords.accuracy. Độ chính xác của vĩ độ và kinh độ được cung cấp ước tính theo mét
• coords.altitudeAccuracy. Độ chính xác của độ cao được cung cấp ước tính theo mét
• coords.heading. Hướng di chuyển hiện tại đối với thiết bị đang lưu trữ trên máy chủ theo độ, tính theo chiều kim đồng hồ liên quan đến cực Bắc thực
• coords.speed. Tốc độ dưới đất hiện tại của thiết bị theo mét/giây

Chỉ có ba trong số các thuộc tính được bảo đảm là: coords.latitude, coords.longitude, và coords.accuracy. Các thuộc tính còn lại trả về null (không), tùy thuộc vào các khả năng của thiết bị của bạn và máy chủ định vị tầng sau mà nó trao đổi. Các thuộc tính heading và speed (tốc độ) được tính toán dựa trên vị trí trước đó của người dùng, nếu có thể.

Các trình làm việc trên nền web đến giải cứu

Web workers (Các trình làm việc trên nền web) khắc phục các vấn đề gây ra bởi tính đồng thời. Web workers là câu trả lời của họ HTML5 cho vấn đề đơn-luồng của JavaScript: Chúng chạy các quá trình trên một luồng riêng biệt từ trang chính, bảo vệ trang với các chức năng chính, chẳng hạn như duy trì một giao diện người dùng ổn định.
Một web worker là một tệp JavaScript được nạp và được thực hiện trong nền. Các web worker này cho phép bạn tải một tệp JavaScript động, và sau đó thực hiện một kịch bản lệnh bằng cách sử dụng một quá trình nền mà không ảnh hưởng đến giao diện người dùng. Các web worker có quyền truy cập hạn chế và chỉ được phép truyền qua các chuỗi. Vì web worker không sử dụng luồng giao diện người dùng của trình duyệt, nên chúng không được phép truy cập vào DOM. Các worker có thể sử dụng cả hai tham chiếu self và this cho phạm vi chung của worker. Truyền dẫn của worker và trang cha mẹ đạt được bằng cách sử dụng một mô hình sự kiện và phương thức postMessage().
Vì Web workers có cách hoạt động đa luồng, nên chúng chỉ có thể truy cập một tập con của các tính năng của JavaScript. Web workers có thể:

• Truy cập đối tượng navigator.
• Sử dụng đối tượng vị trí chỉ-đọc.
• Thực hiện XMLHttpRequest để gửi các yêu cầu HTTP hoặc HTTPS.
• Thiết lập một thời gian hoặc khoảng thời gian cho một hoạt động bằng cách sử dụng setTimeout()/clearTimeout() và setInterval()/clearInterval().
• Truy cập bộ nhớ ứng dụng.
• Nhập khẩu kịch bản lệnh bên ngoài bằng cách sử dụng phương thức importScripts().
• Sinh ra các Web worker khác (worker con - subworker - phải có cùng nguồn gốc như trang chính và được đặt trong cùng một vị trí như worker mẹ).

Có hai kiểu web workers: các worker chuyên dụng và các worker chia sẻ.

Web worker chuyên dụng

Một web worker chuyên dụng được liên kết đến kịch bản lệnh tạo ra nó, và nó có thể truyền thông với các thành phần worker hoặc trình duyệt khác. Tuy nhiên, nó không thể truyền thông với các DOM.
Một web worker chuyên dụng được tạo ra bằng cách chuyển một tên tệp JavaScript tới một cá thể worker mới. Bạn tạo ra một worker mới khi sử dụng hàm tạo Worker() bằng cách chỉ rõ địa chỉ URI của kịch bản lệnh đang thực hiện của worker. Để tạo ra một worker chuyên dụng, hãy nhập mã được hiển thị dưới đây, mã này tạo ra một đối tượng Worker chuyên dụng mới Worker:

var worker = new Worker('worker.js');

Các web worker chia sẻ

Các web worker chia sẻ, giống như các worker chuyên dụng, không thể truy cập vào DOM và chỉ có quyền truy cập hạn chế vào các đặc tính cửa sổ. Các web worker chia sẻ chỉ có thể truyền thông với các web worker chia sẻ khác của cùng một miền. Các worker này được tạo ra bằng cách chuyển một tên JavaScript tới một cá thể worker chia sẻ mới..
Các kịch bản lệnh trang có thể truyền thông với các web worker chia sẻ. Tuy nhiên, không giống như các web worker chuyên dụng, bạn truyền thông bằng cách sử dụng một đối tượng port (cổng) và gán cho một trình xử lý sự kiện thông báo. Ngoài ra, bạn phải gọi phương thức start() của port trước khi sử dụng phương thức postMessage() đầu tiên.
Dựa vào việc nhận được thông báo đầu tiên bằng kịch bản lệnh web worker, web worker chia sẻ gán một trình xử lý sự kiện cho cổng hoạt động. Nói chung, trình xử lý sẽ chạy phương thức postMessage() riêng của nó để trả về một thông báo tới mã đang gọi, và sau đó phương thức start() của port tạo một quá trình thông báo cho phép.
Để tạo ra một web worker chia sẻ, bạn phải tạo một đối tượng SharedWorker thay cho đối tượng Worker. Đoạn mã sau đây cho thấy cách tạo một đối tượng SharedWorker mới:

var worker = new SharedWorker('worker.js');

Dựng một trang có cả hai API

Bạn sẽ thiết kế một trang có chứa các mô hình làm việc cơ bản của cả Geolocation API và Web Worker API. Ngoài ra, bạn sử dụng Google Map API (API bản đồ của Google) để đưa ra dữ liệu đã tích lũy làm một bản đồ.
Trang này được thiết lập như trong Hình 1. Trang này bao gồm một vùng Header được tạo ra bằng cách sử dụng các thẻ <header></header>, một vùng Section được tạo ra bằng cách sử dụng các thẻ <section></section>, và một vùng Aside được tạo ra bằng cách sử dụng các thẻ <aside></aside>.

Hình 1. Bố trí trang API

Các vùng <section> và <aside> chứa các API. Vùng Section chứa Geolocation API. Vùng Aside chứa web worker, tính các số nguyên tố.
Khi được thực hiện, trang web này được hiển thị trong Hình 2. Để xem các dữ liệu định vị địa lý, trước tiên bạn phải đồng ý chia sẻ thông tin của bạn. Web worker khởi động khi nạp trang. Nếu bạn muốn xem các số nguyên tố được tìm thấy, hãy nhấn vào Display Web Worker (Hiển thị trình làm việc trên nền web).

Hình 2. Trang web API

Tệp HTML

Tệp HTML bắt đầu bằng thông tin HTML5 chuẩn như trong Liệt kê 1. Phần <head> chứa một lời gọi đến Google Maps API, thiết lập giá trị của bộ cảm biến là False (Sai). Việc sử dụng Google Maps API đòi hỏi bạn cho biết ứng dụng của bạn có đang sử dụng một bộ cảm biến, chẳng hạn như GPS, để thiết lập vị trí không. Bạn phải khai báo một giá trị tham số cảm biến là True (Đúng) hay False (Sai) cho ứng dụng Google Maps API của bạn. Cần phải khai báo một giá trị cảm biến. Thẻ <head> cũng chứa các liên kết đến các tệp JavaScript và sử dụng CSS3 để xử lý các hàm và định dạng trang web.

Liệt kê 1. Bắt đầu tệp HTML

<!doctype html>
<html>
<head>
  <title>Basic GeoLocation Map & Web Worker Prime Number Calculator</title>
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script>
  <LINK href="GeolocationWebWorker.css" rel="stylesheet" type="text/css">
  <script src="HTML-Part3-GeolocationWebWorker.js" type="text/javascript"></script>
</head>

Thẻ <body> chứa một sự kiện onLoad gọi hàm khởi tạo để định vị vị trí địa lý, như trong Liệt kê 2. Hàm này xác minh xem có thể sử dụng định vị vị trí địa lý trong trình duyệt này không. Hàm khởi tạo này có trong tệp JavaScript. Nếu trình duyệt có thể truyền thông với Geolocation API, bản đồ sẽ được hiển thị.

Liệt kê 2. Khởi tạo định vị địa lý

<body onLoad="initGeoApp();">
  <header>
    <hgroup>
      <h1>Geolocation & Web Worker</h1>
      <h2>Making it work</h2>
    </hgroup>
  </header>

Thẻ <section> được hiển thị trong Liệt kê 3 có chứa các thông tin kết quả đầu ra hiển thị cho đối tượng navigator.geolocation. Một canvas bản đồ được tạo ra bằng cách sử dụng các kinh độ và vĩ độ do API trả về. Dữ liệu Position coords cũng được hiển thị khi sử dụng các thẻ <span></span>.

Liệt kê 3. Bản đồ và vị trí của định vị địa lý

<section>
    <p>This is the geolocation example map.</p>
    <div id="map_canvas" ></div>

    <p>This is the output from the navigator.geolocation object.</p>
    <table>
    <tr>
        <td>accuracy:</td>
        <td><span id="accuracyOutput"></span></td>
    </tr>
    <tr>
        <td>altitude:</td>
        <td><span id="altitudeOutput"></span></td>
    </tr>
    <tr>
        <td>altitudeAccuracy:</td>
        <td><span id="altitudeAccuracyOutput"></span></td>
    </tr>
    <tr>
        <td>heading:</td>
        <td><span id="headingOutput"></span></td>
    </tr>
    <tr>
        <td>latitude:</td>
        <td><span id="latitudeOutput"></span></td>
    </tr>
    <tr>
        <td>longitude:</td>
        <td><span id="longitudeOutput"></span></td>
    </tr>
    <tr>
        <td>speed:</td>
        <td><span id="speedOutput"></span></td>
    </tr>
    </table>
   </section>
  <aside>
    <p>This is the Web Worker. </p>
    <p>Prime number calculation result:
    <output id="result"></output></p>

Web Worker tính các số nguyên tố. Bạn sử dụng thẻ <output> mới để hiển thị tính toán do web worker tạo ra. ID được gán trong thẻ <output> có cùng mã ID JavaScript sử dụng để xác định tính toán mà nó thực hiện. Các ID (mã định danh) được sử dụng trong các thẻ <span> và <output> cho phép truy cập vào DOM. Không có ID tham chiếu, mã JavaScript sẽ không biết sử dụng <span> hay <output>. Liệt kê 4 cho thấy kết quả đầu ra từ web worker.

Liệt kê 4. Kết quả đầu ra của Web worker

  <aside>
    <p>This is the Web Worker. </p>
    <p>Prime number calculation result:
    <output id="result"></output></p>

onClick được dùng trong thẻ <input> để trước tiên hiển thị các giá trị đang được web worker Số nguyên tố (Prime Number web worker) tính toán, và sau đó onClick thứ hai được sử dụng để dừng web worker. Liệt kê 5 cho thấy đoạn mã này. Hàm displayWorker() làm cho các tính toán của web worker được hiển thị khi nhấn vào nút này. Web worker đã bắt đầu tính các số nguyên tố khi trang đã được nạp.

Liệt kê 5. Các đầu vào cho web worker

    <input type="button" value="Display Web Worker" onClick="displayWorker();">
    <input type="button" value="Stop Web Worker"    onClick="stopWorker();">

  </aside>
</body>
</html>

Tệp JavaScript

JavaScript là máy phía sau các API được trưng bày trên trang mẫu này. Geolocation API được khởi tạo bằng hàm initGeoApp(). Đây là hàm được thực hiện bằng sự kiện onLoad() trong thẻ <body>: Nó xác định xem trình duyệt của bạn có thể sử dụng định vị địa lý không (xem Liệt kê 6). Nếu trình duyệt của bạn có thể sử dụng định vị địa lý, thì Geolocation API được gọi. Nếu thành công, bản đồ được vẽ bằng cách sử dụng các thuộc tính Position. Các giá trị của các thuộc tính này sau đó được in dưới bản đồ.

Liệt kê 6. Các hàm định vị địa lý

function initGeoApp()
  {
   if( navigator.geolocation )
     { 
        navigator.geolocation.getCurrentPosition( success, failure);
     }
    else
     {
        alert("Your browser does not support geolocation services.");
    }
   }

Các giá trị được lấy ra bằng document.getElementById, dựa trên ID mà bạn đã cung cấp trong tệp HTML. document.getElementById là một phương thức của đối tượng tài liệu và được truy cập bằng document.getElementById, như trong Liệt kê 7. Các giá trị của các thuộc tính Position được lưu trữ ở đây sao cho chúng có thể được sử dụng để in các thuộc tính dưới bản đồ được hiển thị.

Liệt kê 7. Sử dụng getElementById để nhận được các giá trị coords

	     var map;
	     function success(position)
	     {
            document.getElementById("accuracyOutput").innerHTML = 
			     position.coords.accuracy;
            document.getElementById("altitudeOutput").innerHTML = 
			     position.coords.aktitude;
            document.getElementById("altitudeAccuracyOutput").innerHTML = 
			     position.coords.altitudeAccuracy;
            document.getElementById("headingOutput").innerHTML = 
			     position.coords.heading;
            document.getElementById("latitudeOutput").innerHTML = 
			     position.coords.latitude;
            document.getElementById("longitudeOutput").innerHTML = 
			     position.coords.longitude;
            document.getElementById("speedOutput").innerHTML = 
			     position.coords.speed;

Phần này định nghĩa các tọa độ cho đối tượng LatLng của Google Map API, như Liệt kê 8 cho thấy. Đối tượng LatLng của Google Map API cung cấp thông tin tọa độ cần thiết để tạo ra một bản đồ. Bạn có thể thiết lập mức độ phóng to hay thu nhỏ và một số tùy chọn khác để tạo dáng vẻ của bản đồ được đưa ra cho người dùng.

Liệt kê 8. Các tùy chọn Bản đồ của Google

var coordinates = new google.maps.LatLng(position.coords.latitude, 
     position.coords.longitude);

	 
var myOptions =
  {
    zoom: 14,
    center: coordinates,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.small},
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  };

Lưu ý rằng trong tùy chọn mapTypeID, hãy chọn tùy chọn ROADMAP. Giá trị này trình bày bản đồ sao cho nó xuất hiện như trong Hình 2. Có bốn giá trị có thể:

• ROADMAP (Lộ trình)
• HYBRID (Lai)
• SATELLITE (Vệ tinh)
• TERRAIN (Địa hình)

Hình 3 cho thấy trang này sẽ xuất hiện như thế nào với tùy chọn HYBRID được chọn.

Hình 3. Trang web API với bản đồ lai

Tạo bản đồ bằng cách sử dụng ID map_canvas, đó là ID cho <div> trong tệp HTML:

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

Đặt một điểm đánh dấu vị trí ban đầu trên bản đồ. Liệt kê 9 cho thấy mã này.

Liệt kê 9. Đặt một điểm đánh dấu bản đồ ban đầu

      var marker = new google.maps.Marker({
        position: coordinates,
        map: map,
        title: "You are here."
        });
       }
	 
       function failure()
       {
          alert("Sorry, could not obtain location");
        }

Web worker bắt đầu thực hiện khi khởi tạo trang này. Nếu người dùng muốn hiển thị kết quả đầu ra của các tính toán đang được thực hiện, họ có thể nhấn vào Display Web Worker, sẽ gọi hàm displayWorker(). Liệt kê 10 cho thấy đoạn mã này.

Liệt kê 10. Web worker

     var worker = new Worker('PrimeNumberWebWorker.js');

  function displayWorker()  
  {
         worker.onmessage = function (event) 
           {            
             document.getElementById('result').innerHTML = event.data;
           };
    }

Nếu người dùng muốn dừng web worker, họ có thể nhấn vào Stop Web Worker (Dừng Web Worker), sẽ gọi hàm stopWorker(), được hiển thị trong Liệt kê 11.

Liệt kê 11. Kết thúc worker

 function stopWorker() 
   {
       worker.terminate();
     }

File web worker

File tệp này là web worker của trình tính số nguyên tố: nó tính tất cả số nguyên tố cho đến khi bị dừng lại. Liệt kê 12 cho thấy đoạn mã này.

Liệt kê 12. Tính các số nguyên tố

var n = 1;
search: while (true) {
   n += 1;
   for (var i = 2; i <= Math.sqrt(n); i += 1)
      if (n % i == 0)
         continue search;
  postMessage(n);
}

File CSS3

File tệp CSS3 được hiển thị trong Liệt kê 13 cung cấp định dạng hiển thị trong trang HTML5.

Liệt kê 13. Các mô tả CSS3

* {font-family: Arial,Helvetica,sans-serif ;
}

body {
  margin: 0 300px 0 300px;
  color: #990000;
  background-color:#FFFFCC;
}

header > hgroup h1 {
  margin: 0 0 3px 0;
  padding: 0;
  text-align: center;
   font-size: 30px;
}


header > hgroup h2 {
  margin: 0 0 15px 0;
  padding: 0;
  text-align: center;
  font-style: italic;
   font-size: 12px;
}


header p {
  margin: 0 0 20px 0 ;
  padding: 0;
  text-align: center;
   font-size: 12px;
}

aside {
  width: 200px;
  height: 175px;
  margin: -450px 0 0 450px;
  background-color:  #990000;
  padding: .5px 0 0 10px ; 
  color:#FFFFFF;
  font-weight:bold;
}

div {
  width: 400px; 
  height: 250px; 
}

Kết luận

Phần đăng này đã xem xét các tiện ích của Geolocation API và Web Worker API. Hai API này đã được chọn vì chúng cùng chứng tỏ cả hai cách sử dụng sáng tạo và thực tế của các API. Định vị địa lý là một ví dụ hay về việc sử dụng đặc tả HTML5 trong việc tạo ra các mô hình kinh doanh mới. Tương tự như vậy, vai trò của Web Worker là giải quyết về những vấn đề cố hữu trong vấn đề xảy ra đồng thời của JavaScript.
Cả hai API này cùng minh họa một sự kết hợp mô hình sử dụng HTML5 để sử dụng cho thương mại và xã hội. Vì vậy, tiện ích của chúng chứng tỏ sự tạo điều kiện thuận lợi thích hợp và sự quản lý chung của một ứng dụng Internet phong phú của HTML5.

Read More

Các quy tắc cơ bản của HTML5 Phần 2: Thiết lập các đầu vào với HTML 5

Tất cả những việc quản trị, phân tích dữ liệu, chiến lược tiếp thị, và các chức năng khác của các tổ chức mức doanh nghiệp đều quan trọng. Tuy nhiên, nếu như không có một công cụ nào để các khách hàng tiềm năng của bạn sử dụng — hay được thúc đẩy sử dụng — các quá trình ban đầu cần thiết cho sự phát triển của trang web mà thiếu đi sự trao đổi của khách truy cập. Một trải nghiệm tích cực, thân thiện với người sử dụng thúc đẩy sự tương tác cần thiết cho nỗ lực của bạn là một mục tiêu hàng đầu của tổ chức.

Trọng tâm của sự tương tác chính là các form của trang web. Chúng tạo điều kiện trao đổi tương tác với người dùng sao cho các mục tiêu đã thúc đẩy việc xây dựng trang web có thể được nâng lên nhờ thay đổi của khách truy cập trang web. Các form là nhân tố chính cho sự tương tác giữa các trang web và người dùng, do đó chúng cực kỳ quan trọng cho việc thiết kế và phát triển một trang web.

Những điểm chính trong trọng tâm này được thể hiện qua các controls — radio buttons, check boxes, text boxes, number spinners và vân vân. Các phần tử này cần thiết cho việc giao tiếp giữa người dùng và trang web. Nói cách khác, nếu không có các controls này (cả về ý nghĩa vận hành "cơ học" hay cho một nhiệm vụ cụ thể nào đó), thì không thể thực hiện giao tiếp được.

Điều bắt buộc là các mối quan hệ của quá trình trao đổi này được xem xét cẩn thận, bao gồm tất cả các khía cạnh của sự tương tác giữa khách truy cập trang web và hệ thống hiện tại. Tốc độ xác nhận hợp lệ, đầu vào, nhận thức, sự chuyển hướng, việc nạp trang, và cách các trang được thiết lập đều có tác động đến quá trình trao đổi. Các cải tiến và nâng cao tính xác nhận hợp lệ, cùng với sự đa dạng mở rộng của các controls tùy chọn của form được cung cấp và tính chất đa phương tiện chung của các đặc tả HTML5, là tất cả các yêu tố đóng góp cho khả năng của HTML5 trong việc biến một khách truy cập trang web thành một người dùng trang web thực sự.
HTML5 là một công cụ đặc biệt mạnh mẽ để xác nhận hợp lệ và đảm bảo dựa trên web — một tài sản an toàn quan trọng. Nó đặc biệt quan trọng trong việc thiết kế và phát triển các trang web nhằm mục đích thu hút các khách hàng. Vì vậy, sử dụng nó là điều cần thiết để duy trì một tốc độ trao đổi thuận lợi. Nếu bạn không thể vạch ra các triển vọng, thì bạn đang gặp rắc rối; nếu bạn không thể thay đổi các triển vọng mà bạn vạch ra, thì bạn phải hạ cánh khẩn cấp.
Nhưng chúng ta có sự trợ giúp ở đây. Các kiểu HTML5, chẳng hạn như email và telephone, giúp dễ dàng mở rộng các tùy chọn truyền thông. Nhờ kết hợp với sự thông suốt về cấu trúc được nền tảng ngữ nghĩa của HTML5 phổ biến, nên không có rào cản nào trong việc giao tiếp giữa bạn và phần còn lại của thế giới.
Dựa vào thế giới trung tâm mạng của chúng ta, tốc độ phát triển sôi động của nền kinh tế toàn cầu có tính ngẫu nhiên ngày càng tăng, sự phát triển nhanh chóng của điện toán đám mây, sự tăng trưởng theo cấp số nhân trong việc sử dụng các giải pháp công nghệ di động và viễn thông giữa các nền tảng — cả về thương mại lẫn xã hội — rõ ràng là chúng ta đứng trên ngưỡng cửa của một thế giới mới lý tưởng trong tương lai của điện toán và truyền thông dựa trên web. Đó là một thế giới có cả chức năng và kết quả của sự kết hợp lĩnh vực truyền thông và CNTT cũng như các nhu cầu của một xã hội toàn cầu có tính cạnh tranh cao.

Thiết kế form

Các form trong HTML5 đã có nhiều thay đổi lớn. Một số nhiệm vụ mà trước đây đòi hỏi phải dùng JavaScript thì bây giờ có thể dễ dàng được thực hiện mà không cần nó. Ví dụ trong bài viết này phân tích việc sử dụng bộ ứng dụng HTML5 về các đổi mới của form. Bước đầu tiên trong quá trình này, tất nhiên, là hoạch định form.
Bố cục của ví dụ form mà bạn sẽ phát triển được hiển thị trong Hình 1. Bạn sẽ phát triển ba vùng cho trang form này: vùng Header, vùng Form, và vùng Footer. Vùng Header chứa các tiêu đề và phụ đề trang được bọc trong các thẻ <header></header>. Ở dưới cùng của trang, vùng Footer có chứa thông tin bản quyền bên trong các thẻ <footer></footer>. Tôi đã nói về việc xây dựng một vùng Header và một vùng Footer trong ví dụ được cung cấp trong phần 1 của loạt bài này: Nếu bạn chưa quen với các thẻ <header> và <footer>, hãy tham khảo bài viết đó

Hình 1. Bố cục trang form

Việc thảo luận các form này tập trung xoay quanh vào bốn thẻ:

• <form>
• <fieldset>
• <label>
• <input>

Trong HTML5, có hai thuộc tính mới đã được thêm vào thẻ <form> là: autocomplete và novalidate. Thuộc tính autocomplete cho phép xuất hiện danh sách các gợi ý giống như khi tìm kiếm trong Google. Thuộc tính novalidate tắt tính năng xác nhận hợp lệ cho form, điều này rất có ích trong quá trình thử nghiệm.
Thẻ <fieldset> (thiết lập trường) có ba thuộc tính mới là: disable (vô hiệu hóa), name (tên), và form. Thuộc tính disable làm cho thẻ <fieldset> không hoạt động. Thuộc tính name đặt tên cho thẻ <fieldset>. Giá trị thuộc tính form là mã định danh (ID) của form này hay các form thuộc về thẻ <fieldset>. Trong HTML5, một thẻ <fieldset> có thể nằm ngoài form này hay các form mà nó thuộc về. Khi một thẻ <fieldset> được đặt bên ngoài form, bạn phải thiết lập thuộc tính form của thẻ <fieldset> để cho thẻ <fieldset> có thể được liên kết với form hoặc các form đúng.
Thẻ <label> (nhãn), định nghĩa một sự phân loại cho một phần tử đầu vào, có một thuộc tính mới là: form. Giá trị thuộc tính form là ID của form này hay các form mà thẻ <label> thuộc về. Thẻ <label> cũng có thể được đặt ở bên ngoài của form, vì vậy ở đây thuộc tính form cũng được sử dụng để liên kết <label> với form thích hợp.
Thẻ <input> (đầu vào) có một số kiểu mới cũng như các thuộc tính nâng cao khả năng sử dụng của form. HTML5 đã giới thiệu một số các kiểu đầu vào mới được thiết kế để tổ chức và phân loại dữ liệu, sao chép toàn bộ cách tiếp cận ngữ nghĩa của HTML5. Câu quan điểm cũ là form nên thực hiện theo chức năng là một cách tiếp cận thích hợp để mô tả các chức năng của các form HTML5.
Trong HTML5, trường <input> của form có thể nằm ngoài các thẻ <form>. Thuộc tính form xác định form này hay các form mà trường đầu vào thuộc về. Nó cũng xác định form mà nó thuộc về bằng cách đưa ra ID của form. Bảng 1 cho thấy các kiểu <input> mới.

Bảng 1. Các kiểu <input> mới

Các kiểu đầu vào
color	date	datetime	datetime-local	month
week	time	email	number	range
search	tel	url

Bảng 2 cho thấy các thuộc tính <input> mới.

Bảng 2. Các thuộc tính <input> mới

Các thuộc tính đầu vào
autocomplete	autofocus	form	formaction	formenctype
formmethod	formnovalidate	formtarget	height	max
min	multiple	pattern	placeholder	required
step

Trong quá trình tạo trang web, bạn sử dụng hầu hết các kiểu và các thuộc tính này.

Tạo form

Trang web được hiển thị trong Hình 2 là Classical Music Place, một trang web cho phép tải về các tác phẩm của một số nhà soạn nhạc. Trang này cũng cho phép người dùng đăng lên các bản ghi âm của những bản nhạc cổ điển. Đây là trang bạn sẽ tạo ra.

Hình 2. Form Classical Music Place

Cấu tạo của biểu mẫu này bắt đầu bằng thẻ <form>. Trong ví dụ này, bạn sử dụng thuộc tính autocomplete mới, được đưa ra dưới đây:

<form id="orderForm" autocomplete="on"   action="javascript:alertValues();" method="get">

Một action JavaScript cũng được chứa trong thẻ <form>, mà tôi sẽ thảo luận trong phần sau.
Thẻ <form> có bốn thẻ <fieldset>, tương ứng với 4 mục thông tin như Hình 2: Tên, điện thoại, địa chỉ Email, và ngày. Thẻ <fieldset> tạo nhóm các thẻ nội dung trong biểu mẫu. Chúng ta hãy xem xét từng thẻ <fieldset> riêng biệt.

Thẻ <fieldset> đầu tiên

Thẻ <fieldset> đầu tiên chứa thông tin khách hàng (xem Hình 3). Nó có một trường Name, một trường Telephone, một trường Email address, và một trường Date. Trường Name có thuộc tính autofocus, cho phép bạn bắt đầu nhập văn bản vào trường này đầu tiên.

Hình 3. Các trường thông tin khách hàng

Thẻ <fieldset> đầu tiên chứa một thẻ <legend>, một thẻ <label>, và một thẻ <input>, như trong Liệt kê 1. Trường Name, là kiểu text, có ba thuộc tính <input> mới là: placeholder, autofocus, và required.

Liệt kê 1. Trường Name

 <fieldset>
  <legend> Customer Info </legend>
  <p>
    <label>Name:
      <input id="name" name="name" type="text" placeholder="Enter your name" 
	                      autofocus required size="50">
    </label>
  </p>

Thuộc tính autofocus bảo đảm rằng trọng tâm đầu vào sẽ ở trên trường này khi trang được mở ra. Đây là một chức năng cho phép người dùng truy cập ngay lập tức vào biểu mẫu ngay khi trang được mở.
Thuộc tính placeholder đặt văn bản vào giữa các dấu ngoặc kép bên trong trường này dưới dạng văn bản màu xám nhạt. Thuộc tính placeholder sẽ gợi ý cho người dùng biết trường này phải chứa những gì và được hiển thị thế nào khi trường này rỗng. Tuy nhiên, vì các trường Name cũng có thuộc tính autofocus được thiết lập, nên khi bạn truy cập vào trang này, bạn không thể thấy dòng chữ placeholder. Lưu ý rằng trong Hình 3, trường Name không hiển thị placeholder, và nó được đóng khung trong phần đánh dấu màu vàng. Nếu bạn di chuyển đến một trường khác mà không nhập dữ liệu, thì văn bản placeholder sẽ được hiển thị. Khi bạn sử dụng thuộc tính autofocus với thuộc tính placeholder, văn bản placeholder sẽ biến mất do trọng tâm đang được đặt vào trường này.
Thuộc tính required tạo điều kiện thuận lợi cho việc đặt một trường bắt buộc như là một điều kiện tiên quyết để hoàn thành biểu mẫu. Điều này là hợp lệ với các trường văn bản, tìm kiếm, URL, điện thoại, email, mật khẩu, các nút chọn ngày, số, hộp kiểm tra, nút tròn, và các trường tập tin.
Trường Telephone, là kiểu tel, có các thuộc tính required, placeholder, size, và pattern, như trong Liệt kê 2. Kiểu tel là một trường văn bản được thiết kế để chứa các số điện thoại. Trong ví dụ này, trường Telephone có sự hạn chế theo mẫu cần phải được tuân thủ nghiêm ngặt, vì hệ thống sẽ không cho phép bạn đăng tải biểu mẫu cho đến khi bạn sử dụng đúng ký tự cho phép. Thuộc tính placeholder dùng cho trường Telephone sẽ gợi ý thông tin như thế nào là hợp lệ cho bạn.
Trường pattern mô phỏng các chức năng của một biểu thức JavaScript chính quy (regex) truyền thống. Đầu vào phải khớp với cấu trúc mẫu của biểu thức chính quy được định nghĩa trước khi nó được xác nhận hợp lệ. Trường này làm việc với các kiểu text, search, url, telephone, email, và password.

Liệt kê 2. Trường Telephone

 <p>
    <label>Telephone:
      <input id="tel" name="telephone" type="tel" placeholder="Pattern: 1-234-567-8910" 
	       required size="50" pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))">
    </label>
  </p>

Trường địa chỉ Email là kiểu email, như trong Liệt kê 3. Địa chỉ email được xác nhận hợp lệ tự động mà không cần phải sử dụng một mẫu: Xác nhận hợp lệ là một phần của HTML5. Nếu không trình bày địa chỉ email này theo định dạng đúng, thì biểu mẫu không thể được trình lên.

Liệt kê 3. Trường địa chỉ Email

  <p>
    <label>Email address:
      <input id="email" name="email" type="email" placeholder="Enter your email address" 
	            required size="50">
    </label>
  </p>

Mục nhập cuối cùng trong thẻ <fieldset> này là trường Date. Kiểu date cung cấp một bảng lịch để người dùng chọn ngày trong trình duyệt Opera nhưng lại tạo ra một spinner trong Google Chrome, như đã thấy trong Hình 3. Hình 4 cho thấy trình duyệt Opera xử lý trường Date này như thế nào. Lưu ý rằng trong Opera, các góc thiết lập trường này không được làm tròn, mặc dù đã sử dụng cùng một bảng định kiểu để làm tròn các góc như trong Chrome.

Hình 4. Trường Date

Liệt kê 4 cho thấy đoạn mã được sử dụng để tạo nút chọn ngày.

Liệt kê 4. Trường Date

    <p>
      <label>Date: <input type="date">
      </label>
    </p>
 </fieldset>

Bạn có thể tạo ra một bản ghi cho bất kỳ ngày nào. Bạn thậm chí có thể chia nó theo giờ. Dưới đây là các kiểu ngày giờ mà bạn có thể tạo:

• date. Chọn ngày, tháng, và năm
• month. Chọn tháng và năm
• week. Chọn tuần và năm
• time. Chọn thời gian (giờ và phút)
• datetime. Chọn thời gian, ngày, tháng, và năm (thời gian UTC)
• datetime-local. Chọn thời gian, ngày, tháng, và năm (thời gian địa phương)

Thẻ <fieldset> thứ hai

Thẻ <fieldset> thứ hai chứa một thẻ <input> có một thuộc tính list và một thẻ <datalist>. Thuộc tính list quy định một <datalist> của trường đầu vào. Thẻ <datalist> cung cấp một danh sách các tùy chọn trường đầu vào. Thuộc tính list làm việc với các kiểu <input> sau: text, search, url, telephone, email, date pickers, number, range, và color.
Thẻ <datalist> được hiển thị trong một danh sách thả xuống, như trong Hình 5. Ảnh này được chụp từ trình duyệt Opera. Trong Chrome, danh sách này được hiển thị như một hộp văn bản đơn giản. Người dùng sẽ không được trình bày bằng danh sách này.

Hình 5. Trường Favorites

Liệt kê 5 cung cấp thiết lập trường để tạo ra phần Favorite Composer.

Liệt kê 5. Trường Favorite Composer

<fieldset>
  <legend> Favorite Composer </legend>
  <p>
    <label>
  <input type="text" name="favorites" list="composers">
  <datalist id="composers">
   <option value="Bach">
   <option value="Beethoven">
   <option value="Brahms">
   <option value="Chopin">
   <option value="Mendelssohn">
  </datalist>
 </label>
</p>
</fieldset>

Thẻ <fieldset> thứ ba

Thẻ <fieldset> thứ ba hiển thị một danh sách các nhà soạn nhạc, theo sau là một trường số chỉ rõ có bao nhiêu tác phẩm ứng với mỗi nhà soạn nhạc được liệt kê. Hình 6 cho thấy điều này.

Hình 6. Các trường Composers (Các nhà soạn nhạc)

Ví dụ, Bach có năm tác phẩm, và Beethoven có 10 tác phẩm. Liệt kê 6 cho thấy các giá trị tối đa cho mỗi nhà soạn nhạc. Trường số sẽ không chấp nhận nhiều hơn giá trị tối đa khi bạn đăng tải biểu mẫu này. Khi được đăng tải, trường này sẽ phản hồi với các giá trị ngoài phạm vi hay không đúng bằng cách nhắc bạn sửa lại thông tin đã nhập cho phù hợp với các giới hạn số chấp nhận được của trường này.
Kiểu number tạo ra một trường nút quay tròn cho đầu vào. Sử dụng thuộc tính min, max, và step được sử dụng với kiểu số number. Giá trị bước mặc định là 1. Các thuộc tính min, max, và step được sử dụng với các ràng buộc số, phạm vi, hoặc đầu vào nút chọn ngày. Thuộc tính max xác định giá trị tối đa cho phép đối với trường đầu vào. Thuộc tính min xác định giá trị tối thiểu cho phép đối với trường đầu vào. Thuộc tính step xác định bước tăng hợp lệ.

Liệt kê 6. Các trường Composers

<fieldset>
  <legend>Composers</legend>
  <p>
    <label>
      Bach: <input name="form_number" id="form_number" type="number" min="1" max="5" >
    </label>
  </p>
  <p>
    <label>
      Beethoven: <input name="form_number" id="form_number" type="number" 
	      min="1" max="10" >
    </label>
  </p>
  <p>
    <label>
      Brahms: <input name="form_number" id="form_number" type="number" min="1" max="7" >
    </label>
  </p>
  <p>
    <label>
      Chopin: <input name="form_number" id="form_number" type="number" min="1" max="10" >
    </label>
  </p>
  <p>
    <label>
      Mendelssohn: <input name="form_number" id="form_number" type="number" 
	     min="1" max="4">
    </label>
  </p>

 </fieldset>

Thẻ <fieldset> thứ tư

Thẻ <fieldset> thứ tư chứa kiểu <input>file và thuộc tính multiple, như trong Hình 7. Thuộc tính multiple quy định rằng một trường đầu vào có thể chọn nhiều giá trị từ một danh sách dữ liệu hoặc danh sách tệp. Trong ví dụ này, một người dùng có thể chọn nhiều tệp để tải lên.

Hình 7. Trường Upload

Mã cho kiểu tệp và thuộc tính multiple được hiển thị trong Liệt kê 7.

Liệt kê 7. Trường Upload (Tải lên)

 <fieldset>
  <legend> Upload file(s) </legend>
  <p>Upload one of your orchestra's file(s) for inclusion in our library</p>
    <p><label> 
      <input type="file" multiple="multiple" /> 
    </label>
  </p>
 </fieldset>

Nút Submit (đăng tải) sử dụng các thuộc tính height (chiều cao) và width (chiều rộng), như trong Liệt kê 8. Bạn sử dụng các thuộc tính này để thiết lập chiều cao và chiều rộng của kiểu đầu vào image. Khi bạn thiết lập các thuộc tính này, vùng không gian của trang web dành cho hình ảnh không bị thay đổi do bị các ràng buộc về các kích thước chiều rộng và chiều cao đặt sẵn, để làm cho việc nạp trang dễ dàng nhằm nâng cao hiệu quả hiển thị trang.

Liệt kê 8. Nút Submit

<input type="image" src="submitbutton.png" alt="Submit" width="100" height="45" />
</form>

JavaScript và CSS3

Không thể trình diễn HTML5 mà không có CSS3. Và, mặc dù HTML5 đã phủ nhận sự cần thiết đối với một số mã JavaScript, thì JavaScript vẫn là một công cụ có giá trị. Sau đây là các tệp mã JavaScript và CSS3 được sử dụng để tạo các biểu mẫu ví dụ.
Mã JavaScript là một hộp cảnh báo đơn giản trả về ba trường cần thiết, như trong Liệt kê 9. Mặc dù đoạn mã JavaScript được sử dụng ở đây chỉ có một dòng, những nó đã được đặt trong một tệp JavaScript riêng biệt, sau đây là cách tốt nhất để sử dụng nó.

Liệt kê 9. Mã JavaScript của biểu mẫu ví dụ

function alertValues()
{
alert("Customer information: " + "\n     " + fullname.value + "\n     " 
                 + tel.value + "\n     " + email.value);  
}

Liệt kê 10 cho thấy mã CSS3 định dạng biểu mẫu ví dụ. Thông tin <header> và <footer> không có ở đây.

Liệt kê 10. Biểu mẫu ví dụ CSS3

form {
  width: 550px;
  margin: 0 0 0 0 ;
  padding: 50px 60px;
  background-color: #2d2d2d;
  border-radius: 20px;
}

fieldset {
  padding: 0 20px 20px;
  margin: 0 0 30px ;
  border: 2px solid #ffffff;
  background: #B8B8B8 ;
  border-radius: 10px;
}

legend {
  color: #ffffff;
  background: #990033;
  font-size: 0.9em;
  font-weight: bold;
  text-align: left;
  padding: 5px;
  margin: 0;
  width: 10em;
  border: 2px solid #660033;
  border-radius: 5px;
 }

label {
  display: block;
  float: left;
  clear: left;
  text-align: left;
  width: 100%;
  padding: .4em 0 0 0;
  margin: .15em 0 0 0;
}

Kết luận

Chìa khóa cho thành công rõ ràng cho cá nhân và tổ chức là truyền thông. Các nút điều khiển của biểu mẫu và các hướng dẫn dựng trang nói chung là quan trọng cho quá trình này, và HTML5 đã cung cấp nhiều công cụ mạnh mẽ thích hợp. Những người được chuẩn bị cho tương lai — ngay lúc này — sẽ được hưởng lợi; còn những người không được chuẩn bị sẽ phải chịu rủi ro nghiêm trọng bởi tốc độ phát triển và các yêu cầu của xã hội toàn cầu, trung tâm mạng, một thế giới-web.

Read More