डेविड जे Malan: सब ठीक है, तो यह यहाँ म्यो हाथ है बैंड, एक जोड़ी जिनमें से हम CS50 अंतिम परियोजनाओं के लिए है. और कहा कि हम पंक्तिबद्ध एक प्रदर्शन था अग्रिम जहां अनिवार्य रूप में आप ऊपर यह काफी तंग हाथ यहाँ अप बैंड अपनी मांसपेशियों आंदोलनों को सुनता है तो सॉफ्टवेयर में मैप कर रहे हैं कि यहाँ पर कोल्टन के लैपटॉप के लिए जो था iTunes और है कि गीत पहले से ही पंक्तिबद्ध. बल्कि मुझे इस demoing से, कोल्टन प्रयोगशाला में किया गया है स्पष्ट रूप से सभी सप्ताह एक प्रदर्शन हो रही है एक बहादुर स्वयंसेवक के लिए तैयार है. किसी को आने के लिए करना चाहते हैं up-- पर पहली बार अपने हाथ को देखा. ऊपर आओ. [00:01:09] ठीक है. और तुम्हारा नाम क्या है? 

[00:01:13] दर्शक: उह, मारिया. 

[00:01:14] डेविड जे Malan: मारिया, तुम देखकर अच्छा लगा. यहाँ पर चलो. मुझे कोल्टन से मिलवा दो. कोल्टन, इस मारिया है. 

[00:01:21] COLTON: हाय, आपसे मिलकर अच्छा लगा. 

[00:01:23] डेविड जे Malan: सभी ठीक है, तो हम कर रहे हैं, एक कदम जा तुम डाल दिया है अपने प्रकोष्ठ करने पर यह यह सुंदर है कि इतना अपनी कोहनी के पास अप तंग. और इस बीच, चलो चलो हमारे गूगल ग्लास पर डाल और हम आज प्रौद्योगिकियों मिश्रण करेंगे. 

[00:01:33] COLTON: सबसे पहले हम पड़ेगा बातों में इस हुक. 

[00:01:36] डेविड जे Malan: ठीक है. वास्तव में, के रूप में अपने हाथ डाल दिया संभव के रूप में इस केबल के करीब इसलिए हम पहले इसे सिंक कर सकते हैं कि. 

[00:01:41] COLTON: चलो यह करते हैं. 

[00:01:42] डेविड जे Malan: और इस बीच, ताकि हर कोई एक करीब नज़र प्राप्त कर सकते हैं, हम एंड्रयू कैमरा टॉस हूँ वहाँ स्क्रीन पर. तो हम है कि एक यूएसबी केबल है मारिया armband में खामियों को दूर किया जा रहा है. और मुझे कोल्टन की स्क्रीन टॉस जाने अगले प्रोजेक्टर पर. 

[00:02:00] तो कोल्टन डिवाइस दर्ज की है एक म्यो इस केबल से जुड़ा अब के रूप में. और अब क्या है मारिया क्षण भर में क्या करने जा वास्तव में के माध्यम से चल रहा है अंशांकन कदम और सॉफ्टवेयर सिखाने कैसे उसकी मांसपेशियों जवाब वह जब कुछ पूर्व निर्धारित सॉफ्टवेयर समझता है कि इशारों. आप में जाने के लिए करना चाहते हैं स्क्रीन के सामने. ठीक है, प्रयास जारी रखें. 

[00:02:30] COLTON: इस तरह से जाना. और इस तरह से. और सही करने के लिए सभी तरह. वापस जाओ. 

[00:02:35] डेविड जे Malan: ठीक है. अलग नजरिए. यह आप नहीं है. यह हमें है. 

[00:02:40] मारिया: ठीक है. डेविड जे Malan: नहीं के उच्च ऊपर यह है तो यह कदम चलो अपनी कोहनी के करीब, या भी सख्त. ठीक है. 

[00:02:52] ये रहा. इस CS52X के लिए एक अच्छा समय होगा. हम वहाँ जाना. 

[00:02:57] बहुत अच्छा. ठीक. अँगूठा कनिष्ठा के लिए. 

[00:03:02] बहुत अच्छा. अपनी उंगलियों बिखरा हुआ है. अच्छा है. सही लहर. यह मजे की बात है दिखा रहा है बाएं hand-- साथ आप 

[00:03:17] COLTON: हाँ, यह अजीब है. डेविड जे Malan: करने के लिए वेव सही और आगे बढ़ना. तेजी से आगे छोड़ या अगले करने के लिए. यह ठीक वेव सही है. 

[00:03:25] मारिया: मैं इंतज़ार don't--. 

[00:03:26] डेविड जे Malan: कुछ मदद की ज़रूरत है? 

[00:03:28] COLTON: तो तुम इस तरह से जा रहे हैं. मारिया: यह बदल रहा है दूसरी बात, यद्यपि. COLTON: यह है. डेविड जे Malan: हाँ मैं नहीं जानता ऐसा क्यों है कि आप एक leftie दिखा रहा है. COLTON: क्यों तुम try-- नहीं है बस इस तरह से जाने की कोशिश. 

[00:03:38] डेविड जे Malan: नहीं? शायद अपने हाथ तक पहुँचने एक छोटे से straighter बाहर और इस तरह से यह अधिक आकस्मिक बनाने. हाँ, ठीक है, चलो. 

[00:03:48] मारिया: मैं माफी चाहता हूँ. डेविड जे Malan: यह तुम्हारी गलती नहीं है. COLTON: यह ठीक है. डेविड जे Malan: सब ठीक है. Well-- 

[00:03:56] मारिया: हम तो, इस को छोड़ देना चाहिए? डेविड जे Malan: हाँ, चलो हुक से तुम चलो. किसी को एक करना चाहते हैं तो अगर इस अत्याधुनिक का उपयोग अंतिम परियोजना हार्डवेयर, पता ही यह बस हो सकता है करने के लिए इस्तेमाल किया जा रहा है एक छोटे से ले. और this-- वास्तविकता यह है वास्तव में बहुत किनारे खून बह रहा है. 

[00:04:10] यह कहा जाता है क्या है डेवलपर किट, जो अनिवार्य रूप से एक पूर्व रिहाई के लिए होती है ताकि लोगों को वास्तव में कर सकते हैं कि इसके साथ लड़ने this--, आंकड़ा बाहर कैसे लोगों के शरीर काम प्रौद्योगिकी के साथ. अगर आप चाहते हैं तो बाद में, व्याख्यान के बाद, हम आपको आने दे सकते हैं और उस पर एक और चाकू ले. तालियों की लेकिन अन्यथा, एक दौर, अगर हम पर आने के लिए मारिया के लिए, कर सकते थे. 

[00:04:26] मारिया: धन्यवाद. 

[00:04:28] डेविड जे Malan: धन्यवाद. हम इस पर लटका देंगे, लेकिन हम दे देंगे you-- कैसे यहाँ एक तनाव गेंद के बारे में? ओह, and-- if-- हाँ, धन्यवाद. ठीक है. तुम थे उत्सुक के लिए, तो अगर ध्वनि विकल्प के साथ अपरिचित हम वहाँ बनाया कि इससे पहले, एक अद्भुत टीवी बताते हैं कि तुम बिल्कुल चाहिए द्वि घातुमान देख Netflix पर हो यहाँ यह एक है. 

[00:04:51] अध्यक्ष 1: देवियों और सज्जनों, जोश नामक एक जादूगर. 

[00:05:04] डेविड जे Malan: और जाहिर है, यह है एक बात अब व्याख्यान के दौरान मुझे पाठ करने के लिए. मुझे लगता है कि कहा जा रहा हूँ मारिया कल जन्मदिन था. से तो खुश जन्मदिन मारिया को CS50 के रूप में अच्छी तरह से. 

[00:05:18] तो अगर आप हाल के महीने में पढ़ सकते हैं कि यहां इस सज्जनों, स्टीव वास्तव में कौन था बाल्मर, कॉलेज में 1977 का वर्ग, हाल ही में माइक्रोसॉफ्ट के लिए सेवानिवृत्त. उन्होंने यहां एक स्नातक था फिर कुछ साल बाद पर खुद को पाया स्टैनफोर्ड बिजनेस स्कूल वह एक फोन मिला जब उसकी जो एक दोस्त से फोन नीचे हॉल में रहते थे यहां हार्वर्ड में उसके पास से. उस मित्र के नाम बिल था गेट्स, और समय पर, वह होने के लिए स्टीव की भर्ती करने की कोशिश कर रहा था पहले व्यापार व्यक्ति, वास्तव में, एक छोटी सी कंपनी में माइक्रोसॉफ्ट नाम है. 

[00:05:45] एक लंबी कहानी छोटी, स्टीव अंततः जीत पर गया था, जब वे माइक्रोसॉफ्ट में शामिल हो गए सिर्फ 30 कर्मचारी थे. और समय वह काफी हाल ही में सेवानिवृत्त हुए, कंपनी 1,00,000 कर्मचारी थे पिछले कुछ वर्षों में. और इसलिए एक वेबसाइट किनारे के रूप में जाना वीडियो पर इस श्रद्धांजलि तैयार हम हम चाहते हैं कि सोचा था कि आप देता है कि साझा अभी कितना ऊर्जा स्टीव की भावना वह देता है किसी प्रस्तुति के लिए लाता है. [वीडियो प्लेबैक] -Microsoft एक चौथाई बच्चे की तरह है. बच्चे घर छोड़ कर. इस मामले में, मुझे लगता है मैं घर जा रहा हूँ. विधेयक अरे, whazzap? 

