Bài giảng môn lập trình mạng

Tài liệu này dành cho sinh viên, giáo viên khối ngành công nghệ thông tin tham khảo và có những bài học bổ ích hơn, bổ trợ cho việc tìm kiếm tài liệu, giáo án, giáo trình, bài giảng các môn học khối ngành công nghệ thông tin

Trang 1

MỤC LỤC

Chương 1- Mở đầu 4

1.1 Mạng máy tính và lịch sử phát triển 4

1.2 Mô hình WWW (world wide web) và các dịch vụ liên quan 4

1.3 Thế nào là trang web tĩnh, trang web động 4

1.4 Các bước phát triển của web 5

1.5 Các công cụ và công nghệ thiết kế web 5

Chương 2- Ngôn ngữ HTML 6

2.1 Thẻ (tag) HTML là gì? 6

2.2 Cấu trúc của một trang HTML 6

2.3 Các thẻ định cấu trúc tài liệu 6

2.4 Các thẻ định dạng 7

2.5 Thẻ tạo link (liên kết) 8

2.6 Thẻ tạo frame (khung) 8

2.7 Thẻ tạo Form 9

2.8 Thẻ tạo đối tượng FORM 9

2.9 Thẻ Marquee-tạo chữ chạy 11

2.10 Các thẻ tạo bảng 11

2.11 Một số thẻ Multimedia 11

2.12 Bảng mã và tên gọi trong HTML của một số ký tự đặc biệt 13

2.13 Thiết kế web sử dụng Microsoft Frontpage 13

2.13.1 Các thao tác chính khi soạn thảo một trang web 13

2.13.2 Tạo các thành phần của trang web 14

2.14 Bài tâp thực hành 15

2.14.1 Tạo trang web cho nhóm 15

2.14.2 Tham khảo các site 16

2.14.3 Thiết kế websitte theo các mẫu 17

Chương 3- Ngôn ngữ kịch bản Javascript 22

3.1 Tổng quan về JavaScript 22

3.2 Nhúng JavaScript vào trang tài liệu HTML 22

3.2.1 Sử dụng thẻ <SCRIPT> 22

3.2.2 Sử dụng một file nguồn JavaScript 23

3.2.3 Sử dụng thẻ <Noscript> 23

3.3 Hiển thị dòng Text 23

3.4 Giao tiếp với người sử dụng 24

3.5 Khai báo biến 25

3.6 Kiểu dữ liệu 25

3.6.1 Kiểu nguyên (INTERGER) 25

3.6.2 Kiểu dấu phNy động (FLOATIN G POIN T) 25

3.6.3 Kiểu LOGIC (BOOLEAN ) 25

3.6.4 Kiểu chuỗi (STRIN G) 25

3.7 Các toán tử 26

3.8 Cấu trúc lệnh 27

3.8.1 Câu lệnh rẽ nhánh 27

3.8.2 Câu lệnh lặp 28

3.8.3 Câu lệnh break và continue 29

3.9 Hàm 29

3.9.1 Khai báo hàm 29

3.9.2 Các hàm có sẵn 29

3.10 Các lệnh thao tác trên đối tượng 29

3.10.1 for … in 29

Trang 2

3.10.2 new 30

3.10.3 this 31

3.10.4 with 31

3.11 Khai báo dữ liệu kiểu mảng 32

3.12 Xử lý sự kiện 32

3.13 Các đối tượng trong Javascript 36

3.13.1 Đối tượng navigator 37

3.13.2 Đối tượng window 38

3.13.3 Đối tượng location 40

3.13.4 Đối tượng frame 40

3.13.5 Đối tượng DOCUMEN T 43

3.13.6 Đối tượng anchors 44

3.13.7 Đối tượng FORMS 44

3.13.8 Đối tượng HISTORY 45

3.13.9 Đối tượng LIN KS 46

3.13.10 Đối tượng MATH 46

3.13.11 Đối tượng DATE 47

3.13.12 Đối tượng STRIN G 48

3.13.13 Xem lại các lệnh và mở rộng 49

3.14 Mô hình đối tượng (OBJECT MODEL) 51

3.14.1 Đối tượng và thuộc tính 51

3.14.2 Tạo các đối tượng mới 52

