عیب یابی و انواع خطا JavaScript

انواع خطا

در این مقاله میخواهیم به عیب یابی و انواع خطا JavaScript بپردازیم .

به طور کلی، وقتی در کد اشتباهی انجام می دهید، با دو نوع خطا مواجه می شوید:

خطاهای نحوی (Syntax errors) : اینها خطاهای املایی در کد شما هستند که در واقع باعث می شوند برنامه اصلاً اجرا نشود یا تا حدودی کار را متوقف کند ؛ معمولاً پیام های خطا نیز برای شما ارائه می شود. اینها معمولاً قابل رفع هستند، به شرطی که با ابزارهای مناسب آشنا باشید و معنی پیام های خطا را بدانید!

خطاهای منطقی (Logic errors) : اینها خطاهایی هستند که در آن نحو در واقع درست است اما کد آن چیزی نیست که شما در نظر داشتید، به این معنی که برنامه با موفقیت اجرا می شود اما نتایج نادرستی می دهد. رفع این خطاها اغلب سخت تر از خطاهای نحوی است، زیرا معمولاً پیام خطایی وجود ندارد که شما را به منبع خطا هدایت کند!

بسیار خوب، پس کار به این سادگی نیست! وقتی عمیق‌تر می‌شوید، تفاوت‌های دیگری نیز وجود دارد. اما طبقه بندی های بالا در JavaScript مرحله اولیه در حرفه شما انجام می شود. ما در آینده به هر دوی این نوع نگاه خواهیم کرد.

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

یک مثال اشتباه

برای شروع، بیایید به بازی حدس اعداد خود برگردیم!. به GitHub بروید و یک کپی محلی از number-game-errors.html برای خود بسازید.

برای شروع، نسخه محلی را در ویرایشگر متن مورد علاقه خود و مرورگر خود باز کنید.

بازی را امتحان کنید.متوجه خواهید شد که وقتی دکمه “Submit guess” را فشار می دهید، کار نمی کند!

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

در زیر یاد خواهید گرفت که چگونه این کار را انجام دهید.

رفع خطاهای نحوی (Syntax errors)

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

1.به برگه ای بروید که در آن number-game-errors.html باز شده است و کنسول JavaScript خود را باز کنید. شما باید یک پیام خطا در خطوط زیر مشاهده کنید:

.این یک خطای بسیار آسان برای ردیابی است و مرورگر چند بیت اطلاعات مفید را برای کمک به شما در اختیار شما قرار می دهد (عکس صفحه بالا از فایرفاکس است، اما مرورگرهای دیگر اطلاعات مشابهی را ارائه می دهند). از چپ به راست، ما داریم:

یک “x” قرمز برای نشان دادن اینکه این یک خطا است.
یک پیام خطایی برای نشان دادن آنچه اشتباه شده است: “TypeError: guessSubmit.addeventListener این یک تابع نیست”
یک پیوند “Learn More” که از طریق یک صفحه MDN پیوند دارد که معنی این خطا را با جزئیات بیشتر توضیح می دهد.
نام فایل JavaScript که از طریق تب Debugger ابزارهای توسعه دهنده پیوند دارد. اگر این لینک را دنبال کنید، دقیقاً خطی را می بینید که در آن خطا برجسته شده است.
شماره خطی که خطا در آن است و شماره کاراکتر در آن خطی که برای اولین بار خطا مشاهده می شود. در این مورد، ما خط ۸۶، کاراکتر شماره ۳ را داریم.

۳.اگر به خط ۸۶ در ویرایشگر کد خود نگاه کنیم، این خط را پیدا خواهیم کرد:

هشدار:

ممکن است پیام خطا در خط ۸۶ نباشد.اگر از هر ویرایشگر کد با افزونه ای استفاده می کنید که یک سرور زنده را روی دستگاه محلی شما راه اندازی می کند، این باعث می شود کد اضافی تزریق شود. به همین دلیل، ابزارهای توسعه‌دهنده خطا را در خطی که ۸۶ نیست، فهرست می‌کنند.

guessSubmit.addeventListener(“click”, checkGuess);

پیام خطا می گوید “guessSubmit.addeventListener یک تابع نیست”، به این معنی که تابعی که ما فراخوانی می کنیم توسط مفسر JavaScript شناسایی نمی شود. اغلب، این پیام خطا در واقع به این معنی است که ما چیزی را اشتباه نوشته ایم. اگر از املای صحیح یک قطعه نحو مطمئن نیستید، اغلب خوب است که این ویژگی را در MDN جستجو کنید. بهترین راه برای انجام این کار در حال حاضر جستجوی “mdn name-of-feature” با موتور جستجوی مورد علاقه خود است. در اینجا یک میانبر برای صرفه جویی در وقت شما در این مثال وجود دارد: ()addEventListener.

5.بنابراین، با نگاه کردن به این صفحه، به نظر می رسد خطا این است که نام تابع را اشتباه نوشته ایم! به یاد داشته باشید که JavaScript به حروف کوچک و بزرگ حساس است، بنابراین هر گونه تفاوت جزئی در املا یا حروف کوچک باعث خطا می شود. با تغییر addeventListener به addEventListener باید این مشکل برطرف شود. همین الان این کار را انجام دهید.

خطاهای نحوی (Syntax errors) دور دوم

صفحه خود را ذخیره کرده و refresh کنید و باید ببینید که خطا برطرف شده است.
2.حالا اگر بخواهید حدس بزنید و دکمه Submit Guess را فشار دهید، خطای دیگری خواهید دید!

این بار خطای گزارش شده “TypeError: lowOrHi is null” در خط 78 است.

نکته :

Null یک مقدار ویژه است که به معنای “هیچ چیز” یا “بدون ارزش” است. بنابراین lowOrHi اعلام شده مقداردهی اولیه شده است، اما نه با هیچ مقدار معناداری یعنی هیچ نوع یا مقداری ندارد.

 توابع کد داخل در محدوده جداگانه ای نسبت به کدهای خارج از توابع اجرا می شوند. در این حالت تا زمانی که تابع ()checkGuess توسط خط 86 اجرا نشود، کد اجرا نمیشود و حتی خطا ایجاد نمی شد.

۴.به خط ۷۸ نگاهی بیندازید، کد زیر را خواهید دید:

lowOrHi.textContent = “Last guess was too high!” ;

این خط سعی می‌کند ویژگی textContent ثابت lowOrHi را روی یک رشته متنی تنظیم کند، اما کار نمی‌کند زیرا lowOrHi شامل چیزی نیست که قرار است باشد. بیایید ببینیم چرا چنین است! نمونه‌های دیگر lowOrHi را در کد جستجو کنید. اولین نمونه ای که در JavaScript پیدا می کنید در خط 49 است:

const lowOrHi = document.querySelector(“lowOrHi”);

6.در این مرحله ما سعی می کنیم متغیر را حاوی ارجاع به عنصری در HTML سند کنیم. بیایید بررسی کنیم که آیا مقدار پس از اجرای این خط تهی است یا خیر. کد زیر را در خط 50 اضافه کنید:

console.log(lowOrHi);

توجه: ()console.log یک تابع اشکال زدایی بسیار مفید است که مقداری را در کنسول چاپ می کند. بنابراین به محض اینکه سعی کردیم آن را در خط 49 تنظیم کنیم، مقدار lowOrHi را در کنسول چاپ می کند.

7.ذخیره و بازخوانی کنید، و اکنون باید نتیجه ()console.log را در کنسول خود مشاهده کنید.

نکته :

با اطمینان کامل میتوان گفت مقدار lowOrHi در این مرحله صفر است، بنابراین قطعاً در خط 49 مشکلی وجود دارد.

8.بیایید فکر کنیم که مشکل از چه چیزی می تواند باشد. خط 49 از یک متد ()document.querySelector برای دریافت ارجاع به یک عنصر با انتخاب آن توسط انتخابگر CSS استفاده می کند. با جستجوی بیشتر پرونده خود، می توانیم پاراگراف مورد نظر را پیدا کنیم:

<p class=”lowOrHi“></p>

بنابراین ما در اینجا به یک انتخابگر کلاس نیاز داریم که با یک نقطه (.) شروع می شود، اما انتخابگری که به متد ()querySelector در خط 49 منتقل می شود نقطه ندارد. میتونه مشکل از این باشه! در خط 49 lowOrHi را به .lowOrHi تغییر دهید.

10.دوباره ذخیره و رفرش کردن را امتحان کنید و عبارت ()console.log باید عنصر <p> مورد نظر ما را برگرداند. خب! یک خطای دیگر برطرف شد! اکنون می‌توانید خط ()console.log خود را حذف کنید، یا آن را به عنوان مرجع در آینده نگه دارید.

خطاهای نحوی دور سوم

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

2.در این مرحله، بازی دوباره از کار می افتد، و همان خطایی که در ابتدا دریافت کردیم را نمایش میدهد: «TypeError: resetButton.addeventListener یک تابع نیست»! با این حال، این بار خطا از خط 94 است.

3.با نگاهی به خط شماره 94، به راحتی می توان متوجه شد که ما در اینجا نیز اشتباه مشابهی را مرتکب شده ایم. ما دوباره فقط باید addeventListener را به addEventListener تغییر دهیم. همین الان این کار را بکنید.

خطای منطقی (logic error)

در این مرحله، بازی باید به خوبی اجرا شود، اما پس از چند بار بازی، بدون شک متوجه خواهید شد که عدد “تصادفی” که باید حدس بزنید همیشه ۱ است. قطعاً ما نمی خواهیم بازی اینطور انجام شود. ! مطمئناً در منطق بازی مشکلی وجود دارد! بازی خطا بر نمی‌گرداند ، فقط درست بازی نمی کند.

1.متغیر randomNumber و خطوطی که برای اولین بار عدد تصادفی در آن تنظیم شده است را جستجو کنید. نمونه ای که عدد تصادفی را که می خواهیم در شروع بازی حدس بزنیم ذخیره می کند باید حدود خط شماره 45 باشد:

letrandomNumber = Math.floor(Math.random()) + ۱;

۲.و عددی که قبل از هر بازی بعدی اعداد تصادفی را تولید می کند در حدود خط ۱۱۳ است:

randomNumber = Math.floor(Math.random()) + ۱;

برای بررسی اینکه آیا این خطوط واقعاً مشکل دارند، بیایید دوباره به دوستمان ()console.log مراجعه کنیم.خط زیر را مستقیماً زیر هر یک از دو خط بالا وارد کنید:

console.log(randomNumber);

کار از طریق منطق

برای رفع این مشکل، بیایید نحوه عملکرد این خط را در نظر بگیریم. ابتدا، ()Math.random را فراخوانی می کنیم که یک عدد اعشاری تصادفی بین 0 و 1 ایجاد می کند، به عنوان مثال: 0.5675493843.

Math.random();

سپس، نتیجه فراخوانی ()Math.random را از ()Math.floor عبور می دهیم که عدد ارسال شده به آن را تا نزدیکترین عدد صحیح گرد می کند.

سپس 1 را به آن نتیجه اضافه می کنیم:

Math.floor(Math.random()) + ۱;

گرد کردن یک عدد اعشاری تصادفی بین ۰ و ۱ همیشه به ۰ برمی گردد، بنابراین با افزودن ۱ به آن همیشه ۱ برمی گردد. قبل از گرد کردن آن باید عدد تصادفی را در ۱۰۰ ضرب کنیم. موارد زیر یک عدد تصادفی بین ۰ و ۹۹ به ما می دهد:

Math.floor(Math.random() * ۱۰۰);

بنابراین ما می خواهیم ۱ را اضافه کنیم تا یک عدد تصادفی بین ۱ و ۱۰۰ به ما بدهیم:

Math.floor(Math.random() * ۱۰۰) + ۱;

سعی کنید هر دو خط را مانند این به‌روزرسانی کنید، سپس ذخیره و رفرش کنید.بازی اکنون باید طوری بازی کند که ما میخواهیم!

سایر خطاهای رایج

خطاهای رایج دیگری نیز وجود دارد که در کد خود با آنها مواجه خواهید شد. در این بخش بیشتر به آن ها میپردازیم.

SyntaxError: missing ; before statement.1
این خطا به طور کلی به این معنی است که شما یک نقطه ویرگول (;) در انتهای یکی از خطوط کد خود را از دست داده اید، اما گاهی اوقات ممکن است مرموزتر باشد. برای مثال، اگر این خط را در تابع ()checkGuess تغییر دهیم:

const userGuess = Number(guessField.value); به مورد زیر تغییر دهیم:

Error
Error

۲.برنامه همیشه می گوید شما برنده شده اید، صرف نظر از حدس هایی که وارد می کنید:

این می تواند یکی دیگر از علائم مخلوط کردن تخصیص و عملگرهای برابری دقیق باشد. برای مثال، اگر بخواهیم این خط را در:

()checkGuess:

if (userGuess === randomNumber) {

به

if (userGuess = randomNumber) {

تست همیشه true است و باعث می شود برنامه گزارش دهد که بازی برنده شده است. مراقب باشید!

 از دست رفته ) بعد از لیست آرگومان

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

4. SyntaxError: از دست رفته: بعد از شناسه ویژگیاین خطا معمولاً مربوط به یک شی جاوا اسکریپت است که به درستی تشکیل نشده است، اما در این مورد ما با تغییر آن را دریافت کردیم:

function checkGuess() {

به

function checkGuess ( {

مراقب پرانتزها باشید!

5- SyntaxError

پس از بدنه تابع } وجود ندارد

این مورد آسان است! به طور کلی به این معنی است که شما یکی از } (بریس های فرفری) خود را از یک عملکرد یا ساختار شرطی از دست داده اید. این خطا را با حذف یکی از بسته‌بندی‌های } (بریس) نزدیک پایین تابع ()checkGuess دریافت کردیم.

6 – SyntaxError

عبارت مورد انتظار، دریافت “string” یا SyntaxError: رشته بدون پایان به معنای واقعی کلمه

این خطاها معمولاً به معنی این است که شما علامت نقل قول باز یا بسته شدن یک مقدار رشته را کنار گذاشته اید. در اولین خطای بالا، رشته با کاراکتر(های) غیرمنتظره ای که مرورگر به جای علامت نقل قول در ابتدای رشته پیدا کرده است جایگزین می شود. خطای دوم به این معنی است که رشته با علامت نقل قول به پایان نرسیده است.

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

یادتون باشه ما در کیهان وب به سوالات شما جواب میدیم پس با ما در تماس باشید یا کامنت بگذارید تا به سوال شما پاسخ دهیم.میتوانید از نمونه کار های طراحی سایت ما نیز دیدن کنید.سپاس از همراهی و شکیبایی شما!