HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 1 of 10
HTML 5 and CSS 3 – Illustrated, 2nd Edition
Unit M: Programming Web Pages with JavaScript
A Guide to this Instructor’s Manual:
We have designed this Instructor’s Manual to supplement and enhance your teaching experience
through classroom activities and a cohesive chapter summary.
This document is organized chronologically, using the same heading in dark blue that you see in the
textbook. Under each heading you will find (in order): Lecture Notes that summarize the section,
Figures and Boxes found in the section, if any, Teacher Tips, Classroom Activities, and Lab Activities.
Pay special attention to teaching tips, and activities geared towards quizzing your students, enhancing
their critical thinking skills, and encouraging experimentation within the software.
In addition to this Instructor’s Manual, our Instructor’s Resources CD also contains PowerPoint
Presentations, Test Banks, and other supplements to aid in your teaching experience.
For your students:
Our latest online feature, CourseCasts, is a library of weekly podcasts designed to keep your
students up to date with the latest in technology news. Direct your students to
T
T
Ta
a
ab
b
bl
l
le
e
e
o
o
of
f
f
C
C
Co
o
on
n
nt
t
te
e
en
n
nt
t
ts
s
s
Unit Objectives
2
352: Explore the Document Object Model
2
354: Access Elements and Properties Using JavaScript
4
356: Create Statements
5
358: Store and Access Data in Variables
6
360: Create a Function
7
362: Add an Event Listener
8
364: Change CSS with JavaScript
9
366: Create an if Statement
10
End of Unit Material
11
Glossary of Key Terms
12
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 2 of 10
U
U
Un
n
ni
i
it
t
t
O
O
Ob
b
bj
j
je
e
ec
c
ct
t
ti
i
iv
v
ve
e
es
s
s
Students will have mastered the material in Unit M when they can:
• Explore the Document Object Model
• Access elements and properties using
JavaScript
• Create statements
• Store and access data in variables
• Create a function
• Add an event listener
• Change CSS with JavaScript
• Create an if statement
3
3
35
5
52
2
2:
:
:
E
E
Ex
x
xp
p
pl
l
lo
o
or
r
re
e
e
t
t
th
h
he
e
e
D
D
Do
o
oc
c
cu
u
um
m
me
e
en
n
nt
t
t
O
O
Ob
b
bj
j
je
e
ec
c
ct
t
t
M
M
Mo
o
od
d
de
e
el
l
l
LECTURE NOTES
• Explain that JavaScript can be used to enhance a web page, and all such enhancements are rooted in
referencing and/or changing data associated with parts of the HTML document.
• Introduce the Document Object Model, and explain that this is a standardized way of referring to
the parts of a web page.
TEACHER TIP
Point out that although the DOM is introduced here in the context of JavaScript, it is designed to be
language independent and to work with any programming language.
• Explain that the DOM is a hierarchical way of looking at an HTML document’s content in a tree-
like structure, known as a DOM tree.
• Explain that to use a script to retrieve data from or make changes to an object that object needs to
be clearly identified. Point out that the object can be referenced using a CSS selector that identifies
it, or using its id or class attribute value.
TEACHER TIP
Explain that even though the DOM trees look like they show parent/child relationships, the DOM
is not a set data structure, but rather a model that specifies interfaces. Clarify that the parent child
relationships shown in a DOM are logical relationships and not representations of any type of
internal data structures.
• Introduce the term property as it applies to DOM trees, explaining that each DOM node is
associated with a set of information, and each piece of information is known as a property.
• Use Table M-1 to introduce some of the commonly used properties.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 3 of 10
• Use Table M-2 to list the commonly used methods and provide code to demonstrate how these
methods should be used.
FIGURE: M-1
TABLES: M-1, M-2
BOXES:
1. Quick Tip: Note that JavaScript has a different definition of a property than CSS, and CSS properties are
not considered properties of JavaScript objects.
2. Changing pointer appearance with CSS
The mouse pointer can take several different shapes in a browser, depending on the content it is over.
The most common shapes are a pointing hand when over a link, an I-beam when over text, and an
arrow when over an image. However, you can use JavaScript to make elements clickable even when
CLASSROOM ACTIVITIES
1. Critical Thinking: Look at Tables M-1 and M-2, and think of other properties and methods that
would be useful when retrieving or making changes to objects in a HTML document. Explain why
and/or how these properties and methods would be useful to have. Look at the following website and
try to identify whether such methods / properties exist in the DOM: https://developer.mozilla.org/en–
US/docs/Web/API/Document.
2. Quick Quiz:
3
3
35
5
54
4
4:
:
:
A
A
Ac
c
cc
c
ce
e
es
s
ss
s
s
E
E
El
l
le
e
em
m
me
e
en
n
nt
t
ts
s
s
a
a
an
n
nd
d
d
P
P
Pr
r
ro
o
op
p
pe
e
er
r
rt
t
ti
i
ie
e
es
s
s
U
U
Us
s
si
i
in
n
ng
g
g
J
J
Ja
a
av
v
va
a
aS
S
Sc
c
cr
r
ri
i
ip
p
pt
t
t
LECTURE NOTES:
• Explain that JavaScript code is built on reference to object and properties on a web page.
• Explain that the Document object is the parent element of the DOM tree.
• Introduce the querySelector() method, which is a child of the Document object. Explain that
you specify a CSS selector in quotes within the parentheses of the querySelector() method to
reference an object.
• Explain that you can add another dot and the name of a property associated with the selected
element to reference that property. Give an example.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 4 of 10
• Introduce the term console, which is part of the developer tools in am odern web browser and can
be used to enter test code and view error messages related to JavaScript.
TEACHER TIP
Point out to students that the opening <script> tag can receive a type attribute, which is used to
specify the MIME type of the scripting language used for the script.
FIGURES: M-2, M-3
TABLE: M-3
BOXES:
1. Quick Tip: You will learn about the use and syntax of .js files later in this unit.
2. Trouble: If your browser indicates that it is blocking some content, click the Allow blocked content
button or similar button to allow the content to be processed.
CLASSROOM ACTIVITIES
1. Quick Quiz:
b. T/F You can add a comma and the name of a property after the querySelector()
c. The part of the developer tools where you can enter test code and view error messages related
2. Classroom Discussion: You can use JavaScript statements to reference and change values entered in a
form. What kinds of applications can you imagine for this kind of code?
LAB ACTIVITY
1. Ask students to open a web page that uses a form and complete one field. Instruct them to use the
browser’s Inspect Element tool to identify the field in the web page hierarchy. Next, have them
construct a CSS selector to select that element. Finally, have them switch to the console, enter a
JavaScript statement to reference the value of the selected form field, and verify that the value they
entered is returned in the console.
3
3
35
5
56
6
6:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
S
S
St
t
ta
a
at
t
te
e
em
m
me
e
en
n
nt
t
ts
s
s
LECTURE NOTES
• Introduce the term statement, which is a JavaScript instruction that performs an action. Explain
that in a statement, you build on a reference to a property by adding additional code to make
changes to that property.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 5 of 10
• Point out that every JavaScript statement ends with a semicolon.
• Explain that statements are created in an external JavaScript file, which is a text file with a name
that ends with the extension .js. Point out that you use the script element to reference these files
within an HTML document, as students have already seen.
TEACHER TIP
In the interest of simplifying the subject matter, this book omits mention of embedded JavaScript code,
in which the code is placed within the HTML document between the opening and closing tags of a
script element. If you choose to cover this topic, be sure to point out that a best practice in modern
web development is to keep HTML, CSS, and JavaScript code in separate files, so creating embedded
JavaScript is no longer common.
FIGURES: M-4, M-5, M-6, M-7
BOXES:
1. Trouble: Be sure to enter the selector as .feedback-from rather than .feedback-form.
2. Trouble: If reloading does not remove the changes, open contact.html in a new tab.
3. Trouble: If the text shown in Figure M-7 is not displayed in your browser, return to script.js in your
editor, compare your statements with the code shown in Steps 4 and 5, and ensure that both lines end
with a semicolon.
4. Debugging JavaScript Code
As with HTML and CSS code, sometimes the JavaScript code that you write doesn’t produce the results
you expect. In such cases, your first step should be to open the browser console, check for any error
messages, and then examine the referenced location in your code for possible errors. In cases when
CLASSROOM ACTIVITIES
1. Classroom Discussion: What applications can you think of for assigning a new value to a property on
a web page using JavaScript?
2. Quick Quiz:
b. In a JavaScript statement, the code on the __________ side of the equal sign accesses the
c. T/F To reference an external script file in an HTML document, you use the script
3
3
35
5
58
8
8:
:
:
S
S
St
t
to
o
or
r
re
e
e
a
a
an
n
nd
d
d
A
A
Ac
c
cc
c
ce
e
es
s
ss
s
s
D
D
Da
a
at
t
ta
a
a
i
i
in
n
n
V
V
Va
a
ar
r
ri
i
ia
a
ab
b
bl
l
le
e
es
s
s
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 6 of 10
LECTURE NOTES
• Introduce the term variables, which are values that are stored that that you can access with a name
that you specify.
• Point out that each variable is given a name which is used to refer to and manipulate the variable in
later stages of the script.
TEACHER TIP
Point out that JavaScript variable names are case sensitive, and must begin with a letter or an
underscore character.
• Explain that it’s common to store object references as variables, and then reference the variables in
other statements. Point out that this allows the later statements to be shorter.
FIGURES: M-8, M-9, M-10
BOXES:
1. Quick Tip: Some editors display keywords like var in italics. Like other formatting applied in a text
editor, this is ignored when the code is rendered in a browser.
2. Quick Tip: Be sure not to delete .textContent at the end of the element reference in the
statement.
3. Quick Tip: Although the page is unchanged, your statements are now shorter and more legible.
4. Preserving accessibility for user agents that don’t support scripting
Some web users access pages with browsers or devices that are unable to interpret JavaScript or that
can’t access the full range of JavaScript code. Such users may be using older browsers, may have
CLASSROOM ACTIVITIES
1. Critical Thinking: Ask students to think about how they would name a variable that stores the
current user’s zip code. What are the advantages of making a long, descriptive variable name? What are
the drawbacks?
2. Quick Quiz:
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 7 of 10
d. Capitalization in which the first letter of the first word is lowercase and the first letter of each
3
3
36
6
60
0
0:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
a
F
F
Fu
u
un
n
nc
c
ct
t
ti
i
io
o
on
n
n
LECTURE NOTES
• Introduce the term function, as group of one or more statements with an assigned name, and
explain that this is useful when JavaScript code becomes more complex.
• Demonstrate the syntax of writing a function, and point out that the punctuation parallels that of a
CSS style rule.
• Point out that a function is not executed automatically.
• Introduce the term function call, which is a reference to the function name that indicates when the
function should be executed.
FIGURES: M-11, M-12, M–13
BOXES:
1. QuickTip: Like variable names, function names cannot include spaces, so camel case is commonly
used for naming functions as well.
2. Implementing jQuery and other libraries
Web developers using JavaScript for more complex applications often find that they need to use the
same sets of code repeatedly in different contexts to create the same effects. In response to this common
situation, developers group reusable code in collections known as libraries. By attaching a single script
CLASSROOM ACTIVITIES
1. Classroom discussion: Have students discuss the advantages of using functions. Specifically, ask them
how functions help ensure consistency on a website that has multiple web pages and reduces the
debugging time required when writing complex code.
3
3
36
6
62
2
2:
:
:
A
A
Ad
d
dd
d
d
a
a
an
n
n
E
E
Ev
v
ve
e
en
n
nt
t
t
L
L
Li
i
is
s
st
t
te
e
en
n
ne
e
er
r
r
LECTURE NOTES
• Explain that a script that adds contents to a web page can be made more flexible and powerful if it is
linked to a user action.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 8 of 10
• Introduce the term events, which include a number of user actions defined for web pages.
• Introduce the term event listener and explain that you can indicate that code should execute in
response to a specific event on a specific element by using such a listener.
• Use Figure M-14 to illustrate the relationship between an event listener, an event, and a function.
• Use Table M-4 to provide an overview of events supported by HTML and JavaScript.
FIGURES: M-14, M-15
TABLE: M-4
BOXES:
1. Trouble: If reloading does not clear the information you entered earlier, open the page in a new tab.
CLASSROOM ACTIVITIES
1. Critical thinking: Do you think it would make sense to create multiple event listeners for a single
element, such as a single button? Give examples of why this would or would not be a good idea.
2. Quick Quiz:
b. An event listener specifies a web page _________, a(n) _________ that may occur on it, and the
3
3
36
6
64
4
4:
:
:
C
C
Ch
h
ha
a
an
n
ng
g
ge
e
e
C
C
CS
S
SS
S
S
w
w
wi
i
it
t
th
h
h
J
J
Ja
a
av
v
va
a
aS
S
Sc
c
cr
r
ri
i
ip
p
pt
t
t
LECTURE NOTES:
• Explain that you can use JavaScript to change the CSS styles of an element in response to a user’s
actions.
• Explain that a common method is to change the value of an element’s class attribute, either by
replacing its value or adding multiple class values. Point out that this requires that the new class
FIGURES: M-16, M-17, M-18, M-19
BOXES:
1. Quick Tip: A style rule like the .show rule that should overrule another rule with the same
specificity must appear below the other style rule in the style sheet.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 9 of 10
CLASSROOM ACTIVITIES
1. Classroom discussion: This lesson outlined one method of changing the CSS styles of an element in
response to an event using JavaScript. What are some other possible approaches?
2. Quick Quiz:
a. A common method for changing the CSS styles of an element in reponse to a user’s actions is to
3
3
36
6
66
6
6:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
an
n
n
i
i
if
f
f
S
S
St
t
ta
a
at
t
te
e
em
m
me
e
en
n
nt
t
t
LECTURE NOTES:
• Introduce the term operator, which is a symbol to compare or change the values of multiple objects
or properties. Point out that students have already seen the assignment operator (=), which is a type
of operator.
• Introduce the term comparison operators, which let you determing whether two values are the
same or different.
• Use Table M-5 to show some commonly used operators.
TEACHER TIP
Emphasize that the = and === operators are different, and review the specific use case for each.
• Introduce the term if statement, in which two values are compared and if the result is true, one or
more statements are executed. Use Figure M-20 to review the syntax and usage of if statements.
FIGURES: M-20, M-21, M–22
TABLE: M-5
BOXES:
1. Quick Tip: JavaScript code is not validated in the same way that HTML and CSS code is validated.
2. Scripting fallback options with Modernizr
You’ve already seen how to use the class values that the Modernizr library generates to provide fallback
code for some features within a stylesheet. However, some modern HTML and CSS capabilities cannot
be duplicated in older browsers using CSS alone. You can create fallback code for additional features
using JavaScript. To do so, you create a conditional statement that checks for objects that Modernizr
CLASSROOM ACTIVITIES
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit L Page 10 of 10
1. Quick Quiz:
b. T/F In an if statement, one or more statements are executed if the result of a comparison is
2. Classroom discussion: When might you use the not equal operator (!==) in your code?
E
E
En
n
nd
d
d
o
o
of
f
f
U
U
Un
n
ni
i
it
t
t
M
M
Ma
a
at
t
te
e
er
r
ri
i
ia
a
al
l
l
•
•
•
Concepts Review – Includes screen identification, multiple choice, and matching questions.
•
•
•
Skills Review – Provides additional hands-on exercises that mirror the progressive style of the
lesson material.
•
•
•
Independent Challenges 1, 2 and 3 – Case projects that require critical thinking and application of
the unit skills. The Independent Challenges increase in difficulty, with the first being the easiest
(with the most step-by-step detailed instructions). Independent Challenges 2 and 3 become
increasingly more open-ended.
G
G
Gl
l
lo
o
os
s
ss
s
sa
a
ar
r
ry
y
y
o
o
of
f
f
K
K
Ke
e
ey
y
y
T
T
Te
e
er
r
rm
m
ms
s
s
• assignment operator (356)
• camel case (358)
• comparison operator (366)
• console (354)
• Document object (354)
• Document Object Model (DOM) (352)
• DOM (352)
• DOM tree (352)
• event (362)
• event listener (362)
• function (360)
• function call (360)
• if statement (366)
• JavaScript (352)
• library (361)
• method (352)
• node (352)
• object (352)
• operator (366)
• property (352)
• statement (356)
• variable (358)
Top of Document