4.2.5.1 Tạo một đối tượng
• Để tạo một đối tượng, chúng ta sử dụng câu lệnh new
Cú phá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 thủy, biến lưu trữ giá trị thực sự var myNumber = 23;
có nghĩa biến myNumber lưu giá trị 23. Tuy nhiên các biến được gán tới các đối tượng sẽ không lưu trữ giá trị thực sự và chỉ tham chiếu tới địa chỉ bộ nhớ chứa dữ liệu.
var myArrayRef = new Array(0, 1, 2); var mySecondArrayRef = myArrayRef; myArrayRef[0] = 100;
alert(mySecondArrayRef[0]);
• Sử dụng các thuộc tính của đối tượng myArray.length
var myVariable = myArray.length; alert(myArray.length);
myArray.length = 12;
• Gọi phương thức của đối tượng myArray.sort();
• Kiểu nguyên thủy and Đối tượng
Thực chất ra các đối tượng String, Number và Boolean tương đương với các kiểu dữ liệu nguyên thủy string, number, Boolean. Ví dụ để tạo ra một đối tượng String chứa dòng text."I'm a String object,"
var myString = new String("I'm a String object");
var lengthOfString = myString.length; Trả về số kí tự trong đối tượng Sử dụng kiểu nguyên thủ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>
<script language="JavaScript" type="text/JavaScript"> window.defaultStatus = "Hello and Welcome";
</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 khác định nghĩa bởi các thẻ HTML.
Các thuộc tính và phương thức trong các phiên bản trình duyệt khác nhau rất nhiều, trong phần này chúng ta tập trung các thuộc tính và phương thức chung nhất đối với tất cả các trình duyệt
Đối tượng document có các thuộc tính kết hợp với nó, thực chất là các mảng. Những thuộc tính chính đó là các mảng forms, images và links. IE4 và 5 hỗ trỡ thêm một số các thuộc tính mảng khác như là tất cả thuộc tính mạng lá mảng của các thể biểu diễn bởi các đối tượng trong trang. Còn NN hỗ trợ các thuộc tính mảng không được hỗ trở bởi IE ví dụ như các mảng thẻ.
a. Sử dụng đối tựong document
Ví dụ: thiết lập màu nền dựa vào chế độ màn hình của máy trạm <html>
<body>
<script language="JavaScript" type="text/JavaScript"> switch (window.screen.colorDepth) { case 1: case 4: document.bgColor = "white"; break; case 8: case 15: case 16: document.bgColor = "blue"; break; case 24: case 32: document.bgColor = "skyblue"; break; default: document.bgColor = "white"; }
document.write("Your screen supports " + window.screen.colorDepth + "bit color");
</script> </body> </html>
Giá trị thuộc tính colorDepth trả về các giá trị 1, 4, 8. 15, 16, 24, 32. Chúng biểu diễn số các bit được gán cho mỗi pixel trên màn hình.
b. Mảng các ảnh - The images Array
<img ALT="USA" name=myImage src="usa.gif">
Mỗi ảnh trong trang có một đối tượng img được tạo ra. Các đối tượng được lưu trong mạng images. Mảng này là thuộc tính của document. Ảnh đầu tiên trong trang được truy vấn thông qua images[0].
Có thể gán biến tham chiếu tới đối tượng img trong mảng images.
var myImage2 = document.images[1];
Chúng ta có thể truy cấp các đối tượng img trong mảng images bằng tên. Ví dụ, đối được bởi thẻ <img>, có tên là myImage, có thể được truy cập trong thuộc tính mảng ảnh của đối tượng document như sau:
document.images["myImage"]
Bởi vì thuộc tính document.images là một mảng, nó có các thuộc tính tự của đối tượng mảng Jscritp như thuộc tính length. Ví dụ, nếu chúng ta muôn biết có bao nhiêu ảnh ở trong trang, chúng ta có thể sử dụng document.images.length.
<html> <body>
<img name=img1 src="" border=0 width=200 height=150> <script language="JavaScript" type="text/JavaScript">
var myImages = new Array("usa.gif","canada.gif","jamaica.gif","mexico.gif"); var imgIndex = prompt("Enter a number from 0 to 3","");
document.images["img1"].src = myImages[imgIndex]; </script>
</body> </html>
c.Mảng links
Đối với mỗi thẻ hyperlink <A> định nghĩa với thuộc tính href, trình duyệt tạo ra một đối tượng A. Thuộc tính quan trọng nhất của đối tượng A đó là href, tương ứng với thuộc tính của thẻ. Sử dụng thuộc tính này, chúng ta có thể tim các điểm liên kết ở đâu và có thể thay đổi điều này thập chi sau khi trang đó được nạp
Tập hợp các đối tượng trong trang chứa bên trong mảng links[], tương tư như đối tương img trong mảng images[]
d. Code kết nối tới các sự kiện trang Web
Các sự kiện xuất hiện khi có một hành động nào xảy ra. Ví dụ như người sử dụng bâm vào trang, siêu liên kết hoặc di chuyển con trỏ tới một dòng text nào đó gây ra các sự kiện.
e. Xử lý các sự kiện như các thuộc tính:
<html> <body>
<A href="somepage.htm" name="linkSomePage"> Click Me
</A> </body> </html>
<A href="somepage.htm" name="linkSomePage" onclick="alert('You Clicked?')"> Click Me </A> <html> <body> <script language="JavaScript"> function linkSomePage_onclick() { alert('You Clicked?'); return true; } </script>
<A href="somepage.htm" name="linkSomePage" onclick="return linkSomePage_onclick()"> Click Me
</A> </body> </html>
Một vài sự kiện không liên kết trực tiếp tới hành động của người sử dụng. Ví dụ, đối tượng window có sự kiện load, xảy ra khi trang được nào và một sử dụ unload xảy ra khi trang unload (có thể chuyển tới một trang khác hoặc trình duyệt bị đóng lại). Các sự kiện này nằm trong tag <body>.
onunload="myOnUnloadFunction()">
f. Xử lý các sự kiện như các thuộc tính
Theo cách thức kết nối tới các sự kiện, chúng ta cần phải định nghĩa hàm sẽ được thực hiện khi sự kiện xuất hiện. Sau đó, thiết lập thuộc tính xử lý xự kiển của đối tượng đến hàm đã địn nghĩa. Ví dụ minh họa: <html> <body> <script language="JavaScript"> function linkSomePage_onclick() {
alert('This link is going nowhere'); return false;
}
</script>
<A href="somepage.htm" name="linkSomePage"> Click Me
</A><P>
<A href="otherpage.htm" name="linkOtherPage"> Click Me
</A><p>
<script language="JavaScript" type="text/JavaScript"> window.document.links[0].onclick = linkSomePage_onclick; </script>
</body> </html>
Hiển thị ảnh ngẫu nhiên khi một trang được nạp
<html> <head>
<script language="JavaScript">
var myImages = new Array("usa.gif","canada.gif","jamaica.gif","mexico.gif"); function changeImg(imgNumber)
{
var imgClicked = document.images[imgNumber]; var newImgNumber = Math.round(Math.random() * 3);
while (imgClicked.src.indexOf(myImages[newImgNumber]) != -1) { newImgNumber = Math.round(Math.random() * 3); } imgClicked.src = myImages[newImgNumber]; return false; } </script> </head> <body>
<A href="" name="linkImg1" onclick="return changeImg(0)"> <img name=img0 SRC="usa.gif" border=0 >
</A>
<img name="img0" SRC="mexico.gif" border="0" > </A>
</body> </html>
4.2.7. HTML Forms
Các Form cung cấp cách thức nhóm các phần tử tương tác HTML với nhau với cùng một mục đích. Ví dụ, một form chứa các phần tử cho phép người sử dụng nhập dữ liệu ví dụ như đăng kí hòm thư miễn phí.
Cú pháp:
<form các thuộc tính >
Các thẻ (các điều khiển như input, button) </form>
Thuộc tính Giá trị Miêu tả DTD
action URL Một URL định nghĩa nơi gửi dữ liệu khi mà phím
submit được bấm STF
Các thuộc tính lựa chọn
Thuộc tính Giá trị Miêu tả DTD
accept Hiển thị kiểu nội dung STF
accept-charset charset_list Danh sách tách biệt dấu “,” của tập kí tự từ dữ liệu form. Giá trị mặc định là "unknown"
STF
enctype mimetype Kiểu mime sử dụng mã hóa nội dung của
form
STF
method get
post Phương thức HTTP gửi dữ liệu đển URL hoạt động. Mặc định là get method="get": Phương thức này gửi nội dung form trong URL: URL?
name=value&name=value. Chú ý: nếu giá trị form không phải là kí tự ASSCII hoặc vượt quá 100 kí tự, cần phải dùng method="post". method="post": PHương thức này gửi nội dụng trong phần body của yêu cầu. Chú ý: hầu hết các trình duyệt không để đánh dấu các yêu cầu post
STF
name form_name Xác định tên duy nhất của form TF
target _blank
_self _parent _top
Đích mở URL.
_blank – mở URL trong cửa sổ mới _self – mở URL ngay trong cùng frame _parent – mở trong frameset cha
_top – mở trong body của cửa sổ
TF
id, class, title, style, dir, lang, xml:lang Ví dụ: <form name="myForm"> </form> Mảng các form <html> <head>
<script language="JavaScript" type="text/javascript"> function window_onload()
{
var numberForms = document.forms.length; var formIndex;
for (formIndex = 0; formIndex < numberForms; formIndex++) { alert(document.forms[formIndex].name); } } </script> </head>
<body language=JavaScript type="text/javascript" onload="window_onload()"> <form name="form1">
<p>This is inside form1</p> </form>
<form name="form2"> <p>This is inside form2</p> </form>
<form name="form3"> <p>This is inside form3</p> </form>
</body> </html>
Các thuộc tính và phương thức khác của form
Có thể truy cập vào các điều khiển trong form bằng thuộc tính elements[] của đối tượng form. Mảng này giống như thuộc tính mảng forms[] của đối tượng document. Mảng elements[] chúa tất cả các đối tượng tương ứng với các phần tử tương tác HTML bên trong form, ngoại trừ sự kiện <input type=image>.
Các thuộc tính rất có ích cho việc lặp các phần tử trong mẫu. Ví dụ, có thể lập mỗi phần tử để kiểm tra tính hiệu lức của dữ liệu nhấp vào trước khi gửi đi.
Thuộc tính elements[] của đối tượng có thuộc tính length cho phép biết được có bao nhiều phần tử trong form. Đối tượng form cũng có thuộc tính length cho phép biết được số các phần tử trong form. document.myForm.length tương đương document.myForm.elements.length. Khi submit dữ liêu tới server, chúng ta thường sử dụng button submit, tuy nhiên đối tượng Form có một method submit(), thực hiện gần giống như phím submit. Sự khác nhau đó là xử
lý sự kiện onsubmit không được gọi khi sử dụng phương thức submit() của đối tượng method()
Các phân tử HTML trong Form
Hầu hết các phần tử được tạo ra đều sử dụng tag <input>. Một trong thuộc tính quan trọng của input đó là thuộc tính type. Thuộc tính này xác định phần từ sẽ là gì.
Các phương thức và thuộc tính chung
Thuộc tính name: sử dụng giá trị thuộc tính này để tham chiếu tới phân tử trong script. Thuộc tính value: trả về giá trị của phần tử.
Thuộc tính form: trả về giá trị của form mà phần tử nằm bên trong. Thuộc tính type: trả về thuộc tính của phần tử
Phương thức focus() và blur(): Nếu có một phẩn tử được focus, bất kì gõ phím bất kỳ sẽ được gửi tới phần tử này. Trong trường hợp focus vào phím nếu gõ phím enter tương đương với xử lý sự kiện onclick.
Người sử dụng có thể thiết lập focus bằng cách sử dụng click vào hoặc sử dụng phím tab để lựa chọn. Tuy nhiên, người lập trình có thể quyết định phần tử nào được focus bằng cách sử dụng phương thức focus() của đối tượng element. Ví dụ, nếu chúng ta có một text box cho người sử dụng đưa vào tuổi. Trong trường hợp người sử dụng đưa vào giá trị là kí tự, chúng ta có thể yêu cầu nhập lại. Phương thức blur() đối ngược với phương thức focus().
Đối với các phương thức focus() và blur(), tất cả các đối tượng của phần tử có xử lý sự kiện onfocus và onblur.
Các phần tử Button
Cú pháp <input type=””, ….>
<input type="button" name="myButton" value="Click Me"> <html> <head> <script language=JavaScript> var numberOfClicks = 0; function myButton_onclick() { numberOfClicks++;
window.document.form1.myButton.value = 'Button clicked ' + numberOfClicks + ' times'; } </script> </head> <body> <form name=form1>
<input type='button' name='myButton' value='Button clicked 0 times' onclick="myButton_onclick()">
</form> </body> </html>
<html> <head>
<script language=JavaScript> function myButton_onmouseup() {
document.form1.myButton.value = "Mouse Goes Up" }
function myButton_onmousedown() {
document.form1.myButton.value = "Mouse Goes Down" }
</script> </head> <body>
<form name=form1>
<input type='button' name='myButton' value=' Mouse Goes Up ' onmouseup="myButton_onmouseup()" onmousedown="myButton_onmousedown()"> </form> </body> </html> Các phím Submit và Reset
<input type="submit" value="Submit" name="submit1"> <input type="reset" value="Reset" name="reset1">
Khi click vào phím submit, dữ liệu từ form mà phím nằm cùng sẽ tự động gửi tới sever, mà không cần bắt kỳ một script nào cả. Tương tự cũng như vậy khi click vào phím reset, tất cả các phần tử trong form sẽ bị xóa bỏ và hiển thị giá trị mặc định. Phím submit và reset tương đương với đối tượng Submit và Reset, có thuộc tính, phương thức, và sự kiện giống như đối tượng Button
Phần tử Text
Cú pháp <input type=”text” ….>
<input type="text" name="myTextBox" size=10 maxlength=15 value="Hello World">
Phương thức select(), parseINt() hoặc parseFloat() hoặc Number()
Sự kiện của object Text: onchange, onselect, onkeydown, onkeypress, và onkeyup <input type="text" name=txtReadonly value="Look but don't change"
onfocus="window.document.form1.txtReadonly.blur()" READONLY=true>
Ví dụ form đơn giản kiểm tra dữ liệu đầu vào
<html> <head>
<script language=JavaScript> function butCheckForm_onclick() {
var myForm = document.form1;
if (myForm.txtAge.value == "" || myForm.txtName.value == "") {
if (myForm.txtName.value == "") { myForm.txtName.focus(); } else { myForm.txtAge.focus(); } } else {
alert("Thanks for completing the form " + myForm.txtName.value); }
}
function txtAge_onblur() {
var txtAge = document.form1.txtAge; if (isNaN(txtAge.value) == true) {
alert("Please enter a valid age"); txtAge.focus(); txtAge.select(); } } function txtName_onchange() {
window.status = "Hi " + document.form1.txtName.value; }
</script> </head> <body>
<form name=form1>
Please enter the following details: <p>
Name: <br>
<input type="text" name=txtName onchange="txtName_onchange()"> <br>
Age: <br>
<input type="text" name=txtAge onblur="txtAge_onblur()" size=3 maxlength=3> <br>
<input type="button" value="Check Details" name=butCheckForm onclick="butCheckForm_onclick()">