Bài 5 CÁC ĐỐI TƯỢNG JAVASCRIPT

Đối tượng là một tập hợp bao gồm các biến (còn gọi là các thuộc tính của đối tượng) và các hàm (phương thức – method).

Ví dụ trong JavaScript thì một chuỗi là một đối tượng. Trong đối tượng này có thuộc tính length chỉ chiều dài một chuỗi. Phương thức toUpperCase() chuyển đổi tất cả các ký tự alpha thành chữ hoa.

Để tạo một đối tượng ta sử dụng cú pháp chung như sau : var biendt = new Object().

Sử dụng toán tử new để tạo một thực thể cho đối tượng Object và gán cho biến biendt. Chúng ta sử dụng toán tử dấu chấm để truy cập đến các phương thức và thuộc tính của đối tượng.

Ví dụ :

S = new String(“JavaScript”); // S=”JavaScript”;

Để truy cập đến thuộc tính length và phương thức toUpperCase ta sử dụng hai câu lệnh sau: S.length; S.toUpperCase();

5.2 Đối Tượng String

Được sử dụng để lưu trữ và thực hiện các thao tác trên dữ liệu kiểu chuỗi ký tự.

Ta có thể khởi tạo đối tượng này bằng cách sử dụng toán tử new hoặc gán trực tiếp một chuỗi cho một biến.

var bien_string = new String(chuoi_khoi_tao); Hoặc: var bien_string = chuoi_khoi_tao;

Ví dụ :

var str1 = new String(“Hoc JavaScript”); var str2 = “Hoc JavaScript”;

hai câu lệnh trên tương đương. Để nối 2 chuỗi ta sử dụng toán tử +.

Đối tượng này có các thuộc tính và phương thức sau:

Thuộc tính: length. Đây là thuộc tính chỉ đọc dùng lưu trữ chiều dài của chuỗi.

Ví dụ :

var S1 = “KHOA”, S2=”TINHOC”;

var str = S1 + S2; // str =”KHOATINHOC”; var len = str.length;

Các phương thức xử lý chuỗi.

Tên phương thức Mô tả Ví dụ

CharAt(n) Trả về ký tự thứ n. Vị trí đầu tiên của chuỗi được tính là 0. Nếu không có ký tự nào sẽ trả về null.

S=”JavaScript”;

T =S.charAt(2); //t=’v’ T = S.chatAt(12); //t=null indexOf(substr[,startindex]) substr là một chuỗi con,

startindex là một số nguyên tuỳ chọn (mặc định bằng 0). Hàm trả về chỉ số của substr trong chuỗi bắt đầu tính từ startindex. Nếu không có trả về giá trị -1

var str1 =

“BDBEBEEBIBOBU"; var str2 = “BE”

var s = str1.indexOf(str2); // s = 2

lastIndexOf(substr[,startindex]) Hoạt động giống indexOf() nhưng tìm kiếm theo chiều ngược lại. var str1 = “BDBEBEEBIBOBU"; var str2 = “BE” var s = str1.lastIndexOf(str2); // s = 4

substr(start[, length]) Trích chuỗi con bắt đầu từ vị trí start và chiều dài length. Nếu không có tham số length, sẽ trả về chuỗi con từ vị trí start đến hết chuỗi. var s, ss; var s = "wrghhhjdog."; ss = s.substr(4,3); // ss = “hhj” substring(start, end) Trích chuỗi con từ vị trí start

đến vị trí end.

var s, ss;

var s = "wrghhhjdog."; ss = s.substring(3,7);

// ss = “hhhjd” replace(rgExp, replaceText) Trả về chuỗi mới trong đó đã

thực hiện thay một phần các xuât hiện của chuỗi rgExp thành chuỗi replaceText toLowerCase() Trả về chuỗi đã chuyển sang

chữ thường

Var S, SS = “aSDD da”; S = SS.toLowerCase(); //S = “asddda”

toUpperCase() Trả về chuỗi đã chuyển sang chữ hoa.

Var S, SS = “aSDD da”; S = SS.toUpperCase(); //S = “ASDDDA” split([chuoi_phan_cach]) Chia chuỗi thành một mảng với

một chuỗi con đóng vai trò là chuỗi phân cách.

Var S = “today is Sunday”;

var Ar = S.split(“ “); //dấu phân cách là khoảng trắng //Mảng Ar có giá trị: Ar[0] = “today”, Ar[1] = “is”, Ar[2]= “Sunday”.

