Ajax. AJAX. JSON. Accessible JavaScripting From The Ground Up. As great as it is, JavaScript is probably one of the most commonly abused and overused technologies in web development. In this article, I hope to help you implement JavaScript without tears and guide you in the basics of good scripting practices. The key point to get across when discussing accessible JavaScripting is that it is always the JavaScript that makes your documents inaccessible to begin with. I know that might sound strange, but it'll soon start to make sense. An unlimited number of sites have very serious accessibility problems caused because they didn't account for the large number of users who have JavaScript disabled in their web browsers.
Usually, the reason these sites get put up even though they have fatal design flaws is because the creators and/or owners of these sites don't realize there's a problem. Only browser, and of course with JavaScript enabled, and they see that everything appears to function as they expected. <! Using JSON for Language-independent Configuration Files. The growing availability of JSON parsing in server-side frameworks elevates the usefulness of JavaScript beyond client-side programming, to providing base syntax for a generalized data interchange format.
Well duh. But a not-immediately-obvious advantage of this is the ability to have language-independent configuration files for Ajax development. In a nutshell — a JavaScript object-literal can be parsed as JSON with (say) PHP to create a corresponding associative array. Consider a simple config object like this: We can include that in a regular <script> and get access to its properties with JavaScript: alert(config['lang']); //outputs "en" All good. $datastring = file_get_contents('config.js'); $regexes = array( array("p"=>"/[w]*(//). And then we have that same data in a PHP associative array: echo $config['lang']; //outputs "en" Availability of JSON parsing in PHP The native functions json_encode and json_decode were not added to PHP until Version 5.2. Conclusion. Maximizing and Restoring HTML Images with the Absolute Method. Maximizing and Restoring HTML Images with the Absolute Method(Page 1 of 4 ) The phenomenon You must have come across web pages with images that can be enlarged (maximized) and restored within the same page.
There is normally a small clickable area on the image. When you click this area, the image is maximized. When the image is maximized, there is a small clickable area on the image that restores the image to its original size if clicked. This phenomenon is common in e-commerce or shopping web sites. One way to have this done on your web page is to obtain (buy) a program that will produce the image with the small clickable area.
You need to know the basics of HTML, JavaScript, and CSS in order to understand this method. The small square with a black border at the bottom right of the normal sized image is the clickable area that allows you to maximize the image. The method (Absolute Method) The small image that is to be maximized is superimposed at the bottom right of the main image. More on JavaScript and XML. More on JavaScript and XML(Page 1 of 4 ) 21.5 Serializing XML It is sometimes useful to serialize an XML document (or some subelement of the document) by converting it to a string. One reason you might do this is to send an XML document as the body of an HTTP POST request generated with the XMLHttpRequest object.
Another common reason to serialize XML documents and elements is for use in debugging messages! In Mozilla-based browsers, serialization is done with an XMLSerializer object. In IE, it is even easier: the xml property of an XML Document or Element object returns the serialized form of the document or element. Manipulating XML Data with JavaScript. Manipulating XML Data with JavaScript(Page 1 of 5 ) 21.2 Manipulating XML with the DOM API The previous section showed a number of ways to obtain parsed XML data in the form of a Document object. The Document object is defined by the W3C DOM API and is much like the HTMLDocument object that is referred to by the document property of the web browser. The following subsections explain some important differences between the HTML DOM and the XML DOM and then demonstrate how you can use the DOM API to extract data from an XML document and display that data to a user by dynamically creating nodes in the browser’s HTML document. 21.2.1 XML Versus HTML DOM Chapter 15 explained the W3C DOM but focused on its application in client-side JavaScript to HTML documents.
Probably the most important difference between the HTML and XML DOMs is that the getElementById() method is not typically useful with XML documents. JavaScript and XML. JavaScript and XML(Page 1 of 4 ) The most important feature of the Ajax web application architecture is its ability to script HTTP with the XMLHttpRequest object, which was covered in Chapter 20. The X in “Ajax” stands for XML, however, and for many web applications, Ajax’s use of XML-formatted data is its second most important feature. This chapter explains how to use JavaScript to work with XML data. It starts by demonstrating techniques for obtaining XML data: loading it from the network, parsing it from a string, and obtaining it from XML data islands within an HTML document. After this discussion of obtaining XML data, the chapter explains basic techniques for working with this data. This coverage of basic XML techniques is followed by two sections that demonstrate applications of those techniques.
Finally, the chapter concludes with a brief introduction to E4X, which is a powerful extension to the core JavaScript language for working with XML. 21.1 Obtaining XML Documents. So You Want Your Own Searchable Database, Huh? Use these to jump around or read it all... My guess is that most of you came by this page through using the Goodies Search Engine or through the Database tutorial. Either way (or neither way) this tutorial will finally answer one of the most asked questions in the Goodies mailbox -- How do I set up a searchable database for my own Web site? Read on... If you haven't yet seen my search engine work, here's a link to it. Give it a try and see if you like it. I do. The searchable database was created in JavaScript and submitted to HTML Goodies by Satadip Dutta, who has given me permission to use and distribute this script. First you need the script. Keep the copyright comments in place.
Grab the Script Read what's below... please?! I cannot stress this enough: You must get the entire script and this is a big pup. Read what's above... please?! Now that you have the script, you'll need to change one thing, and begin adding your pages to the script. Title[0]=6 That's how you do it. Creating a Basic Image Gallery with CSS Sprites. Creating a Basic Image Gallery with CSS Sprites(Page 1 of 4 ) Introduction This series contains two preceding articles, which were aimed at demonstrating how the concept of CSS sprites can be applied in two specific cases that possibly will be quite familiar to you: creating rollover buttons and dynamic banners.
Although these two concrete applications may seem rather primitive at first glance, they illustrated how CSS sprites can be utilized in a smart way. As you saw either in the case of the mentioned rollovers, or the banner, appropriate planning and design of the background images that comprise this pair of elements was indeed effective for eliminating the delay often noticeable when the browser has to download multiple pictures from the web server.
So far, so good. Now that you know how to take advantage of the useful capabilities that CSS sprites offer, it's a good time to tackle the last part of this hopefully instructive journey. Creating a Simple Date Picker with JavaScript and CSS. Creating a Simple Date Picker with JavaScript and CSS(Page 1 of 4 ) A downloadable zip file is available for this article. Internet forms are a chore; every time you want to join a forum, or buy something from a site, or even download something from some sites you face the exciting prospect of yet another form to complete, and they're getting longer. I'm sure of it. Sometimes it's enough to put me off doing whatever it is I wanted to do and go someplace else instead. Any site that accepts data through forms is going to want that data to be entered in a particular format and with a particular structure.
One way of making your forms easier for visitors to complete and therefore not so tiresome, as well as ensuring all of your dates come into the server in the preferred format, is to include a date picker next to any fields that require a date to be entered. Rich Internet Applications with Dojo Toolkit 101. Rich Internet Applications with Dojo Toolkit 101(Page 1 of 5 ) Dojo enhances DHTML with JavaScript to cross browser boundaries with its legion of dedicated developers. Dojo provides through its APIs functionality for widgets not available in HTML such as Clock, DatePicker, Accordion and so on besides supporting AJAX functionality.
It also provides support for animations, SVG, and more. The latest version has inline API documentation to many files which should greatly assist developers. The question "What is Dojo? " About this tutorial I was attracted to this toolkit for its ease of implementation and wanted to gain first hand experience in using this toolkit. A virtual directory named DojoAjax was created on the IIS 5.1 and the zip file was extracted to the local source for the virtual directory. Creating a MySQL Client with AJAX to Administer Databases from t. Creating a MySQL Client with AJAX to Administer Databases from the Web(Page 1 of 4 ) A downloadable file for this article is available here. Introduction To be frank, how many times have you found yourself lately wondering how your life as a web developer would be different without using the cool features of AJAX ? If you're anything like me, then probably the answer is that at least a dozen times, that idea made your head spin for a while.
AJAX is here to stay, and certainly has changed considerably the way that many web applications are developed these days. Although this may not be breaking news to experienced web developers that work on a daily basis with AJAX, one thing that really amazes me is the steady evolution of several development frameworks that include, among other nice features, the possibility of working directly with AJAX to create richer web applications.