آموزش جاواسکریپت و ای جکس

flags_DD_HTML

تغییر یک صفحه وب در جاواسکریپت

به غیر از واکنش به عناصر HTML موجود روی یک صفحه، جاواسکریپت به شما اجازه می دهد تا محتویات خود را نیز در زمان باز شدن صفحه تغییر دهید بدون این که مجبور باشید صفحه را در سرور وب تغییر دهید. یک روش آسان برای اضافه کردن محتویات وجود دارد و آن استفاده از مشخصه innerHTML است. مشخصه innerHTML جز استاندارد w3c نیست اما توسط مرورگرهای مدرن پشتیبانی می شود.

نکته: مشخصه innerHTML به شما اجازه می دهد تا محتویات HTML بین تگ های باز و بسته یک عنصر خاص را تغییر داده و آنها را دریافت کنید. همچنین می توانید از محتویات متنی یا دارای تگ استفاده نمایید.

فرض کنید که می خواهید محتویات عنصرهای div، span و p یا دیگر عناصر را بدون نیاز به تغییر صفحه به روز کنید. یک فراخوان ساده innerHTML ترفند این کار است. وقتی منبع سند HTML را می بینید، متوجه می شود که عنصر span بر مبنای متنی که کاربر در یک کادر متنی وارد می کند، تغییر می نماید. این کد را چک کنید:

<html>
<head>
<script type="text/javascript">
function refreshText() {
var txt = document.getElementById( 'userText' ).value;
document.getElementById('ontheflyupdate').innerHTML = txt;
}
</script>
</head>
<body>
<p>
Did you know that the
<span id='ontheflyupdate'>
cowboy sat on his horse
</span>
?
</p>
<input type='text' id='userText' value='Enter your own text here'/>
<input type='button' onclick='refreshText()' value='Update'/>
</body>
</html>

بنابراین هر وقت کاربر یک متن جدید وارد کرده و روی دکمه Update کلیک کند، محتویات span تغییر می کند.

اخطار!

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

script_hires_transp

وصل کردن یک اسکریپت به لینک

یکی از کارهایی که بسیاری از اسکریپت نویس ها تمایل به انجام آن دارند، وصل کردن یک اسکریپت به کلیک شدن یک لینک a است. HTML به شما اجازه می دهد تا یک دستور جاوا اسکریپت را به صورت یک خاصیت href و با استفاده از پروتکل : javascript اجرا کنید. به عنوان مثال:

<a href="javascript:alert('click')">Click me</a>

اما یک روش بهتر استفاده از اداره کننده رویداد onclick است.

دو سناریو برای انجام این کار وجود دارد. ابتدا فرض کنید که می خواهید از قابلیت یک لین a برای اجرای یک اسکریپت استفاده کنید اما نمی خواهید کاربر را به صفحه دیگری بفرستید. برای اجری دستور جاوا اسکریپت و جلوگیری از عملکرد عادی لینک، یکی اداره کننده رویداد Onclick اضافه کنید که تابع یا دستور مورد نظر شما را اجرا می کند. یک دستور return false نیز در انتهای نام تابع اضافه کنید تا به مرورگر بگویید که از مقدار href چشم پوشی کند. سپس می توانید یک # را به عنوان مقدار href نسبت دهید. در اینجا می بینید که ظاهر کد چگونه می شود:

<a href="#" onclick="checkPage();return false">Check now</a>

سناریوی دوم به این صورت است که می خواهید هنگام کلیک روی لینک، یک بررسی شرطی انجام شود. اگر بررسی موفق بود، مرورگر مقدار href را باز می کند. اما اگر این طور نبود، کاربر در صفحه کنونی باقی می ماند. در این حالت کد عنصر a چیزی مانند این خواهد بود:

<a href="continue.html" onclick="checkPage();">Continue</a>

تابع ()checkPage که فراخوانده شده است، صفحه را تایید اعتبار می کند. اگر آزمایش موفق بود، یک مقدار true از ()checkPage برگردانده می شود. اگر چیزی نیازمند توجه کاربر باشد، یک مقدار false برگردانده می گردد که باعث می شود از مقدار href چشم پوشی شود.

K85ZWV2F_400x400

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

بعضی وقت ها لازم است یک پنجره مرورگر جدید باز کنید تا یک عمل خاص را انجام داده یا کاربر را به یک صفحه وب یا سایت دیگر ببرید. می توانید از جاواسکریپت برای ایجاد یک پنجره جدید مرورگر استفاده کنید. برای این کار از متد ()open شی window استفاده می کنید. روش کار به این صورت است:

