Пусть у нас имеется страница, на которой расположены кнопки с названиями автомобилей и мы хотим, чтобы по щелчку по кнопке открывалось окно с картинкой этого автомобиля.
Код html-страницы будет следующим:
<html>
<head>
<title>javascript окно</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form name="forma13">
<input type="button" value="ford" onClick="open_ford()">
<input type="button" value="mazda" onClick="open_mazda()">
<input type="button" value="volvo" onClick="open_volvo()">
</form>
</body>
</html>
Теперь нам надо создать три страницы с изображениями автомобилей (ford.html, mazda.html, volvo.html), которые собственно
и будут загружаться в новые окна.
Код страницы ford.html будет следующим:
<html>
<head>
<title>javascript окно</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<img src="images/ford.jpg" width="300">
<input type="button" value="Закрыть" onClick="close_pict()">
</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 и тогда все бы это появилось в нашем окне.
Здесь же можно указать ряд других параметров:
location выводить строку URL
scrollbars добавлять линейку прокрутки, если документ не помещается на экране
resize позволять пользователю изменять размер окна
Если какие-либо параметры опущены (в нашем примере, это три только что перечисленных), то из значение приравнивается к no. Обратите внимание, что все параметры перечисляются через запятую, НО БЕЗ ПРОБЕЛА!
В последней функции, мы использовали метод close(), который закрывает текущее окно.
Посмотрите на пример в действии:
У объекта window, кроме методов open() и close(), как вы понимаете,
есть и другие. С одним из них, методом alert (), мы уже сталкивались не раз. Давайте посмотрим, какие еще
полезные методы есть у этого объекта:
confirm
Показывает диалоговое окно с указанным сообщением и кнопками "OK" и "Cancel". Сообщение должно побуждать пользователя принять решение. Подтверждение возвращает методу true, если пользователь выбирает "OK" или false если пользователь выбирает "Cancel".
Синтаксис:
Пример:
пусть у нас есть какая-нибудь кнопка "Открыть окно" и мы хотим, чтобы по щелчку по ней появлялось диалоговое окно, позволяющее уточнить действительно ли мы хотим его открыть (для примера пусть открывается окно с изображением Volvo из предыдущего примера).
Как видите, теперь окно с картинкой открывается только в том случае, если мы выбрали "OK" в диалоговом окне.
Код html-страницы для этого примера прост:
<html>
<head>
<title>javascript окно</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form name="forma14">
<input type="button" value="Открыть окно" onClick="choiceOf();">
</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"
(т.е. метод вернул истину (true)).
Хотелось бы пояснить один нюанс, в программировании в условии оператора if, если метод возвращает либо истину (true), либо ложь (false), часть ==true опускается. Иными словами вместо:
(confirm("Вы действительно хотите открыть окно?")==true)
пишется:
(confirm("Вы действительно хотите открыть окно?"))
prompt
Этот метод отображает диалоговое окно ввода пользователя.
Синтаксис:
где
[] - означают, что параметр необязателен, т.е. его можно опустить.
Пример:
Нажмите на кнопку ниже:
Я думаю, вы догадались, что мы хотим сделать. Мы хотим, чтобы пользователь ввел свое имя в диалоговом окне, после чего мы
поздороваемся с ним по имени.
* По необъяснимым причинам этот пример в IE7 работает через раз. Если у Вас не сработало, то откройте этот урок, например,
в FireFox.*
Итак, код html-страницы как всегда прост:
<html>
<head>
<title>javascript окно</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form name="forma15">
<input type="button" value="Давай знакомиться!" onClick="acquaintance()">
</form>
</body>
</html>
Впрочем, код функции тоже несложен:
function acquaintance(){
var YouName=prompt("Как тебя зовут?", "Напиши здесь свое имя.");
alert("Привет "+YouName);
}
Как видите, здесь мы использовали два метода объекта window: сначала метод prompt,
который вернул введенное пользователем имя в переменную YouName, а затем - метод alert, который
отобразил окно сообщений, в котором мы и поздоровались с пользователем по имени.
setTimeout
Этот метод делает что-либо по истечении указанного в миллисекундах промежутка времени.
Синтаксис:
Пример:
Пусть при нажатии на некоторую кнопку "Можно начинать?", через 3 секунды появляется окно сообщений с текстом "Начинайте!".
Итак, код html-страницы:
<html>
<head>
<title>javascript окно</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form name="forma16">
<input type="button" value="Можно начинать?" onClick="setTimeout('startMessage()',3000)">
</form>
</body>
</html>
Да, именно здесь мы и применим этот метод. Так мы укажем, что функция startMessage() должна сработать через 3 секунды.
Код самой функции прост:
function startMessage(){
alert("Начинайте!")
}
Для того, чтобы отключить задержку таймера, установленную с помощью метода setTimeout используется следующий метод
объекта window:
clearTimeout
Этот метод отключает таймер, установленный при помощи метода setTimeout.
Синтаксис:
где
timerID - уникальный идентификатор таймера, полученный при его установке.
Давайте немножно переделаем наш последний пример, а именно сделаем две кнопки "Можно начинать?" и "Отменить вопрос":
Теперь, если нажать на кнопку "Можно начинать?", а затем, не дожидаясь появления окна сообщений, нажать на кнопку "Отменить вопрос",
то окно сообщений не появится вовсе.
При этом мы изменили только html-код страницы на следующий:
<html>
<head>
<title>javascript окно</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form name="forma17">
<input type="button" value="Можно начинать?" onClick="timer1=setTimeout('startMessage()',3000)">
<input type="button" value="Отменить вопрос" onClick="clearTimeout(timer1)">
</form>
</body>
</html>
Обратите внимание, что действие метода setTimeout происходит однократно. Если же мы хотим,
чтобы какое-либо событие повторялось через определенные промежутки времени, то нам понадобится следующий метод:
setInterval
В отличие от setTimeout, этот метод выполняет код много раз, через равные промежутки времени, пока не будет остановлен при помощи метода clearInterval.
Синтаксис:
где
timerID - уникальный идентификатор таймера, полученный при его установке.
Давайте применим этот метод к предыдущему примеру:
<html>
<head>
<title>javascript окно</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form name="forma18">
<input type="button" value="Можно начинать?" onClick="timer2=setInterval('startMessage()',3000)">
<input type="button" value="Я понял!" onClick="clearInterval(timer2)">
</form>
</body>
</html>
Теперь посмотрите, как это работает (прежде, чем нажимать на кнопку "Я понял", убедитесь, что окно сообщений открывается
каждые 3 секунды):
Ну вот собственно и все, мы рассмотрели методы объекта Window, надеюсь они вам пригодятся в вашей работе.
Собственно, на этом подошли к концу и наши уроки по JavaScript. Конечно, мы не рассмотрели все возможности этого языка, но как показывает практика, этого и не нужно. Все самое необходимое мы узнали, вы вполне в состоянии писать сценарии на этом языке.
Практика, практика и еще раз практика, а если в процессе у вас возникнут вопросы, то ответы на них без труда можно найти при помощи того же поисковика Google. Целью же наших уроков было ввести Вас в мир JavaScript и показать его основные возможности.
Но не спешите закрывать эту страницу. Как правило, сайтостроителей не интересуют детали реализации того или иного сценария, гораздо больше интересует возможность использовать уже готовые скрипты. Многие пользуются такими шаблонами, даже не вникая в основы JavaScript, что на мой взгляд не совсем правильно (ведь если что-то начнет работать не так, у таких любителей не будет возможности разобраться и поправить).
Другое дело, если использовать специальные библиотеки, которые заметно облегчают жизнь. Что такое библиотека? Это некий набор многократно используемых функций.
Ведь понятно, что для сайта, например, нужны графические эффекты. Вот кто-то постарался, написал, проверил и выложил это для всеобщего использования. Т.е. кто-то уже написал и протестировал в работе практически весь код, выполняющий определенные действия. Такие функции и объединяют в библиотеки. От вас же требуется только научиться использовать эти библиотеки для своих нужд. И тогда, может оказаться, что знаний, полученных в этих уроках по JavaScript вам более, чем достаточно.
Наиболее популярными библиотеками JavaScript являются Prototype и jQuery. Обусловлено это тем, что они предоставляют кросс-браузерный интерфейс к методам DOM (объектная модель документа). Т.е. используя эти библиотеки, Вы вряд ли столкнетесь с ситуацией, когда в одном браузере сценарий работает, а в другом - нет. А это очень большой плюс.
Лично я использую jQuery, а потому работе именно с этой библиотекой и будет посвящен отдельный курс уроков. Надеюсь, что и Вам эта библиотека придется по душе. А потому, до встречи в уроках jQuery.
Предыдущий урок Вернуться в раздел
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Главная → Уроки JavaScript → Урок 15. Работа с окнами
JavaScript - Урок 15. Работа с окнами
Работу с окнами мы рассмотрим на примере.Пусть у нас имеется страница, на которой расположены кнопки с названиями автомобилей и мы хотим, чтобы по щелчку по кнопке открывалось окно с картинкой этого автомобиля.
Код html-страницы будет следующим:
Код страницы ford.html будет следующим:
В наших функциях мы будем использовать два метода объекта window - open() и close(). Первый создает новое окно, второй - закрывает его.
На странице script.js напишем код функций, а затем разберем его:
У этого метода существует три параметра, каждый из которых заключается в кавычки:
- первый параметр указывает страницу, которую нужно загрузить в окно (например, ford.html),
- второй параметр задает имя открываемому окну (в нашем примере display_ford),
- третий параметр позволяет нам управлять процессом создания окна. Здесь можно задать размеры окна, указать, должно ли новое окно иметь строку статуса, панель инструментов или меню. В нашем примере, мы создали окно шириной 400 и высотой 300 пикселов, без строки статуса, панели инструментов и меню. А могли бы вместо no написать yes и тогда все бы это появилось в нашем окне.
Здесь же можно указать ряд других параметров:
location выводить строку URL
scrollbars добавлять линейку прокрутки, если документ не помещается на экране
resize позволять пользователю изменять размер окна
Если какие-либо параметры опущены (в нашем примере, это три только что перечисленных), то из значение приравнивается к no. Обратите внимание, что все параметры перечисляются через запятую, НО БЕЗ ПРОБЕЛА!
В последней функции, мы использовали метод close(), который закрывает текущее окно.
Посмотрите на пример в действии:
confirm
Показывает диалоговое окно с указанным сообщением и кнопками "OK" и "Cancel". Сообщение должно побуждать пользователя принять решение. Подтверждение возвращает методу true, если пользователь выбирает "OK" или false если пользователь выбирает "Cancel".
Синтаксис:
confirm ("сообщение")
Пример:
пусть у нас есть какая-нибудь кнопка "Открыть окно" и мы хотим, чтобы по щелчку по ней появлялось диалоговое окно, позволяющее уточнить действительно ли мы хотим его открыть (для примера пусть открывается окно с изображением Volvo из предыдущего примера).
Код html-страницы для этого примера прост:
Хотелось бы пояснить один нюанс, в программировании в условии оператора if, если метод возвращает либо истину (true), либо ложь (false), часть ==true опускается. Иными словами вместо:
prompt
Этот метод отображает диалоговое окно ввода пользователя.
Синтаксис:
prompt(сообщение, [значение по умолчанию])
где
[] - означают, что параметр необязателен, т.е. его можно опустить.
Пример:
Нажмите на кнопку ниже:
Итак, код html-страницы как всегда прост:
setTimeout
Этот метод делает что-либо по истечении указанного в миллисекундах промежутка времени.
Синтаксис:
setTimeout (что делать, время в миллисекундах)
Пример:
Пусть при нажатии на некоторую кнопку "Можно начинать?", через 3 секунды появляется окно сообщений с текстом "Начинайте!".
Код самой функции прост:
clearTimeout
Этот метод отключает таймер, установленный при помощи метода setTimeout.
Синтаксис:
clearTimeout (timerID)
где
timerID - уникальный идентификатор таймера, полученный при его установке.
Давайте немножно переделаем наш последний пример, а именно сделаем две кнопки "Можно начинать?" и "Отменить вопрос":
При этом мы изменили только html-код страницы на следующий:
setInterval
В отличие от setTimeout, этот метод выполняет код много раз, через равные промежутки времени, пока не будет остановлен при помощи метода clearInterval.
Синтаксис:
timerID=setInterval(что делать, время в миллисекундах)
где
timerID - уникальный идентификатор таймера, полученный при его установке.
Давайте применим этот метод к предыдущему примеру:
Собственно, на этом подошли к концу и наши уроки по JavaScript. Конечно, мы не рассмотрели все возможности этого языка, но как показывает практика, этого и не нужно. Все самое необходимое мы узнали, вы вполне в состоянии писать сценарии на этом языке.
Практика, практика и еще раз практика, а если в процессе у вас возникнут вопросы, то ответы на них без труда можно найти при помощи того же поисковика Google. Целью же наших уроков было ввести Вас в мир JavaScript и показать его основные возможности.
Но не спешите закрывать эту страницу. Как правило, сайтостроителей не интересуют детали реализации того или иного сценария, гораздо больше интересует возможность использовать уже готовые скрипты. Многие пользуются такими шаблонами, даже не вникая в основы JavaScript, что на мой взгляд не совсем правильно (ведь если что-то начнет работать не так, у таких любителей не будет возможности разобраться и поправить).
Другое дело, если использовать специальные библиотеки, которые заметно облегчают жизнь. Что такое библиотека? Это некий набор многократно используемых функций.
Ведь понятно, что для сайта, например, нужны графические эффекты. Вот кто-то постарался, написал, проверил и выложил это для всеобщего использования. Т.е. кто-то уже написал и протестировал в работе практически весь код, выполняющий определенные действия. Такие функции и объединяют в библиотеки. От вас же требуется только научиться использовать эти библиотеки для своих нужд. И тогда, может оказаться, что знаний, полученных в этих уроках по JavaScript вам более, чем достаточно.
Наиболее популярными библиотеками JavaScript являются Prototype и jQuery. Обусловлено это тем, что они предоставляют кросс-браузерный интерфейс к методам DOM (объектная модель документа). Т.е. используя эти библиотеки, Вы вряд ли столкнетесь с ситуацией, когда в одном браузере сценарий работает, а в другом - нет. А это очень большой плюс.
Лично я использую jQuery, а потому работе именно с этой библиотекой и будет посвящен отдельный курс уроков. Надеюсь, что и Вам эта библиотека придется по душе. А потому, до встречи в уроках jQuery.
Предыдущий урок Вернуться в раздел
Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.
|
Код кнопки: |
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
|
|