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

2
00:00:04,439 --> 00:00:07,230
דאג LLOYD: בסרטון הזה, אנחנו רוצים
לקרוא את תשומת לב נפרדת

3
00:00:07,230 --> 00:00:09,110
למאוד מיוחד
אלמנט של JavaScript

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
אז כפי שראינו בווידאו שלנו ב
JavaScript, אובייקטים הם מאוד גמישים.

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
עכשיו, אובייקט המסמך הוא
אובייקט מאוד מיוחד בJavaScript

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
ובכן, אנחנו יודעים איך לעבוד
עם אובייקטים ב- JavaScript.

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
באמצעות JavaScript במקום
קוד דברים עם, למשל, 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
ובסרטון שלי על JavaScript, אני
ציינו שהקונסולה היא לא

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-אני-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
אני הולך על Enter.

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
כמו כל אובייקט אחר שיש לנו
עובד עם ב- JavaScript.

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
ואולי אפילו זוכרים אותי
באמצעות זה בוידאו JavaScript

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
זיהוי, שהוא מזהה
תכונה של אלמנט 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
אולי זה היה למצוא את כל
תגים מודגשים או כל תגי 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
אם אנחנו כותבים את מילת זיהוי, זה
בדרך כלל אני הון הון ד

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
כי אנחנו רוצים באמצעות JavaScript
רק על ידי קריאה לשיטות אלה

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
אז זה סוג של מוביל ל
רעיון של משהו שנקרא jQuery.

196
00:09:46,270 --> 00:09:49,170
עכשיו jQuery הוא לא JavaScript.

197
00:09:49,170 --> 00:09:50,350
זה לא חלק מJavaScript.

198
00:09:50,350 --> 00:09:54,790
>> זוהי ספרייה שנכתבה
על ידי כמה מתכנתי JavaScript

199
00:09:54,790 --> 00:09:57,060
לפני כ -10 שנים.

200
00:09:57,060 --> 00:10:01,300
ומטרתו לפשט את זה מה
נקרא scripting בצד הלקוח, ש

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
אני אם רק אני משתמש JavaScript הטהור
באמצעות מודל אובייקט המסמך,

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
הצבע של בפרט
דיב, 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
אז אני כבר נכתב כללי יותר
פונקצית JavaScript מקרה,

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
וככה אני יכול להמיר כל
מחרוזת לאותיות קטנה ב- JavaScript באמצעות

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
>> אז איך jQuery יודע מה אני עושה?

289
00:14:14,950 --> 00:14:18,740
ובכן, זה אחד היתרונות
לקצץ חסרונות של jQuery.

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
יש הרבה יותר ל
jQuery אז אנחנו בהחלט

325
00:16:08,550 --> 00:16:10,050
הולך לדבר על זה בוידאו.

326
00:16:10,050 --> 00:16:15,410
אבל אם אתה רוצה ללמוד יותר, אתה יכול
ללכת לסוג של תיעוד jQuery

327
00:16:15,410 --> 00:16:19,710
וללמוד מעט יותר על
ספרייה מאוד גמישה זה, ש

328
00:16:19,710 --> 00:16:22,550
הוא נהדר עבור עושה בצד הלקוח
scripting כגון מה אנחנו עושים

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