# کھیل بنانا ایونٹس کے ذریعے
کیا آپ نے کبھی سوچا ہے کہ ویب سائٹس کو کیسے پتہ چلتا ہے جب آپ بٹن پر کلک کرتے ہیں یا ٹیکسٹ باکس میں کچھ ٹائپ کرتے ہیں؟ یہ ایونٹ ڈرائیون پروگرامنگ کا جادو ہے! اس اہم مہارت کو سیکھنے کا بہترین طریقہ یہ ہے کہ کچھ مفید بنائیں - ایک ٹائپنگ اسپیڈ گیم جو آپ کے ہر کی اسٹروک پر ردعمل ظاہر کرے۔
آپ خود دیکھیں گے کہ ویب براؤزرز آپ کے جاوا اسکرپٹ کوڈ سے "بات" کیسے کرتے ہیں۔ جب بھی آپ کلک کرتے ہیں، ٹائپ کرتے ہیں، یا ماؤس کو حرکت دیتے ہیں، براؤزر آپ کے کوڈ کو چھوٹے پیغامات (جنہیں ہم ایونٹس کہتے ہیں) بھیج رہا ہوتا ہے، اور آپ فیصلہ کرتے ہیں کہ ان پر کیسے ردعمل دینا ہے!
جب ہم یہاں ختم کریں گے، تو آپ نے ایک حقیقی ٹائپنگ گیم بنائی ہوگی جو آپ کی رفتار اور درستگی کو ٹریک کرے گی۔ سب سے اہم بات، آپ ان بنیادی تصورات کو سمجھیں گے جو ہر انٹرایکٹو ویب سائٹ کو طاقت دیتے ہیں جو آپ نے کبھی استعمال کی ہے۔ آئیے شروع کریں!
## لیکچر سے پہلے کا کوئز
[لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/quiz/21)
## ایونٹ ڈرائیون پروگرامنگ
اپنی پسندیدہ ایپ یا ویب سائٹ کے بارے میں سوچیں - اسے زندہ اور جوابدہ کیا بناتا ہے؟ یہ سب اس بات پر منحصر ہے کہ یہ آپ کے اعمال پر کیسے ردعمل ظاہر کرتی ہے! ہر ٹیپ، کلک، سوائپ، یا کی اسٹروک ایک "ایونٹ" پیدا کرتا ہے، اور یہی وہ جگہ ہے جہاں ویب ڈیولپمنٹ کا حقیقی جادو ہوتا ہے۔
ویب کے لیے پروگرامنگ کو دلچسپ بنانے والی بات یہ ہے: ہمیں کبھی نہیں معلوم کہ کوئی کب اس بٹن پر کلک کرے گا یا ٹیکسٹ باکس میں ٹائپ کرنا شروع کرے گا۔ وہ فوراً کلک کر سکتے ہیں، پانچ منٹ انتظار کر سکتے ہیں، یا شاید کبھی کلک نہ کریں! اس غیر یقینی صورتحال کا مطلب ہے کہ ہمیں اپنے کوڈ لکھنے کے بارے میں مختلف انداز میں سوچنا ہوگا۔
ایک نسخے کی طرح اوپر سے نیچے تک چلنے والے کوڈ لکھنے کے بجائے، ہم ایسا کوڈ لکھتے ہیں جو صبر سے کسی چیز کے ہونے کا انتظار کرتا ہے۔ یہ بالکل ویسا ہی ہے جیسے 1800 کی دہائی میں ٹیلی گراف آپریٹرز اپنی مشینوں کے پاس بیٹھ کر تار کے ذریعے پیغام آنے کا انتظار کرتے تھے۔
تو بالکل "ایونٹ" کیا ہے؟ سیدھے الفاظ میں، یہ کچھ ایسا ہے جو ہوتا ہے! جب آپ بٹن پر کلک کرتے ہیں - یہ ایک ایونٹ ہے۔ جب آپ ایک حرف ٹائپ کرتے ہیں - یہ ایک ایونٹ ہے۔ جب آپ ماؤس کو حرکت دیتے ہیں - یہ ایک اور ایونٹ ہے۔
ایونٹ ڈرائیون پروگرامنگ ہمیں اپنے کوڈ کو سننے اور جواب دینے کے لیے ترتیب دینے دیتی ہے۔ ہم خاص فنکشنز بناتے ہیں جنہیں **ایونٹ لسٹنرز** کہا جاتا ہے جو مخصوص چیزوں کے ہونے کا صبر سے انتظار کرتے ہیں، پھر جب وہ ہوتے ہیں تو فوراً حرکت میں آ جاتے ہیں۔
ایونٹ لسٹنرز کو اپنے کوڈ کے لیے ڈور بیل رکھنے جیسا سمجھیں۔ آپ ڈور بیل ترتیب دیتے ہیں (`addEventListener()`)، اسے بتاتے ہیں کہ کس آواز کو سننا ہے (جیسے 'کلک' یا 'کی پریس')، اور پھر یہ بتاتے ہیں کہ جب کوئی اسے بجائے تو کیا ہونا چاہیے (آپ کا کسٹم فنکشن)۔
**ایونٹ لسٹنرز کیسے کام کرتے ہیں:**
- **سنتے ہیں** مخصوص صارف کے اعمال جیسے کلکس، کی اسٹروکس، یا ماؤس کی حرکت
- **عمل کرتے ہیں** آپ کے کسٹم کوڈ پر جب مخصوص ایونٹ ہوتا ہے
- **فوری ردعمل دیتے ہیں** صارف کے تعاملات پر، ایک ہموار تجربہ تخلیق کرتے ہیں
- **متعدد ایونٹس کو ہینڈل کرتے ہیں** ایک ہی عنصر پر مختلف لسٹنرز کے ذریعے
> **نوٹ:** یہ بات قابل ذکر ہے کہ ایونٹ لسٹنرز بنانے کے کئی طریقے ہیں۔ آپ گمنام فنکشنز استعمال کر سکتے ہیں، یا نامزد فنکشنز بنا سکتے ہیں۔ آپ مختلف شارٹ کٹس استعمال کر سکتے ہیں، جیسے `click` پراپرٹی سیٹ کرنا، یا `addEventListener()` استعمال کرنا۔ ہماری مشق میں ہم `addEventListener()` اور گمنام فنکشنز پر توجہ مرکوز کریں گے، کیونکہ یہ ویب ڈیولپرز کے استعمال کا سب سے عام طریقہ ہے۔ یہ سب سے زیادہ لچکدار بھی ہے، کیونکہ `addEventListener()` تمام ایونٹس کے لیے کام کرتا ہے، اور ایونٹ کا نام پیرامیٹر کے طور پر فراہم کیا جا سکتا ہے۔
### عام ایونٹس
جبکہ ویب براؤزرز درجنوں مختلف ایونٹس پیش کرتے ہیں جنہیں آپ سن سکتے ہیں، زیادہ تر انٹرایکٹو ایپلیکیشنز صرف چند ضروری ایونٹس پر انحصار کرتی ہیں۔ ان بنیادی ایونٹس کو سمجھنا آپ کو پیچیدہ صارف تعاملات بنانے کی بنیاد فراہم کرے گا۔
ایپلیکیشن بناتے وقت آپ کے سننے کے لیے [درجنوں ایونٹس](https://developer.mozilla.org/docs/Web/Events) دستیاب ہیں۔ بنیادی طور پر صارف کے صفحے پر کچھ بھی کرنے سے ایک ایونٹ پیدا ہوتا ہے، جو آپ کو بہت زیادہ طاقت دیتا ہے تاکہ وہ تجربہ فراہم کریں جو آپ چاہتے ہیں۔ خوش قسمتی سے، آپ کو عام طور پر صرف چند ایونٹس کی ضرورت ہوتی ہے۔ یہاں کچھ عام ایونٹس ہیں (جن میں سے دو ہم اپنے گیم بنانے میں استعمال کریں گے):
| ایونٹ | وضاحت | عام استعمال کے کیسز |
|-------|-------------|------------------|
| `click` | صارف نے کسی چیز پر کلک کیا | بٹن، لنکس، انٹرایکٹو عناصر |
| `contextmenu` | صارف نے دائیں ماؤس بٹن پر کلک کیا | کسٹم رائٹ کلک مینو |
| `select` | صارف نے کچھ ٹیکسٹ کو ہائی لائٹ کیا | ٹیکسٹ ایڈیٹنگ، کاپی آپریشنز |
| `input` | صارف نے کچھ ٹیکسٹ ان پٹ کیا | فارم ویلیڈیشن، ریئل ٹائم سرچ |
**ان ایونٹ کی اقسام کو سمجھنا:**
- **ٹریگرز** جب صارفین آپ کے صفحے پر مخصوص عناصر کے ساتھ تعامل کرتے ہیں
- **تفصیلی معلومات فراہم کرتے ہیں** صارف کے عمل کے بارے میں ایونٹ آبجیکٹس کے ذریعے
- **آپ کو قابل بناتے ہیں** کہ آپ جوابدہ، انٹرایکٹو ویب ایپلیکیشنز بنائیں
- **مختلف براؤزرز اور ڈیوائسز پر مستقل کام کرتے ہیں**
## گیم بنانا
اب جب کہ آپ ایونٹس کو سمجھ گئے ہیں، آئیے اس علم کو عملی جامہ پہنائیں اور کچھ مفید بنائیں۔ ہم ایک ٹائپنگ اسپیڈ گیم بنائیں گے جو ایونٹ ہینڈلنگ کو ظاہر کرے گا اور آپ کو ایک اہم ڈیولپر مہارت سیکھنے میں مدد دے گا۔
ہم ایک گیم بنانے جا رہے ہیں تاکہ جاوا اسکرپٹ میں ایونٹس کے کام کرنے کے طریقے کو دریافت کیا جا سکے۔ ہمارا گیم کھلاڑی کی ٹائپنگ کی مہارت کو جانچے گا، جو کہ تمام ڈیولپرز کے لیے ایک انتہائی اہم مہارت ہے۔ دلچسپ حقیقت: آج ہم جو QWERTY کی بورڈ لے آؤٹ استعمال کرتے ہیں وہ اصل میں 1870 کی دہائی میں ٹائپ رائٹرز کے لیے ڈیزائن کیا گیا تھا - اور اچھی ٹائپنگ کی مہارت آج بھی پروگرامرز کے لیے اتنی ہی قیمتی ہے! گیم کا عمومی بہاؤ کچھ اس طرح نظر آئے گا:
```mermaid
flowchart TD
A[Player clicks Start] --> B[Random quote displays]
B --> C[Player types in textbox]
C --> D{Word complete?}
D -->|Yes| E[Highlight next word]
D -->|No| F{Correct so far?}
F -->|Yes| G[Keep normal styling]
F -->|No| H[Show error styling]
E --> I{Quote complete?}
I -->|No| C
I -->|Yes| J[Show success message with time]
G --> C
H --> C
```
**ہمارا گیم کیسے کام کرے گا:**
- **شروع ہوتا ہے** جب کھلاڑی اسٹارٹ بٹن پر کلک کرتا ہے اور ایک رینڈم کوٹ دکھاتا ہے
- **کھلاڑی کی ٹائپنگ کی پیش رفت کو حقیقی وقت میں لفظ بہ لفظ ٹریک کرتا ہے**
- **موجودہ لفظ کو نمایاں کرتا ہے تاکہ کھلاڑی کی توجہ مرکوز رہے**
- **ٹائپنگ کی غلطیوں کے لیے فوری بصری فیڈبیک فراہم کرتا ہے**
- **کل وقت کا حساب لگاتا ہے اور کوٹ مکمل ہونے پر دکھاتا ہے**
آئیے اپنا گیم بنائیں اور ایونٹس کے بارے میں سیکھیں!
### فائل اسٹرکچر
کوڈنگ شروع کرنے سے پہلے، آئیے منظم ہو جائیں! شروع سے صاف فائل اسٹرکچر رکھنے سے آپ کو بعد میں پریشانیوں سے بچنے میں مدد ملے گی اور آپ کے پروجیکٹ کو زیادہ پیشہ ورانہ بنائے گا۔ 😊
ہم صرف تین فائلوں کے ساتھ چیزوں کو آسان رکھیں گے: `index.html` ہمارے صفحے کے اسٹرکچر کے لیے، `script.js` ہمارے تمام گیم لاجک کے لیے، اور `style.css` سب کچھ اچھا دکھانے کے لیے۔ یہ وہ کلاسک تریو ہے جو زیادہ تر ویب کو طاقت دیتا ہے!
**کنسول یا ٹرمینل ونڈو کھول کر اپنے کام کے لیے ایک نیا فولڈر بنائیں اور درج ذیل کمانڈ جاری کریں:**
```bash
# Linux or macOS
mkdir typing-game && cd typing-game
# Windows
md typing-game && cd typing-game
```
**یہ کمانڈز کیا کرتی ہیں:**
- **ایک نیا ڈائریکٹری بناتی ہیں** جس کا نام `typing-game` ہے آپ کے پروجیکٹ فائلز کے لیے
- **خود بخود نئے بنائے گئے ڈائریکٹری میں جاتی ہیں**
- **آپ کے گیم ڈیولپمنٹ کے لیے ایک صاف ورک اسپیس ترتیب دیتی ہیں**
**ویژول اسٹوڈیو کوڈ کھولیں:**
```bash
code .
```
**یہ کمانڈ:**
- **ویژول اسٹوڈیو کوڈ کو موجودہ ڈائریکٹری میں لانچ کرتی ہے**
- **آپ کے پروجیکٹ فولڈر کو ایڈیٹر میں کھولتی ہے**
- **آپ کو تمام ڈیولپمنٹ ٹولز تک رسائی فراہم کرتی ہے**
**ویژول اسٹوڈیو کوڈ میں فولڈر میں تین فائلیں شامل کریں جن کے نام درج ذیل ہیں:**
- `index.html` - آپ کے گیم کی اسٹرکچر اور مواد پر مشتمل ہے
- `script.js` - تمام گیم لاجک اور ایونٹ لسٹنرز کو ہینڈل کرتا ہے
- `style.css` - بصری ظاہری شکل اور اسٹائلنگ کی وضاحت کرتا ہے
## یوزر انٹرفیس بنائیں
اب آئیے وہ اسٹیج بنائیں جہاں ہمارا گیم ایکشن ہوگا! اس کو ایک اسپیس شپ کے کنٹرول پینل کو ڈیزائن کرنے جیسا سمجھیں - ہمیں یہ یقینی بنانا ہوگا کہ ہمارے کھلاڑیوں کو جو کچھ بھی چاہیے وہ وہیں موجود ہو جہاں وہ توقع کرتے ہیں۔
آئیے معلوم کریں کہ ہمارے گیم کو اصل میں کیا ضرورت ہے۔ اگر آپ ٹائپنگ گیم کھیل رہے ہوتے، تو آپ اسکرین پر کیا دیکھنا چاہتے؟ یہاں وہ چیزیں ہیں جن کی ہمیں ضرورت ہوگی:
| UI عنصر | مقصد | HTML عنصر |
|------------|---------|-------------|
| کوٹ ڈسپلے | ٹائپ کرنے کے لیے ٹیکسٹ دکھاتا ہے | `
` جس کا `id="quote"` ہو |
| میسج ایریا | اسٹیٹس اور کامیابی کے پیغامات دکھاتا ہے | `
` جس کا `id="message"` ہو |
| ٹیکسٹ انپٹ | جہاں کھلاڑی کوٹ ٹائپ کرتے ہیں | `` جس کا `id="typed-value"` ہو |
| اسٹارٹ بٹن | گیم شروع کرتا ہے | `