صفحه کاربری
آکادمی بنو
نویسنده: بهنام نوبخت
آموزش‌های جامع و کاربردی برنامه‌نویسی، طراحی سایت، توسعه اپلیکیشن موبایل و مهندسی نرم‌افزار؛ از مباحث پایه تا پیشرفته، همراه با آموزش‌های پروژه‌محور برای یادگیری اصولی و کسب مهارت‌های تخصصی.
مقالات
۸۹ مقاله
Eventها در جاوااسکریپت
تا اینجا یاد گرفتیم چگونه با استفاده از DOM عناصر HTML را پیدا کنیم و محتوای آن‌ها، ویژگی‌ها، کلاس‌ها و حتی ساختار صفحه را با جاوااسکریپت تغییر دهیم. اما یک سؤال مهم باقی می‌ماند: چگونه کاری کنیم که جاوااسکریپت در واکنش به رفتار کاربر اجرا شود؟ فرض کنید می‌خواهیم وقتی کاربر روی یک دکمه کلیک کرد، یک پیام نمایش داده شود. یا وقتی کاربر داخل یک Input چیزی تایپ کرد، مقدار آن را دریافت کنیم. یا وقتی یک فرم ارسال شد، اطلاعات آن را بررسی کنیم. برای انجام این کار از مفهومی به نام Event استفاده می‌کنیم.
فرم‌ها و اعتبارسنجی در جاوااسکریپت
فرم‌ها یکی از مهم‌ترین بخش‌های بسیاری از وب‌سایت‌ها و برنامه‌های تحت وب هستند. تقریباً در هر پروژه‌ای با فرم‌هایی مانند فرم ورود، ثبت‌نام، تماس با ما، جستجو، ثبت سفارش، ایجاد حساب کاربری و ویرایش اطلاعات مواجه می‌شویم. HTML به ما اجازه می‌دهد فرم و کنترل‌های ورودی مانند input ، select ، textarea و button را ایجاد کنیم؛ اما برای اینکه بتوانیم اطلاعات واردشده توسط کاربر را دریافت و بررسی کنیم، به جاوااسکریپت نیاز داریم.
Regular Expression در جاوااسکریپت
در برنامه‌نویسی بسیار پیش می‌آید که بخواهیم یک متن را بررسی کنیم و ببینیم آیا از یک الگوی مشخص پیروی می‌کند یا خیر. برای مثال ممکن است بخواهیم بررسی کنیم که یک ایمیل معتبر است، یک شماره تلفن فرمت خاصی دارد، یک Username فقط شامل حروف و اعداد است یا یک رمز عبور شرایط مشخصی دارد. برای انجام چنین بررسی‌هایی در جاوااسکریپت ابزاری به نام Regular Expression یا به اختصار RegEx وجود دارد.
ES6 و جاوااسکریپت مدرن
جاوااسکریپت در طول سال‌ها امکانات بسیار زیادی پیدا کرده است. یکی از مهم‌ترین نسخه‌های جاوااسکریپت، ECMAScript 2015 یا همان ES6 است که امکانات و قابلیت‌های جدید و مهمی را به این زبان اضافه کرد. امروزه در بسیاری از پروژه‌های جاوااسکریپت، کدهای مدرن با استفاده از قابلیت‌هایی مانند let ، const ، Arrow Function ، Template Literal ، Destructuring ، Spread Operator ، Rest Parameter ، Default Parameter ، for...of ، Map و Set نوشته می‌شوند.
مفاهیم پیشرفته جاوااسکریپت
تا اینجا با بخش بزرگی از Syntax و قابلیت‌های جاوااسکریپت آشنا شدیم؛ از متغیرها، شرط‌ها و حلقه‌ها گرفته تا Function، Array، Object، DOM، Event، Form، Regular Expression و امکانات مدرن ES6. اما برای اینکه بتوانیم در پروژه‌های واقعی جاوااسکریپت کدهای بهتر و قابل‌اعتمادتری بنویسیم، فقط دانستن Syntax کافی نیست. باید بدانیم جاوااسکریپت چگونه کدها را اجرا می‌کند و مفاهیمی مانند Scope، Execution Context، Hoisting، Closure، this ، Prototype و Call Stack چگونه کار می‌کنند.
آشنایی و نصب Bootstrap
اگر بخواهیم یک صفحه وب حرفه‌ای طراحی کنیم، تنها نوشتن HTML کافی نیست. برای اینکه صفحه ظاهر مناسبی داشته باشد، در اندازه‌های مختلف صفحه‌نمایش به‌درستی نمایش داده شود و ساختن بخش‌هایی مانند دکمه، فرم، منو، کارت و پنل‌های مختلف سریع‌تر شود، معمولاً به یک CSS Framework نیاز داریم. Bootstrap یکی از شناخته‌شده‌ترین فریم‌ورک‌های Front-End برای طراحی رابط کاربری وب است که مجموعه‌ای بزرگ از کلاس‌های آماده CSS، ابزارهای کاربردی و کامپوننت‌های JavaScript را در اختیار توسعه‌دهنده قرار می‌دهد. در این دوره از مفاهیم پایه شروع می‌کنیم و قدم‌به‌قدم به ساخت رابط‌های کاربری واقعی و Responsive با Bootstrap می‌رسیم.
Container و Grid در Bootstrap
در مقاله قبل با Bootstrap آشنا شدیم و یاد گرفتیم چگونه آن را به یک صفحه HTML اضافه کنیم. یکی از مهم‌ترین ویژگی‌های Bootstrap، سیستم Grid آن است که به ما اجازه می‌دهد محتوای صفحه را به شکل منظم و Responsive در ستون‌های مختلف قرار دهیم. در این مقاله با مفاهیم Container، Row و Column آشنا می‌شویم و یاد می‌گیریم چگونه Layout صفحات وب را با Bootstrap ایجاد کنیم. در پایان مقاله می‌توانیم ساختارهایی مانند چند ستون کنار هم، کارت‌های Responsive، بخش‌های مختلف یک صفحه و Layoutهای متناسب با موبایل، تبلت و دسکتاپ ایجاد کنیم.
Typography و Utilities در Bootstrap
در مقاله قبل با Container و Grid System آشنا شدیم و یاد گرفتیم چگونه ساختار کلی یک صفحه را با Row و Column ایجاد کنیم. اما بعد از ساخت Layout، معمولاً لازم است ظاهر محتوای داخل آن را نیز کنترل کنیم؛ برای مثال اندازه و وزن متن، تراز کردن نوشته‌ها، فاصله بین عناصر، نمایش یا مخفی کردن یک عنصر و بسیاری موارد دیگر. Bootstrap برای این کار مجموعه بزرگی از Utility Classes و ابزارهای آماده در اختیار ما قرار می‌دهد. در این مقاله ابتدا با Typography آشنا می‌شویم و سپس مهم‌ترین Utility Classهای Bootstrap را با مثال‌های عملی بررسی می‌کنیم.
رنگ‌ها، فاصله‌ها و Layout در Bootstrap
در دو مقاله قبلی با Grid، Typography و Utility Classes آشنا شدیم. حالا وقت آن است که کنترل بیشتری روی ظاهر و چیدمان عناصر صفحه داشته باشیم. در Bootstrap ابزارهای آماده‌ای برای رنگ متن، رنگ پس‌زمینه، فاصله‌ها، Display، Flexbox، Alignment، Position و اندازه عناصر وجود دارد. این ابزارها به ما اجازه می‌دهند بسیاری از Layoutهای رایج را بدون نوشتن CSS اختصاصی ایجاد کنیم. در این مقاله ابتدا سیستم رنگ Bootstrap را بررسی می‌کنیم، سپس Spacing و در ادامه ابزارهای Layout را با مثال‌های عملی یاد می‌گیریم.
تصاویر و Media در Bootstrap
تصاویر یکی از مهم‌ترین عناصر هر وب‌سایت هستند و تقریباً در همه پروژه‌های واقعی از تصاویر استفاده می‌شود؛ از تصویر محصول و پروفایل کاربر گرفته تا تصاویر مقالات، بنرها، گالری‌ها و بخش‌های معرفی خدمات. اگر تصاویر را به شکل صحیح در صفحه قرار ندهیم، ممکن است در نمایشگرهای کوچک از محدوده صفحه خارج شوند یا ظاهر نامناسبی ایجاد کنند. Bootstrap مجموعه‌ای از کلاس‌های آماده برای مدیریت تصاویر و Media در اختیار ما قرار می‌دهد. در این مقاله یاد می‌گیریم چگونه تصاویر را Responsive کنیم، گوشه‌های آن‌ها را گرد کنیم، Border و Thumbnail ایجاد کنیم، از Figure استفاده کنیم و در نهایت یک بخش تصویری واقعی و Responsive بسازیم.