JS Exercises

In this lab, you will create two web pages, lab7axx.html and lab7bxx.html. Using what we have learned - no functions.

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

Lab7axx.html - JavaScript practice- You decide the content.

• Insert an h1
• Insert a div and put an image inside the div. All images are to be saved in a folder called Lab7_Images.
• Insert an h3
• Insert an h2
• Insert an h4
• Insert an h6
• Insert an h5
• Apply style
  • Center the image by using text align on the div.
  • Give the page a background color
  • Make the h1 have text color red
  • Make all the other headings have the text color blue. Hint: You can combine into one statement: h2, h3, h4, h5, h6 { : };
• Playing with JavaScript Note: You can only use onclick once in an element but you can use many JavaScript statements as the value of the onclick attribute.
  • Click on the h5 and Change the background color of the page to a color that you select, Hint: Assign your color to document.body.style.backgroundColor. Put out an alert that says: I can change the background color!
  • Click on the h4 and change: Note: We use this.style in an assignment statement to change the style of the element you are on. The text color of that h4 to purple. The style of that h4 to underline
  • Mouse over the image and change the alignment in the div so that the image appears on the left edge of the window. Hint: you will use onmouseover in the div and use this.style.textAlign in an assignment statement.
  • Click on the h2 and Change the size of the h6 to be 78pt. Hint:use getElementById and give the h6 an id). Change the text color of the h6 to teal. Hint:use getElementById again
  • Mouse over the h1 and Change the text color to lime Hint: Use this.style
  • Mouse off the h1 Change the text color to red Hint:use the event handler, onmouseoutand

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

1. Include an h3 that contains your name and section.

2. Include an h1 that says: The Grand Canyon with the word Grand in a span element.

3. Insert two images of the Grand Canyon and give them the same height and width so that they will fit on one line by side by side. All images are to be saved in a folder called Lab7_Images.

4. Put one div around the images and use a local style (in-line) in the div to center the images using the CSS text-align property.

5. Insert an h2, and a short paragraph about the Grand Canyon. You decide the content, only a few sentences in the paragraph.

6. Write the JavaScript code so that when you to mouse over the word Grand in the span element in the h1, the word Grand changes to red. Hint: Use the event handler, onmouseover, in the span element. And write an assignment statement using this.style. Note: We use this.style in an assignment statement to change the style of the element you are on.

7. Write the JavaScript code so that when you mouse over the div that contains the images, (You are putting onmouseover inside the div element.) the h1 changes to read: The Grand Canyon is Beautiful! Hint: Give the h1 an id and use getElementById (the id goes here).innerHTML in an assignment statement to change text. Note: getElementById is used when you want to mouse over one element and change a different element. innerHTML is used to change the text in the element.

8. When you click on the h2

• Change the background color of the webpage to a color that you select (Use document.body.style.backgroundColor)
• Change the font size of this h2 to 34pt (Use this)
• Change the font size of the h3 to 64pt (Use getElementById. )

9. When you mouse over the paragraph use JavaScript to make something happen. Insert an HTML comment to tell what you did.