3.15 Bài tập thực hành 57

3.15.1 Bài Tập 1 57

3.15.2 Bài tập 2 57

3.15.3 Bài tập 3 57

3.15.4 Bài tập 4 58

3.15.5 Bài tập 5 59

3.15.6 Bài tập 6 60

3.15.7 Bài tập 7 62

3.15.8 Bài tập 8 63

3.15.9 Bài tập 9 64

3.15.10 Bài tập 10 65

3.15.11 Bài tập 11 66

3.15.12 Bài tập 12 67

3.15.13 Bài tập 13 69

3.15.14 Bài tập 15 70

3.15.15 Bài tập 15 70

3.15.16 Bài tập 16 71

3.15.17 Bài tập 17 72

3.15.18 Bài tập 18 72

Chương 4- Lập trình web động với ASP (Active Server Page) 75

4.1 Giới thiệu ngôn ngữ lập trình web động ASP 75

4.2 Web Server IIS 76

4.3 Cài đặt và chạy ứng dụng ASP đầu tiên 79

4.3.1 Cấu hình cho Website trên IIS 80

4.3.2 Viết các file ASP 81

4.3.3 Dùng trình duyệt truy cập website 81

4.4 Tóm tắt các cú pháp VBScript 84

4.4.1 Response.write 85

4.4.2 Biến 85

4.4.3 Mảng 85

Trang 3

4.4.4 Ghép chuỗi 85

4.4.5 Hàm có sẵn 86

4.4.6 Rẽ nhánh 88

4.4.7 Lặp 88

4.4.8 Điều kiện and ,or, not 89

4.4.9 Thủ tục và hàm người dùng 89

4.4.10 Sử dụng #include 91

4.5 Các đối tượng căn bản 91

4.5.1 Đối tượng Request 91

4.5.2 Response 93

4.5.3 Đối tượng Session 93

4.5.4 Đối tượng Application 94

4.5.5 File Global.asa 95

4.5.6 Đối tượng Dictionary 96

4.5.7 Đối tượng Server 96

4.5.7.1 Server.CreateObject 96

4.5.7.2 Server.Mappath 97

4.6 Sử dụng Database với ASP 97

4.6.1 Các cú pháp căn bản để truy xuất dữ liệu từ DB 97

4.6.2 Đối tượng Connection 97

4.6.3 Đối tượng Recordset 98

4.6.4 Tìm kiếm dữ liệu trong database 101

PHỤ LỤC 102

Phụ lục 1: Bài tập truy nhập các điều khiển trên Form 102

Phụ lục 2: Thiết kế form đăng nhập cho phép lưu lại tên tài khoản và mật khNu 104

Phụ lục 3: Hiển thị ảnh quảng cáo và số lượt truy cập 107

Phụ lục 4: Bài tập ADO, Phân trang với Recordset 108

Trang 4

o Mạng trong Bộ quốc phòng của Mỹ

o Triển khai nghiên cứu tại các trường Đại học ở Mỹ

o Phát triển trên các châu lục và trở thành mạng Internet

- Việt N am chính thức kết nối internet tháng 12/1997

1.2 Mô hình WWW (world wide web) và các dịch vụ liên quan

1.3 Thế nào là trang web tĩnh, trang web động

- Trang web tĩnh là trang web mà nội dung của nó được chuNn bị sẵn trên Server Khi người sử dụng yêu cầu thì toàn bộ nội dung của trang sẽ được gửi về trình duyệt của máy khách

o Ví dụ:

o Các ưu, nhược điểm của web tĩnh

- Trang web động là trang web mà nội dung của nó không được chuNn bị sẵn trên server, nó chỉ được tạo ra khi người sử dụng yêu cầu Server khi nhận được yêu cầu từ Client sẽ thực hiện truy vấn dữ liệu từ CSDL (trên server hoặc từ server khác) theo yêu cầu, sau đó kết xuất tạo thành nội dung của trang và gửi về trình duyệt máy Client

để xử lý tiếp

o Ví dụ:

o Các ưu, nhược điểm cuae web động

Trang 5

1.4 Các bước phát triển của web

- Website truyền thống: Không có sự quản lý, phân loại thông tin rõ ràng vì thế rất khó khăn trong việc tra cứu tìm kiếm thông tin

