Client-side scripting was designed to fill a similar purpose to server-side scripting, to add dynamic features to otherwise static HTML pages, but with a completely different target. Where server-side scripting is used to make the generation of HTML dynamic, client-side scripting is used to make the interaction with HTML dynamic. This operation is conveniently referred to as Dynamic HTML or DHTML.
DHTML refers to anything constructed out of HTML which is then animated, updated, re-colored or otherwise changed in some fashion via scripting languages such as JavaScript or VBScript. It is the power behind many tabs, slideshows, sliding menus, validation for forms, and much more.
In the same way that Joomla! uses PHP for its server-side scripting, it also uses JavaScript for its client-side scripting. So we will place our focus on understanding how JavaScript works.
Similar to CSS, JavaScript, often just called JS, can either be entered directly into a HTML document or loaded from an external file which is the preferred method. The main differences are in the syntax for doing so.
Where CSS uses <style> tags, JS uses <script> tags when entering it into an HTML file, as shown:
<head> <script type="text/javascript"> var someVariable = "a value"; </script> </head>
Notice how we have entered the type attribute again, only this time it says text/javascript and not text/css .
When loading external JS files, the syntax is also similar, but different, to CSS.
<script type="text/javascript" src="myJSScript.js"></script>
Unlike CSS, which has different tags for loading external files and entering directly into the HTML file <link> and <style> respectively, JS uses the same tags, <script>, for both operations. The main difference being that external files are loaded by adding a src attribute to the tags, indicating source, which contains the address of the required JS file.
Note
JS is just as detailed and complex a language as PHP, so again it is recommended that you find some of the many great online and offline resources. One of the best sites to get JS information is one you will already be familiar with, www.w3schools.com. Or, alternatively, pick up one of the many great JS books also from Packt Publishing (www.packtpub.com/ajax)
AJAX, is an Internet buzzword that many people will be familiar with but few understand it properly. Many people attribute moving and sliding elements on a web site to AJAX, when in reality these are usually just DHTML. AJAX, in reality, refers to a process of making requests to the server, usually via something called the XMLHttpRequest object, in the background to send or retrieve data to and from the web server without having to reload the entire page. This is the normal practice for a web site.
For example, a set of tabs that loads all the data at the same time as the page loads and then shows them one at a time is DHTML.
But a set of tabs that dynamically loads the data for each tab one at a time from the server, after the page has already loaded, and when the tab in question is selected by the user is AJAX (and DHTML for the actual showing/hiding of the tabs).
AJAX offers several advantages for web sites:
But it also carries some disadvantages:
Page changes aren't usually recorded in the browser history, so hitting the Back button on the browser may produce unexpected behavior
Disabled visitors, or visitors without JS enabled may not be able to use the site properly
Search engines may not be able to index the site properly as they can't record all the changes
Because of these disadvantages, there is a consensus among many professional developers today that JS and AJAX should be used sparingly, and for enhancement of sites that can operate without it, and not as an essential part of the site operation.
In web programming terms, a framework is a collection of prewritten program code designed to make it easier to develop using the language that the framework is designed for. The prewritten code usually contains many functions that bundle up more difficult commands needed to do common activities, and makes them far simpler to perform.
These frameworks generally lower the entry barrier for using those languages, and allow less skilled developers to produce far more powerful web sites than they could otherwise.
In the Joomla! community, there are two main JavaScript frameworks that are widely used. The first one is Mootools, which is also included by default in Joomla! 1.5, and is used by many of the larger template clubs. The second is jQuery, a framework favored by many extension developers (though many also use Mootools).
Mootools is most apparent initially on a Joomla! site in the administrator side. Where the accordion effect appears on the right-hand side modules in the control panel, the pop-ups for parameter screens, the attractive tooltips around the site, and more are all thanks to Mootools.
Generally, frameworks don't play well together and the end result of loading two or more on a page is usually that none of them work and all our JS fails. Luckily, however, the jQuery team implemented some commands known as no-conflict mode, which has allowed jQuery to operate alongside other frameworks without a conflict.
The frameworks generally consist of one or more JavaScript files which are loaded onto our page like normal JavaScript. After loading these scripts, we are free to call the functions from these frameworks and use them in our own JavaScript, saving us time and effort.
One of the main drawbacks with frameworks is that they are almost always going to be larger than we need and include functions that we are never going to use. This can affect our site performance, as we will discuss later.
The other main drawback, as noted above, is that of potential conflicts. Personally, the largest single support problem I encounter in my day-to-day work is without a doubt because of JavaScript framework conflicts. In the later chapter, we will cover how we can determine if a JavaScript framework has caused our site problems, and how to diagnose and fix those problems.
Note
More information about Mootools and jQuery can be found at their respective sites, http://mootools.net and http://jquery.com. Also there are many useful titles available at http://www.packtpub.com/ajax.