hoa cuong có thì sử dụng – thích thì lao vào

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

Đinh Vũ Trường Giang

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!

Hầu đặt đoạn code nhỏ

vào trang HTML họ.

JavaScript đặt đoạn text động vào

1 trang HTML - Một thị JavaScript sau:

document.write("&lth1&gt" + name + "&lt/h1&gt")

có thể viết biến text vào trang HTML.

JavaScript phản ứng với xự kiện -

JavaScript thiết lập thực thi có việc

đó 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

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

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

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

mềm áp dụng JavaScript - thường trình duyệt)

(6)

Ví dụ: Ví dụ:

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 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:

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

nghĩa hàm, số đối số định nghĩa

hàm, đối số không chuyển cho hàm

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

Function Hàm tạo dùng

phép toán gán đối tượng

khác, dùng làm đối số cho

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

gì bên khơng thực

Javascript load Vì ta cần có thao tác gọi

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à

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

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

hợp lệ Java)

hợp lệ Java)  PARSEINTPARSEINT

Cú pháp

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

mảng Netscape tạo Phương

thức cho phép bạn tự tạo hàm

khởi tạo mảng sau:

function InitArray(NumElements){

this.length = numElements;

for (var x=1; x<=numElements; x++){

this[x]=0

}

return this;

(14)

Ví dụ Ví dụ <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";