網(wǎng)頁設(shè)計外文翻譯

1、<p><b>　　外文原文</b></p><p>　　Source: Web Page Design Using JavaScript</p><p>　　THE BASICS JAVASCRIPT uses a subset of the programming language JAVA to provide a high level of

2、interactivity on a web page. JavaScripts are stored within an HTML document and are interpreted by the web browser. JavaScripts may be located within the HTML code at the point in the page where they are to appear o

3、n the screen or they may be written using functions. Functions are small subprograms that are stored between the head tags of an HTML document and are called on to be executed when</p><p>　　<script langua

4、ge="javascript"><!--</p><p>　　Include JavaScript Code Here </p><p>　　//--></script> </p><p>　　Be aware that JavaScript is case sensitive...the difference

5、between a working script and an error message can be one capital letter. ALERT BOXES To pop up an alert box include the following line of code inside of script tags in the body of your HTML document. Please note

6、 that the processing of the page will stop until the viewer responds to the alert box. </p><p>　　alert ("Place the text to be displayed in the alert box between these quotes.") </p><p>

7、;　　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 valu

8、es that are returned by the dialog boxes. The following statements will pop up a dialog 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

9、 if the answer is Cancel then the variable named answer has a v</p><p>　　var answer = confirm ("Are you sure you want to quit?")if (answer==true){ window.close()}</p><p>　　The f

10、ollowing 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

11、rompt statement make the contents of the text box blank when the dialog box is displayed. </p><p>　　var response = prompt ("What is your name?" ,"")document.write ("<font size=7

12、color=red face=arial>Hello " + response + "!") </p><p>　　Notice that in the last two examples the window and document objects were used. Window refers to the browser window and document ref

13、ers 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 refe

14、renced in order to display the browser name and version. </p><p>　　alert ("You are using " + navigator.appName + " version " + navigator.appVersion + ".") </p><p>　

15、　POP-UP WINDOWS</p><p>　　An 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 sit

16、e to be displayed in the new 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

17、in one set of quotation marks and are separated by commas.</p><p>　　open ("myfile.html", "mywin", "height=200, width=200, titlebar=false") </p><p>　　The following p

18、roperties may be used to control the appearance of the new window: </p><p>　　Table1-1 properties may be used to control the appearance of the new window</p><p>　　WRITING FUNCTIONS</p><

19、;p>　　Functions 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 an HTML

20、document. The basic structure of a function is as follows: </p><p>　　function NameOfFunction( )</p><p><b>　　{</b></p><p>　　Include JavaScript Code Here </p>

21、<p><b>　　}</b></p><p>　　EVENT HANDLERS</p><p>　　The following example demonstrates the use of event handler onclick as well as the use of styles to control the appearance of but

22、tons. Note that instead of using type=submit for the button the code simply says type=button. Copy and paste this entire set of code in to a new document and test it out. </p><p>　　<html><head>

23、<title>Sample</title><style type="text/css"> #bigbutton {background-color : yellow; font-family : arial; color : blue;</p><p>　　font-size :18px; height : 50px; border-width :

24、 0.2cm; border-color : red}</style></head><body><form name=myform><input type=button name=mybutton id=bigbutton value="CLICK ME!"</p><p>　　onclick="window.locat

25、ion='http://www.disney.com'"></form></body></html></p><p>　　Changing the code for the button to read onclick="myfunction( )" will result in exactly the same thi

26、ng as the previous example if the following function is included in a script between the head tags. Typically, you would write a function only if the event required more than one thing to happen. </p><p>　　f

27、unction myfunction( ){</p><p>　　window.location = "http://www.disney.com"}</p><p>　　The following are some of the event handlers that exist in javascript: </p><p>　　Tabl

28、e1-2 event handlers that exist in javascript</p><p>　　POP-UP MENUS</p><p>　　Pop-Up Menus can be quickly created by using the select tag as it was used in forms to create a drop down list. Set th

29、e value of each of the options in the 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 t

30、he form is named myform, the select tag is named mychoices, and the value of each option is a url then the statement window.location = document.myform.mychoices.v</p><p>　　<img src="pic1.jpg" on

31、mouseover="src='pic2.jpg'" onmouseout="src='pic1.jpg'"> </p><p>　　SCROLLING TEXT</p><p>　　Since the marquee tag is only supported by Internet Explorer it i

32、s a good idea to avoid it as much as possible 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 i

33、tself by using window.status as the destination for the message. The following function will generate a scrolling message in a text box named mymessagebox which is part of a form named myform. The event handler onlo</

