Игра на «Морской Бой» на JavaScript: «Простая Игра» и «Игра для Двоих»
Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Технические фишки инфобизнеса 2014

Статьи для сайтов!!!
Метод open объекта Window Методы alert, prompt и confirm Введение в Функции

Методы объекта Window - Метод alert, prompt и confirm в javascript

Методы объекта Window

Урок №2 Методы alert, prompt и confirm

Количество просмотров: 740

Вы знаете из предыдущего урока, что объект Window глобальный. Он содержит в себе другие объекты.

Но он как объект также имеет и свои методы. Поэтому переходим к изучению методов этого объекта. С одним из них Вы уже знакомы - это метод open. Давайте рассмотрим и другие...

Метод alert - Модальное окно

Метод alert - Модальное окно

С методом alert объекта Window Вы уже, возможно, встречались в сети Интернет, так как он вызывает модальное окно, и Вы наверняка подобные окна видели, посещая различные Веб-сайты.

Давайте на примере посмотрим, что это такое...

<script type="text/javascript">

window.alert("Модальное Окно");

</script>

Модальное окно служит для того, чтобы привлечь к себе внимание. И пока мы его не закроем, нажав кнопку ОК, мы не сможем получить доступ к странице.

Напомним, что если мы работаем с текущим окном, то, как мы говорили ранее, объект Window можно не указывать, а сразу указать метод alert. При этом модальное окно все также появится.

<script type="text/javascript">

alert("Модальное Окно");

</script>

Метод prompt объекта Window - Поле для ввода

Метод prompt объекта Window - Поле для ввода

С методом prompt мы будем часто работать, поэтому здесь рассмотрим и его. Он похож на alert, но отличается тем, что содержит поле для ввода, благодаря которому мы имеем возможность попросить у пользователя ввести какую-либо информацию.

Посмотрим, как работает метод prompt объекта Window...

<script type="text/javascript">

document.write("Метод prompt вызывает модальное окно с полем для Ввода информации...");

 

prompt("Каков Ваш Вес?");

</script>

Далее....

Ту информацию, которую пользователь занесет в поле для ввода, prompt возвращает. И мы можем ее как-то использовать. Для этого информацию нужно занести в произвольную переменную. И, например, вывести её при помощи метода alert.

Давайте посмотрим, как это работает...

<script type="text/javascript">

document.write("Заполните поле для ввода информации...");

 

var info = prompt("Каков Ваш Вес?"); /* Заносим информацию, возвращаемую методом prompt в переменную info */

alert("Ваш Вес " + info + " кг."); /* Выводим информацию при помощи alert */

</script>

Метод alert выводит возвращаемую от метода prompt информацию во вновь создаваемое модальное окно, но ее же можно вывести и в текущее окно. Смотрите пример...

<script type="text/javascript">

document.write("Заполните поле для ввода информации...");

 

var info = prompt("Каков Ваш Вес?"); /* Заносим информацию, возвращаемую методом prompt в переменную info */

document.write("<p>" + "Ваш Вес " + info + " кг."); /* Выводим информацию в текущее окно */

</script>

Или же информацию, возвращаемую от метода prompt можно вывести в новое - «Дочернее» окно, создаваемое методом open объекта Window. Смотрите пример...

<script type="text/javascript">

document.write("Заполните поле для ввода информации...");

 

var info = prompt("Каков Ваш Вес?"); /* Заносим информацию, возвращаемую методом prompt в переменную info */

 

var new_Window = window.open("","Новое окно","width=500,height=400"); /* Создаем новое окно и помещаем ссылку, возвращаемую методом open в переменную new_Window */

new_Window.document.write("<p>" + "Ваш Вес " + info + " кг."); /* Выводим информацию в новое окно new_Window */

</script>

Думаю, теперь Вам понятно как работает метод prompt. Осталось сказать лишь о том, что он может содержать в себе 2 параметра.

Первый параметр - это фраза (вопрос), который видит пользователь при появлении модального окна.

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

И снова смотрим пример...

<script type="text/javascript">

document.write("Заполните поле для ввода информации...");

 

var info = prompt("Каков Ваш Вес?","Укажите Ваш Вес..."); /* Заносим информацию, возвращаемую методом prompt в переменную info */

alert("Ваш Вес " + info + " кг."); /* Выводим информацию при помощи метода alert */

</script>

Метод confirm объекта Window - ОК и Отмена

Метод confirm объекта Window - ОК и Отмена

Метод confirm объекта Window тоже похож на alert. Он тоже вызывает модальное окно. Но оно помимо кнопки ОК содержит кнопку Отмена.

<script type="text/javascript">

confirm("Вы упитанный человек?");

</script>

Метод confirm в зависимости от нажатой кнопки ОК или Отмена возвращает Истину или Ложь соответственно.

Возвращаемое значение от метода confirm мы можем занести в произвольную переменную. Затем составить условие и в зависимости от значения переменной получить тот или иной результат. Смотрим пример...

<script type="text/javascript">

document.write("Нажмите ОК или Отмена для получения Истинного или Ложного значения" + "<p>");

 

var Ves = confirm("Вы упитанный человек?"); /* Заносим информацию, возвращаемую методом confirm (Истину или Ложь) в переменную Ves*/

if (Ves == true) /* Составляем условие. Здесь можно было бы указать только имя переменной Ves - результат был бы тот же */
{
document.write("Да? Вы толстый...???")
}
else
{
document.write("Нет... Вы худой!")
}

</script>

Итак, в этом уроке мы рассмотрели работу трех методов объекта Window - это alert, prompt и confirm. На данном этапе изучения языка программирования JavaScript этого достаточно. Конечно, у объекта Window есть и другие методы, но мы их будем рассматривать позже.

Далее выполним Домашнее задание...

Домашнее задание - методы объекта Window

Домашнее задание - методы объекта Window

Приступаем к выполнению домашнего задания по пройденному уроку: «Методы объекта Window - Метод alert, prompt и confirm в javascript».

Их будет два...

Домашнее задание №1

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

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

Для решения этой задачи на нужно будет вспомнить тему условий в javascript. Если точнее, то нас будет интересовать Конструкция IF-ELSE.

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

Решение домашнего задания №1

<script type="text/javascript">

var age = prompt("Сколько Вам лет?");

// При помощи метода prompt вызываем модальное окно с полем для ввода.

// И передаём значение, возвращаемое методом prompt в переменную age. Далее составляем условие

if (age > 20)
{
document.write("Вы уже взрослый человек!")
}
else
{
document.write("Вы еще молоды, у Вас все впереди!")
}

</script>

Домашнее задание №2

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

После этого нужно создать цикл и вывести на экран список, сколько человеку было лет 1 год назад, 2 года назад и т.д.

Например, человек ввел, что ему 30 лет, и сейчас 2010 год. Вам в итоге надо вывести на экран: В 2009 году Вам было 29 лет, В 2008 году Вам было 28 лет и т.д.

Для создания цикла можете использовать while или for, которые мы с вами прошли в предыдущих уроках.

Это домашнее задание будет иметь несколько вариантов решений:

  • В первом работает цикл for

  • Во втором цикл while

  • В третьем и четвертом - несколько улучшено решение задачи

Для наглядности в каждом варианте я вводил один и тот же возраст - 10 лет. И один и тот же год рождения - 2010.

Кроме этого во всех вариантах я изменил выводимый на экран текст (он немного отличается от исходного).

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

Из прошлых занятий вспомним цикл while и цикл for.

Решение домашнего задания №2 - Цикл for

<script type="text/javascript">

var age = prompt("Сколько Вам лет?");

var year = prompt("Какой сейчас год?");

// При помощи метода prompt поочередно вызываем модальные окна с полем для ввода.

// И передаём значения, возвращаемые методом prompt в переменные age и year

for (var age; age > 0; age--,year--) /* Цикл for: Счетчик - Условие - Меняем значение счетчика. Уменьшаем age до 0, и тогда цикл останавливается */
{
document.write("В " + year + " году Вы прожили - " + age + "-ый год жизни <br/>")
}

</script>

Домашнее задание №2 - Цикл for

 

В 2010 году Вы прожили - 10-ый год жизни
В 2009 году Вы прожили - 9-ый год жизни
В 2008 году Вы прожили - 8-ый год жизни
В 2007 году Вы прожили - 7-ый год жизни
В 2006 году Вы прожили - 6-ый год жизни
В 2005 году Вы прожили - 5-ый год жизни
В 2004 году Вы прожили - 4-ый год жизни
В 2003 году Вы прожили - 3-ый год жизни
В 2002 году Вы прожили - 2-ый год жизни
В 2001 году Вы прожили - 1-ый год жизни

В этом решении мы сначала создали переменные age и year, а затем открыли цикл for, в котором указали в качестве счетчика переменную age - так требует синтаксис цикла for (в круглых скобках нужно обязательно указывать счетчик).

Код можно оптимизировать, создав переменные (а заодно и счетчики) age и year внутри цикла for. Смотрите пример ниже...

Решение домашнего задания №2 - Цикл for - Оптимизация кода

<script type="text/javascript">

for (var age = prompt("Сколько Вам лет?"), year = prompt("Какой сейчас год?"); age > 0; age--,year--)

// Цикл for: Создаем счетчик - Переменные age и year
// Условие - Уменьшаем age до 0 и тогда цикл останавливается
// Меняем значение счетчика - Уменьшаем age и year на единицу

{
document.write("В " + year + " году Вы прожили - " + age + "-ый год жизни <br/>")
}

</script>

Домашнее задание №2 - Цикл for - Оптимизация кода

 

В 2010 году Вы прожили - 10-ый год жизни
В 2009 году Вы прожили - 9-ый год жизни
В 2008 году Вы прожили - 8-ый год жизни
В 2007 году Вы прожили - 7-ый год жизни
В 2006 году Вы прожили - 6-ый год жизни
В 2005 году Вы прожили - 5-ый год жизни
В 2004 году Вы прожили - 4-ый год жизни
В 2003 году Вы прожили - 3-ый год жизни
В 2002 году Вы прожили - 2-ый год жизни
В 2001 году Вы прожили - 1-ый год жизни

Решение домашнего задания №2 - Цикл while

Вспоминаем цикл while...

<script type="text/javascript">

var age = prompt("Сколько Вам лет?"); /* Счетчик */

var year = prompt("Какой сейчас год?");

while (age > 0) /* Условие */
{
document.write("В " + year + " году Вы прожили - " + age + "-ый год жизни <br/>") /* Действие */

age--; /* Меняем значение счетчика. Уменьшаем age до 0 и тогда цикл останавливается */

year--;
}

</script>

Домашнее задание №2 - Цикл while

 

В 2010 году Вы прожили - 10-ый год жизни
В 2009 году Вы прожили - 9-ый год жизни
В 2008 году Вы прожили - 8-ый год жизни
В 2007 году Вы прожили - 7-ый год жизни
В 2006 году Вы прожили - 6-ый год жизни
В 2005 году Вы прожили - 5-ый год жизни
В 2004 году Вы прожили - 4-ый год жизни
В 2003 году Вы прожили - 3-ый год жизни
В 2002 году Вы прожили - 2-ый год жизни
В 2001 году Вы прожили - 1-ый год жизни

Решение домашнего задания №2 - Цикл while - Выводим год рождения

Здесь мы немного улучшим решение задачи, введя год рождения. В предыдущих решениях, когда переменная age становилась равной 0, цикл останавливался, так как по условию age > 0. Да и не имело смысла писать о нулевом годе жизни.

