КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Листинг 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.
3.3.11. Однострочное поле password
Для запровадження такої інформації, як пароли, у формах розміщають однострочные поля редагування типу password:
<INPUT TYPE="password"
NАМЕ="Ім'я_поля_tехt"
VALUE="Значення"
SIZE= Розмір_поля>
Для поля password можна зазначити параметри NAME, VALUE і SIZE. Це поле не може мати оброблювачів подій.
Параметр NAME дозволяє задати ім'я поля, що необхідно для обертання до властивостей об'єкта password, що відповідає цьому полю.
За допомогою параметра VALUE можна записати в поле довільний текстовий рядок.
Параметр SIZE визначає розмір (ширину) текстового поля в символах. Це розмір видимої частини поля. Він не обмежує довжину рядка, що можна ввести в даному полі.
Поле password схоже на поле text, розглянуте раніше. Головна відмінність полягає в тому, що символи введеного в цьому полі тексту заміняються на зірочки.
Властивості об'єкта password
Сценаріям JavaScript доступні три властивості поля редагування password:
Властивість Опис
defaultValue Відбиває стан параметра VALUE
name Значення параметра NAME
value Поточний уміст поля редагування
Так само, як і для поля text, відразу після відображення поля редагування властивості defaultValue і value бережуть однакові рядки. Коли користувач редагує текст, усі зміни відбиваються у властивості value.
Змінюючи уміст властивості value, сценарій може змінити вміст поля редагування типу password.
Методи об'єкта password
Для об'єкта password визначені методи focus, blur і select, що не мають параметрів.
За допомогою методу focus сценарій JavaScript може передати фокус полю редагування, а за допомогою методу blur - відібрати фокус у цього поля. Виклик методу select призводить до виділення вмісту поля редагування.
3.3.12. Запровадження ідентифікатора і пароля
У якості практичного приклада застосування сценарію JavaScript для опрацювання інформації з полів text і password приведений документ HTML, призначений для реєстрації користувачів.
У формі реєстрації новий користувач повинний увести свій ідентифікатор, а також задати пароль (3.15).
У процесі запровадження пароля легко припуститися помилки, тому звичайно в системах реєстрації потрібно вводити новий пароль два рази. Якщо обидва рази був введений однаковий пароль, то він стає активним для даного користувача.
Сценарій, що опрацьовує дані з форми, вирішує дві задачі. По-перше, він перетворює символи ідентифікатора користувача в прописні. По-друге, сценарій перевіряє ідентичність паролів, введених у полях "Пароль" і "Перевірка пароля".
Якщо введені пароли ідентичні, те після натискання на кнопку Соmplete користувач побачить на екрані діалогову панель із введеним ідентифікатором н паролем.
Якщо пароли не збігаються, сценарій пропонує користувачу повторити запровадження паролів.
Вихідний текст нашого документа HTML, що реєструє нових користувачів, показаний у листинге 3.6.
|
|
|
|
|
Дата добавления: 2014-11-29; Просмотров: 451; Нарушение авторских прав?; Мы поможем в написании вашей работы!