[Powered by Google Translate] [संगोष्ठी] [जावास्क्रिप्ट चौखटे: क्यों और कैसे]
[केविन स्च्मिद] [हार्वर्ड विश्वविद्यालय]
[यह CS50 है.] [CS50.TV]
>> हाय, सब लोग. जावास्क्रिप्ट चौखटे संगोष्ठी में आपका स्वागत है.
, मेरा नाम केविन है, और आज मैं जावास्क्रिप्ट चौखटे के बारे में बात करने जा रहा हूँ
और इस संगोष्ठी का लक्ष्य, आप को मिल कहते हैं, से प्रति एक विशेष ढांचे मास्टर करने के लिए नहीं है
लेकिन चौखटे के एक जोड़े के लिए एक व्यापक परिचय देना
और हम कभी एक ढांचे का उपयोग क्यों चाहेगा दिखा.
>> मुझे लगता है कि ऐसा करने से पहले, मैं जावास्क्रिप्ट में एक छोटी सी पृष्ठभूमि प्रदान करेंगे
और फिर हम वहाँ से ले जाऊँगा.
हम एक करने के लिए सूची को लागू करने से शुरू करने जा रहे हैं.
यहाँ आज के लिए हमारे कार्य सूची है.
यह अजीब तरह का है. हम जावास्क्रिप्ट में एक करने के लिए सूची को लागू किया है.
यह इसलिए कि हमारा पहला लक्ष्य है, जैसे कि यह देखने के लिए कि क्या हो रहा है.
हम ऐसा करने के लिए एक रूपरेखा का उपयोग करने के लिए नहीं जा रहे हैं.
हम कोड जावास्क्रिप्ट के लिए जा रहा है और करने के लिए सूची पाने के लिए काम कर रहे हैं.
तो फिर हम एक रूपरेखा का उपयोग किए बिना डिजाइन में सुधार करने के लिए जा रहे हैं.
हम सिर्फ जावास्क्रिप्ट अकेले के साथ क्या कर सकते हैं विभिन्न बातों पर चर्चा करने जा रहे हैं
हमारे बनाने के लिए करने वाली है एक छोटे से अधिक अच्छी तरह से डिजाइन की सूची.
फिर हम कुछ jQuery में फेंक करने के लिए जा रहे हैं
और फिर हम करने के लिए सूची उसी को देखने के लिए जा रहे हैं
बस विभिन्न चौखटे में लागू किया, और हम बात करेंगे
जिस तरह से साथ पेशेवरों और विपक्ष.
>> के लिए करते सूची है कि लागू करने शुरू करते हैं.
हम कहते हैं कि हम इस HTML दिया रहे हैं.
मैं इस एक छोटे से छोटा करने के लिए जा रहा हूँ.
आप देख सकते हैं, मैं तोदो कहते हैं कि एक छोटा शीर्षक है
मैं एक टूडू का विवरण दर्ज कर सकते हैं और एक छोटे से बॉक्स
और फिर, तो इस सूची में एक नया टूडू प्रवेश करने की कोशिश का एक नया आइटम बटन चलो.
, एक जावास्क्रिप्ट चौखटे संगोष्ठी दे दो
और मैं नया आइटम हिट करने के लिए कर रहा हूँ.
मैं मेरे लागू कहते हैं कि इस जावास्क्रिप्ट चेतावनी मिलता है.
हम इसे लागू करने के लिए मिल गया है.
HTML और जावास्क्रिप्ट, दोनों की इस बात के लिए कोड की जाँच करते हैं.
यहाँ हमारे एचटीएमएल है.
आप यहाँ देख सकते हैं, यहाँ हमारे छोटे Todos हैडर है.
यही कारण है, शीर्ष पर है कि बोल्ड बात थी
और फिर हम, प्लेसहोल्डर के साथ इनपुट बॉक्स
और फिर इस समारोह addTodo कहता है कि इस बटन के एक खास विशेषता है.
किसी को भी वाचक है क्लिक पर क्या लगता है कि करना चाहते हैं?
[छात्र सुनाई प्रतिक्रिया]
अच्छा, पर क्लिक करें, एक घटना की तरह तरह की है
माउस क्लिक करने से सिर्फ एक घटना है, और हम क्या कर रहे है जैसे
हम उस समारोह निष्पादित करने के लिए इस बटन पर क्लिक करने की घटना बांधने रहे है.
AddTodo कि बटन क्लिक करने के लिए इस घटना हैंडलर है.
>> आप देख सकते हैं, मैं नया आइटम बटन क्लिक करने पर
पर क्लिक करें घटना निकाल दिया जाता है, और इस समारोह में बुलाया जाता है.
समारोह को देखो.
आप देख सकते हैं, यहाँ अभी तक मेरे जावास्क्रिप्ट कोड है.
क्या मैं शीर्ष पर है मेरी सूची करने के लिए एक वैश्विक आंकड़ा संरचना है.
यह एक सरणी की तरह लग रहा है. यह सिर्फ एक खाली सरणी है.
और फिर मैं, हम पहले देखा था कि addTodo समारोह
और वहाँ में कोड की ही लाइन यह चेतावनी है.
यह मेरे लागू सचेतक, और तब मैं हाथ में 2 कार्यों के लिए है.
मुझे लगता है कि वैश्विक डेटा संरचना को टूडू जोड़ने के लिए है
और फिर मैं करने के लिए सूची से बाहर आकर्षित करना चाहता हूँ.
कुछ भी नहीं अभी ज्यादा फैंसी, लेकिन जावास्क्रिप्ट आप के साथ अपरिचित हो सकता है
इसलिए मैं धीमी गति से चलते हैं और इस तरह जावास्क्रिप्ट की बुनियादी बातों की समीक्षा करने जा रहा हूँ.
>> इस एक शॉट देता हूँ.
हम कहते हैं कि उपयोगकर्ता इस बॉक्स में कुछ में प्रवेश करती हैं.
मैं बस यहाँ में, पाठ कुछ टाइप किया.
कैसे मैं जावास्क्रिप्ट के माध्यम से पहुँच है कि पाठ की तरह है?
कि जावास्क्रिप्ट याद रखें, अपने बुनियादी सुविधाओं में से एक यह हमें देता है
डोम के लिए इस कार्यक्रम का उपयोग.
यह हमें इस वास्तविक HTML के तत्वों और उनके गुणों का उपयोग करने की अनुमति देता है.
हम नंगे हड्डियों जावास्क्रिप्ट के साथ ऐसा तरीका
हम वास्तव में GetElementByID बुलाया जावास्क्रिप्ट में एक समारोह का उपयोग कर सकते है.
मैं कुछ चर में वहाँ टाइप किया है कि पाठ संग्रहीत करना चाहते हैं
इसलिए मैं new_todo नामक एक नया चर कहने जा रहा हूँ
और मैं उस तत्व प्राप्त करने के लिए जा रहा हूँ.
यह एक समारोह है. GetElementByID.
और अब, मैं आईडी के आधार पर एक तत्व हो रही है, इसलिए मुझे लगता है कि पाठ बॉक्स के आईडी की जरूरत
इसलिए मैं यह आईडी new_todo_description दिया है.
यही कारण है कि मैं एक तत्व प्राप्त करने के लिए जा रहा हूँ कि कैसे है.
यही कारण है कि जो पाने के लिए आईडी का उल्लेख करने के लिए, इस समारोह के लिए अपने तर्क है.
और ऐसा है कि HTML में एक तत्व है, और यह गुण है.
आप इन देखा है. वे गुण हैं.
उपयोगकर्ता के इनपुट है कि स्टोर पाठ तत्व की विशेषता मान कहा जाता है.
मैं new_todo नामक इस चर में अब उस पाठ बॉक्स के मूल्य बचाया.
अब मैं इस चर के लिए कार्यक्रम का उपयोग किया है, जो शांत की तरह है
अब मैं क्या कर सकता क्योंकि मैं अपने को सूची में जोड़ सकते है.
>> हम में यह करना होगा जिस तरह से जावास्क्रिप्ट और आप इस बात से परिचित नहीं हैं, तो चिंता मत करो,
लेकिन सिर्फ यह माध्यम से जा todos.push है
यहाँ मेरे वैश्विक आंकड़ा संरचना का नाम है, क्योंकि
और मैं new_todo पुश करने के लिए जा रहा हूँ.
अब मैं अपने जावास्क्रिप्ट को जोड़ा गया है, क्योंकि यह बहुत ही अच्छी है
कि करने के लिए सूची का प्रतिनिधित्व.
लेकिन अब मैं कैसे HTML करने के लिए इसे वापस मिलता है?
मैं इसे वापस धक्का की तरह करने के लिए एक रास्ता खोजना होगा.
दूसरे शब्दों में, मैं एक तरह से इस आकर्षित किया है.
हम क्या करने जा रहे हैं, हम करने के लिए सूची आकर्षित करने के लिए जा रहे है.
मुझे लगता है कि पृष्ठ पर अन्य HTML अद्यतन करने की आवश्यकता
आप देख सकते हैं और, मैं यहाँ इस छोटे कंटेनर छोड़ दिया है
जिसका आईडी todos है पृष्ठ के इस विभक्त,
और मैं वहाँ करने के लिए सूची डाला जा रहा हूँ.
सबसे पहले मैं करने के लिए सूची एक पुराने वहाँ वहाँ था, कहते हैं, क्योंकि यह बाहर खाली करने के लिए जा रहा हूँ.
मैं फिर से आईडी के आधार तत्व है कि हो रही है
और मुझे लगता है कि तत्व के भीतर एचटीएमएल पहुँचने हूँ
और मुझे लगता है कि खाली करने के लिए जा रहा हूँ.
है के रूप में हम इस कोड को छोड़ दिया है, तो हम वहां एक खाली कुछ भी नहीं देखना चाहते हैं
और अब मैं मेरी नई करने के लिए सूची प्रतिपादन शुरू करना चाहते हैं.
मैं मूल रूप से मेरे करने के लिए सूची का सफाया करने के लिए जा रहा हूँ.
>> अब जब कि todos div के भीतर HTML के अंदर, पूरी तरह से स्पष्ट है
और अब मैं अपनी सूची में जोड़ने से शुरू करने की जरूरत है.
मैं वापस जोड़ना चाहते हैं, पहली बात, unordered सूची टैग है
जो मूल रूप से यह एक unordered सूची की शुरुआत है कि अर्थ.
अब मेरी todos सरणी में प्रत्येक तत्व के लिए मुझे लगता है कि HTML के अंदर इसे बाहर प्रिंट करना चाहते हैं.
मैं इस सूची के नीचे करने के लिए उस पर संलग्न करना चाहते हैं.
जरा सी में की तरह, मैं एक पाश के लिए उपयोग कर सकते हैं, और मैं अपनी सूची की शुरुआत में शुरू करने जा रहा हूँ
तत्व 0 पर, और मैं सूची की लंबाई के लिए सभी रास्ते जाने के लिए जा रहा हूँ.
हम वास्तव में लंबाई संपत्ति का उपयोग जावास्क्रिप्ट में एक सरणी की लंबाई प्राप्त कर सकते हैं.
असल में मैं यहाँ के अंदर बहुत कुछ ऐसा ही करने जा रहा हूँ
उस तत्व बाहर मुद्रित करने के लिए.
मैं फिर से todos div, उस के भीतर एचटीएमएल संपत्ति, उपयोग कर सकते हैं
और मैं इस नई सूची आइटम को जोड़ने के लिए जा रहा हूँ, और उस से घिरे होने जा रहा है
इस लिस्ट टैग, और मैं, + ऑपरेटर के साथ जुटना करने जा रहा हूँ
और कि, मेरे todos सरणी के ith तत्व है
और फिर मैं उस टैग को बंद करने जा रहा हूँ.
अब हर तत्व के लिए हम एक नई सूची प्रविष्टि जोड़ देंगे.
और फिर हम वास्तव में क्या करने की जरूरत है कि सभी टैग से बंद है.
मैं बस सूची टैग unordered कि बंद को बंद करने की जरूरत है.
>> आपको लगता है कि कैसे काम करता है के लिए एक महसूस हो रहे हो?
इस पूरी सूची खोलता है.
यह todos सूची से सूची में व्यक्तिगत तत्व कहते हैं
और फिर पूरी सूची बंद कर देता है, और यह मेरा addTodo समारोह है कि.
मैं मूल रूप से पाठ बॉक्स से टूडू रही द्वारा शुरू करते हैं.
मैं todos सरणी के लिए कि जोड़ने के लिए, और फिर मैं करने के लिए सूची फिर से प्रस्तुत करना.
अब मैं अपनी सूची में आइटम जोड़ सकते हैं.
इस तरह के रोमांचक है क्योंकि सिर्फ कोड की कुछ लाइनों में
हम मूल रूप से हम आइटम जोड़ सकते हैं जहां एक करने के लिए सूची बनाई है.
ग्रेट.
यही कारण है कि जावास्क्रिप्ट के लिए एक बुनियादी परिचय की तरह है.
अब के लिए सिंटैक्स के बारे में बहुत ज्यादा चिंता मत करो
लेकिन इस धारणा के बारे में सोचते हैं.
हम कुछ HTML था.
हम इनपुट एक कार्य आइटम के लिए मूल रूप से अनुमति उपयोगकर्ताओं को जोड़ने के लिए उस पृष्ठ पर एक पाठ बॉक्स था.
और फिर हम उस पाठ बॉक्स से कि टूडू लाने के लिए जावास्क्रिप्ट का इस्तेमाल किया.
हम एक जावास्क्रिप्ट सरणी के अंदर, जो की तरह मूल रूप से है कि संग्रहीत
इस बात का हमारे कार्यक्रम प्रतिनिधित्व करने के लिए सूची,
और फिर हम इसे बाहर मुद्रित.
इस todos.js है.
>> यह शांत की तरह है, लेकिन हम यह कैसे आगे ले जा सकते हैं?
आप देख सकते हैं, ठीक है, इस सूची में है एक पूरी तरह नहीं है.
उदाहरण के लिए, मैं अधूरा के रूप में इन वस्तुओं के किसी भी निशान नहीं कर सकते
मैं आइटम reprioritize या आइटम को हटाने के लिए चाहता था पसंद है.
यह ठीक है, लेकिन हम इस आगे ले जा सकते हैं.
मैं, अतिरिक्त सुविधाओं को जोड़ने के बारे में बहुत ज्यादा बात करने के लिए नहीं जा रहा हूँ
लेकिन हम चाहते हैं कि आगे ले सकता है.
करने के लिए सूची इस के लिए एक और फीचर जोड़ने के बारे में बात करते हैं,
एक व्यक्ति को करना आइटम की जाँच करने में सक्षम होने जा रहा है जो
और यह तो बुनियादी तौर पर मैं इस किया है, कह रही है बाहर पार कर सकता है.
है कि पूरा हो सकता है कि कुछ कोड को देखो.
क्या मैं शीर्ष पर किया है मैं जोड़ दिया है नोटिस
एक नए वैश्विक सरणी पूरा बुलाया.
मैं मूल रूप से स्टोर करने के लिए इस का उपयोग कर रहा है कि क्या करने के लिए सूची पर आइटम
पूरा या नहीं कर रहे हैं.
यह ऐसा करने का एक तरीका है.
मैं इस के कार्यान्वयन, प्रदर्शन, पर देखो
मैं एक टूडू दर्ज करें और अगर मूल रूप से मैं इस टॉगल बटन दबाएँ
इसे बाहर पार करती है, तो इस सूची में प्रत्येक आइटम या तो एक पूरा किया है
या अधूरा राज्य, और मुझे लगता है कि प्रतिनिधित्व करने के लिए एक और सरणी का उपयोग कर रहा हूँ.
>> असल कि todos सरणी में हर टूडू के लिए
एक आइटम मूल रूप से इंगित करता है कि पूरी श्रृंखला में नहीं है
कि पूरा है या नहीं.
मैं इस कोड को बहुत कम परिवर्तन करने के लिए किया है
तो यहाँ हमारे addTodo समारोह है.
यहाँ मैं सरणी पर जोर दे रहा हूँ कि सूचना,
और फिर मुझे लगता है कि पूरी सरणी के लिए एक 0 जोर दे रहा हूँ
मूल रूप से कहना है कि नए टूडू धक्का के साथ समानांतर में
मैं, इस आइटम जोड़ रहा हूँ, और यह इस मूल्य के साथ युग्मित है
जो यह अधूरा है इसका मतलब है.
और फिर मैं करने के लिए सूची redrawing हूँ.
अब, मैं इस drawTodoList समारोह जोड़ दिया नोटिस.
यह हम पहले था कोड का एक बहुत लेता है
मूल रूप से बॉक्स के बाहर साफ करता है और फिर नया करने के लिए सूची खींचता है.
लेकिन इस के अंदर पाश के लिए हम और अधिक अब एक छोटे से कर रहे हैं नोटिस.
हम मूल रूप से रबर टूडू को आइटम इसी चाहे यहाँ जाँच कर रहे हैं
पूरा हो गया है, और हम इन 2 परिस्थितियों में अलग तरह से व्यवहार कर रहे हैं.
यह पूरा हो गया है, तो हम इस डेल टैग जोड़ रहे हैं
जो मूल रूप से आप प्रभाव के माध्यम से कि हड़ताल प्राप्त कर सकते हैं जिस तरह से है
यह पूरा हो गया है अगर करने के लिए सूची से बाहर पार
अगर ऐसा नहीं है, हम इसे शामिल नहीं कर रहे हैं.
और तो उस तरह की, इस बात का ध्यान रखती है
>> और कि यह पूरा करने के लिए एक ही रास्ता है.
उपयोगकर्ता इनमें से किसी एक पर क्लिक करता है और फिर जब नोटिस
हम इसके बारे में पूरा होने की स्थिति टॉगल.
उपयोगकर्ता क्लिक करता है, हम इसे पूरा किया या नहीं किया गया है कि क्या रिवर्स हूँ जब,
और फिर हम यह redraw हूँ.
काम करता है इस प्रकार का.
हम अपने खुद के कार्यों के लिए बाहर ले जाने कि इन कार्यों के लिए है
और यह ठीक है.
हम हालांकि, इस बारे में बेहतर कर सकता है कुछ भी है?
हम इन 2 वैश्विक सरणियों है सूचना है.
इस सी थी, और हम किस तरह का प्रतिनिधित्व किया है कि 2 सरणियों था
तरह की किसी तरह से संबंधित था कि डेटा
हम इन 2 क्षेत्रों गठबंधन करने के लिए सी में क्या उपयोग होगा
जानकारी के दोनों टुकड़ों encapsulates कि कुछ में?
किसी को कोई सुझाव देने के लिए करना चाहते हैं?
[छात्र सुनाई प्रतिक्रिया]
>> वास्तव में, इसलिए हम संरचना को किसी तरह का इस्तेमाल कर सकते हैं
और आप pset 3, कहते हैं, के लिए वापस लगता है, अगर
हम शब्दकोश था, और फिर हम था याद है कि क्या शब्द
शब्दकोश में था, और कहा कि सभी जानकारी को एक साथ रखा गया था
कुछ डेटा संरचना के अंदर.
मैं इस कोड के साथ कर सकते हैं एक बात इन 2 अलग सरणियों होने से बचने के लिए
जानकारी के इसी तरह के टुकड़े के लिए मैं एक जावास्क्रिप्ट वस्तु में उनके गठबंधन कर सकते है.
उस पर एक नज़र रखना.
मैं केवल अब शीर्ष पर एक सरणी है नोटिस
और क्या मैं ने किया है और यह सिर्फ तरह के लिए जावास्क्रिप्ट वाक्यविन्यास है
एक वस्तु का शाब्दिक संस्करण बनाने,
और, इसलिए हम टूडू है, 2 गुण हैं नोटिस
और यह है कि यह पूरा या अधूरा है चाहे साथ एक साथ रखा है.
यह बहुत ही इसी तरह के कोड है.
हम जावास्क्रिप्ट वस्तुओं का उपयोग कर रहे हैं.
सुधार बातें इस प्रकार का.
अब की तरह, संबंधित जानकारी के लिए इन सभी क्षेत्रों को एक साथ रखा जाता है.
हम इसे बाहर प्रिंट लिए जाते हैं, हम क्षेत्रों का उपयोग कर सकते हैं.
>> हम todos [मैं] कैसे कर रहे हैं नोटिस. पूरा
बजाय अलग से पूरा सरणी की जाँच की,
और हम हम करने के लिए करते संपत्ति हो रही करने के लिए करते स्ट्रिंग प्राप्त करना चाहते हैं जब नोटिस
कि टूडू की, ताकि इस तरह की समझ में आता है क्योंकि
हर आइटम इसके बारे में इन आंतरिक गुण है.
यह एक टूडू है, और यह पूरी तरह से है या नहीं है.
नहीं भी कई परिवर्तन कर कार्यात्मक, सिर्फ कोड के लिए कुछ और जोड़ा.
यह सही, कुछ मोर्चों पर एक सुधार है?
मैं थोड़ा डिजाइन बाहर हम सकारात्मक असर, मतलब.
अब हम मूल रूप से इस डेटा encapsulate करने के लिए वस्तुओं है.
हम जावास्क्रिप्ट के संदर्भ में यहां से कर सकता है और अधिक कुछ भी नहीं है?
पसंद नोटिस यहीं है कि इस कोड
एक div के भीतर एचटीएमएल प्राप्त करने के लिए
एक छोटी सी, मुझे लगता है, लंबे समय से है.
Document.getElementById ("todos") है. InnerHTML.
हम इस कोड को एक छोटे से दोस्ताना देखो बनाने के लिए कर सकता है एक बात
इसलिए मुझे लगता है, आगे और पीछे, स्क्रॉल छोड़ दिया और सही रखने के लिए नहीं होता
मैं jQuery की तरह एक पुस्तकालय का उपयोग कर सकता है.
>> के, संगोष्ठी 2 की जाँच करने दें
और यह एक ही कोड है, लेकिन यह jQuery के साथ हो चुका है.
तुम jQuery के साथ बहुत परिचित नहीं हो सकता
लेकिन सिर्फ jQuery का चयन के लिए एक पुस्तकालय की तरह है कि पता
कि यह आसान डोम का उपयोग करने वाले तत्वों की तरह बातें करने के लिए आता है.
यहाँ के बजाय document.getElementById कह के ("todos"). InnerHTML
मैं jQuery में अधिक स्वच्छ तरीके से उपयोग कर सकते हैं
जो सिर्फ चयनकर्ताओं का उपयोग करने के लिए है.
आप देख सकते हैं, इस कोड, एक छोटे से क्लीनर मिला
बहुत कार्यात्मक समान है, लेकिन उस विचार है.
हम अब तक चीजों के एक जोड़े को देखा है
तो हम सिर्फ कच्चे जावास्क्रिप्ट कार्यान्वयन के साथ शुरू कर दिया.
हम नई सुविधाओं को जोड़ा और हम साथ इसे सुधार कर सकते हैं कैसे पता चला
बस क्या हम जावास्क्रिप्ट में है.
>> किसी को भी इस डिजाइन के साथ किसी भी कठिनाइयों देखा है?
अर्थात्, मुझे लगता है कि या कठिनाइयों जरूरी नहीं, लेकिन हम कहते हैं की
हम एक करने के लिए सूची परियोजना नहीं कर रहे थे, और कल हमने तय किया
हम एक किराने की सूची या एक शॉपिंग सूची परियोजना बनाना चाहते थे.
इन सुविधाओं का एक बहुत बहुत समान हैं.
हम जावास्क्रिप्ट से बाहर निकलना चाहते हैं कि चीजों की एक बहुत, बहुत आम हैं
और इस तरह की किसी तरह की आवश्यकता रेखांकित
ऐसा करने के लिए यह आसान बना रही है.
मुझे लगता है, इस HTML उपयोग की सभी को बनाने के लिए यह सब डोम का उपयोग किया था
मैं इस मॉडल के साथ करने के लिए सूची का प्रतिनिधित्व करने जा रहा हूँ.
और मैं जावास्क्रिप्ट डेवलपर के रूप में जिम्मेदार हूँ नोटिस
मैं सिंक में है कि HTML और जावास्क्रिप्ट रखने के लिए.
स्वचालित रूप से किया कुछ भी नहीं है कि जावास्क्रिप्ट प्रतिनिधित्व
या करने के लिए सूची HTML करने के लिए बाहर धक्का दे दिया हो.
कुछ भी नहीं है कि मेरे लिए सिवाय लागू किया.
मैं सूची समारोह करने के लिए आकर्षित लिखना था.
और इसका मतलब मैं होने वाली है, यह, कि क्या करना उचित नहीं है कि हो सकता है
लेकिन यह कभी कभी कठिन हो सकता है.
तुम एक बड़ी परियोजना है, कि मुश्किल हो सकता है.
>> चौखटे, चौखटे के उद्देश्यों में से एक
कारक है कि प्रक्रिया और सुलझाना आसान बनाने के लिए है
इन आम मैं तुम सकता कहना डिजाइन पैटर्न अनुमान
कि लोग आम तौर पर, डेटा का प्रतिनिधित्व करने के रास्ते से किसी तरह का है
कि उस नक्शे जानकारी है, चाहे एक मित्र सूची में है या नहीं
या कुछ या एक करने के लिए सूची.
कुछ लोगों को आम तौर पर जानकारी का प्रतिनिधित्व करने का एक तरीका है
और वे आम तौर पर सिंक में है कि जानकारी की तरह रखने की जरूरत
उपयोगकर्ता को देखने के कुछ प्रकार में क्या देखता बीच,
आप व्याख्यान में देखा कि मॉडल दृश्य नियंत्रक तरह के संदर्भ में बोल रहा है,
और फिर इस मामले में यह जावास्क्रिप्ट सरणी है जो मॉडल,.
चौखटे हमें उस समस्या को हल करने के लिए एक रास्ता दे.
अब के लिए करते सूची इस के कार्यान्वयन पर एक नज़र रखना
angularjs नामक ढांचे में.
यह बात है. यह एक स्लाइड पर फिट बैठता सूचना है.
मैं छोड़ दिया और सही करने के लिए स्क्रॉल करने के लिए नहीं है.
यह शायद, एक ढांचे का उपयोग कर की सिफारिश करने के लिए एक बड़ा कारण नहीं है
लेकिन नोटिस मैं कभी यहां व्यक्तिगत HTML तत्व प्रवेश कर रहा हूँ?
मैं कभी डोम में जा रही है?
आप की तरह है कि किसी भी document.getElementById या कुछ देख रहे हो?
नहीं, वह चला गया है.
>> कोणीय हमें डोम और कुछ के बारे में हमारी जावास्क्रिप्ट प्रतिनिधित्व रखने में मदद करता है
सिंक में की तरह, यह, जे एस फ़ाइल में नहीं है यदि ऐसा है तो
प्रोग्राम के रूप में है कि सभी HTML सामग्री के लिए होने का कोई तरीका नहीं है अगर
जावास्क्रिप्ट से कैसे हम सिंक में रखते हुए कर रहे हैं?
यह. जे एस फ़ाइल में नहीं है, यह ठीक है, HTML में हो गया है?
यह HTML फ़ाइल का नया संस्करण है
और हम यहाँ एक बहुत जोड़ दिया नोटिस.
एनजी क्लिक करें और एनजी दोहराने का कहना है कि इन नई विशेषताओं वहाँ सूचना है.
डिजाइन में कठिनाइयों की इस समस्या को सुलझाने के लिए कोणीय के दृष्टिकोण
मूल रूप से एचटीएमएल और अधिक शक्तिशाली बनाने के लिए है.
कोणीय आप HTML कुछ अधिक अर्थपूर्ण बनाने के लिए अनुमति देने का एक तरीका है.
उदाहरण के लिए, मुझे लगता है मैं इस पाठ बॉक्स टाई या बाध्य करने के लिए जा रहा हूँ कह सकते हैं कि
मेरे कोणीय जावास्क्रिप्ट कोड के भीतर एक चर करने के लिए.
इस एनजी मॉडल है कि बस.
मूल रूप से कहते हैं कि आइटम इस पाठ बॉक्स के अंदर, कि
बस चर new_todo_description साथ कि सहयोगी
जावास्क्रिप्ट कोड के भीतर.
मैं स्पष्ट रूप से करने के लिए जाने की जरूरत नहीं है क्योंकि यह बहुत शक्तिशाली है
डोम कि जानकारी पाने के लिए.
मैं document.getElementById कहने की जरूरत नहीं है.
मैं डोम की तरह उपयोग jQueries उपयोग के लिए नहीं है.
मुझे लगता है कि चर परिवर्तन जब मैं तो एक चर के साथ सहयोगी, और कर सकते हैं
जावास्क्रिप्ट के भीतर यह HTML के साथ सिंक में रखा है
ताकि दोनों के बीच आगे और पीछे जाने के लिए होने की प्रक्रिया को सरल.
क्या इसका यह मतलब?
>> और कोई HTML एक्सेस कोड नहीं है नोटिस.
हम बस, एचटीएमएल और अधिक शक्तिशाली बनाया है
और अब, उदाहरण के लिए, हम इस तरह से बातें कर सकते हैं
आप इस पर क्लिक करते हैं, todos.js के दायरे के भीतर इस समारोह में बुलाने की तरह,
और, इस एनजी मॉडल की तरह, हम पहले ऐसा कर सकता है, लेकिन वहाँ अन्य चीजें हैं
और इस एनजी दोहराने नोटिस.
आप इस करता है क्या लगता है?
यहां पहले से हमारे unordered सूची है.
हम उल टैग नहीं है
लेकिन मैं कभी भी जावास्क्रिप्ट कोड के अंदर उस सूची प्रदान कर रहा हूँ?
मैं कभी स्पष्ट रूप से उस सूची प्रदान नहीं कर रहा हूँ.
यह कैसे काम करता है?
खैर, वैसे कोणीय यह इस एक अपराधी कहा जाता है accomplishes.
असल में यह है कि मैं इस HTML मुद्रित करना चाहते हैं का कहना है कि
मेरे todos सरणी के हर टूडू के अंदर के लिए.
Todos.jr के अंदर एक todos सरणी, सही यहाँ है
और यह कि सरणी के माध्यम से कोणीय जाने बता देंगे, और हर तत्व के लिए आप देख
मैं आप इस HTML मुद्रित करना चाहते हैं.
मैं यह कर बस कर सकते हैं क्योंकि यह कमाल की तरह है
पाश के लिए एक लिखने के लिए बिना,
जो कोड के केवल 30 लाइनों था कि एक करने के लिए सूची के लिए
सबसे फायदेमंद बात नहीं हो सकता है,
तुम एक बड़ी परियोजना है, लेकिन अगर यह बहुत सुविधाजनक हो सकता है.
>> इस HTML अधिक शक्तिशाली है, जिससे इस समस्या का एक समाधान है,
और कहा कि हमें सिंक में जावास्क्रिप्ट और HTML रखने के लिए अनुमति देता है.
इस समस्या को हल करने के लिए अन्य संभव तरीके हैं,
और हर ढांचा ऐसा करता नहीं.
हर ढांचे की इन पंक्तियों के साथ काम करता है.
कुछ व्यवस्थाएं, अलग अलग दृष्टिकोण है
और यदि आप एक दूसरे के ऊपर ढांचे में कोडिंग है कि आनंद मिल सकता है.
चलो एक और देखो.
यह रीढ़ कहा जाता है एक ढांचे में कोडित करने के लिए सूची है.
मैं जल्दी से इस के माध्यम से जाने के लिए जा रहा हूँ.
हम वहाँ जाने से पहले मैं HTML के साथ शुरू करेंगे.
एक सेकंड.
तुम नोटिस के रूप में, HTML के साथ शुरू, हमारे HTML समान है
यह उस मोर्चे पर पहले, इसलिए बहुत ज्यादा नहीं नया क्या था.
लेकिन हमारे जे एस फ़ाइल एक छोटे से अलग है.
की रीढ़ तरह इस विचार है, या विचार पर बनाता है
हम साथ क्या कर के एक बहुत कुछ है, कहते हैं कि, हमारे जावास्क्रिप्ट परियोजनाओं
मॉडल और इन मॉडलों के संग्रह के बारे में सोचना है.
यह, उदाहरण के लिए, तस्वीरों की एक तस्वीर और संग्रह हो सकता है
या मित्रों के एक दोस्त और संग्रह का विचार है.
और बार बार हम जावास्क्रिप्ट अनुप्रयोगों प्रोग्रामिंग कर रहे हैं जब
दोस्तों का एक संग्रह करने के विचार का प्रतिनिधित्व के हम सुलझा लेंगे
किसी भी तरह जावास्क्रिप्ट में, और रीढ़ हमें इस परत देता है
जावास्क्रिप्ट के मौजूदा सरणियों और वस्तुओं के शीर्ष पर
और अधिक आसानी से उस के साथ अधिक शक्तिशाली बातें करने के लिए.
>> यहाँ मैं, एक करने के लिए मॉडल में परिभाषित किया गया है
और तुम, वाक्य रचना के बारे में बहुत ज्यादा चिंता की जरूरत नहीं है
लेकिन क्या इस के गुणों में से एक है कि नोटिस?
यह एक डिफ़ॉल्ट क्षेत्र है.
बैकबोन मेरे बल्ले से पहले ही निर्दिष्ट करने के लिए अनुमति देता है
मुझे लगता है कि बनाने के लिए किसी भी नए इन चूक होने वाला है.
अब मैं इस अनुकूलित, लेकिन चूक निर्दिष्ट करने के लिए किया जा रहा सक्षम कर सकते हैं
अच्छा है, और इस तरह है कि कुछ नहीं है क्योंकि यह सुविधाजनक की तरह है
जावास्क्रिप्ट में निहित है, और अब मैं स्पष्ट रूप से करने की जरूरत नहीं
todos अधूरे हैं कि कहते हैं.
मैं todos अधूरा के रूप में चिह्नित किया जा रहे हैं कि सही बल्ले से कह सकते हैं.
तो सूचना यह क्या है?
अब मैं एक करने के लिए सूची है, और कि एक संग्रह है.
मॉडल टूडू का कहना है कि साथ जुड़े क्षेत्र पर ध्यान दें.
मतलब यह है कि रीढ़ बताने का मेरा तरीका है
मैं इन व्यक्तिगत todos का एक संग्रह के बारे में सोच रही हो जा रहा हूँ.
यह मूल रूप से अपने कार्यक्रम के लिए मॉडल संरचना है.
यहाँ मैं एक संग्रह के इस विचार है
और मूल रूप से उस संग्रह में निहित आइटम सभी, इन todos होने जा रहे हैं
और कहा कि इस मायने में बहुत ही स्वाभाविक है
मुझे क्या करना है क्योंकि todos है, और मैं एक संग्रह में उन्हें दिया है.
>> इस के एक छोटे से अधिक पर नजर डालते हैं.
यहाँ एक बैकबोन दृश्य है.
रीढ़ की हड्डी का कहना है कि दूसरी बात यह है कि
आप के बारे में या भी संग्रह में सोच रहे हैं कि मॉडल का एक बहुत
प्रदर्शित की जा रही का कोई रास्ता है की जरूरत जा रहे हैं.
हम करने के लिए सूची है कि प्रदान की जरूरत
हम एक मॉडल के लिए प्रदान कर सकता है और यह अच्छा नहीं होगा
या एक मॉडल के साथ इस दृश्य सहयोगी
हमें करने की अनुमति देता है कि मैं दो एक साथ जोड़ने लगता है क्या?
जबकि पहले हम के माध्यम से चला जाएगा कि पाश के लिए एक का उपयोग किया था
हर हमारी सूची में टूडू और फिर इसे यहाँ बाहर प्रिंट
हम मूल रूप से इस मॉडल के साथ कनेक्ट कर सकते हैं.
यह एक करने के लिए करते दृश्य है.
यह हम पहले भी पाया टूडू के साथ जुड़ा हुआ है.
अब हर टूडू प्रदर्शन या renderable है
इस से दृश्य करने के लिए.
क्षेत्रों के कुछ सूचना है.
आप इस tagName है tagName क्या लगता है: ली?
एक टूडू रेंडर करने के लिए हम चाहते थे कि जब पहले से याद रखें
हम स्पष्ट रूप से इस लिस्ट टैग के साथ हमारे todos जोड़ी के लिए होगा.
अब हम इस टूडू जीने के लिए जा रहा है, जहां कह रहे हैं कि
एक ली टैग के अंदर होने जा रहा है.
और अब हम भी हमारे todos साथ घटनाओं को जोड़ रहे हैं.
>> हर टूडू इस एक घटना है.
तुम बहुत ज्यादा टॉगल बटन क्लिक करते हैं, कि, मैं वहाँ क्या कह रहा हूँ
तो बुनियादी तौर पर यह पहले क्या था के विपरीत रूप में टूडू निशान
और फिर आवेदन फिर से प्रस्तुत करना.
इस से पहले कोड के लिए इसी तरह की है.
हम या तो सामने या के रूप में चिह्नित करते समय याद रखें
और फिर हम इसे फिर से गाया.
लेकिन अब एचटीएमएल में था कि कुछ हुआ करते थे, इस घटना की सूचना.
यह वहाँ बैठा हुआ था.
बटन पर क्लिक किया था.
आप बटन क्लिक करते हैं, यह किस तरह की सामग्री करने के लिए करता है
टूडू अधूरा होने के लिए निर्धारित किया है.
यहाँ हम कि टॉगल बटन पर क्लिक करने की घटना है कि संबद्ध किए गए
और यह इस दृष्टि से चालू या बंद है चाहे पीछे.
>> यह बहुत मजबूती से बंधे इतना है कि यह इस घटना की स्थापना करने का एक अच्छा तरीका है
यह देखने के लिए, और इतना अधिक इस एक नोटिस.
मैं इस प्रस्तुत करना तरीका है, और हम विवरण के माध्यम से जाने की जरूरत नहीं है.
यह हम पहले क्या था के लिए इसी तरह की है
लेकिन मैं कुछ के माध्यम से पाशन नहीं हूँ नोटिस.
मुझे लगता है मैं सभी तत्वों को मुद्रित करने के लिए जा रहा हूँ कह रही है की तरह है कि उस उल टैग मुद्रण नहीं कर रहा हूँ.
मैं इस एक के लिए करते मद प्रतिपादन के लिए कार्यक्षमता प्रदान कर रहा हूँ.
इसका कारण यह मूल रूप से एक बहुत शक्तिशाली अवधारणा है
हमारी सूची में है इन सभी todos के होते हैं, और हम मूल रूप से निर्दिष्ट कर सकते हैं
उन todos में से एक प्रस्तुत करना करने के लिए रास्ता
तो हम से प्रति हमारे शक्तिशाली रीढ़ की हड्डी हो सकता है todos के सभी प्रस्तुत करना
व्यक्तिगत todos पर प्रस्तुत करना विधि को फोन करके.
यहाँ यह उपयोगी है कि एक अवधारणा है.
अब पूछने के लिए एक अच्छा सवाल यह आवेदन कैसे एक साथ रखा जा रहा है?
हम एक टूडू प्रदान करने की क्षमता है, क्योंकि
लेकिन कैसे हम कई todos के विचार मिलता है?
>> उस पर एक नज़र रखना.
यह आखिरी हिस्सा है.
हम यहाँ एक करने के लिए सूची दृश्य है नोटिस,
और यह भी एक दृश्य है नोटिस.
और चीजों के एक जोड़े पर जाने के लिए,
हम पहले यह करने के लिए सूची बनाते समय इस इनिशियलाइज़ विधि बुलाया जाएगा.
आप देख सकते हैं, यह करने के लिए सूची बनाने और इस दृश्य के साथ जोड़ की तरह है.
आप एक जोड़ते हैं और फिर मैं तो बुनियादी तौर पर यहां कार्यों जोड़ा आइटम
इस AddItem विधि के समान है, हम पहले देखा था
मैं एक नया टूडू वस्तु बना, और मैं वास्तव में बुला रहा हूँ नोटिस करने जा रहा हूँ
इस नए टूडू विधि, इसलिए इस बैकबोन द्वारा प्रदान की जाती है,
और मैं यहां अपने गुणों में पारित कर सकते हैं.
और अब मैं इस का उपयोग कर बनाने कि हर टूडू हम पहले देखा था कि कार्यक्षमता मिल जाएगा.
मैं पाठ बॉक्स के बाहर समाशोधन हूँ से पहले एक छोटे से छोटे विस्तार नोटिस
और फिर मैं इस संग्रह जोड़ रहा हूँ.
>> यह लगभग अजीब लगता है कि हम सिर्फ todos.push करना पड़ा क्योंकि पहले,
और फिर हम कर रहे थे, और यह इस विशेष परियोजना के लिए और अधिक जटिल लग सकता है
और आपको लगता है कि रीढ़ की हड्डी या भी कोणीय या किसी अन्य ढांचे को मिल सकता है
अपने विशेष परियोजना के अनुरूप है, लेकिन मैं इसके बारे में सोचना जरूरी है नहीं लगता है
क्या यह बड़ी परियोजनाओं के लिए एक बड़े पैमाने पर इसका मतलब है,
क्योंकि हम हम का प्रतिनिधित्व कर रहे थे, जहां एक बड़ी परियोजना था
कुछ वास्तव में जटिल संग्रह, सिर्फ एक को सूची से गहरा कुछ,
के एक मित्र सूची या ऐसा कुछ कहते हैं, इस काम में आ सकता है
क्योंकि हम एक बहुत सुविधाजनक तरीके से हमारे कोड का आयोजन कर सकता है
किसी और के लिए यह आसान हो जाएगा कि एक तरह से
जो पर बनाने के लिए एक परियोजना लेने के लिए करना चाहता था.
आप इस संरचना का एक बहुत प्रदान करता है देख सकते हैं.
और फिर मैं इस AddItem पर प्रस्तुत करना बुला रहा हूँ.
आप देख सकते हैं, प्रस्तुत करना, और आप इस पूरे वाक्य रचना काबू करने के लिए नहीं है,
लेकिन मूल रूप से एक मॉडल के लिए यह व्यक्तिगत रेंडर विधि कॉल करने के लिए जा रहा है.
यह कहाँ से आता है उस तरह की है.
सिर्फ व्यक्तिगत todos रेंडर करने के लिए कैसे निर्दिष्ट चलो,
और फिर एक पूरे के रूप में एक साथ गोंद उन्हें चलो.
लेकिन यह अमूर्त का एक तरीका प्रदान करता है
मुझे लगता है मैं व्यक्तिगत todos रेंडर करने का फैसला बदल सकता है, क्योंकि
और मैं इस कोड के किसी भी बदलने की जरूरत नहीं होगी.
उस तरह से शांत है.
>> किसी को भी जावास्क्रिप्ट चौखटे के बारे में किसी भी सवाल है?
[छात्र सुनाई सवाल]
ओह, यकीन है, कि एक बड़ा सवाल है.
प्रश्न कैसे मैं चौखटे में शामिल किया था?
हाल जावास्क्रिप्ट चौखटे मूल रूप से बस जे एस फ़ाइलें हैं
आप अपने कोड के शीर्ष पर शामिल कर सकते हैं.
मैं इन सभी स्क्रिप्ट टैग नहीं है मेरी HTML के सिर हिस्से में सूचना है,
और अंतिम स्क्रिप्ट टैग हम लिखा है कि कोड है.
और फिर 3 रूपरेखा कोड अभी भी स्क्रिप्ट टैग कर रहे हैं.
मैं एक CDN क्या कहा जाता है से उन सहित हूँ
जो मुझे इस बिंदु पर किसी और से इसे पाने के लिए अनुमति देता है
लेकिन हर ढांचा इस में आप बहुत ज्यादा सामग्री मिल सकती है
ऐसा कुछ समन्वय या कुछ और पर उपलब्ध एक विशेष जावास्क्रिप्ट पुस्तकालय के लिए,
और फिर आप इन स्क्रिप्ट टैग शामिल कर सकते हैं.
क्या इसका यह मतलब?
कूल.
>> उन 2 अलग अलग दृष्टिकोण हैं.
उन लोगों को इस समस्या को हल करने के लिए एक ही दृष्टिकोण नहीं कर रहे हैं.
कई अलग अलग बातें कर रहे हैं कि
अगर कोई कर सकता है, और कई व्यवस्थाएं वहाँ बाहर हैं.
कोणीय और रीढ़ पूरी कहानी बता नहीं है.
अपने अंतिम परियोजनाओं के साथ भाग्य अच्छा है, और बहुत बहुत धन्यवाद.
[CS50.TV]