Tải bản đầy đủ (.pdf) (9 trang)
  1. Trang chủ
    2. >>
  2. Công Nghệ Thông Tin
    3. >>
  3. Kỹ thuật lập trình

BÀI GIẢNG MÔN THIẾT KẾ WEB: NGÔN NGỮ JavaScript docx

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 (363.72 KB, 9 trang )

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.Phn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.Phn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ạncó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ựachọ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áclựachọnđượcchứatrongmộtmảngđược
đánhsốtừ0.Trongtrườnghợpnà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ọnmớ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.Phn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đượcchỉ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.Phn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.Phn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
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56
Date.UTC (year, month, day
[,hours][,minutes][,seconds])
Trảlạisốlượngmiligiâytừ00:00:0001/01/1970GMT.
Vídụ:Tạotrang(DatTime.htm)
<head><metacontent="charset=unicode"></head>

<ScriptLanguage="JavaScript">
mydate=newDate();
myday=mydate.getDay();
mymonth=mydate.getMonth()+1;
myweekday=mydate.getDate();
weekday=myweekday;
myyear=1900+mydate.getYear();
myhours=mydate.getHours();
ampmhour=(myhours>12)?myhours-12:myhours;
ampm=(myhours>=12)?'Bu
ổichiều':'Buổisáng';
myminutes=mydate.getMinutes();
myminutes=((mytime<10)?':0':':')+mytime;
if(myday==0) 
day="Ch
ủnhật,";
elseif(myday==1)
   day="Th
ứhai,";
  elseif(myday==2)
   day="Th
ứba,";
    elseif(myday==3)
     day="Th
ứtư,";
     elseif(myday==4)
      day="Th
ứnăm,";
      elseif(myday==5)
       day="Th

ứsáu,";
       elseif(myday==6)
        day="Th
