Java Script

 1. Introduction

Along with HTML and CSS, JavaScript is a high-level, interpreted programming language that's a fundamental component of the web. JavaScript gives your website its behavior and interactivity, while HTML is used to organize content and CSS to style it.

Whenever you see a button that reacts when you click it, a form that shows validation errors, a slideshow or a drop-down menu, there's a good chance that JavaScript is doing it all behind the scenes.

📌1.1  Why JavaScript is important:

Runs in the browser:

JavaScript is the only programming language that runs natively in all major web browsers (like Chrome, Firefox, Safari, and Edge), which means you don't need any special setup to start using it.

Client-side interactivity:

JavaScript allows websites to react to user actions without reloading the page. For example, when you type in a search box and see suggestions immediately, JavaScript is doing that work.

Full stack possibilities:

With the rise of Node.js, JavaScript can now be used not only on the front-end (in the browser) but also on the back-end (server-side). This means developers can use one language across the entire application.

Huge ecosystem:

JavaScript powers popular libraries like jQuery and frameworks like React, Angular, and Vue, which make building modern web applications fast and easy.

Essential for modern web development:

Whether you’re building a simple portfolio site or a complex web app like Instagram or Gmail, JavaScript is a must-know. It brings the web to life by enabling dynamic content, animations, interactive forms, API calls, and more.

🧩 1.2  What is JavaScript?

📖 Definition in simple terms

JavaScript is a programming language used to build intelligent, dynamic, and interactive websites.

You can think of it like this:

• HTML = bones (structure)
• CSS = fabric (style)
• JavaScript = brain and muscles (functionality + interaction)

Unlike some programming languages ​​that only run on servers or in special environments, JavaScript can run right in your web browser — no installation required.

🌐 1.3  How JavaScript fits into the web (HTML + CSS + JS)

Three fundamental technologies are used in the creation of every webpage:

• Text, images, headings, and buttons are all part of the page's basic structure, which is provided by Hypertext Markup Language, or HTML.
• Layout and style (colors, fonts, spacing, responsiveness) are added by Cascading Style Sheets, or CSS.
• JavaScript - adds behavior and logic (interactions, animations, user controls, data handling).

⚙️ 1.4.  Real-world examples of JavaScript

JavaScript is used everywhere on modern websites. Here are some common real-world use cases:

✅ Interactive buttons

When a button shows a pop-up, changes color, or loads content without reloading the page.

✅ Form validation

Checking that the user has entered a valid email address or filled out required fields before submitting a form.

✅ Image sliders/carousels

Automatically moving banners or slides that users can click on.

✅ Live search suggestions

Suggestions appear instantly as you type in a search box (like Google).

✅ Drop-down menus and modal popups

Navigation menus that expand on hover or buttons that open a popup to login/register.

✅ Games and Animations

JavaScript is used to create a lot of online games and animations, especially with HTML5.

🚀 1.5. Why learn JavaScript?

JavaScript isn't just another programming language - it's the foundation of modern web development and one of the most powerful tools a developer can learn. Here's why:

🌍 JavaScript is everywhere

JavaScript is no longer limited to making buttons clickable or forms interactive. It's now used across the entire development stack, including:

Frontend development

JavaScript powers the user interface of websites and apps through frameworks like React, Angular, and Vue.

Backend development

With Node.js, JavaScript can be used to build fast, scalable server-side applications - meaning you can use the same language on both the front and back end.

Mobile app development

Tools like React Native allow developers to build real mobile apps (for Android and iOS) using JavaScript.

Game development

JavaScript can be used to create simple 2D games directly in the browser with libraries like HTML5 Canvas or Phaser.

Desktop apps

Frameworks like Electron.js let developers create desktop apps using web technologies (for example, Visual Studio Code is built with Electron).

2. JavaScript Basics

🟨 2.1  Variables in JavaScript (var, let, const)

Variables are like containers that store data — such as text, numbers, or results of calculations — so you can use or change them later.

🔹 Syntax:

var name = "Payal";      // old way

let age = 25;            // modern & preferred

const country = "India"; // constant value

✅ Use:

• var – older way, function-scoped (not recommended in modern JS)
   

• let – block-scoped, can be reassigned
   

