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
जावास्क्रिप्ट का उपयोग करने के बजाय होने
एचटीएमएल, कहते हैं, के साथ बातें कोड के लिए।

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
>> दस्तावेज़ एक और है के अंदर
मेरे पृष्ठ के 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
और जावास्क्रिप्ट पर अपने वीडियो में, मैं
सांत्वना नहीं है कि उल्लेख

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, डी-मैं-आर कहने जा रहा हूँ।
अब, मैं सिर्फ प्रिंट करने के लिए 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
डोम की तुलना में एक बहुत अधिक नहीं है
नोड्स और बच्चे नोड्स सिर्फ माता पिता।

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
>> वहाँ के अंदर मैं देख रहा हूँ
कुछ परिचित, एचटीएमएल।

86
00:04:03,810 --> 00:04:07,670
हमारे दस्तावेज़ के अंदर तो
एक स्तर नीचे, एचटीएमएल।

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
तो इन गुणों में से कुछ क्या कर रहे हैं
एक दस्तावेज़ वस्तु का हिस्सा है कि कर रहे हैं?

118
00:05:37,185 --> 00:05:40,100
ठीक है, तुम शायद देखा एक
उनमें से कुछ वास्तव में जल्दी से

119
00:05:40,100 --> 00:05:42,700
हम zipping थे के रूप में
विशाल दस्तावेज के माध्यम से

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
इस आंतरिक एचटीएमएल क्या था?

125
00:05:56,125 --> 00:05:59,030
खैर, यह है बस क्या
टैग के बीच में।

126
00:05:59,030 --> 00:06:01,590
>> और तो भीतरी एचटीएमएल,
उदाहरण के लिए, शीर्षक

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
जो आमतौर पर एक आईडी विशेषता के साथ,
सीएसएस के संदर्भ में काम में आता है,

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
>> , गुण है कि सिर्फ एक सरणी है
के 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
>> शैली एक और एक है कि
सीएसएस का प्रतिनिधित्व करता है

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
हम शब्द आईडी लिखते हैं, तो यह है
आम तौर पर राजधानी I पूंजी डी

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
>> यह इस Wordy प्राप्त कर सकते हैं
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
शायद एक लंबे टैग नाम है,
हो सकता है आप बाद में और अधिक कॉल करते हैं।

190
00:09:28,560 --> 00:09:31,230
बातें एक छोटा सा Wordy प्राप्त कर सकते हैं।

191
00:09:31,230 --> 00:09:34,480
और प्रोग्रामर के रूप में, आप है के रूप में
शायद इन वीडियो में से कई में देखा जाता है,

192
00:09:34,480 --> 00:09:36,600
हम Wordy बातें पसंद नहीं है।

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
अब जावास्क्रिप्ट नहीं है।

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
हम सिर्फ थे क्या मूल रूप से है
डोम जोड़तोड़ के साथ के बारे में बात कर रही है।

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
और तो jQuery में, हम शायद कह सकते हैं
यह एक छोटा सा और concisely।

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
>> और आपको लगता है कि मैं नोटिस देंगे
इन बटनों को परिभाषित किया है

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
और फिर यहाँ, यह सच Wordy हो जाता है।

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
पाठ है कि वहाँ नोटिस
बैंगनी के लिए एक पूंजी पी के साथ लिखा है।

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
के रूप में intuitively।

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
>> यह सही है, सर्वर का उपयोग कर लाल है?

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