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



visibility  
mode_comment   ۲۲

در جلسه امروز مبحث مربوط به ایجاد تغیر در صفحات وب با استفاده از کدهای جاوااسکریپت رو آموزش خواهیم داد. در ابتدا با تشریح مدل dom در جاوا اسکریپت شما رو با مفهوم کلی این مدل آشنا می کنیم و در ادامه به بررسی و آموزش ویژگی ها، اشیاء و متدهایی می پردازیم که با استفاده از اونها می تونید تغیراتی رو در صفحه وب به صورت پویا انجام بدید . با ما همراه باشید.
مطالب مطرح شده در این جلسه عبارتند از :

  • مرور مجدد خصوصیت های برجسته شئ window
  • معرفی اصلاحات مهم در DOM
  • تعریف مفاهیم parent,child,adjacent,root,sibling و ...
  • تشریح ساختار درختی تگ های موجود در صفحات وب
  • معرفی شئ Element و نحوه کار با تگ های مختلف موجود در صحات وب
  • معرفی متدهای مهم برای دریافت شئ جاوااسکریپت متناظر با تگ های موجود در صفحه وب
  • نحوه کار با مجموعه ای از تگها که توسط متدهای دریافت کننده اشیاء بدست می آیند
  •  توضیح در مورد ویژگی های مربوط به تگ ها html
  • نحوه دریافت attribute های تگ های موجود در صفحه وب
  • نحوه تغیر مقدار یا حذف attribute های تگ های موجود در صفحه وب
  • معرفی متدها و ویژگی های مختلف شی Element در جاوااسکریپت
  • معرفی اشیاء متناظر با هر کدام از انواع تگ های html
info توجه

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

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

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

سلام
خسته نباشید
یه سوال
چند جلسه دیگه مونده تا این سری آموزش تموم شه؟

لقمان آوند

تا فعلا حدودا به نیمه دوره رسیدیم

Muhamad Musavi replyپاسخ

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

لقمان آوند

سلام و ممنون
بله بر پایه وردپرسه …

Muhamad Musavi replyپاسخ

آیا برای طراحی سایتها به صورت حرفه ای،سریع و امن لازمه از cms های مثل ورد پرس استفاده کنیم.
cms ها تسلط برنامه نویس روی کدها رو کاهش نمیده؟

لقمان آوند

سلام
ضرورتی نداره ولی می تونه یه گزینه خوب باشه.
اگر cms انعطافپذیری لازم رو داشته باشه نه …

Muhamad Musavi replyپاسخ

من کدهای چند سایت قوی دیگه رو هم بررسی کردم ،بنظرم با cms طراحی شدند.چون اسامی کلاسها و اشیا اسامی طولانی و خاصی هستند.

لقمان آوند

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

Muhamad Musavi replyپاسخ

خیلی متشکر از راهنمایی تون
پس به نظر شما برای تبدیل شدن به یک طراح سایت حرفه ای ،خیلی خوبه که روی یک cms کارکنیم ،تا اینکه خودمون صفر تا صد سایت رو انجام بدیم؟

لقمان آوند

به نظر من باید اول زبون های پایه ای رو یاد بگیرید. مثل html,css,js,php
بعد از یادگیری اینها در کنار اینکه می توینید خودتون cms بنویسید درکتون از نحوه کار سایت ها هم بالاتر میره . اون موقع خیلی راحتتر هم می تونید با cms های آماده کار کنید.
هیچ کدوم از cms های آماده و cms های نوشته شده توسط خودتون رو نمیشه 100% بهتر از دیگری دونست. بسته به نیاز و اهدافی که دارید باید از بینشون انتخاب کنید!

Muhamad Musavi replyپاسخ

آیا گزینه بهتری هم غیر از cms ها وجود داره؟

لقمان آوند

کلا یا باید از cms های آماده استفاده کنید یا خودتون کدنویسی کامل وبسایتتون رو انجام بدید

Muhamad Musavi replyپاسخ

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

لقمان آوند

از لطفتون سپاسگزارم

فرهاد replyپاسخ

با سلام خدمت جناب استاد آوند
استاد در لینک زیر از سایت w3c یک متد از مدل dom معرفی شده به اسم isDefaultNamespace
http://www.w3schools.com/jsref/met_node_isdefaultnamespace.asp
من خودم با خوندن توضیحات این صفحه از سایت w3c متوجه نشدم این متد برای چی به کار میره. اگه امکان داشته باشه بی زحمت برام توضیح بدید که کاربرد این متد چی هست

لقمان آوند

