تماس درباره   صفحه اصلی
  برنامه نويسی مبتنی بر وب > DHTML  
 
 

DHTML


DHTML تکنيکی برای ساخت صفحات وب پوياست که از جاوا اسکريپت برای کنترل و تغيير عناصر صفحات وب بر روی مرورگر کاربر استفاده می کند. در اين صفحه با DHTML، DOM و JavaScript آشنا خواهيد شد.

تگ Script
JavaScript


(Dynamic HTML ) DHTML عبارتی است که هنر ساخت صفحات پويا و تعاملی را توصيف می کند.

DHTML برای توليد صفحات وب پوياست و اجازه کنترل بيشتر روی عناصر HTML و تغيير آنها را بدون مراجعه به وب سرور می دهد.

DHTML ويژگی جديدی در HTML نيست بلکه روش جديدی برای کنترل کدها و فرامين HTML استاندارد است. وقتی يک صفحه وب از سرور لود می شود تا زمانيکه درخواست ديگری به سرور داده نشود تغيير نمی کند.

DHTML شامل چهار قسمت است:

Document Object Model (DOM) •
HTML Events •
Cascading Style Sheets (CSS) •
Scripts •

DOM

DOM از استانداردهای W3C است که روشی را برای دسترسی و تغيير صفحات وب معرفی می کند. DOM اشيا و صفات کليه عناصر HTML و متدهای دسترسی به آنها را تعيين می کند. به عبارت ديگر استانداردی برای نحوه پيداکردن، تغيير، اضافه کردن يا حذف عناصر HTML است.

DOM به شما اجازه دست يافتن به هر قسمت از صفحه وب جهت تغيير آن را می دهد. با DOM می توانيد هر عنصر در مستند HTML را نامگذاری کرده از اين طريق به آنها دسترسی پيدا کنيد و صفات آنها را تغيير دهيد.

HTML Events

يکی از معمول ترين کاربردهای DHTML تغيير صفات تگ ها بر اساس يک رويداد مانند کليک ماوس، زمان، تاريخ يا غيره است.

رويدادها بخشی از DOM هستند و درباره ايجاد صفحات وبی است که به رويدادهای کاربر پاسخ می دهد.

CSS

CSS نحوه نمايش عناصر HTML را مشخص می کند. شيوه ها برای کنترل ظاهر صفحه وب از DHTML استفاده می کنند. با استفاده از اسکريپت و DOM می توانيد شيوه عناصر صفحه وب را تغيير دهيد (برای مطالعه بيشتر درباره CSS به بخش شيوه ها مراجعه نمائيد).

Scripts

با استفاده از يک زبان اسکريپتی اشيای مشخص در DOM را می توانيد کنترل کنيد. جاوااسکريپت رايج ترين زبان اسکريپتی روی اينترنت است که با همه مرورگرها کار می کند. DHTML درباره استفاده از جاوااسکريپت برای کنترل، دسترسی و دستکاری عناصر HTML است.

تگ script

يک اسکريپت توسط تگ <script> تعريف می شوند. با استفاده از صفت type می توان نوع زبان اسکريپت را مشخص کرد.


مثال. اسکريپت زير عبارت Hello World! را توليد می کند.

<script type="text/javascript">
   document.write("Hello World!")
</script>


VBScript متعلق به مايکروسافت گرامری مشابه Visual Basic دارد و می تواند برای نوشتن اسکريپت ها استفاده شود اما تنها توسط Internet Explorer ساپورت می شود.

<script type="text/vbscript">
   document.write("Hello World!")
</script>

عبارت document.write() برای نوشتن خروجی روی صفحه وب استفاده می شود.

مرورگرهائی که تگ <script> را نمی شناسند کليه محتوای آنرا نمايش می دهند. برای جلوگيری از اين کار بهتر است در تگ توضيحات قرار گيردد. مرورگری که اسکريپت را نمی شناسد توضيحات را نديده می گيرد درحاليکه مرورگرهای جديد اسکريپت را حتی اگر در داخل توضيحات باشد متوجه می شوند.

<script type="text/javascript">
<!--
   ...
//-->
</script>

برای مرورگرهائی که تگ اسکريپت را تشخيص می دهند اما خود اسکريپت را پشتيبانی نمی کنند علاوه بر مخفی کردن اسکريپت درون توضيحات می توانيد از تگ <noscript> استفاده کنيد.


مثال. کد زير تاريخ و زمان جاری را روی صفحه نمايش می دهد.

<html>
<body>
<script type="text/javascript">
<!--
   document.write(Date());
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
</body>
</html>

مشاهده خروجی در مرورگر

JavaScript

JavaScript يکی از محبوب ترين زبان های اسکريپتی در وب است و در کليه مرورگرها ازجمله Internet Explorer، FireFox و Opera کار می کند

جاوا اسکريپت يک زبان اسکريپتی با گرامر بسيار ساده است. زبان اسکريپتی يک زبان برنامه نويسی کم وزن (lightweight) است. تقريبا هر کسی می تواند با جاوااسکريپت قطعه کوچکی از کد را در صفحه وب خود اضافه کند.

جاوا اسکريپت علی رغم نامش با وجود شباهت های سطحی ربطی به زبان برنامه نويسی Java ندارد. جاوا اسکريپت مشابه جاوا طراحی شد اما کار با آن برای برنامه نويسان غيرحرفه ای بسيار ساده تر است. در حاليکه جاوا يک زبان برنامه نويسی قدرتمند و کامل مشابه C++ است.

جاوااسکريپت ابتدا توسط Brendan Eich در Netscape تحت نام Mocha پياده سازی شد. که بعدها نام LiveJava را به خود گرفت و در نهايت JavaScript ناميده شد. اولين بار در مرورگر Netscape 2.0B3 در دسامبر 1995 معرفی و ظاهر شد. استاندارد رسمی جاوا اسکريپت ECMA-262 است.

جاواسکريپت هميشه مستقيم درون صفحه وب قرار می گيرد و بدون نياز به کامپايل اجرا می شود. موتور جاوا اسکريپت (JavaScript engine) مفسری است که کدهای جاوا اسکريپت را تفسير و اجرا می کند.

کاربرد اصلی جاوا اسکريپت برای نوشتن توابعی است که در صفحات HTML جا می گيرد و با DOM تعامل دارد. چون کد جاوا اسکريپت به صورت محلی در مرورگر کاربر و بدون مراجعه به سرور اجرا می شود می تواند به فعاليت های کاربر سريعا پاسخ بدهد.

دسترسی و تغيير عناصر HTML

از جاوا اسکريپت می توان برای تغيير محتوا يا صفات عناصر HTML نيز استفاده کرد. برای تغيير محتوای يک عنصر HTML دستور کلی به صورت زير است:

document.getElementById(id).innerHTML=new HTML

فرم کلی تغيير صفت خاصه يک عنصر HTML به صورت زير است:

document.getElementById(id).attribute=new value

جاوااسکريپت می تواند شيوه عناصر HTML را نيز تغيير بدهد. صورت کلی تغيير شيوه يک عنصر HTML به صورت زير است:

document.getElementById(id).style.property=new style

اسکريپت می تواند وقتی رويدادی اتفاق افتاد اجرا شود برای مثال وقتی کاربر روی عنصری کليک کرد. برای اجرای کد وقتی کاربر کليک می کند از رويداد زير استفاده کنيد.

onClick=javascript


مثال. تغيير محتوای عنصر H1 که با شناسه header مشخص شده است. با جاوا اسکريپت متن عنوان از Old Header به New Header تغيير می کند.

<html>
<body>
<h1 id="header">Old Header</h1>
<script type="text/javascript">
   document.getElementById("header").innerHTML="New Header";
</script>
</body>
</html>

مشاهده خروجی در مرورگر

مثال. در کد زير صفت src عنصر img که با شناسه image مشخص شده است تغيير می کند.

<html>
<body>
<img id="image" src="smiley.gif">
<script type="text/javascript">
   document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>

مشاهده خروجی در مرورگر

پاسخ به رويدادهای HTML

در HTML4 توسط رويدادها می تواند باعث انجام فعاليتی مانند اجری يک اسکريپت شد. برای مثال می توان از رويداد onClick روی يک دکمه استفاده کرد تا يک تابع جاوا اسکريپت هنگامی که کاربر روی دکمه کليک می کند اجرا شود.

رويدادها روی تگ های HTML مشخص می شوند. هر عنصر روی صفحه وب دارای تعدادی رويداد است که می توانند يک اسکريپت جاوا را فعال کنند. ليستی از صفاتی که می توانند در تگ ها برای تعريف يک رويداد استفاده شوند در ادامه آمده است.

ليست رويدادهای Keyboard (اين رويدادها در base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title معتبر نيستند).

صفت شرح
onkeydown وقتی کليدی فشار داده می شود
onkeypress وقتی کليدی فشار داده می شود و رها می شود
onkeyup وقتی کليدی رها می شود

ليست رويدادهای Mouse (اين رويدادها در base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title معتبر نيستند).

صفت شرح
onclick وقتی روی ماوس کليک می شود
ondblclick وقتی روی ماوس دوبارکليک می شود
onmousedown وقتی دکمه ماوس فشار داده می شود
onmousemove وقتی اشاره گر ماوس روی عنصرحرکت می کند
onmouseout وقتی اشاره گر ماوس از روی عنصر خارج می شود
onmouseover وقتی اشاره گر ماوس روی عنصر است
onmouseup وقتی دکمه ماوس رها می شود

ليست رويدادهای Window که تنها در عناصر frame معتبر هستند.

صفت شرح
onload اسکريپت وقتی سند load می شود
onunload اسکريپت وقتی سند unload می شود

ليست رويدادهای Form که تنها در عناصر form معتبر هستند.

صفت شرح
onchange وقتی عنصر تغيير می کند
onsubmit وقتی فرم ارسال می شود
onreset وقتی فرم reset می شود
onselect وقتی عنصر انتخاب می شود
onblur وقتی تمرکز از عنصر خارج می شود
onfocus وقتی روی عنصر تمرکز می شود

مثال. وقتی کاربر روی عنوان H1 کليک می کند متن آن عوض می شود.

<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text</h1>
</body>
</html>

مشاهده خروجی در مرورگر

مثال. می توانيد اسکريپت را درقسمت Head اضافه کنيد سپس آنرا فراخوانی کنيد.

<html>
<head>
<script type="text/javascript">
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text</h1>
</body>
</html>

مشاهده خروجی در مرورگر

مثال. تغيير شيوه يک عنصر در صفحه.

<html>
<body>
<h1 onclick="this.style.color='red' ">Click Me!</h1>
</body>
</html>

مشاهده خروجی در مرورگر

تغيير يک تصوير وقتی کاربر دکمه ماوس را پايين نگه داشته است
نمايش يک پيغام وقتی صفحه بارگذاری شد
تغيير رنگ يک عنصر وقتی ماوس روی آن حرکت می کند
پنهان کردن يک عنصر


نکته. جاوااسکريپت و DOM بطور بالقوه توليد اسکريپت های مضر را توسط افراد بدانديش فراهم می کنند. مرورگرها محدوديت هائی را برای کاهش خطر اسکريپت ها اعمال می کنند.


 

 


 

صفحه اصلی| PDF| درباره| تماس