JavaScript Kya Hai? + First Script

Free PDF of this lesson — save it, print it, revise offline. The video is the same lesson on the Code Scope YouTube channel.

Introduction

Open the ChaiPoint page from the video. The page looks complete — but click the button and nothing happens. Fill the form and it stays silent. The page is dead, because it has no JavaScript yet. HTML and CSS can build a page and dress it, but only JavaScript can make it answer back.

Think of a web page as three layers. HTML is the skeleton — the structure. CSS is the clothes — colours and style. JavaScript is the living layer — it responds when a user clicks, types, or submits. In this lesson you will run your first script, print your first success with console.log, and make a button answer your click with an alert.

(Roman Urdu: HTML dhancha hai, CSS kapray hain, aur JavaScript woh zinda hissa hai jo click par jawab deta hai.)

Key points

JavaScript makes pages respond: without it, a button click does nothing and a form gives no warning. With it, a page can change colour, count clicks, open a menu, and warn about an empty form field.(Roman Urdu: JavaScript ke baghair page khamosh rehta hai — click ho ya form, koi jawab nahi milta.)
Three layers, three jobs: HTML = structure, CSS = style, JavaScript = behaviour. They work together on every real website.
The browser runs JavaScript: every browser has a JavaScript engine inside it. Chrome's engine is called V8. The engine reads your code and runs it, line by line.
Node.js runs JavaScript outside the browser: the same language can also run on a computer or server with Node.js. That is a later story — for now, the browser is our home.
Link your script file like this: <script src="script.js"></script> — and put it as the last thing before </body>.(Roman Urdu: Script ki line hamesha body ke aakhir mein lagao, taake page pehle ban jaye.)
Why last? The script often looks for page elements. If the script runs before the page exists, it finds nothing and fails. Page first, script second.
console.log() is your first success tool: it prints a message in the browser Console (open it with F12). Users do not see it — it is for you, the developer, to check your code.
alert() answers the user: alert("Hello!") shows a small popup box. Your first click → alert moment is proof that your code is alive.

Code examples

Example 1 — Your first script, linked the right way

<!DOCTYPE html>
<html>
<head>
  <title>ChaiPoint</title>
</head>
<body>
  <h1>Welcome to ChaiPoint</h1>

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

What it does: This is a small page with one heading. The script tag sits just before </body>, so the heading already exists when the browser loads script.js. The file name in src must match your real JavaScript file exactly.

What you will see: the page shows the heading "Welcome to ChaiPoint". Nothing else is visible yet — the magic happens in the next example, inside the Console.

Example 2 — console.log: your first success

console.log("JavaScript is alive!");
console.log(250 + 50);

What it does: Save these two lines as script.js and open the page from Example 1. The first line prints a text message. The second line does real maths first — 250 + 50 becomes 300 — and then prints the result.

What you will see: in the Console (press F12) you see exactly two lines: JavaScript is alive! and then 300. If you see these, your script file is linked correctly and running.

Example 3 — First click: the button answers back

<!DOCTYPE html>
<html>
<head>
  <title>ChaiPoint</title>
</head>
<body>
  <h1>Welcome to ChaiPoint</h1>
  <button id="orderBtn">Order Chai</button>

  <script>
    document.getElementById("orderBtn").onclick = function () {
      alert("Your chai is coming!");
      document.querySelector("h1").textContent = "Order received!";
    };
  </script>
</body>
</html>

What it does: The script finds the button by its id and gives it a job for the click. When you click, two things happen: an alert popup answers back, and the heading's text changes because textContent replaces the text inside the h1. Changing page text like this is called working with the DOM — the full DOM lesson is 3.13; today, just enjoy that it works.

What you will see: you click "Order Chai" and a popup says Your chai is coming! — click OK on the popup, and the heading now reads "Order received!" instead of "Welcome to ChaiPoint".

Quick recap

HTML = skeleton, CSS = clothes, JavaScript = the living layer that responds to the user.
Put <script src="script.js"></script> last, before </body>, so the page exists before the script looks for it.
console.log prints for the developer in the Console; alert pops up a message for the user.

Common mistakes

Script in the head, too early — the script runs before the button exists, so the click does nothing and the Console shows an error. Fix: move the script tag to just before </body>.
Wrong file name in src — src="scripts.js" when the file is really script.js means the browser loads nothing, silently. Fix: copy the file name exactly, letter by letter.
Looking for console.log on the page — console.log never prints on the page itself. Fix: press F12 and open the Console tab to see your messages.

Practice

Make a page with your name in an h1 and a button under it. Link a script.js file the correct way, and use console.log to print your name and your city on two lines. Check the Console.
Add a click to your button: on click, show an alert with a welcome message, and change the h1 text with textContent to a new message of your choice.