SlideShare a Scribd company logo
1 of 32
http://vsimppt.com.ua/
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
Повторимо правила поведінки та безпеки
в комп’ютерному класі
http://vsimppt.com.ua/
DOM -
об'єктна
модель
документа
(Document
Object Model).
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
Процес формування DOM
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
Збирає до купи
DOM ресурсу
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
DOM ресурсу
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
DOM ресурсу
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
Вузол DOM має деревоподібну ієархію.
Документ DOM складається з вузлів Node. Кожен вузол
може містити у собі вбудований вузол, елемент, текст чи
коментар
<!-- коментар html --> для браузера це також вузол.
Ієрархія DOM
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
Для роботи з DOM у JavaScript є об'єкт document, який дозволяє:
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
видалити HTML-елементи і атрибути;
змінити всі HTML-елементи на сторінці;
змінити всі атрибути HTML на сторінці;
змінювати всі стилі CSS на сторінці;
додавати нові елементи HTML і атрибути;
створювати нові події на сторінці;
реагувати існуючі подій на сторінці.
JavaScript (JS) — динамічна, об'єктно-
орієнтована прототипна мова
програмування. Найчастіше
використовується для створення
сценаріїв веб-сторінок, що надає
можливість на стороні клієнта
(пристрої кінцевого користувача)
взаємодіяти з користувачем, керувати
браузером, асинхронно обмінюватися
даними з сервером, змінювати
структуру та зовнішній вигляд веб-
сторінки.
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
JavaScrip
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
Оголошення мови опису.
JavaScrip
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
Виведення повідомлення
JavaScrip
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
Реагування на застарілий браузер
JavaScrip
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
JavaScrip – вікно з клавішею «ОК».
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
Англ. - вікно попередження
JavaScrip – вікно з клавішею «ОК».
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
JavaScrip – вікно з клавішею «ОК».
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
Розбиття на рядки в «вікні попередження»
n
JavaScrip – вікно з клавішею «ОК».
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
JavaScrip – вікно з клавішею «ОК».
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
JavaScrip – вікно з клавішами «ОК» та «Cancel».
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
JavaScrip – вікно з клавішами «ОК» та «Cancel».
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
JavaScrip – вікно з полем вводу клавішами «ОК» та «Cancel».
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
JavaScrip – вікно з полем вводу клавішами «ОК» та «Cancel».
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
JavaScrip – вікно з полем вводу клавішами «ОК» та «Cancel».
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
JavaScrip – вікно з полем вводу клавішами «ОК» та «Cancel».
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
JavaScrip – вікно з полем вводу клавішами «ОК» та «Cancel».
Поняття об’єктної моделі документа. Веб-
програмування та інтерактивні сторінки.
Цікаво знати
http://vsimppt.com.ua/
Працюємо за комп’ютером
http://vsimppt.com.ua/
http://vsimppt.com.ua/
Працюємо з
інструкційними
картками
Працюємо за комп’ютером
Повторюємо
1. Що таке Document Object Model?
Опишіть процес формування DOM.
2. Продовжіть речення. JavaScript – це …
3. Опишіть вивчені способи інтерактивної
взаємодії з сайтом.
Домашнє завдання
Створити інтерактивну
сторінку опису родового
дерева вашої родини.
(Останнє вікно – це
детальна інформація про
Вашу родину котру ви
описали на сторінці).
До нових зустрічей!
http://vsimppt.com.ua/
http://vsimppt.com.ua/

More Related Content

Similar to 23

вивчення теми основи алгоритмізації та програмування
вивчення теми основи алгоритмізації та програмуваннявивчення теми основи алгоритмізації та програмування
вивчення теми основи алгоритмізації та програмування
Tamara Emec
 
Lec11 користувацькi елементи керування
Lec11 користувацькi елементи керуванняLec11 користувацькi елементи керування
Lec11 користувацькi елементи керування
cit-cit
 
10 клас иф технолог проф-ль завадський програм.
10 клас  иф технолог проф-ль завадський програм.10 клас  иф технолог проф-ль завадський програм.
10 клас иф технолог проф-ль завадський програм.
af1311
 
10 клас инф технолог профиль завадський програм.
10 клас  инф технолог профиль завадський програм.10 клас  инф технолог профиль завадський програм.
10 клас инф технолог профиль завадський програм.
af1311
 
