Lớp giả (pseudo class)

Lớp giả được sử dụng để định nghĩa một trạng thái đặc biệt của một phần tử. Chẳng hạn, lớp giả được dùng để định dạng một phần tử khi người dùng đang di chuyển con trỏ chuột trên nó, hoặc để định dạng phần tử <a> khi phần tử này đã được người dùng click vào rồi. Hình 1.21 minh họa cách sử dụng lớp giả để định dạng phần tử <a> khi con trỏ chuột di chuyển trên nó. Trong trường hợp này, lớp giả được tạo ra bằng cách thêm chuỗi “:hover” vào sau tên lớp (highlight).

Hình 1.21 - Ví dụ cách dùng lớp giả 1.2.7. Phần tử giả (pseudo element)

Phần tử giả được dùng để định dạng từng phần nhỏ của một phần tử HTML. Chẳng hạn, nó được dùng để định dạng ký tự đầu tiên hoặc dòng đầu tiên của một phần tử; hoặc được dùng để chèn thêm nội dung vào trước/sau nội dung của một phần tử. Hình 1.22 cho thấy cách tạo phần tử giả p::first-line (thêm chuỗi “::first-line” vào tên phần tử p) để định dạng cho dòng đầu tiên của một đoạn văn (phần tử <p>).

1.2.8. Layout properties và Box model

Hình 1.23 minh họa các thuộc tính (property) được dùng để bố trí vị trí hiển thị các phần tử HTML khi trình duyệt hiển thị trang này. Các thuộc tính trong hình này gồm margin, padding, width, height và border.

Hình 1.23 - Layout properties

Khi hiển thị các phần tử HTML, trình duyệt dùng Box model để hiển thị. Theo mô hình này, trình duyệt hiển thị nội dung của phần tử bên trong một hình chữ nhật. Vị trí hiển thị nội dung của phần tử được xác định dựa vào 3 thuộc tính là margin, border, và padding (xem Hình 1.24). Trong đó, border và margin được xem là thành phần của phần tử, còn margin là khoảng cách từ phần tử đến phần tử khác.

Hình 1.24 - Minh họa Box model

1.3. CƠ BẢN VỀ CSS3

CSS3 là phiên bản mới nhất của CSS tại thời điểm viết giáo trình này. Trong phần này, tác giả trình bày một số đặc tính mới cơ bản của CSS3.

 Border effect: Border effect được dùng để tạo hiệu ứng cho border của một phần tử, gồm: border-radius, box-shadow và border image.

Hình 1.25 - Áp dụng box-shadow cho phần tử DIV

 Gradient effect: Có hai loại gradient là linear gradient (theo hướng đi xuống, đi lên, qua trái, qua phải hoặc đường chéo hình chữ nhật) và radial gradient (theo hướng từ tâm ra ngoài). Hình 1.26 minh họa tác dụng của radial gradient. Hình 1.27 minh họa tác dụng của linear gradient qua phải.

Hình 1.26 - Ví dụ về radial gradient

 Text effect: Cho phép tạo ra những hiệu ứng lên các văn bản (text-shadow, word-wrap). Hình 1.28 minh họa tác dụng của text-shadow.

Hình 1.28 - Ví dụ về tác dụng của text-shadow

 2-D transformation effect: Cho phép tạo hiệu ứng về biến đổi phần tử HTML, bao gồm: translate(), rotate(), scale(), skew(), matrix(). Hình 1.29 minh họa tác dụng của hiệu ứng biến đổi rotate().

Hình 1.29 - Ví dụ về tác dụng của hiệu ứng rotate()

 3-D transformation effect: Cho phép tạo hiệu ứng về biến đổi phần tử HTML, bao gồm: rotateX(), rorateY(). Hình 1.30 minh họa tác dụng của hiệu ứng biến đổi 3-D rotateX().

Chương 2

CƠ BẢN VỀ JAVASCRIPT, JQUERY VÀ AJAX

Trong chương này, chúng ta sẽ tìm hiểu một số kiến thức cơ bản về JavaScript và AJAX. Ngoài ra, thư viện JavaScript nổi tiếng là Jquery cũng được trình bày vắn tắt.

2.1. JAVASCRIPT

2.1.1. Tổng quan về JavaScript

JavaScript là ngôn ngữ lập trình phiên dịch (không phải biên dịch) gọn nhẹ, được phát triển bởi Netscape, giúp tạo ra các chương trình chạy trong trình duyệt web. Hay nói cách khác, nó là một ngôn ngữ lập trình phía client (client side programming language). Các đoạn chương trình JavaScript được nhúng trong các trang HTML và có thể được dùng để thao tác các phần tử của trang HTML đó. Cần lưu ý là JavaScript và Java là hai ngôn ngữ lập trình hoàn toàn khác nhau (tuy nhiên cú pháp của chúng có nhiều điểm tương tự).

