Section 3.10. The coffee maker HTML | Head Rush Ajax (Head First)

3.10. The coffee maker HTML

Enough coffee talk; it's time to build the asynchronous coffee maker application. First, let's take a look at the HTML for the coffee maker application, in coffee.html. We've gone ahead and written the HTML for placing and order and the first coffee maker (you're going to do the second coffee maker later).

Let's see what you've got to work with:

 <html>     <head>         <title>Ajax-powered Coffee MakerAll this is standard stuff. We've linked to an external style sheet and included a title with the name of the application.</title>         <link rel="stylesheet" type="text/css" href="coffee.css" />         </head>     <body>         <div >         <h1>Ajax powered Coffee Maker</h1>         </div>         <div >     <div >         <h2>Coffee Maker #1</h2>         <p><img src="/books/2/850/1/html/2/images/CoffeeMaker1.gif"         alt="Coffee Maker #1" /></p>         <div >Idle</div>         </div>Here's the HTML for the first coffee maker. The status indicates if the coffee maker is idle or brewing someone's order. Notice we're using a <div>   element to hold the status text.     <div >     This <div> is for     ordering a cup of coffee.     <p><img src="/books/2/850/1/html/2/images/coffeeMugWithBeans.jpg"     alt="Coffee Pot 1" /></p>         <h2>Place your coffee order here:</h2>         <div >         <form>         <p>Name: <input type="text" name="name"  /></p>Here's         where you can select the size of the cup you want: Small, Medium,         or Large.         <h3>Size</h3>         <p>         <input type="radio" name="size"             value="small" checked="true">Small</input> Here's where         you enter your name, so the coffee maker knows who it's brewing coffee for.             x&nbsp;&nbsp;         <input type="radio" name="size"             value="medium">Medium</input>         &nbsp;&nbsp;         <input type="radio" name="size"             value="large">Large</input>             </p>...continued on the next page...

 <h3>Beverage</h3> <p> <input type="radio" name="beverage" value="mocha" checked="true">Mocha</input> &nbsp;&nbsp; <input type="radio" name="beverage" value="latte">Latte</input> &nbsp;&nbsp; <input type="radio" name="beverage" value="cappucino">Cappucino</input> This is the last of the coffee order options: you can select the type of coffee you want. </p> <p> <input type="button"Here's the button to place a coffee order. We'll come back to this and fill in the JavaScript onClick   event handler a bit later. onClick="__________________" value="Order Coffee" /> </p> </form> </div> </div> <div > <h2>Coffee Maker #2</h2> <p><img src="/books/2/850/1/html/2/images/CoffeeMaker2.gif" alt="Coffee Maker #2" /></p> <div >Idle</div>Later in the chapter, we'll come back and finish the HTML for the second coffee maker. </div> <p ></p> This is a little HTML and CSS trick to make sure the coffee ordering options all fit into the main white part of the form. </div> </body> </html>

Before we start working on the Javascript, I was thinking... Wouldn't it be better to put our Javascript in a separate file instead of always mixing it in with our HTML?

3.10.1. Yes, let's put your JavaScript in a separate file.

Instead of putting all the JavaScript for the coffee maker directly in the HTML, let's put it in a separate file. Then we can link to it using a <script> element in the <head> of the HTML for the coffee maker.

Just like separating your HTML and CSS is a good idea, separating your Javascript from your HTML is also a good idea: it keeps the logic (the Javascript) of your application separate from the app's structure and presentation (the HTML and CSS).

You know, I think we should actually make two filesone for the JavaScript that's the same in all our Ajax applications, and one for the JavaScript that's specific to the coffee maker. Then we can use the common JavaScript file any time we write a new application.

You're probably tired of typing the same JavaScript over and over for each application... we can take care of that by creating two files for our JavaScript: one for the JavaScript that stays the same for every Ajax application, and one for the JavaScript that's specific to an application. Let's call the JavaScript file containing the code that's common to every application ajax.js, and the file containing the code specific to this Coffee Maker application coffee.js . Go ahead and update your HTML with two <script> elements linking to the two JavaScript files you're about to create:

 <html> <head> <title>Ajax-powered Coffee Maker</title> <link rel="stylesheet" type="text/css" href="coffee.css" /> <script type="text/javascript" src="/books/2/850/1/html/2/ajax.js"> </script> <script type="text/javascript" src="/books/2/850/1/html/2/coffee.js"> </script> Here are the two <script> elements you need to link to the two JavaScript files. Be sure to add the empty space and the </script> tag, or some browsers won't load the JavaScript you point to. </head> <body> ... </body> </html>

Just Do It

Here's an outline of the Javascript you're going to need for the Coffee Maker application. For each bit of JavaScript, indicate whether the code should go into the "ajax.js" file or the "coffee.js" file.

 try {     request = new XMLHttpRequest(); } catch (trymicrosoft) {     try {         request = new ActiveXObject("Msxml2.XMLHTTP");     } catch (othermicrosoft) {         try {             request = new ActiveXObject("Microsoft.XMLHTTP");     } catch (failed) {         request = null;         }       }     }Write the name of the file where the code belongs on each line.     function getBeverage()     {         // Figure out what beverage was selected     }     function serveDrink()     {         // When the coffee maker is done, serve the drink     }     if (request == null)         alert("Error creating request object!");     function orderCoffee()     {         // Take an order from the web form     }     function sendRequest(url) {         // Send a request to the Coffee Maker     }     var request = null;     function getSize()     {         // Figure out what size cup was selected   }

Frequently Asked Questions?

Q:	I couldn't figure out whether to put the sendRequest(). function into ajax.js or coffee.js On the one hand, we'll need this function for every Ajax app, but on the other hand, it will have code that's specific to the coffee maker application. Which file does this function go in?
A:	You're rightthat's a toughie. You could probably go either way on this one. We decided to put the sendRequest() function in the ajax.js file, even thoughas you'll see in a few pagessendRequest()has no coffee maker-specific code in it. We decided to do things this way because we like keeping the sendRequest() and serveDrink() functions together. Since serveDrink()does have some coffee maker-specific code, we put them both into coffee.js.
Q:	Why do we need a separate function for getting the drink size and type of beverage?
A:	As you'll see in a few pages, it takes several lines of JavaScript to get the value of a radio button, which is the control we use for getting the size of a drink and the type of beverage. We like keeping this code separate from the rest of orderCoffee(), which will build the request URL and update the coffee makers' status text.
Q:	It looks like the request object is created in static code. Why did we do that again?
A:	By putting the code that creates the request object into static JavaScript-JavaScript that's not in a function-any errors that occur will be reported before the coffee maker can be used. That way, none of your co-workers get their order entered in, and then find out that something went wrong.