1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [संगोष्ठी: jQuery]

2
00:00:02,690 --> 00:00:04,790
[विपुल शेखावत, हार्वर्ड विश्वविद्यालय]

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

4
00:00:08,000 --> 00:00:10,640
आप घर पर साथ पीछा कर रहे हैं, तो आप वास्तव में ऑनलाइन मेरा स्लाइड्स का उपयोग कर सकते हैं

5
00:00:10,640 --> 00:00:13,310
इस लिंक पर जाकर.

6
00:00:13,310 --> 00:00:18,650
यह bit.ly. पर, TjjRWj है

7
00:00:18,650 --> 00:00:20,700
तुम भी तो बस सीधे यूआरएल के लिए जा सकते हैं

8
00:00:20,700 --> 00:00:27,300
जो मेरे नाम है जो cloud.cs50.net / ~ vshekhawat है,

9
00:00:27,300 --> 00:00:32,409
और jquery.

10
00:00:32,409 --> 00:00:34,920
मैं अत्यधिक है कि आप घर पर देख रहे हैं तो आप के साथ पालन करने के लिए प्रोत्साहित करते हैं,

11
00:00:34,920 --> 00:00:40,650
आप यहाँ कर रहे हैं, तो भी यह एक बहुत इंटरैक्टिव प्रस्तुति है.

12
00:00:40,650 --> 00:00:43,160
>> आज तो, मैं jQuery के बारे में बात करने जा रहा हूँ, और पहला सवाल है

13
00:00:43,160 --> 00:00:45,300
jQuery के क्या है?

14
00:00:45,300 --> 00:00:47,090
इस साल, मैं तुम लोगों जावास्क्रिप्ट शामिल नहीं किया है पता

15
00:00:47,090 --> 00:00:51,080
हम पिछले कुछ वर्षों में किया है के रूप में ज्यादा विस्तार के रूप में.

16
00:00:51,080 --> 00:00:53,150
जावास्क्रिप्ट, सब से पहले, बस एक क्लाइंट साइड भाषा है

17
00:00:53,150 --> 00:00:58,390
आप प्रत्येक उपयोगकर्ता की मशीन पर स्क्रिप्ट और कोड को चलाने के लिए उपयोग करते हैं.

18
00:00:58,390 --> 00:01:00,660
तो तुम लोगों के लिए वेब पृष्ठों को प्रदान करता है कि एक सर्वर

19
00:01:00,660 --> 00:01:02,600
लेकिन अगर आप अपने मशीन पर सामान करना चाहते हो सकता है

20
00:01:02,600 --> 00:01:08,060
अपने सर्वर हर 30 सेकंड या ऐसा कुछ करने के लिए अनुरोध भेजने के लिए अपने मशीन पूछना.

21
00:01:08,060 --> 00:01:10,420
आप जावास्क्रिप्ट का उपयोग कर ऐसा कर सकते हैं.

22
00:01:10,420 --> 00:01:13,190
JQuery का सिर्फ जावास्क्रिप्ट के शीर्ष पर अधिक सुविधा प्रदान करता है

23
00:01:13,190 --> 00:01:15,680
कि आप के लिए अतिरिक्त सामान है.

24
00:01:15,680 --> 00:01:17,710
आप शीर्ष पर सामग्री को देखो,

25
00:01:17,710 --> 00:01:21,410
कि आप क्या कर रहे हैं कि सामान में से कुछ का वर्णन करता है.

26
00:01:21,410 --> 00:01:23,500
तो कुल मिलाकर, यह जनवरी 2006 में बनाया गया था.

27
00:01:23,500 --> 00:01:26,560
यह पहली बार अगस्त 2005 में की गई थी.

28
00:01:26,560 --> 00:01:31,370
यह एक दो साल के लिए किया गया है, और यह वास्तव में नए वेब 2.0 आंदोलन का हिस्सा है

29
00:01:31,370 --> 00:01:34,330
इंटरनेट का है कि इतना चमकदार बना दिया है.

30
00:01:34,330 --> 00:01:37,630
यह सबसे व्यापक रूप से इस्तेमाल जावास्क्रिप्ट पुस्तकालय है.

31
00:01:37,630 --> 00:01:41,450
दस लाख 19.6 ओवर वेबसाइटों का उपयोग कर रहे हैं, और उपयोग भी बढ़ रही है

32
00:01:41,450 --> 00:01:45,640
builtwith.com के अनुसार, जो, जाहिर है, पिछले वर्ष की तुलना में,

33
00:01:45,640 --> 00:01:49,710
बस लगातार काफी रैखिक बढ़ती जा रही है.

34
00:01:49,710 --> 00:01:52,870
शीर्ष 10 लाख साइटों के अलावा, वहाँ अब भी है -

35
00:01:52,870 --> 00:01:55,180
उनमें से 40% के आसपास वर्तमान में यह प्रयोग कर रहे हैं.

36
00:01:55,180 --> 00:01:58,540
फेसबुक पर इसे इस्तेमाल करता है, अन्य वेबसाइटों के बहुत सारे वर्तमान में इसका इस्तेमाल करते हैं.

37
00:01:58,540 --> 00:02:01,540
यदि आप चाहें तो आप अपने दम पर उन आंकड़ों को देख सकते हैं.

38
00:02:01,540 --> 00:02:05,820
यह एक नींव और 13 बोर्ड के सदस्य हैं और क्योंकि आप, यह कानूनी बता सकता है

39
00:02:05,820 --> 00:02:11,910
एक नियमित आधार पर इस पर काम करने वाले 20 लोगों की एक टीम के साथ.

40
00:02:11,910 --> 00:02:16,110
इसलिए यह बहुत व्यापक रूप से प्रयोग किया जाता है, यह एक org. यूआरएल है यह कल्पना है,

41
00:02:16,110 --> 00:02:21,660
यह अन्य सामान के लिए स्पिन नापसंद है, तो यह एक बड़ी बात नहीं है.

42
00:02:21,660 --> 00:02:24,510
>> तुम यह क्यों इस्तेमाल करना चाहिए? JQuery के बहुत हल्के है.

43
00:02:24,510 --> 00:02:27,270
यही कारण है कि यह एक बड़ी फ़ाइल नहीं है इसका मतलब है. आप डाउनलोड कर सकते हैं

44
00:02:27,270 --> 00:02:31,540
minified फ़ाइल, जो सभी सफेद स्थान और टिप्पणियों के बिना है, और यह केवल 32 केबी है.

45
00:02:31,540 --> 00:02:33,600
तो यह सिर्फ अपने वेब पेज पर टॉस करने के लिए आसान है

46
00:02:33,600 --> 00:02:35,910
और अभी यह प्रयोग शुरू करने के लिए.

47
00:02:35,910 --> 00:02:39,630
यह भी बहुत कुशलता से लिखा है, तो यह एक बहुत नहीं ले करता है -

48
00:02:39,630 --> 00:02:42,550
आप इसका इस्तेमाल बहुत जब यह अपनी वेबसाइट को धीमा नहीं करता है.

49
00:02:42,550 --> 00:02:45,770
यह आप पहले से अव्यावहारिक थे कि चीजों को लागू करने की सुविधा देता है.

50
00:02:45,770 --> 00:02:47,790
कार्यक्षमता के कुछ पहलू हैं,

51
00:02:47,790 --> 00:02:51,780
एनिमेशन बनाने की तरह, जो सामान्य रूप से करने के लिए बहुत, बहुत मुश्किल होगा.

52
00:02:51,780 --> 00:02:54,300
लेकिन jQuery में वे वास्तव में बहुत सरल हैं.

53
00:02:54,300 --> 00:02:57,040
और ऐसा करने के लिए परेशान कर रहे हैं कि कुछ बातें हैं,

54
00:02:57,040 --> 00:02:59,610
जावास्क्रिप्ट में संभव, एक पोस्ट अनुरोध भेजने की तरह,

55
00:02:59,610 --> 00:03:02,190
लेकिन एक सर्वर से एक अनुरोध भेजने के लिए, यदि आप लिखना है

56
00:03:02,190 --> 00:03:04,320
कोड में से पांच या छह या सात लाइनों.

57
00:03:04,320 --> 00:03:07,200
अब आप सिर्फ एक समारोह कॉल में, कोड की एक लाइन में कर सकते हैं.

58
00:03:07,200 --> 00:03:11,790
यही कारण है कि वास्तव में आप क्या कर रहे हैं कि बहुत सारी चीज़ें आसान बनाता है.

59
00:03:11,790 --> 00:03:15,950
और सब शांत बच्चों को यह प्रयोग कर रहे हैं. कि करके, मेरा मतलब है.

60
00:03:15,950 --> 00:03:19,270
मेरा अंतिम परियोजना में पिछले वर्ष, जो, news.whrb.org है

61
00:03:19,270 --> 00:03:22,530
रेडियो स्टेशन के लिए है, जो मैं इस ब्लॉग बनाया

62
00:03:22,530 --> 00:03:29,750
जो सभी हम किया है कि पता चलता है और उनके लिए एमपी 3 फ़ाइलों को होस्ट करता है.

63
00:03:29,750 --> 00:03:32,070
आप पिछले शो के माध्यम से ब्राउज़ कर सकते हैं

64
00:03:32,070 --> 00:03:34,130
और यह सब jQuery का उपयोग किया है. आप बता सकते हैं

65
00:03:34,130 --> 00:03:37,340
क्योंकि इन सभी एनिमेशन का, अनिवार्य रूप से.

66
00:03:37,340 --> 00:03:42,360
तुम तो अगर - आप एक नया पद बना रहे हैं,

67
00:03:42,360 --> 00:03:45,980
आप इन छोटी slideDowns देखो, कि सभी सर्वर का उपयोग कर चुका है.

68
00:03:45,980 --> 00:03:49,140
और यह फीका - इतना सामान की तरह सभी, jQuery का उपयोग किया जाता है

69
00:03:49,140 --> 00:03:52,720
और आप लगातार साइट नेविगेट करने के लिए पृष्ठ पुनः लोड करने के लिए नहीं है.

70
00:03:52,720 --> 00:03:57,220
सर्वर का उपयोग कर बनाया है कि एक और अच्छी बात यह है कि इस प्रस्तुति है.

71
00:03:57,220 --> 00:03:59,700
मैं, scrolldeck नामक इस खुले स्रोत बात कर रहा हूँ

72
00:03:59,700 --> 00:04:03,250
जो किसी jQuery के शीर्ष पर लिखा है.

73
00:04:03,250 --> 00:04:04,870
आप वास्तव में स्रोत पर देखो, तो आप देख सकते हैं कि

74
00:04:04,870 --> 00:04:07,830
वे यह डॉलर के हस्ताक्षर का उपयोग कर रहे हैं, डॉलर के संकेत

75
00:04:07,830 --> 00:04:12,110
एक समारोह एक jQuery समारोह है कि सूचित करने के लिए jQuery में उपयोग किया जाता है.

76
00:04:12,110 --> 00:04:15,020
इसलिए वे jQuery के शीर्ष पर एक आवरण परिभाषित कर रहे हैं

77
00:04:15,020 --> 00:04:18,570
कि तुम इस तरह एक प्रस्तुति बनाने के लिए अनुमति देता है

78
00:04:18,570 --> 00:04:21,200
और तुम, यहाँ वे मूल jQuery का फ़ाइल सहित रहे हैं देख सकते हैं

79
00:04:21,200 --> 00:04:24,120
जो jQuery का उपयोग करना चाहते हैं तो आप शामिल करना होगा क्या है

80
00:04:24,120 --> 00:04:30,450
अपनी खुद की वेबसाइट में.

81
00:04:30,450 --> 00:04:32,790
>> उस पर मार्मिक, कैसे आप इसे स्थापित करते हैं?

82
00:04:32,790 --> 00:04:36,150
तुम बस फ़ाइल jQuery.com और डाउनलोड करने के लिए जा सकते हैं

83
00:04:36,150 --> 00:04:38,320
एक वेब निर्देशिका में जोड़ सकते हैं और यह भी शामिल है.

84
00:04:38,320 --> 00:04:42,200
तो सिर्फ शीर्ष पर, अपने HTML फ़ाइल के सिर टैग में

85
00:04:42,200 --> 00:04:45,400
अपने मुख्य HTML फ़ाइल की, सिर्फ कोड की है कि लाइन है

86
00:04:45,400 --> 00:04:49,490
आप उपयोग कर रहे हैं jQuery के जो संस्करण के लिए सही संस्करण के साथ.

87
00:04:49,490 --> 00:04:51,340
आप jQuery.com पर जाकर इसे डाउनलोड कर सकते हैं

88
00:04:51,340 --> 00:04:55,130
", डाउनलोड jQuery के" क्लिक करें और आपको यह मिल गया है. बस.

89
00:04:55,130 --> 00:04:58,880
और वास्तव में, हम यह कैसा लग रहा है पर एक नज़र ले जा सकते हैं.

90
00:04:58,880 --> 00:05:01,080
आप यहाँ डाउनलोड पर क्लिक करते हैं, jQuery के इस है.

91
00:05:01,080 --> 00:05:05,260
यह आप के लिए सभी जादू सामान है कि सिर्फ एक बड़ा जावास्क्रिप्ट फ़ाइल है.

92
00:05:05,260 --> 00:05:09,270
इस सब पर पठनीय नहीं है जो minified संस्करण है.

93
00:05:09,270 --> 00:05:13,180
तुम भी पठनीय है, जो विकास के संस्करण पर देख सकते हैं

94
00:05:13,180 --> 00:05:15,370
लेकिन अभी भी बहुत, बहुत लंबा.

95
00:05:15,370 --> 00:05:17,980
यह वहाँ में सामान का एक बहुत कुछ है.

96
00:05:17,980 --> 00:05:20,240
तुम भी इसके बारे में गूगल की मेजबानी संस्करण के लिए लिंक कर सकते हैं.

97
00:05:20,240 --> 00:05:23,820
तो यह है कि आप बस इसे प्रदान करने के लिए गूगल पर भरोसा करने की अनुमति देंगे.

98
00:05:23,820 --> 00:05:29,310
वे हर समय उपलब्ध इसके बारे में हर संस्करण प्रदान करते हैं.

99
00:05:29,310 --> 00:05:31,530
तो आप शायद यह आप के लिए होस्ट करने के लिए गूगल पर भरोसा कर सकते हैं.

100
00:05:31,530 --> 00:05:33,270
या फिर आप jQuery के स्वयं के नवीनतम संस्करण के लिए लिंक कर सकते हैं.

101
00:05:33,270 --> 00:05:36,400
वे हमेशा नवीनतम संस्करण के लिए अद्यतन किया गया है कि एक यूआरएल है.

102
00:05:36,400 --> 00:05:40,850
, यह jquery-नवीनतम है, और उस के साथ एक समस्या है

103
00:05:40,850 --> 00:05:44,350
जो है कि अगर अद्यतन jQuery और पिछले कार्यक्षमता के कुछ

104
00:05:44,350 --> 00:05:47,250
वे, retrograded या पदावनत हो जाता था

105
00:05:47,250 --> 00:05:49,620
यह नहीं हो सकता है - यह अब समर्थित नहीं करने के लिए शुरू हो सकता है.

106
00:05:49,620 --> 00:05:52,940
आप, संस्करण 1.8.2 का उपयोग कर एक वेबसाइट लिखना तो अगर

107
00:05:52,940 --> 00:05:55,000
समय संस्करण 2.7 बाहर आता है

108
00:05:55,000 --> 00:05:57,000
आप ने लिखा कार्यों में से कुछ काम नहीं करते.

109
00:05:57,000 --> 00:05:59,930
तो यह 32 केबी फाइल सिर्फ डाउनलोड करने के लिए बेहतर है

110
00:05:59,930 --> 00:06:04,100
अपने वेब पेज पर डाल दिया, और यह हमेशा के लिए काम करेंगे.

111
00:06:04,100 --> 00:06:07,450
>> मुझे आगे जाना है और jQuery के वास्तविक कार्यक्षमता के बारे में बात शुरू करने के लिए जा रहा हूँ.

112
00:06:07,450 --> 00:06:13,090
पहली बात यह है कि चयनकर्ताओं है. यह jQuery के शुरू में प्रदान करने के लिए नियोजित किया गया था क्या है.

113
00:06:13,090 --> 00:06:15,500
और आप को देखने के लिए प्रलेखन पर क्लिक कर सकते हैं

114
00:06:15,500 --> 00:06:18,690
मैं को कवर करने जा रहा हूँ चयनकर्ताओं के लिए विस्तृत दस्तावेज.

115
00:06:18,690 --> 00:06:24,120
चयनकर्ताओं के पीछे विचार यह है कि आप एक पृष्ठ पर HTML तत्वों का चयन कर सकते हैं.

116
00:06:24,120 --> 00:06:28,790
एक पेज पर तत्वों आईडी और वर्गों और उन्हें अन्य की पहचान पहलुओं है.

117
00:06:28,790 --> 00:06:30,500
वहाँ भी - अलग आदेशों में they're.

118
00:06:30,500 --> 00:06:32,570
वे एक दूसरे के अंदर नेस्ट रहे हैं समय से कुछ.

119
00:06:32,570 --> 00:06:38,120
JQuery आप पेज से तत्वों को पुनः प्राप्त है कि सरल प्रश्नों का निर्माण करने की अनुमति देता है.

120
00:06:38,120 --> 00:06:41,890
तो फिर तुम jQuery के कार्यों का उपयोग कर इन तत्वों में हेरफेर कर सकते हैं

121
00:06:41,890 --> 00:06:43,990
हम बाद में मिल जाएगा हेरफेर अनुभाग जो है.

122
00:06:43,990 --> 00:06:46,040
आप एचटीएमएल, सीएसएस बदल, बदल सकते हैं

123
00:06:46,040 --> 00:06:50,500
आप भी चेतन और कुछ घटनाओं पर सक्रिय कार्यों को जोड़ सकते हैं.

124
00:06:50,500 --> 00:06:52,710
कुछ क्लिक किया है तो, उदाहरण के लिए, यदि आप ऐसा करने के लिए कुछ करना चाहते हैं

125
00:06:52,710 --> 00:06:55,210
आप jQuery के रूप में अच्छी तरह से उपयोग कर ऐसा कर सकते हैं.

126
00:06:55,210 --> 00:06:57,380
और तत्वों का चयन करने के तरीकों की एक बड़ी संख्या है.

127
00:06:57,380 --> 00:07:00,310
उनमें से अधिकांश, मैं इस्तेमाल कभी नहीं किया है, लेकिन बुनियादी वाले हैं

128
00:07:00,310 --> 00:07:02,340
जो बहुत महत्वपूर्ण हैं.

129
00:07:02,340 --> 00:07:05,750
तत्व चयनकर्ता, उदाहरण के लिए, यदि आप कुछ भी बस का चयन कर रहे हैं

130
00:07:05,750 --> 00:07:10,640
कि एक div है - मैं वास्तव में इस स्लाइड प्रस्तुति के लिए खुला कोड है.

131
00:07:10,640 --> 00:07:13,450
तो, उदाहरण के लिए, यहाँ पहली स्लाइड है.

132
00:07:13,450 --> 00:07:17,430
यहाँ हम एक div है. हम वास्तव पृष्ठ पर सभी divs का चयन करते हैं,

133
00:07:17,430 --> 00:07:22,300
यह सिर्फ हमें इस फाइल में मौजूद सभी divs की एक सरणी देता हूँ.

134
00:07:22,300 --> 00:07:27,040
आईडी चयनकर्ता आप किसी दिए गए आईडी के साथ कुछ का चयन की सुविधा देता है.

135
00:07:27,040 --> 00:07:32,230
यह, उदाहरण के लिए, इस बात आईडी "क्या" है तो अगर

136
00:07:32,230 --> 00:07:37,160
और हम # क्या बजाय कुछ आईडी के साथ ऐसा किया,

137
00:07:37,160 --> 00:07:42,920
यह सिर्फ एक ही तत्व है और उस पृष्ठ के उस तत्व है कि एक सरणी वापस कर देगा.

138
00:07:42,920 --> 00:07:45,490
हम भी होने से चयनकर्ताओं को इस तरह से गठजोड़ कर सकते हैं

139
00:07:45,490 --> 00:07:48,260
केवल divs हैं कि आईडी के साथ चीजों का चयन करें.

140
00:07:48,260 --> 00:07:51,810
हाँ तो. केवल कि आईडी कि divs का चयन करें.

141
00:07:51,810 --> 00:07:55,260
वर्ग के लिए आप सिर्फ एक बिंदु का उपयोग करें, यह सीएसएस के रूप में एक ही बात है.

142
00:07:55,260 --> 00:07:57,500
वंश का भी काम करता है, आप कुछ वर्ग है, इसलिए यदि

143
00:07:57,500 --> 00:08:00,170
उदाहरण के लिए, तो - और यह कि यह भीतर तत्वों नेस्ट किया गया है

144
00:08:00,170 --> 00:08:03,260
वहाँ कुछ वर्ग है और यह एक पृष्ठ पर लिंक करने के लिए एक लंगर टैग है,

145
00:08:03,260 --> 00:08:08,510
आप लिंक को पुनः प्राप्त करने के लिए इस वाक्य रचना का उपयोग कर सकते हैं.

146
00:08:08,510 --> 00:08:12,420
तुम भी एक साथ कई चीजों का चयन कर सकते हैं, बस अल्पविराम से अलग करें,

147
00:08:12,420 --> 00:08:17,360
आप चाहें तो किसी भी चयनकर्ता का उपयोग करें, और आप एक ही सरणी में एक ही बार में उन सभी का चयन करेंगे.

148
00:08:17,360 --> 00:08:19,650
और फिर भी चयनकर्ता नहीं है, इसलिए आप सभी divs का चयन कर सकते हैं

149
00:08:19,650 --> 00:08:24,210
कुछ विशिष्ट वर्ग नहीं है कि.

150
00:08:24,210 --> 00:08:28,790
और कहा कि अभी इस चयन कैसे काम करता है के लिए एक परिचय प्राप्त करने के लिए एक उपयोगी तरीका है.

151
00:08:28,790 --> 00:08:32,270
मैं एक दूसरे में कुछ ठोस उदाहरण दिखाता हूँ.

152
00:08:32,270 --> 00:08:35,480
>> उन्नत चयनकर्ताओं हैं - ये सिर्फ कुछ उदाहरण हैं.

153
00:08:35,480 --> 00:08:38,840
वहाँ इन के दर्जनों रहे हैं, लेकिन आप सभी छवि टैग का चयन करना चाहते हैं

154
00:08:38,840 --> 00:08:42,799
कुछ तत्व के भीतर, तो आप सिर्फ कार्य करें: छवि.

155
00:08:42,799 --> 00:08:45,340
तुम, उदाहरण के लिए, भले ही तत्वों का चयन करना चाहते हैं उनमें से 20 तो नहीं हुई हैं,

156
00:08:45,340 --> 00:08:48,290
आप, 0, 2, 4, 6 और इतने पर चयन करना चाहते हैं

157
00:08:48,290 --> 00:08:51,630
भी, या आप भी कर सकते हैं: आप कर अजीब.

158
00:08:51,630 --> 00:08:55,470
इन छद्म चयनकर्ताओं कर रहे हैं, जो वे वास्तव में गणना का मतलब है कि

159
00:08:55,470 --> 00:09:00,960
हर दूसरे तत्व के बजाय सिर्फ जा रहा है और उनमें से सभी का चयन करने से.

160
00:09:00,960 --> 00:09:05,510
आप भी कर सकते हैं - प्रत्येक तत्व भी विशिष्ट गुण हो सकता है.

161
00:09:05,510 --> 00:09:10,580
तो, उदाहरण के लिए, कक्षा = केंद्र भी एक गुण है.

162
00:09:10,580 --> 00:09:16,500
इस लंगर टैग के लिए, उत्तरी अमरीका, हाइपरटेक्स्ट संदर्भ, यह भी एक गुण है.

163
00:09:16,500 --> 00:09:21,150
यह वास्तव में सामान्य है - तो आप एक विशेष पृष्ठ या बस के लिए लिंक है कि कुछ का चयन कर सकते हैं.

164
00:09:21,150 --> 00:09:25,410
क्या आप चाहते हैं कि किसी विशेषता के साथ कुछ भी चुन सकते हैं.

165
00:09:25,410 --> 00:09:27,470
और फिर, भी, गुण होता है.

166
00:09:27,470 --> 00:09:30,420
तुम, उदाहरण के लिए, सभी इनपुट तत्वों का चयन करना चाहता था

167
00:09:30,420 --> 00:09:32,700
कि, उन के नाम के रूप में शब्द "पास" है

168
00:09:32,700 --> 00:09:37,560
एक पृष्ठ एक इनपुट पाठ ब्लॉक है अगर

169
00:09:37,560 --> 00:09:41,050
कि आप का चयन कर सकता है एक तरह से होगा कि "पासवर्ड," कहा जाता है.

170
00:09:41,050 --> 00:09:43,020
और कई और अधिक कर रहे हैं. तुम आगे बढ़ो और प्रलेखन पर देख सकते हैं

171
00:09:43,020 --> 00:09:46,950
और यह कैसे काम करता है के विशिष्ट उदाहरण देखें.

172
00:09:46,950 --> 00:09:48,840
>> अगली बात डोम हेरफेर है.

173
00:09:48,840 --> 00:09:52,500
हम तत्वों का चयन करने के बाद, हम वास्तव में उन लोगों के साथ सामान करना चाहते हैं जाएगा.

174
00:09:52,500 --> 00:09:55,500
अब तक हम सभी को उस पर ध्यान दिया है, लेकिन यह नहीं है कि आप प्रलेखन को देखो,

175
00:09:55,500 --> 00:09:57,950
हम क्या कर सकते हैं कि वास्तव में एक बहुत कुछ है.

176
00:09:57,950 --> 00:10:02,900
इस बिंदु पर, हम इस प्रस्तुति पर तत्वों का चयन करने के लिए जा रहे हैं

177
00:10:02,900 --> 00:10:04,890
और उन्हें सर्वर का उपयोग कर हेरफेर.

178
00:10:04,890 --> 00:10:08,290
इस सर्वर का उपयोग कर कार्यान्वित किया जाता है, क्योंकि हम jQuery पुस्तकालय का उपयोग किया है

179
00:10:08,290 --> 00:10:13,580
और हम इस कोड के भीतर उन कार्यों का उपयोग कर सकते हैं.

180
00:10:13,580 --> 00:10:16,200
आप के बारे में पता नहीं हो सकता कि एक उपयोगी चीज कंसोल है.

181
00:10:16,200 --> 00:10:19,340
और गूगल क्रोम मैं उपयोग कर रहा हूँ क्या है. आप ऑल्ट आदेश जम्मू दबा सकते हैं

182
00:10:19,340 --> 00:10:21,720
या वैकल्पिक नियंत्रण जम्मू कंसोल खोलने के लिए.

183
00:10:21,720 --> 00:10:26,130
Firefox में मैं यह कमांड पारी कश्मीर या नियंत्रण बदलाव के बारे में सोच

184
00:10:26,130 --> 00:10:28,880
सफारी में आप कुछ सेटिंग्स बदल जाना है.

185
00:10:28,880 --> 00:10:35,460
वहाँ आप यह करना चाहते हैं, तो एक कड़ी है, लेकिन मैं क्रोम या फ़ायरफ़ॉक्स रही सलाह देते हैं.

186
00:10:35,460 --> 00:10:37,750
तो चलो कंसोल को खोलने चलो, यह यहाँ नीचे है.

187
00:10:37,750 --> 00:10:41,170
यह आप मूल रूप से कुछ भी तुम चाहते बस के लिए अनुमति देता है.

188
00:10:41,170 --> 00:10:45,100
तो आप सिर्फ एक चर नामक एक्स बनाने में टाइप कर सकते हैं

189
00:10:45,100 --> 00:10:49,200
एक्स = 5, एक्स 2 में क्या देखते हैं.

190
00:10:49,200 --> 00:10:57,670
आप सीएस की तरह कुछ कर भी सकते हैं + चलो देखते हैं, एक्स CS50 होगा कि + 45,.

191
00:10:57,670 --> 00:11:00,530
तुम बस कुछ ठेठ जावास्क्रिप्ट चीजें कर सकते हैं.

192
00:11:00,530 --> 00:11:02,730
लेकिन आप भी यहाँ में jQuery कर सकते हैं.

193
00:11:02,730 --> 00:11:06,200
>> तो यहाँ यह पहला पहलू को देखो.

194
00:11:06,200 --> 00:11:09,500
हम एक स्ट्रिंग है जो एचटीएमएल, कहा जाता है एक चर बनाने के लिए जा रहे हैं.

195
00:11:09,500 --> 00:11:15,890
यह कुछ नया पाठ कहा जाता है कि, उस में एक पैरा टैग है.

196
00:11:15,890 --> 00:11:19,420
इसलिए हम इस HTML है, यह अनुच्छेद टैग में, कुछ नया पाठ है.

197
00:11:19,420 --> 00:11:21,800
अब हम वास्तव में पृष्ठ में जोड़ना चाहते हैं.

198
00:11:21,800 --> 00:11:28,310
मैं इस अनुच्छेद के लिए HTML, यहाँ इस शीर्षक, संलग्न आईडी है कि ताकि यह निर्धारित किया है.

199
00:11:28,310 --> 00:11:32,320
हम तो संलग्न आईडी का चयन करें और यदि यह करने के लिए संलग्न

200
00:11:32,320 --> 00:11:34,560
मैं अभी बनाया एचटीएमएल चर,

201
00:11:34,560 --> 00:11:40,370
यह सही है कि इस अनुच्छेद टैग के बाद, अंत में है कि एचटीएमएल बढ़ जाएगा.

202
00:11:40,370 --> 00:11:43,730
हम ऐसा इसलिए यदि - हम इस अनुच्छेद चयनित

203
00:11:43,730 --> 00:11:47,590
और हम, मैं सिर्फ जोड़ा एचटीएमएल चर के साथ संलग्न समारोह बुलाया है

204
00:11:47,590 --> 00:11:50,960
यह पेज पर वहीं कि नया पाठ जोड़ देगा.

205
00:11:50,960 --> 00:11:54,970
हम यह भी है कि यह उस तत्व की शुरुआत में, पहले जाना होगा, जिसका मतलब है prepend कर सकते हैं.

206
00:11:54,970 --> 00:11:58,290
तो शुरुआत है और बाद में कुछ नए पाठ है.

207
00:11:58,290 --> 00:12:01,660
मुझे आगे जाना है और मैं अभी किया है इस सामान से छुटकारा पाने के लिए ताज़ा कर सकते हैं.

208
00:12:01,660 --> 00:12:05,280
लेकिन यह है कि आप पहले जोड़ें का उपयोग कर सकते हैं का एक उदाहरण है और तरीकों संलग्न

209
00:12:05,280 --> 00:12:08,910
पृष्ठ पर सामग्री में हेरफेर करने के लिए, कुछ HTML जोड़ना.

210
00:12:08,910 --> 00:12:11,080
>> आप भी कक्षाओं में बदल सकते हैं.

211
00:12:11,080 --> 00:12:14,970
पीछे इस शैली फ़ाइल में, मैं जीत वर्ग के लिए इस बनाया है

212
00:12:14,970 --> 00:12:19,990
उस पाठ रंग लाल, कुछ पृष्ठभूमि रंग, और एक पाठ छाया है.

213
00:12:19,990 --> 00:12:23,810
यह भयंकर लग रहा है, लेकिन मैं वास्तव में यह कर सकते हैं -

214
00:12:23,810 --> 00:12:26,410
इस पैरा वर्ग आईडी से मेल खाती है.

215
00:12:26,410 --> 00:12:29,860
तो मैं जीत के लिए वर्ग जोड़ सकते हैं.

216
00:12:29,860 --> 00:12:31,870
मैं कंसोल में इस पर अमल कर सकते हैं

217
00:12:31,870 --> 00:12:35,480
और कि उस वर्ग जोड़ देगा, और अब यह भयंकर लग रहा है, के रूप में की उम्मीद है.

218
00:12:35,480 --> 00:12:39,680
सीएसएस स्वतः वर्गों है कि आप के लिए लागू किया जाता है -

219
00:12:39,680 --> 00:12:42,680
एक वर्ग के लिए सीएसएस अगर वहाँ है, यह अपने आप लागू हो जाता है

220
00:12:42,680 --> 00:12:44,680
आप एक तत्व के वर्ग बदलते हैं.

221
00:12:44,680 --> 00:12:49,230
तो हम बस हटायें वर्ग का उपयोग कर निकाल सकते हैं.

222
00:12:49,230 --> 00:12:53,690
आप लाल या डाला जैसे कुछ पूर्वनिर्धारित कक्षाएं, तो अगर

223
00:12:53,690 --> 00:12:55,990
और फिर आप तत्वों को उन पर लागू करना चाहते

224
00:12:55,990 --> 00:12:58,230
आप हर समय स्टाइल सभी सीएसएस क्या करने की जरूरत नहीं है.

225
00:12:58,230 --> 00:13:01,510
आप सिर्फ एक तत्व को वर्ग जोड़ सकते हैं, और तब यह स्वतः ही हो जाएगा -

226
00:13:01,510 --> 00:13:05,580
यह स्वचालित रूप से उस वर्ग के लिए उपयुक्त लग जाएगा.

227
00:13:05,580 --> 00:13:07,900
हम यह भी चीजों को दूर कर सकते हैं, तो मैं सभी divs का चयन करने के लिए जा रहा हूँ

228
00:13:07,900 --> 00:13:10,830
पृष्ठ पर और उन्हें हटा दें.

229
00:13:10,830 --> 00:13:13,990
उस तरह देखने के लिए क्या हो रहा है?

230
00:13:13,990 --> 00:13:16,170
यह कुछ भी नहीं लग रहा है, इसलिए छोड़ दिया कुछ भी नहीं है वास्तव में नहीं है.

231
00:13:16,170 --> 00:13:18,170
मेरी प्रस्तुति चला गया है.

232
00:13:18,170 --> 00:13:21,290
मैं, सौभाग्य, ताज़ा और इसे वापस ला सकता है

233
00:13:21,290 --> 00:13:24,420
यह सिर्फ एक बार चल रहा है, क्योंकि

234
00:13:24,420 --> 00:13:29,460
आप पूरी तरह से पृष्ठ से एक तत्व को नष्ट करना चाहते हैं, लेकिन लगता है कि, को दूर करने का एक उदाहरण है.

235
00:13:29,460 --> 00:13:33,180
>> तुम भी ऊपर लिख सकते हैं, और मैं पन्ने पर सभी पैरा टैग का चयन करने के लिए जा रहा हूँ

236
00:13:33,180 --> 00:13:36,850
और उन्हें अंदर जाने के लिए और वे उन में जो कुछ भी पाठ की जगह

237
00:13:36,850 --> 00:13:39,690
साथ सिर्फ शब्द "परीक्षण."

238
00:13:39,690 --> 00:13:46,520
यदि आप ऐसा करते हैं, तो आप इस परीक्षण के साथ पृष्ठ पर हर पैरा की जगह लेंगे.

239
00:13:46,520 --> 00:13:49,150
हां. वे सब परीक्षण के साथ बदल रहे हैं.

240
00:13:49,150 --> 00:13:53,270
तो उस पाठ पहुँचने और यह overwriting का एक उदाहरण है.

241
00:13:53,270 --> 00:13:57,490
आप यह भी जानकारी प्राप्त कर सकते हैं, और इस इनपुट बक्से के लिए वास्तव में अच्छा है.

242
00:13:57,490 --> 00:14:00,470
आप लोगों में सामान टाइप कर रहे हैं कि एक इनपुट बॉक्स है, तो

243
00:14:00,470 --> 00:14:03,880
लोगों को यह में सामान टाइप कर रहे हैं,

244
00:14:03,880 --> 00:14:09,030
यहाँ हम इनपुट, पाठ का एक प्रकार के साथ किसी भी इनपुट टैग का चयन करें.

245
00:14:09,030 --> 00:14:13,800
इस मामले में, पूरी प्रस्तुति में केवल एक इनपुट बॉक्स, वहाँ

246
00:14:13,800 --> 00:14:17,260
तो हम सिर्फ पहले एक का चयन करेंगे, और फिर हम उस पर वैल समारोह कॉल.

247
00:14:17,260 --> 00:14:19,570
कि, मान देता है, और एक इनपुट बॉक्स के लिए

