## Chapter 12 # JavaScript and the Browser > [](http://eloquentjavascript.net/12_browser.html#p_oSbDqg89i/)The browser is a really hostile programming environment. > > Douglas Crockford, The JavaScript Programming Language (video lecture) [](http://eloquentjavascript.net/12_browser.html#p_GZ7nJVK3wA)The next part of this book will talk about web browsers. Without web browsers, there would be no JavaScript. And even if there were, no one would ever have paid any attention to it. [](http://eloquentjavascript.net/12_browser.html#p_XT5pNqisw+)Web technology has, from the start, been decentralized, not just technically but also in the way it has evolved. Various browser vendors have added new functionality in ad hoc and sometimes poorly thought out ways, which then sometimes ended up being adopted by others and finally set down as a standard. [](http://eloquentjavascript.net/12_browser.html#p_ePAQfpo7ra)This is both a blessing and a curse. On the one hand, it is empowering to not have a central party control a system but have it be improved by various parties working in loose collaboration (or, occasionally, open hostility). On the other hand, the haphazard way in which the Web was developed means that the resulting system is not exactly a shining example of internal consistency. In fact, some parts of it are downright messy and confusing. ## [](http://eloquentjavascript.net/12_browser.html#h_MYPczIw5xZ)Networks and the Internet [](http://eloquentjavascript.net/12_browser.html#p_hsMIYbAKNv)Computer networks have been around since the 1950s. If you put cables between two or more computers and allow them to send data back and forth through these cables, you can do all kinds of wonderful things. [](http://eloquentjavascript.net/12_browser.html#p_rRsGS85yhE)If connecting two machines in the same building allows us to do wonderful things, connecting machines all over the planet should be even better. The technology to start implementing this vision was developed in the 1980s, and the resulting network is called the *Internet*. It has lived up to its promise. [](http://eloquentjavascript.net/12_browser.html#p_cvrUZPtUxT)A computer can use this network to spew bits at another computer. For any effective communication to arise out of this bit-spewing, the computers at both ends must know what the bits are supposed to represent. The meaning of any given sequence of bits depends entirely on the kind of thing that it is trying to express and on the encoding mechanism used. [](http://eloquentjavascript.net/12_browser.html#p_tlYBPgx73H)A *network protocol* describes a style of communication over a network. There are protocols for sending email, for fetching email, for sharing files, or even for controlling computers that happen to be infected by malicious software. [](http://eloquentjavascript.net/12_browser.html#p_u8lDPIC39z)For example, a simple chat protocol might consist of one computer sending the bits that represent the text “CHAT?” to another machine and the other responding with “OK!” to confirm that it understands the protocol. They can then proceed to send each other strings of text, read the text sent by the other from the network, and display whatever they receive on their screens. [](http://eloquentjavascript.net/12_browser.html#p_WXSVtMixCt)Most protocols are built on top of other protocols. Our example chat protocol treats the network as a streamlike device into which you can put bits and have them arrive at the correct destination in the correct order. Ensuring those things is already a rather difficult technical problem. [](http://eloquentjavascript.net/12_browser.html#p_7IOEk4hhjX)The *Transmission Control Protocol* (TCP) is a protocol that solves this problem. All Internet-connected devices “speak” it, and most communication on the Internet is built on top of it. [](http://eloquentjavascript.net/12_browser.html#p_R1N5wYYFn+)A TCP connection works as follows: one computer must be waiting, or*listening*, for other computers to start talking to it. To be able to listen for different kinds of communication at the same time on a single machine, each listener has a number (called a *port*) associated with it. Most protocols specify which port should be used by default. For example, when we want to send an email using the SMTP protocol, the machine through which we send it is expected to be listening on port 25. [](http://eloquentjavascript.net/12_browser.html#p_C9NFg/yfxC)Another computer can then establish a connection by connecting to the target machine using the correct port number. If the target machine can be reached and is listening on that port, the connection is successfully created. The listening computer is called the *server*, and the connecting computer is called the *client*. [](http://eloquentjavascript.net/12_browser.html#p_g48pTp1IKV)Such a connection acts as a two-way pipe through which bits can flow—the machines on both ends can put data into it. Once the bits are successfully transmitted, they can be read out again by the machine on the other side. This is a convenient model. You could say that TCP provides an abstraction of the network. ## [](http://eloquentjavascript.net/12_browser.html#h_tbGTd9Llzv)The Web [](http://eloquentjavascript.net/12_browser.html#p_w4VQt163Im)The *World Wide Web* (not to be confused with the Internet as a whole) is a set of protocols and formats that allow us to visit web pages in a browser. The “Web” part in the name refers to the fact that such pages can easily link to each other, thus connecting into a huge mesh that users can move through. [](http://eloquentjavascript.net/12_browser.html#p_IX9vl21tDt)To add content to the Web, all you need to do is connect a machine to the Internet, and have it listen on port 80, using the *Hypertext Transfer Protocol*(HTTP). This protocol allows other computers to request documents over the network. [](http://eloquentjavascript.net/12_browser.html#p_KH3H5PXZlk)Each document on the Web is named by a *Uniform Resource Locator* (URL), which looks something like this: ~~~ http://eloquentjavascript.net/12_browser.html | | | | protocol server path ~~~ [](http://eloquentjavascript.net/12_browser.html#p_0F4MKpLU9B)The first part tells us that this URL uses the HTTP protocol (as opposed to, for example, encrypted HTTP, which would be *https://*). Then comes the part that identifies which server we are requesting the document from. Last is a path string that identifies the specific document (or *resource*) we are interested in. [](http://eloquentjavascript.net/12_browser.html#p_/GdEX6bncv)Each machine connected to the Internet gets a unique *IP address*, which looks something like `37.187.37.82`. You can use these directly as the server part of a URL. But lists of more or less random numbers are hard to remember and awkward to type, so you can instead register a *domain name* to point toward a specific machine or set of machines. I registered *eloquentjavascript.net* to point at the IP address of a machine I control and can thus use that domain name to serve web pages. [](http://eloquentjavascript.net/12_browser.html#p_VQIXesk4P9)If you type the previous URL into your browser’s address bar, it will try to retrieve and display the document at that URL. First, your browser has to find out what address *eloquentjavascript.net* refers to. Then, using the HTTP protocol, it makes a connection to the server at that address and asks for the resource */12_browser.html*. [](http://eloquentjavascript.net/12_browser.html#p_pfUoCDr2pV)We will take a closer look at the HTTP protocol in [Chapter 17](http://eloquentjavascript.net/17_http.html#http). ## [](http://eloquentjavascript.net/12_browser.html#h_n3OM6EV/KR)HTML [](http://eloquentjavascript.net/12_browser.html#p_m2H1Cp4ACJ)HTML, which stands for *Hypertext Markup Language*, is the document format used for web pages. An HTML document contains text, as well as *tags*that give structure to the text, describing things such as links, paragraphs, and headings. [](http://eloquentjavascript.net/12_browser.html#p_P2V14LZFIv)A simple HTML document looks like this: ~~~ <!doctype html> <html> <head> <title>My home page</title> </head> <body> <h1>My home page</h1> <p>Hello, I am Marijn and this is my home page.</p> <p>I also wrote a book! Read it <a href="http://eloquentjavascript.net">here</a>.</p> </body> </html> ~~~ [](http://eloquentjavascript.net/12_browser.html#p_zP6SuTzWSr)The tags, wrapped in angle brackets (`<` and `>`), provide information about the structure of the document. The other text is just plain text. [](http://eloquentjavascript.net/12_browser.html#p_7PI7BADgG4)The document starts with `<!doctype html>`, which tells the browser to interpret it as *modern* HTML, as opposed to various dialects that were in use in the past. [](http://eloquentjavascript.net/12_browser.html#p_Et3bT2kUby)HTML documents have a head and a body. The head contains information*about* the document, and the body contains the document itself. In this case, we first declared that the title of this document is “My home page” and then gave a document containing a heading (`<h1>`, meaning “heading 1”—`<h2>` to`<h6>` produce more minor headings) and two paragraphs (`<p>`). [](http://eloquentjavascript.net/12_browser.html#p_twHeUPgGnQ)Tags come in several forms. An element, such as the body, a paragraph, or a link, is started by an *opening tag* like `<p>` and ended by a *closing tag* like`</p>`. Some opening tags, such as the one for the link (`<a>`), contain extra information in the form of `name="value"` pairs. These are called *attributes*. In this case, the destination of the link is indicated with`href="http://eloquentjavascript.net"`, where `href` stands for “hypertext reference”. [](http://eloquentjavascript.net/12_browser.html#p_a6Kx16yoMd)Some kinds of tags do not enclose anything and thus do not need to be closed. An example of this would be `<img src="http://example.com/image.jpg">`, which will display the image found at the given source URL. [](http://eloquentjavascript.net/12_browser.html#p_aDzWCv6pnm)To be able to include angle brackets in the text of a document, even though they have a special meaning in HTML, yet another form of special notation has to be introduced. A plain opening angle bracket is written as `&lt;` (“less than”), and a closing bracket is written as `&gt;` (“greater than”). In HTML, an ampersand (`&`) character followed by a word and a semicolon (`;`) is called an*entity*, and will be replaced by the character it encodes. [](http://eloquentjavascript.net/12_browser.html#p_BVTrBS/gKt)This is analogous to the way backslashes are used in JavaScript strings. Since this mechanism gives ampersand characters a special meaning, too, those need to be escaped as `&amp;`. Inside an attribute, which is wrapped in double quotes,`&quot;` can be used to insert an actual quote character. [](http://eloquentjavascript.net/12_browser.html#p_RK6LQEinS9)HTML is parsed in a remarkably error-tolerant way. When tags that should be there are missing, the browser reconstructs them. The way in which this is done has been standardized, and you can rely on all modern browsers to do it in the same way. [](http://eloquentjavascript.net/12_browser.html#p_hnbBzl0NyQ)The following document will be treated just like the one shown previously: ~~~ <!doctype html> <title>My home page</title> <h1>My home page</h1> <p>Hello, I am Marijn and this is my home page. <p>I also wrote a book! Read it <a href=http://eloquentjavascript.net>here</a>. ~~~ [](http://eloquentjavascript.net/12_browser.html#p_6iDhitY04v)The `<html>`, `<head>`, and `<body>` tags are gone completely. The browser knows that `<title>` belongs in a head, and that `<h1>` in a body. Furthermore, I am no longer explicitly closing the paragraphs since opening a new paragraph or ending the document will close them implicitly. The quotes around the link target are also gone. [](http://eloquentjavascript.net/12_browser.html#p_849RpAZtxv)This book will usually omit the `<html>`, `<head>`, and `<body>` tags from examples to keep them short and free of clutter. But I *will* close tags and include quotes around attributes. [](http://eloquentjavascript.net/12_browser.html#p_YK9xXsU8IZ)I will also usually omit the doctype. This is not to be taken as an encouragement to omit doctype declarations. Browsers will often do ridiculous things when you forget them. You should consider doctypes implicitly present in examples, even when they are not actually shown in the text. ## [](http://eloquentjavascript.net/12_browser.html#h_x9VDt2sTZZ)HTML and JavaScript [](http://eloquentjavascript.net/12_browser.html#p_Eruo+DmcTl)In the context of this book, the most important HTML tag is `<script>`. This tag allows us to include a piece of JavaScript in a document. ~~~ <h1>Testing alert</h1> <script>alert("hello!");</script> ~~~ [](http://eloquentjavascript.net/12_browser.html#p_3pFG6nbfUJ)Such a script will run as soon as its `<script>` tag is encountered as the browser reads the HTML. The page shown earlier will pop up an `alert` dialog when opened. [](http://eloquentjavascript.net/12_browser.html#p_GmDPwY/KfO)Including large programs directly in HTML documents is often impractical. The `<script>` tag can be given an `src` attribute in order to fetch a script file (a text file containing a JavaScript program) from a URL. ~~~ <h1>Testing alert</h1> <script src="code/hello.js"></script> ~~~ [](http://eloquentjavascript.net/12_browser.html#p_Hz/JcRYmOp)The *code/hello.js* file included here contains the same simple program,`alert("hello!")`. When an HTML page references other URLs as part of itself, for example an image file or a script—web browsers will retrieve them immediately and include them in the page. [](http://eloquentjavascript.net/12_browser.html#p_DLaR5M/yDv)A script tag must always be closed with `</script>`, even if it refers to a script file and doesn’t contain any code. If you forget this, the rest of the page will be interpreted as part of the script. [](http://eloquentjavascript.net/12_browser.html#p_ztoAMAZEju)Some attributes can also contain a JavaScript program. The `<button>` tag shown next (which shows up as a button) has an `onclick` attribute, whose content will be run whenever the button is clicked. ~~~ <button onclick="alert('Boom!');">DO NOT PRESS</button> ~~~ [](http://eloquentjavascript.net/12_browser.html#p_hBrXiBnQxx)Note that I had to use single quotes for the string in the `onclick` attribute because double quotes are already used to quote the whole attribute. I could also have used `&quot;`, but that’d make the program harder to read. ## [](http://eloquentjavascript.net/12_browser.html#h_xSthu5StoL)In the sandbox [](http://eloquentjavascript.net/12_browser.html#p_AniKiqdG2y)Running programs downloaded from the Internet is potentially dangerous. You do not know much about the people behind most sites you visit, and they do not necessarily mean well. Running programs by people who do not mean well is how you get your computer infected by viruses, your data stolen, and your accounts hacked. [](http://eloquentjavascript.net/12_browser.html#p_D7H4XfnmGB)Yet the attraction of the Web is that you can surf it without necessarily trusting all the pages you visit. This is why browsers severely limit the things a JavaScript program may do: it can’t look at the files on your computer or modify anything not related to the web page it was embedded in. [](http://eloquentjavascript.net/12_browser.html#p_KW2fU3B9nm)Isolating a programming environment in this way is called *sandboxing*, the idea being that the program is harmlessly playing in a sandbox. But you should imagine this particular kind of sandbox as having a cage of thick steel bars over it, which makes it somewhat different from your typical playground sandbox. [](http://eloquentjavascript.net/12_browser.html#p_7pNt468QvZ)The hard part of sandboxing is allowing the programs enough room to be useful yet at the same time restricting them from doing anything dangerous. Lots of useful functionality, such as communicating with other servers or reading the content of the copy-paste clipboard, can also be used to do problematic, privacy-invading things. [](http://eloquentjavascript.net/12_browser.html#p_0xA5OSkc0i)Every now and then, someone comes up with a new way to circumvent the limitations of a browser and do something harmful, ranging from leaking minor private information to taking over the whole machine that the browser runs on. The browser developers respond by fixing the hole, and all is well again—that is, until the next problem is discovered, and hopefully publicized, rather than secretly exploited by some government or mafia. ## [](http://eloquentjavascript.net/12_browser.html#h_p42hxqLkOm)Compatibility and the browser wars [](http://eloquentjavascript.net/12_browser.html#p_EZKXamx/Cn)In the early stages of the Web, a browser called Mosaic dominated the market. After a few years, the balance had shifted to Netscape, which was then, in turn, largely supplanted by Microsoft’s Internet Explorer. At any point where a single browser was dominant, that browser’s vendor would feel entitled to unilaterally invent new features for the Web. Since most users used the same browser, websites would simply start using those features—never mind the other browsers. [](http://eloquentjavascript.net/12_browser.html#p_VsfVT8QgQV)This was the dark age of compatibility, often called the *browser wars*. Web developers were left with not one unified Web but two or three incompatible platforms. To make things worse, the browsers in use around 2003 were all full of bugs, and of course the bugs were different for each browser. Life was hard for people writing web pages. [](http://eloquentjavascript.net/12_browser.html#p_K5Wu7RrwZS)Mozilla Firefox, a not-for-profit offshoot of Netscape, challenged Internet Explorer’s hegemony in the late 2000s. Because Microsoft was not particularly interested in staying competitive at the time, Firefox took quite a chunk of market share away from it. Around the same time, Google introduced its Chrome browser, and Apple’s Safari browser gained popularity, leading to a situation where there were four major players, rather than one. [](http://eloquentjavascript.net/12_browser.html#p_ztjPRIOS1D)The new players had a more serious attitude toward standards and better engineering practices, leading to less incompatibility and fewer bugs. Microsoft, seeing its market share crumble, came around and adopted these attitudes. If you are starting to learn web development today, consider yourself lucky. The latest versions of the major browsers behave quite uniformly and have relatively few bugs. [](http://eloquentjavascript.net/12_browser.html#p_4EMPHMJP+U)That is not to say that the situation is perfect just yet. Some of the people using the Web are, for reasons of inertia or corporate policy, stuck with very old browsers. Until those browsers die out entirely, writing websites that work for them will require a lot of arcane knowledge about their shortcomings and quirks. This book is not about those quirks. Rather, it aims to present the modern, sane style of web programming.