1- آموزش جاوااسکریپت | نکات اولیه، راه‌اندازی محیط و ساخت Sandbox

ساختار فایل‌ها در بخش‌های آموزشی

در بخش‌های آموزشی، معمولاً با یک پوشه ساده مثل JavaScript Sandbox کار می‌کنیم که فقط این دو فایل را دارد:

• index.html
• app.js

اگر جایی گیر کردید

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

1. خودتان تمرین کنید.
2. کد را تغییر دهید و نتیجه را بررسی کنید.
3. مشکل را جست‌وجو کنید.

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

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

---

راه‌اندازی محیط توسعه

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

• Windows
• macOS
• Linux

و هر مرورگری هم قابل استفاده است، اما برای هماهنگی بهتر با دوره، این ابزارها پیشنهاد می‌شوند:

• مرورگر: Google Chrome
• ویرایشگر کد: Visual Studio Code

چرا Visual Studio Code؟

VS Code یکی از بهترین انتخاب‌ها برای توسعه وب است. همچنین این ویرایشگر از Emmet پشتیبانی می‌کند که نوشتن HTML را بسیار سریع‌تر می‌کند.

اگر از ویرایشگر دیگری مثل Atom یا Sublime Text استفاده می‌کنید، معمولاً می‌توانید افزونه‌های مشابه را نصب کنید.

---

نصب و تنظیم Visual Studio Code

بعد از نصب VS Code، چند تنظیم ساده انجام می‌دهیم تا محیط کار خواناتر و مناسب‌تر شود:

1) افزایش اندازه فونت

برای اینکه کدها واضح‌تر دیده شوند، اندازه فونت را بیشتر می‌کنیم.

2) تغییر اندازه تب

به‌صورت پیش‌فرض، فاصله تب‌ها معمولاً 4 است. برای این دوره، بهتر است آن را روی 2 تنظیم کنیم تا کدها کمتر پخش شوند.

3) فعال‌کردن Word Wrap

وقتی Word Wrap فعال باشد، خطوط طولانی از صفحه بیرون نمی‌روند و خوانایی کد بهتر می‌شود

مسیر فایل تنظیمات (settings.json) در VS Code

برای دسترسی سریع، می‌توانید در محیط VS Code کلید‌های میانبر Ctrl + Shift + P (در مک Cmd + Shift + P) را فشار دهید، عبارت Preferences: Open User Settings (JSON) را تایپ کرده و آن را انتخاب کنید.

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

• ویندوز (Windows): %APPDATA%\Code\User\settings.json (معادل مسیر: C:\Users\<Username>\AppData\Roaming\Code\User\settings.json)
• مک (macOS): $HOME/Library/Application Support/Code/User/settings.json
• لینوکس (Linux): $HOME/.config/Code/User/settings.json

---

// تنظیمات محیط Visual Studio Code.
{
  //-------- تنظیمات ویرایشگر (Editor) --------

  // فونت محیط ویرایشگر را کنترل می‌کند.
  "editor.fontFamily": "源ノ角ゴシック Code JP",

  // اندازه فونت متن را کنترل می‌کند.
  "editor.fontSize": 12,

  // اندازه نمایش Tabها را بر اساس تعداد کاراکترها کنترل می‌کند. مقادیر مجاز: "auto" یا اعداد 2، 4، 6 و غیره. در صورت تنظیم روی "auto"، مقدار مناسب هنگام باز شدن فایل حدس زده می‌شود.
  "editor.tabSize": 2,

  // کنترل می‌کند که آیا ویرایشگر به جای کلید Tab از کاراکتر فاصله (Space) استفاده کند یا خیر. مقادیر مجاز: "auto" یا true و false. در صورت تنظیم روی "auto"، مقدار مناسب هنگام باز شدن فایل حدس زده می‌شود.
  "editor.insertSpaces": true,

  // مشخص می‌کند که متن پس از چند کاراکتر به خط بعدی شکسته شود. تنظیم این مقدار روی 0، شکستن خطوط را بر اساس عرض پنجره فعال می‌کند.
  "editor.wrappingColumn": 80,

  //-------- تنظیمات فایل‌ها (Files) --------

  // در صورت فعال بودن، هنگام ذخیره کردن فایل، فاصله‌های خالی (Whitespace) اضافی انتهای خطوط را حذف می‌کند.
  "files.trimTrailingWhitespace": true
}

---

نصب افزونه‌های لازم

برای راحت‌تر شدن کار، این افزونه‌ها را نصب می‌کنیم:

• Live Server
  برای اجرای فایل HTML روی localhost و ریلود خودکار صفحه بعد از ذخیره فایل‌ها

• Bracket Pair Colorizer
  برای رنگی‌کردن جفت پرانتزها و آکولادها و خواناتر شدن کدهای تو در تو

• JavaScript ES6 Snippets
  برای دریافت میان‌برها و پیشنهادهای مفید هنگام نوشتن کد جاوااسکریپت.

مسیر نصب: از نوار سمت چپ روی آیکون Extensions (یا کلیدهای میانبر Ctrl + Shift + X) کلیک کنید. نام اکستنشن مورد نظر را در نوار جستجو تایپ کرده و روی دکمه Install کلیک کنید.

نمونه استفاده از Live Server

بعد از نصب Live Server، کافی است روی فایل HTML راست‌کلیک کنید و گزینه Open with Live Server را بزنید. در این حالت، فایل شما از طریق مرورگر و روی آدرس محلی مثل localhost:5500 اجرا می‌شود.

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

---

ساخت JavaScript Sandbox

حالا یک فضای ساده برای تمرین می‌سازیم.

1) ساخت پوشه پروژه

یک پوشه جدید با نام JavaScript Sandbox بسازید.

2) ساخت فایل‌ها

در این پوشه، دو فایل ایجاد کنید:

• index.html
• app.js

3) ساختار اولیه HTML

در فایل index.html از یک ساختار ساده HTML استفاده می‌کنیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JavaScript Sandbox - Section 2</title>
</head>
<body>
  <h1>JavaScript Sandbox - Section 2</h1>

  <script src="app.js"></script>
</body>
</html>

---

اضافه‌کردن JavaScript به HTML

دو روش اصلی برای استفاده از جاوااسکریپت در صفحه HTML وجود دارد:

روش اول: نوشتن کد داخل خود HTML

مثلاً می‌توانیم از تگ script داخل فایل HTML استفاده کنیم:

<script>
  alert('Hello');
</script>

این روش فقط برای مثال‌های خیلی کوتاه مناسب است و معمولاً در پروژه‌های واقعی توصیه نمی‌شود.

روش دوم: اتصال فایل خارجی جاوااسکریپت

روش بهتر این است که کدها را در فایل جداگانه‌ای مثل app.js بنویسیم و آن را به HTML متصل کنیم:

<script src="app.js"></script>

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

---

تست اتصال فایل جاوااسکریپت

حالا داخل فایل app.js یک دستور ساده می‌نویسیم تا مطمئن شویم همه‌چیز درست کار می‌کند:

alert('Hello World');

اگر فایل را ذخیره کنید و صفحه را با Live Server اجرا کرده باشید، یک پیام هشدار در مرورگر نمایش داده می‌شود. این یعنی فایل جاوااسکریپت به‌درستی به HTML متصل شده است.

---

جمع‌بندی

در این مطلب:

• ساختار دوره و فایل‌های پروژه را شناختیم
• محیط کار را با VS Code و Chrome آماده کردیم
• افزونه‌های مهم را نصب کردیم
• یک Sandbox ساده برای تمرین ساختیم
• با دو روش افزودن JavaScript به HTML آشنا شدیم
• اتصال فایل app.js را با یک مثال ساده تست کردیم

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