معرفی dhtml و آموزش مختصر آن

tarhebartar

Member
سلام!

در این مطلب می خوام به شمل دوستن هم توضیحی در باره dhtml بدهم و یکسری از کارهای اون رو بهتون آموزش بدم.


dhtml چیست : با ادغام کدهای جاوا اسکریپت در صفحات تحت وب که با html کد نویسی شده اند صفحات dhtml درست می شوند.و امکانی دارند که خود html ایستا ندارد.مثل بررسی اطلاعات فرم قبل ارسال , تغییر رنگ زمینه با یکسری action خاص و غیره....

چگونه dhtml بنویسیم : همان طور که در بالا توضیح دادم باید اسکریپت های جاوا رو با html هماهنگ و ادغام کنیم.ولی چه جوری.با استفاده از event ها.

event چیست : اکشن هایی هستند که بر روی عناصر سایت های ما انجام می گیرد.مثلا :

onclick - onmouseover - unload - onmouseout و غیره.برای یادگیری این همه event ها به نرم افزار هایی مثل frontpage مراجعه کنید.

برای مثال ما می خواهیم وقتی روی یک دکمه کلیک کردیم رنگ بک گراند صفحه ما تغییر کند.برای این کار از html نمی توان استفاده کرد چون قدرت این کار رو ندارد پس بنابر این باید از dhtml استفاده کرد و به کدهای خود یک script اضافه کنیم.من برای نمونه این اسکریپت رو از قبل نوشته ام :

HTML:
<input type="button" value="قرمز" onclick="document.bgColor='red';">
<br><br>
<input type="button" value="سبز" onclick="document.bgColor='green';">
<br><br>
<input type="button" value="سیاه" onclick="document.bgColor='black';">
<br><br>
<input type="button" value="آبی" onclick="document.bgColor='blue';">

در بالا برای مثال چند دکمه رو گذاشته ام که وقتی روی هر کروم کلیک می کنیم با توجه به اسم دکمه رنگش تغییر می کند.

از dhtml می توان برای ساخت منو نیز استفاده کرد.مثل زیر:

HTML:
<center>
<table border="0" width="50%" id="table1" cellspacing="0" cellpadding="0" style="font-family: Tahoma; font-size: 10pt; text-align: center">
 <tr>
  <td style="background-color:#f0f0f0" onmouseover="this.style.background='orange'" onmouseout="this.style.background='#f0f0f0'">&nbsp;<a href="
 

tarhebartar

Member
اشتباه قبلی

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


HTML:
<table border="0" width="50%" id="table1" cellspacing="0" cellpadding="0" style="font-family: Tahoma; font-size: 10pt; text-align: center">
<tr>
<td style="background-color:#f0f0f0" onmouseover="this.style.background='orange'" onmouseout="this.style.background='#f0f0f0'">&nbsp;لینک شما</td>
<td style="background-color:#f0f0f0" onmouseover="this.style.background='orange'" onmouseout="this.style.background='#f0f0f0'">&nbsp;لینک شما</td>
<td style="background-color:#f0f0f0" onmouseover="this.style.background='orange'" onmouseout="this.style.background='#f0f0f0'">&nbsp;لینک شما</td>
<td style="background-color:#f0f0f0" onmouseover="this.style.background='orange'" onmouseout="this.style.background='#f0f0f0'">&nbsp;لینک شما</td>
<td style="background-color:#f0f0f0" onmouseover="this.style.background='orange'" onmouseout="this.style.background='#f0f0f0'">&nbsp;لینک شما</td>
</tr>
</table>
[HTML/]
 
[CENTER]:lol:[/CENTER]
 
آخرین ویرایش:

جدیدترین ارسال ها

بالا