[00:06:23] -Wazzap? 

[00:06:24] हे, wazzap? हम दिया गया है एक भारी अवसर. और बिल हमें उस अवसर दिया. मैं उसके लिए बिल अदा करना चाहता हूँ. मैं आपको बहुत चाहता हूँ. नवाचार की गति धीमा करने के लिए नहीं जा रहा है. 

[00:06:42] यह तेजी से और तेजी लाने के लिए जा रहा है. कुछ प्रतियोगियों हो सकता है कि दुर्भाग्य से समाप्त हो जाते हैं! 

[00:06:54] मैं इस कंपनी से प्यार है. हाँ! मैं एक पीसी हूं, और मैं इस कंपनी प्यार करता हूँ! 

[00:07:08] डेवलपर्स, डेवलपर्स, डेवलपर्स, डेवलपर्स, डेवलपर्स, डेवलपर्स, डेवलपर्स, डेवलपर्स. हाँ! वेब डेवलपर्स! 

[00:07:19] वेब डेवलपर्स! वेब डेवलपर्स! सुनो और क्या आप कोई अतिरिक्त शुल्क में जाओ! 

[00:07:28] एमएस-डॉस कार्यकारी, एक नियुक्ति कैलेंडर, एक कार्ड के ढेर, एक नोट पैड, एक घड़ी, एक नियंत्रण कक्ष. और, यदि आप यह विश्वास कर सकते हैं? Reversie! 

[00:07:35] सीडी के लिए उन्हें जला दो! एमएसएन के लिए उन्हें पद! आप दोस्तों के लिए उन्हें मेल! 

[00:07:40] एक क्लिक के साथ सभी! एक माइक्रोसॉफ्ट, एक रणनीति, एक team-- अनुशासित, पेशेवर, ध्यान केंद्रित, और हम करते हैं कि सभी में विशेषज्ञ. मुझे एक पुरानी फिल्म से एक लाइन का उपयोग करते हैं. 

[00:07:52] रिश्ते शार्क की तरह हैं. वे आगे बढ़ने या वे मर जाते हैं. मैं वास्तव में तकनीक लगता है कंपनियों को एक ही कर रहे हैं. 

[00:08:01] [अंत वीडियो प्लेबैक] डेविड जे Malan: तो हम खुश हैं स्टीव हमें शामिल हो जाएगा कि घोषणा यहाँ CS50 में पर अगले बुधवार हमेशा की जगह और यहां समय. अंतरिक्ष की संभावना सीमित हो जाएगा. और हां, तो व्यक्ति में हमें कृपया शामिल होने के लिए उसके बाद शीघ्र ही आज सिर या cs50.harvard.edu/register लिए. 

[00:08:22] और हम से पालन करेंगे मंगलवार धब्बे की पुष्टि. कि अगले करने के लिए तत्पर हैं CS50 में व्याख्यान के दौरान बुधवार. अब, अन्य समाचार में, मैं करने के लिए हुआ क्रिमसन में इस पार आ बस दूसरे दिन. 

[00:08:34] यह CS50 के स्टाफ में से एक है कि पता चला है और CS50 के छात्रों का कम से कम एक वर्तमान में यूसी के लिए चल रहा है अध्यक्ष और उपाध्यक्ष, जो मुझे वापस लाया अपने ही दिनों में वापस जब मैं बुरी तरह यूसी चुनाव हार गए. लेकिन उम्मीद की किरण उस में मैं हमेशा से है कहानी यह है कि बताओ मैं से एक यकीन कई कारणों से मैं हार चुनाव एक पूर्ण अभाव था सार्वजनिक बोलने के लिए एक प्रतिभा का. और तो बहुत ईमानदारी से, यह मुझे दिया, कि अनुभव मैं अपने जूनियर वर्ष, वास्तव में हस्ताक्षर करने के लिए लगता है हार्वर्ड कम्प्यूटर सोसायटी, के लिए जो समूह परिसर में है कि विभिन्न तकनीकी वार्ता रखती है और अन्य चीजें. और मैं उनके शिक्षण पदभार संभाल लिया सेमिनार और इसलिए , एक मौका था एक अद्भुत अवसर, वास्तव में इस पर काम शुरू करने के लिए. लेकिन इसके अलावा, मैं एक मौका था इस अनुभव के दौरान अपने आप सभी को और अधिक एचटीएमएल सिखाने के लिए. और इसलिए मैं ने कल रात procrastinated HTML आधारित वेबसाइट के माध्यम से देख मैं के लिए, 1997 की तरह '98 में की गई मेरी यहाँ इस तरह दिखता है जो अभियान. मुझे पता है. 

[00:09:29] Because-- और हां, नोटिस 1998 में इस अद्भुत डिजाइन निर्णय या whatnot. आप चाहते हैं पहली बात उपयोगकर्ताओं अपनी वेबसाइट पर जाकर पर करने के लिए एक और लिंक बस क्लिक करने के लिए है साधु के साथ यहां अपनी वेबसाइट में प्रवेश करने के लिए पीछे जहां एक डूबा पर्दे की तरह जाहिरा तौर पर मेरे अभियान मंच था. और यह आपको मिलेगा सब है आज सिर्फ एक स्क्रीनशॉट है. लेकिन मुझे लगता है जैसे, के माध्यम से पढ़ रहा था मेरे अभियान पोस्टर कल रात और मेरे मंच. 

[00:09:50] और मैं समय पर इतना गुस्सा था. यह दिलचस्प था was-- मेरे मंच. तो मैं तब से शांत हो गया है. लेकिन किसी दिन, मैं फिर से चलेंगे और इस समय बंद उम्मीद है कि बेहतर. 

[00:10:03] तो एचटीएमएल, मैं कर दिया जिसमें उस भाषा आप in-- कि जल्द ही ज्यादा more-- कर दूँगा हम किया गया है कुछ है देर के बारे में बात और काफी हद तक के लिए अब दी लेने कि हम अन्य भाषाओं के लिए पर स्थानांतरित किया है. लेकिन चलो बस एक पल के लिए विराम दें और संदर्भ में इन चीजों में से कुछ डाल दिया. तो एक वाक्य में, एचटीएमएल क्या है? 

[00:10:18] या, क्या के लिए प्रयोग किया जाता है? कोई है? हां. 

[00:10:20] दर्शक: वेबसाइटों के लिए मार्कअप. डेविड जे Malan: वेबसाइट के लिए मार्कअप. तो यह एक मार्कअप भाषा है कि आप एक वेब पेज संरचना की सुविधा देता है. हैडर यहां तक ​​जाता है, शीर्षक यहाँ जाता है, शरीर यहाँ जाता है. यह इस है, गहरा है विस्तार का है कि तरह italics--. 

[00:10:33] ठीक है, अच्छा. तो सीएसएस you-- और मैं देता है वहाँ कुछ स्वतंत्रता ले लिया बोल्ड का सामना करना पड़ और इटैलिक क्योंकि साथ बेहतर है कि इस के साथ लागू किया है. सीएसएस क्या is--? एक वाक्य में कहते हैं. किसी को भी सब पर. हाँ. 

[00:10:46] दर्शक: अलंकरण और इसे डिजाइन करने के लिए कैसे की तरह सामान,. डेविड जे Malan: ठीक है, अच्छा. आप की अनुमति है कि अलंकरण इसे डिजाइन या यह चंद्रमा की झलक गहरा और तरह चीजों के साथ इटैलिक और रंग और भी अधिक जुर्माना तत्वों की छोटाबीजवाला स्थिति. यह की तरह आप चीजें लेने की सुविधा देता है पिछले मील उदाहरण के लिए, कि अगर ऐसा है, Pset7 में, आप पर ध्यान दिया होगा आपके पोर्टफोलियो पेज आप इस बिंदु पर कर रहे हैं पहले से ही एक डिफ़ॉल्ट तालिका कि कि आप उपयोगकर्ता का शेयर धारिता दिखाने के लिए करना और नकदी शायद बहुत भयंकर लग रहा है कोई सफेद स्थान के साथ डिफ़ॉल्ट रूप से. Crammed का सब कुछ तरह एक साथ पंक्तियों और स्तंभों में. 

[00:11:18] खैर, एक बिट के साथ सीएसएस, आप महसूस कर सकते हैं जैसे, आप वास्तव में उस tweak और यह कर सकते हैं बहुत अधिक परिचित और ज्यादा कुछ सुंदर को देखने के लिए. तो सीएसएस के बारे में है वेबसाइटों के stylization. लेकिन तब हम अभी तक एक और शुरू की हमें क्या करना है, जो भाषा, पीएचपी,? 

[00:11:36] बस क्या करते हैं? किसी को भी. परे उद्यम के लिए मिला पहले दो पंक्तियों. हाँ. 

[00:11:40] दर्शक: गतिशील सामग्री उत्पन्न. डेविड जे Malan: बिल्कुल सही. गतिशील सामग्री उत्पन्न. और अगर आप ऐसा कर सकते हैं भाषा के किसी भी संख्या. हम यह है क्योंकि PHP का उपयोग करने के लिए हो सी वाक्य रचना के समान भाग में. 

[00:11:50] लेकिन PHP ठीक है कि नहीं करता है. यह आप गतिशील उत्पादन उत्पन्न करने देता है. और कहा कि उत्पादन के कुछ हो सकता है एचटीएमएल, हम आम तौर पर कर रहा है के रूप में. यह है क्योंकि यह भी है एक प्रोग्रामिंग भाषा है, तंत्र जो के माध्यम से हम डेटाबेस के लिए बात कर सकते हैं. 

