Datasheet

13
Chapter 1: Taking the Web to the Next Level
Figure 1-4:
You can
dynamically
change the
appearance
of any page
element.
The Toggle Style button
✓ The Show Code button brings in text from an external file. This button
uses a simple form of AJAX to load an external file into the page in real
time. This is an easy way to build modular pages. In this case, I’m actu-
ally pulling in a copy of the JavaScript code so you can see how it works.
Don’t worry if you don’t understand it yet. That’s what this book is for!
Figure 1-5 shows this operation in action.
✓ Let the user drag the code. The user can pick up the code and move it
wherever she wants. This is another kind of functionality unheard of in
ordinary Web pages.
No, you wouldn’t normally display your code to users. I’m just illustrating that
it’s pretty easy to pull in an arbitrary text file from a server. Since you are a
programmer now, I chose to show you a preview of the code as the text file I
brought in.
These capabilities are profound, and they’re just the beginning. Learning to
program transforms your Web pages from static documents to living applica-
tions that can interact with your users in new and exciting ways.
Feel free to look over the code for this project. It’s actually in three files:
demo.html, demo.css, and demo.js. All can be found in the Chapter 1
folder of the book’s companion Web site. Use View Source when the page is
displayed in your browser to see the source code of the HTML file.
05_417997-ch01.indd 1305_417997-ch01.indd 13 10/26/09 9:55 PM10/26/09 9:55 PM