window.open( 'url', 'windowName' [, 'featuresList'] )

آرگومان url یک رشته متنی است که URL که باید باز شود را مشخص می نماید. آرگومان windowName نیز یک رشته متنی است که نام پنجره جدید را مشخص می نماید. می توانید هرجای دیگری در کد خود از این نام استفاده کنید.

در اینجا یک فراخوان برای باز کردن پنجره جدید را می بینید:

window.open( 'http://www.digitalwalk.net/more.html','moreWin');

متد ()open دارای یک مقدار بازگشتنی است که به شی جدید window ایجاد شده ارجاع می دهد. با این که مجبور نیستید تا به صورت صریح کاری با این مقدار بازگشتنی انجام دهید، اما توصیه می کنم نام آن را در کد خود تعیین کنید (مانند مثال قبلی). برای مثال کد بعدی یک پنجره جدید را باز کرده و سپس از دستور document.write در این پنجره جدید استفاده می کند:

var moreWindow = window.open( 'http://www.digitalwalk.net/more.html', 'moreWin' );
moreWindow.document.write( 'Peek-a-boo. I am writing this from a different window' );

اخطار!

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

با این جال اگر فقط می خواهید یک پنجره جدید باز کنید، می توانید این کار را بدون نیاز به اسکریپت نویسی انجام دهید. کافی است یک "target="_blank به یک لینک اضافه کنید. قدرت واقعی ()window.open در لیست دلخواه امکانات آن نهفته است. با استفاده از آرگومان های دلخواه این متد می توانید جزئیات پنجره جدید مرورگر را نیز مشخص کنید. این آرگومان ها یک رشته متنی هستند که هر مورد توسط یک ویرگول از دیگری جدا شده است و حاوی جفت مقادیر برای بعضی یا همه موارد نشان داده شده در جدول زیر می باشد.

جدول - امکانات ()window.open

آرگومان کاری که انجام می دهد
Status نوار وضعیت در پایین پنجره را پنهان کرده یا نمایش می دهد
Toolbar نوار ابزار استاندارد مرورگر را پنهان کرده یا نمایش می دهد
Location نوار آدرس پنجره مرورگر را پنهان کرده یا نمایش می دهد
menubar نوار منو را پنهان کرده یا نمایش می دهد
directories دکمه های پوشه استاندارد مرورگر را پنهان کرده یا نمایش می دهد
resizable به کاربر اجازه تغییر اندازه پنجره مرورگر را می دهد یا مانع از آن می شود
scrollbars اگر صفحه وب بزرگتر از پنجره مرورگر باشد، اسکرول بارها را مجاز کرده یا آن ها را غیرمجاز می کند
height ارتفاع پنجره را برحسب پیکسل مشخص می کند
width پهنای پنجره را بر حسب پیکسل مشخص می کند
top مختصات y از گوشه بالا سمت چپ پنجره را تعیین می کند
left مختصات x از گوشه بالا سمت چپ پنجره را تعیین می کند

آرگومان های height و width و top و left مقادیری برحسب پیکسل دریافت می کنند. برای فعال کردن بقیه آرگومان ها از عدد ۱ و برای غیرفعال کردن آنها از عدد صفر استفاده می کنید. در اینجا یک مثال را می بینید:

var myWin = window.open( 'second.html', 'secWin', left=20,top=10,
width=400, height=250,toolbar=1, resizable=0,menubar=0,location=0' );

در این مثال، یک پنجره جدید باز شده و صفحه وب second.html را نمایش می دهد. صفحه مختصات ۲۰،۱۰ و با اندازه ۴۰۰×۲۵۰px باز می شود.

Stage_Script_icon

ذخیره اسکریپت ها درون یک فایل اسکریپت خارجی

می توانید تمام کد اسکریپت های خود برای یک سند را درون یک عنصر Script قرار دهید. با این حال عنصر Script دارای یک خاصیت src دلخواه است که می تواند به یک فایل js. ارجاع بدهد. یک فایل js. یک فایل متنی ساده است که کد جاوا اسکریپت درون آن قرار می گیرد. سپس در صفحه وب به این فایل ارجاع داده می شود تا مرورگر هنگام باز کردن صفحه وب، اسکریپت درون فایل اسکریپت را نیز اجرا کند. در اینجا ارجاع به یک فایل js. را می بینید:

<script type="text/javascript" src="valform.js"></script>

نکته: وقتی خاصیت src استفاده شود، از هر کدی که بین تگ های باز و بسته Script وجود داشته باشند، چشم پوشی می شود.

بزرگترین مزیت قرار دادن کد درون فایل های js. این است که می توانید به راحتی از تابع ها و دستورات آن درون وب سایت خود استفاده کنید. فرض کنید که یک اسکریپت برای ایجاد دکمه ها دارید. می توانید یا کد را درون کل صفحه های وب خود کپی کرده یا کد را درون یک فایل js. ایجاد کــرده و ســپــس با استفاده از </””=script src> به کد مراجعه کنید.

نکته: محتویات فایل js. کد جاواسکریپت کامل هستند. همان طور که نمی توانید عنصرهای HTML را درون یک تگ script قرار دهید، نمی توانید هیچ علامت HTML را درون فایل اسکریپت خارجی مورد استفاده قرار دهید.

javascript-logo-png

آشنایی با رویدادهای جاواسکریپت

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

جدول ۱ – رویدادهای رابط کاربری

رویداد وقتی که اتفاق می افتد چیزی که روی آن اعمال می شود
onload وقتی سند کاملاً بارگذاری شود (شامل تصاویر و دیگر محتویات خارجی) window
onunload وقتی سند کاملاً خالی شود (یعنی وقتی بخواهید به یک صفحه وب دیگر بروید یا پنجره مرورگر را ببندید) window
onresize اندازه پنجره مرورگر تغییر کند window
onscroll صفحه یا هر عنصری که داری مشخصه overview:flow اسکرول می شود scroll و هر عنصری که می تواند دارای نوارهای اسکرول باشد (برای مثال div)
onblur وقتی شی فوکوس را از دست بدهد window، از عنصرهایی که دارای یک خاصیت index هستند و لینک ها در بعضی از مرورگرها
onfocus شی فوکوس ورودی را دریافت می کند window، از هر عنصری که دارای یک خاصیت index می باشد و لینک ها در بعضی از مرورگرها
oncontextmenu وقتی کاربر منوی کلیک راست را باز می کند document و تمام عناصر قابل دیدن آن (در تمام مرورگرها پشتیبانی نمی شود)

جدول ۲ – رویدادهای ماوس

رویداد وقتی تولید می شود چیزی که روی آن اعمال می شود
onmousedown کاربر دکمه ماوس را روی یک عنصر فشار می دهد هر عنصر قابل دیدن
onmouseup کاربر دکمه ماوس را روی یک عنصر رها می کند هر عنصر قابل دیدن
onclick هر دو عمل فشردن دکمه و ماوس و رها کردن آن روی یک عنصر اتفاق بیفتند (یعنی هر دو رویداد mousedown و mouseup روی یک عنصر تولید شوند) هر عنصر قابل دیدن
ondblclick روی یک عنصر دو بار کلیک شود هر عنصر قابل دیدن
onmouseover کاربر ماوس را به روی یک عنصر قابل دیدن بیاورد (یکبار تولید می شود) هر عنصر قابل دیدن
onmouseout کاربر ماوس را به خارج از کادر یک عنصر می برد هر عنصر قابل دیدن

جدول ۳ – رویدادهای صفحه کلید

رویداد وقتی تولید می شود چیزی که روی آن اعمال می شود
onkeydown وقتی کاربر یک کلید را فشار می دهد window، document و تمام عناصر قابل دیدن که می توانند فوکوس را دریافت کنند
onkeyup وقتی کاربر کلید فشرده شده را رها می کند window، document و تمام عناصر قابل دیدن که می توانند فوکوس را دریافت کنند
onkeypress وقتی کاربر یک کلید را فشرده و رها می کند (بعد از keydown و keyup تولید می شود) document و تمام عناصر قابل دیدن که می توانند فوکوس را دریافت کنند

جدول ۴ – رویدادهای فرم

رویداد زمانی که تولید می شود چیزی که روی آن اعمال می شود
onchange وقتی یک عنصر form فوکوس را از دست داده و مقدار آن تغییر می کند input، textarea و select مبتنی بر متن
onselect وقتی کاربر متنی را در یک فیلد متنی انتخاب می کند وقتی عمل انتخاب کامل می شود این رویداد تولید می شود.
onsubmit کاربر فرم را ارسال می کند (با کلیک روی یک دکمه submit)؛ وقتی دکمه submit با یک فراخوان اسکریپت دیگر فعال شود، این رویداد تولید نمی گردد form
onreset کاربر یا اسکریپت فرم را دوباره بازنشانی کند (با کلیک روی دکمه reset) form

جدول ۵٫۵ – رویدادهای دیگر

رویداد وقتی اتفاق می افتد چیزی که روی آن اعمال می شود
error یک تصویر که به خوبی بارگذاری نشده یا یک خطا در اسکریپت ظاهر شود window,img
abort وقتی بارگذاری یک صفحه قبل از بارگذاری کامل یک تصویر متوقف شود (استفاده از این رویداد اندکی سخت است) img,object

 

672274_cd11_2

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

اداره کننده های رویداد در جاواسکریپت با دو روش تعریف می شوند:

  • از یک عنصر HTML : یک تابع یا عبارت جاواسکریپت را به یک خاصیت اداره کننده رویداد یک عنصر HTML وصل کنید.
  • در کد جاوا اسکریپت : یک تابع جاوا اسکریپت را به یک اداره کننده رویداد در اسکریپت خود وصل کنید.

وصل کردن از طریق یک عنصر HTML

عناصر HTML زیادی دارای رویدادهای متصل به خود هستند. بعنوان مثال عنصر img دارای یک رویداد onouseover است که وقتی ماوس روی تصویر قرار می گیرد، تولید می شود. عنصر لینک a نیز دارای یک رویداد onclick است که هنگام کلیک روی لینک تولید می شود. می توانید به مرورگر بگویید که وقتی یکی از این رویدادها تولید شدند، کد مورد نظر شما را اجرا کند. برای انجام این کار یک خاصیت (نام رویداد) را به یک عنصر اضافه می کنید. مقدار خاصیت نیز نام یک تابع جاواسکریپت است که می خواهید هنگام تولید رویداد اجرا شود. بعنوان مثال:

<element onevent="muFunction()" />

یا

<element onevent="alert( 'event fired' )" />

برای مثال عنصر body از خاصیت onload پشتیبانی می کند و عنصر form نیز از onsubmit پشتیبانی می کند. اگر بخواهید تا عمل هایی را بر مبنای این رویدادها انجام دهید در اینجا چگونگی وصل کردن دو عنصر HTML با کد جاوا اسکریپت را می بینید:

<head></p>
<p dir="ltr" style="text-align: left;"><script type="text/javascript"></p>
<p dir="ltr" style="text-align: left;">function init() {</p>
<p dir="ltr" style="text-align: left;">//Initialize something</p>
<p dir="ltr" style="text-align: left;">}</p>
<p dir="ltr" style="text-align: left;">function checkFormValues() {</p>
<p dir="ltr" style="text-align: left;">//function check Form Vaues</p>
<p dir="ltr" style="text-align: left;">}</p>
<p dir="ltr" style="text-align: left;"></script></p>
<p dir="ltr" style="text-align: left;"></head></p>
<p dir="ltr" style="text-align: left;"><body onload="init()"></p>
<p dir="ltr" style="text-align: left;"><form id="myform" onsubmit="checkFormVaues()"></p>
<p dir="ltr" style="text-align: left;"></form></p>
<p dir="ltr" style="text-align: left;"></body>

وقتی بدنه سند HTML بارگذاری می شود، تابع ()init فراخوانده می شود. سپس وقتی فرم توسط کاربر ارسال می شود، تابع ()checkFormValues نیز اجرا می شود.

مثال دوم از دستورات جاوا اسکریپت درون اداره کننده رویداد استفاده می کند:

<span</p>
<p dir="ltr" style="text-align: left;">pnmouseover="this.style.backgroundColor='yellow';this.style.border='2px solid black';"</p>
<p dir="ltr" style="text-align: left;">onmouseout="this.style.backgroudColor='white';this.style.border='none';">"Why do you suppose it was Reuben?" Mrs.Ellison asked the master.</p>
<p dir="ltr" style="text-align: left;"></span>

وقتی ماوس روی عنصر span قرار می گیرد، پس زمینه به رنگ زرد در آمده و خط دور نمایش داده می شود. وقتی ماوس از روی عنصر span خارج می شود، شیوه به حالت عادی باز می گردد. کلمه کلیدی this نشان دهنده شی است که رویداد را تولید می کند که این می تواند عنصر span باشد.

وصل کردن یک اداره کننده رویداد در کد

می توانید در خود کد نیز یک داره کننده رویداد را به یک عنصر وصل کنید. بعنوان مثال به جای اضافه کردن خاصیت onload به body و خاصیت onsubmit به عنصر form، می توانید کد زیر را در اسکریپت خود مورد استفاده قرار دهید:

<head></p>
<p dir="ltr" style="text-align: left;"><script type="text/javascript"></p>
<p dir="ltr" style="text-align: left;">function init()</p>
<p dir="ltr" style="text-align: left;">//Intialize something</p>
<p dir="ltr" style="text-align: left;">}</p>
<p dir="ltr" style="text-align: left;">function checkFormValues() {</p>
<p dir="ltr" style="text-align: left;">//Check form values</p>
<p dir="ltr" style="text-align: left;">}</p>
<p dir="ltr" style="text-align: left;">window.onload = init;</p>
<p dir="ltr" style="text-align: left;">var iform = document.getElementById( 'myform' );</p>
<p dir="ltr" style="text-align: left;">iform.onsubmit = checkFormValues;</p>
<p dir="ltr" style="text-align: left;"></script></p>
<p dir="ltr" style="text-align: left;"></head></p>
<p dir="ltr" style="text-align: left;"><body></p>
<p dir="ltr" style="text-align: left;"></body>

