شما سوالاتی دارید و ما پاسخ هایی داریم. در اینجا ۱۰ کاری که توسعه دهندگان جدیدتر اغلب نمی دانند چگونه با جاوا اسکریپت انجام دهند، با نکات و کدهایی که به شما در درک آن کمک می کند، آورده شده است.

شما درباره سؤالات متداول شنیده اید، که معمولاً لیستی از سؤالات متداول در مورد یک موضوع یا موضوع دیگر است. با تغییر در این ایده، FSS – برای راه‌حل‌های متداول – راه‌حل‌هایی را برای برخی از متداول‌ترین درخواست‌های کمک فهرست می‌کند. اینها معمولاً فراتر از سؤالات «تازه کار» هستند و به مسائل زندگی واقعی که برنامه نویسان بدخواه هستند می پردازند.

در اینجا ۱۰ مشکل وجود دارد که بارها و بارها برای توسعه دهندگانی که با جاوا اسکریپت کار می کنند، با نکات سریع و نمونه کدهایی که به شما در حل آنها کمک می کند، مطرح می شود.

۱. انجام کارها با آرایه ها

یک کاری که برنامه نویسان باید همیشه انجام دهند، دستکاری آرایه های داده است. این داده ها می توانند اشیا، اعداد یا رشته ها باشند. شما آن را از انواع مکان ها دریافت می کنید و انواع کارها را با آن انجام می دهید: آن را سفارش دهید، سازماندهی کنید، آن را به قطعات کوچکتر تقسیم کنید، و غیره.

راه‌های زیادی برای انجام کارهایی که باید با آرایه‌ها انجام دهید، از جمله حلقه‌های دستوری کلاسیک وجود دارد. واقعاً راه درستی وجود ندارد. با این حال، جاوا اسکریپت مدرن مجموعه‌ای از عملیات کاربردی فوق‌العاده مفید را در اختیار شما قرار می‌دهد که اغلب روشی مختصر و ساده برای انجام کاری که نیاز به انجام دارد، ارائه می‌کند. شما فقط باید آنها را در ذهن داشته باشید و بدانید که در زمان فرا رسیدن زمان به کدام عملیات کاربردی دست پیدا کنید.

این آرایه را در نظر بگیرید:


const products = [
  { id: 1, name: "Apple", price: 1.99, inStock: true },
  { id: 2, name: "Banana", price: 0.79, inStock: false },
  { id: 3, name: "Orange", price: 2.49, inStock: true },
];

اگر بخواهیم فقط محصولات موجود را فیلتر کنیم و آنها را بر اساس قیمت صعودی مرتب کنیم، می‌توانیم این کار را انجام دهیم:


const availableProducts = products.filter(product => product.inStock)
  .sort((a, b) => a.price - b.price);

availableProducts اکنون فقط اشیایی را در خود نگه می دارد که inStock در آنها true باشد و لیست بر اساس قیمت مرتب شده است. متدهای filter و sort هر دو داخلی هستند و توابعی را به عنوان آرگومان می گیرند. (اینها “توابع درجه بالاتر” هستند، که مشخصه برنامه نویسی تابعی است.)

هر آرگومان تابعی عنصر(ها) را می گیرد تا بر روی آن عمل کند و سپس کار خود را بر اساس آن انجام می دهد. در مورد filter، اگر تابع true را برگرداند، عنصر در آرایه حاصل نگهداری می شود. در sort()، با حرکت الگوریتم روی آرایه، دو آرگومان ارائه می شود. اگر نتیجه منفی باشد، ابتدا مورد اول مرتب می شود و بالعکس. (اگر ۰ برگردانده شود، موارد برابر هستند.)

اطلاعات بیشتر درباره آرایه های جاوا اسکریپت

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

۲. دستکاری DOM

اگرچه چارچوب‌های Reactive اغلب برای کار بر روی DOM (مدل شیء سند که رابط کاربری را نشان می‌دهد و به شما امکان می‌دهد آن را تغییر دهید) استفاده می‌شود، توسعه‌دهندگان هنوز باید مستقیماً با DOM با استفاده از جاوا اسکریپت تعامل داشته باشند.< /p>

دستکاری DOM به دو چیز اساسی خلاصه می‌شود: واکنش به رویدادها و تغییر عناصر و ویژگی‌ها. این مثال را در نظر بگیرید:


<!DOCTYPE html>
<html>
<body>
  <h1 id="heading">Welcome to our website!</h1>
  <button id="change-button">Change Heading</button>

  <script>
    const changeButton = document.getElementById("change-button"); 
    changeButton.addEventListener("click", function(event) { 
      const clickedElement = event.target;  
      clickedElement.style.color = "red"; 
      const heading = document.getElementById("heading"); 
      heading.textContent = "This heading has been changed!";
    });
  </script>
</body>
</html>

در اینجا یک صفحه HTML ساده داریم، با عنوان (h1) و یک دکمه (button). یک درخت DOM ایجاد می کند که در آن عناصر