JavaScript

JavaScript ویب صفحات کو انٹرایکٹو بنانے کے کام آتی ہے، جیسے کھلنے والے مینو، ان پٹ جانچنے والے فارم اور صفحہ دوبارہ لوڈ کیے بغیر اپ ڈیٹ ہونے والا مواد۔ JavaScript، Node.js کے ذریعے سرورز پر بھی چلتی ہے اور بہت سی موبائل اور ڈیسک ٹاپ ایپس کو طاقت دیتی ہے۔ ہر جدید براؤزر JavaScript کو براہِ راست چلاتا ہے۔

JavaScript اور Java دو الگ پروگرامنگ زبانیں ہیں جن کا صرف نام کا کچھ حصہ مشترک ہے۔ JavaScript زیادہ تر براؤزرز میں چلتی ہے اور dynamically typed ہے، جبکہ Java، statically typed ہے اور Java Virtual Machine کے لیے bytecode میں کمپائل ہوتی ہے۔ ملتا جلتا نام 1990 کی دہائی کے ایک مارکیٹنگ فیصلے کا نتیجہ تھا۔

DOM یعنی Document Object Model وہ objects کا درخت ہے جو براؤزر HTML صفحے سے بناتا ہے تاکہ JavaScript صفحہ پڑھ اور بدل سکے۔ DOM کے ذریعے JavaScript عناصر تلاش کر سکتی ہے، متن بدل سکتی ہے، کلاسز شامل کر سکتی ہے اور نئے عناصر بنا سکتی ہے۔ اسکرپٹ صفحے میں جو بھی نظر آنے والی تبدیلی کرتا ہے وہ DOM سے گزرتی ہے۔

HTML صفحے میں JavaScript شامل کرنے کے لیے script ٹیگ استعمال کریں، جس میں یا تو کوڈ براہِ راست ہو یا src ایٹریبیوٹ سے الگ JavaScript فائل کی طرف اشارہ ہو۔ script ٹیگ کو body کے آخر میں رکھنا یا defer ایٹریبیوٹ لگانا HTML کو پہلے لوڈ ہونے دیتا ہے۔ الگ JavaScript فائلیں کیش کرنے اور سنبھالنے میں آسان ہوتی ہیں۔

JavaScript میں let اور const کا دائرہ بلاک تک محدود ہوتا ہے، جبکہ var کا دائرہ فنکشن تک ہوتا ہے اور اسے دوبارہ declare کیا جا سکتا ہے۔ const ویری ایبل کو دوبارہ قدر نہیں دی جا سکتی، البتہ const میں رکھا object اندر سے بدل سکتا ہے۔ جدید JavaScript میں طے شدہ طور پر const، قدر بدلنی ہو تو let استعمال ہوتا ہے اور var سے پرہیز کیا جاتا ہے۔

JavaScript میں events وہ اشارے ہیں جو براؤزر کچھ ہونے پر بھیجتا ہے، جیسے کلک، کی دبانا، فارم جمع کرنا یا صفحے کا لوڈ مکمل ہونا۔ اسکرپٹ addEventListener سے ایک listener فنکشن جوڑ کر event کا جواب دیتا ہے۔ Event listeners ہی کے ذریعے JavaScript صفحے کو صارف کے عمل کا جواب دینے کے قابل بناتی ہے۔

JavaScript میں event delegation کا مطلب ہر بچے عنصر پر الگ listener لگانے کے بجائے والد عنصر پر ایک event listener لگانا ہے۔ Listener، event target دیکھ کر معلوم کرتا ہے کہ کس بچے پر کلک ہوا۔ Event delegation کم میموری استعمال کرتی ہے اور بعد میں صفحے میں شامل ہونے والے عناصر کے لیے بھی کام کرتی ہے۔

JavaScript میں API سے ڈیٹا مانگنے کے لیے fetch فنکشن استعمال کریں، پھر response کے json میتھڈ سے اس کا مواد پڑھیں۔ fetch فنکشن ایک promise واپس کرتا ہے، اس لیے کوڈ عموماً async اور await کے ساتھ نتیجے کا انتظار کرتا ہے۔ Response کی حالت جانچنا اور خرابیاں پکڑنا نیٹ ورک ناکام ہونے پر بھی صفحے کو چلتا رکھتا ہے۔

JavaScript میں promise ایک object ہے جو ایسی قدر کی نمائندگی کرتا ہے جو بعد میں تیار ہوگی، جیسے نیٹ ورک درخواست کا نتیجہ۔ Promise یا تو pending ہوتا ہے، یا fulfilled، یا rejected۔ کوڈ نتیجے کا جواب then اور catch سے، یا async اور await سے دیتا ہے۔

Async اور await، JavaScript کوڈ کو promise کا انتظار اس طرح کرنے دیتے ہیں کہ کوڈ عام قدم بہ قدم کوڈ جیسا پڑھا جائے۔ async سے نشان زد فنکشن ہمیشہ promise واپس کرتا ہے، اور await اس فنکشن کو promise مکمل ہونے تک روک دیتا ہے۔ async فنکشنز کے اندر خرابیاں عام try اور catch بلاک سے سنبھالی جاتی ہیں۔

ES6، جسے ECMAScript 2015 بھی کہا جاتا ہے، JavaScript زبان کے معیار کی 2015 کی بڑی اپ ڈیٹ ہے۔ ES6 نے let اور const، arrow functions، classes، template literals، destructuring، modules اور promises شامل کیے۔ ہر جدید براؤزر ES6 کو سپورٹ کرتا ہے، اور تب سے ہر سال JavaScript میں نئی خصوصیات شامل ہوتی رہی ہیں۔

JavaScript میں arrow functions، => کی لکھائی استعمال کرتے ہوئے فنکشنز لکھنے کا مختصر طریقہ ہیں۔ Arrow function کا اپنا this نہیں ہوتا، اس لیے this اردگرد کے کوڈ والی قدر رکھتا ہے۔ Arrow functions مختصر callbacks کے لیے عام ہیں، جیسے map اور filter کو دیے جانے والے۔

JSON یعنی JavaScript Object Notation ڈیٹا کو keys اور values کی صورت میں محفوظ کرنے اور تبادلہ کرنے کا ایک متنی فارمیٹ ہے۔ JavaScript، JSON.stringify سے object کو JSON متن میں اور JSON.parse سے JSON متن کو واپس object میں بدلتی ہے۔ زیادہ تر ویب APIs ڈیٹا JSON کی صورت میں بھیجتی اور وصول کرتی ہیں۔

نئے سیکھنے والوں کے لیے JavaScript شروع کرنا آسان ہے کیونکہ انہیں صرف ایک براؤزر اور ٹیکسٹ ایڈیٹر چاہیے۔ مشکل حصے بعد میں آتے ہیں، جیسے asynchronous کوڈ، scope اور زبان کے اردگرد بہت سے ٹولز۔ زیادہ تر سیکھنے والے باقاعدہ مشق کے چند ہفتوں میں مفید انٹرایکٹو صفحات بنا لیتے ہیں۔

جی ہاں، React یا Vue سے پہلے سادہ JavaScript سیکھنا دونوں فریم ورکس کو سمجھنا بہت آسان بنا دیتا ہے۔ دونوں فریم ورکس JavaScript کی بنیادی خصوصیات، جیسے functions، arrays، objects، modules اور promises پر بنے ہیں۔ بنیادی باتیں جاننے والے ڈویلپرز اندازوں کے بجائے فریم ورک کوڈ کی خرابیاں بھی ڈھونڈ سکتے ہیں۔

TypeScript، static types کے اضافے والی JavaScript ہے جسے Microsoft نے بنایا اور جو سادہ JavaScript میں کمپائل ہوتی ہے۔ Types کوڈ ایڈیٹر کو کوڈ چلنے سے پہلے بہت سی غلطیاں پکڑنے دیتی ہیں۔ TypeScript ان بڑے منصوبوں میں مقبول ہے جہاں بہت سے ڈویلپرز ایک ہی کوڈ شیئر کرتے ہیں۔

JavaScript والے صفحات تیز لوڈ کروانے کے لیے کم JavaScript بھیجیں، اسکرپٹس defer یا async کے ساتھ لوڈ کریں اور بڑے bundles کو تقسیم کریں تاکہ ہر صفحہ صرف اپنی ضرورت لوڈ کرے۔ فائلوں کو minify اور کمپریس کرنا ڈاؤن لوڈ کا حجم کم کرتا ہے۔ بھاری کام کو main thread سے دور رکھنا صفحے کو کلکس اور ٹائپنگ پر فوری جواب دینے والا رکھتا ہے۔

