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.

Trang 1

Bài 15:

Đối tượng trong

JavaScript (JavaScript Objects)

NexTGen Web

Hàm và Đối tượng (Functions and Objects)

Trang 2

 Đối tượng trình duyệt

 Mô hình đối tượng tài liệu DOM (Document Object Model) trong Javascript

 Đối tượng window

 Đối tượng document

 Đố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 Sites / 2

of 28

Mục tiêu bài học

Trang 3

 DOM (Document Object Model) là kỹ thuật được sử dụng cho việc truy xuất và thao tác các phần tử

HTML

trong mô hình DOM bạn có thể:

 Truy xuất đến các phần tử HTML.

 Và có thể thay đổi cấu trúc

hiện tại của trang HTML.

Mô hình đối tượng tài liệu (DOM)

Trang 4

 Tất cả các phần tử trong một trang Web được tổ chức trong một cấu trúc phân cấp và biểu diễn cho toàn bộ tài liệu

 Mỗi nút trong cấu trúc phân cấp hình cây đều một nút cha và bao gồm

nhiều nút con.

Trang 6

 Mỗi nút đều có thuộc tính Các thuộc tính này thông tin về nút.

 Các thuộc tính của nút gồm:

Thuộc tính này chỉ có ở các nút đại diện cho thuộc tính không có ở nút document và nút phần tử.

tính)

Thuộc tính của nút

Trang 7

 Đối tượng window đại diện cho cửa sổ của trình duyệt,

có thể được sử dụng để truy xuất thông tin về trạng thái của cửa sổ, phiên bản

Đối tượng window

Trang 8

Thuộc tính Mô tả

defaultStatus Thiết lập hoặc lấy giá trị văn bản được hiểu

thị mặ định trên thanh trạng thái cuả cửa sổ trình duyệt.

closed Xác định xem cửa sổ đã được đóng chưa.

document Đại diện cho tài liệu HTML được tải trong cửa

sổ.

history Chứa danh sách các URL đã được viếng thăm.

location Chứa nội dung của URL hiện tại.

name Thiết lập hoặc lấy tên của cửa sổ.

parent Lấy cửa số cha có chứa cửa sổ và phần tử con.

 Thuộc tính của đối tượng window

Trang 9

 Phương thức của đối tượng window

 alert(): Hiển thị một hộp thông báo cùng với một nút OK

 close(): Đóng cửa sổ hiện tại

 confirm(): Hiển thị một hộp thoại thông báo có nút OK và Cancel Thường dùng khi

muốn người dùng xác nhận lại một vấn đề gì đó.

 createPopup(): Tạo một cửa sổ Popup.

 focus(): Đặt tiêu điểm cho cửa sổ hiện tại

 print(): In nội dung có chứa bên trong phần tử hiện tại.

Building Dynamic Web Sites / 9

of 28

Trang 10

 Phương thức của đối tượng window

 setInterval(“code”, milisecond): Phương thức được dùng để gọi một hàm hoặc định

giá một biểu thức lặp đi lặp lại sau một khoảng thời gian (tính bằng mili giây) [lang] cho biết ngôn ngữ kịch bản sử dụng viết trong phần “code

 setTimeout(“function_name()”,milisecond,[lang]): Gọi thực hiện hàm duy nhất một

lần sau khoảng thời gian (tính bằng mili giây)

 open("URL", "windowName", [ "windowFeatures" ] ): Mở cửa sổ mới và tải tài liệu

được chỉ ra bởi một URL hoặc mở một tài liệu trống nếu không có một URL nào được chỉ định Phương thức trả về đối tượng cửa sổ được mở.

Building Dynamic Web Sites /

10 of 28

Trang 11

 Ví dụ: Chữ chuyển động trên thanh trạng thái

11 of 28

str="Welcome to JavaScript ! ”;

function chuchuyendong() { window.status=str;

str=str.substr(1) + str.charAt(0);

} window.setInterval("chuchuyendong()",100);

</script>

//Tự động chuyển trang index.html sau 3 giây

Trang 12

document là đối tượng đại diện cho toàn bộ tài liệu

HTML

xuất đến các phần tử như link, anchor, …

BODY

Đối tượng document

Trang 13

 Các tập hợp (Collections) của đối tượng document

trong tài liệu.

tài liệu Mỗi form trong tập hợp có thể được truy xuất bằng chỉ số hoặc qua tên của nó.

