Урок 4
Команда onMouseOver

с червен цвят са забележките на преводача
Концепция__Скрипт__Ефект__Разбор на скрипта__Задача

Съдържание

Концепция

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

Скрипт

<A HREF="http://www.webdesigne.hit.bg"
onMouseOver="window.status='Web дизайн';
return true">Линк</A>

Всичко трябва да е на един ред.

 

Ефект

Линк

     Насочете курсора на Линка и вижте полето състояние на браузера.

.

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

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

След window.status следва знак за равенство = и това, което трябва да се случи. В този случай това е текст в единични кавички. Той ще се появи в полето състояние, когато насочите курсора на линка.
Моля, обърнете внимание на точката с запетая в края на реда.

return true    Тези две думи указват на скрипта да провери, има ли поле състояние. Ако отчета (return) съответства на действителноста (true), тогава произтича събитието. Обърнете внимание, че текста в полето състояние вече не се променя и няма да се промени, колкото и пъти да насочвате курсора на линка.

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

Да се върнем към свойствата. Щом прозорците ги имат, другите обекти също имат свойства. Какво ще кажете за цвета на фона? Това е свойство, нали? В HTML цвета на фона на страницата се управлява от командата BGCOLOR. Същото е и тук, само че обезателно спазвайте регистъра. В JavaScript се пише bgColor. Да помислим, как да създадем линк. който да променя фона на страницата с помоща на оператора onMouseOver.

  1. Първо, щом това е линк, ще запазим същата схема, която вече ползвахме.
  2. Какво променяме-прозореца или документа ? Къде е командата bgColor, когато пишете веб-страница? В документ. Значи, това е нужния ни обект. Заменяме window на document.
  3. Искаме да сменим цвета на фона на обекта, затова сменяме status на bgColor.
  4. Повече текст не ни трябва затова го сменяме с цвят . Вземаме бял.
  5. Трябва цвета да остава независимо от това, колко пъти насочваме курсора на линка, затова поставяме return true след точката с запетая.

Ето какво се получи...

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

...а какво ни дава това, вижте тук, в нов прозорец

А , ако искам и едното, и другото

Добре, и как мислите да го направите? Ще се справим:

  • Здравия разум подсказва, че трябва да напишем две команди onMouseOver. Да пробваме.
  • Искаме, двете събития да произтичат едновремено, затова няма да разделяме командите с точка с запетая, тъй като това означава край.
  • Ново правило: слагайте запетаи, за да отделите една от друга различните команди JavaScript, които произтичат едновременно.
  • Относно кавичките? Помнете, в кавички се поставят отделни елементи като текста. Щом искаме двете команди да действат едновременно, слагаме кавички в началото на първата и в края на втората. Така показваме на браузера, че това е едно събитие.
  • Въпреки това може да ни потрябват и единични кавички ...

Да върнем на документа първоначалния цвят...

<a href="http://www.webdesigne.hit.bg" onMouseOver="document.bgColor='334775', onMouseOver=window.status='Web дизйн'; return true">Не кликай </a>

...Резултата вижте пак там :

Такива оператори на събития има много, и всички са чудесни. В следващия урок ще поговорим за още няколко и ще се научим да ги комбинираме.

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

Вашата задача

Да видим, ще успея ли да ви объркам. Искам да ви дам нов метод, alert() (предупреждение). Той извиква малък диалогов прозорец с текст и бутон OK. Опитайте да направите така, че прозореца предупреждение да изскача при насочване курсора на линк. Ето формата на командата:

alert('текст в прозореца')

Помислете добре, решете, какво трябва да се случи в началото, и какво след това. Всъщност това е доста лесно.

Възможен отговор тук

Концепция__Скрипт__Ефект__Разбор на скрипта__Задача

Напред към Урок 5