برای تست کدهای جاوااسکریپت، روش‌های متنوعی وجود دارد. شما می‌توانید از این روش‌ها برای اطمینان از صحت عملکرد کد یا تست یک دستور ساده و مشاهده نتیجه بسیاری از کدهای این مجموعه آموزشی کمک بگیرید. در این قسمت از مجموعه آموزشی جاوااسکریپت با دو روش متداول برای امتحان کردن کدهای جاوااسکریپت آشنا می‌شوید.
روش اول: گنجاندن کدهای جاوااسکریپت در صفحه وب یا ارجاع به فایل جاوااسکریپت خارجی
همانطور که در مقاله روش های اضافه کردن کد JavaScript به صفحات HTML خواندید در HTML از المان <script> برای افزودن کدهای جاوااسکریپت به صفحه‌های وب استفاده می‌شود.
برای این منظور می‌توانید کدهای جاوااسکریپت خود را در قالب فایل های جاوااسکریپت ذخیره کنید و با کمک المان <script> در صفحه HTML به آن‌ها ارجاع دهید. همچنین می‌توانید کد جاوااسکریپت را به صورت مستقیم بین تگ <script> و </script> در صفحه HTML بگنجانید. نمونه حالت دوم را در مثال زیر مشاهده می‌کنید:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>آموزش جاوااسکریپت</title>
</head>
<body>
<h2>Testing JavaScript code</h2>
<p id="myid"></p>
<script>
document.getElementById("myid").innerHTML = "Hello, World!";
</script>
</body>
</html>کافیست محتویات کد فوق را با نام index.html ذخیره کنید و در مرورگر خود باز کنید. پس از باز کردن صفحه در مرورگر و اجرای خودکار دستور داخل المان <script>، عبارت Hello, World! به عنوان محتوای پاراگراف (یا المان <p>) موجود در صفحه درج می‌شود.
بیشتر بخوانید: روش های اضافه کردن کد JavaScript به صفحات HTML
روش دوم: با کمک بخش کنسول در ابزارهای توسعه دهنده مرورگر وب
ابزارهای توسعه دهنده (Developer tools) یکی از بخش‌های مفید در اغلب مرورگرهای وب رایج است. شما برای تست کدهای جاوااسکریپت می‌توانید از بخش کنسول در قسمت ابزارهای توسعه دهنده مرورگر خود کمک بگیرید. این بخش به شما اجازه می‌دهد کدهای جاوااسکریپت موردنظر خود را روی صفحه وب جاری اجرا کنید. همچنین در صورت وجود خطا در کد وارد شده، پیام خطای مناسبی در پاسخ نمایش داده می‌شود. علاوه بر روش قبل، اغلب کدهای موجود در این مجموعه آموزشی را می‌توانید به این روش نیز تست کنید.
فراموش نکنید برخلاف روش قبل، در این روش لازم نیست صفحه وب یا فایل های جاوااسکریپت خارجی را برای تست کدهای جدید تغییر دهید. بنابراین استفاده از بخش کنسول برای اجرای کدهای جاوااسکریپت گزینه مناسبی برای مشاهده نتیجه اولیه بدون تغییر فایل ها محسوب می‌شود.
نحوه ورود به قسمت ابزارهای توسعه دهنده در مرورگرهای وب رایج
برای دسترسی به ابزارهای توسعه دهنده در مرورگرهای وب متداول مانند موزیلا فایرفاکس، گوگل کروم و مایکروسافت اج (نسخه های دسکتاپ) می‌توانید از روش‌های زیر استفاده کنید:
از طریق میانبرهای صفحه کلید: با فشردن میانبر صفحه کلید Ctrl+Shift+I یا کلید F12.
از طریق منوی مرورگر: در مرورگر کروم و اج به منوی مرورگر، بخش More tools مراجعه کنید و گزینه Developer tools را انتخاب کنید. در مرورگر فایرفاکس نیز می‌توانید پس از مراجعه به منو از بخش More tools گزینه Web Developer Tools را انتخاب کنید.
از طریق منوی راست کلیک: روی بخشی از صفحه راست کلیک کنید. سپس از منوی نمایان شده گزینه Inspect را انتخاب کنید. در این روش علاوه بر باز شدن بخش ابزارهای توسعه دهنده، کد مربوط به المانی که روی آن راست کلیک کرده‌اید نیز نمایان می‌شود.
با انجام هرکدام از روش‌های فوق، ابزارهای توسعه دهنده در قالب بخشی مشابه با تصویر زیر داخل مرورگر نمایان می‌شود:
ورود به بخش کنسول و اجرای کدهای جاوااسکریپت
پس از باز کردن قسمت ابزارهای توسعه دهنده روی زبانه Console کلیک کنید. به این ترتیب بخشی مشابه با تصویر زیر در اختیار شما قرار می‌گیرد:
فرض کنید صفحه HTML جاری که در زبانه یا پنجره مرورگر باز شده صفحه‌ای شامل کد HTML زیر است. (این صفحه در تصاویر قبل نیز قابل مشاهده است):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>آموزش جاوااسکریپت</title>
</head>
<body>
<h2>Testing JavaScript code</h2>
<p id="myid"></p>
</body>
</html>در این صورت با وارد کردن دستور جاوااسکریپت زیر در کنسول و فشردن کلید Enter، دستور اجرا می‌شود و عبارت Hello, World! به عنوان محتوای داخلی پاراگراف موجود در صفحه درج می‌شود:
document.getElementById("myid").innerHTML = "Hello, World!";
به عنوان تست دوم، دستورات زیر را با هم کپی کنید، در بخش کنسول پیست کنید و کلید اینتر را فشار دهید:
let x = 1;
let y = 3;
let z = x + y;
alert(z);به این ترتیب مقدار متغیر z (که حاصل جمع مقادیر دو متغیر x و y است) در دیالوگ باکسی توسط مرورگر نمایش داده می‌شود:
بازگشت به فهرست مجموعه آموزشی JavaScript
