up

2-ui/1-document/02-dom-nodes/article.md

@@ -31,7 +31,7 @@ The DOM represents HTML as a tree structure of tags. Here's how it looks:
 <div class="domtree"></div>
 
 <script>
-var node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n    "},{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"About elks"}]},{"name":"#text","nodeType":3,"content":"\n  "}]},{"name":"#text","nodeType":3,"content":"\n  "},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n  The truth about elks."}]}]}
+let node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n    "},{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"About elks"}]},{"name":"#text","nodeType":3,"content":"\n  "}]},{"name":"#text","nodeType":3,"content":"\n  "},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n  The truth about elks."}]}]}
 
 drawHtmlTree(node, 'div.domtree', 690, 320);
 </script>
@@ -69,7 +69,7 @@ Here are no space-only text nodes:
 <div class="domtree"></div>
 
 <script>
-var node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"About elks"}]}]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"The truth about elks."}]}]}
+let node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"About elks"}]}]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"The truth about elks."}]}]}
 
 drawHtmlTree(node, 'div.domtree', 690, 210);
 </script>
@@ -95,7 +95,7 @@ As an example, if the HTML file is a single word `"Hello"`, the browser will wra
 <div class="domtree"></div>
 
 <script>
-var node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Hello"}]}]}
+let node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Hello"}]}]}
 
 drawHtmlTree(node, 'div.domtree', 690, 150);
 </script>
@@ -116,7 +116,7 @@ Such an "invalid" document:
 <div class="domtree"></div>
 
 <script>
-var node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"P","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Hello"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Mom"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"and"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Dad"}]}]}]}
+let node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"P","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Hello"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Mom"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"and"}]},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"Dad"}]}]}]}
 
 drawHtmlTree(node, 'div.domtree', 690, 360);
 </script>
@@ -134,7 +134,7 @@ DOM-structure will be:
 <div class="domtree"></div>
 
 <script>
-var node = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType":1,"children":[{"name":"TR","nodeType":1,"children":[{"name":"TD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"1"}]}]}]}]};
+let node = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType":1,"children":[{"name":"TR","nodeType":1,"children":[{"name":"TD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"1"}]}]}]}]};
 
 drawHtmlTree(node,  'div.domtree', 600, 200);
 </script>
@@ -165,7 +165,7 @@ Let's add more tags and a comment to the page:
 <div class="domtree"></div>
 
 <script>
-var node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n  The truth about elks.\n    "},{"name":"OL","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n      "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"An elk is a smart"}]},{"name":"#text","nodeType":3,"content":"\n      "},{"name":"#comment","nodeType":8,"content":"comment"},{"name":"#text","nodeType":3,"content":"\n      "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"...and cunning animal!"}]},{"name":"#text","nodeType":3,"content":"\n    "}]},{"name":"#text","nodeType":3,"content":"\n  \n"}]}]};
+let node = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n  The truth about elks.\n    "},{"name":"OL","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n      "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"An elk is a smart"}]},{"name":"#text","nodeType":3,"content":"\n      "},{"name":"#comment","nodeType":8,"content":"comment"},{"name":"#text","nodeType":3,"content":"\n      "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"...and cunning animal!"}]},{"name":"#text","nodeType":3,"content":"\n    "}]},{"name":"#text","nodeType":3,"content":"\n  \n"}]}]};
 
 drawHtmlTree(node, 'div.domtree', 690, 500);
 </script>

2-ui/1-document/03-dom-navigation/article.md

@@ -5,7 +5,7 @@ libs:
 ---
 
 
-# DOM Navigation
+# Walking the DOM
 
 DOM allows to do anything with elements and their contents, but first we need to reach the corresponding DOM object, get it into a variable, and then we are able to modify it.
 

2-ui/1-document/04-searching-elements-dom/article.md

@@ -1,4 +1,4 @@
-# Searching with getElement*, querySelector* and other methods
+# Searching: getElement* and querySelector*
 
 DOM navigation properties are great when elements are close to each other. What if they are not? How to get an arbitrary element of the page?
 

2-ui/1-document/06-dom-attributes-and-properties/article.md

@@ -1,4 +1,4 @@
-# DOM: attributes and properties
+# Attributes and properties
 
 When the browser loads the page, it "reads" (another word: "parses") HTML text and generates DOM objects from it. For element nodes most standard HTML attributes automatically become properties of DOM objects.
 

2-ui/1-document/07-modifying-document/article.md

@@ -1,4 +1,4 @@
-# Modifying DOM
+# Modifying the document
 
 DOM modifications is the key to create "live" pages.
 

2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/ball-half/index.html

@@ -26,8 +26,8 @@
 
 
   <script>
-    var ball = document.getElementById('ball')
-    var field = document.getElementById('field')
+    let ball = document.getElementById('ball')
+    let field = document.getElementById('field')
 
     // ball.offsetWidth=0 before image loaded!
     // to fix: set width

2-ui/1-document/10-size-and-scroll-window/article.md

@@ -1,4 +1,4 @@
-# Window sizes and scroll
+# Window sizes and scrolling
 
 How to find out the width of the browser window? How to get the full height of the document, including the scrolled out part? How to scroll the page using JavaScript?
 

2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html

@@ -33,7 +33,7 @@
 
     function showNote(anchor, position, html) {
 
-      var note = document.createElement('div');
+      let note = document.createElement('div');
       note.className = "note";
       note.innerHTML = html;
       document.body.append(note);

2-ui/2-events/02-bubbling-and-capturing/both.view/script.js

@@ -1,6 +1,6 @@
-var elems = document.querySelectorAll('form,div,p');
+let elems = document.querySelectorAll('form,div,p');
 
-for (var i = 0; i < elems.length; i++) {
+for (let i = 0; i < elems.length; i++) {
   elems[i].addEventListener("click", highlightThis, true);
   elems[i].addEventListener("click", highlightThis, false);
 }

2-ui/2-events/02-bubbling-and-capturing/capture.view/script.js

@@ -1,6 +1,6 @@
-var elems = document.querySelectorAll('form,div,p');
+let elems = document.querySelectorAll('form,div,p');
 
-for (var i = 0; i < elems.length; i++) {
+for (let i = 0; i < elems.length; i++) {
   elems[i].addEventListener("click", highlightThis, true);
 }
 

2-ui/2-events/03-event-delegation/article.md

@@ -45,7 +45,7 @@ let selectedTd;
 
 *!*
 table.onclick = function(event) {
-  var target = event.target; // where was the click?
+  let target = event.target; // where was the click?
 
   if (target.tagName != 'TD') return; // not on TD? Then we're not interested
 

2-ui/2-events/03-event-delegation/bagua.view/index.html

@@ -64,12 +64,12 @@
   </table>
 
   <script>
-    var table = document.getElementById('bagua-table');
+    let table = document.getElementById('bagua-table');
 
-    var selectedTd;
+    let selectedTd;
 
     table.onclick = function(event) {
-      var target = event.target;
+      let target = event.target;
 
       while (target != this) {
         if (target.tagName == 'TD') {

2-ui/2-events/04-default-browser-action/article.md

@@ -1,4 +1,4 @@
-# Browser actions
+# Browser default actions
 
 Many events automatically lead to browser actions.