# बैंकिङ एप निर्माण भाग ३: डेटा प्राप्ति र प्रयोग गर्ने विधिहरू स्टार ट्रेकको एंटरप्राइजको कम्प्युटरलाई सम्झनुहोस् - जब कप्तान पिकार्डले जहाजको स्थिति सोध्छन्, जानकारी तुरुन्तै देखिन्छ, सम्पूर्ण इन्टरफेस बन्द गरेर पुनः निर्माण नगरी। यो नै हामी यहाँ निर्माण गर्दैछौं, गतिशील डेटा प्राप्तिको साथमा। अहिले, तपाईंको बैंकिङ एप छापिएको समाचारपत्र जस्तै छ - जानकारीमूलक तर स्थिर। हामी यसलाई नासाको मिशन कन्ट्रोल जस्तै बनाउनेछौं, जहाँ डेटा निरन्तर प्रवाह हुन्छ र वास्तविक समयमा अपडेट हुन्छ, प्रयोगकर्ताको कार्यप्रवाहलाई अवरोध नगरी। तपाईंले सर्वरहरूसँग असिंक्रोनस रूपमा संवाद गर्न, विभिन्न समयमा आउने डेटा व्यवस्थापन गर्न, र कच्चा जानकारीलाई प्रयोगकर्ताहरूका लागि अर्थपूर्ण बनाउने तरिका सिक्नुहुनेछ। यो डेमो र उत्पादन-तयार सफ्टवेयरको बीचको फरक हो। ## प्रि-लेक्चर क्विज [प्रि-लेक्चर क्विज](https://ff-quizzes.netlify.app/web/quiz/45) ### आवश्यकताहरू डेटा प्राप्तिमा प्रवेश गर्नु अघि, यी कम्पोनेन्टहरू तयार गर्नुहोस्: - **अघिल्लो पाठ**: [लगइन र रजिस्ट्रेसन फारम](../2-forms/README.md) पूरा गर्नुहोस् - हामी यस आधारमा निर्माण गर्नेछौं। - **स्थानीय सर्भर**: [Node.js](https://nodejs.org) स्थापना गर्नुहोस् र [सर्भर API चलाउनुहोस्](../api/README.md) खाता डेटा प्रदान गर्न। - **API कनेक्शन**: यो कमाण्डसँग आफ्नो सर्भर कनेक्शन परीक्षण गर्नुहोस्: ```bash curl http://localhost:5000/api # Expected response: "Bank API v1.0.0" ``` यो छिटो परीक्षणले सुनिश्चित गर्दछ कि सबै कम्पोनेन्टहरू ठीकसँग संवाद गरिरहेका छन्: - तपाईंको प्रणालीमा Node.js सही रूपमा चलिरहेको छ भनी प्रमाणित गर्दछ। - तपाईंको API सर्भर सक्रिय छ र प्रतिक्रिया दिइरहेको छ भनी पुष्टि गर्दछ। - तपाईंको एपले सर्भरमा पुग्न सक्छ भनी प्रमाणित गर्दछ (मिशन अघि रेडियो सम्पर्क जाँच गरेजस्तै)। --- ## आधुनिक वेब एप्समा डेटा प्राप्ति बुझ्दै वेब एप्लिकेसनहरूले डेटा व्यवस्थापन गर्ने तरिका पछिल्लो दुई दशकमा नाटकीय रूपमा विकसित भएको छ। यस विकासलाई बुझ्दा आधुनिक प्रविधिहरू जस्तै AJAX र Fetch API किन शक्तिशाली छन् र किन वेब विकासकर्ताहरूका लागि आवश्यक उपकरण बनेका छन् भन्ने कुरा स्पष्ट हुन्छ। आउनुहोस्, परम्परागत वेबसाइटहरू कसरी काम गर्थे र आज हामीले निर्माण गर्ने गतिशील, प्रतिक्रियात्मक एप्लिकेसनहरूको तुलना गरौं। ### परम्परागत मल्टि-पेज एप्लिकेसन (MPA) वेबको सुरुवाती दिनहरूमा, प्रत्येक क्लिक पुरानो टेलिभिजनमा च्यानल परिवर्तन गरेजस्तै थियो - स्क्रिन खाली हुन्थ्यो, अनि नयाँ सामग्रीमा ट्युन गर्न बिस्तारै लाग्थ्यो। यो प्रारम्भिक वेब एप्लिकेसनहरूको वास्तविकता थियो, जहाँ प्रत्येक अन्तरक्रियाले सम्पूर्ण पृष्ठलाई पुनः निर्माण गर्नुपर्थ्यो। ```mermaid sequenceDiagram participant User participant Browser participant Server User->>Browser: Clicks link or submits form Browser->>Server: Requests new HTML page Note over Browser: Page goes blank Server->>Browser: Returns complete HTML page Browser->>User: Displays new page (flash/reload) ```  **किन यो विधि असहज लाग्थ्यो:** - प्रत्येक क्लिकले सम्पूर्ण पृष्ठलाई पुनः निर्माण गर्नुपर्थ्यो। - ती झिल्काहरूले प्रयोगकर्ताको विचारलाई अवरोध गर्थे। - तपाईंको इन्टरनेट कनेक्शनले बारम्बार हेडर र फुटर डाउनलोड गर्न धेरै काम गर्नुपर्थ्यो। - एप्स फाइलिङ क्याबिनेटमा क्लिक गरेजस्तो लाग्थ्यो, सफ्टवेयर प्रयोग गरेजस्तो होइन। ### आधुनिक सिंगल-पेज एप्लिकेसन (SPA) AJAX (Asynchronous JavaScript and XML) ले यो परिपाटीलाई पूर्ण रूपमा परिवर्तन गर्यो। अन्तर्राष्ट्रिय स्पेस स्टेशनको मोड्युलर डिजाइन जस्तै, जहाँ अन्तरिक्ष यात्रीहरूले सम्पूर्ण संरचना पुनः निर्माण नगरी व्यक्तिगत कम्पोनेन्टहरू प्रतिस्थापन गर्न सक्छन्, AJAX ले हामीलाई वेबपेजको विशिष्ट भागहरू पुनः लोड नगरी अपडेट गर्न अनुमति दिन्छ। XML उल्लेख भए पनि, आज हामी प्रायः JSON प्रयोग गर्छौं, तर मुख्य सिद्धान्त उस्तै छ: केवल परिवर्तन भएको भागलाई अपडेट गर्नुहोस्। ```mermaid sequenceDiagram participant User participant Browser participant JavaScript participant Server User->>Browser: Interacts with page Browser->>JavaScript: Triggers event handler JavaScript->>Server: Fetches only needed data Server->>JavaScript: Returns JSON data JavaScript->>Browser: Updates specific page elements Browser->>User: Shows updated content (no reload) ```  **किन SPA हरू राम्रो लाग्छन्:** - केवल वास्तवमा परिवर्तन भएका भागहरू अपडेट हुन्छन् (स्मार्ट, हैन र?) - अब झट्काहरू छैनन् - तपाईंका प्रयोगकर्ताहरू आफ्नो प्रवाहमा रहन्छन्। - तारमा कम डेटा यात्रा गर्दा छिटो लोड हुन्छ। - सबै कुरा फोनका एप्स जस्तै चपल र प्रतिक्रियात्मक लाग्छ। ### आधुनिक Fetch API तर्फको विकास आधुनिक ब्राउजरहरूले [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) प्रदान गर्छन्, जसले पुरानो [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) लाई प्रतिस्थापन गर्छ। टेलिग्राफ चलाउने र इमेल प्रयोग गर्ने बीचको फरक जस्तै, Fetch API ले सफा असिंक्रोनस कोडका लागि प्रॉमिसहरू प्रयोग गर्छ र JSON स्वाभाविक रूपमा व्यवस्थापन गर्छ। | विशेषता | XMLHttpRequest | Fetch API | |---------|----------------|----------| | **सिन्ट्याक्स** | जटिल क्यालब्याक-आधारित | सफा प्रॉमिस-आधारित | | **JSON व्यवस्थापन** | म्यानुअल पार्सिङ आवश्यक | बिल्ट-इन `.json()` विधि | | **त्रुटि व्यवस्थापन** | सीमित त्रुटि जानकारी | व्यापक त्रुटि विवरण | | **आधुनिक समर्थन** | पुरानो अनुकूलता | ES6+ प्रॉमिस र async/await | > 💡 **ब्राउजर अनुकूलता**: राम्रो खबर - Fetch API सबै आधुनिक ब्राउजरहरूमा काम गर्छ! यदि तपाईंलाई विशेष संस्करणहरूको बारेमा जिज्ञासा छ भने, [caniuse.com](https://caniuse.com/fetch) मा पूर्ण अनुकूलता कथा छ। > **मुख्य कुरा:** - Chrome, Firefox, Safari, र Edge मा राम्रोसँग काम गर्छ (मूलतः जहाँ तपाईंका प्रयोगकर्ताहरू छन् त्यहाँ) - केवल Internet Explorer ले अतिरिक्त सहयोग चाहिन्छ (र इमानदारीपूर्वक, IE लाई छोड्ने समय आएको छ) - हामीले पछि प्रयोग गर्ने सुन्दर async/await ढाँचाहरूका लागि तपाईंलाई पूर्ण रूपमा तयार बनाउँछ। ### प्रयोगकर्ता लगइन र डेटा प्राप्ति कार्यान्वयन गर्दै अब हामी लगइन प्रणाली कार्यान्वयन गर्नेछौं जसले तपाईंको बैंकिङ एपलाई स्थिर प्रदर्शनबाट कार्यात्मक एप्लिकेसनमा रूपान्तरण गर्छ। जस्तै सुरक्षित सैन्य सुविधाहरूमा प्रयोग गरिने प्रमाणीकरण प्रोटोकलहरू, हामी प्रयोगकर्ताको प्रमाणिकता पुष्टि गर्नेछौं र त्यसपछि उनीहरूको विशिष्ट डेटा प्रदान गर्नेछौं। हामी यसलाई क्रमिक रूपमा निर्माण गर्नेछौं, आधारभूत प्रमाणीकरणबाट सुरु गर्दै र त्यसपछि डेटा प्राप्ति क्षमताहरू थप्दै। #### चरण १: लगइन फंक्शनको आधार सिर्जना गर्नुहोस् तपाईंको `app.js` फाइल खोल्नुहोस् र नयाँ `login` फंक्शन थप्नुहोस्। यसले प्रयोगकर्ता प्रमाणीकरण प्रक्रिया व्यवस्थापन गर्नेछ: ```javascript async function login() { const loginForm = document.getElementById('loginForm'); const user = loginForm.user.value; } ``` **यसलाई टुक्रा-टुक्रामा बुझौं:** - त्यो `async` कीवर्ड? यसले JavaScript लाई भन्छ "हे, यो फंक्शनले कुराहरूको लागि पर्खनु पर्छ।" - हामी हाम्रो पृष्ठबाट फारम समात्दैछौं (केही विशेष छैन, केवल यसको ID द्वारा खोज्दैछौं।) - त्यसपछि हामी प्रयोगकर्ताले टाइप गरेको प्रयोगकर्ता नाम निकाल्दैछौं। - यहाँ एउटा राम्रो ट्रिक छ: तपाईं कुनै पनि फारम इनपुटलाई यसको `name` एट्रिब्युटद्वारा पहुँच गर्न सक्नुहुन्छ - अतिरिक्त getElementById कलहरूको आवश्यकता छैन! > 💡 **फारम पहुँच ढाँचा**: प्रत्येक फारम कन्ट्रोललाई यसको नाम (HTML मा `name` एट्रिब्युट प्रयोग गरेर सेट गरिएको) द्वारा फारम एलिमेन्टको गुणको रूपमा पहुँच गर्न सकिन्छ। यसले फारम डेटा प्राप्त गर्न सफा, पढ्न मिल्ने तरिका प्रदान गर्दछ। #### चरण २: खाता डेटा प्राप्ति फंक्शन सिर्जना गर्नुहोस् अगाडि, हामी सर्भरबाट खाता डेटा प्राप्त गर्न समर्पित फंक्शन सिर्जना गर्नेछौं। यो तपाईंको रजिस्ट्रेसन फंक्शनको समान ढाँचालाई पछ्याउँछ तर डेटा प्राप्तिमा केन्द्रित छ: ```javascript async function getAccount(user) { try { const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user)); return await response.json(); } catch (error) { return { error: error.message || 'Unknown error' }; } } ``` **यस कोडले के पूरा गर्छ:** - **आधुनिक `fetch` API प्रयोग गरेर** डेटा असिंक्रोनस रूपमा अनुरोध गर्छ। - **GET अनुरोध URL निर्माण गर्छ** प्रयोगकर्ता नाम प्यारामिटरको साथ। - **`encodeURIComponent()` लागू गर्छ** URL मा विशेष क्यारेक्टरहरू सुरक्षित रूपमा व्यवस्थापन गर्न। - **प्रतिक्रिया JSON ढाँचामा रूपान्तरण गर्छ** डेटा हेरफेर गर्न सजिलो बनाउन। - **त्रुटिहरूलाई सुन्दर रूपमा व्यवस्थापन गर्छ** त्रुटि वस्तु फर्काएर क्र्यास नगरी। > ⚠️ **सुरक्षा नोट**: `encodeURIComponent()` फंक्शनले URL मा विशेष क्यारेक्टरहरू व्यवस्थापन गर्छ। जस्तै नौसेनाको सञ्चार प्रणालीमा प्रयोग गरिने एन्कोडिङ प्रणाली, यसले तपाईंको सन्देश ठीक त्यस्तै रूपमा पुग्छ भनी सुनिश्चित गर्छ, "#" वा "&" जस्ता क्यारेक्टरहरू गलत व्याख्या हुनबाट रोक्छ। > **किन यो महत्त्वपूर्ण छ:** - विशेष क्यारेक्टरहरूले URL तोड्नबाट रोक्छ। - URL हेरफेर आक्रमणबाट सुरक्षा प्रदान गर्छ। - तपाईंको सर्भरले इच्छित डेटा प्राप्त गर्छ भनी सुनिश्चित गर्छ। - सुरक्षित कोडिङ अभ्यासहरू पछ्याउँछ। #### HTTP GET अनुरोधहरू बुझ्दै जब तपाईं `fetch` बिना कुनै अतिरिक्त विकल्प प्रयोग गर्नुहुन्छ, यसले स्वतः [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) अनुरोध सिर्जना गर्छ। यो हामीले गरिरहेको कामका लागि उत्तम छ - सर्भरलाई सोध्दै "हे, म यो प्रयोगकर्ताको खाता डेटा देख्न सक्छु?" GET अनुरोधहरूलाई पुस्तकालयबाट पुस्तक उधारो माग्न जस्तै सोच्नुहोस् - तपाईंले पहिले नै रहेको केही हेर्न अनुरोध गर्दै हुनुहुन्छ। POST अनुरोधहरू (जसलाई हामीले रजिस्ट्रेसनका लागि प्रयोग गर्यौं) नयाँ पुस्तक संग्रहमा थप्न जस्तै छन्। | GET अनुरोध | POST अनुरोध | |-------------|-------------| | **उद्देश्य** | अवस्थित डेटा प्राप्त गर्नुहोस् | सर्भरमा नयाँ डेटा पठाउनुहोस् | | **प्यारामिटरहरू** | URL पथ/क्वेरी स्ट्रिङमा | अनुरोध बडीमा | | **क्यासिङ** | ब्राउजरद्वारा क्यास गर्न सकिन्छ | सामान्यतया क्यास गरिँदैन | | **सुरक्षा** | URL/लगहरूमा देखिने | अनुरोध बडीमा लुकेको | #### चरण ३: सबै कुरा एकसाथ ल्याउँदै अब सन्तोषजनक भागको लागि - तपाईंको खाता प्राप्ति फंक्शनलाई लगइन प्रक्रियासँग जडान गरौं। यहीँ सबै कुरा मिल्छ: ```javascript async function login() { const loginForm = document.getElementById('loginForm'); const user = loginForm.user.value; const data = await getAccount(user); if (data.error) { return console.log('loginError', data.error); } account = data; navigate('/dashboard'); } ``` यो फंक्शनले स्पष्ट क्रम पछ्याउँछ: - फारम इनपुटबाट प्रयोगकर्ता नाम निकाल्नुहोस्। - सर्भरबाट प्रयोगकर्ताको खाता डेटा अनुरोध गर्नुहोस्। - प्रक्रियाको क्रममा हुने कुनै पनि त्रुटिहरू व्यवस्थापन गर्नुहोस्। - खाता डेटा भण्डारण गर्नुहोस् र सफलतापछि ड्यासबोर्डमा नेभिगेट गर्नुहोस्। > 🎯 **Async/Await ढाँचा**: किनकि `getAccount` असिंक्रोनस फंक्शन हो, हामी `await` कीवर्ड प्रयोग गरेर कार्यान्वयनलाई रोक्छौं जबसम्म सर्भरले प्रतिक्रिया दिन्छ। यसले कोडलाई अपरिभाषित डेटा सहित अगाडि बढ्नबाट रोक्छ। #### चरण ४: तपाईंको डेटा राख्नको लागि घर सिर्जना गर्नुहोस् तपाईंको एपलाई खाता जानकारी लोड भएपछि सम्झनको लागि कुनै ठाउँ चाहिन्छ। यसलाई तपाईंको एपको छोटो समयको स्मृति जस्तै सोच्नुहोस् - हालको प्रयोगकर्ताको डेटा सजिलो पहुँचको लागि राख्ने ठाउँ। तपाईंको `app.js` फाइलको शीर्षमा यो लाइन थप्नुहोस्: ```javascript // This holds the current user's account data let account = null; ``` **किन हामीलाई यो चाहिन्छ:** - खाता डेटा तपाईंको एपको कुनै पनि ठाउँबाट पहुँचयोग्य राख्छ। - `null` बाट सुरु गर्नुको मतलब "अहिलेसम्म कोही लगइन भएको छैन।" - जब कोही सफलतापूर्वक लगइन वा रजिस्टर गर्छ, अपडेट हुन्छ। - सत्यको एकल स्रोतको रूपमा काम गर्छ - कोही लगइन भएको छ भनी भ्रम छैन। #### चरण ५: तपाईंको फारमलाई जडान गर्नुहोस् अब तपाईंको नयाँ लगइन फंक्शनलाई तपाईंको HTML फारमसँग जडान गरौं। तपाईंको फारम ट्यागलाई यसरी अपडेट गर्नुहोस्: ```html

