«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Какие события происходят в браузере?

Например, «полная загрузка страницы» или «щелчок левой кнопкой мыши» и другие.

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

То есть события в Javascript можно подвергнуть обработке (запрограммировать) так, как нам это удобно.

В качестве обработчика события используется какая-либо функция, которая совершает те или иные действия (обрабатывает событие), и которая передается тому или иному объекту или свойству.

Например, чтобы определенная функция (обработчик события) сработала после «полной загрузки страницы», ее необходимо передать объекту window через свойство onload. Объект window знает о том, что страница загружена. Об этом уже шла речь здесь.

Или, например, чтобы какая-либо функция выполнялась после «щелчка левой кнопкой мыши» на нужном нам объекте (например, изображении), необходимо эту функцию связать с этим объектом посредством свойства onclick, о котором преимущественно и будет идти речь далее.

1)

window.onload = back_gr;

back_gr(){};

Чтобы функция back_gr() (обработчик события) выполнялась после полной загрузки страницы, ее необходимо передать объекту window через свойство onload.

2)

image.onclick = change;

change(){};

Чтобы функция change() (обработчик события) выполнялась при щелчке левой кнопкой мыши на объекте image (например, изображение), необходимо воспользоваться свойством onclick.

Рассмотрим пример:

На странице есть полупрозрачное изображение.

Нужно сделать так, чтобы при щелчке на нем левой кнопкой мыши оно становилось полноценным.

По сути, при возникновении события «щелчок мышью» на изображении - оно должно сменяться другим.



onclick - как свойство объекта - обработка событий

Сначала воспользуемся onclick как свойством объекта, для которого будет вызываться событие. В нашем случае объект - это изображение.

Для того чтобы обратиться к изображению, как к объекту воспользуемся методом getElementById.

Фрагмент кода

<script type="text/javascript">

/* 1. После полной загрузки страницы вызывается функция back_gr */
window.onload = back_gr;

/* 2. При щелчке на изображении мышью вызывается функция change */
function back_gr(){
var image = document.getElementById('img');
image.onclick = change;
}

/* 3. Функция change меняет одно изображение на другое */
function change(){
var image = document.getElementById('img');
image.setAttribute('src','img/peng.gif');
}

</script>

<body>
<img src="img/peng_blur.gif" id='img'>
</body>

Результат

Обратите внимание: рассмотрим код из предыдущего примера.

Посредством метода getElementById к тегу img идет обращение как к объекту image.

Далее при помощи метода setAttribute изменяется значение атрибута src тега img (объекта image):

image.setAttribute('src','img/peng.gif');

Итак, тег img - это объект image, а атрибут src - свойство этого объекта. Следовательно, изменить значение атрибута src можно иначе:

image.src = 'img/peng.gif';

onclick - как атрибут тега - щелчок левой кнопкой мыши

Теперь onclick будет являться атрибутом тега - в нашем случае тега img.

Фрагмент кода

<script type="text/javascript">


function back_gr(){
var image = document.getElementById('img');
image.setAttribute('src',"img/peng.gif");
}

</script>

<!-- 1. Функция back_gr указана в качестве значения атрибута onClick -->
<body>
<img src="img/peng_blur.gif" onClick="back_gr()" id='img'>
</body>

Результат

Функция back_gr() выполняется при щелчке на изображении левой кнопкой мыши.

Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


События
Последние заметки
Популярные заметки