- Thuộc tính: - defaultStatus: giá trị hiển thị mặc định trong thanh trạng thái Status bar của cửa sổ.. - Status: dùng hiển thị các thông điệp trong thanh trạng thái status bar.. Đối tư
Trang 1Các phương pháp truy xuất thuộc
tính HTML bằng JavaScript
Trang 2Đối tượng Button
- 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.
- onClick: Sự kiện được kích hoạt khi click chuột.
Trang 3Đối tượng CheckBox
- 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.
- onClick
Trang 4Đối tượng RadioButton
Trang 5Đối tượng Textbox, Textarea
- Focus(): Đưa dấu nháy vào trong textbox.
- Blur(): Ngược lại với phương thức focus().
- 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.
Trang 6Đố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.
Trang 7Các đối tượng JavaScript
Trang 8Đối tượng Window
- Đây là đối tượng được tạo tự động với mọi thể hiện của thẻ <body> hoặc <frameset> Là đối
tượng cao nhất trong hệ thống cấp bậc của JavaScript.
- Thuộc tính:
- defaultStatus: giá trị hiển thị mặc định trong thanh trạng thái (Status bar) của cửa sổ.
- Frames: mảng chứa các frame được thiết lập trong trang HTML.
- 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ổ
• + height=pixel: Ðịnh kích thuớc chiều cao của cửa sổ
• Sự kiện:
– Onload: được gọi khi mở trang web.
– onUnload: Được kích hoạt khi thoát trang web.
Trang 9Đối tượng navigator: Đối tượng cho biết trình duyệt đang dùng trên phiên bản nào, trên
nền tảng nào…
• Navigator Object Collections: plugins[]
• Navigator Object Properties:
– appCodeName : tên mã của browser
– appMinorVersion : trả về version nhỏ hơn của browser.
– appName : tên của browser.
– appVersion : nền tảng và phiên bản của browser.
– browserLanguage : ngôn ngữ hiện tại của browser.
Trang 10Đố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.
Trang 11Đối tượng history: Kích hoạt các sự kiện trong history cũ của browser.
• Thuộc tính:
– Length: Cho biết số mục có trong danh sách
history.
• Phương thức:
– Back(): Quay lại tài liệu trước đó trong history.
– Forward(): Đến tài liệu kế trong history.
– Go(location): Đến tài liêu trong history, location có
thể dùng với chuỗi hoặc số Nếu là chuỗi thì phải
điền đầy đủ các thành phần của URL Nếu là số thì phương thức sẽ lấy vị trí tài liệu cần đến trong
history.
Trang 12Đối tượng Location
• 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:
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.
Trang 13Đố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.
- Close(): Đóng lớp hiện hành đang mở.
- Write(): Ghi chuỗi hoặc cấu trúc HTML trong tài
liệu đặc biệt.
- Writeln(): giống như write() nhưng tạo ra dòng
mới.
Trang 14Đối tượng Document
- Không chứa các đối tượng: navigator, frame,
location, history, mineType.
- Vd: Bạn có 1 đối tượng image với
name=image1, bạn muốn thay đổi url của
thuộc tính src.
- document.image1.src=“image2.jpg”
- document.images[0].src=“image2.jpg”
- document.images[“image1”].src=“image2.jpg”
- Vd: Bạn có 1 form với name=myForm1 chứa
đối tượng INPUT TYPE=“text”
name=myText1.
- document.myForm1.myText1.value= “abc”
Trang 15HTML DOM Properties
Trang 16HTML DOM Methods
Trang 17• 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.
• Vd: get chuỗi từ tag <p> với id=“intro”
Trang 18childNodes and nodeValue
– 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)
Trang 19HTML DOM Access Nodes
• <p id="main1">The DOM is very useful</p>
• <p id="main2">This example demonstrates how to use the
Trang 20HTML DOM Access Nodes
• Cách 3: có 3 thuộc tính parentNode, firstChild, lastChild.
– <p id="main1">The DOM is very useful</p>
– <p id="main2">This example demonstrates <b>node
Trang 21HTML DOM Access Nodes
– Có 2 thuộc tính đặc biệt:
• document.documentElement: trả về nút gốc của document và tồn tại trong tất cả document của XML/HTML.
• document.body
Trang 22HTML DOM - How to Change
– <html> <body> <p id="p1">Hello World!</p> <script type="text/javascript">
document.getElementById("p1").innerHTML="New text!"; </script> </body> </html>
• 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>
Trang 23HTML 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 JavaScript.
– Mọi thẻ trên trang đều có events có thể trigger
bằng JavaScript.
– Examples of events:
• A mouse click
• A web page or an image loading
• Mousing over a hot spot on the web page
• Selecting an input box in an HTML form
• Submitting an HTML form
• A keystroke
Trang 24HTML DOM-Events
• onload and onUnload
– Là sự kiện khi user đi vào hoặc ra khỏi trang.
– Onload thường được dùng để kiểm tra kiểu browser và phiên bản
• onFocus, onBlur and onChange
– Dùng trong kết nối validate của form fields.
– 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>
Trang 25• </H2>
• </BODY>
• </HTML>
Trang 26• it <U>isn't changing</U> the layout, it is <U>contributing to the initial
Trang 27• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
• <HTML> <HEAD> <BASEFONT SIZE="5">
• <TITLE>Sample 502 - Example 4-2 Call a Function within a Function</TITLE> </HEAD>
• <BODY BGCOLOR="lime">
• <A HREF="Sample502.html" onMouseOver="setText('blue');"
• onMouseOut="setDiffText();">
• Test Link Number 1 </A> <BR><BR>
• <A HREF="Sample502.html" onMouseOver="setText('yellow');"
• onMouseOut="setDiffText();">
• Test Link Number 2 </A> <BR><BR>
• <FORM NAME="form1"> <INPUT TYPE="text" NAME="text1" SIZE=50> </FORM>
• Two Test Links to Change Text in the Text box by moving the mouse over a link and
• <SCRIPT LANGUAGE="JavaScript1.2"><! BEGIN HIDING