Home Career Courses Tutorial web dev JavaScript Tutorial in Hinglish: Complete Guide for Beginners to DOM & APIs

JavaScript Tutorial in Hinglish: Complete Guide for Beginners to DOM & APIs

 


JavaScript Tutorial: Web Apps Ka Brain Aur Muscle

Introduction

JavaScript (aksar 'JS' kaha jaata hai) ek programming language hai jo web pages ko interactive banati hai. HTML content deta hai, CSS styling, aur JS us content ko 'live' karta hai – buttons par click hone par kuch karna, forms validate karna, dynamic content load karna, animation banana, server se data fetch karna, etc.

Note: ies basic tutorial ko fast learning ke liye banaya gaya hai jinme aapko important topics dikhne ko milenge jo development me jatatar use hote hai JavaScript ek bahut bara language hai jinhe aap baadme cover karsakte hai apne requirement ke hisab se ager aap ies tutorial ko ache learn practice karenge to bhi aap aage bar sakte hai JS ke advance topics phir framworks bhi sikh sakte.  

  • Kya hai: Ek scripting language jo web browsers mein run hoti hai.
  • Kyon zaroori:
    • Interactivity: User actions par respond karna.
    • Dynamic Content: Webpage ko bina reload kiye content change karna.
    • Client-Side Validation: Forms submit hone se pehle user input check karna.
    • API Interaction: Servers se data lena aur send karna.
    • Full-stack development: Node.js ke saath JS server-side par bhi use hoti hai (jo hum aage dekhenge).

JavaScript Ko HTML Se Kaise Link Karein?

Ye HTML tutorial mein bhi cover kiya tha, par yahan phir se dekhte hain kyunki ye JS ka pehla step hai:

  1. External JavaScript (Best Practice):
    • Most common tareeka. Alag .js file banate hain aur HTML mein link karte hain.
    • HTML mein code: <script src="script.js"></script>
    • Placement: <body> tag ke closing </body> tag se just pehle rakhna best practice hai. Isse HTML content pehle load ho jaata hai, aur fir JS us content par actions perform kar sakta hai.
  2. Internal JavaScript:
    • HTML file ke <script> tags ke andar JS code likhna.
    • HTML mein code:

HTML

<script>

    // Your JS code here

    alert("Hello from JS!");

</script>

    • Chhote scripts ke liye theek, par large projects ke liye avoid karein.

JavaScript Basics: Building Blocks

1. Variables: Data Store Karna

Variables containers hote hain jahan aap data store karte ho. JS mein teen keywords hain variables declare karne ke liye: var, let, aur const.

  • var: Purana tareeka. let aur const ke aane ke baad iska use kam ho gaya hai. Isme hoisting aur scope issues ho sakte hain.
  • let: Jab aapko variable ki value baad mein badalni ho.
    • Example:

JavaScript

let userName = "Alice";

userName = "Bob"; // Value change kar sakte hain

console.log(userName); // Output: Bob

  • const: Jab aapko variable ki value fix rakhni ho (constant). Iski value declare karte hi set ho jaati hai aur baad mein change nahi ho sakti. Arrays aur Objects ke case mein content change ho sakta hai, par variable ko reassign nahi kar sakte.
    • Example:

JavaScript

const PI = 3.14;

// PI = 3.14159; // Error dega! Reassign nahi kar sakte

const user = { name: "Charlie", age: 25 };

user.age = 26; // Object ke andar ki value change ho sakti hai

console.log(user); // Output: { name: "Charlie", age: 26 }

  • Recommendation: Mostly const use karein. Agar value badalni ho, toh let use karein. var ko avoid karein.

2. Data Types: Data Ke Prakar

JS mein kai tarah ke data types hote hain. Basic ones jo aksar use hote hain:

  • string: Text values. Single ('') ya double ("") quotes mein likha jaata hai.
    • let name = "John Doe";
  • number: Numbers (integers ya decimals).
    • let age = 30;
    • let price = 99.99;
  • boolean: True ya False value. Logic ke liye use hota hai.
    • let isAdmin = true;
  • null: Intentional absence of any object value. Matlab "empty value".
    • let userSelection = null;
  • undefined: Jab variable declare kiya ho par usko value assign na ki ho.
    • let email; // email is undefined
  • object: Collections of key-value pairs (more below).
    • let person = { firstName: "Jane", lastName: "Doe" };
  • array: Ordered collections of values (more below).
    • let colors = ["red", "green", "blue"];

