Lecture09 JAVASCRIPT Lập trình Java

 Javascript là ngôn ngữ động vì các đối tựơng có khả năng tương tác với nhau thông qua người sử dụng hoặc các sự kiện.. Các đối tượng trong JavaScript gồm 2 nhóm:JavaScript cung cấp mộ

TỔNG QUAN VỀ JAVASCRIPT

GIỚI THIỆU VỀ JAVASCRIPT

 Javascript ra đời với tên gọi LiveScript, sau đó Nescape đổi tên

thành Javascript Tuy nhiên giữa Java và Javascript có rất ít các điểm chung dù rằng cú pháp của chúng có thể có những điểm giống nhau.

 Ngôn ngữ Javascript được tạo bởi Nescape vào năm 1996 và được

đưa vào trong trình duyệt Nescape Navigator 2.0 của họ thông qua trình biên dịch để đọc và thực hiện các mã lệnh Javascript được kèm theo trong các trang HTML

 Javascript là một ngôn ngữ kịch bản (script) để viết kịch bản cho

phía client Client side là những yêu cầu của người sử dụng được xử

lý tại máy khách Thông thường những yêu cầu này là tính tóan, kiểm tra tính hợp lệ của dữ liệu hay các hiệu ứng, các yêu cầu này thường không liên quan đến nguồn cơ sở dữ liệu trên server.

 Đặc điểm của JAVASCRIPT:

 Javascript là một ngôn ngữ kịch bản được viết chung

với HTML

 Javascript là ngôn ngữ động vì các đối tựơng có khả

năng tương tác với nhau thông qua người sử dụng hoặc các sự kiện

GIỚI THIỆU VỀ JAVASCRIPT

 Đặc điểm của JAVASCRIPT:

nhiều kiểu đối tượng, ví dụ đối tượng Math với tất cả

các chức năng toán học Nhưng JavaScript không là ngôn ngữ hướng đối tượng như C++/Java.

2. Các đối tượng trong JavaScript gồm 2 nhóm:

JavaScript cung cấp một bộ các Built–in Object để cung cấp các thông tin về sự hiện hành của các đối tượng được load trong trang Web và nội dung của nó, các đối tượng này gồm phương thức (method) làm việc với các thuộc tính (properties) của nó.

Định nghĩa thuộc tính, phương thức của đối tượng:

Cú pháp:

ObjectName.PropertiesName ObjectName.Method()

GIỚI THIỆU VỀ JAVASCRIPT

CẤU TRÚC CỦA ĐOẠN JAVASCRIPT

 Nhúng Javascript vào tập tin HTML

Ví dụ 2: Sưu tầm mã JavaScript từ Website

http:// www.echip.com.vn hiệu ứng “Chuột đồng hồ” nhúng vào trang web

2. Sử dụng tập tin JavaScript bên ngoài:

Có thể viết một tập tin Javascript riêng và sau đó kết nối với một hoặc nhiều tập tin trang web khác nhau.

2. Sử dụng tập tin JavaScript bên ngoài:

CẤU TRÚC CỦA ĐOẠN JAVASCRIPT

Ví dụ: Sưu tầm mã JavaScript từ Website http:// www.echip.com.vn

hiệu ứng “Ngoài kia lá rơi đầy” nhúng vào trang web

Lưu ý: trong thẻ JavaScript ta có thể bỏ thuộc tính SRC và

Language, khi đó ngôn ngữ mặc định là JavaScript

Dreamweaver hỗ trợ phân biệt từ khóa bằng màu chữ,

hỗ trợ các hàm, thuộc tính của các tag, giúp người sử dụng thuận tiện trong việc thiết kế và viết chương trình

CẤU TRÚC CỦA ĐOẠN JAVASCRIPT

CÚ PHÁP CƠ BẢN CỦA LỆNH

 Lệnh đơn và khối lệnh:

 Lệnh đơn: là một câu lệnh được kết thúc bằng dấu

chấm phẩy(;) Trong JavaScript cuối mỗi câu lệnh ta có thể dùng dấu (;) hoặc không dùng dấu gì cả

 Khối lệnh: là tập hợp nhiều câu lệnh đơn được bao bọc

bởi cặp dấu {}

 Lời chú thích trong chương trình: trình duyệt sẽ bỏ qua khi

thông dịch chương trình JavaScript hổ trợ 2 loại chú thích:

3. Xuất dữ liệu ra trang Web: JavaScript hỗ trợ 2 phương thức

hiển thị dữ liệu ra trang Web là:

+ document.write() + document.writeln()

document.write(“String ” + variable );

cặp dấu nháy kép

CÚ PHÁP CƠ BẢN CỦA LỆNH

4. Sử dụng document.writeln() và tag <pre>:

 Dùng với tag <pre>

<pre>

document.writeln()

</pre>

 Nếu không có cặp tag <pre></pre>

document.writeln() tạo một khoảng trắng

xuất dữ liệu và xuống dòng.

CÚ PHÁP CƠ BẢN CỦA LỆNH

BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT

 Biến

− Biến là tên của một phần tử trong chương trình, được sử dụng để lưu trữ thông tin do người dùng nhập vào hoặc kết quả trung gian của quá trình tính toán

− Trong Javascript khi khai báo biến không cần xác định kiểu dữ liệu cho biến, do đó khi một biến được khai báo thì nó có thể chứa bất kỳ kiểu dữ liệu nào.

− Phạm vi của biến có thể là một trong hai kiểu sau:

− Biến toàn cục: Khai báo bên ngoài các hàm Có thể được truy cập từ bất kỳ đâu trong ứng dụng Được khai báo: x = 0;

− Biến cục bộ: Khai báo trong các hàm Chỉ được truy cập trong phạm

vi chương trình mà nó khai báo Biến cục bộ được khai báo trong một hàm với từ khoá var: var x = 0;

− Lưu ý: Nếu tên biến toàn cục và cục bộ trùng nhau thì biến được sử dụng trong hàm là biến cục bộ.

a) Cách khai báo biến: Trong JavaScript, để khai báo biến

dùng từ khoá var, cũng có thể bỏ qua từ khóa var.

var VariableName;

Ví dụ:

var a ; Hoặc a=5;//khai báo và khởi tạo

khởi tạo giá trị ban đầu

biến kế tiếp nhau cách nhau bởi dấu (,)

BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT

− Một biến có thể chứa bất kỳ kiểu dữ liệu nào, giá trị của

biến có tác dụng từ vị trí khai báo trở đi

BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT

c) Quy tắc đặt tên biến:

Tên biến gồm các chữ cái và số, không dùng các ký tự đặc biệt như: ( , [ , { , # , & … theo nguyên tắc sau:

 Tên biến phải bắt đầu bằng ký tự hoặc ký tự

gạch dưới( _ )

 Không bắt đầu bằng ký tự số.

 Không chứa khoảng trắng, tên biến phải gợi nhớ

 Không trùng với từ khoá của JavaScript

d) Các từ khoá trong JavaScript

BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT

abstract extends int super

else

2. Dữ liệu: Có 4 loại dữ liệu

 Kiểu số: một biến kiểu số chứa bất kỳ giá trị số nào:

số thập phân, số nguyên, số dạng chấm phẩy động.

 Kiểu chuỗi: một biến kiểu chuỗi có thể chứa một

BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT

c) Kiểu Boolean: Là dữ liệu chỉ có 2 giá trị False

hoặc True thường dùng trong trường hợp biến hoặc hàm chỉ nhận một trong 2 trạng thái đúng hoặc sai.

d) Kiểu Null: trả về giá trị rỗng

3. Tóan tử:

 Tóan tử số học

BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT

Tóan Tử Chức Năng Ví dụ Kết quả

