Using Visual Studio 2012 Express edition for Windows 8 - Build Windows 8 Apps with HTML5 and JavaScript - page 19

First off, add the following markup to the body of the page in default.html . The markup consists of
two DIV blocks containing the placeholder for generated number and the button to click to get a new
number. You insert the following markup between the header and footer elements:
<div>
<label id="numberLabel">?</label>
</div>
<div>
<input id="numberButton" type="button" value="Get number" />
</div>
Next, open the default.js file and add the following JavaScript functions at the bottom of the file:
function numberButtonClick() {
var number = generateNumber();
document.getElementById("number").innerHTML = number;
}
function generateNumber() {
var number = 1 + Math.floor(Math.random() * 1000);
return number;
}
The first function is the handler for the click event on the button. The second function just
generates and returns a random number between 1 and 1000. The final step consists of binding the
click handler to the actual button in the HTML markup. There are a number of ways to do this, the
simplest of which is shown below:
<input id="numberButton" type="button" value="Get number"
onclick="numberButtonClick()" />
A more elegant way—and the recommended way of doing it in Windows 8 programming—
consists of making the binding dynamically as the page is loaded. So open the default.js file and
modify the code of the app.onactivated function, as shown below:
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !==
activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
document.getElementById("numberButton").addEventListener(
"click", numberButtonClick)
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.