Форум Днепропетровска
Taobao форум СП в Украине
Вернуться   Форум города Днепр (Днепропетровска) > КОМПЬЮТЕРЫ и программы > Онлайн уроки > Javascript

Javascript Уроки Javascript

Ответ Добавить объявление Выделить тему
 
Опции темы Опции просмотра
Старый 04.10.2010, 15:40   #1
Strelok
Бессмертный
 
Аватар для Strelok
 
Регистрация: 22.01.2009
Адрес: Ф жДуНгЛяХ
Сообщений: 1,768
cказал Спасибо: 155
сказали Спасибо 639 раз(а) в 348 сообщении
Настроение: Angelic
Вес репутации: 277 Strelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспоримаStrelok репутация неоспорима
По умолчанию Команда onMouseOver

Концепция

Мы обсудили объекты и методы. Теперь приступим к событиям (events). Сначала разрешите мне кое-что пояснить (или запутать). События (event) и обработчики событий (event handler) относятся к JavaScript, но они скорее «встроены» в HTML-код, а не существуют самостоятельно, как те скрипты, которые мы с вами разбирали. Они входят в структуру документа НТМL, не требуя команд <SCRIPT> и </SCRIPT>. Сами они не скрипты, а скорее область взаимодействия между вашей страницей и читателем.
События — это то, что происходит. Они добавят динамики вашему сайту. Увидев их, посетители скажут: «Ух ты!», а сочинять длинные скрипты совсем не нужно.
Среди разнообразных обработчиков событий для начала мы выберем один, самый популярный, — onMouseOver (навести мышь).

Скрипт

<A HREF="http://www.newmail.ru"
onMouseOver="window.status='Бесплатный хостинг';
return true">Ссылка</A>

Все это должно быть на одной строке.




Разбор скрипта

Вы уже знаете достаточно, чтобы понять смысл написанного. Давайте быстро разберем скрипт и попробуем его изменить.
Во-первых, onMouseOver (обратите внимание на заглавные буквы) представляет собой обработчик событий (Event Handler) гипертекстовой ссылки. Это понятно? Он используется внутри гиперссылки.
Формат ссылки остается без изменений. Те же команды и те же двойные кавычки. onMouseOver ставится сразу же после адреса URL. Видите?
Событие (Event) приводится в действие, когда браузер распознает onMouseOver="". Схема уже должна казаться вам немного знакомой: два элемента, разделенных точкой. До сих пор это означало, что один является объектом, а другой методом. Но не в этом случае. Объектом является window (окно), оно существует; status (статус) представляет собой property (свойство) oкна. Это небольшой участок окна, где должен разместиться следующий текст. Это проще запомнить, если представить, что метод обычно выражается глаголом, как write (писать) или get (получить). Свойство выражается существительным и существует как небольшая часть элемента, стоящего перед точкой.
Если у window есть изменяемое свойство status, значит, можно изменить и другие свойства окна. Это верно, но не будем лезть поперед батьки в пекло. Займемся пока окном и его строкой состояния.

После window.status следует знак равенства = и то, что должно произойти. В данном случае это текст в одинарных кавычках. Он появится в строке состояния, когда вы наведете курсор на ссылку.
Пожалуйста, обратите внимание на точку с запятой в конце строки.

return true Эти два слова имеют не последнее значение. Они дают скрипту указание проверить, есть ли строка состояния. Если отчет (return) соответствует действительности (true), тогда происходит событие. Обратите внимание, что текст в строке состояния уже не изменяется и не изменится, сколько раз вы не наводили бы на нее курсор.

Поэтому не нужно злоупотреблять такими трюками — человек, пришедший к вам на сайт, имеет право знать точный адрес каждой ссылки и другую информацию о загрузке страницы, которую выдает строка состояния.


Другие свойства

Вернемся к свойствам. Если они есть у окна, другие объекты тоже должны иметь свойства. Как насчет цвета фона? Это же свойство, верно? В HTML цветом фона страницы управляет команда BGCOLOR. То же самое и здесь, только обязательно соблюдайте регистр. В JavaScript он пишется bgColor. Подумаем, как создать ссылку. которая изменяла бы фон страницы с помощью обработчика onMouseOver.
Во-первых, раз это ссылка, то сохраним ту же схему, которой сегодня уже пользовались.
Что мы меняем, окно или нашего старого приятеля, документ? Куда идет команда bgColor, когда вы пишете веб-страницу? В документ. Значит, это и есть нужный нам объект. Заменим window на document.
Мы собираемся менять фоновый цвет объекта, потому заменим status на bgColor.
Больше нам текст не нужен, так что заменим его цветом. Возьмем белый.
Нам нужно, чтобы новый цвет оставался независимо от того, сколько раз мы будем наводить курсор на ссылку, потому вставляем return true после точки с запятой.

Вот что у нас получилось...

<a href="http://www.newmail.ru" onMouseOver="document.bgColor='white';
return true">Не щелкать</a>

...а что это нам дает, смотрите здесь, в маленьком окне

А что, если я хочу и то, и другое

Ладно, и как вы собираетесь этого добиваться? Разберемся:
Здравый смысл подсказывает, что нужно написать две команды onMouseOver. Попробуем.
Мы хотим, чтобы два события произошли одновременно, поэтому не будем разделять команды точкой с запятой, так как это означает конец.
Новое правило: ставьте запятую, чтобы отделить друг от друга разные команды JavaScript, происходящие одновременно.
Как там насчет этих дурацких кавычек? Помните, в кавычки ставятся отдельные элементы вроде текста. Раз нам нужно, чтобы обе команды действовали одновременно, ставим кавычки в самом начале первой и в самом конце второй. Таким образом мы показываем браузеру, что все это одно событие. Следите за мыслью?
Однако нам еще могут понадобиться одинарные кавычки...

Вернем документу первоначальный цвет...

<a href="http://www.newmail.ru" onMouseOver="document.bgColor='334775', onMouseOver=window.status='Бесплатная почта'; return true">Не щелкать</a>

...Результат смотрите там же:

Таких обработчиков событий великое множество, и все они замечательные. В следующем уроке мы поговорим еще о нескольких и научимся их комбинировать.

Вы заметили, что мы уже начинаем понемногу добираться до сути дела? Не забывайте, что это очень логичный язык. Позднее мы проведем урок, посвященный иерархии элементов.

Ваше задание

Посмотрим, не удастся ли мне запутать вас. Я собираюсь дать вам новый метод, alert() (предупредить). Он вызывает небольшое диалоговое окно с текстом и кнопкой OK. Попробуйте сделать так, чтобы окно предупреждения всплывало при наведении курсора на ссылку. Вот формат команды:

alert('текст в окошке')

Подумайте хорошенько, решите, что должно произойти сначала, что потом. На самом деле все это довольно просто.




Strelok вне форума   Ответить с цитированием
 
Ответ Добавить объявление Выделить тему


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Быстрый переход


Часовой пояс GMT +3, время: 01:34.

 
Работает на vBulletin®.
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Перевод: zCarot

 
Форумы

Город Днепропетровск
Политика
Новости Днепропетровска
Дом и семья
Кулинария
Наши дети
Доска объявлений
Досуг и развлечения
Музыка
Коллекционирование
Компьютеры и программы
Мобильная связь и интернет
Работа в Днепропетровске
Профессиональные форумы
Он и она...
Беседка
Товары

Каталог цен и товаров
Совместные покупки


Благотворительность

Помощь детям
Услуги

Переводчик текста


Информация

Телепрограмма
Карта Днепропетровска
Доска объявлений
Погода
Сервисы

Фотошоп онлайн
Города Украины
Реклама на сайте
Реклама на форуме
Наверх ↑

форум Днепропетровска
© 2008—2016



Администрация форума Днепропетровска не несет ответственности за информацию, которую размещают пользователи ресурса. Полное либо частичное копирование материалов без обратной ссылки - запрещено.