网页设计外文翻译.doc

大连交通大学2013届本科生毕业设计（论文）外文翻译外文原文Source: Web Page Design Using JavaScriptTHE BASICS JAVASCRIPT uses a subset of the programming language JAVA to provide a high level of 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 on 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 a particular event occurs. Whether the script is stored between the head tags or within the body of the HTML document, it must be enclosed in script tags. 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 to process the page without errors. Following is an example of the script and comment tags: Be aware that JavaScript is case sensitive.the difference 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 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.) 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 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 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 answer = 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 prompt statement make the contents of the text box blank when the dialog box is displayed. var response = prompt (What is your name? ,)document.write (Hello + response + !) 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 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 version. alert (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 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, titlebar=false) The following properties may be used to control the appearance of the new window: Table1-1 properties may be used to control the appearance of the new windowFeatureExampleDescriptionheight height = 200 determines the height of the new window in pixels width width=200 determines the width of the new window in pixels titlebar titlebar=false removes the title bar from the new window location location includes the url / address text box in the new window menubar menubar includes a menu bar in the new window resize resize=off makes the new window a fixed size scrollbars scrollbars adds scrollbars to the new window status status includes a status bar for the new window toolbar toolbar=yes adds a toolbar for the new window WRITING 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 an HTML document. The basic structure of a function is as follows: function NameOfFunction( )Include JavaScript Code Here 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 code simply says type=button. Copy and paste this entire set of code in to a new document and test it out. Sample #bigbutton background-color : yellow; font-family : arial; color : blue;font-size :18px; height : 50px; border-width : 0.2cm; border-color : redChanging 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 between 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: Table1-2 event handlers that exist in javascriptonfocusonbluronselectonchangeonsubmitonclickonmouseoveronmouseoutonloadonunloadonabortonerroronresetonkeypressonkeyuponmousedownonmousemoveonmouseuponmoveonresizePOP-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 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 the 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.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 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. MOUSEOVERS A mouseover refers to the effect that 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 style 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 desired event occurs (onmouseover, onmouseout) change the source of the graphic as in the example that follows: SCROLLING TEXTSince the marquee 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 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 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, message.length) + message.substring(0, position) position = position + 1 if (position message.length) position = 0 window.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 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. 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 last time the document was saved) use the following one line inside of script tags: document.write (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 following 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 display the result. Table1-3 various parts of the Date type variableFunction CallDescriptionnow.getDay( ) Returns a number between 0 and 6 for the day of the week (Sunday is 0, Monday is 1,.) now.getMonth( ) Returns a number between 0 and 11 for the month (January is 0, February is 1,.) now.getDate( ) Returns the number of the day in the month (1 - 31) now.getFullYear( ) Returns the four digit year now.getHours( ) Returns the number of hours on the clock (0 - 23) now.getMinutes( ) Returns the number of minutes on the clock (0 - 59) now.getSeconds( ) Returns the number of seconds on the clock (0 - 59) 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 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 sign will actually make the condition true no matter what so January would always be displayed. if (now.getMonth( ) = 0) document.write (January) The following 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 to be added to assure that the minutes and seconds always used two digits. function myclock( ) var now = new Date document.myform.mybox.value= now.getHours( )+:+now.getMinutes( )+:+now.getSeconds( ) window.setTimeout (myclock( ),1000) 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 look as follows if you were going to count down to New Years Day. var now = new Datevar then = new Date(January 1, 2002) The variable now in the above example 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 the 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 division, this number can be converted to the number of days between now and your target date. In order to display the result as an integer, you will need to use the Math.ceil function as in the following example which uses the variable numdays to hold the number of days to be displayed. Ceil is short for ceiling which implies that the number will be rounded up to the nearest whole number. document.write(Only + Math.ceil(numdays) + days until New Years!) INTERACTIVE FORMSForms can be used for a lot more than just submitting information through email. Forms can be made to perform all sorts of actions when buttons are clicked.中文翻译出处：使用JavaScript设计网页THE BASICS基础JAVASCRIPT uses a subset of the programming language JAVA to provide a high level of interactivity on a web page. JavaScript使用编程语言Java的一个子集在网页上提供高层次的交互。 JavaScripts are stored 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 they may be written using functions. JavaScript可能位于HTML代码中他们在屏幕中出现的位置上，也可能用函数写成。Functions are small subprograms that are stored between the head tags of an HTML document and are called on to be executed when a particular event occurs.函数是小的子程序，存储于HTML文件的头标签之间，当一个特定的事件发生时将被调用执行。Whether the script is stored between the head tags or within the body of the HTML document, it must be enclosed in script tags.无论脚本存储于头标签之间还是BODY中，它都必须包含在脚本标记。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 to process the page without errors.此外，HTML注释标记通常用于脚本标记内，这样，不支持JavaScript的旧版浏览器会忽略脚本并继续处理页面，而不显示错误。Following is an example of the script and comment tags:以下是一个脚本和注释标签的例子： Be aware that JavaScript is case sensitive.the difference between a working script and an error message can be one capital letter.要知道，JavaScript是区分大小写的.一个可运行脚本同错误消息的区别常常就在于一个大写字母。 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. 为了弹出一个警告框，可将下面一行代码包含到你的HTML文件的BODY中的脚本标签里。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.)alert (将要显示在警告框中的文本写在引号之间)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.为了充分利用这些对话框的功能，则必须编写更多的JavaScript代码，来使用这些对话返回的参数值。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 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.然后，您可以使用JavaScript代码语句作出适当响应。var answer = confirm (Are you sure you want to quit?)if (answer=true)window.close()var answer = 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 prompt statement make the contents of the text box blank when the dialog box is displayed.第二对引号中的内容是对话框显示后空白文本框处的提示信息。 var response = prompt (What is your name? ,)document.write (Hello + response + !) var response = prompt (What is your name? ,)document.write (Hello + response + !)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 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 version.在接下来的例子中，引入了导航器对象，以显示浏览器名称和版本。 alert (You are using + navigator.appName + version + navigator.appVersion + .) alert (You are using + navigator.appName + version +navigator.appVersion + .)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 nam