• const – block-scoped, cannot be changed after assignment

🔢 2.2  Data Types in JavaScript

JavaScript supports different types of data. Common ones include:

🔹 Example:

let name = "Aarav";          // String

let age = 20;                // Number

let isStudent = true;        // Boolean

let address = null;          // Null

let job;                     // Undefined

let person = { name: "Aarav", city: "Delhi" }; // Object

➕ 2.3  Operators in JavaScript

Operators are used to perform operations on values.

🔹 Arithmetic Operators

             +  -  *  /  %  

     Example:  let sum = 5 + 3; // 8

🔹 Assignment Operators

          =  +=  -=  *=  /=  

      Example:  x += 5; // same as x = x + 5

🔹 Comparison Operators

        ==   ===   !=   !==   >   <   >=   <=  

       Example: 5 === "5" → false (checks value and type)

🔹 Logical Operators

        &&  ||  !  

       Example:

                 true && false   // false

                 true || false   // true

                 !true           // false

📝 2.4  Comments in JavaScript

Comments are lines in code that JavaScript ignores. They are useful for explaining what the code does, especially for beginners.

🔹 Single-line Comment:

               // This is a single-line comment

🔹 Multi-line Comment:

            /* 

                This is a 

                  multi-line comment 

            */

3. Control Structures

✅ 3.1. Conditional Statements

          Conditional statements let your program make decisions based on whether something is true or false.

         🔹 if, else if, else

                     let age = 18;

                     if (age < 18) {

                         console.log("You are a minor.");

                      } else if (age === 18) {

                           console.log("You just became an adult!");

                       } else {

                           console.log("You are an adult.");

                       }

if checks the first condition
 

else if checks another condition if the first is false
 

else runs if none of the above conditions are true

🔹 switch statement

Used when you have multiple specific values to check.

let day = "Monday";

switch (day) {

  case "Monday":

    console.log("Start of the work week!");

    break;

  case "Friday":

    console.log("Almost the weekend!");

    break;

  default:

    console.log("Just another day.");

}

switch is cleaner than many if...else if statements when checking against multiple exact values.

🔁 3.2  Loops

Loops are used to repeat a block of code multiple times — either a set number of times or until a condition is false.

🔹 for loop

Best when you know how many times to run the loop.

for (let i = 1; i <= 5; i++) {

  console.log("Count: " + i);

}

🔹 while loop

Runs as long as the condition is true.

let i = 1;

while (i <= 3) {

  console.log("Number: " + i);

  i++;

}

🔹 do...while loop

Similar to while, but runs the block at least once, even if the condition is false.

let i = 5;

do {

  console.log("Value is: " + i);

  i++;

} while (i < 5);

🔹 for...of loop

Used to loop through arrays or iterable objects.

let fruits = ["Apple", "Banana", "Mango"];

for (let fruit of fruits) {

  console.log(fruit);

}

4. Functions in JavaScript

In JavaScript, a function is a block of code that performs a particular operation. Think of it like a mini-program inside your code. You write it once, and can reuse it whenever you want – just by calling its name.

For example, if you have code that adds two numbers, instead of repeating that code every time, you can put it inside a function and call it whenever you need it.

🧱 Why use functions?

✅ To avoid repeating code

✅ To organize your program

✅ To make code neat, reusable, and easy to understand

✅ To break down complex problems into smaller manageable parts

🧪 4.1  How to Declare (Create) a Function

In JavaScript, the basic syntax to declare a function is:

function functionName() {

  // code to run

}

Example:

function greet() {

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

}

This function is named greet. It prints a message when called.

▶️ 4.2  How to Call (Run) a Function

To use a function, simply call it by its name followed by parentheses ():

greet();  // Output: Hello, JavaScript!

📥4.3  Functions with Parameters

You can pass values (called parameters) into a function to customize its behavior.

function greetUser(name) {

  console.log("Hello, " + name + "!");

}

greetUser("Payal");  // Output: Hello, Payal!

greetUser("Aarav");  // Output: Hello, Aarav!

Here, name is a parameter, and "Payal" or "Aarav" are arguments passed to the function.

🔄 4.4  Functions with Return Values

A function can also return a result using the return keyword.

