- •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.9. Многострочное поле textarea
У тих випадках, коли що редагується текст повинний займати декілька рядків, у формі між операторами <TEXTAREA> і </TEXTAREA> розташовують многострочное текстове поле:
<TЕХТАRЕА
NAМЕ="Ім'я_поля_tехtагеа"
ROWS="Кількість_рядків"
СОLS="Кількість_стовпчиків"
WRAP="Режим_пакунки_тексту"
onBlur="Оброблювач_події"
onСhаngе="Оброблювач_події"
onFocus="Оброблювач_події"
onSelect="Оброблювач_події">
...
Відображуваний текст
…
</TEXTAREA>
Тут за допомогою параметра NAME треба зазначити ім'я поля. Воно потрібно для того, щоб сценарій JavaScript міг обертатися до властивостей і методів цього поля.
Параметри ROWS і COLS визначають видимий розмір многострочного поля редагування, задаючи відповідно кількість рядків і стовпчиків (кількість символів, що можуть поміститися в однім рядку).
Параметр WRAP задає засіб пакунки тексту і може мати одне з трьох таких значень:
Значення Засіб пакунки тексту
off Свертка виключена, рядки відображаються так, як уводяться
virtual Рядки сворачиваются тільки при відображенні у вікні редагування, але передаються розширенню серверу Web і сценарію JavaScript точно в такому виді, у якому вводяться
physical При пакунку в переданий текст записуються символи нового рядка
Методи об'єкта textarea
Для об'єкта textarea визначені такі ж методи, що і для об'єкта text. Це методи focus, blur і select, що не мають параметрів.
За допомогою методу focus сценарій JavaScript може передати фокус полю редагування, а за допомогою методу blur - відібрати фокус у цього поля.
Виклик методу select призводить до виділення вмісту многострочного поля редагування.
Оброблювачі подій об'єкта textarea
Оброблювачі подій визиваються в таких випадках:
Оброблювач Коли визивається
onFocus Поле редагування одержує фокус запровадження
onBlur Поле редагування утрачає фокус запровадження
onChange Змінюється вміст поля редагування
onSelect Виділяється вміст поля редагування
3.3.10. Приклад сценарію, що заповнює поле textarea
Многострочное поле редагування розташовується у формах для того щоб користувач міг записати в ньому своє відкликання, коментар, питання або аналогічну інформацію. За допомогою сценарію JavaScript неважко виконати попереднє заповнення поля яким-небудь текстом. Наприклад, нехай потрібно створити форму, призначену для відправлення через Internet відкликання про роботу деякої програми.
Якщо включити перемикач "Подяка", сценарій автоматично запише в поле редагування дату і час підготування відкликання, а також текст позитивного відкликання. До цього тексту вам залишиться додати тільки підпис.
Для відправлення відкликання натисніть кнопку Complete. У результаті на екрані з'явиться діалогова панель із текстом позитивного відкликання.
Для того щоб повідомити виготовлювачу програми про помилки, варто включити перемикач "Проблеми". Відразу після цього сценарій запише в многострочное поле текст відповідного повідомлення. Цей текст треба будет відредагувати і доповнити, описав, наприклад, зовнішні прояви виявленої помилки.
Натискання кнопки Complete дозволить побачити текст повідомлення.
Вихідний текст документа HTML, у якому визначена форма для відправлення відкликання, а також обробну цю форму сценарій JavaScript подані в листинге 3.5.
Листинг 3.5. Файл chapter3/textarea/textarea. html
<HTML>
<HEAD>
<TITLE>Pa6oтa із многострочным текстовим полемо</ТIТLЕ>
<SCRIPT LANGUAGE="JavaScript">
var szOK = "Спасибі!\nВаша програма працює без помилок.";
var szTrouble = "НА жаль, із вашою програмою в наc виникнули проблема.";
var szProbList = "\nСерийный номер програми:
ХХХХХХ\nДата покупки: ХХ-ХХ-ХХ";
function getDate()
{
var szDate = "";
szDate = new Date();
return szDate.toLocaleString() + "\n";
}
function chkRadio(form,value)
{
if(value == "Thanks")
Sel.Comment.value = getDatet) + szOK;
else
Sel.Comment.value = getDate() + szTrouble + szProbList;
}
function init()
{
Sel.Comment.value = getDate() + szOK;
}
function Complete()
{
szMsg = Sel.Comment.value;
alert(szMsg);
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<Н1>Пришлите ваше відкликання</Н1>
<FORM NAME = "Sel">
<P><INPUT TYPE="radio" NAME="TextSelect" CHECKED
VALUE="Thanks"
onClick="if(this.checked)
{chkRadio(this.form,this.value);}"> Подяка
<BR><INPUT TYPE="radio" NAME="TextSelect"
VALUE="Trouble"
onClick="if(this.checked)
{chkRadio(this.form,this.value);}"> Проблеми
<P><TEXTAREA NAME="Comment"
ROWS="5" COLS="25" WRAP="physical">
</TEXTAREA>
<P><INPUT TYPE="button" VALUE="Compiete"
onClick="Complete();">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
init();
//-->
</SCRIPT>
</BODY>
</HTML>
Варто звернути увагу на те, що у формі многострочное поле редагування тексту textarea створено порожнім:
<TEXTAREA NAME="Comment"
ROWS="5" COLS="25" WRAP="physical">
</TEXTAREA>
Це поле називається "Comment", має п'ять рядків, у яких розміщається до 25 символів, і режим пакунки тексту physical, що припускає додавання символів нового рядка, що розділяють окремі рядки введеного тексту.
Як відбувається заповнення цього поля?
У самому кінці області тіла документа HTML, обмеженого операторами <BODY> і </BODY>, уставлений виклик функції init:
<SCRIPT LANGUAGE="JavaScript">
<!--
init();
//-->
</SCRIPT>
Ця функція визивається після завершення завантаження тіла документа і виконує початкове заповнення многострочного поля редагування textarea:
Sel. Comment. value = getDate() + szOK;
Рядок, що записується в це поле, утвориться шляхом додавання рядка поточної дати, отриманої від функції getDate (ця функція визначена в сценарії), із рядком szOK, що містить текст позитивного відкликання.
Функція getDate визначена в такий спосіб:
function getDate()
{
var szDate = "";
szDate = new Date();
return szDate. toLocaleString () + "\n";
}
У цій функції спочатку створюється об'єкт класу Data, а потім визивається для цього об'єкта метод toLocaleString, що повертає текстовий рядок дати.
У верхній частині форми знаходяться два перемикачі з залежною фіксацією. За допомогою цих перемикачів користувач може вибрати вид відкликання (подяка або повідомлення про помилку):
<INPUT TYPE="radio" NAME="TextSelect" CHECKED VALUE="Thanks" onClick="if(this.checked)
{chkRadio(this.form,this.value);}"> Подяка
<BR><INPUT TYPE="radio" NAME="TextSelect" VALUE="Trouble"
onClick="if(this. checked)
{chkRadio(this. form,this. value);}"> Проблеми
Обидва перемикачі ставляться до однієї групи і тому мають однакове значення параметра NAME. Для першого з них додатково зазначений параметр CHECKED, тому по умовчанню він знаходиться у включеному стані (тут передбачається, що кількість позитивних відкликань буде перевищувати кількість повідомлень про помилки).
Кожний із перемикачів має оброблювач події onClick, визначений у такий спосіб:
if(this.checked)
{
chkRadio(this. form,this. value);
}
При зміні стани перемикача визивається функція chkRadio. Ця функція перевіряє ім'я включеного перемикача і заповнює поле многострочного редактора textarea відповідним повідомленням:
function chkRadio(form,value) {
if(value == "Thanks")
Sel.Comment.value = getDate () + szOK;
else
Sel. Comment. value = getDate() + szTroubie + szProbList;
}
Функція chkRadio комбінує тексти повідомлень із поточної дати і заздалегідь проинициализированных рядків szOK, szTroubie і szProbList.
Тепер про те, як сценарій одержує текст із поля редагування і відображає його в діалоговій панелі.
Для кнопки Complete ми визначили оброблювач події onClick:
<INPUT TYPE="button" VALUE-="Complete"
onClick="Complete();">
Цей оброблювач викликає функцію Complete, що відображає підготовлене відкликання на екрані:
function Complete()
{
szMsg = Sel.Comment.value;
alert(szMsg);
}
Тут текст витягається з поля textarea як значення властивості value для відповідного об'єкта, а потім відображається на екрані за допомогою умонтованої функції alert.