Web Page Design Using JavaScript.docx
- 文档编号:10565825
- 上传时间:2023-02-21
- 格式:DOCX
- 页数:19
- 大小:29.16KB
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("
")
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web Page Design Using JavaScript