[00:12:03] और हम करने के लिए प्रश्नों कर सकते हैं याहू जैसे अन्य सर्वरों और प्रोग्राम के लिए कुछ भी कर सच है कि आप अन्यथा हो सकता है ऐसा करने के लिए एक कंप्यूटर को मजबूर करना चाहते हैं. तो PHP के लिए हमें शुरू कर देता है गतिशील रूप से सामग्री outputting. इस तर्क से तो, मैं नहीं था वापस 1998 में एक गतिशील वेबसाइट. 

[00:12:16] यह सिर्फ एक स्थिर वेब पेज था. मेरी सामग्री द्वारा बदला जा सकता था मैन्युअल एडिट या कुछ समकक्ष के साथ. लेकिन PHP हम इस्तेमाल किया है या क्या है इस्तेमाल कर सकते थे, बल्कि, तरह कुछ के लिए Frosh आईएमएस वेबसाइट, जो पंजीकरण लेना चाहिए था और users-- चीजों की एक सूची प्रबंधित वास्तव में अधिक बदल रहे हैं हम भी हो, भले ही समय, पर्ल, एक अलग उपयोग करने के लिए समय पर भाषा. 

[00:12:35] और फिर अंत में, हम शुरू की SQL-- संरचित क्वेरी भाषा. इसलिए अभी तक किसी अन्य भाषा कि क्या के लिए प्रयोग किया जाता है? क्या के लिए इस्तेमाल किया? हम slight-- उद्यम कर सकते हैं ठीक है, हम नहीं जा रहे हैं बहुत दूर पाने के लिए यहाँ ऑर्केस्ट्रा से. दर्शक: यह एक प्रोटोकॉल है डेटाबेस के लिए बात करने के लिए इस्तेमाल किया. डेविड जे Malan: एक प्रोटोकॉल डेटाबेस के लिए बात करने के लिए इस्तेमाल किया. मुझे tweak करते हैं. यह प्रयोग किया जाता है एक प्राकृतिक भाषा है databases-- का चयन करने के लिए बात करने के लिए और सम्मिलित करता है और हटाता और अद्यतन और वास्तव में यहां तक ​​कि अधिक सुविधाओं कि हम भी डुबकी लगाई नहीं है में लेकिन आपके पास explore-- चाहते हो सकता है कहते हैं, के लिए एक अंतिम परियोजना का पता लगाने के लिए. इसलिए इन विभिन्न टुकड़े कर रहे हैं. 

[00:13:09] और उम्मीद है कि Pset7, भले ही इसके विनिर्देश, काफी लंबे समय से है यह आप चलने के लिए जानबूझ कर लंबा है कैसे ये बातें सब कर सकते हैं के माध्यम से एक साथ टाइप किया. अब सोमवार हम पर हमारी पिछली भाषा शुरू की हम औपचारिक रूप में परिचय हूँ कि जावास्क्रिप्ट है कि course--. यह, पीएचपी की तरह है, एक व्याख्या की भाषा. 

[00:13:25] लेकिन एक प्रमुख अंतर मैं सोमवार को प्रस्तावित PHP के जबकि क्रियान्वित या जाता है सर्वर पर व्याख्या की जा रही है, जो इस मामले में CS50 उपकरण है, या कुछ वाणिज्यिक वेब हो सकता है इंटरनेट पर सर्वर, जावास्क्रिप्ट आम तौर पर ग्राहक की ओर चलता है कि एक भाषा है ब्राउज़र में नहीं सर्वर side-- तो. कौन सी बस मैं जब खोला, जैसे कहना है फेसबुक स्रोत कोड अप और सभी पाया उन .js फ़ाइलों की, निहितार्थ था आप फेसबुक या यात्रा जब कि सबसे वेबसाइटों इन दिनों, तुम मिल न केवल एचटीएमएल, न केवल सीएसएस, लेकिन जावास्क्रिप्ट की एक पूरी गुच्छा अक्सर .js फ़ाइलों के रूप में कोड. और फिर यह browser-- अपनी खुद की है उस कोड निष्पादित करता है कि मैक या PC--. 

[00:14:03] लेकिन आपका ब्राउज़र यह कार्यान्वित. आप एक sandbox के प्रकार में सोच सकते हैं. जावास्क्रिप्ट कोड नहीं होना चाहिए जिससे कि आपके कंप्यूटर पर फाइलों को नष्ट करने में सक्षम. यह करने में सक्षम नहीं होना चाहिए अपनी ओर से ईमेल भेजें. पाबन्दी का आपका ब्राउज़र प्रकार आप इसके साथ क्या कर सकते हैं. 

[00:14:17] तो उस अर्थ में, यह एक छोटी सी है कम शक्तिशाली, शायद, से सी लेकिन जावास्क्रिप्ट कर सकते हैं, के रूप में एक एक तरफ, सर्वर पर इस्तेमाल किया जा, हम बात करने के लिए नहीं हैं हूँ हालांकि इस संदर्भ में इसके बारे में. तो अब चलो एक साथ इन टाई करते हैं. एक सप्ताह से अधिक पहले, हम कुछ HTML प्रस्तुत left-- सुपर बोरिंग वेब पेज पर. 

[00:14:34] सिर्फ हैलो दुनिया कहते हैं. और फिर मैं पर प्रस्तावित सही हम किस तरह के विचारों को चोरी कर सकते हैं के बारे में हमारी चर्चा से सी में डेटा संरचनाओं और कैसे इस पदानुक्रम के बारे में सोचना बाईं तरफ मार्कअप भाषा खींचा या स्मृति में लागू किया जा सकता है नोड्स के साथ एक वास्तविक वृक्ष संरचना के रूप में संकेत और विवरण के उन प्रकार के और. सही पर, हम कॉल एक DOM-- दस्तावेज़ कि जो अभी है Model-- वस्तु पेड़ कह का एक अच्छा तरीका है. 

[00:14:56] अब, क्यों यह उपयोगी है इस तरह से यह लगता है कि? अब साथ क्योंकि जावास्क्रिप्ट, क्योंकि हम इस में खेलने के लिए हो जाता है कि कोड पर्यावरण, है कि वास्तविक एचटीएमएल ब्राउज़र के लिए भेजा गया पहले से ही है और पहले से ही है द्वारा स्मृति में लोड किया गया आपके कंप्यूटर में एक पेड़ में ब्राउज़र इस तरह राम, हम JavaScript का उपयोग कर सकते हैं वास्तव में करने के लिए पार या चलना या खोज या डोम वृक्ष लेकिन हम चाहते हैं कि बदलते हैं. तो वास्तव में, अगर आपको लगता है के बारे में facebook.com, आप चैट सुविधा का उपयोग करते हैं, तो आप अगर उपयोग जीमेल और Gchat सुविधा, आप जहाँ कुछ भी बार-बार आने वाले संदेश और फिर, उन संदेशों, शायद रहे हैं जैसे, लाइट टैग, सूची आइटम टैग, हो सकता है. 

[00:15:35] या हो सकता है कि वे सिर्फ रहे दिखने रखना कि divs हर बार जब आप एक त्वरित संदेश मिलता है. और हां कि बस क्या मतलब है फेसबुक या गूगल कर रहा है किसी भी समय आप एक मिलता है सर्वर से संदेश, वे शायद जावास्क्रिप्ट का उपयोग कर रहे हैं सिर्फ एक नोड जोड़ने के लिए इस के लिए यह करने के लिए एक और नोड tree-- तो नेत्रहीन बस लग रहा है कि पेड़ अपनी स्क्रीन पर पाठ की एक नई लाइन की तरह. लेकिन वे डालने रहे इस डेटा संरचना में. 

[00:15:57] जैसे वर्गों में तो CS124 और दूसरों को, तुम हूँ वास्तव खिलाफ अधिक कोड लिखना इस तरह से डेटा संरचनाओं. लेकिन अब जावास्क्रिप्ट में लिए, हम सिर्फ मान लेंगे हम इस कार्यशीलता के सभी मिल भाषा खुद से मुक्त करने के लिए. तो चलिए एक उदाहरण देखते हैं. 

[00:16:09] मुझे form.html नामक एक फ़ाइल को खोलने दें. यह सुपर आसान है. यह सिर्फ इस तरह दिखता है. 

[00:16:15] कोई सीएसएस, सौंदर्यशास्त्र के लिए नहीं सोचा. यह विशुद्ध रूप से कार्यात्मक है और जाहिरा तौर पर मैं हूँ एक ईमेल के लिए पूछ रही है, एक पासवर्ड, फिर से पासवर्ड, और फिर एक चेक कुछ नियम और शर्तों से सहमत करने के लिए. क्या इस बात के लिए स्रोत कोड शायद कुछ है की तरह लग रहा है आप एक साथ अनुमान लगा सकते अब सोचा की थोड़ा सा. मैं यहां एक फार्म टैग मिल गया है. 

[00:16:32] एक कार्रवाई जाहिरा तौर पर करने जा रहा है register.php नामक एक फाइल करने के लिए जाना. मैं उपयोग करने के लिए जा रहा हूँ विधि प्राप्त है. और फिर मैं एक पाठ मिल गया है जिसका नाम ईमेल है क्षेत्र. 

[00:16:40] मैं एक पासवर्ड क्षेत्र मिल गया है पासवर्ड जिसका नाम है. मैं एक और मिल गया है जिसका नाम पासवर्ड क्षेत्र कुछ हद तक मनमाने ढंग से पुष्टि है. यह सिर्फ एक और एचटीटीपी पैरामीटर है. 

