ДАГ Lloyd: У цьому відео ми хотіли щоб викликати окремої уваги зокрема, дуже елемент JavaScript що ви могли б знайти під рукою коли ви починаєте працювати на маніпулюванні веб-сторінок і зміни змісту веб-сторінки на льоту. І це поняття Об'єктна модель документа. Отже, як ми бачили в нашому відео на JavaScript, є дуже гнучкими. І вони можуть містити різні поля. І хоча ми не пішли на багато докладно, ці поля або властивості, що ми, ймовірно, більш відповідно називати їх в контексті об'єкта, навіть Ці властивості можна інші об'єкти. А всередині цих об'єктів можуть бути й інші об'єкти. 

Ви повинні це дуже великий об'єкт з великою кількістю інших об'єктів всередині нього, щось створює цю ідею великого дерева. Тепер, об'єкт документа є дуже спеціальний об'єкт в JavaScript який організовує всю вашу мережу сторінка під такого роду парасолькою об'єкта. І так всередині документа об'єкт об'єкти, що представляють є голова і тіло вашої веб-сторінці. 

Усередині ті одного об'єкти, і так далі, і так далі, до вся ваша веб-сторінка не має був організований в цьому великому об'єкті. Що вгору тут, вірно? Ну, ми знаємо, як працювати з об'єктами в JavaScript. 

Так що, якщо у нас є об'єкт, який відноситься до всієї нашої веб-сторінці, що означає, зателефонувавши правильно методи, щоб маніпулювати, що об'єкт або зміни напевно його властивостей, ми може змінювати елементи наша сторінка програмно за допомогою JavaScript, замість того, кодувати речі, скажімо, HTML. Так ось приклад дуже простий веб-сторінки, чи не так? Він отримав HTML-теги, голову. 

Усередині є назва, привіт світ. Тоді у мене є тіло. Всередині, що в мене є трьох різні речі. У мене є тег заголовка h2, абзац, а також посилання. Це дуже простий веб-сторінки. 

Ну, те, що документ може об'єкт для цього виглядати? Ну, це трохи страшно, може бути, в першу чергу. Але це насправді просто велике дерево. І в самому корені ній документ. 

Усередині документ є ще одним Об'єкт з посиланням на HTML моїй сторінці. І HTML моїй сторінці все це. І тоді всередині HTML об'єкт, у мене є об'єкт голову, який відноситься до всього там. 

А всередині там, У мене є об'єкт назву. А всередині там, у мене є ще один заперечити, що просто привіт світ. Я міг би моє тіло представлені, як це. 

Усередині мого тіла, у мене є h2 об'єкт і об'єкт р по пункту і об'єкт для посилання. І так вся ця ієрархія може бути представлена ​​у вигляді великого дерева з великим меншого Літтл речі виходять з нього. Тепер, звичайно, коли ми програм, ми Не думаю, що таких речей, як велике дерево. Ми хочемо, щоб поточна код, пов'язані речі. 

І, на щастя, ми можемо використовувати наші інструменти для розробників насправді поглянути на Об'єкт документа цього веб-сайту. І давайте зробимо це. Так що я відкрив вкладку браузера. 

І я відкрив Developer Tools. І в моєму відео на JavaScript, я зазначив, що консоль НЕ тільки десь, де ми друкуємо інформацію, це також місце, де ми можемо вхідну інформацію. У цьому контексті, що Я збираюся сказати, Я хотів би повернутися об'єкти документів, так що я можу почати, щоб поглянути на нього. Так як я міг це зробити? Ну, якщо я хочу організувати дуже красиво, Я хочу сказати, console.dir, D-I-R. Тепер, я використовую console.log просто роздрукувати щось дуже просте. Але якщо я хочу, щоб організувати це ієрархічно як об'єкт, Я хочу це свого роду структурований як структури каталогів. 

Тому я хочу, щоб console.dir документ. Я вдарю Enter. І прямо під ним зараз, і я буду наближати тут, Я отримав цей документ реагування з невеликою стрілкою поруч з ним. Тепер, коли я відкриваю цю стрілку, там буде багато речей. 

Але ми збираємося ігнорувати багато з нього і тільки частково у фокусі на найважливішій частині, таким чином, ми може почати переміщатися цей документ. Там набагато більше до DOM, ніж просто батько вузли і дочірні вузли. Там дуже багато допоміжного матеріалу. 

