Creating Websites home
Introduction to the Web
Marking up text
FTP and FileZilla
Links and anchors
Getting some style
Testing and debugging
Images and maps
Audio and video
The DOM and scripting
Logic and Arrays
Functions and document.write
Forms and INPUT
Scripting w/ tables
Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.
'if', arrays, and 'for'
Hands on exercise
This exercise is primarily focused on using the 'if' statement and working with an array of images.
First, create a new page, scripts2.html. (Remember, 'html_skel'
In the <head> element, add a <script> element with the following contents
* declare a variable, A_bold with a value of false
* declare a variable, 'i', initialized to 0 (zero)
* create an array named 'pics' with three entries:
* "boardroom1.jpg", "computer_room.jpg", "conf_a.jpg"
In the <body> element, include:
* A <p> element with an onclick event that:
Checks if A_bold is false, and if so:
+ set the font weight to be bold and
+ set A_bold to be true
+ set the font weight to be normal and
+ set A_bold to be false
The element content should tell the user:
Click this text to swap between bold and normal.
* Another <p> element with content:
"Click the image below to see the next picture"
* An <img> element with src=boardroom1.jpg
and an onclick event that:
Checks if "i" is less than 2, and if so:
+ add 1 to "i"
+ set "i" to 0
then assign "this.src" to be pics[i].
After you have both event handlers working, add a link to scripts2.html from your index.html page.
A cumulative summary of the contents of the course so far: Click here
back list forward