1
00:00:00,000 --> 00:00:03,479
[MUSIC PLAYING]

2
00:00:03,479 --> 00:00:50,960


3
00:00:50,960 --> 00:00:52,830
ديفيد ج. مالان: هذه هي دورة CS50.

4
00:00:52,830 --> 00:00:56,927
واليوم، ننتقل من عالم
لغة C، ومؤشراتها،

5
00:00:56,927 --> 00:01:00,010
وبعض المعاناة التي قد شعرت بها
خلال الأسابيع القليلة الماضية

6
00:01:00,010 --> 00:01:02,560
إلى عالم مألوف أكثر،
من برمجة الويب.

7
00:01:02,560 --> 00:01:05,740
سأستخدم متصفحات الويب وأجهزة الهاتف
المحمول وأجهزة الكمبيوتر المحمولة وأجهزة كمبيوتر سطح المكتب

8
00:01:05,740 --> 00:01:08,230
وسأنشىء تجربة 
بيانية وتفاعلية أكثر

9
00:01:08,230 --> 00:01:10,762
من تلك التي أتاحتها لنا النوافذ الطرفية 
التقليدية لسطر الأوامر.

10
00:01:10,762 --> 00:01:13,720
ومع ذلك، سنرى على طول الطريق
أن الكثير من الأفكار التي كنا

11
00:01:13,720 --> 00:01:16,300
نكتشفها خلال الأسابيع القليلة الماضية
ستظل معنا.

12
00:01:16,300 --> 00:01:18,216
وسنراها
بطرق مختلفة.

13
00:01:18,216 --> 00:01:21,580
سنراها في شكل 
اللغات والصيغ الأخرى.

14
00:01:21,580 --> 00:01:24,220
لكن الأفكار ستبقى
تذكرنا قليلاً بما

15
00:01:24,220 --> 00:01:26,330
فعلناه سابقًا في الأسبوع 0.

16
00:01:26,330 --> 00:01:29,950
إذن قد تكون TCP/IP 
هي أكثر الطرق التقنية

17
00:01:29,950 --> 00:01:34,380
وذات مستوى منخفض للغاية يمكننا من خلالها جعل
الويب أمرًا غير مثير للاهتمام.

18
00:01:34,380 --> 00:01:37,600
ولكن من المحتمل أنكم، على الأقل،
رأيتم هذا الاختصار في مكان ما، ربما

19
00:01:37,600 --> 00:01:40,900
على جهاز Mac، جهاز الكمبيوتر الشخصي، 
ربما إعداد ما ذات مرة.

20
00:01:40,900 --> 00:01:44,080
وهذا، في الواقع، يشير فقط
إلى بروتوكول

21
00:01:44,080 --> 00:01:47,050
أو، في الحقيقة، إلى زوج من 
البروتوكولات، أنواع اللغات

22
00:01:47,050 --> 00:01:50,230
التي يتحدث بها الكمبيوتر من
أجل إرسال المعلومات

23
00:01:50,230 --> 00:01:51,900
من جهاز كمبيوتر إلى آخر.

24
00:01:51,900 --> 00:01:55,042
وهذا ما يجعل معظم
شبكات الإنترنت تعمل اليوم.

25
00:01:55,042 --> 00:01:57,250
في الواقع يمكنك إيقاف جهاز الكمبيوتر
المحمول وكمبيوتر سطح المكتب

26
00:01:57,250 --> 00:02:01,210
والتحدث إلى أي كمبيوتر على الإنترنت
بسبب هذه البروتوكولات،

27
00:02:01,210 --> 00:02:04,870
وهي تقاليد قرر البشر
وجودها منذ بضع سنوات.

28
00:02:04,870 --> 00:02:07,350
وتحدّد فقط كيفية
التواصل البيني بين أجهزة الكمبيوتر.

29
00:02:07,350 --> 00:02:09,130
ولكن دعونا نجعلها مألوفة أكثر.

30
00:02:09,130 --> 00:02:14,290
في عالمنا البشري، من المحتمل أن تقوم،
في مرحلة ما، بإرسال رسالة أو استلامها.

31
00:02:14,290 --> 00:02:16,090
هذه الأيام، ربما يكون
الأمر إلكترونيًا أكثر.

32
00:02:16,090 --> 00:02:17,950
ولكن، على الأقل،
استلمت رسالة كهذه

33
00:02:17,950 --> 00:02:20,590
ربما من شخص، ربما
من جد أو ما شابه ذلك،

34
00:02:20,590 --> 00:02:22,180
أو أرسلت شيئًا بنفسك.

35
00:02:22,180 --> 00:02:26,020
ولكن قبل أن تتمكّن بالفعل من إرسال
تلك الرسالة إلى المستلم

36
00:02:26,020 --> 00:02:30,040
ووضعها خلال البريد الأمريكي أو
خدمات البريد الدولي،

37
00:02:30,040 --> 00:02:31,791
ما الذي نحتاج إلى كتابته على الظرف؟

38
00:02:31,791 --> 00:02:32,540
الجمهور: العنوان.

39
00:02:32,540 --> 00:02:34,498
ديفيد ج. مالان: نعم--
شيء يشبه العنوان.

40
00:02:34,498 --> 00:02:36,292
وما الذي يتكون منه العنوان؟

41
00:02:36,292 --> 00:02:37,085
الجمهور: الاسم.

42
00:02:37,085 --> 00:02:37,960
ديفيد ج. مالان: الاسم.

43
00:02:37,960 --> 00:02:38,840
الحضور: أين يسكُن.

44
00:02:38,840 --> 00:02:40,131
ديفيد ج. مالان: أين يسكُن.

45
00:02:40,131 --> 00:02:41,020
الجمهور: [INAUDIBLE]

46
00:02:41,020 --> 00:02:44,640
ديفيد ج. مالان: إذن حيث يتم تضمين
عنوان الشارع والمدينة،

47
00:02:44,640 --> 00:02:48,070
الولاية، أو الرمز البريدي في الولايات المتحدة، 
أو الرمز البريدي، بشكل عام،

48
00:02:48,070 --> 00:02:50,242
والبلد، إذا أردت
حقًا أن تكون محددًا.

49
00:02:50,242 --> 00:02:52,450
ولذا كل ذلك يُكتب
على الجهة الأمامية من الظرف،

50
00:02:52,450 --> 00:02:54,590
بشكل عام في منتصف الظرف.

51
00:02:54,590 --> 00:02:58,375
ومن ثم ماذا يُوضع غالبًا في أعلى 
الزاوية اليسرى في معظم البلدان؟

52
00:02:58,375 --> 00:02:59,250
الجمهور: عنوان المُرسِل.

53
00:02:59,250 --> 00:02:59,550
ديفيد ج. مالان: أجل.

54
00:02:59,550 --> 00:03:02,010
إذن عنوان المُرسِل-- بحيث
إذا حدث خطأ ما،

55
00:03:02,010 --> 00:03:05,280
وإن كان ذلك نادرًا ما يحدث، تتم إعادة هذه الرسالة--
يمكن إرجاعها إليك،

56
00:03:05,280 --> 00:03:08,640
ويعرف المستلِم أيضًا
على الفور مَن الذي أرسل إليه بالفعل

57
00:03:08,640 --> 00:03:09,270
الرقم.

58
00:03:09,270 --> 00:03:12,120
إذن هذه معلومات كافية
للحصول على رسالة من النقطة أ

59
00:03:12,120 --> 00:03:14,910
إلى النقطة ب لأن هذه 
العناوين، هذه العناوين البريدية

60
00:03:14,910 --> 00:03:19,950
في عالمنا البشري، تحدد بشكل فريد
المنازل أو المباني أو الأشخاص،

61
00:03:19,950 --> 00:03:21,870
بشكل منطقي، في العالم.

62
00:03:21,870 --> 00:03:27,030
لذا الآن، نحن في 45 Quincy Street،
كامبريدج، ماساشوستس، 02138، الولايات المتحدة الأمريكية.

63
00:03:27,030 --> 00:03:30,210
من المحتمل أن هذا تحديد كافٍ
لأي شخص في العالم

64
00:03:30,210 --> 00:03:33,660
ليقوم بإرسال بطاقة بريدية لنا تقول
"Hello world" في شكل خطي

65
00:03:33,660 --> 00:03:34,980
ونقلها إلى هذا المبنى.

66
00:03:34,980 --> 00:03:37,646
وفي الوقت نفسه، إذا أردنا إرسال
شيء إلى مركز العلوم،

67
00:03:37,646 --> 00:03:42,070
1 Oxford Street، كامبريدج، ماساشوستس،
02138، الولايات المتحدة الأمريكية، فهذا هو عنوانه الفريد.

68
00:03:42,070 --> 00:03:45,420
لذلك من المنطقي أن أجهزة الكمبيوتر،
بما في ذلك أجهزة Mac وأجهزة الكمبيوتر الشخصية

69
00:03:45,420 --> 00:03:47,370
وهواتف Android 
وiPhone وما شابه ذلك،

70
00:03:47,370 --> 00:03:50,707
تحتوي جميعها على عناوين فريدة،
أيضًا، لأنها، بعد كل شيء، تريد

71
00:03:50,707 --> 00:03:51,540
التواصل.

72
00:03:51,540 --> 00:03:54,390
وتحتاج إلى الحصول على وحدات البت، الأصفار
والواحدات، من النقطة أ إلى النقطة ب.

73
00:03:54,390 --> 00:03:58,290
لكنها ليست أكثر إطنابًا نوعًا ما
كأنواع العناوين تلك.

74
00:03:58,290 --> 00:04:01,650
تحتوي أجهزة الكمبيوتر على ما
قد تعرفونه باسم عناوين IP،

75
00:04:01,650 --> 00:04:03,600
عناوين بروتوكول الإنترنت.

76
00:04:03,600 --> 00:04:06,000
وهذا يعني فقط أن
البشر قرروا منذ سنوات

77
00:04:06,000 --> 00:04:08,160
أن كل جهاز كمبيوتر موصل
بالإنترنت سيحتوي

78
00:04:08,160 --> 00:04:10,690
على رقم فريد لتحديده.

79
00:04:10,690 --> 00:04:15,530
وهذا الرقم هو بشكل عام بصيغة
شيء ما نقطة شيء ما نقطة شيء ما

80
00:04:15,530 --> 00:04:16,709
نقطة شيء ما.

81
00:04:16,709 --> 00:04:21,209
وكما تبين، كل هذه 
الأشياء بين النقاط

82
00:04:21,209 --> 00:04:24,599
عبارة عن رقم من 0 إلى 255.

83
00:04:24,599 --> 00:04:26,640
والآن، بعد كل هذه الأسابيع
من دورة CS50، من الممكن أن

84
00:04:26,640 --> 00:04:28,830
يصل عقلك على الأرجح إلى إجابة سريعة.

85
00:04:28,830 --> 00:04:33,060
كم عدد وحدات البت التي يجب 
أن تأخذها كل هذه الأرقام

86
00:04:33,060 --> 00:04:35,430
إذا كان النطاق من 0 إلى 255؟

87
00:04:35,430 --> 00:04:36,240
ثمانية.

88
00:04:36,240 --> 00:04:37,830
إذن ثمانية-- ولماذا هي ثمانية؟

89
00:04:37,830 --> 00:04:40,129
إذن كان 256 سمةً متكررة.

90
00:04:40,129 --> 00:04:41,670
وإذا لم تتذكروا ذلك، فلا بأس.

91
00:04:41,670 --> 00:04:44,650
ولكن نعم، هذه هي ثماني وحدات بت،
ثماني وحدات بت، ثماني وحدات بت، ثماني وحدات بت،

92
00:04:44,650 --> 00:04:48,210
مما يعني أن الأرقام التي نحن البشر
استخدمناها لتحديد أجهزة الكمبيوتر لدينا بشكل فريد

93
00:04:48,210 --> 00:04:50,357
على الإنترنت هي 32 وحدة بت في المجمل.

94
00:04:50,357 --> 00:04:53,190
حسنًا، ربما هناك رقم 
آخر قد يتبادر إلى عقلنا تقريبًا.

95
00:04:53,190 --> 00:05:01,170
إذا كنت قد حصلت على 32 وحدة بت، فإلى أي مدى
يمكنك العدّ، بشكل عام، من 0 إلى--

96
00:05:01,170 --> 00:05:03,022
سمعت همهمة--

97
00:05:03,022 --> 00:05:03,980
الجمهور: أربعة مليارات.

98
00:05:03,980 --> 00:05:05,188
ديفيد ج. مالان: أربعة مليارات.

99
00:05:05,188 --> 00:05:06,460
إذن، إنها أربعة مليارات تقريبًا.

100
00:05:06,460 --> 00:05:10,360
وقد ذكرنا ذلك في الأسبوع 0
باستخدام دليل هاتف المكوّن من أربعة مليارات صفحة،

101
00:05:10,360 --> 00:05:11,050
تخيلوا ذلك.

102
00:05:11,050 --> 00:05:14,290
إذن أربعة مليارات هي تقريبًا ما
يمكنك عدّه باستخدام 32 وحدة بت.

103
00:05:14,290 --> 00:05:19,120
لذا هذا يعني أن هناك أربعة
مليارات جهاز كمبيوتر، أو أجهزة، أو أي شيء

104
00:05:19,120 --> 00:05:21,504
على الإنترنت، تم تحديدها 
بشكل فريد-- كذبة

105
00:05:21,504 --> 00:05:24,670
بيضاء صغيرة لأن هذا ليس كافيًا في الواقع 
هذه الأيام مع جميع الأجهزة

106
00:05:24,670 --> 00:05:26,003
وجميع البشر في العالم.

107
00:05:26,003 --> 00:05:27,540
لكننا وجدنا حلولاً بديلة لذلك.

108
00:05:27,540 --> 00:05:28,348
أي سؤال؟

109
00:05:28,348 --> 00:05:31,554
الجمهور: [INAUDIBLE]

110
00:05:31,554 --> 00:05:40,147


111
00:05:40,147 --> 00:05:42,230
ديفيد ج. مالان: ولكن فقط
نصفهم في ذلك الوقت.

112
00:05:42,230 --> 00:05:42,730
لا.

113
00:05:42,730 --> 00:05:45,540
إذن نعم، إذا خطط البشر 
بحلول عام 2023 أو أيًا كان العام

114
00:05:45,540 --> 00:05:47,380
لتكون الأجهزة بالكامل تقريبًا
على شبكة الإنترنت، وتوجد

115
00:05:47,380 --> 00:05:50,670
بضعة-- مليارات ومليارات
من الأشخاص، ثمانية مليارات أو ما يقاربها،

116
00:05:50,670 --> 00:05:53,430
إذن سيمثل هذا مشكلة لهذا النظام.

117
00:05:53,430 --> 00:05:55,952
ولحسن الحظ، منذ 20 عامًا
أدرك فيها الأشخاص أن،

118
00:05:55,952 --> 00:05:57,910
هذا، بشكل حسابي، 
سيشكل مشكلة.

119
00:05:57,910 --> 00:06:00,972
ولذا يتوفر بالفعل إصدار أحدث
من IP، بروتوكول الإنترنت.

120
00:06:00,972 --> 00:06:03,180
هذا هو الإصدار 4 الذي
نتحدث عنه، وهو ما يزال

121
00:06:03,180 --> 00:06:04,710
موجودًا بشكل كبير في العالم.

122
00:06:04,710 --> 00:06:10,570
لا يستخدم الإصدار 6 في الواقع 32 وحدة بت،
ولكن 128 وحدة بت، وهو رقم كبير.

123
00:06:10,570 --> 00:06:13,005
ولا يمكنني حتى نطق
مدى كبر الرقم.

124
00:06:13,005 --> 00:06:14,130
إذن نحن نفكر في الأمر.

125
00:06:14,130 --> 00:06:16,255
وأكبر الشركات
في العالم قد انتقلت

126
00:06:16,255 --> 00:06:19,510
بالفعل إلى استخدام عناوين أكبر من
عناوين وحدات البت 32 هذه.

127
00:06:19,510 --> 00:06:22,830
ولكن هذه ما تزال شائعة نوعًا ما في
أي جهاز تقريبًا قد تمتلكه أو تراه

128
00:06:22,830 --> 00:06:24,610
في الحرم الجامعي أو في أي مكان آخر.

129
00:06:24,610 --> 00:06:27,502
لذلك إذا كان لديك عنوان
فريد، فهذا يكفي لوضعه

130
00:06:27,502 --> 00:06:28,710
على الجهة الأمامية من الظرف.

131
00:06:28,710 --> 00:06:32,520
ويتبين أنك إذا كنت
تقوم بإرسال رسالة بريد إلكتروني أو رسالة دردشة

132
00:06:32,520 --> 00:06:35,890
أو أيًا كانت، فأنت، وأيضًا-- جهاز Mac أو
الكمبيوتر الشخصي أو الهاتف لديك-- لديكم عنوان IP.

133
00:06:35,890 --> 00:06:39,570
لذا هذا أمر كافٍ لوضعه في أعلى 
الزاوية اليسرى، من الناحية النظرية.

134
00:06:39,570 --> 00:06:41,760
لكنك بحاجة إلى جزء واحد
آخر من المعلومات.

135
00:06:41,760 --> 00:06:47,040
تبين أنه يوجد على الإنترنت،
خوادم، أجهزة كمبيوتر،

136
00:06:47,040 --> 00:06:49,680
تستمع فقط 
باستمرار للأشخاص للاتصال

137
00:06:49,680 --> 00:06:53,190
بهم، مثلنا، والتحقّق من
البريد الإلكتروني لدينا وزيارة Facebook

138
00:06:53,190 --> 00:06:55,320
و Gmail ومواقع الويب الأخرى المماثلة.

139
00:06:55,320 --> 00:06:57,480
وهذه الخوادم، على الرغم من ذلك،
يمكنها القيام بأشياء متعددة.

140
00:06:57,480 --> 00:06:58,890
لدى Google الكثير من الشركات.

141
00:06:58,890 --> 00:07:02,220
والتي تمنحك البريد الإلكتروني وخدمات
الويب ومؤتمرات الفيديو

142
00:07:02,220 --> 00:07:04,590
والعديد من الخدمات الأخرى 
القائمة على الإنترنت.

143
00:07:04,590 --> 00:07:08,070
وهكذا قرر البشر أيضًا، منذ
سنوات، تحديد

144
00:07:08,070 --> 00:07:12,880
جميع هذه الخدمات الممكنة 
على الإنترنت باستخدام أرقام فريدة فقط--

145
00:07:12,880 --> 00:07:15,100
أسماء أيضًا، ولكنها أيضًا أرقام فريدة من نوعها.

146
00:07:15,100 --> 00:07:17,606
وتبين أن البشر
قرروا منذ سنوات

147
00:07:17,606 --> 00:07:20,730
أنك عند زيارتك أحد مواقع الويب، فهناك
جزء آخر من المعلومات

148
00:07:20,730 --> 00:07:23,520
تمت كتابته على هذا الظرف، وليس
فقط عنوان IP الخاص بالخادم

149
00:07:23,520 --> 00:07:26,100
الذي تحاول الاتصال
به، ولكن أيضًا بالرقم 80

150
00:07:26,100 --> 00:07:31,420
لأن 80 يعادل HTTP، الاختصار
الذي يعد مألوفًا لكم الآن.

151
00:07:31,420 --> 00:07:33,570
وهذا يدل فقط على أن هذا
هو طلب ويب.

152
00:07:33,570 --> 00:07:37,860
إذن فقد قال، بدلاً من ذلك، شيئًا مثل
25، هذا هو SMTP، وهو البريد الإلكتروني.

153
00:07:37,860 --> 00:07:40,260
حتى يشير ذلك إلى أنه توجد
داخل هذا الظرف الافتراضي

154
00:07:40,260 --> 00:07:42,810
بالفعل رسالة بريد إلكتروني
مرسلة إلى Gmail أو ما شابه.

155
00:07:42,810 --> 00:07:44,326
وتوجد الكثير من الأرقام.

156
00:07:44,326 --> 00:07:46,950
لكن المغزى هو أنه توجد
أرقام تقوم بالتعريف بشكل فريد.

157
00:07:46,950 --> 00:07:50,880
لذلك عندما يحصل Google على ظرف افتراضي،
مجرد مجموعة كاملة من وحدات البت، أصفار

158
00:07:50,880 --> 00:07:56,310
وواحدات، بطريقة ما، يحتوي على 
عنوان IP عليه كالوجهة،

159
00:07:56,310 --> 00:07:59,970
كما يعرف أيضًا، أوه، هل هذا بريد إلكتروني
أو هل هذه رسالة مؤتمر فيديو

160
00:07:59,970 --> 00:08:02,469
أو هل هذه رسالة دردشة
أو أي شيء آخر.

161
00:08:02,469 --> 00:08:04,260
إذن فقط لجعل هذا
واقعيًا أكثر، فإذا كنت

162
00:08:04,260 --> 00:08:07,800
سأمضي قدمًا وأدوّن
هذا، عنوان IP الخاص بي الذي

163
00:08:07,800 --> 00:08:11,640
سأرسل إليه شيئًا ما ربما يكون 1.2.3.4.

164
00:08:11,640 --> 00:08:14,520
بشكل عام، سأقوم، بعد ذلك،
بإرساله إلى، مثلاً، المنفذ 80.

165
00:08:14,520 --> 00:08:20,470
ربما عنوان IP الخاص بي هو 5.6.7.8.

166
00:08:20,470 --> 00:08:22,010
ولذا ظرف--

167
00:08:22,010 --> 00:08:25,260
سأكون عند [INAUDIBLE]---- 
وسيحصل هو فقط بالفعل على تلك الأجزاء

168
00:08:25,260 --> 00:08:27,720
من المعلومات-- عنوان
الوجهة، نقطتين،

169
00:08:27,720 --> 00:08:30,870
ومن ثم رقم الخدمة
الذي يهمك، HTTP أو أيًا كان،

170
00:08:30,870 --> 00:08:33,460
ثم عنوان IP الخاص بك،
والمزيد من المعلومات.

171
00:08:33,460 --> 00:08:36,690
لكن المغزى هو أن كلاً من المُرسِل
والمستلِم في العناوين--

172
00:08:36,690 --> 00:08:40,809
هذا كافٍ للحصول على بيانات من 
جهاز كمبيوتر واحد في العالم إلى آخر.

173
00:08:40,809 --> 00:08:42,309
وهناك الكثير من التعقيدات الأخرى.

174
00:08:42,309 --> 00:08:44,530
هذا مجال كامل في
علوم الكمبيوتر للشبكات،

175
00:08:44,530 --> 00:08:45,821
إذا كنتم تحبون هذه الأشياء.

176
00:08:45,821 --> 00:08:49,170
ولكن هكذا، وباختصار، يحصل الإنترنت
على بيانات من النقطة أ

177
00:08:49,170 --> 00:08:51,420
إلى النقطة ب. ويمثل هذا الظرف
فقط

178
00:08:51,420 --> 00:08:53,530
مجموعة كاملة من الأصفار والواحدات.

179
00:08:53,530 --> 00:08:55,020
ولكن ماذا بداخل هذا الظرف؟

180
00:08:55,020 --> 00:08:57,810
وهذا ما سنركز عليه
اليوم وفي الأسابيع المقبلة.

181
00:08:57,810 --> 00:09:00,120
إنه المحتوى في الواقع.

182
00:09:00,120 --> 00:09:03,220
إنها الرسالة الإلكترونية التي تهتم بها
أو صفحة الويب التي تهتم بها.

183
00:09:03,220 --> 00:09:06,390
وكيف يمكننا بالفعل أن نقرر
أي خادم نتصل به؟

184
00:09:06,390 --> 00:09:10,200
حسنًا، عادة، قد تنتقل إلى
ما يسمى بـ URL، محدد مواقع الموارد

185
00:09:10,200 --> 00:09:11,180
المُوحّد.

186
00:09:11,180 --> 00:09:14,460
عنوان URL هو مجرد عنوان خادم.

187
00:09:14,460 --> 00:09:18,690
وسيكون-- بالفعل،
هو المستلِم النهائي لهذا الظرف

188
00:09:18,690 --> 00:09:20,040
الذي نحاول الإرسال إليه.

189
00:09:20,040 --> 00:09:22,264
لكن هذا، بالطبع،
ليس عنوان IP.

190
00:09:22,264 --> 00:09:24,180
فهذا لا يتبع نمط 
شيء ما نقطة

191
00:09:24,180 --> 00:09:25,830
شيء ما نقطة شيء ما نقطة.

192
00:09:25,830 --> 00:09:28,680
لذا إذا كنا نحن البشر جميعًا
نكتب باستمرار أشياء من هذا القبيل

193
00:09:28,680 --> 00:09:31,320
في متصفحاتنا، على الرغم من أن
القصة الكاملة التي أخبرنا بها فقط

194
00:09:31,320 --> 00:09:35,970
عن الأرقام وأرقام المنفذ
والأشياء ذات المستوى المنخفض،

195
00:09:35,970 --> 00:09:37,260
فأين هو الاتصال؟

196
00:09:37,260 --> 00:09:40,560
هل يعرف أحد بالفعل
كيف تصل من كتابة هذا

197
00:09:40,560 --> 00:09:46,370
إلى مجموعة من الأصفار والواحدات التي
تتم معالجتها بطريقة أو بأخرى باستخدام الأرقام؟

198
00:09:46,370 --> 00:09:47,000
DNS، لقد سمعت ذلك.

199
00:09:47,000 --> 00:09:48,360
ما هو DNS؟

200
00:09:48,360 --> 00:09:48,910
نعم.

201
00:09:48,910 --> 00:09:52,490
إذن تبين أن هناك تقنية
في العالم-- نظام أسماء المجالات،

202
00:09:52,490 --> 00:09:53,180
في الواقع.

203
00:09:53,180 --> 00:09:56,870
وDNS، نظام أسماء المجالات، هو مجرد
نوع من أنواع الخدمات على الإنترنت

204
00:09:56,870 --> 00:09:58,790
التي تحتفظ بها جامعة هارفارد
وجامعة ييل،

205
00:09:58,790 --> 00:10:01,160
وشركتا كومكاست وفيرايزون 
والعديد من كبار المشغّلين

206
00:10:01,160 --> 00:10:03,410
في العالم،
هدفهم في الحياة هو تشغيل

207
00:10:03,410 --> 00:10:07,940
الخوادم التي تقوم بتحويل ما يسمى 
بأسماء المجالات إلى عناوين IP،

208
00:10:07,940 --> 00:10:12,980
والعكس، حتى عندما نكتب نحن البشر
www.example.com في متصفح،

209
00:10:12,980 --> 00:10:17,390
إنه جهاز Mac أو جهاز الكمبيوتر الشخصي أو الهاتف الذي 
يتصل بخادم محلي، خادم DNS،

210
00:10:17,390 --> 00:10:20,780
في الحرم الجامعي أو الجامعة
أو في شقة محلية أو أيًا كان،

211
00:10:20,780 --> 00:10:24,105
ويطلب عنوان IP الخاص 
بـ www.example.com.

212
00:10:24,105 --> 00:10:26,480
ثم ما يفعله جهاز Mac
أو الكمبيوتر الشخصي أو الهاتف

213
00:10:26,480 --> 00:10:29,060
هو كتابة ذلك 
العنوان على الظرف.

214
00:10:29,060 --> 00:10:32,990
ولكنه يضع طلبًا لصفحة
ويب محددة داخل الظرف.

215
00:10:32,990 --> 00:10:35,370
وعندما تستقبل
استجابة من ذلك الخادم،

216
00:10:35,370 --> 00:10:38,120
سيكون عبارة عن عنوانك
الموجود في الجزء الأمامي من الظرف.

217
00:10:38,120 --> 00:10:39,828
وسيكون ما بداخل
الظرف

218
00:10:39,828 --> 00:10:41,840
هو صفحة الويب أو البريد الإلكتروني
أو رسالة الدردشة

219
00:10:41,840 --> 00:10:45,360
أو أيًا كان الذي كنتم
تحاولون الوصول إليه بالفعل.

220
00:10:45,360 --> 00:10:47,905
لذلك دعونا نقسّم هذا
إلى بعض مكوناته.

221
00:10:47,905 --> 00:10:50,030
أولاً وقبل كل شيء، هذا الشيء
المظلل باللون الأصفر هنا

222
00:10:50,030 --> 00:10:51,431
هو رسميًا اسم المجال.

223
00:10:51,431 --> 00:10:53,180
من المحتمل أنكم جميعًا قد استخدمتم
هذا المصطلح من قبل.

224
00:10:53,180 --> 00:10:55,810
عادةً ما يكون شيء نقطة شيء.

225
00:10:55,810 --> 00:10:59,300
يشير "Com" عادة إلى التجارة
أو تجاري، على الرغم من أنه يمكن لأي شخص،

226
00:10:59,300 --> 00:11:01,760
استخدام .com لأي غرض.

227
00:11:01,760 --> 00:11:07,520
في وقت سابق، كانت
com. ،net. ،org. ،edu. ،gov. ،mil. مألوفة للغاية.

228
00:11:07,520 --> 00:11:09,650
وكانت تعد كل هذه الاختصارات مرتكزة جدًا على
الولايات المتحدة لأنها

229
00:11:09,650 --> 00:11:12,050
اتجهت لأن تكون الولايات 
المتحدة هي البلد التي بدأت بالفعل

230
00:11:12,050 --> 00:11:14,330
في هذا الاستخدام من الإنترنت وDNS.

231
00:11:14,330 --> 00:11:16,440
لكن الآن من المؤكد أنها تنتشر عالميًا.

232
00:11:16,440 --> 00:11:22,190
وبالتالي توجد المئات الآن مما يسمى
بمجالات TLD، مجالات المستوى الأعلى.

233
00:11:22,190 --> 00:11:26,150
وتتجه لأن تكون من ثلاثة أحرف
أو أكثر إذا كانت تدل على كلمة.

234
00:11:26,150 --> 00:11:28,730
وتميل إلى أن تكون من حرفين
إذا كانت تدل على بلد،

235
00:11:28,730 --> 00:11:32,150
مثل US هو اختصار الولايات 
المتحدة، وJP اليابان، وUK--

236
00:11:32,150 --> 00:11:33,920
المملكة المتحدة، وهكذا.

237
00:11:33,920 --> 00:11:37,500
هذه مجرد رموز للبلدان
وهي تفعل الشيء نفسه.

238
00:11:37,500 --> 00:11:39,380
لكن ما هذا الذي يوجد في المقدمة؟

239
00:11:39,380 --> 00:11:44,761
شبكة الويب العالمية، أو www، هنا،
بشكل عام أكثر، هي مثال على ماذا،

240
00:11:44,761 --> 00:11:45,635
من الناحية الفنية؟

241
00:11:45,635 --> 00:11:48,490


242
00:11:48,490 --> 00:11:49,210
ما هذا؟

243
00:11:49,210 --> 00:11:52,907


244
00:11:52,907 --> 00:11:53,740
ما الذي يعنيه ذلك؟

245
00:11:53,740 --> 00:11:54,260
أجل؟

246
00:11:54,260 --> 00:11:55,020
الجمهور: مجال فرعي.

247
00:11:55,020 --> 00:11:57,100
DAVID J. MALAN: إنه مجال فرعي--
إحدى طرق التفكير في ذلك.

248
00:11:57,100 --> 00:11:59,160
في الواقع، جميعكم،
الكثير منكم هنا، من المحتمل

249
00:11:59,160 --> 00:12:03,480
أن يكون لديه عناوين بريد إلكتروني بالصيغة
college.harvard.edu أو g.harvard.edu

250
00:12:03,480 --> 00:12:04,080
أو ما شابه ذلك.

251
00:12:04,080 --> 00:12:05,070
هذه هي المجالات الفرعية.

252
00:12:05,070 --> 00:12:07,350
جامعة هارفارد هي
مكان كبير حيث تقوم بالفعل

253
00:12:07,350 --> 00:12:11,880
بوضع الجميع في فئات مختلفة من
المجالات، والمعروفة باسم المجالات الفرعية.

254
00:12:11,880 --> 00:12:16,020
وقد تكون كلمة أو عبارة
تأتي قبل اسم المجال هنا.

255
00:12:16,020 --> 00:12:18,270
ولكنها قد تشير أيضًا إلى
اسم الخادم.

256
00:12:18,270 --> 00:12:21,720
لذا إذا كانت example.com شركة أو
أعمال تجارية تحاول زيارة

257
00:12:21,720 --> 00:12:23,910
موقع الويب الخاص بها، مجالها هو example.com.

258
00:12:23,910 --> 00:12:26,130
وقاموا بتسمية اسم المجال
منذ بضعة أعوام.

259
00:12:26,130 --> 00:12:29,460
وأنفقوا بضعة دولارات كل عام،
على الأرجح، وجددوا الرسوم لذلك.

260
00:12:29,460 --> 00:12:33,200
ولديها على الأقل
خادم واحد اسمه هو www.

261
00:12:33,200 --> 00:12:34,920
وهذا موجود داخل المجال الخاص بها.

262
00:12:34,920 --> 00:12:37,510
قد يكون لديها العشرات أو
المئات أو خادم واحد فقط.

263
00:12:37,510 --> 00:12:38,890
كل واحد منها يمكن أن يكون لديه اسم.

264
00:12:38,890 --> 00:12:40,800
إذن هذا هو بشكل عام ما
يسمى اسم المُضِيف.

265
00:12:40,800 --> 00:12:43,410
لذلك عندما يتوفر عنوان البريد الإلكتروني،
فإنه غالبًا ما يشير إلى مجال فرعي،

266
00:12:43,410 --> 00:12:45,360
مثل فئة من العناوين.

267
00:12:45,360 --> 00:12:49,140
ولكن عندما يكون في عنوان URL كهذا،
وهو ما يشير إلى آلة محددة على الأرجح

268
00:12:49,140 --> 00:12:51,660
أو مجموعة محددة من
الآلات-- بشكل تقليدي،

269
00:12:51,660 --> 00:12:53,670
خوادم الويب التي تديرها الشركة--

270
00:12:53,670 --> 00:12:55,085
لا يجب أن يُطلق عليها www.

271
00:12:55,085 --> 00:12:59,820
ولأغراض تاريخية، يميل MIT
إلى استخدام web.mit.edu.

272
00:12:59,820 --> 00:13:03,600
لكن يستخدم الجميع تقريبًا في العالم
www أو لا شيء على الإطلاق.

273
00:13:03,600 --> 00:13:04,690
لأنه ليس مطلوبًا.

274
00:13:04,690 --> 00:13:09,240
في الواقع يمكنكم زيارة فقط العديد من
المواقع دون زيارة أي اسم مُضِيف.

275
00:13:09,240 --> 00:13:13,420
وتعمل فقط، أيضًا، بفضل
DNS الذي يمنحكم عنوان IP.

276
00:13:13,420 --> 00:13:17,715
ولكن ماذا عن الملف
الذي تطلبه بالفعل؟

277
00:13:17,715 --> 00:13:19,590
ما الذي تعنيه في الواقع
زيارة عنوان URL هذا؟

278
00:13:19,590 --> 00:13:23,970
حسنًا، على العديد من الخوادم، يعني هذا
ضمنيًا، مرحبًا، خادم الويب،

279
00:13:23,970 --> 00:13:27,970
أعطني ملفًا، فقط ملفًا 
نصيًا، اسمه index.html.

280
00:13:27,970 --> 00:13:30,090
هذا هو اسم
الملف، ملف نصي،

281
00:13:30,090 --> 00:13:33,420
يمكنك إنشاؤه باستخدام CS50
IDE أو حتى Notepad أو TextEdit

282
00:13:33,420 --> 00:13:36,642
على جهاز Mac أو الكمبيوتر الشخصي الذي 
يحتوي على لغة تسمى HTML.

283
00:13:36,642 --> 00:13:38,850
وسنلقي نظرة على
تلك اللغة بعد قليل.

284
00:13:38,850 --> 00:13:40,600
والبعض منكم قد
رأوها من قبل.

285
00:13:40,600 --> 00:13:43,656
ولكن اللغة التي تتم كتابة 
صفحات الويب بها هي HTML.

286
00:13:43,656 --> 00:13:46,530
وسنقوم بمنحكم كتل
البناء، من الناحية النظرية والعملية،

287
00:13:46,530 --> 00:13:47,395
لهذا اليوم.

288
00:13:47,395 --> 00:13:50,020
ستستخدمونها خلال الأسابيع
القادمة في العديد من السياقات المختلفة.

289
00:13:50,020 --> 00:13:53,250
لكننا سنستخدمها، في النهاية، لإنشاء
محتويات مواقع الويب.

290
00:13:53,250 --> 00:13:56,760
ولكن اليوم ، سنركز
على هذا أولاً، HTTP.

291
00:13:56,760 --> 00:13:59,430
هل يعرف أي شخص ما الذي يعنيه؟

292
00:13:59,430 --> 00:13:59,930
أجل؟

293
00:13:59,930 --> 00:14:00,870
الجمهور: النص التشعبي.

294
00:14:00,870 --> 00:14:01,745
ديفيد ج. مالان: أجل.

295
00:14:01,745 --> 00:14:03,062
بروتوكول نقل النص التشعبي.

296
00:14:03,062 --> 00:14:04,770
وبصراحة، في معظم
التقنيات، حيث

297
00:14:04,770 --> 00:14:09,137
لا تمثل الاختصارات
كل هذه الأهمية،