``` **यो सानो परिवर्तनले के गर्छ:** - फारमलाई यसको डिफल्ट "सम्पूर्ण पृष्ठ पुनः लोड गर्ने" व्यवहार रोक्छ। - तपाईंको कस्टम JavaScript फंक्शनलाई कल गर्छ। - सबै कुरा चिल्लो र सिंगल-पेज-एप-जस्तै राख्छ। - प्रयोगकर्ताहरूले "लगइन" थिच्दा के हुन्छ भन्नेमा तपाईंलाई पूर्ण नियन्त्रण दिन्छ। #### चरण ६: तपाईंको रजिस्ट्रेसन फंक्शनलाई सुधार गर्नुहोस् सुसंगतताका लागि, तपाईंको `register` फंक्शनलाई पनि खाता डेटा भण्डारण गर्न र ड्यासबोर्डमा नेभिगेट गर्न अपडेट गर्नुहोस्: ```javascript // Add these lines at the end of your register function account = result; navigate('/dashboard'); ``` **यस सुधारले प्रदान गर्छ:** - **सजिलो** रजिस्ट्रेसनबाट ड्यासबोर्डमा संक्रमण। - **सुसंगत** प्रयोगकर्ता अनुभव लगइन र रजिस्ट्रेसन प्रवाहहरू बीच। - **तुरुन्तै** सफल रजिस्ट्रेसनपछि खाता डेटा पहुँच। #### तपाईंको कार्यान्वयन परीक्षण गर्दै ```mermaid flowchart TD A[User enters credentials] --> B[Login function called] B --> C[Fetch account data from server] C --> D{Data received successfully?} D -->|Yes| E[Store account data globally] D -->|No| F[Display error message] E --> G[Navigate to dashboard] F --> H[User stays on login page] ``` **अब यसलाई परीक्षण गर्ने समय:** 1. नयाँ खाता सिर्जना गरेर सबै कुरा काम गरिरहेको छ भनी सुनिश्चित गर्नुहोस्। 2. ती नै प्रमाणहरू प्रयोग गरेर लगइन प्रयास गर्नुहोस्। 3. यदि केही असामान्य लाग्छ भने तपाईंको ब्राउजरको कन्सोल (F12) हेर्नुहोस्। 4. सफल लगइनपछि ड्यासबोर्डमा पुग्न सुनिश्चित गर्नुहोस्। यदि केही काम गरिरहेको छैन भने, नआत्तिनुहोस्! अधिकांश समस्याहरू साधारण सुधारहरू हुन् जस्तै टाइपोहरू वा API सर्भर सुरु गर्न बिर्सनु। #### क्रस-ओरिजिन जादूको बारेमा छोटो शब्द तपाईं सोच्न सक्नुहुन्छ: "मेरो वेब एपले यो API सर्भरसँग कसरी कुरा गरिरहेको छ जब तिनीहरू फरक पोर्टमा चलिरहेका छन्?" राम्रो प्रश्न! यो प्रत्येक वेब विकासकर्ताले अन्ततः सामना गर्ने विषयलाई छुन्छ। > 🔒 **क्रस-ओरिजिन सुरक्षा**: ब्राउजरहरूले "साम-ओरिजिन नीति" लागू गर्छन् ताकि विभिन्न डोमेनहरू बीचको अनधिकृत सञ्चारलाई रोक्न सकियोस्। जस्तै पेन्टागनको चेकपोइन्ट प्रणाली, तिनीहरूले डेटा स्थानान्तरण अनुमति दिएर सञ्चारलाई प्रमाणित गर्छन्। > **हाम्रो सेटअपमा:** - तपाईंको वेब एप `localhost:3000` मा चल्छ (विकास सर्भर) - तपाईंको API सर्भर `localhost:5000` मा चल्छ (ब्याकएन्ड सर्भर) - API सर्भरले [CORS हेडरहरू](https://developer.mozilla.org/docs/Web/HTTP/CORS) समावेश गर्छ जसले तपाईंको वेब एपबाट सञ्चारलाई स्पष्ट रूपमा अनुमति दिन्छ। यो कन्फिगरेसन वास्तविक-विश्व विकासलाई प्रतिबिम्बित गर्छ जहाँ फ्रन्टएन्ड र ब्याकएन्ड एप्लिकेसनहरू सामान्यतया अलग सर्भरहरूमा चल्छन्। > 📚 **थप जान्नुहोस्**: API हरू र डेटा प्राप्तिमा गहिरो डुब्नको लागि यो व्यापक [Microsoft Learn मोड्युल](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon) हेर्नुहोस्। ## HTML मा तपाईंको डेटा जीवन्त बनाउँदै अब हामी प्राप्त गरिएको डेटा प्रयोगकर्ताहरूलाई DOM म्यानिपुलेसनको माध्यमबाट देखिने बनाउनेछौं। जस्तै अँध्यारो कोठामा फोटोहरू विकास गर्ने प्रक्रिया, हामी अदृश्य डेटा लिँदैछौं र यसलाई प्रयोगकर्ताहरूले देख्न र अन्तरक्रिया गर्न सक्ने केहीमा प्रस्तुत गर्दैछौं। DOM म्यानिपुलेसन एक प्रविधि हो जसले स्थिर वेब पृष्ठहरूलाई गतिशील एप्लिकेसनहरूमा रूपान्तरण गर्छ, जसले प्रयोगकर्ता अन्तरक्रिया र सर्भर प्रतिक्रियाको आधारमा सामग्री अपडेट गर्दछ। ### कामको लागि सही उपकरण चयन गर्दै जब तपाईं आफ्नो HTML लाई JavaScript को साथ अपडेट गर्नुहुन्छ, तपाईंसँग धेरै विकल्पहरू छन्। यीलाई उपकरणको टूलबक्समा विभिन्न उपकरणहरू जस्तै सोच्नुहोस् - प्रत्येक विशिष्ट कामका लागि उत्तम। | विधि | यो केका लागि राम्रो छ | कहिले प्रयोग गर्ने | सुरक्षा स्तर | |--------|---------------------|----------------|--------------| | `textContent` | प्रयोगकर्ता डेटा सुरक्षित रूपमा देखाउन | जब तपाईं पाठ देखाउँदै हुनुहुन्छ | ✅ अत्यन्त सुरक्षित | | `createElement()` + `append()` | जटिल लेआउट निर्माण गर्न | नयाँ सेक्सन/सूचीहरू सिर्जना गर्दा | ✅ अत्यन्त सुरक्षित अधिक जटिल सामग्रीको लागि, [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) लाई [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) विधिसँग मिलाउनुहोस्: ```javascript // Safe way to create new elements const transactionItem = document.createElement('div'); transactionItem.className = 'transaction-item'; transactionItem.textContent = `${transaction.date}: ${transaction.description}`; container.append(transactionItem); ``` **यस विधिको बुझाइ:** - **नयाँ DOM तत्वहरू** प्रोग्राममार्फत सिर्जना गर्दछ - **तत्वहरूको विशेषता र सामग्रीमा** पूर्ण नियन्त्रण राख्छ - **जटिल, nested तत्व संरचनाहरूको लागि अनुमति दिन्छ** - **सुरक्षा कायम राख्छ** सामग्रीलाई संरचनाबाट अलग गरेर > ⚠️ **सुरक्षा विचार**: जबकि [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) धेरै ट्यूटोरियलहरूमा देखिन्छ, यसले embedded स्क्रिप्टहरू कार्यान्वयन गर्न सक्छ। CERN मा अनधिकृत कोड कार्यान्वयन रोक्नका लागि सुरक्षा प्रोटोकलहरू जस्तै, `textContent` र `createElement` प्रयोग गर्दा सुरक्षित विकल्पहरू प्रदान गर्दछ। > **innerHTML को जोखिमहरू:** - प्रयोगकर्ता डेटा भित्रका कुनै पनि `