کنسول در جاوا اسکریپت- قابلیتی جذاب برای این زبان دوست داشتنی + ویدئو

سلام دوستان عزیز و همراهان همیشگی سبزلرن، تو این مقاله قصد داریم کنسول در جاوا اسکریپت رو بررسی کنیم و ببینیم منظور از کنسول در جاوا اسکریپت چیست و چه کاربردی داره؟ همون طور که میدونین جاوا اسکریپت یکی از زبان های محبوب سمت کاربر هست و مرورگرهای حال حاضر امکانی به نام Inspect برای توسعه دهنده ها جهت راحتی توسعه آماده کردند

اینسپکت قصه ما چندین تب داره، تب هایی مثل Element, Console, Source, Network و … که هرکدوم از این تب ها به نحوی سرعت توسعه رو بالا برده و به توسعه دهنده کمک ویژه ای میکنن. تمامی هشدارها و خطاهای جاوا اسکریپت داخل کنسول نمایش داده میشن با این توضیحات فکر کنم متوجه شدید console در جاوا اسکریپت چیست و کجا استفاده میشه.

در واقع کنسول جایی هست برای نمایش خطاها(برای برنامه نویس) و پیدا کردن مشکلات کد و دیباگ کردن اونا. واسه این که بخوایم تو جاوا اسکریپت به کنسول دسترسی داشته باشیم از آبجکت console استفاده می کنیم؛ آبجکت console چندین تابع داره که توی این مقاله اینا را کامل توضیح میدیم.

روش اجرای کنسول در جاوا اسکریپت چیست؟

خب حالا که فهمیدید کنسول چیست، شاید بپرسید روش اجرای کنسول در جاوا اسکریپت چیست و چطوری باید بهش دسترسی پیدا کرد. این کار خیلی ساده اس از طریق مرورگر! برای وارد شدن به محیط کنسول در جاوا اسکریپت میتونین روی صفحه وب سایت مدنظرتون راست کلیک انجام بدین و گزینه Inspect رو بزنین تو مرورگر گوگل کروم علاوه بر این راه میتونین با استفاده از کلید میانبر F12 استفاده کنین، با زدن این دکمه محیط Inspect رو بالا بیارین:

همون طور که مشاهده میکنین محیط اینسپکت برامون بالا میاد؛ داخل اینسپکت تب های متعددی وجود داره که یکی از اونا تب Console هست، با کلیک روی این تب به محیط console در جاوا اسکریپت مرورگرتون وارد میشین.

اینم از محیط کنسول

تو این محیط شما میتونین تمامی خطاهای کدهای جاوا اسکریپتتون رو مشاهده کنین، خودتون تیکه کدهای جاوا اسکریپت رو تست کنین، با کدهای Html ارتباط برقرار کنین و …. که تو ادامه به هرکدوم از این ها میپردازیم.

استفاده کلی از Console در Javascript

برای دسترسی به محیط کنسول در مرورگر، ابتدا وارد اینسپکت شده و سپس وارد تب console بشید داخل این تب میتونین هر کد جاوا اسکریپتی رو نوشته و اجرا بکنین میتونین متغیر تعریف کنین، تابع بنویسین و …. فرض کنین کدهای زیر رو داخل محیط Console نوشته و اجرا میکنین با اجرای کد زیر پاپ آپ alert با مقدار Sabzlearn.ir براتون نمایش داده میشه:

alert("Sabzlearn.ir")

با اجرای کد زیر داخل محیط کنسول متغیر های x و y مقداردهی شده و مقدار y به عنوان پاپ آپ alert نمایش داده میشود:

var x = 10;
var y = x++;
alert(y);

علاوه بر این موارد، از کنسول برای تست کد نیز میتونین استفاده کنین(برای تست یه تیکه کد نیازی به ایحاد فایل html و Js و لینک کردن و …. نیست، داخل تب Console میتونین هر کدی رو که خواستین تست بکنین)

تابع log

خب همتون میدونین که تابع console.log چیست؛ کاربرد تابع console.log در جاوا اسکریپت نمایش مقدار مدنظر برنامه نویس داخل تب console هست. نحوه استفاده از console.log در جاوا اسکریپت به این شکل هست که از شما حداقل یک پارامتر رو میگیره و در کنسول چاپ میکنه زمانی که تو کدهاتون خطایی داشتین یا تو نحوه عملکرد برنامه ای مشکل داشتین، تابع Console log در جاوا اسکریپت بهتون کمک ویژه ای میکنه

