<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Global Variables</title>
</head>
<body>
  <h2>Global Variables</h2>

  <script>
    
// Using var (traditional approach)
var globalVar = 'I am a global variable';

// Using let and const (modern approach)
let globalLetVar = 'I am a global variable with let';
const globalConstVar = 'I am a constant global variable';

function exampleFunction() {
  // Accessing global variables within a function
  console.log(globalVar);
  console.log(globalLetVar);
  console.log(globalConstVar);

  // Declaring a local variable
  let localVariable = 'I am a local variable';
  console.log(localVariable);
}

// Accessing global variables outside the function
// console.log(globalVar);
// console.log(globalLetVar);
// console.log(globalConstVar);

// Trying to access localVariable will result in an error as it's local to the function.
// console.log(localVariable);
    
  </script>
</body>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.