مثال های برای آموزش DHTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<html> <head> <style> body { background-attachment: fixed; background-image: url('/bulboff.gif'); background-repeat: no-repeat; } </style> </head> <body> <p>صفحه را اسکرول کنید و ببینید چه اتفاقی می افتد</p> <br /><br /><br /><br /><br /><br /><br /> <p>صفحه را اسکرول کنید و ببینید چه اتفاقی می افتد</p> <br /><br /><br /><br /><br /><br /><br /> <p>صفحه را اسکرول کنید و ببینید چه اتفاقی می افتد</p> <br /><br /><br /><br /><br /><br /><br /> <p>صفحه را اسکرول کنید و ببینید چه اتفاقی می افتد</p> <br /><br /><br /><br /><br /><br /><br /> <p>صفحه را اسکرول کنید و ببینید چه اتفاقی می افتد</p> <br /><br /><br /><br /><br /><br /><br /> <p>صفحه را اسکرول کنید و ببینید چه اتفاقی می افتد</p> <br /><br /><br /><br /><br /><br /><br /> <p>صفحه را اسکرول کنید و ببینید چه اتفاقی می افتد</p> <br /><br /><br /><br /><br /><br /><br /> <p>صفحه را اسکرول کنید و ببینید چه اتفاقی می افتد</p> <br /><br /><br /><br /><br /><br /><br /> <p>صفحه را اسکرول کنید و ببینید چه اتفاقی می افتد</p> </body> </html> <html> <body> <h1 id="header">My header</h1> <script type="text/javascript"> document.getElementById('header').style.color="red"; </script> <p><b>Note:</b> It is the script that changes the style of the element!</p> </body> </html> |
چگونه به یک المنت دستیابی پیدا کنیم و شیوه آن را تغییر دهیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html> <body> <img id="image" src="/smiley.gif" width="32" height="32"> <script type="text/javascript"> document.getElementById('image').src="/landscape.jpg"; </script> <p><b>Note:</b> The original image was a smiley, but the script changes the source to a landscape image!</p> </body> </html> |
چگونه می توان به یک تصویر عنصر دسترسی داشت و خصوصیت “SRC” آن را تغییر داد؟
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html> <body> <h1 id="header">Old header</h1> <script type="text/javascript"> document.getElementById('header').innerHTML="New header"; </script> <p>Note that the original text was "Old header"!</p> </body> </html> |
چگونه می توان به یک عنصر دسترسی داشت؟
عنصر باید یک خصوصیت شناسه تعریف شده و یک فایل آغازگر داشته باشد. JavaScript با اکثر مرورگرها سازگار است بنابراین ما از JavaScript استفاده می کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <body> <h1 id="header">My header</h1> <script type="text/javascript"> document.getElementById('header').style.color="red"; </script> </body> </html> |
ماکرو ها رنگ عنوان عنصر را تغییر می دهند و این خروجی تولید می شود:
My header
با مدیریت رویدادها شما می توانید بعضی کارها را روی یک عنصر وقتی که رویدادی رخ می دهد انجام دهید.
مثال ها
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <body> <h1 onmouseover="style.color='red'" onmouseout="style.color='black'"> Mouse over this text</h1> </body> </html> |
چگونه می توان رنگ یک عنصر وقتی که نشانگر موس بالا و بیرون یک عنصر حرکت می کند را تغییر داد :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<html> <head> <script type="text/javascript"> cc=0; function changeimage() { if (cc==0) { cc=1; document.getElementById('myimage').src="/bulbon.gif"; } else { cc=0; document.getElementById('myimage').src="/bulboff.gif"; } } </script> </head> <body> <img id="myimage" onclick="changeimage()" border="0" src="/bulboff.gif" width="100" height="180" /> <p>Click to turn on/off the light</p> </body> </html> |
چگونه می توانید تصویر را تغییر دهید وقتی که روی آن کلیک می کنید و به تصویر اصلی برگردید وقتی که دوباره روی آن کلیک می کنید. مثل روشن کردن یک لامپ.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<html> <head> <script type="text/javascript"> function lighton() { document.getElementById('myimage').src="/bulbon.gif"; } function lightoff() { document.getElementById('myimage').src="/bulboff.gif"; } </script> </head> <body> <img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="/bulboff.gif" width="100" height="180"> <p>Click to turn on the light</p> </body> </html> |
فقط وقتی که کلید موس را پایین نگه می دارید آن لحظه لامپ روشن است.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html> <head> <script type="text/javascript"> function mymessage() { alert("This message was triggered from the onload event"); } </script> </head> <body onload="mymessage()"> </body> </html> |
وقتی که بار گذاری تمام شد یک پیام نمایش می دهد.
مدیریت رویدادها با DHTML
با مدیریت رویدادها شما می توانید بعضی کارها را روی یک عنصر انجام دهید وقتی که یک رخداد اتفاق می افتد: مثلا وقتی که کاربر روی یک عنصر کلیک می کند، وقتی که صفحه بار گذاری می شود، وقتی که یک شکل ارائه داده می شود، و غیره.
<h1 onclick=”style.color=’red'”>Click on this text</h1>
مثال بالا یک عنوان تعریف می کند و در صورتی که کاربر روی آن کلیک کند به قرمز تبدیل می شود.
شما همچنین می توانید یک ماکرو در قسمت بالای صفحه اضافه کنید و سپس تابع را از مدیریت رویدادها فراخوانی کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<html> <head> <script type="text/javascript"> function changecolor() { document.getElementById('header').style.color="red"; } </script> </head> <body> <h1 id="header" onclick="changecolor()"> Click on this text</h1> </body> </html> |
مدیریت رویدادهای HTML4.0
رخدادها | اتفاق می افتد وقتی که . . . |
onabort | صرف نظر کردن از بارگذاری یک صفحه. |
onblur | یحذف یک شیئ. |
onchange | تغییر دادن مقادیر شیئ. |
onclick | کلیک کردن روی یک شیئ. |
ondblclick | دابل کلیک کردن روی یک شیئ. |
onfocus | فعال کردن یک شیئ. |
onkeydown | پایین نگه داشتن کلیدی از صفحه کلید. |
onkeypress | فشار دادن کلیدی از صفحه کلید. |
onkeyup | رها کردن کلیدی از صفحه کلید. |
onload | وقتی که بارگذاری یک صفحه تمام شد.نکته: در Netscap این رخداد در طول مدت بارگذاری صفحه اتفاق می افتد. |
onmousedown | کلیک کردن موس. |
onmousemove | حرکت نمایش گر روی یک شیئ. |
onmouseover | حرکت نمایش گر بالای یک شیئ. |
onmouseout | نمایشگر بدون حرکت رو شیئ. |
onmouseup | رها کردن کلید موس. |
onreset | بار گذاری مجدد فرم. |
onselect | انتخاب کردن محتویات یک صفحه. |
onsubmit | ارائه دادن فرم. |
onunload | بستن یک صفحه. |
خلاصه DHTML
این خود آموز به شما می آموزد که چگونه از DHTML برای ساخت صفحات پویا و بلادرنگ استفاده کنید.
شما یاد می گیرید که چگونه از ترکیب HTML ، CSS و JavaScript استفاده کنید و به صفحات HTML جان تازه بدهید.
حالا شما می دانید که DHTML چیست، گام بعدی چیست؟
گام بعدی یادگیری در مورد HTML DOM و ASP است.
HTML DOM
HTML DOM یک روش استاندارد برای دستیابی و دستکاری صفحات HTML تعریف می کند.
HTML DOM یک زبان مستقل و پایه است که می توان با هر زبان برنامه نویسی استفاده کرد مثل: Java,JavaScript و VBScript.
ASP
ماکروها در یک فایل HTML روی کلاینت اجرا می شوند ( در مرورگرها ) ولی در یک فایل ASP روی سرور اجرا می شوند.
با ASP شما می توانید صفحات را پویا کنید، تغییر یا اضافه کردن به محتوای یک صفحه وب به داده های ارائه شده از فرم های HTML پاسخ می دهد.دستیابی هر داده به پایگاه داده ها و بازگرداندن به مرورگر باعث بهبود یک صفحه وب شده که آن را برای کاربران اختصاصی مفید می سازد.
از آنجایی که فایل های ASP به عنوان HTML ساده باز گردانده می شوند می توانند در هر مرورگری نمایش داده شوند.
منبع : w3schools.com
مقداد علی بخشی هستم. موسیقی دان، برنامه نویس، متخصص هوش مصنوعی، علم داده، متخصص بلاکچین و توسعه دهنده ربات های هوشمند.
دانش آموخته مقطع ارشد و دکتری دانشکده فنی دانشگاه تهران هستم. با سابقه تدریس درس برنامه نویسی در دانشگاه (پردیس بین الملل کیش دانشگاه تهران)