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
<html>
<head>
<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ụ:
<html>
<body>
<p id="p1">Hello World!</p>
<script type="text/javascript">
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
<input type="text" size="30" id="email"
onchange="checkEmail()"
>
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:
<script>
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:
<script type="text/javascript">
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ụ:
<script>
d.setFullYear(2008)
document.write(d.getFullYear()+"<br>")
</script>
Ví dụ:
<script language="javascript">
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>
<script language=”Javascript”>Ngay()</script>
//g i hàm
ọ
(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ụ:
<script type="text/javascript">
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
<script type="text/javascript">
var str="This is my Schools "
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ụ:
<script>
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ụ:
<script>
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>
<img src=”hinh.jpg” width=100 height=200 id=”idhinh”>
<form>
<input type=button value= “Play” onClick= “play()”>
<input type=button value= “Stop” onClick= “stop()”>
</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>
<SCRIPT LANGUAGE= "JavaScript">
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)