ساختار کد

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

syntax

حالا که وارد وادی برنامه نویسی شده اید از این به بعد با این کلمه بسیار زیاد برخورد خواهید کرد.

syntax به معنای قواعد نوشتاری زبان برنامه نویسی است. همان چیزی که در زبان فارسی به آن نگارش می گفتیم و در زبان عربی نحو (یا خدا! ?). پس وقتی می گوییم syntax یا به فارسی می نویسیم قواعد سینتکسی منظور قواعدی‌ست که با رعایت نکردن آن یک جای کد از نظر نوشتاری ایراد دارد.

در مطالب قبل با IDE و lightweight editor آشنا شدید. خوب است بدانید که این نرم افزارها هنگام کدنویسی ایرادات سینتکسی کدهایی که می نویسید را در لحظه به شما نشان می دهند تا آنها را اصلاح کنید.

statement

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

پیش از این در آموزش قبلی با نمونه ای از statement آشنا شده اید، alert('سلام دنیا!'). این statement پیام “hello world!” را در خروجی نمایش می دهد.

ما می توانیم هر مقدار statement که می خواهیم در کد های خود داشته باشیم. statementها باید به وسیله ی ویرگول نقطه ; (همان semicolon فرنگیا! ?) از هم جدا شوند.

برای نمونه ما دو مورد statement را پشت سر هم قرار داده ایم:

alert('سلام'); alert('مجید');

معمولا هر statement در یک خط نوشته می شود تا کدها خوانایی بیشتری داشته باشند:

alert('سلام');
alert('مجید');

ویرگول نقطه ;

گاهی به دلیل حواس پرتی یا هر چیز دیگر ممکن است نوشتن ویرگول نقطه پس از statement فراموش شود.

کد هایی که در قسمت قبل دیدیم به این شکل هم کار می کنند:

alert('سلام')
alert('مجید')

این جا جاوااسکریپت رفتن به خط بعدی را بصورت یک ویرگول نقطه تعبیر می کند. یعنی ویرگول نقطه را به طور خودکار قرار می دهد. این قضیه را “automatic semicolon insertion” می گویند یعنی «درج خودکار ویرگول نقطه».

در اکثر مواقع، رفتن به خط بعد بصورت ویرگول نقطه تعبیر می شود. اما “در اکثر مواقع” به معنی “همیشه” نیست!

در بعضی موارد رفتن به خط بعدی بصورت ویرگول نقطه تعبیر نمی شود:

alert(3 +
۱
+ ۲);

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

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

ایراداتی که در اثر این اشتباه جاواسکریپتی پیش می آید به سختی پیدا و اصلاح می شود. بنابر این بهتر است که پیش از رخ دادن آن ها با نمونه ای ساده آشنا شویم.

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

بیایید یک نمونه ی سرسخت (چغر و بد بدن!) از این دست خطاها را ببینیم.

[۱, ۲].forEach(alert)

نیازی نیست فعلا چیزی در مورد معنی براکت [ ] و عبارت forEach بدانید. در مورد این دو بعدا توضیح خواهیم داد. اما فعلا بدانید که نتیجه ی این خط کد این که است که ابتدا عدد ۱ به نمایش در می آید و سپس ۲٫

حالا بیایید یک دستور alert پیش از این کد قرار دهیم و از ویرگول نقطه در انتهای آن استفاده نکنیم:

alert("error")

[۱, ۲].forEach(alert)

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

alert("الان همه چی آرومه، من چقد خوشحالم");

[۱, ۲].forEach(alert)

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

این خطا از همان گونه ای از ایرادات است که به علت قرار ندادن خودکار ویرگول نقطه ایجاد می شود. دلیل این است که جاوااسکریپت هرگز پیش از براکت [ ] ویرگول نقطه قرار نمی دهد.

پس به خاطر آن که ویرگول نقطه بصورت خودکار در انتهای خط اول قرار نمی گیرد، تمام این دو خط بصورت یک statement تفسیر می شوند و مشکل آغاز می شود. جاوااسکریپت کدهای ما را بصورت زیر می بیند:

alert("error")[1, 2].forEach(alert)

اما این کد باید بصورت دو statement باشد. چسباندن این دو statement در این مورد اشتباه است و بنابر این خطا رخ می دهد. احتمال رخ دادن این خطا در موقعیت های مشابه کاملا وجود دارد.

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

comment

هر چه از زمان آغاز پروژه می گذرد، کدها بیشتر و پیچیده تر می شوند. حتی خبره ترین برنامه نویس های دنیا هم پس از مدتی جزئیات کد هایی که نوشته اند را فراموش می کنند. در این موقع کاملا ضروری است که از comment استفاده کنیم تا نشان دهیم هر قسمت از کد چرا نوشته شده و چه کاری انجام می دهد.

comment می تواند در هر جایی از اسکریپت (در جریان باشید که چون جاوااسکریپت یک زبان اسکریپتی است، گاهی به جای لفظ کد از اسکریپت استفاده می کنند) قرار بگیرد. commentها روی اجرای کد اثری نمی گذارند چون موتور جاوااسکریپت به سادگی آن ها را نادیده می گیرد. از این پس، در این وبسایت برای راحتی مطالعه به جای کلمه comment از “کامنت” استفاده می کنیم.

کامنت یک خطی

کامنت یک خطی با دو عدد // آغاز می شود.

پس از // خود کامنت را می نویسیم. کامنت می تواند یک خط را کاملا اشغال کند یا در ادامه ی یک statement نوشته شود و آن statement را توضیح دهد:

// این کامنت تمام خط را اشغال کرده
alert('سلام');

alert('مجید');   // این کامنت در ادامه کدها آمده

کامنت چند خطی

کامنت چند خطی با /* شروع می شود و متن کامنت در ادامه نوشته می شود. در نهایت هر جا که خواستیم آن را با */ پایان می دهیم:

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

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

گاهی نیاز داریم که بخشی از کد را به سرعت از بقیه ی کدها جدا کنیم تا اجرا نشود. برای این مواقع کامنت خیلی کاربرد دارد:

/* بخشی از کد را کامنت کردیم تا اجرا نشود
alert('سلام');
*/
alert('مجید');

کلید های میانبر

در اکثر نرم افزار های کدنویسی، می توان با فشردن کلید های Ctrl و / یک یا چند خط از کد را که انتخاب کرده ایم comment کنیم. در مکینتاش به جای Ctrl از Cmd استفاده کنید.

کامنت های تو در تو

چیزی به نام کامنت تو در تو وجود ندارد و امکان ندارد که بتوانید از یک /* ... */ در /* ... */ استفاده کنید. اجرای کد زیر با خطا مواجه می شود:

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

سخن پایانی

لطفا در کامنت نوشتن برای کد خسیس نباشید!

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

در ادامه ی این آموزش بخشی با عنوان کیفیت کد خواهد بود که توضیح می دهد چگونه کامنت های بهتری بنویسیم.