chapter 7: dynamic html and animation javascript - introductory

Chapter 7: Dynamic HTML and Animation

JavaScript - Introductory

Previewing the Animation Files

Orbit Animation in Navigator

Section A:

Dynamic Object Model

Objectives

In this section students will learn about:• Dynamic HTML

• The Document Object Model

• Document object properties

• Document object methods

• The Image object

• Animation with the Image object

• About image caching

Dynamic HTML

• The Web has many forms of entertainment, including games, animation, and multimedia presentations

• “Dynamic” refers to Web pages that respond to user requests through buttons or other types of controls

• Hypertext links do not change the currently displayed document, but load new ones from server instead

• Technologies used for creating DHTML include JavaScript, VGScript, CGI, Java, Active Server Pages, and others

Programmers.html

Miller.html

Dynamic HTML

• DHTML includes the following technologies:– JavaScript

– HTML

– Cascading style sheets

• DHTML does not refer to a single technology, but to several technologies combined

• Cascading style sheets are used to manage the formatting information of HTML documents

Slider Menu and Marquee Text

TetriScript Game

Document Object Model

• At the core of DHTML is the Document Object Model

• Document Object Model, or DOM, represents the HTML document displayed in a window and provides programmatic access to a document’s elements

• The Document object refers not only to HTML documents, but also to other file types, such as .jpg, .gif, and .xml, .jpg and .gif, which are image file formats

• The DOM also includes events, properties, and methods


• The DOM enables JavaScript to access individual HTML elements by turning each tag in an HTML document into its own programmatic object

• DHTML is an evolving technology; there is no accepted standard for the DOM

• Version 4 of both Navigator and Internet Explorer supports a number of DOM objects that are completely incompatible with Level 0

State Capitals Program


• The World Wide Web Consortium (W3C) is drafting a new DOM standard know as Level 1

• Level 1 is expected to include many of the objects, properties, and methods that are currently available in Internet Explorer 4

• However, Level 1 will not be available until Version 5 of Navigator and Internet Explorer are released

Document Object Properties

Document Object Properties

• In Navigator 4.0, the majority of the Document object properties can be set only before the document is rendered

• Only the bgColor property can be set dynamically after the document has been rendered

• Internet Explorer 4.0 allows you to dynamically change many of the Document object properties after it is rendered

Changing bgColor and fgColor Properties

Black Text on a White Background

White Text on a Black Background

Document Object Methods

• The open() method opens a window or frame other than the current window or frame, and is used to update its contents with the write() and writeIn() methods

• The close() method notifies the Web browser that you are finished writing to the window or frame and that the document should be displayed

• If you use the write() and writeIn() methods without using the open() method, the contents of the current window are overwritten

• A limitation of write() and writeIn() methods is that they cannot be used to change content after a Web page has been rendered

Redirection Window

The Image Object

• An Image object represents images created using the <IMG> tag

• To change an image on the basis of a user’s selection, you must use JavaScript with an Image object

• The src and lowsrc properties are the only Image properties that can be changed after a document has been rendered in Navigator

Image Object Properties

Image Object Events

The Image Object

• Figure 7-16 shows a modified version and illustrates the use of the src property

Programmers.html in a Web Browser

ChangeImage.html

Animation With the Image Object

• By combining the src attributes of the Image object with the setTimeout() or setInterval() methods, you can create simple animation in an HTML document

• Examples of JavaScript programs that use animation include a simple advertisement in which two images change every couple of seconds

• An example of frames in animation sequence can be seen in Figure 7-21

Changing Images Program

Advertising Images

Animation Frames


• Create an animated sequence with JavaScript by using the setInterval() or setTimeout() methods to cycle through frames in series

• Figure 7-22 contains code that animates the frames in Figure 7-21

Runner Animation Code (continued)

Runner Animation in a Web Browser


• The runner animation adds a dynamic aspect to images, but it does have one shortcoming: animation does not actually move across the screen, but takes place within confines of space taken up by single <IMG> tag

• The rocking horse animation will be similar to runner, however, it cannot redisplay the first frame, after displaying the last frame

Rocking Horse Frames

Image Caching

• In the rocking horse program, you may have noticed that the loading of each image appears to be jerky, erratic, or slow

• This effect happens because JavaScript does not save a copy of the image in memory that can be used whenever necessary

• A technique for eliminating multiple downloads of same file is called image caching

• Image caching temporarily stores image files in memory on a local computer

Image Caching

• Images are cached using the Image() constructor of Image object

• There are three steps for caching an image in JavaScript:– Create a new object using the Image() constructor

– Assign a graphic file to the src property of the new Image object

– Assign the src property of the new Image object to the src property of an <IMG> tag

• Figure 7-25 shows a version of runner animation code modified to use image caching

Runner Animation Code After Adding Caching

Runner Animation Code After Adding Caching (continued)

Runner Animation Code After Adding an onLoad Event

Runner Animation Code After Adding an onLoad Event (continued)

Section A: Chapter Summary

• Dynamic HTML (DHTML) combines several Internet technologies, including JavaScript, HTML, and cascading style sheets, to allow HTML tags to change dynamically

• The Document Object Model (DOM) represents HTML document displayed in a window and provides programmatic access to a document’s elements

• Navigator and Internet Explorer support a primitive version of DOM known as Level 0


• The open() method opens a window or frame other than the current one, to update its contents with the write() and writeIn() methods

• The close() method notifies the Web browser that you are finished writing to the window or frame and that the document should be displayed

• The images[] array contains all of an HTML document’s images in the same manner that the forms[] array contains all of an HTML document’s forms


• An Image object represents images created using the <IMG> tag

• One of the most important elements of the Image object is the src property, which allows JavaScript to change an image dynamically

• By combining the src attribute of the Image object with the setTimeout() or setInterval() methods, you can create simple animation in HTML documents


• Create an animated sequence with JavaScript by using the setInterval() or setTimeout() methods to cycle through frames in an animation series

• Image caching, which temporarily stores image files in memory, is a technique for eliminating multiple downloads of same file

• You use the onLoad event handler of the Image object to be certain that all images are downloaded into a cache before commencing an animation sequence

Section B:

Animation and Cascading Style Sheets

Objectives

In this section students will learn:

• About cascading style sheets

• How to use JavaScript with styles in Navigator and Internet Explorer

• About cascading style sheet positioning

• How to use positioning in Navigator and Internet Explorer

• About cross-browser compatibility

Cascading Style Sheets

• Cascading style sheets are one of the three technologies used for creating DHTML

• Cascading style sheets (CSS, also called style sheets) are a standard set by the World Wide Web Consortium for managing the formatting information of HTML documents

• Formatting information includes fonts, backgrounds, colors, layout, and other aspects of appearance of an HTML document, as opposed to its content


• DHTML uses JavaScript to manipulate CSS to dynamically change the appearance of tags and the position of elements in HTML document

• CSS styles are created using name/value pairs separated by a colon

• The name portion of the name/value pair refers to a specific CSS style attribute known as a property

• There are two types of CSS styles: – Inline styles determine the appearance of individual tags

in an HTML document– Document-level style sheets determine global

formatting for HTML tags

Common CSS Properties


• The tag to which specific style rules in a style sheet apply is called a selector

• Another method of applying styles to tags in an HTML document is by using the CLASS attribute

• The CLASS attribute identifies various elements as part of the same group

• The syntax for the CLASS attribute is <TAG CLASS=“class name”>


• You can create two types of CSS classes in an HTML document:– Regular class is used to define different style

instructions for the same tag– Generic class is similar to a regular class, except that it

is not associated with any particular tag

• The ID attribute is also used to apply styles• The value of an ID attribute uniquely identifies

individual tags in an HTML document• The syntax for the ID attribute is <TAG

ID=“unique name”>

Individually Formatted Tags

Individually Formatted Tags (continued)

Style Sheet Heading Tags

Heading Styles Example

Using JavaScript With CSS Styles

• CSS styles determine the formatting of HTML document elements

• To modify CSS styles after a Web browser renders a document, use JavaScript

• If you want to use JavaScript code to manipulate CSS, you have three options:– Write code that functions only in Navigator– Write code that functions only in Internet Explorer– Write both sets of code and execute the correct set

depending on which Web browser is in use

Using JavaScript and CSS in Navigator

• The Navigator Document Object Model accesses the styles for selectors using the tags, classes, and ID properties of the Document object

• The tags property provides access to the styles of tags in HTML document

• The classes property provides access to the styles of classes in an HTML document

• The ids property provides access to the styles of ID attributes in an HTML document

• The tags, classes, and ID properties are available only in Navigator

Using JavaScript and Styles in Internet Explorer

• The Internet Explorer Document Object Model accesses the styles for selectors using the all property of Document object

• The all property is an array of all the elements in an HTML document

• The all property is appended with a period to the Document object, followed by a period and name of specific CSS selector

• The style property represents the CSS styles for a particular tag, class, or ID

CSS Positioning

• CSS positioning is used to position or lay out elements on a Web page

• There are two types of CSS positioning:– Relative positioning places an element according to

other elements on Web page– Absolute positioning places elements in a specific

location on a Web page

• Relative positioning is mainly used for design and layout of Web pages

• Absolute positioning is used with JavaScript to create full animation, among other purposes

Common CSS Positioning Properties

CSS Positioning

Output of ThreeBirds.html

Positioning in Internet Explorer

• Internet Explorer allows you to use JavaScript to dynamically change CSS styles

• Changes to the document’s appearance are displayed immediately

• Since CSS positioning is an extension of CSS, you can dynamically change an element’s position on screen using the left and top CSS properties

Positioning in Internet Explorer

• The code for the bird animation program is shown in Figure 7-34. Two image objects, up and down, are created to hold each image file

Bird Animation Document (continued)

Orbit Animation Coordinates

OrbitIE.html Document in Internet Explorer

Positioning in Navigator

• Navigator does not use CSS positioning for dynamic animation

• Instead, you must use layers• Layers are used in Navigator to arrange HTML

elements in sections that can be placed on top of one another and moved individually

• Create a layer in an HTML document using a <LAYER>…</LAYER> tag pair

• Use LEFT and TOP attributes of the <LAYER> tag to specify an initial position for a layer

Positioning in Navigator

• Layer object contains several properties and methods for manipulating layers in JavaScript

• The moveTo() method moves a layer to a specified position, and it accepts two arguments

• The offset() method moves a layer to a specified number of pixels horizontally and vertically from its current position

• Refer to a specific layer in JavaScript by using its position in the layers[] array or by using the value assigned to <LAYER> tag’s NAME attribute

Bird Animation Document Modified For Use With Navigator

Bird Animation Document Modified For Use With Navigator (continued)

OrbitNetscape.html in Navigator

Cross-Browser Compatibility

• An easier solution than trying to pack Microsoft- and Netscape-compatible code into the same document is to create two separate documents, one for each Web browser

• You can use a “master” document that checks which browser is running when users open the file

• Instead of checking the browser being used, many JavaScript programmers prefer to test which DOM is being used

Cross-Browser Compatibility

• You can test which DOM is being used by checking whether Document object has a layers property or an all property

Section B: Chapter Summary

• Cascading style sheets (CSS) are standards set forth by World Wide Web Consortium for managing the formatting information of HTML documents

• A single piece of formatting information is called a style

• CSS styles are created using name/value pairs separated by a colon

• Inline styles determine the appearance of individual tags in an HTML document


• Document-level style sheets determine formatting for instances of a specific HTML element and specific CLASS and ID attributes

• The CLASS attribute can be applied to any HTML tag, identifying various elements as part of the same class

• The value of an ID attribute uniquely identifies individual tags in an HTML document

• The tag, class, or ID to which specific style rules in a style sheet apply is called selector


• A regular class is used to define different style instructions for the same tag

• A generic class is similar to a regular class, but it is not associated with any particular tag

• There are three options for using JavaScript code to manipulate CSS: – Write code that functions only in Navigator– Write code that functions only in Internet Explorer– Write both sets of code and execute the correct set

depending on which Web browser is in use


• The Netscape Document Object Model accesses the styles for selectors using the tags, classes, and ID properties of Document object

• When you refer to a CSS property in JavaScript code, remove the hyphen, use a lowercase letter for first letter of first word, and use an uppercase letter for the first letter of subsequent words

• The general syntax for defining a CSS style in Navigator is document.tags, classes, or ids property.css selector. Specific CSS property


• The Internet Explorer Document Object Model accesses the styles for selectors using the all property of the Document object

• General syntax for defining CSS style in Internet Explorer is document.all.CSS selector.style. specific CSS property

• CSS positioning is used to position or lay out elements on a Web page

• Relative positioning places an element according to other elements on the Web page


• Absolute positioning places elements in a specific location on a Web page

• Layers are used in Navigator to arrange HTML elements in sections that can be placed on top of one another and moved individually

• The Layer object contains several properties and methods for manipulating layers in JavaScript

• The moveTo() method moves a layer to a specified position


• The offset() method moves a layer to a specified number of pixels horizontally and vertically from its current position

• Instead of writing Microsoft- and Netscape-compatible code into the same document, it is easier to create two separate documents, one for each Web browser

• Instead of checking which browser is being used, many JavaScript programmers prefer to check which DOM is being used

chapter 7: dynamic html and animation javascript - introductory

Documents

document object model

dynamic object model

navigator slide

displayed document

document shoul

image caching slide

image object animation

marquee text slide