html dom html document object model

Mỗi chuỗi trong JavaScript là một đối tượng, gồm các thuộc tính và phương thức thực hiện trên chuỗi, đó là các phương thức tìm kiếm chuỗi, trích chuỗi con và áp[r]

(1)

HTML DOM

-HTML Document Object Model

(2)

Giới thiệu

 HTML DOM định nghĩa chuẩn truy cập xử lý tài liệu HTML

 HTML DOM :

 Một mơ hình đối tượng chuẩn cho HTML  Một giao diện lập trình cho HTML

 Độc lập với ngôn ngữ platform

(3)

• Trong DOM, thứ tài liệu HTML xem

là node

– Toàn tài liệu HTML document node – Mỗi thẻ HTML element node

(4)

Ví dụ DOM

<title>DOM Tutorial</title> </head>

<body>

<h1>DOM Lesson one</h1> <p>Hello world!</p>

</body> </html>

 Node gốc tài liệu <html>

 Node <html> có node là: <head> <body>  Trong <head> có node : <title>

(5)

(6)

HTML DOM: thuộc tính & phương thức

 Mơ hình DOM xem tập đối tượng

node

 Các đối tượng truy xuất Javascript

hoặc ngơn ngữ lập trình khác

 Một số thuộc tính đối tượng DOM

* x.innerHTML - the inner text value of x (a HTML element)

* x.nodeName - the name of x

* x.nodeValue - the value of x

* x.parentNode - the parent node of x

* x.childNodes - the child nodes of x

(7)

HTML DOM: thuộc tính & phương thức

 Các phương thức đối tượng DOM

* x.getElementById(id) - get the element with a

specified id

* x.getElementsByTagName(name) - get all elements with a specified tag name

* x.appendChild(node) - insert a child node to x

* x.removeChild(node) - remove a child node from x

 Sử dụng phương thức, thuộc tính ==> truy cập, thay đổi

(8)

 Ví dụ:

<p id="p1">Hello World!</p>

document.getElementById("p1").innerHTML="New text!"; </script>

(9)

HTML DOM: Sự kiện

 Ví dụ:

* chuột nhấn

* Một trang web hình ảnh tải

* Chuột di chuyển qua điểm trang web

* submit form

(10)

HTML DOM: Sự kiện

 onload, onUnload

 onFocus, onBlur ,onChange

 onMouseOver ,onMouseOut

<a href="http://www.abc.com"

onmouseover="alert('An onMouseOver event');return false">

(11)

ĐỐI TƯỢNG JAVASCRIPT VÀ DOM

(12)

ĐỐI TƯỢNG JAVASCRIPT VÀ DOM

− Ở mức đối tượng window biểu thị cho khung hay cửa sổ trình duyệt, phần tử lại đối tượng window

− Để truy xuất đến đối tượng trình duyệt thay đổi liệu cho phần tử dùng thuộc tính ID , đối tượng trang có ID nhất.

- Muốn truy cập vào đối tượng phải truy cập vào đối tượng chứa trước, dùng dấu chấm (.) để phân cách giữa đối tượng Tuy nhiên ta bỏ qua đối tượng window thao tác cửa sổ hành

(13)

Cách xây dựng đối tượng mới: Gồm bước

a) Bước 1: Định nghĩa đối tượng cách xây dựng hàm

cho đối tượng gồm phương thức thuộc tính cho đối tượng đó.

function Object(List Parameter) {

this.property1= Parameter1; this.property2= Parameter2; …

this.method1=functionName1; this.method2=functionName2; …

}

(14)

Trong

− Từ khố this để tham chiếu đến đối tượng tạo − Câu lệnh this.property1= Parameter1: gán giá trị

Parameter1 cho thuộc tính property1

− Tương tự: muốn xâydựng phương thức cho đối tượng gán phương thức cho hàm định nghĩa sẵn

this.method1=FunctionName1;

a) Bước 2: Tạo instance cho đối tượng,

var obj=new Object();

 Truy cập thay đổi g/ trị thuộc tính:

obj.property

 Sử dụng phương thức :

(15)

CÁC ĐỐI TƯỢNG CÓ SẲN TRONG JAVASRIPT

1. Đối tượng Array(): Dùng để lưu trữ nhiều giá trị với tên gọi Trong Javascript đối

tượng mảng chứa thành phần mang kiểu giá trị khác Một mảng có n phần tử được đánh số từ đến n-1.

