JavaScript Exemple Bis C12

Using DOM to
Enhance Web Pages

The Document Object Model (DOM)
• Each section & component on a web page = object 
DOM allows JavaScript to access & manipulate them
• DOM allows developers to use a combination of HTML
objects, tags, attributes, style sheets properties and
scripting languages to create web pages more
animated and responsive
• With DOM a developer is able to identify objects or
graphics and position, move or replace them anywhere
• Dynamic positioning of elements is a key feature of
modern & interactive web pages
Chapter 11: Using DOM to Enhance Web Pages 2
Navigation Bar with Image Rollovers
Items needed to create a navigation bar

• A set of images used as buttons to represent the
mouse state – up-state, over-state & down-state
• A table with one row and as many data table cells as
needed for each button
• JavaScript user-defined functions associated with each
mouse event handler

Creating the Navigation Bar

Creating the Navigation Bar
5
User Defined functions for Image
Rollovers
• Three user-defined functions must be written for the
mouse events one for each state of the navigation bar
• The mouse event handlers to be used – onMouseOver,
onMouseDown, onMouse Up and onMouseOut
• Each function will do the following
 use the button name, the state of the mouse associated
with the event handler and the filename extension to
construct the associated graphic filename for the state
 Use getElementById() method to assign the filename to the
correct image location
JavaScript User-Defined Functions for
Image Rollovers

JavaScript Code for User-Defined
Functions for the Image Rollovers
8
Creating User-Defined Functions for
Image Rollovers

Entering Mouse Event Handlers to
Invoke User-Defined Functions

Entering Mouse Event Handlers to
Invoke User-Defined Functions

Create a Random Image Generator with
a User-Defined Function
• Determine the location for an image object
• Determine the image to be used as the default image
• Make sure each image is as close as possible to one size
• Write the JavaScript user-defined function
 define a list of images in an array object making the first element blank or
null
 determine the maximum random number size (subtract 1 from the array
length)
 use Math.ceil() & Math.random() to create the random number
 assign the array value using the random number as a subscript to the
image placeholder
 add the onLoad event handler to the <body> to invoke the user-defined
function when the web page is loaded
Create the User-Defined Function
Random Number Generator
• JavaScript uses a data structure named array to work with
lists of data
• an array is a collection of data items represented by a variable
name  array name
• each individual data item = element and a subscript
references the individual data items in the array
• a subscript is a number that designates a single occurrence of
an array element
• arrays are built-in objects & to create an array and fill it with
data you have to create an object instance of the Array object
• object instance = new JavaScript object created



Code for User-Defined Functions to
Create a Randomly Displayed Image

Entering a Random Number Generator
User-Defined Function

Entering Code to Show Copyright
Information and Date Last Modified

Code to Show Copyright Information and
Date Last Modified

Entering onLoad Event Handlers
in the <body> Tag

Create an Automatic Slide Show
• Determine the location for an image object
• Determine the images to be used
• Write the user-defined JavaScript function
 define a list of images in an array object
 establish a counter
 increment the counter by 1
 test the counter against the number of items in the list
 assign the list element based on the current counter value to
the image object
 Call the function again using setTimeout() method
• Add the event handler to call the function
Create an Image Object
• The initial image is placed following a <p> tag in the body
of the text
• The id attribute will be used by the getElementById()
method to assign a new image to this location
• In addition an id selector in the embedded style sheet
will make the image “float” to the left of the text

Creating an Image Object

Create slideShow() Function

Create a User-Defined Function to Add a
Slide Show

Enter an OnLoad Event Handler to Call a
Function

Creating a Floating Image
• Have an image float from right to left floatingImage()
function
• Stop the image from scrolling stopFloat() function
using the clearTimeout() method
• Restart the image scrolling restartFloat() function
using the clearTimeout() method
• Open a pop-up window for the coupon offer
coupon() function using the open() method

User-Defined Functions for Image
Rollover Navigation Bar

Creating a Floating Image
Steps detailing the programming for floatingImage()

• Decrement the left pixel position by 10
• Test left pixel position to determine if it is off the screen
• If left pixel<150 reset to the right side of the screen based on
the screen resolution of 1024 by 768
• Use the <div> tag’s id attribute to assign the calculated value
of the last pixel to the pixelLeft property of the <div> tag
object
• Assign the setTimeout() method used to call the floatImage()
function to a variable so the clearTimeout() method can be
used to stop the scrolling
Code for floatingImage() Function

Entrer the floatingImage() Function

Code for stopFloat() Function

Enter stopFloat() Function

Code for restartFloat() Function

Enter restartFloat() Function

Code for coupon() Function

Enter coupon() Function

Entering an Embedded Style Sheet
to Format the Floating Image

Enter Image Object for Floating Image
using <div> and <img>

Enter <div> and <img> tags for the
Floating Image

Add OnLoad Event Handler to Call the
floatingImage() Function

Steps to Create Pop-up Captions
• Enter the JavaScript code for the user-defined
function popupCaption() that is associated with a
particular image
• Enter the embedded style sheet
• Enter the <a> tags and event handler for each of the
four terms
• Enter the <div> tags containing the pop-up captions
text and style sheet attributes that format the
appearance of the pop-up captions text

Steps to Create Pop-up Captions
Steps detail the programming logic for the

popupCaption() function
• Define the image file using the element id
• Construct the pop-up object and determine the state –
visible or hidden
• If visible hide the pop-up captions and restore the
original image
• If hidden show the pop-up captions with the new image

Code for Navigation Bar Image Rollovers

Create popupCaption() User-Defined
Function

Entering the popupCaption() Function

Adding an Embedded Style Sheet Using
id and Class Properties

How to Use Selectors in a Style Sheet

How to Use Selectors in a Style Sheet

Entering Cascading Style Sheet id and Class
Selectors for the Pop-up Captions

Entering Cascading Style Sheet id and Class
Selectors for the Pop-up Captions

Adding Links and Event Handlers to Call
the popupCaption() Function

Entering <div> Tags Containing Pop-up
Caption Text

JavaScript Exemple Bis C12

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

JavaScript Exemple Bis C12

Загружено:

Авторское право:

Доступные форматы

Using DOM to

Enhance Web Pages

Items needed to create a navigation bar

Chapter 11: Using DOM to Enhance Web Pages 3

Chapter 11: Using DOM to Enhance Web Pages 4

Chapter 11: Using DOM to Enhance Web Pages 7

Chapter 11: Using DOM to Enhance Web Pages 9

Chapter 11: Using DOM to Enhance Web Pages 10

Chapter 11: Using DOM to Enhance Web Pages 11

Chapter 11: Using DOM to Enhance Web Pages 13

Chapter 11: Using DOM to Enhance Web Pages 14

Chapter 11: Using DOM to Enhance Web Pages 15

Chapter 11: Using DOM to Enhance Web Pages 16

Chapter 11: Using DOM to Enhance Web Pages 17

Chapter 11: Using DOM to Enhance Web Pages 18

Chapter 11: Using DOM to Enhance Web Pages 19

Chapter 11: Using DOM to Enhance Web Pages 20

Chapter 11: Using DOM to Enhance Web Pages 22

Chapter 11: Using DOM to Enhance Web Pages 23

Chapter 11: Using DOM to Enhance Web Pages 24

Chapter 11: Using DOM to Enhance Web Pages 25

Chapter 11: Using DOM to Enhance Web Pages 26

Chapter 11: Using DOM to Enhance Web Pages 27

Chapter 11: Using DOM to Enhance Web Pages 28

Steps detailing the programming for floatingImage()

Chapter 11: Using DOM to Enhance Web Pages 30

Chapter 11: Using DOM to Enhance Web Pages 31

Chapter 11: Using DOM to Enhance Web Pages 32

Chapter 11: Using DOM to Enhance Web Pages 33

Chapter 11: Using DOM to Enhance Web Pages 34

Chapter 11: Using DOM to Enhance Web Pages 35

Chapter 11: Using DOM to Enhance Web Pages 36

Chapter 11: Using DOM to Enhance Web Pages 37

Chapter 11: Using DOM to Enhance Web Pages 38

Chapter 11: Using DOM to Enhance Web Pages 39

Chapter 11: Using DOM to Enhance Web Pages 40

Chapter 11: Using DOM to Enhance Web Pages 41

Chapter 11: Using DOM to Enhance Web Pages 42

Steps detail the programming logic for the

Chapter 11: Using DOM to Enhance Web Pages 43

Chapter 11: Using DOM to Enhance Web Pages 44

Chapter 11: Using DOM to Enhance Web Pages 45

Chapter 11: Using DOM to Enhance Web Pages 46

Chapter 11: Using DOM to Enhance Web Pages 47

Chapter 11: Using DOM to Enhance Web Pages 48

Chapter 11: Using DOM to Enhance Web Pages 49

Chapter 11: Using DOM to Enhance Web Pages 50

Chapter 11: Using DOM to Enhance Web Pages 51

Chapter 11: Using DOM to Enhance Web Pages 52

Chapter 11: Using DOM to Enhance Web Pages 53

Вам также может понравиться