Роздрукувати сторінку

Главная \ Методичні вказівки \ Методичні вказівки \ 745 Конспект лекцій з курсу Основи Web–дизайну Теми 5-8 Використання динамічного html, НУДПСУ

Конспект лекцій з курсу Основи Web–дизайну Теми 5-8 Використання динамічного html, НУДПСУ

« Назад

Тема 5. ВИКОРИСТАННЯ ДИНАМІЧНОГО HTML

5.1. Визначення динамічного HTML

Динамічний HTML (DHTML) це термін, який використовується для позначення HTML-сторінок з динамічно змінюваним змістом.

Реалізація DHTML складається із трьох компонентів: безпосередньо HTML, каскадних таблиць стилів (CSS) та мови сценаріїв (JavaScript або VBScript). Вказані компоненти пов’язані між собою об’єктною моделлю документу (Document Object Model - DOM), що по суті є інтерфейсом прикладного програмування (API).

Використання DOM додає простій HTML-сторінці нову якість - можливість динамічної зміни свого змісту без перезавантаження. Об’єктна модель документу робить всі елементи сторінки програмними об’єктами. За її допомогою можливо одержати доступ та керувати всім змістом сторінки. Кожен елемент HTML-сторінки доступний як індивідуальний об’єкт. Практично всі події, пов’язані з HTML-сторінкою (натиск на кнопці миші, натиск клавіші клавіатури, тощо) можуть бути перехоплені та оброблені процедурами сценарію. Відзначимо, що на сьогодні всі розповсюджені браузери підтримують CSS та JavaScript, про те різні браузери реалізують власну об’єктну модель документів. Таким чином, сторінки з використанням DHTML можуть по різному відображатись в різних браузерах, що є основним недоліком DHTML.

5.2. Визначення каскадних таблиць стилів.

Каскадні таблиці стилів (CSS) - це технологія визначення та з’єднання стилів з HTML-сторінкою.

Для керування форматом однієї HTML-сторінки можливо використати декілька таблиць стилів. При перегляді HTML-сторінки браузер по визначеним правилам будує пріоритетність, "каскад", використання цих таблиць.

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

За допомогою стилів можливо змінювати більшість властивостей тегів HTML-сторінки. Наприклад для таблиці можна змінити шрифт, колір фону, стиль, товщину та колір меж, видимість рядків та комірок, тощо. Форматування тегу за допомогою стилів дещо нагадує зміну атрибутів тегу, але можливості стилів набагато ширші.

Таблиця стилів - це шаблон, який керує форматуванням тегів HTML-сторінки.

Концепція таблиці стилів для HTML-сторінки схоже на використання стилів в текстовому редакторові Microsoft Word. Змінити зовнішній вигляд документу Word можливо простою зміною з’єднаних з ним стилів. Таким же чином змінити зовнішній вигляд HTML-сторінки можливо за допомогою зміни з’єднаної з нею таблиці стилів. Наприклад, для відображення тексту всіх абзаців червоним кольором на чорному фоні необхідно в таблиці визначити правило, показане на рис. 5.1.

Правило каскадних таблиць стилів складається із селектора та однієї або декількох декларацій. Кожна декларація складається із властивості та її величини, розділених знаком : та закінчується ;. В прикладі, показаному на рис. 5.1 селектором є тег P та визначено дві декларації, що записані в фігурних дужках. Перша декларація color:red; друга background-color: black;. Перша декларація задає колір шрифта (властивість color) як червоний (значення red). Друга декларація задає колір фону (властивість background-color:) як чорний (значення black). Запис декларація може бути реалізований тільки буквами англійського алфавіту та арабськими цифрами і не чуттєвий до регістру.

З’єднати HTML-сторінку з таблицею стилів можливо за допомогою:

1. Зв’язування - дозволяє використовувати одну таблицю стилів для форматування декількох HTML-сторінок. При цьому таблиця стилів зберігається в окремому текстовому файлі з розширенням css. Зв’язування реалізується за допомогою тегу link, визначеному в розділі head. Наприклад, визначимо стиль, що задає чорний фон HTML-сторінки.

HTML код на сторінці:

<head><link rel="stylesheet" type="text/css" href="hi.css">

Правило стилю записане в файлі hi.css:

body {background-color: black;}

Особливістю запису правила стилю в файлі з розширенням css є те, що тег <style> не використовується.

2. Впровадження - дозволяє задати всі правила таблиці стилів безпосередньо в самій HTML-сторінці. Для цього також використовується тег link, визначений в розділі head:

<head><style type="text/css"> hr { width: 120px; }</style>

На цій HTML-сторінці всі лінії визначені за допомогою тегу hr будуть мати довжину 120 пунктів.

3. Впровадження в тег документу - дозволяє змінювати форматування конкретних елементів HTML-сторінки. Такий стиль інколи називають інлайновим. Наприклад:

<td style="background-color: black; color: red;">

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

</td>.

При впровадженні в тег документу запис стилю має деякі особливості:

- Селектором є сам тег;

- Використовується параметр style, що є в кожному тезі;

- Визначення повинні бути в одинарних, або подвійних лапках.

5.3. Особливості запису каскадних таблиць стилів

Якщо для різних селекторів задані однакові декларації, то для зменшення розміру таблиці стилів використовується групування селекторів. Наприклад, якщо для нумерованого та маркірованого списків необхідно визначити розмір шрифта 24 пункта, то можливо це задати одним правилом:

ol, ul {font-size: 24pt;}

Селектори в цьому випадку розділяються комами.

На HTML-сторінці можуть бути елементи, що вбудовані в інші елементи. Якщо для елементів батьків визначені правила стилів, то елементи нащадки можуть успадкувати деякі із цих правил. Наприклад, якщо для нумерованого списку визначено, що текст списку буде червоного кольору:

<head><style type="text/css"> ol { color: Red;}</style></head>

то текст абзацу, розміщеного в такому списку також буде червоного кольору:

<body><ol><li><p>Текст абзацу червоного кольору</p></ol>

В деяких випадках необхідно для формально однакових елементів (тегів) застосувати різні стилі. При цьому використовувати в якості селекторів теги, як це було в наведених вище прикладах, не доцільно. В цих випадках для визначення правил стилів, які можливо застосувати для одного, або для всіх елементів HTML-сторінки можливо застосувати класи. Ім’я класу використовується як селектор. Якщо стиль буде застосовуватися тільки для одного тегу, то синтаксис запису правила стилю такий - X.class. Де X - ім’я тегу, а class - ім’я класу. Наприклад, необхідно визначити два правила стилів для нумерованого списку. Правило a повинно визначити нумерований список з шрифтом розміром 12 пунктів, а правило b - з шрифтом розміром 16 пунктів:

<head><style type="text/css"> ol.a {font-size: 12pt;} ol.b {font-size: 16pt;}</style>

В тілі HTML-сторінки використання цих стилів відбувається так::

<ol class="a"><li> Текст списку відображається шрифтом розміром 12 пунктів </li></ol>

<ol class="b"><li> Текст списку відображається шрифтом розміром 16 пунктів </li></ol>

Якщо необхідно передбачити можливість застосування стилю для всіх тегів, то синтаксис запису правила стилю - .class. Наприклад, визначимо стиль, що задає червоний колір шрифту:

<head><style type="text/css"> .fontcolor {color: red;}</style>

Використання цього стилю в тілі HTML-сторінки відбувається таким чином:

<ol class="fontcolor"><li>Текст нумерованого списку червоний</li></ol>

<ul class="fontcolor"><li>Текст маркірованого списку червоний</li></ul>

Ще одним цікавим випадком є застосування контекстних селекторів. Вони застосовуються при необхідності визначення стилів для тегів, що вкладені в інші теги. Контекстний селектор складається із декількох простих селекторів, розділених пробілами:

