1
00:00:00,000 --> 00:00:04,439

2
00:00:04,439 --> 00:00:07,230
DOUG لويد: في هذا الفيديو، أردنا
أن أصل الكلمة إلى اهتمام خاص

3
00:00:07,230 --> 00:00:09,110
إلى خاص جدا
عنصر جافا سكريبت

4
00:00:09,110 --> 00:00:11,350
التي قد تجد مفيد
عندما كنت بدأت

5
00:00:11,350 --> 00:00:15,750
للعمل على معالجة صفحات الويب و
تغيير محتوى صفحة الويب الخاصة بك

6
00:00:15,750 --> 00:00:16,460
على الطاير.

7
00:00:16,460 --> 00:00:19,450
وهذا هو مفهوم
طراز كائن المستند.

8
00:00:19,450 --> 00:00:23,030
لذلك كما رأينا في الفيديو لدينا على
جافا سكريبت، الكائنات هي مرنة جدا.

9
00:00:23,030 --> 00:00:24,750
>> وأنها يمكن أن تحتوي على مختلف المجالات.

10
00:00:24,750 --> 00:00:28,075
وعلى الرغم من أننا لم ندخل الكثير من
التفاصيل، تلك الحقول أو الخصائص،

11
00:00:28,075 --> 00:00:30,200
أننا ربما أكثر
استدعاء بشكل مناسب لهم

12
00:00:30,200 --> 00:00:33,915
في سياق كائن، حتى
هذه الخصائص يمكن أن تكون الكائنات الأخرى.

13
00:00:33,915 --> 00:00:36,210
وداخل هذه الكائنات
يمكن أن تكون الكائنات الأخرى.

14
00:00:36,210 --> 00:00:39,630
>> لديك هذا الكائن كبير جدا
مع الكثير من الأشياء الأخرى

15
00:00:39,630 --> 00:00:43,550
داخل منه، الذي نوع من
يخلق هذه الفكرة من شجرة كبيرة.

16
00:00:43,550 --> 00:00:47,540
الآن، كائن المستند هو
كائن خاص جدا في جافا سكريبت

17
00:00:47,540 --> 00:00:52,580
الذي ينظم كامل الويب الخاص بك
الصفحة تحت هذا النوع من مظلة

18
00:00:52,580 --> 00:00:53,470
كائن.

19
00:00:53,470 --> 00:00:56,770
وحتى داخل الوثيقة
الكائن كائنات عرض

20
00:00:56,770 --> 00:00:59,630
الرأس والجسم من صفحة الويب الخاصة بك.

21
00:00:59,630 --> 00:01:03,760
>> داخل تلك هي الأخرى
الأشياء، وهلم جرا، وهلم جرا،

22
00:01:03,760 --> 00:01:08,411
حتى صفحة الويب الخاصة بك بأكملها
نظمت في هذا الكائن كبير.

23
00:01:08,411 --> 00:01:09,660
ما هو الاتجاه الصعودي هنا، أليس كذلك؟

24
00:01:09,660 --> 00:01:12,170
حسنا، نحن نعرف كيفية العمل
مع الكائنات في جافا سكريبت.

25
00:01:12,170 --> 00:01:15,840
>> حتى إذا كان لدينا كائن
يشير إلى صفحة على شبكة الإنترنت بأكملها، أن

26
00:01:15,840 --> 00:01:19,590
يعني عن طريق استدعاء صحيحة
طرق لمعالجة هذا الكائن

27
00:01:19,590 --> 00:01:22,360
أو تعديل بعض
من خصائصه، ونحن

28
00:01:22,360 --> 00:01:25,500
يمكن تغيير عناصر
صفحتنا برمجيا

29
00:01:25,500 --> 00:01:30,210
باستخدام جافا سكريبت بدلا من الاضطرار
إلى رمز الأمور، ويقول، HTML.

30
00:01:30,210 --> 00:01:33,760
حتى هنا مثالا ل
بسيطة جدا صفحة على شبكة الإنترنت، أليس كذلك؟

31
00:01:33,760 --> 00:01:35,850
انها حصلت على علامات HTML، رأس.

32
00:01:35,850 --> 00:01:37,979
>> داخل هناك عنوان، مرحبا العالم.

33
00:01:37,979 --> 00:01:38,770
ثم لدي الجسم.

34
00:01:38,770 --> 00:01:40,686
داخل ذلك، ولدي
ثلاثة أشياء مختلفة.

35
00:01:40,686 --> 00:01:44,170
لدي علامة رأس H2،
فقرة، وارتباط.

36
00:01:44,170 --> 00:01:45,920
هذه هي صفحة ويب بسيطة جدا.

37
00:01:45,920 --> 00:01:48,590
>> حسنا، ما قد الوثيقة
الاعتراض لهذا تبدو؟

38
00:01:48,590 --> 00:01:50,700
حسنا، انها قليلا
مخيف ربما في البداية.

39
00:01:50,700 --> 00:01:52,510
لكنها في الحقيقة مجرد شجرة كبيرة.

40
00:01:52,510 --> 00:01:54,890
وعلى الجذر ذاته هو وثيقة.

41
00:01:54,890 --> 00:02:00,030
>> داخل الوثيقة أخرى
الكائن في اشارة الى HTML من الصفحة الخاصة بي.

42
00:02:00,030 --> 00:02:02,660
وHTML صفحتي هي كل هذا.

43
00:02:02,660 --> 00:02:06,900
ثم داخل HTML
وجوه، ولدي الكائن الرأس،

44
00:02:06,900 --> 00:02:09,000
الذي يشير إلى كل شيء هناك.

45
00:02:09,000 --> 00:02:11,009
>> وداخل هناك،
لدي كائن العنوان.

46
00:02:11,009 --> 00:02:15,620
وداخل هناك، ولدي آخر
يعترض هذا مجرد مرحبا العالم.

47
00:02:15,620 --> 00:02:18,020
أنا يمكن أن يكون جسدي
ممثلة من هذا القبيل.

48
00:02:18,020 --> 00:02:22,850
>> داخل جسدي، لدي H2
وجوه وجوه ص للفقرة

49
00:02:22,850 --> 00:02:25,270
وكائن لارتباط.

50
00:02:25,270 --> 00:02:29,660
وحتى هذا التسلسل الهرمي بأكمله
يمكن أن تكون ممثلة مثل شجرة كبيرة

51
00:02:29,660 --> 00:02:31,990
مع الكثير من القليل أصغر
الأشياء التي تخرج منه.

52
00:02:31,990 --> 00:02:33,740
الآن، بالطبع، عندما
نحن البرمجة، ونحن

53
00:02:33,740 --> 00:02:35,560
لا أفكر في أشياء مثل شجرة كبيرة.

54
00:02:35,560 --> 00:02:37,980
نريد أن نرى الفعلية
كود الأمور ذات الصلة.

55
00:02:37,980 --> 00:02:40,790
>> ولحسن الحظ، ما في وسعنا
استخدام أدوات المطورين لدينا

56
00:02:40,790 --> 00:02:46,080
أن تأخذ في الواقع نظرة على
هذا الموقع لكائن المستند.

57
00:02:46,080 --> 00:02:48,150
ودعونا نفعل ذلك.

58
00:02:48,150 --> 00:02:49,580
حتى لقد فتحت علامة تبويب المتصفح.

59
00:02:49,580 --> 00:02:51,540
>> ولقد فتحت أدوات المطور.

60
00:02:51,540 --> 00:02:54,460
وفي الفيديو الخاص بي على جافا سكريبت، I
ذكر أن وحدة ليست

61
00:02:54,460 --> 00:02:56,770
مكان إلا إذا
نحن طباعة المعلومات،

62
00:02:56,770 --> 00:02:59,560
كما انها مكان
نستطيع إدخال المعلومات.

63
00:02:59,560 --> 00:03:01,380
في هذا السياق، ما
انا ذاهب الى قوله هو

64
00:03:01,380 --> 00:03:05,720
وأود أن نعود
الكائنات وثيقة،

65
00:03:05,720 --> 00:03:07,502
حتى أتمكن من البدء في إلقاء نظرة على ذلك.

66
00:03:07,502 --> 00:03:08,460
فكيف يمكن أن أفعل هذا؟

67
00:03:08,460 --> 00:03:10,740
حسنا، إذا كنت تريد
تنظيمها بشكل جيد حقا،

68
00:03:10,740 --> 00:03:16,317
انا ذاهب الى القول console.dir، D-I-R.
الآن، وأنا استخدم console.log لطباعة عادلة

69
00:03:16,317 --> 00:03:17,400
شيء بسيط جدا.

70
00:03:17,400 --> 00:03:20,450
ولكن إذا كنت ترغب في تنظيم هذا
هرمي مثل كائن،

71
00:03:20,450 --> 00:03:23,800
أريد أن نوعا من التنظيم
مثل بنية دليل.

72
00:03:23,800 --> 00:03:27,400
>> لذلك أريد أن console.dir الوثيقة.

73
00:03:27,400 --> 00:03:28,430
انا ذاهب الى هاهنا.

74
00:03:28,430 --> 00:03:32,350
والحق تحتها الآن،
وسوف تكبير هنا،

75
00:03:32,350 --> 00:03:36,000
لقد حصلت على هذه الوثيقة استجابة
مع السهم الصغير المجاور له.

76
00:03:36,000 --> 00:03:39,470
الآن، عندما أفتح هذا السهم،
هناك سيكون الكثير من الاشياء.

77
00:03:39,470 --> 00:03:42,560
>> ولكن ونحن في طريقنا إلى تجاهل الكثير
منه، ونوع عادل التركيز

78
00:03:42,560 --> 00:03:46,250
على الجزء الأكثر أهمية، لذلك نحن
يمكن البدء في التنقل هذه الوثيقة.

79
00:03:46,250 --> 00:03:50,125
هناك الكثير لDOM من
العقد والعقد التابعة فقط الأم.

80
00:03:50,125 --> 00:03:51,500
هناك الكثير من الاشياء التبعية.

81
00:03:51,500 --> 00:03:52,280
>> لذلك أنا ذاهب لفتح هذا الأمر.

82
00:03:52,280 --> 00:03:54,610
وهناك الكثير كله
من الاشياء التي دفعها.

83
00:03:54,610 --> 00:03:59,000
ولكن كل ما يهمني هو
هنا، العقد التابعة.

84
00:03:59,000 --> 00:04:00,410
دعونا فتح ان ما يصل.

85
00:04:00,410 --> 00:04:03,810
>> داخل هناك أرى
شيء مألوف، HTML.

86
00:04:03,810 --> 00:04:07,670
حتى داخل ثيقتنا
مستوى واحد لأسفل، HTML.

87
00:04:07,670 --> 00:04:08,550
I فتح أن ما يصل.

88
00:04:08,550 --> 00:04:10,380
ما نحن نتوقع؟

89
00:04:10,380 --> 00:04:13,760
>> إذا كنت تذكر من الرسم البياني لدينا،
ما يجب أن نجد داخل HTML؟

90
00:04:13,760 --> 00:04:17,275
ما عقدتين هي أقل من ذلك في الشجرة؟

91
00:04:17,275 --> 00:04:17,899
هيا نكتشف.

92
00:04:17,899 --> 00:04:18,940
نفتح الباب HTML.

93
00:04:18,940 --> 00:04:22,079
نذهب الى العقد التابعة لها.

94
00:04:22,079 --> 00:04:23,440
>> البوب ​​يمكن فتحها.

95
00:04:23,440 --> 00:04:25,990
هناك الرأس والجسم.

96
00:04:25,990 --> 00:04:28,540
ونحن يمكن أن تفتح الرأس.

97
00:04:28,540 --> 00:04:30,460
الذهاب إلى العقد التابعة لها.

98
00:04:30,460 --> 00:04:31,460
حسنا، هناك على اللقب.

99
00:04:31,460 --> 00:04:33,293
>> ويمكن أن نذهب في و
على هذا المنوال إلى الأبد.

100
00:04:33,293 --> 00:04:34,770
يمكننا أن نفعل هذا مع الجسم كذلك.

101
00:04:34,770 --> 00:04:40,090
ولكن هناك وسيلة بالنسبة لنا أن ننظر إلى
وثيقة تنظيم ككائن كبيرة.

102
00:04:40,090 --> 00:04:42,610
وإذا نظرنا هو كبير
الكائن الذي يتطلع الكثير

103
00:04:42,610 --> 00:04:47,480
مثل الرمز، وهذا يعني أننا يمكن أن تبدأ
على التعامل مع هذا الكائن كبيرة باستخدام

104
00:04:47,480 --> 00:04:51,220
كود لتغيير ما لدينا
الموقع يبدو وكأنه.

105
00:04:51,220 --> 00:04:54,920
>> لذلك هذا هو أداة قوية جدا
لدينا في حوزتنا الآن.

106
00:04:54,920 --> 00:04:57,360
لذلك كما رأينا للتو،
وثيقة الكائن نفسه

107
00:04:57,360 --> 00:05:01,392
وكافة الكائنات داخل منه
لها خصائص وأساليب، فقط

108
00:05:01,392 --> 00:05:04,100
مثل أي كائن آخر أن لدينا
تم العمل مع في جافا سكريبت.

109
00:05:04,100 --> 00:05:08,370
ولكن يمكننا استخدام هذه الخصائص و
استخدام تلك الأساليب لحفر نوع من أسفل

110
00:05:08,370 --> 00:05:10,900
من وثيقة كبيرة والحصول على
أقل وأقل وأقل،

111
00:05:10,900 --> 00:05:13,360
أدق وأدق الحبوب
من التفصيل، حتى نحن

112
00:05:13,360 --> 00:05:17,510
الحصول على قطعة محددة جدا لدينا
صفحة الويب التي نريد تغيير.

113
00:05:17,510 --> 00:05:22,700
>> وعندما نقوم بتحديث خصائص
توثيق كائن أو استدعاء تلك الأساليب،

114
00:05:22,700 --> 00:05:24,450
أشياء قد تحدث على صفحة الويب لدينا.

115
00:05:24,450 --> 00:05:28,420
ونحن لسنا في حاجة للقيام بأي منعش
أن تكون تلك التغييرات نافذة المفعول.

116
00:05:28,420 --> 00:05:33,160
>> وهذا هو القدرة باردة جدا ل
لديك عندما كنا نعمل مع رمز.

117
00:05:33,160 --> 00:05:37,185
فما هي بعض من هذه الخصائص
التي هي جزء من كائن مستند؟

118
00:05:37,185 --> 00:05:40,100
حسنا، ربما كنت رأيت
اثنين منهم بسرعة حقا

119
00:05:40,100 --> 00:05:42,700
كما كنا فتح سوستة
من خلال وثيقة العملاقة

120
00:05:42,700 --> 00:05:45,150
كائن رأينا فقط في متصفح الويب.

121
00:05:45,150 --> 00:05:48,420
>> ولكن اثنين من هذه الخصائص
قد تكون أشياء مثل HTML الداخلية.

122
00:05:48,420 --> 00:05:52,950
وربما كنت أذكر لي
استخدام هذا في شريط الفيديو جافا سكريبت

123
00:05:52,950 --> 00:05:54,950
في النهاية عندما كنت
كان يتحدث عن الأحداث.

124
00:05:54,950 --> 00:05:56,125
ما كان هذا HTML الداخلية؟

125
00:05:56,125 --> 00:05:59,030
حسنا، انها مجرد ما
في بين العلامات.

126
00:05:59,030 --> 00:06:01,590
>> وهكذا HTML الداخلية،
على سبيل المثال، عن لقبه

127
00:06:01,590 --> 00:06:05,390
العلامة، إذا كنا قد أبقى تسير في
هذا المثال قبل لحظة،

128
00:06:05,390 --> 00:06:08,020
كان يمكن أن يكون مرحبا العالم.

129
00:06:08,020 --> 00:06:10,140
كان ذلك عنوان صفحتنا.

130
00:06:10,140 --> 00:06:12,370
خصائص أخرى
تشمل اسم العقدة، التي

131
00:06:12,370 --> 00:06:15,810
هو اسم لHTML
عنصر مثل العنوان.

132
00:06:15,810 --> 00:06:19,100
ID، وهو ID
السمة عنصر HTML.

133
00:06:19,100 --> 00:06:23,790
>> أذكر أننا يمكن أن تشير إلى خصيصا
عناصر محددة لدينا HTML

134
00:06:23,790 --> 00:06:27,510
مع سمة الهوية، والتي عادة ما
تأتي في متناول اليدين في سياق CSS،

135
00:06:27,510 --> 00:06:29,000
على وجه التحديد.

136
00:06:29,000 --> 00:06:33,217
العقدة الأصل، وهو إشارة إلى
ما هو لتو فوقي في DOM.

137
00:06:33,217 --> 00:06:35,800
والعقد التابعة، وهي
إشارة إلى ما هو أسفل تحتي.

138
00:06:35,800 --> 00:06:37,950
ورأينا الكثير من ذلك
مجرد النظر من خلال.

139
00:06:37,950 --> 00:06:42,970
العقد التابعة، وهذا هو كيف وصلنا
أقل وأقل في الشجرة.

140
00:06:42,970 --> 00:06:46,590
>> الصفات، وهذا مجرد مجموعة
من سمات العنصر HTML.

141
00:06:46,590 --> 00:06:50,270
لذلك مثالا من الصفات قد
يكون إذا كان لديك علامة صورة،

142
00:06:50,270 --> 00:06:54,090
أنها عادة ما تكون سمة المصدر،
ربما الطول وسمة العرض.

143
00:06:54,090 --> 00:06:57,120
وذلك من شأنه أن يكون مجرد مجموعة
لجميع الصفات المرتبطة

144
00:06:57,120 --> 00:06:59,300
مع هذا العنصر HTML.

145
00:06:59,300 --> 00:07:04,140
>> الاسلوب هو واحد آخر
لا تمثل CSS

146
00:07:04,140 --> 00:07:06,050
التصميم من عنصر معين.

147
00:07:06,050 --> 00:07:08,310
وفي وقت لاحق في هذا
الفيديو، وسوف نقوم على وجه التحديد

148
00:07:08,310 --> 00:07:14,592
أسلوب ضغط لجعل زوجين
من التغييرات على موقعنا على الانترنت.

149
00:07:14,592 --> 00:07:15,800
حتى تلك هي بعض الخصائص.

150
00:07:15,800 --> 00:07:17,591
>> وهناك أيضا بعض
طرق ما في وسعنا

151
00:07:17,591 --> 00:07:22,450
استخدام إليها أيضا بسرعة أكبر وربما عزل
عناصر من كائن المستند.

152
00:07:22,450 --> 00:07:26,730
ربما، والأكثر تنوعا
هذه كونها getElementById.

153
00:07:26,730 --> 00:07:31,190
لذلك أنا قد تقول شيئا مثل، ل
تذكر انها وسيلة من وثيقة

154
00:07:31,190 --> 00:07:34,880
الاعتراض، document.getElementById.

155
00:07:34,880 --> 00:07:39,820
>> وداخل تلك الأقواس، حدد
عنصر HTML مع معرف خاص

156
00:07:39,820 --> 00:07:42,330
السمة التي قمت سابقا
مجموعة، وسوف أكون على الفور

157
00:07:42,330 --> 00:07:46,685
انتقل الحق في هذا العنصر
الموقع العام.

158
00:07:46,685 --> 00:07:49,310
لذلك أنا لم يكن لديك لحفر ربما
إلى أسفل من خلال كل طبقة واحدة.

159
00:07:49,310 --> 00:07:52,841
يمكنني فقط استخدام هذا الأسلوب للعثور عليه،
نوع من مثل صاروخ الحرارة تسعى،

160
00:07:52,841 --> 00:07:53,340
الصحيح؟

161
00:07:53,340 --> 00:07:56,300
وغني فقط، ويجد
بالضبط ما انها تبحث عنه.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName هو
تشبه الى حد بعيد في الروح.

163
00:07:59,290 --> 00:08:02,500
ربما هذا من شأنه أن تجد كل من
علامات جريئة أو كل علامات ص

164
00:08:02,500 --> 00:08:05,920
وتعطيني مجموعة من كل شيء
هذا وبعد ذلك يمكن التعامل معها.

165
00:08:05,920 --> 00:08:12,080
appendChild يضيف شيئا
مستوى واحد لأسفل في الشجرة.

166
00:08:12,080 --> 00:08:16,440
>> حتى أتمكن من إضافة جديد كامل
عنصر برتبة أدنى.

167
00:08:16,440 --> 00:08:19,700
أو يمكنني إزالة عنصر هذا
مستوى واحد أقل، وكذلك إذا أريد

168
00:08:19,700 --> 00:08:22,870
لحذف شيء من صفحة الويب الخاصة بي.

169
00:08:22,870 --> 00:08:28,480
الآن، ومذكرة الترميز سريعة وسريعة
الصداع الصيفي علما، ونأمل.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- د هو صغيرة.

171
00:08:31,670 --> 00:08:36,950
لا استطيع ان اقول لكم كم مرة لدي
معتادين getElementById ورسملة

172
00:08:36,950 --> 00:08:38,336
د هناك.

173
00:08:38,336 --> 00:08:39,460
لأنه من الشائع حقا.

174
00:08:39,460 --> 00:08:42,990
إذا نكتب ID كلمة، انها
عادة العاصمة I العاصمة D.

175
00:08:42,990 --> 00:08:44,240
وقانون بلدي فقط لا يعمل.

176
00:08:44,240 --> 00:08:45,630
وأنا لا يمكن معرفة السبب.

177
00:08:45,630 --> 00:08:49,490
هذا هو حقا، حقا، حقا
علة المشترك الذي يجعل الجميع،

178
00:08:49,490 --> 00:08:51,890
حتى الخبراء التي لديها
تم القيام بذلك إلى الأبد.

179
00:08:51,890 --> 00:08:55,410
هكذا فقط تكون على علم، getElementById،
أن د هو صغيرة.

180
00:08:55,410 --> 00:09:00,080
ونأمل أن يوفر لك عدة
دقيقة على الأقل من وجع القلب.

181
00:09:00,080 --> 00:09:02,204
>> فماذا يعني كل هذا يقول لنا؟

182
00:09:02,204 --> 00:09:03,120
لدينا هذه الأساليب.

183
00:09:03,120 --> 00:09:04,161
لدينا هذه الخصائص.

184
00:09:04,161 --> 00:09:06,610
الآن، إذا انطلقنا من
الوثيقة، وثيقة.

185
00:09:06,610 --> 00:09:10,220
أيا كان، يمكننا الآن الحصول على أي
قطعة واحدة من صفحة الويب لدينا

186
00:09:10,220 --> 00:09:14,870
أننا نريد أن باستخدام جافا سكريبت
فقط من خلال استدعاء هذه الطرق

187
00:09:14,870 --> 00:09:19,940
والاستفادة من الخصائص
التي نجدها في مختلف المواقع.

188
00:09:19,940 --> 00:09:24,890
>> يمكن الحصول على هذه الالفاظ، هذا
document.getElementByID،

189
00:09:24,890 --> 00:09:28,560
ربما يكون اسم العلامة طويل،
ربما كنت بذل المزيد من المكالمات في وقت لاحق.

190
00:09:28,560 --> 00:09:31,230
أشياء يمكن الحصول على الالفاظ قليلا.

191
00:09:31,230 --> 00:09:34,480
وكما المبرمجين، وكنت قد
ربما ينظر في العديد من أشرطة الفيديو هذه،

192
00:09:34,480 --> 00:09:36,600
نحن لا نحب الأشياء الالفاظ.

193
00:09:36,600 --> 00:09:38,520
>> نود أن تكون قادرة على القيام الامور بسرعة.

194
00:09:38,520 --> 00:09:42,640
لذلك نود أكثر
طريقة مختصرة ليقول شيئا.

195
00:09:42,640 --> 00:09:46,270
لذلك هذا النوع من شأنه أن يؤدي إلى
فكرة من شيء يسمى مسج.

196
00:09:46,270 --> 00:09:49,170
الآن مسج ليس جافا سكريبت.

197
00:09:49,170 --> 00:09:50,350
انها ليست جزءا من جافا سكريبت.

198
00:09:50,350 --> 00:09:54,790
>> هو المكتبة التي كانت مكتوبة
من قبل بعض المبرمجين جافا سكريبت

199
00:09:54,790 --> 00:09:57,060
قبل نحو 10 عاما.

200
00:09:57,060 --> 00:10:01,300
وهدفها هو تبسيط هذا ما
دعا العميل البرمجة الجانب، والتي

201
00:10:01,300 --> 00:10:04,310
هو أساسا ما كنا فقط
يتحدثون عن التلاعب DOM.

202
00:10:04,310 --> 00:10:11,090
وهكذا إذا أردت أن تعديل
لون خلفية الصفحة الويب الخاص بي، ربما

203
00:10:11,090 --> 00:10:11,980
لشعبة محددة.

204
00:10:11,980 --> 00:10:15,325
>> هنا، وأنا على ما يبدو الحصول على
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
وأريد أن أضع لون خلفيتها.

206
00:10:16,950 --> 00:10:20,720
إذا أنا فقط باستخدام نقية جافا سكريبت
باستخدام نموذج كائن المستند

207
00:10:20,720 --> 00:10:23,990
كما أن هناك العديد من الأشياء، أليس كذلك؟
document.getElementByID

208
00:10:23,990 --> 00:10:25,531
colorDiv.style.backgroundColor = الأخضر.

209
00:10:25,531 --> 00:10:27,260

210
00:10:27,260 --> 00:10:28,050
>> يا للعجب.

211
00:10:28,050 --> 00:10:30,110
كان ذلك الكثير ليقوله.

212
00:10:30,110 --> 00:10:31,720
انها الكثير لكتابة أيضا.

213
00:10:31,720 --> 00:10:35,760
وحتى في مسج، يمكننا أن نقول ربما
هذا قليلا أكثر دقة.

214
00:10:35,760 --> 00:10:39,350
مقايضة كونها قد حان ربما قليلا
أكثر قليلا خفي مفاجئة للجميع،

215
00:10:39,350 --> 00:10:39,850
الصحيح؟

216
00:10:39,850 --> 00:10:43,580
>> على الأقل لفترة طويلة هو أكثر قليلا
التفسيرية على ما نقوم به.

217
00:10:43,580 --> 00:10:49,947
هذه علامة الدولار، بين قوسين،
اقتباس واحد، تجزئة، colorDiv، أليس كذلك؟

218
00:10:49,947 --> 00:10:50,780
ماذا يعني ذلك؟

219
00:10:50,780 --> 00:10:53,640
حسنا، هذا الأساس فقط
document.getElementByID colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> ولكن من هذا النوع من الاختزال
طريقة لفعل ذلك باستخدام مسج.

221
00:10:58,700 --> 00:11:01,380
دعونا فقط نلقي نظرة الآن
في عدة طرق مختلفة

222
00:11:01,380 --> 00:11:04,520
أنني قد فعلا
استخدام هذا كائن المستند

223
00:11:04,520 --> 00:11:06,807
نموذج للتلاعب قطعة من موقعي.

224
00:11:06,807 --> 00:11:09,140
على وجه الخصوص، ونحن في طريقنا
أن تعمل على التلاعب

225
00:11:09,140 --> 00:11:14,090
لون معين
شعبة، colorDiv، على صفحة ويب.

226
00:11:14,090 --> 00:11:15,299
لذلك دعونا نلقي نظرة على ذلك.

227
00:11:15,299 --> 00:11:15,798
حسنا.

228
00:11:15,798 --> 00:11:16,700
لذلك أنا على صفحة.

229
00:11:16,700 --> 00:11:20,750
انه دعا test.html عند تحميل
هذا إذا كنت تريد العبث مع هذا.

230
00:11:20,750 --> 00:11:24,730
ولقد حصلت على حفنة من
الأزرار الموجودة على هذه الصفحة.

231
00:11:24,730 --> 00:11:27,730
وأنا أقول الوظائف الفردية
للون الخلفية، الأرجواني، الأخضر،

232
00:11:27,730 --> 00:11:31,330
البرتقالي والأحمر والأزرق، وظيفة واحدة
للون الخلفية، معالج الحدث

233
00:11:31,330 --> 00:11:34,360
للون الخلفية، واستخدام مسج.

234
00:11:34,360 --> 00:11:38,147
ما أتحدث عنه
عندما أفعل هذا؟

235
00:11:38,147 --> 00:11:39,230
لذلك رأيناه الأزرار.

236
00:11:39,230 --> 00:11:41,521
الآن، دعونا نلقي نظرة على
بعض من شفرة المصدر هنا.

237
00:11:41,521 --> 00:11:44,770
سنبدأ مع test.html.

238
00:11:44,770 --> 00:11:48,100
وظائف فردية جدا لخلفية
اللون هو ما كنت كتبته هنا.

239
00:11:48,100 --> 00:11:49,350
اسمحوا لي أن انتقل قليلا.

240
00:11:49,350 --> 00:11:56,170

241
00:11:56,170 --> 00:11:58,820
>> وستلاحظ أن I
حددت هذه الأزرار

242
00:11:58,820 --> 00:12:03,990
القول عند النقر على هذا الزر،
استدعاء الدالة تحويل الأرجواني.

243
00:12:03,990 --> 00:12:06,670
عندما يكون هذا الزر هو النقر، بدلا من ذلك،
استدعاء الدالة يتحول إلى اللون الأخضر،

244
00:12:06,670 --> 00:12:08,710
تحويل البرتقال، بدوره الأحمر، بدوره الزرقاء.

245
00:12:08,710 --> 00:12:11,880
ربما يمكنك تخمين أن هذا
وربما لا يكون أفضل تصميم

246
00:12:11,880 --> 00:12:12,460
بمعنى، أليس كذلك؟

247
00:12:12,460 --> 00:12:16,490
>> سيكون من الجميل لو استطيع
اتباع نهج أكثر عمومية.

248
00:12:16,490 --> 00:12:19,570
حسنا، أولا نحن سوف نلقي نظرة
على ما هي تلك الوظائف الخمس

249
00:12:19,570 --> 00:12:24,400
document.getElementByID
colorDiv.style.background = الأرجواني،

250
00:12:24,400 --> 00:12:27,250
الأخضر والبرتقالي والأحمر،
والأزرق، على التوالي.

251
00:12:27,250 --> 00:12:30,930
لذلك، لا سيما أفضل تصميم.

252
00:12:30,930 --> 00:12:33,390
>> المجموعة التالية من الأزرار
لقد ولقد كتب

253
00:12:33,390 --> 00:12:36,380
وظيفة واحدة تسمى
تغيير اللون الذي يبدو

254
00:12:36,380 --> 00:12:38,960
يقبل سلسلة ك حجتها.

255
00:12:38,960 --> 00:12:40,290
لذلك هذا هو أفضل قليلا.

256
00:12:40,290 --> 00:12:43,840
الأرجواني والأخضر والبرتقالي والأحمر،
الأزرق هو الآن حجة.

257
00:12:43,840 --> 00:12:46,230
حتى لقد كتب أكثر عمومية
حالة جافا سكريبت وظيفة،

258
00:12:46,230 --> 00:12:47,771
والتي قد تبدو شيئا من هذا القبيل.

259
00:12:47,771 --> 00:12:48,680
أنا يمر في.

260
00:12:48,680 --> 00:12:52,090
هذا اللون تغير وظيفة هو
تتوقع حجة يسمى اللون.

261
00:12:52,090 --> 00:12:54,970
وأنا أقول تعيين
لون الخلفية إلى لون.

262
00:12:54,970 --> 00:12:58,390
حتى هنا يمثل ما عندي هنا.

263
00:12:58,390 --> 00:12:59,770
ولهذا أفضل قليلا.

264
00:12:59,770 --> 00:13:02,740
>> ولكني قد تكون قادرة على
نفعل ما هو أفضل من ذلك.

265
00:13:02,740 --> 00:13:06,140
إذا كان لنا أن ننزل إلى إلقاء نظرة
في الوضع معالج الحدث،

266
00:13:06,140 --> 00:13:07,860
الآن كل هذه المكالمات بالطريقة نفسها.

267
00:13:07,860 --> 00:13:10,340
اذا كنت أذكر لدينا
النقاش حول معالجات الأحداث،

268
00:13:10,340 --> 00:13:15,770
يمكنني الحصول على معلومات حول أي من
تم النقر على هذه الأزرار واستخدام ذلك.

269
00:13:15,770 --> 00:13:19,560
>> وذلك في event.JavaScript، لقد
مكتوبة حدث تغيير اللون، والتي

270
00:13:19,560 --> 00:13:21,110
الأرقام إلى الزر الذي تم النقر.

271
00:13:21,110 --> 00:13:23,250
هذا هو خط الكائن الزناد.

272
00:13:23,250 --> 00:13:25,240
ثم هنا، فإنه يحصل على الالفاظ حقا.

273
00:13:25,240 --> 00:13:27,420
ولكن ما أفعله هو أنا
وضع الخلفية

274
00:13:27,420 --> 00:13:30,340
لون triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
هذا النص في
بين العلامات زر.

276
00:13:34,170 --> 00:13:36,500
>> وبعد ذلك على ما يبدو لديها
لتعيينها إلى أحرف صغيرة.

277
00:13:36,500 --> 00:13:40,780
وهذه هي الطريقة التي يمكنني تحويل كامل
سلسلة إلى أحرف صغيرة في جافا سكريبت باستخدام

278
00:13:40,780 --> 00:13:42,940
هذا الأسلوب إلى أحرف صغيرة.

279
00:13:42,940 --> 00:13:46,570
لأنه عندما احدد اللون،
وأنا أحاول القيام به هنا،

280
00:13:46,570 --> 00:13:48,260
اللون يجب أن يكون كل صغيرة.

281
00:13:48,260 --> 00:13:50,920
>> ولكن الزر الذي كان لي،
إذا كان لنا أن نلقي نظرة أخرى،

282
00:13:50,920 --> 00:13:55,890
لاحظ أن النص هناك
مكتوبة مع P رأس المال للالأرجواني.

283
00:13:55,890 --> 00:13:59,140
وبعد ذلك في غاية
أسفل هنا، وأنا على ما يبدو

284
00:13:59,140 --> 00:14:02,630
محاولة القيام بذلك باستخدام مسج كذلك.

285
00:14:02,630 --> 00:14:06,000
وفي هذه الحالة، أنا لست في الواقع
استدعاء دالة على الإطلاق.

286
00:14:06,000 --> 00:14:11,430
لقد قلت فقط الفئة التي أنا
استخدام لهذا الزر هو زر JQ.

287
00:14:11,430 --> 00:14:12,360
هذا كل شيء.

288
00:14:12,360 --> 00:14:14,950
>> فكيف لا مسج أعرف ما أفعله؟

289
00:14:14,950 --> 00:14:18,740
حسنا، هذه هي واحدة من المزايا
خفض عيوب مسج.

290
00:14:18,740 --> 00:14:21,560
يمكن أن اسمحوا لي أن تفعل أشياء
بإيجاز جدا، ولكن ربما لا

