<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Объект Window в JavaScript

Объект Window в JavaScript

Для создания всплывающих окон в JavaScript используется объект Window. У этого объекта существует ещё одна классная функция, о которой мы поговорим ближе к концу статьи. А пока о том, как использовать объект Window в JavaScript по своему прямому назначению.

Конструктора у объекта Window, в том плане, что он закрыт, поэтому окна создаются через метод объекта Window - open():

var win = window.open("http://myrusakov.ru", "My Window");

В данном примере мы создаём окно, в которое будет подгружен сайт: "http://myrusakov.ru", а имя нового окна будет: "My Window". Это простейший вариант создания окна в JavaScript. Однако, у метода open() существует ещё один необязательный параметр, с настройками нового окна:

var win = window.open("http://myrusakov.ru", "My Window", "width=400,height=500,menubar=yes,toolbar=no,location=yes,scrollbars=yes");

Обратите внимание на то, что этот параметр имеет очень жёсткие условия в плане синтаксиса: никаких пробелов быть вообще не должно. А именно эту ошибку чаще всего и допускают. Теперь о параметрах:

  • Width - отвечает за ширину нового окна.
  • Height - отвечает за высоту нового окна.
  • Menubar - если стоит "yes", то в новом окне будет меню, если стоит "no", то, соответственно, меню не будет.
  • Toolbar - отвечает за наличие панели инструментов.
  • Location - отвечает за наличие адресной строки в новом окне.
  • Scrollbars - отвечает за наличие полос прокрутки.

Теперь переходим к методам, позволяющим управлять объектом Window в JavaScript. Сразу хочется заметить, что глобальное окно (в котором и выполняется наш скрипт) также является экземпляром объекта Window, и именно к нему и будут применены некоторые методы.

А начнём мы с простейших методов - focus() и blur(). Эти методы позволяют навести фокус на окно (focus()) и, наоборот, потерять его (blur()). Если вдруг, кто не знает, то фокус - это когда окно становится активным. Когда окно перестаёт быть активным (переключились на другое окно), то говорят, что окно теряет фокус. В следующем примере демонстрируется использование этих двух методов:

win.focus();
//Некая задержка
win.blur();

Здесь мы даём фокус нашему окну, потом ставим некую задержку (пока не буду приводить код задержки, чуть попозже, потерпите, пожалуйста), а потом снимаем фокус.

Метод close() позволяет закрыть окно:

win.close();

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

Есть ещё и другие методы в объекта Window, которые тоже могут использоваться - это методы back() и forward(). Эти методы заменяют кнопки "Назад" и "Вперёд" в браузере. Иногда это используют, чтобы сайт был более удобен для пользователя (например, сделать кнопки на сайте для возврата на предыдущую страницу). Применение этих методов очевидное и очень простое:

window.back();

И при заходе на эту страницу пользователь автоматически вернётся назад (при условии, что есть куда возвращаться, конечно). Аналогичный метод и forward(). Но сейчас я хочу, чтобы Вы обратили внимание на то, что мы применили в этот раз метод к глобальному окну, а разработчики нам позволили этот глобальный объект не писать, то есть, например, так:

back();

Очевидно, что если бы применяли метод к объекту Window, который мы создали через open(), то пришлось бы писать его имя, как мы делали раньше.

Теперь перейдём к методам, которые используют очень часто, - таймерам в JavaScript. Есть всего два метода для работы с таймерами. Первый метод - это setTimeout(). Эта функция принимает два параметра: функцию (либо код), которую нужно выполнить, и второй параметр - задержку (в миллисекундах), через которую надо выполнить функцию (либо код). Вот пример:

setTimeout(func, 3000);
function func () {
  alert("Прошло 3 секунды");
}

Если Вы запустите данный скрипт, то через 3 секунды после начала выполнения Вы увидите информационное сообщение. Обратите внимание, что метод setTimeout() применён к глобальному окну, поэтому мы не писали так: "window.setTimeout()". Хотя, конечно, так тоже можно писать, просто разработчики JavaScript предоставили нам сокращённую запись.

Если требуется остановить таймер, то используется метод clearTimeout(), который принимает в качестве параметра идентификатор, полученный при использовании метод setTimeout():

var id = setTimeout("3 + 4", 5000);
clearTimeout(id);

То есть сразу после запуска таймера, мы его останавливаем, соответственно, выражение: "3 + 4" посчитано не будет.

Ключевая особенность метода setTimeout() в том, что он выполняется всего один раз. В нашем примере, он вызвал функцию func() и всё. Больше эта функция вызываться через таймер не будет. А вот для того, чтобы настроить регулярное срабатывание таймера через равные промежутки времени используется метод setInterval():

var counter = 0;
var id = setInterval(func, 5000, "Tommy");
function func(name) {
  counter++;
  alert(name + ", уже прошло " + (counter * 5) + " секунд!");
  if (counter == 4) clearInterval(id);
}

В данном случае, мы создали глобальную переменную counter, которая показывает, сколько раз была вызвана функция. От неё считается и прошедшее время после начала выполнения скрипта. Также заметьте, что функция func() требует параметр. Этот параметр передаётся в методе setInterval() сразу после параметра с задержкой. Если будет два параметра в функции, то в методе setInterval() также надо будет дописать ещё два передающихся параметра. Такие же правила и для метода setTimeout().

В скрипте после 4-х вызовов функции мы останавливаем непрерывное выполнение таймера.

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

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

Spartak_Belarus Spartak_Belarus 20.03.2013 17:29:54

Можно ли открыть окно win = window.open, а через N секунд используя setTimeout закрыть его?

Ответить

Admin Admin 20.03.2013 23:15:52

Чем ждать ответа, проще самому взять и проверить, причём этот вариант будет в 100 раз полезнее.

Ответить

Spartak_Belarus Spartak_Belarus 21.03.2013 14:54:37

Проверил и до, и после. Открыл многое другое, например, что setTimeout(func(),1000) не работает из-за скобок функции (принял как данность). Но как закрыть открытое окно не понял ни из видео-урока, ни из учебника. Оставил в надежде, что разберусь в дальнейшем. Вопрос поднял, чтобы указать какое место мне непонятно.

Ответить

Lerd Lerd 28.05.2013 17:05:24

window.back() не работает в IE 9. Михаил, скажите, пожалуйста, почему? Вот код: <a href="#" onClick="window.back();"><b>Назад</b></a>

Ответить

Admin Admin 28.05.2013 21:11:38

history.back()

Ответить

Lerd Lerd 28.05.2013 21:40:07

Спасибо большое :).

Ответить

polyak-x polyak-x 08.06.2013 23:26:31

Задание по объекту Window. Скажите что не так? Почему переменные не становятся параметрами? Заранее благодарен. <script language = "javascript"> var x = prompt ("Введите адрес сайта"); var y = prompt ("Введите ширину страницы в пикселяч"); var z = prompt ("Введите длину страницы в пикселях"); var mywndow = window.open ("x", "fff", "innerWidth=y,innerHeight=z"); </script>

Ответить

Admin Admin 09.06.2013 12:22:25

Потому что их нельзя писать как в PHP внутри строк, нужно через + их соединять со строками.

Ответить

polyak-x polyak-x 09.06.2013 22:02:15

спасибо большое!

Ответить

Critical Critical 16.07.2015 21:34:56

Здравствуйте. Можно пример. Не как не получается. Спасибо.

Ответить

Critical Critical 16.07.2015 21:50:55

Все, получилось. window.open(site, "fdfdfsdf", "innerWidth="+x+", innerHeight="+y+"");

Ответить

Plan1977 Plan1977 10.07.2013 11:02:17

Михаил! подскажите, а можно ли при запуске сайта принудительно развернуть окно браузера на весь экран? Метод window.open('url','nameWindow','fullscreen-yes') открывает новое окно (в моём случае вообще бесконечное количество раз) не пойму в чём дело. пример кода: <head> <script language="javascript"> window.open('http://localChk.local/', "", "fullscreen=yes, scrollbars=auto, left=0, top=0"); </script> </head>

Ответить

Admin Admin 10.07.2013 13:01:26

window.open не позволяет сразу при загрузке открывать окна, браузер это блокирует.

Ответить

Plan1977 Plan1977 10.07.2013 13:12:39

Посоветуй тогда способ, как при запуске сайта принудительно развернуть окно браузера на весь экран?

Ответить

Admin Admin 10.07.2013 13:30:46

Никак.

Ответить

Plan1977 Plan1977 10.07.2013 14:43:59

ну а например для IE top.window.moveTo(0,0); top.window.resizeTo(screen.availWidth,screen.availHeight); чем плохо?

Ответить

Admin Admin 10.07.2013 17:53:58

А в других браузерах это работает?

Ответить

Plan1977 Plan1977 11.07.2013 06:16:41

К сожалению нет, НО хоть что то.

Ответить

Admin Admin 11.07.2013 09:16:53

Вот поэтому и плохой. А универсальных вариантов, чтобы против желания пользователя менялся размер окна, такого нет. Тем более, мне бы совсем не понравилось, если бы без моего разрешения просто взяли и изменили размер окна. Поэтому есть подозрение, что и в IE это скоро отменят.

Ответить

Plan1977 Plan1977 11.07.2013 13:02:14

Всё понятно. Спасибо.

Ответить

lopans lopans 28.08.2015 00:55:49

Добрый вечер! Вы пишите, что setTimeout() как она есть работает для главного окна. Хочу открыть новое окно и через 3 сек. закрыть(открывается как вкладка с данным кодом, но с окном тоже пробовал, покороче просто) var win = window.open("http://yandex.ru"); setTimeout(func, 3000); function func(){ win.close(); }- вот так работает. var win = window.open("http://yandex.ru"); win.setTimeout(func, 3000); function func(){ win.close(); }- открывает и не закрывает. Не могу понять логику, какая разница где запускать этот таймер? Логичнее кажется запустить как раз в том окне. И еще никак не могу вывести что-либо с помощью alert() в открытом окне, как ни пробовал, подскажите тоже, если не сложно. п.с. у Вас время +1 от Москвы.

Ответить

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