Section 1.6. HTML Refresher


1.6. HTML Refresher

Feeling a little rusty on your <div> s and <span> s? We're going to dive into some HTML on the next page, so before we do, here's a quick refresher course on two of the coolest HTML elements you'll ever run across.

A <div> is a container element that can hold related elements, and allow you to style all those elements with one CSS rule.

     <div>     <div >Use a <div> to group together elements with a similar purpose.     <a href="home.html">home</a>       <a href="books.html">writing</a>       <a href="links.html">resources</a>       <a href="lib.html">library</a>     </div>You can refer to a <div>'s id in your CSS to style everything within the <div> at one time. 

<span> lets you separate a bit of inline text from its surroundings. You can style your <span> elements using CSS, and set off text easily.

     <span>     <ul>      <li><span >Buddha Bar</span>,       <span >Claude Challe</span></li><span> elements can set off text, but don't start new paragraphs or blocks.      <li><span >When It Falls</span>,       <span >Zero 7</span></li><span> elements don't create a new block of text, but can still by styled with CSS.      ... 

1.6.1. Reviewing the Boards 'R' Us HTML

First things first... Katie already has a web page, so let's take a look at it. Then you can begin to add in all the JavaScript code we've been talking about. Here's what Katie's page looks like so far:

     <html>      <head>       <title>Boards 'R' Us</title>Katie's read "Head First HTML with CSS & XHTML", so she's all over this stuff...       <link rel="stylesheet" type="text/css" href="boards.css" />Katie's using an external CSS stylesheet.      </head>You'll need <script> tags here...      <body>       <h1>Boards 'R' Us Sales Report</h1>       <div >        <table>         <tr><th>Snowboards Sold</th>          <td><span >1012</span>Here's the total sales figure you'll need to update...          </td></tr>         <tr><th>What I Sell 'em For</th>          <td>$<span >249.95</span></td></tr>         <tr><th>What it Costs Me</th>          <td>$<span >84.22</span></td></tr>        </table>       <h2>Cash for the Slopes:        $<span >167718.76</span>...and then you can figure out a new net profit, too.       </h2>       <form method="GET" action="getUpdatedBoardSales.php">        <input value="Show Me the Money" type="submit" />Here's that button Katie pushes for updated totals. Right now, it submits the form, but you're going to change that soon.       </form>      </div>     </body>     </html> 

Katie used id attributes on her <span> tags so she could style them in CSS...

...and we can use those IDs later in our JavaScript to update the numbers in each of these <span>s.

Just Do It

It's time to take some action. Download the examples for the book at http://www.headfirstlabs.com, and find the chapter01/boards/ folder. Open up the boards.html file in your web browser. It should look just like Katie's page above.


1.6.2. Step 1: Creating a request object

Let's get back to updating Katie's web report. First up, you need a function that creates a new object to make requests to the server. This turns out to be a bit tricky, because different browsers have different ways of creating this object. To help you out, we've written some "pre-assembled" JavaScript for you. Whenever you see the logo, it means you'll have to take some code on faith, like this code below that creates an object to make requests to the server. Trust us thoughyou'll learn all about this code in more detail in the chapters to come. For now, just type it in and see what it can do.

If you don't want to type this in yourself, you can find this code in create-request.txt, in the chapter01/boards examples folder...

     var request = null;Here's a variable to hold the request object.     function createRequest() {       try {         request = new XMLHttpRequest();This line tries to create a new request object.       } catch (trymicrosoft) {This is the type of the request object.         try {           request = new ActiveXObject  ("Msxml2.XMLHTTP");These two lines try and create the request object, too, but in a way that works on Internet Explorer.       } catch (othermicrosoft) {         try {           request = new ActiveXObject("Microsoft.XMLHTTP");         } catch (failed) {           request = null;If something goes wrong, this makes sure the request variable is still set to null.         }       }     }     if (request == null)Now, you can check if request is still null. If it is, something went wrong in the code...       alert("Error creating request object!");...and we can spit out an error message to users with JavaScript's alert() function.     } 

...but you should really type this code in yourself. It will help your brain get used to writing and thinking about Ajax apps.

Go ahead and add this code into the <head> element of your HTML in boards.html. Don't forget, you'll need to add the <script> and </script> tags, too.

     <head>      <title>Boards 'R' Us</title>      <link rel="stylesheet" type="text/css" href="boards.css" />      <script language="javascript" type="text/javascript">These tell the browser that you're adding some scripting, and that you're using JavaScript as the scripting language.      </script>All that pre-assembled JavaScript goes in here.     </head> 

Frequently Asked Questions?

Q:

Am I supposed to understand exactly what that code does yet?

A:

No, you don't need to understand all of this code yet. For now, just get a general idea of how this looks; we'll explain it in detail in Chapter 2.

Q:

What is null ? I saw that in the pre-assembled JavaScript, and wasn't sure what that means.

A:

null is a special value, and actually means an empty value, or a nonexistent reference. In other words, it's sort of like an aniti-value. But don't confuse null with "0" or "false"those both are non -empty values, and aren't the same as a null value.

Q:

Is the request object called "XMLHttpRequest " or "ActiveXObject "?

A:

It could be either. We'll talk a lot more about this in the next chapter, but the short answer is that you have to use different object names for different types of web browsers.

Q:

So do my users have to use a certain browser to use my Ajax apps?

A:

No, as long as your users have JavaScript enabled in their web browser, this code should work without any problems.So your Ajax apps will run just fine on Firefox, Mozilla, Internet Explorer, Safari, Netscape, and Opera.

Q:

What if someone has JavaScript disabled in their browser?

A:

Unfortunately, Ajax applications require JavaScript to run. So users who have JavaScript disabled aren't going to be able to use your Ajax applications.

JavaScript is usually enabled in browsers by default, so anyone who has disabled JavaScript probably knows what they're doing, and could turn it back on if they wanted to use your Ajax app.


1.6.3. Step 2: Requesting updated sales

Now that you can get a request object with createRequest(), you're ready for the next step: writing the getBoardsSold() JavaScript function. This function will use the new object to request the total number of boards sold from the server. Let's figure out what this function needs to do, and then we can get back to coding Katie's app. Remember our diagram? Here's the step we're working on:

Here's what you'll need to do to make getBoardsSold() work:

  1. Create a new request object by calling the createRequest() function.

  2. Figure out what URL you need to connect to so you can get updated board sales.

  3. Set up the request object to make a connection.

  4. Request an updated number of boards sold.

You can use the pre-assembled JavaScript from the last two pages to take care of this.

Katie already has this URL in her form, so this should be simple enough.

Here's where you'll use that request object you created in createRequest().

You can use this number later, in Step 3, when you update the page with new values. You'll tackle this in just a little while.

Just Do It

Open up your boards.html file, and add a new JavaScript function called getBoardsSold(), right after createRequest() . Then, see if you can add a line of JavaScript in getBoardsSold() to create a new request object (that's Step "a" from above). If you're stuck, check the answers in the back of this chapter, on page 61.

Be sure and make these changes to your copy of boards.html before you go to the next page.


1.6.4. Adding the getBoardsSold() function

If you did the exercise on the previous page, you should have some code in your boards.html page that looks something like this:

     <script language="javascript" type="text/javascript">Remember, all of the JavaScript code is between the <script> and </script> tags.       var request = null;This is your request variable; once your code calls createRequest(), this variable will point to a new request object.       function createRequest() {Here's createRequest(), which you should have added a few pages back.         // pre-assembled JavaScript       }       function getBoardsSold() {This is the new JavaScript function...         createRequest();...and here's where the request object is created, using the pre-assembled JavaScript.       }     </script> 

1.6.5. Sending the request to the right URL

So what's next? You've got an object that you can use to request the board sales from the server, but how do you make that request? First, you need to tell the object where to send the requestin other words, it needs to know what program on Katie's server to send the request to. So you need to tell it the URL of the script running on the web server. And where do we get that URL? You can find it in Katie's web form:

And where do we get that URL? You can find it in Katie's web form:

     <form method="GET" action="getUpdatedBoardSales.php">Here's the URL of the PHP script we need to make a request to.       <input value="Show Me the Money" type="submit" />     </form>Here's the <form> part of Katie's web report HTML. 

But doesn't the PHP script return a bunch of HTML right now? I thought we only wanted the number of boards sold for the Ajax version of the app.

This is bonus credit for those of you who are into PHP. If you don't know PHP, it's OK... just take a quick look, and keep going. You don't need to understand this script to learn Ajax or follow the examples in the book.

PHP ...at a glance

Here's a quick look at the PHP that Katie's using for her Boards app. Remember, we're not going to explain how this all works... but here's what's going on when a request is made for updated board sales.

     <?php     // Connect to database     $conn = @mysql_connect("mysql.headfirstlabs.com",The first part of the script makes a connection to the Boards 'R' Us database.                            "secret", "really-secret");     if (!$conn)       die("Error connecting to MySQL: " . mysql_error());     if (!mysql_select_db("headfirst", $conn))       die("Error selecting Head First database: " . mysql_error());     $select = 'SELECT boardsSold';     $from = ' FROM boardsrus';     $queryResult = @mysql_query($select . $from);     if (!$queryResult)       die('Error retrieving total boards sold from database.');     while ($row = mysql_fetch_array($queryResult)) {This part of the script handles getting the latest sales totals from the database.       $totalSold = $row['boardsSold'];     }     $price = 249.95;If you wanted, you could store these values in the database, too.     $cost = 84.22;     $cashPerBoard = $price - $cost;The amount of profit on each board is figured out here.     $cash = $totalSold * $cashPerBoard;     mysql_close($conn);     ?>     <html>      <head> <title>Boards 'R' Us</title>       <link rel="stylesheet" type="text/css" href="boards.css" />Here comes all that HTML we've been talking about...      </head>      <body> 

      <h1>Boards 'R' Us :: Custom Boards Report</h1>     <div >      <table>Lots and lots more HTML output by the PHP script...       <tr><th>Snowboards Sold</th>        <td><span >     <?php      print $totalSold;     ?>        </span></td></tr>        <tr><th>What I Sell 'em For</th>        <td>$<span >     <?php       print $price;     ?>        </span></td></tr>        <tr><th>What it Costs Me</th>         <td>$<span >     <?php     print $cost;     ?>         </span></td></tr>       </table>       <h2>Cash for the Slopes:        $<span >     <?php       print $cash; The PHP outputs the values it got from the database along with the HTML for the report.     ?>          </span></h2>         <form method="GET" action="getUpdatedBoardSales.php">           <input value="Show Me the Money" type="submit" />          </form>        </div>      </body>     </html> 


What the Heck?

All this code does is look up how many boards have been sold, figure out the total cash Katie's made, and then return an HTML form with the updated totals sales and cash figures.

It's also OK if you don't know PHP, or haven't worked with databases before. In just a few pages, we'll give you a version of the script that runs without a database, so you can run Katie's web report for yourself.





Head Rush Ajax
Head Rush Ajax (Head First)
ISBN: 0596102259
EAN: 2147483647
Year: 2004
Pages: 241

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net