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

2
00:00:04,439 --> 00:00:07,230
DOUG 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
มันมีแท็กหัว

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
>> ภายในของเอกสารเป็นอีกหนึ่ง
วัตถุหมายถึง HTM​​L ของหน้าเว็บ

42
00:02:00,030 --> 00:02:02,660
และ HTML ของหน้าของฉันคือทั้งหมดนี้

43
00:02:02,660 --> 00:02:06,900
และจากนั้นภายในของ HTM​​L
วัตถุที่ผมมีวัตถุหัว

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-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
ฉันจะกด 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
ดังนั้นภายในของเอกสารของเรา
หนึ่งระดับลง HTM​​L

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
>> ถ้าคุณจำจากแผนภาพของเรา
สิ่งที่เราควรจะหาภายในของ HTM​​L ได้ไหม?

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
เป็นชื่อของ HTM​​L ได้
องค์ประกอบเช่นชื่อ

132
00:06:15,810 --> 00:06:19,100
ID ซึ่งเป็นรหัส
แอตทริบิวต์ขององค์ประกอบ HTML

133
00:06:19,100 --> 00:06:23,790
>> จำได้ว่าเราเป็นพิเศษสามารถบ่งบอกถึง
องค์ประกอบที่เฉพาะเจาะจงของ HTM​​L ของเรา

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
โหนดแม่ซึ่งเป็นการอ้างอิงถึง
สิ่งที่เป็นเพียงแค่ขึ้นไปข้างบนผมในดอม

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
>> คุณสมบัติที่เพียงอาร์เรย์
ของคุณลักษณะขององค์ประกอบของ HTM​​L

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
>> เป็นหนึ่งในรูปแบบอื่นที่
ไม่เป็นตัวแทนของซีเอสเอ

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-- d เป็นตัวพิมพ์เล็ก

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,
ที่เป็นตัวพิมพ์เล็ก d

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
>> มันเป็นห้องสมุดที่เขียน
โดยบางส่วนเขียนโปรแกรมจาวาสคริปต์

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
ถ้าฉันเพียงแค่ใช้ 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
สีของโดยเฉพาะอย่างยิ่ง
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
ดังนั้นผมจึงได้เขียนทั่วไปมากขึ้น
กรณีฟังก์ชัน 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
เป็นที่ดีสำหรับการทำฝั่งไคลเอ็นต์
สคริปต์ดังกล่าวเป็นสิ่งที่เรากำลังทำ

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