Go over chapter 18

Make the merge more smooth, replace XMLHttpRequest with fetch,
and modernize some of the text.

Author: marijnh

06_object.md

@@ -664,6 +664,8 @@ console.log(okIterator.next());
 
 {{index "matrix example", "Matrix class", array}}
 
+{{id matrix}}
+
 Let's implement an iterable data structure. We'll build a _matrix_
 class, acting as a two-dimensional array.
 

18_http.md

@@ -0,0 +1,14 @@
+const url = "https://eloquentjavascript.net/author";
+const types = ["text/plain",
+               "text/html",
+               "application/json",
+               "application/rainbows+unicorns"];
+
+async function showTypes() {
+  for (let type of types) {
+    let resp = await fetch(url, {headers: {accept: type}});
+    console.log(`${type}: ${await resp.text()}\n`);
+  }
+}
+
+showTypes();

code/solutions/18_1_content_negotiation.js

@@ -5,11 +5,11 @@
 <pre id="output"></pre>
 
 <script>
-  document.querySelector("#button").addEventListener("click", function() {
-    var code = document.querySelector("#code").value;
-    var outputNode = document.querySelector("#output");
+  document.querySelector("#button").addEventListener("click", () => {
+    let code = document.querySelector("#code").value;
+    let outputNode = document.querySelector("#output");
     try {
-      var result = new Function(code)();
+      let result = new Function(code)();
       outputNode.innerText = String(result);
     } catch (e) {
       outputNode.innerText = "Error: " + e;

code/solutions/18_1_a_javascript_workbench.html renamed to code/solutions/18_2_a_javascript_workbench.html

@@ -5,16 +5,16 @@
 <button id="run">Auto run</button>
 
 <script>
-  var width = 30, height = 15;
+  const width = 30, height = 15;
 
   // I will represent the grid as an array of booleans.
 
-  var gridNode = document.querySelector("#grid");
+  let gridNode = document.querySelector("#grid");
   // This holds the checkboxes that display the grid in the document.
-  var checkboxes = [];
-  for (var y = 0; y < height; y++) {
-    for (var x = 0; x < width; x++) {
-      var box = document.createElement("input");
+  let checkboxes = [];
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      let box = document.createElement("input");
       box.type = "checkbox";
       gridNode.appendChild(box);
       checkboxes.push(box);
@@ -23,15 +23,16 @@
   }
 
   function gridFromCheckboxes() {
-    return checkboxes.map(function(box) { return box.checked; });
+    return checkboxes.map(box => box.checked);
   }
   function checkboxesFromGrid(grid) {
-    return grid.forEach(function(value, i) { checkboxes[i].checked = value; });
+    return grid.forEach((value, i) => checkboxes[i].checked = value);
   }
   function randomGrid() {
-    var result = [];
-    for (var i = 0; i < width * height; i++)
+    let result = [];
+    for (let i = 0; i < width * height; i++) {
       result.push(Math.random() < 0.3);
+    }
     return result;
   }
 
@@ -42,27 +43,29 @@
   // center field.
   function countNeighbors(grid, x, y) {
     var count = 0;
-    for (var y1 = Math.max(0, y - 1); y1 <= Math.min(height - 1, y + 1); y1++) {
-      for (var x1 = Math.max(0, x - 1); x1 <= Math.min(width - 1, x + 1); x1++) {
-        if ((x1 != x || y1 != y) && grid[x1 + y1 * width])
-          count += 1;
+    for (let y1 = Math.max(0, y - 1); y1 <= Math.min(height - 1, y + 1); y1++) {
+      for (let x1 = Math.max(0, x - 1); x1 <= Math.min(width - 1, x + 1); x1++) {
+        if ((x1 != x || y1 != y) && grid[x1 + y1 * width]) {
+          count++;
+        }
       }
     }
     return count;
   }
 
   function nextGeneration(grid) {
-    var newGrid = new Array(width * height);
-    for (var y = 0; y < height; y++) {
-      for (var x = 0; x < width; x++) {
-        var neighbors = countNeighbors(grid, x, y);
-        var offset = x + y * width;
-        if (neighbors < 2 || neighbors > 3)
+    let newGrid = new Array(width * height);
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        let neighbors = countNeighbors(grid, x, y);
+        let offset = x + y * width;
+        if (neighbors < 2 || neighbors > 3) {
           newGrid[offset] = false;
-        else if (neighbors == 2)
+        } else if (neighbors == 2) {
           newGrid[offset] = grid[offset];
-        else
+        } else {
           newGrid[offset] = true;
+        }
       }
     }
     return newGrid;
@@ -74,8 +77,8 @@
 
   document.querySelector("#next").addEventListener("click", turn);
 
-  var running = null;
-  document.querySelector("#run").addEventListener("click", function() {
+  let running = null;
+  document.querySelector("#run").addEventListener("click", () => {
     if (running) {
       clearInterval(running);
       running = null;

code/solutions/18_2_autocompletion.html

@@ -3,23 +3,20 @@
 
 <body style="font-family: arial">
 
-<p>You submitted:</p>
+<p>You submitted...</p>
 
-<dl></dl>
+<pre style="font: inherit"></pre>
 
 <script>
   function dec(str) {
     return decodeURIComponent(str.replace(/\+/g, " "));
   }
 
-  var dl = document.querySelector("dl");
-  var params = document.location.search.slice(1).split("&");
-  for (var i = 0; i < params.length; i++) {
-    var param = params[i].split("=");
-    var name = dec(param[0]), val = dec(param[1]);
-    dl.appendChild(document.createElement("dt")).innerText = name;
-    dl.appendChild(document.createElement("dd")).innerText = val || "(nothing)";
-  }
+  document.querySelector("pre").textContent =
+    document.location.search.slice(1).split("&").map(param => {
+      let [name, value] = param.split("=");
+      return dec(name) + ": " + (dec(value) || "(nothing)");
+    }).join("\n");
 </script>
 
 </body>