درود دوستان جاوااسکرپیتی! توی این قسمت می‌خوایم ببینیم که کجاها و به چه صورت می‌تونیم کدهای جاوااسکریپت رو اجرا کنیم.

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

 

نصب برنامه‌های کاربردی

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

نصب VS Code

ما باید جایی رو داشته باشیم که بتونیم توی اون کدهامون رو بنویسیم. VS Code یک ادیتور (ویرایشگر متن) هست که توی اون می‌تونم کدهای جاوااسکریپت بنویسیم و برنامه‌هامون رو توسعه بدیم. این برنامه رو دانلود کنین.

یک مرورگر

اگه الان این متن رو می‌خونین حتماً یک مرورگر دارین :)

نصب Node.js

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

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

 

۱. اجرای کدهای جاوااسکریپت توسط مرورگر

توی این روش ما به ۲ چیز نیاز داریم: یک ادیتور (ویرایشگر متن) ساده مثل VS Code و یک مرورگر. از ادیتور استفاده می‌کنیم تا کدهای جاوااسکریپت رو بنویسیم و از مرورگر استفاده می‌کنیم تا این کدها رو اجرا کنیم. تقریباً همه کدهای جاوااسکریپت رو میشه به این روش اجرا کرد.

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning JS! 💪</title>
</head>
<body>
  <script>
    alert(`I'm Learning JS 🎉💪`);
  </script>
</body>
</html>

این فایل رو با اسم دلخواه مثلاً index.html (به پسوند .html دقت کنین) ذخیره می‌کنیم. حالا کافیه روی این فایل کلیک کنیم تا توسط مرورگر باز بشه. اگه پیام خط ۹ رو گرفتین، تبریک 🎉 شما اولین و مهمترین قدم رو توی یادگیری جاوااسکریپت برداشتین 😉

هر چیزی که توی تگ script می‌نویسیم، کدهایی به زبان جاوااسکریپت هست که توسط مرورگر پردازش و اجرا میشه. ما اینجا کدهامون رو توی یک سند HTML و توی تگ script نوشتیم.

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

// My first JavaScript file

alert(`I'm Learning JS 🎉💪`);

این فایل رو توی همون مسیر فایل index.html با اسم دلخواه مثلاً main.js (به پسوند .js دقت کنین) ذخیره می‌کنیم. حالا باید مقداری فایل index.html رو ویرایش کنیم. محتویات این فایل رو با محتویات زیر جایگزین می‌کنیم تا فایل جدید جاوااسکریپتی رو مثل خط 8 لینک کرده باشیم:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning JS! 💪</title>
</head>
<body>
>>  <script src="./main.js"></script>
</body>
</html>

کافیه دوباره فایل index.html رو توی مرورگر اجرا کنیم تا دوباره همون پیام قبلی رو بگیریم. این روش مناسب‌تر از روش قبلی هست. چون فایل جاوااسکریپتی مستقل و جدا توسعه داده میشه؛ بنابراین سرعت یادگیری و همچنین سرعت خود برنامه و توسعه اون بالاتر میره.

 

alert چیه؟ 🤔

این یک تابع هست که توی مرورگر برای نمایش چیزی به کار میره. برای مثال توی کد زیر اگه روی دکمه ► کلیک کنیم، متنی که توی این تابع نوشته شده برای ما نمایش داده میشه:

alert('Hello!');

ما سرتاسر این آموزش از این تابع و همچنین console.log استفاده می‌کنیم تا خروجی کارمون رو ببینیم. توی قسمت‌های بعدی با توابع بیشتر آشنا می‌شیم 😉

 

۲. اجرای کدهای جاوااسکریپت توسط کنسول مرورگر

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

اگه از مرورگر فایرفاکس استفاده می‌کنین، کنسول رو می‌تونین با دکمه‌های ترکیبی کیبرد Ctrl + Shift + k باز کنین. اگه از مرورگر کروم استفاده می‌کنین، این کار رو می‌تونین با دکمه‌های Ctrl + Shift + j انجام بدین. محیط کنسول چیزی شبیه به این هست:

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

 

۳. اجرای کدهای جاوااسکریپت توسط محیط Node.js

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

// main.js

console.log(`I'm Learning JS 🎉💪`);

این فایل رو با اسم دلخواه مثلاً main.js ذخیره می‌کنیم. حالا ترمینال سیستم‌عامل رو باز می‌کنیم و دستور زیر رو وارد می‌کنیم (ترمینال باید به همین مسیری اشاره کنه که فایل main.js وجود داره):

node main.js

با این کار خروجی زیر توی ترمینال برای ما چاپ میشه:

I'm Learning JS 🎉💪

برای باز کردن ترمینال توی سیستم عامل ویندوز دنبال برنامهٔ CMD بگردین. توی سیستم عامل‌های مبتی بر لینوکس این کار رو می‌تونین با دکمه‌های ترکیبی کیبرد Ctrl + Alt + T انجام بدین.

البته روش راحت‌تری برای استفاده از نود بدون استفاده از ترمینال وجود داره. اگه از VS Code استفاده می‌کنین، کافیه افزونه رو نصب کنین.

ما سرتاسر این آموزش‌ها از این همین روش برای اجرای کدهای جاوااسکریپت استفاده می‌کنیم 😉

 

خب دوستان این هم از این قسمت. توی قسمت‌های بعدی با جاوااسکریپت بیشتر آشنا می‌شیم 👋😉