DOUG لويد: في هذا الفيديو، أردنا أن أصل الكلمة إلى اهتمام خاص إلى خاص جدا عنصر جافا سكريبت التي قد تجد مفيد عندما كنت بدأت للعمل على معالجة صفحات الويب و تغيير محتوى صفحة الويب الخاصة بك على الطاير. وهذا هو مفهوم طراز كائن المستند. لذلك كما رأينا في الفيديو لدينا على جافا سكريبت، الكائنات هي مرنة جدا. وأنها يمكن أن تحتوي على مختلف المجالات. وعلى الرغم من أننا لم ندخل الكثير من التفاصيل، تلك الحقول أو الخصائص، أننا ربما أكثر استدعاء بشكل مناسب لهم في سياق كائن، حتى هذه الخصائص يمكن أن تكون الكائنات الأخرى. وداخل هذه الكائنات يمكن أن تكون الكائنات الأخرى. 

لديك هذا الكائن كبير جدا مع الكثير من الأشياء الأخرى داخل منه، الذي نوع من يخلق هذه الفكرة من شجرة كبيرة. الآن، كائن المستند هو كائن خاص جدا في جافا سكريبت الذي ينظم كامل الويب الخاص بك الصفحة تحت هذا النوع من مظلة كائن. وحتى داخل الوثيقة الكائن كائنات عرض الرأس والجسم من صفحة الويب الخاصة بك. 

داخل تلك هي الأخرى الأشياء، وهلم جرا، وهلم جرا، حتى صفحة الويب الخاصة بك بأكملها نظمت في هذا الكائن كبير. ما هو الاتجاه الصعودي هنا، أليس كذلك؟ حسنا، نحن نعرف كيفية العمل مع الكائنات في جافا سكريبت. 

حتى إذا كان لدينا كائن يشير إلى صفحة على شبكة الإنترنت بأكملها، أن يعني عن طريق استدعاء صحيحة طرق لمعالجة هذا الكائن أو تعديل بعض من خصائصه، ونحن يمكن تغيير عناصر صفحتنا برمجيا باستخدام جافا سكريبت بدلا من الاضطرار إلى رمز الأمور، ويقول، HTML. حتى هنا مثالا ل بسيطة جدا صفحة على شبكة الإنترنت، أليس كذلك؟ انها حصلت على علامات HTML، رأس. 

داخل هناك عنوان، مرحبا العالم. ثم لدي الجسم. داخل ذلك، ولدي ثلاثة أشياء مختلفة. لدي علامة رأس H2، فقرة، وارتباط. هذه هي صفحة ويب بسيطة جدا. 

حسنا، ما قد الوثيقة الاعتراض لهذا تبدو؟ حسنا، انها قليلا مخيف ربما في البداية. لكنها في الحقيقة مجرد شجرة كبيرة. وعلى الجذر ذاته هو وثيقة. 

داخل الوثيقة أخرى الكائن في اشارة الى HTML من الصفحة الخاصة بي. وHTML صفحتي هي كل هذا. ثم داخل HTML وجوه، ولدي الكائن الرأس، الذي يشير إلى كل شيء هناك. 

وداخل هناك، لدي كائن العنوان. وداخل هناك، ولدي آخر يعترض هذا مجرد مرحبا العالم. أنا يمكن أن يكون جسدي ممثلة من هذا القبيل. 

داخل جسدي، لدي H2 وجوه وجوه ص للفقرة وكائن لارتباط. وحتى هذا التسلسل الهرمي بأكمله يمكن أن تكون ممثلة مثل شجرة كبيرة مع الكثير من القليل أصغر الأشياء التي تخرج منه. الآن، بالطبع، عندما نحن البرمجة، ونحن لا أفكر في أشياء مثل شجرة كبيرة. نريد أن نرى الفعلية كود الأمور ذات الصلة. 

ولحسن الحظ، ما في وسعنا استخدام أدوات المطورين لدينا أن تأخذ في الواقع نظرة على هذا الموقع لكائن المستند. ودعونا نفعل ذلك. حتى لقد فتحت علامة تبويب المتصفح. 

ولقد فتحت أدوات المطور. وفي الفيديو الخاص بي على جافا سكريبت، I ذكر أن وحدة ليست مكان إلا إذا نحن طباعة المعلومات، كما انها مكان نستطيع إدخال المعلومات. في هذا السياق، ما انا ذاهب الى قوله هو وأود أن نعود الكائنات وثيقة، حتى أتمكن من البدء في إلقاء نظرة على ذلك. فكيف يمكن أن أفعل هذا؟ حسنا، إذا كنت تريد تنظيمها بشكل جيد حقا، انا ذاهب الى القول console.dir، D-I-R. الآن، وأنا استخدم console.log لطباعة عادلة شيء بسيط جدا. ولكن إذا كنت ترغب في تنظيم هذا هرمي مثل كائن، أريد أن نوعا من التنظيم مثل بنية دليل. 

