1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [ندوة: مسج]

2
00:00:02,690 --> 00:00:04,790
[فيبول شيخاوات، جامعة هارفارد]

3
00:00:04,790 --> 00:00:08,000
[هذا CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
إذا كنت بعد طول في المنزل، يمكنك الوصول فعلا الشرائح بلدي على الانترنت

5
00:00:10,640 --> 00:00:13,310
من خلال الذهاب إلى هذا الرابط.

6
00:00:13,310 --> 00:00:18,650
انها TjjRWj، على bit.ly.

7
00:00:18,650 --> 00:00:20,700
يمكنك أيضا اذهبوا إلى عنوان URL مباشرة،

8
00:00:20,700 --> 00:00:27,300
وهو cloud.cs50.net / ~ vshekhawat، الذي هو اسمي،

9
00:00:27,300 --> 00:00:32,409
ومسج.

10
00:00:32,409 --> 00:00:34,920
وأنا أشجع بشدة لك لمتابعة على طول إذا كنت أشاهد في المنزل،

11
00:00:34,920 --> 00:00:40,650
وإذا كنت هنا، أيضا، لأن هذا هو عرض تقديمي تفاعلي جدا.

12
00:00:40,650 --> 00:00:43,160
>> حتى اليوم انا ذاهب الى أن نتحدث عن مسج، والسؤال الأول هو،

13
00:00:43,160 --> 00:00:45,300
ما هو مسج؟

14
00:00:45,300 --> 00:00:47,090
هذا العام، وأنا أعلم يا رفاق قد لا تغطيها سكريبت

15
00:00:47,090 --> 00:00:51,080
في قدر من التفصيل كما فعلنا في السنوات الماضية.

16
00:00:51,080 --> 00:00:53,150
جافا سكريبت هي، أولا وقبل كل شيء، مجرد لغة من جانب العميل

17
00:00:53,150 --> 00:00:58,390
الذي تستخدمه لتشغيل البرامج النصية ورمز على الجهاز الخاص بكل مستخدم.

18
00:00:58,390 --> 00:01:00,660
بحيث يكون لديك خادم صفحات الويب يتيح للناس،

19
00:01:00,660 --> 00:01:02,600
ولكن قد ترغب في القيام به الاشياء على الجهاز الخاص بهم،

20
00:01:02,600 --> 00:01:08,060
نسأل آلة لإرسال الطلبات إلى الخادم الخاص بك كل 30 ثانية أو شيء من هذا القبيل.

21
00:01:08,060 --> 00:01:10,420
يمكنك أن تفعل ذلك باستخدام جافا سكريبت.

22
00:01:10,420 --> 00:01:13,190
مسج يوفر فقط المزيد من الوظائف على رأس سكريبت

23
00:01:13,190 --> 00:01:15,680
أن يفعل الاشياء إضافي من جانبك.

24
00:01:15,680 --> 00:01:17,710
إذا نظرتم إلى محتويات على القمة،

25
00:01:17,710 --> 00:01:21,410
أن يصف بعض الاشياء التي كنت قادرا على القيام به.

26
00:01:21,410 --> 00:01:23,500
ذلك العام، تم إنشاؤه في يناير كانون الثاني عام 2006.

27
00:01:23,500 --> 00:01:26,560
وقد صممت لأول مرة من في أغسطس 2005.

28
00:01:26,560 --> 00:01:31,370
انها كانت موجودة لبضع سنوات، وانها حقا جزء من حركة الويب 2.0 الجديد

29
00:01:31,370 --> 00:01:34,330
وهذا ما جعلت من شبكة الإنترنت لامعة جدا.

30
00:01:34,330 --> 00:01:37,630
انها مكتبة جافا سكريبت الأكثر استخداما على نطاق واسع.

31
00:01:37,630 --> 00:01:41,450
أكثر من 19.6 مليون المواقع تستخدم ذلك، واستخدام ما زال يتزايد

32
00:01:41,450 --> 00:01:45,640
وفقا لbuiltwith.com، التي، على ما يبدو، خلال العام الماضي،

33
00:01:45,640 --> 00:01:49,710
لقد كان مجرد تزايد مستمر خطيا إلى حد ما.

34
00:01:49,710 --> 00:01:52,870
من بين أفضل 10 ملايين المواقع، لا يزال هناك -

35
00:01:52,870 --> 00:01:55,180
حوالي 40٪ منهم في الوقت الحاضر استخدام ذلك.

36
00:01:55,180 --> 00:01:58,540
الفيسبوك يستخدمه، والكثير من المواقع الأخرى تستخدم حاليا.

37
00:01:58,540 --> 00:02:01,540
يمكنك أن تبحث في تلك الاحصائيات الخاصة بك، إذا كنت ترغب.

38
00:02:01,540 --> 00:02:05,820
ويمكن لك أن تقول انها شرعي لأنه يحتوي على الأساس و 13 أعضاء مجلس الإدارة،

39
00:02:05,820 --> 00:02:11,910
جنبا إلى جنب مع فريق من 20 شخصا الذين يعملون على ذلك على أساس منتظم.

40
00:02:11,910 --> 00:02:16,110
ذلك انها تستخدم على نطاق واسع جدا، لديه. URL ORG، انها نزوة،

41
00:02:16,110 --> 00:02:21,660
فقد الفوائد العرضية لغيرها من الاشياء، حتى انها صفقة كبيرة.

42
00:02:21,660 --> 00:02:24,510
>> لماذا يجب استخدامه؟ مسج خفيفة الوزن جدا.

43
00:02:24,510 --> 00:02:27,270
وهذا يعني انها ليست ملف ضخم. يمكنك تحميل

44
00:02:27,270 --> 00:02:31,540
ملف مصغر، والذي هو من دون كل المساحة البيضاء والتعليقات، وانها فقط 32 كيلو بايت.

45
00:02:31,540 --> 00:02:33,600
لذلك فمن السهل أن إرم فقط على صفحة الويب الخاصة بك

46
00:02:33,600 --> 00:02:35,910
وفقط لبدء استخدامه.

47
00:02:35,910 --> 00:02:39,630
كما انها مكتوبة بشكل فعال جدا، لذلك لا يستغرق الكثير من -

48
00:02:39,630 --> 00:02:42,550
فإنه لا تبطئ موقع الويب الخاص بك كثيرا عند استخدامه.

49
00:02:42,550 --> 00:02:45,770
فإنه يتيح لك تنفيذ الأمور التي كانت غير مجدية في السابق.

50
00:02:45,770 --> 00:02:47,790
هناك بعض الجوانب من وظائف،

51
00:02:47,790 --> 00:02:51,780
مثل إنشاء الرسوم المتحركة، التي عادة ما تكون للغاية، من الصعب جدا القيام به.

52
00:02:51,780 --> 00:02:54,300
ولكن في مسج انهم في الواقع بسيط جدا.

53
00:02:54,300 --> 00:02:57,040
وهناك بعض الأشياء التي هي مزعج القيام به،

54
00:02:57,040 --> 00:02:59,610
ممكن في جافا سكريبت، مثل إرسال طلب POST،

55
00:02:59,610 --> 00:03:02,190
ولكن لتقوم بإرسال طلب إلى ملقم، لديك لكتابة

56
00:03:02,190 --> 00:03:04,320
خمسة أو ستة أو سبعة أسطر من التعليمات البرمجية.

57
00:03:04,320 --> 00:03:07,200
الآن يمكنك أن تفعل ذلك فقط في سطر واحد من التعليمات البرمجية، في مكالمة وظيفة واحدة.

58
00:03:07,200 --> 00:03:11,790
حقا أن يبسط الكثير من الاشياء التي كنت تفعل.

59
00:03:11,790 --> 00:03:15,950
وجميع الاطفال بارد استخدامه. قبل ذلك، أعني لي.

60
00:03:15,950 --> 00:03:19,270
في قراري النهائي للمشروع العام الماضي، والذي هو news.whrb.org،

61
00:03:19,270 --> 00:03:22,530
والتي هي لمحطة إذاعية، أنا خلق هذا بلوق

62
00:03:22,530 --> 00:03:29,750
التي تستضيف جميع يدل على أننا قد فعلت وملفات MP3 بالنسبة لهم.

63
00:03:29,750 --> 00:03:32,070
يمكنك تصفح من خلال العروض الماضية،

64
00:03:32,070 --> 00:03:34,130
وانها فعلت كل ذلك باستخدام مسج. يمكن أن أقول لكم

65
00:03:34,130 --> 00:03:37,340
بسبب كل هذه الرسوم المتحركة، أساسا.

66
00:03:37,340 --> 00:03:42,360
حتى إذا كان لديك - إذا كنت تقوم بإنشاء وظيفة جديدة،

67
00:03:42,360 --> 00:03:45,980
ترى هذه slideDowns قليلا، وهذا هو كل ذلك باستخدام مسج.

68
00:03:45,980 --> 00:03:49,140
وهذا تتلاشى - حتى يتم كل هذا النوع من الاشياء باستخدام مسج،

69
00:03:49,140 --> 00:03:52,720
وليس لديك لإعادة تحميل الصفحة باستمرار للتنقل في الموقع.

70
00:03:52,720 --> 00:03:57,220
آخر شيء بارد أن انها مصنوعة باستخدام مسج هو هذا العرض.

71
00:03:57,220 --> 00:03:59,700
أنا باستخدام هذا الشيء مفتوحة المصدر تسمى scrolldeck،

72
00:03:59,700 --> 00:04:03,250
الذي كتب شخص على رأس مسج.

73
00:04:03,250 --> 00:04:04,870
إذا كنت تبدو في الواقع عند المصدر، يمكنك أن ترى أن

74
00:04:04,870 --> 00:04:07,830
أنهم يستخدمون هذه علامة الدولار؛ علامات الدولار

75
00:04:07,830 --> 00:04:12,110
وتستخدم في مسج، للدلالة على أن وظيفة هي وظيفة مسج.

76
00:04:12,110 --> 00:04:15,020
حتى انهم تعريف المجمع على رأس مسج

77
00:04:15,020 --> 00:04:18,570
التي تسمح لك لتقديم عرض من هذا القبيل،

78
00:04:18,570 --> 00:04:21,200
ويمكنك أن ترى أن هنا انهم بما في ذلك ملف مسج الأصلي،

79
00:04:21,200 --> 00:04:24,120
وهو ما سيكون لديك لتشمل إذا أردت استخدام مسج

80
00:04:24,120 --> 00:04:30,450
في المواقع الإلكترونية الخاصة بك.

81
00:04:30,450 --> 00:04:32,790
>> لمس على ذلك، كيف يمكنك تثبيته؟

82
00:04:32,790 --> 00:04:36,150
يمكنك اذهبوا إلى jQuery.com وتحميل الملف،

83
00:04:36,150 --> 00:04:38,320
إضافته إلى دليل على الشبكة العالمية وإدراجه.

84
00:04:38,320 --> 00:04:42,200
وذلك فقط على القمة، في العلامة رئيس ملف HTML الخاص بك

85
00:04:42,200 --> 00:04:45,400
من ملف HTML الرئيسي الخاص بك، فقط يجب أن سطر من التعليمات البرمجية

86
00:04:45,400 --> 00:04:49,490
مع الإصدار الصحيح لإصدار مسج الذي تستخدمه.

87
00:04:49,490 --> 00:04:51,340
يمكنك تحميل البرنامج من خلال الذهاب الى jQuery.com،

88
00:04:51,340 --> 00:04:55,130
انقر على زر "مسج تحميل،" وكنت قد حصلت عليه. هذا هو.

89
00:04:55,130 --> 00:04:58,880
وفعلا، يمكننا أن نلقي نظرة على ما يبدو.

90
00:04:58,880 --> 00:05:01,080
إذا نقرت على تحميل هنا، مسج هو هذا.

91
00:05:01,080 --> 00:05:05,260
انها واحدة فقط ملف JavaScript كبيرة أن يفعل كل الاشياء السحر بالنسبة لك.

92
00:05:05,260 --> 00:05:09,270
هذه هي النسخة مصغر، والذي هو غير قابل للقراءة على الإطلاق.

93
00:05:09,270 --> 00:05:13,180
يمكنك ايضا ان ننظر في إصدار التنمية، والذي هو قابل للقراءة

94
00:05:13,180 --> 00:05:15,370
ولكن لا يزال جدا، طويلة جدا.

95
00:05:15,370 --> 00:05:17,980
انها الكثير من الاشياء في هناك.

96
00:05:17,980 --> 00:05:20,240
يمكنك أيضا ربط إلى الإصدار غوغل استضافت منه.

97
00:05:20,240 --> 00:05:23,820
بحيث سوف تسمح لك أن تعتمد فقط على جوجل لتوفير ذلك.

98
00:05:23,820 --> 00:05:29,310
أنها توفر كل نسخة منه، وهي متاحة في جميع الأوقات.

99
00:05:29,310 --> 00:05:31,530
لذا يمكنك الاعتماد على الأرجح على جوجل لاستضافة لانها لكم.

100
00:05:31,530 --> 00:05:33,270
أو يمكنك الارتباط الخاصة أحدث إصدار مسج ل.

101
00:05:33,270 --> 00:05:36,400
لديهم URL التي يتم تحديثها دائما إلى أحدث إصدار.

102
00:05:36,400 --> 00:05:40,850
انها مسج-آخر، وهناك مشكلة واحدة مع ذلك،

103
00:05:40,850 --> 00:05:44,350
وهو أنه إذا كان مسج المحدثة وبعض الوظائف السابقة

104
00:05:44,350 --> 00:05:47,250
كانوا قد يصبح retrograded أو إهمال،

105
00:05:47,250 --> 00:05:49,620
فإنه لا يجوز - بل قد تبدأ لعدم الحصول على الدعم بعد الآن.

106
00:05:49,620 --> 00:05:52,940
لذلك إذا كنت أكتب موقع على شبكة الانترنت باستخدام الإصدار 1.8.2،

107
00:05:52,940 --> 00:05:55,000
بواسطة الإصدار 2.7 مرة يخرج

108
00:05:55,000 --> 00:05:57,000
بعض من الوظائف التي كتب لا تعمل بعد الان.

109
00:05:57,000 --> 00:05:59,930
لذلك فمن الأفضل أن مجرد تحميل ملف كيلو بايت 32،

110
00:05:59,930 --> 00:06:04,100
وضعه على صفحة الويب الخاصة بك، وأنها سوف تعمل إلى الأبد.

111
00:06:04,100 --> 00:06:07,450
>> انا ذاهب الى المضي قدما والبدء في الحديث عن وظيفة الفعلي للمسج.

112
00:06:07,450 --> 00:06:13,090
وأول شيء هو محددات. هذا هو ما كان ينظر في البداية إلى توفير مسج.

113
00:06:13,090 --> 00:06:15,500
ويمكنك النقر على وثائق للنظر في

114
00:06:15,500 --> 00:06:18,690
وثائق تفصيلية لمحددات انا ذاهب الى أن تغطي.

115
00:06:18,690 --> 00:06:24,120
الفكرة وراء محددات هو أنه يمكنك تحديد عناصر HTML على صفحة.

116
00:06:24,120 --> 00:06:28,790
العناصر على صفحة لها معرفات ودروس وجوانب تعريفية أخرى لهم.

117
00:06:28,790 --> 00:06:30,500
هناك أيضا - '؛ إعادة في أوامر مختلفة.

118
00:06:30,500 --> 00:06:32,570
لبعض الوقت انهم متداخلة داخل بعضها البعض.

119
00:06:32,570 --> 00:06:38,120
مسج يسمح لك لإنشاء الاستعلامات البسيطة التي استرداد العناصر من الصفحة.

120
00:06:38,120 --> 00:06:41,890
ثم يمكنك التعامل مع هذه العناصر باستخدام وظائف مسج،

121
00:06:41,890 --> 00:06:43,990
وهو القسم التلاعب أننا سنصل إلى وقت لاحق.

122
00:06:43,990 --> 00:06:46,040
يمكنك تغيير HTML، CSS تغيير،

123
00:06:46,040 --> 00:06:50,500
يمكنك أيضا تحريك وإضافة وظائف التي تنشط على بعض الأحداث.

124
00:06:50,500 --> 00:06:52,710
لذلك، على سبيل المثال، إذا كان هناك شيء يتم النقر، وتريد أن يحدث شيء،

125
00:06:52,710 --> 00:06:55,210
يمكنك أن تفعل ذلك باستخدام مسج كذلك.

126
00:06:55,210 --> 00:06:57,380
وهناك عدد كبير من الطرق لتحديد العناصر.

127
00:06:57,380 --> 00:07:00,310
معظمهم لم يسبق لي استخدامها، ولكن هناك الأساسية منها،

128
00:07:00,310 --> 00:07:02,340
والتي هي مهمة جدا.

129
00:07:02,340 --> 00:07:05,750
عنصر محدد، على سبيل المثال، إذا كنت مجرد اختيار أي شيء

130
00:07:05,750 --> 00:07:10,640
وهذا هو DIV - أنا فعلا رمز مفتوحة لعرض الشرائح هذا.

131
00:07:10,640 --> 00:07:13,450
لذلك، على سبيل المثال، وهنا يكمن الشريحة الأولى.

132
00:07:13,450 --> 00:07:17,430
هنا لدينا شعبة. إذا كنا فعلا تحديد كافة DIVS على الصفحة،

133
00:07:17,430 --> 00:07:22,300
انها سوف تعطي فقط لنا مجموعة من جميع DIVS التي توجد في هذا الملف.

134
00:07:22,300 --> 00:07:27,040
معرف محدد يتيح لك تحديد أي شيء مع هوية معينة.

135
00:07:27,040 --> 00:07:32,230
حتى إذا كان هذا، على سبيل المثال، وهذا الشيء لديه معرف "ما"

136
00:07:32,230 --> 00:07:37,160
وإذا فعلنا هذا مع # ما بدلا من بعض ID،

137
00:07:37,160 --> 00:07:42,920
انها ستعود فقط صفيف يحتوي على عنصر واحد وهذا هو ذلك العنصر من الصفحة.

138
00:07:42,920 --> 00:07:45,490
ويمكننا أيضا الجمع بين محددات بهذه الطريقة من خلال وجود

139
00:07:45,490 --> 00:07:48,260
فقط حدد الأشياء مع معرفات التي هي DIVS.

140
00:07:48,260 --> 00:07:51,810
لذا نعم. حدد فقط DIVS أن يكون هذا الرقم.

141
00:07:51,810 --> 00:07:55,260
لفئة فقط استخدام نقطة، انها نفس الشيء مثل CSS.

142
00:07:55,260 --> 00:07:57,500
يعمل سليل أيضا، لذا إذا كان لديك بعض الطبقة

143
00:07:57,500 --> 00:08:00,170
وأنه قد تتداخل عناصر داخلها - لذلك، على سبيل المثال،

144
00:08:00,170 --> 00:08:03,260
هناك بعض فئة ولها علامة مرساة لربط إلى صفحة أخرى،

145
00:08:03,260 --> 00:08:08,510
يمكنك استخدام بناء الجملة التالي لاسترداد الرابط.

146
00:08:08,510 --> 00:08:12,420
يمكنك أيضا تحديد أشياء متعددة في آن واحد؛ فقط تفصل بينهما بفاصلة،

147
00:08:12,420 --> 00:08:17,360
استخدام أي محدد كنت ترغب، وسوف حدد كل منهم في آن واحد، في مجموعة واحدة.

148
00:08:17,360 --> 00:08:19,650
ثم هناك أيضا ليس محدد، بحيث يمكنك تحديد كل DIVS

149
00:08:19,650 --> 00:08:24,210
التي ليس لديها بعض فئة معينة.

150
00:08:24,210 --> 00:08:28,790
وهذا هو مجرد وسيلة مفيدة للحصول على مقدمة لكيفية عمل هذا التحديد.

151
00:08:28,790 --> 00:08:32,270
سأعرض بعض الأمثلة الملموسة في الثانية.

152
00:08:32,270 --> 00:08:35,480
>> محددات المتقدمة - هذه ليست سوى أمثلة قليلة.

153
00:08:35,480 --> 00:08:38,840
هناك العشرات من هذه، ولكن إذا كنت تريد تحديد كافة العلامات الصورة

154
00:08:38,840 --> 00:08:42,799
في بعض العناصر، ثم على القيام بذلك تماما: صورة.

155
00:08:42,799 --> 00:08:45,340
إذا كنت تريد تحديد العناصر حتى، على سبيل المثال، إذا كان هناك 20 منهم،

156
00:08:45,340 --> 00:08:48,290
كنت تريد تحديد 0، 2، 4، 6 وهلم جرا،

157
00:08:48,290 --> 00:08:51,630
كنت تفعل: حتى، أو يمكنك أيضا القيام به: الغريب.

158
00:08:51,630 --> 00:08:55,470
هذه هي محددات الزائفة، الأمر الذي يعني أنها في الواقع حساب

159
00:08:55,470 --> 00:09:00,960
كل عنصر آخر بدلا من مجرد الذهاب واختيار كل منهم.

160
00:09:00,960 --> 00:09:05,510
يمكنك أيضا - يمكن لكل عنصر أيضا سمات محددة.

161
00:09:05,510 --> 00:09:10,580
لذلك، على سبيل المثال، تشير class = المركز هو أيضا سمة.

162
00:09:10,580 --> 00:09:16,500
لهذه العلامة مرساة، أ href، مرجع النص التشعبي، هو سمة أيضا.

163
00:09:16,500 --> 00:09:21,150
بحيث يمكنك تحديد شيء يربط إلى صفحة محددة أو فقط - انها حقا عامة.

164
00:09:21,150 --> 00:09:25,410
يمكنك تحديد أي شيء مع أي السمة التي ترغب.

165
00:09:25,410 --> 00:09:27,470
ومن ثم، أيضا، يحتوي على السمة.

166
00:09:27,470 --> 00:09:30,420
إذا كنت، على سبيل المثال، أراد لتحديد كافة العناصر والمدخلات

167
00:09:30,420 --> 00:09:32,700
التي تحتوي على كلمة "تمرير" كاسم منهم،

168
00:09:32,700 --> 00:09:37,560
إذا كانت صفحة لديه كتلة إدخال النص

169
00:09:37,560 --> 00:09:41,050
وهذا ما يسمى ب "كلمة السر" التي تريد ان تكون طريقة واحدة يمكن أن تختار ذلك.

170
00:09:41,050 --> 00:09:43,020
وهناك غيرها الكثير. يمكنك ان تمضي قدما وإلقاء نظرة على الوثائق

171
00:09:43,020 --> 00:09:46,950
ونرى أمثلة محددة عن كيف يعمل.

172
00:09:46,950 --> 00:09:48,840
>> والشيء التالي هو DOM التلاعب.

173
00:09:48,840 --> 00:09:52,500
بعد أن حدد العناصر، ونحن سوف تريد أن تفعل فعلا الاشياء معهم.

174
00:09:52,500 --> 00:09:55,500
وحتى الآن نحن لم ينظر في ذلك على الإطلاق، ولكن إذا نظرتم الى وثائق،

175
00:09:55,500 --> 00:09:57,950
هناك حقا الكثير الذي يمكن أن نقوم به.

176
00:09:57,950 --> 00:10:02,900
عند هذه النقطة، ونحن في طريقنا لتحديد العناصر على هذا العرض التقديمي

177
00:10:02,900 --> 00:10:04,890
والتلاعب بها باستخدام مسج.

178
00:10:04,890 --> 00:10:08,290
لأن هذا هو تنفيذها باستخدام مسج، لدينا إمكانية الوصول إلى مكتبة مسج،

179
00:10:08,290 --> 00:10:13,580
ويمكننا استخدام تلك الوظائف ضمن هذا الرمز.

180
00:10:13,580 --> 00:10:16,200
شيء واحد المفيدة التي قد لا تعرف عنه هو وحدة التحكم.

181
00:10:16,200 --> 00:10:19,340
وجوجل كروم هو ما أنا باستخدام. يمكنك الضغط على ALT الأمر J

182
00:10:19,340 --> 00:10:21,720
أو ALT السيطرة J لفتح وحدة التحكم.

183
00:10:21,720 --> 00:10:26,130
في فايرفوكس وأعتقد أنه حان قيادة التحول K أو سيطرة التحول K.

184
00:10:26,130 --> 00:10:28,880
في سفاري لديك للذهاب تغيير بعض الإعدادات.

185
00:10:28,880 --> 00:10:35,460
هناك الارتباط إذا كنت ترغب في القيام بذلك، ولكن أوصي الحصول على كروم أو فايرفوكس.

186
00:10:35,460 --> 00:10:37,750
لذلك دعونا فتح وحدة التحكم، انها هنا في الأسفل.

187
00:10:37,750 --> 00:10:41,170
انها تسمح لك لفي الأساس مجرد فعل أي شيء تريده.

188
00:10:41,170 --> 00:10:45,100
بحيث يمكنك كتابة فقط في إنشاء متغير يسمى X،

189
00:10:45,100 --> 00:10:49,200
س = 5، دعونا نرى ما س + 2 هو.

190
00:10:49,200 --> 00:10:57,670
حتى انك تستطيع ان تفعل شيئا مثل CS + دعونا نرى، X + 45، والتي ستكون CS50.

191
00:10:57,670 --> 00:11:00,530
يمكنك أن تفعل سوى بعض الاشياء جافا سكريبت نموذجي.

192
00:11:00,530 --> 00:11:02,730
ولكن يمكنك أيضا القيام مسج هنا.

193
00:11:02,730 --> 00:11:06,200
>> لذلك دعونا ننظر إلى هذا الجانب الأول هنا.

194
00:11:06,200 --> 00:11:09,500
ونحن في طريقنا إلى إنشاء متغير تسمى HTML والتي هي سلسلة.

195
00:11:09,500 --> 00:11:15,890
أنه يحتوي على علامة الفقرة في ذلك، وهذا دعا بعض النص الجديد.

196
00:11:15,890 --> 00:11:19,420
لذلك لدينا هذا HTML، انها بعض النص الجديد، في الفقرة به.

197
00:11:19,420 --> 00:11:21,800
الآن نحن نريد فعلا لإضافته إلى الصفحة.

198
00:11:21,800 --> 00:11:28,310
يمكنني إعداده بحيث HTML لهذه الفقرة، وهذا العنوان هنا، هو إلحاق ID.

199
00:11:28,310 --> 00:11:32,320
إذا قمنا باختيار إلحاقي ID ومن ثم إلحاق إليها

200
00:11:32,320 --> 00:11:34,560
المتغير HTML أنا خلقت للتو،

201
00:11:34,560 --> 00:11:40,370
وسوف أضيف أن HTML في نهاية، والحق بعد هذه الفقرة العلامة.

202
00:11:40,370 --> 00:11:43,730
حتى إذا فعلنا ذلك - اخترنا هذه الفقرة،

203
00:11:43,730 --> 00:11:47,590
ولقد استدعاء الدالة الإلحاقي مع المتغير HTML أنا فقط واضاف،

204
00:11:47,590 --> 00:11:50,960
وسوف أضيف أن النص الجديد هناك حق على الصفحة.

205
00:11:50,960 --> 00:11:54,970
ويمكننا أيضا prepend، مما يعني أنه سوف يذهب من قبل، في بداية هذا العنصر.

206
00:11:54,970 --> 00:11:58,290
حتى لا يكون هناك بعض النص الجديد في بداية وبعد ذلك.

207
00:11:58,290 --> 00:12:01,660
أنا يمكن ان تمضي قدما وتجديد للتخلص من هذه الاشياء لقد فعلت فقط.

208
00:12:01,660 --> 00:12:05,280
ولكن هذا مثال كيف يمكنك استخدام prepend وإلحاق طرق

209
00:12:05,280 --> 00:12:08,910
لمعالجة الاشياء على الصفحة، وإضافة بعض HTML.

210
00:12:08,910 --> 00:12:11,080
>> يمكنك أيضا تغيير الطبقات.

211
00:12:11,080 --> 00:12:14,970
مرة أخرى في هذا الملف الاسلوب، لقد خلق هذا لفئة الفوز

212
00:12:14,970 --> 00:12:19,990
يحتوي أحمر لون النص، بعض لون الخلفية، والظل النص.

213
00:12:19,990 --> 00:12:23,810
يبدو البشعة، ولكن يمكنني في الواقع -

214
00:12:23,810 --> 00:12:26,410
هذه الفقرة يتوافق مع معرف فئة.

215
00:12:26,410 --> 00:12:29,860
حتى أتمكن من إضافة فئة للفوز.

216
00:12:29,860 --> 00:12:31,870
أنا يمكن تنفيذ هذا في وحدة التحكم،

217
00:12:31,870 --> 00:12:35,480
والتي سوف تضيف تلك الفئة، والآن يبدو البشعة، كما هو متوقع.

218
00:12:35,480 --> 00:12:39,680
وCSS تلقائيا يحصل على تطبيقها على الفئات التي -

219
00:12:39,680 --> 00:12:42,680
إذا كان هناك CSS لفئة، فإنه تلقائيا يحصل على تطبيقها

220
00:12:42,680 --> 00:12:44,680
إذا قمت بتغيير فئة عنصر.

221
00:12:44,680 --> 00:12:49,230
وبعد ذلك يمكننا إزالة فقط باستخدام فئة إزالة.

222
00:12:49,230 --> 00:12:53,690
حتى إذا كان لديك بعض فئات محددة مسبقا مثل الأحمر أو ذو أهمية خاصة،

223
00:12:53,690 --> 00:12:55,990
ومن ثم تريد تطبيق تلك العناصر ل،

224
00:12:55,990 --> 00:12:58,230
لم يكن لديك للقيام بكل CSS التصميم في كل مرة.

225
00:12:58,230 --> 00:13:01,510
يمكنك فقط إضافة فئة إلى عنصر، وبعد ذلك سوف تصبح تلقائيا -

226
00:13:01,510 --> 00:13:05,580
سيبدو تلقائيا المناسبة لتلك الفئة.

227
00:13:05,580 --> 00:13:07,900
يمكننا أيضا إزالة الأشياء، لذلك أنا ذاهب لتحديد كافة DIVS

228
00:13:07,900 --> 00:13:10,830
على الصفحة وإزالتها.

229
00:13:10,830 --> 00:13:13,990
ما أن تسير لتبدو وكأنها؟

230
00:13:13,990 --> 00:13:16,170
انها تسير لتبدو وكأنها لا شيء، ولذلك لا يوجد في الواقع أي شيء اليسار.

231
00:13:16,170 --> 00:13:18,170
هو ذهب العرض الذي قدمته.

232
00:13:18,170 --> 00:13:21,290
يمكنني تحديث واعادتها، لحسن الحظ،

233
00:13:21,290 --> 00:13:24,420
لأنه مجرد تشغيل مرة واحدة،

234
00:13:24,420 --> 00:13:29,460
ولكن هذا مثال على إزالة، إذا كنت تريد أن تدمر تماما عنصر خارج الصفحة.

235
00:13:29,460 --> 00:13:33,180
>> يمكنك أيضا الكتابة، وأنا ذاهب لتحديد كافة علامات الفقرة على الصفحة

236
00:13:33,180 --> 00:13:36,850
وتذهب داخلها واستبدال النص أيا كان لديهم في نفوسهم

237
00:13:36,850 --> 00:13:39,690
مع مجرد كلمة "اختبار".

238
00:13:39,690 --> 00:13:46,520
إذا قمت بذلك، سوف تقوم باستبدال كل فقرة على الصفحة مع هذا الاختبار.

239
00:13:46,520 --> 00:13:49,150
نعم. انهم استبدال جميع مع الاختبار.

240
00:13:49,150 --> 00:13:53,270
لذلك هذا هو مثال على الوصول إلى النص والكتابة فوقه.

241
00:13:53,270 --> 00:13:57,490
يمكنك أيضا استرداد المعلومات، وهذا هو حقا بارد لمربعات الإدخال.

242
00:13:57,490 --> 00:14:00,470
إذا كان لديك مربع الإدخال أن الناس تكتب الاشياء في،

243
00:14:00,470 --> 00:14:03,880
الناس تكتب الاشياء في ذلك،

244
00:14:03,880 --> 00:14:09,030
هنا نختار المدخلات، أي علامة الإدخال مع نوع من النص.

245
00:14:09,030 --> 00:14:13,800
في هذه الحالة، هناك مربع إدخال واحد فقط في العرض التقديمي بأكمله،

246
00:14:13,800 --> 00:14:17,260
لذلك سنقوم فقط حدد أول واحد، ومن ثم فإننا ندعو الدالة Val على ذلك.

247
00:14:17,260 --> 00:14:19,570
وترجع قيمة، وبالنسبة لمربع إدخال،

248
00:14:19,570 --> 00:14:24,330
القيمة هي فقط كل ما يحدث أن تكون في داخله.

249
00:14:24,330 --> 00:14:31,880
لذلك اذا لم نفعل ذلك، فقط بإرجاع سلسلة الاشياء.

250
00:14:31,880 --> 00:14:36,860
وإذا كان لنا أن نسميها مرة أخرى بعد كتابة أكثر الاشياء، فإنه يتحول إلى المزيد من الأشياء.

251
00:14:36,860 --> 00:14:40,760
هذا هو واحد طريقة رائعة للوصول إلى عناصر مربع الإدخال، ومن ثم تحقق،

252
00:14:40,760 --> 00:14:45,060
هذا هو عنوان بريد إلكتروني صحيح، وهذا هو تاريخ صالح، على سبيل المثال.

253
00:14:45,060 --> 00:14:49,600
يمكنك فقط استرداد الاشياء على الفور لأن الناس كتابتها،

254
00:14:49,600 --> 00:14:54,830
ثم تحقق ما إذا كان ساري المفعول، وإرساله مرة أخرى إلى الخادم، تفعل أي شيء تريد مع ذلك.

255
00:14:54,830 --> 00:14:57,720
وهذه هي الطريقة التي يمكنك الوصول إلى ما يدور في داخل تلك العلب.

256
00:14:57,720 --> 00:15:00,090
>> يمكنك أيضا تعديل CSS مباشرة، وذلك بدلا من إضافة

257
00:15:00,090 --> 00:15:02,510
فئة التي لديها بعض الخصائص المحددة مسبقا،

258
00:15:02,510 --> 00:15:08,120
يمكنك إضافة فقط مهما CSS تريد أي شيء.

259
00:15:08,120 --> 00:15:10,350
لذلك دعونا تحديد الجسم، والذي هو العرض التقديمي بأكمله،

260
00:15:10,350 --> 00:15:14,370
واللون هو الخاصية التي تحدد ما الألوان هو النص.

261
00:15:14,370 --> 00:15:19,420
إذا كنا تغييره إلى اللون الأحمر، وجميع النص في الصفحة أنتقل إلى الأحمر.

262
00:15:19,420 --> 00:15:26,310
يمكننا أن نفعل شيئا مثل خلفية زرقاء اللون،

263
00:15:26,310 --> 00:15:30,680
هناك نذهب؛ انها جميلة.

264
00:15:30,680 --> 00:15:33,840
يمكنك أن تفعل أي شيء تريده مع هذا.

265
00:15:33,840 --> 00:15:39,250
باستخدام الخاصية CSS، يمكنك تعديل حقا كيف يبدو أي شيء في أي وقت.

266
00:15:39,250 --> 00:15:41,630
والشيء التالي هو الآثار.

267
00:15:41,630 --> 00:15:45,710
الآثار هي في الأساس نفس الشيء مثل تعديل CSS،

268
00:15:45,710 --> 00:15:48,870
لكنها في الواقع توفر بعض الرسوم المتحركة اضافية لذلك.

269
00:15:48,870 --> 00:15:53,380
وذلك بدلا من مجرد عرض أو إخفاء شيء ما أو تغيير اللون،

270
00:15:53,380 --> 00:15:56,130
يمكنك ان تجعل في الواقع أن الرسوم المتحركة.

271
00:15:56,130 --> 00:16:00,760
وهنا الوثائق، إذا كنت تريد أن نلقي نظرة على وثائق واسعة النطاق لذلك.

272
00:16:00,760 --> 00:16:04,760
ولكن انا ذاهب لتغطية أهمها.

273
00:16:04,760 --> 00:16:12,030
هناك عرض وإخفاء خصائص.

274
00:16:12,030 --> 00:16:14,510
إظهار / إخفاء معرف يناظر هذا المربع كله،

275
00:16:14,510 --> 00:16:18,190
حتى لو كنت تخفي ذلك، فإنه سوف تختفي تماما.

276
00:16:18,190 --> 00:16:24,210
ويمكنني أن تظهر مرة أخرى إذا كنت تريد أن تجعل من العودة.

277
00:16:24,210 --> 00:16:26,340
وانها الظهر. ولم تختفي في الواقع،

278
00:16:26,340 --> 00:16:30,670
لم أكن في الواقع إزالة من الصفحة، أنا فقط تعيين الخاصية CSS من الرؤية إلى مخفي

279
00:16:30,670 --> 00:16:34,030
بحيث لا يمكنك رؤيتها بعد الآن.

280
00:16:34,030 --> 00:16:39,250
هناك أيضا الانزلاق صعودا والانزلاق إلى أسفل، وهذا يسمح لك أن يكون هذا التأثير.

281
00:16:39,250 --> 00:16:47,050
فإنه ينزلق حتى تختفي، وبعد ذلك يختفي

282
00:16:47,050 --> 00:16:53,210
يمكنك الانزلاق إلى أسفل لجعله يعود. والآن حان الظهر.

283
00:16:53,210 --> 00:16:57,650
هناك أيضا هذا التأثير تتلاشى، والتي - يتوافق ID تتلاشى إلى هذا المربع.

284
00:16:57,650 --> 00:17:01,200
إذا أنا تتلاشى بها، ثم أنها سوف تختفي ببطء.

285
00:17:01,200 --> 00:17:04,490
يمكنني أيضا أن تتلاشى في ذلك، وأنه سوف يعود.

286
00:17:04,490 --> 00:17:08,930
يمكنك أيضا القيام تتلاشى ل، التي تقتصر على وظيفة تتلاشى.

287
00:17:08,930 --> 00:17:12,589
هل يمكن أن يكون لتتلاشى أي غموض المحددة التي تريد.

288
00:17:12,589 --> 00:17:16,869
لذلك إذا كنت تتلاشى ببطء إلى 0.5، وأنها سوف تصبح مرئية نصف.

289
00:17:16,869 --> 00:17:22,630
يمكنني جعله يذهب إلى 0.1، والعودة إلى 1 لجعله مرئيا بالكامل مرة أخرى.

290
00:17:22,630 --> 00:17:24,760
هذا مجرد رسوم متحركة أخرى التي يمكنك القيام به.

291
00:17:24,760 --> 00:17:26,750
>> هناك أيضا آثار تبديل.

292
00:17:26,750 --> 00:17:33,410
لذلك أنا ذاهب لتحديد هوية تبديل، والتي تتطابق مع هذا المربع،

293
00:17:33,410 --> 00:17:38,970
وعلى هذا DIV يمكنك استدعاء تبديل، وإذا انها مرئية أنها سوف تصبح غير مرئية،

294
00:17:38,970 --> 00:17:42,320
لو كان غير مرئي وسوف يصبح مرئيا مرة أخرى.

295
00:17:42,320 --> 00:17:44,440
لذلك أنا فقط ودعا هذه وظيفة تبديل مرتين، وكان أول واحد

296
00:17:44,440 --> 00:17:48,380
نفس الشيء مثل إخفاء، كانت المكالمة الثانية نفس الشيء كعرض.

297
00:17:48,380 --> 00:17:53,510
ويمكنك أيضا أن تفعل هذا مع تبديل تتلاشى،

298
00:17:53,510 --> 00:17:55,730
الذي يفعل الشيء نفسه، إلا أنها في الواقع يتلاشى.

299
00:17:55,730 --> 00:17:59,410
والشيء نفسه مع تبديل الشريحة.

300
00:17:59,410 --> 00:18:01,460
هناك آثار بالسلاسل أيضا، وهو ما يعني

301
00:18:01,460 --> 00:18:05,520
إذا قمت بتحديد عنصر ومجرد دعوة مجموعة من أساليب الرسوم المتحركة على ذلك،

302
00:18:05,520 --> 00:18:07,400
إذا أردت أن تتلاشى، ثم تنزلق،

303
00:18:07,400 --> 00:18:11,040
ومن ثم إخفاء ثم تتلاشى في، انها لن تفعل لهم في صف واحد.

304
00:18:11,040 --> 00:18:24,920
اختفى ذلك، عاد - لسبب ما، لم إخفاء لن يحدث.

305
00:18:24,920 --> 00:18:30,030
دعونا نحاول ذلك. نعم، لذلك تلاشى وبعد ذلك انزلق بعيدا.

306
00:18:30,030 --> 00:18:32,230
وهناك الكثير أكثر من ذلك. يمكنك استخدام وظيفة الأرواح

307
00:18:32,230 --> 00:18:35,370
لإنشاء الرسوم المتحركة الخاصة بك، والتي هي معقدة إلى حد ما،

308
00:18:35,370 --> 00:18:38,790
ولكنه يوفر لك مع التمدد لانهائية.

309
00:18:38,790 --> 00:18:40,630
يمكنك جعل أي نوع من الرسوم المتحركة التي تريدها.

310
00:18:40,630 --> 00:18:44,230
يمكنك أيضا استخدام طابور الاصطفاف في طوابير الرسوم المتحركة متعددة في وقت واحد.

311
00:18:44,230 --> 00:18:47,340
لذلك إذا كنت تريد شيئا أن يطير عبر الصفحة،

312
00:18:47,340 --> 00:18:49,860
الشريحة من الناحية اليمنى أعلى إلى أسفل اليسار، يمكنك أن تفعل ذلك،

313
00:18:49,860 --> 00:18:55,240
ويكون مجرد حفنة من الإجراءات تسير واحدا بعد الآخر.

314
00:18:55,240 --> 00:18:57,490
>> والشيء التالي ونحن في طريقنا للحديث عنه هو الأحداث.

315
00:18:57,490 --> 00:19:02,090
الأحداث تسمح لك - حتى الآن، لقد تم للتو كتابة الأشياء في وحدة التحكم

316
00:19:02,090 --> 00:19:04,870
وهذا هو أحد السبل لتحقيق ذلك،

317
00:19:04,870 --> 00:19:08,020
ولكن على صفحة الفعلي، كنت لن تكون قادرة على

318
00:19:08,020 --> 00:19:10,020
جعل الأشياء نوع المستخدم في وحدة التحكم.

319
00:19:10,020 --> 00:19:12,050
تريد أن يحدث شيء تلقائيا.

320
00:19:12,050 --> 00:19:18,060
لذلك، تحتاج إلى استخدام الأحداث التي تنشط على بعض معينة يحدث حدث.

321
00:19:18,060 --> 00:19:21,340
يمكنك التحقق من وثائق للحصول على التفاصيل الكاملة.

322
00:19:21,340 --> 00:19:24,030
لذلك دعونا نرى. نحن نريد لإخفاء أو إظهار مربع،

323
00:19:24,030 --> 00:19:29,340
ولكن الآن هذا الزر لا يفعل أي شيء لأنني لم تنفذ حتى الآن.

324
00:19:29,340 --> 00:19:35,420
انا ذاهب للذهاب إلى صفحة HTML الفعلية.

325
00:19:35,420 --> 00:19:38,560
وهنا الشريحة. هناك شعبة للشريحة.

326
00:19:38,560 --> 00:19:41,230
أنه يحتوي على فئة من الشريحة.

327
00:19:41,230 --> 00:19:46,890
هناك النص. الآن، هناك في هذه الخانة وزر مربع.

328
00:19:46,890 --> 00:19:52,900
كيف كنا في الواقع جعل هذا تختفي؟

329
00:19:52,900 --> 00:19:58,250
بادئ ذي بدء، دعونا كتابة دالة الذي يجعل ID مربع تختفي.

330
00:19:58,250 --> 00:20:01,820
هذا هو بناء الجملة من أجل فونأيشن، دعونا فقط الذي يطلق عليه hideTheBox.

331
00:20:01,820 --> 00:20:06,130
لأنها لا تأخذ أي حجج، لأنه لا توجد حجج الواجب اتخاذها.

332
00:20:06,130 --> 00:20:08,950
يمكننا تحديد رقم مربع.

333
00:20:08,950 --> 00:20:15,020
وذلك باستخدام مسج حدد، يمكننا تحديد رقم مربع،

334
00:20:15,020 --> 00:20:17,700
ثم جعل مجرد أنها تختفي.

335
00:20:17,700 --> 00:20:20,690
دعونا جعلها تتلاشى.

336
00:20:20,690 --> 00:20:27,390
إذا ركضنا هذه الوظيفة في وحدة تحكم الفعلية،

337
00:20:27,390 --> 00:20:33,380
يمكننا تعريف هذه الوظيفة، ونحن يمكن أن نطلق hideTheBox، وأنه يعمل.

338
00:20:33,380 --> 00:20:36,650
لكننا نريد أن يحدث ذلك عند الضغط على زر في الواقع.

339
00:20:36,650 --> 00:20:40,950
للقيام بذلك، لدينا لاستخدام هذا الحدث.

340
00:20:40,950 --> 00:20:45,500
لربط حدث لبعض زر معين أو بعض الإجراءات يحدث،

341
00:20:45,500 --> 00:20:50,040
لدينا لتحديد العنصر أن الحدث سوف يؤدي -

342
00:20:50,040 --> 00:20:52,650
أو التي من شأنها أن تؤدي إلى حدث، آسف.

343
00:20:52,650 --> 00:20:57,220
>> أولا حتى من كل شيء، دعونا حدد زر المربع معرف

344
00:20:57,220 --> 00:20:59,610
لأن هذا هو زر، والآن، لهذا الزر،

345
00:20:59,610 --> 00:21:02,750
نحن نريد لإنشاء الصور المتحركة عندما يتم النقر فوقه.

346
00:21:02,750 --> 00:21:05,040
ولذلك لا يوجد هذا ضغطة وظيفة.

347
00:21:05,040 --> 00:21:08,470
انها تسمح لك لربط وظيفة أخرى لذلك.

348
00:21:08,470 --> 00:21:12,320
هذه الدالة تأخذ دالة أخرى كوسيطة

349
00:21:12,320 --> 00:21:14,310
نحن يمكن أن تمر في وظيفة hideTheBox،

350
00:21:14,310 --> 00:21:20,950
وكلما تم النقر على هذا الزر، وسوف أن وظيفة تنفيذ تلقائيا.

351
00:21:20,950 --> 00:21:24,850
ولذلك فإن هذا سوف تعمل إذا ننقذ هذا، وأنا سوف تحديث،

352
00:21:24,850 --> 00:21:33,460
و- ثانية واحدة، وأنا آسف.

353
00:21:33,460 --> 00:21:44,770
اسمحوا لي أن إصلاح هذه بسرعة حقا.

354
00:21:44,770 --> 00:21:50,680
حسنا. هناك نذهب. وحتى الآن مربع تختفي عندما كنا انقر فوق الزر.

355
00:21:50,680 --> 00:21:55,470
ويمكننا أيضا تغيير هذا إلى fadeToggle فقط،

356
00:21:55,470 --> 00:22:00,020
تغييره فقط لإخفاء أو إظهار مربع،

357
00:22:00,020 --> 00:22:03,850
وهذا من شأنه أيضا العمل أيضا، إذا كنا تحديث.

358
00:22:03,850 --> 00:22:08,550
يمكننا اخفاء ذلك، يمكننا أيضا أن تظهر عليه، والتي سوف تستمر في العمل.

359
00:22:08,550 --> 00:22:12,210
شيء آخر يمكننا القيام به هو، ونحن لم يكن لديك فعلا لتعريف هذه الدالة hideTheBox

360
00:22:12,210 --> 00:22:15,050
قبل أن استدعاء الدالة نقرة.

361
00:22:15,050 --> 00:22:17,640
وذلك بدلا من تحديد وظيفة والدعوة hideTheBox،

362
00:22:17,640 --> 00:22:20,310
ونحن في طريقنا فقط أن نسميها إذا تم النقر فوق هذا الشيء.

363
00:22:20,310 --> 00:22:22,310
حتى نتمكن من تحديد ذلك بشكل مجهول من هنا،

364
00:22:22,310 --> 00:22:25,070
وهي الميزة التي سكريبت لديه.

365
00:22:25,070 --> 00:22:29,720
يمكنك تعريف وظيفة؛ عادة، لقلنا وظيفة hideTheBox

366
00:22:29,720 --> 00:22:34,490
مع الحجج، ولكن بدلا من ذلك، يمكننا أن نقول فقط تعمل بدون وسائط،

367
00:22:34,490 --> 00:22:36,870
بدء متعرج لتحديد وظيفة،

368
00:22:36,870 --> 00:22:40,780
إغلاق هذا متعرج، ومن ثم تحديد وظيفة فقط في هنا،

369
00:22:40,780 --> 00:22:45,130
ضمن قوسين الأول وقوس مشاركة

370
00:22:45,130 --> 00:22:47,860
التي تتوافق مع الحجج وظيفة اضغط هنا.

371
00:22:47,860 --> 00:22:53,320
لذلك نحن يمر في هذه الوظيفة، ونحن يمكن نسخ هذا السطر من التعليمات البرمجية هنا،

372
00:22:53,320 --> 00:22:55,450
والتي من شأنها أن تفعل الشيء نفسه بالضبط.

373
00:22:55,450 --> 00:22:57,290
والآن ليس لدينا هذه الوظيفة fadeTheBox عشوائية

374
00:22:57,290 --> 00:22:59,960
التي يجلس حولها دون سبب واضح.

375
00:22:59,960 --> 00:23:02,070
كانت دالة معرفة مجهول، فإنه لا يكون له اسم.

376
00:23:02,070 --> 00:23:08,060
فإنه سيتم تنفيذ فقط عندما نضغط على زر مربع.

377
00:23:08,060 --> 00:23:12,180
منعش لذلك مرة أخرى، واحد مزيد من الوقت، ويمكنك أن ترى أنه لا يزال يعمل.

378
00:23:12,180 --> 00:23:16,700
وهذه هي الطريقة التي خلق الأحداث.

379
00:23:16,700 --> 00:23:19,190
>> هناك الكثير من الأحداث المختلفة التي يمكننا استخدامها.

380
00:23:19,190 --> 00:23:23,540
انا ذاهب للتبديل مرة أخرى إلى استخدام وحدة التحكم لتظهر لك فقط كيف يمكن لهذه العمل.

381
00:23:23,540 --> 00:23:28,210
معرفات لكل من هذه تتوافق مع كل مربع.

382
00:23:28,210 --> 00:23:33,020
لذلك هذا المربع هو فوق معرف، هذا هو واحد ID مفتاح، وهذا هو واحد ID الماوس.

383
00:23:33,020 --> 00:23:36,120
أكثر شيء واحد هو أن هناك وظيفة هذا العمل؛ بدلا من كتابتها في كل مرة،

384
00:23:36,120 --> 00:23:41,610
أنا فعلا ذهبت إلى الأمام وتعريف هذه الدالة عمل هنا.

385
00:23:41,610 --> 00:23:46,860
وهو يفعل نفس الشيء مثل وظيفة hideTheBox.

386
00:23:46,860 --> 00:23:51,340
فإنه يحصل في هذه الخانة وإما يتلاشى بها أو يتلاشى فيه.

387
00:23:51,340 --> 00:23:54,110
وهذا هو السبب في أننا قادرون على استخدامها هنا.

388
00:23:54,110 --> 00:24:00,350
لذلك إذا وانقر على هذا فوق معرف، ونحن نريد أن نجعل مربع تختفي أو ظهور مرة أخرى.

389
00:24:00,350 --> 00:24:03,610
انها نفس الشيء مثل الزر الذي كان لدينا في الشريحة الأخيرة.

390
00:24:03,610 --> 00:24:07,450
الآن بعد أن نسميه، ونحن يمكن الضغط على هذا وسوف تختفي مربع،

391
00:24:07,450 --> 00:24:10,160
ثم اضغط عليه مرة أخرى وسوف تعود الى الظهور مربع.

392
00:24:10,160 --> 00:24:12,480
هذا هو بسيط جدا. انقر مرتين يفعل الشيء نفسه،

393
00:24:12,480 --> 00:24:15,660
إلا أنه يتطلب النقر المزدوج.

394
00:24:15,660 --> 00:24:19,030
لذلك إذا كنت اضغط عليه مرة واحدة واضغط عليها مرة أخرى لن يحدث شيء،

395
00:24:19,030 --> 00:24:21,140
ولكن إذا كنت انقر مرتين بسرعة، وأنها سوف تختفي.

396
00:24:21,140 --> 00:24:23,310
إذا كنت انقر نقرا مزدوجا مرة أخرى، وسوف يعود.

397
00:24:23,310 --> 00:24:25,250
لذلك هذا هو بسيط جدا.

398
00:24:25,250 --> 00:24:31,170
مدخلات لوحة المفاتيح هو نوع غريب، وأنا لا أعتقد أنه يعمل فعلا في هذا المثال

399
00:24:31,170 --> 00:24:37,670
لأن مفتاح أسفل أو لأعلى مفتاح واضغط على مفتاح والإجراءات الرئيسية الأخرى

400
00:24:37,670 --> 00:24:47,190
تنشيط لا يهم ما العنصر الذي ربطه.

401
00:24:47,190 --> 00:24:51,410
على سبيل المثال، حتى لو كنت ملزمة مفتاح وصولا الى الجسم أو أي شيء آخر تماما،

402
00:24:51,410 --> 00:24:55,950
ثم فإنه لا يزال تنشيط بغض النظر - انها ليست محددة.

403
00:24:55,950 --> 00:25:00,190
أنا لا يجب أن النقر على هذا والضغط على المفتاح لجعل أي شيء تختفي.

404
00:25:00,190 --> 00:25:04,470
سيتم تفعيلها بغض النظر عما عنصر أنا فيه حاليا.

405
00:25:04,470 --> 00:25:06,880
وبالتالي فإن هذه لا تعمل فعلا في هذا المثال

406
00:25:06,880 --> 00:25:13,180
لأنها لا تعرفني كما يدخل مدخلات لوحة المفاتيح مدخلات شعبة.

407
00:25:13,180 --> 00:25:15,740
>> ولكن إذا نظرتم إلى إجراءات الماوس،

408
00:25:15,740 --> 00:25:19,620
أول واحد هو تحوم، وأنه يمكن القيام ببعض من هذه باستخدام CSS.

409
00:25:19,620 --> 00:25:24,280
إذا كنت تستخدم CSS، يمكنك إنشاء بحيث إذا كنت تحوم فوق شيء،

410
00:25:24,280 --> 00:25:28,940
ثم التغييرات اسلوبه.

411
00:25:28,940 --> 00:25:32,170
ولكن باستخدام مسج يمكنك تغيير أنماط من الأشياء الأخرى أيضا.

412
00:25:32,170 --> 00:25:37,120
لذلك، على سبيل المثال، ونحن في طريقنا إلى استدعاء الإجراء إذا كنا تحوم فوق هذا DIV.

413
00:25:37,120 --> 00:25:39,660
وهذا يعني إذا كنا تحوم فوقه، ثم مربع سوف تختفي.

414
00:25:39,660 --> 00:25:42,430
وإذا انتقلنا بعيدا عن ذلك، سوف مربع تعود الى الظهور.

415
00:25:42,430 --> 00:25:45,090
إذا نحن نسمي هذا وتحوم فوقها، مربع لا تختفي،

416
00:25:45,090 --> 00:25:47,050
وحالما ابتعدنا، لأنه يأتي مرة أخرى.

417
00:25:47,050 --> 00:25:49,750
إذا كنا استدعاء هذه الدالة تحوم على معرف الماوس،

418
00:25:49,750 --> 00:25:54,380
والتي تتطابق مع هذا المربع، ثم إذا كنا تحوم فوق منطقة الجزاء،

419
00:25:54,380 --> 00:26:00,440
ثم مربع سوف تختفي في الواقع - فإنه يجري غير تقليدي الآن، ولكن -

420
00:26:00,440 --> 00:26:06,310
إذا نحن نتحرك بعيدا عن ذلك، وسوف تعود الى الظهور. الحق الآن حان الوراء لسبب ما.

421
00:26:06,310 --> 00:26:12,720
الماوس دخول وظائف تحرك الماوس هي مشابهة الى حد ما، ولكنها مختلفة قليلا.

422
00:26:12,720 --> 00:26:16,470
الماوس دخول ينشط فقط عندما يدخل الفأر مربع، كما هو متوقع.

423
00:26:16,470 --> 00:26:19,210
حتى إذا كنت تنتقل إلى ذلك، فإنه سوف تختفي.

424
00:26:19,210 --> 00:26:23,210
ولكنها لن تعود الى الظهور عند الابتعاد؛ سيكون لديك للتحرك مرة أخرى إلى ذلك من أجل أن أعود.

425
00:26:23,210 --> 00:26:25,590
هناك أيضا وظيفة تحرك الماوس، الذي سيتم تنشيط

426
00:26:25,590 --> 00:26:29,300
كلما كان الماوس حتى الوقت الحاضر في منطقة الجزاء.

427
00:26:29,300 --> 00:26:32,430
لذلك سوف تبقي فقط على الذهاب، ويتلاشى داخل وخارج.

428
00:26:32,430 --> 00:26:35,660
وانها في الواقع قطع الأشجار - يبدو انها مجرد يتلاشى داخل وخارج،

429
00:26:35,660 --> 00:26:39,140
ولكنها في الواقع تسجيل الكثير من الإجراءات من هذا،

430
00:26:39,140 --> 00:26:43,550
لذلك عند الابتعاد أنها سوف تبقي مجرد الذهاب لأنه تسجيل مثل آلاف منهم.

431
00:26:43,550 --> 00:26:46,620
ربما ليس من ألف. ربما خمسة.

432
00:26:46,620 --> 00:26:50,200
ذلك بتسجيل أكثر من ذلك.

433
00:26:50,200 --> 00:26:53,280
وهذه النقطة هي، كافة الإجراءات الماوس، وهناك الكثير منهم.

434
00:26:53,280 --> 00:26:55,480
يمكنك أن تقرأ حتى على بعضها الآخر، ولكنها جميعا مختلفة بعض الشيء،

435
00:26:55,480 --> 00:26:57,700
ويمكنك اختيار أي واحد التي تحتاج إليها

436
00:26:57,700 --> 00:27:02,130
لأيهما محددة الغرض كنت تحاول القيام به.

437
00:27:02,130 --> 00:27:05,060
>> والشيء التالي وأنا بصدد الحديث عنه هو AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX، وأنا أعلم أننا لا تغطي الجافا سكربت في قدر عمق هذا العام،

439
00:27:09,340 --> 00:27:11,770
لذلك أنا ذاهب لمجرد الحديث عن AJAX بشكل عام لمدة دقيقة.

440
00:27:11,770 --> 00:27:15,210
AJAX لتقف على جافا سكريبت غير المتزامنة و XML.

441
00:27:15,210 --> 00:27:19,030
انها في الاساس، على سبيل المثال، عندما كنت في الفيسبوك وأنه يدفع لك والإعلام،

442
00:27:19,030 --> 00:27:23,060
ذلك لأن AJAX يعمل على متصفح الويب الخاص بك.

443
00:27:23,060 --> 00:27:25,800
كل بضع ثوان متصفح الويب الخاص بك في الواقع

444
00:27:25,800 --> 00:27:29,420
الذهاب إلى خوادم الفيسبوك، ويطلب منهم، هل لديك أي شيء جديد بالنسبة لي،

445
00:27:29,420 --> 00:27:31,980
وبعد ذلك يعود لك.

446
00:27:31,980 --> 00:27:36,320
هذا يسمح لك لإرسال الطلبات إلى الخادم

447
00:27:36,320 --> 00:27:38,660
دون الحاجة فعلا لتحميل الصفحة.

448
00:27:38,660 --> 00:27:42,040
في العادة لذلك، إذا كنت فقط باستخدام PHP وقاعدة بيانات،

449
00:27:42,040 --> 00:27:45,480
لديك لتحديث الصفحة قبل أن تتمكن من الحصول على معلومات جديدة من الخادم.

450
00:27:45,480 --> 00:27:48,770
ولكن باستخدام AJAX، يمكنك سحب لتلك المعلومات الجديدة باستمرار،

451
00:27:48,770 --> 00:27:52,250
أو سحب لأنه عند النقر فوق زر أو أي شيء من هذا القبيل.

452
00:27:52,250 --> 00:27:56,140
ولذلك فإن هذا يسمح لنا بأن نرسل الطلبات دون إعادة تحميل الصفحة،

453
00:27:56,140 --> 00:27:58,130
ويمكننا استخدام إما GET أو POST طلبات.

454
00:27:58,130 --> 00:28:05,370
>> طلبات GET هي، على سبيل المثال، إذا كنت للGoogle.com

455
00:28:05,370 --> 00:28:10,900
والقيام س = اختبار. وهذا ما منحهم اختبار الاستعلام.

456
00:28:10,900 --> 00:28:15,890
وهذا طلب GET لأنه يمر في تلك المعلمات إلى عنوان URL نفسه.

457
00:28:15,890 --> 00:28:19,250
طلب POST الأمر كما لو كنت ترسل لهم عن طريق آخر.

458
00:28:19,250 --> 00:28:22,500
انها مثل وضعه في رسالة وشحنه قبالة لهم،

459
00:28:22,500 --> 00:28:25,140
لكنها لا ترى في الواقع محتويات. انهم غير مرئية في URL.

460
00:28:25,140 --> 00:28:31,040
لا يمكنك كتابة مباشرة في، لديك لإرساله سرا تقريبا.

461
00:28:31,040 --> 00:28:33,880
انها في وظيفة.

462
00:28:33,880 --> 00:28:38,660
ولكن باستخدام مسج، يمكنك القيام GET و POST طلبات

463
00:28:38,660 --> 00:28:42,740
بسهولة أكبر بكثير مما كنت عادة يمكن باستخدام جافا سكريبت عادي فقط.

464
00:28:42,740 --> 00:28:50,140
يمكنك الاستعلام باستخدام واجهات برمجة التطبيقات طلبات GET، ويمكنك أيضا التحقق من معلومات تسجيل الدخول.

465
00:28:50,140 --> 00:28:54,400
في الصفحة التالية، وأنا خلقت هذا، والذي يسأل: "ما لتناول طعام الغداء؟"

466
00:28:54,400 --> 00:28:58,230
باستخدام الغذاء API هارفارد، لذلك دعونا سحب ما يصل.

467
00:28:58,230 --> 00:29:01,840
هذا هو مجرد مثال على كيفية استخدام مسج للقيام طلب GET إلى API

468
00:29:01,840 --> 00:29:04,200
والحصول على المعلومات مرة أخرى من ذلك.

469
00:29:04,200 --> 00:29:07,090
لذلك نحن نريد أن نرى القائمة لهذا اليوم،

470
00:29:07,090 --> 00:29:10,560
ونحن نريد أن نرى ما هو لتناول طعام الغداء.

471
00:29:10,560 --> 00:29:16,500
وهنا يكمن URL لإنشاء طلب GET في مسج.

472
00:29:16,500 --> 00:29:18,600
يمكنك استخدام $. الحصول على وظيفة.

473
00:29:18,600 --> 00:29:22,290
الوسيطة الأولى هي URL، لذلك بالضبط ما كنت الاستعلام.

474
00:29:22,290 --> 00:29:27,200
ثم الحجة التالية هي وظيفة الذي ينفذ عندما طلب GET كاملة.

475
00:29:27,200 --> 00:29:29,980
لذلك قمت بإرسال قبالة بعض طلب إلى الخادم، انتظر حتى أعود.

476
00:29:29,980 --> 00:29:33,770
عندما لا تأتي مرة أخرى، وأنت تسير إلى اتخاذ بعض الإجراءات مع البيانات التي عاد من الخادم.

477
00:29:33,770 --> 00:29:37,520
دعونا نمضي قدما ورمز هذا كذلك.

478
00:29:37,520 --> 00:29:42,110
لم أكن كود هذه سواء، وعلى الغرض.

479
00:29:42,110 --> 00:29:46,660
وهنا TODO. بادئ ذي بدء، دعونا استخدام الربط حدث

480
00:29:46,660 --> 00:29:50,820
بحيث عند الضغط على هذا الزر، نرسل قبالة طلب GET.

481
00:29:50,820 --> 00:29:53,410
وعندما طلب أن الحصول على عوائد مع بعض البيانات،

482
00:29:53,410 --> 00:29:57,290
ونحن في طريقنا لأنه يكتب في هذه المعلومات وجبة DIV ID.

483
00:29:57,290 --> 00:30:02,860
بادئ ذي بدء، دعونا اختيار الغذاء ID زر.

484
00:30:02,860 --> 00:30:07,320
عندما يتم النقر فوقه، ونحن نريد أن نفعل شيئا.

485
00:30:07,320 --> 00:30:11,930
دعونا جعل مجرد أنها لFUCTION المجهول، كما كان من قبل.

486
00:30:11,930 --> 00:30:15,550
يمكن أن يلتف تلك الأقواس المتعرجة،

487
00:30:15,550 --> 00:30:18,530
وعند الضغط على هذا الزر، ونحن نريد لتقوم بإرسال طلب GET

488
00:30:18,530 --> 00:30:20,750
لفحص ما لتناول طعام الغداء.

489
00:30:20,750 --> 00:30:24,970
للقيام بذلك، ونحن يمكن أن اكتب فقط في $. الحصول عليها.

490
00:30:24,970 --> 00:30:28,850
هذه هي وظيفة مسج، وذلك باستخدام علامة الدولار.

491
00:30:28,850 --> 00:30:31,430
يستغرق بضع حجج. أول واحد هو عنوان URL،

492
00:30:31,430 --> 00:30:34,450
والثانية هي وظيفة رد الاتصال، الدالة التي يطلق

493
00:30:34,450 --> 00:30:37,740
عندما يعود هذا الطلب فعلا.

494
00:30:37,740 --> 00:30:39,890
دعونا فقط بناء URL الأول.

495
00:30:39,890 --> 00:30:44,650
يمكن أن نحصل عليه من API أن داود كتب المباراة.

496
00:30:44,650 --> 00:30:51,360
الذهاب هنا، يمكننا أن نرى أنه من food.cs50.net/api/1.3/menus،

497
00:30:51,360 --> 00:30:54,140
ثم قمت بتمرير فقط في أسماء المعلمات التي ترغب.

498
00:30:54,140 --> 00:30:57,760
حتى المعلمة 1 هو القيمة 1.

499
00:30:57,760 --> 00:31:00,910
يبدو أن التاريخ القياسية، بدء التسجيل، والتخلف إلى اليوم

500
00:31:00,910 --> 00:31:03,110
إذا لم تقم بإدخال أي شيء، وتاريخ انتهاء أيضا الافتراضات

501
00:31:03,910 --> 00:31:05,930
إلى اليوم إذا لم تقم بإدخال أي شيء.

502
00:31:05,930 --> 00:31:10,790
هذا ما نريد. نحن نريد أن مجرد الحصول على المعلومات لهذا اليوم.

503
00:31:10,790 --> 00:31:12,950
>> نحن نريد التنسيق ليكون في JSON.

504
00:31:12,950 --> 00:31:15,570
هذا التعسفية فقط، ويمكنك استخدام أي شكل الذي تريده.

505
00:31:15,570 --> 00:31:18,950
يمكنك استخدام CSV، ولكن JSON هو جافا سكريبت تدوين كائن.

506
00:31:18,950 --> 00:31:24,150
فإنه من السهل جدا لجافا سكريبت لفهم ما يعنيه،

507
00:31:24,150 --> 00:31:27,110
ويمكننا طباعته بسهولة أكثر بهذه الطريقة.

508
00:31:27,110 --> 00:31:30,490
لذلك دعونا تطلب ذلك في JSON، ودعونا طلب الغداء.

509
00:31:30,490 --> 00:31:37,660
حتى وجبة الغداء =. فقط لكتابة هذا العنوان، ونحن نعود هنا.

510
00:31:37,660 --> 00:31:41,290
هناك القوائم. المعلمة الأولى هو الإخراج = JSON

511
00:31:41,290 --> 00:31:44,640
لأن هذا هو ما نريد، ويمكنك فصل المعلمات مع 'و.'

512
00:31:44,640 --> 00:31:48,940
المعلمة الثانية هو - أنا لا أتذكر.

513
00:31:48,940 --> 00:31:52,170
وجبة. ونحن نريد وجبة الغداء =.

514
00:31:52,170 --> 00:31:57,390
يمكنك اختبار هذا URL عن طريق كتابتها في المتصفح والذهاب إليها.

515
00:31:57,390 --> 00:32:03,120
وسوف تعطيك بعض الانتاج. انها مجرد حفنة من الاشياء التي لتناول طعام الغداء.

516
00:32:03,120 --> 00:32:10,410
انها في هذا الشكل القبيح. نحن نريد أن طباعته على صفحتنا في شكل أفضل.

517
00:32:10,410 --> 00:32:12,580
وبالتالي فإن العنوان هو الصحيح، ونحن الآن بحاجة فقط لكتابة وظيفة

518
00:32:12,580 --> 00:32:18,300
للاتصال مرة أخرى عندما طلب الناجحة.

519
00:32:18,300 --> 00:32:20,430
وهذه وظيفة تتخذ في الواقع حجة. وسوف تكون البيانات.

520
00:32:20,430 --> 00:32:25,650
البيانات هو ما يعود من طلب GET بعد الانتهاء من طلب GET.

521
00:32:25,650 --> 00:32:28,860
يمكننا أن نفعل الأقواس المتعرجة؛ في هنا نكتب وظيفة مجهول

522
00:32:28,860 --> 00:32:33,900
الذي ينفذ، وذلك باستخدام تلك البيانات عندما نحصل على المعلومات مرة أخرى.

523
00:32:33,900 --> 00:32:37,840
ذلك البيانات، ونحن عندما كتبته في هذا URL،

524
00:32:37,840 --> 00:32:41,540
هذا هو ما يحدث البيانات لتبدو وكأنها. انها سوف تكون هذه السلسلة ضخمة.

525
00:32:41,540 --> 00:32:48,610
ولكن الشيء الجيد هو، وجافا سكريبت ويمكن تحليل ذلك باستخدام الدالة JSON.parse.

526
00:32:48,610 --> 00:32:54,950
لذلك دعونا إنشاء متغير جديد يسمى تحليل البيانات.

527
00:32:54,950 --> 00:32:57,060
والبيانات هي تحليل مجموعة من الكائنات.

528
00:32:57,060 --> 00:33:04,200
كل كائن يحتوي على معلومات مثل - حسنا، دعونا نلقي نظرة.

529
00:33:04,200 --> 00:33:08,980
أنه يحتوي على تاريخ، وجبة، والفئة، وصفة، كل هذه الأشياء الأخرى.

530
00:33:08,980 --> 00:33:10,860
لذلك دعونا طباعة لتو اسم لكل واحد.

531
00:33:10,860 --> 00:33:13,790
دعونا تكرار عبر مجموعة كاملة من الاشياء التي نحن نعود من ذلك،

532
00:33:13,790 --> 00:33:17,570
وطباعة للتو كل واحد - طباعة اسم كل واحد.

533
00:33:17,570 --> 00:33:22,670
هذا هو لحلقة.

534
00:33:22,670 --> 00:33:26,030
>> جافا سكريبت لديها هذه الجملة مفيدة حيث يمكنك إنشاء متغير وحلقة أكثر من مجموعة،

535
00:33:26,030 --> 00:33:30,150
وفار أنا هو مجرد مكرر، وذلك بدلا من الاضطرار الى القيام فار ط = 0،

536
00:33:30,150 --> 00:33:40,290
كنت أقل من طول، أنا + +، يمكنك أن تفعل فقط فار أنا في بيانات تحليل.

537
00:33:40,290 --> 00:33:47,060
في هذا المثال، سوف البيانات تحليل (ط) تتوافق مع العنصر الحالي

538
00:33:47,060 --> 00:33:49,850
من الصفيف، الكائن الفعلي.

539
00:33:49,850 --> 00:33:51,720
ونحن نريد الحصول على اسم للخروج منه.

540
00:33:51,720 --> 00:33:54,170
لذلك دعونا لا مجرد الاسم.

541
00:33:54,170 --> 00:33:57,000
وآخر شيء هو، ونحن في طريقنا لديك بعض مسج مرة أخرى.

542
00:33:57,000 --> 00:34:02,660
في الواقع إضافته إلى DIV، هذه المعلومات وجبة DIV هذا فارغ حاليا.

543
00:34:02,660 --> 00:34:05,430
لذلك دعونا تحديد ذلك.

544
00:34:05,430 --> 00:34:13,870
سنستخدم مسج وحدد معلومات وجبة ID DIV، أو وجبة معلومات ID، آسف.

545
00:34:13,870 --> 00:34:16,580
نحن نريد أن إلحاق هذا.

546
00:34:16,580 --> 00:34:21,030
إذا فعلنا اختبار، على سبيل المثال، فإنه سيكون مجرد الكتابة فوقه كل مرة واحدة.

547
00:34:21,030 --> 00:34:29,190
حتى نتمكن من إلحاق فقط هذا.

548
00:34:29,190 --> 00:34:31,889
العنصر الحالي في الصفيف، ونحن سوف تحصل على اسم للخروج منه،

549
00:34:31,889 --> 00:34:38,159
وسنقوم إلحاقها إلى نهاية معلومات وجبة DIV ID.

550
00:34:38,159 --> 00:34:40,120
وبعد ذلك فقط لجعلها تبدو أكثر نظافة،

551
00:34:40,120 --> 00:34:51,550
سنقوم أيضا إلحاق فاصل أسطر حتى انها ليست كل على سطر واحد.

552
00:34:51,550 --> 00:34:55,280
لذلك إذا سارت الامور بشكل جيد، وهذا يجب أن تكون جيدة ل-

553
00:34:55,280 --> 00:34:57,220
بادئ ذي بدء، كلما تم النقر على هذا الزر،

554
00:34:57,220 --> 00:35:00,070
انها سترسل قبالة طلب GET إلى هذا العنوان.

555
00:35:00,070 --> 00:35:02,500
عندما يأتي البيانات مرة أخرى من ذلك، فإنه سوف تحليل ذلك،

556
00:35:02,500 --> 00:35:06,950
تحويلها إلى JSON، حلقة على مجموعة كاملة تمثل تلك البيانات،

557
00:35:06,950 --> 00:35:10,310
ومن ثم إلحاق اسم وكسر خط

558
00:35:10,310 --> 00:35:16,500
إلى كل سطر في هذه المعلومات وجبة ID الذي كان فارغا من قبل.

559
00:35:16,500 --> 00:35:18,910
ولذا فإن العودة إلى هذه الصفحة، وسنقوم بتحديث،

560
00:35:18,910 --> 00:35:23,690
انقر فوق ابدأ، معرفة - أنها لا تعمل. وهذا مؤسف.

561
00:35:23,690 --> 00:35:25,830
وهذا هو المكان الذي يأتي التصحيح فيها.

562
00:35:25,830 --> 00:35:30,070
index.html و، السطر 1.

563
00:35:30,070 --> 00:35:57,210
هذا ممتع.

564
00:35:57,210 --> 00:35:59,720
كل الحق، حسنا، بدلا من قضاء الوقت في القيام بذلك، أنا مجرد الذهاب الى

565
00:35:59,720 --> 00:36:07,070
سحب ما يصل الملف فعلت ذلك لدي، والذي هو نسخة الانتهاء.

566
00:36:07,070 --> 00:36:13,710
لست متأكدا ما هو الفرق، ولكننا نستطيع أن مجرد فتح هذا الأمر بدلا من ذلك.

567
00:36:13,710 --> 00:36:19,740
ونذهب إلى AJAX، وهذا يجب أن تعمل بشكل صحيح.

568
00:36:19,740 --> 00:36:21,730
وهذا هو ما كان لتناول طعام الغداء اليوم،

569
00:36:21,730 --> 00:36:24,870
في أي ترتيب معين، مع اقتباسات من حوله، حتى انها ليست أجمل.

570
00:36:24,870 --> 00:36:27,090
ولكن، من الواضح، إذا كنت تفعل هذا لمشروع النهائي،

571
00:36:27,090 --> 00:36:30,120
كنت جعلها تبدو أفضل.

572
00:36:30,120 --> 00:36:32,530
ولكن هذا مجرد مثال بسيط لكيفية القيام بما طلب GET.

573
00:36:32,530 --> 00:36:34,580
وإذا نظرنا إلى رمز الفعلية، وأنا على التخمين، وأنا متأكد من

574
00:36:34,580 --> 00:36:39,690
انها لا تزال الى حد كبير نفس.

575
00:36:39,690 --> 00:37:04,990
أوه، لقد نسيت لتحويلها إلى سلسلة، هذا كل شيء.

576
00:37:04,990 --> 00:37:07,920
لا، انها لا تزال لا تعمل. بغض النظر، وهنا رمز الانتهاء الفعلي

577
00:37:07,920 --> 00:37:10,300
لماذا هذا يجب أن تبدو،

578
00:37:10,300 --> 00:37:16,400
وأنه يفعل الشيء نفسه مثل ما أنا نفذت فقط.

579
00:37:16,400 --> 00:37:22,760
عند النقر على الزر، فإنه يستخدم الحصول على جسون تحليل البيانات تلقائيا.

580
00:37:22,760 --> 00:37:29,190
فإنه يأخذ البيانات مرة أخرى من ذلك وحلقات عبر مجموعة كاملة

581
00:37:29,190 --> 00:37:32,770
ويطبع خارج - كل ما هو لتناول طعام الغداء اليوم، واسم من ذلك،

582
00:37:32,770 --> 00:37:38,020
ويلحق به فاصل أسطر بعد كل سطر.

583
00:37:38,020 --> 00:37:41,100
هذه هي الطريقة التي استخدم الدالة GET.

584
00:37:41,100 --> 00:37:44,040
>> يمكنك أيضا استخدام آخر، والتي لم يكن لدي الوقت

585
00:37:44,040 --> 00:37:47,940
لكتابة مثالا لذلك، ولكن يمكننا أن ننظر في الوثائق.

586
00:37:47,940 --> 00:37:53,220
إذا نظرتم jquery.post،

587
00:37:53,220 --> 00:37:55,510
يمكنك أن ترى أن انها تقريبا نفس الشيء.

588
00:37:55,510 --> 00:38:01,650
لديك URL، لكن بدلا من تمرير المعلمات باستخدام -

589
00:38:01,650 --> 00:38:03,990
مجرد وضعها في سلسلة لURL نفسه،

590
00:38:03,990 --> 00:38:06,300
لديك لتمرير هذا المتغير في البيانات

591
00:38:06,300 --> 00:38:11,990
التي هي في الأساس مجموعة، القاموس الذي يعين المعلمات إلى القيم.

592
00:38:11,990 --> 00:38:17,690
يمكنك تمرير أنه في، والتي ترسل لهم في استخدام POST.

593
00:38:17,690 --> 00:38:20,790
وبمجرد الانتهاء من ذلك، ثم هل يمكن أن يكون وظيفة النجاح

594
00:38:20,790 --> 00:38:23,930
الذي ينفذ عندما يأتي البيانات مرة أخرى.

595
00:38:23,930 --> 00:38:26,430
خلاف ذلك، انها نفس بالضبط. وذلك باستخدام POST،

596
00:38:26,430 --> 00:38:29,970
قد ترغب في استخدام POST، على سبيل المثال، إذا كان لديك شكل مدخلات

597
00:38:29,970 --> 00:38:35,780
أن تدع الناس كلمات السر مساهمة في ذلك، وترسل تلك كلمات السر قبالة

598
00:38:35,780 --> 00:38:41,850
لديك النصي الخلفية، للتحقق في قاعدة البيانات سواء كان ذلك العضو هو صحيح أم لا.

599
00:38:41,850 --> 00:38:46,700
يمكنك أن تفعل ذلك باستخدام كل مسج بدلا من الحاجة إلى تحديث الصفحة في كل شيء.

600
00:38:46,700 --> 00:38:52,160
كيف لي ان تنفذ في بلوق التي عرضتها عليكم في وقت سابق.

601
00:38:52,160 --> 00:38:59,530
إذا ذهبنا إلى بوابة النهاية وتسجيل الخروج، تسجيل الخروج،

602
00:38:59,530 --> 00:39:02,600
خروج لا يعمل.

603
00:39:02,600 --> 00:39:13,360
حسنا، اسمحوا لي أن مجرد فتحه في نافذة جديدة.

604
00:39:13,360 --> 00:39:16,580
هنا هناك هو كلمة السر، وكنت ذاهبا لكتابة شيء عشوائي.

605
00:39:16,580 --> 00:39:18,590
أنها لا تعمل، ولكن يمكنك أن ترى أننا لم

606
00:39:18,590 --> 00:39:20,840
فعلا لتحديث الصفحة على الإطلاق.

607
00:39:20,840 --> 00:39:24,610
رمز، إذا كنت تريد أن ننظر في الأمر،

608
00:39:24,610 --> 00:39:37,460
هي كل ما هو متاح هنا.

609
00:39:37,460 --> 00:39:45,680
وبالتالي فإن رمز كتبت العام الماضي في وقت ما.

610
00:39:45,680 --> 00:39:47,790
كما ترون هنا، ونحن بصدد إرسال طلب POST.

611
00:39:47,790 --> 00:39:50,400
لدي ملف يسمى login.php في النهاية الخلفية،

612
00:39:50,400 --> 00:39:53,860
والذي يتحقق إذا كلمة السر هي صالحة.

613
00:39:53,860 --> 00:39:56,000
المعلمات نعبر في هي كلمة السر، التي تم تعيينها إلى

614
00:39:56,000 --> 00:40:00,030
إدخال هذا في مربع الإدخال هذا حاليا.

615
00:40:00,030 --> 00:40:04,110
وعندما يأتي البيانات مرة أخرى، ونحن تحقق.

616
00:40:04,110 --> 00:40:07,680
إذا كانت البيانات غير صحيح، ثم نقول كلمة مرور غير صحيحة، الانزلاق إلى أسفل،

617
00:40:07,680 --> 00:40:09,580
وجعل مجرد أنها تختفي بعد ذلك.

618
00:40:09,580 --> 00:40:12,320
خلاف ذلك، ونحن تحميل صفحة المشرف.

619
00:40:12,320 --> 00:40:15,080
وهذا وقد تم استخدام جميع JSON.

620
00:40:15,080 --> 00:40:18,510
في العديد من هذه الأسطر من التعليمات البرمجية، يمكنك فقط تمرير البيانات إلى النهاية الخلفية،

621
00:40:18,510 --> 00:40:21,020
تحقق ما إذا كان صحيحا، تحقق ما إذا قمت بتسجيل الدخول بشكل صحيح،

622
00:40:21,020 --> 00:40:24,200
وتستجيب في الواقع لذلك، وإعادة توجيه الشخص إلى الصفحة الصحيحة

623
00:40:24,200 --> 00:40:29,760
أو عدم السماح لهم تسجيل الدخول ونقول لهم أن لديهم كلمة مرور غير صحيحة.

624
00:40:29,760 --> 00:40:33,040
لذلك هذا هو مثال على كيف يمكن استخدام وظيفة مسج

625
00:40:33,040 --> 00:40:37,010
لإرسال طلب POST إلى نهاية ظهرك،

626
00:40:37,010 --> 00:40:42,400
التحقق ما إذا كان شخص ما لقد تم تسجيل دخوله بشكل صحيح.

627
00:40:42,400 --> 00:40:44,820
>> كل الحق، لذلك أن جميع الأمثلة كان لي، وجميع الأشياء أردت أن تغطي.

628
00:40:44,820 --> 00:40:47,110
تلك هي الأشياء الرئيسية التي مسج يسمح لك أن تفعل:

629
00:40:47,110 --> 00:40:52,640
حدد العناصر، أو تعديلها، باستخدام DOM التلاعب،

630
00:40:52,640 --> 00:40:56,340
يمكنك إضافة تأثيرات، وتفعيل الأشياء على أحداث معينة،

631
00:40:56,340 --> 00:41:00,430
وأيضا القيام طلبات AJAX بسلاسة وسهولة.

632
00:41:00,430 --> 00:41:02,840
لذلك أشكركم على حضوركم أو مشاهدة،

633
00:41:02,840 --> 00:41:06,230
وإذا كان لديك أي أسئلة، فقط اسمحوا لي أن أعرف. نعم؟

634
00:41:06,230 --> 00:41:12,730
[طالب] الى الوراء عندما كنت أظهر، كان عليك JSON بعد طلب POST في الاقتباس،

635
00:41:12,730 --> 00:41:15,170
وكنت أتساءل فقط ما الذي فعلته.

636
00:41:15,170 --> 00:41:20,070
>> نعم، أرى. وكان السؤال الذي، في المثال أظهر لي فقط،

637
00:41:20,070 --> 00:41:25,790
كان هناك كلمة JSON في علامات الاقتباس حول -

638
00:41:25,790 --> 00:41:31,690
أنا مجرد سحب ما يصل مرة أخرى - حول وظيفة POST.

639
00:41:31,690 --> 00:41:43,320
أنا مجرد سحب ما يصل الى اظهار.

640
00:41:43,320 --> 00:41:46,890
حتى هنا هذا الطلب POST، وهناك هذا JSON في الاقتباس.

641
00:41:46,890 --> 00:41:50,280
التي تعرف فقط ما كنا نتوقع أن يكون الإخراج.

642
00:41:50,280 --> 00:41:54,070
لذلك إذا نحن نمر في JSON كنوع البيانات المتوقعة،

643
00:41:54,070 --> 00:41:56,070
انها ليست شرطا، ولكن إذا نحن نمر في ذلك،

644
00:41:56,070 --> 00:41:58,590
ثم تلقائيا سوف يتم تحليل البيانات كما JSON.

645
00:41:58,590 --> 00:42:00,600
لذلك نحن لم يكن لديك لاستدعاء الدالة تحليل جسون على ذلك،

646
00:42:00,600 --> 00:42:02,620
انها سوف يحدث تلقائيا.

647
00:42:02,620 --> 00:42:05,150
وإذا كنت نلقي نظرة على وثائق POST،

648
00:42:05,150 --> 00:42:09,850
هناك هذه البيانات نوع المتغير، ونوع البيانات المتوقع من الخادم.

649
00:42:09,850 --> 00:42:12,660
لأنه تخلف عن تخمين ذكي التي يمكن أن تكون خاطئة،

650
00:42:12,660 --> 00:42:15,520
بحيث يمكنك تركه فارغا، ولكن انها مجرد نوع من البيانات

651
00:42:15,520 --> 00:42:21,680
في الترميز الذي تستخدمه، سواء كان ذلك JSON أو XML أو أي شيء آخر.

652
00:42:21,680 --> 00:42:25,280
>> أي أسئلة أخرى؟

653
00:42:25,280 --> 00:42:27,300
حسنا. إذا كان لديك أي أسئلة أخرى، لا تتردد في الكتابة لي

654
00:42:27,300 --> 00:42:30,830
في vshekhawat@college.harvard.edu،

655
00:42:30,830 --> 00:42:34,860
والشرائح ورمز يجب أن تكون متاحة على شبكة الإنترنت في وقت قريب جدا.

656
00:42:34,860 --> 00:42:42,810
حظا سعيدا مع مشاريع النهائي الخاص بك، ونأمل أن استخدام مسج.

657
00:42:42,810 --> 00:42:46,810
[CS50.TV]