(image) có trong tài liệu Mỗi ảnh trong tập hợp có thể được truy xuất bằng chỉ số hoặc qua tên của nó.

Trang 14

 Thuộc tính

 body: Trả về phần thân của tài liệu (phần tử body).

 cookie: thiết lập hoặc lấy tất cả các cookie có liên quan

đến tài liệu hiện tại.

 domain: lấy tên miền của tài liệu hiện tại.

 title: Thiết lập hoạc lấy tiêu đề của tài liệu.

 bgColor: Thiết lập hoặc lấy màu nền của tài liệu.

 fgColor: Thiết lập hoặc lấy màu văn bản trong tài liệu.

 URL: Thiết lập hoặc lấy url của tài liệu hiện hành

Trang 15

phần tử HTML thông qua tên Trả về một mảng các phần tử.

HTML bằng cách chỉ ra tên thẻ của chúng.

hoặc writeln().

Trang 16

 Form nhận dữ liệu từ người dùng và gửi về server.

 JavaScript cho phép bạn xử lý và kiểm tra tính hợp lệ của dữ liệu trước khi gửi về server.

 Trong một tài liệu HTML có thể có nhiều form.

 Mỗi đối tượng form đại diện cho một form trong trang

HTML.

Đối tượng form

Trang 17

 Thuộc tính

 Phương thức

Đối tượng form

Trang 18

<BODY onload=“initialize_form()”>

<form name=“frmLoginInf">

<h2 style="color:#000099; ">Login Information</h2> User Name:<input type="text" name=“txt1"> Password: <input name=“txt2" type="password" size="15"> Confirm Password: <input name="txt3" type="password" size="15"> Alternate E-mail ID:<input type="text" name="txt4">

<input type="reset" name="Submit2" value="Reset“ onclick=“reset_form()” >

Trang 19

 history là đối tượng chứa các tập các URL đã được người

dùng viếng thăm (visited) trong trình duyệt.

 Đối tượng history là một mảng, do đó có thể truy xuất đến

một URL cụ thể bằng cách sử dụng chỉ số của nó trong mảng.

 Thuộc tính length cho phép xác định được số lượng các URL

có trong danh sách history.

 back(): Lấy và hiển thị URL phía trước(previous) trong danh sách history.

 forward(): Lấy và hiển thị URL tiếp theo (next) trong dánha chs

Trang 20

 Đối tượng navigator chứa thông tin về trình duyệt được sử dụng phía

client.

 Thông tin về trình duyệt bao gồm tên trình duyệt, phiên bản,…

 Các thuộc tính của navigator

 appName: trả về tên của trình duyệt

 appVersion: trả về platform và phiên bản của trình duyệt.

 browserLanguage: trả về ngôn ngữ hiện tại của trình duyệt.

 cookieEnabled: trả về true/false Xác định xem cookie có được cho phép dùng

trong trình duyệt không.

 platform: trả về hệ điều hành nền (Win32, Win64) phía trình duyệt.

 Phương thức

 javaEnabled()

Đối tượng navigator

Trang 21

 Ví dụ về sử dụng thuộc tính và phương thức của đối tượng navigator

Đối tượng navigator

document.write("<p>Browser name: ") document.write( navigator.appName + "</p>") document.write("<p>Browser version: ")

document.write( navigator.appVersion + "</p>") document.write("<p>Browser language: ")

document.write( navigator.browserLanguage +

"</p>") document.write("<p>Cookie is enabled: ") document.write( navigator.cookieEnabled + "</p>") document.write("<p>Operating System platform: ") document.write( navigator.platform + "</p>")

if ( navigator.javaEnabled() ) document.write("<p>java is enabled</p> ")

</SCRIPT>

Trang 22

 Đối tượng location cho phép truy xuất thông tin của

URL sau đã được tải hoàn toàn vào trình duyệt

tính sau:

 hash: Lấy hoặc thiết lập để chuyển đến một vị trí được

đánh dấu bằng thẻ neo (anchor) trong trang.

Đối tượng location

Trang 23

 Thuộc tính

 host: chỉ ra hoặc lấy tên host và số cổng (port) của URL.

 hostname: chỉ ra hoặc lấy tên host của URL.

 href: chỉ ra hoặc lấy toàn bộ URL.

 pathname: chỉ ra hoặc lấy đường dẫn của URL.

 port: chỉ ra hoặc lấy cổng của URL.

