فصل نهم: کارگاه عملی ساخت پروژه
۱. ما قرار است چه بسازیم؟
هدف ما ساخت یک لیست است که کاربر بتواند کاری را تایپ کند، روی دکمه “اضافه کن” کلیک کند و آن کار به صورت خودکار به لیست پایین صفحه اضافه شود.
در این پروژه از مفاهیم زیر استفاده میکنیم:
- DOM: برای گرفتن مقدار از اینپوت و اضافه کردن تگ جدید به صفحه.
- Functions: برای دستهبندی عملیات “افزودن کار”.
- Events: برای تشخیص لحظه کلیک روی دکمه.
۲. ساختار HTML
ابتدا باید بدنه کار را در HTML آماده کنیم:
<button id=“addBtn”>افزودن</button>
<ul id=“taskList”></ul>
۳. کدنویسی منطق برنامه
حالا با استفاده از جاوااسکریپت، به دکمه دستور میدهیم که مقدار داخل اینپوت را بگیرد و به لیست اضافه کند:
const input = document.getElementById(“taskInput”);
const list = document.getElementById(“taskList”);
btn.addEventListener(“click”, () => {
const taskValue = input.value;
if (taskValue !== “”) {
list.innerHTML += `<li>${taskValue}</li>`;
input.value = “”; // پاک کردن ورودی
} else {
alert(“لطفا متنی بنویسید!”);
}
});
۴. تحلیل گامبهگام (چرا اینطور نوشتیم؟)
- شرط if: چک کردیم که کاربر حتماً چیزی تایپ کرده باشد (فصل ۳).
- innerHTML: از این ویژگی برای اضافه کردن تگ
<li>جدید به داخل لیست<ul>استفاده کردیم (فصل ۸). - Template Literal: با استفاده از بکتیک (`) متغیر را مستقیماً داخل رشته قرار دادیم (فصل ۲).
🎓 پایان دوره مقدماتی جاوااسکریپت
شما با موفقیت ۹ فصل پرمحتوا را در CSLearn.ir پشت سر گذاشتید. حالا شما مفاهیم پایه را میشناسید و میتوانید پروژههای ساده وب بسازید.
گام بعدی شما چیست؟
پیشنهاد ما شروع یادگیری ES6+ (جاوااسکریپت پیشرفته) و سپس ورود به دنیای کتابخانههای قدرتمندی مثل React یا Vue است.
قدرت گرفته از عشق به آموزش – CSLearn.ir