Hands-On Projects 31

17. How can you make the browser not parse and 19. Provide the JavaScript code to write the text
load an external script file until after the page has “Copyright 2023” as a line comment. Provide the
loaded? code to write the same text as a block comment.
18. When should you use an external JavaScript file 20. What is a library?
instead of embedding your JavaScript code within
the HTML file?

Hands-On Projects
Hands-On Project 1-1

In this project you will use document.write() statements in a script section to add financial planning tips
to a web page, creating the web page shown in Figure 1-23.

Figure 1-23 Completed Project 1-1

Do the following:
1. Use your code editor to open project01-01_txt.html from the js01 c project01 folder. Enter your name and
the date in the comment section of the document head.
2. Save the file as project01-01.html.
3. Within the article element, directly below the h2 element, enter the opening and closing tags of a script
element on separate lines.
4. Within the script insert a JavaScript line comment containing the text create ordered list.
5. Below the line comment, insert multiple document.write() commands to write the following HTML code for
an ordered list:

<ol>
<li>Reduce spending on non-necessities.</li>
<li>Use extra money to pay off debt,
starting with highest-interest credit cards.</li>
<li>Continue paying off debts until you are debt free.</li>
<li>Put a fixed percent of your pay aside every payday.</li>
</ol>

6. Save your work and open project01-01.html in your web browser. Verify the content of the page resembles that
shown in Figure 1-23.

Copyright 2022 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s).
Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it.
32 Chapter 1 Introduction to JavaScript

Hands-On Project 1-2

In this project, you will create a web page that uses variables to display information about high-speed Internet
plans offered by an Internet service provider. The completed page is shown in Figure 1-24.

Figure 1-24 Completed Project 1-2

Do the following:
1. Use your code editor to open project01-02_txt.html and project01-02_txt.js from the js01 c project02
folder. Enter your name and the date in the comment section of each document and save them as
project01-02.html and project01-02.js, respectively.
2. Below the comment section in the project01-02.js file, declare the following variables with indicated initial values:
service1Name 5 “Basic”, service2Name 5 “Express”, service3Name 5 “Extreme”,
service4Name 5 “Ultimate”, service1Speed 5 “0 Mbps”, service2Speed 5 “100
Mbps”, service3Speed 5 “500 Mbps”, and service4Speed 5 “1 Gig”.
3. Save your changes to the file.
4. Return to the project01-02.html file in your code editor. Directly above the closing </head> tag, insert a
script element to load the project01-02.js source file. Do not add either the async or defer attributes to the
script so that the code in the external file is loaded immediately as the web page is parsed by the browser.
5. Go to the first table row of the tbody section of the web table. Within the first <td> tag, insert a script to write
the value of the service1Name variable. Within the second <td> tag, insert another script to write the value
of the service1Speed variable.
6. Repeat Step 5 for the two cells in each of the next three table rows in the tbody section, writing the values
of service2Name and service2Speed variables through the service4Name and service4Speed
variables.
7. Save your work and then open project01-02.html in your web browser. Verify that the content of the page
resembles that shown in Figure 1-24.

Hands-On Project 1-3

In this project, you will explore how to write text to a specific element in your web page in response to the
onclick event handler. To complete the exercise, you will apply the following JavaScript expression:
document.getElementById('id').innerHTML = 'text';

where id is the value of the id attribute for the page element and text is the text of the content to be written
into the element. You will use this expression to enhance a web form by displaying the message “Thank you for
your order” when the user clicks the Submit button. Figure 1-25 shows the completed web page.

Copyright 2022 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s).
Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it.
 Hands-On Projects 33

Figure 1-25 Completed Project 1-3

Do the following:
1. Use your code editor to open project01-03_txt.html from the js01 c project03 folder. Enter your name and
the date in the comment section of the document and save it as project01-03.html.
2. Scroll down to the bottom of the file and locate the input element for the Submit button.
3. Add an onclick event handler to the <input> tag that changes the innerHTML value of the page element
with the id “submitMsg” to the text message Thank you for your order. (Note: The entire JavaScript expression
should be enclosed within a set of double quotation marks, but the id and the text message should be enclosed
within single quotes.)
4. Save your changes to the file and then open project01-03.html in your web browser. Click the Submit button and
verify that the text “Thank you for your order” appears on the bottom of the page.

Hands-On Project 1-4

In this chapter you learned how to dynamically change an image using the getElementById('id').src
expression along with the onclick event handler. In this project you will use the onclick event handler to
automatically fill delivery address input boxes with preassigned values using the expression:

document.getElementById('id').value = variable;

where id is the value of the id attribute of a web form element and variable is the variable value to write
into the element. A preview of the completed project is shown in Figure 1-26.

Do the following:
1. Use your code editor to open project01-04_txt.html and project01-04_txt.js from the js01 c project04
folder. Enter your name and the date in the comment section of each document and save them as
project01-04.html and project01-04.js, respectively.
2. Go to the project01-04.js file in your code editor. Below the comment section declare the following variables and
initial values: homeStreet 5 “1 Main St.”, homeCity 5 “Sicilia”, homeState 5 “MA”, homeCode 5 “02103”,
workStreet 5 “15 Oak Ln.”, workCity 5 “Central City”, workState 5 “MA”, workCode 5 “02104”.

Copyright 2022 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s).
Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it.
34 Chapter 1 Introduction to JavaScript

Figure 1-26 Completed Project 1-4

3. Close the file, saving your changes.

homeStreet <br>
homeCity, homeState homeCode

where homeStreet, homeCity, homeState, and homeCode are the variables you defined in Step 2. (Hint:
You will have to use the add operator ( 1 ) to combine the variables with the literal text strings in these two
lines of code.)
6. Directly below the closing </div> tag for the Work address, insert another script element. Within the script,
insert commands the write the following two lines:

workStreet <br>
workCity, workState workCode

where workStreet, workCity, workState, and workCode are once again the variables you defined in
Step 2.
7. Go to the input element with the id “homeoption”. Within the <input> tag insert an onclick event handler
that contains the following four JavaScript commands: (a) Set the value of the of the element with the id “street”
to the value of the homeStreet variable; (b) Set the value of the element with the id “city” to the homeCity
variable; (c) Set the value of the element with the id “state” to the homeState variable; (d) Set the value of the
element with the id “code” to the value of the homeCode variable.
8. Go to the input element with the id “workoption”. Repeat the previous step except store the values of the
workStreet, workCity, workState, and workCode variables.
9. Save your changes to the file and then load project01-04.html in your web browser. Verify that the contents of
the page resemble that shown in Figure 1-26 and that you can switch the address information at the bottom of
the page between home and work by clicking the corresponding option buttons.

Copyright 2022 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s).
Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it.
 Case Projects 35

Hands-On Project 1-5

Debugging Challenge
Learning to locate and fix errors is an important skill for anyone programming in JavaScript. You have been
given a web page containing several errors that need to be fixed. When fixed, the page will display the content
shown in Figure 1-27.

Figure 1-27 Completed Project 1-5

Do the following:
1. Use your code editor to open project01-05_txt.html from the js01 c project05 folder. Enter your name and
the date in the comment section of the document and save it as project01-05.html.
2. In the head section of the document there is a script that declares and initializes the reopenDate variable.
There are two errors in this code. Fix both errors.
3. Scroll down to the script embedded within the article element. The code contains a total of four errors.
Locate and fix the errors.
4. Save your changes to the file and then open the file in your web browser. Verify that the page resembles that
shown in Figure 1-27.

Case Projects
Individual Case Project

The Individual Case Project for each chapter in this book will build on a website that you create on a subject of
your choice. To begin, choose a topic for your website. This can be a topic related to your major, or a personal
interest or activity. Plan a website containing at least four pages with a common layout and navigation system.
Note that you’ll add pages to your site in later chapters, so ensure that your navigation system can support
additional content. Ensure that all of your web pages pass validation.

Team Case Project

Throughout the Team Case Projects in this book you will continue to work on a website on a subject chosen by
your team. Working in a team of 4–8 people, discuss and agree on a topic for your website. This may be a topic
related to your major, another area of study, your college or university, or a shared interest. Work together to
plan a website containing, at a minimum, a number of pages equal to the number of group members, and to
create a common layout and navigation system. Note that you’ll add pages to your site in later chapters, so
ensure that your navigation system can support additional content. Decide as a group who will create which
page, and create the pages individually. When you’ve finished creating the individual pages, ensure they pass
validation, and then work together to assemble the resulting website, identifying and fixing any issues as a
group.

Copyright 2022 Cengage Learning. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part. Due to electronic rights, some third party content may be suppressed from the eBook and/or eChapter(s).
Editorial review has deemed that any suppressed content does not materially affect the overall learning experience. Cengage Learning reserves the right to remove additional content at any time if subsequent rights restrictions require it.