i · web viewsoẠn thẢo siÊu vĂn bẢn 1.1. trang mã nguồn html và trang web trang mã...

TRƯỜNG ĐẠI HOC SƯ PHẠM KỸ THUẬT VINHKHOA CÔNG NGHỆ THÔNG TIN

ĐỀ CƯƠNG BÀI GIẢNGMÔN HỌC LẬP TRÌNH MẠNG

0

NĂM 2009

CHƯƠNG I- MỞ ĐẦUI. Mục tiêu của môn học Nắm vững các khái niệm căn bản của quá trình thiết kế, cài đặt và triển

khai một ứng dụng web Sinh viên nắm được những kiến thức cơ bản nhất về thiết kế trang web tĩnh,

như ngôn ngữ HTML VBScript, JavaScript,... Lập trình web động với công nghệ ASP, PHP Thực hành xây dựng ứng dụng web hoàn chỉnh có khả năng tương tác với

CSDL (MS Access, MS SQL, MySQL…)II. Yêu cầu về kiến thức Visual Basic 6.0, VBA Căn bản về CSDL Kiến thức về MS Access và MS SQL Server / My SQL, MySQL

III. Tài liệu tham khảo Công nghệ Internet/Intranet, T.Quang Thanh, Khoa CNTT – ĐHSPKT

Vinh Slice Bài giảng Lập trình Mạng Trang web tham khảo http://www.w3schools.com http://msdn.microsoft.com/library/ http://www.w3c.org http://www.hscripts.com

IV. Mở đầu về thiết kế web Nhắc lại một số khái niệm Phân loại trang web Một số bước chính trong phát triển website Công bố website trên internet Một số nguyên tắc quan trọng trong thiết kế web Cấu trúc website và bố cục trang web Tiếng Việt trong trang web

IV.1. Nhắc lại một số khái niệm4.1.1. Mạng, giao thức mạng

Mạng máy tính: Computer Network: Hệ thống các máy tính được kết nối với nhau nhằm trao đổi dữ liệu.

Giao thức: Protocol:– Tập hợp các quy tắc được thống nhất giữa các máy tính trong mạng

nhằm thực hiện trao đổi dữ liệu được chính xác– Ví dụ: TCP/IP, HTTP, FTP,…

1

4.1.2. Địa chỉ IP Xác định một máy tính trong mạng dựa trên giao thức TCP/IP. Hai máy

tính trong mạng có 2 địa chỉ IP khác nhau Có dạng x.y.z.t (0 ≤ x, y, z, t ≤ 255) Ví dụ: 203.162.01.11 Đặc biệt: địa chỉ: 127.0.0.1 (địa chỉ loopback) là địa chỉ của chính máy tính

đang sử dụng dùng để thử mạng 4.1.3. Tên miền (domain) Là tên được “gắn” với 1 địa chỉ IP. Máy chủ DNS thực hiện việc “gắn” (ánh xạ) Ở dạng văn bản nên thân thiện với con người Được chia thành nhiều cấp, phân biệt bởi dấu chấm (.). Cấp lớn hơn là con của cấp nhỏ hơn Ví dụ: cntt.spktvinh.edu.vn gắn với 203.162.01.11 trong đó: vn: Nước Việt Nam (Cấp 1) edu: Tổ chức giáo dục (Cấp 2) Spktvinh : Tên cơ quan (Cấp 3) cntt: đơn vị nhỏ trong cơ quan (Cấp 4) Đặc biệt: Tên localhost được gắn với 127.0.0.14.1.4. Máy chủ (SERVER) Là máy tính chuyên cung cấp tài nguyên, dịch vụ cho máy tính khác. Thường được cài các phần mềm chuyên dụng để có khả năng cung cấp Một máy chủ có thể dùng cho một hay nhiều mục đích. Tên máy chủ

thường gắn với mục đích sử dụng. Ví dụ: File server Application server Mail server Web server Thực tế: các máy chủ có cấu hình cao, khả năng hoạt động ổn định4.1.5. Máy khách (client) Máy khai thác dịch vụ của máy chủ Với mỗi dịch vụ, thường có các phần mềm chuyên biệt để khai thác Một máy tính có thể vừa là client vừa là server Một máy tính có thể khai thác dịch vụ của chính nó.4.1.6. Cổng dịch vụ (Service Port) Là số Î [0; 65535] xác định dịch vụ của máy chủ 2 dịch vụ khác nhau chiếm các cổng khác nhau Mỗi dịch vụ thường chiếm các cổng xác định, ví dụ: Web: 80 FTP: 21…..4.1.7. Chuỗi định vị tài nguyên (địa chỉ): URL (Uniform Resource Location) Tài nguyên: file trên mạng

2

URL: (Uniform Resource Location) Bộ định vị tài nguyên thống nhất Cấu trúc: giao_thức://địa_chỉ_máy:cổng/đường_dẫn/tên_file Ví dụ: http://www.spktvinh.edu.vn:8080/html/test.htm Trong trường hợp mặc định, nhiều thành phần có thể bỏ qua: Giao thức, cổng: Được trình duyệt đặt mặc định Tên file: được máy chủ đặt mặc định

4.1.8.Trang web, web site, World Wide Web Trang web: Web page: Là một trang nội dung Có thể được viết bằng nhiều

ngôn ngữ khác nhau nhưng kết quả trả về client là HTML Web site: Tập hợp các trang web có nội dung thống nhất phục vụ cho một

mục đích nào đó World Wide Web (WWW): Tập hợp các web site trên mạng internet.

4.1.9. Web server, Web browser Web server: là phần mềm chạy trên máy chủ để phục vụ Một số phần mềm web server chuyên dụng:

o Apache: mã nguồn mởo Internet Information Services (IIS): Sản phẩm của Microsoft

Web Browser: Phần mềm chạy trên client để khai thác dịch vụ web Một số Web browser:

o Nescapeo Mozilla Firefoxo Internet Explorer (IE): tích hợp sẵn trong windowso ...

4.2. Phân loại web Dựa vào công nghệ phát triển, có 2 loại: Web tĩnh: là các trang web được xây dựng sẵn trên Server có hình dáng

nguyên thuỷ như thế nào thì khi thể hiện trên browser nó thể hiện nguyên si như vậy

o Dễ phát triểno Tương tác yếuo Sử dụng HTMLo Người làm web tĩnh thường dùng các công cụ trực quan để tạo ra

trang web Web động:có khả năng tương tác với cơ sở dữ liệu đặt trên Server

o Khó phát triển hơno Tương tác mạnho Sử dụng nhiều ngôn ngữ khác nhauo Thường phải viết nhiều mã lệnh

4.3. Các bước phát triển trang web

3

Tương tự với phân tích và thiết kế hệ thống.o Đặc tảo Phân tícho Thiết kếo Lập trìnho Kiểm thử

Đặc tả:o Web để làm gì?o Ai dùng?o Trình độ người dùng?o Nội dung, hình ảnh?

Phân tícho Mối liên quan giữa các nội dung?o Thứ tự các nội dung?o

Thiết kếo Sơ đồ cấu trúc websiteo Giao diệno Tĩnh hay độngo CSDLo Nội dung từng trango Liên kết giữa các trang

Xây dựngo Cấu trúc thư mụco Các modul dùng chungo …

Kiểm thửo Kiểm tra trên nhiều trình duyệto Kiểm tra trên nhiều loại mạngo Kiểm tra tốc độo Kiểm tra các liên kếto Thử các lỗi bảo mậto …

CHƯƠNG 2

NGÔN NGỮ ĐÁNH DẤU SIÊU VĂN BẢN HTML (HYPERTEXT MARKUP LANGUAGE)

4

1. SOẠN THẢO SIÊU VĂN BẢN

1.1. Trang mã nguồn HTML và trang Web

Trang mã nguồn HTML là một tệp văn bản bình thường gồm các kí tự ASCII, có thể được tạo ra bằng bất cứ bộ soạn thảo văn bản nào. Theo qui ước, tất cả các tệp mã nguồn của siêu văn bản phải có đuôi là .html hoặc .htm.

Khi dùng trình duyệt (brower) đọc nội dung trang mã nguồn và hiển trị nó lên màn hình máy tính thì ta thường gọi là trang Web. Vậy trang Web không tồn tại trên đĩa cứng của máy tính. Nó là cái thể hiện của trang mã nguồn qua xử lý của trình duyệt

Hiện nay có nhiều công cụ soạn thảo siêu văn bản mạnh như MicroSoft Word 97, FrontPage 2000 , Visual InterDev 6.0 . . . với giao diện trực quan và tự động sinh mã HTML, cho phép soạn thảo siêu văn bản không khác gì so với soạn thảo thông thường.

Tuy nhiên, việc tìm hiểu cú pháp của HTML, nắm vững ý nghĩa các thẻ khác nhau vẫn rất cần thiết để có thể tạo ra các trang Web sinh động, tương tác với các ứng dụng cơ sở dữ liệu sau này.

1.2. Các thẻ HTML là gì?

Các thẻ (Tag) dùng để báo cho trình duyệt cách thức trình bày văn bản trên màn hình hoặc dùng để chèn một mối liên kết đến các trang khác, một đoạn chương trình khác . . . Mỗi thẻ gồm từ khoá (KEYWORD) bao bọc bởi 2 dấu “<” và “>” . Hầu hết các lệnh được thể hiện bằng một cặp hai thẻ: thẻ mở (<KEYWORD>) và thẻ đóng (</KEYWORD>).<KEYWORD> Đoạn văn chịu sự tác động của lệnh </KEYWORD>

Nhiều thẻ có kèm các thuộc tính bắt buộc hay không bắt buộc, cung cấp thêm các tham số chi tiết hơn cho việc thực hiện lệnh.

1.3. Vài qui tắc chung

a/ Nhiều dấu cách liền nhau cũng chỉ có tác dụng như một dấu. Bạn phải sử dụng thẻ để thể hiện nhiều dấu dãn cách liền nhau.

b/ Các từ khoá không phân biệt chữ hoa và chữ thường

c/ Qui tắc viết các kí tự đặc biệt trong HTML là tên_qui_định của kí tự nằm giữa dấu & và dấu nháy kép “.

Các viết: & tên_qui_định “

5

d/ Có thể chèn các dòng chú thích vào trang mã nguồn bằng cách đặt giữa cặp dấu chú thích <! --- và --->. Trình duyệt sẽ bỏ qua không xem xét đến phần mã nằm giữa cặp dấu đó.

<! - - dòng chú thích --- >

1.4. Cấu trúc của một tài liệu HTML

Mọi tài liệu HTML đều có khung cấu trúc như sau:

Giữa cặp thẻ tiêu đề <TITLE> . . . </TITLE> là dòng chữ sẽ hiện lên trên thanh tiêu đề của cửa sổ khi trình duyệt đọc tài liệu. Nếu bỏ trống thì trình duyệt sẽ cho hiện tên tệp thay vào đó.

Toàn bộ nội dung của tài liệu nằm giữa hai thẻ xác định thân của trang <BODY> . . . </BODY>. Các dòng văn bản, hình ảnh , âm thanh , video , các mối liên kết . . . tạo nên trang Web đều phải nằm ở đây.Ví dụ: trang web hiển thị lên màn hình trình duyệt dòng “Hello World !!!”Nội dung chương trình:<HTML><HEAD><TITLE>Vi dụ về trang Hello World</TITLE></HEAD><BODY>Hello World !!!<Hr></BODY></HTML>

2. TRÌNH BÀY TRANG TRONG HTML

2.1. Các mức đầu đề trong HTML

Mở đầu trang văn bản là đầu đề cần làm nổi bật. Các phần của văn bản như chương, tiết , mục . . .

6

<HTML><HEAD><TITLE> . . .</TITLE></HEAD><BODY> . . . . .</BODY></HTML>

Các thẻ định nghĩa đầu đề là <Hn> và </Hn> (Tag Header). Trong bộ thẻ này có thêm tính chất "Align" dùng để căn lề các mức đầu đề, có các giá trị: _ "Left": dùng căn lề trái cho dòng tiêu đề. _ "Right": dùng căn lề phải cho dòng tiêu đề. _ "Center": dùng để đưa dòng tiêu đề vào giữa. _"Justify": dùng để sắp xếp đầu đề trên một dòng văn bản. Đầu đề này có sáu cỡ văn bản: Từ H1 đến H6, kiểu H1 là kiểu to nhất và giảm dần đến H6 là kiểu nhỏ nhất. Ví dụ: để có dòng tiêu đề với cỡ chữ là to nhất ta dùng cú pháp: <H1 align=”center”>Truong CDSPKT Vinh </H1>.

2.2. Các thẻ trình bày trang trong HTML

Thẻ <P> và </P> (paragraph): dùng để phân các khối văn bản bằng một dòng trống trước khi nó tiếp tục, kèm theo bộ thẻ này nó có tính chất "Align" với 4 giá trị

_ "Left": Browser sẽ đặt đoạn văn bản tiếp theo về phía bên trái. _"Right": Browser sẽ đặt đoạn văn bản tiếp theo về phía bên phải. _"Center": Browser sẽ đặt đoạn văn bản tiếp theo vào giữa trang. _"Justify": Browser sẽ đặt đoạn văn bản tiếp theo trên một hàng.Thuộc tính ngầm định là "Left". Ví dụ:

<P align=”Justify>nội dung của đoạn văn</P>

Các thẻ của khối văn bản:

Để thêm vào một vài kiểu định dạng theo ý tác giả, HTML đã đưa vào một số thẻ sau:

Thẻ <Blockquote> và </Blockquote>: hoặc viết ngắn gọn <BQ> và </BQ>, bộ thẻ này giống như bộ thẻ paragraph. Thay vì bộ thẻ paragraph thêm vào dòng trống trước đoạn văn bản, thì bộ thẻ Blockquote này nó thêm vào cả trước, sau, trái, phải của tài liệu và có thể hiển thị một dạng font khác.

Thẻ <ADDRESS> và </ADDRESS>: Đây là thẻ địa chỉ nó cho khối văn bản nằm trong thẻ này có một dạng định dạng khác. Thường bộ thẻ này nằm cuối của tài liệu, dùng để ghi lại địa chỉ của E_mail hoặc các biệt hiệu của tác giả.

7

Thẻ <BR> và </BR>: Thường được dùng trong các trường hợp giống như khối địa chỉ khi cần ghi trên những dòng khác nhau, thẻ này có thể được dùng để ngắt trong một dòng văn bản mà không cần chèn các dòng trống.

Thẻ <PRE> và </PRE>: Đây là thẻ định dạng cho đoạn văn bản. Trong thẻ này kèm theo thuộc tính "Width=n". Giá trị mặc định là 80 kí tự. Trong đoạn thẻ này có thể sử dụng các kí tự ASCII nghệ thuật. Như vậy ta có thể sử dụng <PRE> để lập các bảng.

Thẻ <hr> : (hr_horizontal Rule) sẽ cho đường kẻ ngang chạy suốt cửa sổ màn hình. Thẻ này có tính chất là:

- Width=n%: thay đổi độ dài đường kẻ , chiếm n% độ rộng màn hình- Size=n: thay đổi độ đậm hay mảnh của đường kẻ. N là số pixel- Align=”Left | Center | Right” căn trái, căn giữa hay căn phải đường kẻVí dụ: <HR Width=80% align=”left” size=2>

3. TRÌNH BÀY KIỂU CHỮ

3.1. Các thẻ trình bày chữ

Thẻ <Strong> và </Strong> hoặc <B> và </B>: In chữ đậm Thẻ <EM> và </EM> hoặc <I> và </I>: in chữ nghiêng Thẻ <U> và </U>: in chữ gạch chân Thẻ <Sup> và </Sup>: in chỉ số trên

Thẻ <Sub> và </Sub>: in chỉ số dưới

3.2. Các thuộc tính của Font chữ

Cặp thẻ <FONT> . . . </FONT> cho phép thay đổi kiểu, màu và kích thước của chữ.

Thuộc tính SIZE: thay đổi kích thước của chữ, bạn có thể chọn tập kích thước từ 1 đến 7 hoặc dùng SIZE=+/-n , trong đó +/-n chỉ ra mức thay đổi bạn muốn.Ví dụ: <FONT size=+1> . . . </FONT>

Thuộc tính COLOR: thuộc tính này xác định màu chữ đè lên màu chữ được đặt bởi thẻ <BODY>Ví dụ: <FONT Color=”#rrggbb”> . . . </FONT>

Thuộc tính FACE: cho phép xác định kiểu chữ Ví dụ: <FONT face=”.VnTime”> . . . </FONT>

Phối hợp các thuộc tính: Ví dụ: <FONT size=+1 face=”.VnTime” color=”#rrggbb”> . . . </FONT>

8

4. DANH SÁCH VÀ BẢNG TRONG HTML

4.1. Danh sách

a. Thẻ <UL> và </UL> (Unordered List): là bộ thẻ danh sách không thứ tự, nó có dạng:

<UL><LI> . . .first list Item

<LI> . . .second list Item </UL> Trong đó <LI> có các thuộc tính sau, xác định kiểu hạt đậu ở đầu dòng: “disc”, “square” hoặc “circle”.Ví dụ:

<UL><LI type=disc>Phần một<LI type=square>Phần hai<LI type=circle>Phần ba</UL>

b. Thẻ <OL> và </OL> (Ordered List): là thẻ chứa một danh sách thứ tự. Phần nhiều là giống như một danh sách không thứ tự, nhưng nó thay nút đầu bằng những con số được sử dụng một cách tự động và tăng dần với mỗi phần tử. Trong đó <LH> và </LH> là đầu danh sách.

Ví dụ: <OL><LH>Danh sách</LH><LI>Phần một<LI>Phần hai<LI>Phần ba</OL>

4.2. Trình bày bảng trong HTML

Bạn có thể tạo ra bảng biểu sử dụng các thẻ sau đây:

TAG/Attribute Description<TABLE BORDER=n CELLSPACING=n CELLPADDING=n

- TABLE - là bắt đầu bảng- BORDER - đặt khung nổi bao quanh các ô- CELLSPACING - dùng để đặt khoảng

9

BGCOLOR=”#rrggbb”> cách giữa các ô trong bảng- CELLPADDING - Dùng để định khoảng

cách trong ô với các đường bao- GBCOLOR - đặt màu nền trong bảng

<CAPTION> ...</CAPTION>

- dùng để đặt tựa đề cho bảng

<TR> . . .</TR> Dùng để chèn một dòng trống vào bảng đồng thời dùng để báo cho browser biết dữ liệu là dữ liệu cuối để kết thúc dòng này.

<TD> . . .</TD> - Dùng để đặt dữ liệu cho mỗi ô.<TH> ...</TH> - Dùng cho ô ở phần đầu của dòng hoặc cột,

cho phép hiển thị dòng văn bản mới với font chữ đậm để làm tiêu đề cho cột hoặc dòng đó.

ALIGN="Left, Right, Center" - Dùng để căn lề theo chiều ngang của ô. Thuộc tính này dùng kèm bên các thẻ <TR>, <TH>, <TD>

Valign="Top, Midle, Bottom, Base, Line"

- Dùng để căn lề chữ trong ô theo chiều đứng. Thuộc tính này dùng kèm bên các thẻ <TR>, <TH>, <TD>

WIDTH=n% - Dùng để đặt độ rộng của ô, bảng. Thuộc tính này dùng kèm các thẻ <TABLE>, <TD>

COLSPAN=n - Dùng để hợp nhất số cột lại thành một, thuộc tính này dùng cho các thẻ: <TD>, <TH>.

ROWSPAN=n - Dùng để hợp nhất số dòng lại thành một. Thuộc tính này dùng cho các thẻ: <TD>, <TH>.

Ví dụ: để có một bảng sau đây trên trình duyệtDanh sách cán bộ

TT Họ và tên Ngày sinh1 Trần Văn Ba 20/10/19812 Trần Văn Nam 10/10/1982

Ta có thể viết đoạn mã như sau:<TABLE BORDER=1><Caption>Danh sách cán bộ</Caption><TR>

10

<TD>TT</TD><TD>Họ và tên</TD><TD>ngày sinh</TD></TR><TR><TD>1</TD><TD>Trần Văn Ba</TD><TD>20/10/1981</TD></TR><TR><TD>2</TD><TD>Trần Văn Nam</TD><TD>10/10/1982</TD></TR></TABLE>

5. ĐƯA HÌNH ẢNH VÀO TÀI LIỆU

Cú pháp:

<IMG SRC=”URL” ALT=”alternative text” Width=n HEIGHT=n ALIGN=”Top | Middle | Left | Right” HSPACE=n VSPACE=n BORDER=n>Các thuộc tính được mô tả theo bảng sau:

Thuộc tính Mô tả Chú thíchSRC=”URL” Địa chỉ nơi có tệp

ảnhCác tệp ảnh dạng .BMP, GIF, JPG, ..

ALT=”đoạn chữ thay thế”

Đoạn chữ hiển thị thay thế cho ảnh

Nên có vì không phải lúc nào cũng hiển thị được ảnh

WIDTH=nHEIGHT=n

Đặt chiều rộng, chiều cao của khung ảnh

Đảm bảo cho text nạp và hiển thị trước

ALIGN=”Top | Middle | Left | Right”

Vị trí đặt ảnh Canh lề ảnh

VSPACE=nHSPACE=n

Viền trống xung quanh khung ảnh

Dùng kèm với align để tạo viền trống xung quanh ảnh

BORDER=n Độ đậm hay thanh mảnh của khung ảnh khi ảnh cũng là đầu mối liên kết

Có thể đặt BORDER=0 nêu muốn loại bỏ khung viền

Việc chèn ảnh hoạt hình vào trang Web không có gì khác so với chèn ảnh bình thường.

Tạo ảnh hoạt hình là một trong những cách tốt nhất thu hút sự chú ý của người đọc.

11

Việc tạo ảnh hoạt hình cũng khá đơn giản. Nguyên lý chung là cho trình diễn một loại ảnh tĩnh gần tương tự nhau, mỗi ảnh sẽ là một trạng thái trong hoạt cảnh muốn trình diễn.

Có nhiều công cụ làm sẵn cho phép tạo ảnh hoạt hình. Một trong số các công cụ đó là Ulead GIF Animator.Ví dụ: để đưa một ảnh lưu trên đĩa trong thư mục C:\HOMEPAGE với tên file “anh1.gif” ta có thể viết:<IMG SRC=”C\HOMEPAGE\anh1.gif” ALT=”ảnh trường CĐSPKT Vinh” Width=200 HEIGHT=200 ALIGN=”Middle” HSPACE=4 VSPACE=4 BORDER=0>

6. CÁC MỐI LIÊN KẾT SIÊU VĂN BẢN Có hai loại liên kết:

a. Liên kết ngoài - External Links