Tóan Tử Ví dụ Tương đương

Tóan Tử Chức Năng Ví dụ

>= lớn hợn hoặc bằng 5>=8 returns false

<= nhỏ hơn hoặc bằng 5<=8 returns true

c) Toán tử so sánh

BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT

Tóan Tử Chức Năng Ví dụ

&& Và (x < 10 && y > 1) returns true x =6; y =3 ;

|| hoặc (x==5 || y==5) returns false x = 6 ; y =3

! not !(x==y) returns true x=6; y =3;

d)Toán tử logic

BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT

f) Tóan tử Điều kiện:

− Nếu biểu thức điều kiện đúng thì trả về giá trị value 1

− Nếu biểu thức điều kiện sai thì trả về giá trị value 2

CẤU TRÚC ĐIỀU KHIỂN

 Mẫu 2: 1 điều kiện và 2 lựa chọn công việc xử lý

CẤU TRÚC LỰA CHỌN

 Mẫu 3 (if …else lồng nhau): Áp dụng cho trường hợp có

nhiều chọn lựa khác nhau

… khối lệnh 3

CẤU TRÚC LỰA CHỌN

else if(a==b||b==c||c==a)

alert("Tam giac cân");

else alert("Tam giác thuong");

</script>

CẤU TRÚC LỰA CHỌN

Cấu trúc chọn lựa Switch Case

 Mẫu 2:

switch(biểu thức) {

CẤU TRÚC LỰA CHỌN

VD: <script>

t=prompt( "nhap thang: ");

switch (eval(t))

{

case 1: case 3: case 5: case 7: case 8 : case 10: case 12:

alert("Thang "+ t+ " co 31 ngay"); break; case 2:

alert("Thang "+t + " co 28 ngay"); break; case 4: case 6: case 9: case 11:

alert("Thang "+t +" co 30 ngay"); break; default:

alert("Khong co thang nay");

}</script>

CẤU TRÚC LỰA CHỌN

Ví dụ: Viết chương trình tạo một table m dòng n cột

</Script></body>

CẤU TRÚC LẶP

 Vòng lặp while : thường áp dụng cho số lần lặp không xác

 Vòng lặp do …while : Thực hiện lệnh trước sau đó kiểm tra

biểu thức điều kiện

Cú pháp:

do {

khối lệnh 1;

} While(biểu thức điều kiện);

khối lệnh 2;

CẤU TRÚC LẶP

 Vòng lặp for …in : dùng để duyệt qua các thuộc tính của một

đối tượng hay giá trị của các phần tử trong mảng

Cú pháp:

for ( variable in Object) {

khối lệnh 1 ; }

khối lệnh 2;

CẤU TRÚC LẶP

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

 Ví dụ: Nếu giá trị x đưa vào vòng lặp nhỏ hơn 5, vòng lặp sẽ

Lệnh Continue

• Đố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

Ví dụ: Đoạn mã sau tăng x từ 0 lên 5, nhảy lên 8 và tiếp tục tăng

CẤU TRÚC LẶP

 Câu lệnh try …catch và throw : dùng xử lý lỗi trong các

modul Nó được dùng trong Internet Explore 5 và trong IIS

Cú pháp:

try {

khối lệnh ;

} catch(objErr) {

Xữ lý lỗi ;

}

CẤU TRÚC LẶP

MẢNG - ARRAY

JavaScript không hỗ trợ cấu trúc dữ liệu mảng nhưng tạo ra phương thức cho phép tự tạo ra các hàm khởi tạo mảng:

function taomang(n) {

this.length = n;

for (var i=1; i<=n; i++){

this[i]=0 }

return this;

}

Tạo ra 1 mảng với kích thước xác định trước (n) và điền các giá trị 0

HÀM TRONG JAVASCRIPT

Khai báo các biến sử dụng trong hàm ;

Các câu lệnh trong JavaScript thực hiện tác vụ;

[return [giá trị /biểu thức] ];

}

− FunctionName: là tên hàm do người lập trình đặt Qui tắc đặt

tên hàm giống như tên biến

− Sau FunctionName là cặp dấu ngoặc ( ) chứa danh sách tham

số hình thức

− Nếu hàm không có tham số thì sau FunctionName cũng phải

có cặp dấu ngoặc ( )

− List_Parameter: là danh sách các tham số hình thức, nếu có

nhiều tham số có thì các tham số phải cách nhau bởi dấu phẩy, các tham số này không chỉ ra kiểu dữ liệu cụ thể và cũng không cần từ khoá var.

ĐỊNH NGHĨA

− Câu lệnh return: để kết thúc hàm nếu hàm có giá trị trả về thì

return để trả về giá trị

− Sau Return có thể chứa hoặc không chứa một giá trị cụ thể

hoặc một biểu thức tính toán

Ví dụ:

function Display(user , pwd)

{

document.write(“UserName cua ban la:” + user) ;

document.write(“Password cua ban la:” + pwd) ;

return ;

}

ĐỊNH NGHĨA

 Cách gọi hàm: Hàm sẽ không thực hiện cho đến khi nó được

gọi.

− Đối với hàm có đối số ta gọi tên hàm và danh sách các giá trị

truyền cho đối số đó

document.write(c);

} tong(2,3);

</script>

</body></html>

ĐỊNH NGHĨA

 Hàm prompt(): Tạo hộp thoại chứa 2 nút OK ,Cancel và một

textbox để người sd nhập nội dung, giá trị trả về của hàm prompt là nội dung nhập trong textbox

 Hàm confirm(): Hiển thị hộp thông báo có 2 nút OK và Cancel Hàm

trả về giá trị true nếu người sử dụng click OK và ngược lại thì trả về

document.write( a +" < "+b ) </script>

CÁC HÀM THÔNG DỤNG

TRONG JAVASCRIPT

 Các hàm thông dụng của chuổi và số:

 Hàm eval(): Trả về giá trị số của một chuỗi số

CÁC HÀM THÔNG DỤNG TRONG JAVASCRIPT

 Hàm ParseInt(strNum)

bỏ qua

giá trị NaN (Not a Number)

 Các hàm thiết lập thời gian:

 Hàm setTimeout( ): Báo cho JavaScript thực hiện một lệnh

JavaScript sau một khoảng thời gian nào đó

− Hàm trả về một ID (duy nhất đối với mỗi hàm setTimeout

thực hiện một lệnh)

− Giá trị ID này dùng để xoá khoảng thời gian đã thiết lập nếu

không cần thực hiện hàm Timeout nữa

Cú pháp:

IdTime=setTimeout(“Command JavaScript”, delayTime);

− Command JavaScript : có thể là lời gọi hàm hoặc là một câu

lệnh đơn

− delayTime :là khoảng thời gian chờ để thi hành Command

JavaScript, được tính bằng mili giây

CÁC HÀM THÔNG DỤNG

TRONG JAVASCRIPT

Ví dụ:

Idq=setTimeout(“alert(‘Đã hết giờ’)”,1000) ;

Cứ 1000 mili giây thì thông báo đã hết giờ một lần.

 Hàm clearTimeout(): Huỷ thời gian đã thiết lập bởi

70

3 ĐỐI TƯỢNGVÀ SỰ KIỆN

3.1 Khái niệm đối tượng

3.1.1 Khái niệm về đôi tượng 3.1.2 Các câu lệnh thao tác trên đối tượng

3.2 Sự kiện & Xử lý sự kiện

3.2.1 Khái niệm sự kiện và xử lý sự kiện 3.2.2 Một số sự kiện trong JavaScript 3.2.3 các sự kiện có sẵn của một số đối tượng.

3.3 Các đối tượng thường dùng

