devdoshi
diff --git a/‎.gitignore‎
Lines changed: 1 addition & 3 deletions b/‎.gitignore‎
Lines changed: 1 addition & 3 deletions
diff --git a/‎13_browser.md‎
Lines changed: 5 additions & 5 deletions b/‎13_browser.md‎
Lines changed: 5 additions & 5 deletions
diff --git a/‎14_dom.md‎
Lines changed: 18 additions & 18 deletions b/‎14_dom.md‎
Lines changed: 18 additions & 18 deletions
diff --git a/‎15_event.md‎
Lines changed: 19 additions & 19 deletions b/‎15_event.md‎
Lines changed: 19 additions & 19 deletions
@@ -10,9 +10,7 @@
 /book.pdf
 /book_mobile.pdf
 /html/[012]*.html
-/html/js/chapter_info.js
-/html/js/[012]*.js
-/html/js/acorn_codemirror.js
+/html/ejs.js
 /code/chapter/*
 /code/file_server.js
 /code/skillsharing.zip
 
@@ -100,7 +100,7 @@ HTML, which stands for _Hypertext Markup Language_, is the document format used
 
 A short HTML document might look like this:
 
-```{lang: "text/html"}
+```{lang: "html"}
 <!doctype html>
 <html>
   <head>
@@ -158,7 +158,7 @@ HTML is parsed in a remarkably error-tolerant way. When tags that should be ther
 
 The following document will be treated just like the one shown previously:
 
-```{lang: "text/html"}
+```{lang: "html"}
 <!doctype html>
 
 <meta charset=utf-8>
@@ -188,7 +188,7 @@ I will also usually omit the ((doctype)) and `charset` declaration. This is not
 
 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.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <h1>Testing alert</h1>
 <script>alert("hello!");</script>
 ```
@@ -201,7 +201,7 @@ Such a script will run as soon as its `<script>` tag is encountered while the br
 
 Including large programs directly in HTML documents is often impractical. The `<script>` tag can be given an `src` attribute  to fetch a script file (a text file containing a JavaScript program) from a URL.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <h1>Testing alert</h1>
 <script src="code/hello.js"></script>
 ```
@@ -220,7 +220,7 @@ You can load ((ES modules)) (see [Chapter ?](modules#es)) in the browser by givi
 
 Some attributes can also contain a JavaScript program. The `<button>` tag shown next (which shows up as a button) has an `onclick` attribute. The attribute's value will be run whenever the button is clicked.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <button onclick="alert('Boom!');">DO NOT PRESS</button>
 ```
 
 
@@ -22,7 +22,7 @@ This representation of the ((document)) is one of the toys that a JavaScript pro
 
 You can imagine an HTML document as a nested set of ((box))es. Tags such as `<body>` and `</body>` enclose other ((tag))s, which in turn contain other tags or ((text)). Here's the example document from the [previous chapter](browser):
 
-```{lang: "text/html", sandbox: "homepage"}
+```{lang: "html", sandbox: "homepage"}
 <!doctype html>
 <html>
   <head>
@@ -176,7 +176,7 @@ All element nodes have a `getElementsByTagName` method, which collects all eleme
 
 To find a specific _single_ node, you can give it an `id` attribute and use `document.getElementById` instead.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <p>My ostrich Gertrude:</p>
 <p><img id="gertrude" src="img/ostrich.png"></p>
 
@@ -196,7 +196,7 @@ A third, similar method is `getElementsByClassName`, which, like `getElementsByT
 
 Almost everything about the DOM data structure can be changed. The shape of the document tree can be modified by changing parent-child relationships. Nodes have a `remove` method to remove them from their current parent node. To add a child node to an element node, we can use `appendChild`, which puts it at the end of the list of children, or `insertBefore`, which inserts the node given as the first argument before the node given as the second argument.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <p>One</p>
 <p>Two</p>
 <p>Three</p>
@@ -223,7 +223,7 @@ Say we want to write a script that replaces all ((image))s (`<img>` tags) in the
 
 This involves not only removing the images but adding a new text node to replace them. Text nodes are created with the `document.createTextNode` method.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <p>The <img src="img/cat.png" alt="Cat"> in the
   <img src="img/hat.png" alt="Hat">.</p>
 
@@ -272,7 +272,7 @@ To create ((element)) nodes, you can use the `document.createElement` method. Th
 
 The following example defines a utility `elt`, which creates an element node and treats the rest of its arguments as children to that node. This function is then used to add an attribution to a quote.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <blockquote id="quote">
   No book can ever be finished. While working on it we learn
   just enough to find it immature the moment we turn away
@@ -316,7 +316,7 @@ Some element ((attribute))s, such as `href` for links, can be accessed through a
 
 But HTML allows you to set any attribute you want on nodes. This can be useful because it allows you to store extra information in a document. If you make up your own attribute names, though, such attributes will not be present as properties on the element's node. Instead, you have to use the `getAttribute` and `setAttribute` methods to work with them.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <p data-classified="secret">The launch code is 00000000.</p>
 <p data-classified="unclassified">I have two feet.</p>
 
@@ -352,7 +352,7 @@ The size and position of an element can be accessed from JavaScript. The `offset
 
 Similarly, `clientWidth` and `clientHeight` give you the size of the space _inside_ the element, ignoring border width.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <p style="border: 3px solid red">
   I'm boxed in
 </p>
@@ -386,7 +386,7 @@ Laying out a document can be quite a lot of work. In the interest of speed, brow
 
 A program that repeatedly alternates between reading DOM layout information and changing the DOM forces a lot of layout computations to happen and will consequently run very slowly. The following code is an example of this. It contains two different programs that build up a line of _X_ characters 2,000 pixels wide and measures the time each one takes.
 
-```{lang: "text/html", test: nonumbers}
+```{lang: "html", test: nonumbers}
 <p><span id="one"></span></p>
 <p><span id="two"></span></p>
 
@@ -425,7 +425,7 @@ We have seen that different HTML elements are drawn differently. Some are displa
 
 The way an `<img>` tag shows an image or an `<a>` tag causes a link to be followed when it is clicked is strongly tied to the element type. But we can change the styling associated with an element, such as the text color or underline. Here is an example that uses the `style` property:
 
-```{lang: "text/html"}
+```{lang: "html"}
 <p><a href=".">Normal link</a></p>
 <p><a href="." style="color: green">Green link</a></p>
 ```
@@ -446,7 +446,7 @@ A style attribute may contain one or more _((declaration))s_, which are a proper
 
 A lot of aspects of the document can be influenced by styling. For example, the `display` property controls whether an element is displayed as a block or an inline element.
 
-```{lang: "text/html"}
+```{lang: "html"}
 This text is displayed <strong>inline</strong>,
 <strong style="display: block">as a block</strong>, and
 <strong style="display: none">not at all</strong>.
@@ -466,7 +466,7 @@ if}}
 
 JavaScript code can directly manipulate the style of an element through the element's `style` property. This property holds an object that has properties for all possible style properties. The values of these properties are strings, which we can write to in order to change a particular aspect of the element's style.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <p id="para" style="color: purple">
   Nice text
 </p>
@@ -491,7 +491,7 @@ Some style property names contain hyphens, such as `font-family`. Because such p
 
 The styling system for HTML is called ((CSS)), for _Cascading Style Sheets_. A _style sheet_ is a set of rules for how to style elements in a document. It can be given inside a `<style>` tag.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <style>
   strong {
     font-style: italic;
@@ -550,7 +550,7 @@ The main reason I introduced _((selector))_ syntax—the notation used in style
 
 The `querySelectorAll` method, which is defined both on the `document` object and on element nodes, takes a selector string and returns a `NodeList` containing all the elements that it matches.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <p>And if you go chasing
   <span class="animal">rabbits</span></p>
 <p>And you know you're going to fall</p>
@@ -593,7 +593,7 @@ The `position` style property influences layout in a powerful way. By default it
 
 We can use this to create an animation. The following document displays a picture of a cat that moves around in an ((ellipse)):
 
-```{lang: "text/html", startCode: true}
+```{lang: "html", startCode: true}
 <p style="text-align: center">
   <img src="img/cat.png" style="position: relative">
 </p>
@@ -680,7 +680,7 @@ The way a document is displayed can be influenced by _styling_, both by attachin
 
 An HTML table is built with the following tag structure:
 
-```{lang: "text/html"}
+```{lang: "html"}
 <table>
   <tr>
     <th>name</th>
@@ -711,7 +711,7 @@ Once you have this working, right-align cells that contain number values by sett
 
 {{if interactive
 
-```{test: no, lang: "text/html"}
+```{test: no, lang: "html"}
 <h1>Mountains</h1>
 
 <div id="mountains"></div>
@@ -761,7 +761,7 @@ To find the tag name of an element, use its `nodeName` property. But note that t
 
 {{if interactive
 
-```{lang: "text/html", test: no}
+```{lang: "html", test: no}
 <h1>Heading with a <span>span</span> element.</h1>
 <p>A paragraph with <span>one</span>, <span>two</span>
   spans.</p>
@@ -812,7 +812,7 @@ To make positioning multiple objects easier, it is probably a good idea to switc
 
 {{if interactive
 
-```{lang: "text/html", test: no}
+```{lang: "html", test: no}
 <style>body { min-height: 200px }</style>
 <img src="img/cat.png" id="cat" style="position: absolute">
 <img src="img/hat.png" id="hat" style="position: absolute">
 
@@ -28,7 +28,7 @@ Of course, it has to remember to look at the queue, and to do it often, because
 
 A better mechanism is for the system to actively notify our code when an event occurs. Browsers do this by allowing us to register functions as _handlers_ for specific events.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <p>Click this document to activate the handler.</p>
 <script>
   window.addEventListener("click", () => {
@@ -47,7 +47,7 @@ The `window` binding refers to a built-in object provided by the browser. It rep
 
 Each browser event handler is registered in a context. In the previous example we called `addEventListener` on the `window` object to register a handler for the whole window. Such a method can also be found on DOM elements and some other types of objects. Event listeners are called only when the event happens in the context of the object they are registered on.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <button>Click me</button>
 <p>No handler here.</p>
 <script>
@@ -72,7 +72,7 @@ But a node can have only one `onclick` attribute, so you can register only one h
 
 The `removeEventListener` method, called with arguments similar to `addEventListener`, removes a handler.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <button>Act-once button</button>
 <script>
   let button = document.querySelector("button");
@@ -94,7 +94,7 @@ The function given to `removeEventListener` has to be the same function value th
 
 Though we have ignored it so far, event handler functions are passed an argument: the _((event object))_. This object holds additional information about the event. For example, if we want to know _which_ ((mouse button)) was pressed, we can look at the event object's `button` property.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <button>Click me any way you want</button>
 <script>
   let button = document.querySelector("button");
@@ -136,7 +136,7 @@ At any point, an event handler can call the `stopPropagation` method on the even
 
 The following example registers `"mousedown"` handlers on both a button and the paragraph around it. When clicked with the right mouse button, the handler for the button calls `stopPropagation`, which will prevent the handler on the paragraph from running. When the button is clicked with another ((mouse button)), both handlers will run.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <p>A paragraph with a <button>button</button>.</p>
 <script>
   let para = document.querySelector("p");
@@ -157,7 +157,7 @@ Most event objects have a `target` property that refers to the node where they o
 
 It is also possible to use the `target` property to cast a wide net for a specific type of event. For example, if you have a node containing a long list of buttons, it may be more convenient to register a single click handler on the outer node and have it use the `target` property to figure out whether a button was clicked, rather than register individual handlers on all of the buttons.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <button>A</button>
 <button>B</button>
 <button>C</button>
@@ -184,7 +184,7 @@ For most types of events, the JavaScript event handlers are called _before_ the
 
 This can be used to implement your own ((keyboard)) shortcuts or ((context menu)). It can also be used to obnoxiously interfere with the behavior that users expect. For example, here is a link that cannot be followed:
 
-```{lang: "text/html"}
+```{lang: "html"}
 <a href="https://developer.mozilla.org/">MDN</a>
 <script>
   let link = document.querySelector("a");
@@ -207,7 +207,7 @@ Depending on the browser, some events can't be intercepted at all. On Chrome, fo
 
 When a key on the keyboard is pressed, your browser fires a `"keydown"` event. When it is released, you get a `"keyup"` event.
 
-```{lang: "text/html", focus: true}
+```{lang: "html", focus: true}
 <p>This page turns violet when you hold the V key.</p>
 <script>
   window.addEventListener("keydown", event => {
@@ -235,7 +235,7 @@ The example looked at the `key` property of the event object to see which key th
 
 Modifier keys such as [shift]{keyname}, [control]{keyname}, [alt]{keyname}, and [meta]{keyname} ([command]{keyname} on Mac) generate key events just like normal keys. But when looking for key combinations, you can also find out whether these keys are held down by looking at the `shiftKey`, `ctrlKey`, `altKey`, and `metaKey` properties of keyboard and mouse events.
 
-```{lang: "text/html", focus: true}
+```{lang: "html", focus: true}
 <p>Press Control-Space to continue.</p>
 <script>
   window.addEventListener("keydown", event => {
@@ -282,7 +282,7 @@ To get precise information about the place where a mouse event happened, you can
 
 The following implements a primitive drawing program. Every time you click the document, it adds a dot under your mouse pointer. See [Chapter ?](paint) for a less primitive drawing program.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <style>
   body {
     height: 200px;
@@ -316,7 +316,7 @@ Every time the mouse pointer moves, a `"mousemove"` event is fired. This event c
 
 As an example, the following program displays a bar and sets up event handlers so that dragging to the left or right on this bar makes it narrower or wider:
 
-```{lang: "text/html", startCode: true}
+```{lang: "html", startCode: true}
 <p>Drag the bar to change its width:</p>
 <div style="background: orange; width: 60px; height: 20px">
 </div>
@@ -382,7 +382,7 @@ Because many touchscreens can detect multiple fingers at the same time, these ev
 
 You could do something like this to show red circles around every touching finger:
 
-```{lang: "text/html"}
+```{lang: "html"}
 <style>
   dot { position: absolute; display: block;
         border: 2px solid red; border-radius: 50px;
@@ -420,7 +420,7 @@ Whenever an element is scrolled, a `"scroll"` event is fired on it. This has var
 
 The following example draws a ((progress bar)) above the document and updates it to fill up as you scroll down:
 
-```{lang: "text/html"}
+```{lang: "html"}
 <style>
   #progress {
     border-bottom: 2px solid blue;
@@ -469,7 +469,7 @@ Unlike the events discussed earlier, these two events do not propagate. A handle
 
 The following example displays help text for the ((text field)) that currently has focus:
 
-```{lang: "text/html"}
+```{lang: "html"}
 <p>Name: <input type="text" data-help="Your full name"></p>
 <p>Age: <input type="text" data-help="Your age in years"></p>
 <p id="help"></p>
@@ -606,7 +606,7 @@ If you do need to do something nontrivial in such a handler, you can use `setTim
 
 In the first example, we want to react when the user has typed something, but we don't want to do it immediately for every input event. When they are ((typing)) quickly, we just want to wait until a pause occurs. Instead of immediately performing an action in the event handler, we set a timeout. We also clear the previous timeout (if any) so that when events occur close together (closer than our timeout delay), the timeout from the previous event will be canceled.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <textarea>Type something here...</textarea>
 <script>
   let textarea = document.querySelector("textarea");
@@ -626,7 +626,7 @@ Giving an undefined value to `clearTimeout` or calling it on a timeout that has
 
 We can use a slightly different pattern if we want to space responses so that they're separated by at least a certain length of ((time)) but want to fire them _during_ a series of events, not just afterward. For example, we might want to respond to `"mousemove"` events by showing the current coordinates of the mouse but only every 250 milliseconds.
 
-```{lang: "text/html"}
+```{lang: "html"}
 <script>
   let scheduled = null;
   window.addEventListener("mousemove", event => {
@@ -672,7 +672,7 @@ When that works, add a feature where, if you blow up the balloon past a certain
 
 {{if interactive
 
-```{test: no, lang: "text/html", focus: yes}
+```{test: no, lang: "html", focus: yes}
 <p>🎈</p>
 
 <script>
@@ -714,7 +714,7 @@ There are various possible approaches here. You can make your solution as simple
 
 {{if interactive
 
-```{lang: "text/html", test: no}
+```{lang: "html", test: no}
 <style>
   .trail { /* className for the trail elements */
     position: absolute;
@@ -764,7 +764,7 @@ When that works, extend it to style the button for the currently selected tab di
 
 {{if interactive
 
-```{lang: "text/html", test: no}
+```{lang: "html", test: no}
 <tab-panel>
   <div data-tabname="one">Tab one</div>
   <div data-tabname="two">Tab two</div>