Docsvision Кирильчук Сергій
Docsvision Кирильчук СергійDocsvision Кирильчук Сергій
Docsvision Кирильчук Сергій
Dokymentoznavstvo111
 

Similar to 23 (20)

ASP.Net basics
ASP.Net basics ASP.Net basics
ASP.Net basics
 
презентація поняття події
презентація   поняття подіїпрезентація   поняття події
презентація поняття події
 
9 клас. Урок 23. Системи опрацювання текстів.Текстовий редактор Word.
9 клас. Урок 23. Системи опрацювання текстів.Текстовий редактор Word.9 клас. Урок 23. Системи опрацювання текстів.Текстовий редактор Word.
9 клас. Урок 23. Системи опрацювання текстів.Текстовий редактор Word.
 
вивчення теми основи алгоритмізації та програмування
вивчення теми основи алгоритмізації та програмуваннявивчення теми основи алгоритмізації та програмування
вивчення теми основи алгоритмізації та програмування
 
Календарне планування 8 клас - Інформатика - Lazarus
Календарне планування 8 клас - Інформатика - LazarusКалендарне планування 8 клас - Інформатика - Lazarus
Календарне планування 8 клас - Інформатика - Lazarus
 
розділ 3 перший проект 1
розділ 3 перший проект 1розділ 3 перший проект 1
розділ 3 перший проект 1
 
Розробка веб-сайту. Основні етапи
Розробка веб-сайту. Основні етапиРозробка веб-сайту. Основні етапи
Розробка веб-сайту. Основні етапи
 
кикт
кикткикт
кикт
 
24
2424
24
 
Календарне планування 8 клас - Інформатика - Lazarus
Календарне планування 8 клас - Інформатика - LazarusКалендарне планування 8 клас - Інформатика - Lazarus
Календарне планування 8 клас - Інформатика - Lazarus
 
Lec11 користувацькi елементи керування
Lec11 користувацькi елементи керуванняLec11 користувацькi елементи керування
Lec11 користувацькi елементи керування
 
10 клас иф технолог проф-ль завадський програм.
10 клас  иф технолог проф-ль завадський програм.10 клас  иф технолог проф-ль завадський програм.
10 клас иф технолог проф-ль завадський програм.
 
10 клас инф технолог профиль завадський програм.
10 клас  инф технолог профиль завадський програм.10 клас  инф технолог профиль завадський програм.
10 клас инф технолог профиль завадський програм.
 
Календарне планування 8 клас - Інформатика - Lazarus
Календарне планування 8 клас - Інформатика - LazarusКалендарне планування 8 клас - Інформатика - Lazarus
Календарне планування 8 клас - Інформатика - Lazarus
 
Lazarus
LazarusLazarus
Lazarus
 
Docsvision Кирильчук Сергій
Docsvision Кирильчук СергійDocsvision Кирильчук Сергій
Docsvision Кирильчук Сергій
 
Java script + extjs
Java script + extjsJava script + extjs
Java script + extjs
 
8 clas r
8 clas r8 clas r
8 clas r
 
Календарне планування 8 клас - Інформатика - Lazarus
Календарне планування 8 клас - Інформатика - LazarusКалендарне планування 8 клас - Інформатика - Lazarus
Календарне планування 8 клас - Інформатика - Lazarus
 
Global logic tech talk switching to Angular.js
Global logic tech talk switching to Angular.jsGlobal logic tech talk switching to Angular.js
Global logic tech talk switching to Angular.js
 

More from ssuserb6c6cf (20)

1 lesson.pdf
1 lesson.pdf1 lesson.pdf
1 lesson.pdf
 
metod
metodmetod
metod
 
Тема 2.1.pptx
Тема 2.1.pptxТема 2.1.pptx
Тема 2.1.pptx
 
02.01 10 247
02.01 10 24702.01 10 247
02.01 10 247
 
01 22 245
01 22 24501 22 245
01 22 245
 
наказ про введення канікул з 28.02.2022. для сайту. головна
наказ про введення канікул з 28.02.2022. для сайту. головнанаказ про введення канікул з 28.02.2022. для сайту. головна
наказ про введення канікул з 28.02.2022. для сайту. головна
 
My.hotovi.pro.ditey.03.02
My.hotovi.pro.ditey.03.02My.hotovi.pro.ditey.03.02
My.hotovi.pro.ditey.03.02
 
Broshura u.razi.nadzvychaynoyi.sytuatsiyi.abo.03.02
Broshura u.razi.nadzvychaynoyi.sytuatsiyi.abo.03.02Broshura u.razi.nadzvychaynoyi.sytuatsiyi.abo.03.02
Broshura u.razi.nadzvychaynoyi.sytuatsiyi.abo.03.02
 
Rekom.vmist.tryvozhnoyi.valizy.03.02
Rekom.vmist.tryvozhnoyi.valizy.03.02Rekom.vmist.tryvozhnoyi.valizy.03.02
Rekom.vmist.tryvozhnoyi.valizy.03.02
 
1
11
1
 
1
11
1
 
2965 03.02 18
2965 03.02 182965 03.02 18
2965 03.02 18
 
1
11
1
 
1
11
1
 
4
44
4
 
3
33
3
 
2
22
2
 
1
11
1
 
1
11
1
 
2020
20202020
2020
 

23

  • 1. http://vsimppt.com.ua/ Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 2. Повторимо правила поведінки та безпеки в комп’ютерному класі http://vsimppt.com.ua/
  • 3. DOM - об'єктна модель документа (Document Object Model). Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 4. Процес формування DOM Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки. Збирає до купи
  • 5. DOM ресурсу Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 6. DOM ресурсу Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 7. DOM ресурсу Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки. Вузол DOM має деревоподібну ієархію. Документ DOM складається з вузлів Node. Кожен вузол може містити у собі вбудований вузол, елемент, текст чи коментар <!-- коментар html --> для браузера це також вузол.
  • 8. Ієрархія DOM Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 9. Для роботи з DOM у JavaScript є об'єкт document, який дозволяє: Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки. видалити HTML-елементи і атрибути; змінити всі HTML-елементи на сторінці; змінити всі атрибути HTML на сторінці; змінювати всі стилі CSS на сторінці; додавати нові елементи HTML і атрибути; створювати нові події на сторінці; реагувати існуючі подій на сторінці.
  • 10. JavaScript (JS) — динамічна, об'єктно- орієнтована прототипна мова програмування. Найчастіше використовується для створення сценаріїв веб-сторінок, що надає можливість на стороні клієнта (пристрої кінцевого користувача) взаємодіяти з користувачем, керувати браузером, асинхронно обмінюватися даними з сервером, змінювати структуру та зовнішній вигляд веб- сторінки. Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 11. JavaScrip Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки. Оголошення мови опису.
  • 12. JavaScrip Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки. Виведення повідомлення
  • 13. JavaScrip Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки. Реагування на застарілий браузер
  • 14. JavaScrip Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 15. JavaScrip – вікно з клавішею «ОК». Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки. Англ. - вікно попередження
  • 16. JavaScrip – вікно з клавішею «ОК». Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 17. JavaScrip – вікно з клавішею «ОК». Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки. Розбиття на рядки в «вікні попередження» n
  • 18. JavaScrip – вікно з клавішею «ОК». Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 19. JavaScrip – вікно з клавішею «ОК». Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 20. JavaScrip – вікно з клавішами «ОК» та «Cancel». Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 21. JavaScrip – вікно з клавішами «ОК» та «Cancel». Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 22. JavaScrip – вікно з полем вводу клавішами «ОК» та «Cancel». Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 23. JavaScrip – вікно з полем вводу клавішами «ОК» та «Cancel». Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 24. JavaScrip – вікно з полем вводу клавішами «ОК» та «Cancel». Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 25. JavaScrip – вікно з полем вводу клавішами «ОК» та «Cancel». Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 26. JavaScrip – вікно з полем вводу клавішами «ОК» та «Cancel». Поняття об’єктної моделі документа. Веб- програмування та інтерактивні сторінки.
  • 30. Повторюємо 1. Що таке Document Object Model? Опишіть процес формування DOM. 2. Продовжіть речення. JavaScript – це … 3. Опишіть вивчені способи інтерактивної взаємодії з сайтом.
  • 31. Домашнє завдання Створити інтерактивну сторінку опису родового дерева вашої родини. (Останнє вікно – це детальна інформація про Вашу родину котру ви описали на сторінці).