Bài 4 Các đối tượng trong Javascript


Các đối tượng có thuộc tính (properties), phương thức (methods), và các chương trình xử lý sự kiện (event handlers) gắn với chúng


Mục tiêu

  • Các đối tượng trong JavaScript
  • Sử dụng các đối tượng
  • Các sự kiện trên trang HTML
  • Kết hợp ngôn ngữ JavaScript, các đối tượng và các sự kiện trên web để xử lý các yêu cầu

1. Các đối tượng cơ bản

  • JavaScript là ngôn ngữ lập trình dựa trên đối tượng (Object-based language)
  • Các đối tượng trong JavaScript (Math, String, …) giúp người lập trình xử lý cắt chuỗi, sử dụng các hàm toán học
    • String
    • Date
    • Math
  • JavaScript sẽ dựa vào giá trị của biến để xác định biến đó thuộc đối tượng nào

String

  • Xử lý chuỗi văn bản

var <tên biến> = new String;
hoặc
var <tên biến> = new String("chuỗi khởi tạo");

Ví dụ:
var chuoi = new String("Lập trình web cơ bản");

  • Thuộc tính: length trả về tổng số ký tự của chuỗi
  • Phương thức: search  tìm kiếm một chuỗi và trả về vị trí của nó trong chuỗi. Nó trả về -1 nếu không phù hợp được tìm thấy.
//tìm chữ "Tâm" trong chuỗi "Chữ tâm kia mới bằng ba chữ tài" 
var chuoi = new String("Chữ tâm kia mới bằng ba chữ tài");
n = chuoi.search(/Tâm/i); //Ket qua la 4
  •  Phương thức: replace tìm kiếm và thay thế chuỗi
//thay thế toàn bộ chữ "Mẹ" thành "Má"
var chuoi = new String("Mẹ là làn gió mát, đưa con giấc ngủ ngoan; Mẹ là dòng suối trong, cho con luôn tìm về");
str = chuoi.replace(/mẹ/gi,"Má");

Date

Dùng để xử lý dữ liệu kiểu thời gian

var <tên biến> = new Date();
hoặc
var <tên biến> = new Date(năm, tháng, ngày);

var ngaysinh = new Date(2016,06,10);

Math

  • Các xử lý liên quan đến toán học
  • Không cần khai báo và khởi tạo
  • Thuộc tính:

math javascript

math 2 javascript

//phát sinh một số nguyên ngẫu nhiên trong khoảng từ 10 đến 100 
var so = parseInt(Math.random()*91 +10);

Math.round(3.4) // kết quả 3
Math.round(3.5)	// kết quả 4

2. Các đối tượng trong JavaScript

  • Mô hình BOM - Browser Object Model
  • Mô hình DOM Document Object Model
  • Tham chiếu đến một đối tượng trong DOM

Sắp xếp theo hệ thống phân cấp (hierarchy) và bắt đầu là đối tượng window

Hệ thống phân cấp Javascript

Mô hình BOM - Browser Object Model

Mô hình BOM Browser Object Model

  • window: đại diện cho cửa sổ trình duyệt
    • Thuộc tính status, history, location
    • Phương thức close, open, setInterval, setTimeout, …
    • Sự kiện:
      • Onblur: Xảy ra khi window mất focus
      • Onerror: Xảy ra khi có lỗi
      • Onfocus: Xảy ra khi window nhận focus
      • Onload: Xảy ra khi mở đã xong trang web
      • Onresize: Xảy ra khi window bị thay đổi kích thước
  • navigator: cung cấp thông tin về trình duyệt và hệ thống tại máy client
    • appName: Tên trình duyệt
    • appVersion: Trả về phiên bản của trình duyệt, tuy nhiên đó không phải là có số chính xác
    • platform: Hệ điều hành hiện tại mà của sổ trình duyệt đang mở
  • location: chứa thông tin về URL hiện hành, thường sử dụng để di chuyển đến một trang web khác
  • event: được hỗ trợ từ IE 5.0 và Netscape 6.0 trở lên, dùng để lưu vết các sự kiện xảy ra trên trang web như nhấn chuột, di chuyển chuột, …
    • keyCode: Trả về giá trị Unicode của phím được nhấn
    • button: Trả về số nguyên, chỉ ra phím chuột nào được nhấn
    • clientX, clientY: Trả về tọa độ x, y của chuột
    • type: Trả về tên của sự kiện

