- •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.4. Перевірка заповнення форми
Для того щоб скоротити кількість обертань до розширення серверу Web, можна за допомогою сценарію JavaScript виконати локальну перевірку слушності заповнення форми. Як перевірити вміст окремих полів форми, уже відомо з попередніх поділів глави. Зараз же треба зупинитися на взаємодії форми, сценарію JavaScript і розширення серверу Web, такого, як програма CGI або додаток ISAPI.
З раніше розглянутих розширень серверу Web, що опрацьовують дані, отримані від форм відомо, що для посилки даних розширенню використовується кнопка типу submit. Ця кнопка вбудовується у форму в такий спосіб:
<INPUT TYPE="submit"
NАМЕ="Ім'я_кнопки_submit"
VALUE="Teкст_на_поверхні_кнопки"
onClick="Оброблювач_події">
Параметри NAME і VALUE тут мають таке ж призначення, що вони мають і для вивченої раніше кнопки твань button.
Оброблювач події onClick дозволяє сценарію JavaScript виконати опрацювання вмісту поляж форми, перед тим, як дані з цих полів будуть передані розширенню серверу Web.
На жаль, поза залежністю від результатів опрацювання дані з форми завжди передаються серверу Web. що не завжди зручно. Було б краще, якби сценарій JavaScript міг відмовитися від посилки цих даних, якщо вони введені користувачем із помилкою.
Найпростіший вихід із цієї ситуації - заміна кнопки типу submit на звичайну кнопку button. З цією кнопкою повинний бути пов'язаний сценарій JavaScript, що перевіряє даним, уведені користувачем у поля форми, і посилає їхньому серверу Web явно.
У цьому поділі приведені вихідні тексти документа HTML, призначеного для запровадження ідентифікатора користувача і пароля (листинг 3.7). Цей документ аналогічний приведеному в попередньому поділі. У прикладі за допомогою сценарію JavaScript не тільки проверяется пароль, але і відправляються дані розширенню серверу Web, якщо пароль уведений правильно.
Листинг 3.7. Файл chapter3/validation/validation. html
<HTML>
<HEAD>
<ТIТLЕ>Запровадження і перевірка пароля</ТIТLЕ>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Complete()
{
if(Sel.pwd.value != Sel.pwdl.value)
alert("Помилка при запровадженні пароля\nПопробуйте ще разом");
else
{
var szld="";
var szPwd="";
szld = Sel.id.value;
szPwd = Sel.pwd.value;
alert("Реєстрація виконана: \n" + "ID=" + szld + "\nPassword=" + szPwd);
document.forms[0].submit();
}
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<Н1>Реєстрація</Н1>
<FORM METHOD=POST NAME="Sel"
ACTION="http://frolov/scripts/controls .exe">
<TABLE>
<ТR><ТD><У>Ідентифікатор : </B></TD><TD>
<INPUT TYPE="text" NAME="id"
onChange="this. value=this. value. toUpperCase()"
SIZE="20" ></TD></TR>
<ТR><ТD><У>Пароль:</b></td><td><input TYPE="password" NAME="pwd" SIZE="20"></TD></TR>
<ТR><ТD><У>Перевірка пароля: </B></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>
При визначенні форми для оператора <FROM> ми зазначили параметр ACTION:
<FORM METHOD=POST NAME="Sel"
ACTION="http://frolov/scripts/controls. exe">
Цей параметр задає шлях до завантажувального файла програми CGI, розташованому в каталозі сценаріїв серверу Web. Такий каталог створюється адміністратором серверу Web. За допомогою спеціальної програми адміністратор указує права доступу до цього каталога, що дозволяють виконання розташованих там завантажувальних файлів CGI і бібліотек динамічного компонування DLL додатків ISAPI. Докладно з цим матеріалом можна познайомитися в останній главі.
Функція Complete, що визивається при натисканні на однойменну кнопку, перевіряє пароли, введені в полях pwd і pwdl. Якщо ці пароли збігаються, сценарій посилає дані серверу за допомогою методу submit. визначеного у формі:
document. forms [0]. submit();
Тут робиться обертання до первой (і єдиного) формі, визначеної в документі HTML.
Програма CGI з ім'ям control. ехе відображає отримані дані в динамічно утворюваному документі HTML.
У списку значень поляж, розташованому в нижній частині цього документа, знаходиться ідентифікатор і пароль користувача.
Вихідний текст програми CGI, із яким працює наш документ Html, показаний у листинге 3.8.
Листинr 3.8. Файл chapter3/validation/controls/controls. c
// ==============================================
// Програма CGI controls.с
//Одержання даних від форми і їхнє відображення в документі HTML,
//утворюваному динамічно
//
// (С) Фролов А.В., 1997, 1998
// E-mail: frolov@glas.apc.org
// WWW: http://www.glasnet.ru/~frolov
// або
// http://www.dials-ccas.ru/frolov
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
//Прототипи функцій перекодування
void DecodeStr(char *szString);
char DecodeHex(char *str);
//----------------------------------------------------
// Функція main
// Точка входу програми CGI
// ---------------------------------------------------
void main(int argc, char *argv[])
{
int lSize;
FILE * fileReceived;
char * szMethod;
char szBuf[8196];
char szSrcBuf[8196] ;
char * szPtr;
char * szParam;
// Висновок заголовка HTTP і розділювального рядка
printf("Content-type: text/html\n\n");
// Висновок початкового фрагмента документа HTML,
// формованого динамічно
printf("<!DOCTYPE HTML PUBLIC"
" \"-//W3C//DTD HTML 3.2//EN\">");
printf("<HTML><HEAD><TITLE>User Registration"
"</TITLE></HEAD><BODY BGCOLOR=#FFFFFF>");
// Визначаємо метод передачі даних
szMethod = getenv("REQUEST_METHOD");
// Опрацювання методу POST
if(!strcmp(szMethod, "POST"))
// Визначаємо розмір даних, отриманих від браузера
// при передачі даних із полів форми
lSize = atoi(getenv("CONTENT_LENGTH"));
// Читаємо ці дані в буфер szBuf із
// стандартного потоку запровадження STDIN
fread(szBuf, lSize, l, stdin);
// Створюємо файл, у який будуть записані
// прийняті дані
fileReceived = fopen("received.dat", "w");
// Виконуємо запис прийнятих даних
fwrite(szBuf, lSize, l, fileReceived);
// Закриваємо файл прийнятих даних
fclose(fileReceived);
// Відображаємо значення деякий переменных середовища
printf("<Н2>Перемінне середовище</Н2>");
// Метод доступу
printf("REQUEST_METHOD = %s", getenv("REQUEST_METHOD"));
// Розмір отриманих даних у байтах
printf("<BR>CONTENT_LENGTH = %ld", ISize);
// Тип отриманих даних
printf("<BR>CONTENT_TYPE = %s", getenv("CONTENT_TYPE"));
// Закриваємо буфер даних двоичным нулем,
// перетворюючи його в такий спосіб у рядок
szBuf[lSize] = '\0';
// Робимо копію прийнятих даних у буфер
szSrcBuf strcpy(szSrcBuf, szBuf);
// Відображаємо прийняті дані без опрацювання
printf("<Н2>Прийняті дані</Н2>");
printf("<P>%s", szSrcBuf);
// Виконуємо перекодування прийнятих даних
DecodeStr(szSrcBuf);
// Відображаємо результат перекодування
printf("<Н2>Дані після перекодування</Н2>");
printf("<P>%s", szSrcBuf);
// Выводим список значень поляж форми
printf("<Н2>Список значень поляж</Н2>");
// Дописуємо в кінець буфера прийнятих даних
// символ &, що використовується в якості
// роздільника значень поляж
szBuf[lSize] = '&';
szBuf[lSize + 1] = '\0';
// Цикл по полях форми
for(szParam = szBuf;;)
{
// Ищем черговий разделитель
szPtr = strchr(szParam, '&');
// Якщо він знайдений, раскодируем рядок параметрів
if(szPtr != NULL)
{
*szPtr = '\0' ;
DecodeStr(szParam);
// Выводим у документ значення параметра
printf("%s<BR>", szParam);
// Переходимо до такого параметра
szParam = szPtr + 1;
// Якщо досягнутий кінець буфера, завершуємо цикл
if(szParam >= (szBuf + lSize))
break;
}
else
break;
}
// Выводим завершальний фрагмент документа HTML
printf("</BODY></HTML>");
return;
}
}
// ----------------------------------------------------------------
// Функція DecodeStr
// Раскодирование рядка з кодировки URL
void DecodeStr(char *szString)
{
int src;
int dst;
char ch;
// Цикл по рядку
for(src=0, dst=0; szString[src]; src++, dst++)
{
// Одержуємо черговий символ перекодирует рядка
ch = szString[src];
// Заміняємо символ "+" на прогалину
ch = (ch =='+') ? ' ' : ch;
// Сохраняем результат
szString[dst] = ch;
// Опрацювання шестнадцатеричных кодів виду "%хх"
if(ch == '%')
{
// Виконуємо перетворення рядка "%хх"
// у код символу
szString[dst] = DecodeHex(&szString[src + 1]);
src += 2;
}
}
// Закриваємо рядок двоичным нулем
szString[dst] = '\0';
// ------------------------------------------------------------
// Функція DecodeHex
// Раскодирование рядка "%хх"
char DecodeHex(char *str)
{
char ch;
// Опрацьовуємо старший розряд
if(str[O] >= 'A')
ch = ((str[0] & Oxdf) - 'A') + 10;
else
ch = str[O] - '0';
// Зрушуємо його вліво на 4 бита
ch <<= 4;
// Опрацьовуємо молодший розряд і складаємо
// його зі старшим
if(str[1] >= 'A')
ch += ((str[1] & Oxdf) - 'А') + 10;
else
ch += str[l] - '0';
// Повертаємо результат перекодування
return ch;
}
Це спрощений варіант програми CGI, що описана в попередніх главах. .
