毕业论文外文翻译--使用JavaScript设计网页（适用于毕业论文外文翻译+中英文对照）Word格式.docx

毕业论文外文翻译--使用JavaScript设计网页（适用于毕业论文外文翻译+中英文对照）Word格式.docx

《毕业论文外文翻译--使用JavaScript设计网页（适用于毕业论文外文翻译+中英文对照）Word格式.docx》由会员分享，可在线阅读，更多相关《毕业论文外文翻译--使用JavaScript设计网页（适用于毕业论文外文翻译+中英文对照）Word格式.docx（13页珍藏版）》请在冰点文库上搜索。

ALERTBOXES

TopopupanalertboxincludethefollowinglineofcodeinsideofscripttagsinthebodyofyourHTMLdocument.Pleasenotethattheprocessingofthepagewillstopuntiltheviewerrespondstothealertbox.

alert（"

Placethetexttobedisplayedinthealertboxbetweenthesequotes.n）

Othertypesofpre-madedialogboxesareavailablesuchasthepromptandconfirmboxes.InordertotakefulladvantageofthefeaturesofthesedialogboxesyoumustwritemoreJavaScriptcodewhichcanusethevaluesthatarereturnedbythedialogboxes.

Thefollowingstatementswillpopupadialogboxthatrequiresayesornoanswer（OKorCancel）.IftheanswerisOKthenthevariablenamedanswerhasavalueoftrueandiftheanswerisCancelthenthevariablenamedanswerhasavalueoffalse.YoucanthenuseanifstatementintheJavaScriptcodetorespondappropriately.

varanswer=confirm（"

Areyousureyouwanttoquit?

"

）

if（answer==true）

（

window.close（）

}

Thefollowingcodewillpopupadialogboxthataskstheusertoentersomesortofinformation.IftheuserclicksOKtheinformationtheyenteredisstoredinthevariable.Thesecondsetofquotationmarksinsideofthepromptstatementmakethecontentsofthetextboxblankwhenthedialogboxisdisplayed.

varresponse=prompt（"

Whatisyourname?

document.write（"

fontsize=7color=redface=arial>

Hello"

+response+"

”）

Noticethatinthelasttwoexamplesthewindowanddocumentobjectswereused.Windowreferstothebrowserwindowanddocumentreferstothepagebeingdisplayed.Theuseofadotafterthenameoftheobjectallowsactionstobeperformedonthatobjectorpropertiesofthatobjecttobemodified.Inthisnextexample,thenavigatorobjectisreferencedinordertodisplaythebrowsernameandversion.

Youareusing"

+navigator.appName+"

version"

+navigator.appVersion+

POP-UPWINDOWS

AnadditionalbrowserwindowmaybeopenedusingasimpleJavaScript.Theopenmethodcontainsthreepartsasinthefollowingexample:

thenameofthedocumentorurlofthewebsitetobedisplayedinthenewwindow,thenamethatmaybeusedtorefertothebrowserwindow（requiresmorecodethanisshownhere）,andthepropertiesofthenewwindow.Pleasenotethatthepropertiesarealllistedinonesetofquotationmarksandareseparatedbycommas.

open（"

myfile.html”，"

mywin”,"

height=200,width=200,titlebar=false"

Thefollowingpropertiesmaybeusedtocontroltheappearanceofthenewwindow:

Tablel-lpropertiesmaybeusedtocontroltheappearanceofthenewwindow

Feature

Example

Description

height

height=200

determinestheheightofthenewwindowinpixels

width

width=200

determinesthewidthofthenewwindowinpixels

titlebar

titlebar=false

removesthetitlebarfromthenewwindow

location

includestheurl/addresstextboxinthenewwindow

menubar

includesamenubarinthenewwindow

resize

resize=off

makesthenewwindowafixedsize

scrollbars

addsscrollbarstothenewwindow

status

includesastatusbarforthenewwindow

toolbar

toolbar=yes

addsatoolbarforthenewwindow

WRITINGFUNCTIONS

FunctionsaresmallsubprogramsthatarelocatedwithinscripttagsbetweentheheadtagsofanHTMLdocument.FunctionsareexecutedwhentheyarecalledbynamefromaneventhandlerwithinthebodyofanHTMLdocument.

Thebasicstructureofafunctionisasfollows:

functionNameOfFunction（）

{

EVENTHANDLERS

Thefollowingexampledemonstratestheuseofeventhandleronclickaswellastheuseofstylestocontroltheappearanceofbuttons.Notethatinsteadofusingtype=submitforthebuttonthecodesimplysaystype=button.Copyandpastethisentiresetofcodeintoanewdocumentandtestitout.

html>

head>

title>

Sample<

/title>

styletype="

text/css"

#bigbutton（background-color:

yellow;

font-family:

arial;

color:

blue;

font-size:

18px;

height:

50px;

border-width:

0.2cm;

border-color:

red}