Để liên kết đến một tài liệu khác , ta cần phải biết địa chỉ URL của tài liệu đích. Cũng cần phải chỉ chỗ, thường là một nhóm vài từ để làm đầu mối liên kết. Nhóm từ này sẽ đổi màu để phân biệt, con chuột trỏ vào sẽ có hình bàn tay và khi nhấn chuột thì trang siêu văn bản đích sẽ được hiển thị.

Nên cố gắng chọn các từ làm đầu mối sao cho gợi tả và tự nhiên như một thành phần hữu cơ của câu văn. Tránh lặp đi lặp lại “click here” khi tạo đầu mối liên kết.

Cú pháp để chọn ra một mối liên kết tới tài liệu khác – liên kết ngoài - là như sau:

<A HREF=”URL”>nhóm từ làm đầu mối</A>

Địa chỉ tuyệt đốiKhi liên kết tới một tệp nằm ở ngoài máy tính cục bộ ta phải nêu rõ giao thức

và đầy đủ địa chỉ URL của tệp đích.Ví dụ:

<A HREF=”http://www.hotmail.com”>hotmail</A><A HREF=”http://www.yahoo.com”>Yahoo</A>

Địa chỉ tương đốiNếu liên kết đến một tệp ở ngay trên máy chủ thì không cần dùng địa chỉ

URL tuyệt đối mà dùng địa chỉ tương đối. Thay cho URL là tên tệp cùng với đường dẫn đến thư mục nơi chứa tệp đích.

12

<A HREF=”path & filename”> . . . </A>Ví dụ:

<A HREF=”example1.htm”>Vi du 1 </A>

b. Liên kết nội tại - Internal Link

Cũng có thể tạo mối liên kết trong bản thân tài liệu siêu văn bản, từ phần này đến phần khác. Điều này rất có ích khi tài liệu có kích thước lớn. Ta có thể tạo mục lục toàn bộ nội dung trên phần đầu trang gồm tên các chương và liên kết từng tên chương đến phần nội dung tương ứng.

Để làm điều này, cần đánh dấu điểm đích (book mark) của liên kết bằng thẻ neo <A Name=”tên điểm đích”>.

Trong thẻ neo tại điểm đầu của mối liên kết thì thay URL bằng <tên_điểm_đích>.

<A HREF=”#tên_điểm_đích”>

Ví dụ: trong liên kết nội tại dưới đây đã tạo một book mark ở đầu trang với tên là TOP. Thẻ neo liên kết ở dòng dưới có dạng <A HREF=”#Top”>Về đầu trang</A>

6.2. Chèn tệp âm thanh vào tài liệu

Để chèn một đoạn âm thanh vào tài liệu HTML ta cũng theo đúng qui tắc tạo mối liên kết thông thường. Trong thẻ neo, tại địa chỉ URL bây giờ là địa chỉ của tệp âm thanh.

Dưới đây là một ví dụ về chèn tệp âm thanh vào tài liệu. Khi nhấn chuột tại mối liên kết tệp âm thanh sẽ được phát lại.

<A HREF=”sounds/hawaii.au”>Welcome to Hawaii ! </A>

- Tạo âm thanh nền - Embedding Sound Files

Không những có thể chèn tệp âm thanh vào tài liệu HTML mà còn có thể nhúng âm thanh vào tài liệu, nghĩa là tạo âm thanh nền phát ra khi bắt đầu hiển thị trang tài liệu.

Để nhúng âm thanh vào tài liệu ta dùng thẻ như ví dụ sau đây:

<EMBED SRC=”Sounds/hakuna.mid” height=50 width=200 autostart=true Loop=true>

6.3. Chèn tệp video13

Việc chèn tệp video vào tài liệu hoàn toàn tương tự chèn tệp âm thanh vào tài liệu 7. KHÁI NIỆM CHUNG VỀ FORM

Bộ thẻ <FORM> và </FORM>: Giống như thẻ <BODY>, trong bộ thẻ <FORM>...</FORM > có chứa các thành phần của thẻ HTML để tạo nên trang Web. Trong thẻ <FORM> có chứa các thuộc tính tác động:

Action: là thuộc tính tác động đến tên của chương trình mà ta sẽ dùng để thực hiện form khi Form được gửi tới Server.

Method: Dùng để qui định cách thức gửi dữ liệu từ Client tới Server, thuộc tính này cung cấp cho ta hai phương pháp:

Get: Đây là thuộc tính mặc định, dữ liệu gửi tới Server được gộp vào cùng với URL khi truyền đi. Đặc điểm của phương thức này là dữ liệu gửi đi nhanh nhưng có độ dài hạn chế, không an toàn khi dữ liệu dài vì sẽ bị tự động cắt bớt.

Post: Cho phép gửi dữ liệu có độ dài không hạn chế và an toàn hơn.

Các thành phần của Form

Thẻ <INPUT>: Là một phần tử đặc biệt được tạo trong thẻ <Form>. Cho phép ta nhập các thông tin để gửi tới một chương trình trên Server. Thẻ này có 5 thuộc tính.Thuộc tính Type: Dùng để điều khiển vùng nhập liệu, thuộc tính này có các

giá trị sau: _ Text: Vùng nhập liệu là văn bản chuẩn (mặc định).

_ Number: Cho phép vùng nhập liệu vào là số. _ Password: Là vùng văn bản có mặt nạ khi nhập liệu. _ Button: Tạo nút chọn _ Hiden: Vùng văn bản ẩn, nó không giống như Password. Đây là vùng dữ liệu không hiển thị trên trang Web. _ Checkbox: Dùng để đặt các hộp trên đó, trên đó dùng để kiểm tra trạng thái ON hoặc OFF. _ Radio: Dùng dể đặt những cái nút có tác dụng lẫn nhau cho phép người dùng chọn ON hoặc OFF. _ Image: Là những ảnh đồ hoạ mà người dùng có thể kích trên đó để thực hiện các Form. _ Submit: Là nút mà người dùng có thể tác động trên đó để thực hiện form. _ Reset: Là nút mà khi người dùng tác động đến, toàn bộ dữ liệu trên form

14

sẽ bị xoá hết. Thuộc tính Name: Là tên duy trì vùng dữ liệu khi nó được gọi lại từ một

chương trình, thường dùng trong các Script.Thuộc tính Size: Dùng để quy định độ dài vùng nhập dữ liệu. Thuộc tính Maxlength: Là độ dài tối đa của vùng nhập liệu.Thuộc tính Value: Là giá trị mặc định cho một thành phần trên FORM.

Thẻ <TextArea> và </TextArea>

Dùng để tạo ra văn bản rộng lớn không hạn chế số dòng trên trang Web. Vùng này sẽ tự động thêm vào thanh cuốn khi cần thiết. Bộ thẻ này thường dùng cho những trường memo của form và văn bản trong bộ thẻ này là mặc định cho TextArea. TextArea cung cấp cho các thuộc tính sau:

Name: Dùng để đặt tên cho Textarea.Row: Số lượng dòng cần hiển thị.Col: Số lượng cột cần hiển thị.

Thẻ <Select> và </Select>: Cho phép người sử dụng tạo các menu Popup. Trong bộ thẻ này nó cung cấp thêm một số thẻ bên trong kèm theo các thuộc tính sau:

Thuộc tính Name: Dùng để đặt tên cho menu.Thuộc tính Size: Bố trí dòng được hiển thị trên trang Web BrowserThuộc tính Multiple: Cho phép lựa chọn nhiều dòng.

Thẻ <Option>: Là kí hiệu cho phép lựa chọn một hay nhiều dòng cùng lúc khi thẻ <Select> được bắt đầu.

8. KHUNG - FRAMES

Thẻ <Frameset> và </Frameset>:Bộ thẻ này dùng để chia màn hình thành các phần riêng biệt và mỗi phần có thể nạp một tài liệu khác nhau, tài liệu trong mỗi Frame này có thể cập nhật từ một Frame khác. Bộ thẻ Frame này khi sử dụng nó thay thế cho bộ thẻ <BODY>. Trong thẻ Frameset này có chia thuộc tính: _ Cols: Dùng để tạo độ rộng cho các cột. _ Rows: Đặt chiều cao của các dòng trong Frameset.Giá trị của Cols và Rows được tính bằng phần trăm của cửa sổ hiện thời, hoặc số pixel. Thẻ <Frame>: Dùng để đặt nội dung cho các cửa sổ của Frameset. Trong

thẻ này có các thuộc tính: _ SRC: Cho phép ta móc nối với một tài liệu của URL. Tài liệu đó sẽ được

15

hiển thị trong Frame được chọn. _ Name: Dùng để đặt tên cho Frame, nhờ thuộc tính này mà Frame có thể cập nhật một tài liệu được liên kết từ trong một Frame khác. _ MarginWidth và MarginHeight: Được dùng để hiệu chỉnh kích thước trên, dưới, trái , phải của tài liệu trong Frame. Giá trị này được tính bằng pixel. _ Scrolling: Đây là thuộc tính điều khiển thanh cuốn của Frame, có 3 giá trị: + Yes: Thanh cuốn luôn luôn xuất hiện trong Frame thậm chí lúc Frame không đầy. + No: Thanh cuốn sẽ không có trên Frame, trường hợp này sẽ gây nguy hiểm nếu dữ liệu dài hơn Frame. + Auto: Trường hợp này là mặc định, nếu browser thấy cần thiết _ Noresize: Thuộc tính này dùng để hạn chế người dùng sửa chữa kích thước khung.

Thẻ <NoFrame> và </NoFrame>: Bộ thẻ này dùng hỗ trợ cho các Browser không có hỗ trợ Frame lúc đó nội dung này sẽ được hiển thị.

Ví dụ: để tạo ra một màn hình gồm 3 phần có dạng:

Menu-win

header-win

body-win

Nội dung chương trình:<HTML><HEAD><TITLE>My homepage</TITLE></HEAD><FRAMESET cols="200,*" BORDER=0 frameborder="0"> <FRAME NAME="menu-win" SRC="mainlnk.htm" SCROLLING="No" CELLPADDING="0" CELLSPACING="0" NORESIZE> <FRAMESET ROWS="100,*" MARGINWIDTH="0" MARGINHEIGHT="0" BORDER=0>

16

<FRAME NAME="header-win" SRC="Header.htm" SCROLLING="No" CELLPADDING="0" CELLSPACING="0" NORESIZE> <FRAME NAME="body-win" SRC="dc.htm" SCROLLING="Auto" CELLPADDING="0" CELLSPACING="0" NORESIZE> </FRAMESET></FRAMESET></HTML>

9. BỘ THẺ TƯƠNG TÁC VỚI NGÔN NGỮ JAVA:

Thẻ <Applet> và </Applet>: Dùng để gói một chương trình áp dụng chạy trên Java. Thông thường bộ thẻ này được sử dụng cho các chương trình hình ảnh sống động và kết hợp âm thanh. Ưu điểm lớn nhất của bộ thẻ này là có thể tạo ra các chương trình áp dụng chạy với tốc độ nhanh. Những chương trình này được điều khiển bằng các thông số thiết lập trên ngôn ngữ HTML. Nó có thể kết hợp các âm thanh, hình ảnh một cách dễ dàng. Trong thẻ này có các tính chất sau:

_ Code: Dùng để gọi tên chương trình Java áp dụng._ Width và Height: Là độ rộng và độ cao của cửa sổ chương trình_ Codebase: Là thư mục chứa chương trình mà ta sẽ chạy._ Align: Là thuộc tính điều khiển vị trí của sổ chương trình _ Vspace và Hspace: Là khoảng không theo chiều đứng và theo chiều

ngang bao lấy cửa sổ chương trình áp dụng.Thẻ <Param>: Được sử dụng trong bộ Tag <Applet>, Tag này có thể không

có hoặc có rất nhiều, tuỳ theo chương trình áp dụng.Ví dụ: giả sử đã có một chương trình “Helloworld.java” ta đã biên dịch thành tệp “Helloworld.class”, muốn nhúng vào trang web ta có đoạn chương trình sau:<APPLET CODE=”Helloworld.class” WIDTH=150 HEIGHT=25></APPLET>

BÀI TẬP CHƯƠNG 22.1Thế nào là trang mã nguồn và trang Web?.2.2 Cấu trúc của một tài liệu HTML. Các thẻ HTML là gì?.2.3 Ý nghĩa của các thẻ trình bày trang trong HTML.2.4 Nêu các thuộc tính của thẻ <FONT> . .</FONT>.2.5 Trình bày cách dùng các thẻ danh sách và bảng.2.6 Muốn đưa ảnh vào tài liệu HTML ta dùng ảnh nào?. Nêu các thuộc tính của

thẻ đó.2.7 Có những loại liên kết nào trong một tài liệu HTML?. Muốn tạo liên kết ta

dùng thẻ nào? Cho ví dụ.17

2.8 Có các thuộc tính nào tác động trong FORM? Ý nghĩa của các thuộc tính đó.2.9 Nêu các thành phần của FORM.2.10 Cách sử dụng thẻ <FRAMESET> . .</FRAMESET> để chia màn hình

trình duyệt thành các phần riêng biệt. Viết đoạn mã để chia màn hình trình duyệt thành các Frame có dạng sau:

Head-win (150 pixel)Menu1-win (200 pixel)

Body-win Menu2-win(150 pixel)

2.11 Xây dựng trang Web tĩnh tạo danh sách lớp học của bạn.2.12 Xây dựng trang Web giới thiệu về bản thân.

CHƯƠNG 3

NGÔN NGỮ LẬP TRÌNH VBSCRIPT

18

1.GIỚI THIỆU VỀ NGÔN NGỮ LẬP TRÌNH VBSCRIPT

Microsoft Visual Basic Script là một phần mới của họ ngôn ngữ lập trình Visual Basic. VBScript là một script rất có hiệu quả trên những môi trường đa dạng, bao gồm cả Web client (Internet Explorer) hay Web Server (Microsoft Internet Infomation Server). Những đoạn lệnh của VBScript được chèn trực tiếp vào trang Web mà không phải dịch trước, nó được tự động dịch mỗi khi Web Browser gặp.

2.CÁC KIỂU DỮ LIỆU TRONG VBSCRIPT

Trong VBScript có duy nhất một kiểu dữ liệu đó là kiểu Variant. Tuỳ vào ngữ cảnh mà một biến Variant là số, hoặc là xâu. Trong kiểu Variant cũng chứa các kiểu con cho phép người lập trình sử dụng chính xác kiểu biến. Nếu không khai báo chính xác kiểu của biến thì biến sẽ có kiểu Variant và VBScript sẽ sử dụng biến với kiểu dữ liệu con của Variant thích hợp nhất. Trong kiểu Variant có chứa các kiểu con sau:

KIỂU CON MÔ TẢ

EmptyVariant không được khởi tạo.Giá trị là 0 cho biến kiểu số, xâu độ dài là 0 cho các biến kiểu xâu.

Null Biến Variant không chứa thông tin thích hợp.

Boolean Mang hai giá trị True hoặc False

Byte Các số nguyên từ 0 đến 255

Integer Các số nguyên trong phạm vi -32768 đến 32767

Currency Kiểu tiền tệ có độ dài 8 byte.

Long Chứa các số nguyên có độ dài 4 byte

Single Kiểu dấu phẩy động có độ chính xác đơn

Double Kiểu dấu phẩy động có độ chính xác kép

Date Kiểu thời gian (gồm Date+Time)

String Chứa các xâu ký tự có độ dài thay đổi.

Object Chứa một đối tượng

Error Chứa mã lỗi

Quy tắc sử dụng biến:Trong VBScript chấp nhận việc sử dụng biến không qua khai báo. Nếu muốn

khại báo ta có thể khai báo với cú pháp như sau:

Dim <Tên biến>

19

Public <Tên biến>

Private <Tên biến>

Khai báo hằng: Const <tên hằng> = <giá trị của hằng>

Khai báo mảng: Dim <Tên mảng>(độ dài tối đa của mỗi chiều)

Ví dụ : A(2,3) Mảng A có kích thước 2 x 3

VBScript cũng cho phép sử dụng mảng có kích thước động nhưng chỉ được phép dùng trong một thủ tục. Cách khai báo mảng có kích thước động như sau:

Dim <Tên mảng>()Khi cần dùng đến có thể khởi tạo bởi lệnh:

Redim <Tên mảng>(Độ dài tối đa của mỗi chiều)

3. CÁC TOÁN TỬ TRONG VBSCRIPT

3.1. Các toán tử số học

^ (Luỹ thừa), *, /, \ (chia nguyên), mod (phần dư),+,-,&(Nối hai xâu)

Các toán tử so sánh:

=, <>, <, >, <=, >=, is (Đối tượng bằng)

3.2. Các toán tử logicNot, And, or, Xor, Eqv (Bằng).

3.3. Các toán tử điều khiển

a. Cấu trúc if .. then (dạng khuyết):

Cú pháp:

Một dòng lệnh:

If <biểu_thức_điều_kiện> then <câu lệnh>

Nhiều dòng lệnh:

If <biểu_thức_điều_kiện> then

<Các câu lệnh>

end if

20

Tác động: nếu <biểu_thức_điều_kiện> có giá trị đúng (true), máy thực hiện tất cả các dòng lệnh sau Then.

Ví dụ: Tìm max của hai số a,b ta có thể viết đoạn mã như sau: Max=a

If a<b then max=bb. Câu lệnh if . . then . . else (dạng đủ):Cú pháp:

If <biểu_thức_điều_kiện> then <câu lệnh 1> Else <câu lệnh 2>

Hoặc

If <biểu_thức_điều_kiện_1> then

<Các câu lệnh 1>[ Else <biểu_thức_điều_kiện_2> then

<Các câu lệnh 2>]] . . . [else <Các câu lệnh n>] End IfTác động: nếu <biểu_thức_điều_kiện_1> có giá trị đúng (true), máy thực hiện <câu lệnh 1>, trái lại máy thực hiện <câu lệnh 2>.Ví dụ:Tìm max, min của hai số a,b:

If a>b thenMax=aMin=b

ElseMax=bMin=a

End if

c. Câu lệnh Select Case:Cú pháp:

Select case <Biểu_thức_kiểm_tra>Case <danh_sách_Giá_trị_1>

<Các lệnh 1>Case <danh_sách_Giá_trị_2>

<Các lệnh 2>. . .

21

Case <danh_sách_Giá_trị_n><Các lệnh n>

[else <Các lệnh n+1>]

End SelectTác động: máy tính giá trị của <Biểu_thức_kiểm_tra>. Nếu giá trị của <Biểu_thức_kiểm_tra> bằng một trong các giá trị của <danh_sách_giá_trị_i> thì máy thực hiện <Các câu lệnh i>, sau đó thực hiện các lệnh sau End select nếu có.Nếu có tuỳ chọn [else . . .] mà giá trị của <Biểu_thức_kiểm_tra> không trùng với giá trị nào trong danh sách giá trị thì máy thực hiện <Các câu lệnh n+1>.Ví dụ: Select case chon Case 1 Str=”Chon =1” Case 2 Str=”chon=2” Case 3 Str=”chon=3” End select

3.4.Các cấu trúc lặp

VBScript hỗ trợ một số cấu trúc lặp sau:

a. Cấu trúc Do . . . Loop while:

Cú pháp:

DO

<Các câu lệnh>

LOOP WHILE <biểu_thức_điều_kiện>

Tác động:

- Thực hiện <Các câu lệnh>, sau đó máy kiểm tra <biểu_thức_điều_kiện>, nếu <biểu_thức_điều_kiện> còn đúng thì còn thực hiện <các câu lệnh>.

Ví dụ: tính tổng từ 1 đến 100.

dim i,tong

i=1

22

tong=0

do

tong=tong+i

i=i+1

loop while i<=100

b. Cấu trúc do while . . . loop:Cú pháp:

DO WHILE <Biểu_thức_điều_kiện>

<các câu lệnh>

LOOP

Tác động:

Chừng nào <biểu_thức_điều_kiện> còn đúng thì còn thực hiện <các câu lệnh>.

Ví dụ: Tính tổng từ 1 đến 100.

dim i,tong

i=1

tong=0

do while i<=100

tong=tong+i

i=i+1

loop

c. Cấu trúc while . . . wend:

Cú pháp:

While <biểu_thức_điều_kiện>

<Các câu lệnh>

Wend

Tác động: tương tự như lệnh DO WHILE . . LOOP

23

d. Cấu trúc For . . . Next:Cú pháp:

For <biến_điều_khiển>=<Cận_đầu> TO <Cận_cuối> [STEP <Bt số>]

<Các câu lệnh>

NEXT

Tác động:

<Các câu lệnh> được thực hiện một số lần từ <Cận_đầu> đến <Cận_cuối>, sau mỗi lần biến điều khiển nhận giá trị bằng <biến_điều_khiển> cộng với <Bt số>.- Nếu <Bt số> dương <biến_điều_khiển> tăng.- Nếu <Bt số> âm <biến_điều_khiển> giảm.- Nếu không có tuỳ chọn [STEP <Bt số>], <biến_điều_khiển> tự động tăng một

đơn vị.

Ví dụ: tính tổng từ các số lẻ từ 1 đến 100dim i,tong

tong=0

for i=1 to 100 step 2

tong=tong+i

Next

e. Cấu trúc For Each ... next

Cú pháp:For Each <phần tử> in <nhóm>

<khối lệnh> next <phần tử>Trong đó:- Phần tử trong tập hợp có thể là biến Variant, biến Object, hoặc một đối tượng trong Object Server.- Phần tử trong mảng chỉ có thể là biến Variant- Không dùng For Each . . . với mảng chứa kiểu tự định nghĩa vì Variant không chứa kiểu tự định nghĩa.

Tác động: Vòng lặp thực hiện <khối lệnh> số lần lặp bằng số <phần tử> có trong nhóm.

Ví dụ:

24

<%dim Itemfor Each Item in Session.Contentsresponse.Write(Item & " = " & Session.Contents(Item) & "<Br>")Nextresponse.write(now())%>

4. QUẢN LÝ CÁC SỰ KIỆN

Các ứng dụng VBScript trên Browser là các ứng dụng hướng sự kiện (event-driven). Sự kiện là những hành động xảy ra trên Browser, thường là tác động của người sử dụng. Chẳng hạn như Click vào một nút là một sự kiện. Để đoạn mã phản ứng với các sự kiện, ta phải định nghĩa những trình điều khiển sự kiện. Trình điều khiển có thể là một thủ tục hay một loạt lệnh trên các ngôn ngữ Script. Nếu sự kiện đó xảy ra trên một đối tượng được tạo ra trên trang Web bằng một thẻ, ta có thể định nghĩa trình quản lý đối tượng với tham số là tên đối tượng được thêm on vào phía trước.

Ví dụ:

<HTML><HEAD><Script Language="VBScript">Sub thong_bao

