Global variables

Global Variables

Global variables in JavaScript are those declared outside of any function or block scope. They are accessible from anywhere within the script, including inside functions and blocks. *Variables declared without the var, let, or const keywords (prior to ES6) inside a function automatically become global variables. *(TBD)

Key Characteristics of Global Variables:

Scope: Accessible throughout the entire script, including inside functions and blocks.

Automatic Global Variables: If a variable is declared inside a function without var, let, or const, it automatically becomes a global variable (a common source of bugs).

Local Variables

Local variables are defined within functions in JavaScript. They are confined to the scope of the function that defines them and cannot be accessed from outside. Attempting to access local variables outside their defining function results in an error.

Key Characteristics of Local Variables:

Scope: Limited to the function or block in which they are declared.

Function-Specific: Each function can have its own local variables, even if they share the same name.

How to use variables

The scope of a variable or function determines what code has access to it.

Variables that are created inside a function are local variables, and local variables can only be referred to by the code within the function.

Variables created outside of functions are global variables, and the code in all functions has access to all global variables.

If you forget to code the var keyword in a variable declaration, the JavaScript engine assumes that the variable is global. This can cause debugging problems.

In general, it's better to pass local variables from one function to another as parameters than it is to use global variables. That will make your code easier to understand with less chance of errors.

let petName = 'Rocky' // Global variable
myFunction()

function myFunction() {
    fruit = 'apple'; // Considered global
    console.log(typeof petName +
        '- ' +
        'My pet name is ' +
        petName)
}

console.log(
    typeof petName +
    '- ' +
    'My pet name is ' +
    petName +
    'Fruit name is ' +
    fruit)

Refference:https://www.geeksforgeeks.org/global-and-local-variables-in-javascript/

What is the DOM?

The DOM defines a standard for accessing documents:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

The W3C DOM standard is separated into 3 different parts:(TDB)

Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents

What is the HTML DOM?

The HTML DOM is a standard object model and programming interface for HTML. It defines:

The HTML elements as objects
The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML elements

In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

getElementById()

The getElementById() method returns an element with a specified value.

The getElementById() method returns null if the element does not exist.

The getElementById() method is one of the most common methods in the HTML DOM. It is used almost every time you want to read or edit an HTML element