Javascript

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[r]

(1)

CHƯƠNG XVII(tt) CHƯƠNG XVII(tt)

(2)

Đối tượng form Đối tượng form

Form thành phần dùng để thu thập liệu, Form thành phần dùng để thu thập liệu,

thông tin từ người dùng Mỗi phần tử form thông tin từ người dùng Mỗi phần tử form một đối tượng DOM Do phần tử một đối tượng DOM Do phần tử form có kiện phương thức nó form có kiện phương thức nó

(3)

Phần tử

Phần tử Tên kiện Tên kiện

Button

Button onClickonClick

Checkbox

Checkbox onClickonClick

Form

Form OnSubmit, onResetOnSubmit, onReset

Textbox

Textbox OnBlur,OnChange,OnFocus,OnseleOnBlur,OnChange,OnFocus,Onsele

ct

Radio

Radio OnClickOnClick

Reset button

Reset button OnClickOnClick

Dropdown

menu

menu OnBlur,onChange,onFocus,onSelecOnBlur,onChange,onFocus,onSelectt

Submit button

Submit button OnClickOnClick

Textarea

(4)

T/tính

T/tính Mơ tảMơ tả Ví dụVí dụ Action

Action Trả đường dẫn Trả đường dẫn (URL) đến tập tin

(URL) đến tập tin

xử lý form thứ i

Document.forms[i].action

Length

Length Trả số form Trả số form trang web

trang web

Hoặc trả số phần

tử form thứ i

Countform=document.forms.length

Countfield=document.forms[i].length

Name

Name Trả giá trị tên Trả giá trị tên 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 form thứ i

thức form thứ i Methodform=document.forms[i].methodMethodform=document.forms[i].method elements

elements mảng element chứa mảng element chứa phần tử

(5)

Ví dụ:

function kq()

{

sptform=document.form1

sptform=document.form1.lengthlength

document.form1.spt.value=sptform

tenform=document.forms[0]

tenform=document.forms[0].namename

document.form1.formname.value=tenform

}

</script>

(6)

Các thuộc tính mảng element Các thuộc tính mảng element

T/ tính

T/ tính Mơ tả Mơ tả Ví dụ Ví dụ

Name

Xác định tên

phần tử j form

thứ i

document.forms[i].elements[j].name

Type

Xác định lọai

đối tượng

đối tượng document.forms[i].elements[j].typedocument.forms[i].elements[j].type

Value

Xác định giá trị

phần tử thứ j

form i

document.forms[i].elements[j].value

(7)

Checked

Xác định phần tử

thứ j có

checked không

document.form[i]

elements[j]

elements[j] checkedchecked



trả giá trị true falsetrả giá trị true false

Disabled

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

Kiểm tra phần tử có

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

của phần tử

document.forms[i].elements[j].read

Only

(8)

Ví dụ:

function

function loadform() loadform() {

{

document.form1.ok.disabled=true;

}

function

function validateform() validateform() {

{

a=document.form1.user.value;

if(a!="")

document.form1.ok.disabled=false;

else

document.form1.ok.disabled=true;

}

(9)

 Phương thức mảng elementPhương thức mảng element

• Focus ():Focus (): Đưa trỏ lại text box dropdownmenu Đưa trỏ lại text box dropdownmenu

document.forms[i].elements[j].focus() document.forms[i].elements[j].focus() Ví dụ:

Ví dụ:

document.form1.user.focus();

document.form1.user.focus(); Lưu ý:

Lưu ý:

Nếu ta làm việc document hành, bỏ qua

document

nameForm.nameField.property nameForm.nameField.property

hoặc

(10)

Các phần tử from

 Thao tác trường radioThao tác trường radio

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

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

tất phần tử kiểm tra phần tử

đó có checked khơng ?

 Cú phápCú pháp::

Countfield=nameform.length

for(var i=0 ; i<Countfield ; i++)

r

Giatri=nameform.elements[i].value

(11)

Ví dụ:

function chontrinhduyet()

{

count=document.form1.length;

for(i=0; i<count; i++)

{

if(document.form1.elements[i].type=="radio"&&

document.form1.elements[i].checked==true)

gt=document.form1.elements[i].value

}

document.form1.chon.value=gt

}

(12)

Ví dụ : Checkbox

function check()

{

coffee=document.forms[0].coffee

answer=document.forms[0].answer

txt=""

for (i = 0; i<coffee.length; ++ i)

{

if (coffee[i].checked)

{txt=txt + coffee[i].value + " "}

}

answer.value="You ordered a coffee with " + txt

}

(13)

 Thao tác dropdownmenuThao tác dropdownmenu

 Thuộc tính phương thức dropdownmenuThuộc tính phương thức dropdownmenu  Thc tínhThc tính

Thuộc

tính

tính Mơ tả Mơ tả

Ví dụ Ví dụ

length

Trả số phần tử

trong danh sách

dropdownmenu

spt=nameform.namefield

spt=nameform.namefield lengthlength

selectedIn

dex

trả số

của phần tử

được chọn chọn danh danh sách sách spt=nameform

spt=nameform namefieldnamefield

selectedIndex

mảng option

(14)

Ví dụ:

function chonkhoa() chonkhoa() {

{

option=document.forms[0].khoa.options[document

forms[0].khoa.selectedIndex].text

txt=document.forms[0].chon.value

txt=txt + option

document.forms[0].chon.value=txt

}

</script>

(15)

THAY ĐỔI NỘI DUNG ĐỘNG TRÊN TRANG THAY ĐỔI NỘI DUNG ĐỘNG TRÊN TRANG  Thay đổi nội dung trang dựa vào inner outerThay đổi nội dung trang dựa vào inner outer

Ta dùng đặc tính inner outer để thay đổi nội dung lấy giá trị

của vùng trang web

 Phân biệt inner outer Phân biệt inner outer

 InnerInner nội dung chứa bên đối tượng chứa ID nội dung chứa bên đối tượng chứa ID

Inner gồm có

 InnerHTML lấy nội dung text tag HTML bên InnerHTML lấy nội dung text tag HTML bên

đối tượng ID

(16)

 Outer phần inner thân đối tượng chứa ID Outer phần inner thân đối tượng chứa ID Outer Outer

gồm có

 outerHTML lấy nội dung text tag HTML đối outerHTML lấy nội dung text tag HTML đối

tượng ID

 outerText : lấy nội dung textouterText : lấy nội dung text

Ví dụ:

<Div ID=Intro>Monitor<B> SAMSUNG</B></Div> <Div ID=Intro>Monitor<B> SAMSUNG</B></Div>

(17)

Ví dụ Ví dụ:: Var s1,s2

Var s1,s2

s1=Intro.outerText

s2=Intro.innerText

thì s1 s2 nhận giá trị Monitor SAMSUNG

thì s1 s2 nhận giá trị Monitor SAMSUNG Ví dụ

Ví dụ

s1=Intro.outerHTML

s2=Intro.innerHTML

Thì s1=<Div Id=Intro>Monitor<B> SAMSUNG</B></Div>

Và s2=Monitor<B> SAMSUNG</B>

(18)

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

(19)

function chonsp() chonsp() {

{

prod=document.form1.masp.value;

hinhsp=document.forms[0].hinh.options[document

forms[0].hinh.selectedIndex].text;

price=document.form1.giasp.value;

ma.innerText=prod;

hinh.innerText=hinhsp;

gia.innerText=price

}

(20)

function

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