DEV Community: Dharmik Dholu

JavaScript : Web APIs (English/Hindi)

Dharmik Dholu — Tue, 09 Jan 2024 04:41:42 +0000

English

JavaScript Web APIs are sets of functions and tools that allow JavaScript, a programming language mainly used for web development, to interact with and manipulate web-related features and content. These APIs are built into web browsers and provide a way for JavaScript code to access various functionalities like handling user input, making network requests, and modifying the Document Object Model (DOM) of a web page.

For example, let's say you want to fetch data from a web server and display it on your website. You can use the fetch API, which is a part of the Web APIs, to make an HTTP request to the server and retrieve the data. Here's a simplified JavaScript code snippet:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // Do something with the data, like displaying it on your webpage
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

In this code, fetch is a Web API that allows JavaScript to send a request to 'https://api.example.com/data' and handle the response data when it arrives.

Hindi

JavaScript Web APIs JavaScript ke functions aur tools hain jo JavaScript, ek programming language hai jo mainly web development ke liye istemal hoti hai, ko web se judi suvidhao aur content ke saath interact karne aur use manipulate karne ke liye allow karte hain. Ye APIs web browsers mein built-in hote hain aur JavaScript code ko user input ko handle karne, network requests bhejne aur web page ke Document Object Model (DOM) ko modify karne jaise alag-alag functionalities tak pahunchane ka ek tareeka pradan karte hain.

Misaal ke taur par, man lijiye aap ek web server se data fetch karna chahte hain aur use apne website par dikhana chahte hain. Aap fetch API ka istemal kar sakte hain, jo Web APIs ka ek hissa hai, server ko HTTP request bhejne aur data ko retrieve karne ke liye. Niche ek simplified JavaScript code snippet diya gaya hai:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // Data ke saath kuch karna, jaise ki ise apne webpage par dikhana
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Is code mein, fetch ek Web API hai jo JavaScript ko 'https://api.example.com/data' par ek request bhejne aur jab data aaye to usse handle karne ki anumati deta hai.

JavaScript : The 'this' Keyword (English/Hindi)

Dharmik Dholu — Mon, 30 Oct 2023 04:16:13 +0000

English

The 'this' keyword in JavaScript is a special identifier that refers to the current context or object in which it is used. Its value can change depending on how and where it is employed. Understanding 'this' is crucial for working effectively with JavaScript.

Let's look at an example to illustrate this concept:

// Example 1: 'this' in a Global Context
console.log(this); // 'this' refers to the global object (usually 'window' in browsers)

// Example 2: 'this' in a Function
function greet() {
  console.log(this); // 'this' inside a function can refer to the global object or be undefined in strict mode
}

greet();

// Example 3: 'this' in an Object Method
const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.greet(); // 'this' refers to the 'person' object

// Example 4: 'this' in an Event Handler
const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // 'this' refers to the element that triggered the event (the button)
});

Hindi

JavaScript mein 'this' keyword ek vishesh pehchanakar hai jo us vyakti ya vastu ko refer karta hai jiske samay mein yah istemal hota hai. Iska moolya istemal kiye jaane ke tarike aur sthal ke anurup badal sakta hai. 'this' ko samajhna JavaScript ke saath prabhavit rup se kam karne ke liye mahatvapurn hai.

Chaliye ek udaharan dekhe is siddhant ko spasht karne ke liye:

// Udaharan 1: 'this' Global Samay Mein
console.log(this); // 'this' sadharan roop se global vastu ko refer karta hai (aam taur par browser mein 'window' hota hai)

// Udaharan 2: 'this' Ek Function Mein
function greet() {
  console.log(this); // Ek function ke andar 'this' global vastu ko refer kar sakta hai ya strict mode mein undefined ho sakta hai
}

greet();

// Udaharan 3: 'this' Ek Object Method Mein
const vyakti = {
  naam: 'John',
  greet: function() {
    console.log(`Namaste, mera naam hai ${this.naam}`);
  },
};

vyakti.greet(); // 'this' 'vyakti' object ko refer karta hai

// Udaharan 4: 'this' Ek Ghatna Handler Mein
const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // 'this' us tatva ko refer karta hai jo ghatna ko trigger kiya (button)
});

Isse 'this' keyword ke mahatva ko samajhna aapko JavaScript mein prabhavit rup se kaam karne mein madad karega.

JavaScript : Event Handling and Event Delegation (English/Hindi)

Dharmik Dholu — Thu, 19 Oct 2023 04:34:38 +0000

English

JavaScript Event Handling:

JavaScript event handling is a way to make your web pages interactive by responding to user actions or events, such as clicks, mouse movements, keyboard inputs, and more. You can attach event listeners to HTML elements, and these listeners will execute JavaScript code when the specified event occurs on the element.

Here's an example in JavaScript:

// Get a reference to an HTML element with an ID of "myButton"
var button = document.getElementById("myButton");

// Attach a click event listener to the button
button.addEventListener("click", function() {
  alert("Button clicked!");
});

In this example, we're adding a click event listener to a button element. When the button is clicked, the code inside the function will execute, showing an alert.

JavaScript Event Delegation:

Event delegation is a design pattern in JavaScript where instead of attaching event listeners to individual elements, you attach a single event listener to a parent element that contains all the child elements you're interested in. This can make your code more efficient and easier to manage, especially when dealing with dynamically added elements.

Here's an example of event delegation:

// Get a reference to a parent element that contains multiple buttons
var parentElement = document.getElementById("buttonContainer");

// Attach a click event listener to the parent element
parentElement.addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    alert("Button clicked: " + event.target.innerText);
  }
});

In this example, we're attaching a click event listener to a parent container element that holds several buttons. When any button inside the container is clicked, the event bubbles up to the parent, and we check if the clicked element is a button. If it is, we display an alert with the text of the clicked button.

Hindi

JavaScript Event Handling:

JavaScript event handling ek tareeka hai jisse aap apni web pages ko interactive bana sakte hain, user ke actions ya events jaise ki clicks, mouse movements, keyboard inputs, aur bhi kai tarah ke events ke jawab mein. Aap HTML elements par event listeners attach kar sakte hain, aur jab specified event element par hota hai, to ye listeners JavaScript code ko execute karte hain.

Yahan ek JavaScript mein udaharan hai:

// "myButton" ID ke ek HTML element ka reference prapt karein
var button = document.getElementById("myButton");

// Button par click event listener attach karein
button.addEventListener("click", function() {
  alert("Button click hua!");
});

Is udaharan mein, hum ek click event listener ko ek button element par add kar rahe hain. Jab button par click hota hai, to function ke andar ka code execute hota hai, jo ek alert dikhata hai.

JavaScript Event Delegation:

Event delegation ek design pattern hai JavaScript mein jahan par individual elements par event listeners attach karne ki jagah, aap ek single event listener ko ek parent element par attach karte hain jo saare child elements ko contain karta hai jo aapko interest rakhte hain. Ye aapke code ko efficient aur manage karne mein madadgar ho sakta hai, khaaskar jab aap dynamically added elements se deal kar rahe hain.

Yahan event delegation ka ek udaharan hai:

// Ek parent element ka reference prapt karein, jisme kai buttons hain
var parentElement = document.getElementById("buttonContainer");

// Parent element par click event listener attach karein
parentElement.addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    alert("Button click hua: " + event.target.innerText);
  }
});

Is udaharan mein, hum ek parent container element par click event listener attach kar rahe hain jo kai buttons ko contain karta hai. Jab bhi container ke andar koi button click hota hai, to event parent tak bubble up hota hai, aur hum check karte hain ki clicked element ek button hai ya nahi. Agar woh button hai, to hum us button ke text ke sath ek alert dikhate hain.

JavaScript : Prototype and Inheritance (English/Hindi)

Dharmik Dholu — Tue, 10 Oct 2023 05:34:50 +0000

English

JavaScript uses a concept called prototype for object-oriented programming. It allows you to create new objects that inherit properties and methods from existing objects. Think of it like a family tree, where child objects inherit characteristics from their parent objects.