alert "Thong bao so 1"End Sub</Script></HEAD><BODY><FORM><input type="button" name="ok" value="OK" onClick="thong_bao"></FORM></BODY></HTML>

Sau đây là các sự kiện được hỗ trợ trong VBScript:

Sự kiệnQuản lý sự

kiệnMô tả

Abort onAbort Dừng nạp ảnh. Chỉ áp dụng cho các ảnh.Blur onBlur Người dùng bỏ focus trên Windows hay các

25

thành phần trên form. Chỉ áp dụng cho Window hoặc các phần tử của form

Change onChangeXảy ra khi các trường Text, hoặc TextArea, hoặc Selectlist thay đổi giá trị.

Click onClickXảy ra khi kích chuột vào các nut button, radio, checkbox, submit, reset, các link.

DragDrog onDragDrogXảy ra khi kéo một đối tượng vào cửa sổ Browser.

Error onErrorXảy ra khi phát sinh lỗi do nạp ảnh hay văn bản. Sự kiện này chỉ áp dụng cho các ảnh hoặc window

Focus onFocusXảy ra khi người dùng focus vào window hay các thành phần của form

KeyDown onKeyDownSự kiện sinh ra khi phím được nhấn. Sự kiện này áp dụng cho toàn văn bản, ảnh, link, TextArea.

KeyPress onKeyPressSự kiện sinh ra khi phím được nhấn và giữ. Sự kiện này áp dụng cho toàn văn bản, ảnh, link, TextArea.

KeyUp onKeyUpSự kiện sinh ra khi phím được nhả. Sự kiện này áp dụng cho toàn văn bản, ảnh, link, TextArea.

Load onLoadSự kiện được sinh ra ngay sau khi tài liệu được nạp trên browser. Sự kiện này áp dụng cho toàn văn bản.

MouseDown onMouseDownSự kiện được sinh ra khi bấm chuột vào văn bản, hoặc các nút lệnh, links

MouseMove onMouseMove Sự kiện được sinh ra khi di chuyển chuột

MouseOut onMouseOutSự kiện được sinh ra khi di chuột ra khỏi link, ảnh.

MouseOver onMouseOver Sự kiện được sinh ra khi di chuột trên link.

MouseUp onMouseUpSự kiện được sinh ra khi di nhả chuột trên văn bản, các link

Move onMove Sự kiện được sinh ra khi di chuyển window

Reset onResetSự kiện này phát sinh ra khi nút Reset của Form được nhấn

Resize onResize Phát sinh khi cửa sổ của window được thay đổi.Submit onSubmit Sự kiện được sinh ra khi nút Submit của Form

26

được nhấnUpLoad onUpLoad Sự kiện xảy ra khi thoát khỏi trang Web.

5. CÁC ĐỐI TƯỢNG CỦA VBSCRIPT & TRANG HTML

5.1.Các đối tượng của VBScript

Tên đối tượng Mô tả

DictionaryĐối tượng này dùng để lưu trữ dữ liệu và khoá thành một cặp. Đối tượng tạo ra một mảng dữ liệu mà mỗi phần tử chứa phần dữ liệu tương ứng với khoá của nó.

ErroĐối tượng này chứa thông tin về lỗi xuất hiện khi thực hiện chương trình. Đối tượng này được khai báo ngầm định mà người dùng không phải khai báo lại.

FileSystemObjectĐối tượng cung cấp khả năng tương tác với hệ thống File trên máy.

TextStreamĐối tượng cung cấp các thao tác truy cập tuần tự trên từng File. Đối tượng này cung cấp những phương thức cho phép đọc dữ liệu từ file, ghi dữ liệu vào file.

5.2.Các đối tượng của một trang HTML

Khi một trang HTML được nạp lên Browser nó được sinh ra một loạt các đối tượng với các thuộc tính dựa trên nội dung của trang HTML và những thông tin phù hợp. Các đối tượng tạo thành một hệ thống cấp bậc phản ánh cấu trúc, nội dung của trang HTML.

5.2.1. Đối tượng Window.Đối tượng này là đối tượng cha của mọi đối tượng khác trong một tài liệu HTML.

Trong một ứng dụng VBScript có thể tạo ra nhiều đối tượng Window. Đối tượng này có một số thuộc tính sau:

Status: Hiện nội dung thông báo của nguời dùng ở thanh trạng thái.

DefaultStatus: Hiện những thông báo mặc định ở thanh trạng thái.

Name: Chỉ tên của Window.

Self: Đồng nghĩa với cửa sổ hoặc Frame hiện thời.

Frames: Phản ánh mảng các Frame trong một cửa sổ.27

Length: Phản ánh số Frame trong cửa sổ cha.

Ngoài ra đối tượng Window còn có một số các thuộc tính là các đối tượng con như sau: Document, Frame, History, Location.

Một số phương thức của đối tượng Window:

Alert: Hiện hộp thông báo.

Open: Mở một cửa sổ

Close: Đóng một cửa sổ.

Prompt: Hiển thị hộp nhập liệu.

SetTimeOut: Thực hiện một biểu thức hoặc một hàm hoặc một thủ tục sau mỗi khoảng thời gian nhất định.

ClearTimeOut: Xoá bỏ lệnh SetTimeOut trước đó.

Confirm: Hiển thị hộp xác thực.

Navigate: Đến một trang khác.

Quản lý các sự kiện của đối tượng Windows:

OnLoad: Gọi đến một đoạn lệnh khi cửa sổ được nạp xong.

UnLoad: Một đoạn Script được thực hiện khi cửa sổ bị đóng lại.

5.2.2. Đối tượng DocumentĐối tượng này là thuộc tính của đối tượng Window dùng để phản ánh nội dung

hiện thời của trang HTML bao gồm các liên kết các Form, các đối tượng khác. Mỗi trang chỉ có một đối tượng Document. Đối tượng Document được sinh ra bởi sử dụng cú pháp HTML như sau:

<BODY BackGround =”Color” Text=”Màu chữ”Link=”Màu link”. . .

</BODY>Một số thuộc tính của Document:

BgColor: Chỉ màu nền của tài liệu.

28

AlinkColor: Phản ánh màu của Alink.

FgColor: Phản ánh màu chữ của văn bản.

URL: Thuộc tính này có tính chất chỉ đọc, phản ánh URL của tài liệu.

Một số phương thức của Document:

Write: Viết một hay nhiều biểu thức vào tài liệu.

Ví dụ Document.write “Đại Học Sư phạm kỹ thuật Vinh”

Writeln: Tương tự như phương thức write nhưng sau khi viết các biểu thức tự động chuyển xuống dòng tiếp theo.

Clear: Xoá toàn bộ nội dung của tài liệu trong một cửa sổ.

Các đối tượng con của Document:

Đối tượng Form: Mỗi một trang HTML sẽ tạo ra nhiều đối tượng Form. Ta có thể tham chiếu tới từng Form thông qua tên hoặc thông qua mảng Forms. Mảng Form được bắt đầu bằng 0. Ta có thể tham chiếu tới từng phần tử của form thông qua tên của phần tử hoặc thông qua các phần tử của mảng Elements.

Đối tượng LocationĐối tượng này chứa những thông tin về URL hiện tại.

Location có một số thuộc tính sau:

o Href: Cho biết những thông tin đầy đủ về URL hiện tại hoặc chuyển cửa sổ hiện thời tới một địa chỉ khác.

o Protocol: Cho biết giao thức hiện thời.o Hostname: Một xâu chứa tên đầy đủ của hostname bao gồm: Tên của

Server, vùng, số cổng, tên miền con.

Đối tượng HistoryĐối tượng này chứa một danh sách các địa chỉ mà client đã thăm bên trong một

cửa sổ. Đối tượng này chỉ có một thuộc tính là length phản ánh tổng số địa chỉ đã thăm.

Các phương thức của History:

Back: Trở lại một địa chỉ đã thăm Forward: Nạp URL tiếp theo trong danh sách các địa chỉ của history

29

Go(n): Nạp URL cách URL hiện tại n vị trí trong danh sách các URL của History. Nếu n là số âm thì chuyển về phía sau địa chỉ hiện tại. N cũng có thể thay bằng một xâu chỉ URL muốn tham chiếu tới.

Đối tượng NavigatorĐối tượng này chứa thông tin về trình duyệt Web đang dùng. Navigator có những

thuộc tính sau:

o AppCodename: Cho mã tên của Browser.o AppName: Cho biết tên của trình duyệt.o AppVersion: Cho biết thông tin về version của trình duyệt.

Ví dụ: Sử dụng thuộc tính write để liệt kê dãy các số nguyên tố từ 1 đến 100.<html><head><Script Language="VBScript">sub tbdim i,j,k,stst="Day cac so nguyen to tu 1->100:"for i=1 to 100k=i\2j=2while (i mod j<>0) and (j<=k)j=j+1wendif j>k then st=st & i & " "nextdocument.writeln stdocument.write "<br><A HREF='vd.html'>Back to</a>"end sub</Script></head><BODY>Vi du <br><HR><FORM><input type="button" name="ok" value="ok" onClick="tb"></FORM><br></BODY></html>

BÀI TẬP CHƯƠNG 33.1 Trình bày các kiểu dữ liệu trong VBScript

30

3.2 Nêu các sự kiện xẩy ra khi thực hiện các đoạn chương trình VBScript trong một trang Web.3.3 Viết một trang Web trong đó có một đoạn chương trình VBSCRIPT tính ước số chung lớn nhất của 2 số a, b được nhập từ bàn phím.3.3 Viết một trang Web trong đó có một đoạn chương trình VBSCRIPT giải phương trình bậc hai.3.4 Viết một trang Web trong đó có một đoạn chương trình VBSCRIPT liệt kê các số nguyên tố từ 1 đến n, với n được nhập từ bàn phím.3.5 Viết một trang Web trong đó có một đoạn chương trình VBSCRIPT liệt kê dãy các số fibonacy của các số 1 đến n, với n được nhập từ bàn phím.3.6 Viết một trang Web trong đó có một đoạn chương trình VBSCRIPT khi thực hiện, hiện trên màn hình của trình duyệt các thông số sau đây:

o Cho mã tên của Browser.o Cho biết tên của trình duyệt.o Cho biết thông tin về version của trình duyệt

3.7 Viết một trang Web trong đó có một đoạn chương trình VBSCRIPT khi thực hiện, cập nhật từ bàn phím một mảng số nguyên, in ra màn hình của trình duyệt các thông tin sau:

o Giá trị lớn nhấto Giá trị bé nhấto Tổng của dãy đã nhập vàoo Các phần từ của dãy đã được sắp xếp theo thứ tự tăng dần.

CHƯƠNG 4 - NGÔN NGỮ JAVASCRIPT

31

Yêu cầu: Nắm được các kiểu dữ liệu trong Javascript Nắm được các toán tử trong Javascript Quản lý các sự kiện Nắm được các đối tượng của Javascript : window, document Thực hành làm các ví dụ giải các bài toán với Javascript

1. Giới thiệu về ngôn ngữ Javascript JavaScript là ngôn ngữ kịch bản dùng để tạo các

client-side scripts và server-side scripts. JavaScript làm cho việc tạo các trang Web động và tương tác dễ dàng hơn JavaScript là một ngôn ngữ kịch bản được hãng Sun Microsystems và

Netscape phát triển. JavaScript được phát triển từ Livescript. Của Netscape Các ứng dụng client chạy trên một trình duyệt như Netscape Navigator hoặc

Internet Explorer. JavaScript có thể tăng cường tính động và tính tương tác của các trang web.

– Cung cấp sự tương tác người dùng– Thay đổi nội dung động– Xác nhận tính hợp lệ của dữ liệu

2. Chèn JavaScript vào trang HTMLBạn có thể nhúng JavaScript vào một file HTML theo một trong các cách sau đây:

Sử dụng thẻ SCRIPT:<script language="JavaScript"></script>

Sử dụng một file JavaScript ở ngoài <script language="JavaScript" src="filename.js"></script>

Sử dụng các biểu thức JavaScript trong các giá trị thuộc tính của thẻ Sử dụng trong các trình điều khiển sự kiện

Ví dụ: <HTML> <HEAD> <SCRIPT LANGUAGE = "Javascript"> confirm ("Are you Sure?"); alert("OK"); document.write(" Thank You !"); </SCRIPT> </HEAD>

32

</HTML>

3. Biến và phân loại biếnTên biến trong JavaScript phải bắt đầu bằng chữ hay dấu gạch dưới. Các chữ số không được sử dụng để mở đầu tên một biến nhưng có thể sử dụng sau ký tự đầu tiên.Phạm vi của biến có thể là một trong hai kiểu sau:

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

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

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

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

4. Các kiểu dữ liệu trong Javascript JavaScript có một tập các kiểu dữ liệu.

– Số (number)– Giá trị logic (boolean)– Chuỗi (String)– Giá trị rỗng Null

Trong JavaScript, hai biến khác kiểu có thể kết hợp với nhau. ví dụ: A = “ Day la mot so .” + 5 sẽ có kết quả là một chuỗi với giá trị là "Day la mot so . 5"

<HTML> <HEAD> <SCRIPT LANGUAGE = "Javascript"> var A = "12" + 7.5; document.write(A); </SCRIPT> </HEAD></HTML>

Các kiểu dữ liệu nguyên thủy Integer – là các hệ thống số thập phân, thập lục phân và nhị phân. Floating- point(số thực) – Các số thập phân có phần thập phân sử dụng “e”

or “”E”và theo sau là các số nguyên. String – là một chuỗi rỗng hay chuỗi ký tự được đặt trong cặp ngoặc đơn

hoặc ngoặc kép Boolean–Kiểu này có hai giá trị: True or False. null - Kiểu null chỉ có một giá trị: null. Null hàm ý không có dữ liệu.

33

5. Các toán tử (operator)Toán tử được sử dụng để thực hiện một phép toán nào đó trên dữ liệu. Một toán tử có thể trả lại một giá trị kiểu số, kiểu chuỗi hay kiểu logic. Các toán tử trong JavaScript có thể được nhóm thành các loại sau đây: gán, so sánh, số học, chuỗi, logic và logic bitwise.

a) Phép gánToá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ọnx = x + y x + = yx = x - y x - = yx = x * y x * = yx = x / y x / = yx = x % y x % = y

b) Các phép toán số họcCộng (+), trừ (-), nhân (*), chia (/)

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ạngvar++ 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)

c) Các phép so sánh= = (bằng); != (khác); > ; >= ; < ; <=

d) Phép toán xử lý chuỗiKhi đượ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"e) Các phép toán logic

34

JavaScript hỗ trợ các toán tử logic sau đây: && (AND) ; || (OR); ! (NOT)

f) Phép bitwiseVới các toán tử thao tác trên bit, đầu tiên giá trị được chuyển dưới dạng số nguyên 32 bit, sau đó lần lượt thực hiện các phép toán trên từng bit.& Toán tử bitwise AND, trả lại giá trị 1 nếu cả hai bit cùng là 1.| Toán tử bitwise OR, trả lại giá trị 1 nếu một trong hai bit là 1.

^ Toán tử bitwise XOR, trả lại giá trị 1 nếu hai bit có giá trị khác nhauNgoà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ườngKiểu bitwise rút gọn

x = x << y x << = yx = x >> y x - >> yx = x >>> y x >>> = yx = x & y x & = yx = x ^ y x ^ = yx = x | y x | = y

35

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var x = 10; var y = 5; alert ("The value of x is " + x + "The value of y is " + y); alert("x AND y = " + (x && y)); alert("x OR y = " + (x || y)); alert("NOT x = " + (!x)); </SCRIPT> </HEAD></HTML>

6. Các lệnh có cấu trúca) Rẽ nhánh theo điều kiện với if ... else

Cú pháp if ... else dùng trong trường hợp muốn rẽ nhánh theo điều kiện. Cú pháp này tương đương với nếu x thì làm y, còn nếu không thì làm z. Các câu lệnh if ... else có thể lồng trong nhau.

Cú pháp:

<script language="JavaScript"> if (biểu_thức_1) { khối lệnh được thực hiện nếu biểu thức 1 đúng; } else if (biểu_thức_2) { khối lệnh được thực hiện nếu biểu thức 2 đúng; } else { khối lệnh được thực hiện nếu cả hai biểu thức trên đều không đúng; }</script>

Ví dụ:

<script language="JavaScript"> var x = prompt("Nhập vào giá trị của x:"); x = parseFloat(x); if (!isNaN(x)) {

36

if (x > 0) { alert("x > 0"); } else if (x == 0) { alert("x = 0"); } else { alert("x < 0"); } } else { alert("giá trị bạn nhập không phải là một số"); }</script>

b) Toán tử điều kiện

Toán từ điều kiện còn được biết đến với tên gọi toán tử tam phân. Cú pháp của toán tử này như sau:

<script language="JavaScript"> điều_kiện ? biểu_thức_đúng : biểu_thức_sai;</script>

Toán tử này sẽ trả lại giá trị là kết quả của biểu_thức_đúng nếu điều_kiện có giá trị bool bằng true, ngược lại nó sẽ trả lại giá trị bằng biểu_thức_sai.

37

http://vi.wikipedia.org/w/index.php?title=To%C3%A1n_t%E1%BB%AD_tam_ph%C3%A2n&action=edit&redlink=1

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

Ví dụ:<html><head><head><body><script language="javascript"> var a=9;var b=5;a>b?document.write(a):document.write(b);</script><BODY></html>

c) Lệnh switch

Cú pháp switch cũng là cú pháp điều kiện như if ... else hay toán tử tam phân. Tuy nhiên, cú pháp switch thường được dùng khi chỉ cần so sánh bằng với số lượng kết quả cần kiểm tra lớn. Cách sử dụng cú pháp switch:

<script language="JavaScript"> switch (biểu_thức_điều_kiện) { case kết_quả_1: khối lệnh cần thực hiện nếu biểu_thức_điều_kiện bằng kết_quả_1; break; case kết_quả_2: khối lệnh cần thực hiện néu biểu_thức_điều_kiện bằng kết_quả_2; break; default: khối lệnh cần thực hiện nếu biểu_thức_điều_kiện cho ra một kết quả khác; }</script>

Sau mỗi khối lệnh trong một mục kiểm tra kết quả (trừ mục default), lập trình viên cần phải thêm vào break.

Ví dụ:

<html><head></head>

38

<body>Thử một chút<hr><script language="JavaScript">a=prompt("Nhap a");a=parseFloat(a);switch (a){case 1:document.write("a=1");brack;case 2:document.write("a=2");brack;default:document.write("a>2");}</script></body></html>

d) Vòng lặp while

Vòng lặp while có mục đích lặp đi lặp lại một khối lệnh nhất định cho đến khi biểu thức điều kiện trả về false. Khi dùng vòng lặp while phải chú ý tạo lối thoát cho vòng lặp (làm cho biểu thức điều kiện có giá trị false), nếu không đoạn mã nguồn sẽ rơi vào vòng lặp vô hạn, là một lỗi lập trình. Vòng lặp while thường được dùng khi lập trình viên không biết chính xác cần lặp bao nhiêu lần. Cú pháp của vòng lặp while như sau:

<script language="JavaScript"> while (biểu_thức_điều_kiện) { khối lệnh cần thực hiện nếu biểu_thức_điều_kiện trả về true; }</script>

e) Vòng lặp do ... while

Về cơ bản, vòng lặp do ... while gần như giống hệt như vòng lặp while. Tuy nhiên, trong trường hợp biểu thức điều kiện trả về false ngay từ đầu, khối lệnh trong vòng lặp while sẽ không bao giờ được thực hiện, trong khi đó, vòng lặp do ... while luôn đảm bảo khối lệnh trong vòng lặp được thực hiện ít nhất một lần.

Ví dụ:

39

http://vi.wikipedia.org/w/index.php?title=L%E1%BB%97i_l%E1%BA%ADp_tr%C3%ACnh&action=edit&redlink=1

http://vi.wikipedia.org/w/index.php?title=V%C3%B2ng_l%E1%BA%B7p_v%C3%B4_h%E1%BA%A1n&action=edit&redlink=1

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

http://vi.wikipedia.org/w/index.php?title=V%C3%B2ng_l%E1%BA%B7p&action=edit&redlink=1

