1। आधुनिक जावास्क्रिप्ट में महारत हासिल है: शीर्ष ES6 सुविधाएँ आपको जानना आवश्यक है

ES6 (ECMASCRIPT 2015) और बाद के संस्करणों की शुरूआत के साथ, जावास्क्रिप्ट काफी विकसित हुआ है। आवश्यक सुविधाएँ जैसे कि लेट एंड कांस्ट, एरो फ़ंक्शंस, टेम्प्लेट लिटरेल्स, और डिस्ट्रक्चरिंग आपको क्लीनर, अधिक कुशल कोड लिखने की अनुमति देते हैं।

महत्वपूर्ण अवधारणाएं:

• बनाम कॉन्स्ट
• तीर कार्य
• टेम्पलेट साहित्यिक
• प्रसार/बाकी ऑपरेटर
• विनाशकारी असाइनमेंट

व्यावहारिक उदाहरण:

const person = { name: 'John', age: 25 };
const { name, age } = person;
console.log(name, age); // John, 25

2। एसिंक्रोनस जावास्क्रिप्ट को अनलॉक करना: कॉलबैक, वादे, और async/aate

] कॉलबैक Async व्यवहार के प्रबंधन के लिए मूल विधि थी (हालांकि वे कॉलबैक नरक का कारण बन सकते हैं), लेकिन वादे और async/प्रतीक्षा के बाद से इस प्रक्रिया को सरल बना दिया है।

महत्वपूर्ण अवधारणाएं:

कॉलबैक
वादे (.then और .catch)
async/प्रतीक्षा

व्यावहारिक उदाहरण:

const fetchdata = async () => { कोशिश { const Response = इंतजार करना ('https://api.example.com/data'); const data = प्रतीक्षा प्रतिक्रिया। JSON (); कंसोल.लॉग (डेटा); } पकड़ (त्रुटि) { Console.Error (त्रुटि); } }; fetchData ();

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

fetchData();

3। जावास्क्रिप्ट डोम हेरफेर: अपने वेब पेजों को जीवन में लाना

] डोम हेरफेर सीखकर, आप उपयोगकर्ता कार्यों या अन्य घटनाओं के जवाब में तत्वों, शैलियों और सामग्री को गतिशील रूप से बदल सकते हैं।

महत्वपूर्ण अवधारणाएं:

]

घटना श्रोता

• तत्वों को संशोधित करना (कक्षाओं को जोड़ना/हटाना, शैलियों को बदलना)
• व्यावहारिक उदाहरण:
• const बटन = document.queryselector ('बटन'); button.addeventListener ('क्लिक', () => { document.body.classlist.toggle ('डार्क-मोड'); });

4। जावास्क्रिप्ट क्लोजर को समझना: स्कोपिंग के लिए एक शक्तिशाली अवधारणा

] वे आमतौर पर डेटा एनकैप्सुलेशन और बनाए रखने के लिए उपयोग किए जाते हैं।

const button = document.querySelector('button');
button.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

लेक्सिकल स्कोपिंग

कार्य कारखाने

व्यावहारिक उपयोग के मामले (जैसे, निजी चर)

व्यावहारिक उदाहरण:
फंक्शन आउटर () { गिनती = 0; रिटर्न फंक्शन इनर () { गिनती करना ; वापसी की गिनती; }; } const काउंटर = बाहरी (); कंसोल.लॉग (काउंटर ()); // 1 कंसोल.लॉग (काउंटर ()); // 2
5। द जावास्क्रिप्ट इवेंट लूप: सिंगल-थ्रेडेड वातावरण में कैसे काम करता है

] हालांकि, इवेंट लूप और एसिंक्रोनस कॉलबैक के साथ, जावास्क्रिप्ट एक ही समय में कई कार्यों को संभाल सकता है। यह समझना कि इवेंट लूप कैसे काम करता है, प्रदर्शन के अनुकूलन के लिए महत्वपूर्ण है।

महत्वपूर्ण अवधारणाएं:

function outer() {
  let count = 0;
  return function inner() {
    count  ;
    return count;
  };
}

const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

]

]

]

व्यावहारिक उदाहरण:

कंसोल.लॉग ('प्रारंभ'); setTimeOut () => कंसोल.लॉग ('टाइमर'), 0); PROMISE.RESOLVE ()। तब () => कंसोल.लॉग ('वादा')); कंसोल.लॉग ('एंड'); // आउटपुट: प्रारंभ, अंत, वादा, टाइमर
• 6। जावास्क्रिप्ट डिजाइन पैटर्न: कुशल और स्केलेबल कोड लेखन ] जावास्क्रिप्ट में डिज़ाइन पैटर्न को लागू करने के तरीके सीखना स्वच्छ, मॉड्यूलर और बनाए रखने योग्य कोड लिखने में मदद करता है।
• महत्वपूर्ण अवधारणाएं:
मॉड्यूल पैटर्न
• सिंगलटन पैटर्न
पर्यवेक्षक पैटर्न

व्यावहारिक उदाहरण:

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

fetchData();

