said
11-01-2013, بتوقيت غرينيتش 04:18 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط¯ظˆط±ط© ط§ظ„ط¬ط§ظپط§ ط³ظƒط±ط¨طھ - ظ…ط§ ظ‡ظˆ DOMطں (http://www.dzbatna.com/t2003441/)
السلام عليكم ورحمة الله
اليوم نشرح طريقة شىء جديد بالجافا سكربت
في هذا الدرس مفصل سنتعرف على ما هو الـ DOM؟
الدرس مفصل مأخوذ من هنا (http://www.awcore.com/js/44/%D9%85%D8%AF%D8%AE%D9%84-%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85-%D9%81%D9%8A-html_ar#view-1)
لنبدا
في هذا الفصل سندرس مفصل شيئا يسمى Document Object Model و يختصر بالـDOM و بالعربية يترجم ل"نموزج كائنات الوثيقة" ,و الوثيقة يقصد بها هنا محتوى صفحة الويب .و بفهم هذا الموضوع سيمكننا التحكم في محتويات صفحة الويب من خلال لغة الجافا سكريبت script .
سميت هذا الفصل بالتحكم في html ,وربما كان العنوان الأنسب أن نسميه بالـ DOM إختصارا لـ Document Object Model ,لكني أحببت أن أضع له عنوانا يفهمه من لم يعرف بعد ما هو الـ DOM .فما هو الـ DOM ؟.
http://www.awcore.com/files/upload/p16flgvs8v1sivl2hicm1ljeef41.jpg
ترى في الشكل أن هناك كائن يسمى بالـ Document ,هذا الكائن و ما يحتويه من كائنات و بيانات يسمى بالـDOM.و لكن ما الكائنات و البيانات التي يحتويها؟
للإجابة على هذا السؤال إفتح أي صفحة ويب بمتصفح الفاير فوكس و إضغط f12 لتظهر لك أدوات مطوري المواقع ثم أختار html كما بالصورة:
http://www.awcore.com/files/upload/p16ftimsmi101617ao6qj1m6vj901.jpg
ستظهر لك قائمة بها محتويات الصفحة منسقة على شكل قوائم و ستجد علامات "+" عند بعض العناصر التي عندما تضغط عليها ستظهر لك قائمة أخرى من العناصر بحيث أنك ستجد كل تاج html (*) و كل نص و كل مكون من مكونات الصفحة ممثلا .
كل هذه المكونات و المعلومات تتيح لك الجافا سكريبت script الوصول لها و التعامل معها من خلال الكائن Document .
(*):التاج tag يترجم بالعربية ل"وسم" و كأمثلة له <html> أو <p>, و احب إستخدام كلمة تاج لأن كلمة وسم غريبة ,فبدلا منها اكتب الكلمة الإنجليزية بالعربية .
و الآن عرفنا أن DOM هو الكائن Document بمحتوياته و عرفنا أن هذا الكائن يحتوى بداخله على محتويات صفحة الhtml .و لنقترب أكثر و نعرف كيف تمثل محتويات الصفحة في الكائن Document ,أنظر الشكل التالي:
http://www.awcore.com/files/upload/p16fto0k4f13pv1opc12vd1s32162d1.jpg
على اليسار كود code الhtml للصفحة و على اليمين شكل يوضح كيف تمثل في الجافا سكريبت script.
يمثل التاج في الجافا سكريبت script بكائن و ما يوجد داخله من تاجات و نصوص و( صفات Artibutes ) يمثل بخواص للكائن,و نعلم أنه يمكن أن يكون كائن خاصية في كائن آخر .و هناك مصطلح جديد يستخدم لوصف محتويات الـDom و هو الـ Node (النقطة ).
و ببساطة إذا نظرت للشكل بالأعلى فإن كل مستطيل من المستطيلات يسمى Node .تسمى النود الأعلى بالنقطة الأب parentNode و المتفرعات منها تسمى بالأبناء childNodes مثلا في الشكل تسمى body بالنقطة الأب ل p و تسمى p بالتالي بالنقطة الإبن لbody كذلك تسمى النقاط "this is the" و "paragrph"و em بالنقاط childNodes الأبناء لـ P.
الـDOM واسطة بين الهيتمل و الجافا سكريبت script فهي تمكنك من معرفة قيم بيانات الهيتميل و أيضا التحكم فيها بالجافا سكريبت script :
بالنسبة للهتميل الـ Nodes تكون إما عناصر html مثل <p> أو <body> أو نصوص مثل "this is the" أو أنواع أخرى سنذكرها في الدروس التالية .
أما أنوع البيانات في الـ Nodes عندما تتعامل معها داخل الجافا سكريبت script يمكن أن تكون كائنات أو مصفوفات أو أوتار أو أرقام .
ما سبق هو مقدمة نظرية للDOM و إن لم تستوعبها جيداً لا تقلق في الدروس التالية بالأمثلة العملية ستتضح لك الأمور .و قبل أن ننتقل للتطبيق سأوضح لك الطريق الذي سنسير عليه في الفصل بالدروس التالية.
نعلم أن الهدف الأساسي من الجافا الإسكريبت script جعل الويب متفاعل مع المستخدم .و فائدة الـ DOM هو أنه يمثل لنا مكونات صفحة الهيتميل بكائنات جافا سكريبت script و بالتالي إذا كنت تريد أن تغير نص معين في صفحة الهيتميل مثل "this is the" فإنك لكي تفعل ذلك تحتاج أولا أن تصل له و تحدده و ثم بعد ذلك تجري ما تريد عليه من تعديلات من خلال الجافا سكريبت script و ما تحدثه من تعديل في الجافا سكريبت script على النص سيظهر أثره على صفحة الهيتميل و ما سندرس مفصله في الدروس التالية هو:
كيفية الوصول للـNode التي نريدها. (http://www.awcore.com/js/44/%D9%85%D8%AF%D8%AE%D9%84-%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85-%D9%81%D9%8A-html_ar#view-2)
كيفية معرفة خواص ومعلومات الـNode . (http://www.awcore.com/js/44/%D9%85%D8%AF%D8%AE%D9%84-%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85-%D9%81%D9%8A-html_ar#view-3)
تغير محتويات هيتميل بالجافا سكريبت script. (http://www.awcore.com/js/44/%D9%85%D8%AF%D8%AE%D9%84-%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85-%D9%81%D9%8A-html_ar#view-4)
الصفات و تعديل إستايل style العرض بالجافا سكريبت script. (http://www.awcore.com/js/44/%D9%85%D8%AF%D8%AE%D9%84-%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85-%D9%81%D9%8A-html_ar#view-5)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
السلام عليكم ورحمة الله
اليوم نشرح طريقة شىء جديد بالجافا سكربت
في هذا الدرس مفصل سنتعرف على ما هو الـ DOM؟
الدرس مفصل مأخوذ من هنا (http://www.awcore.com/js/44/%D9%85%D8%AF%D8%AE%D9%84-%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85-%D9%81%D9%8A-html_ar#view-1)
لنبدا
في هذا الفصل سندرس مفصل شيئا يسمى Document Object Model و يختصر بالـDOM و بالعربية يترجم ل"نموزج كائنات الوثيقة" ,و الوثيقة يقصد بها هنا محتوى صفحة الويب .و بفهم هذا الموضوع سيمكننا التحكم في محتويات صفحة الويب من خلال لغة الجافا سكريبت script .
سميت هذا الفصل بالتحكم في html ,وربما كان العنوان الأنسب أن نسميه بالـ DOM إختصارا لـ Document Object Model ,لكني أحببت أن أضع له عنوانا يفهمه من لم يعرف بعد ما هو الـ DOM .فما هو الـ DOM ؟.
http://www.awcore.com/files/upload/p16flgvs8v1sivl2hicm1ljeef41.jpg
ترى في الشكل أن هناك كائن يسمى بالـ Document ,هذا الكائن و ما يحتويه من كائنات و بيانات يسمى بالـDOM.و لكن ما الكائنات و البيانات التي يحتويها؟
للإجابة على هذا السؤال إفتح أي صفحة ويب بمتصفح الفاير فوكس و إضغط f12 لتظهر لك أدوات مطوري المواقع ثم أختار html كما بالصورة:
http://www.awcore.com/files/upload/p16ftimsmi101617ao6qj1m6vj901.jpg
ستظهر لك قائمة بها محتويات الصفحة منسقة على شكل قوائم و ستجد علامات "+" عند بعض العناصر التي عندما تضغط عليها ستظهر لك قائمة أخرى من العناصر بحيث أنك ستجد كل تاج html (*) و كل نص و كل مكون من مكونات الصفحة ممثلا .
كل هذه المكونات و المعلومات تتيح لك الجافا سكريبت script الوصول لها و التعامل معها من خلال الكائن Document .
(*):التاج tag يترجم بالعربية ل"وسم" و كأمثلة له <html> أو <p>, و احب إستخدام كلمة تاج لأن كلمة وسم غريبة ,فبدلا منها اكتب الكلمة الإنجليزية بالعربية .
و الآن عرفنا أن DOM هو الكائن Document بمحتوياته و عرفنا أن هذا الكائن يحتوى بداخله على محتويات صفحة الhtml .و لنقترب أكثر و نعرف كيف تمثل محتويات الصفحة في الكائن Document ,أنظر الشكل التالي:
http://www.awcore.com/files/upload/p16fto0k4f13pv1opc12vd1s32162d1.jpg
على اليسار كود code الhtml للصفحة و على اليمين شكل يوضح كيف تمثل في الجافا سكريبت script.
يمثل التاج في الجافا سكريبت script بكائن و ما يوجد داخله من تاجات و نصوص و( صفات Artibutes ) يمثل بخواص للكائن,و نعلم أنه يمكن أن يكون كائن خاصية في كائن آخر .و هناك مصطلح جديد يستخدم لوصف محتويات الـDom و هو الـ Node (النقطة ).
و ببساطة إذا نظرت للشكل بالأعلى فإن كل مستطيل من المستطيلات يسمى Node .تسمى النود الأعلى بالنقطة الأب parentNode و المتفرعات منها تسمى بالأبناء childNodes مثلا في الشكل تسمى body بالنقطة الأب ل p و تسمى p بالتالي بالنقطة الإبن لbody كذلك تسمى النقاط "this is the" و "paragrph"و em بالنقاط childNodes الأبناء لـ P.
الـDOM واسطة بين الهيتمل و الجافا سكريبت script فهي تمكنك من معرفة قيم بيانات الهيتميل و أيضا التحكم فيها بالجافا سكريبت script :
بالنسبة للهتميل الـ Nodes تكون إما عناصر html مثل <p> أو <body> أو نصوص مثل "this is the" أو أنواع أخرى سنذكرها في الدروس التالية .
أما أنوع البيانات في الـ Nodes عندما تتعامل معها داخل الجافا سكريبت script يمكن أن تكون كائنات أو مصفوفات أو أوتار أو أرقام .
ما سبق هو مقدمة نظرية للDOM و إن لم تستوعبها جيداً لا تقلق في الدروس التالية بالأمثلة العملية ستتضح لك الأمور .و قبل أن ننتقل للتطبيق سأوضح لك الطريق الذي سنسير عليه في الفصل بالدروس التالية.
نعلم أن الهدف الأساسي من الجافا الإسكريبت script جعل الويب متفاعل مع المستخدم .و فائدة الـ DOM هو أنه يمثل لنا مكونات صفحة الهيتميل بكائنات جافا سكريبت script و بالتالي إذا كنت تريد أن تغير نص معين في صفحة الهيتميل مثل "this is the" فإنك لكي تفعل ذلك تحتاج أولا أن تصل له و تحدده و ثم بعد ذلك تجري ما تريد عليه من تعديلات من خلال الجافا سكريبت script و ما تحدثه من تعديل في الجافا سكريبت script على النص سيظهر أثره على صفحة الهيتميل و ما سندرس مفصله في الدروس التالية هو:
كيفية الوصول للـNode التي نريدها. (http://www.awcore.com/js/44/%D9%85%D8%AF%D8%AE%D9%84-%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85-%D9%81%D9%8A-html_ar#view-2)
كيفية معرفة خواص ومعلومات الـNode . (http://www.awcore.com/js/44/%D9%85%D8%AF%D8%AE%D9%84-%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85-%D9%81%D9%8A-html_ar#view-3)
تغير محتويات هيتميل بالجافا سكريبت script. (http://www.awcore.com/js/44/%D9%85%D8%AF%D8%AE%D9%84-%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85-%D9%81%D9%8A-html_ar#view-4)
الصفات و تعديل إستايل style العرض بالجافا سكريبت script. (http://www.awcore.com/js/44/%D9%85%D8%AF%D8%AE%D9%84-%D8%A7%D9%84%D8%AA%D8%AD%D9%83%D9%85-%D9%81%D9%8A-html_ar#view-5)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
