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

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

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

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

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

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

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

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

جلسات دوره

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

nassim hosseiny

من خطا ها رو هم رفع کردم ولی تغییری ایجاد نشد باز کار نمی کنه

nassim hosseiny

سلام من مشکلی در این قسمت(13) دارم . نه کدهایی که خودم می نویسم (کد ها دقیقا مثل کد های شما هستند ) کار می کنند و فایل های خودتون رو هم امتحان کردم اون ها هم کار نکردند نمیدونم مشکل از کجاست تا الان چندین با با این مشکل رو به رو شدم که نه کد های خودم نه کد های شما هیچکدوم کار نکردند . هم با مرورگر کروم و هم فایرفاکس امتحان کردم

لقمان آوند

inspector مرورگرتون رو ببینید و خطاهای جاوااسکریپتی رو از بخش console مشاهده و رفع کنید.

behnam kian

سلام وقت بخیر
استاد داشتم با iframe کار میکردم که دستوراتی که گفتی برای adopt و Import رو نمیتونم اجرا بگیرم
blocked a frame with origin from accessing a cross-origin frame این اررورش هست!

فرهاد

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

لقمان آوند

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

فرهاد

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

لقمان آوند

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

hassani

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

فرهاد

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

hassani

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

 function createCookie(cookieName, cookieValue, days) {
  var date = new Date();
  date.setDate(date.getDate() + days);
  date.setHours(21);
  date.setMinutes(0);
  date.setSeconds(0);
  var expires = "; expires= " + date.toGMTString();
  document.cookie = cookieName + "=" + cookieValue + expires;
 }

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

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

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

hassani

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

لقمان آوند

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

لقمان آوند

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

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

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

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

نیاز به لاگین

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