Scripting Enhancements - HTML5 with Visual Studio 2012 - page 104

Chapter 5

Scripting Enhancements

In this chapter I will demonstrate a few miscellaneous improvements that affect the scripting aspect of web
development. So far, I have introduced the markup changes and the CSS enhancements. Scripting is the third
leg of the overall HTML5 umbrella and a significant amount of attention was given to this area. This chapter will
explain some improvements that have broad application, specifically:

• Query selectors

• Web workers

• Bundling and minification

Bundling and minification is not actually part of HTML5 but is a new feature of Visual Studio 2012. It is really
easy to use and can make your page load much faster.

Using Query Selectors
In Chapter 4 , I explained the CSS selectors that you can use to create powerful style rules. CSS3 introduced a
significant improvement in this area. With the robust attribute selectors and quite a few new pseudo-classes such
as nth-child that you used in Chapter 4 , there is considerable functionality for selecting DOM elements. But it
gets even better; all of this ability is available from JavaScript as well.
The HTML5 specification includes two new functions, querySelector() and querySelectorAll() . The
querySelector() function returns a single element; the first one that matches the specified selector. The
querySelectorAll() function returns an array of matching elements. For both functions you pass in the CSS
selector, formatted just like you would in a style sheet. So once you've learned how to use CSS selectors, you can
apply that same experience to JavaScript.
To try out these functions, you will use the same web page that you created in Chapter 4 . The final version of
the Chapter 4 project is available in the source code download if you want to use that.

Using querySelector
The querySelector() function can be used to replace the getElementByID() function. Of course it is much more
useful than that, because you can pass in any type of CSS selector.
Open the Default.cshtml file and modify the rotateImage() function, replacing the getElementByID()
function like this:
function rotateImage(value){
document. querySelector("#phone") .style.webkitTransform
="rotateY(" + value + "deg)";
}