# کھیل بنانا ایونٹس کے ذریعے
کیا آپ نے کبھی سوچا ہے کہ ویب سائٹس کو کیسے پتہ چلتا ہے جب آپ کوئی بٹن کلک کرتے ہیں یا ٹیکسٹ باکس میں کچھ ٹائپ کرتے ہیں؟ یہ ایونٹ ڈرائیون پروگرامنگ کا جادو ہے! اس اہم مہارت کو سیکھنے کا بہترین طریقہ یہ ہے کہ کچھ مفید بنائیں - ایک ٹائپنگ اسپیڈ گیم جو آپ کے ہر کی اسٹروک پر ردعمل ظاہر کرے۔
آپ خود دیکھیں گے کہ ویب براؤزرز آپ کے جاوا اسکرپٹ کوڈ سے "بات" کیسے کرتے ہیں۔ جب بھی آپ کلک کرتے ہیں، ٹائپ کرتے ہیں، یا ماؤس کو حرکت دیتے ہیں، براؤزر آپ کے کوڈ کو چھوٹے پیغامات (جنہیں ہم ایونٹس کہتے ہیں) بھیج رہا ہوتا ہے، اور آپ فیصلہ کرتے ہیں کہ کیسے ردعمل دینا ہے!
جب ہم یہاں ختم کریں گے، تو آپ نے ایک حقیقی ٹائپنگ گیم بنایا ہوگا جو آپ کی رفتار اور درستگی کو ٹریک کرے گا۔ اس سے بھی اہم بات یہ ہے کہ آپ ان بنیادی تصورات کو سمجھیں گے جو ہر انٹرایکٹو ویب سائٹ کو طاقت دیتے ہیں جو آپ نے کبھی استعمال کی ہے۔ آئیے شروع کریں!
## لیکچر سے پہلے کا کوئز
[لیکچر سے پہلے کا کوئز](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"` ہو |
| اسٹارٹ بٹن | گیم شروع کرتا ہے | `