Introduction to JavaScript for Interactivity

Why JavaScript

HTML gives a page structure and CSS gives it style, but both are static — they cannot respond to what the user does. JavaScript is a programming language that runs inside the browser and makes a page interactive and dynamic: it can react when the user clicks, show and hide content, check a form, perform calculations, and change the page while it is running, all without reloading it.

Adding JavaScript to a page

Script is placed inside a <script> tag. It can be written directly in the page or kept in a separate .js file linked with <script src="..."></script> — the same "keep it separate" principle as external CSS.

<script>
  alert("Welcome to our website!");
</script>

Variables, data and operators

A variable is a named container that stores a value. In modern JavaScript we declare variables with let (a value that may change) or const (a value that will not change):

let price = 250;         // a number
let name = "Meera";      // a string (text, in quotes)
const gstRate = 0.18;    // a constant
let total = price + price * gstRate;   // arithmetic

JavaScript uses the usual arithmetic operators +, -, *, /, and comparison operators such as == (equal), != (not equal), >, and <.

Functions

A function is a named block of instructions that you can run whenever you need it, so the same code need not be written twice:

function greet(user) {
  return "Hello, " + user + "!";
}
alert(greet("Ravi"));   // shows: Hello, Ravi!

Events and event handling

Interactivity comes from events — things that happen on the page, such as a click, a key press, or the page finishing loading. An event handler is code that runs in response to an event. The simplest way to attach one is with an on-event attribute in the HTML, such as onclick:

<button onclick="showMessage()">Click me</button>

<script>
  function showMessage() {
    alert("You clicked the button!");
  }
</script>

The DOM — changing the page

JavaScript works with the page through the DOM (Document Object Model), which represents every element as an object the script can read and change. A common task is to find an element by its id and change its content:

<p id="msg">Original text</p>
<button onclick="change()">Change</button>

<script>
  function change() {
    document.getElementById("msg").innerHTML = "Text changed!";
  }
</script>

Here document.getElementById("msg") locates the paragraph, and setting its innerHTML replaces its content — the page updates instantly, with no reload.

JavaScript for form validation

Beyond HTML5's built-in checks, JavaScript can validate forms with custom rules and messages. A handler on the form's onsubmit event inspects the values and returns false to stop submission if something is wrong: