صفحه کاربری
آکادمی بنو
نویسنده: بهنام نوبخت
آموزش‌های جامع و کاربردی برنامه‌نویسی، طراحی سایت، توسعه اپلیکیشن موبایل و مهندسی نرم‌افزار؛ از مباحث پایه تا پیشرفته، همراه با آموزش‌های پروژه‌محور برای یادگیری اصولی و کسب مهارت‌های تخصصی.
آموزش JavaScript
۱۸ مقاله
Number و Math در جاوااسکریپت
در بسیاری از برنامه‌های جاوااسکریپت با اعداد (Numbers) سروکار داریم. قیمت محصولات، سن کاربران، امتیازها، تعداد کالاها، درصد تخفیف، نمره آزمون، مختصات، زمان‌ها و بسیاری از اطلاعات دیگر به صورت عددی در برنامه ذخیره می‌شوند. جاوااسکریپت برای کار با اعداد از نوع داده‌ای Number استفاده می‌کند. علاوه بر آن، یک Object داخلی به نام Math دارد که مجموعه‌ای از ابزارهای کاربردی برای انجام محاسبات ریاضی در اختیار برنامه‌نویس قرار می‌دهد. در این مقاله ابتدا با Number و نحوه کار با اعداد آشنا می‌شویم، سپس تبدیل String به Number، بررسی عدد، گرد کردن اعداد، حداقل و حداکثر، توان، جذر، عدد تصادفی و چند کاربرد عملی را بررسی خواهیم کرد.
Date و Time در جاوااسکریپت
در بسیاری از برنامه‌های واقعی، کار با تاریخ و زمان در جاوااسکریپت اهمیت زیادی دارد. نمایش تاریخ ثبت سفارش، زمان ورود کاربر، محاسبه سن، تعیین تاریخ انقضای یک اشتراک، محاسبه فاصله بین دو تاریخ، ایجاد شمارش معکوس و نمایش زمان ارسال پیام، همگی نمونه‌هایی از کاربرد تاریخ و زمان هستند. در جاوااسکریپت برای کار با تاریخ و زمان از شیء داخلی Date استفاده می‌کنیم. این شیء امکانات مختلفی برای ایجاد تاریخ، دریافت اجزای تاریخ، تغییر تاریخ، مقایسه تاریخ‌ها و محاسبه فاصله زمانی در اختیار ما قرار می‌دهد.
DOM در جاوااسکریپت
تا اینجا با مفاهیم پایه جاوااسکریپت مانند متغیرها، شرط‌ها، حلقه‌ها، توابع، آرایه‌ها، Objectها، Stringها، Numberها و Date آشنا شدیم. اما بیشتر مثال‌های قبلی در محیط جاوااسکریپت مستقل از صفحه HTML اجرا می‌شدند. در توسعه وب معمولاً هدف ما فقط اجرای کد جاوااسکریپت نیست؛ بلکه می‌خواهیم با استفاده از جاوااسکریپت محتوای صفحه را تغییر دهیم، عناصر جدید ایجاد کنیم، اطلاعات کاربران را نمایش دهیم، کلاس‌های CSS را تغییر دهیم و به تعاملات کاربر پاسخ دهیم. برای انجام این کار در مرورگر از مفهومی به نام DOM استفاده می‌کنیم.
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 چگونه کار می‌کنند.