34、p><p>　　var message = "This is a test...           "</p><p>　　var position = 0function mymessage( ){ document.myform.mymessagebox.value=

35、    message.substring(position, message.length) +    message.substring(0, position) position = position + 1 if (position > message.length) { position = 0

36、 } window.setTimeout("mymessage( )", 300)}</p><p>　　DATES AND TIMES</p><p>　　Dates and times are often displayed on web pages to indicate when a page was last updated, when a pag

37、e was loaded, or to display a countdown 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

38、. The date/time stamp lets the viewer know how recent the information is and therefore provides one indication of validity. To display the date and time of the last update (the la</p><p>　　document.write (&q

39、uot;This page last updated " + document.lastModified) </p><p>　　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 b

40、e 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 fo

41、llowing table describes how to access the parts of the date and time. Each of the function calls may be used in a document.write statement to </p><p>　　Table1-3 various parts of the Date type variable</p&

42、gt;<p>　　One way to convert the numbers for the month and day of week in to words is to use if statements. Using a lot of if statements is not the most efficient way to display the words, but it is the method that

43、 requires the least amount of programming knowledge. Examine the following example. Notice the condition that follows the word if is in parentheses and that a double equal sign is used for the comparison. A single equal

44、sign will actually make the condition true no matter what so January would a</p><p>　　if (now.getMonth( ) == 0) </p><p>　　document.write ("January") </p><p>　　The followin

45、g function would display a working clock if your page contained a form called myform which contained a text box named mybox and the function was called using the onload event handler in the body tag. More code would need

46、 to be added to assure that the minutes and seconds always used two digits. </p><p>　　function myclock( )</p><p>　　{   var now = new Date    document.myfo

47、rm.mybox.value=       now.getHours( )+":"+now.getMinutes( )+":"+now.getSeconds( )    window.setTimeout ("myclock( )",1000) }<

48、;/p><p>　　To display a countdown to a future date, you will need two variables of type new Date. One of them will need to be set to the date that you are targeting with your countdown. The declarations would lo

49、ok as follows if you were going to count down to New Year's Day. </p><p>　　var now = new Datevar then = new Date("January 1, 2002") </p><p>　　The variable now in the above example

50、 actually holds the number of milliseconds that have passed since the computer started counting until now. The variable then in the above example actually holds the number of milliseconds that will have passed between th

51、e time the computer started counting and January 1, 2002. By subracting the two amounts and storing the answer in a new variable you will know the number of milliseconds between now and your target date. With a little di

52、vision, this number can</p><p>　　document.write("Only " + Math.ceil(numdays) + " days until New Year's!") </p><p>　　INTERACTIVE FORMS</p><p>　　Forms can be u

53、sed for a lot more than just submitting information through email. Forms can be made to perform all sorts of actions when buttons are clicked.</p><p><b>　　中文翻譯</b></p><p>　　出處：使用Java

54、Script設(shè)計網(wǎng)頁</p><p>　　THE BASICS基礎(chǔ)JAVASCRIPT uses a subset of the programming language JAVA to provide a high level of interactivity on a web page. JavaScript使用編程語言Java的一個子集在網(wǎng)頁上提供高層次的交互。 JavaScripts are st

55、ored within an HTML document and are interpreted by the web browser. JAVAScripts以HTML文件格式存儲，并是由Web瀏覽器解釋。JavaScripts may be located within the HTML code at the point in the page where they are to appear on the screen or

56、they may be written using functions. JavaScript可能位于HTML代碼中他們在屏幕中出現(xiàn)的位置上，也可能用函數(shù)寫成。Functions </p><p>　　Whether the script is stored between the head tags or within the body of the HTML document, it must be e

57、nclosed in script tags.無論腳本存儲于頭標(biāo)簽之間還是BODY中，它都必須包含在腳本標(biāo)記。Also, a set of HTML comment tags are typically used inside the script tags so that older browsers that do not support JavaScript will ignore the script and continue

58、to process the page without errors.此外，HTML注釋標(biāo)記通常用于腳本標(biāo)記內(nèi)，這樣，不支持JavaScript的舊版瀏覽器會忽略腳本并繼續(xù)處理頁面，而不顯示錯誤。</p><p>　　Following is an example of the script and comment tags:以下是一個腳本和注釋標(biāo)簽的例子： </p><p>　　<

59、script language="javascript"><script language="javascript"><!--</p><p>　　這里包含的JavaScript代碼//--></script> <!--Include JavaScript Code Here//--></script>

60、</p><p>　　Be aware that JavaScript is case sensitive...the difference between a working script and an error message can be one capital letter.要知道，JavaScript是區(qū)分大小寫的...一個可運行腳本同錯誤消息的區(qū)別常常就在于一個大寫字母。 ALERT BOXES

61、 警告框To pop up an alert box include the following line of code inside of script tags in the body of your HTML document. 為了彈出一個警告框，可將下面一行代碼包含到你的HTML文件的BODY中的腳本標(biāo)簽里。Please note that the processing of the page will stop

62、 until the viewer responds to the alert box.請注意該網(wǎng)頁的處理將停止，直到用戶響應(yīng)警告框。 </p><p>　　alert ("Place the text to be displayed in the alert box between these quotes.")alert ("將要顯示在警告框中的文本寫在引號之間")&l

63、t;/p><p>　　Other types of pre-made dialog boxes are available such as the prompt and confirm boxes.此外，還有其他類型的預(yù)制對話框可用，如提示框和確認(rèn)框。In order to take full advantage of the features of these dialog boxes you must write

64、 more JavaScript code which can use the values that are returned by the dialog boxes.為了充分利用這些對話框的功能，則必須編寫更多的JavaScript代碼，來使用這些對話返回的參數(shù)值。The following statements will pop up a dialog box that requires a yes or no answer (O

65、K or Cancel).下面的語句會彈出一個對話框，需要回答是或否（確定或取消）。If the answer is OK then the variable n</p><p>　　var answer = confirm ("Are you sure you want to quit?")if (answer==true){window.close()}var answer = c

66、onfirm ("Are you sure you want to quit?")if (answer==true){window.close()}</p><p>　　The following code will pop up a dialog box that asks the user to enter some sort of information.下面的代碼將彈出一個對話框，要求

67、用戶輸入某些信息。If the user clicks OK the information they entered is stored in the variable.如果用戶點擊確定他們輸入的信息將存儲在變量中。The second set of quotation marks inside of the prompt statement make the contents of the text box blank when t

68、he dialog box is displayed.第二對引號中的內(nèi)容是對話框顯示后空白文本框處的提示信息。 </p><p>　　var response = prompt ("What is your name?" ,"")document.write ("<font size=7 color=red face=arial>Hello &quo

69、t; + response + "!") </p><p>　　var response = prompt ("What is your name?" ,"")document.write ("<font size=7 color=red face=arial>Hello " + response + "!&qu

70、ot;)Notice that in the last two examples the window and document objects were used.請注意，最后兩個例子中使用了窗口和文檔對象。Window refers to the browser window and document refers to the page being displayed.窗口是指在瀏覽器窗口，而文檔是指顯示的頁面。The use o

71、f a dot after the name of the object allows actions to be performed on that object or properties of that object to be modified.對象名后使用一個逗點，后面可以是對象的動作或者是對象可以被改變的屬</p><p>　　alert ("You are using " + n

72、avigator.appName + " version " +     navigator.appVersion + ".") </p><p>　　alert ("You are using " + navigator.appName + " version " +navigator.appVers

73、ion + ".")POP-UP WINDOWS彈出窗口 An 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 s

74、ite to be displayed in the new 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</p

75、><p>　　open ("myfile.html", "mywin", "height=200, width=200, titlebar=false")open ("myfile.html", "mywin", "height=200, width=200, titlebar=false") &l

76、t;/p><p>　　The following properties may be used to control the appearance of the new window:下列屬性可用于控制新窗口的外觀： </p><p>　　表1-1 可用于控制新窗口外觀的屬性</p><p>　　WRITING FUNCTIONS編寫函數(shù)</p><

77、p>　　Functions are small subprograms that are located within script tags between the head tags of an HTML document.函數(shù)是小的子程序，存儲于HTML文件的頭標(biāo)簽之間。Functions are executed when they are called by name from an event handler with

78、in the body of an HTML document.當(dāng)被HTML文件的BODY中的一個事件處理程序調(diào)用時，函數(shù)將被執(zhí)行。 The basic structure of a function is as follows: 該函數(shù)的基本結(jié)構(gòu)如下：</p><p>　　function NameOfFunction( )</p><p><b>　　{</b&

79、gt;</p><p>　　JavaScript代碼</p><p><b>　　}</b></p><p>　　function NameOfFunction( ){Include JavaScript Code Here}EVENT HANDLERS事件處理程序 </p><p>　　The following ex

80、ample demonstrates the use of event handler onclick as well as the use of styles to control the appearance of buttons.下面的例子展示了onclick事件處理程序的使用，以及使用樣式來控制按鈕的外觀。Note that instead of using type=submit for the button the code

81、 simply says type=button.請注意，用簡單的type=button來代替type=submit。Copy and paste this entire set of code in to a new document and test it out.復(fù)制并粘貼此代碼到一個新文件，并測試它。 </p><p>　　<html><head><title>Sa

82、mple</title><style type="text/css"> #bigbutton {background-color : yellow; font-family : arial; color : blue;    font-size :18px; height : 50px; border-width : 0.2cm; border-col

83、or : red}</style></head><body><form name=myform><input type=button name=mybutton id=bigbutton value="CLICK ME!"    onclick="window.location='http://www.d

84、isney.com'"></form></body></html></p><p>　　Changing the code for the button to read onclick="myfunction( )" will result in exactly the same thing as the previous ex

85、ample if the following function is included in a script between the head tags.如果下面的函數(shù)被包含在腳本的頭標(biāo)簽之間，則改變按鈕的代碼去讀onclick="myfunction( )"，將會與前面例子的結(jié)果相同 Typically, you would write a function only if the event required

86、more than one thing to happen.。通常只寫一個函數(shù)，除非要求一個以上事情發(fā)生。</p><p>　　function myfunction( ){ window.location = "http://www.disney.com"}</p><p>　　The following are some of the event han

87、dlers that exist in javascript:下面是JavaScript中存在的一些事件處理程序： </p><p>　　表1-2 JavaScript中存在的一些事件處理程序</p><p>　　POP-UP MENUS 彈出菜單 Pop-Up Menus can be quickly created by using the select tag as

88、it was used in forms to create a drop down list.彈出菜單可以使用選擇標(biāo)記快速建立，因為它是用于建立下拉列表的。在鉆則標(biāo)簽中設(shè)置選項的值，指示要顯示新的一頁的URL。Set the value of each of the options in the select tag to the url of the new page to be displayed. Use the onchang

89、e event handler to set the location of the window to the selected value in the drop down list.使用onchange事件處理程序來設(shè)置下拉菜單中被選中值對應(yīng)窗口的位置。For example, if the form is named myform, the select tag is n</p><p>　　By def

90、ault 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.默認(rèn)情況下列表中只顯示有一項（用一條選擇語句），只有用戶點擊下箭頭是才將列表其余部分展開。To display more that one item at a tim

91、e (and create a text box with a vertical scrollbar) include the size attribute in the select tag.要同時顯示一項以上內(nèi)容（建立一個有垂直滾動條的文本框），在選擇標(biāo)簽中包含尺寸參數(shù)。For example, size=5 will display the first five items in the list and add a vertic

92、al scroll bar to the box if there are more than 5 item</p><p>　　作為鼠標(biāo)懸停的結(jié)果，任何應(yīng)用于特定對象的樣式屬性都可以被改變。The quickest way to generate a mouseover is to use the onmouseover and onmouseout event handlers in a form of in

93、-line style.Visit the style section of the DHTML page of this web site to see an example of mouseovers used with text as an in-line style.Performing mouseovers with a graphic is not much different than with text. 在圖形上實現(xiàn)

94、鼠標(biāo)懸停與文本沒有太大區(qū)別。When the desired event occurs (onmouseover, onmouseout) change the source of the graphic as in the example that follows:當(dāng)事件</p><p>　　<img src="pic1.jpg" </p><p>　　onmo

95、useover="src='pic2.jpg'" onmouseout="src='pic1.jpg'"> </p><p>　　SCROLLING TEXT滾動文字 </p><p>　　由于只有IE瀏覽器支持字幕標(biāo)簽，所以應(yīng)該盡量避免使用它，而利用一個JavaScript來產(chǎn)生滾動文字。Since the m

96、arquee tag is only supported by Internet Explorer it is a good idea to avoid it as much as possible and use a JavaScript to generate scrolling text instead.With this JavaScript it is also quite easy to place the scrollin

97、g text on the status bar instead of in the document itself by using window.status as the destination for the message.有了這個JavaScript也是很容易把滾動文字放在狀態(tài)欄上，而不是在它自己的文件中利用window.status作為消息的目的地。The following function will generat&l

98、t;/p><p>　　var message = "This is a test...           "var position = 0function mymessage( ){ document.myform.mymessagebox.value=    

99、;message.substring(position, message.length) +    message.substring(0, position) position = position + 1 if (position > message.length) { position = 0 } window.setTimeout(&q

100、uot;mymessage( )", 300)}</p><p>　　DATES AND TIMES日期和時間 </p><p>　　Dates and times are often displayed on web pages to indicate when a page was last updated, when a page was loaded, or to di

101、splay a countdown to a particular event.日期和時間，往往顯示在網(wǎng)頁顯示中，用于表明頁面的最后更新時間，加載時間，或顯示特定事的倒計時。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 on

102、e sign of a quality site.顯示最后更新的日期和時間的一個好的做法，因為頻繁更新是網(wǎng)站質(zhì)量的標(biāo)志。The date/time stamp lets the viewer know how recent the information is and therefore provides one</p><p>　　document.write ("This page last upd

103、ated " + document.lastModified) document.write ("This page last updated " + document.lastModified)</p><p>　　To display the current time and date on a web page you must declare a variable of ty

104、pe 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.要在網(wǎng)頁上顯示當(dāng)