Нижегородский файловый портал
RSS - каналы
Главное меню
Категории каталога
Мои статьи [5]
Школа покера [5]
Софт [40]
Радиолюбителям и электрикам [8]
Интернет [167]
Система [89]
Комплектующие ПК [47]
Безопасность [56]
Программирование [18]
Веб-дизайнеру [5]
Игры [6]
Полезные советы [24]
Кулинария [1]
Телефония [10]
Мобильник [17]
Планшеты [14]
Медицина [5]
Работа [4]
Домашнему мастеру [0]
Строительство и ремонт [19]
Для сада и огорода [2]
Юмор и приколы [12]
Интересное [114]
Пластики [3]
Разное [238]
Мини-чат
Правила мини-чата



Мини-чат в окне
Погода в Нижнем
Яндекс.Погода
Главная » Статьи » Программирование

Онлайн-учебник JavaScript (Часть 7)
window.close() - закрываем окно

Метод window.close() позволяет закрыть некоторое окно браузера. Но только в этом "некотором" окне и содержится основная трудность использования данного метода. Программа на JavaScript должна знать, какое именно окно от нее требуют закрыть.

Для этих целей часто используется метод window.focus(), о котором мы поговорим чуть ниже.

Для закрытия окна браузера служит метод window.close(). Единственной сложностью при использовании этого метода является указание обработчику JS, какое именно окно следует закрыть. Если требуется закрыть текущее окно, то можно написать просто:

window.close(); или self.close();


Если нам потребуется закрыть порождающее (родительское окно), то есть окно из которого было вызвано текущее, то достаточно написать:

window.opener.close();

Но что, если нам требуется закрыть произвольное окно? Вполне естественным в этом случае будет получить идентификатор этого окна, для закрытия окна по его идентификатору при помощи window.close(), что мы и будем делать в следующем примере:

<FORM name="f4">
<INPUT TYPE=button VALUE="Создать окно"
onClick="okno=window.open('window – prompt.php','okno','width=420,
height=230,resizable=yes,
scrollbars=yes,status=yes');">
<INPUT TYPE=button VALUE="Закрыть окно"
onClick="okno.close();">
</FORM>


Аналогично примеру в предыдущем уроке, мы устанавливаем на кнопку формы обработчик события клика, который при нажатии вызывает метод window.open(), но с тем отличием, что в данном примере результат работы этого метода присваивается переменной okno.

Теперь переменная содержит необходимое нам окно и мы без труда можем его закрыть:

okno.close();

Теперь мы научились самостоятельно создавать и закрывать окна браузера при помощи JavaScript. Следующим шагом в освоении методов работы с окнами станет управление фокусом.

window.focus() - управление фокусом

Метод window.focus() позволяет выбрать одно из многих существующих в данный момент окон браузера, для проведения над ним определенных манипуляций.

Для выбора определенного окна из нескольких существующих используется метод window.focus(). Работа с этим методом аналогична работе с window.close() – главное передать идентификатор самого окна и дело в шляпе. Рассмотрим все на примере:

<FORM name="f5">
<INPUT TYPE=button VALUE="Создать окно1"
onClick="okno1=window.open('window – prompt.php','okno1','width=420,
height=230,resizable=yes,scrollbars=yes,status=yes');">
<INPUT TYPE=button VALUE="Создать окно2"
onClick="okno2=window.open('window – close.php','okno2','width=420,
height=230,resizable=yes,scrollbars=yes,status=yes');">
<INPUT TYPE=button VALUE="Выбрать окно1"
onClick="okno1.focus();">
<INPUT TYPE=button VALUE="Выбрать окно2"
onClick="okno2.focus();">
</FORM>


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

Создаются две кнопки, позволяющие создать 2 различных окна посредством метода window.open(). И создаются еще 2 кнопки, позволяющие переключать фокус между ними.

Каждому окну назначен свой, уникальный идентификатор, позволяющий обращаться к каждому из них напрямую:

okno1 и okno2

При нажатии на кнопку выбрать окно1 вызывается метод window.focus() с идентификатором okno1:

okno1.focus();

Аналогично происходит и при нажатии на кнопку выбрать окно2.

window.setTimeout() - порождаем потоки вычислений

Метод window.setTimeout() позволяет порождать потоки вычислений через определенные интервалы времени.

Звучит несколько не понятно?

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

Метод window.setTimeout() является одним из наиболее мощных и полезных методов во всем JavaScript.

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

a = setTimeout("поток_кода",время);

Не стоит переживать, если Вам пока не понятен данный метод. Далее все встанет на свои места.

Давайте теперь рассмотрим пример, который поможет нам лучше понять принцип работы метода window.SetTimeOut():

<script>
var mark=0;
var circle;
function time()
{
if(mark==1)
{
d = new Date();
window.document.c.f.value = d.getHours()+":"+d.getMinutes()+
":"+d.getSeconds();
}
circle=setTimeout("time();",500);
}
function marks()
{
if(mark==0)
mark=1;
else mark=0;
}
</script>
<FORM NAME=c>
Текущее время:
<INPUT NAME=f size=8>
<INPUT TYPE=button VALUE="старт/стоп" onClick="marks();time();">
</FORM>
Текущее время:

Итак, рассмотрим нашу программу более подробно.

Программа состоит из 2-х функций, одна из которых ( time() ) порождает потоки времени, другая ( marks() ) отвечает за отображение времени на экране.

Функция time() проверяет значение переменной mark (значение которой, в свою очередь, может изменять функция marks() ) на равенство 1. Если она равна 1, то порождается поток времени при помощи функции date(). Но неважно, равна переменная mark 1 или не равна, в любом случае функция time() вызывает метод window.SetTimeOut() с параметрами:

setTimeout("time();",500);

