Tải bản đầy đủ (.ppt) (20 trang)

Javascript

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>

CHƯƠNG XVII(tt)


CHƯƠNG XVII(tt)



</div>
<span class='text_page_counter'>(2)</span><div class='page_container' data-page=2>

<b>Đối tượng form</b>


<b>Đối tượng form</b>



Form là một thành phần dùng để thu thập dữ liệu,


Form là một thành phần dùng để thu thập dữ liệu,



thông tin từ người dùng. Mỗi phần tử trong form là


thông tin từ người dùng. Mỗi phần tử trong form là


một đối tượng trong DOM. Do đó mỗi phần tử trên


một đối tượng trong DOM. Do đó mỗi phần tử trên


form cũng có những sự kiện và phương thức của nó


form cũng có những sự kiện và phương thức của nó



</div>
<span class='text_page_counter'>(3)</span><div class='page_container' data-page=3>

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



</div>
<span class='text_page_counter'>(4)</span><div class='page_container' data-page=4>

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



</div>
<span class='text_page_counter'>(5)</span><div class='page_container' data-page=5>

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>


</div>
<span class='text_page_counter'>(6)</span><div class='page_container' data-page=6>

<b>Các thuộc tính trên mảng element</b>


<b>Các thuộc tính trên mảng element</b>



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


</div>
<span class='text_page_counter'>(7)</span><div class='page_container' data-page=7>

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


document.form[i].elements[j].isDis
able
able
readOnly
readOnly
Cho phép/không
Cho phép/không


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


</div>
<span class='text_page_counter'>(8)</span><div class='page_container' data-page=8>

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;


}


</div>
<span class='text_page_counter'>(9)</span><div class='page_container' data-page=9>

 <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


</div>
<span class='text_page_counter'>(10)</span><div class='page_container' data-page=10>

<b>Các phần tử trên from</b>



<b>Các phần tử trên from</b>



<b>Thao tác trên trường radio</b>

<b>Thao tác trên trường radio</b>



Để lấy giá trị của trường radio ta phải



Để lấy giá trị của trường radio ta phải



sử dụng đến mảng element. Duyệt qua



sử dụng đến mảng element. Duyệt qua



tất cả các phần tử và kiểm tra phần tử



tất cả các phần tử và kiểm tra phần tử




đó có được checked khơng ?



đó có được checked khơng ?



<b>Cú pháp</b>

<b>Cú pháp</b>

:

:



<b>Countfield=nameform.length</b>



<b>Countfield=nameform.length</b>



<b>for(var i=0 ; i<Countfield ; i++)</b>



<b>for(var i=0 ; i<Countfield ; i++)</b>



<b>r</b>



<b>r</b>



<b>Giatri=nameform.elements[i].value</b>



</div>
<span class='text_page_counter'>(11)</span><div class='page_container' data-page=11>

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


}


</div>
<span class='text_page_counter'>(12)</span><div class='page_container' data-page=12>

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


}


</div>
<span class='text_page_counter'>(13)</span><div class='page_container' data-page=13>

 <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


sách
sách
spt=nameform


spt=nameform<b>..</b>namefieldnamefield<b>..</b>


selectedIndex


selectedIndex


mảng option


</div>
<span class='text_page_counter'>(14)</span><div class='page_container' data-page=14>

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>


</div>
<span class='text_page_counter'>(15)</span><div class='page_container' data-page=15>

<b>THAY ĐỔI NỘI DUNG ĐỘNG TRÊN TRANG </b>


<b>THAY ĐỔI NỘI DUNG ĐỘNG TRÊN TRANG </b>


 <b>Thay đổi nội dung trên trang dựa vào inner và outerThay đổi nội dung trên trang dựa vào inner và outer</b>


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


</div>
<span class='text_page_counter'>(16)</span><div class='page_container' data-page=16>

 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>


</div>
<span class='text_page_counter'>(17)</span><div class='page_container' data-page=17>

<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>


</div>
<span class='text_page_counter'>(18)</span><div class='page_container' data-page=18>

Ví dụ:thiết kế form có dạng:



</div>
<span class='text_page_counter'>(19)</span><div class='page_container' data-page=19>

<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


}


</div>
<span class='text_page_counter'>(20)</span><div class='page_container' data-page=20>

<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&igrave;nh 1</option><option value="../images/h1.gif">h&igrave;nh 1</option>


<option value="../images/h4.gif">h&igrave;nh 2</option><option value="../images/h4.gif">h&igrave;nh 2</option>



<option value="../images/h3.gif">h&igrave;nh 3</option><option value="../images/h3.gif">h&igrave;nh 3</option>
</select>


</div>

<!--links-->

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay
×