TOMAS REIMERS: مرحبا، الجميع. اسمي توماس REIMERS. مايك ريزو: وأنا مايك ريزو. TOMAS REIMERS: نحن اثنان من CS50s TS. واليوم نحن الرائدة في ندوة حول جافا سكريبت و CSS لتطبيقات الويب. إذا كنت ترغب في متابعة على طول، و الرابط هو حق هناك. وهل تريد طرحها على الكمبيوتر لفترة وجيزة؟ هناك الارتباط. انها موقع صغير، والتي لديها روابط ل جميع الموارد ونحن في طريقنا لتكون لافتا لكم اليوم وأيضا لديها الكثير من معلومات مفيدة كتبه لنا ل اقرأ المزيد في العمق عندما كنت أعود، وكنت أحاول أن أتذكر ما بالضبط نحن لم نقول، ما كان لك تتحدث عنه، وهلم جرا. مايك ريزو: حسنا. لذلك دعونا نبدأ. TOMAS REIMERS: إذن أنت تريد أن تبدأ؟ موافق. مايك ريزو: نعم. لذلك علينا أولا يريد أن تبدأ مع واسعة نظرة عامة عن الانترنت و أنواع الملفات عند تصميم المواقع. في حين أن هذا العرض نريد أن ندخل إلى تشغيل الجافا الكثير الكثير في وقت لاحق، أردنا أن تبدأ مع فقط، نوع من مثل رأي العين الطيور ما هو موقع على شبكة الانترنت وكيف للتفكير في تصميم على الانترنت لبدء. لذلك يا رفاق، في هذه المرحلة - مع ذلك يجري يلة الجمعة - ينبغي أن يكون قدمت التمويل CS50 الخاص يحدد المشكلة. نأمل، وكان ذلك مذاقا طيبا ما برمجة الويب يمكن أن يكون. ولكن هنا نريد أن، نوع من، وإعطاء لك طعم آخر، كذلك. TOMAS REIMERS: هكذا فقط لنلخص ما يحدث، عندما كنت اكتب في عنوان URL الخاص بك ل متصفح الويب الخاص بك، وهذا يحصل URL نظرت إلى أعلى في الكمبيوتر. وجهاز الكمبيوتر الخاص بك متصلا إلى كمبيوتر آخر، التي تستضيف هذا الموقع. موافق، لذلك عندما تذهب إلى google.com، وكنت متصلة واحدة من جوجل أجهزة الكمبيوتر، التي لديها ملفات google.com. ذلك، ثم يسأل عن ملف معين. حتى إذا ذهبت إلى - أنا لا أعرف - example.com / index.html وأو / test.html، وأنت تسير أن نسأل ل أن ملف معين. وخادم الويب في الذهاب لإعادته لك. ثم، مرة واحدة تذهب من خلال هذا الملف - مرة كنت الكمبيوتر الذي يحصل ملف - انها سوف تبدأ لبناء صفحة على شبكة الإنترنت. وحتى الآن كان لديه ملف HTML، الذي هو نوع من مثل هيكل صفحة الويب. يمكن الرجوع إلى ملف HTML أيضا ملفات CSS، التي تحدد النمط من صفحة ويب. ملفات جافا سكريبت، الذي يعرف التفاعل مع صفحات الويب. ملفات الصور، والتي هي الصور فقط. وربما تصل إلى ملفات HTML أخرى، والتي يمكنك زيارة ثم. مايك ريزو: OK، عظيم. لذلك يا رفاق لديهم كل شيء، ربما، تعيين بشق الأنفس يصل المضيف المحلي على الجهاز الظاهري. وذلك تماما، نوع من، هو المحلية المجال الذي يستضيف جهاز الكمبيوتر الخاص بك فقط بالنسبة لك في عنوان IP الخاص بك. بذلك في غضون ذلك، ثم يمكنك إضافة لذلك صفحات الويب الخاصة بك. أعني، في CS50 المالية، يجب أن يكون وأضاف بعض صفحات HTML، والتي هي، نوعا ما، ملفوفة في غلاف PHP. ولكن في نهاية المطاف، ما صفحات PHP الخاصة بك تم إخراج كانت HTML. ولكن التفكير في العودة إلى البداية من PSET، كان علينا أن تعيين الأذونات على كل شيء، أليس كذلك؟ لذلك هذا يتيح لنا أن نعرف فقط أساسا الذين يستطيعون القراءة والكتابة، وربما تنفيذ كل من الملفات. لذلك نحن في طريقنا للقيام سريعة - جلالة؟ TOMAS REIMERS: لذلك نحن ذاهبون للقيام تجريبي سريع. وذلك فقط لتذكيرك، عند الاتصال بجهاز الكمبيوتر جوجل - أيا كان - وطلب ملف، الكمبيوتر الأول يحتاج إلى تأكد من أنك مخول في الواقع لعرض هذا الملف أو قرأت أن ملف لأنك لا يمكن أن نطلب فقط عن أي ملف على جهاز الكمبيوتر هذا، أليس كذلك؟ من شأنه أن يكون خطرا على الأمن. حتى الملفات على أنظمة نستخدمها، مثل هذا الجهاز CS50، ثلاثة عامة الناس الذين يمكن أن يكون الأذونات إلى شيء. الأول هو الفعلية وقال صاحب الملف. والثاني هو المجموعة التي الملف ينتمي إليها. نحن لن نركز كثيرا على ذلك. وآخر شيء هو، نوعا ما، مثل العالم أو مثل أي شخص آخر من هو ليست محددة لهذا الملف ولا لديك أي حقوق ملكية أكثر من ذلك. حتى إذا كان لدينا المالك، المجموعة، ومن ثم العالم. وبعد ذلك، لكل من هذه المجموعات، ل يمكن أن يكون واحدا من ثلاثة الأذونات، موافق، أو متعددة منها. يمكن أن يكون لديك أذونات القراءة. يمكن أن يكون لديك أذونات الحق. ويمكن أن يكون لديك تنفيذ الأذونات. وذلك من حيث أنواع الملفات الفعلية، وقراءة إذن هو مثل قراءة الواقع محتويات الملف. إذن الحق هو الكتابة وقال لملف. هو إذن تنفيذ تشغيل ملف مثلك عند تشغيل أحد مشاريع CS50 الخاص بك. لذلك عندما نحن نفكر حول ملفات مثل عندما كنا في حاجة لقراءة HTML الملف، الذي يجب أن يكون العالم قراءة، أليس كذلك؟ يفترض، أيضا صاحب يريد لتكون قادرة على تحرير هذا الملف. وبالتالي فإن صاحب سيكون في حاجة إلى القراءة والكتابة الأذونات. انهم لا يحتاجون الى تنفيذ حقا. مجموعة، ونحن في طريقنا للعلاج نفس العالم في الوقت الراهن. لذلك هم بحاجة أذونات القراءة. لكنها لا تحتاج الكتابة أو تنفيذ الأذونات. والآن، إذا كنا نعتقد العودة إلى السابق PSETs، ما نحن ندرك هذا النوع من تبدو الثنائية، أليس كذلك؟ 1 لتقف على نعم. 0 لا ل. ونحن يمكن أن تترجم في الواقع هذا إلى ثنائي. حتى 110 في ثنائي سيكون 6. 100 سيكون 4. نفسه مع العالم. وبالتالي فإن عدد سوف تحصل ل سوف أذونات لهذا تكون 644. مايك ريزو: وإذا كنت تعتقد أن العودة إلى عند chmoded شيء، وأعتقد أعطوا في مشكلة تعيين مثال حيث يمكن أن تفعله شيء من هذا القبيل التصريح 644 ومن ثم اسم الملف. و644 ثم، يمكنك الآن رؤية مباشرة حيث أن يأتي من. لذلك نأمل أن يجعل هذا أكثر من ذلك بقليل واضحة. ثم لوضوح كنت الرجل - أوه نعم، هذا هو هنا مرة أخرى. حتى 600 بعد ذلك سيكون مجرد مثال تخلينا هنا حيث المالك لديه أذونات قراءة والحق بينما المجموعة والعالم لم يكن لديك أية أذونات للوصول إلى الملف. TOMAS REIMERS: وبعد ذلك لدينا سريعة قائمة الأذونات مشتركة. لذلك الدلائل، وتريد لشمود فعلا 711. سريعة جانبا - لدليل لديك إذن قابل للتنفيذ يعني أن تكون قادرا لفتح الدليل. الصور، CSS، وجافا سكريبت، HTML الاحتياجات 644 لأنه، في الأساس، فإن العالم الاحتياجات قراءة الأذونات. وPHP، التي شهدت يا رفاق على الرغم من أننا لن نتحدث عن ذلك بدقة وعادة ما chmoded مع إذن 600 ليتم تشغيله مع أذونات المالك. على الأقل على الأجهزة. مايك ريزو: حتى إذا كنت لا على وجه التحديد تحديد نوع الملف تريد في الواقع وضع يصل هذا العرض - كان لدينا مشكلة مع هذا ل لم chmoded كل شيء بشكل صحيح - وأنت تسير في الحصول عليها، نوع من، و الخطأ ممنوع أن الموقع لا يملك في الواقع إذن للوصول مهما ملف تريد أن الوصول إليها. وبطبيعة الحال، يمكن أن تكون ثابتة - كما هو الحال في مشكلة تعيين - عن طريق تغيير الأذونات بشكل مناسب. TOMAS REIMERS: وتعليق مشاركة ل التنمية المحلية بسرعة هو - نحن جلبت هذا الأمر، ولكن أردنا فقط لجعلها تصل مرة أخرى - إذا كنت تسأل عن الخادم - المضيف المحلي بذلك، على سبيل المثال، كوم أو أيا كان - ولم تقم بتحديد ملف معين، الملف الذي يجري جهاز الكمبيوتر الخاص بك لطلب يسمى index.html و. أو إذا كان ذلك غير موجود، index.PHP. بارد. ذلك أن مجرد خلاصة من كل شيء، نأمل، أننا قد غطت في القسم، ومحاضرة، وحتى الآن في CS50. والآن ونحن في طريقنا لبدء المحادثات المكتبات حول وجه التحديد. جافا سكريبت و CSS المكتبات لتطبيقات الويب. لذلك سبب واحد سريع لماذا لدينا المكتبات والبرمجة - هناك الكثير من المشاكل في البرمجة، والتي تبقي تفرقع مرة أخرى، ومرة ​​أخرى، ومرة ​​أخرى. قد لاحظت أن الكثير من المواقع تحتاج إلى القدرة على الحصول على المنسدلة القوائم، على سبيل المثال، أو في حاجة إلى القدرة لديك زر قياسي جدا الاسلوب، والتي قد لا تكون أسهل شيء. الآن بعد أن كنت بدء للوصول الى HTML، كنت ندرك أن أزرار يمكن في الواقع تبدو قبيحة حقا إذا كنت لا تفعل أي شيء. لذلك الكثير من الناس قد كتبت دعا المكتبات. وفي هذا السياق، وانهم كما دعا الأطر. ونحن في طريقنا إلى استخدام اثنين بالتبادل. وما هي عليه هو انهم فى الاساس ولم يضف قطعة من التعليمات البرمجية - إما CSS أو جافا سكريبت - أن يسلب الكثير من فريق لديك في الترميز. حتى قبل تحديد مجموعة من الطبقات أو قبل تحديد حفنة من الوظائف ل الحالة جافا سكريبت، والتي يمكنك الاتصال في وقت لاحق. وبعد ذلك يمكنك، نوعا ما، الحصول على الوصول إلى هذا الرمز دون الحاجة إلى القيام بأي شيء. كان مثالا للمكتبة CS50.H. كان ذلك مكتبة أعطينا لك مرة أخرى في أسبوع واحد، والذي يسمح لك أن تفعل أشياء من هذا القبيل GetInt وGetString دون الحاجة إلى كتابة أي رمز نفسك. مايك ريزو: حسنا. حتى هنا، تماما مثل كان لدينا لتشمل في منطقتنا ج ملفات مختلفة المكتبات، ونحن أيضا يجب أن تدرج في لدينا ملفات HTML مكتبات مختلفة. على سبيل المثال، إذا أردنا أن تشمل مكتبة جافا سكريبت محددة هنا، ربما، واحدة أن لدينا كتب أنفسنا كما انها استضافت محليا دعا script.js، نحن فقط استخدام هذه الرموز. لذلك لدينا نوع النصي التساوي جافا سكريبت المصدر التساوي JavaScript.js. وإذا كنت تعتقد أن العودة إلى CS50 الخاص مشكلة التمويل مجموعة، إذا بدا لك في header.php على في المجلد قوالب، يجب أن شهدت بعض هذه المدرجة. لذلك هذا أول واحد - مخطوطات - هو بما في ذلك مكتبة جافا سكريبت. بما في ذلك مكتبة CSS هو مختلفة قليلا. هنا، بدلا من البرنامج النصي TAG كنت في حاجة إلى علامة الارتباط. ومن ثم، ونوع النص CSS هو مختلفة قليلا. لم يكن لديك دائما لتشمل ورقة نمط يختلط. ولكن أعتقد أنها، عموما، الممارسات الجيدة. ثم أخيرا، HREF، الذي ربما رأى في ATAGs الخاص للربط بين في روابط مختلفة يحدد فقط وصلة من أين تجد ذلك. على سبيل المثال، إذا أردنا أن ربط مكتبة مختلفة - دعنا نقول فقط - التي عاشت في styles.css. وكنا نرغب في أن تصل في هذا استضافت على شبكة الإنترنت، فإننا نسخ ذلك. ثم لصقه في كل ما لدينا الحق هنا بدلا من ذلك. TOMAS REIMERS: موافق، ونأمل أن الرجال هم بالفعل على دراية مع كيفية ربط CSS. كان عليك أن تفعل ذلك على مشاركة مجموعة البني الخاص بك. جافا سكريبت، البعض منكم ربما لديهم بعض الخبرة مع. لا يجوز لك بعض. حتى الآن، ونعرف أن ملف جافا سكريبت تشبه إلى حد كبير ملف CSS في بمعنى أنه يمكنك الارتباط به أو التي يمكنك إدراجه داخليا. وأنها تتيح لك الأشياء النصي. ونحن في طريقنا إلى المشي لكم من خلال قليلا من جافا سكريبت في وقت لاحق. وذلك باستخدام مكتبة - بمجرد إدراجها، كما انها بسيطة كما تدعو حرفيا وظائف أو إضافة أسماء فئة لها. آخر شيء نريد أن نتحدث حول من حيث المكتبة - وهذا هو أكثر من مذكرة التقنية - هو ترخيص مفتوح المصدر. لذلك عندما تجد هذه المكتبات الفعلية، قد يكون التفكير من أسئلة مثل هل هو موافق أنني فقط باستخدام رمز لشخص آخر، وخاصة لأن هذا شيء نحن كثيرا قلت لك أن لا تفعل في هذه الدورة. حتى في حالة الترخيص مفتوح المصدر، الكثير من المطورين - مرة واحدة انهم كتب المكتبة، التي يعتقدون يمكن أن يكون مفيدة للآخرين - سوف تنشر على شبكة الإنترنت وإعطائها الترخيص. ويقول في الأساس على ترخيص بموجب هذا أنا منح الإذن لأخرى الناس على استخدام هذه قطعة من البرمجيات مع هذا النوع التالية الشروط. لقد تضمنت وصلة لموقع جيد ل تساعدك على فهم التراخيص في لحالة واجهت لهم. شروط شيوعا هي أشياء مثل فنحن نرحب بك لاستخدام مكتبتي ذلك طالما كنت تعطيني الائتمان. فنحن نرحب بك لاستخدام مكتبتي طالما عند وقوعه كنت لا ألوم لي. فنحن نرحب بك لاستخدام مكتبتي فترة طويلة كما لم يكن لاستخدامه لكسب المال لنفسك. هذه هي أنواع شائعة الشروط. لهذا المشروع النهائية CS50، فإنها لا ينبغي أن تكون فائقة ذات الصلة ل المشاريع التي تستخدم أنتم ربما إلى حد ما، نوعا ما، معروفة. ولكن عندما تذهب فعلا إلى العالم والبدء في استخدام المكتبات، والتي قد أو قد لا يتم تنفيذها وكذلك بعض من هم أكثر شعبية نحن ستكون يمر بها. أنه من الجيد أن تكون قادرة على فهم هذه التراخيص و فهم ما تعنيه. وعودة إلى الوراء. مايك ريزو: OK. لذلك تتحرك الآن على أمثلة من CSS الفعلية. في هذه المرحلة حتى الآن، وكنت قد لا واجهت هذا. ولكن قد واجهت في حياتك اليومية حيث شيء يبدو أن طريقة واحدة على متصفح واحد قد لا تبدو هي نفسها الطريقة متصفح آخر. وهذا ما يسمى متصفح متصفح التوافق. وعلى نحو متزايد أنه أصبح أكثر و أكثر من مشكلة، خاصة و متصفحات اتخاذ المزيد والمزيد من الحريات لتنفيذ الأمور كما تريد. لذلك للتغلب على ذلك، هناك فعلا مكتبة كبيرة تسمى Normalize.CSS. TOMAS REIMERS: نحن شملت الارتباط. في هذه المرحلة، فإنه من المفيد إذا لديك جهاز الكمبيوتر المحمول في هناك أبحث في الموقع. ونحن إعطاء هذا لك الحق الآن ببساطة لأن النهائي CS50 المشروع هو في الواقع ذاهب ل أطلب منكم لتنفيذه وبالمثل من خلال المتصفحات. وذلك فقط للحفاظ على في الجزء الخلفي من الخاص الرأس، هذه هي مكتبة رائعة لأنها سوف، نوعا ما، توحيد الأشياء. في فايرفوكس، قد تظهر شيئا كما بكسل واحد إلى اليسار. ثم كروم قد تقرر أن الواقع ما يعني أن 10 بكسل إلى اليسار. وتريد لتوحيد هذا. سوف تطبيع فعلا جيدة حقا مهمة التأكد من أن موقعك تبدو هي نفسها عبر المتصفحات. مايك ريزو: حتى إذا أردنا فقط اضغط على الرابط حقا بسرعة وتظهر لك ما يشبه، ل يمكن تحميل البرنامج باستخدام زر تحميل العملاقة. أو أنا أشجعكم لقراءة المزيد حول هذا الموضوع بالنقر على هذا الرابط في الجزء الأسفل اليد اليمنى الزاوية. TOMAS REIMERS: وإذا كنت في الواقع انقر فوق قراءة المزيد هناك حق - انقر فوق مصدر على جيثب - سترى في الواقع مفتوحة المصدر ترخيص على LICENSE.md هناك حق. وسترى هنا هو رخصة MIT شعبية جدا. مرة أخرى، إذا كنت تقرأ من خلال النص، عليك أن تكون قادرة على العثور عليه على الموقع نحن المشار إليه من قبل، وتكون قادرة على فهم ذلك دون الحاجة إلى قراءة من خلال المصطلحات القانونية. مايك ريزو: OK، عظيم. ذلك أن تطبيع. أردنا أن نقدم لك التي سرعان ما حقا. أوه، هل لديك سؤال؟ الحضور: لذلك عندما قمت بتحميل ذلك، ل ما عليك سوى اتباع التعليمات البرمجية التي لديهم تحت زر تحميل؟ TOMAS REIMERS: نعم، لذلك عند تحميل - مايك ريزو: أوه، هذا هو نقطة كبيرة. لذلك كان السؤال كيف ونحن في الواقع تنزيله؟ حتى إذا كنا اضغط على الرابط، ونحن نرى أنه دفعها فعليا حتى في شفرة المصدر. حتى للقيام بذلك، ما في وسعنا لا هو مجرد انقر فوق حفظ باسم. حفظ أنه ينبغي كما و إحضار الملف. وبعد ذلك يمكننا اختيار حفظ أنها normalize.CSS. ثم كنت قد ربطه في - TOMAS REIMERS: نفس الطريقة التي ربط في أي ملف آخر. وبمجرد ربطه في، ما هو عظيم حول تطبيع هو عليه في الواقع سوف رعاية جميع الثابت العمل في حد ذاته. وهذا يعني أن ليس لديك لإضافة أي الطبقات. لم يكن لديك لتفعل أي شيء غريب. فإنه سيتم تطبيع بدونك القيام بأي شيء آخر. نعم، لديك لإدراجه. جوجل كروم لا يستجيب. مجرد سريعة جانبا - لقد لاحظت أننا قفز الى هذا. ما تبقى من هذا العرض هو ستكون لمحة سريعة. مسح المكتبات. أساسا، ما هي عليه. ما يفعلونه. كيف انهم مفيدة. كيف يمكن تنفيذها. إذا كنت تريد أن تبدأ في النظر إليها، بعد طول، والقراءة من خلال لهم، وأود أن أشجع جدا أن. بدلا من ذلك، كنت موضع ترحيب أيضا بدء تنزيلها وبما في ذلك لهم في الأفق فقط لرؤية ما تبدو أو ما يفعلونه إذا كان لديك الكمبيوتر المحمول في أمامك. إن لم يكن، فنحن نرحب بك للحفاظ على الاستماع لنا الحديث. ونحن في طريقنا للحفاظ الحديث. وليس لدينا الوقت في النهاية، نأمل أننا سنصل إلى الواقع يظهر لك ما بعض هذه المكتبات تبدو. مايك ريزو: بارد. كل الحق، وحتى الآن دعونا نتحدث حول الخط ممتاز. TOMAS REIMERS: ممتاز الخط حتى هو موقع أنيق حقا، خصوصا بالنسبة لأولئك منا الذين هم أقل فنيا الموهوبين. تجاهل اسم الخط ممتاز، وأنه يعطي كنت حفنة من الرموز، والتي هي مفيدة جدا. لذلك الكثير من المرات فسوف تنفيذ أيقونة قد تحتاج مثل لطيفة س حتى يمكنك إغلاق شيء. أو قد تحتاج نوعا من زر تحرير مع رسم قلم رصاص مثل الجميع لديه. وذلك عندما كنت تعلم أن يمكن رسم تلك الرموز تكون مملة وصعبة جدا. الخط ممتاز - إذا كنت فعلا انتقل إلى موقع - يتيح لك الكثير من الرموز في إطار الرموز في الأعلى. نعم، فقط الجزء العلوي. وسوف تعطيك الكثير من الرموز مجانا. حتى هنا ترى لدينا أشياء مثل النجمة، والحانات، وصاعقة، و التقويم، والخلل، وكتاب، وهلم جرا. وهذا يمكن أن تكون مفيدة جدا. بالطريقة التي تشمل هذا هو أنت وتشمل حرفيا ملف CSS. وبعد أن كنت قد شملت الملف المغلق، ما يمكنك القيام به هو إنشاء دعا العلامة أولا وsatands ل أيقونة مع الطبقة FA الوقوف لالخط ممتاز. وبعد ذلك، مهما كانت درجة التي تريدها. لذلك إذا أردت رمز هذا بالإضافة إلى مواجهة الحق هنا، وأود أن تعطي انها الطبقة FA. ثم FA اصلة زائد مربع اصلة. مايك ريزو: بارد، OK. TOMAS REIMERS: وبعد ذلك، وCSS مشاركة مكتبة نريد من خلال الحصول على نحن محاولة للحفاظ على الحد الأدنى على CSS المكتبات لأننا لا ندرك عنوان هذا العرض هو جافا سكريبت المكتبات. ولكن كنا نظن أنه يجوز ونحن كذلك أعرض لكم لمكتبات أخرى بينما كنا نتحدث عن المكتبات. انها Google ويب الخطوط. وما خطوط الويب من Google يسمح لك القيام به هو إضافة الخطوط إلى موقع الويب الخاص بك، الذي هو وسيلة سهلة لجعله حقا جميلة وتمييز مجموعة الخاصة بك من أي شخص آخر هو إذا كان لديه خط لطيفة أو إذا كان لديه لطيفة مجموعة من الخطوط. Google ويب الخطوط هو لطيف خلافا لغيرها المكتبات بمعنى أن انها تركيب تسترشد حقا. حتى إذا كنت تتبع الارتباط، انها google.com / الخطوط، على ما أعتقد. إذا كنت تتبع ذلك، ل يمكن اختيار الخط الخاص بك. يمكنك اختيار على اليسار من سمك، مائل، وهلم جرا. ثم، مرة واحدة كنت قد اخترت واحدة، يمكنك النقر استخدام السريع. هناك حق. السفلي الأيمن من منطقة الجزاء. ومن ثم، انتقل لأسفل. أولا، أنها تعطيك CSS أن تحتاج إلى ربط الواقع عليه. انها هناك حق. يمكنك نسخ ولصق فقط التي فيها والشيء الجميل في هذا هو واحد كنت في الواقع لا تحتاج حتى ل تحميل الملف. ما انها بصدد القيام به هو انها تسير لتصل إلى نسخة غوغل منه. نعود إلى ما يعني ذلك. وهذا يعني عندما يقوم مستخدم بتحميل الملف الخاص بك - بتحميل صفحة HTML - HTML الخاصة بك الصفحة هو الذهاب الى مرجع هذا الملف. حتى ذلك الحين، جهاز الكمبيوتر الخاص بك يحدث أن نرى، أوه، انها استضافت على google.com بدلا من على theirsite.com. اسمحوا لي أن اذهب واسأل جوجل لهذا الملف. وبعد ذلك، انها سوف تشمل انها تقريبا كما لو كانت جزء من موقعك. TOMAS REIMERS: بارد. وبمجرد أن تشمل، ثم ل إدراجه في CSS الخاص بك، فإنه يتيح لك خط الفعلية. لذلك قمت بتعيين عائلة الخط الملكية يساوي اسم الخط الخاص بك. مايك ريزو: OK. لذلك نحن انتهى لتوه مع CSS. والبعض منكم قد يكون التفكير، حسنا، كان لدينا بعض CSS على CS50 المالية. ولكن مكتبة CSS كان التمهيد. ونحن في الواقع تشمل التمهيد قليلا في وقت لاحق في إطار تفعيل جافا لأنه مع يأتي مكتبة التمهيد CSS أيضا مع الكثير من جافا سكريبت التي التمهيد أو تويتر - الذي جعل التمهيد - يستخدم لإدارة كل من CSS الخاصة بهم. TOMAS REIMERS: هل لديها أي الأسئلة حتى الآن حول CSS بشكل عام؟ نحن في حالة جيدة؟ رهيبة. مايك ريزو: ممتاز. TOMAS REIMERS: حتى تتحرك إلى تفعيل جافا. مايك ريزو: لذا أردنا أن نتحدث حول مسج لتبدأ. وقد سمع أحد من مسج قبل أو استخدامه؟ نعم، وزوجين؟ لذلك إذا كنت تعمل فقط مع الأم جافا سكريبت، وستجد نفسك كتابة الكثير من محددات طويلة كثيرا. فما مسج يفعله هو أنه يوفر مجمع طيبة للجافا سكريبت اللغة التي تسمح لك بسهولة اختيار والتلاعب العناصر المختلفة ضمن نموذج الكائن ثيقة من وثائق صفحة ويب أو DOM، وهو ما أعتقد قد سمعت يا رفاق من في محاضرة في هذه المرحلة. TOMAS REIMERS: إذا لم تكن قد سمعت من أو محاضرة إذا لم تكن قد شاهدت حتى الآن، وطراز كائن المستند أساسا كيف يتم تمثيل الأشياء. لذا HTML نوع من يشبه الشجرة عند رسم الواقع بها. لديك عنصر HTML على القمة. لديك الرأس والجسم. وبعد ذلك، في غضون ذلك لك لديهم كل شيء آخر. وهذا ما يشار إليه باسم DOM - الوثيقة كائن النموذجي. لذلك النموذج الذي يمثل الكائنات في الوثيقة هو وسيلة سهلة للتفكير حول ذلك. واحدة من الشيء العظيم في مسج هل هو حقا يجعل عبور وأن عناصر التلاعب داخل أن بسيطة بشكل لا يصدق. بسيطة جدا، في الواقع، أن غالبية جافا سكريبت المكتبات أو إن لم يكن الأغلبية، والأغلبية الكبرى من تلك سترى في الواقع تتطلب ذلك مسج أنهم أنفسهم ببساطة يمكن تشغيل لأنه إذا لم يكن لديك مسج، لك سوف تضيع الكثير من الوقت في محاولة ل معرفة كيفية اختيار معينة العناصر وكيف أن تفعل أشياء أخرى. والشيء العظيم الأخرى حول مسج هو أنه عبر متصفح متوافق. لذلك أذكر مرة عندما قلنا أن ليس كل المتصفحات تنفيذ الأشياء بنفس الطريقة؟ وهذا صحيح حتى في جافا سكريبت. واحدة من أشياء عظيمة عن مسج هو أنه سيتم الكشف عن و متصفح وكشف الطريقة المناسبة. حتى إذا كنت بحاجة لتحديد عنصر، إنترنت إكسبلورر قد يقول كنت من المفترض القيام به بهذه الطريقة. فايرفوكس قد يقول الصحيح طريقة هي بهذه الطريقة. مسج لا يهمه. عندما كنت اقول مسج لتحديد العنصر سيكون معرفة كيف انها من المفترض أن تفعل ذلك في غضون المستعرض المستخدم حاليا في، ثم قم على هذا النحو. مايك ريزو: لذلك دعونا لا نتحدث عن استخدام مسج قليلا. تماما مثل PHP، مسج لديه خاصة ولع لعلامة الدولار. لذلك ستجد أن أي مسج - حسنا، ليس كل شيء. يمكنك استبدال بعض الأحيان الدولار التوقيع مع كلمة مسج. ولكن عموما، لمجرد انها أقصر، كلما رأيت مسج يجري استخدامه سوف تكون مع علامة الدولار. حتى هنا نحن تظهر مجرد بداية محدد لعنصر في DOM. هنا، لدينا علامة الدولار يتبع بواسطة الأقواس المفتوحة ثم يستشهد. وضمن يقتبس تذهب محددات لدينا لعناصر مختلفة. مثلما هو الحال في CSS، ونحن بحاجة لمحددات تكون قادرة على أسلوب العناصر المختلفة داخل الصفحة. تلك محددات مختلفة ترجمة بالضبط في مسج وجافا سكريبت، بالنسبة للجزء الاكبر. حتى هنا لدينا فو نقطة. لذلك إذا كنت أذكر من المحاضرة، النقطة يعني فقط الطبقة. لذلك نحن اختيار عنصر مع الطبقة فو. حتى لو كنت المضي قدما وفتح لدينا جافا سكريبت وحدة التحكم بسرعة هنا حقا مجرد إثبات ذلك، إذا أنا فقط اكتب علامة الدولار، نرى أنه من بعض وظيفة أن يأتي. وانها تعرف انه فقط عن طريق مسج. TOMAS REIMERS: لأولئك منكم غير مألوفة، وحدة التحكم هو أداة في كروم، والذي يسمح لك ل، في الأساس، وتشغيل جافا سكريبت على الصفحة الحالية. هذا ستجد مفيدة بشكل لا يصدق عندما كنت في الواقع التصحيح ولكم تحتاج إلى أن تكون مثل، ما هو الحالي قيمة بعض متغير عمومي أو ما هو شيء آخر؟ انها نوع من مثل GDB مع استثناء يمكنك أن الواقع التلاعب العناصر على الصفحة مع في أسهل بكثير الموضة. وأيضا لم يحدث ذلك، أساسا، تحقق في معك قبل أن يفعل أي شيء. حتى حين، قد يكون مثل GDB، هل أنت متأكد من أنك تريد تشغيل الخطوة التالية؟ وحدة التحكم هو في الحقيقية. وذلك في صفحة ويب يتم تقديم و القيام بكل ما تقوم به، و تشغيل المجلس أيضا الى جانبها. ويمكنك وضع التعليمات البرمجية في عزو أن وحدة التحكم، والتي سوف يتم تشغيلها على الصفحة. مايك ريزو: إذن لدخول وحدة التحكم، وأنا أعتقد أن فترة وجيزة أذكر كيف نفعل ذلك. في الماضي مشاكل قد تكون لديك انها تستخدم كروم تفقد عنصر وظائف أو عرض مصدر الصفحة - وهذه يمكن الوصول إليها فقط عن طريق الحق بالضغط على الصفحة أو محددة عنصر والقيام إما تفتيش العنصر أو عرض مصدر الصفحة. يمكننا أيضا الوصول إلى تفعيل جافا وحدة التحكم مباشرة اختيار تفقد عنصر. وحدة التحكم حتى ذلك الحين كنت مجرد ضرب على الجانب اليمين المتطرف. بدلا من ذلك، يمكن أن كنت قد ذهبت أيضا إلى أعلى الزاوية اليمنى، التي قطعت على هذه الشاشة حيث أنه يحتوي على ثلاثة قضبان أفقية. وتذهب إلى أسفل إلى الأدوات و ثم تحكم جافا سكريبت هنا حيث يمكن أن يرى - على الأقل على ويندوز - الاختصار هو مراقبة التحول J. حتى ذلك الحين إذا أردنا لتحديد عنصر في هذه الصفحة، تماما مثل وأظهر لي قبل، ونحن نفعل علامة الدولار parens مفتوحة ونقلت بعد ذلك. والشيء المثير للاهتمام هو، عموما، علامات الاقتباس المفردة والمزدوجة ونقلت صرف. لذلك الكثير من الناس مجرد استخدام واحد يقتبس لأنهم أسرع إلى اكتب من علامات الاقتباس المزدوجة لأنك لا يجب أن اضغط على مفتاح Shift. ولذا فإنني سوف يفعل ذلك الآن. لذلك أريد أن تحديد شيء مع الطبقة. الحاويات، فقط لأنني أعرف أن هذا شيء أن يكون على موقعنا صفحة على شبكة الإنترنت في الوقت الحالي. وأنا هاهنا. ويمكننا أن نرى أنه تحديده. لذلك يظهر أنه عاد هذا الكائن. ذلك أن مجموعة الأساسية. إذا أردنا أن التلاعب به فعلا، قد تضطر إلى استدعاء شيء على هذا الاختيار، الذي ونحن سوف ندخل في وقت لاحق. TOMAS REIMERS: حتى مجرد أن ننظر في ذلك أكثر في العمق، وهذا لا يختلف من المكالمات الدالة التي قطعناها على أنفسنا في C. اسم وظيفة هنا هو غريب قليلا. انها علامة الدولار. انها مجرد اسم وظيفة. هناك شيء خاص حول هذا الموضوع. لدينا الأقواس المفتوحة. ثم، لدينا حجة واحدة، والتي في هذه الحالة يحدث أن تكون سلسلة، وهو محدد لذلك. ثم، لدينا أقواس مغلقة. هذا هو. انها ليست مختلفة إلى حد كبير. وعلى الرغم من أنها لا تبدو غريبة للغاية. والتي يمكن أن تكون، نوعا ما، على الخلاف ويشير لكثير من الناس. مايك ريزو: هكذا بالمثل، إذا أردنا لتحديد عنصر له معرف، الآن نريد أن حدد من قبل ID بدلا من فئة. سيكون شيئا مماثلا حيث نحن مجرد القيام علامة حادة لمعرف. لذلك نحن هنا اختيار جميع العناصر التي لديها شريط الهوية. TOMAS REIMERS: وهذا يمتد. يمتد التي CSS. مثلما هو الحال في CSS، يمكنك تحديد كافة وصلات، والتي لديها فو الطبقة. هنا، انها نفس الشيء. هل يمكن أن تفعل a.foo، التي من شأنها تحديد كافة الارتباطات مع فو الطبقة. هل يمكن أن تفعل بار حاد، والذي من شأنه حدد الارتباط مع شريط الهوية الشخصية وهلم جرا وهكذا دواليك. أي محدد CSS هي صالحة مسج محدد. مايك ريزو: نعم. حسنا، الآن دعونا ندخل قليلا من التلاعب الذي يمكننا القيام به مع لدينا مسج. حتى مسج لديه نوع معين من تدوين حيث نستخدم فقط نقطة في نهاية المطاف. ويمكنك التفكير في مثل هذا في كيف كان لدينا البنيات مختلفة C. وللذهاب الى تلك البنيات، تفعل استخدام نقطة للوصول الى لهم. وهذا هو، نوعا ما، شيئا مماثلا. الآن فقط لدينا وظائف في هذا محدد أننا يمكن أن نطلق على ذلك. حتى هنا، والمثال الأول للغاية تستطيع أن ترى غير محدد CSS. وأساسا، ما الذي يفعله هو أنه ينطبق العنصر الأول لهذا CSS الشيء الذي حددته - هذا العنصر الذي قمت بتحديده - مع قيمة ذلك. TOMAS REIMERS: إذن ترجمة سهلة لل التي من شأنها أن تكون إذا مسج، في الأساس، فقط أخذت فو. ثم قال في CSS، اللون الأحمر وثيق. انها نفس الفكرة. ما فعلته هو تحديده جميع عناصر فو. ثم انها تطبيقه. نوعا ما، لون الملكية يساوي الحمراء. مايك ريزو: وبالمثل، فإننا يمكن أيضا تغيير المحتويات الفعلية لما هو تظهر على HTML من الصفحة، والتي هو رائع حقا لأنه يعني لديك يمكن أن تكون صفحات الويب الديناميكية الآن تماما وليس من الضروري أن تكون ثابتة التي تطبع باستخدام PHP في بداية الصفحة يتم تحميلها. حتى هنا، إذا أردنا تغيير HTML الفعلي للصفحة، ونود الآن استدعاء الدالة HTML، والتي بعد ذلك فقط إدراج كل ما في تحديد أن العنصر الذي اخترنا. حتى هنا نحن مع اختيار العنصر فئة فو ثم تقول انها HTML انها الآن مرحبا العالم. TOMAS REIMERS: وعندما كنت تفكر في ما هي التطبيقات المفيدة لل هذا، وهذا CSS واحد، وأول ما يمكنك البدء في التفكير هو حتى من حيث القوائم المنسدلة. هل يمكن أن تبدأ في القيام بأشياء مثل، عندما تحوم مستخدم على الجزء العلوي من المنسدلة، وتريد أن تجعل الجزء السفلي مرئية. أليس كذلك؟ وذلك في CSS، لدينا خصائص أن أصنع شيئا مرئيا. أشياء مثل عرض القولون لا شيء سوف جعلها غير مرئية. سيكون العرض كتلة جعله مرئيا. أو حتى إذا كنت تريد أن تذهب أكثر بساطة، كنت لديهم أشياء مثل متساوين الرؤية مرئية، والرؤية يساوي المخفية. ويمكن البدء في تنفيذ الأمور مثل إسقاط الحق القوائم بعد أن تحصل من خلال فكرة عن كيفية يمكنك معرفة متى يفتح هذا، التي سنقوم من خلال الحصول على فترة وجيزة جدا. ولكن يمكننا أن نبدأ في رؤية تطبيقات هذا. بمعنى مماثل، لو كنت في محاولة وتنفذ، دعنا نقول، دردشة المحرك وكنت تريد أن تجعل قليلا فقاعة الكلام يأتي كلما قمت حصلت على رسالة جديدة، بمجرد الحصول على رسالة جديدة، يمكنك جعل قليلا فقاعة الكلام يأتي عن طريق تغيير وHTML من الصفحة، أليس كذلك؟ بإضافة أن فقاعة الكلام اضافية مع النص اضافية هناك. نعم؟ الحضور: وهكذا كنت في ترسيخ هذه رمز HTML في نوع من مثل [غير مسموع]؟ مايك ريزو: الحق. نعم، ونحن سنصل إلى ذلك في قليلا. نعم، انها مماثلة ل قليلا إلى PHP. لا تشبه بالضبط. التمييز جيدة لجعل هذا هو ما يقوم بتحرير فعلا عندما كنا تعديل صفحة لأنه لن يكون تحرير ملف الفعلية التي يجري أبقى على الخادم لأن العالم لا ينبغي أن يكون لديك إذن لتحرير ملفات الخاصة بك. هذا هو مجرد تحرير ما على الصفحة وما يجري عرضها داخل المتصفح. حتى لو كنت لإعادة تحميل الصفحة بعد، ويقول، وحذف شيء ونحن انظر يمكننا القيام به مع الدعوة إزالة، سيكون هذا الشيء ثم ظهور مرة أخرى. TOMAS REIMERS: حتى طريقة واحدة للتفكير هذا هو إذا أنا جهاز الكمبيوتر الخاص بك و مايك هو، نوعا ما، على الخادم. ما الذي سيحدث هو أنا ذاهب ل نسأل مايك، مهلا، هل يمكنني الحصول على نسخة من صفحة الويب هذه؟ وقال انه سوف تعطيني نسخة منه. لا، انها ليست الشيء الأصلي. انها مجرد نسخة. ومن ثم فإنه سيكون مثل، أوه، هناك جافا سكريبت هنا. بوضوح، وأود أن تحرير الصفحة أن يكون مثل هذا. وأنا تحرير نسختك. ولكن هذا ليس إحداث النسخة الفعلية. وإذا كان لي أن أسأله مرة أخرى تحديث الصفحة، - مهلا، يمكن أن لدي نسخة نظيفة أخرى - انه ذاهب لاعطائي نسخة نظيفة آخر. وبعد ذلك، انا ذاهب الى ان تفعل الشيء نفسه مثل، أوه، هذا شبيبة هنا أن يقول لتحرير هذا. وانا ذاهب للحفاظ على القيام بذلك. مايك ريزو: إذن شيء رائع حقا ما يمكنك القيام به مع مسج هو في الواقع إضافة أنواع مختلفة من الرسوم المتحركة إلى صفحتك. أنا لا أعرف ما إذا كنت قد رأيت من أي وقت مضى حيث كنت في محاولة لتعبئة استمارة على الانترنت، وكنت لا ملء الأشياء بشكل صحيح. ذلك الشيء القليل تنزلق في أعلى ويقول لك لم تكن قد فعلت هذا بشكل صحيح. يرجى المحاولة مرة أخرى. ومن ثم، فإنه قد يصل حتى مجرد الشريحة. اتضح وقد بنيت مسج في وظائف التي تجعل من كل ذلك الرسوم المتحركة حقا، من السهل حقا. حتى لا يكون هناك لأول مرة تتلاشى وظيفة بها، والتي يمكنك الاتصال على شيء. وانها وسيلة لتغيير CSS من هذا العنصر بطريقة الرسوم المتحركة. لذلك يأخذ أيا عنصر كنت اسميها تتلاشى جرا. وبعد ذلك، يتغير ببطء انها التعتيم حتى يذهب شفافة تماما. TOMAS REIMERS: واحدة شعبية أخرى وتنزلق، الأمر الذي سيجعل تظهر شيئا من الانزلاق إلى أسفل. حتى في حالة القائمة المنسدلة، مرة أخرى، عندما علمنا كيفية اكتشاف عندما تم حلقت أكثر من هذا، هل يمكن أن أقول فقط هذا القاع جزء تنزلق الآن. وبعد ذلك، على ما يبدو عن طريق تحريك لأسفل. مايك ريزو: ومن ثم، إذا كان لديك فقط نوع من الرسوم المتحركة في الاعتبار أن مسج لا توفر بالضرورة. على سبيل المثال، دعنا نقول مسج لا توفر لك مع الشريحة أسفل والانزلاق فوق. حسنا، دعنا نقول انك تريد أن تنزلق شيء من الناحية اليسرى أو في من الحق في نوع من مثل CS50 الصفحة الرئيسية يفعل كلما تذهب إلى لوحة جديدة. ثم هل من المحتمل أن يكون ل تنفيذ ذلك بنفسك باستخدام تنشيط وظيفة داخل مسج. لذلك بالمثل، يمكنك تحريك فقط. وبعد ذلك، في غضون ذلك يستغرق و القاموس من قيم مختلفة ان كنت من المفترض أن تمر. حتى هنا، إذا أردنا أن يديروا العنصر فو بحيث عرضه إما توسع أو عقود إلى 80 بكسل، اعتمادا على ما هو عليه حاليا. كنا مجرد تمرير ذلك كما حجة داخلها. يديروا لها أيضا بعض الحجج الأخرى هل يمكن أن تمر عليه، على سبيل المثال، سرعة الحركة الذي تريد أن تعطيه. وعلى ذلك، أود أن أقول فقط بسرعة جوجل مسج تنشيط. ومن ثم، تنشئة هذه الصفحة، يمكنك نرى انها حصلت على حفنة من مختلف الخصائص التي يمكن أن تمر عليه. وأنا أشجعكم - كلما جئت عبر ما لم تقم تعرف أو تريد فقط لمعرفة المزيد عن طريقة معينة التي يمكنك الاتصال على شيء - فقط جوجل عليه. مسج غاية موثقة توثيقا جيدا. وكثير من الأحيان هناك الكثير من الأمثلة التي يقدمونها لك. إذا كان لنا أن انتقل لأسفل - الطريق إلى أسفل - التي يمكننا استخدامها، كذلك. مرة أخرى، عندما يذهب في الواقع مطور من خلال عناء الكتابة و مكتبة، انهم يريدون عادة شخص لاستخدامه. ذلك إلى جانب هو الذهاب الى تكون الوثائق. ويمكن ان تكون تلك الوثائق عادة في صفحة المشروع، الذي هو لماذا أعطينا لكم أن الموقع الأصلي في بداية، الذي يربط لك ل صفحات المشروع حتى تتمكن من نرى أن الوثائق. عادة، صفحة المشروع في حالة من [غير مسموع]، فمن قال لك أسماء الطبقات. في حالة تفعيل جافا، وأنه يعطي لك اسم وظائف. بالمناسبة، إذا كان لنا أن انتقل إلى أعلى إلى أعلى، ملاحظة جانبية سريعة على وظائف هي كلما رأيت وظيفة تنفيذها مثل هذا مع الصعب بين قوسين في الوسط، أن الوسائل أن تلك الخاصية اختيارية. مجرد ما يصل رؤساء. لقد رأيت الكثير من الأسئلة حول ذلك. حتى هنا يمكننا أن نرى أن الأرواح يأخذ خصائص كوسيطة اللازمة. وكل شيء آخر هو اختياري. ملاحظة جانبية - يمكن ان يخطر لك هذا، نوع من، مثل صفحات الرجل. صفحات الرجل وثائق C و لكثير من الأشياء الأخرى، كذلك. مايك ريزو: هكذا تعلمنا كيفية تغيير CSS مختلفة على الصفحة، تحريك ذلك، وإزالة إضافة HTML. لكن واحدة من أقوى حقا أشياء حول جافا سكريبت وخصوصا مسج - ما يتيح لك القيام به هو الاستجابة ل العناصر المختلفة التي تحدث. على سبيل المثال، لدينا هنا معالج الحدث. وهذا يعني فقط كلما كان ذلك يحدث الحدث، ونحن على التعامل معها في بطريقة معينة. حتى هنا، الحدث مسج عامة المعالج هو نقطة على. ومن ثم، فإن أول شيء قمت بتوفيرها ما حدث هو مفترض يمكن الاستماع ل. حتى هنا، انها فوق ذلك نحن في انتظار. TOMAS REIMERS: بدلا من ذلك، لديك على التحويم، والذي هو واحد شعبية جدا. يعود ذلك إلى انخفاض إلى أسفل فكرة القائمة. سيكون لديك رأس واحد على التحويم. ثم هل يمكن أن تغيير ذلك. مايك ريزو: الحق. وبعد ذلك، عندما يحدث ذلك، فإنه فقط ينفذ هذه المهمة التي اعطيناها كوسيطة والتي فإنه ينبه مرحبا أو مرحبا. TOMAS REIMERS: حتى في حالة جافا سكريبت، وهذا هو مكان نحن بحاجة إلى إزالة أنفسنا من C. يمكننا فعلا تأخذ وظائف كوسائط. وهناك الكثير من الحقيقة بطرق معقدة للقيام بذلك. ونحن في طريقنا لتعزيز اتجاه واحد، وهو يمكنك تحديد تعمل هناك. لذلك عندما كنت طالبا لوظيفة معلمة، وكنت في الأساس فقط الذهاب الى تحديد وظيفة على الفور. والطريقة التي تحدد وظيفة في جافا سكريبت هو أنت ويقول حرفيا وظيفة. ثم، عادة، اسم وظيفة. لكننا لن ترجع هذه الوظيفة مرة أخرى. لذلك نحن نترك الامر دون اسم. ثم الأقواس، ثم مجعد الأقواس، ثم رمز داخل ذلك. لذلك نحن نفهم هذا يمكن أن يكون مربكا بعض الشيء. لذلك نقدم لك الشكل العام لل ما يبدو معالج أحداث مثل أدناه، والتي هي على الأحداث. وبعد ذلك، التعليمات البرمجية داخل ذلك. مايك ريزو: هل هناك أي أسئلة حول هذا؟ هذا يمكن أن يكون مربكا بعض الشيء في المرة الأولى التي نرى ذلك. TOMAS REIMERS: أنت فعلا تريد فتح ملف وتبين لهم بعض مسج الآن؟ مايك ريزو: نعم، دعونا نفعل ذلك. موافق. TOMAS REIMERS: حتى الآن نحن في الأجهزة. وما فعلناه هو أننا قد اتخذت الحرية لخلق حد سواء index.html و الملف، الذي يربط ل ملف جافا سكريبت. ويمكننا فتح - نعم. كذلك، فإنه لا شيئين. الأول هو أنه يربط ل ملف جافا سكريبت. وسنرى أن ما يصل هنا. ونحن نرى أن في رأس وثيقة HTML، بشكل خاص. لذلك سترى ان هناك ونحن، في الأساس، يقول SRC، التي تقف على المصدر. وهذا هو URL. حتى هنا يمكنك أن تقول قمنا شملت مسج. ولقد شملت أيضا البرامج النصية. الطريقة الأخرى لتشمل جافا سكريبت هي التي يمكن أن تتضمن برنامج نصي مضمنة العلامة كما لدينا في الجزء السفلي حيث يقول السيناريو هو نوع النص جافا سكريبت. لذلك نحن نقول، والاستماع، ونحن حول لتشمل النصي. ونوع هذا السيناريو هو جافا سكريبت، الذي هو نوع من النص. بسيط جدا. مايك ريزو: ولهذا، نوع من، ويحصل ل سؤالك حول كيفية ندرج الجافا سكربت في ملفاتنا لأننا عندما قد PHP، ونحن نفعل شيئا من هذا القبيل. ومن ثم، لها وظائف PHP لدينا - دعنا نقول مخزونات تفعل شيء مع ذلك - يذهب هناك. ومع ذلك، والآن لدينا علامات البرنامج النصي أننا إعطائها، والتي هي في الواقع جزء من HTML نفسها لأنها ليست تزوير كونه ملف HTML مثل ذلك في PHP لأنه إذا كنت تذهب في الواقع في وإلقاء نظرة على مصدر الصفحة، سترى هذه العلامات النصي في هناك مع جافا سكريبت المرتبطة لهم في ذلك. حتى ذلك الحين، إذا أردنا أن كتابة بعض جافا سكريبت - دعنا نقول فقط أردنا تغيير الجسم لأن الآن ليس لدي أية علامات الأخرى التي استطيع حقا تعديل إلى جانب الجسم. دعنا نقول فقط أردت أن تغيير CSS من ذلك. ولذا فإننا سوف نمضي قدما والتغيير اللون منه إلى الأحمر. لذلك أنا حفظ ملف. دعونا نعود إلى صفحة على شبكة الإنترنت، التحديث، وأنه يفعل ذلك تلقائيا لأنه لا يبدو مثل ذلك انتظرت على الإطلاق لأننا كنا لا يصغي لحدث أو أي شيء من هذا القبيل. TOMAS REIMERS: حتى إذا رجعنا إلى أن ملف على وجه الخصوص - في HTML ملف - ما كنت تريد الذهاب ان نراه هو لدينا - تذكر أن هذا يتم تحميل، نوعا ما، زمنيا. لذلك علينا أولا الرأس. يقوم بتحميل تلك الملفات اثنين. ثم نذهب إلى الجسم. ونحن نرى مرحبا العالم. لذلك نحن تجعل مرحبا العالم. ثم آخر شيء لدينا ونحن من سماته النصي. بحيث يتم تشغيله العلامة النصي لأنه لا أقول ذلك لانتظار أي شيء. وهذا هو أبسط طريقة لتشغيل جافا سكريبت. وقال مع ذلك، يمكنك وضع البرنامج النصي علامة أعلى في رأس فقط لإظهار هذه النقطة؟ وتشغيل هذا. ونحن في طريقنا لاحظت أنه لم يتغير اللون. وهذه هي واحدة من مشاكل جافا سكريبت هي أن الأمور لتحميل في الترتيب الزمني. في ذلك الوقت أن هذا الرمز كان يعمل، اخترنا - نعود - العلامة الجسم. عدم وجود علامة الجسم بعد ل جافا سكريبت يتماشى مع HTML. وبالتالي فإن المتصفح هو مثل حدد الجسم. وليس هناك شيء من هذا القبيل حتى الآن. ولذا فإننا يمكن أن نتجاهل ذلك. ونحن الاستمرار. ثم نحدد علامة الجسم. ولكن هذا لم يحصل تحديثها. حتى عندما كنت تنفيذ البرنامج النصي العلامات، وتأكد من وضع بعد علامة الجسم. الشريحة التالية. مايك ريزو: OK. لذلك قمنا بتغيير شيء ما. لكنها لم تبدو وكأنها استجابت ل لنا على الإطلاق لأنه مجرد نوع من فعل ذلك بمجرد تحميل الصفحة. وحتى الآن، بدلا من القيام بذلك، لماذا لا نضيف معالج الحدث. لذلك دعونا نفعل شيئا إلى الجسم مرة أخرى. ودعونا نقول ونحن نفعل ذلك على - انقر فوق. سنقوم بإضافة وظيفة. التغيير دعونا: TOMAS REIMERS انها اللون إلى الأحمر مرة أخرى. لماذا لا؟ التغيير نعم، دعونا: مايك ريزو لها 'اللون إلى الأحمر مرة أخرى. حسنا. لذلك دعونا إعادة تحميل الصفحة. موافق، ونحن نرى - كما هو متوقع، فإنه لا يتحول الحمراء حتى الآن. ولكن بعد ذلك يمكننا المضي قدما وفوقه. TOMAS REIMERS: وهل إلى اللون الأحمر. مايك ريزو: وهو يفعل إلى اللون الأحمر كما هو متوقع. TOMAS REIMERS: ويمكننا أن نرى كيف يمكننا أن نبدأ في بناء أساسية جدا التفاعل. الأشياء الأخرى التي قد ترغب في القيام به هو، إذا كنا لا نريد أن نجعل الجسم اللون الأحمر، دعونا جعل HTML خلفية اللون الأحمر. فقط حتى انها نفس CSS. وعندما نغير ذلك، يمكننا أن نرى هذا تأثير كبير جدا من تغيير الصفحة بأكملها. ذلك مرة أخرى، إذا كنت تنفيذ الأشياء، هل يمكن أن يكون عنصر واحد التي من المفترض أن يكون النقر على. دعنا نقول على زر إنهاء و عنصرا أخرى بأكملها، الذي يهدف للرد. حتى تتمكن من شأنه أن يزيل نافذة عندما يحدث ذلك. مايك ريزو: OK. فقط كمثال - لم تحصل لرؤية هذا في وقت سابق - سوف تظهر فقط لأنك ما يبدو أنه مثل عندما نخفي شيئا. ولذا فإنني سوف نمضي قدما ونفعل الشريحة المباراة. TOMAS REIMERS: هل تريد أن التفاف أنه في نوع الفقرة قبل ان نفعل ذلك؟ مايك ريزو: OK. نعم، لماذا لا نفعل ذلك فقط حتى يمكننا تحديده أكثر من ذلك بقليل. TOMAS REIMERS: ودعونا إعطائها الطبقة. مايك ريزو: نعم. حسنا، دعونا نرى. بدلا من تحديد الجسم الفعلية الآن، أنا فقط تحديد كل شيء مع مرحبا الطبقة، التي نحن هنا يكون مجرد شيء واحد. لذلك لا ينبغي لنا أن يكون ل تقلق بشأن ذلك. ولذا فإنني سوف تجديد ذلك. سأذهب إلى الأمام وفوقه. وعليه، نوعا ما، فعل شريحة غريبة يصل شيء، والتي لا تبدو أن جذابة. عموما، أنها لا تبدو لطيفة وجميلة. أعتقد، وهذا - لبعض السبب - لم يفعل ذلك. سأفعل مجرد تتلاشى حتى يمكنك أن تبحث في ذلك أيضا. أجمل بكثير. ومن ثم، إذا كنت تفتح جافا سكريبت تعزية مرة أخرى، ونحن نريد أن نرى ما يبدو أننا عندما تتلاشى فيه. الآن، أنا مجرد دعوة تتلاشى في على ذلك. ويتلاشى تكبير الخريطة. وبالمثل، فإننا يمكن أن تمر في الواقع أيضا حجة أن تتلاشى في أو تتلاشى، وهو، نوع من، وسرعة منه. لذلك دعونا نمضي قدما ونقول أننا نريد أن يذهب ببطء تتلاشى فيها. لذا أعتقد أنه لا يزال يبدو سريعة جدا. ولكنه كان أبطأ من ذي قبل. TOMAS REIMERS: وإذا كنت تريد أن تجد معرفة المزيد عن هذه الأمور، ومرة ​​أخرى، اذهبوا إلى وثائق مسج، التي قمنا بالنظر لك، وقراءة من خلال هذه. أنها توثيق وظائفهم بشكل جيد للغاية. مايك ريزو: OK. لذا أعتقد دعونا نعود إلى هذا. ويمكن أن نتحدث عن الصفحة الأخيرة لدينا. كذلك، يمكن أن ننتهي مع التمهيد. ثم سنقوم فتحه بالنسبة لبعض الأسئلة. وإذا كان لديك أي يا رفاق الأفكار التي كنت ترغب في محاولة لرمي ونرى اذا كنا نستطيع تنفيذها مع جافا سكريبت بسرعة. بسرعة حقا عن التمهيد، والتي أدرج تلقائيا في المشكلة الاخيرة مجموعة في مجلد CSS وترتبط فعلا لفي حياتك header.php على. لذلك يمكن أن أضفتها الفئات التي يتم تعريف ضمن التمهيد لذلك. وكان يمكن أن يكون على غرار تلقائيا تلك الأشياء وفقا لذلك. TOMAS REIMERS: التمهيد لذلك هو جدا الشيء السحري الذي وضعه الناس في تويتر. وما كان من المفترض أن يفعله هو - قبل أن المواقع من الصعب حقا لجعل تبدو لطيفة، وخصوصا عندما كان لدينا الكثير من المكونات المشتركة. لذلك الكثير من الأزرار على بدا على شبكة الإنترنت نفسها. وهناك الكثير من حقول النص يمكن تقديمها ل تبدو أفضل من النص القياسية الحقل وربما كنت أعرف من حقا المواقع القديمة أو سيئة حقا أدلى المواقع، والتي تبدو وكأنها مجرد الحرفي مربعات النص دون أي شكل من أشكال النص الظل أو أي نوع من الخطوط العريضة لطيفة. ذلك ما فعله التمهيد وقيل، أيضا، لدينا الكثير من الأساليب شيوعا. لماذا لا نجعل مجموعة مشتركة من CSS ومجموعة مشتركة من جافا سكريبت كما أيضا، والتي يمكن أن أسلوب كما هي والتي يمكن أن تعطي الناس أشياء مثل انخفاض أسفل القوائم، والتي يمكن أن تعطي الناس أشياء مثل شرطية. مشروط هو ما دفعها على الصفحة كلما انها بالمعنى الدقيق للكلمة شيء، والذي يحول دون مزيد من التفاعل حتى تقوم تتفاعل معها. شيء من هذا القبيل هو، هل أنت متأكد أنك تريد حذف هذا الشيء؟ لا يمكنك أن تفعل أي شيء آخر حقا حتى تقول نعم أو لا. استغرق الأمر كل هذا وتعبئتها معا، وقال: هنا نذهب. يمكن للناس الآن استخدام هذا. ويمكنك العثور عليها على في getbootstrap.com. تم تضمينه تلقائيا في غضون تعيين المشكلة الأخيرة الخاصة بك. وكنت أكثر من موضع ترحيب ل استخدامه على المشروع النهائي الخاص بك. وإذا كنت تريد أن تتبع ذلك ربط الحصول على التمهيد. سترى هنا هو التمهيد موقع CSS. سترى التمهيد. وإذا كنت انتقل لأسفل، سترى كيفية تحميل البرنامج، وكيفية تثبيته، وهلم جرا. مايك ريزو: ويمكنك أيضا، ومن المثير للاهتمام، تخصيصه ل يكون أي نوع من الموضوعات الذي تريده. وأنا أعلم أن هذا شيء فعلته لبلادي المشروع النهائي عندما أخذت الطبقة تم تخصيصه. وهناك نسخة مختلفة من التمهيد الذي كان نظام ألوان مختلفة و أشكال مختلفة من بعض أشياء مختلفة. لذلك أنا أشجعكم للعب مع ذلك. انها نوع من متعة القيام به. TOMAS REIMERS: أبحث في أعلى مرة أخرى، انها تشبه الى حد بعيد الخط رائع الموقع. وهناك الكثير من الوثائق بدء لتبدو مشابهة عندما قمت رأيت ما يكفي من ذلك. حتى هنا لدينا CSS مكونات هذا. وسترى كيف يمكن أسلوب الأشياء. لذلك إذا كنت انقر على الجداول، على سبيل المثال، يمكنك ان تجعل على الفور الجدول جميلة ببساطة عن طريق إضافة الجدول الطبقة إليها. الأشياء نفسها للأزرار. إذا كنت ببساطة إضافة BTN الطبقة وBTN التقصير أو BTN الأولية، يمكنك الحصول على أي واحدة من هذه الأزرار مع هذه الأنماط مسبقة الصنع. وبعد ذلك، إذا كنت تبحث عن شيء أكثر تعقيدا من مجرد تصفيف ما ث بالفعل، على مدى يوم علامة التبويب جافا سكريبت عبر أننا أعلى لديك مجموعة من المكونات. حتى هنا لدينا التحولات، وشرطية، القوائم المنسدلة، علامات، وتلميحات. A تلميح الأدوات هو ما دفعها تحت قيادتكم الماوس عند المرور على شيء. بوبوفيرس، والتنبيهات، وأزرار، قابلة للطي الأكورديون هو ما انهم عادة ما تسمى. دوارات، والتي الوجه من خلال الصور مثل. حتى تلك هي المكونات من التمهيد. وأود أن أشجعكم ل تذهب للغاية ننظر إليها. هناك عنصر جافا سكريبت وعنصر CSS. لا تتردد في استخدامها كما شئت. نحن لن يذهب كثيرا الى لهم لأننا نشعر وثائق ويتم ذلك بشكل جيد حقا. ونعم. هل لديك أي أسئلة حول هذا الموضوع؟ مايك ريزو: حتى باعتبارها يسارعون حقا الجانب، وتصميم صفحة الويب هذه التي سرعان ما وضعت معا ل هذا العرض هو فعلت فعلا باستخدام التمهيد. كما ترون، عندما كنا انقر على هذه علامات تبويب مختلفة، ونحن في الواقع أبدا ترك هذه الصفحة index.html والحالية. ذلك ما لدينا هو DIVS مختلفة في هذا index.html و. ومن ثم، كلما كنا فوق مختلف التبويب، انها مجرد تغيير الذي عرض واحد. لذلك وفقا لمواقف لهم، يغير HTML من الصفحة بحيث يتم وضع علامة التبويب الحالية نشطة حتى يبدو بشكل مختلف وتبدو لطيف حقا. TOMAS REIMERS: ولهذا كان كل ذلك دون لنا كتابة ما يقرب من أي CSS. نرى أيضا رأس في أعلى، والتي تعتبر ألوان من قبلنا. ولكن الفعلي وضعه على أعلى الصفحة، وجعل كان عليه التمرير التمهيد. وحتى ذلك الحين لمكتبة أخرى - وهذا ليست واحدة ولكن تحدثنا عن واحد يمكنك جوجل إذا كنت تريد. وهذا ما يسمى prettify.js. وسيكون تسليط الضوء على تركيب التعليمات البرمجية بالنسبة لك باستخدام كل من CSS و JavaScript. آخر شيء نريد أن نتحدث عن قبل أن تفرج على الخروج في العالم أن ننظر إلى المكتبات لمعرفة كيفية استخدامها و، ونأمل، قراءة الوثائق وتجد ما الحاجة هي كيفية العثور على المكتبات. وبالتالي فإن الأول هو نحن فقط الذهاب لدفع جوجل. جوجل تذهب. هذا هو حرفيا ما نقوم به عندما كنا تحتاج أن تفعل شيئا هو أننا جوجل. هناك مكتبة جافا سكريبت أن يسمح لي الوقت للتلاعب في طريقة مفيدة؟ حتى لو كنت أعلم أن بعض المستخدمين خلق حساب هنا، وهذا هو الوقت الحالي، كيف يمكنني حساب الفرق مع أنه من دون الحاجة إلى حساب بنفسي؟ لذلك هذا هو في الواقع شيء مشترك، مكتبة جافا سكريبت الوقت. ونحن هنا Moment.js - الأكثر شعبية. إذا كنا بحاجة إلى مكتبة للتلاعب شيء من هذا القبيل اللون لتكون قادرة على توليد مجموعة من ألوان عشوائية - ربما، لتوليد نمط أو شيء من هذا - يمكننا أن جوجل شيء من هذا القبيل مكتبة جافا سكريبت اللون. وأنا متأكد من أننا سوف يطفو على السطح مع ألف واحد منهم. كنت موضع ترحيب لقراءة من خلالهم. لذلك معظم الأشياء - عند العثور عليها - تسير يتم استضافتها على أحد المواقع التي رمز المضيف. انهم عدد قليل من تلك الشعبية. الأكثر شعبية، من قبل الآن، هو github.com. وإذا ذهبت إلى جيثب انها في الواقع حيث استضافت تطبيع. حتى إذا كنت تريد أن تذهب إلى أن واحدا. تبين لهم ذلك. مايك ريزو: وهذا هو الواقع حيث هذا وتستضيف أيضا، إذا كنت لاحظت. TOMAS REIMERS: نعم. حتى إذا ذهبت الى تطبيع وانتقل إلى جيثب. كان ذلك؟ مايك ريزو: قليل هذا الشيء القط هو رمز جيثب. TOMAS REIMERS: أوه. حتى جيثب يستخدم طريقة تسمى بوابة إلى رمز المخزن. وكنت لا أعرف ما هو أو أنه يخيف لكم، هذا شيء طيب. لم يكن لديك لمعرفة ما هو بوابة لأن جيثب يحتوي على زر تحميل في أسفل اليمين. الشيء الآخر المفيد معرفة حول جيثب هو الأكثر المنتجات سيكون لديك للقراءة لي. وإذا لم يكن لديك موقع على شبكة الانترنت، و قراءة لي سوف نتحدث عن كيف تثبيته، وكيفية استخدامه، ما لا، وهلم جرا، وهلم جرا، وهلم جرا. ما كنا أساسا المشي لكم من خلال. مايك ريزو: الإقلاع عن التدخين الإنترنت. TOMAS REIMERS: فلا بأس. على أمرين مشاركة أردنا للحديث عن - لقد تحدثنا حول جيت - هو استكشاف الأخطاء وإصلاحها. وهذا هو واحد ليس كما ذات الصلة ل المنتج النهائي كما هو عند مغادرة 50. وعندما واجهت المنتجات تنفيذ المكتبات أو تنفيذ المشروع الخاص بك، وأنت تسير لديك أسئلة أو كنت ذاهب للبحث عن الأسئلة. مرة أخرى، وجوجل عليه. هذا هو حرفيا ما نقوم به. هذا هو الذهاب الى تبدو سخيفة. ولكن حرفيا، ونحن جوجل عليه. ومرة أخرى، واحدة من أول الأشياء عليك أن تعمل عادة في غير stackoverflow.com، وهو رائع سؤال وجواب الأفق. أنه لأمر رائع لأنه يمكنك على حد سواء نشر الأسئلة والبحث عن الإجابات ولكن أيضا لأن لديها بالفعل الكثير من المحتويات التي يسكنها قبل هناك. لذلك عادة عند جوجل البرمجة سؤال في غضون أول زوجين يضرب لك قد تقوم بالفعل بتشغيل الى ذلك خلال مجموعات مشكلتك. ومن ثم، فإن آخر شيء وجيزة حقا هو JSFIDDLE، وهو - اليوم قمنا تم القيام بالكثير من العمل مع جافا سكريبت HTML CSS. JSFIDDLE هو التطبيق على شبكة الإنترنت، والتي في الأساس يسمح لك أن تأخذ HTML الخاص بك، الخاصة بك جافا سكريبت أسفل اليسار، و لديك CSS أعلى اليمين. وبعد ذلك يمكن أن تخلق تجعل سريعة من ذلك ونرى كيف يتفاعل. انها مفيدة للغاية عندما يحاول الناس للقيام إثبات المفهوم مثل هذا هو كيف تفعل القيام القائمة المنسدلة. ربما كشف السريع أو أيا كان. مايك ريزو: لذلك دعونا نذهب قدما وفوق هذا. ملاحظة سريعة - في حين، قبل كنا القيام على نقرة. تبين له JCorey كوريا أيضا بنيت في معالج الحدث انقر فوق أنه يستخدم لمجرد أنها شخصيات كنت تريد الذهاب الى القيام بالكثير من الأشياء عندما تريد شيئا فوق. وبالمثل، كما أن لديها تحوم. لكن للحصول على النطاق الكامل لل تلك، أن ننظر في مسج وثائق ونفعل ذلك. فعلت شيئا غبيا هنا. TOMAS REIMERS: لذا لدي حقا سريعة برنامج الحق هنا، والتي تقول زر على نقرة. ثم لدينا لحلقة. لأنني أقل من 404. انها مجرد الذهاب ليطفو على السطح هذه رسائل التنبيه. مايك ريزو: وماذا كانت كود 404 وقفت عليها في HTML؟ لا تذكر أي شخص؟ لم يتم العثور على حق. وأضاف الكروم أيضا هذا أنيق الشيء حيث يمكنك - TOMAS REIMERS: لأن الناس مثل بدأ مايك القيام بذلك كثيرا و المستخدمين مزعج، والذي يسمح لك أن ترى معلومات. مايك ريزو: نعم. TOMAS REIMERS: هل لدينا أي أسئلة حول هذا الموضوع، حول جافا سكريبت المكتبات، وإيجاد المكتبات، أو يبدو ما تطوير الشبكة كما هو الحال في العالم الحقيقي؟ نحن تشغيل حتى ضد الزمن. لذلك أنا لست متأكدا من أننا ذاهبون لديك الوقت لتنفيذ إلا انها سريعة حقا. نحن جيدة؟ مايك ريزو: وأي شيء يا رفاق أحب لرؤية سريعة حقا في، مثل، اثنين دقيقة أو أقل؟ TOMAS REIMERS: أي شئ يمكننا توضيح؟ كيفية الكتابة في - الحضور: [غير مسموع]؟ مايك ريزو: نعم، that's ذلك - TOMAS REIMERS: يمكنك مجرد ضرب ضبط U على شبكة الانترنت. مايك ريزو: أوه، لم أكن أعرف ذلك. TOMAS REIMERS: أعتقد، نعم. التحكم-U. نعم. مايك ريزو: أوه، لذلك هذا هو كود للموقع. ولكن إذا كنت فعلا تريد تحميل لدينا الملفات وكل شيء، واستضافت على github.com TOMAS REIMERS: خفض اسمي - توماس REIMERS - مائل ندوة CS50 اصلة. مايك ريزو: ويمكنك تجد كل شيء هناك. TOMAS REIMERS: هذا هو ما جيثب يبدو، من جانب الطريق. ذلك مرة أخرى، عندما ترى مفتوح المصدر المشروع، عادة، وأنها سوف تكون قراءة لي ان هناك يمكنك أن تقرأ. وإذا ذهبت إلى الوراء، ستلاحظ أن لديك تحميل البريدي، والتي سوف تسمح لك بتحميل المصدر رمز لتشمل المنتج في شيء بنفسك. مايك ريزو: نعم، واذا كنا فقط انقر على index.html وبسرعة حقا - TOMAS REIMERS: سترى هنا هو شفرة المصدر لموقعنا. مايك ريزو: أيضا، لقد نسيت لدفع الحق قبل مع طاولة كبيرة عليها وشملت، ولكن هناك أيضا طاولة من chmods أننا شملت فقط من أجل الوضوح الخاصة بك. ولكن إذا كنا التمرير على طول الطريق وصولا الى أسفل، ونحن لم تفعل في الواقع جدا كثيرا مع جافا سكريبت الاشياء على الإطلاق مع هذا. انها حصرا من كل شيء آخر أن كان لدينا. لذلك أشكركم على حضوركم الرجال والاستماع. ونحن نأمل أن يكون هذا كان مفيدا حقا. إذا كان لديك أي جافا سكريبت ذات الصلة أسئلة أو فقط نريد أن نتحدث عن ما آخر مثل ما هي الأشياء الأخرى باردة يمكنك القيام به مع جافا سكريبت، كنا نحب لأتحدث إليكم. TOMAS REIMERS: إذا كان لديك سؤال حول المشروع الخاص بك أو إذا كان هذا يمكن أن يكون ذات الصلة، سنقوم على الارجح حول عصا قليلا بعد ذلك. ولكن بخلاف ذلك، يكون عطلة نهاية الاسبوع جيدة. مايك ريزو: نعم، التمتع بها. انظر يا رفاق. TOMAS REIMERS: أفهمك.