То есть функция порождает себя заново с интервалом 500 мс, что позволяет ей всегда держать внутри переменной d свежее значение времени.

Функция marks() является простейшей функцией, единственной задачей которой является изменение значения переменной mark с 0 на 1 и наоборот при каждом вызове.

Далее мы создаем простую форму, состоящую из текстового поля и кнопки, содержащей обработчик события OnClick:

onClick="marks();time();"

Таким образом, нажимая на кнопку мы первым делом вызываем функцию marks(), которая изменяет значение mark, а за тем в бой идет основная функция – time(), которая и отвечает за вывод времени.

Нажав на кнопку повторно мы опять изменим значение mark, что повлияет на выполнение условия if внутри функции time(), показав или убрав время с экрана.

window.clearTimeout - обнуление внутреннего счетчика

Ну вот мы и научились порождать потоки вычислений при помощи метода window.setTimeout(). Разобрали пример, в котором время выводилось при помощи данного метода.

Но, даже когда мы останавливали вывод времени на экран, внутренний счетчик продолжал идти. Сегодня мы научимся его останавливать при помощи метода window.clearTimeout.

Для прерывания потока вычислений, созданного методом window.SetTimeout используется window.ClearTimeout. Смысл этого метода может показаться Вам несколько непонятным, но давайте вернемся к предыдущему примеру.

Если Вы помните, то мы выводили на экран текущее время при помощи функции date(). Функция date() позволяет узнать время только в один единственный момент времени – в момент вызова самой функции, но нам требовалось, чтобы время шло, как это и должно быть.

Для этого мы использовали метод window.settimeout, позволяющий нам многократно производить вызов функции date().

И все вроде бы нормально, но у нашей программы был один очень существенный нюанс. Когда мы нажимали на кнопку старт/стоп для остановки часов, мы всего навсего отменяли вывод времени на экран, но сами часы не останавливались. Потоки продолжали порождаться с задержкой в 500 мс, как это было бы, если бы мы и не нажимали на кнопку старт/стоп.

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

Теперь Вы поняли необходимость использования метода window.clearTimeout. Перейдем к примеру:

<script>
var p1 = null;
function start()
{
d = new Date();
window.document.c1.f1.value = d.getHours()+":"+d.getMinutes()+
":"+d.getSeconds();
p1=setTimeout("start();",500);
}
function stop()
{
clearTimeout(p1);
p1=null;
}
</script> <FORM NAME=c1>
Настоящее время:
<INPUT NAME=f1 size=8>
<INPUT TYPE=button VALUE="Start" onClick="if(p1==null)start();">
<INPUT TYPE=button VALUE="Stop" onClick="if(p1!=null)stop();">
</FORM>
Настоящее время:

Созданная нами в этом примере программа является более грамотной, с точки зрения программирования на JavaScript, модификацией программы из предыдущего урока.

У нас есть две функции. Первая функция – start() – вызывает текущее время и заставляет его обновляться раз в 500 мс посредством метода window.settimeout.

Вторая функция – stop() – уничтожает порождение потоков строкой clearTimeout(p1); и присваивает переменной, содержащей поток вычисления (p1) значение null (не существует).

Помимо внедрения метода window.clearTimeout, управление программой тоже было существенно доработано.

При нажатии на кнопку старт происходит проверка условием if существует ли поток вычислений в данный момент времени и если его нет, то запускает функцию start().

При нажатии на кнопку стоп проверяется отсутствие потока вычислений и если он существует, то вызывается функция stop().

Такая доработка функционала позволяет нам исключить появление нескольких одинаковых потоков вычислений в один момент времени.

Продолжение следует...
Добавил: Админ-21NN | Просмотров: 2447 | Рейтинг: 5.0/2


Обратите Ваше внимание на другие статьи:

Уважаемые пользователи, пожалуйста, оставляйте комментарии! Нам очень важно Ваше мнение!
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.

    
Меню пользователя
Аватар гостя

Приветствуем Вас, Гость

Логин:
Пароль:
Поиск по сайту
Поиск по названию
Поиск по тегам
Горячие темы форума
Зарабатываем деньги
Детская игра Подарки...
Тест скорости подклю...
кое что о Windows
Кто ты, человек?
Новая валюта портала
Все о сексе
"Что мешает нам...
Культура
Афоризмы
Лучшие 13 анекдотов ...
как защитить свой ко...
поговорим о софте
восстановление данны...
Я ненавижу Дом-2
Волга-Телеком
Кулинария "Кокт...
Стол заказов
Жалобы
С Днем Победы!!!
Прикольные картинки
С праздником Пасхи !...
Статистика
Новых за месяц: 139
Новых за неделю: 44
Новых вчера: 6
Новых сегодня: 4
Всего: 5378
Из них:
Администраторов: 3
$$$-Модераторов: 1
Модераторов: 3
Прокураторов: 3
-----------------
далее:
Проверенных: 247
Пользователей: 2885
Новичков: 1943
Заблокированных: 100
-----------------
Из всех пользователей:
Мужчин и парней: 4213
Женщин и девушек: 1164
Именинники
Поздравляем с Днем рожденья:

psyxo(34), beard1969(48), BigDOG(32), RjklC(27), exvilol(24), valenta(27), Voldemar(29), artvolodimir(30), Альбертacmalov(29), Zema63(28)
Режим ON-LINE
Онлайн всего: 5
Гостей: 5
Пользователей: 0

Сейчас на портале:
Наша кнопочка
Нижегородский файловый портал

HTML-код кнопки:
Реклама
Размещение рекламы

Яндекс.Метрика
Регистрация сайта в каталогах, раскрутка и оптимизация сайта, контекстная реклама Ремонт холодильников в Нижнем Новгороде

Copyright © BankRemStroy © 2009-2017