[Powered by Google Translate] [ندوة: مسج]
[فيبول شيخاوات، جامعة هارفارد]
[هذا CS50.] [CS50.TV]
إذا كنت بعد طول في المنزل، يمكنك الوصول فعلا الشرائح بلدي على الانترنت
من خلال الذهاب إلى هذا الرابط.
انها TjjRWj، على bit.ly.
يمكنك أيضا اذهبوا إلى عنوان URL مباشرة،
وهو cloud.cs50.net / ~ vshekhawat، الذي هو اسمي،
ومسج.
وأنا أشجع بشدة لك لمتابعة على طول إذا كنت أشاهد في المنزل،
وإذا كنت هنا، أيضا، لأن هذا هو عرض تقديمي تفاعلي جدا.
>> حتى اليوم انا ذاهب الى أن نتحدث عن مسج، والسؤال الأول هو،
ما هو مسج؟
هذا العام، وأنا أعلم يا رفاق قد لا تغطيها سكريبت
في قدر من التفصيل كما فعلنا في السنوات الماضية.
جافا سكريبت هي، أولا وقبل كل شيء، مجرد لغة من جانب العميل
الذي تستخدمه لتشغيل البرامج النصية ورمز على الجهاز الخاص بكل مستخدم.
بحيث يكون لديك خادم صفحات الويب يتيح للناس،
ولكن قد ترغب في القيام به الاشياء على الجهاز الخاص بهم،
نسأل آلة لإرسال الطلبات إلى الخادم الخاص بك كل 30 ثانية أو شيء من هذا القبيل.
يمكنك أن تفعل ذلك باستخدام جافا سكريبت.
مسج يوفر فقط المزيد من الوظائف على رأس سكريبت
أن يفعل الاشياء إضافي من جانبك.
إذا نظرتم إلى محتويات على القمة،
أن يصف بعض الاشياء التي كنت قادرا على القيام به.
ذلك العام، تم إنشاؤه في يناير كانون الثاني عام 2006.
وقد صممت لأول مرة من في أغسطس 2005.
انها كانت موجودة لبضع سنوات، وانها حقا جزء من حركة الويب 2.0 الجديد
وهذا ما جعلت من شبكة الإنترنت لامعة جدا.
انها مكتبة جافا سكريبت الأكثر استخداما على نطاق واسع.
أكثر من 19.6 مليون المواقع تستخدم ذلك، واستخدام ما زال يتزايد
وفقا لbuiltwith.com، التي، على ما يبدو، خلال العام الماضي،
لقد كان مجرد تزايد مستمر خطيا إلى حد ما.
من بين أفضل 10 ملايين المواقع، لا يزال هناك -
حوالي 40٪ منهم في الوقت الحاضر استخدام ذلك.
الفيسبوك يستخدمه، والكثير من المواقع الأخرى تستخدم حاليا.
يمكنك أن تبحث في تلك الاحصائيات الخاصة بك، إذا كنت ترغب.
ويمكن لك أن تقول انها شرعي لأنه يحتوي على الأساس و 13 أعضاء مجلس الإدارة،
جنبا إلى جنب مع فريق من 20 شخصا الذين يعملون على ذلك على أساس منتظم.
ذلك انها تستخدم على نطاق واسع جدا، لديه. URL ORG، انها نزوة،
فقد الفوائد العرضية لغيرها من الاشياء، حتى انها صفقة كبيرة.
>> لماذا يجب استخدامه؟ مسج خفيفة الوزن جدا.
وهذا يعني انها ليست ملف ضخم. يمكنك تحميل
ملف مصغر، والذي هو من دون كل المساحة البيضاء والتعليقات، وانها فقط 32 كيلو بايت.
لذلك فمن السهل أن إرم فقط على صفحة الويب الخاصة بك
وفقط لبدء استخدامه.
كما انها مكتوبة بشكل فعال جدا، لذلك لا يستغرق الكثير من -
فإنه لا تبطئ موقع الويب الخاص بك كثيرا عند استخدامه.
فإنه يتيح لك تنفيذ الأمور التي كانت غير مجدية في السابق.
هناك بعض الجوانب من وظائف،
مثل إنشاء الرسوم المتحركة، التي عادة ما تكون للغاية، من الصعب جدا القيام به.
ولكن في مسج انهم في الواقع بسيط جدا.
وهناك بعض الأشياء التي هي مزعج القيام به،
ممكن في جافا سكريبت، مثل إرسال طلب POST،
ولكن لتقوم بإرسال طلب إلى ملقم، لديك لكتابة
خمسة أو ستة أو سبعة أسطر من التعليمات البرمجية.
الآن يمكنك أن تفعل ذلك فقط في سطر واحد من التعليمات البرمجية، في مكالمة وظيفة واحدة.
حقا أن يبسط الكثير من الاشياء التي كنت تفعل.
وجميع الاطفال بارد استخدامه. قبل ذلك، أعني لي.
في قراري النهائي للمشروع العام الماضي، والذي هو news.whrb.org،
والتي هي لمحطة إذاعية، أنا خلق هذا بلوق
التي تستضيف جميع يدل على أننا قد فعلت وملفات MP3 بالنسبة لهم.
يمكنك تصفح من خلال العروض الماضية،
وانها فعلت كل ذلك باستخدام مسج. يمكن أن أقول لكم
بسبب كل هذه الرسوم المتحركة، أساسا.
حتى إذا كان لديك - إذا كنت تقوم بإنشاء وظيفة جديدة،
ترى هذه slideDowns قليلا، وهذا هو كل ذلك باستخدام مسج.
وهذا تتلاشى - حتى يتم كل هذا النوع من الاشياء باستخدام مسج،
وليس لديك لإعادة تحميل الصفحة باستمرار للتنقل في الموقع.
آخر شيء بارد أن انها مصنوعة باستخدام مسج هو هذا العرض.
أنا باستخدام هذا الشيء مفتوحة المصدر تسمى scrolldeck،
الذي كتب شخص على رأس مسج.
إذا كنت تبدو في الواقع عند المصدر، يمكنك أن ترى أن
أنهم يستخدمون هذه علامة الدولار؛ علامات الدولار
وتستخدم في مسج، للدلالة على أن وظيفة هي وظيفة مسج.
حتى انهم تعريف المجمع على رأس مسج
التي تسمح لك لتقديم عرض من هذا القبيل،
ويمكنك أن ترى أن هنا انهم بما في ذلك ملف مسج الأصلي،
وهو ما سيكون لديك لتشمل إذا أردت استخدام مسج
في المواقع الإلكترونية الخاصة بك.
>> لمس على ذلك، كيف يمكنك تثبيته؟
يمكنك اذهبوا إلى jQuery.com وتحميل الملف،
إضافته إلى دليل على الشبكة العالمية وإدراجه.
وذلك فقط على القمة، في العلامة رئيس ملف HTML الخاص بك
من ملف HTML الرئيسي الخاص بك، فقط يجب أن سطر من التعليمات البرمجية
مع الإصدار الصحيح لإصدار مسج الذي تستخدمه.
يمكنك تحميل البرنامج من خلال الذهاب الى jQuery.com،
انقر على زر "مسج تحميل،" وكنت قد حصلت عليه. هذا هو.
وفعلا، يمكننا أن نلقي نظرة على ما يبدو.
إذا نقرت على تحميل هنا، مسج هو هذا.
انها واحدة فقط ملف JavaScript كبيرة أن يفعل كل الاشياء السحر بالنسبة لك.
هذه هي النسخة مصغر، والذي هو غير قابل للقراءة على الإطلاق.
يمكنك ايضا ان ننظر في إصدار التنمية، والذي هو قابل للقراءة
ولكن لا يزال جدا، طويلة جدا.
انها الكثير من الاشياء في هناك.
يمكنك أيضا ربط إلى الإصدار غوغل استضافت منه.
بحيث سوف تسمح لك أن تعتمد فقط على جوجل لتوفير ذلك.
أنها توفر كل نسخة منه، وهي متاحة في جميع الأوقات.
لذا يمكنك الاعتماد على الأرجح على جوجل لاستضافة لانها لكم.
أو يمكنك الارتباط الخاصة أحدث إصدار مسج ل.
لديهم URL التي يتم تحديثها دائما إلى أحدث إصدار.
انها مسج-آخر، وهناك مشكلة واحدة مع ذلك،
وهو أنه إذا كان مسج المحدثة وبعض الوظائف السابقة
كانوا قد يصبح retrograded أو إهمال،
فإنه لا يجوز - بل قد تبدأ لعدم الحصول على الدعم بعد الآن.
لذلك إذا كنت أكتب موقع على شبكة الانترنت باستخدام الإصدار 1.8.2،
بواسطة الإصدار 2.7 مرة يخرج
بعض من الوظائف التي كتب لا تعمل بعد الان.
لذلك فمن الأفضل أن مجرد تحميل ملف كيلو بايت 32،
وضعه على صفحة الويب الخاصة بك، وأنها سوف تعمل إلى الأبد.
>> انا ذاهب الى المضي قدما والبدء في الحديث عن وظيفة الفعلي للمسج.
وأول شيء هو محددات. هذا هو ما كان ينظر في البداية إلى توفير مسج.
ويمكنك النقر على وثائق للنظر في
وثائق تفصيلية لمحددات انا ذاهب الى أن تغطي.
الفكرة وراء محددات هو أنه يمكنك تحديد عناصر HTML على صفحة.
العناصر على صفحة لها معرفات ودروس وجوانب تعريفية أخرى لهم.
هناك أيضا - '؛ إعادة في أوامر مختلفة.
لبعض الوقت انهم متداخلة داخل بعضها البعض.
مسج يسمح لك لإنشاء الاستعلامات البسيطة التي استرداد العناصر من الصفحة.
ثم يمكنك التعامل مع هذه العناصر باستخدام وظائف مسج،
وهو القسم التلاعب أننا سنصل إلى وقت لاحق.
يمكنك تغيير HTML، CSS تغيير،
يمكنك أيضا تحريك وإضافة وظائف التي تنشط على بعض الأحداث.
لذلك، على سبيل المثال، إذا كان هناك شيء يتم النقر، وتريد أن يحدث شيء،
يمكنك أن تفعل ذلك باستخدام مسج كذلك.
وهناك عدد كبير من الطرق لتحديد العناصر.
معظمهم لم يسبق لي استخدامها، ولكن هناك الأساسية منها،
والتي هي مهمة جدا.
عنصر محدد، على سبيل المثال، إذا كنت مجرد اختيار أي شيء
وهذا هو DIV - أنا فعلا رمز مفتوحة لعرض الشرائح هذا.
لذلك، على سبيل المثال، وهنا يكمن الشريحة الأولى.
هنا لدينا شعبة. إذا كنا فعلا تحديد كافة DIVS على الصفحة،
انها سوف تعطي فقط لنا مجموعة من جميع DIVS التي توجد في هذا الملف.
معرف محدد يتيح لك تحديد أي شيء مع هوية معينة.
حتى إذا كان هذا، على سبيل المثال، وهذا الشيء لديه معرف "ما"
وإذا فعلنا هذا مع # ما بدلا من بعض ID،
انها ستعود فقط صفيف يحتوي على عنصر واحد وهذا هو ذلك العنصر من الصفحة.
ويمكننا أيضا الجمع بين محددات بهذه الطريقة من خلال وجود
فقط حدد الأشياء مع معرفات التي هي DIVS.
لذا نعم. حدد فقط DIVS أن يكون هذا الرقم.
لفئة فقط استخدام نقطة، انها نفس الشيء مثل CSS.
يعمل سليل أيضا، لذا إذا كان لديك بعض الطبقة
وأنه قد تتداخل عناصر داخلها - لذلك، على سبيل المثال،
هناك بعض فئة ولها علامة مرساة لربط إلى صفحة أخرى،
يمكنك استخدام بناء الجملة التالي لاسترداد الرابط.
يمكنك أيضا تحديد أشياء متعددة في آن واحد؛ فقط تفصل بينهما بفاصلة،
استخدام أي محدد كنت ترغب، وسوف حدد كل منهم في آن واحد، في مجموعة واحدة.
ثم هناك أيضا ليس محدد، بحيث يمكنك تحديد كل DIVS
التي ليس لديها بعض فئة معينة.
وهذا هو مجرد وسيلة مفيدة للحصول على مقدمة لكيفية عمل هذا التحديد.
سأعرض بعض الأمثلة الملموسة في الثانية.
>> محددات المتقدمة - هذه ليست سوى أمثلة قليلة.
هناك العشرات من هذه، ولكن إذا كنت تريد تحديد كافة العلامات الصورة
في بعض العناصر، ثم على القيام بذلك تماما: صورة.
إذا كنت تريد تحديد العناصر حتى، على سبيل المثال، إذا كان هناك 20 منهم،
كنت تريد تحديد 0، 2، 4، 6 وهلم جرا،
كنت تفعل: حتى، أو يمكنك أيضا القيام به: الغريب.
هذه هي محددات الزائفة، الأمر الذي يعني أنها في الواقع حساب
كل عنصر آخر بدلا من مجرد الذهاب واختيار كل منهم.
يمكنك أيضا - يمكن لكل عنصر أيضا سمات محددة.
لذلك، على سبيل المثال، تشير class = المركز هو أيضا سمة.
لهذه العلامة مرساة، أ href، مرجع النص التشعبي، هو سمة أيضا.
بحيث يمكنك تحديد شيء يربط إلى صفحة محددة أو فقط - انها حقا عامة.
يمكنك تحديد أي شيء مع أي السمة التي ترغب.
ومن ثم، أيضا، يحتوي على السمة.
إذا كنت، على سبيل المثال، أراد لتحديد كافة العناصر والمدخلات
التي تحتوي على كلمة "تمرير" كاسم منهم،
إذا كانت صفحة لديه كتلة إدخال النص
وهذا ما يسمى ب "كلمة السر" التي تريد ان تكون طريقة واحدة يمكن أن تختار ذلك.
وهناك غيرها الكثير. يمكنك ان تمضي قدما وإلقاء نظرة على الوثائق
ونرى أمثلة محددة عن كيف يعمل.
>> والشيء التالي هو DOM التلاعب.
بعد أن حدد العناصر، ونحن سوف تريد أن تفعل فعلا الاشياء معهم.
وحتى الآن نحن لم ينظر في ذلك على الإطلاق، ولكن إذا نظرتم الى وثائق،
هناك حقا الكثير الذي يمكن أن نقوم به.
عند هذه النقطة، ونحن في طريقنا لتحديد العناصر على هذا العرض التقديمي
والتلاعب بها باستخدام مسج.
لأن هذا هو تنفيذها باستخدام مسج، لدينا إمكانية الوصول إلى مكتبة مسج،
ويمكننا استخدام تلك الوظائف ضمن هذا الرمز.
شيء واحد المفيدة التي قد لا تعرف عنه هو وحدة التحكم.
وجوجل كروم هو ما أنا باستخدام. يمكنك الضغط على ALT الأمر J
أو ALT السيطرة J لفتح وحدة التحكم.
في فايرفوكس وأعتقد أنه حان قيادة التحول K أو سيطرة التحول K.
في سفاري لديك للذهاب تغيير بعض الإعدادات.
هناك الارتباط إذا كنت ترغب في القيام بذلك، ولكن أوصي الحصول على كروم أو فايرفوكس.
لذلك دعونا فتح وحدة التحكم، انها هنا في الأسفل.
انها تسمح لك لفي الأساس مجرد فعل أي شيء تريده.
بحيث يمكنك كتابة فقط في إنشاء متغير يسمى X،
س = 5، دعونا نرى ما س + 2 هو.
حتى انك تستطيع ان تفعل شيئا مثل CS + دعونا نرى، X + 45، والتي ستكون CS50.
يمكنك أن تفعل سوى بعض الاشياء جافا سكريبت نموذجي.
ولكن يمكنك أيضا القيام مسج هنا.
>> لذلك دعونا ننظر إلى هذا الجانب الأول هنا.
ونحن في طريقنا إلى إنشاء متغير تسمى HTML والتي هي سلسلة.
أنه يحتوي على علامة الفقرة في ذلك، وهذا دعا بعض النص الجديد.
لذلك لدينا هذا HTML، انها بعض النص الجديد، في الفقرة به.
الآن نحن نريد فعلا لإضافته إلى الصفحة.
يمكنني إعداده بحيث HTML لهذه الفقرة، وهذا العنوان هنا، هو إلحاق ID.
إذا قمنا باختيار إلحاقي ID ومن ثم إلحاق إليها
المتغير HTML أنا خلقت للتو،
وسوف أضيف أن HTML في نهاية، والحق بعد هذه الفقرة العلامة.
حتى إذا فعلنا ذلك - اخترنا هذه الفقرة،
ولقد استدعاء الدالة الإلحاقي مع المتغير HTML أنا فقط واضاف،
وسوف أضيف أن النص الجديد هناك حق على الصفحة.
ويمكننا أيضا prepend، مما يعني أنه سوف يذهب من قبل، في بداية هذا العنصر.
حتى لا يكون هناك بعض النص الجديد في بداية وبعد ذلك.
أنا يمكن ان تمضي قدما وتجديد للتخلص من هذه الاشياء لقد فعلت فقط.
ولكن هذا مثال كيف يمكنك استخدام prepend وإلحاق طرق
لمعالجة الاشياء على الصفحة، وإضافة بعض HTML.
>> يمكنك أيضا تغيير الطبقات.
مرة أخرى في هذا الملف الاسلوب، لقد خلق هذا لفئة الفوز
يحتوي أحمر لون النص، بعض لون الخلفية، والظل النص.
يبدو البشعة، ولكن يمكنني في الواقع -
هذه الفقرة يتوافق مع معرف فئة.
حتى أتمكن من إضافة فئة للفوز.
أنا يمكن تنفيذ هذا في وحدة التحكم،
والتي سوف تضيف تلك الفئة، والآن يبدو البشعة، كما هو متوقع.
وCSS تلقائيا يحصل على تطبيقها على الفئات التي -
إذا كان هناك CSS لفئة، فإنه تلقائيا يحصل على تطبيقها
إذا قمت بتغيير فئة عنصر.
وبعد ذلك يمكننا إزالة فقط باستخدام فئة إزالة.
حتى إذا كان لديك بعض فئات محددة مسبقا مثل الأحمر أو ذو أهمية خاصة،
ومن ثم تريد تطبيق تلك العناصر ل،
لم يكن لديك للقيام بكل CSS التصميم في كل مرة.
يمكنك فقط إضافة فئة إلى عنصر، وبعد ذلك سوف تصبح تلقائيا -
سيبدو تلقائيا المناسبة لتلك الفئة.
يمكننا أيضا إزالة الأشياء، لذلك أنا ذاهب لتحديد كافة DIVS
على الصفحة وإزالتها.
ما أن تسير لتبدو وكأنها؟
انها تسير لتبدو وكأنها لا شيء، ولذلك لا يوجد في الواقع أي شيء اليسار.
هو ذهب العرض الذي قدمته.
يمكنني تحديث واعادتها، لحسن الحظ،
لأنه مجرد تشغيل مرة واحدة،
ولكن هذا مثال على إزالة، إذا كنت تريد أن تدمر تماما عنصر خارج الصفحة.
>> يمكنك أيضا الكتابة، وأنا ذاهب لتحديد كافة علامات الفقرة على الصفحة
وتذهب داخلها واستبدال النص أيا كان لديهم في نفوسهم
مع مجرد كلمة "اختبار".
إذا قمت بذلك، سوف تقوم باستبدال كل فقرة على الصفحة مع هذا الاختبار.
نعم. انهم استبدال جميع مع الاختبار.
لذلك هذا هو مثال على الوصول إلى النص والكتابة فوقه.
يمكنك أيضا استرداد المعلومات، وهذا هو حقا بارد لمربعات الإدخال.
إذا كان لديك مربع الإدخال أن الناس تكتب الاشياء في،
الناس تكتب الاشياء في ذلك،
هنا نختار المدخلات، أي علامة الإدخال مع نوع من النص.
في هذه الحالة، هناك مربع إدخال واحد فقط في العرض التقديمي بأكمله،
لذلك سنقوم فقط حدد أول واحد، ومن ثم فإننا ندعو الدالة Val على ذلك.
وترجع قيمة، وبالنسبة لمربع إدخال،
القيمة هي فقط كل ما يحدث أن تكون في داخله.
لذلك اذا لم نفعل ذلك، فقط بإرجاع سلسلة الاشياء.
وإذا كان لنا أن نسميها مرة أخرى بعد كتابة أكثر الاشياء، فإنه يتحول إلى المزيد من الأشياء.
هذا هو واحد طريقة رائعة للوصول إلى عناصر مربع الإدخال، ومن ثم تحقق،
هذا هو عنوان بريد إلكتروني صحيح، وهذا هو تاريخ صالح، على سبيل المثال.
يمكنك فقط استرداد الاشياء على الفور لأن الناس كتابتها،
ثم تحقق ما إذا كان ساري المفعول، وإرساله مرة أخرى إلى الخادم، تفعل أي شيء تريد مع ذلك.
وهذه هي الطريقة التي يمكنك الوصول إلى ما يدور في داخل تلك العلب.
>> يمكنك أيضا تعديل CSS مباشرة، وذلك بدلا من إضافة
فئة التي لديها بعض الخصائص المحددة مسبقا،
يمكنك إضافة فقط مهما CSS تريد أي شيء.
لذلك دعونا تحديد الجسم، والذي هو العرض التقديمي بأكمله،
واللون هو الخاصية التي تحدد ما الألوان هو النص.
إذا كنا تغييره إلى اللون الأحمر، وجميع النص في الصفحة أنتقل إلى الأحمر.
يمكننا أن نفعل شيئا مثل خلفية زرقاء اللون،
هناك نذهب؛ انها جميلة.
يمكنك أن تفعل أي شيء تريده مع هذا.
باستخدام الخاصية CSS، يمكنك تعديل حقا كيف يبدو أي شيء في أي وقت.
والشيء التالي هو الآثار.
الآثار هي في الأساس نفس الشيء مثل تعديل CSS،
لكنها في الواقع توفر بعض الرسوم المتحركة اضافية لذلك.
وذلك بدلا من مجرد عرض أو إخفاء شيء ما أو تغيير اللون،
يمكنك ان تجعل في الواقع أن الرسوم المتحركة.
وهنا الوثائق، إذا كنت تريد أن نلقي نظرة على وثائق واسعة النطاق لذلك.
ولكن انا ذاهب لتغطية أهمها.
هناك عرض وإخفاء خصائص.
إظهار / إخفاء معرف يناظر هذا المربع كله،
حتى لو كنت تخفي ذلك، فإنه سوف تختفي تماما.
ويمكنني أن تظهر مرة أخرى إذا كنت تريد أن تجعل من العودة.
وانها الظهر. ولم تختفي في الواقع،
لم أكن في الواقع إزالة من الصفحة، أنا فقط تعيين الخاصية CSS من الرؤية إلى مخفي
بحيث لا يمكنك رؤيتها بعد الآن.
هناك أيضا الانزلاق صعودا والانزلاق إلى أسفل، وهذا يسمح لك أن يكون هذا التأثير.
فإنه ينزلق حتى تختفي، وبعد ذلك يختفي
يمكنك الانزلاق إلى أسفل لجعله يعود. والآن حان الظهر.
هناك أيضا هذا التأثير تتلاشى، والتي - يتوافق ID تتلاشى إلى هذا المربع.
إذا أنا تتلاشى بها، ثم أنها سوف تختفي ببطء.
يمكنني أيضا أن تتلاشى في ذلك، وأنه سوف يعود.
يمكنك أيضا القيام تتلاشى ل، التي تقتصر على وظيفة تتلاشى.
هل يمكن أن يكون لتتلاشى أي غموض المحددة التي تريد.
لذلك إذا كنت تتلاشى ببطء إلى 0.5، وأنها سوف تصبح مرئية نصف.
يمكنني جعله يذهب إلى 0.1، والعودة إلى 1 لجعله مرئيا بالكامل مرة أخرى.
هذا مجرد رسوم متحركة أخرى التي يمكنك القيام به.
>> هناك أيضا آثار تبديل.
لذلك أنا ذاهب لتحديد هوية تبديل، والتي تتطابق مع هذا المربع،
وعلى هذا DIV يمكنك استدعاء تبديل، وإذا انها مرئية أنها سوف تصبح غير مرئية،
لو كان غير مرئي وسوف يصبح مرئيا مرة أخرى.
لذلك أنا فقط ودعا هذه وظيفة تبديل مرتين، وكان أول واحد
نفس الشيء مثل إخفاء، كانت المكالمة الثانية نفس الشيء كعرض.
ويمكنك أيضا أن تفعل هذا مع تبديل تتلاشى،
الذي يفعل الشيء نفسه، إلا أنها في الواقع يتلاشى.
والشيء نفسه مع تبديل الشريحة.
هناك آثار بالسلاسل أيضا، وهو ما يعني
إذا قمت بتحديد عنصر ومجرد دعوة مجموعة من أساليب الرسوم المتحركة على ذلك،
إذا أردت أن تتلاشى، ثم تنزلق،
ومن ثم إخفاء ثم تتلاشى في، انها لن تفعل لهم في صف واحد.
اختفى ذلك، عاد - لسبب ما، لم إخفاء لن يحدث.
دعونا نحاول ذلك. نعم، لذلك تلاشى وبعد ذلك انزلق بعيدا.
وهناك الكثير أكثر من ذلك. يمكنك استخدام وظيفة الأرواح
لإنشاء الرسوم المتحركة الخاصة بك، والتي هي معقدة إلى حد ما،
ولكنه يوفر لك مع التمدد لانهائية.
يمكنك جعل أي نوع من الرسوم المتحركة التي تريدها.
يمكنك أيضا استخدام طابور الاصطفاف في طوابير الرسوم المتحركة متعددة في وقت واحد.
لذلك إذا كنت تريد شيئا أن يطير عبر الصفحة،
الشريحة من الناحية اليمنى أعلى إلى أسفل اليسار، يمكنك أن تفعل ذلك،
ويكون مجرد حفنة من الإجراءات تسير واحدا بعد الآخر.
>> والشيء التالي ونحن في طريقنا للحديث عنه هو الأحداث.
الأحداث تسمح لك - حتى الآن، لقد تم للتو كتابة الأشياء في وحدة التحكم
وهذا هو أحد السبل لتحقيق ذلك،
ولكن على صفحة الفعلي، كنت لن تكون قادرة على
جعل الأشياء نوع المستخدم في وحدة التحكم.
تريد أن يحدث شيء تلقائيا.
لذلك، تحتاج إلى استخدام الأحداث التي تنشط على بعض معينة يحدث حدث.
يمكنك التحقق من وثائق للحصول على التفاصيل الكاملة.
لذلك دعونا نرى. نحن نريد لإخفاء أو إظهار مربع،
ولكن الآن هذا الزر لا يفعل أي شيء لأنني لم تنفذ حتى الآن.
انا ذاهب للذهاب إلى صفحة HTML الفعلية.
وهنا الشريحة. هناك شعبة للشريحة.
أنه يحتوي على فئة من الشريحة.
هناك النص. الآن، هناك في هذه الخانة وزر مربع.
كيف كنا في الواقع جعل هذا تختفي؟
بادئ ذي بدء، دعونا كتابة دالة الذي يجعل ID مربع تختفي.
هذا هو بناء الجملة من أجل فونأيشن، دعونا فقط الذي يطلق عليه hideTheBox.
لأنها لا تأخذ أي حجج، لأنه لا توجد حجج الواجب اتخاذها.
يمكننا تحديد رقم مربع.
وذلك باستخدام مسج حدد، يمكننا تحديد رقم مربع،
ثم جعل مجرد أنها تختفي.
دعونا جعلها تتلاشى.
إذا ركضنا هذه الوظيفة في وحدة تحكم الفعلية،
يمكننا تعريف هذه الوظيفة، ونحن يمكن أن نطلق hideTheBox، وأنه يعمل.
لكننا نريد أن يحدث ذلك عند الضغط على زر في الواقع.
للقيام بذلك، لدينا لاستخدام هذا الحدث.
لربط حدث لبعض زر معين أو بعض الإجراءات يحدث،
لدينا لتحديد العنصر أن الحدث سوف يؤدي -
أو التي من شأنها أن تؤدي إلى حدث، آسف.
>> أولا حتى من كل شيء، دعونا حدد زر المربع معرف
لأن هذا هو زر، والآن، لهذا الزر،
نحن نريد لإنشاء الصور المتحركة عندما يتم النقر فوقه.
ولذلك لا يوجد هذا ضغطة وظيفة.
انها تسمح لك لربط وظيفة أخرى لذلك.
هذه الدالة تأخذ دالة أخرى كوسيطة
نحن يمكن أن تمر في وظيفة hideTheBox،
وكلما تم النقر على هذا الزر، وسوف أن وظيفة تنفيذ تلقائيا.
ولذلك فإن هذا سوف تعمل إذا ننقذ هذا، وأنا سوف تحديث،
و- ثانية واحدة، وأنا آسف.
اسمحوا لي أن إصلاح هذه بسرعة حقا.
حسنا. هناك نذهب. وحتى الآن مربع تختفي عندما كنا انقر فوق الزر.
ويمكننا أيضا تغيير هذا إلى fadeToggle فقط،
تغييره فقط لإخفاء أو إظهار مربع،
وهذا من شأنه أيضا العمل أيضا، إذا كنا تحديث.
يمكننا اخفاء ذلك، يمكننا أيضا أن تظهر عليه، والتي سوف تستمر في العمل.
شيء آخر يمكننا القيام به هو، ونحن لم يكن لديك فعلا لتعريف هذه الدالة hideTheBox
قبل أن استدعاء الدالة نقرة.
وذلك بدلا من تحديد وظيفة والدعوة hideTheBox،
ونحن في طريقنا فقط أن نسميها إذا تم النقر فوق هذا الشيء.
حتى نتمكن من تحديد ذلك بشكل مجهول من هنا،
وهي الميزة التي سكريبت لديه.
يمكنك تعريف وظيفة؛ عادة، لقلنا وظيفة hideTheBox
مع الحجج، ولكن بدلا من ذلك، يمكننا أن نقول فقط تعمل بدون وسائط،
بدء متعرج لتحديد وظيفة،
إغلاق هذا متعرج، ومن ثم تحديد وظيفة فقط في هنا،
ضمن قوسين الأول وقوس مشاركة
التي تتوافق مع الحجج وظيفة اضغط هنا.
لذلك نحن يمر في هذه الوظيفة، ونحن يمكن نسخ هذا السطر من التعليمات البرمجية هنا،
والتي من شأنها أن تفعل الشيء نفسه بالضبط.
والآن ليس لدينا هذه الوظيفة fadeTheBox عشوائية
التي يجلس حولها دون سبب واضح.
كانت دالة معرفة مجهول، فإنه لا يكون له اسم.
فإنه سيتم تنفيذ فقط عندما نضغط على زر مربع.
منعش لذلك مرة أخرى، واحد مزيد من الوقت، ويمكنك أن ترى أنه لا يزال يعمل.
وهذه هي الطريقة التي خلق الأحداث.
>> هناك الكثير من الأحداث المختلفة التي يمكننا استخدامها.
انا ذاهب للتبديل مرة أخرى إلى استخدام وحدة التحكم لتظهر لك فقط كيف يمكن لهذه العمل.
معرفات لكل من هذه تتوافق مع كل مربع.
لذلك هذا المربع هو فوق معرف، هذا هو واحد ID مفتاح، وهذا هو واحد ID الماوس.
أكثر شيء واحد هو أن هناك وظيفة هذا العمل؛ بدلا من كتابتها في كل مرة،
أنا فعلا ذهبت إلى الأمام وتعريف هذه الدالة عمل هنا.
وهو يفعل نفس الشيء مثل وظيفة hideTheBox.
فإنه يحصل في هذه الخانة وإما يتلاشى بها أو يتلاشى فيه.
وهذا هو السبب في أننا قادرون على استخدامها هنا.
لذلك إذا وانقر على هذا فوق معرف، ونحن نريد أن نجعل مربع تختفي أو ظهور مرة أخرى.
انها نفس الشيء مثل الزر الذي كان لدينا في الشريحة الأخيرة.
الآن بعد أن نسميه، ونحن يمكن الضغط على هذا وسوف تختفي مربع،
ثم اضغط عليه مرة أخرى وسوف تعود الى الظهور مربع.
هذا هو بسيط جدا. انقر مرتين يفعل الشيء نفسه،
إلا أنه يتطلب النقر المزدوج.
لذلك إذا كنت اضغط عليه مرة واحدة واضغط عليها مرة أخرى لن يحدث شيء،
ولكن إذا كنت انقر مرتين بسرعة، وأنها سوف تختفي.
إذا كنت انقر نقرا مزدوجا مرة أخرى، وسوف يعود.
لذلك هذا هو بسيط جدا.
مدخلات لوحة المفاتيح هو نوع غريب، وأنا لا أعتقد أنه يعمل فعلا في هذا المثال
لأن مفتاح أسفل أو لأعلى مفتاح واضغط على مفتاح والإجراءات الرئيسية الأخرى
تنشيط لا يهم ما العنصر الذي ربطه.
على سبيل المثال، حتى لو كنت ملزمة مفتاح وصولا الى الجسم أو أي شيء آخر تماما،
ثم فإنه لا يزال تنشيط بغض النظر - انها ليست محددة.
أنا لا يجب أن النقر على هذا والضغط على المفتاح لجعل أي شيء تختفي.
سيتم تفعيلها بغض النظر عما عنصر أنا فيه حاليا.
وبالتالي فإن هذه لا تعمل فعلا في هذا المثال
لأنها لا تعرفني كما يدخل مدخلات لوحة المفاتيح مدخلات شعبة.
>> ولكن إذا نظرتم إلى إجراءات الماوس،
أول واحد هو تحوم، وأنه يمكن القيام ببعض من هذه باستخدام CSS.
إذا كنت تستخدم CSS، يمكنك إنشاء بحيث إذا كنت تحوم فوق شيء،
ثم التغييرات اسلوبه.
ولكن باستخدام مسج يمكنك تغيير أنماط من الأشياء الأخرى أيضا.
لذلك، على سبيل المثال، ونحن في طريقنا إلى استدعاء الإجراء إذا كنا تحوم فوق هذا DIV.
وهذا يعني إذا كنا تحوم فوقه، ثم مربع سوف تختفي.
وإذا انتقلنا بعيدا عن ذلك، سوف مربع تعود الى الظهور.
إذا نحن نسمي هذا وتحوم فوقها، مربع لا تختفي،
وحالما ابتعدنا، لأنه يأتي مرة أخرى.
إذا كنا استدعاء هذه الدالة تحوم على معرف الماوس،
والتي تتطابق مع هذا المربع، ثم إذا كنا تحوم فوق منطقة الجزاء،
ثم مربع سوف تختفي في الواقع - فإنه يجري غير تقليدي الآن، ولكن -
إذا نحن نتحرك بعيدا عن ذلك، وسوف تعود الى الظهور. الحق الآن حان الوراء لسبب ما.
الماوس دخول وظائف تحرك الماوس هي مشابهة الى حد ما، ولكنها مختلفة قليلا.
الماوس دخول ينشط فقط عندما يدخل الفأر مربع، كما هو متوقع.
حتى إذا كنت تنتقل إلى ذلك، فإنه سوف تختفي.
ولكنها لن تعود الى الظهور عند الابتعاد؛ سيكون لديك للتحرك مرة أخرى إلى ذلك من أجل أن أعود.
هناك أيضا وظيفة تحرك الماوس، الذي سيتم تنشيط
كلما كان الماوس حتى الوقت الحاضر في منطقة الجزاء.
لذلك سوف تبقي فقط على الذهاب، ويتلاشى داخل وخارج.
وانها في الواقع قطع الأشجار - يبدو انها مجرد يتلاشى داخل وخارج،
ولكنها في الواقع تسجيل الكثير من الإجراءات من هذا،
لذلك عند الابتعاد أنها سوف تبقي مجرد الذهاب لأنه تسجيل مثل آلاف منهم.
ربما ليس من ألف. ربما خمسة.
ذلك بتسجيل أكثر من ذلك.
وهذه النقطة هي، كافة الإجراءات الماوس، وهناك الكثير منهم.
يمكنك أن تقرأ حتى على بعضها الآخر، ولكنها جميعا مختلفة بعض الشيء،
ويمكنك اختيار أي واحد التي تحتاج إليها
لأيهما محددة الغرض كنت تحاول القيام به.
>> والشيء التالي وأنا بصدد الحديث عنه هو AJAX.
AJAX، وأنا أعلم أننا لا تغطي الجافا سكربت في قدر عمق هذا العام،
لذلك أنا ذاهب لمجرد الحديث عن AJAX بشكل عام لمدة دقيقة.
AJAX لتقف على جافا سكريبت غير المتزامنة و XML.
انها في الاساس، على سبيل المثال، عندما كنت في الفيسبوك وأنه يدفع لك والإعلام،
ذلك لأن AJAX يعمل على متصفح الويب الخاص بك.
كل بضع ثوان متصفح الويب الخاص بك في الواقع
الذهاب إلى خوادم الفيسبوك، ويطلب منهم، هل لديك أي شيء جديد بالنسبة لي،
وبعد ذلك يعود لك.
هذا يسمح لك لإرسال الطلبات إلى الخادم
دون الحاجة فعلا لتحميل الصفحة.
في العادة لذلك، إذا كنت فقط باستخدام PHP وقاعدة بيانات،
لديك لتحديث الصفحة قبل أن تتمكن من الحصول على معلومات جديدة من الخادم.
ولكن باستخدام AJAX، يمكنك سحب لتلك المعلومات الجديدة باستمرار،
أو سحب لأنه عند النقر فوق زر أو أي شيء من هذا القبيل.
ولذلك فإن هذا يسمح لنا بأن نرسل الطلبات دون إعادة تحميل الصفحة،
ويمكننا استخدام إما GET أو POST طلبات.
>> طلبات GET هي، على سبيل المثال، إذا كنت للGoogle.com
والقيام س = اختبار. وهذا ما منحهم اختبار الاستعلام.
وهذا طلب GET لأنه يمر في تلك المعلمات إلى عنوان URL نفسه.
طلب POST الأمر كما لو كنت ترسل لهم عن طريق آخر.
انها مثل وضعه في رسالة وشحنه قبالة لهم،
لكنها لا ترى في الواقع محتويات. انهم غير مرئية في URL.
لا يمكنك كتابة مباشرة في، لديك لإرساله سرا تقريبا.
انها في وظيفة.
ولكن باستخدام مسج، يمكنك القيام GET و POST طلبات
بسهولة أكبر بكثير مما كنت عادة يمكن باستخدام جافا سكريبت عادي فقط.
يمكنك الاستعلام باستخدام واجهات برمجة التطبيقات طلبات GET، ويمكنك أيضا التحقق من معلومات تسجيل الدخول.
في الصفحة التالية، وأنا خلقت هذا، والذي يسأل: "ما لتناول طعام الغداء؟"
باستخدام الغذاء API هارفارد، لذلك دعونا سحب ما يصل.
هذا هو مجرد مثال على كيفية استخدام مسج للقيام طلب GET إلى API
والحصول على المعلومات مرة أخرى من ذلك.
لذلك نحن نريد أن نرى القائمة لهذا اليوم،
ونحن نريد أن نرى ما هو لتناول طعام الغداء.
وهنا يكمن URL لإنشاء طلب GET في مسج.
يمكنك استخدام $. الحصول على وظيفة.
الوسيطة الأولى هي URL، لذلك بالضبط ما كنت الاستعلام.
ثم الحجة التالية هي وظيفة الذي ينفذ عندما طلب GET كاملة.
لذلك قمت بإرسال قبالة بعض طلب إلى الخادم، انتظر حتى أعود.
عندما لا تأتي مرة أخرى، وأنت تسير إلى اتخاذ بعض الإجراءات مع البيانات التي عاد من الخادم.
دعونا نمضي قدما ورمز هذا كذلك.
لم أكن كود هذه سواء، وعلى الغرض.
وهنا TODO. بادئ ذي بدء، دعونا استخدام الربط حدث
بحيث عند الضغط على هذا الزر، نرسل قبالة طلب GET.
وعندما طلب أن الحصول على عوائد مع بعض البيانات،
ونحن في طريقنا لأنه يكتب في هذه المعلومات وجبة DIV ID.
بادئ ذي بدء، دعونا اختيار الغذاء ID زر.
عندما يتم النقر فوقه، ونحن نريد أن نفعل شيئا.
دعونا جعل مجرد أنها لFUCTION المجهول، كما كان من قبل.
يمكن أن يلتف تلك الأقواس المتعرجة،
وعند الضغط على هذا الزر، ونحن نريد لتقوم بإرسال طلب GET
لفحص ما لتناول طعام الغداء.
للقيام بذلك، ونحن يمكن أن اكتب فقط في $. الحصول عليها.
هذه هي وظيفة مسج، وذلك باستخدام علامة الدولار.
يستغرق بضع حجج. أول واحد هو عنوان URL،
والثانية هي وظيفة رد الاتصال، الدالة التي يطلق
عندما يعود هذا الطلب فعلا.
دعونا فقط بناء URL الأول.
يمكن أن نحصل عليه من API أن داود كتب المباراة.
الذهاب هنا، يمكننا أن نرى أنه من food.cs50.net/api/1.3/menus،
ثم قمت بتمرير فقط في أسماء المعلمات التي ترغب.
حتى المعلمة 1 هو القيمة 1.
يبدو أن التاريخ القياسية، بدء التسجيل، والتخلف إلى اليوم
إذا لم تقم بإدخال أي شيء، وتاريخ انتهاء أيضا الافتراضات
إلى اليوم إذا لم تقم بإدخال أي شيء.
هذا ما نريد. نحن نريد أن مجرد الحصول على المعلومات لهذا اليوم.
>> نحن نريد التنسيق ليكون في JSON.
هذا التعسفية فقط، ويمكنك استخدام أي شكل الذي تريده.
يمكنك استخدام CSV، ولكن JSON هو جافا سكريبت تدوين كائن.
فإنه من السهل جدا لجافا سكريبت لفهم ما يعنيه،
ويمكننا طباعته بسهولة أكثر بهذه الطريقة.
لذلك دعونا تطلب ذلك في JSON، ودعونا طلب الغداء.
حتى وجبة الغداء =. فقط لكتابة هذا العنوان، ونحن نعود هنا.
هناك القوائم. المعلمة الأولى هو الإخراج = JSON
لأن هذا هو ما نريد، ويمكنك فصل المعلمات مع 'و.'
المعلمة الثانية هو - أنا لا أتذكر.
وجبة. ونحن نريد وجبة الغداء =.
يمكنك اختبار هذا URL عن طريق كتابتها في المتصفح والذهاب إليها.
وسوف تعطيك بعض الانتاج. انها مجرد حفنة من الاشياء التي لتناول طعام الغداء.
انها في هذا الشكل القبيح. نحن نريد أن طباعته على صفحتنا في شكل أفضل.
وبالتالي فإن العنوان هو الصحيح، ونحن الآن بحاجة فقط لكتابة وظيفة
للاتصال مرة أخرى عندما طلب الناجحة.
وهذه وظيفة تتخذ في الواقع حجة. وسوف تكون البيانات.
البيانات هو ما يعود من طلب GET بعد الانتهاء من طلب GET.
يمكننا أن نفعل الأقواس المتعرجة؛ في هنا نكتب وظيفة مجهول
الذي ينفذ، وذلك باستخدام تلك البيانات عندما نحصل على المعلومات مرة أخرى.
ذلك البيانات، ونحن عندما كتبته في هذا URL،
هذا هو ما يحدث البيانات لتبدو وكأنها. انها سوف تكون هذه السلسلة ضخمة.
ولكن الشيء الجيد هو، وجافا سكريبت ويمكن تحليل ذلك باستخدام الدالة JSON.parse.
لذلك دعونا إنشاء متغير جديد يسمى تحليل البيانات.
والبيانات هي تحليل مجموعة من الكائنات.
كل كائن يحتوي على معلومات مثل - حسنا، دعونا نلقي نظرة.
أنه يحتوي على تاريخ، وجبة، والفئة، وصفة، كل هذه الأشياء الأخرى.
لذلك دعونا طباعة لتو اسم لكل واحد.
دعونا تكرار عبر مجموعة كاملة من الاشياء التي نحن نعود من ذلك،
وطباعة للتو كل واحد - طباعة اسم كل واحد.
هذا هو لحلقة.
>> جافا سكريبت لديها هذه الجملة مفيدة حيث يمكنك إنشاء متغير وحلقة أكثر من مجموعة،
وفار أنا هو مجرد مكرر، وذلك بدلا من الاضطرار الى القيام فار ط = 0،
كنت أقل من طول، أنا + +، يمكنك أن تفعل فقط فار أنا في بيانات تحليل.
في هذا المثال، سوف البيانات تحليل (ط) تتوافق مع العنصر الحالي
من الصفيف، الكائن الفعلي.
ونحن نريد الحصول على اسم للخروج منه.
لذلك دعونا لا مجرد الاسم.
وآخر شيء هو، ونحن في طريقنا لديك بعض مسج مرة أخرى.
في الواقع إضافته إلى DIV، هذه المعلومات وجبة DIV هذا فارغ حاليا.
لذلك دعونا تحديد ذلك.
سنستخدم مسج وحدد معلومات وجبة ID DIV، أو وجبة معلومات ID، آسف.
نحن نريد أن إلحاق هذا.
إذا فعلنا اختبار، على سبيل المثال، فإنه سيكون مجرد الكتابة فوقه كل مرة واحدة.
حتى نتمكن من إلحاق فقط هذا.
العنصر الحالي في الصفيف، ونحن سوف تحصل على اسم للخروج منه،
وسنقوم إلحاقها إلى نهاية معلومات وجبة DIV ID.
وبعد ذلك فقط لجعلها تبدو أكثر نظافة،
سنقوم أيضا إلحاق فاصل أسطر حتى انها ليست كل على سطر واحد.
لذلك إذا سارت الامور بشكل جيد، وهذا يجب أن تكون جيدة ل-
بادئ ذي بدء، كلما تم النقر على هذا الزر،
انها سترسل قبالة طلب GET إلى هذا العنوان.
عندما يأتي البيانات مرة أخرى من ذلك، فإنه سوف تحليل ذلك،
تحويلها إلى JSON، حلقة على مجموعة كاملة تمثل تلك البيانات،
ومن ثم إلحاق اسم وكسر خط
إلى كل سطر في هذه المعلومات وجبة ID الذي كان فارغا من قبل.
ولذا فإن العودة إلى هذه الصفحة، وسنقوم بتحديث،
انقر فوق ابدأ، معرفة - أنها لا تعمل. وهذا مؤسف.
وهذا هو المكان الذي يأتي التصحيح فيها.
index.html و، السطر 1.
هذا ممتع.
كل الحق، حسنا، بدلا من قضاء الوقت في القيام بذلك، أنا مجرد الذهاب الى
سحب ما يصل الملف فعلت ذلك لدي، والذي هو نسخة الانتهاء.
لست متأكدا ما هو الفرق، ولكننا نستطيع أن مجرد فتح هذا الأمر بدلا من ذلك.
ونذهب إلى AJAX، وهذا يجب أن تعمل بشكل صحيح.
وهذا هو ما كان لتناول طعام الغداء اليوم،
في أي ترتيب معين، مع اقتباسات من حوله، حتى انها ليست أجمل.
ولكن، من الواضح، إذا كنت تفعل هذا لمشروع النهائي،
كنت جعلها تبدو أفضل.
ولكن هذا مجرد مثال بسيط لكيفية القيام بما طلب GET.
وإذا نظرنا إلى رمز الفعلية، وأنا على التخمين، وأنا متأكد من
انها لا تزال الى حد كبير نفس.
أوه، لقد نسيت لتحويلها إلى سلسلة، هذا كل شيء.
لا، انها لا تزال لا تعمل. بغض النظر، وهنا رمز الانتهاء الفعلي
لماذا هذا يجب أن تبدو،
وأنه يفعل الشيء نفسه مثل ما أنا نفذت فقط.
عند النقر على الزر، فإنه يستخدم الحصول على جسون تحليل البيانات تلقائيا.
فإنه يأخذ البيانات مرة أخرى من ذلك وحلقات عبر مجموعة كاملة
ويطبع خارج - كل ما هو لتناول طعام الغداء اليوم، واسم من ذلك،
ويلحق به فاصل أسطر بعد كل سطر.
هذه هي الطريقة التي استخدم الدالة GET.
>> يمكنك أيضا استخدام آخر، والتي لم يكن لدي الوقت
لكتابة مثالا لذلك، ولكن يمكننا أن ننظر في الوثائق.
إذا نظرتم jquery.post،
يمكنك أن ترى أن انها تقريبا نفس الشيء.
لديك URL، لكن بدلا من تمرير المعلمات باستخدام -
مجرد وضعها في سلسلة لURL نفسه،
لديك لتمرير هذا المتغير في البيانات
التي هي في الأساس مجموعة، القاموس الذي يعين المعلمات إلى القيم.
يمكنك تمرير أنه في، والتي ترسل لهم في استخدام POST.
وبمجرد الانتهاء من ذلك، ثم هل يمكن أن يكون وظيفة النجاح
الذي ينفذ عندما يأتي البيانات مرة أخرى.
خلاف ذلك، انها نفس بالضبط. وذلك باستخدام POST،
قد ترغب في استخدام POST، على سبيل المثال، إذا كان لديك شكل مدخلات
أن تدع الناس كلمات السر مساهمة في ذلك، وترسل تلك كلمات السر قبالة
لديك النصي الخلفية، للتحقق في قاعدة البيانات سواء كان ذلك العضو هو صحيح أم لا.
يمكنك أن تفعل ذلك باستخدام كل مسج بدلا من الحاجة إلى تحديث الصفحة في كل شيء.
كيف لي ان تنفذ في بلوق التي عرضتها عليكم في وقت سابق.
إذا ذهبنا إلى بوابة النهاية وتسجيل الخروج، تسجيل الخروج،
خروج لا يعمل.
حسنا، اسمحوا لي أن مجرد فتحه في نافذة جديدة.
هنا هناك هو كلمة السر، وكنت ذاهبا لكتابة شيء عشوائي.
أنها لا تعمل، ولكن يمكنك أن ترى أننا لم
فعلا لتحديث الصفحة على الإطلاق.
رمز، إذا كنت تريد أن ننظر في الأمر،
هي كل ما هو متاح هنا.
وبالتالي فإن رمز كتبت العام الماضي في وقت ما.
كما ترون هنا، ونحن بصدد إرسال طلب POST.
لدي ملف يسمى login.php في النهاية الخلفية،
والذي يتحقق إذا كلمة السر هي صالحة.
المعلمات نعبر في هي كلمة السر، التي تم تعيينها إلى
إدخال هذا في مربع الإدخال هذا حاليا.
وعندما يأتي البيانات مرة أخرى، ونحن تحقق.
إذا كانت البيانات غير صحيح، ثم نقول كلمة مرور غير صحيحة، الانزلاق إلى أسفل،
وجعل مجرد أنها تختفي بعد ذلك.
خلاف ذلك، ونحن تحميل صفحة المشرف.
وهذا وقد تم استخدام جميع JSON.
في العديد من هذه الأسطر من التعليمات البرمجية، يمكنك فقط تمرير البيانات إلى النهاية الخلفية،
تحقق ما إذا كان صحيحا، تحقق ما إذا قمت بتسجيل الدخول بشكل صحيح،
وتستجيب في الواقع لذلك، وإعادة توجيه الشخص إلى الصفحة الصحيحة
أو عدم السماح لهم تسجيل الدخول ونقول لهم أن لديهم كلمة مرور غير صحيحة.
لذلك هذا هو مثال على كيف يمكن استخدام وظيفة مسج
لإرسال طلب POST إلى نهاية ظهرك،
التحقق ما إذا كان شخص ما لقد تم تسجيل دخوله بشكل صحيح.
>> كل الحق، لذلك أن جميع الأمثلة كان لي، وجميع الأشياء أردت أن تغطي.
تلك هي الأشياء الرئيسية التي مسج يسمح لك أن تفعل:
حدد العناصر، أو تعديلها، باستخدام DOM التلاعب،
يمكنك إضافة تأثيرات، وتفعيل الأشياء على أحداث معينة،
وأيضا القيام طلبات AJAX بسلاسة وسهولة.
لذلك أشكركم على حضوركم أو مشاهدة،
وإذا كان لديك أي أسئلة، فقط اسمحوا لي أن أعرف. نعم؟
[طالب] الى الوراء عندما كنت أظهر، كان عليك JSON بعد طلب POST في الاقتباس،
وكنت أتساءل فقط ما الذي فعلته.
>> نعم، أرى. وكان السؤال الذي، في المثال أظهر لي فقط،
كان هناك كلمة JSON في علامات الاقتباس حول -
أنا مجرد سحب ما يصل مرة أخرى - حول وظيفة POST.
أنا مجرد سحب ما يصل الى اظهار.
حتى هنا هذا الطلب POST، وهناك هذا JSON في الاقتباس.
التي تعرف فقط ما كنا نتوقع أن يكون الإخراج.
لذلك إذا نحن نمر في JSON كنوع البيانات المتوقعة،
انها ليست شرطا، ولكن إذا نحن نمر في ذلك،
ثم تلقائيا سوف يتم تحليل البيانات كما JSON.
لذلك نحن لم يكن لديك لاستدعاء الدالة تحليل جسون على ذلك،
انها سوف يحدث تلقائيا.
وإذا كنت نلقي نظرة على وثائق POST،
هناك هذه البيانات نوع المتغير، ونوع البيانات المتوقع من الخادم.
لأنه تخلف عن تخمين ذكي التي يمكن أن تكون خاطئة،
بحيث يمكنك تركه فارغا، ولكن انها مجرد نوع من البيانات
في الترميز الذي تستخدمه، سواء كان ذلك JSON أو XML أو أي شيء آخر.
>> أي أسئلة أخرى؟
حسنا. إذا كان لديك أي أسئلة أخرى، لا تتردد في الكتابة لي
في vshekhawat@college.harvard.edu،
والشرائح ورمز يجب أن تكون متاحة على شبكة الإنترنت في وقت قريب جدا.
حظا سعيدا مع مشاريع النهائي الخاص بك، ونأمل أن استخدام مسج.
[CS50.TV]