MỤC L ỤC - fit.mta.edu.vnMỤC L ỤC - fit.mta.edu.vn ... 1

Trang 1

MỤC LỤC

Chương 1: Giới thiệu ngôn ngữ HTML .................................................................................................... 4

1. Tổng quan ......................................................................................................................................... 4

1.1 Giới thiệu .................................................................................................................................... 4

1.2 Cấu trúc cơ bản của một trang web ............................................................................................. 4

2. Các thẻ HTML .................................................................................................................................. 4

2.1 Các thẻ định cấu trúc tài liệu ....................................................................................................... 4

2.1.1 <HTML> .............................................................................................................................. 4

2.1.2 <HEAD> .............................................................................................................................. 4

2.1.3 <TITLE> .............................................................................................................................. 4

........................................................................................................................................................... 4

2.1.4 <BODY> .............................................................................................................................. 5

2.2 Các thẻ định dạng khối................................................................................................................ 6 2.2.1 <P> và <BR> ....................................................................................................................... 6

2.2.2 <H1>, <H2>, <H3>, <H4>, <H5>, <H6> ............................................................................... 7 2.3 Các thẻ định dạng danh sách ....................................................................................................... 8

2.3.1 Danh sách có trật tự ............................................................................................................. 8 2.3.2 Danh sách không có trật tự .................................................................................................. 8

2.3.3 Danh sách định nghĩa ........................................................................................................... 8 2.4 Các thẻ định dạng ký tự .............................................................................................................. 8

2.4.1 Các thẻ định dạng in ký tự ................................................................................................... 8

2.4.2 Các thẻ canh lề ................................................................................................................... 10 2.4.3 Các thẻ ký tự đặc biệt ......................................................................................................... 10 2.4.4 Trang trí màu sắc trong thiết kế website ............................................................................ 10

2.4.5 Thẻ xác định kiểu chữ <FONT> ........................................................................................ 12

2.4.6 Văn bản siêu liên kết .......................................................................................................... 12 2.4.7 Kết nối mailto..................................................................................................................... 13 2.4.8 Vẽ một đường thẳng nằm ngang ........................................................................................ 14

2.5 Các thẻ chèn âm thanh, hình ảnh .............................................................................................. 14

2.5.1 Giới thiệu ........................................................................................................................... 14 2.5.2 Chèn âm thanh vào Website............................................................................................... 16 2.5.3 Chèn hình ảnh, đoạn video vào Website ............................................................................ 16

2.6 Các thẻ định dạng bảng biểu ..................................................................................................... 17

2.7 FORM ....................................................................................................................................... 20

2.7.1 Thẻ FORM ......................................................................................................................... 20 2.7.2 Tạo một danh sách lựa chọn .............................................................................................. 21

2.7.3 Tạo hộp soạn thảo văn bản ................................................................................................. 21

Chương 2: CSS (Cascading Style Sheets) .............................................................................................. 22

2.1 Giới thiệu chung ........................................................................................................................ 22 2.2 Sử dụng thuộc tính Style ........................................................................................................... 22 2.3 CSS nhúng bên trong trang Web ............................................................................................... 22

2.4 Liên kết đến file CSS ................................................................................................................ 23 2.5 Khảo sát file CSS ...................................................................................................................... 24

2.5.1 Cấu trúc cơ bản của một file CSS ...................................................................................... 24

2.5.2 Một số thuộc tính cơ bản .................................................................................................... 25

2.5.2.1 Các thuộc tính của hộp nhập ....................................................................................... 25

2.5.2.2 Các thuộc tính của đường viền .................................................................................... 25

2.5.2.3 Thuộc tính Border-width ............................................................................................. 25 2.5.2.4 Thuộc tính height ........................................................................................................ 26 2.5.2.5 Thuộc tính Margin ...................................................................................................... 26 2.5.2.6 Thuộc tính Padding ..................................................................................................... 26 2.5.2.7 Thuộc tính Width ........................................................................................................ 26 2.5.2.8 Thuộc tính color và Background ................................................................................. 27

Trang 2

2.5.2.9 Các thuộc tính về font ................................................................................................. 27

2.5.2.10 Các thuộc tính Text ................................................................................................... 29 2.5.3 Tạo file CSS với công cụ Rapid CSS 2008 (HS nghiên cứu) ............................................ 30

Chương 3: JavaScript .............................................................................................................................. 37

2.1 Giới thiệu chung ........................................................................................................................ 37 2.2 Cách thức nhúng JavaScript vào file HTML ............................................................................ 37 2.3 Sử dụng thẻ SCRIPT ................................................................................................................. 37 2.4 Sử dụng một file nguồn JavaScript ........................................................................................... 37

2.5 Hiển thị một dòng Text trên Website ........................................................................................ 38 2.6 Giao tiếp với người sử dụng thông qua hộp thoại ..................................................................... 38

2.6.1 Hàm Alert ........................................................................................................................... 38

2.6.2 Hàm Prompt ....................................................................................................................... 39

2.6.3 Hàm Comfirm .................................................................................................................... 40

2.7 Biến trong JavaScript ................................................................................................................ 40

2.7.1 Biến và phân loại biến ........................................................................................................ 40 2.7.2 Kiểu dữ liệu ........................................................................................................................ 40

2.8 Xây dựng các biểu thức trong JavaScript ................................................................................. 41

2.8.1 Định nghĩa và phân loại biểu thức ..................................................................................... 41

2.8.2 Các toán tử ......................................................................................................................... 41 2.8.2.1 Gán .............................................................................................................................. 41

2.8.2.2 So sánh ........................................................................................................................ 42

2.8.2.3 Số học .......................................................................................................................... 42 2.8.2.4 Chuỗi ........................................................................................................................... 42 2.8.2.5 Logic ........................................................................................................................... 42

2.8.2.6 Bitwise ........................................................................................................................ 42

2.9 Các cấu trúc lệnh của JavaScript............................................................................................... 43 2.9.1 Lệnh điều kiện if ... else ..................................................................................................... 43 2.9.2 Câu lệnh lặp ....................................................................................................................... 44

2.9.2.1 Lệnh For ...................................................................................................................... 44 2.9.2.2 Lệnh While .................................................................................................................. 44 2.9.2.3 Lệnh Break .................................................................................................................. 45 2.9.2.4 Lệnh Continue ............................................................................................................. 45

2.10 Các câu lệnh thao tác trên đối tượng ....................................................................................... 45

2.10.1 Lệnh For...in ..................................................................................................................... 46

2.10.3 New .................................................................................................................................. 47

2.10.4 Lệnh With ........................................................................................................................ 48 2.11 Hàm trong JavaScript .................................................................................................................. 49

2.11.1 Hàm do người dùng định nghĩa ........................................................................................... 49

2.11.2 Các hàm có sẵn ................................................................................................................ 50 2.11.2.1 Hàm eval ................................................................................................................... 50

2.11.2.2 Hàm Parseint ............................................................................................................. 51

2.11.2.3 Hàm Parsefloat .......................................................................................................... 52

2.12 Mảng ........................................................................................................................................... 52

2.13 Sự kiện ........................................................................................................................................ 53

2.14 Các đối tượng trong JavaScript ................................................................................................... 59 2.14.1 Đối tượng Navigator ........................................................................................................ 60 2.14.2 Đối tượng Windows ......................................................................................................... 61 2.14.3 Đối tượng Location .......................................................................................................... 62 2.14.4 Đối tượng Frame .............................................................................................................. 62 2.14.5 Đối tượng Document ........................................................................................................ 63 2.14.6 Đối tượng Form ................................................................................................................ 64 2.14.7 Đối tượng History ............................................................................................................ 77 2.14.8 Đối tượng Math ................................................................................................................ 77 2.14.9 Đối tượng Date ................................................................................................................. 78

Trang 3

2.14.10 Đối tượng String ............................................................................................................ 78 Chương 4: Ngôn ngữ kịch bản ASP........................................................................................................ 80

4.1 Giới thiệu .................................................................................................................................. 80

4.2 ASP file là gì? ........................................................................................................................... 80

4.3 ASP làm việc như thế nào? ....................................................................................................... 80 4.4 Cài đặt ASP trên máy tính......................................................................................................... 81 4.5 Ngôn ngữ kịch bản VBScript .................................................................................................... 82

4.5.1 Biến .................................................................................................................................... 82

4.5.2 Mảng .................................................................................................................................. 83

4.5.2.1 Mảng một chiều .......................................................................................................... 83 4.5.2.2 Mảng đa chiều ............................................................................................................. 83

4.5.3 Hằng số .............................................................................................................................. 83 4.5.4 Cấu trúc điều khiển lệnh .................................................................................................... 83

4.5.4.1 Cấu trúc điều kiện IF…THEN…ELSE…IF ............................................................... 83

4.5.4.2 Cấu trúc lựa chọn SELECT CASE…END SELECT ................................................. 84 4.5.4.3 Cấu trúc lặp tuần tự FOR…NEXT ............................................................................. 84

4.5.4.4 Cấu trúc lặp DO WHILE…LOOP .............................................................................. 84

4.5.4.5 Cấu trúc lặp WHILE…WENT .................................................................................... 84

4.5.4.6 Cấu trúc lặp DO…LOOP UNTIL… ........................................................................... 85 4.5.5 Một số hàm cơ bản trong ASP ........................................................................................... 85

4.5.5.1 Hàm xử lý chuỗi .......................................................................................................... 85 4.5.5.2 Các hàm xử lý số ......................................................................................................... 85 4.5.5.3 Các hàm chuyển đổi kiểu ............................................................................................ 85

4.5.5.4 Các hàm format ........................................................................................................... 86

4.5.5.5 Các hàm ngày tháng .................................................................................................... 86 4.5.5.6 Các hàm kiểm tra ........................................................................................................ 86 4.5.5.7 Thủ tục và hàm người dùng ........................................................................................ 87

4.5.6 Sử dụng thẻ #include .......................................................................................................... 89 4.5.7 Các đối tượng xây dựng sẵn trong ASP ............................................................................. 90

4.5.7.1 Đối tượng Request ...................................................................................................... 90 4.5.7.2 Đối tượng Response .................................................................................................... 90 4.5.7.3 Đối tượng Session ....................................................................................................... 91 4.5.7.4 Đối tượng Application ................................................................................................ 92 4.5.7.5 File Global.asa ............................................................................................................ 92

4.5.7.6 Đối tượng Dictionary .................................................................................................. 94 4.5.7.7 Đối tượng Server ......................................................................................................... 94

4.5.8 Database và ASP ................................................................................................................ 94

4.5.8.1 SQL-Ngôn ngữ truy vấn có cấu trúc ........................................................................... 94

4.5.8.2 Truy xuất dữ liệu từ một trang ASP ............................................................................ 96

4.5.8.3 ADO là gì? .................................................................................................................. 96

4.5.8.4 Đối tượng Connection ................................................................................................. 96 4.5.8.5 Đối tượng Recordset ................................................................................................... 97 4.5.8.6 Sử dụng ADO với câu lệnh truy vấn SQL .................................................................. 98

Trang 4

<HTML> ... Toàn b ộ n ội dung c ủa trang ñặt ở ñây </HTML>

<HEAD> ... Ph ần mở ñầu ch ứa tiêu ñề c ủa trang Web </HEAD>

<TITLE >Tiêu ñề trang Web</ TITLE >

Chương 1: Giới thi ệu ngôn ngữ HTML

1. Tổng quan 1.1 Giới thi ệu

HTML (Hypertext Markup Language): Ngôn ngữ đánh dấu siêu văn bản Siêu văn bản (Hypertext): là các liên kết đến các trang web khác. Đánh dấu (Markup): gồm một vài mã đơn giản để tạo ra văn bản nét đậm hoặc nghiêng,

các hình đồ hoạ chèn thêm vào, cùng với sự xác định các mối liên kết siêu văn bản... Ngôn ngữ (Language): gồm các tập hợp nhỏ các nhóm hai đến ba chữ và các từ dùng để

quy định các loại đối tượng trên một Website. 1.2 Cấu trúc cơ bản của một trang web

<HTML> <HEAD> <TITLE> tên trang </TITLE>  </HEAD> <BODY>  </BODY> </HTML>

2. Các thẻ HTML 2.1 Các thẻ định cấu trúc tài li ệu 2.1.1 <HTML>

Cặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu HTML. Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này. Cú pháp:

Trình duyệt sẽ xem các tài liệu không sử dụng thẻ <HTML> như những tệp tin văn bản bình thường. 2.1.2 <HEAD>

Thẻ <HEAD> được dùng để xác định phần mở đầu cho tài liệu. Cú pháp: 2.1.3 <TITLE>

Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu, tức là nó phải nằm trong thẻ phạm vi giới hạn bởi cặp thẻ <HEAD> . Cú pháp: Chú ý:

• Xâu ký tự nằm giữa <TITLE> và </TITLE> không hiển thị trên trang Web mà hiển thị tại thanh phía trên của Browser.

Trang 5

<BODY> .... Ph ần n ội dung c ủa trang Web </BODY>

<HTML> <HEAD> <TITLE >Tiêu ñề c ủa tài li ệu</TITLE > </ HEAD> <BODY Các tham s ố n ếu có> ... N ội dung c ủa tài li ệu </ BODY> </ HTML>

• Xâu ký tự nằm giữa <TITLE> và </TITLE> được đặt trong phần header khi trang Web được in ra.

• Xâu ký tự nằm giữa <TITLE> và </TITLE> được ghi lại khi bạn cập nhật trang Web này vào mục các trang Web yêu thích (Favorites).

2.1.4 <BODY> Thẻ này được sử dụng để xác định phần nội dung chính của tài liệu - phần thân (body)

của tài liệu. Trong phần thân có thể chứa các thông tin định dạng nhất định để đặt ảnh nền cho tài liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho trang tài liệu... Những thông tin này được đặt ở phần tham số của thẻ. Cú pháp:

Một số các thuộc tính của thẻ <BODY>:

BACKGROUND= Đặt một ảnh nào đó làm ảnh nền (background) cho văn bản. Giá trị của tham số này (phần sau dấu bằng) là URL của file ảnh. Nếu kích thước ảnh nhỏ hơn cửa sổ trình duyệt thì toàn bộ màn hình cửa sổ trình duyệt sẽ được lát kín bằng nhiều ảnh.

BGCOLOR= Đặt mầu nền cho trang khi hiển thị. Nếu cả hai tham số BACKGROUND và BGCOLOR cùng có giá trị thì trình duyệt sẽ hiển thị mầu nền trước, sau đó mới tải ảnh lên phía trên.

TEXT= Xác định màu chữ của văn bản, kể cả các đề mục.

ALINK=,VLINK=,LINK=

Xác định màu sắc cho các siêu liên kết trong văn bản. Tương ứng, alink (active link) là liên kết đang được kích hoạt - tức là khi đã được kích chuột lên; vlink (visited link) chỉ liên kết đã từng được kích hoạt;

Như vậy một tài liệu HTML cơ bản có cấu trúc như sau:

Thực hành: - Học sinh tạo một trang web đơn giản bằng NotePad với cấu trúc cơ bản đã học:

• Tiêu đề: Design Simple Website • Nội dung hiển thị: Xin chào! Thiết kế web thật là dễ! • Màu nền trang web: Cyan

Trang 6

<P>Nội dung ñoạn v ăn b ản</ P>

• Màu chữ: Màu đà • Có ảnh nền tùy ý.

- Duyệt trang web với Internet Explore. Mã nguồn:

<HTML> <HEAD> <TITLE>Design Simple Website</TITLE> </HEAD> <BODY bgcolor="cyan"> Xin chào! Thi ết k ế web th ật là d ễ! </BODY> </HTML>

2.2 Các thẻ định dạng khối 2.2.1 <P> và <BR>

Thẻ <P> được sử dụng để bắt đầu một đoạn văn bản. Cú pháp:

