وب

بررسی توابع جاوا اسکریپت

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

بررسی توابع و کاربرد های آن ها

حتما نام توابع را بسیار شنیده اید به خصوص در دوران مدرسه و درس شیرین ریاضیات احتمالا با مفاهیم به اسم تابع آشنا شده اید. اما اگر بخواهیم به زبان ساده توابع را توضیح دهیم می توانیم آن ها را مانند یک فرمول در نظر بگیرید که با توجه به متغیر های داده شده به آن نتایج متفاوتی را نشان می دهد. برنامه ها ای که توسط برنامه نویسان نوشته می شود معمولا برای کاربرد های مختلفی است و در آن ممکن است یک رفتار هزاران بار تکرار شود. مثلا اگر بخواهید رنگ نوار ها را برای همه صفحات تنظیم کنید لازم نیست که برای هر صفحه تک تک جزئیات را تعیین کنید. برای این کار کافی است که یک تابع تعریف کنید و بر اساس متغیر های ورودی که به آن می دهید خروجی های مختلفی دریافت کنید.

نحوه استفاده از توابع جاوا اسکریپت در کد نویسی

برای ایجاد یک تابع عبارات با functions تعریف می شوند و مقادیر ورودی یا آرگومان ها را می پذیرند. اما همه چیز به سادگی همین یک خط توضیح نیست. برای کار با توابع نیاز به تمرین و کسب تجربه دارید. به همین دلیل ما از یک مثال ساده برا تعریف یکی از توابع جاوا اسکریپت استفاده کرده ایم. به این مثال و نحوه نگارش توابع در آن دقت کنید:

نام تابع ما username است. دقت کنید ما در این جا سعی کردیم از دو آرگومان فرضی برای تعیین نام کاربر و نام کشور او استفاده کرده ایم.  همانطور که می دانید var نشان دهنده متغیر های این تابع است. سه متغیر name، country و output برای این تابع تعیین شده اند.

یکی از نکاتی که باید به آن دقت کنید دستور document.write است. یکی از نکات مهم توابع جاوا اسکریپت این است که حتما باید به صورت رویداد یا events فراخوانی شوند در غیر این صورت کارایی ندارند و در صفحه هیچ عکس العملی را ایجاد نمی کنند. برای بهتر متوجه شدن این موضوع بهتر است با نحوه فراخوانی توابع در جاوا اسکریپت آشنا شوید.

چگونگی فراخوانی توابع جاوا اسکریپت

توابع جاوا اسکریپت باید به صورت رویداد فراخوانی شوند در غیر این صورت کاربردی ندارند. اما رویداد چیست؟ رویداد حالتی است که تعیین کننده نقطه استارت اجرای تابع است. زمانی که شما وارد یک سایت یا صفحه می شوید شروع به کلیک کردن و بارگزاری صفحات مختلف نوشتن کامنت یا  دیدن فیلم ها و عکس ها می کنید. هر کدام از این کار ها به عنوان یک رویداد در نظر گرفته می شود.

برنامه نویسان با استفاده از رویداد ها به مرورگر اعلام می کنند که توابع جاوا اسکریپت مربوطه را اجرا کند. تا زمانی که رویدادی رخ ندهد یا رویدادی برای یک تابع تعیین نشده باشد توابع جاوا اسکریپت هیچ کاری را در صفحه انجام نمی دهند. اگر با توضیحات داده شده مفهوم رویداد و نحوه فراخوانی توابع جاوا اسکریپت به صورت کامل برای شما مشخص نشده است بهتر است به مثال بعدی ما توجه کنید.

ما در این مثال از یک رویداد onclick برای فراخوانی تابع خود استفاده کرده ایم. Onclick بودن به این معنا است که زمانی این تابع اجرا می شود که بر روی متن” برای دیدن نحوه عملکرد تابع در جاوا اسکریپت، کنید” کلیک کنید. بعد از کلیک شما بر روی این متن تابع حاصل جمع عدد های ۳و۶ را به شما نشان خواهد داد. این رویداد یکی از پرکاربرد ترین رویداد ها در دنیای برنامه نویسی وب است. برای آشنا شدن با یکی دیگر از رویداد های پرکاربرد از مثال زیر استفاده کرده ایم :

در این مثال ما از یکی دیگر از رویدادها پرکاربرد برای توابع جاوا اسکریپت استفاده کرده ایم. رویداد onload به بارگذاری صفحات مربوط است. به این ترتیب شما به مرورگر می گویید زمانی که کاربر صفحه را load یا بارگذاری کرد یک پیام را به نمایش در آورد.

جمع بندی

توابع جاوا اسکریپت حجم عظیمی از وظایف مختلف را به دوش می کشند. این توابع از طرفی به برنامه نویسان وب کمک کرده اند تا کار ها را سریع تر و بهتر انجام دهند و از سوی دیگر سایت ها را کاربر پسند تر و کاربردی تر کرده اند. تمرین و کسب تجربه در استفاده از این توابع شما را به افراد حرفه ای تبدیل خواهد کرد.

 

منبع : طراحی سایت

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید
بستن
دکمه بازگشت به بالا