यह मार्गदर्शिका मेरे पिता द्वारा लिखी जा रही है जो alis4ops.com का निर्माण कर रहे हैं।

• मैं "बाबा" कहता हूं।
• वह वेब एप्लिकेशन बनाना सीख रहा है, जो पहले एक इलेक्ट्रिकल इंजीनियर था।
• उनके संदर्भ में लेख के चारों ओर कुछ नोट्स छोड़ेंगे, ताकि इंटरवेबज़ पर इसे पढ़ने वाला कोई भी व्यक्ति उन पंक्तियों को अनदेखा कर सके। आशा है आप लोग बुरा नहीं मानेंगे!

प्रसंग

हमारे पास निम्नलिखित कार्य हैं:

• हैंडलस्टार्टटच
• हैंडलमूवटच

DragDrop.js में बाबा को परिभाषित किया गया

function handleStartTouch(event) {
    draggedElement = event.target;
    const touch = event.touches[0];
    touchStartX = touch.clientX - draggedElement.getBoundingClientRect().left;
    touchStartY = touch.clientY - draggedElement.getBoundingClientRect().top;
}

function handleMoveTouch(event) {
    event.preventDefault()
    if (draggedElement) {
        const touch = event.touches[0];
        // ..more code
    }
}

ध्यान दें कि हम ड्रैगएलिमेंट को ऑनलाइन एक्सेस कर रहे हैं:

• यदि (खींचा गया तत्व) {

hanldeMoveTouch को कॉल करने पर कोई त्रुटि नहीं होती है।

Chrome DevTools में if (draggedElement) पर ब्रेकप्वाइंट लगाने से पता चलेगा कि DragElement HandleStartTouch में इवेंट.टार्गेट द्वारा प्रदान किए गए उसी HTML तत्व को हल करता है

मुद्दा

हम हैंडलमूवटच में ड्रैगएलिमेंट तक क्यों पहुंच सकते हैं, भले ही इसे हैंडलस्टार्टटच में परिभाषित किया गया हो

अधिक सामान्य रूप से, हम एक वेरिएबल तक क्यों पहुंच सकते हैं जो किसी फ़ंक्शन में जावास्क्रिप्ट में किसी अन्य फ़ंक्शन में परिभाषित किया गया था?

स्पष्टीकरण

हैंडलस्टार्टटच फ़ंक्शन देखें:

function handleStartTouch(event) {
    draggedElement = event.target;
    const touch = event.touches[0];
    touchStartX = touch.clientX - draggedElement.getBoundingClientRect().left;
    touchStartY = touch.clientY - draggedElement.getBoundingClientRect().top;
}

विशेष रूप से पंक्ति:

    draggedElement = event.target;

यह किसी भी कीवर्ड का उपयोग करके वेरिएबल नाम ड्रैगएलिमेंट घोषित नहीं करता है

• स्थिरांक
• होने देना
• var

उदाहरण के लिए, हम इसे इस तरह परिभाषित नहीं कर रहे हैं:

    const draggedElement = event.target;

परिवर्तनीय घोषणा (उर्फ कीवर्ड)

जावास्क्रिप्ट में, जब हम परिवर्तनीय घोषणाओं (जिन्हें कीवर्ड भी कहा जाता है) का उपयोग नहीं करते हैं, तो जावास्क्रिप्ट उस चर को एक वैश्विक चर मानता है।

व्यायाम

निम्नलिखित उदाहरण पर विचार करें जहां हम दो कार्यों को परिभाषित करते हैं:

// Takes in two arguments and returns the sum
function add(x, y) {
  sum = x   y
  return sum
}

// prints sum if it is defined
function printStatus() {
  if (sum) {
    console.log("Sum: ", sum)
  } else {
    console.log("Sum does no exist")
  }
}

Chrome में DevTools खोलें

• "कंसोल" पर जाएँ
• ऊपर दिए गए कोड को कॉपी और पेस्ट करें
• एंट्रर दबाये
• यह अपरिभाषित वापस आएगा, यह ठीक है।

कंसोल में, कॉल ऐड(1,1)

• आपको कंसोल रिटर्न 2 दिखाई देगा

add(1,1)
=> 2

फिर printStatus पर कॉल करें

• आप आउटपुट योग देखेंगे: 2

हम देख सकते हैं कि printStatus() add(x, y)

ऐसा इसलिए है क्योंकि परिवर्तनीय राशि को निम्नलिखित कीवर्ड के बिना घोषित किया जा रहा है:

• योग = x y

अब योग के लिए एक परिवर्तनीय घोषणा का उपयोग करने के लिए add(x, y) add को बदलें

// Takes in two arguments and returns the sum
function add(x, y) {
  const sum = x   y // use the variable declartion const
  return sum
}

// prints sum if it is defined
function printStatus() {
  if (sum) {
    console.log("Sum: ", sum)
  } else {
    console.log("Sum does no exist")
  }
}

• क्रोम पर जाएं
• सीटीआरएल आर के साथ पेज को रीफ्रेश करें
  • आप एक नया टैब भी खोल सकते हैं और डेवटूल्स कंसोल को फिर से खोल सकते हैं।

आइए कंसोल लॉग में फ़ंक्शंस को फिर से परिभाषित करें।

• ऊपर दिए गए कोड स्निपेट को कॉपी करके कंसोल में पेस्ट करें और एंटर दबाएं।

हमें इसे फिर से परिभाषित करने की आवश्यकता है क्योंकि हमने एक नया डेव कंसोल शुरू किया है।

अब कंसोल में, कॉल ऐड(2, 2)

• आपको कंसोल रिटर्न 4 दिखाई देगा

यह देखने के लिए printStatus पर कॉल करें कि क्या add(x, y) में परिभाषित वेरिएबल योग तक पहुंच सकते हैं

printStatus()
> Uncaught ReferenceError: sum is not defined
    at printStatus (:9:3)
    at :1:1

त्रुटि कहती है कि योग परिभाषित नहीं है

यह पुष्टि करता है कि जब किसी फ़ंक्शन के भीतर एक वेरिएबल को एक वेरिएबल घोषणा (const, Let, var) के साथ परिभाषित किया जाता है, तो उस वेरिएबल का दायरा केवल फ़ंक्शन के भीतर होता है

जब एक वेरिएबल को किसी फ़ंक्शन के भीतर एक वेरिएबल घोषणा के बिना परिभाषित किया जाता है, तो उस वेरिएबल का दायरा वैश्विक होता है।