Summarize this content to 400 words in Persian Lang سلام و به وبلاگ من خوش آمدید! من در حال یادگیری جاوا اسکریپت، HTML و سایر مهارت‌ها برای یادگیری توسعه نرم‌افزار کامل استک هستم، و برخی از تجربیات خود را در اینجا مستند می‌کنم تا بتوانم اطلاعات خود را تا به حال بررسی کنم و همچنین برخی از درس‌هایی را که در این راه آموخته‌ام به اشتراک بگذارم. با سایر کدگذارهای جدید
در این پست برخی از خطاهایی که من تا کنون در حین یادگیری جاوا اسکریپت مرتکب شده ام، به ویژه در حین انجام اولین پروژه بزرگ خود، مورد بحث قرار خواهد گرفت. پروژه من اطلاعات مربوط به محصولات آرایشی را از یک API می گیرد و آن را در یک صفحه وب به روشی سازمان یافته و از نظر بصری دلپذیر قرار می دهد.
اشتباه شماره 1: تا حد امکان خودکار نکردن
API که پروژه من اطلاعات را از آن به دست می آورد یک آرایه بزرگ است، بنابراین روشی که در نهایت تصمیم گرفتم پروژه خود را ساختار دهم این بود که از متد forEach در آرایه ای که توسط API من برگردانده شده است استفاده کنم و به صورت پویا یک عنصر HTML div جدید برای هر عنصر ایجاد کنم. آرایه برای هر محصول آرایشی می توانید این ساختار را در خط 10 تصویر زیر مشاهده کنید.
توضیحات تصویر
با این حال، در ابتدا سعی کردم هر عنصر از آرایه API خود را به عناصر div HTML که قبلاً در فایل HTML پروژه خود ایجاد کرده بودم اختصاص دهم. این روش بسیار دشوار بود زیرا به جای ایجاد عناصر جدید HTML بر اساس اطلاعات در API، مجبور شدم به صورت دستی divهایی ایجاد کنم که می‌دانستم با عناصر API Array مطابقت دارند، استراتژی که زمان‌بر و مستعد خطا بود. علاوه بر این، اگر عناصر API Array تغییر می‌کردند، ایده اولیه من کار نمی‌کرد، که باعث می‌شد پروژه من بسیار کم‌کار باشد. اگرچه روش غیر دینامیکی من برای ایجاد عناصر div HTML به دلایل ذکر شده انتخاب مناسبی برای پروژه من نبود، فکر می کنم هنوز درس های ارزشمندی وجود دارد که هنگام تلاش برای پروژه خود در این راه آموختم، بنابراین اشتباهات دیگری که در آنها به اشتراک خواهم گذاشت. این پست از آن کد می آید.
اشتباه شماره 2: هویت اشتباه
اگر چیزی کار نمی کند، یک چیز خوب برای بررسی این است که آیا جنبه کدی که در حال تغییر آن هستید همان چیزی است که شما فکر می کنید. ممکن است با خطا مواجه شوید زیرا سعی می کنید از روشی استفاده کنید که قابل اجرا نیست. دو ابزاری که برای این نوع عیب یابی مفید هستند، console.log() و typeOf().
زمانی که کد اولیه پروژه من طبق برنامه کار نمی کرد از هر دو استفاده کردم. هنگام استفاده همزمان از حلقه‌های console.log()و برای حلقه‌های for، قرار دادن یکی در داخل حلقه for و دیگری در خارج از حلقه for می‌تواند مفید باشد تا بتوانید دقیقاً ببینید که کد شما در کجا اجرا نمی‌شود.
در تصویر زیر می توانید ببینید که چگونه این کار را انجام دادم.
توضیحات تصویر
بعداً console.log(typeOf(thisDiv)) را هم انجام دادم تا ببینم آیا thisDiv یک شی است یا خیر. در نگاهی به گذشته، اسکرین شات مستقیماً در بالا احتمالاً کار نمی کند زیرا product.id به احتمال زیاد یک عدد بود، در حالی که thisDiv در واقع یک شی بود. اما علی‌رغم این خطا، console.log() و typeOf() ابزارهای خوبی برای زمین کردن خودم و کشف مراحل بعدی من بودند.
اشتباه شماره 3: فراموش کردن چیزی ممکن است وجود نداشته باشد
گاهی اوقات، کد ممکن است شکسته شود، نه به این دلیل که شما سعی می کنید چیزی را تغییر دهید که با چیزی که فکر می کنید متفاوت است، بلکه به این دلیل است که می خواهید چیزی را تغییر دهید که وجود ندارد. در حین کار بر روی روش اولیه خود برای پروژه خود، زمانی که مطمئن شدم اینDiv یک شی است، برای من گیج کننده بود که چرا thisDiv.id شناسایی نمی شود، زیرا این نحو روشی معتبر برای به دست آوردن یک مقدار Object طبق W3schools است ( https://www.w3schools.com/js/js_objects.asp). من تصمیم گرفتم خط 14 را به “console.log(Object.keys(thisDiv))” تغییر دهم تا بتوانم راه درستی برای دریافت شناسه thisDiv پیدا کنم تا بتوانم عبارت if خود را که از خط 15 شروع می شود تصحیح کنم و مقایسه کنم کلید شناسه thisDiv به product.id.
توضیحات تصویر
از این تغییر خطای زیر را دریافت کردم:
Uncaught (در وعده) TypeError: نمی توان تعریف نشده یا تهی را به شی تبدیل کرد
در Function.keys ()
در index.js:14:32
در Array.forEach ()
در displayProdName (index.js:11:10)
در index.js:6:21
در کار خود در پایتون، متوجه شده ام که گاهی اوقات، اگر اولین عنصر در یک حلقه for وجود نداشته باشد یا ویژگی های لازم برای اجرای دستورات حلقه for را نداشته باشد، کد شکسته می شود و هیچ تکراری وجود ندارد. حلقه for رخ خواهد داد. من فکر کردم که ممکن است مشکل مشابهی در جاوا اسکریپت برای حلقه برای این پروژه رخ دهد، زیرا برای i=0، اولین تکرار حلقه for من در خط 12، document.getElementById(0) وجود نداشت، بنابراین thisDiv وجود نداشت. t برای اولین تکرار i وجود دارد. بنابراین، console.log(Object.keys(thisDiv)) کار نکرد، زیرا thisDiv یک Object نبود، بنابراین هیچ کلیدی نداشت. بنابراین، به خاطر داشته باشید که گاهی اوقات ممکن است جنبه هایی از کد شما وجود نداشته باشد، می تواند در زمان کدنویسی باعث صرفه جویی در زمان زیادی شود.
این سه درس در میان بسیاری از درس‌هایی هستند که من با شروع سفر خود به جاوا اسکریپت آموخته‌ام. امیدوارم خواندن این مطلب برای شما مفید بوده باشد!
سلام و به وبلاگ من خوش آمدید! من در حال یادگیری جاوا اسکریپت، HTML و سایر مهارت‌ها برای یادگیری توسعه نرم‌افزار کامل استک هستم، و برخی از تجربیات خود را در اینجا مستند می‌کنم تا بتوانم اطلاعات خود را تا به حال بررسی کنم و همچنین برخی از درس‌هایی را که در این راه آموخته‌ام به اشتراک بگذارم. با سایر کدگذارهای جدید
در این پست برخی از خطاهایی که من تا کنون در حین یادگیری جاوا اسکریپت مرتکب شده ام، به ویژه در حین انجام اولین پروژه بزرگ خود، مورد بحث قرار خواهد گرفت. پروژه من اطلاعات مربوط به محصولات آرایشی را از یک API می گیرد و آن را در یک صفحه وب به روشی سازمان یافته و از نظر بصری دلپذیر قرار می دهد.
اشتباه شماره 1: تا حد امکان خودکار نکردن
API که پروژه من اطلاعات را از آن به دست می آورد یک آرایه بزرگ است، بنابراین روشی که در نهایت تصمیم گرفتم پروژه خود را ساختار دهم این بود که از متد forEach در آرایه ای که توسط API من برگردانده شده است استفاده کنم و به صورت پویا یک عنصر HTML div جدید برای هر عنصر ایجاد کنم. آرایه برای هر محصول آرایشی می توانید این ساختار را در خط 10 تصویر زیر مشاهده کنید.
توضیحات تصویر
با این حال، در ابتدا سعی کردم هر عنصر از آرایه API خود را به عناصر div HTML که قبلاً در فایل HTML پروژه خود ایجاد کرده بودم اختصاص دهم. این روش بسیار دشوار بود زیرا به جای ایجاد عناصر جدید HTML بر اساس اطلاعات در API، مجبور شدم به صورت دستی divهایی ایجاد کنم که می‌دانستم با عناصر API Array مطابقت دارند، استراتژی که زمان‌بر و مستعد خطا بود. علاوه بر این، اگر عناصر API Array تغییر می‌کردند، ایده اولیه من کار نمی‌کرد، که باعث می‌شد پروژه من بسیار کم‌کار باشد. اگرچه روش غیر دینامیکی من برای ایجاد عناصر div HTML به دلایل ذکر شده انتخاب مناسبی برای پروژه من نبود، فکر می کنم هنوز درس های ارزشمندی وجود دارد که هنگام تلاش برای پروژه خود در این راه آموختم، بنابراین اشتباهات دیگری که در آنها به اشتراک خواهم گذاشت. این پست از آن کد می آید.
اشتباه شماره 2: هویت اشتباه
اگر چیزی کار نمی کند، یک چیز خوب برای بررسی این است که آیا جنبه کدی که در حال تغییر آن هستید همان چیزی است که شما فکر می کنید. ممکن است با خطا مواجه شوید زیرا سعی می کنید از روشی استفاده کنید که قابل اجرا نیست. دو ابزاری که برای این نوع عیب یابی مفید هستند، console.log() و typeOf().
زمانی که کد اولیه پروژه من طبق برنامه کار نمی کرد از هر دو استفاده کردم. هنگام استفاده همزمان از حلقه‌های console.log()و برای حلقه‌های for، قرار دادن یکی در داخل حلقه for و دیگری در خارج از حلقه for می‌تواند مفید باشد تا بتوانید دقیقاً ببینید که کد شما در کجا اجرا نمی‌شود.
در تصویر زیر می توانید ببینید که چگونه این کار را انجام دادم.
توضیحات تصویر
بعداً console.log(typeOf(thisDiv)) را هم انجام دادم تا ببینم آیا thisDiv یک شی است یا خیر. در نگاهی به گذشته، اسکرین شات مستقیماً در بالا احتمالاً کار نمی کند زیرا product.id به احتمال زیاد یک عدد بود، در حالی که thisDiv در واقع یک شی بود. اما علی‌رغم این خطا، console.log() و typeOf() ابزارهای خوبی برای زمین کردن خودم و کشف مراحل بعدی من بودند.
اشتباه شماره 3: فراموش کردن چیزی ممکن است وجود نداشته باشد
گاهی اوقات، کد ممکن است شکسته شود، نه به این دلیل که شما سعی می کنید چیزی را تغییر دهید که با چیزی که فکر می کنید متفاوت است، بلکه به این دلیل است که می خواهید چیزی را تغییر دهید که وجود ندارد. در حین کار بر روی روش اولیه خود برای پروژه خود، زمانی که مطمئن شدم اینDiv یک شی است، برای من گیج کننده بود که چرا thisDiv.id شناسایی نمی شود، زیرا این نحو روشی معتبر برای به دست آوردن یک مقدار Object طبق W3schools است ( https://www.w3schools.com/js/js_objects.asp). من تصمیم گرفتم خط 14 را به “console.log(Object.keys(thisDiv))” تغییر دهم تا بتوانم راه درستی برای دریافت شناسه thisDiv پیدا کنم تا بتوانم عبارت if خود را که از خط 15 شروع می شود تصحیح کنم و مقایسه کنم کلید شناسه thisDiv به product.id.
توضیحات تصویر
از این تغییر خطای زیر را دریافت کردم:
Uncaught (در وعده) TypeError: نمی توان تعریف نشده یا تهی را به شی تبدیل کرد
در Function.keys ()
در index.js:14:32
در Array.forEach ()
در displayProdName (index.js:11:10)
در index.js:6:21
در کار خود در پایتون، متوجه شده ام که گاهی اوقات، اگر اولین عنصر در یک حلقه for وجود نداشته باشد یا ویژگی های لازم برای اجرای دستورات حلقه for را نداشته باشد، کد شکسته می شود و هیچ تکراری وجود ندارد. حلقه for رخ خواهد داد. من فکر کردم که ممکن است مشکل مشابهی در جاوا اسکریپت برای حلقه برای این پروژه رخ دهد، زیرا برای i=0، اولین تکرار حلقه for من در خط 12، document.getElementById(0) وجود نداشت، بنابراین thisDiv وجود نداشت. t برای اولین تکرار i وجود دارد. بنابراین، console.log(Object.keys(thisDiv)) کار نکرد، زیرا thisDiv یک Object نبود، بنابراین هیچ کلیدی نداشت. بنابراین، به خاطر داشته باشید که گاهی اوقات ممکن است جنبه هایی از کد شما وجود نداشته باشد، می تواند در زمان کدنویسی باعث صرفه جویی در زمان زیادی شود.
این سه درس در میان بسیاری از درس‌هایی هستند که من با شروع سفر خود به جاوا اسکریپت آموخته‌ام. امیدوارم خواندن این مطلب برای شما مفید بوده باشد!