یه ویژگی تو زبون های نمادگزاری مثل html و xml و … وجود داره بهش می گن namespace که فضای نام و تعریف اون زبون هست.
این متد یه آدرس namespace رو می گیره و بررسی می کنه آیا با namespace پیشفرض اون زبون یکی هست یا نه.
لیست namespace ها رو می تونی از اینجا ببینی : http://www.w3.org/TR/2011/WD-html5-20110405/namespaces.html

فرهاد replyپاسخ

ببخشید آقای دکتر این لینک رو از سایت w3school ببینید:
http://www.w3schools.com/jsref/prop_node_nodetype.asp
این صفحه مربوط به شی element مدل DOMهست که به طور خاص به ویژگی nodeType و انواع مختلف مقادیری که می تونه بگیره پرداخته. در جدولی که در این صفحه هست انواع مختلف نودها رو نوشته. اما من فقط چهار پنج تا از اون ها رو می شناسم مثل نودهای کامنت، نودهای المنت، نودهای تکست و …
میشه در مورد بقیه اون ها یه توضیح مختصر بدید؟ با سپاس فراوان

لقمان آوند

سلام
تو آموزش گفتیم که شی Node یه آبجکت وسیع هست که فرزندان زیادی داره. به این معنی که همه اون 12 موردی که تو اون صفحه دیدی خودشون نوعی از شی Node هستند. تقریبا 5-6 تاشو تو طول دوره باهاشون آشنا میشید و کار میکنید. مابقی یه سری اشیائی هستند که استفاده های خاص دارند. بعضا در پردازش تگهای xml و یا جاهای دیگه که خیلی خاص هست استفاده میشه و کاربردشون کمه . اگر دور موردشون سرچ کنید و مطالعه بفرمایید کاربردهاشون رو یاد می گیرید. هر چند بعضی شون ممکنه یه کم براتون عجیب باشه و باید یه سری مفاهیم رو بدونید. از نظر من فعلا نیازی بهشون ندارید و وقتتون رو مشغول اینها نکنید. اساس و هسته مرکزی و پرکاربرد جاوااسکریپت رو اول خوب یاد بگیرید. وقتی این رو مسلط شدید به عنوان موارد حاشیه ای می تونید برید سراغشون .

هادی مصلی نژاد replyپاسخ

عرض سلام و خسته نباشی خدمت استاد آوند ، اول تشکر میکنم بابت آموزش های خیلی خوبتون ، دوم اینکه من با آموزش هایی که یاد گرفتم یک تگ input برای ایجاد جستجو ایجاد کردم و کدی نوشتم که با توابع onclick و onblur زمانیکه کاربر بر روی input کلیک میکند با حالت transition اندازه آن بزرگ شود و زمانیکه در مکانی غیر از آن کلیک کند به اندازه اولیه در آید مانند خیلی از وبسایت ها که این کار رو انجام می دن و این کار بدرستی انجام میشود ولی مشکلی که وجود داره اینه که زمانیکه برای اولین بار روی input کلیک میکنم ، بدون transition این عمل اتفاق می افتد ولی برای دفعات بعد بدرستی کار می کند ، این اتفاق دقیقا در مینی پروژه ای که شما در جلسه 15 برای دکمه انتقال به بالا ایجاد کردید هم می افتد که در آنجا وقتی که اسکرول صفحه در بالا قرار دارد ، با hover شدن در مکان قرار گیری تصویر ، تصویر نمایش داده میشود که به خاطر این است که تگ hover مقدار !important گرفته ، که با برداشتن این مقدار این مشکل برطرف میشود ولی بازهم برای اولین بار با hover شدن تصویر نمایان میشود و باز در دفعات بعدی مشکل برطرف میشود که دقیقا این مشکل هم مانند مشکل تگ input جستجو است ، میخواسم از راهنمایی شما برای رفع این مشکل کمک بگیرم . کد مربوط به جستجو رو هم در پایین قرار میدم.با تشکر
———————————————————————————————–

function focusFunction() {
document.getElementById(“myInput”).style.transition = “all 1s”;
document.getElementById(“myInput”).style.width = “600px”;
}
function blurFunction() {
document.getElementById(“myInput”).style.transition = “all 1s”;
document.getElementById(“myInput”).style.width = “200px”;
}

———————————————————————————————–

لقمان آوند

سلام
فایل کامل کدتون رو که داره اجرا میشه برام ایمیل کنید بررسی می کنم بهتون جواب میدم

Behdad Khateri replyپاسخ

سلام ممنون از زحمات و آموزش خوبتون
در این جلسه گفته شد که clienttop و clientleft فاصله از چپ و بالا را میدهند در صورتیکه عرض border بالا و چپ المنت را میدهند

لقمان آوند

بله دقیقا درست می فرمایید .
احتمالا در ویدیو اشتباه گفتم اگر چنین گفتم !
ممنون از دقت شما

ارسال نظرات

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