3. Operators: Calculations Aur Comparisons

  • Arithmetic Operators: +, -, *, /, % (modulo - remainder), ** (exponentiation).
    • let result = 10 + 5; // 15
  • Comparison Operators: == (loose equality), === (strict equality - value aur type dono check karta hai, recommended), !=, !==, >, <, >=, <=.
    • console.log(5 == '5'); // true (loose)
    • console.log(5 === '5'); // false (strict)
  • Logical Operators: && (AND), || (OR), ! (NOT).
    • if (age > 18 && hasLicense) { ... }
    • if (isGuest || isAdmin) { ... }

4. Control Flow: Logic Kaise Chalti Hai

  • if...else if...else: Conditions ke base par code execute karna.
    • Example:

JavaScript

let score = 75;

if (score >= 90) {

    console.log("Grade A");

} else if (score >= 70) {

    console.log("Grade B");

} else {

    console.log("Grade C");

}

  • switch: Multiple conditions ke liye alternative.
    • Example:

JavaScript

let day = "Monday";

switch (day) {

    case "Monday":

        console.log("Start of week");

        break;

    case "Friday":

        console.log("Weekend approaching");

        break;

    default:

        console.log("Normal day");

}

  • Loops (for, while): Code ko baar-baar run karna.
    • for loop (jab iterations count pata ho):

JavaScript

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

    console.log(i); // 0, 1, 2, 3, 4

}

    • while loop (jab condition true ho tab tak):

JavaScript

let count = 0;

while (count < 3) {

    console.log(count); // 0, 1, 2

    count++;

}

5. Functions: Reusable Code Blocks

Functions code ke blocks hote hain jinhein aap baar-baar call kar sakte ho. Ye code reusability badhate hain.

  • Function Declaration: Normal tareeka.
    • Example:

JavaScript

function greet(name) {

    return "Hello, " + name + "!";

}

let message = greet("Alice");

console.log(message); // Output: Hello, Alice!

  • Function Expression: Function ko ek variable mein assign karna.
    • Example:

JavaScript

const add = function(a, b) {

    return a + b;

};

console.log(add(5, 3)); // Output: 8

  • Arrow Functions (ES6+): Modern aur concise tareeka functions likhne ka. Jab function single expression ka ho toh aur bhi chhota ho jaata hai. Ye bahut common hai modern JS mein.
    • Example:

JavaScript

const multiply = (a, b) => a * b; // Single line, no return keyword needed

console.log(multiply(4, 2)); // Output: 8

 

const sayHello = () => {

    console.log("Hello there!"); // Multiple lines, curly braces and return if needed

};

sayHello();

6. Arrays: List Of Items

Arrays ordered lists hote hain values ke.

  • Declaration:
    • const fruits = ["Apple", "Banana", "Cherry"];
  • Accessing elements: Index se (0 se start hota hai).
    • console.log(fruits[0]); // Output: Apple
  • Common Methods (Important for web apps):
    • push(): End mein item add karna.
    • pop(): End se item remove karna.
    • forEach(): Array ke har item par loop karna.

JavaScript

fruits.forEach(function(fruit) {

    console.log(fruit);

});

// Output: Apple, Banana, Cherry (each on new line)

    • map(): Har item par operation karke naya array banana. Bahut zaroori hai React/UI mein.

JavaScript

const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits); // Output: ["APPLE", "BANANA", "CHERRY"]

    • filter(): Condition ke base par items ko filter karke naya array banana.

JavaScript

const longFruits = fruits.filter(fruit => fruit.length > 5);

console.log(longFruits); // Output: ["Banana", "Cherry"]

    • find(): Condition match karne wala pehla item dhoondna.
    • includes(): Check karna ki item array mein hai ya nahi (true/false).

7. Objects: Key-Value Pairs

