Lab 2 – Designing and Implementing a JavaScript Calculator



In-class Lab – JavaScript Looping

Complete the following tasks related to looping. Read over the calendar case study and pages 35-41 of the JavaScript book first. Be sure to carefully design your solutions prior to any coding.

For all of these problems, start with the file template.html located in the OUT folder for CS17. This file gives you a page with functions and associated buttons that print text and HTML to a SPAN object on the page.

1. Make a folder called loops. Copy the template to this folder. Make sure you thoroughly understand the template. Ask as many questions as you need to in order to gain this understanding.

2. Save a copy of the template as looping1.html. Modify it so the “Show Output” button prints the numbers 1 through 10 in a column, centered on the page. Use a loop to do this. The only changes you have to make are to the determineContent() function. You have to make sure that the variable called string contains the HTML and text necessary to solve the problem when the function ends (i.e., when the return statement is reached). It’s not as hard as you think. Design your solution in words on paper first. You have to use the concatenation operator (“+”). What’s the first thing you’d need to print what is required? The HTML tag, right? So, assign it to string. What’s next? The number 1. So, concatenate the number 1 to the end of string. Next? A line break (“”). So concatenate it to the end. Once you see the pattern, you can write a loop to do all the work for you.

HINT: If you want to concatenate something to the end of a string, use a statement like this:

string = string + “what you want to append”

3. Save a copy of the template as looping2.html. Write a page that prompts the user to type a positive integer X into a text field, then writes the numbers 1 through X, centered on the page. Again, use the provided functions. You’ll have to add the text field for input, but only the determineContent() function will otherwise have to change. (Will it need a parameter this time?)

4. Save a copy of the template as looping3.html. Write a page that asks the user to type a positive integer X into one text field, and another positive integer Y into another text field, then prints the numbers 1 through X in a table, with Y values per row. (HINT: You’ll need the mod operator % for this one. The printMonth function from the calendar case study can provide some additional hints.)

5. Write a new page (not using the template) called birthdate.html that displays a random number between 1 and 31 as a level 1 header every time you refresh the page, with a message (in red text) that says “Happy Birthday to Me!” whenever the random number is your birth date. You should use the onLoad event handler for this one. (You’ll have to figure out where it goes.) You should also use the command document.write() to write text and HTML to the page. (In other words, don’t use the span/innerHTML method of the previous problems. (I know… This doesn’t have anything to do with looping. It’s just for fun.)

6. Write a page index.html in your loops folder with links to your solutions for all of the preceding problems. Upload the entire folder to your CS server account.

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

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

Google Online Preview   Download