Объект Document в JavaScript
В JavaScript имеется объект, который отвечает за документ в целом. Этот объект является свойством объекта Window, и используется он безумно часто. Этот объект называется Document. И именно он является свойством объекта Window. Через объект Document в JavaScript мы можем получить доступ к любому элементу нашей страницы.
Мы не будем разбирать методы объекта Document просто потому, что ничего особо интересного там нет. Единственный метод, который регулярно используется - это write(). Но мы с ним так часто встречались, что, думаю, что Вы с ним уже разобрались, и не стоит о нём больше упоминать. Мы разберём только свойства объекта Document. И начнём мы со свойства bgColor, отвечающего за цвет фона. Сразу говорю, что свойства объекта Document доступны как для чтения, так и для записи:
document.bgColor = "red";
После запуска скрипта фон станет красным. Давно мы с Вами не писали интересных задач, и пора бы это исправить. Давайте сделаем с Вами мигающий фон:
var counter = 0;
setInterval(blink, 1000);
function blink() {
if (counter % 2 == 0) document.bgColor = "red";
else document.bgColor = "white";
counter++;
}
Теперь поясняю, как он работает. Вначале создаётся переменная counter, которая отвечает за количество запусков функции. Затем запускается таймер, который вызывает функцию blink() через каждые 1000 миллисекунд. Внутри функции blink() проверяется на чётность переменная counter (операция % - это остаток от деления, в нашем случае остаток от деления на 2). Если counter - чётное число, то есть остаток при делении на 2 равен 0, то фон становится красным. Если остаток при делении не равен 0 (то есть в нашем случае он может быть равен только 1), то, соответственно, сделать фон белым. И после этого увеличиваем на 1 переменную counter (чтобы она изменила чётность). Затем следующий запуск и так до бесконечности. Это был пример использования свойства bgColor.
Следующие три свойства относятся к цвету ссылок. Свойство linkColor - цвет не посещённой ссылки, vlinkColor - цвет посещённой ссылки, а свойство alinkColor - цвет активной ссылки (то есть ту, которую мы в данный момент нажимаем). Давайте простейший пример приведу:
document.linkColor = "green";
document.vlinkColor = "red";
document.alinkColor = "blue";
Думаю, что здесь всё прозрачно. Также заметьте, что это будет работать не всегда. В частности, это зависит от браузера и его настроек. Например, "посещённых ссылок" вообще не будет, если пользователь отключил сохранение истории посещений в браузере.
Ещё одно свойство отвечает за заголовок страницы. Свойство называется title, и давайте его выведем, а затем ещё и поменяем:
document.write(document.title);
document.title = "Title JavaScript";
И если Вы запустите этот скрипт, то увидите в окне браузера заголовок страницы. А также обратите внимание, что заголовок поменялся на "Title JavaScript". То есть Вы можете динамическим образом менять заголовки страниц. Например, сделать заголовок страницы в виде бегающей строки. Как это сделать? Делаю подсказку: у Вас должны быть использованы "пробелы". То есть сначала строка должна быть такой: " Title JavaScript", потом " Title JavaScript". В конце концов, исчезнут "пробелы" и дальше можно будет убирать по одной букве. Это идея, которую Вы могли бы легко реализовать. Если Вы читали до этого все статьи по JavaScript, то должны без проблем сделать такую вещь.
Ещё одно свойство показывает дату последней модификации страницы - lastModified:
document.write(document.lastModified);
Если Вы изменили страницу и после этого не уходили пить чай, то Вы увидите практически текущее время. Это и есть дата последнего изменения страницы.
И последнее свойство, которое мы рассмотрим - это referrer. Это свойство показывает, откуда пришёл пользователь на сайт. Чтобы проверить это свойство Вам придётся создать ещё одну страницу, поставить ссылку на страницу, где проверяется свойство referrer. И после перехода по ссылке, Вы увидите, откуда пришли. Свойство referrer используется аналогично другим свойствам объектов в JavaScript:
if (document.referrer != "")
document.write("Вы пришли с: " + document.referrer);
В этом простом скрипте проверяется: если "referrer" не пустой, то выводим человеку сообщение о том, откуда он пришёл (например, с поисковой системы). Если свойство referrer оказалось пустым (то есть человек непосредственно ввёл адрес страницы вручную), то тогда ничего не делаем.
Это далеко не все свойства объекта Document, но я ещё раз говорю, что этот объект является огромным по значению и по количеству свойств. И ближайшие несколько статей, мы с Вами только и будем делать, что рассматривать многочисленные свойства объекта Document. И уже в следующей статье мы познакомимся с ещё одним свойством объекта Document - location, которое само является объектом и, причём, достаточно часто используемым.
-
- Михаил Русаков
Комментарии (21):
На мой взгляд, второй код и его описание содержат разночтения. Переменная counter не отвечает за количество запусков функции blink. В данном коде она отвечает за очередность появления цвета экрана. Это нагляднее будет видно, если второй цвет взять не белый. (Фон браузера) А цветной. Теперь, если мы присвоим переменной counter ноль или четное число, то мигание начнется с красного, а если нечетное, то с другого цвета. Но повторение будет бесконечным. Для того, чтобы ограничить количество запусков функции, нужно добавить еще условие, при достижении которого, запустится метод clearInterval, который и прервет исполнение функции мигания. Я бы переписал этот код так: var counter = 0; var id = setInterval(blink, 1000); function blink() { if (counter % 2 == 0) document.bgColor = "red"; else document.bgColor = "blue"; counter++; if (counter == 9) clearInterval(id); } После девяти миганий все замирает. У меня этот код работает, а вот насколько он корректен – сказать не могу.
Ответить
Михаил, а вы бы не могли подробнее описать и объяснить про бегущую строку в заголовке, что-то я не понимаю как это должно работать... Не могли бы вы продемонстрировать данный скрипт?)Мы будем вам весьма благодарны=)
Ответить
Алгоритм как здесь: http://myrusakov.ru/skrolling-teksta-na-knopke.html Только вместо кнопки будет document.title
Ответить
спасибо большое=)
Ответить
Михаил, но заголовок не видит пробелов. Получается какая-то неполноценная бегущая строка.
Ответить
Здравствуйте! Уверен, что вам уже не нужно, но решил в этом разобраться для себя. Код упростил до невозможного и прокомментировал все-все! О пробелах теперь тоже можно не беспокоиться! var position = 0;//Начальная позиция текста var text = "Michael Rusakov - Personal Web Site";//Текст заголовка function scrolling() { var speed = 300; //Скорость document.title = text.substring(position,position+35);//Вывод текста position++;//Перемещение на 1 символ if(position == text.length) position=0;//Сброс начальной позиции var id = setTimeout("scrolling()", speed);//Зацикливание } scrolling()//Запуск функции
Ответить
Михаил, по поводу второго кода. А как сделать таким способом вместо фона такую же мигающую ссылку? Я заменял bgColor на linkColor, но у меня это не работает.
Ответить
if (counter % 2 == 0) document.linkColor = "red"; else document.linkColor = "white"; counter++; - всё должно работать.
Ответить
<script language="javascript"> var counter = 0; setInterval(blink, 200); function blink() { if(counter % 2 == 0) document.linkColor = "red"; else document.linkColor = "black"; counter++; } </script> <a href="#">Ссылка</a> Не работает. А в саму ссылку не нужно ничего вставлять?
Ответить
В каком браузере смотрите?
Ответить
Google Chrome и Mozilla не показывают. а Opera и IE норм все.
Ответить
document.links[0].style.color - попробуйте так, только тогда нужно будет перебирать все ссылки в цикле.
Ответить
Спасибо!! Теперь все ОК.
Ответить
<script type="text/javascript"> var counter = 0; setInterval(blink, 1000); function blink() { if (counter % 2 == 0) { document.img.src="img1.png"; } else { document.img.src = "img2.png"; } counter++; } </script> Михаил, в чем ошибка кода? Решил попробовать по аналогии сделать автоматическую смену картинок.
Ответить
http://myrusakov.ru/javascript-finderror.html
Ответить
Моя бегущая строка: <script language = "javascript"> var str = new String("Здарова товарищи!"); var arr = []; for (var i = 0; i < str.length; i++) {/*Заполняю массив строкой*/ arr.push(str.charAt(i)); } for(var b = 0;b < str.length;b++){ arr.push("*"); } function smena(){ var ddd = arr.shift(); arr.push(ddd); var bbb = arr.join('').slice(0,str.length*2); document.title = bbb; } setInterval(smena , 100); </script>
Ответить
Напишите статью про метод getElementById(), а то его нету в справочнике и не понятно как им пользоваться.
Ответить
Данный метод возвращает элемент по id, который был передан в качестве параметра.
Ответить
Здравствуйте Михаил, подскажите пожалуйста, как получить доступ к HTML - коду внутри тега body?
Ответить
В этом случае надо получить доступ перед закрывающим тегом </body>. Тогда все элементы будут подгружены и к ним можно будет обратиться.
Ответить
народ хелп плс , когда я ввожу пробелы в текст то они игнорируются и не получается сделать скроллинг
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.