Web Page Design Using JavaScript.docx

Web Page Design Using JavaScript.docx

《Web Page Design Using JavaScript.docx》由会员分享，可在线阅读，更多相关《Web Page Design Using JavaScript.docx（19页珍藏版）》请在冰豆网上搜索。

WebPageDesignUsingJavaScript

外文原文

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.

#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）.Thevariablecanthenbeusedtoaccessvariouspartsofthedateandtimeincludingday