تابع سفارشی در جاوا اسکریپت

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

تابع سفارشی در جاوا اسکریپت

سواد ابتدایی رایانه
درکی مقدماتی از HTML و CSS
آشنایی با مبانی اولیه جاوا اسکریپت و مطلب قبلی ما در مورد «مفهوم و کاربرد تابع در جاوا اسکریپت»
هدف این مقاله ارائه عملی مراحل نوشتن تابع‌های سفارشی و توضیح چند موضوع مفید مرتبط با این زمینه است.

با کلیک روی لینک زیر می‌توانید قسمت قبلی این مجموعه مطلب را مطالعه کنید:

مفهوم و کاربرد تابع در جاوا اسکریپت — به زبان ساده
یادگیری عملی: نوشتن اولین تابع سفارشی
ما قصد داریم در ادامه یک تابع سفارشی بنویسیم که آن را ()displayMessage می‌نامیم. این تابع یک کادر پیام سفارشی روی صفحه وب نمایش خواهد داد و به عنوان یک جایگزین سفارشی‌سازی شده برای تابع ()alert داخلی مرورگر عمل می‌کند. ما این تابع را قبلاً دیده‌ایم؛ اما یک بار دیگر آن را یادآوری می‌کنیم. کد زیر را در کنسول جاوا اسکریپت مرورگر وارد کنید:

alert(‘This is a message’);
تابع alert یک آرگومان می‌گیرد و آن رشته‌ای است که در کادر پیام نمایش خواهد یافت. با تغییر دادن این رشته می‌توانید متن پیام را عوض کنید. تابع alert محدود است و شما می‌توانید پیام را عوض کنید؛ اما نمی‌توانید به سادگی چیزهای دیگر مانند رنگ، آیکون، یا هر چیز دیگر را تغییر دهید. ما تابع نمایش پیامی می‌نویسیم که از تابع alert جذاب‌تر باشد.

دقت کنید که تابعی که ما می‌نویسیم در همه مرورگرهای مدرن به خوبی کار خواهد کرد؛ اما سبک‌بندی ظاهری آن ممکن است در برخی مرورگرهای قدیمی کمی دچار به‌هم‌ریختگی شود. توصیه می‌کنیم این تمرین را در مرورگر مدرنی مانند فایرفاکس، اپرا یا کروم اجرا کنید.

تابع ابتدایی
ابتدا کار خود را با طراحی یک تابع ابتدایی آغاز می‌کنیم.

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

برای طراحی یک تابع ابتدایی، در گام اول کد زیر را در فایلی به نام function-start.html روی سیستم خود قرار دهید:

Function start

Display message box

<script>

</script>

همان طور که می‌بینید کدهای HTML ساده هستند و تنها یک body با یک دکمه در آن تعریف شده است. همچنین برخی کدهای CSS در آن ارائه کرده‌ایم که ظاهر کادر پیام ما را تعیین می‌کند و یک عنصر خالی نیز وجود دارد که باید کد جاوا اسکریپت خود را در آن قرار دهیم.

سپس کد زیر را درون عنصر

اسکریپت های جالب در اسکریپت من