Background: HTML, CSS, and JavaScript

First, a primer or refresher some basic Web 2.0 building blocks. Experienced web developers can skip this part, but for managers who aren't hands-on technologists, it may help to review how the combination of HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript work together to create effects like the ones you'll see on the following pages.

In the bad old days of the browser wars in the late 1990s, the web went through a phase where Netscape and Microsoft promoted proprietary HTML tags, and each had its own approach to creating "Dynamic HTML" web applications in which web pages could be animated or otherwise brought to life with programming script.

Today, web technologies have converged around relatively stable standards defined by organizations like the World Wide Web Consortium (HTML, XHTML, and CSS) and ECMA International (JavaScript). There are still implementation differences, and one reason for libraries like the YUI is to have the code they provide take care of differences in, for example, the different mechanisms for creating an JavaScript object to handle AJAX-style interaction between the browser and the web server. If the logic for handling differences between Internet Explorer, Firefox, and other browsers is built into the library, that simplifies life for the application programmer.

Many of today's more more interactive web applications are based on AJAX (short for Asynchronous JavaScript and XML), which is really a grown up version of Dynamic HTML that now works fairly reliably across modern browsers. What really makes AJAX applications different is asynchronous messaging between the browser and the server (with the messages sometimes, but not always, formatted in XML). This means an application written in JavaScript can post data to or get data from the server and display results to the user without loading a new web page. In the Web 1.0 world, the only way to interact with the server (whether posting a form or requesting a new document) was to load a new web page.

But before we get to that, let's review the basics of how to create a web page that can update itself.

Consider the following, and try clicking on the box with the black border:

Both of the above are based on the HTML <div> tag, which is used to define arbitrary divisions within an HTML page that can be targeted for different styling (fonts, colors, dimensions, borders) or application behaviors.

The attribute id="box" on the second div is an identifier that can be used to select it with either CSS or JavaScript code. The CSS that gives "box" its dimensions and black border looks like this:

#box { height: 75px; width: 75px; border: thick solid black; }

We can then add JavaScript to make the box do something in response to user input, for example:

var b = document.getElementById('box'); b.onclick = function () { b.style.width = '400px'; }

This says, fetch the document element with the id "box" and assign it to a variable called b. Now, if someone clicks on our box object, change the style property for width from the one we initially set in CSS to a new value, 400 pixels.

Blocks of CSS and JavaScript can be embedded in an HTML document, but they can also be referenced as external files, and that's generally the recommended method for anything more than short snippets of code and definitely for big building blocks like the YUI libraries. For example:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/reset/reset-min.css"> <script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/utilities/utilities.js"></script>

Here, we're linking to two basic components of the YUI, a CSS file and a set of JavaScript utilities, and we're having viewers of our page download them directly from Yahoo's servers. One advantage of the YUI is that Yahoo allows and encourages this. And although Yahoo! offers no guarantees for this free service, many websites are likely to find that its bandwidth and reliaibility will be better than they could provide off their own networks. Also, because these are the same files referenced within Yahoo's own pages, those website visitors who have visited Yahoo recently may already have copies of these files cached in their browser -- making their download of your web pages faster.

If you prefer to download the code and load it on your own web servers, you can do that, too.

Topics

Introduction
Background: HTML, CSS, and JavaScript
Connection (AJAX)
Navigation Menu
Tabs
Animation
More Animation
Drag & Drop
Form Controls
Slider
Dialog
More