JavaScript is a powerful scripting language that runs in the browser, allowing us to manipulate the content and behavior of the web page. When likening it to a house, JavaScript functions as the house's functionality, encompassing elements like electrical systems, plumbing, home automation, and central heating - essentially, anything that provides functionality.

Here's how we can add JavaScript to the HTML document:

Inline JavaScript

We can include JavaScript directly within the HTML document using the <script> tag. This method is useful for adding quick, one-off scripts.

Example:

Please click the Click Me button below.

External JavaScript

For larger or reusable scripts, it's better to place your JavaScript in a separate file and link it to the HTML page.

Example

Please make sure to review all three files in the example provided.

JavaScript Basics

JavaScript allows us to add interactivity and dynamic behavior to the web pages. Here are some basic concepts:

Variables

Used to store data.

let age = 30;
const name = "Peter";

Functions

Reusable blocks of code.

function greet() {
  alert('Hello, World!');
}

DOM Manipulation

Allows JavaScript to change what appears on the page.

document.getElementById('myElement').innerHTML = 'New Content';

Conditional Statements

Run different code based on conditions.

if (age >= 21) {
  alert('You are an adult.');
} else {
  alert('You are a minor.');
}

Video Tutorial