Кожен об'єкт має деякі характеристики, які називаються властивостями.
Наприклад: нехай текстове поле описується так:
Для отримання доступу до властивості об'єкта використовується той самий тип синтаксису з точками.
Тут змінна ob це об'єкт з ім'ям entry
Щоб вибрати значення з текстового поля, потрібно звернутися до властивості value цього об'єкта і привласнити це значення деякої текстової змінної. Наприклад, для об'єкта з ім'ям entry:
s=ob.value |
Щоб вивести значення в текстове поле, потрібно змінити властивість value цього об'єкта. Наприклад, для об'єкта з ім'ям entry:
_ ob.value=’Введіть ім'я '; |
Виведемо рік, витягнутий з поточної дати в текстове поле форми.
Це текстове поле має ім'я id='f1'. Наш скрипт оформлений у вигляді анонімної функції, що викликається під час завантаження документа. У цій функції за допомогою методу getElementById визначено змінну p1, яка є текстовим полем нашого об'єкта. Цей об'єкт має властивість value, якому ми присвоюємо значення god.
Напишемо програму для обчислення площі кола. Радіус для обчислення будемо вводити у текстове поле форми.
Площа повинна обчислюватися під час натискання кнопки. Результат вивести в текстове поле та округлити до двох знаків після крапки.
При натисканні кнопки «Скинути» поля повинні очищатися. Поля та кнопки розташувати у вигляді таблиці.
Контроль введення даних у текстове поле JavaScript дозволяє обмежувати або перевіряти дані, які вводить користувач.
Це корисно, наприклад, для перевірки введення чисел, електронної пошти або телефону, запобігання введенню заборонених символів тощо.
Подія input спрацьовує щоразу, коли користувач вводить дані у текстове поле. Її можна використовувати для перевірки символів, що вводяться.
Роздивимося приклад в якому дозволимо вводити лише цифри. Об'єкт, подію та її обробник
Подія keypress дозволяє реагувати на кожне натискання кнопки. Це корисно для запобігання введенню неприпустимих символів.
Роздивимося приклад в якому дозволимо вводити лише літери. Об'єкт, подію та її обробник
Ви можете перевірити введені дані, коли користувач намагається надіслати форму. Це може бути корисним для складних перевірок.
Якщо ви хочете заборонити певні символи, ви можете використовувати подію keydown та перевіряти event.key.
Приклад: Максимум 10 символів
Можна вказати користувачеві підказки або помилки під час введення. Приклад: Поле пароля з підказкою
Подія change відбувається після зміни значення елемента форми, коли ця зміна зафіксована. Для текстових полів (input type=text) це означає, що подія відбудеться не за введення кожного символу, а при втраті фокусу.
Наприклад, поки що ви набираєте щось у текстовому полі – події немає. Але як тільки ви відведете фокус на інший елемент, наприклад, натисніть кнопку або клацніть мишкою в іншому місці сторінки – станеться подія change. Для інших елементів: select, input type=checkbox або input type=radio воно спрацьовує відразу при виборі значення.
Напишемо програму для обчислення площі сектора кола. Радіус та кут у градусах для обчислення будемо вводити у текстові поле форми.
Площа повинна обчислюватися при натисканні кнопки, перевірити правильність введення даних. Результат вивести в текстове поле та округлити до двох знаків після крапки.
Метод isNaN намагається перетворити переданий параметр на число. Якщо параметр не можна перетворити, повертає true, інакше повертає false.
Ця функція є корисною, оскільки значення NaN не може бути перевірено операторами еквівалентності.
Ми можемо використовувати обидва підходи для перевірки введення чисел у текстове поле, а також для додаткових дій, наприклад перетворення рядка в число.
Особливості роботи з isNaN
isNaN("abc") поверне true, тому що рядок "abc" не може бути перетворений на число.
isNaN("123") поверне false, тому що "123" може бути перетворено на число.
Для перевірки більш строго використовується Number.isNaN, але воно працює тільки з типом number.
Приклад: Перетворення рядка на число
Якщо потрібно виконувати певні дії лише під час введення чисел, можна використовувати isNaN для умовного виконання коду.
