12.1.Khái niệm
Cookie là các file kích thước nhỏ được web server của trang web mà người dùng truy cập gửi đến và lưu trữ trong máy tính nhằm nhận dạng người dùng với trang web đó.
Khi người dùng truy cập đến một trang web có sử dụng cookie, web server của trang web đó sẽ tự động gửi cookie đến máy tính của người dùng và lưu vào một nơi đặc biệt trên đĩa cứng. Các trình duyệt khác nhau sẽ lưu cookie ở những nơi khác nhau. Khi truy cập đến các trang web sử dụng được cookie đã lưu, trang web sẽ đọc thông tin từ cookie và thực hiện những công việc mà người thiết kế trang web đó yêu cầu.
Lợi ích của việc sử dụng cookie:
• Giúp một trang web "ghi nhớ" người dùng và thiết lập các sở thích phù hợp khi người dùng truy cập trở lại.
• Làm cho web tiện lợi hơn, người dùng có thể truy cập vào web nhanh hơn không phải nhập lại các thông tin nhiều lần.
• Cho phép các website hoặc các công ty quảng cáo theo dõi cách hoặc thói quen lướt web của người dùng.
Tuy cookie rất hữu ích và thuận tiện nhưng kèm theo đó là những rủi ro có liên quan được lưu trữ. Cookie ảnh hưởng tới sự riêng tư của người dùng. cũng như rò rỉ thông tin cá nhân. Cookie theo dõi người dùng đã ghé thăm những nơi nào và đã xem những gì trên web. Bản thân các cookie không thể dùng để phát tán virus, mã độc nhưng nó có thể thu thập khá nhiều thông tin cá nhân, do đó cookie có thể làm tăng nguy cơ mất thông tin đăng nhập nếu như người khác sử dụng máy tính, hoặc trường hợp máy tính của bị xâm nhập, đánh cắp. Vì vậy đa số các trình duyệt hiện tại đều cho phép người dùng tuỳ chỉnh việc lưu cookie, hoặc hoàn toàn không cho phép việc sử dụng cookie.
12.2.Thiết lập cookie
Tất cả các cookie được lưu giữ trong đối tượng document.cookie với thiết lập theo cú pháp
document.cookie = "<cookie_name> = <value>";
Cookie sẽ chỉ tồn tại cho tới thời điểm mà người lập trình quy định. Để thiết lập thời gian tồn tại cho cookies thì trong chuỗi nội dung của cookie thêm vào một nội dung sau
expire = <expired_date>
Như vậy ta có hàm thiết lập cookie như sau
function setCookie(c_name,value,exdays) { var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ?
"" : "; expires=" + exdate.toUTCString()); document.cookie = c_name + "=" + c_value;
}
Trong đó c_name là tên của cookie cần thiết lập, value là giá trị cần lưu vào cookie và exdays là thời gian cookie có hiệu lực tính từ ngày thiết lập. Hàm escape có tác dụng chuyển đổi những ký tự đặc biệt sẽ thay thế cho khoảng trắng
12.3.Đọc cookie
Xét hàm đọc cookie sau
function getCookie(c_name) {
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "="); if (c_start == -1) {
c_start = c_value.indexOf(c_name + "="); }
if (c_start == -1) { c_value = null; } else {
c_start = c_value.indexOf("=", c_start) + 1; var c_end = c_value.indexOf(";", c_start); if (c_end == -1){ c_end = c_value.length; } c_value = unescape(c_value.substring(c_start,c_end)); } return c_value; }
Khối lệnh A dùng để xác định cookie có tên là c_name có tồn tại hay không. Khối lệnh B xác định vị trí đầu tiên và cuối cùng của cookie c_name.
Dòng lệnh
c_value = unescape(c_value.substring(c_start,c_end));
giải mã hàm escape và cho kết quả giá trị cookie c_name
Ví dụ: Kiểm tra và thiết lập cookie "username"
function checkCookie(){
var username = getCookie("username"); if (username != null && username != ""){
alert("Welcome again " + username); } else {
username = prompt("Please enter your name: ",""); if (username != null && username != ""){
setCookie("username",username,365); } } } A B
TÀI LIỆU THAM KHẢO
[1] Bài giảng Thiết kế Web, Đỗ Bá Lâm, Đại học Bách khoa Hà nội, 2010
[2] HTML, XHTML, and CSS Bible 3rd Edition, B.Pfaffenberger, S. M. Schafer, C.White and B.Karow, Wiley Publishing, 2004.
[3] http://www.w3schools.com/ [4] http://www.w3.org/
PHỤ LỤC
1.Các thẻ HTML 4.01, XHTML 1.0
Thẻ Mô tả
<!--...--> Xác định một comment, một chú thích.
<!DOCTYPE> Xác định mẫu cho văn bản HTML.
<a> Xác định một liên kết.
<abbr> Mô tả cụm từ viết tắt.
<acronym> Mô tả từ viết tắt.
<address> Xác định thông tin liên hệ (địa chỉ, mail, điện thoại,...).
<area /> Xác định vùng bên trong map của image.
<b> Hiển thị text đậm.
<base /> Xác định một địa chỉ mặc định hay một mục tiêu mặc định cho tất cả link trên trang.
<bdo> Xác định hướng của text (từ trái sang phải hoặc từ phải sang trái).
<big> Hiển thị text lớn.
<blockquote> Xác định một đoạn trích dẫn dài.
<body> Xác định phần thân của văn bản HTML.
<br /> Ngắt một đoạn text xuống hàng.
<button> Xác định một button.
<caption> Xác định một chú thích cho table.
<cite> Xác định một câu trích dẫn.
<code> Xác định text giống code trong máy tính.
<col /> Xác định giá trị cột trong table.
<colgroup> Xác định một nhóm cột trong table cho cùng định dạng.
<dd> Xác định một mô tả đề mục trong danh sách (xem như phần nội dung trong danh sách).
<del> Hiển thị đường gạch bỏ text.
<dfn> Xác định một thuật ngữ.
<div> Xác định một phân chia khu vực hay một vùng trong văn bản.
<dl> Xác định một danh sách (definition list).
<em> Xác định text nhấn mạnh.
<fieldset> Được dùng để nhóm các thành phần bên trong form một cách hợp lý.
<form> Xác định một form html cho người dùng nhập
<frame> Xác định một frame trong một khung (frameset).
<frameset> Xác định một khung (frameset).
<h1> tới <h6> Xác định tiêu đề html.
<head> Xác định, khai báo thông tin về văn bản HTML.
<hr /> Tạo một đường ngang.
<html> Xác định một văn bản html.
<i> Hiển thị chữ in nghiên.
<iframe> Xác định một khung nội tuyến.
<img /> Hiển thị một image.
<input /> Xác định một điều khiển nhập.
<ins> Xác định việc chèn text.
<kbd> Hiển thị text kiểu bàn phím.
<label> Tạo một nhãn cho thành phần input.
<legend> Xác định một chú thích cho một phần tử fieldset.
<li> Xác định danh sách item.
<link /> Xác định một liên kết.
<map> Xác định map cho image.
<meta /> Xác định siêu dữ liệu về một văn bản HTML.
<noframes> Xác định một nội dung thay thế khi trình duyệt không hỗ trợ hoặc người dụng vô hiệu hóa frame.
<noscript> Xác định một nội dung thay thế khi trình duyệt không hỗ trợ hoặc người dụng vô hiệu hóa script.
<object> Xác định một đối tượng nhúng.
<ol> Xác định danh sách có thứ tự.
<optgroup> Xác định một nhóm các tùy chọn liên quan trong một select.
<option> Xác định một tùy chọn trong một select.
<p> Xác định một đoạn văn.
<param /> Xác định một tham số cho một đối tượng.
<q> Định nghĩa một đoạn trích dẫn ngắn..
<samp> Hiển thị text kiểu sample trong máy tính.
<script> Xác định một script.
<select> Xác định danh sách lựa chọn.
<small> Hiển thị text nhỏ.
<span> Được sử dụng để nhóm các inline trong văn bản HTML..
<strong> Hiển thị text đậm (mục đích nhấn mạnh).
<style> Xác định thông tin style cho văn bản.
<sub> Hiển thị text lệch bên dưới.
<sup> Hiển thị text lệch bên trên.
<table> Xác định một table.
<tbody> Xác định một nhóm nội dung của table.
<td> Xác định một phần tử nội dung của table.
<textarea> Xác định một vùng điều khiển nhập text.
<tfoot> Một nhóm nội dung cuối của table.
<th> Xác định một phần tử tiêu đề của table.
<thead> Một nhóm phần tử tiêu đề của table.
<title> Xác định một tiêu đề của văn bản HTML.
<tr> Xác định một hàng của table.
<tt> Xác định teletype text (kiểu chữ văn bản máy).
<ul> Xác định danh sách không thứ tự.
<var> Xác định phần giá trị của text
2.Các thẻ mới trong HTML5
Thẻ Mô tả
<article> Định nghĩa một bài viết, một nội dung riêng biệt.
<aside> Định nghĩa nội dung bên ngoài nội dung chính (thường là phần sidebar).
<audio> Định nghĩa âm thanh, như nhạc hay trường audio khác..
<canvas> Được dùng để hiển thị đồ họa.
<command> Định nghĩa một nút lệnh, giống như một Radiobutton, hộp kiểm, hoặc một button.
<datalist> Định nghĩa một danh sách tùy chọn, sử dụng thành phần này cùng với các thành phần input.
<details> Xác định thêm chi tiết hoặc điều khiển có thể được ẩn hoặc hiển thị theo
yêu cầu.
<embed> Xác định nội dung nhúng như một plugin.
<figcaption> Xác định một chú thích cho tag figure.
<figure> Xác định các nội dung liên quan mạch lạc với nhau, như hình ảnh, sơ đồ, code,...
<footer> Định nghĩa khu vực footer (phần cuối) của trang.
<header> Định nghĩa khu vực header (phần đầu) của trang.
<hgroup> Định nghĩa một nhóm các tiêu đề.
<keygen> Xác định một cặp trường khóa chính sử dụng cho form.
<mark> Xác định văn bản được đánh dấu, sử dụng khi muốn làm nổi bật văn bản
<meter> Định nghĩa một phép đo. Sử dụng chỉ cho phép đo với giá trị tối thiểu và tối đa.
<nav> Định nghĩa link danh mục (navigation)
<output> Đại diện cho kết quả của phép tính (giống như được thực hiện bởi script).
<progress> Mô tả tiến trình làm việc.
<rp> Hiển thị những nội dung bên trong khi trình duyệt không hỗ trợ ruby.
<rt> Định nghĩa một lời giải thích hoặc cách phát âm của các ký tự (đối với kiểu chữ Đông Á).
<ruby>
Định nghĩa một chú thích ruby (đối với kiểu chữ Đông Á). Chú thích Ruby được sử dụng trong khu vực Đông Á, hiển thị cách phát âm của các ký tự Đông Á.
<section> Định nghĩa một khu vực (vùng bao).
<source> Xác định nguồn cho một media.
<summary> Xác định một tiêu đề cho các thành phần details, được sử dụng để mô tả chi tiết về tài liệu, hoặc các bộ phận của tài liệu.
<time> Xác định thời gian, ngày tháng, hoặc năm sinh.
<video> Xác định một video, chẳng hạn như một đoạn phim hoặc một trường video.
3.Thuộc tính CSS2
Thuộc tính Ví dụ Mô tả
background background: #ff0000; Định dạng nền (background) cho thành phần.
border border: 1px solid #ff0000; Định dạng đường viền cho thành phần.
border-collapse border-collapse: collapse; Thuộc tính border-collapse xác định đường viền củatable có tách biệt ra hay không.
border-spacing border-spacing: 10px; Xác định khoảng cách giữa các đường viền của các cột lân cận.
bottom bottom: 10px; Xác định vị trí dưới cùng của thành phần được định vị trí.
caption-side caption-side: bottom; Xác định vị trí một chú thích của table.
clear clear: both; Xác định 2 bên của phần tử (left, right), nơi mà phần tử float không được cho phép.
clip clip: rect(0,0,50px,10px); Xác định đoạn cho thành phần khi sử dụng thuộc tính position có giá trị "absolute".
color color: #ff0000; Xác định màu sắc cho text.
content content: "." Sử dụng kèm với bộ chọn ":before", ":after" để chèn nội dung được tạo.
counter-increment counter-increment: section; Gia tăng một hoặc nhiều counter (sắp xếp có thứ tự, có hiển thị số)
counter-reset counter-reset: subsection; Tạo hoặc reset một hoặc nhiều counter.
cursor cursor: pointer; Xác định kiểu con trỏ chuột được hiển thị.
direction direction: ltr; Xác định hướng cho văn bản.
display display: inline; Xác định loại hiển thị của thành phần.
empty-cells empty-cells: hide; Xác định có hay không có đường viền và nền trong một cột rỗng của table
float float: left; Xác định có hay không một thành phần
được float.
font font: 12px arial,sans-serif; Thiết lập font cho thành phần, bao gồm font chữ, độ rộng, ...
height height: 50px; Thiết lập chiều cao của thành phần.
left left: 10px; Xác định vị trí bên trái của thành phần định vị trí (như position)
letter-spacing letter-spacing: 2px; Tăng hoặc giảm khoảng cách giữa các ký tự trong đoạn text.
list-style list-style: decimal; Thiết lập kiểu cho một danh sách.
margin margin: 15px; Canh lề cho thành phần.
max-height max-height: 200px; Thiết lập chiều cao tối đa của thành phần.
max-width max-width: 900px; Thiết lập chiều rộng tối đa của thành phần.
min-height min-height: 100px; Thiết lập chiều cao tối thiểu của thành phần.
min-width min-width: 600px; Thiết lập chiều rộng tối thiểu của thành phần.
outline outline: dotted; Định dạng các đường viền bao ngoài
overflow overflow: scroll; Xác định điều gì sẽ xảy ra nếu một thành phần box tràn nội dung.
padding padding: 15px; Thiết lập các thuộc tính padding trong một khai báo.
page-break-after page-break-after: alway; Xác định các phân chia văn bản ngay sau thành phần.
page-break-before page-break-before: alway; Xác định các phân chia văn bản ngay trước thành phần.
page-break-inside page-break-inside: alway; Xác định các phân chia văn bản ngay bên trong thành phần.
position position: absolute; Xác định loại của phương pháp định vị trí cho thành phần.
quotes "‘" "’" Thiết lập các loại dấu ngoặc bao ngoài khi
nhúng một trích dẫn.
right right: 10px; Xác định vị trí bên phải của thành phần định vị trí (như position)
table-layout table-layout: fixed; Thiết lập các thuật toán layout được sử dụng cho table.
text-align text-align: center; Sắp xếp các nội dung theo chiều ngang.
text-decoration text-decoration: underline; Xác định các trang trí thêm cho text.
text-indent text-indent: 10px; Ghi rõ thụt đầu dòng của dòng đầu tiên trong một khối văn bản.
text-transform text-transform: uppercase; Thiết lập các ký tự viết hoa cho văn bản.
top top: 10px; Xác định vị trí bên trên của thành phần định vị trí (như position)
vertical-align vertical-align: middle; Sắp xếp các nội dung theo chiều dọc.
visibility visibility: visible; Xác định thành phần có được nhìn thấy hay không.
white-space white-space: nowrap; Xác định khoảng trắng có bên trong thành phần được xử lý như thế nào.
width width: 800px; Thiết lập chiều rộng cho thành phần.
word-spacing word-spacing: 5px; Tăng hoặc giảm không gian giữa các từ trong đoạn văn bản.
z-index z-index: 100; Thiết lập thứ tự xếp chồng nhau của một thành phần vị trí.
4.Thuộc tính mới trong CSS3
Thuộc tính Mô tả
animation Xác định một chuyển động của một thành phần.
appearance Định dạng cho thành phần trông như giao diện chuẩn gần với người dùng.
backface-visibility Xác định bề mặt sau của thành phần khi thực hiện một chuyển động xoay.
background-clip Xác định vùng backgroud được cắt bớt theo vùng được giới hạn.
background-origin Xác định giá trị tương đối của background giới hạn theo vùng giới hạn.
background-size Xác định lại chiều rộng và chiều cao cho background.
background gradient Tạo màu sắc cho background theo biên độ giảm dần.
Nhiều background Sử dụng để khai báo nhiều dạng background khác nhau trong cùng một
thẻ.
border-image Dùng để định dạng các dạng border bằng hình ảnh.
border-radius Dùng để định dạng các dạng bo góc của border.
box-align Xác định vị trí cho thành phần theo chiều dọc hoặc theo chiều thẳng đứng.
box-direction Xác định hướng cho thành phần.
box-flex Xác định sự ưu tiên linh hoạt theo các thành phần khác.
box-ordinal-group Cho biết thứ tự ưu tiên của các thành phần.
box-orient Xác định thành phần dọc theo phương hướng khối hoặc theo trục.
box-pack Định vị trí của thành phần theo mép rìa của thành phần.
box-sizing Xác định lại chiều rộng và chiều cao của thành phần.
box-shadow Định dạng bóng cho thành phần.
column Dùng để chia nội dung thành phần thành nhiều cột khác nhau.
@font-face Định dạng các dạng font chữ khác nhau theo các dạng font riêng.
font-size-adjust Dùng để định dạng điều chỉnh cho font chữ, độ lớn của chữ được thể hiện bởi phép nhân.
@keyframes Dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation.
nav Di chuyển qua lại giữa các thành phần điều hướng (navigate) bằng cách di
chuyển các phím mũi tên.
opacity Hiển thị cấp độ trong suốt cho thành phần.
perspective Cho ta thấy được chiều sâu của thành phần trong khai báo 3D.
perspective-origin Định nghĩa trục quay cho thành phần có sử dụng perspective.
resize Định dạng cho vùng nội dung mà người dùng có thể thay đổi được kích thước.
text-justify Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự sao cho dàn đều thành phần.
text-overflow Xác định vùng text được cắt bớt.
text-shadow Xác định bóng đỗ cho text.
transform Xác định một chuyển đổi 2 chiều, 3 chiều, có thể là xoay, tỷ lệ, di chuyển, nghiêng, ...
transform-origin Xác định trục cho một chuyển đổi 2 chiều, 3 chiều.
transform-style Các thành phần bên trong sẽ giữ vị trí 3D của nó.