Lab 6: Introduction to JavaScript




Part I

Exercise 1: Show the output displayed when the following code segments execute:
    var i = 25;
    var j = "25";
    var k = 2 + "5";
    var l = "2" + "5";
    1. document.write(i == j);
    2. document.write(j == k);
    3. document.write(i == k);
    4. document.write(k == l);



Exercise 2: Locate the errors in the following JavaScript code.
    var words = 'These french fries are cold.";
    var isBad = "false";
    var $fun = "Bobo went for swim."



Part II

Exercise 1

Write the CSS, HTML, and JavaScript to produce the webpage shown below.
NOTES:
  1. The body tag should be empty
  2. Use JavaScript to compute the date and time information
  3. Display date and time exactly as shown in the image





Exercise 2

Write the basic HTML and JavaScript files to produce the app shown below.
  1. Create the divisitons in the mockup design.
  2. and specify the interactive elements, along with their identifiers.
  3. The first two interactive elements, "Miles Driven" and "Gallons of Gas Used" will be used for input by the app.
  4. The interactive element for "Miles Per Gallon" should not be used as input. Prohibit the user's ability to add data to this element. This element will be used as output.






Exercise 3

Create a basic Wages App, as shown below.


Exercise 4

  1. Build the webpage game shown in the mockup below. At the bottom of this page is an animated version of the game.
  2. The web page must use a basic CSS file for formatting and a JavaScript file for game play. You may create your own puzzle pieces or use the ones provided below.
  3. Upload the web page, along with additional files, to your website and make sure it displays properly in Chrome and Firefox.




Exercise 5

Modify the Wages App so that the user can enter values as shown below. TIP: The value will be a range.





Exercise 6

Modify the Wages App so that input will be validated.




Exercise 7

Create the web app shown below to build multiplication tables.






Part III: Using the HTML canvas

Exercise 1

Write the HTML and JavaScript to produce the webpage shown below.







Exercise 2
    Use HTML and JavaScript to build the Three Green Ring Bull's Eye app, shown below.
    The user is able to specify the level of darkness applied to the green rings.
    Each ring will be filled with green color that is a slight variation of the previous ring.
    NOTE: The largest ring should be drawn first.
    The smallest ring should be drawn last.
    Rings should fit properly in the browser window.




Exercise 3
    Build the cCurve app shown below.
    Do not allow the user to select a level below 0 or above 14.
    It is important that you tit the fractal in the browser window.