function add(a, b) {

  return a + b;

}

let result = add(3, 5);  // result = 8

console.log(result);     // Output: 8

• return gives a value back to wherever the function was called.
   

• After return, the function stops running.
   

⚡4.5  Arrow Functions (ES6+ Modern Syntax)

Arrow functions are a shorter way to write functions.

Traditional:

function multiply(a, b) {

  return a * b;

}

Arrow Function:

const multiply = (a, b) => a * b;

console.log(multiply(4, 3));  // Output: 12

Arrow functions are cleaner, especially for simple one-liners.

5.  Using the Document Object Model (DOM)

 🐖 5.1   What is the DOM?

The structure of an HTML document is represented as a tree of objects by a programming interface known as the Document Object Model, or DOM.

When a page loads the browser converts the HTML into the DOM, allowing JavaScript to access, change, or work with it.

To put it simply, thanks to the DOM JavaScript can communicate with a webpage and make changes in real-time.

🏗️  5.2  Why does the DOM matter?

Without the DOM JavaScript would not be able to interact with or modify a webpage.

The DOM allows you to:

• Examine and modify the HTML or text of a page.

• Dynamically add or remove elements

• Respond to user input, clicks, and other interactions.

• Modify attributes, classes, and styles.

🔍5.3  Basic DOM Methods (Selecting Elements)

To work with the DOM, we first need to select elements on the page.

1. getElementById() – Select by ID:

html

<p id="demo">Hello</p>

javascript

let element = document.getElementById("demo");

console.log(element.textContent); // Output: Hello

2. querySelector() – Select the first matching element:

let heading = document.querySelector("h1");

3. querySelectorAll() – Select all matching elements:

let items = document.querySelectorAll("li");

✍️5.4   Modifying Content with JavaScript

You can change the text or HTML content of an element easily.

document.getElementById("demo").textContent = "Welcome to JavaScript!";

Or, change the inner HTML:

element.innerHTML = "<strong>Updated Text</strong>";

🎨 5.5   Changing Styles Dynamically

You can also change CSS styles using JavaScript:

element.style.color = "red";

element.style.fontSize = "20px";

🖱️5.6  Handling Events (like clicks)

The DOM allows JavaScript to respond to user actions such as clicks or form submissions.

Example: Button click

html

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

javascript

document.getElementById("myBtn").addEventListener("click", function() {

  alert("Button clicked!");

});

addEventListener() is the standard way to handle user interactions.

6.  What is an Array?

An array is a special variable that can store multiple values ​​in one place. Any kind of value can be used, including strings, numbers, and even other arrays or objects!

✅ Example:

javascript

let fruits = ["Apple", "Banana", "Mango"];

Here:

• fruits is an array.
   

• It contains 3 values (called elements).
   

• Elements are accessed by their index (starting from 0).
   

🔍 Accessing Array Elements:

console.log(fruits[0]); // Apple

console.log(fruits[2]); // Mango

✏️ Modifying Arrays:

fruits[1] = "Orange";         // Change "Banana" to "Orange"

fruits.push("Grapes");        // Add "Grapes" to the end

fruits.pop();                 // Remove the last item

console.log(fruits.length);   // Get number of items

📄 What is an object?

Objects are used to store data as key-value pairs. Each value (property) has a name (key), which helps organize related information.

✅ Example:

let person = {

  name: "Payal",

  age: 25,

  city: "Indore"

};

Here:

• person is an object.
   

• It has three properties: name, age, and city.
   

🔍 Accessing Object Properties:

console.log(person.name);    // Payal

console.log(person["city"]); // Indore

✏️ Modifying Object Values:

person.age = 26;           // Change age

person.country = "India";  // Add new property

🔁 Looping Through Arrays and Objects

🔹 Loop through an Array:

let colors = ["Red", "Green", "Blue"];

for (let color of colors) {

  console.log(color);

}

🔹 Loop through an Object:

for (let key in person) {

  console.log(key + ": " + person[key]);

}

🧠 When to Use What?

 7. Introduction to Events

🔔1.  What is an event in JavaScript?

An event is an action that occurs in the browser — often as a result of user interaction. JavaScript allows you to respond to these events and control what happens next.

