دوره مجازی جاوااسکریپت (جلسه 8): اشیاء و برنامه نویسی شی گرا در جاوااسکریپت

دسته بندی: جاوا اسکریپت
زمان مطالعه: ۲ دقیقه
۰۹ خرداد ۱۳۹۴

در جلسه امروز در مورد بحث مهم شی گرایی و برنامه نویسی شی گرا در جاوا اسکریپت صحبت می کنیم. جاوااسکریپت یک زبان شی گرای classless یا بر اساس prototype هست و برای ایجاد کلاس های جدید روش خاص خود رو داره که با زبان های برنامه نویسی دیگه کمی متفاوته. با ما باشید تا نحوه ایجاد کلاس جدید، استفاده از اشیاء و نکات مهم دیگه رو فرا بگیرید .

مطالب مطرح شده در این جلسه عبارتند از :

  •  توضیح در مورد ساختار ها حلقه ای forEach() و for..of و دلیل عدم بیان آن ها در این دوره
  • روش صحیح استفاده از حلقه for..in برای پیمایش اشیاء
  • توضیح در مورد مشکلات برنامه نویسی به صورت تابعی و عدم استفاده از اشیاء
  • مزیت های برنامه نویسی شی گرا
  • تعریف مسئله و ایجاد یک کلاس جدید و استفاده از آن (کلاس Car)
  • معرفی اشیاء و نحوه استفاده از آن ها در جاوااسکریپت
  • سه روش مختلف ایجاد اشیاء در جاوااسکریپت
  • مدل شی گرایی جاوااسکریپت (classless - prototype) و تفاوت آن با مدل های دیگر
  • constructor ها در جاوااسکریپت و مفهوم آن
  • کیورد this و کاربرد آن
  • نحوه تعریف کلاس(شئ) جدید در جاوااسکریپت
  • نحوه صحیح تعریف ویژگی های یک شئ درون آن
  • نحوه تعریف و افزودن متدها برای یک شئ
  • نحوه حذف و اضافه کردن متد و ویژگی به اشیاء
  • نحوه پاس دادن پارامتر ها به کانستراکتور شئ
  • ویژگی prototype و دسترسی به تعریف اصلی (اولیه) اشیاء در جاوااسکریپت
  • ذکر مثال هایی از اشیاء پیش ساخته در جاوااسکریپت و متدها و ویژگی ها آنان
  • مینی پروژه : تغیر پس زمینه صفحه وب به صورت رندم با کلیک رو بر روی یک دکمه
  • مینی پروژه : تولید کننده دکمه!!! ایجاد دکمه ای برای تولید دکمه های رنگارنگ و افزودن آنها به صفحه وب 
:: توجه

این مطلب یک جلسه از آموزش javascript می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش javascript

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

erfan.b2000

سلام phpstrom نیاز به کرک داره آیا؟؟
چون واسه من وسط کار میاد بیرون
لطفا یکی راهنمایی کنه چیکار باید کنم
ممنون

ppp

سلام استاد آوند
استاد با جاوا اسکریپت یه چیزی ساخته شده وقتی روی یه دکمه کلیک میشه یک اینپوت خودش میسازه
سوال من اینجاست چطوری کاری کنم که داخل divمورد نظرم ساخته بشه؟
ممنونتون میشم کمک کنید دوستان
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_text_create

لقمان آوند

سلام
جلوتر متوجه میشید. از تابع getElemetByID می تونید اون تگ رو بگیرید و عنصر خاصر رو درونش بزارید. با جیکوئری هم که خیلی راحت میشه اینکارو کرد. در ادامه دوره یاد می گیرید و مثال اینجوری زیاد زده شده

whossein@hotmail.com حسین آقاتبار

با سلام و خسته نباشی خدمت شما ،یه انتقاد داشتم به نحوه درس و اونم اینه که حداقل در این جلسه خیلی در مورد موضعاتی که به نظر آسون میایند توضیح میدید و شاید میشد 33 جلسه را به 25 جلسه رسوندش و ما زودتر به هدف برسیم.

وحید صالحی

سلام دوست عزیز ما در تمام دوره ها پایین ترین سطح دانش رو از سمت دانشجو در نظر می گیریم که تمام افرار بتونن حتی با دانش کم موارد رو فرا بگیرند و موردی براشون غیر قابل فهم نمونه به خاطر همین از پایین ترین سطح و موارد بسیار ساده شروع می کنیم و توضیح می دیم

سید احسان عظیمی

لطف میکنید

mehdi eslami

سلام وقتتون بخیر آقای آوند:
یه سوال واسم پیش اومد من میخوام وقتی buttonهایی که به صورت راندوم ایجاد کردم و وقتی روی هر کدام از buttonها کلیک میکنم مقادیری رو برگردونه میشه بگید چطور این کار امکان پذیره؟ ممنون میشم

لقمان آوند

