网页设计外文翻译.docx
《网页设计外文翻译.docx》由会员分享,可在线阅读,更多相关《网页设计外文翻译.docx(19页珍藏版)》请在冰豆网上搜索。
网页设计外文翻译
网页设计外文翻译
外文原文
Source:
WebPageDesignUsingJavaScript
THEBASICS
JAVASCRIPTusesasubsetoftheprogramminglanguageJAVAtoprovideahighlevelofinteractivityonawebpage.JavaScriptsarestoredwithinanHTMLdocumentandareinterpretedbythewebbrowser.
JavaScriptsmaybelocatedwithintheHTMLcodeatthepointinthepagewheretheyaretoappearonthescreenortheymaybewrittenusingfunctions.FunctionsaresmallsubprogramsthatarestoredbetweentheheadtagsofanHTMLdocumentandarecalledontobeexecutedwhenaparticulareventoccurs.
WhetherthescriptisstoredbetweentheheadtagsorwithinthebodyoftheHTMLdocument,itmustbeenclosedinscripttags.Also,asetofHTMLcommenttagsaretypicallyusedinsidethescripttagssothatolderbrowsersthatdonotsupportJavaScriptwillignorethescriptandcontinuetoprocessthepagewithouterrors.
Followingisanexampleofthescriptandcommenttags:
--
IncludeJavaScriptCodeHere
//-->
BeawarethatJavaScriptiscasesensitive...thedifferencebetweenaworkingscriptandanerrormessagecanbeonecapitalletter.
ALERTBOXES
TopopupanalertboxincludethefollowinglineofcodeinsideofscripttagsinthebodyofyourHTMLdocument.Pleasenotethattheprocessingofthepagewillstopuntiltheviewerrespondstothealertbox.
alert("Placethetexttobedisplayedinthealertboxbetweenthesequotes.")
Othertypesofpre-madedialogboxesareavailablesuchasthepromptandconfirmboxes.InordertotakefulladvantageofthefeaturesofthesedialogboxesyoumustwritemoreJavaScriptcodewhichcanusethevaluesthatarereturnedbythedialogboxes.
Thefollowingstatementswillpopupadialogboxthatrequiresayesornoanswer(OKorCancel).IftheanswerisOKthenthevariablenamedanswerhasavalueoftrueandiftheanswerisCancelthenthevariablenamedanswerhasavalueoffalse.YoucanthenuseanifstatementintheJavaScriptcodetorespondappropriately.
varanswer=confirm("Areyousureyouwanttoquit?
")
if(answer==true)
{
window.close()
}
Thefollowingcodewillpopupadialogboxthataskstheusertoentersomesortofinformation.IftheuserclicksOKtheinformationtheyenteredisstoredinthevariable.Thesecondsetofquotationmarksinsideofthepromptstatementmakethecontentsofthetextboxblankwhenthedialogboxisdisplayed.
varresponse=prompt("Whatisyourname?
","")
document.write("Hello"+response+"!
")
Noticethatinthelasttwoexamplesthewindowanddocumentobjectswereused.Windowreferstothebrowserwindowanddocumentreferstothepagebeingdisplayed.Theuseofadotafterthenameoftheobjectallowsactionstobeperformedonthatobjectorpropertiesofthatobjecttobemodified.Inthisnextexample,thenavigatorobjectisreferencedinordertodisplaythebrowsernameandversion.
alert("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:
Table1-1propertiesmaybeusedtocontroltheappearanceofthenewwindow
Feature
Example
Description
height
height=200
determinestheheightofthenewwindowinpixels
width
width=200
determinesthewidthofthenewwindowinpixels
titlebar
titlebar=false
removesthetitlebarfromthenewwindow
location
location
includestheurl/addresstextboxinthenewwindow
menubar
menubar
includesamenubarinthenewwindow
resize
resize=off
makesthenewwindowafixedsize
scrollbars
scrollbars
addsscrollbarstothenewwindow
status
status
includesastatusbarforthenewwindow
toolbar
toolbar=yes
addsatoolbarforthenewwindow
WRITINGFUNCTIONS
FunctionsaresmallsubprogramsthatarelocatedwithinscripttagsbetweentheheadtagsofanHTMLdocument.FunctionsareexecutedwhentheyarecalledbynamefromaneventhandlerwithinthebodyofanHTMLdocument.
Thebasicstructureofafunctionisasfollows:
functionNameOfFunction()
{
IncludeJavaScriptCodeHere
}
EVENTHANDLERS
Thefollowingexampledemonstratestheuseofeventhandleronclickaswellastheuseofstylestocontroltheappearanceofbuttons.Notethatinsteadofusingtype=submitforthebuttonthecodesimplysaystype=button.Copyandpastethisentiresetofcodeintoanewdocumentandtestitout.
Sample
#bigbutton{background-color:
yellow;font-family:
arial;color:
blue;
font-size:
18px;height:
50px;border-width:
0.2cm;border-color:
red}
"
onclick="window.location=''">
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:
SCROLLINGTEXT
SincethemarqueetagisonlysupportedbyInternetExploreritisagoodideatoavoiditasmuchaspossibleanduseaJavaScripttogeneratescrollingtextinstead.WiththisJavaScriptitisalsoquiteeasytoplacethescrollingtextonthestatusbarinsteadofinthedocumentitselfbyusingwindow.statusasthedestinationforthemessage.Thefollowingfunctionwillgenerateascrollingmessageinatextboxnamedmymessageboxwhichispartofaformnamedmyform.Theeventhandleronloadmustalsobeusedinthebodytagtocallthefunctionwhenthepageloads.
varmessage="Thisisatest... "
varposition=0
functionmymessage()
{
document.myform.mymessagebox.value=
message.substring(position,message.length)+
message.substring(0,position)
position=position+1
if(position>message.length)
{
position=0
}
window.setTimeout("mymessage()",300)
}
DATESANDTIMES
Datesandtimesareoftendisplayedonwebpagestoindicatewhenapagewaslastupdated,whenapagewasloaded,ortodisplayacountdowntoaparticularevent.Displayingthedateandtimeofthelastupdateisagoodpracticetogetintoforallofyourpagesbecausefrequentupdatesareonesignofaqualitysite.Thedate/timestampletstheviewerknowhowrecenttheinformationisandthereforeprovidesoneindicationofvalidity.Todisplaythedateandtimeofthelastupdate(thelasttimethedocumentwassaved)usethefollowingonelineinsideofscripttags:
document.write("Thispagelastupdated"+document.lastModified)
TodisplaythecurrenttimeanddateonawebpageyoumustdeclareavariableoftypeDate(varnow=newDate).Thevariablecanthenbeusedtoaccessvariouspartsofthedateandtimeincludingdayoftheweek,