آی تی پورت

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

جلسه اول : آشنایی با جاوااسکریپت و قابلیتهای این زبان

جلسه دوم : ساختار زبان جاوااسکریپت

مفهوم شی گرایی

واقعیت این است که توضیح مفهوم شی گرایی آن هم با نوشتار بسیار سخت است. بهتر است با تمرین و ممارست با شی گرایی آشنا شوید تا کم کم نیاز به آن را درک کنید. در صورتی که بکارگیری صحیح این قابلیت را فرابگیرید امکان ندارد که در اسکریپت هایتان از آن بهره نبرید.

در جاوااسکریپت همه ی اطلاعات می توانند بصورت یک شی باشند. به عبارتی یک شی چیزی جز مجموعه ای از اطلاعات نیست. هر شی از یکسری ویژگی و متد ایجاد شده است.

ویژگی ها (properties) مقادیری هستند که هر شی به خود می گیرد. (شبیه همان مقادیری که به متغییرها می دادیم.)

متد ها (methods)عملکردهای هر شی هستند. در حقیقت متدها توابعی هستند که مربوط به شی می باشند و هر کدام یک عملکرد خاص را برای شی اجرا می کند.

اگر به خاطر بیاورید ما مرورگر کاربر را یک شی معرفی کردیم. این شی یکسری ویژگی ها دارد که هر زمان مورد نیاز ما باشند آنها را فراخوانی میکنیم و از آنها استفاده می کنیم. به عنوان مثال از ویژگی های این شی ورژن و نوع مرورگر کاربر می باشد. همچنین این شی متدهایی دارد که می توانید آنها را اجرا کنید. از جمله این متدها بازکردن پنجره و بستن آن ، تغییر سایز آن می باشد.

به عنوان مثال با دستور زیر می توانیم اندازه ارتفاع داخلی مرورگر کاربر را از طریق ویژگی innerHeight شی window بدست بیاوریم :

window.innerHeight

یا با اجرای متد close از شی window پنجره جاری را ببندیم:

window.close()

یک مثال دیگر : یکی از مثال هایی که معمولاً در آموزش های شی گرایی بیان می شود یک شی واقعی مانند یک اتومبیل ، دوچرخه و … است. این دید به شما کمک می کند که اندکی به مفهوم و کاربرد واقعی شی گرایی نزدیک تر شوید.

فرض کنید شی شما یک اتومبیل است. این اتومبیل یک سری ویژگی ها دارد و یک سری عملکردها ی مخصوص به خود دارد. رنگ ، مدل ، نام و وزن اتومیل از جمله ویژگی های آن هستند . روشن شدن ، خاموش شدن ، حرکت کردن ، راهنما زدن و ترمز گرفتن نیز عملکرد های این شی می باشند. در واقع به کمک ویژگی ها و عملکردها می توانیم یک شی را تعریف کنیم و به آن ماهیت ببخشیم. همانگونه مشخصات ظاهری یک انسان (ویژگی ها) و رفتارهای عمومی و خاص او (عملکردها) می تواند معرف یک شخصیت باشد.

چگونه در جاوااسکریپت یک شی ایجاد کنیم؟

راه های متفاوتی برای ایجاد یک شی در جاوااسکریپت وجود دارد که کم کم با آنها آشنا خواهیم شد.

روش اول : زمانی که شما یک متغییر جدید ایجاد می کنید در حقیقت یک شی ساخته اید. می توانید از ویژگی ها و متدهای عمومی اشیا استفاده کنید و یا اینکه ویژگی و متد جدیدی برای آن بنویسید.

یک شی ساده که شامل یک رشته متنی است را ایجاد میکنیم:

var welcomeMsg = new String ("welcome to my page.");

شی welcomeMsg به همین سادگی ایجاد شد. یکی از ویژگی هایی که جاوااسکریپت برای این شی قرار داده است ویژگی length می باشد که مقدار آن عدد ۱۹ می باشد و همانگونه که حتماً حدس زده اید تعداد کاراکترهای این رشته می باشد. متد indexOf() نیز یکی از متد های این شی می باشد. به مثال های زیز توجه کنید:

welcomeMsg.length;

welcomeMsg.indexOf("to");

 اشاره : برای تست کدهای جاوااسکریپت خود می توانید از console مرورگرهای فایرفاکس یا کروم استفاده کنید.به عنوان مثال خروجی دستور بالا را می توانید در تب console ابزار developer مرورگر کروم ببینید. از متد log شی console بصورت زیر استفاده کنید:

Console.log(welcomeMsg.indexOf("to"));

خروجی این دستور عدد ۸ خواهد بود.

روش دوم : برای ایجاد یک شی با ویژگی ها و متدهای اختصاصی خود می توانید بصورت زیر عمل کنید:

welcome = new Object();

به صورت زیر ویژگی های جدید برای آن تعریف می نمایید:

welcome.msg = "welcome to my page.";

welcome.url = "/welcome.htm";

welcome.timer = 60;

به این صورت به ویژگی های آن دسترسی پیدا می کنید:

console.log(welcome.timer); //will return int 60.

می توانید متدهای جدید برای آن تعریف نمایید و آنها را فراخوانی کنید. نحوه ایجاد متدهای یک شی را پس از آشنایی با توابع توضیح خواهم داد.

مبحث جلسه آینده : به امید حق در جلسه آتی با توابع در جاوااسکریپت آشنا خواهید شد و نحوه ایجاد متدهای یک شی را فرا می گیرید.