درس پنجم- آبجکتها
از آنجا که زبان برنامه نویسی جاوا اسکریپت یک زبان آبجکت گرا (Object Oriented) می‌باشد پیش از فرو رفتن بیشتر به مفاهیم عمومی برنامه نویسی، کمی با این ویژگی (آبجکت گرایی) جاوا اسکریپت آشنا می‌شویم. به همین خاطر درس پنجم را به شرح مفاهیم آبجکت گرایی جاوا اسکریپت و دیگر متعلقاتش از قبیل رویداد، متد و... اختصاص می‌دهیم.
آبجکت (شی) Objects
ما در زندگی روزمره خود با مفهوم آبجکت آشنایی کامل داریم و هر روزه در اطرف خود از این آبجکتها استفاده می‌کنیم. برای توضیح ساده این مفهوم معمولا از نمونه ماشین استفاده می‌شود. بله همان ماشینی که هر روز از آن برای رفت و آمد استفاده می‌کنیم یک نمونه کامل از آبجکت است. هر آبجکت دارای دو فاکتور مهم است؛ ویژگی‌ها (Properties) و متد‌ها .(Methods) اگر ماشین را یک آبجکت در نظر بگیریم، رنگ، مدل، وزن و نام آن را می‌توانیم به عنوان ویژگی‌های آن بر شمریم، و برای متدهای آن به روشن کردن، راندن و ترمز کردن اشاره می‌کنیم. همه ماشین‌ها دارای این ویژگی‌ها و متد‌ها هستند اما مقادیر و عملکرد آنها ماشین به ماشین متفاوت است.
آبجکت در دنیای برنامه نویسی جاوا اسکریپت در اصل مفهومی است که کاربرد آن همانند متغییر در نگهداری داده‌ها تعریف شده است. این یعنی آبجکت متغیری است دارای دو فاکتور «ویژگی‌ها» و «متد‌ها» (متد‌ها در اصل همان توابع هستند منتها در اینجا با نام متد استفاده می‌شوند). داشتن این دو فاکتور این اجازه را به آبجکتها می‌دهد تا هم مقادیر بیشتری از داده‌ها و هم انواع مختلف از آنها را نگه داری کنند. ویژگی‌های هر آبجکت مقادیری هستند که به آن آبجکت منتسب می‌شوند و متد‌هایش عمل‌هایی هستند که آن آبجکت قادر به انجام آنها می‌باشد. برای نمونه ماشین قرمز سفید را در نظر بگیرید. این ماشین دارای ویژگی «سفید» و متد «ترمز کردن» است.
ساختن و استفاده کردن از آبجکت به این ترتیب است که ابتدا ما نیاز به تهیه یک الگو داریم. مانند الگوی ساخت یک خودرو –می‌توانیم به آن نقشه هم بگوییم- که با استفاده از آن خودرو را می‌سازیم. بعد از داشتن الگو می‌توانیم نمونه‌هایی از روی آن تهیه کنیم، درست مانند شرکت‌های خودرو سازی که ابتدا الگوی خودرو را فراهم کرده و بعد از روی آن خودرو‌ها (آبجکتها) را می‌سازند. در برنامه نویسی آبجکت گرا (مانند جاوا اسکریپت) از این مفهوم استفاده شده و آن را پیاده می‌کنیم. یعنی ابتدا یک الگو ساخته و بعد از روی آن الگو آبجکت (نمونه)هایی را می‌سازیم.
نکته: درک مفهوم برنامه نویسی آبجکت گرا برای کسانی که برای بار نخستین بار آن روبرو می‌شوند کمی دشوار به نظر می‌رسد اما ما به شما قول می‌دهیم که با پیاده سازی این تکنیک بهمراه چند نمونه، یادگیری آن را بسیار ساده و شیرین خواهید یافت.
نکته: همه چیز در جاوا اسکریپت یک آبجکت است. در طول دوره، این مهم برایتان روشن خواهد شد.
تصویر زیر نمایان گر یک آبجکت (خودرو) بهمراه ویژگی‌ها و متد‌هایش است.
تصویر از w3schools
تقریبا همه چیز در جاوا اسکریپت را می‌توان یک آبجکت نامید؛ توابع، رشته‌ها، آرایه‌ها، تاریخ و غیره. در جاوا اسکریپت دو نوع آبجکت وجود دارد یکی آنهایی که بطور پیش فرض (Built-in) در آن از پیش ساخته شده است و دیگری آبجکتهایی که ما به عنوان برنامه نویس می‌سازیم. از نمونه آبجکتهایی از پیش ساخته شده می‌توانیم به تاریخ (Date) یا رشته اشاره کنیم. در نمونه کدهای زیر ما از ویژگی length که متعلق به آبجکت «رشته» است استفاده می‌کنیم.
<!DOCTYPE html>
<html> <head> </head>
<body>
<script>
var msg = prompt(" لطف کنید نام خود را وارد کنید ");
var x = msg.length ;
alert (" نام شما دارای " + x + " حرف است " );
</script>
</body> </html>
آبجکتهای از پیش ساخته شده
همانطور که در قسمت پیشین گفتیم آبجکتها در جاوا اسکریپت از دو نوع تشکیل شده‌اند. آبجکتهای از پیش ساخته شده و آبجکتهایی که ما می‌سازیم.آبجکتهای ساخته شده در جاوا اسکریپت هر کدام هدف ویژه‌ای را دنبال می‌کنند و به ساده‌تر کردن استفاده از این زبان کمک می‌کنند.
در این قسمت با کمک دو آبجکت سند (Document) و پنجره (Window) نمونه‌هایی را اجرا می‌کنیم تا شما درک بهتری از این نوع آبجکتها پیدا کنید و رفته رفته در طول دوره دیگر آبجکتها را معرفی خواهیم کرد.
سند Document
اجازه بدهید با نوشتن نمونه‌ای شرح آبجکت سند را بیان کنیم:
<!DOCTYPE html>
<html> <head> </head>
<script>
document.write("<p>در این کد از آبجکت سند به همراه متد نوشتن استفاده شده است </p>");
</script>
</body> </html>
همانطور که می‌بینید کدهای بالا با استفاده از نام آبجکت و نام متد آن آبجکت، متنی را در مرورگر چاپ می‌کنند. استفاده کردن از آبجکتها بسیار ساده می‌باشد کافیست که نام آنها و ویژگی‌ها و متد‌هایشان را بدانید.
پنجره Window
پنجره یکی دیگر از آبجکتهای از پیش ساخته شده جاوا اسکریپت است که سطح آن از نظر کارایی بالاست. در قسمت پیشین زمانی که از دو متد alert () وprompt () استفاده کردیم در اصل از دو متد آبجکت پنجره بهره بردیم.
<!DOCTYPE html>
<html> <head>
<script>
var myWindow;
function openWin() {
myWindow = window.open(); }
function closeWin() {
myWindow.close(); }
</script> </head>
<body>
<button onclick="openWin()">یک پنجره باز کن</button>
<button onclick="closeWin()"> پنجره را ببند </button>
</body> </html>
مجموعه کدهای بالا دو دکمه را می‌سازد که با فشردن یکی (یک پنجره باز کن) پنجره‌ای باز می‌شود و با فشردن دیگری (پنجره را ببند) پنجره بسته می‌شود.
ساخت آبجکت در جاوا اسکریپت
برای ساختن یک آبجکت کافی است به شیوه زیر عمل کنید:
person = new Object() ;
به این ترتیب ما یک آبجکت با نام personساختیم که می‌تواند دارای ویژگی‌های خاص خود باشد. برای نسبت دادن ویژگی و مقدار به آن به شکل زیر عمل می‌کنیم:
person.firstname =" پیمان " ;
person.lastname=" ایرانی ";
person.age= 30 ;
نکته: راه‌های متفاوتی برای ساخت یک آبجکت وجود دارد که در طول دوره با آنها آشنا می‌شویم.
دسترسی به ویژگی‌های یک آبجکت
برای دسترسی به ویژگی‌های یک آبجکت باید به شیوه زیر عمل کنیم:
نام آبجکت . نام ویژگی
در نمونه پایین ابتدا یک آبجکت ساخته و مقادیری را به آن اختصاص می‌دهیم. بعد ویژگی‌های آن را چاپ می‌کنیم.
<!DOCTYPE html>
<html> <head> </head>
<body>
<script>
person = new Object() ;
person.firstname =" پیمان " ;
person.lastname=" ایرانی ";
person.age= 30 ;
alert (person.firstname + person.lastname + person.age + " ساله " );
</script>
</body> </html>
دسترسی به متدهای یک آبجکت
دستور عمل دسترسی به متدهای یک آبجکت به شکل زیر است:
نام آبجکت . نام متد
<!DOCTYPE html>
<html> <head> </head>
<body>
<script>
person = new Object() ;
person.firstname =" peyman " ;
var x= person.firstname.toUpperCase();
alert (x) ;
</script>
</body> </html>
در نمونه بالا ابتدا یک آبجکت ساخته و ویژگی‌ای را به آن اختصاص داده‌ایم. بعد متد toUpperCase () را که حروف را بزرگ می‌کند به آن آبجکت منتسب کردیم و مقدار نهایی را در متغیری ریخته‌ایم و در آخر خروجی آن را چاپ کردیم.
رویدادها در جاوا اسکریپت (Events)
رویدادها اتفاق‌هایی هستند که در واقع به دست کاربران ایجاد می‌شوند، اتفاق‌هایی که آبجکتها با آنها رو به رو می‌شوند و بر اساس تعریف داده شده به آن اتفاق از خود واکنشی نشان می‌دهند. برای نمونه رویداد کلیک کردن را در نظر بگیرید (کلیک چپ کردن کاربر بر روی آبجکت) این رویداد ممکن است برای یک دکمه یا یک تصویر (آبجکتی) اتفاق بیافتد. حرکت موس، باز کردن یک پنجره، بستن یک پنجره و… همه یک رویداد هستند، حتی قرار گرفتن موس روی یک عکس یا خارج شدن موس از روی عکس نیز یک رویداد برای عکس محسوب می‌شود. در لیست زیر مجموعه‌ای از رویدادهای تعریف شده در جاوا اسکریپت آورده شده است:
- onClick کلیک کردن
- onDblclick دابل کلیک کردن
- onMoseover ورود موس بر روی یک آبجکت
- onMouseout خروج موس از روی یک آبجکت
- onMousemove حرکت کردن موس
- onKeypress فشردن یکی از کلیدهای صفحه کلید
- onKeydown پایین آمدن یکی از کلیدهای صفحه کلید
- onLoad باز شدن یک پنجره
- onUnload بسته شدن یک پنجره
و تعداد دیگری از رویدادها که در طول دوره از آنها استفاده خواهیم کرد.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.