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

پیش نیازهای آموزش پروژه محور جاوا اسکریپت

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

1. متغیر چیست
   
2. آرایه چیست
   
3. تابع چیست
   
4. و همینطور می دانید اشیاء (objects) چه هستند
   

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

نرم افزار لیست انجام کارها (Todo)

نرم افزار لیست انجام کارها که امروز برنامه اش را خواهید نوشت، برنامۀ ساده ای است که کاربر می تواند لیست کارها و وظایف روزانه اش را در آن وارد کند و هر کدام را که انجام داد تیک بزند و به سراغ کار بعدی برود. ضمن اینکه این امکان را هم دارد که اگر کاری را اشتباهاً به این لیست اضافه کرده بود، آن را از فهرست کارها حذف کند. در این آموزش چگونگی ساخت تک تک این ویژگی ها را توضیح خواهیم داد.

من برای ساخت این برنامه از JSFiddle استفاده کرده ام، اگر مایل باشید شما هم می توانید از این ابزار آنلاین استفاده کنید، ضمن اینکه الزامی به این کار نیست و از برنامه های دیگری مانند ویژوال استودیو کد یا غیره نیز می توانید استفاده نمایید. حتی این امکان را دارید که با یک ویرایشگر سادۀ متنی این برنامه را بنویسید.

افزودن یک کار به لیست کارها

اولین کاری که در این برنامه باید انجام دهیم اینست که آرایه ای تنظیم کنیم تا موارد لیست کارها را در داخل آن قرار دهیم. هر کار (Todo) یک شیء با سه ویژگی خواهد بود: متنی که کار را تعریف می کند، علامت تیک آن کار که نشان می دهد آن کار به انجام رسیده است، و یک شناسۀ منحصر به فرد برای کار که در برنامه از آن استفاده خواهیم کرد.

هنگامی که کاربر کاری را به لیست کارها اضافه می کند، در واقع ما آن کار را در این آرایه اضافه می کنیم و سپس مقدار ویژگی متن آن را در صفحه به کاربر نشان می دهیم. هر وقت هم که کاربر کار را تیک زد، یک متغیر بولی را ترو (true) می کنیم و تیک را به کاربر نشان می دهیم. وقتی هم که کاربر کاری را حذف کرد، با استفاده از شناسۀ منحصر به فرد آن کار، آن را از آرایه حذف می کنیم.

بیایید با افزودن یک کار به لیست، پروژه را شروع کنیم. برای افزودن هر کار جدید به لیست ما باید تابع \(\text{addTodo()}\) را فراخوانی کنیم. در ادامه این رویداد را می بینید:

برای بزرگنمایی تصویر روی آن کلیک کنید
به طور پیش فرض هنگامی که یک فرم submit می شود، مرورگر سعی می کند آن را به سروری ارسال کند که باعث بروز رسانی صفحه می شود برای جلوگیری از این رفتار پیش فرض مرورگر از \(\text{event.preventDefault()}\) استفاده می کنیم.

دقت کنید در جایی که متن ورودی کاربر را دریافت می کنیم از تابع trim برای حذف فاصله های خالی از ابتدا و انتهای متن استفاده کرده ایم و سپس آن متن را در متغیری با نام text ذخیره می کنیم. اگر متغیر text خالی نباشد، در واقع برابر یک رشتۀ خالی نباشد، آن را به تابع \(\text{addTodo()}\) پاس می کنیم.

برای بزرگنمایی تصویر روی آن کلیک کنید
در داخل این تابع، یک شیء جدید برای آن کار جدید ایجاد می کنیم و ویژگی هایی را که در ابتدا به آنها اشاره کردم در این شیء می آوریم. ویژگی text با مقدار آرگومان (Arguments) ورودی تابع تنظیم می شود، مقدار checked به صورت پیش فرض false است، و مقدار id را با تعداد میلی ثانیه هایی که از \(1\) ژانویۀ \(1970\) گذشته است، پر می کنیم. این مقدار id برای هر کاری که ایجاد می شود منحصر به فرد خواهد بود، مگر اینکه شما بتوانید در مدت یک میلی ثانیه (یک هزارم ثانیه) بیش از یک کار اضافه کنید، که عملاً محال خواهد بود.

برای بزرگنمایی تصویر روی آن کلیک کنید
در نهایت کار مربوطه وارد آرایۀ todoItems می شود و این آرایه در صفحه نمایش داده می شود. در رویدادهای فرم مقدار متغیر text خالی می شود و صفحه را برای ورود کار جدید توسط کاربر آماده می کند و همچنین فوکوس را به جعبه متن ورود نام کار جدید می برد.

چند کار جدید اضافه کنید و به کمک مرورگرتان محتویات آرایۀ todoItems را ببینید. خواهید دید که هر آیتم موجود در این آرایه به شکل یک شیء خواهد بود.

نمایش دادن لیست کارها از روی مقادیر آرایه

هر گاه که آیتم جدیدی به آرایۀ todoItems اضافه می گردد، می خواهیم که برنامه آن آیتم جدید را روی صفحه به کاربر نیز نشان دهد. ما به سادگی می توانیم این کار را با افزودن یک li جدید به آیتم های موجود در \(\text{.js-todo-list}\) در شیء DOM انجام دهیم.

برای این منظور یک تابع \(\text{renderTodo()}\) در بالای تابع \(\text{addTodo()}\) اضافه می کنیم:

برای بزرگنمایی تصویر روی آن کلیک کنید
تابع \(\text{renderTodo()}\) یک شیء todo را به عنوان پارامتر ورودی می گیرد و با استفاده از متد \(\text{document.createElement}\) یک li می سازد. در خط بعدی ویژگی class بر روی \(\text{todo-item \${isChecked}}\) سِت شده است. اگر ویژگی checked از شیء \(todo\) برابر false باشد، مقدار متغیر رشته ای isChecked خالی خواهد بود و در غیر اینصورت مقدار آن done خواهد بود. شما می توانید تأثیر این کلاس done را در ادامه ببینید.

سپس یک ویژگی data-key بر روی عنصر li ست می گردد. مقدار داخل آن برابر با همان id موجود در شیء todo می باشد و دلیلش نیز ایجاد ارتباط بین این دو در مواقع ضروری است. از این id برای یافتن li در شیء DOM استفاده خواهد شد. بعد از آن محتویات li با استفاده از متد innerHTML ست می شود، و عنصر li به عنوان فرزندی در عنصر \(\text{.js-todo-list }\) اضافه می شود.

خط کد مربوط به \(\text{console.log(todoItems)}\) در تابع \(\text{addTodo()}\) را به \(\text{renderTodo(todo)}\) تغییر بدهید تا هر بار که یک کار جدید به لیست اضافه می شود، تابع renderTodo() فراخوانی شود و طبیعتاً به دنبال آن اتفاقاتی که گفتیم بیفتد و در نتیجۀ این اتفاقات کاربر کار جدیدش را بر روی صفحه ببیند.

برای بزرگنمایی تصویر روی آن کلیک کنید
با افزودن چند کار جدید، این موضوع را تست کنید. تمامی کارهای اضافه شده باید بلافاصله بعد از افزودن در صفحه نمایان شوند.

علامت گذاری یک کار به عنوان کار انجام شده

وقتش رسیده کارهای انجام شده را تیک بزنیم، یعنی انجام شده اند. برای انجام این کار نیاز داریم که به رویداد کلیک بر روی checkbox گوش کنیم و ویژگی checked در شیء todo متناظر آن را متناسب با کلیک کاربر و وضعیت فعلی این ویژگی، تغییر دهیم. قطعه کد زیر را بیفزایید تا این کار را انجام دهیم:

برای بزرگنمایی تصویر روی آن کلیک کنید
یادتان باشد که ما فقط به کلیک بر روی یک checkbox خاص گوش نمی کنیم و در واقع به تمامی کلیک های کل لیست گوش می کنیم. وقتی که کاربر کلیک کرد ما ابتدا بررسی می کنیم که آیا عنصری که روی آن کلیک شده است یک checkbox است. اگر اینطور باشد مقدار data-key از عنصر parent آن را می گیریم و به تابع \(\text{toggleDone()}\) پاس می کنیم. این تابع را در ادامه می بینید.

برای بزرگنمایی تصویر روی آن کلیک کنید
این تابع مقدار key از آیتمی که ویژگی checked آن ترو (true) یا فالس (false) شده است را دریافت می کند و مقدار متناظر آن را در آرایۀ todoItems را به کمک متد findIndex پیدا می کند و مقدار ویژگی checked را متناسب با تغییرات انجام شده، تغییر می دهد.

