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>