Программирование / Заочники / Высокоуровневые методы / JavaScript_Урок 2

Урок 2: События в DOM

Основная цель урока.

1.Научиться пользоваться событиями DOM-структуры документа

2.Научиться использовать строковые функции indexOf, fromCharCode, substring

3.Научиться работать с тегом input из JS

4.Освоить работу с циклами в JS

Учебное задание 2.

Написать приложение фильтрующее ввод в текстовые поля (только числовые значения).

Технология выполнения учебного задания 2.

Шаг 1. Откройте браузер Google Chrome и перейдите на страницу google.ru.

Откройте консоль разработчика.

Шаг 2. Попробуем переопределить функцию onkeypress у текстового поля для ввода запросов. Для этого нам нужно найти это текстовое поле по его id. Через команду

« Просмотр кода элемента» найдите id текстового поля и выполните следующую команду:

varx=document.getElementById("id элемента");

Шаг 3.

Теперь попробуем переопределить функцию onkeypress, которая отвечает за нажатие клавиши. В таблице 1 приведены некоторые события элементов DOM.

Таблица 1. События элементов

Выполните следующий код в консоли разработчика:

x.onkeypress = function(e)

{

alert("Вы нажали клавишу с кодом " + e.keyCode);

}

Следующий пример чуть интереснее, попробуйте самостоятельно разобраться как он работает до выполнения кода в консоли разработчика:

var x = document.getElementById("gbqfq");

var pos = 0;

var desireStr = "как научиться программировать на 3-ем курсе"; x.onkeypress = function(e)

{

if (pos < desireStr.length) pos++; x.value = desireStr.substring(0, pos); return false;

}

Шаг 4. Попробуем написать скрипт фильтрующий ввод в текстовые поля. Так как страница может содержать множество текстовых полей, то хотелось бы получить универсальное решение, которое можно применить ко всем текстовых полям на странице (или « всем принадлежащим к такому-то классу»).

Найдите в интернете страницу с текстовыми полями (можно в гугле набрать запрос

« Калькулятор НДС»). Откройте консоль разработчика этой страницы.

Шаг 5. У объект document есть свойство all, которое является массивом содержащим все элементы(теги) загруженной страницы. Т.о. перечислив в цикле все элементы и выбрав только текстовые поля (по свойству tagName) мы можем переопределить событие onkeypress для всех текстовых полей на странице.

var all = document.all;

for(var i = 0; i < all.length; i++)

{

if (all[i].tagName == "INPUT")

{

all[i].onkeypress = function(e)

{

e = window.event || e;

var goodChars = "01234567890";

var с = String.fromCharCode(e.keyCode);

if (goodChars.indexOf(с) == -1) return false;

}

}

}

Справка по используемым функциям/свойствам:

Шаг 6. Попробуйте ввести буквы и цифры в текстовых полях на странице. Если всё сделано верно, то вводить можно будет только цифры (точнее то, что содержится в переменной goodChars).

У этого решения есть небольшой недостаток – оно не защищает от копирования текста в текстовое поле. Это можно обойти, если дополнительно проверять значение в текстовом поле по таймеру. Добавьте следующий код в цикл:

var check = function(obj)

{

var result = parseFloat(obj.value); if (isNaN(result)) result = "";

if (obj.value != result)

{

obj.value = result;

}

Самостоятельное задание 2.

Написать JavaScript, удаляющий рекламные баннеры (картинки). Для теста можно взять любой сайт с рекламой (например, 74.ru). Обычно все рекламные баннеры ссылаются на внешний ресурс, т.о. можно занести домен рекламного сайта в « чёрный список» ( в смысле просто в переменную или массив) и при переборе элементов проверять, если ссылка на картинку содержит в себе этот домен, то… есть несколько вариантов – либо удалять этот элемент (метод remove), либо делать его невидимым (см. свойство display), либо менять картинку на другую. Реализация на ваше усмотрение.

Доп. задание (+5 баллов):

Должны удаляться/скрываться не только изображения, но и флеш-баннеры.