Bài giảng Thiết kế Web HTML + JavaScript + CSS

22/04/2011

THIẾT KẾ WEB

Html + JavaScript + Css

Dzoã n Xuâ n Thanh

1

Thiết kế Web

Lời nói đầu

Các khái niệm

Mục tiêu:

1. Cá c dịch vụ cơ bản trên Internet

•

Hiểu được cấu trúc của một website.

• WWW (Wold Wide Web): Dịch vụ trao đổi,tìm kiếm

truy cập thô ng tin trên mạng theo giao thức HTTP.

Được sử dụng thô ng qua trì nh duyệt Web

Xây dựng được một web site bằng HTML

Thời lượng: 30LT + 30TH

Đối tượng: Những ai cần

Hì nh thức thi: Lý thuyết (thi hết mô n) + Thực hành (đề tài)

• Email (Thư điện tử): Dịch vụ trao đổi cá c thô ng điệp

cho nhau SMTP(Simple Mail Tranfer Protocol)

Pop3(Post office protocol 3) được quản lý bởi cá c Mail

server như: [email protected]; dzoanthanh@gmail.com,...

Cô ng cụ hổ trợ: Dreamweaver

.

3

4

Thiết kế Web

Các khái niệm

• FTP – File Transfer Protocol – Truyền tải tập tin :

Dịch vụ trao đổi tập tin giữa cá c má y trên Internet

thường được dùng để Download & Upload cá c trang

web từ người thiết kế đến cá c má y chủ thô ng qua cá c

chương trì nh FTP như FTP Explorer, FlashFXP.

2. HTTP (Hyper Text Tranfer Protocol): Giao thức dùng để

giao tiếp với cá c trang Web.

3. HTML (Hyper Text Makeup Language): Ngô n ngữ đánh

dấu siêu văn bản dùng để thiết kế trang Web.

4. WebPage (Trang Web): Là một tập tin văn bản soạn thảo

theo ngô n ngữ HTML có phần mở rộng là HTML hoặc

HTM.

5. Web Site: Chuyên khu Web tập hợp cá c trang web thuộc

1 chủ thể.

• Chat –Tá n gẫu: Dịch vụ cho phé p người dùng trao đổi

trực tuyến với nhau qua mạng internet bằng văn bản,

â m thanh, hì nh ảnh Như : AOL, Yahoo messenger

6. Home Page: Trang đầu tiên-Trang chủ của 1 Website

(Index.htm, Default.htm . . .)

5

6

Thiết kế Web

1

22/04/2011

Các khái niệm

7. WebServer: Má y chủ web-Má y tí nh cấu hì nh mạnh, lưu trữ

cá c trang Web kết nối thường xuyên với mạng Internet cho

phé p cá c má y khá c truy cập thô ng tin.

.Com : Thương mại

.Int : Tổ chức quốc tế

.Edu : Tổ chức giá o dục

.Org : Cá c tổ chức khá c

.Net : Cá c mạng thô ng tin .Gov : Tổ chức chí nh phủ

.Info : Cá c mạng thô ng tin .Mil : Tổ chức quâ n sự

8. Tên miền (Domain Name): Để phâ n biệt mỗi Web Server

có một địa chỉ IP và được á nh xạ bởi 1 tên (VD:itc.edu.vn).

Được xem như tên giao dịch của cô ng ty, tổ chức trên

Internet.

Bao gồm mã quốc gia như :Việt Nam: .vn, Anh: .uk, Mỹ: .us,

Nhật:.jp...) và 1 số lĩnh vực.

Để sở hữu 1 tên miền phải trả chi phí hàng năm thô ng

