الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

مجموعة دروس في DHTML

بدأه اشليان في 3 فبراير 2010 · 6 رد · 3,737 مشاهدة · في منتدى تصميم صفحات الويب
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

هل سألت نفسك يوما ما معنى DHTML?

هل تريد أنت تعرف ماهي DHTML؟؟

اذا مرحبا بك في مجموعة الدورس المتواضعة جدا فقد قمت بترجمتها جميعا من موقع

http://www.w3schools.com/dhtml/dhtml_intro.asp

ملاحظة:

هذه الدروس متواضعة جدا فاذا وجدت أي خطاء الرجاء التصحيح

بسم الله الرحمن الرحيم

DHTML هو فن في تجميع HTML, JavaScript, DOM,CSS.

DHTML ليست لغة

DHTML هي اختصار Dynamic HTML.

DHTML ليست لغة ولامعيار ويب

DHTML تعني مزيج من HTML, JavaScript, DOM وCSS

DHTML هي صفحة HTML

تتميز أنها

1-تدعم JavaScript

2-تدعم DOM

3-تدعم الاحداث

4-تدعم CSS

DHTML هو استخدام هذه الميزات لانشاء صفحة ديناميكة

JavaScript

هي اكثر لغة سكربت شائعة في الانترنت

DHTML هو استخدام JavaScript لتحكم والوصول ومعالجة عناصر HTML

HTML DOM

هو اختصار Document Object Model

وهو يمثل طريقة قياسية للوصول ومعالجة العناصر

DHTML هو استخدام DOM للوصول ومعالجة العناصر

الاحداث

الاحداث هي جزء من HTML DOM

DHTML هي انشاء صفحات تستجيب لاحداث المستخدم

CSS

لغة CSS تهتم بكيفية عرض عناصر html

DHTML هو استخدام الجافاسكربت و HTML DOM لتغير ستايل و موقع عناصر HTML

النهاية

إن شاء الله اضع الدروس الاخررى في وقت قريب

الرجاء الدعاء

تم تعديل هذه المشاركة بواسطة اشليان في 3 فبراير 2010 في 01:48

#2

أذكر أني تعمل مع الDHTML قبل عشر سنوات تقريبا وكان ذلك أيام الدراسه

هل هي مطلوبه حتى الآن ؟

أقصد هل تغني عن الجافاسكريبت مثلا وإلا بس تقنيه ممكن نتعامل معها ومافيها أي مميزات مثل سهوله التعامل وقوه الأداء ؟

سأتابع دروسك وبارك الله بك

CMS Sfhati , Website Generator


نظام إدارة المحتوى صفحتي ... جربه الآن 


 


small-logo.png

#3
bastr3 كتب:

أذكر أني تعمل مع الDHTML قبل عشر سنوات تقريبا وكان ذلك أيام الدراسه

هل هي مطلوبه حتى الآن ؟

أقصد هل تغني عن الجافاسكريبت مثلا وإلا بس تقنيه ممكن نتعامل معها ومافيها أي مميزات مثل سهوله التعامل وقوه الأداء ؟

سأتابع دروسك وبارك الله بك

كلمة DHTML يعني صفحة ديناميكية

اي يمكن ان تتغير محتوياتها بدون تغير الكود

وعندما تعاملت مع الجافاسربت وانشأت صفحة

هذه الصفحة الناتجة صفحة ديناميكية ويتم اختصارها DHTML

#4

بسم الله الرحمن الرحيم

السلام عليكم ورحمه الله وبركاته

الدرس الثاني:DHTML JavaScript

سيكون الدرس بأذن الله حول أستخدام JavaScript في أنشاء صفحة ديناميكية أوDHTML

JavaScript تستطيع انشاء محتويات ديناميكية لصفحة

مثال:

أن تعرض تاريخ اليوم في أعلى الصفحة هذه محتويات ديناميكة تتغير

دون الحاجة الى تغير الكود

في JavaScript الطريقة document.write() تستخدم

للكتابة على الصفحة

مثال:

<html>
<body>

<script type="text/javascript">
document.write(Date());
</script>

</body>
</html>

JavaScript و HTML DOM

في المثال السابق قمنا باستخدام الجافا سكربت محتويات الصفحة لكن قدرات الجافا سكربت

غير مقتصرة على هذا فقط

الجافاسكربت يمكنها تغير محتويات عنصر HTML او احد خصائصه

