This section describes the Lecture Browser. The Lecture Browser makes heavy use of JavaScript, AJAX, dynamic HTML, and cascading style sheets.
The initial page is index.html. All successive operations locally modify the HTML of the initial page, so the browser never leaves the initial URL. Instead, event handlers send requests to the server, which returns XML. The XML is interpreted and the results are displayed by making changes to the displayed HTML.
The JavaScript is divided into five files, roughly corresponding to functionality:
JavaScript is a browser scripting language that is supported by most web browsers. In spite of the similarity in names, JavaScript has nothing to do with the programming language “Java,” although the syntax is similar to that of Java and C. Much of JavaScript browser programming consists of creating objects and functions that get called in response to various events, such as mouse movement, button clicks, and timers.
In JavaScript, most things are objects, which means maps between property names and objects. The dot operator is used to get or set property values, as in window.height or windows.height = 100.
The operator var adds a variable to the current naming context, which is either global or the enclosing function. Even though a var can appear in what looks like scope-limiting curly braces, the variable scope will still be that of the enclosing function.
Unlike C, function definitions can appear inside of functions, and variable bindings of the outer function remain in effect.
function makeCounter(){ var count = 0 return function(){ return count++; }; } var c1 = makeCounter() var c2 = makeCounter()
Figure 23: Counter as a Function
In Figure 23, the function makeCounter initializes a new copy of the variable count to 0 each time it is called. It then returns a function that has access to the variable count. Each time the returned function is called, it returns the current value of its count variable, and increments it. The global variables c1 and c2 are initialized to two counter functions. Calling c1(), c1(), c2(), and then c1() will return the values 0, 1, 0, 2.
A counter could also be created with an object, which is a container for associating properties and values. New objects are created by the operator new, as in new Counter(). This will call the function Container, called the constructor, which will have an implicit this variable. The constructor can initialize properties of this.
Every constructor has an associated prototype, accessible on the prototype property. All objects created by the constructor will share the properties of the prototype, so the prototype is where methods should be placed. Some older versions of JavaScript to not initialize the prototype property until the constructor has been called once, so it is safest to call the constructor before defining methods.
function Counter(){ this.count = 0; } new Counter(); Counter.prototype.next = function(){ return this.count++; } var d1 = new Counter(); var d2 = new Counter();
Figure 24: Counter as an Object
In Figure 24, a Counter object is defined. The sequence of method calls d1.next(), d1.next(), d2.next(), d1.next() will return 0,1, 0, 2.
In the late 1990s, Microsoft added a script-accessible object to their browser that allowed scripts to access the web server and receive the results. Soon afterwards, the other major browsers added similar functionality. At about the same time, Microsoft introduced dynamic HTML, which let the scripts running in a browser modify the HTML. Although this functionality was later standardized by W3C, Microsoft never adopted the standard, although, for compatibility, other browsers support subsets of Microsoft's implementation.
The support for AJAX requests is in the file ajax.js.
To send a request to a web server, the browser must first obtain the object that handles this functionality; there is one way to do this for Internet Explorer that assumes functionality available only on Windows, and another way for every other browser. Once the object is obtained, a request to a URL is opened, request parameters are set, and event handler for the response is set, and the request is sent. When the response is received from the server, the event handler function is called and can obtain the results as parsed XML.
While the request is being processed by the server, the browser is free to handle other user requests, which could result in other requests. A server can process multiple requests in parallel, so a response for a later request could arrive before a response to an earlier requrest, which can cause problems if the browser is not expecting the responses out of order.
The script in ajax.js avoids this problem by implementing an operation queue. Requests are placed in the queue and acted upon serially in the order they were submittes. Optionally, a function can be called while when the operation starts and stops. For example, input can be disabled while waiting for a query.
The file db.js handles most user interaction. Although the Lecture Browser works on several browsers, the display is somewhat fragile, and small changes that look correct in one browser may have problems in a different version of the browser, or another browser. When making changes, frequent testing on multiple browsers is important since problems can be difficult to debug.
There are two helper functions, println and printlnc, that can be used during debugging. println will print a string on a “debug” pane, while printlnc will print the string after first clearing the debug pane.
Most of the support for media and transcripts is in the file karoke.js.
A timer is used to periodically monitor the RealPlayer player object. When someone clicks on one of its buttons, it undergoes a state change which is detected by the timer function. During play, the probe rate is increased since the player position within the utterance is polled.
During play, the browser makes times requests to the server to seek time-aligned transcript information. The browser tries to stay enough ahead of the player so that the transcription of what is being played is always available. Since the user can move around through the lecture, data might not be received in order. As the data is received, it is merged into a two-level tree that is used during play to highlight words as they are being played.
Received transctiption information is associated with span elements. Highlighting is accomplished by changing the style of the span while it is played. The spans also have event handlers to start play at their location if they are clicked on.