3.3.1 Đối tượng window 3.3.2 Đối tượng forms 3.3.3 Đối tượng Date 3.3.4 Đối tượng Math 3.3.5 Đối tượng String 3.3.6 Đối tượng history 3.3.7 Đối tượng links 3.3.8 Đối tượng Navigator 3.3.9 Đối tượng document

71

3.1 Khái niệm đối tượng

3.1.1 Khái niệm về đôi tượng

JavaScript là ngôn ngữ lập trình dựa trên đối tượng Trong sơ đồ phân cấp các đối tượng của JavaScript, các đối tượng con thực sự là các thuộc tính của các đối tượng cha

Vi dụ chương trình xử lý sự kiện trên form tên frmDieutra là thuộc tính của đối tượng document và trường text txtAge là thuộc tính của form frmDieutra

Để tham chiếu đến giá trị của txtAge phải sử dụng:

document.frmDieucha.txtAge.value

Text FileUpload Password Hidden Submit Reset Radio Checkbox Button Select

Plugin Mime Type Frame

document Location History

Layer Link Image Area Anchor Applet Plugin Form

navigator

Option

72

3.1 Khái niệm đối tượng

3.1.2 Các câu lệnh thao tác trên đối tượng

 Lệnh For in

Sử dụng để biêt tất cả các thuộc tính (properties) của một đối tượng

for (<variable> in <object>) { //Các câu lệnh

}

<Body><SCRIPT LANGUAGE= "JavaScript"><BODY>

document.write("The properties of the Window object are: <BR>"); for (var x in window)

document.write(" "+ x + ", ");

</SCRIPT></Body>

73

3.1 Khái niệm đối tượng

3.1.2 Các câu lệnh thao tác trên đối tượng(tt)

74

3.1 Khái niệm đối tượng

3.1.2 Các câu lệnh thao tác trên đối tượng(tt)

Ví dụ: <HTML> <Script Language= "JavaScript">

function person(first_name, last_name, age, sex){

this.first_name + "<BR>" );

write("Age :"+this.age+"<BR>");

write("Sex :"+this.sex+"<BR>");

} }

person1= new person("Thuy", "Dau Bich", "23",

75

3.2 Sự kiện & Xử lý sự kiện

3.2.1 Khái niệm sự kiện và xử lý 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 như: Click chuột

Chương trình xử lý sự kiện (Event handler) là 1 đoạn mã hay 1 hàm được thực hiện để phản ứng trước

1 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">

76

3.2 Sự kiện & Xử lý sự kiện

3.2.1 Khái niệm sự kiện và xử lý sự kiện (tt)

</Script></Head><Body>

<Form NAME="frmDieutra">

Nhập vào tên của bạn:<BR>

Tên <Input Type=Text Name="TEN" ><BR>

Đệm <Input Type=Text Name="DEM" ><BR>

Họ <Input Type=Text Name="HO" ><BR>

Age <Input Type=Text Name="AGE“

onChange="CheckAge(frmDieutra)"><BR>

<Input Type=Submit Value=”Submit”>

<Input Type=Reset Value=”Reset”>

</Form></Body></HTML>

77

3.2 Sự kiện & Xử lý sự kiện

3.2.2 Một số sự kiện trong JavaScript

onBlur Khi input focus bị xoá từ thành phần form

onClick Khi người dùng kích vào các thành phần hay liên kết của

form.

onChange Khi giá trị của thành phần được chọn thay đổi

onFocus Khi thành phần của form được focus(làm nổi lên).

onLoad Khi trang Web được tải.

onMouseOver Khi di chuyển chuột qua kết nối hay anchor.

onSelect Khi người sử dụng lựa chọn một trường nhập dữ liệu trên

form.

onSubmit Khi người dùng đưa ra một form.

onUnLoad Khi người dùng đóng một trang

78

3.2 Sự kiện & Xử lý sự kiện

3.2.3 Các sự kiện có sẵn của một số đối tượng.

Đố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