لذلك أريد أن console.dir الوثيقة. انا ذاهب الى هاهنا. والحق تحتها الآن، وسوف تكبير هنا، لقد حصلت على هذه الوثيقة استجابة مع السهم الصغير المجاور له. الآن، عندما أفتح هذا السهم، هناك سيكون الكثير من الاشياء. 

ولكن ونحن في طريقنا إلى تجاهل الكثير منه، ونوع عادل التركيز على الجزء الأكثر أهمية، لذلك نحن يمكن البدء في التنقل هذه الوثيقة. هناك الكثير لDOM من العقد والعقد التابعة فقط الأم. هناك الكثير من الاشياء التبعية. 

لذلك أنا ذاهب لفتح هذا الأمر. وهناك الكثير كله من الاشياء التي دفعها. ولكن كل ما يهمني هو هنا، العقد التابعة. دعونا فتح ان ما يصل. 

داخل هناك أرى شيء مألوف، HTML. حتى داخل ثيقتنا مستوى واحد لأسفل، HTML. I فتح أن ما يصل. ما نحن نتوقع؟ 

إذا كنت تذكر من الرسم البياني لدينا، ما يجب أن نجد داخل HTML؟ ما عقدتين هي أقل من ذلك في الشجرة؟ هيا نكتشف. نفتح الباب HTML. نذهب الى العقد التابعة لها. 

البوب ​​يمكن فتحها. هناك الرأس والجسم. ونحن يمكن أن تفتح الرأس. الذهاب إلى العقد التابعة لها. حسنا، هناك على اللقب. 

ويمكن أن نذهب في و على هذا المنوال إلى الأبد. يمكننا أن نفعل هذا مع الجسم كذلك. ولكن هناك وسيلة بالنسبة لنا أن ننظر إلى وثيقة تنظيم ككائن كبيرة. وإذا نظرنا هو كبير الكائن الذي يتطلع الكثير مثل الرمز، وهذا يعني أننا يمكن أن تبدأ على التعامل مع هذا الكائن كبيرة باستخدام كود لتغيير ما لدينا الموقع يبدو وكأنه. 

لذلك هذا هو أداة قوية جدا لدينا في حوزتنا الآن. لذلك كما رأينا للتو، وثيقة الكائن نفسه وكافة الكائنات داخل منه لها خصائص وأساليب، فقط مثل أي كائن آخر أن لدينا تم العمل مع في جافا سكريبت. ولكن يمكننا استخدام هذه الخصائص و استخدام تلك الأساليب لحفر نوع من أسفل من وثيقة كبيرة والحصول على أقل وأقل وأقل، أدق وأدق الحبوب من التفصيل، حتى نحن الحصول على قطعة محددة جدا لدينا صفحة الويب التي نريد تغيير. 

وعندما نقوم بتحديث خصائص توثيق كائن أو استدعاء تلك الأساليب، أشياء قد تحدث على صفحة الويب لدينا. ونحن لسنا في حاجة للقيام بأي منعش أن تكون تلك التغييرات نافذة المفعول. 

وهذا هو القدرة باردة جدا ل لديك عندما كنا نعمل مع رمز. فما هي بعض من هذه الخصائص التي هي جزء من كائن مستند؟ حسنا، ربما كنت رأيت اثنين منهم بسرعة حقا كما كنا فتح سوستة من خلال وثيقة العملاقة كائن رأينا فقط في متصفح الويب. 

ولكن اثنين من هذه الخصائص قد تكون أشياء مثل HTML الداخلية. وربما كنت أذكر لي استخدام هذا في شريط الفيديو جافا سكريبت في النهاية عندما كنت كان يتحدث عن الأحداث. ما كان هذا HTML الداخلية؟ حسنا، انها مجرد ما في بين العلامات. 

وهكذا HTML الداخلية، على سبيل المثال، عن لقبه العلامة، إذا كنا قد أبقى تسير في هذا المثال قبل لحظة، كان يمكن أن يكون مرحبا العالم. كان ذلك عنوان صفحتنا. خصائص أخرى تشمل اسم العقدة، التي هو اسم لHTML عنصر مثل العنوان. ID، وهو ID السمة عنصر HTML. 

أذكر أننا يمكن أن تشير إلى خصيصا عناصر محددة لدينا HTML مع سمة الهوية، والتي عادة ما تأتي في متناول اليدين في سياق CSS، على وجه التحديد. العقدة الأصل، وهو إشارة إلى ما هو لتو فوقي في DOM. والعقد التابعة، وهي إشارة إلى ما هو أسفل تحتي. ورأينا الكثير من ذلك مجرد النظر من خلال. العقد التابعة، وهذا هو كيف وصلنا أقل وأقل في الشجرة. 

الصفات، وهذا مجرد مجموعة من سمات العنصر HTML. لذلك مثالا من الصفات قد يكون إذا كان لديك علامة صورة، أنها عادة ما تكون سمة المصدر، ربما الطول وسمة العرض. وذلك من شأنه أن يكون مجرد مجموعة لجميع الصفات المرتبطة مع هذا العنصر HTML. 

الاسلوب هو واحد آخر لا تمثل CSS التصميم من عنصر معين. وفي وقت لاحق في هذا الفيديو، وسوف نقوم على وجه التحديد أسلوب ضغط لجعل زوجين من التغييرات على موقعنا على الانترنت. حتى تلك هي بعض الخصائص. 

وهناك أيضا بعض طرق ما في وسعنا استخدام إليها أيضا بسرعة أكبر وربما عزل عناصر من كائن المستند. ربما، والأكثر تنوعا هذه كونها getElementById. لذلك أنا قد تقول شيئا مثل، ل تذكر انها وسيلة من وثيقة الاعتراض، document.getElementById. 

وداخل تلك الأقواس، حدد عنصر HTML مع معرف خاص السمة التي قمت سابقا مجموعة، وسوف أكون على الفور انتقل الحق في هذا العنصر الموقع العام. لذلك أنا لم يكن لديك لحفر ربما إلى أسفل من خلال كل طبقة واحدة. يمكنني فقط استخدام هذا الأسلوب للعثور عليه، نوع من مثل صاروخ الحرارة تسعى، الصحيح؟ وغني فقط، ويجد بالضبط ما انها تبحث عنه. 

GetElementsByTagName هو تشبه الى حد بعيد في الروح. ربما هذا من شأنه أن تجد كل من علامات جريئة أو كل علامات ص وتعطيني مجموعة من كل شيء هذا وبعد ذلك يمكن التعامل معها. appendChild يضيف شيئا مستوى واحد لأسفل في الشجرة. 

حتى أتمكن من إضافة جديد كامل عنصر برتبة أدنى. أو يمكنني إزالة عنصر هذا مستوى واحد أقل، وكذلك إذا أريد لحذف شيء من صفحة الويب الخاصة بي. الآن، ومذكرة الترميز سريعة وسريعة الصداع الصيفي علما، ونأمل. 

getElementById-- د هو صغيرة. لا استطيع ان اقول لكم كم مرة لدي معتادين getElementById ورسملة د هناك. لأنه من الشائع حقا. إذا نكتب ID كلمة، انها عادة العاصمة I العاصمة D. وقانون بلدي فقط لا يعمل. وأنا لا يمكن معرفة السبب. هذا هو حقا، حقا، حقا علة المشترك الذي يجعل الجميع، حتى الخبراء التي لديها تم القيام بذلك إلى الأبد. هكذا فقط تكون على علم، getElementById، أن د هو صغيرة. ونأمل أن يوفر لك عدة دقيقة على الأقل من وجع القلب. 

فماذا يعني كل هذا يقول لنا؟ لدينا هذه الأساليب. لدينا هذه الخصائص. الآن، إذا انطلقنا من الوثيقة، وثيقة. أيا كان، يمكننا الآن الحصول على أي قطعة واحدة من صفحة الويب لدينا أننا نريد أن باستخدام جافا سكريبت فقط من خلال استدعاء هذه الطرق والاستفادة من الخصائص التي نجدها في مختلف المواقع. 

يمكن الحصول على هذه الالفاظ، هذا document.getElementByID، ربما يكون اسم العلامة طويل، ربما كنت بذل المزيد من المكالمات في وقت لاحق. أشياء يمكن الحصول على الالفاظ قليلا. وكما المبرمجين، وكنت قد ربما ينظر في العديد من أشرطة الفيديو هذه، نحن لا نحب الأشياء الالفاظ. 

نود أن تكون قادرة على القيام الامور بسرعة. لذلك نود أكثر طريقة مختصرة ليقول شيئا. لذلك هذا النوع من شأنه أن يؤدي إلى فكرة من شيء يسمى مسج. الآن مسج ليس جافا سكريبت. انها ليست جزءا من جافا سكريبت. 

هو المكتبة التي كانت مكتوبة من قبل بعض المبرمجين جافا سكريبت قبل نحو 10 عاما. وهدفها هو تبسيط هذا ما دعا العميل البرمجة الجانب، والتي هو أساسا ما كنا فقط يتحدثون عن التلاعب DOM. وهكذا إذا أردت أن تعديل لون خلفية الصفحة الويب الخاص بي، ربما لشعبة محددة. 

هنا، وأنا على ما يبدو الحصول على ElementById colorDiv. وأريد أن أضع لون خلفيتها. إذا أنا فقط باستخدام نقية جافا سكريبت باستخدام نموذج كائن المستند كما أن هناك العديد من الأشياء، أليس كذلك؟ document.getElementByID colorDiv.style.backgroundColor = الأخضر. 

يا للعجب. كان ذلك الكثير ليقوله. انها الكثير لكتابة أيضا. وحتى في مسج، يمكننا أن نقول ربما هذا قليلا أكثر دقة. مقايضة كونها قد حان ربما قليلا أكثر قليلا خفي مفاجئة للجميع، الصحيح؟ 

على الأقل لفترة طويلة هو أكثر قليلا التفسيرية على ما نقوم به. هذه علامة الدولار، بين قوسين، اقتباس واحد، تجزئة، colorDiv، أليس كذلك؟ ماذا يعني ذلك؟ حسنا، هذا الأساس فقط document.getElementByID colorDiv. 

ولكن من هذا النوع من الاختزال طريقة لفعل ذلك باستخدام مسج. دعونا فقط نلقي نظرة الآن في عدة طرق مختلفة أنني قد فعلا استخدام هذا كائن المستند نموذج للتلاعب قطعة من موقعي. على وجه الخصوص، ونحن في طريقنا أن تعمل على التلاعب لون معين شعبة، colorDiv، على صفحة ويب. لذلك دعونا نلقي نظرة على ذلك. حسنا. لذلك أنا على صفحة. انه دعا test.html عند تحميل هذا إذا كنت تريد العبث مع هذا. ولقد حصلت على حفنة من الأزرار الموجودة على هذه الصفحة. وأنا أقول الوظائف الفردية للون الخلفية، الأرجواني، الأخضر، البرتقالي والأحمر والأزرق، وظيفة واحدة للون الخلفية، معالج الحدث للون الخلفية، واستخدام مسج. ما أتحدث عنه عندما أفعل هذا؟ لذلك رأيناه الأزرار. الآن، دعونا نلقي نظرة على بعض من شفرة المصدر هنا. سنبدأ مع test.html. وظائف فردية جدا لخلفية اللون هو ما كنت كتبته هنا. اسمحوا لي أن انتقل قليلا. 

وستلاحظ أن I حددت هذه الأزرار القول عند النقر على هذا الزر، استدعاء الدالة تحويل الأرجواني. عندما يكون هذا الزر هو النقر، بدلا من ذلك، استدعاء الدالة يتحول إلى اللون الأخضر، تحويل البرتقال، بدوره الأحمر، بدوره الزرقاء. ربما يمكنك تخمين أن هذا وربما لا يكون أفضل تصميم بمعنى، أليس كذلك؟ 

سيكون من الجميل لو استطيع اتباع نهج أكثر عمومية. حسنا، أولا نحن سوف نلقي نظرة على ما هي تلك الوظائف الخمس document.getElementByID colorDiv.style.background = الأرجواني، الأخضر والبرتقالي والأحمر، والأزرق، على التوالي. لذلك، لا سيما أفضل تصميم. 

المجموعة التالية من الأزرار لقد ولقد كتب وظيفة واحدة تسمى تغيير اللون الذي يبدو يقبل سلسلة ك حجتها. لذلك هذا هو أفضل قليلا. الأرجواني والأخضر والبرتقالي والأحمر، الأزرق هو الآن حجة. حتى لقد كتب أكثر عمومية حالة جافا سكريبت وظيفة، والتي قد تبدو شيئا من هذا القبيل. أنا يمر في. هذا اللون تغير وظيفة هو تتوقع حجة يسمى اللون. وأنا أقول تعيين لون الخلفية إلى لون. حتى هنا يمثل ما عندي هنا. ولهذا أفضل قليلا. 

ولكني قد تكون قادرة على نفعل ما هو أفضل من ذلك. إذا كان لنا أن ننزل إلى إلقاء نظرة في الوضع معالج الحدث، الآن كل هذه المكالمات بالطريقة نفسها. اذا كنت أذكر لدينا النقاش حول معالجات الأحداث، يمكنني الحصول على معلومات حول أي من تم النقر على هذه الأزرار واستخدام ذلك. 

وذلك في event.JavaScript، لقد مكتوبة حدث تغيير اللون، والتي الأرقام إلى الزر الذي تم النقر. هذا هو خط الكائن الزناد. ثم هنا، فإنه يحصل على الالفاظ حقا. ولكن ما أفعله هو أنا وضع الخلفية لون triggerObject inner.HTML. هذا النص في بين العلامات زر. 

وبعد ذلك على ما يبدو لديها لتعيينها إلى أحرف صغيرة. وهذه هي الطريقة التي يمكنني تحويل كامل سلسلة إلى أحرف صغيرة في جافا سكريبت باستخدام هذا الأسلوب إلى أحرف صغيرة. لأنه عندما احدد اللون، وأنا أحاول القيام به هنا، اللون يجب أن يكون كل صغيرة. 

ولكن الزر الذي كان لي، إذا كان لنا أن نلقي نظرة أخرى، لاحظ أن النص هناك مكتوبة مع P رأس المال للالأرجواني. وبعد ذلك في غاية أسفل هنا، وأنا على ما يبدو محاولة القيام بذلك باستخدام مسج كذلك. وفي هذه الحالة، أنا لست في الواقع استدعاء دالة على الإطلاق. لقد قلت فقط الفئة التي أنا استخدام لهذا الزر هو زر JQ. هذا كل شيء. 

فكيف لا مسج أعرف ما أفعله؟ حسنا، هذه هي واحدة من المزايا خفض عيوب مسج. يمكن أن اسمحوا لي أن تفعل أشياء بإيجاز جدا، ولكن ربما لا كما حدسي. ربما هؤلاء الثلاثة الأخرى جعل أكثر قليلا بمعنى ما أفعله. هنا، على الرغم من ما يحدث؟ 

على ما يبدو، وخلق وظيفة مجهول الذي يحمل كلما المستند جاهز، document.ready ذلك، بعض من وظيفة ما سيحدث. في الأساس، وعندما وثيقة جاهزة؟ انها عندما صفحتي وقد حملت. 

ذلك في أقرب وقت صفحتي تمت تحميل، التالي ظيفة مستعدة دائما. وتقول، إذا كائن من نوع jQButton، أو إذا تم النقر الدرجة jQButton، تنفيذ هذه المهمة. حتى هنا وظيفتين مجهولة، واحدة محددة داخل الآخر. 

حتى بلدي السياق كامل هنا حتى الآن هو صفحتي عند تحميل يدعو هذه الوظيفة. وهذه وظيفة تنتظر لزر إلى النقر. وعند النقر على زر، JQ زر على وجه التحديد والنقر عليها، ويدعو هذا البعض وظيفة، والتي يجري لضبط الخلفية لون colorDiv أن يكون أيا كان النص في بين العلامات. 

هذا هو مفهوم الزر الذي تم النقر. لكن على خلاف ذلك، وهذا هو نوع من يتصرف على غرار هذا الحدث. انها مجرد بنفس الطريقة I أن التعبير عن هذا في مسج. مرة أخرى، فإنه على الأرجح الكثير أكثر ترهيبا. انها ليست واضحة كما شيء من هذا القبيل event.js، وهو ربما أكثر قليلا أقل مطول، ولكن قليلا تخويفه. 

ولكن إذا كنا البوب ​​العودة الى متصفحي نافذة، وإذا كنت بدء clicking-- جيدا، التي غيرت إلى اللون الأرجواني. هذا هو الأخضر باستخدام طريقة السلسلة. هذا هو البرتقال باستخدام معالج الأحداث. 

وهذا هو الأحمر باستخدام مسج، أليس كذلك؟ أنهم جميعا تتصرف بالضبط نفس الشيء. يفعلون فقط باستخدام مختلف نهج لحل المشكلة. هناك الكثير ل مسج ثم نحن بالتأكيد بصدد الحديث عنه في هذا الفيديو. ولكن إذا كنت ترغب في معرفة المزيد، يمكنك انتقل إلى نوع مسج من وثائق وتعلم أكثر قليلا جدا حول هذه مكتبة مرنة جدا، والتي عظيم للقيام العميل البرمجة مثل ما كنا نقوم به لمعالجة نظرة ويشعر من صفحة على شبكة الإنترنت مع طراز كائن المستند. أنا دوغ ويد. هذا هو CS50.