- Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs
- Daniel Chapman
- 1095字
- 2021-04-01 13:53:15
Client-side scripting and JavaScript
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)
Asynchronous JavaScript and XML (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.
JavaScript frameworks—Mootools and jQuery
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.
- Python 2.6 Graphics Cookbook
- 中文版3ds Max 2024完全自學教程
- Creo 6.0快速入門、進階與精通（升級版）
- R Graph Cookbook
- Photoshop日系少女寫真后期解密
- PowerPoint 2013從新手到高手（超值版）
- Photoshop CS6標準教程（全視頻微課版）
- CINEMA 4D新手快速進階實例教學
- 中文版Premiere Pro CS6視頻編輯（慕課版）
- After Effects 2023實訓教程
- SolidWorks 2017基礎與實例教程
- Photoshop & Illustrator平面設計火星課堂
- NHibernate 3 Beginner's Guide
- 中文版3ds Max 2014基礎培訓教程
- Photoshop CC平面設計實戰(zhàn)從入門到精通