Ví dụ:<HTML> <HEAD><TITLE>For loop Example </TITLE><SCRIPT LANGUAGE= "JavaScript">for (x=1; x<=10 ; x++) {

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

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

g. Vòng lặp for ... in

Vòng lặp for ... in dùng để lặp qua tất cả các thuộc tính của một đối tượng (hay lặp qua tất cả các phần tử của một mảng). Cú pháp của vòng lặp này như sau:

<script language="JavaScript"> for (biến in đối_tượng) { khối lệnh cần thực hiện, có thể sử dụng đối_tượng[biến] để truy cập từng thuộc tính (phần tử) của đối tượng; }</script>

Ví dụ:

<HTML><HEAD><TITLE>For in Example </TITLE><SCRIPT LANGUAGE= "JavaScript">

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

for (var x in window)document.write(" "+ x + ", ");

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

41

i. NEWBiế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ápobjectvar=new object_type ( param1 [,param2]... [,paramN])

Ví dụ sau 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 newVí dụ:<HTML><HEAD><TITLE>New Example </TITLE><SCRIPT LANGUAGE= "JavaScript">function person(first_name, last_name, age, sex){

this.first_name=first_name;this.last_name=last_name;this.age=age;this.sex=sex;

}person1= new person("Thuy", "Dau Bich", "23", "Female");person2= new person("Chung", "Nguyen Bao", "24", "Male");person3= new person("Binh", "Nguyen Nhat", "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></BODY></HTML>

j. THISTừ khoá this được sử dụng để chỉ đối tượng hiện thời. Đối tượng được gọi thường là đối tượng hiện thời trong phương thức hoặc trong hàm.

42

Cú phápthis [.property]

Có thể xem ví dụ của lệnh new.

k. WITHLệ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ápwith (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><SCRIPT LANGUAGE= "JavaScript">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>

7. CÁC HÀM (FUNCTIONS)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.

43

Cú phápfunction fnName([param1],[param2],...,[paramN])

{//function statement}

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><SCRIPT LANGUAGE= "JavaScript">function person(first_name, last_name, age, sex){

this.first_name=first_name;this.last_name=last_name;this.age=age;this.sex=sex;this.printStats=printStats;

}function printStats() {

with (document) {write (" Name :" + this.last_name + " " + this.first_name + "<BR>" );

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

}person1= new person("Thuy", "Dau Bich", "23", "Female");person2= new person("Chung", "Nguyen Bao", "24", "Male");person3= new person("Binh", "Nguyen Nhat", "24", "Male");person4= new person("Hoan", "Do Van", "23", "Male");person1.printStats();person2.printStats();person3.printStats();person4.printStats();


44

8. CÁC HÀM CÓ SẴNJavaScript có một số hàm có sẵn, gắn trực tiếp vào chính ngôn ngữ và không nằm trong một đối tượng nào:

eval parseInt parseFloat

a. EVALHàm này được sử dụng để đánh giá các biểu thức hay lệnh. Biểu thức, lệnh hay các đối tượng của thuộc tính đều có thể được đánh giá. Đặc biệt hết sức hữu ích khi đánh giá các biểu thức do người dùng đưa vào (ngược lại có thể đánh giá trực tiếp).Cú pháp:

returnval=eval (bất kỳ biểu thức hay lệnh hợp lệ trong Java)Ví dụ:<HTML> <HEAD><TITLE>Eval Example </TITLE><SCRIPT LANGUAGE= "JavaScript">

var string=”10+ Math.sqrt(64)”;document.write(string+ “=”+ eval(string));


b. PARSEINTHà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ápparseInt (string, [, radix])

Ví dụ:<HTML>

45

<HEAD><TITLE> perseInt Exemple </TITLE><SCRIPT LANGUAGE= "JavaScript">

document.write("Converting 0xC hex to base-10: " + parseInt(0xC,10) + "<BR>");

document.write("Converting 1100 binary to base-10: " + parseInt(1100,2) + "<BR>");

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

c. PARSEFLOATHà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ápparseFloat (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. Hình 5.8 minh họa kết quả<HTML> <HEAD><TITLE> perseFload Exemple </TITLE><SCRIPT LANGUAGE= "JavaScript">

document.write("This script will show how diffrent strings are ");document.write("Converted using parseFloat<BR>");document.write("137= " + parseFloat("137") + "<BR>");

document.write("137abc= " + parseFloat("137abc") + "<BR>");document.write("abc137= " + parseFloat("abc137") + "<BR>");document.write("1abc37= " + parseFloat("1abc37") + "<BR>");


46

9. MẢNG (ARRAY)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 đủ:<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>

47

10. SỰ KIỆNJavaScript 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 Function">Ví dụ sau gọi hàm CheckAge() mỗi khi giá trị của trường văn bản thay đổi:<INPUT TYPE=TEXT NAME="AGE" onChange="CheckAge()">Đoạn mã của chương trình xử lý sự kiện không là một hàm; nó là các lệnh của JavaScript cách nhau bằng dấu chấm phẩy. Tuy nhiên cho mục đích viết thành các module nên viết dưới dạng các hàm.Một số chương trình xử lý 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 Chương trình xử lý sự kiện có sẵn

48

Selection list onBlur, onChange, onFocus

Text onBlur, onChange, onFocus, onSelect

Textarea onBlur, onChange, onFocus, onSelect

Button onClick

Checkbox onClick

Radio button onClick

Hypertext link onClick, onMouseOver, onMouseOut

Clickable Imagemap area

onMouseOver, onMouseOut

Reset button onClick

Submit button onClick

Document onLoad, onUnload, onError

Window onLoad, onUnload, onBlur, onFocus

Framesets onBlur, onFocus

Form onSubmit, onReset

Image onLoad, onError, onAbort

Ví dụ sau là 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. Hình 5.10 minh hoạ kết quả của ví dụ này<HTML><HEAD><TITLE> An Event Handler Exemple </TITLE><SCRIPT LANGUAGE= "JavaScript">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;}

}

49

</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="TEN" 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 xuan">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>Đ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>

50

</HTML>

BÀI TẬP

CÂU HỎI1. 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ôngNế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áo2. 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ệna. <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"> 

51

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

i. TRẢ LỜI1. 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'>");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>

52

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

53

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

3. Các câu sai: a, c, e. Các câu đúng: b, d, f4. 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; }

54

11.CÁC ĐỐI TƯỢNG TRONG JAVASCRIPTNhư đã nói JavaScript là ngôn ngữ lập trình dựa trên đối tượng, nhưng không hướng đối tượng bởi vì nó không hỗ trợ các lớp cũng như tính thừa kế. Phần này nói về các đối tượng trong JavaScript và chỉ ra sơ đồ phân cấp các đối tượng.

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

document.PHIEU_DIEU_TRA.AGE.valueCác đối tượng có thuộc tính (properties), phương thức (methods), và các

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

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

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

55

Trong sơ đồ phân cấp này, các đối tượng con chính là các thuộc tính của một đối tượng cha. Ví dụ như một form tên là form1 chính là một đối tượng con của đối tượng document và được gọi tới là document.form1Tất cả các trang đều có các đối tượng sau đây:

navigator: có các thuộc tính tên và phiên bản của Navigator đang được sử dụng, dùng cho MIME type được hỗ trợ bởi client và plug-in được cài đặt trên client.

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

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

location: có các thuộc tính dựa trên địa chỉ URL hiện thời

56

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

Hình 11.1: Sơ đồ 1 - Phân cấp đối tượng Navigator

history: Chứa các thuộc tính về các URL mà client yêu cầu trước đó. Sau đây sẽ mô tả các thuộc tính, phương thức cũng như các chương trình xử lý sự kiện cho từng đối tượng trong JavaScript.

11.1. ĐỐI TƯỢNG NAVIGATORĐối tượng này được sử dụng để đạt được các thông tin về trình duyệt như

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

Các thuộc tính

appCodeName Xác định tên mã nội tại của trình duyệt (Atlas).AppName Xác định tên trình duyệt.AppVersion Xác định thông tin về phiên bản của đối tượng

navigator.userAgent

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

Ví dụVí dụ sau sẽ hiển thị các thuộc tính của đối tượng navigator<HTML><HEAD><TITLE> Navigator Object Exemple </TITLE><SCRIPT LANGUAGE= "JavaScript">

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

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

11.2. ĐỐI TƯỢNG WINDOWĐối tượng window như đã nói ở trên là đối tượng ở mức cao nhất. Các đối tượng document, frame, vị trí đều là thuộc tính của đối tượng window.

CÁC THUỘC TÍNH 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ổ.

57

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. clearTimeout(timeoutID) -Xóa timeout do SetTimeout đặt.

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

OK và nút Cancel. Trả lại giá trị True cho OK và False cho Cancel. [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. TimeoutID = setTimeout(expression,msec) - Đánh giá biểu thức

expresion sau thời gian msec.Ví dụ: Sử dụng tên cửa sổ khi gọi tới nó như là đích của một form submit hoặc trong một Hipertext link (thuộc tính TARGET của thẻ FORM và A).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, ví dụ này lưa vào file window.html:<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="doc2.html" TARGET="window2"> Load a file into window2 </A></P>

58

<INPUT TYPE="button" VALUE="Close Second Window"onClick="msgWindow.close()">

</FORM></BODY></HTML>

CÁC CHƯƠNG TRÌNH XỬ LÝ SỰ KIỆN onLoad - Xuất hiện khi cửa sổ kết thúc việc tải. onUnLoad - Xuất hiện khi cửa sổ được loại bỏ.

11.3. ĐỐI TƯỢNG LOCATIONCác thuộc tính của đối tượng location duy trì các thông tin về URL của document hiện thời. Đối tượng này hoàn toàn không có các phương thức và chương trình xử lý sự kiện đi kèm. Ví dụ:

http:// www.abc.com/ chap1/page2.html#topic3Các thuộc tính

hash - Tên anchor của vị trí hiện thời (ví dụ topic3). 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:). Search - Câu truy vấn tìm kiếm có thể ở cuối URL cho các script

CGI.

11.4. ĐỐI TƯỢNG FRAMEMột cửa số có thể có một vài frame. Các frame có thể cuộn một cách độc

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

CÁC THUỘC TÍNH 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 - frame hiện thời.

59

http://www.abc.com/

http://www.abc.com/

CÁC PHƯƠNG THỨC clearTimeout (timeoutID) - Xoá timeout do setTimeout lập.

SetTimeout trả lại timeoutID. TimeoutID = setTimeout (expression,msec) - Đánh giá expression

sau khi hết thời gian msec.

12. SỬ DỤNG FRAMEa) Tạo một frame (create)Để tạo một frame, ta sử dụng thẻ FRAMESET. Mục đích của thẻ này là định nghĩa một tập các frame trong một trang.Ví dụ1: tạo frame ( hình 17)

<HTML><HEAD><TITLE>Frame Example </TITLE><FRAMESET ROWS="90%,10%">

<FRAMESET COLS="30%,70%"> <FRAME SRC=CATEGORY.HTM NAME="ListFrame"> <FRAME SRC=TITLES.HTM NAME="contentFrame">

</FRAMESET ><FRAME SRC=NAVIGATOR.HTM NAME="navigateFrame">

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

Sơ đồ sau hiển thị cấu trúc của các frame: Cả 3 frame đều trên cùng một cửa sổ cha, mặc dù 2 trong số các frame đó nằm trong một frameset khác.

Bạn có thể gọi tới những frame trước đó bằng cách sử dụng thuộc tính frames như sau:listFrame chính là top.frames[0]contentFrame chính là top.frames[1]navigatorFrame chính là top.frames[2]Ví dụ 2: Cũng giống như một sự lựa chọn, bạn có thể tạo ra một cửa sổ giống như ví dụ trước nhưng trong mỗi đỉnh của hai frame lại có một cửa sổ cha riêng từ navigateFrame. Mức frameset cao nhất có thể được định nghĩa như sau:

60

Top

listFrame (category.html)

contentFrame (titles.html)

navigatorFrame (navigator.html)

<HTML><HEAD><TITLE>Frame Example </TITLE><FRAMESET ROWS="90%,10%"><FRAME SRC=muske13.HTML NAME="upperFrame"><FRAME SRC=NAVIGATOR.HTM NAME="navigateFrame"></FRAMESET ></HEAD><BODY> </BODY></HTML>

Trong file muske13.html lại tiếp tục đặt một frameset:<HTML><HEAD><TITLE>Frame Example </TITLE><FRAMESET COLS="30%,70%"><FRAME SRC=CATEGORY.HTM NAME="ListFrame"><FRAME SRC=TITLES.HTM NAME="contentFrame"></FRAMESET ></HEAD><BODY> </BODY></HTML>Khi đó kết quả hiển thị của ví dụ 2 giống ví dụ 1 nhưng sự phân cấp của các frames lại khác hẳn:Bạn có thể gọi tới các frame trên bằng cách sử dụng thuộc tính mảng frames như sau:

upperFrame chính là top.frames[0]navigatorFrame chính là top.frames[1]listFrame chính là upperFrame.frames[0]

hoặc top.frames[0].frames[0]

61

top

upperFrame (muske13.html)

navigatorFrame (navigator.html)

listFrame (category.html)

contentFrame (titles.html)

contentFrame chính là upperFrame.frames[1] hoặc top.frames[0].frames[1]

b) Cập nhật một frame (update)Bạn có thể cập nhật nội dung của một frame bằng cách sử dụng thuộc tính location để đặt địa chỉ URL và phải định chỉ rõ vị trí của frame trong cấu trúc.Trong ví dụ trên, nếu bạn thêm một dòng sau vào navigatorFrame:

<INPUT TYPE="button" VALUE="Titles only" onClick="top.frames[0].location='artist.html'">

thì khi nút “Titles only” được nhấn, file artist.html sẽ được tải vào upperFrame, và hai frame listFrame, contentFrame sẽ bị đóng lại như chúng chưa bao giờ tồn tại.

13. ĐỐI TƯỢNG DOCUMENTĐối tượng này chứa các thông tin về document hiện thời và cung cấp các phương thức để đưa thông tin ra màn hình. Đối tượng document được tạo ra bằng cặp thẻ <BODY> và </BODY>. Một số các thuộc tính gắn với thẻ <BODY>.Các đối tượng anchor, forms, history, links là thuộc tính của đối tượng document. Không có các chương trình xử lý sự kiện cho các frame. Sự kiện onLoad và onUnLoad là cho đối tượng window.

CÁC THUỘC TÍNH 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. 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.

CÁC PHƯƠNG THỨC 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.

62

document.open (["mineType"]) - Mở một stream để thu thập dữ liệu vào của các phwong thức write và writeln.

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.

14. ĐỐI TƯỢNG ANCHORSAnchor là một đoạn văn bản trong document có thể dùng làm đích cho một

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

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

document.anchors.length.

15. ĐỐI TƯỢNG FORMSCá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:

buttoncheckboxhiddenpasswordradioresetselectsubmittexttextarea

Các phần tử này sẽ được trình bày sau.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.

63

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. method Thuộc tính METHOD. target Xâu chứa tên của cửa sổ đích khi submit form

CÁC PHƯƠNG THỨCformName.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ỆNonSubmit - 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.

16. ĐỐI TƯỢNG HISTORYĐối tượng này được sử dụng để lưu giữ các thông tin về các URL trước

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

CÁC THUỘC TÍNHlength - Số lượng các URL trong đối tượng.

CÁC PHƯƠNG THỨC 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.

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

16. ĐỐI TƯỢNG LINKSĐối tượng link là một đoạn văn bản hay một ảnh được xem là một siêu liên

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

64

document.links.length()Có thể tham chiếu tới một liên kết qủa

document.links [index]Để xác định các thuộc tính của đối tượng link, có thể sử dụng URL tương tự:

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

CÁC THUỘC TÍNH hash - Tên anchor của vị trí hiện thời (ví dụ topic3). 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ụ ww.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:). Search - Câu truy vấn tìm kiếm có thể ở cuối URL cho các script

CGI. Target - Giống thuộc tính TARGET của <LINK>.

CÁC CHƯƠNG TRÌNH XỬ LÝ SỰ KIỆN onClick - Xảy ra khi người sử dụng nhấn vào link. onMouseOver - Xảy ra khi con chuột di chuyển qua link.

17. ĐỐ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 đnáh 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.

65

CÁC PHƯƠNG THỨC 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ămg 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ămg 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. Phwong

thức này chỉ thực hiện được trên nền tảng UNIX. 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.

18. ĐỐ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');

CÁC PHƯƠNG THỨC 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.

66

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ểnbằ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.

19. ĐỐI TƯỢNG STRINGĐối tượng String là đối tượng được xây dựng nội tại trong JavaScript cung cấp nhiều phương thức thao tác trên chuỗi. Đối tượng này có thuộc tính duy nhất là độ dài (length) và không có chương trình xử lý sự kiện.

CÁC PHƯƠNG THỨC 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>.

67

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.

20. CÁC PHẦN TỬ CỦA ĐỐI TƯỢNG FORMForm đượ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à CGISử dụng JavaScript bạn có thể viết những đoạn scripts chèn vào HTML của bạn để làm việc với các phần tử của form và các giá trị của chúng.

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

68

reset Một nút reset(<INPUT TYPE="reset">)

select Một danh sách lựa chọn(<SELECT><OPTION>option1</OPTION><OPTION>option2</OPTION></SELECT>)

submit Một nút submit (<INPUT TYPE="submit">)

text Một trường text (<INPUT TYPE="text">)

textArea Một trường text cho phép nhập vàp nhiều dòng<TEXTAREA>default text</TEXTAREA>)

Mỗi phần tử có thể được đặt tên để JavaScript truy nhập đến chúng qua tên

THUỘC TÍNH TYPETrong 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Ử BUTTONTrong 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.

69

Trong ví dụ sau, thay vì sử dụng onChange, bạn có thể chỉnh sửa script để định giá biểu thức khi button được bấm.Ví dụ: Định giá một form sử dụng phần tử button. <HTML><HEAD><TITLE>button Example</TITLE><SCRIPT LANGUAGE="JavaScript"></SCRIPT></HEAD><BODY><FORM METHOD=POST>Enter a JavaScript mathematical expression:<INPUT TYPE="text" NAME="entry" VALUE=""> <BR>The result of this expression is:<INPUT TYPE=text NAME="results" onFocus="this.blur();"> <BR><INPUT TYPE="button" VALUE="Calculate" onClick="calculate(this.form);"></FORM></BODY></HTML>

PHẦN TỬ CHECKBOXCá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ẻ

70

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à onClickVí dụ: Tạo hộp checkbox để nhập vào một số rồi lựa chọn tính nhân đôi và bình phương:<HTML><HEAD><TITLE>checkbox Example</TITLE><SCRIPT></SCRIPT></HEAD><BODY><FORM METHOD=POST>Value: <INPUT TYPE="text" NAME="entry" VALUE=0

71

onChange="calculate(this.form,this.name);"> <BR>Action (default double): <INPUT TYPE=checkbox NAME=square onClick="calculate(this.form,this.name);"> Square<BR>Result: <INPUT TYPE="text" NAME="result" VALUE=0 onChange="calculate(this.form,this.name);"> </FORM></BODY></HTML>

Trong script này, bạn đã thấy cách sử dụng thẻ sự kiện onClick cũng như thuộc tính checked là một giá trị kiểu Boolean có thể dùng làm điều kiện trong câu lệnh if...else

Bạn có thể thêm một checkbox tên là square vào form. Nếu hộp này được check, chương trình sẽ lấy giá trị 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: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; } //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; } // end if (3) } // end if (1)

72

}

i. PHẦN TỬ FILE UPLOADPhầ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.

ii. PHẦN TỬ HIDDENPhầ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.

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

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

73

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><!-- HIDE FROM OTHER BROWSERSfunction calculate(form,callingField) { if (callingField == "result") { if (form.action[1].checked) { form.entry.value = Math.sqrt(form.result.value); } else { form.entry.value = form.result.value / 2; } } else { if (form.action[1].checked) { form.result.value=form.entry.value*form.entry.value;

74

} else { form.result.value = form.entry.value * 2; } } }// STOP HIDING FROM OTHER BROWSERS --></SCRIPT></HEAD><BODY><FORM METHOD=POST>Value: <INPUT TYPE="text" NAME="entry" VALUE=0 onChange="calculate(this.form,this.name);"> <BR>Action:<BR><INPUT TYPE="radio" NAME="action" VALUE="twice" onClick="calculate(this.form,this.name);"> Double<BR><INPUT TYPE="radio" NAME="action" VALUE="square" onClick="calculate(this.form,this.name);"> Square <BR>Result: <INPUT TYPE=text NAME="result" VALUE=0 onChange="calculate(this.form,this.name);">

</FORM></BODY></HTML>Trong ví dụ này, sự thay đổi từ checkbox ở trên là rất khó nhận biết. Thay cho một checkbox trong ví dụ trước, ở đây ta sử dụng hai nút radio với hai giá trị khác nhau: double và squareNhư 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.

VI. PHẦN TỬ RESETSử dụng đối tượng reset, bạn có thể tác động ngược lại để click vào nút Reset. Cũng giống đối tượng button, đối tượng reset có hai thuộc tính là name và value, và một cách thức click(), một thẻ sự kiện onClick.Hầu hết những người lập trình 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ụ:

75

<HTML><HEAD><TITLE>reset Example</TITLE><SCRIPT LANGUAGE="JavaScript">//SCRIPT></HEAD><BODY><FORM METHOD=POST><INPUT TYPE="text" NAME="value1"><BR> <INPUT TYPE="text" NAME="value2"><BR> <INPUT TYPE="reset" VALUE="Clear Form"

onClick="clearForm(this.form);"></FORM></BODY></HTML>

VII. PHẦN TỬ SELECTDanh 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

76

</SELECT>Trong cả hai ví dụ trên, người sử dụng chỉ có thể có một lựa chọn. Nếu sử dụng thuộc tính MULTIPLE, bạn có thể cho phép người sử dụng lựa chọn nhiều hơn một giá trị trong danh sách lựa chọn:<SELECT NAME="test" SIZE=2 MULTIPLE><OPTION SELECTED>1<OPTION>2<OPTION>3</SELECT>Danh sách lựa chọn trong JavaScript là đối tượng select. Đối tượng này tạo ra một vài thành phần tương tự các button và radio.Với các thành phần lựa chọn, danh sách các lựa chọn được chứa trong một mảng được đánh số từ 0. Trong trường hợp này, mảng là một thuộc tính của đối tượng select gọi là options.Cả việc lựa chọn các option và từng phần tử option riêng biệt đều có những thuộc tính. Bổ sung thêm vào mảng option, phần tử select có thuộc tính selectedIndex, có chứa số thứ tự của option được lựa chọn hiện thời.Mỗi option trong danh sách lựa chọn đều có một vài thuộc tính:

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ụ bạn có danh sách lựa chọn sau: <SELECT NAME="example" onFocus="react();"> <OPTION SELECTED VALUE="Number One">1 <OPTION VALUE="The Second">2 <OPTION VALUE="Three is It">3</SELECT> Khi lần đầu tiên hiển thị bạn có thể truy nhập tới các thông tin sau:example.options[1].value = "The Second"example.options[2].text = "3"example.selectedIndex = 0example.options[0].defaultSelected = trueexample.options[1].selected = false

77

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 = trueSửa các danh sách lựa chọnNavigator 3.0 cho phép thay đổi nội dung của danh sách lựa chọn từ JavaScript bằng cách liên kết các giá trị mới cho thuộc tính text của các thực thể trong danh sách.Ví dụ, trong ví dụ trước, bạn đã tạo ra một danh sách lựa chọn như sau:

<SELECT NAME="example" onFocus="react();"> <OPTION SELECTED VALUE="Number One">1 <OPTION VALUE="The Second">2 <OPTION VALUE="Three is It">3 </SELECT>Có thể thay đổi được dòng text hiển thị trên nút thứ hai thành "two" băng:example.options[1].text = "two";Có thể thêm các lựa chọn mới vào danh sách bằng cách sử dụng đối tượng xây dựng Option() theo cú pháp:

newOptionName = new Option(optionText, optionValue, defaultSelected, selected);selectListName.options[index] = newOptionName;

Việc tạo đối tượng option() này với dòng text được chỉ trước, defaultSelected và selected như trên đã định ra những giá trị kiểu Boolean. Đối tượng này được liên kết vào danh sách lựa chọn được thực hiện bằng index.Các lựa chọn có thể bị xoá trong danh sách lựa chọn bằng cách gắn giá trị null cho đối tượng muốn xoáselectListName.options[index] = null;

IX. Phần tử submitNú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.

X. Phần tử Text

78

Phần tử này nằm trong những phần tử hay được sử dụng nhất trong các form HTML. Tương tự như trường Password, trường text cho phép nhập vào một dòng đơn, nhưng các ký tự của nó hiện ra bình thường.đối tượng text có ba thuộc tính:defautValue, name và value. Ba cách thức mô phỏng sự kiện của người sử dụng: focus(), blur() và select(). Có 4 thẻ sự kiện là: obBlur, onFocus, onChange, onSelect. Chú ý các sự kiện này chỉ thực hiện khi con trỏ đã được kích ra ngoài trường text.Bảng sau mô tả các thuộc tính và cách thức của đối tượng text.Bảng .Các thuộc tính và cách thức của đối tượng text.

Cách thức và thuộc tính Mô tả

defaultValue Chỉ ra giá trị mặc định của phần tử được chỉ ra trong thẻ INPUT (thuộc tính)

