CIT CongNgheWebVaUngDung

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THÔNG TIN College of Information Technology Địa chỉ: 48B Cao Thắng – Thành phố Đà Nẵng Website: http://www.cit.udn.vn Email: [email protected]

Tài liệu CÔNG NGHỆ WEB VÀ ỨNG DỤNG

Đà Nẵng, 01/2008

http://www.cit.udn.vn/

mailto:[email protected]

Công nghệ Web và ứng dụng

Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng – www.cit.udn.vn 2

MỤC LỤC CHƯƠNG 1: TỔNG QUAN................................................................................................. 6

1.1 Một số khái niệm ......................................................................................................... 6 1.1.1 Internet: ................................................................................................................ 6 1.1.2 World Wide Web ................................................................................................. 7 1.1.3 ISP........................................................................................................................ 7 1.1.4 URL...................................................................................................................... 8 1.1.5 DNS...................................................................................................................... 9 1.1.6 Firewall ................................................................................................................ 9

1.2 Tổng quan về một hệ thống Web................................................................................. 9 1.2.1 Mô hình một hệ thống Web nói chung: ............................................................... 9 1.2.2 Nguyên tắc hoạt động: ....................................................................................... 10

CHƯƠNG 2: NGÔN NGỮ HTML .................................................................................... 12 2.1 Giới thiệu HTML....................................................................................................... 12 2.2 Trình soạn thảo HTML .............................................................................................. 12

2.2.1 Microsoft FrontPage .......................................................................................... 12 2.2.2 Macromedia Dreamweaver MX 2004 ............................................................... 13

2.3 Tạo trang HTML đầu tiên .......................................................................................... 13 2.4 Cấu trúc trang HTML ................................................................................................ 16

2.4.1 Thẻ và cấu trúc thẻ ............................................................................................. 17 2.4.2 Màu sắc trong thiết kế web ................................................................................ 20 2.4.3 Thẻ chú thích...................................................................................................... 21 2.4.4 Các thẻ định dạng trình bày ............................................................................... 22 2.4.5 Form................................................................................................................... 29 2.4.6 Bảng ................................................................................................................... 43 2.4.7 Danh sách........................................................................................................... 48 2.4.8 Các ký tự đặc biệt .............................................................................................. 50 2.4.9 Âm thanh, video, flash và applet ....................................................................... 51 2.4.10 Frame ................................................................................................................. 52 2.4.11 Một số thẻ meta thông dụng............................................................................... 54 2.4.12 Thẻ DOCTYPE.................................................................................................. 54

2.5 Những lưu ý ............................................................................................................... 55 2.5.1 Tạo chuẩn đánh dấu thẻ và tuân thủ nó.............................................................. 55

2.6 Giới thiệu về XHTML ............................................................................................... 56 CHƯƠNG 3: CASCADING STYLE SHEETS (CSS)...................................................... 57

3.1 Các loại CSS .............................................................................................................. 57 3.2 CSS trong dòng.......................................................................................................... 57

CHƯƠNG 4: KỊCH BẢN TRÌNH KHÁCH ..................................................................... 58 4.1 Nhúng javascript vào file html................................................................................... 58

4.1.1 Sử dụng thẻ SCRIPT.......................................................................................... 58 4.1.2 Sử dụng một file nguồn JavaScript .................................................................... 59 4.1.3 Thẻ <NOSCRIPT> và </NOSCRIPT>.............................................................. 59

4.2 Hiển thị một dòng văn bản......................................................................................... 60 4.3 Ghi chú mã lệnh......................................................................................................... 61 4.4 Giao tiếp với người sử dụng ...................................................................................... 61 4.5 Biến trong JavaScript................................................................................................. 62

4.5.1 Biến và phân loại biến........................................................................................ 62 4.5.2 Kiểu dữ liệu........................................................................................................ 63 4.5.3 Kiểu nguyên (Interger)....................................................................................... 63 4.5.4 Kiểu dấu phẩy động (Floating Point)................................................................. 63 4.5.5 Kiểu logic (Boolean).......................................................................................... 64 4.5.6 Kiểu chuỗi (String) ............................................................................................ 64



4.6 Biểu thức.................................................................................................................... 64 4.7 Toán tử (Operator) ..................................................................................................... 64

4.7.1 Gán..................................................................................................................... 64 4.7.2 So sánh ............................................................................................................... 65 4.7.3 Số học................................................................................................................. 65 4.7.4 Chuỗi.................................................................................................................. 65 4.7.5 Logic .................................................................................................................. 65 4.7.6 Bitwise ............................................................................................................... 65

4.8 Lệnh ........................................................................................................................... 66 4.8.1 Lệnh điều kiện: .................................................................................................. 66 4.8.2 Lệnh lặp ............................................................................................................. 67 4.8.3 while................................................................................................................... 68 4.8.4 Switch ................................................................................................................ 68 4.8.5 Break .................................................................................................................. 68 4.8.6 continue.............................................................................................................. 68

4.9 Hàm (Functions) ........................................................................................................ 69 4.10 Các hàm có sẵn .......................................................................................................... 70

4.10.1 eval..................................................................................................................... 70 4.10.2 parseInt............................................................................................................... 71 4.10.3 parseFloat........................................................................................................... 72 4.10.4 escape và unescape ............................................................................................ 72

4.11 Biểu thức quy tắc ....................................................................................................... 73 4.12 Mảng (ARRAY)......................................................................................................... 73

4.12.1 Tạo một mảng trống........................................................................................... 73 4.12.2 Xác định chiều dài ban đầu của mảng ............................................................... 74 4.12.3 Tạo và khởi tạo mảng trong cùng một dòng lệnh .............................................. 75 4.12.4 Kích thước mảng length..................................................................................... 75 4.12.5 Các chức năng của đối tượng Array .................................................................. 75

4.13 Sự kiện ....................................................................................................................... 76 4.14 Các đối tượng trong JavaScript.................................................................................. 79 4.15 Đối tượng Navigator .................................................................................................. 81 4.16 Đối tượng window ..................................................................................................... 81 4.17 Đối tượng location ..................................................................................................... 84 4.18 Đối tượng frame......................................................................................................... 84 4.19 Đối tượng document .................................................................................................. 84 4.20 Đối tượng anchors...................................................................................................... 85 4.21 Đối tượng forms......................................................................................................... 85 4.22 Đối tượng history ....................................................................................................... 86 4.23 Đối tượng links .......................................................................................................... 86 4.24 Đối tượng math .......................................................................................................... 87 4.25 Đối tượng date ........................................................................................................... 88 4.26 Đối tượng string ......................................................................................................... 89 4.27 Các phần tử của đối tượng form ................................................................................ 90

4.27.1 Phần tử button .................................................................................................... 91 4.27.2 Phần tử checkbox............................................................................................... 92 4.27.3 Phần tử File Upload ........................................................................................... 93 4.27.4 Phần tử hidden ................................................................................................... 93 4.27.5 Phần tử Password............................................................................................... 93 4.27.6 Phần tử radio ...................................................................................................... 94 4.27.7 Phần tử reset....................................................................................................... 95 4.27.8 Phần tử select ..................................................................................................... 96 4.27.9 Phần tử submit ................................................................................................... 97 4.27.10 Phần tử Text ................................................................................................... 97



4.27.11 Phần tử Textarea ............................................................................................ 98 4.27.12 Mảng elements[] ............................................................................................ 99 4.27.13 Mảng form[]................................................................................................... 99

4.28 Xem lại các lệnh và mở rộng ..................................................................................... 99 CHƯƠNG 5: KỊCH BẢN TRÌNH CHỦ ......................................................................... 102

5.1 Giới thiệu ngôn ngữ lập trình web động .................................................................. 102 5.2 Cài đặt và chạy ứng dụng ASP ................................................................................ 103

5.2.1 Web Server IIS................................................................................................. 104 5.2.2 Cấu hình cho Website trên IIS ......................................................................... 105 5.2.3 Viết các file ASP.............................................................................................. 107 5.2.4 Dùng trình duyệt truy cập website ................................................................... 107

5.3 Tóm tắt các cú pháp VBScript ................................................................................. 109 5.3.1 Response.write ................................................................................................. 109 5.3.2 Biến.................................................................................................................. 109 5.3.3 Mảng ................................................................................................................ 110 5.3.4 Ghép chuỗi ....................................................................................................... 110 5.3.5 Hàm có sẵn....................................................................................................... 110 5.3.6 Các hàm chuyển đổi kiểu................................................................................. 110 5.3.7 Các hàm format................................................................................................ 110 5.3.8 Các hàm toán học............................................................................................. 111 5.3.9 Các hàm thao tác với chuỗi.............................................................................. 111 5.3.10 Các hàm ngày tháng......................................................................................... 111 5.3.11 Các hàm kiểm tra ............................................................................................. 112 5.3.12 Cấu trúc điều kiện if......................................................................................... 112 5.3.13 Cấu trúc lựa chọn select ................................................................................... 113 5.3.14 Cấu trúc lặp tuần tự For … Next ..................................................................... 114 5.3.15 Cấu trúc lặp DO WHILE….LOOP.................................................................. 115 5.3.16 Cấu trúc lặp WHILE….WEND ....................................................................... 115 5.3.17 Cấu trúc lặp DO….LOOP UNTIL................................................................... 115 5.3.18 Điều kiện and ,or, not....................................................................................... 116 5.3.19 Thủ tục và hàm người dùng ............................................................................. 116 5.3.20 Thủ tục ............................................................................................................. 116 5.3.21 Hàm.................................................................................................................. 117 5.3.22 Sử dụng #include ............................................................................................. 118

5.4 Các đối tượng căn bản ............................................................................................. 118 5.4.1 Đối tượng Request ........................................................................................... 118 5.4.2 Request.QueryString........................................................................................ 118 5.4.3 Request.Form................................................................................................... 119 5.4.4 Response .......................................................................................................... 119 5.4.5 Response.Write ................................................................................................ 119 5.4.6 Response.Redirect............................................................................................ 119 5.4.7 Response.End................................................................................................... 119 5.4.8 Đối tượng Session............................................................................................ 119 5.4.9 Đối tượng Application ..................................................................................... 120 5.4.10 File Global.asa ................................................................................................. 121 5.4.11 Đối tượng Dictionary ....................................................................................... 122 5.4.12 Đối tượng Server.............................................................................................. 122

5.5 Sử dụng Database với ASP...................................................................................... 123 5.5.1 Các cú pháp căn bản để truy xuất dữ liệu từ DB ............................................. 123 5.5.2 Đối tượng Connection...................................................................................... 124 5.5.3 Đối tượng Recordset ........................................................................................ 124 5.5.4 Thêm, sửa, xóa dữ liệu trong DB:.................................................................... 126

5.6 Sử dụng tiếng Việt trong ASP ................................................................................. 127



5.6.1 Bảng mã Unicode............................................................................................. 127 5.6.2 Mã hóa UTF-8.................................................................................................. 127 5.6.3 CodePage và Charset ....................................................................................... 127

CHƯƠNG 6: PHỤ LỤC - VBSCRIPT REFERENCE .................................................. 129 6.1 Statements and Keywords........................................................................................ 129 6.2 Operators.................................................................................................................. 129 6.3 VBScript Functions.................................................................................................. 129

6.3.1 Type Checking Functions ................................................................................ 129 6.3.2 Typecasting Functions ..................................................................................... 130 6.3.3 Formatting Functions ....................................................................................... 130 6.3.4 Math Functions ................................................................................................ 131 6.3.5 Date Functions ................................................................................................. 131 6.3.6 String Functions ............................................................................................... 132 6.3.7 Other functions................................................................................................. 134 6.3.8 Control Structures ............................................................................................ 134



CHƯƠNG 1: TỔNG QUAN

1.1 Một số khái niệm 1.1.1 Internet:

Internet là một hệ thống thông tin toàn cầu bao gồm các mạng máy tính được liên kết với nhau (a network of networks) với mục đích trao đổi và chia sẻ thông tin.

Internet là mạng toàn cầu liên kết các máy tính thông qua hệ thống đường điện thoại và cáp quang. Một số máy tính được nối liên tục vào Internet trong khi các máy khác chỉ ghé thăm một đôi lúc. Những máy tính nối thường xuyên vào mạng là những máy chứa vô số thông tin mà những người dùng mạng khác có thể truy cập.

Mạng máy tính:

Mạng máy tính là tập hợp nhiều máy tính điện tử và các thiết bị đầu cuối được kết nối với nhau bằng các thiết bị liên lạc nhằm trao đổi thông tin, cùng chia sẻ phần cứng, phần mềm và dữ liệu với nhau.

Mạng máy tính là một số máy tính được kết nối với nhau. Ở đây không đề cập đến số lượng các máy tính trong mạng. Hai máy tính được nối với nhau bằng một sợi dây mạng. Đó là một mạng máy tính. Các máy tính trong quầy internet đều được nối với một máy chủ (để dễ dàng quản lý, tính tiền). Đó là một mạng máy tính. Các máy tính của trường CĐ CNTT, của trường BK, KT, SP, NN được kết nối với nhau, tạo thành mạng máy tính của Đại học Đà Nẵng. Và khi các mạng máy tính này lại kết nối với nhau ở quy mô lớn, tạo thành hệ thống bao gồm hàng ngàn mạng máy tính nhỏ hơn của các doanh nghiệp, của các viện nghiên cứu và các trường đại học, của người dùng cá nhân, và các chính phủ trên toàn cầu – đó là internet.

- So sánh mạng máy tính – mạng truyền hình:

Các mạng truyền hình gửi thông tin tương tự đến mọi trạm vào cùng lúc. Sự giao tiếp này là một chiều, nghĩa là không có sự tương tác hai chiều.

Trong mạng máy tính, mỗi thông điệp thường được dẫn đến một máy tính cụ thể nào đó. Khác với mạng truyền hình, các mạng máy tính luôn hai chiều sao cho khi máy tính A gửi thông điệp đến máy tính B thì B có thể trả lời lại cho A.

- Internet cung cấp một khối lượng thông tin và dịch vụ khổng lồ. Phần chủ yếu nhất của mạng Internet là World Wide Web.



Các dịch vụ trên Internet: o Thư điện tử (E-mail) o Trò chuyện trực tuyến (Chat) o Máy truy tìm dữ liệu (Search engine) o Các dịch vụ thương mại và chuyển ngân o Các dịch vụ về y tế (Chữa bệnh từ xa) o Các dịch vụ về giáo dục (Các lớp học ảo) o …

- Đại đa số các dịch vụ trên internet đều miễn phí.

- Các cách thức thông thường để truy cập internet là quay số, băng rộng, không dây, vệ tinh và qua điện thoại cầm tay.

1.1.2 World Wide Web - World Wide Web, gọi tắt là Web hoặc WWW, là một không gian thông tin toàn cầu mà mọi người có thể truy nhập (đọc và viết) qua các máy tính nối với mạng Internet.

Thuật ngữ này thường được hiểu nhầm là từ đồng nghĩa với chính thuật ngữ Internet. Nhưng Web thực ra chỉ là một trong các dịch vụ chạy trên Internet, chẳng hạn như dịch vụ thư điện tử.

Sở dĩ Web trở nên phổ biến vì nó cung cấp cho người sử dụng khả năng truy cập dễ dàng từ đó người sử dụng có thể khai thác các thông tin trên Net dưới dạng văn bản, hình ảnh thậm chí cả âm thanh và video. Vì thế, Web đôi khi còn được gọi là đa phương tiện của mạng Internet.

Để dùng Web, người sử dụng phải có trình duyệt Web như Netscape hoặc Microsoft Internet Explorer. Trình duyệt Web là một ứng dụng tương thích với máy tính của bạn, cho phép bạn nhìn thấy các trang Web trên màn hình máy tính.

Các tài liệu trên World Wide Web được lưu trữ trong một hệ thống siêu văn bản (hypertext), đặt tại các máy tính trong mạng Internet. Người dùng phải sử dụng trình duyệt web (web browser) để xem siêu văn bản. Người dùng có thể theo các liên kết siêu văn bản (hyperlink) trên mỗi trang web để nối với các tài liệu khác hoặc gửi thông tin phản hồi theo máy chủ trong một quá trình tương tác. Hoạt động truy tìm theo các siêu liên kết thường được gọi là duyệt Web. Quá trình này cho phép người dùng có thể lướt các trang web để lấy thông tin. Tuy nhiên độ chính xác và chứng thực của thông tin không được đảm bảo.

Phân biệt Internet và WWW: Internet và WWW không đồng nghĩa. Internet là một tập hợp các mạng máy tính kết nối với nhau bằng dây đồng, cáp quang, v.v..; còn WWW, hay Web, là một tập hợp các tài liệu liên kết với nhau bằng các siêu liên kết (hyperlink) và các địa chỉ URL, và nó có thể được truy nhập bằng cách sử dụng Internet.

Các trình duyệt web thông dụng: o Internet Explorer có sẵn trong Microsoft Windows, của Microsoft o Mozilla và Mozilla Firefox của Tập đoàn Mozilla o Netscape Browser của Netscape o Opera của Opera Software o Safari trong Mac OS X, của Apple Computer o Maxthon của MySoft Technology o Avant Browser của Avant Force.

1.1.3 ISP Internet Service Providers - Các nhà Cung cấp Dịch vụ Internet

ISP cung cấp các kết nối vào Internet cho người dùng ở nhà hay các doanh nghiệp. Có ISP cục bộ, vùng, quốc gia và toàn cầu. Trong hầu hết trường hợp, ISP cục bộ đều nối vào ISP vùng, mà đến lượt mình ISP vùng lại nối vào ISP quốc gia hay toàn cầu. Tuy nhiên, cũng

http://vi.wikipedia.org/wiki/Opera_%28tr%C3%ACnh_duy%E1%BB%87t%29

http://vi.wikipedia.org/w/index.php?title=Safari&action=edit



có thể bỏ qua trật tự nầy để nối trực tiếp vào các điểm chuyển mạch của Internet. Nếu bạn nghĩ Internet như một đường ống dữ liệu lớn với nhiều ống dữ liệu nhỏ hơn được nối với nó, khi đó bạn có thể nghĩ được là ISP cục bộ như người gác cổng để vào Internet.

Nhà cung cấp dịch vụ internet là một công ty với những máy tính siêu nhanh thường xuyên nối vào Internet thông qua một đường truyền tốc độ cao. Công ty này sẽ bán cho bạn quyền kết nối vào mạng và sử dụng một phần đường truyền của họ để đến với toàn mạng internet. Khi đã kết nối vào Internet bạn có thể truy nhập thông tin của mọi máy tính trên mạng. Bạn cũng có thể cung cấp những thông tin của riêng bạn để mọi người có thể truy nhập.

Để máy tính của bạn liên kết được với máy của ISP, bạn cần một modem, thiết bị dùng để chuyển từ tín hiệu số trong máy tính sang tín hiệu tương tự của đường điện thoại, và bạn cần một phần mềm giúp cho máy của bạn giao tiếp với những máy khác.

Các Nhà cung cấp dịch vụ Internet (IPS) tại Việt Nam gồm Tập đoàn Bưu chính Viễn thông Việt Nam (VNPT), Tổng Công ty Viễn thông Quân đội (Viettel), Công ty Viễn thông Điện lực (EVN Telecom), Công ty Cổ phần Bưu chính Viễn thông Sài Gòn (SPT), Công ty Netnam và một số công ty khác.

Việt Nam chính thức kết nối vào Internet từ ngày 19/11/1997.

1.1.4 URL - Tài nguyên (Resource) là một đối tượng trên internet nằm trên máy chủ. Đối tượng

này chính là các thư mục, các tập tin khác nhau, gồm tập tin văn bản, đồ họa, video và âm thanh.

Vậy làm sao để truy xuất được đến các đối tượng này?

Để truy xuất được các đối tượng (các tài nguyên), cần phải biết địa chỉ của đối tượng đó. Đó chính là URL. Xét ví dụ sau.

- Ví dụ về một URL: http://tuyensinh.edu:80/diemthi/timkiem.aspx?sobaodanh=1234 \__/ \__________/ \_/\_________________/ \____________/ | | | | | GT MPV C ĐD TV

Ở đây, GT là giao thức, MPV là máy phục vụ, C là cổng, ĐD là đường dẫn, TV là truy vấn.

- Một URL gồm có nhiều phần: o Tên giao thức (ví dụ: http, ftp) o Tên miền (ví dụ: cit.udn.vn) o Chỉ định thêm cổng (có thể không cần) o Đường dẫn tuyệt đối trên máy phục vụ của tài nguyên (vídụ: thumuc/trang) o Các truy vấn (có thể không cần) o Chỉ định mục con (có thể không cần)

- URL, viết tắt của Uniform Resource Locator, được dùng để tham chiếu tới tài nguyên trên Internet. URL mang lại khả năng siêu liên kết cho các trang mạng. Các tài nguyên khác nhau được tham chiếu tới bằng địa chỉ, chính là URL.

While it is hard to believe, given the millions, perhaps billions, of them out there, every document and resource on the Internet has a unique address, known as its uniform resource locator (URL; commonly pronounced "you-are-ell"). A URL consists of the document's name preceded by the hierarchy of directory names in which the file is stored (pathname), the Internet domain name of the server that hosts the file, and the software and manner by which the browser and the document's host server communicate to exchange the document (protocol ):

protocol://server_domain_name/pathname



Here are some sample URLs: http://www.kumquat.com/docs/catalog/price_list.html http://www.kumquat.com/ ftp://ftp.netcom.com/pub/

The first example is an absolute or complete URL. It includes every part of the URL format: protocol, server, and the pathname of the document. While absolute URLs leave nothing to the imagination, they can lead to big headaches when you move documents to another directory or server. Fortunately, browsers also let you use relative URLs and automatically fill in any missing portions with respective parts from the current document's base URL. The second example is the simplest relative URL of all; with it, the browser assumes that the price_list.html document is located on the same server, in the same directory as the current document, and uses the same network protocol.

Relative URLs are also useful if you don't know a directory or document's name. The third URL example, for instance, points to kumquat.com's web home page. It leaves it up to the kumquat server to decide what file to send along. Typically, the server delivers the first file in the directory, one named index.html, or simply a listing of the directory's contents.

Although appearances may deceive, the last FTP example URL actually is absolute; it points directly at the contents of the /pub directory.

Các giới hạn của URL?

Định dạng URL chỉ chấp nhận các ký tự sau trong chuỗi URL: o Ký tự a đến z o Chữ số từ 0 đến 9 o Các dấu hiệu $ - + ! * ‘ ( ) , o Các ký tự đặc biệt được dành riêng cho các mục đích đặc biệt: ; / ? : @ = &

Không một ký tự nào khác được phép xuất hiện trong URL. Và các ký tự đặc biệt chỉ được dngf với vai trò riêng của chúng. Các ký tự nằm ngoài các quy tắc này phải được viết một cách đặc biệt, bằng cách mã hóa (chẳng hạn sử dụng hàm escape và unescape trong JavaScript).

1.1.5 DNS

1.1.6 Firewall

1.2 Tổng quan về một hệ thống Web 1.2.1 Mô hình một hệ thống Web nói chung: Một hệ thống Web là một hệ thống cung cấp thông tin trên mạng Internet thông qua các

thành phần Máy chủ, trình duyệt và nội dung thông tin.



1.2.2 Nguyên tắc hoạt động: - Nguyên tắc hoạt động của phần lớn các ứng

dụng web được diễn ra như sau:

1. Người sử dụng sẽ thực hiện lời triệu gọi (request) đến máy chủ Web. Cách đơn giản nhất của hành động này là người sử dụng dung trình duyệt web gõ địa chỉ tên miền cần truy cập (http://cit.udn.vn) gửi yêu cầu đến máy chủ web.

2. Máy chủ Web sẽ xem xét và thực hiện các yêu cầu từ phía trình duyệt của người dùng, chẳng hạn như lấy các giá trị truy vấn, thực hiện các phép toán, truy xuất cơ sở dữ liệu…

3. Máy chủ Web sau khi tính toán xong sẽ đưa ra một trang kết quả “thuần HTML” để trả lại cho phía trình duyệt máy khách.

4. Tại máy khách, trình duyệt sẽ đọc trang HTML nhận được và hiển thị ra trên màn hình.

- Người dung sẽ trở nên trong suốt với những gì diễn ra đằng sau trình duyệt web. Họ không cần biết máy chủ phải thực hiện những phép tính gì, có phải kết nối cơ sơ dữ liệu không… Người dùng chỉ cần thấy trên trình duyệt là một trang web sống động, với những thông tin cần thiết, và tất nhiên, là càng nhanh càng tốt.

- Trong trường hợp Web tĩnh thì máy chủ web sẽ lấy thông tin lưu sẵn trên máy chủ dạng thư mục, files và gửi lại theo yêu cầu của máy khách.

- Trường hợp web động phải dụng các ngôn ngữ lập trình web như ASP, PHP, JSP, … để kết nối và khai thác cơ sở dữ liệu.

http://cit.udn.vn/





CHƯƠNG 2: NGÔN NGỮ HTML

2.1 Giới thiệu HTML HTML (hay Hypertext Markup Language-Ngôn ngữ liên kết siêu văn bản) là ngôn ngữ

đánh dấu chuẩn dùng lập trình các tài liệu World Wide Web, tài liệu là các tập tin văn bản đơn giản. Ngôn ngữ HTML dùng các thẻ hoặc các đoạn mã lệnh để chỉ cho các trình duyệt (Web browsers) cách hiển thị các thành phần của trang như text và graphics ,và đáp lại những thao tác của người dùng bởi các thao tác ấn phím và nhắp chuột. Hầu hết các Web browser, đặc biệt là Microsoft Internet Explorer và Netscape Navigator, nhận biết các thẻ của HTML vượt xa những chuẩn HTML đặt ra.

Trang HTML nói chung tồn tại như là các tập tin văn bản chứa trên các máy tính nối vào mạng Internet. Các file này có chứa thẻ đánh dấu, nghĩa là, các chỉ thị cho chương trình về cách hiển thị hay xử lý văn bản ở dạng văn bản thuần túy. Các file này thường được truyền đi trên mạng internet thông qua giao thức mạng HTTP, và sau đó thì phần HTML của chúng sẽ được hiển thị thông qua một trình duyệt web, phần mềm đọc email , hay một thiết bị không dây như một chiếc điện thoại di động.

2.2 Trình soạn thảo HTML Bạn có thể soạn thảo mã lệnh HTML trên bất kỳ trình soạn thảo văn bản nào, như

notepad, word, WordPad… Chúng ta sẽ tìm hiểu một số công cụ soạn thảo HTML hữu ích:

2.2.1 Microsoft FrontPage Microsoft đã phát triển một công cụ soạn thảo HTML khá phổ biến với tên gọi

FrontPage. FrontPage cung cấp cho các nhà phát triển web một số công cụ về JavaScript hỗ trợ trong việc tạo ra một website tương tác. FrontPage đã từng được thừa nhận là công cụ phát triển HTML và JavaScript hàng đầu.



FrontPage còn chứa nhiều đặc điểm hữu dụng, bao gồm những khả năng như thiết kế một cấu trúc website trước khi tạo bất kỳ một trang web nào, cấu hình tính an toàn cho website, thiết lập kiểu trên toàn site và tạo ra các hình ảnh biểu ngữ (banner) tùy biến.

2.2.2 Macromedia Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004 là một trình soạn thảo HTML và JavaScript rất phổ

biến trong cộng đồng các nhà phát triển web chuyên nghiệp. Nó cung cấp nhiều đặc điểm, bao gồm khả năng soạn thảo hầu hết các ngôn ngữ lập trình phía máy chủ phổ biến như ASP, JSP và PHP, cung cấp một số thành phần JavaScript được xây dựng sẵn, tích hợp tốt với cơ sở dữ liệu và tuân thủ các chuẩn như HTML và XML.

Nếu bạn đang bắt đầu học HTML, tốt hơn hết, hãy sử dụng Notepad.

2.3 Tạo trang HTML đầu tiên Bạn hãy cùng thử tạo một trang HTML đầu tiên với sự trợ giúp của notepad. Bạn nên

có một thư mục (folder) để chứa các ví dụ mà bạn tạo ra.

Bước 1: Tạo mới 1 file Text document

đặt tên là vidu1.htm



Bước 2: Mở vidu1.htm bằng chương trình Notepad

Bước 3: Nhập vào đoạn mã HTML như sau và lưu lại:

<html> <head>

<title>Hello</title> </head> <body>

Đây là trang web đầu tiên của tôi. </body>

</html>

Bước 4: Mở file vidu1.htm để xem kết quả



Có thể bạn sẽ gặp phải thông báo rằng các ký tự mà bạn sử dụng là Unicode (các ký tự Tiếng Việt trong ví dụ này), trong khi file vidu1.htm được lưu với mã ANSI.

Nếu bạn không có điều chỉnh gì, thì một số chữ trong Tiếng Việt sẽ không hiển thị đúng,

như sau:

Trong trường hợp này, bạn hãy chọn Menu File Save As, trên hộp thoại Save As chọn Encoding là UTF-8. Lưu lại.



Bạn hãy làm các bước tương tự với những ví dụ sau này.

2.4 Cấu trúc trang HTML Một tài liệu HTML gồm hai phần riêng biệt, phần đầu (head) và phần thân (body). Phần

đầu chứa đựng những thông tin về tài liệu và không được hiển thị lên màn hình. Phần thân thì chứa đựng mọi thứ được trình bày lên màn hình như là một phần của trang Web.

Ví dụ 2.2-1 <html>

<head> <title>Tiêu đề trang web</title>

</head> <body>

Thân trang web </body>

</html>



2.4.1 Thẻ và cấu trúc thẻ Như vậy, một trang HTML bao gồm nội dung trang và các thẻ quy định cách hiển thị.

Khi trình duyệt (web browser) hiển thị nội dung 1 trang web nó sẽ tìm kiếm trong đó những đoạn mã đặc biệt là các thẻ được đánh dấu bởi ký hiệu < và >, và căn cứ vào đó để thể hiện. Cú pháp tổng quát của 1 thẻ: <tên_thẻ thuộc_tính_1=giá_trị_1 thuộc_tính_2=giá_trị_2 >Văn bản </tên_thẻ>

hoặc đơn giản hơn là: <tên_thẻ>Chuỗi văn bản</tên_thẻ>

Phần thẻ là một mã xác định hiệu ứng mà bạn yêu cầu. Ví dụ, cho thẻ nét đậm là <B>. Cho nên nếu bạn muốn câu “Trường Cao đẳng Công nghệ Thông tin” xuất hiện theo kiểu chữ đậm (bold), bạn phải đưa dòng sau đây vào tài liệu của mình:

<b>Trường Cao đẳng Công nghệ Thông tin</b>.

Ví dụ: Ví dụ 2.2.1-1 <html>

<head> <title>Ví dụ</title>

</head> <body>

Chữ thường <b>Chữ đậm</b>

</body> </html>

Kết quả:

Thẻ đầu tiên (<b>) báo cho trình duyệt (browser) hiển thị tất cả phần văn bản tiếp theo bằng phông chữ đậm, liên tục cho đến thẻ </b>. Dấu gạch chéo (/) xác định đó là thẻ kết thúc, và báo cho trình duyệt ngưng hiệu ứng đó. HTML có nhiều thẻ dùng cho nhiều hiệu ứng khác, bao gồm chữ nghiêng (italic), dấu đoạn văn bản (paragraph), tiêu đề, tên trang, liệt kê, liên kết, và nhiều thứ nữa.

Vì sao trên trình duyệt không xuống dòng như trong mã nguồn?



Trình duyệt sẽ bỏ qua những ký tự khoảng trắng, ký tự tab, và dấu xuống dòng dư thừa trong tập tin HTML của bạn. Vì vậy, để hiển thị văn bản ở một dòng mới, bạn hãy thêm vào thẻ xuống dòng là <br>.

Mỗi thẻ đều có tên thẻ, đôi khi được bổ sung thêm một danh sách tùy chọn các thuộc tính, tất cả được đặt giữa dấu < và dấu >. Thẻ đơn giản nhất là các thẻ chỉ chứa tên thẻ, ví dụ như thẻ <head> hay thẻ <b>. Những thẻ phức tạp hơn chứa một hoặc nhiều thuộc tính, quy định cho tính chất của thẻ đó.

Ví dụ: <font color=red size=14>Đoạn văn màu đỏ, cỡ chữ 14</font>

Tên thẻ: font

Thuộc tính: color (màu sắc) và size (cỡ chữ) Ví dụ 2.2.1-2 <html>

<head> <title>Ví dụ</title>

</head> <body>

Chữ thường <font color=red size=14>Đoạn văn màu đỏ, cỡ chữ 14</font>

</body> </html>

Trên thực tế, khi dùng định dạng HTML thuần túy, thay vì CSS, kích thước phông chữ HTML được thay đổi từ 1 đến 7 với 1 là nhỏ nhất và 7 là lớn nhất. Nếu bạn đặt kích thước lớn hơn 7, trình duyệt sẽ tự động hiểu là 7 (lớn nhất)

Theo tiêu chuẩn của ngôn ngữ HTML, thẻ và các thuộc tính sẽ không có sự phân biệt chữ hoa và chữ thường. Điều đó có nghĩa là không có sự khác nhau về kết quả khi sử dụng một trong các thẻ sau: <head>, <Head>, <HEAD>, hay thậm chí <HeAd>, những thẻ này là tương đương nhau. Tuy nhiên, bạn nên sử dụng toàn bộ chữ thường trong thẻ HTML một cách nhất quán vì đó là điều bắt buộc trong chuẩn XHTML.

Bạn nên tạo cho mình thói quen tuân theo các chuẩn để trang web của mình có thể hoạt động tốt nhất cho hiện tại và tương lai.

Các thuộc tính, nếu có, sẽ được đặt tiếp theo sau tên thẻ, và chúng được phân cách nhau bởi một hay nhiều ký tự trắng, ký tự tab, hoặc ký tự xuống dòng (enter). Thứ tự của các thuộc tính không quan trọng.

Giá trị của thuộc tính, nếu có, sẽ được đặt ngay sau dấu bằng (=) sau tên thuộc tính. Bạn có thể thêm vào các ký tự trắng trước và sau dấu bằng, chẳng hạn như: width=6, width = 6, width =6 đều có ý nghĩa giống nhau. Tốt nhất là không nên thêm các ký tự trắng vào trước và sau dấu bằng. Khi đó mã HTML sẽ dễ đọc hơn, và dễ dàng phân biệt được các cặp thuộc tính/giá trị trong một thẻ có nhiều thuộc tính.

Nếu giá trị của thuộc tính là một từ hay một số (không có dấu cách space), bạn có thể đặt nó ngay sau dấu bằng. Trong trường hợp ngược lại, giá trị của thuộc tính phải được đặt giữa cặp dấu nháy đơn hoặc kép.



Thành phần kết thúc của thẻ không chứa bất kỳ một thuộc tính nào.

Các thẻ có thể được đặt lồng vào nhau và cùng tác động lên đoạn văn bản được đặt trong nó.

Ví dụ: Dòng văn bản này <b> in đậm <i>và in nghiêng</i><b>

Một số thẻ không có thành phần kết thúc. Chẳng hạn như thẻ xuống dòng <br>, thẻ hiển thị hình ảnh <img>, …

Thẻ <HTML></HTML>: Thẻ <HTML> ở đầu trang web tĩnh và </HTML> ở cuối trang.

Trang web được bắt đầu và kết thúc bởi thẻ này.

Các tập tin HTML luôn bắt đầu bằng thẻ <HTML>. Thẻ này không làm gì khác ngoài nhiệm vụ báo cho trình duyệt Web biết rằng nó đang đọc một tài liệu có chứa các mã HTML. Tương tự, dòng cuối trong tài liệu của bạn luôn luôn là thẻ </HTML>, tương đương như Hết.

Thẻ <HEAD></HEAD>: Thẻ <HEAD> đánh dấu phần đầu của trang HTML, được đặt ngay sau thẻ <HTML>. Phần đầu giống như lời giới thiệu cho trang. Các trình duyệt Web dùng phần đầu này để thu nhặt các loại thông tin khác nhau về trang. Mặc dù bạn có thể đặt một số chi tiết bên trong phạm vi phần đầu này, nhưng phổ biến nhất là tên trang. Thẻ <HEAD> có thể bỏ qua.

Trong phần lớn trường hợp, phần đầu trang sẽ chứa: o Tiêu đề của trang (<title>) o Định nghĩa bảng kiểu (<style> và <link>) o Dữ liệu meta, chẳng hạn như các từ khóa tìm kiếm <meta> o Các hàm JavaScript (<script>)

Thẻ tiêu đề <TITLE></TITLE>: Thẻ <TITLE> chỉ định tiêu đề của của trang web. Tiêu đề này sẽ xuất hiện trên thanh tiêu đề của trình duyệt (web browser: Internet Explorer hoặc Netscape Navigator). Thẻ này chỉ hợp lệ khi đưa vào bên trong phần <HEAD>

Thẻ thân trang <BODY></BODY>: dùng chỉ định bắt đầu và kết thúc phần nội dung trang web.

HTML Kết quả



Ví dụ 2.2.1-3 <html> <head> <title>Welcome</title> </head> <body> Chào các bạn! </body> </html>

Nếu bạn mở thẻ, hãy đóng thẻ

Tuy có một số thẻ HTML là thực thể độc lập, nhưng đa phần được cặp đối với thẻ đầu và cuối.

Ví dụ <html> là thẻ cặp đôi, do đó bạn cần bổ sung thẻ đóng </html> ở cuối hồ sơ (trang web). Tương tự nếu bạn bắt đầu với đoạn in nghiêng bằng <i> (thẻ in nghiêng), thì phải kết thúc với </i>.

Trong trường hợp, nếu bạn xác định nhầm dấu chéo ngược thay vì dấu chéo thuận, như <\html>, hoặc một số biến thể khác, trình duyệt sẽ không hiểu và bỏ qua thẻ đóng. Khi điều này xảy ra, thuộc tính được xác định trong thẻ mở tiếp tục vượt qua điểm mà bạn muốn ngừng. Trong nhiều tình huống, việc quên thẻ đóng có thể làm bhongf hoàn toàn trang web.

2.4.2 Màu sắc trong thiết kế web Màu sắc được sử dụng trong thiết kế web thông

thường được biểu diễn với việc sử dụng Mô hình màu RGB;

Mô hình màu RGB sử dụng mô hình bổ sung trong đó ánh sáng đỏ, xanh lá cây và xanh lam được tổ hợp với nhau theo nhiều phương thức khác nhau để tạo thành các màu khác. Từ viết tắt RGB trong tiếng Anh có nghĩa là đỏ (red), xanh lá cây (green) và xanh lam (blue), là ba màu gốc trong các mô hình ánh sáng bổ sung.

Biểu diễn một màu dưới dạng:

#rrggbb - là giá trị hexadecimal (thập lục) red-green-blue

Như vậy dải màu sẽ có giá trị từ: #000000 đến #FFFFFF, tất cả gồm có 256 x 256 x 256 = 16.777.216 màu.

Tên của các màu được sử dụng trong HTML:

Những màu cơ bản sẽ được gán một tên riêng. Khi đó, trong mã HTML, để thể hiện màu đỏ, thay vì sử dụng mã màu #FF0000, ta dùng tên của màu đó là “red”.

Chuẩn HTML 4.01 định nghĩa 16 tên màu sau đây:

Color Hexadecimal Color Hexadecimal Color Hexadecimal Color Hexadecimal

aqua #00FFFF black #000000 blue #0000FF fuchsia #FF00FF



gray #808080 green #008000 lime #00FF00 maroon #800000

navy #000080 olive #808000 purple #800080 red #FF0000

silver #C0C0C0 teal #008080 white #FFFFFF yellow #FFFF00

Các màu sắc cầu vồng nằm theo thứ tự đỏ, da cam, vàng, lục, lam, chàm, tím.

Quay trở lại với thẻ thân trang <BODY>. Bạn có thể xác lập màu nền cho trang web thông qua thuộc tính BGCOLOR (background color) của thẻ này. Bạn hãy nhớ lại cấu trúc của một thẻ HTML, trong đó bao gồm tên thẻ và các thuộc tính.

Để xác lập màu nền là màu đỏ, sử dụng: <body bgcolor=”#FF0000”>


hoặc: <body bgcolor=red>


…và thêm chữ màu trắng: <body bgcolor=red text=white>


Ví dụ 2.2.1-4 <html>

<head> <title>VD Màu nền</title> </head> <body bgcolor=red text=white> Trang này có màu nền là ĐỎ<br> Và chữ màu TRẮNG </body>

</html>

2.4.3 Thẻ chú thích

Thẻ chú thích :



Giống như bất cứ một ngôn ngữ lập trình nào khác, một trang mã HTML sẽ trở nên khó hiểu, thậm chí cả đối với người viết ra chúng, nếu như trong đó không có một dòng chú thích nào. Bởi vậy, khi viết trang HMTL, bạn nên thêm vào những dòng chú thích cần thiết về những gì bạn đang làm.

Ðể thêm những dòng chú thích trong trang HTML, sử dụng cú pháp sau: 

Tất cả những gì nằm trong phần chú thích, nghĩa là nằm giữa cặp thẻ đặc biệt , sẽ không được trình duyệt hiển thị. Cho phép có khoảnh trắng giữa -- và >, nhưng không được có khoảng trắng giữa <! và --.

Mặc dù đoạn văn bản chú thích không được hiển thị trên trình duyệt, nhưng bất cứ người nào cũng có thể đọc được nó khi mở xem mã nguồn của trang HTML (vào View Source). Bởi vậy, hãy thận trọng với những gì bạn viết trong những dòng chú thích.

2.4.4 Các thẻ định dạng trình bày

Thẻ tiêu đề:

Những tiêu đề được thực hiện trong HTML bằng cách đặt đoạn văn bản giữa những thẻ tiêu đề (heading tag). Dạng các thẻ tiêu đề của HTML là:

<hN>Dòng tiêu đề</hN>

N là một số có giá trị từ 1 đến 6 chỉ định kích cỡ tiêu đề. Cỡ tiêu đề nhỏ dần từ <h1> đến <h6>.

Thẻ Tiêu đề được sử dụng trong trường hợp nào? Nó tương tự như việc đặt Heading trong Microsoft Word. Chẳng hạn trong tài liệu mà các bạn đang xem, chúng ta có thể sử dụng thẻ tiêu để <h1> cho tên của Chương 1, Chương 2, … Sử dụng thẻ tiêu đề <h2> cho tên của các mục 1.1, 1.2… của Chương 1, và cứ tương tự như thế.

Sau đây là một vài ví dụ cho những kích cỡ khác nhau của tiêu đề :

HTML Kết quả

Ví dụ 2.2.1-5 <html> <head> <title>Heading</title> </head> <body>  <h1>Dòng tiêu đề 1</h1> <h2>Dòng tiêu đề 2</h2> <h3>Dòng tiêu đề 3</h3> <h4>Dòng tiêu đề 4</h4> <h5>Dòng tiêu đề 5</h5> <h6>Dòng tiêu đề 6</h6> </body> </html>



Thẻ ngắt dòng <br> (xuống dòng không sang đoạn mới):

Để ngắt dòng trong HTML, chúng ta dùng thẻ ngắt dòng <br />. Giống như các thẻ khác, thẻ ngắt dòng có thể xuất hiện bất kỳ nơi nào trong văn bản, ở cuối dòng muốn ngắt. Đối với thẻ ngắt dòng <br />, không có thẻ đóng </br>.

Bạn cần lưu ý rằng, dòng tiếp theo vẫn ở cùng đoạn văn bản so với dòng trước nó.

Thẻ ngắt đoạn <p></p> (xuống dòng sang đoạn mới):

Để ngắt đoạn văn bản và chuyển sang đoạn văn bản (paragraph) mới, ta dùng thẻ <p>. Thành phần </p> cuối đoạn không nhất thiết phải có. Có thể chỉ định các thuộc tính của thẻ này như sau:

<p align=align-type>

Trong đó, align = align-type dùng chỉ định canh đoạn mới.

align-type = left (canh trái), right (canh phải) center (canh giữa).

HTML Kết quả

Ví dụ 2.2.1-6 <html> <head> <title>Paragraph</title> </head> <body>  Con cóc trong hang<br> Con cóc nhảy ra <p align="center"> Con cóc nhảy ra<br> Con cóc ngồi đó</p> <p align="right"> Con cóc ngồi đó<br> Con cóc nhảy đi.</p> </body> </html>

Thẻ thêm đường thẳng nằm ngang <hr>:

Sử dụng thẻ <hr> để thêm đường thẳng nằm ngang trong trang web. Thẻ này được định nghĩa như sau:

<hr align=align-type color=color noshade size=n width=m />

Trong đó:

- align=align-tpye: canh lề cho đường thẳng ngang, align-type có thể là left, right, center

- color=color: màu đường thẳng ngang

- noshade: không có bóng

- size=n: độ đậm của đường thẳng ngang, n có giá trị là số nguyên tính theo đơn vị pixel.



Ví dụ 2.2.1-7 <html> <head> <title>Paragraph</title> </head> <body> <p align="left">Đoạn văn bản 1<br>Canh trái</p> <hr align="center" color="#FF0000" noshade size="3" width="200" /> <p align="right">Đoạn văn bản 2<br>Canh phải</p> <hr align="left" color="black" size="2" width=”20%” /> </body> </html>

Chú ý <hr align="left" color="black" size="2" width=”20%” />

Trong trường hợp thuộc tính chiều rộng được chỉ định bằng phần trăm ( ví dụ width=20%), thì giá trị chiều rộng bằng 20% chiều rộng hiện tại của trình duyệt. Như vậy chiều rộng của đường thẳng nằm ngang thay đổi phụ thuộc vào bề rộng trình duyệt. Bạn hãy thay đổi và kiểm tra.

Thẻ in đậm <b></b>:

Hiển thị văn bản đậm theo physical type

Thẻ in nghiêng <i></i>:

Hiển thị văn bản nghiêng theo physical type

Thẻ gạch dưới <u></u>:

Hiển thị văn bản gạch dưới theo physical type

Thẻ gạch giữa <s></s>:

Hiển thị văn bản gạch giữa (strikeout) theo physical type

Ví dụ 2.2.1-8



<html> <head> <title>Text</title> </head> <body> Dòng thứ 1: thông thường<br>

<b>Dòng thứ 2: đậm</b><br> <i>Dòng thứ 3: nghiêng</i><br> <u>Dòng thứ 4: gạch dưới</u><br> <s>Dòng thứ 5: gạch giữa</s><br> <i><b>Dòng thứ 6: vừa đậm vừa nghiêng</b></i><br> <i><u>Dòng thứ 7: vừa nghiêng vừa gạch dưới</u></i>

</body> </html>

Thẻ đậm logic type <STRONG></STRONG>:

Hiển thị văn bản đậm theo logic type

Thẻ nghiêng logic type <EM></EM>:

Hiển thị văn bản nghiêng theo logic type

Thẻ gạch ngang logic type <STRIKE></STRIKE>:

Hiển thị văn bản gạch dưới theo logic type

Thẻ chỉ số logic type <SUB></SUB>:

Hiển thị văn bản dạng chỉ số theo logic type

Thẻ mũ logic type <SUP></SUP>:

Hiển thị văn bản dạng mũ theo logic type

Ví dụ: <html> <head> <title>Thẻ số mũ – chỉ số</title> </head> <body> (x<sub>1</sub> + x<sub>2</sub>)<sup>2</sup> = 1



</body> </html>

Thẻ định font chữ cơ sở <BASEFONT></BASEFONT>:

Dùng thẻ <basefont> để chỉ định kiểu chữ, cỡ chữ, màu sắc cho các văn bản không định dạng.

<basefont size=n face=name color=color>

Trong đó:

size=n: chỉ định kích thước văn bản, n từ 1 đến 7. Giá trị mặc định là 3.

color=color: màu văn bản

face=name: tên font

Thẻ font chữ <FONT></FONT>:

Thẻ <font> được dùng để chỉ định kiểu chữ, cỡ chữ, màu sắc cho phần văn bản mà nó tác động. Ðịnh nghĩa như sau:

<font size=n face=name color=color>

Trong đó:

size=n: chỉ định kích thước văn bản, n từ 1 đến 7. Thêm dấu cộng + hoặc trừ - phía trước để chỉ định việc tăng hoặc giảm kích thước so với kích thước đã định trong basefont.

color=color: màu văn bản

face=name: tên font

Ví dụ 2.2.1-9 <html> <head> <title>Text</title> </head> <body> <basefont size="3"></basefont>

<font size="5">Kích thước văn bản là 5</font>

<p><font size="+1">Kích thước văn bản là 3 + 1 = 4</font></p>

<p><font size="+2">Kích thước văn bản là 3 + 2 = 5</font></p>

<p><font size="-1">Kích thước văn bản là 3 - 1 = 2</font></p>

</body> </html>



Một số font unicode thường được dùng: face=arial, Times New Roman, …

Ký tự định dạng trước ()

Chúng ta đã biết là một Web browser sẽ bỏ qua những ký tự khoảng trắng, ký tự tab, và dấu xuống dòng dư thừa trong tập tin HTML của bạn. Tuy nhiên có một vài trường hợp cá biệt mà việc trình bày trang với các tính chất đó trở nên quan trọng.

Kiểu ký tự định dạng trước cho phép bạn có thể bảo toàn các dấu cách và dấu xuống dòng trong trang văn bản HTML giống như khi bạn gõ vào trong quá trình soạn thảo. Điều đó có nghĩa là bạn không nên sử dụng các thẻ <BR> cũng như <P> trong đoạn ký tự định dạng trước.

Browser sử dụng phông chữ bề rộng cố định (fixed-width font) để hiển thị nội dung trong phần ký tự định dạng trước. Thông thường, đó là phông hệ thống đang được sử dụng trong máy tính của bạn.

Kiểu ký tự định dạng trước rất có ích trong trường hợp dấu cách là không thể thiếu được, chẳng hạn như khi thể hiện một đoạn mã chương trình

Kiểu ký tự định dạng trước được bắt đầu bằng thẻ <PRE> và kết thúc bằng thẻ </PRE>. Ví dụ 2.2.1-10 <html> <head> <title>Text</title> </head> <body> <p>This is a function: </p> function fcompare(a, b) { if (a > b) return a; else return b; } </body> </html>



Ví dụ 2.2.1-11 <html> <head> <title>Text</title> </head> <body> <pre> <p>This is a function: </p> function fcompare(a, b) { if (a > b) return a; else return b; } </pre> </body> </html>

Thẻ liên kết:

Liên kết siêu văn bản (Hyperlinks)

Liên kết siêu văn bản (Hyperlinks hay gọi tắt là link) là công cụ cơ bản để “di chuyển” trên WWW. Hyperlinks được dùng để di chuyển đến các điểm khác nhau được đánh dấu trên trang web, được dùng để tải các tập tin, hay có thể mở một trang web được đặt trên một máy chủ web khác.

Dùng thẻ <a> để xác lập một liên kết. Cấu trúc như sau:

<a href=”địa_chỉ_liên_kết (url)”>Miêu tả liên kết</a> Ví dụ:

<a href=”http://cit.ud.edu.vn/Albums.aspx”>Albums ảnh Trường CĐ CNTT</a>

Trong ví dụ này, nếu bạn bấm chuột vào dòng “Albums ảnh Trường CĐ CNTT”, bạn sẽ được chuyển đến địa chỉ “http://cit.ud.edu.vn/Albums.aspx”, tức là trình duyệt sẽ mở trang Albums ảnh tương ứng.

Các thuộc tính của thẻ <a>: o href

Thuộc tính href chỉ định địa chỉ liên kết, dòng văn bản sau dấu “=” là địa chỉ đối tượng liên kết. Dòng văn bản giữa cặp thẻ đóng/mở <a> và </a> thường dùng để miêu tả liên kết, hoặc có thể là một đoạn văn bất kỳ. Khi người duyệt web bấm chuột vào dòng này, trình duyệt sẽ chuyển đến đối tượng liên kết.

Lưu ý:

Có thể sử dụng: <a href="mailto:địa_chỉ_email">

Liên kết này sẽ kích hoạt chương trình Mail và tự động điền địa chỉ vào mục To giùm bạn. Bạn có thể khai báo luôn cả chủ đề thư (?subject).

Ví dụ: <a href="mailto:[email protected]?subject=Góp ý">Vào đây để gửi ý kiến của bạn</a>

o name

Thuộc tính name cho phép bạn đánh dấu vị trí để làm đích cho các tài liệu khác liên kết qua.

http://cit.ud.edu.vn/Albums.aspx

http://cit.ud.edu.vn/Albums.aspx



Ví dụ: <a name=”top”>Đầu trang</a>

Ở cuối trang web có thể đặt liên kết đến đầu trang như sau: <a href=”#top”>Lên đầu trang</a>

Và các trang web khác có thể liên kết với trang này ngay tại vị trí đã được đánh dấu (đầu trang) bằng liên kết:

<a href=”trangchu.html#top”>Chuyển đến đầu trang chủ</a>

Màu của liên kết:

Trong trang web, bạn thấy liên kết nào cũng màu xanh, gõ vào thì thành màu trắng, sau khi gõ thì màu xám. Ðiều đó được thực hiện bởi các đoạn code sau (trong body tag):

<body bgcolor="white" link="blue" alink="white" vlink="gray"> (alink= active link, vlink= visited link)

Ví dụ <body style="font-size:25" bgcolor="white" link="blue" alink="red" vlink="gray"> <a href="http://www.cit.udn.vn">Trường CĐ CNTT</a><br> <a href="http://dut.udn.vn">Trường Đại học Bách khoa</a><br> <a href="http://edt.udn.vn">Trường Đại học Kinh tế</a><br> </body>

2.4.5 Form Khi viết một trang web, bạn muốn không chỉ cung cấp thông tin cho người đọc, mà còn

muốn giao tiếp với họ và thu nhận các thông tin phản hồi. Để làm được điều đó, bạn cần dùng Form (biểu mẫu).

Forms are the most popular way to make web pages interactive. Like forms on paper, a form on a web page allows the user to enter requested information and submit it for processing. (Fortunately, forms on a web page are processed much faster.)





Form chứa một hay nhiều ô nhập dữ liệu (text-input box), nút bấm (clickable button), nút lựa chọn (checkbox), hình ảnh (image)…, tất cả được đặt trong thẻ <form>. Bạn có thể tạo ra nhiều form trong một trang HTML, và mỗi form chứa những thành phần bên trong khác nhau. Trong các thành phần của một form, thì nhãn (label) là thành phần thường được dùng nhất, vì nó có chức năng chú thích, diễn giải hay hướng dẫn cho người dùng để họ có thể điền đúng vào các thành phần của form. Và đối với một số thành phần của form, bạn có thể sử dụng các câu lệnh và sự kiện của JavaScript để tạo ra các hiệu ứng đa dạng cho form, chẳng hạn như kiểm tra tính đúng đắn của dữ liệu đã được người dùng nhập vào form.

Người dùng điền đầy đủ thông tin vào các trường của form, sau đó bấm chuột vào một nút nhấn (button) đặt biệt (Submit button), hoặc đơn giản là bấm phím Enter, để gửi tất cả những thông tin đó lên máy chủ (server). Trình duyệt sẽ làm nhiệm vụ đóng gói các thông tin và gửi đi. Tại máy chủ, những thông tin nhận được từ người duyệt web sẽ được phân tích, xử lý và trả lời lại cho phía người duyệt web, thông thường là một trang HTML. Trang HTML có chức năng “trả lời” này đôi khi chỉ đơn giản là một câu cảm ơn (trong trường hợp lấy ý kiến người dùng chẳng hạn), hay là một lời hướng dẫn làm thế nào để nhập đúng thông tin vào các trường trên form (trong trường hợp thông tin nhập vào không hợp lệ).

Form có thể được đặt ở bất kỳ đâu trong phần thân (nghĩa là giữa cặp thẻ <body> và </body>) của trang HTML, với thẻ bắt đầu là thẻ <form>, và thẻ kết thúc tương ứng là thẻ </form>.

Để sử dụng form, cần phải xác định ít nhất 2 thuộc tính. Một thuộc tính để quy định dữ liệu được gửi đi đâu, thuộc tính kia quy định phương thức gửi dữ liệu là gì.

Ví dụ 2.2.5-1: <html> <head> <title>Login</title> </head> <body> <form action="Vd2_2_5-2.htm" method="get" name=”form1”> Họ: <input type="text" name="FirstName" /><br /> Tên: <input type="text" name="LastName" /><br> <input type="submit" value="Đăng nhập" /> </form> </body> </html>

Điền thông tin và bấm vào “Đăng nhập”:



Thuộc tính action

Thuộc tính action là thuộc tính bắt buộc phải có khi sử dụng form. Nó xác định đường dẫn URL của ứng dụng sẽ tiếp nhận và xử lý dữ liệu nhập vào từ form. Nói cách khác, thuộc tính action sẽ chỉ ra rằng, dữ liệu được nhập vào từ form, sau khi nhấn Submit, sẽ được gửi đi đâu.

Thẻ <form> với thuộc tính action có thể được thiết lập như sau: <form action=”http://ts.edu.vn/diemthi.aspx”> ……… </form>

Ví dụ trên chỉ ra rằng, trình duyệt cần phải gửi tất cả dữ liệu được nhập vào form đến trang diemthi.aspx theo địa chỉ url trong thuộc tính action.

Thuộc tính method

Bên cạnh action, thì method cũng là một thuộc tính bắt buộc khi dùng thẻ <form>. Thuộc tính method chỉ rõ phương thức mà trình duyệt sẽ gửi dữ liệu của form đến máy chủ để xử lý. Có 2 phương thức là GET và POST.

Với phương thức POST, trình duyệt sẽ gửi dữ liệu qua 2 bước: đầu tiên, dựa vào địa chỉ URL được xác định bởi thuộc tính action, trình duyệt sẽ kết nối với ứng dụng được chỉ định để xử lý dữ liệu trên form. Ứng dụng này được đặt tại máy chủ. Một khi kết nối được thiết lập, trình duyệt mới gửi dữ liệu lên máy chủ.

Với GET, cách thức gửi dữ liệu từ form lên máy chủ sẽ được thực hiện theo một cách khác. Việc kết nối với máy chủ và việc gửi dữ liệu được thực hiện cùng một lúc. Trình duyệt sẽ nối dữ liệu lấy từ form vào địa chỉ URL trong thuộc tính action, và gửi lên máy chủ.

Chú ý rằng, với phương thức POST, trình duyệt sẽ đóng gói tất cả dữ liệu nhập và từ form và gửi lên máy chủ. Còn với phương thức GET, dữ liệu nhập vào sẽ được nối vào địa chỉ URL để gửi đi.

Dưới đây là một ví dụ sử dụng form với với thuộc tính method là GET <form method=”GET” action="http://ts.edu.vn/diemthi.aspx"> ... </form>

Việc nhắp chuột vào một siêu liên kết (hyperlink) trong một trang web, thông điệp email hay tài liệu khác, việc gõ một địa chỉ vào thanh địa chỉ của một trình duyệt và nhấn Enter, hay nhấn chuột vào các nút liên kết (button links) hay Favorites trong trình duyệt, tất cả đều sử dụng phương thức GET. Cách duy nhất gửi các giá trị đến máy chủ từ những hành động này là qua chuỗi truy vấn (QueryString) được gắn thêm vào URL.

POST hay GET?

Vậy trong trường hợp nào thì dùng POST, trong trường hợp nào dùng GET?

- Để dữ liệu được truyền một cách tốt nhất, hãy dùng phương thức GET cho những form có ít trường dữ liệu.

- Chiều dài của chuỗi URL bị giới hạn, nên nếu dùng phương thức GET thì dữ liệu có nguy cơ bị tràn và bị cắt bớt. Dùng phương thức POST cho phép gửi dữ liệu của form với

http://ts.edu.vn/diemthi.aspx

http://ts.edu.vn/diemthi.aspx



nhiều trường, hay với những đoạn văn bản dài. Nghĩa là POST không bị giới hạn về kích thước lượng thông tin gửi đi.

- Trong những trường hợp đòi hỏi sự bảo mật về dữ liệu, hãy dùng POST. GET đưa các giá trị tường minh vào trong URL và sẽ được ghi lại trong file log khi đi qua các server.

Ở ví dụ 2.2.5-1, sử dụng phương thức GET, sau khi bấm vào nút “Đăng nhập” bạn sẽ thấy kết quả:

Nếu dùng phương thức POST:

Các thành phần thường được sử dụng trong form

Để nhập dữ liệu vào form như văn bản, danh sách, chọn lựa,... chúng ta sử dụng các thẻ <input>.

Use the <input> tag to define any one of a number of common form "controls," as they are called in the HTML 4 and XHTML standards, including text fields, multiple-choice lists, clickable images, and submission buttons. Although there are many attributes for the <input> tag, only the type and name attributes are required for each element (only type for a submission or reset button; see the following explanation). And as we describe in detail later, each type of input control uses only a subset of the allowed attributes. Additional <input> attributes may be required based upon which type of form element you specify.

Các thành phần của form gồm: Text boxes, Password boxes, Checkboxes, Option (Radio) buttons, Submit, Reset, File, Hidden and Image. Các thành phần này sẽ được chỉ định thông qua thuộc tính TYPE của thẻ <INPUT> </INPUT>.

o Text boxes



Ví dụ:

HTML Kết quả

<form … > First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form>

o Password

Ví dụ:



HTML Kết quả

<form … > User: <input type="text" name="user" value=”Your name”> <br> Password: <input type="password" name="pw"> </form>

o Hidden

o Check Box

HTML Kết quả

<form … > I have a bike: <input type="checkbox" name="vehicle" value="Bike"><br> I have a car: <input type="checkbox" name="vehicle" value="Car"><br> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"> </form>



o Radio Button

HTML Kết quả

<form … > <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form>

o File Upload

o Submit



HTML

<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>

o Image Submit Button

o Reset



o Text Area

HTML Kết quả

<form action="…" method=post> Your comments:<br> <textarea name="comments" cols=30 rows=4></textarea> <input type=submit value="submit"> </form>

o Select



o Drop Down List

o List Box

o Option

Notice the </option> end tags. They are not usually included in standard HTML documents but must appear in XHTML.

HTML Kết quả



<form action="…" method=post> I enjoy: <select name=”hobby”> <option value=”hobby1”>Programming</option> <option value=”hobby2”>Swimming</option> <option value=”hobby3”>Reading</option> <option value=”hobby4”>Eating</option> <option value=”hobby5”>Sleeping</option> </select> <input type=submit value="Submit"> </form>

Bây giờ, bạn hãy thử tạo một form đơn giản sau (Ví dụ 2.2.5-11):

Ví dụ 2.2.5-11 <html> <head> <title>Example</title> </head> <body > <form action="xuly.asp" method=”post”> <h1>ĐĂNG KÝ TÀI KHOẢN</h1> <h2>Thông tin cá nhân</h2> Họ và tên: <input type="text" name="hoten" size="40"><br>



Giới tính: <select name=”gioitinh”> <option value=”nam”>Nam</option> <option value=”nu”>Nữ</option> </select> <br> Địa chỉ: <input type="text" name="diachi" size="100"><br> Bạn muốn liên lạc bằng: <input type="radio" name="lienlac" value="email"> Email <input type="radio" name="lienlac" value="phone"> Phone<br> Sở trường: <input type="checkbox" name="sotruong" value="dabong">Đá bóng <input type="checkbox" name="sotruong" value="vannghe">Văn nghệ <input type="checkbox" name="sotruong" value="giaotiep">Giao tiếp <input type="checkbox" name="sotruong" value="hoctap">Học tập<br> <h2>Tài khoản</h2> Tên đăng nhập: <input type="text" name="tendangnhap"><br> Mật khẩu: <input type="password" name="matkhau"><br> <input type=”submit” value="Submit"> </form> </body> </html>





2.4.6 Bảng Một bảng bao gồm nhiều dòng và nhiều cột, tạo thành ma trận các ô.

Để tạo ra một bảng, chúng ta sử dụng cặp thẻ <table></table>

Mỗi cặp thẻ <tr></tr> tạo ra một dòng trong bảng, và trong dòng ấy chúng ta có thể sử dụng nhiều cặp thẻ <td></td> để tạo ra các ô, tương ứng với các cột.



<table>

<tr> <td> Ô 11 </td> <td> Ô 12 </td> <td> Ô 13 </td> </tr>



</table>

Để đóng khung cho bảng, sử dụng thuộc tính border.

HTML Kết quả

Ví dụ 2.2.7-1 <html> <head> <title>Table</title> </head> <body> <table border="1"> <tr> <td>Ô 11</td> <td>Ô 12 </td> </tr> <tr> <td>Ô 21</td> <td>Ô 22 </td> </tr> </table> </body> </html>

Chiều rộng mặc định của bảng sẽ là chiều rộng lớn nhất của dòng rộng nhất trong bảng. Ðể chỉ định chiều rộng các bảng, sử dụng thuộc tính WIDTH để quy định chiều rộng.

Ví dụ: <TABLE BORDER=1 WIDTH=100%> hay <TABLE BORDER=1 WIDTH=400px>

Ðể thêm tiêu đề cho bảng, sử dụng thẻ <CAPTION></CAPTION>. Mặc định tiêu đề của bảng nằm ở trên và canh lề giữa. Tuy nhiên có thể thay đổi bằng cách dùng thuộc tính ALIGN bên trong CAPTION.

Ðể thêm vào các ô trải dài trên nhiều cột, dòng khác, dùng thuộc tính COLSPAN=n và ROWSPAN=n.

HTML Kết quả



Ví dụ 2.2.7-2 <html> <head> <title>Table</title> </head> <body> <table border="1" width="100%"> <caption align="right"> Bảng điểm</caption> <tr> <td rowspan="3">Học kỳ I</td> <td colspan="2">Kết quả thi</td> </tr> <tr> <td>Văn</td> <td>Toán</td> </tr> <tr> <td>10</td> <td>9</td> </tr> </table> </body> </html>

Một số thuộc tính của thẻ <table>, thẻ <tr> và thẻ <td>:

<TABLE ALIGN=align-type BACKGROUND=url BGCOLOR=color-type BORDER=n CELLPADDING=n CELLSPACING=n WIDTH=n%>

Trong đó:

ALIGN=align-type: lề của bảng, có giá trị là LEFT, RIGHT hoặc CENTER

BACKGROUND=url: chỉ định ảnh nền của bảng

BGCOLOR=color-type: màu nền của bảng

BORDER=n: đường viền bảng, n tính bằng pixel

CELLPADDING=n: khoảng cách từ ô tới nội dung của ô, đơn vị pixel

WIDTH=n: độ rộng của bảng, n tính theo % hoặc pixel

<TR ALIGN=align-type BACKGROUND=url BGCOLOR=color-type VALIGN=v-align-type>

Trong đó:

ALIGN=align-type: lề của các ô trong dòng, có giá trị là LEFT, RIGHT hoặc CENTER

BACKGROUND=url: chỉ định ảnh nền của dòng

BGCOLOR=color-type: màu nền của dòng

VALIGN=v-align-type: lề theo chiều dọc cho văn bản trong các ô trên dòng. Giá trị có thể là: TOP, BOTTOM, MIDDLE.

<TD ALIGN=align-type BACKGROUND=url BGCOLOR=color-type

Trong đó:

ALIGN=align-type: lề văn bản trong ô, có giá trị là LEFT, RIGHT hoặc CENTER

BACKGROUND=url: chỉ định ảnh nền cho ô



COLSPAN=n ROWSPAN=n VALIGN=v-align-type>

BGCOLOR=color-type: màu nền của ô

COLSPAN=n: ô trải rộng trên n cột

ROWSPAN=n: ô trải dài trên n hàng

VALIGN=v-align-type: lề theo chiều dọc cho văn bản trong các ô. Giá trị có thể là: TOP, BOTTOM, MIDDLE.

Quay trở lại với ví dụ 2.2.5-11, bạn hãy sử dụng cấu trúc bảng để có thể hiển thị dữ liệu

của trang được rõ ràng và đẹp hơn.

<html> <head> <title>Example</title> </head> <body > <form action="…" method=post> <table width="100%" border="0"> <tr> <td colspan="2"><h1>ĐĂNG KÝ TÀI KHOẢN</h1></td> </tr>



<tr> <td colspan="2"><h2>Thông tin cá nhân</h2></td> </tr> <tr> <td>Họ và tên:</td> <td><input type="text" name="hoten" size="40"></td> </tr> <tr> <td>Giới tính: </td> <td><select name=”gioitinh"> <option value=”nam”>Nam</option> <option value=”nu”>Nữ</option> </select> </td> </tr> <tr> <td>Địa chỉ:</td> <td><input type="text" name="diachi" size="70"></td> </tr> <tr> <td>Bạn muốn liên lạc bằng: </td> <td><input type="radio" name="lienlac" value="email"> Email <input type="radio" name="lienlac" value="phone"> Phone </td> </tr> <tr> <td>Sở trường:</td> <td><input type="checkbox" name="sotruong" value="dabong">Đá bóng <input type="checkbox" name="sotruong" value="vannghe">Văn nghệ <input type="checkbox" name="sotruong" value="giaotiep">Giao tiếp <input type="checkbox" name="sotruong" value="hoctap">Học tập </td> </tr> <tr> <td colspan="2"><h2>Tài khoản</h2></td> </tr> <tr> <td>Tên đăng nhập:</td> <td><input type="text" name="tendangnhap"></td> </tr> <tr> <td>Mật khẩu:</td> <td><input type="password" name="matkhau"></td> </tr> <tr> <td></td> <td align="right"><input type=submit value="Submit"></td> </tr> </table> </form> </body> </html>



Hãy trang điểm cho trang web của bạn sống động hơn…

2.4.7 Danh sách HTML cung cấp một tập hợp phong phú các thẻ để hiển thị danh sách theo từng mục

đích, như danh sách thứ tự, danh sách không thứ tự, danh sách định nghĩa… o Danh sách không thứ tự (Unordered List): <ul>

Thẻ <ul>…</ul> báo cho trình duyệt biết rằng, nội dung chứa trong nó là là một danh sách không đánh số thứ tự. Mỗi mục trong danh sách liên kết được chứa trong một cặp thẻ <li>mục</li>.

Đặc trưng của danh sách không thứ tự là trình duyệt tự động trình bày mỗi mục trên một dòng mới, đồng thời thêm vào đầu mỗi mục một bullet để đánh dấu.

Có thể dung đặc tính type để chọn kiểu bullet. Có 3 kiểu: disc (hình đĩa), circle (hình tròn), square (hình vuông) Ví dụ 2.2.6-1 <html> <head> <title>Danh sach</title> </head> <body> <ul type="square"> <li>Ðây là mục 1 trong danh sách.</li>



<li>Ðây là mục 2 trong danh sách.</li> <li type="circle">Ðây là mục 3 trong danh sách.</li> <li type="disc">Ðây là mục 4 trong danh sách. </li> </ul> </body> </html>

o Danh sách thứ tự (Ordered List): <ol>

Danh sách thứ tự bắt đầu bằng thẻ <ol> với cấu trúc: <OL START=n TYPE=order-type>

Mỗi mục trong danh sách thứ tự được chứa trong cặp thẻ <li> và </li>.

Các thuộc tính của thẻ <ol>:

START=n: chỉ định chỉ số bắt đầu

TYPE=order-type: chỉ định kiểu chỉ số. Có thể là một trong các giá trị sau: o A: sử dụng ký tự lớn A, B, C,... o a: sử dụng ký tự nhỏ a, b, c,... o I: sử dụng số La Mã lớn I, II, III,... o i: sử dụng số La Mã nhỏ i, ii, iii,... o 1: sử dụng số 1, 2, 3,...

HTML Kết quả

Ví dụ 2.2.6-1 <html> <head> <title>Danh sach</title> </head> <body> <OL TYPE=I> <LI>Mục I <LI>Mục II <LI>Mục III </OL> </body> </html>

Kiểu chỉ số của mỗi mục trong danh sách thứ tự có thể thay đổi thông qua thuộc tính type.

Chỉ định chỉ số cho một mục bất kỳ thong qua thuộc tính value. HTML Kết quả



Ví dụ 2.2.6-3 <html> <head> <title>Danh sach</title> </head> <body> <ol> <li>Item number 1</li> <li>And the second</li> <li value=9> Jump to number 9</li> <li>And continue with 10...</li> </ol> </body> </html>

o Danh sách các định nghĩa (Definition List): <dl>

Danh sách các định nghĩa được sử dụng với cặp thẻ <dl> và </dl>.

Dùng <DT> để chỉ định mẫu cần định nghĩa, và <DD> để chỉ định định nghĩa cho mẫu xác định bởi <DT>.

HTML Kết quả

Ví dụ 2.2.6-4 <html> <head> <title>Danh sach</title> </head> <body> <DL> <DT>Bàn phím <DD>Một thiết bị vào thường xuyên nhất cho mọi máy tính. Bàn phím bao gồm toàn bộ các phím chữ cái, số, dấu, ký hiệu và các phím điều khiển. <DT>Chuột <DD>Một thiết bị đầu vào có một hoặc nhiều nút ấn điều khiển, được chứa trong một vỏ hộp có kích thước cỡ lòng bàn tay, và được thiết kế sao cho bạn có thể di chuyển nó trên mặt bàn, cạnh bàn phím. </DL> </body> </html>

2.4.8 Các ký tự đặc biệt Ngôn ngữ chứa nhiều ký tự đặc biệt (các ký tự có dấu) mà bạn đôi khi vẫn dùng, đặc

biệt khi muốn trình bày tài liệu trong ngôn ngữ không phải tiếng Anh. Bạn có thể đưa vào các ký tự đặc biệt trong mã lệnh HTML bằng những thẻ đặc biệt gọi là thực thể (entity) hoặc tham chiếu thực thể (entity reference).

Không như những thẻ đã tìm hiểu, thực thể ký tự đặc biệt không nằm gọn trong dấu <>. Thay vào đó, nó luôn bắt đầu bằng dấu & và kết thúc bằng dấu chấm phẩy (;). Hầu hết các thực thể đều khá dễ nhớ, như trong bảng sau:

Ký tự Mã lệnh HTML Ý nghĩa

& & Ký hiệu &



< < Dấu nhỏ hơn

> > Dấu lớn hơn

© © Biểu tượng bản quyền

Ký tự trắng (space)

Nếu bạn muốn thêm một số ký tự trắng (phím space) vào giữa các từ, hãy sử dụng mã của ký tự trắng là

2.4.9 Âm thanh, video, flash và applet Thẻ hình ảnh, phim <IMG>:

Trong phần trước, chúng ta đã đề cập đến cách trình bày chữ trong trang web. Ðể làm cho trang web sinh động hơn, hấp dẫn hơn, bạn có thể đưa thêm tranh ảnh vào. Có những trang web liên quan đến số liệu, đồ thị và đồ thị cũng là một dạng ảnh (images). Sau đây là cách đưa một bức ảnh vào trong trang web.

Sử dụng thẻ <img> để thêm hình ảnh hoặc phim vào trang web <IMG ALIGN=align-type ALT=text SRC=url BORDER=n HEIGTH=n WIDTH=n HSPACE=n VSPACE=n>

Trong đó:

- ALIGN=align-type: lề cho ảnh hay cho văn bản bao quanh ảnh. Giá trị có thể là TOP, MIDDLE, BOTTOM, LEFT, RIGHT.

- ALT=text: văn bản hiển thị hay thay thế cho hình ảnh khi chức năng "Show Picture" trong trình duyệt bị tắt.

- SRC=url: chỉ định đường dẫn tới ảnh

- BORDER=n: đường viền ảnh. Nếu ảnh được dùng cho hyperlink thì đường viền có màu trùng với màu hyperlink. Nếu ảnh không dùng cho hyperlink thì đường viền không hiển thị.

- HEIGTH=n, WIDTH=n: chỉ độ cao và độ rộng của ảnh. Ðơn vị bằng pixel.

- HSPACE=n, VSPACE=n: chỉ định khoảng cách từ ảnh đến văn bản quanh nó theo chiều ngang và dọc.

Ví dụ: <IMG SRC="images/pic1.gif" ALT="[các nội dung]" ALIGN=MIDDLE HSACE=5 VSPACE=5>Nội dung</A>

Chỉ riêng <img src="myphoto.jpg"> đã đủ để đưa một bức ảnh vào trang web. Những thuộc tính khác chỉ nhằm mục đích định dạng trình bày cách hiển thị của bức ảnh.

Một số lưu ý khi sử dụng ảnh trên trang web: o Ảnh cho vào trang web nên save dưới dạng .GIF, .JPG hoặc PNG o Không nên to quá, đây không nói đến kích thước (cm) mà nói đến kính cỡ file

(số KB). o Khi upload trang web, nhớ upload cả ảnh. o Tên của các file nên sử dụng chữ thường, không nên sử dụng chữ hoa. Ví dụ:

myphoto.jpg chứ không Myphoto.jpg.

Applets: (Trang 359 - JS)

Ðể xem được applet, máy của người xem phải có Java Virtual Machine cài đặt sẵn.



Sau đây là đoạn code để đưa applet sóng vào trang web. Tôi sử dụng folder riêng cho Images (images/) và Applets (applets/) nên đường dẫn tới chúng phải có thêm: codebase = "applets/" và "images/"

<applet codebase="applets/" code="Lake.class" align="right" width="288" height="270" id="Lake"> <param name="image" value="images/paris.jpg"> <param name="href" value="http://www.cit.udn.vn"> </applet>

Flash:

2.4.10 Frame Sử dụng tag <FRAMESET> và </FRAMESET> để chia cửa sổ trình duyệt thành nhiều

cửa sổ con frame. Tag <FRAMESET> được dùng kèm với tag <FRAME> để định nghĩa 1 frame.

Figure 11-1 (shown in Section 11.3.1.2) is a simple example of a frame display. It shows how the document window may be divided into columns and rows of individual frames separated by rules and scrollbars. Although it is not immediately apparent in the example, each frame in the window contains an independent document. Frames may contain any valid content the browser is capable of displaying, including XHTML documents and multimedia. If the frame's contents include a hyperlink that the user selects, the new document's contents — even another frame document — may replace that same frame, another frame's content, or the entire browser window.

Frames are enabled with a special frame document. Its contents do not get displayed. Rather, the frame document contains extension tags that tell the browser how to divide its main display window into discrete frames and what documents go inside the frames.

The individual documents referenced and displayed in the frame document window act independently, to a degree; the frame document controls the entire window. You can, however, direct one frame's document to load new content into another frame. That's done by attaching a name to a frame and targeting the named frame with a special attribute for the hyperlink <a> tag.

You need to know only three tags to create a frame document: <frameset>, <frame>, and <noframes>. <temp>

o Frameset - Cols

Frames là sáng kiến của [Netscape] bắt đầu từ Navigator version 2.0. [Microsoft] Internet Explorer (version 3.0 trở lên) cũng đọc được Frames. Dùng Frames, bạn có thể chia một window ra làm nhiều phần riêng biệt, không phụ thuộc vào nhau và có thể chứa những nội dung khác nhau. Từ Frame này có thể thay đổi nội dung của Frame kia. Như vậy website của bạn sẽ được bố cục rõ ràng hơn, tiện lợi hơn và người xem có thể tìm được cái mình tìm nhanh chóng hơn. Ai hay sử dụng Windows Explorer sẽ thấy được tác dụng tương tự của Frames.

Khi chia window, bạn sẽ có ít nhất 2 Frames. Những Frames này được gọi là một Frame-Set. Một trang sử dụng Frames có cấu trúc cơ bản như sau:

<html> <frameset> </frameset> </html>

Ðể chia một window ra làm hai phần theo chiều dọc, phần bên trái chiếm 30%, phần bên phải 70% chiều rộng của window ta làm như sau:

<html> <frameset cols="30%,70%">

http://www.netscape.com/

http://www.microsoft.com/



<frame name ="ben trai" src="trai.htm"> <frame name ="ben phai" src="phai.htm"> </frameset> </html>

o Frameset – Rows Tương tự như vậy ta chia theo chiều ngang, nhưng lần này chia làm 3 phần (30%, 50% và * là

phần còn lại của màn hình): <html> <frameset rows="30%,50%,*"> <frame name ="tren" src="tren.htm"> <frame name ="duoi" src="duoi.htm"> <frame name ="con_lai" src="conlai.htm"> </frameset> </html>

o Frameset - Giải thích

- cols (columns) chia window theo chiều dọc. Các giá trị 30% , 70% có thể được thay bằng số pixels như 150 , 500

- rows cho phép chia theo chiều ngang. 30%, 50% là chiều cao của hai Frames đầu. Dấu * cho biết chiều cao của Frame thứ 3 là phần còn lại của window.

<frame name ="ben trai" src="trai.htm"> tên và nội dung của frame bên trái. Bạn cứ tưởng tượng, bạn tạo được một khung ảnh có hai ngăn (tương tự như một frameset), mỗi ngăn chứa một bức ảnh (đây là một trang web). Frame bên trái tên là "trai" và chứa trang "trai.htm". Tương tự như vậy với "ben phai", "phai.htm", "tren", "tren.htm", "duoi", "duoi.htm", "con_lai", "conlai.htm"

o .Frames - Navigation Menu

Như vậy ta đã có được những bức ảnh trong khung. Nhưng mục đích chính của Frames không phải là làm thế nào để có nhiều trang trong một window mà là làm thế nào để dùng link của Frame này thay đổi nội dung của Frame kia. Bây giờ ta hãy thử dùng trang "trai.htm" làm navigation để thay đổi nội dung Frame "phai". Khi đó ta phải dùng thêm một dòng code nữa trong trang "trai.htm".

<base target="ben phai">

Bạn hãy click "xem vi du" sau đó dùng chuột phải click vào trang "trai.htm" trong frame "trai" để xem html-code.

o Frameset in Frameset

Và một ví dụ nữa sẽ cho thấy khả năng của Frames. Trong ví dụ này, đầu tiên ta chia window ra làm 2 phần sau đó lại chia phần thứ 2 ra làm đôi. Code của nó như sau:

<html> <frameset rows="20%,70%"> <frame src="tren.htm" name="ben tren"> <noframe> <frameset cols="20%,80%"> <frame src="trai.htm" name="ben trai"> <frame src="phai.htm" name="ben phai"> </frameset> <body> This page uses frames but your browser doesn't support them. Please download a higher version and visit me again. Thanks anyway! </body> </html>



Bạn thấy đấy, ta đã chia window ra làm 4 Frames nhưng chỉ thấy có 3. Ðó là tác dụng của tag <noframe> Hiện nay số lượng browser không biết Frames hầu như không còn nữa, nhưng để chắc chắn, ta hãy viết thêm một phần <body> và chú thích rằng browser của người đọc không biết frames, nếu không người đó sẽ chẳng đọc được một chữ gì khi đến thăm homepage của bạn.

Ngoài ra còn một số đặc tính khác của Frames như:

• scrolling="no" (nếu bạn viết như vậy trong tag <frameset>, người đọc sẽ không thể scroll để đọc tiếp nếu như trang html có cỡ to hơn Frame chứa nó).

• frameborder="0" (frame không có khung) • framespacing="0" (tương tự như trong table) • noresize (không cho phép người đọc thay đổi kích cỡ của window)

</temp> 2.4.11 Một số thẻ meta thông dụng Một cách tùy chọn, bạn có thể xác định một số từ khóa cho hồ sơ để giúp các máy tìm

kiếm trên Internet có thể tìm ra website của mình. Các từ khóa và một mô tả ngắn gọn của trang web có thể được xác định bằng cách dùng thẻ <meta>. Ví dụ, bạn có thể mô tả cho website của Trường Cao đẳng Công nghệ thông tin như sau:

<meta name=”description” content=”Trường Cao đẳng Công nghệ thông tin – Đại học Đà Nẵng”> <meta name=”keywords” content=”Trường Cao đẳng Công nghệ thông tin, College of Information Technology, 48B Cao Thắng, Đại học Đà Nẵng, University of Danang”>

Khi được sử dụng để xác địn phần mô tả trang và từ khóa, thẻ <meta> chấp nhận hai thuộc tính: name và content. Trong mã lệnh trên, thẻ <meta> đầu tiên thiết lập phần mô tả cho trang web – thường đây là một hoặc hai câu được hiển thị bởi các máy tìm kiếm trên Internet để cung cấp cho người dùng một mô tả chính xác về những gì họ mong đợi từ trang web này.

Thẻ <meta> thứ hai trong ví dụ trên định nghĩa một số từ khóa – các từ hoặc cụm từ được phân cách bằng dấu phẩy để giúp cho các máy tìm kiếm trong việc tạo chỉ mục cho trang web. Một số máy tìm kiếm Internet xếp hạng các trang web với các thẻ <meta> này cao hơn so với các trang web cùng loại nhưng không có thẻ <meta>.

2.4.12 Thẻ DOCTYPE Chúng ta sử dụng khai báo DOCTYPE để miêu tả ngôn ngữ, phiên bản và kiểu ngôn

ngữ. Việc sử dụng thẻ DOCTYPE được yêu cầu để có hồ sơ hợp chuẩn. Thẻ DOCTYPE được đặt trong phần đầu của hồ sơ, phía trên thẻ mở <html>

Chúng ta sẽ cùng xem xét đoạn mã lệnh sau với việc khai báo thẻ DOCTYPE cho DTD transitional (DTD – Document Type Definition – Một DTD là danh sách gồm các phần tử, thuộc tính, ký tự, màu sắc và những yêu cầu có liên quan của một ngôn ngữ hoặc nhiều ngôn ngữ) của HTML 4.01:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html14/loose.dtd>

Đây không phải là HTML, mà là cấu trúc SGML.

Chúng ta có thể biên dịch khai báo DOCTYPE này như sau:

Kiểu hồ sơ đang đề cập là một hồ sơ HTML. Nó là PUBLIC, có nghĩa là DTD mà nó đề cập là luôn có hiệu lực cho mọi người sử dụng. Hồ sơ HTML này được tạo và cài đặt tại W3C, đang đề cập đến DTD transitional của HTML 4.01, bằng tiếng Anh cũng như được định vị tại đường dẫn URL thường có trên dòng thứ hai của câu khai báo.



2.5 Những lưu ý 2.5.1 Tạo chuẩn đánh dấu thẻ và tuân thủ nó Một vấn đề quan trọng trong việc quản lý phương diện mã lệnh của việc thiết kế Web là

các biến thể xuất hiện trong cách thức định dạng việc đánh dấu. Điều này không có nghĩa là nó sẽ hiển thị như thế nào, mà có gnhiax là bản thân mã lệnh được định dang như thế nào phía sau màn hình. Những người tạo ra hồ sơ của họ một cách thủ công thường phát triển các cách thức như thụt lề bảng và danh sách, viết các phần tử theo dạng chữ in hoa, thuộc tính theo dạng chữ thường và không đặt thuộc tính trong dấu nháy. Do có nhiều sự không nhất quán trong phấn mềm xuất bản Web, nên những gì bạn có sẽ là những phần tử hỗn độn.

Những “chiến thuật” định dạng HTML:

Thụt lề cho ô bảng:

Đối với các bảng có tổ chức, việc thụt lề rất hữu ích khi làm việc với những phần tử lông nhau của bảng. Điều này cung cấp khoảng trống và cho phép một người làm việc đánh dấu nhanh chóng tìm thấy dữ liệu hoặc vấn đề cụ thể trong chính mã lệnh.

<table> <tr> <td>nội dung</td> </tr>

</table>

Thụt lề các mục của danh sách và các danh sách lồng nhau

Cũng giống với các ô bảng lồng nhau, việc thụt lề cho cá danh sách lồng nhau có thể rất hữu dụng trong việc sửa chữa và tìm kiếm nội dung cần chỉnh sửa một cách hiệu quả hơn.

<ul> <li>Ý 1</li> <li>Ý 2</li>

<ul>

Quản lý dạng chữ

HTML không phân biệt dạng chữ. Trước khi có XHTML, dạng chữ trong HTML không liên quan với nhau, nên bạn thường có một phần hỗn độn gòm nhiều dạng chữ, thâm chí trong cùng một hồ sơ. XHTML phần biệt dạng chữ và chúng ta nên sử dụng dạng chữ



thường tại thời điểm này, ngay cả khi sử dụng HTML. Nếu cần nâng cấp thành XHTML trong tương lai, quá trình sẽ dễ dàng và ít tốn thời gian hơn.

Quản lý các dấu nháy

Những vấn đề liên quan đến dấu nhày và giá trị thuộc tính trong HTML tương tự với những vấn đề của dạng chữ. HTML ít hạn chế hơn so với XHTML về các quy tắc dấu nháy. Trong khi không bao giờ bị sai trong HTML khi đặt dấu nháy quanh giá trị thuộc tính, nhưng bạn có thể gây lỗi khi không đặt dấu nháy. Vì thế, hãy đặt dấu nháy cho mọi thuộc tính, thậm chí trong HTML, nơi mà các quy tắc về dấu nháy khá tùy ý.

Trong HTML bạn có thể viết như sau: <body bgcolor=black text=”white”>

Nó vẫn hoạt động. Nhưng bạn có thể có một dấu nháy mở nhưng quyên dấu nháy đóng và khi đó sẽ xuất hiện lỗi. Lỗi này có thể làm bạn mất hàng giờ để sửa chữa. Bằng cách đặt dấu nháy với mọi giá trị thuộc tính, bạn có thể giảm thiểu hoặc thậm chí có thể loại bỏ vấn đề này.

Sử dụng ghi chú

Việc ghi chú thích hợp các vụng cụ thể trong hồ sơ có nghĩa là bạn hoặc đồng nghiệp có thể tìm thấy vùng đó nhanh chóng hơn. Bạn cũng có thể cung cấp thông tin về nội dung, chỉ dẫn cho tác giả khác hoặc chuyên gia về nội dung và giấu thông tin mà đôi khi cần đến sau này.

Chú ý quan trọng ở đây là chỉ sử dụng khi cần thiết. Lam dụng việc ghi chú cho một site có thể gây ra rắc rối giống như việc không có ghi chú.

2.6 Giới thiệu về XHTML Một trong những thay đối lớn nhất gần đây trong thế giới HTML là sự xuất hiện của

XML (eXstensible Markup Language – Ngôn ngữ đánh dấu có khả năng mở rộng). Vì nó cho phép người thiết kế site xác định những gì họ muốn, chức không phải cách trình bày chúng. XML có dạng hơi giống HTML, nhưng thật ra hoàn toàn khác.

Một cách mà XML ảnh hưởng đến HTML là thông qua sự phát triển của XHTML, biến thể của HTML được gây cảm hứng bằng cấu trúc chính thức của XML. XHTML là phiên bản chính thức hóa của HTML. XHTML khẳng định:

o Toàn bộ các thẻ đều là dạng cặp hoặc có phần kết thúc /> o Toàn bộ thuộc tính đặt trong dấu nháy. o Toàn bộ thuộc tính phải được tình bày dưới dạng những cặp tên=giá trị o Toàn bộ thẻ và thuộc tính chỉ ở dạng chữ thường.



CHƯƠNG 3: CASCADING STYLE SHEETS (CSS)

Một đặc tính rất quan trọng của đặc tả kỹ thuật về kiểu, cả trong những ứng dụng như

Microsoft Word và trong hồ sơ Web, là thuộc tính được kế thừa. Giả sử đoạn văn trong hồ sơ thể hiện với phông chữ Times Roman 14 pt. Tiếp đến, bạn áp dụng kiểu cho một từ trong đoạn văn để nó thể hiện với màu xanh. Ngoài việc được bổ sung màu xanh, chữ đó cũng kế thừa dạng và kích thước chữ cùng các thuộc tính khác từ kiểu cha đã dùng cho phần còn lại của đoạn văn. Theo cách nói trong giới Web, điều này được gọi là cascading (các thuộc tính kiểu “rót” xuống cho đến khi có điều gì đó thay đổi chúng). Do đó, các bảng kiểu theo logic là các bảng kiểu cascading, ngắn gọn là CSS.

3.1 Các loại CSS CSS thực sự là tiếp cận hoàn toàn khác trong việc tạo kiểu và bố cục trang. Trước hết,

chúng ta nên xem xét bổ sung thông tin CSS vào trang ở đâu. Thông tin CSS được xác định tại ba địa điểm khác nhau:

o Bên trong thẻ cụ thể ở phần thân hồ sơ. o Ở phía trên hồ sơ, bên trong khối <style>, hoặc kết hợp với các thẻ chứa <div>

hoặc <span> trong phần thân hồ sơ. o Trong một hay nhiều tập tin riêng được dùng chùng trên nhiều trang web.

3.2 CSS trong dòng Về cơ bản, kiểu có thể được xác định với thuộc tính style bên trong hầu hết thẻ đánh

dấu HTML. Ví dụ, bạn có thẻ in đậm và muốn thay đổi màu văn bản bên trong nó bằng mã lệnh HTML sau:

<b style=”color: blue”>Văn bản này in đậm và có màu xanh</b> còn đoạn này thì không.

Thông thường, kiểu được dùng bên trong một hoặc hai thẻ rỗng khác có tên <div> hoặc <span>. Hai thẻ này được đưa vào HTML để chuyên dùng với CSS. Chúng có dạng như sau:

<span style=”color: green”>Đây là màu xanh lá cây</span> còn đây thì không phải.

Sự khác biệt giữa hai thẻ <div> và <span> là thẻ <div> được dùng như thẻ chứa dạng khối (cơ bản giống như thẻ <p> và </p>), trong khi <span> được dùng bên trong khối (tương tự thẻ <b> và </b>).



CHƯƠNG 4: KỊCH BẢN TRÌNH KHÁCH

Với HTML bạn đã biết cách tạo ra trang Web - tuy nhiên chỉ mới ở mức biểu diễn thông tin chứ chưa phải là các trang Web động có khả năng đáp ứng các sự kiện từ phía người dùng. Hãng Netscape đã đưa ra ngôn ngữ script có tên là LiveScript để thực hiện chức năng này. Sau đó ngôn ngữ này được đổi tên thành JavaScript để tận dụng tính đại chúng của ngôn ngữ lập trình Java. Mặc dù có những điểm tương đồng giữa Java và JavaScript, nhưng chúng vẫn là hai ngôn ngữ riêng biệt.

JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML. Nó không được biên dịch mà được trình duyệt diễn dịch. Không giống Java phải chuyển thành các mã dễ biên dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn. Chính vì vậy bạn có thể dễ dàng học JavaScript qua ví dụ bởi vì bạn có thể thấy cách sử dụng JavaScript trên các trang Web.

JavaScript là ngôn ngữ dựa trên đối tượng, có nghĩa là bao gồm nhiều kiểu đối tượng, ví dụ đối tượng Math với tất cả các chức năng toán học. Tuy vậy JavaScript không là ngôn ngữ hướng đối tượng như C++ hay Java do không hỗ trợ các lớp hay tính thừa kế.

JavaScript có thể đáp ứng các sự kiện như tải hay loại bỏ các form. Khả năng này cho phép JavaScript trở thành một ngôn ngữ script động.

Giống với HTML và Java, JavaScript được thiết kế độc lập với hệ điều hành. Nó có thể chạy trên bất kỳ hệ điều hành nào có trình duyệt hỗ trợ JavaScript. Ngoài ra JavaScript giống Java ở khía cạnh an ninh: JavaScript không thể đọc và viết vào file của người dùng.

Các trình duyệt web như Nescape Navigator 2.0 trở đi có thể hiển thị những câu lệnh JavaScript được nhúng vào trang HTML. Khi trình duyệt yêu cầu một trang, server sẽ gửi đầy đủ nội dung của trang đó, bao gồm cả HTML và các câu lệnh JavaScript qua mạng tới client. Client sẽ đọc trang đó từ đầu đến cuối, hiển thị các kết quả của HTML và xử lý các câu lệnh JavaScript khi nào chúng xuất hiện.

Các câu lệnh JavaScript được nhúng trong một trang HTML có thể trả lời cho các sự kiện của người sử dụng như kích chuột, nhập vào một form và điều hướng trang. Ví dụ bạn có thể kiểm tra các giá trị thông tin mà người sử dụng đưa vào mà không cần đến bất cứ một quá trình truyền trên mạng nào. Trang HTML với JavaScript được nhúng sẽ kiểm tra các giá trị được đưa vào và sẽ thông báo với người sử dụng khi giá trị đưa vào là không hợp lệ.

Mục đích của phần này là giới thiệu về ngôn ngữ lập trình JavaScript để bạn có thể viết các script vào file HTML của mình.

4.1 Nhúng javascript vào file html Bạn có thể nhúng JavaScript vào một file HTML theo một trong các cách sau đây:

o Sử dụng các câu lệnh và các hàm trong cặp thẻ <SCRIPT> o Sử dụng các file nguồn JavaScript o Sử dụng một biểu thức JavaScript làm giá trị của một thuộc tính HTML o Sử dụng thẻ sự kiện (event handlers) trong một thẻ HTML nào đó

Trong đó, sử dụng cặp thẻ <SCRIPT>...</SCRIPT> và nhúng một file nguồn JavaScript là được sử dụng nhiều hơn cả.

4.1.1 Sử dụng thẻ SCRIPT Script được đưa vào file HTML bằng cách sử dụng cặp thẻ <SCRIPT> và </SCRIPT>.

Các thẻ <SCRIPT> có thể xuất hiện trong phần <HEAD> hay <BODY> của file HTML. Nếu đặt trong phần <HEAD>, nó sẽ được tải và sẵn sàng trước khi phần còn lại của văn bản được tải.



Thuộc tính duy nhất được định nghĩa hiện thời cho thẻ <SCRIPT> là “LANGUAGE=“ dùng để xác định ngôn ngữ script được sử dụng. Có hai giá trị được định nghĩa là "JavaScript" và "VBScript". Với chương trình viết bằng JavaScript bạn sử dụng cú pháp sau :

<script language=”javascript”> // insert all javascript here </script>

Điểm khác nhau giữa cú pháp viết các ghi chú giữa HTML và JavaScript là cho phép

bạn ẩn các mã JavaScript trong các ghi chú của file HTML, để các trình duyệt cũ không hỗ trợ cho JavaScript có thể đọc được nó như trong ví dụ sau đây:

<SCRIPT LANGUAGE=”JavaScript”>  </SCRIPT>

Dòng cuối cùng của script cần có dấu // để trình duyệt không diễn dịch dòng này dưới

dạng mã JavaScript. Các ví dụ trong chương này không chứa đặc điểm ẩn của JavaScript để mã có thể dễ hiểu hơn.

4.1.2 Sử dụng một file nguồn JavaScript Thuộc tính SRC của thẻ <SCRIPT> cho phép bạn chỉ rõ file nguồn JavaScript được sử

dụng (dùng phương pháp này hay hơn nhúng trực tiếp một đoạn lệnh JavaScript vào trang HTML).

Cú pháp: <script src="file_name.js"> .... </script>

Thuộc tính này rấy hữu dụng cho việc chia sẻ các hàm dùng chung cho nhiều trang khác nhau. Các câu lệnh JavaScript nằm trong cặp thẻ <SCRIPT> và </SCRIPT> có chứa thuộc tinh SRC trừ khi nó có lỗi. Ví dụ bạn muốn đưa dòng lệnh sau vào giữa cặp thẻ <SCRIPT SRC="..."> và </SCRIPT>:

document.write("Không tìm thấy file JS đưa vào!");

Thuộc tính SRC có thể được định rõ bằng địa chỉ URL, các liên kết hoặc các đường dẫn tuyệt đối, ví dụ:

<SCRIPT SRC="http://www.cit.udn.vn/js/script.js">

Các file JavaScript bên ngoài không được chứa bất kỳ thẻ HTML nào. Chúng chỉ được chứa các câu lệnh JavaScript và định nghĩa hàm.

4.1.3 Thẻ <NOSCRIPT> và </NOSCRIPT> Cặp thẻ này dùng để định rõ nội dung thông báo cho người sử dụng biết trình duyệt

không hỗ trợ JavaScript. Khi đó trình duyệt sẽ không hiểu thẻ <NOSCRIPT> và nó bị lờ đi, còn đoạn mã nằm trong cặp thẻ này sẽ được Navigator hiển thị. Ngược lại, nếu trình duyệt có hỗ trợ JavaScript thì đoạn mã trong cặp thẻ <NOSCRIPT> sẽ được bỏ qua. Tuy nhiên, điều này cũng có thể xảy ra nếu người sử dụng không sử dụng JavaScript trong trình duyệt của mình bằng cách tắt nó đi trong hộp Preferences/Advanced.



Ví dụ: <NOSCRIPT> <B> Trang này có sử dụng JavaScript. Do đó bạn cần sử dụng trình duyệt Netscape Navigator từ version 2.0 trở đi! <BR> <A HREF="http://home.netscape.com/comprd/mirror/index.html"> Hãy kích chuột vào đây để tải về phiên bản Netscape mới hơn </A> </BR> Nếu bạn đã sử dụng trình duyệt Netscape từ 2.0 trở đi mà vẫn đọc được dòng chữ này thì hãy bật Preferences/Advanced/JavaScript lên </NOSCRIPT>

4.2 Hiển thị một dòng văn bản Trong hầu hết các ngôn ngữ lập trình, một trong những khả năng cơ sở là hiển thị ra

màn hình một dòng text. Trong JavaScript, người lập trình cũng có thể điều khiển việc xuất ra màn hình của người duyệt web một dòng text tuần tự trong file HTML. JavaScript sẽ xác định điểm mà nó sẽ xuất ra trong file HTML và dòng text kết quả sẽ được dịch như các dòng HTML khác và hiển thị trên trang.

Hơn nữa, JavaScript còn cho phép người lập trình sinh ra một hộp thông báo hoặc xác nhận gồm một hoặc hai nút. Ngoài ra, dòng text và các con số còn có thể hiển thị trong trường TEXT và TEXTAREA của một form.

Trong phần này, ta sẽ học phương thức write() của đối tượng document. Đối tượng document trong JavaScript được thiết kế sẵn cách thức để xuất một dòng

text ra màn hình client là write(). Cách gọi một phương thức của một đối tượng như sau: object_name.property_name

Dữ liệu mà phương thức dùng để thực hiện công việc của nó được đưa vào dòng tham số, ví dụ:

document.write("Test");

Cách thức write() xuất ra màn hình xâu Text, và cho phép xuất ra thẻ HTML.

Ví dụ: Ex_Write.html <html> <head> <title>ouputting text</title> </head> <body> this text is plain.<br> <b> <script language="javascript">  </script> </body> </html>



4.3 Ghi chú mã lệnh Có hai cách để bổ sung các ghi chú phía trong một chương trình JavaScript.

Bổ sung một dòng ghi chú bằng cách bắt đầu ghi chú với hai dấu chéo (//) //đây là ghi chú

Có thể đặt ghi chú trên cùng dòng lệnh: var x=0; //biến x dùng để chứa kết quả

Khối ghi chú được đặt giữa /* và */ /*Đây là phần bắt đầu của một ghi chú dạng khối Cả dòng này cũng sẽ được bỏ qua Document.write(“Dòng lệnh này cũng không được thực hiện!”); Vì nó vẫn được xem là ghi chú */

4.4 Giao tiếp với người sử dụng JavaScript hỗ trợ khả năng cho phép người lập trình tạo ra một hộp hội thoại. Nội dung

của hộp hội thoại phụ thuộc vào trang HTML có chứa đoạn script mà không làm ảnh hưởng đến việc xuất nội dung trang.

Cách đơn giản để làm việc đó là sử dụng phương thức alert(). Để sử dụng được phương thức này, bạn phải đưa vào một dòng text như khi sử dụng document.write() trong phần trước. Ví dụ:

alert("Nhấn vào OK để tiếp tục");

Khi đó file sẽ chờ cho đến khi người sử dụng nhấn vào nút OK rồi mới tiếp tục thực hiện

Thông thường, phương thức alert() được sử dụng trong các trường hợp: o Thông tin đưa và form không hợp lệ o Kết quả sau khi tính toán không hợp lệ o Khi dịch vụ chưa sẵn sàng để truy nhập dữ liệu

Tuy nhiên phương thức alert() mới chỉ cho phép thông báo với người sử dụng chứ chưa thực sự giao tiếp với người sử dụng. JavaScript cung cấp một phương thức khác để giao tiếp với người sử dụng là promt(). Tương tự như alert(), prompt() tạo ra một hộp hội thoại với một dòng thông báo do bạn đưa vào, nhưng ngoài ra nó còn cung cấp một trường để nhập dữ liệu vào.

Người sử dụng có thể nhập vào trường đó rồi kích vào OK. Khi đó, ta có thể xử lý dữ liệu do người sử dụng vừa đưa vào.

Ví dụ: Hộp hội thoại gồm một dòng thông báo, một trường nhập dữ liệu, một nút OK và một nút Cancel

Chương trình này sẽ hỏi tên người dùng và sau đó sẽ hiển thị một thông báo ngắn sử dụng tên đưa vào.

Ex_Prompt.html <html>



<head> <title> javascript example </title> <script language= “javascript”> var name=window.prompt(“Hello! what’s your name ?”,””); document.write(“Xin chào bạn ” + name + “!”); </script> </head> <body> </body> </html>

Ví dụ này hiển thị dấu nhắc nhập vào tên với phương thức window.prompt. Giá trị đạt

được sẽ được ghi trong biến có tên là name.

Biến name được kết hợp với các chuỗi khác và được hiển thị trong cửa sổ của trình duyệt nhờ phương thức document.write.

4.5 Biến trong JavaScript 4.5.1 Biến và phân loại biến Tên biến trong JavaScript phải bắt đầu bằng chữ hay dấu gạch dưới. Các chữ số không

được sử dụng để mở đầu tên một biến nhưng có thể sử dụng sau ký tự đầu tiên.

Phạm vi của biến có thể là một trong hai kiểu sau:

Biến toàn cục: Có thể được truy cập từ bất kỳ đâu trong ứng dụng, được khai

báo như sau:

x = 0;

Biến cục bộ: Chỉ được truy cập trong phạm vi chương trình mà nó khai báo.

Biến cục bộ được khai báo trong một hàm với từ khoá var như sau: var x = 0;

Biến toàn cục có thể sử dụng từ khoá var, tuy nhiên điều này không thực sự cần thiết.



4.5.2 Kiểu dữ liệu Khác với C++ hay Java, JavaScript là ngôn ngữ có tính định kiểu thấp. Điều này có

nghĩa là không phải chỉ ra kiểu dữ liệu khi khai báo biến. Kiểu dữ liệu được tự động chuyển thành kiểu phù hợp khi cần thiết.

Ví dụ: file Ex_Variable.Html:

HTML Kết quả

<html> <head> <title>Variable</title> </head> <body> <script language="javascript"> var ba=3; var number; number = ba + 1; document.write("Đây là số " + number); </script> </body> </html>

Trình diễn dịch JavaScript sẽ xem biến “ba“ có kiểu nguyên khi cộng với 1 và có kiểu

chuỗi khi kết hợp với một chuỗi.

Trong JavaScript, có bốn kiểu dữ liệu sau đây: kiểu số nguyên, kiểu dấu phẩy động, kiểu logic và kiểu chuỗi.

4.5.3 Kiểu nguyên (Interger) Số nguyên có thể được biểu diễn theo ba cách:

o Hệ cơ số 10 (hệ thập phân) - có thể biểu diễn số nguyên theo cơ số 10, chú ý rằng chữ số đầu tiên phải khác 0.

o Hệ cơ số 8 (hệ bát phân) - số nguyên có thể biểu diễn dưới dạng bát phân với chữ số đầu tiên là số 0.

o Hệ cơ số 16 (hệ thập lục phân) - số nguyên có thể biểu diễn dưới dạng thập lục phân với hai chữ số đầu tiên là 0x.

4.5.4 Kiểu dấu phẩy động (Floating Point) Một literal có kiểu dấu phẩy động có 4 thành phần sau:

o Phần nguyên thập phân. o Dấu chấm thập phân (.). o Phần dư. o Phần mũ.

Để phân biệt kiểu dấu phẩy động với kiểu số nguyên, phải có ít nhất một chữ số theo sau dấu chấm hay E. Ví dụ:

9.87 -0.85E4 9.87E14 .98E-3



4.5.5 Kiểu logic (Boolean) Kiểu logic được sử dụng để chỉ hai điều kiện : đúng hoặc sai. Miền giá trị của kiểu này

chỉ có hai giá trị o true. o false.

4.5.6 Kiểu chuỗi (String) Một literal kiểu chuỗi được biểu diễn bởi không hay nhiều ký tự được đặt trong cặp dấu

" ... " hay '... '. Ví dụ: “The dog ran up the tree” ‘The dog barked’ “100”

Để biểu diễn dấu nháy kép ( " ), trong chuỗi sử dụng ( \" ), ví dụ: document.write(“ \”This text inside quotes.\” ”);

4.6 Biểu thức Tập hợp các literal, biến và các toán tử nhằm đánh giá một giá trị nào đó được gọi là

một biểu thức (expression). Về cơ bản có ba kiểu biểu thức trong JavaScript: o Số học: Nhằm để lượng giá giá trị số. Ví dụ (3+4)+(84.5/3) được đánh giá

bằng 197.1666666667. o Chuỗi: Nhằm để đánh giá chuỗi. Ví dụ "The dog barked" + barktone + "!" là

The dog barked ferociously!. o Logic: Nhằm đánh giá giá trị logic. Ví dụ temp>32 có thể nhận giá trị sai.

JavaScript cũng hỗ trợ biểu thức điều kiện, cú pháp như sau: (condition) ? valTrue : valFalse

Nếu điều kiện condition được đánh giá là đúng, biểu thức nhận giá trị valTrue, ngược lại nhận giá trị valFalse. Ví dụ:

state = (temp>32) ? "liquid" : "solid"

Trong ví dụ này biến state được gán giá trị "liquid" nếu giá trị của biến temp lớn hơn 32; trong trường hợp ngược lại nó nhận giá trị "solid".

4.7 Toán tử (Operator) Toán tử được sử dụng để thực hiện một phép toán nào đó trên dữ liệu. Một toán tử có

thể trả lại một giá trị kiểu số, kiểu chuỗi hay kiểu logic. Các toán tử trong JavaScript có thể được nhóm thành các loại sau đây: gán, so sánh, số học, chuỗi, logic và logic bitwise.

4.7.1 Gán Toán tử gán là dấu bằng (=) nhằm thực hiện việc gán giá trị của toán hạng bên phải cho

toán hạng bên trái. Bên cạnh đó JavaScript còn hỗ trợ một số kiểu toán tử gán rút gọn. Kiểu gán thông thường Kiểu gán rút gọn

x = x + y x + = y

x = x - y x - = y

x = x * y x * = y

x = x / y x / = y

x = x % y x % = y



4.7.2 So sánh Người ta sử dụng toán tử so sánh để so sánh hai toán hạng và trả lại giá trị đúng hay

sai phụ thuộc vào kết quả so sánh. Sau đây là một số toán tử so sánh trong JavaScript:

== Trả lại giá trị đúng nếu toán hạng bên trái bằng toán hạng bên phải

!= Trả lại giá trị đúng nếu toán hạng bên trái khác toán hạng bên phải

> Trả lại giá trị đúng nếu toán hạng bên trái lớn hơn toán hạng bên phải

>= Trả lại giá trị đúng nếu toán hạng bên trái lớn hơn hoặc bằng toán hạng bên phải

< Trả lại giá trị đúng nếu toán hạng bên trái nhỏ hơn toán hạng bên phải

<= Trả lại giá trị đúng nếu toán hạng bên trái nhỏ hơn hoặc bằng toán hạng bên phải

4.7.3 Số học Bên cạnh các toán tử cộng (+), trừ (-), nhân (*), chia (/) thông thường, JavaScript còn

hỗ trợ các toán tử sau đây:

var1% var2 Toán tử phần dư, trả lại phần dư khi chia var1 cho var2

- Toán tử phủ định, có giá trị phủ định toán hạng

var++ Toán tử này tăng var lên 1 (có thể biểu diễn là ++var)

var-- Toán tử này giảm var đi 1 (có thể biểu diễn là --var)

Chú ý: Nếu bạn gán giá trị của toán tử ++ hay -- vào một biến, như y= x++, có thể có các kết quả khác nhau phụ thuộc vào vị trí xuất hiện trước hay sau của ++ hay -- với tên biến (là x trong trường hợp này). Nếu ++ đứng trước x, x sẽ được tăng hoặc giảm trước khi giá trị x được gán cho y. Nếu ++ hay -- đứng sau x, giá trị của x được gán cho y trước khi nó được tăng hay giảm.

4.7.4 Chuỗi Khi được sử dụng với chuỗi, toán tử + được coi là kết hợp hai chuỗi,

Ví dụ:

"Đà" + "Nẵng” được "ĐàNẵng"

4.7.5 Logic JavaScript hỗ trợ các toán tử logic sau đây:

expr1 && expr2 Là toán tử logic AND, trả lại giá trị đúng nếu cả

expr1 và expr2 cùng đúng.

expr1 || expr2 Là toán tử logic OR, trả lại giá trị đúng nếu ít nhất một trong hai expr1 và expr2 đúng.

! expr Là toán tử logic NOT phủ định giá trị của expr.

4.7.6 Bitwise Với các toán tử thao tác trên bit, đầu tiên giá trị được chuyển dưới dạng số nguyên 32

bit, sau đó lần lượt thực hiện các phép toán trên từng bit.

& Toán tử bitwise AND, trả lại giá trị 1 nếu cả hai bit cùng là 1.



| Toán tử bitwise OR, trả lại giá trị 1 nếu một trong hai bit là 1.

^ Toán tử bitwise XOR, trả lại giá trị 1 nếu hai bit có giá trị khác nhau

Ngoài ra còn có một số toán tử dịch chuyển bitwise. Giá trị được chuyển thành số nguyên 32 bit trước khi dịch chuyển. Sau khi dịch chuyển, giá trị lại được chuyển thành kiểu của toán hạng bên trái. Sau đây là các toán tử dịch chuyển:

<< Toán tử dịch trái. Dịch chuyển toán hạng trái sang trái một số lượng bit bằng toán hạng phải. Các bit bị chuyển sang trái bị mất và 0 thay vào phía bên phải. Ví dụ: 4<<2 trở thành 16 (số nhị phân 100 trở thành số nhị phân 10000)

>> Toán tử dịch phải. Dịch chuyển toán hạng trái sang phải một số lượng bit bằng toán hạng phải. Các bit bị chuyển sang phải bị mất và dấu của toán hạng bên trái được giữ nguyên. Ví dụ: 16>>2 trở thành 4 (số nhị phân 10000 trở thành số nhị phân 100)

>>> Toán tử dịch phải có chèn 0. Dịch chuyển toán hạng trái sang phải một số lượng bit bằng toán hạng phải. Bit dấu được dịch chuyển từ trái (giống >>). Những bit được dịch sang phải bị xoá đi. Ví dụ: -8>>>2 trở thành 1073741822 (bởi các bit dấu đã trở thành một phần của số). Tất nhiên với số dương kết quả của toán tử >> và >>> là giống nhau.

Có một số toán tử dịch chuyển bitwise rút gọn:

Kiểu bitwise thông thường Kiểu bitwise rút gọn

x = x << y x << = y

x = x >> y x - >> y

x = x >>> y x >>> = y

x = x & y x & = y

x = x ^ y x ^ = y

x = x | y x | = y

4.8 Lệnh Có thể chia các lệnh của JavaScript thành ba nhóm sau:

o Lệnh điều kiện. o Lệnh lặp. o Lệnh tháo tác trên đối tượng.

4.8.1 Lệnh điều kiện: if ... else

Câu lệnh này cho phép bạn kiểm tra điều kiện và thực hiện một nhóm lệnh nào đấy dựa trên kết quả của điều kiện vừa kiểm tra. Nhóm lệnh sau else không bắt buộc phải có, nó cho phép chỉ ra nhóm lệnh phải thực hiện nếu điều kiện là sai.

Cú pháp if ( <điều kiện> ) { //Các câu lệnh sẽ được thực hiện nếu điều kiện đúng }

Dạng đầy đủ: if ( <điều kiện> ) {



//Các câu lệnh nếu điều kiện đúng } else { //Các câu lệnh nếu điều kiện sai }

Ví dụ: if (x==10){

document.write(“x bằng 10, đặt lại x bằng 0.”); x = 0;

} else document.write(“x không bằng 10.”);

4.8.2 Lệnh lặp Câu lệnh lặp thể hiện việc lặp đi lặp lại một đoạn mã cho đến khi biểu thức điều kiện

được đánh giá là đúng. JavaScipt cung cấp hai kiểu câu lệnh lặp: o for loop o while loop

Vòng lặp for

Vòng lặp for thiết lập một biểu thức khởi đầu - initExpr, sau đó lặp một đoạn mã cho đến khi biểu thức <điều kiện> được đánh giá là đúng. Sau khi kết thúc mỗi vòng lặp, biểu thức incrExpr được đánh giá lại.

Cú pháp: for (initExpr; <điều kiện> ; incrExpr){ //Các lệnh được thực hiện trong khi lặp }

Ví dụ: HTML Kết quả

<HTML> <HEAD> <TITLE>For loop Example </TITLE> <SCRIPT LANGUAGE= "JavaScript"> for (x=1; x<=10 ; x++) { y=x*25; document.write("x ="+ x +";y= "+ y + "<BR>"); } </SCRIPT> </HEAD> <BODY> </BODY> </HTML>



4.8.3 while Vòng lặp while lặp khối lệnh chừng nào <điều kiện> còn được đánh giá là đúng

Cú pháp: while (<điều kiện>) { //Các câu lệnh thực hiện trong khi lặp }

Ví dụ: x=1; while (x<=10){ y=x*25; document.write("x="+x +"; y = "+ y + "<BR>"); x++; }

Kết quả của ví dụ này giống như ví dụ trước.

4.8.4 Switch Trong trường hợp cần đối chiếu với nhiều giá trị, thay vì sử dụng nhiều vòng lặp

if…else, bạn nên sử dụng khối lệnh switch…case

Cú pháp: switch (expression) { case valueA: // statements to execute if expression evaluates to valueA break; case valueB: // statements to execute if expression evaluates to valueB break; ... default: // statements to execute if expression evaluates to no case value }

Ví dụ:

4.8.5 Break Câu lệnh break dùng để kết thúc việc thực hiện của vòng lặp for hay while. Chương

trình được tiếp tục thực hiện tại câu lệnh ngay sau chỗ kết thúc của vòng lặp.

Cú pháp break;

Đoạn mã sau lặp cho đến khi x lớn hơn hoặc bằng 100. Tuy nhiên nếu giá trị x đưa vào vòng lặp nhỏ hơn 50, vòng lặp sẽ kết thúc

Ví dụ: while (x<100) { if (x<50) break; x++; }

4.8.6 continue Lệnh continue giống lệnh break nhưng khác ở chỗ việc lặp được kết thúc và bắt đầu

từ đầu vòng lặp. Đối với vòng lặp while, lệnh continue điều khiển quay lại <điều kiện>; với for, lệnh continue điều khiển quay lại incrExpr.



Cú pháp continue;

Ví dụ:

Đoạn mã sau tăng x từ 0 lên 5, nhảy lên 8 và tiếp tục tăng lên 10 x=0; while (x<=10) { document.write(“Giá trị của x là:”+ x+”<BR>”); if (x=5) { x=8; continue; } x++; }

//…

4.9 Hàm (Functions) JavaScript cũng cho phép sử dụng các hàm. Mặc dù không nhất thiết phải có, song các

hàm có thể có một hay nhiều tham số truyền vào và một giá trị trả về. Bởi vì JavaScript là ngôn ngữ có tính định kiểu thấp nên không cần định nghĩa kiểu tham số và giá trị trả về của hàm. Hàm có thể là thuộc tính của một đối tượng, trong trường hợp này nó được xem như là phương thức của đối tượng đó.

Các hàm trong JavaScript được định nghĩa bằng cách sử dụng từ khóa function. Các hàm phải được gán một tên gọi và có thể nhận vào một hoặc vài tham số. Các tham số được đặt trong dấu ngoặc và được phân cách nhau bằng dấu phẩy.

Cú pháp function fnName([param1],[param2],...,[paramN]) {

//function statement }

Ví dụ:

Tạo hàm tính tổng và tích để tính kết quả do người dùng nhập vào



<html> <head> <title>Function Example</title> <script language="javascript"> function tong(x, y) { var z; z = x + y; return z; } function tich(x, y) { return x*y; } function ketqua() { // lấy giá trị x và y do người dùng nhập vào var a = parseInt(document.getElementById("x").value); var b = parseInt(document.getElementById("y").value); // tính tổng, tích và đưa vào phần tử textbox "tong" và "tich" document.getElementById("tong").value = a + b; document.getElementById("tich").value = a * b; } </script> </head> <body> x = <input type="text" id="x" /> <br /> y = <input type="text" id="y" /> <br /> Tổng là: <input type="text" id="tong" /> <br /> Tích là: <input type="text" id="tich" /> <br /> <input type="submit" value=”Tính toán” onclick="ketqua()" /> </body> </html>

4.10 Các hàm có sẵn JavaScript có một số hàm có sẵn, gắn trực tiếp vào chính ngôn ngữ và không nằm

trong một đối tượng nào

4.10.1 eval Hàm này được sử dụng để đánh giá các biểu thức hay lệnh. Biểu thức, lệnh hay các đối

tượng của thuộc tính đều có thể được đánh giá. Đặc biệt hết sức hữu ích khi đánh giá các biểu thức do người dùng đưa vào (ngược lại có thể đánh giá trực tiếp).

Cú pháp: returnval=eval(bất kỳ biểu thức hay lệnh hợp lệ trong JavaScript)

Ví dụ: <HTML> <HEAD> <TITLE>Eval Example </TITLE> <SCRIPT LANGUAGE= "JavaScript"> var string=”10+ Math.sqrt(64)”; document.write(string+ “=”+ eval(string)); </SCRIPT>



</HEAD> <BODY> </BODY> </HTML>

Tìm hiểu thêm về eval()

4.10.2 parseInt Hàm này chuyển một chuỗi số thành số nguyên với cơ số là tham số thứ hai (tham số

này không bắt buộc). Hàm này thường được sử dụng để chuyển các số nguyên sang cơ số 10 và đảm bảo rằng các dữ liệu đưọc nhập dưới dạng ký tự được chuyển thành số trước khi tính toán. Trong trường hợp dữ liệu vào không hợp lệ, hàm parseInt sẽ đọc và chuyển dạng chuỗi đến vị trí nó tìm thấy ký tự không phải là số. Ngoài ra hàm này còn cắt dấu phẩy động.

Cú pháp parseInt (string, [, radix])

Ví dụ: <HTML> <HEAD> <TITLE> perseInt Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript"> document.write("Converting 0xC hex to base-10: " + parseInt(0xC,10) + "<BR>"); document.write("Converting 1100 binary to base-10: " + parseInt(1100,2) + "<BR>"); </SCRIPT> </HEAD> <BODY> </BODY> </HTML>



4.10.3 parseFloat Hàm này giống hàm parseInt nhưng nó chuyển chuỗi thành số biểu diễn dưới dạng dấu

phẩy động.

Cú pháp parseFloat (string)

Ví dụ:

Ví dụ sau minh hoạ cách thức xử lý của parseFloat với các kiểu chuỗi khác nhau. <html> <head> <title> persefload example </title> <script language= "javascript"> document.write("this script will show how diffrent strings are "); document.write("converted using parsefloat<br>"); document.write("137= " + parseFloat("137") + "<br>"); document.write("137abc= " + parseFloat("137abc") + "<br>"); document.write("abc137= " + parseFloat("abc137") + "<br>"); document.write("1abc37= " + parseFloat("1abc37") + "<br>"); </script> </head> <body> </body> </html>

4.10.4 escape và unescape

Xem lại: Các giới hạn của URL?

Bạn hãy hình dung một tập tin với một tên dài và đầy tính sáng tạo, chẳng hạn We’re #1 & proud of it; no ifs ands or buts!.htm. Windows cho phép đặt tên như vậy cho tập tin. Nhưng khi bạn muốn truy xuất tập tin này thông qua trình duyệt, bạn sẽ gặp phải vấn đề. Các ký tự khoảng trắng, #, &, ! và ; không cho phép trong lược đồ tên của URL. Để truy xuất tập tin, trước hết nó phải được mã hóa.

Mã hóa tên một tập tin là quá trình chuyển đổi tất cả các ký tự không hợp lệ thành các ký hiệu được mã hóa đặc biệt trước khi gửi URL đến máy chủ để xử lý. Để mã hóa một tên tập tin, chúng ta phải sử dụng hàm escape có sẵn trong JavaScript.

newfilename = escape(filename)

Ví dụ: var filename, newfilename; filename = “We’re #1 & proud of it; no ifs ands or buts!.htm”; newfilename = escape(filename);



alert(newfilename);

4.11 Biểu thức quy tắc (Trang 113)

4.12 Mảng (ARRAY) Có 3 cách để tạo ra một đối tượng mảng bằng cách dùng lớp Array:

4.12.1 Tạo một mảng trống var myArray = new Array( ); myArray[0] = "Xanh"; myArray[1] = "Đỏ"; ...

Việc không truyền tham số nào cho hàm kiến tạo của lớp Array sẽ tạo ra một mảng trống – còn được gọi là mảng có chiều dài bằng 0. Trong JavaScript, số phần tử trong mảng được xác định thông qua chiều dài của nó.

<html> <head> <title> Array example </title> <script language= "javascript"> //Định nghĩa 1 biến để chứa mảng var weekday; //Tạo ra một đối tượng Array bằng cách sử dụng toán tử new weekday = new Array( ); //Gán giá trị cho các phần tử của mảng, bắt đầu từ phần tử có chỉ số 0 weekday[0] = “Chủ Nhật”; weekday[1] = “Thứ Hai”; weekday[2] = “Thứ Ba”; weekday[3] = “Thứ Tư”; weekday[4] = “Thứ Năm”; weekday[5] = “Thứ Sáu”; weekday[6] = “Thứ Bảy”; //Bây giờ chúng ta đã có một mảng //Có thể truy xuất đến các phần tử này bằng cách dùng các chỉ số for (var i = 0; i < 7; i++) { document.write(weekday[i] + “<br />”); } </script> </head> <body> </body> </html>



<html> <head> <title> Array example </title> <script language= "javascript"> var weekday; weekday = new Array( ); weekday[0] = “Chủ Nhật”; weekday[1] = “Thứ Hai”; weekday[2] = “Thứ Ba”; weekday[3] = “Thứ Tư”; weekday[4] = “Thứ Năm”; weekday[5] = “Thứ Sáu”; weekday[6] = “Thứ Bảy”; var today = new Date(); var wday = today.getDay(); document.write(“Hôm nay là “ + wday); </script> </head> <body> </body> </html>

4.12.2 Xác định chiều dài ban đầu của mảng JavaScript cho phép chúng ta xác định chiều dài ban đầu (kích thước ban đầu) của

mảng bằng cách truyền vào một số nguyên dưới dạng một tham số. var weekday = new Array(7);



Chiều dài của mảng cũng có thể được thiết lập trong chương trình bằng cách sử dụng thuộc tính length của đối tượng Array.

var weekday = new Array(); weekday.length = 7;

4.12.3 Tạo và khởi tạo mảng trong cùng một dòng lệnh Hãy xem xét mảng weekday được định nghĩa trong ví dụ trên, chúng ta đã sử dụng đến

8 dòng lệnh chỉ để tạo và khởi tạo mảng. Sẽ tốt hơn rất nhiều nếu chúng ta thực hiện công việc này chỉ với một dòng lệnh:

var weekday = new Array(“Chủ Nhật”, “Thứ Hai”, “Thứ Ba”, “Thứ Tư”, “Thứ Năm”, “Thứ Sáu”, “Thứ Bảy”);

Hàm kiến tạo lớp Array cũng chấp nhận một danh sách các giá trị ban đầu của mảng cách nhau bằng dấu chấm phẩy. Phần tử đầu tiên trong danh sách ứng với chỉ số 0, phần tử tiếp theo ứng với chỉ số 1…

Ngắt một dòng lệnh dài thành nhiều dòng

Để làm cho một dòng lệnh dài dễ đọc hơn (đối với bạn và những nhà lập trình khác), bạn nên xuống dòng trước khi mã lệnh của mình vượt ra khỏi cạnh phải của màn hình. JavaScript hỗ trợ mã lệnh được viết trên nhiều dòng, miễn là chúng được đặt đúng vị trí. JavaScript sẽ bỏ qua các khoảng trắng thừa và các ký tự xuống dòng cho đến khi bắt gặp ký tự (;) – kết thúc thực tế của dòng lệnh.

4.12.4 Kích thước mảng length Để lấy ra hoặc thiết lập kích thước của mảng, chúng ta sử dụng thuộc tính length

var weekday = new Array(“Chủ Nhật”, “Thứ Hai”, “Thứ Ba”, “Thứ Tư”, “Thứ Năm”, “Thứ Sáu”, “Thứ Bảy”); for (var i = 0; i < weekday.length; i++) { document.write(weekday[i] + “<br />”); }

4.12.5 Các chức năng của đối tượng Array Đối tượng Array cso một số chức năng hữu dụng để quản lý nội dung của mảng được

dễ hơn đối với các nhà lập trình. Các chức năng này được thể hiện trong bảng sau:

Chức năng Mô tả

concat(array1, array2, …, arrayN) Kết nối hai hoặc nhiều mảng lại thành một mảng

join(dấu phân cách) Nối tất cả các phần tử trong một mảng thành một chuỗi được phân cách bởi dấu phân cách hoặc dấu châm phẩy nếu dấu phân cách không xác định.

pop() Trả lại phần tử cuối cùng của một mảng và loại bỏ nó ra khỏi mảng.

push() Bổ sung một hoặc nhiều phần tử vào cuối mảng và trả lại chiều dài mới của nó.

reverse() Đảo ngược thứ tự của các phần tử trong mảng.

shift() Tương tự như pop(); trả lại phần tử đầu tiên trong mảng và loại bỏ nó ra khỏi mảng.

slice(bắt đầu, kết thúc) Tạo một mảng con từ mảng đã có. Mảng con này bao gồm các phần tử tính từ chỉ số bắt đầu cho đến chỉ số kết thúc.

splice(chỉ số, số lượng, phần tử 1, Được sử dụng để thêm hoặc loại bỏ một số phần tử



phần tử 2, …) khỏi mảng.

sort(tên hàm) Được dùng để sắp xếp các phần tử trong mảng.

unshift(phần tử 1, phần tử 2…) Tương tự như push(); bổ sung một hoặc nhiều phần tử vào đầu mảng và trả lại chiều dài mới của nó.

Một số chức năng ở trên cho phép chúng ta thao tác với mảng như một hàng đợi hoặc ngăn xếp. o pop() và push(): Vào sau, ra trước (LIFO), tương tự như một ngăn xếp. o shift() và unshift(): Vào trước, ra trước (FIFO), tương tự như hàng đợi.

4.13 Sự kiện JavaScript là ngôn ngữ định hướng sự kiện, nghĩa là sẽ phản ứng trước các sự kiện

xác định trước như kích chuột hay nhấn một phím trên bàn phím. Một sự kiện có thể gây ra việc thực hiện một đoạn mã lệnh (gọi là các chương triình xử lý sự kiện) giúp cho chương trình có thể phản ứng một cách thích hợp.

Chương trình xử lý sự kiện (Event handler): Một đoạn mã hay một hàm được thực hiện để phản ứng trước một sự kiện gọi là chương trình xử lý sự kiện. Chương trình xử lý sự kiện được xác định là một thuộc tính của một thẻ HTML:

<tagName eventHandler = "JavaScript Code or Function">

Ví dụ sau gọi hàm CheckAge() mỗi khi giá trị của trường văn bản thay đổi: <input type=text name="age" onchange="CheckAge()">

Đoạn mã của chương trình xử lý sự kiện không là một hàm; nó là các lệnh của JavaScript cách nhau bằng dấu chấm phẩy. Tuy nhiên cho mục đích viết thành các module nên viết dưới dạng các hàm.

Một số sự kiện trong JavaScript:

onBlur Xảy ra khi input focus bị chuyển ra khỏi một thành

phần của form

onClick Xảy ra khi người dùng kích vào các thành phần hay liên kết của form.

onChange Xảy ra khi giá trị của thành phần được chọn thay đổi

onFocus Xảy ra khi thành phần của form được focus (làm nổi lên).

onLoad Xảy ra trang Web được tải.

onMouseOver Xảy ra khi di chuyển chuột qua kết nối hay anchor.

onSelect Xảy ra khi người sử dụng lựa chọn một trường nhập dữ liệu trên form.

onSubmit Xảy ra khi người dùng đưa ra một form.

onUnLoad Xảy ra khi người dùng đóng một trang

Chúng ta đã biết, trong form có chứa các đối tượng như text box, checkbox, radio button, submit,… Dưới đây là bảng liệt kê một số sự kiện thường được sử dụng trong các đối tượng này:

Đối tượng Sự kiện

Selection list onBlur, onChange, onFocus



Text onBlur, onChange, onFocus, onSelect

Textarea onBlur, onChange, onFocus, onSelect

Button onClick

Checkbox onClick

Radio button onClick

Hypertext link onClick, onMouseOver, onMouseOut

Clickable Imagemap area onMouseOver, onMouseOut

Reset button onClick

Submit button onClick

Document onLoad, onUnload, onError

Window onLoad, onUnload, onBlur, onFocus

Framesets onBlur, onFocus

Form onSubmit, onReset

Image onLoad, onError, onAbort

Ví dụ:

Bạn viết một trang web, trong đó có sử dụng form để người dùng điền tên và tuổi vào. Bạn muốn chắc chắn rằng, khách hàng đã điền đầy đủ tên và tuổi trước khi gửi form đi (submit). Nếu khách hàng chưa điền đầy đủ thông tin, hãy nhắc nhở họ.

Trong trường hợp này, thông tin chưa điền đầy đủ và khi khách hàng bấm vào nút

“Gửi”, trang web của bạn sẽ nhắc nhở:



<html> <head> <title>Form</title> <script language="javascript"> function checkForm() //Hàm kiểm tra { //Nếu trường nhập tên và tuổi còn trống thì trả lại false if ((document.fdangnhap.ten.value=="")||(document.fdangnhap.tuoi.value=="")) { alert("Bạn cần nhập tên và tuổi!"); return false; } return true; } </script> </head> <body> <form name="fdangnhap" action="" method="get"> <table width=100%> <tr> <td>Tên của bạn:</td> <td><input type="text" name="ten"></td> </tr> <tr> <td>Tuổi:</td> <td><input type="text" name="tuoi"></td> </tr> <tr> <td></td> //Nếu nút “Gửi” được bấm, sẽ kiểm tra bằng hàm checkForm <td><input type="submit" value="Gửi" onClick="return checkForm();"> </td> </tr> </table> </form> </body> </html>

Hãy thử kiểm tra thêm trường nhập tuổi, để đảm bảo rằng đó là một số nguyên dương hợp lệ!



4.14 Các đối tượng trong JavaScript Như đã nói JavaScript là ngôn ngữ lập trình dựa trên đối tượng, nhưng không hướng

đối tượng bởi vì nó không hỗ trợ các lớp cũng như tính thừa kế. Phần này nói về các đối tượng trong JavaScript và hình vẽ dưới đây chỉ ra sơ đồ phân cấp các đối tượng.

Trong sơ đồ phân cấp các đối tượng của JavaScript, các đối tượng con thực sự là các thuộc tính của các đối tượng bố mẹ. Trong ví dụ về chương trình xử lý sự kiện trước đây form tên “fdangnhap” là thuộc tính của đối tượng document và trường text “ten” là thuộc tính của form “fdangnhap”. Để tham chiếu đến giá trị của “ten” , bạn phải sử dụng:

document.fdangnhap.ten.value

Các đối tượng có thuộc tính (properties), phương thức (methods), và các chương trình xử lý sự kiện (event handlers) gắn với chúng. Ví dụ đối tượng document có thuộc tính title phản ánh nội dung của thẻ <TITLE> của document. Bên cạnh đó bạn thấy phương thức document.write được sử dụng trong nhiều ví dụ để đưa văn bản kết quả ra document.

Đối tượng cũng có thể có các chương trình xử lý sự kiện. Ví dụ đối tượng link có hai chương trình xử lý sự kiện là onClick và onMouseOver. onClick được gọi khi có đối tượng link được kích, onMouseOver được gọi khi con trỏ chuột di chuyển qua link.

Khi bạn tải một document xuống Navigator, nó sẽ tạo ra một số đối tượng cùng với những giá trị các thuộc tính của chúng dựa trên file HTML của document đó và một vài thông tin cần thiết khác. Những đối tượng này tồn tại một cách có cấp bậc và phản ánh chính cấu trúc của file HTML đó.

Sơ đồ sau sẽ minh hoạ sự phân cấp của các đối tượng này



Trong sơ đồ phân cấp này, các đối tượng con chính là các thuộc tính của một đối tượng

cha. Ví dụ như một form tên là form1 chính là một đối tượng con của đối tượng document và được gọi tới là document.form1

Tất cả các trang đều có các đối tượng sau đây: o navigator: có các thuộc tính tên và phiên bản của Navigator đang được sử

dụng, dùng cho MIME type được hỗ trợ bởi client và plug-in được cài đặt trên client.

o window: là đối tượng ở mức cao nhất, có các thuộc tính thực hiện áp dụng vào toàn bộ cửa sổ.

o document: chứa các thuộc tính dựa trên nội dung của document như tên, màu nền, các kết nối và các forms.

o location: có các thuộc tính dựa trên địa chỉ URL hiện thời o history: Chứa các thuộc tính về các URL mà client yêu cầu trước đó.

Sau đây sẽ mô tả các thuộc tính, phương thức cũng như các chương trình xử lý sự kiện cho từng đối tượng trong JavaScript.

Window Texturea

Text

FileUpload

Password

Hidden

Submit

Reset

Radio

Checkbox

Button

Select

Plugin

Mime Type Frame

document

Location

History

Layer

Link

Image

Area

Anchor

Applet

Plugin

Form

navigator

Option

Sơ đồ: Phân cấp đối tượng Navigator



4.15 Đối tượng Navigator Đối tượng này được sử dụng để đạt được các thông tin về trình duyệt như số phiên

bản. Đối tượng này không có phương thức hay chương trình xử lý sự kiện.

Các thuộc tính

appCodeName Xác định tên mã nội tại của trình duyệt (Atlas).

appName Xác định tên trình duyệt.

appVersion Xác định thông tin về phiên bản của đối tượng navigator.

userAgent Xác định header của user - agent.

Ví dụ

Ví dụ sau sẽ hiển thị các thuộc tính của đối tượng navigator <html> <head> <title>Navigator Object</title> <script language="javascript"> document.write("appCodeName: " + navigator.appCodeName + "<br>"); document.write("appName: " + navigator.appName + "<br>"); document.write("appVersion: " + navigator.appVersion + "<br>"); document.write("userAgent: " + navigator.userAgent + "<br>"); </script> </head> <body> </body> </html>

4.16 Đối tượng window Đối tượng window như đã nói ở trên là đối tượng ở mức cao nhất. Các đối tượng

document, frame, vị trí đều là thuộc tính của đối tượng window.

Các thuộc tính o defaultStatus - Thông báo ngầm định hiển thị lên trên thanh trạng thái của cửa

sổ



o Frames - Mảng xác định tất cả các frame trong cửa sổ. o Length - Số lượng các frame trong cửa sổ cha mẹ. o Name - Tên của cửa sổ hiện thời. o Parent - Đối tượng cửa sổ cha mẹ o Self - Cửa sổ hiện thời. o Status - Được sử dụng cho thông báo tạm thời hiển thị lên trên thanh thạng

thái cửa sổ. Đựơc sử dụng để lấy hay đặt lại thông báo trạng thái và ghi đè lên defaultStatus.

o Top - Cửa sổ ở trên cùng. o Window - Cửa sổ hiện thời.

Các phương thức o alert ("message") -Hiển thị hộp hội thoại với chuỗi "message" và nút OK. o clearTimeout(timeoutID) -Xóa timeout do SetTimeout đặt. SetTimeout trả lại

timeoutID o windowReference.close -Đóng cửa sổ windowReference. o confirm("message") -Hiển thị hộp hội thoại với chuỗi "message", nút OK và nút

Cancel. Trả lại giá trị True cho OK và False cho Cancel. o [windowVar = ][window]. open("URL", "windowName", [ "windowFeatures" ] ) -

Mở cửa sổ mới. o prompt ("message" [,"defaultInput"]) - Mở một hộp hội thoại để nhận dữ liệu

vào trường text. o TimeoutID = setTimeout(expression,msec) - Đánh giá biểu thức expresion sau

thời gian msec.

Ví dụ: Sử dụng tên cửa sổ khi gọi tới nó như là đích của một form submit). <html> <head> <title>Window Example </title> </head> <body> <form> <input type="button" value="Open Second Window" onClick="msgWindow=window.open('', 'window2', 'resizable=no, width=200, height=200')"> <br> <input type="button" value="Close Second Window" onClick="msgWindow.close()"> </form> </body> </html>



Ví dụ: Hãy hiển thị một dòng chữ chạy trên thanh trạng thái status

<html> <head> <title>Window Example </title> <script language="javascript"> window.status="Trường Cao đẳng Công nghệ thông tin - Đại học Đà Nẵng - www.cit.udn.vn *** "; str = ""; function changeStatus() { str = window.status; window.status = str.substring(1,str.length) + str.charAt(0); } statusInterval = window.setInterval("changeStatus()", 200); </script> </head> <body> </body> </html>

Các chương trình xử lý sự kiện o onLoad - Xuất hiện khi cửa sổ kết thúc việc tải.



o onUnLoad - Xuất hiện khi cửa sổ được loại bỏ.

4.17 Đối tượng location Các thuộc tính của đối tượng location duy trì các thông tin về URL của document hiện

thời. Đối tượng này hoàn toàn không có các phương thức và chương trình xử lý sự kiện đi kèm. Ví dụ:

http://www.abc.com/chap1/page2.html#topic3

Các thuộc tính o hash - Tên anchor của vị trí hiện thời (ví dụ topic3). o Host - Phần hostname:port của URL (ví dụ www.abc.com ). Chú ý rằng đây

thường là cổng ngầm định và ít khi được chỉ ra. o Hostname - Tên của host và domain (ví dụ www.abc.com ). o href - Toàn bộ URL cho document hiện tại. o Pathname - Phần đường dẫn của URL (ví dụ /chap1/page2.html). o Port - Cổng truyền thông được sử dụng cho máy tính host, thường là cổng

ngầm định. o Protocol - Giao thức được sử dụng (cùng với dấu hai chấm) (ví dụ http:). o Search - Câu truy vấn tìm kiếm có thể ở cuối URL cho các script CGI.

4.18 Đối tượng frame Một cửa số có thể có một vài frame. Các frame có thể cuộn một cách độc lập với nhau

và mỗi frame có URL riêng. frame không có các chương trình xử lý sự kiện. Sự kiện onLoad và onUnLoad là của đối tượng window.

Các thuộc tính o frames - Mảng tất cả các frame trong cửa sổ. o Name - Thuộc tính NAME của thẻ <FRAME> o Length - Số lượng các frame con trong một frame. o Parent - Cửa sổ hay frame chứa nhóm frame hiện thời. o self - frame hiện thời. o Window - frame hiện thời.

Các phương thức o clearTimeout (timeoutID) - Xoá timeout do setTimeout lập. SetTimeout trả lại

timeoutID. o TimeoutID = setTimeout (expression,msec) - Đánh giá expression sau khi hết

thời gian msec.

4.19 Đối tượng document Đối tượng này chứa các thông tin về document hiện thời và cung cấp các phương thức

để đưa thông tin ra màn hình. Đối tượng document được tạo ra bằng cặp thẻ <body> và </body>. Một số các thuộc tính gắn với thẻ <body>.

Các đối tượng anchor, forms, history, links là thuộc tính của đối tượng document. Không có các chương trình xử lý sự kiện cho các frame. Sự kiện onLoad và onUnLoad là cho đối tượng window.

Các thuộc tính o alinkColor - Giống như thuộc tính ALINK. o anchor - Mảng tất cả các anchor trong document.

http://www.abc.com)/

http://www.abc.com/



o bgColor - Giống thuộc tính BGCOLOR. o cookie - Sử dụng để xác định cookie. o fgColor - Giống thuộc tính TEXT. o forms - Mảng tất cả các form trong document. o lastModified - Ngày cuối cùng văn bản được sửa. o linkColor - Giống thuộc tính LINK. o links - Mảng tất cả các link trong document. o location - URL đầy đủ của văn bản. o referrer - URL của văn bản gọi nó. o title - Nội dung của thẻ <TITLE>. o vlinkColor - Giống thuộc tính VLINK.

Các phương thức o document.clear - Xoá document hiện thời. o document.close - Đóng dòng dữ liệu vào và đưa toàn bộ dữ liệu trong bộ đệm

ra màn hình. o document.open (["mineType"]) - Mở một stream để thu thập dữ liệu vào của

các phwong thức write và writeln. o document.write(expression1 [,expression2]...[,expressionN]) - Viết biểu thức

HTML lên văn bản trông một cửa sổ xác định. o document.writeln (expression1 [,expression2] ... [,expressionN] ) - Giống

phương thức trên nhưng khi hết mỗi biểu thức lại xuống dòng.

4.20 Đối tượng anchors anchor là một đoạn văn bản trong document có thể dùng làm đích cho một siêu liên kết.

Nó được xác định bằng cặp thẻ <A> và </A>. Đối tượng anchor không có thuộc tính, phương thức cũng như chương trình xử lý sự kiện. Mảng anchor tham chiếu đến mỗi anchor có tên trong document. Mỗi anchor được tham chiếu bằng cách:

document.anchors [index]

Mảng anchor có một thuộc tính duy nhất là length xác định số lượng các anchor trong document, nó có thể được xác định như sau:

document.anchors.length.

4.21 Đối tượng forms Các form được tạo ra nhờ cặp thẻ <FORM> và </FORM>. Phần lớn các thuộc tính của

đối tượng form phản ánh các thuộc tính của thẻ <FORM>. Có một vài phần tử (elements) là thuộc tính của đối tượng forms:

o button o checkbox o hidden o password o radio o reset o select o submit o text o textarea



Nếu document chứa một vài form, chúng có thể được tham chiếu qua mảng forms. Số lượng các form có thể được xác định như sau:

document.forms.length

Mỗi một form có thể được tham chiếu như sau: document.forms[index]

Các thuộc tính o action thuộc tính ACTION của thẻ FORM. o elements Mảng chứa tất cả các thành phần trong một form (như

checkbox, trường text, danh sách lựa chọn o encoding Xâu chứa kiểu MIME được sử dụng để mã hoá nội dung của

form gửi cho server. o length Số lượng các thành phần trong một form. o method Thuộc tính METHOD. o target Xâu chứa tên của cửa sổ đích khi submit form

Các phương thức o formName.submit () - Xuất dữ liệu của một form tên formName tới trang xử lý.

Phương thức này mô phỏng một click vào nút submit trên form.

Các chương trình xử lý sự kiện o onSubmit - Chương trình xử lý sự kiện này được gọi khi người sử dụng

chuyển dữ liệu từ form đi.

4.22 Đối tượng history Đối tượng này được sử dụng để lưu giữ các thông tin về các URL trước được người sử

dụng sử dụng. Danh sách các URL được lưu trữ theo thứ tự thời gian. Đối tượng này không có chương trình xử lý sự kiện.

Các thuộc tính o length - Số lượng các URL trong đối tượng.

Các phương thức o history.back() - Được sử dụng để tham chiếu tới URL mới được thăm trước

đây. o history.forward() - Được sử dụng để tham chiếu tới URL kế tiếp trong danh

sách. Nó sẽ không gây hiệu ứng gì nếu đã đến cuối của danh sách. o history.go (delta | "location") - Được sử dụng để chuyển lên hay chuyển xuống

delta bậc hay di chuển đến URL xác định bởi location trong danh sách. Nếu delta được sử dụng thì việc dịch chuyển lên phía trên khi delta dương và xuống phía dưới khi delta âm. nếu sử dụng location, URL gần nhất có chứa location là chuỗi con sẽ được tham chiếu.

4.23 Đối tượng links Đối tượng link là một đoạn văn bản hay một ảnh được xem là một siêu liên kết. Các

thuộc tính của đối tượng link chủ yếu xử lý về URL của các siêu liên kết. Đối tượng link cũng không có phương thức nào.

Mảng link chứa danh sách tất cả các liên kết trong document. Có thể xác định số lượng các link qua

document.links.length()

Có thể tham chiếu tới một liên kết qủa



document.links [index]

Để xác định các thuộc tính của đối tượng link, có thể sử dụng URL tương tự: http://www.abc.com/chap1/page2.html#topic3

Các thuộc tính o hash - Tên anchor của vị trí hiện thời (ví dụ topic3). o Host - Phần hostname:port của URL (ví dụ www.abc.com). Chú ý rằng đây

thường là cổng ngầm định và ít khi được chỉ ra. o Hostname - Tên của host và domain (ví dụ ww.abc.com). o href - Toàn bộ URL cho document hiện tại. o Pathname - Phần đường dẫn của URL (ví dụ /chap1/page2.html). o port - Cổng truyền thông được sử dụng cho máy tính host, thường là cổng

ngầm định. o Protocol - Giao thức được sử dụng (cùng với dấu hai chấm) (ví dụ http:). o Search - Câu truy vấn tìm kiếm có thể ở cuối URL cho các script CGI. o Target - Giống thuộc tính TARGET của <LINK>.

Các chương trình xử lý sự kiện o onClick - Xảy ra khi người sử dụng nhấn vào link. o onMouseOver - Xảy ra khi con chuột di chuyển qua link.

4.24 Đối tượng math Đối tượng Math là đối tượng nội tại trong JavaScript. Các thuộc tính của đối tượng này

chứa nhiều hằng số toán học, các hàm toán học, lượng giác phổ biến. Đối tượng Math không có chương trình xử lý sự kiện.

Việc tham chiếu tới number trong các phương thức có thể là số hay các biểu thức được đánh giá là số hợp lệ.

Các thuộc tính o E - Hằng số Euler, khoảng 2,718. o LN2 - logarit tự nhiên của 2, khoảng 0,693. o LN10 - logarit tự nhiên của 10, khoảng 2,302. o LOG2E - logarit cơ số 2 của e, khoảng 1,442. o PI - Giá trị của π, khoảng 3,14159. o SQRT1_2 - Căn bậc 2 của 0,5, khoảng 0,707. o SQRT2 - Căn bậc 2 của 2, khoảng 1,414.

Các phương thức o Math.abs (number) - Trả lại giá trị tuyệt đối của number. o Math.acos (number) - Trả lại giá trị arc cosine (theo radian) của number. Giá trị

của number phải nămg giữa -1 và 1. o Math.asin (number) - Trả lại giá trị arc sine (theo radian) của number. Giá trị

của number phải nămg giữa -1 và 1. o Math.atan (number) - Trả lại giá trị arc tan (theo radian) của number. o Math.ceil (number) - Trả lại số nguyên nhỏ nhất lớn hơn hoặc bằng number. o Math.cos (number) - Trả lại giá trị cosine của number. o Math.exp (number) - Trả lại giá trị e^ number, với e là hằng số Euler. o Math.floor (number) - Trả lại số nguyên lớn nhất nhỏ hơn hoặc bằng number. o Math.log (number) - Trả lại logarit tự nhiên của number.

http://www.abc.com)/



o Math.max (num1,num2) - Trả lại giá trị lớn nhất giữa num1 và num2 o Math.min (num1,num2) - Trả lại giá trị nhỏ nhất giữa num1 và num2. o Math.pos (base,exponent) - Trả lại giá trị base luỹ thừa exponent. o Math.random (r) - Trả lại một số ngẫu nhiên giữa 0 và 1. Phwong thức này chỉ

thực hiện được trên nền tảng UNIX. o Math.round (number) - Trả lại giá trị của number làm tròn tới số nguyên gần

nhất. o Math.sin (number) - Trả lại sin của number. o Math.sqrt (number) - Trả lại căn bậc 2 của number. o Math.tan (number) - Trả lại tag của number.

4.25 Đối tượng date Đối tượng Date là đối tượng có sẵn trong JavaScript. Nó cung cấp nhiều phương thức

có ích để xử lý về thời gian và ngày tháng. Đối tượng Date không có thuộc tính và chương trình xử lý sự kiện.

Với đối tượng Date, chúng ta có thể: o Lấy ra một thành phần nào đó của ngày (ví dụ như tháng) o Thay hoặc sửa đổi các thành phần của ngày o Chuyển đổi định dạng thể hiện ngày o Chuyển đổi giờ giữa các múi giờ khác nhau

Use the Date object constructor method with any of the acceptable arguments signifying a date (and, optionally, a time for that date):

var myDate = new Date(yyyy, mm, dd, hh, mm, ss); var myDate = new Date(yyyy, mm, dd); var myDate = new Date("monthName dd, yyyy hh:mm:ss"); var myDate = new Date("monthName dd, yyyy"); var myDate = new Date(epochMilliseconds);

To create a date object with the current date and time, omit all arguments: var now = new Date( );

Để tạo ngày dựa trên… Hãy sử dụng…

Một chuỗi ngày dateVar=new Date(“February 24, 2008”); Các thành phần của ngày dateVar=new Date(2008, 2, 24); Thành phần ngày và giờ dateVar=new Date(2008, 2, 24, 12, 59, 59); Ngày và giờ hiện tại dateVar=new Date();

Các phương thức o dateVar.getDate() - Trả lại ngày trong tháng (1-31) cho dateVar. o dateVar.getDay() - Trả lại ngày trong tuần (0=chủ nhật,...6=thứ bảy) cho

dateVar. o dateVar.getHours() - Trả lại giờ (0-23) cho dateVar. o dateVar.getMinutes() - Trả lại phút (0-59) cho dateVar. o dateVar.getSeconds() - Trả lại giây (0-59) cho dateVar. o dateVar.getTime() - Trả lại số lượng các mili giây từ 00:00:00 ngày 1/1/1970. o dateVar.getTimeZoneOffset() - Trả lại độ dịch chuyểnbằng phút của giờ địa

phương hiện tại so với giờ quốc tế GMT.



o dateVar.getYear()-Trả lại năm cho dateVar. o Date.parse (dateStr) - Phân tích chuỗi dateStr và trả lại số lượng các mili giây

tính từ 00:00:00 ngày 01/01/1970. o dateVar.setDay(day) - Đặt ngày trong tháng là day cho dateVar. o dateVar.setHours(hours) - Đặt giờ là hours cho dateVar. o dateVar.setMinutes(minutes) - Đặt phút là minutes cho dateVar. o dateVar.setMonths(months) - Đặt tháng là months cho dateVar. o dateVar.setSeconds(seconds) - Đặt giây là seconds cho dateVar. o dateVar.setTime(value) - Đặt thời gian là value, trong đó value biểu diễn số

lượng mili giây từ 00:00:00 ngày 01/01/10970. o dateVar.setYear(years) - Đặt năm là years cho dateVar. o dateVar.toGMTString() - Trả lại chuỗi biểu diễn dateVar dưới dạng GMT. o dateVar.toLocaleString()-Trả lại chuỗi biểu diễn dateVar theo khu vực thời gian

hiện thời. o Date.UTC (year, month, day [,hours] [,minutes] [,seconds]) - Trả lại số lượng

mili giây từ 00:00:00 01/01/1970 GMT.

4.26 Đối tượng string Đối tượng String là đối tượng được xây dựng nội tại trong JavaScript cung cấp nhiều

phương thức thao tác trên chuỗi. Đối tượng này có thuộc tính duy nhất là độ dài (length) và không có chương trình xử lý sự kiện.

Các phương thức o str.anchor (name) - Được sử dụng để tạo ra thẻ <A> (một cách động). Tham

số name là thuộc tính NAME của thẻ <A>. o str.big() - Kết quả giống như thẻ <BIG> trên chuỗi str. o str.blink() - Kết quả giống như thẻ <BLINK> trên chuỗi str. o str.bold() - Kết quả giống như thẻ <BOLD> trên chuỗi str. o str.charAt(a) - Trả lại ký tự thứ a trong chuỗi str. o str.fixed() - Kết quả giống như thẻ <TT> trên chuỗi str. o str.fontcolor() - Kết quả giống như thẻ <FONTCOLOR = color>. o str.fontsize(size) - Kết quả giống như thẻ <FONTSIZE = size>. o str.index0f(srchStr [,index]) - Trả lại vị trí trong chuỗi str vị trí xuất hiện đầu tiên

của chuỗi srchStr. Chuỗi str được tìm từ trái sang phải. Tham số index có thể được sử dụng để xác định vị trí bắt đầu tìm kiếm trong chuỗi.

o str.italics() - Kết quả giống như thẻ <I> trên chuỗi str. o str.lastIndex0f(srchStr [,index]) - Trả lại vị trí trong chuỗi str vị trí xuất hiện cuối

cùng của chuỗi srchStr. Chuỗi str được tìm từ phải sang trái. Tham số index có thể được sử dụng để xác định vị trí bắt đầu tìm kiếm trong chuỗi.

o str.link(href) - Được sử dụng để tạo ra một kết nối HTML động cho chhuỗi str. Tham số href là URL đích của liên kết.

o str.small() - Kết quả giống như thẻ <SMALL> trên chuỗi str. o str.strike() - Kết quả giống như thẻ <STRIKE> trên chuỗi str. o str.sub() - Tạo ra một subscript cho chuỗi str, giống thẻ <SUB>. o str.substring(a,b) - Trả lại chuỗi con của str là các ký tự từ vị trí thứ a tới vị trí

thứ b. Các ký tự được đếm từ trái sang phải bắt đầu từ 0. o str.sup() - Tạo ra superscript cho chuỗi str, giống thẻ <SUP>. o str.toLowerCase() - Đổi chuỗi str thành chữ thường.



o str.toUpperCase() - Đổi chuỗi str thành chữ hoa.

4.27 Các phần tử của đối tượng form Form được tạo bởi các phần tử cho phép người sử dụng đưa thông tin vào. Khi đó, nội

dung (hoặc giá trị) của các phần tử sẽ được chuyển đến một chương trình trên server qua một giao diện được gọi là Common Gateway Interface(Giao tiếp qua một cổng chung) gọi tắt là CGI

Sử dụng JavaScript bạn có thể viết những đoạn scripts chèn vào HTML của bạn để làm việc với các phần tử của form và các giá trị của chúng.

Bảng: Các phần tử của form

Phần tử Mô tả

button Là một nút bấm hơn là nút submit hay nút reset (<INPUT TYPE="button">)

checkbox Một checkbox (<INPUT TYPE="checkbox">)

FileUpload Là một phần tử tải file lên cho phép người sử dụng gửi lên một file (<INPUT TYPE="file">)

hidden Một trường ẩn (<INPUT TYPE="hidden">)

password Một trường text để nhập mật khẩu mà tất cả các ký tự nhập vào đều hiển thị là dấu (*)(<INPUT TYPE="password">)

radio Một nút bấm (<INPUT TYPE="radio">) reset Một nút reset(<INPUT TYPE="reset">)

select Một danh sách lựa chọn (<SELECT><OPTION>option1</OPTION> <OPTION>option2</OPTION></SELECT>)

submit Một nút submit (<INPUT TYPE="submit">) text Một trường text (<INPUT TYPE="text">)

textArea Một trường text cho phép nhập vàp nhiều dòng <TEXTAREA>default text</TEXTAREA>)

Mỗi phần tử có thể được đặt tên để JavaScript truy nhập đến chúng qua tên

Thuộc tính type

Trong mỗi phần tử của form đều có thuộc tính type, đó là một xâu chỉ định rõ kiểu của phần tử được đưa vào như nút bấm, một trường text hay một checkbox...

Xâu đó có thể là một trong các giá trị sau: o Text field: "text" o Radio button: "radio" o Checkbox: "checkbox" o Hidden field: "hidden" o Submit button: "submit" o Reset button: "reset" o Password field: "password" o Button: "button" o Select list: "select-one" o Multiple select lists: "select-multiple" o Textarea field: "textarea"



4.27.1 Phần tử button Trong một form HTML chuẩn, chỉ có hai nút bấm có sẵn là submit và reset bởi vị dữ liệu

trong form phải được gửi tới một vài địa chỉ URL (thường là CGI-BIN script) để xử lý và lưu trữ.

Một phần tử button được chỉ định rõ khi sử dụng thẻ INPUT: <input type="button" name="name" value= "buttonname">

Trong thẻ INPUT, name là tên của button, thuộc tính VALUE có chứa nhãn của button sẽ được hiển thị trên Navigator của browser.

Chỉ có một thẻ sự kiện duy nhất đối với button là onClick. Kết hợp với nó là cách thức duy nhất click. Phần tử button có khả năng mở rộng cho phép người lập trình JavaScript có thể viết được một đoạn mã lệnh JavaScript để thực thi việc thêm vào một nút bấm trong một script.

Trong ví dụ sau, thay vì sử dụng onChange, bạn có thể chỉnh sửa script để định giá biểu thức khi button được bấm.

Ví dụ: Định giá một form sử dụng phần tử button. <html> <head> <title>Button example</title> <script language="javascript">  </script> </head> <body> <form method=post> Enter a JavaScript mathematical expression: <input type="text" name="entry" value=""> <br> The result of this expression is: <input type="text" name="results" onfocus="this.blur();"> <br> <input type="button" value="calculate" onclick="calculate(this.form);"> </form> </body> </html>



4.27.2 Phần tử checkbox Các phần tử checkbox có khả năng bật tắt dùng để chọn hoặc không chọn một thông

tin. Các checkbox có nhiều thuộc tính và cách thức hơn button. Bảng dưới đây là danh sách các thuộc tính và các cách thức của phần tử checkbox.

Bảng các thuộc tính và cách thức của phần tử checkbox. Cách thức và thuộc tính Mô tả

checked Cho biết trạng thái hiện thời của checkbox (thuộc tính)

defaultChecked Cho biết trạng thái mặc định của phần tử (thuộc tính)

name Cho biết tên của phần tử được chỉ định trong thẻ INPUT (thuộc tính)

value Cho biết giá trị hiện thời của phần tử được chỉ định trong thẻ INPUT (thuộc tính)

click() Mô tả một click vào checkbox (Cách thức)

Phần tử checkbox chỉ có một thẻ sự kiện là onClick

Ví dụ: Tạo hộp checkbox để nhập vào một số rồi lựa chọn tính nhân đôi và bình phương:

<html> <head> <title>Checkbox example</title> <script>  </script> </head> <body> <form method=post> Value: <input type="text" name="entry" value=0 onchange="calculate(this.form,this.name);"> <br> Action (Default double): <input type=checkbox name=square onclick="calculate(this.form,this.name);"> Square<br> Result: <input type="text" name="result" value=0 onchange="calculate(this.form,this.name);"> </form> </body>



</html>

Trong script này, bạn đã thấy cách sử dụng thẻ sự kiện onClick cũng như thuộc tính

checked là một giá trị kiểu Boolean có thể dùng làm điều kiện trong câu lệnh if...else

Bạn có thể thêm một checkbox tên là square vào form. Nếu hộp này được check, chương trình sẽ lấy giá trị bình phương của nó, nếu không, một thực thi được mặc định sẽ nhân đôi giá trị của nó. Thẻ sự kiện onClick trong checkbox được định nghĩa:

<INPUT TYPE=checkbox NAME=square onClick= "calculate( this.form, this.name);">

Khi đó nếu người dùng thay đổi một câu lệnh khác, form sẽ được tính toán lại.

4.27.3 Phần tử File Upload Phần tử này cung cấp cho form một cách để người sử dụng có thể chỉ rõ một file đưa

vào form xử lý. Phần tử file Upload được chỉ định rõ trong JavaScript bằng đối tượng FileUpload.

Đối tượng chỉ có hai thuộc tính là name và value, cả hai đều là giá trị xâu như các đối tượng khác. Không có cách thức hay thẻ file cho đối tượng này.

4.27.4 Phần tử hidden Phần tử hidden là phần tử duy nhất trong số tất cả các phần tử của form không được

hiển thị trên Web browser. Trường hidden có thể sử dụng để lưu các giá trị cần thiết để gửi tới server song song với sự xuất ra từ form (form submission) nhưng nó không được hiển thị trên trang. Mọi người có thể sử dụng trong JavaScript để lưu các giá trị trong suốt một script và để tính toán không cần form.

Đối tượng hidden chỉ có hai thuộc tính là name và value, đó cũng là những giá trị xâu giống các đối tượng khác. Không có cách thức hay thẻ sự kiện nào cho đối tượng này.

4.27.5 Phần tử Password Đối tượng Password là đối tượng duy nhất trong các đối tượng của form mà khi gõ bất

kỳ ký tự nào vào cũng đều hiển thị dấu sao(*). Nó cho phép đưa vào những thông tin bí mật như đăng ký mật khẩu...

Đối tượng Password có 3 thuộc tính giống trường text là: defaultValue, name và value. Không giống với hai phần tử ở trên, trường Password có nhiều cách thức hơn(focus(), blur(), and select() ) và tương ứng với các thẻ sự kiện: onFocus, onBlur, and onSelect.



4.27.6 Phần tử radio Đối tượng radio gần giống sự bật tắt checkbox khi có hai nút radio kết hợp thành một

nhóm. Khi nhiều radio được kết hợp thành một nhóm, chỉ có một nút được chọn trong bất kỳ một thời điểm nào. Ví dụ dòng lệnh sau tạo ra một nhóm radio có ba nút tên là test:

<INPUT TYPE="radio" NAME="test" VALUE="1" chECKED>1<BR> <INPUT TYPE="radio" NAME="test" VALUE="2">2<BR> <INPUT TYPE="radio" NAME="test" VALUE="3">3<BR>

Nhóm các nút radio lại bằng cách đặt cho chúng có cùng một tên trong các thẻ INPUT.

Có một vài thuộc tính để kiểm tra trạng thái hiện thời của một nhóm nút radio. Bảng sau hiển thị các thuộc tính và cách thức của đối tượng radio.

Bảng các thuộc tính và cách thức của đối tượng radio. Thuộc tính và cách thức Mô tả

checked Mô tả trạng thái hiện thời của phần tử radio (thuộc tính)

defaultChecked Mô tả trạng thái mặc định của phần tử (thuộc tính)

index Mô tả thứ tự của nút radio được chọn hiện thời trong một nhóm

length Mô tả tổng số nút radio trong một nhóm

name Mô tả tên của phần tử được chỉ định trong thẻ INPUT (thuộc tính)

value

Mô tả giá trị hiện thời của phần tử được định ra trong thẻ INPUT (thuộc tính)

click() Mô phỏng một click trên nút radio (cách thức)

Cũng như checkbox, radio chỉ có một thẻ sự kiện là onClick.

Không có bất kỳ một đối tượng form nào có thuộc tính index và length. Do một nhóm radio gồm nhiều phần tử radio, nên chúng được đặt trong một mảng các nút radio và được đánh số từ 0. Trong ví dụ nhóm radio có tên test ở trên, nếu nhóm đó nằm trong một form có tên là "testform", bạn có thể gọi tới nút radio thứ hai bằng tên "testform.test[1]" và có thể kiểm tra giá trị của nó bằng "testform.test[1].checked"

Để minh hoạ rõ cách dùng đối tượng radio, ta xem ví dụ sau:

Ví dụ: <HTML> <HEAD> <TITLE>Radio button Example</TITLE> <SCRIPT>  </SCRIPT> </HEAD> <BODY> <FORM METHOD=POST> Value: <INPUT TYPE="text" NAME="entry" VALUE=0 onChange="calculate(this.form,this.name);"> <BR> Action:<BR> <INPUT TYPE="radio" NAME="action" VALUE="twice" onClick="calculate(this.form,this.name);"> Double<BR> <INPUT TYPE="radio" NAME="action" VALUE="square" onClick="calculate(this.form,this.name);"> Square <BR> Result: <INPUT TYPE=text NAME="result" VALUE=0 onChange="calculate(this.form,this.name);"> </FORM> </BODY> </HTML>

Trong ví dụ này, sự thay đổi từ checkbox ở trên là rất khó nhận biết. Thay cho một checkbox trong ví dụ trước, ở đây ta sử dụng hai nút radio với hai giá trị khác nhau: double và square

Như ta đã biết có thể truy nhập đến các nút radio qua một mảng, do đó hai nút này có thể truy nhập bằng action[0] và action[1]. Bằng cách này, bạn chỉ cần thay đổi tham chiếu đến hàm calculate() từ form.square.checked thành form.action[1].checked.

4.27.7 Phần tử reset Sử dụng đối tượng reset, bạn có thể tác động ngược lại để click vào nút Reset. Cũng

giống đối tượng button, đối tượng reset có hai thuộc tính là name và value, và một cách thức click(), một thẻ sự kiện onClick.

Hầu hết những người lập trình không sử dụng thẻ sự kiện onClick của nút reset để kiểm tra giá trị của nút này, đối tượng reset thường dùng để xoá form.

Ví dụ sau minh hoạ cách sử dụng nút reset để xoá các giá trị của form.

Ví dụ: <HTML> <HEAD> <TITLE>reset Example</TITLE> <SCRIPT LANGUAGE="JavaScript">  //SCRIPT> </HEAD> <BODY> <FORM METHOD=POST> <INPUT TYPE="text" NAME="value1"><BR> <INPUT TYPE="text" NAME="value2"><BR> <INPUT TYPE="reset" VALUE="Clear Form" onClick="clearForm(this.form);"> </FORM> </BODY> </HTML>



4.27.8 Phần tử select Danh sách lựa chọn trong các form HTML xuất hiện menu drop-down hoặc danh sách

cuộn được của các đối tượng có thể được lựa chọn. Các danh dách được xây dựng bằng cách sử dụng hai thẻ SELECT và OPTION. Ví dụ:

<SELECT NAME="test"> <OPTION SELECTED>1 <OPTION>2 <OPTION>3 </SELECT>

tạo ra ba thành phần của menu thả drop-down với ba lựa chọn 1,2 và 3. Sử dụng thuộc tính SIZE bạn có thể tạo ta một danh sách cuộn với số phần tử hiển thị ở lần thứ nhất. Để bật menu drop-down trong một menu cuộn với hai thành phần hiển thị, bạn có thể sử dụng như sau:

<SELECT NAME="test" SIZE=2> <OPTION SELECTED>1 <OPTION>2 <OPTION>3 </SELECT>

Trong cả hai ví dụ trên, người sử dụng chỉ có thể có một lựa chọn. Nếu sử dụng thuộc tính MULTIPLE, bạn có thể cho phép người sử dụng lựa chọn nhiều hơn một giá trị trong danh sách lựa chọn:

<SELECT NAME="test" SIZE=2 MULTIPLE> <OPTION SELECTED>1 <OPTION>2 <OPTION>3 </SELECT>

Danh sách lựa chọn trong JavaScript là đối tượng select. Đối tượng này tạo ra một vài thành phần tương tự các button và radio.

Với các thành phần lựa chọn, danh sách các lựa chọn được chứa trong một mảng được đánh số từ 0. Trong trường hợp này, mảng là một thuộc tính của đối tượng select gọi là options.

Cả việc lựa chọn các option và từng phần tử option riêng biệt đều có những thuộc tính. Bổ sung thêm vào mảng option, phần tử select có thuộc tính selectedIndex, có chứa số thứ tự của option được lựa chọn hiện thời.

Mỗi option trong danh sách lựa chọn đều có một vài thuộc tính: o DEFAULTSELECTED: cho biết option có được mặc định là lựa chọn trong thẻ

OPTION hay không. o INDEX: chứa giá trị số thứ tự của option hịên thời trong mảng option. o SELECTED: cho biết trạng thái hiện thời của option o TEXT: có chứa giá trị của dòng text hiển thị trên menu cho mỗi option, và thuộc

tính value mọi giá trị chỉ ra trong thẻ OPTION.

Đối tượng select không có các cách thức được định nghĩa sẵn. Tuy nhiên, đối tượng select có ba thẻ sự kiện, đó là onBlue, onFocus, onChange, chúng đều là những đối tượng text.

Ví dụ bạn có danh sách lựa chọn sau: <SELECT NAME="example" onFocus="react();"> <OPTION SELECTED VALUE="Number One">1 <OPTION VALUE="The Second">2 <OPTION VALUE="Three is It">3 </SELECT>



Khi lần đầu tiên hiển thị bạn có thể truy nhập tới các thông tin sau: example.options[1].value = "The Second" example.options[2].text = "3" example.selectedIndex = 0 example.options[0].defaultSelected = true example.options[1].selected = false

Nếu người sử dụng kích vào menu và lựa chọn option thứ hai, thì thẻ onFocus sẽ thực hiện, và khi đó giá trị của thuộc tính sẽ là:

example.options[1].value = "The Second" example.options[2].text = "3" example.selectedIndex = 1 example.options[0].defaultSelected = true example.options[1].selected = true

Sửa các danh sách lựa chọn

Navigator 3.0 cho phép thay đổi nội dung của danh sách lựa chọn từ JavaScript bằng cách liên kết các giá trị mới cho thuộc tính text của các thực thể trong danh sách.

Ví dụ, trong ví dụ trước, bạn đã tạo ra một danh sách lựa chọn như sau: <SELECT NAME="example" onFocus="react();"> <OPTION SELECTED VALUE="Number One">1 <OPTION VALUE="The Second">2 <OPTION VALUE="Three is It">3 </SELECT>

Có thể thay đổi được dòng text hiển thị trên nút thứ hai thành "two" bằng: example.options[1].text = "two";

Có thể thêm các lựa chọn mới vào danh sách bằng cách sử dụng đối tượng xây dựng Option() theo cú pháp:

newOptionName = new Option(optionText, optionValue, defaultSelected, selected); selectListName.options[index] = newOptionName;

Việc tạo đối tượng option() này với dòng text được chỉ trước, defaultSelected và selected như trên đã định ra những giá trị kiểu Boolean. Đối tượng này được liên kết vào danh sách lựa chọn được thực hiện bằng index.

Các lựa chọn có thể bị xoá trong danh sách lựa chọn bằng cách gắn giá trị null cho đối tượng muốn xoá

selectListName.options[index] = null;

4.27.9 Phần tử submit Nút Submit là một trường hợp đặc biệt của button, cũng như nút Reset. Nút này đưa

thông tin hiện tại từ các trường của form tới địa chỉ URL được chỉ ra trong thuộc tính ACTION của thẻ form sử dụng cách thức METHOD chỉ ra trong thẻ FORM.

Giống như đối tượng button và reset, đối tượng submit có sẵn thuộc tính name và value, cách thức click() và thẻ sự kiện onClick.

4.27.10 Phần tử Text Phần tử này nằm trong những phần tử hay được sử dụng nhất trong các form HTML.

Tương tự như trường Password, trường text cho phép nhập vào một dòng đơn, nhưng các ký tự của nó hiện ra bình thường.

Đối tượng text có ba thuộc tính:defautValue, name và value. Ba cách thức mô phỏng sự kiện của người sử dụng: focus(), blur() và select(). Có 4 thẻ sự kiện là: obBlur, onFocus, onChange, onSelect. Chú ý các sự kiện này chỉ thực hiện khi con trỏ đã được kích ra ngoài trường text.



Bảng sau mô tả các thuộc tính và cách thức của đối tượng text.

Bảng các thuộc tính và cách thức của đối tượng text. Cách thức và thuộc tính Mô tả

defaultValue Chỉ ra giá trị mặc định của phần tử được chỉ ra trong thẻ INPUT (thuộc tính)

name Tên của đối tượng được chỉ ra trong thẻ INPUT (thuộc tính)

value Giá trị hiện thời của phần tử (thuộc tính)

focus() Mô tả việc con trỏ tới trường text (cách thức) blur() Mô tả việc con trỏ rời trường text (cách thức)

select() Mô tả việc lựa chọn dòng text trong trường text (cách thức)

Một chú ý quan trọng là có thể gán giá trị cho trường text bằng cách liên kết các giá trị với thuộc tính value. Trong ví dụ sau đây, dòng text được đưa vào trường đầu tiên được lặp lại trong trường text thứ hai, và mọi dòng text được đưa vào trường text thứ hai lại được lặp lại trong trường texxt thứ nhất. Khả năng này của nó có thể áp dụng để tự động cập nhật hoặc thay đổi dữ liệu.

Ví dụ. Tự động cập nhật các trường text . <HTML> <HEAD> <TITLE>text Example</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE=text NAME="first" onChange="echo(this.form,this.name);"> <INPUT TYPE=text NAME="second" onChange="echo(this.form,this.name);"> </FORM> </BODY> </HTML>

4.27.11 Phần tử Textarea Thẻ TEXTAREA cung cấp một hộp cho phép nhập số dòng text do người thiết kế định

trước. Ví dụ: <TEXTAREA NAME="fieldName" ROWS=10 COLS=25> Default Text Here </TEXTAREA>

ví dụ này tạo ra một trường text cho phép đưa vào 10 hàng ,mỗi hàng 25 ký tự. Dòng "Defautl Text Here"sẽ xuất hiện trong trường này vào lần hiển thị đầu tiên.

Cũng như phần tử text , JavaScript cung cấp cho bạn các thuộc tính defaultValue, name, và value, các cách thức focus(), select(), và blur(), các thẻ sự kiện onBlur, onForcus, onChange, onSelect.



4.27.12 Mảng elements[] Các đối tượng của form có thể được gọi tới bằng mảng elements[]. Ví dụ bạn tạo ra một

form sau: <FORM METHOD=POST NAME=testform> <INPUT TYPE="text" NAME="one"> <INPUT TYPE="text" NAME="two"> <INPUT TYPE="text" NAME="three"> </FORM>

bạn có thể gọi tới ba thành phần này như sau: document.elements[0], document.elements[1], document.elements[2], hơn nữa còn có thể gọi document.testform.one, document.testform.two,

document.testform.three.

Thuộc tính này thường được sử dụng trong các mối quan hệ tuần tự của các phần tử hơn là dùng tên của chúng.

4.27.13 Mảng form[] Các thẻ sự kiện được thiết kế để làm việc với các form riêng biệt hoặc các trường ở

một thời điểm, nó rất hữu dụng để cho phép gọi tới các form có liên quan trong cùng một trang.

Mảng form[] đề cập đến ở đây có thể có nhiều xác định các nhân của form trên cùng một trang. Có thể gọi bằng document.forms[] thay vì gọi bằng tên form. Trong script này, bạn có hai trường text để nhập và nằm trên hai form độc lập với nhau. Sử dụng mảng form bạn có thể tương tác trên các giá trị của các trường trong hai form cùng một lúc khi người sử dụng thay đổi giá trị trên một form.

<HTML> <HEAD> <TITLE>forms[] Example</TITLE> </HEAD> <BODY> <FORM METHOD=POST> <INPUT TYPE=text onChange="document.forms[1].elements[0].value = this.value;"> </FORM> <FORM METHOD=POST> <INPUT TYPE=text onChange="document.forms[0].elements[0].value = this.value;"> </FORM> </BODY> </HTML>

Mặt khác, bạn cũng có thể truy nhập đến form bằng tên form được đặt trong thẻ FORM: <FORM METHOD=POST NAME="name">

Khi đó bạn có thể gọi là document.forms["name"] hoặc document.name

4.28 Xem lại các lệnh và mở rộng Lệnh/ Mở rộng Kiểu Mô tả blur() cách thức JavaScript Mô tả việc dịch chuyển con trỏ từ một phần

tử form.action cách thức JavaScript Xâu chứa giá trị của thuộc tính ACTION

trong thẻ FORM form.elemrnts thuộc tính JavaScript mảng chứa danh sách các phần tử trong

form (như checkbox, trường text, danh



sách lựa chọn) form.encoding thuộc tính JavaScript xâu chứa kiểu MIME sử dụng khi chuyển

thông tin từ form tới server form.name thuộc tính JavaScript Xâu chứa giá trị thuộc tính NAME trong thẻ

FORM form.target thuộc tính JavaScript Xâu chứa tên cửa sổ đích bởi một form

submition form.submit cách thức JavaScript Mô tả việc submit một form HTML type thuộc tính JavaScript ánh xạ kiểu của một phần tử form thành

một xâu. onSubmit Thẻ sự kiện thẻ sự kiện cho việc submit button thuộc tính HTML Thuộc tính kiểu cho các nút bấm của HTML

(<INPUT TYPE=button>) checkbox thuộc tính HTML Thuộc tính kiểu cho các checkbox của

HTML (<INPUT TYPE=checkbox>) pasword thuộc tính HTML Thuộc tính kiểu cho các dòng pasword của

HTML(<INPUT TYPE=password>) radio thuộc tính HTML Thuộc tính kiểu cho các nút radio của

HTML (<INPUT TYPE=radio>) reset thuộc tính HTML Thuộc tính kiểu cho các nút reset của

HTML (<INPUT TYPE=reset>) SELECT thẻ HTML Hộp thẻ cho danh sách lựa chọn OPTION thẻ HTML chỉ ra các lựa chọn trong danh sách lựa

chọn(<SELECT><OPTION>Option 1<OPTION>Option 2</SELECT>)

submit thuộc tính HTML Thuộc tính kiểu của nút submit (<INPUT TYPE=submit>)

text thuộc tính HTML Thuộc tính kiểu của trường trong form (<INPUT TYPE=text>)

TEXTAREA Thẻ HTML Hộp thẻ cho nhiều dòng text (<TEXTAREA> defautl text </TEXTAREA>)

name thuộc tính JavaScript Xâu chứa tên phần tử HTML (button, checkbox, password...)

value thuộc tính JavaScript Xâu chứa giá trị hiên thời của một phần tử HTML(button, checkbox, password...)

click() cách thức JavaScript Mô tả việc kích vào một phần tử trên form (button, checkbox,password)

onClick thuộc tính JavaScript Thẻ sự kiện cho sự kiện kích (button, checkbox, radio button, reset, selection list, submit)

checked thuộc tính JavaScript Giá trị kiểu Boolean mô tả một lựa chọn check(checkbox, radio button)

defaultChecked thuộc tính JavaScript Xâu chứa giá trị mặc định của một phần tử HTML (password, text, textarea)

focus() cách thức JavaScript Mô tả việc con trỏ tới một phần tử (password, text, textarea)

blur() cách thức JavaScript Mô tả việc con trỏ rời khỏi một phần tử (password, text, textarea)

select() cách thức JavaScript Mô tả việc lựa chọn dòng text trong một trường (password, text, textarea)

onFocus() Thẻ sự kiện Thẻ sự kiện cho sự kiện focus(password, selection list, text, textarea)

onBlur Thẻ sự kiện Thẻ sự kiện cho sự kiện blur (password, selection list, text, textarea)



onChange Thẻ sự kiện Thẻ sự kiện cho sự kiện khi giá trị của trường thay đổi (password, selection list, text, textarea)

onSelect Thẻ sự kiện Thẻ sự kiện khi người sử dụng chọn dòng text trong một trường (password, text, textarea)

index thuộc tính JavaScript Là một số nguyên mô tả lựa chọn hiện thời trong một nhóm lựa chọn (radio button)

length thuộc tính JavaScript Số nguyên mô tả tổng số các lựa chọn trong một nhóm các lựa chọn (radio button)

dafautlSelected thuộc tính JavaScript Giá trị Boolean mô tả khi có một lựa chọn được đặt là mặc định (seledtion list)

options thuộc tính JavaScript Mảng các lựa chọn trong danh sách lựa chọn

text thuộc tính JavaScript Dòng text hiển thị cho một thành phần của menu trong danh sách lựa chọn

TABLE thẻ HTML Hộp thẻ cho các bảng HTML TR thẻ HTML Hộp thẻ cho các hàng của một bảng HTML TD thẻ HTML Hộp thẻ cho các ô của một hàng trong một

bảng HTML COLSPAN thuộc tính HTML Là thuộc tính của thẻ TD mô tả trong một ô

của bảng có nhiều cột ROWSPAN thuộc tính HTML Là thuộc tính của thẻ TD mô tả trong một ô

của bảng có nhiều hàng BODER thuộc tính HTML Là thuộc tính của thẻ TABLE mô tả độ rộng

đường viền của bảng document.forms[] thuộc tính JavaScript mảng của các đối tượng form với một danh

sách các form trong một document string.substring() cách thức JavaScript Trả lại một xâu con của xâu string từ tham

số vị trí ký tự đầu đến vị trí ký tự cuối Math.floor() cách thức JavaScript Trả lại một giá trị nguyên tiếp theo nhỏ hơn

giá trị của tham số đưa vào. string.length thuộc tính JavaScript Giá trị nguyên của số thứ tự ký tự cuối

cùng trong xâu string



CHƯƠNG 5: KỊCH BẢN TRÌNH CHỦ

5.1 Giới thiệu ngôn ngữ lập trình web động Các website thuở ban đầu chỉ bao gồm các trang web tĩnh dưới dạng các file HTML, tất

cả những gì cần hiển thị trên trang web thì người thiết kế phải tạo sẵn trên trang đó. Các trang web tĩnh có đuôi là .htm hoặc .html

Chẳng hạn muốn tạo một trang web có hiển thị chữ “Hello” với màu chữ đỏ người ta viết file index.html với nội dung như sau:

<html> <head> <title>index</title> </head> <body> <p><font color="red">Hello</font></p> </body> </html>

Trang web sau đó sẽ được lưu trên Web Server. Khi người dùng muốn xem trang web này họ sẽ dùng trình duyệt gửi một yêu cầu đến server bằng cách gõ vào địa chỉ URL, ví dụ : http://localhost/index.html

Lúc này Web Server nhận được yêu cầu sẽ tìm trong kho dữ liệu của nó trang web index.html tương ứng rồi gửi về cho client, sau đó trang web này sẽ được hiển thị ra bởi trình duyệt. Đó là cách hoạt động của web tĩnh.

Cách hoạt động của web tĩnh

Trang web tĩnh tuy rất tiện lợi nhưng không thể đáp ứng được mọi nhu cầu của ứng dụng web, đặc biệt là những yêu cầu tương tác giữa client và web server. Có nhiều tình huống mà nội dung trang web không phải lúc nào cũng có thể soạn thảo và lưu trữ sẵn được mà đôi khi nó cần được sinh ra một cách tự động tùy thuộc vào ngữ cảnh; hoặc có những xử lý phức tạp hơn việc server chỉ đơn giản trả về trang html khi nhận được yêu cầu từ người dùng, ví dụ như phải thu thập thông tin mà người dùng gửi lên qua URL hay form, hoặc truy cập dữ liệu trong database.

Lấy ví dụ nếu chúng ta muốn xây dựng một trang web Login.htm yêu cầu người sử dụng nhập tên username, sau khi submit web server sẽ gửi về người dùng trang web Result.html có nội dung : Welcome username!

Dễ dàng thấy rằng trang Result.htm không thể soạn thảo sẵn được vì ứng với mỗi username mà người dùng nhập vào, trang này có nội dung khác nhau.



Trang Result.html có nội dung khác nhau tùy vào tương tác giữa client và webserver.

Nó không thể soạn thảo sẵn!

Nghĩa là các trang web tĩnh không có khả năng tương tác với người dùng. Trong thực tế có rất nhiều trường hợp chúng ta thường gặp trong thế giới web đòi hỏi sự tương tác mà web tĩnh không thể giải quyết được ( chat, forums, web mail, trang tin tức, giỏ hàng, thông tin thời tiết từng ngày, tỷ giá ngoại tệ hàng ngày)

Để giải quyết vấn đề này người ta sử dụng các ngôn ngữ lập trình web để hỗ trợ sự tương tác giữa client và server. Chúng là những file có chứa các mã lập trình, có thể tạo ra các trang web động, cho phép trả về cho client trang web có nội dung có thể thay đổi một cách linh động ứng với những ngữ cảnh cụ thể, thu thập và phản hồi với thông tin mà người dùng gửi lên server (thông qua form hay URL), truy cập dữ liệu trong database...

Một số ngôn ngữ lập trình web động phổ biến gồm ASP, PHP, Java, .net ... ASP (Active Server Pages) là ngôn ngữ lập trình web được viết bởi hãng Microsoft, rất phổ biến trên hệ điều hành Microsoft Windows. Các trang web viết bằng ngôn ngữ này có phần mở rộng là .asp (ví dụ HelloWorld.asp) thay vì .htm hay .html. Nội dung file ASP về cơ bản rất giống file Html bình thường, nó bao gồm các cú pháp html trộn lẫn các mã lập trình ASP (còn gọi là các script, được viết bằng VBScript hay JavaScript). Các Script trong ASP thực thi trên server.

Có thể nói trang ASP là sự kết hợp các thẻ html, các script và các ActiveX Component. Script có thể trộn lẫn giữa các thẻ html và nằm trong cặp dấu <% %>

5.2 Cài đặt và chạy ứng dụng ASP Để bắt đầu chạy một website viết bằng ngôn ngữ ASP đầu tiên chúng ta thực hiện các

bước sau: o Cài đặt web server IIS và khởi động IIS o Cấu hình cho website bằng cách tạo Virtual Directory trên Web Server o Viết các file ASP và lưu vào thư mục đã được cấu hình cho website trên server o Dùng trình duyệt (như Internet Explorer) trên client yêu cầu file ASP và hiển thị

kết quả trả về.



5.2.1 Web Server IIS Thông thường người ta dùng ASP với Web Server có tên là Internet Information

Services (IIS) của Microsoft. Đây là thành phần có sẵn trong hệ điều hành Windows 2000 hoặc XP.

Nếu máy tính chưa cài đặt thì chúng ta có thể vào Control Panel Add/remove programs Add/remove Windows Components Internet Information Services (IIS) và chọn cài đặt thành phần này. Sử dụng đĩa cài Windows để cài đặt.

Sau khi cài đặt, bạn hãy kiểm tra kết quả. Bật trình duyệt web lên và gõ vào địa chỉ:

http://localhost

http://localhost/



5.2.2 Cấu hình cho Website trên IIS Sau khi khởi động IIS mặc định web server sẽ phục vụ ở địa chỉ http://localhost (địa chỉ

trên máy local, cũng giống như một địa chỉ website kiểu như http://www.yahoo.com trên Internet). Chúng ta tạo một thư mục ảo (Virtual Directory) trên web server để chứa ứng dụng web, ví dụ http://localhost/test , ở đây “test” còn được gọi là Alias của Virtual Directory này. Vậy để lưu trữ các trang ASP trên server trước hết ta sẽ tạo một Virtual Directory với một Alias và thư mục tương ứng rồi upload các file ASP vào thư mục này, sau đó truy cập các trang ASP này thông qua địa chỉ http://localhost/Alias

Cách tạo một Virtual Directory trong IIS:

Trước hết bạn phải có một thư mục chứa tất các các files của ứng dụng web của bạn (file html, asp, js, … ), chẳng hạn thư mục ASP như hình:

Chúng ta sẽ tạo một thư mục ảo có alias là “ex” tương ứng với thư mục “ASP” này.

Vào Web Server từ Control Panel Administrative Tools Internet Information Services

Chú ý: nếu Default Website chưa khởi động thì bật nút start trên thanh công cụ.

Chọn Default Web Site New Virtual Directory



Thực hiện theo wizard, chọn các tham số Alias: tên Virtual Directory của bạn, ví dụ “ex”, Directory: thư mục chứa Website ví dụ “C:\c2\Examples\ASP”)

Kết quả như sau:

Sau khi kết thúc wizard này chúng ta đã có một Virtual Directory sẵn sàng trên web server. Hãy lưu các trang asp vào thư mục “C:\c2\Examples\ASP” (hoặc tương ứng với thư mục trên máy của bạn). Địa chỉ truy cập vào website trong trường hợp này sẽ là: http://localhost/ex/

Một cách khác cũng tương tự và dễ thao tác hơn là nhấn chuột phải vào thư mục “C:\c2\Examples\ASP”, chọn Properties Web sharing Share this folder Add Alias.



5.2.3 Viết các file ASP Script được viết trong cặp thẻ<% %>, bắt đầu bằng thẻ mở <% và kết thúc bằng thẻ

đóng %>

Chúng ta có thể soạn trang ASP bằng bất cứ chương trình soạn thảo nào như notepad, Frontpage, Dreamweaver... Ví dụ, tạo 1 file Hello.asp để hiển thị lời chào Hello ra màn hình, lưu vào thư mục “C:\c2\Examples\ASP”

<html> <head> <title>First ex</title> </head> <body> <% response.write "Hello!" ‘Hiển thị lời chào Hello %> </body> </html>

Câu lệnh response.write sẽ cho phép hiển thị một chuỗi ra trang web. Chú thích trong lập trình ASP được viết sau dấu nháy đơn ‘

Mã lập trình ASP <%response.write "Hello!" %> được viết trộn lẫn giữa các thẻ HTML.

5.2.4 Dùng trình duyệt truy cập website Mở trình duyệt (ví dụ Internet Explorer), trên thanh địa chỉ gõ địa chỉ sau đây để truy cập

vào trang Asp ta đã tạo ra: http://localhost/ex/Hello.asp

Lưu ý: trang asp phải chạy trên web server chứ không thể mở trực tiếp với browser như các trang html.



Webserver xử lý như thế nào khi người dùng yêu cầu một trang ASP: Không giống như html, khi người dùng yêu cầu 1 trang html, web server sẽ tìm trong kho dữ liệu và trả về file html đó để browser hiển thị lại phía client. Khi người dùng yêu cầu 1 trang Asp, IIS server sẽ chuyển trang ASP đó cho một bộ phận xử lý gọi là ASP engine. Engine sẽ đọc mã nguồn file asp theo từng dòng, thực thi các script trong file. Cuối cùng file ASP được trả về cho người dùng dưới dạng một trang html thuần túy (không còn mã script) giống như trang web tĩnh. Nếu chúng ta xem lại mã nguồn của trang này trên browser thì có thể thấy những đoạn code asp trong file đã được dịch thành các dữ liệu html bình thường.

ASP engine xử lý file asp trước khi trả về cho browser

Trang ASP sau khi thực thi trả về cho client dưới dạng 1 trang web tĩnh. Browser không xem được mã nguồn của trang ASP. Vào View Source trên trình duyệt để xem mã

Bây giờ chúng ta quay lại bài toán Login ở trên. Ta có thể soạn thảo một trang Login.html và một trang Result.asp như sau:

Login.html <html> <head> <title>Login</title> </head> <body> <form method="POST" action="Result.asp"> <p>Username: <input type="text" name="username" ></p> <p><input type="submit" value="Submit" name="submit"></p> </form> </body> </html>



Result.asp <html> <head> <title>Result</title> </head> <body> <% dim x x=request.form("username") 'biến x nhận lại giá trị username từ form login response.write "Hello " & x 'hiển thị nội dung tùy theo giá trị nhận được ‘do người dùng điền vào form %> </body> </html>

5.3 Tóm tắt các cú pháp VBScript Mã lệnh ASP có thể viết bằng VBScript hoặc JavaScript. Các script của ASP thực thi

trên server và nằm trong cặp dấu <% %>. Bên trong có thể chứa các biểu thức, hàm, toán tử, lệnh hợp lệ của ngôn ngữ Script tương ứng. Ở đây chúng ta tìm hiểu vắn tắt cách sử dụng ASP để lập trình web động bằng VBScript.

5.3.1 Response.write Để gửi nội dung về cho trình duyệt ta dùng lệnh Response.write

<%response.write “Hello World!”%>

hoặc có thể viết ngắn gọn hơn <%=“Hello World!”%>

5.3.2 Biến Biến dùng để lưu trữ thông tin. Biến có phạm vi cục bộ, nếu nó được khai báo bên trong

1 hàm hay thủ tục thì nó chỉ có tác dụng trong hàm hay thủ tục đó, nếu nó khai báo trong phạm vi toàn trang ASP thì tác dụng của nó sẽ có phạm vi trong toàn trang ASP, tuy nhiên không có tác dụng trong trang ASP khác.

Ví dụ ở trang Hello.asp ta có một biến x có giá trị là 3, trang Index.asp ta dùng lệnh <%response.write x %> thì sẽ không ra kết qủa là 3 vì biến x của trang Hello.asp không được hiểu trong trang Index.asp.

Tương tự như vậy khi một biến được khai báo trong 1 hàm, sẽ không có tác dụng ở bên ngoài hàm đó.

Biến được khai báo và sử dụng bên trong trang asp nào dùng nó. <%

Dim x ‘khai báo biến, không bắt buộc x=3 Response.write x

%>

Biến không bắt buộc phải khai báo.

Trong asp không khai báo kiểu của biến. Asp sẽ căn cứ vào việc sử dụng biến mà quyết định xem nên xử lý biến đó như là kiểu gì.

Để có thể kiểm soát chính xác một biến theo kiểu mình mong muốn, chúng ta dùng các hàm chuyển đổi kiểu.



Đểđịnh nghĩa một biến có phạm vi sử dụng trong nhiều trang ASP của ứng dụng Web, ta dùng biến session và application (xem đối tượng session và application)

5.3.3 Mảng Mảng dùng để lưu trữ dữ liệu theo một dãy các phần tử.

<% dim y(5) ‘khai báo mảng 6 phần tử đánh chỉ số từ 0 đến 5 y(0)=2 y(1)=13 response.write y(0) response.write y(1)

%>

Với VBScript, chúng ta không sử dụng dấu chấm phẩy ; sau mỗi câu lệnh như trong JavaScript

5.3.4 Ghép chuỗi Để ghép các chuỗi với nhau ta dùng dấu &

<% Dim a, b a = ”Đà ” b = ”Nẵng” Response.write a & b

%>

5.3.5 Hàm có sẵn VBScript hỗ trợ sẵn một số hàm cơ bản. Ví dụ hàm “now” sau đây sẽ trả về thời gian

trên server <%response.write now%>

5.3.6 Các hàm chuyển đổi kiểu Các hàm này cho phép chuyển đổi kiểu dữ liệu

Cdate: Chuyển sang kiểu ngày tháng <%

Dim a, b a=”22/1/2004” ‘a đang được hiểu là một chuỗi b=Cdate(a) ‘chuyển chuỗi a sang đúng kiểu ngày tháng %>

Cint: Chuyển sang kiểu Integer <%

Dim a,b a=”3” b=cint(a)

%>

Cstr: Chuyển sang kiểu string <%

Dim a,b a=3 b=Cstr(a)

%>

Các hàm tương tự khác : Cbyte, Cdbl,CSng, Cbool, Ccur,

5.3.7 Các hàm format Các hàm này cho phép định dạng dữ liệu



o FormatDateTime o FormatCurrency o FormatNumber o FormatPercent

5.3.8 Các hàm toán học Int: lấy phần nguyên của một số

<% Dim x=14.9 y=Int(x) ‘kết quả y=14

%>

Các hàm khác : Abs, Atn, Cos, Exp, Fix, Hex, Log, Oct, Rnd, Randomize, Round, Sin, Sqr, Tan

5.3.9 Các hàm thao tác với chuỗi Len: Lấy chiều dài chuỗi

<% dim a,b a = ”Đà Nẵng” b = len(a) response.write b ‘In kết quả là 7

%>

Ucase, Lcase: Chuyển chữ hoa thành chữ thường và ngược lại <%

dim a,b,c,d a=”hello” b=Ucase(a) ‘b=”HELLO” c=”GOODBYE” d=Lcase(c) ‘d=”goodbye”

%>

Ltrim, Rtrim, Trim: cắt bỏ các khoảng trắng thừa <% dim a,b,c,d,e,f a=” Hello” b=Ltrim(a) ‘cắt bỏ hết các khoảng trắng bên trái c=”Hello ” d=Rtrim(a) ‘cắt bỏ hết các khoảng trắng bên phải e=” Hello world ” f=Trim(a) ‘cắt bỏ hết các khoảng trắng thừa 2 bên và ở giữa %>

Left, Mid, Right: Lấy một chuỗi con trong chuỗi lớn <% Dim a,b,c,d a=”Hello World” b=left(a,5) ‘lấy 5 ký tự bên trái của a, kết quả b=”Hello” c=right(a,5) ‘lấy 5 ký tự bên phải của a, kết quả c=”World” d=mid(a,7,1) ‘lấy 1 ký tự của a từ vị trí thứ 7, kết quả d=”W” %>

Các hàm khác: Space, String, StrReverse, StrComp, InStr, Replace, Split, join

5.3.10 Các hàm ngày tháng Date, Time, Now: Lấy ngày, giờ hiện hành trên server

<% Response.write “Hom nay la ngay: ” & Date & “<br>”



‘Date trả về ngày hiện hành Response.write “Bay gio la ” & Time & “<br>” ‘Time trả về giờ hiện hành Response.write Now & “<br>” ‘Now trả về ngày và giờ hiện hành %>

Các hàm khác: DateAdd, DateDiff, DatePart, Year, Month, Day, Weekday, Hour, Minute, Second

5.3.11 Các hàm kiểm tra Các hàm này cho phép kiểm tra kiểu của biến và biểu thức

Isdate: Kiểm tra có phải đúng kiểu ngày tháng không <%

Dim a a=”14/14/2008” If Isdate(a) then Response.write “a đúng là kiểu ngày tháng” Else Response.write “a không là kiểu ngày tháng” End if

%>

IsNumeric: Kiểm tra có phải đúng kiểu số không <%

Dim a a=”13” If IsNumeric(a) then Response.write “a đúng là kiểu số” End if

%>

Các hàm khác: IsArray, IsEmpty, IsNull, IsObject

5.3.12 Cấu trúc điều kiện if Cú pháp:

<% If <Điều kiện> then <Các câu lệnh sẽ được thực hiện

nếu điều kiện là đúng> End if %>

Hoặc: <%



If <Điều kiện> then <Các câu lệnh sẽ được thực hiện nếu điều kiện là đúng> Else <Các câu lệnh sẽ được thực hiện

nếu điều kiện là sai> End if %>

Ví dụ: <%

h=hour(now) Response.write “Bây giờ là “ & now & "<br>" Response.write “h = “ & h & "<br>" If h > 12 then Response.write “Good Afternoon!” Else Response.write “Good Morning!” End if

%>

5.3.13 Cấu trúc lựa chọn select Cấu trúc lựa chọn thường được sử dụng trong trường hợp có nhiều hơn 2 lựa chọn

Cú pháp: <% Select Case <tenbien> Case <gia tri 1> <Nhóm lệnh 1> Case <gia tri 2> <Nhóm lệnh 2> ……………… Case <gia tri n> <Nhóm lệnh n>

Case Else <Nhóm lệnh n+1> End select %>

Ví dụ: <html> <head> <title>First ex</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <%



Response.write "Bây giờ là " & now & "<br>" Response.write "Weekday(now) = " & Weekday(now) & "<br>" Response.write "Hôm nay là " Select case Weekday(now) Case 1: Response.write "Chủ Nhật" Case 2: Response.write "Thứ Hai" Case 3: Response.write "Thứ Ba" Case 4: Response.write "Thứ Tư" Case 5: Response.write "Thứ Năm" Case 6: Response.write "Thứ Sáu" Case 7: Response.write "Thứ Bảy" End Select %> </body> </html>

5.3.14 Cấu trúc lặp tuần tự For … Next Sử dụng cấu trúc lặp For … Next nếu vòng lặp có số lần lặp xác định

Cấu trúc: <% FOR <tenbien>=<giatridau> TO <Giatribien> STEP <Buoc nhay> NEXT %>

Có thể bỏ qua phần xác định bước nhảy STEP, khi đó vòng lặp mặc định hiểu bước nhảy là 1.

Ví dụ: <html> <head> <title>For - Next</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <% For i = 1 to 7 Response.write "<font size=" & i & ">Dòng thứ " & i

& "</font><br>" Next %> </body> </html>



Hoặc:

<html> <head> <title>For - Next</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <% For i = 1 to 7 %> <font size=<%=i%> >Dòng thứ <%=i%></font><br> <% Next %> </body> </html>

cũng cho kết quả tương tự. Bạn hãy linh động khi chèn các mã ASP vào trang HTML.

5.3.15 Cấu trúc lặp DO WHILE….LOOP Cú pháp:

<% Do while <Dieukien> <Các cau lenh> Loop %>

5.3.16 Cấu trúc lặp WHILE….WEND Cú pháp:

<% While <Dieukien> <Các cau lenh> Wend %>

5.3.17 Cấu trúc lặp DO….LOOP UNTIL Cú pháp:

<% DO



<Các câu lệnh> Loop until <Điều kiện> %>

5.3.18 Điều kiện and ,or, not <%

h=hour(now) If (h >12) and (h<18) then Response.write “Afternoon” End if

%>

5.3.19 Thủ tục và hàm người dùng Cũng như các ngôn ngữ lập trình khác, VBScript cho phép người dùng định nghĩa và

sử dụng các thủ tục, hàm. Nhờ vậy chương trình có thể chia thành các module nhỏ tạo nên cấu trúc lập trình sáng sủa (phương pháp chia để trị). Chẳng hạn với một bài toán ASP cần thực hiện việc hiển thị dữ liệu từ Database ra màn hình, ta có thể xây dựng các thủ tục hay hàm thực hiện từng nhiệm vụ đó:

o Thủ tục KetNoi o Thủ tục HienThi o Thủ tục HuyKetNoi

Như vậy phần chương trình chính sẽ rất sáng sủa, chúng ta chỉ việc gọi 3 thủ tục:

<% KetNoi HienThi HuyKetNoi

%>

5.3.20 Thủ tục Thủ tục thực hiện một nhóm các câu lệnh. Để viết một thủ tục chúng ta theo cấu trúc

sau: <%

Sub TenThuTuc(Tham so) ‘ Phần thân của thủ tục End Sub

%>

Ví dụ sau đây xây dựng chương trình đăng nhập gồm 2 file: Form.asp (hiển thị form để người dùng nhập username và password), Xulyform.asp (xử lý form, nếu username=”test” và password=”test” thì thông báo đăng nhập thành công, nếu không thì thông báo đăng nhập thất bại). File Xulyform.asp sẽ viết thủ tục và gọi thủ tục này:

Form.asp <html> <body> <form method="post" action="xulyform.asp"> <input type="text" name="user"> <input type="password" name="pass"> <input type="submit" name="submit"> </form> </body> </html>

Xulyform.asp <%



Sub CheckUser(username,password) if (username<>"test") or (password <> "test") then response.write "Dang nhap that bai!"

else response.write "Dang nhap thanh cong!" end if End Sub

%> <%

dim a, b a=request.form("user") b=request.form("pass") CheckUser a,b ‘gọi thủ tục %>

5.3.21 Hàm Hàm khác với thủ tục là nó trả về một kết quả. Để viết một hàm chúng ta viết theo cấu

trúc sau: <%

Function TenFunction(tham so) ‘ Phần nội dung của hàm End Function

%>

Chú ý trong nội dung của hàm bao giờ cũng phải có một lệnh trả về kết quả:

TenFunction=<Kết quả trả về>

Với bài toán đăng nhập ở trên chúng ta có thể viết lại như sau (file xulyform.asp dùng hàm)

Form.asp <html> <body> <form method="post" action="xulyform.asp"> <input type="text" name="user"> <input type="password" name="pass"> <input type="submit" name="submit"> </form> </body> </html>

Xulyform.asp <%

Function CheckUser(username,password) if (username<>"test") or (password <> "test") then CheckUser="False" else CheckUser="True" end if End Function

%> <% dim a a=CheckUser(request.form("user"),request.form("pass")) ‘ gọi hàm

if a="True" then response.write "Dang nhap thanh cong" else response.write "Dang nhap that bai" end if



%>

5.3.22 Sử dụng #include Trong trường hợp muốn trộn mã nguồn từ 1 file asp vào 1 file asp khác trước khi server

thực thi nó, người ta dùng thẻ định hướng #include với cú pháp 

Một số ứng dụng của #include như người ta thường include file chứa các hàm thư viện dùng chung cho cả ứng dụng vào đầu file Asp nào cần sử dụng thư viện này, hoặc insert các file Header và Footer cho 1 trang web, insert các thành phần được sử dụng chung trong nhiều file asp như menu,... Ví dụ trong ứng dụng ASP có nhiều trang cần thao tác với database, chúng ta sẽ viết riêng module thao tác với database ra một file myConnection.asp, rồi include file này vào trang asp nào muốn thao tác với database

 <% ‘ mã nguồn %>

Lưu ý là include file được thực hiện trước khi script chạy. Vì vậy đoạn lệnh sau đây là không hợp lệ:

<% filename=”myConnection.asp”%> 

5.4 Các đối tượng căn bản Đối tượng là một nhóm các hàm và biến. Một số đối tượng đã được xây dựng sẵn và có

thể sử dụng ngay mà không cần khởi tạo: Request, Response, Session, Application, Server. Một số đối tượng cần khởi tạo nếu muốn sửdụng như: Dictionary, Connection, Recordset...

5.4.1 Đối tượng Request Request và Response là 2 đối tượng được dùng nhiều nhất trong lập trình ASP, dùng

trao đổi dữ liệu giữa trình duyệt và server. Request cho phép lấy về các thông tin từ client. Khi browser gửi một yêu cầu trang web lên server ta gọi là 1 request.

Chúng ta thường sử dụng các lệnh request sau:

5.4.2 Request.QueryString Cho phép server lấy về các giá trị được gửi từ người dùng qua URL hoặc form (khi sử

dụng method GET). Ví dụ: ở trang home.asp chúng ta đặt một dòng liên kết sang trang gioithieu.asp với thẻ sau:

<a href=”gioithieu.asp?tacgia=Tran Van A”> Nhấn vào đây để sang trang giới thiệu</a>

biến “tacgia” có giá trị là “Tran Van A” được người dùng gửi tới server kèm theo URL. (người dùng có thể gõ thẳng địa chỉ “http://localhost/alias/gioithieu.asp?tacgia=Tran Van A” trên thanh Address của trình duyệt). Server muốn nhận lại giá trị này thì dùng request.QueryString ở trang gioithieu.asp

<% dim a a=request.querystring(“tacgia”) ‘lúc này a có gía trị là “Tran Van A” response.write “Tác giả của trang home.asp là: ” & a %>

Tương tự như vậy nếu người dùng gửi giá trị Tran Van A thông qua một biến trong form và chọn method GET

<form method=”get” action =”gioithieu.asp”> <input type=”text” name=”tacgia” value=”Tran Van A”> <input type=”submit” name=”submit”



value=”Nhan vao day de sang trang gioi thieu”> </form>

5.4.3 Request.Form Cho phép server lấy về các giá trị được gửi từ người dùng qua form (method POST).

Xem lại sự khác nhau giữa method=GET và method=POST

Chẳng hạn file form.asp: <form method=”POST” action =”xulyform.asp”> <input type=”text” name=”User”> <input type=”submit” name=”submit” value=”Nhan vao day de sang trang gioi thieu”> </form>

File xulyform.asp làm nhiệm vụ xử lý thông tin từ Form này sẽ dùng câu lệnh request.form để nhận lại thông tin người dùng đã gõ vào:

<% Dim x

x=Request.form(“User”) response.write “Tên người dùng là: ” & x

%>

5.4.4 Response Đối tượng Response dùng để gửi các đáp ứng của server cho client. Chúng ta thường

dùng một số lệnh Response sau:

5.4.5 Response.Write Đưa thông tin ra màn hình trang web.

Ví dụ: để đưa câu chào Hello ra màn hình ta dùng lệnh sau: <% response.write “Hello” %>

Hiển thị thời gian trên server ra màn hình: <% response.write now %>

hoặc <%=now%>

now là hàm lấy ngày giờ hệ thống trên server

5.4.6 Response.Redirect Chuyển xử lý sang một trang Asp khác. Ví dụ trang xulyform.asp sau khi kiểm tra form

đăng nhập thấy người dùng không có quyền vào website thì nó sẽ chuyển cho file Error.asp (file này hiển thị một thông báo lỗi user không có quyền truy cập)

<% Response.redirect “error.asp” %>

5.4.7 Response.End Ngừng xử lý các Script. Dùng lệnh này khi muốn dừng xử lý ở một vị trí nào đó và bỏ

qua các mã lệnh ASP ở phía sau. Đây là cách rất hay dùng trong một số tình huống, chẳng hạn như debug lỗi.

5.4.8 Đối tượng Session Session là một phiên làm việc giữa từng người dùng và web server, nó bắt đầu khi

người đó lần đầu tiên truy cập tới 1 trang web trong website và kết thúc khi người đó rời khỏi website hoặc không tương tác với website trong một khoảng thời gian nhất định (time out). Như vậy tại một thời điểm một website có bao nhiêu người truy cập thì có bấy nhiêu phiên ứng với mỗi người, các phiên này độc lập nhau. Để lưu những thông tin tác dụng trong 1



phiên, người ta dùng đối tượng Session, ví dụ khi một user bắt đầu session với việc login vào hệ thống, và user đã login đó cần được hệ thống ghi nhớ trong toàn phiên làm việc (nhằm tránh việc người dùng phải đăng nhập lại mỗi khi đưa ra một request).

Giá trị của biến kiểu session có phạm vi trong tất cả các trang ASP của ứng dụng, nhưng không có tác dụng đối với phiên làm việc khác. Ví dụ, sử dụng biến session sau đây đếm số lần 1 người đã truy cập vào trang web:

Home.asp <% session(“x”) = session(“x”) + 1 %>

session(“x”) đại diện cho số lần mà một user đã truy cập vào trang home.asp. Với 2 người dùng khác nhau thì giá trị session(“x”) lại khác nhau. Thật vậy, A có thể truy cập 10 lần (session(“x”) =10) trong khi B có thể truy cập 2 lần thôi (session(“x”) =2)

Server kết thúc và hủy bỏ đối tượng session khi: o Người dùng không triệu gọi các trang của ứng dụng hoặc cập nhật làm mới

(refresh) lại thông tin của trang trong một thời gian nhất định. Khi một session hết thời gian hiệu lực nó sẽ được xem như hết hạn sử dụng ,tất cả các biến lưu trong session và bản thân session sẽ bị hủy bỏ. Có thể kiểm tra và tăng giảm thời gian Timeout của Session tính bằng giây như sau: <% Session.Timeout = 500 %>

o Trang ASP gọi đến phương thức Abandon của Session . <% Session.Abandon %>

Việc khởi tạo và kết thúc 1 biến session có thể viết trong các hàm sự kiện Session_OnStart và Session_OnEnd được định nghĩa trong file global.asa

5.4.9 Đối tượng Application Application đại diện cho toàn bộ ứng dụng, bao gồm tất cả các trang web trong website.

Để lưu trữ những thông tin có tác dụng trong toàn ứng dụng, tức là có giá trị trong tất cả các trang asp và tất cả các phiên, người ta dùng đối tượng Application.

Điểm khác của biến application so với biến session là session chỉ có tác dụng đối với mỗi phiên, còn biến application có tác dụng với mọi phiên. Ví dụ, để đếm xem có bao nhiêu người truy cập vào website, chúng ta có thể dùng một biến Application. Mỗi khi một người dùng mới truy cập vào website ta tăng biến này lên 1 đơn vị để chỉ rằng đã có thêm 1 người truy cập.

<% application(“x”) = application(“x”) + 1 %>

Trang home.asp muốn hiển thị số người truy cập chỉ cần in giá trị của biến này <% response.write “Số người đã truy cập vào website là:” & application(“x”) %>

Với 2 phiên khác nhau thì giá trị application(“x”) là như nhau. Thật vậy , A và B khi truy cập vào trang home.asp đều thấy: “Số người đã truy cập vào website là 3” (trong trường hợp application(“x”) =3) Việc khởi tạo và kết thúc 1 biến application có thể viết trong các hàm sự kiện Application_onStart và Application_onEnd được định nghĩa trong file global.asa

Khóa Application:

Do biến application có thểđược dùng chung bởi nhiều phiên nên sẽ có trường hợp xảy ra xung đột khi có 2 phiên cùng thay đổi giá trị một biến application. Để ngăn chặn điều này chúng ta có thể dùng phương thức Application.lock để khóa biến application trước khi thay



đổi nó. Sau khi sử dụng xong biến này có thể giải phóng khóa bằng phương thức application.unlock.

5.4.10 File Global.asa File này là file tùy chọn chứa các khai báo đối tượng, biến có phạm vi toàn ứng dụng.

Mã lệnh viết dưới dạng Script. Mỗi ứng dụng chỉ được phép có nhiều nhất 1 file Global.asa, nằm ở thư mục gốc của ứng dụng. Người ta thường dùng global.asa trong trường hợp muốn có những xử lý khi một session bắt đầu hay kết thúc, một application bắt đầu hay kết thúc, thông qua các hàm sự kiện :

o Application_Onstart : hàm sự kiện này xảy ra khi ứng dụng asp bắt đầu hoạt động, tức là khi người dùng đầu tiên truy cập tới trang web đầu tiên khi ứng dụng hoạt động.

o Session_Onstart : hàm sự kiện này xảy ra mỗi khi có một người dùng mới truy cập vào ứng dụng (bắt đầu 1 session)

o Session_OnEnd : hàm sự kiện này xảy ra mỗi khi 1 người dùng kết thúc session của họ

o Application_OnEnd : hàm sự kiện này xảy ra khi ứng dụng dừng.

File Global.asa có cấu trúc như sau: <script language="vbscript" runat="server">

Sub Application_OnStart ‘Các câu lệnh End sub Sub Application_OnEnd ‘Các câu lệnh End Sub Sub Session_OnStart ‘Các câu lệnh End sub Sub Session_OnEnd ‘Các câu lệnh End Sub

</script>

Ví dụ sau đây sẽ đếm số lượt người dùng đã truy cập vào website và số người dùng hiện đang truy cập website.

Số lượt người dùng đã truy cập vào website được lưu trong biến Application(“tongso”).

Số người dùng đang truy cập được lưu trữ trong biến Application(“songuoi”).

Ở bất cứ đâu trong ứng dụng nếu muốn hiển thị số người đang truy cập chúng ta chỉ việc chèn lệnh hiển thị nó:

<%=Application(“songuoi”)%>

Ngoài ra ứng dụng cũng cho phép đếm số lần 1 người đã truy cập website trong phiên làm việc của họ. Số lần được lưu trữ trong biến Session(“solan”).

Global.asa <script language="vbscript" runat="server">

Sub Application_OnStart ‘ Khi ứng dụng bắt đầu hoạt động Application("tongso")=0 Application("songuoi")=0 End Sub



Sub Session_OnStart ‘ Khi có một người dùng truy cập vào ứng dụng web Application.Lock Application("tongso")=Application("tongso")+1 Application("songuoi")=Application("songuoi")+1 Application.UnLock End Sub Sub Session_OnEnd Application.Lock Application("songuoi")=Application("songuoi")-1 Application.UnLock End Sub

Sub Application_OnEnd End Sub </script>

Home.asp <html> <body> <p> Có <%=Application("songuoi")%> người đang truy cập website. </p> <p> Có <%=Application("tongso")%> lượt người đã truy cập website. </p> </body> </html>

5.4.11 Đối tượng Dictionary Đối tượng Dictionary lưu trữ thông tin theo từng cặp khóa/giá trị. Nó khá giống với

mảng nhưng có khả năng xử lý linh hoạt đối với những cặp dữ liệu có quan hệ kiểu từ điển (cặp khóa/giá trị ví dụ như : mã Sinh viên/tên Sinh viên), trong đó khóa được xem là từ cần tra và giá trị chính là nội dung của từ tra được trong từvđiển. Muốn sử dụng đối tượng Dictionary chúng ta phải khởi tạo nó:

<% set d=server.createObject("Scripting.Dictionary") d.add "work","Lam viec"

d.add "learn","Hoc tap" ‘tương tự như mảng ‘nhưng mỗi phần tử là một cặp khóa/giá trị response.write "work nghĩa tiếng Việt là: " & d.item("work") response.write "learn nghĩa tiếng Việt là: " & d.item("learn") set d=nothing

%>

Một số ứng dụng của đối tượng này như dùng mô phỏng giỏ hàng chứa hàng hóa (shopping cart) với cặp khóa/giá trị là: ProductID/Quantity, sổ địa chỉ với cặp khóa/giá trị là: CustomerName/Address.

5.4.12 Đối tượng Server Đối tượng Server được dùng để truy cập các thuộc tính và phương thức của server. Ta

thường dùng 2 lệnh sau



Server.CreateObject

khởi tạo 1 đối tượng. Ví dụ: Tạo một đối tượng Connection: <%Set conn=Server.CreateObject(“ADODB.Connection”)%>

Tạo một đối tượng Dictionary: <%set d=server.createObject("Scripting.Dictionary")%>

Server.Mappath

biến đường dẫn tương đối thành tuyệt đối. Ví dụ: <%

str= server.mappath("danhsach.mdb") Response.write str

%>

Sẽ cho kết quả: “C:\c2\Examples\ASP\danhsach.mdb” trong trường hợp file danhsach.mdb nằm trong thư mục C:\c2\Examples\ASP

Ta thường áp dụng server.mappath trong những trường hợp xử lý đường dẫn tương đối, ví dụ là chuỗi kết nối vào database

connstr="provider=microsoft.jet.oledb.4.0; data source=" & server.mappath("danhsach.mdb") & ";"

5.5 Sử dụng Database với ASP Hầu hết các ứng dụng Web động đều lưu trữ dữ liệu trong Database. Vì vậy các thao

tác kết nối vào Database, xem, thêm, sửa, xóa dữ liệu trong các bảng là phần quan trọng đối với các ngôn ngữ lập trình web như ASP. Chúng ta sẽ học các kỹ thuật sử dụng Asp để thao tác với dữ liệu trong Database thông qua kiến trúc ADO.

5.5.1 Các cú pháp căn bản để truy xuất dữ liệu từ DB Để thao tác với dữ liệu trong các bảng của DB, có 4 thao tác chính với câu lệnh SQL

tương ứng như sau:

Lấy ví dụ với một Database cụ thể Quanlyhocvien.mdb, trong đó có một bảng HosoHocVien (MaHV:text, Ten: text)

Lựa chọn

Lấy tất cả các bản ghi trong bảng: “Select * from HosoHocVien”

Nếu lựa chọn có điều kiện: “Select * from HosoHocVien where MaHV=’10’ “

Nếu chỉ lựa chọn một số trường trong bảng: “Select Ten from HosoHocVien where MaHV=’10’ ”

Thêm dữ liệu vào bảng

“Insert into HosoHocVien values (‘001’,’Tran Van A’) “

Sửa dữ liệu

“Update HosoHocVien set Ten=’Tran Van B’ where MaHV=’001’ “

Xoá dữ liệu



“Delete from HosoHocVien where MaHV=’001’ “

Chúng ta có thể sử dụng các lệnh SQL phức tạp hơn để có được kết quảmong muốn như sử dụng các lệnh join, order by, group by, having...

5.5.2 Đối tượng Connection Đối tượng Connection cho phép tạo kết nối đến một DB. Các bước sử dụng

Connection: o Khai báo đối tượng Connection o Khởi tạo o Tạo chuỗi kết nối o Mở Connection với chuỗi kết nối trên o Sử dụng Connection o Đóng và Hủy Connection

Ví dụ sau đây kết nối đến database Access QuanlyHocvien.mdb (database này nằm trong cùng thư mục với file Asp)

<% dim conn ‘khai báo set conn=server.createObject("ADODB.connection") ‘khởi tạo stringconn="provider=microsoft.jet.OLEDB.4.0;data

source="&server.mappath("QuanlyHocVien.mdb")&";" ‘chuỗi kết nối conn.open stringconn ‘mở connection ‘ các thao tác với DB sử dụng connection này ‘....... conn.close ‘đóng connection Set conn=nothing ‘hủy connection %>

(chuỗi “stringconn=…” viết trên 1 dòng, trong đó: “… data source = …”chú ý có một dấu cách giữa “data” và “source”, chuỗi này chỉ đúng với Access)

5.5.3 Đối tượng Recordset Đối tượng Recordset thường dùng để xem, thêm, sửa, xóa các bản ghi trong bảng dữ

liệu của Database. Nó trỏ đến tập hợp các bản ghi là kết quả trả về từ câu lệnh select.

Các bước sử dụng đối tượng Recordset : o Khai báo đối tượng Recorset o Khởi tạo o Tạo sql query o Mở Recordset với chuỗi sql query và connection đã mở o Sử dụng Recordset o Đóng và Hủy Recordset

Ví dụ sau đây cho phép lấy các bản ghi trong bảng và hiển thị ra ngoài trang web. <%

Dim rs ‘ khai báo Recordset set rs=server.createObject("ADODB.Recordset") ‘Khởi tạo SQLstring="select * from HosoHocVien" ‘SQL query rs.open SQLstring ,conn ‘Mở Recordset ‘ dùng vòng lặp để hiển thị toàn bộ các bản ghi ra màn hình do while not rs.EOF response.write RS(“MaHV”) response.write RS(“Ten”) response.write “<BR>” rs.movenext ‘dịch con trỏ rs tới bản ghi tiếp theo



loop rs.close ‘đóng recordset set rs=nothing ‘hủy recordset %>

Chúng ta có thể kết hợp giữa script và thẻ html để dữ liệu được hiển thị ra ngoài trang web với giao diện theo ý muốn :

<table border="1"> <tr> <td>MA HOC VIEN</td>

<td>TEN</td> </tr> <%do while not rs.eof%> <tr>

<td><%=rs("MaHV")%></td> <td ><%=rs("Ten")%></td>

</tr> <%rs.movenext loop rs.close %> </table>

Sau đây là một ví dụ hoàn chỉnh liệt kê các user trong bảng tblUser ra trang web:

Connection.asp <%

dim conn Sub openConn() set conn=server.createobject("adodb.connection") connstr="provider=microsoft.jet.oledb.4.0; data source="&server.mappath("myDB.mdb")&";" conn.open connstr End Sub Sub destroyConn() conn.closeset conn=nothing End Sub %>

ListUser.asp  <% openConn set rs = server.createobject("ADODB.Recordset") rs.open "select * from tblUser", conn %> <table border="1" width="200"> <tr> <td>ID</td> <td>Username</td> <td>Address</td> </tr> <% do while not rs.EOF %> <tr> <td><%=rs("id")%></td> <td><%=rs("username")%></td> <td><%=rs("address")%></td> </tr>



<% rs.movenext loop rs.close destroyConn%> </table>

5.5.4 Thêm, sửa, xóa dữ liệu trong DB: Với một connection đã mở chúng ta có thể dùng nó để thực thi câu lệnh SQL dạng

insert, update, delete:

Thêm dữ liệu: <%

Conn.execute “Insert into HosoHocvien values(‘001’,’Tran Van A’)” %>

Sửa dữ liệu: <%

Conn.execute “Update HosoHocVien set Ten=’Tran Van B’ where MaHV=’001’ “

%>

Xoá dữ liệu: <%

Conn.execute “Delete from HosoHocVien where MaHV=’001’ “ %>

Ngoài ra chúng ta có thể dùng Recordset để thêm, sửa, xóa dữ liệu trong database bằng cách duyệt qua tập hợp các bản ghi trong bảng

Thêm dữ liệu: <% Dim RS set rs=server.createObject("ADODB.recordset") SQLstring="select * from HosoHocVien" rs.open SQLstring ,conn,3,2 ‘rs.open SQLstring ,conn,adOpenStatic,adLockPessimistic rs.addnew ‘Thêm một bản ghi rs(“MaHV”)=”001” ‘ gán giá trị cho các trường của bản ghi rs(“Ten”)=”Tran Van A” rs.update ‘ Xác nhận thêm xong rs.close ‘đóng recordset %>

Sửa: <% set rs=server.createObject("ADODB.recordset") ‘Khởi tạo SQLString="select * from HosoHocVien where ma=’001’ " ‘ lấy ra bản ghi cần sửa rs.open SQLString ,conn,3,2 rs(“Ten”)=”Tran Van B” ‘sửa lại giá trị trường “Ten” rs.update ‘ xác nhận sửa xong rs.close ‘đóng recordset %>

Xóa: <% set rs=server.createObject("ADODB.recordset") ‘Khởi tạo SQLString="select * from HosoHocVien where MaHV=’001’ " ‘Câu lệnh SQL lấy ra đúng bản ghi cần xóa rs.open SQLString ,conn,3,2



rs.delete ‘xóa bản ghi này rs.close ‘đóng recordset %>

Ví dụ:

5.6 Sử dụng tiếng Việt trong ASP 5.6.1 Bảng mã Unicode Về cơ bản máy tính chỉ xử lý được dữ liệu dạng số. Mỗi ký tự (character) được máy tính

lưu trữ và xử lý bằng cách ánh xạ chúng thành một chữ số (còn gọi là mã - code).

Ví dụ thông thường chữ ‘A’ có mã 65, ‘a’ mã 97… Bảng ánh xạ các ký tự thành các mã dưới dạng số được gọi là bảng mã (character code).

Bảng mã 1 byte: Trong các bảng mã 1 byte như ASCII, mỗi ký tựđược biểu diễn bằng 1 byte. Chúng có thể biểu diến tối đa 256 ký tự (kể cả các ký tự hiển thị được và ký tự điều khiển). Bảng mã 1 byte chỉ thích hợp với những ngôn ngữ như tiếng Anh. Đối với các ngôn ngữ phức tạp như tiếng Hoa, tiếng Nhật, tiếng Việt thì bảng mã này không đủ lớn để có thể biểu diễn hết số ký tự cần thiết. Vì vậy, người ta phải thực hiện nhiều giải pháp để khắc phục thiếu sót này, dẫn đến tình trạng có nhiều bảng mã khác nhau cùng tồn tại, thậm chí 1 ngôn ngữ cũng có nhiều bảng mã, gây nên sự thiếu thống nhất.

Unicode là bảng mã 2 byte, ra đời nhằm mục đích xây dựng một bộ mã chuẩn vạn năng, thống nhất, dùng chung cho tất cả các ngôn ngữ trên thế giới. Bộ mã Unicode gồm 16 bit cho mỗi ký tự, biểu diễn được 65536 ký tự. Unicode có thể biểu diễn được đầy đủ các ký tự Tiếng Việt.

5.6.2 Mã hóa UTF-8 Mỗi ký tự trong bộ mã Unicode được mã hóa (encoding) dưới 1 trong 3 dạng: UTF-8 (8

bit), UTF-16 (16 bit) và UTF-32 (32 bit). Trong đó UTF-8 (Unicode Transfomation Format -8) được sử dụng phổ biến. Mỗi ký tự Unicode được mã hóa UTF-8 sẽđược biểu diễn bằng 1 đến 4 byte tùy thuộc vào giá trị mã của ký tự đó.

Ví dụ: trong bảng mã Unicode chữ a có mã là 97 (hexa là U+0061)

UTF 32: 0x00000061, UTF-16: 0x0061, UTF-8: 0x61.

UTF-8 được sử dụng phổ biến để biểu diễn tiếng Việt theo mã Unicode

5.6.3 CodePage và Charset Trong lập trình ASP, để biểu diễn tiếng Việt đúng theo encoding UTF-8, chúng ta cần

lưu ý 2 điểm:

Hiển thị đúng font UTF-8 trên client (browser) bằng cách sử dụng thẻ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

(charset giúp browser hiển thị (decode) đúng dạng dữ liệu được encode)

Xử lý đúng UTF-8 trên server bằng cách đặt thuộc tính Codepage = 65001

(code page giúp server xử lý dữ liệu đúng encoding) <%Response.codepage=65001%>

hoặc <%Session.codepage=65001%>



Session.codepage có thiết lập codepage cho toàn phiên. Còn Response.codepage thiết lập codepage cho 1 lần response thôi. Thông thường chúng ta sử dụng Session.codepage vì như vậy toàn bộ session sẽ có chung 1 codepage thống nhất.



CHƯƠNG 6: PHỤ LỤC - VBSCRIPT REFERENCE

This section covers the VBScript keywords, operators, functions, and control structures.

6.1 Statements and Keywords o Dim is used to declare variables. VBScript variables are variants, which means

that they do not have to have a fixed data type. o Const is used to declare constants, which are like variables except that they

cannot be changed in the script. o Option Explicit is put at the top of a page to force explicit declaration of all

variables.

6.2 Operators In order of precedence, this is a list of operators supported in VBScript.

o Anything in parentheses. o Exponentiation (^) o Negation (-) o Multiplication, Division (*, /) o Integer Division (\) o Modulus (Mod) o Addition, Subtraction (+,-) o String Concatenation (&) o Comparison Operators (=, <>, <, >, <=, >==) o Not o And o Or o Xor o Eqv o Imp

6.3 VBScript Functions This will provide you with a quick look at the more important VBScript functions. They

include functions for type checking, typecasting, formatting, math, date manipulation, string manipulation, and more.

6.3.1 Type Checking Functions These functions allow you to determine the data subtype of a variable or expression.

VarType (expression) returns an integer code that corresponds to the data type.

TypeName (expression) returns a string with the name of the data type rather than a code.

IsNumeric (expression) returns a Boolean value of True if the expression is numeric data, and False otherwise.

IsArray (expression) returns a Boolean value of True if the expression is an array, and False otherwise.



IsDate(expression) returns a Boolean value of True if the expression is date/time data, and False otherwise.

IsEmpty (expression) returns a Boolean value of True if the expression is an empty value (uninitialized variable), and False otherwise.

IsNull (expression) returns a Boolean value of True if the expression contains no valid data, and False otherwise.

IsObject (expression) returns a Boolean value of True if the expression is an object, and False otherwise.

6.3.2 Typecasting Functions Typecasting allows you to convert between data subtypes.

CInt(expression) casts expression to an integer. If expression is a floating-point value or a currency value, it is rounded. If it is a string that looks like a number, it is turned into that number and then rounded if necessary. If it is a Boolean value of True, it becomes -1. False becomes 0. It also must be within the range that an integer can store.

CByte(expression) casts expression to a byte value provided that expression falls between 0 and 255. expression should be numeric or something that can be cast to a number.

CDbl(expression) casts expression to a double, expression should be numeric or something that can be cast to a number.

CSng(expression) casts expression to a single. It works like CDbl(), but must fall within the range represented by a single.

CBool(expression) casts expression to a Boolean value. If expression is zero, the result is False. Otherwise, the result is True. Expression should be numeric or something that can be cast to a number.

CCur(expression) casts expression to a currency value, expression should be numeric or something that can be cast to a number.

CDate(expression) casts expression to a date value, expression should be numeric or something that can be cast to a number, or a string of a commonly used date format. DateValue(expression) or TimeValue (expression) can also be used for this.

CStr(expression) casts expression to a string, expression can be any kind of data.

6.3.3 Formatting Functions FormatDateTime(expression, format) is used to format the date/time data in

expression. format is an optional argument that should be one of the following:

vbGeneralDate Display date, if present, as short date. Display time, if present, as long time. Value is 0. This is the default setting if no format is specified.

vbLongDate Display date using the server's long date format. Value is 1.

vbShortDate Display date using the server's short date format. Value is 2.

vbLongTime Display time using the server's long time format. Value is 3.

vbShortTime Display time using the server's short time format. Value is 4.

FormatCurrency (value, numdigits, leadingzero, negparen, delimiter) is used to format the monetary value specified by value.

numdigits specifies the number of digits after the decimal place to display. -1 indicates to use the system default.



Tristate options have three possible values. If the value is -2, it means use the system default. If it is -1, it means turn on the option. If it is 0, turn off the option.

leadingzero is a Tristate option indicating whether to include leading zeroes on values less than 1.

negparen is a Tristate option indicating whether to enclose negative values in parentheses.

delimeter is a Tristate option indicating whether to use the delimiter specified in the computer's settings to group digits.

FormatNumber is used to format numerical values. It is almost exactly like

FormatCurrency, only it does not display a dollar sign.

FormatPercent works like the previous two. The options are the same, but it turns the value it is given into a percentage.

6.3.4 Math Functions Abs(number) returns the absolute value of number.

Atn(number) returns the arctangent, in radians, of number.

Cos(number) returns the cosine of number, number should be in radians.

Exp(number) returns e (approx. 2.71828) raised to the power number.

Fix(number) returns the integer portion of number. If number is negative. Fix returns the first integer greater than or equal to number.

Hex(number) converts number from base 10 to a hexadecimal string.

Int(number) returns the integer portion of number. If number is negative, Int returns the first integer less than or equal to number.

Log(number) returns the natural logarithm of number.

Oct(number) converts number from base 10 to an octal string.

Rnd(number) returns a random number less than one and greater than or equal to zero. If the argument number is less than 0, the same random number is always returned, using number as a seed. If number is greater than zero, or not provided, Rnd generates the next random number in the sequence. If number is 0, Rnd returns the most recently generated number.

Randomize initializes the random number generator.

Round(number) returns number rounded to an integer.

Round(number, dec) returns number rounded to dec decimal places.

Sgn(number) returns 1 if number is greater than zero, 0 if number equals zero, and -1 if number is less than zero.

Sin(number) returns the sine of number, number should be in radians.

Sqr(number) returns the square root of number, number must be positive.

Tan(number) returns the tangent of number, number should be in radians.

6.3.5 Date Functions Date returns the current date on the server.

Time returns the current time on the server.

Now returns the current date and time on the server.



DateAdd(interval, number, date) is used to add to the date specified by date. Interval is a string that represents whether you want to add days, months, years, and so on. Number indicates the number of intervals you want to add; that is, the number of days, months, years, and so on.

DateDiff(interval, date1, date2, firstDOW, firstWOY) is used to find the time between two dates. DateDiff returns the number of intervals elapsed between date1 and date2. The optional integer firstDOW specifies what day of the week to treat as the first. The optional firstWOY specifies which week of the year to treat as the first.

DateSerial(year, month, day) takes the integers year, month, and day and puts them together into a date value. They may be negative.

TimeSerial(hour, minute, second) is similar to DateSerial. Timer returns the number of seconds elapsed since midnight.

DatePart (interval, datetime, firstDOW, firstWOY) allows you to retrieve the part of datetime specified by interval. The optional integer firstDOW specifies what day of the week to treat as the first. The optional firstWOY specifies which week of the year to treat as the first.

Year(date) returns the year portion from date as a number.

Month(date) returns the month portion from date as a number.

MonthName(date) returns the month portion from date.

Day(date) returns the day portion from date as a number.

Weekday(date) returns the day of the week of date as a number.

Hour(time) returns the hour portion from time.

Minute(time) returns the minute portion from time.

Second(time) returns the second portion from time.

6.3.6 String Functions UCase(string) returns string with all its lowercase letters converted to uppercase letters.

LCase(string) returns string with all its uppercase letters converted to lowercase letters.

LTrim(string) removes all the spaces from the left side of string.

RTrim(string) removes all the spaces from the right side of string.

Trim(string) removes spaces from both the left and the right sides.

Space(number) returns a string consisting of number spaces.

String(number, character) returns a string consisting of character repeated number times.

Len(string) returns the number of characters in string.

Len(variable) returns the number of bytes required by variable.

LenB(string) returns the number of bytes required to store string.

StrReverse(string) returns string with the characters in reverse order.

StrComp(string1,string2,comparetype) is used to perform string comparisons. If comparetype is zero or omitted, the two strings are compared as if uppercase letters come before lowercase letters. If comparetype is one, the two strings are compared as if upper and lowercase letters are the same. StrComp returns -1 if string1 is less than string2. It returns 0 if they are the same, and 1 if string1 is greater than string2.

Right(string,number) returns the number rightmost characters of string.



RightB(string,number) works like Right, but number is taken to be a number of bytes rather than characters.

Left(string,number), as you may guess, returns the number leftmost characters of string.

LeftB(string,number) works like Left, but number is taken to be a number of bytes rather than characters.

Mid(string,start,length) returns length characters from string, starting at position start. When length is greater than the number of characters left in the string, the rest of the string is returned. If length is not specified, the rest of the string starting at the specified tarting position is returned.

MidB(string,start,length) works like Mid, but start and length are both taken to be byte numbers rather than character numbers.

InStr(start,stringi,strlng2,comparetype) is used to check if and where string2 occurs within string1. Start is an optional argument that specifies where in string1 to start looking for string2. comparetype is an optional argument that specifies which type of

comparison to perform. If comparetype is 0, a binary comparison is performed, and uppercase letters are distinct from lowercase letters. If comparetype is 1, a textual comparison is performed, and uppercase and lowercase letters are the same. InStr returns zero if string1 is empty (""), if string2 is not found in string1, or if start is greater than the length of string2. It returns Null if either string is Null, It returns start if string2 is empty. If string2 is successfully found in string1, it returns the starting position where it is first found.

InStrB works like InStr except that the start position and return value are byte positions, not character positions.

InStrRev(string1,string2,start,comparetype) starts looking for a match at the right side of the string rather than the left side. start is by default -1, which means to start at the end of the string.

Replace(string,find,replace,start,count,comparetype) is used to replace occurrences of find with replace in string. start, count, and comparetype are optional, but if you want to use one, you must use the ones that come before it. start indicates where the resulting string will start and where to start searching for find. It defaults to 1. count indicates how many times to perform the replacement. By default, count is -1, which means to replace every occurrence. If comparetype is 0, a binary comparison is performed, and uppercase letters are distinct from lowercase letters. If comparetype is 1, a textual comparison is performed, and uppercase and lowercase letters are the same.

Filter(arrStrings,SearchFor,include,comparetype) searches an array of strings, arrStrings, and returns a subset of the array, include is a Boolean value. If include is True, Filter searches through all the strings in arrStrings and returns an array containing the strings that contain SearchFor. If include is False, Filter returns an array of the strings that do not contain SearchFor. include is optional and defaults to True. comparetype works the same as in the other string functions we have discussed. If you want to use comparetype, you must use include.

Split(expression,delimiter,count,comparetype) takes a string and splits it into an array of strings. expression is the string to be split up. If expression is zero length. Split returns an array of no elements, delimiter is a string that indicates what is used to separate the sub-strings in expression. This is optional; by default the delimiter is the space. If delimiter is zero length (""), an array of one element consisting of the whole string is returned, count is used to specify a maximum number of sub-strings to be created. The default for count is -1, which means no limit. If comparetype is 0, a binary comparison is performed, and uppercase letters are distinct from lowercase letters. If comparetype is 1, a textual



comparison is performed, and uppercase and lowercase letters are the same. comparetype is only useful when the delimiter you have chosen is a letter.

Join(stringarray,delimiter) does just the opposite of Split. It takes an array of strings and joins them into one string, using delimiter to separate them. delimiter is optional; the space is the default.

6.3.7 Other functions LBound(array) returns the smallest valid index for array.

UBound(array) returns the largest valid index for array.

Asc(string) returns the ANSI character code for the first character of string.

Chr(integer) returns a string consisting of the character that matches the ANSI character code specified by integer.

Array(value1, value2, ..., valueN) returns an array containing the specified values. This is an alternative to assigning the values to array elements one at a time.

6.3.8 Control Structures Control structures allow you to control the flow of execution of your scripts. You can

specify that some code should be executed only under certain circumstances, using conditional structures. You can specify that some code should be executed repeatedly, using looping structures. Lastly, you can specify that code from somewhere else in the script should be executed using branching controls.

Conditional Structures

The If...Then...Else construct allows you to choose which block of code to execute based on a condition or series of conditions.

<% If condition1 Then

codeblock1 ElseIf condition2 Then

codeblock2 Else

codeblock3 End If %>

If condition1 is true, codeblock1 is executed. If it is false, and condition2 is true, codeblock 2 is executed. If condition1 and condition2 are both false, codeblock3 executes. An If-Then construct may have zero or more ElseIf statements, and zero or one Else statements.

In place of some really complex If ...Then constructs, you can use a Select Case statement. It takes the following form:

Select Case variable Case choice1 codeblock1 Case choice2

codeblock2 Case choicen codeblockn Case default default code block

End Select

This compares the value of variable with choicel, choice2, and so on. If it finds a match, it executes the code associated with that choice. If it does not, it executes the default code.



Looping Structures

Looping structures allow you to execute the same block of code repeatedly. The number of times it executes may be fixed or may be based on one or more conditions.

The For...Next looping structure takes the following form: For counter = start to stop

codeblock Next

codeblock is executed with counter having the value start, then with counter having the value start+1, then start+2, and so forth through the value stop.

Optionally, you may specify a different value to increment counter by. In this case the form looks like this:

For counter = start to stop Step stepvalue codeblock

Next

Now counter will take the values start+stepvalue, start+stepvalue+stepvalue, and so forth. Notice that if stepvalue is negative, stop should be less than start.

The For Each...Next looping structure takes the following form: For Each item In Set

codeblock Next

codeblock is executed with item taking the value of each member of Set. Set should be an array or a collection.

The Do While-Loop looping structure has the following form: Do While booleanValue

code block Loop

codeblock is executed as long as booleanValue is True. If it is False to begin with, the loop is not executed at all.

The While...Wend looping structure has the following form: While booleanValue

codeblock Wend

codeblock is executed as long as booleanValue is True. If it is False to begin with, the loop is not executed at all.

The Do-Loop While looping structure has the following form: Do code block Loop While booleanValue

codeblock is executed as long as booleanValue is True. The loop is executed at least once no matter what.

The Do Until-Loop looping structure has the following form: Do Until booleanValue

codeblock Loop

code block is executed as long as booleanValue is false. If it is true to begin with, the loop is not executed at all.

The Do...Loop Until looping structure has the following form: Do code block



Loop Until booleanValue

code block is executed as long as booleanValue is false. The loop is executed at least once no matter what.

Branching Structures

Branching structures allow you to jump from one position in the code to another. A subroutine does not return a value. It simply executes. Subroutines look like this:

Sub name (argumentlist) code block

End Sub

Functions do return values and have the following form: Function name (argumentlist)

code block name = expression

End Function

Documents

CIT CongNgheWebVaUngDung