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

1、ALERT BOXESTo pop up an alert box include the following line of code inside of script tags in the body of your HTML document. Please note that the processing of the page will stop until the viewer responds to the alert box.alert （Place the text to be displayed in the alert box between these quotes.n

2、）Other types of pre-made dialog boxes are available such as the prompt and confirm boxes. In order to take full advantage of the features of these dialog boxes you must write more JavaScript code which can use the values that are returned by the dialog boxes.The following statements will pop up a di

3、alog box that requires a yes or no answer （OK or Cancel）. If the answer is OK then the variable named answer has a value of true and if the answer is Cancel then the variable named answer has a value of false. You can then use an if statement in the JavaScript code to respond appropriately.var answe

4、r = confirm （Are you sure you want to quit?）if （answer=true）（window.close（）The following code will pop up a dialog box that asks the user to enter some sort of information. If the user clicks OK the information they entered is stored in the variable. The second set of quotation marks inside of the p

5、rompt statement make the contents of the text box blank when the dialog box is displayed.var response = prompt （What is your name?document.write （font size=7 color=red face=arialHello + response + ”）Notice that in the last two examples the window and document objects were used. Window refers to the

6、browser window and document refers to the page being displayed. The use of a dot after the name of the object allows actions to be performed on that object or properties of that object to be modified. In this next example, the navigator object is referenced in order to display the browser name and v

7、ersion.You are using + navigator.appName + version + navigator.appVersion +POP-UP WINDOWSAn additional browser window may be opened using a simple JavaScript. The open method contains three parts as in the following example: the name of the document or url of the web site to be displayed in the new

8、window, the name that may be used to refer to the browser window （requires more code than is shown here）, and the properties of the new window. Please note that the properties are all listed in one set of quotation marks and are separated by commas.open （myfile.html”，mywin”, height=200, width=200, t

9、itlebar=falseThe following properties may be used to control the appearance of the new window:Tablel-l properties may be used to control the appearance of the new windowFeatureExampleDescriptionheightheight = 200determines the height of the new window in pixelswidthwidth=200determines the width of t

10、he new window in pixelstitlebartitlebar=falseremoves the title bar from the new windowlocationincludes the url / address text box in the new windowmenubarincludes a menu bar in the new windowresizeresize=offmakes the new window a fixed sizescrollbarsadds scrollbars to the new windowstatusincludes a

11、status bar for the new windowtoolbartoolbar=yesadds a toolbar for the new windowWRITING FUNCTIONSFunctions are small subprograms that are located within script tags between the head tags of an HTML document. Functions are executed when they are called by name from an event handler within the body of

12、 an HTML document.The basic structure of a function is as follows:function NameOfFunction（）EVENT HANDLERSThe following example demonstrates the use of event handler onclick as well as the use of styles to control the appearance of buttons. Note that instead of using type=submit for the button the co

13、de simply says type=button. Copy and paste this entire set of code in to a new document and test it out.htmlheadtitleS amplestyle type=text/css#bigbutton （background-color : yellow; font-family : arial; color : blue;font-size :18px; height: 50px; border-width : 0.2cm; border-color : red/style/headbo

14、dyform name=myforminput type=button name=mybutton id=bigbutton value= CLICK ME!onclick=,window.location=,n/form/body/htmlChanging the code for the button to read onclick=myfunction（ ） will result in exactly the same thing as the previous example if the following function is included in a script betw

15、een the head tags. Typically, you would write a function only if the event required more than one thing to happen.function myfunction（）window.location = The following are some of the event handlers that exist in javascript:Table 1-2 event handlers that exist in javascriptonfocusonbluronselectonchang

16、eonsubmitonclickonmouseoveronmouseoutonloadonunloadonabortonerroronresetonkeypressonkeyuponmousedownonmousemoveonmouseuponmoveonresizePOP-UP MENUSPop-Up Menus can be quickly created by using the select tag as it was used in forms to create a drop down list. Set the value of each of the options in th

17、e select tag to the url of the new page to be displayed. Use the onchange event handler to set the location of the window to the selected value in the drop down list. For example, if the form is named myform, the select tag is named mychoices, and the value of each option is a url then the statement

18、 window.location = document.myform.mychoices.value will take you to the new page that was selected from the drop down list.By default only one item in a list is displayed by a select statement until the viewer clicks on the down arrow to expose the rest of the list. To display more that one item at

19、a time （and create a text box with a vertical scrollbar） include the size attribute in the select tag. For example, size=5 will display the first five items in the list and add a vertical scroll bar to the box if there are more than 5 items in the list.MOUSEOVERSA mouseover refers to the effect that

20、 occurs when the properties of an object are changed if the mouse is positioned over the top of the object and then again if the mouse is removed from the object. The quickest way to generate a mouseover is to use the onmouseover and onmouseout event handlers in a form of in-line style.Visit the sty

21、le section of the DHTML page of this web site to see an example of mouseovers used with text as an in-line style. Any style property that applies to a particular object can be changed as the result of a mouseover.Performing mouseovers with a graphic is not much different than with text. When the des

22、ired event occurs （onmouseover, onmouseout） change the source of the graphic as in the example that follows:img src=picl.jpg onmouseover=src=,pic2.jpgH, onmouseout=src=,picl.jpg,nSCROLLING TEXTSince the marquee tag is only supported by Internet Explorer it is a good idea to avoid it as much as possi

23、ble and use a JavaScript to generate scrolling text instead. With this JavaScript it is also quite easy to place the scrolling text on the status bar instead of in the document itself by using window.status as the destination for the message. The following function will generate a scrolling message

24、in a text box named mymessagebox which is part of a form named myform. The event handler onload must also be used in the body tag to call the function when the page loads.var message = This is a test. var position = 0function mymessage（）document.myform.mymessagebox.value=message.substring（position,

25、message.length） +message.substring（O, position）position = position + 1if （position message.length）position = 0window.setTimeout（mymessage（ ）”，300）DATES AND TIMESDates and times are often displayed on web pages to indicate when a page was last updated, when a page was loaded, or to display a countdow

26、n to a particular event. Displaying the date and time of the last update is a good practice to get in to for all of your pages because frequent updates are one sign of a quality site. The date/time stamp lets the viewer know how recent the information is and therefore provides one indication of vali

27、dity. To display the date and time of the last update （the last time the document was saved） use the following one line inside of script tags:This page last updated ” + document.lastModified）To display the current time and date on a web page you must declare a variable of type Date （ var now = new Date）. The variable can then be used to access various parts of the date and time including day of the week, month, day of the month, year, hours （in military time）, minutes, and seconds. Assuming that now is the variable declared of type Date the fol