Download miễn phí Giáo trình JavaScript
chương 1 Lời nói đầu .4
Chương 2 Nhập môn JavaScript .5
2.1.Nhúng JavaScript vào file HTML .5
2.3. Thẻ .6
2.3. Hiển thị một dòng text .7
2.4. Giao tiếp với người sử dụng.9
2.5. Điểm lại các lệnh và mở rộng .12
Chương 3 Biến trong JavaScript .13
3.1. Biến và phân loạI biến.13
3.2. Biểu diễn từ tố trong JavaScript.13
3.3. Kiểu dữ liệu.13
1.1.1. KIểu nguyên (Interger).14
1.1.2. Kiểu dấu phẩy động (Floating Point) .14
1.1.3. Kiểu logic (Boolean) .15
1.1.4. Kiểu chuỗi (String).15
2. Xây dựng các biểu thức trong JavaScript.16
định nghĩa và phân loạI biểu thức .16
Các toán tử (operator) .16
2.1.1. Gán.16
2.1.2. So sánh.16
2.1.3. Số học.17
2.1.4. Chuỗi .17
2.1.5. Logic .17
2.1.6. Bitwise .18
Bài tập .19
2.1.7. Câu hỏi .19
2.1.8. Trả lời.19
3. Các lệnh .20
Câu lệnh điều kiện .20
Câu lệnh lặp .21
3.1.1. Vòng lặp for.21
3.1.2. while .22
3.1.3. Break .22
3.1.4. continue .22
Các câu lệnh thao tác trên đối tượng .23
3.1.5. for.in.23
3.1.6. new .24
3.1.7. this.26
3.1.8. with .26
Các hàm (Functions).27
Các hàm có sẵn .29
3.1.9. eval .29
3.1.10. parseInt.30
3.1.11. parseFloat .31
Mảng (Array).32
Sự kiện .34
Bài tập .37
3.1.12. Câu hỏi .37
3.1.13. Trả lời.39
4. Các đối tượng trong JavaScript .42
Đối tượng navigator .44
Đối tượng window.45
4.1.1. Các thuộc tính .45
4.1.2. Các cách .46
4.1.3. Các chương trình xử lý sự kiện .47
Đối tượng location .47
Đối tượng frame.48
4.1.4. Các thuộc tính .48
4.1.5. Các cách .48
4.1.6. Sử dụng Frame .48
Đối tượng document.50
4.1.7. Các thuộc tính .51
4.1.8. Các cách .51
Đối tượng anchors .51
Đối tượng forms .52
4.1.9. Các thuộc tính .52
4.1.10. Các cách .52
4.1.11. Các chương trình xử lý sự kiện .52
Đối tượng history .53
4.1.12. Các thuộc tính .53
4.1.13. Các cách .53
Đối tượng links.53
4.1.14. Các thuộc tính .53
4.1.15. Các chương trình xử lý sự kiện .54
Đối tượng Math.54
4.1.16. Các thuộc tính .54
4.1.17. Các cách .54
Đối tượng Date .55
4.1.18. Các cách .55
Đối tượng String.56
4.1.19. Các cách .56
Các phần tử của đối tượng Form.57
4.1.20. Thuộc tính type.58
4.1.21. Phần tử button.58
4.1.22. Phần tử checkbox.59
4.1.23. Phần tử File Upload.61
4.1.24. Phần tử hidden .61
4.1.25. Phần tử Password .61
4.1.26. Phần tử radio.62
4.1.27. Phần tử reset.64
4.1.28. Phần tử select .64
5. Mô hình đối tượng (Object Model) .74
Đối tượng và thuộc tính.74
Tạo các đối tượng mới.75
5.1.1. Sử dụng khởi tạo đối tượng .75
5.1.2. Sử dụng một hàm xây dựng(Constructor Function) .76
5.1.3. Lập mục lục cho các thuộc tính của đối tượng.77
5.1.4. Định nghĩa thêm các thuộc tính cho một kiểu đối tượng.78
5.1.5. Định nghĩa các cách thức.78
5.1.6. Sử dụng cho các tham chiếu đối tượng (Object References) .79
5.1.7. Xoá đối tượng .79
6. Bảng tổng kết các từ khoá .80
7. Tổng kết .81
Để tải bản Đầy Đủ của tài liệu, xin Trả lời bài viết này, Mods sẽ gửi Link download cho bạn sớm nhất qua hòm tin nhắn.
Ai cần download tài liệu gì mà không tìm thấy ở đây, thì đăng yêu cầu down tại đây nhé:
Nhận download tài liệu miễn phí
Tóm tắt nội dung tài liệu:
arseFloat("abc137") + "");document.write("1abc37= " + parseFloat("1abc37") + "");
Mảng (Array)
Mặc dù JavaScript không hỗ trợ cấu trúc dữ liệu mảng nhưng Netscape tạo ra cách
cho phép bạn tự tạo ra các hàm khởi tạo mảng như sau:
function InitArray(NumElements){
this.length = numElements;
for (var x=1; x<=numElements; x++){
this[x]=0
}
return this;
}
Hình 5.8 : Kết quả của ví dụ parseFloat
Generated by Foxit PDF Creator â Foxit Software
For evaluation only.
JavaScript 33
Khoa Toan tin, Đại học Quốc gia Hà Nội
Nó tạo ra một mảng với kích thước xác định trước và điền các giá trị 0. Chú ý rằng thành
phần đầu tiên trong mảng là độ dài mảng và không được sử dụng.
Để tạo ra một mảng, khai báo như sau:
myArray = new InitArray (10)
Nó tạo ra các thành phần từ myArray[1] đến myArray[10] với giá trị là 0. Giá trị các thành
phần trong mảng có thể được thay đổi như sau:
myArray[1] = "Nghệ An"
myArray[2] = "Lào"
Sau đây là ví dụ đầy đủ:
Array Exemple
function InitArray(numElements) {
this.length = numElements;
for (var x=1; x<=numElements; x++){
this[x]=0
}
return this;
}
myArray = new InitArray(10);
myArray[1] = "Nghệ An";
myArray[2] = "Hà Nội";
document.write(myArray[1] + "");
document.write(myArray[2] + "");
Generated by Foxit PDF Creator â Foxit Software
For evaluation only.
JavaScript 34
Khoa Toan tin, Đại học Quốc gia Hà Nội
Hình 5.9: Ví dụ mảng
Sự kiện
JavaScript là ngôn ngữ định hướng sự kiện, nghĩa là sẽ phản ứng trước các sự kiện xác
định trước như kích chuột hay tải một văn bản. Một sự kiện có thể gây ra việc thực hiện
một đoạn mã lệnh (gọi là các chương triình xử lý sự kiện) giúp cho chương trình có thể
phản ứng một cách thích hợp.
Chương trình xử lý sự kiện (Event handler): Một đoạn mã hay một hàm
được thực hiện để phản ứng trước một sự kiện gọi là chương trình xử lý sự kiện. Chương
trình xử lý sự kiện được xác định là một thuộc tính của một thẻ HTML:
Ví dụ sau gọi hàm CheckAge() mỗi khi giá trị của trường văn bản thay đổi:
Đoạn mã của chương trình xử lý sự kiện không là một hàm; nó là các lệnh của JavaScript
cách nhau bằng dấu chấm phẩy. Tuy nhiên cho mục đích viết thành các module nên viết
dưới dạng các hàm.
Một số chương trình xử lý sự kiện trong JavaScript:
onBlur Xảy ra khi input focus bị xoá từ thành phần form
onClick Xảy ra khi người dùng kích vào các thành phần hay liên
kết của form.
Generated by Foxit PDF Creator â Foxit Software
For evaluation only.
JavaScript 35
Khoa Toan tin, Đại học Quốc gia Hà Nội
onChange Xảy ra khi giá trị của thành phần được chọn thay đổi
onFocus Xảy ra khi thành phần của form được focus(làm nổi lên).
onLoad Xảy ra trang Web được tải.
onMouseOver Xảy ra khi di chuyển chuột qua kết nối hay anchor.
onSelect Xảy ra khi người sử dụng lựa chọn một trường nhập dữ
liệu trên form.
onSubmit Xảy ra khi người dùng đưa ra một form.
onUnLoad Xảy ra khi người dùng đóng một trang
Sau đây là bảng các chương trình xử lý sự kiện có sẵn của một số đối tượng. Các đối tượng
này sẽ được trình bày kỹ hơn trong phần sau.
Đối tượng Chương trình xử lý sự kiện có sẵn
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
Ví dụ sau là một đoạn mã script đơn giản của chương trình xử lý sự kiện thẩm định giá trị
đưa vào trong trường text. Tuổi của người sử dụng được nhập vào trong trường này và
chương trình xử lý sự kiện sẽ thẩm định tính hợp lệ của dữ liệu đưa vào. Nếu không hợp lệ
sẽ xuất hiện một thông báo yêu cầu nhập lại. Chương trình xử lý sự kiện được gọi mỗi khi
trường AGE bị thay đổi và focus chuyển sang trường khác. Hình 5.10 minh hoạ kết quả
của ví dụ này
Generated by Foxit PDF Creator â Foxit Software
For evaluation only.
JavaScript 36
Khoa Toan tin, Đại học Quốc gia Hà Nội
An Event Handler Exemple
function CheckAge(form) {
if ( (form.AGE.value120) )
{
alert("Tuổi nhập vào không hợp lệ! Mời bạn nhập
lại");
form.AGE.value=0;
}
}
Nhập vào tên của bạn:
Tên
Đệm
Họ
Age onChange="CheckAge(PHIEU_DIEU_TRA)">
Bạn thích mùa nào nhất:
Mùa xuân
Mùa hạ
Mùa thu
Mùa đông
Hãy chọn những hoạt động ngoài trời mà bạn yêu thích:
Đi bộ
Trượt tuyết VALUE="Truot tuyet">
Generated by Foxit PDF Creator â Foxit Software
For evaluation only.
JavaScript 37
Khoa Toan tin, Đại học Quốc gia Hà Nội
Thể thao dưới nước VALUE="Duoi nuoc">
Đạp xe
Hình 5.10: Minh hoạ cho ví dụ Event Handler
Bài tập
3.1.12. Câu hỏi
1. Viết một đoạn lệnh JavaScript sử dụng cách thức confirm() và câu lệnh if...then để thực
hiện:
Hỏi người sử dụng có muốn nhận được một lời chào không
Nếu có thì hiện ảnh wellcome.jpg và một lời chào.
Generated by Foxit PDF Creator â Foxit Software
For evaluation only.
JavaScript 38
Khoa Toan tin, Đại học Quốc gia Hà Nội
Nếu không thì viết ra một lời thông báo
2. Viết một đoạn lệnh JavaScript để thực hiện:
Hỏi người sử dụng: "10+10 bằng bao nhiêu?"
Nếu đúng thì hỏi tiếp: Có muốn trả lời câu thứ hai không?"
Nếu muốn thì hỏi: "10*10 bằng bao nhiêu?"
Đánh giá kết quả bằng biểu thức logic sau đó viết ra màn hình:
Đúng: "CORRECT"; Sai: "INCORRECT"
Gợi ý: Sử dụng biến toàn cục lưu kết quả đúng để so sánh với kết qủa đưa vào.
3. Câu lệnh nào trong các câu sau đây sử dụng sai thẻ sự kiện
a.
b.
c.
d.
e.
f.
4. Điều gì xảy ra khi thực hiện script sau:
Exercise 5.4
This is my page!
5. Sử dụng vòng lặp while để mô phỏng các vòng lặp for sau:
a.
Generated by Foxit PDF Creator â Foxit Software
For evaluation only.
JavaScript 39
Khoa Toan tin, Đại học Quốc gia Hà Nội
for (j = 4; j > 0; j --) {
document.writeln(j + "");
}
b.
for (k = 1; k <= 99; k = k*2) {
k = k/1.5;
}
c.
for (num = 0; num <= 10; num ++) {
if (num == 8)
break;
}
3.1.13. Trả lời
1. Sử dụng cách thức confirm() và cấu trúc if...then:
Execise 5.1
var conf=confirm("Click OK to see a wellcome
message!")
if (conf){
document.write("");
document.write("Wellcome you come to CSE's
class");
}
else
document.write("What a pity! You have just click
Cancel button");
2. Thực hiện hỏi người sử dụng:
Exercise 3.3
Generated by Foxit PDF Creator â Foxit Software
For evaluation only.
JavaScript 40
Khoa Toan tin, Đại học Quốc gia Hà Nội