CMSC 210
Spring 2017
First Javascript lab
Due: Wed, March 1
beginning of class 

Assignment:   (worth 6 exercise points)      

0)     Look at this first example page about changing text:
Open the source and examine it thoroughly. Ask any questions you may have.

1)   Look at this second example page about changing text
Open the source and examine it thoroughly. Ask any questions you may have.
You will wish to examine the file changeExample-2A.js

2)    Modify the page and look at a new script.
  • Download the second example page above so that you can edit it.  
  • Change the javascript source file to be  changeExample-2B.js
  • Do what you need to do to get the program to behave reasonably.   For instance, you will need to figure out how to download that .js file.
  • Examine the code.   Ask any questions you may have.

3)  Download the file:   JSwork.html

Make the following modifications to the file.    NOTE that all changes you make must happen within the head section of the document, not the body section.

  • when the Background button is clicked:
    • the background color of the whole page should change to yellow.
  • when the Header button is clicked:
    • the background of the h1 on the page should change to green.  (you may need to use style for this,rather then bgcolor)
  • when the Align button is clicked:
    • the three cells that have text in them should be centered both vertically and horizontally.
  • when the Image Borders button is clicked
    • the two images in the table should have a solid border 5 pixels thick appear around them.
  • when the Reset button is clicked:
    • the page should revert back to its original state.
  • EXTRA CREDIT:  when the Spacer button clicked:
    • All cells in the middle column should get the same color as the page background.
    • Remember, you can not change the body.

4)   Download the file    QuizInJSPage.html

a)  Add Javascript as appropriate so that the user is told how many they got correct.   If you do not know the answers to these questions, you are welcome to look them up.
  • You have options as to scoring:
    • number right
    • percentage correct
    • some other accurate description
  • You have options as to reporting the score:
    • an alert box
    • reported on the page itself
  • Options for location of Javascript:
    • in this file
    • in a separate file.
b)    add a question with a select menu and include that in the scoring.   Topic of the question is up to you.  


Publish your folder to your account.    I will be looking at the following URLs:  (replacing youruserid as appropriate)  (replacing youruserid as appropriate)