qua cá c cô ng ty ủy quyền bá n tên miền (pavietnam, mắt

bã o, Fpt, . . .

7

8

Thiết kế Web

Các khái niệm

Cấu trúc trang HTML

<HTML>

9. Hosting: Khi hoàn tất website phải được ghi lưu vào 1

webserver nào đó thì mới truy cập được thô ng thường là

cá c server của ISP (Nhà cung cấp dịch vụ Internet hay

đơn vị chuyên dụng). Tùy theo dung lượng, băng thô ng và

một số hỗ trợ mà chi phí khá c nhau.

<HEAD>

</HEAD>

<BODY>

Phần nội dung của trang web

</BODY>

</HTML>

10. URL(Uniform Resource Location): Địa chỉ truy cập của

Ví dụ:

trang

Web

-

1

tập

tin

trong

Website

http://doamainname/……/File.html

<HTML>

<HEAD>

<TITLE> Welcome to HTML</TITLE>

</HEAD>

<BODY>

My first HTML document

</BODY>

</HTML>

11. Browser: Trì nh duyệt Web dùng để đọc và hiển thị cá c

trang Web. Phổ biến hiện nay là: InternetExplorer,

FireFox, Google Chrome,..

9

10

Thiết kế Web

CÁC THẺ ĐỊNH DẠNG VĂN BẢN

1. Định dạng Kiểu dáng

2. Thay đổi Font, Size

<B> Nội dung văn bản </B>:  Nội dung văn bản được in đậm

<I> Nội dung văn bản </I> :  Nội dung văn bản được in nghiêng

<U> Nội dung văn bản </U> :  Nội dung văn bản được gạch dưới

<S> Nội dung văn bản </S> :  Nội dung văn bản được gạch ngang

Nội dung<SUP>^{ở đây}</SUP>

•

<FONT FACE=“FontName1, FontName2…”> Nội dung

văn bản </FONT>

 Xá c định Font cho Nội dung văn bản, Nếu má y truy

cập khô ng có FontName1 sẽ lấy FontName2 . . . sẽ lấy

Font mặc định của trì nh duyệt.

Nội dung<SUB>_{ở đây}</SUB>

•

 Xá c định cỡ chữ cho nội dung văn bản

11

12

Thiết kế Web

2

22/04/2011

CÁC THẺ ĐỊNH DẠNG VĂN BẢN

Ví dụ 1:

13

14

Thiết kế Web

Ví dụ 2:

15

16

Thiết kế Web

4.Tạovăn bản đề mục

3. Canh lề đoạn văn bản

Đề mục là dò ng văn bản định dạng khá c cá c dò ng văn bản

trong nội dung dùng để tạo đề mục phần, chương. Mỗi thẻ

có chức năng phâ n đoạn, cấp 1 lớn nhất, cấp 6 nhỏ nhất,

có thể kết hợp thuộc tí nh canh lề.

. . . . .

Hướng: Left  Canh trá i đoạn văn bản

Right  Canh phải đoạn văn bản

Center  Canh giữa đoạn văn bản

Justify  Canh đều văn bản

<CENTER>Cá c thành phần cần canh giữa</CENTER>

VD:

17

18

Thiết kế Web

3

22/04/2011

Sử dụng màu

Cá c mã màu: Để xá c lập màu có thể dùng Tên màu hay Trị

thập lục phâ n tương ứng

•

Xá c lập màu chung cho trang Web

Dùng cá c thuộc tí nh của thẻ BODY để xá c lập: màu nền, màu

văn bản, màu cá c văn bản liên kết...

BẢNG MÃ MÀU

Tên màu

Black

Red

Trị

Tên màu

Olive

Trị

<BODY BgColor=“Màu” Text=“Màu” Link=“Màu” VLink=“Màu”

Alink=“Màu”>

. . . . . Nội dung trang Web. . . . .

</BODY>

Đen

Đỏ

#000000

Nâ u vàng

#808000

#008080

#FF0000

Teal

Nâu sẫm

Blue

Xanh

#0000FF

#000800

#FFFFFF

#800080

#FFFF00

Maroon

Nâ

Xá

u

#800000

Navy

X.Đãm

V.Chanh

Trằng

Đ.Tía

Vàng

Gray

Fuchsia

Green

Silver

m

#808080

#FF00FF

#008000

#C0C0C0

#00FFFF

BgColor: Màu nền trang

Text: Màu văn bản

Link: Màu liên kết chưa truy cập

VLink: Màu liên kết đã truy cập

Alink: Màu liên kết khi đang trỏ Mouse

Lime

Hồng

Lá

White

Rurple

Yellow

Bạc

Ngọc

Aqua

19

20

Thiết kế Web

Sử dụng màu

HIỆU ỨNG CHUYỂN ĐỘNG CHỮ

•

Xá c lập màu cho văn bản:

Dùng thuộc tí nh Color của thẻ FONT để xá c lập màu: cho

nội dung văn bản chỉ định.

<Marquee Behavior=“Hiệu ứng” Direction=“Hướng” Loop=n1

SrollAmount=n2 ScrollDelay=n3 BgColor=“Trị màu”>

Chuỗi ký tự

</Marqueee>

Trong đó:

Hiệu ứng:

+Scroll:Bắt đầu từ 1 cạnh biến mất ở cạnh kia

+Slide:Bắt đầu từ 1 cạnh dừng lại ở cạnh kia

+Alternate:Bắt đầu từ 1 cạnh chuyển ngược lại ở cạnh kia

Huớng: Left, Right, Up, Down (Hướng bắt đầu)

n1: Số lần lặp ;

VD: <FONT FACE=“Tahoma” COLOR=“Red” SIZE=3>

Cô ng nghệ thô ng tin </FONT>

n2: Khoảng cá ch(Pixel) giữa mỗi lần lặp;

n3: Thời gian chờ giữa mỗi lần lặp

21

22

Thiết kế Web

HIỆU ỨNG CHUYỂN ĐỘNG CHỮ

LIST – DANH SÁ CH

Danh sá ch được dùng để trì nh bày thô ng tin thành dạng dễ

đọc hơn. Chẳng hạn để tạo cá c bảng chỉ mục, nội dung của

cá c tài liệu hay cá c chương. HTML có 2 kiểu danh sá ch:

danh sá ch có thứ tự (ordered) và danh sá ch khô ng có

thứ tự (un ordered).

Ví dụ:

1. Danh sá ch khô ng có thứ tự

Danh sách không có thứ tự có các mục bắt đầu ký hiệu đánh

dấu ở trước

Ví dụ:

• List 1

• List 2

23

24

Thiết kế Web

4

22/04/2011

LIST – DANH SÁ CH

Để tạo ra danh sá ch khô ng có thứ tự ta dùng cá c tag sau:

Ví dụ:

…………………..

</UL>

Trong đó:

- type = “square” (là dạng hì nh vuô ng)

.

List 1

List 2

- type = “bullet” (là dạng hì nh trò n)

•

List 1

List 2

- type = “circle” (là dạng hì nh trò n rổng)

o

List

List 2

1

25

26

Thiết kế Web

LIST – DANH SÁ CH

2. Danh sá ch có thứ tự

Danh sách có thứ tự là danh sách mà mỗi mục danh sách

được đánh số, thường bắt đấu là 1.

Ví dụ:

1. L ist1

2. List 2

Để tạo ra danh sá ch có thứ tự ta dùng cá c tag sau:

…………………..

</ol>

27

28

Thiết kế Web

LIST – DANH SÁ CH

Trong đó:

Ví dụ 1:

- type= 1: giá trị sẽ là số

Ví dụ:

. start: chỉ mục bắt đầu

Ví dụ:

Kết quả:

4. list 1

5. list 2

</ol>

1. List

1

2. List 2

- type=a: giá trị sẽ là a, b, c

- type = A, giá trị sẽ là ký tự

Ví dụ:

A. List 1

B. List 2

- type=i: giá trị sẽ là i, ii, iii,…

- type=I: giá trị sẽ là I, II, III,…

29

30

Thiết kế Web

5

22/04/2011

LIST – DANH SÁ CH

Ví dụ 2:

31

32

Thiết kế Web

Đưa hình ảnh vào trang web

- Cá c kiểu tập tin hì nh ảnh cho phé p: .jpg, .gif, .png, .bmp

-

Sử dụng hì nh ảnh cần câ n nhắc: số lượng ảnh/1trang,

kí ch thước và độ phâ n giải, nhằm cải thiện tốc độ truy

cập.

-

Phải lưu hì nh ảnh ở vị trí nào đó trong thư mục chí nh của

Website

1.Thiết lập ảnh nền cho trang

-

Sử dụng thuộc tí nh Background trong thẻ BODY

33

34

Thiết kế Web

Đưa hình ảnh vào trang web

•

Tên tập tin : Là địa chỉ tuyệt đối hoặc tương đối của tập tin

2. Chè n hì nh ảnh vào trang Web

ảnh

<IMG Src=“tên tập tin” ” Width=“n1” Height=“n2”

Align=“Hướng” Border=“n” Alt=“Chú thí ch”>

Bgproperties =Fixed : Hì nh ảnh mờ bất động

VD: Bổ sung thuộc tí nh ảnh nền vào 1 trang html bất kỳ. Giả

sử tập tin ảnh lưu trong thư mục Images. Tập tin Htm lưu

cùng cấp với thư mục Images

•

Tên tập tin : Là địa chỉ tuyệt đối or tương đối của ảnh

Chú thí ch: Hiển thị trên trì nh duyệt khi trỏ Mouse vào hì nh

VD: <Img Src="../Images/P02.jpg">

<ImgSrc="../Images/P06.jpg" Alt=“Đây là Bill Gates">

•

n1, n2 : Là tỷ lệ % so với kí ch thước đối tượng chứa nó

hoặc kí ch thước tí nh theo Pixel.

n : Độ dày đường viền

35

36

Thiết kế Web

6

22/04/2011

Đưa hình ảnh vào trang web

Ví dụ:

•

Hướng:

.Top: Phần đầu thẳng hàng với dò ng đầu VB.

.Middle: Phần giữa thẳng hàng với dò ng đầu VB.

.Bottom: Phần cuối thẳng hàng với dò ng đầu VB.

.Left:Biên trá i ảnh căn thẳng lề trá i trang, VB bao quanh bên phải ảnh.

.Right:Biên phải ảnh căn thẳng lề phải trang, VB bao quanh bên trá i ảnh.

.Nếu khô ng khai bá o mặc định là thuộc tí nh Bottom

37

38

Thiết kế Web

Link – Liên kết

•

HTML có khả năng tạo ra các mối liên kết đến các thông

tin liên quan.

Cá c siêu liên kết (Hyper Link) là cốt lõ i của tập tin HTML

cho phé p truy cập đến cá c trang khá c trên cùng má y tí nh

hay ở má y tí nh khá c gồm hì nh ảnh, â m thanh, Multimedia,

HTML,…

•

Khi Click vào liên kết sự truy cập tại địa chỉ truy cập sẽ

thực hiện tự động

Cấu trúc:

39

40

Thiết kế Web

Link – Liên kết

1.Liên kết cục bộ (local link):

Ví dụ:

VD:<A href=“about.html”>Abouts</A>

2. Liên kết đến một hình ảnh:

VD: <A href =”Img/Product.gif”>ViewImage</A>

3. Liên kết đến một trang webkhác trên internet:

VD: <A href =”http://www.itc.edu.vn”>ITC</A>

4. Liên kết đến địa chỉ email:

VD:<a href =”mailto:[email protected]”>Send Mail</a>

5. Tạo liên kết cho tập tin Media:

VD:<a href =”music/hanhkhuc.wma”>Music</a>

6. Liên kết đến một file - doanload (.doc,.xls,.rar,.pdf,…)

VD:<a href =”Upload/Webdesign.doc”>Ebook</a>

41

42

Thiết kế Web

7

22/04/2011

NHÚNG TẬP TIN MEDIA

Cá c dạng tập tin â m thanh thô ng dụng trên Internet: .wav, .mp3,

.wmv, .wma,.mpeg, .Ra, .Rm . . . hay cá c tập tin Flash : .swf

<Embed Src=“Tên tập tin” AutoStart=“True”|“False” Align=“Hướng”

Widht=n1 Height=n2>

trong đó: Align, Width, Height : Cá c thuộc tí nh điều khiển Control

VD: Tạo tập tin HTM với nội dung như sau:

<HTML>

</HTML>

43

44

Thiết kế Web

Table – Bảng biểu

Việc trì nh bày trang web theo dạng bảng sẽ làm cho trang web trở nên chuyên

Nghiệp hơn. Với dạng bảng bạn có thể chia trang web thành nhiều phần, bạn

có thể á p dụng cá c kiến thức đã học để trang trí riêng cho từng phần

1. Tag cơ bản của bảng: <TABLE>, <TR>, <TD>:

- X: Khoảng cách giữa nội dung của một ô và đường viền ô đó

- Y: Khoảng cách giữa các ô

- bordercolor:xác định màu cho khung

- bgcolor: xác định màu nền cho table

<TABLE border=giá trị cellpadding=Xcellspacing=Ybordercolor=”màu”

bgcolor=”màu” background=”image”>

</TR>

-

background: xác định hình nền cho table

2. Hàng và cột:

Bảng vừa thiết kế ở trên chỉ là các bảng đơn giản với 2 hàng 3 cột

đều nhau. Thực tế có nhiều bảng phức tạp hơn. Để tạo được

những bảng phức tạp, chúng ta sử dụng các thuộc tính ColSpan và

RowSpan trong tag <TD>……</TD>

<TR>

</TR>

ColSpan =x : chiều rộng của các ô tính theo cột

RowSpan =y: chiều cao của các ô tính theo hàng

</TABLE>

45

46

Thiết kế Web

Table – Bảng biểu

Ví dụ 1:

Ví dụ 2:

47

48

Thiết kế Web

8

22/04/2011

Table – Bảng biểu

Ví dụ 3:

49

50

Thiết kế Web

Form – Biểu mẫu

1. Giới Thiệu:

- Form – Biểu mẫu là một kỹ thuật cho phé p chủ trang web giao

tiếp với người truy cập. Trên trang web người dùng có thể được

yêu cầu trả lời một câ u hỏi, cho 1 ý kiến, chọn một mục trong

danh sá ch định trước . . . chủ trang web sẽ tiếp nhận và xử lý

thô ng tin ấy.

- Cấu trúc tổng quá t:

Nội dung biểu mẫu

Nút gửi dữ liệu

</FORM>

51

52

Thiết kế Web

Form – Biểu mẫu

2. Định Nghĩa Form:

3. Cá c thành phần trong form:

- Dạng 1: Chỉ trình bày không gửi dữ liệu

a. Textarea: tạo ra vùng văn bản, có thể nhập nhiều dòng

Các đối tượng trong Form

nội dung

</Form>

</textarea>

- Dạng 2: Thông tin từ Form chuyển cho địa chỉ Mail

Các đối tượng trong Form

Trong đó:

</Form>

- Cols: là chiều rộng của vùng văn bản tính theo ký tự

- Rols: chiều cao vùng văn bản tính theo hàng

- Name: là thuộc tính để nhận dạng, sử dụng trong srcipt

- Dạng 3: Thông tin từ Form chuyển lên Webserver

Các đối tượng trong Form

</Form>

53

54

Thiết kế Web

9

22/04/2011

Form – Biểu mẫu

b. Textbox: Để nhập vào một dòng đơn.

c. PasswordBox: giống textbox nhưng không hiển thị các ký tự

<INPUT type=”text” name=”…” maxlenght=…

size=… value=” “>

d. Radiobutton: Cá c nút lựa chọn một trong nhiều.

<INPUT type=”radio” name=”...“ checked

value=”…“ > văn bản đại diện

Trong đó:

- Size: chỉ chiều dài của textbox

- Maxlenght: chỉ số ký tự tối đa hay tối thiểu có thể nhập vào.

- Value: là giá trị kiểu xâu được hiển thị

Trong đó:

-Value: chứa dữ liệu sẽ gửi đến server khi radiobutton đã checked

55

56

Thiết kế Web

Form – Biểu mẫu

g. Submit and reset buttons:

e. Checkbox: Hộp chọn checkbox

Các button để nhận thông tin và khởi tạo lại thông tin trên form.

Nút Submit là nút để sever có thể lấy thông tin từ người dùng sử dụng. Sau

khi nhập liệu xong, người dùng ấn vào nút này thì mọi thông tin sẽ gửi đến

server. Nếu có thông tin sai quy định thì lập tức server sẽ gửi trả lại kèm với

thông tin báo lỗi. Nút reset sẽ khởi tạo lại toàn bộ các giá trị của form bằng

các giá trị mặc định.

<INPUT type=”checkbox” name=” “ value=” “

checked> văn bản đại diện

Trong đó: - Value: chứa dữ liệu sẽ gửi đến server khi checkbox đã

checked

f. Menu (combobox, listbox): Tạo ra hộp menu thả xuống

<Input Type=”Submit” Value=”Nhã n”> Hoặc

Hoặc

… …

</SELECT>

Trong đó:

Trong đó: - Multipe: thuộc tính này cho phép bạn chọn nhiều mục

-

Value: chứa phần text hiển thị trên nút bấm. Nút reset chỉ khởi động lại

các giá trị trong cùng một form mà thôi.

57

58

Thiết kế Web

Form – Biểu mẫu

Ví dụ 1:

59

60

Thiết kế Web

10

22/04/2011

Form – Biểu mẫu

Ví dụ 2:

61

62

Thiết kế Web

FAQ

?

THIẾT KẾ WEB

JavaScript

Dzoã n Xuâ n Thanh

63

Thiết kế Web

Lời nói đầu

NGÔN NGỮ KỊCH BẢN JAVASCRIPT

Ví dụ:

Mục tiêu:

•

Hiểu được cấu trúc của một website.

<HTML>

Xây dựng được một web site bằng HTML

<HEAD><TITLE>JavaScript Exemple </TITLE>

var name=window.prompt(“Hello! What’s your name ?”,””);

document.write(“Hello ” + name + “ ! Do you like JavaScript ”);

Thời lượng: 30LT + 30TH

Đối tượng: Những ai cần

Hình thức thi: Lý thuyết (thi hết môn) + Thực hành (đề tài)

</SCRIPT>

</HEAD>

<BODY>

Công cụ hổ trợ: Dreamweaver

</BODY>

</HTML>

65

66

Thiết kế Web

11

22/04/2011

NGÔN NGỮ KỊCH BẢN JAVASCRIPT

Biến trong Javascript

•

Cũng như cá c ngô n ngữ lập trì nh khá c javascript dùng biến

để lưu trữ cá c giá trị nhập vào, cá c giá trị tí nh toá n . . .Nó i

cá ch khá c biến là vùng nhớ sử dụng để lưu trữ cá c giá trị

khá c nhau trong quá trì nh chương trì nh hoạt động.

Mỗi biến có một tên, Tên biến trong JavaScript phải bắt đầu

bằng ký tự . 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: 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: var x = 0;

67

68

Thiết kế Web

Kiểu dữ liệu

1. Kiểu nguyên (Interger)

3. Kiểu logic (Boolean)

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

10 (hệ thập phâ n), Hệ cơ số 8 (hệ bá t phâ n) và Hệ cơ số

16 (hệ thập lục phâ n) -Với hai chữ số đầu tiên là 0x. (VD:

0x5F)

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

4. Kiểu chuỗi (String)

Một biến kiểu chuỗi biểu diễn bởi khô ng hay nhiều ký tự đặt

trong cặp dấu " ... " hay '... '

2. Kiểu dấu phẩy động (Floating Point)

Một biến có kiểu dấu phẩy động có 4 thành phần sau: Phần

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

mũ.

VD: “The dog ran up the tree” hay “100”

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

( \" ),

Để phân biệt kiểu dấu phẩy động với kiểu số nguyên, phải

có ít nhất một chữ số theo sau dấu chấm hay E

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

VD: 9.87 hay 9.87E14

69

70

Thiết kế Web

Toán tử & Biểu thức trong JavaScript

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

2. Cá c toá n tử (Operator):

a) Gá n:

Tập hợp cá c biến và cá c toá n tử nhằm đánh giá một giá trị nào đó được

gọi là một biểu thức (expression). Về cơ bản có ba kiểu biểu thức:

•

Số học: Nhằm để lượng giá giá trị số. VD: (3+4)+(84.5/3) bằng

197.1666666667.

Chuỗi: Nhằm để đánh giá chuỗi. VD: "The dog”+”barked!" là “The

dog barked!”

b) So sá nh

