JavaScript scope tests

<!DOCTYPE html>
<html>

  <head>

    <link rel="stylesheet" href="style.css">
    
    <script src="script.js"></script>

  </head>

  <body>
    
    <h1>Scope tests</h1>
    <a onClick="Test1(1)">Click here to start test</a><br/><br/>
    Feedback: <div id="divFeedback"></div>
    
  </body>
  
  <script>
  
    function printFeedback(iFeedback) {
      document.getElementById("divFeedback").insertAdjacentHTML("beforeend", iFeedback + "<br/>");
    }
    
    function Test2(iParm) {
        
        printFeedback("In Test2(): iParm: " + iParm);
        printFeedback("In Test2(): globalA: " + globalA); // Test2 has NO access to Test1 scope, so takes main scope's globalA 
        printFeedback("In Test2(): globalB: " + globalB); // Test2 has also access to main scope
        
        // Error: localA is not defined
        // Test2 has also access to main scope
        // printFeedback("In Test2(): Test1's localA: " + localA);
        
        printFeedback("In Test2(): End.");
    }
    
    function Test1(iParm) {
      
      var localA = "I'm a local localA to Test1()";
      
      printFeedback("In Test1(): iParm: " + iParm);
      
      // This one is undefined, unexpectedly!
      // If def var globalA is removed, globalA of main scope is displayed.
      printFeedback("In Test1(): globalA: " + globalA);
      
      printFeedback("In Test1(): globalB: " + globalB);
      
      var globalA = "I'm not a global, but a local in Test1()";
      
      printFeedback("In Test1(): globalA (after var globalA was set): " + globalA);
      
      // Test1_1() will be redefined beneath, so this definition will not be used!
      function Test1_1(iParm) {
        
        printFeedback("In Test1.1(): this version will NOT be used");
        printFeedback("In Test1.1(): iParm: " + iParm);
        printFeedback("In Test1.1(): globalA: " + globalA); // Test1_1 has access to Test1 scope
        printFeedback("In Test1.1(): this.globalA: " + this.globalA); // Test1_1 has access to Test1 scope
        printFeedback("In Test1.1(): document.globalA: " + document.globalA); // document.globalA is undefined
        printFeedback("In Test1.1(): globalB: " + globalB); // Test1_1 has also access to main scope
        
      }
      
      // Test1_1() overrides definition above, so this definition will be used!
      function Test1_1(iParm) {
        
        printFeedback("In Test1.1(): this version will be used");
        printFeedback("In Test1.1(): iParm: " + iParm);
        printFeedback("In Test1.1(): globalA: " + globalA); // Test1_1 has access to Test1 scope
        printFeedback("In Test1.1(): this.globalA: " + this.globalA); // Test1_1 has access to Test1 scope
        printFeedback("In Test1.1(): document.globalA: " + document.globalA); // document.globalA is undefined
        printFeedback("In Test1.1(): globalB: " + globalB); // Test1_1 has also access to main scope
        
      }
      
      Test1_1(2);
      Test2(3);
      
      // Test1_2() will be executed immediately, but before globals are defined and set
      ( function Test1_2(iParm) {
        
        var localA = "I'm a local localA to Test1_2()";
        
        printFeedback("In Test1.2(): this version will be executed immediately");
        printFeedback("In Test1.2(): iParm: " + iParm);
        printFeedback("In Test1.2(): localA: " + localA);
        printFeedback("In Test1.2(): globalA: " + globalA); // Set in Test1_1
        printFeedback("In Test1.2(): this.globalA: " + this.globalA); // scope is main scope for this call
        printFeedback("In Test1.2(): document.globalA: " + document.globalA); // document.globalA is undefined
        printFeedback("In Test1.2(): globalB: " + globalB); // Test1_1 has also access to main scope
        
      }) (4);
      
    }
    
    // Main
    var globalA = "I'm a global A";
    var globalB = "I'm a global B";
    
    Test1("I'm a value parameter");
    
    // Test1_2() will be executed immediately
    ( function Test2(iParm) {
      
      var localA = "I'm a local localA to Test2()";
      
      printFeedback("In Test2(): this version will be executed immediately");
      printFeedback("In Test2(): iParm: " + iParm);
      printFeedback("In Test2(): localA: " + localA);
      printFeedback("In Test2(): globalA: " + globalA); // Now, globalA is set in main scope
      printFeedback("In Test2(): this.globalA: " + this.globalA); // scope is main scope for this call
      printFeedback("In Test2(): document.globalA: " + document.globalA); // document.globalA is undefined
      printFeedback("In Test2(): globalB: " + globalB); // Test1_1 has also access to main scope
      
    }) (4);
    
  </script>

</html>

// Code goes here

/* Styles go here */