AJAX and PHP
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
Chapter 2<br />
What Just Happened?<br />
Well, what just happened is exactly what happened after the previous exercise, but this time with<br />
much more code, as you can see by having a look at the process() function. Although there are<br />
many lines of code, the functionality is pretty simple. This suggests clearly enough that using the<br />
DOM to create HTML structures may not always be the best option. However, in certain<br />
circumstances it can actually make programming easier, for the following reasons:<br />
• It's fairly easy to programmatically create dynamic HTML structures, such as<br />
building elements in for loops, because you're not concerned about text formatting<br />
but about building the structural elements.<br />
• As a consequence, you don't need, for example, to manually add closing tags. When<br />
you add a 'ui' element, the DOM will take care to generate the tag <strong>and</strong> an<br />
associated closing tag for you.<br />
• You can treat the nodes as if they were independent nodes, <strong>and</strong> decide later how to<br />
build the hierarchy. Again, the DOM takes care of the implementation details; you<br />
just need to tell it what you want.<br />
JavaScript, DOM, <strong>and</strong> CSS<br />
CSS (Cascading Style Sheets) is certainly a familiar term for you. CSS allows setting formatting<br />
options in a centralized document that is referenced from HTML files. If the job is done right, <strong>and</strong><br />
CSS is used consistently in a website, CSS will allow you to make visual changes to the entire site<br />
(or parts of the site) with very little effort, just by editing the CSS file. There are many books <strong>and</strong><br />
tutorials on CSS, including the free ones you can find at http://www.w3.org/Style/CSS/ <strong>and</strong><br />
http://www.w3schools.com/css/default.asp. Although the article that invented the name<br />
<strong>AJAX</strong> (http://www.adaptivepath.com/publications/essays/archives/000385.php)<br />
mentions CSS as one of the <strong>AJAX</strong> ingredients, technically CSS is not required to build successful<br />
dynamic web applications. However, its usage is highly recommended because of the significant<br />
benefits it brings.<br />
We will do a simple exercise to demonstrate using CSS, <strong>and</strong> manipulating HTML elements' styles<br />
using the DOM. These are usual tasks you will do when building <strong>AJAX</strong> applications. In the<br />
following exercise, you will draw a nice table, <strong>and</strong> you will have two buttons named Set Style 1<br />
<strong>and</strong> Set Style 2. These buttons will change the table's colors <strong>and</strong> appearance by just switching the<br />
current styles. See Figure 2.5 to get a feeling about what you're about to create.<br />
Time for Action—Working with CSS <strong>and</strong> JavaScript<br />
1. In the foundations folder, create a new subfolder called csstest.<br />
2. In your newly created csstest folder, create a new file called csstest.html, with<br />
the following contents:<br />
<br />
<br />
<br />
<strong>AJAX</strong> Foundations: CSS<br />
<br />
<br />
<br />
39<br />
www.it-ebooks.info