Thẻ <BR> không có thẻ kết thúc tương ứng (</BR>), nó có tác dụng chuyển sang dòng mới. Lưu ý, nội dung văn bản trong tài liệu HTML sẽ được trình duyệt Web thể hiện liên tục, các khoảng trắng liền nhau, các ký tự tab, ký tự xuống dòng đều được coi như một khoảng trắng. Để xuống dòng trong tài liệu, bạn phải sử dụng thẻ <BR> Ví dụ 1:

<HTML> <HEAD> <TITLE>Design Simple Website</TITLE> </HEAD> <BODY> Cộng hoà xã h ội ch ủ ngh ĩa Vi ệt nam ðộc l ập - T ự do - H ạnh phúc ðơn xin vi ệc </BODY> </HTML>

Kết quả: Cộng hoà xã hội chủ nghĩa Việt namĐộc lập - Tự do - Hạnh phúcĐơn xin việc

Ví dụ 2: <HTML> <HEAD> <TITLE>Design Simple Website</TITLE> </HEAD> <BODY> Cộng hoà xã h ội ch ủ ngh ĩa Vi ệt nam<BR> ðộc l ập - T ự do - H ạnh phúc <P> ðơn xin vi ệc </BODY> </HTML>

Kết quả: Cộng hoà xã hội chủ nghĩa Việt nam Độc lập - Tự do - Hạnh phúc Đơn xin việc

Trang 7

2.2.2 <H1>, <H2>, <H3>, <H4>, <H5>, <H6> HTML hỗ trợ 6 mức đề mục. Chú ý rằng đề mục chỉ là các chỉ dẫn định dạng về mặt

logic, tức là mỗi trình duyệt sẽ thể hiện đề mục dưới một khuôn dạng thích hợp. Có thể ở trình duyệt này là font chữ 14 point nhưng sang trình duyệt khác là font chữ 20 point. Đề mục cấp 1 là cao nhất và giảm dần đến cấp 6.

Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục:

<H1> ... </H1> Định dạng đề mục cấp 1






Ví dụ:

<HTML> <HEAD> <TITLE>Design Simple Website</TITLE> </HEAD> <BODY> <H1> ðây là ñầu ñề 1</H1> <H2> ðây là ñầu ñề 2</H2> <H3> ðây là ñầu ñề 3</H3> <H4> ðây là ñầu ñề 4</H4> <H5> ðây là ñầu ñề 5</H5> <H6> ðây là ñầu ñề 6</H6> </BODY> </HTML>

Kết quả:

Đây là đầu đề 1






Trang 8

2.3 Các thẻ định dạng danh sách 2.3.1 Danh sách có trật tự

Danh sách có trật tự tự động đánh số từng thành tố của danh sách.

Mã nguồn Kết quả

<OL> <LI>Yếu tố 1 <LI>Yếu tố 2 <LI>Yếu tố 3 </OL>

1. Yếu tố 1 2. Yếu tố 2 3. Yếu tố 3

2.3.2 Danh sách không có trật tự

Danh sách không có trật tự đánh dấu (chẳng hạn các núm tròn) cho từng yếu tố của danh sách.


<UL> <LI>Yếu tố 1 <LI>Yếu tố 2 <LI>Yếu tố 3 </UL>

o Yếu tố 1 o Yếu tố 2 o Yếu tố 3


<MENU> <LI>Yếu tố 1 <LI>Yếu tố 2 <LI>Yếu tố 3 </MENU>

• Yếu tố 1 • Yếu tố 2 • Yếu tố 3

2.3.3 Danh sách định nghĩa Mỗi yếu tố của danh sách bao gồm hai thành phần:

• Tiêu đề được căn lề phía trái (chỉ ra bởi thẻ <DT>) • Phần giải nghĩa được căn lề thụt hơn sang phía phải (chỉ ra bởi thẻ <DD>)


<DL> <DT>Yếu tố 1 <DD>Chú giải cho yếu tố 1 <DT>Yếu tố 2 <DD>Chú giải cho yếu tố 2 </DL>

Yếu tố 1 Chú giải cho yếu tố 1

Yếu tố 2 Chú giải cho yếu tố 2

2.4 Các thẻ định dạng ký tự 2.4.1 Các thẻ định dạng in ký tự

Sau đây là các thẻ được sử dụng để quy định các thuộc tính như in nghiêng, in đậm, gạch chân... cho các ký tự, văn bản khi được thể hiện trên trình duyệt.

<B> ... </B> <STRONG> ... </STRONG>

In chữ đậm

<I> ... </I> <EM> ... </EM>

In chữ nghiêng

Trang 9

<U> ... </U> In chữ gạch chân

<DFN> Đánh dấu đoạn văn bản giữa hai thẻ này là định nghĩa của một từ. Chúng thường được in nghiêng hoặc thể hiện qua một kiểu đặc biệt nào đó.

<S> ... </S> <STRIKE> ... </STRIKE>

In chữ bị gạch ngang.

<BIG> ... </BIG> In chữ lớn hơn bình thường bằng cách tăng kích thước font hiện thời lên một. Việc sử dụng các thẻ <BIG>lồng nhau tạo ra hiệu ứng chữ tăng dần. Tuy nhiên đối với mỗi trình duyệt có giới hạn về kích thước đối với mỗi font chữ, vượt quá giới hạn này, các thẻ <BIG> sẽ không có ý nghĩa.

<SMALL > ... </SMALL > In chữ nhỏ hơn bình thường bằng cách giảm kích thước font hiện thời đi một. Việc sử dụng các thẻ <SMALL >lồng nhau tạo ra hiệu ứng chữ giảm dần. Tuy nhiên đối với mỗi trình duyệt có giới hạn về kích thước đối với mỗi font chữ, vượt quá giới hạn này, các thẻ <SMALL > sẽ không có ý nghĩa.

<SUP> ... </SUP> Định dạng chỉ số trên (SuperScript)

<SUB> ... </SUB> Định dạng chỉ số dưới (SubScript)

<BASEFONT> Định nghĩa kích thước font chữ được sử dụng cho đến hết văn bản. Thẻ này chỉ có một tham số size= xác định cỡ chữ. Thẻ <BASEFONT> không có thẻ kết thúc.

<FONT> ... </FONT> Chọn kiểu chữ hiển thị. Trong thẻ này có thể đặt hai tham số size= hoặc color= xác định cỡ chữ và màu sắc đoạn văn bản nằm giữa hai thẻ. Kích thước có thể là tuyệt đối (nhận giá trị từ 1 đến 7) hoặc tương đối (+2,-4...) so với font chữ hiện tại.

Ví dụ: Một số thẻ định dạng kiểu chữ và kết quả thể hiện trên trình duyệt: Kiểu có tính ch ất vật lý


<b>đậm</b> đậm

<u>gạch dưới</u> gạch dưới

<i>nghiêng</i> nghiêng

<tt>teletype</tt> teletype

Kiểu có tính logic


<em>nhấn mạnh </em> nhấn mạnh

<strong>nhấn mạnh hơn</strong> nhấn mạnh hơn

Trang 10

<CENTER>Văn bản sẽ được căn giữa trang</CENTER>

<cite>trích dẫn</cite> trích dẫn

<code>code</code> code

<samp>sample</samp> sample

<kbd>keyboard</kbd> keyboard

<var>varible</var> variable

<dfn>giải thích</dfn> giải thích

2.4.2 Các thẻ canh lề

Trong trình bày trang Web của mình các bạn luôn phải chú ý đến việc căn lề các văn bản để trang Web có được một bố cục đẹp. Một số các thẻ định dạng như P,, IMG... đều có tham số ALIGN cho phép bạn căn lề các văn bản nằm trong phạm vi giới hạn bởi của các thẻ đó.

Các giá trị cho tham số ALIGN :

LEFT Căn lề trái

CENTER Căn giữa trang

JUSTIFY Căn đều hai bên

RIGHT Căn lề phải

Ngoài ra, chúng ta có thể sử dụng thẻ CENTER để căn giữa trang một khối văn bản.

Cú pháp:

2.4.3 Các thẻ ký tự đặc biệt

Ký tự & được sử dụng để chỉ chuỗi ký tự đi sau được xem là một thực thể duy nhất.

Ký tự ; được sử dụng để tách các ký tự trong một từ.

Ký tự Mã ASCII Tên chuỗi

< &#060 &lt

> &#062 &gt

& &#038 &amp

Kí tự trắng

Những ký hiệu này được dùng để chỉ các thẻ mà bạn không thể dùng chúng trong HTML. Bạn có thể dùng dấu phối hợp để thể hiện các ký tự đặc biệt.

Ký tự Dấu phối hợp

< &<;

> &>;

& &

" "

2.4.4 Trang trí màu sắc trong thiết kế website

Trang 11

Một màu được tổng hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh lá cây (Green), Xanh nước biển (Blue). Trong HTML một giá trị màu là một số nguyên dạng hexa (hệ đếm cơ số 16) có định dạng như sau:

#RRGGBB

Trong đó:

RR - là giá trị màu Đỏ.

GG - là giá trị màu Xanh lá cây.

BB - là giá trị màu Xanh nước biển.

Màu sắc có thể được xác định qua thuộc tính bgcolor= hay color=. Sau dấu bằng có thể là giá trị RGB hay tên tiếng Anh của màu. Với tên tiếng Anh, ta chỉ có thể chỉ ra 16 màu trong khi với giá trị RGB ta có thể chỉ tới 256 màu.

Một số giá trị màu cơ bản:

Màu sắc Giá tr ị Tên tiếng Anh

Đỏ

Đỏ sẫm

Xanh lá cây

Xanh nhạt

Xanh nước biển

Vàng

Vàng nhạt

Trắng

Đen

Xám

Nâu

Tím

Tím nhạt

Hồng

Da cam

Màu đồng phục hải quân

#FF0000

#8B0000

#00FF00

#90EE90

#0000FF

#FFFF00

#FFFFE0

#FFFFFF

#000000

#808080

#A52A2A

#FF00FF

#EE82EE

#FFC0CB

#FFA500

#000080

#4169E1

#7FFFD4

RED

DARKRED

GREEN

LIGHTGREEN

BLUE

YELLOW

LIGHTYELLOW

WHITE

BLACK

GRAY

BROWN

MAGENTA

VIOLET

PINK

ORANGE

NAVY

ROYALBLUE

AQUAMARINE

Cú pháp:

<BODY LINK = color ALINK = color VLINK = color BACKGROUND = url

Trang 12

BGCOLOR = color TEXT = color TOPMARGIN = pixels RIGHTMARGIN = pixels LEFTMARGIN = pixels > .... ph ần n ội dung c ủa tài li ệu ñược ñặt ở ñây </ BODY>

Ý nghĩa các tham số:

Các tham số Ý nghĩa

LINK Chỉ định màu của văn bản siêu liên kết

ALINK Chỉ định màu của văn bản siêu liên kết đang chọn

VLINK Chỉ định màu của văn bản siêu liên kết đã từng mở

BACKGROUND Chỉ định địa chỉ của ảnh dùng làm nền

BGCOLOR Chỉ định màu nền

TEXT Chỉ định màu của văn bản trong tài liệu

SCROLL YES/NO - Xác định có hay không thanh cuộn

TOPMARGIN Lề trên

RIGHTMARGIN Lề phải

LEFTMARGIN Lề trái

2.4.5 Thẻ xác định kiểu chữ <FONT> Cú pháp:

<FONT FACE = font-name COLOR = color SIZE = n > ... </FONT>

2.4.6 Văn bản siêu liên kết Để tạo ra một siêu văn bản chúng ta sử dụng thẻ <A>.

Cú pháp:

Trang 13

<A HREF = url NAME = name TABINDEX = n TITLE = title TARGET = _blank / _self > ... siêu văn bản

</A>


HREF Địa chỉ của trang Web được liên kết, là một URL nào đó.

NAME Đặt tên cho vị trí đặt thẻ siêu liên kết.

TABLEINDEX Thứ tự di chuyển khi ấn phím Tab

TITLE Văn bản hiển thị khi di chuột trên siêu liên kết.

TARGET Mở trang Web được liên kết trong một cửa sổ mới (_blank) hoặc trong cửa sổ hiện tại (_self), trong một frame (tên frame).

2.4.7 Kết nối mailto

Nếu đặt thuộc tính href= của thẻ <a> giá trị mailto:address@domain thì khi kích hoạt kết nối sẽ kích hoạt chức năng thư điện tử của trình duyệt.

<ADDRESS> Trang WEB này được <A href=”mailto:[email protected]” > WEBMASTER <\A> bảo trì <\ADDRESS>

Ví dụ:

<html> <head><title>Design Simple Website</title></head> <body bgcolor="white" link="blue" alink="white"> <font face="verdana" size="2"> Gõ [<a href="mailto:[email protected]?subject=Test&body=This is a test">vào đây</a>] để gửi e-mail cho tôi. </font> </body> </html>

Trang 14

2.4.8 Vẽ một đường thẳng nằm ngang Cú pháp:

<HR ALIGN = LEFT / CENTER / RIGHT COLOR = color NOSHADE SIZE = n WIDTH = width >


ALIGN Căn lề (căn trái, căn phải, căn giữa)

COLOR Đặt màu cho đường thẳng

NOSHADE Không có bóng

SIZE Độ dày của đường thẳng (pixel)

WIDTH Chiều dài (pixel hoặc % của bề rộng cửa sổ trình duyệt).

Ghi chú: -Thẻ này giống như thẻ BR, nó cũng không có thẻ kết thúc tương ứng. 2.5 Các thẻ chèn âm thanh, hình ảnh 2.5.1 Giới thi ệu

Liên kết với file đa phương tiện cũng tương tự như liên kết bình thường. Tuy vậy phải đặt tên đúng cho file đa phương tiện. Phần mở rộng của file phải cho biết kiểu của file.

KI ỂU PHẦN MỞ RỘNG

MÔ TẢ

Image/GIF .gif Viết tắt của Graphics Interchange Format. Khuôn dạng này xuất hiện khi mọi người có nhu cầu trao đổi ảnh trên nhiều hệ thống khác nhau. Nó được sử dụng trên tất cả các hệ thống hỗ trợ giao diện đồ hoạ. Định dạng GIF là định dạng chuẩn cho mọi trình duyệt WEB. Nhược điểm của nó là chỉ thể hiện được 256 màu. Mở rộng của chuẩn này là GIF89, được thêm nhiều chức năng cho các ứng dụng đặc biệt như làm ảnh nền trong suốt - tức là ảnh có thể nổi bằng cách làm màu nền giống với màu nền của trình duyệt.

Image/JPEG .jpeg Viết tắt của Joint Photographic Expert Group. Là khuôn dạng ảnh khác nhưng có thêm khả năng nén.Ưu điểm nổi bật của khuôn dạng này là lưu trữ được hàng triệu màu và độ nén cao nên kích thước file ảnh nhỏ hơn và thời gian download nhanh hơn. Nó là cơ sở cho khuôn dạng MPEG.

Trang 15

Tất cả các trình duyệt đều có khả năng xem ảnh JPEG.

Image/TIFF .tiff Viết tắt của Tagged Image File Format. Được Microsoft thiết kế để quét ảnh từ máy quét cũng như tạo các ấn phẩm.

Text/HTML .HTML, .htm

PostScript .eps, .ps Được tạo ra để hiển thị và in các văn bản có chất lượng cao.

Adobe Acrobat

.pdf Viết tắt của Portable Document Format. Acrobat cũng sử dụng các siêu liên kết ngay trong văn bản cũng giống như HTML . Từ phiên bản 2.0, các sản phẩm của Acrobat cho phép liên kết giữa nhiều văn bản. Ưu điểm lớn nhất của nó là khả năng WYSISYG.

Video/MPEG .mpeg Viết tắt của Motion Picture Expert Group, là định dạng dành cho các loại phim (video). Đây là khuôn dạng thông dụng nhất dành cho phim trên WEB.

Video/AVI .avi Là khuôn dnạg phim do Microsoft đưa ra.

Video/QuickTime

.mov Do Apple Computer đưa ra, chuẩn video này được cho là có nhiều ưu điểm hơn MPEG và AVI. M ặc dù đã được tích hợp vào nhiều trình duyệt nhưng vẫn chưa phổ biến bằng hai loại định dạng trên.

Sound/AU .au

Sound/MIDI .mid Là khuôn dạng dành cho âm nhạc điện tử hết sức thông dụng được nhiều trình duyệt trên các hệ thống khác nhau hỗ trợ. File Midi được tổng hợp số hoá trực tiếp từ máy tính.

Sound/RealAudio

.ram Định dạng audio theo dòng. Một bất tiện khi sử dụng các định dạng khác là file âm thanh thường có kích thước lớn - do vậy thời gian tải xuống lâu, Trái lại audio dòng bắt đầu chơi ngay khi tải được một phần file trong khi vẫn tải về các phần khác.Mặc dù file theo định dạng này không nhỏ hơn so với các định dạng khác song chính khả năng dòng đã khiến định dạng này phù hợp với khả năng chơi ngay lập tức.

VRML .vrml Viết tắt của Virtual Reality Modeling Language. Các file theo định dạng này cũng giống như HTML . Tuy nhiên do trình duyệt có thể hiển thị được cửa sổ 3 chiều nên người xem có thể cảm nhận được cảm giác ba chiều.

Trang 16

2.5.2 Chèn âm thanh vào Website Cú pháp:

<BGSOUND SRC = url LOOP = n >

- Thẻ này không có thẻ kết thúc tương ứng (</BGSOUND>). - Để file nhạc lặp lại vô hạn cần chỉ định LOOP = -1 hoặc LOOP = INFINITE. - Thẻ BGSOUND phải được đặt trong phần mở đầu (tức là nằm trong cặp thẻ HEAD ). 2.5.3 Chèn hình ảnh, đoạn video vào Website

Để chèn một file ảnh (.jpg, .gif, .bmp) hoặc video (.mpg, .avi) vào tài liệu HTML, bạn có thể sử dụng thẻ IMG .

Cú pháp:

<IMG ALIGN = TOP/MIDDLE/BOTTOM ALT = text BORDER = n SRC = url WIDTH = width HEIGHT = height HSPACE = vspace VSPACE = hspace TITLE = title DYNSRC = url START = FILEOPEN/MOUSEOVER LOOP = n >

Trong đó:

ALIGN = TOP/ MIDDLE/ BOTTOM/ LEFT/ RIGHT

Canh đoạn văn bản bao quanh ảnh

ALT = text Chỉ định văn bản sẽ được hiển thị nếu chức năng show picture của browser bị tắt đi hay hiển thị thay thế cho ảnh trên những trình duyệt không có khả năng hiển thị đồ hoạ. Văn bản này còn được gọi là nhãn của ảnh. Đối với trình duyệt có khả năng hỗ trợ đồ hoạ, dòng văn bản này sẽ hiện lên khi di chuột qua ảnh hay được hiển thị trong vùng của ảnh nếu ảnh chưa được tải về hết. Chú ý phải đặt văn bản

Trang 17

giữa hai dấu nháy kép nếu trong văn bản chứa dấu cách hay các ký tự đặc biệt - trong trường hợp ngược lại có thể bỏ dấu nháy kép.

BORDER = n Đặt kích thước đường viền được vẽ quanh ảnh (tính theo pixel).

SRC = url Địa chỉ của file ảnh cần chèn vào tài liệu.

WIDTH /HEIGHT Chỉ định kích thước của ảnh được hiển thị.

HSPACE/VSPACE Chỉ định khoảng trống xung quanh hình ảnh (tính theo pixel) theo bốn phía trên, dưới, trái, phải.

TITLE = title Văn bản sẽ hiển thị khi con chuột trỏ trên ảnh

DYNSRC = url Địa chỉ của file video.

START = FILEOPEN/MOUSEOVER

Chỉ định file video sẽ được chơi khi tài liệu được mở hay khi trỏ con chuột vào nó. Có thể kết hợp cả hai giá trị này nhưng phải phân cách chúng bởi dấu phẩy.

LOOP = n/INFINITE Chỉ định số lần chơi. Nếu LOOP = INFINITE thì file video sẽ được chơi vô hạn lần.

Ghi chú: Sử dụng thẻ IMG để đưa một file video vào Website ta viết code:

<img dynsrc="beany.mpg">

(Đoạn mã này chỉ sử dụng với trình duyệt Internet Explore)

Riêng Internet Explorer còn cho phép bạn tạo nhạc nền với thẻ đơn <bgsound> Dòng code sẽ được viết như sau:

<bgsound src="music.mid" loop="infinite">

loop="infinite" cho phép browser chạy bản nhạc không ngừng. Có rất nhiều dạng audio (*.au, *.wav, *.mid....) và video (*.mpeg, *.avi...). Nhưng có lẽ

chỉ có dạng midi (*.mid) là cỡ nhỏ nhất. Một bản nhạc 5 phút chiếm khoảng 30KB trong khi đó 5 phút dưới dạng wav lên tới 5MB. Ðể đưa chúng vào một trang web, bạn cần viết dòng html-code sau:

<embed src="music.mid" autostart="true" loop="true">

Trong đó "music.mid" là tên của file nhạc, autostart="true" chạy bản nhạc tự động,

loop="true" tự động quay lại đầu bản nhạc khi và chạy tiếp, nếu bạn chỉ muốn bản nhạc chạy một số lần nhất định lần rồi dừng, hãy thay "true" bằng "1", "2"... 2.6 Các thẻ định dạng bảng biểu

Sau đây là các thẻ tạo bảng chính:

<TABLE > ... </TABLE > Định nghĩa một bảng

<TR> ... </TR> Định nghĩa một hàng trong bảng

<TD> ... </TD> Định nghĩa một ô trong hàng

Trang 18

<TH> ... </TH> Định nghĩa ô chứa tiêu đề của cột

<CAPTION > ... </CAPTION > Tiêu đề của bảng

Cú pháp:

<TABLE WIDTH= ” 768px” ALIGN = LEFT / CENTER / RIGHT BORDER = “n“ BORDERCOLOR = color BORDERCOLORDARK = color BORDERCOLORLIGHT = color BACKGROUND = url BGCOLOR = color CELLSPACING = spacing CELLPADDING = pading > <CAPTION >Tiêu đề của bảng biểu</CAPTION > ... Định nghĩa các dòng <TR ALIGN = LEFT/CENTER/RIGHT VALIGN = TOP/MIDDLE/BOTTOM> ... Định nghĩa các ô trong dòng <TD ALIGN = LEFT / CENTER / RIGHT VALIGN = TOP / MIDDLE / BOTTOM BORDERCOLOR = color BORDERCOLORDARK = color BORDERCOLORLIGHT = color BACKBROUND = url BGCOLOR = color COLSPAN = n ( xác định số ô nối với nhau trên cùng một dòng) ROWSPAN = n ( xác định số ô nối với nhau trên cùng một cột) > ... Nội dung của ô </TD> ... </TR> ... </TABLE >

Trang 19

Ví dụ: Xem ví dụ về bảng Mã nguồn:

<html> <head><title>Design Simple Website</title></head> <body bgcolor="white" link="blue" alink="white"> <table border="1" style="border-collapse: collapse" bordercolor="blue" width="100%" cellpadding="1" cellspacing="1"> <caption> <font face="Tahoma" color="#336600" size="4">Danh sách các bài hát yêu thích</font></caption> <tr bgcolor="#123456"><td align="center"><font face="Verdana" size="2" color="#FFEEEE">Tên bài hát</font></td><td align="center"><font face="Verdana" size="2" color="#FFEEEE">Nhạc sỹ</font></td></tr> <tr><td align="center" width="50%"> Một cõi đi về</td><td align="center">Trịnh Công Sơn</td></tr> <tr><td align="center">Đêm đông</font></td><td align="center">Nguyễn Văn Thương</td></tr> <tr><td align="center" >Rong Rêu</font></td><td align="center">Tuấn Khanh</td></tr> </table> </body> </html>

Ví dụ: Xem ví dụ rowspan Mã nguồn:

<html> <head><title>Design Simple Website</title></head> <body> <table border="1" width="100%" bordercolor="blue" style="border-collapse: collapse"> <tr> <td rowspan="2" width="50%" align="center">Trộn ô dòng 1 và ô dòng 2</td> <td> </td> </tr> <tr> <td> </td> </tr> </table> </body> </html>

Ví dụ: Xem ví dụ colspan Mã nguồn:

<html> <head><title>Design Simple Website</title></head> <body> <table border="1" width="100%" bordercolor="blue" style="border-collapse: collapse"> <tr> <td colspan="2" align="center" width="50%">Trộn ô cột 1 và ô cột 2</td> </tr>

Trang 20

<tr><td> </td><td> </td></tr> </table> </body></html>

2.7 FORM 2.7.1 Thẻ FORM

Để tạo ra một form trong tài liệu HTML, chúng ta sử dụng thẻ FORM.

Cú pháp:

<FORM ACTION = url METHOD = GET | POST NAME = name >  <INPUT ...> <INPUT ...> </FORM>

Trong đó

ACTION Địa chỉ sẽ gửi dữ liệu tới khi form được submit (có thể là một trang ASP...).

METHOD Phương thức gửi dữ liệu (GET/POST)

NAME Tên của form.

Đặt các đối tượng điểu khiển (như hộp nhập văn bản, ô kiểm tra, nút bấm...) vào trang Web

Cú pháp thẻ INPUT :

<INPUT name=”” ALIGN = LEFT | CENTER | RIGHT TYPE = BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD | RADIO | RESET | SUBMIT | TEXT VALUE = value >

Ví dụ: xem ví dụ form.html Mã nguồn:

<html> <head> <title>Nhập vào thông tin cá nhân</title> </head> <body> <form method="POST" action= "table.html">

Trang 21

<table border="1" width="100%" style="border-collapse: collapse" bordercolor="#0000FF"> <tr> <td>Họ tên</td> <td><input type="text" name="T1" size="20"></td> </tr> <tr> <td>Địa chỉ</td> <td><input type="text" name="T2" size="20"></td> </tr> <tr> <td>Giới tính</td> <td><input type="radio" checked name="R1">Nam <input type="radio" name="R1">Nữ</td> </tr> </table> <p align="center"> <input type="submit" value="Submit" name="B1"> <input type="reset" value="Reset" name="B2"> </p> </form> </body> </html>

2.7.2 Tạo một danh sách lựa chọn Cú pháp:

<SELECT NAME ="tên danh sách" SIZE="chiều cao"> <OPTION VALUE =value1 SELECTED> Tên mục chọn thứ nhất <OPTION VALUE =value2> Tên mục chọn thứ hai  </SELECT>

2.7.3 Tạo hộp soạn thảo văn bản Cú pháp:

<TEXTAREA COLS=số cột ROWS=số hàng NAME =tên > Nội dung mặc định </TEXTAREA >

Trang 22

Chương 2: CSS (Cascading Style Sheets)

2.1 Giới thi ệu chung CSS là cách định dạng tốt nhất cho Website bởi vì tính thống nhất, kế thừa và hiệu quả

của nó. Có 3 cách để thêm CSS vào một trang Web:

� Sử dụng thuộc tính Style. � CSS nhúng bên trong trang Web. � Liên kết đến file CSS.

2.2 Sử dụng thuộc tính Style Sử dụng thuộc tính Style với cú pháp như sau:

Style=”Property1: value1; Property2: value2; …” Thuộc tính Style sẽ được dùng cho bất kỳ các thẻ HTML nào.

Ví dụ: Xem ví dụ inline style Mã nguồn:

<html> <head><title>Design Simple Website</title></head> <body> <p style="color: blue; font-family: arial; font-size: 20px"> Dòng văn bản</p> <p style="color: blue; font-family: arial; font-size: 20px">Hello everybody</p> </body> </html>

Ghi chú: - Cách này người ta ít sử dụng do đã có thẻ <FONT> để định dạng cho văn bản. 2.3 CSS nhúng bên trong trang Web

Sử dụng cặp thẻ <STYLE> và </STYLE> được đặt trong thẻ <HEAD>, giữa cặp thẻ <STYLE> và </STYLE> là tập hợp một hoặc nhiều yếu tố nhằm định dạng cho các thẻ HTML. Cú pháp:

<style type=”text/css”>  </style>

Để sử dụng các yếu tố bên trong cặp thẻ <STYLE> ta sử dụng thuộc tính class=”tên_yếu_tố” bên trong các thẻ HTML có thuộc tính class. Ví dụ: Xem ví dụ Embleded Style Mã nguồn:

Trang 23

<html> <style type="text/css">  </style> <body> <center> <form> <input type="button" value="send"class=" text "> </form> <div class=" text ">This is a test</div> </body> </html>

Ghi chú: - Một số trình duyệt không hỗ trợ CSS thì nó sẽ hiển thị nội dung các yếu tố bên trong cặp thẻ <STYLE> và </STYLE> như là nội dung văn bản bình thường. Do vậy ta nên sử dụng cặp thẻ  để tránh lỗi trên, với cặp thẻ  thì trình duyệt hỗ trợ CSS sẽ dịch bình thường. - Một nhược điểm của cách này là chỉ định dạng cho trang Web hiện thời chứ không sử dụng được cho các trang khác. 2.4 Liên kết đến file CSS

Một cách hiệu quả để thêm các định dạng CSS trong trang Web là tạo một file CSS riêng và tham chiếu đến nó.

Cách này rất hiệu quả bởi vì nó có tính kế thừa và tạo ra sự thống nhất trong việc trang trí cho trang Web.

Ta sử dụng thẻ LINK được đặt trong thẻ HEAD để chỉ đường dẫn đến file CSS theo cú pháp sau:

<LINK REL=” STYLESHEET” HREF=” URL” type=”text/css”> Ví dụ:

File link_style.html

Trang 24

<html> <head> <title>Design Simple Website></title> <link rel=”stylesheet” href=”CSS/default.css”> </head> <body> <center> <form> <input type="button" value="send"class=" button "> </form> <div class=" text ">This is a test</div> </body> </html>

File default.css