event mô hình bom browser object model

Mô hình DOM - Document Object Model

  • Phản ánh cấu trúc của một tài liệu HTML
  • Được phép thêm, xóa hoặc cập nhật các đối tượng trong DOM

Mô hình Dom Document Object Model

  • document: đại diện cho toàn bộ trang HTML

  •  document: đại diện cho toàn bộ trang HTML
    • Thuộc tính: title, URL
    • Phương thức:
      • write("chuỗi") : In "chuỗi" lên trang web
      • writeln("chuỗi") : In "chuỗi" lên trang web, có xuống dòng
      • getElementById("ID") : Trả về một tham chiếu đến đối tượng thông qua thuộc tính ID. Tham số ID chính là giá trị của thuộc tính id trong một tag
      • getElementsByName("Name") : Trả về tập hợp các đối tượng có cùng giá trị thuộc tính name
      • getElementsByTagName("TagName") : Trả về tập hợp đối tượng có cùn tag
    • Sự kiện chuột
      • onclick: Xảy ra khi nhấn chuột
      • ondbclick: Xảy ra khi double-click
      • onmousedown: Xảy ra khi nhấn phím chuột
      • onmouseup: Xảy ra khi thả phím chuột
      • onmousemove: Xảy ra khi di chuyển chuột đến đối tượng
      • onmouseover: Xảy ra khi rê chuột lên trên đối tượng
      • onmouseout: Xảy ra khi rê chuột ra khỏi đối tượng
    • Sự kiện phím
      • onkeydown: Khi nhấn phím bất kỳ
      • onkeypress: Khi nhấn phím có hiển thị dữ liệu (như phím số, ký số, ký tự hoặc Esc)
      • onkeyup: Khi thả phím trạng thái (Shift, Enter, Ctrl, ...)

Tham chiếu đến một đối tượng trong DOM

Tham chiếu một đối tượng của document

document.<tên t.tính tập hợp>[“tên đ.tuợng”|<chỉ số>].<t.tính>
hoặc
document.<tên t.tính tập hợp>.<tên đ.tuợng>.<thuộc tính>

Ví dụ:
document.images[‘hinh1’].src
document.images[0].name
document.images.hinh1.src

Tham chiếu một đối tượng của form

document.forms[“tên form”|<chỉ số>].<đ.tượng>.<thuộc tính>

Ví dụ: document.forms['nhap'].ks.checked

Điều khiển Drop-down List: Truy xuất một mục bất kỳ

document.forms[“tên form”|<chỉ số>].<đ.tượng>.options[<chỉ số>].<t.tính>
hoặc
document.forms.<tên form>.<đ.tượng>.options[<chỉ số>].<thuộc tính>

Ví dụ:
var nd = document.forms['nhap'].thuc_an.options[1].innerText
hoặc
var nd = document.forms.nhap.thuc_an.options[1].innerText

3. Các sự kiện trên trang HTML

  • Sự kiện của window – Window Events
  • Sự kiện của các điều khiển trên form
    • onchange: khi thay đổi nội dung của điều khiển
    • onfocus: khi điều khiển nhận được focus
    • onblur: khi điều khiển mất đi focus
  • Sự kiện phím – Keyboard Events
    • Các sự kiện: onkeydown, onkeypress, onkeyup
    • Thường áp dụng cho đối tượng document, form và các điều khiển trên form
  • Sự kiện chuột – Mouse Events

Bài viết tiếp theo

Chia sẽ bài viết :