298
00:14:09,137 --> 00:14:10,720
بل، في الحقيقة، ما تقوم به التقنية.

299
00:14:10,720 --> 00:14:13,160
وفي هذه الحالة، بروتوكول
نقل النص التشعبي--

300
00:14:13,160 --> 00:14:14,580
سنرى النص التشعبي في غضون لحظات.

301
00:14:14,580 --> 00:14:16,860
هذه طريقة أخرى لقول HTML.

302
00:14:16,860 --> 00:14:20,530
بروتوكول النقل-- P لبروتوكول
هذه كلمة طنانة أخرى.

303
00:14:20,530 --> 00:14:23,440
إذن البروتوكولات ليست
لغات البرمجة، في حد ذاتها.

304
00:14:23,440 --> 00:14:24,840
هي تقاليد.

305
00:14:24,840 --> 00:14:26,342
ونحن البشر لدينا تقاليد أيضًا.

306
00:14:26,342 --> 00:14:28,800
على سبيل المثال، إذا كنتُ سأقابل
شخص للمرة الأولى،

307
00:14:28,800 --> 00:14:31,649
ربما لن أقف على المسرح
وأنحني على هذا النحو للقيام بذلك.

308
00:14:31,649 --> 00:14:32,940
لكني قد أقول، مرحبًا، أنا ديفيد.

309
00:14:32,940 --> 00:14:33,225
الجمهور: مرحبًا.

310
00:14:33,225 --> 00:14:33,510
أنا ستيفان.

311
00:14:33,510 --> 00:14:34,810
ديفيد ج. مالان: ستيفان،
سررت بلقائك.

312
00:14:34,810 --> 00:14:38,130
ولدينا هذه المصافحة الغريبة
التي تم إجهاضها بشكل سابق لأوانه هناك--

313
00:14:38,130 --> 00:14:41,070
حيث لدينا هذا التقليد الغريب--
نحن البشر، على الأقل في الولايات المتحدة،

314
00:14:41,070 --> 00:14:42,780
من تحية شخص ما بمصافحته.

315
00:14:42,780 --> 00:14:46,230
وعلم ستيفان فقط كيفية
القيام بذلك، ولكن بصعوبة.

316
00:14:46,230 --> 00:14:50,115
ثم قام بالفصل لأن
المعاملة اكتملت.

317
00:14:50,115 --> 00:14:51,990
وهذا لا يبدو مختلفًا عن
ما يفعله خادم الويب.

318
00:14:51,990 --> 00:14:54,960
عندا تطلب صفحة ويب،
 فأنت تقوم بإرسال طلب إلى شخص

319
00:14:54,960 --> 00:14:56,520
كما لو كنت تمد إليه يدك.

320
00:14:56,520 --> 00:14:58,270
أنت تتوقع شيئًا في المقابل.

321
00:14:58,270 --> 00:14:59,978
لكن في حالة 
جهاز الكمبيوتر، بالطبع،

322
00:14:59,978 --> 00:15:03,540
إنه يبدو مثل صفحة الويب نفسها التي تأتي
مجددًا في ظرف من النقطة ب

323
00:15:03,540 --> 00:15:04,162
إلى النقطة أ.

324
00:15:04,162 --> 00:15:05,370
إذن هذا هو البروتوكول.

325
00:15:05,370 --> 00:15:07,200
لقد قمنا بالبرمجة 
فقط لمعرفة ما

326
00:15:07,200 --> 00:15:10,326
الذي سنفعله عندما نريد طلب
تحية أو معلومات

327
00:15:10,326 --> 00:15:11,700
والحصول على شيء في المقابل.

328
00:15:11,700 --> 00:15:15,020
إنها مثل علاقة
العميل ومقدم الخدمة في مطعم.

329
00:15:15,020 --> 00:15:17,340
يطلب العميل
شيئًا من القائمة.

330
00:15:17,340 --> 00:15:20,284
يحضرها مقدم الخدمة، النادل أو
النادلة، له

331
00:15:20,284 --> 00:15:22,200
وبالتالي، يُنهي
هذه المعاملة أيضًا.

332
00:15:22,200 --> 00:15:23,783
وهذا هو الإنترنت، أيضًا--

333
00:15:23,783 --> 00:15:27,250
العملاء والخوادم، المتصفحات
والخوادم، أجهزة الكمبيوتر

334
00:15:27,250 --> 00:15:29,010
وأجهزة الكمبيوتر الأخرى، في نهاية المطاف.

335
00:15:29,010 --> 00:15:32,130
إذن مع وضع تلك العلاقة
في الاعتبار، دعونا نلقي نظرة

336
00:15:32,130 --> 00:15:35,790
على ما هو بالفعل
داخل هذا الظرف.

337
00:15:35,790 --> 00:15:39,000
في حالة إلقائي التحية مع 
ستيفان، كان الأمر مرئيًا بصورة أكبر.

338
00:15:39,000 --> 00:15:42,090
لكن في حالة الكمبيوتر، سيكون 
الأمر نصيًا أكثر، حرفيًا.

339
00:15:42,090 --> 00:15:45,000
إذن داخل
الأظرف، الأظرف الافتراضية،

340
00:15:45,000 --> 00:15:47,430
إذا جاز التعبير، حيث يرسل 
المتصفح الخاص بك إلى خادم

341
00:15:47,430 --> 00:15:49,890
عند محاولة طلب
صفحة ويب، في الواقع

342
00:15:49,890 --> 00:15:51,660
هو عبارة عن رسالة تبدو هكذا.

343
00:15:51,660 --> 00:15:54,480
لحسن الحظ، أنها ليست مشفرة
للغاية، رغم أن نقطة، نقطة، نقطة

344
00:15:54,480 --> 00:15:57,360
توضح أن هناك محتويات أكثر
داخل الظرف.

345
00:15:57,360 --> 00:16:00,449
ولكن الكلمة الأساسية هنا
هي احصل على، وهي فعل.

346
00:16:00,449 --> 00:16:02,490
وهناك أفعال أخرى
يمكن للمتصفح استخدامها.

347
00:16:02,490 --> 00:16:05,340
وهذا يعني حرفيًا،
انتقل إلى الصفحة الرئيسية التالية.

348
00:16:05,340 --> 00:16:06,794
ما هي الصفحة الرئيسية التي تريد الانتقال إليها؟

349
00:16:06,794 --> 00:16:07,710
حسنًا، الصفحة الافتراضية.

350
00:16:07,710 --> 00:16:11,790
هذا الخط المائل الأمامي، كما يُطلق عليه،
فقط يمثل صفحة الويب الافتراضي

351
00:16:11,790 --> 00:16:12,930
على موقع الويب.

352
00:16:12,930 --> 00:16:18,499
وفي كثير من الحالات، هذا يعني ضمنيًا
أن هناك ملف بالفعل يُسمى index.html، مجرد

353
00:16:18,499 --> 00:16:19,040
تقليد.

354
00:16:19,040 --> 00:16:21,210
يمكن أن يُطلق عليه أشياء
أخرى وغير موجودة على الإطلاق.

355
00:16:21,210 --> 00:16:23,390
لكن في كثير من الحالات، هذا 
يعني، ضمنيًا،

356
00:16:23,390 --> 00:16:25,232
أعطني ملفًا باسم index.html.

357
00:16:25,232 --> 00:16:27,190
وسنرى ما يبدو عليه
في غضون لحظات.

358
00:16:27,190 --> 00:16:32,820
يشير Http/1.1 فقط إلى، مرحبًا،
ستيفان، أنا أتحدث إلى HTTP الإصدار 1.1.

359
00:16:32,820 --> 00:16:34,380
آمل، أن تنفذوا هذا أيضًا.

360
00:16:34,380 --> 00:16:37,410
يمكن أن تكون هناك إصدارات أخرى وإصدارات أحدث 
وإصدارات أقدم من الشيء نفسه.

361
00:16:37,410 --> 00:16:40,200
لاحظوا في الأسفل هنا، على الرغم من--
معذرة-- لاحظوا الآن هنا، على الرغم من أن

362
00:16:40,200 --> 00:16:42,810
اسم المُضِيف هو
أيضًا في هذا الظرف

363
00:16:42,810 --> 00:16:46,740
لأنه تبين أن خوادم الويب
يمكنها القيام بأشياء متعددة في وقت واحد.

364
00:16:46,740 --> 00:16:48,690
ويمكنهم أن يخدموا مجالات متعددة.

365
00:16:48,690 --> 00:16:52,750
لا تحتاج إلى الخادم الشخصي الفريد من نوعه
الخاص بك من أجل خدمة موقع الويب.

366
00:16:52,750 --> 00:16:55,270
هل يمكن أن يكون لديك العشرات، المئات،
الآلاف من مواقع ويب مختلفة

367
00:16:55,270 --> 00:16:56,230
جمعيها على الخادم نفسه.

368
00:16:56,230 --> 00:17:00,100
وإذا كان أي منكم قد دفع لاسم
مجاله الخاص أو الصفحة الرئيسية الشخصية الخاصة

369
00:17:00,100 --> 00:17:02,830
به أو ما شابه، فمن المحتمل أنك
تدفع إلى شخص ما

370
00:17:02,830 --> 00:17:06,550
من أجل مساحة مشتركة على خادم
واحد أو أكثر من الخوادم،

371
00:17:06,550 --> 00:17:08,800
وليس من أجل المساحة الشخصية المُخصصة لك.

372
00:17:08,800 --> 00:17:11,890
ولكن مجددًا، قد يعني هذا ضمنيًا
الشيء نفسه كهذا.

373
00:17:11,890 --> 00:17:14,260
أعطني index.html.

374
00:17:14,260 --> 00:17:16,780
فما هو الأمر الذي يعود بالفعل
من الخادم؟

375
00:17:16,780 --> 00:17:20,089
لحسن الحظ، يستجيب الخادم، 
لرسالة تبدو هكذا.

376
00:17:20,089 --> 00:17:23,319
يستجيب لتأكيد الإصدار
من البروتوكول الذي يتحدث به.

377
00:17:23,319 --> 00:17:27,109
وهذا مثل ستيفان عندما يقول،
نعم، أنا أتحدث إلى HTTP 1.1 أيضًا.

378
00:17:27,109 --> 00:17:32,380
200 هو التعليمة البرمجية الرقمية 
التي تدل حرفيًا على موافق.

379
00:17:32,380 --> 00:17:33,250
كل شيء على ما يرام.

380
00:17:33,250 --> 00:17:34,360
لقد فهمتك.

381
00:17:34,360 --> 00:17:36,080
ها هي المعلومات التي طلبتها.

382
00:17:36,080 --> 00:17:39,640
ونوع المحتوى، أسفلها، هو
وسيلة فنية أكثر لقول،

383
00:17:39,640 --> 00:17:43,210
نوع المحتوى الذي أقوم
بإرجاعه لك في الظرف الخاص بي

384
00:17:43,210 --> 00:17:46,150
من النقطة ب إلى النقطة أ، 
أو من ستيفان إليّ،

385
00:17:46,150 --> 00:17:49,916
بلغة تسمى HTML
التي تصادف أن تكون نصًا.

386
00:17:49,916 --> 00:17:51,040
لماذا تبدو هكذا؟

387
00:17:51,040 --> 00:17:52,771
قرر البشر،
منذ سنوات، فقط أن هذا

388
00:17:52,771 --> 00:17:55,270
سيكون تسلسل
الأحرف التي حرفيًا سترسلها

389
00:17:55,270 --> 00:17:58,070
أجهزة الكمبيوتر لتوصيل تلك المعلومات.

390
00:17:58,070 --> 00:18:02,470
لذلك دعونا بالفعل نجرب ذلك في حالة واحدة، 
ربما، على سبيل المثال، باستخدام harvard.edu،

391
00:18:02,470 --> 00:18:06,320
ونرى ما يحدث بالفعل
لمعرفة ما الذي قد نراه أيضًا.

392
00:18:06,320 --> 00:18:09,640
إذن دعوني أمضي قدمًا وأفتح
Chrome أو أي متصفح،

393
00:18:09,640 --> 00:18:12,610
لهذا الأمر، الذي يدعم
تصحيح الأخطاء وعمليات التشخيص.

394
00:18:12,610 --> 00:18:13,730
وسأقوم بفعل ذلك.

395
00:18:13,730 --> 00:18:15,830
ويمكنك الوصول إلى هذا
من أماكن مختلفة.

396
00:18:15,830 --> 00:18:20,082
سأنتقل للأعلى إلى عرض، 
المُطوِّر، ثم عرض أدوات المُطوِّر.

397
00:18:20,082 --> 00:18:21,790
هذا هو شيء الذي يأتي
في Chrome.

398
00:18:21,790 --> 00:18:24,760
يجب عليك أحيانًا تمكينه
في Safari والمتصفحات الأخرى.

399
00:18:24,760 --> 00:18:27,764
لكن تقريبًا كل متصفح هذه
الأيام لديه هذه القدرة.

400
00:18:27,764 --> 00:18:30,430
وستلاحظون أن هذا فقط
قام بفتح مجموعة كاملة من علامات التبويب

401
00:18:30,430 --> 00:18:32,440
في الجزء السفلي من 
الشاشة لدي هنا والتي سأكون

402
00:18:32,440 --> 00:18:37,060
قادرًا على استخدامها
بالفعل لاستكشاف ما هو--

403
00:18:37,060 --> 00:18:40,900


404
00:18:40,900 --> 00:18:42,190
هل نقرت فوق شيء آخر؟

405
00:18:42,190 --> 00:18:44,730
المعذرة.

406
00:18:44,730 --> 00:18:47,920
لقد عاد-- لن أنتقل إلى هناك.

407
00:18:47,920 --> 00:18:49,677
إذن ما الذي سيتيحه لنا هذا للقيام به؟

408
00:18:49,677 --> 00:18:51,510
حسنًا، لاحظوا أن هناك
العديد من الميزات هنا.

409
00:18:51,510 --> 00:18:52,926
تبدو زاخمة للوهلة الأولى.

410
00:18:52,926 --> 00:18:55,440
لكن هناك علامة تبويب هنا تسمى الشبكة.

411
00:18:55,440 --> 00:18:58,690
وتبين أن إحدى الميزات
التي يمنحها Chrome للمُطورين،

412
00:18:58,690 --> 00:19:00,840
التي تعرفونها جميعًا الآن--
كمُطوِّري برامج--

413
00:19:00,840 --> 00:19:04,350
هي القدرة على رؤية
الأمور غير الظاهرة بمتصفح،

414
00:19:04,350 --> 00:19:08,160
لمعرفة ما بداخل
تلك الأظرف الافتراضية

415
00:19:08,160 --> 00:19:10,950
التي يحتوي عليها المتصفح طوال
تلك السنوات التي يتم فيها الإرسال

416
00:19:10,950 --> 00:19:13,739
منها إلى خوادم في مكان آخر.

417
00:19:13,739 --> 00:19:15,280
إذن سأمضي قدمًا وأفعل هذا.

418
00:19:15,280 --> 00:19:21,634
سأمضي قدمًا وسأزور
في الواقع http://harvard.edu وأضغط على Enter.

419
00:19:21,634 --> 00:19:23,550
وسترون مجموعة 
كاملة من الأشياء التي تحدث،

420
00:19:23,550 --> 00:19:26,075
بما في ذلك صفحة الويب التي تظهر
في الجزء العلوي من الشاشة.

421
00:19:26,075 --> 00:19:28,200
سأتجاهل جميع
هذه الأمور في الجزء السفلي

422
00:19:28,200 --> 00:19:31,020
باستثناء فقط الطلب الأول.

423
00:19:31,020 --> 00:19:33,750
إذا قمت بتكبير هذا، لاحظوا
هذا الشيء الذي تم تمييزه باللون الأزرق

424
00:19:33,750 --> 00:19:36,450
هنا هو الطلب 
الأول، harvard.edu.

425
00:19:36,450 --> 00:19:40,790
وإذا قمت بالنقر فوق ذلك، فسوف أرى
المزيد من المعلومات على اليمين.

426
00:19:40,790 --> 00:19:42,540
وإذا قمت بالتمرير
للأسفل إلى ما يُطلق عليها

427
00:19:42,540 --> 00:19:46,290
رؤوس الطلب، سطور
النص التي كانت داخل الرسالة

428
00:19:46,290 --> 00:19:49,320
التي أرسلها المتصفح الخاص بي،
وهذا حرفيًا ما

429
00:19:49,320 --> 00:19:52,650
أرسله المتصفح الخاص بي داخل
الظرف، دون علمي،

430
00:19:52,650 --> 00:19:54,580
عندما قمت بزيارة harvard.edu.

431
00:19:54,580 --> 00:19:59,010
لحسن الحظ، إنه يؤكد 
توقعي في وقت سابق، get/http/1.1،

432
00:19:59,010 --> 00:20:01,290
لأنني طلبت الصفحة الرئيسية
الخاصة بـ harvard.edu.

433
00:20:01,290 --> 00:20:02,477
المُضِيف هو harvard.edu.

434
00:20:02,477 --> 00:20:05,310
ومن ثم هناك النقطة، النقطة، النقطة، 
والأشياء التي لا نهتم

435
00:20:05,310 --> 00:20:06,570
بها تحديدًا اليوم.

436
00:20:06,570 --> 00:20:10,030
ولكن دعوني أمضي قدمًا
وألقي نظرة على الرد.

437
00:20:10,030 --> 00:20:11,100
إذن كان هذا طلبي.

438
00:20:11,100 --> 00:20:13,160
هذه كانت يدي التي سأسلم بها على ستيفان.

439
00:20:13,160 --> 00:20:15,250
دعونا نرى رده أو
استجابة الخادم

440
00:20:15,250 --> 00:20:20,880
عن طريق التمرير إلى هذه،
وهي ما يُطلق عليها رؤوس الاستجابة.

441
00:20:20,880 --> 00:20:24,150
خادم هارفارد، لحسن الحظ،
يتحدث بالبروتوكول نفسه

442
00:20:24,150 --> 00:20:26,730
مثلي، 1.1 من HTTP.

443
00:20:26,730 --> 00:20:29,910
ولكن على ما يبدو، انتقلت 
هارفارد بشكل دائم.

444
00:20:29,910 --> 00:20:31,260
ما الذي يعنيه ذلك؟

445
00:20:31,260 --> 00:20:37,440
انتقلتُ إلى http://harvard.edu، وليس هناك.

446
00:20:37,440 --> 00:20:38,056
أين هي؟

447
00:20:38,056 --> 00:20:39,930
حسنًا، يوجد المزيد من
المعلومات هنا.

448
00:20:39,930 --> 00:20:42,600
هناك العديد من نقطة، نقطة، نقطة،
أشياء لا نهتم بها.

449
00:20:42,600 --> 00:20:46,110
لكن إذا ركزنا على الذي هنا--
أوه، الموقع--

450
00:20:46,110 --> 00:20:49,870
أين هي هارفرد الآن، على ما يبدو؟

451
00:20:49,870 --> 00:20:50,880
أجل، تحدث--

452
00:20:50,880 --> 00:20:54,184
الجمهور: [INAUDIBLE]

453
00:20:54,184 --> 00:20:57,605


454
00:20:57,605 --> 00:20:58,480
ديفيد ج. مالان: أجل.

455
00:20:58,480 --> 00:21:05,750
يبدو أنه "تم نقل" هارفرد
بشكل دائم من http://harvard.edu إلى،

456
00:21:05,750 --> 00:21:11,830
ودعوني أظلله،
https://www.harvard.edu،

457
00:21:11,830 --> 00:21:13,240
مع تغييرين ملحوظين.

458
00:21:13,240 --> 00:21:15,040
الأول، هناك www.

459
00:21:15,040 --> 00:21:18,422
والثاني، يوجد أيضًا هذا الأمر الذي
قد يثير انتباهك؟

460
00:21:18,422 --> 00:21:20,880
S، الذي من المحتمل أن يعرفه معظمكم
هذه الأيام أنه يعني آمن،

461
00:21:20,880 --> 00:21:24,610
والذي يشير إلى التشفير ضمنيًا
بشفرة قيصر وفيجينير،

462
00:21:24,610 --> 00:21:26,816
ولكنها أكثر أمانًا بكثير من
تلك الشفرات البسيطة.

463
00:21:26,816 --> 00:21:29,440
تكون المعلومات إلى حد ما
الآن مشوشة عندما أقوم بالاتصال

464
00:21:29,440 --> 00:21:31,359
بيني وبين harvard.edu.

465
00:21:31,359 --> 00:21:32,650
إذن يوجد قراران هناك.

466
00:21:32,650 --> 00:21:36,490
قررت جامعة هارفارد أنها
تريد أن تتيح، بالفعل، وتطلب

467
00:21:36,490 --> 00:21:39,700
من المستخدمين زيارة موقع الويب الخاص بها
بشكل آمن بحيث لا يمكن بالضرورة لأي شخص--

468
00:21:39,700 --> 00:21:41,800
أو شركة، أو حكومة،
أو أفراد عائلة--

469
00:21:41,800 --> 00:21:46,000
رؤية ما الذي يتم
طلبه من موقع جامعة هارفارد على الويب

470
00:21:46,000 --> 00:21:49,090
لأن هذه المعلومات 
مشوشة، تشبه إلى حد كبير استخدام شيء

471
00:21:49,090 --> 00:21:50,680
مثل شفرة قيصر أو فيجينير.

472
00:21:50,680 --> 00:21:53,470
ولقد قررت هارفارد أيضًا، ربما
لأسباب تتعلق بالعلامة التجارية،

473
00:21:53,470 --> 00:21:56,410
لكن جزئيًا أيضًا 
لأسباب فنية،

474
00:21:56,410 --> 00:22:00,570
أننا نريد منك أن تعتقد أن موقعنا على 
الويب هو www.harvard.edu.

475
00:22:00,570 --> 00:22:04,010
وهو مزيج من التسويق
والتقنيات لعدة أسباب مختلفة،

476
00:22:04,010 --> 00:22:07,810
أحد هذه الأسباب هو www 
نحن البشر جميعًا نعرفه فقط وهو يشير إلى موقع ويب.

477
00:22:07,810 --> 00:22:09,610
وإذا رأيتم harvard.edu--

478
00:22:09,610 --> 00:22:11,050
وهذا صحيح بدرجة أقل هذه الأيام--

479
00:22:11,050 --> 00:22:15,130
قد لا يشير بالضرورة كما هو موضح إلى
أن هذا هو عنوان URL الخاص بمواقع الويب.

480
00:22:15,130 --> 00:22:19,120
بصراحة، ليس منذ زمن بعيد، حتى أن
الدعايا والإعلانات التليفزيونية والإعلانات

481
00:22:19,120 --> 00:22:24,220
المطبوعة وما شابه ذلك ستعرض http://
للتوضيح بالفعل للمشاهدين أن

482
00:22:24,220 --> 00:22:25,164
هذا هو عنوان ويب.

483
00:22:25,164 --> 00:22:27,580
ولكن تدريجيًا، مع دخول أشخاص أكثر 
وأكثر على الإنترنت

484
00:22:27,580 --> 00:22:30,070
واستيعابهم للتقنية
وعناوين URL وما شابه ذلك،

485
00:22:30,070 --> 00:22:33,820
يمكننا تجاهل الأشياء
التي تعد فوضى غير ضرورية لأن

486
00:22:33,820 --> 00:22:35,950
جميعنا الآن نعرف بشكل حدسي،
أوه، harvard.edu-- هذا

487
00:22:35,950 --> 00:22:38,800
ربما يكون عنوان ويب يمكنني 
فقط كتابته في متصفح.

488
00:22:38,800 --> 00:22:42,190
وسيُنهي المتصفح
أو الخادم فكرتي

489
00:22:42,190 --> 00:22:47,602
وسيقوم في الواقع بإعداد عنوان URL 
الآمن أو www أو ما شابه ذلك.

490
00:22:47,602 --> 00:22:49,810
إذن في الواقع لم
نجد هارفارد بعد، على ما يبدو.

491
00:22:49,810 --> 00:22:51,220
إذن دعونا نقوم بهذا بدلاً من ذلك.

492
00:22:51,220 --> 00:22:54,280
دعوني أمضي قدمًا وأقوم بالتصغير
وأزور عنوان URL مختلف.

493
00:22:54,280 --> 00:22:58,150
دعوني أمضي قدمًا، مجددًا، وانتقل
إلى عرض، المُطوِّر، أدوات

494
00:22:58,150 --> 00:23:00,490
المُطوِّر، علامة تبويب الشبكة.

495
00:23:00,490 --> 00:23:05,290
والآن دعوني أزور عنوان URL أكثر إطنابًا، 
وعنوان URL أكثر دقة، ثم أضغط على Enter.

496
00:23:05,290 --> 00:23:07,300
مجددًا، مجموعة كاملة من
الأشياء يتم طلبها--

497
00:23:07,300 --> 00:23:09,130
والمزيد حول ذلك في وقت آخر.

498
00:23:09,130 --> 00:23:11,770
ولكن الآن، إذا قُمت بالنقر فوق
أول طلب من هذا القبيل

499
00:23:11,770 --> 00:23:14,710
ونظرت إلى رؤوس 
الاستجابة، فسأرى،

500
00:23:14,710 --> 00:23:20,260
بالفعل، وإن كان في تنسيق مختلف الآن،
أن حالة هذا الطلب هي 200،

501
00:23:20,260 --> 00:23:22,279
التي، كما تذكرون، تشير إلى--

502
00:23:22,279 --> 00:23:22,820
الجمهور: حسنًا.

503
00:23:22,820 --> 00:23:23,250
ديفيد ج. مالان: حسنًا.

504
00:23:23,250 --> 00:23:23,980
حسنًا.

505
00:23:23,980 --> 00:23:26,104
إذن حتى الآن هذان هما الرقمان
اللذين، بصراحة، من المحتمل

506
00:23:26,104 --> 00:23:29,320
أنكم لم تراهما أو تهتمون بهما 
كثيرًا بالفعل، 200 و301.

507
00:23:29,320 --> 00:23:33,040
لكن الاحتمالات هي أنكم قد رأيتم
رقمًا واحدًا آخر على الأقل عند زيارة عناوين URL.

508
00:23:33,040 --> 00:23:39,610
على سبيل المثال، بجانب رؤية
200 و301 بالفعل، من المحتمل أنكم رأيتم 404.

509
00:23:39,610 --> 00:23:41,890
الآن، من الواضح أنه يشير إلى أنه غير موجود.

510
00:23:41,890 --> 00:23:44,090
ولكن المزيد بقيم فعلية،
ماذا يعني ذلك؟

511
00:23:44,090 --> 00:23:46,676
كيف تستنج هذا الخطأ؟

512
00:23:46,676 --> 00:23:48,050
الجمهور: الموقع غير موجود.

513
00:23:48,050 --> 00:23:49,100
ديفيد ج. مالان: الموقع غير موجود.

514
00:23:49,100 --> 00:23:50,180
لقد أخطأت في كتابة عنوان URL.

515
00:23:50,180 --> 00:23:51,370
صفحة الويب غير موجودة.

516
00:23:51,370 --> 00:23:54,770
قام مسؤول النظام للتو بتغيير الاسم على
شيء أو إنه عنوان URL قديم.

517
00:23:54,770 --> 00:23:58,310
يمكن أن يشير أي عدد من الأسباب إلى
أنه لم يتم العثور على الملف.

518
00:23:58,310 --> 00:24:02,150
قد يحتوي هذا الملف على
index.html أو أي عنوان URL آخر.

519
00:24:02,150 --> 00:24:06,050
ولكن طوال هذا الوقت الذي قمت فيه بزيارة
موقع ويب ورأيت 404،

520
00:24:06,050 --> 00:24:09,890
هذا ليس واضحًا، بصراحة، لماذا تتحمل 
الخوادم العناء لتقول لنا 404.

521
00:24:09,890 --> 00:24:13,010
لا يحتاج معظم الأشخاص 
إلى هذا المستوى من المعلومات.

522
00:24:13,010 --> 00:24:16,640
لكنه مشتق من استجابة HTTP،
هذا السطر الأول

523
00:24:16,640 --> 00:24:19,730
من النص الموجود بداخل الظرف العائد 
من ستيفان أو خادم الويب،

524
00:24:19,730 --> 00:24:23,030
بشكل عام أكثر، ذلك
يقول 404، غير موجود.

525
00:24:23,030 --> 00:24:25,580
وهذا يعني أن المستخدم
ربما أرتكب شيئًا خاطئًا

526
00:24:25,580 --> 00:24:28,610
أو أن البيانات قد اختفت 
ببساطة من الخادم.

527
00:24:28,610 --> 00:24:30,967
وهناك الكثير 
من هذه الأشياء أيضًا.

528
00:24:30,967 --> 00:24:33,050
وفي الواقع، قد تحصل على 
استجابات، مثلما حدث معنا

529
00:24:33,050 --> 00:24:37,050
للتو في جامعة هارفارد، من دعم ليس
فقط 1.1، ولكن أيضًا الإصدار 2 من HTTP.

530
00:24:37,050 --> 00:24:39,340
إذن فقط أعلم أنه إذا قمت بالعبث في 
جهاز Mac أو الكمبيوتر الشخصي الخاص بك،

531
00:24:39,340 --> 00:24:41,090
قد تبدو الرسائل
مختلفة قليلاً

532
00:24:41,090 --> 00:24:42,710
بناءً على متصفحك وموقع الويب.

533
00:24:42,710 --> 00:24:44,960
وهذا فقط لأن
الأشياء تتطور مع مرور الوقت.

534
00:24:44,960 --> 00:24:47,150
والإصدارات تتغير.

535
00:24:47,150 --> 00:24:48,650
لكن هناك العديد من الإصدارات الأخرى من هذه.

536
00:24:48,650 --> 00:24:50,570
وهذه مجرد
قائمة قصيرة، ومختصرة.

537
00:24:50,570 --> 00:24:52,640
رأينا 200 و301.

538
00:24:52,640 --> 00:24:55,080
404 الذي من المحتمل أنكم رأيتموه بأنفسكم.

539
00:24:55,080 --> 00:24:59,630
يشير 401 و403 بشكل عام إلى
أنك لم تقم بتسجيل الدخول

540
00:24:59,630 --> 00:25:02,600
أو أنك غير مُخوّل فقط
للوصول إلى المعلومات

541
00:25:02,600 --> 00:25:05,140
لأنها لا تخصك،
على سبيل المثال.

542
00:25:05,140 --> 00:25:08,440
500 ستقومون جميعًا 
بتجربته قبل--

543
00:25:08,440 --> 00:25:11,480
500 هو خطأ 
داخلي في الخادم، وهو ليس

544
00:25:11,480 --> 00:25:14,330
خطأ الخادم بشكل كبير
مثلما هو خطأك وخطأي

545
00:25:14,330 --> 00:25:15,720
عندما كتبنا التعليمة البرمجية الخاطئة.

546
00:25:15,720 --> 00:25:17,750
إذن في الأسابيع المقبلة،
وليس هذا الأسبوع، ولكن عندما

547
00:25:17,750 --> 00:25:21,530
نبدأ بكتابة تعليمة Python البرمجية
وSQL للتحدّث إلى قواعد البيانات،

548
00:25:21,530 --> 00:25:23,340
سنخفق جميعًا 
في مرحلة ما.

549
00:25:23,340 --> 00:25:26,450
وغالبًا ما سيشاهد متصفح
خطأ 500 من خادم

550
00:25:26,450 --> 00:25:29,000
في الواقع، إذا كانت هناك مشكلة بتعليمة برمجية.

551
00:25:29,000 --> 00:25:30,500
418 غير موجود بالفعل.

552
00:25:30,500 --> 00:25:35,150
كانت هذه دعابة كذبة أبريل،
أعتقد، أنه، في، على سبيل المثال، 1988،

553
00:25:35,150 --> 00:25:36,950
عندما كتب بعض الأشخاص ممن لديهم
الكثير من وقت الفراغ

554
00:25:36,950 --> 00:25:40,570
مواصفات رسمية كاملة
لتعلمية حالة HTTP البرمجية، 418،

555
00:25:40,570 --> 00:25:41,870
I am a teapot.

556
00:25:41,870 --> 00:25:46,100
وهى ما تزال نوعًا ما موجودة
في العلم، علم الإنترنت.

557
00:25:46,100 --> 00:25:48,270
إذن هذه فقط بعض الأرقام
التي قد تروها.

558
00:25:48,270 --> 00:25:51,620
لكنها ليست جميع تلك التقنيات إذا
علمت فقط أين تبحث عنها

559
00:25:51,620 --> 00:25:55,320
وأنت تعلمون، الآن كمطوِّرين،
ما تعنيه بالنسبة لكم.

560
00:25:55,320 --> 00:25:56,460
أجل؟

561
00:25:56,460 --> 00:25:59,680
الجمهور: [INAUDIBLE]

562
00:25:59,680 --> 00:26:00,430


563
00:26:00,430 --> 00:26:01,680
ديفيد ج. مالان: سؤال جيد.

564
00:26:01,680 --> 00:26:04,190
ما هو الفرق
بين 200 موافق و302 موجود؟

565
00:26:04,190 --> 00:26:06,590
إذن 302، إذا قرأت
الوثائق،

566
00:26:06,590 --> 00:26:08,900
ستخبرك في الواقع
أن هذا أيضًا يحث على

567
00:26:08,900 --> 00:26:14,930
إعادة توجيه، حيث، تمامًا مثل 301،
عندما يحصل المتصفح على 301 أو 302،

568
00:26:14,930 --> 00:26:18,900
فيجب إعادة توجيه المتصفح إلى
عنوان URL الجديد الذي رأيناه في الرأس،

569
00:26:18,900 --> 00:26:22,840
إذا جاز التعبير، الذي يُطلق عليه موقع،
نقطتين، أيًا كان.

570
00:26:22,840 --> 00:26:25,190
الفرق هو أن
عبارة "تم النقل بشكل دائم" تعني

571
00:26:25,190 --> 00:26:28,730
أن المتصفح يجب أن يتذكر
أن عملية إعادة التوجية تلك تحدث

572
00:26:28,730 --> 00:26:31,290
وتوقف تحمل الخادم لعناء
المهمة الأصلية نفسها.

573
00:26:31,290 --> 00:26:33,470
فقط تذكر ما هو عنوان URL الجديد.

574
00:26:33,470 --> 00:26:36,020
302 يعني موجود،
ولكن لا يعتمد على ذلك.

575
00:26:36,020 --> 00:26:37,614
استمر في سؤالي مرارًا وتكرارًا.

576
00:26:37,614 --> 00:26:39,530
إذن هو مجرد تحسين 
للأداء لذا

577
00:26:39,530 --> 00:26:43,820
لا تزعج الخادم دون داعٍ
في حالة 301، وهي فقط

578
00:26:43,820 --> 00:26:46,290
تستهلك الوقت والمال، بشكل منطقي.

579
00:26:46,290 --> 00:26:50,060
إذن ربما قد سمعتم
عن هذا من قبل--

580
00:26:50,060 --> 00:26:53,390
يمكن فقط أن القيام بذلك
في كامبريدج، وليس كثيرًا في نيو هافن.

581
00:26:53,390 --> 00:26:56,017
هل قام أي شخص بزيارة
safetyschool.org؟

582
00:26:56,017 --> 00:26:56,600
الجمهور: مرحبًا.

583
00:26:56,600 --> 00:26:59,450
ديفيد ج. مالان: أنت مرحب بك
على جهاز الكمبيوتر المحمول أو الهاتف الخاص بك.

584
00:26:59,450 --> 00:27:02,907
لذا قام بعض طلاب جامعة هارفارد الأذكياء للغاية،
أعتقد، منذ سنوات بشراء هذا المجال.

585
00:27:02,907 --> 00:27:05,240
بصراحة، ربما دفعوا،
على سبيل المثال، 10 دولارات أو أكثر

586
00:27:05,240 --> 00:27:08,510
في السنة منذ ذلك الوقت
فقط لإبقاء تلك الدعابة.

587
00:27:08,510 --> 00:27:11,570
لكنها موضحة بشكل رائع
لأنه إذا عدنا

588
00:27:11,570 --> 00:27:13,530
إلى Chrome أو أي متصفح--

589
00:27:13,530 --> 00:27:19,610
ودعوني أمضي قدمًا وأفتح
علامة تبويب متصفح وأنتقل إلى safetyschool.org،

590
00:27:19,610 --> 00:27:20,570
Enter.

591
00:27:20,570 --> 00:27:22,520
أوه، هذا أمر مثير للاهتمام.

592
00:27:22,520 --> 00:27:24,295
إلى أين تمت إعادة توجيهي؟

593
00:27:24,295 --> 00:27:24,897
الجمهور: مرحبًا.

594
00:27:24,897 --> 00:27:25,730
ديفيد ج. مالان: مرحبًا.

595
00:27:25,730 --> 00:27:29,510
إذن السؤال المثير للاهتمام بشكل أكبر
بالنسبة لنا هو، كيف يفعلون ذلك؟

596
00:27:29,510 --> 00:27:31,810
حسنًا، دعوني أعود
إلى IDE--

597
00:27:31,810 --> 00:27:35,780
أو في الواقع، دعونى أنتقل إلى
المتصفح وأفتح علامة تبويب جديدة--

598
00:27:35,780 --> 00:27:38,450
عرض، المُطوِّر، أدوات المُطوِّر.

599
00:27:38,450 --> 00:27:39,740
انظروا إلى علامة تبويب الشبكة.

600
00:27:39,740 --> 00:27:41,065
والآن دعوني أمضي قُدمًا--

601
00:27:41,065 --> 00:27:45,860
معذرة-- دعوني أمضي قدمًا 
وأقوم بزيارة http://safetyschool.org.

602
00:27:45,860 --> 00:27:46,940
Enter.

603
00:27:46,940 --> 00:27:49,770
وأقوم بالتمرير مجددًا إلى الأعلى،
حيث أرى الطلب الأول.

604
00:27:49,770 --> 00:27:53,600
ويمكنكم رؤية، من الناحية الفنية،
إذا كان هذا لا يجعل

605
00:27:53,600 --> 00:27:55,910
المزحة مرحة، كان كل ما قام به
طلاب جامعة هارفارد

606
00:27:55,910 --> 00:27:59,480
منذ سنوات هو تكوين اسم
هذا المجال لإرجاع 301،

607
00:27:59,480 --> 00:28:02,167
تم النقل بشكل دائم إلى جامعة ييل.

608
00:28:02,167 --> 00:28:05,000
الآن، يبدو أن الأمر جيد فقط، وخاصة
عندما يشاهد طلاب ييل

609
00:28:05,000 --> 00:28:06,560
هذا البث المباشر الآن من نيو هافن--

610
00:28:06,560 --> 00:28:10,130
دعونا نلقي نظرة على موقع آخر
يسمى harvardsucks.org.

611
00:28:10,130 --> 00:28:12,780
إذن هذا المجال، موجود، أيضًا.

612
00:28:12,780 --> 00:28:19,590
دعوني أمحو ما على الشاشة
وانتقل إلى http://harvardsucks.org.

613
00:28:19,590 --> 00:28:20,560
Enter.

614
00:28:20,560 --> 00:28:22,460
وهذا هو موقع ويب فعلي.

615
00:28:22,460 --> 00:28:25,820
لذا لم يقم طلاب جامعة
ييل المغامرون بشراء اسم المجال فقط،

616
00:28:25,820 --> 00:28:29,459
ولكن لقد كانوا يستضيفون
الموقع أيضًا منذ سنوات.

617
00:28:29,459 --> 00:28:32,750
يوجد فيديو رائع على اليوتيوب هناك
يتحدث في الواقع عن الاختراق المضحك للغاية

618
00:28:32,750 --> 00:28:35,450
الذي قاموا به منذ بضعة أعوام في مباراة
هارفارد وييل، مباراة كرة القدم.

619
00:28:35,450 --> 00:28:38,450
ولكن يمكنكم رؤية ذلك هنا، أوه، هذا--

620
00:28:38,450 --> 00:28:39,560
إذن هذه مسألة ثانوية.

621
00:28:39,560 --> 00:28:44,576
إذن في الواقع يقوم harvardsucks.org الآن
ببث مباشر على www.harvardsucks.org.

622
00:28:44,576 --> 00:28:45,950
لكنكم في الواقع تبقون هناك.

623
00:28:45,950 --> 00:28:49,980
ولذلك فإنني أشجعكم على الانتقال إلى هذا
الموقع، وكذلك المواقع الأخرى، لتلبية جميع

624
00:28:49,980 --> 00:28:52,010
احتياجات التسوق في هارفارد وييل.

625
00:28:52,010 --> 00:28:55,490
إذن هذا هو HTTP.

626
00:28:55,490 --> 00:29:00,620
وHTTP هو البروتوكول، مجموعة
من التقاليد، التي تستخدمها

627
00:29:00,620 --> 00:29:03,560
المتصفحات عند التحدث إلى خوادم الويب.

628
00:29:03,560 --> 00:29:05,630
وهو البروتوكول
الذي يتحكّم في كيفية استجابة

629
00:29:05,630 --> 00:29:07,870
خوادم الويب هذه للمتصفحات.

630
00:29:07,870 --> 00:29:11,000
لقد قمنا بتحديد كمية هذا في شكل
الأظرف الافتراضية تلك، وهي عبارة عن

631
00:29:11,000 --> 00:29:14,150
تجسيد مادي فقط للأصفار
والواحدات التي تنتقل من الناحية الفنية

632
00:29:14,150 --> 00:29:15,990
ذهابًا وإيابًا عبر الإنترنت.

633
00:29:15,990 --> 00:29:19,350
لكنها تتجسد في مصافحتي
لستيفان، في ما يحدث حقًا.

634
00:29:19,350 --> 00:29:20,120
بادرت بالتحية.

635
00:29:20,120 --> 00:29:20,840
فاستجاب.

636
00:29:20,840 --> 00:29:23,670
وتبدو مثل نوع علاقة
العميل والخادم.

637
00:29:23,670 --> 00:29:26,300
فكيف يمكنكم في الواقع
الآن القيام بعمل إبداعي؟

638
00:29:26,300 --> 00:29:28,070
كيف تقومون بإنشاء yale.edu؟

639
00:29:28,070 --> 00:29:29,720
كيف تقوم بإنشاء harvardsucks.org؟

640
00:29:29,720 --> 00:29:33,240
كيف تقومون بإنشاء موقع ويب خاص بدورة CS50
أو Google أو Facebook؟

641
00:29:33,240 --> 00:29:34,850
حسنًا، ما يهم الآن حقًا هو--

642
00:29:34,850 --> 00:29:37,250
ما هو موجود بشكل أعمق داخل
هذا الظرف.

643
00:29:37,250 --> 00:29:40,280
بالإضافة إلى هذه الرؤوس،
هذه المعلومات النصية،

644
00:29:40,280 --> 00:29:43,430
مثل 200 موافق أو 301
تم النقل بشكل دائم، توجد

645
00:29:43,430 --> 00:29:47,870
لغة أخرى مُضمنة داخل
هذا الظرف، بشكل أعمق في الأسفل،

646
00:29:47,870 --> 00:29:50,240
تسمى HTML، لغة ترميز النص التشعبي.

647
00:29:50,240 --> 00:29:54,560
هذه هي اللغة، التي تعد نصًا
أيضًا، حيث تتم كتابة صفحات الويب بها.

648
00:29:54,560 --> 00:29:57,400
ولذا إذا قمتم بزيارة موقع ويب
على شبكة الإنترنت،

649
00:29:57,400 --> 00:30:01,460
ولاحظت فقط أن إرين تفعل
هذا بشكل متكرر، أليست هي، الشيء--

650
00:30:01,460 --> 00:30:06,590
الذي كنت تبحث عنه هو تقديم
متصفحات من HTML.

651
00:30:06,590 --> 00:30:07,466
إذن HTML مجرد نص.

652
00:30:07,466 --> 00:30:09,048
وسنرى ذلك في غضون لحظات.

653
00:30:09,048 --> 00:30:12,290
يقرأ المتصفح هذا النص من الأعلى إلى
الأسفل، من اليسار إلى اليمين، مثلما يقرأ

654
00:30:12,290 --> 00:30:14,600
Clang تعليمة C البرمجية من الأعلى
 إلى الأسفل، من اليسار إلى اليمين.

655
00:30:14,600 --> 00:30:18,560
ولكن بدلاً من تحويل نصك إلى
أصفار وواحدات، ما يقوم به المتصفح

656
00:30:18,560 --> 00:30:21,260
هو تفسيرها سطرًا بسطر بسطر.

657
00:30:21,260 --> 00:30:23,090
ويفعل ما تقوله.

658
00:30:23,090 --> 00:30:26,420
لذا إذا قلت، مرحبًا، أيها المتصفح،
ضَع صورة إرين على الشاشة،

659
00:30:26,420 --> 00:30:27,780
سيقوم بتنفيذ ذلك.

660
00:30:27,780 --> 00:30:31,700
إذا قلت، مرحبًا، أيها المتصفح، اكتب
كلمة "طاقم العمل" بنص أسود كبير،

661
00:30:31,700 --> 00:30:33,140
سينفذ المتصفح ذلك.

662
00:30:33,140 --> 00:30:36,300
إذا أخبرت المتصفح أن يقوم بوضع
قائمة كاملة، سينفذ ذلك.

663
00:30:36,300 --> 00:30:39,230
وسنرى، فقط في غضون لحظات،
كيف يقوم بتحويل تلك المصطلحات.

664
00:30:39,230 --> 00:30:40,910
HTML ليست لغة برمجة.

665
00:30:40,910 --> 00:30:44,210
إنها، في الواقع، لغة ترميز،
مما يعني أنها تضع الأشياء

666
00:30:44,210 --> 00:30:46,540
على نحو بنائي و جمالي.

667
00:30:46,540 --> 00:30:51,677
لذلك فإن موقع الويب هنا الذي نبحث عنه
يحتوي على مجموعة من الصور، جميعها

668
00:30:51,677 --> 00:30:53,510
يُطلق عليها صور
GIF المتحركة، الرائجة

669
00:30:53,510 --> 00:30:58,406
إلى حد كبير جدًا هذه الأيام على ريديت
وأجهزة الهاتف وiMessage وما شابه ذلك.

670
00:30:58,406 --> 00:31:01,280
لكن هذه مجرد صور، ملفات،
يتم نقلها بالفعل

671
00:31:01,280 --> 00:31:03,540
من خادم CS50 إلى متصفحك.

672
00:31:03,540 --> 00:31:08,597
ولكن إذا صعدت إلى View، والمُطوِّر، 
والآن إلى عرض المصدر، ويمكنكم--

673
00:31:08,597 --> 00:31:10,430
يمكنكم القيام بهذا
طوال هذه السنوات--

674
00:31:10,430 --> 00:31:15,380
يمكنكم بالفعل رؤية ما يُطلق عليها 
HTML التي تُشغِّل موقع CD50 على الويب.

675
00:31:15,380 --> 00:31:17,600
إذن هذا كل شيء عن
HTML، وسأقوم بالتمرير

676
00:31:17,600 --> 00:31:21,849
سريعًا بشكل متعمد خلالها، وهي
تقوم بتنفيذ صفحة طاقم عمل CS50.

677
00:31:21,849 --> 00:31:23,640
وإذا قمنا بالتمرير على
طول الطريق إلى الأسفل،

678
00:31:23,640 --> 00:31:27,620
سترون لاحقًا أن السطور 1,008
هي صفحة الويب التي تم تنفيذها.

679
00:31:27,620 --> 00:31:28,529
لكنها مجرد نص.

680
00:31:28,529 --> 00:31:31,070
وفي الواقع، دعوني أقوم بالتمرير
لأعلى مجددًا وأشير فقط

681
00:31:31,070 --> 00:31:33,260
إلى بعض التفاصيل البارزة.

682
00:31:33,260 --> 00:31:35,287
سترون أنماطًا
مألوفة في الأمثلة

683
00:31:35,287 --> 00:31:36,620
نحن على وشك البدء في النظر فيها.

684
00:31:36,620 --> 00:31:40,160
السطر الأول من المحتمل
هو ذلك، DOCTYPE HTML، والذي

685
00:31:40,160 --> 00:31:42,200
يشبه تلميحًا صغيرًا إلى
المتصفح الذي يقول،

686
00:31:42,200 --> 00:31:45,920
بصراحة جدًا، مرحبًا، أيها المتصفح، 
نوع المستند الذي على وشك أن تراه

687
00:31:45,920 --> 00:31:47,360
هو في الواقع HTML.

688
00:31:47,360 --> 00:31:50,480
لكن يتبع باقي صفحة الويب
نمطًا بنائيًا.

689
00:31:50,480 --> 00:31:52,579
وسترون أنها
موضوعة بشكل جيد بالفعل،

690
00:31:52,579 --> 00:31:55,370
حتى لو كانت بعض هذه السطور
طويلة قليلاً ومغلّفة.

691
00:31:55,370 --> 00:31:59,210
ولكنكم سترون هذا التقليد، وهو عبارة عن قوس
مفتوح، وهو قوس بزاوية،

692
00:31:59,210 --> 00:32:04,000
مثل علامة أصغر، الكلمة الرئيسية
html، ربما بعض الأنماط كهذه،

693
00:32:04,000 --> 00:32:05,330
lang تساوي en-us--

694
00:32:05,330 --> 00:32:08,210
هذا يبدو مثل اللغة--
هي الإنجليزية الأمريكية، ربما--

695
00:32:08,210 --> 00:32:13,130
أكثر بشأن ذلك وإن كان-- ومن ثم هذا
القوس المغلق، أو علامة أكبر من،

696
00:32:13,130 --> 00:32:14,660
التي تُنهي الفكرة.

697
00:32:14,660 --> 00:32:18,440
ثم داخل علامة HTML تلك، إذا جاز 
التعبير، الموضوع أسفلها،

698
00:32:18,440 --> 00:32:20,240
هو هذا، رأس صفحة الويب.

699
00:32:20,240 --> 00:32:22,910
رأس صفحة الويب هو شيء
لا يمكنك رؤيته غالبًا.

700
00:32:22,910 --> 00:32:25,730
يشير بشكل عام إلى علامة التبويب
في الجزء العلوي من الصفحة

701
00:32:25,730 --> 00:32:27,170
وإلى معلومات غير مرئية فقط.

702
00:32:27,170 --> 00:32:30,620
وإذا قمت بالتمرير لأسفل أكثر، فنرى،
حقًا، محتوى صفحة الويب،

703
00:32:30,620 --> 00:32:33,859
والتي توجد في ما يُسمى 
ببنية صفحة الويب.

704
00:32:33,859 --> 00:32:35,900
وبالتالي فإن هذه الأشياء 
التي أقوم بتظليلها فقط،

705
00:32:35,900 --> 00:32:40,190
وإن كانت في سياق كبير جدًا
من صفحة ويب كبيرة تتكون من 1000 سطر،

706
00:32:40,190 --> 00:32:41,920
يُطلق عليها فقط علامات HTML.

707
00:32:41,920 --> 00:32:45,410
HTML عبارة عن لغة قائمة على علامة،
لغة قائمة على الترميز،

708
00:32:45,410 --> 00:32:50,687
حيث يمكنكم فقط قول ما تريدون أن يظهر
حيثما تريدونه أن يظهر.

709
00:32:50,687 --> 00:32:52,020
إذن ماذا يعني هذا بالفعل؟

710
00:32:52,020 --> 00:32:53,990
حسنًا، دعونا نلقي نظرة
على مثال أبسط

711
00:32:53,990 --> 00:32:57,770
في شكل هذه الشريحة، والتي ربما تكون
أبسط صفحة ويب

712
00:32:57,770 --> 00:33:00,110
يمكنك إعدادها، هذه الصفحة هنا.

713
00:33:00,110 --> 00:33:04,040
من المحتمل أن تكون هذه صفحة الويب الصحيحة بشكل أكثر
بساطة، أو من حيث الصياغة

714
00:33:04,040 --> 00:33:08,210
والتي يمكنكم كتابتها لقول، مرحبًا،
أيها المتصفح، نوع الوثيقة هو HTML.

715
00:33:08,210 --> 00:33:10,746
مرحبًا أيها المتصفح، ها هي بداية
صفحة HTML الخاصة بي.

716
00:33:10,746 --> 00:33:12,620
مرحبًا، أيها المتصفح، ها هي
رأس صفحة الويب الخاصة بي.

717
00:33:12,620 --> 00:33:14,703
مرحبًا، أيها المتصفح، ها هو
عنوان صفحة الويب الخاصة بي.

718
00:33:14,703 --> 00:33:18,320
مرحبًا، أيها المتصفح، سيكون عنوان هذه 
الصفحة، من أجل المناقشة،

719
00:33:18,320 --> 00:33:19,260
هو "مرحبًا، أيها العنوان."

720
00:33:19,260 --> 00:33:21,650
ولكن يمكنكم حرفيًا
قول أي شيء تريدونه.

721
00:33:21,650 --> 00:33:23,000
لكن الآن أصبحت هذه الأشياء مثيرة للاهتمام.

722
00:33:23,000 --> 00:33:26,041
وقد شاهد البعض منكم بالتأكيد
HTML من قبل، ولم يقم بعضكم بذلك.

723
00:33:26,041 --> 00:33:28,100
ولكن من المحتمل أن تتمكنوا من
الاستنتاج فقط، حتى لو لم

724
00:33:28,100 --> 00:33:32,180
تروا HTML، ما الذي تقوم به هذه العلامة
لأنها تبدو مماثلة،

725
00:33:32,180 --> 00:33:33,466
ولكن مختلفة قليلاً.

726
00:33:33,466 --> 00:33:35,840
لذلك إذا قال هذا، مرحبًا،
أيها المتصفح، ها هو العنوان،

727
00:33:35,840 --> 00:33:38,107
ما الذي يقوله هذا
على الأرجح، بشكل حدسي؟

728
00:33:38,107 --> 00:33:38,940
الجمهور: إنه يُنهي ذلك فقط.

729
00:33:38,940 --> 00:33:39,440
ديفيد ج. مالان: أجل.

730
00:33:39,440 --> 00:33:40,597
هذا كل شيء بشأن العنوان.

731
00:33:40,597 --> 00:33:42,180
مرحبًا، أيها المتصفح، هذا كل شيء بشأن العنوان.

732
00:33:42,180 --> 00:33:45,140
لذلك قد تقومون بتسمية هذه
علامة البدء وتلك علامة الانتهاء،

733
00:33:45,140 --> 00:33:47,197
أو علامة فتح وعلامة إغلاق.

734
00:33:47,197 --> 00:33:48,530
فكّروا في الأمر كما تريدون.

735
00:33:48,530 --> 00:33:51,500
ولكن في HTML، يوجد
بشكل عام هذا التماثل الرائع.

736
00:33:51,500 --> 00:33:53,840
بمجرد أن تبدأ بشيء،
تنهيه في نهاية المطاف.

737
00:33:53,840 --> 00:33:55,420
وتنفذه بالترتيب الصحيح.

738
00:33:55,420 --> 00:33:58,340
لذا فأنت تقوم-- تبدأ بعلامات في ترتيب واحد.

739
00:33:58,340 --> 00:34:02,570
ومن ثم تقوم بإغلاقها في ترتيب عكسي
بحيث يكون كل شيء متناسقًا بشكل جيد.

740
00:34:02,570 --> 00:34:04,940
وفي الحقيقة، المسافة 
البادئة، تمامًا كما في لغة C،

741
00:34:04,940 --> 00:34:06,560
لا تهم على الإطلاق من الناحية الفنية.

742
00:34:06,560 --> 00:34:09,823
يمكن أن يكون لديك حقًا، صفحة ويب قبيحة جدًا
دون أي مسافات على الإطلاق.

743
00:34:09,823 --> 00:34:12,739
وستظل تعمل بشكل جيد
للمتصفح نظرًا لأنه لا يهتم--

744
00:34:12,739 --> 00:34:14,570
بالقراءة بصعوبة للغاية مثلنا نحن البشر.

745
00:34:14,570 --> 00:34:17,389
إذن هذا التقليد يبدو جيدًا،
تمامًا كما هو الحال في لغة C،

746
00:34:17,389 --> 00:34:20,060
فقط لتوضيح ما هو
التسلسل الهرمي أو البناء،

747
00:34:20,060 --> 00:34:21,170
إذا جاز التعبير.

748
00:34:21,170 --> 00:34:23,810
هذا السطر هنا يعني، مرحبًا،
أيها المتصفح، هذا كل شيء بشأن الرأس.

749
00:34:23,810 --> 00:34:25,040
إنها علامة إغلاق أخرى.

750
00:34:25,040 --> 00:34:27,020
مرحبًا، أيها المتصفح، ها هي
بنية الصفحة.

751
00:34:27,020 --> 00:34:30,500
تبدو بشكل كبير مثل الرأس هنا،
البنية هنا، يوجد معظم محتوى الصفحة،

752
00:34:30,500 --> 00:34:32,420
في الواقع، في بنية صفحة الويب.

753
00:34:32,420 --> 00:34:34,670
هذا ما نراه، نحن
البشر، في الواقع.

754
00:34:34,670 --> 00:34:37,267
وغالبًا في الرأس، سنرى فقط أشياء
مثل العنوان

755
00:34:37,267 --> 00:34:39,350
وبضعة أشياء
أخرى بعد قليل.

756
00:34:39,350 --> 00:34:42,500
ومن الواضح أن الرسالة الموجودة داخل صفحة
 الويب هذه، هي "مرحبًا، أيتها البنية"

757
00:34:42,500 --> 00:34:44,330
ثم إغلاق البنية، إغلاق html.

758
00:34:44,330 --> 00:34:45,139
وهذا كل شيء.

759
00:34:45,139 --> 00:34:47,389
إذن عندما قلت في وقت سابق أن
ما بداخل هذه الأظرف

760
00:34:47,389 --> 00:34:51,080
هو مجموعة نص كاملة
فقط، كل ما عنيته هو هذا.

761
00:34:51,080 --> 00:34:54,949
هذا هو ما بداخل
هذا الظرف فقط أسفل

762
00:34:54,949 --> 00:34:59,210
معلومات البروتوكول، معلومات 
HTTP، التي قالت للتو 200 موافق

763
00:34:59,210 --> 00:35:01,230
أو أيًا من تلك الرسائل الأخرى.

764
00:35:01,230 --> 00:35:03,770
لذلك عندما يتلقى المتصفح
هذا الظرف، يفتحه.

765
00:35:03,770 --> 00:35:05,478
يقرأه من الأعلى إلى
الأسفل، من اليسار إلى اليمين.

766
00:35:05,478 --> 00:35:08,030
ومن ثم يفسر حرفيًا
هذا الملف من الأعلى إلى الأسفل،

767
00:35:08,030 --> 00:35:10,290
يفعل بالضبط ما تقوله ليقوم به.

768
00:35:10,290 --> 00:35:12,530
إذن، كيف نقوم في الواقع
بفعل هذا؟

769
00:35:12,530 --> 00:35:16,070
يمكنكم كتابة HTML على أي برنامج نصي.

770
00:35:16,070 --> 00:35:19,647
يمكنكم كتابته في TextEdit،
على جهاز Mac، على Notepad، على جهاز الكمبيوتر الشخصي.

771
00:35:19,647 --> 00:35:21,980
يمكنكم، من الناحية الفنية، 
استخدام Microsoft Word أو Google Docs.

772
00:35:21,980 --> 00:35:23,690
لكن هذا أمر خارج السياق وسيء.

773
00:35:23,690 --> 00:35:25,340
هذه تتيح لكم ميزات لا تريدونها.

774
00:35:25,340 --> 00:35:27,140
لكنكم تريدون محرر نص بشكل عام.

775
00:35:27,140 --> 00:35:29,990
ونحن، بالطبع، لدينا 
محرر نص في CS50 IDE.

776
00:35:29,990 --> 00:35:31,610
إذن دعوني في الواقع أنتقل إلى هناك.

777
00:35:31,610 --> 00:35:33,950
سأمضى قدمًا وأنتقل إلى CS50 IDE.

778
00:35:33,950 --> 00:35:36,320
و سأنتقل للأعلى إلى ملف، جديد.

779
00:35:36,320 --> 00:35:39,410
وسأمضى قدمًا وبشكل استباقي 
فقط سأحفظ الملف باسم الملف الوحيد

780
00:35:39,410 --> 00:35:42,710
الذي أتذكره من وقت سابق،
وهو index.html.

781
00:35:42,710 --> 00:35:46,300
تمامًا مثل برامج C التي تنتهي
بملفات يُطلق عليها شيء ما .c،

782
00:35:46,300 --> 00:35:52,400
تنتهي ملفات HTML غالبًا بـ .html،
وأحيانًا بـ .htm، ولكن غالبًا بـ .html،.

783
00:35:52,400 --> 00:35:54,680
إذن دعوني أمضي قُدمًا و أضغط على حفظ هناك.

784
00:35:54,680 --> 00:35:58,020
والآن سأمضي قُدمًا وأقوم-- بكتابة
هذه التعليمة البرمجية نفسها بالضبط--

785
00:35:58,020 --> 00:36:00,410
إذن فتح قوس، علامة تعجب.

786
00:36:00,410 --> 00:36:02,750
وهذه هي علامة التعجب الوحيدة
التي سنتوقعها.

787
00:36:02,750 --> 00:36:06,010
السطر الأول، لسوء الحظ، 
مختلف قليلاً عن جميع السطور الأخرى.

788
00:36:06,010 --> 00:36:08,921
ثم سأمضى قُدمًا وأقوم بفتح 
قوس، html، أغلق القوس.

789
00:36:08,921 --> 00:36:12,170
وستلاحظون ذلك، تمامًا مثل
استخدام C، تحاول IDE أن تكون مفيدة قليلاً

790
00:36:12,170 --> 00:36:13,280
و تنهي فكرتي.

791
00:36:13,280 --> 00:36:15,410
إذن لقد أغلقت من أجلي علامة التبويب بالفعل.

792
00:36:15,410 --> 00:36:18,560
الآن عليّ فقط أن أنقر فوق 
Enter ليتم نقله إلى موضعه.

793
00:36:18,560 --> 00:36:22,632
الآن سأمضي قُدمًا-- ما الذي يحدث
بعد ذلك داخل--

794
00:36:22,632 --> 00:36:24,410
أوه.

795
00:36:24,410 --> 00:36:26,870
ما الذي يحدث بعد ذلك؟

796
00:36:26,870 --> 00:36:29,600
الرأس-- إذن أفتح القوس، 
رأس، أغلق القوس.

797
00:36:29,600 --> 00:36:31,420
كان داخل الرأس--

798
00:36:31,420 --> 00:36:32,514
نعم، عنوان.

799
00:36:32,514 --> 00:36:34,430
ومن ثم أعتقد أنه قال فقط،
"مرحبًا، أيها العنوان"

800
00:36:34,430 --> 00:36:36,140
على الرغم من أنه يمكنني أن أطلق عليه 
أي شيء أريده.

801
00:36:36,140 --> 00:36:40,769
ثم أسفل الرأس، ولكن كانت ما تزال داخل
علامة HTML، البنية الخاصة بي.

802
00:36:40,769 --> 00:36:41,810
إذن دعوني أكتُب ذلك هنا.

803
00:36:41,810 --> 00:36:43,790
وأعتقد أنني قلت، "مرحبًا، أيتها البنية."

804
00:36:43,790 --> 00:36:46,750
إذن-- bdoy، boday.

805
00:36:46,750 --> 00:36:48,980
حسنًا، بنية-- حفظ.

806
00:36:48,980 --> 00:36:52,280
إذن الآن لدي ملف نصي في IDE.

807
00:36:52,280 --> 00:36:56,960
يبدو أنه مُتطابق مع ما عرضناه 
كصفحة متعارف عليها من قبل.

808
00:36:56,960 --> 00:36:58,460
الآن نحن بحاجة إلى تحميله في متصفح.

809
00:36:58,460 --> 00:37:00,334
وهذا الأمر متناقض 
قليلاً لأنني،

810
00:37:00,334 --> 00:37:02,690
من الواضح، أكتب
هذا النص في متصفح،

811
00:37:02,690 --> 00:37:04,520
ومع ذلك أحتاج إلى أن يقرأه المتصفح.

812
00:37:04,520 --> 00:37:08,180
إذن هذا فقط لأن IDE،
بيئة التطوير المتكاملة،

813
00:37:08,180 --> 00:37:10,160
التي قمنا باستخدامها
هي، نفسها، قائمة على الويب.

814
00:37:10,160 --> 00:37:12,680
هذه مجرد تفصيل عرضي.

815
00:37:12,680 --> 00:37:17,720
في الواقع لقد كتبتُ التعليمة البرمجية هذه
في ملف الآن وهذا ما يهُم.

816
00:37:17,720 --> 00:37:19,160
يمكن أن يكون في السحابة كما هو.

817
00:37:19,160 --> 00:37:19,970
أو قد يكون على جهاز Mac الخاص بي.

818
00:37:19,970 --> 00:37:20,690
أو قد يكون على جهاز الكمبيوتر الشخصي.

819
00:37:20,690 --> 00:37:22,790
أو قد يكون على أي خادم 
آخر على الإنترنت.

820
00:37:22,790 --> 00:37:26,520
المغزى هو أنني بحاجة إلى
الوصول إلى هذا الملف بطريقة ما.

821
00:37:26,520 --> 00:37:29,210
إذن يتضح أننا
 لن نقوم بتحويله برمجيًا.

822
00:37:29,210 --> 00:37:31,180
لا تُوجد أصفار 
أو واحدات متضمنة بعد الآن.

823
00:37:31,180 --> 00:37:32,315
لا تُوجد تعليمة برمجية آلية.

824
00:37:32,315 --> 00:37:33,940
سندع الأمر هكذا فقط.

825
00:37:33,940 --> 00:37:37,250
يتم تفسير HTML، حرفيًا،
سطر بسطر، من الأعلى إلى الأسفل--

826
00:37:37,250 --> 00:37:39,050
لا توجد أصفار وواحدات مطلوبة.

827
00:37:39,050 --> 00:37:43,370
ولكنني سأحتاج إلى تشغيل 
خادم الويب الخاص بي، وليس IDE نفسه.

828
00:37:43,370 --> 00:37:46,430
أريد أن أُشغل، كمُطوِّر،
خادم الويب الخاص بي.

829
00:37:46,430 --> 00:37:47,420
ما هو خادم الويب؟

830
00:37:47,420 --> 00:37:48,170
إنه مثل ستيفان.

831
00:37:48,170 --> 00:37:51,710
إنه مجرد برنامج هناك،
وينتظر وينتظر

832
00:37:51,710 --> 00:37:53,752
وينتظر حدوث شيء ما.

833
00:37:53,752 --> 00:37:56,960
ويُعد هذا الشيء، بشكل افتراضي، طلبًا
من متصفح، عند هذه النقطة

834
00:37:56,960 --> 00:38:00,917
التي فيها سيستجيب بمصافحة أو،
بشكل أكثر تحديدًا، بهذا الملف.

835
00:38:00,917 --> 00:38:01,750
إذن كيف يُمكنني فعل هذا؟

836
00:38:01,750 --> 00:38:07,670
حسنًا، في IDE، نقوم في الواقع بتضمين
برنامج مجاني يُطلق عليه http-server.

837
00:38:07,670 --> 00:38:10,760
جميع البرامج الموجودة في CS50
IDE مجانية ومفتوحة المصدر.

838
00:38:10,760 --> 00:38:13,760
إذن ببساطة اخترنا بعض الحزم
الأكثر شيوعًا، ويُطلق على إحدى هذه الحزم،

839
00:38:13,760 --> 00:38:15,800
حرفيًا، http-server.

840
00:38:15,800 --> 00:38:19,100
وإذا مضيتُ قدمًا وضغطتُ على Enter،
سترون معلومات مشفرة بطريقة ما

841
00:38:19,100 --> 00:38:19,710
في البداية.

842
00:38:19,710 --> 00:38:20,293
ولكن لنرى ذلك.

843
00:38:20,293 --> 00:38:22,160
إنها تبدأ بتشغيل http-server.

844
00:38:22,160 --> 00:38:23,780
إنها تقدم نقطة خط مائل.

845
00:38:23,780 --> 00:38:26,640
حسنًا، ما الذي تعنيه النقطة؟

846
00:38:26,640 --> 00:38:27,430
هذا المجلد.

847
00:38:27,430 --> 00:38:31,320
إذن تقوم فقط بتقديم محتويات
هذا المجلد الحالي الذي أنا فيه.

848
00:38:31,320 --> 00:38:33,480
الآن إنها تقول أنه
متاح على عنوان URL هذا.

849
00:38:33,480 --> 00:38:35,700
وسيختلف عنوان URL هذا 
بناء على مَن سيقوم بتشغيل هذا.

850
00:38:35,700 --> 00:38:37,540
إذا قمتم بتشغيله، فسترون
عنوان URL مختلف.

851
00:38:37,540 --> 00:38:39,510
لكن الأمر المثير للاهتمام هو الرقم--

852
00:38:39,510 --> 00:38:43,410
تبين أنه، لأن هذا هو
خادم الويب الشخصي الصغير الخاص بي،

853
00:38:43,410 --> 00:38:46,650
إنه لا يستخدم المنفذ 80، الذي كنت
أزعم أنه في وقت سابق هو الافتراضي.

854
00:38:46,650 --> 00:38:48,490
إنه يستخدم تقليدًا مختلفًا، 8080.

855
00:38:48,490 --> 00:38:50,200
8080 هو مجرد تقليد بشري.

856
00:38:50,200 --> 00:38:52,090
إنه ليس مُوحّد بالطريقة نفسها.

857
00:38:52,090 --> 00:38:57,000
ولكن بهذه الطريقة، يمكنني أن أقدّم
ملفات منفصلة من IDE

858
00:38:57,000 --> 00:38:59,790
لأن IDE نفسها
في الواقع تستمع عبر المنفذ 80،

859
00:38:59,790 --> 00:39:02,970
أو، من الناحية الفنية، 443،
لأنها تستخدم برتوكولات HTTPS.

860
00:39:02,970 --> 00:39:07,357
وأنا لا أريد الخلط بين 
ملفاتي وملفات CS50 IDE،

861
00:39:07,357 --> 00:39:09,690
واجهة المستخدم الفعلية
التي أصبحت مألوفة لكم جميعًا.

862
00:39:09,690 --> 00:39:13,230
إذن، تمامًا مثلما يمكن أن يسمع ستيفان من--

863
00:39:13,230 --> 00:39:17,170
قول مرحبًا لعدة أشخاص وكما يمكن أن تتعامل خوادم Google
مع خدمات متعددة،

864
00:39:17,170 --> 00:39:23,400
يمكنأن تستمع أيضًا IDE الخاصة بي عبر
منافذ متعددة، كما يُطلق عليها--

865
00:39:23,400 --> 00:39:26,506
80، أو 25، أو 443، أو، في هذه الحالة، 8080.

866
00:39:26,506 --> 00:39:27,630
إذن ما الذي يعنيه كل هذا؟

867
00:39:27,630 --> 00:39:30,060
سأمضي قدمًا 
وأنقر حرفيًا فوق عنوان URL هذا،

868
00:39:30,060 --> 00:39:33,870
أفتحه في علامة تبويب أخرى على المتصفح الخاص بي،
وسترون مخرجات مشفرة بطريقة ما.

869
00:39:33,870 --> 00:39:38,280
لكن هذه مجرد طريقة موجزة 
لقول، ها هو الفهرس، القائمة،

870
00:39:38,280 --> 00:39:41,850
من الخط المائل، وهي الآن 
المساحة الافتراضية لموقع الويب الخاص بي.

871
00:39:41,850 --> 00:39:44,719
لقد حصلت على مجلدين، المصدر 5،
الموجود بموقع الدورة على الويب--

872
00:39:44,719 --> 00:39:47,760
وهي جميع ملفات اليوم في حالة
أردنا البحث عنها دون كتابتها

873
00:39:47,760 --> 00:39:48,810
من سكراتش--

874
00:39:48,810 --> 00:39:51,570
ومن ثم الملف الذي قمت بإنشائه 
للتو، index.html.

875
00:39:51,570 --> 00:39:57,581
إذن إذا مضيت قدمًا الآن ونقرت فوق
index.html، فلدينا هنا- مرحبًا،أيتها 

876
00:39:57,581 --> 00:39:58,080
البنية.

877
00:39:58,080 --> 00:40:00,621
ونحن لا نرى علامة التبويب فقط 
لأنني قمت بفتح Chrome في وضع ملء الشاشة.

878
00:40:00,621 --> 00:40:03,000
ولكن إذا قُمت بالفعل بإنهاء
وضع ملء الشاشة

879
00:40:03,000 --> 00:40:06,490
وقمت بالتكبير في أعلى علامة
التبويب، سترون "مرحبًا، أيها العنوان" هناك.

880
00:40:06,490 --> 00:40:10,350
وإذا عدتُ إلى هذا الملف،
في الوقت نفسه، وقلتُ،

881
00:40:10,350 --> 00:40:15,630
"مرحبًا، أيتها البنية، سررتُ 
بلقائك"-- أصبح هذا الشيء غريبًا--

882
00:40:15,630 --> 00:40:19,450
الآن سأمضي 
قدمًا وأنقر فوق إعادة التحميل.

883
00:40:19,450 --> 00:40:20,329
والآن ترون هذا.

884
00:40:20,329 --> 00:40:22,120
دعونا نمضي قدمًا ونأخذ
استراحة لمدة خمس دقائق

885
00:40:22,120 --> 00:40:25,036
عاجلاً وليس آجلاً، حتى
نتمكّن من معالجة مشكلة جهاز العرض.

886
00:40:25,036 --> 00:40:26,100
وسنعود بعد قليل.

887
00:40:26,100 --> 00:40:30,990
إذن الخلاصة، توجد علامات أكثر من
html فقط والرأس والعنوان والبنية.

888
00:40:30,990 --> 00:40:33,754
توجد أشياء تعطينا
صور وأصوات، بالتأكيد،

889
00:40:33,754 --> 00:40:35,170
والعديد، العديد، العديد من الأشياء الأخرى.

890
00:40:35,170 --> 00:40:38,070
إذن دعونا نُلقي نظرة بشكل يدوي أكثر 
في مثال واحد فقط أو اثنين من الأمثلة الأخرى

891
00:40:38,070 --> 00:40:41,570
ومن ثم نتعرّف على القائمة الكاملة من
من العلامات التي قد تكون متوفرة.

892
00:40:41,570 --> 00:40:43,320
دعوني أمضي قدمًا 
وأقوم بإنشاء ملف جديد.

893
00:40:43,320 --> 00:40:45,809
سأمضي قدمًا
وأطلق على هذا image.html.

894
00:40:45,809 --> 00:40:47,850
والآن تحسبًا لتقديم
إثبات أنه

895
00:40:47,850 --> 00:40:49,740
يتضمن صورة، 
توفيرًا للوقت، سأمضي قدمًا فقط

896
00:40:49,740 --> 00:40:52,560
وأقوم بلصق المحتويات
من الملف السابق.

897
00:40:52,560 --> 00:40:55,800
ولكن سأمضي قدمًا
وأتخلص من البنية هذه المرة

898
00:40:55,800 --> 00:40:58,260
وسأبدأ بالفعل
بتضمين صورة هنا.

899
00:40:58,260 --> 00:41:02,390
حاليًا، قُمت مسبقًا بتحميل صورة
كلب بولدوغ خاصة بجامعة ييل، هانسوم

900
00:41:02,390 --> 00:41:05,010
دان، في ملف يُطلق عليه dan.jpeg.

901
00:41:05,010 --> 00:41:07,470
وقمت بتحميلها إلى
IDE في المجلد نفسه

902
00:41:07,470 --> 00:41:11,520
الذي يحتوي على index.html
والآن يحتوي على image.html هذا.

903
00:41:11,520 --> 00:41:14,790
ويمكنكم تضمين صورة
باستخدام علامة img.

904
00:41:14,790 --> 00:41:18,600
ولكن يجب أن تحددوا للمتصفح
ما هي الصورة التي

905
00:41:18,600 --> 00:41:19,590
تريدون تضمينها بالفعل.

906
00:41:19,590 --> 00:41:23,580
ولكي تقوموا بذلك، كما تعلمون،
لدينا سمات.

907
00:41:23,580 --> 00:41:28,200
إذن تمامًا مثل علامة html، كما رأينا
في وقت سابق ويمكننا أن نرى ذلك الآن في المثال

908
00:41:28,200 --> 00:41:31,560
الموجود هنا، إنه يحتوي على سمة لغوية
تُحدد اللغة الإنجليزية كاللغة الافتراضية

909
00:41:31,560 --> 00:41:34,620
لهذه الصفحة لمساعدة الأشياء
مثل Google Translate وما شابه ذلك،

910
00:41:34,620 --> 00:41:38,970
إذن علامة image تم تعديلها
بواسطة هذه السمة التي يُطلق عليها مصدر.

911
00:41:38,970 --> 00:41:41,970
إنها فقط src وimg لأن هاتين هما
التمثيلات الأكثر إيجازًا

912
00:41:41,970 --> 00:41:45,800
من "image"
و"source"-- توفر لنا بعض ضغطات المفاتيح.

913
00:41:45,800 --> 00:41:48,540
والآن يمكنني كتابة dan.jpeg هنا.

914
00:41:48,540 --> 00:41:51,360
ومن ثم، فقط لتدبر الأمور جيدًا--

915
00:41:51,360 --> 00:41:54,810
حسنًا، بدلاً من ذلك، يمكنني غلق العلامة بعد ذلك 
باستخدام القوس بزاوية المتوافق،

916
00:41:54,810 --> 00:41:56,790
علامة أكبر من.

917
00:41:56,790 --> 00:41:59,370
لكن في حين أن جميع العلامات
الأخرى حتى الآن

918
00:41:59,370 --> 00:42:02,640
تحتوي على فكرة البدء
التوقف أو الفتح والإغلاق،

919
00:42:02,640 --> 00:42:06,217
لا تحتوي علامة image على ذلك لأن الصورة
إما موجودة أو غير موجودة.

920
00:42:06,217 --> 00:42:08,550
لا توجد في الواقع فكرة نظرية
لبدء صورة بالفعل

921
00:42:08,550 --> 00:42:11,460
ومن ثم في النهاية وقف صورة.

922
00:42:11,460 --> 00:42:12,810
لكن دعونا نضيف تفصيلاً واحدًا آخر.

923
00:42:12,810 --> 00:42:14,970
اتضح أنه توجد
سمات أخرى بعد.

924
00:42:14,970 --> 00:42:17,580
إذن يمكنكم الحصول على صفر أو أكثر على أي علامة.

925
00:42:17,580 --> 00:42:21,202
بالنسبة لمَن لديهم مشكلة في
رؤية المحتوى على صفحات الويب

926
00:42:21,202 --> 00:42:23,160
ويعتمدون بالفعل على أدوات
مثل أجهزة قارئ الشاشة،

927
00:42:23,160 --> 00:42:25,743
توجد في الواقع سمات يمكن أن تساعدهم
في حالة من هذا القبيل--

928
00:42:25,743 --> 00:42:29,880
يتضح أن هناك علامة بديلة،
أو alt، حيث يمكنك أن تقول في الواقع،

929
00:42:29,880 --> 00:42:34,260
"صورة هانسوم دان"، وهي عبارة عن وصف نصي
لها أيًا كان

930
00:42:34,260 --> 00:42:35,760
ما تقوم بتضمينه في صفحة الويب.

931
00:42:35,760 --> 00:42:37,551
بهذه الطريقة، يمكن أن يفهم الشخص
الذي لم يتمكّن من رؤية ذلك ولكن

932
00:42:37,551 --> 00:42:39,540
لديه قارئ شاشة يمكنه
قراءة ذلك له

933
00:42:39,540 --> 00:42:42,060
بالفعل ما هو
موجود على صفحة الويب.

934
00:42:42,060 --> 00:42:45,090
لذلك معظم الأشخاص لن يروا ذلك
ما لم تقوموا بالتمرير فوقها بالفعل

935
00:42:45,090 --> 00:42:46,810
أو قامت بالتحدّث إليكم.

936
00:42:46,810 --> 00:42:51,120
إذن دعوني أمضي قدمًا وأحفظ هذا الملف،
وسأعود إلى فهرس خادم الويب

937
00:42:51,120 --> 00:42:54,840
الذي قمت بتشغيله في وقت سابق مع http-server،
والآن سأنقر على الصورة.

938
00:42:54,840 --> 00:42:55,560
و ها هي ذا.

939
00:42:55,560 --> 00:42:58,980
سترون dan.jpeg
مُضمّنة في صفحة الويب.

940
00:42:58,980 --> 00:43:02,070
بالطبع، لا تقوم صفحة الويب هذه 
في الواقع بكل ذلك حتى الآن.

941
00:43:02,070 --> 00:43:06,172
ولذا لنفترض أننا أردنا فعلاً
أن نقوم بربط صفحة واحدة أو أكثر.

942
00:43:06,172 --> 00:43:07,380
حسنًا، يمكننا القيام بذلك أيضًا.

943
00:43:07,380 --> 00:43:11,670
دعوني أعود إلى IDE، وأنسخ هذه التعليمة البرمجية نفسها،
فقط كنقطة انطلاق،

944
00:43:11,670 --> 00:43:14,790
وأقوم بإنشاء ملف جديد باسم link.html.

945
00:43:14,790 --> 00:43:17,250
ومن ثم في هذا الملف،
سنبدأ بالمحتويات نفسها.

946
00:43:17,250 --> 00:43:19,890
لكن دعوني أتخلص من
هذه البنية وأقول ببساطة،

947
00:43:19,890 --> 00:43:22,185
على سبيل المثال-- دعونا نقول
أن الأشخاص يزورون جامعة هارفارد.

948
00:43:22,185 --> 00:43:29,310
لذا يمكنني أن أقول visit https،
للأمان، www.harvard.edu/،

949
00:43:29,310 --> 00:43:32,730
أو ربما بدون الخط المائل-- لا يهم
للصفحة الافتراضية--

950
00:43:32,730 --> 00:43:33,480
نقطة.

951
00:43:33,480 --> 00:43:34,740
دعوني أقوم بحفظ هذا.

952
00:43:34,740 --> 00:43:37,560
دعوني أعود إلى
فهرس خادم الويب،

953
00:43:37,560 --> 00:43:41,200
إعادة التحميل حتى يمكننى رؤية الملف
الجديد، link.html، الذي أنشأته،

954
00:43:41,200 --> 00:43:43,200
والآن أقوم بالنقر فوق link.html.

955
00:43:43,200 --> 00:43:45,960
و ها هو ذا.

956
00:43:45,960 --> 00:43:48,077
إذن ها هو عنوان URL بشكل مرئي.

957
00:43:48,077 --> 00:43:49,410
ولكنه ليس قابلاً للنقر فوقه في الواقع.

958
00:43:49,410 --> 00:43:52,480
لكن هذا لأن المتصفح 
سيقوم فقط بما أخبره أن يفعله.

959
00:43:52,480 --> 00:43:56,670
وكل ما أخبرته ضمنيًا به أن يفعله
هو عرض النص الأسود هذا هنا.

960
00:43:56,670 --> 00:43:59,580
إذا كنت فعلاً أريد أن أجعله
تفاعلي، سأحتاج إلى علامة تبويب أخرى.

961
00:43:59,580 --> 00:44:04,080
حسنًا، لقد اتضح أنه في HTML، توجد
علامة ربط، تم تسميتها بطريقة ما بشكل مشفر.

962
00:44:04,080 --> 00:44:06,960
وهى أيضًا مكتوبة بإيجاز
حيث a، اختصار ربط.

963
00:44:06,960 --> 00:44:09,660
وباستخدام علامة الربط، يمكنكم ربط
عند هذه النقطة في الصفحة

964
00:44:09,660 --> 00:44:14,850
رابط، أو مرجع فائق، كما أطلقنا عليه
من قبل، لعنوان URL المحدد هذا.

965
00:44:14,850 --> 00:44:18,330
لذلك هذه السمة، حسب التقليد،
تُسمى href، مرجع فائق.

966
00:44:18,330 --> 00:44:20,460
هذه هي الوجهة
التي تريدون الربط بها.

967
00:44:20,460 --> 00:44:21,990
يمكنني الآن إغلاق هذه العلامة.

968
00:44:21,990 --> 00:44:25,600
لكن الآن أحتاج إلى أن أخبر المستخدم
إلى أين سينتقل.

969
00:44:25,600 --> 00:44:28,860
لذا يمكنني فقط أن أقول هارفارد،
على سبيل المثال، وأقوم بوضع النقطة هناك.

970
00:44:28,860 --> 00:44:30,250
حفظ الملف.

971
00:44:30,250 --> 00:44:31,800
أعود إلى علامة التبويب هنا.

972
00:44:31,800 --> 00:44:32,830
أنقر فوق إعادة التحميل.

973
00:44:32,830 --> 00:44:35,170
والآن سترون التفرع الثنائي.

974
00:44:35,170 --> 00:44:36,920
أنا أرى شيئًا واحدًا، هارفارد.

975
00:44:36,920 --> 00:44:39,990
لكن إذا قمتم بالتمرير فوقها،
وهي هنا صغيرة للغاية،

976
00:44:39,990 --> 00:44:42,990
يمكنكم أن ترون بالفعل، كفحص الأمان، 
في أسفل الزاوية اليسرى،

977
00:44:42,990 --> 00:44:46,350
تمامًا، عنوان URL
الذي سيتم توجيهكم إليه بالفعل.

978
00:44:46,350 --> 00:44:50,550
الآن، كملاحظة جانبية، باستخدام تلك الميزة الصغيرة
للغاية من HTML،

979
00:44:50,550 --> 00:44:53,520
يمكنكم بالفعل أن
تصمموا مواقع لأشخاص بشكل اجتماعي،

980
00:44:53,520 --> 00:44:57,600
كما يحدث عادة بهجمات التصيد الاحتيالي،
P-H-I-S-H-I-N-G.

981
00:44:57,600 --> 00:45:00,810
إذا تلقيت بعض الرسائل غير المرغوب فيها من قبل، إما
في البريد الوارد أو مجلد الرسائل غير المرغوب فيها،

982
00:45:00,810 --> 00:45:04,080
فالاحتمالات هي أن شخصًا ما حاول طلب
اسم المستخدم وكلمة المرور الخاصة بك

983
00:45:04,080 --> 00:45:06,900
أو أموالك أو
حساب باي بال الخاص بك.

984
00:45:06,900 --> 00:45:10,020
باي بال بشكل خاص
هي هدف مشترك هنا.

985
00:45:10,020 --> 00:45:12,990
لكن يمكنكم أن تروا كيف يمكنكم بسهولة،
لسوء الحظ،

986
00:45:12,990 --> 00:45:15,810
خداع وتضليل الأشخاص،
خاصةً إذا لم يفهموا بالضرورة

987
00:45:15,810 --> 00:45:17,460
بعض هذه الأساسيات.

988
00:45:17,460 --> 00:45:21,030
دعوني أعود إلى هنا، على
سبيل المثال، وأقول هنا--

989
00:45:21,030 --> 00:45:24,370
حسنًا، لا يوجد شيء يمنعني من
القيام بهذه الخدعة المزعجة قليلاً.

990
00:45:24,370 --> 00:45:27,780
يمكنني تغيير href الخاص بجامعة
ييل، ولكن النص إلى هارفارد،

991
00:45:27,780 --> 00:45:28,980
وبالتالي سيتم خداع شخص ما.

992
00:45:28,980 --> 00:45:29,940
ها ها ها.

993
00:45:29,940 --> 00:45:32,880
ستنتقلون في الواقع إلى
موقع جامعة ييل على الويب بدلاً من ذلك.

994
00:45:32,880 --> 00:45:36,030
ولكن بطريقة أكثر ضررًا، وفي رسائل البريد الإلكتروني
الخاصة بالتصيد الاحتيالي أو الرسائل غير المرغوب فيها

995
00:45:36,030 --> 00:45:38,580
التي من المحتمل أنك كنت تتلاقاها
خلال العديد من السنوات الماضية،

996
00:45:38,580 --> 00:45:43,920
يمكنكم أن تتخيلوا كتابة أي شيء
تريدونه هنا، مثل paypal.com.

997
00:45:43,920 --> 00:45:47,520
ومن ثم هنا يمكن أن يكون
www.SomeMaliciousWeb

998
00:45:47,520 --> 00:45:48,900
siteThatWantsYourMoney--

999
00:45:48,900 --> 00:45:53,310


1000
00:45:53,310 --> 00:45:55,641
آمل أنه غير موجود-- .com.

1001
00:45:55,641 --> 00:45:56,430
حفظ.

1002
00:45:56,430 --> 00:45:57,750
إعادة تحميل الصفحة.

1003
00:45:57,750 --> 00:46:01,030
وبصراحة، معظم
الأشخاص، وأنا واحد منهم،

1004
00:46:01,030 --> 00:46:06,474
لن يتحققوا دائمًا وبشكل جنوني
إلى أين سأنتقل بالفعل.

1005
00:46:06,474 --> 00:46:07,890
سأنقر فقط فوق الرابط.

1006
00:46:07,890 --> 00:46:08,407
و ها هو ذا.

1007
00:46:08,407 --> 00:46:10,740
قد لا تلاحظون تغيير شريط
عنوان URL لأنه يتم

1008
00:46:10,740 --> 00:46:12,198
نقلكم إلى بعض مواقع الويب.

1009
00:46:12,198 --> 00:46:14,880
وبصراحة، لا تُعد إعادة إنشاء 
مواقع الويب جميعًا أمرًا صعبًا.

1010
00:46:14,880 --> 00:46:20,060
في الواقع، فقط لتوضيح هذه
النقطة حقًا، دعوني أنتقل إلى paypal.com.

1011
00:46:20,060 --> 00:46:22,050
وباستخدام بدائيات
اليوم، لاحظوا أنه

1012
00:46:22,050 --> 00:46:25,080
يمكنكم الانتقال إلى عرض، المُطوِّر، عرض المصدر.

1013
00:46:25,080 --> 00:46:28,200
هذه هي HTML تقوم 
بتنفيذ موقع باي بال على الويب--

1014
00:46:28,200 --> 00:46:28,890
يبدو الأمر جيدًا.

1015
00:46:28,890 --> 00:46:36,240
دعوني أنسخ هذا وألصقه في،
لنقل، ملف جديد يسمى paypal.html.

1016
00:46:36,240 --> 00:46:38,250
دعوني أحفظ هذا هنا.

1017
00:46:38,250 --> 00:46:42,780
والآن دعوني أعود إلى خادم الويب
الخاص بي، إعادة التحميل، فتح paypal.html.

1018
00:46:42,780 --> 00:46:43,730
و ها هو ذا.

1019
00:46:43,730 --> 00:46:44,880
لقد قمت بإنشاء باي بال.

1020
00:46:44,880 --> 00:46:49,524
إذن، محاكاة الموقع الذي يعتقد الأشخاص
أنهم سينتقلون إليه ليست أمرًا صعبًا.

1021
00:46:49,524 --> 00:46:52,440
الآن، لندع قضايا الملكية الفكرية
جانبًا، لقد قمت فقط بنسخ موقع

1022
00:46:52,440 --> 00:46:54,330
شخص آخر ولصقه،
ومن الواضح أنه

1023
00:46:54,330 --> 00:46:58,230
غير فعّال بالكامل لأن ما 
لا يمكنني الوصول إليه هو قاعدة البيانات الخاصة بهم

1024
00:46:58,230 --> 00:47:02,280
وتعليمتهم البرمجية على الخادم وجميع
الملكية الفكرية ومنطق

1025
00:47:02,280 --> 00:47:04,950
الأعمال التجارية، إذا جاز التعبير، وهذا
بالفعل ما يجعل موقع باي بال ما هو عليه.

1026
00:47:04,950 --> 00:47:09,490
لكن HTML، المغزى أنه، يمكن الوصول إليها من
قِبل أي شخص ببساطة وبصورة واضحة.

1027
00:47:09,490 --> 00:47:10,330
هي ليست مشفرة.

1028
00:47:10,330 --> 00:47:11,640
ليست أصفارًا وواحدات.

1029
00:47:11,640 --> 00:47:15,120
لكنها تميل إلى أن تكون جمالية
وبنائية بطبيعتها وهذا ليس

1030
00:47:15,120 --> 00:47:16,980
الأمر المهم حقًا في العمل التجاري.

1031
00:47:16,980 --> 00:47:19,540
ولكن يمكن بالتأكيد إساءة استخدام هذه التقنية
بهذه الطريقة.

1032
00:47:19,540 --> 00:47:22,350
إذن لنمضي للأمام، فقط لكي نكون مدركين أكثر
لهذا الأمر لأن معظم رسائل البريد الإلكتروني

1033
00:47:22,350 --> 00:47:24,600
التي تتلقونها هذه الأيام عبر
Gmail أو أي أداة

1034
00:47:24,600 --> 00:47:26,949
يتم تنفيذها في HTML.

1035
00:47:26,949 --> 00:47:28,740
حتى عندما تكتب
رسالة Gmail

1036
00:47:28,740 --> 00:47:31,410
ولم تفكر حتى
في HTML، حيث يتم إرسال رسالة البريد الإلكتروني

1037
00:47:31,410 --> 00:47:34,480
بالفعل
بشكل غير ظاهر كلغة HTML.

1038
00:47:34,480 --> 00:47:37,690
لماذا-- حسنًا، إذا استخدمتم
قائمة ذات تعداد نقطي أو قائمة مرقمة،

1039
00:47:37,690 --> 00:47:42,000
إذا قمتم بالكتابة بخط غامق أو خط مائل أو أي
من تلك الميزات الجمالية في Gmail

1040
00:47:42,000 --> 00:47:45,450
أو البرامج الأخرى، يتم تنفيذها
كلغة HTML،

1041
00:47:45,450 --> 00:47:47,530
ولكن فقط باستخدام،
واجهات لطيفة سهلة الاستخدام.

1042
00:47:47,530 --> 00:47:49,050
لذلك يمكنكم فقط النقر فوق الرموز.

1043
00:47:49,050 --> 00:47:52,230
لا يجب أن تفكروا بشأن فتح قوس،
شيء ما، قوس مغلق.

1044
00:47:52,230 --> 00:47:53,410
لكن يمكننا القيام بذلك.

1045
00:47:53,410 --> 00:47:56,620
على سبيل المثال، إذا مضينا قدمًا 
وألقينا نظرة على بعض الأمثلة الأخرى--

1046
00:47:56,620 --> 00:48:01,080
دعوني أمضي قدمًا هنا وأعود بالفعل
إلى مثالنا الأول، index.html.

1047
00:48:01,080 --> 00:48:05,190
ولنفترض أنني فقط أريد حقًا
جذب الانتباه إلى "مرحبًا."

1048
00:48:05,190 --> 00:48:09,510
يمكنني بالفعل استخدام Strong علامة،
وهي ما تشير إلى اللون الغامق، عادة.

1049
00:48:09,510 --> 00:48:10,740
حفظ ذلك.

1050
00:48:10,740 --> 00:48:14,130
دعوني أعود إلى خادم الويب
الذي فتحته منذ لحظة.

1051
00:48:14,130 --> 00:48:16,750
وأنقر فوق index.html بعد إعادة تحميله.

1052
00:48:16,750 --> 00:48:18,750
والآن يبدو
دقيقًا قليلاً لأنه صغير.

1053
00:48:18,750 --> 00:48:22,170
ولكن يمكنكم على الأرجح رؤية
أنه تمت كتابة "مرحبًا" بخط غامق بالفعل الآن.

1054
00:48:22,170 --> 00:48:26,040
لذلك إذا نقرتم فوق رمز B
في Gmail، فهذا كل ما يقوم به.

1055
00:48:26,040 --> 00:48:29,550
بشكل غير ظاهر، يأخذ Gmail
كلمتك، مرحبًا،

1056
00:48:29,550 --> 00:48:33,690
ويقوم بشكل سري بفتح قوس، Strong،
قوس مغلق، ثم العكس،

1057
00:48:33,690 --> 00:48:35,290
علامة إغلاق، بعده.

1058
00:48:35,290 --> 00:48:38,800
وهذا ما يرسله إلى
مُتلقي هذه الرسالة.

1059
00:48:38,800 --> 00:48:39,940
إذن ما الذي يمكنكم فعله أيضًا؟

1060
00:48:39,940 --> 00:48:41,356
حسنًا، دعوني أمضي قدمًا وأقوم بذلك.

1061
00:48:41,356 --> 00:48:45,810
دعوني أمضي قدمًا وأفتح، لنقل،
بضعة ملفات قمت بإنشائها مسبقًا.

1062
00:48:45,810 --> 00:48:48,990
أحد هذه الملفات يُسمى paragraphs.html.

1063
00:48:48,990 --> 00:48:50,850
ودعوني أشير إلى ذلك أولاً.

1064
00:48:50,850 --> 00:48:55,230
إذن في paragraphs، لدي فقط
ثلاث فقرات من نص لاتيني.

1065
00:48:55,230 --> 00:48:57,730
وتم تقديمها،
على سبيل المثال، على النحو التالي.

1066
00:48:57,730 --> 00:49:01,500
إذا انتقلت إلى المصدر 5 
وانتقلت إلى paragraphs.html--

1067
00:49:01,500 --> 00:49:03,050
يبدو لطيفًا-- لا أعرف ماذا يقول.

1068
00:49:03,050 --> 00:49:04,758
وفي الواقع، إنها
عبارة عن هراء إلى حد كبير.

1069
00:49:04,758 --> 00:49:07,620
لكنها جيدة، ثلاث فقرات لطيفة.

1070
00:49:07,620 --> 00:49:10,740
لكن لاحظوا مدى دقة HTML.

1071
00:49:10,740 --> 00:49:14,940
وتعين عليّ استخدام علامة أخرى
لتحقيق هذه الفقرات.

1072
00:49:14,940 --> 00:49:18,990
إذا كنت قد كتبت، بشكل معقول جدًا،
هذه الفقرات الثلاث

1073
00:49:18,990 --> 00:49:21,976
مثلما قد فعلتم في Google
Docs أو Microsoft Word،

1074
00:49:21,976 --> 00:49:23,100
إنها مجرد ثلاث فقرات.

1075
00:49:23,100 --> 00:49:23,850
المسافة البادئة قبل كل فقرة منها.

1076
00:49:23,850 --> 00:49:25,830
أضغط على Enter، يتم الإدخال
فيما بينها-- تبدو جيدة.

1077
00:49:25,830 --> 00:49:28,200
إنها مغلّفة لأنها فقرة طويلة 
حقًا باتجاه اليمين.

1078
00:49:28,200 --> 00:49:29,100
لكن هذا جيد.

1079
00:49:29,100 --> 00:49:30,810
وأحفظ هذا.

1080
00:49:30,810 --> 00:49:33,690
وأنتقل إلى الفقرات وأعيد تحميلها.

1081
00:49:33,690 --> 00:49:36,530
لاحظوا أن جميع المجموعات معًا.

1082
00:49:36,530 --> 00:49:40,620
بشكل حدسي، لماذا
يحدث هذا، على الرغم من ذلك؟

1083
00:49:40,620 --> 00:49:44,000
ما هو المنطق وراء هذا الخطأ
الآن، وإن كان خطأ جمالي؟

1084
00:49:44,000 --> 00:49:47,829


1085
00:49:47,829 --> 00:49:48,329
أجل؟

1086
00:49:48,329 --> 00:49:51,366
الجمهور: [INAUDIBLE]

1087
00:49:51,366 --> 00:49:52,240
ديفيد ج. مالان: أجل.

1088
00:49:52,240 --> 00:49:54,070
لم يتم حساب هذه
المسافات الإضافية.

1089
00:49:54,070 --> 00:49:55,820
يتم فقط
جمعها معًا لأنه

1090
00:49:55,820 --> 00:49:58,010
على الرغم من أن HTML 
تتقيد بمسافة واحدة--

1091
00:49:58,010 --> 00:50:00,490
وبخلاف ذلك، سيتم لصق كل شيء
ببعضه تمامًا--

1092
00:50:00,490 --> 00:50:04,030
إنها تتجاهل المسافات المتعددة،
سواء كان ذلك سطورًا أو علامات تبويب جديدة

1093
00:50:04,030 --> 00:50:05,650
أو ضغطات متعددة على شريط المسافة.

1094
00:50:05,650 --> 00:50:08,060
وفي النهاية، تقوم بتنفيذ،
ما كنت تخبرها أن تفعله.

1095
00:50:08,060 --> 00:50:12,010
إذن، ما لم تقل بشكل صريح، باستخدام العلامات
في HTML، أعطيني فقرة جديدة،

1096
00:50:12,010 --> 00:50:14,260
هذا كل شيء عن هذه الفقرة،
أعطيني فقرة جديدة

1097
00:50:14,260 --> 00:50:16,270
غير هذه-- الآن هذا كل
شيء للفقرة،

1098
00:50:16,270 --> 00:50:18,490
وستبدأ فقط بتجميع
الكل معًا،

1099
00:50:18,490 --> 00:50:21,560
ربما تقوم بالفصل باستخدام مسافة واحدة،
ومن الواضح أنه ليس التأثير

1100
00:50:21,560 --> 00:50:22,060
نريده.

1101
00:50:22,060 --> 00:50:25,677
إذن فقط تذكروا أن لغة HTML في الواقع صعبة 
عندما يتعلق الأمر بذلك.

1102
00:50:25,677 --> 00:50:28,510
وتمامًا مثل ما هو في C، لن تتحول تعليمتك البرمجية 
برمجيًا إذا لم تكن صحيحة تمامًا.

1103
00:50:28,510 --> 00:50:31,660
في HTML، سيتم عرضها.

1104
00:50:31,660 --> 00:50:33,910
لكنها لن تعرض
بشكل صحيح--

1105
00:50:33,910 --> 00:50:34,960
الكلمة الرئيسية هناك.

1106
00:50:34,960 --> 00:50:36,940
حسنًا، ما هي الميزات الأخرى التي
توجد في لغة HTML هذه؟

1107
00:50:36,940 --> 00:50:40,310
الحقيقة أننا-- سنقدم لكم
نظرة عامة نظرية عن HTML

1108
00:50:40,310 --> 00:50:40,810
اليوم.

1109
00:50:40,810 --> 00:50:42,370
سنعطيكم نبذة
عن بعض العلامات.

1110
00:50:42,370 --> 00:50:44,589
ولكن الحقيقة أيضًا هي،
نوع اللغة

1111
00:50:44,589 --> 00:50:46,630
التي يمكنكم حقًا أن تتعلموها
عن طريق تنفيذها والنظر

1112
00:50:46,630 --> 00:50:50,170
في المراجع أو النصوص عبر الإنترنت التي
تقوم في الواقع بتلخيص العلامات المختلفة.

1113
00:50:50,170 --> 00:50:52,310
لكن على الأقل دعونا ننظر في بعض منها.

1114
00:50:52,310 --> 00:50:56,230
الآن دعوني أنتقل إلى headings.html.

1115
00:50:56,230 --> 00:50:57,430
والآن سترون هذا--

1116
00:50:57,430 --> 00:51:02,140
يتضح أنه توجد علامات
تُسمى h1، h2، h3، h4، h5، h6.

1117
00:51:02,140 --> 00:51:04,190
هذه هي الأمور شائعة الاستخدام
جدًا على مواقع الويب التي

1118
00:51:04,190 --> 00:51:07,960
تحتوي على عناوين مختلفة،
بخط كبير وغامق، أصغر قليلاً وغامق،

1119
00:51:07,960 --> 00:51:11,770
أصغر قليلاً وغامق للقيام بذلك، على سبيل المثال،
رؤوس القسم والفصل.

1120
00:51:11,770 --> 00:51:13,300
موقع ويب CS50 هرميّ للغاية.

1121
00:51:13,300 --> 00:51:16,540
إذا نظرتم عبر المنهج،
سترون الكثير من أحجام الخطوط المختلفة

1122
00:51:16,540 --> 00:51:18,070
والخط الغامق وما شابه ذلك.

1123
00:51:18,070 --> 00:51:21,220
التي تُشتق من استخدامنا
لعلامات الرأس التي تم إنشاؤها.

1124
00:51:21,220 --> 00:51:25,450
إذا مضيتُ قدمًا وفتحت هذا في
المتصفح، سنرى التأثير.

1125
00:51:25,450 --> 00:51:28,100
افتراضيًا، يكون h1 بخط كبير وغامق.

1126
00:51:28,100 --> 00:51:30,610
H2 بخط كبير، لكنه ليس كبيرًا وغامقًا بالقدر نفسه.

1127
00:51:30,610 --> 00:51:31,900
H3 بخط أصغر قليلاً.

1128
00:51:31,900 --> 00:51:33,610
H4، و5، و6--

1129
00:51:33,610 --> 00:51:36,649
وهذا يتبع النموذج
في الكتب والأبحاث الأكاديمية

1130
00:51:36,649 --> 00:51:39,190
التي تحتوي على فصول وأقسام
وأقسام فرعية وما شابه ذلك.

1131
00:51:39,190 --> 00:51:42,289
ستحصلون على هذه الميزة
مجانًا من HTML فقط.

1132
00:51:42,289 --> 00:51:43,330
حسنًا، ماذا يوجد هناك أيضًا؟

1133
00:51:43,330 --> 00:51:45,288
حسنًا،في الواقع إذا كان 
لديكم بيانات مُجدولَة، أشياء

1134
00:51:45,288 --> 00:51:47,510
ترغبون في وضعها في
صفوف وأعمدة، حسنًا،

1135
00:51:47,510 --> 00:51:49,480
يتضح أن HTML تدعم الجداول.

1136
00:51:49,480 --> 00:51:51,220
دعونا نُلقي نظرة على هذا، أيضًا.

1137
00:51:51,220 --> 00:51:55,990
وإذا انتقلتُ إلى table.html، في
متصفحي، سنرى هذا التأثير.

1138
00:51:55,990 --> 00:51:57,380
لا يستحق الأمر كل هذا الاهتمام.

1139
00:51:57,380 --> 00:52:00,790
أنا أحاول تقليد فكرة لوحة الهاتف إلى حد ما،
حيث تظهر هذه الأرقام

1140
00:52:00,790 --> 00:52:02,740
في أعمدة وصفوف.

1141
00:52:02,740 --> 00:52:06,730
لكن بطريقة غير مرئية، تم وضع هذا الشيء
مع علامات بالفعل.

1142
00:52:06,730 --> 00:52:10,570
إذا انتقلتُ إلى IDE
وألقيتُ نظرة هنا،

1143
00:52:10,570 --> 00:52:12,880
سترون بعض ما تم نسخه ولصقه سابقًا--

1144
00:52:12,880 --> 00:52:14,860
html، ورأس، وبنية.

1145
00:52:14,860 --> 00:52:16,240
لكن بعد ذلك لاحظوا هنا.

1146
00:52:16,240 --> 00:52:18,310
مرحبًا، أيها المتصفح، ها هو جدول.

1147
00:52:18,310 --> 00:52:21,850
وترون، وإن كانت محاطة بعلامات
غير مألوفة، على الأرجح، 1، 2، 3، 4،

1148
00:52:21,850 --> 00:52:25,420
5، 6، 7، 8، 9، ومن ثم
الرموز بالأسفل هناك.

1149
00:52:25,420 --> 00:52:29,270
إذن دعونا فقط نستنتج، لأن في الواقع
ما تعلمتموه يعد جزءًا كبيرًا من تعلُمِكم للغة HTML

1150
00:52:29,270 --> 00:52:32,020
وقريبًا لغة أخرى، سنرى--
سيكون الأمر فقط بشكل غير مباشر.

1151
00:52:32,020 --> 00:52:35,170
إذا كنتم تشعرون بالفضول بشأن كيفية تنفيذ
صفحة ويب ما لميزة ما،

1152
00:52:35,170 --> 00:52:36,711
في الواقع تنظرون إلى تعليمة المصدر البرمجية الخاصة بها.

1153
00:52:36,711 --> 00:52:38,930
ويمكنكم الاستنتاج، من خلال المثال،
كيف يمكنكم فعل الشيء نفسه.

1154
00:52:38,930 --> 00:52:39,610
إذن خمّنوا.

1155
00:52:39,610 --> 00:52:42,820
إذا كانت هذه العلامة، على نحو فعّال، تقول،
مرحبًا، أيها المتصفح ها هو الجدول،

1156
00:52:42,820 --> 00:52:47,770
هذه العلامة هنا، حتى لو لم يسبق لكم
رؤية HTML، من المحتمل أن تعني صف الجدول.

1157
00:52:47,770 --> 00:52:49,990
مرحبًا ،أيها المتصفح، ها هو
صف في جدولي.

1158
00:52:49,990 --> 00:52:51,040
لكن هذا أقل وضوحًا.

1159
00:52:51,040 --> 00:52:54,730
لكن td ،td ،td يرمز لبيانات الجدول
أو خلية الجدول.

1160
00:52:54,730 --> 00:52:57,730
إذن، مرحبًا، أيها المتصفح، ها هي خلية،
وخلية أخرى، وخلية أخرى،

1161
00:52:57,730 --> 00:52:59,260
ثلاث خلايا في المجمل.

1162
00:52:59,260 --> 00:53:01,390
مرحبًا، أيها المتصفح، هذا كل شيء بشأن هذا الصف.

1163
00:53:01,390 --> 00:53:02,860
ومن ثم تكرار النمط.

1164
00:53:02,860 --> 00:53:05,470
إذن، هنا تصبح HTML فقط
مملة قليلاً بعد فترة.

1165
00:53:05,470 --> 00:53:08,261
ولكن بمجرد رؤية اسم العلامة
وبمجرد معرفة السمات،

1166
00:53:08,261 --> 00:53:10,450
إن وجدت، التي تدعمها، تتبعون فقط
هذا النمط.

1167
00:53:10,450 --> 00:53:11,910
هذا كل شيء عن HTML.

1168
00:53:11,910 --> 00:53:12,820
هناك علامات بدء.

1169
00:53:12,820 --> 00:53:13,814
وهناك علامات انتهاء.

1170
00:53:13,814 --> 00:53:16,480
وأحيانًا لا توجد علامات انتهاء،
إذا لم تكن هناك حاجة إليها.

1171
00:53:16,480 --> 00:53:17,530
وهناك سمات.

1172
00:53:17,530 --> 00:53:18,760
وهذه هي لغة HTML.

1173
00:53:18,760 --> 00:53:21,400
الآن، إذا كنتم تريدون التأكد من أن
تعليمتكم البرمجية صحيحة،

1174
00:53:21,400 --> 00:53:22,520
فلديكم بعض الخيارات.

1175
00:53:22,520 --> 00:53:28,120
دعوني أمضي قدمًا وأفتح بالفعل،
على سبيل المثال، hello.html من وقت سابق،

1176
00:53:28,120 --> 00:53:29,680
فقط لديّ مثال بسيط--

1177
00:53:29,680 --> 00:53:31,630
أو index.html من وقت سابق.

1178
00:53:31,630 --> 00:53:36,197
دعوني أنتقل إلى validator.w3.org--

1179
00:53:36,197 --> 00:53:39,280
يتضح أن هناك أدوات من شأنها أن تساعدكم فقط
بتقديم ملاحظات لكم إن كانت

1180
00:53:39,280 --> 00:53:42,460
سواء كانت HTML
صالحة أم لا، صحيحة.

1181
00:53:42,460 --> 00:53:46,000
وهذا مفيد لأن أحيانًا،
قد تبدو لكم على ما يرام على Chrome.

1182
00:53:46,000 --> 00:53:49,240
لكن بصراحة، إذا قام صديق أو فرد 
من العائلة بزيارة الصفحة نفسها بالضبط

1183
00:53:49,240 --> 00:53:52,720
على Edge أو IE أو Safari
أو Firefox، قد لا

1184
00:53:52,720 --> 00:53:56,620
تبدو هي نفسها لأن الشركات التي
تقوم بإنشاء هذه المتصفحات في بعض الأحيان

1185
00:53:56,620 --> 00:53:58,810
لا تتفق بشأن كيفية تقديم HTML.

1186
00:53:58,810 --> 00:54:00,880
إذن إذا لم تكن 100% صحيحة،
فأنتم فقط

1187
00:54:00,880 --> 00:54:04,300
تتحملون خطر أكبر بتقديم
شيء بشكل غير صحيح.

1188
00:54:04,300 --> 00:54:06,914
لقد مضيتُ قدمًا وقمتُ بالنقر فوق فحص
بعد لصق تعليمتي البرمجية فيه.

1189
00:54:06,914 --> 00:54:08,830
وهذا جيد--
اكتمل فحص المستند،

1190
00:54:08,830 --> 00:54:10,260
لا توجد أي أخطاء أو تحذيرات لعرضها.

1191
00:54:10,260 --> 00:54:12,610
إذن عندما يحين وقت Pset5
وأنتم تمارسون مهاراتكم باستخدام HTML،

1192
00:54:12,610 --> 00:54:14,830
أعلموا أن هناك أدوات،
هذه متضمنة فيها،

1193
00:54:14,830 --> 00:54:17,080
سنوجهكم إليها في المواصفات،
بحيث تساعدكم فقط في تقديم

1194
00:54:17,080 --> 00:54:20,330
ملاحظات على ما إذا كان هناك شيء مُعطّل
حتى يمكنكم، وبثقة أكبر،

1195
00:54:20,330 --> 00:54:24,300
معرفة أنه سيعمل بشكل جيد.

1196
00:54:24,300 --> 00:54:26,980
حسنًا، دعونا نقوم بشيء
مثير للاهتمام أكثر الآن.

1197
00:54:26,980 --> 00:54:30,280
لنعيد تنفيذ Google، وليس
من خلال خدعة النسخ واللصق الصغيرة هذه،

1198
00:54:30,280 --> 00:54:33,370
حيث ننسخ فقط HTML الخاصة بهم
 ونستخدمها بأنفسنا.

1199
00:54:33,370 --> 00:54:37,690
دعونا الآن نقوم بإنشاء واجهة مستخدم
تستخدم Google، بطريقة ما.

1200
00:54:37,690 --> 00:54:39,460
إذن بالطبع، Google، 
في جميع أشكاله،

1201
00:54:39,460 --> 00:54:42,820
في نهاية المطاف يحتوي على مربع للنص 
يمكنك كتابة المعلومات بداخله.

1202
00:54:42,820 --> 00:54:45,340
وإذا مضيتُ قدمًا
وفعلت هذا، يتضح أن

1203
00:54:45,340 --> 00:54:48,940
Google بشكل عام يقوم بإعادة 
توجيهي إلى عنوان URL مُعين.

1204
00:54:48,940 --> 00:54:51,730
إذا بحثت عن "قطط"
وضغطت على Enter، لاحظوا أنه

1205
00:54:51,730 --> 00:54:55,042
تمّت إعادة توجيهي إلى
عنوان URL يبدو مشفرًا إلى حد ما.

1206
00:54:55,042 --> 00:54:56,500
يوجد الكثير من بيانات التعريف هناك.

1207
00:54:56,500 --> 00:54:59,480
هناك الكثير من معلومات
الدعاية هذه الأيام وكل ذلك.

1208
00:54:59,480 --> 00:55:02,860
ولكن يتضح أنه، وأنا أعلم
هذا من خبرتي فقط،

1209
00:55:02,860 --> 00:55:06,070
يُمكنني استخلاص عنوان URL هذا في ذلك.

1210
00:55:06,070 --> 00:55:07,730
وسينجح الأمر.

1211
00:55:07,730 --> 00:55:09,321
دعوني أمضي قدمًا وأنقر فوق Enter.

1212
00:55:09,321 --> 00:55:09,820
عذرًا.

1213
00:55:09,820 --> 00:55:14,110
دعوني أمضي قدمًا وأضغط على Enter بعد
تبسيط هذا إلى علامة استفهام q

1214
00:55:14,110 --> 00:55:15,100
يساوي قطط.

1215
00:55:15,100 --> 00:55:15,880
Enter.

1216
00:55:15,880 --> 00:55:19,510
وفي الواقع، سأحصل على
نفس صفحة القطط مجددًا.

1217
00:55:19,510 --> 00:55:20,840
إذن ما الذي يحدث؟

1218
00:55:20,840 --> 00:55:23,420
إذن عنوان URL نفسه
ليس ملحوظًا للغاية.

1219
00:55:23,420 --> 00:55:24,850
لقد رأينا www من قبل.

1220
00:55:24,850 --> 00:55:26,697
من المؤكد أنكم استخدمتم google.com من قبل.

1221
00:55:26,697 --> 00:55:27,655
هذا يعني أنه آمن.

1222
00:55:27,655 --> 00:55:29,120
ويدعم HTTPS.

1223
00:55:29,120 --> 00:55:30,880
أصبح كل هذا أمرًا قديمًا الآن.

1224
00:55:30,880 --> 00:55:34,690
إنه لا يطلب index.html
لأن Google ديناميكي.

1225
00:55:34,690 --> 00:55:36,230
يتغير المحتوى باستمرار.

1226
00:55:36,230 --> 00:55:39,760
لا يوجد أشخاص مهمتهم هي
تحديث صفحة Google الرئيسية كل يوم

1227
00:55:39,760 --> 00:55:40,785
باستخدام HTML.

1228
00:55:40,785 --> 00:55:42,910
لذا لديهم بدلاً من ذلك، مجموعة برنامج
قيد التشغيل،

1229
00:55:42,910 --> 00:55:48,790
مكتوبة بلغة Python أو ++C أو Java أو مَن يعرف
ما هو غير ظاهر وهو فقط

1230
00:55:48,790 --> 00:55:50,000
يستمع عبر هذا العنوان.

1231
00:55:50,000 --> 00:55:52,870
إذن لا يجب أن تكون ملفات نصية
قام بإنشائها الأشخاص.

1232
00:55:52,870 --> 00:55:54,100
في الواقع يُمكن أن تكون برنامج.

1233
00:55:54,100 --> 00:55:55,210
يُطلق على هذا البرنامج بحث.

1234
00:55:55,210 --> 00:55:57,001
وفي أسبوع واحد فقط أو
أسبوعين، ستقومون أيضًا،

1235
00:55:57,001 --> 00:56:00,410
بكتابة البرامج بلغة تُسمى
Python ويُمكنها القيام بالشيء نفسه.

1236
00:56:00,410 --> 00:56:02,890
ولكن في الوقت الحالي، سندع
Google يقوم بالعمل الشاق.

1237
00:56:02,890 --> 00:56:04,240
ولاحظوا علامة الاستفهام.

1238
00:56:04,240 --> 00:56:07,720
إذا رأيتم علامة استفهام من قبل في
عنوان URL، فهذا يعني للمتصفح أن،

1239
00:56:07,720 --> 00:56:11,440
ها هي بعض مدخلات المستخدم،
التي من المحتمل أن المستخدم

1240
00:56:11,440 --> 00:56:14,526
قد كتبها في الشكل، مثلما
كتبتُ "قطط" منذ لحظة.

1241
00:56:14,526 --> 00:56:16,400
ومن ثم سترون
 شيئًا يساوي

1242
00:56:16,400 --> 00:56:19,720
شيئًا، مما يشير إلى
ما كتبه الشخص.

1243
00:56:19,720 --> 00:56:21,970
حاليًا، فقط لأن لاري وسيرغي،
قبل 20 عامًا،

1244
00:56:21,970 --> 00:56:25,630
قد قررا باستخدام google.com أن مربع النص هذا
الذي رأيناه منذ قليل،

1245
00:56:25,630 --> 00:56:28,060
هذا المربع الكبير الذي وُضِع الآن هنا--

1246
00:56:28,060 --> 00:56:30,820
قررا منذ سنوات أن
اسم مربع النص هذا

1247
00:56:30,820 --> 00:56:32,680
سيكون q لـ query--

1248
00:56:32,680 --> 00:56:34,420
ويمكنكم تسميته بأي شيء تريدونه.

1249
00:56:34,420 --> 00:56:36,400
من الواضح، أن "قطط"، هي ما كتبته.

1250
00:56:36,400 --> 00:56:38,920
تربط علامة يساوي فقط
الاثنين معًا.

1251
00:56:38,920 --> 00:56:42,820
إذن يشير عنوان URL هذا إلى Google فقط، 
مرحبًا، Google، قُم بتشغيل برنامج بحث،

1252
00:56:42,820 --> 00:56:47,410
مع تمرير اسم مدخل المستخدم من
q بحيث تكون قيمته "cats."

1253
00:56:47,410 --> 00:56:51,080
وبهذه الطريقة يعرف Google ما الذي
يبحث عنه، لأي منا.

1254
00:56:51,080 --> 00:56:53,294
وبصراحة، يُمكنني البحث
عن "كلاب"، ليس فقط

1255
00:56:53,294 --> 00:56:54,710
عن طريق كتابة الكلمة "كلاب" هنا.

1256
00:56:54,710 --> 00:56:57,340
يمكنني أن أكون دقيقًا أكثر
وأكتبها في هذا السؤال

1257
00:56:57,340 --> 00:56:59,940
لأنني أعرف الآن تنسيق عنوان URL الخاص بـ Google.

1258
00:56:59,940 --> 00:57:00,440
و ها هو ذا.

1259
00:57:00,440 --> 00:57:03,597
حصلت الآن على نتائج البحث
عن "كلاب" بدلاً من ذلك.

1260
00:57:03,597 --> 00:57:04,180
لكن هذا كل شيء.

1261
00:57:04,180 --> 00:57:06,770
هذه هي الكتلة البنائية الأساسية
التي كانت تحدث طوال هذا الوقت.

1262
00:57:06,770 --> 00:57:09,307
وعلى الرغم من أن عنوان URL كان 
منذ قليل أطول وأقبح،

1263
00:57:09,307 --> 00:57:10,765
فهذا مجرد تفصيل غير مثير للاهتمام.

1264
00:57:10,765 --> 00:57:14,620
وفي الواقع هذا ليس العمل الأساسي 
الذي يوفره البحث.

1265
00:57:14,620 --> 00:57:16,300
إذن ما الذي يعنيه هذا؟

1266
00:57:16,300 --> 00:57:19,360
الآن يمكنني بالفعل أن أقوم بإنشاء
واجهة المستخدم الخاصة بي في Google

1267
00:57:19,360 --> 00:57:21,530
عن طريق استخدام بعض العلامات الجديدة أيضًا.

1268
00:57:21,530 --> 00:57:23,900
دعوني أمضي قدمًا وأنسخ
هذا، كنقطة انطلاق.

1269
00:57:23,900 --> 00:57:27,730
دعوني أمضي قدمًا وأقوم بإنشاء ملف
جديد يُسمى search.html.

1270
00:57:27,730 --> 00:57:29,557
لتوفير الوقت فقط، سأكتُب ذلك هناك.

1271
00:57:29,557 --> 00:57:30,640
وسأطلق عليه search.

1272
00:57:30,640 --> 00:57:32,620
وسأقوم بالتخلص
 من "مرحبًا" أيتها البنية.

1273
00:57:32,620 --> 00:57:34,420
إذن لديّ نقطة انطلاق فقط.

1274
00:57:34,420 --> 00:57:37,150
هذه هي لغة HTML نفسها التي
أنسخها وألصقها كل مرة.

1275
00:57:37,150 --> 00:57:39,510
حسنًا، يتضح أنه في
HTML، توجد علامة

1276
00:57:39,510 --> 00:57:43,450
تُسمى شكل وهي تعطيكم 
شكل لمدخل المستخدم.

1277
00:57:43,450 --> 00:57:47,830
ويتضح أنه داخل الشكل،
يمكن أن تكون هناك علامات مختلفة أيضًا--

1278
00:57:47,830 --> 00:57:49,450
تحديدًا، مدخل.

1279
00:57:49,450 --> 00:57:50,710
وتحتوي المدخلات على أسماء.

1280
00:57:50,710 --> 00:57:55,450
إذن يمكنني أن أقول اسم يساوي "q" لأحاكي
قرار لاري وسيرغي منذ سنوات،

1281
00:57:55,450 --> 00:57:56,650
وهما مؤسسا Google.

1282
00:57:56,650 --> 00:57:58,330
يعد نوع هذا المدخل نصًا.

1283
00:57:58,330 --> 00:58:01,387
لذا هو ليس زرًا أو مربع اختيار
أو شيئًا من هذا القبيل.

1284
00:58:01,387 --> 00:58:02,095
تلك الأشياء موجودة أيضًا.

1285
00:58:02,095 --> 00:58:03,177
لكنها نص فقط.

1286
00:58:03,177 --> 00:58:04,510
ثم أريد زر Submit.

1287
00:58:04,510 --> 00:58:06,790
وأنا أعرف فقط أنه،
بما أنني قمت بهذا مسبقًا،

1288
00:58:06,790 --> 00:58:10,360
يمكنني الحصول على زر Submit 
عن طريق كتابة النوع يساوي تقديم.

1289
00:58:10,360 --> 00:58:12,939
ومن ثم ستكون قيمة 
هذا هي Search،

1290
00:58:12,939 --> 00:58:14,980
وهي الكلمة التي
سأراها على الشاشة.

1291
00:58:14,980 --> 00:58:16,420
ستعرفون هذا 
فقط عندما يراها

1292
00:58:16,420 --> 00:58:18,640
شخص آخر يقوم بذلك،
وعند النظر في تعليمة مصدر برمجية خاصة بشخص ما،

1293
00:58:18,640 --> 00:58:19,765
عند قراءة برنامج تعليمي على الإنترنت.

1294
00:58:19,765 --> 00:58:20,980
ليس بالضرورة أن تكون واضحة.

1295
00:58:20,980 --> 00:58:24,220
لكن النمط هو نفس-- اسم العلامة، 
سمة تساوي شيئًا،

1296
00:58:24,220 --> 00:58:27,040
سمة تساوي
شيئاً، وهكذا.

1297
00:58:27,040 --> 00:58:30,250
حسنًا، الآن دعوني أمضي قدمًا 
وأحفظ هذا، وأنتقل إلى خادم الويب،

1298
00:58:30,250 --> 00:58:33,470
وأُعيد تحميل الفهرس.

1299
00:58:33,470 --> 00:58:35,950
إذن هناك search.html.

1300
00:58:35,950 --> 00:58:37,870
ولكنه ليس جميلاً
تمامًا مثل الخاص بـ Google.

1301
00:58:37,870 --> 00:58:39,400
دعوني أقوم بالتكبير ليظهر بخط أكبر.

1302
00:58:39,400 --> 00:58:40,750
لكن لديّ مربع نص.

1303
00:58:40,750 --> 00:58:43,360
ولديّ زر
يُسمى Search.

1304
00:58:43,360 --> 00:58:45,640
لكنني لا أعرف إلى أين سأرسلها حتى الآن.

1305
00:58:45,640 --> 00:58:48,310
أحتاج إلى سمة أخرى أو اثنتين هنا.

1306
00:58:48,310 --> 00:58:52,900
يتضح أنني أريد هذا الشكل
لأقوم بإرسال هذه

1307
00:58:52,900 --> 00:58:58,690
المعلومات إلى www.google.com/search،
برنامج البحث على خادم Google.

1308
00:58:58,690 --> 00:59:01,940
ولكنني أريد استخدام ذلك
الفعل الخاص الذي رأيناه منذ قليل.

1309
00:59:01,940 --> 00:59:03,970
ومجددًا، كان هذا موجودًا
بشكل أعمق في الظرف.

1310
00:59:03,970 --> 00:59:08,394
الطريقة التي أردت استخدامها هي get،
بأحرف صغيرة في هذه الحالة--

1311
00:59:08,394 --> 00:59:10,060
إذن هذا الآن أمر فني وذو مستوى منخفض قليلاً.

1312
00:59:10,060 --> 00:59:12,976
لكن هذا فقط يعني أن هذا هو الفعل
الذي يجب أن تستخدموه داخل الظرف

1313
00:59:12,976 --> 00:59:14,060
للحصول على صفحة الويب.

1314
00:59:14,060 --> 00:59:15,040
ولكن هذا كل شيء.

1315
00:59:15,040 --> 00:59:18,010
لقد أخبرتُ صفحة الويب
بالإجراء الذي يجب اتخاذه

1316
00:59:18,010 --> 00:59:22,030
وهو تقديم هذا الشكل إلى عنوان URL هذا
باستخدام get، الطريقة التي رأيناها في وقت سابق.

1317
00:59:22,030 --> 00:59:24,160
تقديم معلمة،
كما يُطلق عليها، تُسمى

1318
00:59:24,160 --> 00:59:26,150
q، أيًا كان ما يكتبه الشخص.

1319
00:59:26,150 --> 00:59:28,240
ومن ثم تعطينا
زر Search هنا.

1320
00:59:28,240 --> 00:59:31,520
إذن دعوني أحفظ هذا، وأعود إلى
صفحتي، إعادة التحميل.

1321
00:59:31,520 --> 00:59:36,580
والآن دعونا نمضي قدمًا ونبحث عن
"فئران" هذه المرة وأنقر فوق Search.

1322
00:59:36,580 --> 00:59:37,630
و ها هي ذا.

1323
00:59:37,630 --> 00:59:40,240
يوجد لدينا نتائج
كثيرة جدًا مننتائج البحث عن فئران.

1324
00:59:40,240 --> 00:59:41,830
لكن لماذا، هذا هو السؤال؟

1325
00:59:41,830 --> 00:59:45,790
حسنًا، كل ما قمت به،
باستخدام HTML وشكل HTML،

1326
00:59:45,790 --> 00:59:48,820
هو أنني قمت بإنشاء
تنسيق مُحدّد من عنوان URL،

1327
00:59:48,820 --> 00:59:53,410
واستدعيت برنامج Search من Google
باستخدام مدخل q يساوي فئران.

1328
00:59:53,410 --> 00:59:56,050
والآن، كملاحظة جانبية، إذا
أخذت المزيد من المدخلات،

1329
00:59:56,050 --> 00:59:57,850
ستكون بمثابة شيء كهذا--

1330
00:59:57,850 --> 01:00:01,870
شيء يساوي قيمة علامة عطف
شيء يساوي قيمة.

1331
01:00:01,870 --> 01:00:03,910
تقوم علامات العطف فقط بفصل
أزواج القيم الرئيسية

1332
01:00:03,910 --> 01:00:05,620
إذا كانت لديكم مدخلات متعددة على الصفحة.

1333
01:00:05,620 --> 01:00:08,560
لكن المبدأ في نهاية
المطاف هو نفسه.

1334
01:00:08,560 --> 01:00:09,670
إذن هو فعّال للغاية.

1335
01:00:09,670 --> 01:00:11,770
لم أقم بتنفيذ Google، في حد ذاته.

1336
01:00:11,770 --> 01:00:15,045
لكنني قمت بتنفيذ واجهة
التطبيق، واجهة المستخدم.

1337
01:00:15,045 --> 01:00:18,740
وفي المستقبل، ربما يمكننا أن نبدأ 
بالعمل على المنطق خلف الكواليس.

1338
01:00:18,740 --> 01:00:23,155
إذن أي أسئلة حول HTTP
وتقاربها مع HTML الآن؟

1339
01:00:23,155 --> 01:00:25,700


1340
01:00:25,700 --> 01:00:30,190
هل تشعرون بالاعتياد على HTML، لأننا
على وشك الانتقال إلى لغة أخرى؟

1341
01:00:30,190 --> 01:00:31,070
أجل؟

1342
01:00:31,070 --> 01:00:34,000
إذن بدت جميع أمثلتي
حتى الآن قبيحة، باستثناء باي بال.

1343
01:00:34,000 --> 01:00:35,000
لقد بدا جيدًا.

1344
01:00:35,000 --> 01:00:36,470
لكنني قمت فقط بنسخه ولصقه.

1345
01:00:36,470 --> 01:00:41,840
إذن كيف يمكننا البدء بتصميم
المواقع بطريقة جذابة أكثر؟

1346
01:00:41,840 --> 01:00:44,840
تُستخدم HTML، في نهاية المطاف،
غالبًا لإنشاء بنية صفحة ويب،

1347
01:00:44,840 --> 01:00:48,006
فقط عبر وضع البيانات التي تهتمون بها،
والكلمات التي تهمكم،

1348
01:00:48,006 --> 01:00:49,350
والصور التي تهتمون بها.

1349
01:00:49,350 --> 01:00:51,637
لكن الجماليات التي
تدوم أميالًا، إذا جاز التعبير،

1350
01:00:51,637 --> 01:00:54,470
من الألوان الجميلة جدًا وأحجام
الخطوط المناسبة والموضع

1351
01:00:54,470 --> 01:00:56,090
أشياء بالضبط حيث تريدون أن يكونوا--

1352
01:00:56,090 --> 01:01:00,676
هي وظيفة لغة أخرى
تُسمى CSS، أوراق الأنماط المتسلسلة.

1353
01:01:00,676 --> 01:01:02,300
هذه، أيضًا-- لا تُعد لغة برمجة.

1354
01:01:02,300 --> 01:01:05,790
إنها أمر جمالي تمامًا بطبيعتها.

1355
01:01:05,790 --> 01:01:08,490
إذن دعونا نمضي قدمًا
ونلقي نظرة على مثال.

1356
01:01:08,490 --> 01:01:11,180
دعوني أمضي قدمًا وأفتح
خادم الويب نفسه كما في السابق،

1357
01:01:11,180 --> 01:01:13,310
أفتح مثالًا رأيته في وقت سابق--

1358
01:01:13,310 --> 01:01:16,790
الذي أعددته في وقت سابق الذي يُطلق عليه css0.html.

1359
01:01:16,790 --> 01:01:20,109
لنفترض أن هذه هي الصفحة الرئيسية
التي أريد إنشاؤها لجون هارفارد.

1360
01:01:20,109 --> 01:01:22,400
ولاحظوا أن لدي اسمه،
مكتوب بخط كبير وغامق، في الأعلى.

1361
01:01:22,400 --> 01:01:25,650
وبخط أصغر قليلاً في
المنتصف وخط أصغر قليلاً

1362
01:01:25,650 --> 01:01:26,232
أسفل منه.

1363
01:01:26,232 --> 01:01:28,190
ولكن هذه مجرد اختلافات
صغيرة في حجم الخط.

1364
01:01:28,190 --> 01:01:30,350
كل ذلك موجود في منتصف الصفحة هنا.

1365
01:01:30,350 --> 01:01:33,830
كيف يمكنني بالفعل إعداد موقع الويب هذا؟

1366
01:01:33,830 --> 01:01:37,940
حسنًا، دعوني أمضي قدمًا 
وأنتقل إلى ملف جديد هنا.

1367
01:01:37,940 --> 01:01:40,689
سأسميه css0.html.

1368
01:01:40,689 --> 01:01:42,980
دعوني أمضي قدمًا وألصق نقطة
الانطلاق الخاصة بي، كما فعلتُ في السابق.

1369
01:01:42,980 --> 01:01:44,840
وسأسمي هذا css0.

1370
01:01:44,840 --> 01:01:46,962
ومن ثم في بنية
هذه الصفحة حيث

1371
01:01:46,962 --> 01:01:48,920
سأمضي قدمًا
وأضع ذلك المحتوى.

1372
01:01:48,920 --> 01:01:51,200
إذن على ما أذكر، أنه كان لديّ جون هارفارد.

1373
01:01:51,200 --> 01:01:56,350
ومن ثم أسفل ذلك، كان
"مرحبًا بكم في صفحتي الرئيسية!

1374
01:01:56,350 --> 01:02:00,710
حقوق الطبع والنشر،" ورمز غريب--
لذلك سأفعل هذا في الوقت الحالي--

1375
01:02:00,710 --> 01:02:02,330
"جون هارفارد."

1376
01:02:02,330 --> 01:02:03,440
حفظ.

1377
01:02:03,440 --> 01:02:05,300
إذن هذا هو css0.html.

1378
01:02:05,300 --> 01:02:09,090
دعوني أمضي قدمًا وأعيد
تحميلها مجددًا من الخادم.

1379
01:02:09,090 --> 01:02:11,960
و ها هو ذا.

1380
01:02:11,960 --> 01:02:15,235
إذن ما هو الخطأ، من الناحية الجمالية؟

1381
01:02:15,235 --> 01:02:16,610
من الواضح، جميعها على سطر واحد.

1382
01:02:16,610 --> 01:02:17,110
لكن لماذا؟

1383
01:02:17,110 --> 01:02:19,090
كيف أصلح هذا، كما كان من قبل؟

1384
01:02:19,090 --> 01:02:19,810
أجل؟

1385
01:02:19,810 --> 01:02:21,105
الجمهور: [INAUDIBLE]

1386
01:02:21,105 --> 01:02:21,980
ديفيد ج. مالان: أجل.

1387
01:02:21,980 --> 01:02:24,146
حتى يمكنني إضافة علامات 
الفقرة، فقط لوضع كل

1388
01:02:24,146 --> 01:02:25,460
هذه في فقرات فردية.

1389
01:02:25,460 --> 01:02:27,569
وقد تكون IDE أحيانًا
مزعجة بعض الشيء

1390
01:02:27,569 --> 01:02:30,110
لأنني الآن سأنتقل إلى
الخلف وسأضيف هذه الأشياء.

1391
01:02:30,110 --> 01:02:31,280
إذن إنها تحاول أن تكون مفيدة.

1392
01:02:31,280 --> 01:02:32,488
ولكن بعد ذلك يجب أن أحذفها.

1393
01:02:32,488 --> 01:02:35,570
إذن في بعض الأحيان، قد يتعطل 
الإكمال التلقائي هذا.

1394
01:02:35,570 --> 01:02:38,000
ولكن إصلاحه سهل بما فيه الكفاية-- أفتح p.

1395
01:02:38,000 --> 01:02:42,320
دعوني أنقل هذا إلى هنا
وأحرك هذا إلى هنا.

1396
01:02:42,320 --> 01:02:43,102
حفظ.

1397
01:02:43,102 --> 01:02:44,060
أعود إلى المتصفح.

1398
01:02:44,060 --> 01:02:45,559
لن يتغير الأمر من تلقاء نفسه.

1399
01:02:45,559 --> 01:02:47,010
أحتاج إلى النقر فوق إعادة تحميل.

1400
01:02:47,010 --> 01:02:48,680
والآن-- هذا أفضل.

1401
01:02:48,680 --> 01:02:50,750
إنه قبيح بعض الشيء-- توجد
مسافات أكثر مما أريد.

1402
01:02:50,750 --> 01:02:52,100
لكنها متقاربة، بالتأكيد.

1403
01:02:52,100 --> 01:02:54,200
دعونا نزيل رمز حقوق الطبع والنشر هذا.

1404
01:02:54,200 --> 01:02:57,090
تبين أن هناك بعض المفاتيح التي
لا يمكنك كتابتها فقط باستخدام لوحة المفاتيح الخاصة بك.

1405
01:02:57,090 --> 01:02:59,131
يمكنك بالتأكيد
نسخها ولصقها من مكان آخر.

1406
01:02:59,131 --> 01:03:02,840
لكن HTML، كملاحظة جانبية، تدعم
ما تسمى بالكيانات.

1407
01:03:02,840 --> 01:03:05,360
وهذه هي التعليمات البرمجية
الرقمية التي تُكتب في بعض الأحيان

1408
01:03:05,360 --> 01:03:08,000
بنظام السداسيّ العشريّ، وأحيانًا تُكتب
بالأرقام العشرية، اعتمادًا

1409
01:03:08,000 --> 01:03:09,620
على تفضيلاتك.

1410
01:03:09,620 --> 01:03:12,750
وهو مجرد رقم غريب
يمثل رمزًا.

1411
01:03:12,750 --> 01:03:14,030
وإلا لا يمكنكم كتابتها.

1412
01:03:14,030 --> 01:03:15,200
شاهدوا ذلك بينما أعيد تحميله الآن.

1413
01:03:15,200 --> 01:03:17,482
إذن ما الذي يحدث
لرمز حقوق الطبع النشر هذا؟

1414
01:03:17,482 --> 01:03:18,940
الآن هذا هو الشيء الذي قد تتوقعونه--

1415
01:03:18,940 --> 01:03:19,580
تفصيل صغير جدًا.

1416
01:03:19,580 --> 01:03:20,830
لا يستحق الأمر كل هذا الاهتمام.

1417
01:03:20,830 --> 01:03:22,986
ولكن هذه موجودة،
أيضًا، لأغراض جمالية.

1418
01:03:22,986 --> 01:03:24,360
لكن هذا ليس تمامًا ما أريده.

1419
01:03:24,360 --> 01:03:25,922
وهنا يأتي دور CSS.

1420
01:03:25,922 --> 01:03:27,630
يمكنني وضع البنية من
هذه الصفحة.

1421
01:03:27,630 --> 01:03:29,570
نعم، لديّ فقراتي
الثلاث المنفصلة.

1422
01:03:29,570 --> 01:03:30,930
لكنها ليست في المنتصف.

1423
01:03:30,930 --> 01:03:32,600
حجم الخط الخاص بها هو نفسه.

1424
01:03:32,600 --> 01:03:34,730
وتوجد فراغات غريبة هناك.

1425
01:03:34,730 --> 01:03:36,870
وهنا يمكن للغة CSS تقديم المساعدة.

1426
01:03:36,870 --> 01:03:38,960
إذن دعوني أقدّم 
بعض العلامات الجديدة بدلاً من ذلك.

1427
01:03:38,960 --> 01:03:40,420
هذه ليست فقرات على وجه التحديد.

1428
01:03:40,420 --> 01:03:43,010
إنها ليست جُملاً
وجُملاً من النص.

1429
01:03:43,010 --> 01:03:45,600
إنها تشبه رأس
الصفحة الخاصة بي إلى حد ما.

1430
01:03:45,600 --> 01:03:47,390
إذن دعوني في الواقع
أعيد تسمية هذا إلى رأس.

1431
01:03:47,390 --> 01:03:49,560
هذا ربما هو الجزء الرئيسي من صفحتي.

1432
01:03:49,560 --> 01:03:51,170
إذن دعوني أعيد تسمية هذا إلى main.

1433
01:03:51,170 --> 01:03:53,450
وهذا مثل تذييل
الصفحة الخاصة بي، التي سأزعم وجوده.

1434
01:03:53,450 --> 01:03:55,010
الآن، إنه موقع ويب فائق البساطة.

1435
01:03:55,010 --> 01:03:56,330
لكن هذه العلامات موجودة.

1436
01:03:56,330 --> 01:03:59,630
وفي الإصدار الأخير
من HTML الذي يُطلق عليه HTML5،

1437
01:03:59,630 --> 01:04:04,020
بدأ العالم بالابتعاد عن 
العلامات العامة، مثل p للفقرة،

1438
01:04:04,020 --> 01:04:08,150
واستخدام المزيد من العلامات الدلالية التي هي
أكثر وصفًا قليلاً التي وتقول،

1439
01:04:08,150 --> 01:04:11,030
مرحبًا، أيها المتصفح، ها هي رأس
الصفحة الخاصة بي، وعلى نحو قاطع،

1440
01:04:11,030 --> 01:04:14,090
لا يجب أن تخلطها مع رأس
صفحتك، وهي، مثل، العنوان.

1441
01:04:14,090 --> 01:04:16,215
ومرحبًا، أيها المتصفح، ها هو
الجزء الرئيسي من صفحتي.

1442
01:04:16,215 --> 01:04:17,480
وها هو تذييل صفحتي.

1443
01:04:17,480 --> 01:04:19,430
وسنرى لماذا تُعد هذه
مفيدة، حتى لو كان ذلك فقط

1444
01:04:19,430 --> 01:04:22,460
لأنها تصف صفحتي
بطريقة مقنعة أكثر.

1445
01:04:22,460 --> 01:04:25,610
ولكن تبين أن أي
علامة من HTML يمكن أن تحتوي على سمة

1446
01:04:25,610 --> 01:04:27,530
نمط، ولم نرها من قبل.

1447
01:04:27,530 --> 01:04:33,140
وإذا كنت أريد تغيير حجم خط 
هذه العلامة، فيمكنني قول، اجعلي هذا الخط أكبر.

1448
01:04:33,140 --> 01:04:39,200
وفي الأسفل هنا، يمكنني القول أن، النمط
يساوي حجم الخط، لنقل، متوسط.

1449
01:04:39,200 --> 01:04:44,720
ومن ثم في الأسفل هنا، يمكنني القول أن النمط
يساوي حجم الخط صغير.

1450
01:04:44,720 --> 01:04:49,040
ودعوني أحفظ ذلك، وأعود
مجددًا إلى المتصفح، وأعيد تحميله.

1451
01:04:49,040 --> 01:04:50,300
ولم تظهر في المنتصف بعد.

1452
01:04:50,300 --> 01:04:52,460
لكنها الآن بخط أكبر ومتوسط إلى حد ما--

1453
01:04:52,460 --> 01:04:55,620
كبير ومتوسط وصغير، وهو ما
 أردته في المرة الأولى.

1454
01:04:55,620 --> 01:04:57,410
إذن كيف يمكنني إضافة التمركز؟

1455
01:04:57,410 --> 01:05:00,020
حسنًا، يتضح أنه 
داخل علامات الاقتباس تلك،

1456
01:05:00,020 --> 01:05:02,870
يمكنكم استخدام الفاصلة المنقوطة 
للفصل بين العديد من الأفكار.

1457
01:05:02,870 --> 01:05:07,760
إذا وضعتُ فاصلة منقوطة هنا، 
يمكنني القول الآن، محاذاة النص في المنتصف.

1458
01:05:07,760 --> 01:05:12,020
ودعوني أمضي قدمًا وأنسخ 
وألصق هذا هنا وهنا.

1459
01:05:12,020 --> 01:05:12,920
حفظ.

1460
01:05:12,920 --> 01:05:14,120
ولاحظوا النمط.

1461
01:05:14,120 --> 01:05:17,770
توجد كلمة رئيسية،
ونقطتين، وقيمة.

1462
01:05:17,770 --> 01:05:19,370
تفصل بينهم فاصلة منقوطة.

1463
01:05:19,370 --> 01:05:22,070
وبعد ذلك توجد كلمة رئيسية،
ونقطتين، وقيمة.

1464
01:05:22,070 --> 01:05:24,080
هذا هو النمط نفسه 
الذي سنراه.

1465
01:05:24,080 --> 01:05:28,200
لو عدتُ إلى المتصفح، 
وقمتُ بإعادة تحميله الآن، نحن في طريقنا الآن.

1466
01:05:28,200 --> 01:05:31,150
الآن إنه يبدو تمامًا مثلما
كنت أريده أن يبدو.

1467
01:05:31,150 --> 01:05:32,560
وبذلتّ مجهودًا أكبر قليلاً.

1468
01:05:32,560 --> 01:05:35,380
ولكن بفضل CSS، تمكنتُ من فعل ذلك.

1469
01:05:35,380 --> 01:05:38,610
إذن ما ضللته هنا 
وما ظللته IDE باللون الأخضر

1470
01:05:38,610 --> 01:05:42,170
هو ما يُسمى بخصائص CSS،
أوراق الأنماط المتسلسة.

1471
01:05:42,170 --> 01:05:46,260
CSS تتيح لكم التعامل مع أشياء 
مثل التمركز وأحجام الخطوط

1472
01:05:46,260 --> 01:05:49,704
والألوان والموضع وكل الجماليات
التي أشرت إليها في وقت سابق.

1473
01:05:49,704 --> 01:05:51,870
وأنتم يجب أن تعرفوا فقط 
ماهية تلك القيم الرئيسية.

1474
01:05:51,870 --> 01:05:53,750
بصراحة، أنا لا أعرفها
جميعًا، بالتأكيد.

1475
01:05:53,750 --> 01:05:55,350
أنا أستخدم Google دائمًا عندما 
أريد أن أعرف كيف يمكنني

1476
01:05:55,350 --> 01:05:56,910
القيام بشيء ما باستخدام هذا النوع من العلامات.

1477
01:05:56,910 --> 01:05:58,800
هذا لأن هناك الكثير 
من المراجع المجانية عبر الإنترنت

1478
01:05:58,800 --> 01:05:59,841
التي تعرض لكم ذلك.

1479
01:05:59,841 --> 01:06:01,470
ولكنها جميعًا تتبع النمط نفسه--

1480
01:06:01,470 --> 01:06:06,420
كلمة رئيسية، نقطتين، قيمة-- ربما فاصلة منقوطة--
كلمة رئيسية، نقطتين، قيمة وهكذا.

1481
01:06:06,420 --> 01:06:08,760
ولكن حتى لو لم تكتبوا 
HTML من قبل،

1482
01:06:08,760 --> 01:06:12,270
فقد يمكنكم القول
أنني لا أقوم--

1483
01:06:12,270 --> 01:06:14,490
بتصميم ذلك بشكل رائع.

1484
01:06:14,490 --> 01:06:20,160
في لغة C، أيضًا، قد وجدتم خطأ
في أي وقت وكان حدسي هو النسخ واللصق.

1485
01:06:20,160 --> 01:06:22,460
ما هو الأمر المتكرر في هذا المثال؟

1486
01:06:22,460 --> 01:06:23,750
الجمهور: [INAUDIBLE]

1487
01:06:23,750 --> 01:06:24,625
ديفيد ج. مالان: أجل.

1488
01:06:24,625 --> 01:06:27,660
أنا أقوم بتمركز تلك السطور الثلاثة، وهذا
بصراحة، يبدو أمرًا غبيًا قليلاً.

1489
01:06:27,660 --> 01:06:29,280
تم نسخ هذا حرفيًا ولصقه.

1490
01:06:29,280 --> 01:06:31,320
وهذا دائمًا ما يوجهك
إلى الطريق الخاطئ.

1491
01:06:31,320 --> 01:06:33,820
إذن أوراق الأنماط المتسلسلة--

1492
01:06:33,820 --> 01:06:37,110
الحرف C الأول في Cascading Style Sheets، 
أو الحرف C الوحيد

1493
01:06:37,110 --> 01:06:39,660
في أوراق الأنماط المتسلسلة،
تشير إلى متسلسلة،

1494
01:06:39,660 --> 01:06:42,374
وهو يشير إلى تسلسل هرمي له، أيضًا.

1495
01:06:42,374 --> 01:06:44,040
إذن دعوني، في الواقع، أقدم مثالاً جديدًا.

1496
01:06:44,040 --> 01:06:47,880
دعوني أسمي هذا css1.html.

1497
01:06:47,880 --> 01:06:49,650
دعوني ألصق هذه التعليمة البرمجية نفسها بالضبط.

1498
01:06:49,650 --> 01:06:55,720
لكن تبين لي أن الرأس والجزء الرئيسي
والتذييل هم جميعًا عبارة عن أجزاء في البنية،

1499
01:06:55,720 --> 01:06:56,290
إذا صح التعبير.

1500
01:06:56,290 --> 01:06:57,390
إنهم بالتأكيد داخلها.

1501
01:06:57,390 --> 01:06:59,910
ويمكنكم-- يمكنكم فعلاً
استخدام مراجع شجرة العائلة

1502
01:06:59,910 --> 01:07:02,970
في سياق HTML،
حيث الرأس جزء من

1503
01:07:02,970 --> 01:07:07,240
البنية كما هي موجودة بداخلها، 
مطوية، موجودة، بداخلها.

1504
01:07:07,240 --> 01:07:10,200
حتى إذا كانوا جميعًا
لهم نفس الأب، إذا جاز التعبير،

1505
01:07:10,200 --> 01:07:13,920
دعوني أمحو
هذا من جميع العلامات الثلاث بالفعل.

1506
01:07:13,920 --> 01:07:17,670
ودعوني أطبق ذلك
على العلامة الأب بالفعل، قائلاً،

1507
01:07:17,670 --> 01:07:22,380
النمط يساوي محاذاة النص
في الوسط لأن

1508
01:07:22,380 --> 01:07:24,270
أوراق الأنماط المتسلسة، بالتأكيد، تقوم بالتسلسل.

1509
01:07:24,270 --> 01:07:28,770
لذلك إذا طبقت خاصية واحدة، مثل
المحاذاة في المنتصف، على الأب،

1510
01:07:28,770 --> 01:07:32,220
فستتسلسل لأسفل على جميع الأبناء
المتداخلين بها.

1511
01:07:32,220 --> 01:07:34,920
إذن دعوني أمضي قدمًا وأحفظ
ذلك، وأعود إلى القائمة،

1512
01:07:34,920 --> 01:07:37,860
وأفتح css1.html.

1513
01:07:37,860 --> 01:07:40,290
وها هي ذا-- لا يوجد اختلاف جمالي.

1514
01:07:40,290 --> 01:07:43,530
لكنه فقط مصمم بشكل أفضل،
كأنه 5 من أصل 5 في للتصميم

1515
01:07:43,530 --> 01:07:49,654
الآن، لكن ليس بالضرورة لأن
ذلك قبيح قليلاً، بصراحة.

1516
01:07:49,654 --> 01:07:51,570
ونحن لم تسنح لنا فرصة
القيام بذلك حتى الآن في C

1517
01:07:51,570 --> 01:07:53,850
لأن لدينا فقط لغة واحدة
في C. ويُعد، بشكل عام،

1518
01:07:53,850 --> 01:07:59,350
الأمر مرفوضًا أن تجمع لغة واحدة،
مثل CSS، مع لغة آخرى، مثل HTML.

1519
01:07:59,350 --> 01:08:00,900
وقد تبدو اللغتان متشابهتين للغاية.

1520
01:08:00,900 --> 01:08:01,980
وكلتاهما في نفس السياق.

1521
01:08:01,980 --> 01:08:02,760
لكن يصبح هذا الأمر مزعجًا.

1522
01:08:02,760 --> 01:08:04,200
وبشكل خاص في العالم الحقيقي، 
قد يكون بعض الأشخاص

1523
01:08:04,200 --> 01:08:05,700
أفضل باستخدام الجماليات
من الآخرين.

1524
01:08:05,700 --> 01:08:08,050
ومن الواضح، من أمثلتي،
أنني لست ضمن هؤلاء الأشخاص.

1525
01:08:08,050 --> 01:08:10,633
ولذا قد أرغب في العمل مع
زميل أو صديق

1526
01:08:10,633 --> 01:08:13,330
أفضل مني بكثير في التصميم
والألوان والخطوط.

1527
01:08:13,330 --> 01:08:16,370
ولذا قد أريد منه أن
يعمل بشكل مستقل عني.

1528
01:08:16,370 --> 01:08:19,920
سأعمل على بنية صفحة الإنترنت
أو، إذا صح التعبير، مشروعي النهائي،

1529
01:08:19,920 --> 01:08:22,689
وأدعه في الواقع يساهم
في الجماليات بشكل أكبر.

1530
01:08:22,689 --> 01:08:24,899
إذن كيف يمكننا أن نبدأ بفصل
هذه الأشياء؟

1531
01:08:24,899 --> 01:08:26,990
تمامًا مثل ما هو في C، نحن، على الأقل، 
لدينا ملفات رأس.

1532
01:08:26,990 --> 01:08:29,250
يمكننا فصل القواسم المشتركة.

1533
01:08:29,250 --> 01:08:32,850
حسنًا، اتضح أنه يمكننا فعل ذلك
بشكل مختلف قليلاً عن ما سبق.

1534
01:08:32,850 --> 01:08:39,689
دعوني أمضي قدمًا وأفتح مثال 2 الذي قمت
بإعداده في وقت سابق ويُسمى css2.html.

1535
01:08:39,689 --> 01:08:42,670
ودعونا نقوم بالتمرير خلال
هذا لبضع لحظات فقط.

1536
01:08:42,670 --> 01:08:47,540
لاحظوا الآن في بنية صفحة الويب، 
أنني قدمتُ علامة مختلفة--

1537
01:08:47,540 --> 01:08:51,149
بالأحرى، سمة
مختلفة تُسمى "فئة."

1538
01:08:51,149 --> 01:08:54,630
لذا اتضح أنه لا يجب أن تقوموا فقط
بنسخ ولصق أو كتابة

1539
01:08:54,630 --> 01:08:58,380
كل هذه التغييرات الصعبة في حجم الخط
وتغييرات محاذاة النص

1540
01:08:58,380 --> 01:08:58,979
يدويًا.

1541
01:08:58,979 --> 01:09:01,170
يمكنكم منحها 
أسماء وصفية أكثر.

1542
01:09:01,170 --> 01:09:04,200
ويمكن القول، أنه يمكنني وشريكي 
قراءتها بشكل جيد أكثر

1543
01:09:04,200 --> 01:09:08,220
لقراءة كلمة "في المنتصف" 
و"كبير" و"متوسط" و"صغير"

1544
01:09:08,220 --> 01:09:11,850
وعدم رؤية جميع علامات النقطتين
والفاصلة المنقوطة الغبية وتشتيت الذهن.

1545
01:09:11,850 --> 01:09:15,810
هذه الأشياء التي لا تثير الاهتمام
عند كتابة أي نوع من التعليمة البرمجية.

1546
01:09:15,810 --> 01:09:19,960
إذن من أين جاءت هذه الكلمات--
في المنتصف وكبير ومتوسط وصغير؟

1547
01:09:19,960 --> 01:09:23,939
حسنًا، لاحظوا أنها جميعًا قيم
لسمة الفئة، وهي--

1548
01:09:23,939 --> 01:09:25,590
تسمح بالتعديل.

1549
01:09:25,590 --> 01:09:28,680
دعوني أقوم بالتمرير إلى
رأس صفحة الويب الخاصة بي.

1550
01:09:28,680 --> 01:09:31,109
وسترون، غالبًا
مسافة بيضاء لأنني قمت فقط

1551
01:09:31,109 --> 01:09:32,910
بالضغط باستمرار على Enter لإزالتها--

1552
01:09:32,910 --> 01:09:36,720
لاحظوا أن داخل علامة html، كما في السابق،
توجد علامة الرأس الخاصة بي.

1553
01:09:36,720 --> 01:09:39,720
إذا قمت بالتمرير لأسفل،
تظل أيضًا علامة العنوان هناك.

1554
01:09:39,720 --> 01:09:42,850
لكن هناك علامة جديدة 
أشرتُ إليها في وقت سابق ضمن العلامات القليلة

1555
01:09:42,850 --> 01:09:45,000
التي يمكنكم وضعها هناك باسم "النمط."

1556
01:09:45,000 --> 01:09:47,520
يمكنكم نقل إلى
أعلى الصفحة

1557
01:09:47,520 --> 01:09:50,080
كل الأنماط
التي تهتمون بها.

1558
01:09:50,080 --> 01:09:51,630
ويمكنكم القيام بذلك على النحو التالي.

1559
01:09:51,630 --> 01:09:55,320
لاحظوا هنا أنني كتبت حرفيًا
كلمة "في المنتصف" بنقطة

1560
01:09:55,320 --> 01:09:57,840
قبلها، كلمة "كبير"
بنقطة قبلها،

1561
01:09:57,840 --> 01:09:59,910
كلمة "متوسط" بنقطة،
"صغير" بنقطة.

1562
01:09:59,910 --> 01:10:02,040
تلك تحدد الفئات.

1563
01:10:02,040 --> 01:10:05,460
لذا CSS تتيح لك تحديد
مجموعاتك الخاصة

1564
01:10:05,460 --> 01:10:06,919
من خصائص التكوين.

1565
01:10:06,919 --> 01:10:09,210
ويمكنكم أن تطلقوا عليها أسماء،
فقط لتكون وصفية أكثر

1566
01:10:09,210 --> 01:10:10,780
وسهل الاستخدام.

1567
01:10:10,780 --> 01:10:12,960
إذن يمكنك تحديد فئة،
فئة، فئة، فئة.

1568
01:10:12,960 --> 01:10:16,620
ومن ثم داخل الأقواس المتعرجة، التي
وضعتها هنا، تمامًا كما في C،

1569
01:10:16,620 --> 01:10:20,430
يمكنكم الحصول علي خاصية واحدة، 
خاصيتن، 100 خاصية.

1570
01:10:20,430 --> 01:10:24,180
لكن يمكنكم الاحتفاظ بها بشكل جيد
 ومنظم، بعيدًا عن كل HTML، حتى

1571
01:10:24,180 --> 01:10:27,150
يتمكّن شخص آخر من العمل عليها
أو فقط يمكنكم الحفاظ على الجماليات

1572
01:10:27,150 --> 01:10:28,905
منفصلة عن محتويات صفحتكم.

1573
01:10:28,905 --> 01:10:30,720
إنها فكرة لفصل
المخاوف.

1574
01:10:30,720 --> 01:10:33,688
إبقاء البيانات منفصلة عن
عرضها التقديمي هناك.

1575
01:10:33,688 --> 01:10:35,730
الجمهور: [INAUDIBLE]

1576
01:10:35,730 --> 01:10:38,730
ديفيد ج. مالان: هل توجد مكتبة 
يمكنك استخدامها لتقوم بهذا من أجلك؟

1577
01:10:38,730 --> 01:10:39,230
أجل.

1578
01:10:39,230 --> 01:10:41,650
وسنرى قليلاً من التشويق لهذا
خلال لحظات.

1579
01:10:41,650 --> 01:10:44,190
إذن أين أستخدم
هذه الكلمات، لتكون واضحة؟

1580
01:10:44,190 --> 01:10:46,530
هنا، أنا أقول أعطني
فئة تسمى في المنتصف،

1581
01:10:46,530 --> 01:10:49,560
فئة تُسمى كبير، ومتوسط،
وصغير، تحتوي كل فئة من هذه

1582
01:10:49,560 --> 01:10:52,180
على هذه الخصائص
المعنية المرتبطة بها.

1583
01:10:52,180 --> 01:10:54,272
ومن ثم في الأسفل هنا، 
فقط يمكنني استخدام هذه الكلمات.

1584
01:10:54,272 --> 01:10:55,980
ولا يجب أن 
أبدأ بكتابة

1585
01:10:55,980 --> 01:11:01,200
الفواصل المنقوطة، والأقواس المتعرجة،
وكل علامات الترقيم تلك في HTML الفعلية.

1586
01:11:01,200 --> 01:11:05,130
ولكن اتضح أنه يمكنني فعل هذا
بشكل رائع أكثر.

1587
01:11:05,130 --> 01:11:10,150
دعوني أفتح css3.html،
مثال آخر.

1588
01:11:10,150 --> 01:11:11,880
في هذه الحالة، لاحظوا ما قمت به.

1589
01:11:11,880 --> 01:11:16,540
الآن تصبح تعليمتي البرمجية
جميلة، بشكل نسبي،

1590
01:11:16,540 --> 01:11:18,720
أو من وجهة نظر شخص واحد.

1591
01:11:18,720 --> 01:11:20,670
الآن ليست لدي أي سمات.

1592
01:11:20,670 --> 01:11:21,840
هذا الأمر هو أكثر إحكامًا فقط.

1593
01:11:21,840 --> 01:11:24,990
أنا أستخدم أحرف أقل،
كلمات أقل، سطور أقل من التعليمة البرمجية.

1594
01:11:24,990 --> 01:11:26,705
هذا فقط، وبشكل عام، شيء جيد.

1595
01:11:26,705 --> 01:11:27,330
إنه عمل أقل.

1596
01:11:27,330 --> 01:11:30,300
انه عمل أقل للحفاظ على،
فرص أقل لحدوث خطأ.

1597
01:11:30,300 --> 01:11:33,210
لكنني تخلصتُ، على ما يبدو،
من كل تلك الجماليات،

1598
01:11:33,210 --> 01:11:37,350
لكن ليس بالضرورة، بسبب
CSS، هذه اللغة الثانية،

1599
01:11:37,350 --> 01:11:41,820
إنها تتيح لك أيضًا تطبيق الخصائص
ليس على العلامات عن طريق الفئات،

1600
01:11:41,820 --> 01:11:44,200
ولكن على العلامات الفعلية نفسها.

1601
01:11:44,200 --> 01:11:50,070
إذن إذا كانت لديكم بنية واحدة فقط، فإنه من الآمن
قول، حسنًا، CSS، طبّقي على علامة البنية

1602
01:11:50,070 --> 01:11:51,610
هذه الخاصية أو هذه الخصائص.

1603
01:11:51,610 --> 01:11:55,080
مرحبًا، أيها المتصفح، قم بتطبيق على علامة
الرأس هذه الخاصية أو هذه الخصائص--

1604
01:11:55,080 --> 01:11:57,640
على العلامة الرئيسية،
وعلامة التذييل، وهكذا.

1605
01:11:57,640 --> 01:12:00,570
لذلك لا أحتاج حتى إلى تعقيد
عالمي بشأن صغير، متوسط، كبير،

1606
01:12:00,570 --> 01:12:01,111
وهكذا.

1607
01:12:01,111 --> 01:12:04,020
يمكنني فقط تطبيق تلك
الخصائص الموجودة في أعلى الملف الخاص بي

1608
01:12:04,020 --> 01:12:06,210
على أسماء العلامات
المعنية، أيًا كانت.

1609
01:12:06,210 --> 01:12:07,440
ويمكنني استخدام علامة p.

1610
01:12:07,440 --> 01:12:10,390
يمكنني استخدام علامة image،
علامة a، أيًا من هذه.

1611
01:12:10,390 --> 01:12:12,220
يمكنني تصميمها بطرق مختلفة.

1612
01:12:12,220 --> 01:12:15,840
في الواقع، إذا كنتم تتسألون أو بدأتم
بالتساؤل عن الكيفية التي يمكنكم تغيير حجم صورة بها،

1613
01:12:15,840 --> 01:12:18,510
فيمكنكم تطبيق CSS على
علامة image وقول،

1614
01:12:18,510 --> 01:12:22,490
اجعلي هذا وحدات بكسل عديدة أو هذا وحدات
بكسل عديدة أو شيء من هذا القبيل.

1615
01:12:22,490 --> 01:12:22,990
نعم؟

1616
01:12:22,990 --> 01:12:25,870


1617
01:12:25,870 --> 01:12:31,630
الجمهور: هل هو تصميم سيء 
للاستمرار بعد ذلك في دفع [INAUDIBLE]

1618
01:12:31,630 --> 01:12:34,477


1619
01:12:34,477 --> 01:12:35,310
ديفيد ج. مالان: نعم.

1620
01:12:35,310 --> 01:12:38,340
إنه ليس تصميمًا سيئًا لنستمر فقط
في إضافة المزيد من الأشياء إلى الأعلى

1621
01:12:38,340 --> 01:12:40,410
ودفع المحتوى الفعلي
الخاص بك إلى أسفل وإلى أسفل

1622
01:12:40,410 --> 01:12:42,090
وإلى أسفل وتضخيم الملف فقط؟

1623
01:12:42,090 --> 01:12:46,230
أجل-- وهو تحول سلس لمثالنا
الرابع والأخير هنا، والذي

1624
01:12:46,230 --> 01:12:48,480
هو css4.html.

1625
01:12:48,480 --> 01:12:50,520
هذا المثال-- دعوني فقط أقوم بالتصغير.

1626
01:12:50,520 --> 01:12:51,780
هكذا.

1627
01:12:51,780 --> 01:12:58,020
يحتوي css4.html هذا على عدد أقل من سطور
التعليمة البرمجية، وبالفعل لا توجد فيه CSS

1628
01:12:58,020 --> 01:12:58,950
على الإطلاق.

1629
01:12:58,950 --> 01:13:02,640
هذا فقط موقع الويب الذي يهمني،
الكلمات والبيانات التي تهمني.

1630
01:13:02,640 --> 01:13:05,010
قد أحيلت كل الأشياء 
الجمالية، على الرغم من أنها أهميتها،

1631
01:13:05,010 --> 01:13:13,580
إلى ملف منفصل يمكنك استنتاجه
وهو يُسمى css4.css.

1632
01:13:13,580 --> 01:13:17,420
لسوء الحظ، وكان هذا قرار تصميم غبي
أعدّه البشر منذ سنوات،

1633
01:13:17,420 --> 01:13:21,890
الطريقة التي تقوم بها بتضمين CSS
من ملف منفصل

1634
01:13:21,890 --> 01:13:26,090
هي، بشكل متناقض، استخدام
علامة رابط، وليس علامة a،

1635
01:13:26,090 --> 01:13:28,670
والتي ربما يجب أن يُطلق
عليها علامة الرابط.

1636
01:13:28,670 --> 01:13:30,960
ولكن لديكم علاقة
من ورقة النمط.

1637
01:13:30,960 --> 01:13:33,440
إذن أحيانًا، يتخذ البشر
قرارات ضعيفة.

1638
01:13:33,440 --> 01:13:34,940
هذا القرار إحداها، كما كنت أقول.

1639
01:13:34,940 --> 01:13:38,180
ولكن إذا قمتم بنسخ هذا ولصقه
ووثقتم أن هذا يعني، مرحبًا، أيها المتصفح،

1640
01:13:38,180 --> 01:13:42,800
افتح هذا الملف واستخدم هذه الميزات
من الملف في هذا الملف،

1641
01:13:42,800 --> 01:13:46,280
إنها متشابهة، في جوهرها، لعلامة
التجزئة من C بما في ذلك الآلية.

1642
01:13:46,280 --> 01:13:47,880
إنها تبدو مختلفة قليلاً.

1643
01:13:47,880 --> 01:13:48,910
إذن ما الذي يوجد في هذا الملف؟

1644
01:13:48,910 --> 01:13:52,674
حسنًا، ربما يمكنكم 
التخمين، إذا انتقلتُ إلى css4.css،

1645
01:13:52,674 --> 01:13:53,840
إنه فقط ذلك المحتوى نفسه.

1646
01:13:53,840 --> 01:13:57,170
لكنني استبعدته من تقديراتي، كما تلاحظون--
لم يكن التصميم الأفضل لكي نحفتظ به

1647
01:13:57,170 --> 01:13:58,010
معًا.

1648
01:13:58,010 --> 01:13:59,945
لذلك يمكنني ببساطة وضعه هناك بدلاً من هنا.

1649
01:13:59,945 --> 01:14:02,560


1650
01:14:02,560 --> 01:14:03,990
أية أسئلة؟

1651
01:14:03,990 --> 01:14:06,210
أجل؟

1652
01:14:06,210 --> 01:14:10,950
الجمهور: في اللغة الآخرى،
اللغة الرابعة المثالية، وأفضلها،

1653
01:14:10,950 --> 01:14:13,020
ما هى وظيفة "ورقة النمط"؟

1654
01:14:13,020 --> 01:14:14,270
ديفيد ج. مالان: سؤال جيد.

1655
01:14:14,270 --> 01:14:15,936
ما هى وظيفة ورقة النمط في هذا المثال؟

1656
01:14:15,936 --> 01:14:18,990
الإجابة المختصرة هي أنها
توضح فقط للمتصفح

1657
01:14:18,990 --> 01:14:24,970
العلاقة بين هذا الملف،
css4.css، وهذا الملف،

1658
01:14:24,970 --> 01:14:27,840
الذي هو ملف HTML، هي
من"ورقة نمط."

1659
01:14:27,840 --> 01:14:30,780
إذن CSS، أوراق الأنماط المتسلسلة--
عبارة عن كلمات كثيرة

1660
01:14:30,780 --> 01:14:32,430
فقط لتحويل فكرة الجماليات.

1661
01:14:32,430 --> 01:14:34,510
لكن هذه هي ورقة النمط الخاصة بك، حرفيًا.

1662
01:14:34,510 --> 01:14:39,546
إنه ملف فعلي ينتهي في .css
والذي يجب تطبيقه على لغة HTML هذه.

1663
01:14:39,546 --> 01:14:40,045
أجل؟

1664
01:14:40,045 --> 01:14:43,300
الجمهور: [INAUDIBLE]

1665
01:14:43,300 --> 01:14:45,160


1666
01:14:45,160 --> 01:14:46,665
ديفيد ج. مالان: تصميم أفضل لماذا؟

1667
01:14:46,665 --> 01:14:49,920
الجمهور: [INAUDIBLE]

1668
01:14:49,920 --> 01:14:52,731


1669
01:14:52,731 --> 01:14:54,480
ديفيد ج. مالان: إنه
سؤال جيد حقًا.

1670
01:14:54,480 --> 01:14:56,090
لذا خلاصة القول، هل هو-- أليس كذلك--

1671
01:14:56,090 --> 01:14:59,389
أليس هذا تصميم أفضل، للحصول على
ملف واحد باستخدام HTML وCSS،

1672
01:14:59,389 --> 01:15:01,430
بدلاً من اثنين لأن
الأشياء قد تكون في غير موضعها؟

1673
01:15:01,430 --> 01:15:02,450
الآن هما منفصلين.

1674
01:15:02,450 --> 01:15:03,970
لا يوجد الرابط المتأصل نفسه.

1675
01:15:03,970 --> 01:15:04,952
ربما، بصراحة.

1676
01:15:04,952 --> 01:15:06,160
هذا قلق منطقي.

1677
01:15:06,160 --> 01:15:07,880
لن يوافق الأشخاص المنطقيون.

1678
01:15:07,880 --> 01:15:10,490
بشكل عام، أنا أقول
أن عالم البرمجة

1679
01:15:10,490 --> 01:15:13,310
قرر أن الفصل
بين الأمور المقلقة أمر جيد.

1680
01:15:13,310 --> 01:15:16,400
لذا احتفظوا بلغة HTML في ملف واحد،
CSS في ملف آخر.

1681
01:15:16,400 --> 01:15:17,909
احفظهم في المجلد نفسه.

1682
01:15:17,909 --> 01:15:20,700
وبصراحة، إذا فقدت
ملفاتك في مجلد طوال الوقت،

1683
01:15:20,700 --> 01:15:21,825
ربما تكون المشكلة--

1684
01:15:21,825 --> 01:15:23,960
مشكلة بشرية، وليست مشكلة فنية.

1685
01:15:23,960 --> 01:15:25,310
لكنك أثرتَ نقطة جيدة، أيضًا.

1686
01:15:25,310 --> 01:15:29,100
ويمكنك القول، بدرجة معقولة من المصداقية، 
أنك فقط تبالغ في تصميم هذا

1687
01:15:29,100 --> 01:15:29,600
الآن.

1688
01:15:29,600 --> 01:15:31,070
أنا أفضل ذلك تمامًا.

1689
01:15:31,070 --> 01:15:34,310
وسترى في موقع CS50 على الويب
وFacebook وGoogle وغيرها--

1690
01:15:34,310 --> 01:15:36,980
في بعض الأحيان، ترى
CSS مع HTML

1691
01:15:36,980 --> 01:15:39,390
لأن البشر قرروا أن ذلك 
أكثر منطقية.

1692
01:15:39,390 --> 01:15:43,370
لكن توجد هذه الآليات في مكانها
لتسهيل التعاون،

1693
01:15:43,370 --> 01:15:47,570
لتسهيل الفصل، حتى يمكنك
أن تحتفظ بالأشياء منظمة أكثر

1694
01:15:47,570 --> 01:15:49,910
في ملفات منفصلة.

1695
01:15:49,910 --> 01:15:52,390
أية أسئلة أخرى؟

1696
01:15:52,390 --> 01:15:56,150
إذن لنلخص ما توصلنا إليه،
لأن ذلك سريع جدًا،

1697
01:15:56,150 --> 01:15:59,730
HTTP هو هذا البروتوكول الذي من خلال
يمكنك فقط تبادل المعلومات

1698
01:15:59,730 --> 01:16:03,510
من A إلى B وB إلى A. 
HTML هي اللغة التي تتم كتابة صفحات الويب

1699
01:16:03,510 --> 01:16:06,780
بها، بنية صفحة الويب تلك،
والتي تحتوي بالفعل على بياناتك.

1700
01:16:06,780 --> 01:16:08,940
وتتيح لك CSS ضبطها.

1701
01:16:08,940 --> 01:16:10,695
الآن، لم أقم بضبطه
كله بشكل دقيق كثيرًا.

1702
01:16:10,695 --> 01:16:12,570
أنا فقط قمت بوضعه في المنتصف
وقمت بتغيير حجم الخط.

1703
01:16:12,570 --> 01:16:15,197
لكن بصراحة، يمكننا بسرعة
الحصول على تعقيدات الألوان

1704
01:16:15,197 --> 01:16:16,530
والموضع وكل ذلك.

1705
01:16:16,530 --> 01:16:20,222
ولكن هذا ما سنفعله في الأقسام 
وفي Psets و في البحث على Google والنظر

1706
01:16:20,222 --> 01:16:21,930
في المراجع الموجودة على الإنترنت
التي سنرشدك إليها

1707
01:16:21,930 --> 01:16:27,030
لأنها جميعًا تتبع فقط
نفس أنماط العلامات ذات السمات

1708
01:16:27,030 --> 01:16:28,380
ومن ثم خصائص CSS.

1709
01:16:28,380 --> 01:16:31,650
لذا على الرغم من أنكم لم تروا
جميع مفردات CSS وHTML،

1710
01:16:31,650 --> 01:16:35,800
لكنكم رأيتم البنية بأكملها،
المفاهيم الأساسية.

1711
01:16:35,800 --> 01:16:39,360
لذلك دعونا نقدم بعد ذلك القطعة
النهائية من اللغز

1712
01:16:39,360 --> 01:16:41,790
ونعود لنسترجع
بعض قدرات

1713
01:16:41,790 --> 01:16:44,670
البرمجة الخاصة بنا من الأسابيع القليلة الماضية.

1714
01:16:44,670 --> 01:16:49,890
لذلك يتضح أنه في
عالم HTML وCSS،

1715
01:16:49,890 --> 01:16:53,670
يمكنكم في الواقع تقديم
لغة برمجة، أيضًا،

1716
01:16:53,670 --> 01:16:57,780
لجعل مواقعكم على الويب ديناميكية أكثر
باستخدام شيء يُسمى JavaScript.

1717
01:16:57,780 --> 01:17:00,000
الكثير منكم قد درسوا
APCS ويعرفون Java--

1718
01:17:00,000 --> 01:17:01,110
لا توجد علاقة بينهما.

1719
01:17:01,110 --> 01:17:03,810
JavaScript مجرد قرار
تسويق لهم--

1720
01:17:03,810 --> 01:17:06,210
يُطلق عليه شيء مشابه
للغة شائعة بالفعل.

1721
01:17:06,210 --> 01:17:11,160
لذا، فإن JavaScript هو لغة
مستخدمة في المتصفحات، عادة،

1722
01:17:11,160 --> 01:17:14,820
لتمنحكم المزيد من التحكم
على تجربة المستخدمين.

1723
01:17:14,820 --> 01:17:18,120
على سبيل المثال، عندما تزورون Gmail
هذه الأيام وتحصلون على بريد جديد،

1724
01:17:18,120 --> 01:17:21,600
فإنه يظهر بطريقة سحرية
كصف جديد في البريد الوارد.

1725
01:17:21,600 --> 01:17:24,810
لا يجب أن تعيد التحميل أو تستمر في الضغط
على تحديث لرؤية البريد الجديد.

1726
01:17:24,810 --> 01:17:26,910
إنه يظهر فقط بطريقة سحرية.

1727
01:17:26,910 --> 01:17:28,920
عندما تستخدم خرائط Google
أو شيء ما،

1728
01:17:28,920 --> 01:17:31,260
يمكنك فقط النقر والسحب
ومشاهدة المزيد من الخرائط.

1729
01:17:31,260 --> 01:17:33,510
في أيامي، كان يجب أن
تنقر فوق السهم الأيمن

1730
01:17:33,510 --> 01:17:35,560
للانتقال إلى هذا الاتجاه، وسهم
أيسر للانتقال إلى ذلك الاتجاه.

1731
01:17:35,560 --> 01:17:37,950
وتقوم صفحة الويب بأكملها
بإعادة التحميل في الواقع.

1732
01:17:37,950 --> 01:17:41,940
لكن JavaScript تمنحك المنطق
وقدرات البرمجة

1733
01:17:41,940 --> 01:17:46,860
في أجهزة Mac وأجهزة الكمبيوتر الشخصي والهواتف
التي يتم تنفيذها ليس على خادمك فقط،

1734
01:17:46,860 --> 01:17:51,360
ولكن على المتصفح، مما يعني أنه يمكنك أن
تقوم بالكثير من الأشياء عن طريق تشغيل التعليمة البرمجية

1735
01:17:51,360 --> 01:17:52,900
على أجهزة الكمبيوتر.

1736
01:17:52,900 --> 01:17:54,340
إذن ما الذي يعنيه كل هذا بالفعل؟

1737
01:17:54,340 --> 01:17:56,490
حسنًا، في JavaScript،
لحسن الحظ، لدينا

1738
01:17:56,490 --> 01:18:00,120
لغة متشابهة جدًا للغة C.
ولكن يتم تفسيرها من الأعلى

1739
01:18:00,120 --> 01:18:01,609
إلى الأسفل، من اليسار إلى اليمين.

1740
01:18:01,609 --> 01:18:04,650
يقرأ المتصفح الإرشادات فقط
في JavaScript ويقوم بها فقط.

1741
01:18:04,650 --> 01:18:06,020
لا يوجد تحويل برمجي لك.

1742
01:18:06,020 --> 01:18:07,210
لا يوجد أصفار وواحدات.

1743
01:18:07,210 --> 01:18:09,870
وبهذا المعنى، فإنه
أسهل فقط من C.

1744
01:18:09,870 --> 01:18:15,660
أيضًا، ليس لديها مؤشرات، والتي هي
أيضًا أسهل من C.

1745
01:18:15,660 --> 01:18:19,030
ولكنه يعطينا
القدرة على تغيير صفحة ويب

1746
01:18:19,030 --> 01:18:20,852
بمجرد تسليمها إلى مستخدم.

1747
01:18:20,852 --> 01:18:23,310
وسنرى ما يمكننا
القيام به بالفعل باستخدام تلك القدرة.

1748
01:18:23,310 --> 01:18:24,710
لكن أولاً، دعونا نقارن ونباين.

1749
01:18:24,710 --> 01:18:27,510
ستتذكرون منذ بضعة أسابيع،
في الأسبوع 1، عندما قدمنا ​​C،

1750
01:18:27,510 --> 01:18:29,970
سحبنا بعض من سكراتش وسحبنا
بعض من C، فقط لإظهار

1751
01:18:29,970 --> 01:18:31,590
أن الأفكار ما تزال هي نفسها.

1752
01:18:31,590 --> 01:18:33,240
لنفعل نفس الأمر بسرعة هنا.

1753
01:18:33,240 --> 01:18:37,080
لذا انتقلنا من سكراتش إلى C. دعونا
الآن ننتقل إلى JavaScript باستخدام المتغيرات.

1754
01:18:37,080 --> 01:18:41,340
لذا في C، إذا أردت تعيين
عداد إلى 0 مثل سكراتش،

1755
01:18:41,340 --> 01:18:43,920
يمكنك القول حرفيًا أن
العداد يساوي 0، فاصلة منقوطة.

1756
01:18:43,920 --> 01:18:46,260
لكنك ستحصل على
نوع البيانات إلى اليسار.

1757
01:18:46,260 --> 01:18:48,690
في JavaScript، تكون التعليمة البرمجية
هي نفسها تقريبًا.

1758
01:18:48,690 --> 01:18:50,880
ولكنك في الواقع لا تحدد
أنواع البيانات.

1759
01:18:50,880 --> 01:18:54,570
لا تقلق، كمبرمج، بشأن
الأعداد الصحيحة أو القيم الكسرية أو السلاسل

1760
01:18:54,570 --> 01:18:55,500
أو كل ذلك.

1761
01:18:55,500 --> 01:18:57,180
قمتَ بتعريف المتغير.

1762
01:18:57,180 --> 01:18:59,820
والكلمة الرئيسية للاستخدام، على الرغم من
أن هناك العديد من الخيارات

1763
01:18:59,820 --> 01:19:01,590
التي تفعل أشياء مختلفة قليلاً، هو يسمح.

1764
01:19:01,590 --> 01:19:06,480
والتفكير هو ما يسمح للعداد
أن يساوي 0، من فضلك، إذا صح التعبير.

1765
01:19:06,480 --> 01:19:09,450
لكنك لا تحدد النوع،
على الرغم من أن JavaScript تدعم

1766
01:19:09,450 --> 01:19:11,790
الأرقام والسلاسل، وما إلى ذلك.

1767
01:19:11,790 --> 01:19:14,340
فقط لا يجب أن تهتم
بهم كثيرًا بعد الآن.

1768
01:19:14,340 --> 01:19:15,960
لنفترض أنك تريد تحديث متغير.

1769
01:19:15,960 --> 01:19:18,780
في سكراتش، تقوم فقط
بتغيير العداد إلى واحد.

1770
01:19:18,780 --> 01:19:22,800
في C، ستقوم بإعداد
العدّاد ليكون مساويًا للعدّاد زائد 1، فاصلة منقوطة.

1771
01:19:22,800 --> 01:19:25,560
في JavaScript، ستقوم
بنفس الشيء بالضبط.

1772
01:19:25,560 --> 01:19:27,060
التعليمة البرمجية متطابقة.

1773
01:19:27,060 --> 01:19:29,580
في C، يمكنك أيضًا
كتابة هذا بإيجاز

1774
01:19:29,580 --> 01:19:32,067
حيث العداد زائد يساوي 1،
فاصلة منقوطة، إذا كنتم تتذكرون ذلك.

1775
01:19:32,067 --> 01:19:33,150
إذا لم تفعلوا، فلا بأس.

1776
01:19:33,150 --> 01:19:35,070
هذا مجرد تدوين شديد الاقتضاب.

1777
01:19:35,070 --> 01:19:37,560
في JavaScript-- نفس الشيء بالضبط.

1778
01:19:37,560 --> 01:19:39,810
في C، يمكنك أيضًا القيام
بعدّاد زائد، زائد

1779
01:19:39,810 --> 01:19:41,580
فاصلة منقوطة لزيادة القيمة--

1780
01:19:41,580 --> 01:19:43,290
في JavaScript، نفس الشيء.

1781
01:19:43,290 --> 01:19:45,210
هذا هو الشيء اللطيف حول JavaScript.

1782
01:19:45,210 --> 01:19:47,670
أنت تعرف الكثير عنه
بالفعل حسب طبيعة

1783
01:19:47,670 --> 01:19:50,670
قضاء عدة
أسابيع في تعقيدات لغة C.

1784
01:19:50,670 --> 01:19:54,870
لنفترض أن لديك حالة إذا،
هكذا-- إذا كانت x أقل من y.

