39- آموزش جاوااسکریپت | پروژه عملی :قسمت 1 از 6 -ساخت رابط کاربری پروژه Book List با رویکرد شی‌گرا

در این آموزش، پروژه‌ای ساده برای مدیریت فهرست کتاب‌ها را آغاز می‌کنیم تا مفاهیم برنامه‌نویسی شی‌گرا در جاوااسکریپت را در عمل ببینیم. هدف این است که ابتدا پروژه را با سینتکس ES5 و الگوی Constructor/Prototype پیاده‌سازی کنیم و سپس همان ساختار را با کلاس‌های ES6 بازنویسی کنیم.

در بخش‌های قبلی با مفاهیم برنامه‌نویسی شی‌گرا در جاوااسکریپت آشنا شدیم و هم سینتکس ES5 مبتنی بر constructor و prototype را بررسی کردیم و هم کلاس‌های ES6 را شناختیم. حالا زمان آن رسیده است که از این مفاهیم در یک پروژه واقعی و ساده استفاده کنیم.

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

هدف اصلی این پروژه، مقایسه دو شیوه پیاده‌سازی یک برنامه یکسان است:

نسخه اول با استفاده از ES5 و Prototype Syntax
نسخه دوم با استفاده از کلاس‌های ES6

نکته مهم این است که تفاوت اصلی این دو روش در ظاهر کد و خوانایی آن است؛ زیرا در پشت صحنه، هر دو همچنان بر پایه سیستم پروتوتایپی جاوااسکریپت عمل می‌کنند.

نمای کلی پروژه

این پروژه کاملاً در سمت رابط کاربری اجرا می‌شود و هیچ پایگاه داده یا ارتباطی با سرور ندارد. بنابراین همه چیز در مرورگر انجام می‌شود. امکانات این برنامه شامل موارد زیر است:

افزودن کتاب جدید
نمایش کتاب‌ها در جدول
نمایش پیام موفقیت یا خطا
حذف کتاب از لیست

ساختار فایل‌های پروژه

در ابتدا یک پوشه برای پروژه ایجاد می‌کنیم و سه فایل اصلی در نظر می‌گیریم:

booklist/
├── index.html
├── app.js
└── appes6.js

فایل app.js برای نسخه ES5 استفاده می‌شود و فایل appes6.js را در ادامه برای بازنویسی پروژه با کلاس‌های ES6 به کار می‌بریم.

ساخت فایل HTML

ابتدا ساختار اصلی صفحه را در فایل index.html ایجاد می‌کنیم. در این صفحه از Skeleton CSS برای استایل پایه استفاده می‌کنیم و فرم ورود اطلاعات کتاب و جدول نمایش داده‌ها را قرار می‌دهیم.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Book List</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />

  <style>
    .success,
    .error {
      color: #fff;
      padding: 5px;
      margin: 5px 0 15px 0;
    }

    .success {
      background: green;
    }

    .error {
      background: red;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Add Book</h1>

    <form id="book-form">
      <div>
        <label for="title">Title</label>
        <input type="text" id="title" class="u-full-width" />
      </div>

      <div>
        <label for="author">Author</label>
        <input type="text" id="author" class="u-full-width" />
      </div>

      <div>
        <label for="isbn">ISBN</label>
        <input type="text" id="isbn" class="u-full-width" />
      </div>

      <div>
        <input type="submit" value="Submit" class="u-full-width" />
      </div>
    </form>

    <table class="u-full-width">
      <thead>
        <tr>
          <th>Title</th>
          <th>Author</th>
          <th>ISBN</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="book-list"></tbody>
    </table>
  </div>

  <script src="app.js"></script>
</body>
</html>

توضیح بخش‌های رابط کاربری

فرم ثبت کتاب

فرم شامل سه فیلد اصلی است:

title برای عنوان کتاب
author برای نام نویسنده
isbn برای شماره ISBN

در انتهای فرم نیز یک دکمه Submit قرار می‌گیرد تا اطلاعات وارد شده ارسال شوند.

جدول نمایش کتاب‌ها

بعد از فرم، یک جدول برای نمایش لیست کتاب‌ها در نظر گرفته می‌شود. بدنه جدول (tbody) شناسه book-list دارد تا بعداً بتوانیم از طریق جاوااسکریپت، سطرهای جدید را به‌صورت پویا به آن اضافه کنیم.

پیام‌های موفقیت و خطا

دو کلاس CSS به نام‌های .success و .error تعریف می‌کنیم تا هنگام ثبت صحیح یا ناقص بودن فرم، پیام مناسب را به کاربر نمایش دهیم. هر دو کلاس استایل مشترک دارند و فقط رنگ پس‌زمینه آن‌ها متفاوت است:

سبز برای موفقیت
قرمز برای خطا

نکته درباره اجرای پروژه

برای مشاهده سریع نتیجه در مرورگر، می‌توانید از افزونه‌هایی مانند Live Server در VS Code استفاده کنید، اما این کار الزامی نیست. هدف اصلی در این بخش، آماده‌سازی ساختار رابط کاربری برای شروع برنامه‌نویسی بخش منطقی پروژه است.

جمع‌بندی

در این بخش، پایه رابط کاربری پروژه Book List را آماده کردیم. همچنین ساختار فایل‌ها را مشخص کردیم تا در ادامه، منطق برنامه را ابتدا با ES5 و سپس با ES6 پیاده‌سازی کنیم. این روش کمک می‌کند تفاوت‌های ظاهری و ساختاری این دو رویکرد را بهتر درک کنید و ببینید چگونه می‌توان یک پروژه یکسان را با دو سبک متفاوت در جاوااسکریپت نوشت.

در بخش بعدی، وارد فایل جاوااسکریپت نسخه ES5 می‌شویم و منطق افزودن و نمایش کتاب‌ها را پیاده‌سازی می‌کنیم.

// 0 comments

#جاوااسکریپت#فرم HTML#رابط کاربری#Book List#ES6#ES5#OOP#برنامه نویسی شی گرا