Session15 concepts HTML Lập Trình Web Tĩnh

Lập trình web tĩnh Html dành cho người mới bắt đầu học lập trình web Mình khuyên các bạn nên học đầy đủ từ bài số 1 trở đi Và kết hợp với video khi sử dụng slide nhưng do video mình chưa có thời gia up lên khi nào có mình sẽ cho link lên mục này

Chương 15 Các đối tượng trình duyệt JavaScript Mục tiêu: Kết thúc chương này, bạn có thể:  Làm việc với kiện JavaScript  Làm việc với đối tượng  Thuộc tính  Phương thức Phần giới thiệu Các kiện kết hành động người dùng 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, học tất đối tượng 17.1 Đố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 Chẳng hạn, người dùng nhấp chuột, kiện onmousedown phát sinh Đố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  Một số nút chuột nhấn  Một trường chứa 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 cửa sổ Nó sử dụng phần trình xử lý kiện Vòng đời kiện bắt đầu hành động điều kiện khởi tạo kiện kết thúc với đáp ứng cuối trình xử lý kiện Vòng đời kiện tiêu biểu 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 thực thi Trình xử lý kiện tương ứng gọi { PAGE } Trình xử lý kiện thực hành động trả điều khiển cho chương trình 17.2 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ông giống 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 Ví dụ 1: 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 17.1 { PAGE } Hình 17.1: 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ử hoà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 hoàn tất, người dùng thoát khỏi textbox Ví dụ 2: Please enter a number: Hình 17.2(1) 17.2(2) minh hoạ kết đoạn mã ví dụ Hình 17.2: Kết ví dụ 2(1) Nếu nhập vào giá trị số: { PAGE } Hình 17.2: Kết ví dụ 2(2)  onFocus 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 chấp nhận liệu nhập vào 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 (quay vòng tới lui danh sách 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 thay đổi, kiện onChange kích hoạt Ví dụ 3: Khi textbox nhận focus, màu chuyển sang DIMGRAY, focus (blur), màu chuyển sang AQUA { PAGE } Hình 17.3: Kết ví dụ – Blur (hình trái) and focus (hình phải)  onMouseOver Sự kiện onMouseOver tạo trỏ di chuyển lên phần tử  onMouseOut Sự kiện onMouseOut tạo trỏ di chuyển khỏi phần tử Ví dụ 4: var num =0 function showLink(num) { if (num==1) { document.forms[0].elements[0].value= "You selected Aptech"; } if (num==2) { document.forms[0].elements[0].value = "You selected Asset"; } if (num==3) { document.forms[0].elements[0].value = "You selected Arena"; } } { PAGE } have have have Sesame!" Thay sử dụng nhiều câu lệnh JavaScript, hàm giúp cho việc thiết kế chương trình tốt Chúng ta gọi hàm cần thiết Hơn hàm dùng phần tử khác Câu lệnh gán hàm greeting() cho trình xử lý kiện nạp cửa sổ Thuộc tính trình xử lý kiện phải gán cho tham chiếu hàm greeting thay gọi hàm greeting() Ví dụ My Home Page function greeting() { alert("Welcome to my world"); } { PAGE } Kết quả: Hình 17.8: Kết ví dụ  Trình xử lý kiện thuộc tính Chúng ta gán hàm cho trình xử lý kiện đối tượng Cú pháp sau: object.eventhandler = function; Ví dụ, window.onload = greeting; Chúng ta xem ví dụ sử dụng trình xử lý kiện thuộc tính: Ví dụ My Home Page Kết tương tự hình 17.8 Hiệu kỹ thuật trình xử lý kiện linh hoạt Chúng ta hiệu chỉnh trình xử lý kiện yêu cầu { PAGE } 17.4 Đố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 Lưu ý: Netscape Microsoft phát triển mô hình đối tượng tài liệu riêng Hai mô hình không tuơng thích với Đố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 khám phá đố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 Window Object Document Object Event Frames History Location Navigator Screen Hình 17.9: Đối tượng trình duyệt IE { PAGE } Window Navigator Document Plugin Frame Mime type Location History Hình 17.10: Đối tượng trình duyệt Netscape 17.4.1 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 hoàn toà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 thông tin xem thuộc tính thành phần chức xem phương thức Một thuộc tính giá trị đối tượng Tất đối tượng JavaScript chuẩn có thuộc tính Ví dụ: Document.bgcolor 17.4.2 Đố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 thong thường tạo đối tượng window Tuy nhiên, tài liệu định nghĩa hay nhiều Frame trình duyệt tạo đối tượng window cho tài liệu ban đầu thêm đối tượng window cho Frame Các đối tượng phụ cửa sổ cửa sổ ban đầu bị ảnh hưởng hành động xuất cửa sổ ban đầu Ví dụ, đóng cửa sổ ban đầu tất cửa sổ bị đóng Các thuộc tính Tên document event Mô tả Thể tài liệu HTML cửa sổ trình duyệt Thể trạng thái kiện, chẳng hạn phần tử mà { PAGE } history location name navigator screen status 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 Lưu trữ thông tin URL viếng thăm Lưu trữ thông tin URL Thiết lập khôi phục tên window Frame Lưu trữ thông tin trình duyệt Lưu trữ thông tin kích cỡ dạng đầy đủ hình mà người dùng sử dụng 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 Alert Blur Close Focus navigate open Mô tả Hiển thị hộp chứa thông báo ứng dụng định nghĩa{INCLUDEPICTURE " / / / / /workshop/graphics/method.gif" \* MERGEFORMATINET \d \z"} Làm cho đối tượng tiêu điểm bắt đầu kiện onblurt Đóng cửa sổ trình duyệt thời ứng dụng HTML Làm cho việc điều khiển nhận tiêu điểm thực thi mã lệnh kiện onfocus Tải URL định vào cửa sổ thời Mở cửa sổ tải tài liệu URL mở tài liệu trống URL định Lưu ý: 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 17.4.3 Đố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 để xử lý kiện Ví dụ 10 The Document Object alert(document.title); Kết quả: { PAGE } Hình 17.11: Đối tượng trình duyệt Netscape Các thuộc tính Tên aLinkColor bgColor Body fgColor linkColor location Title URL vlinkColor Mô tả Thiết lập hay lấy màu tất liên kết động tài liệu{INCLUDEPICTURE " / / / / /workshop/graphics/prop_rw.gif" \* MERGEFORMATINET \d \z"} Thiết lập hay lấy màu đối tượng document Chỉ phần đầu phần cuối thân tài liệu Thiết lập hay lấy màu (văn bản) tài liệu Thiết lập hay lấy màu liên kết tài liệu Chứa thông tin URL Chứa tiêu đề tài liệu Thiết lập hay lấy URL cho tài liệu hiên thời 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 clear close open write writeln Mô tả Xóa tài liệu thời Đóng luồng liệu xuất buột liệu gởi hiển thị Mở tài liệu để thu thập liệu xuất phương thức write writeln Viết hay nhiều biểu thức HTML đến tài liệu cửa sổ định 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 17.4.4 Đối tượng History { PAGE } Đối tượng cung cấp danh sách URL viếng thăm gần Bởi thông tin trang thực tế mà người dùng viếng thăm trước chương xem thông tin mật Ít liên quan đến JavaScript trang thời, đối tượng history không cho phép thật thấy URL hiển thị Tuy nhiên, đối tượng History cho phương thức cho phép di chuyển qua danh sách trang trước Ví dụ, phương thức "back()" đối tượng History làm cho cửa sổ hiển thị tài liệu trước đó: history.back(); Phương thức go(number) yêu cầu trình duyệt chuyển đến tài liệu cụ thể danh sách lịch sử hay không Nếu số âm, ví dụ history.go(-2) việc di chuyển di chuyển từ tài liệu thời đến tài liệu danh sách lịch sử trước (ví dụ giống cách nhấn nút Back lần) Nếu số dương, việc di chuyển từ tài liệu thời đến tài liệu nhập gần danh sách lịch sử Các phương thức Tên back forward go Mô tả Nạp URL trước danh sách lịch sử Nạp URL danh sách lịch sửLoads the next URL in the History list Nạp URL từ danh sách lịch sử 17.4.5 Đối tượng Location Đối tượng trì thông tin URL Nó cung cấp phương thức làm cho URL cửa sổ tải lại Các thuộc tính Tên Hash host hostname href Mô tả Thiết lập hay lấy phần neo URL (nếu có) Thiết lập hay lấy tên máy chủ số cổng URL Thiết lập hay lấy phân tên máy chủ URL Thiết lập hay lấy toàn URL chuỗi Các phương thức Tên assign reload replace { PAGE } Mô tả Nạp tài liệu HTML Nạp lại trang thời Thay tài liệu thời cách tải tài liệu URL Tổng kết  Sự kiện hành động xảy trang Web  Mỗi kiện kết hợp với đối tượng Event  Một kiện có vòng đời 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 kiện kết hợp với phần tử trang khác thành phần mô hình đối tượng tài liệu (DOM) JavaScript  Khi kiện khởi tạo, định đ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 thừa kế từ đối tượng window truy cập thông qua { PAGE } Củng cố kiến thức Sự kiện onClick hỗ trợ a Textbox b Button c radio button Sự kiện onChange xảy phần tử 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 để xử lý kiện { PAGE } Bài tập củng cố Viết chương trình để giải thích việc sử dụng kiện onBlur onFocus hình dưới: { EMBED PBrush }   Click bên Textbox thực kiện onFocus Click bên Textbox thực kiện onBlur { EMBED PBrush } Viết chương trình để giải thích việc sử dụng kiện onClick hình bên dưới: { EMBED PBrush }   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: { EMBED PBrush } { PAGE } [...]... window.onload = greeting; // > < /HTML> Kết quả sẽ tương tự như hình 17.8 Hiệu quả của kỹ thuật này là những trình xử lý sự kiện linh hoạt hơn Chúng ta có thể hiệu chỉnh trình xử lý sự kiện khi được yêu cầu { PAGE } 17.4 Đối tượng trình duyệt thông thường Trình duyệt là một ứng dụng được dùng để hiển thị nội dung của một trang HTML Các trình duyệt cũng cung cấp một số đối tượng có thể... tượng Document Thể hiện tài liệu HTML trong một cửa sổ trình duyệt và được dùng để lấy thông tin về tài liệu, kiểm tra và sửa đổi các phần tử HTML và văn bản trong tài liệu để xử lý sự kiện Ví dụ 10 The Document Object alert(document.title); < /HTML> Kết quả: { PAGE } Hình 17.11: Đối tượng trình duyệt Netscape Các thuộc tính... trên một phần tử 5 Đối tương _ thể hiện cửa sổ của trình duyệt và có thể được sử dụng để lấy thông tin về trạng thái của cửa sổ 6 _ trình bày tài liệu HTML trong cửa sổ trình duyệt và được sử dụng để lấy thông tin về tài liệu kiểm tra và sửa đổi các phần tử HTML và văn bản trong tài liệu để xử lý sự kiện { PAGE } Bài tập củng cố 1 Viết chương trình để giải thích việc sử dụng sự kiện onBlur và onFocus... cửa sổ được tải lại Các thuộc tính Tên Hash host hostname href Mô tả Thiết lập hay lấy phần neo của URL (nếu có) Thiết lập hay lấy tên máy chủ và số cổng của URL Thiết lập hay lấy phân tên của máy chủ của URL Thiết lập hay lấy toàn bộ URL như một chuỗi Các phương thức Tên assign reload replace { PAGE } Mô tả Nạp một tài liệu HTML mới Nạp lại một trang hiện thời Thay thế tài liệu hiện thời bằng cách... đoạn mã JavaScript sẽ được thực hiện để đáp ứng lại sự kiện Phần mã lệnh này được gọi là trình xử lý sự kiện  Trình duyệt là một ứng dụng được sử dụng để hiển thị nội dung của một tài liệu HTML  Trình duyệt cũng có một số đối tượng có thể được truy cập và sử dụng trong script  Đối tượng window thể hiện cửa sổ của trình duyệt  Tất cả các đối tượng khác trong mô hình thừa kế từ đối tượng window và được... hiện các cửa sổ của trình duyệt và có thể được dùng để lấy thông tin về trạng thái của cửa sổ Nó cũng được sử dụng để hiển thị đối tượng document và truy cập các sự kiện xảy ra trong cửa sổ và những đặc điểm của trình duyệt ảnh hưởng đến cửa sổ Khi trình duyệt mở tài liệu HTML thong thường nó tạo ra một đối tượng window Tuy nhiên, nếu một tài liệu định nghĩa một hay nhiều Frame thì trình duyệt tạo ra...Kết quả: Hình 17.8: Kết quả ví dụ 8  Trình xử lý sự kiện như là những thuộc tính Chúng ta cũng có thể gán một hàm cho một trình xử lý sự kiện của một đối tượng Cú pháp như sau: object.eventhandler = function; Ví dụ, window.onload = greeting; Chúng ta xem ví dụ 1 và sử dụng trình xử lý sự kiện như những thuộc tính: Ví dụ 9 My Home Page ... số đối tượng có thể được truy cập và sử dụng trong script Đối tượng trình duyệt cũng hoạt động như các đối tượng lưu chứa đối với phần tử HTML trong một trang Web Lưu ý: Netscape và Microsoft đã phát triển mô hình đối tượng tài liệu riêng của mình Hai mô hình này có thể không tuơng thích với nhau Đối tượng window thể hiện cửa sổ của trình duyệt Tất cả những đối tượng khác trong mô hình được kế thừa... linkColor location Title URL vlinkColor Mô tả Thiết lập hay lấy màu của tất cả các liên kết động trong tài liệu{INCLUDEPICTURE " / / / / /workshop/graphics/prop_rw.gif" \* MERGEFORMATINET \d \z"} Thiết lập hay lấy màu nền của đối tượng document Chỉ ra phần đầu và phần cuối của thân tài liệu Thiết lập hay lấy màu (văn bản) nền trên cùng của tài liệu Thiết lập hay lấy màu của các liên kết tài liệu Chứa các... tiêu đề của tài liệu Thiết lập hay lấy URL cho tài liệu hiên thời Thiết lập hay lấy màu của các liên kết mà người dùng đã viếng thăm Các phương thức Tên clear close open write writeln Mô tả Xóa tài liệu hiện thời Đóng một luồng dữ liệu xuất và buột dữ liệu gởi đi hiển thị Mở một tài liệu để thu thập dữ liệu xuất ra của phương thức write hoặc writeln Viết một hay nhiều biểu thức HTML đến một tài liệu trong