به عنوان مثال یه کد نوشتین ولی تو نحوه عملکردش مشکل دارین، میتونین متغیرها و خروجی توابع رو log بگیرین و ببینین مشکل کدتون کجاست. البته روش log برای برنامه هایی که حجم کد زیادی دارن روش بهینه ای نیست و فقط برای سورس های چندخطی کاربرد دارد و می تواند مفید باشد.خب حالا که کاملا متوجه شدید console.log چیست، بریم سراغ کاربردش.

نحوه استفاده از تابع log

console.log("Sabzlearn.ir");

البته شما میتونین به جای یک مقدار یا یک متغیر، چندین پارامتر برای تابع log ارسال کنین؛  هرچند مقدار که به تابع Console.log در جاوا اسکریپت پاس داده شود، همه اونارو برامون لاگ میگیره به عنوان مثال:

var x = 10;
var y = 20;
var z = 30;
console.log(x, y, z);  // OutPut = 10 20 30

شما میتونین به تابع Console log در جاوا اسکریپت پارامترهای دیگری مثل آبجکت، تابع و …. نیز بدین

کار با بخش Html در Console

شما داخل تب کنسول میتونین توسط توابع مربوط به DOM به تگ ها و استایل های document دسترسی داشته باشین و اونارو تغییر بدین(البته فقط اونایی رو تغییر بدین که readonly نیستن!)

تابع clear

همون طور که از اسم این تابع مشخصه کنسول رو پاک میکنه. 

نحوه استفاده از این تابع:

console.clear();

تابع error

این تابع مانند تابع log عمل میکند اما همون طور که از اسمش پیداست پیغام رو به صورت یک خطا و با رنگ قرمز به شما نشون میده. این تابع هم مثل console.log در جاوا اسکریپت فقط یه پارامتر میگیره.

نحوه استفاده از این تابع:

console.error("You have an error");

تابع warn

این تابع مانند تابع log عمل میکند اما همون طور که از اسمش پیداست پیغام رو به صورت یک هشدار و با رنگ زرد به شما نشون میده

نحوه استفاده از این تابع مثل توابع قبلی هست:

console.warn("You have a warn");

تابع info

این تابع مانند تابع log عمل میکند اما همون طور که از اسمش پیداست اطلاعاتی درمورد متغیر یا برنامه ای به شما میدهد. حالا فرقش با تابع
console.log چیست؟ اگه دقت کنید خروجی این تابع دقیقا مثل خروجی تابع log هست، با این تفاوت که میتونین برای نمایش یک اطلاعات استفاده کنین؛

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

نحوه استفاده از تابع info:

console.info("x variable is NaN");

تابع assert

خیلی وقتا شده که شما بخواین داخل کنسول یک دستور شرطی بنویسین، در این صورت باید if و else و برخی مواقع else if هم بنویسین! واقعا کار سختیه تو کنسول کد طولانی مثل شرط بنویسین، اینجاست که تابع assert به کارتون میاد تابع assert به شما کمک میکنه داخل کنسول دستورات شرطی اجرا کنین

سینتکس و نحوه استفاده از این تابع به شکل زیر هست:

console.assert( expression, message )

این تابع دوتا پارامتر از شما میگیره که پارامتر اولی یک boolean هست و پارامتر دومی دستوری هست که میخواین اجرا بشه به کدهای زیر توجه کنین:

console.assert(true, "an error")

همون طور که متوجه شدین هیچ خطایی داخل کنسول چاپ نخواهد شد، چون پارامتر اول تابع true هست اما در کد زیر پارامتر اول false بوده و مقدار an error داخل کنسول چاپ می شود

console.assert(false, "an error")

اجازه بدین یه کد واقعی تر بنویسیم به کد زیر توجه کنین:

var userInfos = { age: 20}
console.assert(userInfos.age > 18, "User age is not more than 18");

تو این تیکه کد خاصیت age از آبجکت userInfos مقدار 20 رو داره و چون مقدار اون از 18 بزرگتر هست(شرط true هست)، هیچ مقداری داخل console چاپ نمی شود.

سخن پایانی

در این مقاله سعی کردم مطالب مقدماتی درمورد کنسول در جاوا اسکریپت برای شما ارائه بدم. همچنین گفتیم توابعی مثل console.log چیست و چطور میشه از اونا استفاده کرد.توی دوره آموزشی جاوا اسکریپت سایت سبزلرن ما درباره console در جاوا اسکریپت مفصل صحبت کردیم و میتونید از اونجا هم یادگیری این تابع را پیگیری کنید.

برای اطلاعات بیشتر درمورد console در جاوا اسکریپت پیشنهاد می کنم ویدیوی مربوط به این مقاله رو هم مشاهده کنین 🙂 اگه سوالی در مورد کنسول در جاوا اسکریپت داشتین تو کامنت ها بپرسین بهتون پاسخ میدم