[संगीत बजाना] 

डेविड मालन: इस CS50 है। इस हफ्ते नौ वर्ष की शुरुआत है। और इस के लिए होता है क्या श्री Boole का 200 वां जन्मदिवस किया गया। इसलिए इस साथियों है हम alluded है जिसे करने के लिए उपयोग के बारे में काफी कुछ समय सही और गलत बूलियन चर, 1 और 0 और ऐसी। और यह गूगल की थी आज उसे श्रद्धांजलि। उन्होंने कहा कि 200 कर दिया गया होता। अगर आप चाहें तो करने के लिए CS50 दोपहर के भोजन के लिए हमारे साथ, लिंक पर एक नज़र रखना पाठ्यक्रम की वेबसाइट पर। और इस तरह के चेहरे और मित्र के रूप में इन यहां कैम्ब्रिज में इंतजार है। इस तरह के चेहरे न्यू हेवन में इंतजार है। और, में केन, वास्तव में न्यू हेवन कृपया बनाया एली के एक एनिमेटेड GIF क्या कहा जाता है यहां हाल ही में एक पर एक GIF अभी बाकी है lunch-- एक और ग्राफिकल फ़ाइल स्वरूप, जिसके साथ आप कि familiar-- रहे इस तरह एक छोटे से कुछ लग रहा है। तो बस एक दृश्य ठीक of--। कैम्ब्रिज में यहाँ कोई भी हँस रहा है। लेकिन न्यू हेवन में, इस ठीक है, वास्तव में अजीब बात है? ठीक है। 

तो वहाँ हमारे साथ शामिल है। यहाँ हार्वर्ड में, विशेष रूप से, इस बुधवार, आप एक sophomore कर रहे हैं या नए even-- बनाने की या यहां तक ​​कि junior-- सोच कंप्यूटर में एक स्विच विज्ञान पता है, वहाँ हूँ कि एक सीएस इस मेले की सलाह दे जा बुधवार, शीघ्र ही कक्षा के बाद कंप्यूटर में 4:00 पर विज्ञान भवन मैक्सवेल डॉर्किन। हम निश्चित है पर इस डाल देता हूँ कल से वेबसाइट, के रूप में अच्छी तरह से। डोनट्स, मुझे बताया गया है, कार्य किया जाएगा। 

ठीक है। मैं poking गया था तो अजीब story-- चारों ओर से इंटरनेट पर, और मैं कुछ पुराने अभिलेखागार पाया मेरे पूर्व वेबसाइट के। और यह इस के आसपास out-- बदल जाता है समय, यह बहुत समय लगता है मैं यूसी चुनावों इकट्ठा कि जब से ऊपर फिर से गियर के बारे में हैं। इसलिए मुझे लगता है, यूसी के लिए दौड़ा बुरी तरह हार गई। और शायद यही कारण है कि भाग में था। तो इस बार में मेरी वेबसाइट पर था। किसी कारण के लिए, मैंने सोचा था लोग कह रहा से पहले एक अच्छा विचार है, क्या मेरी मंच था और यही कारण है कि वे उनका है, मेरे लिए वोट चाहिए कि पता लगाने के लिए प्रवेश करने के लिए क्लिक करने के लिए बीती बातों की जांच में है जो जानकारी है, डरावना की तरह। मैं वास्तव में यह था कि क्या पता नहीं है। 

लेकिन यह निश्चित रूप से नहीं किया था मेरे अभियान में मदद करते हैं। मैं भी वरिष्ठ द्वारा पाया गया कि year-- मैं इस मपेट कैलेंडर के लिए किया था। द मपेट्स वापस तो प्रचलन में किस्म के थे। या शायद वे नहीं थे। मैं वापस आ गया तो एक मपेट कैलेंडर के लिए किया था। और मुझे लगता है कि यह नाम करने के लिए शांत होने लगा हार्वर्ड के नेटवर्क पर मेरे कंप्यूटर frogman.student.harvard.edu। समय, हम सभी विशिष्ट था पहचान योग्य होस्ट नाम। और अगर आप कुछ घमंड चुन सकते हैं बजाय अपने खुद का नाम। और मैं किसी कारण के लिए ग़ोताख़ोर के साथ चला गया। 

और फिर मैंने सोचा कि मैं एक बहुत खर्च started-- समय की इन कड़ियों के माध्यम से क्लिक आज सुबह। और यह, मेरी पृष्ठ के बारे में था जो अब की तरह मनमोहक लगती है। लेकिन यह भी बस के लिए सबूत है कितनी दूर प्रौद्योगिकी आ गया है। मैं दिन में वापस, मतलब एक 486 में कुछ था। इन दिनों, यह सुपर, सुपर है, सुपर धीमी गति से और अच्छी तरह से कम आप में हो सकता है की तुलना में अपने अपनी जेब इन दिनों। वहां उस पर और अधिक नहीं है इससे भी ज्यादा शर्मनाक था। इसलिए मैं इसे उस पर छोड़ देंगे। लेकिन यह है कि मेरा पहला था धावा web-- में ओह, नहीं। यही कारण है कि नहीं था। वेब प्रोग्रामिंग में मेरा पहला असली धावा मैं तो भूल ही गई है, जो इस साइट में था। कुछ बिंदु पर, मैंने सीखा कि कैसे करने के लिए दोहराव पृष्ठभूमि चित्र बनाने। और इसलिए मैं इस खपरैल का छत प्रभावी पाया हॉकी खिलाड़ी, फुटबॉल और गोल्फ की तरह गेंद, या कि जो कुछ भी है Frosh आईएमएस वेबसाइट के लिए। और इस मायने में, वास्तव में था पहली वेब आधारित परियोजना मैं on-- ले लिया मुझे लगा कि शायद द्वितीय लगता है साल, कनिष्ठ year-- CS50 और CS51, एक लेने के बाद आम फॉलो-ऑन वर्गों की। मैं देख में देखा अभिलेखागार के माध्यम से कि मेरी उत्तराधिकारियों में से एक और दोस्तों, ली, एक तरह से बदल गया है खुद के लिए कॉपीराइट। लेकिन यह वास्तव में कुछ था कि मैं शर्मिंदगी के लिए ही चाहिए। लेकिन समय पर, इस पहली वेबसाइट था, मैं कुछ ही हफ्ते पहले कहा था, जो नए कर सकता द्वारा यहाँ अंदर का खेल के लिए रजिस्टर। और इसलिए यह पता चला कि पृष्ठभूमि छवियों लगता है कि जैसे इस तरह के एक अच्छा विचार नहीं कर रहे हैं। लेकिन वेब नया था, और हम सभी प्रयोग कर रहे थे। और यह क्या है मैं जाहिरा तौर पर समय पर नहीं किया। ठीक है। तो आगे की हलचल के बिना, हम स्विच वास्तव में, तुम्हें देने के लिए आज तैयारी की है, आप पाते हैं हो सकता है कि अंतिम टुकड़ा अंतिम परियोजनाओं के लिए विशेष रूप से उपयोगी लेकिन यह भी है कि शुरू कर देंगे पूरे वर्ल्ड वाइड वेब बनाना एक छोटा सा और समझा जा रहा है। दरअसल, हम शुरू करने जा रहे हैं एक और प्रोग्रामिंग भाषा इसी तरह की है कि कहा जाता जावास्क्रिप्ट और अलग अलग तरीकों से भाषाओं से हम इस प्रकार अब तक देखा है। 

इतनी सी, याद है, इस संकलित भाषा है। आप एक संकलक के माध्यम से इसे चलाने के लिए मिल गया है। आप वस्तु के लिए स्रोत कोड प्राप्त कोड, या शून्य और लोगों को। और उन शून्य और लोग कर रहे हैं कि अपने CPU, सेंट्रल प्रोसेसिंग यूनिट, वास्तव में समझते हैं। पीएचपी, इसके विपरीत, नहीं है एक संकलित भाषा। एक क्या बात है? यह एक व्याख्या की भाषा है। तो कुछ कार्यक्रम भी नहीं है एक दुभाषिया कि बुलाया करने के लिए it-- शीर्ष पढ़ने के लिए है नीचे, right-- के लिए छोड़ दिया और क्या सब समझ से बाहर अपने वाक्य रचना करता है और इसका मतलब है, यह एक पाश या एक शर्त है कि क्या या प्रोग्रामिंग के किसी अन्य संख्या निर्माण करती है। तो यह है कि एक व्याख्या की भाषा है। 

तो फिर हम एचटीएमएल की शुरुआत की। और एचटीएमएल भी एक नहीं है प्रोग्रामिंग भाषा। हम इसे क्या कहते हैं? बस है जो एक मार्कअप भाषा, यह कह रही है की कल्पना को रास्ते से एक प्रकार का तरह प्रोग्रामिंग निर्माणों के पास नहीं है हम भी पीठ खरोंच के दिन में देखा था। कोई छोरों रहे हैं। कोई शर्तें हैं। यह वास्तव में एक भाषा है अपने डेटा का अंकन के बारे में और यह स्वरूपण या किसी तरह से यह संरचना। 

सीएसएस, इस बीच, इसी तरह नहीं एक प्रोग्रामिंग भाषा। यह और भी अधिक सौंदर्य की दृष्टि से उन्मुख है। और यह आप ठीक धुन की तरह करने की अनुमति देता है फ़ॉन्ट आकार और रंग की तरह बातें प्लेसमेंट और उस के सभी और। तो फिर हम था 

एसक्यूएल। तो एसक्यूएल वास्तव में एक प्रोग्रामिंग है कुछ समझ में भाषा, यद्यपि रुझान विशेष रूप से डेटाबेस के लिए। लेकिन हम केवल करने के लिए परिचय भले ही चयन और डालने और हटा सकते हैं और अद्यतन और दूसरों के एक जोड़े, आप वास्तव में कर सकते हैं पता चला है कार्यों लिखने या वे कर रहे हैं के रूप में प्रक्रियाओं, लग रही है कि एसक्यूएल और अधिनियम में कहा जाता है, काफी पीएचपी और सी कार्यों की तरह। तो उन है कि अस्तित्व में पता है। लेकिन हम भी उन लोगों के साथ परेशान नहीं करते हम यहाँ सिर्फ सतह खरोंच के रूप में। और फिर जावास्क्रिप्ट के अंतिम हमारी भाषाओं औपचारिक रूप से पेश किया। जावास्क्रिप्ट तो, भी, है एक व्याख्या की भाषा। और उन लोगों के परिचित हैं, करते हैं आप यह भेद करना चाहते हैं कुछ विशेषता के साथ सी और पीएचपी दोनों से? यह अलग क्या है? 

दर्शकों: यह संकलित नहीं है। 

डेविड मालन: फिर से कहो? 

दर्शकों: यह संकलित नहीं है। 

डेविड मालन: यह संकलित नहीं है। तो यह भी है, व्याख्या की है। तो यह संकलित नहीं है। लेकिन यह है कि यह पीएचपी तरह एक छोटे से बनाता है। लेकिन यह अभी से अलग है कुछ हड़ताली तरह से पीएचपी, रास्ते में कम से कम हम इसे इस्तेमाल करेंगे। हाँ? 

दर्शकों: यह क्लाइंट साइड चलाता है। 

डेविड मालन: यह चलाता है क्लाइंट साइड, आमतौर पर। यही कारण है कि वास्तव में विशिष्ठ है ठीक है अब हमारे लिए विशेषता। सी भावना में सर्वर साइड था हम CS50 आईडीई में सब कुछ किया है। पीएचपी इस प्रकार अब तक कर दिया गया है सर्वर साइड जहां तक यह रूप भी है, interpreted-- हो जाता है नहीं संकलित, लेकिन interpreted-- जो कोर्स की है CS50 आईडीई, अंदर बादल में सिर्फ एक सर्वर या सर्वर। 

