OpenWin
Рассмотрим задачу номер два.
Техническое задание
Итак, нам нужно, чтобы
при щелчке мышью на ссылке открывалось дополнительное окно браузера, свойства которого можно было бы определить заранее. Неплохо, если это окно можно будет закрыть щелчком по расположенной в нём же ссылке.
Оговорка
Эту задачку можно решить и средствами самого HTML, правда, задать СВОЙСТВА нового окна всё-таки не удастся, да и закрыть его описанным выше способом будет нельзя. Вспомним сначала, что такое ссылка.
<P>
Вот тут у нас с вами <A href="http://www.ya.ru/">ссылка</A>.
</P> Второй вариант:
<P>
<A href="http://www.ya.ru/">
<IMG src="picture22.jpg" width="13" height="26">
</A>
<P>
Не такая уж большая разница, какая часть контента выполнена в виде ссылки: тег <A> присутствует в любом случае, а он-то нам и нужен.
Так вот, задачу можно решить добавлением параметра target в тег <A> (target="zzz"). Вместо zzz можно подставлять одно из трёх зарезервированых значений:
_self
_top
_blank
Значение _self используется в том случае, если новый документ должен быть открыт в том же окне (фрейме), что и исходный; значение _top говорит о том, что новый документ будет открыт в текущем окне браузера, вытеснив из него все фреймы, если такие наличествуют, а значение _blank как раз определяет, что новый документ будет открыт в новом окне, которое откроется специально для этой цели. Но -- как я уже говорил -- управлять параметрами этого окна мы не сможем.
Кстати, список зарезервированных значений не исчерпывается тремя описанными здесь примерами, но за этим -- к терапевту... т. е. к полному руководству.
Здесь нужно добавить, что, во-первых, кроме зарезервированных параметров в качестве target может быть подставлено имя уже существующего окна, а если такого нет -- браузер в большинстве случаев постарается открыть новое окно и загрузить документ туда. Во-вторых, я упоминал фреймы, о которых нам с вами пока что ничего не известно. На данный момент обойдёмся тем, что фреймы -- это окна независимых документов, которые в любом количестве могут находиться в общем для всех них окне браузера. Подробнее об этом мы поговорим несколько позже. В третьих, использование ссылок для открытия нового окна вызвано только тем, что Netscape не в состоянии понять событие onclick (щелчок мышью), если оно происходит не со ссылкой. Internet Explorer делает это с лёгкостью, но нам от этого не легче: скрипты должны работать в любом браузере.
Реализация
Подготовим файл newfile.htm, содержащий следующий код:
<HTML>
<BODY>
<P>
Чтобы закрыть окно, щёлкните <A href="#"
onclick="window.close();">здесь</A>.
</P>
<BODY>
</HTML>
Обратите внимание, что строка с тегом <P> разорвана: ничего страшного, HTML такие вещи переносит спокойно. Странное значение параметра href -- "#" -- нередко используется тогда, когда ссылка как таковая нужна, а переход по ней, даже при случайном щелчке, не нужен.
Далее. В том файле, из которого вы хотите открыть новое окно, нужно сделать две вставки. Первая -- в секции HEAD.
<SCRIPT language="JavaScript">
<!--//
function OpenWin()
//-->
</SCRIPT>
Вторая -- где-нибудь в теле страницы:
<P>
Чтобы открыть новое окно, щёлкните <A href="#"
onclick="OpenWin();">здесь</A>.
</P>
Теперь посмотрим, что у нас с вами получилось. Кроме того, можно щёлкнуть
вот здесь.
Кстати, имейте в виду: закрыть окно таким образом вы сможете только в том случае, если оно было открыто при помощи JavaScript.
О том, какие ещё параметры можно запихать во встроенную функцию window.open, вы прочитаете в руководстве по JavaScript от W3C. ;-)
Объяснения
Функция OpenWin содержит стандартный метод JavaScript window.open, использующийся для открытия нового окна. В качестве параметров мы передаём этому методу (или функции, что почти то же самое):
"newfile.htm" -- имя документа, который должен открыться в новом окне."mywindow" -- имя этого окна для дальнейших ссылок на него. Указывать не обязательно, но пару пустых кавычек ("") всё равно придётся поставить, т. к. стандартный синтаксис предполагает строго определённую последовательность параметров."width=300,height=250,toolbar=no" -- набор стандартных параметров со значениями. В данном случае -- линейные размеры окна и информацию о том, что оно не должно иметь панели инструментов. Заметьте, что значения параметров я пишу без кавычек.
Следующая часть кода (<A href="#" onclick="OpenWin();">здесь</A>) предписывает браузеру исполнить функцию (метод) OpenWin при щелчке на слове здесь, оформленном как пустая ссылка (href="#").
Точно такую же форму записи использует скрипт, размещённый в документе, который открывается в новом окне. Стандартный метод window.close закрывает текущее окно, если оно было открыто с помощью JavaScript. Если мы хотели бы закрыть другое окно, пришлось бы написать mywin.close(), где mywin -- имя окна, которое скрипту предстоит закрыть.
top
Вынос скриптов в отдельный файл
Есть ещё один вариант записи контейнера SCRIPT.
<SCRIPT language="JavaScript" src="myscripts.js"></SCRIPT>
Это означает, что все ваши скрипты могут храниться в отдельном файле с расширением .js. Естественно, в этом случае не нужно писать ключевое слово SCRIPT в самом файле: просто поместите приведённую выше строку в разделе HEAD, и любая функция будет доступна точно так же, как если бы её текст находился прямо на странице. Это удобно ещё и потому, что при возможном изменении скрипта вам не придётся изменять все HTML-файлы, которые на него ссылаются.
top
Заключение
Понятно, что пока ещё ничего не понятно. Собственно, я не давал обет учить вас языку в полном объёме: для этого есть масса умных и полезных книг. Проблема в том, что очень часто у людей, прочитавших такие книги, возникает масса вопросов именно во время первой попытки реализовать свои новые знания на практике. И вот тут, я надеюсь, моё маленькое руководство окажется полезным.
Я рассмотрел варианты решения двух задач, которые чаще всего встречаются при построении веб-страниц. Конечно же, вам нужно знать больше о JavaScript: возможно, именно углублением знаний мы и займёмся на следующем уроке. А сейчас -- напоследок -- несколько правил, которые необходимо помнить во время программирования на языке JavaScript.
1. Язык JavaScript чувствителен к регистру.
Как уже говорилось раньше, переменные temp и Temp для языка JavaScript не одно и то же: у них будут разные значения, поэтому будьте внимательны при написании кода.
2. Каждый оператор должен оканчиваться точкой с запятой.
Теоретически последний оператор блока
3. Не забывайте обрамлять скрипты символами комментария.
... и даже самые старые и негодные браузеры вас полюбят. ;-)
4. Не нужно использовать зарезервированные слова языка JavaScript, давая названия тем объектам, которые создали вы сами.
Иначе возникнет путаница: интерпретатор не будет знать, что вы имели в виду: то ли стандартный метод нужно выполнять, то ли это ваша картинка так называется...
5. Не забывайте о вложенных кавычках.
Во всех конструкциях JavaScript, использующих вложенные кавычки, поступайте так: внешняя пара кавычек двойная -- значит, внутренняя должна состоять из одинарных кавычек. И наоборот. А вообще, если вложений нет, языку JavaScript всё равно, какие кавычки вы используете.
top
