Datasheet

ManualsBrandsFor Dummies ManualsSoftware978-0-470-41799-7

Chapter 1

Taking the Web to the Next Level

In This Chapter

▶ Reviewing HTML, XHTML, and CSS

▶ Examining the role of JavaScript and AJAX

▶ Exploring what JavaScript and AJAX can add to Web pages

▶ Choosing an editor

▶ Building your browser toolkit

he Web is a pretty big deal. It’s a lot of fun to build Web pages, and just

about every business needs them. As the Web has grown and changed,

the expectations of what a Web page is and does have also changed. If you

already know HTML or XHTML, you know how to create Web documents — if

you need a refresher, check out Bonus Chapter 1 on either the companion

Web site at www.dummies.com/go/javascriptandajaxfd or my own site

at www.aharrisbooks.net/jad.

As the Web has evolved so have the tools that are used to create Web pages

and documents. JavaScript and AJAX are two powerful tools for creating

dynamic Web documents. This chapter gets you started with a look at some

of the primary technologies out there for building Web pages.

Building Something Cool

This book is about adding features to Web pages that you cannot do with

simple HTML and CSS.

Make no mistake; we’re talking about programming here — and programming

is a little bit harder than plain old Web development. However, it’s really

worth it, as the example page in Figure 1-1 illustrates.

To keep this example simple, I’m using some external libraries. They are

explained in Part IV of this book, but for now just appreciate that something

exciting is happening here.

05_417997-ch01.indd 905_417997-ch01.indd 9 10/26/09 9:55 PM10/26/09 9:55 PM

COPYRIGHTED MATERIAL

Summary of content (22 pages)