248
00:14:19,570 --> 00:14:24,330
मूल्य इसके अंदर होने के लिए जो कुछ भी होता है बस.

249
00:14:24,330 --> 00:14:31,880
हम ऐसा करते हैं तो, यह सिर्फ स्ट्रिंग सामान देता है.

250
00:14:31,880 --> 00:14:36,860
हम और अधिक सामान लिखने के बाद फिर से इसे कहते हैं, यह और अधिक सामान में बदल जाता है.

251
00:14:36,860 --> 00:14:40,760
यही है, की जांच फिर एक इनपुट बॉक्स के तत्वों का उपयोग करने के लिए एक शानदार तरीका है, और

252
00:14:40,760 --> 00:14:45,060
यह एक मान्य ईमेल पता है, इस उदाहरण के लिए, एक मान्य दिनांक है.

253
00:14:45,060 --> 00:14:49,600
लोग इसे टाइप कर रहे हैं के रूप में तुम बस, तुरन्त सामान प्राप्त कर सकते हैं

254
00:14:49,600 --> 00:14:54,830
और फिर, यह वैध है या नहीं यह जांच एक सर्वर के लिए इसे वापस भेजने के लिए, तुम इसके साथ चाहते हैं कुछ भी करते हैं.

255
00:14:54,830 --> 00:14:57,720
और कहा कि आप उन बक्से के अंदर है क्या का उपयोग कैसे करना है.

256
00:14:57,720 --> 00:15:00,090
>> तुम भी बजाय जोड़ने की तो, सीएसएस सीधे संशोधित कर सकते हैं

257
00:15:00,090 --> 00:15:02,510
कुछ पूर्वनिर्धारित गुण है कि एक वर्ग,

258
00:15:02,510 --> 00:15:08,120
तुम सिर्फ तुम कुछ भी करना चाहते हैं जो कुछ सीएसएस जोड़ सकते हैं.

259
00:15:08,120 --> 00:15:10,350
पूरी प्रस्तुति है जो तो चलो चुनिंदा शरीर,,

260
00:15:10,350 --> 00:15:14,370
और रंग पाठ है क्या रंग को परिभाषित करता है कि संपत्ति है.

261
00:15:14,370 --> 00:15:19,420
हम लाल करने के लिए इसे बदलने के लिए, पृष्ठ में सभी पाठ लाल को बंद हो जाएगा.

262
00:15:19,420 --> 00:15:26,310
हम पृष्ठभूमि रंग नीले रंग की तरह कुछ कर सकते हैं

263
00:15:26,310 --> 00:15:30,680
वहाँ हम चले, यह सुंदर है.

264
00:15:30,680 --> 00:15:33,840
यदि आप इस के साथ चाहते हैं कुछ भी कर सकते हैं.

265
00:15:33,840 --> 00:15:39,250
सीएसएस संपत्ति का उपयोग करना, आप वास्तव में कुछ भी किसी भी समय लग रहा है कि कैसे संशोधित कर सकता है.

266
00:15:39,250 --> 00:15:41,630
अगली बात यह प्रभाव है.

267
00:15:41,630 --> 00:15:45,710
प्रभाव, मूल रूप से सीएसएस संशोधित रूप में एक ही बात कर रहे हैं

268
00:15:45,710 --> 00:15:48,870
लेकिन वे वास्तव में इसे करने के लिए कुछ अतिरिक्त एनीमेशन प्रदान करते हैं.

269
00:15:48,870 --> 00:15:53,380
तो बजाय सिर्फ रंग दिखा या छुपा कुछ या बदलने का,

270
00:15:53,380 --> 00:15:56,130
आप वास्तव में यह एनिमेटेड बना सकते हैं.

271
00:15:56,130 --> 00:16:00,760
आप इसके लिए व्यापक प्रलेखन पर एक नज़र रखना चाहते हैं, तो यहाँ प्रलेखन है.

272
00:16:00,760 --> 00:16:04,760
लेकिन मैं मुख्य लोगों को कवर करने के लिए जा रहा हूँ.

273
00:16:04,760 --> 00:16:12,030
शो और छिपाने के गुण होते हैं.

274
00:16:12,030 --> 00:16:14,510
आईडी वास्तव में इस पूरे बॉक्स से मेल खाती दिखाएं / छुपाएं,

275
00:16:14,510 --> 00:16:18,190
मैं इसे छिपाने अगर ऐसा है, तो यह सिर्फ गायब हो जाएगा.

276
00:16:18,190 --> 00:16:24,210
मैं इसे वापस आ बनाना चाहते हैं और मैं इसे फिर से दिखा सकते हैं.

277
00:16:24,210 --> 00:16:26,340
और यह वापस आ गया है. यह वास्तव में, गायब नहीं था

278
00:16:26,340 --> 00:16:30,670
मैं वास्तव में पृष्ठ से इसे दूर नहीं किया, मैं सिर्फ छुपा के लिए दृश्यता की सीएसएस गुण सेट

279
00:16:30,670 --> 00:16:34,030
ताकि आप इसे अब और नहीं देख सकता.

280
00:16:34,030 --> 00:16:39,250
वहाँ भी स्लाइड ऊपर और नीचे स्लाइड है, आप इस प्रभाव के लिए अनुमति देता है.

281
00:16:39,250 --> 00:16:47,050
यह गायब करने के लिए स्लाइड, और यह गायब हो जाता है के बाद

282
00:16:47,050 --> 00:16:53,210
आप इसे वापस आ बनाने के लिए इसे नीचे स्लाइड कर सकते हैं. और अब यह वापस आ गया है.

283
00:16:53,210 --> 00:16:57,650
फीका आईडी इस बॉक्स से मेल खाती है - जो इस फीका प्रभाव, भी है.

284
00:16:57,650 --> 00:17:01,200
मैं इसे बाहर हो पाती है, तो यह धीरे धीरे गायब हो जाएगा.

285
00:17:01,200 --> 00:17:04,490
मैं भी उस में फीका कर सकते हैं, और यह वापस आ जाएगा.

286
00:17:04,490 --> 00:17:08,930
तुम भी फीका समारोह के लिए विशिष्ट है, जो करने के लिए फीका कर सकता है.

287
00:17:08,930 --> 00:17:12,589
आप इसे आप चाहते हैं कि किसी भी विशिष्ट अस्पष्टता को फीका हो सकता है.

288
00:17:12,589 --> 00:17:16,869
आप .5 यह धीरे धीरे फीका तो, अगर यह आधे दिखाई बन जाऊँगा.

289
00:17:16,869 --> 00:17:22,630
मैं यह .1 के लिए जाना कर सकते हैं, और वापस करने के लिए 1 फिर यह पूरी तरह से दिखाई बनाने के लिए.

290
00:17:22,630 --> 00:17:24,760
वह सिर्फ तुम क्या कर सकते हैं कि एक और एनीमेशन है.

291
00:17:24,760 --> 00:17:26,750
>> टॉगल प्रभाव भी होते हैं.

292
00:17:26,750 --> 00:17:33,410
इसलिए मैं इस बॉक्स से मेल खाती है जो टॉगल आईडी, का चयन करने के लिए जा रहा हूँ

293
00:17:33,410 --> 00:17:38,970
और कि div पर आप टॉगल कॉल कर सकते हैं, यह दिख रहा है कि अगर यह अदृश्य हो जाएगा,

294
00:17:38,970 --> 00:17:42,320
यह अदृश्य है अगर यह फिर से दिखाई हो जाएगा.

295
00:17:42,320 --> 00:17:44,440
तो मैं सिर्फ दो बार इस टॉगल समारोह में कहा जाता है, पहले एक था

296
00:17:44,440 --> 00:17:48,380
छिपाने के रूप में एक ही बात, दूसरे फोन एक शो के रूप में एक ही बात थी.

297
00:17:48,380 --> 00:17:53,510
और तुम भी, एक फीका टॉगल के साथ ऐसा कर सकते हैं

298
00:17:53,510 --> 00:17:55,730
जो यह वास्तव में fades के अलावा एक ही बात करता है.

299
00:17:55,730 --> 00:17:59,410
और स्लाइड के साथ एक ही बात टॉगल.

300
00:17:59,410 --> 00:18:01,460
जंजीर प्रभाव के रूप में अच्छी तरह से कर रहे हैं, जिसका मतलब है

301
00:18:01,460 --> 00:18:05,520
आप एक तत्व का चयन करें और अभी इस पर एनीमेशन तरीकों का एक गुच्छा कहते हैं,

302
00:18:05,520 --> 00:18:07,400
आप इसे बाहर फीका करने के लिए चाहता था, तो स्लाइड नीचे,

303
00:18:07,400 --> 00:18:11,040
और फिर छिपाने के लिए और उसके बाद में फीका, यह एक पंक्ति में उन्हें क्या करना होगा.

304
00:18:11,040 --> 00:18:24,920
तो गायब हो गया, वापस आया था - किसी कारण के लिए, छिपाने नहीं हुआ.

305
00:18:24,920 --> 00:18:30,030
के लिए इसे बाहर की कोशिश करते हैं. हाँ, तो इसे बाहर फीका और फिर इसे दूर गिरावट.

306
00:18:30,030 --> 00:18:32,230
और वहाँ बहुत अधिक हैं. आप चेतन समारोह का उपयोग कर सकते हैं

307
00:18:32,230 --> 00:18:35,370
अपनी खुद की एनिमेशन बनाने के लिए, जो, काफी जटिल है

308
00:18:35,370 --> 00:18:38,790
लेकिन यह अनंत तानाना साथ प्रदान करता है.

309
00:18:38,790 --> 00:18:40,630
क्या आप चाहते हैं एनीमेशन के किसी भी प्रकार कर सकते हैं.

310
00:18:40,630 --> 00:18:44,230
तुम भी एक समय में कई एनिमेशन कतार के लिए कतार का उपयोग कर सकते हैं.

311
00:18:44,230 --> 00:18:47,340
तो, आप पृष्ठ के पार उड़ान भरने के लिए कुछ करना चाहते हैं तो

312
00:18:47,340 --> 00:18:49,860
नीचे बाईं ओर शीर्ष सही से स्लाइड, तो आप ऐसा कर सकते हैं

313
00:18:49,860 --> 00:18:55,240
और सिर्फ एक दूसरे के बाद जा रहे कार्यों का एक गुच्छा है.

314
00:18:55,240 --> 00:18:57,490
>> हम इस बारे में बात करने जा रहे हैं अगले बात की घटनाओं है.

315
00:18:57,490 --> 00:19:02,090
घटनाक्रम आप की अनुमति - अब तक, हम सिर्फ सांत्वना में बातें लिखकर दिया गया है

316
00:19:02,090 --> 00:19:04,870
और कि, ऐसा करने के लिए एक ही रास्ता है

317
00:19:04,870 --> 00:19:08,020
लेकिन एक वास्तविक पृष्ठ पर, आप करने के लिए सक्षम होने के लिए नहीं जा रहे हैं

318
00:19:08,020 --> 00:19:10,020
कंसोल में उपयोगकर्ता प्रकार की बातें करते हैं.

319
00:19:10,020 --> 00:19:12,050
आप चीजों को स्वचालित रूप से कुछ करना चाहते हैं.

320
00:19:12,050 --> 00:19:18,060
उस के लिए, आप कुछ निश्चित घटना घटित होने पर सक्रिय घटनाओं का उपयोग करने की आवश्यकता है.

321
00:19:18,060 --> 00:19:21,340
आप पूरी जानकारी के लिए दस्तावेज की जांच कर सकते हैं.

322
00:19:21,340 --> 00:19:24,030
तो चलो देखते हैं. हम बॉक्स को छुपाने या दिखाने के लिए चाहते हैं

323
00:19:24,030 --> 00:19:29,340
मैं अभी तक इसे लागू नहीं किया है, लेकिन अभी इस बटन को कुछ भी नहीं है.

324
00:19:29,340 --> 00:19:35,420
मैं वास्तविक HTML पृष्ठ पर जाने के लिए जा रहा हूँ.

325
00:19:35,420 --> 00:19:38,560
यहाँ स्लाइड है. स्लाइड के लिए एक div है.

326
00:19:38,560 --> 00:19:41,230
यह स्लाइड का वर्ग है.

327
00:19:41,230 --> 00:19:46,890
पाठ है. अब, इस बॉक्स और बॉक्स बटन है.

328
00:19:46,890 --> 00:19:52,900
कैसे हम वास्तव में यह गायब करना चाहते हैं?

329
00:19:52,900 --> 00:19:58,250
सबसे पहले, का पिटारा आईडी गायब बनाता है एक समारोह लिखने.

330
00:19:58,250 --> 00:20:01,820
इस funtion के लिए वाक्यविन्यास है, बस यह hideTheBox कहते हैं.

331
00:20:01,820 --> 00:20:06,130
उठाए जाने की कोई बहस नहीं कर रहे हैं, क्योंकि यह किसी भी तर्क नहीं ले करता है.

332
00:20:06,130 --> 00:20:08,950
हम बॉक्स आईडी का चयन कर सकते हैं.

333
00:20:08,950 --> 00:20:15,020
चयन सर्वर का उपयोग कर तो, हम, बॉक्स आईडी का चयन कर सकते हैं

334
00:20:15,020 --> 00:20:17,700
और फिर बस गायब करना.

335
00:20:17,700 --> 00:20:20,690
चलो यह बाहर फीका कर.

336
00:20:20,690 --> 00:20:27,390
हम वास्तविक कंसोल में इस समारोह में भाग गया

337
00:20:27,390 --> 00:20:33,380
हम इस समारोह को परिभाषित कर सकता है, हम hideTheBox कॉल कर सकते हैं, और यह काम करता है.

338
00:20:33,380 --> 00:20:36,650
लेकिन हम बटन वास्तव में दबाया जाता है तो यह तो होना चाहते हैं.

339
00:20:36,650 --> 00:20:40,950
ऐसा करने के लिए, हम एक घटना का उपयोग किया है.

340
00:20:40,950 --> 00:20:45,500
कुछ विशिष्ट बटन या कुछ कार्रवाई हो रहा है के लिए एक घटना से बाइंड करने के लिए,

341
00:20:45,500 --> 00:20:50,040
हम घटना को ट्रिगर किया जाएगा कि तत्व का चयन किया है -

342
00:20:50,040 --> 00:20:52,650
या कि खेद है, घटना को ट्रिगर किया जाएगा.

343
00:20:52,650 --> 00:20:57,220
>> सब से पहले तो, चलो बॉक्स बटन आईडी का चयन करें

344
00:20:57,220 --> 00:20:59,610
क्योंकि वह उस बटन के लिए, अब बटन है, और,

345
00:20:59,610 --> 00:21:02,750
हम इसे क्लिक किया है जब एक एनीमेशन बनाना चाहते हैं.

346
00:21:02,750 --> 00:21:05,040
तो इस पर क्लिक समारोह है.

347
00:21:05,040 --> 00:21:08,470
यह आप इसे करने के लिए एक समारोह बाध्य करने के लिए अनुमति देता है.

348
00:21:08,470 --> 00:21:12,320
इस समारोह में एक तर्क के रूप में एक समारोह लेता है

349
00:21:12,320 --> 00:21:14,310
हम hideTheBox समारोह में पारित कर सकते हैं

350
00:21:14,310 --> 00:21:20,950
और इस बटन क्लिक किया जाता है, जब भी उस समारोह स्वतः क्रियान्वित करेगा.

351
00:21:20,950 --> 00:21:24,850
तो यह है, हम इस बचाने के लिए, अगर मैं ताज़ा करेंगे काम करेंगे

352
00:21:24,850 --> 00:21:33,460
और - एक दूसरा, मैं माफी चाहता हूँ.

353
00:21:33,460 --> 00:21:44,770
मुझे वास्तव में इस जल्दी ठीक करने दें.

354
00:21:44,770 --> 00:21:50,680
ठीक है. हम वहाँ जाते हैं. हम बटन क्लिक करते हैं तो अब बॉक्स गायब है.

355
00:21:50,680 --> 00:21:55,470
हम भी, सिर्फ fadeToggle लिए इसे बदल सकते हैं

356
00:21:55,470 --> 00:22:00,020
बॉक्स को छुपाने या दिखाने के लिए सिर्फ इसे बदलने,

357
00:22:00,020 --> 00:22:03,850
हम ताज़ा और अगर यह भी बहुत काम करेंगे.

358
00:22:03,850 --> 00:22:08,550
हम इसे छिपा कर सकते हैं, हम भी यह दिखा सकते हैं, और कहा कि काम करने के लिए जारी रहेगा.

359
00:22:08,550 --> 00:22:12,210
हम क्या कर सकते हैं एक और बात है, हम वास्तव में इस hideTheBox समारोह को परिभाषित करने की जरूरत नहीं है

360
00:22:12,210 --> 00:22:15,050
हम क्लिक समारोह में बुलाने से पहले.

361
00:22:15,050 --> 00:22:17,640
तो बजाय समारोह को परिभाषित करने और hideTheBox बुलाने की,

362
00:22:17,640 --> 00:22:20,310
हम केवल इस बात को क्लिक किया जाता है तो यह कॉल करने के लिए जा रहे हैं.

363
00:22:20,310 --> 00:22:22,310
इसलिए हम इसे यहाँ में गुमनाम रूप से परिभाषित कर सकते हैं

364
00:22:22,310 --> 00:22:25,070
जो जावास्क्रिप्ट है कि एक विशेषता है.

365
00:22:25,070 --> 00:22:29,720
आप एक समारोह को परिभाषित कर सकते हैं, आम तौर पर, हम समारोह hideTheBox कहेंगे

366
00:22:29,720 --> 00:22:34,490
तर्क के साथ, लेकिन इसके बजाय, हम सिर्फ तर्क में कोई कार्य करते हैं कह सकते हैं

367
00:22:34,490 --> 00:22:36,870
, समारोह को परिभाषित करने के लिए घुंघराले ब्रेस शुरू

368
00:22:36,870 --> 00:22:40,780
कि धनु धनुकोष्ठक बंद, और फिर बस, यहाँ में समारोह को परिभाषित

369
00:22:40,780 --> 00:22:45,130
पहली कोष्ठक और अंतिम कोष्ठक के भीतर

370
00:22:45,130 --> 00:22:47,860
उस पर क्लिक समारोह के तर्कों के अनुरूप हैं.

371
00:22:47,860 --> 00:22:53,320
हम इस समारोह में गुजर रहे हैं तो, हम यहीं कोड की इस पंक्ति कॉपी कर सकते हैं,

372
00:22:53,320 --> 00:22:55,450
और है कि सटीक एक ही बात करेंगे.

373
00:22:55,450 --> 00:22:57,290
और अब हम इस यादृच्छिक fadeTheBox समारोह नहीं है

374
00:22:57,290 --> 00:22:59,960
कि कोई स्पष्ट कारण के लिए चारों ओर बैठा है.

375
00:22:59,960 --> 00:23:02,070
समारोह गुमनाम रूप से परिभाषित किया गया था, यह एक नाम नहीं है.

376
00:23:02,070 --> 00:23:08,060
हम बॉक्स बटन पर क्लिक करते हैं तो यह केवल अमल करेंगे.

377
00:23:08,060 --> 00:23:12,180
इतना ताज़ा एक बार फिर, एक बार, और आप यह अभी भी काम करता है देख सकते हैं.

378
00:23:12,180 --> 00:23:16,700
और कहा कि आप घटनाओं बनाने के लिए है.

379
00:23:16,700 --> 00:23:19,190
>> हम प्रयोग कर सकते हैं कि अलग अलग घटनाओं की एक बहुत हैं.

380
00:23:19,190 --> 00:23:23,540
मैं अभी कैसे ये काम आप को दिखाने के लिए कंसोल का उपयोग करने के लिए वापस स्विच करने के लिए जा रहा हूँ.

381
00:23:23,540 --> 00:23:28,210
इनमें से प्रत्येक के लिए आईडी प्रत्येक बॉक्स के अनुरूप हैं.

382
00:23:28,210 --> 00:23:33,020
इस बॉक्स को क्लिक आईडी है तो, यह एक कुंजी आईडी है, और यह एक माउस आईडी है.

383
00:23:33,020 --> 00:23:36,120
, बजाय हर बार इसे बाहर टाइपिंग, एक और बात इस कार्रवाई समारोह है कि वहाँ है

384
00:23:36,120 --> 00:23:41,610
मैं वास्तव में आगे चला गया और यहां इस कार्रवाई समारोह नीचे परिभाषित किया.

385
00:23:41,610 --> 00:23:46,860
यह hideTheBox समारोह के रूप में एक ही बात करता है.

386
00:23:46,860 --> 00:23:51,340
यह इस बॉक्स और fades इसे बाहर या अंदर fades यह या तो हो जाता है

387
00:23:51,340 --> 00:23:54,110
हम यहाँ इसका इस्तेमाल करने में सक्षम हैं और यही कारण है.

388
00:23:54,110 --> 00:24:00,350
हम इस पर क्लिक आईडी पर क्लिक करें तो, अगर हम बॉक्स गायब हो जाते हैं या फिर से प्रकट करना चाहते हैं.

389
00:24:00,350 --> 00:24:03,610
यह हम पिछले स्लाइड में था कि बटन के रूप में एक ही बात है.

390
00:24:03,610 --> 00:24:07,450
हम कहते हैं कि अब के बाद, हम इस पर क्लिक कर सकते हैं और बॉक्स गायब हो जाएगा

391
00:24:07,450 --> 00:24:10,160
तो फिर उस पर क्लिक करें और बॉक्स से बाहर निकलना होगा.

392
00:24:10,160 --> 00:24:12,480
यह बहुत आसान है. डबल क्लिक करें, एक ही बात करता है

393
00:24:12,480 --> 00:24:15,660
सिवाय इसके कि यह एक डबल क्लिक करें की आवश्यकता है.

394
00:24:15,660 --> 00:24:19,030
आप एक बार उस पर क्लिक करें और फिर उस पर क्लिक करते हैं तो कुछ नहीं, कुछ नहीं होगा

395
00:24:19,030 --> 00:24:21,140
लेकिन आप डबल जल्दी से क्लिक करते हैं, यह गायब हो जाएगा.

396
00:24:21,140 --> 00:24:23,310
आप डबल फिर से क्लिक करते हैं, यह वापस आ जाएगा.

397
00:24:23,310 --> 00:24:25,250
तो यह है कि बहुत आसान है.

398
00:24:25,250 --> 00:24:31,170
कुंजीपटल इनपुट अजीब तरह का है, मुझे लगता है कि यह वास्तव में इस उदाहरण में काम करता है नहीं लगता

399
00:24:31,170 --> 00:24:37,670
क्योंकि नीचे कुंजी, कुंजी और कुंजी प्रेस और अन्य महत्वपूर्ण कार्यों

400
00:24:37,670 --> 00:24:47,190
आप करने के लिए बाध्य क्या तत्व कोई फर्क नहीं सक्रिय करें.

401
00:24:47,190 --> 00:24:51,410
उदाहरण के लिए, मैं शरीर या पूरी तरह से कुछ और करने के लिए नीचे कुंजी बाध्य नहीं है, भले ही

402
00:24:51,410 --> 00:24:55,950
तो यह अभी भी कोई फर्क नहीं पड़ता सक्रिय होता है - यह विशिष्ट नहीं है.

403
00:24:55,950 --> 00:25:00,190
मैं इस पर क्लिक करना होगा और कुछ भी गायब करने के लिए एक कुंजी प्रेस नहीं है.

404
00:25:00,190 --> 00:25:04,470
यह भले ही मैं अंदर वर्तमान में क्या कर रहा हूँ तत्व सक्रिय हो जाएगा

405
00:25:04,470 --> 00:25:06,880
तो क्या ये वास्तव में इस उदाहरण में काम नहीं करते

406
00:25:06,880 --> 00:25:13,180
क्योंकि यह कुंजीपटल इनपुट div में इनपुट में प्रवेश के रूप में मुझे पहचान नहीं है.

407
00:25:13,180 --> 00:25:15,740
>> लेकिन आप माउस कार्यों पर नजर डालें तो,

408
00:25:15,740 --> 00:25:19,620
पहले एक मंडराना है, और यह सीएसएस का उपयोग कर इस का कुछ कर सकते हैं.

409
00:25:19,620 --> 00:25:24,280
आप सीएसएस का उपयोग आप कुछ पर जाएँ, तो आप इतना है कि यह बना सकते हैं

