مقایسه (Comparison) و شرط (If و Else) در جاوا اسکریپت (JavaScript)

پیش از این با جاوا اسکریپت (JavaScript) و کارکردهای آن در صفحات وب آشنا شدیم، گفتیم که این زبان تنها در مرورگر کاربران اجرا می شود (سمت کاربر) و به نوعی محدود به آن است، همچنین محاسبات و عملگرهای اصلی را شناختیم و با مثال هایی از آنها کار کردیم، اکنون و در این مطلب می خواهیم کمی بیشتر وارد دنیای شیرین و بعضا پیچیده برنامه نویسی با جاوا اسکریپت شویم و با هم به بررسی عملگرهای مقایسه (Comparisons) و شرط (If و Else) و نحوه تعریف و استفاده از آنها با کمک مثال بپردازیم تا امر فراگیری،  آسانتر و کاربردی تر شود.

شاید در نگاه نخست، عناوین، در زبان های برنامه نویسی کمی ترسناک و گیج کننده به نظر برسند، اما همانطور که قبلا گفتیم، در مجموع، شیوه های نگارش هر زبان برنامه نویسی، چیزی نیستند جزء قوانینی برای القای تفکر انسان به سیستم، یعنی آنچه را که ما به آن می اندیشیم و هدفمان از کدنویسی است، با آن قوانین و در بستر مفسر آن زبان، به سیستم می گوییم که چه وظیفه ای دارد و چه خروجی باید بدهد؛ فرض کنید کاربری سنش 12 سال است و ما در سایت خود صفحاتی داریم که نمی خواهیم افراد پائین تر از سن خاصی آن را مشاهده کنند، در حالت کلی، با داشتن اطلاعات کاربران، برنامه ای خواهیم نوشت که به زبان ساده به سیستم بگوید اگر کاربر از 12 سال سنش پائین تر بود، آن صفحه را بارگذاری نکند و در عوض صفحه مخصوص کودکان را نشان دهد؛ همانطور که می دانید سیستم به زبان ما سخن نمی گوید! بلکه ما باید کدهایی در بستری استاندارد تعریف کنیم، در جاوا اسکریپت نیز این بستر همان مرورگر کاربران است، کدهای جاوا اسکریپت توسط مفسری که در مرورگرها وجود دارد تبدیل به خروجی مورد نظر ما می شوند.

عملگرهای مقایسه در جاوا اسکریپت (JavaScript Comparisons):

کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)

معمولا در زبان های برنامه نویسی مختلف، برخی خاصیت ها و متدها بیشتر از سایر موارد به کار می روند که می توان اصطلاح متدهای پرکاربرد را برای آنها به کار برد، در کدنویسی با جاوا اسکریپت، دو متد پرکاربرد getElementById و innerHTML جزء برجسته ترین این موارد هستند، البته عبارت متد (Method) بیشتر در برنامه نویسی شی گراء (OOP یا Object Oriented Programming) کاربرد دارد و مواردی مانند innerHTML را خاصیت (Property) می نامند، با این وجود و به جهت اینکه این موضوع (OOP) در جاوا اسکریپت چندان مصداق ندارد، به اختصار و در این آموزش به هر دو، متد خواهیم گفت، به هر صورت برای آشنایی بیشتر و جهت تکمیل دانستنی هایی که تا این لحظه آموخته ایم، با ادامه مطلب همراه ما باشید.

متد getElementById

کار با پنجره pop up در جاوا اسکریپت (JavaScript)

همان طور که در آموزش های قبل دیدیم، جاوا اسکریپت یک زبان کد نویسی سمت کاربر یا client-side  است به این معنی که در مرورگر کاربران اجرا شده و توسط مفسر آن پردازش می شود، به این دلیل در کنار مزیت هایی که دارد، محدودیت هایی نیز وجود خواهد داشت، از این رو است که در برنامه نویسی وب صرف تسلط بر یک زبان سمت کاربر یا سمت سرور کفایت نمی کند و برنامه نویس موفق کسی است که بتواند ترکیبی از این دو را به کار گیرد، به هر صورت در این آموزش می خواهیم شما را با یکی دیگر از قابلیت های پرکاربرد جاوا اسکریپت آشنا کنیم و آن استفاده از پنجره های pop up یا همان پنجره های کوچک نمایش پیام است که در چهار دسته پنجره های هشدار (alert)، پنجره های تایید (confirm)، پنجره نمایش لینک (window.open) و پنجره های عکس العملی (prompt) دسته بندی می شوند.

پنجره pop up چیست؟

