لغة Dhtml

[مُجَاهِد]

DHTML هي عبارة عن جمع العديد من مزايا التصفح في متصفحات الجيل الرابع والتى بدورها تجعل الصفحة أكثر حيوية و تفاعل.

إذا فالـ DHTML ليست لغة كجافا ولكن ميزة أو خاصية تعطي المتصفح القدرة على أن يكون حيوي وتفاعلي.

وألان لنرى ماذا قصد مطورا DHTML بإضافة كلمة Dynamic إلى عبارة HTML ، فهنا قصدوا إمكانية المتصفح من تغيير شكل أو نمط الصفحة بعد تحميلها.

حسنا لتوضيح المعنى لنفترض أنك اردت أن تكتب كلمة ما في الصفحة بإستخدام لغة جافا ، سيتوجب أن تقوم بالتالي:

**********
********.write("This is text created on the fly!")
</******>

ليس سيء اليس كذلك! ولكن لنفترض أنك أردت أن تكتب شيء معين عند طلبه "أعني عندما يقوم زائر بتصفح صفحتك" ، عندها ستحتاج إلى إستخدام زر يظهر صندوق إدخال لكي يكتب فيه الزائر ما يريد ثم ستحاول أن تأخذ ما كتب وتضعه مرة أخرى في صفحتك. بالطبع قد تنجح معك العملية وقد لايكون نجاحها بالشكل الذي كنت تريده أو تتمناه.

ولكن بإستخدام DHTML تستطيع أن تغيير محتويات الصفحة عند الطلب وبطريقة سهلة وحتى بعد تحميل الصفحة.

ولكن لا تتحفز ..!! فلكل شيء جانبه السيء. عند تطوير هذه اللغة من قبل مصنعي المتصفحات "أعني مايكروسوفت و نت سكيب" أحب كل منهما أن يكون لمتصفحه الميزات الأفضل ، مما دعى في النهاية إلى عدم توافق المتصفحين 100% . نعم يمكنك أن تكتب بعض الأوامر ويقوم كلا المتصفحين بتنفيذها ولكن الأوامر الأكثر تعقيدا قد تجد أن كل متصفح له صيغة مختلفة عن الأخرى. والأمر في الأخير راجع إليك لكي تقرر ما يناسبك من المتصفحين.

قنية DHTML في متصفح IE4 من مايكروسوفت

يبدو أن تقنية DHTML في هذا المتصفح أكثر مرونة و مزايا ولكن ذلك سيؤدي إلى بعض التعقيدات في إستخدامها.

كائن النمط "STYLE" في متصفح IE4

جميع عناصر HTML في هذا المتصفح أصبحت تدعم الآن كائن النمط "STYLE". وهو بدوره يكون الكائن الحيوي الذي يسمح بتغيير شكل ونمط العناصر. إنظر إلى هذا المثال:

<div id="adiv"></div>

هذا مثال على إستخدام العناصر المحسنة. لا حظ هنا أننا أعطينا هذا العنصر تعريف "id" بأسم مجازي. والآن إذا رغبت في دعوة ذلك العنصر ماعليك إلا منادة أسمه ، كما يوضح هذا المثال:

adiv.style

بالطبع كائن النمط "STYLE" يحتوي على العديد من الخصائص والتي عند التعامل معها تمكنك من تغيير شكل العنصر. ومن أبرز هذه الخصائص:

أبرز خصائص كائن النمط

BackgroundColor لون الخلفية للعنصر
backgroundImage صور الخلفية للعنصر
color لون العنصر
position مكان أو موقع العنصر
pixelWidth عرض العنصر
pixelHeight ارتفاع العنصر
pixelLeft موقع العنصر الأيسر
pixelTop موقع العنصر العلوي


بالطبع يوجد العديد من الخصائص ولكن تلك كانت أكثرها استخداما. ومن خلال الولوج إلى تلك الخصائص يمكنك أن تغيير من شكل العنصر. أنظر المثال التالي

حرك مشيرة الفأرة حولي

وإليك الأوامر التى استخدمناها في مثالنا السابق:

<span id="sometext" onMouseover="sometext.style.color='red'"
onMouseout="sometext.style.color='black'">حرك مشيرة الفأرة حولي</span>

لاحظ أننا غيرنا لون السطر من خلال sometext.style='red'
استخدمت أولا اسم العنصر للولوج إليه ثم من خلال كائن style استطعت تغيير لون العنصر

إخواني يمكن الأكواد يمكن ما تظبط هون بالمنتدى اذا بدك تتأكد منها ادخل على صفحتك في الانترنت وجربها طبعا ً مع مثال انت تختاره

[مُجَاهِد]

وإليك مثال آخر تم دمجه بلغة الجافا :
ويقوم هذا الكود بتكبير الصورة عند وضع مؤشر الماوس عليها :
والكود هو:
<img id="aimage" src="piza.gif" onMouseover="enlarge()" onMouseout="revertback()">

<****** language="Java******1.2">
function enlarge(){
aimage.style.pixelWidth=164
aimage.style.pixelHeight=202
}

function revertback(){
aimage.style.pixelWidth=82
aimage.style.pixelHeight=101
}
</******>

ولرؤية الكود مطبق كل ما عليك فعله هو التالي : وهذه الطريقة طبعا ً مأخوذة من اخي H CAGE بس رح حطا للضرورة في هذا الموضوع :

1- إذهبوا الى خيارات المجلد من أدوات من أي إطار و يندوز

2- ثم عرض

3- ثم ستجدون سطر مكتوب فيه : إخفاء ملحقات الملفات للأنواع المعروفة

4- ستجدها معلمة بإشارة صح أزل الاشارة

5- ضع موافق

الان عندما تنشئ ملف مفكرة ستجد إسمه و بعده نقطة و بعدها txt
عندما تلصق الاكواد في ملف المفكرة إحفظ التغيرات في الملف و أغلقه
و الان إعمل له إعادة تسمية و غير فقط الاحرف الثلاثة الاخيرة بعد النقطة
من txt الى html
_____________________________________________

أمثلة على تغيير محتويات الصفحة بطريقة حيوية و تفاعلية :
المثال الأول :
ويقوم هذا الكود بكتابة جمل متتالية (جرب رح تفهم)
الكود :


<div id="mydiv"></div>

<****** language="Java******1.2">
var the*******s=new Array()
the*******s[0]="كيف صحتك"
the*******s[1]="بخير و لله الحمد"
the*******s[2]="على كل سعدت بمكالمتك"
var current=0

function change*******(){
mydiv.innerHTML=the*******s[current]
if (current==2) current=0
else current++
setTimeout("change*******()",3000)
}
window.onload=change*******
</******>


المثال الثاني :
ويقوم هذا الكود بتحريك الصورة بشكل مستقيم من اليسار إلى اليمين وتستطيع التحكم به من خلال (حرك –ارجع)
الكود :

<div id="logo" style="position:relative">
<img src="anhome.gif">
</div>
**********
function moving2(){
if (logo.style.pixelLeft<1000)
logo.style.pixelLeft+=5
moveid2=setTimeout("moving2()",50)
}
function come_back2(){
clearTimeout(moveid2)
spaceship.style.pixelLeft=0
}
</******>
<form>
<input type="button" value="حرك" onClick="moving2()">
<input type="button" value="ارجع" onClick="come_back2()">
</form>


لقد شرحت لكم بعض الأكواد واتمنى ان يكون الشرح وافي وحاولت ان أضع الامثلة المطبقة في الموضوع لكن للأسف الاكواد في المنتدى غير مفعلة .