Chap 4

The chapter begins with the introduction of the Document Object Model (DOM). Web browsers use the DOM to represent a web page. When the DOM is changed with JavaScript code, the web page will change automatically.

* The "document" object gives your JavaScript access to the web browser's DOM tree.

Everything in the web browser's model of a web page can be accessed using the JavaScript "document" object.

The document object allows you to get the root element of the document (documentElement), find an element by "id" attribute (getElementById), create new markup nodes (createTextNode), and find nodes by their name (getElementsByTagName). p.205

The DOM works with Ajax, but isn't actually a part of Ajax.

With the DOM, you can move things around on a page, helping create nice CSS effects without reloading the page.

The book then goes on to discuss in depth the concept of the tree structure for a DOM with an HTML example. When a browser loads a page, it begins with html, so the html is called the root element. The "head" and "body" elements branch out from the root. Elements like "p" and "img" have nothing underneath, so they are the leaves. Page 232 shows the various ways of getting around the DOM tree with a node. Although, the node sometimes isn't supported by certain browsers.

Chap 3 Cont'd

We begin with the coffee maker HTML code given to us. Also, since the JavaScript is pretty similar for each application, we are creating a separate JavaScript file called ajax.js (which relates to common applications) and coffee.js (for those that are specific to the coffee maker application). It's similar to separating HTML code with CSS.

The code that links the JavaScript file to the HTML and to replace inside the HTML is on page 154.


The next objectives are writing the JavaScript for orderCoffee(), getSize(), getBeverage(), sendRequest().

Also, there is a line of code to reset the form when an order has been placed so the next person that wants to order doesn't see the last order. It is: document.forms[0].reset().

The book has also included code for the coffeemaker.php file to interact with the server.

After having the the files ready, the serveDrink function is used to take the response from the server and figure out who placed the order, and which coffee maker was used to brew the drink. It is also used to set the status of the maker to idle and to alert the person that the coffee is ready.

The JavaScript substring() function is used to take a response string and breaking it up. It looks like this: var newString = myString.substring(startIndex, endIndex);

The last part of the chapter is dedicated to testing and finding that there's a need to create two request objects.

Game Plan

So, because I've been having a lot of homework in my classes so far this semester, I think I'm going to have to break it down.

I'd like to finish Chapter 3 this weekend (1/27-1/28) and then finish half a chapter about every 2-3 days. Chapter 4 (1/29-2/3); Chapter 5 (2/5-2/10); Chapter 6 (2/12-2/17); Chapter 7 (2/19-2/24). And then I'd like to get familiar with the examples provided in the book. In the meantime, I'm hoping to implement a project starting after Chapter 7 with a few more deliverables.

Meeting with Dr. Piercy

On Friday (1/19), met with Dr. Piercy to discuss the rest of the semester. The plan is to layout deadline for getting things done this semester. We will also be discussing a project, potentially on something dealing with Jmaki or script.aculo.us . I currently do not yet have a project in mind, but am constantly brainstorming for ideas. I will be posting shortly, a deadline of small deliverables.

Chap 3

This chapter is focused on the responsiveness of the webpage, making it truly asynchronous.

The example the book works on is the coffee maker application.
There are three parts to the coffee making application:
1.) Coffee maker HTML
2.) JavaScript code
3.) Server-side coffee-making script

The coffee maker HTML is going to take orders and report on the status of the two coffee makers. The JavaScript code is going to create a request object, a function to send an order to the coffee-making script, function to serve a drink when it's been brewed, and event handlers to connect the web form buttons to these JavaScript functions. The server-side coffee-making script is going to brew the coffee anytime it gets a request.

In this chapter, they also define the term iterative development. This term means that you go back and forth on the same pieces over and over again. In this way, you keep adding and improving to what you've already worked on.

Chap 2

In Chapter 2, the book begins with the Break Neck Pizza Delivery website example files provided online. It goes through the examples of how the old site works and provides a layout of how the new layout should work asynchronously.

The first main idea they discuss is that event handlers connect HTML to JavaScript. The three event handlers they discuss are onChange, onFocus, and onBlur. onChange is used when a form field's value is changed. onFocus is used when a field or another part of the site gets the focus, whether through tabbing or clicking. onBlur is used when the focus leaves, also by tabbing or clicking.

This is also where they briefly mention the Document Object Model (DOM). The DOM is the way to ask the web browser to get information to or from a site.

Through creating a request, they provide the breakdown of supporting non-Microsoft and Microsoft browsers. The XMLHttpRequest object supports most browsers like Safari, FireFox, Mozilla, and Opera. The ActiveXObject object supports Microsoft browsers. They also have error handling code in case something wrong happens.

Also, a big piece of JavaScript is that any script in your page that's not in a function is static, meaning as the web browser loads your page, it automatically runs any JavaScript it finds.

From the server, the site will need:
1.) A new PHP script to lookup a customer's address from a customer's phone number
2.) The script lookupCustomer.php
3.) The script that will accept the customer's phone number
4.) The script doesn't return any HTML, just customer information