Các đối tượng trong JavaScript

Đối tượng mạng được sử dụng lưu trữ tập các giá trị trong một tên biến. Mỗi giá trị là một phần tử của mạng và có một chỉ số

Để tạo ra một thực thể của Array, sử dụng từ khóa (new) var family_names=new Array(3)

var family_names=new Array("Tove","Jani","Stale")

Để tham chiếu tới các phần tử của mảng, sử dụng tên mảng và chỉ số mảng. Chỉ số bắt đầu bằng 0. family_names[0]="Tove" family_names[1]="Jani" family_names[2]="Stale" mother=family_names[0] father=family_names[1]

Các thuộc tính của mạng và method được miêu tả dưới đây. NN: Netscape, IE: Internet Explorer

Properties (Các thuộc tính)

Cú pháp: object.property_name

Thuộc tính Miêu tả NN IE

Constructor Chứa hàm tạo ra mẫu ban đầu của đối tượng 4 4

Length Trả về số phần tử của mảng 3 4

Prototype Cho phép bổ sung thuộc tính vào mảng 3 4

Phương thức Methods

Cú pháp: object.method_name()

Phương thức Miêu tả NN IE

concat() Nối hai hoặc nhiều mạng thành một mảng mới 4 4

join(dấu phân cách) Đặt tất cả các phần tử của mạng trong một chuỗi phân cách nhau bởi dấu phân cách (dấu phẩy được sử dụng mặc định)

3 4

pop() Loại bỏ và trả về phần tử cuối cùng của mảng 4 5.5

push("phần tử 1 ","phần tử 2") Bổ sung một hoặc nhiều phần tử vào cuối mảng và trả về giá trị length của mạng

4 5.5

Reverse() Đảo ngược thứ tự các phần tử trong mảng 3 4

shift() Loại bỏ và trả về giá trị đầu tiên của mạng 4 5.5

slice(bắt đầu[,kết thúc]) Tạo ra một mảng mới từ một mảng cũ 4 4

sort() Sắp xếp các phần tử của mảng 3 4

splice(chỉ số,số phần tử[,el1,el2])

Bổ sung hoặc loại bỏ các phần tử của mảng 4 5.5

toSource() Trả về chuỗi biểu diễn mã nguồn của mảng 4.0

6 4

toString() Trả về chuỗi biểu diễn biểu diễn số phần tử của

mạng 3 4