•

Logic: Nhằm đánh giá giá trị logic. VD: 23>32 là False.

Ngoài ra JavaScript cũng hỗ trợ biểu thức điều kiện, cú phá p như

sau:

(biểu thức) ? giá trị đúng: giá trị sai

.VD: xeploai= (diemtb>=8) ? “Gioi" : “Kha"

71

72

Thiết kế Web

12

22/04/2011

Toán tử & Biểu thức trong JavaScript

Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng

1. Cấu trúc lệnh rẽ nhánh (Điều Kiện):

Cú phá p:

c) Số học:

if ( <điều kiện> ) {

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

} else{

}

//Cá c câ u lệnh với điều kiện sai

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

hợp hai chuỗi,

Ví dụ:

if (x==10){

ví dụ: "abc" + "xyz" được "abcxyz“

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

Chú ý: Nếu bạn gán giá trị của toán tử ++ hay -- vào một biến,

như y= x++, có thể có các kết quả khác nhau phụ thuộc vào vị trí

xuất hiện trước hay sau của ++ hay -- với tên biến (là x trong

trường hợp này). Nếu ++ đứng trước x, x sẽ được tăng hoặc giảm

trước khi giá trị x được gán cho y. Nếu ++ hay -- đứng sau x, giá trị

của x được gán cho y trước khi nó được tăng hay giảm.

x = 0;

} else

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