.button{ background-color: #7083c7; color: #ffffff; border-left: 1px solid #9dbcff; border-right: 1px solid navy; border-top: 1px solid #9dbcff; border-bottom: 1px solid navy } .text{ font-family: arial, verdana; color: red; font-size: 12px; } body { SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #7083c7 }

2.5 Khảo sát file CSS 2.5.1 Cấu trúc cơ bản của một file CSS

body { background-color: #CCFFFF; color: #0000FF; font-family: Verdana, Arial, Helvetica, sans-seri f; font-size: 12px; } a { color: #000099; text-decoration: underline; } a:visited { color: #990000; }

Trang 25

a:hover { color: #FF0000; text-decoration: underline; } //...m ột s ố các y ếu t ố khác... .text{ font-family: arial, verdana; color: red; font-size: 12px; }

Ghi chú: - Với các thẻ có sẵn của HTML thì ta không cần dấu chấm (.) - Để sử dụng các yếu tố được định nghĩa trong file CSS ta sử dụng các thuộc tính class=”tên_yếu_tố” hay id=”tên_yếu_tố” kết hợp với các thẻ HTML. Nếu yếu tố nào được sử dụng với thuộc tính id thì tên yếu tố đó nên có dấu # đứng trước. - Ngoài ra có thể sử dụng các thẻ: <span class=”tên_yếu_tố”>...</span> <span id=”tên_yếu_tố”>...</span> <div class=”tên_yếu_tố”>...</div> <div id=”tên_yếu_tố”>...</div> 2.5.2 Một số thuộc tính cơ bản 2.5.2.1 Các thuộc tính của hộp nhập

•••• Border •••• Border-bottom •••• Border-bottom-width •••• Border-color •••• Border-left •••• Border-left-width •••• Border-right •••• Border-right-width

•••• Border-top •••• Border-top-width •••• Border-width •••• Height •••• Width •••• Margin •••• Margin-bottom •••• Margin-left

•••• Margin-right •••• Margin-top •••• Padding •••• Padding-bottom •••• Padding-left •••• Padding-right •••• Padding-top

2.5.2.2 Các thuộc tính của đường viền Cú pháp : Border : <giá trị>

Chức năng: Tạo đường viền khung với chiều rộng, kiểu đường viền và màu đường viền

Các giá trị có thể : <border-width> | <border-style> | <color>

Áp dụng với : tất cả các phần tử

Ví dụ : H2 { border: groove 3em } // tạo đường viền có màu groove và độ rộng 3 em A { border: solid blue } A:visited { border: thin dotted #800080 } A:active { border: thick double red }

Các thuộc tính như Border-Bottom, Border-Left, Border-Right, Border-Top đều có thực hiện tương tự. 2.5.2.3 Thuộc tính Border-width

Trang 26

Cú pháp : Border-width : <giá trị>

Chức năng: Quy định độ rộng đường viền

Các giá trị có thể : thin | medium | thick | <độ dài>

Áp dụng với : Tất cả các phần tử

2.5.2.4 Thuộc tính height Cú pháp : Height : <giá trị>

Chức năng Quy định chiều cao cho các khối được chỉ định

Các giá trị có thể : <độ dài> | auto

Áp dụng với : Các khối và thay thế cho các phần tử đã có . • Chú ý rằng khi áp dụng Height thì giá trị tương ứng trong html sẽ bị thay thế ví dụ : .vd { Height : 200px } thì đối với bất cứ các khối nào trong file html có class= vd đều có height =200px .

Ví dụ : . banner { width: 760px; height: 40px; } .vd { Height : 200px; }

2.5.2.5 Thuộc tính Margin Cú pháp : Margin : <giá trị>

Chức năng Quy định lề của khối so với trang giấy.

Các giá trị có thể : <độ dài > | <tỉ lệ phần trăm> | auto


Ví dụ : BODY { margin: 0 } P { margin: 2em 4em } Lề trên (Top) và dưới (Bottom)= 2em, Lề trái (Left) và lề phải (Right) = 4em. Margin : 0 nghĩa là căn lề trái, phải, trên, dưới đều = 0

Các thuộc tính như Margin-Top, Margin-left, Margin-Bottom, Margin-Right đều thực hiện tương tự

2.5.2.6 Thuộc tính Padding Cú pháp : Padding : <giá trị>

Chức năng Quy định khoảng cách từ đường viền (Border) của một bảng hoặc cột tới các chữ trong bảng đó.

Các giá trị có thể : <độ dài > | <tỉ lệ phần trăm> Padding là tập hợp của tất cả các padding (padding-right, padding-left,....) vì thế giá trị của nó có tác dụng tới toàn bộ .


Ví dụ : Table { padding : 5px }: Khoảng cách giữa chữ và đường viền là 5px

Các thuộc tính padding-Left, Padding-Right, Padding-Bottom, Padding-Top đều thực hiện tương tự trên.

2.5.2.7 Thuộc tính Width Cú pháp : Width : <giá trị>

Chức năng: Quy định độ rộng của các khối, bảng hoặc các cột trong bảng

Các giá trị có thể : <độ dài> | <tỉ lệ phần trăm> | auto

Trang 27

Áp dụng với : Các khối và thay thế cho các phần tử đã có . • Chú ý rằng khi áp dụng Width thì giá trị tương ứng trong html sẽ bị thay thế Ví dụ : .vd { width : 200px } thì đối với bất cứ các khối nào trong file html có class= vd đều có width =200px .

Ví dụ : INPUT.button { width: 10em } .vd { width : 200px }

2.5.2.8 Thuộc tính color và Background Gồm các thuộc tính sau:

• Corlor • Background • Background-attachment • Background-color • Background-image • Background-position

• Background-repeat

Cú pháp : corlor : <giá trị>

Chức năng Quy định màu cho các phần tử được áp dụng

Các giá trị có thể : Các mầu theo bảng mầu


Ví dụ : P { color : red } H1 { color : #ffffff }

Cú pháp : Background : <giá trị>

Chức năng Quy định nền của các phần tử như body, bảng, …được áp dụng

Các giá trị có thể : <background-color> | <background-image> | <background-repeat> | <background-attachment> | <background-position>

- <background-color>: màu nền - <background-image>: ảnh nền - <background-repeat>: quy định chế độ lặp lại ảnh - <background-attachment>: quy định chế độ hiển thị ảnh nền khi

cuộn chuột Áp dụng với : Tất cả các phần tử

Ví dụ : body {background: #ffffff url(“/ANH/banner.gif”) ; margin: 0} TABLE { background: red url(“/ANH/Left-Corner.gif”) no-repeat bottom }

2.5.2.9 Các thuộc tính về font •••• Font •••• Font-family •••• Font-size •••• Font-style •••• Font-variant

•••• Font-weight

Trang 28

Cú pháp font : <giá trị>

Chức năng Thiết lập các thuộc tính cho font chữ như tên font, kích thước font,….

Các giá trị có thể : <font-family> | <font-size> | <font-variant> | <font-weight> | <font-style> | <line-height>

• 1 Số Font thông dụng (cài sẵn trong Windows nên ko bị lỗi font) : Arial, tahoma, verdana, Times new roman.


Ví dụ : P { font : tahoma, 12pt, normal, bold }

Cú pháp font-family : <tên font> Chức năng Thiết lập danh sách font cho khối chọn hoặc trang Web, nên chọn các

font thông dụng được cài đặt sẵn như Arial, Veranda, Tahoma, Times new roman

Các giá trị có thể <tên font>

Áp dụng với Tất cả các phần tử

Ví dụ Table, tr, td { font-family : arial, tahoma, verdana ; font-size : 13}

Cú pháp : font-size : <kíck cỡ tuyệt đối> | <kíck cỡ tương đối> | <độ dài> | <tỉ lệ

phần trăm> Chức năng Thay đổi kích thước font, nên sử dụng kiểu định dạng px, Các giá trị có thể : - < kíck cỡ tuyệt đối >

xx-small | x-small | small | medium | large | x-large | xx-large - < kíck cỡ tương đối > smaller | larger - < độ dài> - < tỉ lệ phần trăm>


Ví dụ : H1 { font-size: large } P { font-size: 12pt }

LI { font-size: 90% } STRONG { font-size: larger}

Cú pháp : font-style : <giá trị>

Chức năng Thiết lập kiểu font

Các giá trị có thể : normal | ilatic | oblique


Ví dụ : P { font-style : italic } H1 { font-style : normal }

Trang 29

Cú pháp font-variant : <giá trị>

Chức năng Thiết lập các biến thể của font • Kiểu SMALL-CAPS lớn hơn chữ thường 1 chút và nhỏ hơn chữ viết hoa, ta hãy thử so sánh : SMALL-CAPS--SMALL-CAPS

Các giá trị có thể normal | SMALL-CAPS


Ví dụ Span { font-variant : small-caps ; font-size : 12pt}

Cú pháp font-weight : <giá trị> Chức năng Thiết lập độ nét của chữ

Các giá trị có thể normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Áp dụng với tất cả các phần tử

Ví dụ p { font-weight : bold } H1 { font-weight : normal }

• Chú ý không cần để ý đến giá trị : 100,200..900 làm gì, thường thì nó thể hiện việc đậm nhạt hơn của chữ !

2.5.2.10 Các thuộc tính Text •••• Letter-spacing •••• Line-height •••• Text-align •••• Text-decoration •••• Vertical-align

•••• Word-spacing

Cú pháp letter-spacing : <giá trị> Chức năng • letter-spacing xác định khoảng cách giữa các kí tự được

thể hiện Các giá trị có thể normal | <độ dài>


Ví dụ k h oả n g c á c h n à y l à 4 p x p {letter-spacing : 1px}: Khoảng cách giữa các kí tự của đoạn là 1px

Cú pháp Line-height : <giá trị>

Chức năng Quy định chiều cao vùng chứa đoạn văn bản

Các giá trị có thể normal | <number> | <tỉ lệ phần trăm> | <độ dài>


Ví dụ . vd {line-height:20px }

Trang 30

Cú pháp Text-align : <giá trị> Chức năng Cho phép canh lề đoạn văn bản (tương tự thẻ DIV)

Các giá trị có thể : left | right | center | justify - left: Canh trái - Right: Canh phải - Center: Canh giữa - Justify: Canh đều


Ví dụ : .vd { text-align: center }

Cú pháp : text-decoration : <giá trị>

Chức năng Thiết lập các hiệu ứng lên văn bản

Các giá trị có thể : none | underline | overline | line-through | blink - None: Không - Underline: chữ gạch dưới - Overline: chữ cao hơn dòng - Line through: gạch xuyên chữ - Blink: Chữ nhấp nháy


Ví dụ : a {corlor: #ffffff ; text-decoration: none } a :visited {corlor: red ; text-decoration: underline }

Cú pháp : vertical-align : <giá trị>

Chức năng: Canh văn bản theo chiều dọc

Các giá trị có thể : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <tỉ

lệ phần trăm> Áp dụng với : Tất cả các phần tử Ví dụ : .vd { vertical-align: super }

Cú pháp word-spacing : <giá trị>

Chức năng Xác định khoảng cách giữa các từ

Các giá trị có thể Normal | <độ dài>


Ví dụ p {word-spacing : 12px} <P class= “p”> Chào các bạn </P> //khoảng cách giữa các từ này là 12px

2.5.3 Tạo file CSS với công cụ Rapid CSS 2008 (HS nghiên cứu) Ví dụ: Xem ví dụ finish_css Mã nguồn:

finish_css.html

Trang 31

<html> <head> <link rel="stylesheet" href="Skin/skin.css"> <title>Design Simple Website</title> </head> <body> <table border="1" width="100%" id="table1" height="422" style="border-collapse: collapse" bordercolor="#FF915D"> <tr> <td colspan="2" class="banner"></td> </tr> <tr> <td width="145" valign="top"> <table border="1" width="100%" id="table2"> <tr> <td class="MenuHeader">Danh mục địa phương</td> </tr> <tr> <td class="SubMenu">Thành Phố Huế</td> </tr> <tr> <td class="SubMenu">Hương Thủy</td> </tr> <tr> <td class="SubMenu">Phú Vang</td> </tr> <tr> <td class="SubMenu">Phú Mậu</td> </tr> <tr> <td class="SubMenu">Hương Sơ</td> </tr> <tr> <td class="SubMenu">Bình Điền</td> </tr> <tr> <td class="SubMenu">Hương Văn</td> </tr> <tr> <td class="SubMenu">Kim Long</td> </tr> <tr> <td class="SubMenu">Hương Vinh</td> </tr>

Trang 32

</table> </td> <td valign="top" class="noidungtin> Đây là Website giới thiệu một số địa phương trên địa bàn tỉnh thừa thiên huế.<p>Tỉnh thừa thiên huế bao gồm một số các địa phương sau:</p> <ol> <li>Thành Phố Huế</li> <li>Hương Thủy</li> <li>Phú Vang</li> <li>Phú Mậu</li> <li>Hương Sơ</li> <li>Bình Điền</li> <li>Hương Văn</li> <li>Kim Long</li> <li>Hương Vinh</li> </ol> </td> </tr> <tr> <td colspan="2" class="footer"></td> </tr> </table> </body> </html>

Tạo file skin.css lưu vào thư mục Skin với mã nguồn như sau: /*mau nen cho toan trang*/ /*trang hien dai*/ body { /*background:#cccccc; background-image:url(../images/skins/hiendai/bg.gif);*/ text-align:center; margin-bottom:5px; margin-left:5px; margin-right:5px; margin-top:5px; /*-------chữ nó có gạch để thế------------*/ SCROLLBAR-FACE-COLOR: #dedfde; SCROLLBAR-HIGHLIGHT-COLOR: white; SCROLLBAR-SHADOW-COLOR: #dedfde; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: black; SCROLLBAR-TRACK-COLOR: #dedfde; SCROLLBAR-DARKSHADOW-COLOR: #424142;

Trang 33

} td { font-family:Arial,Times New Roman, Tahoma; font-size:10pt; } a { text-decoration:none; color:#000000; } a:hover { color:#e30000; text-decoration:none; } .a:Visited { color:#000000; } .Banner { height:100px; background-image:url(../images/banner.jpg);*/ } /*Áp dụng cho nền của submenu trái thông thường */ .SubMenu { /*BORDER-TOP: #FFFFFF 1px solid;*/ PADDING-LEFT: 20px; FONT-WEIGHT: bold; FONT-SIZE: 10px; PADDING-BOTTOM: 2px; COLOR: #000000; PADDING-TOP: 2px; BACKGROUND-COLOR: #ffffff; /*BORDER-TOP:solid 1px white;*/ BORDER-BOTTOM: #aaa 1px dashed; FONT-FAMILY: verdana, Arial,tahoma; TEXT-DECORATION: none; height:20px; } /*Áp dụng cho nền của submenu trái khi chọn */ .SubMenuSelect { PADDING-LEFT: 20px; FONT-WEIGHT: bold; FONT-SIZE: 10px; PADDING-BOTTOM: 2px; COLOR: #770000; PADDING-TOP: 2px;

Trang 34

BACKGROUND-COLOR: #D9D9FF; BORDER-BOTTOM: #aaa 1px dashed; /*BORDER-TOP:solid 1px white;*/ FONT-FAMILY: verdana, Arial,tahoma; TEXT-DECORATION: underline; cursor:hand; height:20px; } /*Áp dụng cho nền của submenu trái khi di chuyển */ .SubMenuOver { /*BORDER-TOP: #FFFFFF 1px solid;*/ PADDING-LEFT: 20px; FONT-WEIGHT: bold; FONT-SIZE: 10px; PADDING-BOTTOM: 2px; COLOR:#990000; PADDING-TOP: 2px; BACKGROUND-COLOR: #FAD570; /*BORDER-TOP:solid 1px white;*/ BORDER-BOTTOM: #aaa 1px dashed; FONT-FAMILY: verdana, Arial,tahoma; TEXT-DECORATION: none; CURSOR: hand; height:20px; /*background-image: url(../Images/menu.gif);*/ } /*--------------------------*/ .MenuHeader { FONT-WEIGHT: bold; FONT-SIZE: 10px; text-align:right; padding-right:5px; padding-left:5px; COLOR: blue; LINE-HEIGHT: 25px; vertical-align:middle; FONT-FAMILY: Verdana,Tahoma,arial; } .MenuHeader:hover { FONT-WEIGHT: bold; FONT-SIZE: 10px; padding-right:5px; padding-left:5px; COLOR:#ffff00;

Trang 35

cursor:hand; LINE-HEIGHT: 25px; vertical-align:middle; FONT-FAMILY: Verdana,Tahoma,arial; } .Footer { /*background:red;63,8A,DE */ font-family:Verdana,arial,tahoma,time Times New Roman; font-size:8pt; font-weight:normal; color:#ffffff; text-align:left; padding-left:10px; background-image:url(../images/footer_bg.jpg); height:27px; } .noidungtin { padding-left:5px; padding-bottom:2px; padding-top:2px; padding-right:5px; text-align:justify; } .tinlienket { font-family: verdana,arial,Tahoma; font-size: 8pt; color:#333333; padding-top:2px; padding-bottom:2px; padding-left:5px; padding-right:2px; width:auto; cursor:hand; } .tinlienket:hover { font-family: verdana,arial,Tahoma; font-size: 8pt; color:#800000; padding-left:5px; padding-top:2px;

Trang 36

padding-bottom:2px; padding-right:2px; text-decoration:underline; cursor:hand; width:auto; }

Trang 37

Chú ý:

Ghi chú không được đặt trong cặp thẻ <- và -> như ghi chú trong file HTML. Cú pháp của JavaScript tương tự cú pháp của C nên có thể sử dụng // hay /* ... */.

Chương 3: JavaScript 2.1 Giới thi ệu chung - 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. - 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. 2.2 Cách thức nhúng JavaScript vào file HTML

Chúng ta có thể nhúng JavaScript vào một file HTML theo một trong các cách sau đây: � Sử dụng các câu lệnh và các hàm trong cặp thẻ <SCRIPT> � Sử dụng các file nguồn JavaScript � Sử dụng một biểu thức JavaScript làm giá trị của một thuộc tính HTML � 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ả. 2.3 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” type=”text/javascript”> //Viết mã JavaScript ở đây ….. </SCRIPT>

2.4 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.

Cú pháp:

<SCRIPT SRC=”path/file_name.js” language=”javascript” type=”text/javascript”> ........ </SCRIPT>

Chú ý: - 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ó thể đưa thêm các câu lệnh JavaScript nằm trong cặp thẻ <SCRIPT> và </SCRIPT> có chứa thuộc tinh SRC. - 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à các định nghĩa hàm.

Trang 38

2.5 Hiển thị một dòng Text trên Website Đối tượng document trong JavaScript được thiết kế sẵn hai cách thức để xuất một dòng

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

object_name.property_name Dữ liệu mà cách 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"); document.writeln('Test');

Cách thức write () xuất ra màn hình xâu Text nhưng không xuống dòng, còn cách thức writeln() sau khi viết xong dòng Text tự động có khoảng trắng ở cuối dòng. Hai cách thức này đều cho phép xuất ra thẻ HTML. Ví dụ: Xem ví dụ Document.html

Mã nguồn:

<HTML><HEAD> <meta http-equiv="ConHoTent-Language" conHoTent="en-us"> <meta http-equiv="ConHoTent-Type" conHoTent="text/html; charset=windows-1252"> <TITLE>Design Simple Website</TITLE> </HEAD> <BODY> <p>Đây là dòng văn bản bình thường.<BR> <B> <SCRIPT LANGUAGE="JavaScript" type=”text/javascript”> document.write("Đây là dòng văn bản in đậm!.</B>"); </SCRIPT> </BODY></HTML>

2.6 Giao tiếp với người sử dụng thông qua hộp thoại 2.6.1 Hàm Alert Chức năng: Thông báo một hộp thoại đến người sử dụng. Cú pháp: alert(“dòng văn bản”); Thông thường, hàm alert() được sử dụng trong các trường hợp: � Thông tin đưa vào form không hợp lệ. � Kết quả sau khi tính toán không hợp lệ. � Khi dịch vụ chưa sẵn sàng để truy nhập dữ liệu. Ví dụ: Xem ví dụ alert.html Mã nguồn:

<html> <head> <meta http-equiv="ConHoTent-Language" conHoTent="en -us"> <meta http-equiv="ConHoTent-Type" conHoTent="text/h tml; charset=utf-8"> <title>H ọ tên</title> </head>

Trang 39

<body> <script language="javascript" type="text/javascript "> function kiemtradulieu(){ alert("Vui lòng nh ập vào d ữ li ệu!"); } </script> <form method="POST" action="--WEBBOT-SELF--"> <table border="1" width="100%" id="table1" style="border-collapse: collapse" bordercolor="#000 0FF"> <tr> <td width="143">H ọ tên</td> <td><input type="text" name="T1" size="38"></td> </tr> <tr> <td width="143"> ðịa ch ỉ</td> <td><input type="text" name="T2" size="53"></td> </tr> </table> <p align="center"> <input type="submit" onclick="kiemtradulieu();" value="Update" name="B1"><input type="reset" value= "Reset" name="B2"></p> </form> </body> </html>

2.6.2 Hàm Prompt Chức năng: Thông báo một hộp thoại đến người sử dụng và yêu cầu người sử dụng nhập vào một giá trị nào đó. Cú pháp:

Prompt(“ ðoạn v ăn b ản”, “Giá tr ị mặc ñịnh ñược gán”); Ví dụ:

<HTML> <HEAD> <meta http-equiv="ConHoTent-Type" conHoTent="text/h tml; charset=utf-8"> <TITLE>Design Simple Website</TITLE> <SCRIPT LANGUAGE= “JavaScript” type=”text/javascrip t”> var name=window.prompt(“Hello! What’s your name ? ”,””); document.write(“Hello ” + name + “ ! I hope you lik e JavaScript ”); </SCRIPT> </HEAD> <BODY>

Trang 40

</BODY> </HTML>

2.6.3 Hàm Comfirm Chức năng: Thông báo một câu hỏi Yes/No cho người sử dụng lựa chọn. Cú pháp: Confirm(“Câu h ỏi?”); Ví dụ:

<html> <head> <meta http-equiv="ConHoTent-Type" conHoTent="text/h tml; charset=utf-8"> <title>Design Simple Website</title> </head> <body> <script language="javascript" type="text/javascript "> var ans=window.confirm("B ạn c ần ti ền không?"); if(ans){ document.write("Tôi cho b ạn 2$"); } else{ document.write("B ạn cho tôi 20$"); } </script> </body> </html>

2.7 Biến trong JavaScript 2.7.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 ngang 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. 2.7.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ụ:

Trang 41

<html> <head> <meta http-equiv="ConHoTent-Type" conHoTent="text/h tml; charset=utf-8"> <title>Design Simple Website</title> </head> <body> <script language="javascript" type="text/javascript "> var num=12; //num += 20; num = num + 20; var temp ="There are " + num + " apples on the tabl e."; document.write(temp); </script> </body> </html>

Trình diễn dịch JavaScript sẽ xem biến num có kiểu nguyên khi cộng với 20 và có kiểu chuỗi khi kết hợp với biển temp.

Trong JavaScript, có bốn kiểu dữ liệu cơ bản sau: kiểu số nguyên, kiểu dấu phẩy động, kiểu logic và kiểu chuỗi. 2.8 Xây dựng các biểu thức trong JavaScript 2.8.1 Định nghĩa và phân loại biểu thức Về cơ bản có ba kiểu biểu thức trong JavaScript:

� Số học: Nhằm để lượng giá giá trị số. Ví dụ (3+4) được đánh giá bằng 7. � Chuỗi: Nhằm để đánh giá chuỗi. Ví dụ "The dog barked" + barktone + "!" là The dog

barked ferociously!. � 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 = (tuoi>60) ? "già" : "trẻ";

Trong ví dụ này biến state được gán giá trị "già" nếu giá trị của biến tuoi lớn hơn 32; trong trường hợp ngược lại nó nhận giá trị "trẻ". 2.8.2 Các toán tử 2.8.2.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

Trang 42

x = x % y x % = y

2.8.2.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

2.8.2.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: x=4; y=5; z=++x – y--; x=5; z=0; y=4

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.

2.8.2.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ụ: "abc" + "xyz" được "abcxyz"

2.8.2.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.

2.8.2.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.

Trang 43

& 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

2.9 Các cấu trúc lệnh của JavaScript 2.9.1 Lệnh điều kiện if ... else Cú pháp

if ( < ñi ều ki ện> )

{

//Các câu l ệnh v ới ñi ều ki ện ñúng

}

else

{

//Các câu l ệnh v ới ñ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;

Trang 44

}

else

document.write(“x không b ằng 10.”); 2.9.2 Câu lệnh lặp 2.9.2.1 Lệnh 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>

<HEAD>

<TITLE>For loop Example</TITLE>

<SCRIPT LANGUAGE= "JavaScript" type=”text/javascrip t”>

for (x=1; x<=10 ; x++)

{

y=x*25;

document.write( "x =" + x + ";y= " + y + "<BR>" );

}

</SCRIPT>

</HEAD>

<BODY></BODY>

</HTML>

2.9.2.2 Lệnh 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ụ:

<HTML>

<HEAD>

<TITLE>While loop Example</TITLE>

<SCRIPT LANGUAGE= "JavaScript" type=”text/javascrip t”>

x=1; while (x<=10) { y=x*25;

Trang 45

document.write( "x=" + x + "; y = " + y + "<BR>"); x++;

}

</SCRIPT>

</HEAD>

<BODY></BODY>

</HTML>

2.9.2.3 Lệnh 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ụ:

x=1;

while (x<100)

{

if (x<50) break;

x++;

} 2.9.2.4 Lệnh 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++;

}

2.10 Các câu lệnh thao tác trên đối tượng JavaScript là một ngôn ngữ dựa trên đối tượng, do đó nó có một số câu lệnh làm việc

với các đối tượng.

Trang 46

2.10.1 Lệnh For...in Câu lệnh này được sử dụng để lặp tất cả các thuộc tính (properties) của một đối tượng.

Tên biến có thể là một giá trị bất kỳ, chỉ cần thiết khi bạn sử dụng các thuộc tính trong vòng lặp. Ví dụ sau sẽ minh hoạ điều này

Cú pháp for (< variable> in < object>)

{

//Các câu l ệnh

}

Ví dụ Lấy ra tất cả các thuộc tính của đối tượng Window và in ra tên của mỗi thuộc tính.

<HTML>

<HEAD>

<TITLE>For in Example </TITLE>

<SCRIPT LANGUAGE= "JavaScript">

document.write("The properties of the Window objec t are: <BR>");

for (var x in window)

document.write(" "+ x + ", ");

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

2.10.2 This

Từ khoá this được sử dụng để chỉ đối tượng hiện thời.

Cú pháp: this [.property]

Trang 47

2.10.3 New Biến new được thực hiện để tạo ra một thể hiện mới của một đối tượng

Cú pháp: objectvar = new object_type ( param1 [,param2]... [ ,paramN])

Ví dụ:

<HTML>

<HEAD>

<TITLE>New Example </TITLE>

<SCRIPT LANGUAGE= "JavaScript" type="text/javascrip t">

function person(first_name, last_name, age, sex)

{

this.first_name=first_name;

this.last_name=last_name;

this.age=age;

this.sex=sex;

}

//nhap vao so nguoi n

if (n>0)

for (var i=1; i<=n; i++)

{

//khoi tao nguoi thu i

//nhap vao ten

//nhap vao ho

//nhap vao tuoi

person=new person(

}

person1= new person("Th ủy", " ðậu Bích", "23", "Female");

person2= new person("Chung", "Nguy ễn B ảo", "24", "Male");

person3= new person("Bình", "Nguy ễn Nh ật", "24", "Male");

person4= new person("Hoàn", " ðỗ V ăn", "24", "Male");

document.write ("1. " + person1.last_name + " " + person1.first_name + "<BR>" );

document.write("2. " + person2.last_name +" "+ person2.first_name + "<BR>");

document.write("3. "+ person3.last_name + " " + person3.first_name + "<BR>");

document.write("4. " + person4.last_name + " " + person4.first_name + "<BR>");

</SCRIPT>

</HEAD>

<BODY>

Trang 48

</BODY>

</HTML>

Chú ý:

Sau khi tạo đối tượng person có các thuộc tính firstname, lastname, age, sex. Chú ý rằng từ khoá this được sử dụng để chỉ đối tượng trong hàm person . Sau đó ba thể hiện của đối tượng person được tạo ra bằng lệnh new 2.10.4 Lệnh With

Lệnh này được sử dụng để thiết lập đối tượng ngầm định cho một nhóm các lệnh, bạn có thể sử dụng các thuộc tính mà không đề cập đến đối tượng.

Cú pháp: with (object)

{

// statement

}

Ví dụ: Ví dụ sau chỉ ra cách sử dụng lệnh with để thiết lập đối tượng ngầm định là document

và có thể sử dụng phương thức write mà không cần đề cập đến đối tượng document

<HTML>

<HEAD>

<TITLE>With Example </TITLE>


with (document)

{

write(“This is an exemple of the things that can be done <BR>”);

write(“With the <B>with<B> statment. <P>”);

write(“This can really save some typing”);

}

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

Trang 49

2.11 Hàm trong JavaScript 2.11.1 Hàm do người dùng định nghĩa

JavaScript cũg 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 đó.

Lệnh function được sử dụng để tạo ra hàm trong JavaScript.

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

{

//các câu l ệnh

}

Ví dụ: Ví dụ sau minh hoạ cách thức tạo ra và sử dụng hàm như là thành viên của một đối

tượng. Hàm printStats được tạo ra là phương thức của đối tượng person

<HTML>

<HEAD>

<TITLE>Function Example </TITLE>


function person(first_name, last_name, age, sex, pr intStats)

{



this.age=age;

this.sex=sex;

this.printStats=printStats;

}

function printStats()

{

with (document)

{

write (" Name :" + this.last_name + " " + this.firs t_name + "<BR>" );

write("Age :"+this.age+"<BR>");

write("Sex :"+this.sex+"<BR>");

}

}

person1= new person("Thuy", "Dau Bich", "23", "Fema le");

person2= new person("Chung", "Nguyen Bao", "24", "M ale");

person3= new person("Binh", "Nguyen Nhat", "24", "M ale");

person4= new person("Hoan", "Do Van", "23", "Male") ;

person1.printStats();

Trang 50




</SCRIPT>

</HEAD>

<BODY> </BODY>

</HTML>

2.11.2 Các hàm có sẵn 2.11.2.1 Hàm 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: Tên_biến=eval (bất kỳ biểu thức hay lệnh hợp lệ trong Java)

Ví dụ:

<HTML>

<HEAD>

<TITLE>New Example </TITLE>

<SCRIPT LANGUAGE= "JavaScript" type="text/javascrip t">

function person(first_name, last_name, age, sex)

{



this.age=age;

this.sex=sex;

}

person1= new person("Th ủy", " ðậu Bích", "23", "Female");

person2= new person("Chung", "Nguy ễn B ảo", "24", "Male");

person3= new person("Bình", "Nguy ễn Nh ật", "24", "Male");

person4= new person("Hoàn", " ðỗ V ăn", "24", "Male");

// ñoạn code thay th ế cho ví d ụ tr ước

for(i=1;i<=4;i++)

{

human=eval("person"+i);

document.write(i + ". " + human.last_name +" " + human.first_name + "<BR>");

}

</SCRIPT>

</HEAD>

<BODY>

Trang 51

</BODY>

</HTML>

2.11.2.2 Hàm 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>


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>

Kết quả:

Trang 52

2.11.2.3 Hàm 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 Exemple </TITLE>


document.write("This script will show how diffrent strings are ");

document.write("Converted using parseFlo at<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>

2.12 Mảng Mặc dù JavaScript không hỗ trợ cấu trúc dữ liệu mảng nhưng Netscape tạo ra phương

thức cho phép bạn tự tạo ra các hàm khởi tạo mảng như sau: function InitArray(NumElements){ this.length = numElements; for (var x=1; x<=numElements; x++){ this[x]=0 } return this; }

Nó tạo ra một mảng với kích thước xác định trước và điền các giá trị 0. Chú ý rằng thành phần đầu tiên trong mảng là độ dài mảng và không được sử dụng. Để tạo ra một mảng, khai báo như sau: myArray = new InitArray (10)

Nó tạo ra các thành phần từ myArray[1] đến myArray[10] với giá trị là 0. Giá trị các thành phần trong mảng có thể được thay đổi như sau:

myArray[1] = "Ngh ệ An"

myArray[2] = "Lào"

Sau đây là ví dụ đầy đủ:

Trang 53

<HTML><HEAD> <TITLE> Array Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript"> function InitArray(numElements) { this.length = numElements; for (var x=1; x<=numElements; x++){ this[x]=0 } return this; } myArray = new InitArray(10); myArray[1] = "Ngh ệ An"; myArray[2] = "Hà N ội"; document.write(myArray[1] + "<BR>"); document.write(myArray[2] + "<BR>"); </SCRIPT> </HEAD> <BODY></BODY> </HTML>

2.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 tải một văn bản. 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 Functi on">

Ví dụ: Cách 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();">

Chú ý: - Đoạn mã của chương trình xử lý sự kiện thực chất 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.

Trang 54

Ví dụ: <INPUT TYPE=TEXT NAME="AGE" onChange="alert(‘abc’); confirm(‘cde’);">

- 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ị xoá từ thành phần 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

Sau đây là bảng các chương trình xử lý sự kiện có sẵn của một số đối tượng. Các đối tượng này sẽ được trình bày kỹ hơn trong phần sau.

Đối tượng Các sự kiện có sẵ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

Trang 55

Ví dụ: Một đoạn mã script đơn giản của chương trình xử lý sự kiện thẩm định giá trị đưa vào

trong trường text. Tuổi của người sử dụng được nhập vào trong trường này và chương trình xử lý sự kiện sẽ thẩm định tính hợp lệ của dữ liệu đưa vào. Nếu không hợp lệ sẽ xuất hiện một thông báo yêu cầu nhập lại. Chương trình xử lý sự kiện được gọi mỗi khi trường AGE bị thay đổi và focus chuyển sang trường khác.

<HTML>

<HEAD>

<TITLE> An Event Handler Exemple </TITLE>


function CheckAge(form) {

if ( (form.AGE.value<0)||(form.AGE.value>120) )

{

alert("Tu ổi nh ập vào không h ợp l ệ! M ời b ạn nh ập l ại");

form.AGE.value=0;

}

}

</SCRIPT>

</HEAD>

<BODY>

<FORM NAME="PHIEU_DIEU_TRA">

Nhập vào tên c ủa b ạn:<BR>

Tên <INPUT TYPE=TEXT NAME="HOTEN" MAXLENGTH=10 SIZE =10><BR>

ðệm <INPUT TYPE=TEXT NAME="DEM" MAXLENGTH=15 SIZE=10> <BR>

Họ <INPUT TYPE=TEXT NAME="HO" MAXLENGTH=10 SIZE=10>< BR>

Age <INPUT TYPE=TEXT NAME="AGE" MAXLENGTH=3 SIZE=2 onChange="CheckAge(PHIEU_DIEU_TRA)"><BR>

<P>

Bạn thích mùa nào nh ất:<BR>

Mùa xuân<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua xua n">

Mùa h ạ<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua ha">

Mùa thu<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua thu" >

Mùa ñông<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua dong">

<P>

Hãy ch ọn nh ững ho ạt ñộng ngoài tr ời mà b ạn yêu thích:<BR>

Trang 56

ði b ộ<INPUT TYPE=CHECKBOX NAME="HOAT_DONG" VALUE="Di bo">

Tr ượt tuy ết<INPUT TYPE=CHECKBOX NAME="HOAT_DONG" VALUE="Truot tuyet">

Thể thao d ưới n ước<INPUT TYPE=CHECKBOX NAME="HOAT_DONG" VALUE="Duoi nuoc">

ðạp xe<INPUT TYPE=CHECKBOX NAME="HOAT_DONG" VALUE="Dap xe">

<P>

<INPUT TYPE=SUBMIT>

<INPUT TYPE=RESET>

</FORM>

</BODY>

</HTML>

BÀI TẬP

CÂU HỎI

1. Viết một đoạn lệnh JavaScript sử dụng cách thức confirm() và câu lệnh if...then để thực hiện: Hỏi người sử dụng có muốn nhận được một lời chào không Nếu có thì hiện ảnh wellcome.jpg và một lời chào. Nếu không thì viết ra một lời thông báo 2. Viết một đoạn lệnh JavaScript để thực hiện:

� Hỏi người sử dụng: "10+10 bằng bao nhiêu?" � Nếu đúng thì hỏi tiếp: Có muốn trả lời câu thứ hai không?" � Nếu muốn thì hỏi: "10*10 bằng bao nhiêu?" � Đánh giá kết quả bằng biểu thức logic sau đó viết ra màn hình:

Đúng: "CORRECT"; Sai: "INCORRECT" Gợi ý: Sử dụng biến toàn cục lưu kết quả đúng để so sánh với kết qủa đưa vào.

3. Câu lệnh nào trong các câu sau đây sử dụng sai thẻ sự kiện a. <BODY onClick="doSomething();"> b. <INPUT TYPE=text onFocus="doSomething();"> c. <INPUT TYPE=textarea onLoad="doSomething();"> d. <BODY onUnload="doSomething();"> e. <FORM onLoad="doSomething();"> f. <FORM onSubmit="doSomething();">

4. Điều gì xảy ra khi thực hiện script sau: <HTML> <HEAD> <TITLE>Exercise 5.4</TITLE> <SCRIPT LANGUAGE="JavaScript">

Trang 57

 </SCRIPT> </HEAD> <BODY onLoad="welcome();" onUnload="farewell();";> This is my page! </BODY>

</HTML> 5. Sử dụng vòng lặp while để mô phỏng các vòng lặp for sau: a. for (j = 4; j > 0; j --) { document.writeln(j + "<BR>"); } b. for (k = 1; k <= 99; k = k*2) { k = k/1.5; } c. for (num = 0; num <= 10; num ++) { if (num == 8) break; }

TRẢ L ỜI

1. Sử dụng cách thức confirm() và cấu trúc if...then: <HTML> <HEAD> <TITLE>Execise 5.1</TITLE> <HEAD> <BODY> <P> <SCRIPT LANGUAGE="JavaScript"> var conf=confirm("Click OK to see a wellcome message!") if (conf){ document.write("<IMG SRC='wellcome.jpg'>");

Trang 58

document.write("<BR>Wellcome you come to CSE's class"); } else document.write("What a pity! You have just click Cancel button"); </SCRIPT> </P> </BODY> </HTML>

2. Thực hiện hỏi người sử dụng: <HTML> <HEAD> <TITLE>Exercise 3.3</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </BODY> </HTML>

3. Các câu sai: a, c, e. Các câu đúng: b, d, f 4. Khi chương trình được chạy (load), hàm wellcome sẽ thực hiện hỏi tên người sử dụng, lưu tên đó vào biến toàn cục name. Khi người sử dụng sang một địa chỉ URL khác, hàm farewell() sẽ thực hiện gửi một lời cảm ơn tới người sử dụng. 5. Sử dụng vòng lặp while như sau: a.

j = 5; while (--j > 0) { document.writeln(j + "<BR>"); }

b. k = 1; while (k <= 99) { k = k * 2 / 1.5; }

c. num = 0; while (num <= 10) { if (num++ == 8) break;

}

2.14 Các đối tượng trong JavaScript

Trang 60

2.14.1 Đối tượng Navigator Đối tượng này được sử dụng để lấy 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

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 các đối tượng

Trang 61

<HTML> <HEAD> <TITLE> Navigator Object Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript">

document.write("appCodeName = "+navigator.appCodeName + "<BR>");

document.write(sappName = "+navigator.appName + "<BR>");

document.write("appVersion = "+navigator.appVersion + "<BR>");

document.write("userAgent = "+navigator.userAgent + "<BR>");

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

2.14.2 Đối tượng Windows Các thuộc tính

� 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ổ � Frames - Mảng xác định tất cả các frame trong cửa sổ. � Length - Số lượng các frame trong cửa sổ cha mẹ. � Name - Tên của cửa sổ hiện thời. � Parent - Đối tượng cửa sổ cha mẹ. � Self - Cửa sổ hiện thời. � 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. � Top - Cửa sổ ở trên cùng. � Window - Cửa sổ hiện thời.

Các phương thức

� alert ("message") -Hiển thị hộp hội thoại với chuỗi "message" và nút OK. � windowReference.close -Đóng cửa sổ windowReference. � confirm("message") -Hiển thị hộp 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. � [windowVar = ][window]. open("URL", "windowName", [ "windowFeatures,...," ] ) -

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

trường text. Ví dụ: Trong ví dụ tạo ra một tới cửa sổ thứ hai, như nút thứ nhất để mở một cửa sổ rỗng, sau đó một liên kết sẽ tải file doc2.html xuống cửa sổ mới đó rồi một nút khác dùng để đóng của sổ thứ hai lại, xem ví dụ với file window.html:

Trang 62

<HTML> <HEAD> <TITLE>Frame Example </TITLE> </HEAD> <BODY> <FORM>

<INPUT TYPE="button" VALUE="Open Second Window" onClick="msgWindow=window.open('','window2','resizable=no,width=200,height=200')">

<P> <A HREF="temp.html" TARGET="window2"> Load a file into window2 </A> </P> <INPUT TYPE="button" VALUE="Close Second Window" onClick="msgWindow.close()"> </FORM> </BODY> </HTML>

Ví du: <HTML> <HEAD> <TITLE>Frame Example </TITLE> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Open Second Window" onClick="msgWindow=window.open('D:/PhuocTai/Giaoan/ Thiet KeWeb/BaiTap/JavaScript/temp.htm','window2','resiza ble=yes,width=200,height=200')"> <INPUT TYPE="button" VALUE="Close Second Window" onClick="msgWindow.close()"> </FORM> </BODY> </HTML>

2.14.3 Đố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. Các thuộc tính

� 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.

� Hostname - Tên của host và domain (ví dụ www.abc.com ). � href - Toàn bộ URL cho document hiện tại. � Pathname - Phần đường dẫn của URL (ví dụ /chap1/page2.html). � 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. � Protocol - Giao thức được sử dụng (cùng với dấu hai chấm) (ví dụ http:).

2.14.4 Đối tượng Frame

Trang 63

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. Các thuộc tính

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

Ví dụ: Xem ví dụ frames.html Mã nguồn:

<meta http-equiv="ConHoTent-Language" conHoTent="en -us"> <meta http-equiv="ConHoTent-Type" conHoTen t="text/html; charset=utf-8"> <link rel="stylesheet" href="../../Skin/skin.css"> <title>Design Simple Website</title> </head> <body> <table border="1" width="100%" id="table1" height=" 422" style="border-collapse: collapse" bordercolor="#FF9 15D"> <tr> <td colspan="2" class="banner"></td> </tr> <tr> <td valign="top" width="26%"> <iframe name="ifm_menu" src="danhmuc.htm" width="193" height="209"></iframe></td> <td valign="top" width="73%"> <iframe name="ifm_conHoTent" src="gioithieu.htm" width="553" height="337"></iframe></td> </tr> <tr> <td colspan="2" class="footer"></td> </tr> </table>

2.14.5 Đố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>

Các thuộc tính

� alinkColor - Giống như thuộc tính ALINK. � anchor - Mảng tất cả các anchor trong document. � bgColor - Giống thuộc tính BGCOLOR. � cookie - Sử dụng để xác định cookie. � fgColor - Giống thuộc tính TEXT. � forms - Mảng tất cả các form trong document.

Trang 64

� lastModified - Ngày cuối cùng văn bản được sửa. � linkColor - Giống thuộc tính LINK. � links - Mảng tất cả các link trong document. � location - URL đầy đủ của văn bản. � referrer - URL của văn bản gọi nó. � title - Nội dung của thẻ <TITLE>. � vlinkColor - Giống thuộc tính VLINK.


� document.clear - Xoá document hiện thời. � 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. � document.open (["mineType"]) - Mở một stream để thu thập dữ liệu vào của các

phương thức write và writeln. � 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. � 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. 2.14.6 Đối tượng Form

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: button checkbox hidden password radio reset select submit text 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

action thuộc tính ACTION của thẻ FORM. 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 encoding Xâu chứa kiểu MIME được sử dụng để mã hoá nội dung của form gửi cho server. length Số lượng các thành phần trong một form.

Trang 65

method Thuộc tính METHOD. target Xâu chứa tên của cửa sổ đích khi submit form


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

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.

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.

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

Trang 66

� 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: Text field: "text"

Radio button: "radio"

Checkbox: "checkbox"

Hidden field: "hidden"

Submit button: "submit"

Reset button: "reset"

Password field: "password"

Button: "button"

Select list: "select-one"

Multiple select lists: "select-multiple"

Textarea field: "textarea"

� 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ử buttton 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>

Trang 67

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>

� 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>


function calculate(form,callingField) {

if (callingField == "result") { // if(1)

if (form.square.checked) { // if(2)

form.entry.value = Math.sqrt(form.result.value);

}

else {

form.entry.value = form.result.value / 2;

Trang 68

} //end if(2)

}

else{

if (form.square.checked) { // if(3)

form.result.value=form.entry.value*form.entry.value ;

}

else {

form.result.value = form.entry.value * 2;

} //enfzd if(3)

}//end if(1)

}//end function


</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


</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

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ị 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. Để tạo ra sự mở rộng cho checkbox. bạn có thể thay đổi hàm calculate() như sau:


if (callingField == "result") { // if (1)

if (form.square.checked) { // if (2)

Trang 69

form.entry.value = Math.sqrt(form.result.value);

}

else {

form.entry.value = form.result.value / 2 ;

} //end if(2)

}

else {

if (form.square.checked) { // if (3)


}

else {

form.result.value = form.entry.value * 2;

} // end if (3)

} // end if (1)

}

� 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.

� 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.

� 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. Phần này sẽ được nói kỹ hơn trong đối tượng text.

Trang 70

� 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>



if (callingField == "result") {

if (form.action[1].checked) {

form.entry.value =

Trang 71

Math.sqrt(form.result.value);

} else {

form.entry.value = form.result.value / 2 ;

}

} else {

if (form.action[1].checked) {


} else {

form.result.value = form.entry.value * 2 ;

}

}

}


</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);"> Dou ble<BR>

<INPUT TYPE="radio" NAME="action" VALUE="square"

onClick="calculate(this.form,this.name);"> Squ are <BR>

Result: <INPUT TYPE=text NAME="result" VALUE=0


</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.

� 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.

Trang 72

Hầu hết những người lập trình khong 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>



function clearForm(form) {

form.value1.value = "Form";

form.value2.value = "Cleared";

}


//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>

� 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>

Trang 73

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: � DEFAULTSELECTED: cho biết option có được mặc định là lựa chọn trong thẻ

OPTION hay không. � INDEX: chứa giá trị số thứ tự của option hịên thời trong mảng option. � SELECTED: cho biết trạng thái hiện thời của option � 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ụ: 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

Trang 74

� 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, một danh sách lựa chọn được tạo ra 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;

� 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.

� 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à: onBlur, 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)

Trang 75

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 text 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>



function echo(form,currentField) {

if (currentField == "first")

form.second.value = form.first.value;

else

form.first.value = form.second.value;

}


</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>

• 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>

Trang 76

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.

� 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ụ: <FORM METHOD=POST NAME=testform>

<INPUT TYPE="text" NAME="one">

<INPUT TYPE="text" NAME="two">

<INPUT TYPE="text" NAME="three">

</FORM>

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.

� 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. 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].elemen ts[0].value = this.value;">

</FORM>

<FORM METHOD=POST>

<INPUT TYPE=text onChange="document.forms[0].elemen ts[0].value = this.value;">

</FORM>

</BODY>

</HTML>

Mặt khác, 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

Trang 77

2.14.7 Đố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 truy cập

bởi người 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

length - Số lượng các URL trong đối tượng.


� history.back() - Được sử dụng để tham chiếu tới URL mới được thăm trước đây. � 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.

2.14.8 Đố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

� E - Hằng số Euler, khoảng 2,718. � LN2 - logarit tự nhiên của 2, khoảng 0,693. � LN10 - logarit tự nhiên của 10, khoảng 2,302. � LOG2E - logarit cơ số 2 của e, khoảng 1,442.

� PI - Giá trị của π, khoảng 3,14159. � SQRT1_2 - Căn bậc 2 của 0,5, khoảng 0,707. � SQRT2 - Căn bậc 2 của 2, khoảng 1,414.


� Math.abs (number) - Trả lại giá trị tuyệt đối của number. � Math.acos (number) - Trả lại giá trị arc cosine (theo radian) của number. Giá trị

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

number phải nằm giữa -1 và 1. � Math.atan (number) - Trả lại giá trị arc tan (theo radian) của number. � Math.ceil (number) - Trả lại số nguyên nhỏ nhất lớn hơn hoặc bằng number. � Math.cos (number) - Trả lại giá trị cosine của number. � Math.exp (number) - Trả lại giá trị e^ number, với e là hằng số Euler. � Math.floor (number) - Trả lại số nguyên lớn nhất nhỏ hơn hoặc bằng number. � Math.log (number) - Trả lại logarit tự nhiên của number. � Math.max (num1,num2) - Trả lại giá trị lớn nhất giữa num1 và num2 � Math.min (num1,num2) - Trả lại giá trị nhỏ nhất giữa num1 và num2. � Math.pos (base,exponent) - Trả lại giá trị base luỹ thừa exponent. � Math.random (r) - Trả lại một số ngẫu nhiên giữa 0 và 1. Phương thức này chỉ

thực hiện được trên nền tảng UNIX.

Trang 78

� Math.round (number) - Trả lại giá trị của number làm tròn tới số nguyên gần nhất.

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

2.14.9 Đố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.

Phần lớn các phương thức date đều có một đối tượng Date đi cùng. Các phương thức giới thiệu trong phần này sử dụng đối tượng Date dateVar, ví dụ:

dateVar = new Date ('August 16, 1996 20:45:04');


� dateVar.getDate() - Trả lại ngày trong tháng (1-31) cho dateVar. � dateVar.getDay() - Trả lại ngày trong tuần (0=chủ nhật,...6=thứ bảy) cho dateVar. � dateVar.getHours() - Trả lại giờ (0-23) cho dateVar. � dateVar.getMinutes() - Trả lại phút (0-59) cho dateVar. � dateVar.getSeconds() - Trả lại giây (0-59) cho dateVar. � dateVar.getTime() - Trả lại số lượng các mili giây từ 00:00:00 ngày 1/1/1970. � dateVar.getTimeZoneOffset() - Trả lại độ dịch chuyển bằng phút của giờ địa

phương hiện tại so với giờ quốc tế GMT. � dateVar.getYear()-Trả lại năm cho dateVar. � 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. � dateVar.setDay(day) - Đặt ngày trong tháng là day cho dateVar. � dateVar.setHours(hours) - Đặt giờ là hours cho dateVar. � dateVar.setMinutes(minutes) - Đặt phút là minutes cho dateVar. � dateVar.setMonths(months) - Đặt tháng là months cho dateVar. � dateVar.setSeconds(seconds) - Đặt giây là seconds cho dateVar. � 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. � dateVar.setYear(years) - Đặt năm là years cho dateVar. � dateVar.toGMTString() - Trả lại chuỗi biểu diễn dateVar dưới dạng GMT. � dateVar.toLocaleString()-Trả lại chuỗi biểu diễn dateVar theo khu vực thời gian

hiện thời. � 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. 2.14.10 Đố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

Trang 79


� 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>.

� str.big() - Kết quả giống như thẻ <BIG> trên chuỗi str. � str.blink() - Kết quả giống như thẻ <BLINK> trên chuỗi str. � str.bold() - Kết quả giống như thẻ <BOLD> trên chuỗi str. � str.charAt(a) - Trả lại ký tự thứ a trong chuỗi str.

� str.fixed() - Kết quả giống như thẻ <TT> trên chuỗi str. � str.fontcolor() - Kết quả giống như thẻ <FONTCOLOR = color>. � str.fontsize(size) - Kết quả giống như thẻ <FONTSIZE = size>. � Str.length : Trả về chiều dài chuỗi str. � 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.

� str.italics() - Kết quả giống như thẻ <I> trên chuỗi str. � 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.

� 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.

� str.small() - Kết quả giống như thẻ <SMALL> trên chuỗi str. � str.strike() - Kết quả giống như thẻ <STRIKE> trên chuỗi str. � str.sub() - Tạo ra một subscript cho chuỗi str, giống thẻ <SUB>. � 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. � str.sup() - Tạo ra superscript cho chuỗi str, giống thẻ <SUP>. � str.toLowerCase() - Đổi chuỗi str thành chữ thường. � str.toUpperCase() - Đổi chuỗi str thành chữ hoa

Trang 80

Chương 4: Ngôn ngữ kịch bản ASP 4.1 Giới thi ệu

ASP (Active Server Pages) là một môi trường lập trình cung cấp cho việc kết hợp HTML, ngôn ngữ kịch bản (Scripting) như VBScript , JavaScript…nhằm tạo ra một ứng dụng Internet mạnh mẽ và hoàn chỉnh. 4.2 ASP file là gì?

File được tạo với phần mở rộng .ASP. Trong file này chứa các thẻ HTML, các kịch bản Scripting như VBSCript, JavaScript…

Các script của ASP được nằm trong cặp thẻ <% %> Công nghệ ASP được xây dưng trực tiếp bên trong IIS(Information Internet Services)

(đối với Window 2000, Windows XP, Windows Server 2003) hay tích hợp trong Personal Webserver đối với Windows 95, Windows NT, Windows 98, Windows Me.

Cấu trúc cơ bản của một file ASP như sau: <html> <head> <title>Desige Simple Website</title> </head> <body> <% ’Các script c ủa ASP ñược vi ết ở ñây! %> </body> </html>

Ghi chú: - Các script ASP được viết trong cặp thẻ <% %>, bắt đầu bằng thẻ mở <% và kết thúc bằng thẻ đóng %> - Chú thích trong lập trình ASP được viết sau dấu nháy đơn ‘ - Các script ASP có thể viết xen kẻ giữa các mã HTML. 4.3 ASP làm việc như thế nào?

Trang HTML tĩnh: Trang web động:

Trang 81

4.4 Cài đặt ASP trên máy tính ASP có thể được cài đặt trên nhiều hệ điều hành như: Win95, Win98, WinME,

Win2000, WinXP, Win Server 2003. Tham khảo cách cài đặt ASP trên các hệ điều hành nói trên tại trang web sau: http://www.w3schools.com/asp/asp_install.asp

Sau đây là các bước để cài đặt và chạy một trang ASP trên Windows XP Professional. � Bước 1: Chèn đĩa Windows XP Professional CD-Rom vào ổ đĩa CD-Rom. � Bước 2: Click Start�Settings�Control Panel�Add/Remove Programs. � Bước 3: Click Add/Remove Windows Components. � Bước 4: Đánh dấu kiểm vào mục Internet Informations Services, click OK. � Bước 5: Một thư mục Inetpub sẽ được tạo trên ổ đĩa cứng được cài hệ điều hành. � Bước 6: Tạo một thư mục mới MyWeb trong thư mục wwwroot thuộc thư mục Inetpub. � Bước 7: Tạo một trang web ASP với tên “test1.asp” chẳng hạn rồi lưu nó trong thư mục

MyWeb. � Bước 8: Vào Control Panel�Administrative Tools, chạy IIS Manager để kích hoạt Web

Server. � Bước 9: Dùng trình duyệt Internet Explore gõ địa chỉ:http://localhost/MyWeb/test1.asp để

xem trang web vừa tạo. Ghi chú:

Ở bước 6 có thể tạo thư mục MyWeb ở một đường dẫn khác, sau đó cấu hình cho IIS tạo đường dẫn ảo đến thư mục MyWeb.

Ví dụ 1:

<html> <head> <title>Desige Simple Website</title> </head> <body> <% response.write "Hello! ASP!" ‘Hi ển th ị l ời chào %> </body> </html>

Ví dụ 2: Viết một trang Login.html cho phép người sử dụng nhập vào họ tên, sau đó kích nút Submit để chuyển đến trang Result.asp. Trang Result.asp có nhiệm vụ hiển thị lời chào đối với tên người sử dụng: Hello [username]! Mã nguồn:

Trang 82

Login.html <html> <head> <title>Username</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>Welcome</title> </head> <body> <% dim x x=request.form("username") 'bi ến x nh ận l ại giá tr ị username t ừ form thu ộc trang login.html 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>

4.5 Ngôn ngữ kịch bản 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. 4.5.1 Biến

Biến dùng để lưu trữ thông tin. Cú pháp khai báo biến như sau: Dim biến 1, biến 2…

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 hiển thị 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 đó. Ghi chú:

Không bắt buộc nhưng nên khai báo để kiểm soát và bắt lỗi. 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ì. Nên sử dụng <%Option Explicit %> ở ngay đầu mỗi trang ASP để bắt lỗi khi không

khai báo biến mà sử dụng.

Trang 83

Khi khai báo nên sử dụng các tiền tố để dễ phân biệt về ý nghĩa của biến được khai báo. Dạng dữ liệu Tiền tố (prefix)

Boolean Bln Byte Byt Double Dbl Integer Int Long Lng Object Obj String Str ADO command Cmd ADO connection Cnn …………………..

Để 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). 4.5.2 Mảng 4.5.2.1 Mảng một chiều Mảng dùng để lưu trữ dữ liệu theo một dãy có thứ tự các phần tử, cú pháp để khai báo một mảng như sau:

Dim tên_m ảng(ch ỉ s ố) Để tăng giảm số phần tử của một mảng đã khai báo, cú pháp viết như sau:

ReDim tên_mảng(chỉ số mới) Để biết tổng số các phần tử của một mảng ta sử dụng hàm UBOUND với cú pháp sau:

Ubound(tên_mảng) Ví dụ:

<% 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) %>

4.5.2.2 Mảng đa chiều ASP cho phép khai báo một mảng lớn hơn một chiều, được gọi là mảng đa chiều. Cú pháp: Dim tên_mảng(chỉ số 1, chỉ số 2, …, chỉ số n)

Ví dụ: Dim arraylist(10,10) Với ví dụ trên sẽ khai báo một mảng hai chiều có 10x10 phần tử, trong đó phần tử (1,1)

ở phía trên bên trái mảng, phần tử (10,10) ở phía dưới bên phải mảng. Tương tự như vậy, ta có thể khai báo mảng ba chiều, bốn chiều,… nhưng tốt nhất chỉ

nên sử dụng mảng hai chiều (có thể ba chiều) vì nếu quá nhiều chiều sẽ làm cho việc xử lý thêm phức tạp. 4.5.3 Hằng số

Cú pháp để khai báo một hằng số như sau: CONST tên_h ằng = giá tr ị

4.5.4 Cấu trúc điều khiển lệnh 4.5.4.1 Cấu trúc điều kiện IF…THEN…ELSE… IF

Cú pháp: <% If < ði ều ki ện 1 > then

Trang 84

<Các câu l ệnh> Else If < ði ều ki ện 2 > then <Các câu l ệnh> End if End if

%> Ngoài ra có thể sử dụng cấu trúc IF.. THEN. . . . ELSEIF. . . END IF

<% If <ði ều ki ện 1 > then <Các câu l ệnh 1> ElseIf < ði ều ki ện 2 > then <Các câu l ệnh 2> Else <Các câu l ệnh 3> End if

%> 4.5.4.2 Cấu trúc lựa chọn SELECT CASE…END SELECT 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> %>

4.5.4.3 Cấu trúc lặp tuần tự FOR…NEXT Dùng để lặp với số lần đã biết, tuy nhiên ta có thể ngắt bằng lệnh EXIT FOR.

Cú pháp: <%

FOR < HoTenbien >=<giatridau > TO < giatricuoi > STEP <Buoc nhay > NEXT

%> 4.5.4.4 Cấu trúc lặp DO WHILE…LOOP Cú pháp:

<% Do while < ði ều ki ện> <Các câu l ệnh> Loop

%> 4.5.4.5 Cấu trúc lặp WHILE…WENT Cú pháp:

<% While < ði ều ki ện> <Các câu l ệnh>

Trang 85

Wend %>

4.5.4.6 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>

%> Ví dụ 1: Viết trang tinhtong.asp để hiển thị kết quả của tổng S=2+4+6+…+12 Ví dụ2: Viết trang nhapso.asp và trang ketqua.asp để hiển thị kết quả của tổng S=1+3+5+…+(2n-1). Chi tiết trang nhapso.asp như sau: - Trang chứa một đối tượng Textbox để nhập vào giá trị n. - Một nút Submit để tính toán kết quả và chuyển đến trang ketqua.asp và in ra kết quả. 4.5.5 Một số hàm cơ bản trong ASP 4.5.5.1 Hàm xử lý chuỗi

� TRIM(Xâu as string): Bỏ khoảng trắng hai đầu kí tự � LEFT(Xâu as string, n as interger): Lấy bên trái xâu n kí tự. � RIGHT(Xâu as string, n as interger): Lấy bên phải xâu n kí tự. � LCASE(Xâu as string) : Chuyển xâu về chữ thường � UCASE(Xâu as string) : Chuyển xâu về chữ hoa � MID(Xâu as string, n1, n2): Lấy n2 kí tự trong xâu bắt đầu từ vị trí n1. � CSTR(Biến): Hàm chuyển đổi biến thành kiểu string � Hàm JOIN/SPLIT(Xâu as string, kí tự ngăn cách): Sẽ Nối/Cắt xâu thành một/nhiều

đoạn bằng cách xác định kí tự ngăn cách ở trên và cho các đoạn đó lần lượt vào một mảng.

Ví dụ: <%

x=”Hà n ội;H ải phòng; TPHCM” y=split(x,”;”) for i=0 to 2 step 1 Response.write y(i)&”<br>” next ‘y(0)=”Hà n ội” ‘y(1)=”H ải phòng” ‘y(2)=”TPHCM”

%> 4.5.5.2 Các hàm xử lý số

� SQR(n): Căn bậc hai của n � INT(n) : Lấy phần nguyên n � MOD : Phép đồng dư � Toán tử \ : Phép chia nguyên � Round(số, n) : Làm tròn số với n chữ số thập phân � RND(): Tr ả về số ngẫu nhiên bất kì trong khoảng [0,1] � Các hàm khác : Abs, Atn, Cos, Exp, Fix, Hex, Log, Oct, Randomize,

Round, Sin, Sqr, Tan 4.5.5.3 Các hàm chuyển đổi kiểu � Cdate: Chuyển sang kiểu ngày tháng

<%Dim a, b

Trang 86

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 khác : Cbyte, Cdbl,CSng, Cbool, Ccur, 4.5.5.4 Các hàm format

Các hàm này cho phép định dạng dữ liệu a) FormatDateTime: Trả về chuỗi định dạng theo kiểu DateTime.