JavaScript میں === قدر اور قسم دونوں کا موازنہ کرتا ہے، جبکہ == موازنے سے پہلے قسمیں تبدیل کر دیتا ہے۔ مثال کے طور پر 0 == "0" درست ہے، لیکن 0 === "0" غلط ہے۔ === استعمال کرنا حیران کن نتائج سے بچاتا ہے اور جدید JavaScript کوڈ کا عام اصول ہے۔

JavaScript modules الگ فائلیں ہیں جو functions یا قدریں export کرتی ہیں اور دوسری فائلوں سے اپنی ضرورت کی چیزیں import کرتی ہیں۔ Modules کوڈ کو منظم رکھتے ہیں، global ویری ایبلز سے بچاتے ہیں اور بڑے منصوبوں کو سنبھالنا آسان بناتے ہیں۔ براؤزرز module کو ایسے script ٹیگ کے ذریعے لوڈ کرتے ہیں جس کا type ایٹریبیوٹ module ہو۔

براؤزر میں JavaScript کی خرابیاں ڈھونڈنے کے لیے ڈویلپر ٹولز استعمال کریں، جو F12 سے یا صفحے پر رائٹ کلک کر کے Inspect چننے سے کھلتے ہیں۔ Console خرابیاں اور درج کی گئی قدریں دکھاتا ہے، اور Sources پینل breakpoints لگانے اور کوڈ لائن بہ لائن چلانے دیتا ہے۔ Network پینل صفحے کی ہر درخواست اور اس کا جواب دکھاتا ہے۔

Event loop وہ طریقہ کار ہے جو ایک thread والی JavaScript کو رکے بغیر بہت سے کام سنبھالنے دیتا ہے۔ Timers اور نیٹ ورک درخواستوں جیسا سست کام پس منظر میں انتظار کرتا ہے، اور call stack خالی ہونے پر event loop ہر مکمل callback چلاتا ہے۔ دیر تک چلنے والا کوڈ پھر بھی event loop کو روک دیتا ہے، اسی لیے بھاری loops صفحے کو غیر جوابدہ بنا دیتے ہیں۔

جی ہاں، JavaScript سرور پر Node.js، Deno اور Bun جیسے runtimes کے ذریعے چلتی ہے۔ سرور سائیڈ JavaScript سے APIs بنائی جا سکتی ہیں، فائلیں پڑھی جا سکتی ہیں اور ڈیٹا بیسز سے رابطہ کیا جا سکتا ہے۔ براؤزر اور سرور دونوں پر ایک ہی زبان استعمال کرنا ٹیم کو کوڈ اور مہارتیں شیئر کرنے دیتا ہے۔

JavaScript کوڈ کو محفوظ رکھنے کے لیے کبھی بھی غیر معتبر متن innerHTML سے صفحے میں نہ ڈالیں، تمام ان پٹ کو سرور پر دوبارہ جانچیں اور راز فرنٹ اینڈ کوڈ سے باہر رکھیں۔ براؤزر کو بھیجی گئی ہر چیز، بشمول API keys، صارفین پڑھ سکتے ہیں۔ Content Security Policy اور تازہ dependencies بہت سے عام حملوں کو روکتی ہیں۔

JavaScript میں localStorage ڈیٹا صرف براؤزر میں رکھتا ہے، جبکہ cookies ہر درخواست کے ساتھ سرور کو بھیجی جاتی ہیں۔ localStorage زیادہ ڈیٹا رکھتا ہے اور منتخب تھیم جیسی سیٹنگز کے لیے موزوں ہے۔ HttpOnly اور Secure نشان والی cookies لاگ ان سیشنز کے لیے زیادہ محفوظ جگہ ہیں کیونکہ اسکرپٹس انہیں نہیں پڑھ سکتے۔

سنبھالنے میں آسان JavaScript کوڈ لکھنے کے لیے چھوٹے functions، واضح نام، modules، یکساں فارمیٹنگ اور ESLint جیسا linter استعمال کریں۔ Global ویری ایبلز سے بچیں اور DOM بدلنے والے کوڈ کو ڈیٹا سنبھالنے والے کوڈ سے الگ رکھیں۔ خودکار ٹیسٹس بعد کی تبدیلیوں کو محفوظ بناتے ہیں۔