Глаза страшат, а руки делают

ЧАСТЬ ВТОРАЯ


14. Объект Window (начало)
методы alert(), confirm() и prompt()

  • методы объекта window;
  • метод alert(): краткое резюме;
  • метод confirm() — пишите письма;
  • метод prompt() — давайте знакомиться, я Штирлиц.

Итак, объекты браузера. И в первую очередь — самый старший из них, объект window.

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

Метод

Описание

open

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

close

alert

Появление окна сигнального диалога с соответствующим сообщением.

confirm

Появление окна диалога подтверждения с кнопками "ОК" и "Cancel".

prompt

Появление окна диалога подсказки с полем текстового ввода.

Focus

Установка или удаление фокуса для окна.

Blur

ScrollTo

Прокрутка содержимого окна до определенной точки.

Setlnterval

Установка временного интервала между функциональным вызовом и вычислением выражения.

SetTimeout

Установка однократного временного интервала до функционального вызова или вычисления выражения.

Мы уже знаем, что window часто подразумевается, но не пишется.

Полные выражения

Равнозначные выражения

window.alert()
window.confirm()
window.prompt()

alert()
confirm()
prompt()

Вызов различных окон диалога

Окна диалога применяются в программах для взаимодействия с пользователем.

Метод alert()

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

Метод confirm()

Метод confirm() уже даёт возможность пользователю принять простейшее «булево» решение: сказать «да» или «нет».

Вот, например, нажмите эту кнопку:

Извините за маленький розыгрыш. Надеюсь, Вы умеете пользоваться кнопкой «назад».

Как это всё устроено? Вы, конечно, увидели, что у меня этот метод скомбинирован с алертами. И сделано это с помощью функции, которая вставлена в <head>.

<script type="text/javascript">
function confirmation() {
if
(confirm("А не хотите ли повторить первый урок?") == true)
{location.href = "lsn_js1.html";
alert("Повторение - мать учения!");}
else{
alert("Не хотите - как хотите...");}
}

</script>

Метод возвращает два значения: true (если ОК) и false (если отмена).

В true мы отправляем его на соответствующую страницу (свойство href объекта location) и выводим соответствующий alert(). В противном случае (то есть false) просто выводим другой alert().

А в кнопочке вызываем функцию в событии onClick:

<input type="button" value="Проба 1" onClick="confirmation()">

Этот метод часто используется, когда нужно подтвердить или отменить отправку сообщения, используя элемент <form>. Для этого достаточно написать следующую функцию:

function confirmAction() {
return
confirm("Вы действительно хотите отправить сообщение?")
}

А затем нужно вызвать эту функцию из обработчика события onSubmit тэга <form>, например:

<form enctype="multipart/form-data" action="http://narod.yandex.ru/send-poll.xhtml" method="post" onSubmit="return confirmAction()">

Вот здесь, например, Вы можете написать мне на «мыло» всё, что думаете о моих уроках. Если вдруг погорячились и нажали кнопку, а потом неловко как-то стало, выскочит окно диалога и отрезвит Вас.

Если Вы делаете всплывающие окна, то хорошим тоном является предупреждать об этом пользователя и давать ему выбор — открывать окно или не открывать. Для этого перед загрузкой окна надо выпустить «парламентёра» — диалог confirm(). Здесь функция вызывается из <body>. Об этом мы очень скоро поговорим, когда перейдём к созданию окон методом open().

Метод prompt()

Этот метод уже запрашивает у пользователя конкретные данные. Появляется окно диалога с полем ввода. Метод возвращает данные, которые пользователь ввёл в это поле, и позволяет программе работать с этими данными.

У метода prompt() два аргумента: вопрос (который появляется над полем ввода) и ответ (текст в поле ввода):

prompt("текст вопроса","текст заданного по умолчанию ответа")

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

prompt("текст вопроса","")

Давайте посмотрим это в действии. Нажмите кнопку, не бойтесь.

Итак, Вы ввели (или не ввели) данные и получили от компьютера ответ, опирающийся на эти данные (или их отсутствие).

Вот простой вариант этой функции:

function takename() {
var
user_name = prompt("А как Вас зовут?","");
if (user_name == "")
{document.getElementById("message").innerHTML = "Ну что ж, знакомство не состоялось. Продолжим.";}
else {
document.getElementById("message").innerHTML = "Очень приятно, " + user_name + ", а меня&nbsp;— Андрей. Вот и познакомились. Продолжим?";}
}

Свойство innerHTML, позволяющее контролировать содержимое тэга, встречалось нам в 10 уроке, когда мы программировали названия под картинками.

А вот код кнопки и пустого абзаца для приветствия.

<input type="button" value="Проба 2" onClick="takename()">
<p align="justify" id="message"></p>

Но если Вы оказались моим тёзкой, то увидели, что функция среагировала и на это.

Как это сделать в «грубом» варианте, можете уже догадаться сами. Нужно проверить переменную user_name не только на пустые кавычки, но и на "Андрей", и вложить ещё один if с соответствующим текстом (можете потренироваться сами).

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

То есть можно догадаться, что функция проверяет переменную user_name на первые 5, 6 или 8 символов.

Но об этом мы будем говорить несколько позже, когда перейдём к строковым объектам и их методам. Просто я хочу, чтобы Вы заранее представляли те задачи, которые нам предстоит решать (в частности, всевозможные расщепления строк на подстроки). Тогда и сами решения покажутся понятнее. Но если не терпится, можете «срисовать» функцию из кода и «разделать под орех». Для любопытных я написал там комментарий.

Метод prompt() можно также использовать для ввода пароля.

Это ещё не конец урока!

Давайте немножко «поиграем в шпионов», чтобы дочитать до конца эту главу. Сначала попробуйте нажать кнопку и что-нибудь ввести.


Итак, мы узнали:

все методы, которые выводят стандартные окна диалога.

А также научились:

разговаривать с компьютером и запираться на «игрушечные» пароли.


К следующему уроку >>


 013420