Simple JavaScript Assignment Should Take 20 minutes max. Instruction in file uploaded. ThanksLAB 7
SILLY JAVASCRIPT FUN AND MORE JAVASCRIPT
PRACTICE
General information
1.
2.
3.
4.
5.
We are using what we have learned in the videos.
Watch the videos and take notes before you start the assignments.
Read the assignment before you start.
Always maintain backup copies of your work.
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, lab7axx.html and lab7bxx.html.
Using what we have learned in the videos – 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.
1. Insert an h1
2. Insert a div and put an image inside the div. All images are to be saved in a folder
called Lab7_Images.
3. Insert an h3
4. Insert an h2
5. Insert an h4
6. Insert an h6
7. Insert an h5
8. Apply style
a) Center the image by using text align on the div.
b) Give the page a background color
c) Make the h1 have text color red
d) Make all the other headings have the text color blue.
Hint: You can combine into one statement: h2, h3, h4, h5, h6 { : };
9. 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.
a) Click on the h5 and
i.
Change the background color of the page to a color that you select,
Hint: Assign your color to document.body.style.backgroundColor
ii.
Put out an alert that says: I can change the background color!
b) 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.
i.
The text color of that h4 to purple.
ii.
The style of that h4 to underline
c) Mouse over the image and
i.
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.
d) Click on the h2 and
i.
Change the size of the h6 to be 78pt. Hint:use getElementById and give
the h6 an id)
ii.
Change the text color of the h6 to teal. Hint:use getElementById again
e) Mouse over the h1 and
i.
Change the text color to lime Hint: Use this.style
f) Mouse off the h1and
i.
Change the text color to red Hint:use the event handler, onmouseout
.
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, h3, 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 to 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
a) Change the background color of the webpage to a color that you select (Use
document.body.style.backgroundColor)
b) Change the font size of this h2 to 34pt (Use this)
c) Change the font size of one of the h3s 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.
Make sure you save your completed assignment in the All_102Submissions folder.
Remember to include links to these files in the list in your All_Index.html page.

Purchase answer to see full
attachment




Why Choose Us

  • 100% non-plagiarized Papers
  • 24/7 /365 Service Available
  • Affordable Prices
  • Any Paper, Urgency, and Subject
  • Will complete your papers in 6 hours
  • On-time Delivery
  • Money-back and Privacy guarantees
  • Unlimited Amendments upon request
  • Satisfaction guarantee

How it Works

  • Click on the “Place Order” tab at the top menu or “Order Now” icon at the bottom and a new page will appear with an order form to be filled.
  • Fill in your paper’s requirements in the "PAPER DETAILS" section.
  • Fill in your paper’s academic level, deadline, and the required number of pages from the drop-down menus.
  • Click “CREATE ACCOUNT & SIGN IN” to enter your registration details and get an account with us for record-keeping and then, click on “PROCEED TO CHECKOUT” at the bottom of the page.
  • From there, the payment sections will show, follow the guided payment process and your order will be available for our writing team to work on it.