صفحه کاربری
نویسنده: بهنام نوبخت
آموزشهای جامع و کاربردی برنامهنویسی، طراحی سایت، توسعه اپلیکیشن موبایل و مهندسی نرمافزار؛ از مباحث پایه تا پیشرفته، همراه با آموزشهای پروژهمحور برای یادگیری اصولی و کسب مهارتهای تخصصی.
۱۸ مقاله
اگر بهتازگی وارد دنیای طراحی و برنامهنویسی وب شدهاید، احتمالاً نام جاوااسکریپت را زیاد شنیدهاید. جاوااسکریپت یکی از مهمترین زبانهای برنامهنویسی در دنیای وب است و به ما اجازه میدهد صفحات وب را از حالت ثابت خارج کنیم و به آنها تعامل، منطق و رفتار پویا اضافه کنیم. در HTML ساختار صفحه را ایجاد میکنیم، با CSS ظاهر آن را طراحی میکنیم و با جاوااسکریپت میتوانیم رفتار صفحه را کنترل کنیم. برای مثال، میتوانیم با کلیک کاربر روی یک دکمه، متنی را تغییر دهیم، یک منو را باز کنیم، اطلاعات یک فرم را بررسی کنیم یا بدون بارگذاری مجدد صفحه با یک سرور ارتباط برقرار کنیم.
در مقاله قبل با جاوااسکریپت آشنا شدیم و یاد گرفتیم که این زبان چه کاربردی در توسعه وب دارد. همچنین اولین کد جاوااسکریپت خود را اجرا کردیم و با دستورهایی مانند console.log() و alert() آشنا شدیم. حالا وقت آن است که یکی از مهمترین مفاهیم پایه در برنامهنویسی را یاد بگیریم: متغیرها. تقریباً در هر برنامهای لازم است اطلاعاتی را در حافظه نگهداری کنیم. برای مثال ممکن است بخواهیم نام کاربر، سن، قیمت یک محصول، وضعیت ورود کاربر یا نتیجه یک محاسبه را ذخیره کنیم. در جاوااسکریپت برای نگهداری این اطلاعات از Variable یا متغیر استفاده میکنیم. در این مقاله از پایه یاد میگیریم متغیر چیست، چگونه متغیر تعریف کنیم، تفاوت let و const چیست، انواع داده در جاوااسکریپت کداماند و چگونه نوع داده یک مقدار را تشخیص دهیم .
در مقاله قبلی با متغیرها و انواع داده در جاوااسکریپت آشنا شدیم و یاد گرفتیم چگونه اطلاعات مختلف مانند متن، عدد و وضعیتهای true و false را در متغیرها ذخیره کنیم. اما ذخیره کردن اطلاعات بهتنهایی کافی نیست. در یک برنامه واقعی باید بتوانیم روی این اطلاعات محاسبه انجام دهیم، مقادیر را با یکدیگر مقایسه کنیم، شرایط مختلف را بررسی کنیم و چند عبارت منطقی را به هم متصل کنیم . برای انجام این کار در جاوااسکریپت از Operator یا عملگر استفاده میکنیم.
تا اینجا با متغیرها، انواع داده و عملگرها در جاوااسکریپت آشنا شدیم. یاد گرفتیم چگونه اطلاعات را در متغیرها نگهداری کنیم، روی اعداد محاسبه انجام دهیم و با استفاده از عملگرهای مقایسهای بررسی کنیم که یک عبارت true یا false است. اما برنامههای واقعی فقط مجموعهای از دستورات پشت سر هم نیستند. یک برنامه باید بتواند تصمیم بگیرد .
در برنامهنویسی بسیاری از مواقع لازم است یک عملیات را چندین بار تکرار کنیم. برای مثال ممکن است بخواهیم اعداد ۱ تا ۱۰۰ را نمایش دهیم، مجموع چند عدد را محاسبه کنیم یا یک عملیات مشخص را تا زمانی که یک شرط برقرار است انجام دهیم. اگر برای هر تکرار بهصورت دستی کد بنویسیم، برنامه بسیار طولانی و غیرقابل مدیریت خواهد شد. اینجاست که حلقهها (Loops) در جاوااسکریپت وارد عمل میشوند. حلقه به ما اجازه میدهد یک بخش از کد را چندین بار و بر اساس یک شرط مشخص اجرا کنیم.
در برنامهنویسی معمولاً بخشی از کد را چندین بار در قسمتهای مختلف برنامه نیاز داریم. اگر هر بار همان کد را دوباره بنویسیم، برنامه طولانی، تکراری و سخت برای نگهداری میشود. توابع (Functions) در جاوااسکریپت برای حل همین مشکل ایجاد شدهاند. تابع مجموعهای از دستورات است که برای انجام یک کار مشخص نوشته میشود و میتوانیم هر زمان که نیاز داشتیم آن را اجرا کنیم. برای مثال میتوانیم تابعی برای محاسبه مجموع دو عدد، نمایش پیام، بررسی سن کاربر، محاسبه قیمت نهایی یا انجام یک عملیات خاص ایجاد کنیم. در این مقاله از پایه با مفهوم Function در جاوااسکریپت آشنا میشویم و سپس تعریف تابع، اجرای تابع، پارامترها، آرگومانها، مقدار بازگشتی، return ، مقدار پیشفرض، Scope و چند روش مختلف تعریف تابع را بررسی خواهیم کرد.
در مقاله قبل با Arrayها در جاوااسکریپت آشنا شدیم و یاد گرفتیم چگونه چند مقدار را در یک ساختار واحد ذخیره و مدیریت کنیم. اما در پروژههای واقعی، اطلاعات معمولاً فقط یک لیست ساده از مقادیر نیستند. برای مثال، یک کاربر میتواند نام، نام خانوادگی، سن، ایمیل و شماره تلفن داشته باشد. یک محصول میتواند نام، قیمت، موجودی و دستهبندی داشته باشد. برای مدیریت چنین اطلاعاتی، Object در جاوااسکریپت یکی از مهمترین ساختارهای داده است. Object به ما اجازه میدهد اطلاعات مرتبط را به شکل Property و Value در کنار یکدیگر قرار دهیم.
در برنامهنویسی معمولاً با چندین مقدار مرتبط با یکدیگر سروکار داریم. برای مثال ممکن است بخواهیم نام چند کاربر، قیمت چند محصول، نمرات یک دانشآموز یا لیستی از شهرها را در برنامه ذخیره کنیم. اگر برای هر مقدار یک متغیر جداگانه ایجاد کنیم، مدیریت اطلاعات بسیار سخت خواهد شد. آرایه (Array) در جاوااسکریپت ساختاری است که به ما اجازه میدهد چندین مقدار را در یک متغیر ذخیره کنیم. آرایهها یکی از مهمترین ساختارهای داده در جاوااسکریپت هستند و تقریباً در تمام پروژههای واقعی، از وبسایتهای ساده تا برنامههای پیچیده، کاربرد دارند. در این مقاله از صفر با Array در جاوااسکریپت آشنا میشویم و نحوه ایجاد آرایه، دسترسی به عناصر، تغییر و حذف اطلاعات، اضافه کردن داده، پیمایش آرایه با حلقه، جستجو و بررسی عناصر و چند متد مهم آرایه را یاد میگیریم.
در مقالههای قبلی با Objectها (اشیاء) آشنا شدیم و یاد گرفتیم چگونه اطلاعات و رفتارهای مرتبط را در یک ساختار مشخص قرار دهیم. اما زمانی که یک پروژه بزرگتر میشود، تعداد Objectها و کدهای مرتبط با آنها افزایش پیدا میکند و مدیریت برنامه دشوارتر میشود. در چنین شرایطی، برنامهنویسی شیءگرا یا Object-Oriented Programming که به اختصار OOP نامیده میشود به ما کمک میکند کدها را منظمتر، قابل استفاده مجدد و قابل توسعه طراحی کنیم. جاوااسکریپت نیز از برنامهنویسی شیءگرا پشتیبانی میکند و یکی از مهمترین ابزارهای آن، class است.
تقریباً در تمام برنامههای جاوااسکریپت با متن (Text) سروکار داریم. نام کاربر، ایمیل، شماره تلفن، عنوان محصول، پیامهای سیستم، آدرس، توضیحات و بسیاری از اطلاعات دیگر به صورت رشتههای متنی ذخیره میشوند. در جاوااسکریپت برای نگهداری متن از نوع دادهای به نام String استفاده میکنیم. در مقالات قبلی با انواع داده آشنا شدیم و دیدیم که میتوانیم یک متن را داخل کوتیشن قرار دهیم: