Finished Chapter 2 which was on Page Building and Event handling

7 years ago · cb6f5f08c1
parent 23da7bdc6f
commit cb6f5f08c1
1 changed files with 49 additions and 0 deletions
--- a/ch2/lifecycle.html
+++ b/ch2/lifecycle.html
@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Web app lifecycle</title>
+    <style media="screen">
+      #first { color: green; }
+      #second { color: red; }
+    </style>
+  </head>
+  <body>
+    <h1>Mysterious Redirect</h1>
+    <ul id="first">
+    </ul>
+    <script type="text/javascript">
+      function addMessage(element, message){
+        let messageElement = document.createElement("li");
+        messageElement.textContent = message;
+        element.appendChild(messageElement);
+      };
+
+      let first = document.getElementById("first");
+      addMessage(first, "Page loading");
+    </script>
+    <ul id="second">
+    </ul>
+    <script type="text/javascript">
+      document.body.addEventListener("mousemove", function(){
+        let second = document.getElementById("second");
+        addMessage(second, "Event: mousemove");
+      });
+
+      document.body.addEventListener("click", function(){
+        let second = document.getElementById("second");
+        addMessage(second, "Event: click");
+      });
+
+    </script>
+    <script type="text/javascript">
+      let headings = document.getElementsByTagName('h1');
+      let heading = headings[0];
+      document.addEventListener('click', function(event){
+          let element = event.target;
+          element.innerHTML = "You clicked me!";
+      });
+
+    </script>
+  </body>
+</html>