1785
01:19:54,870 --> 01:19:56,850
في C، نكتبها
هكذا على اليمين.

1786
01:19:56,850 --> 01:19:59,130
صيغة JavaScript هي نفسها.

1787
01:19:59,130 --> 01:20:02,070
إذا كانت لديك ماذا لو أخرى،
فإن الصيغة هي نفسها.

1788
01:20:02,070 --> 01:20:03,480
ماذا لو أخرى، ماذا لو أخرى--

1789
01:20:03,480 --> 01:20:05,670
فإن الصيغة هي نفسها.

1790
01:20:05,670 --> 01:20:09,550
إذا كنت ترغب في إجراء تكرار حلقي للأبد،
فستكون الصيغة هي نفسها، في حالة إذا كانت صحيحة.

1791
01:20:09,550 --> 01:20:15,010
إذا كنت ترغب في إجراء تكرار حلقي،
فإن الصيغة هي نفسها تقريبًا.

1792
01:20:15,010 --> 01:20:16,790
يسمح بحاجة إلى أن يتم استخدامه بدلاً من ذلك.

1793
01:20:16,790 --> 01:20:20,680
إذن هذا هو C لأنه يقول أن
int i يساوي 0، وهكذا.

1794
01:20:20,680 --> 01:20:21,810
هذا هو نوع البيانات.

1795
01:20:21,810 --> 01:20:24,430
أJavaScript-- أنا فقط
أزعم لا تقلقوا--

1796
01:20:24,430 --> 01:20:26,660
لا داعي للقلق
بشأن أنواع البيانات هذه.

1797
01:20:26,660 --> 01:20:29,530
لذا في JavaScript، ستقول
بدلاً من ذلك "يسمح" بدلاً من ذلك.

1798
01:20:29,530 --> 01:20:32,150
ولكن بخلاف ذلك، فإن الصيغة هي نفسها.

1799
01:20:32,150 --> 01:20:34,360
لذا هذه نقطة انطلاق
جيدة لأنه لا يوجد

1800
01:20:34,360 --> 01:20:36,250
أي شيء جديد لتعلمه من الناحية البنائية.

1801
01:20:36,250 --> 01:20:39,430
نحتاج فقط لتطبيق نفس المنطق
الذي رأيناه في الأسبوع 0 و1

1802
01:20:39,430 --> 01:20:41,620
منذ HTML.

1803
01:20:41,620 --> 01:20:45,017
إذن إذا كانت هذه صفحة ويب ممثلة،
وإن كانت بسيطة جدًا--

1804
01:20:45,017 --> 01:20:46,600
هذا ما أعددته في وقت سابق--

1805
01:20:46,600 --> 01:20:49,000
كيف يمكننا الآن البدء في
التفكير حول صفحة الويب هذه

1806
01:20:49,000 --> 01:20:52,300
بطريقة مواتية
لبرمجة ذلك

1807
01:20:52,300 --> 01:20:54,610
وتغييره في الواقع بشكل ديناميكي؟

1808
01:20:54,610 --> 01:20:59,980
حسنًا، دعوني أقترح أنكم تفكرون في
صفحة الويب نفسها باعتبارها مجرد شجرة.

1809
01:20:59,980 --> 01:21:03,219
وقدمنا الأشجار منذ أسبوع فقط،
وإن كان ذلك في سياق لغة C.

1810
01:21:03,219 --> 01:21:05,260
وبصراحة، في C، إنها
تعد أمرًا مزعجًا لأنه

1811
01:21:05,260 --> 01:21:09,100
يجب أن تربط الأشياء معًا باستخدام
مؤشرات وعُقد وكل ذلك.

1812
01:21:09,100 --> 01:21:10,480
لا تقلق بشأن ذلك الآن.

1813
01:21:10,480 --> 01:21:14,299
إنها مهمة المتصفح لبناء
هذا في الذاكرة أو ذاكرة الوصول العشوائي من أجلك.

1814
01:21:14,299 --> 01:21:16,840
وبالفعل، عندما أستمر في القول
للمتصفح، عند استلام

1815
01:21:16,840 --> 01:21:19,880
ظرف باستخدام HTML، أن يقرأه من
الأعلى إلى الأسفل، ومن اليسار إلى اليمين،

1816
01:21:19,880 --> 01:21:21,380
لم أقل ما يفعله به.

1817
01:21:21,380 --> 01:21:24,760
ما يفعله به بشكل أساسي
هو أنه يقوم بإنشاء بنية البيانات هذه

1818
01:21:24,760 --> 01:21:26,230
في الذاكرة من أجلك.

1819
01:21:26,230 --> 01:21:30,520
وهو Chrome أو Edge أو Firefox
أو أي متصفح تستخدمه

1820
01:21:30,520 --> 01:21:34,480
هو نفسه مكتوب على الأرجح في C
أو C ++ أو بعض اللغات الأخرى.

1821
01:21:34,480 --> 01:21:37,270
كتب بعض الأشخاص الآخرون في
تلك الشركات التعليمة البرمجية

1822
01:21:37,270 --> 01:21:40,120
التي تبني كل
المؤشرات و/أو أيًا كان

1823
01:21:40,120 --> 01:21:42,490
ما يتم استخدامه لبناء هذه البنية في الذاكرة.

1824
01:21:42,490 --> 01:21:46,870
لكن هذا ما يضعه المتصفح
في الاعتبار بمجرد قراءته للغة HTML الخاصة بك.

1825
01:21:46,870 --> 01:21:49,390
والآن هذه بنية البيانات
في الذاكرة،

1826
01:21:49,390 --> 01:21:51,400
يمكنك إجراء تغييرات عليها،
تمامًا مثلما كان في الأسبوع الماضي،

1827
01:21:51,400 --> 01:21:54,580
كنا نقوم بإدراج الأشخاص في
القائمة المرتبطة، لتغيير بنية البيانات.

1828
01:21:54,580 --> 01:21:59,470
يمكن أن يضيف المتصفح عُقد أكثر أو
علامات أكثر إلى الصفحة، بطريقة ديناميكية.

1829
01:21:59,470 --> 01:22:01,960
لذلك إذا قمتَ بالتفكير
بهذا داخل عقلك، عندما

1830
01:22:01,960 --> 01:22:05,060
تحصل على بريد إلكتروني جديد في
Gmail، ما الذي يحدث؟

1831
01:22:05,060 --> 01:22:07,750
حسنًا، صفحة الويب، عندما تقوم
بتحميلها أول مرة في Gmail،

1832
01:22:07,750 --> 01:22:12,550
تحتوي على مجموعة كاملة من علامات td، على الأرجح،
أو علامات tr، بدلاً من ذلك، لصف جدول--

1833
01:22:12,550 --> 01:22:15,940
صف جدول، صف جدول-- من المحتمل أن كل منها
تمثل رسالة بريد إلكتروني.

1834
01:22:15,940 --> 01:22:21,700
عندما تستلم رسالة بريد إلكتروني جديدة، فمن
المحتمل أن يضيف المتصفح عقدة tr أخرى

1835
01:22:21,700 --> 01:22:24,325
لهذه الشجرة لأنه
لاحظوا الكلمات هنا.

1836
01:22:24,325 --> 01:22:25,870
تتطابق Html مع هذه العلامة.

1837
01:22:25,870 --> 01:22:27,460
تتطابق الرأس مع هذه العلامة.

1838
01:22:27,460 --> 01:22:29,200
تتطابق البنية مع هذه العلامة.

1839
01:22:29,200 --> 01:22:32,050
لذا فهي ترمز إلى السبب وراء أنه عندما
تحصل على صف آخر في بريدك الوارد

1840
01:22:32,050 --> 01:22:36,460
باستخدام بريد إلكتروني آخر، فإن شخص
 يضيف فقط عقدة إلى تلك الشجرة.

1841
01:22:36,460 --> 01:22:39,940
وهذا الشخص هو
JavaScript، اللغة

1842
01:22:39,940 --> 01:22:44,320
التي يمكنك بها التحكم في متصفح المستخدمين
حتى بعد تحميل

1843
01:22:44,320 --> 01:22:45,959
صفحة الويب الخاصة بك لأول مرة.

1844
01:22:45,959 --> 01:22:47,500
إذن ما الذي يمكننا فعله بهذا في الواقع؟

1845
01:22:47,500 --> 01:22:49,580
دعونا نبدأ ببساطة، على النحو التالي.

1846
01:22:49,580 --> 01:22:57,250
دعوني أمضي قدمًا وأُعِد فقط، بسرعة،
ملف يُسمى hello0.html.

1847
01:22:57,250 --> 01:23:01,220
وسنقوم بذلك، كما قمنا من قبل،
مع DOCTYPE html--

1848
01:23:01,220 --> 01:23:03,820
علامة html الخاصة بي هنا، علامة الرأس الخاصة بي هنا.

1849
01:23:03,820 --> 01:23:06,160
سيكون عنواني هو hello0 هنا.

1850
01:23:06,160 --> 01:23:08,684
ولاحظوا أنني نقلت
هذه لسطور منفصلة.

1851
01:23:08,684 --> 01:23:11,350
لا تحتاج على وجه التحديد إلى القيام
بذلك-- فقط للحفاظ على التسلسل الهرمي.

1852
01:23:11,350 --> 01:23:13,150
المسافة، مجددًا لا تهم.

1853
01:23:13,150 --> 01:23:14,440
لكنني سأكون منسقًا هناك.

1854
01:23:14,440 --> 01:23:18,140
وفي بنيي هنا، سأقول
هذ المرة فقط "مرحبًا، أيها العالم" بشكل افتراضي.

1855
01:23:18,140 --> 01:23:20,500
هذه صفحة ويب بسيطة
للغاية أيضًا.

1856
01:23:20,500 --> 01:23:22,810
دعونا، بالفعل، الآن
نجعلها تفاعلية.

1857
01:23:22,810 --> 01:23:25,297
كانت جميع صفحات الويب الخاصة بي حتى الآن
عبارة عن محتوى ثابت،

1858
01:23:25,297 --> 01:23:26,380
باستثناء صفحات Google.

1859
01:23:26,380 --> 01:23:29,950
لكن حتى تلك لم تكن تفاعلية كثيرًا
كما كانت في اللحظة التي ضغطت فيها على Submit،

1860
01:23:29,950 --> 01:23:32,650
لقد جعل المشكلة مشكلة
Google ليتم التعامل معها.

1861
01:23:32,650 --> 01:23:34,610
دعونا نحتفظ بالمستخدم معي هذه المرة.

1862
01:23:34,610 --> 01:23:36,190
دعوني أمضي قُدمًا وأقوم بذلك.

1863
01:23:36,190 --> 01:23:38,290
دعوني أتخلص من هذا الشكل هنا.

1864
01:23:38,290 --> 01:23:43,300
دعوني أقوم بإنشاء ملف جديد الآن
يُسمى hello1 كإصداري التالي.

1865
01:23:43,300 --> 01:23:45,190
ودعوني أمضي قدمًا
وألصق تلك التعليمة البرمجية نفسها.

1866
01:23:45,190 --> 01:23:49,750
لكن هذه المرة، دعوني أجعل
المتصفح تفاعليًا قليلاً.

1867
01:23:49,750 --> 01:23:54,580
دعوني أمضي قدمًا وأحصل على شكل هنا
لأن ما أريده هو مربع نص--

1868
01:23:54,580 --> 01:23:56,306
سأكتب يساوي نص.

1869
01:23:56,306 --> 01:23:58,180
أنا لن أزعج نفسي
بإطلاق اسم عليه حتى الآن.

1870
01:23:58,180 --> 01:24:01,090
ودعوني أحصل على واحد آخر
يُسمى النوع يساوي تقديم.

1871
01:24:01,090 --> 01:24:02,500
حفظ.

1872
01:24:02,500 --> 01:24:07,150
ودعوني أمضي قدمًا وأفتح
الخادم الخاص بي حتى أتمكن من رؤية هذا الملف.

1873
01:24:07,150 --> 01:24:11,020
هذا، قلت أنه، لقد كان-- hello1.html.

1874
01:24:11,020 --> 01:24:12,470
لذا إنه فقط شكل بسيط.

1875
01:24:12,470 --> 01:24:14,470
ولكن لا يوجد اتصال
بـ Google هذه المرة.

1876
01:24:14,470 --> 01:24:16,602
دعوني أبدأ باستخدام
هذا الشكل بشكل تفاعلي

1877
01:24:16,602 --> 01:24:18,310
لأنه إذا كانت لدي
القدرة على البرمجة،

1878
01:24:18,310 --> 01:24:21,200
أراهن أنه يمكنني أخذ مدخلات المستخدمين
والقيام بشيء ما باستخدامها.

1879
01:24:21,200 --> 01:24:23,630
إذن كيف يُمكنني فعل هذا؟

1880
01:24:23,630 --> 01:24:27,757
حسنًا، دعوني أقترح أولاً
أنني أريد أن يكتب الأشخاص

1881
01:24:27,757 --> 01:24:28,840
أسمائهم في هذا الشكل.

1882
01:24:28,840 --> 01:24:30,130
ومن ثم عندما يضغطون
فوق Submit، أريده

1883
01:24:30,130 --> 01:24:32,800
أن يقول "مرحبًا، ديفيد" أو "مرحبًا،
فيرونيكا" أو "مرحبًا، براين،"

1884
01:24:32,800 --> 01:24:35,770
أيًا كان الاسم في الواقع،
مثل بعض أمثلة C الخاصة بنا.

1885
01:24:35,770 --> 01:24:37,690
إذن أتعلمون ماذا؟

1886
01:24:37,690 --> 01:24:39,100
دعوني أكتب هذه الدالة أولاً.

1887
01:24:39,100 --> 01:24:41,380
يتضح أنه في
أعلى صفحة الويب الخاصة بك،

1888
01:24:41,380 --> 01:24:44,440
لا يمكنك الحصول فقط على العنوان
ولا يمكنك الحصول فقط على النمط،

1889
01:24:44,440 --> 01:24:48,710
ولكن أيضًا علامة تُسمى script
لـ JavaScript، على سبيل المثال.

1890
01:24:48,710 --> 01:24:50,920
وفي هذه العلامة، يمكنني
فعلاً كتابة التعليمة البرمجية.

1891
01:24:50,920 --> 01:24:53,230
وهناك شيء مختلف
قليلاً في JavaScript.

1892
01:24:53,230 --> 01:24:57,670
بدلاً من كتابة تحية باطلة
كاسم الدالة الخاصة بي

1893
01:24:57,670 --> 01:25:00,190
ومن ثم كتابة بنية
الدالة الخاصة بي هنا وبعد ذلك

1894
01:25:00,190 --> 01:25:03,325
قول void هنا، على سبيل المثال،
JavaScript أكثر مرونة قليلاً.

1895
01:25:03,325 --> 01:25:05,200
إذا كنت لا تريد أن تأخذ
أي وسيطات، فقط

1896
01:25:05,200 --> 01:25:07,120
لا تذكرها-- لا تذكر void.

1897
01:25:07,120 --> 01:25:08,440
إذا لم تكن لديك--

1898
01:25:08,440 --> 01:25:10,540
وفي الواقع، لا
تذكر حتى نوع الإرجاع.

1899
01:25:10,540 --> 01:25:12,500
أطلق عليها فقط دالة--
فرق طفيف للغاية

1900
01:25:12,500 --> 01:25:14,240
عن C. أنها أكثر كسلاً قليلاً.

1901
01:25:14,240 --> 01:25:15,710
لا تقلق بشأن أنواع المدخلات.

1902
01:25:15,710 --> 01:25:17,168
لا تقلق بشأن أنواع المخرجات.

1903
01:25:17,168 --> 01:25:19,430
أنت فقط تقول، أعطني
دالة تُسمى تحية.

1904
01:25:19,430 --> 01:25:21,590
حسنًا، ماذا أريد
من هذه الدالة أن تفعل؟

1905
01:25:21,590 --> 01:25:24,260
يتضح أنه في JavaScript،
هناك دالة تُدعى تنبيه

1906
01:25:24,260 --> 01:25:27,230
إنها فقط تنبثق في
نافذة تقول شيئًا ما فيها.

1907
01:25:27,230 --> 01:25:30,210
ويمكنني المرور، كوسيطة
إلى دالة JavaScript هذه،

1908
01:25:30,210 --> 01:25:31,580
أيًا كان ما أريد منها قوله.

1909
01:25:31,580 --> 01:25:36,490
لذلك دعونا نمضي قدمًا ونقول
"مرحبًا، أيها العالم،" فاصلة منقوطة.

1910
01:25:36,490 --> 01:25:40,010
إنها تقريبًا مطابقة للغة C،
مجددًا، باستثناء أنني أقول

1911
01:25:40,010 --> 01:25:41,770
دالة بدلاً من نوع الإرجاع.

1912
01:25:41,770 --> 01:25:43,130
ويبدو أن هناك تنبيه.

1913
01:25:43,130 --> 01:25:46,910
وليس هناك تضمين حاد أو أي
من تلك التي كانت لدينا عادة في C.

1914
01:25:46,910 --> 01:25:49,760
إنها موجودة حرفيًا فقط في
المتصفح الخاص بي الآن.

1915
01:25:49,760 --> 01:25:53,760
إذن دعوني أمضي قدمًا وأحفظ هذا
وأنتقل إلى علامة الشكل هنا.

1916
01:25:53,760 --> 01:25:55,820
ويتضح أنه، في علامة 
الشكل، هناك

1917
01:25:55,820 --> 01:25:58,220
سمة خاصة تُسمى onsubmit.

1918
01:25:58,220 --> 01:26:01,610
وكما تشير الكلمة،
إنها تقول عندما يتم تقديم

1919
01:26:01,610 --> 01:26:08,120
الشكل،
امضي قدمًا وقم بتنفيذ هذا، تحية.

1920
01:26:08,120 --> 01:26:11,720
لذا يمكنني في الواقع إخبار المتصفح،
عند تقديم هذا الشكل،

1921
01:26:11,720 --> 01:26:14,210
لاستدعاء الدالة التي كتبتُها.

1922
01:26:14,210 --> 01:26:16,760
والآن دعوني فقط
بشكل استباقي أكتب إرجاع

1923
01:26:16,760 --> 01:26:18,950
خطأ لأسباب سنتطرق 
إليها بعد قليل،

1924
01:26:18,950 --> 01:26:20,870
لنتأكد فقط من أن هذا يعمل بالفعل.

1925
01:26:20,870 --> 01:26:27,920
الآن دعوني أمضي قدمًا وأحفظ هذا،
وأنتقل إلى hello1.html، وأفتح هذا.

1926
01:26:27,920 --> 01:26:31,130
ودعوني أقوم فقط بتغيير العنوان،
من أجل التناسق--

1927
01:26:31,130 --> 01:26:32,540
إذن hello1.html.

1928
01:26:32,540 --> 01:26:35,630
ودعوني أمضي قدمًا
وأقول ديفيد، Submit--

1929
01:26:35,630 --> 01:26:39,080
مرحبًا، أيها العالم-- لست متأكدًا بالفعل
ما المغزى من كتابة اسمي.

1930
01:26:39,080 --> 01:26:42,290
ولكنه، على الأقل، يبدو
أنه يعمل كما تمت برمجته.

1931
01:26:42,290 --> 01:26:46,080
لكن من الواضح، ما أتطلع إليه بفعل
هذا هو أنني أريد عرض اسمي.

1932
01:26:46,080 --> 01:26:49,970
لذا عندما يكتب الأشخاص
أسمائهم في المربع وينقروا فوق Submit،

1933
01:26:49,970 --> 01:26:51,800
الذي يُشغّل تقديم
الشكل.

1934
01:26:51,800 --> 01:26:52,400
لكن انتظروا.

1935
01:26:52,400 --> 01:26:54,380
عند تقديم الشكل،
سأقوم باستدعاء تحية.

1936
01:26:54,380 --> 01:26:57,650
لذلك تبدو أنها مهمة
تحية لمعرفة ما

1937
01:26:57,650 --> 01:27:00,180
هي الكلمة التي كتبها الشخص.

1938
01:27:00,180 --> 01:27:01,124
إذن كيف يمكنني القيام بذلك؟

1939
01:27:01,124 --> 01:27:02,040
إنها مشفرة قليلاً.

1940
01:27:02,040 --> 01:27:04,206
وهذا هو المكان المُحدّد الآن
لـ JavaScript

1941
01:27:04,206 --> 01:27:08,130
وليس C. دعوني أمضي قدمًا
وأحدد متغير يُسمى اسم.

1942
01:27:08,130 --> 01:27:12,155
ودعوني أستخدام هذه التقنية
الرائعة، document.querySelector.

1943
01:27:12,155 --> 01:27:15,260


1944
01:27:15,260 --> 01:27:18,890
ومن ثم هنا، 
سأحتاج إلى تحديد

1945
01:27:18,890 --> 01:27:21,630
أي عقدة في الشجرة أريد اختيارها.

1946
01:27:21,630 --> 01:27:23,640
لذا أنا بالفعل أمضي قدمًا بنفسي.

1947
01:27:23,640 --> 01:27:25,160
دعونا ننظر في لغة HTML.

1948
01:27:25,160 --> 01:27:30,020
في هذه اللحظة، لديّ علامة شكل
وعلامتا إدخال، ولم تحصل أي منها

1949
01:27:30,020 --> 01:27:30,710
على اسم.

1950
01:27:30,710 --> 01:27:31,746
ويمكنني إصلاح ذلك.

1951
01:27:31,746 --> 01:27:33,620
لكن دعوني أقوم
بالفعل بتقنية أخرى.

1952
01:27:33,620 --> 01:27:36,230
تدعم HTML أيضًا المعرّفات الفريدة.

1953
01:27:36,230 --> 01:27:39,200
ويمكنك إعطائها
حرفيًا، معرّفات فريدة.

1954
01:27:39,200 --> 01:27:41,860
يمكنكم تسميتها
الاسم الذي تريدونه-- foobar، baz، xyz.

1955
01:27:41,860 --> 01:27:43,901
سأجعلها وصفية
 أكثر وأطلق عليها

1956
01:27:43,901 --> 01:27:47,810
المعرّف يساوي اسم
لأن ما يمكنني فعله الآن هنا

1957
01:27:47,810 --> 01:27:51,800
في querySelector هو
في الواقع تحديد ما

1958
01:27:51,800 --> 01:27:54,770
أريد اختياره من الشجرة.

1959
01:27:54,770 --> 01:27:59,300
تُسمى تلك الشجرة DOM، أو
نموذج كائن المستند، بشكل مطنب.

1960
01:27:59,300 --> 01:28:01,560
وأنا بحاجة لفعل أمر
أخير-- يتضح أنه،

1961
01:28:01,560 --> 01:28:03,440
وستعرف هذا فقط
من خلال التجربة،

1962
01:28:03,440 --> 01:28:06,860
أنه إذا كان "اسم" هو معرّف
العنصر الفريد

1963
01:28:06,860 --> 01:28:11,120
وليس اسم العلامة، أنا بالفعل
بحاجة إلى بدأها باستخدام علامة تجزئة،

1964
01:28:11,120 --> 01:28:12,410
لا علاقة لها بعلامة تجزئة C.

1965
01:28:12,410 --> 01:28:16,010
لكن بخلاف ذلك، هذه
الدالة، querySelector،

1966
01:28:16,010 --> 01:28:18,680
ستعتقد أن هناك
علامة يُطلق عليها "اسم."

1967
01:28:18,680 --> 01:28:22,809
هذا يعني أن المعرّف
قيمته "اسم."

1968
01:28:22,809 --> 01:28:23,850
إنه صعب بعض الشيء.

1969
01:28:23,850 --> 01:28:24,830
لكن ها نحن ذا.

1970
01:28:24,830 --> 01:28:29,340
بمجرد أن أحدُد تلك العقدة من الشجرة،
أريد الحصول على قيمتها ووضعها--

1971
01:28:29,340 --> 01:28:32,750
أريد الحصول على قيمتها، فاصلة منقوطة.

1972
01:28:32,750 --> 01:28:33,680
ما الذي يجري؟

1973
01:28:33,680 --> 01:28:38,420
أولاً، تذكرون أنه من هذه الشجرة هنا
كلما يقوم المتصفح بتحميل HTML،

1974
01:28:38,420 --> 01:28:39,590
فهو يحتوي على بعض من لغة HTML.

1975
01:28:39,590 --> 01:28:41,660
إنه يبني بنية شجرة هناك.

1976
01:28:41,660 --> 01:28:47,210
كل تلك العقد قابلة للتحديد عن طريق
هذه الدالة التي تُسمى querySelector.

1977
01:28:47,210 --> 01:28:48,110
ما هو المستند؟

1978
01:28:48,110 --> 01:28:49,818
حسنًا، يتضح أنه في
JavaScript، يوجد

1979
01:28:49,818 --> 01:28:51,950
هذا المتغير العالمي الخاص
الذي يُدعى مستند

1980
01:28:51,950 --> 01:28:54,590
والذي يشير إلى المستند
بأكمله، صفحة الويب بأكملها.

1981
01:28:54,590 --> 01:28:58,220
المُدمج في ذلك وهو دالة
تُسمى querySelector.

1982
01:28:58,220 --> 01:29:02,940
هذا التدوين النقطي يذكرنا
بصيغة struct في C.

1983
01:29:02,940 --> 01:29:06,710
لذا يمكنكم التفكير في المستند كـ struct
التي تمثل الصفحة بأكملها.

1984
01:29:06,710 --> 01:29:09,210
بداخله دالة،
وليس فقط بيانات،

1985
01:29:09,210 --> 01:29:11,150
ولكن دالة، تُسمى querySelector.

1986
01:29:11,150 --> 01:29:13,850
سترون هذا في كل
مكان في JavaScript، نقط،

1987
01:29:13,850 --> 01:29:17,060
لأن الأشخاص-- عالم JavaScript
هو أكبر بكثير من C.

1988
01:29:17,060 --> 01:29:21,230
لذلك هناك الكثير من الدالات داخل
الحاويات أو البنيات الأخرى.

1989
01:29:21,230 --> 01:29:24,020
لذلك مع هذا الذي قاله، هذا فقط
يقول، مرحبًا، أيها المتصفح،

1990
01:29:24,020 --> 01:29:26,930
دعني أحصل على متغير
يُسمى اسم وقم بتخزين

1991
01:29:26,930 --> 01:29:31,910
قيمة العقدة التي تحتوي على
معرّف فريد للاسم

1992
01:29:31,910 --> 01:29:34,310
واحصل على ذلك 
باستخدام هذه الدالة، وحددها.

1993
01:29:34,310 --> 01:29:37,100
هذا يسحب المستطيل
من الصورة

1994
01:29:37,100 --> 01:29:40,344
ويمنحني حق الوصول إلى القيمة
التي كتبها الشخص.

1995
01:29:40,344 --> 01:29:41,510
الآن، أنا لم أنتهي من هذا.

1996
01:29:41,510 --> 01:29:43,520
أحتاج لعرض هذه القيمة بالفعل.

1997
01:29:43,520 --> 01:29:45,590
ولن يكون أمر
القيام بهذا صحيحًا.

1998
01:29:45,590 --> 01:29:48,390
وإلا سأرى فقط
"مرحبًا، أيها الاسم."

1999
01:29:48,390 --> 01:29:51,860
لذلك لا يوجد هذا التقليد،
الذي كان لدينا في C. هناك

2000
01:29:51,860 --> 01:29:52,932
طريقة أخرى للقيام بذلك.

2001
01:29:52,932 --> 01:29:54,890
سأمضي قدمًا 
وأقوم بذلك على النحو التالي.

2002
01:29:54,890 --> 01:29:57,300
سأستخدم فقط تسلسلاً.

2003
01:29:57,300 --> 01:30:01,520
لذا هذا غير ممكن في
C. لكن في JavaScript،

2004
01:30:01,520 --> 01:30:04,760
إذا كانت لديك سلسلة
على اليسار وسلسلة على اليمين،

2005
01:30:04,760 --> 01:30:07,910
فإن استخدام زائد لن يجمعهم
معًا، وهو أمر غير منطقي.

2006
01:30:07,910 --> 01:30:12,360
سيعمل على تلسلسهم، 
مثل لاصق واحد مع الآخر.

2007
01:30:12,360 --> 01:30:14,110
في C، كيف ستقومون بهذا؟

2008
01:30:14,110 --> 01:30:15,640
إنه كابوس مطلق.

2009
01:30:15,640 --> 01:30:16,830
في C، كيف ستقومون بهذا؟

2010
01:30:16,830 --> 01:30:20,260
ستكون هذه مصفوفة من
الأحرف على اليسار

2011
01:30:20,260 --> 01:30:22,030
التي تحتوي على حرف فارغ في النهاية.

2012
01:30:22,030 --> 01:30:23,920
هذه ستكون مصفوفة أخرى
من الأحرف

2013
01:30:23,920 --> 01:30:26,090
على اليمين باستخدام حرف
فارغ في النهاية.

2014
01:30:26,090 --> 01:30:28,630
وليست أي منها كبيرة بما يكفي لتناسب
الأخرى أيضًا.

2015
01:30:28,630 --> 01:30:31,480
لذا عليك أن تقوم بتخصيص
مصفوفة جديدة من الأحرف،

2016
01:30:31,480 --> 01:30:36,760
انسخوا هذه في، تخلصوا من الخط المائل العكسي 0، 
انسخوا هذه في، حافظوا على الخط المائل العكسي 0،

2017
01:30:36,760 --> 01:30:38,270
تخلصوا من هذه.

2018
01:30:38,270 --> 01:30:40,180
ومن ثم ستكون لديكم سلاسل متسلسلة.

2019
01:30:40,180 --> 01:30:42,010
هذه خطوات كثيرة
لعينة في C. ولهذا

2020
01:30:42,010 --> 01:30:46,750
لا أحد يحب البرمجة في C.
ولا يجب أن تقوموا بذلك بعد الآن.

2021
01:30:46,750 --> 01:30:49,210
في JavaScript، استخدم
فقط مُشغل زائد.

2022
01:30:49,210 --> 01:30:50,850
وهي ستفعل كل ذلك من أجلك.

2023
01:30:50,850 --> 01:30:54,010
لكن آمل، أن لديكم 
التقدير الكامن لما يقوم به مُشغل زائد

2024
01:30:54,010 --> 01:30:56,007
بالفعل بشكل غير ظاهر

2025
01:30:56,007 --> 01:30:58,090
لأن الكمبيوتر
ما يزال يقوم بالعمل نفسه.

2026
01:30:58,090 --> 01:31:02,080
الاختلاف هو أننا في هذا الأسبوع فصاعدًا،
نحن، البشر، نقوم بأقل من ذلك العمل

2027
01:31:02,080 --> 01:31:03,040
بأنفسنا.

2028
01:31:03,040 --> 01:31:06,020
إذن زائد هو تجريد
لكل هذا التعقيد.

2029
01:31:06,020 --> 01:31:09,120
إذن لو لم أكن قد أخطأت في ذلك،
دعوني أمضي قدمًا وأحفظه الآن.

2030
01:31:09,120 --> 01:31:13,780
سأنتقل إلى المتصفح، إعادة تحميل،
وأكتب اسمي، ديفيد.

2031
01:31:13,780 --> 01:31:14,904
Submit.

2032
01:31:14,904 --> 01:31:15,820
وهناك نحصل عليه--

2033
01:31:15,820 --> 01:31:16,810
مرحبًا، ديفيد.

2034
01:31:16,810 --> 01:31:17,950
دعونا نقوم باختبار واحد آخر.

2035
01:31:17,950 --> 01:31:19,780
سنحاول، لنقل، فيرونيكا.

2036
01:31:19,780 --> 01:31:20,860
Submit.

2037
01:31:20,860 --> 01:31:21,739
و ها هي ذا.

2038
01:31:21,739 --> 01:31:24,280
ستلاحظون أن متصحفي يحاول
أن يكون مفيدًا الآن.

2039
01:31:24,280 --> 01:31:27,703
إذا كتبت D، فسيقوم
بالإكمال التلقائي، أو V--

2040
01:31:27,703 --> 01:31:29,690
حسنًا، يبدو أنه نسي أمر فيرونيكا.

2041
01:31:29,690 --> 01:31:32,340
فيرونيكا-- دعونا نرى إذا قمنا بإعادة التحميل.

2042
01:31:32,340 --> 01:31:34,700
V-- هذا غريب.

2043
01:31:34,700 --> 01:31:37,900
لا تخبروا فيرونيكا أن
Chrome لا يتذكرها.

2044
01:31:37,900 --> 01:31:41,572
لكن يمكننا إيقاف تلك الميزة--
هذا هو المغزى--

2045
01:31:41,572 --> 01:31:43,030
في الواقع من خلال فعل أشياء كهذه.

2046
01:31:43,030 --> 01:31:44,988
وستعرفون هذا
من الدليل على الإنترنت.

2047
01:31:44,988 --> 01:31:47,440
الإكمال التلقائي يساوي
إيقاف هذه الميزة.

2048
01:31:47,440 --> 01:31:49,210
يقوم الضبط التلقائي أيضًا بشيء مفيد.

2049
01:31:49,210 --> 01:31:52,060
لو انتقلتم في أي وقت إلى صفحة ويب
ويمكنكم فقط البدء بكتابة شيء،

2050
01:31:52,060 --> 01:31:54,010
سيقوم Chrome وMacOS بتظليله باللون الأزرق.

2051
01:31:54,010 --> 01:31:55,630
هذا يعني فقط تقديم ضبط.

2052
01:31:55,630 --> 01:31:56,801
ضَع المؤشر هناك.

2053
01:31:56,801 --> 01:31:59,050
إذا لم يكن لديك ذلك،
ستبدأ صفحة الويب هكذا.

2054
01:31:59,050 --> 01:32:01,939
وقد زرنا جميعًا مواقع ويب،
وأعتقد أن موقعي هارفارد ضمن هذه المواقع،

2055
01:32:01,939 --> 01:32:03,730
حيث يجب عليكم بغباء أن تنقروا
هناك فقط

2056
01:32:03,730 --> 01:32:05,188
لبدء التفاعل مع الصفحة.

2057
01:32:05,188 --> 01:32:06,120
ذلك ليس ضروريًا.

2058
01:32:06,120 --> 01:32:07,540
هذه برمجة سيئة.

2059
01:32:07,540 --> 01:32:11,560
فقط باستخدام العلامات يمكنك
إصلاح هذا النوع من الأشياء.

2060
01:32:11,560 --> 01:32:12,520
أي أسئلة؟

2061
01:32:12,520 --> 01:32:15,262
الجمهور: ماذا إذا كان لدينا
معرّفان بنفس الاسم؟

2062
01:32:15,262 --> 01:32:17,720
ديفيد ج. مالان: ماذا إذا كان لدينا
معرّفان بنفس الاسم؟

2063
01:32:17,720 --> 01:32:18,500
لن يحدث ذلك.

2064
01:32:18,500 --> 01:32:19,460
هذا خطأ بشري.

2065
01:32:19,460 --> 01:32:21,660
حسب التعريف، يجب أن يكون المعرّف فريدًا.

2066
01:32:21,660 --> 01:32:26,690
وإذا كان لديك معرفان بنفس الاسم،
إذن لقد قام الشخص بخطأ.

2067
01:32:26,690 --> 01:32:27,524
وما الذي--

2068
01:32:27,524 --> 01:32:28,940
أنا لا أعرف ما هو التصرف.

2069
01:32:28,940 --> 01:32:32,450
من المحتمل أنه غير موثق بشكل غير رسمي
أو ربما يختار الأول.

2070
01:32:32,450 --> 01:32:33,500
ربما يختار الثاني.

2071
01:32:33,500 --> 01:32:33,950
لا أعرف.

2072
01:32:33,950 --> 01:32:35,491
لكن لا يجب أن تعتمد على ذلك، على أي حال.

2073
01:32:35,491 --> 01:32:36,100
سؤال جيد.

2074
01:32:36,100 --> 01:32:36,830
حالة أساسية جيدة.

2075
01:32:36,830 --> 01:32:37,890
أية أسئلة أخرى؟

2076
01:32:37,890 --> 01:32:40,600


2077
01:32:40,600 --> 01:32:42,200
دعوني أنتقل إلى مثال آخر.

2078
01:32:42,200 --> 01:32:45,110
ومن ثم سننتقل إلى
نسخة رائعة من هذا.

2079
01:32:45,110 --> 01:32:49,330
دعوني أفتح برنامج
في المصدر 5 اليوم

2080
01:32:49,330 --> 01:32:51,730
دليل يسمى background.html.

2081
01:32:51,730 --> 01:32:56,530
لقد حصل على بعض الأحرف المألوفة، التي
ربما تشير للون الأحمر، الأخضر، الأزرق،

2082
01:32:56,530 --> 01:32:57,130
من المحتمل.

2083
01:32:57,130 --> 01:32:58,292
هذه ثلاثة أزرار.

2084
01:32:58,292 --> 01:32:59,250
ولقد رأينا الأزرار.

2085
01:32:59,250 --> 01:33:02,650
لقد رأينا زر البحث وأزرار التقديم
التي قمت بإنشائها من قبل.

2086
01:33:02,650 --> 01:33:05,680
لكن باستخدام JavaScript، يمكنني أن
أقوم بأشياء ممتعة مثل هذه.

2087
01:33:05,680 --> 01:33:09,130
إذا قمت بالنقر فوق R، فإن صفحة الويب
قد تغيرت للتو.

2088
01:33:09,130 --> 01:33:13,030
G، B، R، G، B-- الآن هذا تفاعلي.

2089
01:33:13,030 --> 01:33:16,450
لو قمنا فقط بكتابة HTML وCSS،
فسيكون عليكم اختيار لون واحد من هذه الألوان

2090
01:33:16,450 --> 01:33:17,630
والتشبث بها.

2091
01:33:17,630 --> 01:33:19,850
لكن باستخدام JavaScript، يمكنكم إجراء استجابة.

2092
01:33:19,850 --> 01:33:21,970
وهذا لأن متصفح
لديه الكثير والكثير

2093
01:33:21,970 --> 01:33:24,130
من الأحداث التي تتم طوال الوقت.

2094
01:33:24,130 --> 01:33:30,550
تتضمن الأحداث النقرات أو تحريك الفأرة
أو السحب، أو في جهاز محمول،

2095
01:33:30,550 --> 01:33:31,240
اللمس.

2096
01:33:31,240 --> 01:33:34,450
إذن هناك الكثير من الأشياء التي يمكن أن يفعلها الشخص
باستخدام متصفح الويب.

2097
01:33:34,450 --> 01:33:38,710
ويمكنكم كتابة التعليمة البرمجية التي تستجيب
لكل هذه الأنواع من الأحداث.

2098
01:33:38,710 --> 01:33:43,330
وإذن دعوني أمضى قدمًا بالفعل
وأفتح background.html

2099
01:33:43,330 --> 01:33:45,070
وأعرض كيف يعمل هذا.

2100
01:33:45,070 --> 01:33:47,840
إذن بالنسبة للجزء الأكبر،
هو مجرد HTML في البداية.

2101
01:33:47,840 --> 01:33:52,014
ها هي علامة html، وعلامة الرأس،
وعلامة البنية، و3 علامات جديدة.

2102
01:33:52,014 --> 01:33:53,680
هذه طريقة أخرى لإنشاء الأزرار.

2103
01:33:53,680 --> 01:33:55,300
ومرة أخرى، هذا ليس أمر مثيرًا للاهتمام.

2104
01:33:55,300 --> 01:33:57,342
أنتم تتعلمون ذلك من المرجع
أو الدليل على الإنترنت.

2105
01:33:57,342 --> 01:33:59,425
وهو يخبركم فقط،
بكيفية استخدام زر.

2106
01:33:59,425 --> 01:34:02,410
وهو يتبع النموذج نفسه--
اسم علامة، سمة تساوي قيمة.

2107
01:34:02,410 --> 01:34:04,930
ستكون التسمية فقط
R، وG، وB.

2108
01:34:04,930 --> 01:34:08,560
والآن هذا هو المكان الذي تبدو فيه الأشياء
مخيفة قليلاً في البداية.

2109
01:34:08,560 --> 01:34:09,550
ولكن هذا كل شيء.

2110
01:34:09,550 --> 01:34:13,520
هي فقط سطور من التعليمية البرمجية
هنا داخل صفحة الويب.

2111
01:34:13,520 --> 01:34:15,340
الآن، دعونا ننتقل خلال هذا
سطرًا بسطر،

2112
01:34:15,340 --> 01:34:17,860
حتى لو كانت تبدو أكثر إطنابًا
قليلاً في البداية.

2113
01:34:17,860 --> 01:34:20,560
إذن هذا السطر الأول هنا
يقول، مرحبًا، أيها المتصفح،

2114
01:34:20,560 --> 01:34:22,480
أعطني متغيرًا يسمى بنية.

2115
01:34:22,480 --> 01:34:24,910
وقم بتخزينه في ذلك المتغير، العقدة--

2116
01:34:24,910 --> 01:34:27,130
المستطيل، إذا جاز التعبير--

2117
01:34:27,130 --> 01:34:28,605
الذي يُسمى بنية.

2118
01:34:28,605 --> 01:34:30,730
حتى، تقتلع هذا 
المستطيل من الصورة

2119
01:34:30,730 --> 01:34:32,270
حتى يمكنني الوصول المباشر إليه.

2120
01:34:32,270 --> 01:34:34,880
لماذا-- لأنني سأقوم 
بمعالجتها في غضون لحظات.

2121
01:34:34,880 --> 01:34:37,930
هذا هو الشكل المخيف أكثر والذي
ستبدو عليه JavaScript الآن.

2122
01:34:37,930 --> 01:34:41,500
Document.querySelector
علامة التجزئة الحمراء-- هل يمكن لأحد منكم

2123
01:34:41,500 --> 01:34:44,360
ترجمة ذلك إلى الإنجليزية فقط؟

2124
01:34:44,360 --> 01:34:47,540
ما الذي يفعله هذا من أجلي؟

2125
01:34:47,540 --> 01:34:49,965
الجمهور: إعطاء المعرّف
من الأحمر أنك فقط--

2126
01:34:49,965 --> 01:34:50,840
ديفيد ج. مالان: أجل.

2127
01:34:50,840 --> 01:34:53,960
كن أكثر إطنابًا قليلاً.

2128
01:34:53,960 --> 01:34:56,400
شخص آخر؟

2129
01:34:56,400 --> 01:35:02,040
مرحبًا، أيها المتصفح، حدّد لي عقدة
يكون معرّفها الفريد باللون الأحمر.

2130
01:35:02,040 --> 01:35:02,730
هذا جيد.

2131
01:35:02,730 --> 01:35:06,180
أعطني حق الوصول إلى تلك العقدة،
البنية في الذاكرة.

2132
01:35:06,180 --> 01:35:08,410
وهنا تكون غريبة قليلاً.

2133
01:35:08,410 --> 01:35:14,536
إذن تبين أن كل علامة
في صفحة ويب أو عقدة في شجرة--

2134
01:35:14,536 --> 01:35:15,660
شجرة DOM، إذا جاز التعبير--

2135
01:35:15,660 --> 01:35:20,064
نموذج كائن المستند-- يمكن أن يحتوي
على مستمعي حدث مرتطبين به.

2136
01:35:20,064 --> 01:35:22,230
وستعرفون هذا فقط
من خلال الوثائق.

2137
01:35:22,230 --> 01:35:24,870
ولكن إذا قلت حرفيًا،
امضي في هذه البنية،

2138
01:35:24,870 --> 01:35:28,440
هذه العقدة، التي 
تمثل الزر الأحمر

2139
01:35:28,440 --> 01:35:33,330
واحصل على قيمة on-click،
والأمر الرائع باستخدام JavaScript،

2140
01:35:33,330 --> 01:35:35,460
على الرغم من أن الصيغة
تبدو مخيفة قليلاً،

2141
01:35:35,460 --> 01:35:38,710
هو أنه يمكنك ربط
دالة ما مع هذا الحدث.

2142
01:35:38,710 --> 01:35:42,870
إذن سيقول هذا، مرحبًا، أيها المتصفح،
عندما يتم النقر فوق الزر الأحمر،

2143
01:35:42,870 --> 01:35:45,060
استدعي الدالة التالية.

2144
01:35:45,060 --> 01:35:48,630
والأمر الجديد في JavaScript هنا
هو هذه الوظيفة، في الوقت الحالي،

2145
01:35:48,630 --> 01:35:50,580
ليس لديها اسم، وهذا غريب.

2146
01:35:50,580 --> 01:35:53,910
يمكنكم أن تفعلوا ذلك من الناحية الفنية في C.
لكننا دائمًا نطلق على وظائفنا أسماء.

2147
01:35:53,910 --> 01:35:56,040
ولكنكم لا تحتاجون حقًا
إلى إطلاق اسم على وظيفة

2148
01:35:56,040 --> 01:35:59,100
إذا كنتم لا تحتاجون
لذكرها مرة أخرى.

2149
01:35:59,100 --> 01:36:01,700
والتفصيل الذي يحدث لنا هنا
هي تلك.

2150
01:36:01,700 --> 01:36:05,349
إنه يقول، مرحبًا، أيها المتصفح، عند
النقر، استدعي هذه الدالة.

2151
01:36:05,349 --> 01:36:06,765
ماذا يعني ذلك بقيم فعلية؟

2152
01:36:06,765 --> 01:36:09,120
مرحبًا، أيها المتصفح، استدعي جميع
سطور التعليمة البرمجية

2153
01:36:09,120 --> 01:36:12,327
بين هذا القوس المتعرج المفتوح
وهذا القوس المتعرج المغلق.

2154
01:36:12,327 --> 01:36:14,160
إذن حتى لو لم تكونوا
معتادين على الصيغة،

2155
01:36:14,160 --> 01:36:16,830
فإنها تعني حرفيًا تنفيذ
السطور التالية من التعليمة البرمجية

2156
01:36:16,830 --> 01:36:18,880
عندما يتم النقر فوق هذا الزر.

2157
01:36:18,880 --> 01:36:22,290
هذا ما يعرف كدالة
مجهولة طالما ليس لها اسم.

2158
01:36:22,290 --> 01:36:24,570
إنها مجرد دالة،
قوس مفتوح، قوس مغلق.

2159
01:36:24,570 --> 01:36:28,050
إذن من المحتمل أنه يمكنكم أن تستنتجوا ما
تقوم به على هذا السطر هنا.

2160
01:36:28,050 --> 01:36:30,270
دعوني أقوم بتظليل هذا السطر باللون الأزرق.

2161
01:36:30,270 --> 01:36:31,200
إنه مشفر قليلاً.

2162
01:36:31,200 --> 01:36:34,800
ومجددًا، أعدكم أنكم
سترون الكثير من هذه النقاط.

2163
01:36:34,800 --> 01:36:38,550
ولكن هذا يقول، مرحبًا،
 أيها المتصفح، قم بتعديل البنية،

2164
01:36:38,550 --> 01:36:42,060
أو على وجه التحديد، نمط
البنية، وخاصة،

2165
01:36:42,060 --> 01:36:48,210
لون خلفية نمط
البنية، ليكون، باللون الأحمر، بالطبع.

2166
01:36:48,210 --> 01:36:52,980
وتم نسخ ولصق باقي التعليمة البرمجية
في الوقت الحالي باللون الأخضر والأزرق كذلك.

2167
01:36:52,980 --> 01:36:53,974
إذن ما الذي يحدث؟

2168
01:36:53,974 --> 01:36:55,890
في كل مرة تنقرون فيها فوق
أي هذه الأزرار--

2169
01:36:55,890 --> 01:36:57,990
R أو G أو B--

2170
01:36:57,990 --> 01:37:02,490
حرفيًا، ويتم تنفيذ هذا السطر 
من التعليمة البرمجية الذي قمت بتظليله للتو

2171
01:37:02,490 --> 01:37:05,880
أو يتم تنفيذ هذا السطر من التعليمة البرمجية
أو يتم تنفيذ هذا السطر

2172
01:37:05,880 --> 01:37:06,990
من التعليمة البرمجية.

2173
01:37:06,990 --> 01:37:09,240
إذن على الرغم من أن الصيغة
بالفعل، باعتراف الجميع، هي

2174
01:37:09,240 --> 01:37:13,170
أكثر تعقيدًا بكثير مما رأيناه حتى الآن،
لكن الفكرة بسيطة نسبيًا.

2175
01:37:13,170 --> 01:37:14,490
حدّد الزر.

2176
01:37:14,490 --> 01:37:17,359
أخبره، عند النقر،
لاستدعاء هذه الدالة.

2177
01:37:17,359 --> 01:37:19,650
وكان الأمر جيدًا في وقت سابق إذا كنتم
تقومون فقط بنسخ ولصق هذا.

2178
01:37:19,650 --> 01:37:22,660
ولكن بالنسبة لـ Pset5، فلن تضطروا 
إلى استخدام أي من التعليمة البرمجية هذه.

2179
01:37:22,660 --> 01:37:25,440
هذا في-- وبشكل استباقي
نظرة على ما يمكنكم

2180
01:37:25,440 --> 01:37:31,560
فعله عند النظر إلى ميزات رائعة،
مثل المشاريع النهائية وما بعدها.

2181
01:37:31,560 --> 01:37:34,451
إذن أي أسئلة على
مثال الخلفية هذا؟

2182
01:37:34,451 --> 01:37:34,950
أجل؟

2183
01:37:34,950 --> 01:37:40,240
الجمهور: لماذا استخدمنا رمز الشباك
 للون الأحمر والأخضر والأزرق، وليس

2184
01:37:40,240 --> 01:37:41,010
للبنية؟

2185
01:37:41,010 --> 01:37:41,430
ديفيد ج. مالان: سؤال جيد.

2186
01:37:41,430 --> 01:37:44,830
لماذا نستخدم رمز الشباك
للأحمر، والأخضر، والأزرق، ولكن ليس للبنية؟

2187
01:37:44,830 --> 01:37:47,400
إذا نظرتم في HTML،
سترون ما يلي.

2188
01:37:47,400 --> 01:37:49,380
من الواضح، أن البنية هي اسم العلامة.

2189
01:37:49,380 --> 01:37:53,550
ولهذا السبب، اخترنا "بنية"
مع سطر التعليمة البرمجية هذا هنا.

2190
01:37:53,550 --> 01:37:56,430
ومع ذلك، لا يعد الأحمر، 
والأخضر، والأزرق أسماء العلامات.

2191
01:37:56,430 --> 01:37:59,409
هم فقط المعرّفات الفريدة،
مجرد قيم توصلت إليها للتو.

2192
01:37:59,409 --> 01:38:00,700
كان من الممكن أن أسميها x، أو y، أو z.

2193
01:38:00,700 --> 01:38:02,370
لكنني اخترت مصطلحات وصفية أكثر.

2194
01:38:02,370 --> 01:38:04,320
إذن عندما تريدون القيام
بالإشارة إلى أو تحديد

2195
01:38:04,320 --> 01:38:08,950
عُقدة-- تحتوي على معرّف،
فاستخدموا علامة التجزئة بدلًا من ذلك.

2196
01:38:08,950 --> 01:38:09,450
هذا كل شيء.

2197
01:38:09,450 --> 01:38:12,116
هذه مجرد تقاليد بشرية
غير واضحة إلا إذا تم

2198
01:38:12,116 --> 01:38:14,310
إخباركم ما الذي تعنيه جميعها.

2199
01:38:14,310 --> 01:38:16,740
لنجرب مثالًا واحدًا آخر
باستخدام JavaScript.

2200
01:38:16,740 --> 01:38:19,620
من الشائع أن تمتلك 
مواقع الويب الإخبارية القدرة

2201
01:38:19,620 --> 01:38:21,865
على تغيير حجم الخط،
الذي يمكنكم، في الواقع،

2202
01:38:21,865 --> 01:38:24,240
فعله على جهاز Mac وجهاز الكمبيوتر الشخصي أحيانًا
باستخدام اختصارات لوحة المفاتيح.

2203
01:38:24,240 --> 01:38:26,590
ولكن في بعض الأحيان، يتم إنشاؤها
في صفحة الويب نفسها.

2204
01:38:26,590 --> 01:38:30,020
دعوني أنتقل إلى، على سبيل المثال، size.html.

2205
01:38:30,020 --> 01:38:32,940
وهنا بعض النص اللاتيني
أو ما يشبهه.

2206
01:38:32,940 --> 01:38:34,910
ولاحظوا أنه يحتوي على
قائمة اختيار صغيرة.

2207
01:38:34,910 --> 01:38:37,410
بشكل طبيعي، عندما تكون لديكم قائمة 
اختيار، ستحددون شيء ما.

2208
01:38:37,410 --> 01:38:38,460
ومن ثم تنقروا فوق Submit.

2209
01:38:38,460 --> 01:38:39,876
ومن ثم يتعامل الخادم معها.

2210
01:38:39,876 --> 01:38:41,280
تنتقل المعلومات إلى مكان ما.

2211
01:38:41,280 --> 01:38:42,610
لكن لا تحتاجون إلى القيام بذلك.

2212
01:38:42,610 --> 01:38:46,380
في الواقع يمكنكم جعل القوائم الصغيرة
تفاعلية، تمامًا مثل مربعات النص.

2213
01:38:46,380 --> 01:38:48,930
لنفترض أنني أريد أن أجعل
هذا النص أصغر قليلاً.

2214
01:38:48,930 --> 01:38:49,830
يمكنني فعل ذلك.

2215
01:38:49,830 --> 01:38:51,630
يمكنني تحديد نص صغير جدًا.

2216
01:38:51,630 --> 01:38:55,950
يمكنني تحديد نص صغير جدًا جدًا
أو كبير جدًا جدًا.

2217
01:38:55,950 --> 01:38:57,490
إذن ما الذي يحدث هنا؟

2218
01:38:57,490 --> 01:38:59,970
حسنًا، تمامًا مثلما توجد 
أحداث نقر في متصفح ما،

2219
01:38:59,970 --> 01:39:02,970
هناك أيضًا أحداث تغيير
 أو أحداث تحديد.

2220
01:39:02,970 --> 01:39:06,090
فقط أي شيء يمكن أن يحدث على
صفحة الويب ويمكنكم الاستماع إليها.

2221
01:39:06,090 --> 01:39:08,940
إذن دعونا نُلقي نظرة على
هذه التعليمة البرمجية، على سبيل المثال.

2222
01:39:08,940 --> 01:39:10,486
لم نرى هذه العلامة من قبل.

2223
01:39:10,486 --> 01:39:11,610
لكننا رأينا الفقرة.

2224
01:39:11,610 --> 01:39:13,440
وهناك فقرة باللغة اللاتينية.

2225
01:39:13,440 --> 01:39:16,125
ثم هناك علامة تحديد،
والتي تعطيكم قائمة اختيار.

2226
01:39:16,125 --> 01:39:18,720
يُطلق على القائمة المنسدلة
قائمة تحديد في HTML.

2227
01:39:18,720 --> 01:39:20,650
وها هي كيفية حصولكم على
جميع الخيارات.

2228
01:39:20,650 --> 01:39:22,149
الآن، يوجد قليل من الازدواجية هنا.

2229
01:39:22,149 --> 01:39:26,160
هناك ما يراه الإنسان، وهو موجود
بين علامة فتح وعلامة إغلاق.

2230
01:39:26,160 --> 01:39:29,430
ثم هناك هذه القيمة، التي يراها
الكمبيوتر-- ولكن المزيد حول ذلك

2231
01:39:29,430 --> 01:39:31,080
في وقت آخر، عندما نصل إلى Python.

2232
01:39:31,080 --> 01:39:34,000
ولكن هذا فقط يمنحني 
قائمة كاملة من خيارات الحجم.

2233
01:39:34,000 --> 01:39:37,380
وإذا قمت الآن بالتمرير للأسفل، لاحظوا
أن لدي علامة نص هنا.

2234
01:39:37,380 --> 01:39:41,400
وفي علامة النص هذه، لدي
document.querySelector "تحديد"

2235
01:39:41,400 --> 01:39:45,510
لأنني أرغب في تحديد الاسم،
العلامة التي تُسمى select.

2236
01:39:45,510 --> 01:39:47,094
ثم هناك هذا الحدث، onchange.

2237
01:39:47,094 --> 01:39:49,093
وستعرفون هذا فقط
من خلال الوثائق.

2238
01:39:49,093 --> 01:39:51,930
لكن مثل onsubmit، يتم استدعاء onchange في
أي وقت تقومون فيه بتغيير تلك القائمة.

2239
01:39:51,930 --> 01:39:53,550
ما هي الدالة التي يجب استدعاؤها؟

2240
01:39:53,550 --> 01:39:56,060
حسنًا، هذه هنا، والتي تُعد
مجهولة بمعنى

2241
01:39:56,060 --> 01:39:57,440
أنها ليس لديها اسم.

2242
01:39:57,440 --> 01:39:59,130
وامضوا قدمًا وقوموا بذلك.

2243
01:39:59,130 --> 01:40:01,940
قوموا بتحديد علامة البنية من المستند.

2244
01:40:01,940 --> 01:40:03,650
قوموا بالوصول إلى نمطه.

2245
01:40:03,650 --> 01:40:09,110
ثم قوموا بتغيير حجم الخط،
إلى هذه القيمة وهذا أمر غريب هنا.

2246
01:40:09,110 --> 01:40:11,960
إذن ما الذي قمت بفعله هنا؟

2247
01:40:11,960 --> 01:40:19,130
دعوني أفعل هذا، ولا أقصد التورية.

2248
01:40:19,130 --> 01:40:24,170
تشير هذه إلى أي عنصر
في صفحة الويب

2249
01:40:24,170 --> 01:40:28,340
الذي نتج عنه استدعاء هذه الدالة.

2250
01:40:28,340 --> 01:40:31,280
إذن تعد هذه-- يمكنكم التفكير فيها كمتغير، 
متغير خاص، الذي

2251
01:40:31,280 --> 01:40:34,700
يشير دائمًا إلى أي عنصر
تستمع إليه.

2252
01:40:34,700 --> 01:40:37,880
وهكذا فإن هذه القيمة فقط توفر لي بعض
ضغطات المفاتيح لأنني لا-- تحتاجون إلى

2253
01:40:37,880 --> 01:40:42,920
استخدام document.querySelector
للوصول إلى هذه القائمة المحددة.

2254
01:40:42,920 --> 01:40:47,290
لكننا سنرى هذا مجددًا، 
ربما، على طول الطريق.

2255
01:40:47,290 --> 01:40:48,730
أي أسئلة؟

2256
01:40:48,730 --> 01:40:51,160
ودعوني أشير إلى
شيء واحد يبدو غبيًا.

2257
01:40:51,160 --> 01:40:54,470
يبدو حجم الخط، هنا،
مختلفًا عن CSS.

2258
01:40:54,470 --> 01:40:55,720
في CSS، ماذا نسمي هذا؟

2259
01:40:55,720 --> 01:40:59,870


2260
01:40:59,870 --> 01:41:01,800
هل تتذكرون؟

2261
01:41:01,800 --> 01:41:05,250
قمنا بإعداد حجم الخط صغير، ومتوسط، وكبير.

2262
01:41:05,250 --> 01:41:08,100
لقد كان حجم الخط.

2263
01:41:08,100 --> 01:41:10,157
إذن كان هذا أن اليد اليسرى
لا تتحدث إلى اليد اليمنى

2264
01:41:10,157 --> 01:41:11,490
عندما تم اختراع هذه الأشياء.

2265
01:41:11,490 --> 01:41:16,260
تبين أن هذه الشرطة
هي JavaScript، ماذا تعني، ربما؟

2266
01:41:16,260 --> 01:41:17,730
ناقص أم طرح.

2267
01:41:17,730 --> 01:41:20,910
وبالتالي، فإن هذه الصيغة تم
تقسمها فقط في سياق JavaScript.

2268
01:41:20,910 --> 01:41:21,930
إذن ما الذي فعله البشر؟

2269
01:41:21,930 --> 01:41:25,200
قرروا أنه في أي وقت يكون 
لديكم خاصية CSS هذه الكلمة،

2270
01:41:25,200 --> 01:41:27,420
شرطة، شيء، تخلصوا من الشرطة.

2271
01:41:27,420 --> 01:41:29,010
واكتبوا الكلمة التالية بأحرف كبيرة.

2272
01:41:29,010 --> 01:41:31,890
وسيكون هذا هو الربط في
JavaScript-- إذن هذا مجرد مُعطى بسيط

2273
01:41:31,890 --> 01:41:34,540
هناك ربما يمكنك وضعه في الاعتبار.

2274
01:41:34,540 --> 01:41:38,230
دعونا نلقي نظرة، ربما،
على قيمة واحدة أخيرة--

2275
01:41:38,230 --> 01:41:40,860
أوه، ماذا عن قيمتين أخيرتين؟

2276
01:41:40,860 --> 01:41:44,280
دعونا نمضي قدمًا ونفعل هذا
باستخدام blink.html.

2277
01:41:44,280 --> 01:41:47,880
إذن في وقت سابق من اليوم، 
عندما تم أولاً اختراع الويب

2278
01:41:47,880 --> 01:41:51,180
وكانت HTML في مراحلها الأولى،
كانت هناك علامة رائعة

2279
01:41:51,180 --> 01:41:53,190
وهي من المحتمل أن تكون على
صفحتي الرئيسية الشخصية

2280
01:41:53,190 --> 01:41:55,650
وتُسمى blink وحرفيًا قامت بذلك.

2281
01:41:55,650 --> 01:41:59,400
يمكن أن تكون لديكم علامة 
كانت فتح قوس، B-Li-N-K، قوس مغلق،

2282
01:41:59,400 --> 01:42:03,240
ضَع بعض الكلمات، ومن ثم أغلق العلامة، 
ومن ثم ستقوم صفحتك على الويب بذلك

2283
01:42:03,240 --> 01:42:05,700
لجميع الزوار، الأمر الذي أدركه
البشر، في النهاية، حسنًا،

2284
01:42:05,700 --> 01:42:10,370
هذا أمر سخيف ومزعج حقًا 
أن ننظر إلى-- تجربة المستخدم السيئة، أو قرينتها.

2285
01:42:10,370 --> 01:42:11,580
ولذا قاموا بالتخلص منها.

2286
01:42:11,580 --> 01:42:14,670
إنها إحدى العلامات القليلة، على ما أعتقد،
من HTML التي تمت إزالتها بالفعل

2287
01:42:14,670 --> 01:42:16,310
من قِبل لجنة، بدلاً من إضافتها.

2288
01:42:16,310 --> 01:42:20,130
كانت هناك شاشة اسمية في ذلك الوقت، أيضًا،
وهي-- مثل علامة المسرح كانت فقط

2289
01:42:20,130 --> 01:42:22,650
تقوم بتمرير الكلمات عبر صفحتك.

2290
01:42:22,650 --> 01:42:26,110
لذلك من المحتمل أن تكون قد شاهدتَ مواقع ويب مثل
هذا الذي يعيد إنشاؤهم بطريقة ما.

2291
01:42:26,110 --> 01:42:27,960
ولكن يمكنكم القيام بذلك باستخدام JavaScript.

2292
01:42:27,960 --> 01:42:31,050
فكروا في هذا بطريقة منطقية.

2293
01:42:31,050 --> 01:42:33,604
نحن نعرف كيف، في التعليمة البرمجية، يمكننا
تغيير نمط عنصر ما.

2294
01:42:33,604 --> 01:42:35,020
لم نرى كيفية فعل ذلك حتى الآن.

2295
01:42:35,020 --> 01:42:39,300
ولكن يمكنكم جعل العنصر
يظهر أو يختفي، يظهر أو يختفي.

2296
01:42:39,300 --> 01:42:41,610
تبين أن في JavaScript،
يمكنكم استخدام مؤقِت.

2297
01:42:41,610 --> 01:42:42,735
لديكم حق الوصول إلى الساعة.

2298
01:42:42,735 --> 01:42:45,193
ويمكنكم بالفعل كتابة التعليمة
البرمجية التي تقول، أتعرفون ماذا؟

2299
01:42:45,193 --> 01:42:46,800
كل نصف ثانية، استدعي هذه الدالة.

2300
01:42:46,800 --> 01:42:47,760
استدعي هذه الدالة.

2301
01:42:47,760 --> 01:42:48,559
استدعي هذه الدالة.

2302
01:42:48,559 --> 01:42:49,350
استدعي هذه الدالة.

2303
01:42:49,350 --> 01:42:53,100
وما تفعله هذه الدالة هو
تغيير نمط الصفحة

2304
01:42:53,100 --> 01:42:56,192
لتظهر أو تختفي، لتظهر أو تختفي.

2305
01:42:56,192 --> 01:42:57,900
الآن، من المعتاد أن يتم إنشاؤها
في المتصفحات.

2306
01:42:57,900 --> 01:43:00,210
ولكن الآن يمكنكم إعادة إنشاؤها
باستخدام شيء من هذا القبيل.

2307
01:43:00,210 --> 01:43:02,230
ولن أتطرق إلى ما هي
التعليمة البرمجية.

2308
01:43:02,230 --> 01:43:04,110
لكن هذه ميزة واحدة فقط هناك.

2309
01:43:04,110 --> 01:43:08,070
دعونا نلقي نظرة على مثال واحد أخير،
على الرغم من أنه مخيف بعض الشي.

2310
01:43:08,070 --> 01:43:10,090
ها هي التعليمة البرمجية الأولى.

2311
01:43:10,090 --> 01:43:12,030
وتُسمى تحديد الموقع الجغرافي.

2312
01:43:12,030 --> 01:43:15,240
هذا هو الأمر الذي يثير الغضب الآن في
التطبيقات مثل Uber وWaze

2313
01:43:15,240 --> 01:43:18,240
وFind My Friends على
هاتف iPhone وما شابه ذلك.

2314
01:43:18,240 --> 01:43:20,850
ها هي تعليمة برمجية بشكل نسبي
ستكشف

2315
01:43:20,850 --> 01:43:22,702
عن مكان وجود مستخدمك في العالم.

2316
01:43:22,702 --> 01:43:24,160
الآن، هذا الأمر صعب بعض الشيء هنا.

2317
01:43:24,160 --> 01:43:28,110
لكنها تقريبًا هذا الملف،
html مع علامة نص.

2318
01:43:28,110 --> 01:43:30,375
ولكن يوجد هناك هذا
المتغير العالمي المتميز الآخر.

2319
01:43:30,375 --> 01:43:31,500
ولن نستخدمه كثيرًا.

2320
01:43:31,500 --> 01:43:34,050
وبالفعل، قد لا تستخدمونه أبدًا
إذا كنتم لا تهتمون بهذه الميزة.

2321
01:43:34,050 --> 01:43:36,660
لكنه يُسمى متصفح،
لأسباب تاريخية.

2322
01:43:36,660 --> 01:43:39,060
ويحتوي المتصفح على ميزة
تُسمى تحديد الموقع الجغرافي.

2323
01:43:39,060 --> 01:43:42,210
وميزة تحديد الموقع الجغرافي، ترمز إلى
تحديد موقع الناس جغرافيًا،

2324
01:43:42,210 --> 01:43:45,052
ويحتوي على دالة تُسمى
getCurrentPosition.

2325
01:43:45,052 --> 01:43:46,760
وذلك لأسباب لن
نتطرق إليها حقًا،

2326
01:43:46,760 --> 01:43:48,180
تأخذ دالة كوسيطة.

2327
01:43:48,180 --> 01:43:49,929
وهذا هو نموذج
JavaScript الشائع جدًا،

2328
01:43:49,929 --> 01:43:52,290
ولكن المزيد حول هذا
في المشاريع النهائية، ربما.

2329
01:43:52,290 --> 01:43:56,220
ستتم كتابة هذا السطر من التعليمة البرمجية
بالمستند خط العرض الخاص

2330
01:43:56,220 --> 01:44:00,000
بالمستخدم، وإذا انتقلنا إلى
اليمين، خط الطول الخاص بها.

2331
01:44:00,000 --> 01:44:01,680
إذن هكذا فهمنا لماذا تصبح مريعة.

2332
01:44:01,680 --> 01:44:06,180
إذا كنت ستستخدم هذه التعليمة البرمجية في
مواقع الويب الخاصة بك وكان المستخدم يزور،

2333
01:44:06,180 --> 01:44:09,980
مثلما سأفعل الآن، وينقر فوق
الرابط، سيُطلب منه،

2334
01:44:09,980 --> 01:44:12,060
هل تريد أن يعرف 
موقع الويب موقعك؟

2335
01:44:12,060 --> 01:44:13,320
أحيانًا، قد تقول نعم.

2336
01:44:13,320 --> 01:44:14,310
وأحيانًا، قد تقول لا.

2337
01:44:14,310 --> 01:44:16,470
بصراحة، ربما ينقر معظمنا 
فقط فوق Allow بشكل حدسي

2338
01:44:16,470 --> 01:44:17,928
دون التفكير حقًا في ذلك.

2339
01:44:17,928 --> 01:44:20,460
ولكن من الواضح، أنني هنا.

2340
01:44:20,460 --> 01:44:22,290
دعوني أمضي قدمًا وأظلل ذلك.

2341
01:44:22,290 --> 01:44:26,250
دعوني أنتقل إلى maps.google.com لأنه
أيًا كان موقع الويب الذي انتقلت إليه للتو،

2342
01:44:26,250 --> 01:44:28,377
سواء كان Facebook أو CNN أو--

2343
01:44:28,377 --> 01:44:30,460
الكثير من المواقع الإخبارية
التي تريد أن تعرف أين أنت.

2344
01:44:30,460 --> 01:44:33,427
إذا انتقلتم مثلاً، إلى، fandango.com
أو ما شابه ذلك من أجل الحصول على تذاكر السينما،

2345
01:44:33,427 --> 01:44:35,010
فقد يريدون معرفة مكانك.

2346
01:44:35,010 --> 01:44:37,140
حسنًا، أنت تمنحهم
معلومات دقيقة جدًا.

2347
01:44:37,140 --> 01:44:40,710
إذا مضيت قدمًا وبحثت عن
إحداثيات GPS هذه على Google،

2348
01:44:40,710 --> 01:44:43,960
هذا ليس مكان تواجدي.

2349
01:44:43,960 --> 01:44:45,121
ما هذا الهراء؟

2350
01:44:45,121 --> 01:44:48,311
[LAUGHTER]

2351
01:44:48,311 --> 01:44:48,810


2352
01:44:48,810 --> 01:44:50,160
لماذا نحن في أوكلاهوما؟

2353
01:44:50,160 --> 01:44:52,152
[LAUGHTER]

2354
01:44:52,152 --> 01:45:00,120


2355
01:45:00,120 --> 01:45:03,206
أنا لا أفهم ما الذي يحدث.

2356
01:45:03,206 --> 01:45:04,830
لم يكن هذا جزءًا من الإثبات.

2357
01:45:04,830 --> 01:45:06,329
سيكون هذا مُعضِلة كبيرة.

2358
01:45:06,329 --> 01:45:08,170
دعونا نوقف تشغيل
الإنترنت السلكي هنا.

2359
01:45:08,170 --> 01:45:11,550
وعلى ما يبدو، أننا سننتقل
من أوكلاهوما اليوم.

2360
01:45:11,550 --> 01:45:14,190
لنقم بتشغيل Wi-Fi،
الذي سيمنحني فقط

2361
01:45:14,190 --> 01:45:16,830
عنوان IP مختلف، وهو
طريقة رائعة لربط

2362
01:45:16,830 --> 01:45:18,540
بداية المحاضرة معًا.

2363
01:45:18,540 --> 01:45:21,150
إذا انتظرت ثانية، يجب أن يكون باللون الأخضر.

2364
01:45:21,150 --> 01:45:22,510
هيا-- لا يوجد عنوان IP.

2365
01:45:22,510 --> 01:45:24,468
الآن قد تكون هذه
الكلمات منطقية أكثر.

2366
01:45:24,468 --> 01:45:25,140
هيا.

2367
01:45:25,140 --> 01:45:26,550
أعطني عنوان IP.

2368
01:45:26,550 --> 01:45:28,800
هيا.

2369
01:45:28,800 --> 01:45:30,270
هارفارد-- ها نحن ذا.

2370
01:45:30,270 --> 01:45:31,630
يوجد عنوان IP الخاص بي.

2371
01:45:31,630 --> 01:45:32,230
دعونا نعيد التحميل.

2372
01:45:32,230 --> 01:45:36,442


2373
01:45:36,442 --> 01:45:39,346
[LAUGHTER]

2374
01:45:39,346 --> 01:45:40,650


2375
01:45:40,650 --> 01:45:43,020
سنقوم بإرسال رسالة بريد إلكتروني إلى موظفي 
تكنولوجيا المعلومات عن ذلك لاحقًا.

2376
01:45:43,020 --> 01:45:45,210
لكن كل الإنترنت--

2377
01:45:45,210 --> 01:45:47,300
ما يعنيه هذا هو--

2378
01:45:47,300 --> 01:45:49,012
لا، هذا غريب حقًا.

2379
01:45:49,012 --> 01:45:51,220
لدينا الكثير من اللقطات
لقصها من فيديو اليوم.

2380
01:45:51,220 --> 01:45:56,100
إذن ما يفعله هذا،
مع احتمالية منخفضة،

2381
01:45:56,100 --> 01:45:59,220
هو إخبارك بمكان المستخدمين من
حيث خطوط الطول والعرض

2382
01:45:59,220 --> 01:46:02,610
حتى يمكنكم أن تحددوا مواقعهم الجغرافي، 
واكتشاف ما هي دور السينما المحلية

2383
01:46:02,610 --> 01:46:04,170
أو ما هي الأوقات
التي تبدأ فيها بالتخزين،

2384
01:46:04,170 --> 01:46:06,044
أعطهم الاتجاهات إلى
الأماكن، وما شابه ذلك.

2385
01:46:06,044 --> 01:46:08,880
وعلى الرغم من أن ذلك كان من المفترض
أن تكون النهاية الحتمية الكبيرة،

2386
01:46:08,880 --> 01:46:10,320
فعلى ما يبدو، لم ينجح أي شيء من هذا.

2387
01:46:10,320 --> 01:46:11,550
كان اليوم خاطئًا بالكامل.

2388
01:46:11,550 --> 01:46:12,399
نحن في أوكلاهوما.

2389
01:46:12,399 --> 01:46:13,440
لكن لنتوقف هنا اليوم.

2390
01:46:13,440 --> 01:46:14,773
سأبقى هنا لبعض الوقت من أجل الأسئلة.

2391
01:46:14,773 --> 01:46:16,610
سأراكم في المرة القادمة.