آموزش جاوا اسکریپت مبتدی : تابع خودتان را بسازید
با توجه به اینکه بیشتر مباحث تئوری ضروری در مقاله قبلی مورد بحث قرار گرفت، این مقاله تجربه عملی را ارائه میدهد. در اینجا شما میتوانید تمرینهایی برای ساخت تابع سفارشی خود داشته باشید. در طول مسیر، برخی از جزئیات مفید در مورد کار با توابع را نیز توضیح خواهیم داد.
تابع سفارشی که قرار است بسازیم نام دارد. این تابع یک کادر پیام سفارشی را در یک صفحه وب نمایش میدهد و به عنوان جایگزینی سفارشی برای تابع داخلی مرورگر عمل میکند. ما قبلاً این را دیدهایم، اما بیایید خاطراتمان را تازه کنیم. دستور زیر را در کنسول جاوا اسکریپت مرورگر خود، در هر صفحهای که دوست دارید، تایپ کنید:
تابع یک آرگومان واحد میگیرد - رشتهای که در کادر هشدار نمایش داده میشود. سعی کنید رشته را تغییر دهید تا پیام تغییر کند.
تابع محدود است: میتوانید پیام را تغییر دهید، اما نمیتوانید به راحتی چیزهای دیگری مانند رنگ، آیکون یا هر چیز دیگری را تغییر دهید. ما تابعی خواهیم ساخت که جالبتر باشد.
این مثال باید در همه مرورگرهای مدرن به خوبی کار کند، اما ظاهر آن ممکن است در مرورگرهای کمی قدیمیتر کمی خندهدار به نظر برسد. توصیه میکنیم این تمرین را در یک مرورگر مدرن مانند فایرفاکس، اپرا یا کروم انجام دهید.
برای شروع، بیایید یک تابع پایه بسازیم.
نکته: برای قراردادهای نامگذاری توابع، باید از همان قوانین قراردادهای نامگذاری متغیرها پیروی کنید. این خوب است، زیرا میتوانید آنها را از هم تشخیص دهید - نام توابع با پرانتز بعد از آنها ظاهر میشود، اما متغیرها اینطور نیستند.
با کپی کردن کد زیر به فایل و ایجاد یک کپی محلی شروع کنید. خواهید دید که HTML ساده است - بدنه فقط شامل یک دکمه است. ما همچنین مقداری CSS پایه برای استایلدهی به کادر پیام سفارشی و یک عنصر خالی برای قرار دادن جاوا اسکریپت خود ارائه دادهایم.
ما با کلمه کلیدی function شروع میکنیم، به این معنی که ما در حال تعریف یک تابع هستیم. به دنبال آن نامی که میخواهیم به تابع خود بدهیم، یک جفت پرانتز و یک جفت آکولاد قرار میگیرد. هر پارامتری که میخواهیم به تابع خود بدهیم، داخل پرانتز قرار میگیرد و کدی که هنگام فراخوانی تابع اجرا میشود، داخل آکولاد قرار میگیرد.
در مرحله بعد، موارد زیر را درون عنصر اضافه کنید:
این کد، کد نسبتاً زیادی است، بنابراین شما را قدم به قدم با آن آشنا میکنیم.
خط اول، عنصر را با استفاده از DOM API برای دریافت ویژگی body از شیء سند سراسری و اختصاص آن به ثابتی به نام body انتخاب میکند، بنابراین میتوانیم بعداً روی آن کارهایی انجام دهیم:
بخش بعدی از یک تابع DOM API به نام برای ایجاد یک عنصر و ذخیره ارجاعی به آن در ثابتی به نام panel استفاده میکند. این عنصر، محفظه بیرونی کادر پیام ما خواهد بود.
سپس از یک تابع DOM API دیگر به نام برای تنظیم یک ویژگی کلاس در پنل خود با مقدار msgBox استفاده میکنیم. این کار برای آسانتر کردن استایلدهی به عنصر است - اگر به CSS صفحه نگاه کنید، خواهید دید که ما از یک انتخابگر کلاس برای استایلدهی به کادر پیام و محتویات آن استفاده میکنیم.
در نهایت، یک تابع DOM به نام را روی ثابت body که قبلاً ذخیره کردیم، فراخوانی میکنیم که یک عنصر را درون عنصر دیگر به عنوان فرزند آن قرار میدهد. ما panel را به عنوان فرزندی که میخواهیم درون عنصر اضافه کنیم، مشخص میکنیم. ما باید این کار را انجام دهیم زیرا عنصری که ایجاد کردهایم به خودی خود در صفحه ظاهر نمیشود - باید مشخص کنیم که آن را کجا قرار دهیم.
دو بخش بعدی از همان توابع و که قبلاً دیدهایم برای ایجاد دو عنصر جدید - یک و یک - و قرار دادن آنها در صفحه به عنوان فرزندان پنل استفاده میکنند. ما از ویژگی آنها - که نشان دهنده محتوای متن یک عنصر است - برای قرار دادن یک پیام در داخل پاراگراف و یک "x" در داخل دکمه استفاده میکنیم. این دکمه همان چیزی است که وقتی کاربر میخواهد کادر پیام را ببندد، باید کلیک/فعال شود.
در نهایت، ما تابع را فراخوانی میکنیم تا تابعی اضافه کنیم که وقتی کاربر روی دکمه "بستن" کلیک میکند، فراخوانی شود. این کد کل پنل را از صفحه حذف میکند - تا کادر پیام بسته شود.
به طور خلاصه، متد را میتوان روی هر عنصری در صفحه فراخوانی کرد و معمولاً دو آرگومان به آن ارسال میشود: نام یک رویداد و یک تابع برای اجرا هنگام وقوع رویداد. در این حالت، نام رویداد click است، به این معنی که وقتی کاربر روی دکمه کلیک میکند، تابع اجرا میشود. در مقاله رویدادهای ما، اطلاعات بیشتری در مورد رویدادها خواهید آموخت. خط داخل تابع از متد برای مشخص کردن اینکه میخواهیم یک عنصر فرزند خاص از عنصر را حذف کنیم، استفاده میکند: در این حالت، پنل .
اساساً، کل این بلوک کد، بلوکی از HTML را تولید میکند که به این شکل است و آن را در صفحه قرار میدهد:
کد زیادی بود که باید روی آن کار میکردیم - اگر الان دقیقاً نحوهی کار هر بخش را به خاطر ندارید، زیاد نگران نباشید! بخش اصلی که میخواهیم در اینجا روی آن تمرکز کنیم، ساختار و کاربرد تابع است، اما میخواستیم نکتهی جالبی را در این مثال نشان دهیم.
اکنون تعریف تابع خود را به خوبی در عنصر نوشتهاید، اما در حالت عادی هیچ کاری انجام نمیدهد.
برای فراخوانی تابع، خط زیر را در زیر آن قرار دهید:
این خط تابع را فراخوانی میکند و باعث میشود بلافاصله اجرا شود. وقتی کد خود را ذخیره کرده و آن را در مرورگر بارگذاری مجدد میکنید، خواهید دید که کادر پیام کوچک بلافاصله، فقط یک بار، ظاهر میشود. ما فقط یک بار آن را فراخوانی میکنیم.
حالا ابزارهای توسعهدهنده مرورگر خود را در صفحه مثال باز کنید، به کنسول جاوا اسکریپت بروید و خط را دوباره در آنجا تایپ کنید، خواهید دید که دوباره ظاهر میشود! خب، این جالب است - اکنون یک تابع قابل استفاده مجدد داریم که میتوانیم هر زمان که دوست داریم آن را فراخوانی کنیم.
با این حال، احتمالاً میخواهیم کادر پیام در پاسخ به اقدامات کاربر و سیستم ظاهر شود. در یک برنامه واقعی، چنین کادر پیامی احتمالاً در پاسخ به در دسترس بودن دادههای جدید، یا بروز خطا، یا تلاش کاربر برای حذف نمایه خود ("آیا در مورد این مطمئن هستید؟")، یا اضافه کردن یک مخاطب جدید توسط کاربر و تکمیل موفقیتآمیز عملیات و غیره فراخوانی میشود.
در این نسخه آزمایشی، وقتی کاربر روی دکمه کلیک میکند، کادر پیام ظاهر میشود. در اینجا مراحلی که باید برای کار کردن این کار دنبال کنید، آمده است:
خط قبلی که اضافه کردید () را حذف کنید.
عنصر را انتخاب کنید و یک ارجاع به آن را در یک ثابت ذخیره کنید. خط زیر را به کد خود، بالای تعریف تابع، اضافه کنید:
یک شنونده رویداد برای کلیک دکمهها ایجاد کنید که تابع ما را فراخوانی کند. خط زیر را بعد از اضافه کنید:
مشابه با کنترلکننده رویداد کلیک closeBtn، در اینجا نیز در پاسخ به کلیک شدن یک دکمه، کدی را فراخوانی میکنیم. اما در این مورد، به جای فراخوانی یک تابع ناشناس حاوی کد، تابع خود را با نام فراخوانی میکنیم.
در نهایت، صفحه را ذخیره و رفرش کنید - اکنون باید ببینید که کادر پیام هنگام کلیک روی دکمه ظاهر میشود.
ممکن است تعجب کنید که چرا پرانتزها را بعد از نام تابع قرار ندادهایم. دلیل این امر این است که نمیخواهیم تابع را بلافاصله فراخوانی کنیم - فقط پس از کلیک روی دکمه. اگر سعی کنید خط را به
تغییر دهید و با ذخیره و بارگذاری مجدد، خواهید دید که کادر پیام بدون کلیک روی دکمه ظاهر میشود! پرانتزها در این زمینه گاهی اوقات "عملگر فراخوانی تابع" نامیده میشوند. شما فقط زمانی از آنها استفاده میکنید که میخواهید تابع را فوراً در محدوده فعلی اجرا کنید. به همین ترتیب، کد داخل تابع ناشناس فوراً اجرا نمیشود، زیرا داخل محدوده تابع است.
اگر آخرین آزمایش را انجام دادید، قبل از ادامه، مطمئن شوید که آخرین تغییر را لغو کردهاید.
در حال حاضر، این تابع هنوز خیلی مفید نیست - ما نمیخواهیم هر بار فقط همان پیام پیشفرض را نشان دهیم. بیایید با اضافه کردن چند پارامتر، تابع خود را بهبود بخشیم تا بتوانیم آن را با گزینههای مختلفی فراخوانی کنیم.
اول از همه، خط اول تابع را بهروزرسانی کنید:
حالا وقتی تابع را فراخوانی میکنیم، میتوانیم دو مقدار متغیر را درون پرانتز قرار دهیم تا پیامی که قرار است در کادر پیام نمایش داده شود و نوع پیام را مشخص کنیم.
برای استفاده از پارامتر اول، خط زیر را درون تابع خود بهروزرسانی کنید:
در آخر، حالا باید فراخوانی تابع خود را بهروزرسانی کنید تا متن پیام بهروزرسانیشده را نیز شامل شود. خط زیر را تغییر دهید:
اگر بخواهیم پارامترهایی را درون پرانتز برای تابعی که فراخوانی میکنیم مشخص کنیم، نمیتوانیم آن را مستقیماً فراخوانی کنیم - باید آن را درون یک تابع ناشناس قرار دهیم تا در محدودهی بیواسطه نباشد و بنابراین فوراً فراخوانی نشود. اکنون تا زمانی که دکمه کلیک نشود، فراخوانی نخواهد شد.
کد را مجدداً بارگذاری کنید و دوباره امتحان کنید و خواهید دید که هنوز هم به خوبی کار میکند، با این تفاوت که اکنون میتوانید پیام درون پارامتر را نیز تغییر دهید تا پیامهای مختلفی در کادر نمایش داده شوند!
به پارامتر بعدی میپردازیم. این مورد کمی کار بیشتری میطلبد - ما آن را طوری تنظیم میکنیم که بسته به اینکه پارامتر msgType روی چه مقداری تنظیم شده باشد، تابع یک آیکون متفاوت و یک رنگ پسزمینه متفاوت نمایش دهد.
اول از همه، آیکونهای مورد نیاز برای این تمرین (هشدار و چت) را از منبع مدنظر خود دانلود کنید. آنها را در یک پوشه جدید به نام icons در همان محل فایل HTML خود ذخیره کنید.
سپس، CSS را در داخل فایل HTML خود پیدا کنید. ما چند تغییر ایجاد خواهیم کرد تا جای آیکونها را باز کنیم. ابتدا، عرض را از این بهروزرسانی کنید
سپس، خطوط زیر را درون قانون اضافه کنید:
حالا باید کدی را به تابع اضافه کنیم تا نمایش آیکونها را مدیریت کند. بلوک زیر را درست بالای آکولاد بسته (}) تابع خود اضافه کنید:
در اینجا، اگر پارامتر msgType به عنوان "warning" تنظیم شود، آیکون هشدار نمایش داده میشود و رنگ پسزمینه پنل به قرمز تنظیم میشود. اگر به "chat" تنظیم شود، آیکون چت نمایش داده میشود و رنگ پسزمینه پنل به آبی فیروزهای تنظیم میشود. اگر پارامتر msgType اصلاً تنظیم نشده باشد (یا به مقدار متفاوتی تنظیم شده باشد)، بخش از کد وارد عمل میشود و به پاراگراف padding پیشفرض و بدون آیکون داده میشود و رنگ پسزمینه پنل نیز تنظیم نمیشود. این حالت پیشفرض را در صورت عدم ارائه پارامتر msgType ایجاد میکند، به این معنی که این یک پارامتر اختیاری است!
بیایید تابع بهروزرسانیشده خود را آزمایش کنیم، سعی کنید فراخوانی را از این بهروزرسانی کنید:
میبینید که تابع کوچک ما (که حالا دیگر خیلی هم کوچک نیست) چقدر مفید شده است.
