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

تاریخچه و نحوه ی پیدایش جاوااسکریپت

بیایید برگردیم به سال 1995، زمانی که اینترنت تازه داشت جای خودش رو تو زندگی مردم باز می‌کرد. اون موقع‌ها صفحات وب خیلی ساده بودن، و در بهترین حالت، فقط می‌تونستیم چند متن و عکس رو توی یک صفحه ببینیم. چیزی به اسم تعامل کاربر با صفحه وجود نداشت. اما این وضعیت با تولد جاوا اسکریپت تغییر کرد!

جاوا اسکریپت توسط برندن آیک (Brendan Eich)، یکی از مهندسان شرکت نت اسکیپ (Netscape)، در کمتر از ده روز ساخته شد! هدف از ایجاد این زبان این بود که برنامه نویس‌ها بتونن به سایت‌ها قابلیت‌های پویا و تعاملی بدن، چیزی که با HTML و CSS به تنهایی امکان پذیر نبود. جاوا اسکریپت با سرعت زیادی محبوب شد و به مرور زمان تبدیل به یکی از اصلی‌ترین زبان‌های وب شد. امروز، جاوا اسکریپت به قدری مهمه که تقریبا تو هر سایتی که سر بزنی، اثری از این زبان رو می‌بینی!

دلیل نام گذاری جاوااسکریپت

وقتی این زبان ساخته شد، نام اصلیش «LiveScript» بود، اما به خاطر محبوبیت زیاد زبان برنامه نویسی جاوا در اون زمان، تصمیم گرفتن اسم این زبان رو به «جاوااسکریپت» تغییر بدن تا توجه بیشتری جلب کنه. هرچند جاوااسکریپت و جاوا از نظر فنی هیچ ربطی به هم ندارن، اما نام جاوااسکریپت به عنوان برند این زبان باقی موند.

جاوااسکریپت کجاها کار می‌کند؟

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

• V8: در مرورگر کروم، اوپرا و اج
• SpiderMonkey: در مرورگر فایرفاکس
• چاکرا: در مرورگر اینترنت اکسپلورر (IE)

این موتورهای جاوااسکریپت کد رو به سرعت اجرا می‌کنن و بهینه سازی‌های مختلفی روی کد انجام می‌دن تا کارایی بهتری داشته باشه.

عملکرد و محدودیت‌های جاوااسکریپت در مرورگر

جاوااسکریپت به عنوان یک زبان امن طراحی شده، یعنی دسترسی مستقیم به بخش‌های حساس سیستم مثل حافظه و پردازنده نداره. دلیلش اینه که این زبان در ابتدا برای کار در مرورگرها ساخته شد، و نیاز به چنین دسترسی هایی در مرورگر وجود نداره. با این حال، توانایی‌های جاوااسکریپت در مرورگر شامل موارد زیر هست:

• افزودن و تغییر HTML: جاوااسکریپت می‌تونه محتوای صفحه رو تغییر بده و به صفحه استایل و محتوا اضافه کنه.
• واکنش به کاربر: به کلیک، حرکت موس و دیگر تعاملات کاربر پاسخ می‌ده.
• درخواست‌های شبکه: امکان ارسال درخواست به سرور و دریافت داده از اون.
• مدیریت کوکی ها: می‌تونه داده‌ها رو به کمک کوکی‌ها ذخیره کنه.
• ذخیره سازی محلی: اطلاعات رو به کمک "local storage" در مرورگر ذخیره می‌کنه.

برای حفظ امنیت کاربر، جاوااسکریپت در مرورگر محدودیت هایی داره، مثل:

• دسترسی به فایل‌های سیستم: جاوااسکریپت نمی‌تونه به دلخواه به فایل‌های سیستم کاربر دسترسی داشته باشه.
• استفاده از دوربین و میکروفون: این قابلیت وجود داره ولی نیاز به مجوز صریح کاربر داره.
• عدم دسترسی به تب‌ها یا پنجره‌های دیگه: فقط می‌تونه به تب‌ها و پنجره هایی که از یک منبع یا سایت باز شدن دسترسی داشته باشه.
• محدودیت در ارتباط با دامنه‌های دیگه: جاوااسکریپت برای برقراری ارتباط با دامنه‌های دیگه به مجوز نیاز داره.

چرا جاوااسکریپت خاص است؟

جاوااسکریپت ویژگی‌های خاصی داره که اون رو از بقیه زبان‌ها متمایز می‌کنه:

• یکپارچگی با HTML و CSS: جاوااسکریپت به راحتی با HTML و CSS ترکیب می‌شه و این امکان رو می‌ده که محتوا و ظاهر صفحات رو به صورت دینامیک تغییر بدیم.
• سادگی در انجام کارهای پیچیده: در جاوااسکریپت برای انجام خیلی از کارهای پیچیده نیاز به کدهای طولانی نیست.
• پشتیبانی توسط تمام مرورگرها: به طور پیش فرض روی تمام مرورگرهای اصلی اجرا می‌شه.

این ویژگی‌ها جاوااسکریپت رو به زبانی قدرتمند و منعطف تبدیل کرده که نه تنها توی مرورگرها، بلکه روی سرورها، اپلیکیشن‌های موبایل و حتی دستگاه‌های مختلف هم استفاده می‌شه.

زبان‌های مکمل جاوااسکریپت

جاوااسکریپت به تنهایی کارآمده، ولی برای پروژه‌های پیچیده و نیازهای مختلف، زبان هایی وجود دارن که به جاوااسکریپت تبدیل می‌شن و امکانات بیشتری رو ارائه می‌کنن. این زبان‌ها به شما اجازه می‌دن که کدهای جاوااسکریپت خواناتر و راحت‌تر بنویسید:

• CoffeeScript: کدهای جاوااسکریپت رو کوتاه‌تر و قابل خواندن‌تر می‌کنه.
• TypeScript: از مایکروسافت توسعه پیدا کرده و قابلیت اضافه کردن تایپ‌های دقیق رو به کدها اضافه می‌کنه.
• Dart: زبان مستقل گوگل که قابلیت تبدیل به جاوااسکریپت و اجرای مستقل رو داره.

ویرایشگرهای کد

ویرایشگر کد جاییه که برنامه نویس‌ها بیشتر وقتشون رو اونجا می‌گذرونن. در واقع، خونه دوم برنامه نویس هاست! ویرایشگرهای کد دو نوع اصلی دارن: IDE و ویرایشگرهای سبک. خیلی‌ها از هر نوع یکی استفاده می‌کنن.

IDE (محیط توسعه یکپارچه)

IDE یا همون محیط توسعه یکپارچه، یه ویرایشگر قدرتمنده که امکانات زیادی داره و معمولاً برای کل پروژه طراحی شده، نه فقط یه فایل. IDE چیزی بیشتر از یه ویرایشگره؛ در واقع یه محیط کامل توسعه ست که می‌تونه چندین فایل رو باز کنه، بین فایل‌ها حرکت کنه، کدها رو بر اساس کل پروژه بهت پیشنهاد بده، و حتی با سیستم‌های مدیریت نسخه مثل Git و محیط‌های تست و کارهای دیگه ی پروژه محور هم یکپارچه کار کنه.

اگر هنوز IDE انتخاب نکردی، این چند مورد از بهترین‌ها هستن:

• Visual Studio Code (رایگان و قابل اجرا روی همه سیستم عامل ها)
• WebStorm (پولی و چند سکویی)
• Visual Studio (نسخه ای پولی برای ویندوز که نباید با Visual Studio Code اشتباه بگیری) این نسخه برای پلتفرم‌های .NET خیلی خوبه و برای جاوااسکریپت هم عالی عمل می‌کنه. نسخه رایگان Visual Studio Community هم داره.

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

ویرایشگرهای سبک

ویرایشگرهای سبک یا همون Lightweight editors به اندازه ی IDEها قدرتمند نیستن، ولی سریع، ساده و شیکن. بیشتر برای وقتی استفاده می‌شن که نیاز داری یه فایل رو سریع باز و ویرایش کنی.

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

البته ویرایشگرهای سبک هم کلی افزونه دارن که می‌تونن کارهایی مثل تحلیل نحو و تکمیل خودکار رو انجام بدن. پس مرز دقیقی بین این دو نیست. از بهترین ویرایشگرهای سبک می‌شه به اینا اشاره کرد:

• Sublime Text (چندسکویی و نسخه ای ازش رایگان)
• Notepad++ (رایگان و برای ویندوز)
• Vim و Emacs هم گزینه‌های خوبین، البته اگه بلد باشی باهاشون کار کنی!

سلیقه ی شما مهمه!

ویرایشگرهایی که اینجا معرفی کردیم، همونایی هستن که من و دوستان برنامه نویس ازشون راضی بودیم. ولی تو دنیای بزرگ برنامه نویسی، کلی ویرایشگر دیگه هم هست. پس فقط یکی رو انتخاب کن که باهاش راحتی.

در نهایت، انتخاب ویرایشگر یه موضوع شخصیه و بستگی به نوع پروژه ها، عادت‌ها و سلیقه شخصیت داره.

اگه بیشتر پروژه‌های فرانت اند انجام می‌دی، پیشنهاد من Visual Studio Code هست. ولی اگه با زبان‌ها یا پلتفرم‌های دیگه بیشتر کار می‌کنی و فقط بعضی وقت‌ها فرانت اند می‌نویسی، IDEهایی مثل XCode (برای مک)، Visual Studio (برای ویندوز) یا سری Jetbrains مثل Webstorm، PHPStorm یا RubyMine رو امتحان کن.

کنسول توسعه دهنده

کدنویسی، یعنی مواجه شدن با خطاها! این اتفاقیه که برای همه پیش میاد، یعنی با اطمینان می‌تونم بگم قراره خطاهای زیادی داشته باشی. بالاخره همه انسانیم و اشتباه می‌کنیم.

اما تو مرورگر، کاربرها به طور پیش فرض این خطاها رو نمی‌بینن. پس اگه یه مشکلی تو اسکریپت پیش بیاد، نمی‌تونیم بلافاصله بفهمیم چی خراب شده و طبیعتاً نمی‌تونیم درستش کنیم.

برای اینکه بتونیم این خطاها رو ببینیم و اطلاعات مفید دیگه ای هم درباره اسکریپت‌ها به دست بیاریم، مرورگرها «ابزارهای توسعه دهنده» یا همون Developer Tools رو درون خودشون دارن.

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

ابزارهای توسعه دهنده امکانات زیادی دارن، ولی برای شروع کار، کافیه بدونی چطور بازشون کنی، خطاها رو ببینی و دستورات جاوااسکریپت رو اجرا کنی.

Google Chrome

فرض کن یه صفحه به اسم bug.html داری که یه خطای جاوااسکریپتی توش هست. این خطا برای بازدیدکننده‌های عادی قابل دیدن نیست، ولی با ابزارهای توسعه دهنده می‌تونیم پیداش کنیم.

برای باز کردن ابزارهای توسعه دهنده در کروم:

• کلید F12 رو بزن (یا اگه مک داری، از Cmd + Opt + J استفاده کن).

وقتی ابزارهای توسعه دهنده باز می‌شن، به طور پیش فرض روی تب Console باز می‌شه.

شکل ظاهری کنسول هم چیزی شبیه به اینه:

ظاهر دقیق ابزارهای توسعه دهنده به نسخه ی مرورگر کروم بستگی داره. هر چند وقت یه بار تغییراتی در این ابزارها ایجاد می‌شه، ولی به طور کلی همه نسخه‌ها شبیه به هم هستن.

اینجا می‌بینیم که پیغام خطا با رنگ قرمز نمایش داده شده. در این مثال، اسکریپت شامل دستوری به اسم “lalala” هست که برای جاوااسکریپت ناشناخته ست و خطا ایجاد کرده. سمت راست این پیغام خطا، یه لینک آبی وجود داره که به فایل bug.html و شماره ی خط (مثلاً ۱۲) اشاره می‌کنه؛ یعنی جایی که خطا اتفاق افتاده.

پایین پیغام خطا، یه علامت آبی رنگ > هست که نشون دهنده ی «خط فرمان» کنسوله. اینجا می‌تونی دستورات جاوااسکریپت رو تایپ کنی و با زدن Enter، اون‌ها رو اجرا کنی.

حالا که تونستیم خطاها رو ببینیم، این برای شروع کافیه. بعداً در بخش «دیباگ کردن در مرورگر» به صورت کامل‌تر به ابزارهای توسعه دهنده می‌پردازیم و نکات بیشتری یاد می‌گیریم.

نکته: وارد کردن چند خط کد

معمولاً وقتی یه خط کد رو توی کنسول وارد می‌کنی و Enter می‌زنی، کد فوراً اجرا می‌شه. اما اگه بخوای چندین خط کد رو پشت هم وارد کنی، می‌تونی از Shift + Enter استفاده کنی تا هر خط رو جداگانه وارد کنی و در آخر با Enter همه کدها رو با هم اجرا کنی.

فایرفاکس، اج و مرورگرهای دیگه

اکثر مرورگرهای دیگه مثل فایرفاکس و اج هم با زدن F12 ابزارهای توسعه دهنده رو باز می‌کنن. ظاهر و کارکرد این ابزارها توی مرورگرهای مختلف تقریباً شبیه به همه؛ یعنی اگه توی یکی از مرورگرها (مثلاً کروم) این ابزارها رو یاد بگیری، به راحتی می‌تونی ازشون توی مرورگرهای دیگه هم استفاده کنی.

استفاده از کنسول توسعه دهنده در Safari

سافاری (مرورگر مک که روی ویندوز یا لینوکس پشتیبانی نمی‌شه) کمی خاص‌تر از بقیه مرورگرهاست. اول باید منوی "Develop" رو فعال کنیم تا به ابزارهای توسعه دهنده دسترسی داشته باشیم.

برای این کار، وارد تنظیمات (Preferences) بشید و به بخش Advanced برید. پایین صفحه یه گزینه تیک دار وجود داره که با فعال کردنش، منوی "Develop" به نوار بالای مرورگر اضافه می‌شه. حالا می‌تونید با زدن Cmd + Opt + C کنسول رو باز و بسته کنید. منوی Develop هم کلی ابزار و گزینه‌های مختلف داره که می‌تونید ازشون استفاده کنید.

به طور خلاصه ابزارهای توسعه دهنده به ما این امکان رو می‌دن که خطاها رو ببینیم، دستورات جاوااسکریپت رو اجرا کنیم، متغیرها رو بررسی کنیم و کارهای دیگه ای انجام بدیم.

• روی بیشتر مرورگرها در ویندوز، با زدن F12 باز می‌شن.
• توی کروم روی مک با Cmd + Opt + J و توی سافاری هم Cmd + Opt + C (البته اول باید منوی "Develop" رو فعال کنید).

حالا که ابزارهای لازم رو آماده داریم، بریم سراغ کدنویسی و شروع جاوااسکریپت!

در ادامه اصول پایه ای ساخت اسکریپت رو توی جاوااسکریپت یاد می‌گیریم. این بخش پایه و اساس برنامه نویسی جاوااسکریپت رو بهت یاد می‌ده و کمک می‌کنه که بتونی اسکریپت‌های ساده و کاربردی بنویسی.

شروع با "Hello, world!"

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

خب، اول بریم سراغ اینکه چطور یه اسکریپت رو به یه صفحه وب اضافه کنیم. برای محیط‌های سمت سرور مثل Node.js، کافیه اسکریپت رو با دستوری مثل node my.js اجرا کنی.

تگ <script>

برای اینکه بتونی جاوااسکریپت رو توی یه صفحه HTML استفاده کنی، از تگ <script> استفاده می‌کنیم. جاوااسکریپت رو می‌تونی با این تگ تقریباً هر جایی از صفحه قرار بدی و کدت اونجا اجرا می‌شه.

مثال:

<!DOCTYPE HTML>
<html>
<body>
  <p>قبل از اجرای اسکریپت...</p>
  <script>
    alert('Hello, world!');
  </script>
  <p>...بعد از اجرای اسکریپت.</p>
</body>
</html>

این کد رو می‌تونی توی مرورگر اجرا کنی و با زدن دکمه ی «Run» (یا اجرای کد) ببینی نتیجه چیه.

هر چیزی که داخل تگ <script> قرار بگیره، جاوااسکریپته و مرورگر اون رو به محض رسیدن به این تگ اجرا می‌کنه.

کدهای به روز جاوااسکریپت

تگ <script> چند ویژگی داره که تو گذشته استفاده می‌شده، ولی الان دیگه خیلی به کار نمی‌ره، هرچند توی کدهای قدیمی ممکنه هنوز ببینیمشون. بریم ببینیم این ویژگی‌ها چی بودن.

ویژگی type در <script type="…">

تو استاندارد قدیمی HTML4، حتماً باید توی تگ <script> مشخص می‌کردیم که نوعش چیه و معمولاً به این شکل می‌نوشتیم: type="text/javascript". اما الان دیگه این کار لازم نیست. HTML جدید کلاً معنی این ویژگی رو تغییر داده و الان از type بیشتر برای مشخص کردن ماژول‌ها استفاده می‌شه. البته ماژول‌ها یه مبحث پیشرفته‌تر هستن و توی بخش‌های بعدی بهشون می‌رسیم.

ویژگی language در <script language="…">

این ویژگی قدیم‌ها برای این بود که زبان اسکریپت مشخص بشه، ولی دیگه نیازی بهش نداریم، چون جاوااسکریپت به طور پیش فرض زبان اسکریپت هاست.

کامنت‌ها قبل و بعد از کدهای اسکریپت

اگه به کتاب‌ها و راهنماهای خیلی قدیمی نگاه کنی، ممکنه توی تگ <script> کامنت هایی ببینی که چیزی شبیه این هستن:

<script type="text/javascript">
<!--
    ...
//-->
</script>

این ترفند دیگه تو جاوااسکریپت مدرن استفاده نمی‌شه. قدیم ترها این کامنت‌ها برای این بودن که کدهای جاوااسکریپت از دید مرورگرهای قدیمی که <script> رو نمی‌شناختن، مخفی بمونن. از اونجایی که مرورگرهای جدید (در ۱۵ سال اخیر) دیگه این مشکل رو ندارن، اگه با چنین کامنت هایی مواجه شدی، بدون که با کد خیلی قدیمی طرفی!

اسکریپت‌های خارجی (External Scripts)

وقتی کدهای جاوااسکریپت زیاد می‌شن، بهتره که اون‌ها رو توی یه فایل جدا ذخیره کنیم.

برای اینکه یه فایل جاوااسکریپت جدا رو به HTML وصل کنیم، از ویژگی src استفاده می‌کنیم:

<script src="/path/to/script.js"></script>

اینجا، "/path/to/script.js" یه مسیر کامل از ریشه ی سایته. می‌تونیم از مسیر نسبی هم استفاده کنیم. مثلاً src="script.js" یا src="./script.js" هر دو یعنی فایل script.js توی همون پوشه ایه که صفحه ی HTML قرار داره.

حتی می‌تونیم یه آدرس کامل (URL) هم بدیم، مثلاً:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

برای اضافه کردن چند فایل جاوااسکریپت هم فقط کافیه چندتا تگ <script> جداگانه بذاریم:

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>

چند نکته مهم

• معمولاً فقط کدهای ساده جاوااسکریپت رو مستقیماً داخل HTML می‌ذاریم و بقیه کدها توی فایل‌های جدا ذخیره می‌شن.
• فایده ی اصلی فایل جداگانه اینه که مرورگر اون رو یه بار دانلود می‌کنه و بعد توی حافظه ی کش (cache) نگه می‌داره. بنابراین، بقیه صفحات سایت که به این اسکریپت نیاز دارن، اون رو از کش می‌گیرن و دیگه لازم نیست دوباره دانلود بشه. این کار باعث می‌شه که حجم داده کمتر و سرعت بارگذاری صفحات بیشتر بشه.
• وقتی از src استفاده می‌کنی، دیگه نمی‌تونی کدی داخل همون تگ بذاری. یعنی نمی‌شه هم src داشته باشی و هم بین تگ باز و بسته کد بنویسی.

این مثال اشتباهه:

<script src="file.js">
  alert(1); // این کد نادیده گرفته می‌شه چون `src` تنظیم شده
</script>

اگه لازم داری هم از src استفاده کنی و هم کد جداگانه ای داشته باشی، باید اون‌ها رو تو دو تگ مختلف بنویسی:

<script src="file.js"></script>
<script>
  alert(1);
</script>

به این شکل، کدهای هر تگ جداگانه اجرا می‌شن و تداخلی پیش نمیاد.

به طور خلاصه برای اضافه کردن کدهای جاوااسکریپت به صفحه، از تگ <script> استفاده می‌کنیم. نیازی به ویژگی‌های type یا language هم نیست؛ چون جاوااسکریپت به طور پیش فرض زبان شناخته شده ایه.

اگه کدهای جاوااسکریپتت تو یه فایل جدا هستن، می‌تونی به راحتی با این روش به صفحه اضافشون کنی:

<script src="path/to/script.js"></script>

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

تمرین ها

تو این بخش دو تا تمرین برات آماده کردم، سعی کن حتما قبل از دیدن جواب خودت انجامشون بدی. (اگه بلد نیستی سرچ کن).

تمرین 1: نمایش یک پیام هشدار

یه صفحه درست کن که وقتی بازش می‌کنی، یه پیغام نشون بده: "Hello World!"

می تونی این کار رو توی یه محیط آزمایشی (sandbox) یا روی هارد کامپیوتر خودت انجام بدی. مهم اینه که درست کار کنه!

نکته مهم: رفیق لطفا اگه خودت حلش نکردی برگرد بالا و تلاش کن، قبل از این که سولوشن رو ببینی🙂

راه حل

<!DOCTYPE html>
<html>
<body>
  <script>
    alert( "Hello World!" );
  </script>
</body>
</html>

تمرین 2: نمایش پیام هشدار با اسکریپت خارجی

با استفاده از راه حل تمرین قبلی، این بار محتویات اسکریپت رو از صفحه جدا کن و توی یه فایل خارجی به اسم alert.js ذخیره کن. این فایل باید تو همون پوشه ای باشه که صفحه HTMLت هست.

صفحه رو باز کن و مطمئن شو که پیام هشدار نمایش داده می‌شه.

راه حل

وقتی فایل alert.js رو ساختی، می‌تونی توش کد زیر رو بذاری:

alert("Hello World!");

حالا کافیه این فایل رو توی صفحه HTMLت با تگ <script> اضافه کنی:

<!DOCTYPE html>
<html>
<body>
  <script src="alert.js"></script>
</body>
</html>

وقتی این صفحه رو باز کنی، پیغام "Hello World!" به صورت هشدار (alert) نمایش داده می‌شه.

ساختار کد

اولین چیزی که باید یاد بگیریم، اجزای سازنده کدنویسی هستن.

دستورات (Statements)

دستورات یا همون Statements، قسمت‌های اصلی و فرمان‌های کدنویسی هستن که یه کاری انجام می‌دن.

تا الان با یه دستور آشنا شدی: alert('Hello, world!')، که پیام “Hello, world!” رو نشون می‌ده.

توی کد، می‌تونی هر تعداد دستور که بخوای بنویسی و هر کدوم رو با یه ; (نقطه ویرگول) از هم جدا کنی.

برای مثال، اینجا پیام "Hello" و "World" رو توی دو تا هشدار جدا نشون دادیم:

alert('Hello'); alert('World');

اما معمولاً برای خوانایی بیشتر، هر دستور رو تو یه خط جدا می‌نویسن:

alert('Hello');
alert('World');

این جوری کد راحت‌تر خونده می‌شه و منظم‌تر به نظر میاد.

نقطه ویرگول‌ها (Semicolons)

توی جاوااسکریپت، معمولاً وقتی خط جدید شروع می‌شه، لازم نیست حتماً از نقطه ویرگول (;) استفاده کنی. برای مثال، این کد بدون نقطه ویرگول هم به خوبی کار می‌کنه:

alert('Hello')
alert('World')

اینجا جاوااسکریپت خودش به طور خودکار خط جدید رو مثل یه نقطه ویرگول در نظر می‌گیره. به این قابلیت می‌گیم درج خودکار نقطه ویرگول یا automatic semicolon insertion.

اما! همون طور که معمولاً این کار انجام می‌شه، همیشه این طور نیست! مواقعی هم پیش میاد که خط جدید به طور خودکار نقطه ویرگول در نظر گرفته نمی‌شه و ممکنه کد اشتباه اجرا بشه.

مثال هایی از جاهایی که نقطه ویرگول لازمه

فرض کن کد زیر رو داری:

alert(3 +
1
+ 2);

اینجا خروجی 6 هست، چون جاوااسکریپت متوجه می‌شه که وقتی خط با علامت + تموم شده، هنوز عبارت کامل نشده و نباید نقطه ویرگول بزاره. پس همه چی درست کار می‌کنه.

اما بعضی وقت‌ها جاوااسکریپت نمی‌تونه خودش تشخیص بده که نقطه ویرگول لازم داریم یا نه، و این می‌تونه باعث بروز خطا بشه.

یک نمونه از خطا

اگه دوست داری یه مثال از این نوع خطا ببینی، این کد رو بررسی کن:

alert("Hello");
[1, 2].forEach(alert);

لازم نیست الان معنی [] یا forEach رو بدونی؛ فقط توجه کن که این کد اول Hello رو نشون می‌ده، بعد هم اعداد 1 و 2 رو.

حالا اگه نقطه ویرگول بعد از alert("Hello") رو حذف کنیم:

alert("Hello")
[1, 2].forEach(alert);

اینجا تفاوت فقط حذف یه نقطه ویرگوله، ولی وقتی این کد رو اجرا کنیم، فقط Hello نمایش داده می‌شه و دیگه خبری از اعداد 1 و 2 نیست؛ چون جاوااسکریپت نقطه ویرگول رو قبل از براکت مربع [ ] در نظر نگرفته و کل کد رو به صورت یه دستور واحد می‌بینه، چیزی مثل این:

alert("Hello")[1, 2].forEach(alert);

عجیب شد، نه؟ این نوع ترکیب بندی اشتباهه و باعث خطا می‌شه. برای اینکه کد درست کار کنه، حتماً بعد از alert("Hello") نقطه ویرگول بذار.

توصیه ی کلی

احتمالا یکم گیج شدی؟🙂 خیلی ذهنت رو درگیر نکن، خلاصه حرفام می‌شه: بهتره همیشه بین دستورات، حتی وقتی خط جدید شروع می‌شه، نقطه ویرگول بذاری. این روش تقریباً تو کل جامعه برنامه نویسی جاوااسکریپت پذیرفته شده و به ویژه برای تازه کارها کمک می‌کنه تا از خطاهای احتمالی جلوگیری کنن. درسته که تو بیشتر مواقع می‌شه نقطه ویرگول رو نذاشت، اما برای اینکه خیالت راحت باشه و کدت مطمئن‌تر باشه، بهتره ازش استفاده کنی.

کامنت‌ها (Comments)

وقتی برنامه‌ها پیچیده‌تر می‌شن، نیاز به توضیحاتی داریم که بگیم هر قسمت از کد چی کار می‌کنه و چرا اونجا نوشته شده. اینجاست که کامنت ها به کار میان. کامنت‌ها تو هر جای کد قابل استفادن و کلاً توسط مرورگر نادیده گرفته می‌شن، یعنی تأثیری روی اجرای کد ندارن.

کامنت‌های تک خطی

برای نوشتن کامنت‌های تک خطی، از دو تا اسلش (//) استفاده می‌کنیم. هر چی بعد از // تو اون خط بیاد، تبدیل به کامنت می‌شه. می‌تونیم کامنت رو تو یه خط مجزا بنویسیم یا بعد از یه دستور قرار بدیم.

مثال:

// این کامنت یه خط جدا داره
alert('Hello');
alert('World'); // این کامنت بعد از دستور اومده

کامنت‌های چندخطی

برای کامنت‌های چندخطی از ترکیب /* و */ استفاده می‌کنیم. هر چی بین این دو علامت باشه کامنت حساب می‌شه.

مثال:

/* این یه مثال با دو تا پیامه.
این کامنت چند خطیه.
*/
alert('Hello');
alert('World');

حتی می‌تونیم بخش هایی از کد رو به صورت موقت کامنت کنیم تا اون قسمت اجرا نشه:

/* غیرفعال کردن کد
alert('Hello');
*/
alert('World');

کلیدهای میانبر برای کامنت گذاری

توی بیشتر ویرایشگرها، می‌تونی با زدن کلیدهای میانبر کامنت بذاری. برای کامنت‌های تک خطی Ctrl + / (در مک Cmd + /) و برای کامنت‌های چندخطی Ctrl + Shift + / (در مک Cmd + Option + /) رو امتحان کن.

کامنت‌های تو در تو پشتیبانی نمی‌شن!

یادت باشه که نمی‌تونیم کامنت‌های چندخطی رو توی هم بذاریم. این کد خطا می‌ده:

/*
  /* این کامنت تو در توئه و کار نمی‌کنه */
*/
alert('World');

چرا کامنت‌ها مهم هستن؟

کامنت‌ها حجم کد رو زیاد می‌کنن، اما اصلاً جای نگرانی نیست! قبل از اینکه کدها رو روی سرور نهایی (تولید) قرار بدیم، ابزارهایی هستن که کد رو بهینه سازی می‌کنن و کامنت‌ها رو حذف می‌کنن. این یعنی کامنت‌ها هیچ اثری روی اجرای نسخه ی نهایی ندارن و فقط به خوانایی و نگهداری کد کمک می‌کنن.

در ادامه ی آموزش هم یه بخش داریم که درباره کیفیت کد صحبت می‌کنه و نکات بیشتری برای نوشتن کامنت‌های بهتر بهت یاد می‌ده.

مدرن سازی با "use strict"

جاوااسکریپت برای مدت‌ها بدون اینکه مشکلی توی سازگاری به وجود بیاد، رشد کرد. هر ویژگی جدیدی که به زبان اضافه می‌شد، طوری طراحی می‌شد که با کدهای قدیمی تداخلی نداشته باشه. این کار یه مزیت داشت: کدهای قبلی همیشه کار می‌کردن. اما یه مشکل هم داشت؛ اشتباهات و تصمیم‌های ناقصی که تو طراحی اولیه زبان وجود داشت، برای همیشه توی جاوااسکریپت موندگار شدن.

این روال ادامه داشت تا سال 2009 که ECMAScript 5 (یا همون ES5) اومد. توی این نسخه، امکانات جدیدی اضافه و بعضی از بخش‌های قبلی بهبود پیدا کردن. اما برای اینکه کدهای قدیمی خراب نشن، اکثر این تغییرات به طور پیش فرض غیرفعال بودن و برای فعال کردن باید از یه دستور خاص استفاده می‌کردی: "use strict".

"use strict" چیه؟

این دستور شبیه یه رشته ساده ست: "use strict" یا 'use strict'. وقتی این دستور رو بالای کد جاوااسکریپتت بذاری، باعث می‌شه کل کد به صورت "مدرن" و بهینه اجرا بشه.

مثال:

"use strict";
// این کد به سبک مدرن اجرا می‌شه
...

در آینده نزدیک، که با توابع آشنا بشیم (یعنی روش هایی برای گروه بندی دستورات)، می‌بینیم که می‌شه "use strict" رو اول یه تابع هم قرار داد تا فقط همون تابع به سبک مدرن اجرا بشه. ولی معمولاً ازش برای کل اسکریپت استفاده می‌کنن.

"use strict" رو حتماً بالای اسکریپت بذار

یادت باشه که "use strict" حتماً باید بالای کد باشه؛ وگرنه اصلاً فعال نمی‌شه. مثلاً اینجا اشتباهه:

alert("some code");
// "use strict" اینجا دیگه نادیده گرفته می‌شه چون باید اول اسکریپت باشه
"use strict";
// حالت مدرن فعال نیست

فقط کامنت‌ها می‌تونن قبل از "use strict" بیان، وگرنه کار نمی‌کنه.

نمی تونی "use strict" رو غیرفعال کنی

وقتی use strict رو فعال کردی، دیگه نمی‌تونی با یه دستور دیگه مثل "no use strict" به حالت قدیمی برگردی. یعنی به محض اینکه وارد حالت مدرن شدی، برگشتی در کار نیست!

کنسول مرورگر و "use strict"

وقتی از کنسول توسعه دهنده برای اجرای کد استفاده می‌کنی، یادت باشه که به طور پیش فرض "use strict" فعال نیست. این یعنی ممکنه بعضی مواقع که فرق بین حالت معمولی و "strict" مهمه، نتایج اشتباه بگیری.

پس چطور توی کنسول از "use strict" استفاده کنیم؟

برای این کار می‌تونی اول "use strict"; رو تایپ کنی، بعد Shift + Enter رو بزن تا خط جدید باز بشه و کدت رو زیرش بنویسی. مثل این:

'use strict'; <Shift+Enter بزن تا بری خط بعد>
// ...کدت رو اینجا بنویس
<Enter برای اجرا>

این روش توی بیشتر مرورگرها مثل فایرفاکس و کروم کار می‌کنه. اگر تو مرورگرهای قدیمی جواب نداد، یه روش دیگه هم هست (هر چند خیلی شیک نیست، ولی کار می‌کنه!). برای این کار، کل کد رو داخل یه تابع ناشناس بذار:

(function() {
  'use strict';
  // ...اینجا کدت رو بنویس
})();

باید همیشه "use strict" بذاریم؟

این سوال شاید ساده به نظر برسه، ولی همیشه جواب قطعی نداره. خب، معمولاً توصیه می‌شه که کدها رو با "use strict" شروع کنی… اما یه نکته ی جالب هست!

جاوااسکریپت مدرن از ساختارهای پیشرفته ای مثل کلاس‌ها و ماژول‌ها پشتیبانی می‌کنه (بعداً بهشون می‌رسیم) که خودشون به طور خودکار "use strict" رو فعال می‌کنن. پس وقتی با این‌ها کار کنی، دیگه نیازی نیست دستی "use strict" بذاری.

فعلاً بهتره "use strict"; رو بالای کدهات بذاری. ولی وقتی کدت رو به کلاس‌ها و ماژول‌ها منتقل کردی، دیگه می‌تونی حذفش کنی.

تا اینجا با کلیات "use strict" آشنا شدیم. تو بخش‌های بعدی که ویژگی‌های مختلف زبان رو یاد می‌گیریم، تفاوت‌های بین حالت "strict" و معمولی رو هم خواهیم دید. خوشبختانه این تفاوت‌ها خیلی زیاد نیستن و استفاده از "strict" باعث می‌شه کد بهتری بنویسیم.

تمام مثال‌های این آموزش هم با فرض "strict mode" نوشته شدن، مگر اینکه خلافش گفته بشه.

خلاصه ی "use strict"

"use strict" یه دستور ویژه ست که جاوااسکریپت رو وارد حالت "سخت گیرانه" یا "مدرن" می‌کنه. این یعنی وقتی این دستور رو بالای کدهای جاوااسکریپتت می‌ذاری، بعضی از رفتارهای قدیمی و مشکل ساز زبان دیگه فعال نمی‌شن و کدها امن‌تر و منظم‌تر اجرا می‌شن.

این حالت جدید چند تا مزیت داره:

• کاهش خطاهای ناخواسته: "use strict" کمک می‌کنه جاوااسکریپت سخت گیرانه‌تر با کد برخورد کنه. مثلاً، اگر بخوای یه متغیر رو بدون let یا const تعریف کنی، جاوااسکریپت تو حالت عادی این کار رو قبول می‌کنه، ولی تو حالت "strict" یه خطا نشون می‌ده که از این کار اشتباه جلوگیری بشه.
• افزایش امنیت: با این حالت، کد از دسترسی به بعضی از بخش‌های ناامن جلوگیری می‌کنه، مثل استفاده‌های نادرست از بعضی ویژگی ها.
• سازگاری بهتر با ویژگی‌های جدید: تو جاوااسکریپت مدرن، امکانات جدید (مثل کلاس‌ها و ماژول ها) به طور پیش فرض تو حالت "strict" کار می‌کنن. پس اگه از همین اول با "use strict" شروع کنی، وقتی وارد مباحث پیشرفته‌تر بشی، کمتر دچار مشکل می‌شی.

برای این که از "use strict" استفاده کنی فقط کافیه این خط رو بالای کدهات بذاری:

"use strict";

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

فرض کن کدی داری که توش یه متغیر رو بدون let یا const تعریف کردی:

// بدون "use strict"
x = 10; // جاوااسکریپت هیچ خطایی نمی‌ده و این متغیر رو ایجاد می‌کنه
// با "use strict"
"use strict";
x = 10; // خطا می‌ده، چون متغیر بدون let یا const تعریف شده

در حالت "strict"، کد بالا خطا می‌ده و بهت یادآوری می‌کنه که باید کد رو درست بنویسی.

پس "strict mode" جاوااسکریپت رو از حالت قدیمی و کمی شُل و وِل، به حالت مدرن‌تر و قابل اعتمادتر می‌بره. این باعث می‌شه کدهای ایمن‌تر و دقیق‌تری بنویسی. اگر "use strict"; رو اول کد بذاری، از مزایای حالت مدرن جاوااسکریپت بهره مند می‌شی و با ورود به مباحث پیشرفته‌تر مثل کلاس‌ها و ماژول ها، کار راحت‌تری خواهی داشت.

متغیرها (Variables)

توی اکثر برنامه‌های جاوااسکریپت، نیاز داریم با اطلاعاتی کار کنیم. مثلاً:

• تو یه فروشگاه آنلاین، اطلاعات شامل کالاها و سبد خرید می‌شن.
• تو یه اپ چت، اطلاعات شامل کاربران، پیام‌ها و چیزای دیگست.

برای ذخیره این اطلاعات از متغیرها استفاده می‌کنیم.

متغیر چیه؟

متغیر یه جور "فضای ذخیره سازی نام گذاری شده" برای اطلاعاته. مثلاً می‌تونیم اطلاعاتی مثل کالاها، بازدیدکننده‌ها و چیزهای دیگه رو توی متغیرها ذخیره کنیم. (مثل یه ظرفه که اطلاعات رو تو خودش نگه می‌داره)

برای ایجاد یه متغیر توی جاوااسکریپت، از کلمه ی کلیدی let استفاده می‌کنیم.

مثال:

let message;

این دستور یه متغیر به اسم message می‌سازه. حالا می‌تونیم مقداری رو توش ذخیره کنیم، با استفاده از = (علامت مساوی برای انتساب).

let message;
message = 'Hello'; // ذخیره رشته 'Hello' توی متغیر message

الان رشته ی 'Hello' توی حافظه ی مربوط به متغیر message ذخیره شده و می‌تونیم با استفاده از اسم متغیر، بهش دسترسی داشته باشیم:

let message;
message = 'Hello!';
alert(message); // محتویات متغیر رو نشون می‌ده

برای خلاصه نویسی می‌تونیم ایجاد متغیر و مقداردهی رو توی یه خط انجام بدیم:

let message = 'Hello!'; // تعریف و مقداردهی متغیر تو یه خط
alert(message); // نمایش 'Hello!'

تعریف چندین متغیر

می تونیم چند متغیر رو تو یه خط هم تعریف کنیم:

let user = 'John', age = 25, message = 'Hello';

این روش کوتاه تره ولی توصیه نمی‌شه چون خوندنش سخت تره. بهتره برای هر متغیر یه خط جدا بذاری تا کد خواناتر بشه:

let user = 'John';
let age = 25;
let message = 'Hello';

یه روش دیگه هم هست که متغیرها رو به این شکل چند خطی تعریف کنیم:

let user = 'John',
    age = 25,
    message = 'Hello';

و یا حتی به روش "کاما اول" که کمتر مرسومه:

let user = 'John'
  , age = 25
  , message = 'Hello';

از نظر فنی، همه ی این روش‌ها یه کار رو انجام می‌دن و انتخاب یکی از اون‌ها بیشتر به سلیقه و ظاهر کد بستگی داره.

var به جای let

توی کدهای قدیمی تر، شاید به کلمه ی کلیدی var به جای let برخورد کنی:

var message = 'Hello';

var تقریباً شبیه let هست، ولی یه جورایی قدیمی و "کلاسیک" محسوب می‌شه. تفاوت‌های ریزی بین let و var هست که فعلاً نیازی نیست نگرانشون باشی.

یه مثال ساده از دنیای واقعی

اگه بخوایم مفهوم متغیر رو راحت‌تر درک کنیم، می‌تونیم تصور کنیم که متغیر مثل یه جعبه ست که یه برچسب (اسم) داره و داخلش می‌تونیم یه داده بذاریم.

مثلاً متغیری به اسم message رو تصور کن که مثل یه جعبه ست با برچسب "message" و توش مقدار "Hello!" گذاشتیم.

let message;
message = 'Hello!';

می تونیم هر نوع مقداری که بخوایم تو این جعبه بذاریم و هر وقت هم که لازم شد، محتواش رو عوض کنیم:

message = 'World!'; // مقدار تغییر کرد
alert(message); //  World!

هر وقت که مقدار متغیر رو عوض می‌کنیم، داده ی قبلی از جعبه حذف می‌شه و مقدار جدید توش قرار می‌گیره.

کپی کردن داده از یه متغیر به متغیر دیگه

می تونیم دو تا متغیر تعریف کنیم و اطلاعات یکی رو توی اون یکی کپی کنیم:

let hello = 'Hello world!';
let message;
// کپی کردن مقدار hello توی message
message = hello;
alert(hello); // Hello world!
alert(message); // Hello world!

در مثال بالا، متغیر hello مقدار 'Hello world!' داره، اما این مقدار توی متغیر message هم کپی شده. وقتی می‌گیم:

message = hello;

در واقع مقدار hello (که همون 'Hello world!' هست) به متغیر message اختصاص داده می‌شه. بنابراین بعد از این خط، هم hello و هم message حاوی مقدار 'Hello world!' هستن.

دوباره تعریف کردن متغیرها ممنوع!

یه متغیر باید فقط یه بار تعریف بشه. اگه همون متغیر رو دوباره با let تعریف کنیم، به خطا می‌خوریم:

let message = "This";
// تکرار تعریف متغیر باعث خطا می‌شه
let message = "That"; // SyntaxError: 'message' has already been declared

پس فقط یه بار متغیر رو تعریف می‌کنیم و بعد هر وقت نیاز بود از اسمش استفاده می‌کنیم بدون اینکه دوباره let بنویسیم.

زبان‌های برنامه نویسی تابعی

جالبه بدونی که یه سری زبان‌های برنامه نویسی تابعی مثل Haskell اجازه نمی‌دن مقدار متغیرها رو تغییر بدی. یعنی وقتی یه مقدار رو توی جعبه می‌ذاری، دیگه نمی‌تونی اون رو عوض کنی و اگه نیاز به مقدار جدیدی داری، باید یه متغیر جدید (یا همون جعبه جدید) بسازی.

شاید اولش عجیب به نظر بیاد، ولی این زبان‌ها برای توسعه‌های جدی و محاسبات موازی مزایای خاصی دارن و این محدودیت تو اون زمینه‌ها مفید هم هست.

نام گذاری متغیرها

برای نام گذاری متغیرها در جاوااسکریپت، باید دو تا قانون رو رعایت کنی:

• اسم متغیر باید فقط شامل حروف، اعداد یا نمادهای $ و _ باشه.
• اولین کاراکتر اسم متغیر نمی‌تونه یه عدد باشه.

مثال هایی از نام گذاری درست متغیرها:

let userName;
let test123;

اگه نام متغیرت شامل چند کلمه باشه، معمولاً از camelCase استفاده می‌کنن، یعنی اولین حرف کلمه اول کوچیکه و کلمات بعدی با حرف بزرگ شروع می‌شن، مثل: myVeryLongName.

یه نکته جالب دیگه اینه که نمادهای $ و _ رو هم می‌تونی توی اسم متغیر استفاده کنی. این‌ها مثل حروف عادی هستن و معنی خاصی ندارن.

این‌ها همگی نام‌های درستی هستن:

let $ = 1; // متغیری با نام "$"
let _ = 2; // متغیری با نام "_"
alert($ + _); // نتیجه ۳

اما این نام گذاری‌ها اشتباهن:

let 1a; // نمی‌تونه با عدد شروع بشه
let my-name; // خط تیره توی نام مجاز نیست

حروف بزرگ و کوچیک فرق می‌کنن

مثلاً apple و APPLE دو متغیر جدا از هم حساب می‌شن و با هم فرق دارن.

استفاده از حروف غیر لاتین: مجاز، اما توصیه نمی‌شه

توی جاوااسکریپت می‌تونی از هر زبانی برای نام گذاری استفاده کنی، حتی حروف روسی یا چینی:

let имя = '...';
let 我 = '...';

مشکلی توی اجرای کد پیش نمیاد، ولی از نظر جهانی و عرف برنامه نویسی، بهتره از اسامی انگلیسی استفاده کنی. حتی اگه پروژه کوچیک باشه، ممکنه بعداً نیاز باشه کسی از کشورهای دیگه هم کدت رو بخونه.

نام‌های رزرو شده

بعضی از کلمات در جاوااسکریپت رزرو شدن و نمی‌تونی از اون‌ها برای نام گذاری متغیر استفاده کنی، چون خود زبان به این کلمات نیاز داره. مثل let، class، return و function.

نمونه ای از کد اشتباه:

let let = 5; // نمی‌شه اسم متغیر رو "let" گذاشت، خطا می‌ده!
let return = 5; // همین طور "return"، این هم خطا می‌ده!

تعریف متغیر بدون "use strict"

تو نسخه‌های قدیمی‌تر جاوااسکریپت، می‌شد متغیر رو بدون let تعریف کرد و فقط با مقداردهی مستقیم ایجادش کرد. این روش همچنان جواب می‌ده اگه use strict رو توی کد استفاده نکرده باشی، چون به خاطر سازگاری با کدهای قدیمی این امکان هنوز هست.

// دقت کن: اینجا "use strict" نداریم
num = 5; // متغیر "num" بدون let تعریف می‌شه و خطا نمی‌ده
alert(num); // خروجی ۵

اما این روش اصلاً پیشنهاد نمی‌شه، چون اگه حالت سخت گیرانه (strict mode) رو فعال کنی، خطا می‌ده:

"use strict";
num = 5; // خطا می‌ده: num تعریف نشده

پس بهتره همیشه با let متغیر رو تعریف کنی تا از اینجور خطاها جلوگیری کنی.

ثابت‌ها (Constants)

اگه یه متغیر داشته باشی که می‌خوای مقدارش همیشه ثابت و بدون تغییر بمونه، می‌تونی به جای let از const استفاده کنی:

const myBirthday = '18.04.1982';

متغیرهایی که با const تعریف می‌شن، بهشون می‌گیم ثابت، چون نمی‌تونی بعد از تعریف، مقدارشون رو تغییر بدی. اگه بخوای تغییرشون بدی، با خطا مواجه می‌شی:

const myBirthday = '18.04.1982';
myBirthday = '01.01.2001'; // خطا: نمی‌تونی مقدار ثابت رو عوض کنی!

وقتی مطمئن هستی که یه متغیر هیچ وقت تغییر نمی‌کنه، با const تعریفش کن تا هم از تغییر ناخواسته جلوگیری بشه، هم به بقیه برنامه نویسا نشون بدی که این مقدار قراره همیشه ثابت بمونه.

ثابت هایی با حروف بزرگ

یه روش مرسوم تو برنامه نویسی اینه که ثابت هایی که نقش یه جایگزین برای مقادیر پیچیده و سخت به خاطر سپردن دارن رو با حروف بزرگ و زیرخط تعریف کنن.

مثلاً برای رنگ‌ها توی فرمت‌های "وب" (هگزادسیمال)، این شکلی تعریفشون می‌کنن:

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";
// وقتی می‌خوایم یه رنگ رو انتخاب کنیم
let color = COLOR_ORANGE;
alert(color); // #FF7F00

چرا این روش خوبه؟

• COLOR_ORANGE رو راحت‌تر از "#FF7F00" به خاطر می‌سپاری.
• احتمال خطا تو تایپ "#FF7F00" بیشتر از COLOR_ORANGE هست.
• موقع خوندن کد، COLOR_ORANGE معنی بهتری داره تا "#FF7F00".

چه زمانی از حروف بزرگ برای ثابت‌ها استفاده کنیم؟

وقتی از ثابت‌ها (یعنی همون متغیرهایی که با const تعریف می‌کنی و مقدارشون تغییر نمی‌کنه) استفاده می‌کنیم، می‌تونیم به دو روش اسم گذاری کنیم:

• حروف بزرگ با زیرخط (مثل COLOR_RED): برای مقادیری که از اول و قبل از اجرای برنامه معلوم هستن.
• حروف عادی (مثل pageLoadTime): برای مقادیری که موقع اجرا تعیین می‌شن و تا لحظه ی اجرا مقدارشون مشخص نیست.

وقتی از حروف بزرگ استفاده می‌کنیم، نشون می‌دیم که این ثابت یه مقدار سخت کد شده (hard-coded) داره؛ یعنی مقداری که از قبل می‌دونیم و در کل برنامه همون باقی می‌مونه. مثلاً:

const COLOR_RED = "#F00";
const MAX_USERS = 100;

اینجا COLOR_RED همیشه "#F00" هست و MAX_USERS همیشه ۱۰۰ می‌مونه. اینا مقادیری هستن که از همون اول مشخصن و تغییری توشون نیست.

اما بعضی وقت‌ها مقدار ثابت موقع اجرای برنامه مشخص می‌شه، مثل زمانی که مرورگر یه صفحه رو بارگذاری می‌کنه و ما می‌خوایم مدت زمان بارگذاری رو ذخیره کنیم:

const pageLoadTime = /* مدت زمان بارگذاری صفحه */;

مقدار pageLoadTime رو قبل از بارگذاری صفحه نمی‌دونیم؛ یعنی این عدد موقع اجرای برنامه محاسبه و تعیین می‌شه. ولی چون قرار نیست بعد از مقداردهی تغییر کنه، با const تعریفش می‌کنیم. از طرفی، چون این مقدار قبل از اجرا مشخص نبوده، نیازی به استفاده از حروف بزرگ نداره.

خلاصه:

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

این روش به خواناتر شدن کد کمک می‌کنه و راحت‌تر می‌تونی بفهمی که یه مقدار از اول ثابت بوده یا فقط یه بار ثابت شده و تغییر نکرده.

انتخاب اسم‌های درست برای متغیرها

یه نکته خیلی مهم توی بحث متغیرها اینه که اسمی که براشون انتخاب می‌کنی باید واضح و با معنی باشه، به طوری که مشخص کنه اون متغیر چه نوع داده ای رو ذخیره کرده.

انتخاب اسم برای متغیرها یکی از مهم‌ترین و شاید پیچیده‌ترین مهارت‌های برنامه نویسیه. از روی اسم متغیرها می‌شه حدس زد کد رو یه تازه کار نوشته یا یه برنامه نویس حرفه ای.

توی پروژه‌های واقعی، بیشتر وقتمون رو صرف ویرایش و گسترش کدهای قبلی می‌کنیم، نه نوشتن از صفر. وقتی بعد از مدتی برمی گردی به کدی که قبلاً نوشتی، متغیرهای با اسم خوب و واضح خیلی کمک می‌کنن که سریع‌تر بفهمی چی به چیه.

پس قبل از اینکه متغیری رو تعریف کنی، یه ذره وقت بذار و به اسم مناسبش فکر کن. مطمئن باش ارزشش رو داره!

چند قانون ساده برای انتخاب اسم خوب:

• از اسم هایی استفاده کن که برای آدم‌ها قابل خوندن و فهمیدن باشن، مثل userName یا shoppingCart.
• از اسم‌های کوتاه و بی معنی مثل a، b، یا c پرهیز کن، مگر اینکه دقیقاً بدونی داری چی کار می‌کنی.
• اسم‌ها باید در عین حال که توصیفی هستن، مختصر هم باشن. اسم هایی مثل data یا value معمولاً بی معنی هستن، مگر اینکه از روی کد مشخص باشه دقیقاً به چی اشاره می‌کنن.
• اگر توی تیمتون برای چیزی اسم خاصی دارید، همون رو توی کد استفاده کنید. مثلاً اگه کاربر سایت رو “user” صدا می‌کنید، اسم متغیرهای مربوط به اون رو هم currentUser یا newUser بذار، نه مثلاً currentVisitor.

این کار شاید ساده به نظر بیاد، ولی در عمل پیدا کردن اسم‌های دقیق و مختصر واقعاً چالش برانگیزه.

استفاده دوباره یا تعریف متغیر جدید؟

یه نکته دیگه اینه که بعضی برنامه نویس‌های تنبل، به جای اینکه متغیر جدید تعریف کنن، همون متغیرهای قبلی رو استفاده می‌کنن. این کار باعث می‌شه متغیرها مثل جعبه هایی بشن که توشون چیزهای مختلفی انداخته شده، بدون اینکه برچسبش عوض بشه. حالا تو اون جعبه چیه؟ معلوم نیست، باید بازش کنیم و چک کنیم!

این افراد با تعریف نکردن متغیرهای جدید یه مقدار تو زمان صرفه جویی می‌کنن، ولی تو دیباگ کردن کدها ده برابر بیشتر وقت از دست می‌دن.

پس، تعریف متغیر اضافی چیز بدی نیست. اتفاقاً تو جاوااسکریپت مدرن، مرورگرها و ابزارهای فشرده سازی کد طوری بهینه سازی می‌کنن که این کار هیچ مشکلی برای عملکرد کد ایجاد نمی‌کنه و حتی به بهینه سازی کمک هم می‌کنه.

خلاصه

ما می‌تونیم با استفاده از var، let یا const متغیر تعریف کنیم:

• let – روش مدرن برای تعریف متغیره.
• var – روش قدیمیه که معمولاً دیگه استفاده نمی‌شه.
• const – مثل let هست، با این تفاوت که مقدارش رو نمی‌شه تغییر داد.

و در نهایت، متغیرها باید اسمی داشته باشن که محتواشون رو به خوبی توضیح بده و فهمش رو راحت کنه.

تمرین ها

حالا بریم چندتا تمرین انجام بدیم که مطالب گفته شده بهتر تو ذهنت تثبیت بشن. حتما سعی کن خودت تمرین‌ها رو حل کنی اول و مستقیم سراغ جواب نری.

تمرین ۱: کار با متغیرها

الف) دو متغیر به نام admin و name تعریف کن. 

ب) مقدار "John" رو به name بده. 

ج) مقدار name رو به admin کپی کن. 

د) مقدار admin رو با alert نمایش بده (باید "John" رو نشون بده).

راه حل

let admin, name; // can declare two variables at once
name = "John";
admin = name;
alert( admin ); // "John"

تمرین ۲: انتخاب اسم درست

الف) یه متغیر برای اسم سیارمون تعریف کن. به نظرت چه اسمی براش مناسبه؟ 

ب) یه متغیر برای ذخیره اسم بازدیدکننده ی فعلی سایت بساز. به نظرت چه اسمی براش خوبه؟

راه حل

الف) تعریف کردن متغیر برای سیاره خیلی سادست:

let ourPlanetName = "Earth";

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

ب) اسم بازدیدکننده فعلی

let currentUserName = "John";

این جا هم می‌تونستیم از اسم کوتاه‌تر userName استفاده کنیم، البته اگه مطمئن باشیم که کاربر فعلی رو نشون می‌ده. اما واضح‌تر و خواناتر بودن اسم بهتره.

ویرایشگرهای مدرن برنامه نویسی و قابلیت‌های تکمیل خودکار (autocomplete) کار نوشتن اسامی طولانی رو راحت می‌کنن. پس نگران طولانی بودن اسم‌های متغیر نباش. حتی اگه سه کلمه هم باشه، بهتر از اسامی مبهم و کوتاهه.

