JavaScript, jQuery, and DOM model interaction

Out of Nowhere

The first step is to render the boxes on the empty page, which occurs in the loop starting in line 13. The for loop iterates over the existing forms to determine the elements of a container. Loop variables in JavaScript, however, contain the string value of a container; the integer values are read from <container> <loop-variable> (lines 15 and 17).

The first line of the loop statement includes the jQuery method with the dollar sign in its simplest form. If you pass $() to HTML code, it creates a valid, but not yet rendered, HTML fragment. The browser automatically adds the missing </div> end tag. However, jQuery encapsulates the HTML fragment in a jQuery object before returning it, which you can use to call all methods.

Among these methods is css() on line 15, which assigns a style attribute to the div just created and expects a JavaScript object with attribute-value pairs. Thus, the following attribute in the example is created:

style="height:50px; width:150px; background-color: red"

The next line embeds the color text string in the <div> element and the one after that adds a class to the element:

class="colorbox"

The $(<selector>).append(<element>) line is probably the most commonly used method in jQuery. The selectors from the first part of the statement, especially, make life a lot easier for developers. Here you find largely the same terms used by Cascading Style Sheets (CSS) [3] to bind style definitions with HTML elements. A tag name extracts all elements with the tag of a certain type, a <.class-name> extracts all elements of class="<class-name>" , and #<id> extracts the element with id="<id>" .

You can attach as many filter methods (e.g., first() , last() , and parent() ) as you want to the $(selector) . The comprehensive jQuery documentation [4] [5] describes the entire gamut. With these selectors, you can pick any element from a complex HTML page by using a single line of code that works reliably on all major browsers – that's what makes jQuery so popular.

The sample code needs only one simple selector, $("body") , that works with the single <body> tag of the page. The append(div) method adds the <div> tag to the end of the page body that was given a style, text, and colorbox class attribute in the meantime. Thus, four loop iterations over the colors array create the four different color boxes.

Eventfulness

The only thing missing is the event handler that creates a dialog with the appropriate saying from the sayings object based on the color box that the user clicks. The $(".colorbox") statement selects all the tags of the colorbox class, that is, all the inserted <div> s.

To set the event handler, jQuery provides the on() method that irons out the browser characteristics – as did the selectors. It expects the name of the event as its first parameter (e.g., click ) and a lambda function as its second parameter, which occurs with the event. The lambda function provides jQuery an object that contains a lot of information about the current event [6].

The this keyword plays a major role in this example. The JavaScript event handlers run within the context of each DOM element that triggers the event, and this is the pointer to the current object. Here it points to the clicked color box.

To process the element in this , you call up the $() base function with this as its parameter and assign the result to the clicked variable. You can now use clicked.<method()> to apply any jQuery function to the clicked color box. In this case, it uses text() , which you already encountered when setting the text inside the box.

Without a parameter, this action returns the text contained in the tag, which is the initial-uppercase color name in this example. Under this key, the sayings object has a saying applied to each color. Using sayings color , you can pass it on to the browser's alert() method, which opens the dialog corresponding to the color-based saying.

« Previous 1 2 3 4 5 6 Next »