|
إنضمامك إلي منتديات استراحات زايد يحقق لك معرفة كل ماهو جديد في عالم الانترنت ...
انضم الينا
#1
| ||
| ||
السلام عليكم ورحمة الله
__DEFINE_LIKE_SHARE__
اليوم نشرح شىء جديد بالجافا سكربت في هذا الدرس سنتعرف على ما هو الـ DOM؟ الدرس مأخوذ من هنا لنبدا في هذا الفصل سندرس شيئا يسمى Document Object Model و يختصر بالـDOM و بالعربية يترجم ل"نموزج كائنات الوثيقة" ,و الوثيقة يقصد بها هنا محتوى صفحة الويب .و بفهم هذا الموضوع سيمكننا التحكم في محتويات صفحة الويب من خلال لغة الجافا سكريبت . سميت هذا الفصل بالتحكم في html ,وربما كان العنوان الأنسب أن نسميه بالـ DOM إختصارا لـ Document Object Model ,لكني أحببت أن أضع له عنوانا يفهمه من لم يعرف بعد ما هو الـ DOM .فما هو الـ DOM ؟. ترى في الشكل أن هناك كائن يسمى بالـ Document ,هذا الكائن و ما يحتويه من كائنات و بيانات يسمى بالـDOM.و لكن ما الكائنات و البيانات التي يحتويها؟ للإجابة على هذا السؤال إفتح أي صفحة ويب بمتصفح الفاير فوكس و إضغط f12 لتظهر لك أدوات مطوري المواقع ثم أختار html كما بالصورة: ستظهر لك قائمة بها محتويات الصفحة منسقة على شكل قوائم و ستجد علامات "+" عند بعض العناصر التي عندما تضغط عليها ستظهر لك قائمة أخرى من العناصر بحيث أنك ستجد كل تاج html (*) و كل نص و كل مكون من مكونات الصفحة ممثلا . كل هذه المكونات و المعلومات تتيح لك الجافا سكريبت الوصول لها و التعامل معها من خلال الكائن Document . (*):التاج tag يترجم بالعربية ل"وسم" و كأمثلة له أو , و احب إستخدام كلمة تاج لأن كلمة وسم غريبة ,فبدلا منها اكتب الكلمة الإنجليزية بالعربية . و الآن عرفنا أن DOM هو الكائن Document بمحتوياته و عرفنا أن هذا الكائن يحتوى بداخله على محتويات صفحة الhtml .و لنقترب أكثر و نعرف كيف تمثل محتويات الصفحة في الكائن Document ,أنظر الشكل التالي: على اليسار كود الhtml للصفحة و على اليمين شكل يوضح كيف تمثل في الجافا سكريبت. يمثل التاج في الجافا سكريبت بكائن و ما يوجد داخله من تاجات و نصوص و( صفات Artibutes ) يمثل بخواص للكائن,و نعلم أنه يمكن أن يكون كائن خاصية في كائن آخر .و هناك مصطلح جديد يستخدم لوصف محتويات الـDom و هو الـ Node (النقطة ). و ببساطة إذا نظرت للشكل بالأعلى فإن كل مستطيل من المستطيلات يسمى Node .تسمى النود الأعلى بالنقطة الأب parentNode و المتفرعات منها تسمى بالأبناء childNodes مثلا في الشكل تسمى body بالنقطة الأب ل p و تسمى p بالتالي بالنقطة الإبن لbody كذلك تسمى النقاط "this is the" و "paragrph"و em بالنقاط childNodes الأبناء لـ P. الـDOM واسطة بين الهيتمل و الجافا سكريبت فهي تمكنك من معرفة قيم بيانات الهيتميل و أيضا التحكم فيها بالجافا سكريبت : بالنسبة للهتميل الـ Nodes تكون إما عناصر html مثل أو أو نصوص مثل "this is the" أو أنواع أخرى سنذكرها في الدروس التالية . أما أنوع البيانات في الـ Nodes عندما تتعامل معها داخل الجافا سكريبت يمكن أن تكون كائنات أو مصفوفات أو أوتار أو أرقام . ما سبق هو مقدمة نظرية للDOM و إن لم تستوعبها جيداً لا تقلق في الدروس التالية بالأمثلة العملية ستتضح لك الأمور .و قبل أن ننتقل للتطبيق سأوضح لك الطريق الذي سنسير عليه في الفصل بالدروس التالية. نعلم أن الهدف الأساسي من الجافا الإسكريبت جعل الويب متفاعل مع المستخدم .و فائدة الـ DOM هو أنه يمثل لنا مكونات صفحة الهيتميل بكائنات جافا سكريبت و بالتالي إذا كنت تريد أن تغير نص معين في صفحة الهيتميل مثل "this is the" فإنك لكي تفعل ذلك تحتاج أولا أن تصل له و تحدده و ثم بعد ذلك تجري ما تريد عليه من تعديلات من خلال الجافا سكريبت و ما تحدثه من تعديل في الجافا سكريبت على النص سيظهر أثره على صفحة الهيتميل و ما سندرسه في الدروس التالية هو: |
مواقع النشر (المفضلة) |
| |
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
تعلم الجافا سكربت بالأمثلة | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 08-04-2010 07:00 PM |
هام للغاية ... خبراء الجافا سكربت | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 10-11-2009 01:20 PM |
سؤال لخبراء الجافا سكربت | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 04-20-2009 05:20 PM |
سؤال لخبراء الجافا سكربت | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 04-20-2009 05:00 PM |
تم الانتهاء من الدرس الرابع في دورة الجافا | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 04-06-2009 07:10 PM |