PAGE 1
Chapter 1 AL Taking the Web to the Next Level In This Chapter RI ▶ Reviewing HTML, XHTML, and CSS ▶ Examining the role of JavaScript and AJAX TE ▶ Exploring what JavaScript and AJAX can add to Web pages ▶ Choosing an editor D T MA ▶ Building your browser toolkit RI GH TE he Web is a pretty big deal. It’s a lot of fun to build Web pages, and just about every business needs them. As the Web has grown and changed, the expectations of what a Web page is and does have also changed.
PAGE 2
10 Part I: Programming with JavaScript The text in this box changes. Figure 1-1: This page has some interesting features that would not be possible in basic HTML. This program requires you to have an active Internet connection to work correctly. Check Chapter 10 to see some alternatives for connecting to external libraries. If you want to see this page in action (and you really should), please go to the companion Web sites for this book: www.aharrisbooks.net/jad or www. dummies.
PAGE 3
Chapter 1: Taking the Web to the Next Level work, but the fact that the page is now interactive is a huge change. With JavaScript, you can build applications, not just pages. ✓ The Count button dynamically changes the page. When you click the Count button, new content is added to the page automatically. A program counts how many times the Count button is pressed and adds text to the “watch this space” section. As the user interacts with the page, the page has material that wasn’t originally on the server.
PAGE 4
12 Part I: Programming with JavaScript I clicked the Toggle Visibility button, and the output disappeared. Figure 1-3: Click the Toggle Visibility button to make the panel with the output reappear. ✓ The Toggle Style button instantly changes the appearance of part of the page. You can use JavaScript to change the contents of any part of the page (that is, the HTML) — but you can also use JavaScript to modify the appearance (the CSS) in real time.
PAGE 5
Chapter 1: Taking the Web to the Next Level The Toggle Style button Figure 1-4: You can dynamically change the appearance of any page element. ✓ 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 actually 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.
PAGE 6
14 Part I: Programming with JavaScript Click to see the code from another file. Figure 1-5: The Show Code button pulls code from another file and shows it on-screen. I’ve added plenty of comments in the code to help you see what’s going on, but it’s okay if you don’t have all the intricacies nailed down yet. Think of this as a preview of things you’ll get to do in this book. Getting Started Making your pages do all this stuff looks like fun, and it is.
PAGE 7
Chapter 1: Taking the Web to the Next Level ✓ HTML: HTML (HyperText Markup Language) is the basic markup language that describes Web pages. It’s a relatively simple technique for building Web sites that requires nothing but a plain text editor. ✓ XHTML: XHTML is often considered the successor to HTML. Because it doesn’t allow certain kinds of tags, XHTML is actually a smaller language that’s a bit easier to use.
PAGE 8
16 Part I: Programming with JavaScript At some point you’ll want your Web pages to be available on the Internet. Although you can install a server on your home computer, it’s usually better to use an online hosting service. You can often get very good online hosting very cheaply or even free. If you want to have a specific name attached to your Web site (such as www.mySite.com), then you’ll need to pay about $10 a year to register the domain.
PAGE 9
Chapter 1: Taking the Web to the Next Level basic features as line numbers — and it can’t handle multiple documents at once. You’ll quickly outgrow Notepad as a Web-development tool. ✓ TextEdit: The default text editor on the Mac is a very powerful tool, but it’s more like a word processor than what I’d call a true text editor. When you save an HTML file in TextEdit, it’s usually not stored the way you need it to: Rather than seeing the results of the code, you’ll see the code itself.
PAGE 10
18 Part I: Programming with JavaScript Introducing programmer’s editors A number of specialty editors have propped up which seek to fill the gap between plain-text editors and the WYSIWYG tools. These editors write in plain text, but they have additional features for programmers, including: ✓ Awareness of languages: Programmer’s editors often know what language you’re writing in and can adapt, helping you whether you’re writing HTML, JavaScript, or CSS code.
PAGE 11
Chapter 1: Taking the Web to the Next Level Getting familiar with some important editors A couple of multi-purpose programmer’s editors immediately come to mind. You should consider investigating one or more of these free programs: ✓ vi and emacs: These are the granddaddies of all text editors. Both are very common on Unix/Linux environments. They are also available for Windows and Mac.
PAGE 12
20 Part I: Programming with JavaScript ✓ notepad++: This is what Notepad for Windows should be. It starts with the speed and simplicity of Windows Notepad, but adds tons of features for programmers. I especially like the built-in support for page validation. This is one of the few programs to earn a permanent shortcut on my desktop. Unfortunately, it’s only for Windows. Figure 1-7 shows the same page being edited in notepad++.
PAGE 13
Chapter 1: Taking the Web to the Next Level Figure 1-8: Bluefish is a very nice editor for XHTML and JavaScript. ✓ jEdit: This powerful editor is written in Java, so it is available on virtually every platform. It is a very powerful editor in its basic format, but its best feature is the extensive plugin library that allows you to customize it to your own needs. If you install the free XML library, jEdit has incredible support for HTML and XHTML. Figure 1-9 shows the sample program being edited in jEdit.
PAGE 14
22 Part I: Programming with JavaScript Figure 1-9: jEdit is a fast and capable editor written in Java. Figure 1-10: The codetch plugin for Firefox is a complete Web editor.
PAGE 15
Chapter 1: Taking the Web to the Next Level Introducing Aptana One particular programmer’s editor has really taken over the Web development world in recent years. Aptana is a full-featured programmer’s editor based on the powerful and popular Eclipse editor for Java programming. Aptana has a lot to recommend: ✓ Extensive built-in support for Web languages: Aptana comes out of the box with support for HTML/XHTML, CSS, JavaScript, and AJAX.
PAGE 16
24 Part I: Programming with JavaScript Automatic syntax highlighting and code completion Multiple document support Figure 1-11: Aptana might be the best Web editor available at any price. Intergrated file management tool Console area for debugging and error messages Automatically generated map showing the main sections of a page or program Creating Your Browser Collection Web pages live within the context of Web browsers.
PAGE 17
Chapter 1: Taking the Web to the Next Level Fortunately, there’s been a big push toward standardization in recent years. The various browser developers have been getting together and agreeing to various standards set forth by a centralized team called the World Wide Web Consortium (W3C). When a browser implements JavaScript, it now agrees (theoretically, at least) to adhere to a set of standards for behavior. As long as your code follows the same standards, you can expect everything to work pretty well.
PAGE 18
26 Part I: Programming with JavaScript ✓ Microsoft Internet Explorer 7 and 8: IE7 could be considered a tribute to Firefox, as it incorporates many of the same features. While this book was being written, IE8 came out, and added a few more improvements. Although the support for standards is not as complete in IE7 and IE8 as it is in some of the other current fleet of browsers, they are much better than in any earlier versions of IE.
PAGE 19
Chapter 1: Taking the Web to the Next Level to extend. Firefox was designed from the beginning to have its capabilities extended — and a number of very clever programmers have added incredible extensions to the tool. A few of these extensions have become “must haves” for Web developers: Web Developer Toolbar The Web Developer Toolbar by Chris Pederick is an incredible tool.
PAGE 20
28 Part I: Programming with JavaScript View Source window Figure 1-12: The HTML Validator extension adds very useful features to the View Source tool. Validator errors appear in this window. The Validor extension provides helpful error messages. Firebug The Firebug extension is one of the most important tools in Web development. It turns Firefox into a complete debugging tool.
PAGE 21
Chapter 1: Taking the Web to the Next Level also incorporates a very nice debugger that can really help you find your errors as your program runs. ✓ AJAX monitoring: AJAX programming is based on a series of requests back and forth from the server. Firebug helps you to keep track of these requests and watch your data move. ✓ Live code view: The ordinary view source menu of most browsers helps you see the code as it originally comes from the browser.
PAGE 22
30 Part I: Programming with JavaScript