الدرس الرابع : مفهوم هندسة الويب -- الجزء الرابع

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

    الحمد لله والصلاة والسلام على سيدنا محمد وعلى آله وصحبه أجمعين وبعد .. السلام عليكم ورحمة الله وبركاته .


    مفهوم التحديث Refresh ومعرفة ماهي JavaScript بالشكل الصحيح

    دعنا نعود للرسم الموجود في الموضوع السابق ونرى الشكل التالي :

    الشئ الذي لا يعرفه العديد من المبرمجين وهو السبب في عدم فهم جافاسكربت بشكل صحيح هو أن هناك عمليتين تحديث يقوم بها المستعرض وليست واحده كالتالي :

    ١- عملية التحديث الأولى :

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

    ٢- عملية التحديث الثانية :

    عملية التحديث الثانية هي حجر الأساس في فهم لغة JavaScript حيث أن لغة جافاسكربت هي :

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

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

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

    وفي النهاية فإن جافاسكربت هي لغة للتعامل مع الـ DOM ويجب عليك وضع النقطة في ذهنك وسيتم تفصيل DOM بشكل ممل إن شاء الله تعالى وسيتم توضيح كل الأمور الغامضة وستجد كل الأجوبة لكل الأسئلة التي تدور في بالك .