First steps with Windows 8 development - Build Windows 8 Apps with HTML5 and JavaScript - page 112

Note In its simplicity, this example is quite illustrative of the patterns you'll be applying in
all of the remaining chapters. Each of the upcoming chapters, in fact, will provide a list of
exercises through which you will practice the various aspects of Windows 8 programming
using HTML and JavaScript.
Data binding
In Chapter 1, you built your first Windows 8 application and had it generate a random number.
At some point, once the number was generated, you had the problem of displaying the number
to the user. When it comes to this, a first option is using the WinJS logger through the WinJS.log
method, as shown earlier. The WinJS logger, however, is good for testing but not for real applications,
since it shows the output only within Visual Studio.
Another option is using a message box, namely a pop-up window that shows some text and needs
to be closed manually by the user by clicking one of the displayed buttons. Although sometimes
effective, this approach is also much too obtrusive for the user. It is good for asking questions; rarely
for showing data. Most of the time, you just want the application to generate some output values and
silently display them through the existing user interface. In other words, you want data bound to the
existing user interface.
programmatic manipulation of the HTML page
A Windows Store application written with HTML and JavaScript is primarily an application that
consists of webpages—just processed in a slightly different manner from what a classic browser
would do. Because of this, a Windows Store application can contain any JavaScript-related code that
would make sense to have on a webpage.
When a browser renders a webpage, it creates an in-memory representation of the content
so that each and every HTML element turns out to be a programmable object. The in-memory
representation is known as the Document Object Model, or DOM for short.
You retrieve objects within an HTML page using the following line of code:
var element = document.getElementById("id-of-the-element");
The parameter passed to the method getElementById is the unique ID of the element to retrieve.
More complex query expressions can be arranged using the syntax for CSS selectors, as you learned
in Chapter 3, “Making sense of CSS.” In this case, the code to use looks like the one shown below:
// Query for multiple elements
var elements = document.querySelectorAll("your-css-expression");
// Query for just one element by stopping at first match
var element = document.querySelector("your-css-expression");