2- آموزش جاوااسکریپت | آشنایی با Console و انواع خروجیها
در این بخش با Console مرورگر آشنا میشویم و یاد میگیریم چگونه از آن برای تست، دیباگ و نمایش خروجی استفاده کنیم. همچنین انواع مختلف خروجی مثل متن، عدد، بولین، آرایه، آبجکت، خطا، هشدار و تایمر را بررسی میکنیم.
مرور کوتاه بر بخش قبل
در آموزش قبل، فایلهای اولیه index.html و app.js را ساختیم و آنها را به هم متصل کردیم. همچنین پروژه را با Live Server در VS Code اجرا کردیم تا تغییرات را بهصورت خودکار در مرورگر ببینیم.
البته اجرای پروژه با Live Server اجباری نیست. شما میتوانید فایل را مستقیماً از سیستمفایل باز کنید یا از هر نوع سرور دیگری استفاده کنید. مهم این است که صفحه HTML و فایل JavaScript بهدرستی در کنار هم کار کنند.
توقف و اجرای دوباره Live Server
اگر بخواهید Live Server را متوقف کنید، کافی است روی نوار پایین VS Code که معمولاً پورت 5500 را نشان میدهد کلیک کنید. با این کار سرور بسته میشود و اگر صفحه را رفرش کنید، دیگر اجرا نخواهد شد.
برای اجرای دوباره هم کافی است روی فایل index.html راستکلیک کنید و گزینه Open with Live Server را انتخاب کنید.
آشنایی با Console
در این قسمت از آموزش، تمرکز اصلی ما روی Console است؛ چون تا مدت زیادی از آن برای تست، دیباگ و مشاهده خروجی برنامه استفاده خواهیم کرد.
Console ابزاری است برای:
- تست کردن کد
- اشکالزدایی (debugging)
- نمایش خروجی از برنامه
- اجرای سریع دستورهای جاوااسکریپت
چرا Console مهم است؟
قبل از ابزارهای توسعه مرورگر، اگر میخواستیم چیزی را سریع نمایش بدهیم، معمولاً از alert() استفاده میکردیم. اما این روش کارآمد نیست و تجربه خوبی هم ایجاد نمیکند. امروز Console ابزار اصلی ما برای این کار است.
باز کردن Developer Tools
در بیشتر مرورگرها، از جمله Chrome، میتوانید با زدن کلید F12 ابزارهای توسعه را باز کنید. در این بخش، یکی از تبها Console است.
در Console میتوانید جاوااسکریپت اجرا کنید، مثلاً:
alert('123');
با اجرای این دستور، پیام هشدار نمایش داده میشود. همچنین اگر مقدار خاصی برگردانده نشود، نتیجهای مثل undefined میبینید.
اجرای کد مستقیم در Console
Console فقط برای مشاهده خروجی نیست؛ شما میتوانید از داخل آن کد جاوااسکریپت هم اجرا کنید.
مثالهای ساده
میتوانید یک عدد وارد کنید:
4
خروجی همان 4 خواهد بود.
یا یک عبارت ریاضی بنویسید:
4 + 4
خروجی:
8
بررسی DOM از طریق Console
یکی از قابلیتهای مهم Console، دسترسی به DOM صفحه است.
اگر فقط بنویسید:
document
کل ساختار HTML صفحه را میبینید.
همچنین میتوانید یک عنصر خاص را انتخاب کنید. مثلاً اگر در صفحه یک h1 داشته باشیم، میتوانیم آن را با querySelector انتخاب کنیم:
document.querySelector('h1').style.color = 'red';
این دستور رنگ عنوان را قرمز میکند.
نگران معنی دقیق
querySelectorیاstyleنباشید؛ فعلاً فقط مهم است بدانید که میتوان تقریباً هر کاری را که در فایل جاوااسکریپت انجام میدهید، از داخل Console هم انجام داد.
البته تغییراتی که مستقیم در Console انجام میدهید دائمی نیستند. با رفرش صفحه، همهچیز به حالت قبل برمیگردد.
ثبت خروجی از داخل برنامه
حالا اگر بخواهیم از داخل فایل app.js خروجی بگیریم، معمولاً از console.log() استفاده میکنیم.
console.log('hello world');
با ذخیره فایل، اگر از Live Server استفاده کنید، خروجی بلافاصله در Console دیده میشود. اگر Live Server فعال نباشد، باید صفحه را دستی رفرش کنید.
توضیح کامنتها در جاوااسکریپت
اگر میخواهید در کد خود توضیح بنویسید، از کامنت استفاده میکنید.
کامنت تکخطی
// این یک کامنت تکخطی است
کامنت چندخطی
/*
این یک کامنت
چندخطی است
*/
انواع دادههای قابل نمایش در Console
Console فقط برای متن نیست. شما میتوانید انواع مختلف داده را هم در آن نمایش دهید.
1) رشتهها (Strings)
console.log('hello world');
رشتهها معمولاً به رنگ مشکی نمایش داده میشوند.
2) اعداد (Numbers)
console.log(123);
اعداد معمولاً آبی نمایش داده میشوند.
3) بولینها (Booleans)
console.log(true);
مقدارهای true و false هم معمولاً آبی هستند.
4) متغیرها
اگر یک متغیر بسازید:
const greeting = 'hello';
console.log(greeting);
خروجی مقدار متغیر خواهد بود.
5) آرایهها (Arrays)
console.log([1, 2, 3, 4]);
آرایه در Console نمایش داده میشود و میتوانید آیتمهای داخل آن را باز کنید.
6) آبجکتها (Objects)
console.log({
a: 1,
b: 2
});
آبجکت هم قابل مشاهده است و میتوانید آن را باز کنید.
استفاده از console.table
اگر بخواهید یک آبجکت یا داده ساختاریافته را خواناتر ببینید، میتوانید از console.table() استفاده کنید:
console.table({
a: 1,
b: 2
});
این دستور دادهها را بهصورت جدول نمایش میدهد.
نمایش خطاها و هشدارها
خطا
برای نمایش خطا از console.error() استفاده میکنیم:
console.error('This is some error');
این پیام با رنگ قرمز نمایش داده میشود و معمولاً مکان خطا هم مشخص است.
هشدار
برای هشدار از console.warn() استفاده میکنیم:
console.warn('This is a warning');
این پیام معمولاً زرد رنگ است.
پاک کردن Console
اگر بخواهید Console را پاک کنید، از دستور زیر استفاده میکنید:
console.clear();
این دستور همه خروجیهای قبلی را پاک میکند.
زمانسنجی با Console
گاهی میخواهیم بدانیم یک بخش از کد چقدر زمان میبرد. برای این کار از console.time() استفاده میکنیم.
console.time('hello');
for (let i = 0; i < 5; i++) {
console.log('hello world');
}
console.timeEnd('hello');
خروجی زمان اجرای این بخش را نشان میدهد.
جمعبندی
در این بخش یاد گرفتیم:
- Console چیست و چرا مهم است
- چگونه از آن برای تست و دیباگ استفاده کنیم
- چطور خروجیهای مختلف مثل متن، عدد، بولین، آرایه و آبجکت را نمایش دهیم
- چگونه از
console.table،console.error،console.warnوconsole.timeاستفاده کنیم - چرا
console.log()یکی از مهمترین ابزارهای ما در این دوره خواهد بود
در قسمت بعدی، سراغ متغیرها میرویم و با روشهای مختلف تعریف آنها مثل var، let و const آشنا میشویم. سپس وارد types میشویم.