130 trang 5 lượt tải

Chương 5: Giới Thiệu Về JavaScript Và Các Tính Năng Cơ Bản | Môn Công nghệ thông tin - Trường Cao đẳng công thương Việt Nam

10

Chương 5: Giới Thiệu Về JavaScript Và Các Tính Năng Cơ Bản Môn Công nghệ thông tin. Tài liệu được sưu tầm gồm 130 trang, giúp bạn ôn tập tốt hơn. Mời các bạn đón xem. 

Môn: Công nghệ thông tin (vn) 10 tài liệu

Trường: Trường Cao đẳng công thương Việt Nam 60 tài liệu

Tác giả:

Profile

Linh Giang

2 tuần trước
Danh sách Quiz
/130
lOMoARcPSD| 58675420
CHƯƠNG 5. JAVASCRIPT
5.1. JavaScript là gì
Là ngôn ngữ kịch bản, thông dịch và hướng ối tượng hỗ trợ hiển thị các trang Web
sinh ộng hơn, JavaScript thì hoàn toàn miễn phí.
Là ngôn ngữ ở phía client, sử dụng kiểm tra nhập liệu hay các yếu tố khác (phiên bản trình
duyệt)
5.2. Chèn mã Javascript
Trực tiếp trong file HTML:
<html>
<head>
<script type="text/javascript">
document.write("Hello World!");
</script>
</head>
<body>
</body>
</html>
lOMoARcPSD| 58675420
Chèn từ file .js:
<script src="my_script.js"></script>
Vị trí chèn thẻ <script></script> thường nằm trong thẻ head. Ghi chú trong javascript sử
dụng // hoặc /* */
5.3. THẺ <NOSCRIPT> VÀ </NOSCRIPT>
Cặp thẻ này dùng ể ịnh rõ nội dung thông báo cho người sử dụng biết trình duyệt không
hỗ trợ JavaScript. Khi ó trình duyệt sẽ không hiểu thẻ <NOSCRIPT> và nó bị lờ i, còn oạn mã
nằm trong cặp thẻ này sẽ ược Navigator hiển thị. Ngược lại, nếu trình duyệt có hỗ trợ JavaScript
thì oạn mã trong cặp thẻ <NOSCRIPT> sẽ ược bỏ qua. Tuy nhiên, iều này cũng có thể xảy ra
nếu người sử dụng không sử dụng JavaScript trong trình duyệt của mình bằng cách tắt nó
i trong hộp Preferences/Advanced
<NOSCRIPT>
<B> Trang này có sử dụng JavaScript. Do ó bạn cần sử dụng trình duyệt Netscape
Navigator từ version 2.0 trở i!
<BR>
<A HREF="http://home.netscape.com/comprd/mirror/index.html"> Hãy kích chuột vào ây ể tải về
phiên bản Netscape mới hơn
</A>
</BR>
Nếu bạn ã sử dụng trình duyệt Netscape từ 2.0 trở i mà vẫn ọc ược dòng chữ này thì hãy bật
Preferences/Advanced/JavaScript lên
lOMoARcPSD| 58675420
</NOSCRIPT>
5.4. Các lệnh xuất thông báo cơ bản
Thường sử dụng xuất các thông báo và là công cụ ể kiểm lỗi(debug)
alert(),prompt(),confirm()
<html>
<head>
<script type="text/javascript">
alert("Hi there");
confirm("I′m gonna do something, okay?");
prompt("What should I do?");
</script>
</head>
<body>
</body>
</html>
5.5. Chèn chuỗi vào nội dung trang HTML
<html>
lOMoARcPSD| 58675420
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript">
document.write("<h1>Hello</h1>");
</script>
</head>
<body> Xin Chào
</body>
</html>
Có thể tạo một trang Web từ javascript
5.6. Biến-Kiểu dữ liệu
5.6.1 Khai báo biến
var TenBien;
Cách ặt tên biến như trong C++, Không cần xác ịnh kiểu dữ liệu cho biến,
KDL ược xác ịnh dựa trên giá trị gán cho biến.
5.6.2 Gán
TenBien = [Giá Trị];
lOMoARcPSD| 58675420
5.6.3 Các liểu dữ liệu
5.6.3.1 Undefined
var foo;
alert(foo);//chua xac dinh vi chua co gia tri gan cho bien
5.6.3.2 Null
var foo = null;
alert(foo);
5.6.3.3 Numbers
var foo = 5;
alert(foo);
5.6.3.4 Strings
var foo = "five";
alert( foo );
5.6.3.5 Booleans
var foo = true;
5.6.3.6 Arrays
Khai báo, tạo mảng, mảng c ánh số từ 0.
lOMoARcPSD| 58675420
var foo = [5, "five", "5"]; alert( foo[0]); // Alerts "5" alert( foo[1]); // Alerts "five"
alert( foo[2]); // Also alerts "5"
5.6.4 Các toán tử so sánh và toán học
Tương tự C++
5.6.4.1 Toán tử == và ===
alert( "5" == 5 ); // "true", không phân biệt KDL
alert( "5" === 5 ); // "false”, phân biệt KDL
alert( "5" !== 5 ); // "true", phân biệt KDL
5.6.4.2 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".
5.6.4.3 Logic
JavaScript hỗ trợ các toán tử logic sau ây:
expr1 && expr2
Là toán tử logic AND, trả lại giá trị úng nếu cả
expr1 và expr2 cùng úng.
lOMoARcPSD| 58675420
expr1 || expr2
Là toán tử logic OR, trả lại giá trị úng nếu ít nhất
một trong hai expr1 và expr2 úng.
! expr
Là toán tử logic NOT phủ ịnh giá trị của expr.
5.7. Các Lệnh
5.7.1 Câu Lệnh Điều Kiện
Câu lệnh iều kiện cho phép chương trình ra quyết ịnh và thực hiện công việc nào ấy dựa
trên kết quả của quyết ịnh. Trong JavaScript, câu lệnh iều kiện là if...else
Câu lệnh này cho phép bạn kiểm tra iều kiện và thực hiện một nhóm lệnh nào ấy dựa trên
kết quả của iều kiện vừa kiểm tra. Nhóm lệnh sau else không bắt buộc phải có, nó cho phép chỉ
ra nhóm lệnh phải thực hiện nếu iều kiện là sai.
Cú pháp
if ( < iều kiện> )
{
}
else
{
}
//Các câu lệnh với iều kiện úng
lOMoARcPSD| 58675420
//Các câu lệnh với iều kiện sai 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.”);
}
5.7.2 Câu Lệnh Lặp
5.7.2.1 Vòng Lặp for
Vòng lặp for thiết lập một biểu thức khởi ầu - initExpr, sau ó lặp một oạn mã cho ến khi
biểu thức < iều kiện> ược ánh giá là úng. Sau khi kết thúc mỗi vòng lặp, biểu thức incrExpr
ược ánh giá lại.
Cú pháp:
for (initExpr; < iều kiện> ; incrExpr){
//Các lệnh ược thực hiện trong khi lặp
}
lOMoARcPSD| 58675420
5.7.2.2 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
Cú pháp:
while (< iều kiện>)
{
//Các câu lệnh thực hiện trong khi lặp
}
5.7.2.2.1 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;
Đoạn mã sau lặp cho ến khi x lớn hơn hoặc bằng 100. Tuy nhiên 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
5.7.2.2.2 CONTINUE
Lệnh continue giống lệnh break nhưng khác ở chỗ việc lặp ược kết thúc và bắt ầu từ ầu
vòng lặp. Đố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.
lOMoARcPSD| 58675420
Cú pháp continue;
5.7.2.3 CÁC CÂU LỆNH THAO TÁC TRÊN ĐỐI TƯỢNG
5.7.2.3.1 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
for (<variable> in <object>)
{
//Các câu lệnh
}
Ví dụ
Ví dụ sau sẽ 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. Kết quả ược minh hoạ trên hình 5.2.
<html>
<head>
<title>for in example </title>
lOMoARcPSD| 58675420
<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>
5.7.2.3.2 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ụ sau 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
<html>
lOMoARcPSD| 58675420
<head>
<title>new example </title>
<script language= "JavaScript">
function person(first_name, last_name, age, sex){
this.first_name=first_name; this.last_name=last_name; this.age=age;
this.sex=sex;
}
person1= new person("Thuy", "Dau Bich", "23", "Female"); person2= new person("Chung", "Nguyen
Bao", "24", "Male"); person3= new person("Binh", "Nguyen Nhat", "24", "Male"); person4= new
person("Hoàn", "Đỗ Văn", "24", "Male");
document.write ("1. "+person1.last_name+" " + person1.first_name + "<BR>"
);
document.write("2. "+person2.last_name +" "+ person2.first_name + "<br>"); document.write("3. "+
person3.last_name +" "+ person3.first_name + "<br>"); document.write("4. "+ person4.last_name +" "+
person4.first_name+"<BR>");
</script>
</head>
<body>
</body>
</html>
lOMoARcPSD| 58675420
5.7.2.3.3 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.
5.7.2.3.4 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ụ:
Ví dụ sau chỉ ra cách 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>
lOMoARcPSD| 58675420
<head>
<title>With Example </title>
<script language= "JavaScript">
with (document){
write(“This is an exemple of the things that can be done <BR>”);
write(“With the <B>with<B> statment. <P>”);
write(“This can really save some typing”);
}
</script>
</head>
<body>
</body>
</html>
5.8. Hàm (FUNCTIONS)
JavaScript cũg cho phép sử dụng các hàm. Mặc dù không nhất thiết phải có, song các hàm
có thể có một hay nhiều tham số truyền vào và một giá trị trả về. Bởi vì JavaScript là ngôn ngữ
có tính ịnh kiểu thấp nên không cần ịnh nghĩa kiểu tham số và giá trị trả về của hàm. Hàm có thể
lOMoARcPSD| 58675420
là thuộc tính của một ối tượng, trong trường hợp này nó ược xem như là phương thức của ối
tượng ó.
Lệnh function ược sử dụng ể tạo ra hàm trong JavaScript.
Cú pháp
function fnName([param1],[param2],...,[paramN])
{
//function statement
}
Ví dụ:
Ví dụ sau minh hoạ cách thức tạo ra và sử dụng hàm như là thành viên của một
ối tượng. Hàm printStats ược tạo ra là phương thức của ối tượng person
<html> <head>
<title>function example </title>
<script language= "JavaScript">
function person(first_name, last_name, age, sex)
{
this.first_name=first_name; this.last_name=last_name; this.age=age; this.sex=sex;
lOMoARcPSD| 58675420
this.printStats=printStats;
}
function printStats() {
with (document) {
write (" Name :" + this.last_name + " " + this.first_name + "<BR>" );
write("Age :"+this.age+"<BR>");
write("Sex :"+this.sex+"<BR>");
}
}
person1= new person("Thuy", "Dau Bich", "23", "Female"); person2= new person("Chung", "Nguyen
Bao", "24", "Male"); person3= new person("Binh", "Nguyen Nhat", "24", "Male"); person4= new
person("Hoan", "Do Van", "23", "Male"); person1.printStats(); person2.printStats();
person3.printStats(); person4.printStats();
</script>
</head>
<body> </body>
</html>
lOMoARcPSD| 58675420
5.8.1 EVAL
Hàm này ược sử dụng ể ánh giá các biểu thức hay lệnh. Biểu thức, lệnh hay các ối tượng
của thuộc tính ều có thể ược ánh giá. Đặc biệt hết sức hữu ích khi ánh giá các biểu thức do
người dùng ưa vào (ngược lại có thể ánh giá trực tiếp).
Cú pháp:
returnval=eval (bất kỳ biểu thức hay lệnh hợp lệ trong Java)
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>
lOMoARcPSD| 58675420
5.8.2 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 (tham số này
không bắt buộc). Hàm này thường ược sử dụng ể chuyển các số nguyên sang cơ số 10 và ảm
bảo rằng các dữ liệu ưọc nhập dưới dạng ký tự ược chuyển thành số trước khi tính toán. Trong
trường hợp dữ liệu vào không hợp lệ, hàm parseInt sẽ ọc và chuyển dạng chuỗi ến vị trí nó tìm
thấy ký tự không phải là số. Ngoài ra hàm này còn cắt dấu phẩy ộng.
Cú pháp
parseInt (string, [, radix]) Ví dụ:
<html>
<head>
<TITLE> PERSEINT EXEMPLE </TITLE>
<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>
</head>
<body>
</body>
</html>
lOMoARcPSD| 58675420
5.8.3 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)
5.9. 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:
<tagName eventHandler = "JavaScript Code or Function">
Ví dụ sau gọi hàm CheckAge() mỗi khi giá trị của trường văn bản thay ổi:
<input type=text name="age" onChange="CheckAge()">
Đ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
lOMoARcPSD| 58675420
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
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

Tài liệu khác của Trường Cao đẳng công thương Việt Nam

Tài liệu liên quan: