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

- visibility ۴۷ mode_comment

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

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

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

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

ثبت نام در دوره جاوااسکریپت و جی کوئری

comment دیدگاه کاربران
امین خلیلی


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

لقمان آوند

اینو تست کنید ببینید میشه :

امین خلیلی

نه جواب نداد

لقمان آوند

ببخشید. در خط 4 جای ci و 3 توی کد بالا باید عوض میشد و باقیمانده ci بر 3 (تعداد رنگ ها) حساب میشد . در عین حال کد کاملترشو برات گذاشتم :

تو این کد رنگ ها رو بدون تغیر در کد اضافه کنی …

امین خلیلی


به این شکل نوشتم
استاد یه سوال چرا وقتی متغییر ciرا داخل تابع مینویسی برنامه کار نمیکنه ولی وقتی میبریش بیرون تابع کار میکنه

لقمان آوند

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

امین خلیلی

استاد اوند

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

لقمان آوند

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

bahman azari

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

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

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

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

لقمان آوند

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

mehdi karimi

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

لقمان آوند

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

mehdi karimi

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

لقمان آوند

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

mehdi karimi

سپاس ❓ ❓

mehdi karimi

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

لقمان آوند

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

mehdi eslami

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

لقمان آوند

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

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

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

وحید صالحی

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

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

لطف میکنید

ppp

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

لقمان آوند

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

نیاز به لاگین

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