− Mỗi phần tử mảng phân biệt qua

số, dựa vào số ta truy cập thay đổi giá trị phần tử mảng a) Khởi tạo mảng:

Dùng từ khóa new để khởi tạo mảng

(16)

Ví dụ1:

var arr= new Array()

arr[0]= "thu hai"; arr[1]= "Thu ba"; arr[2]= "Thu tu"; arr[3]= "Thu nam"; arr[4]= "Thu sau"; arr[5]= "Thu bay"; for(i=0; i<=5;i++)

(17)

Ví dụ 2:

var famname = new Array("Jan

Egil","Tove","Hege","Stale","Kai Jim","Borge")

for (i=0; i<famname.length; i++) {

document.write(famname[i] + "<br>") }

(18)

Thuộc tính phương thức Array:

length: số phần tử mảng

concat() : trả mảng phần tử nhập từ mảng lại

join(): trả chuỗi bao gồm tất phần tử mảng

reverse() : trả mảng phần tử theo thứ tự ngược

slice(begin [,end]) Trả mảng phần tử bắt đầu từ phần tử thứ begin đến end

(19)

Đối tượng Date() : Cung cấp thông tin ngày, giờ môi trường client Dùng thiết lập ngày tháng năm hành trang web

Cách khai báo: Có cách khai báo

Cách 1: Khai báo khởi tạo

var variableName= new Date(“month, day, year, hours : minutes : seconds”)

hoặc:

var variableName=

(20)

hoặc:

var variableName= new Date(year,month, day)

var variableName= new Date("Month, dd, yyyy hh:mm:ss")

var variableName= new Date("Month, dd, yyyy")

var variableName= new Date(yy,mm,dd,hh,mm,ss)

var variableName= new Date(yy,mm,dd)

var variableName= new Date(milliseconds)

variableName bi n dùng đ l u tr thông tin ngày tháng ế ể ư ữ

(21)

Cách 2: Khai báo ngày hành

var variableName=new Date()

(22)

Các phương thức đối tượng Date():

Để truy xuất phương thức đối tượng dùng cú pháp

variableName.Method()

Phương thức Mô tả

Date() trả đối tượng date

getDate() Trả giá trị ngày ( số nguyên từ 1-31) tháng

getDay() Trả giá trị ngày tuần ( số nguyên từ 0-6 Sunday=0)

getMonth() Trả tháng năm (from 0-11 0=January, 1=February)

getFullYear() Trả giá trị năm (bốn số ) getYear() Trả giá trị năm (hai số )

(23)

getMinutes() Trả phút hệ thống (từ 0-59) getSeconds() Trả giây hệ thống (từ 0-59) getMilliseconds() Trả giá trị millisecond from 0-999)

(24)

Ví dụ:

d.setFullYear(2008)

document.write(d.getFullYear()+"<br>") </script>

Ví dụ:

function Ngay()

{

var day=new Date();

var w,m,d,y;

(25)

arrday[0]= “chu nhat”; arrday[1]= “Thu hai ”; arrday[2]= “Thu ba ”; arrday[3]= “Thu tu”; arrday[4]= “Thu nam ”; arrday[5]= “Thu sau”; arrday[6]= “Thu Bay”;

w=day.getDay(); d=day.getDate();

m=day.getMonth()+1; y=day.getFullYear();

document.write(“Hom nay:”+arrday[w]+” “+d+” thang “+m+ “ nam “ +y); }

</script></head> <body>

(26)

1. Đối tượng String()

Mỗi chuỗi JavaScript đối tượng, gồm thuộc tính phương thức thực trên chuỗi, phương thức tìm kiếm chuỗi, trích chuỗi áp dụng thẻ HTML vào nội dung chuỗi.

a) Cách khai báo đối tượng String

var stringVariable=new String() Ví dụ:

(27)

a) Thuộc tính Srting():

 Length: dùng để xác định chiều dài chuổi Các ký tự

trong chuổi đánh số từ đến Length-1

− Cách tham chiếu đến thuộc tính length đối tựơng String():

 StringLength=stringVariable.length  StringLength=”This is a string”.length

b) Các phương thức String:Các phương thức

(28)

Phương thức Mơ tả Ví dụ anchor("name") Tham số name thuộc tính NAME

tag <A> str.anchor(“name”) big() Trả chuỗi đặt cặp thẻ <big> str.big()

