آموزش جاوا اسکریپت مبتدی : چه مشکلی پیش آمد؟ عیبیابی جاوا اسکریپت
وقتی در مقاله قبلی بازی «حدس عدد» را انجام دادید، ممکن است متوجه شده باشید که جواب نمیدهد. نگران نباشید - این مقاله با ارائه نکاتی در مورد نحوه یافتن و رفع خطاها در برنامههای جاوا اسکریپت، قصد دارد شما را از دردسرهای ناشی از چنین مشکلاتی نجات دهد.
به طور کلی، وقتی در کدنویسی اشتباهی انجام میدهید، با سه نوع خطای اصلی مواجه خواهید شد:
- خطاهای املایی syntax error: اینها خطاهای املایی در کد شما هستند که در واقع باعث میشوند برنامه اصلاً اجرا نشود یا در اواسط کار متوقف شود - معمولاً با برخی پیامهای خطا نیز مواجه خواهید شد. رفع این خطاها معمولاً خیلی سخت نیست، تا زمانی که با ابزارهای مناسب آشنا باشید و بدانید پیامهای خطا به چه معناست!
- خطاهای منطقی logic error: اینها خطاهایی هستند که در آنها نحو در واقع صحیح است، اما کد آن چیزی نیست که شما در نظر داشتید، به این معنی که برنامه با موفقیت اجرا میشود اما نتایج نادرستی میدهد. رفع این خطاها اغلب دشوارتر از خطاهای نحوی است، زیرا معمولاً پیام خطایی برای هدایت شما به منبع خطا وجود ندارد.
- خطاهای زمان اجرا runtime error: این خطاها زمانی اتفاق میافتند که کد نحو صحیحی دارد، بنابراین میتواند شروع به اجرا کند، اما در حین اجرا مشکلی پیش میآید. به عنوان مثال، تلاش برای فراخوانی چیزی که در واقع یک تابع نیست، باعث خطای زمان اجرا میشود. نحو خوب است، اما خود عملیات قابل انجام نیست.
خب، قضیه به این سادگی نیست - با بررسی عمیقتر، تفاوتهای دیگری هم وجود دارد. اما طبقهبندیهای بالا در این مرحله اولیه از حرفه شما کافی خواهد بود. در بخش بعدی به این انواع خواهیم پرداخت.
برای شروع، بیایید به بازی حدس اعداد خود برگردیم - با این تفاوت که این بار نسخهای را با برخی خطاهای عمدی بررسی خواهیم کرد. سورس کد این نسخه را کپی کنید و آنرا تست کنید.
ما همچنان دوست داریم که شما با نسخه ما در این مقاله کار کنید تا بتوانید تکنیکهایی را که در اینجا آموزش میدهیم یاد بگیرید. سپس میتوانید برگردید و سعی کنید مثال خود را در بازی حدس عدد ما اصلاح کنید - با این تفاوت که این بار نسخهای را با برخی خطاهای عمدی بررسی خواهیم کرد.
در این مرحله، بیایید به کنسول توسعهدهندگان مراجعه کنیم تا ببینیم آیا خطایی گزارش میدهد یا خیر، سپس سعی کنیم آنها را برطرف کنیم. در ادامه نحوه انجام این کار را خواهید آموخت.
رفع ارورهای گزارش شده در کنسول
در اوایل این دوره، از شما خواستیم که چند دستور ساده جاوا اسکریپت را در کنسول جاوا اسکریپت ابزارهای توسعهدهنده تایپ کنید (اگر یادتان نیست چگونه آن را در مرورگر خود باز کنید، برای فهمیدن نحوهی باز کردن آن، به لینک قبلی مراجعه کنید). نکتهی مفیدتر این است که هر زمان خطایی در جاوا اسکریپتی که به موتور جاوا اسکریپت مرورگر وارد میشود، وجود داشته باشد، کنسول به شما پیام خطا میدهد. حالا بیایید به دنبال آن برویم.
۱- به تبی که در آن باز است بروید و کنسول جاوا اسکریپت خود را باز کنید. باید یک پیام خطا به شکل زیر ببینید:
۲- خط اول پیغام خطا این است:
- بخش اول، یک تابع نیست، بلکه چیزی در مورد مشکل پیش آمده به ما میگوید.
- بخش دوم، ، به ما میگوید که خطا از کجای کد آمده است: خط ۸۷، کاراکتر ۱۹ از فایل .
۳- اگر در ویرایشگر کد خود به خط ۸۷ نگاه کنیم، این خط را خواهیم یافت:
۴- پیام خطا میگوید " تابعی نیست"، به این معنی که مفسر جاوا اسکریپت تابعی را که ما فراخوانی میکنیم تشخیص نمیدهد. اغلب، این پیام خطا در واقع به این معنی است که ما چیزی را اشتباه نوشتهایم. اگر از املای صحیح یک قطعه از سینتکس مطمئن نیستید، آن را در PDN جستجو کنید. بهترین راه برای انجام این کار در حال حاضر جستجوی با نام قطعه، با موتور جستجوی مورد علاقهتان است. در اینجا یک میانبر برای صرفهجویی در وقت شما در این مورد وجود دارد: .
۵- بنابراین، با نگاه به این صفحه، به نظر میرسد که خطا این است که ما نام تابع را اشتباه نوشتهایم! این یک خطای سینتکس است. به یاد داشته باشید که جاوا اسکریپت به حروف کوچک و بزرگ حساس است، بنابراین هرگونه تفاوت جزئی در املا یا حروف بزرگ باعث ایجاد خطا میشود. تغییر به باید این مشکل را برطرف کند. اکنون این کار را انجام دهید.
۱- صفحه خود را ذخیره و رفرش کنید، و باید ببینید که خطا برطرف شده است.
۲- حالا، اگر سعی کنید حدسی وارد کنید و دکمه ارسال حدس را فشار دهید، خطای دیگری خواهید دید!
۳- این بار، خطایی که گزارش میشود این است:
بسته به مرورگری که استفاده میکنید، ممکن است پیام متفاوتی در اینجا ببینید. پیام بالا چیزی است که فایرفاکس به شما نشان میدهد، اما برای مثال، کروم این را به شما نشان میدهد:
این خطا یکسان است، اما مرورگرهای مختلف آن را متفاوت توصیف میکنند.
این خطا در هنگام بارگذاری صفحه ظاهر نشد زیرا درون یک تابع (بلوک ) رخ داده بود. همانطور که در مقاله توابع بعدی ما با جزئیات بیشتر خواهید آموخت، کد درون توابع در یک محدوده جداگانه نسبت به کد خارج از توابع اجرا میشود. در این حالت، کد اجرا نشد و خطا تا زمانی که تابع توسط خط ۸۷ اجرا نشد، رخ نداد.
۴- شماره خط داده شده در خطا ۷۹ است. به خط ۷۹ نگاهی بیندازید، کد زیر را خواهید دید:
۵- این خط سعی دارد ویژگی textContent متغیر lowOrHi را روی یک رشته متنی تنظیم کند، اما کار نمیکند زیرا lowOrHi حاوی آنچه که قرار است باشد، نیست. بیایید ببینیم چرا اینطور است - سعی کنید نمونههای دیگری از lowOrHi را در کد جستجو کنید. اولین نمونهای که پیدا خواهید کرد در خط ۵۱ است:
۶- در این مرحله، ما سعی داریم متغیر را طوری تنظیم کنیم که حاوی ارجاعی به یک عنصر در سند HTML باشد. بیایید ببینیم متغیر پس از اجرای این خط شامل چه چیزی است. کد زیر را در خط ۵۴ اضافه کنید:
این کد مقدار lowOrHi را پس از تلاش برای تنظیم آن در خط ۵۱، در کنسول چاپ میکند. برای اطلاعات بیشتر به مراجعه کنید.
۷- ذخیره و رفرش کنید، اکنون باید نتیجه را در کنسول خود ببینید.
مطمئناً، مقدار lowOrHi در این مرحله تهی است و این با پیام خطای فایرفاکس مطابقت دارد. بنابراین قطعاً مشکلی در خط ۵۱ وجود دارد. مقدار تهی به معنای "هیچ چیز" یا "بدون مقدار" است. بنابراین کد ما که lowOrHi را به یک مرجع عنصر تنظیم میکند، اشتباه پیش میرود.
۸- بیایید در مورد مشکل احتمالی فکر کنیم. خط ۵۱ از متد برای انتخاب یک مرجع عنصر با یک انتخابگر CSS استفاده میکند. با نگاهی به فایل خود، میتوانیم پاراگراف مورد نظر را پیدا کنیم:
۹- بنابراین ما در اینجا به یک انتخابگر کلاس نیاز داریم که با یک نقطه (.) شروع شود. اما انتخابگری که در خط ۵۱ به متد ارسال شده است، نقطهای ندارد. این میتواند مشکل باشد! سعی کنید lowOrHi را در خط ۵۱ به .lowOrHi تغییر دهید.
۱۰- دوباره ذخیره و رفرش کنید، و دستور شما باید عنصر مورد نظر ما را برگرداند. خب! یک خطای دیگر برطرف شد! میتوانید خط خود را اکنون حذف کنید، یا آن را برای مراجعه بعدی نگه دارید - انتخاب با شماست.
۱- حالا، اگر دوباره سعی کنید بازی را انجام دهید، باید موفقیت بیشتری کسب کنید - بازی باید کاملاً خوب پیش برود، تا زمانی که بازی را تمام کنید، یا با حدس زدن عدد درست، یا با تمام شدن حدسها.
۲- در آن مرحله، بازی دوباره با شکست مواجه میشود و همان خطایی که در ابتدا داشتیم، نمایش داده میشود - " تابع نیست"! با این حال، این بار به عنوان خطایی که از خط ۹۵ آمده است، فهرست شده است.
۳- با نگاهی به خط ۹۵، به راحتی میتوان فهمید که ما اینجا هم همان اشتباه را مرتکب شدهایم. باید addeventListener را دوباره به addEventListener تغییر دهیم. اکنون این کار را انجام دهید.
در این مرحله، بازی باید به خوبی اجرا شود. با این حال، پس از چند بار بازی کردن، بدون شک متوجه خواهید شد که بازی همیشه عدد ۱ را به عنوان عدد «تصادفی» که باید حدس بزنید انتخاب میکند. قطعاً این دقیقاً آنطور که ما میخواهیم بازی اجرا نشود!
قطعاً در جایی از منطق بازی مشکلی وجود دارد - بازی خطایی برنمیگرداند؛ فقط درست اجرا نمیشود.
۱- به دنبال متغیر randomNumber و خطوطی که عدد تصادفی ابتدا در آنها تنظیم شده است، بگردید. نمونهای که عدد تصادفی را که میخواهیم در ابتدای بازی حدس بزنیم ذخیره میکند، باید حدود خط شماره ۴۷ باشد:
۲- و آن که قبل از هر بازی بعدی عدد تصادفی تولید میکند، حدود خط ۱۱۴ است:
۳- برای بررسی اینکه آیا این خطوط واقعاً مشکلساز هستند یا خیر، دوباره به تابع دوستمان مراجعه میکنیم — خط زیر را مستقیماً زیر هر یک از دو خط بالا وارد کنید:
۴- ذخیره و رفرش کنید، سپس چند بازی انجام دهید - خواهید دید که در هر نقطهای که در کنسول ثبت میشود برابر با ۱ است.
برای رفع این مشکل، بیایید نحوهی عملکرد این خط را بررسی کنیم. ابتدا، تابع را فراخوانی میکنیم که یک عدد اعشاری تصادفی بین ۰ و ۱ تولید میکند، مثلاً ۰.۵۶۷۵۴۹۳۸۴۳.
در مرحله بعد، نتیجه فراخوانی را از طریق ارسال میکنیم که عدد ارسالی را به نزدیکترین عدد صحیح به پایین گرد میکند. سپس ۱ را به آن نتیجه اضافه میکنیم:
گرد کردن یک عدد اعشاری تصادفی بین ۰ و ۱ به پایین، همیشه ۰ را برمیگرداند، بنابراین اضافه کردن ۱ به آن همیشه ۱ را برمیگرداند. قبل از گرد کردن عدد تصادفی به پایین، باید آن را در ۱۰۰ ضرب کنیم. دستور زیر یک عدد تصادفی بین ۰ تا ۹۹ به ما میدهد:
بنابراین میخواهیم عدد ۱ را اضافه کنیم تا یک عدد تصادفی بین ۱ تا ۱۰۰ به دست آوریم:
سعی کنید هر دو خط را به این صورت بهروزرسانی کنید، سپس ذخیره و رفرش کنید - بازی اکنون باید طبق برنامه اجرا شود!
خطاهای رایج دیگری نیز وجود دارند که در کد خود با آنها مواجه خواهید شد. این بخش به اکثر آنها میپردازد.
بازی بعد از اولین حدس اشتباه تمام میشود
این میتواند یکی دیگر از نشانههای اشتباه گرفتن عملگرهای انتساب و تساوی مطلق باشد. برای مثال، اگر قرار باشد این خط را درون تابع تغییر دهیم از
این تست همیشه مقدار درست را برمیگرداند و باعث میشود برنامه پس از اولین حدس اشتباه، تابع را اجرا کند. مراقب باشید!
خطای املایی: وجود نداشتن ) بعد از لیست ورودی های ارزش به تابع
این مورد بسیار ساده است - عموماً به این معنی است که شما پرانتز بسته را در انتهای فراخوانی تابع/متد فراموش کردهاید.
خطای املایی: وجود نداشتن : بعد از شناسه ویژگی
این خطا معمولاً مربوط به یک شیء جاوا اسکریپت است که به اشتباه شکل گرفته است، اما در این مورد، ما توانستیم آن را با تغییر
برطرف کنیم. این باعث شده است که مرورگر فکر کند ما سعی داریم محتوای تابع را به عنوان یک ارزش ورودی به آن ارسال کنیم. مراقب پرانتزها باشید!
خطای املایی: } بعد از بدنه تابع وجود ندارد
این کار آسان است - عموماً به این معنی است که شما یک آکولاد را از یک تابع یا ساختار شرطی جا انداختهاید. ما این خطا را با حذف یکی از آکولادهای بسته نزدیک به پایین تابع دریافت کردیم.
خطای املایی: جای عبارت (expression)، استرینگ است یا خطای املایی: استرینگ شامل یک پرش به خط جدید بدون املای درست است
این خطاها عموماً به این معنی هستند که شما یک علامت نقل قول باز یا بسته را از یک مقدار رشتهای جا انداختهاید. در اولین خطای بالا، رشته به جای علامت نقل قول در ابتدای رشته، با کاراکتر(های) غیرمنتظره جایگزین میشود. خطای دوم به این معنی است که رشته با علامت نقل قول تمام نشده است.
برای همه این خطاها، به نحوه برخورد ما با مثالهایی که در راهنمای گام به گام بررسی کردیم، فکر کنید. وقتی خطایی رخ میدهد، به شماره خطی که به شما داده شده است نگاه کنید، به آن خط بروید و ببینید آیا میتوانید مشکل را تشخیص دهید یا خیر. به خاطر داشته باشید که خطا لزوماً در آن خط نخواهد بود و ممکن است خطا ناشی از همان مشکلی که در بالا ذکر کردیم، نباشد!
