1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [संगोष्ठी] [जावास्क्रिप्ट चौखटे: क्यों और कैसे]

2
00:00:02,000 --> 00:00:04,000
[केविन स्च्मिद] [हार्वर्ड विश्वविद्यालय]

3
00:00:04,000 --> 00:00:06,960
[यह CS50 है.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> हाय, सब लोग. जावास्क्रिप्ट चौखटे संगोष्ठी में आपका स्वागत है.

5
00:00:10,630 --> 00:00:14,910
, मेरा नाम केविन है, और आज मैं जावास्क्रिप्ट चौखटे के बारे में बात करने जा रहा हूँ

6
00:00:14,910 --> 00:00:20,400
और इस संगोष्ठी का लक्ष्य, आप को मिल कहते हैं, से प्रति एक विशेष ढांचे मास्टर करने के लिए नहीं है

7
00:00:20,400 --> 00:00:23,810
लेकिन चौखटे के एक जोड़े के लिए एक व्यापक परिचय देना

8
00:00:23,810 --> 00:00:27,150
और हम कभी एक ढांचे का उपयोग क्यों चाहेगा दिखा.

9
00:00:27,150 --> 00:00:31,060
>> मुझे लगता है कि ऐसा करने से पहले, मैं जावास्क्रिप्ट में एक छोटी सी पृष्ठभूमि प्रदान करेंगे

10
00:00:31,060 --> 00:00:33,750
और फिर हम वहाँ से ले जाऊँगा.

11
00:00:33,750 --> 00:00:36,270
हम एक करने के लिए सूची को लागू करने से शुरू करने जा रहे हैं.

12
00:00:36,270 --> 00:00:39,330
यहाँ आज के लिए हमारे कार्य सूची है.

13
00:00:39,330 --> 00:00:41,990
यह अजीब तरह का है. हम जावास्क्रिप्ट में एक करने के लिए सूची को लागू किया है.

14
00:00:41,990 --> 00:00:45,110
यह इसलिए कि हमारा पहला लक्ष्य है, जैसे कि यह देखने के लिए कि क्या हो रहा है.

15
00:00:45,110 --> 00:00:47,160
हम ऐसा करने के लिए एक रूपरेखा का उपयोग करने के लिए नहीं जा रहे हैं.

16
00:00:47,160 --> 00:00:51,930
हम कोड जावास्क्रिप्ट के लिए जा रहा है और करने के लिए सूची पाने के लिए काम कर रहे हैं.

17
00:00:51,930 --> 00:00:54,370
तो फिर हम एक रूपरेखा का उपयोग किए बिना डिजाइन में सुधार करने के लिए जा रहे हैं.

18
00:00:54,370 --> 00:00:57,190
हम सिर्फ जावास्क्रिप्ट अकेले के साथ क्या कर सकते हैं विभिन्न बातों पर चर्चा करने जा रहे हैं

19
00:00:57,190 --> 00:01:00,650
हमारे बनाने के लिए करने वाली है एक छोटे से अधिक अच्छी तरह से डिजाइन की सूची.

20
00:01:00,650 --> 00:01:02,490
फिर हम कुछ jQuery में फेंक करने के लिए जा रहे हैं

21
00:01:02,490 --> 00:01:05,030
और फिर हम करने के लिए सूची उसी को देखने के लिए जा रहे हैं

22
00:01:05,030 --> 00:01:07,170
बस विभिन्न चौखटे में लागू किया, और हम बात करेंगे

23
00:01:07,170 --> 00:01:09,280
 जिस तरह से साथ पेशेवरों और विपक्ष.

24
00:01:09,280 --> 00:01:12,040
>> के लिए करते सूची है कि लागू करने शुरू करते हैं.

25
00:01:12,040 --> 00:01:14,270
हम कहते हैं कि हम इस HTML दिया रहे हैं.

26
00:01:14,270 --> 00:01:16,620
मैं इस एक छोटे से छोटा करने के लिए जा रहा हूँ.

27
00:01:16,620 --> 00:01:19,300
आप देख सकते हैं, मैं तोदो कहते हैं कि एक छोटा शीर्षक है

28
00:01:19,300 --> 00:01:21,740
मैं एक टूडू का विवरण दर्ज कर सकते हैं और एक छोटे से बॉक्स

29
00:01:21,740 --> 00:01:26,990
और फिर, तो इस सूची में एक नया टूडू प्रवेश करने की कोशिश का एक नया आइटम बटन चलो.

30
00:01:26,990 --> 00:01:31,000
, एक जावास्क्रिप्ट चौखटे संगोष्ठी दे दो

31
00:01:31,000 --> 00:01:33,090
और मैं नया आइटम हिट करने के लिए कर रहा हूँ.

32
00:01:33,090 --> 00:01:35,730
मैं मेरे लागू कहते हैं कि इस जावास्क्रिप्ट चेतावनी मिलता है.

33
00:01:35,730 --> 00:01:37,560
हम इसे लागू करने के लिए मिल गया है.

34
00:01:37,560 --> 00:01:41,490
HTML और जावास्क्रिप्ट, दोनों की इस बात के लिए कोड की जाँच करते हैं.

35
00:01:41,490 --> 00:01:43,260
यहाँ हमारे एचटीएमएल है.

36
00:01:43,260 --> 00:01:45,500
आप यहाँ देख सकते हैं, यहाँ हमारे छोटे Todos हैडर है.

37
00:01:45,500 --> 00:01:47,620
यही कारण है, शीर्ष पर है कि बोल्ड बात थी

38
00:01:47,620 --> 00:01:50,690
और फिर हम, प्लेसहोल्डर के साथ इनपुट बॉक्स

39
00:01:50,690 --> 00:01:59,460
और फिर इस समारोह addTodo कहता है कि इस बटन के एक खास विशेषता है.

40
00:01:59,460 --> 00:02:05,460
किसी को भी वाचक है क्लिक पर क्या लगता है कि करना चाहते हैं?

41
00:02:05,460 --> 00:02:07,390
[छात्र सुनाई प्रतिक्रिया]

42
00:02:07,390 --> 00:02:09,289
अच्छा, पर क्लिक करें, एक घटना की तरह तरह की है

43
00:02:09,289 --> 00:02:12,120
माउस क्लिक करने से सिर्फ एक घटना है, और हम क्या कर रहे है जैसे

44
00:02:12,120 --> 00:02:16,890
हम उस समारोह निष्पादित करने के लिए इस बटन पर क्लिक करने की घटना बांधने रहे है.

45
00:02:16,890 --> 00:02:21,700
AddTodo कि बटन क्लिक करने के लिए इस घटना हैंडलर है.

46
00:02:21,700 --> 00:02:25,010
>> आप देख सकते हैं, मैं नया आइटम बटन क्लिक करने पर

47
00:02:25,010 --> 00:02:29,940
पर क्लिक करें घटना निकाल दिया जाता है, और इस समारोह में बुलाया जाता है.

48
00:02:29,940 --> 00:02:33,170
समारोह को देखो.

49
00:02:33,170 --> 00:02:36,260
आप देख सकते हैं, यहाँ अभी तक मेरे जावास्क्रिप्ट कोड है.

50
00:02:36,260 --> 00:02:41,280
क्या मैं शीर्ष पर है मेरी सूची करने के लिए एक वैश्विक आंकड़ा संरचना है.

51
00:02:41,280 --> 00:02:44,060
यह एक सरणी की तरह लग रहा है. यह सिर्फ एक खाली सरणी है.

52
00:02:44,060 --> 00:02:47,100
और फिर मैं, हम पहले देखा था कि addTodo समारोह

53
00:02:47,100 --> 00:02:50,740
और वहाँ में कोड की ही लाइन यह चेतावनी है.

54
00:02:50,740 --> 00:02:55,730
यह मेरे लागू सचेतक, और तब मैं हाथ में 2 कार्यों के लिए है.

55
00:02:55,730 --> 00:02:58,790
मुझे लगता है कि वैश्विक डेटा संरचना को टूडू जोड़ने के लिए है

56
00:02:58,790 --> 00:03:01,860
और फिर मैं करने के लिए सूची से बाहर आकर्षित करना चाहता हूँ.

57
00:03:01,860 --> 00:03:06,360
कुछ भी नहीं अभी ज्यादा फैंसी, लेकिन जावास्क्रिप्ट आप के साथ अपरिचित हो सकता है

58
00:03:06,360 --> 00:03:12,370
इसलिए मैं धीमी गति से चलते हैं और इस तरह जावास्क्रिप्ट की बुनियादी बातों की समीक्षा करने जा रहा हूँ.

59
00:03:12,370 --> 00:03:15,490
>> इस एक शॉट देता हूँ.

60
00:03:15,490 --> 00:03:21,130
हम कहते हैं कि उपयोगकर्ता इस बॉक्स में कुछ में प्रवेश करती हैं.

61
00:03:21,130 --> 00:03:23,360
मैं बस यहाँ में, पाठ कुछ टाइप किया.

62
00:03:23,360 --> 00:03:27,620
कैसे मैं जावास्क्रिप्ट के माध्यम से पहुँच है कि पाठ की तरह है?

63
00:03:27,620 --> 00:03:32,500
कि जावास्क्रिप्ट याद रखें, अपने बुनियादी सुविधाओं में से एक यह हमें देता है

64
00:03:32,500 --> 00:03:34,670
डोम के लिए इस कार्यक्रम का उपयोग.

65
00:03:34,670 --> 00:03:40,670
यह हमें इस वास्तविक HTML के तत्वों और उनके गुणों का उपयोग करने की अनुमति देता है.

66
00:03:40,670 --> 00:03:43,430
हम नंगे हड्डियों जावास्क्रिप्ट के साथ ऐसा तरीका

67
00:03:43,430 --> 00:03:51,360
हम वास्तव में GetElementByID बुलाया जावास्क्रिप्ट में एक समारोह का उपयोग कर सकते है.

68
00:03:51,360 --> 00:03:55,140
मैं कुछ चर में वहाँ टाइप किया है कि पाठ संग्रहीत करना चाहते हैं

69
00:03:55,140 --> 00:03:58,350
इसलिए मैं new_todo नामक एक नया चर कहने जा रहा हूँ

70
00:03:58,350 --> 00:04:01,980
और मैं उस तत्व प्राप्त करने के लिए जा रहा हूँ.

71
00:04:01,980 --> 00:04:06,330
यह एक समारोह है. GetElementByID.

72
00:04:06,330 --> 00:04:11,580
और अब, मैं आईडी के आधार पर एक तत्व हो रही है, इसलिए मुझे लगता है कि पाठ बॉक्स के आईडी की जरूरत

73
00:04:11,580 --> 00:04:15,860
इसलिए मैं यह आईडी new_todo_description दिया है.

74
00:04:15,860 --> 00:04:18,399
यही कारण है कि मैं एक तत्व प्राप्त करने के लिए जा रहा हूँ कि कैसे है.

75
00:04:18,399 --> 00:04:23,880
यही कारण है कि जो पाने के लिए आईडी का उल्लेख करने के लिए, इस समारोह के लिए अपने तर्क है.

76
00:04:23,880 --> 00:04:28,110
और ऐसा है कि HTML में एक तत्व है, और यह गुण है.

77
00:04:28,110 --> 00:04:30,650
आप इन देखा है. वे गुण हैं.

78
00:04:30,650 --> 00:04:37,090
उपयोगकर्ता के इनपुट है कि स्टोर पाठ तत्व की विशेषता मान कहा जाता है.

79
00:04:37,090 --> 00:04:40,860
मैं new_todo नामक इस चर में अब उस पाठ बॉक्स के मूल्य बचाया.

80
00:04:40,860 --> 00:04:45,040
अब मैं इस चर के लिए कार्यक्रम का उपयोग किया है, जो शांत की तरह है

81
00:04:45,040 --> 00:04:49,200
अब मैं क्या कर सकता क्योंकि मैं अपने को सूची में जोड़ सकते है.

82
00:04:49,200 --> 00:04:52,870
>> हम में यह करना होगा जिस तरह से जावास्क्रिप्ट और आप इस बात से परिचित नहीं हैं, तो चिंता मत करो,

83
00:04:52,870 --> 00:04:57,010
लेकिन सिर्फ यह माध्यम से जा todos.push है

84
00:04:57,010 --> 00:05:00,130
यहाँ मेरे वैश्विक आंकड़ा संरचना का नाम है, क्योंकि

85
00:05:00,130 --> 00:05:04,450
और मैं new_todo पुश करने के लिए जा रहा हूँ.

86
00:05:04,450 --> 00:05:09,120
अब मैं अपने जावास्क्रिप्ट को जोड़ा गया है, क्योंकि यह बहुत ही अच्छी है

87
00:05:09,120 --> 00:05:11,280
कि करने के लिए सूची का प्रतिनिधित्व.

88
00:05:11,280 --> 00:05:15,170
लेकिन अब मैं कैसे HTML करने के लिए इसे वापस मिलता है?

89
00:05:15,170 --> 00:05:18,560
मैं इसे वापस धक्का की तरह करने के लिए एक रास्ता खोजना होगा.

90
00:05:18,560 --> 00:05:21,830
दूसरे शब्दों में, मैं एक तरह से इस आकर्षित किया है.

91
00:05:21,830 --> 00:05:26,060
हम क्या करने जा रहे हैं, हम करने के लिए सूची आकर्षित करने के लिए जा रहे है.

92
00:05:26,060 --> 00:05:29,270
मुझे लगता है कि पृष्ठ पर अन्य HTML अद्यतन करने की आवश्यकता

93
00:05:29,270 --> 00:05:32,040
आप देख सकते हैं और, मैं यहाँ इस छोटे कंटेनर छोड़ दिया है

94
00:05:32,040 --> 00:05:36,840
जिसका आईडी todos है पृष्ठ के इस विभक्त,

95
00:05:36,840 --> 00:05:40,870
और मैं वहाँ करने के लिए सूची डाला जा रहा हूँ.

96
00:05:40,870 --> 00:05:47,240
सबसे पहले मैं करने के लिए सूची एक पुराने वहाँ वहाँ था, कहते हैं, क्योंकि यह बाहर खाली करने के लिए जा रहा हूँ.

97
00:05:47,240 --> 00:05:49,560
मैं फिर से आईडी के आधार तत्व है कि हो रही है

98
00:05:49,560 --> 00:05:54,530
और मुझे लगता है कि तत्व के भीतर एचटीएमएल पहुँचने हूँ

99
00:05:54,530 --> 00:05:58,010
और मुझे लगता है कि खाली करने के लिए जा रहा हूँ.

100
00:05:58,010 --> 00:06:05,510
है के रूप में हम इस कोड को छोड़ दिया है, तो हम वहां एक खाली कुछ भी नहीं देखना चाहते हैं

101
00:06:05,510 --> 00:06:10,410
और अब मैं मेरी नई करने के लिए सूची प्रतिपादन शुरू करना चाहते हैं.

102
00:06:10,410 --> 00:06:12,870
मैं मूल रूप से मेरे करने के लिए सूची का सफाया करने के लिए जा रहा हूँ.

103
00:06:12,870 --> 00:06:18,180
>> अब जब कि todos div के भीतर HTML के अंदर, पूरी तरह से स्पष्ट है

104
00:06:18,180 --> 00:06:20,060
और अब मैं अपनी सूची में जोड़ने से शुरू करने की जरूरत है.

105
00:06:20,060 --> 00:06:23,890
मैं वापस जोड़ना चाहते हैं, पहली बात, unordered सूची टैग है

106
00:06:23,890 --> 00:06:33,890
जो मूल रूप से यह एक unordered सूची की शुरुआत है कि अर्थ.

107
00:06:33,890 --> 00:06:39,770
अब मेरी todos सरणी में प्रत्येक तत्व के लिए मुझे लगता है कि HTML के अंदर इसे बाहर प्रिंट करना चाहते हैं.

108
00:06:39,770 --> 00:06:43,710
मैं इस सूची के नीचे करने के लिए उस पर संलग्न करना चाहते हैं.

109
00:06:43,710 --> 00:06:49,040
जरा सी में की तरह, मैं एक पाश के लिए उपयोग कर सकते हैं, और मैं अपनी सूची की शुरुआत में शुरू करने जा रहा हूँ

110
00:06:49,040 --> 00:06:54,140
तत्व 0 पर, और मैं सूची की लंबाई के लिए सभी रास्ते जाने के लिए जा रहा हूँ.

111
00:06:54,140 --> 00:07:01,100
हम वास्तव में लंबाई संपत्ति का उपयोग जावास्क्रिप्ट में एक सरणी की लंबाई प्राप्त कर सकते हैं.

112
00:07:01,100 --> 00:07:03,420
असल में मैं यहाँ के अंदर बहुत कुछ ऐसा ही करने जा रहा हूँ

113
00:07:03,420 --> 00:07:05,600
उस तत्व बाहर मुद्रित करने के लिए.

114
00:07:05,600 --> 00:07:12,970
मैं फिर से todos div, उस के भीतर एचटीएमएल संपत्ति, उपयोग कर सकते हैं

115
00:07:12,970 --> 00:07:17,560
और मैं इस नई सूची आइटम को जोड़ने के लिए जा रहा हूँ, और उस से घिरे होने जा रहा है

116
00:07:17,560 --> 00:07:25,390
इस लिस्ट टैग, और मैं, + ऑपरेटर के साथ जुटना करने जा रहा हूँ

117
00:07:25,390 --> 00:07:28,040
और कि, मेरे todos सरणी के ith तत्व है

118
00:07:28,040 --> 00:07:32,380
और फिर मैं उस टैग को बंद करने जा रहा हूँ.

119
00:07:32,380 --> 00:07:36,240
अब हर तत्व के लिए हम एक नई सूची प्रविष्टि जोड़ देंगे.

120
00:07:36,240 --> 00:07:48,700
और फिर हम वास्तव में क्या करने की जरूरत है कि सभी टैग से बंद है.

121
00:07:48,700 --> 00:07:52,820
मैं बस सूची टैग unordered कि बंद को बंद करने की जरूरत है.

122
00:07:52,820 --> 00:07:55,490
>> आपको लगता है कि कैसे काम करता है के लिए एक महसूस हो रहे हो?

123
00:07:55,490 --> 00:07:57,700
इस पूरी सूची खोलता है.

124
00:07:57,700 --> 00:08:01,080
यह todos सूची से सूची में व्यक्तिगत तत्व कहते हैं

125
00:08:01,080 --> 00:08:05,470
और फिर पूरी सूची बंद कर देता है, और यह मेरा addTodo समारोह है कि.

126
00:08:05,470 --> 00:08:09,590
मैं मूल रूप से पाठ बॉक्स से टूडू रही द्वारा शुरू करते हैं.

127
00:08:09,590 --> 00:08:18,950
मैं todos सरणी के लिए कि जोड़ने के लिए, और फिर मैं करने के लिए सूची फिर से प्रस्तुत करना.

128
00:08:18,950 --> 00:08:21,520
अब मैं अपनी सूची में आइटम जोड़ सकते हैं.

129
00:08:21,520 --> 00:08:24,620
इस तरह के रोमांचक है क्योंकि सिर्फ कोड की कुछ लाइनों में

130
00:08:24,620 --> 00:08:28,240
हम मूल रूप से हम आइटम जोड़ सकते हैं जहां एक करने के लिए सूची बनाई है.

131
00:08:28,240 --> 00:08:30,050
ग्रेट.

132
00:08:30,050 --> 00:08:34,480
यही कारण है कि जावास्क्रिप्ट के लिए एक बुनियादी परिचय की तरह है.

133
00:08:34,480 --> 00:08:36,179
अब के लिए सिंटैक्स के बारे में बहुत ज्यादा चिंता मत करो

134
00:08:36,179 --> 00:08:38,130
लेकिन इस धारणा के बारे में सोचते हैं.

135
00:08:38,130 --> 00:08:40,539
हम कुछ HTML था.

136
00:08:40,539 --> 00:08:45,310
हम इनपुट एक कार्य आइटम के लिए मूल रूप से अनुमति उपयोगकर्ताओं को जोड़ने के लिए उस पृष्ठ पर एक पाठ बॉक्स था.

137
00:08:45,310 --> 00:08:49,210
और फिर हम उस पाठ बॉक्स से कि टूडू लाने के लिए जावास्क्रिप्ट का इस्तेमाल किया.

138
00:08:49,210 --> 00:08:52,830
हम एक जावास्क्रिप्ट सरणी के अंदर, जो की तरह मूल रूप से है कि संग्रहीत

139
00:08:52,830 --> 00:08:56,010
इस बात का हमारे कार्यक्रम प्रतिनिधित्व करने के लिए सूची,

140
00:08:56,010 --> 00:08:59,060
और फिर हम इसे बाहर मुद्रित.

141
00:08:59,060 --> 00:09:02,690
इस todos.js है.

142
00:09:02,690 --> 00:09:07,620
>> यह शांत की तरह है, लेकिन हम यह कैसे आगे ले जा सकते हैं?

143
00:09:07,620 --> 00:09:11,350
आप देख सकते हैं, ठीक है, इस सूची में है एक पूरी तरह नहीं है.

144
00:09:11,350 --> 00:09:15,100
उदाहरण के लिए, मैं अधूरा के रूप में इन वस्तुओं के किसी भी निशान नहीं कर सकते

145
00:09:15,100 --> 00:09:19,920
मैं आइटम reprioritize या आइटम को हटाने के लिए चाहता था पसंद है.

146
00:09:19,920 --> 00:09:23,150
यह ठीक है, लेकिन हम इस आगे ले जा सकते हैं.

147
00:09:23,150 --> 00:09:29,280
मैं, अतिरिक्त सुविधाओं को जोड़ने के बारे में बहुत ज्यादा बात करने के लिए नहीं जा रहा हूँ

148
00:09:29,280 --> 00:09:32,800
लेकिन हम चाहते हैं कि आगे ले सकता है.

149
00:09:32,800 --> 00:09:35,970
करने के लिए सूची इस के लिए एक और फीचर जोड़ने के बारे में बात करते हैं,

150
00:09:35,970 --> 00:09:40,370
एक व्यक्ति को करना आइटम की जाँच करने में सक्षम होने जा रहा है जो

151
00:09:40,370 --> 00:09:44,780
और यह तो बुनियादी तौर पर मैं इस किया है, कह रही है बाहर पार कर सकता है.

152
00:09:44,780 --> 00:09:50,240
है कि पूरा हो सकता है कि कुछ कोड को देखो.

153
00:09:50,240 --> 00:09:52,740
क्या मैं शीर्ष पर किया है मैं जोड़ दिया है नोटिस

154
00:09:52,740 --> 00:09:57,620
एक नए वैश्विक सरणी पूरा बुलाया.

155
00:09:57,620 --> 00:10:02,890
मैं मूल रूप से स्टोर करने के लिए इस का उपयोग कर रहा है कि क्या करने के लिए सूची पर आइटम

156
00:10:02,890 --> 00:10:06,560
पूरा या नहीं कर रहे हैं.

157
00:10:06,560 --> 00:10:08,470
यह ऐसा करने का एक तरीका है.

158
00:10:08,470 --> 00:10:13,750
मैं इस के कार्यान्वयन, प्रदर्शन, पर देखो

159
00:10:13,750 --> 00:10:21,120
मैं एक टूडू दर्ज करें और अगर मूल रूप से मैं इस टॉगल बटन दबाएँ

160
00:10:21,120 --> 00:10:25,040
इसे बाहर पार करती है, तो इस सूची में प्रत्येक आइटम या तो एक पूरा किया है

161
00:10:25,040 --> 00:10:31,050
या अधूरा राज्य, और मुझे लगता है कि प्रतिनिधित्व करने के लिए एक और सरणी का उपयोग कर रहा हूँ.

162
00:10:31,050 --> 00:10:33,730
>> असल कि todos सरणी में हर टूडू के लिए

163
00:10:33,730 --> 00:10:37,110
एक आइटम मूल रूप से इंगित करता है कि पूरी श्रृंखला में नहीं है

164
00:10:37,110 --> 00:10:39,060
कि पूरा है या नहीं.

165
00:10:39,060 --> 00:10:41,640
मैं इस कोड को बहुत कम परिवर्तन करने के लिए किया है

166
00:10:41,640 --> 00:10:44,470
तो यहाँ हमारे addTodo समारोह है.

167
00:10:44,470 --> 00:10:48,530
यहाँ मैं सरणी पर जोर दे रहा हूँ कि सूचना,

168
00:10:48,530 --> 00:10:51,300
और फिर मुझे लगता है कि पूरी सरणी के लिए एक 0 जोर दे रहा हूँ

169
00:10:51,300 --> 00:10:57,090
मूल रूप से कहना है कि नए टूडू धक्का के साथ समानांतर में

170
00:10:57,090 --> 00:11:00,430
मैं, इस आइटम जोड़ रहा हूँ, और यह इस मूल्य के साथ युग्मित है

171
00:11:00,430 --> 00:11:02,810
जो यह अधूरा है इसका मतलब है.

172
00:11:02,810 --> 00:11:04,970
और फिर मैं करने के लिए सूची redrawing हूँ.

173
00:11:04,970 --> 00:11:09,220
अब, मैं इस drawTodoList समारोह जोड़ दिया नोटिस.

174
00:11:09,220 --> 00:11:11,760
यह हम पहले था कोड का एक बहुत लेता है

175
00:11:11,760 --> 00:11:15,320
मूल रूप से बॉक्स के बाहर साफ करता है और फिर नया करने के लिए सूची खींचता है.

176
00:11:15,320 --> 00:11:19,620
लेकिन इस के अंदर पाश के लिए हम और अधिक अब एक छोटे से कर रहे हैं नोटिस.

177
00:11:19,620 --> 00:11:25,000
हम मूल रूप से रबर टूडू को आइटम इसी चाहे यहाँ जाँच कर रहे हैं

178
00:11:25,000 --> 00:11:30,220
पूरा हो गया है, और हम इन 2 परिस्थितियों में अलग तरह से व्यवहार कर रहे हैं.

179
00:11:30,220 --> 00:11:32,790
यह पूरा हो गया है, तो हम इस डेल टैग जोड़ रहे हैं

180
00:11:32,790 --> 00:11:35,360
जो मूल रूप से आप प्रभाव के माध्यम से कि हड़ताल प्राप्त कर सकते हैं जिस तरह से है

181
00:11:35,360 --> 00:11:38,190
यह पूरा हो गया है अगर करने के लिए सूची से बाहर पार

182
00:11:38,190 --> 00:11:42,200
अगर ऐसा नहीं है, हम इसे शामिल नहीं कर रहे हैं.

183
00:11:42,200 --> 00:11:45,030
और तो उस तरह की, इस बात का ध्यान रखती है

184
00:11:45,030 --> 00:11:49,140
>> और कि यह पूरा करने के लिए एक ही रास्ता है.

185
00:11:49,140 --> 00:11:53,420
उपयोगकर्ता इनमें से किसी एक पर क्लिक करता है और फिर जब नोटिस

186
00:11:53,420 --> 00:11:56,780
हम इसके बारे में पूरा होने की स्थिति टॉगल.

187
00:11:56,780 --> 00:12:02,170
उपयोगकर्ता क्लिक करता है, हम इसे पूरा किया या नहीं किया गया है कि क्या रिवर्स हूँ जब,

188
00:12:02,170 --> 00:12:04,540
और फिर हम यह redraw हूँ.

189
00:12:04,540 --> 00:12:06,190
काम करता है इस प्रकार का.

190
00:12:06,190 --> 00:12:09,860
हम अपने खुद के कार्यों के लिए बाहर ले जाने कि इन कार्यों के लिए है

191
00:12:09,860 --> 00:12:11,730
और यह ठीक है.

192
00:12:11,730 --> 00:12:14,110
हम हालांकि, इस बारे में बेहतर कर सकता है कुछ भी है?

193
00:12:14,110 --> 00:12:18,700
हम इन 2 वैश्विक सरणियों है सूचना है.

194
00:12:18,700 --> 00:12:23,550
इस सी थी, और हम किस तरह का प्रतिनिधित्व किया है कि 2 सरणियों था

195
00:12:23,550 --> 00:12:25,800
तरह की किसी तरह से संबंधित था कि डेटा

196
00:12:25,800 --> 00:12:30,140
हम इन 2 क्षेत्रों गठबंधन करने के लिए सी में क्या उपयोग होगा

197
00:12:30,140 --> 00:12:35,420
जानकारी के दोनों टुकड़ों encapsulates कि कुछ में?

198
00:12:35,420 --> 00:12:37,600
किसी को कोई सुझाव देने के लिए करना चाहते हैं?

199
00:12:37,600 --> 00:12:39,450
[छात्र सुनाई प्रतिक्रिया]

200
00:12:39,450 --> 00:12:42,340
>> वास्तव में, इसलिए हम संरचना को किसी तरह का इस्तेमाल कर सकते हैं

201
00:12:42,340 --> 00:12:44,960
और आप pset 3, कहते हैं, के लिए वापस लगता है, अगर

202
00:12:44,960 --> 00:12:47,350
हम शब्दकोश था, और फिर हम था याद है कि क्या शब्द

203
00:12:47,350 --> 00:12:50,230
शब्दकोश में था, और कहा कि सभी जानकारी को एक साथ रखा गया था

204
00:12:50,230 --> 00:12:52,420
कुछ डेटा संरचना के अंदर.

205
00:12:52,420 --> 00:12:56,390
मैं इस कोड के साथ कर सकते हैं एक बात इन 2 अलग सरणियों होने से बचने के लिए

206
00:12:56,390 --> 00:13:01,760
जानकारी के इसी तरह के टुकड़े के लिए मैं एक जावास्क्रिप्ट वस्तु में उनके गठबंधन कर सकते है.

207
00:13:01,760 --> 00:13:07,150
उस पर एक नज़र रखना.

208
00:13:07,150 --> 00:13:11,740
मैं केवल अब शीर्ष पर एक सरणी है नोटिस

209
00:13:11,740 --> 00:13:17,650
और क्या मैं ने किया है और यह सिर्फ तरह के लिए जावास्क्रिप्ट वाक्यविन्यास है

210
00:13:17,650 --> 00:13:21,350
एक वस्तु का शाब्दिक संस्करण बनाने,

211
00:13:21,350 --> 00:13:24,670
और, इसलिए हम टूडू है, 2 गुण हैं नोटिस

212
00:13:24,670 --> 00:13:29,660
और यह है कि यह पूरा या अधूरा है चाहे साथ एक साथ रखा है.

213
00:13:29,660 --> 00:13:31,000
यह बहुत ही इसी तरह के कोड है.

214
00:13:31,000 --> 00:13:35,310
हम जावास्क्रिप्ट वस्तुओं का उपयोग कर रहे हैं.

215
00:13:35,310 --> 00:13:38,600
सुधार बातें इस प्रकार का.

216
00:13:38,600 --> 00:13:43,850
अब की तरह, संबंधित जानकारी के लिए इन सभी क्षेत्रों को एक साथ रखा जाता है.

217
00:13:43,850 --> 00:13:46,410
हम इसे बाहर प्रिंट लिए जाते हैं, हम क्षेत्रों का उपयोग कर सकते हैं.

218
00:13:46,410 --> 00:13:49,060
>> हम todos [मैं] कैसे कर रहे हैं नोटिस. पूरा

219
00:13:49,060 --> 00:13:52,880
बजाय अलग से पूरा सरणी की जाँच की,

220
00:13:52,880 --> 00:13:56,560
और हम हम करने के लिए करते संपत्ति हो रही करने के लिए करते स्ट्रिंग प्राप्त करना चाहते हैं जब नोटिस

221
00:13:56,560 --> 00:13:58,750
कि टूडू की, ताकि इस तरह की समझ में आता है क्योंकि

222
00:13:58,750 --> 00:14:01,660
हर आइटम इसके बारे में इन आंतरिक गुण है.

223
00:14:01,660 --> 00:14:05,650
यह एक टूडू है, और यह पूरी तरह से है या नहीं है.

224
00:14:05,650 --> 00:14:11,540
नहीं भी कई परिवर्तन कर कार्यात्मक, सिर्फ कोड के लिए कुछ और जोड़ा.

225
00:14:11,540 --> 00:14:13,430
यह सही, कुछ मोर्चों पर एक सुधार है?

226
00:14:13,430 --> 00:14:16,030
मैं थोड़ा डिजाइन बाहर हम सकारात्मक असर, मतलब.

227
00:14:16,030 --> 00:14:20,350
अब हम मूल रूप से इस डेटा encapsulate करने के लिए वस्तुओं है.

228
00:14:20,350 --> 00:14:27,130
हम जावास्क्रिप्ट के संदर्भ में यहां से कर सकता है और अधिक कुछ भी नहीं है?

229
00:14:27,130 --> 00:14:31,810
पसंद नोटिस यहीं है कि इस कोड

230
00:14:31,810 --> 00:14:34,760
एक div के भीतर एचटीएमएल प्राप्त करने के लिए

231
00:14:34,760 --> 00:14:40,520
एक छोटी सी, मुझे लगता है, लंबे समय से है.

232
00:14:40,520 --> 00:14:45,100
Document.getElementById ("todos") है. InnerHTML.

233
00:14:45,100 --> 00:14:48,400
हम इस कोड को एक छोटे से दोस्ताना देखो बनाने के लिए कर सकता है एक बात

234
00:14:48,400 --> 00:14:51,450
इसलिए मुझे लगता है, आगे और पीछे, स्क्रॉल छोड़ दिया और सही रखने के लिए नहीं होता

235
00:14:51,450 --> 00:14:58,480
मैं jQuery की तरह एक पुस्तकालय का उपयोग कर सकता है.

236
00:14:58,480 --> 00:15:02,710
>> के, संगोष्ठी 2 की जाँच करने दें

237
00:15:02,710 --> 00:15:05,880
और यह एक ही कोड है, लेकिन यह jQuery के साथ हो चुका है.

238
00:15:05,880 --> 00:15:08,790
तुम jQuery के साथ बहुत परिचित नहीं हो सकता

239
00:15:08,790 --> 00:15:11,510
लेकिन सिर्फ jQuery का चयन के लिए एक पुस्तकालय की तरह है कि पता

240
00:15:11,510 --> 00:15:15,910
कि यह आसान डोम का उपयोग करने वाले तत्वों की तरह बातें करने के लिए आता है.

241
00:15:15,910 --> 00:15:21,280
यहाँ के बजाय document.getElementById कह के ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
मैं jQuery में अधिक स्वच्छ तरीके से उपयोग कर सकते हैं

243
00:15:25,210 --> 00:15:28,490
जो सिर्फ चयनकर्ताओं का उपयोग करने के लिए है.

244
00:15:28,490 --> 00:15:31,300
आप देख सकते हैं, इस कोड, एक छोटे से क्लीनर मिला

245
00:15:31,300 --> 00:15:35,770
बहुत कार्यात्मक समान है, लेकिन उस विचार है.

246
00:15:35,770 --> 00:15:37,980
हम अब तक चीजों के एक जोड़े को देखा है

247
00:15:37,980 --> 00:15:42,010
तो हम सिर्फ कच्चे जावास्क्रिप्ट कार्यान्वयन के साथ शुरू कर दिया.

248
00:15:42,010 --> 00:15:45,370
हम नई सुविधाओं को जोड़ा और हम साथ इसे सुधार कर सकते हैं कैसे पता चला

249
00:15:45,370 --> 00:15:49,090
बस क्या हम जावास्क्रिप्ट में है.

250
00:15:49,090 --> 00:15:53,300
>> किसी को भी इस डिजाइन के साथ किसी भी कठिनाइयों देखा है?

251
00:15:53,300 --> 00:16:01,090
अर्थात्, मुझे लगता है कि या कठिनाइयों जरूरी नहीं, लेकिन हम कहते हैं की

252
00:16:01,090 --> 00:16:04,830
हम एक करने के लिए सूची परियोजना नहीं कर रहे थे, और कल हमने तय किया

253
00:16:04,830 --> 00:16:10,320
हम एक किराने की सूची या एक शॉपिंग सूची परियोजना बनाना चाहते थे.

254
00:16:10,320 --> 00:16:14,150
इन सुविधाओं का एक बहुत बहुत समान हैं.

255
00:16:14,150 --> 00:16:19,080
हम जावास्क्रिप्ट से बाहर निकलना चाहते हैं कि चीजों की एक बहुत, बहुत आम हैं

256
00:16:19,080 --> 00:16:23,820
और इस तरह की किसी तरह की आवश्यकता रेखांकित

257
00:16:23,820 --> 00:16:25,670
ऐसा करने के लिए यह आसान बना रही है.

258
00:16:25,670 --> 00:16:30,400
मुझे लगता है, इस HTML उपयोग की सभी को बनाने के लिए यह सब डोम का उपयोग किया था

259
00:16:30,400 --> 00:16:35,530
मैं इस मॉडल के साथ करने के लिए सूची का प्रतिनिधित्व करने जा रहा हूँ.

260
00:16:35,530 --> 00:16:39,130
और मैं जावास्क्रिप्ट डेवलपर के रूप में जिम्मेदार हूँ नोटिस

261
00:16:39,130 --> 00:16:42,890
मैं सिंक में है कि HTML और जावास्क्रिप्ट रखने के लिए.

262
00:16:42,890 --> 00:16:48,040
स्वचालित रूप से किया कुछ भी नहीं है कि जावास्क्रिप्ट प्रतिनिधित्व

263
00:16:48,040 --> 00:16:51,590
या करने के लिए सूची HTML करने के लिए बाहर धक्का दे दिया हो.

264
00:16:51,590 --> 00:16:54,000
कुछ भी नहीं है कि मेरे लिए सिवाय लागू किया.

265
00:16:54,000 --> 00:16:56,880
मैं सूची समारोह करने के लिए आकर्षित लिखना था.

266
00:16:56,880 --> 00:17:01,650
और इसका मतलब मैं होने वाली है, यह, कि क्या करना उचित नहीं है कि हो सकता है

267
00:17:01,650 --> 00:17:03,670
लेकिन यह कभी कभी कठिन हो सकता है.

268
00:17:03,670 --> 00:17:08,190
तुम एक बड़ी परियोजना है, कि मुश्किल हो सकता है.

269
00:17:08,190 --> 00:17:10,720
>> चौखटे, चौखटे के उद्देश्यों में से एक

270
00:17:10,720 --> 00:17:14,060
कारक है कि प्रक्रिया और सुलझाना आसान बनाने के लिए है

271
00:17:14,060 --> 00:17:16,950
इन आम मैं तुम सकता कहना डिजाइन पैटर्न अनुमान

272
00:17:16,950 --> 00:17:20,700
कि लोग आम तौर पर, डेटा का प्रतिनिधित्व करने के रास्ते से किसी तरह का है

273
00:17:20,700 --> 00:17:25,599
कि उस नक्शे जानकारी है, चाहे एक मित्र सूची में है या नहीं

274
00:17:25,599 --> 00:17:27,280
या कुछ या एक करने के लिए सूची.

275
00:17:27,280 --> 00:17:30,660
कुछ लोगों को आम तौर पर जानकारी का प्रतिनिधित्व करने का एक तरीका है

276
00:17:30,660 --> 00:17:33,650
और वे आम तौर पर सिंक में है कि जानकारी की तरह रखने की जरूरत

277
00:17:33,650 --> 00:17:36,520
उपयोगकर्ता को देखने के कुछ प्रकार में क्या देखता बीच,

278
00:17:36,520 --> 00:17:39,850
आप व्याख्यान में देखा कि मॉडल दृश्य नियंत्रक तरह के संदर्भ में बोल रहा है,

279
00:17:39,850 --> 00:17:45,400
और फिर इस मामले में यह जावास्क्रिप्ट सरणी है जो मॉडल,.

280
00:17:45,400 --> 00:17:49,020
चौखटे हमें उस समस्या को हल करने के लिए एक रास्ता दे.

281
00:17:49,020 --> 00:17:53,080
अब के लिए करते सूची इस के कार्यान्वयन पर एक नज़र रखना

282
00:17:53,080 --> 00:18:02,360
angularjs नामक ढांचे में.

283
00:18:02,360 --> 00:18:04,650
यह बात है. यह एक स्लाइड पर फिट बैठता सूचना है.

284
00:18:04,650 --> 00:18:07,330
मैं छोड़ दिया और सही करने के लिए स्क्रॉल करने के लिए नहीं है.

285
00:18:07,330 --> 00:18:10,460
यह शायद, एक ढांचे का उपयोग कर की सिफारिश करने के लिए एक बड़ा कारण नहीं है

286
00:18:10,460 --> 00:18:20,120
लेकिन नोटिस मैं कभी यहां व्यक्तिगत HTML तत्व प्रवेश कर रहा हूँ?

287
00:18:20,120 --> 00:18:22,400
मैं कभी डोम में जा रही है?

288
00:18:22,400 --> 00:18:26,120
आप की तरह है कि किसी भी document.getElementById या कुछ देख रहे हो?

289
00:18:26,120 --> 00:18:29,870
नहीं, वह चला गया है.

290
00:18:29,870 --> 00:18:35,590
>> कोणीय हमें डोम और कुछ के बारे में हमारी जावास्क्रिप्ट प्रतिनिधित्व रखने में मदद करता है

291
00:18:35,590 --> 00:18:40,430
सिंक में की तरह, यह, जे एस फ़ाइल में नहीं है यदि ऐसा है तो

292
00:18:40,430 --> 00:18:46,790
प्रोग्राम के रूप में है कि सभी HTML सामग्री के लिए होने का कोई तरीका नहीं है अगर

293
00:18:46,790 --> 00:18:51,800
जावास्क्रिप्ट से कैसे हम सिंक में रखते हुए कर रहे हैं?

294
00:18:51,800 --> 00:18:58,160
यह. जे एस फ़ाइल में नहीं है, यह ठीक है, HTML में हो गया है?

295
00:18:58,160 --> 00:19:01,910
यह HTML फ़ाइल का नया संस्करण है

296
00:19:01,910 --> 00:19:04,660
और हम यहाँ एक बहुत जोड़ दिया नोटिस.

297
00:19:04,660 --> 00:19:11,110
एनजी क्लिक करें और एनजी दोहराने का कहना है कि इन नई विशेषताओं वहाँ सूचना है.

298
00:19:11,110 --> 00:19:15,650
डिजाइन में कठिनाइयों की इस समस्या को सुलझाने के लिए कोणीय के दृष्टिकोण

299
00:19:15,650 --> 00:19:19,130
मूल रूप से एचटीएमएल और अधिक शक्तिशाली बनाने के लिए है.

300
00:19:19,130 --> 00:19:24,420
कोणीय आप HTML कुछ अधिक अर्थपूर्ण बनाने के लिए अनुमति देने का एक तरीका है.

301
00:19:24,420 --> 00:19:30,520
उदाहरण के लिए, मुझे लगता है मैं इस पाठ बॉक्स टाई या बाध्य करने के लिए जा रहा हूँ कह सकते हैं कि

302
00:19:30,520 --> 00:19:35,080
मेरे कोणीय जावास्क्रिप्ट कोड के भीतर एक चर करने के लिए.

303
00:19:35,080 --> 00:19:37,030
इस एनजी मॉडल है कि बस.

304
00:19:37,030 --> 00:19:41,550
मूल रूप से कहते हैं कि आइटम इस पाठ बॉक्स के अंदर, कि

305
00:19:41,550 --> 00:19:45,000
बस चर new_todo_description साथ कि सहयोगी

306
00:19:45,000 --> 00:19:47,870
जावास्क्रिप्ट कोड के भीतर.

307
00:19:47,870 --> 00:19:51,600
मैं स्पष्ट रूप से करने के लिए जाने की जरूरत नहीं है क्योंकि यह बहुत शक्तिशाली है

308
00:19:51,600 --> 00:19:53,310
डोम कि जानकारी पाने के लिए.

309
00:19:53,310 --> 00:19:56,250
मैं document.getElementById कहने की जरूरत नहीं है.

310
00:19:56,250 --> 00:19:58,750
मैं डोम की तरह उपयोग jQueries उपयोग के लिए नहीं है.

311
00:19:58,750 --> 00:20:03,280
मुझे लगता है कि चर परिवर्तन जब मैं तो एक चर के साथ सहयोगी, और कर सकते हैं

312
00:20:03,280 --> 00:20:07,400
जावास्क्रिप्ट के भीतर यह HTML के साथ सिंक में रखा है

313
00:20:07,400 --> 00:20:11,640
ताकि दोनों के बीच आगे और पीछे जाने के लिए होने की प्रक्रिया को सरल.

314
00:20:11,640 --> 00:20:18,260
क्या इसका यह मतलब?

315
00:20:18,260 --> 00:20:22,060
>> और कोई HTML एक्सेस कोड नहीं है नोटिस.

316
00:20:22,060 --> 00:20:27,760
हम बस, एचटीएमएल और अधिक शक्तिशाली बनाया है

317
00:20:27,760 --> 00:20:32,070
और अब, उदाहरण के लिए, हम इस तरह से बातें कर सकते हैं

318
00:20:32,070 --> 00:20:38,610
आप इस पर क्लिक करते हैं, todos.js के दायरे के भीतर इस समारोह में बुलाने की तरह,

319
00:20:38,610 --> 00:20:43,410
और, इस एनजी मॉडल की तरह, हम पहले ऐसा कर सकता है, लेकिन वहाँ अन्य चीजें हैं

320
00:20:43,410 --> 00:20:47,020
और इस एनजी दोहराने नोटिस.

321
00:20:47,020 --> 00:20:51,520
आप इस करता है क्या लगता है?

322
00:20:51,520 --> 00:20:54,390
यहां पहले से हमारे unordered सूची है.

323
00:20:54,390 --> 00:20:56,470
हम उल टैग नहीं है

324
00:20:56,470 --> 00:21:03,710
लेकिन मैं कभी भी जावास्क्रिप्ट कोड के अंदर उस सूची प्रदान कर रहा हूँ?

325
00:21:03,710 --> 00:21:09,280
मैं कभी स्पष्ट रूप से उस सूची प्रदान नहीं कर रहा हूँ.

326
00:21:09,280 --> 00:21:11,580
यह कैसे काम करता है?

327
00:21:11,580 --> 00:21:16,410
खैर, वैसे कोणीय यह इस एक अपराधी कहा जाता है accomplishes.

328
00:21:16,410 --> 00:21:22,760
असल में यह है कि मैं इस HTML मुद्रित करना चाहते हैं का कहना है कि

329
00:21:22,760 --> 00:21:26,240
मेरे todos सरणी के हर टूडू के अंदर के लिए.

330
00:21:26,240 --> 00:21:31,850
Todos.jr के अंदर एक todos सरणी, सही यहाँ है

331
00:21:31,850 --> 00:21:37,910
और यह कि सरणी के माध्यम से कोणीय जाने बता देंगे, और हर तत्व के लिए आप देख

332
00:21:37,910 --> 00:21:41,390
मैं आप इस HTML मुद्रित करना चाहते हैं.

333
00:21:41,390 --> 00:21:44,620
मैं यह कर बस कर सकते हैं क्योंकि यह कमाल की तरह है

334
00:21:44,620 --> 00:21:47,760
पाश के लिए एक लिखने के लिए बिना,

335
00:21:47,760 --> 00:21:52,250
जो कोड के केवल 30 लाइनों था कि एक करने के लिए सूची के लिए

336
00:21:52,250 --> 00:21:54,700
सबसे फायदेमंद बात नहीं हो सकता है,

337
00:21:54,700 --> 00:22:01,240
तुम एक बड़ी परियोजना है, लेकिन अगर यह बहुत सुविधाजनक हो सकता है.

338
00:22:01,240 --> 00:22:06,100
>> इस HTML अधिक शक्तिशाली है, जिससे इस समस्या का एक समाधान है,

339
00:22:06,100 --> 00:22:10,820
और कहा कि हमें सिंक में जावास्क्रिप्ट और HTML रखने के लिए अनुमति देता है.

340
00:22:10,820 --> 00:22:13,220
इस समस्या को हल करने के लिए अन्य संभव तरीके हैं,

341
00:22:13,220 --> 00:22:15,320
और हर ढांचा ऐसा करता नहीं.

342
00:22:15,320 --> 00:22:17,720
हर ढांचे की इन पंक्तियों के साथ काम करता है.

343
00:22:17,720 --> 00:22:19,490
कुछ व्यवस्थाएं, अलग अलग दृष्टिकोण है

344
00:22:19,490 --> 00:22:23,310
और यदि आप एक दूसरे के ऊपर ढांचे में कोडिंग है कि आनंद मिल सकता है.

345
00:22:23,310 --> 00:22:26,160
चलो एक और देखो.

346
00:22:26,160 --> 00:22:30,060
यह रीढ़ कहा जाता है एक ढांचे में कोडित करने के लिए सूची है.

347
00:22:30,060 --> 00:22:33,250
मैं जल्दी से इस के माध्यम से जाने के लिए जा रहा हूँ.

348
00:22:33,250 --> 00:22:38,300
हम वहाँ जाने से पहले मैं HTML के साथ शुरू करेंगे.

349
00:22:38,300 --> 00:22:40,290
एक सेकंड.

350
00:22:40,290 --> 00:22:43,950
तुम नोटिस के रूप में, HTML के साथ शुरू, हमारे HTML समान है

351
00:22:43,950 --> 00:22:50,000
यह उस मोर्चे पर पहले, इसलिए बहुत ज्यादा नहीं नया क्या था.

352
00:22:50,000 --> 00:22:55,410
लेकिन हमारे जे एस फ़ाइल एक छोटे से अलग है.

353
00:22:55,410 --> 00:23:00,360
की रीढ़ तरह इस विचार है, या विचार पर बनाता है

354
00:23:00,360 --> 00:23:04,750
हम साथ क्या कर के एक बहुत कुछ है, कहते हैं कि, हमारे जावास्क्रिप्ट परियोजनाओं

355
00:23:04,750 --> 00:23:09,110
मॉडल और इन मॉडलों के संग्रह के बारे में सोचना है.

356
00:23:09,110 --> 00:23:12,510
यह, उदाहरण के लिए, तस्वीरों की एक तस्वीर और संग्रह हो सकता है

357
00:23:12,510 --> 00:23:16,230
या मित्रों के एक दोस्त और संग्रह का विचार है.

358
00:23:16,230 --> 00:23:20,700
और बार बार हम जावास्क्रिप्ट अनुप्रयोगों प्रोग्रामिंग कर रहे हैं जब

359
00:23:20,700 --> 00:23:25,340
दोस्तों का एक संग्रह करने के विचार का प्रतिनिधित्व के हम सुलझा लेंगे

360
00:23:25,340 --> 00:23:29,500
किसी भी तरह जावास्क्रिप्ट में, और रीढ़ हमें इस परत देता है

361
00:23:29,500 --> 00:23:33,040
जावास्क्रिप्ट के मौजूदा सरणियों और वस्तुओं के शीर्ष पर

362
00:23:33,040 --> 00:23:38,300
और अधिक आसानी से उस के साथ अधिक शक्तिशाली बातें करने के लिए.

363
00:23:38,300 --> 00:23:41,870
>> यहाँ मैं, एक करने के लिए मॉडल में परिभाषित किया गया है

364
00:23:41,870 --> 00:23:44,630
और तुम, वाक्य रचना के बारे में बहुत ज्यादा चिंता की जरूरत नहीं है

365
00:23:44,630 --> 00:23:48,730
लेकिन क्या इस के गुणों में से एक है कि नोटिस?

366
00:23:48,730 --> 00:23:53,190
यह एक डिफ़ॉल्ट क्षेत्र है.

367
00:23:53,190 --> 00:23:56,640
बैकबोन मेरे बल्ले से पहले ही निर्दिष्ट करने के लिए अनुमति देता है

368
00:23:56,640 --> 00:24:00,190
मुझे लगता है कि बनाने के लिए किसी भी नए इन चूक होने वाला है.

369
00:24:00,190 --> 00:24:04,100
अब मैं इस अनुकूलित, लेकिन चूक निर्दिष्ट करने के लिए किया जा रहा सक्षम कर सकते हैं

370
00:24:04,100 --> 00:24:07,220
अच्छा है, और इस तरह है कि कुछ नहीं है क्योंकि यह सुविधाजनक की तरह है

371
00:24:07,220 --> 00:24:10,430
जावास्क्रिप्ट में निहित है, और अब मैं स्पष्ट रूप से करने की जरूरत नहीं

372
00:24:10,430 --> 00:24:12,430
todos अधूरे हैं कि कहते हैं.

373
00:24:12,430 --> 00:24:19,190
मैं todos अधूरा के रूप में चिह्नित किया जा रहे हैं कि सही बल्ले से कह सकते हैं.

374
00:24:19,190 --> 00:24:21,300
तो सूचना यह क्या है?

375
00:24:21,300 --> 00:24:25,520
अब मैं एक करने के लिए सूची है, और कि एक संग्रह है.

376
00:24:25,520 --> 00:24:30,960
मॉडल टूडू का कहना है कि साथ जुड़े क्षेत्र पर ध्यान दें.

377
00:24:30,960 --> 00:24:33,390
मतलब यह है कि रीढ़ बताने का मेरा तरीका है

378
00:24:33,390 --> 00:24:37,350
मैं इन व्यक्तिगत todos का एक संग्रह के बारे में सोच रही हो जा रहा हूँ.

379
00:24:37,350 --> 00:24:42,140
यह मूल रूप से अपने कार्यक्रम के लिए मॉडल संरचना है.

380
00:24:42,140 --> 00:24:44,980
यहाँ मैं एक संग्रह के इस विचार है

381
00:24:44,980 --> 00:24:48,960
और मूल रूप से उस संग्रह में निहित आइटम सभी, इन todos होने जा रहे हैं

382
00:24:48,960 --> 00:24:51,910
और कहा कि इस मायने में बहुत ही स्वाभाविक है

383
00:24:51,910 --> 00:24:59,890
मुझे क्या करना है क्योंकि todos है, और मैं एक संग्रह में उन्हें दिया है.

384
00:24:59,890 --> 00:25:02,940
>> इस के एक छोटे से अधिक पर नजर डालते हैं.

385
00:25:02,940 --> 00:25:05,900
यहाँ एक बैकबोन दृश्य है.

386
00:25:05,900 --> 00:25:08,890
रीढ़ की हड्डी का कहना है कि दूसरी बात यह है कि

387
00:25:08,890 --> 00:25:14,660
आप के बारे में या भी संग्रह में सोच रहे हैं कि मॉडल का एक बहुत

388
00:25:14,660 --> 00:25:19,150
प्रदर्शित की जा रही का कोई रास्ता है की जरूरत जा रहे हैं.

389
00:25:19,150 --> 00:25:21,900
हम करने के लिए सूची है कि प्रदान की जरूरत

390
00:25:21,900 --> 00:25:25,460
हम एक मॉडल के लिए प्रदान कर सकता है और यह अच्छा नहीं होगा

391
00:25:25,460 --> 00:25:28,390
या एक मॉडल के साथ इस दृश्य सहयोगी

392
00:25:28,390 --> 00:25:34,020
हमें करने की अनुमति देता है कि मैं दो एक साथ जोड़ने लगता है क्या?

393
00:25:34,020 --> 00:25:38,320
जबकि पहले हम के माध्यम से चला जाएगा कि पाश के लिए एक का उपयोग किया था

394
00:25:38,320 --> 00:25:41,130
हर हमारी सूची में टूडू और फिर इसे यहाँ बाहर प्रिंट

395
00:25:41,130 --> 00:25:44,650
हम मूल रूप से इस मॉडल के साथ कनेक्ट कर सकते हैं.

396
00:25:44,650 --> 00:25:47,550
यह एक करने के लिए करते दृश्य है.

397
00:25:47,550 --> 00:25:50,550
यह हम पहले भी पाया टूडू के साथ जुड़ा हुआ है.

398
00:25:50,550 --> 00:25:54,940
अब हर टूडू प्रदर्शन या renderable है

399
00:25:54,940 --> 00:25:56,960
इस से दृश्य करने के लिए.

400
00:25:56,960 --> 00:25:59,440
क्षेत्रों के कुछ सूचना है.

401
00:25:59,440 --> 00:26:05,880
आप इस tagName है tagName क्या लगता है: ली?

402
00:26:05,880 --> 00:26:09,790
एक टूडू रेंडर करने के लिए हम चाहते थे कि जब पहले से याद रखें

403
00:26:09,790 --> 00:26:16,700
हम स्पष्ट रूप से इस लिस्ट टैग के साथ हमारे todos जोड़ी के लिए होगा.

404
00:26:16,700 --> 00:26:21,080
अब हम इस टूडू जीने के लिए जा रहा है, जहां कह रहे हैं कि

405
00:26:21,080 --> 00:26:25,250
एक ली टैग के अंदर होने जा रहा है.

406
00:26:25,250 --> 00:26:31,440
और अब हम भी हमारे todos साथ घटनाओं को जोड़ रहे हैं.

407
00:26:31,440 --> 00:26:34,320
>> हर टूडू इस एक घटना है.

408
00:26:34,320 --> 00:26:38,480
तुम बहुत ज्यादा टॉगल बटन क्लिक करते हैं, कि, मैं वहाँ क्या कह रहा हूँ

409
00:26:38,480 --> 00:26:43,080
तो बुनियादी तौर पर यह पहले क्या था के विपरीत रूप में टूडू निशान

410
00:26:43,080 --> 00:26:45,890
और फिर आवेदन फिर से प्रस्तुत करना.

411
00:26:45,890 --> 00:26:47,810
इस से पहले कोड के लिए इसी तरह की है.

412
00:26:47,810 --> 00:26:50,730
हम या तो सामने या के रूप में चिह्नित करते समय याद रखें

413
00:26:50,730 --> 00:26:52,410
और फिर हम इसे फिर से गाया.

414
00:26:52,410 --> 00:26:57,750
लेकिन अब एचटीएमएल में था कि कुछ हुआ करते थे, इस घटना की सूचना.

415
00:26:57,750 --> 00:26:59,640
यह वहाँ बैठा हुआ था.

416
00:26:59,640 --> 00:27:01,410
बटन पर क्लिक किया था.

417
00:27:01,410 --> 00:27:05,310
आप बटन क्लिक करते हैं, यह किस तरह की सामग्री करने के लिए करता है

418
00:27:05,310 --> 00:27:07,210
टूडू अधूरा होने के लिए निर्धारित किया है.

419
00:27:07,210 --> 00:27:11,180
यहाँ हम कि टॉगल बटन पर क्लिक करने की घटना है कि संबद्ध किए गए

420
00:27:11,180 --> 00:27:15,830
और यह इस दृष्टि से चालू या बंद है चाहे पीछे.

421
00:27:15,830 --> 00:27:20,480
>> यह बहुत मजबूती से बंधे इतना है कि यह इस घटना की स्थापना करने का एक अच्छा तरीका है

422
00:27:20,480 --> 00:27:26,980
यह देखने के लिए, और इतना अधिक इस एक नोटिस.

423
00:27:26,980 --> 00:27:31,050
मैं इस प्रस्तुत करना तरीका है, और हम विवरण के माध्यम से जाने की जरूरत नहीं है.

424
00:27:31,050 --> 00:27:33,650
यह हम पहले क्या था के लिए इसी तरह की है

425
00:27:33,650 --> 00:27:36,070
लेकिन मैं कुछ के माध्यम से पाशन नहीं हूँ नोटिस.

426
00:27:36,070 --> 00:27:40,700
मुझे लगता है मैं सभी तत्वों को मुद्रित करने के लिए जा रहा हूँ कह रही है की तरह है कि उस उल टैग मुद्रण नहीं कर रहा हूँ.

427
00:27:40,700 --> 00:27:46,610
मैं इस एक के लिए करते मद प्रतिपादन के लिए कार्यक्षमता प्रदान कर रहा हूँ.

428
00:27:46,610 --> 00:27:49,400
इसका कारण यह मूल रूप से एक बहुत शक्तिशाली अवधारणा है

429
00:27:49,400 --> 00:27:53,600
हमारी सूची में है इन सभी todos के होते हैं, और हम मूल रूप से निर्दिष्ट कर सकते हैं

430
00:27:53,600 --> 00:27:56,890
उन todos में से एक प्रस्तुत करना करने के लिए रास्ता

431
00:27:56,890 --> 00:28:04,230
तो हम से प्रति हमारे शक्तिशाली रीढ़ की हड्डी हो सकता है todos के सभी प्रस्तुत करना

432
00:28:04,230 --> 00:28:07,760
व्यक्तिगत todos पर प्रस्तुत करना विधि को फोन करके.

433
00:28:07,760 --> 00:28:14,180
यहाँ यह उपयोगी है कि एक अवधारणा है.

434
00:28:14,180 --> 00:28:18,160
अब पूछने के लिए एक अच्छा सवाल यह आवेदन कैसे एक साथ रखा जा रहा है?

435
00:28:18,160 --> 00:28:21,200
हम एक टूडू प्रदान करने की क्षमता है, क्योंकि

436
00:28:21,200 --> 00:28:23,860
लेकिन कैसे हम कई todos के विचार मिलता है?

437
00:28:23,860 --> 00:28:25,100
>> उस पर एक नज़र रखना.

438
00:28:25,100 --> 00:28:27,100
यह आखिरी हिस्सा है.

439
00:28:27,100 --> 00:28:29,740
हम यहाँ एक करने के लिए सूची दृश्य है नोटिस,

440
00:28:29,740 --> 00:28:34,440
और यह भी एक दृश्य है नोटिस.

441
00:28:34,440 --> 00:28:36,970
और चीजों के एक जोड़े पर जाने के लिए,

442
00:28:36,970 --> 00:28:45,280
हम पहले यह करने के लिए सूची बनाते समय इस इनिशियलाइज़ विधि बुलाया जाएगा.

443
00:28:45,280 --> 00:28:52,630
आप देख सकते हैं, यह करने के लिए सूची बनाने और इस दृश्य के साथ जोड़ की तरह है.

444
00:28:52,630 --> 00:28:57,860
आप एक जोड़ते हैं और फिर मैं तो बुनियादी तौर पर यहां कार्यों जोड़ा आइटम

445
00:28:57,860 --> 00:29:01,440
इस AddItem विधि के समान है, हम पहले देखा था

446
00:29:01,440 --> 00:29:07,430
मैं एक नया टूडू वस्तु बना, और मैं वास्तव में बुला रहा हूँ नोटिस करने जा रहा हूँ

447
00:29:07,430 --> 00:29:13,080
इस नए टूडू विधि, इसलिए इस बैकबोन द्वारा प्रदान की जाती है,

448
00:29:13,080 --> 00:29:16,010
और मैं यहां अपने गुणों में पारित कर सकते हैं.

449
00:29:16,010 --> 00:29:23,710
और अब मैं इस का उपयोग कर बनाने कि हर टूडू हम पहले देखा था कि कार्यक्षमता मिल जाएगा.

450
00:29:23,710 --> 00:29:28,140
मैं पाठ बॉक्स के बाहर समाशोधन हूँ से पहले एक छोटे से छोटे विस्तार नोटिस

451
00:29:28,140 --> 00:29:32,900
और फिर मैं इस संग्रह जोड़ रहा हूँ.

452
00:29:32,900 --> 00:29:37,630
>> यह लगभग अजीब लगता है कि हम सिर्फ todos.push करना पड़ा क्योंकि पहले,

453
00:29:37,630 --> 00:29:43,310
और फिर हम कर रहे थे, और यह इस विशेष परियोजना के लिए और अधिक जटिल लग सकता है

454
00:29:43,310 --> 00:29:46,980
और आपको लगता है कि रीढ़ की हड्डी या भी कोणीय या किसी अन्य ढांचे को मिल सकता है

455
00:29:46,980 --> 00:29:50,790
अपने विशेष परियोजना के अनुरूप है, लेकिन मैं इसके बारे में सोचना जरूरी है नहीं लगता है

456
00:29:50,790 --> 00:29:54,100
क्या यह बड़ी परियोजनाओं के लिए एक बड़े पैमाने पर इसका मतलब है,

457
00:29:54,100 --> 00:29:56,610
क्योंकि हम हम का प्रतिनिधित्व कर रहे थे, जहां एक बड़ी परियोजना था

458
00:29:56,610 --> 00:30:00,860
कुछ वास्तव में जटिल संग्रह, सिर्फ एक को सूची से गहरा कुछ,

459
00:30:00,860 --> 00:30:04,490
के एक मित्र सूची या ऐसा कुछ कहते हैं, इस काम में आ सकता है

460
00:30:04,490 --> 00:30:09,620
क्योंकि हम एक बहुत सुविधाजनक तरीके से हमारे कोड का आयोजन कर सकता है

461
00:30:09,620 --> 00:30:12,550
किसी और के लिए यह आसान हो जाएगा कि एक तरह से

462
00:30:12,550 --> 00:30:16,820
जो पर बनाने के लिए एक परियोजना लेने के लिए करना चाहता था.

463
00:30:16,820 --> 00:30:21,450
आप इस संरचना का एक बहुत प्रदान करता है देख सकते हैं.

464
00:30:21,450 --> 00:30:26,580
और फिर मैं इस AddItem पर प्रस्तुत करना बुला रहा हूँ.

465
00:30:26,580 --> 00:30:31,050
आप देख सकते हैं, प्रस्तुत करना, और आप इस पूरे वाक्य रचना काबू करने के लिए नहीं है,

466
00:30:31,050 --> 00:30:37,790
लेकिन मूल रूप से एक मॉडल के लिए यह व्यक्तिगत रेंडर विधि कॉल करने के लिए जा रहा है.

467
00:30:37,790 --> 00:30:41,500
यह कहाँ से आता है उस तरह की है.

468
00:30:41,500 --> 00:30:44,140
सिर्फ व्यक्तिगत todos रेंडर करने के लिए कैसे निर्दिष्ट चलो,

469
00:30:44,140 --> 00:30:47,310
और फिर एक पूरे के रूप में एक साथ गोंद उन्हें चलो.

470
00:30:47,310 --> 00:30:49,810
लेकिन यह अमूर्त का एक तरीका प्रदान करता है

471
00:30:49,810 --> 00:30:55,470
मुझे लगता है मैं व्यक्तिगत todos रेंडर करने का फैसला बदल सकता है, क्योंकि

472
00:30:55,470 --> 00:30:57,940
और मैं इस कोड के किसी भी बदलने की जरूरत नहीं होगी.

473
00:30:57,940 --> 00:31:00,700
उस तरह से शांत है.

474
00:31:00,700 --> 00:31:08,540
>> किसी को भी जावास्क्रिप्ट चौखटे के बारे में किसी भी सवाल है?

475
00:31:08,540 --> 00:31:14,310
[छात्र सुनाई सवाल]

476
00:31:14,310 --> 00:31:16,050
ओह, यकीन है, कि एक बड़ा सवाल है.

477
00:31:16,050 --> 00:31:19,080
प्रश्न कैसे मैं चौखटे में शामिल किया था?

478
00:31:19,080 --> 00:31:22,970
हाल जावास्क्रिप्ट चौखटे मूल रूप से बस जे एस फ़ाइलें हैं

479
00:31:22,970 --> 00:31:25,740
आप अपने कोड के शीर्ष पर शामिल कर सकते हैं.

480
00:31:25,740 --> 00:31:29,830
मैं इन सभी स्क्रिप्ट टैग नहीं है मेरी HTML के सिर हिस्से में सूचना है,

481
00:31:29,830 --> 00:31:34,250
और अंतिम स्क्रिप्ट टैग हम लिखा है कि कोड है.

482
00:31:34,250 --> 00:31:38,820
और फिर 3 रूपरेखा कोड अभी भी स्क्रिप्ट टैग कर रहे हैं.

483
00:31:38,820 --> 00:31:42,110
मैं एक CDN क्या कहा जाता है से उन सहित हूँ

484
00:31:42,110 --> 00:31:46,200
जो मुझे इस बिंदु पर किसी और से इसे पाने के लिए अनुमति देता है

485
00:31:46,200 --> 00:31:57,930
लेकिन हर ढांचा इस में आप बहुत ज्यादा सामग्री मिल सकती है

486
00:31:57,930 --> 00:32:03,540
ऐसा कुछ समन्वय या कुछ और पर उपलब्ध एक विशेष जावास्क्रिप्ट पुस्तकालय के लिए,

487
00:32:03,540 --> 00:32:05,570
और फिर आप इन स्क्रिप्ट टैग शामिल कर सकते हैं.

488
00:32:05,570 --> 00:32:07,600
क्या इसका यह मतलब?

489
00:32:07,600 --> 00:32:09,500
कूल.

490
00:32:09,500 --> 00:32:11,730
>> उन 2 अलग अलग दृष्टिकोण हैं.

491
00:32:11,730 --> 00:32:14,640
उन लोगों को इस समस्या को हल करने के लिए एक ही दृष्टिकोण नहीं कर रहे हैं.

492
00:32:14,640 --> 00:32:17,080
कई अलग अलग बातें कर रहे हैं कि

493
00:32:17,080 --> 00:32:19,490
अगर कोई कर सकता है, और कई व्यवस्थाएं वहाँ बाहर हैं.

494
00:32:19,490 --> 00:32:23,300
कोणीय और रीढ़ पूरी कहानी बता नहीं है.

495
00:32:23,300 --> 00:32:26,370
अपने अंतिम परियोजनाओं के साथ भाग्य अच्छा है, और बहुत बहुत धन्यवाद.

496
00:32:31,960 --> 00:32:35,000
[CS50.TV]