410
00:25:24,280 --> 00:25:28,940
फिर अपनी शैली में परिवर्तन.

411
00:25:28,940 --> 00:25:32,170
लेकिन सर्वर का उपयोग कर आप के रूप में अच्छी तरह से अन्य चीजों की शैली को बदल सकते हैं.

412
00:25:32,170 --> 00:25:37,120
तो, उदाहरण के लिए, हम इस div पर जाएँ अगर कार्रवाई कॉल करने के लिए जा रहे हैं.

413
00:25:37,120 --> 00:25:39,660
यही कारण है कि हम इसे पर जाएँ, तो बॉक्स गायब हो जाएगा मतलब है.

414
00:25:39,660 --> 00:25:42,430
हम से दूर ले जाते हैं, बॉक्स से बाहर निकलना होगा.

415
00:25:42,430 --> 00:25:45,090
हम यह कहते हैं और इसे पर जाएँ, तो बॉक्स, गायब है

416
00:25:45,090 --> 00:25:47,050
और जैसे ही हम दूर ले जाने के रूप में, यह वापस आता है.

417
00:25:47,050 --> 00:25:49,750
हम माउस आईडी पर इस मंडराना फ़ंक्शन को कॉल करते हैं,

418
00:25:49,750 --> 00:25:54,380
हम बॉक्स पर जाएँ तो जो है, तो इस बॉक्स से मेल खाती है,

419
00:25:54,380 --> 00:26:00,440
फिर बॉक्स वास्तव में गायब हो जाएगा - यह अभी कायरता जा रहा है, लेकिन है -

420
00:26:00,440 --> 00:26:06,310
हम से दूर ले जाते हैं, इसे फिर से बाहर निकलना होगा. अभी यह किसी कारण के लिए पीछे की ओर है.

421
00:26:06,310 --> 00:26:12,720
माउस दर्ज करें और माउस चाल कार्यों कुछ इसी तरह की है, लेकिन थोड़ा अलग हैं.

422
00:26:12,720 --> 00:26:16,470
माउस माउस के रूप में उम्मीद की बॉक्स, में प्रवेश करती है जब केवल सक्रिय है दर्ज करें.

423
00:26:16,470 --> 00:26:19,210
आप इसे में ले जाते हैं तो, यह गायब हो जाएगा.

424
00:26:19,210 --> 00:26:23,210
आप दूर ले जाते हैं लेकिन यह फिर से प्रकट नहीं होगा, तुम वापस आने के लिए इसके लिए इसे पर वापस जाने के लिए होगा.

425
00:26:23,210 --> 00:26:25,590
सक्रिय करेंगे जो माउस चाल समारोह, वहाँ भी

426
00:26:25,590 --> 00:26:29,300
माउस बॉक्स में भी मौजूद है जब भी.

427
00:26:29,300 --> 00:26:32,430
तो यह बस में और बाहर लुप्त होती जा रही पर रखेंगे.

428
00:26:32,430 --> 00:26:35,660
और यह वास्तव में लॉगिंग है - इसे बाहर की यह बस में लुप्त होती है की तरह लगता है और,

429
00:26:35,660 --> 00:26:39,140
लेकिन यह वास्तव में, यह एक बहुत अधिक कार्रवाई लॉगिंग है

430
00:26:39,140 --> 00:26:43,550
तो आप दूर ले जाते हैं जब यह सिर्फ यह उनमें से एक हजार की तरह लॉग क्योंकि जा रहा रखेंगे.

431
00:26:43,550 --> 00:26:46,620
शायद नहीं एक हजार. शायद पाँच.

432
00:26:46,620 --> 00:26:50,200
यह है कि अधिक से अधिक लॉग.

433
00:26:50,200 --> 00:26:53,280
बिंदु, सभी माउस कार्रवाई है, उनमें से एक बहुत कुछ कर रहे हैं.

434
00:26:53,280 --> 00:26:55,480
, आप अन्य लोगों पर पढ़ सकते हैं, लेकिन वे सब थोड़ा अलग हैं

435
00:26:55,480 --> 00:26:57,700
आप की जरूरत है जो भी एक और आप चुन सकते हैं

436
00:26:57,700 --> 00:27:02,130
विशिष्ट जो भी उद्देश्य के लिए आप क्या करने की कोशिश कर रहे हैं.

437
00:27:02,130 --> 00:27:05,060
>> मैं इस बारे में बात करने जा रहा हूँ अगले बात AJAX है.

438
00:27:05,060 --> 00:27:09,340
AJAX, मुझे लगता है कि हम इस साल बहुत गहराई के रूप में जावास्क्रिप्ट को कवर नहीं था पता

439
00:27:09,340 --> 00:27:11,770
तो मैं बस एक मिनट के लिए सामान्य रूप में AJAX के बारे में बात करने जा रहा हूँ.

440
00:27:11,770 --> 00:27:15,210
AJAX अतुल्यकालिक जावास्क्रिप्ट और XML के लिए खड़ा है.

441
00:27:15,210 --> 00:27:19,030
यह मूल रूप से, उदाहरण के लिए, यदि आप फेसबुक पर हैं और जब यह, आप एक अधिसूचना धक्का है

442
00:27:19,030 --> 00:27:23,060
AJAX के अपने वेब ब्राउज़र पर चल रहा है क्योंकि वह है.

443
00:27:23,060 --> 00:27:25,800
कृपया अपने वेब ब्राउज़र वास्तव सेकंड के हर जोड़े

444
00:27:25,800 --> 00:27:29,420
उन्हें पूछ, फेसबुक के सर्वर के लिए जा रहा, आप मेरे लिए कुछ भी नया नहीं है तुम्हारे पास

445
00:27:29,420 --> 00:27:31,980
और फिर यह तुम्हारे पास वापस आता है.

446
00:27:31,980 --> 00:27:36,320
यह आपको एक सर्वर के लिए अनुरोध भेजने के लिए अनुमति देता है

447
00:27:36,320 --> 00:27:38,660
वास्तव में पृष्ठ लोड करने के लिए बिना.

448
00:27:38,660 --> 00:27:42,040
तो सामान्य रूप से, आप बस PHP और एक डेटाबेस का उपयोग कर रहे हैं,

449
00:27:42,040 --> 00:27:45,480
आप सर्वर से नई जानकारी प्राप्त कर सकते हैं इससे पहले कि आप पृष्ठ ताज़ा करने के लिए है.

450
00:27:45,480 --> 00:27:48,770
लेकिन AJAX का उपयोग कर, आप लगातार कि नई जानकारी के लिए खींच सकते हैं

451
00:27:48,770 --> 00:27:52,250
आप एक बटन या ऐसा कुछ भी क्लिक करने पर या इसके लिए खींच.

452
00:27:52,250 --> 00:27:56,140
, हमें पृष्ठ reloading बिना अनुरोध भेजने के लिए अनुमति देता है यह तो

453
00:27:56,140 --> 00:27:58,130
और हम प्राप्त या अनुरोध पोस्ट या तो उपयोग कर सकते हैं.

454
00:27:58,130 --> 00:28:05,370
>> अनुरोधों आप को अगर Google.com के लिए, उदाहरण के लिए, हो जाओ

455
00:28:05,370 --> 00:28:10,900
और क्ष = परीक्षण करते हैं. यही कारण है कि उन्हें एक क्वेरी परीक्षा दे रही है.

456
00:28:10,900 --> 00:28:15,890
यह यूआरएल ही में उन मानकों में गुजर रहा है और क्योंकि वह एक अनुरोध प्राप्त है.

457
00:28:15,890 --> 00:28:19,250
आप पोस्ट के माध्यम से उन्हें भेज रहे हैं के रूप में एक पोस्ट अनुरोध है.

458
00:28:19,250 --> 00:28:22,500
आप एक पत्र में डाल दिया और उन्हें इसे बंद जहाज की तरह यह है

459
00:28:22,500 --> 00:28:25,140
लेकिन वे वास्तव में सामग्री नहीं दिख रहा है. वे URL में दिखाई नहीं दे रहे हैं.

460
00:28:25,140 --> 00:28:31,040
आप सीधे में नहीं लिख सकते हैं, तो आप लगभग चुपके से भेज दिया है.

461
00:28:31,040 --> 00:28:33,880
यह एक पोस्ट में है.

462
00:28:33,880 --> 00:28:38,660
लेकिन सर्वर का उपयोग कर, तुम जाओ और अनुरोध पोस्ट कर सकते हैं

463
00:28:38,660 --> 00:28:42,740
और अधिक आसानी से आप सामान्य रूप से सिर्फ सादा जावास्क्रिप्ट का उपयोग कर सकता से.

464
00:28:42,740 --> 00:28:50,140
आप प्राप्त अनुरोधों का उपयोग कर एपीआई क्वेरी कर सकते हैं, और आप भी प्रवेश जानकारी के लिए जाँच कर सकते हैं.

465
00:28:50,140 --> 00:28:54,400
अगले पृष्ठ पर, मैं जो "दोपहर के भोजन के लिए क्या है?" पूछता है, यह बनाया

466
00:28:54,400 --> 00:28:58,230
हार्वर्ड भोजन एपीआई का उपयोग कर रहा है, तो वह ऊपर खींच देते हैं.

467
00:28:58,230 --> 00:29:01,840
यह आपको एक एपीआई के लिए एक अनुरोध प्राप्त करने के लिए jQuery का उपयोग कर सकते हैं की सिर्फ एक उदाहरण है

468
00:29:01,840 --> 00:29:04,200
और इसे से वापस जानकारी मिलती है.

469
00:29:04,200 --> 00:29:07,090
तो हम आज के लिए मेनू देखना चाहते हैं

470
00:29:07,090 --> 00:29:10,560
और हम दोपहर के भोजन के लिए क्या देखना चाहते हैं.

471
00:29:10,560 --> 00:29:16,500
यहाँ jQuery में एक अनुरोध प्राप्त बनाने के लिए यूआरएल है.

472
00:29:16,500 --> 00:29:18,600
आप $ का उपयोग करें. समारोह मिलता है.

473
00:29:18,600 --> 00:29:22,290
पहला तर्क आप क्वेरी कर रहे हैं तो क्या वास्तव में, यूआरएल है.

474
00:29:22,290 --> 00:29:27,200
फिर अगले तर्क अनुरोध प्राप्त पूरा हो गया है जब निष्पादित करता है कि एक समारोह है.

475
00:29:27,200 --> 00:29:29,980
तो अगर आप सर्वर से कुछ अनुरोध भेजने के लिए इसे वापस आने के लिए इंतजार.

476
00:29:29,980 --> 00:29:33,770
यह वापस आता है, जब आप सर्वर से वापस आ गया है कि डेटा के साथ कुछ कार्रवाई करने के लिए जा रहे हैं.

477
00:29:33,770 --> 00:29:37,520
के आगे जाना है और इस के साथ ही कोड कर दें.

478
00:29:37,520 --> 00:29:42,110
मैं उद्देश्य पर, या तो यह कोड नहीं था.

479
00:29:42,110 --> 00:29:46,660
यहाँ TODO है. सबसे पहले, की घटना बाइंडिंग का उपयोग करते हैं

480
00:29:46,660 --> 00:29:50,820
इस बटन दबाया जाता है, जब हम एक अनुरोध प्राप्त विदा सकें.

481
00:29:50,820 --> 00:29:53,410
और कहा कि कुछ डेटा के साथ अनुरोध रिटर्न मिलता है,

482
00:29:53,410 --> 00:29:57,290
हम इस भोजन की जानकारी आईडी div में यह लिखने जा रहे हैं.

483
00:29:57,290 --> 00:30:02,860
सबसे पहले, चलो खाना बटन आईडी का चयन करते हैं.

484
00:30:02,860 --> 00:30:07,320
क्लिक करते हैं, तो हम यह कुछ करना चाहते हैं.

485
00:30:07,320 --> 00:30:11,930
चलो बस से पहले के रूप में, यह एक गुमनाम fuction बनाने.

486
00:30:11,930 --> 00:30:15,550
उन घुंघराले ब्रेसिज़ लपेट कर सकते हैं,

487
00:30:15,550 --> 00:30:18,530
और इस बटन दबाया जाता है, जब हम एक अनुरोध प्राप्त भेजना चाहते हैं

