Вывод на экран в JS, как?

Question

[DrunkMaster]

Простите за нубство. Начал изучать JS после php. Возникла пара вопросов:

<input onmousemove="this.value = event.clientX+':'+event.clientY">

Работает, выводит координаты мыши в форме. Координаты выводятся только если мышка над формой, а как вывести координаты если мышка в любом месте страницы находится?

Какой наиболее близкий аналог echo в php на JS?
alert блокирует страницу, document.write пробовал вроде уже ближе к истине.

Comments

[Мак Алексей]

console.log(""); https://developer.mozilla.org/en-US/docs/Web/API/C...

Answer 1

[Денис Инешин]

Отделите логику от оформления и используйте document.
jsfiddle.net/dvpsjdn8/1

В HTML:
<input class='result' value='' />

В JS файле:

var result;

document.addEventListener('mousemove', function (event) {
    result = result || document.querySelector('.result');
    result.value = event.clientX + ':' + event.clientY;
}, false);

Comments

[DrunkMaster]

О, спасибо, вы безусловно правы, это просто пример с learn.javascript.ru был, просто сначала бы понять, а потом отделить ))

[Денис Инешин]

DrunkMaster: Не не, отделяйте сразу, это позволит лучше понять. В остальном помните, что слушатель нужно навесить на документ, если хотите на все странице ловить события.

[DrunkMaster]

А почему class='result' value='' а не class='' value='result' ? Координаты это же значение вроде бы...

[Денис Инешин]

DrunkMaster: result - название класса, value - атрибут тэга.

[Денис Инешин]

DrunkMaster: мы не может в HTML положить переменную, которая будет меняться прямо из JS. Мы можем найти DOM элемент и менять что-то у него. Т.е. нужен один промежуточный шаг.

[DrunkMaster]

Денис Инешин: да я понимаю что там заменяется конкретный блок на странице, а не целиком всё..., благодарю, дальше разбираюсь...

[DrunkMaster]

С addEventListener всё понятно, а что за фишка с result = result || document.querySelector у вас и event = event || window.event; в примере ниже?

function handler(event) {
   event = event || window.event;
   // Здесь находится реализация обработчика

}

[Денис Инешин]

DrunkMaster: Это метод запоминания одного из вариантов.
document.querySelector - это поиск элемента в DOM. Конечно можно было бы так и оставить, но поиск элемента это тяжелая операция и разумно найти один раз и сохранить результат в переменной. Что я и делаю. В целом это сокращенная запись, и чтобы было понятней, можно написать еще и так:

if (result === undefined) {
    result = document.querySelector('.test');
}

Это условие сработает только 1 раз, в дальнейшем, ссылка на DOM элемент с классом .test уже будет лежать в переменной result.

C event все сложнее. Это для кроссбраузерности. Некоторые старые версии IE не получают объект события первым аргументом в handler. Они имеют только глобальный window.event.
По этому эту запись можно прочитать так:

if (event === undefined) {
    event = window.event;
}

Answer 2

[Мак Алексей]

onmousemove генерируется только когда вы двигаете над тем объектом к которому прикреплён этот листенер. Соответственно для генерации этого эвента над всей страницей надо будет прикреплять эвент к ней (или контейнеру который займёт всю область).
Аналог echo - console.log(""); ( https://developer.mozilla.org/en-US/docs/Web/API/C... )

Comments

[DrunkMaster]

Эмм, да с onmousemove я понял что дело в этом, значение console.log как посмотреть? )) В firebug или т.п. плагинах?

[Мак Алексей]

DrunkMaster: в любом браузере есть консоль, даже без плагинов:
Ctrl+Shift+K - FFox, Ctrl+Shift+J - Chrome

[Мак Алексей]

F12, Ctrl+2 - IE; Command+J - Safari