ứbảy,";
</script>
<body> 
<script>
document.write("<b>"+"Bâygi
ờlà:"+ampmhour+""+myminutes+""+ampm)
document.write("-"+day+"Ngày"+myweekday+"");
document.write("Tháng"+mymonth+"N
ăm"+year+"</font>");
</script>
</body>

4.ĐốitượngMath
ĐốitượngMathlàđốitượngnộitạitrongJavaScript.Cácthuộctínhcủađốitượngnày
chứanhiềuhằngsốtoánhọc,cáchàmtoánhọc,lượnggiácphổbiến
Cácthuộctính
E   HằngsốEuler,khoảng2,718.
LN2  logarittựnhiêncủa2,khoảng0,693.
LN10 logarittựnhiêncủa10,khoảng2,302.
LOG2E  logaritcơsố2củae,khoảng1,442.
PI   Giátrịcủa,khoảng3,14159.
SQRT1_2 Cănbậc2của0,5,khoảng0,707.
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57
SQRT2  Cănbậc2của2,khoảng1,414.
Cácphươngthức
Math.abs(number) Trảlạigiátrịtuyệtđốicủanumber.
Math.acos(number) Trả lại giá trị arc cosine (theo radian) của number. Giá trị của
numberphảinămggiữa1và1.
Math.asin(number) Trảlạigiátrịarcsine(theoradian)củanumber.Giátrịcủanumber
phảinămggiữa1và1.
Math.atan(number) Trảlạigiátrịarctan(theoradian)củanumber.
Math.ceil(number) Trảlạisốnguyênnhỏnhấtlớnhơnhoặcbằngnumber.
Math.cos(number) Trảlạigiátrịcosinecủanumber.
Math.exp(number) Trảlạigiátrịe^number,vớielàhằngsốEuler.
Math.floor(number) Trảlạisốnguyênlớnnhấtnhỏhơnhoặcbằngnumber.
Math.log(number) Trảlạilogarittựnhiêncủanumber.
Math.max(num1,num2) Trảlạigiátrịlớnnhấtgiữanum1vànum2
Math.min(num1,num2) Trảlạigiátrịnhỏnhấtgiữanum1vànum2.
Math.pos(base,exponent) Trảlạigiátrịbaseluỹthừaexponent.
Math.random(r) Trảlạimộtsốngẫunhiêngiữa0và1.Phwongthứcnàychỉthực
hiệnđượctrênnềntảngUNIX.
Math.round(number) Trảlạigiátrịcủanumberlàmtròntớisốnguyêngầnnhất.
Math.sin(number) Trảlạisincủanumber.
Math.sqrt(number) Trảlạicănbậc2củanumber.
Math.tan(number) Trảlạitagcủanumber.
5.ĐốitượngString
Đối tượng String là đối tượng được xây dựng nội tại trongJavaScript cung cấp nhiều
phươngthứcthaotáctrênchuỗi.
Cácphươngthức
str.anchor(name) Đượcsửdụngđểtạora thẻ<A>(mộtcách động). Thamsố
namelàthuộctínhNAMEcủathẻ<A>.
str.big() Kếtquảgiốngnhưthẻ<BIG>trênchuỗistr.

str.blink() Kếtquảgiốngnhưthẻ<BLINK>trênchuỗistr.
str.bold() Kếtquảgiốngnhưthẻ<BOLD>trênchuỗistr.
str.charAt(a) Trảlạikýtựthứatrongchuỗistr.
str.fixed() Kếtquảgiốngnhưthẻ<TT>trênchuỗistr.
str.fontcolor() Kếtquảgiốngnhưthẻ<FONTCOLOR=color>.
str.fontsize(size) Kếtquảgiốngnhưthẻ<FONTSIZE=size>.
str.index0f(srchStr[,index]) Trảlạivịtrítrongchuỗistrvịtríxuấthiệnđầutiêncủachuỗi
srchStr.Chuỗistrđượctìmtừtráisangphải.Thamsốindexcó
thểđượcsửdụngđểxácđịnhvịtríbắtđầutìmkiếm
str.italics() Kếtquảgiốngnhưthẻ<I>trênchuỗistr.
str.lastIndex0f(srchStr[,index])

Trảlạivịtrítrongchuỗistrvịtríxuấthiệncuốicùngcủachuỗi
srchStr.Chuỗistrđượctìmtừphảisangtrái.Thamsốindexcó
thểđượcsửdụngđểxácđịnhvịtríbắtđầutìmkiếm.
str.link(href) Đượcsửdụngđểtạoramộtkết nốiHTMLđộngchochhuỗi
str.ThamsốhreflàURLđíchcủaliênkết.
str.small() Kếtquảgiốngnhưthẻ<SMALL>trênchuỗistr.
str.strike() Kếtquảgiốngnhưthẻ<STRIKE>trênchuỗistr.
str.sub() Tạoramộtsubscriptchochuỗistr,giốngthẻ<SUB>.
str.substring(a,b) Trảlạichuỗiconcủastrlàcáckýtựtừvịtríthứatớivịtríthứ
b.Cáckýtựđượcđếmtừtráisangphảibắtđầutừ0.
str.sup() Tạorasuperscriptchochuỗistr,giốngthẻ<SUP>.
str.toLowerCase() Đổichuỗistrthànhchữthường.
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58

str.toUpperCase() Đổichuỗistrthànhchữhoa.
6.Đốitượnghistory
ĐốitượngnàyđượcsửdụngđểlưugiữcácthôngtinvềcácURLtrướcđượcngườisử
dụngsửdụng.DanhsáchcácURLđượclưutrữtheothứtựthờigian.
Cácthuộctính
Length-SốlượngcácURLtrongđốitượng.
Cácphươngthức
history.back()-ĐượcsửdụngđểthamchiếutớiURLmớiđượcthămtrướcđây.
history.forward()-ĐượcsửdụngđểthamchiếutớiURLkếtiếptrongdanhsách.
history.go(delta|"location")-Đượcsửdụngđểchuyểnlênhaychuyểnxuốngdeltabậc
haydichuyểnđến URLxác định bởilocationtrong danh sách.Dịchchuyểnlên phía trênkhi
deltadươngvàxuốngphíadướikhideltaâm.
7.Đốitượnglinks
Đốitượnglinklàmộtđoạnvănbảnhaymộtảnhđượcxemlàmộtsiêuliênkết.Cácthuộc
tínhcủađốitượnglinkchủyếuxửlývềURLcủacácsiêuliênkết.
VÍDụ:http://www.abc.com/chap1/page2.html#topic3
Cácthuộctính
hash Tênanchorcủavịtríhiệnthời(VÍDỤ:topic3).
Host Phầnhostname:portcủaURL(VÍDỤ:www.abc.com).
Hostname Têncủahostvàdomain(VÍDỤ:ww.abc.com).
href ToànbộURLchodocumenthiệntại.
Pathname PhầnđườngdẫncủaURL(VÍDỤ:/chap1/page2.html).
port Cổngtruyềnthôngđượcsửdụngchomáytínhhost,thườnglàcổngngầmđịnh.
Protocol Giaothứcđượcsửdụng(cùngvớidấuhaichấm)(VÍDỤ:http:).
Search CâutruyvấntìmkiếmcóthểởcuốiURLchocácscriptCGI.
Target GiốngthuộctínhTARGETcủa<LINK>
8.Đốitượnglocation
CácthuộctínhcủađốitượnglocationduytrìcácthôngtinvềURLcủadocumenthiện
thời.
Vídụ:http://www.abc.com/chap1/page2.html#topic3

Cácthuộctính
hash Tênanchorcủavịtríhiệnthời(VÍDỤ:topic3).
Host Phầnhostname:portcủaURL(VÍDỤ:www.abc.com).
Hostname Têncủahostvàdomain(VÍDỤ:www.abc.com).
href ToànbộURLchodocumenthiệntại.
Pathname PhầnđườngdẫncủaURL(VÍDỤ:/chap1/page2.html).
Port Cổngtruyềnthôngđượcsửdụngchomáytínhhost,thườnglàcổngngầmđịnh.
Protocol Giaothứcđượcsửdụng(cùngvớidấuhaichấm)(VÍDỤ:http:).
Search CâutruyvấntìmkiếmcóthểởcuốiURLchocácscriptCGI.
9.ĐốitượngNavigator
Đốitượngnàyđượcsửdụngđượccácthôngtinvềtrìnhduyệtnhưsốphiênbản.Đối
tượngnàykhôngcóphươngthứchaysựkiện.
Cácthuộctính
appCodeName Xácđịnhtênmãnộitạicủatrìnhduyệt(Atlas).
AppName Xácđịnhtêntrìnhduyệt.
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59
AppVersion Xácđịnhthôngtinvềphiênbảncủađốitượngnavigator.
userAgent Xácđịnhheadercủauser-agent.
10.Đốitượngdocument
Đốitượngnàychứacácthôngtinvềdocumenthiệnthời.Đốitượngdocumentđượctạo
rabằngcặpthẻ<BODY>và</BODY>.Mộtsốcácthuộctínhgắnvớithẻ<BODY>.
Cácthuộctính
alinkColor GiốngnhưthuộctínhALINK.
anchor Mảngtấtcảcácanchortrongdocument.
bgColor GiốngthuộctínhBGCOLOR.

cookie Sửdụngđểxácđịnhcookie.
fgColor GiốngthuộctínhTEXT.
forms Mảngtấtcảcácformtrongdocument.
lastModified Ngàycuốicùngvănbảnđượcsửa.
linkColor GiốngthuộctínhLINK.
links Mảngtấtcảcáclinktrongdocument.
location URLđầyđủcủavănbản.
referrer URLcủavănbảngọinó.
title Nộidungcủathẻ<TITLE>.
vlinkColor GiốngthuộctínhVLINK.
Cácphươngthức 
document.clear Xoádocumenthiệnthời.
document.close Đóngdòngdữliệuvàovàđưatoànbộdữliệuramànhình.
document.open(["mineType"]) Mở một stream để thu thập dữ liệu vào của các phương
thứcwritevàwriteln.
document.write(expression1
[,expression2] [,expressionN])
ViếtbiểuthứcHTMLlênvănbảntrôngmộtcửasổxácđịnh.

document.writeln(expression1
[,expression2] [,expressionN])
Giống phương thức trên nhưng khi hết mỗi biểu thức lại
xuốngdòng.

L
ỜIKẾT
BạncóthểthamkhảotoàndiệnJavaScripttrongquyểnTeachYourselfJavaScriptin14
Days, hoặc JavaScript Guide. Do JavaScript là ngôn ngữ còn mới và có sự thay đổi nhanh
chóng,bạnnênđếnvớitrangWebcủahãngNetscape()đểcócác
thôngtinmớinhấtvềngônngữnày.

This is trial version
www.adultpdf.com

Tài liệu liên quan

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

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