giáo trình tin học_thiết kế web
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.84 MB, 21 trang )
22/04/2011
1
Thiết kế WebThiết kế Web
11
THIẾT KẾ WEBTHIẾT KẾ WEB
Html + JavaScript + Css
Dzoãn Xuân Thanh
Lời nói đầu
Mục tiêu:
• Hiểu được cấu trúc của một website.
• 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)
Công cụ hổ trợ: Dreamweaver
Thiết kế WebThiết kế Web
33
Các khái niệm
1. Các dịch vụ cơ bản trên Internet
• 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
• 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ư: ; ,
.
Thiết kế WebThiết kế Web
44
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.
• 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
Thiết kế WebThiết kế Web
55
Các khái niệm
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ể.
6. Home Page: Trang đầu tiên-Trang chủ của 1 Website
(Index.htm, Default.htm . . .)
Thiết kế WebThiết kế Web
66
22/04/2011
2
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.
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.
ThiếtThiết kếkế WebWeb
77
Các khái niệm
Để 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, . . .
ThiếtThiết kếkế WebWeb
88
.Com : Thương mại
.Edu : Tổ chức giáo dục
.Net : Các mạng thông tin
.Info : Các mạng thông tin
.Int : Tổ chức quốc tế
.Org : Các tổ chức khác
.Gov : Tổ chức chính phủ
.Mil : Tổ chức quân sự
Các khái niệm
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.
10. URL(Uniform Resource Location): Địa chỉ truy cập của
trang Web - 1 tập tin trong Website
http://doamainname/……/File.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,
ThiếtThiết kếkế WebWeb
99
Cấu trúc trang HTML
ThiếtThiết kếkế WebWeb
1010
<HTML>
<HEAD>
<TITLE> Nội dung tiêu đề </TITLE>
</HEAD>
<BODY>
Phần nội dung của trang web
</BODY>
</HTML>
Ví dụ:
<HTML>
<HEAD>
<TITLE> Welcome to HTML</TITLE>
</HEAD>
<BODY>
My first HTML document
</BODY>
</HTML>
CÁC THẺ ĐỊNH DẠNG VĂN BẢN
1. Định dạng Kiểu dáng
<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>
Nội dung<SUB>
ở đây
</SUB>
ThiếtThiết kếkế WebWeb
1111
CÁC THẺ ĐỊNH DẠNG VĂN BẢN
2. Thay đổi Font, Size
• <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.
• <FONT SIZE=“n”> Nội dung văn bản </FONT>
Xác định cỡ chữ cho nội dung văn bản
ThiếtThiết kếkế WebWeb
1212
22/04/2011
3
CÁC THẺ ĐỊNH DẠNG VĂN BẢN
Ví dụ 1:
ThiếtThiết kếkế WebWeb
1313
Thiết kế WebThiết kế Web
1414
Ví dụ 2:
ThiếtThiết kếkế WebWeb
1515
Thiết kế WebThiết kế Web
1616
3. Canh lề đoạn văn bản
<P Align=”Hướng”> Đoạn văn bản </P>
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>
ThiếtThiết kếkế WebWeb
1717
4.Tạo văn bản đề mục
Đề 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ề.
<H1> Nội dung văn bản đề mục cấp 1</H1>
<H2> Nội dung văn bản đề mục cấp 2</H2>
. . . . .
<H6> Nội dung văn bản đề mục cấp 6</H6>
VD:
<H3 Align=Center> Đề mục cấp, 3 canh lề giữa</H3>
ThiếtThiết kếkế WebWeb
1818
22/04/2011
4
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
ThiếtThiết kếkế WebWeb
1919
BẢNG MÃ MÀU
Tên màu Trị Tên màu Trị
Black Đen #000000 Olive Nâu vàng #808000
Red Đỏ #FF0000 Teal Nâu sẫm #008080
Blue Xanh #0000FF Maroon Nâu #800000
Navy X.Đãm #000800 Gray Xám #808080
Lime V.Chanh #FFFFFF Fuchsia Hồng #FF00FF
White Trằng #FFFFFF Green Lá #008000
Rurple Đ.Tía #800080 Silver Bạc #C0C0C0
Yellow Vàng #FFFF00 Aqua Ngọc #00FFFF
Sử dụng màu
• 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
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
ThiếtThiết kếkế WebWeb
2020
<BODY BgColor=“Màu” Text=“Màu” Link=“Màu” VLink=“Màu”
Alink=“Màu”>
. . . . . Nội dung trang Web. . . . .
</BODY>
Sử dụng màu
• 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.
VD: <FONT FACE=“Tahoma” COLOR=“Red” SIZE=3>
Công nghệ thông tin </FONT>
ThiếtThiết kếkế WebWeb
2121
<FONT COLOR =“Trịmàu”> Nội dung văn bản </FONT>
HIỆU ỨNG CHUYỂN ĐỘNG CHỮ
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 ;
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
ThiếtThiết kếkế WebWeb
2222
<Marquee Behavior=“Hiệu ứng” Direction=“Hướng” Loop=n1
SrollAmount=n2 ScrollDelay=n3 BgColor=“Trị màu”>
Chuỗi ký tự
</Marqueee>
HIỆU ỨNG CHUYỂN ĐỘNG CHỮ
Ví dụ:
ThiếtThiết kếkế WebWeb
2323
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).
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
ThiếtThiết kếkế WebWeb
2424
22/04/2011
5
LIST – DANH SÁCH
Để tạo ra danh sách không có thứ tự ta dùng các tag sau:
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 1
o List 2
ThiếtThiết kếkế WebWeb
2525
<UL type=”kiểu” >
<LI> List 1 </li>
<LI> List 2 </li>
…………………
<LI> List n </li>
</UL>
LIST – DANH SÁCH
Ví dụ:
ThiếtThiết kếkế WebWeb
2626
Thiết kế WebThiết kế Web
2727
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:
ThiếtThiết kếkế WebWeb
2828
<ol type=”kiểu” start=”giá trị”>
<li> List 1 </li>
<li> List 2 </li>
…………………
<li> List n </li>
</ol>
LIST – DANH SÁCH
Trong đó:
- type= 1: giá trị sẽ là số . start: chỉ mục bắt đầu
Ví dụ:
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,…
ThiếtThiết kếkế WebWeb
2929
Ví dụ:
<ol type=“1” start=“4”>
<li> list 1 </li>
<li> list 2 </li>
</ol>
Kết quả:
4. list 1
5. list 2
LIST – DANH SÁCH
Ví dụ 1:
ThiếtThiết kếkế WebWeb
3030
22/04/2011
6
Thiết kế WebThiết kế Web
3131
LIST – DANH SÁCH
Ví dụ 2:
ThiếtThiết kếkế WebWeb
3232
Thiết kế WebThiết kế Web
3333
Đư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
Thiết kế WebThiết kế Web
3434
<BODY Background=“tên tập tin” Bgproperties =Fixed>
Đư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
ảnh
• 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
<BODY Background ="Images/Banner.JPG" >
Thiết kế WebThiết kế Web
3535
Đưa hình ảnh vào trang web
2. Chèn hình ảnh vào trang Web
• 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">
<Img Src=" /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
Thiết kế WebThiết kế Web
3636
<IMG Src=“tên tập tin” ” Width=“n1” Height=“n2”
Align=“Hướng” Border=“n” Alt=“Chú thích”>
22/04/2011
7
Đưa hình ảnh vào trang web
• 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
Thiết kế WebThiết kế Web
3737
Đưa hình ảnh vào trang web
Ví dụ:
Thiết kế WebThiết kế Web
3838
Thiết kế WebThiết kế Web
3939
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:
Thiết kế WebThiết kế Web
4040
<A HREF =“Địa chỉ liên kết” target=“_blank”> Nhãn liên kết </A>
Link – Liên kết
1.Liên kết cục bộ (local link):
VD:<A href=“about.html”>Abouts</A>
2. Liên kết đến một hình ảnh:
VD: <A href =”Img/Product.gif”>View Image</A>
<A href =”Img/Product.gif”><img src=“Img/Product.gif”</A>
3. Liên kết đến một trang web khác trên internet:
VD: <A href =””>ITC</A>
4. Liên kết đến địa chỉ email:
VD:<a href =”mailto:”>SendMail</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>
ThiếtThiết kếkế WebWeb
4141
Link – Liên kết
Ví dụ:
Thiết kế WebThiết kế Web
4242
22/04/2011
8
Thiết kế WebThiết kế Web
4343
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
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>
<HEAD><TITLE> </TITLE></HEAD>
<Embed SRC="chiaxa.wma" AutoStart=False><BR><BR>
<Embed SRC="Tainan.mpeg" AutoStart=true width=300 height=250>
</HTML>
Thiết kế WebThiết kế Web
4444
<Embed Src=“Tên tập tin” AutoStart=“True”|“False” Align=“Hướng”
Widht=n1 Height=n2>
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>:
<TABLE border=giátrị cellpadding=X cellspacing=Y bordercolor=”màu”
bgcolor=”màu” background=”image” >
<TR> <!– xác định hàng >
<TD> Hàng 1 cột 1 </TD>
<TD> Hàng 1 cột 2 </TD>
<TD> Hàng 1 cột 3 </TD>
</TR>
<TR>
<TD> Hàng 2 cột 1 </TD>
<TD> Hàng 2 cột 2 </TD>
<TD> Hàng 2 cột 3 </TD>
</TR>
</TABLE>
Thiết kế WebThiết kế Web
4545
Table – Bảng biểu
- 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
- 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>
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
Thiết kế WebThiết kế Web
4646
Ví dụ 1:
Thiết kế WebThiết kế Web
4747
Table – Bảng biểu
Ví dụ 2:
Thiết kế WebThiết kế Web
4848
22/04/2011
9
Thiết kế WebThiết kế Web
4949
Table – Bảng biểu
Ví dụ 3:
Thiết kế WebThiết kế Web
5050
Thiết kế WebThiết kế Web
5151
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:
Thiết kế WebThiết kế Web
5252
<FORM các thuộc tính>
Nội dung biểu mẫu
Nút gửi dữ liệu
</FORM>
Form – Biểu mẫu
2. Định Nghĩa Form:
- Dạng 1: Chỉ trình bày không gửi dữ liệu
<Form Name=Tên>
Các đối tượng trong Form
</Form>
- Dạng 2: Thông tin từ Form chuyển cho địa chỉ Mail
<Form Name=Tên Method=“Post” Action=”Mailto: Địa chỉ mail>
Các đối tượng trong Form
</Form>
- Dạng 3: Thông tin từ Form chuyển lên Webserver
<Form Name=Tên Method=“Pos”t Action=”Trang xử lý”>
Các đối tượng trong Form
</Form>
Thiết kế WebThiết kế Web
5353
Form – Biểu mẫu
3. Các thành phần trong form:
a. Textarea: tạo ra vùng văn bản, có thể nhập nhiều dòng
Trong đó:
- 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
Thiết kế WebThiết kế Web
5454
<textarea
rows=… cols=… name=”… “>
nội dung
</textarea>
22/04/2011
10
Form – Biểu mẫu
b. Textbox: Để nhập vào một dòng đơ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ị
Thiết kế WebThiết kế Web
5555
<INPUT type=”text” name=”…” maxlenght
=…
size=… value=” “>
Form – Biểu mẫu
c. PasswordBox: giống textbox nhưng không hiển thị các ký tự
d. Radiobutton: Các nút lựa chọn một trong nhiều.
Trong đó:
-Value: chứa dữ liệu sẽ gửi đến server khi radiobutton đã checked
Thiết kế WebThiết kế Web
5656
<INPUT type=”password” maxlenght=“… “ name=”… “ size=… >
<INPUT type=”radio” name=” “ checked
value=”…“ > văn bản đại diện
Form – Biểu mẫu
e. Checkbox: Hộp chọn checkbox
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
Trong đó: - Multipe: thuộc tính này cho phép bạn chọn nhiều mục
Thiết kế WebThiết kế Web
5757
<INPUT type=”checkbox” name=” “ value=” “
checked> văn bản đại diện
<SELECT size=” “ multipe>
<OPTION selected value=” “> nội dung </OPTION>
… …
<OPTION> … … </OPTION>
</SELECT>
Form – Biểu mẫu
g. Submit and reset buttons:
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.
Trong đó:
- 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.
Thiết kế WebThiết kế Web
5858
<Input Type=”Submit” Value=”Nhãn”> Hoặc
<Button Type=”Submit” Value=”Nhãn”>
Hoặc
<Button Type=”Submit”> <Img=“ảnh”> </Button>
<Input type=”reset” name=” “ value=”Reset” >
Form – Biểu mẫu
Ví dụ 1:
Thiết kế WebThiết kế Web
5959
Thiết kế WebThiết kế Web
6060
22/04/2011
11
Form – Biểu mẫu
Ví dụ 2:
Thiết kế WebThiết kế Web
6161
Thiết kế WebThiết kế Web
6262
FAQ
?
?
?
Thiết kế WebThiết kế Web
6363
THIẾT KẾ WEBTHIẾT KẾ WEB
JavaScript
Dzoãn Xuân Thanh
Lời nói đầu
Mục tiêu:
• Hiểu được cấu trúc của một website.
• 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)
Công cụ hổ trợ: Dreamweaver
Thiết kế WebThiết kế Web
6565
NGÔN NGỮ KỊCH BẢN JAVASCRIPT
<HTML>
<HEAD><TITLE> JavaScript Exemple </TITLE>
<SCRIPT LANGUAGE= “JavaScript”>
var name=window.prompt(“Hello! What’s your name ?”,””);
document.write(“Hello ” + name + “ ! Do you like JavaScript ”);
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Thiết kế WebThiết kế Web
6666
Ví dụ:
22/04/2011
12
NGÔN NGỮ KỊCH BẢN JAVASCRIPT
Thiết kế WebThiết kế Web
6767
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;
Thiết kế WebThiết kế Web
6868
Kiểu dữ liệu
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), 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)
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ũ.
Để 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: 9.87 hay 9.87E14
Thiết kế WebThiết kế Web
6969
Kiểu dữ liệu
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
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 ' '
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
( \" ),
VD: document.write(“ \”This text inside quotes.\” ”);
Thiết kế WebThiết kế Web
7070
Toán tử & Biểu thức trong JavaScript
1. Định nghĩa và phân loại biểu thức:
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!”
• 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"
Thiết kế WebThiết kế Web
7171
Toán tử & Biểu thức trong JavaScript
2. Các toán tử (Operator):
a) Gán:
b) So sánh
Thiết kế WebThiết kế Web
7272
22/04/2011
13
Toán tử & Biểu thức trong JavaScript
c) Số học:
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ụ: "abc" + "xyz" được "abcxyz“
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.
Thiết kế WebThiết kế Web
7373
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:
Ví dụ:
if (x==10){
document.write(“x bằng 10, đặt lại x bằng 0.”);
x = 0;
} else
document.write(“x không bằng 10.”);
Thiết kế WebThiết kế Web
7474
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
}
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:
a) For:
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>
Thiết kế WebThiết kế Web
7575
for (initExpr; <điều kiện>; incrExpr){
//Các lệnh được thực hiện trong khi 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
Ví dụ: //Kết quả của VD này giống như VD trước
x=1;
while (x<=10){
y=x*25;
document.write("x="+x +"; y = "+ y + "<BR>");
x++;
}
Thiết kế WebThiết kế Web
7676
while (<điều kiện>){
//Các câu lệnh thực hiện trong khi lặp
}
Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng
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: 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:
while (x<100){
if (x<50) break;
x++;
}
Thiết kế WebThiết kế Web
7777
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ú 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:
x=0;
while (x<=10) {
document.write(“Giá trị của x là:”+ x+”<BR>”);
if (x=5) {
x=8;
continue;
}x++;
}
Thiết kế WebThiết kế Web
7878
Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng
22/04/2011
14
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ú pháp:
Thiết kế WebThiết kế Web
7979
Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng
for (<variable> in <object>){
//Các câu lệnh
}
Ví dụ: lấy ra tất cả các thuộc tính của đối tượng Window và in ra tên
của mỗi thuộc tính.
<HTML>
<HEAD>
<TITLE>For in Example </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
document.write("The properties of the Window object are: <BR>”);
for (var x in window)
document.write(“ "+ x + ", ");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Thiết kế WebThiết kế Web
8080
Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng
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.
Cú pháp:
objectvar = new object_type([param1],[param2] ,[paramN])
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
Thiết kế WebThiết kế Web
8181
Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng
<HTML>
<HEAD><TITLE>New Example </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
function Nguoi(Ten, HoLot, Tuoi, Phai){
this.Ten=Ten;
this.HoLot= HoLot;
this. Tuoi =Tuoi;
this.Phai= Phai;
}
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>
</HEAD>
<BODY>
</BODY></HTML>
Thiết kế WebThiết kế Web
8282
Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đố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:
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>
<HEAD><TITLE>With Example </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
with (document)
{ 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>
Thiết kế WebThiết kế Web
8383
Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng
with (object){
// statement
}
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ú pháp:
Thiết kế WebThiết kế Web
8484
function fnName([param1],[param2], ,[paramN]) {
//function statement
}
22/04/2011
15
Function - Hàm
• Ví dụ:
<HTML> <Head> <Title>Function</Title>
<Script Language="JavaScript">
function testQuestion(question){
var answer=eval(question);
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;
}
</Script></Head>
<Body>
<Script Language="JavaScript">
var result=testQuestion("10 + 10");
document.write(result);
</Script></Body></HTML>
Thiết kế WebThiết kế Web
8585
Function - Hàm
Các hàm hổ trợ:
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ụ:
<HTML> <Head><Title>Eval Example </Title>
<Script Language= "JavaScript">
var string=”10+ Math.sqrt(64)”;
document.write(string+ “=”+ eval(string));
</Script>
</Head>
<Body>
</Body></HTML>
Thiết kế WebThiết kế Web
8686
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.
Cú pháp: parseInt (string, [, radix])
Ví dụ:
<HTML> <Head><Title>ParserInt Example </Title><Body>
<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>
</Body>
</HTML>
Thiết kế WebThiết kế Web
8787
Function - Hàm
3. Hàm parseFloat: Hàm này giống hàm parseInt nhưng nó
chuyển chuỗi thành số biểu diễn dưới dạng dấu phẩy động.
Cú pháp: parseFloat (string)
Ví dụ:
<Body>
<script language= "JavaScript">
document.write("This script will show how diffrent strings are ");
document.write("Converted using parseFloat<BR>");
document.write("137= " + parseFloat("137") + "<BR>");
document.write("137abc= " + parseFloat("137abc") + "<BR>");
document.write("abc137= " + parseFloat("abc137") + "<BR>");
document.write("1abc37= " + parseFloat("1abc37") + "<BR>");
</Script>
</Body>
Thiết kế WebThiết kế Web
8888
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:
function taomang(n) {
this.length = n;
for (var x=1; x<=n; x++){
this[x]=0
}
return this;
}
Thiết kế WebThiết kế Web
8989
Array - Mảng
Ví dụ:
<HTML> <Head><Title> Array Exemple </Title>
<Script Language= "JavaScript">
function taomang(n) {
this.length = n;
for (var i=1; i<=n; i++){
this[i]=0
}
return this;
}
a = new taomang(10);
a[1] = "Nghệ An";
a[2] = "Hà Nội";
document.write(a[1] + "<BR>");
document.write(a[2] + "<BR>");
</Script>
</Head>
<Body> </Body></HTML>
Thiết kế WebThiết kế Web
9090
22/04/2011
16
Đối tượng và sự kiện
1. Các đối tượng::
Thiết kế WebThiết kế Web
9191
Đối tượng và sự kiện
2. Sự kiện:
- Một số sự kiện trong JavaScript:
Thiết kế WebThiết kế Web
9292
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
Đối tượng và sự kiện
- Các sự kiện có sẵn của một số đối tượng:
Thiết kế WebThiết kế Web
9393
Đối tượng Chương trình xử lý sự kiện có sẵn
Selection list onBlur, onChange, onFocus
Text onBlur, onChange, onFocus, onSelect
Textarea onBlur, onChange, onFocus, onSelect
Button onClick
Checkbox onClick
Radio button onClick
Hypertext link onClick, onMouseOver, onMouseOut
Clickable Imagemap area onMouseOver, onMouseOut
Reset button onClick
Submit button onClick
Document onLoad, onUnload, onError
Window onLoad, onUnload, onBlur, onFocus
Framesets onBlur, onFocus
Form onSubmit, onReset
Image onLoad, onError, onAbort
Đối tượng và sự kiện
- Ví dụ:
<HTML>
<HEAD> <TITLE>Event Handler</TITLE>
</HEAD>
<BODY onLoad="alert('Welcome to my page!');"
onUnload="alert('Goodbye! ');">
<IMG SRC="Logo.jpg">
</BODY>
</HTML>
Thiết kế WebThiết kế Web
9494
Đối tượng và sự kiện
Thiết kế WebThiết kế Web
9595
3. Các đối tượng thường dùng
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.
- Các thuộc tính:
Đối tượng và sự kiện
Thiết kế WebThiết kế Web
9696
- Ví dụ: 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>
22/04/2011
17
Đối tượng và sự kiện
Thiết kế WebThiết kế Web
9797
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.
- Các thuộc tính:
defaultStatus Thông báo ngầm định hiển thị lên trên thanh trạng thái của cửa sổ
Frames Mảng xác định tất cả các frame trong cửa sổ.
Length Số lượng các frame trong cửa sổ cha.
Name Tên của cửa sổ hiện thời.
Parent Đối tượng cửa sổ chA
Self 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ổ.
Top Cửa sổ ở trên cùng.
Window Cửa sổ hiện thời.
Đối tượng và sự kiện
Thiết kế WebThiết kế Web
9898
- Các phương thức:
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
WindowReference.close Đóng cửa sổ windowReference.
confirm("message") Hiển thị hộp thoại với chuỗi "message", nút OK
và nút Cancel. Trả lại trị True cho OK và False
cho Cancel.
[windowVar = ][window]. open("URL",
"windowName", [ "windowFeatures" ] )
Mở cửa sổ mới.
prompt ("message" [,"defaultInput"]) Mở 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.
Đối tượng và sự kiện
ThiếtThiết kếkế WebWeb
9999
- Ví dụ:
<HTML>
<Head><Title>Window Object </Title></Head>
<Body>
<Form>
<Input Type="button" VALUE="Open Second Window"
onClick="msgWindow=window.open('','window2','resizable=no,width=200,height=200')">
<BR><A HREF="doc.htm" TARGET="window2"> Load a File into window2 </A>
<Input Type="button" VALUE="Close Second Window" onClick="msgWindow.close()">
</Form>
</Body>
</HTML>
Đối tượng và sự kiện
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:
ThiếtThiết kếkế WebWeb
100100
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 URLcủa văn bản gọi nó.
title Nội dung của thẻ <TITLE>.
vlinkColor Giống thuộc tính VLINK.
Đối tượng và sự kiện
- Các phương thức:
Thiết kế WebThiết kế Web
101101
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.
document.open (["mineType"]) Mở một stream để thu thập dữ liệu vào
của các phương thức write và writeln.
document.write(expression1
[,expression2] [,expressionN])
Viết biểu thức HTML lên văn bản trông
một cửa sổ xác định.
document.writeln (expression1
[,expression2] [,expressionN] )
Giống phương thức trên nhưng khi hết
mỗi biểu thức lại xuống dòng.
Đố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/chap1/page2.html#topic3
- Các thuộc tính:
Thiết kế WebThiết kế Web
102102
hash Tên anchor của vị trí hiện thời (VD topic3).
Host Phần hostname:port của URL (VD www.abc.com ).
Hostname Tên của host và domain (VD www.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).
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) (VD http:).
Search Câu truy vấn tìm kiếm có thể ở cuối URL cho các script CGI.
22/04/2011
18
Đối tượng và sự kiện
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:
• 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.
• 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.
Thiết kế WebThiết kế Web
103103
Đố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:
Thiết kế WebThiết kế Web
104104
hash Tên anchor của vị trí hiện thời (VD topic3).
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).
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) (VD 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>
Đố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 thuộc tính:
Thiết kế WebThiết kế Web
105105
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
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
Đối tượng và sự kiện
- 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
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.
Thiết kế WebThiết kế Web
106106
Đối tượng và sự kiện: phần tử Text
- Các thuộc tính và phương thức:
-VD: Trang TextField.htm Tự động cập nhật các trường text .
<HTML><HEAD><TITLE>TextFieldExample</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function echo(form,currentField){
if (currentField == "first")
form.second.value = form.first.value;
else
form.first.value = form.second.value;
}
</SCRIPT></HEAD>
<BODY><FORM> <INPUT TYPE=text NAME="first" onChange="echo(this.form,this.name);">
<INPUT TYPE=text NAME="second" onChange="echo(this.form,this.name);">
</FORM></BODY></HTML>
Thiết kế WebThiết kế Web
107107
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)
Đố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ụ:
<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.
• 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.
• Cách thức: focus(), select(), và blur()
• Sự kiện: onBlur, onForcus, onChange, onSelect.
Thiết kế WebThiết kế Web
108108
22/04/2011
19
Đố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:
- Sự kiện: onClick
Thiết kế WebThiết kế Web
109109
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 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
value 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)
Đối tượng và sự kiện: phần tử Raido
- Ví dụ:
Thiết kế WebThiết kế Web
110110
Đối tượng và sự kiện: phần tử checkbox
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:
- Sự kiện: onClick
- Ví dụ:
Thiết kế WebThiết kế Web
111111
checked Cho biết trạng thái hiện thời của checkbox
defaultChecked Cho biết trạng thái mặc định của phần tử
name Cho biết tên của phần tử được chỉ định trong thẻ INPUT
value Cho biết giá trị hiện thời của phần tử được chỉ định trong thẻ
INPUT
click() Mô tả một click vào checkbox (Phương thức)
Đối tượng và sự kiện: phần tử Select
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.
• 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
- Thuộc tính của các mục chọn (option):
Thiết kế WebThiết kế Web
112112
DEFAULTSELECTED
Cho biết option có mặc định là 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 và sự kiện: phần tử Button
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:
- Sự kiện duy nhất là onClick.
- Ví dụ:
Thiết kế WebThiết kế Web
113113
Đối tượng và sự kiện: phần tử Reset
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
- Ví dụ:
Thiết kế WebThiết kế Web
114114
22/04/2011
20
Đố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
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ý.
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.
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
Thiết kế WebThiết kế Web
115115
Đối tượng và sự kiện
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:
Thiết kế WebThiết kế Web
116116
dateVar.getDate() Trả lại ngày trong tháng (1-31) cho dateVar.
dateVar.getDay() Trả lại ngày trong tuần (0=chủ nhật, 6=thứ bảy)
cho dateVar.
dateVar.getHours() Trả lại giờ (0-23) cho dateVar.
dateVar.getMinutes() Trả lại phút (0-59) cho dateVar.
dateVar.getSeconds() Trả lại giây (0-59) cho dateVar.
dateVar.getTime() Trả lại số lượng các mili giây từ ngày .
dateVar.getTimeZoneOff
set()
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.
Đối tượng và sự kiện
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ừ ngày .
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ừ GMT.
Thiết kế WebThiết kế Web
117117
- Ví dụ:
Đối tượng và sự kiện
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
- Các thuộc tính:
Thiết kế WebThiết kế Web
118118
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.
Đối tượng và sự kiện
- Các phương thức:
ThiếtThiết kếkế WebWeb
119119
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.
Đố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:
Thiết kế WebThiết kế Web
120120
str.anchor (name) Được sử dụng để tạo ra thẻ <A> (một cách động).
Tham số name là thuộc tính NAME của thẻ <A>.
str.big() Kết quả giống như thẻ <BIG> trên chuỗi str.
str.blink() Kết quả giống như thẻ <BLINK> trên chuỗi str.
str.bold() Kết quả giống như thẻ <BOLD> trên chuỗi str.
str.charAt(a) Trả lại ký tự thứ a trong chuỗi str.
str.fixed() Kết quả giống như thẻ <TT> trên chuỗi str.
str.fontcolor() Kết quả giống như thẻ <FONTCOLOR = color>.
str.fontsize(size) Kết quả giống như thẻ <FONTSIZE = size>.
str.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
str.italics() Kết quả giống như thẻ <I> trên chuỗi str.
22/04/2011
21
Đối tượng và sự kiện
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.
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.
Thiết kế WebThiết kế Web
121121
XEM LẠI CÁC LỆNH VÀ MỞ RỘNG
Lệnh/Mở rộng
Kiểu Mô tả
blur() cách thức JavaScript Mô tả việc dòch chuyển con trỏ từ một phần tử
form.action cách thức JavaScript
Xâu chứa giá trò của thuộc tính ACTION trong
thẻ FORM
form.elemrnts thuộc tính JavaScript
mảng chứa danh sách các phần tử trong form
(như checkbox, trường text, danh sách lựa
chọn)
form.encoding thuộc tính JavaScript
xâu chứa kiểu MIME sử dụng khi chuyển thông
tin từ form tới server
form,name thuộc tính JavaScript
Xâu chứa giá trò thuộc tính NAME trong thẻ
FORM
form.target thuộc tính JavaScript
Xâu chứa tên cửa sổ đích bởi một form
submition
form.submit cách thức JavaScript Mô tả việc submit một form HTML
type thuộc tính JavaScript
ánh xạ kiểu của một phần tử form thành một
xâu.
onSubmit Thẻ sự kiện thẻ sự kiện cho việc submit
button thuộc tính HTML
Thuộc tính kiểu cho các nút bấm của HTML
(<INPUT TYPE=button>)
checkbox thuộc tính HTML
Thuộc tính kiểu cho các checkbox của HTML
(<INPUT TYPE=checkbox>)
pasword thuộc tính HTML
Thuộc tính kiểu cho các dòng pasword của
HTML(<INPUT TYPE=password>)
Thiết kế WebThiết kế Web
122122
XEM LẠI CÁC LỆNH VÀ MỞ RỘNG
radio thuộc tính HTML
Thuộc tính kiểu cho các nút radio của HTML (<INPUT
TYPE=radio>)
reset thuộc tính HTML
Thuộc tính kiểu cho các nút reset của HTML (<INPUT
TYPE=reset>)
SELECT thẻ HTML Hộp thẻ cho danh sách lựa chọn
OPTION thẻ HTML
chỉ ra các lựa chọn trong danh sách lựa
chọn(<SELECT><OPTION>Option
1<OPTION>Option 2</SELECT>)
submit thuộc tính HTML
Thuộc tính kiểu của nút submit (<INPUT
TYPE=submit>)
text thuộc tính HTML
Thuộc tính kiểu của trường trong form (<INPUT
TYPE=text>)
TEXTAREA Thẻ HTML
Hộp thẻ cho nhiều dòng text (<TEXTAREA> defautl
text </TEXTAREA>)
name thuộc tính JavaScript
Xâu chứa tên phần tử HTML (button, checkbox,
password )
value thuộc tính JavaScript
Xâu chứa giá trò hiên thời của một phần tử
HTML(button, checkbox, password )
click() cách thức JavaScript
Mô tả việc kích vào một phần tử trên form (button,
checkbox,password)
onClick thuộc tính JavaScript
Thẻ sự kiện cho sự kiện kích (button, checkbox,
radio button, reset, selection list, submit)
checked thuộc tính JavaScript
Giá trò kiểu Boolean mô tả một lựa chọn
check(checkbox, radio button)
Thiết kế WebThiết kế Web
123123
XEM LẠI CÁC LỆNH VÀ MỞ RỘNG
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)
Thiết kế WebThiết kế Web
124124
XEM LẠI CÁC LỆNH VÀ MỞ RỘNG
dafautlSelected thuộc tính JavaScript
Giá trò Boolean mô tả khi có một lựa chọn
được đặt là mặc đònh (seledtion list)
options thuộc tính JavaScript
Mảng các lựa chọn trong danh sách lựa
chọn
text thuộc tính JavaScript
Dòng text hiển thò cho một thành phần của
menu trong danh sách lựa chọn
TABLE thẻ HTML Hộp thẻ cho các bảng HTML
TR thẻ HTML
Hộp thẻ cho các hàng của một bảng
HTML
TD thẻ HTML
Hộp thẻ cho các ô của một hàng trong
một bảng HTML
COLSPAN thuộc tính HTML
Là thuộc tính của thẻ TD mô tả trong một ô
của bảng có nhiều cột
ROWSPAN thuộc tính HTML
Là thuộc tính của thẻ TD mô tả trong một ô
của bảng có nhiều hàng
BODER thuộc tính HTML
Là thuộc tính của thẻ TABLE mô tả độ rộng
đường viền của bảng
document.forms() thuộc tính JavaScript
mảng của các đối tượng form với một
danh sách các form trong một document
string.substring() cách thức JavaScript
Trả lại một xâu con của xâu string từ tham
số vò trí ký tự đầu đến vò trí ký tự cuối
Math.floor() cách thức JavaScript
Trả lại một giá trò nguyên tiếp theo nhỏ hơn
giá trò của tham số đưa vào.
string.length thuộc tính JavaScript
Giá trò nguyên của số thứ tự ký tự cuối
cùng trong xâu string
Thiết kế WebThiết kế Web
125125
FAQ
126126
Thiết kế WebThiết kế Web
