JavaScript: события (events), урок 4

урок 4

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


код из этого урока:
важно: этот код - одна строка

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

что должно получиться:

 открываем в эксплорере:
получаем окошко со ссылкой

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

при проверке в Google Chrome у меня почему-то высветилась не надпись, а адрес перехода www.newmail.ru , причем когда я уводила курсор  со ссылки, исчезал и адрес

о, нашла: кажется, свойство status (будет рассмотрено ниже) не поддерживается стандартной конфигурацией основных браузеров.  (Window status Property)


разбираем код: 
<A HREF="http://www.newmail.ru"  - это обычный html
<a href="URL">...</a> (описание тага) задает адрес документа, на который надо перейти

onMouseOver="..." событие произойдет, когда мышка пользователя будет над элементом


window.status= 'Бесплатный хостинг'  первое слово, как обычно - объект, но status после точки - существительное, а не глагол, а значит - не метод.
           object.method - объект.метод воздействия на объект: глагол (н-р write- писать)

           object.property - объект.свойство объекта: существительное.

итак, status - свойство объекта window (описание Window Object ) , которое влияет на текст в статус баре, находящемся в нижней части окна браузера (на данном этапе кажется мне зверски "полезной" штукой. особенно с учетом проблематичности в использовании... но, господа, главное понять принцип, а полезные свойства и методы подберем потом сами)

итак, читаем код
<A HREF="http://www.newmail.ru" onMouseOver="window.status='Бесплатный хостинг'; return true">Ссылка</A>
при наведении курсора на слово "ссылка", являющееся ссылкой, отправляющей по адресу http://www.newmail.ru, в статус баре браузера высвечиваются слова "бесплатный хостинг"

упустили только return /возвращать, давать ответ, вновь возвращаться/ 
return используется только в функциях
для использования функции return необходим
следующая информация взята отсюда
return используется в функциях в двух случаях:
1. если мы хотим, чтобы скрипт престал исполняться, когда происходит что-то определенное
2. если мы хотим, чтобы функция "возвращала" значение ( return a value) при обращении к ней /а иначе зачем эта функция нужна?/.  т.е. "возвращенное значение" - это тот результат, для получения которого, собсно, и пишется функция.

• для освоения JavaScript важно уметь разделить код на удобные для использования блоки.

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

function addVAT(value){
var newValue
newValue=value*1.07
return newValue
}

первая строка: мы объявляем функцию, которая может принимать значение value;
вторая строка:  мы объявляем  переменную по имени  newValue , значение которой будет результатом нашего уравнения;
третья строка: мы умножаем значение функции на 1.07 (7% налога);
четвертая строка: мы "возвращаем" результат нашего уравнения функции, которая "вызывает" нашу функцию

теперь, когда нужно добавить налог в другую функцию, можно написать что-то вроде:
vatAdded=addVAT(общая сумма)

таким образом мы вызываем функцию addVAT(value), подставляя на место value новое значение общая сумма
и функция "возвращает" нам результат с добавлением налога, для нового значения, которое мы назвали "общая сумма"

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

• использование return для прекращения выполнения функции:

предположим, у нас есть код (который в используемой мной статье не разбирается):

<script type="text/javascript">
<!--
function makeHidden(){
if (document.getElementById){
document.getElementById("layer1").style.visibility="hidden"
}
if(document.all){
document.all["layer1"].style.visibility="hidden"
}
if(document.layers){
document.layers["layer1"].visibility="hidden"
}
}
// -->
</script>

в нем имеется проблема: первый и второй "if" . в некоторых ситуациях можно получить непредсказуемый результат.
проблема решается так:
<script type="text/javascript">
<!--
function makeHidden(){
if (document.getElementById){
document.getElementById("layer1").style.visibility="hidden"
return
}
if(document.all){
document.all["layer1"].style.visibility="hidden"
}
if(document.layers){
document.layers["layer1"].visibility="hidden"
}
}
// -->
</script>

в случае, если первый  "if"  сработает (окажется верным),  return прекратит исполнение следующих пунктов сценария.