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

Скрипты для отладки

На этой странице представлены два скрипта, которые могут помочь в разработке JavaScript скриптов и HTML страниц. Первый скрипт показывает координаты документа, где находится курсор. Второй скрипт выводит все свойства объекта документа (внизу страницы). На данной странице выводятся свойства объекта, который бегает за курсором. Скрипты работают в Microsoft Internet Explorer, Opera, Mozilla Firefox. Второй скрипт хорош тем, что в разных браузерах у одного и того же объекта свойства могут отличаться. Фактически он показывает свойства, с которыми скрипт может работать в данном браузере с данным объектом. Попробуйте открыть эту страницу в другом браузере и почувствуйте разницу.

Как это работает?

Примечание: Дальнейшее описание расчитано на продвинутых разработчиков скриптов и верстальщиков.

Описание: На странице отслеживаются события связанные с движением курсора (onmousemove) и прокрутки (onscroll). Обработчики этих событий устанавливаются в тэге BODY и обрабатываются скриптом вначале документа. При наступлении выше указанных событий, объект документа (DIV) перемещается в координаты курсора и в зависимости от местоположения меняет текст.!!!!!!Есть особенность работы этого скрипта в FireFox: при прокрутке страницы колесиком мыши или клавишами, объект event возвращает нулевую горизонтальную координату, поэтому текст "перепрыгивает" в левый верхний угол рабочей области окна. При загрузке страницы выполняется скрипт в конце документа, который получает все свойства и методы этого объекта, формирует их в в строки и выводит в самом конце. Для чего нужен первый скрипт? Незнаю. Возможно вам понадобится расположить какие-то элементы на странице, и этот скрипт поможет не вычислять их местоположение, а увидеть нагдядно, как они могут распологаться. Или если у вас есть карты (MAP), то не открывая рисунок в редакторе, можно получить координаты ссылок непосредственно на странице. Второй скрипт мне ближе и я им часто пользуюсь. Он помогает отладить скрипты для различных браузеров (кросс-браузерность) и для того чтобы знать с какими свойствами и методами объекта может работать мой скрипт, потому что нет желания тратить время в поисках этих свойств в больших томах с мануалами. К тому же, в различных браузерах свойства и методы могут сильно отличаться. Запустив этот скрипт в конкретном браузере можно сразу увидеть все необходимое для работы. Расширенную версия и описание данного скрипта читайте здесь>>

Текст и подключение: Для работы скриптов необходим объект, бегающий за курсором и установка обработчика для событий onmousemove и onscroll. Поэтому необходимо изменить тэг BODY, создать объект и получить ссылку на него:
<body onmousemove=PP_getcord() onscroll=PP_getcord()> <div id="CordPar" style="top:0;left:0;position:absolute;border:black solid 1px;background-color:#FFFFc0;"> </div> <script> DocEl=document.getElementById('CordPar'); </script>
В тэге HEAD добавить текст скрипта, обрабатавающего события onmousemove и onscroll:
<script> if (document.addEventListener) { document.addEventListener("mousemove", function(e){window.event=e;},true); } var x=0,y=0,x_old=0,y_old=0,countInt,timer; function PP_getcord(){ x=window.event.clientX+document.body.scrollLeft; y=window.event.clientY+document.body.scrollTop; DocEl.innerHTML=" X:"+x+" Y:"+y; countInt=10; PP_moveTo(); clearInterval(timer); timer=setInterval(PP_moveTo, 40); } function PP_moveTo(){ DocEl.style.top=y_old=y_old+(y-y_old+1)/countInt; DocEl.style.left=x_old=x_old+(x-x_old+1)/countInt; if (countInt>1) { countInt--; } else { clearInterval(timer); } } </script>
И в конце страницы вставить скрипт, выводящий свойства и методы объекта:
<script> out=""; for (k in DocEl) { if (k!="innerHTML"&&k!="outerHTML") out+="<font color=blue>"+k+":</font> "+DocEl[k]+"<br>"; } document.write(out); </script>