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 بطور بالقوه توليد اسکريپت های مضر را توسط افراد بدانديش فراهم می کنند. مرورگرها محدوديت هائی را برای کاهش خطر اسکريپت ها اعمال می کنند.
| 