Cú pháp: FormatDateTime(Date,[NamedFormat]) NamedFormat: 0: Ngay thang day du 1: Ngay thang theo kieu so 2: Ngay thang 3: Gio,phut 4: Phut, giay Ví dụ: FormatDateTime(ngay,0)

b) FormatCurrency: Trả về chuỗi được định dạng theo kiểu tiền tệ. Cú pháp: FormatCurrency(expression, [NumDigitsAfterDecimal]) Ví dụ: FormatCurrency(tongtien, 3)

c) FormatNumber: Trả về chuỗi định dạng theo kiểu số. Cú pháp: FormatNumber(expression, [NumDigitsAfterDecimal]) Ví dụ: FormatNumber(tonggiatri, 3)

d) FormatPercent: Trả về chuỗi được định dạng theo kiểu phần trăm. Cú pháp: FormatPercent(expression, [NumDigitsAfterDecimal])

4.5.5.5 Các hàm ngày tháng a) Date: Trả về ngày hiện hành trên Server. b) Time: Trả về giờ hiện hành. c) Now: Trả về ngày giờ hiện hành trên Server. Các hàm khác: DateAdd, DateDiff, Year, Month, Day, Weekday,

Hour, Minute, Second Ví dụ: <% Response.write “Hom nay la ngay: ” &Date ‘Date tr ả v ề ngày hi ện hành Response.write “Bay gio la”&Time ‘Time tr ả v ề gi ờ hi ện hành Response.write Now ‘Now tr ả v ề ngày và gi ờ hi ện hành %> 4.5.5.6 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=”1/1/2004”