Ví dụ: Tìm số ký tự của chuỗi S là ký tự alpha. var S=”addff dG 34”, countch =0; for(i=0; i<S.length; i++)

ch = S.charAt(i);

if ( ((ch >= ’A’) &&( ch <= ‘Z’)) || ((ch >= ’a’) &&( ch <= ‘z’)) ) countch++;

}

alert(“Chuỗi “ + S +” có “ + countch + “ ký tự alpha”);

5.3 Đối Tượng Date

Đối tượng này lưu trữ các thông tin về thời gian và thực hiện thao tác với kiểu dữ liệu DateTime.

Cú pháp 1: Tạo một thực thể cho đối tượng Date lấy giá trị hiện hành. var biendate = new Date();

Đối tượng biendate tạo ra sẽ chứa giá trị ngày, tháng, năm, giờ, phút, giây của đồng hồ hệ thống trong máy người sử dụng.

Cú pháp 2 :

var biendate = new Date(“chuoi_date_time”):

sẽ tạo biến có giá trị ngày, tháng…được xác định trong chuoi_date_time.

Ví dụ:

var d = new Date("12/10/2002 3:4:5") sẽ tạo biến d lưu giá trị ngày 10 tháng 12 năm 2002 và 3 giờ 4 phút 5 giây.

Cú pháp:

var biendate = new Date(songuyen):

sẽ tạo biến lưu thời gian có giá trị tính ra mili giây đến thời điểm đó tính từ 1/1/1970 lúc 0 giờ 0 phút 0 giây là songuyen mili giây.

Ví dụ :

var d = new Date(1030899600000); sẽ tương đương d = new Date(“9/2/2002”) vì số mili giây tính từ 1/1/1970 đến ngày 2 tháng 9 năm 2002 là 1030899600000.

Dạng khai báo thứ 2 thường được sử dụng để chuyển dữ liệu kiểu chuỗi sang kiểu DateTime. Một số phương thức của đối tượng Date() hay được sử dụng.

Tên phương thức Mô tả

getDate() Trả về ngày hiện hành dưới dạng số nguyên từ 1 đến 31

getDay() Trả về ngày trong tuần dưới dạng số nguyên: 0, 1,2..6 tương ứng chủ nhật, thứ 2, thứ 3, …,thứ 7

getHours() Trả về giờ dưới dạng số nguyên từ 0 đến 23 getMinutes() Trả về phút dưới dạng số nguyên từ 0 đến 59

getSeconds Trả về giây dưới dạng số nguyên từ 0 đến 59

getTime() Trả về số mili giây tính từ ngày 01/01/1970 00:00:00 getYear() Trả lại số năm tính từ 1900

getFullYear() Trả lại số năm dưới dạng 4 chữ số

setDate() Thiết lập ngày dưới dạng số nguyên trong khoảng từ 1 đến 31 setMonth() Thiết lập tháng dưới dạng số nguyên trong khoảng từ 0 đến 11 setFullYear() Thiết lập năm dưới dạng 4 số nguyên

setHours() Thiết lập giờ dưới dạng số nguyên trong khoảng từ 0 đến 23 setMinutes() Thiết lập phút dưới dạng số nguyên trong khoảng từ 0 đến 59 setSeconds Thiết lập giây dưới dạng số nguyên trong khoảng từ 0 đến 59 setTime() Thiết lập thời gian có số mili giây tính từ 1/1/1970 là số nguyên

tham số. Các ví dụ ứng dụng đối tượng Date.

Ví dụ 1: In ngày tháng năm hiện hành ra trang web theo định dạng sau:”Hôm nay là thứ hai ngày 2 tháng 9 năm 2002 Bây giờ là 08:30:24 (PM) <HTML> <HEAD> <SCRIPT language="JavaScript"> <!--

// Hàm trả về chuỗi thứ theo giá trị tham số n. n= 0 -> Chủ nhật, n=1->Thứ hai… // n là số nguyên có giá trị 0 -> 6. function fmthu(n) { switch (n) { case 0: return "Chủ nhật"; case 1: return "Thứ hai"; case 2: return "Thứ ba"; case 3: return " Thứ tư"; case 4: return " Thứ năm"; case 5: return " Thứ sáu"; case 6: return " Thứ bảy"; } } //Hàm trả về chuỗi số viết bằng 2 chữ số //Tham số n là một số có giá trị từ 0->31 function fmTime(n) { if (n<10) return "0" + n; else return n; }

// Hàm in các chuỗi cần thiết ra màn hinh( function viet_ngay()

var d = new Date(); thu = fmthu(d.getDay());

ngay = fmTime(d.getDate()); thang = fmTime(d.getMonth() + 1);

// Cộng thêm 1 do getMonth() trả về giá trị từ 0 đến 11. nam = d.getFullYear();

S1 = "<FONT face='vni-times' size='5' color='red'>";

S1 += "Hôm nay là " + thu + " ngày " + ngay + " tháng " + thang + " năm " + nam; gio = fmTime(d.getHours()); var ampm; if (gio > 12) { gio = fmTime(gio - 12); ampm = "PM"; } else ampm = "AM"; phut = fmTime(d.getMinutes()); giay = fmTime(d.getSeconds());

S2 =" Bây giờ là " + gio + " : " + phut + " : " + giay + "(" + ampm + ")"; // Viết chuỗi S1 ra trang Web và xuống dòng

document.write (S1 + "<BR>"); // Viết chuỗi S1 ra trang Web document.write(S2); } - -> </SCRIPT> </HEAD> <BODY> <FONT face="vni-times">

Ví dụ về kiểu Date </FONT><BR> <SCRIPT language="JavaScript">

viet_ngay() </SCRIPT>

</BODY> </HTML>

5.4 Đối Tượng Array

Được sử dụng tạo, lưu trữ các cấu trúc dữ liệu dạng mảng. Để tạo một mảng ta sử dụng các cú pháp sau:

var ten_mang = new Array(); Dùng để tạo một mảng rỗng. var ten_mang = new Array(n); Tạo mảng có số phần tử là n.

var ten_mang = new Array(gt1, gt2, ..,gtn); Tạo mảng có n phần tử và gán giá trị cho các phần thử này.

Mỗi phần tử trong mảng được tham chiếu như sau: ten_mang[n], n là một số nguyên chỉ phần tử cần truy cập.

Thuộc tính và phương thức.

Thuộc tính: length thể hiện số phần thử của mảng. Các phương thức:

o join ([chuoi_phan_cach]): Trả về một chuỗi bằng cách liệt kê thứ tự các thành phần trong chuỗi và các thành phần được phân cách với nhau bởi chuỗi phân cách (mặc định là một khoảng trắng).

Ví dụ:

var Ar = new Array(“Mon”, “Tue”, “Wed”); var s1 = Ar.split (“-“); // s1 = “Mon-Tue-Wed”. var s2 = Ar.split (); // s2 = “Mon Tue Wed”.

o concat (ArrObj); Trả về một mảng đã được nối thêm mảng ArrObj. var Arr1 = new Array(“Mon”, “Tue”, “Wed”);

var Arr2 = new Array(“Thu”);

var Arr = Arr1.cocat(Arr2); // Arr[0] = “Mon”, Arr[1] = “Tue”, Arr[2] = “Wed”, Arr[3]= “Thu”

o toString(). Biến một mảng thành một chuỗi được phân cách bằng dấu phẩy. o reserver(): Tạo lại bản sao của mảng cùng với những phần tử đảo ngược.

Lưu ý: Thuộc tính length của mảng tự động tăng khi ta thêm các phần tử vào mảng.

Ví dụ sau cho phép ta nhập vào các phần tử mảng mà không biết trước số phần tử sẽ nhập.

var A = new Array(); /*tạo một biến đối tượng mảng chưa có phần tử nào và là biến toàn cục*/

function Input() {

{ var i = A.length;

A[i] = prompt(“Nhập phần tử thứ “ + i); }

while (confirm(“ Click OK để nhập tiếp”)); }

function OutPut() {

alert(“ mảng A có chiều dài “ + A.length + “ và giá tri(: “ + A); }

</SCRIPT> </HEAD>

<BODY>

<A href=”#” onClick=” Input();”> Click đây để nhập liệu</A><BR> <A href=”#” onClick=” Output();”> Click đây để xuât liệu</A> </BODY>

</HTML>

Chú ý: Phương thức alert() có đối số là một chuỗi. Khi đối số là mảng, nó tự động đổi kiểu mảng thành kiểu chuỗi bằng cách thêm vào các ký tự dấu phẩy vào giữa các phần tử mảng trong chuỗi (JavaScript đã sử dụng phương thức toString()).

Mảng chúng ta vừa học cho phép lưu các giá trị theo vị trí bằng số. Mảng dùng chuỗi để lưu các giá trị gọi là mảng liên kết.

Ví dụ: tạo bảng lưu các danh mục điện thoại. var phone = new Array();

phone[“binh”] = “8763892”; phone [“tuan”] = “8465782”;

Hai dòng lệnh trên đã đặt các liên kết vào trong mảng phone. Để lấy số điện thoại của “tuan” trong mảng, ta sử dụng lệnh: phone[“tuan”].

Mảng dạng này rất thích hợp trong việc lưu trữ những cặp giá trị song song. Ví dụ ta muốn lưu một danh sách các mặt hàng mà khách hàng đã chọn mua hàng cùng số lượng mỗi mặt hàng.

Để truy cập toàn bộ mảng này, ta sử dụng vòng lặp for (bien in mang) theo cú pháp như đã giới thiệu ở phần trước.

Ví dụ:

var ArrIndex = new Array(“1, abc”, 123), ArrMSSV = new Array(); ArrMSSV[“Vu”] = 123456; ArrMSSV[“Lan”] = 481456; ArrMSSV[“Hoang”] = 123786; ArrMSSV[“Lan”] = 123861; for (i in ArrIndex) alert(ArrIndex[i]); for(i in ArrMSSV) alert(ArrMSSV[i]);

Ví dụ 2: Viết 2 hàm cho phép nhập, xuất một mảng liên kết. <HTML> <HEAD> <!- - <SCRIPT language="JavaScript"> A = new Array(); // Nhập 2 phần tử vào mảng. function inPut() { i=0; do {

{ value = prompt("value "); A[tp] = value; i++; } }while(i<2); } function outPut() { for (i in A) alert("A[" + i + "]: " + A[i]); } - -> </SCRIPT> </HEAD> <BODY>

</HTML>

5.5 Đối Tượng Boolean

Đối tượng Boolean là một đối tượng bao ngòai (wrapper) cho một giá trị boolean. Đối tượng này được dùng để chuyển một giá trị không phải boolean (non-boolean) thành giá trị boolean. cú pháp tạo một đối tượng boolean: varvariablename= new Boolean(boolvalue)

Nếu một đối tượng boolean không có giá trị khởi tạo (giá trị ban đầu) hoặc nó bằng 0, null, "", NaN(Not A Number) thì giá trị khởi tạo của nó sẽ được gán là false. Đối tượng boolean chỉ nhận giá trị true khi giá trị khởi tạo là chuỗi, kể cả chuỗi "false"

- Ví dụ về đối tượng boolean với giá trị khởi tạo là false: var var1=new Boolean()

var var2=new Boolean(0) var var3=new Boolean(null) var var4=new Boolean("") var var5=new Boolean(false) var var6=new Boolean(NaN)

- Ví dụ về đối tượng boolean với giá trị khởi tạo là true: var var1=new Boolean(true)

var var2=new Boolean("true") var var3=new Boolean("false") var var4=new Boolean("Richard") 5.6 Đối Tượng Toán Học

Đối tượng Math bao gồm tất cả các hàm và các hằng số toán học có sẵn. Ta không cần phải tạo đối tượng Math trước khi dùng.

Để sử dụng một hàm (phương thức) hay hằng số (thuộc tính) của đối tượng này, ta sử dụng cú pháp:

Math[.{property | method}] Các ví dụ:

- Lấy một số random nằm trong khoảng 0 và 1 trong biến "r_number" ta có hàm random(): r_number=Math.random();

- Để làm tròn số 8,6 ta có hàm round(): r_number=Math.round(8.6); - Để truy cập hằng số PI: r_number = Math.PI ;

5.7 DOM (Document Object Model)

Trên trang web có nhiều đối tượng. Để có thể quản lý tốt các đối tượng này, chúng ta phải biết cách trình duyệt quản lý chúng như thế nào và cách truy cập đến từng đối tượng trong mô hình. Sau đây là tổ chức phân cấp của mô hình DOM (Hình sau).

Ở đầu của DOM là đối tượng windows là cửa sổ chứa trang web đang xem. Đối tượng này lại chứa các đối tượng con: navigator, location, document...Mỗi đối tượng này lại chứa nhiều thông tin trong nó như các thuộc tính, các phương thức và các đối tượng con khác. Để truy cập đến đối tượng hoặc các thành phần của đối tượng nào, ta bắt đầu từ đối tượng windows đi xuống. Các đối tượng hoặc đối tượng với các phương thức, thuộc tính của nó được phân cách nhau bởi dấu chấm (.).

Ví dụ :

- Đối tượng navigator chứa các thông tin về trình duyệt. Hai thuộc tính appName lưu tên của trình duyệt và appVersion lưu thông tin về phiên bản của trình duyệt.

Câu lệnh window.navigator.appName và window.navigator.appVersion trả về chuỗi chứa tên và phiên bản của trình duyệt máy đang sử dụng.

- Đối tượng History lưu thông tin các trang Web mà người sử dụng đã duyệt qua trong của sổ hiện hành. Đối tượng này có phương thức go(n), trong đó n là một số nguyên. Nếu n>0 sẽ tương đương với việc click vào nút forward n lần, nếu n<0 thì ngược lại. Do vậy muốn quay lại 2 trang trước ta chỉ cần gọi câu lệnh: window.history.go(-2).

Tuy nhiên nếu đoạn mã JavaScript truy cập đến ngay cửa sổ chứa nó, có thể bỏ từ window (window mặc định là cửa sổ hiện hành với trang chứa JavaScript).

Trong mô hình trên thì đối tượng document là đối tượng quan trọng và hay sử dụng nhất. Nó chứa toàn bộ tài liệu của trang web như: hình ảnh, liên kết, biểu mẫu . . .

Ta cũng thấy tất cả các thành phần của đối tượng này được tổ chức theo dạng mảng. Để truy cập đến được các thành phần của đối tượng này, ta có thể truy cập theo chỉ số mảng hoặc theo tên của đối tượng. Lưu ý là chỉ số mảng được tính từ 0.

Ví dụ : Cho một form như sau: <HTML>

<BODY>

Chú ý: Trang ở trên có 2 form. Trong form thứ nhất lại có 2 textbox có cùng tên “diachi”. • Lấy giá trị của trong textbox có tên là ten trong form thứ nhất ta sử dụng một

trong những câu lệnh sau.

window.document.forms[0].ten.value; document.forms[0].ten.value;

document.form1.ten.value;

• Lấy giá trị phần tử địa chỉ thứ 2 trong form1 document.form1.diachi[1].value

hoặc document.forms[0].elements[2].value; • Đếm số form trong trang:

document.forms.length;

Chúng ta thường sử dụng mô hình này để kiểm tra tính hợp lệ của một biểu mẫu trước khi thông tin trong biểu mẫu được gửi lên server hoặc kiểm tra trình duyệt của người sử dụng để hướng dẫn người sử dụng đến những trang thích hợp.

Ví dụ

Tạo form như hình vẽ.

Nhập giá trị X, Y và chọn phép toán +, - , *, /. Click nút calcul sẽ kiểm tra các giá trị trong X, và Y có hợp lệ chưa. Nếu hợp lệ, kết quả sẽ được ghi vào textbox result. Click delete sẽ xoá các giá trị trong form trở về giá trị mặc định ban đầu. X, Y hợp lệ khi: là một số. Đối với phép toán chia thì Y phải khác 0.

<SCRIPT language="JavaScript"> <!--

// Kiểm tra giá trị X và Y có hợp lệ hay không. Nếu giá trị nào không hợp lệ, // chuyển con trỏ về lại ô đó và trả về giá trị false, ngược lại trả về true. function checkXY()

{

var X = document.calculation.gtx.value; var Y= document.calculation.gty.value; if (isNaN(X) || (X.length==0))

{//Đưa con trỏ về textbox X khi X không hợp lệ. document.calculation.gtx.focus(); return false; } if (isNaN(Y) || (Y.length==0)) { document.calculation.gty.focus(); return false; }

return true; // Trả về true nếu X và Y đều là số. }

/* Hàm kiểm tra xem người sử dụng đã chọn phép toán nào và trả về phép toán đã chọn. Nếu chưa chọn hàm sẽ trả về giá trị "chuachon".*/

function getOpe() {

Bài 7 LẬP TRÌNH PHP – LẬP TRÌNH PHÍA SERVER

Bài 8 THÊM NỘI DUNG ĐỘNG VÀO TRANG HTML