| become familiar with basic JavaScript programming |
| learn to use a JavaScript debugger |
| perform elementary execution time comparison of a Java vs. JavaScript application |
In this assignment, you will create a JavaScript application based on a functioning Java application. JavaScript programs generally run in the context of a web page, so you will also have to create a simple HTML page to host the JavaScript program. When the HTML page is loaded into a browser, the hosted JavaScript program executes. In this assignment, the Javascript application must generate output to the debugging console, while obtaining input using a prompt dialog. (You will investigate getting user input from a web form and generating displaying the output in the body of the web page in a subsequent assignment).
Download and execute this simple Java application, adapted directly from an example in chapter 9 of the current SE1011 textbook. The application simulates flipping a number of coins (e.g. 5) a given number of times (e.g. 100000). Each coin flip results in some combination of heads and tails - anywhere from 0 heads to all 5 heads. Over 100000 flips, some finite number of flips with 0 heads will occur, some finite number with 5 heads, and others with 2, 3, or 4 heads. The number of heads that occur over all flips can be displayed as a histogram, as follows:
Number of times each head count occurred: 0 3064 *** 1 15734 **************** 2 31206 ******************************* 3 31141 ******************************* 4 15687 **************** 5 3168 *** Coin Flipper Time: 33ms
Run the Java program on your PC, noting the times it takes to execute. You may have to run in several times to get a good feeling for the average time of execution.
The Java program uses the random number generator of the Math class to randomly generate heads or tails for each coin's flip, so the results will vary each time the program executes.
The Java example is written such that the number of coins and number of flips are specified by constant values. The histogram is generated to the System console. As with any standard Java application, there is a main class (CoinFlipper) containing a main() method along with a few helper methods.
For this assignment, you need to translate the Java application to equivalent JavaScript. In converting the application, you'll have to make numerous adaptations. Looping and conditional statements are very similar between the two languages, so those should not pose particular problems. Function and method declarations, of course, are very different. The JavaScript core API includes a Math object that is essentially equivalent to Java's Math class. In this assignment, you'll also have to replace the Java code that uses System.out.print with equivalent JavaScript calls to the console object, which contains methods that generate output to the browser's debugging console. See the documentation on the console API.
You will also need to create a simple CoinFlipper.html web page with <script> tags to host the JavaScript application. In this file, place one <script>...</script> tag in the <head> section which references the CoinFlipper.js file. Place a second <script>...</script> tag following the first script tag. Within this second tag, insert the JavaScript code that is equivalent to the Java program's main() method: it clears the debugging console, starts a timer, calls the JavaScript function that is equivalent to the Java program's flipCoins() method, and finally, stops the timer and displays the elapsed time.
In addition, you must prompt the user (using the prompt method) for the number of coins and number of flips. If the values supplied by the user are invalid, you must repeat the prompts until a valid input is obtained. You may also give the user the choice of quitting.
Your CoinFlipper.html file should also define a <h1> heading in the body section containing your name, which should be displayed when the page is loaded into a browser.
Convert the Java methods flipCoins, doSingleFlip, and printHistogram into their equivalent JavaScript functions. You may choose to implement these as methods of a Javascript Coinflipper object (or just implement them as global functions). Place the code into the CoinFlipper.js that is referenced from the CoinFlipper.html file.
When your application is working correctly, it should generate output similar to the following (in this example, for 5 coins):
Console was cleared Number of times each head count occurred: 0 3189 *** 1 15781 **************** 2 31168 ******************************* 3 31176 ******************************* 4 15580 **************** 5 3106 *** Coin Flipper: 3710.000ms
Run the application in several browsers, for instance: Chrome, Firefox, IE. You may also use Safari or Opera if you have them. Note that your results, including the elapsed time, will vary - you will have run the application several times to get a good feel for the average execution time for each browser. Observe and record the times it takes to execute the JavaScript version of the application on each browser - you will need this for your submission.
When you have finished,