The first and foremost question that web developers about to start working on jQuery face is, Are JavaScript and jQuery related, or are they two completely different entities altogether? Although we could simply reply, yes, they are related, and move on, we will attempt in this chapter to introduce jQuery and its evolution from JavaScript. By the end of this chapter, we hope to have explained the following:
How JavaScript is used to solve common web development problems
The most common challenges that web developers face
Changing times and, hence, technology
The mastermind behind jQuery
Why jQuery is an important component of web development
Traditional JavaScript Basics
The evolution of web technology saw a transition from Web 1.0 to Web 2.0. The impact of this change was expected to alter the way web-based applicationsessentially web siteswould replace desktop-based applications, both in terms of the functionality they provided, as well as their look and feel. By this time, and due to this objective in their development plans, web developers were strongly feeling the need to add dynamic behavior to their static web pages. JavaScript was the only savior, according to the old school of web development. For each and every dynamic behavior to be performed on a web page, JavaScript code had to be written. The job of the web developer was facilitated by JavaScript, because the code worked fine.
A JavaScript developer now had the freedom to use some default objects that became available. These objects made possible some methods and operations that improved the dynamic behavior of web pages. In most cases, the code would roam about using the basic program constructs of JavaScript. A walk through some of the objects and associated methods and properties (or attributes) available by default with JavaScript will help you understand the basic functionality that the library could provide. This will make you understand how JavaScript contributed to solving common web development problems (and helps even today). The most basic validations were easily achieved by these components provided by JavaScript.
The Window Object
There is a mother object window that contains everything in it a developer might need. A window object represents an open window in a browser and provides a number of methods pertaining to an open window. This object, just like a normal class object, encapsulates a number of member functions or methods, properties, and a number of child objects as well. The child objects, which we discuss in the next section, in turn encapsulate some other functionality and ensure keeping JavaScript code readable and maintainable (as in the case of all other languages following the object-oriented programming [OOP] philosophy or paradigm). Before turning to the child objects, however, lets consider some common window object methods and attributes.
Methods
Some extremely common methods, accompanied by a brief description, in addition to the common problems they solve, are stated in the succeeding text.
alert() : The common problem that this alert method is used to solve is to display some message upon some validation error, lets say, or some happening of interest to the end user currently viewing the web page you have created. You could pass on some stringsimple or compositeto the alert method, and the method would treat all such valid strings alike.
setTimeout() : This method is used to delay the start of some method. Using the setTimeout method, you could add some delay to the response that was to be conveyed to the end user viewing your web page. This is particularly useful in those cases in which you know beforehand the expected time that a certain method will take to execute, so you could queue the next method after a specified time interval.
clearTimeout() : This method is used to cancel the alarm you might have set using the setTimeout method in such a way that the delayed execution will not take place anymore.
setInterval() : The setInterval method is used to execute a task repeatedly at certain timed intervals. It would be quite natural for you to ask why the regular for / while / do-while loop is not considered a candidate for the repeated task. To this, we would answer that for / while / do-while loops keep the execution thread busy, and this could even result in freezing the user interface! This method is commonly used to achieve some animation effect inside a web page or even to have some data synchronization logic run at regular timed intervals. The animation effects, for example, are achieved using this method, by adding timed delays to the object to be animated, to give a perception to the human user that the movement is being delayed/slowed down. So, a heavy-looking object could be made to move slowly by adding a larger time interval, and the light-looking object could be made to move faster by adding a smaller time interval.
clearInterval() : Similar to clearTimeout, this method is used to clear any repetition that you might have specified, using the setInterval method.
focus() : This method, when called, attracts the input focus to the currently selected window. This solves the common problem of making a new window (a pop-up window, for example) visible to the end user after its creation/generation programmatically.
Note
It is important to note that a method with the same signature but called under a different context ( HTMLElementObject ) is used to shift focus to some HTML node, such as an input box, defined inside a window.
Attributes
In addition to the methods, some of the common attributes provided by the window object are
innerHeight : This attribute denotes the available and usable content area in a window. This ignores the width of the window interface elements, such as toolbars. This attribute can be used in mathematical calculations to find out, for example, the available height for an element on a web page, as follows:
var availableHeight = window.innerHeight / 2 ;
To find out the maximum possible height for an element on a web page, you could implement the following code:
var possibleHeight = window.innerHeight * 4;
outerHeight : This attribute is similar to the innerHeight attribute, except that it considers the elements provided in the window interface.
innerWidth : This attribute is similar to innerHeight , because it returns the available width of the window, except for the width of the interface elements available with the window.
outerWidth : This attribute provided by the window object gives the total width of the window, along with the width of the interface elements, such as toolbars.
Child Objects
The window object encapsulates some child objects as well. Because everything you see is seen inside the browser window, these child objects exist to represent the entity and the associated functionality. In walking you through the window object, it is imperative that we discuss child objects as well. Therefore, descriptions of some of the key child objects that exist inside the window object follow.
The Document Object