[00:16:49] और फिर हम हम छोड़कर इन इस्तेमाल नहीं किया है Frosh आईएमएस class-- में प्रदर्शन के बाद है जो एक चेक बॉक्स बस प्रकार की जांच के बराबर होती है. और मुझे लगता है कि समझौते को बुलाता हूँ. तो मैं एक तरह से मनमाने ढंग से लेकिन आसानी से इन क्षेत्रों का नाम. इस फार्म हो जाता है अब इतना है कि जब प्रस्तुत है, चलो देखते हैं क्या होता. मैं malan@harvard.edu करते हैं, मैं लाल रंग की एक पासवर्ड करूँगा. मैं कुछ भी नहीं की एक पासवर्ड करूँगा. का सहयोग नहीं करते हैं. 

[00:17:10] और मैं बॉक्स को चेक नहीं किया जाएगा. मुझे क्लिक करते हैं. और यह एचएम, आप पंजीकृत कर रहे हैं, कहते हैं. ज़रूरी नहीं. 

[00:17:16] लेकिन यूआरएल बदल दिया है. तो इस प्रपत्र में स्पष्ट रूप से अनुमति दी गई थी register.php को प्रस्तुत करने के लिए. लेकिन शायद, मैं होना चाहिए इन त्रुटियों में से कुछ को पकड़ने. अब, Pset7 और में कुछ हमारे व्याख्यान उदाहरण के, हम आम तौर पर बाहर प्रिंट होगा यहां एक बड़ा लाल त्रुटि संदेश कह रही है, नाम गुम, या पासवर्ड याद आ रही है. हम और इससे पहले कि हम है कि कुछ किया है किया सर्वर साइड त्रुटि का पता लगाने. 

[00:17:37] लेकिन कई वेबसाइटों इन दिनों ग्राहक की ओर त्रुटि का पता लगाने करना जहां यूआरएल नहीं बदलता है. पूरे पृष्ठ ताज़ा नहीं है. आप त्वरित प्रतिक्रिया मिल ब्राउज़र से. शायद कुछ लाल हो जाता है. 

[00:17:48] शायद आप एक पॉप अप मिलता है. लेकिन आप को भेजने समय बर्बाद मत करो अधूरा है कि सर्वर डेटा. तो हम कैसे हो सकता है चलो देखते हैं साथ ही उस सुविधा को प्राप्त करने. 

[00:17:56] , मुझे form1.html के लिए चलते हैं जो एक ही लग रहा है. लेकिन इस बार अगर मैं ऐसा malan@harvard.edu और मैं क्रिमसन लिखें और मैं आगे सहयोग नहीं करते लेकिन रजिस्टर पर क्लिक करें, अब नोटिस. यह कामुक समाधान नहीं है. मैं कम से कम इस त्रुटि पकड़ लिया. और मैं सतर्क का उपयोग किया है JavaScript-- में समारोह जो हम केवल कक्षा में प्रयोग कर रहे हैं. सामान्य में, आप इस का उपयोग नहीं करना चाहिए यह बहुत जल्दी से बाहर निकल सकते हैं क्योंकि नियंत्रण की. लेकिन मेल नहीं खाते पासवर्ड त्रुटि है. 

[00:18:19] मुझे आगे जाना है और ठीक क्लिक करते हैं. लेकिन क्या यहां महत्वपूर्ण takeaway यूआरएल परिवर्तन नहीं किया है. तो मैं परेशान नहीं किया है बर्बाद सर्वर के समय यह पूछ मैं हो सकता था कि एक प्रश्न अपने आप को इस सवाल का जवाब समझ से बाहर है. 

[00:18:30] और उपयोगकर्ता, भले ही इस बारे में बात कर रहे हैं उपयोगकर्ता की तुलना में लंबे समय तक इस बारे में सोचने के लिए जा रहा है, त्वरित प्रतिक्रिया के लिए जा रहा है. कोई विलंबता के साथ नहीं है नेटवर्क कनेक्टिविटी. तो चलो इस स्रोत कोड को देखो. 

[00:18:40] Form1.html लग रहा है यहाँ structurally समान. फार्म वास्तव में एक ही है. लेकिन मैं यहाँ नीचे क्या किया देखते हैं. और ऐसा करने के लिए अलग अलग तरीके है. और मैं सबसे सीधे किया है अभी तक सबसे सुंदर तरीका अनुयायी लेकिन नहीं. मैं एक स्क्रिप्ट टैग है. मैं तो फोन document.getElementById ('पंजीकरण'). और मुझे लगता है कि मूल्य की दुकान फार्म में, एक चर. 

[00:19:04] तो मैं क्या किया है? आप सोच सकते हैं document.getElementById होने के रूप में एक विशेष समारोह है कि जावास्क्रिप्ट आप देता है सचमुच तुम एक हाथ कि नोड्स में से एक के लिए सूचक इस पेड़ में या आयतों. तो अब है कि क्या हमारे फार्म चर है जावास्क्रिप्ट में वास्तव में इशारा कर रहा है. 

[00:19:21] तो अब वाक्य रचना से भिन्न है सी लेकिन हम यहाँ कुछ बातें कर रहे हैं. एक, यह एक थोड़ा अजीब है सी बनाम निश्चित रूप से, देख लेकिन लाइन 35 पर दिखेगा. बाएं form.onsubmit पर तो. कि onsubmit है याद एक संरचना में एक क्षेत्र की तरह. आप फार्म चर के बारे में सोच बस एक सी संरचना की जा रही है, यह कुछ क्षेत्रों में हो सकता है. 

[00:19:42] दिन में वापस, हम छात्रों के नाम था, आईडी, घरों, खेतों की उन तरह. बस एक और क्षेत्र के रूप में onsubmit के बारे में सोच. लेकिन यह क्योंकि एक विशेष क्षेत्र है ब्राउज़र की उम्मीद करने के preprogrammed है .onsubmit एक मूल्य नहीं करने के लिए एक नंबर या स्ट्रिंग की तरह, लेकिन वास्तव में एक समारोह होने के लिए या एक समारोह का पता कंप्यूटर की स्मृति में. 

[00:20:02] और वास्तव में, कि क्या हो रहा है इस कीवर्ड यहाँ करता है. यह मेरे लिए एक नया समारोह देते हैं, कहते हैं. लेकिन इसका नाम क्या है जाहिर है, होने जा रहा? 

[00:20:09] सोमवार को वापस सोच. इस का नाम क्या है इस वाक्य रचना पर आधारित समारोह? नहीं, मेरा मतलब है, स्पष्ट रूप से नहीं है कोई नाम निश्चित रूप से associated-- नहीं मैं यहाँ पर प्रकाश डाला गया है कि क्या में. 

[00:20:21] लेकिन वह वास्तव में ठीक है. यह एक गुमनाम समारोह है, या एक यह फोन हो सकता है कुछ के रूप में लैम्ब्डा समारोह. और ये सिर्फ मतलब यह अभी भी एक समारोह है. यह आप नाम से यह नहीं कह सकते, सिर्फ है. लेकिन यह ठीक है. फिर, क्योंकि ब्राउज़र की गई है गूगल जैसी कंपनियों द्वारा preprogrammed माइक्रोसॉफ्ट या मोजिला या दूसरों के लिए या सिर्फ इतना पता है कि .onsubmit क्षेत्र अगर एक फार्म तत्व है के अंदर मूल्य, एक function-- के रूप में व्यवहार एक समारोह सूचक, अगर तुम जाएगा. फार्म प्रस्तुत है और जब यह कहते हैं. 

[00:20:46] तो क्या कोड निष्पादित किया जाना चाहिए जब फार्म प्रस्तुत है? जाहिर है, सब कुछ घुंघराले ब्रेस के अंदर. और यह सिर्फ शैलीगत है. 

[00:20:53] आप की तरह यह कर सकता है हम CS50 में करते हैं. लेकिन जावास्क्रिप्ट में, ज्यादातर लोगों को एक ही लाइन पर रख देते हैं बस इसे और अधिक स्पष्ट रूप से है क्योंकि उस कीवर्ड समारोह के साथ जुड़े. तो अब मैं क्या कर रहा हूँ? 

[00:21:03] Form.email.value के बराबर होती हैं खाली स्ट्रिंग या कुछ भी नहीं, यहाँ है मैं कहने जा रहा हूँ जहाँ एक चेतावनी, यदि आप अपने ईमेल पते प्रदान करना होगा और फिर झूठी वापसी. और यह कि वापसी झूठी है कि प्रस्तुत किया जा रहा से फार्म रोकता है. इस बीच, पासवर्ड मूल्य है अगर खाली, मैं उपयोगकर्ता पर चिल्लाना जा रहा हूँ और आप एक पासवर्ड प्रदान करना होगा, कहना. 

[00:21:21] इस बीच बातें हो रही है यहां एक छोटे से शौक़ीन. Form.password.value नहीं करता है बराबर form.confirmation.value, अन्य क्षेत्र, पर चिल्लाना उपयोगकर्ता कि पासवर्ड वे के रूप में मेल नहीं खाते एक पल पहले नहीं किया था. और फिर यह एक एक थोड़ा sexier मैं क्योंकि मैं धारणात्मक जानता था कि पता जाँच एक चेक बॉक्स का नाम है. 

