Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 27 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
27
Dung lượng
169,5 KB
Nội dung
Cácphươngpháptruyxuấtthuộc
tính HTMLbằ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
-
Thuộc tính:
-
Checked:
-
Length: Cho biết số đối tượng radioButton trong form
-
Name:
-
Value:
-
Type
Đối tượng Textbox, Textarea
-
Thuộc tính:
-
defaultValue: Xác lập giá trị mặc định
-
Name:
-
Value:
-
Type:
-
Phương thức:
-
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.
Đố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:
-
Sự kiện:
-
onBlur:
-
onFocus:
-
onChange:
Các đối tượng JavaScript
-
Window: Trình bày 1 cửa sổ browser.
-
Navigator: Chứa thông tin về browser của client.
-
Screen: Chứa thông tin về màn hình hiển thị của client.
-
History: Chứa các địa chỉ URL đã viếng thăm của cửa sổ browser.
-
Location: Chứa thông tin về URL hiện tại.
Đố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.
Đố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.
– cookieEnabled:
–
cpuClass:
– onLine:
–
Platform:
– systemLanguage:
–
userAgent:
– 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ằngJavaScript runtime engine và chứa thông tin về
màn hình hiển thị của client.
•
Các thuộctí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:
–
logicalXDPI:
–
logicalYDPI:
–
pixelDepth
–
updateInterval:
–
Width:
[...]... 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àiliệ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àiliệu đặc biệt - Writeln(): giống như write()... text=x.firstChild.nodeValue; HTML DOM Access Nodes • Root Nodes – Có 2 thuộctí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 HTML DOM - How to Change HTML Elements • Changing an HTML Element: Thay đổi nội dung và thuộctính của thể HTML 1 cách tự động – – • Changing the Text HTML Element – innerHTML: Cách dễ nhất để thay đổi... 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àiliệu trước đó trong history – Forward(): Đến tàiliệu kế trong history – Go(location): Đến tàiliê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. .. dung của 1 thẻ bằng cách dùng innerHTML – – • Vd: Hello World! document.getElementById("p1").innerHTML="New text!"; < /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> 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ằngJavaScript – Mọi thẻ trên trang đều có events có thể trigger bằngJavaScript – 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 HTML. .. 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... inside the main div: " + x[0].innerHTML); < /html> HTML DOM Access Nodes • • Cách 3: có 3 thuộc tính parentNode, firstChild, lastChild Vd: – – – – – – W3Schools example The DOM is very useful This example demonstrates node relationships – – – < /html> • là firstChild,... bởi các browser chính Dùng để thay đổi nội dung của thành phần HTML ( bao gồm và ) Dùng để view source của trang đã được thay đổi 1 cách tự động Vd: get chuỗi từ tag với id=“intro” – – – – – – – – – – • Hello World! This is an example for the HTML DOM tutorial. txt=document.getElementById("intro").innerHTML;... – – • Vd: document.body.bgColor="yellow"; < /html> Vd: < /html> function ChangeText() { document.getElementById("p1").innerHTML="New text!"; } ... – document - the current HTML document getElementById("intro") - the element with the id "intro" childNodes[0] - the first child of the 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() Dùng phương thức: getElementsByTagName() Bằng cách tìm vị trí của node và . 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. 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