name Tên của đối tượng được chỉ ra trong thẻ INPUT (thuộc tính)

value Giá trị hiện thời của phần tử (thuộc tính)

focus() Mô tả việc con trỏ tới trường text (cách thức)

blur() Mô tả việc con trỏ rời trường text (cách thức)

select() Mô tả việc lựa chọn dòng text trong trường text (cách thức)

Một chú ý quan trọng là có thể gán giá trị cho trường text bằng cách liên kết các giá trị với thuộc tính value. Trong ví dụ sau đây, dòng text được đưa vào trường đầu tiên được lặp lại trong trường text thứ hai, và mọi dòng text được đưa vào trường text thứ hai lại được lặp lại trong trường texxt thứ nhất. Khả năng này của nó có thể áp dụng để tự động cập nhật hoặc thay đổi dữ liệu. Ví dụ. Tự động cập nhật các trường text . <HTML> <HEAD> <TITLE>text Example</TITLE> <SCRIPT LANGUAGE="JavaScript"> 

79

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

XI. Phần tử TextareaThẻ TEXTAREA cung cấp một hộp cho phép nhập số dòng text do người thiết kế định trước. Ví dụ:<TEXTAREA NAME="fieldName" ROWS=10 COLS=25> Default Text Here</TEXTAREA>ví dụ này tạo ra một trường text cho phép đưa vào 10 hàng ,mỗi hàng 25 ký tự. Dòng "Defautl Text Here"sẽ xuất hiện trong trường này vào lần hiển thị đầu tiên.Cũng như phần tử text , JavaScript cung cấp cho bạn các thuộc tính defaultValue, name, và value, các cách thức focus(), select(), và blur(), các thẻ sự kiện onBlur, onForcus, onChange, onSelect.

1. Mảng elements[]Các đối tượng của form có thể được gọi tới bằng mảng elements[]. Ví dụ bạn tạo ra một form sau:<FORM METHOD=POST NAME=testform> <INPUT TYPE="text" NAME="one"> <INPUT TYPE="text" NAME="two"> <INPUT TYPE="text" NAME="three"></FORM>bạn có thể gọi tới ba thành phần này như sau: document.elements[0], document.elements[1], document.elements[2], hơn nữa còn có thể gọi document.testform.one, document.testform.two,document.testform.three.Thuộc tính này thường được sử dụng trong các mối quan hệ tuần tự của các phần tử hơn là dùng tên của chúng.

2. Mảng form[]

80

Các thẻ sự kiện được thiết kế để làm việc với các form riêng biệt hoặc các trường ở một thời điểm, nó rất hữu dụng để cho phép gọi tới các form có liên quan trong cùng một trang.Mảng form[] đề cập đến ở đây có thể có nhiều xác định các nhân của form trên cùng một trang và have information in a single field match in all three forms. Có thể gọi bằng document.forms[] thay vì gọi bằng tên form. Trong script này, bạn có hai trường text để nhập và nằm trên hai form độc lập với nhau. Sử dụng mảng form bạn có thể tương tác trên các giá trị của các trường trong hai form cùng một lúc khi người sử dụng thay đổi giá trị trên một form. <HTML> <HEAD> <TITLE>forms[] Example</TITLE> </HEAD> <BODY> <FORM METHOD=POST> <INPUT TYPE=text onChange="document.forms[1].elements[0].value = this.value;"> </FORM> <FORM METHOD=POST> <INPUT TYPE=text onChange="document.forms[0].elements[0].value = this.value;"> </FORM> </BODY> </HTML>Mặt khác, bạn cũng có thể truy nhập đến form bằng tên form được đặt trong thẻ FORM:<FORM METHOD=POST NAME="name">Khi đó bạn có thể gọi là document.forms["name"] hoặc document.name

3. Xem lại các lệnh và mở rộng

Lệnh/ Mở rộng Kiểu Mô tả

blur() cách thức JavaScript Mô tả việc dịch chuyển con trỏ từ một phần tử

form.action cách thức JavaScript Xâu chứa giá trị của thuộc tính ACTION trong thẻ FORM

form.elemrnts thuộc tính JavaScript

mảng chứa danh sách các phần tử trong form (như checkbox, trường text, danh sách lựa chọn)

form.encoding thuộc tính xâu chứa kiểu MIME sử dụng khi

81

JavaScript chuyển thông tin từ form tới server

form,name thuộc tính JavaScript

Xâu chứa giá trị thuộc tính NAME trong thẻ FORM

form.target thuộc tính JavaScript

Xâu chứa tên cửa sổ đích bởi một form submition

form.submit cách thức JavaScript Mô tả việc submit một form HTML

type thuộc tính JavaScript

ánh xạ kiểu của một phần tử form thành một xâu.

onSubmit Thẻ sự kiện thẻ sự kiện cho việc submit

button thuộc tính HTML Thuộc tính kiểu cho các nút bấm của HTML (<INPUT TYPE=button>)

checkbox thuộc tính HTML Thuộc tính kiểu cho các checkbox của HTML (<INPUT TYPE=checkbox>)

pasword thuộc tính HTML Thuộc tính kiểu cho các dòng pasword của HTML(<INPUT TYPE=password>)

radio thuộc tính HTML Thuộc tính kiểu cho các nút radio của HTML (<INPUT TYPE=radio>)

reset thuộc tính HTML Thuộc tính kiểu cho các nút reset của HTML (<INPUT TYPE=reset>)

SELECT thẻ HTML Hộp thẻ cho danh sách lựa chọn

OPTION thẻ HTML chỉ ra các lựa chọn trong danh sách lựa chọn(<SELECT><OPTION>Option 1<OPTION>Option 2</SELECT>)

submit thuộc tính HTML Thuộc tính kiểu của nút submit (<INPUT TYPE=submit>)

text thuộc tính HTML Thuộc tính kiểu của trường trong form (<INPUT TYPE=text>)

TEXTAREA Thẻ HTML Hộp thẻ cho nhiều dòng text (<TEXTAREA> defautl text </TEXTAREA>)

name thuộc tính JavaScript

Xâu chứa tên phần tử HTML (button, checkbox, password...)

value thuộc tính JavaScript

Xâu chứa giá trị hiên thời của một phần tử HTML(button, checkbox,

82

password...)

click() cách thức JavaScript Mô tả việc kích vào một phần tử trên form (button, checkbox,password)

onClick thuộc tính JavaScript

Thẻ sự kiện cho sự kiện kích (button, checkbox, radio button, reset, selection list, submit)

checked thuộc tính JavaScript

Giá trị kiểu Boolean mô tả một lựa chọn check(checkbox, radio button)

defaultChecked thuộc tính JavaScript

Xâu chứa giá trị mặc định của một phần tử HTML (password, text, textarea)

focus() cách thức JavaScript Mô tả việc con trỏ tới một phần tử (password, text, textarea)

blur() cách thức JavaScript Mô tả việc con trỏ rời khỏi một phần tử (password, text, textarea)

select() cách thức JavaScript Mô tả việc lựa chọn dòng text trong một trường (password, text, textarea)

onFocus() Thẻ sự kiện Thẻ sự kiện cho sự kiện focus(password, selection list, text, textarea)

onBlur Thẻ sự kiện Thẻ sự kiện cho sự kiện blur (password, selection list, text, textarea)

onChange Thẻ sự kiện Thẻ sự kiện cho sự kiện khi giá trị của trường thay đổi (password, selection list, text, textarea)

onSelect Thẻ sự kiện Thẻ sự kiện khi người sử dụng chọn dòng text trong một trường (password, text, textarea)

index thuộc tính JavaScript

Là một số nguyên mô tả lựa chọn hiện thời trong một nhóm lựa chọn (radio button)

length thuộc tính JavaScript

Số nguyên mô tả tổng số các lựa chọn trong một nhóm các lựa chọn (radio button)

dafautlSelected thuộc tính JavaScript

Giá trị Boolean mô tả khi có một lựa chọn được đặt là mặc định (seledtion list)

83

options thuộc tính JavaScript

Mảng các lựa chọn trong danh sách lựa chọn

text thuộc tính JavaScript

Dòng text hiển thị cho một thành phần của menu trong danh sách lựa chọn

TABLE thẻ HTML Hộp thẻ cho các bảng HTML

TR thẻ HTML Hộp thẻ cho các hàng của một bảng HTML

TD thẻ HTML Hộp thẻ cho các ô của một hàng trong một bảng HTML

COLSPAN thuộc tính HTML Là thuộc tính của thẻ TD mô tả trong một ô của bảng có nhiều cột

ROWSPAN thuộc tính HTML Là thuộc tính của thẻ TD mô tả trong một ô của bảng có nhiều hàng

BODER thuộc tính HTML Là thuộc tính của thẻ TABLE mô tả độ rộng đường viền của bảng

document.forms[] thuộc tính JavaScript

mảng của các đối tượng form với một danh sách các form trong một document

string.substring() cách thức JavaScript Trả lại một xâu con của xâu string từ tham số vị trí ký tự đầu đến vị trí ký tự cuối

Math.floor() cách thức JavaScript Trả lại một giá trị nguyên tiếp theo nhỏ hơn giá trị của tham số đưa vào.

string.length thuộc tính JavaScript

Giá trị nguyên của số thứ tự ký tự cuối cùng trong xâu string

84

13.MÔ HÌNH ĐỐI TƯỢNG (OBJECT MODEL)

13.1. ĐỐI TƯỢNG VÀ THUỘC TÍNHNhư đã biết, một đối tượng trong JavaScript có các thuộc tính đi kèm với

nó. Bạn có thể truy nhập đến các thuộc tính của nó bằng cách gọi :objectName.propertyName

Cả tên đối tượng và tên thuộc tính đều nhạy cảm. Bạn định nghĩa một thuộc tính bằng cách gán cho nó một giá trị. Ví dụ, giả sử có một đối tượng tên là myCar (trong trường hợp này giả sử đối tượng này đã tồn tại sẵn sàng). Bạn có thể lấy các thuộc tính có tên make, model và year của nó như sau:

myCar.make = “Ford“myCar.model = “Mustang“myCar.year = 69;

Có một mảng lưu trữ tập hợp các giá trị tham chiếu tới từng biến. Thuộc tính và mảng trong JavaScript có quan hệ mật thiết với nhau, thực ra chúng chỉ khác nhau về cách giao tiếp với cùng một cấu trúc dữ liệu. Ví dụ cũng có thể truy nhập tới các thuộc tính của đối tượng myCar ở trên bằng mảng như sau:

myCar[make] = “Ford“myCar[model] = “Mustang“myCar[year] = 69;

Kiểu mảng này được hiểu như một mảng có khả năng liên kết bởi mỗi một phần tử trong đó đều có thể liên kết đến một giá trị xâu nào đó. Để minh hoạ việc mày được thực hiện như thế nào, hàm sau đây sẽ hiển thị các thuộc tính của một đối tượng thông qua tham số về kiểu đối tượng đó và tên đối tượng.

function show_props (obj, obj_name) {

var result=””for (i in obj)

result=result+ obj_name + “.”+ i+ “=” + obj[i] + “\n”return result

}

Khi gọi hàm show_props(myCar,”myCar”) sẽ hiện lên:myCar.make = FordmyCar.model = MustangmyCar.year = 69;

85

13.2. TẠO CÁC ĐỐI TƯỢNG MỚICả JavaScript client-side và server-side đều có một số đối tượng được định nghĩa trước. Tuy nhiên, bạn cũng có thể tạo ra những đối tượng của riêng bạn. Trong JavaScript 1.2, nếu bạn chỉ muốn tạo ra một đối tượng duy nhất của một kiểu đối tượng, bạn có thể tạo nó bằng cách sử dụng khởi tạo đối tượng. Hoặc nếu bạn muốn tạo ra nhiều cá thể của một kiểu đối tượng, bạn có thể tạo ra một hàm xây dựng trước, sau đó tạo ra các đối tượng có kiểu của hàm đó bằng toán tử new

13.3. SỬ DỤNG KHỞI TẠO ĐỐI TƯỢNGTrong những phiên bản trước của Navigator, bạn chỉ có thể tạo ra một đối tượng bằng cách sử dụng hàm xây dựng chúng hoặc sử dụng một hàm được cung cấp bởi một vài đối tượng khác để đạt được mục đích.Tuy nhiên, trong Navigator 4.0, bạn có thể tạo ra một đối tượng bằng cách sử dụng một khởi tạo đối tượng.Bạn sử dụng cách này khi bạn chỉ muốn tạo ra một cá thể đơn lẻ chứ không phải nhiều cá thể của đối tượng.Cú pháp để tạo ra một đối tượng bằng cách khởi tạo đối tượng (Object Initializers):

objectName={property1: value1, property2: value2,..., propertyN: valueN}

Trong đó objectName là tên của đối tượng mới, mỗi propertyI là một xác minh (có thể là một tên, một số hoặc một xâu ký tự) và mỗi valueI là một biểu thức mà giá trị của nó được gán cho propertyI. Có thể lựa chọn khởi tạo bằng tên đối tượng hoặc chỉ bằng các khai báo. Nếu như bạn không cần dùng đến đối tượng đó trong mọi chỗ, bạn không cần phải gán nó cho một biến.

Nếu một đối tượng được tạo bằng cách khởi tạo đối tượng ở mức cao nhất, mỗi lần đối tượng đó xuất hiện trong các biểu thức, JavaScript sẽ đánh giá lại nó một lần. Ngoài ra, nếu sử dụng việc khởi tạo này trong một hàm thì mỗi lần gọi hàm, đối tượng sẽ được khởi tạo một lần

Giả sử bạn có câu lệnh sau:if (condition)

x={hi: ”there.”}Trong trường hợp này, JavaScript sẽ tạo ra một đối tượng và gắn nó vào

biến x nếu biểu thức condition được đánh giá là đúngCòn ví dụ sau tạo ra một đối tượng myHonda với 3 thuộc tính:

myHonda={color:”red”,wheels:4,engine:{cylinder:4,size:2.2}}Chú ý rằng thuộc tính engine cũng là một đối tượng với các thuộc tính của

nóTrong Navigator 4.0, bạn cũng có thể sử dụng một khởi tạo để tạo một

mảng. Cú pháp để tạo mảng bằng cách này khác với tạo đối tượng:arrayName=[element0, element1,...,elementN]

86

Trong đó, arrayName là tên của mảng mới, và mỗi elementI là giá trị của phần tử ở vị trí đó của mảng. Khi bạn tạo một mảng bằng cách sử dụng phương pháp khởi tạo, thì nó sẽ coi mỗi giá trị là một phần tử trên mảng, và chiều dài của mảng chính là số các tham số.

Bạn không cần phải chỉ định rõ tất cả các phần tử trên mảng mới. Nếu bạn đặt hai dấu phẩy vào hàng, thì mảng sẽ được tạo với những chốn trống cho những phần tử chưa được định nghĩa như ví dụ dưới đây:

Nếu một mảng được tạo bằng cách khởi tạo(initializer) ở mức cao nhất, mỗi lần mảng đó xuất hiện trong các biểu thức, JavaScript sẽ đánh giá lại nó một lần. Ngoài ra, nếu sử dụng việc khởi tạo này trong một hàm thì mỗi lần gọi hàm, mảng sẽ được khởi tạo một lần

Ví dụ1: Tạo một mảng coffees với 3 phần tử và độ dài của mảng là 3:coffees = [“French Roast”,”Columbian”,”Kona”]

Ví dụ 2: Tạo ra một mảng với 2 phần tử được khởi đầu và một phần tử rỗng:

fish = [“Lion”, ,” Surgeon”]Với biểu thức này, fish[0] là “Lion”, fish[2] là ” Surgeon”, và fish[2] chưa

được định nghĩa

13.4. SỬ DỤNG MỘT HÀM XÂY DỰNG(CONSTRUCTOR FUNCTION)Bạn có thể tạo ra đối tượng của riêng mình với hai bước sau:1. Định nghĩa kiểu của đối tượng bằng cách viết một hàm xây dựng.2. Tạo ra một cá thể của đối tượng đó bằng toán tử newĐể định nghĩa một kiểu đối tượng, ta phải tạo ra một hàm để chỉ định rõ

tên, các thuộc tính và các cách thức của kiểu đối tượng đó. Ví dụ giả sử bạn muốn tạo một kiểu đối tượng ô tô với tên là car, có các thuộc tính make, model, year và color, để thực hiện việc này có thể viết một hàm như sau:

function car(make, model, year ){this.make = makethis.model = modelthis.year = year

}Chú ý việc sử dụng toán tử this để gán giá trị cho các thuộc tính của đối

tượng phải thông qua các tham số của hàm.Ví dụ, bạn có thể tạo một đối tượng mới kiểu car như sau:mycar = new car(“Eagle”,”Talon TSi”,1993)Câu lệnh này sẽ tạo ra đối tượng mycar và liên kết các giá trị được đưa vào

với các thuộc tính. Khi đó giá trị của mycar.make là “Eagle”, giá trị của mycar.model là “Talon TSi”, và mycar.year là một số nguyên 1993....Cứ như vậy bạn có thể tạo ra nhiều đối tượng kiểu car.

87

Một đối tượng cũng có thể có những thuộc tính mà bản thân nó cũng là một đối tượng. Ví dụ bạn định nghĩa thêm một đối tượng khác là person như sau:

function person(name, age, sex){this.name=namethis.age=agethis.sex=sex

}Và sau đó ta tạo ra hai người mới:

rank = new person(“Rank McKinnon”,33,”M”)ken = new person(“Ken John”,39,”M”)

Bây giờ bạn định nghĩa lại hàm xây dựng car như sau:function car(make, model, year,owner ){

this.make = makethis.model = modelthis.year = yearthis.owner = owner

}Như vậy bạn có thể tạo đối tượng kiểu car mới:

car1 = new car(“Eagle”,”Talon TSi”,1993,rank)car2 = new car(“Nissan”,”300ZX”,1992,ken)

Như vậy, thay vì phải qua một xâu ký tự hay một giá trị số khi tạo đối tượng, ta chỉ cần đưa hai đối tượng đã được tạo ở câu lệnh trên vào dòng tham số của đối tượng mới tạo. Ta cũng có thể lấy được thuộc tính của đối tượng owner bằng câu lênh sau:

car2.owner.nameChú ý rằng bạn cũng có thể tạo ra một thuộc tính mới cho đối tượng trước khi định nghĩa nó, ví dụ:

car1.color=”black”Như vậy, thuộc tính color của đối tượng car1 được gán là “black”. Tuy nhiên, nó sẽ không gây tác động tới bất kỳ một đối tượng kiểu car nào khác. Nếu muốn thêm thuộc tính cho tất cả các đối tượng thì phải định nghĩa lại hàm xây dựng đối tượng.

13.5. LẬP MỤC LỤC CHO CÁC THUỘC TÍNH CỦA ĐỐI TƯỢNGTrong Navigator 2.0, bạn có thể gọi thuộc tính của một đối tượng bằng tên

thuộc tính hoặc bằng số thứ tự của nó. Tuy nhiên từ Navigator 3.0 trở đi, nếu ban đầu bạn định nghĩa một thuộc tính bằng tên của nó, bạn sẽ luôn luôn phải gọi nó

88

bằng tên, và nếu bạn định nghĩa một thuộc tính bằng chỉ số thì bạn cũng luôn luôn phải gọi tới nó bằng chỉ số.

Điều này ứng dụng khi bạn tạo một đối tượng với những thuộc tính của chúng bằng hàm xây dựng (như ví dụ về kiểu đối tượng car ở phần trước) và khi bạn định nghĩa những thuộc tính của riêng một đối tượng (như mycar.color=”red”). Vì vậy nếu bạn định nghĩa các thuộc tính của đối tượng ngay từ đầu bằng chỉ số như mycar[5]=”25 mpg”, bạn có thể lần lượt gọi tới các thuộc tính khác như mycar[5].

Tuy nhiên điều này là không đúng đối với những đối tượng tương ứng của HTML như mảng form. Bạn có thể gọi tới các đối tượng trong mảng bởi số thứ tự hoặc tên của chúng. Ví dụ thẻ <FORM> thứ hai trong một document có thuộc tính NAME là “myform” thì bạn có thể gọi tới form đó bằng document.form[1] hoặc document.form[“myForm”] hoặc document.myForm

13.6. ĐỊNH NGHĨA THÊM CÁC THUỘC TÍNH CHO MỘT KIỂU ĐỐI TƯỢNG

Bạn có thể thêm thuộc tính cho một kiểu đối tượng đã được định nghĩa trước bằng cách sử dụng thuộc tính property. Thuộc tính được định nghĩa này không chỉ có tác dụng đối với một đối tượng mà có tác dụng đối với tất cả các đối tượng khác cùng kiểu.Ví dụ sau thực hiện thêm thuộc tính color cho tất cả các đối tượng kiểu car, sau đó gắn một giá trị màu cho thuộc tính color của đối tượng car1:

car.prototype.color=nullcar1.color=”red”

13.7. ĐỊNH NGHĨA CÁC CÁCH THỨCMột cách thức là một hàm được liên kết với một đối tượng. Bạn định nghĩa

một cách thức cũng có nghĩa là bạn định nghĩa một hàm chuẩn. Bạn có thể sử dụng cú pháp sau để gắn một hàm cho một đối tượng đang tồn tại:

object.methodname = function_nameTrong đó object là đối tượng đang tồn tại, methodname là tên cách thức và

function_name là tên hàmBạn có thể gọi cách thức này từ đối tượng như sau:object.methodname(<tham số>)Bạn có thể định nghĩa cách thức cho một kiểu đối tượng bằng cách đưa

cách thức đó vào trong hàm xây dựng đối tượng. Ví dụ bạn có thể định nghĩa một hàm có thể định dạng và hiển thị các thuộc tính của các đối tượng kiểu car đã xây dựng ở phần trước:function displayCar () {

var result = “Abeautiful”+this.year+ “ ”+ this.make + “ ”+ this.modeldocument.write(result)

}

89

Bạn có thể thêm cách thức này vào cho đối tượng car bằng cách thêm dòng lệnh sau vào hàm định nghĩa đối tượng

this.displayCar= displayCar;Như vậy có thể định nghĩa lại đối tượng car như sau:

function car(make, model, year,owner ){this.make = makethis.model = modelthis.year = yearthis.owner = ownerthis.displayCar= displayCar

}Sau đó, bạn có thể gọi cách thức displayCar đối với mỗi đối tượng:

car1.displayCar()car2.displayCar()

13.8. SỬ DỤNG CHO CÁC THAM CHIẾU ĐỐI TƯỢNG (OBJECT REFERENCES)

JavaScript có một từ khoá đặc biệt là this mà bạn có thể sử dụng nó cùng với một cách thức để gọi tới đối tượng hiện thời. Ví dụ, giả sử bạn có một hàm validate dùng để xác nhận giá trị thuộc tính của một đối tượng nằm trong một khoảng nào đó:function validate(obj, lowval, hival){

if ( (obj.value<lowdate)||(obj.value>hival) )alert(“Invalid value!”)

}Sau đó bạn có thể gọi hàm validate từ mỗi thẻ sự kiện onChange:<INPUT TYPE=”TEXT” NAME=”AGE” SIZE=3

onChange=”validate(this,18,99)” >Khi liên kết với một thuộc tính form, từ khoá this có thể gọi tới form cha

của đối tượng hiện thời. Trong ví dụ sau, myForm có chứa đối tượng Text và một nút bấm. Khi người sử dụng kích vào nút bấm, trường text sẽ hiển thị tên form. Thẻ sự kiện onClick của nút bấm sử dụng this.form để gọi tới form cha là myForm.<FORM NAME=”myForm”>

Form name:<INPUT TYPE=”text” NAME=”text1” VALUE=”Beluga”><P>

<INPUT TYPE=”button” NAME=”button1” value=”Show Form Name” onClick=”this.form.text1.value=this.form.name”>

</FORM>90

13.9. XOÁ ĐỐI TƯỢNGTrong JavaScript cho Navigator 2.0, bạn không thể xoá các đối tượng-

chúng vẫn tồn tại trong khi bạn đã rời khỏi trang đó. Trong khi JavaScript cho Navigator 3.0 cho phép bạn có thể xoá một đối tượng bằng cách đặt cho nó trỏ tới giá trị Null (nếu như đó là lần cuối cùng gọi tới đối tượng). JavaScript sẽ đóng đối tượng đó ngay lập tức thông qua biểu thức gán.

14. BẢNG TỔNG KẾT CÁC TỪ KHOÁSau đây là các từ đựoc định nghĩa là một phần trong ngôn ngữ JavaScript và không được sử dụng là tên biến:

abstract eval int staticboolean extends interface superbreak false long switchbyte final native synchrinizedcase finally new thiscatch float null throwchar for package throwsclass function parseFloat transientconst goto parseInt truecontinue if private trydefault implements protected vardo import public voiddouble in return whileelse instanceof short with

91

CHƯƠNG 5

MÔI TRƯỜNG ACTIVE SERVER PAGE (ASP)1. GIỚI THIỆU

Microsoft Active Server Page là một môi trường giúp ta áp dụng các ngôn ngữ script để tạo ra những ứng dụng có thể nhanh chóng tương tác với cơ sở dữ liệu, có tính bảo mật cao. Các đoạn chương trình nhỏ được gọi là script sẽ được nhúng vào trong các trang của ASP để phục vụ cho việc đóng, mở, thao tác với dữ liệu cũng như điều khiển việc các trang Web tương tác với người dùng. Các ứng dụng xây dựng bằng ASP là các file có phần mở rộng ASP. Trong một File ASP có thể trộn lẫn các đoạn mã script, các thẻ của HTML và các đoạn văn bản (text). Trên mỗi trang ASP có một ngôn ngữ script gọi là ngôn ngữ script cơ sở. Ngôn ngữ cơ sở có thể là một trong các ngôn ngữ script thông dụng sau: JScript, VBScript, Perl . . . Ngôn ngữ cơ sở mặc định là VBScript. Để thiết lập lại ngôn ngữ script mặc định ASP cung cấp lệnh sau:

<% LANGUAGE=Tên_ngôn_ngữ_Script %>Các script này được chạy ngay trên Web Server mà không cần biên dịch

riêng. Chính điều này đã làm cải thiện đáng kể tới tốc độ thực hiện ứng dụng được xây dựng bằng ASP. Để chạy được những đoạn chương trình được viết bằng ngôn ngữ script thì phải có máy script (engine). Máy script làm nhiệm vụ đọc tệp nguồn của chương trình, dịch và thực hiện các câu lệnh trong đó. Mỗi ngôn ngữ Script đòi hỏi phải có một máy script riêng. Ví dụ các đoạn chương trình viết bằng VBScript thì phải có VBScript Engine, bằng JScript thì phải có JScript Engine.

Phân loại Script: Các ngôn ngữ script còn được phân loại theo vị trí mà nó được nạp và thực hiện. Có hai loại như sau:

Server-side script: Là những đoạn script nằm trong tệp ASP sẽ được thực hiện ở máy chủ và sẽ

không nằm trong kết quả trả về cho Web Browser của người dùng. Các server-side script được khai báo theo cú pháp như sau:

<% Những lệnh nằm trong này được thực hiện trên Server %>

hoặc

<Script Language = Tên_script_language Runat = Server>

Các lệnh script được thực hiện trên Server:

</Script>

92

Ví dụ:

<HTML><HEAD><TITLE>Document title</TITLE><%dim a,b,ca=5b=10c=a+b%></HEAD><BODY>Vi du<hr>Gia tri tong <%=c%></BODY></HTML>

Hoặc ta có thể viết:<HTML><HEAD><TITLE>Document title</TITLE><Script Language="VBScript" Runat="SERVER">dim a,b,ca=5b=10c=a+b</SCRIPT></HEAD><BODY>Vi du<hr><Script Language="VBScript" Runat="SERVER">response.write "Gia tri tong=" & c</SCRIPT></BODY><HTML>

Client-side script:

Là những đoạn script nằm trong tệp ASP mà nó sẽ được thực hiện trên Web Browser của Client. Những đoạn Script này thường dùng để hỗ trợ việc tính toán

93

đơn giản ngay trên Client. Các Client_side Script được khai báo như sau:

<SCRIPT Language=” Tên_Ngôn_ngữ_Script ”>

Các lệnh script:

</SCRIPT>

Ví dụ:

<HEAD><TITLE>Document title</TITLE><SCRIPT LANGUAGE="VBSCRIPT">sub vbs alert "Day la VBSCRIPT"end sub</SCRIPT><SCRIPT LANGUAGE="JAVASCRIPT">function js(){ alert("Day la JAVASCRIPT")}</SCRIPT></HEAD><BODY>Vi du<hr>Lua chon :<input type="button" name="vbs" value="VBScript" OnClick="vbs"><input type="button" name="js" value="JavaSCript" OnClick="js()"></BODY><HTML>

Tóm lại quá trình làm việc của một ứng dụng được xây dựng bằng ASP gồm các bước như sau:

Bước 1: Khi Web Browser ở máy người dùng gửi một yêu cầu về một tệp ASP cho Web Server.

Bước 2: Tệp ASP đó được nạp vào bộ nhớ và thực hiện (tại máy chủ). Các đoạn chương trình script trong tệp ASP đó có thể là mở dữ liệu, thao tác với dữ liệu để lấy được những thông tin mà người dùng cần đến. Trong giai đoạn này tệp ASP đó cũng xác định xem là đoạn Script nào là chạy trên máy chủ, đoạn Script nào là chạy trên máy người dùng.

94

Bước 3: Sau khi thực hiện kết quả đó sẽ được trả về cho Web Browser của người dùng dưới dạng một trang Web tĩnh.

2. CÁC ĐỐI TƯỢNG CỦA ASP

ASP cung cấp một loạt các đối tượng cho phép nhận thông tin từ Web Browser hoặc đáp ứng các yêu cầu từ Web Browser, hoặc lưu các thông tin về người dùng. Active Server Page gồm có các đối tượng mô tả trong hình 4.1:

Hình 4.1: Mô hình đối tượng ASP

2.1. Đối tượng Application

Đối tượng Application được dùng để chia sẻ thông tin giữa các người dùng của cùng một hệ thống ứng dụng. Một ứng dụng cơ bản ASP được định nghĩa là gồm tất cả các tệp ASP ở trong một thư mục ảo và tất cả các thư mục con của thư mục ảo đó. Có thể sử dụng các phương thức LOCK và UNLOCK của đối tượng Application để khoá và bỏ khoá khi chạy ứng dụng đó với nhiều người dùng.

Ví dụ: một người dùng có thể thay đổi một thuộc tính của đối tượng Application thì thuộc tính đó phải được khoá lại để không có người dùng nào khác có thể thay đổi được thuộc tính đó cho đến khi người dùng này thay đổi xong thuộc tính và bỏ khoá thuộc tính đó. Các thành phần của đối tượng Application:Các đối tượng con:

* Contents: Chứa tất cả các đối tượng được thêm vào Application trong quá trình thực hiện các Script.

Có thể truy cập vào các đối tượng đó bằng cú pháp sau: Application.Contents(Key). Key ở đây là tên đối tượng cần truy cập.

* StaticObjects: Chứa tất cả các đối tượng được thêm vào Application trong quá trình thực hiện các trang Web có chứa các thẻ <OBJECT>.

95

ClientServer

Response Object

Request Object

ObjectContext Object

ServerObject

ApplicationObjectSessionObject

Có thể truy cập vào các đối tượng đó bằng cú pháp sau Application.StaticObjects(Key). Key ở đây là tên đối tượng cần truy cập.

Các phương thức (Methods):

* LOCK: Không cho các người dùng khác thay đổi thuộc tính các đối tượng của Application

* UNLOCK: Huỷ bỏ LOCK

Các sự kiện (Events)

* OnStart: Xảy ra khi một yêu cầu tới một tệp đầu tiên trong hệ thống ứng dụng*OnEnd: Xảy ra khi hệ thống ứng dụng kết thúcVí dụ: minh hoạ sử dụng các thành phần của ApplicationFile Appobj.asp có nội dung như sau:

<HTML><HEAD><TITLE>Document title</TITLE></HEAD><BODY><H1>Application Started at:<% response.write(Application("DateTime")) %></H1>Gia tri cua bien "Foo" nhan duoc qua ung dung khi kich chuot : <%=Application("foo")%><p><FORM action="setfoo.asp" method="GET"><Input type="hidden" name="foo" value="5"><Input type="submit"></FORM></BODY><HTML>Trong file này muốn lấy giá trị của biến “foo” qua ứng dụng ta dùng lệnh: <%=Application("foo")%>Giá trị này lấy qua ứng dụng và được sử dụng lại trong file setfoo.asp.Nội dung file setfoo.asp:<% response.buffer=true %><HTML><HEAD><TITLE>Vi du ve ASP</TITLE></HEAD><BODY>

96

<%Application.lockApplication("foo")=request.queryString("foo")response.write "Gia tri cua bien Foo :" & Application("foo")Application.Unlock%></BODY><HTML>

2.2. Đối tượng Session

Đối tượng Session được dùng để lưu thông tin riêng rẽ của từng phiên làm việc. Các thông tin lưu giữ trong Session không bị mất đi khi người dùng chuyển từ trang Web này sang trang Web khác. Các thông tin được lưu trong Session thường là các thông tin về người dùng hoặc các điều kiện chẳng hạn như người dùng không muốn nghe các tệp tin nhạc ở một số các trang thì phải có một biến để lưu giữ lại thông tin này. Đối tượng Session được Web Server tự động tạo nếu như các trang Web của ứng dụng đòi hỏi bởi một người dùng mà chưa có SessionID. SessionID là một mã mà Web Server sẽ gửi về cho Web Browser ở máy người dùng và mã này dùng cho Web Server nhận biết là yêu cầu được gửi từ Session nào đến.

Các thành phần của đối tượng session: Các đối tượng con của đối tượng Session:

* Contents: Chứa tất cả các đối tượng được thêm vào Session trong quá trình thực hiện các Script.

Có thể truy cập vào các đối tượng đó bằng cú pháp sau: Session.Contents(Key). Key ở đây là tên đối tượng cần truy cập.

* StaticObjects: Chứa tất cả các đối tượng được thêm vào Session trong quá trình thực hiện các trang Web có chứa các thẻ <OBJECT>.

Có thể truy cập vào các đối tượng đó bằng cú pháp sau: Session.StaticObjects(Key). Key ở đây là tên đối tượng cần truy cập.

Các phương thức của đối tượng Session.*Abandon: Huỷ bỏ Session hiện thời và giải phóng mọi thông tin liên quan

đến Session. Các thuộc tính*CodePage: Mã số của trang.*LCID: Chỉ số định vị*SessionID: Trả lại chỉ số của Session cho người sử dụng*TimeOut: Thời gian timeout của session

97

Các sự kiện (Events)* OnStart: Xảy ra khi Server tạo ra một Session mới và việc này được thực

hiện trước khi Server trả lời lại yêu cầu của Web Browser. Mọi thông tin và các biến sử dụng chung trong một Session tốt nhất là được khởi tạo tại đây và mọi thành phần khác của ASP đều có thể được tham khảo trong Event này.

* OnEnd: Xảy ra khi Session kết thúc hoặc bị timeoutVí dụ: minh hoạ sử dụng các thành phần của Session

</HEAD><BODY><h3>CodePage = <%=session.codepage%></h3><h3>LCID = <%=session.LCID%></h3><h3>SessionID = <%=session.sessionID%></h3><h3>TimeOut = <%=session.TimeOut%></h3><p>Ban da den tham trang nay :<%=session("intSessionObjVisit")%> lan<%session("intSessionObjVisit")=session("intSessionObjVisit")+1%></p><%dim Itemfor Each Item in Session.Contentsresponse.Write(Item & " = " & Session.Contents(Item) & "<Br>")Nextresponse.write(now())%></BODY><HTML

2.3. Đối tượng Request

Đối tượng này chứa các thông tin của Web Browser gửi đến Server thông qua giao thức TCP/IP. Các thành phần của đối tượng request:

Các đối tượng con của đối tượng Request

*QueryString: các giá trị của các biến QueryString từ brower *Form: nhận giá trị từ các thành phần của Form từ các Client khi người dùng bấm “Submit” từ Form*ServerVariables: Chứa các thông tin về các biến môi trường đã được định

98

nghĩa sẵn*Cookies: Giá trị cookies của Web Browser gửi đến Server thông qua HTTP.*ClientCertificat: Giá trị Certificat của Web Browser gửi đến Server thông qua HTTP. Các thuộc tính:*TotalByte: chỉ số byte trong phần body mà Client gửi về cho server Các phương thức:*Binaryread: sử dụng để nhận dữ liệu gửi đến cho server.

Ví dụ: minh hoạ sử dụng các thành phần của đối tượng requestFile reinfo.html tạo form cập nhật tên người dùng và địa chỉ email gửi đến cho server

<HTML><HEAD><TITLE>Vi du su dung doi tuong request</TITLE></HEAD><BODY><CENTER><H1>ASP FORM DEMO 1</h1><FORM name="userinfo" action="maininfo.asp" method="POST"><h3>Xim moi dien thong tin vao form</h3> <PRE>Name : <input type="text" name="username">Email : <input type="text" name="mail"></PRE><input type=Submit value="Submit"><input type=Reset value="Reset"></FORM></CENTER></BODY><HTML>

File maininfo.asp nhận, xử lý thông tin và trả lời.<HTML><HEAD><TITLE>Vi du su dung doi tuong request</TITLE></HEAD><BODY><CENTER><H1>Thong tin sau day nhan duoc tu FORM</h1><B> Name = </b> <%=Request.Form("username")%> <Br><B> E-mail = </b> <%=Request.Form("mail")%> <Br>

99

</CENTER></BODY><HTML>

2.4. Đối tượng Response

Đối tượng này được dùng để gửi kết quả cho Web Browser.

Các thành phần của đối tượng Response:

Đối tượng con của đối tượng response Cookies: giá trị của tất cả các Cookies gửi đến cho Client

Các thuộc tính của đối tượng response Buffer: vùng đệm của trang web CacheControl: Điều khiển cache Charset: Bổ sung kí tự vào nội dung tên đầu ContentType: Kiểu nội dung HTML của Response Expires: Độ dài thời gian trước khi trang web về trình duyệt ExpiresAbsolute: Ngày và giờ trang Web hiển thị trên brower IsClientConneted: Chỉ ra nơi mà client kết nối PICS: Thêm giá trị của một PICS Status: Trạng thái của Server trả về

Các phương thức (Methods) Add header: Thêm một phần Header mới vào HTML header với một số giá trị

chọn lọc. Phương thức này luôn luôn thêm vào chứ không ghi đè lên thông tin đã có sẵn. Cú pháp:

Response.AddHeader name, valueVí dụ:<% Response.Buffer = TRUE %> <HTML>Here's some text on your Web page.<% Response.AddHeader "WARNING", "Error Message Text" %> Here's some more interesting and illuminating text.<% Response.Flush %> <%= Response.Write("some string") %> </HTML>

AppendTolog: Thêm văn bản vào Web Server BinaryWrite: Gửi văn bản tới trình duyệt không chuyển đổi kí tự Clear: Xoá toàn bộ bộ đệm ra của HTML, phương thức này chỉ xoá phần thân

của Response chứ không xoá phần Header của Response.

100

End: Kết thúc việc xử lý ở tệp ASP và gửi về Web Browser những kết quả thu được cho đến lúc xảy ra phương thức này.

Flush: Khi các thông tin được gửi ra bộ đệm kết quả thì những thông tin đó chưa được gửi về ngay Web Browser mà chỉ đến khi dùng phương thức này thì thông tin sẽ được gửi ngay tức khắc về Web Browser. Tuy nhiên cũng sẽ xảy ra thông báo lỗi Run-time nếu như Response.Buffer chưa được đặt giá trị = True

Redirect: Phương thức này dùng để định hướng địa chỉ của trang Web trên Web Browser trỏ đến một URL khác.

Write: Đây là phương thức hay dùng nhất để trả về cho Web Browser những xâu ký tự mà đại điện cho cấu trúc HTML.

Ví dụ:I just want to say <% Response.Write("Hello World.")%> Your name is: <% Response.Write Request.Form("name") %>

2.5. Đối tượng Server

Đối tượng này cung cấp các phương thức cũng như thuộc tính của Server. Các thành phần của đối tượng SERVER:

Thuộc tính : ScriptTimeOut: Độ dài thời gian Script chạy trước khi xuất hiện lỗi

Các phương thức (Methods): CreatObject: Phương thức này được dùng để tạo ra những đối tượng mới

nằm trên Server. Ví dụ:

<% Set Session("ad") = Server.CreateObject("MSWC.AdRotator")%>Không thể tạo ra những đối tượng mới có tên trùng với những đối tượng có sẵn như: Response, Server, Request ...

HTMLEncode: Cung cấp khả năng mã hoá các xâu ký tự.Ví dụ:

<%= Server.HTMLEncode("The paragraph tag: <P>") %> Sau đó kết quả sẽ là:

The paragraph tag: <P> MapPath: Phương thức này trả về địa chỉ vật lý tương ứng với địa chỉ thư

mục ảo trên máy chủ.

Ví dụ:

<%= server.mappath("data.txt")%><BR>101

<%= server.mappath("script/data.txt")%><BR>Kết quả trả về là:

c:\inetpub\wwwroot\script\data.txt<BR>c:\inetpub\wwwroot\script\script\data.txt<BR>

Hoặc<%= server.mappath("/script/data.txt")%><BR><%= server.mappath("\script")%><BR>

Kết quả trả về là:

c:\inetpub\script\data.txt<BR>c:\inetpub\script<BR>

URLEncode: Cung cấp khả năng mã hoá địa chỉ URL.

Ví dụ:<%Response.Write(Server.URLEncode("http://www.microsoft.com"))

%>Kết quả trả về là:

http%3A%2F%2Fwww%2Emicrosoft%2Ecom

2.6. ObjectContext

Dùng đối tượng này để chấp nhận hoặc huỷ bỏ các Transaction được điều khiển bởi Microsoft Transaction Server. Khi mà tệp ASP có chứa từ khoá @TRANSACTION ở trên đầu thì tệp ASP đó sẽ chạy cho đến khi mà Transaction thực hiện thành công hoặc thất bại.

Các thành phần của đối tượng ObjectContext:

Các phương thức (Methods):

SetComplete: Phương thức này khai báo rằng đoạn script trong ASP không phụ thuộc vào việc có thực hiện thành công hay không Transaction. Nếu mọi thành phần trong Transaction mà đều gọi phương thức này thì Transaction sẽ được hoàn thành.

SetAbort: Phương thức này khai báo rằng Transaction khởi tạo bằng script đã không hoàn thành.

Các sự kiện (Events) :

OnTransactionCommit: Xuất hiện sau khi Transaction xẩy ra

OnTransactionAbort: Xuất hiện nếu Transaction kết thúc.

102

BÀI TẬP CHƯƠNG 5

4.1 Nêu các loại Script: có pháp, ví dụ

4.2 Trình bày các đối tượng của ASP

4.3 Trình bày ý nghĩa, các thành phần của đối tượng Application

4.4 Trình bày ý nghĩa, các thành phần của đối tượng Session

4.5 Trình bày ý nghĩa, các thành phần của đối tượng Request

4.6 Trình bày ý nghĩa, các thành phần của đối tượng Response

4.7 Trình bày ý nghĩa, các thành phần của đối tượng ObjectContext

4.5 Trình bày ý nghĩa, các thành phần của đối tượng SERVER

4.7 Viết hai trang mã nguồn: Trang mã nguồn THONGTIN.HTML chứa FORM gửi thông tin được cập nhật bao gồm: Họ và tên, mật khẩu, địa chỉ, số điện thoại, Email gửi đến SEVER, chương trình xử lý phía SERVER là file XULY.ASP nhận các thông tin này và thông báo cho người dùng những thông tin đã nhận được.

4.8 Viết hai trang mã nguồn: Trang GPTB2.HTML chứa FORM giúp cho người dùng cập nhật các hệ số a, b, c của một phương trình bậc 2 gửi đến SERVER. Trang GIAI.ASP nhận thông tin, xử lý và trả lại kết quả cho phía Client.

103

CHƯƠNG 6

LẬP TRÌNH ADO (ACTIVEX DATA OBJECTS PROGRAMMING)

ADO là một ngôn lập trình đơn giản dành cho việc tương tác với cơ sở dữ liệu trên Internet và Intranet. ADO có thể được sử dụng để viết những scripts gọn nhẹ dành cho việc kết nối với ODBC (Open DataBase Connectivity). Trước khi tạo những script xử lý cơ sở dữ liệu, ADO cần phải được cung cấp một cách để định vị, tương tác với cơ sở dữ liệu. Việc kết nối với ODBC thông qua các Driver cơ sở dữ liệu. Các driver cơ sở dữ liệu là các chương trình đưa thông tin từ ứng dụng Web tới cơ sở dữ liệu. Việc kết nối này sử dụng tên nguồn dữ liệu DSN(Data Source Name). DSN chứa những thông tin về việc bảo mật, việc tham chiếu tới cơ sở dữ liệu vật lý. ADO có mô hình đơn giản như sau:

Hình 5.1: Mô hình các đối tượng của ASP

1. ĐỐI TƯỢNG CONNECTION

