Các phương pháp truy xuất thuộc
tính HTML bằng JavaScript
Đối tượng Button
-
Thuộc tính
-
Name: Thiết lập tên cho đối tượng.
-
Value: Giá trị của đối tượng.
-
Type: Kiểu đối tượng là Button.
-
Sự kiện:
-
onClick: Sự kiện được kích hoạt khi click chuột.
Đối tượng CheckBox
-
Thuộc tính:
-
Checked: đối tượng được check hay không?
-
Name: Thiết lập tên cho đối tượng.
-
Value: giá trị trả về của đối tượng.
-
Type: Kiểu của đối tượng.
-
Sự kiện:
-
onClick
Đối tượng RadioButton
Select(): đánh dấu chuỗi trong textbox.
-
Sự kiện:
-
onBlur: được gọi khi dấu nháy rời khỏi textbox.
-
onFocus: được gọi khi dấu nháy đưa vào textbox.
-
onChange: được gọi khi thay đổi dữ liệu trong textbox.
-
onSelect: được gọi khi đánh dấu chọn trong textbox.
Đối tượng Select(Combobox)
-
Thuộc tính:
-
Name:
-
Index: lấy vị trí thứ n của đối tượng.
-
Length: trả về số mục trong đối tượng.
-
Selected: cho biết mục nào được chọn.
-
Selectedindex: trả về thứ tự mục đang chọn.
-
Text: chuỗi hiển thị của đối tượng.
-
Type:
-
Value:
Length: Cho biết số frame được thiết lập trong HTML.
-
Name: cho biết tên của window hay frame.
-
Status: dùng hiển thị các thông điệp trong thanh trạng thái (status bar).
-
Phương thức:
-
Alert(message): Hiển thị thông điệp trong hộp thoại.
-
Close(): Đóng cửa sổ.
-
Confirm(message): hiển thị thông điệp trong hộp thoại với 2 nút OK và Cancel. Giá trị trả về true/false.
-
Open(url, name, option): Load trang HTML(URL) vào trong cửa sổ window với tên (name). Option gồm:
•
+ Toolbar=[yes,no,1,0]: Cho biết tạo window có thanh Tollbar không?
•
+ Directories=[yes,no,1,0]: Cho biết tạo window có directorie không?
•
+ Status=[yes,no,1,0]: Cho biết tạo window có thanh trạng thái không?
•
+ menu=[yes,no,1,0]: Cho biết tạo window có thanh menu không?
•
+ scrollbars=[yes,no,1,0]: Cho biết tạo window có thanh cuộn không?
•
+ resizabled=[yes,no,1,0]: Cho biết tạo window có thể thay đổi kích thước không?
•
+ width=pixel: Ðịnh kích thuớc bề rộng của cửa sổ.
•
– userLanguage:
•
Navigator Object Methods
– javaEnabled():
–
taintEnabled():
Đối tượng Screen: là 1 đối tượng
javascript. Không phải là 1 đối tượng
HTML DOM.
•
Được tạo 1 cách tự động bằng JavaScript runtime engine và chứa thông tin về
màn hình hiển thị của client.
•
Các thuộc tính trên màn hình:
–
availHeight: chiều cao của màn hình hiển thị (trừ window taskbar)
–
availWidth: chiều rộng của màn hình hiển thị.
–
bufferDepth: chiều sâu của bảng màu trong vùng đệm off-screen bitmap.
–
colorDepth: chiều sâu của bảng màu trên thiết bị cuối hoặc vùng đệm.
–
deviceXDPI:
–
deviceYDPI
–
fontSmoothingEnabled:
–
Height:
•
Một phần của đối tượng window và được
truy cập thông qua thuộc tính
window.location
•
Thuộc tính:
–
Hash, host, hostname, href, pathname, port,
protocol, search
•
Location Object Methods
–
assign(): load 1 document mới.
–
reload(): reload document hiện tại.
–
replace(): replace document hiện tại với 1 cái mới.
Đối tượng Document:
-
Đây là 1 đối tượng thông dụng khi muốn truy
xuất bất kỳ các phần tử nào trong html/form.
-
Khi muốn hiển thị giá trị trong HTML.
-
Bất kỳ đối tượng nào trong HTML ta có thể
truy xuất thông qua đối tượng Document.
-
Phương thức:
-
Clear(): Xóa tài liệu trong window.
x.innerHTML – giá trị chuỗi bên trong của x (a HTML element)
•
x.nodeName – tên của x
•
x.nodeValue – giá trị của x
•
x.parentNode – nút cha của x
•
x.childNodes – các nút con của x
•
x.attributes – các thuộc tính của x
HTML DOM Methods
•
x.getElementByID(id)
•
x.getElementsByTagName(name)
•
x.appendChild(node) - insert 1 nút con vào x
•
x.removeChild(node ) - remove 1 nút con từ x
innerHTML
•
Cách dễ nhất để lấy và sửa nội dung của 1 thành phần.
•
Nó không phải là 1 phần của W3C DOM. Nó được hỗ trợ bởi các browser chính.
•
Dùng để thay đổi nội dung của thành phần HTML ( bao gồm <html> và <body>).
•
Dùng để view source của trang đã được thay đổi 1 cách tự động.
•
•
<p id="intro">Hello World!</p>
•
<p id="main">This is an example for the HTML DOM tutorial.</p>
•
<script type="text/javascript">
•
txt=document.getElementById("intro").childNodes[0].nodeValue;
•
document.write("The text from the intro paragraph: " + txt);
•
</script>
•
</body>
•
</html>
–
document - the current HTML document
–
getElementById("intro") - the <p> element with the id "intro"
–
childNodes[0] - the first child of the <p> element (the text node)
–
nodeValue - the value of the node (the text itself)
HTML DOM Access Nodes
•
Bạn có thể access vào 1 node theo 3 cách:
–
Dùng phương thức: getElementById()
–
•
</html>
HTML DOM Access Nodes
•
Cách 3: có 3 thuộc tính parentNode, firstChild, lastChild.
•
Vd:
–
<html>
–
<body>
–
<p id="intro">W3Schools example</p>
–
<div id="main">
–
<p id="main1">The DOM is very useful</p>
–
<p id="main2">This example demonstrates <b>node
relationships</b></p>
–
</div>
–
</body>
–
</html>
•
<p id="intro"> là firstChild, <div> là lastChild, <body> là
parentNode.
•
•
Changing an HTML Element Using Events: 1 event handler cho phép thực thi code khi sự
kiện xảy ra. Các events được sinh ra bởi browser khi user click 1 element, pageload,
submit…
–
Vd:
–
<html> <body><input type="button" onclick="document.body.bgColor='yellow';" value="Click me to
change background color"></body> </html>
–
<html> <head> <script type="text/javascript"> function ChangeText()
{ document.getElementById("p1").innerHTML="New text!"; } </script> </head><body> <p
id="p1">Hello world!</p> <input type="button" onclick="ChangeText()" value="Click me to change text
above"> </body> </html>
•
Using the Style Object: Style có thể được truy cập từ document hoặc từ từ 1 thành phần
apply style.
–
Vd:
–
<html> <head> <script type="text/javascript"> function ChangeBackground()
{ document.body.style.backgroundColor="yellow"; } </script> </head><body> <p id="p1">Hello world!
</p> <input type="button" onclick="ChangeBackground()" value="Click me to change background
color"> </body> </html>
HTML DOM – Events
•
Events
–
Dùng javascript bạn có thể tạo trang web động.
Events là các hành động và có thể delete nó bằng
Vd:
–
<input type="text" size="30" id="email"
onchange="checkEmail()">
•
onMouseOver and onMouseOut:
–
Dùng để tạo "animated" button.
–
Vd: onMouseOver.
–
<a href="http://www.w3schools.com" onmouseover="alert('An
onMouseOver event');return false"> <img src="w3schools.gif"
width="100" height="30"> </a>
Sample
•
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
•
<HTML>
•
<HEAD>
•
<TITLE>Sample 500 - Example 4-0 Define and Call a Function </TITLE>
•
<SCRIPT LANGUAGE="JavaScript1.2"><! BEGIN HIDING
•
function setColor() {
•
document.bgColor = "purple";
•
Copyright: Tài liệu đại học ©