- •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.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.
Листинг 3.6. Файл chapter3/password/password. html
<HTML>
<HEAD>
<ТIТLЕ>Запровадження і перевірка пароля</ТIТLЕ>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Complete()
{
if(Sel.pwd.value != Sel.pwdl.value)
alert("Помилка при запровадженні пароля\nПопробуйте ще разом");
else
{
var szId="";
var szPwd="";
szId = Sel. id. value;
szPwd = Sel.pwd.valued;
alert("Реєстрація виконана : \n" + "ID=" + szId + "\nPassword=" + szPwd) ;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<Н1>Реєстрація</Н1>
<FORM NAME="Sel">
<TABLE>
<ТR><ТD><У>Ідентифікатор:</У></ТD><ТD>< INPUT
TYPE="text" NAME="id"
onChange="this.value=this.value.toUpperCase()"
SIZE="20" ></TD></TR>
<ТR><ТD><У>Пароль : </BX/TD><TD><INPUT TYPE="password"
NAME="pwd" SIZE="20"></TD></TR>
<ТR><ТD><У>Перевірка пароля: </BX/TD><TD><INPUT TYPE="password"
NAME="pwdl" SIZE="20"></TD></TR>
</TABLE>
<P> <TABLE>
<TR><TD><INPUT TYPE="button" VALUE="Complete"
onClick="Complete();"></TD>
<TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Перетворення символів ідентифікатора користувача виконує оброблювач події onChange, визначений для поля id типу text:
<INPUT TYPE="text" NAME="id"
onChange="this. value=this. value. toUpperCase()" SIZE="20">
Це перетворення виконує функція toUpperCase, котрої вже користувалися раніш.
Що ж стосується перевірки пароля, то цим займається функція Complete, визначена в якості оброблювача події onClick для однойменної кнопки, призначеної для посилки заповненої форми.
От вихідний текст цієї функції:
function Complete()
{
if(Sel.pwd.value != Sel.pwdl.value)
alert("Помилка при запровадженні пароля\nПопробуйте ще разом");
else
{
var szld="";
var szPwd="";
szId = Sel.id.value;
szPwd = Sel.pwd.valued;
alert("Реєстрація виконана:\n" + "ID=" + szld + "\nPassword=" + szPwd);
}
}
Якщо користувач увів різні пароли, значення властивостей Sel. pwd. value і Sel. pwdl. value не збігаються. У цьому випадку функція Complete відображає діалогову панель із повідомленням про помилку.
При збігу паролів функція Complete витягає значення ідентифікатора користувача Sel. id. value і його пароля Sel. pwd. value, а потім відображає їх на екрані.