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


let is block-scoped - it is only accessible within the block (like an if or for statement) where it's defined. 
if (true) {
    let message;
    message = "Hello from inside the block!";
    console.log(message); // This works and logs: "Hello from inside the block!"
}

console.log(message); // This will throw an error: "ReferenceError: message is not defined"

// Also, isn't let easier to read?
// let message = "Hello from inside the block!"


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 lang="en">
<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>


Other 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 node list


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 lang="en">
<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. ask AI
  6. future model: copilot with AI. For example, github copilot [video< 2min],[video 14:30 -- watch from 5 min for example] curser
  7. Resources Beyond (requires more computer science knowledge)
Notes