HTML - Introduction to JavaScript

Learn the basics of JavaScript to make your web pages interactive and dynamic.

1. What is JavaScript?

JavaScript is a programming language that allows you to implement complex features on web pages, such as updating content, controlling multimedia, and creating interactive maps. It is a versatile language used both on the client-side and server-side of applications.

Note: JavaScript is different from Java. Despite the similarity in names, they are distinct programming languages with different uses.

2. Basic Syntax

JavaScript is a case-sensitive language. Here are some key points:

  • Statements end with a semicolon ;.
  • JavaScript code is often embedded within an HTML page using the <script> tag.
  • Comments can be added with // for single-line or /* ... */ for multi-line comments.

Example:

<script>
    // This is a single-line comment
    console.log("Hello, World!");
</script>

Result (check console): "Hello, World!"

3. Variables and Data Types

JavaScript variables can hold data values. Variables are declared with var, let, or const. The main data types include:

  • String: Text values, written within quotes.
  • Number: Numeric values.
  • Boolean: Represents true or false.
  • Object: Collections of data, defined with curly braces {}.
  • Array: Lists of values, defined with square brackets [].

Example:

<script>
    let name = "Alice";
    let age = 30;
    let isStudent = false;
    let person = {firstName: "Alice", lastName: "Smith"};
    let colors = ["red", "green", "blue"];
    console.log(name, age, isStudent, person, colors);
</script>

Result (check console): Displays the values of variables.

4. Functions

Functions are blocks of code designed to perform a specific task. They are defined using the function keyword, followed by a name and parentheses.

Example:

<script>
    function greet(name) {
        return "Hello, " + name + "!";
    }
    console.log(greet("Alice"));
</script>

Result (check console): "Hello, Alice!"

5. Events and Interactivity

JavaScript allows you to add interactivity to your page by responding to events like clicks, key presses, and mouse movements. You can use onclick and other event attributes to handle user interactions.

Example:

<button onclick="displayMessage()">Click Me</button>

<script>
    function displayMessage() {
        alert("Button was clicked!");
    }
</script>

Result: Clicking the button triggers an alert with a message.

6. DOM Manipulation

JavaScript can interact with the HTML Document Object Model (DOM) to dynamically change the content of the page. The DOM allows you to select and modify elements on the page.

Example:

<p id="demo">This is a paragraph.</p>
<button onclick="changeText()">Change Text</button>

<script>
    function changeText() {
        document.getElementById("demo").textContent = "Text has been changed!";
    }
</script>

Result: Clicking the button changes the text of the paragraph.

This is a paragraph.

7. Loops and Iteration

Loops are used to perform repeated tasks. Commonly used loops in JavaScript include for, while, and forEach for arrays.

Example:

<script>
    let colors = ["Red", "Green", "Blue"];
    for (let i = 0; i < colors.length; i++) {
        console.log(colors[i]);
    }
</script>

Result (check console): Logs each color in the array to the console.

8. Arrays and Array Methods

Arrays are lists of data stored in a single variable. JavaScript provides various methods for working with arrays, such as push, pop, shift, map, and filter.

Example:

<script>
    let numbers = [1, 2, 3, 4, 5];
    let doubled = numbers.map(x => x * 2);
    console.log(doubled);
</script>

Result (check console): Logs the array [2, 4, 6, 8, 10] to the console.

9. Conditional Statements

JavaScript allows you to control the flow of code using conditional statements like if, else if, and else.

Example:

<script>
    let age = 20;
    if (age >= 18) {
        console.log("You are an adult.");
    } else {
        console.log("You are a minor.");
    }
</script>

Result (check console): Logs a message based on the age variable.

10. Additional Resources