unshift("phần tử 1,” phần tử 1”) Bổ sung một hoặc nhiều phần tử đến đầu mảng và trả về length mới (adsbygoogle = window.adsbygoogle || []).push({});

4 5.5

Ví dụ: <html> <body>

myArray[0] = "Bob"; myArray[1] = "Pete"; myArray[2] = "Paul"; document.write("myArray[0] = " + myArray[0] + "<br>"); document.write("myArray[2] = " + myArray[2] + "<br>"); document.write("myArray[1] = " + myArray[1] + "<br>"); myArray[1] = "Mike";

document.write("myArray[1] changed to " + myArray[1]); </script>

</body> </html>

Mảng 2 chiều và nhiều chiều

Chỉ số 0 1 2

0 Name1 Name2 Name3

1 Age1 Age2 Age3

2 Address1 Address2 Address3

personnel[0] = new Array(); personnel[0][0] = "Name0"; personnel[0][1] = "Age0"; personnel[0][2] = "Address0";

personnel[1] = new Array(); personnel[1][0] = "Name1"; personnel[1][1] = "Age1"; personnel[1][2] = "Address1";

personnel[2] = new Array(); personnel[2][0] = "Name2"; personnel[2][1] = "Age2"; personnel[2][2] = "Address2"; document.write("Name : " + personnel[1][0] + "<br>"); document.write("Age : " + personnel[1][1] + "<br>"); document.write("Address : " + personnel[1][2]); </script> </body> </html>

4.2.3.2 Đối tượng Boolean

Đối tượng Boolean là một trình bao bọc đối tượng cho giá trị boolean và được sử dụng để chuyển đổi giá trị không phải là Boolean sang giá trị boolean.

Nếu đối tượng boolean không có giá trị khởi tạo hoặc bằng 0, null, “”, false và NaN, giá trị khởi tạo là false ngược lại bằng true.

var b1=new Boolean() var b2=new Boolean(0) var b3=new Boolean(null) var b4=new Boolean("") var b5=new Boolean(false) var b6=new Boolean(NaN) var b1=new Boolean(true) var b2=new Boolean("true") var b3=new Boolean("false") var b4=new Boolean("Richard")

Các thuộc tính và method được miêu tả dưới đây:

Các thuộc tính

Cú pháp: đốitượng.tênthuộctính

Thuộc tính Miêu tả NN IE

constructor Chứa hàm tạo mẫu của đối tượng 4 4

prototype Cho phép bổ sung thuộc tính và phương thức cho đối tượng

3 4

Các phương thức

Cú pháp: object.method_name() (adsbygoogle = window.adsbygoogle || []).push({});

Method Description NN IE

toString() Chuyển đổi giá trị Boolean sang string. Phương thức này được gọi tự động bởi Javascript bất kì khi nào đối tượng Boolean được sử dụng trong tính hướng yêu cầu một chuỗi

4 4

valueOf() Trả về giá trị nguyên thủy (“true” hoặc “false”) của đối tượng Boolean 4 4 Ví dụ: <html> <body> <script type="text/javascript"> var b1=new Boolean( 0) var b2=new Boolean(1) var b3=new Boolean("") var b4=new Boolean(null) var b5=new Boolean(NaN) var b6=new Boolean("false")

document.write("0 is boolean "+ b1 +"<br />") document.write("1 is boolean "+ b2 +"<br />")

document.write("An empty string is boolean "+ b3 + "<br />") document.write("null is boolean "+ b4+ "<br />")

document.write("The string 'false' is boolean "+ b6 +"<br />") </script>

</body> </html>

4.2.3.3 Đối tượng Date

Đối tượng Date được sử dụng làm việc với ngày tháng và thời gian.

Để tạo ra một thực thể của đối tượng Date và gán giá trị tới biến “d”, thực hiện các bước sau: var d=new Date()

Sau khi tạo được thực thể đối tượng Date, có thể truy cập tới tất cả các method của đối tượng Date thông qua biến “d”.

Để trả về ngày hiện thời trong tháng của đối tượng Date, có thể viết như sau: d.getDate()

Đối tượng Date có thể có các tham số như sau: new Date(milliseconds)

new Date(dateString)

new Date(yr_num, mo_num, day_num [, hr_num, min_num, sec_num, ms_num])

• milliseconds - the number of milliseconds since 01 January, 1970 00:00:00

• dateString - the date in a format that is recognized by the Date.parse method

• yr_num, mo_num, day_num - the year, month or day of the date

• hr_num, min_num, sec_num, ms_num - the hours, minutes, seconds and milliseconds Nếu sử dụng Date(), JavaScript tạo ra một đối tượng cho ngày hiện thời theo thời gian trên máy cục bộ

var d=new Date("October 12, 1988 13:14:00") var d=new Date("October 12, 1988")

var d=new Date(88,09,12,13,14,00) var d=new Date(88,09,12)

var d=new Date(500)

Các thuộc tính

Cú pháp: object.property_name

Thuộc tính Miêu tả NN IE

constructor Chứa hàm tạo mẫu của đối tượng 4 4

prototype Cho phép bổ sung thuộc tính cho đối tượng date 3 4

Các phương thức

Cú pháp: object.method_name() (adsbygoogle = window.adsbygoogle || []).push({});

Phương thức Miêu tả NN IE

Date() Trả về đối tượng Date 2 3

getDate() Trả về ngày của đối tượng Date ( từ 1-31) 2 3

getDay() Trả về ngày của đối tượng Date (từ 0-6. 0=Sunday, 1=Monday, vv.)

2 3

getMonth() Trả về giá trị tháng của đối tượng Date (từ 0-11. 0=January, 1=February, vv.)

2 3

getYear() Returns the year of a Date object (from 0-99). Use

getFullYear instead !! 2 3

getHours() Trả về giá trị Giờ 2 3

getMinutes() Trả về giá trị phút 2 3

getSeconds() Trả về gí trị giây 2 3

parse() Trả về giá trị chuỗi 2 3

setDate() Thiết lập giá trị ngày của tháng 2 3

setFullYear() Thiết lập giá trị năm 4 4

setHours() Thiết lập giá trị giờ 2 3

setMilliseconds() Thiết lập giá trị milli giây 4 4

setMinutes() Thiết lập giá trị phút 2 3

setMonth() Thiết lập giá trị tháng 2 3

setSeconds() Thiết lập giá trị giây 2 3

setTime() Thiết lập giá trị milli giây 2 3

setYear() Thiết lập giá trị năm (00-99) 2 3

Ví dụ: <html> <body>

var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday") var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") document.write(weekday[d.getDay()] + " ") document.write(d.getDate() + ". ") document.write(monthname[d.getMonth()] + " ") document.write(d.getFullYear()) </script> </body> </html>

Kết quả: hiển thị ngày đầy đủ

4.2.3.5 Đối tượng Math

Đối tượng toán học được xây dựng sẵn chứa hằng số và hàm. Không cần phải tạo ra đối tượng Math trước khi sử dụng nó.

Ví dụ: Để lưu trữ số ngẫu nhiên từ 0 tới 1 trong biến "r_number": r_number=Math.random()

r_number=Math.round(8.6) (adsbygoogle = window.adsbygoogle || []).push({});

Các thuộc tính

Cú pháp: object.property_name

Thuộc tính Miêu tả NN IE

E 2 3

LN2 2 3

LN10 2 3

LOG10E 2 3

PI 2 3

SQRT1_2 2 3

SQRT2 2 3

Các phương thức

Cú pháp: object.method_name()

Phương thức Miêu tả NN IE abs(x) 2 3 acos(x) 2 3 asin(x) 2 3 atan(x) 2 3 atan2(y,x) 2 3 ceil(x) 2 3 cos(x) 2 3 exp(x) 2 3 floor(x) 2 3 log(x) 2 3 max(x,y) 2 3 min(x,y) 2 3 pow(x,y) 2 3 random() 2 3 round(x) 2 3 sin(x) 2 3 sqrt(x) 2 3 tan(x) 2 3

4.2.3.6 Đối tượng String

Đối tượng String được sử dụng với các văn bản. Các thuộc tính và phương thức được miêu tả dưới đây:

Các thuộc tính

Cú pháp: object.property_name

Phương thức Miêu tả NN IE

constructor Chứa hàm tạo mẫu của đối tượng 4 4

Length Trả về số các kí tự trong chuỗi 2 3

Các phương thức

Cú pháp: object.method_name()

Phương thức Miêu tả NN IE

big() Trả về cơ chữ lớn 2 3

blink() Trả về chuỗi nhấp nháy 2

bold() Trả về chuỗi đậm 2 3

charAt(index) Trả về kí tự tại vị trí xác định 2 3

charCodeAt(i) Trả về Unicode của kí tự tại vị trí xác định 4 4

concat() Cộng chuỗi 4 4

Fontcolor() Định màu chuỗi 2 3 (adsbygoogle = window.adsbygoogle || []).push({});

indexOf() Trả về vị trí xuất hiện đầu tiên của chuỗi xác định trong

chuỗi khác. Giá trị = -1 nếu không xuất hiện 2 3

italics() Định kiểu chữ nghiêng 2 3