In JavaScript, every object has a prototype, which is essentially a reference to another object. When you access a property or method on an object, JavaScript first looks for it on that object. If it doesn't find it there, it searches in the object's prototype, and so on, until it reaches the root prototype called Object.prototype.

Let's look at an example in JavaScript:

// Parent object
var animal = {
  makeSound: function() {
    console.log("Some generic sound");
  }
};

// Child object inheriting from the parent
var cat = Object.create(animal);

// Adding a specific method to the child object
cat.meow = function() {
  console.log("Meow!");
};

// Now, cat inherits makeSound from animal
cat.makeSound(); // Outputs: Some generic sound
cat.meow();      // Outputs: Meow!

In this example, the cat object inherits the makeSound method from the animal object through the prototype chain.

Hindi

JavaScript mein prototype naam ka ek concept istemal hota hai object-oriented programming ke liye. Isse aap naye objects create kar sakte hain jo existing objects se properties aur methods inherit karte hain. Isse ek family tree ki tarah samjha ja sakta hai, jahan child objects parent objects se characteristics inherit karte hain.

JavaScript mein har object ka ek prototype hota hai, jo basically doosre object ka ek reference hota hai. Jab aap ek object par property ya method access karte hain, to JavaScript pehle us object par dekhta hai. Agar wahin par nahi milta, to wah us object ke prototype par dekhta hai, aur isi tarah se root prototype Object.prototype tak jata hai.

Chaliye JavaScript mein ek udaharan dekhte hain:

// Parent object
var animal = {
  makeSound: function() {
    console.log("Kuch generic awaaz");
  }
};

// Child object, jo parent se inherit karta hai
var cat = Object.create(animal);

// Child object mein ek specific method add kiya gaya hai
cat.meow = function() {
  console.log("Meow!");
};

// Ab, cat animal se makeSound inherit karta hai
cat.makeSound(); // Output: Kuch generic awaaz
cat.meow();      // Output: Meow!

Is udaharan mein, cat object animal object se prototype chain ke zariye makeSound method ko inherit karta hai.

JavaScript : Functional Programming (English/Hindi)

Dharmik Dholu — Tue, 03 Oct 2023 13:20:00 +0000

English

Functional programming (FP) is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing state and mutable data. In JavaScript, you can practice functional programming by using functions as first-class citizens and employing concepts like pure functions, immutability, and higher-order functions.

Here's an example of functional programming in JavaScript:

Using Pure Functions:

// Pure function: It always produces the same output for the same input
function add(a, b) {
  return a + b;
}

const result = add(3, 5);
console.log(result); // 8

In this example, the add function is a pure function because it always produces the same output for the same input. It doesn't modify any external state or variables.

Immutability:

// Using immutability
const numbers = [1, 2, 3, 4, 5];