- Website thông minh: Có sự quản lý và phân loại thông tin nên rất dễ dàng trong việc tra cứu, tìm kiếm thông tin

- Portal (cổng): Mọi yêu cầu của người dùng đều có thể thực hiện trên web Portal Hiện nay đa phần các web được xây dựng theo công nghệ Portal Portal được chia làm 2 loại: Portal cổng ngang và Portal cổng dọc

o Portal cổng ngang: phục vụ những người có khả năng sử dụng máy tính và Internet Ví dụ: www.yahoo.com

o Portal cổng dọc: phục vụ một nhóm người trong một phạm vi công việc nào

đó Ví dụ: Cổng thông tin điện tử hỗ trợ giao dịch, nghiệp vụ, kỹ thuật, … giữa các nhà điều hành của một công ty với các nhân viên trong cơ quan

- Chú ý hiểu và phân biệt các khái niệm

o Cổng thông tin điện tử

Trang 6

Chương 2- Ngôn ngữ HTML

2.1 Thẻ (tag) HTML là gì?

Để biểu diễn thông tin trên trang web, www sử dụng ngôn ngữ HTML để trình bày thông tin Mỗi thông tin chi tiết sẽ được trình bày và định dạng dựa vào một cặp thẻ (tag) HTML tương ứng

- Mỗi cặp thẻ bao gồm: thẻ mở và thẻ đóng Tên thẻ mở và thẻ đóng giống nhau và được đặt tỏng cặp dấu <tên thẻ>

- Trong thẻ mở có thể có thêm các tham số phía sau tên thẻ

- Trong thẻ đóng có thêm dấu / phía trước tên thẻ

- Dữ liệu cần trình bày đặt trong cặp thẻ mở và thẻ đóng

- Có một số thẻ không nhất thiết phải viết cả thẻ đóng

- Có thể đặt các cặp thẻ HTML lồng nhau

Cấu trúc chung của một thẻ (tag) HTML như sau:

<Ten_The thamso1=giatri1 thamso2=giatri2 …> Thông tin cần trình bày </Ten_The>

Ví dụ:

<B>chữ đậm</B>

<I>chữ nghiêng</I>

<B><I>chữ vừa đậm vừa nghiêng</I></B>

2.2 Cấu trúc của một trang HTML

Trang 7

- <SUP>chỉ số trên</SUP>,<SUB>chỉ số dưới</SUB>

- Căn lề văn bản trên trang web: tham số ALIGN , thẻ <CEN TER>

- Định dạng Font chữ:

+ Dùng thẻ META

Thẻ này đặt trong cặp thẻ <HEAD>

+ Thẻ <FON T> </FON T>:

Các thuộc tính:

size="number" size="2" Defines the font size size="+number" Size="+1" Increases the font size size="-number" Size="-1" Decreases the font size face="face-name" face="Times" Defines the font-name

color="color-value" color="#eeff00" Defines the font color

color="color-name" color="red" Defines the font color

This is another paragraph

</font>

Trang 8

</p>

- <HR> tạo dòng kẻ ngang

2.5 Thẻ tạo link (liên kết)

Trong đó:

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

- N AME Đặt tên cho vị trí đặt thẻ

- TABLEIN DEX Thứ tự di chuyển khi ấn phím Tab

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

- TARGET Mở trang Web đ-ợc liên trong một cửa sổ mới (_blank) hoặc

trong cửa sổ hiện tại (_self), trong một frame (tên frame)

Ghi chú:

N ếu đặt thuộc tính href= của thẻ <a> giá trị mailto:address@domain thì khi kích hoạt kết nối

sẽ kích hoạt chức năng thư điện tử của trình duyệt

2.6 Thẻ tạo frame (khung)

Có thể thực hiện việc chia cửa sổ trình duyệt ra làm nhiều khung khác nhau gọi là frame Trong mỗi khung cho phép hiển thị một trang web khác nhau

</frameset>

<body>

Trang 9

<p>This page uses frames, but your browser doesn't support them.</p>

- Thẻ <FRAME> dùng để tạo ra các FRAME cụ thể

- <FRAMESETS> được viết để chứa các thẻ <FRAME> trong nó (ít nhất 2 FRAME trở lên)