73

74

Thiết kế Web

Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng

Cấu trúc và lệnh: rẽ nhá nh, lặp, thao tá c trên đối tượng

2. Cấu trúc lệnh lặp:

b) While: Vòng lặp while lặp khối lệnh chừng nào <điều kiện>

còn được đánh giá là đúng

a) For:

for (initExpr; <điều kiện>; incrExpr){

while (<điều kiện>){

//Cá c lệnh được thực hiện trong khi lặp

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

}

Ví dụ:

<HTML> <HEAD><TITLE>For loop Example </TITLE>

Ví dụ: //Kết quả của VD này giống như VD trước

x=1;

while (x<=10){

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

y=x*25;

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

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

x++;

}

</SCRIPT>

</HEAD>

</HTML>

75

76

Thiết kế Web

Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng

d) Lệnh Continue: Đối với vòng lặp while lệnh continue điều

khiển quay lại <điều kiện>; với for lệnh continue điều khiển

quay lại incrExpr.

c) Break: Câu lệnh break dùng để kết thúc việc thực hiện của

vòng lặp for hay while. Chương trình được tiếp tục thực hiện

tại câu lệnh ngay sau chỗ kết thúc của vòng lặp.

Cú phá p: continue;

Ví dụ: Đoạn mã sau tăng x từ 0 lên 5, nhảy lên 8 và tiếp tục tăng