JavaScript được dùng để tạo ra các chức năng động cho một trang HTML (ví dụ thay đổi các phần tử HTML trong lúc trình duyệt đang hiển thị trang đó). JavaScript cũng được dùng để giảm tải xử lý trên server, đặc biệt là các công việc liên quan đến xử lý form. JavaScript thường được dùng để kiểm tra dữ liệu nhập vào các form trước khi gửi form đó đến server. Tuy nhiên, JavaScript thường không được sử dụng trong các trường hợp sau:

 Khi cần truy cập các tài nguyên không do trình duyệt quản lý: các tập tin, các chương trình, cơ sở dữ liệu.

 Khi các thông tin hoặc dữ liệu nhạy cảm cần được bảo vệ (vì các chương trình JavaScript được tải về trình duyệt của khách hàng khi chạy).

2.1.2. Thêm JavaScript vào HTML

Chúng ta có thể thêm JavaScript vào HTML bằng cách nhúng trực tiếp các đoạn code JavaScript vào trang HTML hoặc liên kết một trang HTML với một tập tin chứa mã JavaScript.

 Cách 1: Thêm mã JavaScript trực tiếp vào trang HTML <html>

<head>

</head>

 Cách 2: Liên kết một tập tin chứa mã JavaScript với trang HTML <head>

</head>

2.1.3. Các hàm, sự kiện và biến trong JavaScript

Các chỉ thị JavaScript thường được nhóm lại vào trong các hàm theo cú pháp như sau:

</script>

Các hàm JavaScript được kích hoạt bởi các sự kiện (event). JavaScript là một ngôn ngữ hướng sự kiện (event-driven), nghĩa là phải có một điều gì đó xảy ra (sự kiện) làm điều kiện kích họat các mã JavaScript được thực thi. Ngôn ngữ JavaScript định nghĩa rất nhiều sự kiện, một số sự kiện thường dùng là:

 onClick – xảy ra khi một phần tử được click.

 onSubmit – xảy ra khi một form được submit.

 onMouseOver – xảy ra khi con trỏ chuột di chuyển trên phần tử.

 onChange – xảy ra khi giá trị trong một control trong một form thay đổi.

 onLoad – xảy ra khi tài liệu được nạp vào trình duyệt.

 v.v.

Các sự kiện cụ thể sẽ được chỉ định trong từng tài liệu HTML. Bảng 2.1 minh họa hàm và sự kiện JavaScript được nhúng trong trang HTML.