- <N OFRAMES> để hiển thị thông báo trong trường hợp trình duyệt không hỗ trợ FRAME

- Lưu ý cách truyền giá trị cho thuộc tính TARGET

2.7 Thẻ tạo Form

Để tạo ra một form trong tài liệu HTML, chúng ta sử dụng thẻ FORM với cú pháp như

sau:

Trong đó:

2.8 Thẻ tạo đối tượng FORM

Các đối tương form bao gồm: Ô nhập văn bản 1 dòng, Ô nhập văn bản nhiều dòng, Radio, Checkbox, Button, Drop down, List, …

9 Cú pháp thẻ <Input>

Trang 10

Ví dụ:

Kết quả:

9 Cú pháp thẻ <Select>

Trang 11

- Direction: định hướng chuyển động: up|down|left|right

- Width, Hight: độ rộng, cao qui định phạm vi hiển thị văn bản

- Align: canh văn bản: Center, middle, bottom

- Hiển thị một trang web

</object>

- Nghe (play) 1 file âm thanh, video với trình media trên web

Ví dụ 1:

Trang 12

<EMBED src=”bookmark.swf” quality=hight BgClolor=”#FFFFFF” Width=550

Height=400 name=”Preloader” Align=”” Type=”Application/x-shockwave-flash”>

</EMBED>

</object>

Ghi chú:

+ Thẻ <OBJECT> báo cho Internet Explore biết cách hiển thị flash

+ Thẻ <EMBED> báo cho N etscape N avigator biết cách hiển thị flash

Ghi chú: Mã số một số phiên bản media của windows

- Windows Media Player 10: clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6

- Windows Media Player 9: clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6

Trang 13

2.12 Bảng mã và tên gọi trong HTML của một số ký tự đặc biệt

2.13 Thiết kế web sử dụng Microsoft Frontpage

2.13.1 Các thao tác chính khi soạn thảo một trang web

- Tạo mới một trang web: Chọn chức năng File/N ew/Page /N ormal Page hay chọn icon

- Cửa sổ màn hình soạn thảo trang web cung cấp 3 cách “hiểu” (view) khác nhau về 1 trang web

Trang 14

o N ếu bạn chọn N ormal view, bạn có thể biên tập trang web dưới dạng WYSIWYG Ví dụ bạn có thể gừ văn bản vào, thay đổi màu sắc, kích thước chữ, …

o N ếu bạn chọn HTML view, bạn sẽ thấy được các mã HTML tương ứng với cách trình bày của trang web của bạn Ví dụ, nếu trong N ormal view bạn chèn vào một table thì trong HTML view, bạn sẽ thấy các tag tương ứng như sau:

<table border="1" width="100%">

<tr><td width="100%"> </td></tr>

</table>

o N ếu bạn chọn Preview view, tương tự với chức năng Preview in Browser

2.13.2 Tạo các thành phần của trang web

2.13.2.1 Thời gian cập nhật (Time stamp)

- Chọn Insert/Date and Time

- Chọn định dạng ngày tháng và thời gian phù hợp với nhu cầu của bạn

2.13.2.2 Đường kẻ ngang (Horizontal line)

- Chọn Insert/Horizotal line

- Đặt các thuộc tính cho đường kẻ ngang bằng cách double click chuột lên nó Sau đó chọn các thông số về Width, Height, Color, Alignment

2.13.2.3 List

- Chọn Format/Bullets and N umbering

- Sau khi hộp hội thoại xuất hiện, bạn hãy chọn các dạng bullet và numbering tương ứng

- Để thay đổi các thuộc tính của bullet như màu sắc, kiểu chữ, …, ta chọn Format/Bullets and N umbering/Style

- N goài ra, ta cũng có thể chọn hình ảnh để thay cho các kiểu bullet thông thường Để thay đổi, ta chọn Format/Bullets and N umbering/Picture bullets, rồi chọn ảnh dùng để làm bullet

- Để bỏ định dạng bullets, ta chọn Format/Bullets and N umbering/Plain Bullets

2.13.2.4 Tables

- N gười ta thường dùng table để:

o Hiển thị các thông tin có dạng dòng/cột, ví dụ như bảng thời khóa biểu, thông tin sản phNm,

