Global variables in HTML are variables that can be accessed and modified across different parts of an HTML document, such as within scripts, functions, or even across multiple HTML files. These variables are particularly useful for storing and managing data that needs to be shared or accessed globally within a web application. Let's delve into global variables in HTML in more detail with examples.
Global Variables in JavaScript
In the context of HTML, global variables are typically associated with JavaScript since JavaScript is the scripting language commonly used to add interactivity and dynamic behavior to web pages. Global variables in JavaScript are declared outside of any function, making them accessible from anywhere within the script.
Example 1: Declaring and Using Global Variables
<!DOCTYPE html>
<html>
<head>
<title>Global Variables Example</title>
</head>
<body>
<script>
// Declaring global variables
var globalVar1 = 'I am a global variable';
let globalVar2 = 'I am another global variable';
const PI = 3.14; // Global constant
// Accessing global variables
console.log(globalVar1); // Output: I am a global variable
console.log(globalVar2); // Output: I am another global variable
console.log(PI); // Output: 3.14
// Modifying global variables
globalVar1 = 'Updated global variable';
console.log(globalVar1); // Output: Updated global variable
</script>
</body>
</html>
In this example, globalVar1, globalVar2, and PI are global variables accessible and modifiable within the
<script> tag.
Global Variables Across HTML Files
Global variables can also be used to share data between different HTML files within the same web application. One common approach is to use JavaScript to manage these global variables across multiple HTML pages.
Example 2: Global Variables Across HTML Files
File: index.html
<!DOCTYPE html>
<html>
<head>
<title>Global Variables Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<button onclick="goToPage2()">Go to Page 2</button>
<script>
// Global variable to store user information
var username = '';
function goToPage2() {
username = prompt('Enter your username:');
window.location.href = 'page2.html';
}
</script>
</body>
</html>
File: page2.html
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h2>Hello <span id="user"></span>!</h2>
<script>
// Accessing global variable from index.html
document.getElementById('user').innerText = username;
</script>
</body>
</html>
In this example, the username global variable is declared and assigned a value in index.html. When the user navigates to page2.html, the username variable is accessed and displayed on the page.
Global Variables in HTML and CSS
While HTML and CSS do not have native support for global variables like JavaScript, CSS preprocessors like Sass and Less allow for the use of global variables within CSS files.
Example 3: Using Global Variables in Sass
File: styles.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
body {
background-color: $primary-color;
color: $secondary-color;
}
h1 {
font-size: 24px;
margin-bottom: 10px;
}
In this Sass example, $primary-color and $secondary-color are global variables that can be used throughout the stylesheet to maintain consistency in styling.
Best Practices for Global Variables in HTML
- Use Descriptive Names: Choose meaningful names for global variables to improve code readability and understanding.
- Avoid Overuse: Limit the number of global variables to avoid namespace pollution and potential conflicts.
- Encapsulate Data: Whenever possible, encapsulate related global variables into objects or modules to organize and manage data more effectively.
- Avoid Using the var Keyword: Prefer using let or const for declaring global variables to adhere to modern JavaScript best practices and avoid hoisting issues.
- Avoid Inline Scripts: While global variables can be defined within inline <script> tags, it's recommended to separate JavaScript into external files for better maintainability.
- Avoid Conflicts: Be cautious of potential conflicts with global variables from external libraries or frameworks.
Practice Excercise Practice now