[MUSIC PLAYING]
ديفيد ج. مالان: هذه هي دورة CS50.
واليوم، ننتقل من عالم لغة C، ومؤشراتها،
وبعض المعاناة التي قد شعرت بها خلال الأسابيع القليلة الماضية
إلى عالم مألوف أكثر، من برمجة الويب.
سأستخدم متصفحات الويب وأجهزة الهاتف المحمول وأجهزة الكمبيوتر المحمولة وأجهزة كمبيوتر سطح المكتب
وسأنشىء تجربة بيانية وتفاعلية أكثر
من تلك التي أتاحتها لنا النوافذ الطرفية التقليدية لسطر الأوامر.
ومع ذلك، سنرى على طول الطريق أن الكثير من الأفكار التي كنا
نكتشفها خلال الأسابيع القليلة الماضية ستظل معنا.
وسنراها بطرق مختلفة.
سنراها في شكل اللغات والصيغ الأخرى.
لكن الأفكار ستبقى تذكرنا قليلاً بما
فعلناه سابقًا في الأسبوع 0.
إذن قد تكون TCP/IP هي أكثر الطرق التقنية
وذات مستوى منخفض للغاية يمكننا من خلالها جعل الويب أمرًا غير مثير للاهتمام.
ولكن من المحتمل أنكم، على الأقل، رأيتم هذا الاختصار في مكان ما، ربما
على جهاز Mac، جهاز الكمبيوتر الشخصي، ربما إعداد ما ذات مرة.
وهذا، في الواقع، يشير فقط إلى بروتوكول
أو، في الحقيقة، إلى زوج من البروتوكولات، أنواع اللغات
التي يتحدث بها الكمبيوتر من أجل إرسال المعلومات
من جهاز كمبيوتر إلى آخر.
وهذا ما يجعل معظم شبكات الإنترنت تعمل اليوم.
في الواقع يمكنك إيقاف جهاز الكمبيوتر المحمول وكمبيوتر سطح المكتب
والتحدث إلى أي كمبيوتر على الإنترنت بسبب هذه البروتوكولات،
وهي تقاليد قرر البشر وجودها منذ بضع سنوات.
وتحدّد فقط كيفية التواصل البيني بين أجهزة الكمبيوتر.
ولكن دعونا نجعلها مألوفة أكثر.
في عالمنا البشري، من المحتمل أن تقوم، في مرحلة ما، بإرسال رسالة أو استلامها.
هذه الأيام، ربما يكون الأمر إلكترونيًا أكثر.
ولكن، على الأقل، استلمت رسالة كهذه
ربما من شخص، ربما من جد أو ما شابه ذلك،
أو أرسلت شيئًا بنفسك.
ولكن قبل أن تتمكّن بالفعل من إرسال تلك الرسالة إلى المستلم
ووضعها خلال البريد الأمريكي أو خدمات البريد الدولي،
ما الذي نحتاج إلى كتابته على الظرف؟
الجمهور: العنوان.
ديفيد ج. مالان: نعم-- شيء يشبه العنوان.
وما الذي يتكون منه العنوان؟
الجمهور: الاسم.
ديفيد ج. مالان: الاسم.
الحضور: أين يسكُن.
ديفيد ج. مالان: أين يسكُن.
الجمهور: [INAUDIBLE]
ديفيد ج. مالان: إذن حيث يتم تضمين عنوان الشارع والمدينة،
الولاية، أو الرمز البريدي في الولايات المتحدة، أو الرمز البريدي، بشكل عام،
والبلد، إذا أردت حقًا أن تكون محددًا.
ولذا كل ذلك يُكتب على الجهة الأمامية من الظرف،
بشكل عام في منتصف الظرف.
ومن ثم ماذا يُوضع غالبًا في أعلى الزاوية اليسرى في معظم البلدان؟
الجمهور: عنوان المُرسِل.
ديفيد ج. مالان: أجل.
إذن عنوان المُرسِل-- بحيث إذا حدث خطأ ما،
وإن كان ذلك نادرًا ما يحدث، تتم إعادة هذه الرسالة-- يمكن إرجاعها إليك،
ويعرف المستلِم أيضًا على الفور مَن الذي أرسل إليه بالفعل
الرقم.
إذن هذه معلومات كافية للحصول على رسالة من النقطة أ
إلى النقطة ب لأن هذه العناوين، هذه العناوين البريدية
في عالمنا البشري، تحدد بشكل فريد المنازل أو المباني أو الأشخاص،
بشكل منطقي، في العالم.
لذا الآن، نحن في 45 Quincy Street، كامبريدج، ماساشوستس، 02138، الولايات المتحدة الأمريكية.
من المحتمل أن هذا تحديد كافٍ لأي شخص في العالم
ليقوم بإرسال بطاقة بريدية لنا تقول "Hello world" في شكل خطي
ونقلها إلى هذا المبنى.
وفي الوقت نفسه، إذا أردنا إرسال شيء إلى مركز العلوم،
1 Oxford Street، كامبريدج، ماساشوستس، 02138، الولايات المتحدة الأمريكية، فهذا هو عنوانه الفريد.
لذلك من المنطقي أن أجهزة الكمبيوتر، بما في ذلك أجهزة Mac وأجهزة الكمبيوتر الشخصية
وهواتف Android وiPhone وما شابه ذلك،
تحتوي جميعها على عناوين فريدة، أيضًا، لأنها، بعد كل شيء، تريد
التواصل.
وتحتاج إلى الحصول على وحدات البت، الأصفار والواحدات، من النقطة أ إلى النقطة ب.
لكنها ليست أكثر إطنابًا نوعًا ما كأنواع العناوين تلك.
تحتوي أجهزة الكمبيوتر على ما قد تعرفونه باسم عناوين IP،
عناوين بروتوكول الإنترنت.
وهذا يعني فقط أن البشر قرروا منذ سنوات
أن كل جهاز كمبيوتر موصل بالإنترنت سيحتوي
على رقم فريد لتحديده.
وهذا الرقم هو بشكل عام بصيغة شيء ما نقطة شيء ما نقطة شيء ما
نقطة شيء ما.
وكما تبين، كل هذه الأشياء بين النقاط
عبارة عن رقم من 0 إلى 255.
والآن، بعد كل هذه الأسابيع من دورة CS50، من الممكن أن
يصل عقلك على الأرجح إلى إجابة سريعة.
كم عدد وحدات البت التي يجب أن تأخذها كل هذه الأرقام
إذا كان النطاق من 0 إلى 255؟
ثمانية.
إذن ثمانية-- ولماذا هي ثمانية؟
إذن كان 256 سمةً متكررة.
وإذا لم تتذكروا ذلك، فلا بأس.
ولكن نعم، هذه هي ثماني وحدات بت، ثماني وحدات بت، ثماني وحدات بت، ثماني وحدات بت،
مما يعني أن الأرقام التي نحن البشر استخدمناها لتحديد أجهزة الكمبيوتر لدينا بشكل فريد
على الإنترنت هي 32 وحدة بت في المجمل.
حسنًا، ربما هناك رقم آخر قد يتبادر إلى عقلنا تقريبًا.
إذا كنت قد حصلت على 32 وحدة بت، فإلى أي مدى يمكنك العدّ، بشكل عام، من 0 إلى--
سمعت همهمة--
الجمهور: أربعة مليارات.
ديفيد ج. مالان: أربعة مليارات.
إذن، إنها أربعة مليارات تقريبًا.
وقد ذكرنا ذلك في الأسبوع 0 باستخدام دليل هاتف المكوّن من أربعة مليارات صفحة،
تخيلوا ذلك.
إذن أربعة مليارات هي تقريبًا ما يمكنك عدّه باستخدام 32 وحدة بت.
لذا هذا يعني أن هناك أربعة مليارات جهاز كمبيوتر، أو أجهزة، أو أي شيء
على الإنترنت، تم تحديدها بشكل فريد-- كذبة
بيضاء صغيرة لأن هذا ليس كافيًا في الواقع هذه الأيام مع جميع الأجهزة
وجميع البشر في العالم.
لكننا وجدنا حلولاً بديلة لذلك.
أي سؤال؟
الجمهور: [INAUDIBLE]
ديفيد ج. مالان: ولكن فقط نصفهم في ذلك الوقت.
لا.
إذن نعم، إذا خطط البشر بحلول عام 2023 أو أيًا كان العام
لتكون الأجهزة بالكامل تقريبًا على شبكة الإنترنت، وتوجد
بضعة-- مليارات ومليارات من الأشخاص، ثمانية مليارات أو ما يقاربها،
إذن سيمثل هذا مشكلة لهذا النظام.
ولحسن الحظ، منذ 20 عامًا أدرك فيها الأشخاص أن،
هذا، بشكل حسابي، سيشكل مشكلة.
ولذا يتوفر بالفعل إصدار أحدث من IP، بروتوكول الإنترنت.
هذا هو الإصدار 4 الذي نتحدث عنه، وهو ما يزال
موجودًا بشكل كبير في العالم.
لا يستخدم الإصدار 6 في الواقع 32 وحدة بت، ولكن 128 وحدة بت، وهو رقم كبير.
ولا يمكنني حتى نطق مدى كبر الرقم.
إذن نحن نفكر في الأمر.
وأكبر الشركات في العالم قد انتقلت
بالفعل إلى استخدام عناوين أكبر من عناوين وحدات البت 32 هذه.
ولكن هذه ما تزال شائعة نوعًا ما في أي جهاز تقريبًا قد تمتلكه أو تراه
في الحرم الجامعي أو في أي مكان آخر.
لذلك إذا كان لديك عنوان فريد، فهذا يكفي لوضعه
على الجهة الأمامية من الظرف.
ويتبين أنك إذا كنت تقوم بإرسال رسالة بريد إلكتروني أو رسالة دردشة
أو أيًا كانت، فأنت، وأيضًا-- جهاز Mac أو الكمبيوتر الشخصي أو الهاتف لديك-- لديكم عنوان IP.
لذا هذا أمر كافٍ لوضعه في أعلى الزاوية اليسرى، من الناحية النظرية.
لكنك بحاجة إلى جزء واحد آخر من المعلومات.
تبين أنه يوجد على الإنترنت، خوادم، أجهزة كمبيوتر،
تستمع فقط باستمرار للأشخاص للاتصال
بهم، مثلنا، والتحقّق من البريد الإلكتروني لدينا وزيارة Facebook
و Gmail ومواقع الويب الأخرى المماثلة.
وهذه الخوادم، على الرغم من ذلك، يمكنها القيام بأشياء متعددة.
لدى Google الكثير من الشركات.
والتي تمنحك البريد الإلكتروني وخدمات الويب ومؤتمرات الفيديو
والعديد من الخدمات الأخرى القائمة على الإنترنت.
وهكذا قرر البشر أيضًا، منذ سنوات، تحديد
جميع هذه الخدمات الممكنة على الإنترنت باستخدام أرقام فريدة فقط--
أسماء أيضًا، ولكنها أيضًا أرقام فريدة من نوعها.
وتبين أن البشر قرروا منذ سنوات
أنك عند زيارتك أحد مواقع الويب، فهناك جزء آخر من المعلومات
تمت كتابته على هذا الظرف، وليس فقط عنوان IP الخاص بالخادم
الذي تحاول الاتصال به، ولكن أيضًا بالرقم 80
لأن 80 يعادل HTTP، الاختصار الذي يعد مألوفًا لكم الآن.
وهذا يدل فقط على أن هذا هو طلب ويب.
إذن فقد قال، بدلاً من ذلك، شيئًا مثل 25، هذا هو SMTP، وهو البريد الإلكتروني.
حتى يشير ذلك إلى أنه توجد داخل هذا الظرف الافتراضي
بالفعل رسالة بريد إلكتروني مرسلة إلى Gmail أو ما شابه.
وتوجد الكثير من الأرقام.
لكن المغزى هو أنه توجد أرقام تقوم بالتعريف بشكل فريد.
لذلك عندما يحصل Google على ظرف افتراضي، مجرد مجموعة كاملة من وحدات البت، أصفار
وواحدات، بطريقة ما، يحتوي على عنوان IP عليه كالوجهة،
كما يعرف أيضًا، أوه، هل هذا بريد إلكتروني أو هل هذه رسالة مؤتمر فيديو
أو هل هذه رسالة دردشة أو أي شيء آخر.
إذن فقط لجعل هذا واقعيًا أكثر، فإذا كنت
سأمضي قدمًا وأدوّن هذا، عنوان IP الخاص بي الذي
سأرسل إليه شيئًا ما ربما يكون 1.2.3.4.
بشكل عام، سأقوم، بعد ذلك، بإرساله إلى، مثلاً، المنفذ 80.
ربما عنوان IP الخاص بي هو 5.6.7.8.
ولذا ظرف--
سأكون عند [INAUDIBLE]---- وسيحصل هو فقط بالفعل على تلك الأجزاء
من المعلومات-- عنوان الوجهة، نقطتين،
ومن ثم رقم الخدمة الذي يهمك، HTTP أو أيًا كان،
ثم عنوان IP الخاص بك، والمزيد من المعلومات.
لكن المغزى هو أن كلاً من المُرسِل والمستلِم في العناوين--
هذا كافٍ للحصول على بيانات من جهاز كمبيوتر واحد في العالم إلى آخر.
وهناك الكثير من التعقيدات الأخرى.
هذا مجال كامل في علوم الكمبيوتر للشبكات،
إذا كنتم تحبون هذه الأشياء.
ولكن هكذا، وباختصار، يحصل الإنترنت على بيانات من النقطة أ
إلى النقطة ب. ويمثل هذا الظرف فقط
مجموعة كاملة من الأصفار والواحدات.
ولكن ماذا بداخل هذا الظرف؟
وهذا ما سنركز عليه اليوم وفي الأسابيع المقبلة.
إنه المحتوى في الواقع.
إنها الرسالة الإلكترونية التي تهتم بها أو صفحة الويب التي تهتم بها.
وكيف يمكننا بالفعل أن نقرر أي خادم نتصل به؟
حسنًا، عادة، قد تنتقل إلى ما يسمى بـ URL، محدد مواقع الموارد
المُوحّد.
عنوان URL هو مجرد عنوان خادم.
وسيكون-- بالفعل، هو المستلِم النهائي لهذا الظرف
الذي نحاول الإرسال إليه.
لكن هذا، بالطبع، ليس عنوان IP.
فهذا لا يتبع نمط شيء ما نقطة
شيء ما نقطة شيء ما نقطة.
لذا إذا كنا نحن البشر جميعًا نكتب باستمرار أشياء من هذا القبيل
في متصفحاتنا، على الرغم من أن القصة الكاملة التي أخبرنا بها فقط
عن الأرقام وأرقام المنفذ والأشياء ذات المستوى المنخفض،
فأين هو الاتصال؟
هل يعرف أحد بالفعل كيف تصل من كتابة هذا
إلى مجموعة من الأصفار والواحدات التي تتم معالجتها بطريقة أو بأخرى باستخدام الأرقام؟
DNS، لقد سمعت ذلك.
ما هو DNS؟
نعم.
إذن تبين أن هناك تقنية في العالم-- نظام أسماء المجالات،
في الواقع.
وDNS، نظام أسماء المجالات، هو مجرد نوع من أنواع الخدمات على الإنترنت
التي تحتفظ بها جامعة هارفارد وجامعة ييل،
وشركتا كومكاست وفيرايزون والعديد من كبار المشغّلين
في العالم، هدفهم في الحياة هو تشغيل
الخوادم التي تقوم بتحويل ما يسمى بأسماء المجالات إلى عناوين IP،
والعكس، حتى عندما نكتب نحن البشر www.example.com في متصفح،
إنه جهاز Mac أو جهاز الكمبيوتر الشخصي أو الهاتف الذي يتصل بخادم محلي، خادم DNS،
في الحرم الجامعي أو الجامعة أو في شقة محلية أو أيًا كان،
ويطلب عنوان IP الخاص بـ www.example.com.
ثم ما يفعله جهاز Mac أو الكمبيوتر الشخصي أو الهاتف
هو كتابة ذلك العنوان على الظرف.
ولكنه يضع طلبًا لصفحة ويب محددة داخل الظرف.
وعندما تستقبل استجابة من ذلك الخادم،
سيكون عبارة عن عنوانك الموجود في الجزء الأمامي من الظرف.
وسيكون ما بداخل الظرف
هو صفحة الويب أو البريد الإلكتروني أو رسالة الدردشة
أو أيًا كان الذي كنتم تحاولون الوصول إليه بالفعل.
لذلك دعونا نقسّم هذا إلى بعض مكوناته.
أولاً وقبل كل شيء، هذا الشيء المظلل باللون الأصفر هنا
هو رسميًا اسم المجال.
من المحتمل أنكم جميعًا قد استخدمتم هذا المصطلح من قبل.
عادةً ما يكون شيء نقطة شيء.
يشير "Com" عادة إلى التجارة أو تجاري، على الرغم من أنه يمكن لأي شخص،
استخدام .com لأي غرض.
في وقت سابق، كانت com. ،net. ،org. ،edu. ،gov. ،mil. مألوفة للغاية.
وكانت تعد كل هذه الاختصارات مرتكزة جدًا على الولايات المتحدة لأنها
اتجهت لأن تكون الولايات المتحدة هي البلد التي بدأت بالفعل
في هذا الاستخدام من الإنترنت وDNS.
لكن الآن من المؤكد أنها تنتشر عالميًا.
وبالتالي توجد المئات الآن مما يسمى بمجالات TLD، مجالات المستوى الأعلى.
وتتجه لأن تكون من ثلاثة أحرف أو أكثر إذا كانت تدل على كلمة.
وتميل إلى أن تكون من حرفين إذا كانت تدل على بلد،
مثل US هو اختصار الولايات المتحدة، وJP اليابان، وUK--
المملكة المتحدة، وهكذا.
هذه مجرد رموز للبلدان وهي تفعل الشيء نفسه.
لكن ما هذا الذي يوجد في المقدمة؟
شبكة الويب العالمية، أو www، هنا، بشكل عام أكثر، هي مثال على ماذا،
من الناحية الفنية؟
ما هذا؟
ما الذي يعنيه ذلك؟
أجل؟
الجمهور: مجال فرعي.
DAVID J. MALAN: إنه مجال فرعي-- إحدى طرق التفكير في ذلك.
في الواقع، جميعكم، الكثير منكم هنا، من المحتمل
أن يكون لديه عناوين بريد إلكتروني بالصيغة college.harvard.edu أو g.harvard.edu
أو ما شابه ذلك.
هذه هي المجالات الفرعية.
جامعة هارفارد هي مكان كبير حيث تقوم بالفعل
بوضع الجميع في فئات مختلفة من المجالات، والمعروفة باسم المجالات الفرعية.
وقد تكون كلمة أو عبارة تأتي قبل اسم المجال هنا.
ولكنها قد تشير أيضًا إلى اسم الخادم.
لذا إذا كانت example.com شركة أو أعمال تجارية تحاول زيارة
موقع الويب الخاص بها، مجالها هو example.com.
وقاموا بتسمية اسم المجال منذ بضعة أعوام.
وأنفقوا بضعة دولارات كل عام، على الأرجح، وجددوا الرسوم لذلك.
ولديها على الأقل خادم واحد اسمه هو www.
وهذا موجود داخل المجال الخاص بها.
قد يكون لديها العشرات أو المئات أو خادم واحد فقط.
كل واحد منها يمكن أن يكون لديه اسم.
إذن هذا هو بشكل عام ما يسمى اسم المُضِيف.
لذلك عندما يتوفر عنوان البريد الإلكتروني، فإنه غالبًا ما يشير إلى مجال فرعي،
مثل فئة من العناوين.
ولكن عندما يكون في عنوان URL كهذا، وهو ما يشير إلى آلة محددة على الأرجح
أو مجموعة محددة من الآلات-- بشكل تقليدي،
خوادم الويب التي تديرها الشركة--
لا يجب أن يُطلق عليها www.
ولأغراض تاريخية، يميل MIT إلى استخدام web.mit.edu.
لكن يستخدم الجميع تقريبًا في العالم www أو لا شيء على الإطلاق.
لأنه ليس مطلوبًا.
في الواقع يمكنكم زيارة فقط العديد من المواقع دون زيارة أي اسم مُضِيف.
وتعمل فقط، أيضًا، بفضل DNS الذي يمنحكم عنوان IP.
ولكن ماذا عن الملف الذي تطلبه بالفعل؟
ما الذي تعنيه في الواقع زيارة عنوان URL هذا؟
حسنًا، على العديد من الخوادم، يعني هذا ضمنيًا، مرحبًا، خادم الويب،
أعطني ملفًا، فقط ملفًا نصيًا، اسمه index.html.
هذا هو اسم الملف، ملف نصي،
يمكنك إنشاؤه باستخدام CS50 IDE أو حتى Notepad أو TextEdit
على جهاز Mac أو الكمبيوتر الشخصي الذي يحتوي على لغة تسمى HTML.
وسنلقي نظرة على تلك اللغة بعد قليل.
والبعض منكم قد رأوها من قبل.
ولكن اللغة التي تتم كتابة صفحات الويب بها هي HTML.
وسنقوم بمنحكم كتل البناء، من الناحية النظرية والعملية،
لهذا اليوم.
ستستخدمونها خلال الأسابيع القادمة في العديد من السياقات المختلفة.
لكننا سنستخدمها، في النهاية، لإنشاء محتويات مواقع الويب.
ولكن اليوم ، سنركز على هذا أولاً، HTTP.
هل يعرف أي شخص ما الذي يعنيه؟
أجل؟
الجمهور: النص التشعبي.
ديفيد ج. مالان: أجل.
بروتوكول نقل النص التشعبي.
وبصراحة، في معظم التقنيات، حيث
لا تمثل الاختصارات كل هذه الأهمية،
بل، في الحقيقة، ما تقوم به التقنية.
وفي هذه الحالة، بروتوكول نقل النص التشعبي--
سنرى النص التشعبي في غضون لحظات.
هذه طريقة أخرى لقول HTML.
بروتوكول النقل-- P لبروتوكول هذه كلمة طنانة أخرى.
إذن البروتوكولات ليست لغات البرمجة، في حد ذاتها.
هي تقاليد.
ونحن البشر لدينا تقاليد أيضًا.
على سبيل المثال، إذا كنتُ سأقابل شخص للمرة الأولى،
ربما لن أقف على المسرح وأنحني على هذا النحو للقيام بذلك.
لكني قد أقول، مرحبًا، أنا ديفيد.
الجمهور: مرحبًا.
أنا ستيفان.
ديفيد ج. مالان: ستيفان، سررت بلقائك.
ولدينا هذه المصافحة الغريبة التي تم إجهاضها بشكل سابق لأوانه هناك--
حيث لدينا هذا التقليد الغريب-- نحن البشر، على الأقل في الولايات المتحدة،
من تحية شخص ما بمصافحته.
وعلم ستيفان فقط كيفية القيام بذلك، ولكن بصعوبة.
ثم قام بالفصل لأن المعاملة اكتملت.
وهذا لا يبدو مختلفًا عن ما يفعله خادم الويب.
عندا تطلب صفحة ويب، فأنت تقوم بإرسال طلب إلى شخص
كما لو كنت تمد إليه يدك.
أنت تتوقع شيئًا في المقابل.
لكن في حالة جهاز الكمبيوتر، بالطبع،
إنه يبدو مثل صفحة الويب نفسها التي تأتي مجددًا في ظرف من النقطة ب
إلى النقطة أ.
إذن هذا هو البروتوكول.
لقد قمنا بالبرمجة فقط لمعرفة ما
الذي سنفعله عندما نريد طلب تحية أو معلومات
والحصول على شيء في المقابل.
إنها مثل علاقة العميل ومقدم الخدمة في مطعم.
يطلب العميل شيئًا من القائمة.
يحضرها مقدم الخدمة، النادل أو النادلة، له
وبالتالي، يُنهي هذه المعاملة أيضًا.
وهذا هو الإنترنت، أيضًا--
العملاء والخوادم، المتصفحات والخوادم، أجهزة الكمبيوتر
وأجهزة الكمبيوتر الأخرى، في نهاية المطاف.
إذن مع وضع تلك العلاقة في الاعتبار، دعونا نلقي نظرة
على ما هو بالفعل داخل هذا الظرف.
في حالة إلقائي التحية مع ستيفان، كان الأمر مرئيًا بصورة أكبر.
لكن في حالة الكمبيوتر، سيكون الأمر نصيًا أكثر، حرفيًا.
إذن داخل الأظرف، الأظرف الافتراضية،
إذا جاز التعبير، حيث يرسل المتصفح الخاص بك إلى خادم
عند محاولة طلب صفحة ويب، في الواقع
هو عبارة عن رسالة تبدو هكذا.
لحسن الحظ، أنها ليست مشفرة للغاية، رغم أن نقطة، نقطة، نقطة
توضح أن هناك محتويات أكثر داخل الظرف.
ولكن الكلمة الأساسية هنا هي احصل على، وهي فعل.
وهناك أفعال أخرى يمكن للمتصفح استخدامها.
وهذا يعني حرفيًا، انتقل إلى الصفحة الرئيسية التالية.
ما هي الصفحة الرئيسية التي تريد الانتقال إليها؟
حسنًا، الصفحة الافتراضية.
هذا الخط المائل الأمامي، كما يُطلق عليه، فقط يمثل صفحة الويب الافتراضي
على موقع الويب.
وفي كثير من الحالات، هذا يعني ضمنيًا أن هناك ملف بالفعل يُسمى index.html، مجرد
تقليد.
يمكن أن يُطلق عليه أشياء أخرى وغير موجودة على الإطلاق.
لكن في كثير من الحالات، هذا يعني، ضمنيًا،
أعطني ملفًا باسم index.html.
وسنرى ما يبدو عليه في غضون لحظات.
يشير Http/1.1 فقط إلى، مرحبًا، ستيفان، أنا أتحدث إلى HTTP الإصدار 1.1.
آمل، أن تنفذوا هذا أيضًا.
يمكن أن تكون هناك إصدارات أخرى وإصدارات أحدث وإصدارات أقدم من الشيء نفسه.
لاحظوا في الأسفل هنا، على الرغم من-- معذرة-- لاحظوا الآن هنا، على الرغم من أن
اسم المُضِيف هو أيضًا في هذا الظرف
لأنه تبين أن خوادم الويب يمكنها القيام بأشياء متعددة في وقت واحد.
ويمكنهم أن يخدموا مجالات متعددة.
لا تحتاج إلى الخادم الشخصي الفريد من نوعه الخاص بك من أجل خدمة موقع الويب.
هل يمكن أن يكون لديك العشرات، المئات، الآلاف من مواقع ويب مختلفة
جمعيها على الخادم نفسه.
وإذا كان أي منكم قد دفع لاسم مجاله الخاص أو الصفحة الرئيسية الشخصية الخاصة
به أو ما شابه، فمن المحتمل أنك تدفع إلى شخص ما
من أجل مساحة مشتركة على خادم واحد أو أكثر من الخوادم،
وليس من أجل المساحة الشخصية المُخصصة لك.
ولكن مجددًا، قد يعني هذا ضمنيًا الشيء نفسه كهذا.
أعطني index.html.
فما هو الأمر الذي يعود بالفعل من الخادم؟
لحسن الحظ، يستجيب الخادم، لرسالة تبدو هكذا.
يستجيب لتأكيد الإصدار من البروتوكول الذي يتحدث به.
وهذا مثل ستيفان عندما يقول، نعم، أنا أتحدث إلى HTTP 1.1 أيضًا.
200 هو التعليمة البرمجية الرقمية التي تدل حرفيًا على موافق.
كل شيء على ما يرام.
لقد فهمتك.
ها هي المعلومات التي طلبتها.
ونوع المحتوى، أسفلها، هو وسيلة فنية أكثر لقول،
نوع المحتوى الذي أقوم بإرجاعه لك في الظرف الخاص بي
من النقطة ب إلى النقطة أ، أو من ستيفان إليّ،
بلغة تسمى HTML التي تصادف أن تكون نصًا.
لماذا تبدو هكذا؟
قرر البشر، منذ سنوات، فقط أن هذا
سيكون تسلسل الأحرف التي حرفيًا سترسلها
أجهزة الكمبيوتر لتوصيل تلك المعلومات.
لذلك دعونا بالفعل نجرب ذلك في حالة واحدة، ربما، على سبيل المثال، باستخدام harvard.edu،
ونرى ما يحدث بالفعل لمعرفة ما الذي قد نراه أيضًا.
إذن دعوني أمضي قدمًا وأفتح Chrome أو أي متصفح،
لهذا الأمر، الذي يدعم تصحيح الأخطاء وعمليات التشخيص.
وسأقوم بفعل ذلك.
ويمكنك الوصول إلى هذا من أماكن مختلفة.
سأنتقل للأعلى إلى عرض، المُطوِّر، ثم عرض أدوات المُطوِّر.
هذا هو شيء الذي يأتي في Chrome.
يجب عليك أحيانًا تمكينه في Safari والمتصفحات الأخرى.
لكن تقريبًا كل متصفح هذه الأيام لديه هذه القدرة.
وستلاحظون أن هذا فقط قام بفتح مجموعة كاملة من علامات التبويب
في الجزء السفلي من الشاشة لدي هنا والتي سأكون
قادرًا على استخدامها بالفعل لاستكشاف ما هو--
هل نقرت فوق شيء آخر؟
المعذرة.
لقد عاد-- لن أنتقل إلى هناك.
إذن ما الذي سيتيحه لنا هذا للقيام به؟
حسنًا، لاحظوا أن هناك العديد من الميزات هنا.
تبدو زاخمة للوهلة الأولى.
لكن هناك علامة تبويب هنا تسمى الشبكة.
وتبين أن إحدى الميزات التي يمنحها Chrome للمُطورين،
التي تعرفونها جميعًا الآن-- كمُطوِّري برامج--
هي القدرة على رؤية الأمور غير الظاهرة بمتصفح،
لمعرفة ما بداخل تلك الأظرف الافتراضية
التي يحتوي عليها المتصفح طوال تلك السنوات التي يتم فيها الإرسال
منها إلى خوادم في مكان آخر.
إذن سأمضي قدمًا وأفعل هذا.
سأمضي قدمًا وسأزور في الواقع http://harvard.edu وأضغط على Enter.
وسترون مجموعة كاملة من الأشياء التي تحدث،
بما في ذلك صفحة الويب التي تظهر في الجزء العلوي من الشاشة.
سأتجاهل جميع هذه الأمور في الجزء السفلي
باستثناء فقط الطلب الأول.
إذا قمت بتكبير هذا، لاحظوا هذا الشيء الذي تم تمييزه باللون الأزرق
هنا هو الطلب الأول، harvard.edu.
وإذا قمت بالنقر فوق ذلك، فسوف أرى المزيد من المعلومات على اليمين.
وإذا قمت بالتمرير للأسفل إلى ما يُطلق عليها
رؤوس الطلب، سطور النص التي كانت داخل الرسالة
التي أرسلها المتصفح الخاص بي، وهذا حرفيًا ما
أرسله المتصفح الخاص بي داخل الظرف، دون علمي،
عندما قمت بزيارة harvard.edu.
لحسن الحظ، إنه يؤكد توقعي في وقت سابق، get/http/1.1،
لأنني طلبت الصفحة الرئيسية الخاصة بـ harvard.edu.
المُضِيف هو harvard.edu.
ومن ثم هناك النقطة، النقطة، النقطة، والأشياء التي لا نهتم
بها تحديدًا اليوم.
ولكن دعوني أمضي قدمًا وألقي نظرة على الرد.
إذن كان هذا طلبي.
هذه كانت يدي التي سأسلم بها على ستيفان.
دعونا نرى رده أو استجابة الخادم
عن طريق التمرير إلى هذه، وهي ما يُطلق عليها رؤوس الاستجابة.
خادم هارفارد، لحسن الحظ، يتحدث بالبروتوكول نفسه
مثلي، 1.1 من HTTP.
ولكن على ما يبدو، انتقلت هارفارد بشكل دائم.
ما الذي يعنيه ذلك؟
انتقلتُ إلى http://harvard.edu، وليس هناك.
أين هي؟
حسنًا، يوجد المزيد من المعلومات هنا.
هناك العديد من نقطة، نقطة، نقطة، أشياء لا نهتم بها.
لكن إذا ركزنا على الذي هنا-- أوه، الموقع--
أين هي هارفرد الآن، على ما يبدو؟
أجل، تحدث--
الجمهور: [INAUDIBLE]
ديفيد ج. مالان: أجل.
يبدو أنه "تم نقل" هارفرد بشكل دائم من http://harvard.edu إلى،
ودعوني أظلله، https://www.harvard.edu،
مع تغييرين ملحوظين.
الأول، هناك www.
والثاني، يوجد أيضًا هذا الأمر الذي قد يثير انتباهك؟
S، الذي من المحتمل أن يعرفه معظمكم هذه الأيام أنه يعني آمن،
والذي يشير إلى التشفير ضمنيًا بشفرة قيصر وفيجينير،
ولكنها أكثر أمانًا بكثير من تلك الشفرات البسيطة.
تكون المعلومات إلى حد ما الآن مشوشة عندما أقوم بالاتصال
بيني وبين harvard.edu.
إذن يوجد قراران هناك.
قررت جامعة هارفارد أنها تريد أن تتيح، بالفعل، وتطلب
من المستخدمين زيارة موقع الويب الخاص بها بشكل آمن بحيث لا يمكن بالضرورة لأي شخص--
أو شركة، أو حكومة، أو أفراد عائلة--
رؤية ما الذي يتم طلبه من موقع جامعة هارفارد على الويب
لأن هذه المعلومات مشوشة، تشبه إلى حد كبير استخدام شيء
مثل شفرة قيصر أو فيجينير.
ولقد قررت هارفارد أيضًا، ربما لأسباب تتعلق بالعلامة التجارية،
لكن جزئيًا أيضًا لأسباب فنية،
أننا نريد منك أن تعتقد أن موقعنا على الويب هو www.harvard.edu.
وهو مزيج من التسويق والتقنيات لعدة أسباب مختلفة،
أحد هذه الأسباب هو www نحن البشر جميعًا نعرفه فقط وهو يشير إلى موقع ويب.
وإذا رأيتم harvard.edu--
وهذا صحيح بدرجة أقل هذه الأيام--
قد لا يشير بالضرورة كما هو موضح إلى أن هذا هو عنوان URL الخاص بمواقع الويب.
بصراحة، ليس منذ زمن بعيد، حتى أن الدعايا والإعلانات التليفزيونية والإعلانات
المطبوعة وما شابه ذلك ستعرض http:// للتوضيح بالفعل للمشاهدين أن
هذا هو عنوان ويب.
ولكن تدريجيًا، مع دخول أشخاص أكثر وأكثر على الإنترنت
واستيعابهم للتقنية وعناوين URL وما شابه ذلك،
يمكننا تجاهل الأشياء التي تعد فوضى غير ضرورية لأن
جميعنا الآن نعرف بشكل حدسي، أوه، harvard.edu-- هذا
ربما يكون عنوان ويب يمكنني فقط كتابته في متصفح.
وسيُنهي المتصفح أو الخادم فكرتي
وسيقوم في الواقع بإعداد عنوان URL الآمن أو www أو ما شابه ذلك.
إذن في الواقع لم نجد هارفارد بعد، على ما يبدو.
إذن دعونا نقوم بهذا بدلاً من ذلك.
دعوني أمضي قدمًا وأقوم بالتصغير وأزور عنوان URL مختلف.
دعوني أمضي قدمًا، مجددًا، وانتقل إلى عرض، المُطوِّر، أدوات
المُطوِّر، علامة تبويب الشبكة.
والآن دعوني أزور عنوان URL أكثر إطنابًا، وعنوان URL أكثر دقة، ثم أضغط على Enter.
مجددًا، مجموعة كاملة من الأشياء يتم طلبها--
والمزيد حول ذلك في وقت آخر.
ولكن الآن، إذا قُمت بالنقر فوق أول طلب من هذا القبيل
ونظرت إلى رؤوس الاستجابة، فسأرى،
بالفعل، وإن كان في تنسيق مختلف الآن، أن حالة هذا الطلب هي 200،
التي، كما تذكرون، تشير إلى--
الجمهور: حسنًا.
ديفيد ج. مالان: حسنًا.
حسنًا.
إذن حتى الآن هذان هما الرقمان اللذين، بصراحة، من المحتمل
أنكم لم تراهما أو تهتمون بهما كثيرًا بالفعل، 200 و301.
لكن الاحتمالات هي أنكم قد رأيتم رقمًا واحدًا آخر على الأقل عند زيارة عناوين URL.
على سبيل المثال، بجانب رؤية 200 و301 بالفعل، من المحتمل أنكم رأيتم 404.
الآن، من الواضح أنه يشير إلى أنه غير موجود.
ولكن المزيد بقيم فعلية، ماذا يعني ذلك؟
كيف تستنج هذا الخطأ؟
الجمهور: الموقع غير موجود.
ديفيد ج. مالان: الموقع غير موجود.
لقد أخطأت في كتابة عنوان URL.
صفحة الويب غير موجودة.
قام مسؤول النظام للتو بتغيير الاسم على شيء أو إنه عنوان URL قديم.
يمكن أن يشير أي عدد من الأسباب إلى أنه لم يتم العثور على الملف.
قد يحتوي هذا الملف على index.html أو أي عنوان URL آخر.
ولكن طوال هذا الوقت الذي قمت فيه بزيارة موقع ويب ورأيت 404،
هذا ليس واضحًا، بصراحة، لماذا تتحمل الخوادم العناء لتقول لنا 404.
لا يحتاج معظم الأشخاص إلى هذا المستوى من المعلومات.
لكنه مشتق من استجابة HTTP، هذا السطر الأول
من النص الموجود بداخل الظرف العائد من ستيفان أو خادم الويب،
بشكل عام أكثر، ذلك يقول 404، غير موجود.
وهذا يعني أن المستخدم ربما أرتكب شيئًا خاطئًا
أو أن البيانات قد اختفت ببساطة من الخادم.
وهناك الكثير من هذه الأشياء أيضًا.
وفي الواقع، قد تحصل على استجابات، مثلما حدث معنا
للتو في جامعة هارفارد، من دعم ليس فقط 1.1، ولكن أيضًا الإصدار 2 من HTTP.
إذن فقط أعلم أنه إذا قمت بالعبث في جهاز Mac أو الكمبيوتر الشخصي الخاص بك،
قد تبدو الرسائل مختلفة قليلاً
بناءً على متصفحك وموقع الويب.
وهذا فقط لأن الأشياء تتطور مع مرور الوقت.
والإصدارات تتغير.
لكن هناك العديد من الإصدارات الأخرى من هذه.
وهذه مجرد قائمة قصيرة، ومختصرة.
رأينا 200 و301.
404 الذي من المحتمل أنكم رأيتموه بأنفسكم.
يشير 401 و403 بشكل عام إلى أنك لم تقم بتسجيل الدخول
أو أنك غير مُخوّل فقط للوصول إلى المعلومات
لأنها لا تخصك، على سبيل المثال.
500 ستقومون جميعًا بتجربته قبل--
500 هو خطأ داخلي في الخادم، وهو ليس
خطأ الخادم بشكل كبير مثلما هو خطأك وخطأي
عندما كتبنا التعليمة البرمجية الخاطئة.
إذن في الأسابيع المقبلة، وليس هذا الأسبوع، ولكن عندما
نبدأ بكتابة تعليمة Python البرمجية وSQL للتحدّث إلى قواعد البيانات،
سنخفق جميعًا في مرحلة ما.
وغالبًا ما سيشاهد متصفح خطأ 500 من خادم
في الواقع، إذا كانت هناك مشكلة بتعليمة برمجية.
418 غير موجود بالفعل.
كانت هذه دعابة كذبة أبريل، أعتقد، أنه، في، على سبيل المثال، 1988،
عندما كتب بعض الأشخاص ممن لديهم الكثير من وقت الفراغ
مواصفات رسمية كاملة لتعلمية حالة HTTP البرمجية، 418،
I am a teapot.
وهى ما تزال نوعًا ما موجودة في العلم، علم الإنترنت.
إذن هذه فقط بعض الأرقام التي قد تروها.
لكنها ليست جميع تلك التقنيات إذا علمت فقط أين تبحث عنها
وأنت تعلمون، الآن كمطوِّرين، ما تعنيه بالنسبة لكم.
أجل؟
الجمهور: [INAUDIBLE]
ديفيد ج. مالان: سؤال جيد.
ما هو الفرق بين 200 موافق و302 موجود؟
إذن 302، إذا قرأت الوثائق،
ستخبرك في الواقع أن هذا أيضًا يحث على
إعادة توجيه، حيث، تمامًا مثل 301، عندما يحصل المتصفح على 301 أو 302،
فيجب إعادة توجيه المتصفح إلى عنوان URL الجديد الذي رأيناه في الرأس،
إذا جاز التعبير، الذي يُطلق عليه موقع، نقطتين، أيًا كان.
الفرق هو أن عبارة "تم النقل بشكل دائم" تعني
أن المتصفح يجب أن يتذكر أن عملية إعادة التوجية تلك تحدث
وتوقف تحمل الخادم لعناء المهمة الأصلية نفسها.
فقط تذكر ما هو عنوان URL الجديد.
302 يعني موجود، ولكن لا يعتمد على ذلك.
استمر في سؤالي مرارًا وتكرارًا.
إذن هو مجرد تحسين للأداء لذا
لا تزعج الخادم دون داعٍ في حالة 301، وهي فقط
تستهلك الوقت والمال، بشكل منطقي.
إذن ربما قد سمعتم عن هذا من قبل--
يمكن فقط أن القيام بذلك في كامبريدج، وليس كثيرًا في نيو هافن.
هل قام أي شخص بزيارة safetyschool.org؟
الجمهور: مرحبًا.
ديفيد ج. مالان: أنت مرحب بك على جهاز الكمبيوتر المحمول أو الهاتف الخاص بك.
لذا قام بعض طلاب جامعة هارفارد الأذكياء للغاية، أعتقد، منذ سنوات بشراء هذا المجال.
بصراحة، ربما دفعوا، على سبيل المثال، 10 دولارات أو أكثر
في السنة منذ ذلك الوقت فقط لإبقاء تلك الدعابة.
لكنها موضحة بشكل رائع لأنه إذا عدنا
إلى Chrome أو أي متصفح--
ودعوني أمضي قدمًا وأفتح علامة تبويب متصفح وأنتقل إلى safetyschool.org،
Enter.
أوه، هذا أمر مثير للاهتمام.
إلى أين تمت إعادة توجيهي؟
الجمهور: مرحبًا.
ديفيد ج. مالان: مرحبًا.
إذن السؤال المثير للاهتمام بشكل أكبر بالنسبة لنا هو، كيف يفعلون ذلك؟
حسنًا، دعوني أعود إلى IDE--
أو في الواقع، دعونى أنتقل إلى المتصفح وأفتح علامة تبويب جديدة--
عرض، المُطوِّر، أدوات المُطوِّر.
انظروا إلى علامة تبويب الشبكة.
والآن دعوني أمضي قُدمًا--
معذرة-- دعوني أمضي قدمًا وأقوم بزيارة http://safetyschool.org.
Enter.
وأقوم بالتمرير مجددًا إلى الأعلى، حيث أرى الطلب الأول.
ويمكنكم رؤية، من الناحية الفنية، إذا كان هذا لا يجعل
المزحة مرحة، كان كل ما قام به طلاب جامعة هارفارد
منذ سنوات هو تكوين اسم هذا المجال لإرجاع 301،
تم النقل بشكل دائم إلى جامعة ييل.
الآن، يبدو أن الأمر جيد فقط، وخاصة عندما يشاهد طلاب ييل
هذا البث المباشر الآن من نيو هافن--
دعونا نلقي نظرة على موقع آخر يسمى harvardsucks.org.
إذن هذا المجال، موجود، أيضًا.
دعوني أمحو ما على الشاشة وانتقل إلى http://harvardsucks.org.
Enter.
وهذا هو موقع ويب فعلي.
لذا لم يقم طلاب جامعة ييل المغامرون بشراء اسم المجال فقط،
ولكن لقد كانوا يستضيفون الموقع أيضًا منذ سنوات.
يوجد فيديو رائع على اليوتيوب هناك يتحدث في الواقع عن الاختراق المضحك للغاية
الذي قاموا به منذ بضعة أعوام في مباراة هارفارد وييل، مباراة كرة القدم.
ولكن يمكنكم رؤية ذلك هنا، أوه، هذا--
إذن هذه مسألة ثانوية.
إذن في الواقع يقوم harvardsucks.org الآن ببث مباشر على www.harvardsucks.org.
لكنكم في الواقع تبقون هناك.
ولذلك فإنني أشجعكم على الانتقال إلى هذا الموقع، وكذلك المواقع الأخرى، لتلبية جميع
احتياجات التسوق في هارفارد وييل.
إذن هذا هو HTTP.
وHTTP هو البروتوكول، مجموعة من التقاليد، التي تستخدمها
المتصفحات عند التحدث إلى خوادم الويب.
وهو البروتوكول الذي يتحكّم في كيفية استجابة
خوادم الويب هذه للمتصفحات.
لقد قمنا بتحديد كمية هذا في شكل الأظرف الافتراضية تلك، وهي عبارة عن
تجسيد مادي فقط للأصفار والواحدات التي تنتقل من الناحية الفنية
ذهابًا وإيابًا عبر الإنترنت.
لكنها تتجسد في مصافحتي لستيفان، في ما يحدث حقًا.
بادرت بالتحية.
فاستجاب.
وتبدو مثل نوع علاقة العميل والخادم.
فكيف يمكنكم في الواقع الآن القيام بعمل إبداعي؟
كيف تقومون بإنشاء yale.edu؟
كيف تقوم بإنشاء harvardsucks.org؟
كيف تقومون بإنشاء موقع ويب خاص بدورة CS50 أو Google أو Facebook؟
حسنًا، ما يهم الآن حقًا هو--
ما هو موجود بشكل أعمق داخل هذا الظرف.
بالإضافة إلى هذه الرؤوس، هذه المعلومات النصية،
مثل 200 موافق أو 301 تم النقل بشكل دائم، توجد
لغة أخرى مُضمنة داخل هذا الظرف، بشكل أعمق في الأسفل،
تسمى HTML، لغة ترميز النص التشعبي.
هذه هي اللغة، التي تعد نصًا أيضًا، حيث تتم كتابة صفحات الويب بها.
ولذا إذا قمتم بزيارة موقع ويب على شبكة الإنترنت،
ولاحظت فقط أن إرين تفعل هذا بشكل متكرر، أليست هي، الشيء--
الذي كنت تبحث عنه هو تقديم متصفحات من HTML.
إذن HTML مجرد نص.
وسنرى ذلك في غضون لحظات.
يقرأ المتصفح هذا النص من الأعلى إلى الأسفل، من اليسار إلى اليمين، مثلما يقرأ
Clang تعليمة C البرمجية من الأعلى إلى الأسفل، من اليسار إلى اليمين.
ولكن بدلاً من تحويل نصك إلى أصفار وواحدات، ما يقوم به المتصفح
هو تفسيرها سطرًا بسطر بسطر.
ويفعل ما تقوله.
لذا إذا قلت، مرحبًا، أيها المتصفح، ضَع صورة إرين على الشاشة،
سيقوم بتنفيذ ذلك.
إذا قلت، مرحبًا، أيها المتصفح، اكتب كلمة "طاقم العمل" بنص أسود كبير،
سينفذ المتصفح ذلك.
إذا أخبرت المتصفح أن يقوم بوضع قائمة كاملة، سينفذ ذلك.
وسنرى، فقط في غضون لحظات، كيف يقوم بتحويل تلك المصطلحات.
HTML ليست لغة برمجة.
إنها، في الواقع، لغة ترميز، مما يعني أنها تضع الأشياء
على نحو بنائي و جمالي.
لذلك فإن موقع الويب هنا الذي نبحث عنه يحتوي على مجموعة من الصور، جميعها
يُطلق عليها صور GIF المتحركة، الرائجة
إلى حد كبير جدًا هذه الأيام على ريديت وأجهزة الهاتف وiMessage وما شابه ذلك.
لكن هذه مجرد صور، ملفات، يتم نقلها بالفعل
من خادم CS50 إلى متصفحك.
ولكن إذا صعدت إلى View، والمُطوِّر، والآن إلى عرض المصدر، ويمكنكم--
يمكنكم القيام بهذا طوال هذه السنوات--
يمكنكم بالفعل رؤية ما يُطلق عليها HTML التي تُشغِّل موقع CD50 على الويب.
إذن هذا كل شيء عن HTML، وسأقوم بالتمرير
سريعًا بشكل متعمد خلالها، وهي تقوم بتنفيذ صفحة طاقم عمل CS50.
وإذا قمنا بالتمرير على طول الطريق إلى الأسفل،
سترون لاحقًا أن السطور 1,008 هي صفحة الويب التي تم تنفيذها.
لكنها مجرد نص.
وفي الواقع، دعوني أقوم بالتمرير لأعلى مجددًا وأشير فقط
إلى بعض التفاصيل البارزة.
سترون أنماطًا مألوفة في الأمثلة
نحن على وشك البدء في النظر فيها.
السطر الأول من المحتمل هو ذلك، DOCTYPE HTML، والذي
يشبه تلميحًا صغيرًا إلى المتصفح الذي يقول،
بصراحة جدًا، مرحبًا، أيها المتصفح، نوع المستند الذي على وشك أن تراه
هو في الواقع HTML.
لكن يتبع باقي صفحة الويب نمطًا بنائيًا.
وسترون أنها موضوعة بشكل جيد بالفعل،
حتى لو كانت بعض هذه السطور طويلة قليلاً ومغلّفة.
ولكنكم سترون هذا التقليد، وهو عبارة عن قوس مفتوح، وهو قوس بزاوية،
مثل علامة أصغر، الكلمة الرئيسية html، ربما بعض الأنماط كهذه،
lang تساوي en-us--
هذا يبدو مثل اللغة-- هي الإنجليزية الأمريكية، ربما--
أكثر بشأن ذلك وإن كان-- ومن ثم هذا القوس المغلق، أو علامة أكبر من،
التي تُنهي الفكرة.
ثم داخل علامة HTML تلك، إذا جاز التعبير، الموضوع أسفلها،
هو هذا، رأس صفحة الويب.
رأس صفحة الويب هو شيء لا يمكنك رؤيته غالبًا.
يشير بشكل عام إلى علامة التبويب في الجزء العلوي من الصفحة
وإلى معلومات غير مرئية فقط.
وإذا قمت بالتمرير لأسفل أكثر، فنرى، حقًا، محتوى صفحة الويب،
والتي توجد في ما يُسمى ببنية صفحة الويب.
وبالتالي فإن هذه الأشياء التي أقوم بتظليلها فقط،
وإن كانت في سياق كبير جدًا من صفحة ويب كبيرة تتكون من 1000 سطر،
يُطلق عليها فقط علامات HTML.
HTML عبارة عن لغة قائمة على علامة، لغة قائمة على الترميز،
حيث يمكنكم فقط قول ما تريدون أن يظهر حيثما تريدونه أن يظهر.
إذن ماذا يعني هذا بالفعل؟
حسنًا، دعونا نلقي نظرة على مثال أبسط
في شكل هذه الشريحة، والتي ربما تكون أبسط صفحة ويب
يمكنك إعدادها، هذه الصفحة هنا.
من المحتمل أن تكون هذه صفحة الويب الصحيحة بشكل أكثر بساطة، أو من حيث الصياغة
والتي يمكنكم كتابتها لقول، مرحبًا، أيها المتصفح، نوع الوثيقة هو HTML.
مرحبًا أيها المتصفح، ها هي بداية صفحة HTML الخاصة بي.
مرحبًا، أيها المتصفح، ها هي رأس صفحة الويب الخاصة بي.
مرحبًا، أيها المتصفح، ها هو عنوان صفحة الويب الخاصة بي.
مرحبًا، أيها المتصفح، سيكون عنوان هذه الصفحة، من أجل المناقشة،
هو "مرحبًا، أيها العنوان."
ولكن يمكنكم حرفيًا قول أي شيء تريدونه.
لكن الآن أصبحت هذه الأشياء مثيرة للاهتمام.
وقد شاهد البعض منكم بالتأكيد HTML من قبل، ولم يقم بعضكم بذلك.
ولكن من المحتمل أن تتمكنوا من الاستنتاج فقط، حتى لو لم
تروا HTML، ما الذي تقوم به هذه العلامة لأنها تبدو مماثلة،
ولكن مختلفة قليلاً.
لذلك إذا قال هذا، مرحبًا، أيها المتصفح، ها هو العنوان،
ما الذي يقوله هذا على الأرجح، بشكل حدسي؟
الجمهور: إنه يُنهي ذلك فقط.
ديفيد ج. مالان: أجل.
هذا كل شيء بشأن العنوان.
مرحبًا، أيها المتصفح، هذا كل شيء بشأن العنوان.
لذلك قد تقومون بتسمية هذه علامة البدء وتلك علامة الانتهاء،
أو علامة فتح وعلامة إغلاق.
فكّروا في الأمر كما تريدون.
ولكن في HTML، يوجد بشكل عام هذا التماثل الرائع.
بمجرد أن تبدأ بشيء، تنهيه في نهاية المطاف.
وتنفذه بالترتيب الصحيح.
لذا فأنت تقوم-- تبدأ بعلامات في ترتيب واحد.
ومن ثم تقوم بإغلاقها في ترتيب عكسي بحيث يكون كل شيء متناسقًا بشكل جيد.
وفي الحقيقة، المسافة البادئة، تمامًا كما في لغة C،
لا تهم على الإطلاق من الناحية الفنية.
يمكن أن يكون لديك حقًا، صفحة ويب قبيحة جدًا دون أي مسافات على الإطلاق.
وستظل تعمل بشكل جيد للمتصفح نظرًا لأنه لا يهتم--
بالقراءة بصعوبة للغاية مثلنا نحن البشر.
إذن هذا التقليد يبدو جيدًا، تمامًا كما هو الحال في لغة C،
فقط لتوضيح ما هو التسلسل الهرمي أو البناء،
إذا جاز التعبير.
هذا السطر هنا يعني، مرحبًا، أيها المتصفح، هذا كل شيء بشأن الرأس.
إنها علامة إغلاق أخرى.
مرحبًا، أيها المتصفح، ها هي بنية الصفحة.
تبدو بشكل كبير مثل الرأس هنا، البنية هنا، يوجد معظم محتوى الصفحة،
في الواقع، في بنية صفحة الويب.
هذا ما نراه، نحن البشر، في الواقع.
وغالبًا في الرأس، سنرى فقط أشياء مثل العنوان
وبضعة أشياء أخرى بعد قليل.
ومن الواضح أن الرسالة الموجودة داخل صفحة الويب هذه، هي "مرحبًا، أيتها البنية"
ثم إغلاق البنية، إغلاق html.
وهذا كل شيء.
إذن عندما قلت في وقت سابق أن ما بداخل هذه الأظرف
هو مجموعة نص كاملة فقط، كل ما عنيته هو هذا.
هذا هو ما بداخل هذا الظرف فقط أسفل
معلومات البروتوكول، معلومات HTTP، التي قالت للتو 200 موافق
أو أيًا من تلك الرسائل الأخرى.
لذلك عندما يتلقى المتصفح هذا الظرف، يفتحه.
يقرأه من الأعلى إلى الأسفل، من اليسار إلى اليمين.
ومن ثم يفسر حرفيًا هذا الملف من الأعلى إلى الأسفل،
يفعل بالضبط ما تقوله ليقوم به.
إذن، كيف نقوم في الواقع بفعل هذا؟
يمكنكم كتابة HTML على أي برنامج نصي.
يمكنكم كتابته في TextEdit، على جهاز Mac، على Notepad، على جهاز الكمبيوتر الشخصي.
يمكنكم، من الناحية الفنية، استخدام Microsoft Word أو Google Docs.
لكن هذا أمر خارج السياق وسيء.
هذه تتيح لكم ميزات لا تريدونها.
لكنكم تريدون محرر نص بشكل عام.
ونحن، بالطبع، لدينا محرر نص في CS50 IDE.
إذن دعوني في الواقع أنتقل إلى هناك.
سأمضى قدمًا وأنتقل إلى CS50 IDE.
و سأنتقل للأعلى إلى ملف، جديد.
وسأمضى قدمًا وبشكل استباقي فقط سأحفظ الملف باسم الملف الوحيد
الذي أتذكره من وقت سابق، وهو index.html.
تمامًا مثل برامج C التي تنتهي بملفات يُطلق عليها شيء ما .c،
تنتهي ملفات HTML غالبًا بـ .html، وأحيانًا بـ .htm، ولكن غالبًا بـ .html،.
إذن دعوني أمضي قُدمًا و أضغط على حفظ هناك.
والآن سأمضي قُدمًا وأقوم-- بكتابة هذه التعليمة البرمجية نفسها بالضبط--
إذن فتح قوس، علامة تعجب.
وهذه هي علامة التعجب الوحيدة التي سنتوقعها.
السطر الأول، لسوء الحظ، مختلف قليلاً عن جميع السطور الأخرى.
ثم سأمضى قُدمًا وأقوم بفتح قوس، html، أغلق القوس.
وستلاحظون ذلك، تمامًا مثل استخدام C، تحاول IDE أن تكون مفيدة قليلاً
و تنهي فكرتي.
إذن لقد أغلقت من أجلي علامة التبويب بالفعل.
الآن عليّ فقط أن أنقر فوق Enter ليتم نقله إلى موضعه.
الآن سأمضي قُدمًا-- ما الذي يحدث بعد ذلك داخل--
أوه.
ما الذي يحدث بعد ذلك؟
الرأس-- إذن أفتح القوس، رأس، أغلق القوس.
كان داخل الرأس--
نعم، عنوان.
ومن ثم أعتقد أنه قال فقط، "مرحبًا، أيها العنوان"
على الرغم من أنه يمكنني أن أطلق عليه أي شيء أريده.
ثم أسفل الرأس، ولكن كانت ما تزال داخل علامة HTML، البنية الخاصة بي.
إذن دعوني أكتُب ذلك هنا.
وأعتقد أنني قلت، "مرحبًا، أيتها البنية."
إذن-- bdoy، boday.
حسنًا، بنية-- حفظ.
إذن الآن لدي ملف نصي في IDE.
يبدو أنه مُتطابق مع ما عرضناه كصفحة متعارف عليها من قبل.
الآن نحن بحاجة إلى تحميله في متصفح.
وهذا الأمر متناقض قليلاً لأنني،
من الواضح، أكتب هذا النص في متصفح،
ومع ذلك أحتاج إلى أن يقرأه المتصفح.
إذن هذا فقط لأن IDE، بيئة التطوير المتكاملة،
التي قمنا باستخدامها هي، نفسها، قائمة على الويب.
هذه مجرد تفصيل عرضي.
في الواقع لقد كتبتُ التعليمة البرمجية هذه في ملف الآن وهذا ما يهُم.
يمكن أن يكون في السحابة كما هو.
أو قد يكون على جهاز Mac الخاص بي.
أو قد يكون على جهاز الكمبيوتر الشخصي.
أو قد يكون على أي خادم آخر على الإنترنت.
المغزى هو أنني بحاجة إلى الوصول إلى هذا الملف بطريقة ما.
إذن يتضح أننا لن نقوم بتحويله برمجيًا.
لا تُوجد أصفار أو واحدات متضمنة بعد الآن.
لا تُوجد تعليمة برمجية آلية.
سندع الأمر هكذا فقط.
يتم تفسير HTML، حرفيًا، سطر بسطر، من الأعلى إلى الأسفل--
لا توجد أصفار وواحدات مطلوبة.
ولكنني سأحتاج إلى تشغيل خادم الويب الخاص بي، وليس IDE نفسه.
أريد أن أُشغل، كمُطوِّر، خادم الويب الخاص بي.
ما هو خادم الويب؟
إنه مثل ستيفان.
إنه مجرد برنامج هناك، وينتظر وينتظر
وينتظر حدوث شيء ما.
ويُعد هذا الشيء، بشكل افتراضي، طلبًا من متصفح، عند هذه النقطة
التي فيها سيستجيب بمصافحة أو، بشكل أكثر تحديدًا، بهذا الملف.
إذن كيف يُمكنني فعل هذا؟
حسنًا، في IDE، نقوم في الواقع بتضمين برنامج مجاني يُطلق عليه http-server.
جميع البرامج الموجودة في CS50 IDE مجانية ومفتوحة المصدر.
إذن ببساطة اخترنا بعض الحزم الأكثر شيوعًا، ويُطلق على إحدى هذه الحزم،
حرفيًا، http-server.
وإذا مضيتُ قدمًا وضغطتُ على Enter، سترون معلومات مشفرة بطريقة ما
في البداية.
ولكن لنرى ذلك.
إنها تبدأ بتشغيل http-server.
إنها تقدم نقطة خط مائل.
حسنًا، ما الذي تعنيه النقطة؟
هذا المجلد.
إذن تقوم فقط بتقديم محتويات هذا المجلد الحالي الذي أنا فيه.
الآن إنها تقول أنه متاح على عنوان URL هذا.
وسيختلف عنوان URL هذا بناء على مَن سيقوم بتشغيل هذا.
إذا قمتم بتشغيله، فسترون عنوان URL مختلف.
لكن الأمر المثير للاهتمام هو الرقم--
تبين أنه، لأن هذا هو خادم الويب الشخصي الصغير الخاص بي،
إنه لا يستخدم المنفذ 80، الذي كنت أزعم أنه في وقت سابق هو الافتراضي.
إنه يستخدم تقليدًا مختلفًا، 8080.
8080 هو مجرد تقليد بشري.
إنه ليس مُوحّد بالطريقة نفسها.
ولكن بهذه الطريقة، يمكنني أن أقدّم ملفات منفصلة من IDE
لأن IDE نفسها في الواقع تستمع عبر المنفذ 80،
أو، من الناحية الفنية، 443، لأنها تستخدم برتوكولات HTTPS.
وأنا لا أريد الخلط بين ملفاتي وملفات CS50 IDE،
واجهة المستخدم الفعلية التي أصبحت مألوفة لكم جميعًا.
إذن، تمامًا مثلما يمكن أن يسمع ستيفان من--
قول مرحبًا لعدة أشخاص وكما يمكن أن تتعامل خوادم Google مع خدمات متعددة،
يمكنأن تستمع أيضًا IDE الخاصة بي عبر منافذ متعددة، كما يُطلق عليها--
80، أو 25، أو 443، أو، في هذه الحالة، 8080.
إذن ما الذي يعنيه كل هذا؟
سأمضي قدمًا وأنقر حرفيًا فوق عنوان URL هذا،
أفتحه في علامة تبويب أخرى على المتصفح الخاص بي، وسترون مخرجات مشفرة بطريقة ما.
لكن هذه مجرد طريقة موجزة لقول، ها هو الفهرس، القائمة،
من الخط المائل، وهي الآن المساحة الافتراضية لموقع الويب الخاص بي.
لقد حصلت على مجلدين، المصدر 5، الموجود بموقع الدورة على الويب--
وهي جميع ملفات اليوم في حالة أردنا البحث عنها دون كتابتها
من سكراتش--
ومن ثم الملف الذي قمت بإنشائه للتو، index.html.
إذن إذا مضيت قدمًا الآن ونقرت فوق index.html، فلدينا هنا- مرحبًا،أيتها
البنية.
ونحن لا نرى علامة التبويب فقط لأنني قمت بفتح Chrome في وضع ملء الشاشة.
ولكن إذا قُمت بالفعل بإنهاء وضع ملء الشاشة
وقمت بالتكبير في أعلى علامة التبويب، سترون "مرحبًا، أيها العنوان" هناك.
وإذا عدتُ إلى هذا الملف، في الوقت نفسه، وقلتُ،
"مرحبًا، أيتها البنية، سررتُ بلقائك"-- أصبح هذا الشيء غريبًا--
الآن سأمضي قدمًا وأنقر فوق إعادة التحميل.
والآن ترون هذا.
دعونا نمضي قدمًا ونأخذ استراحة لمدة خمس دقائق
عاجلاً وليس آجلاً، حتى نتمكّن من معالجة مشكلة جهاز العرض.
وسنعود بعد قليل.
إذن الخلاصة، توجد علامات أكثر من html فقط والرأس والعنوان والبنية.
توجد أشياء تعطينا صور وأصوات، بالتأكيد،
والعديد، العديد، العديد من الأشياء الأخرى.
إذن دعونا نُلقي نظرة بشكل يدوي أكثر في مثال واحد فقط أو اثنين من الأمثلة الأخرى
ومن ثم نتعرّف على القائمة الكاملة من من العلامات التي قد تكون متوفرة.
دعوني أمضي قدمًا وأقوم بإنشاء ملف جديد.
سأمضي قدمًا وأطلق على هذا image.html.
والآن تحسبًا لتقديم إثبات أنه
يتضمن صورة، توفيرًا للوقت، سأمضي قدمًا فقط
وأقوم بلصق المحتويات من الملف السابق.
ولكن سأمضي قدمًا وأتخلص من البنية هذه المرة
وسأبدأ بالفعل بتضمين صورة هنا.
حاليًا، قُمت مسبقًا بتحميل صورة كلب بولدوغ خاصة بجامعة ييل، هانسوم
دان، في ملف يُطلق عليه dan.jpeg.
وقمت بتحميلها إلى IDE في المجلد نفسه
الذي يحتوي على index.html والآن يحتوي على image.html هذا.
ويمكنكم تضمين صورة باستخدام علامة img.
ولكن يجب أن تحددوا للمتصفح ما هي الصورة التي
تريدون تضمينها بالفعل.
ولكي تقوموا بذلك، كما تعلمون، لدينا سمات.
إذن تمامًا مثل علامة html، كما رأينا في وقت سابق ويمكننا أن نرى ذلك الآن في المثال
الموجود هنا، إنه يحتوي على سمة لغوية تُحدد اللغة الإنجليزية كاللغة الافتراضية
لهذه الصفحة لمساعدة الأشياء مثل Google Translate وما شابه ذلك،
إذن علامة image تم تعديلها بواسطة هذه السمة التي يُطلق عليها مصدر.
إنها فقط src وimg لأن هاتين هما التمثيلات الأكثر إيجازًا
من "image" و"source"-- توفر لنا بعض ضغطات المفاتيح.
والآن يمكنني كتابة dan.jpeg هنا.
ومن ثم، فقط لتدبر الأمور جيدًا--
حسنًا، بدلاً من ذلك، يمكنني غلق العلامة بعد ذلك باستخدام القوس بزاوية المتوافق،
علامة أكبر من.
لكن في حين أن جميع العلامات الأخرى حتى الآن
تحتوي على فكرة البدء التوقف أو الفتح والإغلاق،
لا تحتوي علامة image على ذلك لأن الصورة إما موجودة أو غير موجودة.
لا توجد في الواقع فكرة نظرية لبدء صورة بالفعل
ومن ثم في النهاية وقف صورة.
لكن دعونا نضيف تفصيلاً واحدًا آخر.
اتضح أنه توجد سمات أخرى بعد.
إذن يمكنكم الحصول على صفر أو أكثر على أي علامة.
بالنسبة لمَن لديهم مشكلة في رؤية المحتوى على صفحات الويب
ويعتمدون بالفعل على أدوات مثل أجهزة قارئ الشاشة،
توجد في الواقع سمات يمكن أن تساعدهم في حالة من هذا القبيل--
يتضح أن هناك علامة بديلة، أو alt، حيث يمكنك أن تقول في الواقع،
"صورة هانسوم دان"، وهي عبارة عن وصف نصي لها أيًا كان
ما تقوم بتضمينه في صفحة الويب.
بهذه الطريقة، يمكن أن يفهم الشخص الذي لم يتمكّن من رؤية ذلك ولكن
لديه قارئ شاشة يمكنه قراءة ذلك له
بالفعل ما هو موجود على صفحة الويب.
لذلك معظم الأشخاص لن يروا ذلك ما لم تقوموا بالتمرير فوقها بالفعل
أو قامت بالتحدّث إليكم.
إذن دعوني أمضي قدمًا وأحفظ هذا الملف، وسأعود إلى فهرس خادم الويب
الذي قمت بتشغيله في وقت سابق مع http-server، والآن سأنقر على الصورة.
و ها هي ذا.
سترون dan.jpeg مُضمّنة في صفحة الويب.
بالطبع، لا تقوم صفحة الويب هذه في الواقع بكل ذلك حتى الآن.
ولذا لنفترض أننا أردنا فعلاً أن نقوم بربط صفحة واحدة أو أكثر.
حسنًا، يمكننا القيام بذلك أيضًا.
دعوني أعود إلى IDE، وأنسخ هذه التعليمة البرمجية نفسها، فقط كنقطة انطلاق،
وأقوم بإنشاء ملف جديد باسم link.html.
ومن ثم في هذا الملف، سنبدأ بالمحتويات نفسها.
لكن دعوني أتخلص من هذه البنية وأقول ببساطة،
على سبيل المثال-- دعونا نقول أن الأشخاص يزورون جامعة هارفارد.
لذا يمكنني أن أقول visit https، للأمان، www.harvard.edu/،
أو ربما بدون الخط المائل-- لا يهم للصفحة الافتراضية--
نقطة.
دعوني أقوم بحفظ هذا.
دعوني أعود إلى فهرس خادم الويب،
إعادة التحميل حتى يمكننى رؤية الملف الجديد، link.html، الذي أنشأته،
والآن أقوم بالنقر فوق link.html.
و ها هو ذا.
إذن ها هو عنوان URL بشكل مرئي.
ولكنه ليس قابلاً للنقر فوقه في الواقع.
لكن هذا لأن المتصفح سيقوم فقط بما أخبره أن يفعله.
وكل ما أخبرته ضمنيًا به أن يفعله هو عرض النص الأسود هذا هنا.
إذا كنت فعلاً أريد أن أجعله تفاعلي، سأحتاج إلى علامة تبويب أخرى.
حسنًا، لقد اتضح أنه في HTML، توجد علامة ربط، تم تسميتها بطريقة ما بشكل مشفر.
وهى أيضًا مكتوبة بإيجاز حيث a، اختصار ربط.
وباستخدام علامة الربط، يمكنكم ربط عند هذه النقطة في الصفحة
رابط، أو مرجع فائق، كما أطلقنا عليه من قبل، لعنوان URL المحدد هذا.
لذلك هذه السمة، حسب التقليد، تُسمى href، مرجع فائق.
هذه هي الوجهة التي تريدون الربط بها.
يمكنني الآن إغلاق هذه العلامة.
لكن الآن أحتاج إلى أن أخبر المستخدم إلى أين سينتقل.
لذا يمكنني فقط أن أقول هارفارد، على سبيل المثال، وأقوم بوضع النقطة هناك.
حفظ الملف.
أعود إلى علامة التبويب هنا.
أنقر فوق إعادة التحميل.
والآن سترون التفرع الثنائي.
أنا أرى شيئًا واحدًا، هارفارد.
لكن إذا قمتم بالتمرير فوقها، وهي هنا صغيرة للغاية،
يمكنكم أن ترون بالفعل، كفحص الأمان، في أسفل الزاوية اليسرى،
تمامًا، عنوان URL الذي سيتم توجيهكم إليه بالفعل.
الآن، كملاحظة جانبية، باستخدام تلك الميزة الصغيرة للغاية من HTML،
يمكنكم بالفعل أن تصمموا مواقع لأشخاص بشكل اجتماعي،
كما يحدث عادة بهجمات التصيد الاحتيالي، P-H-I-S-H-I-N-G.
إذا تلقيت بعض الرسائل غير المرغوب فيها من قبل، إما في البريد الوارد أو مجلد الرسائل غير المرغوب فيها،
فالاحتمالات هي أن شخصًا ما حاول طلب اسم المستخدم وكلمة المرور الخاصة بك
أو أموالك أو حساب باي بال الخاص بك.
باي بال بشكل خاص هي هدف مشترك هنا.
لكن يمكنكم أن تروا كيف يمكنكم بسهولة، لسوء الحظ،
خداع وتضليل الأشخاص، خاصةً إذا لم يفهموا بالضرورة
بعض هذه الأساسيات.
دعوني أعود إلى هنا، على سبيل المثال، وأقول هنا--
حسنًا، لا يوجد شيء يمنعني من القيام بهذه الخدعة المزعجة قليلاً.
يمكنني تغيير href الخاص بجامعة ييل، ولكن النص إلى هارفارد،
وبالتالي سيتم خداع شخص ما.
ها ها ها.
ستنتقلون في الواقع إلى موقع جامعة ييل على الويب بدلاً من ذلك.
ولكن بطريقة أكثر ضررًا، وفي رسائل البريد الإلكتروني الخاصة بالتصيد الاحتيالي أو الرسائل غير المرغوب فيها
التي من المحتمل أنك كنت تتلاقاها خلال العديد من السنوات الماضية،
يمكنكم أن تتخيلوا كتابة أي شيء تريدونه هنا، مثل paypal.com.
ومن ثم هنا يمكن أن يكون www.SomeMaliciousWeb
siteThatWantsYourMoney--
آمل أنه غير موجود-- .com.
حفظ.
إعادة تحميل الصفحة.
وبصراحة، معظم الأشخاص، وأنا واحد منهم،
لن يتحققوا دائمًا وبشكل جنوني إلى أين سأنتقل بالفعل.
سأنقر فقط فوق الرابط.
و ها هو ذا.
قد لا تلاحظون تغيير شريط عنوان URL لأنه يتم
نقلكم إلى بعض مواقع الويب.
وبصراحة، لا تُعد إعادة إنشاء مواقع الويب جميعًا أمرًا صعبًا.
في الواقع، فقط لتوضيح هذه النقطة حقًا، دعوني أنتقل إلى paypal.com.
وباستخدام بدائيات اليوم، لاحظوا أنه
يمكنكم الانتقال إلى عرض، المُطوِّر، عرض المصدر.
هذه هي HTML تقوم بتنفيذ موقع باي بال على الويب--
يبدو الأمر جيدًا.
دعوني أنسخ هذا وألصقه في، لنقل، ملف جديد يسمى paypal.html.
دعوني أحفظ هذا هنا.
والآن دعوني أعود إلى خادم الويب الخاص بي، إعادة التحميل، فتح paypal.html.
و ها هو ذا.
لقد قمت بإنشاء باي بال.
إذن، محاكاة الموقع الذي يعتقد الأشخاص أنهم سينتقلون إليه ليست أمرًا صعبًا.
الآن، لندع قضايا الملكية الفكرية جانبًا، لقد قمت فقط بنسخ موقع
شخص آخر ولصقه، ومن الواضح أنه
غير فعّال بالكامل لأن ما لا يمكنني الوصول إليه هو قاعدة البيانات الخاصة بهم
وتعليمتهم البرمجية على الخادم وجميع الملكية الفكرية ومنطق
الأعمال التجارية، إذا جاز التعبير، وهذا بالفعل ما يجعل موقع باي بال ما هو عليه.
لكن HTML، المغزى أنه، يمكن الوصول إليها من قِبل أي شخص ببساطة وبصورة واضحة.
هي ليست مشفرة.
ليست أصفارًا وواحدات.
لكنها تميل إلى أن تكون جمالية وبنائية بطبيعتها وهذا ليس
الأمر المهم حقًا في العمل التجاري.
ولكن يمكن بالتأكيد إساءة استخدام هذه التقنية بهذه الطريقة.
إذن لنمضي للأمام، فقط لكي نكون مدركين أكثر لهذا الأمر لأن معظم رسائل البريد الإلكتروني
التي تتلقونها هذه الأيام عبر Gmail أو أي أداة
يتم تنفيذها في HTML.
حتى عندما تكتب رسالة Gmail
ولم تفكر حتى في HTML، حيث يتم إرسال رسالة البريد الإلكتروني
بالفعل بشكل غير ظاهر كلغة HTML.
لماذا-- حسنًا، إذا استخدمتم قائمة ذات تعداد نقطي أو قائمة مرقمة،
إذا قمتم بالكتابة بخط غامق أو خط مائل أو أي من تلك الميزات الجمالية في Gmail
أو البرامج الأخرى، يتم تنفيذها كلغة HTML،
ولكن فقط باستخدام، واجهات لطيفة سهلة الاستخدام.
لذلك يمكنكم فقط النقر فوق الرموز.
لا يجب أن تفكروا بشأن فتح قوس، شيء ما، قوس مغلق.
لكن يمكننا القيام بذلك.
على سبيل المثال، إذا مضينا قدمًا وألقينا نظرة على بعض الأمثلة الأخرى--
دعوني أمضي قدمًا هنا وأعود بالفعل إلى مثالنا الأول، index.html.
ولنفترض أنني فقط أريد حقًا جذب الانتباه إلى "مرحبًا."
يمكنني بالفعل استخدام Strong علامة، وهي ما تشير إلى اللون الغامق، عادة.
حفظ ذلك.
دعوني أعود إلى خادم الويب الذي فتحته منذ لحظة.
وأنقر فوق index.html بعد إعادة تحميله.
والآن يبدو دقيقًا قليلاً لأنه صغير.
ولكن يمكنكم على الأرجح رؤية أنه تمت كتابة "مرحبًا" بخط غامق بالفعل الآن.
لذلك إذا نقرتم فوق رمز B في Gmail، فهذا كل ما يقوم به.
بشكل غير ظاهر، يأخذ Gmail كلمتك، مرحبًا،
ويقوم بشكل سري بفتح قوس، Strong، قوس مغلق، ثم العكس،
علامة إغلاق، بعده.
وهذا ما يرسله إلى مُتلقي هذه الرسالة.
إذن ما الذي يمكنكم فعله أيضًا؟
حسنًا، دعوني أمضي قدمًا وأقوم بذلك.
دعوني أمضي قدمًا وأفتح، لنقل، بضعة ملفات قمت بإنشائها مسبقًا.
أحد هذه الملفات يُسمى paragraphs.html.
ودعوني أشير إلى ذلك أولاً.
إذن في paragraphs، لدي فقط ثلاث فقرات من نص لاتيني.
وتم تقديمها، على سبيل المثال، على النحو التالي.
إذا انتقلت إلى المصدر 5 وانتقلت إلى paragraphs.html--
يبدو لطيفًا-- لا أعرف ماذا يقول.
وفي الواقع، إنها عبارة عن هراء إلى حد كبير.
لكنها جيدة، ثلاث فقرات لطيفة.
لكن لاحظوا مدى دقة HTML.
وتعين عليّ استخدام علامة أخرى لتحقيق هذه الفقرات.
إذا كنت قد كتبت، بشكل معقول جدًا، هذه الفقرات الثلاث
مثلما قد فعلتم في Google Docs أو Microsoft Word،
إنها مجرد ثلاث فقرات.
المسافة البادئة قبل كل فقرة منها.
أضغط على Enter، يتم الإدخال فيما بينها-- تبدو جيدة.
إنها مغلّفة لأنها فقرة طويلة حقًا باتجاه اليمين.
لكن هذا جيد.
وأحفظ هذا.
وأنتقل إلى الفقرات وأعيد تحميلها.
لاحظوا أن جميع المجموعات معًا.
بشكل حدسي، لماذا يحدث هذا، على الرغم من ذلك؟
ما هو المنطق وراء هذا الخطأ الآن، وإن كان خطأ جمالي؟
أجل؟
الجمهور: [INAUDIBLE]
ديفيد ج. مالان: أجل.
لم يتم حساب هذه المسافات الإضافية.
يتم فقط جمعها معًا لأنه
على الرغم من أن HTML تتقيد بمسافة واحدة--
وبخلاف ذلك، سيتم لصق كل شيء ببعضه تمامًا--
إنها تتجاهل المسافات المتعددة، سواء كان ذلك سطورًا أو علامات تبويب جديدة
أو ضغطات متعددة على شريط المسافة.
وفي النهاية، تقوم بتنفيذ، ما كنت تخبرها أن تفعله.
إذن، ما لم تقل بشكل صريح، باستخدام العلامات في HTML، أعطيني فقرة جديدة،
هذا كل شيء عن هذه الفقرة، أعطيني فقرة جديدة
غير هذه-- الآن هذا كل شيء للفقرة،
وستبدأ فقط بتجميع الكل معًا،
ربما تقوم بالفصل باستخدام مسافة واحدة، ومن الواضح أنه ليس التأثير
نريده.
إذن فقط تذكروا أن لغة HTML في الواقع صعبة عندما يتعلق الأمر بذلك.
وتمامًا مثل ما هو في C، لن تتحول تعليمتك البرمجية برمجيًا إذا لم تكن صحيحة تمامًا.
في HTML، سيتم عرضها.
لكنها لن تعرض بشكل صحيح--
الكلمة الرئيسية هناك.
حسنًا، ما هي الميزات الأخرى التي توجد في لغة HTML هذه؟
الحقيقة أننا-- سنقدم لكم نظرة عامة نظرية عن HTML
اليوم.
سنعطيكم نبذة عن بعض العلامات.
ولكن الحقيقة أيضًا هي، نوع اللغة
التي يمكنكم حقًا أن تتعلموها عن طريق تنفيذها والنظر
في المراجع أو النصوص عبر الإنترنت التي تقوم في الواقع بتلخيص العلامات المختلفة.
لكن على الأقل دعونا ننظر في بعض منها.
الآن دعوني أنتقل إلى headings.html.
والآن سترون هذا--
يتضح أنه توجد علامات تُسمى h1، h2، h3، h4، h5، h6.
هذه هي الأمور شائعة الاستخدام جدًا على مواقع الويب التي
تحتوي على عناوين مختلفة، بخط كبير وغامق، أصغر قليلاً وغامق،
أصغر قليلاً وغامق للقيام بذلك، على سبيل المثال، رؤوس القسم والفصل.
موقع ويب CS50 هرميّ للغاية.
إذا نظرتم عبر المنهج، سترون الكثير من أحجام الخطوط المختلفة
والخط الغامق وما شابه ذلك.
التي تُشتق من استخدامنا لعلامات الرأس التي تم إنشاؤها.
إذا مضيتُ قدمًا وفتحت هذا في المتصفح، سنرى التأثير.
افتراضيًا، يكون h1 بخط كبير وغامق.
H2 بخط كبير، لكنه ليس كبيرًا وغامقًا بالقدر نفسه.
H3 بخط أصغر قليلاً.
H4، و5، و6--
وهذا يتبع النموذج في الكتب والأبحاث الأكاديمية
التي تحتوي على فصول وأقسام وأقسام فرعية وما شابه ذلك.
ستحصلون على هذه الميزة مجانًا من HTML فقط.
حسنًا، ماذا يوجد هناك أيضًا؟
حسنًا،في الواقع إذا كان لديكم بيانات مُجدولَة، أشياء
ترغبون في وضعها في صفوف وأعمدة، حسنًا،
يتضح أن HTML تدعم الجداول.
دعونا نُلقي نظرة على هذا، أيضًا.
وإذا انتقلتُ إلى table.html، في متصفحي، سنرى هذا التأثير.
لا يستحق الأمر كل هذا الاهتمام.
أنا أحاول تقليد فكرة لوحة الهاتف إلى حد ما، حيث تظهر هذه الأرقام
في أعمدة وصفوف.
لكن بطريقة غير مرئية، تم وضع هذا الشيء مع علامات بالفعل.
إذا انتقلتُ إلى IDE وألقيتُ نظرة هنا،
سترون بعض ما تم نسخه ولصقه سابقًا--
html، ورأس، وبنية.
لكن بعد ذلك لاحظوا هنا.
مرحبًا، أيها المتصفح، ها هو جدول.
وترون، وإن كانت محاطة بعلامات غير مألوفة، على الأرجح، 1، 2، 3، 4،
5، 6، 7، 8، 9، ومن ثم الرموز بالأسفل هناك.
إذن دعونا فقط نستنتج، لأن في الواقع ما تعلمتموه يعد جزءًا كبيرًا من تعلُمِكم للغة HTML
وقريبًا لغة أخرى، سنرى-- سيكون الأمر فقط بشكل غير مباشر.
إذا كنتم تشعرون بالفضول بشأن كيفية تنفيذ صفحة ويب ما لميزة ما،
في الواقع تنظرون إلى تعليمة المصدر البرمجية الخاصة بها.
ويمكنكم الاستنتاج، من خلال المثال، كيف يمكنكم فعل الشيء نفسه.
إذن خمّنوا.
إذا كانت هذه العلامة، على نحو فعّال، تقول، مرحبًا، أيها المتصفح ها هو الجدول،
هذه العلامة هنا، حتى لو لم يسبق لكم رؤية HTML، من المحتمل أن تعني صف الجدول.
مرحبًا ،أيها المتصفح، ها هو صف في جدولي.
لكن هذا أقل وضوحًا.
لكن td ،td ،td يرمز لبيانات الجدول أو خلية الجدول.
إذن، مرحبًا، أيها المتصفح، ها هي خلية، وخلية أخرى، وخلية أخرى،
ثلاث خلايا في المجمل.
مرحبًا، أيها المتصفح، هذا كل شيء بشأن هذا الصف.
ومن ثم تكرار النمط.
إذن، هنا تصبح HTML فقط مملة قليلاً بعد فترة.
ولكن بمجرد رؤية اسم العلامة وبمجرد معرفة السمات،
إن وجدت، التي تدعمها، تتبعون فقط هذا النمط.
هذا كل شيء عن HTML.
هناك علامات بدء.
وهناك علامات انتهاء.
وأحيانًا لا توجد علامات انتهاء، إذا لم تكن هناك حاجة إليها.
وهناك سمات.
وهذه هي لغة HTML.
الآن، إذا كنتم تريدون التأكد من أن تعليمتكم البرمجية صحيحة،
فلديكم بعض الخيارات.
دعوني أمضي قدمًا وأفتح بالفعل، على سبيل المثال، hello.html من وقت سابق،
فقط لديّ مثال بسيط--
أو index.html من وقت سابق.
دعوني أنتقل إلى validator.w3.org--
يتضح أن هناك أدوات من شأنها أن تساعدكم فقط بتقديم ملاحظات لكم إن كانت
سواء كانت HTML صالحة أم لا، صحيحة.
وهذا مفيد لأن أحيانًا، قد تبدو لكم على ما يرام على Chrome.
لكن بصراحة، إذا قام صديق أو فرد من العائلة بزيارة الصفحة نفسها بالضبط
على Edge أو IE أو Safari أو Firefox، قد لا
تبدو هي نفسها لأن الشركات التي تقوم بإنشاء هذه المتصفحات في بعض الأحيان
لا تتفق بشأن كيفية تقديم HTML.
إذن إذا لم تكن 100% صحيحة، فأنتم فقط
تتحملون خطر أكبر بتقديم شيء بشكل غير صحيح.
لقد مضيتُ قدمًا وقمتُ بالنقر فوق فحص بعد لصق تعليمتي البرمجية فيه.
وهذا جيد-- اكتمل فحص المستند،
لا توجد أي أخطاء أو تحذيرات لعرضها.
إذن عندما يحين وقت Pset5 وأنتم تمارسون مهاراتكم باستخدام HTML،
أعلموا أن هناك أدوات، هذه متضمنة فيها،
سنوجهكم إليها في المواصفات، بحيث تساعدكم فقط في تقديم
ملاحظات على ما إذا كان هناك شيء مُعطّل حتى يمكنكم، وبثقة أكبر،
معرفة أنه سيعمل بشكل جيد.
حسنًا، دعونا نقوم بشيء مثير للاهتمام أكثر الآن.
لنعيد تنفيذ Google، وليس من خلال خدعة النسخ واللصق الصغيرة هذه،
حيث ننسخ فقط HTML الخاصة بهم ونستخدمها بأنفسنا.
دعونا الآن نقوم بإنشاء واجهة مستخدم تستخدم Google، بطريقة ما.
إذن بالطبع، Google، في جميع أشكاله،
في نهاية المطاف يحتوي على مربع للنص يمكنك كتابة المعلومات بداخله.
وإذا مضيتُ قدمًا وفعلت هذا، يتضح أن
Google بشكل عام يقوم بإعادة توجيهي إلى عنوان URL مُعين.
إذا بحثت عن "قطط" وضغطت على Enter، لاحظوا أنه
تمّت إعادة توجيهي إلى عنوان URL يبدو مشفرًا إلى حد ما.
يوجد الكثير من بيانات التعريف هناك.
هناك الكثير من معلومات الدعاية هذه الأيام وكل ذلك.
ولكن يتضح أنه، وأنا أعلم هذا من خبرتي فقط،
يُمكنني استخلاص عنوان URL هذا في ذلك.
وسينجح الأمر.
دعوني أمضي قدمًا وأنقر فوق Enter.
عذرًا.
دعوني أمضي قدمًا وأضغط على Enter بعد تبسيط هذا إلى علامة استفهام q
يساوي قطط.
Enter.
وفي الواقع، سأحصل على نفس صفحة القطط مجددًا.
إذن ما الذي يحدث؟
إذن عنوان URL نفسه ليس ملحوظًا للغاية.
لقد رأينا www من قبل.
من المؤكد أنكم استخدمتم google.com من قبل.
هذا يعني أنه آمن.
ويدعم HTTPS.
أصبح كل هذا أمرًا قديمًا الآن.
إنه لا يطلب index.html لأن Google ديناميكي.
يتغير المحتوى باستمرار.
لا يوجد أشخاص مهمتهم هي تحديث صفحة Google الرئيسية كل يوم
باستخدام HTML.
لذا لديهم بدلاً من ذلك، مجموعة برنامج قيد التشغيل،
مكتوبة بلغة Python أو ++C أو Java أو مَن يعرف ما هو غير ظاهر وهو فقط
يستمع عبر هذا العنوان.
إذن لا يجب أن تكون ملفات نصية قام بإنشائها الأشخاص.
في الواقع يُمكن أن تكون برنامج.
يُطلق على هذا البرنامج بحث.
وفي أسبوع واحد فقط أو أسبوعين، ستقومون أيضًا،
بكتابة البرامج بلغة تُسمى Python ويُمكنها القيام بالشيء نفسه.
ولكن في الوقت الحالي، سندع Google يقوم بالعمل الشاق.
ولاحظوا علامة الاستفهام.
إذا رأيتم علامة استفهام من قبل في عنوان URL، فهذا يعني للمتصفح أن،
ها هي بعض مدخلات المستخدم، التي من المحتمل أن المستخدم
قد كتبها في الشكل، مثلما كتبتُ "قطط" منذ لحظة.
ومن ثم سترون شيئًا يساوي
شيئًا، مما يشير إلى ما كتبه الشخص.
حاليًا، فقط لأن لاري وسيرغي، قبل 20 عامًا،
قد قررا باستخدام google.com أن مربع النص هذا الذي رأيناه منذ قليل،
هذا المربع الكبير الذي وُضِع الآن هنا--
قررا منذ سنوات أن اسم مربع النص هذا
سيكون q لـ query--
ويمكنكم تسميته بأي شيء تريدونه.
من الواضح، أن "قطط"، هي ما كتبته.
تربط علامة يساوي فقط الاثنين معًا.
إذن يشير عنوان URL هذا إلى Google فقط، مرحبًا، Google، قُم بتشغيل برنامج بحث،
مع تمرير اسم مدخل المستخدم من q بحيث تكون قيمته "cats."
وبهذه الطريقة يعرف Google ما الذي يبحث عنه، لأي منا.
وبصراحة، يُمكنني البحث عن "كلاب"، ليس فقط
عن طريق كتابة الكلمة "كلاب" هنا.
يمكنني أن أكون دقيقًا أكثر وأكتبها في هذا السؤال
لأنني أعرف الآن تنسيق عنوان URL الخاص بـ Google.
و ها هو ذا.
حصلت الآن على نتائج البحث عن "كلاب" بدلاً من ذلك.
لكن هذا كل شيء.
هذه هي الكتلة البنائية الأساسية التي كانت تحدث طوال هذا الوقت.
وعلى الرغم من أن عنوان URL كان منذ قليل أطول وأقبح،
فهذا مجرد تفصيل غير مثير للاهتمام.
وفي الواقع هذا ليس العمل الأساسي الذي يوفره البحث.
إذن ما الذي يعنيه هذا؟
الآن يمكنني بالفعل أن أقوم بإنشاء واجهة المستخدم الخاصة بي في Google
عن طريق استخدام بعض العلامات الجديدة أيضًا.
دعوني أمضي قدمًا وأنسخ هذا، كنقطة انطلاق.
دعوني أمضي قدمًا وأقوم بإنشاء ملف جديد يُسمى search.html.
لتوفير الوقت فقط، سأكتُب ذلك هناك.
وسأطلق عليه search.
وسأقوم بالتخلص من "مرحبًا" أيتها البنية.
إذن لديّ نقطة انطلاق فقط.
هذه هي لغة HTML نفسها التي أنسخها وألصقها كل مرة.
حسنًا، يتضح أنه في HTML، توجد علامة
تُسمى شكل وهي تعطيكم شكل لمدخل المستخدم.
ويتضح أنه داخل الشكل، يمكن أن تكون هناك علامات مختلفة أيضًا--
تحديدًا، مدخل.
وتحتوي المدخلات على أسماء.
إذن يمكنني أن أقول اسم يساوي "q" لأحاكي قرار لاري وسيرغي منذ سنوات،
وهما مؤسسا Google.
يعد نوع هذا المدخل نصًا.
لذا هو ليس زرًا أو مربع اختيار أو شيئًا من هذا القبيل.
تلك الأشياء موجودة أيضًا.
لكنها نص فقط.
ثم أريد زر Submit.
وأنا أعرف فقط أنه، بما أنني قمت بهذا مسبقًا،
يمكنني الحصول على زر Submit عن طريق كتابة النوع يساوي تقديم.
ومن ثم ستكون قيمة هذا هي Search،
وهي الكلمة التي سأراها على الشاشة.
ستعرفون هذا فقط عندما يراها
شخص آخر يقوم بذلك، وعند النظر في تعليمة مصدر برمجية خاصة بشخص ما،
عند قراءة برنامج تعليمي على الإنترنت.
ليس بالضرورة أن تكون واضحة.
لكن النمط هو نفس-- اسم العلامة، سمة تساوي شيئًا،
سمة تساوي شيئاً، وهكذا.
حسنًا، الآن دعوني أمضي قدمًا وأحفظ هذا، وأنتقل إلى خادم الويب،
وأُعيد تحميل الفهرس.
إذن هناك search.html.
ولكنه ليس جميلاً تمامًا مثل الخاص بـ Google.
دعوني أقوم بالتكبير ليظهر بخط أكبر.
لكن لديّ مربع نص.
ولديّ زر يُسمى Search.
لكنني لا أعرف إلى أين سأرسلها حتى الآن.
أحتاج إلى سمة أخرى أو اثنتين هنا.
يتضح أنني أريد هذا الشكل لأقوم بإرسال هذه
المعلومات إلى www.google.com/search، برنامج البحث على خادم Google.
ولكنني أريد استخدام ذلك الفعل الخاص الذي رأيناه منذ قليل.
ومجددًا، كان هذا موجودًا بشكل أعمق في الظرف.
الطريقة التي أردت استخدامها هي get، بأحرف صغيرة في هذه الحالة--
إذن هذا الآن أمر فني وذو مستوى منخفض قليلاً.
لكن هذا فقط يعني أن هذا هو الفعل الذي يجب أن تستخدموه داخل الظرف
للحصول على صفحة الويب.
ولكن هذا كل شيء.
لقد أخبرتُ صفحة الويب بالإجراء الذي يجب اتخاذه
وهو تقديم هذا الشكل إلى عنوان URL هذا باستخدام get، الطريقة التي رأيناها في وقت سابق.
تقديم معلمة، كما يُطلق عليها، تُسمى
q، أيًا كان ما يكتبه الشخص.
ومن ثم تعطينا زر Search هنا.
إذن دعوني أحفظ هذا، وأعود إلى صفحتي، إعادة التحميل.
والآن دعونا نمضي قدمًا ونبحث عن "فئران" هذه المرة وأنقر فوق Search.
و ها هي ذا.
يوجد لدينا نتائج كثيرة جدًا مننتائج البحث عن فئران.
لكن لماذا، هذا هو السؤال؟
حسنًا، كل ما قمت به، باستخدام HTML وشكل HTML،
هو أنني قمت بإنشاء تنسيق مُحدّد من عنوان URL،
واستدعيت برنامج Search من Google باستخدام مدخل q يساوي فئران.
والآن، كملاحظة جانبية، إذا أخذت المزيد من المدخلات،
ستكون بمثابة شيء كهذا--
شيء يساوي قيمة علامة عطف شيء يساوي قيمة.
تقوم علامات العطف فقط بفصل أزواج القيم الرئيسية
إذا كانت لديكم مدخلات متعددة على الصفحة.
لكن المبدأ في نهاية المطاف هو نفسه.
إذن هو فعّال للغاية.
لم أقم بتنفيذ Google، في حد ذاته.
لكنني قمت بتنفيذ واجهة التطبيق، واجهة المستخدم.
وفي المستقبل، ربما يمكننا أن نبدأ بالعمل على المنطق خلف الكواليس.
إذن أي أسئلة حول HTTP وتقاربها مع HTML الآن؟
هل تشعرون بالاعتياد على HTML، لأننا على وشك الانتقال إلى لغة أخرى؟
أجل؟
إذن بدت جميع أمثلتي حتى الآن قبيحة، باستثناء باي بال.
لقد بدا جيدًا.
لكنني قمت فقط بنسخه ولصقه.
إذن كيف يمكننا البدء بتصميم المواقع بطريقة جذابة أكثر؟
تُستخدم HTML، في نهاية المطاف، غالبًا لإنشاء بنية صفحة ويب،
فقط عبر وضع البيانات التي تهتمون بها، والكلمات التي تهمكم،
والصور التي تهتمون بها.
لكن الجماليات التي تدوم أميالًا، إذا جاز التعبير،
من الألوان الجميلة جدًا وأحجام الخطوط المناسبة والموضع
أشياء بالضبط حيث تريدون أن يكونوا--
هي وظيفة لغة أخرى تُسمى CSS، أوراق الأنماط المتسلسلة.
هذه، أيضًا-- لا تُعد لغة برمجة.
إنها أمر جمالي تمامًا بطبيعتها.
إذن دعونا نمضي قدمًا ونلقي نظرة على مثال.
دعوني أمضي قدمًا وأفتح خادم الويب نفسه كما في السابق،
أفتح مثالًا رأيته في وقت سابق--
الذي أعددته في وقت سابق الذي يُطلق عليه css0.html.
لنفترض أن هذه هي الصفحة الرئيسية التي أريد إنشاؤها لجون هارفارد.
ولاحظوا أن لدي اسمه، مكتوب بخط كبير وغامق، في الأعلى.
وبخط أصغر قليلاً في المنتصف وخط أصغر قليلاً
أسفل منه.
ولكن هذه مجرد اختلافات صغيرة في حجم الخط.
كل ذلك موجود في منتصف الصفحة هنا.
كيف يمكنني بالفعل إعداد موقع الويب هذا؟
حسنًا، دعوني أمضي قدمًا وأنتقل إلى ملف جديد هنا.
سأسميه css0.html.
دعوني أمضي قدمًا وألصق نقطة الانطلاق الخاصة بي، كما فعلتُ في السابق.
وسأسمي هذا css0.
ومن ثم في بنية هذه الصفحة حيث
سأمضي قدمًا وأضع ذلك المحتوى.
إذن على ما أذكر، أنه كان لديّ جون هارفارد.
ومن ثم أسفل ذلك، كان "مرحبًا بكم في صفحتي الرئيسية!
حقوق الطبع والنشر،" ورمز غريب-- لذلك سأفعل هذا في الوقت الحالي--
"جون هارفارد."
حفظ.
إذن هذا هو css0.html.
دعوني أمضي قدمًا وأعيد تحميلها مجددًا من الخادم.
و ها هو ذا.
إذن ما هو الخطأ، من الناحية الجمالية؟
من الواضح، جميعها على سطر واحد.
لكن لماذا؟
كيف أصلح هذا، كما كان من قبل؟
أجل؟
الجمهور: [INAUDIBLE]
ديفيد ج. مالان: أجل.
حتى يمكنني إضافة علامات الفقرة، فقط لوضع كل
هذه في فقرات فردية.
وقد تكون IDE أحيانًا مزعجة بعض الشيء
لأنني الآن سأنتقل إلى الخلف وسأضيف هذه الأشياء.
إذن إنها تحاول أن تكون مفيدة.
ولكن بعد ذلك يجب أن أحذفها.
إذن في بعض الأحيان، قد يتعطل الإكمال التلقائي هذا.
ولكن إصلاحه سهل بما فيه الكفاية-- أفتح p.
دعوني أنقل هذا إلى هنا وأحرك هذا إلى هنا.
حفظ.
أعود إلى المتصفح.
لن يتغير الأمر من تلقاء نفسه.
أحتاج إلى النقر فوق إعادة تحميل.
والآن-- هذا أفضل.
إنه قبيح بعض الشيء-- توجد مسافات أكثر مما أريد.
لكنها متقاربة، بالتأكيد.
دعونا نزيل رمز حقوق الطبع والنشر هذا.
تبين أن هناك بعض المفاتيح التي لا يمكنك كتابتها فقط باستخدام لوحة المفاتيح الخاصة بك.
يمكنك بالتأكيد نسخها ولصقها من مكان آخر.
لكن HTML، كملاحظة جانبية، تدعم ما تسمى بالكيانات.
وهذه هي التعليمات البرمجية الرقمية التي تُكتب في بعض الأحيان
بنظام السداسيّ العشريّ، وأحيانًا تُكتب بالأرقام العشرية، اعتمادًا
على تفضيلاتك.
وهو مجرد رقم غريب يمثل رمزًا.
وإلا لا يمكنكم كتابتها.
شاهدوا ذلك بينما أعيد تحميله الآن.
إذن ما الذي يحدث لرمز حقوق الطبع النشر هذا؟
الآن هذا هو الشيء الذي قد تتوقعونه--
تفصيل صغير جدًا.
لا يستحق الأمر كل هذا الاهتمام.
ولكن هذه موجودة، أيضًا، لأغراض جمالية.
لكن هذا ليس تمامًا ما أريده.
وهنا يأتي دور CSS.
يمكنني وضع البنية من هذه الصفحة.
نعم، لديّ فقراتي الثلاث المنفصلة.
لكنها ليست في المنتصف.
حجم الخط الخاص بها هو نفسه.
وتوجد فراغات غريبة هناك.
وهنا يمكن للغة CSS تقديم المساعدة.
إذن دعوني أقدّم بعض العلامات الجديدة بدلاً من ذلك.
هذه ليست فقرات على وجه التحديد.
إنها ليست جُملاً وجُملاً من النص.
إنها تشبه رأس الصفحة الخاصة بي إلى حد ما.
إذن دعوني في الواقع أعيد تسمية هذا إلى رأس.
هذا ربما هو الجزء الرئيسي من صفحتي.
إذن دعوني أعيد تسمية هذا إلى main.
وهذا مثل تذييل الصفحة الخاصة بي، التي سأزعم وجوده.
الآن، إنه موقع ويب فائق البساطة.
لكن هذه العلامات موجودة.
وفي الإصدار الأخير من HTML الذي يُطلق عليه HTML5،
بدأ العالم بالابتعاد عن العلامات العامة، مثل p للفقرة،
واستخدام المزيد من العلامات الدلالية التي هي أكثر وصفًا قليلاً التي وتقول،
مرحبًا، أيها المتصفح، ها هي رأس الصفحة الخاصة بي، وعلى نحو قاطع،
لا يجب أن تخلطها مع رأس صفحتك، وهي، مثل، العنوان.
ومرحبًا، أيها المتصفح، ها هو الجزء الرئيسي من صفحتي.
وها هو تذييل صفحتي.
وسنرى لماذا تُعد هذه مفيدة، حتى لو كان ذلك فقط
لأنها تصف صفحتي بطريقة مقنعة أكثر.
ولكن تبين أن أي علامة من HTML يمكن أن تحتوي على سمة
نمط، ولم نرها من قبل.
وإذا كنت أريد تغيير حجم خط هذه العلامة، فيمكنني قول، اجعلي هذا الخط أكبر.
وفي الأسفل هنا، يمكنني القول أن، النمط يساوي حجم الخط، لنقل، متوسط.
ومن ثم في الأسفل هنا، يمكنني القول أن النمط يساوي حجم الخط صغير.
ودعوني أحفظ ذلك، وأعود مجددًا إلى المتصفح، وأعيد تحميله.
ولم تظهر في المنتصف بعد.
لكنها الآن بخط أكبر ومتوسط إلى حد ما--
كبير ومتوسط وصغير، وهو ما أردته في المرة الأولى.
إذن كيف يمكنني إضافة التمركز؟
حسنًا، يتضح أنه داخل علامات الاقتباس تلك،
يمكنكم استخدام الفاصلة المنقوطة للفصل بين العديد من الأفكار.
إذا وضعتُ فاصلة منقوطة هنا، يمكنني القول الآن، محاذاة النص في المنتصف.
ودعوني أمضي قدمًا وأنسخ وألصق هذا هنا وهنا.
حفظ.
ولاحظوا النمط.
توجد كلمة رئيسية، ونقطتين، وقيمة.
تفصل بينهم فاصلة منقوطة.
وبعد ذلك توجد كلمة رئيسية، ونقطتين، وقيمة.
هذا هو النمط نفسه الذي سنراه.
لو عدتُ إلى المتصفح، وقمتُ بإعادة تحميله الآن، نحن في طريقنا الآن.
الآن إنه يبدو تمامًا مثلما كنت أريده أن يبدو.
وبذلتّ مجهودًا أكبر قليلاً.
ولكن بفضل CSS، تمكنتُ من فعل ذلك.
إذن ما ضللته هنا وما ظللته IDE باللون الأخضر
هو ما يُسمى بخصائص CSS، أوراق الأنماط المتسلسة.
CSS تتيح لكم التعامل مع أشياء مثل التمركز وأحجام الخطوط
والألوان والموضع وكل الجماليات التي أشرت إليها في وقت سابق.
وأنتم يجب أن تعرفوا فقط ماهية تلك القيم الرئيسية.
بصراحة، أنا لا أعرفها جميعًا، بالتأكيد.
أنا أستخدم Google دائمًا عندما أريد أن أعرف كيف يمكنني
القيام بشيء ما باستخدام هذا النوع من العلامات.
هذا لأن هناك الكثير من المراجع المجانية عبر الإنترنت
التي تعرض لكم ذلك.
ولكنها جميعًا تتبع النمط نفسه--
كلمة رئيسية، نقطتين، قيمة-- ربما فاصلة منقوطة-- كلمة رئيسية، نقطتين، قيمة وهكذا.
ولكن حتى لو لم تكتبوا HTML من قبل،
فقد يمكنكم القول أنني لا أقوم--
بتصميم ذلك بشكل رائع.
في لغة C، أيضًا، قد وجدتم خطأ في أي وقت وكان حدسي هو النسخ واللصق.
ما هو الأمر المتكرر في هذا المثال؟
الجمهور: [INAUDIBLE]
ديفيد ج. مالان: أجل.
أنا أقوم بتمركز تلك السطور الثلاثة، وهذا بصراحة، يبدو أمرًا غبيًا قليلاً.
تم نسخ هذا حرفيًا ولصقه.
وهذا دائمًا ما يوجهك إلى الطريق الخاطئ.
إذن أوراق الأنماط المتسلسلة--
الحرف C الأول في Cascading Style Sheets، أو الحرف C الوحيد
في أوراق الأنماط المتسلسلة، تشير إلى متسلسلة،
وهو يشير إلى تسلسل هرمي له، أيضًا.
إذن دعوني، في الواقع، أقدم مثالاً جديدًا.
دعوني أسمي هذا css1.html.
دعوني ألصق هذه التعليمة البرمجية نفسها بالضبط.
لكن تبين لي أن الرأس والجزء الرئيسي والتذييل هم جميعًا عبارة عن أجزاء في البنية،
إذا صح التعبير.
إنهم بالتأكيد داخلها.
ويمكنكم-- يمكنكم فعلاً استخدام مراجع شجرة العائلة
في سياق HTML، حيث الرأس جزء من
البنية كما هي موجودة بداخلها، مطوية، موجودة، بداخلها.
حتى إذا كانوا جميعًا لهم نفس الأب، إذا جاز التعبير،
دعوني أمحو هذا من جميع العلامات الثلاث بالفعل.
ودعوني أطبق ذلك على العلامة الأب بالفعل، قائلاً،
النمط يساوي محاذاة النص في الوسط لأن
أوراق الأنماط المتسلسة، بالتأكيد، تقوم بالتسلسل.
لذلك إذا طبقت خاصية واحدة، مثل المحاذاة في المنتصف، على الأب،
فستتسلسل لأسفل على جميع الأبناء المتداخلين بها.
إذن دعوني أمضي قدمًا وأحفظ ذلك، وأعود إلى القائمة،
وأفتح css1.html.
وها هي ذا-- لا يوجد اختلاف جمالي.
لكنه فقط مصمم بشكل أفضل، كأنه 5 من أصل 5 في للتصميم
الآن، لكن ليس بالضرورة لأن ذلك قبيح قليلاً، بصراحة.
ونحن لم تسنح لنا فرصة القيام بذلك حتى الآن في C
لأن لدينا فقط لغة واحدة في C. ويُعد، بشكل عام،
الأمر مرفوضًا أن تجمع لغة واحدة، مثل CSS، مع لغة آخرى، مثل HTML.
وقد تبدو اللغتان متشابهتين للغاية.
وكلتاهما في نفس السياق.
لكن يصبح هذا الأمر مزعجًا.
وبشكل خاص في العالم الحقيقي، قد يكون بعض الأشخاص
أفضل باستخدام الجماليات من الآخرين.
ومن الواضح، من أمثلتي، أنني لست ضمن هؤلاء الأشخاص.
ولذا قد أرغب في العمل مع زميل أو صديق
أفضل مني بكثير في التصميم والألوان والخطوط.
ولذا قد أريد منه أن يعمل بشكل مستقل عني.
سأعمل على بنية صفحة الإنترنت أو، إذا صح التعبير، مشروعي النهائي،
وأدعه في الواقع يساهم في الجماليات بشكل أكبر.
إذن كيف يمكننا أن نبدأ بفصل هذه الأشياء؟
تمامًا مثل ما هو في C، نحن، على الأقل، لدينا ملفات رأس.
يمكننا فصل القواسم المشتركة.
حسنًا، اتضح أنه يمكننا فعل ذلك بشكل مختلف قليلاً عن ما سبق.
دعوني أمضي قدمًا وأفتح مثال 2 الذي قمت بإعداده في وقت سابق ويُسمى css2.html.
ودعونا نقوم بالتمرير خلال هذا لبضع لحظات فقط.
لاحظوا الآن في بنية صفحة الويب، أنني قدمتُ علامة مختلفة--
بالأحرى، سمة مختلفة تُسمى "فئة."
لذا اتضح أنه لا يجب أن تقوموا فقط بنسخ ولصق أو كتابة
كل هذه التغييرات الصعبة في حجم الخط وتغييرات محاذاة النص
يدويًا.
يمكنكم منحها أسماء وصفية أكثر.
ويمكن القول، أنه يمكنني وشريكي قراءتها بشكل جيد أكثر
لقراءة كلمة "في المنتصف" و"كبير" و"متوسط" و"صغير"
وعدم رؤية جميع علامات النقطتين والفاصلة المنقوطة الغبية وتشتيت الذهن.
هذه الأشياء التي لا تثير الاهتمام عند كتابة أي نوع من التعليمة البرمجية.
إذن من أين جاءت هذه الكلمات-- في المنتصف وكبير ومتوسط وصغير؟
حسنًا، لاحظوا أنها جميعًا قيم لسمة الفئة، وهي--
تسمح بالتعديل.
دعوني أقوم بالتمرير إلى رأس صفحة الويب الخاصة بي.
وسترون، غالبًا مسافة بيضاء لأنني قمت فقط
بالضغط باستمرار على Enter لإزالتها--
لاحظوا أن داخل علامة html، كما في السابق، توجد علامة الرأس الخاصة بي.
إذا قمت بالتمرير لأسفل، تظل أيضًا علامة العنوان هناك.
لكن هناك علامة جديدة أشرتُ إليها في وقت سابق ضمن العلامات القليلة
التي يمكنكم وضعها هناك باسم "النمط."
يمكنكم نقل إلى أعلى الصفحة
كل الأنماط التي تهتمون بها.
ويمكنكم القيام بذلك على النحو التالي.
لاحظوا هنا أنني كتبت حرفيًا كلمة "في المنتصف" بنقطة
قبلها، كلمة "كبير" بنقطة قبلها،
كلمة "متوسط" بنقطة، "صغير" بنقطة.
تلك تحدد الفئات.
لذا CSS تتيح لك تحديد مجموعاتك الخاصة
من خصائص التكوين.
ويمكنكم أن تطلقوا عليها أسماء، فقط لتكون وصفية أكثر
وسهل الاستخدام.
إذن يمكنك تحديد فئة، فئة، فئة، فئة.
ومن ثم داخل الأقواس المتعرجة، التي وضعتها هنا، تمامًا كما في C،
يمكنكم الحصول علي خاصية واحدة، خاصيتن، 100 خاصية.
لكن يمكنكم الاحتفاظ بها بشكل جيد ومنظم، بعيدًا عن كل HTML، حتى
يتمكّن شخص آخر من العمل عليها أو فقط يمكنكم الحفاظ على الجماليات
منفصلة عن محتويات صفحتكم.
إنها فكرة لفصل المخاوف.
إبقاء البيانات منفصلة عن عرضها التقديمي هناك.
الجمهور: [INAUDIBLE]
ديفيد ج. مالان: هل توجد مكتبة يمكنك استخدامها لتقوم بهذا من أجلك؟
أجل.
وسنرى قليلاً من التشويق لهذا خلال لحظات.
إذن أين أستخدم هذه الكلمات، لتكون واضحة؟
هنا، أنا أقول أعطني فئة تسمى في المنتصف،
فئة تُسمى كبير، ومتوسط، وصغير، تحتوي كل فئة من هذه
على هذه الخصائص المعنية المرتبطة بها.
ومن ثم في الأسفل هنا، فقط يمكنني استخدام هذه الكلمات.
ولا يجب أن أبدأ بكتابة
الفواصل المنقوطة، والأقواس المتعرجة، وكل علامات الترقيم تلك في HTML الفعلية.
ولكن اتضح أنه يمكنني فعل هذا بشكل رائع أكثر.
دعوني أفتح css3.html، مثال آخر.
في هذه الحالة، لاحظوا ما قمت به.
الآن تصبح تعليمتي البرمجية جميلة، بشكل نسبي،
أو من وجهة نظر شخص واحد.
الآن ليست لدي أي سمات.
هذا الأمر هو أكثر إحكامًا فقط.
أنا أستخدم أحرف أقل، كلمات أقل، سطور أقل من التعليمة البرمجية.
هذا فقط، وبشكل عام، شيء جيد.
إنه عمل أقل.
انه عمل أقل للحفاظ على، فرص أقل لحدوث خطأ.
لكنني تخلصتُ، على ما يبدو، من كل تلك الجماليات،
لكن ليس بالضرورة، بسبب CSS، هذه اللغة الثانية،
إنها تتيح لك أيضًا تطبيق الخصائص ليس على العلامات عن طريق الفئات،
ولكن على العلامات الفعلية نفسها.
إذن إذا كانت لديكم بنية واحدة فقط، فإنه من الآمن قول، حسنًا، CSS، طبّقي على علامة البنية
هذه الخاصية أو هذه الخصائص.
مرحبًا، أيها المتصفح، قم بتطبيق على علامة الرأس هذه الخاصية أو هذه الخصائص--
على العلامة الرئيسية، وعلامة التذييل، وهكذا.
لذلك لا أحتاج حتى إلى تعقيد عالمي بشأن صغير، متوسط، كبير،
وهكذا.
يمكنني فقط تطبيق تلك الخصائص الموجودة في أعلى الملف الخاص بي
على أسماء العلامات المعنية، أيًا كانت.
ويمكنني استخدام علامة p.
يمكنني استخدام علامة image، علامة a، أيًا من هذه.
يمكنني تصميمها بطرق مختلفة.
في الواقع، إذا كنتم تتسألون أو بدأتم بالتساؤل عن الكيفية التي يمكنكم تغيير حجم صورة بها،
فيمكنكم تطبيق CSS على علامة image وقول،
اجعلي هذا وحدات بكسل عديدة أو هذا وحدات بكسل عديدة أو شيء من هذا القبيل.
نعم؟
الجمهور: هل هو تصميم سيء للاستمرار بعد ذلك في دفع [INAUDIBLE]
ديفيد ج. مالان: نعم.
إنه ليس تصميمًا سيئًا لنستمر فقط في إضافة المزيد من الأشياء إلى الأعلى
ودفع المحتوى الفعلي الخاص بك إلى أسفل وإلى أسفل
وإلى أسفل وتضخيم الملف فقط؟
أجل-- وهو تحول سلس لمثالنا الرابع والأخير هنا، والذي
هو css4.html.
هذا المثال-- دعوني فقط أقوم بالتصغير.
هكذا.
يحتوي css4.html هذا على عدد أقل من سطور التعليمة البرمجية، وبالفعل لا توجد فيه CSS
على الإطلاق.
هذا فقط موقع الويب الذي يهمني، الكلمات والبيانات التي تهمني.
قد أحيلت كل الأشياء الجمالية، على الرغم من أنها أهميتها،
إلى ملف منفصل يمكنك استنتاجه وهو يُسمى css4.css.
لسوء الحظ، وكان هذا قرار تصميم غبي أعدّه البشر منذ سنوات،
الطريقة التي تقوم بها بتضمين CSS من ملف منفصل
هي، بشكل متناقض، استخدام علامة رابط، وليس علامة a،
والتي ربما يجب أن يُطلق عليها علامة الرابط.
ولكن لديكم علاقة من ورقة النمط.
إذن أحيانًا، يتخذ البشر قرارات ضعيفة.
هذا القرار إحداها، كما كنت أقول.
ولكن إذا قمتم بنسخ هذا ولصقه ووثقتم أن هذا يعني، مرحبًا، أيها المتصفح،
افتح هذا الملف واستخدم هذه الميزات من الملف في هذا الملف،
إنها متشابهة، في جوهرها، لعلامة التجزئة من C بما في ذلك الآلية.
إنها تبدو مختلفة قليلاً.
إذن ما الذي يوجد في هذا الملف؟
حسنًا، ربما يمكنكم التخمين، إذا انتقلتُ إلى css4.css،
إنه فقط ذلك المحتوى نفسه.
لكنني استبعدته من تقديراتي، كما تلاحظون-- لم يكن التصميم الأفضل لكي نحفتظ به
معًا.
لذلك يمكنني ببساطة وضعه هناك بدلاً من هنا.
أية أسئلة؟
أجل؟
الجمهور: في اللغة الآخرى، اللغة الرابعة المثالية، وأفضلها،
ما هى وظيفة "ورقة النمط"؟
ديفيد ج. مالان: سؤال جيد.
ما هى وظيفة ورقة النمط في هذا المثال؟
الإجابة المختصرة هي أنها توضح فقط للمتصفح
العلاقة بين هذا الملف، css4.css، وهذا الملف،
الذي هو ملف HTML، هي من"ورقة نمط."
إذن CSS، أوراق الأنماط المتسلسلة-- عبارة عن كلمات كثيرة
فقط لتحويل فكرة الجماليات.
لكن هذه هي ورقة النمط الخاصة بك، حرفيًا.
إنه ملف فعلي ينتهي في .css والذي يجب تطبيقه على لغة HTML هذه.
أجل؟
الجمهور: [INAUDIBLE]
ديفيد ج. مالان: تصميم أفضل لماذا؟
الجمهور: [INAUDIBLE]
ديفيد ج. مالان: إنه سؤال جيد حقًا.
لذا خلاصة القول، هل هو-- أليس كذلك--
أليس هذا تصميم أفضل، للحصول على ملف واحد باستخدام HTML وCSS،
بدلاً من اثنين لأن الأشياء قد تكون في غير موضعها؟
الآن هما منفصلين.
لا يوجد الرابط المتأصل نفسه.
ربما، بصراحة.
هذا قلق منطقي.
لن يوافق الأشخاص المنطقيون.
بشكل عام، أنا أقول أن عالم البرمجة
قرر أن الفصل بين الأمور المقلقة أمر جيد.
لذا احتفظوا بلغة HTML في ملف واحد، CSS في ملف آخر.
احفظهم في المجلد نفسه.
وبصراحة، إذا فقدت ملفاتك في مجلد طوال الوقت،
ربما تكون المشكلة--
مشكلة بشرية، وليست مشكلة فنية.
لكنك أثرتَ نقطة جيدة، أيضًا.
ويمكنك القول، بدرجة معقولة من المصداقية، أنك فقط تبالغ في تصميم هذا
الآن.
أنا أفضل ذلك تمامًا.
وسترى في موقع CS50 على الويب وFacebook وGoogle وغيرها--
في بعض الأحيان، ترى CSS مع HTML
لأن البشر قرروا أن ذلك أكثر منطقية.
لكن توجد هذه الآليات في مكانها لتسهيل التعاون،
لتسهيل الفصل، حتى يمكنك أن تحتفظ بالأشياء منظمة أكثر
في ملفات منفصلة.
أية أسئلة أخرى؟
إذن لنلخص ما توصلنا إليه، لأن ذلك سريع جدًا،
HTTP هو هذا البروتوكول الذي من خلال يمكنك فقط تبادل المعلومات
من A إلى B وB إلى A. HTML هي اللغة التي تتم كتابة صفحات الويب
بها، بنية صفحة الويب تلك، والتي تحتوي بالفعل على بياناتك.
وتتيح لك CSS ضبطها.
الآن، لم أقم بضبطه كله بشكل دقيق كثيرًا.
أنا فقط قمت بوضعه في المنتصف وقمت بتغيير حجم الخط.
لكن بصراحة، يمكننا بسرعة الحصول على تعقيدات الألوان
والموضع وكل ذلك.
ولكن هذا ما سنفعله في الأقسام وفي Psets و في البحث على Google والنظر
في المراجع الموجودة على الإنترنت التي سنرشدك إليها
لأنها جميعًا تتبع فقط نفس أنماط العلامات ذات السمات
ومن ثم خصائص CSS.
لذا على الرغم من أنكم لم تروا جميع مفردات CSS وHTML،
لكنكم رأيتم البنية بأكملها، المفاهيم الأساسية.
لذلك دعونا نقدم بعد ذلك القطعة النهائية من اللغز
ونعود لنسترجع بعض قدرات
البرمجة الخاصة بنا من الأسابيع القليلة الماضية.
لذلك يتضح أنه في عالم HTML وCSS،
يمكنكم في الواقع تقديم لغة برمجة، أيضًا،
لجعل مواقعكم على الويب ديناميكية أكثر باستخدام شيء يُسمى JavaScript.
الكثير منكم قد درسوا APCS ويعرفون Java--
لا توجد علاقة بينهما.
JavaScript مجرد قرار تسويق لهم--
يُطلق عليه شيء مشابه للغة شائعة بالفعل.
لذا، فإن JavaScript هو لغة مستخدمة في المتصفحات، عادة،
لتمنحكم المزيد من التحكم على تجربة المستخدمين.
على سبيل المثال، عندما تزورون Gmail هذه الأيام وتحصلون على بريد جديد،
فإنه يظهر بطريقة سحرية كصف جديد في البريد الوارد.
لا يجب أن تعيد التحميل أو تستمر في الضغط على تحديث لرؤية البريد الجديد.
إنه يظهر فقط بطريقة سحرية.
عندما تستخدم خرائط Google أو شيء ما،
يمكنك فقط النقر والسحب ومشاهدة المزيد من الخرائط.
في أيامي، كان يجب أن تنقر فوق السهم الأيمن
للانتقال إلى هذا الاتجاه، وسهم أيسر للانتقال إلى ذلك الاتجاه.
وتقوم صفحة الويب بأكملها بإعادة التحميل في الواقع.
لكن JavaScript تمنحك المنطق وقدرات البرمجة
في أجهزة Mac وأجهزة الكمبيوتر الشخصي والهواتف التي يتم تنفيذها ليس على خادمك فقط،
ولكن على المتصفح، مما يعني أنه يمكنك أن تقوم بالكثير من الأشياء عن طريق تشغيل التعليمة البرمجية
على أجهزة الكمبيوتر.
إذن ما الذي يعنيه كل هذا بالفعل؟
حسنًا، في JavaScript، لحسن الحظ، لدينا
لغة متشابهة جدًا للغة C. ولكن يتم تفسيرها من الأعلى
إلى الأسفل، من اليسار إلى اليمين.
يقرأ المتصفح الإرشادات فقط في JavaScript ويقوم بها فقط.
لا يوجد تحويل برمجي لك.
لا يوجد أصفار وواحدات.
وبهذا المعنى، فإنه أسهل فقط من C.
أيضًا، ليس لديها مؤشرات، والتي هي أيضًا أسهل من C.
ولكنه يعطينا القدرة على تغيير صفحة ويب
بمجرد تسليمها إلى مستخدم.
وسنرى ما يمكننا القيام به بالفعل باستخدام تلك القدرة.
لكن أولاً، دعونا نقارن ونباين.
ستتذكرون منذ بضعة أسابيع، في الأسبوع 1، عندما قدمنا ​​C،
سحبنا بعض من سكراتش وسحبنا بعض من C، فقط لإظهار
أن الأفكار ما تزال هي نفسها.
لنفعل نفس الأمر بسرعة هنا.
لذا انتقلنا من سكراتش إلى C. دعونا الآن ننتقل إلى JavaScript باستخدام المتغيرات.
لذا في C، إذا أردت تعيين عداد إلى 0 مثل سكراتش،
يمكنك القول حرفيًا أن العداد يساوي 0، فاصلة منقوطة.
لكنك ستحصل على نوع البيانات إلى اليسار.
في JavaScript، تكون التعليمة البرمجية هي نفسها تقريبًا.
ولكنك في الواقع لا تحدد أنواع البيانات.
لا تقلق، كمبرمج، بشأن الأعداد الصحيحة أو القيم الكسرية أو السلاسل
أو كل ذلك.
قمتَ بتعريف المتغير.
والكلمة الرئيسية للاستخدام، على الرغم من أن هناك العديد من الخيارات
التي تفعل أشياء مختلفة قليلاً، هو يسمح.
والتفكير هو ما يسمح للعداد أن يساوي 0، من فضلك، إذا صح التعبير.
لكنك لا تحدد النوع، على الرغم من أن JavaScript تدعم
الأرقام والسلاسل، وما إلى ذلك.
فقط لا يجب أن تهتم بهم كثيرًا بعد الآن.
لنفترض أنك تريد تحديث متغير.
في سكراتش، تقوم فقط بتغيير العداد إلى واحد.
في C، ستقوم بإعداد العدّاد ليكون مساويًا للعدّاد زائد 1، فاصلة منقوطة.
في JavaScript، ستقوم بنفس الشيء بالضبط.
التعليمة البرمجية متطابقة.
في C، يمكنك أيضًا كتابة هذا بإيجاز
حيث العداد زائد يساوي 1، فاصلة منقوطة، إذا كنتم تتذكرون ذلك.
إذا لم تفعلوا، فلا بأس.
هذا مجرد تدوين شديد الاقتضاب.
في JavaScript-- نفس الشيء بالضبط.
في C، يمكنك أيضًا القيام بعدّاد زائد، زائد
فاصلة منقوطة لزيادة القيمة--
في JavaScript، نفس الشيء.
هذا هو الشيء اللطيف حول JavaScript.
أنت تعرف الكثير عنه بالفعل حسب طبيعة
قضاء عدة أسابيع في تعقيدات لغة C.
لنفترض أن لديك حالة إذا، هكذا-- إذا كانت x أقل من y.
في C، نكتبها هكذا على اليمين.
صيغة JavaScript هي نفسها.
إذا كانت لديك ماذا لو أخرى، فإن الصيغة هي نفسها.
ماذا لو أخرى، ماذا لو أخرى--
فإن الصيغة هي نفسها.
إذا كنت ترغب في إجراء تكرار حلقي للأبد، فستكون الصيغة هي نفسها، في حالة إذا كانت صحيحة.
إذا كنت ترغب في إجراء تكرار حلقي، فإن الصيغة هي نفسها تقريبًا.
يسمح بحاجة إلى أن يتم استخدامه بدلاً من ذلك.
إذن هذا هو C لأنه يقول أن int i يساوي 0، وهكذا.
هذا هو نوع البيانات.
أJavaScript-- أنا فقط أزعم لا تقلقوا--
لا داعي للقلق بشأن أنواع البيانات هذه.
لذا في JavaScript، ستقول بدلاً من ذلك "يسمح" بدلاً من ذلك.
ولكن بخلاف ذلك، فإن الصيغة هي نفسها.
لذا هذه نقطة انطلاق جيدة لأنه لا يوجد
أي شيء جديد لتعلمه من الناحية البنائية.
نحتاج فقط لتطبيق نفس المنطق الذي رأيناه في الأسبوع 0 و1
منذ HTML.
إذن إذا كانت هذه صفحة ويب ممثلة، وإن كانت بسيطة جدًا--
هذا ما أعددته في وقت سابق--
كيف يمكننا الآن البدء في التفكير حول صفحة الويب هذه
بطريقة مواتية لبرمجة ذلك
وتغييره في الواقع بشكل ديناميكي؟
حسنًا، دعوني أقترح أنكم تفكرون في صفحة الويب نفسها باعتبارها مجرد شجرة.
وقدمنا الأشجار منذ أسبوع فقط، وإن كان ذلك في سياق لغة C.
وبصراحة، في C، إنها تعد أمرًا مزعجًا لأنه
يجب أن تربط الأشياء معًا باستخدام مؤشرات وعُقد وكل ذلك.
لا تقلق بشأن ذلك الآن.
إنها مهمة المتصفح لبناء هذا في الذاكرة أو ذاكرة الوصول العشوائي من أجلك.
وبالفعل، عندما أستمر في القول للمتصفح، عند استلام
ظرف باستخدام HTML، أن يقرأه من الأعلى إلى الأسفل، ومن اليسار إلى اليمين،
لم أقل ما يفعله به.
ما يفعله به بشكل أساسي هو أنه يقوم بإنشاء بنية البيانات هذه
في الذاكرة من أجلك.
وهو Chrome أو Edge أو Firefox أو أي متصفح تستخدمه
هو نفسه مكتوب على الأرجح في C أو C ++ أو بعض اللغات الأخرى.
كتب بعض الأشخاص الآخرون في تلك الشركات التعليمة البرمجية
التي تبني كل المؤشرات و/أو أيًا كان
ما يتم استخدامه لبناء هذه البنية في الذاكرة.
لكن هذا ما يضعه المتصفح في الاعتبار بمجرد قراءته للغة HTML الخاصة بك.
والآن هذه بنية البيانات في الذاكرة،
يمكنك إجراء تغييرات عليها، تمامًا مثلما كان في الأسبوع الماضي،
كنا نقوم بإدراج الأشخاص في القائمة المرتبطة، لتغيير بنية البيانات.
يمكن أن يضيف المتصفح عُقد أكثر أو علامات أكثر إلى الصفحة، بطريقة ديناميكية.
لذلك إذا قمتَ بالتفكير بهذا داخل عقلك، عندما
تحصل على بريد إلكتروني جديد في Gmail، ما الذي يحدث؟
حسنًا، صفحة الويب، عندما تقوم بتحميلها أول مرة في Gmail،
تحتوي على مجموعة كاملة من علامات td، على الأرجح، أو علامات tr، بدلاً من ذلك، لصف جدول--
صف جدول، صف جدول-- من المحتمل أن كل منها تمثل رسالة بريد إلكتروني.
عندما تستلم رسالة بريد إلكتروني جديدة، فمن المحتمل أن يضيف المتصفح عقدة tr أخرى
لهذه الشجرة لأنه لاحظوا الكلمات هنا.
تتطابق Html مع هذه العلامة.
تتطابق الرأس مع هذه العلامة.
تتطابق البنية مع هذه العلامة.
لذا فهي ترمز إلى السبب وراء أنه عندما تحصل على صف آخر في بريدك الوارد
باستخدام بريد إلكتروني آخر، فإن شخص يضيف فقط عقدة إلى تلك الشجرة.
وهذا الشخص هو JavaScript، اللغة
التي يمكنك بها التحكم في متصفح المستخدمين حتى بعد تحميل
صفحة الويب الخاصة بك لأول مرة.
إذن ما الذي يمكننا فعله بهذا في الواقع؟
دعونا نبدأ ببساطة، على النحو التالي.
دعوني أمضي قدمًا وأُعِد فقط، بسرعة، ملف يُسمى hello0.html.
وسنقوم بذلك، كما قمنا من قبل، مع DOCTYPE html--
علامة html الخاصة بي هنا، علامة الرأس الخاصة بي هنا.
سيكون عنواني هو hello0 هنا.
ولاحظوا أنني نقلت هذه لسطور منفصلة.
لا تحتاج على وجه التحديد إلى القيام بذلك-- فقط للحفاظ على التسلسل الهرمي.
المسافة، مجددًا لا تهم.
لكنني سأكون منسقًا هناك.
وفي بنيي هنا، سأقول هذ المرة فقط "مرحبًا، أيها العالم" بشكل افتراضي.
هذه صفحة ويب بسيطة للغاية أيضًا.
دعونا، بالفعل، الآن نجعلها تفاعلية.
كانت جميع صفحات الويب الخاصة بي حتى الآن عبارة عن محتوى ثابت،
باستثناء صفحات Google.
لكن حتى تلك لم تكن تفاعلية كثيرًا كما كانت في اللحظة التي ضغطت فيها على Submit،
لقد جعل المشكلة مشكلة Google ليتم التعامل معها.
دعونا نحتفظ بالمستخدم معي هذه المرة.
دعوني أمضي قُدمًا وأقوم بذلك.
دعوني أتخلص من هذا الشكل هنا.
دعوني أقوم بإنشاء ملف جديد الآن يُسمى hello1 كإصداري التالي.
ودعوني أمضي قدمًا وألصق تلك التعليمة البرمجية نفسها.
لكن هذه المرة، دعوني أجعل المتصفح تفاعليًا قليلاً.
دعوني أمضي قدمًا وأحصل على شكل هنا لأن ما أريده هو مربع نص--
سأكتب يساوي نص.
أنا لن أزعج نفسي بإطلاق اسم عليه حتى الآن.
ودعوني أحصل على واحد آخر يُسمى النوع يساوي تقديم.
حفظ.
ودعوني أمضي قدمًا وأفتح الخادم الخاص بي حتى أتمكن من رؤية هذا الملف.
هذا، قلت أنه، لقد كان-- hello1.html.
لذا إنه فقط شكل بسيط.
ولكن لا يوجد اتصال بـ Google هذه المرة.
دعوني أبدأ باستخدام هذا الشكل بشكل تفاعلي
لأنه إذا كانت لدي القدرة على البرمجة،
أراهن أنه يمكنني أخذ مدخلات المستخدمين والقيام بشيء ما باستخدامها.
إذن كيف يُمكنني فعل هذا؟
حسنًا، دعوني أقترح أولاً أنني أريد أن يكتب الأشخاص
أسمائهم في هذا الشكل.
ومن ثم عندما يضغطون فوق Submit، أريده
أن يقول "مرحبًا، ديفيد" أو "مرحبًا، فيرونيكا" أو "مرحبًا، براين،"
أيًا كان الاسم في الواقع، مثل بعض أمثلة C الخاصة بنا.
إذن أتعلمون ماذا؟
دعوني أكتب هذه الدالة أولاً.
يتضح أنه في أعلى صفحة الويب الخاصة بك،
لا يمكنك الحصول فقط على العنوان ولا يمكنك الحصول فقط على النمط،
ولكن أيضًا علامة تُسمى script لـ JavaScript، على سبيل المثال.
وفي هذه العلامة، يمكنني فعلاً كتابة التعليمة البرمجية.
وهناك شيء مختلف قليلاً في JavaScript.
بدلاً من كتابة تحية باطلة كاسم الدالة الخاصة بي
ومن ثم كتابة بنية الدالة الخاصة بي هنا وبعد ذلك
قول void هنا، على سبيل المثال، JavaScript أكثر مرونة قليلاً.
إذا كنت لا تريد أن تأخذ أي وسيطات، فقط
لا تذكرها-- لا تذكر void.
إذا لم تكن لديك--
وفي الواقع، لا تذكر حتى نوع الإرجاع.
أطلق عليها فقط دالة-- فرق طفيف للغاية
عن C. أنها أكثر كسلاً قليلاً.
لا تقلق بشأن أنواع المدخلات.
لا تقلق بشأن أنواع المخرجات.
أنت فقط تقول، أعطني دالة تُسمى تحية.
حسنًا، ماذا أريد من هذه الدالة أن تفعل؟
يتضح أنه في JavaScript، هناك دالة تُدعى تنبيه
إنها فقط تنبثق في نافذة تقول شيئًا ما فيها.
ويمكنني المرور، كوسيطة إلى دالة JavaScript هذه،
أيًا كان ما أريد منها قوله.
لذلك دعونا نمضي قدمًا ونقول "مرحبًا، أيها العالم،" فاصلة منقوطة.
إنها تقريبًا مطابقة للغة C، مجددًا، باستثناء أنني أقول
دالة بدلاً من نوع الإرجاع.
ويبدو أن هناك تنبيه.
وليس هناك تضمين حاد أو أي من تلك التي كانت لدينا عادة في C.
إنها موجودة حرفيًا فقط في المتصفح الخاص بي الآن.
إذن دعوني أمضي قدمًا وأحفظ هذا وأنتقل إلى علامة الشكل هنا.
ويتضح أنه، في علامة الشكل، هناك
سمة خاصة تُسمى onsubmit.
وكما تشير الكلمة، إنها تقول عندما يتم تقديم
الشكل، امضي قدمًا وقم بتنفيذ هذا، تحية.
لذا يمكنني في الواقع إخبار المتصفح، عند تقديم هذا الشكل،
لاستدعاء الدالة التي كتبتُها.
والآن دعوني فقط بشكل استباقي أكتب إرجاع
خطأ لأسباب سنتطرق إليها بعد قليل،
لنتأكد فقط من أن هذا يعمل بالفعل.
الآن دعوني أمضي قدمًا وأحفظ هذا، وأنتقل إلى hello1.html، وأفتح هذا.
ودعوني أقوم فقط بتغيير العنوان، من أجل التناسق--
إذن hello1.html.
ودعوني أمضي قدمًا وأقول ديفيد، Submit--
مرحبًا، أيها العالم-- لست متأكدًا بالفعل ما المغزى من كتابة اسمي.
ولكنه، على الأقل، يبدو أنه يعمل كما تمت برمجته.
لكن من الواضح، ما أتطلع إليه بفعل هذا هو أنني أريد عرض اسمي.
لذا عندما يكتب الأشخاص أسمائهم في المربع وينقروا فوق Submit،
الذي يُشغّل تقديم الشكل.
لكن انتظروا.
عند تقديم الشكل، سأقوم باستدعاء تحية.
لذلك تبدو أنها مهمة تحية لمعرفة ما
هي الكلمة التي كتبها الشخص.
إذن كيف يمكنني القيام بذلك؟
إنها مشفرة قليلاً.
وهذا هو المكان المُحدّد الآن لـ JavaScript
وليس C. دعوني أمضي قدمًا وأحدد متغير يُسمى اسم.
ودعوني أستخدام هذه التقنية الرائعة، document.querySelector.
ومن ثم هنا، سأحتاج إلى تحديد
أي عقدة في الشجرة أريد اختيارها.
لذا أنا بالفعل أمضي قدمًا بنفسي.
دعونا ننظر في لغة HTML.
في هذه اللحظة، لديّ علامة شكل وعلامتا إدخال، ولم تحصل أي منها
على اسم.
ويمكنني إصلاح ذلك.
لكن دعوني أقوم بالفعل بتقنية أخرى.
تدعم HTML أيضًا المعرّفات الفريدة.
ويمكنك إعطائها حرفيًا، معرّفات فريدة.
يمكنكم تسميتها الاسم الذي تريدونه-- foobar، baz، xyz.
سأجعلها وصفية أكثر وأطلق عليها
المعرّف يساوي اسم لأن ما يمكنني فعله الآن هنا
في querySelector هو في الواقع تحديد ما
أريد اختياره من الشجرة.
تُسمى تلك الشجرة DOM، أو نموذج كائن المستند، بشكل مطنب.
وأنا بحاجة لفعل أمر أخير-- يتضح أنه،
وستعرف هذا فقط من خلال التجربة،
أنه إذا كان "اسم" هو معرّف العنصر الفريد
وليس اسم العلامة، أنا بالفعل بحاجة إلى بدأها باستخدام علامة تجزئة،
لا علاقة لها بعلامة تجزئة C.
لكن بخلاف ذلك، هذه الدالة، querySelector،
ستعتقد أن هناك علامة يُطلق عليها "اسم."
هذا يعني أن المعرّف قيمته "اسم."
إنه صعب بعض الشيء.
لكن ها نحن ذا.
بمجرد أن أحدُد تلك العقدة من الشجرة، أريد الحصول على قيمتها ووضعها--
أريد الحصول على قيمتها، فاصلة منقوطة.
ما الذي يجري؟
أولاً، تذكرون أنه من هذه الشجرة هنا كلما يقوم المتصفح بتحميل HTML،
فهو يحتوي على بعض من لغة HTML.
إنه يبني بنية شجرة هناك.
كل تلك العقد قابلة للتحديد عن طريق هذه الدالة التي تُسمى querySelector.
ما هو المستند؟
حسنًا، يتضح أنه في JavaScript، يوجد
هذا المتغير العالمي الخاص الذي يُدعى مستند
والذي يشير إلى المستند بأكمله، صفحة الويب بأكملها.
المُدمج في ذلك وهو دالة تُسمى querySelector.
هذا التدوين النقطي يذكرنا بصيغة struct في C.
لذا يمكنكم التفكير في المستند كـ struct التي تمثل الصفحة بأكملها.
بداخله دالة، وليس فقط بيانات،
ولكن دالة، تُسمى querySelector.
سترون هذا في كل مكان في JavaScript، نقط،
لأن الأشخاص-- عالم JavaScript هو أكبر بكثير من C.
لذلك هناك الكثير من الدالات داخل الحاويات أو البنيات الأخرى.
لذلك مع هذا الذي قاله، هذا فقط يقول، مرحبًا، أيها المتصفح،
دعني أحصل على متغير يُسمى اسم وقم بتخزين
قيمة العقدة التي تحتوي على معرّف فريد للاسم
واحصل على ذلك باستخدام هذه الدالة، وحددها.
هذا يسحب المستطيل من الصورة
ويمنحني حق الوصول إلى القيمة التي كتبها الشخص.
الآن، أنا لم أنتهي من هذا.
أحتاج لعرض هذه القيمة بالفعل.
ولن يكون أمر القيام بهذا صحيحًا.
وإلا سأرى فقط "مرحبًا، أيها الاسم."
لذلك لا يوجد هذا التقليد، الذي كان لدينا في C. هناك
طريقة أخرى للقيام بذلك.
سأمضي قدمًا وأقوم بذلك على النحو التالي.
سأستخدم فقط تسلسلاً.
لذا هذا غير ممكن في C. لكن في JavaScript،
إذا كانت لديك سلسلة على اليسار وسلسلة على اليمين،
فإن استخدام زائد لن يجمعهم معًا، وهو أمر غير منطقي.
سيعمل على تلسلسهم، مثل لاصق واحد مع الآخر.
في C، كيف ستقومون بهذا؟
إنه كابوس مطلق.
في C، كيف ستقومون بهذا؟
ستكون هذه مصفوفة من الأحرف على اليسار
التي تحتوي على حرف فارغ في النهاية.
هذه ستكون مصفوفة أخرى من الأحرف
على اليمين باستخدام حرف فارغ في النهاية.
وليست أي منها كبيرة بما يكفي لتناسب الأخرى أيضًا.
لذا عليك أن تقوم بتخصيص مصفوفة جديدة من الأحرف،
انسخوا هذه في، تخلصوا من الخط المائل العكسي 0، انسخوا هذه في، حافظوا على الخط المائل العكسي 0،
تخلصوا من هذه.
ومن ثم ستكون لديكم سلاسل متسلسلة.
هذه خطوات كثيرة لعينة في C. ولهذا
لا أحد يحب البرمجة في C. ولا يجب أن تقوموا بذلك بعد الآن.
في JavaScript، استخدم فقط مُشغل زائد.
وهي ستفعل كل ذلك من أجلك.
لكن آمل، أن لديكم التقدير الكامن لما يقوم به مُشغل زائد
بالفعل بشكل غير ظاهر
لأن الكمبيوتر ما يزال يقوم بالعمل نفسه.
الاختلاف هو أننا في هذا الأسبوع فصاعدًا، نحن، البشر، نقوم بأقل من ذلك العمل
بأنفسنا.
إذن زائد هو تجريد لكل هذا التعقيد.
إذن لو لم أكن قد أخطأت في ذلك، دعوني أمضي قدمًا وأحفظه الآن.
سأنتقل إلى المتصفح، إعادة تحميل، وأكتب اسمي، ديفيد.
Submit.
وهناك نحصل عليه--
مرحبًا، ديفيد.
دعونا نقوم باختبار واحد آخر.
سنحاول، لنقل، فيرونيكا.
Submit.
و ها هي ذا.
ستلاحظون أن متصحفي يحاول أن يكون مفيدًا الآن.
إذا كتبت D، فسيقوم بالإكمال التلقائي، أو V--
حسنًا، يبدو أنه نسي أمر فيرونيكا.
فيرونيكا-- دعونا نرى إذا قمنا بإعادة التحميل.
V-- هذا غريب.
لا تخبروا فيرونيكا أن Chrome لا يتذكرها.
لكن يمكننا إيقاف تلك الميزة-- هذا هو المغزى--
في الواقع من خلال فعل أشياء كهذه.
وستعرفون هذا من الدليل على الإنترنت.
الإكمال التلقائي يساوي إيقاف هذه الميزة.
يقوم الضبط التلقائي أيضًا بشيء مفيد.
لو انتقلتم في أي وقت إلى صفحة ويب ويمكنكم فقط البدء بكتابة شيء،
سيقوم Chrome وMacOS بتظليله باللون الأزرق.
هذا يعني فقط تقديم ضبط.
ضَع المؤشر هناك.
إذا لم يكن لديك ذلك، ستبدأ صفحة الويب هكذا.
وقد زرنا جميعًا مواقع ويب، وأعتقد أن موقعي هارفارد ضمن هذه المواقع،
حيث يجب عليكم بغباء أن تنقروا هناك فقط
لبدء التفاعل مع الصفحة.
ذلك ليس ضروريًا.
هذه برمجة سيئة.
فقط باستخدام العلامات يمكنك إصلاح هذا النوع من الأشياء.
أي أسئلة؟
الجمهور: ماذا إذا كان لدينا معرّفان بنفس الاسم؟
ديفيد ج. مالان: ماذا إذا كان لدينا معرّفان بنفس الاسم؟
لن يحدث ذلك.
هذا خطأ بشري.
حسب التعريف، يجب أن يكون المعرّف فريدًا.
وإذا كان لديك معرفان بنفس الاسم، إذن لقد قام الشخص بخطأ.
وما الذي--
أنا لا أعرف ما هو التصرف.
من المحتمل أنه غير موثق بشكل غير رسمي أو ربما يختار الأول.
ربما يختار الثاني.
لا أعرف.
لكن لا يجب أن تعتمد على ذلك، على أي حال.
سؤال جيد.
حالة أساسية جيدة.
أية أسئلة أخرى؟
دعوني أنتقل إلى مثال آخر.
ومن ثم سننتقل إلى نسخة رائعة من هذا.
دعوني أفتح برنامج في المصدر 5 اليوم
دليل يسمى background.html.
لقد حصل على بعض الأحرف المألوفة، التي ربما تشير للون الأحمر، الأخضر، الأزرق،
من المحتمل.
هذه ثلاثة أزرار.
ولقد رأينا الأزرار.
لقد رأينا زر البحث وأزرار التقديم التي قمت بإنشائها من قبل.
لكن باستخدام JavaScript، يمكنني أن أقوم بأشياء ممتعة مثل هذه.
إذا قمت بالنقر فوق R، فإن صفحة الويب قد تغيرت للتو.
G، B، R، G، B-- الآن هذا تفاعلي.
لو قمنا فقط بكتابة HTML وCSS، فسيكون عليكم اختيار لون واحد من هذه الألوان
والتشبث بها.
لكن باستخدام JavaScript، يمكنكم إجراء استجابة.
وهذا لأن متصفح لديه الكثير والكثير
من الأحداث التي تتم طوال الوقت.
تتضمن الأحداث النقرات أو تحريك الفأرة أو السحب، أو في جهاز محمول،
اللمس.
إذن هناك الكثير من الأشياء التي يمكن أن يفعلها الشخص باستخدام متصفح الويب.
ويمكنكم كتابة التعليمة البرمجية التي تستجيب لكل هذه الأنواع من الأحداث.
وإذن دعوني أمضى قدمًا بالفعل وأفتح background.html
وأعرض كيف يعمل هذا.
إذن بالنسبة للجزء الأكبر، هو مجرد HTML في البداية.
ها هي علامة html، وعلامة الرأس، وعلامة البنية، و3 علامات جديدة.
هذه طريقة أخرى لإنشاء الأزرار.
ومرة أخرى، هذا ليس أمر مثيرًا للاهتمام.
أنتم تتعلمون ذلك من المرجع أو الدليل على الإنترنت.
وهو يخبركم فقط، بكيفية استخدام زر.
وهو يتبع النموذج نفسه-- اسم علامة، سمة تساوي قيمة.
ستكون التسمية فقط R، وG، وB.
والآن هذا هو المكان الذي تبدو فيه الأشياء مخيفة قليلاً في البداية.
ولكن هذا كل شيء.
هي فقط سطور من التعليمية البرمجية هنا داخل صفحة الويب.
الآن، دعونا ننتقل خلال هذا سطرًا بسطر،
حتى لو كانت تبدو أكثر إطنابًا قليلاً في البداية.
إذن هذا السطر الأول هنا يقول، مرحبًا، أيها المتصفح،
أعطني متغيرًا يسمى بنية.
وقم بتخزينه في ذلك المتغير، العقدة--
المستطيل، إذا جاز التعبير--
الذي يُسمى بنية.
حتى، تقتلع هذا المستطيل من الصورة
حتى يمكنني الوصول المباشر إليه.
لماذا-- لأنني سأقوم بمعالجتها في غضون لحظات.
هذا هو الشكل المخيف أكثر والذي ستبدو عليه JavaScript الآن.
Document.querySelector علامة التجزئة الحمراء-- هل يمكن لأحد منكم
ترجمة ذلك إلى الإنجليزية فقط؟
ما الذي يفعله هذا من أجلي؟
الجمهور: إعطاء المعرّف من الأحمر أنك فقط--
ديفيد ج. مالان: أجل.
كن أكثر إطنابًا قليلاً.
شخص آخر؟
مرحبًا، أيها المتصفح، حدّد لي عقدة يكون معرّفها الفريد باللون الأحمر.
هذا جيد.
أعطني حق الوصول إلى تلك العقدة، البنية في الذاكرة.
وهنا تكون غريبة قليلاً.
إذن تبين أن كل علامة في صفحة ويب أو عقدة في شجرة--
شجرة DOM، إذا جاز التعبير--
نموذج كائن المستند-- يمكن أن يحتوي على مستمعي حدث مرتطبين به.
وستعرفون هذا فقط من خلال الوثائق.
ولكن إذا قلت حرفيًا، امضي في هذه البنية،
هذه العقدة، التي تمثل الزر الأحمر
واحصل على قيمة on-click، والأمر الرائع باستخدام JavaScript،
على الرغم من أن الصيغة تبدو مخيفة قليلاً،
هو أنه يمكنك ربط دالة ما مع هذا الحدث.
إذن سيقول هذا، مرحبًا، أيها المتصفح، عندما يتم النقر فوق الزر الأحمر،
استدعي الدالة التالية.
والأمر الجديد في JavaScript هنا هو هذه الوظيفة، في الوقت الحالي،
ليس لديها اسم، وهذا غريب.
يمكنكم أن تفعلوا ذلك من الناحية الفنية في C. لكننا دائمًا نطلق على وظائفنا أسماء.
ولكنكم لا تحتاجون حقًا إلى إطلاق اسم على وظيفة
إذا كنتم لا تحتاجون لذكرها مرة أخرى.
والتفصيل الذي يحدث لنا هنا هي تلك.
إنه يقول، مرحبًا، أيها المتصفح، عند النقر، استدعي هذه الدالة.
ماذا يعني ذلك بقيم فعلية؟
مرحبًا، أيها المتصفح، استدعي جميع سطور التعليمة البرمجية
بين هذا القوس المتعرج المفتوح وهذا القوس المتعرج المغلق.
إذن حتى لو لم تكونوا معتادين على الصيغة،
فإنها تعني حرفيًا تنفيذ السطور التالية من التعليمة البرمجية
عندما يتم النقر فوق هذا الزر.
هذا ما يعرف كدالة مجهولة طالما ليس لها اسم.
إنها مجرد دالة، قوس مفتوح، قوس مغلق.
إذن من المحتمل أنه يمكنكم أن تستنتجوا ما تقوم به على هذا السطر هنا.
دعوني أقوم بتظليل هذا السطر باللون الأزرق.
إنه مشفر قليلاً.
ومجددًا، أعدكم أنكم سترون الكثير من هذه النقاط.
ولكن هذا يقول، مرحبًا، أيها المتصفح، قم بتعديل البنية،
أو على وجه التحديد، نمط البنية، وخاصة،
لون خلفية نمط البنية، ليكون، باللون الأحمر، بالطبع.
وتم نسخ ولصق باقي التعليمة البرمجية في الوقت الحالي باللون الأخضر والأزرق كذلك.
إذن ما الذي يحدث؟
في كل مرة تنقرون فيها فوق أي هذه الأزرار--
R أو G أو B--
حرفيًا، ويتم تنفيذ هذا السطر من التعليمة البرمجية الذي قمت بتظليله للتو
أو يتم تنفيذ هذا السطر من التعليمة البرمجية أو يتم تنفيذ هذا السطر
من التعليمة البرمجية.
إذن على الرغم من أن الصيغة بالفعل، باعتراف الجميع، هي
أكثر تعقيدًا بكثير مما رأيناه حتى الآن، لكن الفكرة بسيطة نسبيًا.
حدّد الزر.
أخبره، عند النقر، لاستدعاء هذه الدالة.
وكان الأمر جيدًا في وقت سابق إذا كنتم تقومون فقط بنسخ ولصق هذا.
ولكن بالنسبة لـ Pset5، فلن تضطروا إلى استخدام أي من التعليمة البرمجية هذه.
هذا في-- وبشكل استباقي نظرة على ما يمكنكم
فعله عند النظر إلى ميزات رائعة، مثل المشاريع النهائية وما بعدها.
إذن أي أسئلة على مثال الخلفية هذا؟
أجل؟
الجمهور: لماذا استخدمنا رمز الشباك للون الأحمر والأخضر والأزرق، وليس
للبنية؟
ديفيد ج. مالان: سؤال جيد.
لماذا نستخدم رمز الشباك للأحمر، والأخضر، والأزرق، ولكن ليس للبنية؟
إذا نظرتم في HTML، سترون ما يلي.
من الواضح، أن البنية هي اسم العلامة.
ولهذا السبب، اخترنا "بنية" مع سطر التعليمة البرمجية هذا هنا.
ومع ذلك، لا يعد الأحمر، والأخضر، والأزرق أسماء العلامات.
هم فقط المعرّفات الفريدة، مجرد قيم توصلت إليها للتو.
كان من الممكن أن أسميها x، أو y، أو z.
لكنني اخترت مصطلحات وصفية أكثر.
إذن عندما تريدون القيام بالإشارة إلى أو تحديد
عُقدة-- تحتوي على معرّف، فاستخدموا علامة التجزئة بدلًا من ذلك.
هذا كل شيء.
هذه مجرد تقاليد بشرية غير واضحة إلا إذا تم
إخباركم ما الذي تعنيه جميعها.
لنجرب مثالًا واحدًا آخر باستخدام JavaScript.
من الشائع أن تمتلك مواقع الويب الإخبارية القدرة
على تغيير حجم الخط، الذي يمكنكم، في الواقع،
فعله على جهاز Mac وجهاز الكمبيوتر الشخصي أحيانًا باستخدام اختصارات لوحة المفاتيح.
ولكن في بعض الأحيان، يتم إنشاؤها في صفحة الويب نفسها.
دعوني أنتقل إلى، على سبيل المثال، size.html.
وهنا بعض النص اللاتيني أو ما يشبهه.
ولاحظوا أنه يحتوي على قائمة اختيار صغيرة.
بشكل طبيعي، عندما تكون لديكم قائمة اختيار، ستحددون شيء ما.
ومن ثم تنقروا فوق Submit.
ومن ثم يتعامل الخادم معها.
تنتقل المعلومات إلى مكان ما.
لكن لا تحتاجون إلى القيام بذلك.
في الواقع يمكنكم جعل القوائم الصغيرة تفاعلية، تمامًا مثل مربعات النص.
لنفترض أنني أريد أن أجعل هذا النص أصغر قليلاً.
يمكنني فعل ذلك.
يمكنني تحديد نص صغير جدًا.
يمكنني تحديد نص صغير جدًا جدًا أو كبير جدًا جدًا.
إذن ما الذي يحدث هنا؟
حسنًا، تمامًا مثلما توجد أحداث نقر في متصفح ما،
هناك أيضًا أحداث تغيير أو أحداث تحديد.
فقط أي شيء يمكن أن يحدث على صفحة الويب ويمكنكم الاستماع إليها.
إذن دعونا نُلقي نظرة على هذه التعليمة البرمجية، على سبيل المثال.
لم نرى هذه العلامة من قبل.
لكننا رأينا الفقرة.
وهناك فقرة باللغة اللاتينية.
ثم هناك علامة تحديد، والتي تعطيكم قائمة اختيار.
يُطلق على القائمة المنسدلة قائمة تحديد في HTML.
وها هي كيفية حصولكم على جميع الخيارات.
الآن، يوجد قليل من الازدواجية هنا.
هناك ما يراه الإنسان، وهو موجود بين علامة فتح وعلامة إغلاق.
ثم هناك هذه القيمة، التي يراها الكمبيوتر-- ولكن المزيد حول ذلك
في وقت آخر، عندما نصل إلى Python.
ولكن هذا فقط يمنحني قائمة كاملة من خيارات الحجم.
وإذا قمت الآن بالتمرير للأسفل، لاحظوا أن لدي علامة نص هنا.
وفي علامة النص هذه، لدي document.querySelector "تحديد"
لأنني أرغب في تحديد الاسم، العلامة التي تُسمى select.
ثم هناك هذا الحدث، onchange.
وستعرفون هذا فقط من خلال الوثائق.
لكن مثل onsubmit، يتم استدعاء onchange في أي وقت تقومون فيه بتغيير تلك القائمة.
ما هي الدالة التي يجب استدعاؤها؟
حسنًا، هذه هنا، والتي تُعد مجهولة بمعنى
أنها ليس لديها اسم.
وامضوا قدمًا وقوموا بذلك.
قوموا بتحديد علامة البنية من المستند.
قوموا بالوصول إلى نمطه.
ثم قوموا بتغيير حجم الخط، إلى هذه القيمة وهذا أمر غريب هنا.
إذن ما الذي قمت بفعله هنا؟
دعوني أفعل هذا، ولا أقصد التورية.
تشير هذه إلى أي عنصر في صفحة الويب
الذي نتج عنه استدعاء هذه الدالة.
إذن تعد هذه-- يمكنكم التفكير فيها كمتغير، متغير خاص، الذي
يشير دائمًا إلى أي عنصر تستمع إليه.
وهكذا فإن هذه القيمة فقط توفر لي بعض ضغطات المفاتيح لأنني لا-- تحتاجون إلى
استخدام document.querySelector للوصول إلى هذه القائمة المحددة.
لكننا سنرى هذا مجددًا، ربما، على طول الطريق.
أي أسئلة؟
ودعوني أشير إلى شيء واحد يبدو غبيًا.
يبدو حجم الخط، هنا، مختلفًا عن CSS.
في CSS، ماذا نسمي هذا؟
هل تتذكرون؟
قمنا بإعداد حجم الخط صغير، ومتوسط، وكبير.
لقد كان حجم الخط.
إذن كان هذا أن اليد اليسرى لا تتحدث إلى اليد اليمنى
عندما تم اختراع هذه الأشياء.
تبين أن هذه الشرطة هي JavaScript، ماذا تعني، ربما؟
ناقص أم طرح.
وبالتالي، فإن هذه الصيغة تم تقسمها فقط في سياق JavaScript.
إذن ما الذي فعله البشر؟
قرروا أنه في أي وقت يكون لديكم خاصية CSS هذه الكلمة،
شرطة، شيء، تخلصوا من الشرطة.
واكتبوا الكلمة التالية بأحرف كبيرة.
وسيكون هذا هو الربط في JavaScript-- إذن هذا مجرد مُعطى بسيط
هناك ربما يمكنك وضعه في الاعتبار.
دعونا نلقي نظرة، ربما، على قيمة واحدة أخيرة--
أوه، ماذا عن قيمتين أخيرتين؟
دعونا نمضي قدمًا ونفعل هذا باستخدام blink.html.
إذن في وقت سابق من اليوم، عندما تم أولاً اختراع الويب
وكانت HTML في مراحلها الأولى، كانت هناك علامة رائعة
وهي من المحتمل أن تكون على صفحتي الرئيسية الشخصية
وتُسمى blink وحرفيًا قامت بذلك.
يمكن أن تكون لديكم علامة كانت فتح قوس، B-Li-N-K، قوس مغلق،
ضَع بعض الكلمات، ومن ثم أغلق العلامة، ومن ثم ستقوم صفحتك على الويب بذلك
لجميع الزوار، الأمر الذي أدركه البشر، في النهاية، حسنًا،
هذا أمر سخيف ومزعج حقًا أن ننظر إلى-- تجربة المستخدم السيئة، أو قرينتها.
ولذا قاموا بالتخلص منها.
إنها إحدى العلامات القليلة، على ما أعتقد، من HTML التي تمت إزالتها بالفعل
من قِبل لجنة، بدلاً من إضافتها.
كانت هناك شاشة اسمية في ذلك الوقت، أيضًا، وهي-- مثل علامة المسرح كانت فقط
تقوم بتمرير الكلمات عبر صفحتك.
لذلك من المحتمل أن تكون قد شاهدتَ مواقع ويب مثل هذا الذي يعيد إنشاؤهم بطريقة ما.
ولكن يمكنكم القيام بذلك باستخدام JavaScript.
فكروا في هذا بطريقة منطقية.
نحن نعرف كيف، في التعليمة البرمجية، يمكننا تغيير نمط عنصر ما.
لم نرى كيفية فعل ذلك حتى الآن.
ولكن يمكنكم جعل العنصر يظهر أو يختفي، يظهر أو يختفي.
تبين أن في JavaScript، يمكنكم استخدام مؤقِت.
لديكم حق الوصول إلى الساعة.
ويمكنكم بالفعل كتابة التعليمة البرمجية التي تقول، أتعرفون ماذا؟
كل نصف ثانية، استدعي هذه الدالة.
استدعي هذه الدالة.
وما تفعله هذه الدالة هو تغيير نمط الصفحة
لتظهر أو تختفي، لتظهر أو تختفي.
الآن، من المعتاد أن يتم إنشاؤها في المتصفحات.
ولكن الآن يمكنكم إعادة إنشاؤها باستخدام شيء من هذا القبيل.
ولن أتطرق إلى ما هي التعليمة البرمجية.
لكن هذه ميزة واحدة فقط هناك.
دعونا نلقي نظرة على مثال واحد أخير، على الرغم من أنه مخيف بعض الشي.
ها هي التعليمة البرمجية الأولى.
وتُسمى تحديد الموقع الجغرافي.
هذا هو الأمر الذي يثير الغضب الآن في التطبيقات مثل Uber وWaze
وFind My Friends على هاتف iPhone وما شابه ذلك.
ها هي تعليمة برمجية بشكل نسبي ستكشف
عن مكان وجود مستخدمك في العالم.
الآن، هذا الأمر صعب بعض الشيء هنا.
لكنها تقريبًا هذا الملف، html مع علامة نص.
ولكن يوجد هناك هذا المتغير العالمي المتميز الآخر.
ولن نستخدمه كثيرًا.
وبالفعل، قد لا تستخدمونه أبدًا إذا كنتم لا تهتمون بهذه الميزة.
لكنه يُسمى متصفح، لأسباب تاريخية.
ويحتوي المتصفح على ميزة تُسمى تحديد الموقع الجغرافي.
وميزة تحديد الموقع الجغرافي، ترمز إلى تحديد موقع الناس جغرافيًا،
ويحتوي على دالة تُسمى getCurrentPosition.
وذلك لأسباب لن نتطرق إليها حقًا،
تأخذ دالة كوسيطة.
وهذا هو نموذج JavaScript الشائع جدًا،
ولكن المزيد حول هذا في المشاريع النهائية، ربما.
ستتم كتابة هذا السطر من التعليمة البرمجية بالمستند خط العرض الخاص
بالمستخدم، وإذا انتقلنا إلى اليمين، خط الطول الخاص بها.
إذن هكذا فهمنا لماذا تصبح مريعة.
إذا كنت ستستخدم هذه التعليمة البرمجية في مواقع الويب الخاصة بك وكان المستخدم يزور،
مثلما سأفعل الآن، وينقر فوق الرابط، سيُطلب منه،
هل تريد أن يعرف موقع الويب موقعك؟
أحيانًا، قد تقول نعم.
وأحيانًا، قد تقول لا.
بصراحة، ربما ينقر معظمنا فقط فوق Allow بشكل حدسي
دون التفكير حقًا في ذلك.
ولكن من الواضح، أنني هنا.
دعوني أمضي قدمًا وأظلل ذلك.
دعوني أنتقل إلى maps.google.com لأنه أيًا كان موقع الويب الذي انتقلت إليه للتو،
سواء كان Facebook أو CNN أو--
الكثير من المواقع الإخبارية التي تريد أن تعرف أين أنت.
إذا انتقلتم مثلاً، إلى، fandango.com أو ما شابه ذلك من أجل الحصول على تذاكر السينما،
فقد يريدون معرفة مكانك.
حسنًا، أنت تمنحهم معلومات دقيقة جدًا.
إذا مضيت قدمًا وبحثت عن إحداثيات GPS هذه على Google،
هذا ليس مكان تواجدي.
ما هذا الهراء؟
[LAUGHTER]
لماذا نحن في أوكلاهوما؟
[LAUGHTER]
أنا لا أفهم ما الذي يحدث.
لم يكن هذا جزءًا من الإثبات.
سيكون هذا مُعضِلة كبيرة.
دعونا نوقف تشغيل الإنترنت السلكي هنا.
وعلى ما يبدو، أننا سننتقل من أوكلاهوما اليوم.
لنقم بتشغيل Wi-Fi، الذي سيمنحني فقط
عنوان IP مختلف، وهو طريقة رائعة لربط
بداية المحاضرة معًا.
إذا انتظرت ثانية، يجب أن يكون باللون الأخضر.
هيا-- لا يوجد عنوان IP.
الآن قد تكون هذه الكلمات منطقية أكثر.
هيا.
أعطني عنوان IP.
هيا.
هارفارد-- ها نحن ذا.
يوجد عنوان IP الخاص بي.
دعونا نعيد التحميل.
[LAUGHTER]
سنقوم بإرسال رسالة بريد إلكتروني إلى موظفي تكنولوجيا المعلومات عن ذلك لاحقًا.
لكن كل الإنترنت--
ما يعنيه هذا هو--
لا، هذا غريب حقًا.
لدينا الكثير من اللقطات لقصها من فيديو اليوم.
إذن ما يفعله هذا، مع احتمالية منخفضة،
هو إخبارك بمكان المستخدمين من حيث خطوط الطول والعرض
حتى يمكنكم أن تحددوا مواقعهم الجغرافي، واكتشاف ما هي دور السينما المحلية
أو ما هي الأوقات التي تبدأ فيها بالتخزين،
أعطهم الاتجاهات إلى الأماكن، وما شابه ذلك.
وعلى الرغم من أن ذلك كان من المفترض أن تكون النهاية الحتمية الكبيرة،
فعلى ما يبدو، لم ينجح أي شيء من هذا.
كان اليوم خاطئًا بالكامل.
نحن في أوكلاهوما.
لكن لنتوقف هنا اليوم.
سأبقى هنا لبعض الوقت من أجل الأسئلة.
سأراكم في المرة القادمة.