- •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. Робота з формами
Сценарії JavaScript часто застосовуються для попереднього опрацювання даними, уведених користувачами у формах. Перевірені дані потім можуть передаватися розширенням CGI або ISAPI серверу Web. Крім того, за допомогою форм і сценаріїв JavaScript можна створювати активні сторінки, спроможні одержувати від користувача й опрацьовувати довільну інформацію.
Раніше рассказывалось про деякі прийоми, за допомогою яких сценарії можуть витягати дані з форм, а також опрацьовувати події, пов'язані з органами керування, розташованими у формах. Тепер необхідно більш детальне вивчення взаємодії форм і сценаріїв JavaScript.
3.1. Ієрархія об'єктів у формах
При завантаженні документа HTML у вікно браузера Internet створюється об'єкт класу document. Якщо в цьому документі визначені форми, то вони доступні сценаріям JavaScript як властивості об'єкта document.
У поділі "Посилання і мітки в документі" попередньої глави була визначена форма, через завдання для неї імені Sel за допомогою параметра NAME оператора <FORM>:
<FORM NAME="Sel">
<SELECT NAME="ListOfLinks">
</SELECT>
<INPUT TYPE="button" VALUE="Jump! " onClick="urlJump();">
</FORM>
У результаті в об'єкта document з'явилася властивість Sel. До цієї властивості можна адресуватися в такий спосіб:
Document. Sel
Будь-яка форма містить визначення полів і органів керування, таких, як списки, перемикачі і кнопки. При визначенні полів і органів керування їм можна задати ім'я, указавши його в параметрі NAME відповідного оператора мови HTML. У прикладі, приведеному вище, у формі визначений список з ім'ям ListOfLinks.
Для адресации зі сценарію JavaScript окремих органів керування можна скористатися тим фактом, що вони доступні як властивості їхніх форм , що містять. Наприклад, якщо у формі Sel визначений список ListOfLinks, те для доступу до списку як до об'єкта можна використовувати таке вираження:
Document. Sel. ListOfLinks
Тому що поля форми й органи керування є об'єктами, то для них визначені свої властивості і методи. Наприклад, властивість selectedIndex, що містить номер обраного користувачем елемента списку, доступно в такий спосіб:
Document. Sel. ListOfLinks. selectedIndex
У якості одного з властивостей об'єкта document визначена властивість forms. Це масив усіх форм, розташованих у документі HTML. Розмір масиву дорівнює document.forms.length.
Можливо адресуватися до форм як до елементів масиву forms, причому, перший елемент масиву (з індексом 0) відповідає самій першій формі, визначеної в документі, другий - такої і т.д. Проте зручніше обертатися до форм по їхніх іменах, заданим у параметрі NAME оператора <FORMS>.
3.2. Форма і її властивості
3.2.1. Оператор <FORM>
У найбільше загальному виді оператор <FORM>, призначений для створення форм у документах HTML, виглядає в такий спосіб:
<FORM
NAME ="Ім'я_форми" TARGET="Ім'я_окнa"
ACTION="Aдpec URL розширення серверу"
METHOD=GET або POST
ЕNСТУРЕ="Кодировка_даних"
onSubmit="О6pa6oтчик_co6ытия_Submit">
...
визначення полів і органів керування
...
</FORM>
Параметр NAME задає ім'я форми. Можна його не вказувати, якщо форма не призначена для спільної роботи зі сценарієм JavaScript. Тут (у главі) це ім'я потрібно для адресации форми як властивості об'єкта document, тому завжди будемо його задавати.
Призначення параметра TARGET аналогічно призначенню цього ж параметра в операторі <А>. Коли форма використовується для передачі запиту розширенню CGI або ISAPI серверу Web, відповідь, отриманий від серверу, відображається у вікні. Ім'я цього вікна задано параметром TARGET. Якщо відповідь повинна відображатися в тому ж вікні, у якому відображається і форма, то параметр TARGET задавати не потрібно.
За допомогою параметра ACTION вказується адреса URL завантажувального файла програми CGI або бібліотеки динамічного компонування DLL розширення ISAPI, а також передані розширенню параметри. У тому випадку, коли форма призначена для передачі даних розширенню серверу Web, параметр ACTION є обов'язковим. Але якщо дані, введені у формі, опрацьовуються сценарієм JavaScript локально і не передаються серверу Web, цей параметр можна опустити.
Параметр METHOD задає метод передачі даних із форми розширенню серверу Web і може приймати значення GET або POST. Якщо дані з полів форми опрацьовуються сценарієм JavaScript локально, параметр METHOD задавати не потрібно.
Параметр ENCTYPE задає тип MIME переданих даних і використовується дуже рідко. Якщо форма призначена для передачі текстових даних (як це звичайно буває), цей параметр по умовчанню має значення application/x-www-form-urlencoded. У цьому випадку для переданих даних використовується так називана кодировка URL. Тип даних multi-part/form-data дозволяє передавати як текстові, так і двоичные дані. При локальному опрацюванні даних сценарієм JavaScript параметр ENCTYPE не задається.
Крім параметрів для форми можна визначити оброблювач події, пов'язаний із кнопкою типу SUBMIT. Така кнопка призначена для посилки даних із заповненої форми розширенню серверу Web. Назначив оброблювач події, сценарій JavaScript може управляти цим процесом.