1 lesson 10 using javascript with styles html and javascript basics, 4 th edition barksdale / turner
TRANSCRIPT
1
Lesson 10Using JavaScript with Styles
HTML and JavaScript BASICS, 4th Edition
Barksdale / Turner
Le
sso
n 1
0
Barksdale / Turner HTML and JavaScript BASICS 4E22
Objectives
Define a simple frame-based style viewer. Make your style viewer functional. Define a simple frame-based document
viewer. Make your document viewer functional. Create a dynamic style class viewer.
Le
sso
n 1
0
Barksdale / Turner HTML and JavaScript BASICS 4E33
Vocabulary
element getElementById() getElementsByTagName() id
location render style style viewer
Le
sso
n 1
0
Barksdale / Turner HTML and JavaScript BASICS 4E44
Defining a Style Viewer
The HTML style attribute can be applied to virtually any HTML tag to describe how you want the Web browser to display that portion of the Web page.
Although styles are by no means limited to text, applying a style to an HTML tag is one of the most common ways in which styles are applied.
Le
sso
n 1
0
Barksdale / Turner HTML and JavaScript BASICS 4E55
Defining a Style Viewer (continued)
The term render simply means to display with the proper attributes applied.
An element is just an HTML tag, and once you have identified the element you need to modify, you make it accessible to JavaScript by assigning it an identifying name with the id attribute.
Le
sso
n 1
0
Barksdale / Turner HTML and JavaScript BASICS 4E66
Defining a Style Viewer (continued)
A style viewer is a simple tool that allows users to specify a style, apply the style, and then view the results.
Frame-based style viewer
Le
sso
n 1
0
Barksdale / Turner HTML and JavaScript BASICS 4E77
Making Your Style Viewer Functional
If a JavaScript event occurs in one frame and the effect of the event is within the same frame, then the JavaScript code should reside in the same frame file.
If a JavaScript event occurs in one frame and affects an object or element in a different frame, the code can often be kept to its simplest form if it is defined in the top-level frameset file.
Le
sso
n 1
0
Barksdale / Turner HTML and JavaScript BASICS 4E88
Making Your Style Viewer Functional (continued)
In order for JavaScript code to access an HTML tag with an id attribute, a corresponding JavaScript method called getElementById() must be invoked. This method accepts a single parameter, the id of the HTML element you want to access.
Le
sso
n 1
0
Barksdale / Turner HTML and JavaScript BASICS 4E99
Defining a Frame-Based Document Viewer
A simple document viewer that moves hyperlinks and headers out of the original HTML document and places them in their own frame adds functionality to a Web page.
Le
sso
n 1
0
Barksdale / Turner HTML and JavaScript BASICS 4E1010
Defining a Frame-Based Document Viewer (continued)
Frame-based document viewer
As shown in Step-by-Step 10.3, the document viewer approach makes the H2 headers more accessible and highlights the active header.
Le
sso
n 1
0
Barksdale / Turner HTML and JavaScript BASICS 4E1111
Making Your Document Viewer Functional
The process of making a document viewer Web page functional is similar to making your style viewer functional.
Functional document viewer—Fancy Fonts selected
Le
sso
n 1
0
Barksdale / Turner HTML and JavaScript BASICS 4E1212
Making Your Document Viewer Functional (continued)
The JavaScript code in this section uses the getElementById() method to identify and access the modified HTML elements.
A new function uses the JavaScript getElementsByTagName() method to reference an array of HTML elements to which a cascading style has been applied.
The location property simply contains the URL of the current HTML document.
Le
sso
n 1
0
Barksdale / Turner HTML and JavaScript BASICS 4E1313
Creating Dynamic Content with JavaScript Style Classes
You can define many different style attributes in a style class within a Cascading Style Sheet.
The style class is then applied, by means of the class attribute, to an HTML element, and all of the attributes in the class take effect simultaneously.
Le
sso
n 1
0
Barksdale / Turner HTML and JavaScript BASICS 4E1414
Creating Dynamic Content with JavaScript Style Classes (continued)
JavaScript can accomplish the same effect by changing the style class assigned to a Web page element.
Functional style class viewer—final state
Le
sso
n 1
0
Barksdale / Turner HTML and JavaScript BASICS 4E1515
Summary
In this lesson, you learned: How to define a simple frame-based style
viewer. How to make your style viewer functional. How to define a simple frame-based document
viewer.
Le
sso
n 1
0
Barksdale / Turner HTML and JavaScript BASICS 4E
Summary (continued)
How to make your document viewer functional.
How to create a dynamic style class viewer.
16