Динамічний вміст
Змінити текстовий вміст сторінки досить просто. Кожний безперервний рядок символів в тілі HTML сторінки представляється текстовим вузлом. Властивість nodeValue містить цей текст. Змінюючи його значення можна відповідно змінювати текст на сторінці.
Текстові вузли (Text Nodes). Наступний приклад, використовує найпростіший тег параграфа <p> і текст всередині нього. Натискайте по посилання, щоб змінити цей текст:
<р id = "sample1"> Ось текст, який будемо змінювати. </ р>
<р>
<a href="" onclick="document.getElementById('sample1').firstChild.nodeValue ='Якщо шось зробити важко, тоді..'; return false;"> міняємо раз </a>
::
<a href="" onclick="document.getElementById('sample1').firstChild.nodeValue ='...не варто це і робити!'; return false;"> міняємо ще </a>
</ р>
У текстовому вузлі відсутній атрибут id, який може бути у вузла елемента. Таким чином безпосередньо, використовуючи метод document.getElementById () або document.getElementsByTagName (), до нього звертатися не можна.Зате отримати доступ до текстового вузла можна знаючи його батьківський вузол (parent node), в даному випадку елемент параграфа з id = "sample1". Цей вузол елемента містить один дочірній вузол (child node), той самий текстовий вузол, який ми хочемо змінити. Ось як це може бути зображено(рис. 7.4).
Рисунок 7.4 – Назва
Отже, document.getElementById ('sample1'). FirstChild.nodeValue використовується для доступу до цього текстового вузла і читання або зміни його значення, тобто текста всередині параграфа.
Важливо пам'ятати, що текстовий вузол може містити тільки текст. Навіть прості теги <b> і <i> всередині рядка тексту породжують дерево вузлів елементів і текстових вузлів. Візьмемо вищезазначений приклад і, додавши теги, зробимо слово "текст" напівжирним:
<P id = "sample2"> Ось <b> текст </ b>, який будемо змінювати. </ р>
і таким чином елемент параграфа з id = "sample2" тепер містить три дочірніх вузла замість одного. Це буде: текстовий вузол "Ось", вузол елемента для пари тегів <b> </ b> і текстовий вузол ", який будемо змінювати." Вузол елемента b містить один дочірній вузол, це текстовий вузол "текст". Те, що вийшло, можна зобразити так (рис. 7.5).
Рисунок 7.5 - Назва
А тепер подивимося, що вийшло після зміни розмітки, але якщо залишити скрипт з попереднього прикладу без змін. Зміна значення firstChild елемента "p" тепер призведе до заміни тільки частини тексту "Ось". А якщо спробуєте додати розмітку в значення текстового вузла, браузер обробить її як звичайний текст, ось приклад:
<р id = "sample4"> Ось <b> текст </ b>, який будемо змінювати. </ р>
<р>
<a href="" onclick="document.getElementById('sample4').firstChild.nodeValue ='<b> Якщо щось </ b> зробити важко ... '; return false; "> міняємо раз </ a>
::
<a href="" onclick="document.getElementById('sample4').firstChild.nodeValue ='...то не варто <i> це робити </ i> doing! '; return false; "> міняємо ще < / a <
</ р>
Слід пам'ятати, що текстові вузли це звичайні рядки символів, розміщені між будь-якими двома HTML тегами, причому не обов'язково парними.
Додавання вузлів. Додавання нових вузлів також не представляє особливих труднощів. Раніше ми розглянули, як змінювати вузли атрибутів і застосовувати їх до елементів, а також як змінювати текстові вузли в дереві документа (властивість innerHTML в розрахунок не беремо).
Перший крок до створення вузла об'єкта потрібного типу - це один з варіантів: document.createElement (), document.createAttribute () або document.createTextNode ().
7.2.1 Використання текстових вузлів. Цей приклад коду показує як створити текстовий вузол і привласнити йому якесь значення:
var myTextNode = document.createTextNode ( "ваш текст");
Тепер у вас є текстовий вузол. Але він не є частиною дерева документа. Щоб він з'явився на сторінці, його потрібно зробити дочірнім (child) по відношенню до якого-небудь вже існуючого всередині дерева вузлу. Його не можна приєднати до іншого текстового вузла, так як текстові вузли не можуть містити дочірні вузли. Вузли атрибутів не є частиною дерева документа, тому і до них приєднати текстовий вузол не можна. Тоді в нашому розпорядженні залишаються вузли елементів. Вузол елемента може містити кілька дочірніх вузлів, тому є кілька методів, що визначають як і куди додати новий вузол до вже існуючих дочірніх вузлів. Це краще показати на прикладах.
Метод appendChild () можна використовувати, щоб додати новий текст (текстовий вузол) в вузол параграфа. При цьому видалити останній з доданих вузлів можна за допомогою методу removeChild ().
<P id = "sample1"> Просто текст. </ P>
Виклик функції додавання вузла:
var text = document.createTextNode ("новий текст" + (++ counter1));
var el = document.getElementById ("sample1");
el.appendChild (text);
Виклик функції видалення останнього (lastChild) вузла:
var el = document.getElementById ("sample1");
if (el.hasChildNodes ())
el.removeChild (el.lastChild);
Додавання тексту – це просто: треба створити новий текстовий вузол, визначити вузол елемента параграфа і викликати метод appendChild (), щоб додати текстовий вузол в кінець його масиву дочірніх вузлів (childNodes). Глобальну змінну counter додаємо в текст щоб відрізнити кожен новий текстовий вузол у вікні браузера.
Видалення тексту відбувається також просто: removeChildNode (). Тільки на відміну від додавання обов'язково потрібно вказувати який із дочірніх вузлів повинен бути знищений. Тут ми використовуємо властивість елемента lastChild, яке завжди вказує на останній вузол в масиві дочірніх вузлів елемента (childNodes). Таким способом можна видалити навіть текст, який міг уже існувати в HTML-коді всередині тега <p> ще до додавання нових текстових вузлів.
Варто звертати увагу на метод hasChildNodes (), який просто повертає true або false, показуючи, чи містить даний вузол якісь дочірні вузли. Його слід використовувати, щоб уникнути помилок при виклику removeChild коли у вузла може не бути дочірніх вузлів.
7.2.2 З'єднання і поділ текстових вузлів. У наведеному вище прикладі текстові вузли додавалися як самостійні дочірні вузли. Але якщо вписати текст в HTML-код,
<р id = "sample1"> Просто текст. новий текст 1 новий текст 2 новий текст 3 </ p>в
DOM – буде одним дочірнім текстовим вузлом елемента параграфа. Іншими словами, дерево вузлів, збираєме динамічним додаванням контенту, буде відрізнятися від дерева вузлів, зібраного з статичного HTML-коду.
Іноді може знадобитися комбінувати текстові вузли таким чином, щоб новий, динамічно додаючий контент, включався в існуючий статичний HTML-код. Таку можливість надає метод normalize (). Виклик цього методу "підчищає" дерево вузлів, збираючи сусідні текстові вузли в єдиний текстовий вузол і видаляючи порожні.
Наведений нижче приклад схожий на розібраний раніше, в ньому можна побачити кількість дочірніх вузлів параграфа до і після нормалізації. Після додавання тексту збільшується кількість текстових вузлів, але після нормалізації всі додані вузли об'єднуються в єдиний текстовий вузол.
Елемент для нормалізації:
el = document.getElementById ( "sample2");
el.normalize ();
Показуємо кількість дочірніх елементів:
el = document.getElementById ( "sample2");
alert (el.childNodes.length);
Можна розділити текстовий вузол на два окремих, використовуючи метод splitText (). Він стане в нагоді, якщо потрібно динамічно змінити слово або фразу або вставити який-небудь елемент в текстовий рядок.
У наступному прикладі клацання по посиланню видаляє перший дочірній елемент параграфа. Клацання по посиланню "відокремити слово" відокремлює перше слово в тексті, а потім клацання по посиланню "видалити перший вузол" видаляє це слово з пропозиції. Клацання по посиланню "скинути" повертає документ в початковий стан.
Відокремлюємо перше слово
el = document.getElementById ( "sample3");
if (el.hasChildNodes ()) {
text = el.firstChild;
i = text.nodeValue.indexOf ( "");
if (i> = 0)
text.splitText (i + 1);
}
Видаляємо перший текстовий вузол:
el = document.getElementById ( "sample3");
if (el.hasChildNodes ())
el.removeChild (el.firstChild);
Повертаємо приклад в початковий стан
el = document.getElementById ( "sample3");
while (el.hasChildNodes ())
el.removeChild (el.firstChild);
text = document.createTextNode (
"Якийсь текст всередині параграфа.");
el.appendChild (text);
Для текстового вузла nodeValue це просто рядок. Метод splitText () покладається на початкове значення, яке покаже, звідки можна починати розбиття. Метод indexOf () використовується для пошуку в рядку першого від її початку відступа, щоб передати його методу splitText ().У коді для повернення в початковий стан просто видаляються всі дочірні вузли елементу параграфа, а потім додається вихідний текст як єдиний текстовий вузол.
7.2.3 Робота з вузлами елементів (Element Nodes). Додавання і видалення вузлів елементів в основному схоже на дії з текстовими вузлами. Різниця по-суті тільки в створенні вузла і розміщенні всередині нього контенту.
Створюється вузол, використовуючи метод document.createElement (), якому передається назва тега, наприклад "p", "div", "table" і т.п. Цей параметр регістронезалежний, тобто "Div", "Div" і "DIV" означатимуть один і той же тег. Потрібно пам'ятати, що браузер поверне ім'я тега в верхньому регістрі.
var el = document.createElement ( "div");
alert (el.tagName);
в результаті буде виведено "DIV".
Як і з текстовими вузлами, після створення вузла елемента його треба додати якомусь існуючому вузлу елемента в дереві документа, щоб потім його можна було побачити на сторінці. Але новостворений елемент – це просто пустий тег. Тому йому потрібно додати якісь атрибути і текст.
У наведеному нижче прикладі створюється новий елемент P зі своїми дочірніми вузлами, який приєднується до існуючого елементу DIV.
<Div id = "sample4"> Цей текст всередині елемента DIV. </ Div>
... Код посилання ...
var paraEl, boldEl;
paraEl = document.createElement ("p");
boldEl = document.createElement ("b");
paraEl.appendChild (
document.createTextNode ("Цей новий параграф з"));
boldEl.appendChild (document.createTextNode ("напівжирним"));
paraEl.appendChild (boldEl);
paraEl.appendChild (document.createTextNode ("текстом, доданий в DIV"));
document.getElementById ("sample4"). appendChild (paraEl);
У цьому прикладі спочатку створюються два нових елементи: теги <p> і <b>. Потім до елементу параграфа (P) додається новий текстовий вузол з рядком "Цей новий параграф з". Таким же чином додається слово "напівжирним" до елементу B. Потім цей елемент (включаючи його дочірній текстовий вузол) додається до параграфу. Наступний текстовий вузол з рядком "текстом, доданий в DIV" також додається до параграфу.
У цьому прикладі елемент параграфа містить три дочірніх вузла: текстовий вузол (text node); вузол елемента для тега <b>; ще один текстовий вузол. У елемента B тільки один текстовий вузол. Завершальний єтап – додавання новоствореного параграфа до існуючого на сторінці тегом <div>.
Можна встановити який-небудь атрибут будь-якого з цих нових елементів. Не має значення коли його встановлювати, до або після додавання елемента в дерево документа. Наприклад:
boldEl.style.color = "# ffff00";
paraEl.appendChild (boldEl);
або:
paraEl.appendChild (boldEl);
boldEl.style.color = "# ffff00";
зроблять напівжирний текст червоним. Іншими словами, appendChild () фактично поміщає не вузол в дерево, а тільки його копію. Змінна boldEl як і раніше вказує на цей вузол.
СУБД MySQL
Питання для вивчення
Типи даних в MySQL
Оператори і команди MySQL
Стандартні функції PHP для роботи з MySQL
У даній лекції ми розглянемо основні поняття теорії баз даних і познайомимо читачів з системою управління базами даних MySql, способами роботи з нею, її особливостями і реалізацією мови запитів SQL в цій СУБД. В основі наведених в лекції прикладів лежить інформаційна модель віртуального музею історії інформатики. Ця модель – набір колекцій опису історичних особистостей, експонатів музею (артефактів), статей і зображень.
Типи даних в MySQL
База даних – це сукупність пов'язаних даних, організованих за певними правилами, що передбачають загальні принципи опису, зберігання і маніпулювання, незалежна від прикладних програм. База даних є інформаційною моделлю предметної області. Звернення до баз даних здійснюється за допомогою системи управління базами даних (СКБД). СУБД забезпечує підтримку створення баз даних, централізованого управління та організації доступу до них різних користувачів.