ديفيد جيه مالان: حسنا، لذلك هذا هنا هي الذراع ميو الفرقة، وزوجين من الذي نحن يكون للمشاريع النهائية CS50. وأن مظاهرة نحن في قائمة الانتظار لك مقدما حيث الأساس هذا الذراع ضيق نسبيا الفرقة هنا يستمع إلى الحركات العضلية الخاصة بك ثم يتم تعيينها في مجال البرمجيات الكمبيوتر المحمول كولتون على مدى هنا التي كان لايتون والتي أغنية في قائمة الانتظار بالفعل. وليس لي demoing هذا، لقد كولتون في المختبر بوضوح كل أسبوع يزداد مظاهرة جاهزة للالمتطوعين الشجعان واحد. اذا كان هناك من يود أن تأتي على up-- رأى يدك أولا. هيا تصل. [00:01:09] حسنا. وما هو اسمك؟ [00:01:13] الجمهور: اه، ماريا. [00:01:14] ديفيد جيه مالان: ماريا، من الجميل أن نرى لك. هيا أكثر من هنا. اسمحوا لي أن أعرض لكم لكولتون. كولتون، وهذا هو ماريا. [00:01:21] COLTON: مرحبا، لطيف لمقابلتك. [00:01:23] ديفيد جيه مالان: جميع الحق، حتى خطوة واحدة، ونحن ستكون لدينا كنت وضعت هذا إلى الساعد بحيث انها جميلة ضيق قرب الكوع الخاص بك. وفي الوقت نفسه، دعونا لها وضعت على الزجاج لدينا جوجل وسنقوم مزج تقنيات اليوم. [00:01:33] COLTON: أولا علينا أن ربط هذا إلى الأشياء. [00:01:36] ديفيد جيه مالان: OK. في الواقع، دعونا نضع ذراعك كما بالقرب من هذا الكابل ممكن حتى نتمكن من مزامنة أول الامر. [00:01:41] COLTON: دعونا نفعل ذلك. [00:01:42] ديفيد جيه مالان: وفي نفس الوقت، لذلك يمكن للجميع الحصول على نظرة أقرب، سنقوم إرم الكاميرا أندرو على الشاشة هناك. لذلك لدينا كابل USB هذا يجري موصول شارة ماريا. واسمحوا لي أن إرم الشاشة في كولتون حتى على العرض المقبل. [00:02:00] حتى كولتون وتسجيل الجهاز الآن على توصيل ميو لهذا الكابل. والآن ما ماريا تنوي القيام به للحظات هو في الواقع من خلال المشي الخطوات المعايرة وتعليم البرمجيات كيف تستجيب لها العضلات عندما جعل محددة مسبقا معين فتات أن البرنامج يفهم. إذا كنت ترغب في الذهاب في أمام الشاشة. موافق، الاستمرار في المحاولة. [00:02:30] COLTON: اذهب من هذا القبيل. وما شابه ذلك. وعلى طول الطريق إلى اليمين. نعود. [00:02:35] ديفيد جيه مالان: OK. منظور مختلف. انها ليست لك. انها لنا. [00:02:40] MARIA: OK. ديفيد جيه مالان: رقم دعونا تحريكه على مستوى اعلى حتى انها أقرب إلى كوع يدك، أو حتى أكثر إحكاما. حسنا. [00:02:52] هنا نذهب. سيكون هذا هو الوقت المناسب لCS52X. هناك نذهب. [00:02:57] لطيف جدا. موافق. الإبهام إلى الخنصر. [00:03:02] لطيف جدا. نشر أصابعك. الخير. موجة اليمين. انها تظهر الغريب كنت مع hand-- اليسار [00:03:17] COLTON: نعم، هذا غريب. ديفيد جيه مالان: موجة ل الحق والمضي قدما. سريع إلى الأمام لتخطي أو المقبل. وهذا موافق الحق الموج. [00:03:25] MARIA: أنا don't-- الانتظار. [00:03:26] ديفيد جيه مالان: تحتاج الى بعض المساعدة؟ [00:03:28] COLTON: إذا كنت تريد الذهاب من هذا القبيل. MARIA: انها تحول الشيء الآخر، وإن كان. COLTON: هو كذلك. ديفيد جيه مالان: نعم أنا لا أعرف السبب في انه يظهر لك يساري. COLTON: لماذا لا try-- مجرد محاولة الذهاب من هذا القبيل. [00:03:38] ديفيد جيه مالان: لا؟ ربما تصل إلى ذراعك الخروج قليلا استقامة وجعلها أكثر مفاجئ مثل هذا. نعم، حسنا، هيا. [00:03:48] MARIA: أنا آسف. ديفيد جيه مالان: انها ليست غلطتك. COLTON: أنه بخير. ديفيد جيه مالان: حسنا. Well-- [00:03:56] MARIA: هل يجب علينا تخطي هذا، ثم؟ ديفيد جيه مالان: نعم، دعونا تسمح لك ورطتها. لذلك إذا كان أي شخص يرغب في القيام المشروع النهائي باستخدام هذه المتطورة الأجهزة وأدرك أنه قد فقط تأخذ قليلا التعود. وthis-- الواقع هو هذا هو في الواقع نزيف حافة جدا. [00:04:10] وهذا هو ما يسمى طقم المطور، الذي ومن المفترض أن تكون أساسا ما قبل النشر حتى أن الناس يمكن أن تفعل بالضبط this-- قتال معها، شخصية كيف تعمل الهيئات الشعبية مع هذه التكنولوجيا. حتى إذا كنت تريد بعد ذلك، بعد المحاضرة، نحن يمكن أن تسمح لك يأتي و اتخاذ طعنة أخرى في ذلك. لكن على خلاف ذلك، جولة من التصفيق، إذا يمكننا، لماريا لقدومه على ما يصل. [00:04:26] MARIA: شكرا لك. [00:04:28] ديفيد جيه مالان: شكرا لك. سنقوم تعليق على هذا، ولكن سنقدم you-- ماذا عن الكرة الإجهاد هنا؟ أوه، and-- if-- نعم، وذلك بفضل. حسنا. حتى لافتة، لو كنت غير مألوف مع خيار سليم التي قطعناها على أنفسنا هناك في وقت سابق، تلفزيون مدهش تبين أنه يجب عليك الاطلاق يكون على نيتفليكس، مشاهدة حفلة هذا هو واحد هنا. [00:04:51] رئيس 1: السيدات والسادة، ساحر يدعى جوش. [00:05:04] ديفيد جيه مالان: وعلى ما يبدو، انها شيء إلى نص لي أثناء محاضرة الآن. أنا يقال أن ماريا كان عيد ميلاد يوم أمس. عيد ميلاد سعيد لذلك من CS50 لماريا أيضا. [00:05:18] لذلك كنت قد قرأت في الشهر الأخير أن هذا السادة هنا، ستيف بالمر، الذي كان في الواقع الدرجة لعام 1977 في الكلية، تقاعد مؤخرا لمايكروسوفت. وكان الجامعية هنا، ثم بعد بضع سنوات وجد نفسه في مدرسة ستانفورد للأعمال عندما تلقى الهاتف دعوة من صديق له الذي عاش أسفل القاعة منه هنا في جامعة هارفارد. وكان اسم ذلك الصديق بيل البوابات، وفي ذلك الوقت، كان يحاول تجنيد ستيف ليكون رجل الأعمال الأول، حقا، في شركة صغيرة اسم Microsoft. [00:05:45] قصة قصيرة طويلة، ستيف وفاز في نهاية المطاف أكثر، انضمت مايكروسوفت عندما وكان 30 موظفا فقط. وبحلول الوقت الذي تقاعد مؤخرا جدا، كانت الشركة 100،000 موظف على مدى السنوات القليلة الماضية. وحتى موقع على شبكة الانترنت المعروفة باسم حافة أعدت هذه الجزية على الفيديو أننا نظن أننا سوف المشتركة التي تمنحك إحساس مجرد مقدار الطاقة ستيف يرتفع الى أي العرض الذي يعطي. [تشغيل الفيديو] مايكروسوفت ومثل الطفل الرابع. الأطفال لا مغادرة المنزل. في هذه الحالة، أعتقد أنا مغادرة المنزل. يا بيل، whazzap؟ [00:06:23] -Wazzap؟ [00:06:24] -Hey، wazzap؟ لقد أعطيت ل فرصة هائلة. وقدم بيل لنا هذه الفرصة. أريد أن أشكر بيل لذلك. أنا أريد منك أن أيضا. وتيرة الابتكار لا يتم الانتقال إلى إبطاء. [00:06:42] انه ذاهب للحصول على أسرع وأسرع. قد يكون هناك عدد قليل من المنافسين أن يتم التخلص من سوء الحظ! [00:06:54] أنا أحب هذه الشركة. نعم! أنا جهاز كمبيوتر، وأنا أحب هذه الشركة! [00:07:08] المطورين والمطورين والمطورين و المطورين والمطورين والمطورين و المطورين والمطورين. نعم! مطوري الويب! [00:07:19] مطوري الويب! مطوري الويب! الاستماع إلى ماذا أنت تحصل في أي رسوم إضافية! [00:07:28] السلطة التنفيذية MS-DOS، موعد رزنامة، كومة البطاقة، وسادة علما، على مدار الساعة، لوحة التحكم. و، هل تصدق ذلك؟ Reversie! [00:07:35] نسخها على قرص كنيز! لهم وظيفة MSN! كنت البريد إلى الأصدقاء! [00:07:40] جميع بنقرة واحدة! مايكروسوفت واحد، واستراتيجية واحدة، واحدة team-- ركزت والانضباط والمهنية، وخبير في كل ما نقوم به. اسمحوا لي أن استخدام خط من فيلم قديم. [00:07:52] العلاقات هي مثل أسماك القرش. أنها تتحرك إلى الأمام أو أنها تموت. أعتقد فعلا التكنولوجيا الشركات هي نفسها. [00:08:01] [END تشغيل الفيديو] ديفيد جيه مالان: لذلك نحن سعداء جدا ل نعلن أن ستيف سينضم لنا هنا في CS50 يوم الأربعاء المقبل في المكان المعتاد والوقت هنا. سوف الفضاء قد يكون محدودا. وذلك للانضمام إلينا في شخص، والرجاء يتوجه اليوم أو بعد ذلك بقليل لcs50.harvard.edu/register. [00:08:22] وسنتابع بواسطة الثلاثاء مؤكدا البقع. نتطلع إلى أن القادم الاربعاء خلال محاضرة في CS50. الآن، في أخبار أخرى، وأنا حدث ل تصادف هذا في قرمزي فقط في اليوم الآخر. [00:08:34] اتضح أن أحد الموظفين في CS50 واحد على الأقل من الطلاب في CS50 يشغل حاليا UC الرئيس ونائب الرئيس، التي أعادتني لأيامي الخاصة الظهر عندما خسر الانتخابات UC فشلا ذريعا. ولكن الجانب المشرق في ذلك هو أنني دائما تروي القصة هي أن واحدة من انا متأكد أسباب كثيرة فقدت وكانت انتخابات انعدام تام من موهبة الخطابة. وصدق ذلك تماما، و قاد لي، تلك التجربة أعتقد سنتي، للتوقيع في الواقع تصل لجمعية الحاسبات هارفارد، الذي هي مجموعة في الحرم الجامعي الذي يحمل العديد من المحادثات الفنية وغيرها من الامور. وتوليت تدريسهم ندوات وبالتالي أتيحت الفرصة، و فرصة رائعة، لبدء العمل على هذا بالضبط. ولكن أيضا، كان لي فرصة خلال هذه التجربة لتعليم نفسي عن المزيد من HTML. ولذا فإنني ماطلت الليلة الماضية من قبل تبحث من خلال الموقع HTML مقرها أدليت به في مثل 1997، '98، لبلدي الحملة التي تبدو مثل هذا هنا. وأنا أعلم. [00:09:29] Because-- وبالطبع، إشعار هذا قرار تصميم مدهش في عام 1998 أو غيرها. أول شيء تريد المستخدمين يجب فعله عند زيارة موقع الويب الخاص بك هو ان تضغط رابط آخر فقط للدخول إلى موقع الويب الخاص بك هنا مع الراهب وراء مثل ستارة حيث سجي على ما يبدو كانت منصة حملتي. وهذا هو كل ما ستحصل عليه اليوم هو مجرد قطة. ولكن كنت أقرأ من خلال، مثل، ملصقات حملة بلدي الليلة الماضية وبرنامجي. [00:09:50] وكنت غاضبا جدا في ذلك الوقت. بلدي منصة was-- أنه كان مثيرا للاهتمام. حتى لقد هدأت منذ ذلك الحين. ولكن في يوم من الأيام، وسوف تشغيل مرة أخرى و نأمل أفضل حالا هذه المرة. [00:10:03] لذلك HTML، تلك اللغة التي قمت بها in-- أن عليك أن تجعل قريبا more-- بكثير شيء كنا الحديث في الآونة الأخيرة حول وإلى حد كبير جني أمرا مفروغا منه الآن أننا قد انتقلت إلى لغات أخرى. ولكن دعونا نتوقف لمجرد لحظة و وضع بعض من هذه الأمور في سياقها. حتى في الجملة، ما هي HTML؟ [00:10:18] أو، ما هو استخدامها ل؟ أي شخص؟ نعم. [00:10:20] الجمهور: توصيف للمواقع. ديفيد جيه مالان: توصيف للموقع. لذلك هو لغة الترميز التي يتيح لك هيكل صفحة الويب. رأس ترتفع هنا، لقب يذهب هنا، الجسم يذهب هنا. هذا هو بحروف بارزة، وهذا هو italics-- هذا النوع من التفاصيل. [00:10:33] موافق، وحسن. لذا CSS يتيح you-- وأنا استغرق بعض الحريات هناك مع التي تواجه جريئة ومائل ل وهذا ما نفذت بشكل أفضل مع هذا. CSS is-- ماذا؟ يقول في الجملة. أي شخص على الإطلاق. نعم. [00:10:46] الجمهور: الزينة و الاشياء، مثل كيفية تصميم ذلك. ديفيد جيه مالان: موافق، وحسن. الزينة التي تسمح لك لتصميم أو أسلب ذلك مع أشياء مثل بحروف بارزة و المائلة والألوان وأيضا المزيد من الغرامة المواقع الحبيبات من العناصر. انها نوع من تمكنك من التقاط الأشياء الميل الأخير بحيث إذا، على سبيل المثال، في Pset7، كنت قد لاحظت على جهازك الصفحة محفظة إذا كنت في هذه المرحلة سبق أن الجدول الافتراضي الذي جعل لإظهار المخزونات المستخدم والنقد ربما يبدو البشعة جدا افتراضيا مع أي مساحة بيضاء. كل نوع من حشر معا في الصفوف والأعمدة. [00:11:18] حسنا، مع شيء من CSS، كما قد أدرك، يمكنك قرص الواقع أن وجعله شيء أكثر دراية بكثير وبكثير أجمل أن ننظر. لذا CSS هو عن التنميق من المواقع. ولكن بعد ذلك قدمنا ​​بعد آخر اللغة، PHP، والتي تتيح لنا فعل ما؟ [00:11:36] دعونا فقط تفعل ما؟ أي شخص. وصلت الى ما وراء المغامرة الصفوف القليلة الأولى. نعم. [00:11:40] الجمهور: توليد المحتوى الديناميكي. ديفيد جيه مالان: ممتازة. توليد المحتوى الديناميكي. ويمكنك القيام بذلك في أي عدد من اللغات. نحن يحدث لاستخدام PHP لأنها في اطار مشابه جدا لتركيب مئوية. [00:11:50] لكن PHP يفعل ذلك بالضبط. فإنه يتيح لك ديناميكيا توليد الناتج. وبعض من ذلك الناتج قد يكون HTML، كما قمنا عادة ما كانت تقوم به. وانها أيضا، لأنه لغة البرمجة، هو الآلية التي عبر يمكننا التحدث إلى قواعد البيانات. [00:12:03] ويمكننا أن نجعل الاستعلامات ل خوادم أخرى مثل متوحشون ذوي أشكال بشرية وفعل أي شيء برمجيا حقا أنك قد خلاف ذلك تريد إجبار الكمبيوتر على القيام به. حتى PHP يتيح لنا البدء إخراج محتوى حيوي. حتى هذا المنطق، لم يكن لدي موقع ديناميكي مرة أخرى في عام 1998. [00:12:16] كان مجرد صفحة ويب ثابتة. وكان المحتوى الخاص بي إلى تغيير من قبل يدويا مع بعض جي إديت أو ما يعادلها. لكن PHP هو ما كنا أو يمكن أن تستخدم بدلا من ذلك، لشيء من هذا القبيل Frosh الرسائل الفورية على شبكة الإنترنت، والتي كان من المفترض أن تأخذ التسجيلات و إدارة قائمة من الأشياء التي users-- وتغيير الواقع أكثر الوقت، على الرغم من أننا يحدث استخدام بيرل، مختلفة اللغة في ذلك الوقت. [00:12:35] ثم أخيرا، قدمنا لغة الاستعلام الهيكلية SQL--. بعد ذلك لغة أخرى وهذا ما يستخدم لماذا؟ يستخدم لماذا؟ يمكننا المغامرة slight-- حسنا، نحن لن للحصول على أبعد من ذلك بكثير من الأوركسترا هنا. الجمهور: إنها بروتوكول تستخدم لاجراء محادثات مع قواعد البيانات. ديفيد جيه مالان: بروتوكول تستخدم لاجراء محادثات مع قواعد البيانات. اسمحوا لي قرص. انها لغة الطبيعية المستخدمة التحدث إلى databases-- يختار وإدراج والحذف والتحديثات والواقع حتى أن المزيد من الميزات ليس لدينا حتى سقط ارضا في كنك قد ترغب في explore-- ديك للتنقيب عن، على سبيل المثال، مشروع النهائي. لذلك هناك العديد من هذه القطع. [00:13:09] ونأمل Pset7، على الرغم من مواصفاتها طويلة جدا، انها طويلة تعمد إلى المشي لكم كيف يمكن من خلال كل هذه الأمور أن تكتب معا. الآن، يوم الاثنين، نحن قدم لغتنا الأخيرة أننا سوف أعرض رسميا في وcourse-- هذا هو، وجافا سكريبت. هذا، مثل PHP، هو اللغة تفسيرها. [00:13:25] ولكن الفرق الرئيسي اقترحت يوم الاثنين غير أنه في حين PHP تنفذ أو يجري تفسيرها على الخادم، والتي في هذه الحالة هو الأجهزة CS50، أو قد يكون بعض الويب التجارية الخادم على شبكة الإنترنت، جافا سكريبت عموما هي اللغة التي تدير جانب العميل لا الخادم side-- ذلك في المتصفح. وهو يقول، تماما مثل عندما فتحت حتى الفيسبوك مصدر رمز وجدت كل من تلك الملفات شبيبة، كان المعنى الضمني أنه عند زيارة الفيسبوك أو أكثر المواقع هذه الأيام، وتحصل ليس فقط HTML، CSS، ليس فقط، ولكن في مجمله مجموعة من جافا سكريبت كود في كثير من الأحيان في شكل ملفات شبيبة. ثم انها browser-- بنفسك ماك أو PC-- أن ينفذ هذا الرمز. [00:14:03] لكن المتصفح ينفذ ذلك. يمكنك التفكير في نوع من رمل. بحيث شفرة جافا سكريبت لا ينبغي أن يكون قادرة على حذف الملفات على جهاز الكمبيوتر الخاص بك. لا ينبغي أن يكون قادرا على إرسال رسائل البريد الإلكتروني نيابة عنك. نوع المتصفح الخاص بك من يقيد ما يمكنك القيام به. [00:14:17] حتى في هذا المعنى، انها قليلا أقل قوة، ربما، من C. ولكن يمكن تفعيل جافا، باعتباره جانبا، يمكن استخدامها على الخادم، على الرغم من أننا سوف لا يميلون إلى التحدث حول هذا الموضوع في هذا السياق. حتى الآن دعونا ربط هذه معا. أسبوع زائد قبل، قدمنا ​​بعض HTML على left-- صفحة ويب فائقة مملة. [00:14:34] فقط يقول مرحبا العالم. ثم اقترحت على الحق أننا يمكن نوع من سرقة الأفكار من مناقشتنا هياكل البيانات في C والتفكير في كيفية هذا الهرمية لغة توصيف النص على اليسار ويمكن استخلاص أو تنفيذها في الذاكرة كما هيكل شجرة الفعلي مع العقد والمؤشرات وتلك الأنواع من التفاصيل. على اليمين، ندعو أن الوثيقة DOM-- الاعتراض Model-- الذي هو مجرد طريقة أخرى للقول الشجرة. [00:14:56] الآن، لماذا هذا مفيد ل التفكير في الأمر بهذه الطريقة؟ لأن الآن مع جافا سكريبت، لأن لدينا التعليمات البرمجية التي تحصل للعب في هذا البيئة وHTML الفعلية هذا تم إرسالها إلى مستعرض وبالفعل لديها بالفعل تم تحميلها في الذاكرة بواسطة متصفح إلى شجرة في جهاز الكمبيوتر الخاص بك ذاكرة الوصول العشوائي مثل هذا، يمكننا استخدام جافا سكريبت لاجتياز الواقع أو المشي أو البحث أو تغيير تلك الشجرة DOM لكن نريد. حتى في الواقع، إذا كنت تعتقد حول facebook.com، إذا كنت تستخدم ميزة الدردشة، إذا كنت استخدام Gmail و ميزة gchat، أي شيء حيث لديك الرسائل القادمة مرة أخرى ومرة ​​أخرى ومرة أخرى، هذه الرسائل هي على الارجح، مثل، علامة LI، والعلامات قائمة البند، ربما. [00:15:35] أو ربما انهم فقط DIVS التي تبقي الظهور في كل مرة تحصل على رسالة فورية. وذلك يعني فقط ما يفعل الفيسبوك أو جوجل وأي وقت تحصل على رسالة من خادم، انهم ربما باستخدام جافا سكريبت لإضافة مجرد عقدة أخرى لهذا tree-- عقدة أخرى لهذا شجرة ثم بصريا يبدو تماما مثل خط جديد من النص على الشاشة. لكنهم إدخال في هذا بنية البيانات. [00:15:57] حتى في فصول مثل CS124 وغيرها، عليك في الواقع إرسال المزيد من أكواد ضد هياكل البيانات مثل هذا. لكنه الآن في جافا سكريبت، فإننا سوف نفترض فقط نحصل على كل من هذه الوظيفة مجانا من اللغة نفسها. لذلك دعونا ننظر على سبيل المثال. [00:16:09] اسمحوا لي أن فتح ملف يسمى form.html. انها فائقة بسيط. يبدو تماما مثل هذا. [00:16:15] لا CSS، أي التفكير في الجماليات. انها وظيفية بحتة وعلى ما يبدو أنا طلب للحصول على البريد الإلكتروني، وكلمة السر، كلمة المرور مرة أخرى، ومن ثم الاختيار الموافقة على بعض الشروط والأحكام. ما الكود المصدري لهذا يبدو على الأرجح شيء قد يتبادر إلى ذهنك مع قليلا من التفكير الآن. لقد حصلت على علامة النموذج هنا. [00:16:32] هذا العمل على ما يبدو ستكون ل اذهب إلى ملف يسمى register.php. الطريقة انا ذاهب الى استخدام هو الحصول عليها. ثم لقد حصلت على النص الحقل اسمه البريد الإلكتروني. [00:16:40] لقد حصلت على حقل كلمة المرور اسمه هو كلمة السر. أنا عندي آخر كلمة الحقل اسمه تأكيدا تعسفي إلى حد ما. انها مجرد معلمة HTTP آخر. [00:16:49] ثم نحن لدينا لا تستخدم إلا هذه منذ الفورية Frosh التجريبي في class-- مربع الاختيار الذي هو نوع عادل يساوي الاختيار. وسأتصل ذلك الاتفاق. لذلك لدي نوع من تعسفا ولكن اسمه مريح هذه المجالات. حتى الآن عندما يحصل هذا النموذج المقدمة، دعونا نرى ما سيحدث. إذا كنت تفعل malan@harvard.edu، سأفعل كلمة مرور قرمزي. سأفعل كلمة السر من لا شيء. دعونا لا تتعاون. [00:17:10] وأنا لن تحقق مربع. اسمحوا لي انقر فوق تسجيل. وتقول، جلالة، كنت مسجل. ليس حقا. [00:17:16] لكن URL تغيرت. هكذا سمح هذا النموذج بوضوح أن يقدم إلى register.php. لكن يفترض، ينبغي أن أكون اصطياد بعض من هذه الأخطاء. الآن، في بعض Pset7 و من الأمثلة محاضرة لدينا، كنا طباعة عموما خارج رسالة خطأ الحمراء الكبيرة هنا قائلا، في عداد المفقودين الاسم، أو مفقودة كلمة السر. لقد فعلنا ذلك من قبل وقمنا القيام به من جانب الخادم اكتشاف الخطأ. [00:17:37] ولكن العديد من المواقع هذه الأيام قيام العميل اكتشاف الخطأ الجانبية حيث لا يتغير URL. صفحة كاملة لا تجديد. يمكنك الحصول على ردود الفعل الفورية من المستعرض. ربما سارت الامور بشكل الأحمر. [00:17:48] ربما تحصل على ما يصل البوب. ولكنك لا تضيعوا وقت الإرسال ل بيانات الملقم هذا غير مكتملة. لذلك دعونا نرى كيف قد تحقيق هذه الميزة أيضا. [00:17:56] اسمحوا لي أن أذهب إلى form1.html، التي تبدو هي نفسها. ولكن إذا كان هذا الوقت أن أفعل malan@harvard.edu وأنا اكتب قرمزي وأنا لا زيادة التعاون ولكن انقر فوق تسجيل، لاحظ الآن. انها ليست الحل جاذبية. لقد اشتعلت على الأقل هذا خطأ. ولقد استعملت التنبيه وظيفة في JavaScript-- الذي نستخدمه فقط في الصف. بشكل عام، يجب عدم استخدام هذه لأنها يمكن أن تحصل بسرعة كبيرة خارج عن نطاق السيطرة. ولكن السر لا تتطابق هي الخطأ. [00:18:19] اسمحوا لي أن تمضي قدما وانقر فوق موافق. ولكن ماذا عن الوجبات الجاهزة رئيسية هنا غير أن URL لم يتغير. الهزال حتى أنا لم ازعجت الوقت الخادم يسأل هو السؤال الذي كان يمكن أن أحسب أن الجواب لنفسي. [00:18:30] والمستخدم، على الرغم من كان يتحدث عن هذا أطول من المستخدم سوف نفكر في هذا، وستكون لدينا ردود الفعل الفورية. لا يوجد الكمون مع اتصال الشبكة. لذلك دعونا ننظر إلى هذا شفرة المصدر. [00:18:40] يبدو Form1.html تشبه هيكليا هنا. والنموذج هو في الواقع نفسه. ولكن دعونا نرى ما فعلته هنا في الأسفل. وهناك طرق مختلفة للقيام بذلك. ولقد فعلت أكثر مباشرة ولكن ليس تابعا الطريقة الأكثر أناقة بعد. لدي علامة النصي. أنا ثم استدعاء document.getElementByID ('التسجيل'). وأنا تخزين تلك القيمة في الشكل، متغير. [00:19:04] فماذا فعلت؟ يمكنك التفكير في document.getElementByID بأنها وظيفة خاصة جافا سكريبت تمنحك أن يسلم حرفيا لكم مؤشر إلى واحدة من العقد أو المستطيلات في هذه الشجرة. وحتى الآن وهذا ما شكل لدينا متغير في جافا سكريبت هو في الواقع لافتا في. [00:19:21] حتى الآن بناء الجملة يختلف عن C. ولكن نقوم به عدد قليل من الأشياء هنا. واحد، وهذا هو واحد غريب قليلا يبحث، وبالتأكيد مقابل C. لكن انظر الآن إلى خط 35. لذلك على form.onsubmit اليسار. أذكر أن onsubmit هو مثل حقل في البنية. إذا كنت تعتقد المتغير شكل وكونها مجرد بنية C، قد يكون بعض المجالات. [00:19:42] مرة في اليوم، كان لدينا أسماء الطلاب و معرفات والمنازل وهذا النوع من المجالات. مجرد التفكير في onsubmit كما حقل آخر. ولكن من حقل خاص لأن هو مبرمج مسبقا المتصفح لنتوقع .onsubmit أن لا تكون قيمة مثل عدد أو سلسلة، ولكن أن تكون في الواقع وظيفة أو عنوان وظيفة في ذاكرة الكمبيوتر. [00:20:02] وبالفعل، وهذا ما هذه الكلمة هنا لا. هذا يقول: أعطني وظيفة جديدة. ولكن ما هو اسمها ستكون، على ما يبدو؟ [00:20:09] التفكير في العودة إلى الاثنين. ما هو اسم هذا وظيفة تقوم على هذا النحو؟ لا، أعني، هناك بوضوح لا يوجد اسم associated-- بالتأكيد ليس في ما قمت أبرز هنا. [00:20:21] ولكن هذا الواقع موافق. هذه هي وظيفة مجهول، أو وظيفة امدا كما قد يطلق عليه البعض. وهذا يعني فقط انها لا تزال وظيفة. انها مجرد، لا يمكنك تسميتها بالاسم. ولكن هذا موافق. لأنه مرة أخرى، كان المتصفح مبرمج مسبقا من قبل شركات مثل جوجل أو مايكروسوفت أو موزيلا أو غيرهم ل أعلم تماما أنه إذا كان الحقل .onsubmit داخل عنصر نموذج له القيمة، والتعامل معها على أنها function-- مؤشر دالة، اذا صح التعبير. والذي يطلق عليه عند تقديم النموذج. [00:20:46] فما كود يجب أن يعدم عند إرسال النموذج؟ على ما يبدو، كل شيء داخل متعرج. وهذا هو مجرد الأسلوبية. [00:20:53] هل يمكن أن تفعل مثل هذا ونحن نميل إلى القيام به في CS50. ولكن في جافا سكريبت، ومعظم الناس تميل إلى إبقائه على نفس الخط لمجرد أنها أكثر وضوحا المرتبطة بذلك وظيفة الكلمة. حتى الآن ماذا أفعل؟ [00:21:03] إذا form.email.value يساوي متساوين سلسلة فارغة أو لا شيء، وهنا تنبيه حيث انا ذاهب الى القول، يجب توفير عنوان البريد الإلكتروني الخاص بك، والعودة بعد ذلك كاذبة. وانها كاذبة أن العائد الذي يمنع النموذج من تقديمه. وفي الوقت نفسه، إذا كانت قيمة كلمة المرور فارغا، انا ذاهب الى الصراخ المستخدم ويقول: يجب توفير كلمة مرور. [00:21:21] وفي الوقت نفسه تزداد الأمور مربي الحيوانات قليلا هنا. إذا form.password.value لا form.confirmation.value على قدم المساواة، في مجال آخر، يصيح في المستخدم أن كلمات المرور لا تطابق لأنها لم يكن منذ لحظة. ثم هذا واحد ل أكثر جنسية قليلا لأنني أعلم أنني عرفت أن المفهوم التحقق من اسم صندوق الاختيار في. [00:21:40] لذلك أنا فقط يمكن استخدام تعجب أشر إلى ويقول إذا كان الاختيار هو لا checked-- انها منطقية القيمة الحقيقية أو false-- سوف يصيح في المستخدم لهذا السبب. خلاف ذلك، إذا تجاوزنا كل هذه الظروف، دعونا فقط العودة الحقيقية. دعونا أن تقدم النموذج. وهذا سوف يحدث بعد ذلك. [00:21:56] دعونا اكتب في قرمزي. دعونا تحقق مربع، انقر فوق تسجيل. والآن أذهب من خلال إلى الوجهة. الآن، وليس هناك قاعدة هناك. لا يوجد شيء مثير للاهتمام في register.php. أنا فقط بحاجة لشيء فعلا الحديث ل. لذلك اسمحوا لي وقفة هنا. أي أسئلة حول ما فعلناه فقط أو ما هو بعض من هذا النحو الجديد؟ حسنا، نعم؟ [00:22:17] الجمهور: لذلك فإن أي مربع هو تلقائيا منطقية. لم يكن لديك لنعلن من هذا القبيل. [00:22:21] ديفيد جيه مالان: صحيح. أي مربع الاختيار هذا ما أرسلت لك من نموذج HTML إلى شفرة جافا سكريبت الخاصة بك سيتم التعامل، نعم، باعتباره value-- منطقية صحيحة أو خاطئة. إنه سؤال جيد. أما القيم الأخرى، ل بالطبع، كانت النصوص والجمل اكا. [00:22:36] كل الحق، لذلك اسمحوا لي الترجيع قليلا أبعد من ذلك. ما هو بيت القصيد من هذا؟ مجرد أن تكون واضحة. مثل، ونحن نعلم بالفعل، وحتى من Pset7 وحتى من محاضرة الأسبوع الماضي الأمثلة، أن نتمكن من التحقق من الواضح $ _GET $ _POST معرفة ما إذا كان المستخدم تعطينا قيمة فارغة. تذكر وظيفة خالية في PHP. [00:22:54] حتى مجرد أن يكون واضحا، ما هو سبب واحد أننا ربما أيضا تريد أن تفعل فحص الخطأ هذه داخل المتصفح؟ ما هو الدافع هنا؟ نعم. [00:23:06] الجمهور: أسرع، وكنت لا إرسال البيانات إلى الخادم عديمة الفائدة. ديفيد جيه مالان: جيد. انها أسرع. لا ترسلوا عديمة الفائدة البيانات إلى الخادم. [00:23:12] حتى تحصل الوراء أكثر استجابة فورية. وعموما، فإن المستخدم التجربة هي أفضل. التفكير في البديل. [00:23:17] إذا كان لGmail-- و القضية منذ سنوات عديدة. لنفترض أنك حصلت على بريد إلكتروني جديد Gmail الخاص بك الحساب، ولكن الطريقة الوحيدة من خلال لرؤية هذا هو ل، مثل، إعادة تحميل الصفحة بأكملها. أو لنفترض أنك انقر على وصلة لقراءة رسالة بريد إلكتروني. [00:23:29] كل ما لديه لإعادة تحميل ذلك يمكنك أن ترى البريد الإلكتروني. أو Facebook-- تحصل على رسالة الدردشة. كنت لا أرى ذلك حتى تحميل الصفحة أو فوق بعض الارتباط. [00:23:36] مثل، سيكون هذا أحد بفظاعة تجربة المستخدم مزعج. وهذا هو ما كان عليه، بوضوح، مرة عندما ركضت لجامعة كاليفورنيا وكان ويب ديناميكية أقل بكثير وكان جافا سكريبت ليس كما شاع كما هو عليه الآن. وتزداد الأمور كثيرا أكثر ديناميكية وأكثر من ذلك بكثير العميل بهذا المعنى. [00:23:49] ولكن هناك كمية الصيد هنا، و هذا هو نوع من مسكتك مزعج. فقط لأنك إضافة العميل الكشف عن مثل هذه لا تعني أو يمكنك أن تتخلى الكشف عن الخادم الجانب. تريد أساسا لوضع الخاص بك خطأ التحقق في كلا المكانين. لأن ما كان واحدا من الدروس المستفادة من المقال وأنا أقرأ بعض المقتطفات من هذا CMS system-- غبي إدارة المحتوى System-- التي كانت تنفيذ نظام التوثيق لها، تسجيل الدخول لها عبر ما الآلية؟ جافا سكريبت. [00:24:20] الجمهور: جافا سكريبت. ديفيد جيه مالان: جافا سكريبت، بالضبط، أليس كذلك؟ انها تستخدم جافا سكريبت. وحرفيا، يا رفاق لها لعبت قليلا ربما مع المفتش كروم. واذا كنت استطيع العثور عليه، تفقد عنصر. [00:24:30] اسمحوا لي أن يذهب أكثر للقيام جميع الخيارات كروم. وهذا هو كم هو سهل ل تعطيل جافا سكريبت في المتصفح. تحقق، لا أكثر جافا سكريبت. [00:24:38] حتى في الإنصاف، والكثير على شبكة الإنترنت هذه الأيام هو مجرد الذهاب لكسر ل جوجل وغيرها sites-- Facebook-- نفترض أن يتم تمكين جافا سكريبت. ولكن اذا كنت تريد ان تفعل شيئا غبيا مثل التحقق من صحة المدخلات فقط للمستخدمين والتحقق من ذلك لل أخطاء على جانب العميل، عدو يمكن القيام بذلك بسهولة. وحتى ذلك الحين أكثر ذكاء خصم مثل يا رفاق الآن يمكن استخدام Telnet أو الضفيرة أو أوامر سطر الأوامر عادل وفعلا بإرسال رسائل إلى خادم وبالمثل أن لا خطأ التحقق. [00:25:05] لذلك هذا هو أكثر من قرار واجهة المستخدم مما هو فعلي التقنية improvement-- تنفيذ العميل شيئا من هذا القبيل. حتى الآن لمحة سريعة، ولكن بعد سوف تؤجل إلى المشي على الانترنت عبر عن هذا واحد. في شكل اثنين، ذهبنا في الواقع من خلال وتنظيف رمز قليلا. ولكن اسمحوا لي أن تؤجل إلى واحد من أشرطة الفيديو سنقوم على الأرجح تضمين في Pset8 يظهر فقط لكم تركيب مماثل باستخدام مكتبة تسمى مسج، الذي هو السوبر، والسوبر مكتبة شعبية في جافا سكريبت بصراحة أن معظم الناس مجرد استخدام هذه الأيام وحتى الخلط كما كائن جافا سكريبت نفسها. [00:25:37] وأنه يميل إلى إشراك بعض علامات الدولار وكلمات مثل ثيقة بين قوسين هنا. ولكن مرة أخرى، اسمحوا لي أن تؤجل ل بعض الدروس أبطأ على الانترنت بدلا من الحصول على قيدوا في جملة فقط. دعنا ننتقل ل شيء برودة قليلا من حيث التطبيقات من هذا. [00:25:50] لذلك على وجه الخصوص، اسمحوا لي ان اذهب وقبل فتح هذا هنا. هيا. هناك نذهب. [00:25:59] اسمحوا لي أن تفتح هذه الصورة هنا. تعقيدا لا داعي له المظهر، ولكنها يصف تقنية تسمى AJAX-- غير المتزامن جافا سكريبت وإكس إم إل، حيث إكس إكس هو في الواقع لم تعد تستخدم حقا. أنه يميل إلى استخدام شيء ودعا آخر جسون. [00:26:13] ولكن هنا هو كيف شيء من هذا القبيل خرائط جوجل أو جوجل إيرث يعمل. دعونا نحاول هذا على الطاير، في الواقع. اسمحوا لي أن تمضي قدما وفتح يصل كروم على متصفحي. [00:26:21] واسمحوا لي أن أخوض في، أقول، maps.google.com. والواقع، إذا كنت القديمة يكفي أن نتذكر ما، مثل، كان مثل مابكويست مرة في اليوم، وربما أنها لا تزال تعمل من هذا القبيل. عند استخدامها للبحث عن something-- 33 شارع أكسفورد، كامبردج، ماساشوستس، دعونا نفعل this-- لك شأنه في الواقع، إذا كان ل أرغب في عموم صعودا و الأسفل واليسار واليمين، كنت تبدو وكأنها سهم كبير على القمة، و سوف تظهر لك آخر إطار خريطة هنا. أو كنت انقر فوق اليسار ولك سيتوجه أكثر من هنا، أو آخر فوق وسوف تذهب إلى هنا. ولكن بدلا من هذه أيام، ونحن بالطبع فقط تأخذ من المسلم به أن نتمكن من الذهاب حول كامبريدج بسرعة كبيرة فقط عن طريق النقر والسحب. ولكن لاحظت ان هناك بعض مواطن الخلل. [00:26:59] إذا كنت تفعل ذلك بسرعة كافية، ما يبدو أنه يحدث وأنا اسحب قليلا بسرعة كبيرة للكمبيوتر لمواكبة؟ ماذا ترى؟ نعم. [00:27:07] الجمهور: بكسل لا تجديد. ديفيد جيه مالان: و بكسل لا تجديد. هناك actually-- ولك يمكن أن نرى هذا، في الواقع، إذا كنت أشاهد على الانترنت وقفة هذا الواقع أو يبطئ الأمور لonce-- سترى أن هناك البلاط والساحات، أو المستطيلات التي مفقودة من الخريطة حتى وبعد جزء من الثانية، والمزيد من البيانات، المزيد من الصور فعلا تظهر على الشاشة. وفي الواقع، إذا فعلنا هذا من خلال النظر يصل Chrome's-- دعنا نقول، Chrome-- دعونا نرى. لا نستطيع أن نفعل ذلك. [00:27:31] أوه، يصيح. دعونا فتح maps.google.com. اسمحوا لي أن نافذة أكبر مرة أخرى. [00:27:36] نعود إلى 33 أكسفورد ستريت. ما هو موقع كنت في الآونة الأخيرة؟ كان هذا، مثل خرف الخاص ل نفسي ان كنت ثم رسالة فورية أي صديق الذي كان على الانترنت الذين يريدون سماع ذلك. هناك بعض المواقع. أعتقد أنه من Comcast-- ذلك وISP الأمريكية كبيرة جدا. يمكنك، عند الاشتراك في الكابل الجديد خدمة مودم كابل أو خدمة التلفزيون، لديهم شكل معقول جدا حيث يطلب منك عنوانك. ويكون هذا مدهش ميزة تسمى كاملة لصناعة السيارات، مثل جوجل، والذي يبدأ لملء في جواب على سؤالك. [00:28:04] المشكلة هي، فإنها لا تكتمل السيارات في أول الأشياء التي تكتبها. حتى إذا كنت ابدأ الكتابة في 33، و سوف تظهر لك حرفيا كل بيت في أمريكا أن يبدأ مع عدد 33 قبل المتابعة ل نتوقع منكم أن اكتب أكثر. حتى إذا قمت بكتابة 33 أكسفورد، ثم يظهر لك كل شارع في أمريكا التي تمتلك 33 في أوكسفورد اسمها، بصرف النظر عن البلدة أن كنت في. [00:28:25] ثم يمكنك الاستمرار في الكتابة. وأخيرا، فإنه يدرك أن يفعلوا ذلك عرض الخدمة إلى منزلك في كامبريدج أو شيء من هذا القبيل. ولكن النقطة هي، وهذا هو الأكثر تنفيذ أبله السيارات إكمال أي وقت مضى. [00:28:34] وأنا مجرد الخروج على هذا الظل مرة أخرى. ولكن هناك طرق جيدة ل استخدام جافا سكريبت والطرق السيئة. وهذا ليس بالضرورة أفضل واحد. [00:28:40] ولكن النقطة هنا، وقبل هذا خطبة عصماء، وكان لفتح الأدوات أسفل هنا وفتح أدوات المطور، كما قمنا بتشجيع من قبل، ومشاهدة الشبكة انقر علامة التبويب كما كنت سريع حقا. وتلاحظ مجموعة كاملة للحصول حدث الطلبات. حدث كل ذلك منذ أن جر. [00:28:57] وعلى الأرجح، في الواقع الكثير من هذه الصفوف الآن الصورة مائل JPEG أنواع MIME أو أنواع المحتوى. ذلك لأن ما يقوم به الكروم في كل مرة كنت فوق، والسحب، انقر وجر، غير انها تدرك، أوه، أنا بحاجة للذهاب تسأل جوجل للبلاط على الخريطة التي انتهى هنا، بسرعة تحميل البرنامج عبر HTTP، ثم إضافته إلى ما يسمى DOM لمتصفحات الويب في شجرة الذاكرة التمثيل بحيث يمكن للمستخدم، لي، ويرى أن البلاط المحدثة. وهذا بسبب تقنية تسمى AJAX. مرة في اليوم، انها حقا وكانت القضية أنه إذا أراد أن يغير ما هو على الشاشة، سيكون لديك لانقر فوق، أسفل، يسار، الحق. وبعد ذلك سوف تفتح صفحة جديدة. ولكن في هذه الأيام، كل شيء هو أكثر ديناميكية. يحدث في الطريق ونحن البشر نأمل فعلا من شأنه تفاعلي. ويحقق هذا عن طريق طريق تقنية تسمى AJAX، والتي هي ربما أفضل أوضح مثال على ذلك. أولا، اسمحوا لي أن المضي قدما وفتح ملف ودعا في quote.php كود التوزيع اليوم. [00:29:53] ثم اسمحوا لي أن تفعل يصيح symbol--. اسمحوا لي أن تفعل رمزا = GOOG لبعض الأسهم فقط. أو في الواقع، دعونا نفعل و واحد من PSET مجانا. دخول. [00:30:05] والآن نلاحظ ما أعود. لذلك هذا هو حقا ملف PHP قصيرة بأنني كتب ببساطة أن تقترض كود من وظيفة البحث في Pset7 ويبصق استخدام هذا متعرج و ونقلت وتدوين القولون، على ما يبدو، سعر السهم الحالي ل الشركة التي كنت تمر في طريق الحصول على. لذلك هذا هو مختلفة من معظم ما لدينا يتم في هذا إشعار أنا البصق حرفيا ما يشبه شفرة جافا سكريبت. [00:30:27] في الواقع، وهذا هو كائن جافا سكريبت. في الواقع، لمجرد أن يكون أكثر وضوحا، كائن جافا سكريبت Notation-- JSON-- هو مجرد طريقة أخرى للقول أن ل يمكن تمثيل البيانات في جافا سكريبت بكثير كما يمكنك في PHP باستخدام أزواج قيمة المفتاح. لذلك إذا أردت أن يعلن متغير في جافا سكريبت يمثل لZamyla، ل instance-- البنية لZamyla-- ونحن سوف يطلق عليه طالبة، هذا المتغير. ID لها هو واحد، هو منزل ينثروب، والاسم هو Zamyla. [00:30:53] لكنني يمكن أن يكون أيضا مجموعة من الكائنات. لذا إذا أردت فعلا أن يكون صفيف في جافا سكريبت تحتوي على هذه الأجسام متعددة، وهذا الوقت يمثلون الموظفين، وأود أن يكون هؤلاء الثلاثة قطع من التعليمات البرمجية إلى الوراء إلى الخلف إلى الخلف لهذه ثلاثة موظفين سابقين. حتى بناء الجملة، جميلة على غرار both-- إلى PHP. ولكن هذا هو جافا سكريبت بشكل خاص. انها تدوين الكائن. فما هو هذا مفيد ل؟ [00:31:17] إذا كنت كتابة التعليمات البرمجية التي يبصق JSON-- كائن جافا سكريبت Notation-- الاشياء التي يشبه هذا أو الاشياء التي يشبه هيكل Zamyla و يمكنني استخدام هذا الواقع في برامج وأنا أكتب. اسمحوا لي أن أذهب إلى ajax0.html. وهذا ليس كثيرا too-- الفكر بالنظر إلى الجماليات. ولكن مشاهدة ما يحدث. [00:31:34] اسمحوا لي أن تمضي قدما واكتب الحرة هنا. انقر حصول على الاقتباس. وتلاحظ لم يتغير URL. لكنني لم أحصل على ما يبدو مع المنبثقة قرش سعر السهم اليوم من 0،15 $. لذلك ليس كل ما سيئة. ولكن الفرق هو أن بطريقة ما، وجاءت هذه البيانات مرة أخرى إلى بي مباشرة. ولكن دعونا نلقي خطوة نحو شيء أكثر ألفة. في نسخة واحدة من هذا، اسمحوا لي اكتب مرة أخرى مجانا، انقر فوق الحصول على الاقتباس، وnow-- أوه، وكان هذا في الواقع النسخة مسج. لذلك دعونا me-- لم أكن الحركة السريعة إلى الأمام تماما بعيدا بما فيه الكفاية. اسمحوا لي أن أذهب إلى الإصدار الثاني، الذي هو المكان الذي أردت. لاحظ ما قمت به هنا. لدي شبكة page-- عظمى نسخة بسيطة من أي صفحة ويب قد تستخدم اليوم مع حقل النص هنا مجانا وبعد ذلك على ما يبدو فقط النص. [00:32:14] هذه ليست صورة هنا، على ما يبدو. ولكن إذا كنت اضغط على الاقتباس، لاحظ صفحة الويب الخاصة بي على وشك أن تتغير على الرغم من أنني فقط حصلت على رسالة فورية جديدة أو كما لو كنت مجرد نقل الخريطة واللازمة للحصول على المزيد من البيانات وأضاف حيوي لصفحة الويب دون تغيير URL والمستخدم تجربة الحصول على تنقطع. في الواقع، أنا لا تزال في بالضبط نفس ajax2.html place--. [00:32:35] لذلك دعونا ننظر فقط في هذا المثال ونرى كيف يحدث هذا. اسمحوا لي ان اذهب الى ajax2.html. وتلاحظ في النموذج الأول. [00:32:44] إلى هنا، وأنا تحول إيقاف السيارات كاملة. أحيانا يحصل مزعج إذا المتصفح تحاول أن تظهر لك تاريخك كله. لذلك يمكنك أن تفعل ذلك في HTML من قبل فقط أقول الإكمال التلقائي قبالة. [00:32:53] لقد أعطيت هذا النص الحقل symbol-- بل معرف من رمز. والآن، وهذا هو ميزة مثيرة للاهتمام. ونحن لا نتحدث عن فترة، ولكن يمكنك أن تفكر في ذلك مثل علامة الفقرة أو شعبة العلامة. انها ما يسمى في خط عنصر، والتي يعني أنك لن تحصل على فقرة كسر أعلاه وأسفله. انها مجرد الذهاب الى البقاء في الخط دون ضرب ما يعادل دخول. حتى لقد أعطيت هذا جزء من HTML تحدد معرف فريد ان دعوت تعسفا السعر. ولدي زر إرسال. [00:33:21] لأن الآن ما يصل here-- وهذا هو في الواقع السوبر مدهشة كود كم هو قليل يمكنك الكتابة إلى فعل أنيق نسبيا things-- لاحظت ما فعلته هنا إذا أنا انتقل إلى رأس الصفحة. لقد تضمنت لأول مرة في رأسي علامة النصي يشير الواقع ملف جافا سكريبت في أماكن أخرى. هذا هو من المنظمة أن يكتب مسج، وهذا هو مجرد إعطاء لكم أحدث نسخة من مكتبة مسج بهم. [00:33:42] لذلك هذا هو نوع من مثل شارب تدرج في C أو تتطلب في PHP. يمكنك استخدام علامة النصي مع سمة المصدر. ولكن الآن كود بلدي هو سيكون الحق في هنا. [00:33:52] تلاحظ لدي وظيفة تسمى نقلت. ويبدو قليلا خفي للوهلة الأولى. ولكن دعونا ندف هذا عدا. أعطني URL متغير يسمى. تعيين حرفيا هذه السلسلة. لذلك، علامات الاقتباس المفردة، علامات التنصيص في جافا سكريبت يعطيني مجرد سلسلة. ماذا زائد تفعل؟ سلسلة. [00:34:08] حتى الآن هذا هو بناء الجملة مسج التي تأخذ قليلا التعود. ولكن هذا يعني فقط الذهاب الحصول لي DOM العقدة التي هي رمز معرف فريد. وهناك علامة التصنيف يعني رمز معرف فريد. [00:34:21] الدولار في قوسين يعني فقط، والتفاف هذا في مسج نوع من الخلطة السرية جدا يمكنك الحصول على وظائف إضافية. ثم .val على ما يبدو وظيفة، أو كما نقول الآن، طريقة داخل هذه العقدة أن يعطي فقط لك قيمة. هكذا باختصار، والقبيح ومربكة كما يبدو هذا للوهلة الأولى، هذا يعني فقط الحصول مع المستخدم بكتابتها في، ووضعها في نهاية السلسلة بواسطة وصل إليها. هذا كل شيء. [00:34:43] وحتى الآن، وخطوط الثلاثة الماضية. يمكنك الضغط على الكثير من وظيفة من أصل ثلاثة خطوط. هذه علامة الدولار، باعتباره جانبا، هو مجرد لقب لمتغير عالمي خاص دعا حرفيا مسج. [00:34:55] علامة الدولار فقط يبدو باردا. لذلك المجتمع مسج نوع فقط من استخدامه كرمز خاص بهم. وهذا لا يعني ما يعنيه في PHP. في جافا سكريبت، علامة الدولار تماما مثل حرف من الأبجدية أو عدد متغير. [00:35:07] هل يمكن أن يكون مجرد أنها اسم. فقط تبدو باردة. حتى المجتمع اعتمد بأنها كنية عن مكتبة خاصة بهم تسمى مسج. [00:35:13] وانها شعبية فائقة. حتى الحصول على جسون هو بالضبط ذلك. انها وظيفة أن كتب الناس في مسج أن يحصل جسون من server-- جافا سكريبت تدوين كائن. عما URL الحال للحصول على تلك المعلومات؟ يبدو من هذا العنوان هنا. [00:35:27] وماذا يجب أن تفعل المتصفح كما حيث سرعان ما يعود هذا الرد؟ وهذا هو سحر أجاكس، لذلك ل speak-- جافا سكريبت غير المتزامنة في XML. من الصعب أن نرى مع مثل هذا مثال بسيط كما كان لدينا هنا. [00:35:41] ولكن هذا كان في غير متزامن بمعنى أن قانون بلدي عندما أعدم أرسلت رسالة إلى الخادم للذهاب تحصل لي بعض جسون. وحدث ذلك بسرعة فائقة التي حصلت على استجابة. ولكن ما هو المثير للاهتمام هو أن هذا لم سطر من التعليمات البرمجية لا يتعطل جهاز الكمبيوتر الخاص بي. [00:35:55] لم أكن أرى رمز الغزل. أنا لم يخسر القدرة على تحريك الماوس بلدي. كان متصفحي فعلا ما يرام تماما. [00:36:01] لأن الطريقة التي يعالج جافا سكريبت ل استجابة من الملقم هي على النحو التالي. قمت بتسجيل ما كنت استدعاء وظيفة رد الاتصال، الذي يعني فقط، مهلا، وجافا سكريبت. حالما الخادم يستجيب مع JSON، يرجى الاتصال هذه وظيفة مجهولة. [00:36:18] ويرجى تمريرها إلى هذه الوظيفة مهما سلسلة خادم بصق كحجة تسمى البيانات. حتى في غيرها، والكلمات، وإذا كان أنا تجميع حيوي وquote.php URL يمر في هذه رمز مثل مجانية أو GOOG أو شئون الحياة، أنا ثم يقول جافا سكريبت يذهب للحصول على هذا العنوان. تذكر أن المستعرض سوف تعود شيئا يشبه رأينا earlier-- هذا. [00:36:42] وما هي الحجة الثانية هنا للحصول على جسون يقول تم استدعاء هذه الدالة عندما يكون الملقم يحصل إلى الخلف سواء كان ذلك في 10 ميلي ثانية من الآن أو 10 ثانية من الآن. وبمجرد القيام به، إضافة إلى سعر الصفحة. هذه جملة هنا فقط يعني يذهب للحصول على العقدة من الشجرة التي معرف فريد هو price-- تلك الفترة رأينا سابقا. [00:37:01] تسمى هذه الطريقة HTML فقط يقول، انتقل استبدال وHTML هذا هناك مع data.price. ما هو data.price؟ حسنا، المتصفح، يتذكر، أظهر لي هذه العودة. لذلك هذا هو البيانات. [00:37:14] ولذا فمن خفي قليلا لمعرفة الفواصل هنا. ولكن في الواقع، اسمحوا لي أن تفعل هذا. اسمحوا لي فقط لصق هذا بسرعة حقيقية في جي إديت وتظهر مثل هذه أظهرنا هيكل Zamyla في وقت سابق. [00:37:27] ما الخادم يرسل إلى الخلف هو الكائن الصغير الذي يبدو مثل هذا. وهكذا هو data.price فقط إعطائي 0.1515. لذلك الكثير من الانتقال أجزاء هنا في كل مرة. [00:37:39] لكن الوجبات الرئيسية هي أن لدينا هذه القدرة لجعل HTTP إضافية طلبات استخدام جافا سكريبت دون الحاجة لإعادة تحميل الصفحة. ومن ثم يمكننا فعلا تغيير صفحة ويب على الطاير. واتضح أن جافا سكريبت وغيرها من اللغات يمكن استخدامها ليس فقط الآن ليتحور صفحات الويب، و ولكن في الواقع لكتابة البرامج في الكمبيوتر الفعلي، لا تقتصر فقط على كروم أو ما شابه ذلك. [00:38:00] في الواقع، if-- كولتون، هل ترغب في الانضمام إلينا احتياطية هنا مع رمز المختبر الخاص بك، وتشانغ أيضا؟ دعونا المضي قدما، بعد أن تحدث عن وظائف المجهول والاسترجاعات وحقا يغري مصير هنا مع عرض حي مع النزيف التكنولوجيا الحديثة، واحدة من هذه الأجهزة النخبة الحركة. الآن، وهذا الجهاز، استدعاء، هو جهاز USB الصغير فضلا that-- هذا beautiful-- ان السدادات في لمنافذ USB الخاص بك. [00:38:25] ومن ثم فإنه يوفر مدخلات في شكل إيماءات الإنسان عن طريق الكشف باستخدام الأشعة تحت الحمراء، في الأساس، والحركات من ذراعك. ذلك في حين ما حاولت ماريا قبل يوم والعضلات، الشعور فعلا ما تغير ذراعك، وهذا هو أساس الأشعة تحت الحمراء. حتى انها تبحث عن الحركات داخل هذا النوع من مخال القدم أو نحو ذلك من الجهاز نفسه. [00:38:46] فلماذا لا أغتنم طعنة في هذا أولا؟ ودعونا نمضي قدما ورمي لكم على النفقات العامة هنا. لذلك دعونا نضع المحمول كولتون من هنا. لدينا أندرو على التلفزيون. وماذا تريد مني أن أفعل أولا؟ [00:39:00] COLTON: المضي قدما وعادل وضع يديك على هذا الرجل وسترى بعض لمعان رائع. [00:39:04] ديفيد جيه مالان: لطيفة جدا. هذا هو كل شيء يحدث في الوقت الحقيقي. موافق. كل الحق، وموافق. لطيف جدا. كل الحق، وماذا يمكننا أن نفعل؟ [00:39:15] COLTON: اذهب إلى الشاشة التالية ونرى. [00:39:17] ديفيد جيه مالان: حسنا. [00:39:19] COLTON: لعبة المرح قليلا حيث تحصل على جعل الروبوتات. [00:39:21] ديفيد جيه مالان: حسنا، لذلك هذا هو يد مزورة تبين لي ما يجب القيام به. COLTON: نعم فهيا وانتزاع واحدة من لبنات ووضعها على رأس الهيئة التي الروبوت. ديفيد جيه مالان: أوه، هناك يدي. أوه. OK، رائعتين. انتظر لحظة، موافق. هناك نذهب. [00:39:41] COLTON: أنا جعلت واحدة في حادث. [00:39:43] ديفيد جيه مالان: حسنا، أنا سوف تحصل على هذا الرجل. اللعنة! عندما كنا ممارسة هذا الأخير الليل، وانت تعرف ما آلت إلى هذا؟ [00:39:51] مثل هذا. موافق. واحد في المرة القادمة؟ [00:39:55] COLTON: متأكد. [00:39:56] ديفيد جيه مالان: حسنا، وهناك الثلث. حسنا. COLTON: وفي هذا واحد، وتحصل علي: ديفيد جيه مالان: أوه، هذا واحد جميل. COLTON: --yeah، واختيار ما عدا هذه الزهرة. ديفيد جيه مالان: OK. لا؟ غاب. [00:40:14] COLTON: أوه، هناك تذهب. [00:40:15] ديفيد جيه مالان: آه، انظروا إلى ذلك. لطيف جدا. حسنا، لماذا لا "نتخذ من أحد المتطوعين هنا الذي ترغب في أن يأتي على ما يصل. ماذا عن حق هناك في المنطقة الخضراء، أليس كذلك؟ [00:40:27] كل الحق، ودعونا have-- بدلا من القيام بذلك، البعض منكم قد تعرف هذه اللعبة here-- قطع الحبل، ربما؟ دعونا نرى. لدينا لدينا النظارات على أكثر من هنا؟ [00:40:37] موافق. شكرا لك. ما اسمك؟ [00:40:39] الجمهور: لورا. [00:40:40] ديفيد جيه مالان: لورا؟ من الجميل أن نرى. إذا كنت لا تمانع في وضع نظارات جوجل خلال النظارات الخاصة بك. هذا هو كولتون. [00:40:46] COLTON: مرحبا. تشرفت بمقابلتك. [00:40:48] ديفيد جيه مالان: موافق، هيا حولها. كل الحق، لذلك ما كنت تريد الذهاب ل به هنا، بعد أن لعبت هذا من قبل، وضعت يدك على والحركة قفزة هنا. والآن يجب أن تتحرك الأسهم الخاصة بك. أوه، كلا. [00:40:57] الجمهور: رقم [00:40:58] ديفيد جيه مالان: نحن لا أريد أن استقال بعد. حسنا، الانتظار. أكثر من هنا. حتى إشعار كما كنت عقد الخاص الاصبع على شيء، الماوس يبدأ في الذهاب الخضراء، وهو كيف النقر فوق. [00:41:06] لذا تحوم فوق تشغيل. وإصبع واحد فقط على ما يرام. والآن انقر على القليل الرجل الأخضر على اليسار. وعقد حتى الآن تمتلئ الأخضر. الخير. الآن، مثل، مستوى واحد حتى أعلى. [00:41:16] الجمهور: نعم، نحن نريد مستوى واحد، هنا. [00:41:20] ديفيد جيه مالان: جيد. موافق، لذلك كل ما عليك يتم قطع الحبل للقيام به. المؤشر هي واحدة بيضاء أسفل هناك. [00:41:28] لطيف جدا. كل الحق، انها على وشك الحصول على أكثر صعوبة. لذلك عقد إصبعك على الآن المقبل. الخير. هذا واحد من الصعب. [00:41:39] الجمهور: أوه حماقة. موافق. إنها تريد أن تذهب بهذه الطريقة. يا حماقة، that-- [00:41:44] ديفيد جيه مالان: نعم. الهدف الثانوي هو الحصول على جميع النجوم. كل الحق، المقبل. [00:41:53] دعونا نرى ما اذا كان يمكنك الحصول على هذا الثلث. الخير. حسنا، أذهب الى هناك. [00:42:06] بالتأكيد. أوه، لطيفة جدا. حسنا. [00:42:11] فلماذا لا نرفع الجلسة اليوم؟ السماح لأي شخص يأتي على ما يصل من يريد أن يلعب. شكرا جزيلا لورا المتطوعين لدينا. وسوف نرى لك يوم الاثنين. [00:42:18] الجمهور: ربما كنت تريد هذه العودة. [00:42:21] المتحدث 2: في CS50-- المقبل