[Powered by Google Translate] [تابع أسبوع 9]
[ديفيد J. مالان - جامعة هارفارد]
[هذا CS50. - CS50.TV]
>> هذا هو CS50. هذا هو نهاية الأسبوع 9. شكرا جزيلا.
في نهاية المطاف. الأسبوع 9. حصلت عليه.
اليوم نواصل حديثنا عن برمجة الويب
مع العين في اتجاه المشروع النهائي، وليس لأن لديك لتفعل شيئا على شبكة الإنترنت
لمشاريع النهائي ولكن إما لأن لمشاريع النهائي أو بعد CS50
هذا هو بالتأكيد الاتجاه الذي تسير البرمجيات الحديثة.
وحتى الآن انها ليست في الواقع بالأمر السهل.
في الواقع، واحدة من أصعب الأمور القيام به هو جانب من جوانب التصميم.
>> على سبيل المثال، حسب التصميم يعني أننا في الواقع الحصول على واجهة المستخدم
أو تجربة المستخدم الصحيح.
نحسب - ونحن نعرف من مجموعة المشكلة الأخيرة
عندما بثت لك عدد قليل من القبضات الخاص عن بعض قطعة من البرمجيات
أو الأجهزة التي يغضب لك، سواء داخل الحرم الجامعي أو إيقاف تشغيله -
هناك الكثير من المواقع هناك، وهناك الكثير من الأجهزة هناك،
هذا النوع من يمص.
ولكن الواقع هو أن جعل الأشياء التي هي سهلة الاستخدام حتى الآن قوية على الرغم من ذلك
يمثل تحديا صعبا للغاية.
ذلك اليوم طلب مني يوسف وتومي لي للانضمام هنا
حتى نتمكن من إجراء محادثة، سواء عن تصميم
وماذا يجب أن أنواع بدء عمليات التفكير التي يمر بها رأسك
عند تصميم المشاريع الخاصة بك النهائي، مساعيكم في المستقبل.
ثم بمساعدة تومي وسوف نبحث في بعض تفاصيل التنفيذ.
كيف يمكن أن يكون لديك بعض الرؤية على الورق أو في عقلك
يمكنك أن ثم تنفيذ برمجيا
باستخدام بعض التكنولوجيات والتقنيات لقد بدأنا للتو نتحدث عن،
وهي جافا سكريبت وأحدث شيئا من ذلك، وهي AJAX، وجافا سكريبت غير المتزامنة.
التي تسمح لك لخلق ديناميكية جميع أكثر من واجهة المستخدم
بواسطة جلب المزيد والمزيد من البيانات من خادم تدريجيا.
وهكذا لن نرى بعض تلك المقتطفات وكذلك اليوم.
بوصفها جانبا، إذا كنت ترغب في التركيز في علوم الكمبيوتر
أو minoring في علوم الكمبيوتر، ونعرف أن هذه الجمعة ظهرا
في دوركين ماكسويل 221 سيكون هناك حدث البيتزا
حيث يمكنك معرفة أكثر قليلا عن علوم الكمبيوتر.
في طريقك الى الباب اليوم عليك أن تكون قادرا على التقاط أي دليل غير رسمية لCS في جامعة هارفارد.
سوف نضعه على صناديق القمامة خارج في ارتفاع الخصر
بحيث إذا كنت ترغب في الاستيلاء على هذه وتعلم أكثر قليلا حول CS،
وأن يكون هناك لك كما كان في الأسبوع 0.
أيضا إذا كنت ترغب في الانضمام إلينا لتناول طعام الغداء يوم الجمعة CS50 في الساعة 1:15،
التوجه إلى cs50.net/lunch.
دون مزيد من اللغط، وأنا أعطيك التدريس زميل جوزيف أونج.
مرحبا. [تصفيق]
شكرا.
كانت المرة الأولى علمت عن التصميم في فئة تسمى هنا CS179.
>> وقال الأستاذ في الوقت لنا قصة عن آخر أستاذ
الذي كان قد ذهب إلى أحد الفنادق واستخدام الحنفيات.
يمكن لأحد أن يقول لي ما المقابض 2 على اليسار والقيام أليس كذلك؟
[طالب] الساخنة والباردة. حار وبارد >>. جيدة.
ما كنت تتوقع عادة، أليس كذلك؟
هذا الأستاذ بعد استخدام صنبور يريد الاستحمام، وينتقل إلى استخدام هذه.
يعتقد اليسار واليمين الجانبين هي لالساخنة والباردة، أليس كذلك؟
ولكن يمكن لأحد أن يقول لي ما هي هذه فعلا؟
أي يد؟
[رد الطالب غير مسموع] >> أحد الاقتراحات هو؟
[رد الطالب غير مسموع] >> درجة الحرارة؟
حتى واحد منهم يتحكم في درجة الحرارة وعناصر التحكم الأخرى؟ >> [طالب] ضغط المياه.
ضغط المياه. جيدة.
هذا الأستاذ يمشي في هذا، والتفكير التي تسيطر الساخنة والباردة،
يتحول الحق واحد، والذي يعتقد انه على الساخن، على طول الطريق حتى
لأنه يريد أن تأخذ دش دافئ.
حسنا، هذه لا تتطابق حقا، حتى انه يحصل على هذه التجربة ممتعة جدا لا
يجري في الاستحمام بالماء البارد، ونحن جميعا نعرف ما الذي تشعر به.
هذا مثال من عيب التصميم.
ما أعنيه هو أن توقعه من صنبور
لم تتطابق مع ما خرج من الحمام،
وهو نوع من المؤسف له.
لذلك هذا هو مثال على عيب التصميم الذي يحدث في الحياة الحقيقية.
ولكننا نرى جميع أنواع القضايا الأخرى أيضا.
نحن ربما لا المشجعين من نظام MBTA.
هذا هو نظام مترو الأنفاق في لندن في الواقع، الذي يقول: "هذا الزر ليست قيد الاستخدام."
لماذا هو حتى هناك؟ لماذا نهتم حتى؟
عندما كنت طفلا، كونها واحدة التكنولوجيا والدهاء في المنزل،
كلما من شأنه ان تحطم جهاز الكمبيوتر، وأمي تأتي لي،
تبين لي هذه الشاشة وتطلب مني ما حدث.
>> حتى أنا لا أعرف ما يعني هذا.
[ضحك] ماذا؟
[ضحك]
أحيانا نرى مثل مطوري البرمجيات ليست سوى التصيد لنا.
كمستخدمين نحن مثل، "ما الذي يجري؟ يخبرنا أحد".
كل هذا يأتي الى مسألة التصميم.
التصميم، كما نرى، ليس محض حول علم الجمال،
انها ليست حول كيف تبدو الأمور.
نرى هنا أن هذا القليل المنبثقة أكثر من هنا تبدو لطيفة وجميلة فعلا.
أنه يحتوي على شبح الهبوط في الخلفية، فقد أنصاف الأقطار الحدود مستمرة.
انها نوع من جميلة.
انها ليست مصممة بشكل جيد لأنها ليست سهلة الاستعمال جدا.
أن القليل المنبثقة التي تأتي لا يعطي حقا لي أي معلومات
حول ما يحدث، وهذا لا تقول لي أي شيء كمستخدم
حول كيفية استرداد من هذا الخطأ.
نريد أن نفكر في الأشياء التي ليست التصميم.
أولا، انها ليست علم الجمال.
كما انها ليست حشو التطبيق الخاص بك مع طن من وظيفة لا لزوم لها.
إذا كنت من المطعم التايلاندي، وربما كنت لا تريد أن تكون طبيب أسنان في نفس الوقت.
ومع أسئلة الفيسبوك، لا أن يستخدم كثير من الناس أنه
وأنه لم يكن حقا في صميم ما كانوا بناء.
وذلك أنه من الجيد أن نفكر وليس ذلك بكثير على كمية من الأشياء
ان كنت وضع إلى التطبيق الخاص بك ولكن نوعية
وكيف نحقق ذلك تجربة المستخدم أفضل
من الواقع تحسين على ما لديك بالفعل.
>> باختصار، يقول لنا تصميم ما يجب أن بناء.
على سبيل المثال، إذا كنا نبني شيئا دعونا البحث الامور،
مثل غوغل، على سبيل المثال، يجب أن نفعل الأشياء بطريقة
التي تتطلب من المستخدم اتخاذ الكثير من النقرات للوصول إلى ما يريدون،
وينبغي لنا أن نفعل ذلك أو بطريقة ما، على سبيل المثال، مع بحث Google الفوري أو الإكمال التلقائي
أن يتيح لنا الحصول على نتائج أسرع لدينا؟
الهندسة ينطوي، مثل تومي سوف تظهر لك، وبناء الواقع.
هناك الكثير من أنواع التصميم.
على سبيل المثال، إذا كنت بناء شيء لنشر شيء
في بلد من العالم الثالث حيث لا يوجد الكثير من الكهرباء أو أن التكنولوجيا كثيرا،
لديك لتصميم ما كنت بناء
بطريقة تعطي بسهولة الوصول إلى الناس هناك.
ولكن ما قد أنواع القرارات التصميم الأخرى تكون هناك
قد تكون أو المشاركة في شيء من هذا القبيل؟
نعم. أرى اليد.
[رد الطالب غير مسموع] الحق >>. بالضبط. الوصول هو شيء واحد.
هناك الكثير من الناس لا يفكرون في "ماذا عن المستخدمين الخاصة بي؟"
مثل في اقصى إما الطيف.
لدي المستخدمين الذين لديهم إعاقات قد أنني لا أفكر
وأنا أفكر فقط حول تصميم لعامة للمستخدم.
شبكة الإنترنت يمكن الوصول إليها من قبل الجميع في الوقت الحاضر،
وينبغي أن أكون تصميم لهؤلاء الناس أيضا.
قد ما هي أنواع القرارات الأخرى التي تجعل التصميم؟
نعم. >> [طالب] التكلفة.
التكلفة. جيدة جدا.
شيء آخر ونحن قد تبني قرارات التصميم لدينا على من حيث التكلفة.
إذا نحن الأعمال التجارية، وكنت ترغب في بناء شيء لا تأخذ الكثير لتكلفة إنتاج
ولكن يمكن بيع بتكلفة عالية جدا أو يمكن أن تحصل لنا بعض الربح.
>> هذه كلها أنواع مختلفة من التصميم، ولكن عندما كنا نبني شيئا ما على الانترنت
أو عندما كنا نبني شيئا ربما لا يكلف كثيرا لبناء الآن،
مثل تطبيقات الإنترنت - لم يكن لديك لرمي رؤوس أموال كبيرة فيه
من أجل تقديم شيء أن يعمل فعلا -
ما نحن أكثر قلقا بشأن هو تجربة المستخدم.
نحن نسمي هذا التصميم المستخدم محورها.
أساسا ما ينطوي تصميم المستخدم محورها هو وضع أنفسكم في حذاء من المستخدمين.
اذا كان هناك من علامات عن ما أنا بناء،
انهم يأتون من الواضح أن طلبي خاصة مع الهدف في الاعتبار،
مع المهمة التي تريد إنجازها.
وعملك هو ليس فقط لمساعدتهم على إكمال هذه المهمة
ولكن لمساعدتهم على إكمال هذه المهمة بطريقة تتسم بالكفاءة وبديهية،
وكما قال شخص هناك، يمكن الوصول إليها.
ماذا يعني efficiency؟
Efficiency يعني مدى سرعة لا المستخدم الكامل الخاص بي في واجهة مهمة معينة بلدي.
يستغرق الكثير من النقرات بالنسبة لهم للحصول من مكان إلى آخر؟
هل هو مملة؟ لديهم لاداء الكثير من المهام المتكررة؟
نحن نريد أن نجعل هذه العملية فعالة قدر الإمكان
ولذلك لم يكن لديك للقيام بهذه الأنواع من الأشياء.
أما بالنسبة البداهة، وهذا هو، على سبيل المثال، إذا قام مستخدم بالبحث عن واجهة بلدي،
يكون من السهل بالنسبة لهم للحصول من مكان إلى آخر؟
يكون من السهل بالنسبة لهم لمعرفة ما لديهم للنقر في واجهة بلدي
من أجل دفعهم لتحقيق الهدف أو المهمة التي يريدون تحقيقه؟
>> وأخيرا، وكما قال شخص واحد هناك، وسهولة الوصول مهم جدا.
[المتكلم ذكر] وهو يأتي إلى الوصول لأشياء مثل الرؤية،
مثل كيف يمكنني تصميم الواقع شيئا لشخص أعمى؟
اه. بالنسبة للأشخاص الذين لا يستطيعون رؤية على الإطلاق، لدينا ما يسمى قارئات الشاشة.
ما يجب عليك فعله هو يجب بناء موقع الويب الخاص بك بطريقة
ذلك، على سبيل المثال، تكنولوجيات معينة ما نسميه -
هناك الكثير من الأشياء الآن.
أعتقد أن هناك قارئات الشاشة JAWS دعا.
وهناك الكثير من هذه الأمور تعتمد على ما نسميه قواعد منطقة
من أجل تلا للمستخدم ما هو موجود على الصفحة.
بالنسبة لأولئك الناس الذين لا يمكن أن نرى، كنت بحاجة للتأكد من أن هذه الشاشة القراء
يمكن اختيار فعليا حتى المحتوى على الصفحة ويمكن أن تظهر في الواقع المستخدمين،
إذا كنت لا تستطيع رؤية، على الأقل هل يمكن أن نفهم ما زال المحتوى على الصفحة.
نعم. حسنا.
الحديث عن التصميم الجيد بما فيه الكفاية. دعونا نتحدث عن تصميم سيئة.
هذه هي الأشياء التي يجب أن لا تفعل.
يمكن لأحد أن يقول لي عن تجاربهم مع كريغزلست
وما يعتقدون أنه ليست كبيرة جدا في هذا التصميم؟
نعم. >> [طالب] أعتقد أن هناك كلمات كثيرة جدا في منطقة واحدة.
كلمات كثيرة جدا، أليس كذلك؟ الساحقة تماما.
جئت إلى هذه الصفحة وكنت استقبال مع مجموعة كاملة من الامور هنا
قد لا يهم حتى أن لك.
على سبيل المثال، كنت تعيش في دولة واحدة أن لا يبدأ مع هذه الرسالة.
دعونا نقول كنت تعيش في ولاية تكساس أو شيء.
>> لديك للتمرير على طول الطريق إلى أسفل الصفحة للوصول إلى الموقع الذي هي في.
أنا من بوسطن، لذلك اسمحوا لي ننظر في ولاية ماساشوستس. أين ماساتشوستس؟
أوه، انها هنا. أوه، أنها بوسطن. حسنا.
دعونا ننظر في بوسطن. [ضحك]
الساحقة جدا، أليس كذلك؟
حرج الأمور هناك. [ضحك]
دعونا نقول أنا أبحث عن مكان للعيش فيه.
وقد استخدمت كم من الناس في الواقع كريغزلست؟ طن واحد منكم.
هناك طرق سيئة جدا للنظر في هذا، ولكن دعونا ننظر في هذا الأمر.
ما هو الفرق بين والموافقة المسبقة عن علم IMG؟ يمكن لأحد أن يقول لي؟
هناك في الواقع لا فرق.
إلا أنها تعني بالضبط نفس الشيء، ولكن لديهم تسميات مختلفة بالنسبة لهم لسبب ما.
إذا كنت اضغط على الصورة لديه، لا يحدث أي شيء على الصفحة.
أنا فعلا إلى انقر فوق بحث مرة أخرى عن شيء أن يحدث.
قد يكون هناك قرار ما أفضل تصميم ما يمكن عمله هناك؟
إذا أنا النقر على هذا المرشح، أريد ربما للتصفية حسب هذا الإجراء خاصة
أو أن فئة معينة.
وذلك بدلا من الاضطرار إلى البحث مرة أخرى اضغط على، أنا يمكن أن تفعل تلقائيا فقط تصفية
نوع من نمط جوجل حيث أنها تفعل ذلك على الفور.
[مالان] ولكن لا يشكل كما رأينا منهم حتى الآن أن تقدم جسديا
من خلال ضرب أدخل على الأقل أو النقر على زر؟
كما كنت قد رأيت منهم حتى الآن، لديك فعلا لانقر فوق إرسال للقيام بهذه الأشياء.
>> ولكن كما تومي سوف تظهر لك في الثانية، وهناك في الواقع طرق بالنسبة لك
بحيث عند النقر على هذا الشيء يمكن أن ترسل تلقائيا
ما نسميه طلب أجاكس والحصول على البيانات مرة أخرى وتصفية النتائج على الفور.
هناك طن من الأشياء التي هي خطأ في هذه الواجهة.
[مالان] يمكنك البحث عن كامبردج؟
هناك شيء شاذ قليلا هنا حيث كنت تهتم كامبريدج
وحتى الآن كنت الحصول على يستفورد، سبرينج هيل، نيوتن الغربية وما شابه ذلك.
ربما لا المثالي. ربما ليست مثالية >>.
كيف يمكن أن تكون قادرة على تقديم تجربة أفضل للمستخدم في هذه الصفحة بالذات؟
نعم. >> [طالب] تعليمات.
حسنا. تعليمات في أي نوع من معنى؟
[طالب] على سبيل المثال، شيء للمستخدمين أول مرة الذين لا يعرفون حتى ما هو كريغزلست
أو كنت لا تعرف ما كنت من المفترض القيام به.
الحق. موضحا ذلك ما كريغزلست هو في هذه الصفحة هو المهم.
يمكن أن نقول فعلا ما المستخدمين هذه الصفحة هو في الواقع ل.
إذا أنا مجرد زيارة هذا، أرى في مجمله مجموعة من المواقع. أنا لا أعرف حتى ما تعنيه.
ولكن الأهم من ذلك، مجرد النظر في هذه الواجهة،
تذكر كان علي أن انتقل لأسفل من نصف طن من الأشياء لإيجاد مجتمع معين
أنني اهتم فعلا عن حول هذا الموضوع.
ما هو أسرع طريقة أستطيع أن أفعل ذلك؟ نعم.
[طالب] تفرق بينهما يصل الى مناطق الشرق والغرب. حسنا >>.
يمكن تقسيمها إلى I أكثر الفئات التي يمكن أن تساعد في تحديد البيانات بشكل أسرع
كيفية الوصول الى ذلك الموقع بالذات.
[طالب] ضع القائمة المنسدلة. الحق >>. حسنا.
ويمكنني أن استخدام القائمة المنسدلة لأن لدينا مجموعة ثابتة من الأشياء
ويمكننا أن نظهر لهم في القائمة المنسدلة.
بهذه الطريقة لأنها لا تأخذ مساحة كبيرة جدا على الشاشة.
ولكن حتى أفضل من ذلك، ماذا يمكننا أن نفعل؟
نعم. هل >> [استجابة الطالب غير مسموع] >> تقول ذلك مرة أخرى؟ >> [طالب] مربع البحث.
نعم، مربع البحث. هذا أمر عظيم.
ما يمكننا القيام به في الواقع هو إذا نظرنا إلى الوراء في البحث مربع الشرائح.
الإكمال التلقائي. طريقة سهلة جدا للبحث من خلال النتائج التي كنت تعلم في مجموعة واحدة.
إذا أبدأ بكتابة BO، فقط تظهر لي كل النتائج التي داخل BO منهم.
بهذه الطريقة أستطيع بكل سهولة العثور على واحد بعينه أريد أن أذهب إلى
بدلا من الاضطرار للتنقل من خلال هذه القائمة كبيرة حقا.
>> هذه كلها أنواع من الفواكه منخفضة حقا أن الشخص الذي شنقا على تنفيذ كريغزلست
يمكن القيام به في الواقع لجعل تجربة على موقع أفضل بكثير للمستخدم الخاصة.
حسنا. الحديث ما يكفي عن المواقع السيئة.
دعونا نتحدث عن الفيسبوك.
عندما خرج الفيسبوك، والصور وخاصة الفيسبوك،
هناك الكثير من الخدمات الأخرى في الوقت الذي يمكن أن تفعله بالضبط نفس الأشياء.
يمكن أن تنظيم الصور في ألبومات.
ما يمكن أن تفعله هو انك يمكن تنظيمها في مجموعات أيضا.
هل يمكن تنظيمها حسب التاريخ. هل يمكن أن تفعل كل هذه الأشياء معينة.
ولكن لا أحد يعرف ما جعل الفيسبوك صور تنفجر في الوقت الذي تم الإفراج عنه؟
نعم. >> [طالب] الكلمات. الكلمات >>. بالضبط.
لدينا أكثر من هنا ميلو، الذي هو التميمة التي لدينا كلب مع باندانا CS50.
يمكنك أن ترى أن لدينا هذه الميزة العلامات في الوسط.
وجعل ما صور مثيرة للاهتمام حتى الفيسبوك من وجهة نظر الاستخدام
هو أنه يسمح الناس فعلا من خلال هذا إشراك أصدقائهم في صورهم.
لالفيسبوك، منذ موقعه على الانترنت هو وخاصة الاجتماعية،
ولكن عن بناء هذا النوع من الجو الاجتماعي.
تحسن أن تجربة الكثير من الصور
لأنها يمكن أن تبدأ فعلا قائلا: "هذه هي الروابط بين الناس،
وهذه هي صور عن الأشخاص الذين تهتم فعلا شيء. "
جزء منها هو أيضا نوع النرجسية.
الناس يحبون أن يتم وضع علامة في صور واشياء من هذا القبيل.
بينما هذا ليس بالضرورة سمة جيدة الإنسان،
في الوقت نفسه أنها تقوم على قرارات التصميم الجيد
لأن الناس يهتمون فعلا عن أشياء من هذا القبيل.
ذلك أن صور الفيسبوك.
>> ولكن دعونا نتحدث الفيسبوك بشكل عام.
أنا متأكد الكثير من الناس هنا لديهم آراء حول الفيسبوك،
كل قرارات التصميم الجيد والتصميم السيئ القرارات.
لذلك دعونا تنفيس أو تكون سعيدا.
هيا. أنا أعرف كل واحد منكم استخدام الفيسبوك.
شخص لا بد أن يكون شيئا سيئا أن أقول شيئا جيدا أو ليقوله عن ذلك. نعم.
[طالب] في أخبار الأعلاف هناك الكثير من الأشياء لا يهمني حقا.
في خدمة الأخبار لا تظهر الكثير من الأشياء التي قد لا يهمك.
لديك أصدقاء في الفيسبوك الذين لم تقابله لمدة 2 أو 3 سنوات
وترى نتائج أخبارهم ظهرت في تغذية الأخبار الخاصة بك
وكنت لا تهتم حقا عن ذلك.
جعلت الفيسبوك الواقع محاولة لجعل هذا أفضل،
ولقد حاولوا فعلا لدفع النتائج ذات الصلة إلى أعلى في خدمة الأخبار في الآونة الأخيرة
لذلك أنت ترى في الواقع من قبل الأصدقاء الأشياء التي لها صلة بك أو أصدقائك المقربين.
أي شيء آخر؟ نعم.
يمكن [استجابة الطالب غير مسموع] >> تقول ذلك مرة أخرى؟
[طالب] وغير مزعجة نسبيا الإعلانات. >> بأي معنى؟
[رد الطالب غير مسموع] ليس لديهم الضوء على الشاشة، مثل لافتات.
حسنا. هذا امر جيد.
إذا كنت تتذكر الإنترنت من '90 - >> [مالان] كنت هناك. كان >> وهناك. [ضحك]
قد تتذكر امض متحركة خلفيات، سباركلي الأشياء،
توقعات المدن العالمية فرز نمط من الأشياء.
هذا حقا لا مثال على التصميم الجيد
لانها حقا من تشتيت المحتوى.
موقع الفن ييل كانت لدينا GIF المتحركة وخلفيتهم
وأنت لا تستطيع قراءة أي شيء على الصفحة،
ولكن اعتقد شخص ما تحدث في الواقع لهم والآن انها مختلفة بعض الشيء.
[مالان] انها أفضل بكثير الآن. انها >> أفضل بكثير الآن، كما ترون. >> [مالان] أوه نعم.
مجرد كبيرة، تماما - نعم. حسنا.
>> جزء منها هو جعل صفحتك أيضا ربما الحد الأدنى للغاية ومفهومة جدا
من الأشياء على تدفق الصفحة بطريقة منطقية جدا ولا تحصل في الطريق من بعضها البعض.
ما أنواع من الأشياء الأخرى هي جيدة أو سيئة عن الفيسبوك عن الفيسبوك؟
دعونا يكون مجرد محادثة تصميم هنا.
اه. أين؟ نعم.
[طالب] نظام زمني جديد يسمح لك للبحث الملف الشخص عن ماضيهم.
أوه، الجدول الزمني.
الجدول الزمني هو شيء عظيم لأنه يتيح لك ساق أصدقائك
الى الوراء عندما كانت في المدرسة الثانوية.
الجدول الزمني هو جيد لأنه يتيح لك تصفية المحتوى من خلال الكثير أسرع،
فإنه يتيح لك العثور على الأشياء التي من شأنها أن خلاف ذلك اتخذت لك وقتا طويلا للعثور على الحقيقة
التمرير فقط صعودا وهبوطا، حتى يصل، حتى يصل، حتى، مثل العودة إلى الوراء في الوقت المناسب.
ولكن بعد ذلك هناك أيضا نوع من الجانب السلبي لذلك من حيث تجربة المستخدم.
قد ما قد يكون ذلك؟
كلمة كبيرة أن يبدأ P-R. >> [طالب] الخصوصية. >> الخصوصية، أليس كذلك؟
الخصوصية هي تجربة ضخمة للمستخدم القضية.
هذا هو واحد من الأشياء أنا أكره أكثر عن الفيسبوك الآن. [ضحك]
[مالان] مثلي الآن.
لم أكن أدرك ديفيد هذا حدث فعلا حتى يوم أمس.
حتى الآن لأنه يعلم أنه في كل مرة كنت أعرف الدردشة له انه تم تجاهل لي.
[مالان] الجزء حرج وكنت في الواقع تجاهل له،
ولم أكن أعرف انه يعرف كنت تجاهل له. [ضحك]
الخصوصية هي قضية ضخمة.
يمكن لأي شخص أن يقول لي هنا ما قد يكون سيئا عن الخصوصية الفيسبوك
بالإضافة إلى حقيقة أنها تفعل أشياء من هذا القبيل؟
ما يكون من الصعب بشكل خاص للقيام فيما يتعلق بالخصوصية الفيسبوك؟
هذا النوع من هو السؤال الرئيسي.
نعم. >> [طالب] إخفاء الصور من بعض الناس.
الحق. بالضبط، لإخفاء الصور من بعض الناس.
لديهم هذا صغيرة، زر قليلا في الجزء العلوي الأيمن التي تمكنك من تبديل خصوصية صورة.
وتتنوع خيارات خصوصياتهم جدا بين أنواع مختلفة من القوائم.
>> أنها قد حصلت على الكثير أفضل حول هذا الموضوع في الآونة الأخيرة، ولكن كان عليه أن يكون الأمر كذلك
أنه كلما أردت منع أصدقائك من الصور رؤية،
سيكون لديك للذهاب من خلال عملية خطوة 5-معقدة جدا من يجري مثل،
اسمحوا لي أن فوق هذا الارتباط، والآن اسمحوا لي مرة أخرى فوق، ثم اضغط ثانية اسمحوا لي،
اسمحوا لي أن تحديد الأشخاص الذين لا يستطيعون رؤية صوري.
ليست جيدة ولا سيما من جانب الفيسبوك لل
لأن الكثير عن تجربة المستخدم يعطي فعليا لهم حرية
للسيطرة على ما يمكن للناس أن نرى.
نحن نسمي هذا تحكم العضو والحرية.
إذا كنت عدم السماح للمستخدمين القيام بذلك بطريقة تتسم بالكفاءة وبديهية،
ثم تجربة المستخدم وليس حقا أن كبير على الإطلاق.
وكنت أود أن أقول الرجال أي شيء عن الفيسبوك؟
كيف يمكنني إيقاف هذه الميزة؟
[اونج] لا يمكنك إيقاف هذه الميزة، وهذا هو عيب كبير على سهولة الاستخدام من جانب الفيسبوك.
هذه الميزة - نظرت فعلا في ذلك اليوم -
انها إما أنه لا يمكنك أن تفعل ذلك أو انها دفنت في مكان ما جدا، عميقة جدا
في أعماق الفيسبوك لأن لا أستطيع معرفة كيفية تعطيل هذه الوظيفة على الإطلاق.
[مالان] لكن في بعض الأحيان هذه القرارات ليست واضحة
لأن قدمتموه لنا رفاق الكثير من ردود الفعل على تطبيقات مفيدة CS50 مختلف
والمواقع التي تستخدم أثناء.
نحن لم تنفذ كل هذه الطلبات والاقتراحات.
>> جزء من ذلك هو الحصول على طلبات كثيرة لذلك أنه من وظيفة من الزمن،
لكن في بعض الأحيان نجعل فقط قرارا واعيا مثل،
"شكرا لكم على هذا الاقتراح، ولكن نختلف نحن."
لذلك كيف يمكنك أن تقرر في الواقع ما يجب عليك القيام به إذا كان المستخدمون تعتقد أنك يجب أن تفعل شيئا
حتى لو كنت لا بالضرورة؟
انها توازن دقيق بين الاستماع إلى ما في الواقع يقول المستخدمون
والحقيقة إمتلاك نوع من السطر حيث تقول،
وقال "نحن لن نفعل ما نقول هؤلاء المستخدمين."
وعلى وجه الخصوص، وأعتقد أن هناك اقتبس من قبل هنري فورد أن يلخص هذا الأمر بشكل جيد.
واضاف "اذا كنت قد طلبت من الناس ما يريدون، فإنهم قد قالوا انهم يريدون أسرع الخيول."
يمكن لأي شخص باستثناء نوع من ندف ما يعني أن أقتبس حقا؟
انها ليست مجرد أن المستخدمين يعرفون ما يريدون،
ولكن من أكثر من -
[طالب] إنهم لا يعرفون ما هو ممكن.
في جزء أنهم لا يعرفون ما هو ممكن.
ندف انه بصرف النظر أكثر قليلا. ماذا يعني ذلك؟
[رد الطالب غير مسموع]
هذا امر جيد. ما أعتقد أننا نحاول قوله هنا هو أن الناس يعرفون ما يريدون.
انهم يريدون أسرع الخيول.
ما يريدونه حقا هو القدرة على التحرك على نحو أسرع،
لكنهم لا يعرفون حقا وسيلة يمكن من خلالها تحقيق ذلك.
عندما تأتي للمستخدمين والمستخدمين أقول لك شيئا
ويقولون لك: "نريد هذه الميزات وميزات هذه وهذه الميزات"
كنت لا ترغب في التفكير بالضرورة عن، "اسمحوا لي أن المضي قدما
"وتنفيذ ما يقولون صراحة"
ولكن ماذا تريد أن نفكر في "أي نوع من الأفكار يمكن أن تحصل عليها من ذلك؟"
ماذا يريدون في الواقع؟
>> ومن هناك ما يمكنك القيام به هو تصميم شيء يرضي تلك الطلبات
ولكن ليس بالضرورة في الطريقة أن المستخدم يتوقع أن يكون راضيا به.
ذلك لشيء من هذا القبيل المشاريع النهائية، من حيث القيمة الحقيقية جدا،
ما هو ارشادي مفيدة عندما يتعلق الأمر باتخاذ شيء أفضل،
وخاصة إذا كان لديه هذا المصمم الغطرسة عنه
حيث كنت نوع من معرفة ما هو أفضل، قد تأخذ مدخلات من المستخدمين،
ولكن كيف يمكنك أن تذهب في الواقع أن ردود الفعل حول الحصول على؟
في المشاريع النهائية، بشكل ملموس جدا، ما ينتج أفضل النتائج هنا؟
ما ينتج أفضل النتائج - وأنا سوف يذهب أكثر من هذا في الثانية -
هذا هو عملية تطوير واختبار ثم ثم بالتكرار.
ما أعنيه هو الاختبار عادة عند تصميم شيء
كنت أعتقد أنها جيدة إلى حد ما، مثل، "أنا مثل مصمم كبير. الجميع سوف الحب هذه."
ومن ثم وضعه هناك والناس لا حقا مثل ذلك لسبب ما.
ما عليك القيام به هو أن يكون لديك لاتخاذ أجزاء من الأشياء التي نحب الناس
وتجديد الأشياء التي الناس لا يحبون.
هذا يبدو وكأنه عملية واضحة جدا، ولكن هذه العملية باستمرار من بالتكرار
على رأس ما كنت قد بنيت بالفعل هي العملية التي تساعدك
ليس فقط صقل المهارات الخاصة بك تصميم ولكن أيضا يساعد في إدخال التحسينات على التصميم
حتى أن الناس فعلا نقدر المنتج الخاص بك حتى أكثر مما كانت عليه من قبل.
>> سأذهب على أمثلة ملموسة أكثر من ما يمكن أن تفعل في الواقع.
كما نوع من المثال الأخير للمنتج، دعونا ننظر في KAYAK.
كان KAYAK عندما خرج للغاية، بشعبية كبيرة.
يمكن لأي شخص أن يخمن ماذا؟
ما هي أنواع الأشياء التي أحب حول هذا إذا كنت قد استخدمت من
أو ما هي أنواع الأشياء التي لا تحب؟
نعم. >> [استجابة الطالب غير مسموع] >> حسنا.
هذا جزء من ذلك هو السماح للمستخدم لديك استفسار ما هو أكثر توسعا
من واحد مقيدة للغاية مثل، "لديك لاختيار تاريخ البدء
"وكان لديك لاختيار تاريخ الانتهاء".
في الواقع، فإنه يتيح لك أن تكون مرنة حيال ذلك، وأنها تعطيك كل الرحلات الجوية في هذا النطاق.
أي شيء آخر؟
[طالب] وتشمل هذه الرسوم في السعر.
يفعلون تشمل الرسوم في السعر.
الضرائب وتسير الأمور في الواقع مباشرة الى هذا السعر في الجانب الأيسر العلوي
لذلك نحن لا خداع كنت أفكر في أن كنت تدفع في الواقع لرحلة 240 $
عندما يكون حقا 330 دولارا.
أي شيء آخر؟ نعم.
[رد الطالب غير مسموع]
أنا لست متأكدا مما إذا كان فعلا سمحوا لك بذلك.
قد أكون مخطئا.
قد يكون هذا الشيء المثير للاهتمام إذا كنت تريد أن تضع وزنا أكبر على مرشحات خاصة
بحيث تدفع النتائج المتعلقة عامل التصفية إلى الأعلى.
ولكن يمكن لأحد أن يقول لي ما هو خاص جدا حول هذا الجانب الأيسر؟
كيف تنظرون تقليديا حتى رحلة على خدمة الإنترنت قبل ذلك؟
>> نعم. هل >> [استجابة الطالب غير مسموع] >> أنت تقول أن -
[طالب] كل شركات الطيران. نعم >>. كل شركة طيران لديها موقع الويب الخاص بها.
هذا يعزز الأشياء. و؟
[طالب] أنت تعرف بالضبط ما كنت وقت الرحيل.
كنت أعرف بالضبط ما كنت تاركا الوقت،
ولكن فيما يتعلق المرشحات بشكل خاص.
اسمحوا لي سحب ما يصل KAYAK.
يا الله، والنوافذ المنبثقة. سيئة تجربة المستخدم.
ماذا يحدث عندما نقل هذا المنزلق؟
[طالب] التحديثات التلقائية. >> [اونج] التحديثات التلقائية.
وهذا شيء مهم جدا.
قبل هذا، كلما أردت للبحث عن رحلة جوية،
لأنك قد وضع في مكان الإدخال، الإخراج موقعك، اضغط على البحث،
فإنه معالجة ذلك وتظهر النتائج الخاصة بك.
إذا كنت تريد تغيير الاستعلام الخاص بك، سيكون لديك للضغط على العودة مرتين،
أدخل في استعلام جديد من نقطة الصفر، وثم القيام بذلك مرارا وتكرارا.
والشيء الجميل في هذا هو شيء من هذا القبيل فإنه يستخدم جدا شيء (غير مفهوم) في الوسط.
كلما كنت تفعل شيئا مثل هذا، فإنه يطلق النار قبالة طلب
ويرجع لك كل النتائج على الفور.
هذا النوع من ردود الفعل المباشر هو ما جعل KAYAK بشعبية كبيرة
لأنه من السهل حقا بالنسبة لي أن مجرد تغيير الاستعلام بلدي
ومعرفة الأشياء التي هي حول نطاق معين
دون الحاجة إلى الذهاب ذهابا وإيابا، ذهابا وإيابا، ذهابا وإيابا.
لذلك فان هذه هي كل أنواع الأشياء التي ترغب في التفكير في عندما كنت تصميم موقع الويب الخاص بك.
كيف يمكنني جعله فعالة جدا للمستخدمين من خلال الذهاب الى بلدي كل ما نعمل على
وللوصول الى الهدف في نهاية المطاف في أسرع وقت ممكن؟
[مالان] والإشارة يوسف في وقت سابق عن عدم معرفة المستخدمين بالضرورة ما يريدون،
بناء على ما نعلم الآن يا رفاق حول HTML
وكان لديك خانات، وأزرار الراديو، والقوائم حدد حقول الإدخال وما شابه ذلك،
كيف يمكنك تنفيذ فكرة اختيار وقت البدء لرحلة؟
>> التي من شأنها أن هذه الآليات المختلفة التي تستخدم UI؟
إذا كنت تعرف فقط من كمية HTML التي كان يدرس قبل
وتعرف المدخلات هي أزرار الراديو، مربعات، وانخفاض هبوطا، ومربع الإدخال،
فماذا كانت اختيارك لاختيار التواريخ الطبيعية؟
[طالب] الإدخال. الإدخال >>. أو ربما حتى منسدلة مع كل من التواريخ، أليس كذلك؟
حتى مع آليات UI أكثر تعقيدا مثل هذا على الجانب الأيسر التي يمكنك تنفيذها،
يمكنك جعل هذه العملية أكثر سهولة مع شريط التمرير
لأن الوقت هو مستمر، والناس عادة لا التفكير في الأمر من حيث قطع منفصلة.
حسنا. آخر ما.
قابليتها للاستخدام الاستدلال عشر.
كل الأشياء تحدثنا عن سقوط ربما تحت واحدة من هذه الفئات.
إذا ذهبت إلى هذا الرابط، والتي سيتم نشرها على مواقع الإنترنت،
عليك أن تكون فعلا قادرة على، وتقوم بتصميم موقعك، والحفاظ على هذه الاستدلال في الاعتبار
وهذه القواعد من الإبهام.
لمشاريعك، ما أقترح عليك القيام به من أجل تصميم التطبيق بشكل أفضل
هو أن تفعل النماذج الورقة الأولى.
عندما كنت تفكر في التطبيق الخاص بك، بسرعة كبيرة رسم ما تريد ان تبدو وكأنها
وتأكد من ترتيب كافة خانات بطريقة بديهية جدا للمستخدم لاستخدام
وحتى تظهر هذه النماذج الورقية إلى أصدقائك وبدء مجموعات التركيز.
مجرد الحصول على 2 أو 3 أشخاص معا، ونطلب منهم للاستفادة من هذه النماذج فقط على الورق،
وتبين لهم شاشات جديدة لمعرفة ما اذا كانوا فعلا فهم ما يجري.
>> ما تريد القيام به هو منحهم مهمة، وتحفيز تلك المهمة،
ومجرد منحهم التطبيق والسماح لهم استخدامها.
لا نعطيهم تعليمات أبعد من ذلك.
كنت ترغب في السماح لهم فعلا التفاعل مع التطبيق الخاص بك بطريقة تمكنك من معرفة
كيف يستخدم فيه إذا لم يقف بجانبها.
وهذا أمر مهم جدا.
والتي تعطيك الكثير من الأفكار من أجل الحصول على الناس في جميع أنحاء أشياء معينة
بطريقة لم أكن أنوي لهم؟
هم باستخدام آليات UI بشكل خاص على الشاشة
بطريقة هو نوع من hacky؟
لم أكن أنوي القيام به بالنسبة لهم على هذا النحو.
وبمجرد الانتهاء من ذلك مع ذلك، ماذا تريد أن تفعل؟
الصخور التصميم الخاص بك، أليس كذلك؟
ما تريد القيام به هو كنت ترغب في تطوير وثم القيام بتلك العملية من جديد.
حتى تبين أنها لأصدقائك مرة واحدة كنت قد وضعت ذلك، اختبار،
تطوير واختبار وتطوير واختبار، تكرار، على وعلى وإلى الأمام.
التصميم هو عملية تكرارية جدا في هذا المعنى.
لديك فعلا لبناء شيء ومن ثم تحقيق الأمور حول هذا الموضوع
أن كنت لا تدرك قبل والعودة وتحسين من ذلك.
الآن، أما بالنسبة للجزء التنمية، وهذا ما تومي سوف تظهر لك في الشوط الثاني
وكيف يمكن أن تكون قادرة على تنفيذ شيء من هذا القبيل الإكمال التلقائي
بطريقة بسيطة إلى حد ما.
[مالان] كما تومي يضع هنا، سؤال الحين.
وقال جوزيف وعندما 1990s الموقع الاسلوب، - وهناك الكثير من المواقع في أقرب وقت
حيث كان من تطبيقات إذا أردت تحديد وقت البدء ووقت الانتهاء،
بصراحة، مرة في اليوم، وحتى على بعض المواقع اليوم،
الطريقة التي لديك هذا اخترت ساعة من أسفل الإفلات،
اخترت دقائق من القائمة المنسدلة، وربما اخترت AM، PM،
ومن ثم يمكنك أن تفعل ذلك أكثر من 3 مرات.
وهكذا مع 6 النقرات وربما بعض التمرير
يمكن للمستخدم الخاص بك في الواقع تقديم نوع من التاريخ و / أو نطاق الوقت في هذا المعنى.
>> ذلك بالتأكيد دون المستوى الأمثل وحتى الآن حتى الآن رأيناه لا قدرات التعبيرية
في أي من لغات بحثنا في شيء أن تفعل أكثر جنسية
مثل هذا المنزلق من وقت البدء ووقت الانتهاء.
ولكن إذا كنت تعتقد مرة أخرى إلى الأسبوع 0 عندما تحدثنا عن سكراتش،
هناك أيضا لم تكن هناك الحاجيات التي فعلت بعض الأمور.
كنت حقا للتو مثل هذه الأسس والشروط الحلقات وما شابه ذلك.
ذلك النوع من التفكير المجرد فقط للغاية الآن، بغض النظر عن التفاصيل من HTML،
ما يحدث في الواقع شيئا من هذا القبيل مع بداية ونهاية الوقت شريط تمرير الوقت؟
عندما تحرك الماوس بلدي وأنا انقر على هذا الرمز الجزر قليلا على اليسار
وتبدأ السحب، برمجيا، ما هو كنت تريد أن تكون قادرة على تنفيذ
لتحقيق ذلك؟
ما هي الأسئلة، ما التعبيرات المنطقية تريد أن تكون قادرة على تسأل؟
ما يحدث في الواقع؟ سامي؟
[طالب] أين هو موقف المؤشر؟ جيد >>. حيث هو موقف المؤشر؟
وكان هذا شيئا كنا بحاجة للتعبير عن العودة في سكراتش،
إذا كان يقوم على الموقع أو حتى لون أو ما شابه ذلك.
أذكر من أي وقت مضى كنت قد لفترة وجيزة حتى يوم الاثنين كانت هناك كل هذه الأمور تسمى الأحداث
في عالم الانترنت، ولذا فإن هناك أشياء مثل عند _ النقر وonkeypress
وonkeyup وonmouseover وonmouseout.
ندرك ذلك أنه حتى هذه الأمور كنا مع من المسلمات على الويب
مع مواقع مثل الفيسبوك وجوجل، حتى لو كان لديك أي فكرة
كيف يمكنك أن تنفذ ربما لأنه لا يوجد شيء مثل ذلك حتى في محاضرة
أو تعيين مشكلة 7، ندرك أن هذه الأسس مع نفسه بالضبط،
مع HTTP والمعلمات والحصول على وظيفة،
مع المدخلات الأساسية HTML أننا قد بدا حتى الآن في
وفي لحظة مع آليات البرنامجية التي تومي أن أعرض عن
يمكنك البدء في التعبير عن نفسك مثلما فعلت في الأسبوع 0
بواسطة حدسي جدا سحب وإسقاط.
>> حتى مع أن قال، تومي MacWilliam وبعض قطع اللغز جديدة بالنسبة لنا لويب.
حسنا. اسمي تومي وانا ذاهب الى أن نتحدث عن سكريبت.
مجرد تنويه: أنا من رأي أن جافا سكريبت هي لغة برمجة أفضل
في العالم كله كله.
هناك الكثير من الناس الذين يختلفون معي، ولكن هذا فقط مدهشة.
بمجرد العودة إلى C، إذا كان لديك لكتابة C لفئة أخرى أو بعض اللغات الأخرى،
انها مجرد محبطة حقا في جميع التفاصيل ذات المستوى المنخفض وعليك أن يتورطوا فيها.
إذا كان الأمر كذلك كنت تشعر بالحزن من أي وقت مضى حول كيفية مزعج C هو الكتابة،
انتقل لتوه، وكتابة بعض سكريبت. انها السعادة القصوى.
سوف تشعر أنك أفضل بكثير عن يومك سيئا.
وهناك الكثير من سحر سكريبت يأتي من قدرتها على التلاعب الأشياء
التي هي بالفعل على الصفحة.
وعندما كتبنا البرامج النصية لدينا PHP، أعدموا على الملقم،
في نهاية المطاف أن وPHP النصي الإخراج ربما بعض HTML.
وأن HTML إرسالها إلى العميل، وبعد ذلك كان عليه.
إذا أردت أن PHP إضافة زر إلى صفحة، على سبيل المثال، فإنه لا يمكن حقا أن.
فإنه سيتعين عليها أن تقدم ملف HTML كلها جديدة وإرسال ذلك إلى المتصفح.
مع جافا سكريبت نعرف أننا يمكن تحديث الامور في حين انهم بالفعل على الصفحة،
وبسبب هذا يمكننا تقديم التغذية الراجعة الفورية أكثر من ذلك بكثير،
والتي سوف حقا تحسين تجربة المستخدم على موقعنا.
مجرد خلاصة سريعة من محددات سكريبت.
ونحن نعلم أننا عندما تحميل صفحة HTML،
أن يحدث أن تكون ممثلة في DOM.
>> وDOM هو فقط تذكر هذه الشجرة الكبيرة حيث ترتبط عناصر في هذا التسلسل الهرمي كبيرة.
عندما عملنا مع قواعد البيانات في pset 7،
كان واحدا من أول الأشياء التي كنا بحاجة لمعرفة كيفية القيام الاستعلام عن قاعدة البيانات.
لدينا هذا الجدول مستخدمين كبيرة، وأحيانا كنا نريد فقط أن أقول،
"أريد فقط بعض من هؤلاء المستخدمين التي تتطابق مع بعض شرط".
وبالمثل، عندما يكون لدينا نحن DOM بحاجة إلى طريقة الاستعلام من ذلك.
نحن بحاجة إلى طريقة للقول: "أريد كل من الأزرار التي تبدو مثل هذا
"أو كل من الصور على الصفحة."
وهذه محددات تسمح لنا للقيام بذلك.
حتى مجرد خلاصة سريعة.
هذا أول واحد هنا، وهذا تقدم #، ما هو أن الذهاب لاختيار؟ لا أحد يتذكر؟
[رد الطالب غير مسموع] >> نعم، بالضبط.
هذا هو الذهاب لتحديد عنصر في الصفحة التي تحتوي على ID من تقدم.
وعلامة التجزئة بحيث يقول هذا محدد هو الذهاب إلى العمل مع معرفات.
ماذا عن ثانية واحدة، وهذا. محورها، ما أن اختار؟
نعم. >> [طالب] فئة. بالضبط >>. هذا يجري الآن لتحديد حسب الطبقة.
الفرق بين الهوية والطبقة هنا هو عادة ID يجب أن تكون فريدة من نوعها
أيا كان داخل المساحة التي تبحث من جديد.
وإذا كان الأمر كذلك كنت تبحث عن أكثر من صفحة ويب بأكملها،
يجب أن يكون حقا سوى 1 عنصر مع أن بعض ID، لذلك في هذه الحالة من الحلقة.
مع الطبقات، من ناحية أخرى، يمكن أن لدينا أكثر من 1 عنصر في نفس الصفحة
مع نفس الفئة.
هذا يمكن أن يكون مفيدا لقوله أريد أن تحديد كل شيء هذا ما تركز على الصفحة
بدلا من مجرد شيء 1.
>> وأخيرا، وهذا هو آخر هنا قليلا أكثر تعقيدا،
ولكن ما هو هذا يحدث لتحديد من DOM؟
[رد الطالب غير مسموع] >> ما هذا؟
[طالب] أي شيء وهذا هو العلامة. لدينا 2 >> أجزاء هنا.
الجزء الثاني هو الذهاب الى القول سأقوم بتحديد هذه العلامات مع علامة من المدخلات،
ذلك أن أي عنصر هو علامة الإدخال.
لكنني لا أريد أن مجرد اختيار كل من المدخلات
لأنه شيء من هذا القبيل على زر إرسال تكون مدخلا
وشيء من هذا القبيل يمكن مربع نص يكون الإدخال.
حتى مع هذه الأقواس المعقوفة أقوله أريد فقط لتحديد تلك العناصر
التي هي من نوع النص.
في مكان ما في بلادي علامة HTML لدي سمة تسمى النوع،
وقيمة هذه السمة يجب أن يكون النص.
فكيف هذا الجزء الأول هنا؟
الكلمة الأولى من هذا النموذج هو محدد ثم لدي الفضاء ومن ثم إدخال هذا الجزء.
ماذا تفعل ذلك، ووضع النموذج أمامه؟
هذا هو الذهاب الى الحد أساسا الاستعلام لدينا.
يمكن أن يكون عليه الحال أن لدينا بعض المدخلات على الصفحة
التي ليست من نسل نموذج.
ما سوف تفعله هو هذا سوف يقول هذا أريد فقط العلامات المدخلات التي لديها مكان ما فوقها
بعض العنصر الأصل من نموذج.
وهكذا وبهذه الطريقة يمكننا أن نجعل هذه الاستعلامات الهرمية أكثر
لذلك ليس لدينا فقط لتحديد كل شيء مطابقة محدد معين.
يمكننا نوع من الحد من نطاق هذا الاستعلام إلى شيء آخر.
الآن حتى يتسنى لنا معرفة كيفية تحديد العناصر في الصفحة،
دعونا نتحدث قليلا عن AJAX.
AJAX هو اختصار تزال العصرية جدا التي تقف على سكريبت غير المتزامنة وXML.
انها مجرد أن ذلك يحدث هو مجرد بعض XML طريقة لتمثيل البيانات.
>> هذا النوع من شعبيته المفقودة مؤخرا، لذلك لم يتم استخدام AJAX X في كل وقت.
أساسا، ما يسمح لنا AJAX القيام به هو تقديم طلبات HTTP
من سياق سكريبت.
عندما نكون في متصفح الويب لدينا ونحن تبحر حول صفحات ونحن فوق ارتباط،
ما المتصفح لدينا هو الذهاب الى القيام به هو إجراء طلب HTTP إلى ما فوق الرابط نحن.
ولكن هذا ليس دائما مثالية لأنه إذا كان هذا هو الحال، ثم وكان داود قائلا:
لدينا دائما لجعل المستخدمين فوق الزر إرسال أو فوق ارتباط
من أجل جعل أي شيء يحدث أن يجري إشراك طلب HTTP.
حتى مع AJAX يمكننا أن نجعل هذه الطلبات باسم سكريبت.
وهذا يعني كلما يتفاعل المستخدم مع الصفحة أو حدث أي شيء،
يمكننا أن نجعل الواقع طلب المبرمج إلى بعض الملفات الأخرى PHP على موقعنا
أو أي شيء آخر واسترداد البيانات التي يبصق هذا الملف.
دعونا نلقي نظرة على مثال AJAX.
هذا هو صفحتنا المالية CS50 التي نأمل البعض منا على دراية.
إذا نظرنا إلى هذه الصفحة من HTML، ونحن نرى هنا ان كنت أضيف بعض الأشياء،
واحدة من التي كنت أعطيت هذا النموذج معرف.
قلت ID = "النموذج اقتباس".
لقد فعلت هذا لمجرد انه سيكون لجعل هذا أسهل قليلا قليلا لتحديد من DOM
منذ يمكنني فقط استعلام بسيط جدا.
ما أريد أن أفعله هنا هو أريد لإصلاح بعض المشاكل مع CS50 المالية.
إذا كان الأمر كذلك نذهب إلى finance.cs50.net،
في كل مرة كنت ترغب في الحصول على الاقتباس، لا بد لي من فوق هذا الزر اقتباس الحصول عليها،
والتي تحصل على زر اقتباس ثم يأخذ لي لآخر صفحة كاملة.
وإذا كنت أريد اقتباس آخر، لا بد لي من الضغط على زر العودة وبعد ذلك اكتب في،
يمكنني الحصول على الاقتباس، وأنا اضغط على زر العودة.
هذه في الحقيقة ليست أفضل تجربة للمستخدم.
والذين يستخدمون الموقع حقا ما اذا كان ذلك بطيئا للحصول على أسعار الأسهم؟
وذلك ما نريد القيام به هو إزالة AJAX مع هذه الخطوة من الذهاب إلى صفحة منفصلة
من أجل عرض النتائج.
>> ما نقوم حقا يسأل فقط لهو أن سعر صغيرة حقا،
وهذا مجرد كمية صغيرة حقا من البيانات.
لذلك ليس هناك حاجة بالنسبة لي للذهاب آخر صفحة كاملة HTML،
تحميل مجموعة كاملة جديدة من HTML، تحميل الصور ربما بعض أكثر من ذلك،
بعض الملفات الأخرى CSS فقط بالنسبة لي أن الإجابة على هذا السؤال بسيطة جدا
كم تكلفة هذا المخزون.
مع AJAX يمكننا أن نجعل هذه السلعة أسهل.
نرى هنا أن أسفل أنا ربط في ملف جافا سكريبت دعا quote.js.
دعونا فتح فعليا حتى ذلك الملف. ليس هناك.
جميع ملفات JavaScript بلدي سوف يكون موجودا في HTML
بحيث يمكن للمتصفح ويب الوصول إليه.
ثم لدينا دليل منفصل هنا لجافا سكريبت،
والآن هو هنا quote.js.
في الجزء العلوي من هذا الملف هذا يقول هنا أريد أن انتظر صفحة كاملة ليتم تحميلها
قبل أن تحاول أن تفعل أي شيء. لماذا هو أن من الضروري؟
اتضح أن الشيء التالي انا ذاهب الى القيام به هنا هو البدء في البحث عن عنصر
يطابق بعض محدد.
إذا تم تنفيذ أي وقت مضى هذا سكريبت قبل تحميل هذا العنصر في الصفحة،
ثم كل شيء وأنا أحاول القيام به هو الذهاب إلى العمل لا
لأنني ذاهب الى محاولة لتحديد شيء غير موجود هناك حتى الآن.
حتى هذا الخط يصل الأعلى يقول أريد منك الانتظار حتى يتم تحميل كل شيء
لذلك كنت يضمن لنا أن أي عناصر أنا أبحث عن هي في الواقع على الصفحة.
هذه علامة الدولار يعني هنا أنا باستخدام مكتبة تسمى مسج.
هذه المكتبة مسج يتيح لنا استخدام هذه محددات أن ننظر فقط في.
بالقول $ ثم تمرير كوسيطة في هذا النموذج # اقتباس،
أنا الآن اختيار هذا النموذج الذي اتخذناه مجرد نظرة على.
الآن لدي تمثيل هذا النموذج في الذاكرة على نحو ما.
>> على هذا الكائن الآن، وهذا تمثيل النموذج،
الآن أنا باستخدام وظيفة دعا.
ما يفعله هو وظيفة هذا انه سيكون لإرفاق معالج حدث.
الحدث الذي نحن ذاهبون للاستماع لهو الحدث يقدم.
لذلك عندما يقوم المستخدم بالنقر فوق الزر إرسال أو أن يضغط أدخل،
هذا الحدث هو الذهاب الى اطلاق النار.
عن طريق تركيب في هذا، لا أستطيع تجاوز السلوك الافتراضي الآن من النموذج.
هذا دون جافا سكريبت، فإن شكل ما يقدم إلى ملف PHP
كنا في تلك السمة العمل.
ولكن بدلا من ذلك، أنا أقول الآن، انتظر، انتظر، انتظر، أنا لا أريد منك أن تفعل فعلا ذلك.
أريد لهذا أن يحدث قبل أن تذهب ومحاولة أن يقدم إلى بعض الملفات PHP.
الآن ماذا أريد أن أفعل؟
عند هذه النقطة أريد استخدام AJAX بطريقة أو بأخرى لتحميل في ما سعر السهم هو.
أول شيء أريد أن أعرف ما هو المخزون كان المستخدم يبحث عن.
للقيام بذلك انا ذاهب الى استخدام آخر محدد.
هذا هو الثالث الذي بدا محدد في السابق.
هذا يقول أنني أريد أن تبدأ هذا العنصر شكل بمعرف اقتباس الشكل.
ثم في مكان ما داخل هذا النموذج يجب أن يكون هناك عنصر المدخلات
يحتوي على اسم الرمز.
إذا نظرنا إلى الوراء في HTML لدينا، رأينا أن لدينا مدخلا [= اسم رمز].
وهذا يعني أن هذا هو الذهاب لتحديد مربع النص أن المستخدم هو كتابة في.
هذا لطيف. لدينا مربع النص.
الآن نحن فقط بحاجة إلى معرفة ما هو داخل منه.
للقيام بذلك يمكننا استدعاء هذا الأسلوب هنا، وهذا فال،
وهذا يقول أنا أعرف ما مربع النص لديك.
أريد منك أن تخبرني ما هو المستخدم الذي كتبته في مربع النص.
الآن لدينا سلسلة تسمى الرمز الذي يساوي ما كتبته المستخدم فيها
هذا لطيف. يمكننا استخدام هذه السلسلة الآن لجعل طلبنا.
هذه هي وظيفة جديدة هنا، وهذا $،
إلا أننا لم يعد ستكون اختيار العناصر،
ونحن في طريقنا إلى أن استدعاء دالة مختلفة هذا ما توفرها لنا مسج.
هذه الوظيفة هي AJAX ما يحدث في الواقع لجعل هذا الطلب HTTP.
لذلك علينا أن يقولوا ذلك عدد قليل من الأشياء.
أول شيء يجب أن نقولها هذه الوظيفة هو المكان الذي أريد طلب للذهاب.
في مكان ما في مشروعي لدي هذا الملف داخل الدليل HTML دعا quote.php.
رأينا أستطيع الوصول إلى هذا الملف،، تماما مثل هذا، إذا ذهبت إلى مضيف محلي / quote.php.
>> أريد سكريبت بلدي لتقديم طلب إلى تلك الصفحة.
ما هو نوع من الطلب الآن؟
رأينا قبل ذلك شكل لديه هذه الطريقة = "آخر" السمة،
وهذا يعني انه سيكون لتقديم طلب POST،
لذلك لن تضع أي شيء في URL، بدلا من طلب GET،
وفقط التي يمكن الوصول إليها إذا كنا أطلقت للتو صفحة مع متصفح الويب، على سبيل المثال.
الآن قلنا أريد أن تقديم طلب POST HTTP
إلى صفحة تقع في quote.php.
عندما نقدم النموذج، يمكننا أن نتذكر وصول إلى عناصر المدخلات داخل هذا النموذج
مع هذا المتغير $ _POST.
حتى الآن نحن في القصة لم ترسل في الواقع على طول أي بيانات حتى الآن.
قلنا مجرد أننا نحقق طلب AJAX
وهنا هو نوع من الطلب ونحن نحقق.
الآن نحن بحاجة فعلا لإرسال بعض البيانات إلى الصفحة.
للقيام بذلك يمكننا استخدام هذه الخاصية تسمى البيانات.
قيمة هذه الخاصية هي في الواقع مجموعة النقابي.
والسبب في ذلك هو أنه يتيح لنا أن نرسل أكثر من مجرد قطعة 1 من البيانات.
هذا هو السبب لدينا هذه الأقواس المتعرجة المتداخلة داخل الأقواس هنا هذه مجعد أخرى.
هذه المفاتيح في صفائف النقابي ستكون نفس الشيء
عن تلك السمات في اسم عناصر النموذج لدينا.
وهذا يعني أنه إذا كنت ترسل على طول مفتاح من رمز،
وهذا يعني صفحتي PHP يمكن الوصول إلى هذه البيانات مع $ _POST [رمز]
مثلما فعلنا من قبل عندما كنا تقديم النموذج.
والآن البيانات الفعلية نريد ان نوجهها
وستكون قيمة هذا داخل مجموعة النقابي.
>> نحن تخزين هذا النص في متغير يسمى رمزا،
وهكذا نحن الآن على طول ارسال مفتاح من رمز
ومهما كانت قيمة للمستخدم كتابة فيها.
الآن لقد حققنا هذا الطلب HTTP، لدينا ملف PHP نفذت،
وانها بصدد ارسال بعض البيانات مرة أخرى إلى العميل الآن أن أدلى به للتو هذا الطلب.
الآن نحن بحاجة للرد على كل ما قال خادم بالنسبة لنا.
للقيام بذلك لدينا هذه الخاصية الماضي هنا دعا النجاح.
قيمة هذا المفتاح النجاح هو في طريقها فعلا لتكون وظيفة،
وهذا هو واحد من الأشياء باردة حقا يمكنك القيام به مع جافا سكريبت.
لا يمكن إلا أن يكون لديك رجات أو صفائف باعتبارها قيمة داخل صفيف النقابي،
يمكننا أيضا أن يكون لها وظيفة.
ذلك بالقول النجاح، وهذا هو مفتاحي.
A القولون يقول هنا يأتي القيمة،
والآن قيمة هذا هو في الواقع وظيفة.
لذلك نحن لسنا في حاجة لإعطاء هذه الوظيفة اسم في حد ذاته.
يمكننا أن نقول فقط هذا سيكون بعض من وظيفة. انها سوف تأخذ 1 الحجة.
حجة لهذه المهمة ستكون
أرسلت الخادم مهما كانت لنا مرة أخرى من الطلب.
تماما مثل متصفح لدينا عندما يجعل طلب، يرسل الملقم الجميل
ويعرض المستعرض ذلك،
في سياق AJAX التي قطعناها على أنفسنا مجرد طلب، أرسل الخادم شيء إلى الوراء،
والآن وقد مثلت لنا أن كسلسلة.
مع هذه السلسلة أود فقط أن لعرضه على الصفحة.
للقيام بذلك انا ذاهب الى واحد محدد الماضي.
سأقوم بتحديد العنصر مع السعر ID.
هذا هو مجرد DIV الفارغة التي قمت بإنشائه على الصفحة،
وأريد أن تعيين محتويات هذا DIV أن يكون الخادم مهما كانت ترسل لنا مرة أخرى.
أنا في الواقع لقد تعديل quote.php قليلا.
>> بدلا من استدعاء تجعل بعض وتقديم الصفحة،
quote.php الآن يجري ببساطة لطباعة قيمة الأسهم كسلسلة.
حتى لو كنت فعلا لزيارة الصفحة، وكنت أرى أن مجرد سلسلة صغيرة
من أيا كان سعر السهم.
واحد آخر شيء يتعين علينا القيام به هنا هو فقط للتأكد من هذه الدالة تقوم بإرجاع كاذبة.
ما هذا يقول هو أنه إذا أنا داخل معالج الحدث
وأن معالج الأحداث بإرجاع false بدلا من العودة الحقيقية،
وهذا يعني أنني لا أريد الحدث الأصلي لاطلاق النار.
في هذه الحالة، إذا لم يكن لدينا أي سكريبت وقدمنا ​​نموذج،
متصفح الويب لدينا هو الذهاب ليقول "أنا ذاهب لإرسال تلك البيانات على طول"
وانهم ذاهبون لنرسل لك إلى صفحة أخرى.
لأننا باستخدام AJAX الآن، ليس هناك حاجة لإرسال المستخدم إلى صفحة أخرى.
ونحن في طريقنا فقط لعرض النتائج بشكل حيوي في هذه الصفحة نفسها.
نحن حقا لا نريدهم أن تذهب إلى أي مكان، وأريد البقاء في نفس الصفحة.
ذلك من خلال العودة كاذبة، علينا أن نضمن أن النموذج لا تفعل ذلك بالنسبة لنا.
دعونا نلقي نظرة على ما يبدو في الواقع مثل هذا.
صفحتنا اقتباس تبدو هي نفسها.
اسمحوا لي سحب ما يصل المفتش الى هنا حتى نتمكن من معرفة ما يجري.
جعلها أقل قليلا ضخمة.
إذا كان لنا أن نتذكر فتح علامة التبويب شبكة الاتصال، وهذا هو المكان الذي يمكن أن نرى جميع الطلبات HTTP
التي تحدث على الصفحة.
>> لرمز اسمحوا لي أن اكتب في AAPL ثم انقر أحصل على عرض سعري.
ورأى أن ونحن الآن على حصة من تكاليف بعض أبل عدد من دولار
ظهرت فقط في الصفحة، ولكن لم يتغير URL على الإطلاق.
في الواقع، وهنا طلب HTTP التي قطعناها على أنفسنا فقط.
قدمنا ​​طلب POST إلى quote.php. أن من المنطقي.
هذا ما أرسل لنا خادم الظهر.
انها لم تعد هذه الوثيقة عملاقة HTML مع الصور واشياء من هذا القبيل،
انها مجرد سطر من النص، وبعد ذلك عرض فقط سطر من النص.
إذا عدنا إلى رؤوس ونرى ما أرسلنا بالفعل داخل هذا الطلب HTTP،
يمكننا أن نرى هنا أننا أسفل أرسلت على طول مفتاح من رمز وقيمة AAPL،
وهو ما كتبته المستخدم فيها
هذا هو لطيف، لكنه ما زال قليلا مزعج.
لا يزال لدي فوق هذا الزر للحصول على أسعار الأسهم.
نحن شعب مشغول وليس لدينا الوقت لفوق الأزرار.
أدركت هذا القليل جوجل منذ فترة عندما تنفذ Google الفوري.
ما يفعله هو بحث Google الفوري كما كنت تكتب ويبدأ عرض النتائج فقط بالنسبة لك
لذلك لم يكن لديك ما يدعو للقلق حتى النقر البحث.
في الواقع، قصة ممتعة المتعلقة بذلك.
مرة واحدة جوجل الفوري خرج، كان الناس مثل، "قف، هذا هو مدهش سوبر".
"هذا هو بارد جدا."
وطالب باستمرار في جامعة ستانفورد الذي كان 19 عاما وقت
جعل هذا موقع يسمى يوتيوب الفوري.
جميع فورية يوتيوب لا يتم البحث بشكل فعال يوتيوب على الفور.
وذلك بدلا من الحاجة إلى الذهاب إلى YouTube.com وضرب البحث،
عندما أبدأ بكتابة إلى شيء مثل يوتيوب الفوري CS50،
هنا يمكننا أن نرى أن محاولة انها على اتصال إنترنت بطيء
تعبئة هذه النتائج العيش.
للقيام بذلك يمكننا أن نجعل الواقع تعديل بسيط جدا لدينا ملف quote.js.
الآن نحن إرفاق هذا الحدث عندما يتم إرسال النموذج.
نحن لا نريد حقا أن تجعل للمستخدم تقديم هذا النموذج بعد الآن،
لذلك دعونا إطلاق هذا الحدث بدلا في كل مرة يقوم المستخدم بالضغط على مفتاح.
للقيام بذلك في دعونا أولا تغيير الحدث من تقدم إلى keyup.
وهذا يعني أنه بدلا من الانتظار للنموذج أن يقدم،
في كل مرة يتم الضغط على المفتاح، شيئا ما سيحدث.
أنه لم يعد من المنطقي أن نعلق هذه الحدث KeyUp إلى النموذج بأكمله.
نحن حقا لا يهتمون إلا أن مربع البحث.
>> لتحديد ذلك الآن، يمكننا تغيير هذا أن يكون، بدلا من الاقتباس شكل من الأشكال،
اقتباس النموذج وعلينا مدخلا (اكتب = النص) أو يمكننا أن نقول (اسم = رمز) -
كل ما نريد.
الآن هناك واحد آخر شيء يتعين علينا القيام به.
إلى هنا نتذكر عندما قلنا عودة كاذبة
قلنا نحن لا نريد هذا الحدث الافتراضي لاطلاق النار.
ولكن مجرد أن ذلك يحدث إذا كنا تعطيل ذلك الآن،
اكتب كل ما نحن في لن تظهر في المتصفح بعد الآن
لأن من شأنه أن يكون السلوك الافتراضي من كتابة في مربع نص.
لم نعد نريد لتجاوز ذلك، لذلك دعونا تدمير هذه العودة كاذبة.
إذا كان لنا أن حفظ ذلك وإعادة تحميل الصفحة، والآن عندما أبدأ بكتابة AAPL
سترى أن كان سعر السهم في أسفل هنا هو استكمال تلقائيا.
حتى هنا CS50 الفوري المالية.
في الواقع قصة ممتعة حول الفوري يوتيوب
هو أن الطالب فقط نوع من كتب عليه كمشروع 1-الليل،
وفي اليوم التالي عرضت عليه وظيفة من قبل الرئيس التنفيذي لشركة يوتيوب.
ذلك بهذه البساطة، كنت CS50 الطلاب، يمكن مشاريعك النهائية تحصل على وظيفة في يوتيوب.
شيء من هذا القبيل هو فكرة رائع حقا لمشروع النهائي، أليس كذلك؟
كان لدينا بعض الوظائف القائمة التي كنا نريد أن تتكامل مع.
يمكننا تحسين تجربة المستخدم قليلا،
وفجأة إن البحث الفوري شيء على يوتيوب أن يكون أسهل بكثير
من البحث عنه على موقع يوتيوب العادية.
ولهذا AJAX باختصار.
>> في الأمثلة أن يوسف كان يظهر، رأينا الكثير من autocompletes،
وتلك هي في الواقع autocompletes، مفيد حقا لأننا لم يكن لديك أن نتذكر -
على سبيل المثال، إذا كنت لا تذكر سعر السهم لشركة آبل
ونحن نعرف فقط انه شيء AA، بدلا من القول فقط بالنسبة لي،
"حصة من هذا الشيء يكلف هذا الكثير من المال،"
فما استقاموا لكم فاستقيموا نوع من يود أن يعرف ما أسهم تبدأ أأ.
يمكننا أن نفعل ذلك بشكل جيد حقا مع مكتبة التمهيد الذي هو مدرج بالفعل
داخل CS50 المالية.
إذا كنت تأتي إلى هنا إلى العلامة جافا سكريبت وانتقل لأسفل إلى Typeahead،
هذا هو مجرد المساعد لطيفة أن شخصا ما كتب بالفعل بالنسبة لنا،
ويمكننا بسهولة استخدام وظائفه مثل هذا.
كتبت في A وهنا لائحة لبعض الدول التي تبدأ ب A.
دعنا نقول أن أعتقد أن هذا هو حقا بارد وحان الوقت بالنسبة لي لتشمل هذا على صفحتي.
وتبين أن هذا هو حقا، حقا بسيطة.
دعونا القفز فوق هنا لquote3.js.
ملفي تبدو مختلفة قليلا.
هنا أسفل كل الاشياء AJAX بلدي هو نفسه.
أريد أن تحميل بيانات المخزون دون الحاجة إلى الذهاب إلى صفحة أخرى.
ولكن الآن أريد استخدام هذا البرنامج المساعد.
وثائق التمهيد لديه أمثلة رائعة من بالضبط كيف يمكنني أن أفعل ذلك.
أريد أن أقول، "هنا هو الإدخال الذي أريد أن الإكمال التلقائي"
وانا ذاهب الى استدعاء هذه الدالة تسمى typeahead،
وأن يجري التعامل مع كل من الاشياء Typeahead بالنسبة لنا.
سوف تهيئة قائمة، وسوف تفعل كل ترشيح لدينا.
الشيء الوحيد الذي يحتاج إلى معرفة ما نحن autocompleting البيانات على.
لذلك أنا وجدت من هذا المفتاح فقط من خلال قراءة الوثائق والنظر في الأمثلة.
إذا أعطيها مفتاح من المصدر، فإن قيمة هذا المفتاح
هو فقط بعض مجموعة من الأشياء أريد أن الإكمال التلقائي.
جاء هذا المتغير من هذه الملفات الأخرى.
I فتح symbols.js.
>> هذا هو مجرد symbols.js هذه المجموعة حقا، حقا كبيرة تحتوي على سلاسل
كل هذه رموز الأسهم من NASDAQ.
إذا كنت تريد أن تقفز مرة أخرى إلى HTML، jharvard ذلك، vhosts، globalhost، HTML، قوالب،
quote_form.
ومنذ ذلك يسمى الآن quote3.js، اسمحوا لي أن تغيير ملف JavaScript بما في ذلك أنا هنا.
الآن لدي quote3.js، لذلك أنا ذاهب لتحميل هذا الملف في جافا سكريبت منفصل،
واحد لديه أن الإكمال التلقائي التمهيد.
الآن عندما تقفز مرة أخرى إلى المتصفح، إعادة تحميل الصفحة، وأبدأ بكتابة AA،
هناك الإكمال التلقائي بلدي. وكان حقا بهذه البساطة.
كان I 1 سطر من التعليمات البرمجية التي تقول فقط، "وهنا أريد أن الأشياء الإكمال التلقائي"
وفجأة لدي هذه الوظيفة حقا، لطيف مع الكثير من الجهد كله لا على الإطلاق.
كما كنت تطوير مواقع الإنترنت وخاصة الجانب الواجهة الأمامية من الأشياء،
وأنت تسير لتجد هذا هو الحال كثيرا.
هناك الكثير، الكثير، الكثير من المكتبات مجانا رائع حقا هناك
التي تجعل من السهل سوبر لفعل أشياء من هذا القبيل.
يمكن لأي شخص أن يفكر في أي عيوب autocompleting ببساطة على قائمة كبيرة من هذه الرموز؟
ماذا يمكن أن يكون هذا ليس شيئا أفضل مع هذا النهج؟
نعم. >> [طالب] الوقت، إذا كان لديك الكثير من (غير مسموع)
نعم. الآن نحن في تحميل هذا الملف جافا سكريبت ضخمة وهناك الكثير من الرموز.
وحتى إذا كان لدينا طن من الاشياء، وهذا النوع يمكن من زيادة كمون لا تبحث فقط
ولكن أيضا تحميل الملف الفعلي.
كبيرة. أي شيء آخر؟
الآن ليس هناك شعور حقيقي من أهميتها.
إذا كان نوع I في الشركات A، والتي تظهر هنا
قد لا تكون الشركات الأكثر شعبية التي تبدأ ب A.
>> قبل أن نصل إلى أبل، قد يستغرق بعض الأحرف أكثر للعثور على ما كنت أبحث عنه.
هذا الإكمال التلقائي لايوجد بهذا المعنى ذات الصلة.
انه سيكون فقط أن أقول، "أي شيء يطابق أنا ذاهب لعرضه."
بدلا من ذلك، أود أن تدمج بطريقة ما في بعض الأهمية عمليات البحث التي أجريتها.
إذا ذهبت إلى هنا لياهو! المالية، finance.yahoo.com،
إذا حاولت إدخال رمز على صفحة ياهو المالية لل
وأبدأ بكتابة GOOG، ولدي هذه القائمة لطيفة من الأشياء.
بوضوح، يبدو أن ياهو! تفعل شيئا أكثر ذكية هنا.
لديهم بعض الأهمية ولها أيضا معلومات إضافية
مثل اسم سهم.
هذا شيء لا أستطيع الحصول على قائمة فقط حقا مع الأسهم بلدي من الرموز.
أريد هذا وحتى انا ذاهب الى أن أعتبر.
للقيام بذلك دعونا القيام ببعض الامور.
دعونا أولا فتح المفتش في هذه الصفحة
لأن رأينا أن هذه الصفحة لم يتم إعادة في كل شيء،
حتى انها ربما باستخدام AJAX على نحو ما يتم تحميل البيانات الخاصة به.
يمكننا معرفة ما هي البيانات انها التحميل.
إذا كنت اضغط على علامة التبويب هذه الشبكة، فإن هذه ستكون جميع الطلبات التي تبدأ للاطلاق.
الآن إذا كنت اكتب في غو، يمكننا أن نرى أن أنا فقط حصلت على طلب HTTP جديدة.
وربما هذا هو حيث أن البيانات تأتي من.
المؤكد، إذا كنت تنظر في هذه URL، الذي هو جزء اسمه الغريب،
يمكننا أن نرى أن هذا هو بالضبط حيث يتم طرد ياهو بياناتها من.
>> لقد قمت بإنشاء ملف منفصل دعا suggest.php هذا مشابهة جدا في الروح إلى وظيفة البحث.
انه سيكون أساسا لإجراء الاستعلام إلى URL ياهو، والحصول على بعض البيانات مرة أخرى،
وإرساله مرة أخرى إلى البيانات.
الآن، بدلا من استخدام هذه كبيرة، قائمة كبيرة من الرموز،
يمكنني استخدام الأشياء ياهو صلة لطيفة،
وأنا لم يكن لديك لتحميل هذا الملف جافا سكريبت واسعة النطاق.
أنا لن يؤدي الا الى هدم رموز الأسهم ذات الصلة في الواقع.
دعونا القفز الى ذلك.
حتى HTML، JS. نحن الآن في quote4.
نحن الآن لم تعد تستخدم هذه القائمة الكبيرة من الملفات سكريبت.
ولكن هناك نوع صغير من مشكلة تصميم هنا.
لقد قلنا أن A في AJAX هو غير متزامن.
ما يعنيه ذلك هو أنه عندما أقوم بإجراء طلب AJAX،
حتى هنا على السطر 8، وهذا هو المكان الذي أطلقت فعلا بلدي AJAX الطلب.
دعنا نقول الآن لدي بعض التعليمات البرمجية هنا إلى الأسفل الذي يجري القيام ببعض الاشياء
أود تنبيه المستخدم أو شيء تغير على الصفحة.
ما لن يحدث هو المتصفح لن تنتظر هذا الطلب لمواصلة
قبل نازلة وضرب هذا الخط.
هذا هو الجزء غير متزامن.
انها تسير لجعل هذا الطلب ويقول: "كلما الانتهاء،
"نعود وندعو تلك الوظيفة التي قلت لك للاتصال داخل للنجاح."
وهذا يعني أننا لا نستطيع فقط تحميل جميع الأسهم مسبقا.
نحن بحاجة لإجراء الطلب والانتظار لشيء أن أعود.
وهذا يعني أن من قبل، يمكن أن نقول ببساطة التمهيد،
"وفيما يلي قائمة من الأشياء أريدك أن الإكمال التلقائي".
لم يعد بإمكاننا القيام بذلك بعد الآن لأننا لا نعرف
ما نريد أن الإكمال التلقائي في الواقع على.
لحسن الحظ، يعتقد التمهيد لهذا لأن هذه هي الرجال الذكية هناك،
وأنها وفرت لنا في الواقع هناك طريقة أخرى لتحميل هذا البرنامج المساعد Typeahead.
من قبل، كان قيمة هذه الخاصية فقط مصدر هذه المجموعة الكبيرة من الأمور التي الإكمال التلقائي.
>> الآن هو في الواقع مصدر الملكية وظيفة،
والغرض من هذه الوظيفة هو لمعرفة ما الأشياء التى يمكن الإكمال التلقائي هي.
الطريقة انها سوف هذا الرقم هو انه سيكون لنسأل ياهو!
ما هي أفضل الأشياء لالإكمال التلقائي هي.
للقيام بذلك انا ذاهب الى تقديم طلب AJAX مشابهة جدا.
أنا ذاهب لطلب هذه الصفحة في suggest.php.
أريد أن إرسال الرموز لا تزال على طول.
والآن نجاحي، وقال لي وثائق التمهيد
أنه من أجل ملء تلك القائمة من الأشياء،
كل ما عليك القيام به هو تمرير هذه المجموعة في الآن إلى وظيفة رد الاتصال.
ولكن انتظر لحظة.
إذا من المفترض أن تكون هذه مجموعة ويرسل لي AJAX النص مرة أخرى،
كيف يكون ذلك ممكنا؟
هذا يقدم طريقة جديدة لتبادل البيانات JSON دعا.
في هذه الحالة نحن لا ترسل توه سلسلة بسيطة من النص.
الآن نحن نتعامل مع هذه القائمة أكثر تعقيدا من رموز الأسهم.
يمكن لهذه الرموز الأسهم تشمل أيضا أشياء مثل اسم الشركة أو الأسعار الحالية.
فقط باستخدام سلسلة كبيرة الطويلة التي ليست بأي حال من الأحوال تنسيق يمكن التنبؤ به
لن يكون أفضل طريقة للحصول على هذه البيانات من الخادم ياهو لي
بطريقة أستطيع أن أفهم بسهولة.
JSON هي التكنولوجيا التي تستفيد من الطريقة التي إنشاء صفائف النقابي في جافا سكريبت.
هذا يبدو كثيرا مثل مجموعة سكريبت النقابي،
وفي الواقع، انها لأنه هو.
JSON لتقف على تدوين كائن سكريبت.
هذا هو أساسا شكل متفق عليه لنقل البيانات ذهابا وإيابا.
هنا هذا الكائن أو JSON هذه المجموعة JSON النقابي
ويرسل لي بعض البيانات عن هذا المسار.
>> مفاتيح هذه المجموعة من الأشياء مثل المسار الذي يحتوي على قيمة CS50،
وإلى هنا يمكننا أن نرى أن أنا يمكن أن يكون لها قيمة صفيف.
ليس لدي أن تفعل أشياء مثل تحليل السلاسل من والبحث عن فواصل
وتفعل أشياء مجنونة من هذا القبيل.
لأنه أعلن هذا في هذا التنسيق JSON،
سكريبت مسج وظائف لديها بالفعل لتحويل سلسلة
يشبه هذا JSON في صفيف النقابي الفعلي سكريبت
التي يمكن أن نعمل معها.
فعل ذلك هو بهذه البساطة القول إن لم يعد هذا الملف، suggest.php،
إرسال البيانات مرة أخرى ببساطة سلسلة من النص،
ولكن أنا أعلم أنه سيكون لي عودة إرسال JSON.
وهذا يعني أنه يمكن تحويلها إلى JSON أن مجموعة سكريبت النقابي.
وهكذا مسج، أود منك أن تفعل ذلك بالنسبة لي.
وهذا يعني أن هذه المعلمة الاستجابة هنا،
هذا لم يعد مجرد سلسلة.
لأننا قد قال مسج الذي يأتي هنا بعض JSON،
مسج ستكون ذكية بما فيه الكفاية ليقول "أنت تريد JSON؟"
"انا ذاهب الى تحويل ذلك إلى مجموعة النقابي لك."
دعونا نلقي نظرة على الواقع علامة التبويب شبكة الاتصال مرة واحدة لدينا quote4.js.
سنقوم بتغيير وإعادة تحميل هذه الصفحة.
الآن انا ذاهب الى كتابة في واحد مرة أخرى.
لقد قدمت طلب أحد الزوجين لsuggest.php، ولكن الآن هذا الرد،
بدلا من مجرد سلسلة، انها JSON.
لذلك لدي هدفين مفتوحة مجعد قائلا: "هنا يأتي مجموعة النقابي".
>> ويسمى المفتاح الأول والوحيد من هذه المجموعة النقابي الرموز،
ثم هنا هو مجموعة من كل من الرموز ذات الصلة
تأتي الآن من ياهو! المالية، وليس من تلك القائمة عملاق.
هذه هي الطريقة التي يمكنني ببساطة ملء هذا البرنامج المساعد الإكمال التلقائي
مع بعض البيانات التي ليست قادمة من ملف محلي هذا ما محددة سلفا بالفعل
ولكن من شيء آخر.
تبين أن نتمكن من الاستفادة من الواقع تقنية تسمى JSONP،
أو JSON مع الحشو، والتي تقضي على هذا الوسيط suggest.php.
ولكن بدلا من فعل ذلك، دعونا نلقي نظرة على بدلا كيف يمكنني تحسين هذا أكثر من ذلك.
أنا حقا أحب التمهيد لTypeahead. انه لطيف حقا.
لكننا في طريقنا جيدة في جافا سكريبت ونريد أن نفعل ذلك النوع من أنفسنا،
ربما تأخذ نظرة على ما يمكن هذا البرنامج المساعد به.
دعونا لم تعد تستخدم هذا الشيء Typeahead،
ودعونا في محاولة لجعل هذه القائمة من الاسهم اقترح أنفسنا.
هنا في quote6.php ونحن في طريقنا لتبدأ بنفس الطريقة.
أنواع شخص في كل مرة شيئا، ونحن نريد أن نجعل طلب AJAX.
هذا هو مماثل لدينا الأصلي الفوري المالية CS50.
بدلا من تقديم طلب إلى quote.php،
نحن نحقق الآن طلبا بهذا الملف نفسه كما كان من قبل، وهذا suggest.php،
الذي هو مجرد الذهاب الى سحب البيانات من ياهو! المالية.
>> مرة أخرى، لا تزال نتوقع JSON، ولكن منذ الآن Typeahead لا تفعل هذا بالنسبة لنا،
نحن بحاجة أيضا لإرسال على طول قيمة داخل مربع النص الحالي.
نحن نعرف الآن أن نسأل ما ياهو! المالية ل،
وحتى الآن هنا هو الوظيفة التي نريد أن تنفيذ مرة واحدة على طلب يكمل.
ليس لدينا البرنامج المساعد لجعل قائمة بالنسبة لنا،
حتى هنا حيث نحن ذاهبون فعلا لبناء قائمة من الاقتراحات.
للقيام بذلك، يشبه إلى حد كبير في PHP متصلا نحن هذه السلاسل الكبيرة من HTML
ثم نحن المطبوعة منها، يمكننا أن نفعل الشيء نفسه بالضبط في جافا سكريبت.
أولا نحن في طريقنا لتبدأ هذه السلسلة تسمى الاقتراحات،
وهذه السلسلة هو مجرد الذهاب لاحتواء بعض HTML.
نريد أن تكون قائمة من الأشياء، لذلك نحن في طريقنا لتبدأ مع هذه العلامة القائمة،
والآن نحن في طريقنا للتكرار عبر كل من الرموز التي تم إرجاعها إلى الوراء بالنسبة لنا.
تذكر، لأننا قلنا نوع البيانات: 'JSON'، وهذا ليس سلسلة.
هذا هو بالفعل مجموعة بالنسبة لنا. هذا رائع حقا.
يمكن القول ببساطة: "أنا أريد منك أن إلحاق عنصر القائمة."
سوف نضعه داخل عنصر لفي جانب من ذلك،
سنقوم إعطائها فئة من الاقتراحات حتى نعرف ما هو عليه،
والآن هنا هو الرمز الذي عدنا من ياهو! المالية.
>> مرة واحدة لقد أنشأنا عنصر لكل من رموز حصلنا مرة أخرى،
نحن نريد فقط لإغلاق القائمة.
حتى الآن اقتراحات يمثل هذا جزء قليل HTML
أنه عندما وضع على الصفحة سيكون على قائمة الأشياء التي تبحث عنها.
الآن دعونا نضع في الواقع أن على الصفحة.
للقيام بذلك في الواقع لقد خلق آخر DIV فارغة ولقد أعطى معرف من الاقتراحات.
مثل الكثير وضعناها محتويات DIV التي من شأنها أن عرض أسعار الأوراق المالية البيانات،
ونحن الآن نريد فقط لضبط محتويات هذه DIV إلى أي هذه السلسلة هو
التي تحتوي على هذه الرموز.
باستخدام هذا الأسلوب HTML، هذا المتغير الاقتراحات، هذه السلسلة، هو سلسلة من HTML.
أريدك أن تأخذ هذا HTML ووضعها داخل DIV دعا الاقتراحات.
لقد إلحاق نحن مجرد شيء إلى الآن DOM.
لقد أضفنا بعض العناصر الجديدة إلى DOM أن نتمكن من عرض الآن على الصفحة.
دعونا نرى ما يشبه هذا.
إذا كنا في تحميل quote6 والآن نعود،
الآن عندما أبدأ بكتابة AAPL، لم يعد لدينا أن التمهيد الإكمال التلقائي،
ولكن لدينا الآن هذه القائمة التي قطعناها على أنفسنا بأنفسنا.
هذا هو أقبح قليلا من Typeahead التمهيد، على سبيل المثال،
ولكنها لا تسمح لنا أن نفعل شيئا واحدا الأخرى.
عندما كنا نبحث في ذلك التمهيد المساعد،
رأينا أن إحدى القيم الإكمال التلقائي عندما كنا autocompleted، كان AAPL.
التي قد لا تكون مفيدة جدا.
كمستخدم، وأنا قد لا تتعرف فورا عن جميع من رموز الأسهم.
ما أنا على الأرجح أكثر عرضة للاعتراف هي أسماء الشركة الفعلية.
وحتى لا يكون من المفيد حقا إذا بدلا من القول AAPL
وقال هذا شيء من هذا القبيل شركة أبل
لقد توالت لأننا أنفسنا هذا، يمكننا بسهولة فعل ذلك حقا.
دعونا فتح ملف لدينا اقتباس مشاركة هنا، لذلك quote7.
>> نفس الشيء. لقد قمت بإنشاء ملف PHP مجرد أن يعود لنا أكثر من مجرد رموز.
كما يعطي لنا عودة أسماء الشركة.
وهكذا نقوم به الشيء نفسه. نحن نحقق طلب AJAX.
مرة واحدة على طلب أكملت، ونحن في طريقنا لتنفيذ هذه المهمة هنا،
وهذه الوظيفة هو الذهاب الى بناء سلسلة كبيرة من العناصر.
ولكن الفرق هنا هو أن قيمة هذه القوائم لم تعد مجرد رمز،
انها الآن الاسم.
لذلك لدينا مشكلة واحدة صغيرة.
عندما نستخدم البحث لدينا، ونحن بحاجة لتمرير بطريقة ما الرمز.
لا يمكننا تمرير شيء مثل البحث شركة مايكروسوفت.
نحن بحاجة إلى نقله MSFT.
عندما نكتب HTML، لدينا الكثير من سمات المدمج في نيس.
ويمكن لوالمرتبطة به وHREF أو الفئة (أ).
لكن ما نحتاجه حقا هو الآن لكل من هذه الروابط
أن يكون رمز السهم المرتبطة به.
ليس هناك المدمج في سمة HTML لرمز السهم،
لكن لحسن الحظ، HTML5 يسمح لنا لخلق سمات الخاصة بنا لتكون كل ما نريد.
بالقول البيانات رمز، لقد تعرفت سمة جديدة
اسمه الذي أدليت به لأول مرة، وهذا ما يرام لأنني استهل مع هذه البيانات.
ونحن في طريقنا لتخزين داخل الرمز من هناك من المخزون الآن.
ما يعنيه ذلك هو أنه على الرغم من أننا عرض قيمة اسم الشركة
الإكمال التلقائي داخل لدينا، ونحن لا تزال تذكر الرمز
ويرتبط ذلك مع كل شركة.
الطريقة نقوم به هو أن هذا العنصر داخل نفسه.
وهذا يعني أننا بحاجة إلى مزيد من التغيير يجعل واحدة.
عندما كنا فوقه الآن، نحن بحاجة إلى اتخاذ فعلا الاستفادة من السمة رمز
بدلا من مجرد قيمته.
إذا كان لنا أن يصل إلى الخلف، نحن نعلق معالج حدث للاقتراحات.
كلما يتم النقر واحدة من هذه الاقتراحات الآن، أريد أن أفعل شيئا.
ما أريد القيام به هو تغيير قيمة هذا المربع الإدخال.
الآن أريد أن ضبط هذه الوظيفة فال نفسه.
>> ذلك دون أية وسائط الدالة Val هذا يعود إلى ما كنت بالفعل في مربع النص،
ولكن إذا كنت تعطيه سلسلة، انه سيكون لاتخاذ هذه السلسلة ووضعها في مربع النص.
أنا اختيار النص في علبته بنفس الطريقة.
عليه اسم رمز من داخل اقتباس الشكل.
الآن أنا إرساله قيمة السمة البيانات الرمز.
هذا الشيء هنا هو جديد، وهذا دولار (هذا).
ما يشير إلى هذا هو العنصر الذي تم النقر.
يمكننا أن نرى هنا أننا لسنا إرفاق انقر فوق الحدث
إلى كل عنصر مع فئة من اقتراح على حدة.
بدلا من ذلك، نحن نقترب هذه بشكل مختلف قليلا.
بدلا من ذلك نحن نقول كلما داخل أي شيء من هذا DIV الاقتراحات،
وهو فقط تذكر الحاوية لتلك القائمة،
إذا تم النقر داخل شيء من هذا DIV ولها فئة من الاقتراح،
أريد هذا الحدث لاطلاق النار.
أساسا ما يعني أننا يمكن القيام به هو إعادة استخدام هذا يمكننا معالج الحدث نفسه
لجميع من الأشياء في القائمة.
لذلك نحن لا يجب أن يكون واحدا معالج الأحداث للعنصر الأول
ومعالج حدث المختلفة للعنصر الثاني.
يمكننا أن نقول بدلا من ذلك، "أريد معالج الحدث نفسه ينطبق على كل شيء في قائمتي."
ولكن علينا أن نعرف على نحو ما تم اختيار العنصر الذي.
هذا "هذا" الكلمة التي تمثل فقط.
هذا هو الكائن الذي تم اختيار من قبل المستخدم فقط.
إذا قمت بالنقر على الرابط فقط 3، وهذا يمثل عنصر التي تصل 3،
وهو ما يعني أن يمكنني الحصول على سمة لها، رمزا للبيانات،
الذي نعرفه يجب أن تحتوي على الرمز هذا ما يرتبط مع الشركة I النقر فقط.
إذا كان لنا أن العودة إلى الصفحة القفز المالية لدينا،
يمكننا أن نرى الآن أنه بمجرد أن تبدأ بكتابة شيء من هذا القبيل MSFT،
نحن لم تعد مجرد الحصول على رموز الأسهم،
الآن نحن نحصل على الشركات الحقيقية.
ولكن عندما كنت أنقر على واحد من هذه الشركات،
يمكننا أن نرى أننا في الواقع ملء مربع النص وليس مع اسم الشركة
ولكن مع كل ما تم تخزينها داخل هذه السمات البيانات.
وحتى لو كنت تفقد الواقع واحدة من هذه العناصر من جانب الحق النقر عليه
والنقر فحص عنصر، يمكننا أن نرى في الواقع ما يشبه هذا.
>> نتذكر هذا هو الشيء الذي خلقنا من داخل لأن حلقة
عندما كنا بناء هذه السلسلة من HTML.
هنا يمكننا أن نرى أن هذا الرمز البيانات لديها قيمة MSFT، وهو أمر عظيم.
هذا ما كنا نتوقع.
هذا الرمز وهذا ما وصلنا القيمة التي كنا بحاجة لاستخدام
داخل مربع النص هذا.
وهذا يكفي لنموذج عرض السعر لأن هذا نوع من السأم.
دعونا تجعل مجرد بعض التحسينات السريع لصفحة محفظتنا الاستثمارية.
إذا كنت قد استخدمت CS50 المالية لفترة من الوقت، وكنت البدء في شراء وبيع الكثير من الأسهم،
في نهاية المطاف هذا الجدول هو الذهاب الى الحصول كبيرة جدا،
وكنت تريد الذهاب الى مؤشر سهم، بطبيعة الحال.
مرة واحدة في الجدول هو حقا، حقا كبيرة، يمكن أن تكون مفيدة للمستخدم لمحاولة البحث أكثر من ذلك.
داخل مربع البحث اذا كنت ابدأ الكتابة شيء من هذا القبيل ديزني
وتبحث عن الأسهم بلدي ميكي ماوس، يمكننا أن نرى أن الجدول يتم ترشيح الآن
بناء على ما كتبته أنا فقط فيه.
هذه الوظيفة تبدو معقدة عظمى، لكنها في الحقيقة، من السهل حقا
مع jQuery وجافا سكريبت.
هذا الملف يتضمن ملف portfolio.php سكريبت دعا portfolio.js.
دعونا نلقي نظرة على ذلك.
حتى HTML، JS، محفظة.
هنا حيث نقوم به أن تبحث على الطاولة.
أول شيء أنا بحاجة إلى القيام به هو إرفاق معالج الأحداث إلى أن مربع النص
لأننا نعلم أن وظيفتنا نحن نريد تصفية لاطلاق النار
في كل مرة يقوم المستخدم بالضغط شيئا لأننا لم يكن لديك الوقت لأزرار البحث.
أول شيء يتعين علينا القيام به هو معرفة ما يبحث عنه المستخدم،
تماما مثل فعلنا من قبل.
هذه الكلمة الرئيسية يشير إلى العنصر الحالي المستخدم والتفاعل مع.
>> لأن المستخدم هو التفاعل مع مربع البحث،
دولار هذا يمثل مربع البحث،
حتى this.val يعطينا ما هو داخل مربع البحث للمستخدم حاليا هو كتابة.
حتى الآن، ما نريد القيام به هو أننا نريد أن تكرار عبر كافة الصفوف
داخل جدول أعمالنا.
لتحديد كافة الصفوف في جدول أعمالنا، وقدم لي هذا الجدول معرف من محفظة الجدول،
ويتم تمثيل كل صف من عنصر TR،
لذلك هذا هو الذهاب الى اختيار العودة إلى مجموعة كبيرة لي
من كافة الصفوف في الجدول.
الآن أريد أن تكرار عبر هذا الصفيف.
يمكن لك وأنا لحلقة، ولكن في الواقع يقدم لنا مسج وظيفة لطيفة دعا "كل".
كل ما يفعله هو كل يأخذ وسيطة واحدة،
وهذه الحجة هي وظيفة.
ما يجري القيام به هو انه سيكون لتطبيق تلك الوظيفة إلى كل عنصر داخل هذه القائمة.
هذه الوظيفة يأخذ وسيطة واحدة هذا البريد،
وعندما يتم تنفيذ هذه الوظيفة، هذا البريد سوف يتم استبدال الصف الأول،
ثم الصف الثاني، ثم الصف الثالث.
بهذه الطريقة، وهذا هو نفس الشيء مثل تشغيل للحلقة
وكشف العنصر الحالي ثم استنادا إلى داخل مؤشر للحصول على الحلقة.
في كل تكرار، بالنسبة لكل عنصر من هذه العناصر في الجدول،
أريد للتحقق مما إذا نص العنصر - النص من الخلية داخل الصف -
مباريات ما أنا تبحث عنه.
هذه السلسلة الطويلة من الأوامر الكبيرة هي كيف يمكن أن نفعل ذلك.
أول، مرة أخرى، وهذا يشير الآن إلى - لأنه داخل وظيفة جديدة -
هذا هو الآن في الصف الحالي في الجدول.
وأود أن أغتنم الصف الحالي في الجدول،
وأريد الحصول على جميع أبنائها.
تذكر، DOM هي شجرة هرمية،
وهو ما يعني أن العناصر لديها عدد من الأطفال.
>> هذه الوظيفة الأطفال. سوف يعود لي مرة أخرى مجموعة من كل العناصر
التي هي من الأطفال، في هذه الحالة، على التوالي في الجدول.
هذا هو ببساطة مجرد خلايا داخل الصف.
أريد فقط أن البحث عبر الخلية الأولى.
هذه الوظيفة. الاول يقول أعطني العنصر الأول في هذا الصفيف.
ثم وظيفة النص يقول بالضبط ما يحصل لي هو داخل تلك الخلية
منذ أن كنت تريد البحث أكثر من ذلك النص.
وأخيرا، دعونا تحويلها إلى أحرف صغيرة،
حتى نتمكن من القيام استفسارات حالة النص غير حساس.
وأخيرا، نريد أن نرى إذا كان ذلك داخل سلسلة من جدول يحتوي على سلسلة نحن تبحث عنه.
وظيفة indexOf في جافا سكريبت يفعل ذلك بالضبط.
يخبرنا ما إذا كان يحتوي على هذه السلسلة سلسلة أخرى.
إذا كان صحيحا أن كانت الخلية تحتوي على ما أنا بالبحث عن،
ثم أريد أن تأكد من أن يتم عرضه.
إن أسلوب عرض يقول: "عرض العنصر."
إذا لم تكن هذه هي الحالة، فإن ذلك يعني مهما أنا في البحث عن أمر غير وارد
في غضون ذلك الصف، وهكذا أريد لإخفاء هو من المستخدم.
الذي يحقق هذا الغرض لطيفة حيث لم يعد تصفية نرى الجدول بأكمله.
إذا كنت مهتما في كيفية جعل هذا مؤشر أيضا،
سنقوم بعد مصدر على الانترنت. ولكن هذا حقا بسيطة.
مسج لديه أساليب رهيبة لهذه الرسوم المتحركة والتلاعب خصائص CSS.
لذلك، هذا كل شيء بالنسبة لي.
>> ثم ما يكمن في المستقبل؟ كما سترى في غضون أيام قليلة، واقتراح مشاريع النهائي هو المناسب.
واقتراح المشاريع النهائية أسألك بعض الأسئلة،
ولكن سوف يكون من بينها ثلاثة معالم -
أحدهما "جيد" معلما، واحد أفضل معلم، واحدة من أفضل.
تعيين الفكرة هي حقا لمساعدتك على الرجال توقعاتكم
بحيث الحد الأدنى سوف تكون سعيدة مع إخراج المشروع النهائي الخاص بك
وسيكون "جيد" حتى الآن كما كنت قلقا.
ولكن بعد ذلك في الحصول على مصلحة لك للوصول قليلا إلى شيء أفضل
أو أفضل شيء، سنقوم أيضا فرز من دفع لك نحو ذلك أيضا.
وهاك CS50-A-ثون، وفي الوقت نفسه، في غضون بضعة أسابيع.
عادة، ونحن نفعل هذا على أساس اليانصيب أساس بسبب الاهتمام،
ولكن الاحتمالات هي أننا سوف تأخذ بضع مئات منا في الحافلات المكوكية من ساحة هارفارد
وصولا الى ساحة كيندال حيث تمتلك مايكروسوفت منشأة جميلة باقتدار يسمى "NERD" -
للبحث نيو انغلاند ومركز التنمية.
سوف نصل الى هناك حوالي 20:00 ونحن سيكون لديك بعض الطعام.
حول 01:00 سيكون لدينا بعض الطعام أكثر من ذلك.
حوالي 5 ص إذا كنت لا تزال مستيقظا سنقوم رئيس لأكثر من IHOP أو يأخذك إلى الحرم الجامعي.
الهدف هناك ليغوص في المشاريع النهائية
جنبا إلى جنب مع زملاء من والموظفين.
ثم بعد ذلك بأيام قليلة هو معرض CS50،
ومن المفترض أن يكون حقا والتي فرصة ليا رفاق لعرض العمل الخاص بك
والإنجازات للفصل الدراسي
في حين فرك أكتاف مع بعضها البعض، والحصول على شعور الجميع ما فعلت.
مع أن قال، وذلك بفضل العديد من تومي ليوسف و،
وسوف نرى لك يوم الاثنين.
[تصفيق]