- •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
2.4.4. Обмеження часу реакції користувача
Іноді користувач, попавши на сторінку Web, довго не може зрозуміти, що потрібно робити. Можна створити сценарій, що відображає в цій ситуації документ HTML із подсказкой. Зрозуміло, підсказування повинне відображатися тільки в тому випадку, якщо користувач не виконує над сторінкою ніяких дій протягом достатньо тривалого часу.
Для виміру час, протягом якого користувач неактивний, допоможуть методи setTimeout і clearTimeout. Перший із цих методів уже використовувався в попередньому сценарії для організації періодичного виконання функції.
Коли користувач завантажує документ HTML, вихідний текст якого поданий у листинге 2.6, на екрані з'являється форма з полемо, призначеним для запровадження текстового рядка пароля.
Відразу після завантаження документа у вікно браузера сценарій запускає таймер, викликаючи метод setTimeout із цього ж класу. Таймер установлюється на 10 с. Саме за цей час треба ввести пароль і натиснути кнопку Enter Password у формі, показаної на мал. 2.13, щоб одержати доступ до сторінки.
Якщо почекати з запровадженням пароля або ввести неправильний пароль, сценарій завантажує у вікно браузера динамічно сформований документ HTML із повідомленням про заборону доступу.
Тільки в тому випадку, якщо пароль уведений правильно і протягом 10 із, на екрані з'являється повідомлення про надання користувачу доступу і посилання, за допомогою якої можна перейти до перегляду головної сторінки нашого серверу Web.
Тепер роздивимося вихідний текст сценарію JavaScript, умонтованого в документ HTML (листинг 2.6).
Листинг 2.6. Файл chapter2/Password/Password. html
<HTML>
<HEAD>
<ПОЗНАЧКА http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<title>bвод пароля</Т1ТLЕ>
<SCRIPT LANGUAGE="JavaScript">
<!--
var idTimer=0;
function StartMyTimer()
{
var cmd="NoAccess ()";
idTimer=window.setTimeout(cmd, 10000);
}
function NoAccess()
{
document.write("<Н1>Доступ заборонений</Н1>") ;
document.write("<Р>Спробуйте наступного разу!");
}
function CheckPassowd()
{
var szPwd="";
szPwd=document.pwdForm.pwd.value;
if(szPwd=="password")
{
clearTimeout(idTimer);
document.write("<Н1>Доступ дозволений</Н1>");
document.write("<Р>Наш сервер:");
document.write('<A HREF="http://www.glasnet.ru/~frolov/index.html" ');
document.write('>http://www.glasnet.ru/~frolov/index.html</A>');
}
else
{
document.write("<Н1>Доступ заборонений</Н1>");
document.write("<Р>Спробуйте наступного разу!");
}
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white onLoad="StartMyTimer();">
<Н1>Доступ обмежений</Н1>
<P>Ми обмежили доступ до нашого серверу:)
<Р>Ви повинні ввести пароль (слово password) протягом 10 с.
<HR>
<FORM NAME="pwdForm">
<P><INPUT TYPE="text" VALUE="******" NAME="pwd">
<P><INPUT TYPE="button" VALUE="Enter Password" оnC1ick="CheckPassowd();">
</FORM>
<HR>
</BODY>
</HTML>
У першій сторінці заголовка зазначений за допомогою оператора <ПОЗНАЧКА> номер кодової сторінки 1251, що відповідає кирилиці в Windows:
<ПОЗНАЧКА http-equiv="Content-Type"
content="text/html; charset=windows-1251">
Без цього рядка документ відображався неправильно браузером Microsoft Internet Explorer версії 4.0.
У перших рядках сценарію, розташованого в заголовку документа, оголошена перемінна idTimer і визначена функція StartMyTimer:
var idTimer=0;
function StartMyTimer()
{
var cmd="NoAccess()";
idTimer=window. setTimeout(cmd, 10000);
}
Функція StartMyTimer запускає таймер, зберігаючи його ідентифікатор у глобальної перемінної idTimer. Для запуску таймера застосований знайомий метод з ім'ям setTimeout.
Коли таймер спрацює (а це відбудеться через 10 секунд після завантаження документа HTML у вікно браузера), буде викликана функція NoAccess. Ця функція виводить у вікно браузера повідомлення про заборону доступу до сторінки.
Для того щоб функція StartMyTimer запускалась відразу після завантаження документа HTML у вікно браузера, зазначене її ім'я в параметрі onLoad оператора <BODY> і організована в такий спосіб опрацювання відповідної події:
<BODY BGCOLOR=white onLoad="StartMyTimer();">
Якщо користувач завантажив документ і просто дивиться на нього, через 10 секунд уміст документа у вікні браузера буде перезаписано функцією NoAccess.
Для запровадження пароля необхідно використовувати форму, що визначена в документі HTML у такий спосіб:
<FORM MAME="pwdForm">
<P><INPUT TYPE="text" VALUE="******" NAME="pwd">
<P><INPUT TYPE="button" VALUE="Enter Password"
onClick="CheckPassowd();">
</FORM>
Ім'я форми pwdForm зазначено в параметрі NAME оператора <FORM>. Це ім'я буде потрібно для витягу рядка пароля з текстового поля, визначеного у формі за допомогою оператора <INPUT>. Ім'я цього текстового поля pwd також задається параметром NAME.
Крім текстового поля у формі є кнопка з написом "Еnter Password". Для цієї кнопки визначений оброблювач події onClick, що визивається, коли користувач натискає мишею на кнопку. Оброблювачем у даному випадку є функція CheckPassowd, визначена в сценарії. Ця функція перевіряє пароль і, якщо пароль уведений правильно, зупиняє таймер, запущений при завантаженні документа HTML.
Витяг рядка пароля з поля форми робиться в такий спосіб:
var szPwd="";
szPwd=document. pwdForm. pwd. value;
Тут виконується посилання на властивість value об'єкта pwd, яким є текстове поле форми (пригадаєте, що це поле називається pwd). Об'єкт pwd знаходиться усередині форми з ім'ям pwdForm, що, у свою чергу, розташовується в документі HTML, завантаженому у вікно браузера. Цим документом є об'єкт document.
Отримавши введену користувачем рядок, функція CheckPassowd перевіряє її:
if(szPwd=="password")
{
clearTimeout(idTimer);
...
}
Якщо рядок уведений правильно, таймер зупиняється методом clearTimeout. У якості параметра цьому методу передається ідентифікатор таймера, отриманий від методу setTimeout. При помилці в документ HTML записується повідомлення про заборону доступу.