lên 9,10:

Cú phá p: break;

Ví dụ : Nếu giá trị x đưa vào vòng lặp nhỏ hơn 50, vòng lặp

sẽ kết thúc:

x=0;

while (x<=10) {

document.write(“Giá trị của x là:”+ x+”<BR>”);

while (x<100){

if (x=5) {

x=8;

if (x<50) break;

x++;

}

continue;

}x++;

}

77

78

Thiết kế Web

13

22/04/2011

Cấu trúc và lệnh: rẽ nhá nh, lặp, thao tá c trên đối tượng

3. Thao tá c rên đối tượng:JavaScript là một ngô n ngữ dựa trên

đối tượng, do đó nó có một số câ u lệnh làm việc với cá c đối

tượng.

a) FOR...IN: Câ u lệnh này được sử dụng để lặp tất cả cá c thuộc

tí nh (properties) của một đối tượng. Tên biến có thể là một giá

trị bất kỳ, chỉ cần thiết khi bạn sử dụng cá c thuộc tí nh trong

vò ng lặp. Ví dụ sau sẽ minh hoạ điều này

Cấu trúc và lệnh: rẽ nhá nh, lặp, thao tá c trên đối tượng

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

của mỗi thuộc tính.

<HTML>

<HEAD>

<TITLE>For in Example </TITLE>

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

for (var x in window)

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

</SCRIPT>

Cú phá p:

</HEAD>

for (<variable> in <object>){

<BODY>

//Cá c câ u lệnh

</BODY>

}

</HTML>

79

80

Thiết kế Web

Cấu trúc và lệnh: rẽ nhá nh, lặp, thao tá c trên đối tượng

<HTML>

b) NEW: Biến new được thực hiện để tạo ra một thể hiện mới

của một đối tượng.

<HEAD><TITLE>New Example </TITLE>

<SCRIPTLANGUAGE= "JavaScript">

functionNguoi(Ten, HoLot, Tuoi, Phai){

this.Ten=Ten;

this.HoLot= HoLot;

this. Tuoi =Tuoi;

this.Phai= Phai;

Cú phá p:

objectvar = new object_type([param1],[param2]...,[paramN])

}

person1= new Nguoi ("Ty", "Tran Van", "18", "Nu");

person2= new Nguoi ("Suu", "Nguyen Van", "20", "Nam");

person3= new Nguoi ("Dan", "Nguyen Nhat", "21", "Nam");

document.write ("1."+person1.Ten+" " + person1.HoLot+ "<BR>" );

document.write("2."+person2.Ten+" "+ person2. HoLot + "<BR>");

document.write("3."+ person3. Ten+" "+ person3. HoLot + "<BR>");

</SCRIPT>

Ví dụ: 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

</HEAD>

<BODY>

</BODY></HTML>

81

82

Thiết kế Web

Cấu trúc và lệnh: rẽ nhá nh, lặp, thao tá c trên đối tượng

Function - Hàm

Trong lập trì nh sử dụng hàm là để thực hiện một đoạn chương trì nh nào

đó. Trong Javascript có cá c hàm được xâ y dựng sẵn để giúp thực hiện

một chức năng và ta cũng có thể định nghĩa ra cá c hàm khá c để thực

hiện một cô ng việc nào đó.

Hàm có thể có 1 hay nhiều tham số truyền vào và 1 giá trị trả về. Hàm có

thể là thuộc tí nh của 1 đối tượng, trong trường hợp này nó được xem

như là phương thức của đối tượng đó.

c) THIS: 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.

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

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

Cú phá p:

with (object){

// statement

}

Ví dụ: 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>

•

Cú phá p:

<HEAD><TITLE>With Example </TITLE>

with (document)

function fnName([param1],[param2],...,[paramN]) {

//function statement

}

{

write(“Day la phat bieu <B>with<B> . <P>”);

write(“Dang su dung phuong thuc write ma khong can dung den doi tuong document”);

}

</SCRIPT>

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

83

84

Thiết kế Web

14

22/04/2011

Function - Hàm

•

Ví dụ:

Các hàm hổ trợ:

<HTML> <Head> <Title>Function</Title>

function testQuestion(question){

var answer=eval(question);

1. Hàm eval: Chuyển đổi giá trị chuỗi thành giá trị số.

Cú phá p: returnval=eval (biểu thức)

Ví dụ:

var output="What is " + question + "?";

var correct="<IMG SRC='vui.gif'> alt='vui'";

var incorrect="<IMG SRC='buon.gif'> alt='buon'";

var response=prompt(output,"0");

return(response== answer)?correct:incorrect;

}

<HTML> <Head><Title>Eval Example </Title>

var string=”10+ Math.sqrt(64)”;

document.write(string+ “=”+ eval(string));

</Script>

</Head>

<Body>

</Body></HTML>

</Script></Head>

<Body>

var result=testQuestion("10 + 10");

document.write(result);

</Script></Body></HTML>

85

86

Thiết kế Web

Function - Hàm

2. Hàm parseInt: Hàm này chuyển một chuỗi số thành số nguyên

với cơ số là tham số thứ hai.

3. Hàm parseFloat: Hàm này giống hàm parseInt nhưng nó

chuyển chuỗi thành số biểu diễn dưới dạng dấu phẩy động.

Cú phá p:

parseInt (string, [, radix])

Cú phá p:

parseFloat (string)

Ví dụ:

<HTML> <Head><Title>ParserInt Example </Title><Body>

<Body>

<scriptlanguage= "JavaScript">

document.write("Thisscriptwill show how diffrent strings are ");

document.write("Converted using parseFloat<BR>");

document.write("137=" + parseFloat("137") + "<BR>");

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

document.write("abc137=" + parseFloat("abc137") + "<BR>");

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

</Script>

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>

</Body>

</HTML>

</Body>

87

88

Thiết kế Web

Array - Mảng

Mặc dù JavaScript không hỗ trợ cấu trúc dữ liệu mảng nhưng

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:

Ví dụ:

<HTML> <Head><Title> Array Exemple </Title>

functiontaomang(n) {

this.length= n;

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

this[i]=0

}

function taomang(n) {

this.length = n;

returnthis;

for (var x=1; x<=n; x++){

}

a = new taomang(10);

a[1] = "Nghệ An";

this[x]=0

}

a[2] = "Hà Nội";

document.write(a[1] + "<BR>");

document.write(a[2] + "<BR>");

</Script>

return this;

}

</Head>

89

90

Thiết kế Web

15

22/04/2011

Đối tượng và sự kiện

1. Cá c đối tượng::

2. Sự kiện:

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

onBlur

Xảy ra khi input focus bị xoá từ thành phần form

onClick

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

của form.

onChange

onFocus

onLoad

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

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

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

onUnLoad

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

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

91

92

Thiết kế Web

Đối tượng và sự kiện

- Cá c sự kiện có sẵn của một số đối tượng:

- Ví dụ:

<HTML>

Đối tượng

Chương trình xử lý sự kiện có sẵn

onBlur, onChange, onFocus

onBlur, onChange, onFocus, onSelect

onClick

Selection list

<HEAD> <TITLE>Event Handler</TITLE>

</HEAD>

<BODY onLoad="alert('Welcome to my page!');"

onUnload="alert('Goodbye! ');">

</BODY>

</HTML>

Text

Textarea

Button

Checkbox

Radio button

Hypertext link

ClickableImagemap area

Reset button

Submit button

Document

Window

onClick

onClick, onMouseOver, onMouseOut

onMouseOver, onMouseOut

onClick

onLoad, onUnload, onError

onLoad, onUnload, onBlur, onFocus

onBlur, onFocus

Framesets

Form

onSubmit, onReset

Image

onLoad, onError, onAbort

93

94

Thiết kế Web

Đối tượng và sự kiện

3. Cá c đối tượng thường dùng

- Ví dụ: hiển thị các thuộc tính của đối tượng navigator

<HTML>

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

<HEAD><TITLE> Navigator Object Exemple </TITLE>

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

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

- Các thuộc tính:

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

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

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

95

96

Thiết kế Web

16

22/04/2011

Đối tượng và sự kiện

- Cá c phương thức:

3.2 Đối tượng window: Đối tượng window là đối tượng ở mức

cao nhất. Cá c đối tượng document, frame, location đều là thuộc

tí nh của đối tượng window.

alert ("message")

Hiển thị hộp thoại với chuỗi "message" và nút

OK.

clearTimeout(timeoutID)

Xó a timeout do SetTimeout đặt. SetTimeout trả

lại timeoutID

- Cá c thuộc tí nh:

defaultStatus

Frames

Length

Name

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

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

Số lượng cá c frame trong cửa sổ cha.

Tên của cửa sổ hiện thời.

WindowReference.close

confirm("message")

Đóngcửa sổ windowReference.

Hiển thị hộp thoại với chuỗi "message", nút OK

và nút Cancel. Trả lại trị True cho OK và False

cho Cancel.

Parent

Self

Đối tượng cửa sổ chA

[windowVar = ][window]. open("URL",

"windowName", [ "windowFeatures" ] )

Mở cửa sổ mới.

Cửa sổ hiện thời.

Status

Được sử dụng thô ng bá o tạm thời hiển thị lên trên thanh trạng

thá i cửa sổ.

prompt ("message" [,"defaultInput"])

Mở hộp hội thoại để nhận dữ liệu vào trường

text.

Top

Cửa sổ ở trên cùng.

TimeoutID = setTimeout(expression,msec) Đánh giá biểu thức expresion sau thời gian

Window

Cửa sổ hiện thời.

msec.

97

98

Thiết kế Web

Đối tượng và sự kiện

- Ví dụ:

<HTML>

3.3 Đối tượng document: Đối tượng này chứa cá c thô ng tin về

document hiện thời. Đố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 thuộc tí nh:

<Head><Title>WindowObject </Title></Head>

<Body>

<Form>

alinkColor

anchor

bgColor

cookie

fgColor

forms

lastModified

linkColor

links

Giống như thuộc tí nh ALINK.

Mảng tất cả cá c anchor trong document.

Giống thuộc tí nh BGCOLOR.

Sử dụng để xá c định cookie.

Giống thuộc tí nh TEXT.

Mảng tất cả cá c form trong document.

Ngày cuối cùng văn bản được sửa.

Giống thuộc tí nh LINK.

Mảng tất cả cá c link trong document.

URLđầy đủ của văn bản.

URLcủa văn bản gọi nó .

Nội dung của thẻ <TITLE>.

Giống thuộc tí nh VLINK.

<Input Type="button" VALUE="Open SecondWindow"

onClick="msgWindow=window.open('','window2','resizable=no,width=200,height=200')">

<BR><A HREF="doc.htm" TARGET="window2"> Loada File into window2 </A>

</Form>

</Body>

</HTML>

location

referrer

title

vlinkColor

99

100

Thiết kế Web

Đối tượng và sự kiện

3.4 Đố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. VD:http://

www.abc.com /c hap1/page2.html#topic3

- 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 ra màn hì nh.

- Cá c thuộc tí nh:

document.open (["mineType"])

Mở một stream để thu thập dữ liệu vào

hash

Tên anchor của vị trí hiện thời (VD topic3).

Phần hostname:port của URL (VD www.abc.co m).

Tên của host và domain (VD www.abc.co m).

Toàn bộ URL cho document hiện tại.

của cá c phương thức write và writeln.

Host

Hostname

href

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.

Pathname

Port

Phần đường dẫn của URL (VD /chap1/page2.html).

Cổng truyền thô ng được sử dụng cho má y tí nh host, thường

là cổng ngầm định.

Giao thức được sử dụng (cùng với dấu hai chấm) (VD http:).

document.writeln(expression1

Giống phương thức trên nhưng khi hết

[,expression2] ... [,expressionN] ) mỗi biểu thức lại xuống dò ng.

Protocol

Search

Câ u truy vấn tì m kiếm có thể ở cuối URL cho cá c script CGI.

101

102

Thiết kế Web

17

22/04/2011

Đối tượng và sự kiện

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

- Ví dụ: http:// www.abc.com/ chap1/page2.html#topic3

- Cá c thuộc tí nh:

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

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

- Các phương thức:

hash

Tên anchor của vị trí hiện thời (VD topic3).

• history.back() - Được sử dụng để tham chiếu tới URL mới

được thăm trước đây.

Host

Phần hostname:port của URL (VD www.abc.com).

Hostname Tên của host và domain (VD ww.abc.com).

href Toàn bộ URL cho document hiện tại.

Pathname Phần đường dẫn của URL (VD /chap1/page2.html).

• history.forward() - Được sử dụng để tham chiếu tới URL kế

tiếp trong 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 chuyển đến URL xác

định bởi location trong danh sách. Dịch chuyển lên phía

trên khi delta dương và xuống phía dưới khi delta âm.

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

Search

Target

Giao thức được sử dụng (cùng với dấu hai chấm) (VD http:).

Câ u truy vấn tì m kiếm có thể ở cuối URL cho cá c script CGI.

Giống thuộc tí nh TARGET của <LINK>

103

104

Thiết kế Web

Đối tượng và sự kiện

3.7 Đối tượng forms: Cá c form được tạo ra nhờ cặp thẻ

<FORM> . . . </FORM>. Có một vài phần tử (elements) của

đối tượng forms như: Button, checkbox, password, radio,

reset, select, submit, text, textarea, …

- Cá c phương thức:

formName.submit () - Xuất dữ liệu của một form tên formName

tới trang xử lý. Phương thức này mô phỏng một click vào nút

submit trên form

- Các chương trình xử lý sự kiện:

onSubmit: Chương trình xử lý sự kiện này được gọi khi người

sử dụng chuyển dữ liệu từ form đi

- Cá c thuộc tí nh:

Action

thuộc tí nh ACTION của thẻ FORM.

Elements Mảng chứa cá c thành phần trong form (như checkbox, textbox .

.

Encoding Xâ u chứa kiểu MIME được sử dụng để mã hoá nội dung của

a) Phần tử Text: Phần tử này nằm trong những phần tử hay

được sử dụng nhất trong cá c form HTML. Trường text cho

phé p nhập vào một dò ng đơn.

form gửi cho server.

length

Method

target

Số lượng cá c thành phần trong một form.

Thuộc tí nh METHOD.

Xâ u chứa tên của cửa sổ đích khi submit form

105

106

Thiết kế Web

Đối tượng và sự kiện: phần tử Text

Đối tượng và sự kiện: phần tử Textarea

b) Phần tử Textarea: Thẻ TEXTAREA cung cấp một hộp cho

phé p nhập số dò ng text do người thiết kế định trước. Ví dụ:

- Cá c thuộc tí nh và phương thức:

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)

Default Text Here

</TEXTAREA>

name

value

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

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

Mô tả việc contrỏ tới trường text (cá chthức)

Mô tả việc contrỏ rời trường text (cá chthức)

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

focus()

blur()

select()

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.

• Thuộc tí nh: tương tự phần tử text, Textarea cũng có cá c

thuộc tí nh defaultValue, name, và value.

-VD: TrangTextField.htm Tự động cập nhật cá c trường text .

<HTML><HEAD><TITLE>TextFieldExample</TITLE>

function echo(form,currentField){

if (currentField== "first")

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

else

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

}

</SCRIPT></HEAD>

• Cá ch thức: focus(), select(), và blur()

• Sự kiện: onBlur, onForcus, onChange, onSelect.

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

107

108

Thiết kế Web

18

22/04/2011

Đối tượng và sự kiện: phần tử Raido

c) Phần tử radio:Đối tượng radio gần giống sự bật tắt checkbox.

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.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á c thuộc tí nh và phương thức:

- Ví dụ:

Thuộc tính

Môtả

checked

Mô tả trạng thá i hiện thời của phần tử radio

defaultChecked Mô tả trạng thá i mặc định của phần tử

index

Mô tả thứ tự của nút radio được chọn hiện thời trong một

nhó m

length

name

value

Mô tả tổng số nút radio trong một nhó m

Mô tả tên của phần tử được chỉ định trong thẻ INPUT

Mô tả giá trị hiện thời của phần tử được định ra trong thẻ

INPUT

click()

Mô phỏng một click trên nút radio (cá ch thức)

- Sự kiện: onClick

109

110

Thiết kế Web

Đối tượng và sự kiện: phần tử checkbox

Đối tượng và sự kiện: phần tử Select

d) Phần tử checkbox: Cá c phần tử checkbox có khả năng bật

tắt dùng để chọn hoặc khô ng chọn một thô ng tin.

- Cá c thuộc tí nh và cá c phương thức:

e) Phần tử select:

•

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à option.

checked

defaultChecked

name

Cho biết trạng thá i hiện thời của checkbox

Cho biết trạng thá i mặc định của phần tử