رویداد window.onload تابع ()init را اجرا می کند. با این حال دقت کنید که وقتی یک اداره کننده رویداد را در کد نسبت می دهید، از پرانتزها استفاده نمی کنید.

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

table-icon-84304

شی table در DOM

شی table یک رابط اسکریپت نویسی برای یک عنصر table است. می توانید از رابط DOM برای اضافه کردن و حذف قسمت هایی از جدول استفاده کنید. جدول های زیر مشخصه ها و متدهای پشتیبانی شده را نشان می دهند.

جدول ۱ – مشخصه های table

نام مشخصه چیزی که روی آن اعمال می شود
align ترازبندی جدول
bgColor رنگ پس زمینه
border خط دور جدول
caption عنوان جدول (تنها خواندنی)
cellPadding فاصله گذاری سلول (فاصله سلول از خط دور آن)
cellSpacing فاصله گذاری بین سلول ها
rows یک مجموعه از سطرها در جدول (تنها خواندنی)
summary خلاصه جدول (تنها خواندنی)

جدول ۲ – متدهای table

نام متد کاری که انجام می دهد
()createCaption یک عنوان برای جدول ایجاد می کند
()createTFoot یک پا صفحه برای جدول ایجاد می کند
()createTHead یک سرصفحه برای جدول ایجاد می کنید
()deleteCaption عنوان جدول را حذف می کند
()deleteTFoot پا صفحه را حذف می کند
()deleteTHead سر صفحه جدول را جذف می کند
()insertRow ردیف جدیدی را در جدول ایجاد می کنید

 

Viva-Results-Enquiry-Form-IconOrange

شی form در DOM

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

جدول ۱ – مشخصه های form

نام مشخصه چیزی که روی آن اعمال می شود
elements لیست کنترل های فرم در یک عنصر form (تنها خواندنی)
length تعداد کنترل های فرم در یک عنصر form (تنها خواندنی)
name نام عنصر form کنونی
acceptCharset لیست کاراکترست پشتیبانی شده برای فرم کنونی
action عمل عنصر form هنگام کلیک روی دکمه submit
enctype نوع محتویات عنصر form
encoding نوع محتویات عنصر form
method متد HTTP استفاده شده برای ارسال فرم
target مقصد ارسال فرم

جدول ۲ – متدهای فرم

نام متد کاری که انجام می دهد
()submit فرم را ارسال می کند
()reset فرم را به حالت اولیه بازمی گرداند

 

code-color-1

شی Window در DOM

شی window کنترلر برای کار کردن با پنجره مرورگر از درون سند HTML است. به دلیل این که شی window نمی تواند با سند ارتباط مستقیم برقرار کند، W3C این شی را به استانداردهای خود اضافه نکرده است. با این که مرورگرهای مختلف از مشخصه ها، متدها و رویدادهای مختلفی پشتیبانی می کنند، جدول های زیر مشخصه ها، متدها و رویدادهای مشترک در مرورگرهای اصلی را لیست کرده اند.

جدول ۱ – مشخصه های window

نام مشخصه چیزی که روی آن اعمال می شود
defaultStatus متن نوار وضعیت پنجره
document ارجاع به سند مربوط
frames آرایه از فریم های درون پنجره
history ارجاع به شی تاریخچه مرورگر
length تعداد فریم ها در پنجره
location URL پنجره
name نام پنجره
navigator ارجاع به شی هدایت گر
opener ارجاع به پنجره ای که پنجره کنونی را باز کرده است
parent ارجاع به پدر پنجره کنونی (یا زیرفریم)
self ارجاع به پنجره کنونی (یا زیرفریم)
statue متن در نوار وضعیت در پایین پنجره مرورگر
top ارجاع به بالاترین پنجره در سلسله مراتب پنجره
window ارجاع به پنجره کنونی

جدول ۲ – متدهای window

نام متد کاری که انجام می دهد
()alert یک پنجره اخطار را نمایش می دهد
()blur فوکوس را از پنجره خارج می کند
()clearINterval کنسل کردن اجرای تکرار شده در زمانی که از ()setInterval استفاده می شود
()clearTimeoutq مقدار وقفه مشخص شده را پایان می دهد
()close پنجره را می بندد
()confirm پنجره پیغام را برای کاربر نمایش می دهد تا کاربر بتواند پاسخ بدهد
()focus فوکوس را روی پنجره قرار می دهد
()moveBy پنجره را به اندازه مشخص شده جابجا می کند
()moveTo پنجرا را به مختصات مشخص شده جابجا می کند
()open پنجره جدید را باز می کند
()openDialog پنجره دیالوگ را باز می کند
()print پنجره Print را برای چاپ سند کنونی نشان می دهد
()prompt پنجره دیالوگ را نمایش داده و سپس متن وارد شده توسط کاربر را برمی گرداند
()resizeBy اندازه پنجره کنونی را به مقدار مشخص شده تغییر می دهد
()resizeTo اندازه پنجره را تغییر می دهد
()scroll پنجره را اسکرول کرده تا مکان مورد نظر در صفحه وب را نمایش دهد
()scrollBy سند در پنجره را به اندازه مشخص شده اسکرول می کند
()scrollTo پنجره را به مختصات مشخص شده در سند اسکرول می کند
()setInterval تابع مشخص شده را در هر میلی ثانیه تعیین شده اجرا می کند
()SetTimeout وقفه برای اجرای تابع را مشخص می کند

 

document-management-software

شی Document

شی Document گره ریشه برای درخت DOM بوده و هیچ معادلی در عناصر HTML ندارد. به عنوان مثال تمام عناصر html، head و body درون document قرار می گیرند. این شی به عنوان کنترلر اصلی برای هر چیز مربوط به سند HTML عمل می کند. جداول زیر مشخصه ها و متدهای این شی را لیست کرده اند:

جدول ۱ – مشخصه های سند

نام مشخصه چیزی که مشخصه روی آن اعمال می شود
alinkColor رنگ لینک های فعال
anchors لیست انکرها در سند
applets لیست دارای ترتیب اپلت ها در سند
bgColor رنگ پس زمینه
body یک ارجاع به عنصر body (تنها خواندنی)
contentType نوع محتویات از هدر MIME
cookie لیست کوکی ها که توسط نقطه ویرگول جدا شده اند
defaultView ارجاع به شی پنجره
doctype تعریف نوع سند (DTD) سند کنونی (تنها خواندنی)
documentElement عنصری که یک فرزند مستقیم سند است – عنصر html (تنها خواندنی)
domain دامین سند کنونی
embeds لیست اشیا جاسازی شده درون سند
fgColor رنگ پیش زمینه یا پس زمینه
firstChild اولین گره در لیست فرزندان
forms لیست عناصر فرم درون سند
images لیست تصاویر در سند
lastModified تاریخی که سند آخرین بار تغییر کرده است
linkColor رنگ هایپرلینک ها
links لیست هایپرلینک های درون سند
plugins لیست پلاگین های موجود
referrer URL صفحه ای که به این صفحه لینک داده است
styleSheets لیست برگه های شیوه مربوط به این سند
Title عنوان سند کنونی
URL URL سند کنونی
vlinkColor رنگ هایپرلینک های بازدید شده

جدول ۲ – متدهای سند

نام متد کاری که انجام می دهد
()close استریم سند را می بندد (بعد از نوشتن)
()createAttribute خاصیت جدیدی را ایجاد می کند
()createDocumentFragment تکه سند جدیدی را ایجاد می کند
createElement(tagName) عنصر جدیدی را با نام تگ فراهم شده ایجاد می کند.
()createEvent یک رویداد ایجاد می کند
()createRange شی Range را ایجاد می کند
()createTextNode یک گروه متنی را ایجاد می کند
()getElementById ارجاع به عنصر مشخص شده را برمی گرداند.
()importNode یک نسخه شبیه سازی شده گره را از یک سند خارجی برمی گرداند
()write متنی را در سند می نویسد
()writeln یک خط از متن را در سند می نویسد