>> حسنا.
لذلك، وجافا سكريبت.
الجميع تقريبا في هذه الغرفة ربما لديه بعض درجة
من الراحة معها سواء كان في طريق العودة عندما SC50
أو انها كانت شخصية مشاريع على شبكة الإنترنت أو حتى
إذا كنت فعلت شيئا من ذلك مع هذا المشروع قاعدة PHP الماضية،
ولكن بالنسبة لمعظم جزء منه، الكثيرون منكم،
حتى إذا كان لديك بعض الراحة
مع جافا سكريبت ربما لم تؤخذ
أمرا مفروغا منه كيف أعمال اللغة وما يدور
تحت غطاء محرك السيارة و ما نحن ذاهبون لمحاولة
القيام به اليوم هو قشر الظهر بعض من طبقات التقنية
ما هو جافا سكريبت، كيف فهو يختلف من لغة
مثل PHP، كيف يمكن أن يكون استخدامها ليس فقط من جانب العميل
ولكن أيضا من جانب الخادم و ثم التركيز على وجه التحديد جدا
في هذا الإطار، لاحظ أي JS والتي هي في جوهرها وقت التشغيل،
البرنامج الذي كنت يمكن تنفيذ كود جافا سكريبت،
جانب الخادم وأنه أصبح نوع شعبية متزايدة
من على نفس مكانة هذا أيام ربما روبي و PHP
وبايثون وسترى
أنه لديه بعض جميلة ميزات قوية عن طريق بعض
اللغة المدمج في يبني.
ولكن أولا، وبعض من السهل الاشياء فقط أن أذكركم
كيف تعمل هذه اللغة و إذا كان لديك مشكلة في رؤية أي
هذا، يصرخ فقط خروج وسوف نقوم بتعديل.
لذلك، هناك واحد مثل هذا في PHP لا فكرة الوظيفة الرئيسية،
كنت مجرد بداية كتابة التعليمات البرمجية
ويمكنك لذلك تفسير ذلك أعلى إلى أسفل.
في سياق مستعرض
أو في جانب الخادم شيء سنرى بعض الأمثلة
في بعض الشيء.
الظروف، ذو بناء جملة أي ما يعادل PHP وكذلك C،
C + + وبعض اللغات الأخرى وذلك فقط لتعطيك إحساسا
كيف يمكننا أن هيكل ذلك،
هناك فقط الكنسي الشرط.
تعبيرات منطقية، بالضبط نفس كما كنت قد رأيت نحويا
في نفس تلك الأخرى اللغات، سواء بالنسبة للoring
وإنهاء الأمور معا.
جافا سكريبت لديه مفاتيح، مثل الكثير من PHP، وأخرى للتأليف
وكنت لا محدودة، مثل في مئوية إلى الأوليات لا يتجزأ
مثل حرف ورجات يمكن في الواقع قيام أنواع أخرى من القيم.
الحلقات. لذلك، وهذا هو بالضبط نفس
وربما اثنتي عشرة لغة، بينما الحلقات، والقيام به أثناء الحلقات
ثم هذه الخدعة هنا.
لذلك، وهذا هو نوع من يعرف التعداد سريع
وانها طريقة ذكية جدا فقط مثل في القيام PHP
لكل FU كما بار يمكنك بالمثل،
في كائن جافا سكريبت، حيث الكائن هو اسم
المتغير هنا، مثلا، فار ط في البيت، وعلى كل التكرار
من هذه الحلقة، وأنا غير ستكون واحدة
من مفاتيح من هذا الكائن.
لذلك، إذا كان لديك كائن ل الطالب، والطالب لديه معرف
واسم والمنزل، تكراري سيكون لي
من قيمة الهوية والاسم و المنزل ويمكنك لذلك المؤشر
في الكائن كما لو انها صفيف باستخدام قوس مربع
التدوين للحصول على القيمة معرف مفتاح أو اسم
أو منزل وهكذا دواليك.
وخلافا للشائع الافتراض، وجافا سكريبت الكائنات،
خصائص ليست يضمن بالضرورة أن يكون
في نفس الترتيب، وهذا هو أيضا فيا لPHP لذلك لا تفترض
أن الأمور ستبقى في نفس الترتيب
التي وضعت تلك المفتاح أزواج القيمة إلى كائن.
كيف حول صفائف؟
هناك بضعة طرق لأنه يكتب نحويا
ولكن هذا هو على الارجح الاكثر الشائع الآن فقط باستخدام مربع
قوس التدوين.
لذلك، وهذا هو متغير ل الاتصال بأرقام تحتوي على مجموعة
ستة أعداد صحيحة هناك، وهنا سلسلة بسيطة
وتلاحظ ما هو غائب من هذه الأمثلة،
ما هو جافا سكريبت تفتقر على ما يبدو.
نعم. لذلك، ليس هناك فكرة من الكتابة، وبالتأكيد ليس
في هذا السياق هنا، ولكن هذا هو في الواقع سلسلة.
لذلك، وجافا سكريبت وأنواع وكان ذلك في الواقع مجموعة
الذي هو في حد ذاته نوع ولكل عنصر من العناصر
في ذلك مجموعة كانت من نوع عدد جافا سكريبت يدعو لهم.
لذلك، انها كتبته فضفاضة اللغة وسنرى
أن مثل جافا سكريبت PHP لديه مشغل الهوية
وآليات أخرى ل التحقق فعلا ما نوع
بعض المتغير كلا لفحص الخطأ
وغيرها من التطبيقات.
وهنا كائن عينة تحتوي مجرد رقم واسم.
والآن، لاحظ أننا باستخدام منهج قوس مجعد،
المسافة البادئة والأبيض الفضاء هو نوع من معنى
وهذا يعلن متغير اسمه روب
والذي هو معرف 1 و نوع التاريخ هنا رقمنا
وسلسلة على التوالي.
ثم وهذا هو شيئا مختلفا قليلا
إذا كنت قد فعلت أي وقت مضى أي شيء مع اياكس في هذه الأيام؟
ربما كنت تستخدم كائن مثل هذا
ولكن ما هو جدير بالملاحظة هنا؟
ما هو ذو بناء جملة من أي وقت مضى مختلفة جدا، مجرد زوجين
من الأشياء بين هذا المثال وهو أصغر المسلم
وهذا المثال أكبر.
لذلك، لأول مرة في لشخصا عاديا المدى، ما هو هذا؟
ما هو نوع أن الموظفين أقول لكم؟
موافق، انها مجموعة، انها مجموعة من ماذا؟
>> كائنات.
>> موافق، انها مجموعة من الكائنات.
والآن، والتركيز على واحد فقط - أي واحد من هذه الكائنات،
ما هو مختلف بين هذا وهذا؟
>> مفاتيح هي سلاسل.
نعم >>. لذلك، و مفاتيح هي سلاسل،
والمفاتيح هي في الواقع السلاسل في كلتا الحالتين
وهذا هو نوع من الحمقاء
في رأيي التصميم التاريخي القرار كلما كنت تستخدم
جسون، وجافا سكريبت تدوين كائن،
التي هي في جوهرها تنسيق النقل
لإرسال البيانات عادة عبر الشبكة
بين العميل والخادم، عليك أن تتذكر
أن هذا ليس الواقع صالحة JSON وهذا هو واحد
هذه FYIs إلا إذا كنت من أي وقت مضى فرقعة رأسك بالحائط
لعدة دقائق ليست جيدة السبب، انها ليست صالحة JSON
لأن مفاتيح لا نقلت فعلا.
جسون يتطلب أن idiotically مفاتيح تكون نقلت فحسب،
ولكنها تكون نقلت على نحو مضاعف، ونقلت واحدة لا تكفي.
لذلك، شيء غبي قليلا وأكثر من حقيقة متعة
لأغراض هذا اليوم ولكن أيضا سوف تكون صالحة جافا سكريبت
انها مجرد ليست - و العكس ليس صحيحا.
حسنا.
لذا، سنرى الكثير أكثر من ذلك.
حسنا.
لذلك، وهذا جافا سكريبت بناء جملة ربما جميلة
مألوفة، أي واحد منكم الذين لديهم لم تستخدم قط جافا سكريبت قبل
انها ليست قفزة هائلة من PHP أو أكثر من أي لغة إجرائية
ان كنت قد استخدمت.
لذلك، واليوم سنركز على الجوانب المثيرة للاهتمام
من جافا سكريبت وخاصة في سياق لا JS
ولكن ليس حصرا ل حتى الآن ربما كنت،
إذا كنت تستخدم جافا سكريبت، استخدامها داخل المتصفح.
لذلك، لا JS هي بيئة ثم في قليلا هو الذهاب
للسماح لنا للوصول كود جافا سكريبت العميل -
جانب الملقم ولكن أولا، دعونا نلقي نظرة
في شيء وهذا هو أكثر من ذلك بقليل جانب العميل.
لذلك، لقد ذهبت في، وهذا هو ترتبط على موقع الدورات،
إذا كنت تريد أن تلعب على طول، هناك نوعان من الدلائل
في الرمز البريدي اليوم من يسمى ترصيع مصدر الرمز البريدي على الموقع
وهذه ليست سوى عدد بعض الأمثلة بالحنين
من الأشياء التي قد شهدت قبل وأنا نوع من بنيت لهم
حتى من أبسط قليلا ل أكثر تعقيدا لندف
بعض من السمات من جافا سكريبت.
لذلك، دعونا نمضي قدما واتخاذ نظرة على سبيل المثال في هذا.
لذلك، للأسف كان سمة طرفة قتل من قبل عدة سنوات
باعتبارها السبيل قد حصلت على أجمل وأجمل
وكان العلامة طرفة حرفيا قوس مفتوح وميض قوس إغلاق
وأنه لا يوجد نوع من يعد معنا.
ولكن، لا يزال بوسعنا أن إحياء هذه الفكرة من علامة كتبها مجرد نوع
من التفكير فيه منطقيا، كيف يمكنك أن تذهب
حول جعل شيء من هذا القبيل هذا وميض حدسي؟
على افتراض انك تعرف قليلا قليلا من جافا سكريبت وأو CSS
عند هذه النقطة، انها موافق إذا لم تقم بذلك.
>> تعيين المهلة وإخفاء ذلك، ثم بعد ذلك سوف الوسم
ونوضح ذلك مرة أخرى.
نعم >>، والكمال.
هذا النوع من البرمجة 101،
كيف يمكنك تحقيق المؤثرات البصرية مثل هذا؟
حسنا، أنت بطريقة أو بأخرى يجب أن تظهر شيئا
ثم إخفاء شيء، وتظهر شيء ما، اخفاء شيء
وكما يقترح جوناثان باستخدام نوع من الوقت للخروج،
نوع من الجدول الزمني يمكنك القيام به هذا مرارا وتكرارا دون الحاجة
لاستخدام حلقة أو شيء من هذا القبيل.
لذا، اسمحوا لي ان اذهب الى طرفة-0.html
واسمحوا لي أن يتقلص الخط قليلا
حتى أن أكثر هذه تناسبها.
ودعونا نلقي نظرة في ما يحدث هنا.
لذلك، أولا وقبل كل شيء، لاحظ أن الجسم
من هذه الصفحة هو السوبر بسيطة، داخل الجسم
من الصفحة هو مجرد شعبة.
لقد منحت بصورة تعسفية معرف التحية
ويمكن أن يكون أي شيء طالما انها فريدة من نوعها
ثم لدي فقط بعض نص بسيط، مرحبا العالم.
لذلك، إذا كنت الآن انتقل إلى أعلى، تلاحظ بعض التصميم رقيق.
لذلك، أقول، حادة تحية، والتي كما تعلمون
في CSS يعني فقط فريد تحديد العنصر
مع فكرة المعايدة،
حجم الخط تسير بشكل تعسفي يكون هذا، الهامش ومحاذاة النص.
لذلك، رتيبا التفاصيل الجمالية
لتوسيط النص تقريبا.
لذلك، والجزء المثير للاهتمام هو في علامة النصي هنا
الذي يحدث لي لوضع داخل من رأس الصفحة.
لذلك، we'll - يمكنك أن تفعل هذا في أي عدد من الطرق
وسنرى قليلة تكرار هذا البرنامج نفسه
ولكن دعونا نبدأ من أعلى.
لذلك، لقد أعلن وظيفة دعا طرفة
وعلى ما يبدو أنه يستخدم هذه المدمج في طريقة DOM يسمى
getElementById التي ربما إحدى الطرق أكثر قوة
أن تحصل من خارج منطقة الجزاء مع جافا سكريبت يبحث عن
لا يملك "تحية" ل تكون علامات الاقتباس المزدوجة مثل ما كان
في HTML هو إما على ما يرام وقتا طويلا
كما كنت أسلوبيا تتفق هذه الأيام أجرؤ على القول
كثير من الناس استخدام جافا، ونقلت واحد في جافا سكريبت،
علامات الاقتباس المزدوجة في HTML ولكن لا يهم حقا
طالما كنت متسقة.
لذلك، وهنا إذا كنت لم تكن مألوفة، يمكنك الوصول إلى الواقع
مع جافا سكريبت CSS الخصائص على العناصر.
لذلك، لاحظ أن لدي أعلن متغير يسمى شعبة
وتخزينها داخل هذا المتغير،
إشارة إلى ما هذا العنصر هو DOM.
لذلك، إذا كنت تعتقد أن العودة إلى CS50 أو أي فئة التي كنت اعتقد
حول هياكل شجرة و DOM، وثيقة نموذج كائن،
هذا هو مجرد إشارة إلى عقدة في شجرة،
الذي يمثل هذه الصفحة
وإذا div.style.visibility يساوي الملكية، يساوي، يساوي،
المخفية، ثم أنا فقط تريد تبديل ذلك
كما اقترح جوناثان خلاف ذلك أريد
للتبديل ما يزيد على المخفية.
الآن، كما هو الحال في الجانب، لماذا الثلاثي يساوي هناك؟
أو ما هو مقابل يساوي ضعف؟
أي ما يعادل >> صارمة.
عذرا >>.
أي ما يعادل >> صارمة.
لذلك، فإنه من مشغلي الهوية
حيث كنت من قبل التحقق لا فقط قيمة المتغير
باعتبارها، بمعنى المساواة في تكافؤ ولكن أيضا نوع من ذلك.
لذلك، على الرغم من أننا لم تحديد هذا الآن أي بيانات
أنواع المتغيرات في أي ل هذا أو أي من الشرائح،
هناك نوع المرتبطة مع هذه السلسلة مخفية
مع تلك القيمة، كانت مخبأة و وهذا هو من سلسلة بالطبع.
لذلك، في هذه الحالة، فإنه لا يهم حقا
لأنه ليس هناك الطريقة التي ونحن في طريقنا إلى الخلط سلسلة
من "خفية" مع بعض قيمة أخرى
ولكن هذا غالبا ما يكون جيد العادة أود أن أقول للحصول على
في استخدام متساوية، على قدم المساواة،
علامة المساواة عموما شيء جيد.
وستجعل التعليمات البرمجية أكثر قوة سواء في PHP ولكن
وفي جافا سكريبت لأنك سوف تشغيل
في بعض الأحيان حالات الزاوية حيث قد تكون القيمة صفر
ان كنت تريد التحقق عن و الصفر يمكن خلط مع كاذبة
أو يمكن أن يكون هناك وكما هو الحال في PHP،
أيضا يمكن أن يكون جافا سكريبت متعددة القيم زورا حيث على صفر
وكاذبة وباطلة وغير معروف يمكن لجميع حل ضمنا
إلى false.
ولكن إذا كنت ترغب حقا للتحقق من قيمة معينة
مثل الصفر، وعدد، أو كاذبة ومنطقية ثم لديك
لاستخدام هذا المشغل الهوية.
لذلك، فإنه يمكن أن يحدث للحصول على في أي حال على الرغم من هنا،
انها نوع من معنى لأننا نعرف أننا التحقق
لقيمة سلسلة وانها لن يكون أي شيء آخر.
لذلك، وهنا يكمن السحر ثم، إذا أنا انزل الى هذا الخط هنا،
على ما يبدو، الذي بني إلى كائن النافذة
وهذا هو سمة من سمات متصفح هل يمكن الوصول
لهذا السوبر العالمية كائن يسمى النافذة،
داخل ذلك هو بعض الوظائف،
وإذا قطعة منها يتم تعيين الفاصل الزمني
ويستغرق ما يبدو ما هي أنواع من الحجج؟
نعم.
دعوة >> وظيفة ووقت واحد.
جيد >>. لذلك، وهي وظيفة استدعاء والوقت
وذلك بشكل خاص على الرجوع إلى وظيفة،
مؤشر إلى وظيفة بمعنى
وهذا هو وظيفة أن يحدث
للحصول على إعدام كل عدد من ميلي ثانية وفي هذه الحالة،
انها كل 500 ميلي ثانية.
لذلك، انها وسيلة لحمل على نحو فعال وحلقة لا نهائية
ولكن دون استخدام التكرار بدلا من ذلك قول جافا سكريبت
إلى داخل المحرك من المستعرض
للقيام بذلك كل 500 ميلي ثانية أو بالقرب
إلى 500 ميلي ثانية كما أنه يمكن،
اتضح أن تحت غطاء محرك السيارة،
هناك ما يسمى حدثا حلقة وسوف نعود إلى هذا
في سياق عقدة JS أن مجرد باستمرار النوع
من يجلس هناك، والغزل، في انتظار العمل الذي يتعين القيام به
وبمجرد أن ندرك،
لقد مرت 500 ميلي ثانية طرفة سوف الحصول على استدعاء مرة أخرى
ومرة أخرى ومرة ​​أخرى هو جنبا إلى جنب مع أي عمل آخر
الذي يحتاج إلى الحصول على القيام به.
لذلك، ما يمكننا تحسين هنا؟
حسنا، اسمحوا لي أن فتح حتى طرفة-1.html
وإظهار طرفة-1.html
كما جماليا متطابقة تماما.
لذلك، ما يمكن أن نحسن هنا؟
كذلك، لاحظ أنه كان نوع من غير مجدية
لتعريف دالة تسمى وميض لكيفية العديد من
في كيفية العديد من الأماكن فعلت أنا استدعاء الدالة طرفة؟
>> مرة واحدة فقط.
لذلك >>، واحد.
لذلك، فإنه لم يكن سيئا، و الواقع هو على الأرجح جميلة
على التوالي إلى الأمام.
أنا تعريف وظيفة طرفة، وأنا استدعاء دالة طرفة عن طريق
هذه المعلمة، لكن من الناحية الفنية،
لم يكن هناك سبب ل وكان نموذجا المشتركة
في جافا سكريبت هو في الواقع الاستفادة من وظائف لامدا
كما تذكرون من 51 وظائف أو مجهول
حيث إذا كنت لا تحتاج اسم وظيفة،
إذا كنت فقط واصفا إياه بالتأكيد في مكان واحد،
لماذا تهتم التبعثر التعليمات البرمجية الخاصة بك، تبعثر العقل المبرمجين
واسمك الفضاء حقا مع رموز
ان كنت لا حقا تحتاج إلى يهتمون.
وهكذا، في هذا الإصدار هنا،
تلاحظ أن ادعو window.SetInterval مباشرة
في أعلى جدا من بلدي العلامة النصي ثم أنا يمر
في وظيفة مجهول أن يأخذ بدون وسائط
وهذا هو تماما غرامة ثم الجسم
من تلك الوظيفة يبدو هو متطابقة إلى ما كانت عليه قبل
والنحوية فقط الفرق الآن
إلى هنا بجانب 500.
أنا يغلق الجسم وظيفة
ثم أقوله تنفيذ التعليمات البرمجية السابقة،
كل 500 ميلي ثانية.
تغير ذلك، هامشية جدا
ولكن خطوة نحو ما هو ربما أكثر أناقة
تنفيذ هذا.
لذلك، دعونا نلقي هذا واحد خطوة أخرى إذا أنا الآن أذهب
في طرفة اثنين، عليك رؤية المكتبة العامة،
تأثير الذي يجري
أن يكون غير منطقي تماما جماليا ولكن إذا ذهبنا
في الإصدار الثاني هنا، لاحظ التي في أعلى رأسي،
لقد تضمنت أحدث نسخة من مسج.
وبعد ذلك، إلى هنا، أنا تنظيف فقط
عن رمز قليلا، انها لن يكون عالما متعة
الاستمرار في استخدام وظائف DOM الأم
ونوع من جافا سكريبت الخام.
في الواقع، كما كنت قد مسج أعرف أصبحت شعبية جدا
أن معظم الناس فقط مسج الصراع مع جافا سكريبت
ولكن في الحقيقة مجرد عشاء مكتبة مفيدة مكتوبة
من قبل زميل يدعى جون Resig ومنذ الآخرين
أن يكون مجرد يجعل الكثير من الأشياء المملة
في جافا سكريبت أسهل وأكثر إيجازا.
لذلك، في هذه الحالة هنا ما الذي يحدث؟
لذلك، لدي هذا مظهر علامة الدولار، المزيد عن هذا
في غضون لحظة، ثم هذا هو محدد CSS.
لذلك، انها مشابهة جدا في الروح إلى ما فعلته من قبل،
ولكن هذه المرة، وأنا حرفيا باستخدام علامة التجزئة
للإشارة فريدة من نوعها معرف يسمى تحية
ومن ثم يبدو . المغلق هو أسلوب مضمنة
في إلى أي كائن هو أنني بإنشائه
وأنا التحقق من قيمة مفتاح الرؤية.
وإذا كانت قيمة هذا المفتاح يساوي، يساوي، يساوي، خفية،
ثم انا ذاهب الى تبديل ذلك و انا ذاهب الى تبديل هذه المرة
باستخدام نفس الأسلوب والتي على ما يبدو طاقتها
بمعنى أن لديها اثنين من التوقيعات المختلفة،
واحد مع وسيطة واحدة و واحد مع اثنين من الحجج،
والثاني منها هو واضع،
هو السابق الذي جالبة إذا جاز التعبير.
وإذا غريبة وإذا كنت أبدا بدا فعلا في هذا،
إذا ذهبنا إلى jquery.css نأمل ضرب الأعلى هو في الواقع هذا
ويمكنك ان ترى المزيد التفسير الرسمي
أننا مجرد استخدام هذا، . المغلق مع اسم الخاصية
ثم هو واضع CSS نقطة
مع اسم الخاصية وقيمة.
لذلك، هامشيا أنظف، ولكن لاحظ نوعا من نمط هنا
مع كل التكرار من هذا الرمز،
نحن نوع من جعله أكثر إحكاما وأكثر تشددا وصرامة
ويقول هناك أفضل التصاميم
منذ نحن نستخدم شخص رمز آخر وهذا ما القضاء
بعض من التعقيد.
لذلك، الآن دعونا جعل هذا أبسط من ذلك.
في واقع الأمر، وإذا كنت إزالة كافة ونقلت سترى فقط كل
التعليق سترى كيف بسيطة قد حصلت على هذا.
الفرق واحد هنا بطبيعة الحال هو
أن أنا باستخدام تبديل الطريقة التي بنيت كما يأتي
في لمسج وهذا مجرد
لأن شخصا آخر كتب رمز
أن يبدل في الواقع إعداد الرؤية
من أي عنصر DOM التي ترسلها ذلك.
لذلك، أفضل وأفضل.
وهكذا، وهذا هو النمط،
على الرغم من أن هذا هو العشاء مثال بسيط والفرز
الصافي الذي غبي هو قطعة من نص وامض،
انها ذلك النوع من الفكر العملية التي يجب أن نفكر -
يكون التفكير لا بالضرورة الأولى
الكتابة السلبي شيء للمشروع المقبلة
ولكن بالتأكيد كما كنت تكرار مع المستشار الخاص بك أو معي
واجتماعات فريقك أو كنت مجرد استعراض كود زملائك في الفريق
حول تشديد الامور، أليس كذلك؟
بعد كل شيء، وانهم أقل -
وعدد أقل من الأسطر من التعليمات البرمجية لديك في نهاية المطاف
من الناحية النظرية على أقل البق لك من المحتمل أن تكون دعوة
لأن هناك ببساطة أقل رمز لخبط مع.
حسنا.
لذلك، وزوجين من الوجبات السريعة.
وظائف لامدا، وظائف المجهول،
وكثير منها لك شهدت قبل
ثم أيضا مجرد تشديد الامور مع مكتبة
مثل مسج في هذا قضية معينة.
حسنا.
أي أسئلة؟
دعونا نفعل الآخر العميل الجانب الجانب هنا،
في شكل الصفر لدينا هذا الأثر الصافي.
شكل سوبر بسيطة وعلى ما يبدو إذا حاولت انقر هنا تسجيل،
في البداية يقول لي أنت مسجلة، حسنا، لا حقا.
حسنا، لماذا؟
كذلك، وهنا شكل 0.html رمز صغيرة جدا،
لا على الإطلاق، وجافا سكريبت انها تماما نوع وهمية
من حيث الشكل لأن العمل القيمة هي registered.html
وهو ما يعني مهما أنا اكتب في هذا النموذج،
أين هو ذاهب ل يتم إرسالها على الخادم؟
نعم. لذلك، لregistered.html الذي هو واضح ملف HTML
وهو لذلك ثابت الملف الذي لا يوجد لديه وسيلة
اتخاذ إدخال المستخدم على افتراض ليس هناك شفرة جافا سكريبت
جزءا لا يتجزأ من أن هذا أبحث في URL
لذلك هذا هو تماما على NOOP و أن لا شيء سيحدث
مع البيانات المقدمة، ولكن تستطيع أن ترى هيكل
من نموذج HTML5 بسيطة الى حد كبير
الذي يحتوي على كلمة المرور قليلة، أنواع قليلة المدخلات.
لذلك، دعونا الواقع الآن إضافة بعض تدقيق الأخطاء
ونرى كيف قد تحسين هذه.
لذلك، وهنا هو نوع من الفقراء طريقة الرجل من تنفيذ هذا
وانها نوع من قطعة سيئة من التعليمات البرمجية.
لذلك، دعونا أولا التمرير إلى أسفل
لمعرفة ما هو نفس وما هو مختلف.
الشيء الوحيد مختلفة الآن بين هذا
والنسخة السابقة التي اعطيت شكل وهوية
من "التسجيل" يمكن كان لديهم أي شيء أريد
ولكن من المفترض أن تكون فريد التعرف حتى هذا ليس
الضرورة القصوى لأنه إذا كان الصفحة على شكل واحد فقط بالتأكيد أنا
يمكن العثور عليه مع واحدة من أساليب محدد مسج ل.
ولكن هذه الطريقة تجعل فقط أكثر حتمية.
لذلك، إذا ذهبت الآن لبلدي النصي علامة، لاحظ ما يلي،
متساوين window.onload وظيفة مجهول.
الأمر كذلك، فما هو هذا تفعل؟
لذلك، قد تذكرون أنه في البرمجة من جانب العميل -
جافا سكريبت صفحات HTML بدلا والأحداث المختلفة المرتبطة
مع العناصر، والنقر وتقديم والتركيز
وعدم وضوح وغيرها من مثل هذه الأحداث التي يمكن أن يحدث
كمستخدم عادة يتفاعل مع الصفحة،
window.onload تفعل ما تقول.
على النوافذ التحميل بأكملها
ذلك مرة واحدة وكانت كل الصور تحميلها مرة واحدة كل الملفات و
تم تحميلها مرة واحدة و تم تحميل الصفحة،
القيام التعليمة البرمجية التالية، و لاحظ إذا كان يمكنني أن أتحول إلى أسفل
هذا الأسلوب، لاحظ أن لا توجد قوسين
بعد متعرج وهو يقول
أنني لا المنفذة هذه الوظيفة حتى الآن هنا،
المتصفح هو ذاهب لتنفيذ بالنسبة لي عندما تقرر
أن الصفحة قد تم تحميله.
لذلك، دعونا نرى ما فعلناه،
document.getElementById تسجيل
بحيث يعطيني فقط إشارة إلى العقدة
في شجرة وهذا من لديه معرف التسجيل.
والآن، انا ذاهب الى تسجيل معالج حدث آخر
عن طريق القيام form.onsubmit يحصل هذه الوظيفة المجهول
وهو ما يعني ما يلي يجب تنفيذ التعليمات البرمجية كلما
يقدم هذا النموذج.
الآن، أكثر من هذا هو مجرد نوع من المنطق مملة.
لذلك، إذا كانت قيمة لل حقل البريد الإلكتروني في النموذج
"لا شيء" ثم يجب عليك تقديم عنوان البريد الإلكتروني الخاص بك،
كنت الصراخ المستخدم مع تنبيه ثم عودة كاذبة.
ثم لدي مجموعة من الشيكات الأخرى،
الشيكات لكلمة السر،
الشيكات إذا كان كلمات السر هي نفسها،
الشيكات إذا كان اتفاق يتم فحص خانة الاختيار أم لا
وأنا فقط الصراخ للمستخدم إن وجدت
من تلك التجارب تفشل في الواقع.
وهكذا، وهنا مثال حتى على الرغم من انها مفتعلة قليلا
هنا حقيقة أن أنا باستخدام يساوي، يساوي، يساوي،
يعني أن المستخدم لا يمكن محاولة لخداع لي
عن طريق كتابة ما في القيمة.
أو بالأحرى أنا حقا التحقق من وجود
من سلسلة فارغة، المستخدم لم كتبته أي شيء حتى الآن.
إذا كان المستخدم بكتابتها في حرفيا الصفر،
"صفر" يحتمل أن يكون الخلط بينه وبين سلسلة فارغة.
وأنا أقول انها نوع من هنا لا معنى لها
لأن من الواضح حتى الصفر ليس عنوان بريد إلكتروني.
ولكن إذا كان هذا أكثر الحقل عامة مثل حقل نص
أو اسما أو وصفا أو شيء تريد أن نقدر ل
وانها ليست بالضرورة يكون بناء جملة
أن يكون عنوان البريد الإلكتروني، المستخدم يمكن أن اكتب شيئا مثل الصفر
ومرة أخرى حالة الزاوية ولكن هذا لماذا عادة فحص أنواع و
شيء مفيد.
كنت تريد التحقق حقا ل المستخدم بعد شيء كتبته
في هذا المجال.
لذلك، ماذا يحدث إذا لا شيء من تلك التجارب تفشل، حسنا،
العودة الحقيقية داخل من معالج الحدث
مثل onsubmit يعني مجرد السماح السلوك الأصلي الواقع
وبالتالي فإن نشر سوف تحصل على قدم النموذج.
وهذا هو السبب عندما كنت أخيرا نقر يقدم قبل حصلت
من خلال لregister.html و إذا فعلت ذلك الآن، اشعار،
أحصل على صرخ في وإذا كنت لا تقديم عنوان البريد الإلكتروني
وأستطيع أن اكتب في malan@harvard.edu،
قرمزي [الصوتية]، قرمزي، والتحقق من المربع،
والآن تسجيل و يقول لي، مرة أخرى،
كنت مسجل أو ليس حقا.
حسنا.
لذلك، دعونا تنظيف هذا مجرد قليلا ثم الانتقال
لأجدد جديدة الاشياء جانب الخادم.
لذلك، إذا ذهبت إلى شكل 2.html، لاحظت وجود عدد قليل من الأشياء.
لذلك، واحد، احضرت مسج مرة أخرى في مزيج
لذلك هناك مرة أخرى هو هذه علامة الدولار
والآن أنا باستخدام بعض الأساليب مسج.
لذلك، أولا، ما هو عن علامة الدولار هذا
خاص جدا هنا؟
ما هو الدولار الذي تغلب عليه اسهم في معظم أي رمز مسج؟
نعم.
[ملاحظة غير مسموع]
موافق. لذلك، فإن وظيفة علامة الدولار يذهب من خلال DOM أبحث
عن شيء مع هذا خاص محدد CSS.
لذلك، صحيح ولكن تقريبا دقيقة جدا.
هذا هو ما يحدث عند تمرير في سلسلة
كما في هذه الحالة، ولكنك لا دائما لتمرير في سلسلة.
في الواقع، مثال على ذلك، وجدا السطر الأول هنا هو هذه ليست
CSS محدد، وأنا يمر في وظيفة لامدا.
لذلك، وأكثر عموما - لذلك، إجابة جيدة ولكن دقيقة جدا.
بشكل أعم، ما هو تمثل علامة الدولار؟
مسج فقط >>.
نعم >>. لذلك، فقط مسج أو انها مجرد وظيفة
قبل بضع سنوات أن الرجل كتب وغيرهم من الناس لديهم
تعزيز منذ ذلك حرفيا من قبل ما يسمى الافتراضي -
عفوا، ويسمى مسج.
انها مجرد - فإنه يتحول على عكس الكثير من
من علامة الدولار لغات هي رمز صالحة تماما للاستخدام
في اسم متغير في حين
في علامة الدولار PHP ومن الواضح أن معنى خاص
ولكن في مثل جافا سكريبت في بعض اللغات، علامة الدولار
وتؤكد وأخرى من هذا القبيل أحرف خاصة شرعي تماما
لاستخدامها في الرمز الخاص بك أسماء المتغيرات.
لذلك، قرر شخص ما فقط ذلك، كنت تعرف لماذا؟
انها سوف تكون مملة جدا
لجعل العالم كله اكتب مسج في كل وقت،
اسمحوا لي نوع من زرع حصة في الأرض ويقول:
"سوف هذه المكتبة استخدام علامة الدولار ".
في واقع الأمر، وهذا لا ترفع خطر
أن شخصا آخر بوقاحة يتم الانتقال إلى استخدام علامة الدولار
لله أو لها ولكن المكتبة هناك طرق لضمان نوع من
أنه عند استخدام الدولار التوقيع عليه خرائط لمسج
لأنه يمكنك معرفة ما إذا لقد تم بالفعل تعيينه
إلى شيء آخر أساسا.
حسنا.
لذلك، وهذا هو كل ما و، وليس هناك السحر.
انها مجرد مثير يبحث قطعة من الجملة التي هي لطيفة
وسريعة وسهلة للكتابة.
لذلك، فإن ما يحدث عند اكتب علامة الدولار PAREN مفتوحة
ثم وظيفة مجهول.
كذلك، اتضح أن هذا هو تدوين اختزال الواقع
للمستند نقطة PAREN مفتوحة جاهزة.
لذلك، لاحظت كما سينثيا في وقت سابق، وجدنا بالفعل واحدة
حالة الزاوية.
إذا كنت تمر فقط في وظيفة امدا،
تأثير الدولار علامة يختلف قليلا.
في الواقع، ما يحدث حقا هو أنه يعادل هذا،
يمر في اشارة الى كائن المستند العالمية
وهذا هو تماما مثل العالمي الكائن النافذة
والتي تمنحك بعض وظائف خاصة
الذي يؤثر على صفحة كاملة أو المتصفح ويتحول
إلى أن المستند عند كنت ألفه مع مسج،
مسج يدرك أساسا، أوه، هذا هو مرجع
لذلك الكائن ثيقة خاصة،
اسمحوا لي أن تسجل الآن معالج الأحداث دعا استعداد
وهي ليست أصلية جافا سكريبت أو DOM ذات الصلة.
هو على استعداد مسج الشيء الذي يقول
عندما تكون الصفحة قد تحميل كل عناصر HTML
ولكن لم يتم تحميل بالضرورة، كل من CSS والصور
وملفات جافا سكريبت و ملفات فلاش ويحب.
لذلك، انها خطوة قبل على الحمل ثم المضي قدما
وتنفيذ ما يلي.
والصاعد من استخدام على استعداد الوسائل هو أنه يمكنك، كما تعلمون،
أن جميع العناصر في DOM الخاص بك،
كل من تعريف فريد الامور مع معرفات، كانت موجودة حتى
إذا كانت الصفحة، محتوياته لا تزال التحميل والتحميل
وكان لديك بعض الرموز كسر لحظة
أو صفحة بيضاء في الخلفية.
نعم.
ماذا سيحدث >> إذا [غير مسموع]؟
>> سبيل المثال الكمال، سؤال الكمال.
لذلك، دعونا نرى ما اذا كنا نستطيع محاكاة هذا الآن.
لذلك، اسمحوا لي أن تمضي قدما وحذف هذا خطين هنا ثم
دون أن يكلف نفسه عناء إصلاح المسافة البادئة، اسمحوا لي أن المضي قدما
وحذف هذه إلى هنا - عفوا، هذا واحد هنا.
والآن، اسمحوا لي أن يذهب أكثر إلى الصفحة، انتقل إلى النموذج 2.html ونوع
في السجل، لا شيء يبدو ل يحدث، دعنا نقول، لماذا كان ذلك،
دعونا نمضي قدما وفتح يصل المفتش كروم،
فتح وحدة التحكم لمجرد أن نرى إذا كان أي شيء يحدث هنا، والآن،
تسجيل، لا يزال شيئا.
لذلك، هو رمز بناء جملة غرامة
لذلك أنا لا نرى أي رسائل الخطأ الحمراء،
ولكن ما بشكل واضح لا يحدث؟
أيا من قانون بلدي هو الحق، انها لا تعمل لذلك لا شيء
رموز بلدي ويبدو أن تنفيذ، لذلك لماذا هذا؟
كذلك، وجافا سكريبت والمتصفحات تنفيذ أكثر عموما
محتويات صفحة الويب، وأعلى إلى الأسفل، من اليسار إلى اليمين.
والمشكلة هي ذلك لان الجزء العلوي
هذه الصفحة تمت HTML ثم يتوجه ثم النصي النصي ثم آخر،
هذا هو الذهاب الى الحصول على تنفيذها قبل ما هو حتى جاهزة،
أو حتى موجود في شجرة التمثيل من الصفحة.
النموذج نفسه، ولا حتى وجود الجسم في هذه المرحلة.
لذلك، مسج ذكي بما فيه الكفاية مع التحقق من الخطأ انها
أنه إذا كان هناك أي عنصر مع المعرف الفريد من التسجيل،
انها ليست الذهاب الى إنقاذ عليك
ومجرد تحريك بعض وحدة التحكم خطأ وكسر صفحة كاملة،
انها تسير لتجاهل بصمت لك، ولكن السبب أن أيا
من هذا القانون ينفذ من أي وقت مضى و
لأنه عندما يكون لديك تسجيل هذا يقدم معالج،
لم يكن هناك أي عنصر لإرفاقه.
لذلك، انها نوع من أي مرجع هناك.
لذلك، من خلال تحديد بدلا من ذلك، الانتظار حتى تحميل سن
إذا فعلنا window.onload الشيء الذي هو نوع
من الطريق المدرسة القديمة لعمل أو طريقة أكثر جنسية مسج
مثل هذا، ما في وسعنا أقول ذلك الانتظار حتى جميع
من هذه العلامات HTML ديك لذلك تم تحليل أنه حتى
إذا لم يتم تحميل الصور، في الأقل هذا هو عقدة في شجرة،
ثم مسج يمكن ضمان أن كل شيء هناك.
نعم.
[ملاحظة غير مسموع]
نعم، جيد، نعم على الاطلاق.
مع ذلك، فإن حل آخر ل هذا، إذا كنت لم تستخدم هذا
أو لم تذكر أن هذا موجودا،
هل يمكن أن تتحرك على الاطلاق كل هذا إلى أسفل
من صفحة الويب، داخل ولكن لا يزال الجسم شكل أدناه
والتي من شأنها أيضا حل هذه المشكلة.
انها مجرد عادة تعتبر ممارسة سيئة.
انها قليلا فوضوي وقذرة خصيصا
اذا واصلتم التشويش كل شيء إلى أسفل الصفحة،
وخاصة عندما أكون حفظ أشياء بسيطة من خلال وضع كل
من قانون بلدي داخل من صفحة HTML
عندما بالطبع يمكنك بالتأكيد تحصل في العادة
من العوملة بها إلى ملف منفصل
وعند هذه النقطة أنه من الجيد فقط
لمركزة الملفات في الرأس.
إلا أن هناك الثمن الذي تدفعه
عن طريق وضع جافا سكريبت أصول أخرى مثل ملفات CSS
في رأس الصفحة، ما هو خطر أن تقوم بتشغيل؟
أبطأ >> تحميل الصفحة.
أبطأ >> تحميل الصفحات، لماذا؟
>> لأننا نحاول لتحميل كافة المكتبات
قبل [غير مسموع].
>> بالضبط لأن المتصفحات قراءة رمز أعلى إلى أسفل،
من اليسار إلى اليمين إذا جوجل تحليلات بطيئة
أو مسج CDN بطيء أو API الفيسبوك بطيء
وهذا الملف معلقة فقط يحتمل أن تكون تبعا
على كيفية تحميل هذا الملف، و صفحة كاملة يمكن أن تظهر معطلا.
وإذا كنت ترى هذا الكثير بصراحة
على مواقع الانترنت لديهم الكثير إعلانات جودة منخفضة
عليها، ونحن واحدة فقط بطيئة أو موقع اسقطت يمكن أن يتعطل صفحة
لبعض لأجل غير مسمى عدد الثواني
حتى النهاية المتصفح نأمل مرات من أصل على ذلك
ويظهر ثم ل بقية الصفحة.
لذلك، إذا كنت قد استخدمت من أي وقت مضى مثل في الفيسبوك، مثل زر،
في صفحة الويب الخاصة بك، واسمحوا لي نرى ما اذا كان يمكنني العثور على هذا
دون الحاجة إلى تسجيل الدخول هنا.
لذلك، وإذا ذهبت إلى مثل زر الفيسبوك ل
وانقر فوق رمز الحصول، اللعنة،
دعونا نرى ما اذا كنا نستطيع العثور على سبيل المثال،
بالتأكيد شخص قد نشرت هذا.
[وقفة]
سأعطيك في بضع ثانية إذا كنا لا نرى هذا.
الفيسبوك asynch - OK.
لذلك، وهذا هو رمز وإلا لقد تغيرت في الآونة الأخيرة
أن الواقع الفيسبوك توصي التي تستخدمها
لتحميل المكتبة الخاصة ويقترح في الواقع
التي وضعت في هذا الجسم من الصفحة الخاصة بك.
لذا، تنصح الفيسبوك خلق نوع من الغباء DIV
التي لديها فقط معرف فريد مثل هذا، ثم لديك علامة النصي
وكل هذا التعقيد أساسا بما يلي
وأنها لا تستخدم أي مسج لأنها لا تريد
لنفترض أي دولة أخرى التبعيات،
اسمحوا لي أن نقل هذا ما يزيد قليلا قليلا.
لذلك، لاحظ لديهم وظيفة مجهول هنا،
أكثر على ذلك في مجرد لحظة،
انهم ثم استخدام document.createElement،
انهم خلق عنصر DOM، هذا هو مثل malloc إذا جاز التعبير
حيث قيمة البطاقة هي من نوع النصي، ثم انها تحدد
أن السمة المتزامن تلك العلامة يجري
ليكون صحيحا ثم ان تمضي قدما ومعرفة ما عنوان URL
من جافا سكريبت الفيسبوك و وينبغي أن يكون
وهذا هو مجرد وسيلة الهوى
من التدقيق ينبغي أن يكون المجين البشري أو HDPS.
ثم أخيرا، كنت تلاحظ ما يفعل الفيسبوك،
أنها تحصل على عقدة DOM التي وجود هوية من الجذر الفيسبوك
وهو ما قالوه لك لوضعها في الصفحة
وبعد ذلك إلحاق الطفل لذلك من تأثير كل هذا هو
إلى نوع من حقن حيوي علامة نصي جديد في صفحتك
كطفل من DIV التي إدراج هناك حتى أن بقية
من حسن الحظ تحميل الصفحة
ثم هذا الرمز في الواقع يحصل على تحميل بشكل غير متزامن.
لذلك، أساسا بعد حقيقة وأنا المؤجلة ذكر
وظيفة مجهول،
ما هذا غير تقليدي بناء الجملة في اشارة الى هنا
عندما يكون لدي وظيفة ليس فقط فتح PAREN، PAREN قريبة
ثم الأقواس المتعرجة، لماذا PAREN مفتوحة هنا
ثم وثيقة مفتوحة، على مقربة PAREN هناك، ما هذا القيام؟
>> [غير مسموع] تحديد ومن ثم تنفيذ؟
>> بالضبط، انها تعريف وظيفة وهو مجهول
ولكن مجرد تحديد وظيفة،
بالطبع لا يتم تنفيذ وظيفة حتى كنت اسميها
بالاسم، ولكن بالطبع هذا هي وظيفة مجهول
لذلك لا يمكن أن يطلق عليه بالاسم ولكن يمكنك
في جافا سكريبت التنفيذ الفعلي لل وظيفة مجهول فقط
عن طريق التغليف في كل شيء بين قوسين كما فعلنا
مع هذا وهذا PAREN PAREN هنا ومن ثم تحديد
إلى نهاية الدالة PAREN مفتوحة، PAREN وثيق،
إذا كنت لا تريد أن تمر عليه أي حجج.
ولكن هذا يبدو نوعا من الغباء،
مثل لماذا هذا إضافية تعقيد النحوية
أن معظم الناس لا يبدو الاعتراف، ما هي القيمة
التفاف تلك ثلاثة أسطر من التعليمات البرمجية
في دالة المجهول في هذا السبيل.
نعم.
>> لتجنب الكتابة فوق قيمة في [غير مسموع].
>> بالضبط، لتجنب الكتابة متغير
في صفحة القائمة، أليس كذلك؟
الفيسبوك هو إلى حد ما قررت بوقاحة،
انهم ذاهبون الى استخدام متغير E، فمن المحتمل جدا
أن كنت أنت أو أي شخص باستخدام على الفيسبوك مثل زر
أو أيا كان غيرها من المكونات الاجتماعية
في ديه متغير ودعا في مكان ما E. لذا،
عن طريق التغليف جميع من التعليمات البرمجية الخاصة بهم داخل
هذه الوظيفة مجهول، فإنها يكون أساسا نطاقها الخاصة
أن لا خطر clobbering أي المتغيرات الحالية.
لذلك، وهذا هو أيضا في الواقع نموذج شائع جدا،
خصوصا عند الكتابة رمز المكتبة
أو عند نفسك لا تريد فوضى الفضاء اسمك
مع المتغيرات الأخرى التي تريد القيمة للعيش
ويموت بمجرد خروج أن كتلة من التعليمات البرمجية،
هذا هو أسلوب لطيف في جافا سكريبت.
حسنا.
لذلك، ثم العودة إلى هذا المثال هنا، كل ما قمت به في النهاية
مع هذا المثال هو تنظيف فقط حتى التعليمات البرمجية.
لذلك، فإنه لا يزال حصلت على كله حفنة من المفاتيح، ومجموعة كاملة
الظروف هنا، ولكن لاحظت وجود شيء من بناء الجملة،
هذا بالوصول إلى عقدة DOM مع تسجيل معرف فريد،
الوسائل الفضاء ننظر الآن ل سليل تلك العقدة،
تجد أنه إذا كان من نوع المدخلات وحتى ذلك الحين
إذا كنت لم أر هذا من قبل، هل يمكن أن نعرف
أن هذا يعني فقط ايجاد مع العلامة المدخلات،
عناصر المدخلات التي تحتوي على سمة من الاسم مع قيمة
من البريد الإلكتروني، والسماح ثم موجة لي يدي في بعض
بقية ليس كل ما محفزة
ولكن في الحقيقة جملة مسج فقط لنفس العمليات.
حسنا.
ولكن ما هو ليس مهما جدا هنا هي الاشياء الجانب المتصفح
بل حقيقة أننا كان طرق أنظف وأكثر نظافة
مما يجعل من الواقع أن العمل التعليمات البرمجية.
حسنا.
أي أسئلة؟
[ملاحظة غير مسموع]
موافق. الآن الجزء الممتع.
لذلك، node.js لماذا؟
من يهتم؟
ماذا تعرف منه اليوم؟
Node.js، لماذا؟
هنري [يفترض الإملائية].
[ملاحظة غير مسموع]
إعادة البطارية؟
ما - وهذا هو الكمال شماعات الهاوية
في النصف الأخير من اليوم.
لماذا لا نذهب واتخاذ استراحة 5 دقائق هنا،
هناك نصف الحلوى آلة هناك لو تفضلتم
مثل بعض الحلوى دون وضع ربع فيه.