Cho biết tên của phần tử được chỉ định trong thẻ INPUT

Cho biết giá trị hiện thời của phần tử được chỉ định trong thẻ

INPUT

•

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

value

click()

Mô tả một click vào checkbox (Phương thức)

- Sự kiện: onClick

- Ví dụ:

- Thuộc tí nh của cá c mục chọn (option):

DEFAULTSELECTED

Cho biết option có mặc định là chọn trong thẻ OPTION hay

khô ng.

INDEX

SELECTED

TEXT

Chứa giá trị số thứ tự của option hịên thời trong mảng option.

Cho biết trạng thá i hiện thời của option

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.

111

112

Thiết kế Web

Đối tượng và sự kiện: phần tử Button

Đối tượng và sự kiện: phần tử Reset

f) Phần tử button: Trong một form HTML chuẩn, chỉ có hai nút

bấm có sẵn là submit và reset bởi vì dữ liệu trong form phải

được gửi tới một địa chỉ URL để xử lý và lưu trữ. Một phần tử

button được chỉ định rõ khi sử dụng thẻ INPUT:

g) Phần tử reset: Sử dụng đối tượng 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 sự kiện onClick. Đối tượng reset dùng để xoá

form

- Sự kiện duy nhất là onClick.

- Ví dụ:

113

114

Thiết kế Web

19

22/04/2011

Đối tượng và sự kiện

h) Phần tử submit: Nút Submit là một trường hợp đặc biệt của

button, cũng như nút Reset. Nút này đưa thông tin hiện tại từ

các trường của form tới địa chỉ URL được chỉ ra trong thuộc

tính ACTION của thẻ form sử dụng cách thức METHOD chỉ ra

trong thẻ FORM

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

- Cá c phương thức:

dateVar.getDate()

dateVar.getDay()

Trả lại ngày trong thá ng (1-31) cho dateVar.

Trả lại ngày trong tuần (0=chủ nhật,...6=thứ bảy)

cho dateVar.

i) Phần tử File Upload: Phần tử này cung cấp cho form một cách để

người sử dụng có thể chỉ rõ một File đưa vào form xử lý.

dateVar.getHours()

dateVar.getMinutes()

dateVar.getSeconds()

dateVar.getTime()

dateVar.getTimeZoneOff Trả lại độ dịch chuyểnbằng phút của giờ địa

set()

Trả lại giờ (0-23) cho dateVar.

j) Phần tử hidden: Phần tử hidden là phần tử 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 nhưng nó không được hiển thị trên trang.

Trả lại phút (0-59) cho dateVar.

Trả lại giâ y (0-59) cho dateVar.

Trả lại số lượng cá c mili giâ y từ ngày .

phương hiện tại so với giờ quốc tế GMT.

Trả lại năm cho dateVar.

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.

k) Phần tử Password: Đối tượng Password là đối tượng mà khi

gõ bất kỳ ký tự nào vào cũng đều hiển thị dấu sao(*). Dùng để

nhập những thông tin bí mật như mật khẩu...

dateVar.getYear()

Date.parse (dateStr)

115

116

Thiết kế Web

Đối tượng và sự kiện

dateVar.setDay(day)

Đặt ngày trong thá ng là day cho dateVar.

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

dateVar.setHours(hours)

dateVar.setMinutes(minutes)

dateVar.setMonths(months)

Đặt giờ là hours cho dateVar.

Đặt phút là minutes cho dateVar.

Đặ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ừ ngày .

Đặt năm là years cho dateVar.

Trả lại chuỗi biểu diễn dateVar dưới dạng GMT.

Trả lại chuỗi biểu diễn dateVar theo khu vực thời gian

hiện thời.

- Cá c thuộc tí nh:

dateVar.setYear(years)

dateVar.toGMTString()

dateVar.toLocaleString()

E

Hằng số Euler, khoảng 2,718.

LN2

logarit tự nhiên của 2, khoảng 0,693.

logarit tự nhiên của 10, khoảng 2,302.

logarit cơ số 2 của e, khoảng 1,442.

Giá trị của , khoảng 3,14159.

LN10

LOG2E

PI

Date.UTC (year, month, day Trả lại số lượng mili giâ y từ GMT.

[,hours] [,minutes] [,seconds])

- Ví dụ:

SQRT1_2

SQRT2

Căn bậc 2 của 0,5, khoảng 0,707.

Căn bậc 2 của 2, khoảng 1,414.

117

118

Thiết kế Web

Đối tượng và sự kiện

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

- Cá c phương thức:

Math.abs (number)

Math.acos (number)

Trả lại giá trị tuyệt đối của 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.

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.asin(number)

- Cá c phương thức:

str.anchor (name)

Math.atan(number)

Math.ceil(number)

Trả lại giá trị arc tan (theo radian) của number.

Trả lại số nguyên nhỏ nhất lớn hơn hoặc bằng number.

Đượ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>.

Kết quả giống như thẻ <BIG> trên chuỗi str.

Kết quả giống như thẻ <BLINK> trên chuỗi str.

Kết quả giống như thẻ <BOLD> trên chuỗi str.

Trả lại ký tự thứ a trong chuỗi str.

Math.cos (number)

Math.exp(number)

Math.floor (number)

Trả lại giá trị cosine của number.

Trả lại giá trị e^ number, với e là hằng số Euler.

Trả lại số nguyên lớn nhất nhỏ hơn hoặc bằng number.

str.big()

str.blink()

str.bold()

str.charAt(a)

str.fixed()

str.fontcolor()

str.fontsize(size)

str.index0f(srchStr [,index])

Math.log(number)

Math.max (num1,num2)

Trả lại logarit tự nhiên của number.

Trả lại giá trị lớn nhất giữa num1 và num2

Kết quả giống như thẻ <TT> trên chuỗi str.

Kết quả giống như thẻ <FONTCOLOR = color>.

Kết quả giống như thẻ <FONTSIZE = size>.

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

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.

str.italics()

Kết quả giống như thẻ <I> trên chuỗi str.

Math.sin(number)

Math.sqrt (number)

Math.tan(number)

Trả lại sincủa number.

Trả lại cănbậc 2 của number.

119

120

Thiết kế Web

Trả lại tag của number.

20

Bài giảng Thiết kế Web HTML + JavaScript + CSS - Dzoãn Xuân Thanh