Web Design Tutorial - HTML, JavaScript, and Style

WINDOW OBJECT

Has many properties and methods
Open Property Viewer and type in window to view properties

METHOD	DESCRIPTION
window.open()	Opens a new window
window.close()	Closes a window
window.print()	Prints a window
window.event...	Event property ... many of them
window.setInterval()	Starts timer
window.clearInterval()	Turns off timer
window.setTimeout()	Causes action to be performed within certain time

winName = window.open("url", "name", "parameters")

url is the page to open
name can be used to reference the window
parameters can be used to control the features of the window
- width = ###
- height = ###
- toolbar = yes or no
- status = yes or no
- resizable = yes or no
- top = ###
- left = ###
- location = yes or no
- fullscreen = yes or no (A fullscreen window w/o title, status, or scrollbars)

window.close()

Can close current window using self.close()
Can close other window by using assigned name.

Writing to a New Window

winName.document.write("Text written...")

window.event

Many event properties
Visit Property Viewer and type in window.event

TIMER METHODS

Start a timer that repeats an actions every specified milliseconds
- timerName = window.setInterval("action", milliseconds)
Stop timer using
- window.clearInterval(timerName)
Cause an action to be executed in specified milliseconds
- window.setTimeout("action", milliseconds)

EXAMPLE

Font: 8pt 12pt 20pt 24pt Width: Min. 50% 75% 100%

PRACTICE

1. Experiment with window.open by changing the parameters.

2. Create a page with a button labelled print. When the user clicks print, the page should be printed using the print() method.

3. Create a page that sets the font size of a div to the x location of the mouse as the user moves the mouse.

4. Add code to a page that starts a count-down timer in seconds. The time should start at 10 and be decreased by 1 every second. The time should be displayed in the status bar. When the time reaches 0 the timer should be turned off and the background of the page turned to red.

5. Create a page with a simple animation. When the user clicks an image, the image should move across the page.

6. Create a slide show that loops through several images.