लेकिन जावास्क्रिप्ट, यहां तक ​​कि आप हालांकि आप जा रहे हैं pset, कहते हैं, के लिए यह लेखन शुरू करने के लिए आठ और आप कर रहे हैं projects-- शायद अंतिम में यह सही करने के लिए जा रहा CS50 आईडीई और इसे बचाने के लिए CS50 आईडीई, CS50 आईडीई के भीतर फाइलों में और, बारी में, क्लाउड सर्वर यह मेजबानी की है, जिस पर नहीं जा रहे हैं व्याख्या या अपने कोड को निष्पादित करने के लिए। दरअसल, यह में भेजा जा रहा है ब्राउज़र करने के लिए नीचे अनछुए फार्म। और यह तो IE होने जा रहा है क्रोम या फ़ायरफ़ॉक्स या सफारी या या कि वास्तव में व्याख्या करता है जो कुछ भी यह ऊपर से नीचे, सही करने के लिए छोड़ दिया है। कुंजी विशिष्ठ तो आज के लिए विशेषता जावास्क्रिप्ट क्लाइंट पक्ष यह है कि और पीएचपी, उदाहरण के लिए, गया सर्वर साइड है। अब, यह दिलचस्प निहितार्थ हैं की तरह, बौद्धिक संपदा के लिए और जो वास्तव में अपने कोड देख सकते हैं। और वास्तव में, आप जा सकते हैं और वेब पर देखना सबसे किसी को है कि किसी भी कोड जावास्क्रिप्ट में लिखा। कभी कभी यह पठनीय है कभी कभी यह समझने में कठिन है। लेकिन कारण समय में उस पर और अधिक। 

जावास्क्रिप्ट तो, अच्छी तरह से पर्याप्त है, सुपर समान, वाक्य रचना, सी और पीएचपी बहुत पसंद है, कोई मुख्य समारोह में नहीं है। आप लेखन शुरू करना चाहते हैं जावा स्क्रिप्ट कोड, आप आज देखेंगे के रूप में, आप सिर्फ यह लेखन शुरू। लेकिन यह विशेष रूप से, आप देखेंगे, है वेब ब्राउज़र के संदर्भ में उपयोगी है। हालांकि, मेरे छोटे आमतौर पर earlier-- disclaimer-- आप तेजी से कर सकते हैं कि कहने के लिए था आज का उपयोग जावास्क्रिप्ट सर्वर साइड Node.js नामक एक फैंसी ढांचे का उपयोग CS50 के स्वयं के आवेदनों में से कुछ है कि में लिखा जाता है। वास्तव में Node.js. का उपयोग करता है 50 चेक लेकिन हम पर ध्यान केंद्रित करने के लिए जा रहे हैं यहाँ पर बाहर जावास्क्रिप्ट क्लाइंट साइड। 

तो यहाँ पीएचपी में शर्तों का एक सेट है। क्षमा करें, वास्तव में in--, कि बयान, बहुत सही है। यहाँ भी का एक सेट है जावास्क्रिप्ट में स्थिति। वाक्य रचना है, यह है सी के लिए और पीएचपी के समान। श्री Boole की भाव, कर रहे हैं इसी तरह, वाक्य रचना सी और पीएचपी दोनों के लिए समान। हम भी स्विच है समान लग रही है कि जावास्क्रिप्ट। हम कर रहे हैं कि छोरों के लिए है हूबहू संरचित, छोरों, जबकि छोरों जबकि करते हैं। 

यह एक थोड़ा अलग है। पीएचपी प्रत्येक निर्माण के लिए किया था आप का उपयोग हो सकता है कि या शायद, pset सात में इस्तेमाल करेगा। जावास्क्रिप्ट के इस विशेष संस्करण है के लिए आप सचमुच कुछ कहने जहां वस्तु में चर कुंजी है, के लिए की तरह है, जो कहने का एक बहुत संक्षिप्त रास्ता है, मैं एक object-- और मिल गया है, तो हम करेंगे एक moment-- में फिर से इन के बारे में बात करते हैं और मैं सब कुछ खत्म पुनरावृति करना चाहते हैं अंदर महत्वपूर्ण मूल्य जोड़े की, मैं कैसे करने के लिए यह पता लगाने की जरूरत नहीं है शून्य, एक साथ संख्यानुसार उन्हें सूचकांक, दो तीन। 

मैं सचमुच यह कह सकते हैं। और प्रत्येक चलना, जावास्क्रिप्ट पर मुझे चर कुंजी अद्यतन करेगा के लिए तब पहली कुंजी, अगले कुंजी हो सकता है, फिर अगले कुंजी है, तो अगले कुंजी, इत्यादि। और मैं उपचार के द्वारा अपने मूल्य पर प्राप्त कर सकते हैं जावास्क्रिप्ट में एक वस्तु के रूप में हम देखेंगे यह एक के रूप में यद्यपि पीएचपी में साहचर्य सरणी। दरअसल, आप अंत में लिपटे यदि आपके एक साहचर्य सरणी है क्या चारों ओर मन पीएचपी में, अब आप ही के लिए यह सोच सकते हैं जावास्क्रिप्ट में एक वस्तु के समान। लेकिन इस बात का एक सा है एक अति सरलीकरण। 

सारणियों अच्छी तरह से पर्याप्त, समान लग रही है एक चरित्र के लिए छोड़कर PHP के लिए। यहाँ एक बात याद आ भी नहीं है हम पीएचपी के साथ पिछले सप्ताह देखा था कि। क्या छोड़ा गया है? हाँ? कोई डॉलर के हस्ताक्षर। तो हम एक करने के लिए वापस आ गए हैं अधिक सामान्य दुनिया जहां चर डॉलर के संकेत नहीं है। लेकिन आप उन्हें उपसर्ग करना आम तौर पर वार, के साथ। और वार चर का अर्थ है। और पीएचपी की तरह बहुत शिथिल है प्रकार के होते हैं जिससे typed--, संख्या और तार कर रहे हैं और तैरता है और इसलिए forth-- जावास्क्रिप्ट इसी प्रकार प्रकार की है। लेकिन यह शिथिल कि में टाइप हम प्रोग्रामर उन्हें निर्दिष्ट करने की जरूरत नहीं है। हम सिर्फ जागरूक होना होगा कि विभिन्न प्रकार मौजूद हैं। 

चर, meanwhile-- यहाँ है कैसे हम "नमस्ते, दुनिया" घोषित हो सकता है एक स्ट्रिंग के रूप में। यह करने के लिए समान का नोटिस पीएचपी, लेकिन कोई डॉलर के हस्ताक्षर। और यह कुछ हम करेंगे अधिक आज देखने के शुरू, आप एक वस्तु है जिससे कुंजी और मूल्यों के साथ। और अगर आप कोशिश करना चाहते हैं पिछले week-- से करने के लिए अनुमान वाक्य रचना एक छोटे से अलग है। लेकिन एक छोटे से विवेक कितने check-- चाबियाँ इस वस्तु है लगता है? तो मैं चार देखते हैं। मैं दो देखते हैं। 

तो यह वास्तव में दो है। तो यह एक संग्रह है दो महत्वपूर्ण मूल्य जोड़े की। कुंजी जिसका मूल्य अमेरिकन प्लान है प्रतीक है। कुंजी जिसका मूल्य 101.53 है कीमत है। तो उन दो महत्वपूर्ण मूल्य जोड़े हैं। और, PHP-- याद है और यह फिर से है बस की तरह वाक्यात्मक अंतर की। यह सब नहीं है कि बौद्धिक रूप से दिलचस्प है। पीएचपी इस एक ही लिखा हो सकता है follows-- बोली के रूप में एक चीज है, के बराबर होती है। और मैं वर्ग कोष्ठक करने के लिए इन बदल जाते हैं। और फिर मैं करने के लिए यह परिवर्तन एक उद्धृत शब्द, "मूल्य।" और फिर मैं एक पेट के प्रयोग नहीं करते। मैं पिछले हफ्ते क्या इस्तेमाल किया था? हाँ, बराबर चिह्न कायरता संकेतन तीर। 

और फिर मैं यहाँ एक ही काम किया। इधर भी ऐसा ही है। और बस यही। इस नहीं किया गया है तो यह ठीक है वास्तव में स्मृति में डूब बस अभी तक यह सच है, क्योंकि बौद्धिक रूप से शुष्क। यह सिर्फ वाक्यात्मक मतभेद है। लेकिन विचारों वही कर रहे हैं। इस चर के अंदर जावास्क्रिप्ट में उद्धरण महत्वपूर्ण मूल्य जोड़े का एक संग्रह है, जिनमें से एक है, जिनमें से एक प्रतीक है कीमत है। और मैं उन मूल्यों पर प्राप्त कर सकते हैं निम्नलिखित वाक्य रचना के साथ। बस PHP में, मैं कर सकता है की तरह चलो like-- कुछ करना मुझे इस बॉक्स में एक छोटे से बड़ा बना। बस PHP में, मैं कर सकता है की तरह Dammit, ओह है- बनाते हैं। चलो। 

बस PHP-- ठीक है, हम करेंगे जैसे सिर्फ प्रस्तोता नोटों का उपयोग करें। बस पीएचपी में की तरह, मैं कर सकता हूँ ["प्रतीक"] $ बोली $ बोली, और यह मुझे मिल जाएगा का मान "प्रतीक है।" जावास्क्रिप्ट में, यह होने जा रहा है समान है, मैं सिर्फ यह कर सकते हैं जिससे। ही बात है कि लापता डॉलर के हस्ताक्षर है। 

इतनी अच्छी तरह से पर्याप्त है, तो, वहाँ नहीं है कि बहुत सारे नए सिंटेक्स। इसलिए हम पर ध्यान केंद्रित क्या आज, सच है, विचारों और आवेदनों में से कुछ। और पहली बार इस तरह आवेदन कि तुम हो सकता है आप pset में डुबकी लगाई, तो देखा है सात पहले से ही इस वाक्य रचना है। तो आप है pset सात में, यदि देखा या नहीं अभी तक इसे देखा, हम दे कि एक फ़ाइल पता है कि वहाँ आप config.json-- जावास्क्रिप्ट बुलाया संकेतन वस्तु। क्यों? हम आप के साथ प्रदान करने में सक्षम होना चाहता था कुछ महत्वपूर्ण मूल्य जोड़े के साथ एक टेम्पलेट। हम आपको एक सूची देने के लिए सक्षम होना चाहता था मेजबान की, सर्वर का नाम। हम आपको एक देना चाहता था अपने उपयोगकर्ता नाम प्लेसहोल्डर और अपने पासवर्ड के लिए एक प्लेसहोल्डर। आप नहीं देख रहे हैं यह अभी तक चिंता की कोई बात नहीं। Pset सात में इस पर अधिक [? कल्पना। ?] और फिर, जाहिर है, हम आप चाहते हैं डॉस में भरने के लिए आप में लॉग इन करें, क्योंकि जब आप में से प्रत्येक CS50 आईडीई, अपने खुद के यूज़रनेम और पासवर्ड है। 

तो हम एक आधा दर्जन इस्तेमाल किया जा सकता था या अधिक विभिन्न फ़ाइल स्वरूपों। हम एक .txt फ़ाइल का उपयोग किया जा सकता था। हम एक सीएसवी फाइल का इस्तेमाल किया जा सकता था। हम का उपयोग किया जा सकता था एक INI फ़ाइल, एक एक्सएमएल फ़ाइल, एक पूरी गुच्छा अधिक परिवर्णी शब्द कि क्या आपने कभी सुना है नहीं हो सकता। यह मनमाने ढंग से की तरह है दिन के अंत में। लेकिन इन दिनों सुपर लोकप्रिय एक पाठ है प्रारूप JSON-- जावास्क्रिप्ट वस्तु बुलाया संकेतन कि इस तरह दिखता है। यह एक छोटे से गुप्त है लेकिन पैटर्न नोटिस। आप एक खुले घुंघराले के साथ शुरू गले लगा, और आप उसी के साथ खत्म होता है। के अंदर कुछ है। यह एक महत्वपूर्ण मूल्य जोड़ी है। तो यह है कि मैं कर रहा हूँ कि एक वस्तु है यहाँ स्क्रीन पर देख कि एक मूल्य है, जो एक प्रमुख है। और बस पर आधारित inferring पिछले पैटर्न, कुंजी यहाँ क्या हो रहा है? डाटाबेस, बात करने के लिए पेट के बाएं। 

अब, मूल्य होना होता है एक कई लाइनों इस बार। लेकिन मूल्य एक घुंघराले साथ शुरू होता है ब्रेस और एक घुंघराले ब्रेस के साथ समाप्त होता है। तो क्या आप प्रस्ताव होगा है डेटाबेस के मूल्य का प्रकार? एक शब्दकोश या, अभी और अधिक संक्षेप में, एक वस्तु। है ना? यह एक डेटा संरचना की तरह है कि भीतर ही अन्य संरचनाओं का उपयोग कर सकते हैं। इस पूरी बात हम कर रहे हैं तो एक object-- और एक वस्तु बुला pairs-- महत्वपूर्ण मूल्य का एक गुच्छा है डाटाबेस स्वयं का मूल्य एक वस्तु है। डेटाबेस का मूल्य एक पूरी गुच्छा है महत्वपूर्ण मूल्य जोड़े की, जो पहले के मेजबान, तो उसके बाद, नाम उपयोगकर्ता नाम, तो पासवर्ड जिसका प्रत्येक मान, इस बीच, यह है डबल उद्धरण में सिर्फ एक उबाऊ स्ट्रिंग। 

इसलिए नहीं है कि भले ही बस अभी तक सुपर स्पष्ट, यह सिर्फ एक है कि पता मानक काफी उबाऊ तरीका का एक मानक प्रारूप में डेटा भंडारण। लेकिन आम गलतियों आप यहां तक ​​कि pset सात में, कर सकता है, थोड़ा बेकार की बातें कर रहे हैं, अगर आप की तरह गलती से वहाँ अल्पविराम न आना। यही कारण है कि फ़ाइल में परिणाम जा रहा है जरूरी पठनीय नहीं किया जा रहा। अगर आप गलती की तरह बातें छोड़ देते हैं उद्धरण, यह पठनीय होने के लिए नहीं जा रहा है। इसलिए यह एक बहुत nitpicky फ़ाइल स्वरूप है, लेकिन यह सुपर आम है कि एक है। और हम, भले ही इसका इस्तेमाल करने के लिए हो आप किसी भी जावास्क्रिप्ट अन्यथा उपयोग नहीं करते हैं, pset सात में। 

ठीक है। इसलिए इस तस्वीर याद है। हम जानते हैं कि, एचटीएमएल में, के बारे में बात की थी कोड इस तरह लग सकता है। इस हाइपरटेक्स्ट मार्कअप भाषा है [अश्राव्य] बस के लिए "नमस्ते, दुनिया।" लेकिन फिर हम प्रस्तावित एक वापस जबकि अगर यह मदद करता है कि, आप सोच शुरू करने के लिए चाहते हो सकता है यह पहले से ही एक पेड़ के रूप में के बारे में। वास्तव में, खरोज कि हम पठनीयता की खातिर बस का उपयोग या शैली की खातिर पर लिए छोड़ सकते हैं प्रकार की इस पेड़, जहां आप में अनुवाद किया कुछ विशेष रूट नोड है कि हम करेंगे सामान्य रूप से, दस्तावेज़ कहा जाता है जो नीचे जड़ HTML तत्व या टैग, एचटीएमएल है, जो फिर दो है बच्चों, सिर और शरीर। 

और फिर बारी में, सिर पर एक शीर्षक है। और शीर्षक एक पाठ का महत्व है। और शरीर इसी तरह एक पाठ का महत्व है। आप आराम से कह रहे हैं तो अगर हाँ, आप इस HTML ले सकता है और इस तरह एक तस्वीर खींचना इस, दाएँ हाथ की ओर एक अच्छा मानसिक मॉडल है क्योंकि अब हम जावास्क्रिप्ट है कि, एक प्रोग्रामिंग भाषा ब्राउज़रों कि कर सकते हैं निष्पादित और आप के लिए व्याख्या, यह क्या पता चला है कि हम कोड में क्या करने जा रहे हैं इस हेरफेर करने के लिए शुरू किया गया है स्मृति में वृक्ष संरचना। हम निर्माण करने की जरूरत नहीं है स्मृति में पेड़। हम की तरह क्या करने की जरूरत नहीं है pset-पाँच-शैली डेटा संरचना जटिलता। अच्छी तरह से पर्याप्त है, पर ब्राउज़र, नीचे करने के लिए एचटीएमएल शीर्ष व्याख्या, छोड़ दिया है या सही, सचमुच करने जा रहा है हमें एक सूचक के बराबर हाथ मुक्त करने के लिए है कि पूरे पेड़ को। यह कठिन काम के सभी करता है। यही कारण है कि क्या मोज़िला और एप्पल और हमें दूसरों के लिए किया है। 

और जावास्क्रिप्ट के साथ हम करने जा रहे हैं नियंत्रण करने में सक्षम हो सकता है और बदलने के लिए और क्या करना दिलचस्प बातें उस पेड़, अन्यथा ज्ञात एक डोम या दस्तावेज़ ऑब्जेक्ट मॉडल के रूप में। क्या बातें की तरह? खैर, यह पता चला है कि जावास्क्रिप्ट में, वहाँ है इस कपड़े धोने की सूची जगह ले सकते हैं कि घटनाओं। और हम वास्तव में है कि इस्तेमाल नहीं किया है शब्द सप्ताह शून्य और pset के बाद से शून्य हम खरोंच के बारे में बात करते हैं। आप में से अधिकांश शायद का उपयोग नहीं किया अपने खरोंच परियोजना में एक घटना। लेकिन अगर आप याद कर सकते हैं सरल मार्को पोलो उदाहरण के लिए, जहां हम था दो स्प्राइट, जिनमें से एक मार्को ने कहा। जिसे तब, सुनने पर की अन्य और कहा कि घटना की सुनवाई, पोलो, कहा। यदि नहीं, तो करने के लिए स्वतंत्र महसूस हो रहा है कि अभी तक वापस वापस देखो। 

लेकिन यह सिर्फ करने के लिए है कहते हैं, और आप की तरह कर सकते हैं इन के नाम से अनुमान बातें, जावास्क्रिप्ट, यह पता चला है, हमें सुनने के लिए एक रास्ता देने के लिए जा रहा है माउस नीचे जा रहा है या माउस ऊपर जाने के लिए या कुंजी नीचे या कुंजी जा रहा ऊपर जा रहा है या onsubmit onselect या कुछ और onresizing। दूसरे शब्दों में, किसी भी शारीरिक क्रिया एक मानव एक ब्राउज़र के साथ ले जा सकते हैं आप हर दिन करते हैं कि आप लिख सकते हैं उस के लिए कोड उन घटनाओं के लिए सुनता और फिर उचित कुछ भी करता है। 

उदाहरण के लिए, यदि आप गूगल मैप्स का उपयोग करते हैं, आप क्लिक करें और ले जाते हैं तो क्या होता है माउस, आम तौर पर? आप क्लिक करें और खींचें हैं? हाँ? बिल्कुल सही। नक्शे कदम शुरू होता है। तो अगर आप की तरह क्या देख सकते हैं यहाँ पर, वहाँ पर क्या हो रहा है। और कैसे गूगल कि लागू होता है? खैर, शायद, वे कर रहे हैं इन घटना की एक जोड़ी का उपयोग श्रोताओं, एक है कि माउस पर लिए सुनने कहते हैं जब उपयोगकर्ता शारीरिक रूप से इतनी down-- उसकी ट्रैकपैड या अपने या अपने माउस को धक्का नीचे। और फिर हम देख रहे हैं आंदोलन की तरह कुछ या किसी अन्य घटना कि हमें खींचें पर कब्जा करने की अनुमति देता है। और वास्तव में, खींचें इस में इसी तरह से है डॉट संभव विकल्पों में से डॉट सूची डॉट। 

तो यह एक शक्तिशाली होने जा रहा है जिस तरह से उपयोगकर्ता का जवाब शुरू करने के लिए यहां तक ​​कि वह या वह वास्तव में क्लिक करता है से पहले स्पष्ट कुछ की तरह प्रस्तुत करें। लेकिन हम में पेश करने जा रहे हैं एक जोड़े विषयों वहाँ पाने के लिए। लेकिन पहले, चलो संक्रमण कुछ वास्तविक कोड के लिए। इसलिए मैं जा रहा हूँ आगे और ऊपर खुला डोम -0, जो एक बहुत ही सरल उदाहरण है यहाँ मैं बस में ज़ूम कि अगर यहाँ मेरे लिए इस इनपुट है। और मुझे आगे जाना है और में टाइप करने के लिए जा रहा हूँ मेरे नाम के लिए "डेविड" और सबमिट करें क्लिक करें। 

और फिर, यद्यपि तरह के सस्ते में, मैं कहते हैं कि ऊपर चबूतरे कि यह संकेत है "नमस्ते डेविड!" तो इस तरह का है जैसे हमारे "नमस्ते, दुनिया" हम थोड़ी देर पहले सी में किया था कि और यहां तक ​​कि पीएचपी में मैं गतिशील है क्योंकि मेरा नाम outputted। मैं यहाँ किसी और के नाम कर सकते हैं। मैं बस यह करने के लिए बदल सकता है जैसे, हन्ना, सबमिट करें क्लिक करें। और वास्तव में, थोड़ा पॉप-अप परिवर्तन। 

अब, पॉप-अप में से एक हैं वेब की सबसे गाली सुविधाओं। और वास्तव में, पीठ में दिन पॉप-अप ब्लॉकर्स प्रचलन में आया तुम क्योंकि कुछ website-- के लिए जाना होगा शायद एक संदिग्ध place-- कि अचानक तब होगा अपनी स्क्रीन peppering शुरू पॉप-अप की एक पूरी गुच्छा के साथ। और इसलिए इस क्षमता पॉप अप करने के लिए उपयोगकर्ता के सामने खिड़कियां विशेष रूप से नहीं किया गया है मानवता द्वारा अच्छी तरह से प्राप्त की। आप देखते हैं तो यही कारण है इस बात को रोकने के लिए, जो सिर्फ इस पूरी बात को बदसूरत बना देता है। तो हम एक जरूरत जा रहे हैं उपयोगकर्ता संकेत करने के लिए बेहतर तरीका है। लेकिन अब के लिए, कि काम करने लगता है। तो बस intuitively, क्या यहां हो रहा लगता है? मुझे आगे जाना है और सबमिट करें क्लिक करें, और फिर कुछ स्पष्ट रूप से हो रहा है। लेकिन ऐसा नहीं हो रहा है कि क्या हुआ पिछले हफ्ते मैं जमा करें क्लिक किया किसी भी समय? स्क्रीन पर क्या ऐसा नहीं हुआ? क्षमा करें? लोड करें। URL पर सभी परिवर्तन नहीं किया। मैं इस डोम -0 ने कहा कि और मैं डोम -0 पर अब भी कर रहा हूँ। आम तौर पर, हम कुछ अन्य के लिए बदल दिया जाना चाहिए Register.php या तरह तरह यूआरएल,। 

लेकिन फिर भी मैं खारिज जब ठीक क्लिक करके इस बात को, यूआरएल है कि नोटिस रहता है पूरी तरह से डाल दिया। और, वास्तव में, मैं एक छोटे से कर रहा हूँ उलझन में, मुझे क्रोम ऊपर खोलते हैं। मुझे नेटवर्क टैब खोलें। और यह इस समय खाली है नोटिस। मुझे आगे जाना है और मारिया को फिर से जमा करते हैं। जो भी कोई नेटवर्क यातायात नहीं है। तो कोई HTTP नहीं है। 

तो वास्तव में, मैं स्रोत कोड पर नजर डालें तो है- के लिए मुझे इस विंडो को बंद करते हैं और स्रोत को देखने के लिए जाना। दिलचस्प है। कुछ भी नहीं है ऐसा लगता है नए टैग, उन के बीच में स्क्रिप्ट। तो चलो CS50 के भीतर एक नजर डालते हैं आईडीई वास्तव में मैं उपयोगकर्ता के लिए भेजा है। 

यहाँ तो चलो है- एचटीएमएल पर ही ध्यान देते हैं। यहाँ डोम-0.html के नीचे आधा है। और यह एक शीर्षक मिल गया है कि नोटिस, एक सिर टैग, एक शरीर टैग, एक फार्म टैग। लेकिन क्या आप के रूप में करने के लिए बाहर कूदता , विभिन्न तुम कभी नहीं है, खासकर अगर किसी भी जावास्क्रिप्ट खुद लिखा है। मुझे एक छोटी पुस्तक चलो यहाँ सही करने के लिए। मैं एक इनपुट मिल गया है, के लिए एक और इनपुट सबमिट करें। मैं नए तरह का है, जो एक आईडी, मिल गया है। लेकिन हम सीएसएस के साथ यह देखना था। और क्या निश्चित रूप से नया है? हाँ? अच्छा लगा। 

ठीक है। तो यह onsubmit कहते हैं, जहां, पालन ​​करने के लिए क्या लगता है नोटिस। यह एक विशेषता है एचटीएमएल नामकरण में। इसका मूल्य यहाँ इस उद्धृत स्ट्रिंग है। और यह एक छोटे से लग रहा पहली नज़र में अजीब है। यह HTML नहीं है। यह सीएसएस नहीं है। आप अनुमान लगा सकते हैं, क्योंकि यह, जावास्क्रिप्ट है। तो यह इस में बनाया गया है कि लगता है वेब पेज नमस्कार नामक एक समारोह है। और मुझे लगता है कि सिर्फ inferring रहा हूँ यह एक शब्द है, क्योंकि नमस्कार। यह एक खुला कोष्ठक मिल गया है बंद कोष्ठक, अर्धविराम। एक सी समारोह की तरह लग रहा है एक PHP समारोह की तरह लग रहा है। 

और वास्तव में, यह करने के लिए जा रहा है एक जावास्क्रिप्ट समारोह होगा। तब मैं झूठी लौट रहा हूँ। हम करने के लिए वापस आ गया हूँ बस एक पल में है। लेकिन जहां इस समारोह में परिभाषित किया गया है? मुझे अच्छी तरह से ऊपर स्क्रॉल फ़ाइल के शीर्ष करने के लिए। और यह एक लंबी लाइन है, भले ही यह अपेक्षाकृत सरल है। मुझे यहाँ से बाहर ज़ूम करते हैं और इन चार लाइनों पर ध्यान केंद्रित। 

जावास्क्रिप्ट में तो बस पीएचपी की तरह, तुम बस कहते हैं, सचमुच, शब्द "समारोह" समारोह के नाम पर, और फिर किसी के साथ कोष्ठक इस मामले में कोई तर्क arguments--। और कोई वापसी प्रकार वहाँ जावास्क्रिप्ट में, बस पीएचपी पसंद है। तो यह सी की तुलना में थोड़ा पराजित है ओपन घुंघराले गले लगा, करीब घुंघराले ब्रेस। जावास्क्रिप्ट में निर्मित एक function-- है नहीं एक सिफारिश function-- लेकिन एक समारोह चेतावनी बुलाया जीवन में जिनका एकमात्र उद्देश्य कि बहुत बदसूरत ऊपर खींचने के लिए है हम एक पल पहले देखा था कि शीघ्र। 

अब यह एक कौर की तरह है। यहाँ क्या हो रहा है? तो चलो शुरू करते हैं यहाँ सब कुछ पर प्रकाश डाला। यही कारण है कि सचेत करने के लिए एक ही तर्क है। और क्या चल रहा है? यह सिर्फ एक स्ट्रिंग की तरह लग रहा है। और यह पीएचपी के विपरीत है और विपरीत पता चला है, सी, यह जावास्क्रिप्ट में कोई फर्क नहीं पड़ता आप एक उद्धरण या डबल उद्धरण हैं। वे बराबर हो जाएगा। और सच कहूँ तो, यह सिर्फ है इन दिनों लोकप्रिय हमेशा के लिए जावास्क्रिप्ट प्रोग्रामर के लिए किसी कारण के लिए एक उद्धरण का उपयोग करें। यह करने के लिए बस की बात है। लेकिन हम के रूप में अच्छी तरह से, डबल कोट से इस्तेमाल कर सकते हैं। 

इसलिए प्लस एक नया चरित्र है। लेकिन आप उन लोगों के लिए जो किया है इस से पहले, प्लस क्या मतलब है? हाँ। जुटना। इसलिए हम पीएचपी में यह देखा है। सिर्फ डॉट नहीं है पीएचपी में ऑपरेटर कि एक साथ दो तार जुटना होगा। सी गर्दन में दर्द यह करने के लिए किया गया था। था जो pset छह से याद गर्दन में एक विशिष्ट दर्द, आप का उपयोग करने के लिए होता है strcat तरह कुछ स्मृति आवंटन के बाद ढेर या ढेर पर। आप हुप्स के माध्यम से कूद पड़ा सिर्फ दो तार जोड़ना। जावास्क्रिप्ट में, यह सुपर आसान है। बस उन दोनों के बीच प्लस ऑपरेटर का उपयोग करें। 

इतनी जटिल दिखने बात यह है कि यह किया जा रहा है क्योंकि के अंत में इस पूरे स्ट्रिंग, मैं तो बस एक विस्मयादिबोधक बिंदु पर जुटना। क्या था ऊपर popping था तो अगर "हैलो, डेविड," "हैलो, हन्ना," "हैलो, मारिया," और बहुत आगे है, स्पष्ट रूप से दोनों के बीच में है कि मध्यम बात pluses मुझे क्या करने के लिए पहुँच दे देना चाहिए? क्या सुनिश्चित करने के लिए में है? हाँ। तो मैं यहाँ का नाटक करेंगे उनके नाम का जवाब है, है ना? इसलिए उनके नाम फाइनल में ऊपर popped नतीजा है। अच्छा तो इसका क्या मतलब है? खैर, मुझे लगता है कि में पहले प्रस्तावित डोम तथाकथित उस तस्वीर इस विशेष जड़ तत्व है जिस तरह से ऊपर शीर्ष दस्तावेज़ बुलाया। और अब, यह है कि जा रहा है, पता चला है एक विशेष वैश्विक चर हो जावास्क्रिप्ट में एक है जो में निर्मित उपयोगी कार्यक्षमता की पूरी गुच्छा। उपयोगी कार्यक्षमता है के अलावा क्षमता किसी भी वंशज नोड पर पाने के लिए। उन वर्गों या आयतों या ellipses बस इतनी बात करने के लिए, एक पेड़ में नोड्स। 

इसलिए इसे बनाया पता चला है कि जावास्क्रिप्ट के दस्तावेज़ ऑब्जेक्ट अन्यथा एक के रूप में जाना जाता है एक समारोह है, विधि, कि getElementById कहा जाता है। फोन करने के लिए वाक्य रचना जावास्क्रिप्ट में एक समारोह कि एक वस्तु या एक के अंदर है चर सिर्फ डॉट अंकन के साथ है। और हम सी में यह देखा क्या संरचना सिंटेक्स। तुम्हें पता है, एक तरह से, pset सात में यह देखना एक तरह से, आप CS50 :: क्वेरी जब देखते हैं। पीएचपी में पेट के पेट के एक और है है कि एक समारोह बुला के रास्ते किसी वस्तु के अंदर। 

लेकिन अब जावास्क्रिप्ट में के लिए, यह सिर्फ एक बिंदु है। और इसलिए इस समारोह में, अच्छी तरह से पर्याप्त है, एक तरह से यह आईडी के आधार पर तत्व प्राप्त does-- क्या कहते हैं। एक तत्व सिर्फ एक और नाम है डोम में एक टैग या नोड के लिए। और तो आईडी "नाम" द्वारा तत्व प्राप्त मेरी HTML यहाँ है- इसका मतलब है। और इस HTML पर आधारित है, क्या नोड या क्या एचटीएमएल टैग मैं हूँ प्रोग्राम के हाथ होने जा रहा document.getElementById फोन करके? 

हां, ठीक यही। मैं इनपुट पाने के लिए जा रहा हूँ जिसका आईडी वहाँ तत्व "नाम है।" इसलिए विशेष रूप से, आप कर सकते हैं इस समारोह के बारे में सोच, देने का एक तरीका है, के रूप getElementById उस विशिष्ट नोड के लिए एक सूचक का बैकअप वृक्ष में। हम इस तैयार नहीं है पेड़, लेकिन यह एक तरीका है उस के लिए उपयोग हो रही है आयत या उस आयत अपनी विशिष्ट आईडी के माध्यम से इसे पहचान के द्वारा। 

अब, क्यों यह उपयोगी है? खैर, यह पता चला आप मिल गया है कि एक बार से आयत कि उस नोड, चित्र, इसके अंदर उस नोड, बदले में, की एक पूरी गुच्छा है properties-- महत्वपूर्ण मूल्य जोड़े या मूल्य कहा जाता है, जिनमें से एक डेटा,। तो सचमुच, यह एक की तरह है कौर पूरी बात समझाने के लिए। लेकिन दिन के अंत में, यह सब होता है आप दे रहा है उपयोगकर्ता में लिखे गए एक स्ट्रिंग इस श्रेणीबद्ध फैशन में। लेकिन मैं एक पसंद नहीं है इन चीजों की जोड़ी। या यों कहें, कुछ जिज्ञासा अभी भी है। कि सब के सब काम करने के लिए लग रहा था। क्यों आप मैं लौट आया लगता है नमस्कार फोन करने के बाद गलत? मतलब यह है कि, एक छोटे बदसूरत दिखती मैं दो बयानों देखते हैं अर्धविराम से अलग कर दिया। एक अनुमान करें। मैं वापसी झूठी हटा दिया है, तो क्या बस सहज हो सकता है? क्षमा करें, फिर कहते हो? 

विंडोज का एक गुच्छा खोलें। तो संभवतः शायद कुछ लगता है कि ऐसा चाहते हैं। और क्या? एक अनुरोध जहां प्रस्तुत हो सकता है? एक ही पृष्ठ पर। तो, वास्तव में, वह है कि यहाँ जवाब करीब, यहां तक ​​कि विपरीत, यद्यपि अतीत में, मैं नहीं किया है कार्रवाई विशेषता निर्दिष्ट, जो सामान्य रूप से हमें क्या करना है। वहाँ एक डिफ़ॉल्ट है निकली। आप कार्रवाई निर्दिष्ट नहीं करते हैं, यह बोली कह की तरह है, गंदें शब्द बोलना या ही फाइल का नाम है, इस मामले में जो होगा डोम-0.html की तरह हो। यह बस की तरह, अनुमान लगाया है या यों कहें गर्भित। 

और मैं ऐसा नहीं करते हैं यदि हां, तो का नोटिस देना। मुझे इस बचा लो। और मैं वापसी झूठी हटा दिया है। मुझे इस के लिए वापस जाओ उदाहरण और बल इसे पुनः लोड। और आप मुझे सुझाव देखा हो सकता है इस CS50 पर समय का एक गुच्छा पर चर्चा करें। कुछ भी कभी भी अभिनय है तो कायरता और जैसा कि आप उम्मीद के रूप में ब्राउज़र, व्यवहार नहीं कर रहा है बार बार आप पकड़ के लिए चाहता हूँ शिफ्ट और फिर लोड करें क्लिक करें। यही कारण है कि फिर से लोड करने के लिए हर फ़ाइल के लिए मजबूर करेंगे और अपने ब्राउज़र की स्थानीय कैश का उपयोग नहीं या कॉपी अब तो यह है कि, मुझे आगे जाना है और मेरी निरीक्षक, नेटवर्क टैब खुला। मैं क्लिक करने के लिए जा रहा हूँ लॉग क्योंकि रक्षित मैं यह पंक्तियों को हटाने के लिए नहीं करना चाहती मैं कहीं दूर whisked मिलता है। 

मुझे यहां से आगे चलते हैं और एंडी में प्रकार, सबमिट करें क्लिक करें। ठीक है। जैसा कि उम्मीद थी कि लगता है। यह "हैलो, एंडी कहते हैं।" मुझे ठीक क्लिक करते हैं। दिलचस्प है। , पेज बदल गया है कि नोटिस मूल पृष्ठ यद्यपि। बदल का यूआरएल तरह ध्यान दें। यह एक प्रश्न चिह्न जोड़ा जो आमतौर पर एक संकेत है कि हम कुछ प्रस्तुत करने की कोशिश की। और फिर नीचे, और भी अधिक स्पष्ट रूप से, यहां वास्तविक HTTP अनुरोध है, 200 का एक जवाब नहीं मिला है जो कि मुझे यहाँ वापस लाया। 

तो यह क्या नहीं है हम सही करना चाहते हैं? क्योंकि मैं नहीं चाहता पूरे पृष्ठ को फिर से लोड। मैं बजाय वापसी करना चाहता था इसलिए शॉर्ट सर्किट के रूप में झूठी ब्राउज़र की डिफ़ॉल्ट व्यवहार, जो पृष्ठ प्रस्तुत करने के लिए, निश्चित रूप से किया गया था। 

तो चलो एक पर एक नजर डालते हैं मामूली बेहतर उदाहरण है। इस डोम संस्करण में से एक है। और निम्नलिखित नोटिस। आप grok नहीं करते हैं तो यह ठीक है कोड की लाइनों के सभी। लेकिन मौलिक रूप से अलग क्या है इस कार्यान्वयन के बारे में? मैं यह बर्ताव करता है बंधेज करेंगे एक ही, एक ही बात करता है। मैं स्पष्ट रूप से अलग ढंग से क्या किया है? हाँ? 

दर्शकों: [अश्राव्य]। डेविड मालन: हाँ। तो समारोह परिभाषित किया गया है differently-- फार्म से अनुपस्थित दूसरे शब्दों में, वहाँ ऊपर लाइन 7-- पर या बल्कि, लाइन 8-- नहीं रह गया है मैं onsubmit विशेषता है। पिछले उदाहरण में, मैं इस किया था। और फिर मैं सचमुच यहाँ अपने कोड लिखा था। और फिर मैं वापसी झूठी कहा। और यह रगड़ना नहीं था अगर आप अभी तक गलत तरीके से, यह करने के लिए शुरू करना चाहिए जहां तक बस HTML में की तरह, के रूप में, हम शुरू कर दिया जब यह सह आपस में मिलना शैली विशेषताओं में सीएसएस के साथ, यह सिर्फ एक छोटे से प्राप्त करने के लिए शुरू कर दिया गंदा या एक छोटे से गलत लग रहा है। 

इसी प्रकार यहां, यदि आप HTML लेने शुरू और फिर आप स्वचालित रूप से कुछ जावास्क्रिप्ट कोड खटखटाने एक उद्धृत स्ट्रिंग के बीच में, यह है बहुत पोषणीय नहीं होने जा रहा। है ना? यह पहली बार में भी स्पष्ट नहीं है जावा स्क्रिप्ट कोड है जहां जगह है। तो यह रूप में वास्तव में अच्छा होगा बेहतर डिजाइन का एक सिद्धांत है, चलो हमारे एचटीएमएल पूरी तरह से रहते हैं हमारी जावास्क्रिप्ट से अलग। 

तो हम क्या किया है, ऐसा करने के लिए यहाँ किया following-- है हम तो बस केवल मार्कअप के लिए HTML का उपयोग करें। और हां संस्करण में इस में से एक, सब मैं एक अद्वितीय पहचान के साथ एक रूप है। और फिर यहाँ नीचे, मैं लाभ ले जा रहा हूँ जावास्क्रिप्ट का एक विशेष सुविधा की जिससे मैं क्या हो सकता है एक गुमनाम समारोह में बुलाया। तो यह है कि मैं फोन करता है, तो पता चला है कि 'डेमो' की document.getElementById कि मुझे एक सूचक देने की तरह है मेरे पेड़ में इस नोड, प्रपत्र तत्व, इतनी बात करने के लिए। 

अब, मैं सिर्फ से पता एचटीएमएल का एक सा जानते हुए भी अब हम कुछ ऑनलाइन पढ़ कर रहे हैं संदर्भ, कि एक फार्म के तत्व का समर्थन करता है घटना listeners-- की एक पूरी गुच्छा में दूसरे शब्दों में, घटना के कपड़े धोने की सूची हम एक पल पहले देखा था कि श्रोताओं। मैं प्रलेखन पढ़ने से पता कि onsubmit एक वैध घटना है एक प्रपत्र तत्व के लिए श्रोता। 

इसलिए मुझे पता है कि एक बार, मेरे लिए यह सुरक्षित है उस नोड मिल following-- पेड़ से, प्रपत्र तत्व, और उसके तथाकथित पहुँच onsubmit संपत्ति। इसलिए डॉट बस का अर्थ यह एक संपत्ति है इसके अंदर एक विशेष मूल्य की तरह। और क्या डेटा प्रकार मैं हूँ बताए, जाहिर है, जो है, onsubmit के लिए अंदर प्रभावी रूप से एक चर पेड़ में उस नोड की? ऐसा लगता है कि संरचना के अंदर एक क्षेत्र है। डेटा प्रकार क्या है? 

एक समारोह में, हाँ। तो यह पीएचपी यह है कि पता चला है। और यहां तक ​​कि हम हालांकि आप इसके बारे में नहीं बताया था, सी भी समारोह संकेत है, के पास है और कार्य आवंटित करने की क्षमता चर 'मूल्यों खुद के रूप में। और हम नहीं जा रहे हैं सी के लिए वापस वापसी करने के लिए लेकिन अब के लिए, यह पता चला है कि यहाँ दाएँ हाथ की ओर पर, यह एक छोटे से लग रहा है, भले ही कायरता, इस का मतलब है, हे ब्राउज़र, मुझे एक समारोह देते हैं। मैं भी दे रही है परेशान करने के लिए नहीं जा रहा हूँ इसे एक नाम मैं सचमुच हूँ क्योंकि चलो यह कहते हैं आवंटित करने के लिए जा रहा इस समारोह का पता तुरंत onsubmit करने के लिए। दूसरे शब्दों में, ब्राउज़र में, आप की जरूरत नहीं इस समारोह में कहा जाता है पता करने के लिए। तुम बस पता करने की जरूरत है जहां यह स्मृति में है। और तो यह सिर्फ करने के लिए suffices वहाँ एक बराबर चिह्न है और इस तरह, इस नामकरण परेशान करने के लिए नहीं foo या नमस्कार या किसी अन्य शब्द। और अब यह सिर्फ एक शैलीगत बात है। मैं इस घुंघराले ब्रेस स्थानांतरित कर सकता है the-- sorry-- अगली पंक्ति पर जैसे हम आम तौर पर CS50 है। लेकिन जावास्क्रिप्ट में, यह है वास्तव में शैलीगत आम सिर्फ घुंघराले ब्रेस रखने के लिए, कि पहली पंक्ति पर पहले एक। 

लेकिन इसके बाद, वहाँ है कुछ खास दिलचस्प नहीं। यही कारण है कि खुले घुंघराले ब्रेस बस मेरे समारोह के शुरू होने से सीमांकित करता है। समारोह अब है समान, मैं सिवाय वापसी झूठी शामिल इस समारोह के अंदर। यह out-- बदल जाता है क्योंकि और आप ही होगा पढ़ने से यह पता दस्तावेज़ीकरण-- आप समारोह आवंटित है कि कि अगर onsubmit हैंडलर झूठे रिटर्न के लिए, ब्राउज़र सिर्फ जानता है और इससे सहमत एक सर्वर के लिए फार्म जमा करने के लिए नहीं। यह सच देता है, तो यह भी प्रस्तुत करेगा हम देखेंगे कारणों के लिए एक सर्वर पर बस एक पल में उपयोगी होते हैं। 

और फिर अर्धविराम के बाद घुंघराले ब्रेस वहाँ बस मैं समारोह को परिभाषित कर रहा हूँ इसका मतलब है। आप जैसे ही फोन करने के लिए क्या है पता आप एक जमा सुनते हैं। ठीक है। यह अभी भी यकीनन तरह का बदसूरत है। तो क्या हम और क्या कर सकते हैं? 

खैर, उस में तब पता चला है last-- है जो संस्करण दो, और हम इस पर बस नज़र हूँ। बनाने का जोखिम पर यह भद्दा, यह पता चला एक पुस्तकालय में है कि वहाँ दुनिया jQuery के लिए बुलाया। और jQuery एक सुपर है लोकप्रिय जावास्क्रिप्ट पुस्तकालय सबसे अधिक है कि इतना लोकप्रिय है कि है किसी भी ऐसा नहीं है JavaScript-- लोगों को भ्रमित करने के लिए असामान्य जावास्क्रिप्ट के साथ jQuery। क्यों? जावास्क्रिप्ट ही बहुत है बातें कर के वाचाल तरीके document.getElementById, dadadadadada। तुम बहुत होने अंत कोड की लंबी लाइनें। 

तो जॉन Resid नाम के एक साथी, जो वास्तव में एक स्टार्टअप के लिए काम करता है इन दिनों, बाहर आया इस पुस्तकालय वर्षों के साथ पहले कि बहुत से लोगों के लिए योगदान दिया है परिवर्तन है कि jQuery के बुलाया करने के लिए निम्नलिखित तरीके में सिंटेक्स। और अभी तो आप, यह देखा है आप सदा ही होगा, क्योंकि एक कर रहा है, तो यह देखना वेब आधारित अंतिम परियोजना, इस के बराबर तरीका होगा का उपयोग करते हुए कहा कि एक ही समारोह को लागू इस विशेष पुस्तकालय। 

अब, बल्कि तंग से अलग अपनी संपूर्णता में यह, चलो बस कुछ पैटर्न को देखो। यह वाक्य रचना है प्रकट होता है कितने गुमनाम कार्यों या गुमनाम कार्यों या उर्फ ​​लैम्ब्डा कार्यों? दो, है ना? और आप जानते हैं, कि भले ही आप इस के साथ सुपर आराम नहीं कर रहे हैं सिर्फ यह है कि इस तथ्य से कहते समारोह () में दो बार। 

और यह पता चला है कि क्या इस कोड doing-- है और हम ऑनलाइन संदर्भ में उल्लेख करता हूँ, अंत में, इस के साथ कुछ मदद के लिए। यह सिर्फ मतलब है कि जब दस्तावेज़ तैयार है, आगे बढ़ो और रजिस्टर निम्नलिखित समारोह HTML के लिए प्रस्तुत हैंडलर के रूप में जिसका अनोखा विचार डेमो है तत्व। और फिर, जब ऐसा होता है, कोड के इन दो लाइनों कहते हैं। और यह एक अधिक दुर्भाग्य से, है वापसी झूठी कहने का वाचाल तरीका है। और हम सिर्फ इस वजह से उल्लेख किया आप इस ऑनलाइन की तरह कोड देखेंगे। और इसके द्वारा daunted जा करने के लिए कुछ भी नहीं है। बल्कि, क्या है कि दिमाग में रखना जावास्क्रिप्ट में आम होने जा रहा इस प्रतिमान है। हम अब के लिए यह दिखाने के और यही कारण तो यह है कि है। ठीक है। तो भी रिहायशी बिना कि सिंटैक्स पर ज्यादा है, किसी भी सवाल पर देखते हैं कर रहे हैं इन उदाहरणों या विचारों को इस प्रकार अब तक? ठीक है। तो चलो कुछ उपयोगी के लिए इस का उपयोग करते हैं। , बस नमस्ते कहना है कि एक वेब पेज बनाना इतना और इतनी, कि सभी दिलचस्प नहीं है underwhelm के लिए नहीं। यह एक सुंदर होने के लिए नहीं जा रहा है लेकिन यह उपयोगी कुछ करने जा रहा है। मुझे मेरी निर्देशिका के लिए वापस जाओ यहाँ और ऊपर खुला, फार्म-0.html, कहते हैं। 

इसलिए इस नए लगता है अंदर का खेल पंजीकरण पेज किसी भी सीएसएस या डिजाइन के किसी भी भावना के बिना। और मैं आगे जाना चाहते हैं और एक पासवर्ड के साथ रजिस्टर यहाँ। और मैं शब्दों के लिए सहमत करने के लिए जा रहा हूँ और शर्तों और रजिस्टर पर क्लिक करें। और अब वेबसाइट पर आप कर रहे हैं, कहते हैं, " पंजीकृत! (सचमुच में ठीक नहीं।)" यह काम पसंद है, लेकिन लगता है मुझे आगे जाना है और पुनः लोड के लिए मजबूर करते हैं। 

और मुझे नहीं, तुम नहीं करते हैं, हम कहते हैं मेरी वास्तविक ईमेल पते की जरूरत है। या हो सकता है कि हम सिर्फ वहाँ में मेल कहूँगा। पासवर्ड 12345, जैसे, हो जाएगा। और फिर, मैं कर रहा हूँ, सिर्फ इसलिए कि एक बेवकूफ है, अब यह 123456789 है। और मैं अपने बॉक्स को चेक करने के लिए नहीं जा रहा हूँ। 

हम्म। ठीक है। तो कई अवसर है यहां सुधार के लिए। और आप जानते हैं, या pset में देखेंगे आप code-- लिख सकते हैं कि सात, और आप लिखना होगा PHP-- में कोड की रक्षा के लिए उपयोगकर्ता के इन प्रकार के खिलाफ त्रुटियों को स्पष्ट रूप से उपयोगकर्ता क्योंकि सहयोग नहीं किया है। और वह या वह आप नहीं दिया है सब तुम चाहते थे या भी प्रारूप में मूल्यों आप उन्हें चाहता था। तो अगर आप pset सात में देखेंगे कि हम निश्चित रूप से कुछ हो सकता था कहने की स्थिति है कि यदि ई-मेल पता है, तो एक username@something.edu, नहीं है हम सिर्फ सकता है खेद का कहना है और उपयोगकर्ता के लिए माफी माँगता हूँ इतना, तुम pset सात में हो सकता है की तरह। या फिर वे कहते हैं कि बॉक्स की जाँच नहीं की है, पीएचपी में पता चला है, आपको लगता है कि पता लगा सकते हैं, भी। और निश्चित रूप से पासवर्ड यदि register.php में के रूप में मेल नहीं खाते pset सात के लिए, आपको लगता है कि पता लगा सकते हैं। लेकिन उस में एक दर्द है उस में गर्दन अब वे अनुरोध हमें सर्वर के लिए सभी रास्ते जाने के लिए। उपयोगकर्ता त्रुटि के बारे में सूचित किया जाता है। और कम से कम आप उपयोग करें जब तक कुछ शौक़ीन तकनीक, अब वे वापस तीर क्लिक करना होगा। यह पसंद है, अच्छा नहीं होगा वेबसाइटों की एक बहुत आज आप और अधिक तत्काल था कि अगर राय, तुरन्त? 

दूसरे शब्दों में, मुझे संस्करण के लिए जाना जाने कोई सुंदर होने जा रहा है, जो एक। लेकिन यह इस सुविधा है। मालन, 12345, 123456789, नहीं , रजिस्टर बॉक्स की जांच करने जा रही है। पासवर्ड मेल नहीं खाते। तो इस पॉप-अप ugly-- है, भले ही हम अंत में इस जगह ले सकता है बूटस्ट्रैप तरह कुछ के साथ, आप pset सात में जो देखेंगे मैं एक बहुत ही लोकप्रिय library-- है पासवर्ड मेल नहीं है कि पता लगाने। ठीक है। खैर, मुझे उपयोगकर्ता के रूप में है कि ठीक। मुझे आगे जाना है और 12345, 12345 कहते हैं। फिर भी समझौते की जाँच नहीं। आप से सहमत होना होगा नियम और शर्तें। तो क्यों? 

हम पहले से ही मंजूर किया गया है एक रास्ता है कि, और हम में आप आवश्यक कर दिया है त्रुटि का पता लगाने के लिए pset सात इस तरह की स्थिति सर्वर साइड, मुझे क्यों होना चाहिए यह भी जावास्क्रिप्ट में यह कर परेशान? एक बहस में क्या हो रहा है जोड़ने के पक्ष क्या आप some-- के रूप में देख रहे हैं के बारे अतिरिक्त जटिलता नहीं है। 

हो सकता है कि कोई उल्टा है। यह क्या हो सकता है? दर्शकों: [अश्राव्य]। डेविड मालन: ओह, दिलचस्प। संभावित कारनामे। तो यकीन है, तुम संभाल नहीं कर रहे हैं गलत उपयोगकर्ता इनपुट महान है कि, शायद यह है कि अगर यह सब बेहतर है यहां तक ​​कि अपने सर्वर तक पहुँच नहीं है। मैं वहाँ वापस धक्का होगा और कहते हैं, आप शायद चाहिए उन दोनों समस्याओं का तय कर लो। लेकिन यह है कि उचित है। और क्या? 

दर्शकों: [अश्राव्य]। 

डेविड मालन: हाँ। हम पहले भी कहा है, क्योंकि यह कोड है, क्लाइंट-साइड पर व्याख्या की। यह सर्वर परेशान नहीं करता है, जो इसका मतलब यह नहीं है सर्वर लोड या क्षमता को प्रभावित। और अब, थोड़ा पुराने मेरे लिए, यह कोई सार्थक प्रभाव पड़ता है मैं अभी एक उपयोगकर्ता के पास है। 

लेकिन आप किसी भी कर रहे हैं सभ्य आकार की वेबसाइट विशेष रूप से सबसे बड़ा, फेसबुक की तरह, अधिक आप लोगों से दूर रख सकते हैं आपके सर्वर का बेहतर एक सर्वर क्योंकि, ज़ाहिर है, केवल राम की एक निश्चित राशि है, गीगाहर्ट्ज़ का एक निश्चित संख्या चीजों की एक निश्चित संख्या यह समय की प्रति यूनिट कर सकते हैं। अधिक लोगों में देखते हैं तो अगर दुनिया, अपने सर्वर से टकराने गलती से प्रवेश करने गलत तरीके से, बस के रूप में अच्छी तरह से अगर आप अपने सर्वर बंद है कि लोड रख सकते हैं। इसके अलावा, विशेष रूप से एक मोबाइल पर क्या आपने कभी सोचा है कि अगर device-- my.harvard में लॉग इन करें या येल के netid या की तरह, एक बहुत की के साथ इस विलंबता वहाँ कि इसे लेता है जिससे जैसी वेबसाइटों, जैसे, एक लानत दूसरे या दो कभी कभी। और फिर, मेरे भगवान, आप गलत टाइप यदि तो आप वापस मारा और इसे फिर से करना है। इसलिए विशेष रूप से, विलंबता वहाँ धीमी नेटवर्क कनेक्शन पर। लेकिन जावास्क्रिप्ट, क्योंकि यह ग्राहक पर चलता है और आगे और पीछे जाने की जरूरत नहीं है एक संभावित धीमी गति से इंटरनेट के पार कनेक्शन, आपको मिल सकता है लगभग तात्कालिक प्रतिक्रिया। 

तो चलो इस पर नजर डालते हैं। मुझे खोल दो फार्म 0 और यहां एचटीएमएल पर दिखेगा। और चलो बस क्या हो रहा है देखते हैं। जिसका एक रूप है कार्रवाई register.php है। मैं सिर्फ इतना मिलता उपयोग कर रहा हूँ मैं यूआरएल को देख सकता है। लेकिन पासवर्ड के लिए, हम निश्चित रूप से चाहता हूँ वास्तविकता में पोस्ट करने के लिए इस बदलने के लिए। यहाँ प्रकार पाठ का एक इनपुट क्षेत्र है। यहाँ एक और इनपुट है प्रकार पासवर्ड के क्षेत्र। आप कभी नहीं देखा है, तो यहाँ है, प्रकार चेकबॉक्स का एक इनपुट। 

लेकिन कोई जावास्क्रिप्ट वहाँ यहां जो भी। यह सिर्फ HTML है कि register.php को जाता है। लेकिन संस्करण एक में, जहां मैं उन पॉप-अप प्राप्त करने के लिए शुरू कर दिया, वास्तव में यहां देखते हैं क्या होता। संस्करण एक में, क्या मैं मैं see-- करने के लिए जा रहा हूँ मैं काफी स्टाल सकता है सोचा पर्याप्त शब्दों के साथ है, लेकिन मैं बाहर भाग गया। 

संस्करण में वहाँ one-- हम चले। संस्करण एक में, following-- नोटिस और सबसे अच्छा कार्यान्वयन नहीं है, लेकिन यह मेरा पहला है। नीचे दिए गए कि नोटिस रूप, मैं एक स्क्रिप्ट टैग है। और एक स्क्रिप्ट टैग, इसका मतलब है अरे, ब्राउज़र, यहां में कुछ कोड आता है, आम तौर पर, जावास्क्रिप्ट। और अब, मैं क्या कर रहा हूँ नोटिस। Line-- पर मैं मुश्किल से कर सकते हैं इसे कहते हैं, it-- 32 पंक्ति को पढ़ने, वर इसलिए मुझे दे form-- प्रपत्र एक चर बुलाया। और फिर document.getElementId मिल "पंजीकरण।" की यह क्या है? खैर, मुझे यहां तक ​​उल्टा करते। और नोटिस, आह, मैं फार्म तत्व दिया एक मनमाना लेकिन वर्णनात्मक विचार पंजीकरण की। तो यह मुझे एक चर देता है कि मुझे लगता है कि नोड हड़पने के लिए अनुमति देता है, पेड़ में उस आयत रूप कहा जाता है। form.onsubmit का अर्थ है, हे ब्राउज़र, एक घटना श्रोता रजिस्टर इस फार्म पर। इस फार्म है जब दूसरे शब्दों में, प्रस्तुत है, निम्नलिखित कोड निष्पादित। यह एक नाम है क्योंकि जरूरत नहीं है क्यों आप नाम पता करने की जरूरत है? तुम बस पता करने की जरूरत है फलस्वरूप, क्या निष्पादित करने के लिए यह एक गुमनाम या लैम्ब्डा समारोह है। और उस समारोह है यहां इन लाइनों के सभी। और अब, ईमानदार हो, भले ही आप कभी जावास्क्रिप्ट लिखा है नहीं हो सकता इससे पहले, यह सिर्फ सी और पीएचपी तर्क है। तो form.email.value यदि == "" - ईमेल क्षेत्र को खाली है यदि ऐसा है तो, तुम्हें चाहिए "के साथ उपयोगकर्ता पर चिल्लाना अपना ईमेल पता प्रदान करते हैं। " यदि नहीं तो form.password.value उपयोगकर्ता पर खाली चिल्लाना है "आप अपना पासवर्ड प्रदान करना चाहिए।" 

ज्यादा दिलचस्प तार्किक रूप से, form.password.value नहीं करता है बराबर form.confirmation.value-- पुष्टि कहाँ से आया था? मुझे उल्टा करते हैं। खैर, मैं इस इनपुट बुलाया यहाँ क्षेत्र पासवर्ड। और मैं पुष्टि इस यहाँ एक बुलाया। मैं यह कहा हो सकता है पासवर्ड दो या कुछ और। मैं सिर्फ तार्किक जाँच कर रहा हूँ इन दोनों के एक ही हैं। यह श्री Boole है यह पता चला है Else-- एक बूलियन मान, चेक बॉक्स again--। तो मैं कहता हूँ, अगर विस्मयादिबोधक point-- form.agreement.checked यदि नहीं, के रूप में अच्छी तरह से उपयोगकर्ता पर चिल्लाना। 

तो आप देखेंगे इस वाक्य रचना है जावास्क्रिप्ट में बहुत आम है, जहां आप इस डॉटेड नोटेशन है। आप यहाँ एक वस्तु के साथ शुरू करते हैं। आप के लिए एक गहरी में डुबकी पासवर्ड की तरह एक संपत्ति। और फिर आप अपने वास्तविक मूल्य पर मिलता है। और फिर, यहाँ इनपुट है। यहाँ नाम पासवर्ड है। और इसकी कीमत है जो कुछ भी मानव वास्तव में टाइप किया है। 

इन सभी में तो मामलों, मैं झूठी लौट आए। लेकिन अगर नहीं, मैं सच वापसी। और इसलिए अब हम एक देखना जब की सम्मोहक उपयोग आप के लिए झूठी लौटेंगे उपयोगकर्ता की क्या कर रही रोक और उसे बनाने या उसे चुनें फिर या फिर टाइप करें। अन्यथा, हम वापसी सच। 

और मुझे एक परिचय इस के दूसरे संस्करण में सिर्फ उसके कुछ समझ बीज के लिए। खैर, इस के 2 संस्करण में, फार्म-2-- मैं एक हाथ की एक लहर के साथ यह करूँगा। यह उत्सुक लोगों के लिए है, jQuery के संस्करण, करने के लिए चाहते हो सकता है आप में से जो उस विशेष पुस्तकालय में भिगोना। लेकिन start-- और किसी भी सवाल है? मुझे पल के लिए है क्योंकि हम रोक देते हैं कि तेजी से और एक बहुत कुछ था। 

लेकिन यहाँ अच्छी बात यह है कि सभी है कोड का बहुत ही ज्यादा है। नया सामान डोम क्या है? इन आयतों क्या हैं? इन नोड्स क्या हैं? एक गुमनाम समारोह में क्या है? एक ईवेंट हैंडलर क्या है? लेकिन शुक्र है, इस बात का सबसे बस है सप्ताह शून्य, कहते हैं, से पूरा चक्र। ठीक है। तो थोड़ा और अधिक दिलचस्प कुछ और? खैर, सब से पहले, मुझे जाने दो आगे और गूगल मैप्स के ऊपर खुला। और अगर आप एक के लिए नोटिस हूँ कि पल, दूसरे विभाजन पर, क्या होता है जब नोटिस मैं काफी तेजी से क्लिक करें। और हार्वर्ड में इस संबंध तो है तेजी से आप वास्तव में यह सूचना नहीं है कि। लेकिन आप की तरह की तरह क्या देख रहे हो मैं क्लिक करें और वास्तव में तेजी से खींचें तो क्या होगा? आप ऑनलाइन देख के लोग, आप 0.5x गति को यह धीमी गति से अगर, आप यह बेहतर देख सकते हैं। 

अभी क्या हो रहा था मैं क्लिक किया और घसीटा पहले? मुझे करते हैं here-- की कोशिश करते हैं 90210 की तरह कुछ और। के दूर दूर चलते हैं। वह भी, वास्तव में तेजी से गया था। कैसे डिज्नी वर्ल्ड के बारे में? हम वहाँ चलें। ठीक। आप एक दूसरे विभाजन के लिए क्या देखा? बस, चौराहों, जैसे, है ना? टाइल्स के लिए प्लेसहोल्डर? 

वैसे, यहाँ क्या हो रहा है? गूगल मैप्स का एक अच्छा उदाहरण है AJAX कहा जाता है कि इस तकनीक का। हम शुरू करेंगे, जहां यह है एक विशेष रूप में जावास्क्रिप्ट का उपयोग आकर्षक तरीका है। वापस दिन में, वहाँ था MapQuest नामक इस वेबसाइट। और मैं लिया जाना चाहिए था एक 1990 के दशक से इस बात का स्क्रीनशॉट, अगर तुम चाहते थे जहां मानचित्र पर यहाँ देखो, तुम सचमुच एक तीर क्लिक करेंगे शीर्ष पर है कि आप से पता चला नक्शे का एक अलग वर्ग। यदि आप के लिए छोड़ दिया स्थानांतरित करना चाहते थे तो आप पता चला है कि एक तीर क्लिक किया नक्शे का एक अलग वर्ग। और कुछ वेबसाइटों अभी भी यह आज है। लेकिन फिर भी MapQuest हो गया है गूगल मैप्स की तरह, बेहतर है। 

इसके बजाय, क्या ये बेहतर है दिनों AJAX का उपयोग करने वाली वेबसाइटों है। AJAX-- अन्यथा रूप में जाना अतुल्यकालिक जावास्क्रिप्ट और XML, जो कह रही है की सिर्फ एक अच्छा तरीका है एक प्रौद्योगिकी या तकनीक है कि जावास्क्रिप्ट का उपयोग कर एक ब्राउज़र की अनुमति देता है अतिरिक्त HTTP अनुरोध बनाने के लिए बाद पृष्ठ लोड किया गया है। अच्छा तो इसका क्या मतलब है? खैर, यह एक तरह होगा जीमेल में का गुस्सा यदि आप चाहते थे कि हर बार अपने मेल की जांच करने के लिए, तुम सचमुच नियंत्रण आर या मारा था कमान आर या पुनः लोड बटन को क्लिक करें और पूरे रफ़ू पेज को फिर से लोड होगा। है ना? यह सफेद फ्लैश होगा शायद दूसरे के लिए। आप बेवकूफ प्रगति बार देखना होगा। आप नए और अगर सिर्फ देखने के लिए मेल, पूरे वेब पेज और यूआरएल आप फिर से लोड करने के लिए होता है पर कर रहे हैं। 

लेकिन यह है कि जीमेल में क्या होता है नहीं है। है ना? आप एक नया ईमेल में मिलता है जीमेल, क्या स्क्रीन पर क्या होता है? यह बस ठीक है, ऊपर से पता चलता है? यह सिर्फ जादुई दिखाई देता है तालिका में एक नई पंक्ति के रूप में। यही कारण है कि वास्तव में शामिल एक जटिलता के सभ्य राशि। वास्तव में, आप इस पेड़ के बारे में सोचते हैं, तो जो यहां एक साधारण से एक है, भले ही Gmail-- और मैं देखना होगा कोड पर sure-- होने के लिए शायद एक HTML तालिका है या हो सकता है यह प्रस्तुत करने वाले एक unordered सूची के रूप में अपने इनबॉक्स में ईमेल से प्रत्येक। 

और इसलिए तुम वहाँ यह कल्पना यदि आप कर रहे हैं जब स्मृति में एक पेड़ है एक तरह से एक तरह से लग रहा है कि जीमेल का प्रयोग इस तरह, गूगल उह, जब पता चलता है, आप एक नया ईमेल है, यह नहीं है पूरे वृक्ष के पुनर्निर्माण के लिए चाहते हैं। दरअसल, यह नोड में खोज करना चाहता है आपके इनबॉक्स का प्रतिनिधित्व करता है कि पेड़ और सिर्फ एक नए नोड डालें। 

पांच, जहां आप pset करने के लिए तो बहुत समान एक हैश तालिका में नोड्स डालने के लिए किया था, इसी तरह गूगल के माध्यम से करता है, यह लिखा है कि जावा स्क्रिप्ट कोड, इस पेड़ पार, जहां यह पता लगाने खिड़की के उस इनबॉक्स हिस्सा है, और फिर एक नई पंक्ति सम्मिलित। और एक नई पंक्ति सिर्फ एक मतलब है एक पेड़ में नए नोड्स या अधिक। 

और तो AJAX इस तकनीक है कहा कि वास्तव में उस के लिए अनुमति देता है। आप एक यूआरएल का दौरा करने के बाद, लेकिन यह लंबे समय से पागल, और पृष्ठ है एक बार आप अभी भी कर सकते हैं लोड किया गया से अधिक डेटा हड़पने क्या यह internet-- एक ईमेल या एक map-- के एक खपरैल पर्दे के पीछे यह हड़पने और फिर पेज में डालें मानव सच नहीं है कि इतनी इसके लिए इंतजार करना होगा। 

फेसबुक मैसेंजर उसी तरह से काम करता है। अन्य websites-- की कोई भी संख्या ओह, वास्तव में, यहां तक ​​कि इस। मैं यह स्पष्ट रूप से, किस तरह का है, इसका मतलब यह एक कष्टप्रद इन दिनों शामिल हैं। मैं cats-- इस खोजने लगते हैं एक भयानक उपयोगकर्ता अनुभव की तरह है। यह सिर्फ मेरे लिए खोज शुरू होता है। वैसे यह क्या कर रहा है? यूआरएल वास्तव में नहीं बदला है मैं टाइपिंग शुरू कर दिया है। लेकिन क्या भर में हो रहा है दिलचस्प हम्म, ठीक wire--। क्या भर में हो रहा है तार यहां सिर्फ weirder हो जाता है। 

ठीक। तो मुझे आगे जाना है और निरीक्षण जाने तत्व और नेटवर्क टैब पर जाएं और इस बनाने की कोशिश तकनीकी और बिल्लियों के बारे में कम। मैं लिखते हैं, सचमुच, बिल्लियों और-- क्या हो रहा है per-- मैं उस पर क्लिक करने के लिए नहीं जा रहा हूँ। ठीक है। तो यहाँ नीचे, हर क्या हो रहा है समय मैं जाहिरा तौर पर, एक चरित्र प्रकार? की तरह, निम्न स्तर? क्या उन लोगों में से प्रत्येक के साथ क्या हो रहा है मैं अपने कीबोर्ड पर पात्रों टाइप कर रहा हूँ? हाँ? दर्शकों: [अश्राव्य]। 

डेविड मालन: बिल्कुल। उन पात्रों में से प्रत्येक है एक समय में गूगल, एक करने के लिए जा रहा है। वे एक स्ट्रिंग निर्माण कर रहे हैं अपने सर्वर पर कि प्रतिनिधित्व मैं इस प्रकार अब तक में टाइप किया है सब कुछ। और हर बार मैं टाइप एक और चरित्र, वे एक के अपने गुप्त सॉस का उपयोग एल्गोरिथ्म खोज और यह पता लगाने, वह इस बिल्ली पेज मतलब है इस बिल्ली पेज या पसंद है या नहीं? कुछ समझ में तो, यह एक साथ मुझे प्रदान करता है उस में बेहतर अनुभव मैं भी नहीं है मेरे विचार को पूरा करने की जरूरत है। और वास्तव में, यह एक उपयोगी है बात यह है कि, सामान्य रूप में स्वत: पूर्ण। अपने एल्गोरिदम काफी अच्छा कर रहे हैं और अपनी खोजों काफी स्पष्ट कर रहे हैं, तो मैं पूरे शब्द टाइप करने की जरूरत नहीं है। उन्होंने मुझे बताने जा रहे हैं कि क्या यह मैं वास्तव में के लिए खोज कर रहा हूँ है। तो क्या गूगल तत्काल कॉल खोज सिर्फ AJAX का उपयोग कर रहा है उन्हें अनुरोध करने के लिए अनुमति देता है कि कोड का उपयोग एक वेब ब्राउज़र के माध्यम से अतिरिक्त सामग्री इस का उपयोग कर पर्दे के पीछे नई भाषा, जावास्क्रिप्ट। तो हम छोड़ दिया एक दो मिनट है। और मुझे मेरे दोस्त को फोन करते हैं मंच पर कोल्टन अप, ऐसा लग रहा था के बाद से विशेष रूप से मज़ा पिछली बार एक प्रौद्योगिकी लागू करने के लिए आप में से कुछ है कि रुचि व्यक्त की है अंतिम परियोजनाओं के लिए में। हम इसे लाने के लिए मजेदार होगा सोचा एक स्वयंसेवक के ऊपर है, हालांकि, आज आप के लिए एक अतिरिक्त दिखाने के लिए हाँ you-- अनुमति देता है कि यह, मैं पहली बार इस हाथ को देखा। आ जाओ। बहुत अच्छा किया। बहुत बढ़िया। मैं इस पर परियोजना के लिए जा रहा हूँ बस एक पल में स्क्रीन। हर किसी के लिए आपका नाम क्या है? 

ईएफए: मैं Efa हूँ। 

डेविड मालन: Etha? 

ईएफए: EFA। 

डेविड मालन: EFA? 

ईएफए: हाँ। 

डेविड मालन: तुम्हें देखकर अच्छा लगा। ठीक है। मुझे यह तैयार हो जाओ। करने पर चलो यहां कोल्टन के साथ बीच। क्या कोल्टन उसके हाथ में है आज एक रिमोट कंट्रोल है। तो बजाय सिर्फ एक में वहाँ खड़े से चारों ओर देख तीन आयामी दुनिया कोल्टन किया था, अब Efa कर सकते हैं वास्तव में ऊपर जा रहा द्वारा चारों ओर चलना, नीचे, बाएँ, और एक तरह सही Nintendo या Xbox नियंत्रक। ईएफए: मैं मंच से गिर करने के लिए जा रहा हूँ। डेविड मालन: हो जाएगा यहाँ पर मोटे तौर पर खड़े हो जाओ। लेकिन यह है कि एक खतरा है। ठीक। तो आगे चलते हैं और उन पर डाल दिया। मुझे आगे चलते हैं और यहाँ स्क्रीन करने के लिए स्विच। मुझे रोशनी मंद करते हैं। और कोल्टन, मुझे जाने दो आप के बगल में खड़े आते हैं। 

आप यहाँ की व्याख्या करना चाहते हैं mic के साथ हम क्या कर रहे हैं? हेयर यू गो। 

COLTON: यकीन है। इसलिए अभी हम कर रहे हैं Oculus अप लोड हो रहा है, मैं operating-- संचालन नहीं लगता प्रणाली है, लेकिन मुख्य कार्यक्रम, जहां आप सब खेल का उपयोग कर सकते हैं और अपने पुस्तकालय में हैं कि क्षुधा। इसलिए अभी, यह कहना चाहिए टचपैड शुरू करने के लिए नल। टचपैड पर होने जा रहा है हेडसेट के दाईं ओर। तो आगे चलते हैं और tap-- ईएफए: ओह, आदमी। डेविड मालन: हाँ, वहाँ तुम जाओ। Efa देख रही है गुणवत्ता बहुत उच्च गुणवत्ता है। यह यहां सिर्फ वाई-फाई है। COLTON: आप कर रहे हैं तो क्या हुआ क्या करना चाहते करने के लिए जा रहा शीर्ष की ओर देखो है स्क्रीन के ठीक। हाँ, बहुत ऊपर सही पर है कि खेल। और फिर आप का चयन कर रहे हैं जब यह फिर से टचपैड नल। मैं अपने Dreadhalls लगता है। और फिर यहाँ यहाँ एक-- है, चलो मुझे आप के लिए अपने चश्मे पकड़। 

तो मैं बस उसे एक नियंत्रक दे दी है। तो अब वह खेल को नियंत्रित कर सकते हैं। वह उस तरह के आसपास है और सामान ले जा सकते हैं। तो आगे चलते हैं और ऊपर से देखो। आप नया खेल देखना चाहिए। तो आगे चलते हैं और आप ऐसा कर सकते हैं। अब, आप को नियंत्रित करने में सक्षम होना चाहिए नियंत्रक के साथ अपने आप को, साथ ही, जैसे ही खेल यहाँ अप लोड करता है। यह थोड़ा डरावना हो सकता है। 

ईएफए: अब तुम मुझे बताओ। ठीक। 

COLTON: ठीक है। तो तुम चारों ओर स्थानांतरित कर सकते हैं, इसकी पुष्टि। ठीक। आप को चारों ओर स्थानांतरित कर सकते हैं। बिल्कुल सही। आप नीचे देखो तो, अगर आप एक नक्शा है। आप कर रहे हैं, जहां मानचित्र आपको पता चलता है। आप कमरे में चारों ओर देख सकते हैं। आप पूरी तरह से चारों ओर मोड़ सकते हैं। हां, ठीक यही। मुड़ो। 

तो अपनी बाईं ओर देखो। मैं वहाँ कुछ आप कर सकते हैं लगता है कमरे में एक बैरल पर उठाओ। 

ईएफए: मैं कैसे मिलता है जिस तरह से बाहर करें? COLTON: देखो। बस देखो। ठीक है। तुम वहाँ जाओ। अब आगे बढ़ो और बस के चारों ओर की बारी है। तो अपनी बाईं ओर आगे देखो। छोड़ चलते रहो। छोड़ देखते रहो। चलते रहो। हाँ। 

ईएफए: ओह, यह तरीका है। 

COLTON: हाँ। नियंत्रक के साथ यह की ओर चलो। तुम वहाँ जाओ। अब यह इसे लेने के लिए कहना चाहिए। तुम वहाँ जाओ। इसे उठाएं। ठीक है। अब, चलो इस कमरे से बाहर निकलते हैं। आगे बढ़ो और उस दरवाजे के लिए चलते हैं। तो आप यह कहते हैं hold-- लिए जा रहे हैं इसे खोलने के लिए मजबूर करने के लिए बटन पकड़। तो आगे चलते हैं और बटन पकड़ो। हाँ, इसे खोलने के लिए मजबूर कर रहा। ठीक है। बहुत बढ़िया। अब हम कमरे से बाहर चल रहे हैं। तो मैं बाकी को छोड़ने के लिए जा रहा हूँ और आप के लिए आप पता लगाना क्या देखते हैं। ईएफए: मैं अंधेरे कमरे में नहीं जा रहा हूँ। अरे रुको। अब मैं अंधेरे नीचे हॉल में जाना है? ठीक है, मैं [सुनाई] वापस जा रहा हूँ। COLTON: ठीक है। कुछ और आइटम लेने के लिए। कुछ सिक्के की तरह लग रहा है। यही कारण है कि एक ताला लेने है। यदि आप पाते हैं तो एक बंद दरवाजा, आप उसका इस्तेमाल कर सकते हैं। क्या तुम डरे हुए हो? 

ईएफए: अभी नहीं। COLTON: ठीक है। 

हाँ Pretend--। बस आप कर रहे हैं नाटक वास्तव में वहाँ खड़ी है। और अगर आप around-- बारी आप इसे करने के लिए इस्तेमाल करने के लिए मिल गया है। लेकिन यह समझ में आता है। डेविड मालन: EFA जारी है और जबकि हम इस दिन से कर सकता है, के बाद से खेलते हैं, हम सभी को टिप-पैर की अंगुली यहाँ से बाहर कर सकते हैं। लेकिन हम दो अन्य जोड़े के लिए क्या है, आप आते हैं और खेलने के लिए चाहते हैं। अन्यथा, हम देखेंगे आप ने बुधवार को अगले। आज हमारे स्वयंसेवक करने के लिए धन्यवाद। [वाहवाही] 

[संगीत - "Seinfeld थीम"] स्पीकर 1: ठीक है, मैं कर रहा हूँ डाल एक नया पीएल पर माउंट। मैं सिर्फ OLPF-- बदल 

स्पीकर 2: तो क्या हुआ वास्तव में आप क्या कर रहे हैं? 

स्पीकर 1: ठीक है, में से हर एक these-- यहाँ, मैं तुम यहाँ में इस एक दिखाएंगे। तुम यहीं इसे देख सकते हैं। 

अध्यक्ष 3: मैं मैं इन के साथ अच्छा हूँ। आप कुछ और अधिक चाहते हैं? 

अध्यक्ष 4: नहीं, मैं अच्छा हूँ। [अश्राव्य]। 

अध्यक्ष 3: नहीं, [सुनाई]। कुछ तो लें। स्पीकर 1: अलग अलग रंग। स्पीकर 2: ठीक है। स्पीकर 1: तो अंतत: क्या यह यह रंग समायोजित करता है of--