1. 1 Lesson 10 Using JavaScript with Styles HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner

2. Lesson 10 Barksdale / TurnerHTML and JavaScript BASICS 4E 22 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.

3. Lesson 10 Barksdale / TurnerHTML and JavaScript BASICS 4E 33 Vocabulary element getElementById() getElementsByTag Name() id location render style style viewer

4. Lesson 10 Barksdale / TurnerHTML and JavaScript BASICS 4E 44 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.

5. Lesson 10 Barksdale / TurnerHTML and JavaScript BASICS 4E 55 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.

6. Lesson 10 Barksdale / TurnerHTML and JavaScript BASICS 4E 66 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

7. Lesson 10 Barksdale / TurnerHTML and JavaScript BASICS 4E 77 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.

8. Lesson 10 Barksdale / TurnerHTML and JavaScript BASICS 4E 88 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.

9. Lesson 10 Barksdale / TurnerHTML and JavaScript BASICS 4E 99 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.

10. Lesson 10 Barksdale / TurnerHTML and JavaScript BASICS 4E 10 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.

11. Lesson 10 Barksdale / TurnerHTML and JavaScript BASICS 4E 11 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

12. Lesson 10 Barksdale / TurnerHTML and JavaScript BASICS 4E 12 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.

13. Lesson 10 Barksdale / TurnerHTML and JavaScript BASICS 4E 13 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.

14. Lesson 10 Barksdale / TurnerHTML and JavaScript BASICS 4E 14 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

15. Lesson 10 Barksdale / TurnerHTML and JavaScript BASICS 4E 15 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.

16. Lesson 10 Barksdale / TurnerHTML and JavaScript BASICS 4E Summary (continued) How to make your document viewer functional. How to create a dynamic style class viewer. 16