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


DOM در جاوا اسکریپت (قسمت دوم)


DOM در جاوا اسکریپت (قسمت دوم)
برای دانلود و دیدن آنلاین این درس نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.

معرفی مدل‌های BOM و DOM و پویایی عناصر صفحه وب

معرفی مدل DOM (Document Object Model)

DOM ساختاری است که توسط HTML ایجاد میشود و این امکان را به وجود می‌آورده که زبان‌های برنامه نویسی با اشیاء برنامه ارتباط برقرار کنند.
برای این جلسه page3 با پسوند html را ایجاد میکنیم.
اولین کاری که انجام میدهیم در بخش body چندین اِلمان در قالب (تصاویر، باکس متن، تگ لینک و...) به صفحه اضافه میکنیم تا عملیاتی را بر روی این اِلمان‌ها انجام دهیم.
   
<img src="img/1.jpg" width="200" height="200" />
    <img src="img/2.jpg" width="200" height="200" />
    <img src="img/3.jpg" width="200" height="200"/>
    <img src="img/4.jpg" width="200" height="200">
    <div>
        test1
    </div>
    <div>
        test2
    </div>
    <a href="https://darsman.com">درسمن</a>
    <a href="https://google.com">گوگل</a>

Document.images

اولین دستور Document.images است که میتوان به همه تصاویر داخل صفحه دسترسی پیدا کرد به این صورت که همه تصاویر را درون یک متغییر قرار میدهیم، یک حلقه for ایجاد میکنیم که به تعداد موجودیت‌های داخل متغییر حرکت کند و داخل حلقه تکرار در هر دور به تصاویر دسترسی پیدا کرده و به هر کدام یک Border دهد.
       
Var images=document.images;
for(let i=0;i<=images.length;i++)
{
images[i].style.border=”1px solid #000”;
}

Document.Links

به کمک دستور Document.Links به روش بالا میتوانیم به همه لینک‌های داخل صفحه دسترسی پیدا کنیم و یک عملیاتی را بر روی لینک‌ها انجام دهیم.
در این بین دستور جدید با نام setAttribute را یاد خواهیم گرفت، از این دستور برای اضافه کردن یک صفت به اِلمان‌های داخل صفحه استفاده میشود.
این دستور دو ورودی دریافت میکند، ورودی اول نام صفتی که میخواهیم اضافه کنیم و در ورودی دوم مقدار صفت را مینویسیم.
.setAttribute(“نام صفت”,”مقدار صفت”);
مثال:
       
var links=document.links;
for(let i=0;i<=links.length;i++)
{
  links[i].setAttribute(“target”,”blank”);
}
با استفاده از صفت target با مقدار blank لینک‌ها به این روش عمل میکنند که‌ه برای باز شدن در یک تب دیگر مرورگر باز شوند.
 

Document.title

با استفاده از دستور document.title به عنوان صفحه دسترسی خواهیم یافت.
var title=document.title;
alert(title);

Document.URL

به کمک دستور document.URL به آدرس صفحه دسترسی خواهیم یافت.
var url=document.URL;
alert(url);

addEventLisener

ما میتوانیم در صفحه به یک اِلمان دسترسی پیدا کنیم و یک رویدادی را برای آنها تعریف کنیم، رویدادهایی همانند کلیک ، دوبل کلیک و ...
ابتدا یک اِلمان با یک ایدی مشخص را پیدا کرده و با رویداد کلیک کردن، تابع
 بی نامی را که پیامی را نمایش میدهد را اجرا کند.
var img1=document.getElementById("img1");
img1.addEventListener("click",function(){alert("Hello")})
در حالت بعدی میتوان چندین تابع  را فراخوانی کرد.
  
var img1=document.getElementById("img1");
img1.addEventListener("click",function(){alert("Hello")})
img1.addEventListener("click",fun1);
function fun1 (){
alert("hello");
}
  
 حالتی دیگر وجود دارد که میخواهیم برای رویداد کلیک نام یک تابعی را صدا بزنیم که دارای ورودی است.
در این حالت به صورت قبل عمل نمیکنیم که ورودی‎های تابع را جلوی نام تابع در پرانتز بنویسیم.
برای رویداد کلیک یک تابع بدون نام مانند بالا ایجاد میکنیم و در عملیات تابع بی نام، نام تابع با ورودی درون پرانتز جلوی آن مینویسیم.
img1=document.getElementById("img1");
img1.addEventListener("click",function(){fun2(".com")});
function fun2 (name){
alert("darsman"+name);
}
 


برچسب ها :

DOM در جاوا اسکریپت قسمت دوم

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد .
برای ارسال نظر نیاز است وارد سایت شوید. در صورت نداشتن حساب کاربری عضو شوید.
17 جلسه برای دوره آموزش جاوا اسکریپت-مقدماتی تا متوسط

درس 1
مقدمه ای بر زبان برنامه نویسی جاوا اسکریپت
29 دقیقه / رایگان

درس 2
ساختار کلی برنامه در زبان جاوا اسکریپت
33 دقیقه / رایگان

درس 3
عملگرها در زبان جاوا اسکریپت
35 دقیقه / رایگان

درس 4
روشهای نمایش اطلاعات در خروجی در زبان جاوا اسکریپت
31 دقیقه / رایگان

درس 5
روشهای دریافت داده از ورودی و تغییر نوع داده در زبان جاوا اسکریپت
26 دقیقه / رایگان

درس 6
توابع و رویدادها در زبان جاوا اسکریپت
29 دقیقه / رایگان

درس 7
انواع رویدادها در زبان جاوا اسکریپت
42 دقیقه / رایگان

درس 8
دستورات کنترلی در زبان جاوا اسکریپت
25 دقیقه / رایگان

درس 9
حلقه های تکرار در زبان جاوا اسکریپت
20 دقیقه / رایگان

درس 10
اشیا و آرایه ها در زبان جاوا اسکریپت
41 دقیقه / رایگان

درس 11
شی گرایی در زبان جاوا اسکریپت
40 دقیقه / رایگان

درس 12
متد های کار با رشته ها و اعداد در زبان جاوا اسکریپت
35 دقیقه / رایگان

درس 13
متدهای کار با آرایه ها، تاریخ و زمان در جاوا اسکریپت
26 دقیقه / رایگان

درس 14
DOM در جاوا اسکریپت (قسمت اول)
33 دقیقه / رایگان

درس 15
DOM در جاوا اسکریپت (قسمت دوم)
25 دقیقه / رایگان

درس 16
BOM در جاوا اسکریپت (browser object model )
28 دقیقه / رایگان

درس 17
مدیریت خطا و استثنا در جاوا اسکریپت
27 دقیقه / رایگان

دوره آموزش جاوا اسکریپت-مقدماتی تا متوسط


تعداد جلسات 17 جلسه
مدت زمان 470 دقیقه
سطح مهارت مقدماتی تا متوسط
زبان فارسی
دانشجو 107 دانشجو
گواهی نامه ندارد
قیمت دوره : 0 تومان
درحال برگزاری
مهدی عباسی
مهدی عباسی

درباره مدرس :

مدیر‌ عامل‌ شرکت آریا‌ نرم‌‌ افزار دارنده مدرک کارشناسی‌ ارشد مهندسی کامپیوتر 12‌ سال سابقه تدریس دروس کامپیوتر را در دانشگاههای دولتی، آزاد، پیام‌نور ملایر، شهیدشمسی‌پور تهران و تدریس برنامه‌نویسی در انیستیتو ایزایران، مجتمع فنی و موسسه راه‌آینده تهران دارا میباشد و تا به حال راهنمایی انجمنهای علمی دانشگاه و صدها پروژه دانشجویی را برعهده داشته است. تخصص اصلی: با داشتن گواهی‌نامه‌های معتبر تدریس از انیستیتو‌ ایزایران، راه آینده‌تهران و سازمان‌فنی‌حرفه‌ای، تدریس و آموزش‌ دروس کامپیوتر، ‌برنامه‌نویسی کامپیوتر و کلاسهای کنکور کارشناسی و کارشناسی‌ارشد میباشد.همچنین تجربه داوری و نظارت مسابقات برنامه‌نویسی کشوری‌ACM را در سالهای متعدد داشته و تیم مورد رهبری ایشان در 3سال متوالی مقام اول مسابقات کشوری را از آن خود کرده است.ایشان مقالاتی در زمینه شبکه‌های کامپیوتری، تکنیک‌های وزارت دفاع و ... به ثبت رسانده و مشاور و کارشناس در طراحی و برنامه نویسی بیش از 50‌برنامه کاربردی تحت وب و ویندوز و موبایل میباشد. افتخارات دیگر:کسب مقام دوم ایده‌های برتر در مسابقات استارت‌آپ و بکند کشوری را نام برد.