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

2
00:00:04,439 --> 00:00:07,230
داگ لوید: در این ویدئو، ما می خواستیم
به تماس از توجه جداگانه

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
شی و یک شی P بند

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
و در ویدئو من در جاوا اسکریپت، من
به ذکر است که این کنسول است

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
من برای باز کردن است که تا.

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
پس چه برخی از این خواص هستند
که بخشی از یک شیء Document؟

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
با یک ویژگی ID، که معمولا
می آید در دستی در زمینه 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 با یک ID خاص

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
شاید این که همه از پیدا
برچسب ها جسورانه و یا همه از تگ P در

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، آن را
معمولا سرمایه من سرمایه 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
در حال حاضر جاوا اسکریپت jQuery است ندارد.

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
یک div خاص.

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
و به این ترتیب در jQuery، ما شاید می توان گفت
این بیت کمی مختصر تر.

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
>> اما این نوع از مختصر
راه انجام آن با استفاده از jQuery.

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
رنگ خاص
DIV، 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
برای رنگ پس زمینه، و با استفاده از jQuery.

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
>> و شما که من متوجه
این دکمه ها تعریف کرده اند

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
امتحان کنید و این کار را با استفاده از jQuery است.

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
این فقط به همان شیوه است من
این در jQuery را بیان کنند.

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
>> این قرمز است با استفاده از jQuery، درست است؟

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