JavaScript Home, Introduction, Where To & Output

This Rishtaara JavaScript course teaches you step by step — from your first console.log to DOM events.

JS HOME — what this course covers

This Rishtaara JavaScript course teaches you step by step — from your first console.log to DOM events.

JavaScript (JS) makes web pages alive. HTML is structure. CSS is style. JavaScript is action — buttons, forms, menus, and updates without reloading the page.

Real-life example: Learning JS is like learning to drive after you know how a car looks (HTML) and is painted (CSS). Now you make the car move.

Basics: syntax, types, operators, loops, functions
Strings, numbers, arrays, objects, dates
Errors, debugging, and clean code habits
DOM and events — connect JS to HTML

Tip: Open your browser console (F12 → Console tab) while reading. Type small code and see results instantly.

Introduction — what is JavaScript?

JavaScript is a programming language that runs in the browser. It can also run on servers with Node.js, but this course starts with browser JS.

Every major website — including Rishtaara — uses JavaScript for login forms, search, sliders, and live updates.

Real-life example: JavaScript is like the remote control for your TV. HTML/CSS built the TV screen. JS is the buttons that change channels and volume.

Runs in Chrome, Firefox, Safari, Edge
No install needed for browser practice
Works with HTML and CSS on the same page

Where To — how to add JavaScript to a page

You can write JS inside a <script> tag in HTML, or in a separate .js file linked with src. Put scripts at the end of <body> or use defer in <head>.

External files are best for real projects — one script.js can power many pages. async loads JS without waiting; defer waits until HTML is parsed.

Real-life example: Inline script is a sticky note on one page. External file is a rule book kept in a drawer — open the same book on any page.

For learning, putting <script> just before </body> is simple and safe. defer in <head> is the modern professional way.

Inline, external, defer, and async

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My JS Page</title>
  <!-- defer: runs after HTML is ready, keeps order -->
  <script src="app.js" defer></script>
</head>
<body>
  <h1 id="title">Hello</h1>

  <!-- Inline script at bottom of body (also fine for learning) -->
  <script>
    console.log("Page loaded!");
  </script>
</body>
</html>

app.js (external file)

// This file is linked from HTML
console.log("Hello from app.js");

Output — showing results

console.log() prints to the browser DevTools console — use this every day while learning. innerHTML changes HTML inside an element.

document.write() and alert() exist but are mostly for demos. alert() blocks the whole page; avoid it on real sites like Rishtaara.

Real-life example: console.log is whispering to yourself in a diary only you see. innerHTML is changing the text on a shop signboard for everyone.

Four ways to output

// 1. Console (best for learning and debugging)
console.log("Welcome to Rishtaara!");

// 2. Change HTML content
document.getElementById("title").innerHTML = "Hello, Rishtaara!";

// 3. document.write — overwrites page if used late (avoid)
// document.write("Old-style output");

// 4. alert — popup box (OK for tiny demos only)
// alert("Hello!");