دوره مجازی جاوااسکریپت (جلسه 13): مدل DOM، شی document و انجام تغیرات پویا در صفحه وب

- visibility ٢۵ mode_comment

در جلسه امروز در مورد شی document در مدل dom صحبت می کنیم و انواع ویژگی ها و متدهای اون رو معرفی می کنیم و آموزش میدیم. درون شی document مجموعه ای از ویژگی ها و متدها وجود داره که به ما اجازه میده با استفاده از جاوااسکریپت تغیرات پویا و جالبی رو در صفحات وب انجام بدیم. در انتهای این جلسه هم یک مینی پروژه انجام میدیم که به نحوه انجام تغیرات در صفحات وب با استفاده از جاوااسکریپت بیشتر اشنا بشید!

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

  • معرفی شئ document و سند وب باز شده در پنجره مرورگر
  • معرفی و توضیح در مورد متدها و ویژگی های مختلف شی document
  • معرفی وضعیت های مختلف یک صفحه وب در هنگام لود شدن
  • نوشتن یک پروژه عملی جالب و تست کردن کدهای مختلف با شئ document
  • معرفی مفهوم کوکی ها و نحوه دریافت کوکی های فعال در مرورگر کاربر
  • انجام چندین عمل مختلف و تغیر در تگهای موجود در صفحات وب
info توجه

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

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

comment دیدگاه کاربران
hassani

آقای آوند اگه من دعا کنم امشب والیبال رو ببریم چقدر بهم تخفیف میدین برای دوره php???

لقمان آوند

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

hassani

بله خودمم میدونم برای عید فطر مگه نه 😛 😛 😛

hassani

آقای آوند برای درج تاریخ انقضا در کوکی ها راه آسونتری نیست منظورم فرمت تاریخ انقضا هست و اینکه راهی هست که کوکی ها خودکار ساخته بشن.مطمئنا مدیران سایت ها نمیان برای تک تک اعضا کوکی هایی رو به صورت دستی بنویسند و ذخیره کنند.درسته؟
سوال بعدی: آقای آوند راهی هست که خود php storm وقتی ما داریم کد مینویسیم حرف اول کلمات رو بزرگ بنویسه یا اینکه ما برای این کار باید کلید caps lock رو بزنیم؟

لقمان آوند

سلام
خودتون یه تابع بنویسید که پارامتر های زمان رو ورودی بگیره و اون تاریخو براتون برگردونه. یا اینکه تابعی که فقط تعداد ثانیه ها رو بگیره و به زمان کنونی اضافه کنه و به شما برگردونه تاریخ انقضا رو!
نیازی نیست برای تک تک اعضا کوکی بنویسید. شما یه کوکی که ایجاد کنید و ست کنید تو مرورگر هر کاربری که صفحه رو باز کنه ثبت میشه !
اون چیزی هم که تو phpStorm خواستید اصلا پیشنهاد نمیشه. تو برنامه نویسی دقت خیلی مهمه و نباید این کارا رو بزارید ادیتور انجام بده. یه جا ممکنه کاراکتری رو بزرگ و کوچیک کنه و کد شما دیگه کار نکنه…
خودتون شیفت بگیرید و کاراکتر مربوطه رو همزمان بزنید که بزرگ نوشته شه !

hassani

آقای آوند موقع استایل دهی به یک المنت در جاوااسکریپت چرا وقتی استایلی که با cssText دادیم رو بعد از استایلی که به صورت عادی دادیم میاریم استایل cssText اعمال نمیشه ولی برعکسش درست عمل میکنه؟

لقمان آوند

csstext جایگزین همه استایل ها میشه. باید استایلها به اون اضافه بشه نه اینکه با انتساب مقداردهیش کنید.

hassani

من مطابق با w3school استایل دهی کردم نمیدونم کجا اشتباه کردم ❗

لقمان آوند

