The Metamorphosis of Ajax: A Journey Through Text Processing and Markup Languages

Episode IV The Metamorphosis of Ajax

all the worlds a page and all the men and women merely pointers and clickers.

Sir John Harrington

Ajax 1596

Jesse James Garrett

Ajax 2005

Word Processing Textual Open Binary Proprietary Standalone Shared Logic Personal Computer

RUNOFF .SK 1 Text processing and word processing systems typically require additional information to be interspersed among the natural text of the document being processed. This added information, called "markup", serves two purposes: .TB 4 .OF 4 .SK 1 1.#Separating the logical elements of the document; and .OF 4 .SK 1 2.#Specifying the processing functions to be performed on those elements. .OF 0 .SK 1

GML :h1.Chapter 1: Introduction :p.GML supported hierarchical containers, such as :ol :li.Ordered lists (like this one), :li.Unordered lists, and :li.Definition lists :eol. as well as simple structures. :p.Markup minimization (later generalized and formalized in SGML), allowed the end-tags to be omitted for the "h1" and "p" elements.

:eol. ::ol. </ol>

Brian Reids Scribe @Quote(Any damn fool) ( ) [ ] { } < > " " ' ' @Begin(Quote) Any damn fool @End(Quote) 1980

Scribe @techreport(PUB, key="Tesler", author="Tesler, Larry", title="PUB: The Document Compiler", year=1972, number="ON-72", month="Sep", institution="Stanford University Artificial Intelligence Project") @book(Volume3, key="Knuth", author="Knuth, Donald E.", title="Sorting and Searching", publisher="Addison-Wesley", year=1973, volume=3, series="The Art of Computer Programming", address="Reading, Mass.")

Runoff Scribe TEX GML SGML LATEX HTML

HTML was not state-of-the-art when it was introduced in the late 20th century. It was intended for simple document viewers. It was not intended to be an application platform.

A lot of people looked at the WWW and thought it didn t have what it takes.

The web standards were grown from a nave hypertext system under intense, highly unstable competitive pressure.

It wasnt designed to do all of this Ajax stuff. Its success is due to a lot of clever people who found ways to make it work.

HTML A huge improvement over SGML. Much simpler. More resilient. The Dark Side. Authors have virtually no control over presentation. Too limited: Classitis and iditis. It did not anticipate applications beyond simple document retrieval.

Two forms for writing outlines ol, li nesting h1, h2 not nesting

Web page is not a page The thing that the WWW calls a page isn t really a page at all. It is a scroll. The scroll is an ancient technology.

SGML Strikes Back <p> changed from a separator to a container. Mythical Semantic Markup. The XML Fiasco.

CSS Cascading Style Sheets. Unhealthy separation of structure and presentation. Long, fragile lists of self-contradictory rules. Each rule has two parts: Selector and declaration. Difficult to understand. Difficult to use.

CSSs Five Big Problems Lack of modularity. Selector management is complicated. Declarations are too weak for modern web applications. Not intended for dynamic content. It is unimplementable. It s all about the quirks.

CODEpendence CSS isn t bad. You just don t understand it like I do.

If that was all there was, the web would have been replaced by now.

Another software technology will come along and kill off the Web, just as it killed News, Gopher, et al. And that judgment day will arrive very soon -- in the next two to three years George F. Colony Chairman of the Board and CEO Forrester Research, Inc. [2000]

JavaScript

The Document Object Model The DOM. It is what most people hate when they say they hate JavaScript. The browser s API. Brendan Eich, Netscape. Influenced by a book on HyperCard Scott Isaacs, Microsoft.

In the original Netscape model, not all elements were scriptable. In the Microsoft model, all elements are completely scriptable. But it wasn t finished.

Browser Fetch Parse Flow Paint Display List URL Cache Tree Pixels

Scripted Browser Flow Paint Script Event

<script></script> <!-- // --> Hack for Mosaic and Navigator 1.0. language=javascript Deprecated. src=URL Highly recommended. Don t put code on pages. type=application/ecmascript Ignored.

document.write Allows JavaScript to produce HTML text. Before onload: Inserts HTML text into the document. After onload: Uses HTML text to replace the current document. Not recommended.

<script></script> Script files can have a big impact on page loading time. 1. Place <script src> tags as close to the bottom of the body as possible. (Also, place CSS <link> as high in the head as possible.) 2. Minify and gzip script files. 3. Reduce the number of script files as much as possible.

Document Tree Structure document #document <html> <body> <h1>Heading 1</h1> <p>Paragraph.</p> <h2>Heading 2</h2> <p>Paragraph.</p> </body> </html> HTML document. documentElement HEAD document.body BODY H1 #text P #text H2 #text P #text

child, sibling, parent BODY lastChild firstChild H1 P H2 P firstChild firstChild firstChild firstChild lastChild lastChild lastChild lastChild #text #text #text #text

child, sibling, parent BODY lastChild firstChild nextSibling nextSibling nextSibling H1 P H2 P previousSibling previousSibling previousSibling firstChild firstChild firstChild firstChild lastChild lastChild lastChild lastChild #text #text #text #text

child, sibling, parent BODY lastChild parentNode firstChild nextSibling nextSibling nextSibling H1 parentNode P H2 P previousSibling previousSibling previousSibling parentNode parentNode parentNode firstChild firstChild firstChild firstChild lastChild lastChild lastChild lastChild #text #text #text #text

child, sibling, parent BODY firstChild nextSibling nextSibling nextSibling H1 P H2 P firstChild firstChild firstChild firstChild #text #text #text #text

Walk the DOM Using recursion, follow the firstChild node, and then the nextSibling nodes. function walkTheDOM(node, func) { func(node); node = node.firstChild; while (node) { walkTheDOM(node, func); node = node.nextSibling; } }

getElementsByClassName function getElementsByClassName(className) { var results = []; walkTheDOM(document.body, function (node) { var a, c = node.className, i; if (c) { a = c.split(' '); for (i = 0; i < a.length; i += 1) { if (a[i] === className) { results.push(node); break; } } } }); return results; }

childNodes BODY childNodes 3 0 1 2 H1 P H2 P

Retrieving Nodes document.getElementById(id) document.getElementsByName(name) node.getElementsByTagName(tagName) document.querySelector(selector) document.querySelectorAll(selector)

Manipulating Elements <IMG> has these properties: align alt border height hspace id isMap src useMap vspace width 'none', 'top', 'left', ... string integer (pixels) integer (pixels) integer (pixels) string boolean url url integer (pixels) integer (pixels) node.property = expression;

Manipulating Elements Old School if (my_image.complete) { my_image.src = superurl; } New School if (my_image.getAttribute("complete")) { my_image.setAttribute("src", superurl); }

Style node.className node.style.stylename node.currentStyle.stylename Only IE document.defaultView(). getComputedStyle(node, ""). getPropertyValue(stylename);

Style Names CSS DOM background-color border-radius font-size list-style-type word-spacing z-index float backgroundColor borderRadius fontSize listStyleType wordSpacing zIndex cssFloat

Making Elements document.createElement(tagName) document.createTextNode(text) node.cloneNode() Clone an individual element. node.cloneNode(true) Clone an element and all of its descendents. The new nodes are not connected to the document.

Linking Elements node.appendChild(new) node.insertBefore(new, sibling) node.replaceChild(new, old) old.parentNode.replaceChild(new, old)