o Trình bày (layout) các văn bản(text) và các ảnh đồ họa(graphics)

- Để tạo một bảng, ta có thể dùng một trong hai cách:

o Chọn Table/Insert Table Khi hộp hội thoại tạo bảng hiện ra, bạn phải cung cấp các thông tin chi tiết cho việc tạo bảng, ví dụ như số dòng, số cột, kích thước,

o Chọn Table/Draw Table Với chức năng này, bạn sẽ dùng bút vẽ để tạo các dòng, cột

Trang 15

- Để không hiện (hide) border của bảng, ta click phải chuột lên table, chọn Table Properties/Border/Sizes bằng 0

- Để tách một cell hay trộn nhiều cell lại, ta chọn Tabe rồi chọn Split /Merge Cells

- Để thêm hoặc xóa các cell, ta chọn Table rồi chọn Insert/Delete Cells

2.13.2.5 Một số hiệu ứng đặc biệt

- Chuyển trang (Page transition): Chọn Format/Page Transition…

Insert/Component/Marquee Sau khi hộp thoại hiện ra, bạn gõ vào dòng chữ cần chuyển động và đặt các thuộc tính khác như màu sắc, font chữ, …

- Thêm hiệu ứng font chữ cho các hyperlink: Chọn Format/Background, check vào Enable hyperlink rollover effects Sau đó bạn có thể chọn các màu theo ý muốn

2.6 Chèn ảnh

- Chọn chức năng Insert/Picture/From File

- Đặt thuộc tính và kích thước của ảnh, click phải chuột lên ảnh, rồi chọn Picture Properties

- Để tạo các hotspot hyperlink, ta chọn hình vẽ tương ứng (hình chữ nhật, ellipse, …) trên thanh toolbar pictures Chọn vùng trên ảnh, rồi điền thông tin của hyperlink vào

2.7 Chèn hyperlink

- Chọn chức năng Insert/Hyperlink

- Sau khi hộp thoại hiện ra, gõ vào hyperlink tương ứng Có 3 dạng:

o Địa chỉ Internet, có dạng: http://… Ví dụ: http:// www.yahoo.com

o Liên kết tới một trang trong site, có dạng: /thư mục/tên tập tin Ví dụ: /images/shopping.htm

o Liên kết ngay chính trong trang, đặt bằng bookmark

2.13.3 Định dạng trang

- Click phải chuột lên trang, chọn Page Properties

- Để đặt màu nền cho trang, chọn Background/Colors/Background

- Để đăt ảnh nền cho trang, chọn Background/Formatting/Background picture

- Để đặt các thông số về màu sắc cho hyperlink, chọn Background/Colors/Hyperlink

- Để đặt tiêu đề cho trang chọn General/Title

2.14 Bài tâp thực hành

2.14.1 Tạo trang web cho nhóm

- Khởi động Microsoft Front Page 2000

- Soạn trang web cá nhân của nhóm đặt tên là InfoGroup<n>.htm (ví dụ nhóm 1 sẽ lấy tên

là InfoGroup1.htm) Các thông tin chính của các thành viên trong nhóm bao gồm: Họ và tên, Công việc và chức vụ hiện nay, Địa chỉ liên lạc, Điện thoại, Fax, Email, Mobile Phone, N goài ra các nhóm có thể bổ sung các thông tin khác

- Upload trang web đó soạn lên website

Trang 16

- Thử truy cập trang web đó tải lên

2.14.2 Tham khảo các site

1 Site thông tin của Việt N am

6 Tạo trang web chứa các hyperlink dùng để truy cập nhanh

Tạo trang web đặt tên là Links.htm chứa các hyperlink đó đề cập ở trên Bổ sung thêm các hyperlink và các phân loại khác mà các anh chị đó biết

Upload lên website và kiểm tra lại

7 Tạo trang HomePage

Tạo trang web HomePage đặt tên là Default.htm giới thiệu về nhóm và các công việc mà nhóm đang triển khai

Kết nối hai trang đó tạo vào HomePage

Upload lên website và kiểm tra lại

8 Chọn chủ đề để thiết kế website

Website về dịch vụ việc làm