488
00:30:18,530 --> 00:30:20,750
दोपहर के भोजन के लिए है कि क्या जांच करने के लिए.

489
00:30:20,750 --> 00:30:24,970
करना है कि, हम सिर्फ $ में टाइप कर सकते हैं. मिलता है.

490
00:30:24,970 --> 00:30:28,850
यह डॉलर के हस्ताक्षर का उपयोग कर, एक jQuery समारोह है.

491
00:30:28,850 --> 00:30:31,430
यह तर्क की एक जोड़ी लेता है. पहले एक यूआरएल है

492
00:30:31,430 --> 00:30:34,450
दूसरा एक कॉलबैक समारोह, कहा जाता है कि समारोह है

493
00:30:34,450 --> 00:30:37,740
अनुरोध है कि वास्तव में देता है.

494
00:30:37,740 --> 00:30:39,890
बस पहले यूआरएल का निर्माण करते हैं.

495
00:30:39,890 --> 00:30:44,650
हम दाऊद ने लिखा है कि एपीआई से इसे प्राप्त कर सकते हैं.

496
00:30:44,650 --> 00:30:51,360
यहां जा रहे हैं, हम यह food.cs50.net/api/1.3/menus है कि देख सकते हैं

497
00:30:51,360 --> 00:30:54,140
और फिर आप बस आप चाहते हैं कि मापदंडों के नामों में से गुजरती हैं.

498
00:30:54,140 --> 00:30:57,760
तो पैरामीटर मान 1 1 है.

499
00:30:57,760 --> 00:31:00,910
यह मानक तारीख की तरह लग रहा है, आज की तारीख, चूक शुरू

500
00:31:00,910 --> 00:31:03,110
आप कुछ भी, और भी समाप्ति तिथि चूक दर्ज नहीं करते हैं

501
00:31:03,910 --> 00:31:05,930
आज तक आप कुछ भी दर्ज नहीं करते हैं.

502
00:31:05,930 --> 00:31:10,790
यही कारण है कि हम क्या चाहते हैं. हम सिर्फ आज के लिए जानकारी प्राप्त करना चाहते हैं.

503
00:31:10,790 --> 00:31:12,950
>> हम प्रारूप JSON में होना चाहता हूँ.

504
00:31:12,950 --> 00:31:15,570
वह सिर्फ मनमाना है, क्या आप चाहते हैं कि किसी भी रूप में उपयोग कर सकते हैं.

505
00:31:15,570 --> 00:31:18,950
आप CSV का उपयोग कर सकते हैं, लेकिन JSON जावास्क्रिप्ट वस्तु संकेतन है.

506
00:31:18,950 --> 00:31:24,150
जावास्क्रिप्ट इसका क्या मतलब समझने के लिए यह बहुत आसान है

507
00:31:24,150 --> 00:31:27,110
और हम और अधिक आसानी से इस तरह से इसे बाहर प्रिंट कर सकते हैं.

508
00:31:27,110 --> 00:31:30,490
तो चलो JSON में यह अनुरोध करते हैं, और चलो अनुरोध दोपहर का भोजन.

509
00:31:30,490 --> 00:31:37,660
= दोपहर के भोजन के भोजन तो. बस उस URL लिखने के लिए, हम यहाँ वापस जाओ.

510
00:31:37,660 --> 00:31:41,290
मेनू है. पहली पैरामीटर उत्पादन = JSON है

511
00:31:41,290 --> 00:31:44,640
क्योंकि कि हम क्या चाहते हैं, और आप एक साथ मापदंडों को अलग 'और.'

512
00:31:44,640 --> 00:31:48,940
दूसरा पैरामीटर है - मुझे याद नहीं है.

513
00:31:48,940 --> 00:31:52,170
भोजन. और हम भोजन = दोपहर के भोजन के लिए चाहते हैं.

514
00:31:52,170 --> 00:31:57,390
आप इसे अपने ब्राउज़र में टाइपिंग और इसे करने के लिए जा रहा द्वारा इस यूआरएल परीक्षण कर सकते हैं.

515
00:31:57,390 --> 00:32:03,120
यह आपको कुछ उत्पादन दे देंगे. यह सिर्फ दोपहर के भोजन के लिए है कि सामान का एक गुच्छा है.

516
00:32:03,120 --> 00:32:10,410
यह इस बदसूरत प्रारूप में है. हम एक बेहतर स्वरूप में हमारे पृष्ठ पर मुद्रित करना चाहते हैं.

517
00:32:10,410 --> 00:32:12,580
URL सही है तो, अब हम सिर्फ एक समारोह लिखने की जरूरत

518
00:32:12,580 --> 00:32:18,300
अनुरोध सफल है जब वापस बुलाने के लिए.

519
00:32:18,300 --> 00:32:20,430
इस समारोह वास्तव में एक बहस का समय लगेगा. यह डेटा हो जाएगा.

520
00:32:20,430 --> 00:32:25,650
डेटा अनुरोध प्राप्त किया जाता है के बाद अनुरोध प्राप्त से वापस आता है.

521
00:32:25,650 --> 00:32:28,860
हम घुंघराले ब्रेसिज़ कर सकते हैं, यहां हम गुमनाम समारोह लिखने

522
00:32:28,860 --> 00:32:33,900
कि हम वापस जानकारी मिलती है कि डेटा का उपयोग कर कार्यान्वित.

523
00:32:33,900 --> 00:32:37,840
डेटा तो, हम इस URL में टाइप करते हैं,

524
00:32:37,840 --> 00:32:41,540
इस डेटा की तरह लग रहा है क्या है. यह इस विशाल स्ट्रिंग होने जा रहा है.

525
00:32:41,540 --> 00:32:48,610
लेकिन अच्छी बात है, जावास्क्रिप्ट JSON.parse समारोह का उपयोग करके यह पार्स कर सकते हैं.

526
00:32:48,610 --> 00:32:54,950
तो चलो पार्स डेटा नामक एक नया चर बना सकते हैं.

527
00:32:54,950 --> 00:32:57,060
और पार्स डेटा वस्तुओं की एक सरणी है.

528
00:32:57,060 --> 00:33:04,200
प्रत्येक वस्तु के रूप में ऐसी जानकारी शामिल हैं - ठीक है, चलो एक नज़र रखना.

529
00:33:04,200 --> 00:33:08,980
यह एक तिथि, एक भोजन, वर्ग, नुस्खा, यह सब अन्य सामान है.

530
00:33:08,980 --> 00:33:10,860
तो चलो बस हर एक के लिए नाम बाहर मुद्रित करते हैं.

531
00:33:10,860 --> 00:33:13,790
हम इसे से वापस मिलता है कि सामान की पूरी सरणी से पुनरावृति चलो,

532
00:33:13,790 --> 00:33:17,570
और बस हर एक को बाहर प्रिंट - हर एक के नाम पर बाहर प्रिंट.

533
00:33:17,570 --> 00:33:22,670
इस पाश के लिए एक है.

534
00:33:22,670 --> 00:33:26,030
>> जावास्क्रिप्ट, आप एक सरणी पर एक चर और पाश बना सकते हैं जहां यह सहायक वाक्यविन्यास है

535
00:33:26,030 --> 00:33:30,150
और var मैं, बजाय var i = 0 करने के लिए होने की तो, बस इटरेटर है

536
00:33:30,150 --> 00:33:40,290
मैं लंबाई से भी कम था, मैं + +, आप सिर्फ पार्स डेटा में मैं var कर सकते हैं.

537
00:33:40,290 --> 00:33:47,060
इस उदाहरण में, पार्स डेटा (मैं) वर्तमान तत्व के अनुरूप होगा

538
00:33:47,060 --> 00:33:49,850
सरणी, वास्तविक वस्तु.

539
00:33:49,850 --> 00:33:51,720
और हम इसे का नाम बाहर निकलना चाहते हैं.

540
00:33:51,720 --> 00:33:54,170
तो बस क्या नाम हैं.

541
00:33:54,170 --> 00:33:57,000
और आखिरी बात, हम फिर से कुछ jQuery के लिए जा रहे हैं है.

542
00:33:57,000 --> 00:34:02,660
दरअसल div, वर्तमान में खाली है कि इस भोजन की जानकारी div में जोड़ें.

543
00:34:02,660 --> 00:34:05,430
तो चलो का चयन दो कि.

544
00:34:05,430 --> 00:34:13,870
हम jQuery का चयन करें और भोजन की जानकारी div आईडी, या भोजन की जानकारी आईडी का उपयोग करेंगे, माफ करना.

545
00:34:13,870 --> 00:34:16,580
हम यह करने के लिए संलग्न करने के लिए चाहते हैं.

546
00:34:16,580 --> 00:34:21,030
हम परीक्षण किया है, उदाहरण के लिए, यह सिर्फ यह हर समय ऊपर लिख होगा.

547
00:34:21,030 --> 00:34:29,190
तो हम सिर्फ इस संलग्न कर सकते हैं.

548
00:34:29,190 --> 00:34:31,889
सरणी में मौजूदा तत्व है, हम इसके बारे में नाम बाहर निकलना होगा

549
00:34:31,889 --> 00:34:38,159
और हम भोजन की जानकारी आईडी div के अंत तक यह संलग्न करेंगे.

550
00:34:38,159 --> 00:34:40,120
और फिर बस, यह क्लीनर देखो बनाने के लिए

551
00:34:40,120 --> 00:34:51,550
यह एक लाइन पर सब नहीं है तो हम भी एक पंक्ति विराम जोड़ देंगे.

552
00:34:51,550 --> 00:34:55,280
सब कुछ ठीकठाक रहा तो, अगर वह अच्छा होना चाहिए -

553
00:34:55,280 --> 00:34:57,220
सब से पहले, यह बटन क्लिक किया जाता है, जब भी

554
00:34:57,220 --> 00:35:00,070
यह इस यूआरएल के लिए एक अनुरोध प्राप्त विदा करेंगे.

555
00:35:00,070 --> 00:35:02,500
डेटा से वापस आता है, यह, यह पार्स हूँ

556
00:35:02,500 --> 00:35:06,950
JSON के, उस डेटा का प्रतिनिधित्व पूरे सरणी पर पाश, में बारी

557
00:35:06,950 --> 00:35:10,310
और फिर नाम और एक पंक्ति विराम जोड़

558
00:35:10,310 --> 00:35:16,500
पहले से खाली था जो इस भोजन की जानकारी आईडी में हर पंक्ति के लिए.

559
00:35:16,500 --> 00:35:18,910
तो आप इस पेज को वापस जा रहे हैं, हम ताज़ा कर देंगे,

560
00:35:18,910 --> 00:35:23,690
क्लिक करें, पता - यह काम नहीं करता. यह दुर्भाग्यपूर्ण है.

561
00:35:23,690 --> 00:35:25,830
डिबगिंग अंदर आता है और यह है

562
00:35:25,830 --> 00:35:30,070
Index.html, लाइन 1.

563
00:35:30,070 --> 00:35:57,210
यह तो इंटरेस्टिंग है.

564
00:35:57,210 --> 00:35:59,720
ठीक है, ठीक है, यह कर समय बिताने के बजाय, मैं अभी जा रहा हूँ

565
00:35:59,720 --> 00:36:07,070
मुझे लगता है कि कुछ किया फ़ाइल खींच, जो पूरा संस्करण है.

566
00:36:07,070 --> 00:36:13,710
मैं अंतर क्या है यकीन नहीं है, लेकिन हम अभी इस जगह को खोल सकते हैं.

567
00:36:13,710 --> 00:36:19,740
और हम AJAX के लिए जाना है, और यह सही ढंग से काम करना चाहिए.

568
00:36:19,740 --> 00:36:21,730
यही कारण है, दोपहर के भोजन के लिए हुई थी क्या है

569
00:36:21,730 --> 00:36:24,870
कोई विशेष क्रम में, यह चारों ओर उद्धरण के साथ है, तो यह सुंदर नहीं है.

570
00:36:24,870 --> 00:36:27,090
लेकिन, जाहिर है, आप एक अंतिम परियोजना के लिए यह कर रहे थे,

571
00:36:27,090 --> 00:36:30,120
आप यह बेहतर लग रहे हो जाएगा.

572
00:36:30,120 --> 00:36:32,530
लेकिन यह है कि आप अनुरोध प्राप्त करते हैं कि कैसे सिर्फ एक सरल उदाहरण है.