نکته ای که گفتم رو دقت کنید . وقتی cssText رو مقدار دهی کنید جایگزین کل مقادیر موجود در ویژگی style تگ میشه و قبلیا رو از بین میبره. پس اینطور استفاده کن :
btn1.style.backgroundColor = "#fff";
btn1.style.cssText += ";border:1px solid red;margin:2px;";

hassani

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

لقمان آوند

این مورد رو نمونش رو گفتیم که کجا از انتساب استفادهبشه و کجا از =+ ! وقتی روش رو بدونید اینجور موارد براتون ساده میشه …

hassani

اینم از تابع ایجاد کوکی:


و فایل کامل تمرین که اطلاعاتی که کاربر در فرم وارد میکنه رو به صورت کوکی ذخیره میکنه:(شاید کاربری لازم داشته باشه )

http://s6.picofile.com/d/604063f1-1b4e-45a1-8bfa-f0f243df576e/cookie.rar
❓ ❓ ❓

لقمان آوند

ممنون

فرهاد

آقای حسنی عزیز فکر می کنم تابع toGMTString که در تابع ایجاد کوکی نوشتید منسوخ شده هست. به جای اون باید از تابع toUTCString استفاده کنید. لینک رفرنس های w3school رو براتون می ذارم اونجا به این نکته اشاره کرده
توی این صفحه ست:
http://www.w3schools.com/jsref/jsref_obj_date.asp

hassani

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

hassani

باشه ممنونم از راهنماییتون.
به لیست پروژه هام اضافه میکنم و سرفرصت تلاشمو میکنم.(البته با کمک شما) ❓

hassani

آخه چرا این کامنت من تایید نمیشه؟؟؟

لقمان آوند

چون فرصت نکردم بررسی کنم
وقتم محدوده فعلاذو نمی تونم کدهای جانبی رو بررسی کنم
اگر فرصت بشه حتما چک می کنم و پاسخ میدم. برای همین فعلا در انتظار بررسی گذاشتم…

hassani

سلام خوب شد بررسی نکردین چون خودم درستش کردم فقط یه کم کدهاش زیاد شده که اگه بشه با حلقه ها مختصرش میکنم:
http://s6.picofile.com/d/21a76b84-3c69-401e-aa1e-a1136b87783f/spiderV2.rar

لقمان آوند

خوب شده.
داری از ما سرتر میشی …
معلومه خیلی با علاقه در حال یادگیری هستی …

hassani

لینک بازی اصلاح شده:
http://s6.picofile.com/d/50b7f914-df33-48a7-885d-1d712cb77699/game.rar

استاد من وقتی از ویژگی document.documentURI استفاده می کنم می تونم آدرس uri رو بگیرم و مثلا در یک تگ html نمایش بدم . اما نمی تونم مقداری برای اون ست کنم. وقتی سعی می کنم مقداری براش ست کنم هیچ اتفاقی در مرور گر نمی افته. فکر هم نمی کنم به خاطر ورژن مرورگرم باشه چون ظاهرا این ویژگی فقط در مرورگر IE پشتیبانی نمی شه. به نظر شما مشکل از کجاست؟

لقمان آوند

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

چون در توضیحی که در مستندات جاوا اسکریپت داده شده برای documentURI اینطور نوشته:
Sets or returns the location of the document
یعنی هم باید بشه باهاش URI رو ست کرد و هم میشه مقدارش رو برگردوند

لقمان آوند

بله دقیقا مثل همون InnerHTML یه پراپرتی هست. هم می تونید مقدارش رو بخونید و آدرس سند رو بگیرید و هم می تونید با عملگر انتساب بهش مقدار بدید …
ولی خوب نکته ای که هست اینه که آدرس سند که در جاوااسکریپت قابل تغیر نیست. اون سندی که باز شده از یه مسیر مشخص و معین باز شده و اگه چیزی هم بهش انتساب بدید احتمالا تغیر نمی کنه و read-only هست …

نیاز به لاگین

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