intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE

Bài giảng Lập trình mạng: Bài 5 - Đoàn Thiện Ngân

Chia sẻ: 5A4F5AFSDG 5A4F5AFSDG | Ngày: | Loại File: PDF | Số trang:24

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

Bài 5: HTML DOM – Biến cố. Nội dung trình bày gồm: Giới thiệu HTML DOM, đối tượng window, Đối tượng navigator, các thuộc tính của đối tượng document, Các phương thức của đối tượng document, đối tượng frame, các thuộc tính của đối tượng frame,... Mời các bạn tham khảo.

Chủ đề:
Lưu

Nội dung Text: Bài giảng Lập trình mạng: Bài 5 - Đoàn Thiện Ngân

  1. HTML DOM BIẾN CỐ GV: ĐOÀN THIỆN NGÂN
  2. Nội dung Chương 8: HTML DOM – BIẾN CỐ • HTML DOM • BIẾN CỐ LTM1 – HTML DOM & EVENT – 2/24
  3. 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 – 3/24
  4. LTM1 – HTML DOM & EVENT – 4/24
  5. Đố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 – 5/24
  6. Đố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 – 6/24
  7. Đố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 – 7/24
  8. Đố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 – 8/24
  9. Các thuộc tính của đối tượng document • 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. LTM1 – HTML DOM & EVENT – 9/24
  10. 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 – 10/24
  11. 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 – 11/24
  12. Đố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 – 12/24
  13. 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 – 13/24
  14. Đố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 – 14/24
  15. 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 – 15/24
  16. Đố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 – 16/24
  17. 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ố LTM1phần tử HTML) – HTML DOM & EVENT – 17/24
  18. 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 – 18/24
  19. 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ả LTM1 –phím. HTML DOM & EVENT – 19/24
  20. 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 – 20/24
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
2=>2