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