- •1. Основні поняття
- •1.1. Сім варіацій на тему "Hello, world! "
- •1.1.1. Варіація перша: сама проста
- •1.1.2. Варіація друга: із секретним вихідним текстом
- •1.1.3. Варіація третя: із переменной і функціями
- •1.1.4. Варіація четверта: створення сторінки "на літу"
- •1.1.5. Варіація п'ята: із діалоговою панеллю
- •1.1.6. Варіація шоста: опрацювання події
- •1.1.7. Варіація сьома: із визначенням типу браузера
- •1.2. Перемінні в JavaScript
- •1.2.1. Оголошення перемінних
- •1.2.2. Присвоєння значення перемінним
- •1.2.3. Типи даних
- •1.2.4. Перетворення типів даних
- •1.3. Оператори мови JavaScript
- •1.3.1. Унарные оператори
- •1.3.2. Бинарные оператори
- •1.3.3. Оператори для роботи з окремими бітами
- •1.3.4. Оператори зсуву
- •1.3.5. Оператори відношення
- •1.3.6. Логічні оператори
- •1.3.7. Оператор присвоювання
- •1.3.8. Умовні оператори
- •1.3.9. Оператори циклу
- •1.3.10. Інші оператори
- •1.3.11. Старшинство операторів JavaScript
- •1.3.12. Функції в мові сценаріїв JavaScript
- •1.4. Приклади використання операторів циклу
- •2. Класи і об'єкти
- •2.1. Три типи об'єктів «JavaScript
- •2.1.1. Умонтовані об'єкти
- •2.1.2. Об'єкти браузера
- •2.1.3. Об'єкти на базі класів, утворюваних програмістом
- •2.2. Масиви в JavaScript
- •2.3.1. Властивості об'єкта window
- •2.3.2. Методи об'єкта window
- •2.4. Сценарії, що працюють з об'єктами window
- •2.4.1. Як закрити вікно браузера
- •2.4.2. Открываем нове окно
- •2.4.3. Текст , що біжить , у рядку стани браузера
- •2.4.4. Обмеження часу реакції користувача
- •2.4.5. Завантаження документа html у вікно браузера
- •2.5.1. Властивості об'єкта document
- •2.5.2. Методи об'єкта document
- •2.5.3. Колірне оформлення документа
- •2.5.4. Посилання і мітки в документі
- •2.6. Умонтований клас Math
- •2.6.1. Властивості
- •2.6.2. Методи
- •2.7. Умонтований клас Date
- •2.7.1. Конструктори класу Date
- •2.8. Умонтовані функції
- •2.9. Плавна зміна цвіту фона документа html
- •3. Робота з формами
- •3.1. Ієрархія об'єктів у формах
- •3.2. Форма і її властивості
- •3.2.2. Властивості об'єкта form
- •3.3. Об'єкти, що входять до складу форм
- •3.3.1. Кнопка button
- •3.3.2. Перемикач checkbox
- •3.3.3. Перемикач radio
- •3.3.4. Приклад форми з перемикачами
- •3.3.5. Список select
- •3.3.6. Приклади сценаріїв, що працюють із списками
- •3.3.7. Однострочное поле text
- •3.3.8. Перевірка анкети
- •3.3.9. Многострочное поле textarea
- •3.3.10. Приклад сценарію, що заповнює поле textarea
- •3.3.11. Однострочное поле password
- •3.3.12. Запровадження ідентифікатора і пароля
- •3.4. Перевірка заповнення форми
- •3.5. Шестнадцатеричный калькулятор
- •3.3.6. Електронні часи
- •4. Фреймы
- •4.1. Файл опису фреймов
- •4.2. Взаємодія між фреймами
- •4.2.1. Десятично-шестнадцатеричный перетворювач
- •4.2.2. Відображення декількох документів html
- •5. Растровые зображення
- •5.1. Растровое зображення як об'єкт
- •5.2. Динамічна заміна растровых зображень
- •5.2.1. Зміна зовнішнього вигляду графічних посилань
- •5.2.2. Створення анімаційних зображень
- •5.2.3. Чекання завантаження всіх зображень
- •6. Взаємодія з аплетами java
- •6.1. Вбудовування аплета Java у документ html
- •6.2. Виклик методів аплета Java із сценарію JavaScript
- •6.3. Доступ до полів аплета Java із сценарію JavaScript
- •6.4. Динамічне завантаження аплетов Java
- •7. Застосування cookie
- •7.1. Виконання основних операцій із cookie
- •7.1.1. Створення cookie
- •7.1.2. Одержання значення cookie
- •7.1.3. Зміна значення параметра cookie
- •7.1.4. Видалення cookie
- •7.1.5. Обмеження на використання cookie
- •7.2. Декілька прикладів використання cookie
- •7.2.1. Фіксація повторних провідин сторінки
- •7.2.2. Записна книжка Cookies Notepad
- •7.2.3. Настроювання параметрів документа html
- •7.2.5. Одержання cookie розширенням серверу Web
- •7.2.6. Лічильник провідин на базі cookie і програми cgi
- •7.3. Настроювання браузера для роботи з cookie
3.3.7. Однострочное поле text
Часто у формах, розміщених на сторінках серверів Web, зустрічаються однострочные поля, призначені для запровадження і редагування тексту. Для того щоб вбудувати таке поле у форму, необхідно використовувати оператор <INPUT> із параметром TYPE, рівним значенню "text":
<INPUT TYPE="text"
NAME="Ім'я_поля_ text"
VALUE="Значення"
SIZE=Paзмep_поля оnВlur="Оброблювач_події" оnChаnge="Оброблювач_події"
оnFocus="Оброблювач події"
onSelect="Оброблювач_події">
Додатково можна зазначити параметри NAME, VALUE і SIZE, а також чотири оброблювачі подій, утворюваних текстовим полемо.
Параметр NAME дозволяє задати ім'я поля, необхідне для обертання до властивостей об'єкта text, що відповідає цьому полю.
За допомогою параметра VALUE можна записати в поле довільний текстовий рядок. Цей рядок буде відображатися відразу після завантаження документа HTML у вікно браузера.
Параметр SIZE визначає розмір (ширину) текстового поля в символах. Це розмір видимої частини поля. Він не обмежує довжину рядка, що можна ввести в даному полі.
Властивості об'єкта text
Сценаріям JavaScript доступні три властивості поля редагування як об'єкта класу text:
Властивість Опис
defaultValue Відбиває стан параметра VALUE
name Значення параметра NAME
value Поточний уміст поля редагування
Відразу після відображення нуля редагування властивості defaultValue і value бережуть однакові рядки. Коли користувач редагує текст, усі зміни відбиваються у властивості value.
Змінюючи уміст властивості value, сценарій JavnSnipt може змінити вміст поля редагування.
Методи об'єкта text
Для об'єкта text визначені методи focus, blur і select, що не мають параметрів. За допомогою методу focus сценарій JavaScript може передати фокус полю редагування, а за допомогою методу blur - відібрати фокус у цього поля. Виклик методу select призводить до виділення вмісту поля редагування.
Оброблювачі подій об'єкта text
Оброблювачі подій визиваються в таких випадках:№
Оброблювач Коли визивається
onFocus Поле редагування одержує фокус запровадження
onBlur Поле редагування утрачає фокус запровадження
onChange Змінюється вміст поля редагування
onSelect Виділяється вміст поля редагування
3.3.8. Перевірка анкети
Методика роботи з текстовими полями в сценаріях JavaScript буде розглянута на прикладі документа HTML із формою для запровадження анкети.
Приведений сценарій виконує нескладне опрацювання інформації, що вводиться в текстових полях цієї форми. Зокрема, сценарій перетворює символи прізвища в прописні. Якщо зазначити вік, менший 18 років, сценарій зробить його рівним нулю.
Якщо після заповнення анкети натиснути кнопку Complete, на екрані з'явиться діалогова панель, що відображає вміст окремих полів форми.
Кнопка Reset установлює поля у вихідний стан. Вихідний текст документа HTML з описаною вище формою і сценарієм JavaScript ви знайдете в листинге 3.4.
Листинг 3.4. Файл chapter3/text/text. html
<HTML>
<HEAD>
<Т1ТLЕ>Робота з текстовими полями</Т1ТLЕ>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Complete()
{
var szElement="";
szЕ1еmеnt="Прізвище: " + Sel.family.value + "\nИмя: " + Sel.Name.value + "\nТелефон: " + Sel.PhoneNumber.value + "\nВозраст: " + Sel.Age.value;
alert(szElement);
}
function CheckAge(age)
{
if(age < 18)
else
return age;
}
//-->
</SCRIPT>
</НЕАD>
<body BGCOLOR=white>
<H1>3аполните анкету</Н1>
<FORM NAME="Sel">
<TABLE>
<ТR><ТD><У>Прізвище:</У></ТD><ТD><INРUТ TYPE="text"
NAME="family"
onChange="this.value=this.value.toUpperCase()"
SIZE="20"></TD></TR>
<ТR><ТD><У>Ім'я:</У></ТD><ТD><INРUТ TYPE="text"
NAME="Name" SIZE="20"></TD></TR>
<ТR><ТD><У>Телефон:</У></ТD><ТD><INРUТ TYPE="text"
NAME="PhoneNumber" SIZE="10"></TD></TR>
<TR><TD><B>Boзpacт:</B></TD><TD><INPUT TYPE="text"
NAME="Age" VALUE="18" SIZE="4"
onChange="this.value=CheckAge(this.value)"
onFocus="this.select()"></TD></TR>
<P>
<TABLE>
<TR><TD><INPUT TYPE="button" VALUE="Complete"
onClick="Complete();"></TD>
<TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Для перетворення символів прізвища в прописні для поля family визначений оброблювач події onChange:
onChange="this. value=this. value. toUpperCase()"
Після внесення змін у вміст поля цей оброблювач викликає метод toUpperCase, визначений у класі рядків. Перетворене значення записується знову у властивість this. value.
Поле Age має два оброблювачі для подій: onChange і onFocus:
onChange="this. value=CheckAge(this. value)"
onFocus="this. select()"
Перший із цих оброблювачів викликає функцію перевірки віку CheckAge, передаючи їй значення з поля Age. Повернуте цією функцією значення знову записується в те ж саме поле.
Функція CheckAge виглядає дуже просто:
function CheckAge(age)
{
if(age < 18)
return "0";
else
return age;
}
Якщо їй передається рядок, що містить число, менше 18, вона повертає нульове значення. У тому випадку, коли число більше 18 або коли в цьому полі знаходиться нечисловое значення, функція CheckAge повертає переданий їй рядок без змін.
Оброблювач події onFocus викликає метод select, що виділяє вміст поля редагування. Дія цього оброблювача можна побачити, нажимая клавішу табуляции доти, поки фокус запровадження не буде переданий полю Age.
Кнопку Complete користувач натискає після заповнення анкети. Для неї визначений оброблювач події onClick:
<INPUT TYPE="button" VALUE="Complete"
onClick="Complete();">
Цей оброблювач викликає функцію з ім'ям Complete, у задачу якої входить відображення вмісту поляж форми. Вихідний текст функції Complete приведений нижче:
function Complete()
{
var szElement="";
szElement="Фaмилия: " + Sel.family.value + "\nИмя: " + Sel.Name.value + "\nТелефон: " + Sel.PhoneNumber.value + "\nВозраст: " + Sel.Age.value;
alert(szElement);
}
Варто звернути увагу на те, як адресуються властивості полів форми вказівкою імені форми, імен полів і імені властивості value.