🖱️2.  Common Examples of Events

🔗 3.  How to Handle Events in JavaScript

You use something called an event listener to tell JavaScript what to do when an event happens.

✅ Example: Button Click

Html

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

javascript

document.getElementById("myBtn").addEventListener("click", function () {

  alert("Button was clicked!");

});

🔹 What’s happening here:

• The button with id="myBtn" is selected.
   

• addEventListener() listens for a "click" event.
   

• When clicked, it runs the function that shows an alert.
   

🔄 4. More Event Examples

🔹 Mouse Over:

element.addEventListener("mouseover", function () {

  console.log("You hovered over the element!");

});

🔹 Input Change:

<input type="text" id="username" />

javascript

document.getElementById("username").addEventListener("change", function () {

  console.log("Input changed!");

});

🔹 Form Submit:

html

<form id="myForm">

  <input type="text" />

  <button type="submit">Send</button>

</form>

javascript

document.getElementById("myForm").addEventListener("submit", function (e) {

  e.preventDefault(); // Prevents page from refreshing

  console.log("Form submitted!");

});

8.  Basic Error Handling in JavaScript

🔍 1. What is Error Handling?

As a developer, you often encounter errors - mistakes in code, unexpected inputs or failures like a missing file or an API not responding. Error handling in JavaScript helps you catch and manage these problems without crashing your entire program.

⚠️ 2.  Types of Errors

There are three main types of errors:

🔧 3.  Using try...catch

The try...catch statement lets you run code and “catch” any error that might happen.

✅ Basic Syntax:

javascript

try {

  // Code that may cause an error

} catch (error) {

  // Code that runs if there is an error

}

✅ Example:

javascript

try {

  let result = x + 5; // x is not defined

  console.log(result);

} catch (error) {

  console.log("Something went wrong: " + error.message);

}

Output: Something went wrong: x is not defined

Instead of breaking the entire script, the error is caught and handled.

🔁 4. Optional: finally Block

You can add a finally block that will always run — whether there was an error or not.

javascript

try {

  let num = 10 / 0;

} catch (error) {

  console.log("Error caught!");

} finally {

  console.log("Cleanup or final message.");

}

✅ 5. Custom Errors with throw

You can also manually throw your own errors using throw.

Example:

javascript

function checkAge(age) {

  if (age < 18) {

    throw new Error("You must be at least 18.");

  }

  return "Access granted";

}

try {

  console.log(checkAge(16));

} catch (e) {

  console.log("Custom error: " + e.message);

}

Frequently asked questions (FaQs) related to javascript

1. What is JavaScript?

A programming language called JavaScript is used to create dynamic and interactive web pages. It is capable of doing the following:

• Responding to user actions (such as clicks)

• Updating content without reloading the page

• Validating forms

• Creating animations and much more

Along with HTML and CSS, it works directly in your web browser.

2. What is JavaScript used for?

JavaScript is used for:

• Interactive websites (menus, sliders, popups)

• Form validation (checking inputs before submission)

• Web applications (such as Gmail or Google Maps)

• Games and animations

• Server-side development (with Node.js)

• Mobile apps (using frameworks such as React Native)

3. How to enable JavaScript on Chrome?

Follow these steps:

On desktop:

• Open Chrome

• Go to: chrome://settings/content/javascript

• Turn on "Allowed (recommended)"

On Android (Chrome mobile):

• Open the Chrome app

• Tap the three dots (menu) > Settings

• Go to Site settings > JavaScript

• Turn on JavaScript

4. How to enable JavaScript in your browser?

Each browser has its own steps. Here's a general method:

Google Chrome:

Settings > Privacy and Security > Site settings > JavaScript > Turn on

Mozilla Firefox:

JavaScript is enabled by default. To check, type about:config in the address bar, search for javascript.enabled, and make sure it's set to true.

Microsoft Edge:

Settings > Cookies and site permissions > JavaScript > Turn on

Safari (Mac or iPhone):

See below for iPhone.

5. How to enable JavaScript on iPhone (Safari)?

• Open the Settings app

• Scroll down to Safari

• Tap Advanced

• Turn on JavaScript

6. How to differentiate between Java and JavaScript?