lastIndexOf() Trả về vị trí xuất hiện đầu tiên của chuỗi xác định trong chuỗi khác. Giá trị = -1 nếu không xuất hiện. Phương thức này thực hiện từ phải qua trái

2 3

link() Trả về chuỗi như một hyperlink 2 3

match() Tương tự như indexOf và lastIndexOf, nhưng nó trả về chuỗi, hoặc “null” thay vì giá trị số

4 4

replace() Thay thế giá trị kí tự 4 4

search() Trả về giá trị nguyên nếu chứa kí tự 4 4

slice() Trả về chuỗi chứa chỉ số kí tự 4 4

small() Định dạng chữ nhỏ 2 3

split() Chia chuỗi thành các mảng chuỗi 4 4

strike() Định dạng gạch ngang chuỗi 2 3

sub() Chỉ số dưới 2 3 substr() Trả về các kí tự xác định. Ví dụ 14,7 trả về 7 kí tự từ 14 kí tự (bắt đầu từ 0) 4 4 Substring() Trả về các kí tự xác định. Ví dụ 7,14 trả về các kí tự từ 7 trở lên trừ 14 (bắt đầu từ 0) 2 3 sup() CHỉ số trên 2 3

toLowerCase() Chuyển đổi sang chữ thường 2 3

anchor("anchorname") Trả về neo 2 3

toUpperCase() Chuyển đổi sang chữ hoa 2 3

Ví dụ: html> <body>

<p>

Phương thức substr() tra về một phần của chuỗi. Nếu ghi là (2,6), chuỗi trả về sẽ bắt đầu từ kí tự thứ 2 đến 6

</p> <p>

The substring() method also returns a specified part of a string. If you specify (2,6) it returns all characters from the second character (start at 0) and up to, but not including, the sixth character. </p> </body> </html> 4.2.4. Hàm 4.2.4.1. Khai báo hàm

function myfunction(các đối số) {

Câu lệnh }

function myfunction() // Hàm không có đối số {

Câu lệnh }

Đối số là các biến được sử dụng trong hàm. Giá trị của biến sẽ được đặt giá trị khi có lời gọi hàm.

Bằng cách đặt các hàm ở phần Head trong văn bản, đảm bảo được ràng tất cả các mã trong hàm được lạp trước khi có lời gọi hàm. (adsbygoogle = window.adsbygoogle || []).push({});

Một số hàm trả giá trị về tới biểu thức:

function result(a,b) { c=a+b return c } 4.2.4.2. Lời gọi hàm

Một hàm không được thực hiện trước khi nó được gọi. Có thể gọi hàm cùng với các đối số hoặc không tùy thuộc vào cách khai báo hàm:

myfunction(các đối số) hoặc myfunction()

Câu lệnh Return

Các hàm sẽ trả về giá trị phải sử dụng câu lệnh return. Câu lệnh return chỉ ra giá trị được trả về nơi mà hàm được gọi.

function total(a,b) { result=a+b return result } sum=total(2,3) Ví dụ 1: <html> <head> <script type="text/javascript"> function myfunction() { alert("HELLO") } </script> </head> <body> <form>

</body> </html> Ví dụ 2: <html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt) } </script> </head> <body> <form>

<p>By pressing the button, a function with an argument will be called. The function will alert this argument.</p> </body> </html> Ví dụ 3: <html> <body>

var degFahren = new Array(212, 32, -459.67); var degCent = new Array();

var loopCounter;

for (loopCounter = 0; loopCounter <= 2; loopCounter++) {

degCent[loopCounter] = convertToCentigrade(degFahren[loopCounter]); }

for (loopCounter = 2; loopCounter >= 0; loopCounter--) {

document.write("Value " + loopCounter + " was " + degFahren[loopCounter] + " degrees Fahrenheit");

document.write(" which is " + degCent[loopCounter] + " degrees centigrade<br>");

}

