HTML5 XP session 15(2) đối tượng trong javascript T8

https://www.youtube.com/channel/UCyZTnYDACl13tHjxCyvd3ew HTML 5 là phiên bản kế tiếp và là một phiên bản chuẩn mới.Phần lớn các trình duyệt đều hỗ trợ phần tử và giao diện lập trình ứng dụng (API Application Programming Interface) của HTML 5. HTML có khả năng mở rộng khi được sử dụng với JavaScript, hiển thị dữ liệu người dùng định nghĩa được yêu cầu mỗi khi trang web được tải trong trình duyệt.HTML động sử dụng JavaScript và CSS để làm cho các trang web trở lên động và chuyển đổi cảm quan (look and feelgiao diện) của các trang web.

Hàm Đối tượng (Functions and Objects) NexTGen Web Bài 15: Đối tượng JavaScript (JavaScript Objects) Mục tiêu học  Đối tượng trình duyệt   Đối tượng window  Đối tượng document   Mơ hình đối tượng tài liệu DOM (Document Object Model) Javascript Đối tượng form Các đối tượng trình duyệt khác  Đối tượng frame  Đối tượng history  Đối tượng navigator  Đối tượng location Building Dynamic Web Mơ hình đối tượng tài liệu (DOM)  DOM (Document Object Model) kỹ thuật sử dụng cho việc truy xuất thao tác phần tử HTML  Sử dụng phương thức, thuộc tính đối tượng mơ hình DOM bạn có thể:   Truy xuất đến phần tử HTML Và thay đổi cấu trúc trang HTML Nút (node)  Tất phần tử trang Web tổ chức cấu trúc phân cấp biểu diễn cho toàn tài liệu HTML  DOM duyệt toàn phần tử có trang HTML, coi chúng nút  Nút document nút biểu diễn cho toàn tài liệu HTML  Nút document gồm có nút phần tử (element node), nút thuộc tính (attribute node), nút văn (text node) document nút có cấp độ cao cịn nút văn có cấp độ thấp  Mỗi nút cấu trúc phân cấp hình nút cha bao gồm nhiều nút Nút (node)  Ví dụ Welcome Click here Introduction (The DOM as a Tree) Thuộc tính nút  Mỗi nút có thuộc tính Các thuộc tính thơng tin nút  Các thuộc tính nút gồm:   nodeName: tên nút, chứa tên thẻ dạng chữ in hoa nodeValue: đại diện cho phần văn bản(text) có chứa nút Thuộc tính có nút đại diện cho thuộc tính khơng có nút document nút phần tử  nodeType: Kiểu nút (nút document, nút phần tử, nút thuộc tính) Đối tượng window  Đối tượng window đại diện cho cửa sổ trình duyệt, sử dụng để truy xuất thông tin trạng thái cửa sổ, phiên  Tất đối tượng khác mơ hình DOM con, cháu đối tượng truy xuất thông qua đối tượng window window location screen frames document history forms all elements input textarea select navigator window , chúng Đối tượng window  Thuộc tính đối tượng window Thuộc tính defaultStatus Mơ tả Thiết lập lấy giá trị văn hiểu thị mặ định trạng thái cuả cửa sổ trình duyệt closed Xác định xem cửa sổ đóng chưa document Đại diện cho tài liệu HTML tải cửa sổ history Chứa danh sách URL viếng thăm location Chứa nội dung URL name Thiết lập lấy tên cửa sổ parent Lấy cửa số cha có chứa cửa sổ phần tử Đối tượng window  Phương thức đối tượng window  alert(): Hiển thị hộp thơng báo với nút OK  close(): Đóng cửa sổ  confirm(): Hiển thị hộp thoại thơng báo có nút OK Cancel Thường dùng muốn người dùng xác nhận lại vấn đề  createPopup(): Tạo cửa sổ Popup  focus(): Đặt tiêu điểm cho cửa sổ  print(): In nội dung có chứa bên phần tử Building Dynamic Web Đối tượng window  Phương thức đối tượng window  setInterval(“code”, milisecond): Phương thức dùng để gọi hàm định giá biểu thức lặp lặp lại sau khoảng thời gian (tính mili giây) [lang] cho biết ngơn ngữ kịch sử dụng viết phần “code  setTimeout(“function_name()”,milisecond,[lang]): Gọi thực hàm lần sau khoảng thời gian (tính mili giây)  open("URL", "windowName", [ "windowFeatures" ] ): Mở cửa sổ tải tài liệu URL mở tài liệu trống khơng có URL định Phương thức trả đối tượng cửa sổ mở Building Dynamic Web Trình xử lý kiện (Event Handling)  Liên kết trình xử lý kiện với đối tượng, phần tử HTML:  Trình xử lý kiện cho thẻ HTML: ví dụ: Building Dynamic Web Sự kiện onChange  Sự kiện onChange xảy nội dung phần tử text bị thay đổi thay đổi mục chọn phần tử select else alert ("Thank you"); } function checkNum(num) { if (num == "") { alert("Please enter a number"); return false; } if (isNaN (num)) { Please enter a number: alert("Please enter a numeric value"); return false; } Building Dynamic Web Sự kiện onChange Building Dynamic Web OnLoad/onSubmit  OnLoad   Sự kiện onLoad gửi đến đối tượng document tải xong tài liệu onSubmit  Sự kiện onSubmit phát sinh người dùng gửi form (sử dụng nút Submit) Sự kiện xảy trước form thật gửi Building Dynamic Web onResize - Example  onResize  Sự kiện kích hoạt kiện resize xảy ra, nghĩa người dùng script chỉnh kích thước cửa sổ hay frame Kết quả: window.onresize= notify; function notify() { alert("Window resized!"); } window.onresize= notify; Please resize the Building Dynamic Web Kết thúc © Aptech Ltd Tạo slide show javascript  Tạo slide show javascript  Bạn dùng javascript để tạo silde show (ảnh tự động thay đổi sau khoảng thời gian) trang HTML var imageList= new Array imageList[0]=new Image;imageList[0].src="451.JPG" imageList[1]=new Image;imageList[1].src="452.JPG" imageList[2]=new Image;imageList[2].src="453.JPG" imageList[3]=new Image;imageList[3].src="455.JPG" imageList[4]=new Image;imageList[4].src="457.JPG" imageList[5]=new Image;imageList[5].src="458.JPG" imageList[6]=new Image;imageList[6].src="459.JPG" Building Web Page Programming with HTML,DHTML & JavaScript/Session 8/ 40 of 21 Dynamic Web function slideShow(imageNumber) { document.slideShow.src=imageList[imageNumber].src imageNumber+=1 if (imageNumber