# بینکنگ ایپ بنائیں حصہ 3: ڈیٹا حاصل کرنے اور استعمال کرنے کے طریقے اسٹار ٹریک میں انٹرپرائز کے کمپیوٹر کے بارے میں سوچیں - جب کیپٹن پیکارڈ جہاز کی حالت کے بارے میں پوچھتے ہیں، تو معلومات فوراً ظاہر ہوتی ہیں بغیر پورے انٹرفیس کو بند کیے اور دوبارہ تعمیر کیے۔ معلومات کا یہ ہموار بہاؤ بالکل وہی ہے جو ہم یہاں متحرک ڈیٹا حاصل کرنے کے ساتھ بنا رہے ہیں۔ اس وقت، آپ کی بینکنگ ایپ ایک چھپے ہوئے اخبار کی طرح ہے - معلوماتی لیکن جامد۔ ہم اسے ناسا کے مشن کنٹرول کی طرح کچھ میں تبدیل کرنے جا رہے ہیں، جہاں ڈیٹا مسلسل بہتا ہے اور حقیقی وقت میں اپ ڈیٹ ہوتا ہے بغیر صارف کے ورک فلو میں خلل ڈالے۔ آپ سیکھیں گے کہ سرورز کے ساتھ غیر متزامن طور پر کیسے بات چیت کی جائے، مختلف اوقات میں آنے والے ڈیٹا کو کیسے ہینڈل کیا جائے، اور خام معلومات کو صارفین کے لیے معنی خیز چیز میں کیسے تبدیل کیا جائے۔ یہ ایک ڈیمو اور پروڈکشن کے لیے تیار سافٹ ویئر کے درمیان فرق ہے۔ ## لیکچر سے پہلے کا کوئز [لیکچر سے پہلے کا کوئز](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) ```  **کیوں SPAs بہت بہتر محسوس ہوتے ہیں:** - صرف وہ حصے جو واقعی تبدیل ہوئے ہیں اپ ڈیٹ ہوتے ہیں (سمارٹ، ہے نا؟) - مزید جھٹکے دار خلل نہیں - آپ کے صارفین اپنے بہاؤ میں رہتے ہیں۔ - تار پر کم ڈیٹا سفر کرنے کا مطلب ہے تیز لوڈنگ۔ - سب کچھ تیز اور جوابدہ محسوس ہوتا ہے، جیسے آپ کے فون پر ایپس۔ ### جدید 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) کے پاس مکمل مطابقت کی کہانی ہے۔ > **خلاصہ:** - کروم، فائر فاکس، سفاری، اور ایج میں بہترین کام کرتا ہے (بنیادی طور پر جہاں آپ کے صارفین ہیں) - صرف انٹرنیٹ ایکسپلورر کو اضافی مدد کی ضرورت ہے (اور ایمانداری سے، IE کو جانے دینا وقت ہے) - آپ کو ان خوبصورت async/await پیٹرنز کے لیے بالکل تیار کرتا ہے جنہیں ہم بعد میں استعمال کریں گے۔ ### صارف لاگ ان اور ڈیٹا حاصل کرنے کا نفاذ اب آئیے لاگ ان سسٹم کو نافذ کریں جو آپ کی بینکنگ ایپ کو جامد ڈسپلے سے فعال ایپلیکیشن میں تبدیل کرتا ہے۔ جیسے محفوظ فوجی سہولیات میں استعمال ہونے والے تصدیقی پروٹوکول، ہم صارف کی اسناد کی تصدیق کریں گے اور پھر ان کے مخصوص ڈیٹا تک رسائی فراہم کریں گے۔ ہم اسے بتدریج بنائیں گے، بنیادی تصدیق سے شروع کرتے ہوئے اور پھر ڈیٹا حاصل کرنے کی صلاحیتیں شامل کریں گے۔ #### مرحلہ 1: لاگ ان فنکشن کی بنیاد بنائیں اپنے `app.js` فائل کو کھولیں اور ایک نیا `login` فنکشن شامل کریں۔ یہ صارف کی تصدیق کے عمل کو ہینڈل کرے گا: ```javascript async function login() { const loginForm = document.getElementById('loginForm'); const user = loginForm.user.value; } ``` **آئیے اسے توڑتے ہیں:** - وہ `async` کلیدی لفظ؟ یہ جاوا اسکرپٹ کو بتا رہا ہے "ارے، اس فنکشن کو چیزوں کے انتظار کی ضرورت ہو سکتی ہے" - ہم اپنے صفحے سے فارم کو پکڑ رہے ہیں (کچھ خاص نہیں، بس اسے اس کے ID کے ذریعے تلاش کر رہے ہیں) - پھر ہم جو کچھ بھی صارف نے اپنا یوزر نیم کے طور پر ٹائپ کیا ہے اسے نکال رہے ہیں۔ - یہاں ایک زبردست چال ہے: آپ کسی بھی فارم ان پٹ کو اس کے `name` ایٹریبیوٹ کے ذریعے رسائی حاصل کر سکتے ہیں - اضافی getElementById کالز کی ضرورت نہیں! > 💡 **فارم رسائی کا پیٹرن**: ہر فارم کنٹرول کو اس کے نام (HTML میں `name` ایٹریبیوٹ کا استعمال کرتے ہوئے سیٹ کیا گیا) کے ذریعے فارم عنصر کی پراپرٹی کے طور پر رسائی حاصل کی جا سکتی ہے۔ یہ فارم ڈیٹا حاصل کرنے کا ایک صاف، قابل پڑھنے طریقہ فراہم کرتا ہے۔ #### مرحلہ 2: اکاؤنٹ ڈیٹا حاصل کرنے کا فنکشن بنائیں اگلے، ہم سرور سے اکاؤنٹ ڈیٹا حاصل کرنے کے لیے ایک مخصوص فنکشن بنائیں گے۔ یہ آپ کے رجسٹریشن فنکشن کے اسی پیٹرن کی پیروی کرتا ہے لیکن ڈیٹا حاصل کرنے پر مرکوز ہے: ```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()` خاص کرداروں کو URLs میں محفوظ طریقے سے ہینڈل کرنے کے لیے۔ - **تبدیل کرتا ہے** جواب کو JSON فارمیٹ میں آسان ڈیٹا ہیرا پھیری کے لیے۔ - **ہینڈل کرتا ہے** غلطیوں کو خوبصورتی سے غلطی کے آبجیکٹ کو واپس کرکے بجائے کریش ہونے کے۔ > ⚠️ **سیکیورٹی نوٹ**: `encodeURIComponent()` فنکشن URLs میں خاص کرداروں کو ہینڈل کرتا ہے۔ جیسے بحری مواصلات میں استعمال ہونے والے انکوڈنگ سسٹمز، یہ یقینی بناتا ہے کہ آپ کا پیغام بالکل اسی طرح پہنچے جیسا کہ ارادہ کیا گیا تھا، جیسے "#" یا "&" جیسے کرداروں کو غلط تشریح سے روکنا۔ > **یہ کیوں اہم ہے:** - خاص کرداروں کو URLs کو توڑنے سے روکتا ہے۔ - URL ہیرا پھیری کے حملوں سے بچاتا ہے۔ - یقینی بناتا ہے کہ آپ کا سرور مطلوبہ ڈیٹا وصول کرے۔ - محفوظ کوڈنگ کے طریقوں کی پیروی کرتا ہے۔ #### HTTP GET درخواستوں کو سمجھنا یہ آپ کو حیران کر سکتا ہے: جب آپ `fetch` کو بغیر کسی اضافی آپشن کے استعمال کرتے ہیں، تو یہ خود بخود [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) درخواست بناتا ہے۔ یہ اس کے لیے بہترین ہے جو ہم کر رہے ہیں - سرور سے پوچھنا "ارے، کیا میں اس صارف کے اکاؤنٹ ڈیٹا کو دیکھ سکتا ہوں؟" GET درخواستوں کے بارے میں سوچیں جیسے لائبریری سے کتاب ادھار لینے کے لیے شائستگی سے پوچھنا - آپ موجودہ چیز کو دیکھنے کی درخواست کر رہے ہیں۔ POST درخواستیں (جو ہم نے رجسٹریشن کے لیے استعمال کیں) زیادہ نئی کتاب جمع کرانے جیسی ہیں تاکہ مجموعہ میں شامل کی جا سکے۔ | GET درخواست | POST درخواست | |-------------|-------------| | **مقصد** | موجودہ ڈیٹا حاصل کریں | سرور کو نیا ڈیٹا بھیجیں | | **پیرامیٹرز** | URL راستہ/کوئری سٹرنگ میں | درخواست کے جسم میں | | **کیچنگ** | براؤزرز کے ذریعے کیچ کیا جا سکتا ہے | عام طور پر کیچ نہیں کیا جاتا | | **سیکیورٹی** | URL/لاگز میں نظر آتا ہے | درخواست کے جسم میں چھپا ہوا | #### مرحلہ 3: سب کچھ ایک ساتھ لانا اب اطمینان بخش حصہ - آئیے آپ کے اکاؤنٹ حاصل کرنے کے فنکشن کو لاگ ان عمل سے جوڑتے ہیں۔ یہ وہ جگہ ہے جہاں سب کچھ اپنی جگہ پر آتا ہے: ```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` کلیدی لفظ استعمال کرتے ہیں تاکہ عمل کو اس وقت تک روک دیا جائے جب تک کہ سرور جواب نہ دے۔ یہ کوڈ کو غیر متعین ڈیٹا کے ساتھ جاری رکھنے سے روکتا ہے۔ #### مرحلہ 4: آپ کے ڈیٹا کے لیے ایک گھر بنانا آپ کی ایپ کو کہیں نہ کہیں اکاؤنٹ کی معلومات کو یاد رکھنے کی ضرورت ہے جب یہ لوڈ ہو جائے۔ اس کے بارے میں سوچیں جیسے آپ کی ایپ کی قلیل مدتی یادداشت - موجودہ صارف کے ڈیٹا کو آسانی سے رکھنے کی جگہ۔ اپنے `app.js` فائل کے اوپر یہ لائن شامل کریں: ```javascript // This holds the current user's account data let account = null; ``` **ہمیں اس کی ضرورت کیوں ہے:** - اکاؤنٹ ڈیٹا کو آپ کی ایپ کے کسی بھی جگہ سے قابل رسائی رکھتا ہے۔ - `null` کے ساتھ شروع کرنا مطلب ہے "ابھی تک کوئی لاگ ان نہیں ہوا ہے" - جب کوئی کامیابی سے لاگ ان یا رجسٹر کرتا ہے تو اپ ڈیٹ ہو جاتا ہے۔ - سچائی کا واحد ذریعہ کی طرح کام کرتا ہے - اس بات پر کوئی الجھن نہیں کہ کون لاگ ان ہے۔ #### مرحلہ 5: اپنے فارم کو وائر کریں اب آئیے آپ کے چمکدار نئے لاگ ان فنکشن کو آپ کے HTML فارم سے جوڑتے ہیں۔ اپنے فارم ٹیگ کو اس طرح اپ ڈیٹ کریں: ```html

``` **یہ چھوٹی سی تبدیلی کیا کرتی ہے:** - فارم کو اس کے ڈیفالٹ "پورے صفحے کو دوبارہ لوڈ کریں" رویے کو روک دیتی ہے۔ - آپ کے کسٹم جاوا اسکرپٹ فنکشن کو کال کرتی ہے۔ - سب کچھ ہموار اور سنگل پیج ایپ جیسا رکھتی ہے۔ - صارفین کے "لاگ ان" دبانے پر کیا ہوتا ہے اس پر آپ کو مکمل کنٹرول دیتی ہے۔ #### مرحلہ 6: اپنے رجسٹریشن فنکشن کو بہتر بنائیں مطابقت کے لیے، اپنے `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) شامل ہیں جو آپ کی ویب ایپ سے مواصلات کی واضح طور پر اجازت دیتے ہیں۔ یہ ترتیب حقیقی دنیا کی ترقی کی عکاسی کرتی ہے جہاں فرنٹ اینڈ اور بیک اینڈ ایپلیکیشنز عام طور پر الگ الگ سرورز پر چلتی ہیں۔ > 📚 **مزید سیکھیں**: APIs اور ڈیٹا حاصل کرنے کے بارے میں مزید گہرائی سے جاننے کے لیے یہ جامع [Microsoft Learn ماڈیول](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon) دیکھیں۔ ## آپ کے ڈیٹا کو HTML میں زندہ کرنا اب ہم حاصل کردہ ڈیٹا کو DOM ہیرا پھیری کے ذریعے صارفین کے لیے مرئی بنائیں گے۔ جیسے ایک تاریک کمرے میں فوٹوگراف تیار کرنے کا عمل، ہم پوشیدہ ڈیٹا لے رہے ہیں اور اسے کچھ ایسا پیش کر رہے ہیں جسے صارفین دیکھ اور تعامل کر سکیں۔ DOM ہیرا پھیری وہ تکنیک ہے جو جامد ویب صفحات کو متحرک ایپلیکیشنز میں تبدیل زیادہ پیچیدہ مواد کے لیے، [`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 scripts کو چلا سکتا ہے۔ جیسے CERN کے سیکیورٹی پروٹوکول غیر مجاز کوڈ کے نفاذ کو روکتے ہیں، `textContent` اور `createElement` کا استعمال محفوظ متبادل فراہم کرتا ہے۔ > **innerHTML کے خطرات:** - صارف کے ڈیٹا میں موجود کسی بھی `