Website về dịch vụ nhà đất (http://www.nhadat.com)

Trang 17

Website báo điện tử (http://vnexpress.net )

Website trường học

Website bán hàng (cửa hàng, siêu thị ảo trên Internet)

Website dịch vụ giải trí như ECards, Điện hoa,

Các chủ đề khác

2.14.3 Thiết kế websitte theo các mẫu

1 Thiết kế website theo mẫu sau (http://greetings.yahoo.com)

Trang 18

2 Thiết kế website theo mẫu sau (http://www.flowers.com)

3 Thiết kế website theo mẫu sau (http://shopping.yahoo.com)

Trang 19

4 Thiết kế website theo mẫu sau (http://www.is-edu.hcmuns.edu.vn)

5 Thiết kế website theo mẫu sau (http://vnexpress.net)

Trang 20

6 Thiết kế website theo mẫu sau (http://www.codeproject.com)

7 Thiết kế website theo mẫu sau (http://www.bttvn.com )

- Để tham khảo cách thiết kế các trang web trên, hãy:

o Tải về máy bằng cách chọn chức năng Save của IE

Trang 21

o Dùng MS Front Page để mở tập tin đó lưu lên

- Chuyển qua lại giữa các màn hình N ormal View và HMTL View để biết cách thiết kế

- Với mỗi trang web đó xem hãy chú ý các vấn đề sau:

o Cách bố trí các bảng (table)

o Cách sử dụng font chữ

o Cách chèn vào các hình ảnh để trang trí

o Cách định nghĩa các thuộc tính như màu chữ, màu nền,

- Phần tĩnh (không thay đổi) mỗi khi click vào các hyperlink chuyển qua một nội dung mới

- Từ các trang web trên, hãy tự thiết kế các trang cho website của lớp, nhóm,…

Trang 22

Chương 3- Ngôn ngữ kịch bản Javascript

3.1 Tổng quan về JavaScript

- JavaScript là ngôn ngữ thể hiện dưới dạng Script có thể gắn với các file tài liệu HTML Một số trình duyệt hỗ trợ Javascript sẽ thực hiện việc diễn dịch thay vì biên dịch khi gặp các mã JavaScript

- JavaScript là ngôn ngữ dựa trên đối tượng N ó có thể đáp ứng các sự kiện (ví dụ: onClick, onMouseOver, onMouseOut,…) Tuy nhiên không giống như C++, Java, do không hỗ trợ các lớp hay tính kế thừa

- Các từ khoá sử dụng trong JavaScript có phân biệt chữ hoa, chữ thường

- JavaScript có thể chạy trên bất cứ hệ điều hành nào có trình duyệt hỗ trợ JavaScript

- Các mã lệnh JavaScript hoàn toàn được xử lý trên trên trình duyệt phía máy trạm

Các giới hạn của JavaScript:

- JavaScript không thể giao tiếp với máy chủ

- JavaScript không thể tạo các hình ảnh đồ hoạ

- JavaScript làm việc khác nhau trên các trình duyệt khác nhau

3.2 Nhúng JavaScript vào trang tài liệu HTML

3.2.1 Sử dụng thẻ <SCRIPT>

- Tất cả các mã JavaScript khi nhúng vào trang web đều phải nằm trong cặp thẻ:

<script language=”Javascript”> Mã lệnh Javascript </script>

- Lưu ý: đối với các trình duyệt cũ không hiểu JavaScript, ta nên chèn thêm thẻ <!- - trên

một dòng riêng nay sau thẻ <script> và //- -> trên một dòng riêng ngay trước thẻ </script>

để trình duyệt bỏ không thực hiện các mã JavaScript khi gặp chúng

Ví dụ:

Trang 23

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

<script language=”Javascript”>

<!- - dấu JavaScript trong trình duyệt cũ

//Chỉ có mã lệnh Javascript được đặt ở đây

- Để chèn chú thích trong mã JavaScript sử dụng kí hiệu: //dòng chú thích

3.2.2 Sử dụng một file nguồn JavaScript

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

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

<B> Trang này có sử dụng JavaScript Do đó bạn cần sử dụng trình duyệt Netscape

Navigator từ version 2.0 trở đi!

Đối tượng document trong JavaScript được thiết kế sẵn hai cách thức để xuất một dòng text ra

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

object_name.property_name

Trang 24

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

document.write("Test");

document.writeln('Test');

Cách thức write() xuất ra màn hình xâu Text nhưng không xuống dòng, còn cách thức

writeln() sau khi viết xong dòng Text tự động xuống dòng Hai cách thức này đều cho phép xuất ra thẻ HTML

<! HIDE FROM OTHER BROWSERS

document.write("This text is bold.</B>");

// STOP HIDING FROM OTHER BROWSERS >

</SCRIPT>

</BODY>

</HTML>

3.4 Giao tiếp với người sử dụng

- Hộp thoại cảnh báo alert, ví dụ: alert(“N han OK de tat hop thoai nay !”)

- Hộp thoại hỏi đáp Hàm confirm(“N ội dung thông báo”)

Ví dụ: k=confirm(“Co chac chan xoa khong ?”);

- Hộp thoại nhập dữ liệu Hàm prompt(“nội dung thông báo”,”giá trị mặc định”)

Ví dụ: k=prompt(“Cho biet ten cua ban ?”,”N guyen Hai Anh”);

Trang 25

3.5 Khai báo biến

9 Khai báo không tường minh: ten_bien = bieu_thuc;

9 Khai báo tường minh:

- Khai báo biến và không khởi tạo giá trị: var ten_bien;

- Khai báo biến và khởi tạo giá trị ban đầu: var ten_bien = bieu_thuc;

Quy tắc đặt tên biến:

- Ký tự bắt đầu phải là một chữ cái hoặc dấu gạch dưới “_”

- Trong tên biến không chứa khoảng trắng và các kỹ tự đặc biệt

Các biến phân biệt chữ hoa, chữ thường

3.6 Kiểu dữ liệu

3.6.1 Kiểu nguyên (INTERGER)

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

Hệ cơ số 10 (hệ thập phân) - có thể biểu diễn số nguyên theo cơ số 10, chú ý

rằng chữ số đầu tiên phải khác 0

Hệ cơ số 8 (hệ bát phân) - số nguyên có thể biểu diễn dưới dạng bát phân với

chữ số đầu tiên là số 0

Hệ cơ số 16 (hệ thập lục phân) - số nguyên có thể biểu diễn dưới dạng thập lục

phân với hai chữ số đầu tiên là 0x

3.6.2 Kiểu dấu phẩy động (FLOATING POINT)

Một literal có kiểu dấu phNy động có 4 thành phần sau:

3.6.3 Kiểu LOGIC (BOOLEAN)

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

true

false

3.6.4 Kiểu chuỗi (STRING)

Một literal kiểu chuỗi được biểu diễn bởi không hay nhiều ký tự được đặt trong cặp dấu " " hay ' ' Ví dụ:

“The dog ran up the tree”

‘The dog barked’

Trang 26

“100”

Để biểu diễn dấu nháy kép ( " ), trong chuỗi sử dụng ( \" ), ví dụ:

document.write(“ \”This text inside quotes.\” ”);

9 Cộng(+), trừ (-), nhân (*), chia(/), lấy phần dư (%)

9 bien++ (hoặc: ++bien) tăng giá trịcủa bien lên 1

9 bien - -(hoặc: - -bien) giảm giá trị của biến đi 1

- Chuỗi

Để nối chuỗi sử dụng toán tử “+”

Ví dụ: “Hà”+” ”+”N ội” được “Hà N ội”

new: toán tử khai báo biến kiểu đối tượng

- Các toán tử trên bit (Bitwise)

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

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

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

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

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

Trang 27

N goà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 >>)

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

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

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

Trang 28

for (khởi tạo biến đếm; điều kiện; thay đổi giá trị biến đếm){

//các câu lệnh thực hiện trong khi lặp

Trang 29

3.8.3 Câu lệnh break và continue

Hai câu lệnh này sử dụng trong các vòng lặp for hoặc while

- break: kết thúc vòng lặp và thoát ra khỏi còng lặp

- continue: dừng bước lặp hiện thời, trở về đầu vòng lặp và thực hiện bước lặp tiếp theo

Trang 30

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

for (var x in window)

objectvar = 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 new

<HTML>

<HEAD>

<TITLE>N ew Example </TITLE>

function person(first_name, last_name, age, sex){

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

person2= new person("Chung", "N guyen Bao", "24", "Male");

Trang 31

person3= new person("Binh", "N guyen N hat", "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>");

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

Cú pháp

this [.property]

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

3.10.4 with

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

sử dụng các thuộc tính mà không đề cập đến đối tượng

Trang 32

Ví dụ sau chỉ ra cách sử dụng lệnh with để thiết lập đối tượng ngầm định là document và có thể sử dụng phương thức write mà không cần đề cập đến đối tượng document

<HTML>

<HEAD>

<TITLE>With Example </TITLE>

with (document){

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

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

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

hoặc: ten_bien=new Array(size)

hoặc: ten_bien=new Array(element0, element1, , elementn)

Size Cỡ của mảng Các thành phần của mảng có chỉ số

đầu tiên là 0 đến size -1

Trang 33

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:

Ví dụ sau gọi hàm CheckAge() mỗi khi giá trị của trường văn bản thay đổi:

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

Button onClick

Checkbox onClick

Clickable Imagemap area onMouseOver, onMouseOut

Trang 34

Ví dụ sau là một đoạn mã script đơn giản của chương trình xử lý sự kiện thNm đị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ẽ thNm đị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>

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

Tên <IN PUT TYPE=TEXT N AME="TEN " MAXLEN GTH=10 SIZE=10><BR>

Đệm <IN PUT TYPE=TEXT N AME="DEM" MAXLEN GTH=15 SIZE=10><BR>

Họ <IN PUT TYPE=TEXT N AME="HO" MAXLEN GTH=10 SIZE=10><BR>

Age <IN PUT TYPE=TEXT N AME="AGE" MAXLEN GTH=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<IN PUT TYPE=RADIO N AME="MUA" VALUE="Mua xuan">

Mùa hạ<IN PUT TYPE=RADIO N AME="MUA" VALUE="Mua ha">

Mùa thu<IN PUT TYPE=RADIO N AME="MUA" VALUE="Mua thu">

Mùa đông<IN PUT TYPE=RADIO N AME="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ộ<IN PUT TYPE=CHECKBOX N AME="HOAT_DON G" VALUE="Di bo">

Trượt tuyết<IN PUT TYPE=CHECKBOX N AME="HOAT_DON G" VALUE="Truot tuyet"> Thể thao dưới nước<IN PUT TYPE=CHECKBOX N AME="HOAT_DON G" VALUE="Duoi

nuoc">

Trang 35

Đạp xe<IN PUT TYPE=CHECKBOX N AME="HOAT_DON G" VALUE="Dap xe">

<P>

</FORM>

</BODY>

</HTML>

Trang 36

3.13 Các đối tượng trong Javascript

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

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

Tất cả các trang đều có các đối tượng sau đây:

- navigator: có các thuộc tính tên và phiên bản của N avigator đang được sử

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

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

- 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

Trang 37

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

<TITLE> N avigator Object Exemple </TITLE>

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

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

Trang 38

3.13.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ÍN H

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

sổ

- Frames - Mảng xác định tất cả các frame trong cửa sổ

- Length - Số lượng các frame trong cửa sổ cha mẹ

- N ame - 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ƯƠN G 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", "windowN ame", [ "windowFeatures" ] ) - Mở cửa sổ mới

Trang 39

- 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

Hypertext link (thuộc tính TARGET của thẻ FORM và A)

Trong ví dụ tạo ra một 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ưu vào file window.html:

<P>

Load a file into window2 </A>

Trang 40

CÁC CHƯƠN G TRÌN H 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ỏ

3.13.3 Đối tượng location

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

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

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

3.13.4 Đối tượng frame

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

và mỗi frame có URL riêng frame không có các chương trình xử lý sự kiện Sự kiện onLoad

và onUnLoad là của đối tượng window

CÁC THUỘC TÍN H

o frames - Mảng tất cả các frame trong cửa sổ

o N ame - Thuộc tính N AME của thẻ <FRAME>

o Length - Số lượng các frame con trong một frame

o Parent - Cửa sổ hay frame chứa nhóm frame hiện thời

o self - frame hiện thời

o Window - frame hiện thời

3.13.4.1 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

Định dạng
Số trang	115
Dung lượng	2,03 MB