بسم الله الرحمن الرحيم
الحمد لله و الصلاة والسلام على سيدنا محمد وعلى آله وصحبه وسلم أجمعين وبعد .
ماهو الـ DOM ؟
في الحالة التي فهمت فيها معنى DOM فإن الأمور بالنسبة لجافا سكربت ستصبح جليه وواضحه وسهلة وتستطيع أن تبرمج ما تريد بجافاسكربت وتستطيع أيضاً أن تعمل اشياء اصعب من الموجودة مكتبات جافاسكربت المشهورة مثل JQuery ولكن بشرط أن يكون لديك الفهم العميق . ولكي نجيب على هذا السؤال فإننا بحاجة إلى معرفة بعض التفاصيل عن طريقة عمل المستعرض من الداخل "وأود التنبيه إلى أنه عندما أقول كلمة مستعرض فأنا لا أحدد مستعرض بعينه وإنما بشكل عام" وسنبدأ بالشكل التالي الموجود بالأسفل وسندرس كل جزء على حدى .
Start : هنا نقصد بداية طلب المستخدم للصفحة أي عند كتابته لعنوان معين فيه صفحة HTML .
Parser : هو عبارة عن برنامج موجود داخل المستعرض وظيفته الأساسية هي تحويل شفرة HTML إلى شكل شجري أي أن مدخلات هذا البرنامج هي كود HTML ويقوم بإخراج شكل شجري يمثل هذا الكود و للتوضيح افرض ان لدي الكود التالي :
الحمد لله و الصلاة والسلام على سيدنا محمد وعلى آله وصحبه وسلم أجمعين وبعد .
ماهو الـ DOM ؟
في الحالة التي فهمت فيها معنى DOM فإن الأمور بالنسبة لجافا سكربت ستصبح جليه وواضحه وسهلة وتستطيع أن تبرمج ما تريد بجافاسكربت وتستطيع أيضاً أن تعمل اشياء اصعب من الموجودة مكتبات جافاسكربت المشهورة مثل JQuery ولكن بشرط أن يكون لديك الفهم العميق . ولكي نجيب على هذا السؤال فإننا بحاجة إلى معرفة بعض التفاصيل عن طريقة عمل المستعرض من الداخل "وأود التنبيه إلى أنه عندما أقول كلمة مستعرض فأنا لا أحدد مستعرض بعينه وإنما بشكل عام" وسنبدأ بالشكل التالي الموجود بالأسفل وسندرس كل جزء على حدى .
Start : هنا نقصد بداية طلب المستخدم للصفحة أي عند كتابته لعنوان معين فيه صفحة HTML .
Parser : هو عبارة عن برنامج موجود داخل المستعرض وظيفته الأساسية هي تحويل شفرة HTML إلى شكل شجري أي أن مدخلات هذا البرنامج هي كود HTML ويقوم بإخراج شكل شجري يمثل هذا الكود و للتوضيح افرض ان لدي الكود التالي :
كود HTML:
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h1> Hi All </h1>
<p> www.montadaphp.net </p>
</body>
</html>الآن وبعد أن يدخل هذا الكود إلى الـ Parser فإنه يتحول إلى Tree أو شكل شجري كما تلاحظ في الرسم الأعلى أي أنه يصبح كالتالي :
أي بإختصار شديد نقول أن برنامج الـ Parser وظيفته هي تحويل الكود إلى شكل شجري لأن المستعرض بإختصار لا يفهم كود HTML المكتوب وإنما يفهمه على الشكل الشجري وهذا الشكل الشجري يطلق عليه اسم DOM اختصاراً لـ Document Object Model وهي بإختصار الشجرة التي ينتجها الـ Parser .
Render Engine : تحدثنا سابقاً عن موضوع محرك الرسم والآن نقول بشكل موسع أن Render Engine هو برنامج يقوم بقراءة الشجرة أو الـ DOM التي ينتجها الـ Parser ويقوم برسم الرموز الموجودة في تلك الشجرة على شاشة المستعرض أي بإختصار هو يقرأ الشجرة ويعرف معنى كل رمز ويقوم برسمه ولكن نريد التنبيه إلى شئ معين وهو :
لاحظ أن الرسم الموجود بالأعلى يضع سهماً بين Render Engine و CSS والسبب هو أنه كما ذكرنا سابقاً أن محرك الرسم يقوم أولاً بالتأكد من وجود ملفات CSS لكي يغير طريقة رسم الرموز وإن لم تكون موجودة فإنه يرسم بالطريقة الإفتراضية ويمكنك مراجعة ذلك في الموضوع السابق . بعد ذلك وعند انتهاء المحرك من عملية الرسم فإن الشكل يظهر للمستخدم في المستعرض.
Refresh : هنا هي النقطة المهمة من وراء كل هذا الموضوع والتي من خلالها ستفهم جافاسكربت وهي عملية تحديث الصفحة والجميع يعرف انه عندما تريد تحديث الصفحة فإنك تضغط على زر تحديث او F5 ولكن ما أريده منك الآن أن تلاحظ الرسم الموجود بالأعلى عند عملية التحديث فإن العملية التي تحدث هي الرجوع إلى الشجرة و قراءتها وليس الرجوع لبداية الكود ومن ثم رسم الكود من جديد .. ماهذا الكلام الغريب ؟ جواب هذه النقطة سيكون في الجزء التالي
أي بإختصار شديد نقول أن برنامج الـ Parser وظيفته هي تحويل الكود إلى شكل شجري لأن المستعرض بإختصار لا يفهم كود HTML المكتوب وإنما يفهمه على الشكل الشجري وهذا الشكل الشجري يطلق عليه اسم DOM اختصاراً لـ Document Object Model وهي بإختصار الشجرة التي ينتجها الـ Parser .
Render Engine : تحدثنا سابقاً عن موضوع محرك الرسم والآن نقول بشكل موسع أن Render Engine هو برنامج يقوم بقراءة الشجرة أو الـ DOM التي ينتجها الـ Parser ويقوم برسم الرموز الموجودة في تلك الشجرة على شاشة المستعرض أي بإختصار هو يقرأ الشجرة ويعرف معنى كل رمز ويقوم برسمه ولكن نريد التنبيه إلى شئ معين وهو :
لاحظ أن الرسم الموجود بالأعلى يضع سهماً بين Render Engine و CSS والسبب هو أنه كما ذكرنا سابقاً أن محرك الرسم يقوم أولاً بالتأكد من وجود ملفات CSS لكي يغير طريقة رسم الرموز وإن لم تكون موجودة فإنه يرسم بالطريقة الإفتراضية ويمكنك مراجعة ذلك في الموضوع السابق . بعد ذلك وعند انتهاء المحرك من عملية الرسم فإن الشكل يظهر للمستخدم في المستعرض.
Refresh : هنا هي النقطة المهمة من وراء كل هذا الموضوع والتي من خلالها ستفهم جافاسكربت وهي عملية تحديث الصفحة والجميع يعرف انه عندما تريد تحديث الصفحة فإنك تضغط على زر تحديث او F5 ولكن ما أريده منك الآن أن تلاحظ الرسم الموجود بالأعلى عند عملية التحديث فإن العملية التي تحدث هي الرجوع إلى الشجرة و قراءتها وليس الرجوع لبداية الكود ومن ثم رسم الكود من جديد .. ماهذا الكلام الغريب ؟ جواب هذه النقطة سيكون في الجزء التالي
ليست هناك تعليقات :
إرسال تعليق