Examples

To Home Page

IT 130 -- Examples

Example 1 ex1.htm Ex1 Source Code
A Hello, World Vanilla HTML file.
Example 2 ex2.htm Ex2 Source Code
Sample HTML code for Project Proj1.
Example 3 dummy-text.txt
Dummy text for Project Proj2.
Example 4 tables.htm
An example showing tables.
Example 5 paragraphs.htm
More about headers and paragraphs.
Example 6 lists.htm
An example showing ordered and unordered lists.
Example 7 website1 Directory Structure website1 Architecture
An example showing how to use hyperlinks to navigate through a website.
Example 8 website2 Directory Structure website2 Architecture
An practice example showing how to use hyperlinks to navigate through a website.
Example 9 website3 Directory Structure website3 Architecture
The Creepy Dog and Planets Example to use for Project 3.
Example 10 planets.htm
Controlling the spacing between images in a table.
Example 11 table-with-border.htm
A border for a table using CSS.
Example 12 background-image.htm
Setting a background image for a page.

Starting with Example 13, this CSS file is used: examples.css.
Example 13 hello1.htm
Display Hello in an alert box.
Example 14 hello2.htm
Display Hello in the status bar.
Example 15 hello3.htm
Display Hello in a textbox.
Example 16 hello4.htm
Display Hello in a textbox. Use an event handler function instead of placing the JavaScript code directly in the onclick event handler.
Example 17 temperature1.htm
Convert a temperature from Celsius to Fahrenheit. Place the event handler in a separate function.
Example 18 builtin-function1.htm
Use Math.sqrt to compute a square root.
Example 19 builtin-function2.htm
Use Math.random to display a random number between 0.0 and 1.0.
Example 20 builtin-function3.htm
Use Math.pow to raise a number to a power.
Example 21 builtin-function4.htm
Use Math.floor to compute the floor of a floating point number.
Example 22 old-mcdonald1.htm
Display the Old McDonald had a Farm using the displaySong function.
Example 23 old-mcdonald2.htm
Display the Old McDonald had a Farm using three functions: showExclamation, showRefrain and showSong.
Example 23.5 temperature1.htm
Convert a temperature from Celsius to Fahrenheit. Use this example as a model for Project 4.
Example 24 temperature2.htm
Convert a temperature from Celsius to Fahrenheit. Refer to the textboxes by ID instead of by name.
Example 25 distance.htm
Compute the distance from (0,0) to (x,y) as the crow flies (the diagonal distance) using the Pythagorian Theorem d = sqrt(x, y).
Example 26 sunset-over-chicago.htm
Show an image with superimposed text. The image and the text are positioned using a div tag with absolute positioning.
Example 27 superimposed-planets.htm
Show superimposed images of planets.
Example 28 dice1.htm
Simulate two rolls of fair dice. Display the rolls as digits in two textboxes.
Example 29 dice2.htm
Simulate two rolls of fair dice. Display images of the six die faces.
Example 29.5 pick-random.htm
Show how to display a random integer from the maximum value set in a dropdown menu.
Example 30 show-coin-sides.htm
Display head or tail of a coin, depending on which button is pressed.
Example 31 dog-owner.htm
Display one of the images dogowner?.jpg, where ? can be any integer from 1 to 6. The integer ? is entered in a textbox.
Example 32 dog-owner2.htm
Display one of the images dogowner?.jpg, where ? can be any integer from 1 to 6. The integer ? is entered in a textbox. Refer to elements using getElementById.
Example 33 temperature-descriptors.htm
Input a temperature; output the description of that temperature..
Example 34 overtime.htm
Enter the hours worked and hourly wage; output the pay, assuming that overtime hours are paid time and a half.
Example 35 true-false-quiz1.htm
Present and score a five-question true-false quiz. Use textboxes to enter the answers.
Example 36 consultant-bs-generator.htm
Display a consultant BS sentence constructed from a randomly chosen verb, adjective and noun.
Example 37 100-bottles-of-beer.htm
Display all 100 verses of the song 100 Bottles of Beer on the Wall
Example 38 fair-coin-test.htm
Simulate tosses of a fair coin. Display the results.
Example 39 fair-die-test.htm
Simulate tosses of a fair die. Display the results.
Example 40 snake-eyes.htm
Simulate rolls of a pair of dice. Record how many rolls are required to obtain snake eyes.
Example 41 true-false-quiz2.htm
Present and score a five-question true-false quiz. Use radiobuttons to enter the answers.
Example 42 pass-fail.htm
If input is 70 or greater (passing) show a happy face. If output is less than 70, show a sad face.
Example 42.5 check-x.htm
Show each correct answer with a green check; show each incorrect answer with a red x.
Example 43 rounding.htm
Show how to round off floating point values to an arbitrary number of digit after the decimal point.
Example 44 seeds1.htm
Select quantity of each class of seed to purchase. The extended amount and total is computed in the form. This page is just a protoclass; no information is passed back to the server.
Example 45 seeds2.htm
Select quantity of each class of seed to purchase. The extended amount and total is computed in the form. The page is then submitted back to the server which extracts the order information from the textboxes.
Here is the source code running on the server that accepts the seeds2.htm page:

http://www.depaul.edu/~sjost/confirmation.php

http://condor.depaul.edu/~sjost/confirmation.php?txtname=Larry&ddmage=36-45

Example 65 entry-form.htm
Enter demographic information to submit to the server. The confirmation form for Example 60 is used.
Example 66 real-time-date.htm
Display the time and date, updated every second.
Example 67 slide-show1.htm
Create a sequential slide show that displays flags. The StartSlideShow function is called using an onload attribute in the body.
Example 68 slide-show2.htm
Create a slide show that displays flags. The flags are chosen randomly, not sequentially. The StartSlideShow function is called using an onload attribute in the body.
Example 69 slide-show3.htm
Show a random flag image when the page loads. Do not change the image until the page is refreshed (so the onload attribute in the body changes the image).
Example 70 button-slideshow1.htm
Advance a slideshow with a button simulated with an image.
Example 71 button-slideshow2.htm
Advance a slideshow with a button simulated with images. The two images represent the up and down states of the button.
Example 72 link-slideshow.htm
Use a link instead of a button to advance the slideshow. Use the mouseover and mouseout attributes to do this.
Example 73 page1.htm
Change the page with a button instead of a link. Set the document.URL to accomplish this.
Example 74 disappear.htm
Change style and content of text in a paragraph.
Example 75 background-change.htm
Change background color using the getElementById function to change the backgroundColor property.
Example 76 page-with-navigation.htm
Show a page with a navigation bar at the top and a table containing text and images.
Example 77 greece-page.htm
Show a page with a navigation bar at the top and a table containing text and images.
Here is the CSS style page: greece-styles.css.

Here are the original and processed images:
Example 78 hide-submenus.htm
A page with hidden submenus. The submenu disappears when a hyperlink clicked, or when a mouseexit event occurs.
Example 79 time-zones.htm
Refresh browser to get current time for cities around the world. Use the Date object to get the current local time.
Example 80 puppies.htm
Move mouse over image to enlarge.
Example 81 greece-page.htm
The Greece Page Example with horizontal navigation. Here is the new CSS file: greece-styles.css
;
Example 82 side-margin.htm
A webpage with centered div area. To center a div area, set margin property to auto.