Lab 9: Introduction to JavaScript

In this lab, you will write some simple JavaScript.

Objectives:

• To practice JavaScript

Part 1: Working With JavaScript

Steps:

1. Use File - Close All to close all open editing windows.

2. In RAD, create a new Dynamic Web Project named Lab09Web associated with Lab09EAR:

   1. From the menu, choose File - New Dynamic Web Project to start the wizard.

   2. For the Project name, enter Lab09Web.

      Ensure that the Add project to an EAR checkbox is selected, then for the EAR project name, enter Lab09EAR.

      Press Finish. You can close any Technology Quickstart window.

   3. Expand the Lab09Web project and note the WebContent folder - that's where you put your HTML, JavaScript and CSS files.

3. Right-click on the WebContent folder choose New - HTML File to create a file named hello.html. On the wizard's second page, choose the New HTML File (5) template.

   RAD opens the page into the editor.

4. Within the head element, enter the following:

   <script>
      alert("Hello, world");
   </script>        
           
           

5. To test, in the Enterprise Explorer, right-click on hello.html and choose Run As - Run on Server. The server should start and RAD will then start a Web browser with your page.

   You should see the JavaScript "alert" dialog box with the "Hello, world" text. Click the OK button to dismiss it.

6. In the Enterprise Explorer, right-click on hello.html and choose Copy, then right-click on WebContent and choose Paste, renaming the copy to error.html.

7. Open error.html into the editor, and delete the closing quote (") after Hello, world.

   Save the file, then run it on the server. What happens?

8. Browsers typically do not display script errors, with the motivation being that they're not of much help to end users. But the Chrome browser ships with a set of Developer Tools, one of which is the JavaScript Console, in which you can see script errors.

   To surface the Console, click the Chrome menu, which is at the top-right of the browser (its icon is three horizontal bars), then choose Tools - JavaScript Console.

   The Console will open at the bottom of the Web page and display an error message (not very helpful in this case) and the file and line number where the error occurred.

   Note: To make debugging scripts easier, we recommend that you enable line numbers in the RAD editor. In RAD, in the editor for error.html, right-click in the gray left margin (gutter) and choose Show Line Numbers.

   In RAD, find and fix the error, save then refresh in Chrome. This is the basic development process for JavaScript.

9. Now let's use an external script:

   1. In RAD, in the Enterprise Explorer, right-click on hello.html and copy and paste it to hello-external.html.

   2. Right-click on the WebContent folder and choose New - JavaScript Source File to create hello.js.

   3. Move the alert line (just the alert) from hello-external.html to hello.js.

   4. Modify hello-external.html so it references the external script file.

   5. Run hello-external.js on the server. It should work as before.

10. Modify hello.js so it also writes the document's last-modified date to the page.

Part 2: More Practice

Steps:

1. Create a new HTML file named person.html that uses an external script that writes your name, address and phone number to the page.

   Hint: You can write an HTML b or p tag to separate the output into separate lines in the Web page.

   Test your work.