ترفند 13 : نمایش تعاریف توابع یا Function definition یک المنت
همونطور که میدونید با استفاده از Javascript میتونیم برای المنتهای مورد نظر خودمون رویدادهای متنوعی رو ایجاد کنیم و هز زمان که اون رویداد به وقوع پیوست یک تابع اجرا میشه و کارهای مشخصی رو برامون انجام میده. شما میتونین با استفاده از Inspector رویدادهایی که برای یک المنت تعریف شدن رو ببینید. برای اینکار به سایت w3schools میریم و بر روی یکی از منوها کلیک راست کرده و Inspector رو انتخاب میکنیم.
با اینکار Inspector باز میشه و المنت مورد نظر برامون فعال هست:
حالا که این المنت فعال هست اگه به سمت راست Inspector نگاه کنیم، یک تب بنام Event Listeners وجود داره که در اونجا لیست همه رویدادهای تعریف شده برای المنت قرار گرفتن.
همونطور که دیدید 4 رویداد برای این المنت تعریف شده. بعنوان مثال اگر بر روی مثلث کناری رویداد Click کلیک کنیم تا باز بشه، بصورت زیر خواهد بود:
همونطور که دیدید اطلاعات مربوط به این رویداد به ما نمایش داده شده. حالا بر روی handler کلیک راست کرده و گزینه Show function definition رو انتخاب کنید:
با اینکار Inspector به صورت اتوماتیک شما رو به تب Sources میبره و جایی که این رویداد تعریف شده رو به شما نشون میده و اجزای اون رو به شما نمایش میده و میتونین بفهمید که با کلیک بر روی این المنت چه کارهایی انجام میشه:
این ترفند بعضی جاها خیلی میتونه بدردتون بخوره.
ترفند 14 : نمایش و دسترسی به جزئیات ویژگیهای CSS
همونطور که میدونید درون CSS میتونیم ویژگیهای رو بصورت مختصر یا Shorthand قرار بدیم. برای مثال فرض کنید که من میخام margin یک المنت رو برابر با 0 قرار بدم. برای اینکار به سادگی کد زیر رو قرار میدم:
.sample {
margin: 0;
}
این ویژگی رو بصورت مختصر قرار دادیم. دلیلش هم اینه که با اینکار حاشیه‌های چپ و راست و بالا و پایین المنت مورد نظر رو تنها با یک دستور 0 میکنیم، یعنی در واقع 4 کار رو یکجا انجام دادیم. اگر میخاستیم این 4 کار رو بصورت جداگانه قرار بدیم، باید بصورت زیر عمل میکردیم:
.sample {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
دیدید که بین حالت مختصر و کامل چه فرقایی هست. خیلی از ویژگیهای دیگه هم وجود دارن که چنین حالتی براشون صدق میکنه. در اینجا هم Inspector به کمک شما میاد و میتونین حالت مختصر نشده ویژگی‌ها رو مشاهده کنید. برای اینکار درون همون سایت بالا اگر ویژگیهای المنتها رو ببینید، بعضی از اونا یک مثلث در مقابلشون هست:
با کلیک بر روی این مثلث‌ها میتونین حالت خلاصه نشده این ویژگی رو مشاهده کنید:
دیدید که چه زیبا اینکار انجام میشه. همه ویژگی هایی که میشه اونا رو بصورت خلاصه نوشت، اینکار رو میشه براشون انجام داد. در پایین یک مثال پیشرفته‌تر بهتون نشون میدم:
دیدید که بصورت کامل اطلاعات خلاصه نشده ویژگی transition به شما نمایش داده شده و میتونین از اونا استفاده کنید.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !