# پروگرامنگ زبانوں اور جدید ڈیولپر ٹولز کا تعارف
پروگرامنگ کی دلچسپ دنیا میں خوش آمدید! یہ سبق آپ کو ان بنیادی تصورات سے روشناس کرائے گا جو ہر ویب سائٹ، ایپ، اور ڈیجیٹل تجربے کو طاقت دیتے ہیں جو آپ روزانہ استعمال کرتے ہیں۔ آپ جانیں گے کہ پروگرامنگ زبانیں کیا ہیں، وہ کیسے کام کرتی ہیں، اور کیوں یہ ہماری ڈیجیٹل دنیا کی بنیاد ہیں۔
پروگرامنگ شروع میں پراسرار لگ سکتی ہے، لیکن اسے ایک نئی زبان سیکھنے کے طور پر سوچیں – ایک ایسی زبان جو آپ کو کمپیوٹرز کے ساتھ بات چیت کرنے اور اپنے تخلیقی خیالات کو حقیقت میں بدلنے کی اجازت دیتی ہے۔ چاہے آپ ویب سائٹس بنانا چاہتے ہوں، موبائل ایپس تخلیق کرنا چاہتے ہوں، یا روزمرہ کے کاموں کو خودکار بنانا چاہتے ہوں، پروگرامنگ زبانوں کو سمجھنا ڈیجیٹل تخلیقی صلاحیت اور مسئلے کو حل کرنے کی طرف پہلا قدم ہے۔
اس سبق میں، آپ ان ضروری ٹولز کو دریافت کریں گے جو جدید ویب ڈیولپرز روزانہ استعمال کرتے ہیں۔ کوڈ ایڈیٹرز سے لے کر جو آپ کو صاف، مؤثر کوڈ لکھنے میں مدد دیتے ہیں، براؤزرز تک جو آپ کو اپنی تخلیقات کو ٹیسٹ اور ڈیبگ کرنے دیتے ہیں، آپ کو دنیا بھر کے اعلیٰ ٹیک کمپنیوں کے ڈیولپرز کے استعمال کردہ پیشہ ورانہ ٹولز کے ساتھ عملی تجربہ حاصل ہوگا۔
> اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی جانب سے
## لیکچر سے پہلے کا کوئز
[لیکچر سے پہلے کا کوئز](https://forms.office.com/r/dru4TE0U9n?origin=lprLink)
## آپ کیا سیکھیں گے
اس جامع تعارف میں، آپ دریافت کریں گے:
- **پروگرامنگ کیا ہے اور یہ کیوں اہم ہے** – ڈیجیٹل حل تخلیق کرنے میں پروگرامنگ کے کردار کو سمجھنا
- **پروگرامنگ زبانوں کی اقسام اور ان کے استعمال** – جاوا اسکرپٹ سے لے کر پائتھون تک زبانوں کے منظرنامے کو دریافت کرنا
- **پروگرام کے بنیادی عناصر** – کوڈ کو کام کرنے والے بنیادی بلاکس کو سیکھنا
- **پیشہ ور ڈیولپرز کے لیے جدید سافٹ ویئر اور ٹولنگ** – صنعت میں استعمال ہونے والے وہی ٹولز کے ساتھ عملی تجربہ حاصل کرنا
> 💡 **سیکھنے کا مشورہ**: ہر چیز کو یاد رکھنے کی فکر نہ کریں! تصورات کو سمجھنے پر توجہ دیں – آپ پورے نصاب کے دوران ان خیالات کو مشق اور مضبوط کریں گے۔
> آپ یہ سبق [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) پر لے سکتے ہیں!
## پروگرامنگ کیا ہے؟
پروگرامنگ (جسے کوڈنگ یا سافٹ ویئر ڈیولپمنٹ بھی کہا جاتا ہے) وہ عمل ہے جس میں ہدایات تخلیق کی جاتی ہیں جو کمپیوٹر، اسمارٹ فون، یا کسی بھی ڈیجیٹل ڈیوائس کو بالکل بتاتی ہیں کہ کیا کرنا ہے۔ اسے ایک بہت ہی تفصیلی نسخہ لکھنے کے طور پر سوچیں – سوائے اس کے کہ آپ کوکیز بنانے کے بجائے، آپ ویب سائٹس، گیمز، موبائل ایپس، یا یہاں تک کہ اسمارٹ ہوم کنٹرولز بنا رہے ہیں۔
یہ ہدایات خاص زبانوں میں لکھی جاتی ہیں جنہیں **پروگرامنگ زبانیں** کہا جاتا ہے، جو انسانی سوچ اور کمپیوٹر پروسیسنگ کے درمیان ایک پل کا کام کرتی ہیں۔ جبکہ کمپیوٹر صرف بائنری کوڈ (1s اور 0s) کو سمجھتے ہیں، پروگرامنگ زبانیں ہمیں ہدایات کو اس طرح لکھنے دیتی ہیں جو انسانوں کے لیے زیادہ قابل پڑھائی اور منطقی ہو۔
ہر ڈیجیٹل تجربہ جس کے ساتھ آپ تعامل کرتے ہیں، کسی کے کوڈ سے شروع ہوا: وہ سوشل میڈیا ایپ جسے آپ اسکرول کرتے ہیں، وہ GPS جو آپ کی ڈرائیو کی رہنمائی کرتا ہے، یہاں تک کہ آپ کے فون پر سادہ کیلکولیٹر۔ جب آپ پروگرامنگ سیکھتے ہیں، تو آپ ان ڈیجیٹل حلوں کو تخلیق کرنا سیکھ رہے ہیں جو حقیقی مسائل کو حل کر سکتے ہیں اور لاکھوں لوگوں کی زندگی کو آسان بنا سکتے ہیں۔
✅ **فوری تحقیق کا چیلنج**: دنیا کے پہلے کمپیوٹر پروگرامر کے طور پر کس کو سمجھا جاتا ہے؟ ایک لمحہ نکال کر اسے تلاش کریں – جواب آپ کو حیران کر سکتا ہے!
## پروگرامنگ زبانیں
جیسے انسان مختلف زبانیں بولتے ہیں جیسے انگریزی، ہسپانوی، یا مینڈارن، کمپیوٹر مختلف پروگرامنگ زبانوں کو سمجھ سکتے ہیں۔ ہر پروگرامنگ زبان کا اپنا نحو (گرامر کے اصول) ہوتا ہے اور مخصوص قسم کے کاموں کے لیے ڈیزائن کی گئی ہوتی ہے، جس سے کچھ زبانیں کچھ کاموں کے لیے زیادہ موزوں ہوتی ہیں۔
پروگرامنگ زبانیں انسانی خیالات اور کمپیوٹر کے اعمال کے درمیان مترجم کے طور پر کام کرتی ہیں۔ وہ ڈیولپرز کو ہدایات لکھنے کی اجازت دیتی ہیں جو انسانوں کے لیے قابل پڑھائی اور کمپیوٹر کے لیے قابل عمل ہوتی ہیں۔ جب آپ کسی پروگرامنگ زبان میں کوڈ لکھتے ہیں، تو خاص سافٹ ویئر آپ کی ہدایات کو بائنری کوڈ میں تبدیل کرتا ہے جو کمپیوٹرز اصل میں سمجھتے ہیں۔
### مشہور پروگرامنگ زبانیں اور ان کے استعمال
| زبان | بہترین استعمال | کیوں مشہور ہے |
|------|----------------|---------------|
| **جاوا اسکرپٹ** | ویب ڈیولپمنٹ، یوزر انٹرفیس | براؤزرز میں چلتی ہے اور انٹرایکٹو ویب سائٹس کو طاقت دیتی ہے |
| **پائتھون** | ڈیٹا سائنس، آٹومیشن، AI | پڑھنے اور سیکھنے میں آسان، طاقتور لائبریریاں |
| **جاوا** | انٹرپرائز ایپلیکیشنز، اینڈرائیڈ ایپس | پلیٹ فارم سے آزاد، بڑے سسٹمز کے لیے مضبوط |
| **C#** | ونڈوز ایپلیکیشنز، گیم ڈیولپمنٹ | مضبوط مائیکروسافٹ ایکو سسٹم سپورٹ |
| **گو** | کلاؤڈ سروسز، بیک اینڈ سسٹمز | تیز، سادہ، جدید کمپیوٹنگ کے لیے ڈیزائن کردہ |
### ہائی لیول بمقابلہ لو لیول زبانیں
پروگرامنگ زبانیں **لو لیول** (مشین کوڈ کے قریب) سے **ہائی لیول** (انسانی زبان کے قریب) تک کے اسپیکٹرم پر موجود ہیں:
- **لو لیول زبانیں** (جیسے اسمبلی یا C) کم ترجمہ کے مراحل کی ضرورت ہوتی ہے لیکن انسانوں کے لیے پڑھنا اور لکھنا مشکل ہوتا ہے
- **ہائی لیول زبانیں** (جیسے جاوا اسکرپٹ، پائتھون، یا C#) زیادہ قابل پڑھائی ہوتی ہیں اور بڑی کمیونٹیز رکھتی ہیں، جو انہیں زیادہ تر جدید ڈیولپمنٹ کے لیے مثالی بناتی ہیں
> 💡 **اسے اس طرح سوچیں**: لو لیول زبانیں کمپیوٹر سے اس کی مقامی بولی میں براہ راست بات کرنے جیسی ہیں، جبکہ ہائی لیول زبانیں ایک ماہر مترجم رکھنے جیسی ہیں جو آپ کی روزمرہ کی زبان کو کمپیوٹر کی زبان میں تبدیل کرتی ہے۔
### پروگرامنگ زبانوں کا عملی موازنہ
ایک ہی کام کو دو مختلف طریقوں سے لکھنے کی مثال دیکھتے ہیں۔ نیچے دیے گئے دونوں کوڈ کے نمونے مشہور فیبوناکی سیکوئنس تیار کرتے ہیں (جہاں ہر نمبر دو پچھلے نمبروں کا مجموعہ ہوتا ہے: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34...)۔
**ہائی لیول زبان (جاوا اسکرپٹ) – انسان دوست:**
```javascript
// Step 1: Basic Fibonacci setup
const fibonacciCount = 10;
let current = 0;
let next = 1;
console.log('Fibonacci sequence:');
```
**یہ کوڈ کیا کرتا ہے:**
- **ایک مستقل متغیر کا اعلان کریں** تاکہ یہ بتا سکیں کہ کتنے فیبوناکی نمبر تیار کرنے ہیں
- **دو متغیرات کو ترتیب دیں** تاکہ سیکوئنس میں موجودہ اور اگلے نمبروں کو ٹریک کیا جا سکے
- **ابتدائی اقدار مقرر کریں** (0 اور 1) جو فیبوناکی پیٹرن کی وضاحت کرتی ہیں
- **ایک ہیڈر پیغام دکھائیں** تاکہ ہماری آؤٹ پٹ کی شناخت ہو
```javascript
// Step 2: Generate the sequence with a loop
for (let i = 0; i < fibonacciCount; i++) {
console.log(`Position ${i + 1}: ${current}`);
// Calculate next number in sequence
const sum = current + next;
current = next;
next = sum;
}
```
**یہاں کیا ہوتا ہے:**
- **ہر پوزیشن کے لیے لوپ کریں** سیکوئنس میں `for` لوپ کا استعمال کرتے ہوئے
- **ہر نمبر کو اس کی پوزیشن کے ساتھ دکھائیں** ٹیمپلیٹ لیٹرل فارمیٹنگ کا استعمال کرتے ہوئے
- **اگلا فیبوناکی نمبر حساب کریں** موجودہ اور اگلی اقدار کو جمع کر کے
- **ہمارے ٹریکنگ متغیرات کو اپ ڈیٹ کریں** اگلی تکرار پر جانے کے لیے
```javascript
// Step 3: Modern functional approach
const generateFibonacci = (count) => {
const sequence = [0, 1];
for (let i = 2; i < count; i++) {
sequence[i] = sequence[i - 1] + sequence[i - 2];
}
return sequence;
};
// Usage example
const fibSequence = generateFibonacci(10);
console.log(fibSequence);
```
**اوپر، ہم نے:**
- **ایک قابل استعمال فنکشن تخلیق کیا** جدید ایرو فنکشن نحو کا استعمال کرتے ہوئے
- **ایک آرے بنایا** مکمل سیکوئنس کو ذخیرہ کرنے کے لیے بجائے ایک ایک کر کے دکھانے کے
- **آرے انڈیکسنگ کا استعمال کیا** ہر نئے نمبر کو پچھلی اقدار سے حساب کرنے کے لیے
- **مکمل سیکوئنس واپس کیا** تاکہ پروگرام کے دیگر حصوں میں لچکدار استعمال ہو سکے
**لو لیول زبان (ARM اسمبلی) – کمپیوٹر دوست:**
```assembly
area ascen,code,readonly
entry
code32
adr r0,thumb+1
bx r0
code16
thumb
mov r0,#00
sub r0,r0,#01
mov r1,#01
mov r4,#10
ldr r2,=0x40000000
back add r0,r1
str r0,[r2]
add r2,#04
mov r3,r0
mov r0,r1
mov r1,r3
sub r4,#01
cmp r4,#00
bne back
end
```
نوٹ کریں کہ جاوا اسکرپٹ ورژن تقریباً انگریزی ہدایات کی طرح پڑھتا ہے، جبکہ اسمبلی ورژن خفیہ کمانڈز استعمال کرتا ہے جو کمپیوٹر کے پروسیسر کو براہ راست کنٹرول کرتی ہیں۔ دونوں بالکل ایک ہی کام انجام دیتے ہیں، لیکن ہائی لیول زبان انسانوں کے لیے سمجھنا، لکھنا، اور برقرار رکھنا بہت آسان ہے۔
**اہم فرق جو آپ دیکھیں گے:**
- **قابل پڑھائی**: جاوا اسکرپٹ وضاحتی نام استعمال کرتا ہے جیسے `fibonacciCount` جبکہ اسمبلی خفیہ لیبلز استعمال کرتا ہے جیسے `r0`, `r1`
- **تبصرے**: ہائی لیول زبانیں وضاحتی تبصرے کی حوصلہ افزائی کرتی ہیں جو کوڈ کو خود وضاحت کرنے والا بناتی ہیں
- **ساخت**: جاوا اسکرپٹ کا منطقی بہاؤ انسانوں کے مسائل کو قدم بہ قدم سوچنے کے طریقے سے میل کھاتا ہے
- **نگہداشت**: مختلف ضروریات کے لیے جاوا اسکرپٹ ورژن کو اپ ڈیٹ کرنا سیدھا اور واضح ہے
✅ **فیبوناکی سیکوئنس** [تعریف](https://en.wikipedia.org/wiki/Fibonacci_number) کے مطابق نمبروں کا ایک سیٹ ہے جہاں ہر نمبر دو پچھلے نمبروں کا مجموعہ ہوتا ہے، 0 اور 1 سے شروع ہوتا ہے۔ یہ ریاضیاتی پیٹرن قدرت میں اکثر ظاہر ہوتا ہے، جیسے پھولوں کی پنکھڑیوں سے لے کر گھومتے ہوئے خول تک!
## پروگرام کے عناصر
اب جب کہ آپ سمجھ گئے ہیں کہ پروگرامنگ زبانیں کیا ہیں، آئیے ان بنیادی بلاکس کو دریافت کریں جو کسی بھی پروگرام کو تشکیل دیتے ہیں۔ ان عناصر کو پروگرامنگ کی گرامر اور الفاظ کے طور پر سوچیں – ایک بار جب آپ ان تصورات کو سمجھ لیں، تو آپ کسی بھی زبان میں کوڈ پڑھ اور لکھ سکیں گے۔
### بیانات: بنیادی ہدایات
ایک **بیان** پروگرام میں ایک واحد ہدایت ہے، جیسے انسانی زبان میں ایک جملہ۔ ہر بیان کمپیوٹر کو ایک مخصوص عمل انجام دینے کے لیے کہتا ہے۔ جیسے جملے نقطے پر ختم ہوتے ہیں، بیانات کے مخصوص طریقے ہوتے ہیں جو یہ ظاہر کرتے ہیں کہ ایک ہدایت کہاں ختم ہوتی ہے اور اگلی کہاں شروع ہوتی ہے (یہ پروگرامنگ زبان کے لحاظ سے مختلف ہوتا ہے)۔
```javascript
// Basic statements that perform single actions
const userName = "Alex";
console.log("Hello, world!");
const sum = 5 + 3;
```
**یہ کوڈ کیا کرتا ہے:**
- **ایک مستقل متغیر کا اعلان کریں** تاکہ صارف کا نام ذخیرہ کیا جا سکے
- **ایک سلامتی پیغام دکھائیں** کنسول آؤٹ پٹ پر
- **ریاضیاتی عمل کا نتیجہ حساب کریں اور ذخیرہ کریں**
```javascript
// Statements that interact with web pages
document.title = "My Awesome Website";
document.body.style.backgroundColor = "lightblue";
```
**مرحلہ وار، یہاں کیا ہو رہا ہے:**
- **ویب پیج کے عنوان میں ترمیم کریں** جو براؤزر ٹیب میں ظاہر ہوتا ہے
- **پورے صفحے کے جسم کا پس منظر رنگ تبدیل کریں**
### متغیرات: معلومات ذخیرہ کرنا
**متغیرات** لیبل والے کنٹینرز کی طرح ہیں جو معلومات کو ذخیرہ کرتے ہیں جنہیں آپ کے پروگرام کو یاد رکھنے کی ضرورت ہوتی ہے۔ جیسے آپ کاغذ پر خریداری کی فہرست لکھ سکتے ہیں اور اس کا حوالہ دے سکتے ہیں، متغیرات پروگراموں کو ڈیٹا ذخیرہ کرنے اور بعد میں استعمال کرنے دیتے ہیں۔ متغیرات کے منفرد نام ہوتے ہیں اور ان کے مواد پروگرام کے چلنے کے دوران تبدیل ہو سکتے ہیں۔
```javascript
// Step 1: Creating basic variables
const siteName = "Weather Dashboard";
let currentWeather = "sunny";
let temperature = 75;
let isRaining = false;
```
**ان تصورات کو سمجھنا:**
- **غیر تبدیل ہونے والی اقدار کو `const` متغیرات میں ذخیرہ کریں** (جیسے سائٹ کا نام)
- **`let` استعمال کریں** ان اقدار کے لیے جو آپ کے پروگرام کے دوران تبدیل ہو سکتی ہیں
- **مختلف ڈیٹا اقسام تفویض کریں**: سٹرنگز (متن)، نمبر، اور بوولینز (سچ/جھوٹ)
- **وضاحتی نام منتخب کریں** جو ہر متغیر کے مواد کی وضاحت کریں
```javascript
// Step 2: Working with objects to group related data
const weatherData = {
location: "San Francisco",
humidity: 65,
windSpeed: 12
};
```
**اوپر، ہم نے:**
- **ایک آبجیکٹ تخلیق کیا** متعلقہ موسمی معلومات کو ایک ساتھ گروپ کرنے کے لیے
- **متعدد ڈیٹا کے ٹکڑوں کو ایک متغیر نام کے تحت منظم کیا**
- **کلیدی-قدر کے جوڑوں کا استعمال کیا** ہر معلومات کے ٹکڑے کو واضح طور پر لیبل کرنے کے لیے
```javascript
// Step 3: Using and updating variables
console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`);
console.log(`Wind speed: ${weatherData.windSpeed} mph`);
// Updating changeable variables
currentWeather = "cloudy";
temperature = 68;
```
**آئیے ہر حصہ سمجھتے ہیں:**
- **معلومات دکھائیں** ٹیمپلیٹ لیٹرلز کے ساتھ `${}` نحو کا استعمال کرتے ہوئے
- **آبجیکٹ پراپرٹیز تک رسائی حاصل کریں** ڈاٹ نوٹیشن (`weatherData.windSpeed`) کا استعمال کرتے ہوئے
- **`let` کے ساتھ اعلان کردہ متغیرات کو اپ ڈیٹ کریں** بدلتے ہوئے حالات کی عکاسی کرنے کے لیے
- **متعدد متغیرات کو یکجا کریں** معنی خیز پیغامات تخلیق کرنے کے لیے
```javascript
// Step 4: Modern destructuring for cleaner code
const { location, humidity } = weatherData;
console.log(`${location} humidity: ${humidity}%`);
```
**آپ کو کیا جاننے کی ضرورت ہے:**
- **آبجیکٹس سے مخصوص پراپرٹیز نکالیں** ڈسٹرکچرنگ اسائنمنٹ کا استعمال کرتے ہوئے
- **خود بخود نئے متغیرات تخلیق کریں** جو آبجیکٹ کی کلیدوں کے جیسے نام رکھتے ہیں
- **بار بار ڈاٹ نوٹیشن سے بچ کر کوڈ کو آسان بنائیں**
### کنٹرول فلو: فیصلے کرنا
پروگرام اکثر مختلف حالات کی بنیاد پر فیصلے کرنے کی ضرورت رکھتے ہیں۔ **کنٹرول فلو بیانات** (جیسے `if...else`) پروگراموں کو مختلف راستے منتخب کرنے کی اجازت دیتے ہیں، انہیں بدلتے ہوئے حالات کے لیے ہوشیار اور جوابدہ بناتے ہیں۔
```javascript
// Step 1: Basic conditional logic
const userAge = 17;
if (userAge >= 18) {
console.log("You can vote!");
} else {
const yearsToWait = 18 - userAge;
console.log(`You'll be able to vote in ${yearsToWait} year(s).`);
}
```
**یہ کوڈ کیا کرتا ہے:**
- **چیک کریں** کہ آیا صارف کی عمر ووٹنگ کی ضرورت کو پورا کرتی ہے
- **مختلف کوڈ بلاکس پر عمل کریں** شرط کے نتیجے کی بنیاد پر
- **حساب کریں اور دکھائیں** کہ ووٹنگ کی اہلیت تک کتنی دیر باقی ہے اگر عمر 18 سے کم ہو
- **ہر منظر نامے کے لیے مخصوص، مددگار فیڈبیک فراہم کریں**
```javascript
// Step 2: Multiple conditions with logical operators
const userAge = 17;
const hasPermission = true;
if (userAge >= 18 && hasPermission) {
console.log("Access granted: You can enter the venue.");
} else if (userAge >= 16) {
console.log("You need parent permission to enter.");
} else {
console.log("Sorry, you must be at least 16 years old.");
}
```
**یہاں کیا ہوتا ہے:**
- **متعدد شرائط کو یکجا کریں** `&&` (اور) آپریٹر کا استعمال کرتے ہوئے
- **شرائط کی ایک درجہ بندی تخلیق کریں** `else if` کا استعمال کرتے ہوئے متعدد منظرناموں کے لیے
- **تمام ممکنہ کیسز کو ہینڈل کریں** ایک آخری `else` بیان کے ساتھ
- **ہر مختلف صورتحال کے لیے واضح، قابل عمل فیڈبیک فراہم کریں**
```javascript
// Step 3: Concise conditional with ternary operator
const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet";
console.log(`Status: ${votingStatus}`);
```
**آپ کو یاد رکھنے کی ضرورت ہے:**
- **سادہ دو آپشن شرائط کے لیے ٹرنری آپریٹر (`? :`) استعمال کریں**
- **پہلے شرط لکھیں، اس کے بعد `?`, پھر سچ نتیجہ، پھر `:`, پھر جھوٹ نتیجہ**
- **اس پیٹرن کو اس وقت اپلائی کریں جب آپ کو شرائط کی بنیاد پر اقدار تفویض کرنے کی ضرورت ہو**
```javascript
// Step 4: Handling multiple specific cases
const dayOfWeek = "Tuesday";
switch (dayOfWeek) {
case "Monday":
case "Tuesday":
case "Wednesday":
case "Thursday":
case "Friday":
console.log("It's a weekday - time to work!");
break;
case "Saturday":
case "Sunday":
console.log("It's the weekend - time to relax!");
break;
default:
console.log("Invalid day of the week");
}
```
**یہ کوڈ درج ذیل کو پورا کرتا ہے:**
- **متغیر کی قدر کو متعدد مخصوص کیسز کے خلاف میچ کریں**
- **مشابہ کیسز کو ایک ساتھ گروپ کریں** (ہفتے کے دن بمقابلہ ہفتے کے آخر)
- **مناسب کوڈ بلاک پر عمل کریں** جب کوئی میچ پایا جائے
- **غیر متوقع اقدار کو ہینڈل کرنے کے لیے ایک `default` کیس شامل کریں**
- **کوڈ کو اگلے کیس پر جاری رکھنے سے روکنے کے لیے `break` بیانات استعمال کریں**
> 💡 **حقیقی دنیا کی مثال**: کنٹرول فلو کو GPS کی طرح سوچیں جو آپ کو ہدایات دیتا ہے۔ یہ کہہ سکتا ہے "اگر مین اسٹریٹ پر ٹریفک ہے، تو ہائی وے لے لیں۔" پروگرامز اسی قسم کی مشروط من
جدید کوڈ ایڈیٹرز آپ کی پیداواریت بڑھانے کے لیے شاندار خصوصیات پیش کرتے ہیں:
| خصوصیت | یہ کیا کرتی ہے | کیوں مددگار ہے |
|---------|--------------|--------------|
| **سینٹیکس ہائی لائٹنگ** | کوڈ کے مختلف حصوں کو رنگ دیتی ہے | کوڈ کو پڑھنا آسان بناتی ہے اور غلطیوں کو پہچاننے میں مدد دیتی ہے |
| **آٹو کمپلیشن** | ٹائپ کرتے وقت کوڈ تجویز کرتی ہے | کوڈنگ کو تیز کرتی ہے اور ٹائپنگ کی غلطیوں کو کم کرتی ہے |
| **ڈی بگنگ ٹولز** | غلطیوں کو تلاش کرنے اور ٹھیک کرنے میں مدد دیتی ہے | وقت کی بچت کرتی ہے اور مسائل کو جلد حل کرنے میں مدد دیتی ہے |
| **ایکسٹینشنز** | خصوصی خصوصیات شامل کرتی ہیں | ایڈیٹر کو کسی بھی ٹیکنالوجی کے لیے حسب ضرورت بناتی ہیں |
| **اے آئی اسسٹنٹس** | کوڈ اور وضاحتیں تجویز کرتی ہیں | سیکھنے اور پیداواریت کو تیز کرتی ہیں |
> 🎥 **ویڈیو ریسورس**: کیا آپ ان ٹولز کو ایکشن میں دیکھنا چاہتے ہیں؟ اس [Tools of the Trade ویڈیو](https://youtube.com/watch?v=69WJeXGBdxg) کو دیکھیں تاکہ مکمل جائزہ حاصل کریں۔
#### ویب ڈیولپمنٹ کے لیے تجویز کردہ ایڈیٹرز
**[ویژول اسٹوڈیو کوڈ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (مفت)
- ویب ڈیولپرز میں سب سے زیادہ مقبول
- بہترین ایکسٹینشن ایکو سسٹم
- بلٹ ان ٹرمینل اور گٹ انٹیگریشن
- **ضروری ایکسٹینشنز**:
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - اے آئی سے چلنے والی کوڈ تجاویز
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - ریئل ٹائم تعاون
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - خودکار کوڈ فارمیٹنگ
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - کوڈ میں ٹائپنگ کی غلطیوں کو پکڑنا
**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (پیسوں کے ساتھ، طلبہ کے لیے مفت)
- جدید ڈی بگنگ اور ٹیسٹنگ ٹولز
- ذہین کوڈ کمپلیشن
- بلٹ ان ورژن کنٹرول
**کلاؤڈ بیسڈ آئی ڈی ایز** (مختلف قیمتیں)
- [GitHub Codespaces](https://github.com/features/codespaces) - آپ کے براؤزر میں مکمل وی ایس کوڈ
- [Replit](https://replit.com/) - سیکھنے اور کوڈ شیئر کرنے کے لیے بہترین
- [StackBlitz](https://stackblitz.com/) - فوری، مکمل اسٹیک ویب ڈیولپمنٹ
> 💡 **شروع کرنے کا مشورہ**: ویژول اسٹوڈیو کوڈ سے شروع کریں – یہ مفت ہے، صنعت میں وسیع پیمانے پر استعمال ہوتا ہے، اور اس کی بڑی کمیونٹی مددگار ٹیوٹوریلز اور ایکسٹینشنز بناتی ہے۔
### ویب براؤزرز: آپ کی ٹیسٹنگ لیبارٹری
ویب براؤزرز صرف انٹرنیٹ براؤز کرنے کے ٹولز نہیں ہیں – یہ جدید ڈیولپمنٹ ماحول ہیں جو آپ کو ویب ایپلیکیشنز بنانے، ٹیسٹ کرنے، اور بہتر بنانے میں مدد دیتے ہیں۔ ہر جدید براؤزر میں طاقتور ڈیولپر ٹولز (DevTools) شامل ہیں جو آپ کے کوڈ کی کارکردگی کے بارے میں گہری بصیرت فراہم کرتے ہیں۔
**ویب ڈیولپمنٹ کے لیے براؤزرز کیوں ضروری ہیں:**
جب آپ کوئی ویب سائٹ یا ویب ایپلیکیشن بناتے ہیں، تو آپ کو دیکھنا ہوتا ہے کہ یہ حقیقی دنیا میں کیسی نظر آتی ہے اور کیسے کام کرتی ہے۔ براؤزرز نہ صرف آپ کے کام کو دکھاتے ہیں بلکہ کارکردگی، رسائی، اور ممکنہ مسائل کے بارے میں تفصیلی فیڈبیک بھی فراہم کرتے ہیں۔
#### براؤزر ڈیولپر ٹولز (DevTools)
جدید براؤزرز جامع ڈیولپمنٹ سوٹس شامل کرتے ہیں:
| ٹول کیٹیگری | یہ کیا کرتی ہے | مثال استعمال کیس |
|---------------|--------------|------------------|
| **ایلیمنٹ انسپیکٹر** | HTML/CSS کو ریئل ٹائم میں دیکھیں اور ایڈٹ کریں | اسٹائلنگ کو ایڈجسٹ کریں اور فوری نتائج دیکھیں |
| **کنسول** | ایرر میسیجز دیکھیں اور جاوا اسکرپٹ ٹیسٹ کریں | مسائل کو ڈی بگ کریں اور کوڈ کے ساتھ تجربہ کریں |
| **نیٹ ورک مانیٹر** | وسائل کے لوڈ ہونے کا ٹریک رکھیں | کارکردگی اور لوڈنگ وقت کو بہتر بنائیں |
| **ایکسسیبیلیٹی چیکر** | انکلوسیو ڈیزائن کے لیے ٹیسٹ کریں | یقینی بنائیں کہ آپ کی سائٹ تمام صارفین کے لیے کام کرتی ہے |
| **ڈیوائس سیمولیٹر** | مختلف اسکرین سائزز پر پیش نظارہ کریں | بغیر متعدد ڈیوائسز کے ریسپانسیو ڈیزائن ٹیسٹ کریں |
#### ڈیولپمنٹ کے لیے تجویز کردہ براؤزرز
- **[کروم](https://developers.google.com/web/tools/chrome-devtools/)** - صنعت کا معیاری DevTools وسیع دستاویزات کے ساتھ
- **[فائر فاکس](https://developer.mozilla.org/docs/Tools)** - بہترین CSS گرڈ اور ایکسسیبیلیٹی ٹولز
- **[ایج](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - کرومیم پر مبنی، مائیکروسافٹ کے ڈیولپر وسائل کے ساتھ
> ⚠️ **اہم ٹیسٹنگ مشورہ**: ہمیشہ اپنی ویب سائٹس کو متعدد براؤزرز میں ٹیسٹ کریں! جو کروم میں بالکل کام کرتا ہے وہ سفاری یا فائر فاکس میں مختلف نظر آ سکتا ہے۔ پیشہ ور ڈیولپرز تمام بڑے براؤزرز میں ٹیسٹ کرتے ہیں تاکہ مستقل صارف تجربات کو یقینی بنایا جا سکے۔
### کمانڈ لائن ٹولز: پاور یوزر کا گیٹ وے
کمانڈ لائن (جسے ٹرمینل یا شیل بھی کہا جاتا ہے) شروع میں خوفناک لگ سکتی ہے – یہ صرف ایک سیاہ اسکرین ہے جس پر متن ہے! لیکن اس کی سادہ ظاہری شکل آپ کو دھوکہ نہ دے۔ کمانڈ لائن ڈیولپر کے ٹول کٹ میں سب سے طاقتور ٹولز میں سے ایک ہے، جو آپ کو پیچیدہ کاموں کو سادہ متن کمانڈز کے ذریعے انجام دینے کی اجازت دیتی ہے۔
**ڈیولپرز کمانڈ لائن کو کیوں پسند کرتے ہیں:**
جبکہ گرافیکل انٹرفیس بہت سے کاموں کے لیے بہترین ہیں، کمانڈ لائن آٹومیشن، درستگی، اور رفتار میں بہترین ہے۔ بہت سے ڈیولپمنٹ ٹولز بنیادی طور پر کمانڈ لائن انٹرفیس کے ذریعے کام کرتے ہیں، اور انہیں مؤثر طریقے سے استعمال کرنا سیکھنا آپ کی پیداواریت کو ڈرامائی طور پر بہتر بنا سکتا ہے۔
```bash
# Step 1: Create and navigate to project directory
mkdir my-awesome-website
cd my-awesome-website
```
**یہ کوڈ کیا کرتا ہے:**
- **ایک نیا ڈائریکٹری بنائیں** جس کا نام "my-awesome-website" ہے تاکہ آپ کا پروجیکٹ شروع ہو سکے
- **نئی بنائی گئی ڈائریکٹری میں جائیں** تاکہ کام شروع کریں
```bash
# Step 2: Initialize project with package.json
npm init -y
# Install modern development tools
npm install --save-dev vite prettier eslint
npm install --save-dev @eslint/js
```
**مرحلہ وار، یہاں کیا ہو رہا ہے:**
- **ایک نیا Node.js پروجیکٹ شروع کریں** ڈیفالٹ سیٹنگز کے ساتھ `npm init -y` استعمال کرتے ہوئے
- **Vite انسٹال کریں** ایک جدید بلڈ ٹول کے طور پر تیز ڈیولپمنٹ اور پروڈکشن بلڈز کے لیے
- **Prettier شامل کریں** خودکار کوڈ فارمیٹنگ کے لیے اور ESLint کو کوڈ کوالٹی چیک کے لیے
- **استعمال کریں** `--save-dev` فلیگ تاکہ انہیں صرف ڈیولپمنٹ کے لیے ڈیپینڈنسیز کے طور پر نشان زد کیا جا سکے
```bash
# Step 3: Create project structure and files
mkdir src assets
echo 'My SiteHello World
' > index.html
# Start development server
npx vite
```
**اوپر دیے گئے میں، ہم نے:**
- **اپنے پروجیکٹ کو منظم کیا** سورس کوڈ اور اثاثوں کے لیے الگ فولڈرز بنا کر
- **بنیادی HTML فائل تیار کی** مناسب دستاویز کے ڈھانچے کے ساتھ
- **Vite ڈیولپمنٹ سرور شروع کیا** لائیو ری لوڈنگ اور ہاٹ ماڈیول ریپلیسمنٹ کے لیے
#### ویب ڈیولپمنٹ کے لیے ضروری کمانڈ لائن ٹولز
| ٹول | مقصد | کیوں ضروری ہے |
|------|---------|-----------------|
| **[Git](https://git-scm.com/)** | ورژن کنٹرول | تبدیلیوں کا ٹریک رکھیں، دوسروں کے ساتھ تعاون کریں، اپنا کام محفوظ کریں |
| **[Node.js & npm](https://nodejs.org/)** | جاوا اسکرپٹ رن ٹائم اور پیکیج مینجمنٹ | براؤزرز کے باہر جاوا اسکرپٹ چلائیں، جدید ڈیولپمنٹ ٹولز انسٹال کریں |
| **[Vite](https://vitejs.dev/)** | بلڈ ٹول اور ڈیولپمنٹ سرور | ہاٹ ماڈیول ریپلیسمنٹ کے ساتھ تیز ڈیولپمنٹ |
| **[ESLint](https://eslint.org/)** | کوڈ کوالٹی | جاوا اسکرپٹ میں مسائل کو خود بخود تلاش کریں اور ٹھیک کریں |
| **[Prettier](https://prettier.io/)** | کوڈ فارمیٹنگ | اپنے کوڈ کو مستقل طور پر فارمیٹڈ اور پڑھنے کے قابل رکھیں |
#### پلیٹ فارم مخصوص اختیارات
**ونڈوز:**
- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - جدید، خصوصیات سے بھرپور ٹرمینل
- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - طاقتور اسکرپٹنگ ماحول
- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - روایتی ونڈوز کمانڈ لائن
**macOS:**
- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - بلٹ ان ٹرمینل ایپلیکیشن
- **[iTerm2](https://iterm2.com/)** - جدید خصوصیات کے ساتھ بہتر ٹرمینل
**Linux:**
- **[Bash](https://www.gnu.org/software/bash/)** 💻 - معیاری لینکس شیل
- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - جدید ٹرمینل ایمولیٹر
> 💻 = آپریٹنگ سسٹم پر پہلے سے انسٹال شدہ
> 🎯 **سیکھنے کا راستہ**: بنیادی کمانڈز جیسے `cd` (ڈائریکٹری تبدیل کریں)، `ls` یا `dir` (فائلوں کی فہرست)، اور `mkdir` (فولڈر بنائیں) سے شروع کریں۔ جدید ورک فلو کمانڈز جیسے `npm install`, `git status`, اور `code .` (موجودہ ڈائریکٹری کو وی ایس کوڈ میں کھولیں) کے ساتھ مشق کریں۔ جیسے جیسے آپ زیادہ آرام دہ ہوں گے، آپ خود بخود مزید جدید کمانڈز اور آٹومیشن تکنیک سیکھیں گے۔
### دستاویزات: آپ کا سیکھنے کا کمپاس
دستاویزات ایسے ہیں جیسے آپ کے پاس ایک علم رکھنے والا رہنما 24/7 دستیاب ہو۔ جب آپ نئے تصورات کا سامنا کرتے ہیں، کسی ٹول کے کام کرنے کا طریقہ سمجھنا چاہتے ہیں، یا جدید خصوصیات کو دریافت کرنا چاہتے ہیں، تو اعلیٰ معیار کی دستاویزات آپ کی کامیابی کا نقشہ بن جاتی ہیں۔
**دستاویزات کیوں اہم ہیں:**
پیشہ ور ڈیولپرز اپنے وقت کا ایک بڑا حصہ دستاویزات پڑھنے میں گزارتے ہیں – اس لیے نہیں کہ وہ نہیں جانتے کہ وہ کیا کر رہے ہیں، بلکہ اس لیے کہ ویب ڈیولپمنٹ کا منظر نامہ اتنی تیزی سے ترقی کرتا ہے کہ موجودہ رہنے کے لیے مسلسل سیکھنا ضروری ہوتا ہے۔ بہترین دستاویزات آپ کو صرف *کیسے* نہیں بلکہ *کیوں* اور *کب* کچھ استعمال کرنا ہے، یہ سمجھنے میں مدد دیتی ہیں۔
#### ضروری دستاویزات کے وسائل
**[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)**
- ویب ٹیکنالوجی دستاویزات کے لیے سونے کا معیار
- HTML، CSS، اور جاوا اسکرپٹ کے لیے جامع گائیڈز
- براؤزر مطابقت کی معلومات شامل ہیں
- عملی مثالیں اور انٹرایکٹو ڈیمو پیش کرتا ہے
**[Web.dev](https://web.dev)** (گوگل کی طرف سے)
- جدید ویب ڈیولپمنٹ کے بہترین طریقے
- کارکردگی کی اصلاح کے گائیڈز
- ایکسسیبیلیٹی اور انکلوسیو ڈیزائن کے اصول
- حقیقی دنیا کے پروجیکٹس سے کیس اسٹڈیز
**[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)**
- ایج براؤزر ڈیولپمنٹ وسائل
- پروگریسو ویب ایپ گائیڈز
- کراس پلیٹ فارم ڈیولپمنٹ بصیرت
**[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)**
- ساختی سیکھنے کے نصاب
- صنعت کے ماہرین سے ویڈیو کورسز
- ہینڈز آن کوڈنگ مشقیں
> 📚 **مطالعہ کی حکمت عملی**: دستاویزات کو یاد کرنے کی کوشش نہ کریں – بلکہ، اسے مؤثر طریقے سے نیویگیٹ کرنا سیکھیں۔ اکثر استعمال ہونے والے حوالہ جات کو بک مارک کریں اور مخصوص معلومات کو جلدی سے تلاش کرنے کے لیے سرچ فنکشنز کا استعمال کرنے کی مشق کریں۔
✅ **عکاسی کی مشق**: سوچیں کہ ویب ڈیولپمنٹ ٹولز ویب ڈیزائن ٹولز سے کیسے مختلف ہو سکتے ہیں۔ غور کریں کہ ایکسسیبیلیٹی خصوصیات، ریسپانسیو ڈیزائن کی صلاحیتیں، اور تعاون کے ورک فلو دونوں کرداروں کے درمیان کیسے مختلف ہو سکتے ہیں۔ یہ موازنہ آپ کو ویب تخلیق کے وسیع ماحولیاتی نظام کو سمجھنے میں مدد دے گا!
## GitHub Copilot ایجنٹ چیلنج 🚀
ایجنٹ موڈ کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں:
**تفصیل:** جدید کوڈ ایڈیٹر یا آئی ڈی ای کی خصوصیات کو دریافت کریں اور مظاہرہ کریں کہ یہ آپ کے ورک فلو کو ویب ڈیولپر کے طور پر کیسے بہتر بنا سکتی ہیں۔
**پرومپٹ:** ایک کوڈ ایڈیٹر یا آئی ڈی ای منتخب کریں (جیسے ویژول اسٹوڈیو کوڈ، WebStorm، یا کلاؤڈ بیسڈ آئی ڈی ای)۔ تین خصوصیات یا ایکسٹینشنز کی فہرست بنائیں جو آپ کو کوڈ لکھنے، ڈی بگ کرنے، یا برقرار رکھنے میں زیادہ مؤثر بناتی ہیں۔ ہر ایک کے لیے، وضاحت کریں کہ یہ آپ کے ورک فلو کو کیسے فائدہ پہنچاتی ہے۔
---
## 🚀 چیلنج
**پروگرامنگ زبانوں کی تنوع کو دریافت کریں**
اب جب کہ آپ پروگرامنگ زبانوں کی بنیادی باتیں سمجھ چکے ہیں، ان کی منفرد خصوصیات اور استعمال کے کیسز میں گہرائی سے جائیں۔ مختلف زمروں (جیسے ویب ڈیولپمنٹ، موبائل ڈیولپمنٹ، ڈیٹا سائنس، سسٹمز پروگرامنگ) سے تین پروگرامنگ زبانیں منتخب کریں اور ان کی مخصوص خصوصیات پر تحقیق کریں۔
**آپ کا کام:**
1. **سینٹیکس اسٹائلز کا موازنہ کریں**: ایک ہی سادہ کام تلاش کریں (جیسے ایک ویریبل بنانا یا "Hello World" پرنٹ کرنا) جو آپ کی منتخب کردہ زبانوں میں لکھا گیا ہو
2. **منفرد طاقتوں کی شناخت کریں**: ہر زبان کو خاص کیا بناتا ہے؟ یہ کس مسئلے کو حل کرنے کے لیے ڈیزائن کی گئی ہے؟
3. **کمیونٹیز کو دریافت کریں**: ہر زبان کی ڈیولپر کمیونٹی کے سائز اور سرگرمی کو دیکھیں
4. **سیکھنے کے راستے پر غور کریں**: کون سی زبان ابتدائی کے لیے سب سے زیادہ قابل رسائی لگتی ہے، اور کیوں؟
**بونس چیلنج**: کوشش کریں کہ ہر زبان کے ساتھ بنائی گئی بڑی ویب سائٹس، ایپس، یا سسٹمز کی مثالیں تلاش کریں۔ آپ حیران ہو سکتے ہیں کہ آپ کے پسندیدہ ڈیجیٹل تجربات کو کیا طاقت دیتا ہے!
> 💡 **سیکھنے کا مشورہ**: تمام سینٹیکس تفصیلات کو سمجھنے کی فکر نہ کریں – بلکہ، اس بات پر توجہ دیں کہ ہر زبان مسئلے کو حل کرنے کے لیے کس طرح کے انداز اپناتی ہے۔
## لیکچر کے بعد کوئز
[لیکچر کے بعد کوئز](https://ff-quizzes.netlify.app/web/)
## جائزہ اور خود مطالعہ
**اپنی سمجھ کو گہرا کریں**
ان تصورات کو دریافت کرنے کے لیے وقت نکالیں جو آپ نے سیکھے ہیں، ان ٹولز اور زبانوں میں گہرائی سے جائیں جو آپ کو سب سے زیادہ دلچسپ لگتے ہیں:
**پروگرامنگ زبانوں کی دریافت
> نوٹ: جب اپنے اسائنمنٹ کے لیے ٹولز کا انتخاب کریں، تو اوپر درج کردہ ایڈیٹرز، براؤزرز، یا کمانڈ لائن ٹولز کو منتخب نہ کریں۔ ایسے ٹولز پر توجہ دیں جو جدید، وسیع پیمانے پر استعمال ہونے والے ہوں، اور جنہیں مضبوط کمیونٹی یا رسمی حمایت حاصل ہو۔
---
**ڈسکلیمر**:
یہ دستاویز AI ترجمہ سروس [Co-op Translator](https://github.com/Azure/co-op-translator) کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