جاوااسکریپت

JavaScript برای تعاملی کردن صفحه‌های وب استفاده می‌شود، مثل منوهایی که باز می‌شوند، فرم‌هایی که ورودی را بررسی می‌کنند و محتوایی که بدون بارگذاری دوباره صفحه به‌روز می‌شود. JavaScript از طریق Node.js روی سرور هم اجرا می‌شود و پشت بسیاری از اپلیکیشن‌های موبایل و دسکتاپ است. همه مرورگرهای مدرن JavaScript را به صورت داخلی اجرا می‌کنند.

JavaScript و Java دو زبان برنامه‌نویسی جدا هستند که فقط بخشی از نامشان مشترک است. JavaScript بیشتر در مرورگر اجرا می‌شود و نوع‌دهی پویا دارد، در حالی که Java نوع‌دهی ایستا دارد و برای Java Virtual Machine به bytecode کامپایل می‌شود. شباهت نام از یک تصمیم بازاریابی در دهه 1990 آمده است.

DOM یا Document Object Model درختی از اشیاست که مرورگر از صفحه HTML می‌سازد تا JavaScript بتواند صفحه را بخواند و تغییر دهد. JavaScript از طریق DOM عنصرها را پیدا می‌کند، متن را عوض می‌کند، کلاس اضافه می‌کند و عنصر جدید می‌سازد. هر تغییر قابل دیدنی که یک اسکریپت در صفحه می‌دهد از DOM می‌گذرد.

JavaScript را با تگ script به صفحه HTML اضافه کنید، یا با نوشتن مستقیم کد داخل آن یا با اشاره به یک فایل JavaScript جداگانه از طریق ویژگی src. گذاشتن تگ script در انتهای body یا افزودن ویژگی defer باعث می‌شود HTML اول بارگذاری شود. فایل‌های JavaScript جداگانه راحت‌تر کش و نگهداری می‌شوند.

در JavaScript، let و const محدوده بلوکی دارند، در حالی که var محدوده تابعی دارد و می‌تواند دوباره تعریف شود. متغیر const قابل مقداردهی دوباره نیست، هرچند شیئی که در const ذخیره شده همچنان می‌تواند از داخل تغییر کند. JavaScript مدرن به طور پیش‌فرض از const، هنگام نیاز به تغییر مقدار از let استفاده می‌کند و از var دوری می‌کند.

رویدادها در JavaScript سیگنال‌هایی هستند که مرورگر هنگام وقوع اتفاقی می‌فرستد، مثل کلیک، فشردن کلید، ارسال فرم یا پایان بارگذاری صفحه. اسکریپت با وصل کردن یک تابع شنونده از طریق addEventListener به رویداد پاسخ می‌دهد. شنونده‌های رویداد راهی هستند که JavaScript صفحه را به کاربر واکنش‌پذیر می‌کند.

event delegation در JavaScript یعنی وصل کردن یک شنونده رویداد به عنصر والد به جای یک شنونده برای هر فرزند. شنونده هدف رویداد را بررسی می‌کند تا ببیند روی کدام فرزند کلیک شده است. event delegation حافظه کمتری مصرف می‌کند و برای عنصرهایی که بعداً به صفحه اضافه می‌شوند هم کار می‌کند.

در JavaScript از تابع fetch برای درخواست داده از API استفاده کنید و بعد بدنه پاسخ را با متد json بخوانید. تابع fetch یک promise برمی‌گرداند، پس کد معمولاً با async و await منتظر نتیجه می‌ماند. بررسی وضعیت پاسخ و گرفتن خطاها، صفحه را هنگام قطع شبکه کارا نگه می‌دارد.

promise در JavaScript شیئی است که مقداری را نشان می‌دهد که بعداً آماده می‌شود، مثل نتیجه یک درخواست شبکه. هر promise یا در انتظار (pending)، یا انجام‌شده (fulfilled) یا ردشده (rejected) است. کد با then و catch، یا با async و await به نتیجه واکنش نشان می‌دهد.

async و await به کد JavaScript اجازه می‌دهند منتظر یک promise بماند، به شکلی که مثل کد عادی مرحله به مرحله خوانده شود. تابعی که async علامت خورده همیشه یک promise برمی‌گرداند و await آن تابع را تا روشن شدن نتیجه promise متوقف می‌کند. خطاهای داخل توابع async با یک بلوک معمولی try و catch مدیریت می‌شوند.

ES6 که ECMAScript 2015 هم نامیده می‌شود، به‌روزرسانی بزرگ سال 2015 در استاندارد زبان JavaScript است. ES6 مواردی مثل let و const، arrow function، کلاس، template literal، destructuring، ماژول و promise را اضافه کرد. همه مرورگرهای مدرن از ES6 پشتیبانی می‌کنند و از آن زمان هر سال قابلیت‌های تازه‌ای به JavaScript اضافه شده است.

arrow function در JavaScript روشی کوتاه‌تر برای نوشتن تابع با سینتکس => است. arrow function مقدار this مخصوص خودش را ندارد، پس this همان مقدار کد اطرافش را نگه می‌دارد. arrow functionها برای callbackهای کوتاه، مثل آن‌هایی که به map و filter داده می‌شوند، رایج‌اند.

JSON یا JavaScript Object Notation یک قالب متنی برای ذخیره و تبادل داده به صورت کلید و مقدار است. JavaScript با JSON.stringify یک شیء را به متن JSON و با JSON.parse متن JSON را دوباره به شیء تبدیل می‌کند. بیشتر APIهای وب داده را به صورت JSON می‌فرستند و دریافت می‌کنند.

شروع JavaScript برای مبتدی‌ها آسان است چون فقط به یک مرورگر و یک ویرایشگر متن نیاز دارند. بخش‌های سخت‌تر بعداً می‌آیند، مثل کد ناهمگام، محدوده متغیرها و ابزارهای زیادی که دور این زبان هستند. بیشتر یادگیرندگان با چند هفته تمرین منظم صفحه‌های تعاملی مفیدی می‌سازند.

بله، یادگیری JavaScript خالص پیش از React یا Vue فهم هر دو فریم‌ورک را خیلی آسان‌تر می‌کند. هر دو فریم‌ورک روی قابلیت‌های پایه JavaScript مثل تابع، آرایه، شیء، ماژول و promise ساخته شده‌اند. توسعه‌دهندگانی که مبانی را بلدند به جای حدس زدن، کد فریم‌ورک را هم رفع اشکال می‌کنند.

TypeScript همان JavaScript با نوع‌های ایستای اضافه است که Microsoft آن را توسعه داده و به JavaScript خالص کامپایل می‌شود. نوع‌ها به ویرایشگر کد اجازه می‌دهند بسیاری از خطاها را پیش از اجرای کد پیدا کند. TypeScript در پروژه‌های بزرگی که توسعه‌دهندگان زیادی روی یک کد کار می‌کنند محبوب است.

صفحه‌های JavaScript را با فرستادن JavaScript کمتر، بارگذاری اسکریپت‌ها با defer یا async و تقسیم bundleهای بزرگ تا هر صفحه فقط آنچه لازم دارد را بارگذاری کند، سریع‌تر کنید. minify و فشرده‌سازی فایل‌ها حجم دانلود را کم می‌کند. دور نگه داشتن کارهای سنگین از main thread، صفحه را به کلیک و تایپ پاسخ‌گو نگه می‌دارد.

در JavaScript، === هم مقدار و هم نوع را مقایسه می‌کند، در حالی که == پیش از مقایسه نوع‌ها را تبدیل می‌کند. برای مثال 0 == "0" درست است اما 0 === "0" نادرست است. استفاده از === از نتیجه‌های غافلگیرکننده جلوگیری می‌کند و قانون معمول در کد مدرن JavaScript است.

ماژول‌های JavaScript فایل‌های جداگانه‌ای هستند که توابع یا مقدارهایی را export می‌کنند و آنچه لازم دارند را از فایل‌های دیگر import می‌کنند. ماژول‌ها کد را منظم نگه می‌دارند، از متغیرهای سراسری جلوگیری می‌کنند و نگهداری پروژه‌های بزرگ را آسان‌تر می‌کنند. مرورگرها ماژول را با تگ script که ویژگی type آن module است بارگذاری می‌کنند.

JavaScript را با ابزارهای توسعه‌دهنده مرورگر رفع اشکال کنید که با F12 یا کلیک راست روی صفحه و انتخاب Inspect باز می‌شوند. بخش Console خطاها و مقدارهای ثبت‌شده را نشان می‌دهد و بخش Sources اجازه می‌دهد breakpoint بگذارید و کد را خط به خط اجرا کنید. بخش Network هر درخواستی که صفحه می‌فرستد و پاسخ هر کدام را نشان می‌دهد.

event loop سازوکاری است که به JavaScript تک‌رشته‌ای اجازه می‌دهد بدون قفل شدن کارهای زیادی را مدیریت کند. کارهای کند مثل تایمرها و درخواست‌های شبکه در پس‌زمینه منتظر می‌مانند و event loop هر callback تمام‌شده را وقتی call stack خالی است اجرا می‌کند. کدی که طولانی اجرا شود همچنان event loop را مسدود می‌کند و به همین دلیل حلقه‌های سنگین صفحه را بی‌پاسخ می‌کنند.

بله، JavaScript از طریق محیط‌های اجرایی مثل Node.js، Deno و Bun روی سرور اجرا می‌شود. JavaScript سمت سرور می‌تواند API بسازد، فایل بخواند و به پایگاه داده وصل شود. استفاده از یک زبان هم در مرورگر و هم روی سرور به تیم اجازه می‌دهد کد و مهارت را مشترک کند.

کد JavaScript را با وارد نکردن هرگز متن غیرقابل اعتماد به صفحه از طریق innerHTML، اعتبارسنجی دوباره همه ورودی‌ها روی سرور و دور نگه داشتن اطلاعات محرمانه از کد فرانت‌اند امن نگه دارید. هر چیزی که به مرورگر فرستاده شود، از جمله کلیدهای API، برای کاربران قابل خواندن است. Content Security Policy و وابستگی‌های به‌روز جلوی بسیاری از حمله‌های رایج را می‌گیرند.

در JavaScript، localStorage داده را فقط در مرورگر نگه می‌دارد، در حالی که کوکی‌ها با هر درخواست به سرور فرستاده می‌شوند. localStorage داده بیشتری نگه می‌دارد و برای تنظیماتی مثل تم انتخاب‌شده مناسب است. کوکی‌هایی که HttpOnly و Secure علامت خورده‌اند جای امن‌تری برای session ورود هستند چون اسکریپت‌ها نمی‌توانند آن‌ها را بخوانند.

کد JavaScript قابل نگهداری را با توابع کوچک، نام‌های روشن، ماژول‌ها، قالب‌بندی یکدست و یک linter مثل ESLint بنویسید. از متغیرهای سراسری دوری کنید و کدی را که DOM را تغییر می‌دهد از کدی که داده را مدیریت می‌کند جدا نگه دارید. تست‌های خودکار تغییرات بعدی را امن می‌کنند.