Так що я збираюся відкрити це. І є багато речі, які спливає. Але все, що я дбаю про те прямо тут, дочірні вузли. Давайте відкриємо, що до. 

Всередині є я бачу щось знайоме, HTML. Так всередині нашого документа один рівень вниз, HTML. Я відкриваю, що до. Що ми очікуємо? 

Якщо ви пам'ятаєте з нашої діаграмі, що ми маємо знайти всередині HTML? Які два вузли під ним в дереві? Давай дізнаємось. Ми відкриваємо HTML. Ми спускаємося в його дочірніх вузлів. 

Поп, які відкриваються. Там голова і тіло. І ми можемо відкрити голівку. Перейти до його дочірніх вузлів. Ну, є назва. 

І ми могли б піти далі і на, як це назавжди. Ми могли б зробити це з тілом, а також. Але є спосіб для нас, щоб дивитися на документ організований як великий об'єкт. І якщо ми подивимося на великій об'єкт, який виглядає багато як код, це означає, що ми можемо почати маніпулювати цією великий об'єкт за допомогою Код змінити те, що наші сайт виглядає і відчуває, як. 

Так що це досить потужний інструмент ми маємо в нашому розпорядженні в даний час. Так як ми тільки що бачили, Сам документ об'єкт і всі об'єкти всередині нього мають властивості і методи, просто як і будь-який інший об'єкт, який ми працює з в JavaScript. Але ми можемо використовувати ці властивості і використовувати ці методи, щоб свого роду розгорнути з великою документа і отримати все нижче і нижче, і нижче, тонше і тонше зерна НЕ деталізації, поки ми потрапити в дуже певної частини нашого веб-сторінки, які ми хочемо змінити. 

І коли ми оновлюємо властивості Документ об'єкт або зателефонуйте ті методи, Можуть відбутися на нашій веб-сторінці. І ми не повинні робити нічого освіжаючий щоб ці зміни вступили в силу. 

І це дуже здорово здатність Тобто, коли ми працюємо з кодом. Так що деякі з цих властивостей які є частиною об'єкта документа? Ну, ви, ймовірно, бачив пара з них дійсно швидко як ми були стиснути через гігантський документа Об'єкт ми тільки що бачили в веб-браузері. 

Але пару з цих властивостей може бути щось на зразок внутрішньої HTML. І ви, можливо, навіть згадати мене використовуючи це у відео JavaScript в самому кінці, коли я говорив про події. Що це внутрішня HTML? Ну, це просто те, що між тегами. 

І так внутрішній HTML, Наприклад, назви тег, якби ми продовжували йти в що, наприклад, хвилину тому, було б привіт світ. Це була назва нашої сторінки. Інші властивості включають в себе ім'я вузла, який це ім'я з HTML елемент, такий як назва. ID, який є ідентифікатором атрибут HTML елемента. 

Нагадаємо, що ми можемо спеціально вказати конкретні елементи нашого HTML з ID атрибуту, який зазвичай прігождается в контексті CSS, спеціально. Батьківський вузол, який є посиланням на що тільки нагорі мене в DOM. І дочірні вузли, що є посилання на те, що внизу мене. І ми побачили, що багато просто переглядаючи. Дочірні вузли, які, як ми отримали все нижче і нижче в дереві. 

Атрибути, це просто масив з атрибути HTML елемент. Так приклад атрибутів може якби у вас є тег зображення, він зазвичай має атрибут вихідного, може бути, висота і ширина атрибут. І так, що б просто бути масивом з усіх атрибутів, пов'язаних з цією HTML елемента. 

Стиль ще один, який зовсім представляють CSS укладка конкретного елемента. А потім у цьому відео, ми будемо спеціально важелі стиль зробити пару зміни на нашому сайті. Так що ті, деякі властивості. 

І є також деякі Методи, які ми можемо використовувати також більш швидко, може бути, ізолювати елементи об'єкта документа. Може бути, самий універсальний з них є getElementById. Так що я міг би сказати щось на зразок, бо пам'ятайте, що це метод Документа Об'єкт, document.getElementById. 

А всередині цих дужок, вкажіть HTML-елемент з певною ID атрибутів, що я раніше встановлений, і я відразу ж буду йти прямо до цього елементу від загального веб-сайту. Так що я не повинен, може бути, свердлити вниз через кожен шар. Я можу просто використовувати цей метод, щоб знайти його, ніби як тепло шукає ракети, вірно? Це просто йде і знаходить саме те, що він шукає. 

GetElementsByTagName є дуже схожі по духу. Може бути, це буде знайти всі з сміливі теги і всі р тегів і дати мені масив все що я міг би працювати. AppendChild додає щось один рівень вниз в дереві. 

Так що я можу додати весь новий елемент на один рівень нижче. Або я можу видалити елемент, що це один рівень нижче, а якщо я хочу видалити щось з моєї веб-сторінці. Тепер, швидке примітка кодування і швидко головний біль економії відома, сподіваюся. 

getElementById-- Д в нижньому регістрі. Я не можу сказати вам, скільки разів я повинен б getElementById і капіталізуються Д є. Тому що це дійсно спільне. Якщо ми пишемо слово ID, це як правило, капітал Капітал I Д. І мій код просто не працює. І я не можу зрозуміти, чому. Це дійсно, дійсно, дійсно загальна помилка, що кожен робить, навіть експерти, які мають робив це назавжди. Так просто бути в курсі, getElementById, що г в нижньому регістрі. І можна сподіватися, що економить кілька хвилин, принаймні душевного болю. 

Отже, що ж все це нам говорить? У нас є ці методи. У нас є ці властивості. Тепер, якщо ми виходимо з документ, документ. все, тепер ми можемо отримати будь один шматок нашій веб-сторінці що ми хочемо, щоб за допомогою JavaScript просто називати ці методи і використовуючи властивості що ми знаходимо в різних місцях. 

Це може стати багатослівним, це document.getElementById, може бути, є довгий ім'я тега, Може бути, ви більше дзвінків пізніше. Речі можуть отримати трохи багатослівні. І як програмісти, як ви, напевно, бачили в багатьох з цих відео, нам не подобається багатослівні речі. 

Ми хотіли б бути в змозі зробити речі швидко. Таким чином, ми хотіли б більш коротким спосіб сказати щось. Так що це свого роду призводить до Поняття, що називається JQuery. Тепер JQuery НЕ JavaScript. Це не частина JavaScript. 

Це бібліотека, яка була написана деякі програмісти JavaScript близько 10 років тому. І його метою є, щоб спростити це те, що називається стороні клієнта сценаріїв, які в основному те, що ми були просто говорити про з DOM маніпуляцій. І тому, якщо я хотів, щоб модифікувати Колір фону моєї веб-сторінці, може бути, специфічний Дів. 

Ось я, очевидно, отримувати ElementById colorDiv. І я хочу, щоб встановити його колір фону. Якщо я тільки за допомогою чистого JavaScript з використанням Document Object Model, це багато речей, чи не так? document.getElementById colorDiv.style.backgroundColor = зелений. 

Ось так. Це було багато, щоб сказати. Це багато, щоб ввести, теж. І так в JQuery, ми можемо сказати, може бути, це трохи більш коротко. Компроміс бути це, можливо, трохи трохи більше загадкове раптом, вірно? 

Принаймні, довго ще трохи пояснюючими, як те, що ми робимо. Цей знак долара, круглі дужки, апостроф, хеш, colorDiv, вірно? Що це означає? Ну, це в основному тільки document.getElementById colorDiv. 

Але це такого роду стенографії спосіб зробити це за допомогою JQuery. Давайте просто подивіться зараз на кілька різних способів що я насправді може Використовуйте цей об'єкт Document Модель маніпулювати частини мого сайту. Зокрема, ми збираємося працювати на маніпулюванні колір конкретний Дів, colorDiv, на веб-сторінці. Отже, давайте поглянемо на це. Добре. Так що я на сторінці. Це називається test.html, коли ви завантажуєте це, якщо ви хочете, щоб возитися з цим. І я отримав купу Кнопки на цій сторінці. І я кажу окремі функції для колір фону, фіолетовий, зелений, оранжевий, червоний, синій, одна функція для кольору фону, обробник події для кольору фону, і за допомогою JQuery. Що я кажу про коли я роблю це? Таким чином, ми бачили кнопки. Тепер, давайте поглянемо на деякі з вихідного коду тут. Ми почнемо з test.html. Так окремі функції для фону колір, що я набрав тут. Дозвольте мені прокрутити небагато. 

І ви помітите, що я визначили ці кнопки сказати, коли ця кнопка натиснута, викликати функцію включити фіолетовий. Коли ця кнопка миші, а, викликати функцію зеленіти, помаранчевим, червоним, синім. Ви, напевно, можете здогадатися, що це Можливо, це не найкращий дизайн сенс, вірно? 

Було б непогано, якби я міг мають більш загальний підхід. Ну, по-перше, ми будемо дивитися на те, що ці п'ять функцій document.getElementById colorDiv.style.background = фіолетовий, зелений, оранжевий, червоний, і синій, відповідно. Так, зокрема, не кращий дизайн. 

Наступний набір кнопок Я це я написав одна функція називається змінити колір, що, мабуть сприймає рядок в якості аргументу. Так що це трохи краще. Фіолетовий, зелений, помаранчевий, червоний, синій тепер аргумент. Так що я написав більш загальний Справа функція JavaScript, які могли б виглядати наступним чином. Я передаю в. Це зміна кольору функція чекаючи аргумент з ім'ям кольору. І я кажу встановити колір фону колір. Так тут представляє те, що я потрапив сюди. Так що це трохи краще. 

Але я міг би бути в змозі краще, ніж це. Якщо ми йдемо вниз, щоб поглянути в ситуації обробника подій, Тепер всі ці виклики виглядають однаково. Якщо згадати для нашого обговорення обробників подій, Я можу отримати інформацію про те, які з ці кнопки натиснули і використовувати. 

І так в event.JavaScript, у мене написано зміна кольору подія, яка з'ясовує, яка кнопка була натиснута. Це об'єкт тригера лінії. І тоді тут, це стає дійсно багатослівним. Але те, що я роблю, я установка фон колір triggerObject inner.HTML. Ось текст між тегами кнопки. 

І тоді я, очевидно, мають щоб встановити його в нижній регістр. І це, як я можу перетворити все рядок в нижній регістр в JavaScript за допомогою що метод в нижній регістр. Тому що, коли я поставив колір, як я намагаюся зробити тут, колір повинен бути в нижньому регістрі. 

Але кнопка, яка у мене була, якщо ми ще раз поглянути, зауважити, що текст є написано з великої літери для фіолетовий. І тоді, по крайней Нижня тут, я, здається, спробувати зробити це, використовуючи JQuery, а також. І в цьому випадку, я насправді не виклик функції взагалі. Я тільки що сказав, що клас Я використовуючи для цього є кнопка JQ. Це воно. 

Так як же JQuery знаю, що я роблю? Ну, це одна з переваг скоротити недоліки JQuery. Це може дозволити мені робити те, дуже лаконічно, але, можливо, не а інтуїтивно. Може, ті, інші три зробити трохи більше відчувати, що я роблю. Тут, однак, те, що відбувається? 

Судячи з усього, створення анонімна функція що всякий раз, коли мій вантажі документ готовий, так document.ready, деякі функції станеться. В основному, коли документ готовий? Це коли моя сторінка завантажиться. 

Тому, як тільки моя сторінка завантажена, Наступна функція завжди готовий. Це говорить, якщо об'єкт типу jQButton, або якщо клас jQButton була натиснута, виконати цю функцію. Так ось два анонімних функцій, яка визначена усередині іншої. 

Так всю мою контексті тут досі моя сторінка при завантаженні він викликає цю функцію. І ця функція чекає Для кнопок буде натиснута. А коли натиснута кнопка, JQ Кнопка спеціально клацанні він викликає цей інший функція, яка буде щоб встановити фон Колір colorDiv бути будь-який текст, в між тегами. 

Це поняття кнопка, яка була натиснута. Але в іншому випадку, це свого роду себе схоже на події. Це точно так само, як я висловить це в JQuery. Знову ж таки, це, ймовірно, набагато більше залякати. Це не ясно, як щось на зразок event.js, що, може бути, трохи більше багатослівний, але трохи менше лякає. 

Але якщо ми поп-назад до браузері вікна, якщо я почну clicking-- добре, що змінилося в фіолетовий. Це зелений з використанням методу рядок. Це оранжевий, використовуючи обробник подій. 

Це червоний, використовуючи JQuery, вірно? Всі вони поводяться точно так само. Вони просто роблять це з використанням різних підходи до вирішення проблеми. Там дуже багато більше, щоб JQuery то ми, звичайно, поговоримо про в цьому відео. Але якщо ви хочете дізнатися більше, ви можете перейти до JQuery роду документації і дізнатися трохи більше про це дуже гнучка бібліотека, яка є великим для цього на стороні клієнта сценаріїв, таких як те, що ми робили маніпулювати вид і відчувати нашій веб-сторінці з об'єктної моделі документа. Я Дуг Ллойд. Це CS50.