Các đối tượng trình duyệt JavaScript

Các đối tượng trình duyệt JavaScript Các đối tượng trình duyệt JavaScript Bởi: Hà Nội Aptech Mục tiêu học Kết thúc chương này, bạn có thể: • Làm việc với kiện phổ biến JavaScript • Làm việc với đối tượng trình duyệt ◦ Thuộc tính ◦ Phương thức Giới thiệu Các kiện hành động người dùng sinh Chúng ta làm cho trang web dễ tương tác cách tạo trình xử lý kiện đáp ứng kiện người dùng tạo Trong chương này, học kiện mà trình duyệt hỗ trợ cách tạo trình xử lý kiện cho kiện Cũng chương này, đề cập đến đối tượng trình duyệt Đối tượng Event - Khái niệm Các chương trình JavaScript thường hướng kiện Các kiện hành động xảy trang web Một kiện người dùng tạo – click chuột vào button - hệ thống tạo – thay đổi kích thước trang Hầu hết trình duyệt hỗ trợ đối tượng Event Mỗi kiện có đối tượng Event tương ứng Đối tượng Event cung cấp thông tin kiện - loại kiện vị trí trỏ thời điểm xảy kiện Khi kiện phát sinh, gửi đối số đến trình xử lý kiện Dĩ nhiên, phải có trình xử lý kiện trường hợp K hi người dùng nhấp chuột, kiện onmousedownđược phát sinh 1/19 Các đối tượng trình duyệt JavaScript Đối tượng Event chứa thơng tin sau: • • • • Loại kiện - Trong trường hợp nhấp chuột Vị trí x y trỏ nhấp chuột Nút chuột nhấn Các phím bổ trợ (Control, Alt, Meta, Shift) nhấn vào thời điểm xảy kiện Đối tượng Event sử dụng trực tiếp với đối tượng window Nó sử dụng phần trình xử lý kiện Một kiện bắt đầu hành động điều kiện khởi tạo kiện kết thúc việc đáp lại trình xử lý kiện Vịng đời kiện thơng thường gồm bước sau: Hành động người dùng điều kiện tương ứng với kiện xảy Đối tượng Event cập nhật tức nhằm phản ánh trạng thái kiện Sự kiện kích hoạt Trình xử lý kiện tương ứng gọi Trình xử lý kiện thực hành động trả điều khiển cho chương trình Các kiện Javascript Tập hợp kiện tương ứng với phần tử khác trang phần mơ hình đối tượng tài liệu (Document Object Model), JavaScript Nghĩa là, kiện phần tử hỗ trợ khác trình duyệt Sau số kiện thường hầu hết đối tượng hỗ trợ: • onClick Sự kiện onClick tạo người dùng nhấp chuột lên phần tử form (button, checkbox, radio button, phần tử select), lên hyperlink function compute(form) { if (confirm("Are you sure?")) form.kết quả.value = eval(form.expr.value) else alert("Please come back again.") } Enter an expression: Kết quả: Kết đoạn mã ví dụ minh hoạ hình Kết ví dụ • onChange Sự kiện onChange xảy phần tử form thay đổi Điều xảy nội dung trường văn thay đổi, chọn lựa danh sách chọn lựa thay đổi Tuy nhiên, kiện onChange không tạo radio button checkbox nhấp Thay vào đó, kiện onClick tạo Sự kiện onChange gửi phần tử hồn tất việc thay đổi Vì vậy, textbox hiệu chỉnh, kiện onChange phát sinh sau việc hiệu chỉnh hồn tất, người dùng khỏi textbox Please enter a number: Hình minh hoạ kết đoạn mã ví dụ Kết ví dụ Nếu nhập vào giá trị số: Kết ví dụ 3(Khi nhập giá trị số) • onFocus 4/19 Các đối tượng trình duyệt JavaScript Sự kiện onFocus gửi phần tử form trở thành phần tử thời Chỉ phần tử nhận focus nhận input từ người dùng Điều xảy người dùng nhấp chuột lên phần tử, sử dụng phím Tab Shift+Tab (di chuyển tớI phần tử form) • onBlur Blur ngược với focus Khi người dùng rời khỏi phần tử form, kiện onBlur kích hoạt Đối với số phần tử, nội dung bị thay đổi, kiện onChange kích hoạt Khi textbox nhận focus, màu chuyển sang DIMGRAY, focus (blur), màu chuyển sang AQUA Kết ví dụ – Blur (hình trái) and focus (hình phải) • onMouseOver Sự kiện onMouseOver tạo trỏ chuột di chuyển lên phần tử • onMouseOut Sự kiện onMouseOut tạo trỏ chuột di chuyển khỏi phần tử 5/19 Các đối tượng trình duyệt JavaScript var num =0 function showLink(num) { if (num==1) { document.forms[0].elements[0].value= "You have selected Aptech"; } if (num==2) { document.forms[0].elements[0].value = "You have selected Asset"; } if (num==3) { document.forms[0].elements[0].value = "You have selected Arena"; } } Aptech Asset Arena Khi di chuyển chuột qua Aptech, kết hiển thị sau Kết ví dụ • OnLoad Sự kiện onLoad (áp dụng cho đối tượng body) phát sinh tải xong tài liệu Nó phát sinh ảnh tải xong Hello Kết : 6/19 Các đối tượng trình duyệt JavaScript Kết ví dụ • onSubmit Sự kiện onSubmit tạo người dùng truyền liệu từ form (thường sử dụng nút Submit) Sự kiện xảy trước form thật gửi Thật ra, trình xử lý kiện tương ứng với kiện ngăn chặn form không gửi cách trả giá trị false Cách dùng đê kiểm tra hợp lệ liệu nhập vào • onMouseDown Sự kiện kích hoạt hành động nhấp chuột xảy Nghĩa là, người dùng nhấp chuột Đây trình xử lý kiện cho đối tượng button, document, link • onMouseUp Sự kiện kích hoạt hành động nhả chuột xảy Nghĩa là, người dùng thả chuột Đây trình xử lý kiện cho đối tượng button, document, link Kết tương tự hình Điểm mạnh kĩ thuật tính linh hoạt Chúng ta thay đổI nhanh chóng trình xử lý kiện u cầu Đối tượng trình duyệt thơng thường Trình duyệt ứng dụng dùng để hiển thị nội dung trang HTML Các trình duyệt cung cấp số đối tượng truy cập sử dụng script Đối tượng trình duyệt hoạt động đối tượng lưu chứa phần tử HTML trang Web Netscape Microsoft phát triển mơ hình đối tượng tài liệu riêng (DOM) Hai mơ hình khơng tuơng thích với 10/19 Các đối tượng trình duyệt JavaScript Đối tượng window thể cửa sổ trình duyệt Tất đối tượng khác mơ hình kế thừa từ đối tượng window truy cập thơng qua đối tượng window Có thể có thêm đối tượng window khác Các đối tượng thể cửa sổ xem Frame Những đối tượng cửa sổ truy cập thông qua tập hợp Frame Trong phần tìm hiểu đối tượng mà Internet Explorer Netscape Navigator cung cấp với số thuộc tính phương thức liên quan đến chúng Đối tượng trình duyệt IE Đối tượng trình duyệt Netscape 11/19 Các đối tượng trình duyệt JavaScript Mơ hình đối tượng (DOM) Một đặc điểm quan trọng JavaScript ngôn ngữ dựa đối tượng Điều hỗ trợ cho người sử dụng phát triển chương trình theo mơđun sử dụng lại JavaScript khơng hồn tồn ngơn ngữ hướng đối tượng, hỗ trợ vài đặc điểm hướng đối tượng Một đối tượng định nghĩa thực thể đơn bao gồm thành phần liệu gọI thuộc tính (Property) thành phần chức gọI phương thức (Method) Một thuộc tính giá trị gắn với đối tượng Tất đối tượng JavaScript chuẩn có thuộc tính Document.bgcolor Đối tượng Window Thể cửa sổ trình duyệt dùng để lấy thông tin trạng thái cửa sổ Nó sử dụng để hiển thị đối tượng document truy cập kiện xảy cửa sổ đặc điểm trình duyệt ảnh hưởng đến cửa sổ Khi trình duyệt mở tài liệu HTML thường tạo đối tượng window Tuy nhiên, tài liệu co sử dụng hay nhiều Frame trình duyệt tạo đối tượng window cho tài liệu ban đầu tạo thêm đối tượng window cho Frame Các đốI tượng window mớI tạo cửa sổ cửa sổ ban đầu, chúng bị ảnh hưởng bởI hành động xảy cửa sổ cha Nếu đóng cửa sổ ban đầu tất cửa sổ bị đóng • Thuộc tính Tên Mơ tả document Thể tài liệu HTML cửa sổ trình duyệt event Thể trạng thái kiện, chẳng hạn phần tử mà kiện xuất hiện, trạng thái phím bàn phím, vị trí chuột, trạng thái nút chuột history Lưu trữ thông tin URL viếng thăm location Lưu trữ thông tin URL name Thiết lập khôi phục tên window Frame 12/19 Các đối tượng trình duyệt JavaScript navigator Lưu trữ thơng tin trình duyệt screen Lưu trữ thơng tin kích cỡ dạng đầy đủ hình mà người dùng sử dụng status Thiết lập khôi phục thông báo trạng thái cửa sổ trình duyệt • Những phương thức Tên Mô tả Alert Hiển thị hộp chứa thông báo ứng dụng định nghĩa Blur Làm cho đối tượng focus kích hoạt kiện onblurt Close Đóng cửa sổ trình duyệt thời ứng dụng HTML Focus Đặt điều khiển focus thực thị đoạn lệnh kiện onload navigate Tải URL định vào cửa sổ thời open Mở cửa sổ tải tài liệu URL mở tài liệu trống khơng có URL định Các thuộc tính window, phương thức tập hợp tên từ khóa dùng riêng khơng dùng làm tên biến thủ tục thông thường Đối tượng Document Thể tài liệu HTML cửa sổ trình duyệt dùng để lấy thơng tin tài liệu, kiểm tra sửa đổi phần tử HTML văn tài liệu, vàxử lý kiện The Document Object alert(document.title); Kết quả: 13/19 Các đối tượng trình duyệt JavaScript Đối tượng trình duyệt Netscape • Các thuộc tính Tên Mơ tả aLinkColor Thiết lập hay lấy màu tất liên kết động tài liệu bgColor Thiết lập hay lấy màu đối tượng document Body Chỉ phần đầu phần cuối thân tài liệu fgColor Thiết lập hay lấy màu (văn bản) tài liệu linkColor Thiết lập hay lấy màu liên kết tài liệu location Chứa thông tin URL Title Chứa tiêu đề tài liệu URL Thiết lập hay lấy URL cho tài liệu hiên thời vlinkColor Thiết lập hay lấy màu liên kết mà người dùng viếng thăm • Các phương thức Tên Mơ tả Clear Xóa tài liệu thời Close Đóng luồng liệu xuất hiển thị liệu nhận Open Mở tài liệu để nhận liệu từ phương thức write writeln 14/19 Các đối tượng trình duyệt JavaScript Write Viết hay nhiều biểu thức HTML đến tài liệu cửa sổ định Writeln Viết hay nhiều biểu thức HTML theo sau dấu xuống dòng đến tài liệu cửa sổ định Đối tượng History Đối tượng cung cấp danh sách URL viếng thăm gần Bởi thông tin trangmà người dùng viếng thăm trước xem thơng tin cá nhân ĐốI tượng history khơng cho nhìn thấy URL mà ta duyệt qua Tuy nhiên, cung cấp phương thức giúp ta di chuyển danh sách trang duyệt trước Ví dụ phương thức back() đốI tượng history hiển thị trang tài liệu vừa mớI duyệt gần history.back(); Phương thức go(number) yêu cầu trình duyệt chuyển đến tài liệu xác định danh sách trang duyệt qua Nếu số âm, ví dụ history.go(-2) trình duyệt chuyển từ tài liệu thời đến tài liệu trước danh sách trang duyệt qua (ví dụ giống ta nhấn nút Back lần) Nếu số dương, trình duyệt chuyển từ tài liệu thời đến tài liệu sau danh sách trang duyệt qua Các phương thức Tên Mô tả back Nạp URL trước danh sách trang duyệt qua forward Nạp URL đứng sau URL tạI danh sách trang duyệt qua go Nạp URL xác định danh sách trang duyệt qua Đối tượng Location Đối tượng lưu thông tin URL Nó cung cấp phương thức cho phép URL tạI tảI lại • Các thuộc tính 15/19 Các đối tượng trình duyệt JavaScript Tên Mô tả Hash Thiết lập hay lấy phần liệu sau dấu # thuộc tính href host Thiết lập hay lấy tên máy chủ số cổng URL hostname Thiết lập hay lấy phân tên máy chủ URL href Thiết lập hay lấy tồn URL chuỗi • Các phương thức Tên Mô tả assign Nạp tài liệu HTML reload Nạp lại trang thời replace Thay tài liệu thời cách tải tài liệu khác vớI URL xác định Tóm tắt học • Sự kiện hành động xảy trang Web • Mỗi kiện gắn với đối tượng Event • Một kiện bắt đầu hành động điều kiện khởi tạo kiện kết thúc đáp ứng lại từ trình xử lý kiện • Tập hợp kiện tương ứng với phần tử trang khác phần mơ hình đối tượng tài liệu (DOM) khơng phải JavaScript • Khi kiện kích hoạt, đoạn mã JavaScript thực để đáp ứng lại kiện Phần mã lệnh gọi trình xử lý kiện • Trình duyệt ứng dụng sử dụng để hiển thị nội dung tài liệu HTML • Trình duyệt có số đối tượng truy cập sử dụng script • Đối tượng window thể cửa sổ trình duyệt • Tất đối tượng khác mơ hình DOM thừa kế từ đối tượng window truy cập thơng qua Ơn tập Sự kiện onClick hỗ trợ ◦ Textbox ◦ Button 16/19 Các đối tượng trình duyệt JavaScript ◦ radio button Sự kiện onChange xảy phần tử Form thay đổi Sự kiện onFocus thực phần tử form trở thành phần tử form thời Đúng/Sai Sự kiện tạo trỏ chuột di chuyển lên phần tử Đối tương _ thể cửa sổ trình duyệt sử dụng để lấy thông tin trạng thái cửa sổ _ trình bày tài liệu HTML cửa sổ trình duyệt sử dụng để lấy thông tin tài liệu kiểm tra sửa đổi phần tử HTML văn tài liệu, vàxử lý kiện Tự thực hành Viết chương trình để minh họa việc sử dụng kiện onClick hình bên dưới: • Click bên Textbox để kích hoạt kiện onFocus • Click bên ngồi Textbox để kích hoạt kiện onBlur 17/19 Các đối tượng trình duyệt JavaScript Viết chương trình để minh họa việc sử dụng kiện onClick hình bên dưới: • Click vào nút “Click me” để copy nhãn nút vào Textbox • Sau click vào nút, Thông tin hiển thị hình bên dưới: 18/19 Các đối tượng trình duyệt JavaScript 19/19 ... duyệt JavaScript Đối tượng window thể cửa sổ trình duyệt Tất đối tượng khác mơ hình kế thừa từ đối tượng window truy cập thơng qua đối tượng window Có thể có thêm đối tượng window khác Các đối tượng. .. Đối tượng trình duyệt IE Đối tượng trình duyệt Netscape 11/19 Các đối tượng trình duyệt JavaScript Mơ hình đối tượng (DOM) Một đặc điểm quan trọng JavaScript ngôn ngữ dựa đối tượng Điều hỗ trợ... chóng trình xử lý kiện u cầu Đối tượng trình duyệt thơng thường Trình duyệt ứng dụng dùng để hiển thị nội dung trang HTML Các trình duyệt cung cấp số đối tượng truy cập sử dụng script Đối tượng trình