Главная страница > Работа с окнами. Управление окнами. Создание диалоговых окон.

Работа с окнами. Управление окнами. Создание диалоговых окон.

17.11.2022 10:13

Для взаимодействия с пользователем в объекте window определен ряд методов, которые позволяют создавать диалоговые окна. Работу с окнами мы рассмотрим на примерах.

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

Код html-страницы будет следующим:

<html>

<head>

<title>javascript окно</title>

</head>

<body>

</form>

</body>

</html>

Теперь нам надо создать три страницы с изображениями автомобилей (ford.html, mazda.html, volvo.html), которые собственно и будут загружаться в новые окна.

Код страницы ford.html будет следующим:

<html>

<head>

<title>javascript окно</title>

</head>

<body>

</body>

</html>

Создайте аналогично две другие страницы самостоятельно (и не забудьте поместить в папку images соответствующие картинки).

В наших функциях мы будем использовать два метода объекта window - open() и close(). Первый создает новое окно, второй - закрывает его.

На странице script.js напишем код функций, а затем разберем его:

function open_ford() {

ford=window.open("ford.html", "display_ford",

"width=400,height=300,status=no,toolbar=no,menubar=no");

}

function open_mazda() {

mazda=window.open("mazda.html", "display_mazda"

"width=400,height=300,status=no,toolbar=no,menubar=no");

}

function open_volvo() {

volvo=window.open("volvo.html", "display_volvo"

"width=400,height=300,status=no,toolbar=no,menubar=no");

}

function close_pict() {

window.close();

}

Давайте посмотрим, что мы написали. В первых трех функциях идут строки вида:

=window.open("ford.html", "display_ford", "width=400,height=300,status=no,toolbar=no,menubar=no");

Эта строка создает новое окно с помощью метода open() объекта window (вы же помните, что методы отделяются точкой) и записывает в него страницу ford.html.

У этого метода существует три параметра, каждый из которых заключается в кавычки:

- первый параметр указывает страницу, которую нужно загрузить в окно (например, ford.html),

- второй параметр задает имя открываемому окну (в нашем примере display_ford),

- третий параметр позволяет нам управлять процессом создания окна. Здесь можно задать размеры окна, указать, должно ли новое окно иметь строку статуса, панель инструментов или меню. В нашем примере, мы создали окно шириной 400 и высотой 300 пикселов, без строки статуса, панели инструментов и меню. А могли бы вместо no написать yes и тогда все бы это появилось в нашем окне.

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

-l ocation выводить строку URL

- scrollbars добавлять линейку прокрутки, если документ не помещается на экране

- resize позволять пользователю изменять размер окна

Если какие-либо параметры опущены (в нашем примере, это три только что перечисленных), то из значение приравнивается к no. Обратите внимание, что все параметры перечисляются через запятую, НО БЕЗ ПРОБЕЛА!

В последней функции, мы использовали метод close(), который закрывает текущее окно.

Запустите код из примера, должно получиться следующее:

У объекта window, кроме методов open() и close(), как вы понимаете, есть и другие. Давайте посмотрим, какие еще полезные методы есть у этого объекта:

Метод alert

Функция alert() предназначена для вывода в браузере предупреждающего модального диалогового окна с некоторым сообщением и кнопкой «ОК». При его появлении дальнейшее выполнение кода страницы прекращается до тех пор, пока пользователь не закроет это окно. Кроме этого, оно также блокирует возможность взаимодействия пользователя с остальной частью страницы. Применение этого окна в основном используется для вывода некоторых данных при изучении языка JavaScript, в реальных проектах команда alert() не используется.

Синтаксис метода alert():

// message - текст сообщения

alert(message);

Метод alert() имеет один аргумент (message) - текст сообщения, которое необходимо вывести в модальном диалоговом окне. В качестве результата alert() ничего не возвращает.

Например, выведем при клике в диалоговое окно alert координаты курсора:

// es6

document.addEventListener('click', (e) => {

alert(`Координаты: (${e.clientX},${e.clientY})`);

});

// es5

document.addEventListener('click', function (e) {

alert('Координаты: (' + e.clientX + ',' + e.clientY + ')');

});

Если alert сообщение нужно вывести на нескольких строках, то в этом случае следует воспользоваться «символом перевода строки», который в JavaScript записывается как \n:

// перенос строки в alert

alert('Строка 1\nСтрока 2');

Метод confirm

Показывает диалоговое окно с указанным сообщением и кнопками "OK" и "Cancel". Сообщение должно побуждать пользователя принять решение. Подтверждение возвращает методу true, если пользователь выбирает "OK" или false если пользователь выбирает "Cancel".

Синтаксис:

confirm ("сообщение")

Пример:

Пусть у нас есть какая-нибудь кнопка "Открыть окно" и мы хотим, чтобы по щелчку по ней появлялось диалоговое окно, позволяющее уточнить действительно ли мы хотим его открыть (для примера пусть открывается окно с изображением Volvo из предыдущего примера).

Код html-страницы для этого примера прост:

<html>

<head>

<title>javascript окно</title>

</head>

<body>

</form>

</body>

</html>

На странице script.js напишем код функции choiceOf():

function choiceOf(){

if (confirm("Вы действительно хотите открыть окно?")) {

volvo=window.open("volvo.html", "display_volvo",

"width=400,height=300,status=no,toolbar=no,menubar=no");

}

Как видите, теперь окно с картинкой открывается только в том случае, если мы выбрали "OK" в диалоговом окне.

Т.е. в функции мы указали, что окно следует открывать только в случае, если пользователь в диалоговом окне выбрал "OK" (т.е. метод вернул истину (true)).

Хотелось бы пояснить один нюанс, в программировании в условии оператора if, если метод возвращает либо истину (true), либо ложь (false), часть ==true опускается. Иными словами вместо:

(confirm("Вы действительно хотите открыть окно?")==true)

пишется:

(confirm("Вы действительно хотите открыть окно?"))

Метод prompt

Этот метод отображает диалоговое окно ввода пользователя.

Синтаксис:

prompt(сообщение, [значение по умолчанию])

где

[] - означают, что параметр необязателен, т.е. его можно опустить.

Рассмотрим это на примере. Мы хотим, чтобы пользователь ввел свое имя в диалоговом окне, после чего мы поздороваемся с ним по имени.

Пример:

Итак, код html-страницы как всегда прост:

<html>

<head>

<title>javascript окно</title>

</head>

<body>

</form>

</body>

</html>

Впрочем, код функции тоже несложен:

function acquaintance(){

var YouName=prompt("Как тебя зовут?", "Напиши здесь свое имя.");

alert("Привет "+YouName);

}

Как видите, здесь мы использовали два метода объекта window: сначала метод prompt, который вернул введенное пользователем имя в переменную YouName, а затем - метод alert, который отобразил окно сообщений, в котором мы и поздоровались с пользователем по имени.

Метод setTimeout

Этот метод делает что-либо по истечении указанного в миллисекундах промежутка времени.

Синтаксис:

setTimeout (что делать, время в миллисекундах)

Пример:

Пусть при нажатии на некоторую кнопку "Можно начинать?", через 3 секунды появляется окно сообщений с текстом "Начинайте!".

Итак, код html-страницы:

<html>

<head>

<title>javascript окно</title>

</head>

<body>

</form>

</body>

</html>

Да, именно здесь мы и применим этот метод. Так мы укажем, что функция startMessage() должна сработать через 3 секунды.

Код самой функции прост:

function startMessage(){

alert("Начинайте!")

}

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

Метод clearTimeout

Этот метод отключает таймер, установленный при помощи метода setTimeout.

Синтаксис:

clearTimeout (timerID)

где

timerID - уникальный идентификатор таймера, полученный при его установке.

Давайте немножно переделаем наш последний пример, а именно сделаем две кнопки "Можно начинать?" и "Отменить вопрос".

Теперь, если нажать на кнопку "Можно начинать?", а затем, не дожидаясь появления окна сообщений, нажать на кнопку "Отменить вопрос", то окно сообщений не появится вовсе.

При этом мы изменили только html-код страницы на следующий:

<html>

<head>

<title>javascript окно</title>

</head>

<body>

</form>

</body>

</html>

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

Метод setInterval

В отличие от setTimeout, этот метод выполняет код много раз, через равные промежутки времени, пока не будет остановлен при помощи метода clearInterval.

Синтаксис:

timerID=setInterval(что делать, время в миллисекундах)

где

timerID - уникальный идентификатор таймера, полученный при его установке.

Давайте применим этот метод к предыдущему примеру:

<html>

<head>

<title>javascript окно</title>

</head>

<body>

</form>

</body>

</html>

Теперь посмотрите, как это работает (прежде, чем нажимать на кнопку "Я понял", убедитесь, что окно сообщений открывается каждые 3 секунды):

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

Работа с окнами. Управление окнами. Создание диалоговых окон.

Поиск

Koнтакт

Опрос

Был ли полезен для Вас наш сайт?