Introduction to JavaScript

What is JavaScript?

JavaScript is a programming language widely used to add behavior and logic to websites and web applications. It can react to user actions, update page content, validate data, communicate with servers and build complete browser-based applications.

HTML, CSS and JavaScript together

• HTML — content aur structure.
• CSS — colors, spacing, typography aur layout.
• JavaScript — logic, interactions aur dynamic behavior.

Where does JavaScript run?

JavaScript commonly runs inside web browsers through a JavaScript engine. It can also run outside the browser in environments such as server-side JavaScript runtimes.

In this course, we will first focus on browser JavaScript because it connects directly with HTML, CSS, the DOM and user interactions.

JavaScript engine

A JavaScript engine reads and executes JavaScript code. Modern engines use advanced techniques, including just-in-time compilation, to run code efficiently.

Your first JavaScript program

The easiest first program is to print a message in the browser developer console.

console.log("Hello, JavaScript!");

console.log() displays information in the developer console. Developers use it frequently while learning and debugging.

Open the browser console

Most desktop browsers include Developer Tools. Open DevTools, select the Console tab, type a JavaScript expression and press Enter.

2 + 3

"Broun" + "Stack"

console.log("JavaScript is running");

The console is useful for quick experiments, checking values and reading error messages.

JavaScript inside an HTML page

HTML can contain JavaScript inside a <script> element. For larger projects, JavaScript is usually kept in separate files; we will cover script loading properly in the next chapter.

<button id="helloBtn">Click me</button>
<p id="message">Ready</p>

<script>
  const button = document.querySelector("#helloBtn");
  const message = document.querySelector("#message");

  button.addEventListener("click", () => {
    message.textContent = "JavaScript is working!";
  });
</script>

JavaScript vs browser APIs

The JavaScript language provides syntax, values, functions, objects and other programming features. Browsers also provide APIs such as the DOM, timers, storage and network features that JavaScript code can use.

JavaScript is dynamically typed

JavaScript is dynamically typed, which means a variable is not permanently locked to one data type by a type declaration. We will learn variables and data types in detail in Chapter 3.

let value = 10;
value = "ten";

This flexibility is useful, but it also means developers must understand values and types carefully.

JavaScript is case-sensitive

Uppercase and lowercase letters matter in JavaScript.

let name = "Broun";
let Name = "Stack";

console.log(name);
console.log(Name);

name and Name are two different identifiers.

Comments

Comments are notes for developers and are ignored during normal code execution.

// Single-line comment
console.log("Hello");

/*
  Multi-line comment
*/
console.log("World");

Statements and semicolons

JavaScript programs are made of statements and expressions. Semicolons can terminate many statements. JavaScript has automatic semicolon insertion in some cases, but using a consistent project style avoids confusion.

console.log("One");
console.log("Two");

JavaScript is not Java

JavaScript and Java are different programming languages with different ecosystems and language designs. Their similar names do not make one a version of the other.

Errors are part of learning

When JavaScript cannot parse or execute code, the browser console usually shows an error message. Read the error type, message and line number before changing random code.

console.log("Hello"

This has a missing closing parenthesis, so the console will report a syntax error.

JavaScript and accessibility

JavaScript can improve experiences, but important content and controls should remain understandable and operable. Interactive behavior should support keyboard users, visible focus and meaningful HTML instead of replacing semantic structure unnecessarily.

• Button behavior ke liye real <button> element prefer karo.
• Keyboard interaction ko test karo.
• JavaScript se focus indicators remove mat karo.
• Error/success messages ko sirf animation ya color par depend mat karo.
• Core content ko unnecessary JavaScript failure se completely inaccessible mat banao.

Common beginner mistakes

• JavaScript aur Java ko same language samajhna.
• console.log() output ko webpage output samajhna.
• Case sensitivity ignore karna.
• Quotes, brackets ya parentheses close karna bhoolna.
• Error message read kiye bina random code change karna.
• Har browser feature ko JavaScript language ka built-in part samajhna.
• Advanced code copy karke fundamentals skip karna.

Chapter checklist

• JavaScript ka role explain kar sakte ho?
• HTML, CSS aur JavaScript ka difference clear hai?
• Browser Console open karke code run kar sakte ho?
• console.log() ka purpose samajh aaya?
• Case sensitivity aur comments samajh aaye?
• JavaScript language aur browser APIs ka basic difference clear hai?