a b c { визначення 1; визначення 2;...}.

В якості простих селекторів використовуються імена тегів. Стиль з контекстним селектором застосовується для тегу c тільки в тому випадку, коли цей тег знаходиться між тегами a та b.

Наприклад, необхідно щоб відображались червоним кольором тільки ті абзаци, які вкладені в нумеровані списки. В цьому випадку можливо використати стиль:

ol P {color: Red;}

Альтернативою селектору class є селектор id, який призначений для того, щоб призначити кожному правилу стилю оригінальне ім’я. В цьому випадку вказане для id правило стилю буде застосоване для кожного тегу з тим же id. Якщо стиль передбачено використовувати для всіх тегів, то синтаксис визначення правила стилю селектором id такий:

<head><style type="text/css"> #ім’я_id {визначеня1;... } </style>

Якщо необхідно передбачити застосування правила стилю тільки для конкретного тегу , то синтаксис запису наступний:

<head><style type="text/css"> ім’я_тегу#ім’я_id {визначеня1;... } </style>

Для використання такої таблиці стилів в тілі HTML-сторінки необхідно присвоїти атрибуту id, який є в кожному тегу, ім’я визначене в правилі стилів:

<ім’я тегу id= ім’я_id>

Наприклад, визначимо стиль для відображення будь-якого елементу з id="ar" шрифтом Arial та стиль для відображення абзаців з id="ver" шрифтом Verdana.

<head><style type="text/css">

#ar { font-family: Arial; }

p#ver { font-family: Verdana; }

</style></head>

Застосування цих стилів реалізується так:

<h1 id="ar">Текст заголовку першого рівня відображається шрифтом Arial </h1>

<p id="ver"> Текст абзацу відображається шрифтом Verdana </p>

5.4. Ієрархія стилів

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

5.5. Властивості форматування елементів

Якщо зображення буде недоступним, то в якості фону рядка буде використано зелений колір.

Властивості категорії блок визначають параметри блокових елементів. Найбільш цікавими серед них є властивості, що визначають ширину полів (margin), товщину (border-width), колір (border-color) та стиль (border-style) границь. Наприклад, визначення таблиці подвійними границями червоного кольору, товщиною 5 пунктів та полями в 50 пунктів можливо записати так:

<table border="1" style="border-color: red; border-style: double; border-width: 5pt; margin: 50 pt;">

5.6. Контрольні запитання

Що таке динамічний HTML?
З чого складається реалізація DHTML?
Навіщо використовується динамічний HTML?
Що таке каскадні таблиці стилів?
Як визначити каскадні таблиці стилів?
Що таке селектор?
Як з’єднати HTML-сторінку з таблицею стилів?
Що таке групування селекторів?
Що таке контекстний селектор?
Що таке ієрархія стилів?
Селектори class та id?
Категорії форматування елементів?
Характеристика основних властивостей шрифтів?
Як за допомогою стилів визначити колір фону елементу?
Як за допомогою стилів визначити ширину полів елементу?

Тема 6. ОСНОВИ МОВИ ПРОГРАМУВАННЯ JAVASCRIPT

6.1. Загальний огляд мови JavaScript

JavaScript - це мова програмування, що використовується в складі HTML-сторінок для збільшення їх функціональності та можливостей взаємодії з користувачем. JavaScript є однією із складових динамічного HTML. Ця мова програмування була створена фірмами Netscape та Sun Microsystems на базі мови програмування Sun's Java. На сьогодні є декілька версій JavaScript. Однією із найбільш поширених є версія JavaScript 1.3. За допомогою JavaScript на HTML-сторінці можливо зробити те, що не можливо зробити за допомогою стандартних тегів HTML.

Код програми JavaScript, розміщується або в середині HTML-сторінки, або в текстовому файлі, що пов’язаний за допомогою спеціальних команд з HTML-сторінкою. Цей код, як правило розміщується в середині тегу HTML та завантажується в браузер разом з кодом HTML-сторінки. Програма JavaScript не може існувати самостійно, тобто без HTML-сторінки.

Виконання програми JavaScript відбувається при перегляді HTML-сторінки в браузері, звісно тільки в тому випадку, коли браузер містить інтерпретатор JavaScript. Практично всі сучасні популярні браузери оснащені таким інтерпретатором. Відзначимо, що крім JavaScript на HTML-сторінках можливо використовувати інші мови програмування. Наприклад, VBScript, або JScript, яка є варіантом JavaScript від фірми Microsoft. Але виконання програм VBScript та JScript гарантовано коректне тільки при перегляді HTML-сторінки за допомогою браузеру Microsoft Internet Explorer. Тому в більшості випадків використання JavaScript доцільніше, хоча функціональність програм VBScript та JScript дещо краща.

Досить часто програму JavaScript називають скриптом або сценарієм. Скрипти виконуються в результаті того, що відбулась деяка подія, пов’язана з HTML-сторінкою. В багатьох випадках виконання вказаних подій ініціюється діями користувача.

Скрипт може бути пов’язаний з HTML-сторінкою двома способами:

- За допомогою парного тегу SCRIPT;

- Як оброблювач події, що стосується конкретного тегу HTML.

Сценарій, вбудований в HTML-сторінку з використанням тегу SCRIPT має наступний формат:

<SCRIPT>

   // Код програми

</SCRIPT>

Все, що розміщується між тегами <SCRIPT> та </SCRIPT>, інтерпретується як код програми на мові JavaScript. Обсяг вказаного коду не обмежений. Інколи скрипти розміщують в середині HTML-коментарію. Це роблять для того, щоб код JavaScript не розглядався старими браузерами, які не мають інтерпретатора JavaScript. В цьому випадку сценарій має формат:

<SCRIPT>

   <!--

   // Код програми

-->

</SCRIPT>

Тег SCRIPT має декілька необов’язкових параметрів. Найчастіше використовуються параметри language та src. Параметр language дозволяє визначити мову та версію мови сценарію. Параметр src дозволяє задати файл з кодом сценарію.

Для пояснення використання параметрів тегу SCRIPT розглянемо задачу. Необхідно для HTML-сторінки hi.htm створити сценарій на мові JavaScript 1.3 для показу на екрані вікна повідомлення з текстом "Привіт!". Відзначимо, що для показу на екрані вікна повідомлення можливо використати функцію alert. Для ілюстрації використання обох параметрів language та src вирішення задачі реалізуємо двома варіантами.

Варіант 1. Визначення сценарію безпосередньо на HTML-сторінці hi.htm

<html><head>

<title>Використання JavaScript</title>

</head>

<body>

<script language="JavaScript1.3">

alert('hi');

</script>

</body></html>

Варіант 2. Визначення сценарію в файлі a.js, пов’язаному з HTML-сторінкою hi.htm за допомогою параметру src тегу SCRIPT. Код HTML-сторінкою hi.htm:

<html><head>

<title>Використання JavaScript</title>

<script language="JavaScript1.3" src="a.js"> </script>

</head><body>

</body></html>

Програмний код, записаний в файлі a.js:

alert('hi');

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

Змінні та вирази JavaScript можливо використовувати в якості значень параметрів тегів HTML. В цьому випадку елементи JavaScript розміщуються між амперсандом (&) та крапкою з комою (;), але повинні бути обмежені фігурними дужками {} і використовуватись тільки в якості значень параметрів тегів.

Наприклад, нехай визначена змінна с і їй присвоєно значення green. Наступний тег буде виводити текст зеленого кольору :

<font color="&{c};"> текст зеленого кольору </font>

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

6.2. Синтаксис. Визначення та ініціалізація змінних

Сценарій JavaScript являє собою набір операторів, що послідовно інтерпретуються браузером. Оператори можливо розміщувати як в одному, так і в окремих рядках. Якщо оператори розміщені в одному рядку, то між ними необхідно поставити ;. В протилежному випадку ; не обов’язкова. Будь-який оператор можливо розмістити в декількох рядках без символу продовження.

Будь-яка послідовність символів, розміщених в одному рядку, якій передує //, розглядається як коментар. Для визначення багаторядкових коментарів використовується конструкція:

Багаторядковий коментар

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

JavaScript підтримує чотири простих типи даних. Ілюстрацією цього є табл. 6.1. Для присвоєння змінним значень основних типів використовуються – літерали.

Таблиця 6.1

Типи даних JavaScript

Тип даних	Пояснення	Приклад літерала
Цілий	Послідовність цілих чисел	789 +456 -123
З плаваючою крапкою	Числа з крапкою, яка відділяє цілу частину від дробової, або числа в науковій нотації	7.25 0.525е01 71.2Е-4
Рядковий	Послідовність алфавітно-цифрових символів, взятих в одинарні (’), або подвійні (") лапки.	"Привіт" "234" "Hello World!!!"
Булевий або логічний	Використовуються для оброблення ситуацій так/ні в операторах порівняння	true false

Ім’я змінної повинно містити тільки букви латинського алфавіту, символ _, арабські цифри та починатись з букви, або символу підкреслення _. Довжина імені повинна бути менша від 255 символів. Заборонено використовувати імена, що збігаються з ключовими словами JavaScript. Приклади імен: _hello, go, go123.

Визначити змінну можливо:

- Оператором var, наприклад - var a;

- При ініціалізації, за допомогою оператору присвоєння (=), наприклад b=126.

Визначення та ініціалізацію змінних можливо реалізувати в будь-якому місці програми.

6.3. Вирази та оператори

Вираз - це комбінація змінних, літералів та операторів, в результаті обчислення яких можливо отримати тільки одне значення, яке може бути числовим, рядковим або булевим.

Для реалізації обчислень в JavaScript використовуються арифметичні, рядкові, логічні вирази та декілька типів операторів.

Арифметичні вирази - обчислюють число, наприклад а=7+5;

Рядкові вирази - обчислюють рядок символів, наприклад "Джон" або "234";

Логічні вирази - обчислюють true (істина) або false (хибна).

Оператор присвоювання (=) - присвоює, значення лівому операнду, базуючись на значенні правого операнда. Наприклад для присвоєння змінній а значення числа 5 необхідно записати:

а=5

До стандартних арифметичних операторів відносяться - оператори додавання (+), віднімання (-), множення (*), ділення (/), остача від ділення чисел (%), збільшення числової змінної на 1 (++), зменшення числової змінної на 1 (--).

Відзначимо, що оператор додавання можна використовувати не тільки для чисел, але й для додавання (контрактації / конкатенації) текстових рядків.

Для створення логічних виразів використовуються логічні оператори та оператори порівняння.

До логічних операторів відносяться - логічне І (&&), логічне АБО (||), логічне НІ (!).

Оператори порівняння не відрізняються від таких операторів в інших мовах програмування. До операторів порівняння відносяться (==, >, >, =<, <=,!=).

6.4. Оператори вибору

Оператори вибору відносяться до операторів управління призначенням яких є зміна напрямку виконання програми. Крім операторів вибору до операторів управління відносяться: оператори циклу та оператори маніпулювання з об’єктами.

Оператори вибору призначені для виконання деяких блоків операторів в залежності від істинності деякого логічного виразу. До операторів вибору відносяться - оператор умови if...else та перемикач switch.

Синтаксис оператора умови такий:

if (умова) {

група операторів 1

. . . . . . . . .

}

[else] {

група операторів 2

. . . . . . . . .

}

Перша група операторів виконується при умові істинності виразу умова. Необов’язковий блок else визначає другу групу операторів, яка буде виконуватись в випадку хибності умови, заданої в блоці if. В середині групи операторів, що виконується можуть бути використані будь-які інші оператори, в тому числі і інші оператори умови. Це дозволяє створювати групу вкладених операторів умови if та реалізовувати складні алгоритми перевірки. Однак, якщо кількість вкладених операторів if більша ніж три, то програма стає складною для розуміння. В такому випадку доцільно використовувати оператор switch. В цьому операторі обчислюється деякий вираз та порівнюється з значенням, заданим в блоках case. Синтаксис оператора switch такий:

switch (вираз) {

case значення1:

[оператори1]

break;

case значення2:

[оператори2]

break;

...

default:

[оператори]

}

Якщо значення виразу в блоці switch дорівнює значення1, то виконується група операторів оператори1, якщо дорівнює значення2, то виконується група операторів оператори2 і так далі. Якщо значення виразу не дорівнює ні одному із значень, що задані в блоках case, то обчислюється група операторів блоку default, якщо це блок заданий, інакше виконується вихід із оператору switch. Необов’язковий оператор break, який можливо задавати в кожному із блоків case, виконує безумовний вихід із оператору switch. Якщо він не заданий, то продовжується виконання операторів в наступних блоках case до першого оператору break або до кінця оператору switch.

6.5. Оператори циклу

Цикл - це деяка група команд, що повторюється, доки вказана умова не буде виконана. JavaScript 1.3 підтримує дві форми циклу: for та while. Крім того, оператори break та continue, використовуються разом з циклами.

Цикл for повторює групу команд, до тих пір, доки вказана умова хибна. Синтаксис оператору for такий:

for ([initial-expression];     [condition];     [increment-expression])

   statements

Виконання циклу for проходить в такій послідовності:

1. Вираз initial-expression служить для ініціалізації змінної лічильника. Цей вираз розраховується один раз на початку виконання циклу

2. Вираз condition розраховується на кожній ітерації циклу. Якщо значення виразу condition дорівнює true, виконується група операторів statements в тілі циклу. Якщо значення виразу condition дорівнює false, то цикл forзакінчується. Якщо вираз condition пропущено, то він вважається рівним true. В цьому випадку цикл продовжується до оператора break.

3. Вираз increment-expression використовується для зміни значення змінної лічильника.

4. Розраховується група операторів statements та реалізується перехід на наступну ітерацію циклу, тобто на крок 2.

Приклад. Цикл для розрахунку суми цілих чисел від 1 до 100.

s=0

for (i=1;i<101;i++) {

   s=s+1;

Оператор while повторює цикл, доки вказана умова істина. Оператор while виглядає таким чином:

 while (condition) {

   statements

Цикл виконується while таким чином. Спочатку перевіряється умова condition. Якщо умова істина, то виконується група операторів statements в середині циклу. Перевірка істинності виконується на кожному кроці циклу. Якщо умова хибна то цикл закінчує своє виконання.

Інколи необхідно закінчити цикл не по умові, що задана в його заголовку, а в результаті виконання деякої умови в тілі циклу. Для цього використовуються оператори break та continue. Оператор break завершує цикл while або for та передає керування програмою першому оператору після циклу. Оператор continue передає управління оператору перевірки істинності умови в циклі while та оператору оновлення значення лічильника в циклі for, і продовжує виконання циклу.

6.6. Контрольні запитання

Навіщо використовується мова JavaScript?
Як визначити в HTML – документі код JavaScript?
Синтаксис запису змінних в JavaScript?
Синтаксис запису виразів в JavaScript?
Типи даних JavaScript?
Оператори JavaScript?
Оператори вибору JavaScript?
Оператори циклів JavaScript?
Як достроково закінчити цикл?
Як достроково перейти на наступну ітерацію циклу?

Тема 7. РОЗШИРЕНІ МОЖЛИВОСТІ JAVASCRIPT

7.1. Використання функцій

Функція - JavaScript це іменована група команд, які вирішують певну задачу та можуть повернути деяке значення. Функція визначається за допомогою оператору function , що має такий синтаксис:

function Ім’я_функції ([параметри])

{

[оператори]

return [значення_що повертається]

}

Параметри, що передаються функції, розділяються комами. Необов’язковий оператор return в тілі функції (блок операторів, що обмежений фігурними дужками), визначає значення, що повертається функцією. Визначення функції тільки задає її ім’я и визначає, що буде робити функція при її визові. Безпосереднє виконання функції реалізується, коли в сценарії відбувається її виклик та передаються необхідні параметри. Відзначимо, що визначення функції необхідно реалізувати на HTML-сторінці до її виклику. Наприклад, для показу на екрані вікна повідомлення з текстом "Це виклик функції" визначимо функцію Go та реалізуємо її виклик:

<html><head><title>Використання JavaScript</title>

<script>

function Go() {

alert("Це виклик функції")

}

</script>

</head><body>

<script>

Go();

</script></body></html>

7.2. Об’єктна модель JavaScript

JavaScript відноситься до об’єктно - орієнтованих мов програмування. Об’єкт – це цілісна конструкція, що має властивості, які є змінними JavaScript та методи їх обробки. Властивості можуть бути іншими об’єктами. Функції, пов’язанні з об’єктом називаються методами об’єкта. Для звернення до властивостей об’єкту використовується наступний синтаксис:

Для створення екземпляру об’єкта необхідно:

- Написати функції, які будуть використані в якості методів об’єкту.

- За допомогою звичайної функції визначити об’єкт.

- За допомогою оператора new створити екземпляр об’єкту.

Наприклад необхідно створити об’єкт з іменем car та властивостями model та color та методом go. Для цього необхідно написати функцію when, яка буде використана для визначення методу go:

function when() {

//код функції

}

Після цього необхідно написати функцію для визначення об’єкта:

function car( model, color) {

   this.model = model;

   this.color = color;

   this.go =when;

Відзначимо, що оператор this використовується для того, щоб присвоїти значення властивостям об’єкту, базуючись на параметрах, що передаються функції.

Створення об’єкту з іменем mycar можливо реалізувати так:

mycar = new car("Таврія", "Зелений")

В JavaScript всі елементи (теги) на HTML-сторінці вистроєні в ієрархічну структуру. Причому кожен елемент представлений в вигляді об’єкту, з визначеними властивостями та методами. Керування об’єктами на HTML-сторінці можливо багато в чому за рахунок того, що JavaScript дозволяє одержати доступ до цих властивостей та методів. При реалізації доступу необхідно враховувати ієрархію об’єктів на HTML-сторінці. Відзначимо, що загальним об’єктом контейнером є об’єкт window, який відповідає вікну браузера. В свою чергу цей об’єкт містить деякі елементи оформлення, наприклад рядок стану. Завантаженій в вікно браузера HTML-сторінці відповідає об’єкт document. Всі без виключення елементи HTML-сторінки є властивостями об’єкту document. Прикладами об’єктів HTML є таблиця, гіперпосилання або форма. Для доступу до методів/властивостей елементів на HTML-сторінці використовується наступний синтаксис:

document.ім’я_об’єкту.ім’я_методу()

7.3. Обробка подій

Важливою ознакою інтерактивних HTML-сторінок є можливість реакції на дії користувача. Наприклад, натиск на кнопці повинен викликати появу діалогового вікна, або виконання перевірки правильності введених користувачем даних. В JavaScript інтерактивність реалізована за допомогою перехвату та обробки подій, викликаних в результаті дій користувача. Для цього в теги деяких елементів введені параметри обробки подій. Ім’я параметру обробки події починається з префіксу on, за яким йде назва події. Наприклад, події клік кнопкою миші Click, відповідає параметр обробки події з назвою onClick. Назви та характеристики деяких подій наведені в табл. 7.1.

Таблиця 7.1

Події JavaScript

Подія	Характеристика події	Обробник події
Click	Клік кнопкою миші на елементі форми або гіперпосилання	onClick
KeyDown	Натиск на клавіші клавіатури	onKeyDown
Load	Завантажується документ в браузер	onLoad
MouseDown	Натиск на кнопці миші	onMouseDown
MouseOver	Курсор знаходиться над елементом	onMouseOver
MouseOut	Курсор покидає зону над елементом	onMouseOut

Задача. Необхідно, щоб при наведені курсору на комірку таблиці із написом "Привіт" з’являлось вікно повідомлення з фразою "Hello". Можливі рішення:

Варіант 1:

<td onClick="alert('Hello')"> Привіт </td>

Варіант 2:

<script>

function Go() {

alert("Hello")

}

</script>

<td onClick="Go()"> Привіт </td>

В варіанті вирішення 1, код JavaScript був записаний безпосередньо в тезі, а в варіанті 2 наслідком кліку став виклик функції. Варіант 2 слід використовувати, якщо код обробки події великий за обсягом.

7.4. Стандартні об’єкти і функції JavaScript

В ядрі JavaScript визначені об’єкти та функції, які можливо використовувати не використовуючи контекст завантаженої сторінки. До основних об’єктів відносяться: Array, Date, Math, String.

Array-масив. Масив це упоряджений набір однотипних даних, до елементів якого можливо звернутись по імені або по індексу. Для створення масиву необхідно використати одну із двох конструкцій:

ім’я_масиву = new Array([елемент1], [елемент2], [елемент3],...)

ім’я_масиву = new Array([довжина масиву])

Відзначимо, що перший елемент масиву має номер 0.

В першій конструкції в якості параметрів використовуються елементи масиву, в другій конструкції використовується довжина масиву.

Наприклад:

ar1 = new Array(1, 2, 3)

ar2 = new Array(3)

Для доступу до значень елементів масиву в квадратних дужках біля імені масиву необхідно вказати порядковий номер елементу. Наприклад:

a = ar1[2]

ar1[0] = 7

В цьому прикладі, змінній а присвоюється значення елементу масиву за номером 2, а в елемент масиву за номером 0 записується значення 7.

Особливістю масивів JavaScript є те, що розмір масиву може встановлюватись динамічно. Наприклад, якщо для масиву із попереднього прикладу написати:

ar1[100] = 7,

то розмір масиву буде автоматично установлений рівним 101.

Для визначення довжини масиву можна скористатись властивістю length. Наприклад:

a = ar1. length

Зручність використання масивів забезпечується рядом методів, представлених в табл. 7.2

Таблиця 7.2

Методи об’єкту Array

Метод	Призначення
concat	Об’єднує два масиви в один.
join	Об’єднує всі елементи масиву в один рядок.
pop	Знищує останній елемент із масиву і повертає його значення.
push	Додає один або декілька елементів в кінець масиву і повертає останній добавлений елемент.
reverse	Переставляє елементи масиву в зворотному порядку: перший елемент стає останнім, а останній першим.
shift	Знищує перший елемент масиву і повертає його значення.
slice	Створює перетин масиву в вигляді нового масиву
splice	Додає та/або знищує елементи масиву
sort	Сортує елементи масиву
unsift	Додає один або більше елементів в початок масиву та повертає нову довжину масиву

Об’єкт Date використовується для роботи з датами. Синтаксис оператора створення екземпляра об’єкту дати:

ім’я_об’єкту_дати = new Date([параметри])

Якщо параметри відсутні, то значенням об’єкту буде поточна дата. Параметром може бути рядок типу: "місяць день, рік часи:хвилини;секунди".

Наприклад, для створення дати - "5 лютого 2005 року 23:12:07" необхідно:

day = new Date("February 5, 2005 23:12:07")

Прочитати або змінити параметри створеного об’єкту Date можливо за допомогою ряду методів.

Найбільш вживані методи показані в табл. 7.3

Таблиця 7.3

Методи об’єкту Date

Метод	Призначення
getDate	Повертає число місяця для вказаної дати
getDay	Повертає день тижня для вказаної дати
getHours	Повертає годину для вказаної дати
getMinutes	Повертає хвилини для вказаної дати
getMonth	Повертає місяць для вказаної дати
getSeconds	Повертає секунди для поточного часу
getYear	Повертає рік для вказаної дати
setDate	Встановлює число місяця для вказаної дати
setDay	Встановлює день тижня для вказаної дати
setHours	Встановлює годину для вказаної дати
setMinutes	Встановлює хвилини для вказаної дати
setMonth	Встановлює місяць для вказаної дати
setSeconds	Встановлює секунди для вказаної дати
setYear	Встановлює рік для вказаної дати

Об’єкт Math дозволяє використовувати вбудовані в JavaScript математичні функції та константи. При зверненні до методів та властивостей цього об’єкту створювати його не потрібно, але необхідно явно вказувати його ім’я.

Наприклад для того, щоб записати в змінну а результат розрахунку функції sin від 1 радіану необхідно:

a = Math.sin(1)

Для того, щоб записати в змінну а результат виразу 5 в степені 6 необхідно:

a = Math. pow(5,6)

Методи об’єкту Math, що використовуються найбільш часто представлені в табл. 7.4.

Таблиця 7.4

Методи об’єкту Math

Метод	Призначення
abs	Повертає абсолютне значення змінної.
sin, cos, tan	Повертають значення тригонометричних функцій. Аргументи задаються в радіанах.
acos, asin, atan	Повертають значення обернених тригонометричних функцій
exp, log	Повертають значення експоненціальної функції та функції натурального логарифму
ceil	Повертає найменше ціле число, більше або рівне значенню аргументу
floor	Повертає найменше ціле число, менше або рівне значенню аргументу
min, max	Повертає найбільше/ найменше значення з двох аргументів
pow	Повертає значення функції: pow(x,y)=x^y
round	Повертає значення аргументу, округлене до найближчого цілого числа
sqrt	Повертає квадратний корінь аргументу

Об’єкт String використовується для роботи з рядковими типами даних. Створення об’єкту String відбувається коли змінній присвоюється рядковий літерал:

а = "Не явний спосіб створення рядкового об’єкту"

Крім того, можливо явно створити рядковий об’єкт, використовуючи оператор new та конструктор String:

ім’я_об’єкту = new String(Рядок)

Параметром конструктору може бути будь-який рядок. Наприклад:

a=new String("Явний спосіб створення рядкового об’єкту")

Єдиною властивістю об’єкту String є length, що зберігає довжину рядка. Наприклад для запису в змінну h довжини рядка а необхідно:

h=a.length

Методи об’єкту String, що використовуються найбільш часто перераховані в табл. 7.5. Наведемо приклад використання методу toLowerCase для переводу рядкової змінної а в верхній регістр:

a=a.toLowerCase().

Таблиця 7.5

Методи об’єкту String

Метод	Призначення
anchor	Створює HTML якір, який використовується, як гіпертекстове посилання.
link	Створює гіпертекстове посилання, по якій можливо перейти на інший URL.
fontsize	Виводить рядок, з встановленим розміром шрифта
bold	Виводить рядок, що відображається напівжирним шрифтом
italics	Виводить рядок, що відображається курсивом
strike	Виводить рядок, що відображається перекресленим шрифтом
substring	Повертає частину рядка об’єкта string
sub	Виводить рядок, що відображається як нижній індекс
sup	Виводить рядок, що відображається як верхній індекс
toLowerCase, toUperCase	Переводить зміст рядка в нижній/верхній регістр

На додаток до стандартних об’єктів JavaScript існує декілька функцій, для виклику яких не потрібно створювати об’єктів. Ці функції дістали назву "функцій верхнього рівня". До цих функцій відносяться: parseFloat(параметр) та parseInt(параметр). Їх призначенням є аналіз рядкового аргументу та повернення відповідно число з плаваючою крапкою або цілого числа. Також досить часто використовуються функції Number(об’єкт) таString(об’єкт), які перетворюють об’єкт, що використовується в якості параметру в число або рядок.

7.5 Використання об’єктів window, document, location

Об’єкт window створюється автоматично при запуску браузера. Крім того нове вікно можливо створити і засобами JavaScript. Для цього необхідно використати метод open. Синтаксис методу такий:

Ім’я_змінної = window.open([Ім’я_ файлу],[Ім’я_вікна],[Параметри])

Ім’я_змінної - це ім’я для звернення до нового вікна в програмі JavaScript.

Ім’я_ файлу – це повна або відносна URL-адреса документу, що буде відкриватись в вікні браузеру.

Ім’я_вікна – це ім’я, що буде вказане в якості цілі в гіпертекстовому посиланні на це вікно із іншого HTML-документу.

Параметри – задають значення параметрів вікна. Основні параметри представлені в табл. 7.6. Якщо можливе значення властивості yes або no, то при стандартних настройках використовується значення yes.

Таблиця 7.6

Основні параметри вікна

Назва	Призначення	Можливі значення
directories	Наявність/відсутність панелі "Ссилки"	yes/no
height	Висота вікна	кількість пікселів
location	Наявність/відсутність адресного рядка	yes/no
menubar	Наявність/відсутність рядка меню	yes/no
resizable	Можливість/не можливість зміни розмірів віна користувачем	yes/no
scrollbars	Наявність/відсутність смуг прокрутки віна	yes/no
status	Наявність/відсутність рядка стану браузера	yes/no
toolbar	Наявність/відсутність панелей інструментів	yes/no
width	Ширина вікна	кількість пікселів

Наприклад, для створення нового вікна браузера в якому буде завантажено файл a.html необхідно:

<script>

myw=window.open("a.html","displayWindow", "width=400,height=300,status=no,toolbar=no,menubar=no")

</script>

При цьому, ширина вікна дорівнює 400 пікселів, висота вікна 300 пікселів, рядок стану вікна, панель інструментів та рядок меню будуть відсутні. Відзначимо, що наведений код необхідно записати в одному рядку.

Для закриття вікна браузера використовується метод close. Наприклад для закриття вікна попереднього прикладу необхідно:

myw.close()

Відзначимо, що при звернення до методів та властивостей вікна браузера в якому знаходиться програма JavaScript імені вікна або ключового слова window можна не вказувати. Наприклад, закрити поточне вікна браузера можливо так:

close()

Цікавим методом об’єкту window є метод setTimeout, за допомогою якого можливо запрограмувати виконання деяких команд після закінчення встановленого терміну часу. Синтаксис методу такий: setTimeout("Код_JavaScript",інтервал_часу)

В якості першого параметру функції setTimeout, як правило використовують функцію. Відзначимо, що цю функцію необхідно визначити на HTML-сторінці до використання функції setTimeout. Другим параметром функції setTimeout є інтервал часу закінчення якого буде сигналом про початок виконання команд JavaScript. Цей параметр задається в мілісекундах. Наприклад, виконання функції myfunction через 3000 мілісекунд після завантаження HTML-сторінки можливо запрограмувати так:

setTimeout("myfunction()",3000)

Досить часто функція setTimeout використовується для створення анімаційних ефектів. Це може бути, наприклад, циклічна зміна кольору тексту, або циклічна заміна одного зображення іншим.

Об’єкт document містить інформацію про завантажену сторінку. Всі елементи HTML-сторінки є властивостями цього об’єкту. Найбільш використовуваним методом об’єкту document є метод write, за допомогою якого можливо зробити запис в HTML-сторінку. Наприклад, для запису рядка "Привіт JavaScript" в документ в якому знаходиться сценарій необхідно:

document.write("Привіт JavaScript")

Ще одним широко вживаним методом цього об’єкту є getElementById, що реалізує доступу до будь-якого об’єкту з визначеним id. Синтаксис методу такий:

document.getElementById(ім’я_id)

Наприклад, встановлення значення стилю display елемента з id=myid рівним block, можливо реалізувати так:

document.getElementById("myid").style.display="block"

Властивості об’єкту location дозволяють одержати інформацію про URL-адресу завантаженої HTML-сторінки. Метод reload дозволяє пере завантажити в браузер поточну HTML-сторінку. Метод replace завантажує в вікно браузера сторінку, адреса якої використана в якості параметру цього методу.

7.6. Контрольні запитання

Правила запису функцій?
Що таке об’єкт в мові JavaScript?
Як визначити об’єкт користувача в JavaScript?
Стандартні об’єкти JavaScript?
Як реалізована інтерактивність в JavaScript?
Стандартні функції JavaScript?
Методи та властивості об’єкту Array?
Методи та властивості об’єкту Date?
Методи та властивості об’єкту Math?
Методи та властивості об’єкту String?
Методи та властивості об’єкту window?
Як за допомогою JavaScript відкрити нове вікно браузеру ?
Як за допомогою JavaScript запрограмувати виконання деяких команд після закінчення встановленого терміну часу?
Методи та властивості об’єкту document?
Методи та властивості об’єкту location?

Тема 8. ЗАБЕЗПЕЧЕННЯ ЕФЕКТИВНОСТІ WEB–САЙТІВ

8.1. Загальні положення

На сьогодні практично всі корпоративні інформаційні системи ( КІС ) досить тісно інтегровані з глобальною мережею Інтернет. При цьому представницьку роль КІС в мережі Інтернет як правило відігріє Web - сайт. Крім представницької ролі, сайт може забезпечувати: функціонування електронного магазину, доступ до розподіленої бази даних, рекламу корпорації в мережі Інтернет. Цей не повний перелік функцій сайту вказує на значний вплив ефективності його функціонування на ефективність функціонування всієї КІС, тим більше, що для його створення, розміщення в мережі та підтримки потрібні досить значні фінансові витрати.

Проблема ускладнюється тим, що на сьогодні не існує загальноприйнятого критерію оцінки ефективності сайту. Це пояснюється труднощами з визначенням прибутків корпорації завдяки наявності сайту. По цій причині рекомендується проводити оцінку ефективності сайту по кількості його відвідувачів. Така оцінка ефективності отримала і практичне визнання. Більш того, наявність популярного сайту дозволяє корпорації одержувати прибуток завдяки розміщенню на ньому банерної реклами. Наприклад, по матеріалам сайту www.rambler.ru, в 2004 році вартість розміщення в його верхній частині банерної реклами коштує близько 10000 доларів США. При цьому, кількість відвідувачів сайту становить більше 100000 на добу.

Забезпечити достатню кількість відвідувачів сайту можливо за рахунок:

- Реалізації заходів спрямованих на те, щоб потенційні клієнти знали про сам факт існування сайту.

- Заохоченні клієнтів повністю переглянути сайт при першому візиті та відвідувати його в наступному.

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

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

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

8.2. Інтернет-орієнтовані методи підвищення ефективності сайту

Відомо, що пошукові системи, каталоги та рейтинги залучають від 20% до 60% відвідувачів сайту. При пошуку сайтів користувач вводить ключові слова, що, на його думку, найкраще відображають тему цікавлячого сайту. В деяких випадках користувач може вказати загальну тематику пошуку. Результатом роботи пошукової системи є список адрес сайтів, в яких зустрічаються ключові слова. Крім адреси в списку відображаються заголовок та опис сайту. Зазначимо, що список адрес формується в певній ієрархії та може відображатись на декількох сторінках. Принциповим моментом є місце адреси ( рейтинг ) сайту в цій ієрархії. Відомо, якщо адреса сайту знаходиться не на першій сторінці, то ймовірність його відвідування практично дорівнює нулю. Для визначення методів підвищення рейтингу сайту розглянемо механізми пошуку по ключовим словам та формування рейтингу. На різних типах пошукових систем вказані механізми дещо відрізняється і як правило офіційно не документуються. Але скрізь пошук реалізований на основі: ключових слів та опису сайту, що заносяться в базу даних при реєстрації сайту в пошуковій системі, ключових слів в тілі сайту або ключових слів та опису сайту в його заголовку в спеціальних тегах <meta>. Тому при реєстрації сайту в пошукових системах слід вказати ключові слова, що найбільш характерні для теми сайту, а також зробити відповідний опис сайту. В описі необхідно також застосувати ключові слова. Використання механізму пошуку на базі ключових слів та опису сайту в його заголовку можливо за рахунок наступної програмної конструкції:

<head><tіtle>придуманий вами заголовок</tіtle>

<meta http—equіv="KEYWORDS" content="список ключових слів через коми">

<meta http—equіv="DESCRІPTІON" content="опис сторінки з декількох фраз, з використанням ключових слів"></head>

Відзначимо, що ключові слова та опис сайту при реєстрації та в його заголовку повинні співпадати. Як правило пошукові системи вимагають щоб ключові слова та опис сайту не перевищували 200 знаків. Слід звернути увагу на зміст заголовка сайту, що міститься між тегами <tіtle>. Саме він відображається в результатах запитів на першому місці і має першорядне значення в справі залучення відвідувачів. Довжина заголовка сайту не повинна перевищувати 75 знаків. Теги <meta> не видні при перегляді документа, але помітно збільшують його розмір, тому їх додаткове застосування ( наприклад <meta name ="tіtle" content="Ключові слова, словосполучення"> ) недоцільне. Для застосування ключових слів в тілі сайту необхідно на головній сторінці в перших 30-50 словах сформулювати основну тематику. Для збільшення кількості таких ключових слів можливо записати їх на початку тіла сайту в тегах коментарів або (та) кольором фону. Ці ключові слова не будуть відображені на сайту, але можливо будуть використані пошуковою системою. Окремим питанням стоїть застосування ключових слів, які по статистиці є взагалі найбільш використовуваними при пошуку. На наш погляд недоцільно використовувати ключові слова пов’язані з розвагами, як з етичних позицій, так із позицій використання не цільової аудиторії. Хоча використання комп’ютерної, спортивної, радіотехнічної та автомобільної лексики доцільне. В тих пошукових системах які передбачають процес реєстрації необхідно внести сайт в максимальну кількість розділів. Слід зазначити, що на сьогодні існує досить велика кількість пошукових систем. Реєстрація сайту в кожній із них потребує певних матеріальних витрат. Тому, на наш погляд доцільно провести реєстрацію сайту тільки в загально популярних пошукових системах. До найбільш популярних пошукових систем (серед вітчизняних користувачів) можна віднести – www.rambler.ru, www.aport.ru, www.yandex.ru, www.meta.ua, www.google.com. Також, слід зареєструвати сайт в пошукових системах якими користуються спеціалісти в галузі діяльності сайту. Відзначимо, що декілька років тому були розроблені спеціальні програми - павуки призначенням яких є автоматична реєстрація сайту в великій кількості пошукових системах. Про те, в багатьох сучасних пошукових системах вмонтовані засоби, що не дозволяють проводити автоматичну реєстрацію, тому користуватись програмами - павуками не доцільно. Для участі в рейтингу відвідувачів на сторінках сайту необхідно розмістити банер (лічильник відвідувачів) пошукової системи. Наявність цих банерів вповільнює завантаження сайту, тому слід їх розміщувати тільки на вузлових сторінках. Деякі пошукові системи не передбачають механізм реєстрації сайту його адміністратором. В таких пошукових системах використовується спеціальна програма — робот яка автоматично індексує сайти. Перешкодою для роботи такої програми може бути заборона на індексацію встановлена на Web—сервері. Рекомендується цю заборону зняти, хоча це дещо зменшує безпеку сервера.

Ще одним, загальновідомим, Інтернет - орієнтованим шляхом рекламування сайту та адреси сайту є використання банерів. Банер представляє із себе текстову або графічну рекламу сайту, розміщену на іншому сайту. Використання банерів доцільне в тому випадку, коли сайт, носій банеру відвідується тими клієнтами які є цільовою аудиторією сайту, що рекламується. Наприклад, ефективність розміщення на сайту фірми продавця автомобілів банеру фірми продавця автозапчастин може бути досить високою. Основним недоліком банерної реклами є те, що по статистиці, кількість відвідувачів, що знайшли сайт за допомогою банерної реклами становить близько 5% від загальної кількості відвідувачів. При цьому, реалізація банерної реклами можлива або шляхом обміну банерами, або потребує матеріальних витрат для публікації власних банерів на інших сайтах. Крім того, шлях обміну банерами досить часто не доцільний з точки зору зміни дизайну сайту та появи на ньому не тематичної інформації. Таким чином, в загальному випадку, використання банерної реклами пов’язане з певними труднощами та принципово не в змозі стрімко підвищити ефективність функціонування сайту.

Наступним можливим шляхом збільшення кількості відвідувачів може стати розміщення на сайту цікавої динамічної інформації, наприклад чату, новин, розкладу занять для сайту учбового закладу. Хоча здійснення цих заходів по технічним причинам досить складне, але їх реалізація досить перспективна. Так відвідуваність сайту www.gala.net можна пояснити саме розміщенням на ньому досить популярного чату. Ще одним, вже популярним шляхом збільшення кількості відвідувачів є застосування автоматизованої системи розсилки електронної пошти, яка рекламує діяльність корпорації.

8.3. Оптимізація структури та змісту сайту

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

Проведемо аналіз проміжку часу який проходить від подачі клієнтом запиту на перегляд сайту до його відображення на екрані. Будемо мати на увазі, що сайт переглядається клієнтом при стандартних настройках браузера, а також, що клієнту для перегляду необхідно використати мережу WWW.

Вказаний проміжок часу можливо розділити на проміжок часу для відображення основного та допоміжних файлів Web – сторінки. Як правило в якості основного виступає HTML файл. В якості допоміжних виступають графічні, java (class) файли та об¢єктні файли, до яких відносяться ActiveX та Flash. Важливим є той факт, що браузер спочатку робить спробу знайти означені файли в тимчасовій пам’яті і тільки в разі негативного результату робить запит в мережу WWW. Відзначимо, що негативним вважається результат, коли файли не знайдені, або їх параметри не співпадають з настройками браузера.

Час необхідний на відображення основного та кожного з допоміжних файлів витрачається на втрати в мережі, виконання серверної частини Web – сторінки, інтерпретацію браузером та на відображення на екрані.

Втрати в мережі складаються з проміжків часу на встановлення з¢єднання з сервером провайдера, встановлення з¢єднання сервера провайдера з сервером, що обслуговує сайт, послідовну передачу основного файлу на сервер провайдера та на комп¢ютер клієнта. Для їх зменшення можливо застосувати організаційні та програмні заходи. Організаційні заходи полягають в розміщені сайту на одному потужному сервері який забезпечений потужними мережевими зв’язками. Як правило таким вимогам відповідають тільки сервери спеціалізованих організацій - провайдерів.

На Україні загальноприйнятою є схема, коли організації, що мають власну локальну мережу, а відповідно і великий трафік та з’єднані з мережею WWW малопотужним виділеним каналом, розміщують Web – сервер на своїй території. Перевагами такої схеми є відносна дешевизна, дещо простіше керування, використання практично будь – якого необхідного програмного забезпечення, відсутність виходу в мережу WWW при перегляді власного сайту з локальної мережі організації. Але така схема має серйозний недолік. В випадку великого трафіку сайт стає практично недоступним для зовнішніх клієнтів. Крім цього, обслуговування Web – серверу потребує залучення висококваліфікованого технічного персоналу. Тому, кращою є дзеркальна схема, коли сайт розміщують на сервері спеціалізованої організації – провайдера, а його дублікат ( дзеркало ) розміщують на сервері, який знаходиться в середині локальної мережі. Головними перевагами цієї схеми є незалежність доступності сайту від трафіку організації та відсутність виходу в мережу WWW при перегляді власного сайту.

Основним програмним засобом зменшення втрат часу в мережі є зменшення загального обсягу сторінок сайту. Можливо використання двох напрямків.

Перший напрямок полягає в зменшенні обсягу кожної із сторінок за рахунок оптимізації графіки та HMTL коду сторінки. Оптимізація графіки полягає в мінімізації кількості графічного матеріалу, збереженні графічних файлів з достатньою якістю та розмірами зображення, можливому використанні одного малюнка з різним масштабом. Мінімізацію кількості графічного матеріалу можливо проводити шляхом відмови від графічних меню, надписів та фонів. В якості альтернативи можливо використовувати стилі. Графічні файли слід зберігати з безпечною кольоровою гамою, розмірами які будуть використані на сайту та якістю достатньою для відображенні на екрані комп¢ютера. Наприклад, при збереженні графіки в редакторі PhotoShop в форматі jpg достатня якість для фотокарток 2-3, для малюнків 2. Зауважимо, що для публікації в WWW рекомендується виготовляти фотокартки з мінімальною кольоровою гамою з чіткими переходами кольорів.

Оптимізацію HTML коду слід проводити шляхом врахування особливостей парних тегів, широкого застосування стилів, та відмовою від використання візуальних HTML редакторів. Особливості парних тегів полягаю в тому, що багато з них не потребують закриваючого тегу, хоча це і є відступом від стандарту. При цьому такі теги коректно відображаються браузерами. Наприклад, можливо не використовувати закриваючі ( парні ) теги рядка ( </tr> ) та комірки ( </td> ) таблиці, так як їх дія закінчується закриваючим тегом таблиці ( </table> ). Застосування стилів доцільне при складному повторюваному форматуванні однотипних елементів сайту. В цьому випадку необхідні параметри тегів слід визначити за допомогою стилів, винесених в заголовок сторінки або в окремий css файл. Відмова від використання візуальних редакторів пояснюється великим обсягом лишнього HTML коду, який вставляється ними на сайт. Можливо рекомендувати використання редакторів типу HomeSite або Microsoft Visual Studio, які дозволяють будувати оптимальний код сайту.

Іншим напрямком зменшення загального обсягу сторінок сайту є виділення спільної для сайту інформації в окремі файли ( файл ). При першому відвідуванні сайту ці файли завантажуються в тимчасову пам’ять комп’ютера клієнта ( кеш ). При відвідуванні інших сторінок сайту з мережі завантажуються тільки файли з новою інформацією. Його загальновідома реалізація є фреймова структура. Про те більшість комерційних організацій відмовляються від фреймів по причинам трудомісткості їх модифікації та складності реєстрації в пошуковими системами. Відзначимо, що в багатьох пошукових системах дуже складно зробити посилання на сторінки сайту з фреймовою структурою. Тому рекомендується використати пов’язаний з HTML - сторінками сайту js - файл. В цьому випадку, загальну для більшості сторінок сайту інформацію можливо записати в вигляді винесених в окремий файл, функцій мови програмування JavaScript. Таку називати структуру сайту називають динамічною. Як показує досвід, js - файл коректно кешується загальнопоширеними браузерами, а час завантаження неосновних сторінок такого сайту практично не відрізняється від сайту з фреймами. Модифікація статичної частини сайту з динамічною структурою полягає в зміні тільки одного js – файлу. Таким чином, до переваг сайту з динамічною структурою слід віднести швидкість завантаження, низьку трудомісткість модифікації та достатню адаптованість до пошукових систем.

Для зменшення втрат часу, що пов’язані з встановленням з¢єднання браузера клієнта з сервером на якому розміщений сайт рекомендується обмежити числом 12 кількість файлів з яких складається Web – сторінка. Така кількість файлів обумовлена практичним досвідом, а також рекомендується в літературі. В протилежному випадку втрати часу на з¢єднання непропорційно зростають, особливо при низькій якості зв¢язку в мережі, що характерно для більшості телефонних ліній.

Ще один шлях для зменшення втрат часу можна застосувати в випадку наявності на сайті декількох невеликих за розмірами блоків інформації, що потребують логічного розподілу на декілька сторінок, доступ до яких необхідно проводити за допомогою різних пунктів меню. В цьому випадку можливо об¢єднати ці блоки інформації в одну сторінку, розділену на частини за допомогою внутрішніх посилань ( якорів ), або за допомогою декількох таблиць з різними значеннями параметра id та стилем display, що дорівнює none. Стиль display відповідає за відображення елемента на екрані. Доступ до необхідних блоків інформації можливо проводити за допомогою внутрішніх посилань, або присвоюючи необхідній таблиці стиль display, що дорівнює block. Вказати таблицю можливо за допомогою її ідентифікатора - id.

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

Розглянемо втрати часу на інтерпретацію браузером сторінки сайту та відображення її на екрані. По специфікації інтерпретація сторінки проводиться браузером послідовно зверху в низ. Але для найбільш розповсюдженого браузера Microsoft Internet Explorer послідовна інтерпретація та відображення мають місце тільки для тегів HTML. В випадку використання на сторінці скриптових мов програмування, аплетів або Flash об’єктів вказана послідовність порушується. Це яскраво видно при перегляді сторінок сайтів в верхній частині яких є анімація, що в багатьох випадках реалізована за допомогою викликів рекурсивних функцій. В таких випадках браузер не породжує новий обчислювальний процес. Анімаційні обчислення проводяться в тому ж потоці обчислень в якому проходить завантаження сторінки. Відбувається різке навантаження на центральний процесор комп’ютера. Як показує досвід при розміщенні в верхній частині сторінки трьох анімаційних об’єктів час її відображення на екрані може зрости в 2-5 рази. Положення ускладнюється тим, що для браузера Microsoft Internet Explorer почати запуск анімації при здійсненні події “Завершення завантаження сторінки” не вдається. По вказаним причинам рекомендується обмежити кількість анімаційних ефектів на сторінці двома, затримати виконання анімації на час достатній для завантаження всієї сторінки та проводити анімацію в окремих обчислювальних потоках. Наприклад, затримати час виконання анімації можливо за рахунок вставки в анімаційну функцію animhead наступного програмного коду:

time=0;

if (time==0) setTimeout('anim()',7000);

else setTimeout('anim()',100);

time=1;

Вказаний програмний код написаний на мові JavaScript і затримує виконання анімації на 7 секунд, при виконанні анімації через 0,1 секунди.

8.4. Адаптація сайту до клієнтського програмного забезпечення

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

Для проведення адаптації сайту до характеристик екрану необхідно в першу чергу його пристосувати до перегляду на екранах з різною кольоровою гамою та різною дозволяючою спроможністю. Хоча сучасні екрани як правило здатні передавати більше 1500000 кольорів, але відображатись ці кольори можуть по різному. По цій причині рекомендується на сайту використовувати так звані “безпечні кольори”. Кількість цих кольорів 256 і вони гарантовано однаково відображаються на всіх екранах.

Адаптацію сайту до дозволяючої спроможності екрану провести більш складно. Погано адаптований сайт або займає лівій верхній кут екрану, зоставляючи справа і знизу пусті місця, або далеко виходить за межі екрану. По цим причинам страждає дизайн сайту, крім того ускладнюється навігація по сайту. Найпростішим методами адаптації є оформлення сторінки сайту в вигляді таблиці, вирівняної по центру сторінки. В випадку використання в заголовку малюнку має сенс розділити його на дві частини. Першу частину, яка містить інформаційну частину малюнку вставити за допомогою тегу <img> в рядок або комірку таблиці. Іншу, фонову частину вставити як фоновий малюнок рядка або комірки таблиці. Це дозолить автоматично розмножувати фонову частину малюнку в залежності від ширини сторінки. Відзначимо, що інформаційна частина малюнку повинна коректно відображатись на невеликих екранах, для цього її ширина повинна бути в межах 100 – 200 пікселів. Ширина фонової частини малюнка повинна бути в межах 15-25 пікселів. Таким чином заголовок сайту буде коректно виглядати на всіх екранах, а сумарний розмір його графічних файлів буде становити 15 – 20 кілобайт. Пристосованість текстової частини сайту до дозволяючої спроможності екрану можна здійснити шляхом встановлення коефіцієнта пропорційності між розміром шрифту та дозволяючою спроможністю екрану.

Для коректного відображення сайту різними браузерами слід використовувати при його розробці тільки стандартні теги HTML, а також не використовуючи ті теги, які не сприймаються ведучими браузерами. Так, наприклад не рекомендується використовувати стандартний тег шару <div>, який некоректно сприймається браузером Netscape Navigator.

Адаптацію сторінки до настройок браузера можливо проводити шляхом врахування розмірів вікна браузера та встановлених клієнтом розмірів тексту. Погана адаптація до вказаних настройок може негативно позначитися на дизайні сторінок сайту на яких важливим є взаємне розміщення графічного та текстового матеріалу. Негативний вплив відбувається завдяки переходу малюнків в не передбачені для них рядки. Щоб цього не сталось можливо за допомогою тегу <nobr> заборонити розрив найдовшого рядка на сторінці, або взагалі заборонити зміну користувачем розмірів вікна браузера. В такому випадку рекомендується відкрити вікно браузера на весь екран. Це можна зробити обчисливши ширину ( w ) та висоту ( h ) екрану. Після цього слід сполучити ліві верхні кути вікна браузера та екрану та перерисувати вікно браузера відповідно до розмірів екрану. Відповідний програмний код на мові програмування JavaScript має вигляд:

h=window.screen.height; w=window.screen.width;

window.moveTo(0,0); window.resizeTo(w,h);

При необхідності заборони користувачем розмірів тексту сайту можливо встановити цей розмір за допомогою стилів. Наприклад:

<font style="font-size: 14px;">приклад</font>.

Розміри букв слова приклад практично завжди будуть 14 пікселів.

8.5. Контрольні запитання

Як провести оцінку ефективності сайту?
Шляхи популяризації сайту7
Які Інтернет – орієнтовані методи підвищення ефективності сайту?
Правила реєстрації сайту в пошукових системах?
Як використати тег <meta> для підвищення ефективності сайту7
Що таке банер?
Як провести оптимізацію структури сайту?
Як приблизно розрахувати проміжку часу який проходить від подачі клієнтом запиту на перегляд сайту до його відображення на екрані?
Методи оптимізації графіки на сайту?
Як адаптувати сайт до клієнтського програмного забезпечення?

З повагою ІЦ “KURSOVIKS”!