JavaScript (JS) is a programming language that allows you to make websites interactive. While HTML creates structure and CSS handles styling, JavaScript adds behavior:

Responding to user clicks
Changing content dynamically
Animating elements
Validating forms
Communicating with servers

Think of JavaScript as the “action” behind your webpage.

1️⃣ How JavaScript Works

JavaScript runs in the browser (client-side) and can also run on servers using environments like Node.js.

Browsers have a JavaScript engine that reads your JS code and executes it.

2️⃣ Adding JavaScript to a Web Page

There are three ways:

Inline JavaScript

Directly inside an HTML element:

<button onclick="alert('Hello World!')">Click Me</button>

onclick is an event attribute
alert() shows a popup message

Internal JavaScript

Inside a <script> tag in the HTML <head> or <body>:

<script>
  console.log("Hello from JavaScript!");
</script>

console.log() prints messages to the browser console (useful for debugging)

External JavaScript

In a separate .js file linked to HTML:

script.js:

alert("Hello from external JS file!");

index.html:

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

3️⃣ JavaScript Basics

Variables

Variables store data:

let name = "Alice";   // string
let age = 25;         // number
const pi = 3.1416;    // constant value

let → can be changed later
const → cannot be changed
var → older way (still works but avoid using now)

Data Types

Common JavaScript data types:

Operators

Perform actions on values:

let x = 10;
let y = 5;

console.log(x + y); // 15
console.log(x - y); // 5
console.log(x * y); // 50
console.log(x / y); // 2
console.log(x % y); // 0 (modulus)

Functions

Functions are reusable blocks of code:

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

greet("Alice");

name is a parameter
"Alice" is the argument

Events

JavaScript responds to user actions, like clicks, typing, or mouse movement.

Example:

<button id="myBtn">Click Me</button>

<script>
  let button = document.getElementById("myBtn");
  button.addEventListener("click", function() {
    alert("Button clicked!");
  });
</script>

getElementById() selects the button
addEventListener() listens for a click

Changing HTML Content

You can update the page dynamically:

<p id="demo">Original Text</p>
<button onclick="changeText()">Click Me</button>

<script>
  function changeText() {
    document.getElementById("demo").innerHTML = "Text Changed!";
  }
</script>

4️⃣ Console and Debugging

console.log() → prints messages
console.error() → prints errors
console.warn() → prints warnings

Check the browser console (F12 or Ctrl+Shift+I) to see outputs.

Compilation of Entire Code

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Intro Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    button {
      padding: 10px 20px;
      background-color: teal;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-top: 10px;
    }
    p {
      font-size: 18px;
      color: darkblue;
    }
  </style>
</head>
<body>

  <h1>JavaScript Basics</h1>

  <p id="greeting">Hello, User!</p>
  <button onclick="changeGreeting()">Click to Change Greeting</button>

  <script>
    function changeGreeting() {
      let name = prompt("Enter your name:");
      if (name) {
        document.getElementById("greeting").innerHTML = "Hello, " + name + "!";
      } else {
        alert("You didn't enter a name.");
      }
    }

    console.log("JavaScript is working!");
  </script>

</body>
</html>

Introduction

Compilation of Entire Code

Test Your Understanding

All Courses

Java Script