BàiGiảngMônThiếtKếWeb Phần2:NgônNgữKịchBảnJavaScript
Biênsọan:DươngThànhPhết Trang51
form.result.value=form.entry.value*form.entry.value;
}else{
form.result.value=form.entry.value*2;
}
}
}
</Script>
</Head>
<BODY>
<FORMMETHOD=POST>
Value:<INPUTTYPE="text"NAME="entry"VALUE=0
onChange="calculate(this.form,this.name);"><BR>
Action:<BR>
<INPUTTYPE="radio"NAME="action"VALUE="twice"
onClick="calculate(this.form,this.name);">Double<BR>
<INPUTTYPE="radio"NAME="action"VALUE="square"
onClick="calculate(this.form,this.name);">
Square<BR>Result:<INPUTTYPE=textNAME="result"VALUE=0
onChange="calculate(this.form,this.name);">
</Form>
</Body>
</HTML>
g.Phntreset
Sửdụngđốitượngreset,cũnggiốngđốitượngbutton,đốitượngresetcóhaithuộctính
lànamevàvaluevàmộtsựkiệnonClick.Đốitượngresetdùngđểxoáform.
Vídụ:TrangResetButton.htmminhhoạcáchsửdụngnútresetđểxoácácgiátrịcủaform.
<HTML>
<Head>
<Title>resetExample</Title>
<ScriptLanguage="JavaScript">
functionclearForm(form){
form.value1.value="Form";
form.value2.value="Cleared";
}
</Script>
</Head>
<Body>
<FormMethod=Post>
<InputType="text"NAME="value1"><BR>
<InputType="text"NAME="value2"><BR>
<InputType="reset"VALUE="ClearForm"onClick="clearForm(this.form);">
</Form>
</Body></HTML>
This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb Phần2:NgônNgữKịchBảnJavaScript
Biênsọan:DươngThànhPhết Trang52
h.Phntselect
Danh sách lựa chọn trong các form xuất hiện menu drop-down hoặc danh sách cuộn
đượccủacácđốitượngcóthểđượclựachọn.Cácdanhdáchđượcxâydựngbằngcáchsử
dụnghaithẻSELECTvàOPTION.
<SELECTNAME="test">
<OPTIONSELECTED>1
<OPTION>2
<OPTION>3
</SELECT>
Tạorabathànhphầncủamenuthảdrop-downvớibalựachọn1,2và3.Sửdụngthuộc
tínhSIZEbạncóthểtạotamộtdanhsáchcuộnvớisốphầntửhiểnthịởlầnthứnhất.Đểbật
menudrop-downtrongmộtmenucuộnvớihaithànhphầnhiểnthị,bạncóthểsửdụngnhưsau:
<SELECTNAME="test"SIZE=2>
<OPTIONSELECTED>1
<OPTION>2
<OPTION>3
</SELECT>
Trong cả hai VÍ DỤ: trên, người sử dụng chỉ có 1 lựa chọn. Nếu sử dụng thuộc tính
MULTIPLE,bạncóthểchophépngườisửdụnglựachọnnhiềuhơn1giátrịtrongdanhsách
lựachọn:
<SELECTNAME="test"SIZE=2MULTIPLE>
<OPTIONSELECTED>1
<OPTION>2
<OPTION>3
</SELECT>
DanhsáchlựachọntrongJavaScriptlàđốitượngselect.Đốitượngnàytạoramộtvài
thànhphầntươngtựcácbuttonvàradio.
Vớicácthànhphầnlựachọn,danhsáchcáclựachọnđượcchứatrongmộtmảngđược
đánhsốtừ0.Trongtrườnghợpnày,mảnglàmộtthuộctínhcủađốitượngselectgọilàoptions.
Cảviệclựachọncácoptionvàtừngphầntửoptionriêngbiệtđềucónhữngthuộctính.
Bổsungthêmvàomảngoption,phầntửselectcóthuộctínhselectedIndex,cóchứasốthứtự
củaoptionđượclựachọnhiệnthời.
Mỗioptiontrongdanhsáchlựachọnđềucómộtvàithuộctính:
DEFAULTSELECTED ChobiếtoptioncómặcđịnhlàchọntrongthẻOPTIONhaykhông.
INDEX Chứagiátrịsốthứtựcủaoptionhịênthờitrongmảngoption.
This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb Phần2:NgônNgữKịchBảnJavaScript
Biênsọan:DươngThànhPhết Trang53
SELECTED Chobiếttrạngtháihiệnthờicủaoption
TEXT Cóchứagiátrịcủadòngtexthiểnthịtrênmenuchomỗioption,và
thuộctínhvaluemọigiátrịchỉratrongthẻOPTION.
Vídụ:Códanhsáchlựachọnsau:
<SelectName="example"onFocus="react();">
<OptionSELECTEDVALUE="NumberOne">1
<OptionVALUE="TheSecond">2
<OptionVALUE="ThreeisIt">3
</Select>
Khilầnđầutiênhiểnthịbạncóthểtruynhậptớicácthôngtinsau:
example.options[1].value="TheSecond"
example.options[2].text="3"
example.selectedIndex=0
example.options[0].defaultSelected=true
example.options[1].selected=false
Nếungườisửdụngkíchvàomenuvàlựachọnoptionthứhai,thìthẻonFocussẽthực
hiện,vàkhiđógiátrịcủathuộctínhsẽlà:
example.options[1].value="TheSecond"
example.options[2].text="3"
example.selectedIndex=1
example.options[0].defaultSelected=true
example.options[1].selected=true
Cóthểthêmcáclựachọnmớivàodanhsáchbằngcáchsửdụngđốitượngxâydựng
Option()theocúpháp:
newOptionName=newOption(optionText,optionValue,defaultSelected,selected);
selectListName.options[index]=newOptionName;
Việctạođốitượngoption()nàyvớidòngtextđượcchỉtrước,defaultSelectedvàselected
nhưtrênđãđịnhranhữnggiátrịkiểuBoolean.Đốitượngnàyđượcliênkếtvàodanhsáchlựa
chọnđượcthựchiệnbằngindex.
Cáclựachọncóthểbịxoátrongdanhsáchlựachọnbằngcáchgắngiátrịnullchođối
tượngmuốnxoá
selectListName.options[index]=null;
i.Phntsubmit
Nút Submit là một trường hợp đặc biệt của button, cũng như nút Reset. Nút này đưa
thôngtinhiệntạitừcáctrườngcủaformtớiđịachỉURLđượcchỉratrongthuộctínhACTION
củathẻformsửdụngcáchthứcMETHODchỉratrongthẻFORM.
j.PhntText
Phầntử này nằm trong những phầntử hay đượcsử dụng nhất trongcác form HTML.
Trườngtextchophépnhậpvàomộtdòngđơn.
This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb Phần2:NgônNgữKịchBảnJavaScript
Biênsọan:DươngThànhPhết Trang54
Bảngsaumôtảcácthuộctínhvàphươngthức.
Cáchthứcvàthuộctính Môtả
defaultValue Chỉra giátrịmặcđịnhcủaphầntửđượcchỉratrongthẻ
INPUT(thuộctính)
name TêncủađốitượngđượcchỉratrongthẻINPUT(thuộctính)
value Giátrịhiệnthờicủaphầntử(thuộctính)
focus() Môtảviệccontrỏtớitrườngtext(cáchthức)
blur() Môtảviệccontrỏrờitrườngtext(cáchthức)
select() Môtảviệclựachọndòngtexttrongtrườngtext(cáchthức)
Vídụ:TrangTextField.htmTựđộngcậpnhậtcáctrườngtext.
<HTML>
<HEAD>
<TITLE>TextFieldExample</TITLE>
<SCRIPTLANGUAGE="JavaScript">
functionecho(form,currentField){
if(currentField=="first")
form.second.value=form.first.value;
else
form.first.value=form.second.value;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUTTYPE=textNAME="first"onChange="echo(this.form,this.name);">
<INPUTTYPE=textNAME="second"onChange="echo(this.form,this.name);">
</FORM>
</BODY>
</HTML>
k.PhntTextarea
ThẻTEXTAREAcungcấpmộthộpchophépnhậpsốdòngtextdongườithiếtkếđịnh
trước.VÍDụ:
<TEXTAREANAME="fieldName"ROWS=10COLS=25>
DefaultTextHere
</TEXTAREA>
VÍDỤ:nàytạoramộttrườngtextchophépđưavào10hàng,mỗihàng25kýtự.Dòng
"DefautlTextHere"sẽxuấthiệntrongtrườngnàyvàolầnhiểnthịđầutiên.
Cũngnhưphầntửtext,JavaScriptcungcấpchobạncácthuộctínhdefaultValue,name,
vàvalue,cáccáchthứcfocus(),select(),vàblur(),cácthẻsựkiệnonBlur,onForcus,onChange,
onSelect.
Mảngelements[]
This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb Phần2:NgônNgữKịchBảnJavaScript
Biênsọan:DươngThànhPhết Trang55
Cácđốitượngcủaformcóthểđượcgọitớibằngmảngelements[].VÍDỤ:bạntạoramột
formsau:
<FORMMETHOD=POSTNAME=testform>
<INPUTTYPE="text"NAME="one">
<INPUTTYPE="text"NAME="two">
<INPUTTYPE="text"NAME="three">
</FORM>
Bạncóthểgọitớibathànhphầnnàynhưsau:
document.elements[0],document.elements[1],
document.elements[2],
Hơnnữacòncóthểgọi
document.testform.one,
document.testform.two,
document.testform.three.
3.ĐốitượngDate
ĐốitượngDatelàđốitượngcósẵntrongJavaScript.Nócungcấpnhiềuphươngthứccó
íchđểxửlývềthờigianvàngàytháng.
Cácphươngthức
dateVar.getDate() Trảlạingàytrongtháng(1-31)chodateVar.
dateVar.getDay() Trảlạingàytrongtuần(0=chủnhật,...6=thứbảy)chodateVar.
dateVar.getHours() Trảlạigiờ(0-23)chodateVar.
dateVar.getMinutes() Trảlạiphút(0-59)chodateVar.
dateVar.getSeconds() Trảlạigiây(0-59)chodateVar.
dateVar.getTime() Trảlạisốlượngcácmiligiâytừ00:00:00ngày1/1/1970.
dateVar.getTimeZoneOffset() Trảlạiđộdịchchuyểnbằngphútcủagiờđịaphươnghiệntạiso
vớigiờquốctếGMT.
dateVar.getYear() TrảlạinămchodateVar.
Date.parse(dateStr) PhântíchchuỗidateStrvàtrảlạisốlượngcácmiligiâytínhtừ
00:00:00ngày01/01/1970.
dateVar.setDay(day) ĐặtngàytrongthánglàdaychodateVar.
dateVar.setHours(hours) ĐặtgiờlàhourschodateVar.
dateVar.setMinutes(minutes) ĐặtphútlàminuteschodateVar.
dateVar.setMonths(months) ĐặtthánglàmonthschodateVar.
dateVar.setSeconds(seconds)
ĐặtgiâylàsecondschodateVar.
dateVar.setTime(value) Đặtthời gian là value, trong đó value biểu diễnsố lượng mili
giâytừ00:00:00ngày01/01/1970.
dateVar.setYear(years) ĐặtnămlàyearschodateVar.
dateVar.toGMTString() TrảlạichuỗibiểudiễndateVardướidạngGMT.
dateVar.toLocaleString() TrảlạichuỗibiểudiễndateVartheokhuvựcthờigianhiệnthời.
This is trial version
www.adultpdf.com