[00:21:40] इसलिए मैं सिर्फ एक विस्मयादिबोधक उपयोग कर सकते हैं चेक नहीं है अगर बिंदु कहना checked-- यह बूलियन है सच है या false-- मूल्य, मुझे लगता है कि कारण के लिए उपयोगकर्ता पर चिल्लाना करेंगे. अन्यथा, हम के माध्यम से मिलता है इन स्थितियों के सभी, सिर्फ सच वापसी करते हैं. प्रपत्र प्रस्तुत किया करते हैं. और यह तो कुछ नहीं होगा. 

[00:21:56] क्रिमसन में टाइप चलो. बॉक्स की जाँच करते हैं, रजिस्टर पर क्लिक करें. और अब मैं अपने गंतव्य के लिए जाने के माध्यम से. अब, वहाँ कोई डाटाबेस नहीं है. दिलचस्प कुछ भी नहीं है register.php में. मैं बस कुछ करने की जरूरत वास्तव में करने के लिए बात करने के लिए. तो मुझे यहाँ, थामने करते हैं. हम अभी क्या किया है पर कोई सवाल या इस नई वाक्य रचना के कुछ क्या है? हाँ, ठीक है? 

[00:22:17] दर्शक: तो किसी भी चेकबॉक्स स्वचालित रूप से एक बूलियन है. आप की तरह है कि यह घोषणा करने के लिए नहीं है. 

[00:22:21] डेविड जे Malan: सही. से आप के लिए भेजा है कि किसी भी चेकबॉक्स आपकी जावास्क्रिप्ट कोड को एक HTML फार्म एक के रूप में, हाँ, इलाज किया जाएगा बूलियन सही है या गलत value--. यह एक अच्छा सवाल है. अन्य मूल्यों जबकि, की बेशक, पाठ, उर्फ ​​तार किया गया है. 

[00:22:36] ठीक है, तो मुझे जाने थोड़ा आगे उल्टा. इस की पूरी बात क्या थी? अभी स्पष्ट होना करने के लिए. की तरह, हम पहले से ही भी Pset7 से जानते हैं, और यहां तक ​​कि पिछले हफ्ते के व्याख्यान से हम स्पष्ट रूप से जांच कर सकते हैं कि उदाहरण, उपयोगकर्ता हमें दे अगर $ _GET $ _POST देखना एक खाली मूल्य. PHP में खाली समारोह याद रखें. 

[00:22:54] तो अभी क्या है, स्पष्ट होना हम यह भी हो सकता है एक कारण इस त्रुटि की जाँच करना चाहते हैं ब्राउज़र के अंदर? यहां प्रेरणा क्या है? हाँ. 

[00:23:06] दर्शक: तेज, और तुम नहीं करते सर्वर से बेकार डेटा भेजने. डेविड जे Malan: अच्छा. यह तेजी से है. आप बेकार न भेजें सर्वर से डेटा. 

[00:23:12] तो आप एक अधिक वापस मिल तत्काल प्रतिक्रिया. और कुल मिलाकर, उपयोगकर्ता अनुभव बेहतर है. विकल्प के बारे में सोचो. 

[00:23:17] Gmail-- के लिए और था कई साल पहले का मामला. आप एक नया ईमेल आपके जीमेल मिला मान लीजिए खाता, लेकिन एक ही रास्ता के माध्यम से ऐसे ही, को देखने के लिए, पूरे पृष्ठ को फिर से लोड. या फिर आप पर क्लिक करें लगता है एक लिंक एक ई-मेल को पढ़ने के लिए. 

[00:23:29] सब कुछ इतनी पुनः लोड करने के लिए है आप ईमेल देख सकते हैं. या फिर आप एक चैट संदेश मिल Facebook--. आप पुनः लोड जब तक आप इसे देख नहीं है पेज या कुछ लिंक पर क्लिक करें. 

[00:23:36] की तरह, इस भय से एक होगा कष्टप्रद उपयोगकर्ता अनुभव. और यह, यह की तरह था क्या है स्पष्ट रूप से, पहले मैं यूसी के लिए भाग गया जब और वेब काफी कम गतिशील था लोकप्रिय रूप और जावास्क्रिप्ट नहीं था के रूप में यह अब है. और बातें ज्यादा हो रही है अधिक गतिशील और भी बहुत कुछ इस अर्थ में कि ग्राहक की ओर. 

[00:23:49] लेकिन वहाँ एक पकड़ यहाँ है, और इस एक कष्टप्रद पकड़ लिया की तरह है. बस आप ग्राहक पक्ष जोड़ने क्योंकि इस तरह का पता लगाने मतलब यह नहीं है आप या छोड़ देना चाहिए कर सकते हैं सर्वर साइड का पता लगाने. आप अनिवार्य रूप से अपने डाल करना चाहते हैं दोनों स्थानों में जाँच त्रुटि. एक था क्या वजह सीखा सबक की लेख से मैं कुछ अंश पढ़ा इस बेवकूफ सीएमएस system-- साथ से था कि सामग्री प्रबंधन System-- अपने प्रमाणीकरण प्रणाली को लागू करने, क्या तंत्र के माध्यम से अपने लॉगिन? जावास्क्रिप्ट. 

[00:24:20] दर्शक: जावास्क्रिप्ट. डेविड जे Malan: जावास्क्रिप्ट, वास्तव में, सही? यह जावास्क्रिप्ट का उपयोग किया गया था. और सचमुच, तुम लोगों को है शायद थोड़ा सा खेला क्रोम के इंस्पेक्टर के साथ. मैं इसे पा सकते हैं, तत्व का निरीक्षण किया. 

[00:24:30] मुझे क्या करना पर चलते हैं क्रोम के सभी विकल्पों की. और यह यह करना कितना आसान है एक ब्राउज़र में जावास्क्रिप्ट को अक्षम. नहीं, कोई और जावास्क्रिप्ट की जाँच करें. 

[00:24:38] तो निष्पक्षता में, एक बहुत इन दिनों वेब की सिर्फ इसलिए कि तोड़ने के लिए जा रहा है जीमेल और अन्य sites-- मान लें कि Facebook-- जावास्क्रिप्ट सक्षम है. लेकिन आप बेवकूफ कुछ कर रहे हैं जैसे ही उपयोगकर्ताओं इनपुट मान्य और के लिए यह जाँच ग्राहक पक्ष पर त्रुटियों, एक विरोधी आसानी से कर सकता है. और फिर भी होशियार तुम लोगों की तरह दुश्मन अब टेलनेट या कर्ल इस्तेमाल कर सकते हैं या सिर्फ कमांड लाइन आदेशों और वास्तव में सर्वर को संदेश भेजने कि इसी प्रकार की जाँच की त्रुटि नहीं कर रहे हैं. 

[00:25:05] तो यह एक से अधिक है यूजर इंटरफेस निर्णय यह तकनीकी एक वास्तविक है से improvement-- को लागू कुछ इस तरह ग्राहक की ओर. तो अब एक नज़र, लेकिन फिर मैं ऑनलाइन टहलने के लिए स्थगित कर देंगे इस एक के लिए के माध्यम से. फार्म दो में, हम वास्तव में के माध्यम से चला गया और कोड एक छोटा सा साफ कर दिया. लेकिन मुझे एक के लिए स्थगित करते हैं वीडियो में हम संभावना हूँ बस आपको एक से पता चलता है कि Pset8 में एम्बेड कहा जाता है एक पुस्तकालय का उपयोग इसी तरह के वाक्य रचना एक सुपर, सुपर है जो jQuery के, जावास्क्रिप्ट में लोकप्रिय पुस्तकालय कि स्पष्ट है कि ज्यादातर लोगों बस इन दिनों का उपयोग और भी रूप में भ्रमित जा रहा जावास्क्रिप्ट ही. 

[00:25:37] और यह शामिल करने की आदत कुछ डॉलर के संकेत और दस्तावेज जैसे कीवर्ड यहाँ कोष्ठकों में. लेकिन फिर, मेरे लिए स्थगित करते हैं ऑनलाइन कुछ धीमी ट्यूटोरियल के बजाय सिर्फ सिंटैक्स में बंधे हो. के पर चलते हैं एक छोटे से कूलर कुछ इस के आवेदन के संदर्भ में. 

[00:25:50] विशेष रूप से तो, मुझे जाने दो आगे और यहाँ यह ऊपर खुला. चलो. हम वहाँ जाना. 

[00:25:59] मुझे यहाँ इस तस्वीर खोल दें. अनावश्यक रूप से जटिल देख, लेकिन यह नामक तकनीक का वर्णन AJAX-- अतुल्यकालिक जावास्क्रिप्ट और XML, जहां एक्सएमएल के लिए एक्स वास्तव में है अब कोई वास्तव में इस्तेमाल किया. यह कुछ का उपयोग करने के लिए जाता बाकी JSON बुलाया. 

[00:26:13] लेकिन यहाँ कैसे कुछ की तरह है गूगल मैप्स या Google धरती काम करता है. वास्तव में, मक्खी पर इस कोशिश करते हैं. मुझे आगे जाना है और खोल दें अपने ब्राउज़र पर क्रोम. 

[00:26:21] और, मुझे में चलते हैं , maps.google.com कहना. और वास्तव में, तुम बूढ़े हो अगर क्या याद करने के लिए पर्याप्त है, जैसे, MapQuest, दिन में वापस की तरह था और शायद वे अब भी इस तरह से काम करते हैं. आप something-- के लिए खोज करने के लिए इस्तेमाल किया 33 ऑक्सफोर्ड स्ट्रीट, कैम्ब्रिज, मास, के this-- आप करते हैं वास्तव में, आप अगर ऊपर पैन करना चाहता था और नीचे, बाएँ और दाएँ आप एक तरह दिखेगा बड़े शीर्ष पर तीर, और यह आप एक और दिखा सकते हैं यहाँ नक्शा फ्रेम. या फिर आप छोड़ दिया और क्लिक करेंगे यहां खत्म हो जाना, या किसी अन्य क्लिक करें और आप यहाँ पर जाना होगा. लेकिन इसके बजाय इन दिन, हम बेशक बस हम जा सकते हैं लेने के लिए दी कैम्ब्रिज के आसपास बहुत जल्दी बस क्लिक करके और खींचकर. लेकिन कुछ glitches वहाँ नोटिस. 

[00:26:59] मैं काफी तेजी से इस करते हैं, क्या हो रहा लगता है मैं खींचें के रूप में एक छोटी सी भी तेजी कंप्यूटर के लिए रखने के लिए? आप क्या देखते हैं? हाँ. 

[00:27:07] दर्शक: पिक्सल को ताज़ा नहीं है. डेविड जे Malan: पिक्सल को ताज़ा नहीं है. Actually-- और आप वहाँ वास्तव में, यह देख सकता है, आप ऑनलाइन और ठहराव देख रहे हैं इस या वास्तव में बातें धीमा once-- के लिए आप देखते हैं कि वहाँ जाऊँगा टाइल्स, चौराहों, या आयतों कि नक्शे से जब तक लापता हैं एक दूसरे विभाजन के बाद, अधिक डेटा, वास्तव में और अधिक छवियों स्क्रीन पर दिखाई देते हैं. और वास्तव में, हम देख कर ऐसा करते हैं तो की, Chrome-- हम कहते हैं Chrome's-- अप चलो देखते हैं. हम ऐसा नहीं कर सकते. 

[00:27:31] ओह, ओह. के maps.google.com खोल दें. मुझे फिर खिड़की बड़ा बनाते हैं. 

[00:27:36] वापस 33 ऑक्सफोर्ड स्ट्रीट पर जाएं. मैं हाल ही में किया गया था पर वेबसाइट क्या था? मैं करने के लिए इस तरह, निजी शेख़ी था अपने आप को मैं तो तत्काल संदेश था कि ऑनलाइन था जो किसी भी दोस्त जो यह सुनना चाहता था. कुछ वेबसाइट नहीं है. मैं यह तो Comcast-- लगता है एक बहुत बड़ा अमेरिकी आईएसपी. आप नए केबल के लिए, साइन अप करने के कर सकते हैं जब मॉडेम सेवा या केबल टीवी सेवा, वे बहुत हद तक एक रूप है जहां वे अपने पते के लिए पूछना. और इस अद्भुत है ऑटो पूरा बुलाया सुविधा, गूगल की तरह, कि भरने के लिए शुरू होता है अपने प्रश्न का उत्तर में. 

[00:28:04] समस्या वे स्वत: पूर्ण करना है, आप टाइप कि पहले चीजों पर. तो अगर आप 33 में टाइपिंग शुरू करते हैं, तो यह हर घर सचमुच आपको दिखाई देगा अमेरिका में है कि शुरू होता है संख्या 33 से करने के लिए जारी रखने से पहले आप अधिक टाइप करने की उम्मीद है. आप ऑक्सफोर्ड 33 टाइप करें तो, अगर तो यह है कि आप हर सड़क से पता चलता है अमेरिका में 33 ऑक्सफोर्ड में है कि चाहे शहर के अपने नाम, आप में कर रहे हैं कि. 

[00:28:25] और फिर आप टाइपिंग जारी है. और अंत में, यह वे नहीं है कि एहसास कैम्ब्रिज में अपने घर के लिए प्रस्ताव सेवा या ऐसा कुछ. लेकिन मुद्दा यह है, सबसे अधिक है ऑटो के गदहे कार्यान्वयन कभी पूरा करें. 

[00:28:34] और मैं बस से जा रहा हूँ इस स्पर्श करने पर फिर से. लेकिन अच्छे तरीके से कर रहे हैं जावास्क्रिप्ट और बुरे तरीके का उपयोग करें. और यह जरूरी है कि सबसे अच्छा नहीं है. 

[00:28:40] लेकिन इस से पहले यहां मुद्दा, निंदा, उपकरण यहाँ नीचे खोलने के लिए था और, डेवलपर उपकरण खोल हम पहले प्रोत्साहित किया है, और नेटवर्क को देखने के लिए टैब मैं वास्तव में तेजी से क्लिक के रूप में. और एक पूरी गुच्छा नोटिस का अनुरोध हुआ मिलता है. मैं घसीटा के बाद से यह सब हुआ. 

[00:28:57] और सबसे अधिक संभावना है, वास्तव में इन पंक्तियों का एक बहुत अब छवि स्लैश जेपीईजी हैं माइम प्रकार या सामग्री प्रकार. क्या कर रहा है क्रोम ऐसा इसलिए है क्योंकि मैं क्लिक करें और खींचें हर बार, क्लिक करें और, मैं, यह ओह, साकार है खींचें है टाइल के लिए गूगल पूछना जाने की जरूरत यहाँ पर है कि मानचित्र पर, जल्दी HTTP के माध्यम से इसे डाउनलोड, और फिर तथाकथित डोम में जोड़ने स्मृति पेड़ में वेब ब्राउज़र को प्रतिनिधित्व उपयोगकर्ता इतना है कि, मुझे, कि अद्यतन टाइल देखता है. और इस वजह से है AJAX के एक तकनीक बुलाया. वापस दिन में, यह वास्तव में उस मामले था आप अगर स्क्रीन पर क्या बदलना चाहते थे, आप ऊपर क्लिक करना होगा, नीचे, बाएँ, सही. और फिर एक नया पेज खुल जाएगा. लेकिन इन दिनों, सब कुछ अधिक गतिशील है. यह हम इंसानों होता तरीके से होता है यह वास्तव में सहभागी होगा उम्मीद है. और यह द्वारा इस को प्राप्त होता है नामक तकनीक का रास्ता शायद सबसे अच्छा है जो AJAX, एक उदाहरण से समझाया. सबसे पहले, मुझे आगे चलते हैं और एक फ़ाइल को खोलने के में quote.php बुलाया आज का वितरण कोड. 

[00:29:53] और फिर मुझे symbol-- वूप्स करते हैं. मुझे प्रतीक करते हैं = GOOG बस कुछ स्टॉक के लिए. या वास्तव में, चलो करते हैं Pset आज़ाद से एक. दर्ज करें. 

[00:30:05] और अब मैं वापस पाने के लिए क्या सूचना है. तो यह एक सच है कम PHP फ़ाइल कि मैं बस कोड उधार लेता लिखा है कि Pset7 के देखने समारोह से और इस घुंघराले ब्रेस का उपयोग कर बाहर spits और उद्धरण और पेट के अंकन, जाहिर है, के लिए मौजूदा स्टॉक की कीमत आप मिल के माध्यम से पारित है कि कंपनी. तो यह अलग है हम क्या है के सबसे से मैं कर रहा हूँ कि नोटिस में किया सचमुच बाहर थूकना क्या JavaScript कोड की तरह दिखता है. 

[00:30:27] वास्तव में, यह एक जावास्क्रिप्ट वस्तु है. वास्तव में, बस, और अधिक स्पष्ट करने की JSON-- Notation-- जावास्क्रिप्ट वस्तु आप कह रही है कि बस का एक अच्छा तरीका है बहुत जावास्क्रिप्ट में डेटा का प्रतिनिधित्व कर सकते हैं जैसे आप PHP में कर सकते हैं महत्वपूर्ण मूल्य जोड़े का उपयोग. मैं घोषणा करना चाहता था तो जावास्क्रिप्ट में एक चर करने के लिए, Zamyla का प्रतिनिधित्व करता है Zamyla-- के लिए एक संरचना instance-- और हम यह फोन करता हूँ छात्र, इस चर. उसकी आईडी घर है, एक है Winthrop, और नाम Zamyla है. 

[00:30:53] लेकिन मैं यह भी वस्तुओं की एक सरणी हो सकता है. इसलिए मैं वास्तव में करना चाहता था युक्त जावास्क्रिप्ट में एक सरणी कई ऐसी वस्तुओं, इस समय, कर्मचारियों का प्रतिनिधित्व मैं इन तीन हो सकता है वापस कोड का हिस्सा इन के लिए वापस करने के लिए वापस करने के लिए तीन पूर्व स्टाफ के सदस्यों को. तो वाक्य रचना, सुंदर PHP के लिए both-- के समान. लेकिन यह विशेष रूप से जावास्क्रिप्ट है. यह वस्तु अंकन है. तो इस बात के लिए उपयोगी है? 

[00:31:17] मैं कोड लिखते हैं कि बाहर spits JSON-- सामान Notation-- जावास्क्रिप्ट वस्तु है कि इस या सामान की तरह लग रहा है कि , Zamyla की संरचना की तरह लग रहा है मैं वास्तव में इसका उपयोग कर सकते हैं कार्यक्रमों में मैं लिखना. मुझे ajax0.html के लिए चलते हैं. और यह ज्यादा नहीं too-- सौंदर्यशास्त्र के लिए दिया सोचा. लेकिन देखो क्या होता है. 