و اگه ویرایشگرت قابلیت تکمیل خودکار خوبی نداره، وقتشه یه ویرایشگر جدید بگیری!

تمرین ۳: ثابت با حروف بزرگ؟

کد زیر رو بررسی کن:

const birthday = '18.04.1982'; const age = someCode(birthday);

اینجا یه ثابت birthday برای تاریخ تولد داریم، و یه ثابت دیگه به نام age. مقدار age از birthday به دست میاد، البته با استفاده از یه تابع به نام someCode() که بعداً یادش می‌گیریم؛ فعلاً فقط بدون که age به نوعی از birthday محاسبه می‌شه.

سوال: آیا باید از حروف بزرگ برای birthday و age استفاده کنیم؟ یا فقط برای یکی از اون ها؟ مثلاً:

const BIRTHDAY = '18.04.1982'; // birthday رو با حروف بزرگ بنویسیم؟ const AGE = someCode(BIRTHDAY); // age رو با حروف بزرگ بنویسیم؟

پاسخ: استفاده از حروف بزرگ برای BIRTHDAY مناسبه، چون تاریخ تولد یه مقدار ثابت و از قبل مشخصه و تا آخر کد تغییری نمی‌کنه. اما age مقدارش در طول اجرای برنامه محاسبه می‌شه و یه جورایی وابسته به زمان اجرای کده؛ بنابراین بهتره به صورت حروف عادی نوشته بشه.

جمع بندی

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

جاوااسکریپت ویژگی‌های خاصی داره، مثل سازگاری خوب با HTML و CSS، سرعت بالا، و پشتیبانی توسط همه مرورگرها، که اون رو به یه ابزار همه کاره تبدیل کرده. به همین خاطر، علاوه بر مرورگر، ازش برای اپلیکیشن‌های موبایل، سرورها و حتی پروژه‌های پیچیده استفاده می‌شه.

بعد با متغیرها و ثابت‌ها آشنا شدیم. یاد گرفتیم چطور با استفاده از let و const متغیرهای مختلف تعریف کنیم و چطور مقادیر مختلف رو داخلشون ذخیره کنیم. درباره اهمیت نام گذاری درست و اینکه چطور اسامی واضح به فهم کد کمک می‌کنن صحبت کردیم و نکات مفیدی رو درباره ی کدنویسی درست و تمیز یاد گرفتیم.

همین مباحث به ظاهر ساده و مقدماتی پایه و اساس برنامه نویسی جاوااسکریپت رو تشکیل می‌دن. تو مقاله‌های بعدی، مفاهیم جدیدتر و بیشتری رو یاد می‌گیریم تا بتونی با اطمینان بیشتر کدنویسی رو ادامه بدی.