Objects collections hote hain properties (key-value pairs) ke. Real-world entities (like a person, a product) ko represent karne ke liye use hote hain.

  • Declaration:
    • const person = { firstName: "Jane", lastName: "Doe", age: 30 };
  • Accessing Properties:
    • Dot notation: person.firstName (Output: "Jane")
    • Bracket notation: person['lastName'] (Output: "Doe")
  • Adding/Updating Properties:
    • person.city = "New York";
    • person.age = 31;
  • Methods in Objects: Functions jo object ke andar define hote hain.
    • JavaScript
    •   const dog = {
    •       name: "Buddy",
    •       bark: function() { // Or bark: () => {} (arrow function)
    •           console.log(this.name + " says Woof!");
    •       }
    •   };
    •   dog.bark(); // Output: Buddy says Woof!

DOM Manipulation: HTML Ko Control Karna (SUPER IMPORTANT!)

DOM (Document Object Model) ek tree-like structure hai jo aapki HTML page ko represent karta hai. JavaScript is DOM ko use karke HTML elements ko read, modify, aur delete kar sakta hai. Yahi woh jagah hai jahan JS aapke webpage ko interactive banata hai.

  • Elements Select Karna:
    • document.getElementById('myId'): ID se ek single element select karna.
    • document.querySelector('.myClass'): CSS selector se pehla matching element select karna.
    • document.querySelectorAll('p'): CSS selector se saare matching elements select karna (returns a NodeList).
    • Example:

JavaScript

const myHeading = document.getElementById('main-title');

const firstParagraph = document.querySelector('.intro-text');

const allButtons = document.querySelectorAll('button');

  • Content Change Karna:
    • element.textContent: Text content change karna.
    • element.innerHTML: HTML content change karna (HTML tags bhi add kar sakte hain).
    • Example:

HTML

<h1 id="main-title">Old Title</h1>

<p class="intro-text">Old paragraph.</p>

JavaScript

myHeading.textContent = "New Title!";

firstParagraph.innerHTML = "<strong>New bold paragraph!</strong>";

  • Attributes Change Karna:
    • element.setAttribute('attributeName', 'newValue')
    • Example:

HTML

<img id="my-image" src="old.jpg" alt="Old Image">

JavaScript

const myImage = document.getElementById('my-image');

myImage.setAttribute('src', 'new.jpg');

myImage.setAttribute('alt', 'New Image');

  • Styling Change Karna:
    • element.style.propertyName = 'value' (inline style apply karta hai)
    • element.classList.add('className') / remove('className') / toggle('className') (CSS classes add/remove karna - RECOMMENDED)
    • Example:

HTML

<button id="my-button">Click Me</button>

CSS

.highlight-button {

    background-color: yellow;

    color: black;

}

JavaScript

const myButton = document.getElementById('my-button');

myButton.style.backgroundColor = 'blue'; // Inline style

myButton.classList.add('highlight-button'); // Add CSS class

  • Event Listeners (User Interaction): Users ke actions (click, hover, key press, form submit) par code run karna.
    • element.addEventListener('eventName', function)
    • Example:

HTML

<button id="my-click-button">Click Me</button>

JavaScript

const clickButton = document.getElementById('my-click-button');

clickButton.addEventListener('click', function() {

    alert('Button was clicked!');

});

  • Elements Create/Remove Karna:
    • document.createElement('tagName')
    • parentElement.appendChild(childElement)
    • parentElement.removeChild(childElement)
    • Example:

<div id="container"></div> javascript const container = document.getElementById('container'); const newParagraph = document.createElement('p'); newParagraph.textContent = "I am a new paragraph!"; container.appendChild(newParagraph); // Add new paragraph to div ```

Asynchronous JavaScript: APIs Se Baat Karna (CRITICAL for Web Apps)

Web apps aksar servers se data fetch karte hain (jaise weather data, product list). Ye process time consuming hota hai, isliye JavaScript ko asynchronous hona padta hai, matlab background mein kaam karte rehna, taaki main thread block na ho aur webpage stuck na dikhe.

  • Promises: Asynchronous operations ka result handle karne ka ek modern tareeka. Promise states: pending, fulfilled (success), rejected (error).
    • .then(): Jab promise fulfil ho.
    • .catch(): Jab promise reject ho.
    • Example (simplified):

JavaScript

fetch('https://api.example.com/data') // data fetch karne ka promise

    .then(response => response.json()) // response ko json mein parse karne ka promise

    .then(data => {

        console.log(data); // Jab data mil jaaye

    })

    .catch(error => {

        console.error('Error fetching data:', error); // Error handle karna

    });

  • async/await (ES2017+): Promises ko likhne ka aur bhi readable tareeka, jo synchronous code jaisa dikhta hai. Ye bahut common hai modern web apps mein.
    • async keyword function ko asynchronous banata hai.
    • await keyword promise ke complete hone ka wait karta hai, bina main thread ko block kiye.
    • Example:

