This chapter introduces a number of advanced techniques that you may wish to pursue further once you have finished this book. First, you will be introduced to jQuery, which is a good JavaScript library for creating DOM-related scripts that work cross-browser. You will also learn a little about other JavaScript libraries that are available, such as php.js and MooTools. After covering these libraries, you will look at how JavaScript is incorporated into HTML5, and then learn about things that are on the horizon for the future of JavaScript in ECMAScript Harmony.

If you decide to use a remote copy, such as one from Google (which can be helpful as the user may already have the file cached, which will speed up load time), you can grab the latest code from https://developers.google.com/speed/libraries/devguide#jquery. Here is an example of using a copy from Google:

You can choose the method that works best for you. Once you have the code included in your HTML, you are ready to make use of what jQuery has to offer.

This is placed in your regular JavaScript code (for example, your .js file). Notice the $ at the beginning of the code. This is the jQuery selector, and is used when you invoke jQuery in your JavaScript code.

This simply changes a couple of CSS style properties, though it does take several lines of code to do so. In jQuery, this can be shortened like this:

First, you will notice that the “story” div is selected using CSS syntax (“#story”) rather than document.getElementById(“story”). This makes the selection of the element a little shorter. Also, you will see that event handling simply attached the event name (“click” in this case) followed by the function to execute when the event occurs. This keeps you from needing to write cross-browser event-handling code. Next, you are able to alter the CSS of the element by using the css() method on the story element. The css() method accepts an object as a parameter, and it contains each property to change along with its new value (all quoted much like JSON syntax). In this way, you do not need to code a separate statement for each CSS property change you want to make.

If you are using a local copy of jQuery, you can call that in place of the Google copy here. You can save this HTML page as jqexample.html. Next, you will want to create a JavaScript file, which you will save as jqexample.js. Here is the code:

Once you have the code in place, open jqexample.html in your browser and click on the div element. The text should become larger and turn blue. Figure 16-1 shows the page before the changes, while Figure 16-2 shows the page after the changes:

Further selection options are available if needed at api.jquery.com/category/selectors.

This gives three possible styles. Each can now be easily applied to an element or taken away as needed. To add a class, simply call addClass() with the class name as the argument, as in the following code:

If you later decide to remove it, you can do the same thing with removeClass():

This will not only make the text larger and blue, but will also make it italic. You can make use of this along with the existing code in order to add or remove classes on a click.

With this code, each click will add or remove both the style2 and style3 classes, depending on the current style of the element.

As you can see here, the JavaScript if statement and the logical NOT operator (!) are used here along with the jQuery code. jQuery is a JavaScript library, so all of the code is still JavaScript code. Since this is the case, you can use any JavaScript code you need as well—operators, statements, arrays, functions, and more. Figure 16-3 shows what the initial page looks like, while Figure 16-4 shows how the page looks after the link is clicked.

If you want to show the element over time, you can send the number of milliseconds to the show method as an argument:

When this argument is provided, the element will fade in while increasing in width and height during the specified span of time. Here, the “story” element would fade in and increase in size over a period of 1000 milliseconds (1 second). Alternatively, there are some preset values you can use in place of a specific time: “fast” and “slow”, as in the following code:

You could continue the process by using a callback function as the second argument of the fadeOut() method, and continue adding callback functions as needed until your desired effects have all been completed.

Anything inside the opening and closing tags will be displayed in browsers that do not support the <canvas> element, as in the following code:

Once you have the context, you can begin using it to draw lines, shapes, text, and more.

Figure 16-5 shows how this would look in a browser. Notice that the canvas is not outlined. If you want to outline it, you can use CSS to add a visible border.

Figure 16-7 shows the result of this code. Notice how the filled rectangle now has an area cleared inside of it.

Here, fillStyle is set to #FF0000 (red), and any shapes after this assignment will use red for the fill color. This can always be changed as you go to use shapes with different colors, as in the following code:

If you have particular settings such as fillStyle and strokeStyle that you want to save for later, you can use the save() method. You can then restore those settings using the restore() method, as in the following code:

Figure 16-8 shows the result of this code. It draws a half-oval on the canvas.

The text will now be a bold Verdana font with “end” alignment. Figure 16-9 shows the result of this code when run in a browser.

Doing this will allow items to be dropped into the dropdiv element.

Note that you can store both “text” and “URL” types in a single dataTransfer object, but cannot have more than one of either type. HTML5 extends this to allow for any MIME type to be passed (“text” and “URL” are still valid and are the same as using the “text/plain” and “text/uri-list” MIME types, respectively). Just remember that only one piece of data from each MIME type can be stored in a dataTransfer object.

Notice the capital “T” when retrieving text, which allows older versions of Firefox to get the text value while still working for other browsers. Also, note the method for getting the URL tests first for the “URL” and then for the MIME type “text/uri-list”, in order to help with older versions of Internet Explorer.

Since links are draggable by default, the draggable=“true” attribute is not necessary here. The div element is given a border so that the user can see where to drag the link. Next, you will need the JavaScript code:

You will notice that since you are dragging a link, you do not need to call setData() to store the URL in the dataTransfer object (if you needed to do this, for example, to store text, you would also need to get the link element by its id, then add an event listener for the dragstart event and use setData() within that function). The action here occurs on the drop event for the target div element. When the link is dropped inside the target div, then the URL that was stored in the dataTransfer object is displayed in that div using innerHTML. Figure 16-10 shows the page before the item is dragged and dropped, and Figure 16-11 shows the page afterward.

With this in place, the value of MAGIC_NUMBER cannot be changed afterward; it will remain constant even if code attempts to change it. The following code shows an example of this:

Figure 16-12 shows the first alert, and Figure 16-13 shows the second alert. Notice that the value remains 7, even though the code attempted to change it to 42.

In this code, the name variable is only available for use within the while loop. Trying to alert the value outside the loop results in name being undefined. Figure 16-14 shows the alert that occurs within the loop, and Figure 16-15 shows the alert that occurs outside the loop.

Here, a let statement block is created, and any variables defined within the parentheses will have block-level scope within this block. The name variable will have a value of “John” in the first alert, but will be undefined in the second alert, which is outside the block. As you can see, this can be useful when you need to create a block-level scope without defining a new function.

Here, the variable my_num will have a value of 15 (3*5). Since the value of 3 is passed to the function, the default value of 0 for num is not used. The default_num variable will have a value of 0 (0*5), since no argument was passed to the function, requiring it to use the default value of 0 for num. In this way, you can avoid using additional code to check whether a value was passed to the num variable.

This creates a constructor for the properties and places the method on the Car prototype. The following code would create a class that is equivalent to the code shown previously:

As you can see, the class keyword is used, followed by the name of the class, which is defined within the block. A class can contain any number of functions that are used as methods. When inside a class, a method named constructor will always operate as the constructor function for the class. Any other methods will be added to the object’s prototype, allowing for maximum reuse of their code. Being able to define a class allows all of the object’s code to be in one place (the code block for the class) while still utilizing the advantages of the constructor/prototype pattern.