Đối tượng này được dùng để tạo một kết nối tới một cơ sở dữ liệu. Để tạo một kết nối với cơ sở dữ liệu trước tiên phải tạo ra một biến Connection sau đó sử dụng phương thức Open của đối tượng này.

<%Set biến_đối_tượngServer=CreateObject(“ADODB.Connection”)Biến_đối_tượng.Open “DSN=Mydatabase”

104

Connection

Command

Errors

Fields

Parameters

Recordset

%>MyDataBase là tên một cơ sở dữ liệu nguồn (DSN) mà đã dược tạo ra trước

đó.Các phương thức của đối tượng Connection:

Open: Mở một cơ sở dữ liệu đã được kết nối Close: Đóng một cơ sở dữ liệu đã mở Execute: Thực hiện một truy vấn trên cơ sở dữ liệu được kết nối BeginTrans: Bắt đầu một Transaction mới ComitTrans: Lưu giữ Transaction khi có sự thay đổi RollBackTrans: Hủy bỏ sự Transaction để bắt đầu một Transaction mới OpenSchema: Cho phép hiển thị cơ sở dữ liệu như bảng, cột ở phía

SERVERVí dụ 1: Xoá tất cả các sinh viên có tên là Nam trong bảng sinhviên của cơ sở dữ liệu SV.

<%Set conn=Server.CreateObject(“ADODB.Connection”)conn.Open “DSN=SV”

conn.Execute “DELETE FROM sinhvien WHERE name=’Nam’ ”%>

Ví dụ 2: Giả sử trong cơ sở dữ liệu có bảng mon_thi bao gồm các trường: tenmom (tên môn), sodvht (số đơn vị học trình), ngaythi (ngày thi), thoigian (thời gian thi), giaovien (giáo viên bộ môn), dvpt (đơn vị phụ trách). Ta muốn hiện thị lên trình duyệt bảng danh sách có dạng:

Danh sách môn thi

Môn thi Thời gian Ngày thi Giáo viên bộ môn

Ta có thể viết đoạn mã như sau:<%@ Language=VBScript%>

<% Sub OpenConnection (ByRef con)

Set con = Server.CreateObject("ADODB.Connection")con.Open "DSN"

End Sub

105

%><html><head><title>Danh sach mon thi</title></head><%OpenConnection conResponse.Write "<BODY>"'--------------- SQL = "SELECT * FROM MON_THI1 ORDER BY TENMON" Set rs = con.Execute(SQL) Response.Write "<TABLE COLS=2 WIDTH='100%' CELLSPACING=0 CELLPADDING=0 BORDER=0>" Response.Write "<TR><TD COLSPAN=2 WIDTH='100%' ALIGN=LEFT BGCOLOR='DarkBlue'><FONT Face='Tahoma' COLOR=White SIZE=4>" Response.Write "<FONT FACE='.VnTimeH' SIZE=4 COLOR='WHITE'>&nbsp&nbsp <B>Danh sách các môn thi</B></FONT><BR></TD>" Response.Write "<TR><TD COLSPAN=2 WIDTH='100%' ALIGN=LEFT><HR></TD></TR>" Response.Write "</TABLE>" If rs.EOF Then Response.Write "<P>" Response.Write " No record found in the database... Back to <A HREF='mt.asp'>Cap nhat mon thi</A>" Response.Write "</P>" Else Response.Write "<TABLE WIDTH='100%' CELLSPACING=0 CELLPADDING=0 BORDER=1>" Response.Write "<TR><TD align=center><font face='.VnTimeH' size=+1>Môn thi</TD><TD align=center><font face='.VntimeH' size=+1>" Response.Write "Thời gian (phút)</TD><TD align=center><font face='.VnTimeH' face=+1 size=+1>Ngày thi</TD><TD align=center><font face='.VnTimeH' size=+1>Giáo viên dạy</td></TR>" While Not rs.EOF Response.Write "<TR><TD>" Response.Write "<font face='.VnTime' size=+1>"

106

Response.Write rs("Tenmon") Response.Write "</font>" Response.Write "</TD><TD align=center>" Response.Write "<font face='.VnTime' size=+1>" Response.Write rs("Thoigian") Response.Write "</font>" Response.Write "</TD><TD align=center>" Response.Write "<font face='.VnTime' size=+1>" Response.Write rs("ngaythi") Response.Write "</font>" Response.Write "</TD><TD>" Response.Write "<font face='.VnTime' size=+1>" Response.Write rs("giaovien") Response.Write "</font>" Response.Write "</TD></TR>" rs.MoveNext Wendend if Response.Write "</Table>" Response.Write "<Table>" Response.Write "<TR><TD COLSPAN=2 WIDTH='100%'ALIGN=LEFT><HR></TD></TR>" Response.Write "<TR><TD COLSPAN=2 WIDTH='100%'ALIGN=LEFT> Back to <A HREF='mt.asp'>Cap nhat mon thi</A></TD></TR>" Response.Write "</TABLE>" %></BODY></HTML>

2. ĐỐI TƯỢNG RECORDSET

Mặc dù đối tượng Connection dễ dàng tạo một kết nối và thực hiện truy vấn, nhưng đối tượng này còn nhiều hạn chế. Hạn chế của đối tượng này là khả năng thao tác với cơ sở dữ liệu không mềm dẻo, phải biết chính xác trước cấu trúc của dữ liệu mới thực hiện truy vấn được . . . Để khắc phục những hạn chế này ADO cung cấp đối tượng Recordset. Recordset cho phép lấy dữ liệu, nghiên cứu kết quả, và cập nhật cơ sở dữ liệu. Đối tượng Recordset duy trì vị trí của mỗi bản

107

ghi được trả về bởi một truy vấn, vì vậy ta có thể duyệt từng bản ghi một từ bản ghi đầu tiên tới bản ghi cuối cùng. Tạo ra một đối tượng Recordset có dạng như sau:

<% Set biến_đối_tượng= Server.CreateObject(“ADODB.Recordset”)biến_đối_tượng .open source, ActiveConnection , CursorType, LockType%>

* Source: Thường là một xâu lệnh SQL, cũng có thể là tên của một bảng.* ActiveConnection: Tham số thứ hai của phương thức Open là một trong hai dạng sau:+ Sử dụng một xâu ký tự chỉ ra rằng tạo một kết nối mới.

+ Chỉ ra một kết nối đã tạo ra bằng đối tượng Connection. Cách này thường được dùng nhiều hơn bởi vì chỉ cần tạo một kết nối bằng đối tượng Connection ta có thể tạo ra nhiều đối tượng Recordset sử dụng kết nối này.

* CursorType: Tham số này có thể là một trong 4 giá trị :+ 0 Là kiểu Forword_Only. Kiểu này chỉ cho phép di chuyển con trỏ về

phía trước, với kiểu này ta không thể thấy được sự thay đổi dữ liệu bởi người dùng khác. Forword_only không cho phép dùng thuộc tính MoveFirst, Moveprevious, MoveLast chính vì vậy nó cũng không cho phép dùng thuộc tính RecordCount (tính tổng các bản ghi). Tuy nhiên lại là kiểu tốn ít bộ nhớ nhất. Đây là dạng mặc định của phương thức OPEN.

+ 1 Là kiểu Keyset. Đặc điểm của kiểu này là số bản ghi không bao giờ thay đổi, không thấy được sự tác động của người dùng khác với dữ liệu.

+ 2 Là kiểu Dynamic. Kiểu này cho phép ta thấy được sự cập nhật các bản ghi bởi người dùng khác. Kiểu này hỗ trợ nhiều chức năng của Recordset nhất nhưng giá phải trả là tốn bộ nhớ nhất và xử lý chậm nhất.

+ 3 Là kiểu Static. Kiểu này cũng không cho phép biết được sự thay đổi các bản ghi bởi người dùng khác.

Nói chung các kiểu trên đây chỉ khác nhau ở việc phản ánh những thay đổi trên các bản ghi bởi người dùng khác.

* Tham số LockType : Tham số khoá này cũng có 4 giá trị sau

108

Giá trị Hằng biểu diễn Tên

1 AdLockReadOnly Read Only

2 AdLockPessimistic Pessimistic locking

3 AdLockOptimistic Optimistic locking

4 AdLockBatchOptimistic Optimistic locking with batch update.

Trong các giá trị này đáng chú ý nhất là kiểu Read Only không cho phép cập nhật và kiểu Optimistic cho phép cập nhật các bản ghi (chỉ khoá bản ghi khi ADO cập nhật vật lý bản ghi).

Các phương thức thông dụng của đối tượng recordset:

AddNew: Cho phép thêm một bản ghi mới. Phương thức này được sử dụng như sau:

Tên_Recordset.AddNew

Tên_Recordset(“Tên_trường”)= giá_trị

. . .Tên_Recordset.Update

Update: Ghi nhớ những thay đổi của Recordset. CancelBatch: Hủy bỏ tất cả dữ liệu mới cập nhật CancelUpdate: Hủy bỏ dữ liệu mới cập nhật Close: Đóng Recordset Delete: Xóa bản ghi hiện thời MoveFirst: Di chuyển con trỏ tới bản ghi đầu tiên MoveLast: Di chuyển con trỏ tới bản ghi cuối cùng MovePrevious: Di chuyển con trỏ tới bản ghi trước đó MoveNext: Di chuyển con trỏ tới bản ghi tiếp theo. Move n: Di chuyển n bản ghi kể từ bản ghi hiện tại NextRecordset: Chuyển đến recordset tiếp theo Open: Mở một Recordset Requery: Thực hiện truy vấn cập nhật dữ liệu UpdateBatch: Ghi tất cả dữ liệu đã được cập nhật lên đĩa

Sau đây là một số thuộc tính thông dụng của Recordset:

109

EOF: Nếu TênRecordset.EOF=true thì ADO báo cho biết con trỏ đã ở vị trí cuối cùng của Recordset. Thuộc tính này thường được dùng dể kiểm tra xem đã duyệt hết các bản ghi trong Rcordset. Ví dụ đoạn script được viết như sau:

<%Do While Not Tên_Recordset.EOF Các lệnh xử lý bản ghi hiện tạiTên_Recordset.MoveNext End Do%>

BOF: Kiểm tra con trỏ đã ở vị trí đầu tiên của Recordset chưa. RecordCount: Cho biết tổng số bản ghi hiện tại. Filter: Đặt lọc cho Recordset có dạng như sau:

<%Tên_Recordset.Filter = “ Điều kiện của lọc ”%>Khi đặt lọc mới thì lọc cũ bị mất đi và Recordset lúc đó chỉ còn lại những

bản ghi thoả mãn điều kiện của lọc.

Tất cả các thuộc tính và phương thức của đối tượng Recordset cho phép thao tác với cơ sở dữ liệu ở mức hàng. Để có thể thao tác các bảng ở mức cột ADO cung cấp một đối tượng Fields là đối tượng con của RecordSet. Ta có thể lấy giá trị của các trường của bản ghi hiện tại theo cách sau:

Biến_Recordset(“Tên_trường”). Với trường hợp không biết chính xác tên trường có thể dùng Biến_Recordset(i).name để biết tên trường và dùng Biến_Recordset.Fields(i).value để lấy giá trị trường thứ i của bản ghi hiện tại. Việc đánh số các trường được bắt đầu từ 0 đến tổng số các trường trừ 1 . Ví dụ sau hiển thị tất cả các bản ghi của bảng sinh_viên:<HTML><HEAD><Title> Vidu.ASP </Title></HEAD><% set con=server.CreateObject("ADODB.Connection")con.Open "DSN"Set rst=Server.CreateObject("ADODB.Recordset")rst.Open "sinh_vien",con %><BODY>

110

<TABLE BORDER=1><TR><% For i=1 to rst.fields.count-1 %><TD><B><%=rst(i).Name %></B></TD> <% Next %></TR><% Do While not rst.EOF %><TR><% For i=1 to rst.fields.count-1 %><TD><%=rst.Fields(i).Value %></TD><% Next %></TR><% rst.MoveNext Looprst.Close%></TABLE></BODY></HTML>

3. ĐỐI TƯỢNG COMMAND

ADO cung cấp đối tượng Command cho phép thực hiện các truy vấn tương tự như thực hiện các truy vấn của các đối tượng Connection và Recordset. Tuy nhiên với Command ta có thể chuẩn bị, hoặc biên dịch truy vấn trên cơ sở dữ liệu. Sau đó có thể dùng lại truy vấn với một bộ giá trị mới. Chính việc biên dịch các truy vấn theo cách này có thể giảm thời gian lớn trong việc sử dụng những truy vấn đã có.Các phương thức của đối tượng command: CreateParameter: Tạo lập một đối tượng Parameter mới Execute: Thực hiện truy vấn SQL được chỉ ra trong thuộc tính CommandTextMột số thuộc tính chủ yếu của đối tượng Command: ActiveConnection: Chỉ ra kết nối với cơ sở dữ liệu CommandText: Dòng lệnh truy vấn cơ sở dữ liệu CommandTimeout: Khoảng thời gian thực hiện một lệnh

Ví dụ: Dùng đối tượng Command thực hiện xoá sinh viên có ten=”ly” trong bảng sinh_vien

111

<% set oCmd=server.CreateObject("ADODB.Command")oCmd.ActiveConnection="DSN"oCmd.CommandText="Delete * from sinh_vien where ten='Ly'"oCmd.ExecuteSet oCmd.ActiveConnection=Nothing%>4 . CÁC ĐỐI TƯỢNG ERRORS.

Là tập hợp các đối tượng lỗi sinh ra do quá trình truy cập cơ sở dữ liệu không thành. Bởi vì một lệnh truy cập cơ sở dữ liệu có thể sinh nhiều lỗi, nên ADO định nghĩa tập hợp các đối tượng Error hơn là một đối tượng Error đơn. Với cùng một thao tác thì mỗi lỗi xảy ra khi thực hiện thao tác sẽ được gắn với một đối tượng Error.Các thông tin của các thuộc tính trong mỗi đối tượng Error này được tự động điền như mã lỗi, mô tả và nguồn gốc của nó.

112

CHƯƠNG 7 - NGÔN NGỮ LẬP TRÌNH PHP1. PHP là gì

PHP viết tắt bởi cụm từ Personal Home Page do Rasmus Lerdorf phát minh ra, được công bố và phát triển từ năm 1994. Lúc đầu chỉ là một bộ đặc tả Perl. Được sử dụng để lưu dấu vết của người dùng trên các trang web. Sau đó, Ranmus Lerdorf đã phát triển PHP như là một máy đặc tả (Scripting engine). Vào giữa năm 1997, PHP đã được phát triển nhanh chóng trong sự yêu thích của nhiều người. PHP đã không còn là một dự án cá nhân của Rasmus Lerdorf và đã trở thành một công nghệ web quan trọng. Zeev Suraski và Andi Gutmans đã hoàn thiện việc phân tích cú pháp cho ngôn ngữ để PHP3 ra đời vào tháng 6 năm 1998 (phiên bản này có phần mở rộng là *.PHP3). Ngay sau đó PHP4 ra đời (phiên bản này không phải có phần mở rộng *.PHP4 mà là *.PHP). PHP bây giờ được gọi là PHP HyperText PreProcesor.PHP là ngôn ngữ đặc tả chạy ở phía Server để tạo lập các trang web độngCú pháp của PHP tương tự như ngôn ngữ Perl và C. PHP trên các phần mềm Web Server như Apacche, Microsoft’ IIS PHP là ngôn ngữ đặc tả chạy ở phía Server (Server-side), giống như ASPPHP thực hiện ở phía ServerPHP hỗ trợ kết nối với nhiều cơ sở dữ liệu như MySQL, SQL Server, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc,..PHP là phần mềm nguồn mởPHP có thể sử dụng download tự do2. File PHP

Các file PHP là các file văn bản chứa các thẻ HTML và các đặc tả (script)Các file PHP trả lại cho trình duyệt duới dạng HTMLFile PHP có phần mở rộng *.PHP

3. Tại sao phải dùng PHPPHP chạy trên nền các hệ điều hành như Windows, Linnux, Unix,..PHP chạy và được dịch trên hầu hết các phần mềm Webserver như Apache, IIS, ..PHP có thể downloat miễn phí từ địa chỉ: www.php.netPHP dễ học, dễ dùng và chạy hiệu quả trên phía Server

Để cài đặt và làm việc với PHP ta có thể download phần mềm tại các địa chỉ:

113

http://www.php.net/

Download PHP

http://w3schools.com/php

Download PHP for free here: http://www.php.net/downloads.php

Download MySQL Database

Download MySQL for free here: http://www.mysql.com/downloads/index.html

Download Apache Server

Download Apache for free here: http://httpd.apache.org/download.cgi

4. Cú pháp căn bản của PHP

Cú pháp chính trong PHP tương tự như cú pháp trong ngôn ngữ lập trình C

Một đoạn chương trình PHP có thể viết độc lập trên một trang hoặc nhúng vào tài liệu, nó được bắt đầu bởi <?PHP và kết thức bởi ?>

Cụ thể:

<?php Các lệnh PHP?>

Khi lập trình PHP phải chú ý các qui tắc như sau:

Cuối câu lệnh phải có dấu ; Biến trong PHP có tiền tố là $ Mỗi phương thức đều bắt đầu bởi { và kết thúc bởi } Khi khai báo biến thì không có kiểu dữ liệu Sử dụng dấu // hoặc # ở đầu dòng của mỗi câu chú thích Sử dụng /* và */ cho mỗi đoạn ghi chú Khai báo biến có phân biệt chữ hoa và chữ thường

Ví dụ: Đoạn chương trang in ra dòng thông báo “Hello World !!! “

<HTML><BODY><?php// Đây là đoạn chương trình in ra thông báo “Hello World !!!”echo “Hello World !!!”; /* in ra trình duyệt Hello World !!!” */?>

114

http://httpd.apache.org/download.cgi

http://www.mysql.com/downloads/index.html

http://www.php.net/downloads.php

</BODY></HTML>

Hoặc cũng có thể chỉ viết:

<?php echo “Hello World !!!”;?>

5. Khai báo biến trong PHP

Các biến trong PHP không cần phải khai báo trước, các biến khai báo không cần phải định nghĩa kiểu dữ liệu, các biến phải có tiền tố $ trước tên biến, được khai báo như sau:

$<tên biến>[=<giá trị của biến>];

Ví dụ:

<?php$txt=”Hello Worrld !!!”;$number=6;?>

1.6. Các phép toán trong PHP

Các phép toán số học

Phép toán Mô tả Ví dụ Kết quả+ Cộng (Addition) x=2

x+24

- Trừ (Subtraction) x=25-x

3

* Nhân (Multiplication) x=4x*5

20

/ Chia (Division) 15/55/2

32.5

% lấy số dư của phép chia 2 số nguyên (Modulus (division remainder))

5%210%810%2

120

++ Tăng (Increment) x=5x++

x=6

-- Giảm (Decrement) x=5 x=4

115

x--

Assignment Operators

Phép toán Ví dụ Cách viết tương tự= x=y 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 x=x%y

Các phép so sánh

Phép toán Mô tả Ví dụ

== Bằng nhau (is equal to) 5==8 returns false!= Khác nhau (is not equal) 5!=8 returns true> Lớn hơn (is greater than) 5>8 returns false< Nhỏ hơn (is less than) 5<8 returns true>= Lớn hơn hoặc bằng (is greater

than or equal to)5>=8 returns false

<= Nhỏ hơn hoặc bằng (is less than or equal to)

5<=8 returns true

Các phép logic

Phép toán Mô tả Ví dụ&& Và (and) x=6

y=3 (x < 10 && y > 1) returns true

|| Hoặc (or) x=6y=3 (x==5 || y==5) returns false

! Phủ định (not) x=6y=3 !(x==y) returns true

116

6. Các câu lệnh rẽ nhánh

a) Câu lệnh If...Else

Cú pháp:

Dạng khuyết:

if (bt logic) <câu lệnh>;

Tác động: Nếu (bt logic) có giá trị true (đúng) thì thực hiện <câu lệnh> và sau đó thực hiện câu lệnh sau if , ngược lại bỏ qua không thực hiện <câu lệnh> và sau đó thực hiện câu lệnh sau if

Dạng đủ:

if (BT logic) <Câu lệnh 1>; Else <Câu lệnh 2>;

Hoặc:if (BT logic 1) <Câu lệnh 1>; Elseif (BT logic 2) <Câu lệnh 2>;

Else <Câu lệnh 3>;

Tác động: Nếu (Bt logic) có giá trị true (đúng) thì thực hiện <câu lệnh 1>, ngược lại thực hiện <câu lệnh 2>;

Trong đó: <Câu lệnh>, <Câu lệnh 1>, <Câu lệnh 2>, <Câu lệnh 3> có thể là lệnh đơn hay lệnh ghép. Nếu là lệnh ghép phải được đặt trong cặp dấu { };

Ví dụ 1:

<html><body><?php$d=date("D");if ($d=="Fri") { echo "Hello!<br />"; echo "Have a nice weekend!"; echo "See you on Monday!";

117

}?></body></html>

Ví dụ 2:<html><body><?php$d=date("D");if ($d=="Fri") echo "Have a nice weekend!"; else echo "Have a nice day!"; ?></body></html>

Ví dụ 3: <html><body><?php$d=date("D");if ($d=="Fri") echo "Have a nice weekend!"; elseif ($d=="Sun") echo "Have a nice Sunday!"; else echo "Have a nice day!"; ?></body></html>

b) Câu lệnh Switch

Cú pháp:

switch (Biểu thức){case <hằng 1>: <Câu lệnh 1>; break; case <Hằng 2>: <Câu lệnh 2>;

118

break;...Case <Hằng n>: <Câu lệnh n>; Break; default: <Câu lệnh n+1);}

Tác động: Khi gặp lậnh này máy tính giá trị của (biểu thức), sau đó đem so sánh giá trị của biểu thức với các hằng. Nếu giá trị của biểu thức bằng <hằng i>(i=1,2,..,n) thì thực hiện <câu lệnh i> và thoát. Trường hợp giá trị của biểu thức không bằng hằng nào cả thì thực hiện <câu lệnh n+1>.

Ví dụ: <html><body><?phpswitch ($x){case 1: echo "Number 1"; break;case 2: echo "Number 2"; break;case 3: echo "Number 3"; break;default: echo "No number between 1 and 3";}?></body></html>

7.Các câu lệnh lặp

Trong PHP có các câu lệnh lặp sau:

Câu lệnh while Câu lệnh do...while Câu lệnh for Câu lệnh foreach

119

a) Câu lệnh while

Cú pháp:

While (Bt logic)

<Câu lệnh>;

Tác động: Khi gặp lệnh này máy kiểm tra (BT logic), nếu (BT logic) đúng thì thực hiện <câu lệnh> và quay lại kiểm tra (BT logic), nếu (BT logic) sai thì thoát khỏi.

Ví dụ:<html><body><?php $i=1;while($i<=5) { echo "The number is " . $i . "<br />"; $i++; }?></body></html>

b) Câu lệnh do … whileCú pháp: do { <Câu lệnh>; } While (BT logic);Tác động: Khi gặp lệnh này máy thực hiện câu lệnh, sau đó kiểm tra (BT logic). Nếu (BT logic) có giá trị True thì quay lại thực hiện câu lệnh, nếu (BT logic ) có giá trị false thì thoát khỏi vòng lặp.

Ví dụ:<html><body><?php $i=0;do {

120

$i++; echo "The number is " . $i . "<br />"; }while ($i<5);?></body></html>

c) Câu lệnh for Cú pháp:

for (<biến DK>=<Giá trị đầu>; <BT logic>; <Biểu thức 2>) {

<câu lệnh>;}

Trong đó: - <BT logic>: biểu thức logic - <Biểu thức 2> : biểu thức dùng để thay đổi giá trị của biến điều khiểnTác động: khi gặp lệnh này sẽ gán giá trị ban đầu vào cho biến điều khiển, sau đó thực hiện <câu lệnh>, thực hiện biểu thức <Biểu thức 2> sau đó kiểm tra <BT logic>. Nếu <BT logic> có giá trị đúng thì quay về đầu vòng lặp, ngược lại thoát khỏi vòng lặp

Ví dụ:

<html><body><?phpfor ($i=1; $i<=5; $i++){ echo "Hello World!<br />";}?></body></html>

d) Câu lệnh foreachCâu lệnh foreach được sử dụng đối với các mảng dữ liệuCú pháp:

foreach (<tên mảng> as $value){ <các câu lệnh> ;

}

121

Tác động: Các câu lệnh được lặp đi lặp lại với số lần lặp bằng số các phần tử của mảng

Ví dụ: đoạn chương trình sau đây in ra các phần tử của mảng

<html><body><?php$arr=array("one", "two", "three");foreach ($arr as $value){ echo "Value: " . $value . "<br />";}?></body>

</html>

8. Kiểu dữ liệu trong PHP

Trong PHP có các kiểu dữ liệu thông dụng sau:Kiểu dữ liệu logic: Boolean có giá trị true hoặc falseKiểu dữ liệu số nguyên: integer giá trị lơn xấp xỉ 2 tỷKiểu dữ liệu số thực: float ~1.8e308 gồm 14 số lẻKiểu xâu ký tự: stringKiểu đối tượng: objectKiểu dữ liệu mảng: array

3.1. Thay đổi kiểu dữ liệuĐể thay đổi kiểu dữ liệu, bạn có thể sử dụng cách ép kiểu như trong các

ngôn ngữ lập trình C hay Java. Chẳng hạn, khai báo ép kiểu như ví dụ sau:<HTML><HEAD><TITLE>::Welcome to PHP</TITLE></HEAD><BODY><h4>Variable</h4><?php$i="S10A";echo $i+10;echo "<br>";$i="10A";$j=(float)$i;$j+=10;echo $i;

122

echo "<br>";echo $j;echo "<br>";$q=12;$p=5;echo "Amount: ".(float)$q/$p;?></BODY></HTML>

Lưu ý rằng, PHP tự động nhận biết giá trị chuỗi đằng sau số sẽ không được chuyển sang kiểu dữ liệu số như trường hợp trên.Ngoài ra, bạn có thể sử dụng hàm settype để chuyển đổi dữ liệu này sag dữ liệu khác, ví dụ chúng ta khai báo như ví dụ sau (settype.php).

<HTML><HEAD><TITLE>::Welcome to PHP</TITLE></HEAD><BODY><h4>Change DataType of Variable</h4><?php$var="12-ABC";$check=true;echo $var;echo "<br>";echo $check;echo "<br>";settype($var,"integer");echo $var;echo "<br>";settype($check,"string");echo $check;?></BODY></HTML>

9. Kiểu dữ liệu mảng

Mảng trong PHP là tập hợp các biến nhớ có cùng tên và phân biệt với nhau qua chỉ số

a) Mảng một chiều

Ta có thể khai báo mảng một chiều như sau:123

$<tên mảng>=array(“Phần tử 1”,”Phần tử 2”,…,”Phần tử n”);Hoặc$<tên mảng>[]=array(n);Trong đó: n – là số phần tử của mảngSố thứ tự của mảng bắt đầu bởi 0;Ví dụ 1:

<?php$myarray=array("Peter","Quagmire","Joe");for ($i=0;$i<3;$i++){echo $myarray[$i]." <br>";}?>

Ví dụ 2:

<?php$myarray=array(3);$myarray[0]=”Peter”;$myarray[1]=”Quagmire”;$myarray[2]=”Joe”;for ($i=0;$i<3;$i++){echo $myarray[$i]." <br>";}?>

Ví dụ 3:

<?php$myarray=array(”Peter”,”Quagmire”,”Joe”);$myarray['Peter']=30;$myarray['Quagmire']=40;;$myarray['Joe']=50;$tong= $myarray['Peter']+$myarray['Quagmire']+$myarray['Joe'];echo "Tong cua 3 phan tu = ".$tong;?>

b). Mảng nhiều chiều (2 chiều)Khai báo mảng 2 chiều

$<tên mảng>[][]=array(m,n)Trong đó m, n là các số nguyênVí dụ :

124

<?phpecho “<h4>Mảng 2 chiều</h4>”;$myarrs[][]=array(3,4);// khoi tạo$k=0;for ($i=0;$i<3;$i++)for ($j=0;$j<4;$j++){ $k+=1; $myarrs[$i][$j]=$k;}// in tafor ($i=0;$i<3;$i++){ for ($j=0;$j<4;$j++) echo $myarrs[$i][$j]." "; echo "<br>";}?>

10. FORM

FORM là thành phần quan trọng trọng các trong HTML để người dùng cập nhật thông tin gửi đến SERVER. Chương trình xử lý các thông tin trên FORM thường là các chường trình viết bằng ASP (đối với IIS), PHP đối với các máy chạy Apache.

Ví dụ về FORM

<html><body><form action="welcome.php" method="post">Name: <input type="text" name="name" />Age: <input type="text" name="age" /><input type="submit" /></form></body></html>

File "welcome.php" xử lý các thông tin trên FORM

<html><body>Welcome <?php echo $_POST["name"]; ?>.<br />

125

You are <?php echo $_POST["age"]; ?> years old.</body></html>

Biến $_GET

Biến $_GET trả lại giá trị theo tên từ FORM được gửi theo phương thức GET

Ví dụ:

<form action="welcome.php" method="get">Name: <input type="text" name="name" />Age: <input type="text" name="age" /><input type="submit" /></form>

Để lấy lại giá trị của các tên "name" và "age" ta có thể viết:Welcome <?php echo $_GET["name"]; ?>.<br />You are <?php echo $_GET["age"]; ?> years old!

Biến $_REQUEST

Trong PHP biến $_REQUEST chứa các nội dung của $_GET, $_POST, và $_COOKIE được gửi theo phương thức GET và POST

Ví dụ:

Welcome <?php echo $_REQUEST["name"]; ?>.<br />

You are <?php echo $_REQUEST["age"]; ?> years old!

Biến $_POST

Biến $_GET trả lại giá trị theo tên từ FORM được gửi theo phương thức POST

Ví dụ:

<form action="welcome.php" method="post">Name: <input type="text" name="name" />Age: <input type="text" name="age" /><input type="submit" /></form>

Để lấy lại giá trị của các tên "name" và "age" ta có thể viết:

126

Welcome <?php echo $_POST["name"]; ?>.<br />You are <?php echo $_POST["age"]; ?> years old!

11. Hàm trong PHP

Khai báo hàm:Hàm trong PHP có cấu trúc như sau:

function <tên hàm>(<danh sách các tham số nếu có>){ Thân của hàm ;}

Trong đó: tên hàm là một dãy ký tự phải được bắt đầu bởi chữ cái hoặc dấu gạch nối dưới (_)

Sử dụng hàm: muốn sử dụng hàm ở nơi nào ta chỉ cần gọi <tên hàm>( < Danh sách các tham số thực nếu có>)

Ví dụ: <html><body><?phpfunction writeMyName() { echo "Trần Văn Nam"; }Echo “Tên tôi là : “;writeMyName();?></body></html>

Cũng giống như các hàm trong C, các tham số hình thức được khai báo trong phần dấu ngợc ( ) sau tên của hàm. Các tham số thực chuyền vào có thể là giá trị hoặc biến.Ví dụ:

<html><body><?phpfunction writeMyName($fname,$punctuation) {

127

echo $fname . " Refsnes" . $punctuation . "<br />"; }echo "My name is ";writeMyName("Kai Jim",".");echo "My name is ";writeMyName("Hege","!");echo "My name is ";writeMyName("Ståle","...");?></body></html>

Hàm trả lại giá trị thông qua tên của hàm

Ví dụ:

<html><body><?phpfunction add($x,$y) { $total = $x + $y; return $total; }echo "1 + 16 = " . add(1,16);?></body></html>

Một số hàm thường dùng:

Hàm Date() trong PHP

Cú pháp:

date(format)

Trong đó: Tham số Format: định dạng ngày

d - Ngày trong tháng (01-31) m - Tháng hiện tại (01-12) Y - Năm hiện tại

Các ký hiệu "/", ".", "-" để ngăn cách giứa ngày, tháng, năm

128

Ví dụ:

<?phpecho date("d/m/y");echo "<br />";echo date("d.m.y");echo "<br />";echo date("d-m-y");?>

Hàm include()

Hàm include() để chèn nội dung của một file vào một file PHP trước khi SERVER thực hiện

Giả sử ta có một fie header.php ta muốn chèn nó vào một file PHP ta thực hiện như sau:

Ví dụ :

<html><body><?php include("header.php"); ?><h1>Welcome to my home page</h1><p>Some text</p></body></html>

Hàm require(); tương tự như hàm include

Mở một file

Hàm fopen() đượca sử dụng để mở file trong PHP

Cú pháp:

Fopen(<tên file>,<modes>)

Ví dụ:

<html><body><?php$file=fopen("welcome.txt","r");?>

129

</body></html>

Các modes được xác định như sau:

Modes Mô tả

r Read only.

r+ Read/Write.

w Write only.

w+ Read/Write. Mở và xóa nội dung của file; hoặc tạo lập file mới nếu file chưa tồn tại.t

a Append. Mở và ghi vào cuối file hoặc tạo file mới nếu file chưa tồn tại.

a+ Read/Append.

x Write only. Tạo lập file mới. Trả lại FALSE và lỗi nếu file đã tồn tại

x+ Read/Write. Tạo file mới. Trả lại FALSE và lỗi nếu file đã tồn tại

Đóng một fileHàm fclose() được dùng để đóng một file đã mở

<?php$file = fopen("test.txt","r");//some code to be executedfclose($file);?>

Kiểm tra cuối một fileHàm feof() kiểm tra đã ở cuối file hay chưa.

if (feof($file)) echo "End of file";

Đọc các dòng trong một file

Hàm fgets() được sử dụng để đọc đọc một dòng từ file.

Ví dụ:

<?php

130

$file = fopen("welcome.txt", "r") or exit("Unable to open file!");//Output a line of the file until the end is reachedwhile(!feof($file)) { echo fgets($file). "<br />"; }fclose($file);

?>

Đọc các ký tự từ một file:

Hàm fgetc() được sử dụng để đọc từng ký tự từ một file.

Ví dụ:

<?php$file=fopen("welcome.txt","r") or exit("Unable to open file!");while (!feof($file)) { echo fgetc($file); }fclose($file);

?>

Tham chiếu hệ thống file

a) Tạo form Upload-File

Để tạo một FORM upload-file ta dùng thuộc tính enctype:enctype="multipart/form-data"Thuộc tính type của thành phần <input>Type="file"

Ví dụ:

<html><body><form action="upload_file.php" method="post"enctype="multipart/form-data"><label for="file">Filename:</label><input type="file" name="file" id="file" /> <br />

131

<input type="submit" name="submit" value="Submit" /></form></body></html>

b) Tạo lập Upload Script

File "upload_file.php" cho biết thông tin về một file đã được Upload:

<?phpif ($_FILES["file"]["error"] > 0) { echo "Error: " . $_FILES["file"]["error"] . "<br />"; }else { echo "Upload: " . $_FILES["file"]["name"] . "<br />"; echo "Type: " . $_FILES["file"]["type"] . "<br />"; echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />"; echo "Stored in: " . $_FILES["file"]["tmp_name"]; }?>

12. PHP VÀ DATABASE

Để kết nối cơ sở dữ liệu mySQL trong PHP, chúng ta có nhiều cách ứng với nhiều phương thức kết nối cơ sở dữ liệu, trong phần này chúng ta tập trung tìm hiểu cách kết nối cơ sở dữ liệu mySQL từ PHP bằng chính gói của nó.

Những vấn đề chính sẽ được đề cập trong bài học này Khai báo kết nối cơ sở dữ liệu Thêm mẩu tin Cập nhật mẩu tin. Xoá mẩu tin Truy vấn dữ liệu

1. Kết nối cơ sở dữ liệuĐể kết nối cơ sở dữ liệu mySQL bạn sử dụng khai báp như sau:

<?php $link = mysql_connect ("localhost", "root", "") or die ("Could not connect to MySQL Database"); mysql_select_db("TestDB", $link); ?>

132

Trong đó khai báo sau là kết nối cơ sở dữ liệu mySQL với tên server/ip cùng với username vá password:

mysql_connect ("localhost", "root", "") Và mysql_select_db("TestDB", $link); với TestDB là tên của cơ sở dữ liệu, để chọn tên cơ sở dữ liệu sau khi mở kết nối cơ sở dữ liệu, nếu biến $link có giá trị là false thì kết nối cơ sở dữ liệu không thành công.

Sau khi mở kết nối cơ sở dữ liệu mà không sử dụng bạn có thể đóng kết nối cơ sở dữ liệu với cú pháp như sau:

mysql_close($link); Chẳng hạn, bạn khai báo trang connection.php để kết nối cơ sở dữ liệu và

đóng kết nối ngay sau khi mở thành công. <HTML>

<HEAD> <TITLE>::Welcome to PHP and mySQL</TITLE> </HEAD> <BODY> Mo va dong ket noi CSDL MySQL <?php $link = mysql_connect ("localhost", "root", "") or die ("Could not connect to MySQL Database"); mysql_select_db("InterShop", $link); mysql_close($link);

</BODY> </HTML>

2. Thêm mẩu tinĐể thêm mẩu tin, bạn sử dụng hàm mysql_query(chuỗi Insert). Chẳng hạn,

chúng ta khai báo trang insert.php để thêm mẩu tin vào bảng tblSV có hai cột dữ liệu là Masv và TenSV như ví dụ trong trang insert.php. <HTML>

<HEAD> <TITLE>::Welcome to PHP and mySQL</TITLE> </HEAD> <BODY> <h3>Them mau tin</h3> <?php require("dbcon.php"); $sql="insert into SV values('sv001','Nguyễn Thị Trang')"; $result = mysql_query($sql,$link); $affectrow=0; if($result) $affectrow=mysql_affected_rows(); mysql_close($link); ?>

133

So mau tin them vao<?= $affectrow?> </BODY> </HTML> Trong đó, bạn sử dụng hàm mysql_query với hai tham số là $sql và $link.

Kết quả trả về là số mẩu tin thực thi. Ngoài ra, bạn có thể sử dụng đoạn kết nối cơ sở dữ liệu trong tập tin dbcon.php như ví dụ sau: <?php

$link = mysql_connect ("localhost", "root", "") or die ("Could not connect to MySQL Database"); mysql_select_db("Test", $link); ?> Trong trường hợp cho phép người sử dụng thêm mẩu tin thì bạn thiết kế

form yêu cầu người sử dụng nhập hai giá trị sau đó submit đến trang kế tiếp để thực thi việc thêm gt sau đó submit đến trang kế tiếp để thực thi việc thêm giá trị vừa nhập vào cơ sở dữ liệu như hình 9-1.

Thêm mẩu tin Để làm điều này, trước tiên bạn khai báo trang them.php, trong đó khai báo đoạn javascript để kiểm tra dữ liệu nhập như sau: <SCRIPT language=JavaScript> function checkInput() { if (document.frmPHP.txtID.value=="") { alert("Invalid ID, Please enter ID"); document.frmPHP.txtID.focus(); return false; } if (document.frmPHP.txtName.value=="") { alert("Please enter Name"); document.frmPHP.txtName.focus(); return false; } return true; } </script>

Kế đến khai báo thể form và hai thẻ input lại text yêu cầu người sử dụng nnập ID và Name như sau: <form name="frmPHP" method="post" action="doinsert.php" onsubmit="return checkInput();"> <tr> <td align="left" class="content-sm"><b> Please enter ID and Name </b></td> </tr> <tr> <td align="left" >ID:</td> </tr> <tr> <td align="left"> <input type="text" name="txtID" size="25" maxlength="3" class="textbox"> </td>

tr> <tr> <td align="left" >Name:</td> </tr> <tr> <td align="left" > <input type="text" name="txtName" size="25" maxlength="50" class="textbox"> </td> </tr> <tr> <td align="left" valign="top"> <br> <input type="submit"

134

value="Submit" class="button"> <input type="reset" value="Reset" class="button"> </td> </tr> </form> Lưu ý rằng, bạn khai báo số ký tự lớn nhất cho phép nhập bằng với kích

thước đã khai báo trong cơ sở dữ liệu ứng với thuộc tính maxlength. Khi người sử dụng nhập hai giá trị và nhấn nút submit, trang kế tiếp đựơc

triệu gọi. Trang này lấy giá trị nhập bằng cách sử dụng biến form hay $HTTP_POST_VARS. Đối với trường hợp này chúng ta sử dụng biến form như trang doinsert.php. <HTML>

<HEAD> <TITLE>::Welcome to PHP and mySQL</TITLE> </HEAD> <BODY> <h3>Them mau tin</h3> <?php $affectrow=0; require("dbcon.php"); $sql="insert into tblships(ShipID,ShipName) "; $sql .=" values('".$txtID."','".$txtName."')"; $result = mysql_query($sql,$link); if($result) $affectrow=mysql_affected_rows(); mysql_close($link); ?> So mau tin them vao<?= $affectrow?> </BODY> </HTML>

3. CẬP NHẬT MẨU TIN Đối với trường hợp cập nhật mẩu tin, bạn cũng sử dụng hàm mysql_query

với phát biểu Update thay ví Insert như trên, ví dụ chúng ta khai báo trang update.php để cập nhật mẩu tin trong bảng tblShips với tên là UpdateTesting khi mã có giá trị là A01. <HTML>

<HEAD> <TITLE>::Welcome to PHP and mySQL</TITLE> </HEAD> <BODY> <h3>Cap nhat mau tin</h3> <?php

135

require("dbcon.php"); $sql="Update tblships set ShipName='UpdateTesting' "; $sql.=" where ShipID='A01'"; $result = mysql_query($sql,$link); $affectrow=0; if($result)

affectrow=mysql_affected_rows(); mysql_close($link); ?> So mau tin cap nhat <?= $affectrow?> </BODY> </HTML> Lưu ý rằng, để biết số mẩu tin đã thực thi bởi phát biểu SQL bạn sử dụng

hàm mysql_affected_rows. if($result)

$affectrow=mysql_affected_rows(); Tương tự như trên, bạn có thể thiết kế form cho phép người sử dụng cập nhật

dữ liệu bằng cách thiết kế form yêu cầu người sử dụng nhập mã và tên cập nhận. Trước tiên thiết kế from cho phép nhập dữ liệu để cập nhật như ví dụ trang

capnhat.php, sau khi học phần truy vấn xong, thaqy vì nhập mã bạn cho phép người sử dụng chọn trong danh sách đã có như hình 9-

Sau khi người sử dụng nhấn nút submit, trang doupdate.php sẽ triệu gọi, kết quả trả về 1 hay 0 mẩu tin. <HTML>

<HEAD> <TITLE>::Welcome to PHP and mySQL</TITLE> </HEAD> <BODY> <h3>Cap nhat mau tin</h3> <?php $affectrow=0; require("dbcon.php"); $sql="update tblships set ShipName='"; $sql .=$txtName."' where ShipID='".$txtID."'"; $result = mysql_query($sql,$link); if($result) $affectrow=mysql_affected_rows(); mysql_close($link); So mau tin cap nhat <?= $affectrow?>

136

</BODY> </HTML>

4. XOÁ MẨU TIN Tương tự như vậy khi xoá mẩu tin, bạn chỉ thay đổi phát biểu SQL dạng

Delete như ví dụ trong tập tin delete.php. <HTML>

<HEAD> <TITLE>::Welcome to PHP and mySQL</TITLE> </HEAD> <BODY> <h3>Xoa mau tin</h3> <?php require("dbcon.php"); $sql="Delete From tblships where ShipID='A01'"; $result = mysql_query($sql,$link); $affectrow=0; if($result) $affectrow=mysql_affected_rows(); mysql_close($link); ?> So mau tin da xoa <?= $affectrow?>

</BODY> </HTML>

So mau tin cap nhat <?= $affectrow?> </BODY> </HTML>

4. TRUY VẤN DỮ LIỆU Để truy vấn dữ liệu bạn sử dụng hàm mysql_num_rows để biết được số mẩu

tin trả về và hàm mysql_fetch_array để đọc từng mẩu tin và mảng sau đó trình bày giá trị từ mảng này. Chẳng hạn, chúng ta tạo một tập tin lietke.php dùng để liệt kê danh sách mẩu tin trong bảng tblShips như hình 9-

Để làm điều này, bạn khai báo đoạn chương trình đọc bảng dữ liệu tương tự như ví dụ sau: <?php

require("dbcon.php"); $totalRows = 0; $stSQL ="select * from tblShips"; $result = mysql_query($stSQL, $link); $totalRows=mysql_num_rows($result); ?> Sau đó, dùng hàm mysql_fetch_array để đọc từng mẩu tin và in ra như sau:

137

<?php if($totalRows>0) { $i=0; while ($row = mysql_fetch_array ($result)) { $i+=?> <tr valign="top"> <td> <?=$row["ShipID"]?> </td> <td ><?=$row["ShipName"]?></td> </tr>

Trong tröôøng hôïp soá maåu tin traû veà laø 0 thì in ra caâu thoâng baùo khoâng tìm thaáy nhö sau: <?php

} }else{ ?> <tr valign="top"> <td > </td> <td > <b><font face="Arial" color="#FF0000"> Oop! Ship not found!</font></b></td> </tr> <?php

138

i · web viewsoẠn thẢo siÊu vĂn bẢn 1.1. trang mã nguồn html và trang web trang mã...

Documents