291
00:14:21,560 --> 00:14:22,570
كما حدسي.

292
00:14:22,570 --> 00:14:25,570
ربما هؤلاء الثلاثة الأخرى جعل
أكثر قليلا بمعنى ما أفعله.

293
00:14:25,570 --> 00:14:29,010
هنا، على الرغم من ما يحدث؟

294
00:14:29,010 --> 00:14:31,940
>> على ما يبدو، وخلق
وظيفة مجهول

295
00:14:31,940 --> 00:14:36,790
الذي يحمل كلما المستند
جاهز، document.ready ذلك،

296
00:14:36,790 --> 00:14:38,760
بعض من وظيفة ما سيحدث.

297
00:14:38,760 --> 00:14:40,490
في الأساس، وعندما وثيقة جاهزة؟

298
00:14:40,490 --> 00:14:42,310
انها عندما صفحتي وقد حملت.

299
00:14:42,310 --> 00:14:46,540
>> ذلك في أقرب وقت صفحتي تمت تحميل،
التالي ظيفة مستعدة دائما.

300
00:14:46,540 --> 00:14:54,310
وتقول، إذا كائن من نوع jQButton،
أو إذا تم النقر الدرجة jQButton،

301
00:14:54,310 --> 00:14:55,570
تنفيذ هذه المهمة.

302
00:14:55,570 --> 00:14:59,360
حتى هنا وظيفتين مجهولة،
واحدة محددة داخل الآخر.

303
00:14:59,360 --> 00:15:03,930
>> حتى بلدي السياق كامل
هنا حتى الآن هو صفحتي

304
00:15:03,930 --> 00:15:06,520
عند تحميل يدعو هذه الوظيفة.

305
00:15:06,520 --> 00:15:09,740
وهذه وظيفة تنتظر
لزر إلى النقر.

306
00:15:09,740 --> 00:15:14,490
وعند النقر على زر، JQ
زر على وجه التحديد والنقر عليها،

307
00:15:14,490 --> 00:15:17,150
ويدعو هذا البعض
وظيفة، والتي يجري

308
00:15:17,150 --> 00:15:21,250
لضبط الخلفية
لون colorDiv أن يكون

309
00:15:21,250 --> 00:15:25,990
أيا كان النص في بين العلامات.

310
00:15:25,990 --> 00:15:28,050
>> هذا هو مفهوم
الزر الذي تم النقر.

311
00:15:28,050 --> 00:15:31,230
لكن على خلاف ذلك، وهذا هو نوع من
يتصرف على غرار هذا الحدث.

312
00:15:31,230 --> 00:15:34,460
انها مجرد بنفس الطريقة I
أن التعبير عن هذا في مسج.

313
00:15:34,460 --> 00:15:36,790
مرة أخرى، فإنه على الأرجح
الكثير أكثر ترهيبا.

314
00:15:36,790 --> 00:15:40,840
انها ليست واضحة كما
شيء من هذا القبيل event.js،

315
00:15:40,840 --> 00:15:45,080
وهو ربما أكثر قليلا
أقل مطول، ولكن قليلا

316
00:15:45,080 --> 00:15:46,000
تخويفه.

317
00:15:46,000 --> 00:15:51,460
>> ولكن إذا كنا البوب ​​العودة الى متصفحي
نافذة، وإذا كنت بدء clicking-- جيدا،

318
00:15:51,460 --> 00:15:52,690
التي غيرت إلى اللون الأرجواني.

319
00:15:52,690 --> 00:15:54,450
هذا هو الأخضر باستخدام طريقة السلسلة.

320
00:15:54,450 --> 00:15:56,500
هذا هو البرتقال باستخدام معالج الأحداث.

321
00:15:56,500 --> 00:15:58,300
>> وهذا هو الأحمر باستخدام مسج، أليس كذلك؟

322
00:15:58,300 --> 00:16:01,270
أنهم جميعا تتصرف بالضبط نفس الشيء.

323
00:16:01,270 --> 00:16:06,509
يفعلون فقط باستخدام مختلف
نهج لحل المشكلة.

324
00:16:06,509 --> 00:16:08,550
هناك الكثير ل
مسج ثم نحن بالتأكيد

325
00:16:08,550 --> 00:16:10,050
بصدد الحديث عنه في هذا الفيديو.

326
00:16:10,050 --> 00:16:15,410
ولكن إذا كنت ترغب في معرفة المزيد، يمكنك
انتقل إلى نوع مسج من وثائق

327
00:16:15,410 --> 00:16:19,710
وتعلم أكثر قليلا جدا حول
هذه مكتبة مرنة جدا، والتي

328
00:16:19,710 --> 00:16:22,550
عظيم للقيام العميل
البرمجة مثل ما كنا نقوم به

329
00:16:22,550 --> 00:16:26,240
لمعالجة نظرة
ويشعر من صفحة على شبكة الإنترنت

330
00:16:26,240 --> 00:16:28,750
مع طراز كائن المستند.

331
00:16:28,750 --> 00:16:29,650
أنا دوغ ويد.

332
00:16:29,650 --> 00:16:31,930
هذا هو CS50.

333
00:16:31,930 --> 00:16:34,022