JavaScript and the browser (EJS ch. 13)

Networks and the internet

Network protocol = style of communication over a network. HTTP is one for retrieving named resources (weg pages, images) TCP is another one built on HTTP, and most internet devices speak it. One computer (server) is listening for others (clients) to start talking to it. It has different numbered listeners (ports), most protocols specify which ports should be used.

Each document on the web is named by a Uniform Resource Locator (URL):

 http://eloquentjavascript.net/13_browser.html
 |      |                      |              |
 protocol       server               path

HTML

Hypertext Markup Language is the document format used for web pages.

Sandbox

Isolating a programming environment in this way is called sandboxing, the idea being that the program is harmlessly playing in a sandbox. The hard part is giving 'good' programs enough room to be useful, but also restricting them from doing something potentially dangerous.

Compatibility and the browser wars

Modern day browsers (Mozilla, Chrome) have a more serious attitutde towards standards and better engineering practices, for more compatibility and fewer bugs. They behave quite uniformly, so developing nowadays is easier.

The Document Object Model (EJS ch. 14)

See the HTML document as a nested set of boxes.

The browser uses a data structure to represent this document, called the DOM. For each box, there is an object that we can interact with.

Trees

A data structure is a tree when it has a branching structure, has no cycles (a node may not contain itself, directly or indirectly), and has a single, well-defined root. In the DOM, document.documentElement serves as the root.

A tree can have different kinds of nodes. In the DOM, the nodes for the elements, which represent HTML tags, determine the structure of the document. These nodes can have child nodes, of which some can be leaf nodes like pieces of text, or comments.

There are different nodeTypes, like Node.ELEMENT_NODE or Node.TEXT_NODE. Each nodeType property contains a code (number), i.e. elements have code 1.

The standard

Using numeric codes to represent node types doesn't feel very JavaScript-like. That's because nodes weren't made for JS specifically, but tries to be language-neutral. It wants to not only be usable in HTML, but also XML for example.

Example of this poor integration: childNodes gives you a NodeList, which is similar to an array but not entirely, so it doesn't have methods like slice or map. There are more issues like this, and also issues due to poor design. Luckily, these flaws aren't fatal and can be worked around in JavaScript, since it allows us to make our own abstractions.

Moving through the tree

Finding elements

You could reach a specific node by starting at document.body, but it would be a bad idea - it bakes assumptions into your program about the precise structure of a document. Instead, use:

• getElementsByTagName
• getElementsById
• getElementsByClassName

Changing the document

You can move nodes around and replace them. A node can only exist can only be in one place at a time, so moving it to a new place (insertBefore()) in the document, makes it disappear from its old place.