جافاسكربت والمتصفح

"المتصفح هو بيئة برمجة عدائية حقا."

دوغلاس كروكفورد (Douglas Crockford)، لغة البرمجة جافاسكربت (محاضرة فيديو).

سنتحدّث في الجزء القادم من الكتاب عن متصفّحات الشبكة التي ما كان ليكون لجافاسكربت بدونها وجود. وحتى لو وُجدت ما كان لأحد أن يعيرها أي اهتمام.

تكنولوجيا الويب كانت من البداية لامركزية، ليس فقط من الناحية التقنية لكن أيضا من ناحية تطورها. أضاف مالكو المتصفّحات، بطُرق غير مدروسة أحيانا، وظائف جديدة لهذا الغرض بالذات. يحدُث أن تعتمد متصفّحات وظائف أضافتها متصفّحات أخرى لينتهي المطاف بهذه الوظائف في عداد المعيار.

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

الشبكات والإنترنت

إن شبكات الحاسوب موجودة من سنة 1950. فإذا وضعت كابل بين حاسوبين أو أكثر وسمحت لهم بإرسال وإستقبال البيانات عبر هذه الكابلات، فيمكنك فعل جميع الأشياء الرائعة.

إذا كان ربطنا لجهازين في نفس المبنى يجعلنا نقوم بأشياء رائعة، فربط كل الأجهزة الموجودة على الكوكب سيكون أروع. إن التكنولوجيا للبدء في تطبيق هذه الرؤية تم تطويرها في عام 1980، والشبكة الناتجة تم تسميتها الإنترنت. لقد وفت بوعدها.

يمكن للحاسوب إستعمال هذه الشبكة لإرسال البِتّات لحاسوب آخر. لأي تواصل فعال ينشأ من خلال عملية إرسال البِتّات هذه، على كلا الحاسوبين معرفة المعنى الذي من المفترض أن تمثله هذه الأخيرة. المعنى من أي سلسلة من البِتّات يعتمد بشكل كامل على نوع الأشياء التي تحاول إيصالها وعلى آلية التشفير المستعملة.

بروتوكول الإنترنت يصف لنا نوع التواصل في الشبكة. هناك بروتوكولات لإرسال وجلب الإيميلات، مشاركة الملفات، أو حتى التحكم في الحواسيب التي ما إذا حصل وأصيبت ببرمجيات ضارة.

على سبيل المثال، بروتوكول بسيط للتراسل الفوري من الممكن أن يتألف من حاسوب واحد يرسل البِتّات التي تمثل كلمة "CHAT?" لحاسوب آخر ويجيبه هذا الأخير ب "OK!" ليؤكد له أنه فهم البروتوكول. حينها بإمكانهم البدء في إرسال النصوص لبعضهم البعض، قراءة النص المرسل من طرف الآخر من الشبكة، وعرض أي شيء يتلقوه على الشاشة.

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

بروتوكول التحكم بالإرسال TCP والتي هي إختصار ل "Transmission Control Protocol" يحل هذه المشكلة. كل الأجهزة المرتبطة بالشبكة "تتحدث" به، ومعظم الإتصالات في الإنترنت مبنية عليه.

إتصال TCP يعمل كالآتي: يجب على حاسوب واحد ان ينتظر، أو يستمع، للحواسيب الأخرى لكي يبدأ في الكلام معها. لكي يكون قادرا على الإستماع لمختلف أنواع الإتصالات في نفس الوقت من جهاز واحد، كل منصت لديه رقم (يسمى منفذ) مرتبط به. معظم البروتوكولات يحددون أي منفذ يجب إستعماله بشكل إفتراضي. على سبيل المثال، عندما نريد إرسال إيميل من خلال بروتوكول نقل البريد البسيط SMTP والتي هي إختصار ل "Simple Mail Transfer Protocol"، فالجهاز الذي من خلاله نريد الإرسال من المتوقع أن ينصت للمنفذ 25.

حاسوب آخر يمكنه عندها إنشاء إتصال من خلال الإتصال بالجهاز المعني بإستعمال رقم المنفذ. إذا كان هذا الأخير بالإمكان الوصول إليه ووجد أنه يتصل على نفس المنفذ، عندها يتم الإتصال بشكل ناجح. الحاسوب المنصت يسمى الخادم (Server)، في حين أن المتصل يسمى العميل (Client).

يعمل مثل هذا الإتصال في إتجاهين مثل الأنبوب الذي يسمح للبِتّات بالتدفق، الأجهزة على كلا الطرفين يمكنهم وضع البيانات به. فور إرسال البِتّات بنجاح، يمكن قرائتهم من طرف الجهاز على الجهة الأخرى. هذا نموذج مناسب. بإمكانك القول أن بروتوكول TCP يقدم فكرة مجردة للشبكة.

الشبكة

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

