<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Объект Document в JavaScript

Объект 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, которое само является объектом и, причём, достаточно часто используемым.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (21):

fred fred 09.08.2012 21:31:19

На мой взгляд, второй код и его описание содержат разночтения. Переменная 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); } После девяти миганий все замирает. У меня этот код работает, а вот насколько он корректен – сказать не могу.

Ответить

Margo Margo 17.12.2012 23:25:06

Михаил, а вы бы не могли подробнее описать и объяснить про бегущую строку в заголовке, что-то я не понимаю как это должно работать... Не могли бы вы продемонстрировать данный скрипт?)Мы будем вам весьма благодарны=)

Ответить

Admin Admin 18.12.2012 10:31:14

Алгоритм как здесь: http://myrusakov.ru/skrolling-teksta-na-knopke.html Только вместо кнопки будет document.title

Ответить

Margo Margo 18.12.2012 21:47:59

спасибо большое=)

Ответить

Lerd Lerd 28.05.2013 11:33:29

Михаил, но заголовок не видит пробелов. Получается какая-то неполноценная бегущая строка.

Ответить

ido1 ido1 20.05.2016 16:48:16

Здравствуйте! Уверен, что вам уже не нужно, но решил в этом разобраться для себя. Код упростил до невозможного и прокомментировал все-все! О пробелах теперь тоже можно не беспокоиться! 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()//Запуск функции

Ответить

sergkosm sergkosm 29.03.2013 20:10:07

Михаил, по поводу второго кода. А как сделать таким способом вместо фона такую же мигающую ссылку? Я заменял bgColor на linkColor, но у меня это не работает.

Ответить

Admin Admin 29.03.2013 21:19:00

if (counter % 2 == 0) document.linkColor = "red"; else document.linkColor = "white"; counter++; - всё должно работать.

Ответить

sergkosm sergkosm 29.03.2013 23:00:41

<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> Не работает. А в саму ссылку не нужно ничего вставлять?

Ответить

Admin Admin 30.03.2013 09:47:21

В каком браузере смотрите?

Ответить

sergkosm sergkosm 30.03.2013 19:32:32

Google Chrome и Mozilla не показывают. а Opera и IE норм все.

Ответить

Admin Admin 30.03.2013 21:59:01

document.links[0].style.color - попробуйте так, только тогда нужно будет перебирать все ссылки в цикле.

Ответить

sergkosm sergkosm 30.03.2013 22:17:11

Спасибо!! Теперь все ОК.

Ответить

sergkosm sergkosm 11.04.2013 00:01:46

<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> Михаил, в чем ошибка кода? Решил попробовать по аналогии сделать автоматическую смену картинок.

Ответить

Admin Admin 11.04.2013 12:16:06

http://myrusakov.ru/javascript-finderror.html

Ответить

neo321654 neo321654 06.06.2013 17:50:14

Моя бегущая строка: <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>

Ответить

Avery Avery 27.06.2013 09:29:11

Напишите статью про метод getElementById(), а то его нету в справочнике и не понятно как им пользоваться.

Ответить

Admin Admin 27.06.2013 18:26:04

Данный метод возвращает элемент по id, который был передан в качестве параметра.

Ответить

andrew11 andrew11 27.10.2013 17:09:14

Здравствуйте Михаил, подскажите пожалуйста, как получить доступ к HTML - коду внутри тега body?

Ответить

Admin Admin 27.10.2013 22:10:09

В этом случае надо получить доступ перед закрывающим тегом </body>. Тогда все элементы будут подгружены и к ним можно будет обратиться.

Ответить

namik21 namik21 31.08.2014 21:21:02

народ хелп плс , когда я ввожу пробелы в текст то они игнорируются и не получается сделать скроллинг

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.