Chương 3. Một số công cụ tk web
3.1.1 Tổng quan về HTML
HTML=Hyper Text Markup Language – Ngôn ngữ đánh
dấu siêu văn bản – Ngôn ngữ để viết các trang web.
• • Do Tim Berner Lee phát minh và được đưa thành chuẩn năm 1994
• Các trang Web đầysinh động mà bạnthấy trên WWW
là các trang siêu vănbản đượcviếtbằng HTML
• HTML cho phép bạntạo ra các trang phốihợp hài hoà
giữavănbản thông thường vớihình ảnh, âm thanh,
video, các mốiliênkết đến các trang siêu vănbản khác
HTML là ngôn ngữ củacácthẻđánh dấu-Tag. Các
thẻ này xác định cách thức trình bày đoạnvănbản
tương ứng trên màn hình.
• HTML không phân biệtchữ hoa, chữ thường
• Các trình duyệtthường không báo lỗi cú pháp HTML.
Nếuviết sai cú pháp chỉ dẫn đếnkếtquả hiểnthị
không đúng vớidựđịnh
HyperText
Là các vănbản thông minh biết cách tìm kiếmvàcungcấp
cho người đọc các tài liệu khác có liên quan
Các thông tin mà siêu vănbảnhỗ trợ rất đadạng: văn
bản, hình ảnh, âm thanh,...
Language
HTML là mộtngônngữ tương tự như các ngôn ngữ
lập trình
Nó có cú pháp chặtchẽđể viết các lệnh thựchiện
việctrìnhdiễnvănbản. Các từ khoá có ý nghĩaxác
định đượccộng đồng Internet thừanhậnvàsử dụng.
Ví dụ b = bold, br=break, ...
Text
HTML dựatrênnềntảng là mộtvănbản. Các thành
phầnkhácnhư hình ảnh, âm thanh, video .. đềuphải
"cắmneo" vàomột đoạnvănbảnnào đó.
Hyper?
HTML chophépliênkếtnhiều trang vănbảnrảirác
khắpnơi trên Internet.
Soạn Thảo siêu văn bản
Trang mã nguồn HTML và trang Web?
+ Trang mã nguồn HTML là mộttệpvănbảnbình
thường gồmcáckítự ASCII, có thểđượctạorabằng
bấtcứ bộ soạnthảo thông thường nào.
+ Theo quy ước, tấtcả các tệpmãnguồncủatrang
siêu vănbảnphảicó đuôi là .html hoặc .htm
+ Nói soạn siêu vănbảntứclàtạoratrangmãnguồn
đúng quy định để bộ duyệthiểu đượcvàhiểnthịđúng.
+ Khi dùng bộ duyệt - browser đọcnội dung trang mã
nguồnvàhiểnthị nó lên màn hình máy tính thì ta
thường gọi là trang Web.
+ Vậy trang web không tồntạitrên đĩacứng củamáy
tính. Nó là cái thể hiệncủa trang mã nguồn qua xử lí
củabộ duyệt.
3.1.2 Các thẻ HTML
•Cácthẻ - Tag dùng để báo cho bộ duyệt_brower
cách thứctrìnhbàyvănbản trên màn hình hoặc
dùng để chèn mộtmốiliênkết đếncáctrangkhác...
•Mỗithẻ gồmmộttừ khoá - KEYWORD với cú pháp
Hầuhếtcáclệnh thể hiệnbằng mộtcặphaithẻ : thẻ
mở <KEYWORD> và thẻđóng </KEYWORD>
Ngôn ngữ Javascript
9 JavaScript là ngôn ngữ kịch bản dùng để tạocác
client-side scripts và server-side scripts.
9 JavaScript làm cho việctạo các trang Web động
và tương tác dễ dàng hơn
9 JavaScript là mộtngônngữ kịch bản đượchãng
Sun Microsystems và Netscape phát triển.
9 JavaScript đượcpháttriểntừ Livescript. Của
Netscape
9 Các ứng dụng client chạytrênmộttrìnhduyệt
như Netscape Navigator hoặc Internet Explorer.
Khả năng của Javascript
9JavaScript có thể tăng cường tính động và
tính tương tác của các trang web.
–Cungcấpsự tương tác người dùng
–Thay đổinội dung động
–Xácnhậntínhhợplệ củadữ liệu
Công cụ và môi trường thực thi
9Các công cụ sinh mã JavaScript
–Thuậnlợikhisoạnthảo
–Mãlệnh sẵncó
9Môi trường thựcthi
– Các Scripting ở Client
– Java Script trên Web Server
Chèn Javascript vào HTML
9 Sử dụng thẻ SCRIPT:
<script>
<!--
JavaScript statements;
//-->
</script>
9 Sử dụng một file JavaScript ở ngoài
<script>
</script>
9 Sử dụng các biểuthức JavaScript trong các giá trị
thuộctínhcủathẻ
9 Sử dụng trong các trình điềukhiểnsự kiện
Ví dụ:
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "Javascript">
confirm ("Are you Sure?");
alert("OK");
document.write(" Thank You !");
</SCRIPT>
</HEAD>
</HTML>
Thẻ No script
9Thông báo khi trình duyệtkhônghỗ trợ
JavaScript
<NOSCRIPT>
<B> Trang này có sử dụng JavaScript. Do đóbạncầnsử
dụng trình duyệtcóhỗ trợ JavaScript
</B>
</NOSCRIPT>
Hiển thị 1 dòng text
9Đốitượng document trong JavaScript được
thiếtkế sẵn hai cách thức để xuấtmột dòng text
ra màn hình client: write() và writeln().
9Cách gọimộtcáchthứccủamột đốitượng như
sau:
object_name.property_name
Giao tiếp với người sử dụng
9Hiểnthị một dòng thông báo trên hộphộithoại
alert(”Chuỗi ký tự thông báo");
9Hiểnthị một dòng thông báo trong hộphộithoại
đồng thời cung cấpmộttrường nhậpdữ liệu để
ngườisử dụng nhậpvào
prompt(“Chuỗi thông báo”,”Giá trị mặc định”);
9confirm ("Are you Sure?");
Biến trong Javascript
9 Biếnlàmộtvậtchứa tham chiếu đếnmộtvị trí ở bộ nhớ
máy tính
9 Nó đượcsử dụng để giữ giá trị và có thể thay đổi trong khi
kịch bảnthựcthi
9 Các biếntuântheoquytắc đặttên.
9 Mộtbiến được khai báo sử dụng từ khoá ‘var’.
ví dụ: var A = 10;
9 Các biếncómộtphạmvi đượcxác định trong khi chúng
khai báo trong script.
–Biếntoàncục
–Biếncụcbộ
9 Nguyên dạng là các giá trị không đổi được dùng trong
script.
Các kiểu dữ liệu
9 JavaScript có mộttậpcáckiểudữ liệu.
–Số (number)
–Giátrị logic (boolean)
–Chuỗi(String)
–Giátrị rỗng Null
9 Trong JavaScript, hai biếnkháckiểucóthể kết
hợpvới nhau.
ví dụ: A = “ This apple costs Rs.” + 5
sẽ có kếtquả là mộtchuỗivớigiátrị là "This
apple costs Rs. 5".
Ví dụ:
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "Javascript">
var A = "12" + 7.5;
document.write(A);
</SCRIPT>
</HEAD>
</HTML>C
Các kiểu nguyên thủy
9 Integer – là các hệ thống số thậpphân, thậplục
phân và nhị phân.
9 Floating- point(số thực) – Các số thậpphâncó
phầnthậpphânsử dụng “e” or “”E”và theo sau là
các số nguyên.
9 String – là mộtchuỗirỗng hay chuỗikýtựđược
đặttrongcặpngoặc đơnhoặcngoặckép
9 Boolean–Kiểunàycóhaigiátrị: True or False.
9 null - Kiểu null chỉ có mộtgiátrị: null. Null hàm ý
không có dữ liệu.
Toán tử
9 Các toán tử xử lý mộthoặcnhiềubiếnhoặccác
giá trị (các toán hạng) và trả lạigiátrị kếtquả.
9 JavaScript sử dụng cả hai toán tử mộtngôivàhai
ngôn.
9 Các toán tửđượcphânloạiphụ thuộcquanhệ
chúng thựchiệnnhư:
–Toántử số học
–Toántử so sánh
–Toántử logic
–Toántử chuỗi
–Toántử lượng giá
Toán tử gán
So sánh số học
9So sánh: >,<,>=,<=,==,!=
9Số học: +, -, *, /;
a%b, ++a, a++, --a, a—
9Cộng chuỗi: str1+str2
9Phép toán logic: &&, ||, !
Các lệnh trong Javascript
Lệnh rẽ nhánh
9 Câu lệnh điềukiện được dùng để kiểmtra điều
kiện. Kếtquả xác định câu lệnh hoặckhốilệnh
đượcthựcthi.
9 Các câu lệnh điềukiệnbaogồm:
– If (<ĐK>) Lệnh 1
else Lệnh 2;
– switch (Biến) {
case <Gtrị 1>: <Lệnh 1>; break;
case <Gtrị 2>: <Lệnh 2>; break;
...
case <Gtrị n>: <Lệnh n>; break;
}
Cấu trúc lặp
9Cấutrúc điềukhiểnlặptrongchương trình
là các lệnh lặp.
9Các kiểulệnh lặpbaogồm:
–for
– do …. while
–while
– break & continue
–with
Hàm
9 JavaScript có sẵn các hàm đinh nghĩatrước dùng trong
script.
9 Một vài hàm định nghĩatrước trong JavaScript bao gồm:
– Hàm eval,...
9 Hàm do người dùng tự tạo
function funcName(argument1,argument2,…){
statements;
}
9 Gọihàm
9 Câu lệnh Return
ví dụ về hàm:
9Giảiphương trình bậc2
Các đối tượng cơ bản trong Javascript
Đối tượng
9Thuộctính(biến) dùng để định nghĩa đối
tượng và các phương thức(hàm) tác động
tớidữ liệu đềunằmtrong đốitượng.
9Ví dụ: mộtchiếcxehơilàmột đốitượng.
Các thuộctínhcủanólàcấutạo, kiểu
dáng và màu sắc. Hầuhếtcácchiếcxehơi
đềucómộtvàiphương thức chung như
go(), brake(), reverse().
Thuộc tính và phương thức
9Để truy cậpthuộctínhcủa đốitượng,
chúng ta phảichỉ ra tên đốitượng và
thuộctínhcủanó:
objectName.propertyName
9Để truy cậpphương thứccủa đốitượng,
chúng ta phảichỉ ra tên đốitượng và
thuộctínhcủanó:
objectName.method()
Sử dụng đối tượng
9Khi tạo trang web, chúng ta cầnsử dụng:
–Các đốitượng trình duyệt
–Các đốitượng có sẵn(thay đổiphụ thuộcvào
ngôn ngữ kịch bản đượcsử dụng)
– HTML elements
9Chúng ta cũng có thể tạoracác đốitượng
để sử dụng theo yêu cầucủamình.
Từ khóa This
9Giá trị củanóchỉ ra đốitượng hiệnhành
và có thể có các thuộctínhchuẩnchẳng
hạnnhư tên, độ dài, và giá trịđượcáp
dụng phù hợp.
Lệnh For...in
9Câu lệnh for...in đượcdùng để lặpmỗi
thuộctínhcủa đốitượng hoặcmỗiphầntử
củamộtmảng.
9Cú pháp:
for (variable in object) {
statements;
}
With
9Câu lệnh with được dùng để thựcthitập
hợpcáclệnh mà các lệnh này dùng các
phương thứccủa cùng mộtloại đốitượng.
9thuộctính đượcgáncho đốitượng đã được
xác định trong câu lệnh with.
9Cú pháp:
with (object) {
statements;
}
Từ khóa New
9 Toán tử new được dùng để tạoramộtthựcthể
mớicủamộtloại đốitượng
9 Đốitượng có thể có sẵnhoặcdo người dùng định
nghĩa
– objectName = new objectType (param1 [,param2]
...[,paramN])
– Trong đó:
9 objectName là tên củathựcthểđốitượng mới.
9 ObjectType là mộthàmquyết định loạicủa đối
tượng. Ví dụ Array.
9 Param[1, 2, . . ] là các giá trị thuộctínhcủa đối
tượng.
Hàm eval
9Hàm eval đượcdùng để đánh giá một
chuỗimãlệnh mà không cần tham chiếu
đếnbấtcứđốitượng cụ thể nào.
9Chuỗicóthể là mộtbiểuthức JavaScript,
mộtcâulệnh hoặcmột nhóm câu lệnh
9Biểuthứccóthể bao gồmnhiềubiếnvà
nhiềuthuộctínhcủamột đốitượng.
var x = 5;
var z = 10;
document.write(eval(“x + z + 5”));
Đối tượng string
9Đốitượng String đượcdùng để thao tác
và làm việcvớichuỗivănbản.
9Chúng ta có thể tách chuỗirathànhcác
chuỗicon vàbiến đổichuỗi đó thành các
chuỗihoahoặcthường trong mộtchương
trình.
9Cú pháp tổng quát:
stringName.propertyName
hay
stringName.methodName
Tạo đối tượng string
9Có 3 phương thức khác nhau để tạora
chuỗi.
– Dùng lệnhvarvàgánchonómộtgiátrị.
– Dùng mộttoántử (=) có gán vớimộttênbiến.
– Dùng hàm khởitạo String (string).
Đối tượng Math
9Đốitượng Math có các thuộctínhvà
phương thứcbiểuthị các phép tính toán
họcnângcao.
function doCalc(x) {
var a;
a = Math.PI * x * x;
alert ("The area of a circle with a
radius of " + x + “ is " + a);
}
Đối tượng Date
9Date là một đốitượng có sẵnchứa thông
tin về ngày và giờ.
9Đốitượng Date không có thuộctínhnào.
9Nó có nhiềuphương thức dùng để thiết
lập, lấyvàxử lý các thông tin về thờigian.
Đối tượng date (tt)
9Đốitượng Date lưutrữ thờigiantheosố
mili giây tính từ 1/1/1970 00:00:00
9DateObject = new Date(parameters)
Xử lý sự kiện
9Các sự kiện JavaScript hỗ trợ
9Đặtbộ lắng nghe sự kiện:
<thẻ sựkiện=“lệnh;”>
• onClick
• onChange
• onFocus
•onBlur
• onMouseOver
• onMouseOut
• onLoad
•onSubmit
• onMouseDown
• onMouseUp
Các đối tượng của trình duyệt
DOM
9Mộttínhnăng quan trọng củaJavaScript
là ngôn ngữ dựatrên đốitượng.
9Giúp người dùng phát triểnchương trình
theo môđun và có thể sử dụng lại.
9Đốitượng được định nghĩalàmộtthựcthể
đơnnhấtbaogồm các thuộctínhvà
phương thức.
9Thuộctínhlàgiátrị củamột đốitượng.
Các đối tượng trên trình duyệt:
9 Trình duyệtlàmột ứng dụng đượcsử dụng để hiểnthị nội
dung củatàiliệuHTML.
9 Các trình duyệtcũng đưaramộtsốđốitượng có thểđược
truy cậpvàsử dụng trong script .
9 Chi tiết các thuộctính: tratàiliệuhoặc w3schools
1 vài ứng dụng
9Thay đổithanhtrạng thái, tiêu đề
9Tựđộng refresh
9Kiểm tra tính hợplệ củadữ liệuform
9Hộpthoạitự tạo
9 Calendars
9 Date & Time
9 Document Effects
9 Dynamic Content
(Iframe & Ajax)
9 Form Effects
9 Games
9 Image Effects
9 Galleries,
Mouseover,
Slideshows
9 Links & Tooltips
9 Menus & Navigation
9 CSS Based, Multi-
levels
9 Mouse and Cursor
9 Scrollers
9 Text Animations
9 User/System
Preference
9 Window and Frames
9 XML and RSS
9 Other
Hiệu ứng chữ chạy trên thanh trạng thái của trình duyệt
Lý thuyết
9window là đốitượng quảnlýcửasổ trình
duyệt.
9Đốitượng window có thuộctính status để
xác định thông báo tạmthờixuấthiện
trên thanh trạng thái.
9VD: Để thể hiệndòngchữ Hello World trên
thanh trạng thái ta sử dụng lệnh:
window.status = 'Hello World'
9Lệnh setTimeout(f, n)quy định sau
khoảng thời gian n mili giây hàm f sẽđược
gọi. (f là chuỗilưulệnh cầnthựchiện)
9Giả sử str là mộtchuỗitacó
– str.length: Thuộctínhchobiết độ dài chuỗi
– str.substr(i, n): lấyran kýtự kể từ vị trí
thứ i (Ký tựđầutiên được đánh số là 0)
9Vài lệnh khác cùng nhóm setTimeout
– timeID = setTimeout(f, n)
– clearTimeout(timeID): HủysetTimeout
– intervalID = setInterval(f, n): Sau mỗi
khoảng thờigiann ms lệnh f đượcgọi.
– clearInterval(intervalID): Hủy interval.
Giải thuật
9 Ý tưởng giảithuật
– Để có đượccảmgiácchữ chạy trên thanh trạng thái ta
cầnthay đổithuộctínhstatus củacửasổ bằng cách
copy ký tựđầucủa thanh dòng trạng thái hiệntại đưa
xuống cuốicùngvàlặplạinhư vậysaumỗikhoảng thời
gian.
9 Giảithuật: Giả sử ta có biếnstr đang lưuchuỗi
cầnchạy. Công việcthựchiệnnhư sau:
–B1: Thể hiệnchuỗi str lên thanh trạng thái. Chuyểnsang
bước2
– B2: Chuyểnkýtựđầucủastrvề cuối(bằng cách gán str
= xâu con kể từ vị trí thứ 2 củastr đếncuối + ký tựđầu
tiên của str). Chuyển sang bước3
–B3: Trễ mộtkhoảng thờigianrồiquay lạibước1
Mã lệnh
<script>
var str= 'Khoa TMĐT-ĐH Thương Mại'
//Đưa vào nhìn cho đẹp (có khoảng cách trống giữa2 lần
chạy)
for (i=str.length; i<100; i++){
str = str + ' '
}
function ChuChay(){
window.status = str
str = str.substr(1,str.length-1) + str.substr(0,1);
setTimeout(ChuChay,100)
}
ChuChay()
</script>
Phát triển
9Thay bằng nhiềudòngchữ chạykhác
nhau (sử dụng mảng để lưutrữ)
9Chữ chạy theo nhiều cách khác nhau
9Cho chữ chạytrênthanhtiêu đề
9Cho chữ chạytrênmột đốitượng khác
Đối tượng window
9Tậphợp: frames[]
9Thuộc tính:
–document
–history
–location
–opener
–status:
9Sự kiện:
–onLoad
– onUnload
9Phương thức
–alert(strMessage)
– confirm(strMessage)
– prompt(strMessage, defaultText)
– open(url, name, option, replace)
– Interval_ID = setInterval(strLệnh, Thời_gian)
– Timeout_ID = setTimeout(strLệnh, Thời_gian)
– clearInterval(Interval_ID)
– clearTimeout(Timeout_ID)
Đối tượng Document
9 Tậphợp
– anchors[]
– links[]
– forms[]
–images[]
9 Thuộctính
– title
– cookie
9 Phương thức
– getElementById(ID)
– getElementByName(ten)
– getElementByTagName(Ten_The)
9Truy xuất đếncácform:
– window.document.tên_form
9Truy xuấtcác đốitượng trong form:
–objForm.Tên_ĐT
9Thuộctính đốitượng:
–value
Ví dụ:
9Tạoform gồm các thông tin:
–Têntruycập
–Mậtkhẩu
–Nhậplạimậtkhẩu
9Kiểmtradữ liệuvàocóhợplệ không?
–Hợplệ:
•têntruycập không rỗng
•2 mậtkhẩugiống nhau, khác rỗng, >4 ký tự
Nếuhợplệđược submit, ngượclại thông báo lỗi.
Bạn đang đọc truyện trên: TruyenTop.Vip