Original file was S10Lab3.tex



Lab 8

Silly JavaScript Fun and More JavaScript practice

General information

1. Read the entire assignment before you start.

2. Always bring your notes to lab.

3. Always maintain backup copies of your work. Always work from your X drive while you are in the lab and copy your work to your USB memory at the end of lab.

4. Never share your password, flash drive, or your code with anyone. Maintain the standards of academic honesty discussed in lecture and in previous labs. The work you turn in must be your work.

In this lab, you will create two web pages, lab8axx.html (due at the end of lab today) and lab8bxx.html.

As always, you will need to include a link to each of these files in the list in your All_Index.html page.

Lab8axx.html - due at the end of lab.

Your instructor will look at your code before you leave.

Remember you cannot copy / paste code from Microsoft word. So if you copy code from this document it will cause trouble.

Carefully follow the steps below to create a page that when you click on the h1 the page disappears and shows a message and when you mouse to the bottom of the new page the original page returns.

a) Using your template create a webpage that contains a div.

b) Give the body element the id of kidding.

c) Give the div the id of gone.

d) At the bottom of the page (just before the closing body tag) insert a script element.

e) In the script element insert an assignment statement to save the content of the webpage using the variable myPage.

Hint:

myPage = document.getElementById(‘kidding’).innerHTML;

We want to save it so we can bring it back after we make it disappear.

f) Inside the div, insert a silly image (not scary). Save the image in a folder named Lab8_Images

g) Below the div insert an h2 and an h3 containing some text.

h) Insert an h4 that contains your first and last name.

i) In the h2 insert an onmouseover event handler that

1. Uses an assignment statement to set the innerHTML of the body (use getElementById) to the value of the variable myPage.

2. Uses an assignment statement to set the background color of the web page to orange. Hint: document.body.style…

j) In the style element

1. set the background color of the page to orange.

2. Set the color of all em elements to the color lime.

k) Put an h1 above the div that says Watch This!

1. Use an onclick in the h1 to do the following in order given below:

• Remove the picture by setting the innerHTML of the div to text, spaces or to nothing. document.getElementById('gone').innerHTML = ‘ ’

• Change the text of the h1 to an em that says Oooh!Your page is Gone! using an assignment statement. (hint: use this.innerHTML on the left side of an assignment statement.) Example: this.innerHTML=‘ Oooh! Your page is gone!’;

1. Set the background color of the page to the color black using an assignment statement. Hint: document.body.style…

Be sure to test the page.

Lab8bxx.html (Due the night before your next lab.)

Without using functions:

1. Include a heading with your name section and today’s date.

2. Insert an image of a blue flower. All images are to be saved in a folder called Lab8_Images.

3. Put the image in a div and using a local style (in-line) in the div to center the image.

Hint: use text-align

4. Insert an h1, h2, h3, h4 and a short paragraph. You decide the content.

5. Write the JavaScript code so that when you to mouse over the blue flower, the h1 changes to read: A Beautiful Blue Flower. Hint: use getElementById (the id goes here).innerHTML to change text.

6. When you click on the h2,

a) Set the background color of the webpage to palegreen

b) Chang the font size of the h2 to 56pt

c) Chang the font size of the h1 to 64pt

d) Change the text color of the h1 to red

7. When you mouse over the paragraph use JavaScript to make 3 things happen.

Insert an HTML comment to tell what happens,

8. When you click on the h4 change the alignment of the div to put the image on the right edge of the window.

9.Make something neat happen when you click on the h3.

Make sure you save your completed assignment in the All_102Submissions folder.

Remember to include links to these two files in the list in your All_Index.html page.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download