JavaScript урок10. Объектная модель документа (продолжение): идентификация текстового поля в javascript

На уроке рассматриваются способы доступа к текстовым полям в javascript, свойство value и события onchange текстового поля. Разбирается служебное слово javascript this

Объект text: свойства и события

<form name="f1">
Ваше имя:<br>
<input type="text" name="yourName" id="t1">
</form>

Текстовое поле идентифицируется тремя способами:

1
2
3
document.getElementById('t1').value="Имя";
document.f1.yourName.value="Имя";
document.f1.elements[0].value="Имя";

Первый способ является предпочтительным.

Свойства:
name — соответствует атрибуту name
id — соответствует атрибуту id
value — соответствует текущему значению объекта input т.е. текущему содержимому области текста;
type — для данного объекта всегда содержит значение «text»

Событие onсhange генерируется когда текст изменен и фокус переходит на другой объект

Пример: Имеется html-страница с двумя текстовыми полями. Необходимо в обработку события onсhange первого поля добавить вызов функции, которая во второе текстовое поле помещает текст из первого текстового поля

Выполнение:

  1. Первый способ: Назначение функций — обработчиков событий
  2. Скрипт:

    <script type="text/javascript">
    function myFunc() {
     document.getElementById("second").value = document.getElementById("first").value;
    }
    </script>
    <body>
    <input type='text' id='first' onchange='myFunc()'>
    <input type="text" id='second'>
  3. Второй способ: скрипт в значении атрибута
  4. <input type='text' id='first' 
    onchange='javascript: document.getElementById("second").value=document.getElementById("first").value;'>
    <input type="text" id='second'>
 

Задание js10_1. Создать страницу проверки знаний учащегося с текстовым полем и вопросом: «Сколько бит в 1 байте?». Осуществить проверку правильности введенного в текстовое поле ответа (выдавать сообщение). Функцию проверки запускать по щелчку кнопки. Дополните код:

Подсказки к выполнению:

Скрипт:

function check(){
 if(...) {...}
 else {...}
 }

html-код:

<body>
<form action="" method="get" name="my">
Сколько бит в 1 байте?
<input type="text" id="answer" size="3"><br>
<input name="b1" type="button" onClick="..." value="Проверить">
</form>

Объяснение данного задания можно просмотреть на видео:

Событие javaScript нажатие клавиши — onkeypress

Нажатие клавиши на клавиатуре можно зафиксировать с помощью события onkeypress. Код конкретной нажатой клавиши может быть идентифицирован с помощью объекта window.event.keyCode

Пример: При вводе текста в текстовое поле проверять, нажата ли клавиша «d». Если нажата, заменять текст в текстовом поле на «нажата d». Использовать событие javaScript onkeypress

Замечание: буква d имеет код 100

<input id="txt1" onkeypress="if(window.event.keyCode=='100') document.getElementById('txt1').value='нажата d'">

Служебное слово в javaScript this

this в javascript заменяет обращение к текущему объекту. Текущим объектом в данном случае является объект, в котором описан код.
Рассмотрим пример использования в javascript this:

Пример: По щелчку на текстовом поле выводить в нем слово «hello».

Выполнение:

  1. <input type="text" onclick="this.value='hello'">
  2. function sayHello(a){
      a.value="hello";
    }
    ...
    ...
    <input type="text" onclick="sayHello(this)">
    ...

В примере по щелчку на текстовое поле вызывается функция sayHello(), параметром которой является слово this, т.е. в качестве параметра передается сам объект — текстовое поле. В функции же задается значение свойства value для переданного параметра.

Задание js10_2. Содержимое поля преобразовывать буквами верхнего регистра, используя событие onChange и метод toUpperCase(). Используйте служебное слово javascript this. Пример выполнен без this:

Подсказки к выполнению:
Выполнение БЕЗ служебного слова this:

function makeUpper() { 
document.getElementById("first").value=document.getElementById("first").value.toUpperCase();
}
<input type='text' id='first' onchange="makeUpper()">

Выполнение задания со служебным словом this смотрите на видео:


Вопросы для самоконтроля:

  • Для чего используется свойство value текстового поля?
  • Что обозначает событие onkeypress?
  • Для чего используется служебное слово this?

Поделитесь уроком с коллегами и друзьями:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*

Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить