Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (181.17 KB, 20 trang )
<span class='text_page_counter'>(1)</span><div class='page_container' data-page=1>
Phần tử
Phần tử Tên sự kiện Tên sự kiện
Button
Button onClickonClick
Checkbox
Checkbox onClickonClick
Form
Form OnSubmit, onResetOnSubmit, onReset
Textbox
Textbox OnBlur,OnChange,OnFocus,OnseleOnBlur,OnChange,OnFocus,Onsele
ct
ct
Radio
Radio OnClickOnClick
Reset button
Reset button OnClickOnClick
Dropdown
Dropdown
menu
menu OnBlur,onChange,onFocus,onSelecOnBlur,onChange,onFocus,onSelectt
Submit button
Submit button OnClickOnClick
Textarea
T/tính
T/tính Mơ tảMơ tả Ví dụVí dụ
Action
Action Trả về đường dẫn Trả về đường dẫn
(URL) đến tập tin
(URL) đến tập tin
xử lý của form thứ i
xử lý của form thứ i
Document.forms[i].action
Document.forms[i].action
Length
Length Trả về số form trên Trả về số form trên
trang web
trang web
Hoặc trả về số phần
Hoặc trả về số phần
tử trên form thứ i
tử trên form thứ i
Countform=document.forms.length
Countform=document.forms.length
Countfield=document.forms[i].length
Countfield=document.forms[i].length
Name
Name Trả về giá trị tên Trả về giá trị tên
của form thứ i
của form thứ i Nameform=document.forms[i].nameNameform=document.forms[i].name
Method
Method Các định phương Các định phương
thức của form thứ i
thức của form thứ i Methodform=document.forms[i].methodMethodform=document.forms[i].method
elements
elements mảng element chứa mảng element chứa
các phần tử trên
Ví dụ:
Ví dụ:
<script>
<script>
function kq()
function kq()
{
{
sptform=document.form1.
sptform=document.form1.<b>lengthlength</b>
document.form1.spt.value=sptform
document.form1.spt.value=sptform
tenform=document.forms[0].
tenform=document.forms[0].<b>namename</b>
document.form1.formname.value=tenform
document.form1.formname.value=tenform
}
}
</script>
T/ tính
T/ tính Mơ tả Mơ tả Ví dụ Ví dụ
Name
Name
Xác định tên của
Xác định tên của
phần tử j trên form
phần tử j trên form
thứ i.
thứ i.
document.forms[i].elements[j].name
document.forms[i].elements[j].name
Type
Type
Xác định lọai của
Xác định lọai của
đối tượng
đối tượng document.forms[i].elements[j].typedocument.forms[i].elements[j].type
Value
Value
Xác định giá trị của
Xác định giá trị của
phần tử thứ j trong
phần tử thứ j trong
form i.
form i.
document.forms[i].elements[j].value
Checked
Checked
Xác định phần tử
Xác định phần tử
thứ j có được
thứ j có được
checked khơng
checked không
document.form[i]
document.form[i]<b>..</b>
elements[j]
elements[j]<b>..</b>checkedchecked
trả về giá trị true hoặc falsetrả về giá trị true hoặc false
Disabled
Disabled
Thiết lập chế độ vô
Thiết lập chế độ vơ
hiệu hóa đối tượng
hiệu hóa đối tượng document.form[i].elements[j].disableddocument.form[i].elements[j].disabled
isDisable
isDisable
Kiểm tra phần tử có
Kiểm tra phần tử có
bị vơ hiệu hóa hay
bị vơ hiệu hóa hay
khơng
khơng
document.form[i].elements[j].isDis
thay đổi nội dung
thay đổi nội dung
của phần tử
của phần tử
document.forms[i].elements[j].read
document.forms[i].elements[j].read
Only
Ví dụ:
Ví dụ:
<b>function</b>
<b>function</b> loadform() loadform()
{
{
document.form1.ok.disabled=true;
document.form1.ok.disabled=true;
}
}
<b>function</b>
<b>function</b> validateform() validateform()
{
{
a=document.form1.user.value;
a=document.form1.user.value;
if(a!="")
if(a!="")
document.form1.ok.disabled=false;
document.form1.ok.disabled=false;
else
else
document.form1.ok.disabled=true;
document.form1.ok.disabled=true;
}
<b>Phương thức trên mảng elementPhương thức trên mảng element</b>
• <b>Focus ():<sub>Focus ():</sub></b> Đưa con trỏ về lại text box hoặc dropdownmenu <sub> Đưa con trỏ về lại text box hoặc dropdownmenu </sub>
<b>document.forms[i].elements[j].focus()</b>
<b>document.forms[i].elements[j].focus()</b>
<b>Ví dụ:</b>
<b>Ví dụ:</b>
document.form1.user.focus();
document.form1.user.focus();
<b>Lưu ý: </b>
<b>Lưu ý: </b>
Nếu ta đang làm việc trên document hiện hành, thì có thể bỏ qua
Nếu ta đang làm việc trên document hiện hành, thì có thể bỏ qua
document
document
<b>nameForm.nameField.property</b>
<b>nameForm.nameField.property</b>
hoặc
hoặc
Ví dụ:
Ví dụ:
<script>
<script>
function chontrinhduyet()
function chontrinhduyet()
{
{
count=document.form1.length;
count=document.form1.length;
for(i=0; i<count; i++)
for(i=0; i<count; i++)
{
{
if(document.form1.elements[i].type=="radio"&&
if(document.form1.elements[i].type=="radio"&&
document.form1.elements[i].checked==true)
document.form1.elements[i].checked==true)
gt=document.form1.elements[i].value
gt=document.form1.elements[i].value
}
}
document.form1.chon.value=gt
document.form1.chon.value=gt
}
Ví dụ : Checkbox
Ví dụ : Checkbox
<script type="text/javascript">
<script type="text/javascript">
function check()
function check()
{
{
coffee=document.forms[0].coffee
coffee=document.forms[0].coffee
answer=document.forms[0].answer
answer=document.forms[0].answer
txt=""
txt=""
for (i = 0; i<coffee.length; ++ i)
for (i = 0; i<coffee.length; ++ i)
{
{
if (coffee[i].checked)
if (coffee[i].checked)
{txt=txt + coffee[i].value + " "}
{txt=txt + coffee[i].value + " "}
}
}
answer.value="You ordered a coffee with " + txt
answer.value="You ordered a coffee with " + txt
}
<b>Thao tác trên dropdownmenuThao tác trên dropdownmenu</b>
<b>Thuộc tính và phương thức của dropdownmenuThuộc tính và phương thức của dropdownmenu</b>
<b>Thc tínhThc tính</b>
<b>Thuộc </b>
<b>Thuộc </b>
<b>tính </b>
<b>tính </b> <b>Mơ tả Mơ tả </b>
<b>Ví dụ </b>
<b>Ví dụ </b>
length
length
Trả về số phần tử
Trả về số phần tử
trong danh sách
trong danh sách
dropdownmenu.
dropdownmenu.
spt=nameform.namefield
spt=nameform.namefield<b>..</b>lengthlength
selectedIn
selectedIn
dex
dex
trả về chỉ số
trả về chỉ số
của phần tử
của phần tử
được chọn
được chọn
trong danh
trong danh
spt=nameform<b>..</b>namefieldnamefield<b>..</b>
selectedIndex
selectedIndex
mảng option
Ví dụ:
Ví dụ:
<script type="text/javascript">
<script type="text/javascript">
<b>function</b>
<b>function</b> chonkhoa() chonkhoa()
{
{
option=document.forms[0].khoa.options[document.
option=document.forms[0].khoa.options[document.
forms[0].khoa.selectedIndex].text
forms[0].khoa.selectedIndex].text
txt=document.forms[0].chon.value
txt=document.forms[0].chon.value
txt=txt + option
txt=txt + option
document.forms[0].chon.value=txt
document.forms[0].chon.value=txt
}
}
</script>
Ta dùng đặc tính inner và outer để thay đổi nội dung hoặc lấy giá trị
Ta dùng đặc tính inner và outer để thay đổi nội dung hoặc lấy giá trị
của một vùng nào đó trên trang web.
của một vùng nào đó trên trang web.
<b>Phân biệt giữa inner và outer Phân biệt giữa inner và outer </b>
<b>InnerInner</b> là nội dung chứa bên trong của đối tượng chứa ID. là nội dung chứa bên trong của đối tượng chứa ID.
Inner gồm có
Inner gồm có
InnerHTML lấy nội dung text và tag HTML bên trong InnerHTML lấy nội dung text và tag HTML bên trong
đối tượng ID
đối tượng ID
Outer là phần inner và bản thân đối tượng chứa ID. Outer là phần inner và bản thân đối tượng chứa ID. Outer Outer
gồm có
gồm có
outerHTML lấy nội dung text và tag HTML của cả đối outerHTML lấy nội dung text và tag HTML của cả đối
tượng ID
tượng ID
outerText : lấy nội dung textouterText : lấy nội dung text
Ví dụ:
Ví dụ:
<b><Div ID=Intro>Monitor<B> SAMSUNG</B></Div></b>
<b><Div ID=Intro>Monitor<B> SAMSUNG</B></Div></b>
<b>Ví dụ</b>
<b>Ví dụ</b>::
Var s1,s2
Var s1,s2
s1=Intro.outerText
s1=Intro.outerText
s2=Intro.innerText
s2=Intro.innerText
thì s1 và s2 đều nhận giá trị Monitor SAMSUNG
thì s1 và s2 đều nhận giá trị Monitor SAMSUNG
<b>Ví dụ</b>
<b>Ví dụ</b>
s1=Intro.outerHTML
s1=Intro.outerHTML
s2=Intro.innerHTML
s2=Intro.innerHTML
Thì s1=<Div Id=Intro>Monitor<B> SAMSUNG</B></Div>
Thì s1=<Div Id=Intro>Monitor<B> SAMSUNG</B></Div>
Và s2=Monitor<B> SAMSUNG</B>
<script>
<script>
<b>function</b>
<b>function</b> chonsp() chonsp()
{
{
prod=document.form1.masp.value;
prod=document.form1.masp.value;
hinhsp=document.forms[0].hinh.options[document.
hinhsp=document.forms[0].hinh.options[document.
forms[0].hinh.selectedIndex].text;
forms[0].hinh.selectedIndex].text;
price=document.form1.giasp.value;
price=document.form1.giasp.value;
ma.innerText=prod;
ma.innerText=prod;
hinh.innerText=hinhsp;
hinh.innerText=hinhsp;
gia.innerText=price
gia.innerText=price
}
<b>function</b>
<b>function</b> ChangeImage(path) ChangeImage(path)
{
{
h.innerHTML="<img src=../images/" + path +" h.innerHTML="<img src=../images/" + path +"
width=100 height=100 >"
width=100 height=100 >"
}
}
Gọi hàm ChangeImage(value)
Gọi hàm ChangeImage(value)
<select name="hinh" id="hinh" onchange="ChangeImage(value)">
<select name="hinh" id="hinh" onchange="ChangeImage(value)">
<option value="../images/h1.gif">hình 1</option><option value="../images/h1.gif">hình 1</option>
<option value="../images/h4.gif">hình 2</option><option value="../images/h4.gif">hình 2</option>
<option value="../images/h3.gif">hình 3</option><option value="../images/h3.gif">hình 3</option>
</select>