bold() Trả chuỗi in đậm str.bold() charAt(index) Trả ký tự thứ index chuỗi index

từ đến str.length-1 str.charAt(0)

concat() Nối chuổi

fontcolor() Trả chuỗi với màu xác

(29)

indexOf(“str”,

[fromindex]) Trả vị trí tìm thấy chuỗi “str” bắt đầu tìm từ vị trí fromindex Nếu khơng có fromindex tìm từ vị trí Nếu khơng tìm thấy hàm trả giá trị -1

italics() Trả chuỗi in nghiêng

lastIndexOf(“str”) Trả vị trí cuối tìm thấy chuỗi “str”, tìm từ trái qua phải Nếu khơng tìm thấy hàm trả giá trị -1

link() Trả chuỗi liên kết

match() Tương tự hàm indexOf lastindexOf, phương thức trả chuỗi cụ thể khơng tìm thấy trả giá trị "null"

(30)

search(‘str’) Trả giá trị vị trí chuỗi tìm thấy chuỗi cha, khơng tìm thấy trả giá trị -1

slice(index) Trả chuỗi cắt từ chuỗi mẹ vị trí index

small() Trả chuỗi có kích thước nhỏ

strike() Trả chuỗi gạnh ngang qua thân chuỗi

(31)

substr(start,length) Trả chuỗi vị trí start có chiều dài length khơng có start xem start=0

Str.substr(0,2)=”Th”

substring(Start,end) Tách chuỗi từ chuỗi Bắt đầu từ số start đến end

Nếu Start<end, chuỗi trả từ start đến end-1

Nếu end<start, chuỗi trả từ end đến start

Nếu start=end chuỗi trả null sup() Trả chuỗi kiểu superscript

(32)

Ví dụ:

var str=“Tr ng Đ i H c Tôn Đ c Th ng"ườ ạ ọ ứ ắ

document.write("<p>" + str + "</p>")

document.write(“Chieu dai cua chuoi la : “+

(33)

Ví dụ Phương thức indexOf

var pos=str.indexOf("School")

if (pos>=0) {

document.write("School found at position: ") document.write(pos + "<br />")

}

else {

document.write("School not found!") }

(34)

Ví dụ:

var st=new String()

st="KHOA CONG NGHE THONG TIN"

document.write(st.lastIndexOf("N")+"<br>") document.write(st.link()+"<br>")

document.write(st.match(“THONG TIN”)+"<br>")

document.write(st.replace("KHOACONGNGHETHONG TIN","KHOA CNTT")+"<br>")

(35)

Đối tượng Math()

Đối tượng Math() cung cấp hàm phương thức cần thiết để thực phép tốn số học Khơng cần phải tạo đối tượng

Math() mà sử dụng trực tiếp đối

tượng này

a) Các phương thức Math(): Cú pháp chung:

(36)

Phương thức Mô tả

abs(x) Trả giá trị tuyệt đối biến x acos(x) Trả giá trị arccosine x

ceil(x) Trả số nguyên lớn x floor(x) Trả số nguyên nhỏ x log(x) Trả giá trị log x

max(x,y) Trả giá trị lớn hai số x y min(x,y) Trả giá trị nhỏ hai số x y pow(x,y) Trả giá trị x lũy thừa y

random() Trả giá trị số ngẫu nhiên từ đến round(x) Làm tròn số x

(37)

Ví dụ:

var n= -136.8 , m=136.8

document.write("abs(-136.8) = " + Math.abs(n) +"<br>") document.write("ceil(136.8) = " + Math.ceil(m) +"<br>")

document.write("floor (136.8) = " + Math.floor(m) +"<br>") document.write("pow (2,3) = "+ Math.pow(2,3)+"<br>")

document.write("Mot so ngau nhien <=5 : " + Math.random()*5 +"<br>")

(38)

Ví dụ:

Viết chương trình tạo nút đổi hình (play) nút stop để ngưng </head><script>

var idq;