// Instead of modifying the original array, create a new one
const doubledNumbers = numbers.map((num) => num * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

Here, we're using the map function to double each number in the numbers array without modifying the original array. This follows the principle of immutability.

Higher-Order Functions:

// Higher-order function: It takes a function as an argument
function operateOnArray(array, operation) {
  return array.map(operation);
}

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = operateOnArray(numbers, (num) => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

In this example, operateOnArray is a higher-order function that takes an array and an operation (a function) as arguments. It then applies the operation to each element of the array.

Hindi

Functional programming (FP) ek programming paradigm hai jo computation ko ganitik (mathematical) functions ke moolyaankan ke roop mein dekhta hai aur state aur mutable data ko badalne se bachta hai. JavaScript mein aap functional programming ka abhyas kar sakte hain functions ko pehli darja ke nagarik (first-class citizens) ke roop mein istemal karke aur shuddh functions, asamparipata (immutability), aur ucch-ayara functions jaise concepts ka upayog karke.

Neeche ek JavaScript mein functional programming ka udaharan hai:

Shuddh Functions Ka Upayog:

// Yah hamesha ek hi prakar ke input ke liye ek hi prakar ka output utpann karta hai
function jodna(a, b) {
  return a + b;
}

const parinam = jodna(3, 5);
console.log(parinam); // 8

Is udaharan mein, jodna function ek shuddh function hai kyun ki yah hamesha ek hi prakar ke input ke liye ek hi prakar ka output utpann karta hai. Ismein kisi bhi bahri sthiti ya variable ko parivartit nahin karta hai.

Asamparipata (Immutability):

// Asamparipata ka upayog karke
const numbers = [1, 2, 3, 4, 5];

// Moolyaankan (original) array ko parivartit karne ke bajaye, ek naya array banate hain
const dubleNumbers = numbers.map((ank) => ank * 2);

console.log(dubleNumbers); // [2, 4, 6, 8, 10]

Yahan, hum map function ka upayog karte hain moolyaankan (original) array ke har ank ko duguna karne ke liye, moolyaankan ko parivartit kiye bina. Isse asamparipata ki tatparata ka palan hota hai.

Ucch-Ayara Functions (Higher-Order Functions):

// Yah ek function ko argument ke roop mein le leta hai
function arrayPar karyaKarna(array, prakriya) {
  return array.map(prakriya);
}

const numbers = [1, 2, 3, 4, 5];

const dubleNumbers = arrayPar karyaKarna(numbers, (ank) => ank * 2);
console.log(dubleNumbers); // [2, 4, 6, 8, 10]

Is udaharan mein, arrayPar karyaKarna ek ucch-ayara function hai jo ek array aur ek prakriya (function) ko argument ke roop mein leta hai. Phir yah prakriya ko array ke pratyek ank par lagata hai.

JavaScript : Modules and ES6 Modules (English/Hindi)

Dharmik Dholu — Mon, 25 Sep 2023 13:17:07 +0000

English

JavaScript modules are a way to organize and structure your code by splitting it into smaller, reusable pieces. ES6 (ECMAScript 2015) introduced a standardized module system known as ES6 modules, which provide a more efficient and organized way to manage dependencies in your JavaScript code.

Here's how you can create and use ES6 modules:

Creating a Module (math.js):

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

In this example, we have created a module named math.js that exports two functions, add and subtract, using the export keyword.

Using a Module (main.js):

// main.js
import { add, subtract } from './math.js';

const result1 = add(5, 3);
const result2 = subtract(10, 4);

console.log(result1); // 8
console.log(result2); // 6

In the main.js file, we import the functions add and subtract from the math.js module using the import statement. This allows us to use these functions in our main.js file.

Hindi

JavaScript modules ek tarika hain apne code ko vyavasthit aur structure kiya jaane ka, jahan aap apna code chhote, punargunvanneeya tukdon mein baat karke likh sakte hain. ES6 (ECMAScript 2015) ne ek mukhya module pranali ko prastut kiya, jise ES6 modules ke roop mein jaana jaata hai, jo aapke JavaScript code mein dependencies (aavashyakataayein) ko prabandhit karne ka ek adhik upayukt aur vyavasthit tarike ka pradaan karte hain.

Neeche bataya gaya hai kis prakar se aap ES6 modules ko banate hain aur upayog karte hain:

Module Banane Ka Tariqa (math.js):

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

Is udaharan mein, hamne ek module math.js banaya hai jo export shabd ka upayog karke do functions, add aur subtract, ko bahar nikalta hai.

Module Ka Upayog Karne Ka Tariqa (main.js):

// main.js
import { add, subtract } from './math.js';

const result1 = add(5, 3);
const result2 = subtract(10, 4);

console.log(result1); // 8
console.log(result2); // 6

main.js file mein, ham import statement ka upayog karke math.js module se functions add aur subtract ko import karte hain. Isse ham apne main.js file mein in functions ka upayog kar sakte hain.

JavaScript : Generators (English/Hindi)

Dharmik Dholu — Mon, 18 Sep 2023 02:32:34 +0000

English

JavaScript generators are a special type of function that can pause their execution and later resume it. They are defined using a function with an asterisk (*) symbol, like this:

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

In this example, myGenerator is a generator function that yields (produces) values one by one using the yield keyword. When you call this generator function, it doesn't run immediately. Instead, it returns an iterator object.

To use the generator and retrieve values, you can create an iterator and use the next() method:

const iterator = myGenerator();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Each time you call iterator.next(), the generator function runs until it encounters a yield statement, at which point it yields the value and pauses. You can then resume the execution by calling next() again.

Hindi

JavaScript generators ek khaas prakar ke function hain jo apne execut ko rok sakte hain aur baad mein use dubara chala sakte hain. Inhe ek function mein anokha (*) chihn laga kar define kiya jata hai, jaise ki yeh:

function* meraGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

Is udaharan mein, meraGenerator ek generator function hai jo yield shabd ka upayog karke ek ek karke mulyon ko utpann (produce) karta hai. Jab aap is generator function ko bulata hai, toh yeh turant nahin chalta. Balki, yeh ek iterator object lautata hai.

Generator ka upayog karne aur mulyon ko prapt karne ke liye, aap ek iterator bana sakte hain aur next() method ka upayog kar sakte hain:

const iterator = meraGenerator();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Har bar jab aap iterator.next() ko bulate hain, toh generator function tab tak chalta hai jab tak vah ek yield statement ko nahin milta, us samay vah muly ko utpann karta hai aur rok jata hai. Phir se chalaane ke liye aap next() ko fir se bulate hain.

JavaScript : Object Methods (English/Hindi)

Dharmik Dholu — Fri, 15 Sep 2023 03:01:59 +0000

English

.keys():
This method returns an array of all the keys (property names) of an object.

// Example:
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

const keys = Object.keys(person);
console.log(keys); // Output: ["name", "age", "city"]

.values():
This method returns an array of all the values of an object.

// Example:
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

const values = Object.values(person);
console.log(values); // Output: ["John", 30, "New York"]

.entries():
This method returns an array of key-value pairs (as arrays) of an object.

// Example:
const person = {
  name: "John",
  age: 30,
  city: "New York"
};

const entries = Object.entries(person);
console.log(entries);
// Output: [["name", "John"], ["age", 30], ["city", "New York"]]

.assign():
This method is used to copy the values of all enumerable properties from one or more source objects to a target object.

// Example:
const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };

const result = Object.assign(target, source);
console.log(target); // Output: { a: 1, b: 3, c: 4 }

.hasOwnProperty():
This method checks if an object has a specific property and returns a boolean value.

// Example:
const person = {
  name: "John",
  age: 30
};

const hasAge = person.hasOwnProperty("age");
console.log(hasAge); // Output: true
const hasCity = person.hasOwnProperty("city");
console.log(hasCity); // Output: false

Hindi

.keys()
Yeh method ek object ke saare keys (properties) ka ek array return karta hai.

const vyakti = {
  naam: "John",
  umar: 30,
  shehar: "New York"
};

const chabiyonKaArray = Object.keys(vyakti);
console.log(chabiyonKaArray); // Output: ["naam", "umar", "shehar"]

.values():
Yeh method ek object ke saare values ka ek array return karta hai.

const vyakti = {
  naam: "John",
  umar: 30,
  shehar: "New York"
};

const moolyonKaArray = Object.values(vyakti);
console.log(moolyonKaArray); // Output: ["John", 30, "New York"]

.entries():
Yeh method ek object ke key-value pairs (arrays ke roop mein) ka array return karta hai.

const vyakti = {
  naam: "John",
  umar: 30,
  shehar: "New York"
};

const entryArray = Object.entries(vyakti);
console.log(entryArray);
// Output: [["naam", "John"], ["umar", 30], ["shehar", "New York"]]

.assign();
Yea method ek ya adhik objects ke properties ko ek naye object mein milakar usse combine karta hai.

const pehlaObject = {
  naam: "Shyam",
  umar: 25
};

const doosraObject = {
  shehar: "Mumbai",
  kaam: "Engineer"
};

// `Object.assign()` se do objects ko combine karenge aur ek naya object banayenge.
const combinedObject = Object.assign({}, pehlaObject, doosraObject);

console.log(combinedObject);
// Output: { naam: "Shyam", umar: 25, shehar: "Mumbai", kaam: "Engineer" }

.hasOwnProperty():
Yea method ek object ke andar kisi property ka maujood hone ko check kar sakte hain. Is method ka upayog kisi specific property ke existance ko verify karne ke liye hota hai. Yadi woh property object ke khud ke hai, tabhi yeh method true return karega, anyatha false return karega.

const vyakti = {
  naam: "Shyam",
  umar: 25,
  shehar: "Mumbai"
};

// Check karein ki 'naam' property vyakti object ke andar maujood hai ya nahi
const kyaNaamHai = vyakti.hasOwnProperty('naam');
console.log(kyaNaamHai); // Output: true

// Check karein ki 'address' property vyakti object ke andar maujood hai ya nahi
const kyaAddressHai = vyakti.hasOwnProperty('address');
console.log(kyaAddressHai); // Output: false

JavaScript : Destructuring (English/Hindi)

Dharmik Dholu — Wed, 13 Sep 2023 11:35:13 +0000

English

Destructuring in JavaScript is a feature that allows you to extract values from objects or arrays and assign them to variables in a concise and readable way. This can make your code cleaner and more organized. Let's look at an example:

Suppose you have an object representing a person:

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
};