اتمنى ان تكون ملما بالغة HTML لدرجة انك تعرف ماذا أقصد بالعنصر

ومحتويات العنصر وخصائصه

لتغير محتويات عنصر HTML :

document.getElementById(id).innerHTML=new HTML

لتغير خاصية لعنصر HTML:

document.getElementById(id).attribute=new value

هذه كانت مجرد نظرة سريعة حول JavaScript و HTML DOM

وإن شاء الله لنا عوده معها لاحقا

JavaScript والاحداث:

الجافاسكربت يمكن ان تنفذ عندما يتم تنفيذ حدث ما

مثل عندما يقوم المستخدم بالضغط على عنصر html

مثال:

onclick=JavaScript

هذه كانت مجرد نظرة سريعة حول JavaScript والاحداث

وإن شاء الله لنا عوده معها لاحقا

الجافاسكربت و CSS:

تستطيع باستخدام الجافاسكربت تغير style لاحد عناصر html

مثال:

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

هذه كانت مجرد نظرة سريعة حول JavaScript وCSS

وإن شاء الله لنا عوده معها لاحقا

وبهذا يكون انتهى الدرس الثاني

وإن شاء الله الدرس الثالث عن DHTML - HTML DOM

-الرجاء الدعاء-

تم تعديل هذه المشاركة بواسطة اشليان في 4 فبراير 2010 في 00:29

#5

ماهو HTML DOM؟؟

HTML DOM يعرف كائنات وخصائص لجميع عناصر Html و طرق (methods) للوصول

اليها

بكلمة أخرى:

HTML DOM طريقة قياسية لكيفية الوصول الى العناصر وتغيريها وحذفها بدون تغير الكود

وعندما تكون الصفحة محملة

تغيير عناصر Html

المثال التالي يغير محتوى العنصر <H1> :

<html>
<body>

<h1 id="header">Old Header</h1>

<script type="text/javascript">
document.getElementById("header").innerHTML="New Header";
</script>

</body>
</html>

شرح المثال:

مستند html يحتوي على عنصر <H1> ID ="header"

استخدمنا HTML DOM للوصول الى العنصر بالمعرف أو ID ="header"

كود الجافاسكربت غير محتوى العنصر بإستخدام innerHTML

تغير خصائص العنصر:

المثال التالي يغير الخاصيةSRC للعنصر IMG :

<html>
<body>

<img id="image" src="smiley.gif">

<script type="text/javascript">
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

شرح المثال:

مستند html يحتوي على عنصر <img > ID ="image"

استخدمنا HTML DOM للوصول الى العنصر بالمعرف أو ID ="image"

كود الجافاسكربت غير الخاصية SRC

الرجاء الدعاء وإن شاء الله الدرس القادم قريب

تم تعديل هذه المشاركة بواسطة اشليان في 11 فبراير 2010 في 04:11

1
#6

احداث HTML

الاحداث تجعل المتصفح يطلق افعال في وقت محدد

احداث HTML

كل عنصر في صفحة Html له أحداث التي يمكن أطلاقها عن طريق لغات السكربت

على سبيل المثال,يمكن أن تستخدم الحدث onClick للعنصر button الذي هو يمثل زر

يشير الى الدالة التي سيتم تنفيذها عندما يظغط المستخدم على الزر

نقوم بتعريف الاحداث في وسوم HTML

امثلة على الاحداث:

في هذا المثال تتغير محتويات العنصر <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>

وبهذا يكون هذا الدرس السيط قد أنتهى

الرجاء الدعاء

تم تعديل هذه المشاركة بواسطة اشليان في 12 فبراير 2010 في 05:29

#7

-5-

DHTML - CSS

الجافاسكربت و HTML DOM يمكن ان تستخدم لتغير ستايل أو مظهر أي عنصر

تغير الستايل للعنصر الحالي

لتغير الستايل للعنصر الحالي استخدم هذا التصريح 

this.style.property=new style

<html>
<body>

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

</body>
</html>

تغير الستايل للعنصر المحدد

لتغير الستايل للعنصر المحدد استخدم هذا التصريح 

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



<html>
<body>

<h1 id="h1" onclick="document.getElementById('h1').style.color='red'">Click Me!</h1>

</body>
</html>

وهذا تكون قد انتهت الدورة او مجموعة الدروس

وأرجو للجميع التوفيق

وأنشاء لله جميعا يجمعنا الله في الجنة

مواضيع مشابهة