لإضافة محتوى إلى الويب، كل ماعليك فعله هو ربط جهاز مع الإنترنت، وجعله ينصت للمنفذ 80، من خلال بروتوكول نقل النص التشعبي HTTP وهي إختصار ل "Hypertext Transfer Protocol". هذا الأخير يسمح للحواسيب بطلب الوثائق عبر الشبكة.

كل وثيقة على الشبكة تم تسميتها من خلال محدد موقع الموارد URL وهي إختصار ل "Uniform Resource Locator" والذي يبدوا شيئا كهذا:

  http://eloquentjavascript.net/12_browser.html
 |      |                      |               |
 protocol       server               path

الجزء الأول يخبرنا أن رابط الويب هذا يستعمل بروتوكول نقل النص التشعبي (كما من المفترض، على سبيل المثال، عند تشفيره سيصبح https://). عندها يأتي الجزء الذي يعرف أي خادم هو الذي نطلب الوثيقة منه. الأخير هو المسار الذي يحدد الوثيقة المطلوبة (أو المورد) الذي نريد.

كل جهاز متصل بالشبكة لديه عنوان بروتوكول إنترنت فريد (IP Address)، الذي يبدوا شيئا كهذا 37.187.37.82. يمكنك إستعمال هذه الأرقام مباشرة في جزء الخادم (الجزء الثاني) من رابط الويب. لكن قوائم من الأرقام العشوائية تقريبا يصعب تذكرها وغير ملائمة للكتابة، لهذا بدل ذلك يمكنك شراء نطاق ويب (domain name) لتشير لجهاز معين أو مجموعة من الأجهزة. لقد سجلت eloquentjavascript.net ليشير إلى عنوان جهاز أملكه ويمكنني عندها إستعمال إسم النطاق هذا لتقديم صفحات الويب.

إذا كتبت الرابط السابق في شريط عنوان المتصفح، سيحاول جلب وإظهار الوثيقة الموجودة هناك. أولا، متصفحك عليه أن يعرف إلى أي عنوان يشير eloquentjavascript.net. عندها، وباستعمال بروتوكول نقل النص التشعبي، سيتم إنشاء إتصال مع الخادم على هذا العنوان ويسأل عن هذا المورد /12_browser.html.

سنأخذ نظرة مقربة عن بروتوكول نقل النص التشعبي في الفصل 17.

HTML

HTML، لغة توصيف النص التشعبي والتي هي إختصار ل "Hypertext Markup Language"، هي صيغة الوثيقة المستعملة في صفحات الويب. وثيقة HTML تحتوي على نصوص، إضافة إلى وسوم (Tags) والتي تعطي بنية للنص، لتصف أشياء مثل الروابط، الفقرات والعنوانين.

صفحة HTML بسيطة تبدوا هكذا:

<!doctype html>
<html>
  <head>
    <title>My home page</title>
  </head>
  <body>
    <h1>My home page</h1>
    <p>Hello, I am Marijn and this is my home page.</p>
    <p>I also wrote a book! Read it
      <a href="http://eloquentjavascript.net">here</a>
    </p>
  </body>
</html>

الوسوم، يتم إحاطتها بعلامتي أكبر وأصغر من (< و >)، موفرة بذلك معلومات عن بنية الوثيقة. والنص الآخر هو مجرد نص عادي.

الوثيقة تبدأ ب <!doctype html>، والذي يخبر المتصفح أن يفسرها على أساس أنها HTML حديثة، على عكس مختلف الصيغ التي كانت تستعمل في الماضي.

وثائق HTML لها رأس وجسم. الرأس يحتوي على معلومات حول الوثيقة، والجسم به الوثيقة نفسها. في حالتنا هذه، قمنا بالإعلان على أن عنوان هذه الصفحة هو "My home page" وبعد ذلك أعطينا وثيقة تتضمن عنوان (<h1>، تعني "عنوان 1"—<h2> حتى <h6> تنتج عناوين أصغر بشكل متتالي) وفقرتين <p>.

الوسوم تأتي بصيغ مختلفة. عنصر، مثل الجسم، فقرة، أو رابط تبدأ بوسم الفتح مثل <p> وتنتهي بوسم الغلق مثل </p>. بعض وسوم الفتح، مثل الخاص بالرابط <a>، يحتوي على معلومات إضافية يالصيغة التالية name="value". يطلق عليها خصائص (attributes). في هذه الحالة، وجهة الرابط محدد ب href="http://eloquentjavascript.net"، حيث href إختصار ل "Hypertext Reference".

بعض الأنواع من الوسوم لاتغلق ولهذا لايجب غلقها. مثال على ذلك سيكون <img src="http://example.com/image.jpg">، الذي سيقوم بإظهار الصورة الموجودة في الرابط الموضوع داخل خاصية المصدر.

لكي تكون قادرا على تضمين علامتي أصغر وأكبر من داخل نصوص الصفحة، بالرغم من أن لديهم معنى خاص في لغة HTML، لهذا هناك رموز خاصة يجب التحدث عنها. علامة أصغر من تكتب هكذا < (“less than”)، وعلامة أكبر من تكتب كالتالي > (“greater than”). في HTML، علامة العطف (&) متبوعة بكلمة إضافة إلى فاصلة منقوطة (;) تسمى كيان، ويتم إستبدالها بالرمز الذي تمثل.

هذا مشابه لطريقة إستعمال الخطوط المائلة العكسية في نصوص جافاسكربت. ما أن هذه الآلية تعطي لعلامة العطف معنى خاص، أيضا، لهذا يجب كتابتها هكذا &. داخل الخاصية، والتي تكون مغلفة بعلامتي تنصيص مزدوجة، " يمكن إستعمالها لإضافة علامة نصية.

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

الوثيقة التالية سيتم التعامل معها مثل التي رأينا سابقا:

<!doctype html>
<title>My home page</title>
<h1>My home page</h1>
<p>Hello, I am Marijn and this is my home page.
<p>I also wrote a book! Read it
  <a href=http://eloquentjavascript.net>here</a>

وسم <html>، <head>، و <body> إختفوا كليا. المتصفح يعرف أن <title> ينتمي لرأس الصفحة، و <h1> لجسمها. إضافة إلى ذلك أنا لم أعد أغلق الفقرات بشكل صريح بما أن فتح فقرة جديدة أو إنهاء الوثيقة سيقوم بإغلاقهم بشكل ضمني. علامات التنصيص حول الرابط إختفوا أيضا.

هذا الكتاب سيكوم بتجاهل وسوم <html>، <head>، و <body> معظم الأوقات من الأمثلة لجعلها مختصرة وخالية من الفوضى. لكن سأقوم بغلق الوسوم وإضافة علامات التنصيص حول الخصائص.

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

HTML وجافاسكربت

في مضمون هذا الكتاب، الوسم الأهم في HTML هو <script>. هذا الأخير يسمح لنا بتضمين أكواد جافاسكربت داخل الوثيقة.

<h1>Testing alert</h1>
<script>alert("hello!");</script>

هذا السكرِبت سيشتغل فور الوصول لوسم <script> عندما يقرأ المتصفح HTML. الصفحة الظاهرة في الأعلى ستخرج نافذة منبثقة عندما يتم فتحها.

تضمين برامج كبيرة مباشرة داخل وثيقة HTML هو في الغالب غير عملي. وسم <script> يمكن إعطائه خاصية src من أجل جلب ملف برنامج نصي (ملف نصي يحتوي على برنامج جافاسكربت) من الرابط.

<h1>Testing alert</h1>
<script src="code/hello.js"></script>

ملف code/hello.js المضمن هنا يحتوي على نفس البرنامج في المثال السابق، alert("hello!"). عندما تشير صفحة HTML لروابط أخرى على أنها جزء منها، مثلا صورة أو سكرِبت، يقوم المتصفح بجلبهم مباشرة ويضمنهم داخل الصفحة.

وسم السكرِبت يجب أن يتم إغلاقه دائما بواسطة </script>، حتى إذا كانت تشير لملف فارغ. إذا نسيت وسم الإغلاق هذا فسيتم إعتبار باقي الصفحة كجزء من هذا السكرِبت.

بعض الخصائص بإمكانهم الإحتواء على برنامج جافاسكربت. وسم <button> الظاهر أسفله (والذي يظهر كزر) لديه خاصية تسمى onclick، ومحتواها سيتم تشغيله في كل مرة يتم الضغط على هذا الزر.

<button onclick="alert('Boom!');">DO NOT PRESS</button>

خذ بعين الإعتبار أنه كان علي إستعمال علامات التنصيص الفردية داخل خاصية onclick لأن علامات التنصيص الزوجية تم إستعمالهم من قبل لتغليف المحتوى. كان بإمكاني إستعمال الرمز "، لكن هذا سيجعل البرنامج صعب في القراءة.

داخل وضع الحماية

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

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

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

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

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

التوافقية وحرب المتصفحات

في المراحل المبكرة للويب، متصفح إسمه Mosaic كان مسيطر على السوق. بعد بضع سنوات، الكفة تحولت لصالح Netscape، والذي بدوره، حل محله بشكل كبير Internet Explorer. في أي لحظة كان فيها متصفح هو المسيطر، كان مالكوا هذا الأخير يحسون أن لهم الحق لوحدهم في إبتكار تقنيات جديدة للويب. بما أن معظم المستخدمين كانوا يستخدمون نفس المتصفح، المواقع كانت ببساطة تبدأ بإستخدام هذه التقنيات دون إعطاء أهمية لباقي المتصفحات.

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

Mozilla Firefox، منظمة غير ربحية وفرع من Netscape، تحدت سيطرة Internet Explorer في أواخر 2000. لأن Microsoft لم تكن مهتمة بالتنافس في تلك المدة، Firefox أخذت حصة من السوق منها. في نفس الوقت تقريباـ أعلنت Google عن متصفحها Google Chrome، Safari متصفح Apple لاقى نجاحا، مؤدية لوضعية حيث كان هناك أربع مسيطرين، عوض واحد.

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

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