function play() {

var arrhinh= new Array();

arrhinh[0]= " /images/h1.jpg"; arrhinh[1]= " /images/h2.jpg"; arrhinh[2]= " /images/h3.jpg"; arrhinh[3]= " /images/h4.jpg"; arrhinh[4]= " /images/h5.jpg"; arrhinh[5]= " /images/h6.jpg";

var i=Math.round(Math.random()*4)

idhinh.src=arrhinh[i];

idq=setTimeout(“play()”,1000);

(39)

function stop() {

clearTimeout(idq); }

</script> </head> <body>

</form>

(40)

1. Đối tượng document:

Đối tượng document cung cấp thuộc tính phương thức để làm việc với toàn tài liệu

hiện hành gồm: form, liên kết, hình ảnh, tiêu đề, vị trí hành, màu hành…

(41)

Thuộc tính Mơ tả

alinkcolor Thiết lập trả giá trị màu liên kết xem tài liệu

bgcolor Thiết lập trả giá trị màu tài liệu cookie Chứa giá trị cookies dành cho tài liệu hành domain Trả giá trị tên miền máy chủ chứa document

fgcolor Thiết lập trả giá trị màu chữ tài liệu

(42)

linkcolor Thiết lập trả giá trị màu liên kết tài liệu

location mở trang web

referrer Returns the URL of the document that loaded the current document

title Trả giá trị tựa đề tài liệu url Trả đường dẫn củ tài liệu hành

(43)

Phương thức Mơ tả

clear() Xóa tài liệu

close() Đóng tài liệu

focus() Đưa trỏ đối tượng trang

open([“mimetype”]) Mở stream để thu thập liệu phương thức write writeln

write("str") viết chuỗi vào tài liệu

writeln("str") viết chuỗi vào tài liệu xuống dòng

(44)

(45)

1. Đối tượng trình duyệt (Navigator Object)

Đối tượng trình duyệt chứa đựng thơng tin trình duyệt web client.

Thuộc tính Mơ tả

appName Tên trình duyệt

appVersion Phiên trình duyệt cookieEnabled

platform Nền hệ điều hành

(46)

Ví dụ:

<HTML>

<HEAD><TITLE> Navigator Object Exemple </TITLE>

document.write("appCodeName = "+navigator.appCodeName + "<BR>");

document.write("appName = "+navigator.appName + "<BR>");

document.write("appVersion = "+navigator.appVersion + "<BR>"); document.write("userAgent = "+navigator.userAgent + "<BR>"); </SCRIPT>

</HEAD> <BODY> </BODY>

(47)

1. Đối tượng Window

Là đối tượng cao mơ hình DOM, nơi chứa tất các thành phần trang web

a) Các thuộc tính Windows:

Thuộc tính Mơ tả Giá trị

defaultStatus thiết lập chuổi t/báo trạng thái Text status thiết lập thông báo thời điểm hành Text

(48)

(49)

(50)

Ví dụ:

window.defaultStatus=”String” window.status=”String”

window.location=”URL”

Ta mở trang web lệnh:

(51)

Phương Thức Mô tả

alert("msg") Hiển Thị hộp thọai thông báo

blur() Di chuyển trỏ đến cửa sổ hành clearinterval(ID) Hủy thời gian thiết lập setinterval() clearTimeout(ID) Hủy thời gian thiết lập setTimeout() close() Đóng cửa sổ hành

confirm("msg") Hiển thị hộp thọai xác nhận với hai nút Cancel OK

focus() Đưa trỏ cửa sổ hiệnhành

MoveBy(x,y) Di chuyển cửa sổ đến vị trí đọan pixel so với cửa sổ hành

(52)

open(URL,"windowname","FeatureLi

st") URL : đc trang web nạp vào cửa sổ.WindowName: tên cửa sổ

FeatureList : danh sách thuộc tính cửa sổ: toolbars, menu, status …

print() in nội dung cửa sổ hành prompt("msg","reply") Hiển thị hộp thoại nhập liệu

setTimeout(func,millisec) Thiết lập thời gian mili giây để gọi hàm

stop() Hủy việc download cửa sổ Tương tự việc đóng cửa sổ trình duyệt

resizeBy(dx,dy) Thay đổi kích thước cửa sổ sang phải dx, dy pixel resizeTo(x,y) Thay đổi kích thước x, y pixel

(53)

Ví dụ: Objwindow.close()

 Từ khoá self: trường hợp muốn thao tác

trên cửa sổ hành ta dùng từ khoá self thay thế cho đối tượng window

Ví dụ : đóng cửa sổ hành:

(54)

Ví dụ: Đoạn Script đóng, mở cửa sổ trình duyệt

<INPUT TYPE="button" VALUE="Open New Window"

onClick="NewWin=window.open('blank1.htm','NewWin',

'toolbar=no,status=no,width=200,height=100'); ">

</FORM>

Định dạng
Số trang	54
Dung lượng	285,04 KB