With destructuring, you can easily extract the values from this object and assign them to variables:

const { firstName, lastName, age } = person;

console.log(firstName);  // Output: John
console.log(lastName);   // Output: Doe
console.log(age);        // Output: 30

This is equivalent to manually assigning the values like this:

const firstName = person.firstName;
const lastName = person.lastName;
const age = person.age;

Destructuring works similarly for arrays as well. Consider this example with an array:

const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;

console.log(first);  // Output: 1
console.log(second); // Output: 2
console.log(rest);   // Output: [3, 4, 5]

Here, the first and second elements of the array are extracted and assigned to variables, and the rest of the elements are collected into the rest array.

Hindi

JavaScript mein destructuring ek feature hai jo aapko objects ya arrays se values ko extract karke unhe variables mein assign karne ki suvidha deta hai, aur yeh ek sankshep aur padhne mein asaan tareeke se hota hai. Isse aapka code saaf aur vyavasthit ho sakta hai. Chaliye ek udaharan dekhein:

Mana ki aapke paas ek vyakti ko darshane wala object hai:

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
};

Destructuring ke dwara, aap aasani se is object se values ko nikal kar unhe variables mein assign kar sakte hain:

const { firstName, lastName, age } = person;

console.log(firstName);  // Output: John
console.log(lastName);   // Output: Doe
console.log(age);        // Output: 30

