Html dom biến cố

HTML DOM BIẾN CỐ GV: ĐOÀN THIỆN NGÂN LTM1 – HTML DOM & EVENT – 2/24 Nội dung Chương 8: HTML DOM – BIẾN CỐ • HTML DOM • BIẾN CỐ LTM1 – HTML DOM & EVENT – 3/24 Giới thiệu HTML DOM • HTML DOM: Document Object Model for HTML • Mô hình đối tượng tài liệu (document) trong trình duyệt. • DOM định nghĩa tập chuẩn về cách truy xuất, thao tác các đối tượng trong tài liệu HTML • DOM thể hiện tài liệu HTML ở dạng cấu trúc cây, với mỗi nút (node) trên cây đại diện cho một phần tử HTML. Nút lớn nhất là window. • Các nút nằm bên trong một nút được gọi là nút con, còn các nút thuộc cùng mức được xem là nút anh em. LTM1 – HTML DOM & EVENT – 4/24 LTM1 – HTML DOM & EVENT – 5/24 Đối tượng window • Các thuộc tính: frames, closed, defaultstatus, length, name, opener, parent, self, status, top, document, history, location, • Các phương thức: üprint(), alert("msg"), confirm("msg"), prompt("msg","default-value"), üsetTimeout(func,millisec), clearTimeout(id), setInterval(func, millisec), clearInterval(id), ümoveBy(x,y), moveTo(x,y), resizeTo(x,y), resizeBy(x,y), blur(), focus(), close(), üopen("url","tên-window","_blank| _parent| _self| _top| tên_newwindow", ["thuộctính1=val1, thuộctính2=val2, "]) LTM1 – HTML DOM & EVENT – 6/24 Đối tượng navigator •Đối tượng navigator thể hiện các thông tin về trình duyệt với các thuộc tính và phương thức: üappCodeName: mã tên của trình duyệt. üappName: tên trình duyệt. üappVersion: phiên bản của trình duyệt. übrowserLanguage: ngôn ngữ hiện tại của trình duyệt. üplatform: nền của hệ điều hành. üjavaEnabled(): cho biết trình duyệt có hỗ trợ Javascript hay không. LTM1 – HTML DOM & EVENT – 7/24 Đối tượng location • Thuộc tính và phương thức của đối tượng location ühref: thể hiện url của trang web. üreload(): nạp lại trang web hiện tại. üreplace(): thay thế nội dung hiện tại bằng một trang web mới. LTM1 – HTML DOM & EVENT – 8/24 Đối tượng history • Thuộc tính và phương thức của đối tượng history: ülength: số lượng URL mà người dùng đã truy cập. übackward(): nạp URL trước đó trong danh sách URL history. üforward(): nạp URL kế tiếp trong danh sách URL history. ügo(number|URL): nạp một URL có thứ tự cụ thể trong danh sách URL history. LTM1 – HTML DOM & EVENT – 9/24 • Các thuộc tính của đối tượng document: üanchors: trả về mảng chứa tất cả các tên bookmark trong tài liệu. üforms: trả về mảng chứa tất cả đối tượng form trong tài liệu. üimages: trả về mảng chứa tất cả đối tượng ảnh trong tài liệu. ülinks: trả về mảng chứa tất cả đối tượng liên kết trong tài liệu. übody: phần tử body của trang. ütitle: tựa đề của tài liệu. Các thuộc tính của đối tượng document LTM1 – HTML DOM & EVENT – 10/24 Các thuộc tính của đối tượng document • Các thuộc tính của đối tượng document: ü alinkcolor: màu của liên kết đang được kích hoạt. ü vlinkcolor: màu của liên kết đã được chọn. ü linkcolor: màu của liên kết trong tài liệu. ü bgcolor: màu nền của tài liệu. ü fgcolor: màu của văn bản trong tài liệu. ü location: thể hiện địa chỉ của document. LTM1 – HTML DOM & EVENT – 11/24 Các phương thức của đối tượng document ügetElementById(id): trả về phần tử HTML có id tương ứng. ügetElementsByName(name): trả về một mảng gồm các phần tử HTML có tên tương ứng. ügetElementsByTagName(tagname): trả về một mảng các phần tử HTML có tên thẻ tagname đã chỉ định. üdocument.write("str"): ghi một dòng văn bản vào tài liệu. üdocument.writeln("str"): ghi một dòng văn bản vào tài liệu, có kèm thêm dấu xuống dòng. üopen("text/html", replace): tạo nội dung mới cho tài liệu, dùng kết hợp với hàm document.write(). üclose(): đóng tài liệu khi đã dùng hàm open() bên trên. LTM1 – HTML DOM & EVENT – 12/24 Đối tượng frame •Đối tượng frame: một phần tử HTML frame. • Trong tài liệu HTML có bao nhiêu thẻ , sẽ có tương ứng bấy nhiêu đối tượng frame. • Thuộc tính frames của window: mảng các frame var allframes = window.frames; üvar myframe = window.frames[i]; üvar myframe = window.frames['tên_frame']; üvar myframe = window.tên_frame; üvar myframe = document.getElementById(frame_id); LTM1 – HTML DOM & EVENT – 13/24 Các thuộc tính của đối tượng frame • frameBorder=1|0: hiển thị đường biên của frame • name: tên frame. • scrolling=yes|no: cho biết hiển thị thanh cuộn hay không. • src=URL: địa chỉ của tài liệu hiển thị bên trong frame. • noResize=true|false: cho biết có thể thay đổi kích thước frame hay không. LTM1 – HTML DOM & EVENT – 14/24 Đối tượng form • Thuộc tính forms của document: mảng tất cả form trong tài liệu • Các thuộc tính của form: • elements: mảng chứa tất cả phần tử trên form. • action: giá trị của thuộc tính action của thẻ . • id: id của form. • length: số phần tử thuộc form. • target: giá trị của thuộc tính target của thẻ . • Các phương thức của form: reset(), submit() LTM1 – HTML DOM & EVENT – 15/24 Thuộc tính của một thẻ chứa • Thuộc tính innerHTML: nội dung gồm văn bản và HTML phần_tử.innerHTML • Thuộc tính value: giá trị của phần tử phần_tử.value • Thuộc tính checked của checkbox, radio button hay option (trong Dropdown Box): Boolean – false/true • Thuộc tính của phần tử select – Dropdown Box: options, length, selectedIndex (không hiệu lực khi chọn multiple) VD-8.18 • Thuộc tính readonly (text field hay textarea) và disable LTM1 – HTML DOM & EVENT – 16/24 Đối tượng Style • Cú pháp định dạng style cho một phần tử phần_tử.style.thuộc_tính_CSS Click to see demo var objDemo = document.getElementById("demo"); function changeDemo() { objDemo.innerHTML = "TEST CSS STYLE"; if (objDemo.style.color != "red") objDemo.style.color="red"; else objDemo.style.color="green"; } LTM1 – HTML DOM & EVENT – 17/24 Giới thiệu về biến cố - event • Biến cố là các hành động xảy ra trên trang web, được nhận biết bởi JS • Mỗi thành phần trong trang web có những biến cố riêng tương ứng • Các biến cố sẽ kích hoạt các đoạn code xử lý biến cố • Trong JS, biến cố được phân thành một số nhóm chinh: üBiến cố liên quan đến giao diện người dùng üBiến cố liên quan đến chuột. üBiến cố liên quan đến bàn phím üBiến cố HTML (gắn với một số phần tử HTML) LTM1 – HTML DOM & EVENT – 18/24 Quản lý biến cố Quản lý biến cố cho một thẻ HTML, dùng cách sau: 1.Chỉ định biến cố và đoạn code xử lý trong thẻ HTML. 2.Chỉ định biến cố và đoạn code xử lý bằng lệnh Javascript. •đốitượng.biếncố = hàm-xử-lý-biến-cố; •đốitượng.biếncố = function(){ hàm-xử-lý-biến-cố(); }; LTM1 – HTML DOM & EVENT – 19/24 Biến cố liên quan GUI và Keyboard • Biến cố liên quan đến giao diện người dùng gắn liền với thao tác chuyển tiêu điểm (focus) một đối tượng này sang một đối tượng khác 1. onactivate: (IE hỗ trợ, Firefox không hỗ trợ) 2. onblur: mất focus 3. onfocus: nhận focus •Biến cố liên quan bàn phím: 1. onkeydown: biến cố xảy ra khi nhấn phím. 2. onkeypress: biến cố xảy ra khi nhấn và nhả phím. 3. onkeyup: biến cố xảy ra khi nhả phím. LTM1 – HTML DOM & EVENT – 20/24 Biến cố liên quan đến chuột • onmousedown: khi nhấn nút chuột. • onmouseup: khi nhả nút chuột. • onmouseover: khi chuột nằm trên một thành phần HTML • onmouseout: khi chuột di chuyển khỏi thành phần HTML • onmousemove: khi di chuyển chuột. • onclick: khi click chuột (cả hai thao tác nhấn và nhả chuột). • ondblclick: khi nhấp đúp chuột (double-click). LTM1 – HTML DOM & EVENT – 21/24 Các biến cố HTML • onload: khi trang Web được tải hoàn toàn trong trình duyệt • onunload: khi trình duyệt chuẩn bị loại bỏ trang Web • onsubmit: khi nhấn nút submit trên form • onreset: khi nhấn nút reset trên form • onselect: khi chọn văn bản trong một textfield hay textarea. • onchange: khi mất focus và giá trị của nó bị thay đổi • onscroll: khi scrollbar của đối tượng bị thay đổi • onabort: khi trình duyệt ngừng tải hình ảnh (hiếm dùng) • onresize: đối tượng sắp bị thay đổi kích thước (hiếm dùng) • onerror: có lỗi lúc trang web đang tải xuống (hiếm dùng) LTM1 – HTML DOM & EVENT – 22/24 Kích hoạt biến cố bằng Javascript • Gọi hàm gắn liền với biến cố üdocument.forms[0].submit(); ü • Gọi hàm fireEvent để kích hoạt biến cố (một số trình duyệt không hỗ trợ) üvar btn = document.getElementById("btn"); btn.fireEvent("onclick"); ü LTM1 – HTML DOM & EVENT – 23/24 Sử dụng method addEventListener() • Dùng addEventListener() gắn event handler cho một element xác định. • Có thể thêm nhiều event handlers cho cùng một loại event cho một element, i.e nhiều "click" events. • Dùng addEventListener() cho bất kỳ DOM object (không riêng HTML elements. i.e window object). • Không dùng "on" cho event; dùng "click" thay vì "onclick". • Xoá event listener dùng method removeEventListener() LTM1 – HTML DOM & EVENT – 24/24 ??? • HTML DOM • HTML element: attributes, methods • Attribute CSS Style • Event, Event handler • Method addEventListener()