در نهایت تابع \(\text{renderTodo()}\) با شیء todo پاس شده به آن فراخوانی می شود. البته اگر در این مرحله از پروژه کد را اجرا کنید و تیک کاری را بردارید، به جای اینکه تیک آن را بردارد یک آیتم جدید تولید خواهد کرد. در ادامه با تکمیل کد این مسئله را با هم برطرف خواهیم نمود.

برای حل مشکلی که اندکی پیش اشاره کردیم، نیاز داریم که ابتدا بررسی کنیم که آیا شیء todo مربوطه در شیء DOM موجود است یا خیر، و در صورت موجود بودن نود موجود را بروز رسانی کنیم. تابع \(\text{renderTodo()}\) را به شکل زیر ویرایش کنید:

برای بزرگنمایی تصویر روی آن کلیک کنید
ابتدا شیء todo جاری انتخاب می شود. اگر در DOM موجود باشد، عنصر مربوطه بازگردانده می شود و متعاقب آن جایگزین می شود. اگر آیتم مربوطه موجود نباشد، به انتهای لیست اضافه می شود.

حذف کارها از لیست

مشابه کاری که در هنگام تغییر تیک کارها انجام دادیم، در اینجا هم به رویداد کلیک \(\text{.js-delete-todo}\) گوش می کنیم و سپس کلید parent آن را می گیریم و آن را به تابع deleteTodo پاس می کنیم. کار این تابع اینست که شیء todo متناظر را در آرایۀ todoItems حذف می کند و سپس تابع \(\text{renderTodo()}\) فراخوانی می شود تا از شیء DOM نیز حذف گردد و در نتیجه صفحه بروز رسانی شود.

ابتدا بیایید کلیک انجام شده بر روی دکمۀ حذف را تشخیص دهیم:

برای بزرگنمایی تصویر روی آن کلیک کنید
سپس تابع \(\text{deleteTodo()}\) را به شرحی که در ادامه می بینید زیر تابع \(\text{toggleDone()}\) می سازیم:

برای بزرگنمایی تصویر روی آن کلیک کنید
تابع \(\text{renderTodo()}\) را نیز به شرح زیر باید تغییر دهیم:

برای بزرگنمایی تصویر روی آن کلیک کنید
اکنون باید بتوانید با کلیک بر روی دکمۀ حذف، کارها را حذف کنید.

نمایش پیغام مناسب در وضعیت خالی بودن لیست کارها

هنگامی که هیچ داده ای برای نمایش در یک برنامه وجود نداشته باشد، وضعیت خالی رخ می دهد که اصطلاحاً به آن empty state می گویند. این وضعیت در دو حالت در برنامۀ ما رخ می دهد، حالت اول زمانی است که کاربر برای اولین بار وارد صفحۀ برنامه شده است و طبیعتاً هنوز لیستی تشکیل نداده است و حالت دوم وقتی پیش می آید که تمامی کارهای موجود در لیست را حذف کرده باشد. بسیار مهم است که هنگام طراحی برنامه ها برای این وضعیت فکری کنید تا کاربر گیج نشود و دقیقاً بداند که باید چکار کند.

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

ما هم می خواهیم کاری کنیم که وقتی برنامه در وضعیت خالی باشد، پیامی به کاربر نشان داده شود و او را تشویق کند که یک کار جدید به لیست اضافه کند. این ویژگی را می توان صرفاً با HTML و CSS پیاده سازی کرد.

ما از ویژگی \(\text{:empty}\) در CSS استفاده می کنیم تا پیاممان را به صورت شرطی و فقط در زمانی که هیچ آیتمی در لیست وجود ندارد به کاربر نشان دهیم.

قطعه کد زیر را به شکل زیر به HTML برنامه اضافه کنید:

برای بزرگنمایی تصویر روی آن کلیک کنید
سپس در CSS تان مقداری استایل به شکل زیر اضافه کنید:

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

برای بزرگنمایی تصویر روی آن کلیک کنید

اتمام پروژه - نکات مرتبط

تبریک می گوییم! شما توانستید اولین پروژۀ اساسی و مهمتان در جاوا اسکریپت را با موفقیت بسازید. البته برای بهینه تر شده این برنامه در داخل کدهای برنامه اندکی بیشتر وقت گذاشتیم و کمی به کدهای آن اضافه کردیم که توصیه می کنیم با تجربه ای که تا بحال پیدا کرده اید خودتان روی آن وقت بگذارید و دانشتان را بیفزایید. اگر دنبال آموزش های پروژه محور بیشتری باشید می توانید از آموزش پروژه محور جاوا اسکریپت در فرادرس استفاده کنید.