</script> </body> </html>

4.2.5.1 Tạo một đối tượng

• Để tạo một đối tượng, chúng ta sử dụng câu lệnh new

Cú pháp: var myVariable = new tênđốitượng(các tham số lựa chọn); Các tham số lựa chọn phụ thuộc vào khai báo các Contructor

Ví dụ:

var myArray = new Array();

var myArray = new Array("Paul", "Paula", "Pauline"); var myDate = new Date();

var myDate = new Date("1 Jan 2000");

• Trong kiểu dữ liệu nguyên thủy, biến lưu trữ giá trị thực sự var myNumber = 23;

có nghĩa biến myNumber lưu giá trị 23. Tuy nhiên các biến được gán tới các đối tượng sẽ không lưu trữ giá trị thực sự và chỉ tham chiếu tới địa chỉ bộ nhớ chứa dữ liệu. (adsbygoogle = window.adsbygoogle || []).push({});

var myArrayRef = new Array(0, 1, 2); var mySecondArrayRef = myArrayRef; myArrayRef[0] = 100;

alert(mySecondArrayRef[0]);

• Sử dụng các thuộc tính của đối tượng myArray.length

var myVariable = myArray.length; alert(myArray.length);

myArray.length = 12;

• Gọi phương thức của đối tượng myArray.sort();

• Kiểu nguyên thủy and Đối tượng

Thực chất ra các đối tượng String, Number và Boolean tương đương với các kiểu dữ liệu nguyên thủy string, number, Boolean. Ví dụ để tạo ra một đối tượng String chứa dòng text."I'm a String object,"

var myString = new String("I'm a String object");

var lengthOfString = myString.length; Trả về số kí tự trong đối tượng Sử dụng kiểu nguyên thủy:

4.2.6. Lập trình với các đối tượng của trình duyệt

Trình duyệt được tạo bởi các đối tượng. Khi Jscript chạy trên nền trình duyệt, chúng ta cso thể truy cập vào các đối tượng của trình duyệt chính xác như chúng ta truy cập vào các đối tượng của Jscript.

Trình duyệt đưa ra rất nhiều đối tượng, ví dụ như đối tượng window tương ứng với của sổ của trình duyệt. Chúng ta đã từng sử dụng 2 phương thức của đối tượng này đó là alert() và prompt(). Các đối tượng khác cũng có hiệu lực đối với trình duyệt chính là bản thân trang, được biểu diễn bởi đối tượng văn bản (document object). Quay trở lại các phần trước chúng ta sử dụng thuộc tính bgColor của đối tượng document để thay đổi mầu nền của trang web. Chúng ta sử dụng phương thức write() của đối tượng để viết thông tin ra trang web.

Rất nhiều đối tượng khác được sử dụng trong mã HTML như là đối tượng img của thẻ <img> Tập hợp các đối tượng mà trình duyệt cung cấp sử dụng cho Jscript được gọi là Brower Object Model (BOM).

4.2.6.1 Giới thiệu các đối tượng trình duyệt

Trong phần này chúng ta xem xét các đối tượng của BOM có hiểu lực đối với tất cả các trình duyệt. BOM cung cấp rất nhiều đối tượng, nhưng chỉ khoảng 10% được sử dụng.

4.2.6.2 Đối tượng Windows

Đối tượng window là đối tượng toàn cục, có nghĩa là chúng ta không phải sử dụng tên của nó để truy cập các thuộc tính và phương thức. Các hàm và biến cục bộ được tạo ra như các thuộc tínhv à đối tượng toàn cục. Ví dụ, hàm alert() thực chất là phương thức của đối tượng

window.

alert("Hello!"); hoặc window.alert("Hello!");

Cả hai trình duyệt bao gồm các đối tượng document, navigator, history, screen, và location.

• Đối tượng Document: biểu diễn các trang

• Đối tượng navigator: lưu thông tin về trình duyệt

• Đối tượng screen: chứa thông tin về khả năng hiển thị của máy trạm

• Đối tượng location: lưu trư chie tiết về vị trị trang hiện thời.

Sử dụng đối tượng window

Một ví dụ đơn giản sử dụng các thuộc tính và phương thức của đối tượng window đó là tác độngv vào thanh trang thái của document

Để thay đối thông báo mặc địnhc của thanh trang thái của window, chúng ta sử dụng thuộc tính “defaultStatus” property.

window.defaultStatus = "Hello and Welcome"; hoặc defaultStatus = "Hello and Welcome"; <html>

<head> (adsbygoogle = window.adsbygoogle || []).push({});

</script> </head> </html>

Trong một số trường hợp nếu chúng ta khai báo biến trùng với tên đối tượng hoặc thuộc tính của BOM không xảy ra lỗi những không nhận được kết quả chính xác

var defaultStatus;

defaultStatus = "Welcome to my website";

Trong trường hợp này chúng ta hoặc sử dụng tên biến khác hoặc cú pháp chính tắc để truy cấp thuộc tính của window

var defaultStatus;

window.defaultStatus = "Welcome to my website";

4.2.6.3 Đối tượng history

Đối tượng history theo dõi những trang mà người sử dụng đã duyệt qua. Danh sách các trang được gọi từ stack history của các trình duyệt. Nó cho phép người sử dụng bấm vào phím Back hoặc Forward của trình duyệt để thăm lại những trang vừa duyệt.

Giống như đối tượng Array của Jscript, đối tượng history có thuộc tính chiều dài (length). Đối tượng history có phương thức back() và forward(), go() …..

history.go(-2); Quay trở lại 2 mức history.go(3);.Tiến lên 3 mức

Note: go(-1) tương đương với back() , và go(1) tương đương forward().

4.2.6.4 Đối tượng location

Đối tượng location lưu trữ rất nhiều thông tin có tích về vị trị hiện thời của trang. Không chỉ lưu trữ vẻ URL cho trang mà server lưu trang đó, số cổng kết nối server, giao thức được sử dụng. Những thông tin này tương đương với các thuộc tính href, hostname, port, và giao thức của đối tượng location

Để lấy được vị trí trang hiện thời, có thể sử dụng các phương thức của đối tượng vị trí để thay đổi vị trí và làm tươi trang hiện thời.

4.2.6.5 Thay đổi vị trị (Changing Locations)

Chúng ta có thể duyệt các trang khác theo 2 cách. Hoặc sử dụng thuộc tính href để chỉ tới trang khác, hoặc có thể sử dụng phương thức relplace(). Kết quả của hai cách này tương tự như nhau. Sự khác nhau đó là replace() xóa bỏ trang hiện thời trong stack history và thay vào đó là giá trị mới.

window.location.replace("myPage.htm"); window.location.href = "myPage.htm";

Đối tượng navigator

Thực chất đối tượng navigator thuộc tính của đối tượng window.

4.2.6.6 Đối tượng screen

Thuộc tính đổi tượng screen của đối tượng window chứa rất nhiều thông tin khả năng hiển thị của máy trạm. Các thuộc tính của nó bao gồm các thuộc tính chiều cao, độ rộng, xác định ra vùng dọc, ngang của screen

4.2.6.7 Đối tượng document

Cùng với đối tượng window, đối tượng document là một trong đối tượng quan trọng và chung nhất được sử dụng trong BOM. Thông qua đối tượng này, có thể truy cập tới các thuộc tính và phương thức của một vài đối khác định nghĩa bởi các thẻ HTML.

Các thuộc tính và phương thức trong các phiên bản trình duyệt khác nhau rất nhiều, trong phần này chúng ta tập trung các thuộc tính và phương thức chung nhất đối với tất cả các trình

Lập trình Web với ngôn ngữ HTML

Các tag cơ bản trong HTML