JavaScript

async function fetchData() {

    try {

        const response = await fetch('https://api.example.com/data'); // Wait for response

        const data = await response.json(); // Wait for JSON parsing

        console.log(data);

    } catch (error) {

        console.error('Failed to fetch data:', error);

    }

}

fetchData();

Modern JavaScript (ES6+) Features (Code Ko Clean Banana)

ECMAScript 2015 (ES6) aur uske baad ke versions ne JS mein bahut saare naye features add kiye hain jo code ko clean, concise, aur powerful banate hain.

  • Template Literals (``): String interpolation (variables ko string mein directly add karna).
    • Example:

JavaScript

const name = "World";

console.log(`Hello, ${name}! Welcome.`); // Output: Hello, World! Welcome.

  • Destructuring Assignment: Arrays aur objects se values ko easily extract karna.
    • Array Destructuring: const [first, second] = [10, 20]; console.log(first); // 10
    • Object Destructuring: const { firstName, age } = person; console.log(firstName); // "Jane"
  • Spread Operator (...): Arrays ya objects ko expand karna. Copy banane ya merge karne ke liye useful.
    • Example:

JavaScript

const arr1 = [1, 2];

const arr2 = [...arr1, 3, 4]; // Output: [1, 2, 3, 4]

const obj1 = { a: 1, b: 2 };

const obj2 = { ...obj1, c: 3 }; // Output: { a: 1, b: 2, c: 3 }

  • Rest Parameters (...): Function arguments ko ek array mein collect karna.
    • Example:

JavaScript

function sumAll(...numbers) {

    return numbers.reduce((total, num) => total + num, 0);

}

console.log(sumAll(1, 2, 3, 4)); // Output: 10

  • Modules (import/export): Code ko chhote, reusable files mein organize karna. Large projects ke liye essential.
    • myModule.js: export const PI = 3.14; export function greet() { ... }
    • app.js: import { PI, greet } from './myModule.js';

JavaScript Development Tools

  • Browser Developer Tools: Chrome DevTools (Console, Elements, Sources, Network tabs) debugging aur DOM inspection ke liye essential hain.
  • VS Code: JavaScript development ke liye best editor (IntelliSense, debugging, extensions).
  • Node.js: JavaScript code ko browser ke bahar (server par) run karne ke liye runtime environment. Fullstack development ke liye zaroori hai.

Aage Kaise Badhein?

In core concepts ko samajhne ke baad, aap Web App development ke liye agle steps le sakte hain:

  1. Frontend Frameworks (React.js): Ye JavaScript libraries hain jo UI components banane aur manage karne mein help karti hain, DOM manipulation ko aasan banati hain.
  2. Backend (Node.js/Express.js): Server-side logic aur API banane ke liye.
  3. Databases: Data store aur manage karne ke liye.

JS ek bahut powerful language hai. In topics par focus karein, code likhein, practice karein. Jab aap basics mein comfortable ho jayenge, toh advanced concepts apne aap aasan lagenge.

Conclusion:

JavaScript ek aisi language hai jo static web pages ko dynamic aur interactive banati hai. Is tutorial mein humne JS ke core pillars — variables, data types, functions, arrays, objects, DOM manipulation, aur asynchronous programming — ko step-by-step explore kiya. Aapne jaana ki kaise JS HTML ke sath interact karta hai, user events handle karta hai, aur servers se real-time data fetch karta hai bina page reload kiye.

Modern JavaScript (ES6+) features jaise arrow functions, template literals, destructuring, aur modules ne development ko aur efficient banaya hai. Ab aap ke paas woh strong foundation hai jisse aap React.js jaise frameworks ya Node.js ke saath full-stack development ki taraf confidently badh sakte hain.

Practice karte rahiye, small projects banaiye, aur naye concepts explore karte rahiye — yahi aapko ek skilled web developer banane ka raasta hai.

Tags :

No comments:

Please comment under the community guideline.

Subscribe to: Post Comments ( Atom )
Powered by Blogger.