Chương 6: MÔ HÌNH ĐỐI TƯỢNG TRÌNH DUYỆT

Chia sẻ: Le Van Vu | Ngày: | Loại File: DOC | Số trang:26

Thêm vào BST

Báo xấu

150
lượt xem 21
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Trình duyệt là một ứng dụng dùng để hiển thị các nội dung của một tư liệu HTML. Các trình duyệt cũng đã đưa ra một số đối tượng để các script có thể truy cập, các đối tượng này được tổ chức theo một mô hình phân cấp, gọi là mô hình đối tượng trình duyệt (BOM, Browser Object Model)

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Chương 6: MÔ HÌNH ĐỐI TƯỢNG TRÌNH DUYỆT

Chương 6 MÔ HÌNH ĐỐI TƯỢNG TRÌNH DUYỆT I. KHÁI NIỆM Trình duyệt là một ứng dụng dùng để hiển thị các nội dung của một tư liệu HTML. Các trình duyệt cũng đã đưa ra một số đối tượng để các script có thể truy cập, các đối tượng này được tổ chức theo một mô hình phân cấp, gọi là mô hình đối tượng trình duyệt (BOM, Browser Object Model) BOM đóng vai trò như là một API (Application Programming Interface) cho việc lập trình các ứng dụng trên nền tảng web cho client-side hay cách khác: chính trong môi trường trình duyệt, JavaScript dựa vào mô hình này để truy xuất các đối tượng trên một trang web để cập nhật nội dung, cấu trúc và kiểu dáng của đối tượng Mỗi đối tượng trong BOM là một tập hợp gồm : - Các thuộc tính (Properties) - Các phương thức (Methodes) - Các sự kiện (Events) có thể kết hợp trên đối tượng. Trong giáo trình này, chúng ta trình bày các đối tượng trong BOM được cả IE 5.0 và NN 6.0 sử dụng và một số nét đặc sắc của mỗi mô hình đối tượng trình duyệt của IE và NN. IE Browser Objects NN Browser Objects Trong IE BOM, đối tượng lớn nhất là đối tượng window, còn trong NN BOM, đối tượng window và đối tượng navigator là ngang cấp. Sự khác nhau giữa IE BOM và NN BOM chủ yếu là các đối tượng và các thuộc tính và phương thức của mỗi đối tượng. Lưu ý : một số tài liệu đề cập đến khái niệm DOM, mô hình đối tượng tư liệu (Document Object Model), đây là một lĩnh vực rộng lớn chủ yếu dành cho XML. Thuật ngữ BOM khá xa lạ với các tài liệu bằng tiếng Việt, tuy nhiên 93
P.Kantor thuộc Đại học New York đã sử dụng khái niệm này trong giáo trình của mình. II. CÁC ĐỐI TƯỢNG CỦA MÔ HÌNH ĐỐI TƯỢNG TRÌNH DUYỆT Có 9 đối tượng của trình duyệt: window, document, event, frame, history, location, navigator, screen, mimeType và plugin; ta sẽ lần lượt nghiên cứu các đối tượng quan trọng, trong đó đối tượng quan trọng nhất là đối tượng document II.1. Đối tượng window Đối tượng window miêu tả cửa sổ đang hiển thị trang web, cung cấp các khả năng truy xuất đến các đối tượng con của nó và các trạng thái cũng như nắm bắt các sự kiện xảy ra trên cửa sổ này. II.1.1: Các thuộc tính - defaultStatus: dòng thông báo xuất hiện trên thanh trạng thái của cửa sổ trình duyệt. - status : dòng thông báo tạm thời xuất hiện trên thanh trạng thái của cửa sổ trình duyệt. - frames : mảng các frame được chứa bên trong cửa sổ trình duyệt - location : URL của tệp tin tư liệu HTM được mở trong cửa sổ hiện thời - name : tên của cửa sổ - closed : xác định trạng thái của cửa sổ có được đóng hay không. - top : trả về sổ cha nằm phía trên nhất. - parent : tham chiếu đến cửa sổ chứa một cửa sổ khác - self, window : chỉ cửa sổ hiện thời. - external : trả về host của trang web - openner : khi một cửa sổ được mở, thuộc tính openner trỏ đến cửa sổ cha của nó. II.1.2: Các phương thức - alert : hiển thị một hộp hội thoại chứa một thông báo do một ứng dụng xác định. - confirm : hiển thị một hộp hội thoại chứa một thông báo do một ứng dụng xác định và hai nút lệnh Yes, No; phương thức trả về true | false tùy thuộc người sử dụng ấn nút yes hay no. - prompt : hiển thị một hộp hội thoại chứa một thông báo do một ứng dụng xác định và một text box để người sử dụng nhập liệu. Phương thức trả về một dữ liệu kiểu chuổi. Cú pháp : window.prompt(dòng nhắc, giá trị mặc nhiên); - close : đóng cửa sổ trình duyệt hiện thời hay một ứng dụng HTML (HTA). - open : mở một cửa sổ mới và nạp tệp tư liệu HTML được cho bởi URL. Cú pháp : window.open(URL, windowName, features); Trong đó feature là các sắc thái của cửa sổ mới, đây là tham số tùy chọn. Một số thuôc tính và giá trị : o height | width | left | = x ; xác định kích thước của cửa sổ và khoảng cách bên trái với cửa sổ hiện tại, đơn vị tính bằng pixel. 94
o location | menubar | scrollbars | toolbar : thêm thanh địa chỉ, ... vào cửa sổ (gán giá trị yes sau mỗi thuộc tính để xác định) o resizable : cửa sổ có thể thay đổi kích thước Ví dụ : window.open("chuong1.htm","wChap1","width=400, height=200"); - print : in trang web hiện thời ra máy in. - setTimeOut(); - focus: chuyển cửa sổ vừa mở tiến đến phía trước. Ví dụ : VietNamNet - blur : ngược lại với phương thức focus(), đưa cửa sổ đang mở ra phía sau. - resizeTo(x, y) : thay đổi kích thước cửa sổ với width =x và height=y. - resizeBy(m, n) : với m,n ∈ Z, tăng / giảm kích thước cửa sổ với m,n pixel. - moveTo(x,y) : di chuyển cửa sổ đến vị trí với tạo độ đỉnh trên trái đến (x,y) - moveBy(m.y) : tăng giảm tọa độ đỉnh trên trái của cửa sổ với m, n pixel -setInterval(câu lệnh JavaScript, số milli giây): thực hiện câu lệnh JavaScript trong khoảng thời gian, hàm này trả lại thời gian để hàm clearInterval() có thể loại bỏ nó. -setTimeout(câu lệnh JavaScript, số milli giây): thực hiện câu lệnh JavaScript một lần sau một thời gian nhất định tính bằng milli giây. -clearTimeout(số milli giây) : xóa bỏ đồng hồ báo giờ. Lưu ý : trong cửa sổ trình duyệt, khi ta muốn in (File-Print hay sử dụng phương thức print) một trang web ra giấy in mà không muốn in header và footer mặc nhiên thì Page Setup và xóa trống các mã định dạng trong các text box như sau: II.1.3. Các sự kiện Có 5 sự kiện được kết hợp với đối tượng window: onblur, onfocus, onload, onresize, onunload. Ta sẽ nghiên cứu ở phần II.2 dưới đây. II.2 Mô hình sự kiện (Event model) Mô hình sự kiện trong IE và NN bao gồm hai thành phần , tuy nhiên về chi tiết có nhiều điểm khác nhau. - Đối tượng Event, được xem là một giao diện sự kiện để lập trình các script. - Danh sách các sự kiện, mỗi sự kiện được xem như là một thuộc tính nội tại của mỗi thẻ HTML. II.2.1. Đối tượng sự kiện (Event Object)  Sự kiện là kết quả của một hành động do người sử dụng hay hệ thống tạo ra, JavaScript là một ngôn ngữ hướng sự kiện, có thể sử dụng để đón bắt các sự kiện này khi chúng xảy ra và thực hiện các hành động. Thông qua việc nắm bắt 95
và xử lý sự kiện, JavaScript có thể truy cập đến các đối tượng của DOM để cập nhật, thay đổi thuộc tính của đối tượng, tạo nên trang web tương tác và động, đây chính là khả năng mà Microsoft IE gọi là DHTML.  Đối tượng event Trong IE DOM : đối tượng event là một đối tượng con của đối tượng window còn trong NN DOM thì nó là một đối tượng ngang cấp với đối tượng window, và trong mỗi mô hình đối tượng tư liệu đối tượng event có các thuộc tính , phương thức khác nhau được cho trong các bảng sau, đây là sự khác biệt quan trọng cần lưu ý. Các thuộc tính của đối tượng event: (IE 6: Event Object có 38 thuộc tính, NN 8: Event Object có 201 thuộc tính) Properties IE NN Diễn tả altKey x x Trả về true nếu người sử dụng ấn phím ALT trong khi sự kiện xảy ra và ngược lại ctlKey x x Trả về true nếu người sử dụng ấn phím CTRL trong khi sự kiện xảy ra và ngược lại shiftKey x x Trả về true nếu người sử dụng ấn phím SHIFT trong khi sự kiện xảy ra và ngược lại cancelBubble x x Trả về true nếu muốn ngưng sự nổi bọt sự kiện clientX, clientY x x Tọa độ góc trên trái của trang web, tính bằng pixel screenX, screenY x x Tọa độ của màn hình tại vị trí xảy ra sự kiện pageX, pageY x Tọa độ của cửa số trang tại vị trí xảy ra sự kiện offsetX, offsetY x Tọa độ của cửa số trang tại vị trí xảy ra sự kiện fromElement x Trả về phần tử HTML mà từ đó con trỏ chuột đi ra toElement x Trả về phần tử HTML mà từ đó con trỏ chuột đi vào srcElement x Đối tượng mà sự kiện diễn ra trong đó target x Trả về đối tượng đầu tiên mà sự kiện diễn ra type x x Loại sự kiện keyCode x x Trả về mã Unicode của phím được ấn xuống Ví dụ 1 : khi người sử dụng ấn nút chuột vào một button , sự kiện onclick được phát sinh, và mọi thông tin về sự kiện này được cập nhật trong đối tượng Event: Đọan mã sau đây cho ta các thuộc tính quan trọng trong đối tượng event của IE DOM. function listInfo(){ // Lưu ý: script này chỉ chạy trên Internet Explorer var str="Event.Type:"+event.type+"\n"+ "Event.clientX,Y: ("+event.clientX+","+event.clientY+")"+"\n"+ "Event.offsetX,Y: ("+event.offsetX+","+event.offsetY+")"+"\n"+ 96
"Event.srcElement.tagName:"+event.srcElement.tagName; alert(str); } Ví dụ 2 : Trong các trang web có phần tìm kiếm, việc thực hiện gõ chữ Việt trong textbox sẽ do một script điều khiển dựa vào thuộc tính keyCode của đối tượng event. Đọan mã sau đây minh họa giá trị keyCode (theo bảng mã Unicode) của một phím được ấn IE DOM và NN DOM có sự khác biệt trong việc mô tả đối tượng Event. Đọan mã sau đây sẽ liệt kê tất cả các thuộc tính của đối tượng Event: for(prop in event) { document.write("event."+prop+"");} II.2.2. Ngăn chặn sự nổi bọt sự kiện (Event Bubbling) Trong DOM, các phần tử của trang web được tổ chức theo một cây phân cấp, do vậy một sự kiện xảy ra trên đối tượng con có thể được xảy ra trên đối tượng cha của nó, hiện tượng này gọi là sự nổi bọt sự kiện. Ngược lại với sự nổi bọt sự kiện là sự chảy tràn sự kiện (Event Flow), sự kiện xảy ra ở cấp cao sẽ ảnh hưởng đến các cấp thấp hơn. Ví dụ: function cancelBubble(the){ var str=document.getElementById(the); if(str.tagName=="P") event.cancelBubble=true; //(1) /* script này chạy trên IE 6.0 lẫn NN 7.1 có thể thay dòng lệnh (1) bằng event.cancelBubble=true; là đủ */ alert("Thẻ P"); } PARAGRAPH 97
Nếu không có dòng lệnh (1) ở trên thì khi click trên PARAGRAPH sẽ lần lượt xảy ra sự kiện onClick trên thẻ rồi trên thẻ và hai hộp hội thoại lần lượt xuất hiện. Dòng lệnh (1) có tác dụng ngăn chặn sự nổi bọt sự kiện, lúc này khi click trên PARAGRAPH chỉ có hàm CancelBubble được thực hiện mà thôi. Trong script trên ta sử dụng các phương thức và thuộc tính được cả hai trình duyệt chấp nhận : phương thức getElementByID (sẽ trình bày trong mục Document Object) và thuộc tính event.cancelBubble (đã trình bày trên), kỹ thuật như vậy gọi là cross-browser. II.2.3. Các sự kiện Tập hợp các sự kiện là thành phần của DOM chứ không phải là thành phần của JavaScript, mỗi phần tử trên trang web được kết hợp với một số sự kiện và các sự kiện này khác nhau trên mỗi trình duyệt hay cách khác mỗi thẻ HTML có những thuộc tính sự kiện xác định. Cách sử dụng: ... Danh sách các sự kiện thông dụng được sử dụng cho IE và NN : NSD : Người sử dụng Event Áp dụng cho phần tử Mô tả & Sử dụng khi onAbort image NSD dỡ bỏ việc nạp ảnh khi ckick vào một liên kết hay ấn nút lệnh Stop onBlur window, frame và cả NSD rời khỏi tiêu điểm từ window, frame các phần tử của form hay tất cả phần tử của form onFocus window, frame và cả Được kích họat khi NSD thiết lập tiêu các phần tử của form điểm trên đối tượng window, frame,... onClick link, button, check box, Được kích họat khi NSD ấn nút trái của v.v. chuột lên đối tượng onChange text field, text area, Được kích họat khi NSD thay đổi giá trị select list của phần tử onLoad window, document, Được kích họat sau khi trình duyệt đã tải applet, framset, image, xong tư liệu HTML , applet hay image... link, object, script, style onUnLoad window, document, Được bẩy (trigger) khi NSD loại bỏ tư framset liệu HTML khỏi trình duyệt. onMouseDown button, link, document Được kích họat khi NSD ấn một phím chuột onMouseUp button, link, document Được kích họat khi NSD thả một phím chuột onMouseOver textarea, link, layer , Được kích họat khi NSD di chuyển con image, button ... trỏ chuột trên phần tử onMouseOut textarea, link, layer, Được kích họat khi NSD di chuyển con image, button trỏ chuột ra khỏi phần tử onResize window, frame Được kích họat khi kích thước đối tượng 98
sắp bị thay đổi onScroll window, frame Được kích họat khi NSD sử dụng thanh cuộn của cửa sổ onKeyDown textbox, text area Được kích họat khi NSD ấn một phím onKeyUp textbox, text area Được kích họat khi NSD nhả một phím onKeyPress textbox, text area Được kích họat khi NSD gõ một phím Ví dụ 1: Sử dụng sự kiện onLoad để tự động mở trang web khác xuất hiện phía trước trang web hiện tại. Ví dụ 2: Sử dụng sự kiện onKeyDown để nhận diện phím bấm có phải là phím số hay không, nếu không đúng con trỏ không thể ra khỏi textbox. Đây cũng là một phương pháp kiểm tra sự hợp lệ dữ liệu nhập mà không sử dụng sự kiện onBlur. function check(){ var kcode=event.keyCode; if(kcode>47 && kcode
II.3. Đối tượng history Đối tượng history lưu giữ các URL mà người sử dụng đã mở bằng trình duyệt. window.history có các thuộc tính và phương thức sau :  Các thuộc tính - lenght : danh sách URL trong history - current: URL của tư liệu HTML hiện hành - next: URL của tư liệu HTML tiếp sau - previous : URL của tư liệu HTML được mở liền trước.  Các phương thức - back() : trở lại trang trước - forward() : đi đến trang kế tiếp - go() : nhận tham số là một URL hay một số (-1,0,1) để đi đến trang xác định. Trong IE: -1 tương ứng với trang trước, 0: trang hiện tại, 1: trang kế tiếp. II.4. Đối tượng location Đối tượng location chứa các thông tin về giao thức, host, port, liên kết, đường dẫn, tên tệp tư liệu HTML của tệp tư liệu HTML được xem từ client, đồng thời cho phép thiết lập URL cho đối tượng window . Ví dụ : VNN Đối tượng location có các thuộc tính: - host : tên webserver - hostname : tên miền - href : đường dẫn đầy đủ của liên kết - pathname : đường dẫn và tên tệp tin của liên kết - port : cổng URL - protocol : giao thức thực hiện liên kết. - search : trả về một chuổi là thông tin nhận được từ một trang web khác gởi đến theo phương pháp GET. Để biết các thuộc tính của đối tượng location ta sử dụng đọan script sau: for(prop in location){ document.write(prop+": "+location[prop]+"";} II.5. Đối tượng navigator 100
Đối tượng navigator chứa các thông tin về trình duyệt: tên, phiên bản, tên mã, ngôn ngữ thể hiện, hệ điều hành... Các thuộc tính (được IE và NN sử dụng): - Appname : tên trình duyệt - AppVersion : phiên bản của trình duyệt - appCodeName : tên mã của trình duyệt - platform : hệ điều hình của trình duyệt Để biết các thuộc tính của đối tượng navigator ta sử dụng đọan script sau: for(prop in navigator){ document.write(prop+": "+ navigator [prop]+"";} Chú ý : Trong IE DOM navigator là đối tượng con của window, còn trong NN DOM navigator ngang cấp với window. II.6. Đối tượng screen Đối tượng screen chứa các thuộc tính liên quan đến độ phân giải màn hình, khả năng màu sắc và kích thước màn hình tính bằng pixel: - availHeight : Chiều cao của màn hình hệ thống, không kể thanh tác vụ - availWidth : Chiều rộng của màn hình hệ thống, không kể thanh tác vụ - colorDepth : Số bít dùng để thể hiện màu cho mỗi pixel - height : Độ phân giải tính theo chiều đứng của màn hình - width : Độ phân giải tính theo chiều ngang của màn hình Đọan script sau sẽ thay đổi kích thước và canh giữa cửa sổ trình duyệt trên màn hình của người sử dụng : var newTopLeftX=(screen.availWidth-640)/2.0; var newTopLeftY =(screen.availHeight-480)/2.0; window.resizeTo(640,480); window.moveTo(newTopLeftX, newTopLeftY); II.7. Đối tượng document. document là đối tượng tư liệu của cửa sổ, chứa tất cả phần tử HTML của trang web trong cửa sổ đó. Đây là đối tượng quan trọng nhất trong mô hình đối tượng trình duyệt, cho đến nay giữa IE và NN không có nhiều khác biệt: các đối tượng all, filter và selection (phần có dấu *) chỉ có trong IE DOM còn đối tượng layer vốn là một đặc trưng của NN, nay đã không tồn tại trong các phiên bản NN 6.0 hay cao hơn. 101
II.7.1. Các thuộc tính Thuộc tính Diễn giải anchors Trả về tập các phần tử anchor, link trong tư liệu applets Trả về tập các phần tử đối tượng trong một applet body Trả về phần tử body hay frameset childNodes Trả về tập các đối tượng con của một đối tượng cookies Trả về tất cả cookies của tư liệu domain Trả về tên miền của webserver chứa tư liệu forms Trả về tập các phần tử của form trong tư liệu images Trả về tập các phần tử image trong tư liệu links Trả về tập tất cả các phần anchor, link trong tư liệu với thuộc tính href được xác định referrer Trả về địa chỉ URL của trang trước trang hiện tại title Thiết lập hay trả về tiêu đề của tư liệu url Trả về địa chỉ URL của tư liệu fgColor Trả về màu ký tự của trang web bgColor Trả về màu nền của trang web linkColor Trả về màu của liên kết alinkColor Trả về màu của liên kết khi trỏ đến vlinkColor Trả về màu của liên kết đã kích họat location Trả về URL của tệp tư liệu Đối tượng document chứa 5 mảng phần tử (còn gọi là tập hợp, collection) images, applets, links, forms và anchors, mỗi mảng phần tử chứa danh sách các phần tử liên quan trong cùng một trang web, ví dụ : mảng images chứa danh sách các hình ảnh trong trang web. II.7.2. Các phương thức Phương thức Diễn giải close() Đóng một tư liệu đã được mở với phương thức document.open(). open() Mở một tư liệu mới 102
clear() Xóa một tư liệu write() In một chuổi đến một tư liệu writeln() In một dòng ký tự đến một tư liệu getElementById(ID) Trả về một phần tử với ID xác định getElementsByName(name Trả về một tập của các phần tử với tên đã xác định ) getElementsByTagName Trả về một phần tử với thẻ HTML xác định setAttributes(attr, value) Thay đổi thuộc tính của một phần tử HTML Trong các phương thức trên, hai phương thức getElementsByName và getElementByID mới được đưa vào từ IE5 và NN7, cho phép chúng ta tìm kiếm nhanh chóng một phần tử nào đó trong DOM, từ đó có thể truy xuất các thuộc tính hay thiết lập thuộc tính của một đối tượng trong trang web. Ví dụ 1 : Sử dụng tập hợp collection childNodes và phương thức getElementById để truy xuất và thiết lập các thuộc tính trong một trang web. Xét một tư liệu HTML sau : ChildNodes & getElementById This is a sample of some HTML you might have in your document listStructure(sp); Thay đổi nội dung Cấu trúc cây như sau: Đọan scrip sau sẽ phân tích cấu trúc cây của trang web đồng thời cho phép thay đổi giá trị các thuộc tính của một phần tử trên trang web: var pp=document.getElementById("ip"); var sp=pp.childNodes; function listStructure(the){ document.write("P"+""); 103
for(i=0;i
mot hai if(confirm("Ban co muon thay doi noi dung table")) change(); II.7.3. Làm việc với FORM 1.7.3.1 Đối tượng form và tập hợp forms form là một đối tượng con của đối tượng document, các phần tử của form ta đã nghiên cứu trong chương II giáo trình này. Để có thể xử lý dữ liệu của người sử dụng trên máy client, ta dùng JavaScript và các thuộc tính, phương thức của đối tượng form. Ngoài ra trong BOM đã đưa ra 2 collection (tập hợp, mãng): - forms : tập (mãng) các đối tượng form trong một tư liệu HTML. - options : tập (mãng) các đối tượng option trong một đối tượng Select. Các thuộc tính : Thuộc tính Diễn giải acceptCharset Trả về danh sách các bảng mã ký tự được hỗ trợ action Thiết lập / Trả về các action trên form elements Trả về một tập tất cả phần tử của form length Trả về số lượng các phần tử trên một form name Trả về tên form được khai báo qua thuộc tính name method Thiết lập / Trả về phương thức HTTP để submit một form target Thiết lập frame để submit dữ liệu đến Các phương thức: Phương thức Diễn giải reset Thiết lập lại các giá trị của các trường dữ liệu của form submit Submit một form Các sự kiện : - onReset : script chạy trước khi thiết lập lại dữ liệu của form - onSubmit: script chạy trước khi form được gởi đi. - Để truy xuất một phần tử của form ta sử dụng cú pháp: document.tên_Form.tên_Đốitượng hay document.id_Form.id_Đốitượng - Để thiết lập giá trị cho một phần tử của form ta sử dụng cú pháp: document.tên_Form.tên_Đốitượng.value=giá_tri hay document.id_Form.id_Đốitượng.value=giá_trị.  Phần tử text box - Thẻ HTML : 105
- Các thuộc tính : id, name, class, style, value, size, maxlength (số tối đa các ký tự có thể nhập vào), readonly (khóa điều khiển, không cho thay đổi giá trị), accesskey (Thiết lập phím tắt: Alt+phím), tableIndex (Thiết lập thứ tự nhận tiêu điểm), disabled (Khóa điều khiển, không cho thay đổi giá trị và nhận tiêu điểm), style ... - Các sự kiện : onChange, onFocus, onBlur ... Ví dụ 1: Xây dựng các hàm để kiểm tra nhập liệu cho một form. Yêu cầu nhập liệu : Họ tên không rỗng, điểm nằm trong đoạn [0,10], nếu hợp lệ thì cho nút submit hoạt động, ngược lại vô hiệu hóa nút submit. Nhập điểm cho sinh viên body{font: nornal 10pt arial} table{border:collapse:collapse; border:solid 1pz maroon} function kiemTra(){ var objH=document.getElementById("iht"); // họ tên var objD=document.getElementById("idm"); // điểm var objS=document.getElementById("sm"); // nút submit var ok=(objH.value!=""); ok= ok && ((parseInt(objD.value)>=0)||(parseInt(objD.value) Họ và tên sinh viên Điểm thi 106
 Phần tử text area - Thẻ HTML : .. - Các thuộc tính : id, name,value, rows, cols, style, tableIndex, disabled ... - Các sự kiện : onFocus, onBlur, onChange... Ví dụ :  Phần tử button - Thẻ HTML : - Các thuộc tính : value, style, ... - Các sự kiện : onClick, onMouseOver, onMouseOut,... Hai kiểu đặc biệt của phần tử button có kiểu là : reset và submit Ví dụ : xây dựng script là thay đối biểu biện nút lệnh ứng với hai sự kiện chuột function ch(bg,fco){ var nt=document.getElementById("bt"); nt.style.backgroundColor=bg; nt.style.color=fco // có thể sử dụng nt.value để thay đổi nhãn của nút lệnh }
- Các thuộc tính : id, name, length (số đề mục), selectedIndex (trả về thứ tự đề mục đã chọn), disabled, options[i] (trả về đối tượng option thứ i, options là tập các đề mục) . options[i].text : nội dung đề mục thứ i . options[i].value : trả về chuổi giá trị của đề mục thứ i - Các sự kiện : onChange, onBlur, onFocus. + Phần tử OPTION - Các thuộc tính : id, name, value, text, index + Các sử dụng : Để truy cập một phần tử option ta sử dụng moojt trong 2 phương pháp: - Sử dụng tập forms: document.forms.name_form.name_select.options[i]; - Sử dụng phương thức getElementById Ví dụ: function formAction() { var x=document.forms.myForm.mySelect //var x=document.getElementById("iS"); // cả hai cách đều được alert(x.options[x.selectedIndex].text) } /* có thể thay thuộc tính text trong x.options[x.selectedIndex].text bằng các thuộc tính value, index để thử nghiệm kết quả. */ Tao Chuoi Cam  Phần tử Radio button / Check box - Thẻ HTML : / - Các thuộc tính : id, name, value, checked (được chọn mặc nhiên), length (số nút radio/ chexkbox trong nhóm có cùng tên) - Các sự kiện : onClick, onMouseOver, onMouseOut Ví dụ : Xây dựng một biểu mẫu nhập liệu để thăm dò ý kiến độc giả và cần phải kiểm tra dữ liệu được nhập là đầy đủ theo mẫu như sau : 108
(Để trình bày biểu mẫu được mỹ thuật cần sử dụng table theo cấu trúc : thẻ INPUT hay SELECT ... đọan mã sau đây được lược bớt phần table cho dễ theo dõi) Tham do y kien function checkForm(){ var myForm = document.forms[0]; var hoTen=myForm.hoten.value; var emailAddr=myForm.email.value; // Hãy so sánh việc truy xuất các đối tượng ở trên với sử dụng getElementByID var tuoiIndex=myForm.age.selectedIndex; var tuoi=myForm.tuoi.options[tuoiIndex].value; var nutObj=myForm.nut; var nut=""; for(var i=0;i
26-35 36-49 Bạn biết chúng tôi thông qua: Báo chí Tivi Giới thiệu của bạn bè Tin đồn  Truyền thông dữ liệu giữa các trang web : method POST và GET Thuộc tính method của phần tử FORM xác định phương thức truyền gởi dữ liệu giữa các trang web hay truyền gởi dữ liệu đến webserver để vấn tin. Phương pháp POST : gởi dữ liệu theo giao thức HTTP đến webserver. Phương pháp GET: gởi dữ liệu trong chuổi vấn tin đính kèm đến URL. Trong phần này ta nghiên cứu các phương pháp truyền thông dữ liệu giữa các trang web theo phương pháp GET. Có 3 phương pháp : - Dùng link : Send data Gởi hai dữ liệu "Nguyen Van Quang" và "48" đến trang web receiveInfo.htm - Dùng JavaScript để tạo một URL : Hàm encodeURI có chức năng mã hóa dữ liệu để gởi đi, phía trang web nhận sẽ giải mã dữ liệu bằng hàm decodeURI và đón nhận dữ liệu bằng phương thức : location.search. - Dùng form với method GET. Ví dụ : Ta có hai trang web: sendInfo.htm, có chức năng nhập liệu và gởi thông tin, receiveInfo.htm có chức năng nhận và hiển thị thông tin nhận được. * sendInfo.htm Sending Information Send data 110
Ho ten Tuoi * receiveInfo.htm Receiving Information var infoPassed=decodeURI(location.search); document.write("Info sent is: "+infoPassed); Kết quả trang web receiveInfo.htm nhận theo các phương pháp gởi dữ liệu như sau : Phương pháp 1, 2: ?Nguyen Van Quang&48 Phương pháp 3 : ?name=Nguyen+Van+Quang&age=48& Nsubmit=Vsubmit Đối với phương pháp gởi dữ liệu theo link việc nhận thông tin đơn giản, dễ xử lý, còn đối với phương pháp cuối cùng, tức là gởi tất cả các thành phần của form đến trang web khác, việc xử lý dữ liệu khó khăn hơn. II.7.4. Đối tượng anchor Đối tượng anchor đại diện cho phần tử trên tư liệu HTML - Các thuộc tính : accessKey, charset, id, name, tabIndex, href (xác định URL của liên kết ), target (xác định cửa sổ mở trang web xác định trong URL), innerHTML (xác định đọan văn bản của thẻ A chứa liên kết) - Phương thức : blur(), focus(). Ví dụ : Xây dựng đọan mã cho phép thay đổi URL và nội dung text của một liên kết thỏa mãn chạy trên IE và NN. function myHref() { var lienket=document.getElementById('myAnchor'); /* Các biện pháp thay đổi nội dung văn bản của liên kết * lienket.textContent='Visit W3Schools'; //câu lệnh này chỉ chạy trên NN * lienket.innerText="Visit W3Schools"; //câu lệnh này chỉ chạy trên IE */ lienket.innerHTML='Visit W3Schools'; //câu lệnh này chạy trên NN và IE //var lin=lienket.childNodes; //lin[0].nodeValue='Visit W3Schools'; /* Câu lệnh này chạy được trên IE và NN, dùng thuộc tính childNodes*/ 111
document.getElementById('myAnchor').href="http://www.w3schools.com"; } Visit Microsoft III. DHTML (Dynamic HTML) III.1. Khái niệm DHTML là từ viết tắt của Dynamic Hyper Text Markup Languge, HTML động, là một thuật ngữ marketing của Microsoft khi phát hành phiên bản IE 4.0 và thuật ngữ này chưa được W3C chính thức chấp nhận, tuy nhiên trước sự hấp dẫn của nó mang lại, nhiều nhà phát triển web đã tận dụng kỹ thuật này. DHTML được định nghĩa bằng một công thức ngắn gọn : DHTML = HTML + CSS + JavaScript Tuy nhiên, DOM mới chính là cơ sở của DHTML, nó cung cấp giao diện cho các script và các component truy cập vào các đối tượng của tư liệu HTML để đọc và thiết lập các giá trị của các thuộc tính, tạo nên một trang web " động" (animated, cần chú ý khái niệm này hoàn toàn khác với khái niệm dynamic web page mà ta sẽ nghiên cứu ở các chương 7,8 của giáo trình này). IE và NN đều hỗ trợ DHTML, tuy nhiên chính hai trình duyệt này dựa trên hai mô hình đối tượng tư liệu khác nhau, người thiết kế web phải xây dựng một trang web trung tính để thỏa mãn nhiều người sử dụng khác nhau. III.2. Các phương pháp truy cập đến một đối tượng trên tư liệu HTML DOM cung cấp một giao diện lập trình ứng dụng phía client, theo đó ta có thể truy cập đến một đối tượng trên tư liệu HTML bằng một trong những phương pháp sau : - Sử dụng phương thức của đối tượng document: getElementById(), getElementsByName() và getElementsByTagName() - Sử dụng thuộc tính childNodes của một đối tượng. - Sử dụng các collection : elements (của form), anchors, images v.v. Trong các phương pháp trên, hai phương pháp đầu tỏ ra khá hiệu quả và thường được ưa thích để truy cập đến một đối tượng riêng biệt trên trang web. III.3 Các đặc điểm của DHTML DHTML có 3 đặc điểm quan trọng hay sự kết hợp giữa HTML, CSS và JavaScript cho chúng ta có thể thay đổi nội dung, thể hiện, vị trí của một đối tượng trên trang web thông qua các sự kiện mà không cần phải nạp lại trang web. III.3.1. Nội dung động DHTML cho phép thiết kế trang web có thể thay đổi nội dung sau khi được nạp, trong đó IE cung cấp nhiều khả năng hơn NN. 112