Вместо этого в решении лучше вывести фразу о годе рождения. Для этого нужно не только изменить условие для цикла while, но и составить условие if-else внутри него. Смотрим пример...

<script type="text/javascript">

var age = prompt("Сколько Вам лет?"); /* Счетчик */

var year = prompt("Какой сейчас год?");

while (age >= 0) /* При значение age == 0 нужно будет вывести год рождения */
{


if (age == 0)
{
document.write("<strong> В " + year + " году Вы родились... </strong>")
}
else
/* Иначе... */
{
document.write("В " + year + " году Вы прожили - " + age + "-ый год жизни <br/>")
}

 

age--; /* Меняем значение счетчика */

year--;
}

</script>

Домашнее задание №2 - цикл while - Выводим год рождения

 

В 2010 году Вы прожили - 10-ый год жизни
В 2009 году Вы прожили - 9-ый год жизни
В 2008 году Вы прожили - 8-ый год жизни
В 2007 году Вы прожили - 7-ый год жизни
В 2006 году Вы прожили - 6-ый год жизни
В 2005 году Вы прожили - 5-ый год жизни
В 2004 году Вы прожили - 4-ый год жизни
В 2003 году Вы прожили - 3-ый год жизни
В 2002 году Вы прожили - 2-ый год жизни
В 2001 году Вы прожили - 1-ый год жизни
В 2000 году Вы родились...

Решение домашнего задания №2 - Цикл while - Выводим год рождения и сообщение о текущем годе жизни.

Здесь я решил ещё немного улучшить решение. Как Вы видели в примерах выше, в каждом варианте я вводил один и тот же возраст - 10 лет. И один и тот же год рождения - 2010.

При этом первое сообщение, которое Вы видели во всех примерах: «В 2010 году Вы прожили - 10-ый год жизни» - говорит о прошедшем времени, что не совсем корректно, так как речь идет о текущем годе жизни.

Поэтому я внес кое-какие поправки в программный код JavaScript, чтобы подкорректировать этот момент. Смотрите пример ниже и попробуйте разобраться в этом...

<script type="text/javascript">

var age = prompt("Сколько Вам лет?");

var year = prompt("Какой сейчас год?");

 

document.write("<strong> Сейчас " + year + " год и в этом году Вы проживаете " + age + " год жизни! </strong> <br/>"); /* Выводим сообщение о текущем годе жизни */

/* И далее меняем условие цикла while и условие if. И вычитаем единицу из year и age */

 

while (age > 0)
{


if (age == 1)
{
document.write("<strong> В " + (year - 1) + " году Вы родились... </strong>")
}
else
/* Иначе... */
{
document.write("В " + (year - 1) + " году Вы прожили - " + (age - 1) + "-ый год жизни <br/>")
}

 

age--;

year--;
}

</script>

Домашнее задание №2 - цикл while - Выводим год рождения и сообщение о текущем годе жизни

 

Сейчас 2010 год и в этом году Вы проживаете 10 год жизни!
В 2009 году Вы прожили - 9-ый год жизни
В 2008 году Вы прожили - 8-ый год жизни
В 2007 году Вы прожили - 7-ый год жизни
В 2006 году Вы прожили - 6-ый год жизни
В 2005 году Вы прожили - 5-ый год жизни
В 2004 году Вы прожили - 4-ый год жизни
В 2003 году Вы прожили - 3-ый год жизни
В 2002 году Вы прожили - 2-ый год жизни
В 2001 году Вы прожили - 1-ый год жизни
В 2000 году Вы родились...

Главная Изучаем JavaScript Методы alert, prompt и confirm Введение в Функции

Ваши комментарии к уроку:

Комментариев нет...

Добавить комментарий:

Ваше Имя:*
Комментарий:*
Ответьте на вопрос: *
Сколько дней в Високосном году?
* - поля обязательные для заполнения.
JavaScript
Частота просмотра уроков
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru