JavaScript Fundamentals

What is JavaScript?

JavaScript (JS) is a versatile, high-level, interpreted programming language that is one of the core technologies of the World Wide Web. Alongside HTML and CSS, JavaScript provides interactivity and dynamic behavior to web pages.

It's used for:

Where Does JavaScript Live?

JavaScript code can be included in an HTML document in two main ways:

  1. Inline: Directly within HTML tags using event attributes like onclick, onmouseover, etc. (Generally discouraged for larger scripts).
  2. Internal: Within a <script> tag in the <head> or <body> of the HTML document.
  3. External: In a separate .js file, linked to the HTML document using the src attribute of the <script> tag. This is the most recommended approach for organization and reusability.

Example: Internal JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JS Example</title>
</head>
<body>
    <h1>Hello from HTML!</h1>
    <button onclick="changeText()">Click Me</button>
    <p id="myParagraph">This text will change.</p>

    <script>
        function changeText() {
            document.getElementById("myParagraph").innerText = "JavaScript made this happen!";
            alert("Button clicked!");
        }
    </script>
</body>
</html>

Example: External JavaScript

Create a file named script.js with the following content:

// script.js
function changeText() {
    document.getElementById("myParagraph").innerText = "JavaScript made this happen!";
    alert("Button clicked!");
}

Link it in your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JS Example</title>
</head>
<body>
    <h1>Hello from HTML!</h1>
    <button onclick="changeText()">Click Me</button>
    <p id="myParagraph">This text will change.</p>

    <script src="script.js"></script>
</body>
</html>

Basic JavaScript Concepts

Variables

Variables are used to store data. In JavaScript, you can declare variables using var, let, or const.

let message = "Hello, World!";
const year = 2023;
var count = 5; // Older way, 'let' is preferred for mutable variables

console.log(message); // Output: Hello, World!
console.log(year);    // Output: 2023
// year = 2024; // This would cause an error

Data Types

JavaScript has several built-in data types:

Operators

Operators perform operations on variables and values.

Functions

Functions are blocks of reusable code designed to perform a particular task.

function greet(name) {
    return "Hello, " + name + "!";
}

let greeting = greet("Alice");
console.log(greeting); // Output: Hello, Alice!

Interacting with the DOM

The Document Object Model (DOM) is a programming interface for web documents. It represents the page structure as a tree of objects, allowing JavaScript to dynamically change content, style, and structure.

Try this interactive example:

Click the button to see a change!
// This code would go in a script.js file or inside <script> tags
document.getElementById("myButton").addEventListener("click", function() {
    const outputDiv = document.getElementById("outputArea");
    outputDiv.innerText = "The DOM was updated by JavaScript!";
    outputDiv.style.color = "var(--secondary-color)";
    outputDiv.style.borderLeft = "4px solid var(--primary-color)";
    outputDiv.style.fontStyle = "normal";
});

Key DOM Methods:

Next Steps

This is just a brief introduction. To master JavaScript, you should explore topics like: