субота, 28 березня 2020 р.

Інформатика 10 клас, веб-програмування, урок 20

Тема: Об'єктна модель документа (DOM)

Процес формування DOM
DOM - об'єктна модель документа (Document Object Model). DOM це зовсім інше представлення веб-сторінки ніж HTML код. Браузер по вказаній URL адресій відправляє запит і отримує (завантажує) з сервера веб-сторінку у вигляді HTML коду, який часто називається вихідний код сторінки. І якщо у коді вказані інші файли такі як стилі css, js - то завантажує і їх. І уже з завантаженого з сервера HTML коду браузер формує документ - DOM. Браузер створює DOM для того щоб відобразити веб-сторіну на екрані. Вигляд DOM документа можна глянути у панелі розробника в браузері.

Приклад DOM

 Практичне завдання

Перейди за посиланням яваскрипт.укр


Зайшовши на сайт натисни праву кнопку миші 



Вибери команду "Перевірити"

Вибери пункт "Elements" . Виконавши наступні маніпуляції ти можеш побачиш DOM.

DOM має деревовидну ієрархію. Документ DOM складається з вузлів Node. Кожен такий вузол може містити в собі вбудований вузол, елемент, текст, або коментар.

Ієрархія DOM
<HTML>
<html>
<head>
<title>Заголовок веб сторінки</title>
</head>
<body>
   <p>Абзац 1</p>
<div>
   <p>Абзац 2</p>
   <p>Абзац 3</p>
<div>
<b>Жирний текст</b>
<a href="http://nykyrsaivan.pp.ua/">JavaScript</a>
</div>
</div>
<body>
</html> 

Всі вузли DOM формуються з HTML тегу і отримують властивості, події, стилі які вказані у самих атрибутах тегу, CSS стилях і в JavaScript коді. DOM підтримує об'єктно орієнтоване представлення веб-сторінки і дозволяє змінювати документ веб-сторінки за допомогою JavaScript.

Для роботи з DOM у JavaScript є об'єкт document, який дозволяє:


Фізкультхвилинка
Фізкультхвилинка для очей

  • Закрийте очі на 1-2 хвилини, постарайтеся максимально розслабитися.
  • Виконайте 4-5 вправ для розслаблення мускулатури тіла.
У JavaScript для роботи з DOM є об'єкт document, який містить методи і властивості для роботи з документом.

Поняття ДжаваСкріптJavaScript (JS) - динамічна об'єктно орієнтована прототипна мова програмування. Частіше всього використовується для створення сценарію веб-сторінки, дозволяє на стороні клієнта (пристрою кінцевого користування) взаємодіяти з користувачами, керувати браузером, асинхронно обмінюватися даними з сервером, змінити структуру і зовнішній вигляд сторінки.


Практично в любому сценарії  JavaScript необхідні такі об'єкти як вікно window і документ – document. Включення сценарію JavaScript в HTML–документ здійснюється з допомогою тегу <script>.

Приклад

<HTML>
<HEAD>
<meta http-equiv=Content-Type content=”text/html; charset=windows-1251″>
</HEAD>
<BODY lang=RU>
<H1>My first script </H1>
<SCRIPT LANGUAGE =”JavaScript”>
<!– document.write(“Інформатика 10 клас”);
//–>
</SCRIPT>
</BODY>
</HTML>


В даному прикладу команда <SCRIPT LANGUAGE =”JavaScript”> повідомляє браузеру, що для написання крипта використовується JavaScript.

<!– – початок блоку коментарів, це необхідно для того щоб, браузери не розуміли сценарію, не відображали сценарій як простий текст в тілі документа, а браузер розуміючий сценарій ігнорував символ коментаря. 

Далі сам скрипт, тут для об'єкта з іменем document викликається метод write. В якості параметра йому передається текстовий рядок “Інформатика 10 клас”. При цьому документ буде виглядати так, як рядок який знаходиться на місці сценарію. 

//–> кінець блока коментарів. </SCRIPT>– повідомляється браузеру, що скрипт закінчився, тег являється обов'язковим. На цьому закінчую публікацію, в зоні горизонтального меню найближчим часом появиться сторінка JavaScript в якій в табличному варіантів буде розміщено оператори які застосовують в JavaScript, модифікатори, мета символи і т. д.

Домашнє завдання

Вивчіть конспект уроку, запишіть в робочий зошит основні визначення заняття.

 Контакти для відправки домашніх завдань та зв'язку з вчителем.
Фейсбук 

Електронна пошта
Ярлыки:

Немає коментарів:

Дописати коментар