const सिंगलटन = (फ़ंक्शन () { उदाहरण दें; फ़ंक्शन create instance () { const ऑब्जेक्ट = नई ऑब्जेक्ट ('मैं उदाहरण हूँ'); वापसी वस्तु; } वापस करना { getInstance: function () { if (उदाहरण) { उदाहरण = createInstance (); } रिटर्न इंस्टेंस; } }; }) (); const Inst1 = singleton.getInstance (); const Inst2 = singleton.getInstance (); कंसोल.लॉग (Inst1 ==== Inst2); // सत्य

7। जावास्क्रिप्ट त्रुटि हैंडलिंग: मजबूत कोड लिखने के लिए सर्वोत्तम अभ्यास

त्रुटियां प्रोग्रामिंग में अपरिहार्य हैं, लेकिन जावास्क्रिप्ट उन्हें संभालने के लिए मजबूत तंत्र प्रदान करता है। कोशिश ... कैच ब्लॉक आपको रनटाइम त्रुटियों का प्रबंधन करने और पूरे आवेदन को दुर्घटनाग्रस्त किए बिना आवश्यक कार्रवाई करने की अनुमति देता है।

महत्वपूर्ण अवधारणाएं:

कोशिश करें ... पकड़ ... अंत में
कस्टम त्रुटि कक्षाएं
उचित कमी

व्यावहारिक उदाहरण:

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

fetchData();

कोशिश { const परिणाम = जोखिम (); } पकड़ (त्रुटि) { Console.Error ('एक त्रुटि हुई:', error.message); } अंत में { कंसोल.लॉग ('क्लीनअप कोड निष्पादित'); }

8। रिएक्ट बनाम Vue बनाम कोणीय: कौन सा जावास्क्रिप्ट फ्रेमवर्क आपके लिए सही है?

] प्रतिक्रिया, Vue और कोणीय के बीच प्रमुख अंतर को समझना आपको अपनी परियोजना की जरूरतों के आधार पर सही एक चुनने में मदद करेगा।

महत्वपूर्ण अवधारणाएं:

डेटा बाइंडिंग और स्टेट मैनेजमेंट
सीखने की अवस्था और पारिस्थितिकी तंत्र

व्यावहारिक तुलना:

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

fetchData();

प्रतिक्रिया

:

लचीला, बड़ा पारिस्थितिकी तंत्र

राज्य प्रबंधन के लिए अतिरिक्त पुस्तकालयों की आवश्यकता है
vue

:

सादगी, प्रतिक्रियाशील डेटा बाइंडिंग

• छोटा लेकिन बढ़ता हुआ समुदाय

  कोणीय
  • :
पूर्ण रूप से ढांचा

• राय संरचना प्रगति चार्ट में गहरा प्रशिक्षण मोड़ ## 9। जावास्क्रिप्ट ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग (OOP): लीवरेजिंग क्लास और प्रोटोटाइप

  ] इनहेरिटेंस और एनकैप्सुलेशन जैसे ऑब्जेक्ट-ओरिएंटेड सिद्धांत प्रोटोटाइप और वर्गों के माध्यम से प्राप्त किए जा सकते हैं।
  महत्वपूर्ण अवधारणाएं:
• प्रोटोटाइपल इनहेरिटेंस

  कक्षाएं और निर्माणकर्ता

  एनकैप्सुलेशन और बहुरूपता
  व्यावहारिक उदाहरण:
  क्लास एनिमल { कंस्ट्रक्टर (नाम) { this.name = नाम; } बोलना() { कंसोल.लॉग (`$ {this.name} एक शोर बनाता है`); } } क्लास डॉग एनिमल का विस्तार करता है { बोलना() { कंसोल.लॉग (`$ {this.name} barks`); } } कॉन्स्ट डॉग = न्यू डॉग ('रेक्स'); dog.speak (); // रेक्स बार्क
  10। जावास्क्रिप्ट में अजाक्स और एपीआई: अपने ऐप को दुनिया से कनेक्ट करना
एपीआई (एप्लिकेशन प्रोग्रामिंग इंटरफेस) आपको बाहरी सेवाओं से डेटा लाने की अनुमति देता है। अजाक्स (एसिंक्रोनस जावास्क्रिप्ट और एक्सएमएल) के साथ, आप पेज को ताज़ा किए बिना डायनामिक रूप से डेटा लोड कर सकते हैं। आधुनिक जावास्क्रिप्ट इन अनुरोधों के लिए FETCH API का उपयोग करता है।

महत्वपूर्ण अवधारणाएं:

एपीआई

• JSON डेटा के साथ काम करना
• एपीआई प्रतिक्रियाओं और त्रुटियों को संभालना
व्यावहारिक उदाहरण:

fetch ('https://api.example.com/data') .then (प्रतिक्रिया => प्रतिक्रिया। JSON ()) .then (डेटा => कंसोल.लॉग (डेटा)) .catch (त्रुटि => कंसोल.रोर ('त्रुटि:', त्रुटि));

] यह कौशल आधुनिक वेब विकास के लिए आवश्यक है, जिससे आप समृद्ध, इंटरैक्टिव उपयोगकर्ता अनुभव बना सकते हैं।

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // Rex barks