Đối tượng location

Trang 24

 Phương thức

 assign(URL): Tải một tài liệu mới với URL được chỉ ra.

 reload(): Tải lại tài liệu hiện tại bằng cách gửi lại yêu cầu

Trang 25

25 of 22

Sự kiện (Event)

trang Web

chuột, di chuyển chuột, gõ phím…

là đối tượng cung cấp các thông tin về sự kiện như:

 Loại sự kiện

 Vị trí của con trỏ tại thời điểm xảy ra sự kiện

xử lý sự kiện (Nó được gửi tới trình xử lý sự kiện

như một tham số)

Trang 26

 Khi một sự kiện xảy ra, một đoạn mã lệnh Javascript được thực hiện Đoạn mã này được gọi là trình xử

lý sự kiện Đoạn mã có thể là các câu lệnh đơn hoặc lời gọi hàm

26 of 22

Trình xử lý sự kiện (Event

Handler)

<INPUT TYPE="button“ NAME="docode" onClick="DoOnClick();">

Trang 27

Trang 28

 Sự kiện được kích hoạt.

 Trình xử lý sự kiện tương ứng được gọi,

thực hiện các hành động và trả về điều khiển cho chương trình.

Trang 29

29 of 22

Sự kiện bàn phím (Keyboard

Event)

xuống, hoặc được nhả ra Các sự kiện bàn phím

gồm có:

 onkeydown: xảy ra khi một phím bị nhấn xuống.

 onkeyup: xảy ra khi một phím được nhả ra.

 onkeypress: xảy ra khi một phím được nhấn và nhả

Trang 30

Trang 31

31 of 22

Sự kiện click chuột (Mouse Click Event)

 onmousedown: Xảy ra khi nút chuột được nhấn xuống.

 onmouseup: Xảy ra khi nút chuột được nhả ra.

 onclick: Xảy ra khi nút chuột được nhấn và thả ra.

 ondblclick: Xảy ra khi nhấn đúp chuột.

 onmousemove: Xảy ra khi con trỏ chuột di chuyển từ vị trí

Trang 32

Trang 33

33 of 22

Sự kiện tiêu điểm(focus), và lựa chọn (selection)

tửcủa form trở thành phần tử hiện thời Chỉ khi

phần tử nhận được focus nó mới chấp nhận dữ liệu nhập từ người dùng

dùng rời tiêu điểm khỏi phần tử form

hoặc textarea bị thay đổi

(move)

Trang 34

Name:<input type="text" name="txtName" onFocus="showStyle(this);" onBlur="hideStyle(this)"

</form>

</script>

Trang 35

35 of 22

Sự kiện onChange

thay đổi hoặc khi thay đổi mục chọn của phần tử select

Please enter a number:

<INPUT type = text size = 5 onChange="checkNum(this.value)

">

</FORM>

</BODY>

</HTML>

Trang 36

36 of 22

Sự kiện onChange

Trang 37

37 of 22

OnLoad/onSubmit

tải xong tài liệu

 Sự kiện onSubmit phát sinh bất cứ khi nào người dùng gửi form đi (sử dụng nút Submit) Sự kiện xảy ra trước khi form thật sự được gửi đi.

Trang 38

38 of 22

onResize - Example

 onResize

thước cửa sổ hay frame.

Trang 39

© Aptech Ltd

Kết thúc

Trang 40

 Tạo slide show trong javascript

 Bạn có thể dùng javascript để tạo một silde show (ảnh tự động thay đổi sau khoảng thời gian) trong trang HTML của mình

40 of 28

Tạo slide show trong javascript

Web Page Programming with HTML,DHTML & JavaScript/Session 8/ 40

of 21

Trang 41

function slideShow(imageNumber)

{ document.slideShow.src=imageList[imageNumber].src

imageNumber+=1

if (imageNumber<imageList.length) {

window.setTimeout("slideShow("+imageNumber+“)", 2000) }

else { imageNumber=0 window.setTimeout("slideShow("+imageNumber+“)", 2000) }

}

</script>

</HEAD>

<BODY bgcolor=#3A6EA5 onload="slideShow(0)" >

<img src="451.JPG" name="slideShow" width=200 height=200>

</BODY> </HTML>

41 of 28

Web Page Programming with HTML,DHTML & JavaScript/Session 8/ 41

of 21

Định dạng
Số trang	41
Dung lượng	660,16 KB