Yeh manuaaly values ko aise assign karne ke barabar hai:

const firstName = person.firstName;
const lastName = person.lastName;
const age = person.age;

Destructuring arrays ke liye bhi similarly kaam karta hai. Yeh ek array ke saath wala udaharan dekhein:

const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;

console.log(first);  // Output: 1
console.log(second); // Output: 2
console.log(rest);   // Output: [3, 4, 5]

Yahan par, array ke pehle aur doosre elements ko extract karke variables mein assign kiya gaya hai, aur baki ke elements ko rest array mein collect kiya gaya hai.

JavaScript : Async/Await And Promises (English/Hindi)

Dharmik Dholu — Fri, 08 Sep 2023 12:12:12 +0000

English

Promises:
Promises are a way to handle asynchronous operations in a more organized and readable manner. They represent a value that might be available now, or in the future, or never.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "Fetched data from server";
      // Simulating success
      resolve(data);
      // Simulating error
      // reject("Error fetching data");
    }, 2000);
  });
}

fetchData()
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

Async/Await:
Async/Await is a more recent feature in JavaScript that simplifies asynchronous code even further. It allows you to write asynchronous code that looks similar to synchronous code, making it easier to understand and maintain.

async function fetchDataAsync() {
  try {
    const response = await fetchData();
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

fetchDataAsync();

Hindi

Promises:
Promises ek tareeka hai asynchronus operations ko ek vyavasthit aur padhne mein sahaj tarike se handle karne ka. Ye ek aisa mauka hai jo abhi maujood ho sakta hai, ya bhavishya mein ho sakta hai, ya kabhi na ho.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "Server se data liya gaya";
      // Utpanna huaa safalata
      resolve(data);
      // Utpanna huaa karan
      // reject("Data liye jaane mein error");
    }, 2000);
  });
}

fetchData()
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

Async/Await:
Async/Await ek nedee haaal mein JavaScript mein aayi feature hai jo asynchronus code ko aur bhi saral bana deti hai. Isse aap aisa asynchronus code likh sakte hain jo sankramit code ki tarah lagta hai, jisse samajhna aur maintain karna aasan ho jata hai.

async function fetchDataAsync() {
  try {
    const response = await fetchData();
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

fetchDataAsync();

JavaScript : Closures (English/Hindi)

Dharmik Dholu — Sat, 26 Aug 2023 05:34:15 +0000

English

A closure in JavaScript is a concept where a function retains access to the variables from its containing (enclosing) function, even after that enclosing function has finished executing. This means that a function "closes over" the variables it needs, keeping them alive beyond their original scope.

function outerFunction() {
  let outerVariable = "I'm from outer function";

  function innerFunction() {
    console.log(outerVariable); // inner function can access outerVariable
  }

  return innerFunction;
}

const closureExample = outerFunction(); // closureExample now holds the innerFunction

closureExample(); // Outputs: "I'm from outer function"

Hindi

JavaScript mein ek closure ek aisa concept hai jahan ek function apne enclosing function ke variables tak ka access rakhta hai, us enclosing function ka execution khatam hone ke baad bhi. Iska matlab hai ki ek function "closes over" (apni baahar ke) variables ko, aur unhe unke asal scope se bahar rakh deta hai.

function outerFunction() {
  let outerVariable = "Main bahar waale function se hoon";

  function innerFunction() {
    console.log(outerVariable); // andar waala function outerVariable tak ka access kar sakta hai
  }

  return innerFunction;
}

const closureExample = outerFunction(); // closureExample ab innerFunction ko hold karta hai

closureExample(); // Output: "Main bahar waale function se hoon"

Javascript Advance DOM Manipulation

Dharmik Dholu — Mon, 21 Aug 2023 09:56:59 +0000

Advanced DOM manipulation in JavaScript involves more complex interactions with the Document Object Model, including creating, modifying, and animating elements, handling events, and working with more advanced techniques. Let's explore some advanced DOM manipulation concepts with examples:

1. Creating Elements:

const newDiv = document.createElement('div');
newDiv.className = 'new-div';
newDiv.textContent = 'This is a new div element.';
document.body.appendChild(newDiv);

2. Modifying Elements:

const existingDiv = document.querySelector('.existing-div');
existingDiv.textContent = 'Updated content';
existingDiv.classList.add('highlight');

3. Cloning Elements:

const originalDiv = document.querySelector('.original-div');
const clonedDiv = originalDiv.cloneNode(true);
document.body.appendChild(clonedDiv);

4. Event Delegation:

document.addEventListener('click', event => {
  if (event.target.matches('.clickable')) {
    console.log('Clicked on a clickable element:', event.target);
  }
});

5. Animations with CSS Transitions:

<style>
  .fade {
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
</style>

<div class="fade">Fading Element</div>

<script>
  const fadeElement = document.querySelector('.fade');
  setTimeout(() => {
    fadeElement.style.opacity = 1;
  }, 1000);
</script>

6. Animations with requestAnimationFrame:

function animateElement() {
  const element = document.querySelector('.animated');
  let position = 0;

  function step() {
    position += 2;
    element.style.left = position + 'px';

    if (position < 200) {
      requestAnimationFrame(step);
    }
  }

  requestAnimationFrame(step);
}

7. Creating Complex UI Components:

class Accordion {
  constructor(container) {
    this.container = container;
    this.headers = this.container.querySelectorAll('.accordion-header');

    this.headers.forEach(header => {
      header.addEventListener('click', () => this.togglePanel(header));
    });
  }

  togglePanel(header) {
    const panel = header.nextElementSibling;
    panel.classList.toggle('active');
  }
}

const accordionContainer = document.querySelector('.accordion-container');
const accordion = new Accordion(accordionContainer);

8. Virtual DOM Manipulation with Libraries (React, Vue):

Using libraries like React or Vue.js can simplify complex DOM manipulation scenarios by abstracting away direct manipulation and providing a virtual DOM that optimizes updates