Trang 87

If Isdate(a) then Response.write “a ñú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 4.5.5.7 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ụ đó: - Thủ tục KetNoi - Thủ tục HienThi - 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 %>

� 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ụ: 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" value=”Login” name="submit"> </form> </body>

Trang 88

</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 %>

� 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=... 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

Trang 89

%> <% 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 %>

4.5.6 Sử dụng thẻ #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 

hoặc  Ví dụ:   <% ‘ mã ngu ồn s ẽ s ử d ụng các hàm trong file MyConnection.asp %>

Chú ý:

Trang 90

Include file phải được thực hiện trước khi các viết script sử dụng đến nó. 4.5.7 Các đối tượng xây dựng sẵn trong ASP

Đối tượng là một nhóm các hàm và biến. Trong ngôn ngữ ASP, 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 như: Request, Response, Session, Application, Server. Một số đối tượng cần khởi tạo khi sử dụng như: Dictionary, Connection, Recordset… 4.5.7.1 Đối tượng Request

Bởi vì kịch bản được thực thi trên Web Server nên đối tượng Request được coi như là đối tượng Input. Đối tượng này lưu trữ thông tin từ Browser gửi đến Web Server.

Một số phương thức cơ bản: a) 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 (method=GET). Ví dụ:

Xây dựng trang home.asp chứa danh mục các tác giả. Khi kích vào họ tên mỗi tác giả sẽ chuyển sang trang gioithieu.asp. Trang này sẽ hiển thị lời chào có dạng:

“Xin chào, đây là trang giới thiệu về tác giả : <họ tên tác giả>”

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ó giá t r ị ‘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?tacgia=Nguyen Van A&namxb=1990”> <input type=”text” name=”tacgia” value=”Tran Van A” > <input type=”submit” name=”submit” value=”Nhan vao day de sang trang gioi thieu”> </form>

b) 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). Ví dụ: Trang form.asp với mã nguồn như sau:

<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>

Trang 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 %>

4.5.7.2 Đối tượng Response

Trang 91

Đối tượng Response dùng để gửi các đáp ứng từ Server đến Client. Một số phương thức cơ bản:

a) 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.

b) 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 đến trang Error.asp(trang này hiển thị một thông báo lỗi user không có quyền truy cập). Mã lệnh viết như sau: <% Response.redirect “error.asp” %>

c) Response.End Ngừng xử lý các Script. Thông thường, người ta 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. 4.5.7.3 Đố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(Session) ứ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 này cần được hệ thống ghi nhớ trong toàn phiên làm việc của mình (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(“home”)=session(“home”)+1 %> session(“home”) đạ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(“home”) lại khác nhau. Thật vậy , A có thể truy cập 10 lần (session(“home”) =10) trong khi B có thể truy cập 2 lần thôi (session(“home”) =2). Server kết thúc và hủy bỏ đối tượng session khi: 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à thiết lập thời gian Timeout của Session tính bằng giây như sau: <% Session.Timeout = 500 %>

Trang 92

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 4.5.7.4 Đố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 vào Website. Mã nguồn có thể viết như sau:

<% application(“num_visited”)=application(“num_visi ted”)+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(“num_visited”)%> Với 2 phiên khác nhau thì giá trị application(“num_visited ”) là như nhau. 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. 4.5.7.5 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(Website). Mã lệnh viết dưới dạng Script.

Mỗi ứng dụng chỉ được phép có một và chỉ một 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: 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 chủ của Website.

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 Website (bắt đầu 1 session mới).

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ọ. Application_OnEnd: Hàm sự kiện này xảy ra khi không còn Session nào hoạt động. File Global.asa có cấu trúc như sau: <script language="vbscript" runat="server"> Sub Application_OnStart ‘.......... End sub Sub Application_OnEnd ‘............. End Sub Sub Session_OnStart ‘......... Application("x")=Application("x")+1

Trang 93

End sub Sub Session_OnEnd ‘............ End Sub </script>

Ví dụ: Đếm số người dùng đã truy cập website. Số người dùng đượ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 dùng 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”)

