Об’єкт Navigator. Управління браузером.

У зв'язку з війною браузерів (яка, можна вважати, вже закінчилася на користь Microsoft Internet Explorer) стала актуальною задача настройки сторінки на конкретну програму перегляду. При цьому можливі два варіанти: визначення типу браузера на стороні сервера і визначення типу браузера на стороні клієнта. Для останнього варіанту в арсеналі об'єктів JavaScript існує об'єкт Navigator. Цей об'єкт - властивість об'єкта Window.

Розглянемо простий приклад визначення типу програми перегляду:

onClick = "window.alert (window.navigator.userAgent);"

При натисканні на кнопку відображається вікно попередження. У ньому міститься рядок userAgent, яку браузер поміщає в відповідний HTTP-заголовок. Цей рядок можна розібрати по компонентах, наприклад:

navigator.appName = Microsoft Internet Explorer

navigator.appCodeName = Mozilla

navigator.appVersion = 4.0 (compatible; MSIE 5.5; Windows 98)

navigator.userAgent = Mozilla/4.0 (compatible; MSIE 5.5; Windows 98)

 

Кнопки Button, Submit, Reset.

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

<button type="button | reset | submit">...</button>

button – звичайна кнопка;

reset – для очищення форми та повернення даних до початкових значень;

submit – кнопка, для відправлення даних на сервер.

За замовчунням для кнопки стоїть значення submit.

 

Текстові поля Text, Password, File Upload, Textarea, Hidden.

Поле text – застосовується для вводе тексту в певну область

Password – ввід пароля, відображається крапочками або зірочками

File Upload – ввід файла, (загрузка на сервер)
Приклад:
<input type="file" name="datafile" size="40">

</p>

Textarea – Велике поле для вводу тексту. Має атрибути:
accesskey – Перехід по полю за допомого спец клавіш

Rows,cols – довжина і ширина

Maxlength – максимальна довжина тексту

Tabindex – перехід за допомогою таб

Name – імя поля

Атрибут hidden представляет собой выключатель, который определяет, отображать объект в окне браузера или нет. Это особенно удобно для скрытия панели управления при воспроизведении фоновой музыки. Если этот атрибут указан, значение атрибутов width и height игнорируется.

Значення true & false

 

Елементи Checkbox та Radio.

Этот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton), может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы. Checkbox – галочка, можна вибирати скільки хоч, radiobutton – вибрати можна тільки 1

Checkbox = “chacked” – по замовчуванню включена

 

Списки: елементи Select, Option.

Тег <select> дозволяє створити елемент інтерфейсу у вигляді списку, що розкривається, а також список з одним або множинним вибором, як показано далі. Кінцевий вигляд залежить від використання атрибуту size тега <select>, який встановлює висоту списку. Ширина списку визначається самим широким текстом, зазначеним в тезі <option>, а також може змінюватися за допомогою стилів. Кожен пункт створюється за допомогою тега <option>, який повинен бути вкладений в контейнер <select>. Якщо планується відправляти дані списку на сервер, то потрібно помістити елемент <select> всередину форми. Це також необхідно, коли до даних списку йде звернення через скрипти.
<select>

<option>Пункт 1</option>

<option>Пункт 2</option>

</select>

Атрибути:
accesskey – дозволяє сполуки спец клавіш

Autofocus – одержує фокус після завантаження сторінки
disabled – блокує доступ до списка

Size – кількість строк

Tabindex – перехід за допомогою tab

Тег <option> визначає окремі пункти списку, створюється за допомогою контейнера <select>. Ширина списку визначається самим широким текстом, зазначеним в тезі <option>, а також може змінюватися за допомогою стилів. Якщо планується відправляти дані списку на сервер, то потрібно помістити елемент <select> всередину форми. Це також необхідно, коли до даних списку йде звернення через скрипти.

 

Перевірка достовірності даних форми.

Доступ до елементів форми здійснюється через document.forms[id форми]. Доступ до елементів форми через

document.forms[id форми].elements[id елемента].value;

Приклад:

<script>

function checkForm(){

var name = document.forms["reg"].elements["name"].value;

var surname = document.forms["reg"].elements["surname"].value;

var nameCheck = /^[A-Z][a-z]{1,20}$/;

var email = document.forms["reg"].elements["email"].value;

if(умова перевірки елементів форми)

alert(“OK”);

}

</script>

<form id="reg" name="reg">

<input type="text" name="name" value="">

<input type="text" name="surname" value="">

<input type="text" name="email" value="">

<input type="button" value="Перевірити" onClick="checkForm()">

</form>

 

Рух об’єктів на сторінці.

Рух об’єкту на сторінці організовується через його послідовне створення та видалення. Створюється об’єкт через метод document.createElement(тип елемента); при цьому він ще не відображається на сторінці. Щоб відобразити елемент на сторінці потрібно задати батьківський елемент, в який він буде вкладений також через об’єкт document в прикладі (var parentElem = document.body.children[1];). Далі для відображення об’єкта на сторінці використовують бат.елемент.appendChild(доч.елемент);

для видалення бат.елемент.removeChild(доч.елемент);

Приклад

<script>

var timerId;

var i=0;

var parentElem = document.body.children[1];

var newDiv = document.createElement('img');

newDiv.src='1.png';

newDiv.style.position='absolute';

function lineUpdate() {

parentElem.removeChild(newDiv);

if(i<=screen.width-newDiv.width)

{

newDiv.style.left=i+'px';

i+=1;

}

parentElem.appendChild(newDiv);

}

function lineStart() {

if (timerId) return;

parentElem.appendChild(newDiv);

newDiv.style.top='100px';

newDiv.style.left='0px';

timerId = setInterval(lineUpdate, 5);

lineUpdate();

}

function lineStop() {

clearInterval(timerId);

timerId = null;

i=0;

parentElem.removeChild(newDiv);

}

</script>

<input type="button" onclick="lineStart()" value="Старт">

<input type="button" onclick="lineStop()" value="Стоп">

Об’єкт style в JavaScript.

ОбъектStyle открывает доступ к атрибутам CSS соответствующего объекта, тем самым обеспечивая возможность управления визуальными характеристиками содержимого, такими как шрифт, цвет или размер.

Можно таким образом установить любое свойство CSS, если, в соответствии с правилами создания имен, взять имя свойства CSS и, исключив дефисы, перевести в верхний регистр начальные буквы присоединенных слов, чтобы получить свойство JavaScript/DOM. Так, свойство font-style CSS превращается в свойство fontStyle JavaScript, background-image превращается в backgroundlmage, font-size — в fontSize и т. д.

Пример
<html>
<head>
<script language="JavaScript" type="text/javascript">

var obj=document.body.children[1];
obj.style.backgroundColor = ((obj.style.backgroundColor == "lightblue")? (""): ("lightblue"));

obj.style.borderStyle = "solid";
obj.style.borderWidth = "lpx";
</script>

</head>

<body> <table>…</table>

</body>
</html>

Устанавливайте свойства Style в виде строки, и эти строки должны быть как можно более конкретными. Например, вместо style. borderWidth = 2 используйте style.borderWidth = "2рх". Это уменьшит риск возникнивения ошибок и увеличит совместимость с менее снисходительными pеализациями СSS-JavaScript.