THÔNG TIN TÀI LIỆU
Variables, Expressions, and Evaluations JavaScript 1.5 1-25 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 1: Introduction TIP: Because this lab includes a great deal of typed code, we‘ve tried to make it simpler for you. You‘ll find all the code in HelloWorld.html, in the Completed subdirectory for this lab. To avoid typing the code, you can cut/paste it from the source file instead. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 1: Introduction 1-26 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 1 Overview In this lab you‘ll learn where to properly place your scripts, how to include an external library script, and how to work with simple variable conversions and arithmetic. To complete this lab, you will need to work through three exercises: Dynamic Writing and Event Handlers Launch External Scripts JavaScript Links and Calculations Each exercise includes an ―Objective‖ section that describes the purpose of the exercise. You are encouraged to try to complete the exercise from the information given in the Objective section. If you require more information to complete the exercise, the Objective section is followed by detailed step-by- step instructions. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Dynamic Writing and Event Handlers JavaScript 1.5 1-27 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Dynamic Writing and Event Handlers Objective In this exercise, you‘ll deploy some document.write methods to write browser information on the XHTML page. You will also insert an onload event handler to give your users a warm welcome. You will learn about the basic script structure and where JavaScript translates to the browser screen. In addition, you will see when the onload event fires. Things to Consider Note that JavaScript placement defines where dynamic content is written. The navigator object will return information about the browser being used to view the page. On event handlers within XHTML tags, use single quotes when placing a string within the events double quotes: onload=―show(‗a string‘)‖ Be sure to hide your script from the older browsers! Step-by-Step Instructions 1. Open the HelloWorld.html file in this lab‘s directory. 2. Within the boundaries of the beginning <body> tag, add an onload event handler that will fire a window.alert method with a message to the user. <body onload="alert('onload event: Hello!');"> 3. Just below the body tag, add a <script> block. In the beginning <script> tag, do not forget to set the language and type attributes (most browsers do not require the type attribute). <script language="JavaScript" type="text/javascript"> </script> Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 1: Introduction 1-28 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. 4. In between the <script> tags, add comments to hide the JavaScript from older browsers. <script language="JavaScript" type="text/javascript"> <! Begin: Hide from old browsers // End: Hide from old browsers > </script> 5. Between the comments from Step 4, add a document.write statement to write the text <b>Your browser name is: </b>, followed by the name of the browser, which you can get using the navigator object‘s appName method (remember to use dot syntax). Remember to add an XHTML line break tag at the end of the string so that the output contains a carriage return. <! Begin: Hide from old browsers document.write("<b>Your browser name is: </b>" + navigator.appName + "<br/>"); // End: Hide from old browsers > 6. On the next line add another document.write method to display the message <b>Your browser version is: </b> followed by the browser version using navigator.appVersion, and ending with an XHTML line break tag. <! Begin: Hide from old browsers document.write("<b>Your browser name is: </b>" + navigator.appName + "<br/>"); document.write("<b>Your browser version is: </b>" + navigator.appVersion + "<br/>"); // End: Hide from old browsers > 7. After the document.write from Step 6, add one more document.write to show the message <b>Current URL: </b> followed by the URL for the page, and two XHTML line break tags. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Dynamic Writing and Event Handlers JavaScript 1.5 1-29 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. <! Begin: Hide from old browsers document.write("<b>Your browser name is: </b>" + navigator.appName + "<br/>"); document.write("<b>Your browser version is: </b>" + navigator.appVersion + "<br/>"); document.write("<b>Current URL: </b>" + window.location.href + "<br/><br/>"); // End: Hide from old browsers > 8. To test your work, use Windows Explorer to browse to the location of your HelloWorld.html file, and double-click it to open it in the default browser, or select the file you want to open, click the File menu, and choose Open With. You can also open the file directly from within the Mozilla, Internet Explorer, or Opera browsers by pressing CTRL+O, and then browsing to the file. 9. If your exercise does not operate correctly, check for errors by trying one of the following options to detect the source of the error: In Mozilla, go to Tools>>Web Development>>JavaScript Console to see which errors are listed, as shown in Figure 6. Figure 6. The JavaScript console in Mozilla. If you are testing in Internet Explorer 5.5+, make sure that script errors are turned on by going to Tools>>Internet Options, choosing the Advanced tab, and making sure Display a notification about every script error is checked. If there is an error, a warning icon will be displayed in the lower left corner of the browser window, as shown in Figure 7. You can double-click this icon to see the error message shown in Figure 8. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 1: Introduction 1-30 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Figure 7. Internet Explorer with the Error icon in the lower left corner. Figure 8. The Internet Explorer error dialog box. If you are using Opera 7 +, go to File>>Preferences and proceed to the Multimedia area and check Open JavaScript console on error. When an error occurs, the error dialog box will pop up as shown in Figure 9. Figure 9. The Opera error dialog box. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Launch External Scripts JavaScript 1.5 1-31 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Launch External Scripts Objective In this exercise, you will attach an external library script file to the previous exercises‘ document. Things to Consider Although the external JavaScript file does not have to be in the same directory as the HTML document, it will be easier to place them both in the same directory for this example. Remember that on a Web site, you would use relative paths in the src attribute of the <script> tag to reference a script in a different directory: src=" /scripts/something.js". Step-by-Step Instructions 1. Open HelloWorld.html from the previous exercise, and create a separate text file in the same directory called HelloWorld.js. NOTE In Windows you might not be able to see file extensions. If you don‘t see files with the .html or .js extensions, choose Tools>>Folder Options in the lab folder and then select the View tab. Make sure that Hide extensions for known file types is not checked. 2. After the <script> block that you added in the first exercise, insert a new <script> block. In the opening <script> tag add an src attribute with the value being the filename of your .js file. <script src="HelloWorld.js" type="text/javascript"> </script> 3. Return to the empty HelloWorld.js file and add the lines required to hide JavaScript from older browsers. Do not add the <script> tags to this file! Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 1: Introduction 1-32 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. <! Begin: Hide from old browsers // End: Hide from old browsers > 4. Add a document.write statement between the hide script lines that says: <b>Hello from the external script!</b> and add two line break tags afterwards. <! Begin: Hide from old browsers document.write('<b>Hello from external script!</b><br/><br/>') // End: Hide from old browsers > 5. Test the exercise by opening HelloWorld.html in your browser. You will see the result from the first exercise and a new message (see Figure 10). Figure 10. The exercise result in Opera 7. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. JavaScript Links and Calculations JavaScript 1.5 1-33 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. JavaScript Links and Calculations Objective In this exercise you will create a link and a button that launches JavaScript. The idea is to learn where you can insert JavaScript for interactivity. Things to Consider In links or <a> tags, you must use the pseudo-protocol ―javascript:‖ in the href to let the browser know that it should execute the JavaScript function that follows the colon, rather than linking to a URL out on the Internet. This is much like typing http://, which tells the browser you are using the HTTP protocol for browsing. Step-by-Step Instructions 1. Open the HelloWorld.html file that you updated in the second exercise, if it‘s not already open. 2. Below the external <script> block, create an unordered XHTML list (<ul>). You can also give the list a type with an attribute, such as type=“disc”. <script src="HelloWorld.js" type="text/javascript"> </script> <ul type="disc"> </ul> 3. For the first line (<li/>) type From Link: and then add a link with the text Say It! within the link tags. For the links href attribute, launch a window.alert() method that says Hello from link!. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 1: Introduction 1-34 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. <ul type="disc"> <li> From Link: <a href="javascript: alert( 'Hello from link!');">Say It!</a> </li> </ul> 4. After the first <li> block, add another <li> block and insert a <form> block. Set the form‘s name attribute to “form1”. <ul type="disc"> <li> From Link: <a href="javascript: alert(' Hello from link!');">Say It!</a> </li> <li> <form name="form1"> </form> </li> </ul> 5. Between the form tags, type From Button: and add a button input tag (<input type=―button‖>). Add an onclick event handler attribute (onclick=―<event>‖) to the <input> tag to launch a window.alert() that says „Hello from button!‟ when the button is clicked. Also, add a value attribute to the button with the text “Say It!”, which will appear as the label on the button. <li> <form name="form1"> From Button: <input type="button" value="Say It!" onclick="alert('Hello from button!');"/> </form> </li> Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. [...]... illustrates how precise evaluations can use Bitwise Booleans: //Bitwise and (1. 0 512 312 & 1. 01) = 1 //Bitwise or (1. 0 512 312 > 1. 15 | 1. 01 < 0 015 ) = 0 //Bitwise xor 1. 0 512 312 > 1. 15 ^ 1. 01 < 0 015 = 0 Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 2 -1 0 For product evaluation only– not for distribution or commercial use .JavaScript 1. 5 Copyright © 2003 by Application Developers Training Company All rights... Dung dungdq@edt.com.vn JavaScript 1. 5 For product evaluation only– not for distribution or commercial use Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 1- 3 7 Lab 1: Introduction Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 1- 3 8 For product evaluation only– not for distribution or commercial use .JavaScript 1. 5 Copyright © 2003 by... 11 shows the completed exercise Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 1- 3 6 For product evaluation only– not for distribution or commercial use .JavaScript 1. 5 Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited JavaScript Links and Calculations Figure 11 The final result from all of this lab s exercises running in Opera 7 Feb 19 ... size= "10 " name="number2"/> 9 Within the ―=‖input tag, add an onclick event handler Within this event handler you will use JavaScript to add the values of the ―number1‖ and ―number2‖ input fields, and place the result in the ―result‖ input field Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn JavaScript 1. 5 For... code Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 2 -1 6 For product evaluation only– not for distribution or commercial use .JavaScript 1. 5 Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited The with Statement var d = document; var rowcount = 20; var rcounter = 0; var columns = 10 ; var ccounter = 0; d.write(""); OuterLoop:... infinite loops that use labeled break statements This is not the best way to script this sort of routine, but it serves as a good example Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn JavaScript 1. 5 For product evaluation only– not for distribution or commercial use Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 2 -1 7 JavaScript Conditions... next iteration, without breaking out of the loop? A continue statement 11 Which loop is best if you want the statements inside the loop‘s code block to execute at least once? The do-while repeat loop Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 2-2 0 For product evaluation only– not for distribution or commercial use .JavaScript 1. 5 Copyright © 2003 by Application Developers Training Company All rights... strictly prohibited 1- 3 5 Lab 1: Introduction NOTE When adding in JavaScript, you must parse strings into actual integer data types to perform arithmetic calculations When you retrieve a value directly from an input text element, it is returned as a String, so you must use the parseInt method to make the value an actual number + . Evaluations JavaScript 1. 5 1- 25 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 1: Introduction TIP: Because this lab. commercial use. Lab 1: Introduction 1- 26 JavaScript 1. 5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 1 Overview. tags to this file! Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 1: Introduction 1- 32 JavaScript 1. 5 Copyright © 2003
Ngày đăng: 09/08/2014, 06:22
Xem thêm: JavaScript 1.5 - Lab 1 ppsx