Scope of Variables

Variables have what is called a "scope". It indicates the visibility of the variable.
If a variable is created outside a function, it can be seen globally from anywhere in the script. It is called a global variable. Variable j is a global variable. 
  var j;
  
  function myFunc(){
     j = 0;   // this is valid
  }

  j = 1; // this is also valid


If a variable is created as part of a function (either as an argument/parameter or inside a function), or more generally within a code segment indicated by curley brackets { }, the variable can only be seen inside the function or the code segment inbetween the curley brackets{ } and it takes precedent over global variables. These are called local variables. Variable i is a local variable and can be seen (accessed) only from within the function. 

  
  function myFunc(){
     var i;   // variable i can be accessed only within the function 
     i = 0;   
  }

  i = 1; // this is NOT valid


Notes

The Document Object Model

When the browser loads an HTML file, it creates a representation of the page called DOM: Document Object Model. 

<!DOCTYPE html>
<html>
<head>
<title>Document demo</title>
</head>
<body>
<p>
This file loaded:
</p>

<div id="timestamp">
</div>
</body>
</html>



The DOM lets JavaScript communicate with and change a page's HTML. Basic method is to
  1. Search for HTML DOM Element
  2. Do someting 
<script>
  var mytimestamp = document.getElementById("timestamp");    // PART1: Search for DOM

  mytimestamp.innerHTML = Date();                            // PART2: Do stuff
  mytimestamp.style.backgroundColor = "yellow";
</script>


Methods used to search for HTML Elements: 
  document.getElementById();         // returns a single element
  document.getElementsByTagName();   // returns an array 
  document.getElementsByClassName(); // returns an array
  document.querySelector()           // returns a single element
  document.querySelectorAll()        // returns an array


Once you have the HTML DOM Object, it allows you access to CSS, the text inside, and to attributes amongst other things using the dot notation


Example of javascript accessing attributes:
  <img id="myImage" src="smiley.gif">
  ...
  ...
  <script>
  var mysrc = document.getElementById("myImage");
  mysrc.src = "sadface.jpg";
  </script>

  <img id="myImage" src="smiley.gif">
  ...
  ...
  <script>
  document.getElementById("myImage").src = "sadface.jpg";
  </script>






See [HTML DOM@W3schools]

Notes

Review: Lets comment this

    
<!DOCTYPE html>
<html>
<head>
<title> The Title of this HTML Page </title>
<style>
body {
  width: 100%;
  height: 5000px;
}
</style>
<script>
function sliderchange(num){
  //alert(num);
   document.getElementById("mydiv").innerHTML = num;
   document.getElementById("mydiv").style.color = "rgb("+num+", "+num+", "+num+")";

   if(Number(num) > 220){
     document.getElementById("mydiv").style.color = "black";
   }

   // lets turn this into a slider to move an image!
   document.getElementById("colordiv").style.left = num + "px";

}

function resetslider(){
  var sl = document.getElementById("slider");
  sl.value = "0";
}
</script>

</head>

<body>
<br><br><br>
<input type="range" min="1" max="255" value="128" onchange="sliderchange(this.value);" style="width:50%;" id="slider" >
<br>
<button type="button" onclick="resetslider();">reset</button>


<div id="mydiv" style="font-size:20px;">
</div>

<!-- this could be an image -->
<div id="colordiv" style="width:20px; height: 20px; background-color:blue; position:absolute; top:200px; left:128px;"></div>


</body>
</html>
Notes

Debugging Javascript

  1. Divide and conquer.
    • Never write long code without testing. Write in inncrements. Test inbetween


  2. Is my grammar correct?
    • Close all parenthesis and brackets when you make them
    • No errors in the developer tools javascript console?


  3. Is the code/area running?
    • Place alert() or console.log() strategically. If they show up, that part of the code is running


  4. Are my assumptions correct?
    • Use arguments to alert() or console.log() strategically.
    • If you are testing (n < 10), do you know what the value of n? -> alert(n);


  5. Resources Beyond (requires more computer science knowledge)
Notes