/style>

/head>

body>

formname=myform>

inputtype=buttonname=mybuttonid=bigbuttonvalue="

CLICKME!

onclick=,,window.location=,,n>

/form>

/body>

/html>

Changingthecodeforthebuttontoreadonclick="

myfunction（）"

willresultinexactlythesamethingasthepreviousexampleifthefollowingfunctionisincludedinascriptbetweentheheadtags.Typically,youwouldwriteafunctiononlyiftheeventrequiredmorethanonethingtohappen.

functionmyfunction（）

window.location="

Thefollowingaresomeoftheeventhandlersthatexistinjavascript:

Table1-2eventhandlersthatexistinjavascript

onfocus

onblur

onselect

onchange

onsubmit

onclick

onmouseover

onmouseout

onload

onunload

onabort

onerror

onreset

onkeypress

onkeyup

onmousedown

onmousemove

onmouseup

onmove

onresize

POP-UPMENUS

Pop-UpMenuscanbequicklycreatedbyusingtheselecttagasitwasusedinformstocreateadropdownlist.Setthevalueofeachoftheoptionsintheselecttagtotheurlofthenewpagetobedisplayed.Usetheonchangeeventhandlertosetthelocationofthewindowtotheselectedvalueinthedropdownlist.Forexample,iftheformisnamedmyform,theselecttagisnamedmychoices,andthevalueofeachoptionisaurlthenthestatementwindow.location=document.myform.mychoices.valuewilltakeyoutothenewpagethatwasselectedfromthedropdownlist.

Bydefaultonlyoneiteminalistisdisplayedbyaselectstatementuntiltheviewerclicksonthedownarrowtoexposetherestofthelist.Todisplaymorethatoneitematatime（andcreateatextboxwithaverticalscrollbar）includethesizeattributeintheselecttag.Forexample,size=5willdisplaythefirstfiveitemsinthelistandaddaverticalscrollbartotheboxiftherearemorethan5itemsinthelist.

MOUSEOVERS

Amouseoverreferstotheeffectthatoccurswhenthepropertiesofanobjectarechangedifthemouseispositionedoverthetopoftheobjectandthenagainifthemouseisremovedfromtheobject.Thequickestwaytogenerateamouseoveristousetheonmouseoverandonmouseouteventhandlersinaformofin-linestyle.

VisitthestylesectionoftheDHTMLpageofthiswebsitetoseeanexampleofmouseoversusedwithtextasanin-linestyle.Anystylepropertythatappliestoaparticularobjectcanbechangedastheresultofamouseover.

Performingmouseoverswithagraphicisnotmuchdifferentthanwithtext.Whenthedesiredeventoccurs（onmouseover,onmouseout）changethesourceofthegraphicasintheexamplethatfollows:

imgsrc="

picl.jpg"

onmouseover="

src=,pic2.jpgH,onmouseout="

src=,picl.jpg,n>

SCROLLINGTEXT

SincethemarqueetagisonlysupportedbyInternetExploreritisagoodideatoavoiditasmuchaspossibleanduseaJavaScripttogeneratescrollingtextinstead.WiththisJavaScriptitisalsoquiteeasytoplacethescrollingtextonthestatusbarinsteadofinthedocumentitselfbyusingwindow.statusasthedestinationforthemessage.Thefollowingfunctionwillgenerateascrollingmessageinatextboxnamedmymessageboxwhichispartofaformnamedmyform.Theeventhandleronloadmustalsobeusedinthebodytagtocallthefunctionwhenthepageloads.

varmessage="

Thisisatest..."

varposition=0

functionmymessage（）

document.myform.mymessagebox.value=

message.substring（position,message.length）+

message.substring（O,position）

position=position+1

if（position>

message.length）

position=0

window.setTimeout（"

mymessage（）”，300）

DATESANDTIMES

Datesandtimesareoftendisplayedonwebpagestoindicatewhenapagewaslastupdated,whenapagewasloaded,ortodisplayacountdowntoaparticularevent.Displayingthedateandtimeofthelastupdateisagoodpracticetogetintoforallofyourpagesbecausefrequentupdatesareonesignofaqualitysite.Thedate/timestampletstheviewerknowhowrecenttheinformationisandthereforeprovidesoneindicationofvalidity.Todisplaythedateandtimeofthelastupdate（thelasttimethedocumentwassaved）usethefollowingonelineinsideofscripttags:

Thispagelastupdated”+document.lastModified）

TodisplaythecurrenttimeanddateonawebpageyoumustdeclareavariableoftypeDate（varnow=newDate）.Thevariablecanthenbeusedtoaccessvariouspartsofthedateandtimeincludingdayoftheweek,month,dayofthemonth,year,hours（inmilitarytime）,minutes,andseconds.AssumingthatnowisthevariabledeclaredoftypeDatethefol