Bài Gi ng Môn Thi t K Web<br />
<br />
Ph n 2 : Ngôn Ng K ch B n JavaScript<br />
<br />
Chương 01<br />
<br />
T NG QUAN V JAVASCRIPT<br />
Gi i Thi u<br />
Nhúng JavaScript vào trang Web<br />
Các l nh cơ b n<br />
I. Gi i thi u<br />
V i HTML s cho ta bi t cách t o ra trang Web - tuy nhiên ch m i m c bi u di n thông<br />
tin ch chưa ph i là các trang Web ng có kh năng áp ng các s ki n t phía ngư i dùng.<br />
Hãng Netscape ã ưa ra ngôn ng script có tên là LiveScript<br />
th c hi n ch c năng này. Sau<br />
ó ngôn ng này ư c i tên thành JavaScript<br />
t n d ng tính i chúng c a ngôn ng l p<br />
trình Java. M c dù có nh ng i m tương ng gi a Java và JavaScript, nhưng chúng v n là hai<br />
ngôn ng riêng bi t.<br />
JavaScript là ngôn ng dư i d ng script có th g n v i các file HTML. Nó không ư c<br />
biên d ch mà ư c trình duy t di n d ch, trình duy t c JavaScript dư i d ng mã ngu n. Chính<br />
vì v y ta có th d dàng h c JavaScript trên các trang Web có s d ng JavaScript.<br />
JavaScript là ngôn ng d a trên i tư ng, nghĩa là bao g m nhi u ki u i tư ng, ví d<br />
i tư ng Math v i t t c các ch c năng toán h c. Tuy v y JavaScript không là ngôn ng<br />
hư ng i tư ng như C++ hay Java do không h tr các l p hay tính th a k .<br />
II. Nhúng JavaScript vào File HTML<br />
S d ng m t trong các cách sau:<br />
•<br />
<br />
S d ng các câu l nh và các hàm trong c p th <br />
<br />
•<br />
<br />
S d ng các File ngu n JavaScript<br />
<br />
•<br />
<br />
S d ng m t bi u th c JavaScript làm giá tr c a m t thu c tính HTML<br />
<br />
•<br />
<br />
S d ng th s ki n (event handlers) trong m t th HTML nào ó<br />
<br />
Trong ó, s d ng c p th ... và nhúng m t File ngu n JavaScript<br />
là ư c s d ng nhi u hơn c .<br />
1. Nhúng JavaScript vào trang HTML<br />
JavaScript ư c ưa vào File HTML b ng cách s d ng c p th và .<br />
N u t trong ph n , nó s ư c t i và s n sàng trư c khi ph n còn l i c a văn<br />
b n ư c t i.S d ng cú pháp sau :<br />
<br />
// Chèn các mã Javacript vào ây<br />
<br />
<br />
Ví d : T o trang web (Clock1.htm) s d ng nhúng mã JavaScript tr c ti p vào trang<br />
Ghi chú: Có th sưu t m các mã JavaScript t Website http://www.javascriptbank.com.vn,<br />
www.echip.com.vn<br />
Biên s an: Dương Thành Ph t<br />
<br />
Trang 31<br />
<br />
Bài Gi ng Môn Thi t K Web<br />
<br />
2. S<br />
<br />
Ph n 2 : Ngôn Ng K ch B n JavaScript<br />
<br />
d ng File ngu n JavaScript<br />
Dùng phương pháp này hay hơn nhúng tr c ti p l nh JavaScript vào trang HTML.<br />
Cú pháp:<br />
<br />
<br />
<br />
<br />
Ví d :<br />
<br />
Các File JavaScript bên ngoài ch ch a các câu l nh JavaScript và<br />
File c a các hàm JavaScript bên ngoài c n có uôi .js,<br />
Ví d : T o trang web(Clock.htm) s<br />
Javascript .<br />
<br />
nh nghĩa hàm. Tên<br />
<br />
d ng nhúng mã JavaScript thông qua 1 t p tin<br />
<br />
III. Các l nh cơ b n<br />
1. Cú pháp cơ b n c a l nh :<br />
JavaScript xây d ng các hàm, các phát bi u, các toán t và các bi u th c trên cùng m t<br />
dòng và k t thúc b ng ; Cách g i m t phương th c c a m t i tư ng như sau:<br />
object_name.property_name;<br />
VÍ D :<br />
<br />
document.write("Chào các b n!");<br />
<br />
2. Hi n th m t dòng văn b n<br />
i tư ng document trong JavaScript ư c thi t k s n hai phương th c<br />
dòng văn b n ra màn hình client: write() và writeln().<br />
<br />
xu t m t<br />
<br />
document.write(“Chu i văn b n”);<br />
Ví d :<br />
<br />
document.write("Chào các b n");<br />
document.writeln(“Chúc các b n vui v !”);<br />
<br />
Phương th c write(): Xu t ra màn hình dòng văn b n nhưng không xu ng dòng<br />
Phương th c writeln(): Sau khi vi t xong dòng văn b n t<br />
Ghi chú:<br />
<br />
Có th dùng “+”<br />
<br />
ng xu ng dòng.<br />
<br />
ghép nhi u chu i ký t .<br />
<br />
Cho phép dùng các kí t<br />
<br />
c bi t trong chu i:<br />
<br />
\n : Xu ng dòng<br />
\t : Tab<br />
Khi có dùng các ký t<br />
c bi t ho c l nh Writeln thì ph i<br />
. . (Th quy nh văn b n nh d ng trư c)<br />
Ví d : T o trang (OutputText.htm)<br />
<br />
t kh i JavaScript trong c p th<br />
<br />
phân bi t s khác nhau c a write() và writeln():<br />
<br />
<br />
<br />
<br />
document.writeln("One,");<br />
document.write("Two,\n");<br />
document.write("Three ");<br />
document.write("...");<br />
<br />
<br />
<br />
<br />
Biên s an: Dương Thành Ph t<br />
<br />
Trang 32<br />
<br />
Bài Gi ng Môn Thi t K Web<br />
<br />
Ph n 2 : Ngôn Ng K ch B n JavaScript<br />
<br />
3. Hi n th h p tho i thông báo –L nh alert()<br />
Cú pháp:<br />
alert("Câu thông báo");<br />
Khi ó s ch cho n khi ngư i s d ng nh n vào nút OK . Thông thư ng, cách th c<br />
alert() ư c s d ng trong các trư ng h p:<br />
•<br />
<br />
Thông tin ưa vào form không h p l<br />
<br />
•<br />
<br />
K t qu sau khi tính toán không h p l<br />
<br />
•<br />
<br />
Khi d ch v chưa s n sàng<br />
<br />
truy nh p d li u<br />
<br />
Ví d : T o trang (Thongbao.htm)<br />
<br />
<br />
alert("Chào m ng b n n v i JavaScript!. \n Nh n Ok<br />
<br />
Chúc b n thành công!!!<br />
<br />
<br />
ti p t c");<br />
<br />
4. Giao ti p v i ngư i s d ng – L nh prompt()<br />
M t h p tho i g m 1 dòng thông báo, 1 trư ng nh p d li u, 1 nút OK và 1 nút Cancel.<br />
Ngư i s d ng nh p vào trư ng ó r i kích vào OK. Khi ó, ta có th x lý d li u v a ưa vào.<br />
Cú pháp:<br />
window.prompt("Câu thông báo",”n i dung m c<br />
<br />
nh”);<br />
<br />
Ví d : T o trang (Hello.htm) hi n th h p tho i h i tên ngư i dùng và sau ó s hi n th<br />
m t thông báo chào tên m i ưa vào.<br />
<br />
<br />
var name=window.prompt("Xin chào!B n tên gì?","");<br />
document.write("Xin chào b n " + name + " ! Chúc b n h c t t JavaScript ");<br />
<br />
<br />
<br />
Biên s an: Dương Thành Ph t<br />
<br />
Trang 33<br />
<br />
Bài Gi ng Môn Thi t K Web<br />
<br />
5. H i áp ngư i s<br />
<br />
Ph n 2 : Ngôn Ng K ch B n JavaScript<br />
<br />
d ng – L nh confirm()<br />
<br />
L nh confirm() t o ra 1 h p tho i g m 1 dòng thông báo, nút OK và nút Cancel. Ngư i<br />
s d ng có th click vào OK. Khi ó s x lý th c hi n hành ng theo yêu c u, ngư c l i khi<br />
Click vào Cancel s b óng h p th ai thông bao.<br />
Thư ng s<br />
ngư i dùng<br />
<br />
d ng trong các trư ng h i áp, xác nh n quy t<br />
<br />
nh x<br />
<br />
lý thông tin t<br />
<br />
phía<br />
<br />
Cú pháp:<br />
confirm("Câu thông báo h i ?");<br />
Ví d : T o trang (HoiDap.htm) như sau.<br />
<br />
function Hoidap(){<br />
question = confirm("B n th t s mu n truy c p Website")<br />
if (question !="0"){<br />
top.location = "http://www.tuoitre.com.vn/"<br />
}<br />
}<br />
<br />
Hãy click vào ây<br />
<br />
truy c p website:Báo Tu i Tr <br />
<br />
Biên s an: Dương Thành Ph t<br />
<br />
Trang 34<br />
<br />
Bài Gi ng Môn Thi t K Web<br />
<br />
Ph n 2 : Ngôn Ng K ch B n JavaScript<br />
<br />
Chương 02<br />
<br />
NGÔN NG<br />
<br />
K CH B N JAVASCRIPT<br />
Bi n và khai báo bi n<br />
Ki u d li u<br />
L nh, kh i l nh<br />
Toán t và bi u th c<br />
C u trúc l p trình<br />
M ng<br />
Hàm<br />
<br />
I. Bi n<br />
Cũng như các ngôn ng l p trình khác javascript dùng bi n<br />
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<br />
nhau trong quá trình chương trình ho t ng.<br />
M i bi n có m t tên, Tên bi n trong JavaScript ph i b t<br />
có th là m t trong hai ki u sau:<br />
<br />
lưu tr các giá tr nh p<br />
lưu tr các giá tr khác<br />
<br />
u b ng ký t . Ph m vi c a bi n<br />
<br />
•<br />
<br />
Bi n toàn c c: Có th<br />
<br />
•<br />
<br />
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<br />
ư c khai báo trong m t hàm v i t khoá var: var x = 0;<br />
<br />
II. Ki u d<br />
<br />
ư c truy c p t b t kỳ âu trong ng d ng. ư c khai báo: x = 0;<br />
<br />
li u<br />
<br />
Khác v i C++ hay Java, JavaScript là ngôn ng có tính nh ki u th p. Nghĩa là không<br />
ph i ch ra ki u d li u cho bi n. Ki u d li u ư c t<br />
ng chuy n thành ki u phù h p khi c n.<br />
Ví d : T o trang (DataType.htm) như sau<br />
<br />
<br />
<br />
var a='Trái táo';<br />
var n=12;<br />
n = n + 20;<br />
var tb ="Có t t c " + n + " " + a;<br />
document.write(tb);<br />
<br />
<br />
<br />
<br />
Trong JavaScript, có b n ki u d li u sau ây:<br />
1. KI u nguyên (Interger)<br />
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<br />
bát phân) và H cơ s 16 (h th p l c phân) -V i hai ch s<br />
u tiên là 0x. (VÍ D : 0x5F)<br />
2. Ki u d u ph y<br />
<br />
ng (Floating Point)<br />
<br />
M t bi n có ki u d u ph y<br />
th p phân (.). Ph n dư. Ph n mũ.<br />
Ví d :<br />
<br />
9.87<br />
<br />
hay<br />
<br />
Biên s an: Dương Thành Ph t<br />
<br />
ng có 4 thành ph n sau: Ph n nguyên th p phân. D u ch m<br />
-0.85E4<br />
Trang 35<br />
<br />
Thêm vào BST
Báo xấu
Download
Vui lòng tải xuống để xem tài liệu đầy đủ