Bảng 2.1 - Ví dụ về hàm và sự kiện trong JavaScript <html>  <html>  <head>  <script language=“javascript”> function funct() {  // code } </script> </head> <body> 

</html>

Trong JavaScript, các biến được sử dụng mà không cần khai báo kiểu. Để khai báo một biến, ta chỉ cần dùng từ khóa var như sau:

var num = 1; var name = “Mel”; var phone;

2.1.4. Document Object Model (DOM)

JavaScript có thể truy xuất trực tiếp mọi thành phần của trang HTML. Để có thể thao tác và truy xuất các thành phần của trang HTML, JavaScript sử dụng DOM. Theo DOM, một trang HTML được tổ chức như một cây có thứ bậc các phần tử cấu thành nên trang HTML. Mỗi phần tử trong cây này đều có một đường dẫn duy nhất xuất phát từ gốc. Các thành phần trong đường dẫn được ngăn cách nhau bằng dấu chấm. JavaScript dùng đường dẫn này như một dạng địa chỉ để truy xuất đến mọi phần tử của trang HTML. Mỗi phần tử trong trang HTML tương ứng với một DOM object. Bảng 2.2 liệt kê một số DOM object và phần tử HTML tương ứng.

Bảng 2.2 - Một số đối tượng DOM và phần tử HTML tương ứng DOM object Phần tử HTML tương ứng DOM object Phần tử HTML tương ứng

window Cửa sổ trình duyệt location URL

document Trang HTML Anchors <a>

body <body> images <img>

Forms <form>

elements <input>, <textarea>, <select> frames <frame>

tables <table> Rows <tr> cells <th>, <td> title <title>

Để truy xuất đến một đối tượng trong mảng đối tượng DOM, ta dùng chỉ số như sau (chỉ số bắt đầu từ 0):

// truy xuất image thứ nhất của tài liệu window.document.images[0];

// truy xuất phần tử thứ 5 của form window.document.forms[1].elements[4];

Ta cũng có thể dùng thuộc tính name/id của phần tử HTML để truy xuất đến đối tượng DOM tương ứng như sau:

//<img src=”file.gif” name=”mygif”> window.document.mygif;

// (<form name=”catform”…> <input name=”fname”…>) window.document.catform.fname;

2.2. JQUERY VÀ AJAX

JQuery và AJAX là những công cụ hữu dụng trong việc xây dựng các ứng dụng web. Vì vậy, phần này sẽ tập trung trình bày một số kiến thức cơ bản của hai công cụ này để sinh viên có đủ nền tảng để tự học, nghiên cứu thêm nhằm ứng dụng hiệu quả hai công cụ này trong quá trình xây dựng các ứng dụng web.

2.2.1. JQuery

jQuery là một thư viện các hàm JavaScript, được xây dựng theo phương châm “viết ít, làm nhiều”. Thư viện này hỗ trợ các tính năng sau:

 Cho phép chọn lựa các phần tử HTML.

 Cho phép thao tác CSS.

 Cho phép tạo ra các hàm xử lý sự kiện.

 Cho phép tạo ra các hiệu ứng JavaScript và tạo animation.

 Cho phép duyệt cây DOM và hiệu chỉnh các đối tượng trên cây DOM.

 Hỗ trợ làm việc AJAX.

 Cung cấp một số tiện ích khác.

Để dùng jQuery trong trang HTML, ta thực hiện một trong hai cách sau:

Cách 1: Copy tập tin thư viện jquery.js vào project và liên kết tập tin này với trang HTML như sau.

<head>

src=jquery.js”></script> </head>

Cách 2: Cung cấp đường dẫn đến nơi host tập tin jquery như sau. <head>

src=http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquer y.min.js></script>

</head>

Cú pháp của jQuery được xây dụng với mục đích chọn ra được các phần tử và thực hiện một hành động trên phần tử đó. Cú pháp cơ bản của jQuery là:

$(selector).action()

Trong đó:

 Ký hiệu $ được định nghĩa trong jQuery.

 Một selector là một truy vấn để tìm các phần tử HTML.

 Một action là một hành động tác động lên các phần tử HTML tìm được.

Bảng 2.3 - Các ví dụ về cú pháp jQuery

$(this).hide()// ẩn phần tử hiện hành current element. $("p").hide()// ẩn tất cả các đoạn văn.

$("p.test").hide()// ẩn tất cả các đoạn văn có lớp là “test”. $("#test").hide()// ẩn tất cả các phần tử có id="test"

Bảng 2.4 là một ví dụ cơ bản về cách sử dụng jQuery trong trang HTML.

Bảng 2.4 - Ví dụ về sử dụng jQuery trong trang HTML

<!DOCTYPE html>

$(document).ready(function(){

$("button").click(function(){ // event handler $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p>

<button>Click me</button>

</body> </html>

Thông thường, các hàm xử lý sự kiện (event handler) thường được đặt trong phần header của trang HTML, tương tự như hàm xử lý sự kiện click trong ví dụ ở Bảng 2.4.

Các lệnh JavaScript được thực hiện từng dòng một. Tuy nhiên, với animation, dòng tiếp theo của code có thể được chạy ngay cả khi animation chưa thực hiện xong. Điều này sẽ tạo ra lỗi logic trong chương trình. Để tránh lỗi này, jQuery cho phép sử dụng các hàm callback. Các hàm callback (callback function) được gọi lại sau khi animation đã được hoàn thành. Bảng 2.5 trình bày ví dụ về hàm callback.

Bảng 2.5 - Ví dụ hàm callback

<!DOCTYPE html> <html> <head>

$(document).ready(function(){ $("button").click(function(){

$("p").hide(1000,function(){ // callback function alert("The paragraph is now hidden");

}); }); }); </script> </head> <body> <button>Hide</button>

<p>This is a paragraph with little content.</p> </body>

</html>

2.2.2. AJAX

AJAX (Asynchonous JavaScript and XML) là một kỹ thuật cho phép tạo ra các trang HTML có thể phản ứng lại với thao tác người dùng một cách nhanh và mượt mà. AJAX cho phép các trang HTML được cập nhật bất đồng bộ (tức không cần cập nhật toàn bộ trang HTML, mà có thể cập nhật một phần của trang HTML) bằng cách trao đổi dữ liệu đến server từng lượng nhỏ chứ không phải toàn bộ trang. Điều này trái ngược với cách làm việc của HTML truyền thống, trong đó để cập nhật một phần nhỏ của trang HTML, thì toàn bộ trang HTML phải được tải về lại từ server. Có rất nhiều ứng dụng nổi tiếng sử dụng AJAX, chẳng hạn: GoogleMap, Gmail, Youtube, Facebook, v.v. AJAX là kỹ thuật độc lập trình duyệt và độc lập nền tảng (platform independent).

AJAX hoạt động dựa trên các chuẩn Internet và sử dụng tổ hợp các thành phần sau:

 Đối tượng XMLHTTPRequest (XMLHTTPRequest object). Đối tượng này được AJAX dùng để trao đổi dữ liệu giữa trình duyệt và server.

 DOM (được dùng để truy xuất và cập nhật nội dung từng phần của trang HTML).

 CSS (được dùng để định dạng các phần tử HTML).

 XML (thường được dùng để đóng gói dữ liệu trao đổi giữa trình duyệt và server).

Bảng 2.6 trình bày ví dụ cơ bản về AJAX.

Bảng 2.6 - Ví dụ về AJAX <!DOCTYPE html> <html> <head> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();

} else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4 && xmlhttp.status==200) {document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button>

</body> </html>

2.2.3. AJAX trong jQuery

jQuery cung cấp rất nhiều hàm cho phép làm việc với AJAX. Với các hàm này (tạm gọi là jQuery AJAX), chúng ta có thể thực hiện các yêu cầu về các tập tin txt, html, xml, json từ server theo cả hai phương thức HTTP GET và HTTP POST. Nhờ vậy, chúng ta có thể tải dữ liệu trực tiếp vào các phần tử của trang HTML (chứ không phải toàn bộ trang HTML) từ server. Để thực hiện tải dữ liệu theo kiểu AJAX trực tiếp vào các phần tử, jQuery có cú pháp chung sau:

$(selector).load(url, data, callback)

Trong đó:

 URL là địa chỉ của server.

 Data là dữ liệu muốn gửi đến server.

 Callback là hàm sẽ được thực thi sau khi hoàn tất việc trao đổi dữ liệu (theo kiểu AJAX) giữa trình duyệt và server.

Ngoài ra, chúng ta cũng có thể thực hiện trao đổi dữ liệu giữa trình duyệt và server theo kiểu AJAX bằng công thức sau:

jQuery.ajax({

type:"POST", //Phương thức gửi request là POST hoặc GET

data:"id=12&name=abc", //tham số gửi kèm

dataType:"xml", //kiểu dữ liệu trả về, mặc định là text

url:"/login/servletLogin", //Đường dẫn tới nơi xử lý request ajax

success: function (){ //hàm gọi về khi thực hiện thành công

// mã lệnh

} });

Để hiểu rõ hơn về jQuery AJAX, chúng ta xem xét ví dụ sau. Để chạy được ví dụ này, trước hết chúng ta tạo ra thư mục VD, sau đó tạo file index.html trong thư mục VD có nội dung như sau:

<html> <head> <script src="http://code.jquery.com/jquery- 1.4.2.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#ajaxButton").click(function(){ jQuery.ajax({ type:"POST", url:"ajax.html",

success:function(html){ jQuery("#responseDiv").html(html); } }); }); }); </script> </head> <body> <div>

</div>

</html>

Tiếp theo, ta tạo tiếp file ajax.html trong thư mục VD có nội dung như sau: <style> #sampleTable{ border-collapse:collapse; } #sampleTable td{

border: 1px solid black; width:100px; } </style> <table id="sampleTable"> <tr> <td>Name</td> <td>Year</td> </tr> <tr> <td>Van A</td> <td>1982</td> </tr> </table>

Để chạy ví dụ này, chúng ta mở file index.html bằng trình duyệt bất kỳ. Click vào button ajax bạn sẽ thấy toàn bộ nội dung của file ajax.html được lấy về trang index.html.

jQuery AJAX và JavaScript AJAX có cùng cơ chế làm việc. Điểm khác biệt cơ bản là ở chỗ cú pháp của jQuery AJAX ngắn gọn hơn rất nhiều.

Chương 3

SƠ LƯỢC VỀ SERVLET VÀ JSP

Servlet và JSP là một trong những công nghệ được lựa chọn hàng đầu cho việc xây dựng các ứng dụng web động (ví dụ như các trang web bán hàng online). Để lý giải cho sự phổ biến của công nghệ này, trong chương này, tác giả sẽ cung cấp cái nhìn tổng quan về công nghệ Servlet và JSP.

3.1. SERVLET 3.1.1. Servlet là gì? 3.1.1. Servlet là gì?

Servlet là các chương trình Java chạy trên web server hoặc trên các

SƠ LƯỢC VỀ SERVLET VÀ JSP

.1 – Vai trò của Servlet/JSP