آموزش جامع جاوااسکریپت (JavaScript) - بخش اول

در این مقاله ابتدا محیط مناسبی برای توسعه برنامه JS تهیه دیده می شود و سپس با استفاده از آن و مرورگر کروم برنامه نویسی با زبان JS را آغاز می نمایید.

نصب ویرایشگر VS Code

برای شروع برنامه نویسی نیاز به یک ویرایشگر کد (code editor) دارید. پیشنهاد من به شما VS Code است. این نرم‌افزار تنها یک ویرایشگر با امکانات لازم برای کدنویسی و توسعه نرم‌افزار است و با IDEها که محیط‌های توسعه یکپارچه و معمولاً مختص یک زبان برنامه‌نویسی هستند، تفاوت دارد.

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

در ادامه باید NodeJS را نیز نصب نمایید. در این مورد هم آخرین نسخه پایدار را از آدرس زیر دریافت کنید:

تنظیمات ضروری برای شروع کار

نخست باید برای پروژه نرم‌افزاری خود پوشه ای ایجاد کنید و آن را در محیط VS Code باز کنید:

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

حال فایل index.html را ایجاد نمایید. با توجه به این که به طور معمول باید از حوزه وب به سمت JS کشیده شده باشید، انتظار می رود که حداقلی از آشنایی با ساختار HTML را داشته باشید. اگر چنین نیست، در اولین فرصت این آشنایی را به دست آورید. در حال حاضر و برای پیشروی در کار، با درج علامت تعجب و زدن نخستین گزینه از منوی پیشنهادات که ظاهر می شود، بدنه یک فایل HTML استاندارد را به صورت خودکار ایجاد نمایید:

با درج علامت تعجب در ابتدای فایل HTML خالی، امکان ایجاد نمونه استاندارد فراهم است.
با درج علامت تعجب در ابتدای فایل HTML خالی، امکان ایجاد نمونه استاندارد فراهم است.
با درج علامت تعجب در ابتدای فایل HTML خالی، امکان ایجاد نمونه استاندارد فراهم است.

پیش از ادامه کار به منوی File رفته و گزینه ذخیره خودکار (Autosave) را فعال نمایید تا ویرایشگر بدون نیاز به دستور شما، تغییرات را ذخیره کند:

گزینه ذخیره خودکار را فعال نمایید.
گزینه ذخیره خودکار را فعال نمایید.
گزینه ذخیره خودکار را فعال نمایید.

حال از قسمت جست و جوی افزونه ها، افزونه Live Server را بیابید و نصب کنید:

افزونه Live Server را نصب نمایید.
افزونه Live Server را نصب نمایید.
افزونه Live Server را نصب نمایید.

حال با راست کلیک بر روی فایل HTML خود، از منوی ظاهر شده، گزینه Open With Live Server را بزنید تا زبانه ای در کروم برای فایل شما باز شود:

با انتخاب سرور زنده، تغییرات فایل HTML خود را به صورت زنده می بینید.
با انتخاب سرور زنده، تغییرات فایل HTML خود را به صورت زنده می بینید.
با انتخاب سرور زنده، تغییرات فایل HTML خود را به صورت زنده می بینید.

حال با ایجاد یک سرعنوان سطح 1 (تگ h1)، درون آن عبارتی بنویسید تا نتیجه آن را مشاهده نمایید:

I Love JS
I Love JS
I Love JS

آغاز کار با JS

حال که کار امکانات لازم برای نوشتن کد و مشاهده آن فراهم شده است؛ به سراغ اصل موضوع آموزش می رویم. برای درج کد JS در یک صفحه وب، با این که امکان درج آن در قسمت head نیز وجود دارد، معمولاً تگ script حاوی JS را درون تگ body و به عنوان آخرین عنصر HTML می آوریم:

خروجی کنسول در مرورگر کروم
خروجی کنسول در مرورگر کروم
خروجی کنسول در مرورگر کروم

آن‌چه در بالا می بینید یک گزاره است که در کنسول به نمایش در می آید:

console.log("I'm a javascript programmer!")

توجه داشته باشید که علامت (//) برای درج نکات، توضیحات و ... استفاده می‌شود و به نمایش در نمی‌آید.

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

Image for post
Image for post
Image for post
Image for post