قبل از هر چیز باید ببینیم که پنجره pop up چیست و چه کاربردی دارد؟
pop up در برنامه نویسی وب به پنجره های کوچکی گفته می شود که به صورت خودکار یا با دخالت کاربر در مرورگر نمایش داده می شوند، به طور مثال ممکن است تبلیغات یا پیام های خوش آمدگویی و ... را در صفحات وب دیده باشید، اکثر آنها بر مبنای جاوا اسکریپت هستند، یعنی وقتی که صفحه بارگذاری می شود کد جاوا اسکریپت اجرا شده و پنجره به نمایش در می آید یا ممکن است این اتفاق با کلیک کاربر یا بردن ماوس روی یک عنصر مشخص رخ دهد، پنجره های pop up در دسته GUI ها یا با واسط کاربری گرافیکی (Graphical User Interface) دسته بندی می شوند، بدین معنی که قابلیت تعامل با رفتارهای کاربر را نیز دارا می باشند.

شروعی بر برنامه نویسی جاوا اسکریپت (Javascript)

یکی از زبان های انعطاف پذیر و در عین حال قدرتمندی که در کنار کدهای ساده HTML، مورد استفاده برنامه نویسان وب قرار می گیرد، جاوا اسکریپت (Javascript) است، البته شاید تصور شما از شنیدن عنوان کدهای جاوا اسکریپت بیشتر معطوف به کدهای کاربردی وبلاگ ها باشد، اما واقعیت این است که قدرت این زبان برنامه نویسی، خیلی بیشتر از نمودهای ظاهری است که می بینیم، بیشتر سایت ها و صفحات وب برای بررسی اعتبار فرم ها، ارتباط با سرور، شناسایی قابلیت های مرورگر کاربران، کار با کوکی ها (cookie) و خیلی چیزهای دیگر از آن استفاده می کنند، البته با همه این تفاسیر به دلیل سمت کاربر (Client side) بودن این زبان (یعنی جاوا اسکریپت تنها روی مرورگر کاربران قابل اجراست و برای تفسیر آن از مفسر مرورگر استفاده می شود نه مفسر سرور سایت)، در عین توانایی محدودیت هایی نیز وجود خواهد داشت.

شروع آموزش جاوا اسکریپت با یک مثال

برای شروع آموزش جاوا اسکریپت، بد نیست با هم یک مثال از قابلیت های این زبان اسکریپت نویسی را ملاحظه کنیم، در زیر یک کد ساده را جهت نمایش یک هشدار ایجاد کرده ایم:

کار با switch و case در جاوا اسکریپت (JavaScript)

اگر تا این لحظه از آموزش های مقدماتی برنامه نویسی با جاوا اسکریپت (JavaScript) همراه ما بوده باشید، حتما ملاحظه کرده اید که این زبان اسکریپت نویسی چقدر جالب و کاربردی است، اما اگر تصور می کنید که با دانستن مسائلی که تا کنون آموخته ایم، کار آموزش کدنویسی با جاوا اسکریپت به پایان رسیده، سخت در اشتباهید! برای اینکه بتوانیم به راحتی افکار و ایده هایمان را در بستر این زبان به مرورگر تفهیم کنیم، هنوز گام های زیادی باقی است و جزئیات بسیاری ناگفته مانده، اما جای نگرانی نیست، کافی است آهسته و پیوسته آموزش ها را دنبال کرده تا با هم این مسیر را به سلامت طی کنیم، در این مطلب نیز می خواهیم به یکی دیگر از مباحث، یعنی آشنایی با نحوه کار switch و case در جاوا اسکریپت بپردازیم.

دستور switch در جاوا اسکریپت (JavaScript)                                       

در بحث پیشین دیدیم که چگونه با if و else و ترکیب آنها یعنی elseif دستوراتی شرطی (Conditional Statements) را تعریف کنیم، همچنین با حلقه های for و while به کمک مثال هایی آشنا شدیم، اکنون می خواهیم ببینیم که دستور switch چه کاربردی در برنامه نویسی جاوا اسکریپت دارد.
به صورت ساده از دستور switch برای انتخاب موارد (case) گوناگون بر اساس درست شدن (true شدن) یک رابطه استفاده می شود، مثلا فرض کنید برای روزهایی که هوا بارانی است، از قفسه لباس های خود، کاپشن را برمی گزینیم و برای روزهای آفتابی و گرم، از لباسی پارچه ای استفاده می کنیم، یک دست لباس ساده نیز برای مواقعی که هوا نه گرم و نه سرد (معمولی) است داریم، کارکرد switch و case شباهت زیادی به این رفتار ما دارد، یعنی با توجه به شرایط بیرونی که برایش تعریف می کنیم، یکی از موارد (case) درون خود را به خروجی ارسال می کند، به مثال زیر توجه کنید.

رویداد ها (events) در جاوا اسکریپت (JavaScript)

یکی از قابلیت های بسیار مفید و کاربردی استفاده از جاوا اسکریپت (JavaScript) در طراحی صفحات و برنامه های تحت وب، واکنش های تعاملی آن متناسب با رفتار کاربر است، به فرض هنگامی که روی یک دکمه در صفحه ای کلیک می شود، می توان همزمان یا پس از آن، تابعی مبتنی بر جاوا اسکریپت را در سمت کاربر اجرا کرد و پیش از ارسال درخواست به سرور، پردازش های اولیه را بر روی آن انجام داد، این قدرت جاوا اسکریپت بیشتر متکی بر عناصری به نام رویداد (event) است که با وقوع آنها، عملیات تعریف شده خاصی در مرورگر اجرا می شود، در ادامه آموزش در این باره بیشتر خواهیم گفت.

معنی رویداد (event) در جاوا اسکریپت

به طور ساده رویداد (event) در برنامه نویسی جاوا اسکریپت به معنی اتفاقی در یک صفحه وب است که می تواند عامل آن، کاربر یا به فرض بارگذاری کامل یک صفحه باشد، بعد از بروز این اتفاق (رویداد)، مفسر جاوا اسکریپت مرورگر، آن را شناسایی کرده و متناسب با تابع تعریف شده، آن را اجرا می کند، لذا همانطور که پیش تر در بحث توابع (functions) دیدیم، رویدادها در واقع حکم استارت، برای موتور توابع را بازی می کنند و یک تابع بدون رویداد معمولا قابل اجرا نیست، برای آشنایی بیشتر به مثال زیر توجه کنید (کافی است کد را در یک صفحه html کپی و آن را تست کنید).

توابع (Functions) در جاوا اسکریپت (JavaScript)

معمولا در هر زبان برنامه نویسی، توابع (Functions) نقشی کلیدی در پیش برد اهداف برنامه نویس و تسهیل کدنویسی دارند، توابع به سان ماشین هایی هستند که هر بار با توجه به مواد اولیه، خروجی متفاوتی تولید می کنند، خوشبختانه این امر در جاوا اسکریپت (JavaScript) شباهت زیادی به دیگر زبان برنامه نویسی وب یعنی PHP دارد، این موضوع باعث می شود کاربرانی که با PHP آشنایی دارند، به راحتی بخش توابع در جاوا اسکریپت را فرا بگیرند، هر چند بهتر است ابتدا زبان های سمت کاربر را یاد بگیرید و سپس به برنامه نویسی سمت سرور بپردازید، به هر صورت در ادامه آموزش های مقدماتی جاوا اسکریپت، این بار به سراغ توابع رفته ایم.

تابع چیست و چه کاربردی دارد؟

اولین سوالی که ممکن است به ذهنتان برسد این است که اصلا تابع چیست و چه کاربردی دارد؟! پاسخ این است که توابع یا Functions بیشتر شبیه ماشین هایی هستند که با دستورالعملی ثابت، هر بار با توجه به ورودی که دریافت می کنند، خروجی متفاوت می دهند، مثلا در دنیای واقعی، دستگاه چاپی را تصور کنید، مسلما با توجه به رنگ ها، تنظیمات و داده هایی که تعیین می کنید، خروجی منحصر به فردی خواهید داشت! عملکرد توایع هم بی شباهت به این مثال نیست، در برنامه نویسی شرایطی پیش می آید که یک رفتار به تعداد خیلی زیاد ممکن است تکرار شود، مثلا یک فونت در صفحات مختلف تنظیم گردد، اگر بخواهیم هر بار تمام جزئیات را تک به تک برای هر صفحه بنویسیم، علاوه بر اینکه این کار وقت زیادی از ما می گیرد، باعث افزایش ضریب خطا و حجم صفحات می شود، از این رو، روش بهتر و حرفه ای تر آن است که یک بار الگویی را به شکل تابع بنویسیم و هر بار ورودی های متفاوت (یا مشابه) به آن بدهیم و خروجی دریافت کنیم.

حلقه for و while در جاوا اسکریپت (JavaScript)

اگر تا این مرحله، آموزش های مقدماتی بخش جاوا اسکریپت را دنبال کرده باشید، حتما با کلیاتی از آن آشنا شده اید، شیوه نگارش و دستورالعمل (syntax) آن را فراگرفته اید و قادر هستید یک کد ساده بنویسید و از آن خروجی بگیرید، در مطلب گذشته دیدیم که چگونه از مقایسه (Comparison) و شرط (If و Else) استفاده کنیم و تفکری که در ذهن داریم را در بستر مفسر جاوا اسکریپت پیاده سازی کنیم، حال در ادامه آموزش های مقدماتی می خواهیم شما را با عنصری دیگر به نام حلقه (loop) آشنا کنیم و با دو نوع پرکاربرد آن یعنی for و while به کمک مثالهایی، تمرین نمائیم.

حلقه های for و while در جاوا اسکریپت چه کاربردی دارند؟

اگر بخواهیم به زبان ساده کاربرد حلقه ها را توضیح دهیم، باید بگویم حلقه ها در زبان های برنامه نویسی (عموما) و به طور خاص در جاوا اسکریپت برای محاسبات تکراری با مقادیر متفاوت کاربرد دارند، مثلا اگر نمرات 100 دانش آموز را داشته باشیم و بخواهیم معدل آنها را حساب کنیم، به جای نوشتن کد برای تک تک آنها، یک کد به صورت حلقه می نویسیم و تنها در هر دور محاسبه، مقادیر را با نمرات و اسامی دانش آموزان جایگزین می کنیم؛ از لحاظ برنامه نویسی حلقه ها نیاز به یک شرط دارند و تا زمانی که آن شرط درست باشد (true باشد)، ادامه پیدا خواهند کرد، به عنوان نمونه، در مثالی که پیش تر ذکر شد، شرط می تواند این باشد: تا زمانی که (while) تعداد دانش آموزان به 100 نرسیده (100 > var) محاسبه را انجام بده.

حلقه for در جاوا اسکریپت (javascript for loop):

تعریف متغیرها، محاسبات و عملگرها در جاوا اسکریپت (javascript)

در مطلب گذشته از بخش آموزش مقدماتی جاوا اسکریپت (javascript)، خلاصه و کوتاه در مورد این زبان انعطاف پذیر و کاربردهای آن در صفحات وب (html) گفتیم و چند مثال را با هم بررسی کردیم؛ در این مطلب می خواهیم متغیرها، محاسبات، عملگرها و نکات کلی مورد نیاز جهت آشنایی و شروع کدنویسی جاوا اسکریپت را به کمک مثال با هم مرور کنیم، سعی کرده ایم که آموزش ها به ساده ترین و در عین حال کاربردی ترین شکل ممکن عنوان شوند تا از طرح مباحث خسته کننده و تکراری جلوگیری شود.

نکات کلی که باید بدانید:
- جاوا اسکریپت حساس به حروف بزرگ و کوچک است، یعنی به فرض متغیر var با Var از نظر مفسر این زبان متفاوت است.
- برای قرار دادن متن راهنما بین کدها از شیوه /*متن راهنما*/ یا متن راهنما// استفاده کنید.
- کدهای جاوا اسکریپت بین تگ head یا body قابل اجرا هستند و به صورت فایل خارجی نیز می توان آنها را ایمپورت کرد.
- جاوا اسکریپت زبانی سمت کاربر است، یعنی تنها روی مرورگر کاربران قابل پردازش و اجرا است.

آرایه (Array) در جاوا اسکریپت (JavaScript)

بحث آرایه ها در زبان های برنامه نویسی مخصوصا در برنامه نویسی وب از جمله شیرین ترین و در عین حال حساس ترین مباحث به شمار می آید، از طرفی استفاده از آرایه (Array) در برنامه نویسی های پیشرفته یک امر اجتناب ناپذیر است ولی به دلیل وجود ظرایف خاص، جزئیات و اینکه درک صحیح این قابلیت نیاز به فراگیری دقیق مقدمات آن دارد، می تواند در نگاه نخست مبحثی پیچیده و عجیب به نظر برسد؛ از این رو در ادامه آموزش های مقدماتی جاوا اسکریپت (JavaScript)، این بار به سراغ آرایه ها رفته ایم تا با هم، کمی بیشتر در دنیای جالب آن سیر کنیم.

آرایه (Array) چیست؟

آرایه در برنامه نویسی، به یک متغیر گفته می شود که درون خود، متغیرهایی زیر مجموعه با نام و مقادیر متفاوت دارد، به طور مثال دفترچه ای را در نظر بگیرید (آرایه) که تعدادی صفحه دارد (شماره هر صفحه = نام متغیرهای آرایه) و در هر صفحه، اطلاعاتی وجود دارد (مقادیر متغیرهای درون آرایه)، کارکرد آرایه ها نیز بی شباهت به این مثال نیست؛ توجه کنید که این سیستم به صورت از پیش تعریف شده (built-in یا درونی) در مفسر جاوا اسکریپت وجود دارد، یعنی نیازی نیست برای تفهیم کارکرد آرایه ها به مرورگر، تمام جزئیات را بنویسیم، اما لازم است که برای ایجاد و به کارگیری آرایه ها، اصول و قواعد خاصی را در رابطه با شیوه نگارش (syntax) آنها رعایت کنیم که در ادامه خواهیم گفت.

شیوه نگارش (syntax) آرایه در جاوا اسکریپت