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

Document Object Model

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

Document Object Model 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

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 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

Animation With the Image Object 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

Animation With the Image Object 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 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 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

Section A: Chapter Summary 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

Section A: Chapter Summary An Image object represents images created using the 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

Section A: Chapter Summary 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

Cascading Style Sheets 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

Cascading Style Sheets 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

Cascading Style Sheets 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

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 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 … tag pair Use LEFT and TOP attributes of the 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 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

Section B: Chapter Summary 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

Section B: Chapter Summary 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

Section B: Chapter Summary 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

Section B: Chapter Summary 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

Section B: Chapter Summary 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

Section B: Chapter Summary 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