[00:31:34] मुझे आगे जाना है और यहां मुक्त टाइप करते हैं. कहावत मिल पर क्लिक करें. और यूआरएल नहीं बदला है नोटिस. लेकिन मैं जाहिरा तौर पर के साथ एक पॉप अप मिला 0.15 डॉलर आज के पैसा शेयर मूल्य. तो सब बुरा नहीं. लेकिन अंतर यह है कि किसी भी तरह है इस डेटा सीधे मेरे पास वापस आया. लेकिन हम एक कदम की ओर ले चलो अधिक परिचित कुछ. इस के संस्करण में, मुझे जाने बोली जाओ, क्लिक करें मुक्त फिर से टाइप करें, और ओह now--, यह था वास्तव में jQuery के संस्करण. मैं नहीं था me-- तो जाने काफी काफी दूर तक तेजी से आगे. , मुझे संस्करण दो के लिए चलते हैं जो मैं चाहता था, जहां है. मैं यहाँ क्या किया है सूचना है. मैं एक वेब एक सुपर page-- है किसी वेब पेज का सरल संस्करण आप एक पाठ क्षेत्र के साथ आज का उपयोग हो सकता है यहाँ मुक्त करने के लिए और उसके बाद जाहिरा तौर पर बस पाठ. 

[00:32:14] यह जाहिर है, यहां एक रूप नहीं है. लेकिन मैं क्लिक करें अगर मिल बोली, अपने वेब पेज नोटिस हालांकि मैं के रूप में बदलने के बारे में है बस एक नया इंस्टेंट मैसेज मिला या मैं बस चले गए, हालांकि के रूप में नक्शा और अधिक डेटा प्राप्त करने की जरूरत वेब पेज के लिए गतिशील रूप से जोड़ा URL बदल कर और उपयोगकर्ता के बिना अनुभव बाधित हो रही है. दरअसल, मैं अभी भी कर रहा हूँ ठीक उसी place-- ajax2.html. 

[00:32:35] तो चलो इस उदाहरण में केवल देखो और यह हो रहा है कि कैसे देखते हैं. मुझे ajax2.html में चलते हैं. और पहले फार्म नोटिस. 

[00:32:44] यहाँ नीचे, मैं बदल रहा हूँ स्वत: पूर्ण बंद. कभी कभी यह हो जाता है ब्राउज़र यदि कष्टप्रद तुम्हें दिखाने के लिए कोशिश कर रहा है अपने पूरे इतिहास. तो आप द्वारा एचटीएमएल में यह कर सकते हैं बस ऑटो बंद को पूरा कह. 

[00:32:53] मैं इस पाठ क्षेत्र एक दिया है symbol-- प्रतीक के बजाय, एक आईडी. और अब, यह एक दिलचस्प सुविधा है. हम अवधि के बारे में बात नहीं की है लेकिन आप इसके बारे में सोच सकते हैं एक पैरा टैग या div टैग की तरह. यह एक यही कहा जाता है इन-लाइन तत्व, जो आप एक पैरा नहीं मिलेगा मतलब ऊपर और नीचे तोड़ने. यह सिर्फ बिना लाइन में रहने के लिए जा रहा है में प्रवेश के बराबर मार. तो मैं HTML के इस टुकड़ा दे दिया है एक अद्वितीय पहचानकर्ता निर्धारित किया मैं मनमाने ढंग से मूल्य कहा जाता है. और मैं एक सबमिट बटन है. 

[00:33:21] अब ऊपर here-- और यह है क्योंकि वास्तव में सुपर अद्भुत कैसे छोटे से कोड आप क्या करने के लिए लिख सकते हैं things-- अपेक्षाकृत साफ नोटिस मैं मैं अगर यहाँ क्या किया है इस पेज के सिर के ऊपर स्क्रॉल. मैं पहली बार में शामिल किया है मेरे सिर एक स्क्रिप्ट टैग कि वास्तव में संदर्भ रूप में एक जावास्क्रिप्ट कहीं फ़ाइल. इस संगठन से है कि, jQuery के लिखता है और यह सिर्फ आप नवीनतम दे रहा है उनके jQuery पुस्तकालय का संस्करण. 

[00:33:42] तो इस तेज की तरह की तरह है सी में शामिल है या PHP में की आवश्यकता होती है. आप स्क्रिप्ट टैग का उपयोग एक स्रोत विशेषता के साथ. लेकिन अब अपना खुद का कोड है यहाँ में ठीक हो जाएगा. 

[00:33:52] मैं एक समारोह में कहा जाता उद्धरण है नोटिस. और यह एक छोटे लग रहा है पहली नज़र में गुप्त. लेकिन इस के अलावा तंग करते हैं. मुझे एक चर बुलाया यूआरएल दे. सचमुच इस स्ट्रिंग यह निरुपित. तो, एक उद्धरण, डबल उद्धरण में जावास्क्रिप्ट बस मुझे एक स्ट्रिंग देता है. प्लस क्या करता है? कड़ी. 

[00:34:08] तो यह अब jQuery के वाक्य रचना है जो करने के लिए इस्तेमाल किया जा रहा है एक छोटे से लेता है. लेकिन यह सिर्फ मेरे डोम मिल जाने का मतलब जिसका अद्वितीय पहचानकर्ता प्रतीक है नोड. वहाँ मतलब हैशटैग अद्वितीय पहचानकर्ता प्रतीक. 

[00:34:21] में डॉलर के हस्ताक्षर सिर्फ मतलब कोष्ठक, इस लपेट गुप्त सॉस के jQuery में एक तरह से तो आप अतिरिक्त कार्यक्षमता मिलता है. और फिर .val जाहिरा तौर पर है एक समारोह, या हम अब कहते हैं, इस नोड के अंदर एक विधि कि बस आप मूल्य देता है. , कम बदसूरत और भ्रामक में तो यह पहली नज़र में लगता है, यह सिर्फ टाइप किया उपयोगकर्ता के साथ मिल का मतलब में, स्ट्रिंग के अंत में यह डाल यह concatenating द्वारा. बस इतना ही. 

[00:34:43] तो अब, पिछले तीन लाइनों. आप में से बहुत निचोड़ कर सकते हैं तीन लाइनों के बाहर कार्यक्षमता. एक के रूप में यह डॉलर के हस्ताक्षर, एक तरफ, सिर्फ एक उपनाम है एक विशेष वैश्विक चर के लिए jQuery का शाब्दिक बुलाया. 

[00:34:55] डॉलर के हस्ताक्षर सिर्फ अच्छा लग रहा है. तो jQuery के समुदाय बस की तरह के अपने विशेष प्रतीक के रूप में इसका इस्तेमाल किया. यह PHP में मतलब क्या मतलब नहीं है. जावास्क्रिप्ट में, डॉलर पर हस्ताक्षर बस वर्णमाला के अक्षर की तरह या एक चर के लिए एक नंबर. 

[00:35:07] आप बस नाम के रूप में यह हो सकता है. बस अच्छा लग रहा है. समुदाय तो एक उपनाम के रूप में इसे अपनाया jQuery के बुलाया अपने स्वयं के पुस्तकालय के लिए. 

[00:35:13] और यह सुपर लोकप्रिय है. तो JSON कि ठीक है कि मिलता है. यह एक समारोह है कि jQuery के पर लोगों ने लिखा है कि एक server-- से JSON हो जाता है जावास्क्रिप्ट वस्तु संकेतन. क्या यूआरएल से यह जा रहा है कि जानकारी पाने के लिए? जाहिर है यहां इस यूआरएल से. 

[00:35:27] और ब्राउज़र के रूप में क्या करना चाहिए यह इस प्रतिक्रिया वापस हो जाता है जल्द ही के रूप में? और यह AJAX का जादू करने के लिए इतना है, एक्सएमएल में speak-- अतुल्यकालिक जावास्क्रिप्ट. यह इस तरह के एक साथ देखने के लिए मुश्किल है हम यहां था ही सरल उदाहरण. 

[00:35:41] लेकिन इस में अतुल्यकालिक था भावना है कि मेरे कोड जब के लिए एक संदेश भेजा मार डाला सर्वर मुझे कुछ JSON मिल जाना. और यह सुपर फास्ट हुआ कि मैं एक जवाब नहीं मिला. लेकिन क्या दिलचस्प बात यह है कि है कोड की लाइन मेरे कंप्यूटर हैंग नहीं था. 

[00:35:55] मैं एक कताई आइकन नहीं देखा था. मैं खोना नहीं था अपने माउस स्थानांतरित करने की क्षमता. मेरा ब्राउज़र वास्तव में पूरी तरह से ठीक हो गया था. 

[00:36:01] रास्ता जावास्क्रिप्ट संभालती है क्योंकि निम्नानुसार सर्वर से प्रतिक्रिया है. आप आप क्या कहते होता रजिस्टर एक कॉलबैक समारोह, जो बस, अरे, जावास्क्रिप्ट का मतलब है. जैसे ही सर्वर के रूप में JSON के साथ प्रतिक्रिया करता है, इस अनाम समारोह कॉल करें. 

[00:36:18] और इस समारोह में पारित कृपया जो कुछ स्ट्रिंग सर्वर थूक एक तर्क डेटा के रूप में बुलाया. तो दूसरे शब्दों में, अगर मैं गतिशील कोडांतरण हूँ इस में गुजर एक यूआरएल quote.php नि: शुल्क या GOOG या whatnot तरह प्रतीक, मैं फिर कह रहा हूँ जावास्क्रिप्ट कि यूआरएल मिल जाना. ब्राउज़र कि याद रखें कुछ वापस जाने के लिए जा रहा है हम इस earlier-- देखा जैसे कि लग रहा है. 

[00:36:42] और क्या दूसरा तर्क यहाँ से JSON कह रहा है पाने के लिए इस समारोह फोन है जब सर्वर वापस हो जाता है यह 10 मिलीसेकंड है कि क्या अब या अब से 10 सेकंड से. और जैसे ही आप कर के रूप में, पेज के लिए मूल्य जोड़ने. इस वाक्य रचना यहाँ बस नोड मिल जाने का मतलब जिसका अद्वितीय पहचानकर्ता पेड़ से हम पहले भी देखा है कि अवधि price-- है. 

[00:37:01] एचटीएमएल नामक यह विधि बस, की जगह जाना कहते हैं Data.price साथ है कि वहाँ एचटीएमएल. Data.price क्या है? खैर, ब्राउज़र, याद करते हैं, मुझे यह वापस आ दिखाया. तो इस डेटा है. 

[00:37:14] और तो यह एक छोटे से गुप्त है अल्पविराम यहाँ देखने के लिए. लेकिन वास्तव में, मुझे यह करते हैं. मुझे बस इस पेस्ट करते हैं असली तेजी से एडिट में हम पता चला है की तरह है और यह दिखाने पहले Zamyla की संरचना. 

[00:37:27] क्या सर्वर वापस भेज रहा है है एक इस तरह दिखता है कि छोटी सी वस्तु. और तो data.price है बस मुझे .1515 दे रही है. चलती का तो एक बहुत भागों यहां सभी को एक बार. 

[00:37:39] लेकिन कुंजी takeaways है हम यह क्षमता है कि अतिरिक्त HTTP बनाने के लिए जावास्क्रिप्ट का उपयोग अनुरोध पृष्ठ को फिर से लोड करने के लिए बिना. और फिर हम वास्तव में कर सकते हैं मक्खी पर वेब पेज बदल जाते हैं. और यह पता चला है कि जावास्क्रिप्ट और अन्य भाषाओं अब इस्तेमाल किया जा सकता है न केवल वेब पृष्ठों के रूप बदलना, लेकिन वास्तव में सॉफ्टवेयर लिखने के लिए एक वास्तविक कंप्यूटर में, बस क्रोम या पसंद करने के लिए ही सीमित नहीं. 

[00:38:00] वास्तव में, आप कोल्टन होगा if-- हमें यहाँ वापस शामिल करना अपनी प्रयोगशाला कोड, और चांग के साथ-साथ? के बारे में बात कर रही है, आगे चलते हैं गुमनाम कार्यों और कॉलबैक और वास्तव में यहाँ भाग्य लुभाना रक्तस्राव के साथ एक लाइव डेमो के साथ अत्याधुनिक तकनीक, में से एक इन संभ्रांत मोशन उपकरणों. अब, इस उपकरण, याद करते हैं, एक छोटी सी यूएसबी डिवाइस है साथ ही उस beautiful-- है that-- कि अपने यूएसबी पोर्ट में प्लग. 

[00:38:25] और फिर यह इनपुट प्रदान करता है मानव इशारों के रूप में अवरक्त मुस्कराते का उपयोग पता लगाने के द्वारा, अनिवार्य रूप से, अपने हाथ से आंदोलनों. तो मारिया की कोशिश की क्या जबकि पर, इससे पहले पेशी थी वास्तव में बदल रहा है क्या महसूस आपके हाथ है, इस आधार पर अवरक्त है. तो यह भीतर आंदोलनों के लिए देख रहा है एक पैर या तो के क्षेत्र की तरह युक्ति स्वयं की. 

[00:38:46] तो क्यों मैं नहीं लेते यह पहली बार में एक वार? और चलो आगे जाना है और फेंक दो यहाँ ओवरहेड पर आप ऊपर. तो चलो यहाँ कोल्टन के लैपटॉप ऊपर डाल दिया. हम टीवी पर एंड्रयू मिल गया है. और तुम मुझे पहले ऐसा करने के लिए क्या करना चाहेंगे? 

[00:39:00] COLTON: आगे और बस जाओ इस आदमी पर अपने हाथ डाल और आप कुछ शानदार चमक दिखाई देगी. 

[00:39:04] डेविड जे Malan: बहुत अच्छा. यह सब वास्तविक समय में हो रहा है. ठीक. सब ठीक है, और हां. तो अच्छा. ठीक है, हम और क्या कर सकते हैं? 

[00:39:15] COLTON: अगली स्क्रीन पर जाने और देखते हैं. 

[00:39:17] डेविड जे Malan: सब ठीक है. 

[00:39:19] COLTON: एक मजाक सा खेल जहां आप रोबोट बनाने के लिए मिलता है. 

[00:39:21] डेविड जे Malan: सब ठीक है, तो यह मुझे क्या करना है दिखा नकली हाथ है. COLTON: हाँ तो आगे चलते हैं और ब्लॉकों में से एक को पकड़ो और कि रोबोट के शरीर के ऊपर डाल दिया. डेविड जे Malan: ओह, मेरा हाथ नहीं है. ओह. ठीक है, आराध्य. ठीक है, एक मिनट रुको. हम वहाँ जाना. 

[00:39:41] COLTON: मैं दुर्घटना पर एक बना दिया. 

[00:39:43] डेविड जे Malan: ठीक है, मैं इस आदमी को मिलेगा. लानत है! हम यह आखिरी अभ्यास कर रहे थे जब रात, आप इस में न्यागत पता है क्या? 

[00:39:51] इस तरह. ठीक. अगले एक? 

[00:39:55] COLTON: यकीन है. 

[00:39:56] डेविड जे Malan: सब ठीक है, और एक तिहाई है. ठीक है. COLTON: और यह एक में, आप to-- मिल डेविड जे Malan: ओह, यह एक सुंदर. COLTON: --yeah, इस फूल के अलावा उठाओ. डेविड जे Malan: ठीक है. कोई? छूटी. 

[00:40:14] COLTON: ओह, वहाँ तुम जाओ. 

[00:40:15] डेविड जे Malan: आह, कि देखो. बहुत अच्छा. खैर, हम क्यों ले 'न यहाँ एक स्वयंसेवक बाहर जो ऊपर की ओर आने के लिए करना चाहते हैं. कैसे के बारे में सही वहाँ हरे रंग में, यह क्या है? 

[00:40:27] सब ठीक है, और के have-- जाने आप के बजाय, कि कुछ कर के इस खेल को पता हो सकता है here-- शायद, रस्सी काट? चलो देखते हैं. हम यहाँ पर पर हमारे चश्मा है? 

[00:40:37] ठीक. धन्यवाद. आपका नाम क्या है? 

[00:40:39] दर्शक: लौरा. 

[00:40:40] डेविड जे Malan: लौरा? देखकर अच्छा लगा. तुम डाल मन नहीं है आपके चश्मे पर गूगल ग्लास. इस कोल्टन है. 

[00:40:46] COLTON: हाय. आपसे मिलकर अच्छा लगा. 

[00:40:48] डेविड जे Malan: ठीक है, चारों ओर चलो. ठीक है, तो आप करने जा रहे हैं , यहाँ करने से पहले इस खेला होने, पर अपने हाथ रख दिया है यहाँ लीप मोशन. और अब अपने तीर बढ़ना चाहिए. नहीं, ओह. 

[00:40:57] दर्शक: नहीं. 

[00:40:58] डेविड जे Malan: हम अभी तक छोड़ने के लिए नहीं करना चाहती. ठीक है, रुको. यहाँ पर. आप पकड़ के रूप में तो नोटिस अपने किसी बात पर उंगली माउस हरी जाने के लिए शुरू होता है, जो आप क्लिक करें कैसे है. 

[00:41:06] तो खेल पर जाएँ. और सिर्फ एक उंगली ठीक है. और अब थोड़ा पर क्लिक करें बाईं तरफ हरे आदमी. यह हरे रंग भरता है और जब तक अब पकड़. अच्छा है. अब, जैसे, ऊपर स्तर एक. 

[00:41:16] दर्शक: हाँ, हम चाहते हैं कि यहां एक स्तर,. 

[00:41:20] डेविड जे Malan: अच्छा. ठीक है, तो सब आपके पास रस्सी काट रहा है. आपका कर्सर वहाँ नीचे एक सफेद है. 

[00:41:28] बहुत अच्छा. ठीक है, यह कठिन प्राप्त करने के बारे में है. तो अगली अब पर अपनी उंगली पकड़. अच्छा है. यह एक मुश्किल है. 

[00:41:39] दर्शक: ओह बकवास. ठीक. यह उस तरह से जाना चाहती है. ओह बकवास, that-- 

[00:41:44] डेविड जे Malan: हाँ. माध्यमिक लक्ष्य सभी सितारों को मिल रहा है. सब ठीक है, अगले. 

[00:41:53] आप इस तीसरे एक हो सकता है अगर चलो देखते हैं. अच्छा है. ठीक है, वहाँ पर जाना. 

[00:42:06] ज़रूर. ओह, बहुत अच्छा. ठीक है. 

[00:42:11] तो क्यों न हम आज यहाँ स्थगित नहीं करते हैं? किसी को भी खेलना चाहता है जो ऊपर की ओर आने दो. हमारे स्वयंसेवक लौरा के लिए बहुत बहुत धन्यवाद. और हम सोमवार को आप देखेंगे. 

[00:42:18] दर्शक: आप शायद इन वापस चाहते हैं. 

[00:42:21] अध्यक्ष 2: अगले CS50-- में