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



visibility  
mode_comment   ۴۸

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

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

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

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

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

comment دیدگاه کاربران
سعید replyپاسخ

سلام
خسته نباشید استاد عزیز و بزرگوار
مثل همیشه بسیار عالی ❓ ❓ ❓ ❓
ممنونم ازتون

امین خلیلی replyپاسخ

سلام لینک دانلود خرابه

وحید صالحی

مشکلی نداره آقا امین.

mrzbluestar replyپاسخ

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

وحید صالحی

سلام دوست عزیز چشم در حال آمادساری مقدمانش هستیم تا چند روز دیگه پیش ثبت نامش رو شروع خواهد شد.

mehdi karimi

آقای صالحی عزیز وردپرس رو کی استارت میزنید ؟

وحید صالحی

سلام آقا مهدی انشاالله در تابستون وردپرس رو خواهیم داشت که تاریخ دقیقش فعلا مشخص نیست زمانی که مشخص شد اطلاع رسانی خواهیم کرد…

mehdi karimi

دست شما درد نکنه ❓

وحید صالحی

خواهش می کنم.

yasermeha replyپاسخ

باسلام …
لینک دانلود انگاری مشکل داره

yasermeha replyپاسخ

سلام…
مثل اینکه مشکل از IDM خودمه

موفق باشید…

hassani replyپاسخ

سلام
هنوز این جلسه رو شروع نکردم سوال برام پیش اومد!!!
من با توجه به نظر آقای آذری و توضیحات شما رفتم و امتحان کردم و درست گفته بودین در حلقه for in برای دسترسی به اعضای یک آبجکت باید از براکت استفاده کنیم ولی من در مورد بقیه حلقه ها هرچی امتحان کردم نه با براکت نه با نقطه هیچکدوم مقادیر رو چاپ نمیکردن.
یعنی برای دسترسی به مقادیر یک آبجکت باید حتما از حلقه for in استفاده کنیم؟


مثلا برای حلقه for به صورت زیر میشه؟


اصلا با استفاده از تابع length میشه مثل آرایه ها طول یک آبجکت رو به دست آورد که بشه ازش در تابع for استفاده کرد؟من هر کاری کردم نشد ❗ ❗ ❗

لقمان آوند

برای کار با اشیا در حلقه ها فقط باید از for in استفاده کنید که به ایندکسهای شی دسترسی داشته باشید

hassani

تشکر بابت پاسخگوییتون

nader70 replyپاسخ

استاد خسته نباشید!
با این مبحث شی گرایی پس میشه در جاوا یک سبد خرید درست کرد؟

لقمان آوند

میشه برای بخش سمت کاربرش یه کارایی کرد ولی عمده کارش معمولا سمت سرور و با php انجام میشه .

امین خلیلی replyپاسخ

سلام صدا خیلی ضعیفه

لقمان آوند

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

hassani replyپاسخ

سلام
کل این جلسه هم عالی بود.فقط یه نکته اینکه سیستم validate خود php storm خیلی وقت ها در آموزش زردرنگ و هشدار دهنده میشه مثلا همین تمرین آخری که من به صورت زیر نوشتم و سبزرنگ شد


حالا سوال من اینه که نمیشه تمام ویژگی هایی که میخوایم به یک شی با css بدیم در یک دستور جاوااسکریپت بنویسیم؟

لقمان آوند

بعضا تذکراتی میده که کدهاتون رو بهتر می کنه. بخونید و تغیر بدید . هر چند بخش های زرد رنگ خیلی مهم نیستند ولی به بهتر شدن کدهاتون کمک می کنه .
بله میشه . به شکل زیر استفاده کنید :
element.style.cssText = 'YourStylesHere';

hassani

ممنونم از راهنماییتون

امین خلیلی replyپاسخ

اقای اوند به ظور مثال ما یهdivداریم باکلاسtestحالا اگه بخواهیم مثل تگ bodyکه در مثال ها اوردید توی استایلاش تغییر بدیم با جاوا اسکریپ چگونه با جاوا اسکریپ باید به این تگ وصل بشیم مثل تگ body

لقمان آوند

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

امین خلیلی replyپاسخ


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

لقمان آوند

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

امین خلیلی

نه جواب نداد

لقمان آوند

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

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

امین خلیلی


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

لقمان آوند

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

امین خلیلی

استاد اوند

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

لقمان آوند

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

bahman azari replyپاسخ

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

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

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

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

لقمان آوند

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

mehdi karimi replyپاسخ

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

لقمان آوند

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

mehdi karimi

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

لقمان آوند

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

mehdi karimi

سپاس ❓ ❓

mehdi karimi replyپاسخ

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

لقمان آوند

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

mehdi eslami replyپاسخ

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

لقمان آوند

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

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

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

وحید صالحی

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

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

لطف میکنید

ppp replyپاسخ

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

لقمان آوند

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

erfan.b2000 replyپاسخ

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

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.