با توجه به بسیاری از نظریه های اساسی که در مقاله قبلی به آنها پرداخته شد، این مقاله تجربه عملی را ارائه می دهد. در اینجا تمرینی برای ایجاد تابع سفارشی خود خواهید داشت. در طول راه، ما همچنین برخی از جزئیات مفید از برخورد با توابع را توضیح خواهیم داد.
پیش نیازها: سواد اولیه کامپیوتر، درک اولیه HTML و CSS، اولین مراحل جاوا اسکریپت، توابع “بلوک های کد قابل استفاده مجدد”.
هدف: ارائه تمرین در ساخت یک تابع سفارشی، و توضیح چند جزئیات مفید مرتبط.
Table of Contents
یادگیری فعال: بیایید یک تابع بسازیم
تابع سفارشی که می خواهیم بسازیم، ()displayMessage نامیده می شود. این یک جعبه پیام سفارشی را در یک صفحه وب نمایش می دهد و به عنوان یک جایگزین سفارشی برای تابع ()alert یک مرورگر عمل می کند. ما قبلاً این را دیده‌ایم، اما بیایید فقط خاطرات خود را تازه کنیم. موارد زیر را در کنسول جاوا اسکریپت مرورگر خود در هر صفحه ای که دوست دارید تایپ کنید:
alert(‘This is a message’);
تابع ()alert یک آرگومان واحد می گیرد ؛ رشته ای که در کادر هشدار نمایش داده می شود. سعی کنید رشته را تغییر دهید تا پیام را تغییر دهید.
عملکرد تابع ()alert محدود است: شما می توانید پیام را تغییر دهید، اما نمی توانید به راحتی چیز دیگری مانند رنگ، نماد یا هر چیز دیگری را تغییر دهید. ما یکی را خواهیم ساخت که نشان می دهد سرگرم کننده تر است.
توجه:این مثال باید در همه مرورگرهای مدرن به خوبی کار کند، اما یک ظاهر طراحی شده ممکن است در مرورگرهای کمی قدیمی‌تر کمی خنده‌دار به نظر برسد. توصیه می کنیم این تمرین را در یک مرورگر مدرن مانند فایرفاکس، اپرا یا کروم انجام دهید.
تابع پایه (basic)
برای شروع، اجازه دهید یک تابع اصلی را با هم قرار دهیم.
توجه: برای قراردادهای نامگذاری توابع، باید از همان قوانین نامگذاری متغیرها پیروی کنید. این خوب است، همانطور که می توانید آنها را از هم جدا کنید – نام توابع با پرانتز بعد از آنها ظاهر می شوند و متغیرها اینطور نیستند.
1.با دسترسی به فایل function-start.html و ایجاد یک کپی محلی شروع کنید. خواهید دید که HTML ساده است – بدنه فقط یک دکمه دارد. ما همچنین چند CSS اولیه برای استایل دادن به جعبه پیام سفارشی و یک عنصر خالی <script> برای قرار دادن جاوا اسکریپت خود ارائه کرده ایم.
2.سپس موارد زیر را در عنصر <script> اضافه کنید:
function displayMessage() {
}
ما با کلمه کلیدی function شروع می کنیم، به این معنی که ما در حال تعریف یک تابع هستیم. پس از آن نامی که میخواهیم به تابع خود بدهیم، مجموعه‌ای از پرانتز و مجموعه‌ای از بریس‌های فرفری آمده است. هر پارامتری که بخواهیم به تابع خود بدهیم داخل پرانتز می رود و کدی که هنگام فراخوانی تابع اجرا می شود داخل پرانتزهای فرفری می رود.
۳.در نهایت کد زیر را داخل بریس های فرفری اضافه کنید:
const body = document.body;
const panel = document.createElement(‘div’);
panel.setAttribute(‘class’,‘msgBox’);
body.appendChild(panel);
const msg = document.createElement(‘p’);
msg.textContent = ‘This is a message box’;
panel.appendChild(msg);
const closeBtn = document.createElement(‘button’);
closeBtn.textContent = ‘x’;
panel.appendChild(closeBtn);
closeBtn.addEventListener(‘click’, () => panel.parentNode.removeChild(panel));
این کد بسیار زیادی است که باید مرور کنید، بنابراین شما را ذره ذره با آن آشنا خواهیم کرد.
خط اول عنصر <body> را با استفاده از DOM API برای دریافت ویژگی <body> شیء و document سراسری و نسبت دادن آن به ثابتی به نام body انتخاب می‌کند، بنابراین می‌توانیم کارهایی را برای آن انجام دهیم:
const body = document.body;
بخش بعدی از یک تابع API DOM به نام ()document.createElement برای ایجاد یک عنصر <div> و ذخیره ارجاع به آن در یک پانل ثابت به نام استفاده می کند. این عنصر محفظه بیرونی جعبه پیام ما خواهد بود.
سپس از یک تابع DOM API دیگر به نام ()Element.setAttribute برای تنظیم یک ویژگی کلاس در پنل خود با مقدار msgBox استفاده می کنیم. این برای آسان‌تر کردن استایل دادن به عنصر است – اگر به CSS در صفحه نگاه کنید، خواهید دید که ما از یک انتخابگر کلاس msgBox برای استایل دادن به جعبه پیام و محتوای آن استفاده می‌کنیم.
در نهایت، یک تابع DOM به نام ()Node.appendChild را روی ثابت بدنه ای که قبلاً ذخیره کرده بودیم، فراخوانی می کنیم که یک عنصر <div> را به عنوان فرزند آن در داخل عنصر دیگر قرار می دهد. پانل <div> را به عنوان فرزندی که می خواهیم در عنصر <body> اضافه کنیم، مشخص می کنیم. ما باید این کار را انجام دهیم زیرا عنصری که ایجاد کردیم به تنهایی در صفحه ظاهر نمی شود – باید مشخص کنیم که آن را کجا قرار دهیم.
const panel = document.createElement(‘div’);
panel.setAttribute(‘class’, ‘msgBox’);
body.appendChild(panel);
دو بخش بعدی از همان توابع ()createElement و ()appendChild استفاده می کنند که قبلاً دیده بودیم برای ایجاد دو عنصر جدید،یک <p> و یک <button> ،و آنها را به عنوان فرزندان پانل < div> در صفحه قرار می دهیم. ما از ویژگی Node.textContent آنها که محتوای متنی یک عنصر را نشان می دهد، برای درج یک پیام در داخل پاراگراف و از یک “x” در داخل دکمه استفاده می کنیم. این دکمه همان چیزی است که وقتی کاربر می‌خواهد کادر پیام را ببندد باید روی آن clicked/activated شود.
const msg = document.createElement(‘p’);
msg.textContent =‘This is a message box’;
panel.appendChild(msg);
const closeBtn = document.createElement(‘button’);
closeBtn.textContent = ‘x’;
panel.appendChild(closeBtn);
در نهایت، ()addEventListener را فراخوانی می کنیم تا تابعی را اضافه کنیم که با کلیک کاربر روی دکمه “close” فراخوانی شود. این کد کل پانل را از صفحه حذف می کند تا کادر پیام بسته شود.
به طور خلاصه، متد ()addEventListener توسط دکمه (یا در واقع هر عنصر در صفحه) ارائه می شود که می توان یک تابع و نام یک رویداد را ارسال کرد. در این مورد، نام رویداد ‘click’ است، به این معنی که وقتی کاربر روی دکمه کلیک می کند، عملکرد اجرا می شود.خط داخل تابع از تابع Node.removeChild() DOM API استفاده می کند تا مشخص کند که ما می خواهیم یک عنصر فرزند خاص از عنصر HTML را حذف کنیم ، در این مورد، منظور پانل <div> است.
closeBtn.addEventListener(‘click’, () => panel.parentNode.removeChild(panel));
اساساً، کل این بلوک کد، یک بلوک از HTML را تولید می کند که شبیه به آن است و آن را در صفحه قرار می دهد:
<divclass=”msgBox“>
<p>This is a message box</p>
<button>x</button>
</div>
این کدهای زیادی بود که باید از طریق آن کار کنید؛اگر دقیقاً یادتان نمی‌آید که تک تک بیت‌ها در حال حاضر چگونه کار می‌کنند، زیاد نگران نباشید! بخش اصلی که ما می خواهیم در اینجا بر روی آن تمرکز کنیم، ساختار و کاربرد تابع است، اما می خواهیم چیز جالبی را برای این مثال نشان دهیم.
فراخوانی تابع
شما اکنون تعریف تابع خود را به خوبی در عنصر <script> خود نوشته اید،اما هیچ کاری را همانطور که هست انجام نمی دهد.
۱.سعی کنید برای فراخوانی آن، خط زیر را در زیر تابع خود وارد کنید:
displayMessage();
این خط تابع را فراخوانی می کند و آن را بلافاصله اجرا می کند. هنگامی که کد خود را ذخیره می کنید و آن را مجدداً در مرورگر بارگذاری می کنید، کادر پیام کوچک را بلافاصله و فقط یک بار خواهید دید. ما فقط یک بار با آن تماس می گیریم.
۲.حالا ابزارهای توسعه دهنده مرورگر خود را در صفحه مثال باز کنید، به کنسول جاوا اسکریپت بروید و دوباره خط را در آنجا تایپ کنید، دوباره خواهید دید که ظاهر می شود! بنابراین این سرگرم کننده است ؛ ما اکنون یک عملکرد قابل استفاده مجدد داریم که می توانیم هر زمان که بخواهیم آن را صدا کنیم. اما احتمالاً می خواهیم که در پاسخ به اقدامات کاربر و سیستم ظاهر شود.
در یک برنامه واقعی، چنین باکس پیامی احتمالاً در پاسخ به در دسترس بودن داده های جدید، یا خطای رخ داده، یا تلاش کاربر برای حذف نمایه خود (“آیا در این مورد مطمئن هستید؟”) یا کاربر در حال افزودن آن فراخوانی می شود. یک مخاطب جدید و عملیات با موفقیت به پایان می رسد، و غیره. در این نسخه نمایشی، زمانی که کاربر روی دکمه کلیک می کند، کادر پیام ظاهر می شود.
۳.خط قبلی را که اضافه کردید حذف کنید.
۴.در مرحله بعد، دکمه را انتخاب می کنیم و یک مرجع به آن را در یک ثابت ذخیره می کنیم. خط زیر را در بالای تعریف تابع به کد خود اضافه کنید:
const btn = document.querySelector(‘button’);
۵.در نهایت خط زیر را زیر خط قبلی اضافه کنید:
btn.addEventListener(‘click’,displayMessage);
به روشی مشابه با کنترل کننده رویداد کلیک ما در closeBtn، در اینجا ما در پاسخ به کلیک روی دکمه ای، کدی را فراخوانی می کنیم. اما در این مورد، به جای فراخوانی یک تابع ناشناس حاوی مقداری کد، تابع ()displayMessage خود را با این نام فراخوانی می کنیم.
۶.
سعی کنید صفحه را ذخیره و بازخوانی کنید – اکنون با کلیک روی دکمه، کادر پیام ظاهر می شود.
شاید تعجب کنید که چرا پرانتزها را بعد از نام تابع قرار نداده ایم. این به این دلیل است که ما نمی خواهیم عملکرد را فوراً فراخوانی کنیم،میخواهیم فقط پس از کلیک روی دکمه فراخوانی شود. اگر سعی کنید خط را تغییر دهید به:
btn.addEventListener(‘click’, displayMessage());
و با ذخیره و بارگذاری مجدد، خواهید دید که جعبه پیام بدون کلیک روی دکمه ظاهر می شود! پرانتز در این زمینه گاهی اوقات “عملگر فراخوانی تابع” نامیده می شود. شما فقط زمانی از آنها استفاده می کنید که بخواهید فوراً تابع را در محدوده فعلی اجرا کنید. در همین راستا، کد داخل تابع ناشناس بلافاصله اجرا نمی شود، زیرا در محدوده تابع قرار دارد.
اگر آخرین آزمایش را امتحان کردید، حتماً قبل از ادامه آخرین تغییر را لغو کنید.
بهبود عملکرد با پارامترها
همانطور که وجود دارد، این تابع هنوز خیلی مفید نیست – ما نمی خواهیم فقط یک پیام پیش فرض را هر بار نشان دهیم. بیایید عملکرد خود را با افزودن برخی پارامترها بهبود بخشیم و به ما امکان می دهد آن را با چند گزینه مختلف فراخوانی کنیم.
۱. اول از همه، خط اول تابع را به روز کنید:
function displayMessage() {
به این:
function displayMessage(msgText, msgType) {
اکنون وقتی تابع را فراخوانی می کنیم، می توانیم دو مقدار متغیر را در داخل پرانتز قرار دهیم تا پیامی که باید در کادر پیام نمایش داده شود و نوع پیام آن را مشخص کنیم.
۲.برای استفاده از پارامتر اول، خط زیر را در داخل تابع خود به روز کنید:
msg.textContent = ‘This is a message box’;
به
msg.textContent = msgText;
آخرین اما نه کم‌اهمیت، اکنون باید فراخوانی تابع خود را به‌روزرسانی کنید تا متن پیام به‌روز شده را در خود داشته باشد. خط زیر را تغییر دهید:
btn.addEventListener(‘click’, displayMessage);
به این بلوک:
btn.addEventListener(‘click’, ()=>displayMessage(‘Woo, this is a different message!’));
اگر بخواهیم پارامترهایی را در داخل پرانتز برای تابعی که فراخوانی می‌کنیم مشخص کنیم، نمی‌توانیم آن را مستقیماً فراخوانی کنیم – باید آن را در یک تابع ناشناس قرار دهیم تا در محدوده فوری قرار نگیرد و بنابراین بلافاصله فراخوانی نشود.حالا تا زمانی که دکمه کلیک نشود، فراخوانی نمی شود.
۴.دوباره بارگذاری کنید و دوباره کد را امتحان کنید و خواهید دید که همچنان به خوبی کار می کند، با این تفاوت که اکنون می توانید پیام داخل پارامتر را نیز تغییر دهید تا پیام های مختلف در کادر نمایش داده شود!
یک پارامتر پیچیده تر
به پارامتر بعدی بروید این یکی قرار است کمی کار بیشتری را شامل شود، ما آن را به گونه‌ای تنظیم می‌کنیم که بسته به اینکه پارامتر msgType روی چه چیزی تنظیم شده است، عملکرد نماد متفاوت و رنگ پس‌زمینه متفاوتی را نمایش دهد.
1.ابتدا آیکون های مورد نیاز این تمرین (اخطار و چت) را از گیت هاب دانلود کنید. آنها را در یک پوشه جدید به نام icons در همان مکان فایل HTML خود ذخیره کنید.
2.سپس CSS را در داخل فایل HTML خود پیدا کنید. ما چند تغییر ایجاد می کنیم تا راه را برای نمادها باز کنیم. ابتدا عرض msgBox. را از این آدرس به روز کنید:
width:200px;
به
width:242px;
3.سپس، خطوط زیر را داخل قانون { } msgBox p. اضافه کنید:
padding-left: 82px;
background-position: 25px center;
background-repeat: no-repeat;
4.اکنون باید کدی را به تابع ()displayMessage خود اضافه کنیم تا بتوانیم آیکون ها را نمایش دهیم. بلوک زیر را درست بالای بند بسته شدنِ ({) تابع خود اضافه کنید:
if(msgType === ‘warning’) {
msg.style.backgroundImage = ‘url(icons/warning.png)’;
panel.style.backgroundColor = ‘red’;
} else if (msgType ===‘chat’) {
msg.style.backgroundImage =‘url(icons/chat.png)’;
panel.style.backgroundColor =‘aqua’;
} else {
msg.style.paddingLeft = ’20px’;
}
در اینجا، اگر پارامتر msgType به عنوان ‘warning’ تنظیم شود، نماد هشدار نمایش داده می شود و رنگ پس زمینه پانل روی قرمز تنظیم می شود. اگر روی “chat” تنظیم شده باشد، نماد چت نمایش داده می شود و رنگ پس زمینه پانل روی آبی تنظیم می شود. اگر پارامتر msgType به هیچ وجه تنظیم نشده باشد (یا روی چیزی متفاوت باشد)، سپس قسمت { } else کد وارد عمل می شود، و به پاراگراف یک بالشتک پیش فرض داده می شود و آیکونی ندارد، بدون اینکه رنگ پانل پس زمینه تنظیم شذه باشد. اگر پارامتر msgType ارائه نشده باشد، این یک حالت پیش‌فرض را فراهم می‌کند، به این معنی که یک پارامتر اختیاری است!
5.بیایید تابع به روز شده خود را آزمایش کنیم، سعی کنید فراخوانی ()displayMessage را از این طریق به روز کنید:
displayMessage(‘Woo, this is a different message!’);
به یکی از این موارد:
displayMessage(‘Your inbox is almost full — delete some mails’, ‘warning’);
displayMessage(‘Brian: Hi there, how are you today?’,‘chat’);
می توانید ببینید که عملکرد کوچک ما (حالا نه چندان مفید) چقدر مفید است.
در پایان
شما به پایان این مقاله رسیده اید، اما آیا می توانید مهمترین اطلاعات را به خاطر بسپارید؟ میتوانید آزمایش‌های بیشتری برای تأیید اینکه این اطلاعات را قبل از ادامه کار حفظ کرده‌اید پیدا کنید – به تست مهارت‌های خود: عملکردها مراجعه کنید. این آزمون‌ها به مهارت‌هایی نیاز دارند که در مقاله بعدی به آنها پرداخته می‌شود، بنابراین بهتر است قبل از امتحان کردن، ابتدا آن را بخوانید.
تبریک به شما برای رسیدن به پایان این مقاله! این مقاله شما را در کل فرآیند ایجاد یک عملکرد سفارشی عملی، که با کمی کار بیشتر می‌تواند به یک پروژه واقعی تبدیل شود، هدایت کرد. در مقاله بعدی، توابع را با توضیح یکی دیگر از مفاهیم ضروری مرتبط – مقادیر بازگشتی، جمع بندی می کنیم.
شما همراه میتوانید با ما در تماس باشید.منتظر نظرات شما هستیم!