nhiều đối số đối số (có thể không có đối số) và thường có tên (có thể không có đối số) và thường có tên (mặc dù trong JavaScript hàm không nhất thiết phải có (mặc dù trong JavaScri[r]
(1)THUYẾT TRÌNH THUYẾT TRÌNH
JAVASCRIPT JAVASCRIPT
Các Thành Viên Của Nhóm Các Thành Viên Của Nhóm
Nguyễn Cơng Danh
Nguyễn Cơng Danh
Đinh Vũ Trường Giang
Đinh Vũ Trường Giang
Lý Hoàng Chương
Lý Hoàng Chương
Hồng Minh Hải
(2)JavaScript JavaScript
JavaScript thiết kế để thêm tương JavaScript thiết kế để thêm tương
tác cho trang HTML. tác cho trang HTML.
Một ngơn ngữ lập trình kịch Một ngơn ngữ lập trình kịch
ngơn ngữ lập trình nhẹ. ngơn ngữ lập trình nhẹ.
JavaScript thường nhúng trực tiếp JavaScript thường nhúng trực tiếp
vào trang HTML. vào trang HTML.
JavaScript ngôn ngữ thông JavaScript ngơn ngữ thơng
dịch(interpreted language)-có nghĩa dịch(interpreted language)-có nghĩa
các script thực thi mà khơng có biên các script thực thi mà khơng có biên
(3)JavaScript làm JavaScript làm
JavaScript cung cấp cho nhà thiết kế HTML JavaScript cung cấp cho nhà thiết kế HTML 1 cơng cụ lập trình - tác giả viết HTML thường
1 cơng cụ lập trình - tác giả viết HTML thường
không phải lập trình viên, JavaScript
khơng phải lập trình viên, JavaScript
là ngôn ngữ kịch với cấu trúc đơn giản!
là ngôn ngữ kịch với cấu trúc đơn giản!
Hầu đặt đoạn code nhỏ
Hầu đặt đoạn code nhỏ
vào trang HTML họ.
vào trang HTML họ.
JavaScript đặt đoạn text động vào
JavaScript đặt đoạn text động vào
1 trang HTML - Một thị JavaScript sau:
1 trang HTML - Một thị JavaScript sau:
document.write("<h1>" + name + "</h1>")
document.write("<h1>" + name + "</h1>")
có thể viết biến text vào trang HTML.
có thể viết biến text vào trang HTML.
JavaScript phản ứng với xự kiện -
JavaScript phản ứng với xự kiện -
JavaScript thiết lập thực thi có việc
JavaScript thiết lập thực thi có việc
đó xảy ra, trang load xong
đó xảy ra, trang load xong
khi người dùng click vào phần tử HTML.
(4)JavaScript đọc viết phần tử JavaScript đọc viết phần tử
HTML(HTML elements) - JavaScript đọc HTML(HTML elements) - JavaScript đọc
và thay đổi nội dung phần tử HTML. và thay đổi nội dung phần tử HTML.
JavaScript sử dụng để ràng buộc JavaScript sử dụng để ràng buộc
liệu(validate data) - JavaScript sử liệu(validate data) - JavaScript sử
dụng để ràng buộc liệu form trước dụng để ràng buộc liệu form trước
được gửi đến server. được gửi đến server.
JavaScript sử dụng để nhận biết trình JavaScript sử dụng để nhận biết trình
duyệt người truy cập - JavaScript duyệt người truy cập - JavaScript
được sử dụng để nhận biết trình duyệt người được sử dụng để nhận biết trình duyệt người
truy cập, - tùy thuộc vào trình duyệt - tải truy cập, - tùy thuộc vào trình duyệt - tải
trang khác thiết kế đặc biệt cho trình trang khác thiết kế đặc biệt cho trình
duyệt. duyệt.
JavaScript sử dụng để tạo cookie JavaScript sử dụng để tạo cookie - Một mã JavaScript sử dụng để lưu - Một mã JavaScript sử dụng để lưu trữ lại thơng tin máy tính người truy trữ lại thơng tin máy tính người truy
(5)Đối tượng
Đối tượng
Kiểu JavaScript chia làm hai loại:
Kiểu JavaScript chia làm hai loại:
kiểu
kiểu và đối tượngđối tượng Đối tượng JavaScript Đối tượng JavaScript thực thể có tên xác định có
một thực thể có tên xác định có thuộc tínhthuộc tính trỏ đến trỏ đến giá trị, hàm đối tượng khác
giá trị, hàm đối tượng khác
Có nghĩa là, đối tượng JavaScript
Có nghĩa là, đối tượng JavaScript
mảng kết hợp
mảng kết hợp ( (associative arrayassociative array) tương tự mảng ) tương tự mảng
trong PHPPHP hay hay từ điểntừ điển trong PythonPython
JavaScript có số đối tượng định nghĩa sẵn, bao gồm
JavaScript có số đối tượng định nghĩa sẵn, bao gồm
mảng (Array), đối tượng
mảng (Array), đối tượng đại số Boolđại số Bool (Boolean), đối (Boolean), đối tượng
tượng ngày thángngày tháng (Date), đối tượng hàm (Function), (Date), đối tượng hàm (Function), đối tượng
đối tượng toán họctoán học (Math), đối tượng (Math), đối tượng sốsố (Number), đối (Number), đối tượng đối tượng (Object), đối tượng
tượng đối tượng (Object), đối tượng biểu thức tìm kiếmbiểu thức tìm kiếm (RegExp) đối tượng chuỗi ký tự (String) Các đối
(RegExp) đối tượng chuỗi ký tự (String) Các đối
tượng khác đối tượng thuộc phần mềm chủ (phần
tượng khác đối tượng thuộc phần mềm chủ (phần
mềm áp dụng JavaScript - thường trình duyệt)
(6)Ví dụ: Ví dụ:
<script language="JavaScript"> <script language="JavaScript">
function samplePrototype() {function samplePrototype() {
this.attribute1 = "someValue"; // thêm thuộc tính cho đối this.attribute1 = "someValue"; // thêm thuộc tính cho đối tượng
tượng
this.attribute2 = 234; // thêm thuộc tính cho đối tượngthis.attribute2 = 234; // thêm thuộc tính cho đối tượng
this.function1 = testFunction; // thêm hàm vào đối tượngthis.function1 = testFunction; // thêm hàm vào đối tượng
}}
function testFunction() {function testFunction() {
alert(this.attribute2); //hiển thị 234alert(this.attribute2); //hiển thị 234
}}
var sampleObject = new samplePrototype; // khởi tạo đối tượngvar sampleObject = new samplePrototype; // khởi tạo đối tượng
sampleObject.function1(); // gọi hàm function1 đối tượng sampleObject.function1(); // gọi hàm function1 đối tượng sampleObject
sampleObject
sampleObject.attribute3 = 123; // thêm thuộc tính cho đối sampleObject.attribute3 = 123; // thêm thuộc tính cho đối tượng sampleObject
tượng sampleObject
delete sampleObject.attribute1; // xóa bỏ thuộc tínhdelete sampleObject.attribute1; // xóa bỏ thuộc tính
delete sampleObject; // xóa bỏ đối tượngdelete sampleObject; // xóa bỏ đối tượng </script>
(7)Hàm
Hàm
Hàm khối câu lệnh với danh sách Hàm khối câu lệnh với danh sách
nhiều
nhiều đối sốđối số (có thể khơng có đối số) thường có tên (có thể khơng có đối số) thường có tên (mặc dù JavaScript hàm khơng thiết phải có (mặc dù JavaScript hàm khơng thiết phải có
tên) Hàm trả lại giá trị Cú pháp hàm tên) Hàm trả lại giá trị Cú pháp hàm
như sau: sau:
<script language="JavaScript"> <script language="JavaScript">
function tên_hàm(đối_số_1, đối_số_2)function tên_hàm(đối_số_1, đối_số_2)
{{
câu lệnh cần thực hàm gọi;các câu lệnh cần thực hàm gọi;
return giá_trị_cần_trả_về;return giá_trị_cần_trả_về;
}}
tên_hàm(1, 2); // Gọi hàm tên_hàm với hai đối số tên_hàm(1, 2); // Gọi hàm tên_hàm với hai đối số ứng với đối_số_1 đối_số_2
ứng với đối_số_1 đối_số_2
tên_hàm(1); // Gọi hàm tên_hàm với đối_số_1 có giá trị tên_hàm(1); // Gọi hàm tên_hàm với đối_số_1 có giá trị 1, đối_số_2 có giá trị undefined
1, đối_số_2 có giá trị undefined </script>
(8) Trong JavaScript, gọi hàm không thiết Trong JavaScript, gọi hàm không thiết
phải gọi hàm với số đối số định
phải gọi hàm với số đối số định
nghĩa hàm, số đối số định nghĩa
nghĩa hàm, số đối số định nghĩa
hàm, đối số không chuyển cho hàm
hàm, đối số không chuyển cho hàm
sẽ mang giá trị undefined.
sẽ mang giá trị undefined.
Các kiểu chuyển vào hàm Các kiểu chuyển vào hàm
theo giá trị
theo giá trị, đối tượng chuyển vào hàm , đối tượng chuyển vào hàm theo tham chiếu.
theo tham chiếu.
Hàm đối tượng hạng JavaScript Hàm đối tượng hạng JavaScript
Tất hàm đối tượng nguyên mẫu
Tất hàm đối tượng nguyên mẫu
Function Hàm tạo dùng
Function Hàm tạo dùng
phép toán gán đối tượng
phép toán gán đối tượng
khác, dùng làm đối số cho
khác, dùng làm đối số cho
các hàm khác Do đó, JavaScript hỗ trợ hàm cấp
các hàm khác Do đó, JavaScript hỗ trợ hàm cấp
độ cao
(9) Gọi Hàm:Gọi Hàm: Ban đầu bạn khơng gọi hàm Ban đầu bạn khơng gọi hàm
hàm khơng hoạt động, có nghĩa tất
hàm khơng hoạt động, có nghĩa tất
gì bên khơng thực
gì bên khơng thực
Javascript load Vì ta cần có thao tác gọi
Javascript load Vì ta cần có thao tác gọi
lên để hành động thực
lên để hành động thực
hiện.Rất đơn giản bạn cần ghi lại tên hàm mà
hiện.Rất đơn giản bạn cần ghi lại tên hàm mà
thôi
thôi
VD1:VD1:<body><script language="javascript" <body><script language="javascript" type="text/javascript"> function goiham()
type="text/javascript"> function goiham()
{document.write ("Chào
{document.write ("Chào
người");document.writeln("<br>Chào
người");document.writeln("<br>Chào
người");} goiham()</script></body>
(10)CÁC HÀM CÓ SẴN CÁC HÀM CÓ SẴN evaleval
parseIntparseInt
(11) EVALEVAL Cú pháp:
Cú pháp:
returnval=eval (bất kỳ biểu thức hay lệnh
returnval=eval (bất kỳ biểu thức hay lệnh
hợp lệ Java)
hợp lệ Java) PARSEINTPARSEINT
Cú pháp
Cú pháp
parseInt (string, [, radix])
parseInt (string, [, radix])
PARSEFLOATPARSEFLOAT Cú pháp
Cú pháp
parseFloat (string)
(12)Ví dụ Ví dụ
<HTML><HTML> <HEAD><HEAD>
<TITLE> perseInt Exemple </TITLE><TITLE> perseInt Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript"><SCRIPT LANGUAGE= "JavaScript">
document.write("Converting 0xC hex to base-10: document.write("Converting 0xC hex to base-10: " + parseInt(0xC,10) + "<BR>");
" + parseInt(0xC,10) + "<BR>");
document.write("Converting 1100 binary to base-document.write("Converting 1100 binary to base-10: " + parseInt(1100,2) + "<BR>");
10: " + parseInt(1100,2) + "<BR>");
(13)Mảng Mảng
JavaScript không hỗ trợ cấu trúc liệu
JavaScript không hỗ trợ cấu trúc liệu
mảng Netscape tạo Phương
mảng Netscape tạo Phương
thức cho phép bạn tự tạo hàm
thức cho phép bạn tự tạo hàm
khởi tạo mảng sau:
khởi tạo mảng sau:
function InitArray(NumElements){
function InitArray(NumElements){
this.length = numElements;
this.length = numElements;
for (var x=1; x<=numElements; x++){
for (var x=1; x<=numElements; x++){
this[x]=0
this[x]=0
}
}
return this;
(14)Ví dụ Ví dụ <HTML> <HEAD>
<HTML> <HEAD>
<TITLE> Array Exemple </TITLE> <TITLE> Array Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript"> <SCRIPT LANGUAGE= "JavaScript"> function InitArray(numElements) { function InitArray(numElements) {
this.length = numElements; this.length = numElements;
for (var x=1; x<=numElements; x++){ for (var x=1; x<=numElements; x++){ this[x]=0 this[x]=0 } } return this; return this; } }
myArray = new InitArray(10); myArray = new InitArray(10); myArray[1] = "Nghệ An";
myArray[1] = "Nghệ An"; myArray[2] = "Hà Nội"; myArray[2] = "Hà Nội";
kiểu bảnkiểu bản mảng kết hợpmảng kết hợp theo giá trịtheo giá trị