بااستفاده از متد querySelector در جاوااسکریپت (یا استفاده از جی کوئری) می تونید همه دکمه های موجود در صفحه وب رو بگیرید و در یه حلقه به همشون یه event اتچ کنید . جلوتر که برید متوجه میشید ایشالله …

mehdi karimi

سلام ، استاد من با createElement یک تگ input ایجاد کردم و با createAttribute هم یک attr درست کردم و مقدار type بهش دادم اما هرچی گشتم پیدا نکردم که چه جوری مقدار type رو مثلا بهش file بدم و بعد چه جوری این attr رو درون المنتی که ساختم بزارم
هدفم اینه مثل سایت های آپلودسنتر با کلیک روی یک دکمه گزینه های آپلود فایل بیشتر شه

لقمان آوند

کدتون رو برای من ایمیل کنید که ببینمش .

mehdi karimi

خیلی جلسه خوبی بود
استاد اصل جاوا اسکریپت همین شی گرایی هست ؟ یعنی منظورم اینه شی گرایی رو به طور کامل متوجه بشیم چند درصد راه رو رفتیم ( البته تمرین و تلاش جای خود داره )

لقمان آوند

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

mehdi karimi

خیلی ممنون
تو زبان php چطور ؟ یعنی مثلا جاوا که گفتیم رو مبنای شی گرایی هست ، php بر چه مبانیه و کدوم مبحثشو یاد بگیریم میتونیم مفهومشو خوب درک کنیم و جلو بیفتیم ؟

mehdi karimi

سپاس ❓ ❓

لقمان آوند

سلام
خیر php فقط شی گرایی نیست و برنامه نویسی رویه ای هم داره که زیادم استفاده میشه . توی جاوا نمیشه غیر oop کد نوشت ولی تو php هر دو روش امکانپذیره.
هر دو روش رو یاد بگیرید خوبه. در دوره php در موردش صحبت کردیم.

bahman azari

سلام ممنون،این جلسه،جلسه خوبی بود فقط در مورد شی گرایی و نوشتن کلاس در ECMAScript 5 و ECMAScript 6 تفاوت هایی به وجود اومده که بهتره دوستان هم ازش مطلع بشن:

نوشتن کلاس در ECMAScript 5:

 var Animal = (function () {
 function Animal(name) {
  this.name = name;
 }
 // Methods
 Animal.prototype.doSomething = function () {
  console.log("I'm a " + this.name);
 };
 return Animal;
})();
var lion = new Animal("Lion");
lion.doSomething();

نوشتن کلاس در ECMAScript 6:

 class AnimalES6 {
 constructor(name) {
  this.name = name;
 }
 doSomething() {
  console.log("I'm a " + this.name);
 }
}
var lionES6 = new AnimalES6("Lion");
lionES6.doSomething();

در ECMAScript 6 برای تعریف کلاس از کلیدواژه class مانند زبان php میشه استفاده کرد.مفهوم constructor هم که قبلا در ECMAScript 5 یک مفهوم بود الان به عنوان کلیدواژه میشه استفاده کرد.برای نوشتن متدها هم نیازی نیست که از کلیدواژه this استفاده کرد.کلا ساختار نوشتن خیلی بهینه تر شده.

لقمان آوند

ECMA 6 چون هنوز به صورت رسمی استفاده نمیشه ما در این دوره در موردش صحبت نمی کنیم .
تغیرات دیگه ای هم تو این ورژن بوجود اومده که حالا زوده بخوایم در موردشون صحبت کنیم . چون مرورگرا فعلا ECMA 5.1 رو پیاده سازی کردن …
ممنون از اطلاعات خوبی که دادید.

لقمان آوند

چون در هر بار اجرا دستور تعریفش اجرا میشه و ارایه از نو ساخته میشه… بحث این بود که اگه تغیرش بدی در صدا زدن های مختلف به اون تغیرات دیگه دسترسی نداری !

امین خلیلی

استاد اوند

   var colors = ['red', 'blue', 'black'];

این متغییر ارایه ای داخل تابع تعریف شده چرا بعد از یکبار اجرا پیرو فرمایش شما که فرمودید
متغیرداخل تابع محلی هست و عمرش فقط برای همون یک بار اجرای تابع هست بعد از هر بار کلیک اجرا میشود و مقدارش را برمیگرداند و از بین نمیرود

لقمان آوند

این کدت هم درسته البته یکم طولانی تر …
چون داخل تابع متغیر محلی هست و عمرش فقط برای همون یک بار اجرای تابع هست و از بین میره مقدارش. ولی وقتی بیرون از تابع باشه سراسری هست و مقدارش پس از هر بار تغیر در تابع باقی می میونه …

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

شما هم چنان می توانید سوالات خود را در این قسمت بپرسید اما اولویت پاسخ گویی با دانشجویانی است که بازه پشتیبانی فعال دارند.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل