Scribd
Upload
57 views

JavaScript Exemple Bis C12

The document discusses using the Document Object Model (DOM) to dynamically manipulate and enhance web pages. It describes how the DOM allows JavaScript to access and modify HTML elements as objects. It then provides examples of using DOM and JavaScript to create interactive elements like a navigation bar with image rollovers, a random image generator, slideshow, and pop-up captions. User-defined functions are created to handle DOM manipulation for these examples, including changing image sources, positioning elements, and showing/hiding content. Cascading style sheets are also used to style and format the interactive elements.

Uploaded by

barmircea10
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
57 views

JavaScript Exemple Bis C12

The document discusses using the Document Object Model (DOM) to dynamically manipulate and enhance web pages. It describes how the DOM allows JavaScript to access and modify HTML elements as objects. It then provides examples of using DOM and JavaScript to create interactive elements like a navigation bar with image rollovers, a random image generator, slideshow, and pop-up captions. User-defined functions are created to handle DOM manipulation for these examples, including changing image sources, positioning elements, and showing/hiding content. Cascading style sheets are also used to style and format the interactive elements.

Uploaded by

barmircea10
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 53

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

Chapter 11: Using DOM to Enhance Web Pages 3


Creating the Navigation Bar

Chapter 11: Using DOM to Enhance Web Pages 4


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
Chapter 11: Using DOM to Enhance Web Pages 6
JavaScript User-Defined Functions for
Image Rollovers

Chapter 11: Using DOM to Enhance Web Pages 7


JavaScript Code for User-Defined
Functions for the Image Rollovers

8
Creating User-Defined Functions for
Image Rollovers

Chapter 11: Using DOM to Enhance Web Pages 9


Entering Mouse Event Handlers to
Invoke User-Defined Functions

Chapter 11: Using DOM to Enhance Web Pages 10


Entering Mouse Event Handlers to
Invoke User-Defined Functions

Chapter 11: Using DOM to Enhance Web Pages 11


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
Chapter 11: Using DOM to Enhance Web Pages 12
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

Chapter 11: Using DOM to Enhance Web Pages 13


Create the User-Defined Function
Random Number Generator

Chapter 11: Using DOM to Enhance Web Pages 14


Create the User-Defined Function
Random Number Generator

Chapter 11: Using DOM to Enhance Web Pages 15


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

Chapter 11: Using DOM to Enhance Web Pages 16


Entering a Random Number Generator
User-Defined Function

Chapter 11: Using DOM to Enhance Web Pages 17


Entering Code to Show Copyright
Information and Date Last Modified

Chapter 11: Using DOM to Enhance Web Pages 18


Code to Show Copyright Information and
Date Last Modified

Chapter 11: Using DOM to Enhance Web Pages 19


Entering onLoad Event Handlers
in the <body> Tag

Chapter 11: Using DOM to Enhance Web Pages 20


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
Chapter 11: Using DOM to Enhance Web Pages 21
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

Chapter 11: Using DOM to Enhance Web Pages 22


Creating an Image Object

Chapter 11: Using DOM to Enhance Web Pages 23


Create slideShow() Function

Chapter 11: Using DOM to Enhance Web Pages 24


Create a User-Defined Function to Add a
Slide Show

Chapter 11: Using DOM to Enhance Web Pages 25


Enter an OnLoad Event Handler to Call a
Function

Chapter 11: Using DOM to Enhance Web Pages 26


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

Chapter 11: Using DOM to Enhance Web Pages 27


User-Defined Functions for Image
Rollover Navigation Bar

Chapter 11: Using DOM to Enhance Web Pages 28


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
Chapter 11: Using DOM to Enhance Web Pages 29
Code for floatingImage() Function

Chapter 11: Using DOM to Enhance Web Pages 30


Entrer the floatingImage() Function

Chapter 11: Using DOM to Enhance Web Pages 31


Code for stopFloat() Function

Chapter 11: Using DOM to Enhance Web Pages 32


Enter stopFloat() Function

Chapter 11: Using DOM to Enhance Web Pages 33


Code for restartFloat() Function

Chapter 11: Using DOM to Enhance Web Pages 34


Enter restartFloat() Function

Chapter 11: Using DOM to Enhance Web Pages 35


Code for coupon() Function

Chapter 11: Using DOM to Enhance Web Pages 36


Enter coupon() Function

Chapter 11: Using DOM to Enhance Web Pages 37


Entering an Embedded Style Sheet
to Format the Floating Image

Chapter 11: Using DOM to Enhance Web Pages 38


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

Chapter 11: Using DOM to Enhance Web Pages 39


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

Chapter 11: Using DOM to Enhance Web Pages 40


Add OnLoad Event Handler to Call the
floatingImage() Function

Chapter 11: Using DOM to Enhance Web Pages 41


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

Chapter 11: Using DOM to Enhance Web Pages 42


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

Chapter 11: Using DOM to Enhance Web Pages 43


Code for Navigation Bar Image Rollovers

Chapter 11: Using DOM to Enhance Web Pages 44


Create popupCaption() User-Defined
Function

Chapter 11: Using DOM to Enhance Web Pages 45


Entering the popupCaption() Function

Chapter 11: Using DOM to Enhance Web Pages 46


Adding an Embedded Style Sheet Using
id and Class Properties

Chapter 11: Using DOM to Enhance Web Pages 47


How to Use Selectors in a Style Sheet

Chapter 11: Using DOM to Enhance Web Pages 48


How to Use Selectors in a Style Sheet

Chapter 11: Using DOM to Enhance Web Pages 49


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

Chapter 11: Using DOM to Enhance Web Pages 50


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

Chapter 11: Using DOM to Enhance Web Pages 51


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

Chapter 11: Using DOM to Enhance Web Pages 52


Entering <div> Tags Containing Pop-up
Caption Text

Chapter 11: Using DOM to Enhance Web Pages 53

You might also like