- •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.8. Умонтовані функції
У цьому поділі перераховані декілька корисних умонтованих функцій, що можна використовувати в сценаріях JavaScript.
eval
Функція eval призначена для перетворення текстового рядка в чисельне значення. Через єдиний параметр вона одержує текстовий рядок і обчисляє її як вираження мови JavaScript. Функція повертає результат обчислення:
vаг nValue = Eval(szStr);
parseInt
Ця функція призначена для перетворення текстового рядка в целочисленное значення. Рядок передатися функції через параметр:
var nValue = parseInt(szStr);
parseFloat
Функція parseFloat намагається перетворити текстовий рядок у число з плаваючою точкою. Текстовий рядок передається цієї функції через перший параметр, а підстава числення - через другий:
var nFloat = parseFloat(szStr, nRadix);
escape
За допомогою функції escape сценарій JavaScript може закодировать текстовий рядок із застосуванням URL-кодировки. У цій кодировке спеціальні символи, такі, як "прогалина" або "табуляция", преобразовываются до такого виду: %ХХ, де XX - шестнадцатеричный код символу. Приклад використання цієї функції:
var szURL = escape(szStr);
unescape
Функція unescape, виконує дію, прямо протилежне дії функції unescape - перекодирует рядок із URL-кодировки в звичайний текстовий рядок:
var szStr = unescape(szURL);
2.9. Плавна зміна цвіту фона документа html
При перегляді сторінки деяких серверів Web, можна звернути увагу, що цвіт їхнього фона починає плавно змінюватися відразу після завантаження, становлячись поступово светлее або, навпаки, темнее. Аналогічний ефект може бути отриманий не тільки для цвіту фона, але і для цвіту тексту, а також гипертекстовых посилань. Можна зробити, наприклад, так, щоб рядки тексту поступово виявлялися на фоні сторінки або зникали (щоб відвідувач не встиг їх прочитати).
Складний на перший погляд ефект досягається надзвичайно просто: зміною властивості bgColor об'єкта document. У листинге 2.10 приведений приклад сценарію, що після завантаження документа HTML у вікно браузера змінює цвіт його фона з білого на чорний.
Листинг 2.10. Файл chapter2/ChangeBkg/ChangeBkg. html
<HTML>
<HEAD>
<TITLE>Color Links</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var nRed = 255;
var nGreen = 255;
var nBlue = 255;
function colorShift()
{
var cmd = "colorShift()";
document.bgColor = "#" +
dec2hex(nRed) +
dec2hex(nGreen) +
dec2hex(nBlue);
if(nRed > 0)
{
nRed -= 10;
nGreen -= 10;
nBlue -= 10;
}
timer = window.setTimeout(cmd, 50);
}
function dec2hex(nDec)
{
var szHexTable = "0123456789ABCDEF";
var szResult = "";
var szBuf = "";
var nRem = 0;
var bNegative = false;
if(nDec < 0)
{
bNegative=true;
nDec = -nDec;
}
nTmp = nDec;
while(true)
{
nRem = nTmp % 16;
nTmp = nTmp / 16;
if(Math.floor(nTmp) < 16)
break;
szBuf = szHexTable.charAt(nRem);
szResult = szBuf.concat(szResult);
}
szBuf = szHexTable.charAt(nRem);
szResult = szBuf.concat(szResult);
if(Math.floor (nTmp) != 0)
{
szBuf = szHexTable.charAt(Math.floor(nTmp));
szResult = szBuf.concat(szResult);
}
if(bNegative == true)
return("-" + szResult);
else
return szResult;
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<Н1>Зміна колірного оформлення</Н1>
<Р>Відвідайте ці сервери:
<Р><А HREF="http: //www. g las net.ru/~frolov/index.htiTil">Haшa домашня сторінка</А>
<P><A HREF="http://www. auramedia.ru">Каталог програм Auramedia</A>
<P><A HREF="http://www.microsoft.com/java/">Cтpaница серверу Microsoft про Java</A>
<P><A HREF="ColorLinks.html#Локальный роздів">Локальний поділ</А>
<HR>
<H1><A NАМЕ="Локальний поділ">Локальний поділ</А></Н1>
<Р>Цей локальньй роздів ви можете переглянути, навіть якщо ваш комп'ютер не залучений до Internet
<SCRIPT LANGUAGE="JavaScript">
<!--
colorShift();
//-->
</SCRIPT>
</BODY>
</HTML>
Робота сценарію починається після завантаження документа з виклику функції colorShift. Цей виклик розташований наприкінці області тіла документа HTML.
Функція поступово зменшує значення червоної, зеленої і блакитний компоненти цвіту. Початкові значення цих компонент зберігаються в глобальних перемінних nRed, nGreen і nBlue:
var nRed =255;
var nGreen = 255;
var nBlue = 255;
Значення цвіту фона формується в такий спосіб:
document. bgColor = "#" + dec2hex(nRed) + dec2hex(nGreen) + dec2hex (nBlue);
Тут за допомогою функції dec2hex преобразовывается десяткове значення колірний компоненти в шестнадцатеричное. Ця функція буде описана докладно пізніше в поділі "Шестнадцатеричный калькулятор" гл. 3.
Далі після установки цвіту фона проверяется значення червоні колірний компоненти, і, якщо воно більше нуля, зменшується і воно, і значення інший колірних компонент на 10:
if(nRed > 0)
{
nRed -= 10;
nGreen -= 10;
nBlue -= 10;
}
Для того щоб функція colorShift визивалася періодично, використовується метод setTimeout викликом його наприкінці функції:
var cmd = "colorShift()";
timer = window. setTimeout(cmd, 50);
У результаті функція colorShift буде визиватися кожні 50 мс.