Mã nguồn file Global.asa được viết như sau: <script language="vbscript" runat="server"> Sub Application_OnStart Application("songuoi")=0 End Sub Sub Session_OnStart Application.Lock Application("songuoi")=Application("songuoi")+1 Application.UnLock Session(“solan”)=0 End Sub Sub Session_OnEnd Application.Lock Application("songuoi")=Application("songuoi")-1 Application.UnLock End Sub Sub Application_OnEnd End Sub </script> Trang Home.asp được viết như sau: <html> <body> <p> Có <%response.write(Application("songuoi"))%> người ñã truy c ập website. </p> <%session(“solan”)= session(“solan”)+1 %> <p> Bạn ñã truy c ập trang này <%response.write(session("solan"))%> l ần! </p> </body> </html>

Trang 94

4.5.7.6 Đố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ừ đ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","Làm vi ệc" d.add "learn","H ọc t ập" ‘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, hay sổ địa chỉ với cặp khóa/giá trị là CustomerName/Address. 4.5.7.7 Đối tượng Server Đối tượng này dùng để truy xuất các phương thức và thuộc tính của Server. Một số phương thức cơ bản như sau:

a) Server.CreateObject Phương thức này dùng để 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") %> b) Server.Mappath

Phương thức này chuyển đường dẫn tương đối thành tuyệt đối. Ví dụ:

<% str= server.mappath("QLSV.mdb") Response.write str %>

Sẽ cho kết quả: “C:\WEB\QLSV.mdb” trong trường hợp:

� File QLSV.mdb nằm trong thư mục C:\WEB � Đường dẫn C:\WEB được cấu hình là theo một bí danh (Virtual Directory) trong IIS.

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ụ: Đây là chuỗi kết nối vào database(Access)

Connstr="provider=microsoft.jet.oledb.4.0; data source=" & server.mappath("QLSV.mdb") & ";"

4.5.8 Database và ASP 4.5.8.1 SQL-Ngôn ngữ truy vấn có cấu trúc SQL là ngôn ngữ máy tính chuẩn được dùng để giao tiếp với các hệ quản trị cơ sở dữ liệu quan hệ (Relational Database Management Systems – RDBMS). Các câu lệnh trong SQL được chia thành hai loại chính: tập hợp ngôn ngữ định nghĩa dữ liệu (Data Defination Language-DLL) và tập ngôn ngữ vận dụng dữ liệu (Data Manipulation Language-DML).

Trang 95

DLL bao gồm các lệnh CREATE, ALTER, DROP cho phép định nghĩa, thay đổi và hủy bỏ các đối tượng cơ sở dữ liệu như bảng (table), chỉ mục (index)… DML bao gồm các lệnh SELECT, INSERT, DELETE, UPDATE cho phép thao tác trên đối tượng cơ sở dữ liệu. Các lệnh SQL đều kết thúc bằng dấu chấm phẩy (;) Cú pháp các lệnh SQL:

• Lệnh SELECT SELECT cột 1, c ột 2, c ột 3, … ,c ột n FROM bảng 1, b ảng 2, ... , b ảng n [WHERE <bi ểu th ức ñi ều ki ện>] [ORDER BY c ột 1 [ASC|DESC], c ột 2 [ASC|DESC]; Lệnh SELECT có hai mệnh đề bắt buộc là SELECT và FROM, còn WHERE và ORDER BY là những chọn lựa thêm.

Sau đây là chức năng của từng mệnh đề trong câu lệnh SELECT: o Mệnh đề SELECT liệt kê tên các cột cần hiển thị. Những thuộc tính được liệt kê

trong mệnh đề này chính là tên các cột trong quan hệ kết quả. o Mệnh đề FROM liệt kê tên các bảng nguồn, nơi dữ liệu được thu thập. Như vậy,

các cột xuất hiện trong mệnh đề SELECT phải là các cột thuộc bảng nguồn. o Mệnh đề WHERE xác định điều kiện mà các bản ghi dữ liệu của bảng nguồn

phải thỏa mãn. � Một số toán tử thường dùng trong mệnh đề WHERE

� Các toán tử so sánh Toán tử so sánh Diễn giải

= Bằng <> Khác < Nhỏ hơn

<= Nhỏ hơn hoặc bằng > Lớn hơn

>= Lớn hơn hoặc bằng � Các toán tử BOOLEAN (Logic): And, Or, Not � Các toán tử đối sánh mẫu

o Toán tử LIKE o Toán tử BETWEEN o Toán tử IN

o Mệnh đề ORDER BY định thứ tự sắp xếp các bản ghi dữ liệu đã thỏa điều kiện ở mệnh đề WHERE. Mệnh đề này chỉ có hiệu lực khi hiển thị dữ liệu thu thập được, nó không tác dụng lên các bản ghi được lưu trong bảng dữ liệu.

Ví dụ: � SELECT hoten,ngaysinh FROM sinhvien WHERE gioitinh= 1; � SELECT hoten,ngaysinh FROM sinhvien WHERE gioitinh= 1

and quequan=’Hu ế’; � SELECT hoten,ngaysinh FROM sinhvien WHERE hoten LIK E

N‘%an%’; � SELECT hoten,ngaysinh FROM sinhvien WHERE dtb BETWE EN

‘8.0’ AND ‘9.0’; � SELECT hoten,ngaysinh FROM sinhvien WHERE masv IN

(‘001’,‘003’,’005’); • Lệnh INSERT INSERT INTO tên-b ảng (c ột 1, c ột 2, …, c ột n)

Trang 96

VALUES (giá tr ị 1, giá tr ị 2, …, giá tr ị n); Mệnh đề VALUES yêu cầu phải thiết lập đầy đủ và thích hợp giá trị cho các cột có trong danh sách cột.

Ví dụ: INSERT INTO sinhvien(masv, hoten, ngaysinh, quequan , dtb) VALUES(‘006’,’Tr ần A’, 09/07/1989, ‘Qu ảng Bình’, 8.5);

• Lệnh UPDATE UPDATE tên-b ảng SET c ột 1=giá tr ị 1, c ột 2=giá tr ị 2, …, c ột n=giá tr ị n [WHERE <bi ểu th ức ñi ều ki ện>];

Ví dụ: UPDATE sinhvien SET hoten=’Tr ần V ăn A’ WHERE masv=’001’;

• Lệnh DELETE DELETE FROM tên-b ảng WHERE <bi ểu th ức ñi ều ki ện>;

Ví dụ: DELETE FROM sinhvien WHERE masv=’001’; 4.5.8.2 Truy xuất dữ liệu từ một trang ASP

Thông thường để truy xuất dữ liệu từ một trang ASP cần thực hiện tuần tự các bước sau:

� Bước 1: Tạo một kết nối (ADO Connection) đến cơ sở dữ liệu. � Bước 2: Mở kết nối cơ sở dữ liệu. � Bước 3: Tạo một tập hợp các bản ghi dữ liệu (ADO recordset). � Bước 4: Mở đối tượng ADO recordset. � Bước 5: Duyệt qua tập hợp ADO recordset để lọc những bản ghi nào cần thiết. � Bước 6: Đóng đối tượng ADO recordset. � Bước 7: Đóng kết nối cơ sở dữ liệu.

4.5.8.3 ADO là gì? ADO là một công nghệ của hãng Microsoft, viết tắt của ActiveX Data Objects. Nó được

tích hợp sẵn trong IIS dùng làm một giao diện để truy xuất dữ liệu trong cơ sở dữ liệu. 4.5.8.4 Đối tượng Connection Đối tượng Connection cho phép tạo kết nối đến một Database. Các bước sử dụng Connection:

- Khai báo đối tượng Connection - Khởi tạo - Tạo chuỗi kết nối - Mở Connection với chuỗi kết nối trên - Sử dụng Connection - Đóng và Hủy Connection

Ví dụ: Để kết nối đến database Access QLSV.mdb (database này nằm trong cùng thư mục với file Asp), có thể viết mã nguồn như sau:

<% dim conn ‘khai báo bi ến k ết n ối ñến database set conn=server.createObject("ADODB.connection") ‘k hởi t ạo stringconn="provider=microsoft.jet.OLEDB.4.0;data s ource=" & server.mappath("QLSV.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

Trang 97

Set conn=nothing ‘h ủy connection %>

Ghi chú: - Chuỗi “stringconn=…” viết trên 1 dòng, trong đó từ khóa “data source” chú ý có một dấu cách giữa “data” và “source”.

- Chuỗi kết nối này chỉ sử dụng với cơ sở dữ liệu Access. 4.5.8.5 Đố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 truy vấn select. Các bước sử dụng đối tượng Recordset: - Khai báo đối tượng Recorset - Khởi tạo - Tạo sql query - Mở Recordset với chuỗi sql query và connection đã mở - Sử dụng Recordset - Đóng và Hủy Recordset

Ví dụ: Mã nguồn để lấy các bản ghi trong bảng Sinhvien và hiển thị ra ngoài trang web như sau:

<%Dim rs ‘ khai báo Recordset set rs=server.createObject("ADODB.Recordset") ‘Kh ởi ‘t ạo SQLstring="select * from Sinhvien" ‘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(“MaSV”) response.write RS(“HoTen”) 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>MÃ SINH VIÊN</td> <td>H Ọ TÊN</td> </tr> <%do while not rs.eof%> <tr> <td > <%=rs("MaSV")%> </td> <td > <%=rs("HoTen")%> </td> </tr> <%rs.movenext loop

Trang 98

rs.close %> </table>

Ví dụ: Sau đây là một ví dụ hoàn chỉnh liệt kê các sinh viên trong bảng sinhvien thuộc cơ sở dữ liệu QLSV.mdb ra trang web:

Mã nguồn file Connection.asp <%dim conn Sub openConn() set conn=server.createobject("ADODB.connection") connstr="provider=microsoft.jet.oledb.4.0; data source=" & server.mappath("QLSV.mdb")&";" conn.open connstr End Sub Sub destroyConn() conn.close set conn=nothing End Sub %>

Mã nguồn file ListSV.asp  <%openConn set rs = server.createobject("ADODB.Recordset") Sql=”select * from sinhvien" rs.open sql, conn%> <table border="1" width="200"> <tr><td>MaSV</td><td>H ọ tên</td></tr> <% do while not rs.EOF %> <tr> <td><%=rs("MaSV")%></td> <td><%=rs("HoTen")%></td> </tr> <% rs.movenext loop rs.close destroyConn%> </table>

4.5.8.6 Sử dụng ADO với câu lệnh truy vấn SQL 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 Sinhvien values(‘001’,’Tr ần V ăn A’)”%>

Sửa dữ liệu: <%Conn.execute “Update Sinhvien set HoTen=’Tran Van B’ where MaSV=’001’ “%>

Xoá dữ liệu: <%Conn.execute “Delete from Sinhvien where MaSV=’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.

Trang 99

Thêm dữ liệu: <%Dim RS set rs=server.createObject("ADODB.recordset") SQLstring="select * from Sinhvien" rs.open SQLstring ,conn,3,2 ‘rs.open SQLstring,conn,adOpenStatic,adLockPessimis tic rs.addnew ‘Thêm m ột b ản ghi rs(“MaSV”)=”001” ‘ gán giá tr ị cho các tr ường c ủa b ản ghi rs(“HoTen”)=”Tr ần V ăn A” rs.update ‘ Xác nh ận thêm xong rs.close ‘ ñóng recordset %> Sửa dữ liệu:

<% set rs=server.createObject("ADODB.recordset") ‘Kh ởi t ạo SQLString="select * from Sinhvien where ma=’001’ " ‘ l ấy ra b ản ghi c ần s ửa rs.open SQLString,conn,3,2 rs(“HoTen”)=”Tran Van B” ‘s ửa l ại giá tr ị tr ường “HoTen” rs.update ‘ xác nh ận s ửa xong rs.close ‘ ñóng recordset %>

Xóa dữ liệu: <% set rs=server.createObject("ADODB.recordset") ‘Kh ởi t ạo SQLString="select * from Sinhvien where MaSV=’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 %>

Trang 100

Documents

MỤC L ỤC - fit.mta.edu.vnMỤC L ỤC - fit.mta.edu.vn ... 1