573
00:36:32,530 --> 00:36:34,580
हम वास्तविक कोड को देखो, तो मुझे लग रहा है, मुझे पूरा यकीन है

574
00:36:34,580 --> 00:36:39,690
यह अभी भी बहुत ज्यादा एक ही है.

575
00:36:39,690 --> 00:37:04,990
ओह, मैं एक स्ट्रिंग के लिए इसे बदलने के लिए भूल गया, यह बात है.

576
00:37:04,990 --> 00:37:07,920
नहीं, यह अभी भी काम नहीं कर रहा. भले ही, यहां वास्तविक पूरा कोड है

577
00:37:07,920 --> 00:37:10,300
इस तरह दिखना चाहिए के लिए,

578
00:37:10,300 --> 00:37:16,400
और यह मैं अभी लागू है के रूप में एक ही बात करता है.

579
00:37:16,400 --> 00:37:22,760
आप बटन पर क्लिक करें, यह JSON के स्वचालित रूप से डेटा पार्स करने के लिए प्राप्त करता है.

580
00:37:22,760 --> 00:37:29,190
यह इसे से वापस डेटा लेता है और पूरे सरणी के माध्यम से loops

581
00:37:29,190 --> 00:37:32,770
और बाहर प्रिंट - दोपहर के भोजन के लिए आज जो कुछ भी है, इसके बारे में नाम,

582
00:37:32,770 --> 00:37:38,020
और प्रत्येक पंक्ति के बाद एक पंक्ति विराम जोड़ता है.

583
00:37:38,020 --> 00:37:41,100
यही कारण है कि आप प्राप्त कर समारोह का उपयोग कैसे करना है.

584
00:37:41,100 --> 00:37:44,040
>> तुम भी मेरे पास समय नहीं था जो, पोस्ट का उपयोग कर सकते हैं

585
00:37:44,040 --> 00:37:47,940
इसके लिए एक उदाहरण के ऊपर लिखने के लिए, लेकिन हम प्रलेखन पर देख सकते हैं.

586
00:37:47,940 --> 00:37:53,220
आप jquery.post को देखो

587
00:37:53,220 --> 00:37:55,510
आप इसे लगभग एक ही बात है कि देख सकते हैं.

588
00:37:55,510 --> 00:38:01,650
आप एक यूआरएल है, लेकिन इसके बजाय का उपयोग कर पैरामीटर गुजर की -

589
00:38:01,650 --> 00:38:03,990
बस, यूआरएल खुद के लिए स्ट्रिंग में डाल

590
00:38:03,990 --> 00:38:06,300
आप इस डेटा चर में पारित करने के लिए है

591
00:38:06,300 --> 00:38:11,990
कि एक शब्दकोश, मूल रूप से एक सरणी है कि मूल्यों के नक्शे मापदंडों.

592
00:38:11,990 --> 00:38:17,690
तुम्हें पता है कि में पारित, और कहा कि एक पोस्ट का उपयोग करने में उन्हें भेजता है.

593
00:38:17,690 --> 00:38:20,790
और एक बार जब आप, तो आप एक सफल समारोह हो सकता है कि है

594
00:38:20,790 --> 00:38:23,930
डेटा वापस आता है कि जब कार्यान्वित.

595
00:38:23,930 --> 00:38:26,430
अन्यथा, यह वास्तव में एक ही है. तो पोस्ट का उपयोग कर,

596
00:38:26,430 --> 00:38:29,970
तुम एक इनपुट फार्म है अगर तुम, उदाहरण के लिए, पोस्ट का उपयोग करने के लिए चाहते हो सकता है

597
00:38:29,970 --> 00:38:35,780
आप इस बारे में लोगों को इनपुट पासवर्ड देना, और उन पासवर्ड विदा

598
00:38:35,780 --> 00:38:41,850
अपनी पीठ के अंत स्क्रिप्ट के लिए, कि उपयोगकर्ता वैध है या नहीं डेटाबेस में जाँच करने के लिए.

599
00:38:41,850 --> 00:38:46,700
आप क्या कर सकते हैं कि सभी सर्वर का उपयोग कर के बजाय सब पर पेज ताज़ा करने के लिए कर रही है.

600
00:38:46,700 --> 00:38:52,160
यही कारण है कि मुझे लगता है कि मैं तुम्हें पहले से पता चला है कि ब्लॉग में लागू किया गया है कि कैसे.

601
00:38:52,160 --> 00:38:59,530
हम अंत पोर्टल के लिए जाने के लिए और बाहर प्रवेश करें, तो, लॉग आउट

602
00:38:59,530 --> 00:39:02,600
काम नहीं करता है बाहर प्रवेश करें.

603
00:39:02,600 --> 00:39:13,360
ठीक है, मुझे बस एक नई विंडो में इसे खोल देना.

604
00:39:13,360 --> 00:39:16,580
यहाँ वहाँ एक पासवर्ड है, और मैं बिना सोचे समझे कुछ में टाइप करने के लिए जा रहा था.

605
00:39:16,580 --> 00:39:18,590
यह काम नहीं करता, लेकिन आप हम नहीं देख सकते हैं कि

606
00:39:18,590 --> 00:39:20,840
वास्तव में सब पर पेज ताज़ा करने के लिए है.

607
00:39:20,840 --> 00:39:24,610
कोड, आप इसे देखना चाहते हैं,

608
00:39:24,610 --> 00:39:37,460
यहां सब उपलब्ध है.

609
00:39:37,460 --> 00:39:45,680
कोड तो मैं कुछ समय पिछले साल लिखा था.

610
00:39:45,680 --> 00:39:47,790
आप यहाँ देख सकते हैं, हम एक पोस्ट अनुरोध भेज रहे हैं.

611
00:39:47,790 --> 00:39:50,400
मैं वापस अंत में login.php नामक एक फ़ाइल है

612
00:39:50,400 --> 00:39:53,860
पासवर्ड मान्य है जो की जाँच करता है.

613
00:39:53,860 --> 00:39:56,000
हम में पारित मापदंडों के लिए मैप पासवर्ड, कर रहे हैं

614
00:39:56,000 --> 00:40:00,030
वर्तमान में इस इनपुट बॉक्स में है कि इनपुट.

615
00:40:00,030 --> 00:40:04,110
और डेटा वापस आता है, हम जांच ले.

616
00:40:04,110 --> 00:40:07,680
डेटा गलत है, तो हम गलत पासवर्ड का कहना है, यह नीचे स्लाइड

617
00:40:07,680 --> 00:40:09,580
और सिर्फ यह है कि उसके बाद गायब करना.

618
00:40:09,580 --> 00:40:12,320
अन्यथा, हम व्यवस्थापक पेज लोड.

619
00:40:12,320 --> 00:40:15,080
और यह सब JSON का उपयोग किया गया था.

620
00:40:15,080 --> 00:40:18,510
इस कोड का कई लाइनों में, तुम अभी वापस अंत करने के लिए डेटा पास कर सकते हैं

621
00:40:18,510 --> 00:40:21,020
यह सही है कि जाँच, आप सही तरीके में लॉग जाँच करें कि क्या

622
00:40:21,020 --> 00:40:24,200
और वास्तव में सही पृष्ठ पर व्यक्ति पुनः निर्देशित, यह जवाब

623
00:40:24,200 --> 00:40:29,760
या में उन्हें प्रवेश दे और वे कोई गलत पासवर्ड था कि उन्हें नहीं बता रही है.

624
00:40:29,760 --> 00:40:33,040
इसलिए कि तुम jQuery पोस्ट का इस्तेमाल कर सकते हैं का एक उदाहरण है

625
00:40:33,040 --> 00:40:37,010
अपनी पीठ के अंत के लिए एक पोस्ट अनुरोध भेजने के लिए,

626
00:40:37,010 --> 00:40:42,400
किसी ने सही ढंग से करने में लॉग इन कर रहा है कि क्या जाँच.

627
00:40:42,400 --> 00:40:44,820
>> ठीक है, मैं था सब उदाहरण हैं, और मैं को कवर करना चाहता था सब सामान है कि इतनी.

628
00:40:44,820 --> 00:40:47,110
उन jQuery के तुम क्या करने की अनुमति देता है कि बड़ी बातें कर रहे हैं:

629
00:40:47,110 --> 00:40:52,640
, तत्वों का चयन डोम हेरफेर का उपयोग कर उन्हें संशोधित,

630
00:40:52,640 --> 00:40:56,340
आप प्रभाव जोड़ सकते हैं, कुछ घटनाओं पर चीजों को सक्रिय,

631
00:40:56,340 --> 00:41:00,430
और भी बहुत मूल और आसानी से AJAX अनुरोध करते हैं.

632
00:41:00,430 --> 00:41:02,840
तो, आने वाले या देखने के लिए धन्यवाद

633
00:41:02,840 --> 00:41:06,230
यदि आप कोई प्रश्न हैं, बस मुझे पता है. हाँ?

634
00:41:06,230 --> 00:41:12,730
[छात्र] वापस पता चला, जब आप उद्धरण में पोस्ट अनुरोध के बाद JSON का था

635
00:41:12,730 --> 00:41:15,170
और मैं था कि बस सोच रहा था क्या.

636
00:41:15,170 --> 00:41:20,070
>> हाँ, मैं देख रहा हूँ. सवाल है, उदाहरण में मैं अभी पता चला है, कि था

637
00:41:20,070 --> 00:41:25,790
आसपास उद्धरण में शब्द JSON का था -

638
00:41:25,790 --> 00:41:31,690
मैं सिर्फ यह फिर से ऊपर खींच लेंगे - पोस्ट समारोह के आसपास.

639
00:41:31,690 --> 00:41:43,320
मैं सिर्फ दिखाने के लिए यह ऊपर खींच रहा हूँ.

640
00:41:43,320 --> 00:41:46,890
तो यहाँ इस पोस्ट अनुरोध है, और उद्धरण में यह JSON है.

641
00:41:46,890 --> 00:41:50,280
वह सिर्फ हम उत्पादन होने की उम्मीद कर रहे हैं परिभाषित करता है.

642
00:41:50,280 --> 00:41:54,070
हम उम्मीद डेटा प्रकार के रूप में JSON में पारित, तो अगर

643
00:41:54,070 --> 00:41:56,070
, यह एक आवश्यकता नहीं है, लेकिन हम में इसे पारित अगर

644
00:41:56,070 --> 00:41:58,590
तो डेटा स्वचालित रूप से JSON के रूप में विश्लेषित किया जाएगा.

645
00:41:58,590 --> 00:42:00,600
तो हम उस पर JSON पार्स समारोह कॉल करने के लिए नहीं है

646
00:42:00,600 --> 00:42:02,620
यह बस अपने आप हो जाएगा.

647
00:42:02,620 --> 00:42:05,150
और आप पोस्ट के लिए प्रलेखन पर एक नज़र लेते हैं,

648
00:42:05,150 --> 00:42:09,850
इस डेटा प्रकार चर, सर्वर से उम्मीद डेटा का प्रकार है.

649
00:42:09,850 --> 00:42:12,660
गलत हो सकता है कि एक बुद्धिमान अनुमान के लिए यह चूक,

650
00:42:12,660 --> 00:42:15,520
ताकि आप इसे खाली छोड़ सकते हैं, लेकिन यह डेटा की बस प्रकार है

651
00:42:15,520 --> 00:42:21,680
आप यह JSON या XML है या कुछ और, चाहे प्रयोग कर रहे हैं कि कोडिंग में.

652
00:42:21,680 --> 00:42:25,280
>> अन्य प्रश्न?

653
00:42:25,280 --> 00:42:27,300
ठीक है. आप किसी भी अन्य प्रश्न हैं, मुझे ईमेल करने के लिए स्वतंत्र महसूस

654
00:42:27,300 --> 00:42:30,830
vshekhawat@college.harvard.edu पर,

655
00:42:30,830 --> 00:42:34,860
और स्लाइड और कोड बहुत जल्द ही ऑनलाइन उपलब्ध होना चाहिए.

656
00:42:34,860 --> 00:42:42,810
अपने अंतिम परियोजनाओं के साथ गुड लक, आप jQuery का उपयोग करने की उम्मीद है.

657
00:42:42,810 --> 00:42:46,810
[CS50.TV]