Какое свойство нового окна задается параметром scrollbars

Упражнение 1:

Номер 1

Свойство window.location представляет собой …

Ответ:

&nbsp(1) URL ссылки, на которой находится указатель мыши&nbsp

&nbsp(2) строковое значение, указываюшее адрес текущей страницы&nbsp

&nbsp(3) объект, одно из свойств которого есть адрес текущей страницы&nbsp

&nbsp(4) массив адресов посещенных сайтов&nbsp

Номер 2

Свойство window.navigator представляет собой …

Ответ:

&nbsp(1) свойство, указывающее наличие панели навигации в браузере&nbsp

&nbsp(2) строковое значение, указывающее название и версию браузера&nbsp

&nbsp(3) объект, свойства которого указывают название и версию браузера&nbsp

&nbsp(4) версию браузера Netscape Navigator&nbsp

Номер 3

Свойство window.status представляет собой …

Ответ:

&nbsp(1) URL ссылки, на которой находится указатель мыши&nbsp

&nbsp(2) строку, отображаемую в строке состояния браузера&nbsp

&nbsp(3) значение true/false, обозначающее статус загрузки документа&nbsp

Упражнение 2:

Номер 1

Какое свойство нового окна задается параметром location?

Ответ:

&nbsp(1) наличие строки состояния&nbsp

&nbsp(2) URL-адрес страницы в окне&nbsp

&nbsp(3) наличие адресной строки&nbsp

Номер 2

Какое свойство нового окна задается параметром toolbar?

Ответ:

&nbsp(1) наличие панели инструментов&nbsp

&nbsp(2) наличие полосы прокрутки&nbsp

&nbsp(3) наличие строки состояния&nbsp

Номер 3

Какое свойство нового окна задается параметром scrollbars?

Ответ:

&nbsp(1) наличие панели инструментов&nbsp

&nbsp(2) наличие полосы прокрутки&nbsp

&nbsp(3) наличие строки состояния&nbsp

Упражнение 3:

Номер 1

Какие из перечисленных действий произойдут, если кликнуть по данной ссылке?
<A HREF=”1.htm” onClick=”window.open(‘2.htm’, ‘ku’, ”)”>Ссылка</A>

Ответ:

&nbsp(1) файл 1.htm откроется в новом окне&nbsp

&nbsp(2) файл 1.htm откроется в текущем окне&nbsp

&nbsp(3) файл 2.htm откроется в новом окне&nbsp

&nbsp(4) файл 2.htm откроется в текущем окне&nbsp

Номер 2

Какое из перечисленных действий произойдет, если кликнуть по данной ссылке?
<A HREF=”1.htm” onClick=”window.open(‘2.htm’, ‘ku’, ”);return false;”>Ссылка</A>

Ответ:

&nbsp(1) файл 1.htm откроется в новом окне&nbsp

&nbsp(2) файл 1.htm откроется в текущем окне&nbsp

&nbsp(3) файл 2.htm откроется в новом окне&nbsp

&nbsp(4) файл 2.htm откроется в текущем окне&nbsp

Номер 3

Какие из перечисленных действий произойдут, если кликнуть по данной ссылке?
<A HREF=”1.htm” onClick=”window.open(‘2.htm’, ‘ku’, ”);return true;”>Ссылка</A>

Ответ:

&nbsp(1) файл 1.htm откроется в новом окне&nbsp

&nbsp(2) файл 1.htm откроется в текущем окне&nbsp

&nbsp(3) файл 2.htm откроется в новом окне&nbsp

&nbsp(4) файл 2.htm откроется в текущем окне&nbsp

Упражнение 4:

Номер 1

Выберите ссылки, кликнув по которым, мы закроем текущее окно:

Ответ:

&nbsp(1) <A HREF=”” onClick=”shutdown()”>Щелкните, чтобы закрыть</A>&nbsp

&nbsp(2) <A HREF=”” onClick=”self.close()”>Щелкните, чтобы закрыть</A>&nbsp

&nbsp(3) <A HREF=”” onClick=”document.close()”>Щелкните, чтобы закрыть</A>&nbsp

&nbsp(4) <A HREF=”” onClick=”window.close()”>Щелкните, чтобы закрыть</A>&nbsp

Номер 2

Какие из команд откроют окно, содержащее полосы прокрутки и панель инструментов?

Ответ:

&nbsp(1) window.open(‘1.htm’, ‘ku’, ‘toolbar=yes,scrollbars=yes’)&nbsp

&nbsp(2) window.open(‘1.htm’, ‘ku’, ‘toolbars=yes,scrollbar=yes’)&nbsp

&nbsp(3) window.open(‘1.htm’, ‘ku’, ‘scrollbars=yes,toolbar=no’)&nbsp

&nbsp(4) window.open(‘1.htm’, ‘ku’, ‘scrollbars=yes,menubar=no,toolbar=yes’)&nbsp

&nbsp(5) window.open(‘1.htm’, ‘ku’, ‘status=yes,scrollbars=yes,toolbar=yes’)&nbsp

Упражнение 6:

Номер 1

Определите ошибку:
<A HREF=”1.htm” onClick=”window.open(‘2.htm’, ‘ku’, ‘width=300,status=0’)”>Ссылка</A>

Ответ:

&nbsp(1) ошибка создания окна: не указан параметр height&nbsp

&nbsp(2) ошибка создания окна: неправильно задан параметр status&nbsp

&nbsp(3) имя файла в атрибуте HREF должно совпадать с именем файла в window.open()&nbsp

&nbsp(4) нет ошибки&nbsp

Номер 2

Определите ошибку:

<A HREF=”1.htm” onClick=”window.open(‘2.htm’, ‘ku’,
‘status=yes,scrollbars=1,height=yes’)”>Ссылка</A>

Ответ:

&nbsp(1) ошибка создания окна: не указана ширина открываемого окна&nbsp

&nbsp(2) ошибка создания окна: недопустимое значение параметра height&nbsp

&nbsp(3) нет ошибки&nbsp

Номер 3

Определите ошибку:
<A HREF=”1.htm” onClick=”window.open(“2.htm”, “”, “location=0,menubar=yes”)”>Ссылка</A>

Ответ:

&nbsp(1) ошибка создания окна: недопустимое значение параметра location&nbsp

&nbsp(2) ошибка создания окна: не задано имя окна&nbsp

&nbsp(3) синтаксическая ошибка в аргументах метода window.open()&nbsp

&nbsp(4) нет ошибки&nbsp

Упражнение 7:

Номер 1

Что возвращает метод prompt()?

Ответ:

&nbsp(1) строку, введенную пользователем в окне запроса&nbsp

&nbsp(2) значение true/false&nbsp

&nbsp(3) ничего (т.е. undefined)&nbsp

Номер 2

Что возвращает метод confirm()?

Ответ:

&nbsp(1) строку, введенную пользователем в окне запроса&nbsp

&nbsp(2) значение true/false&nbsp

&nbsp(3) ничего (т.е. undefined)&nbsp

Номер 3

Что возвратит метод confirm(), если пользователь просто закроет окно запроса?

Ответ:

&nbsp(1) значение true&nbsp

&nbsp(2) значение false&nbsp

&nbsp(3) ничего не возвратит (т.е. undefined)&nbsp

&nbsp(4) будет выдана ошибка браузера&nbsp

Упражнение 8:

Номер 1

Что будет, если не указать параметры метода window.open()?

Ответ:

&nbsp(1) будет открыто новое пустое окно&nbsp

&nbsp(2) получим сообщение об ошибке&nbsp

&nbsp(3) отсутствие реакции&nbsp

Номер 2

Что будет, если открыть окно с именем уже существующего окна?

Ответ:

&nbsp(1) будет создано новое окно&nbsp

&nbsp(2) будет выдано сообщение об ошибке&nbsp

&nbsp(3) в новое окно загрузится пустой документ&nbsp

&nbsp(4) окно с этим именем получит фокус и будет возвращена ссылка на это окно&nbsp

Номер 3

Что возвращает метод window.open()?

Ответ:

&nbsp(1) URL-адрес страницы, открытой в новом окне&nbsp

&nbsp(2) объект класса Window, ассоциированный с открытым окном&nbsp

&nbsp(3) имя открытого окна, которое можно использовать в атрибуте TARGET ссылок&nbsp

Упражнение 9:

Номер 1

Что нужно передавать в качестве аргументов методу clearTimeout()?

Ответ:

&nbsp(1) строку, содержащую JavaScript-код, и время отсрочки в миллисекундах&nbsp

&nbsp(2) ссылку на созданный ранее поток вычислений&nbsp

&nbsp(3) ссылку на открытое ранее окно&nbsp

Номер 2

Что нужно передавать в качестве аргумента методу clearInterval()?

Ответ:

&nbsp(1) строку, содержащую JavaScript-код, и интервал отсрочки в миллисекундах&nbsp

&nbsp(2) ссылку на созданный ранее поток вычислений&nbsp

&nbsp(3) ссылку на открытое ранее окно&nbsp

Номер 3

Что делает метод setTimeout()?

Ответ:

&nbsp(1) позволяет однократно выполнить некоторый JavaScript-код с отсрочкой&nbsp

&nbsp(2) позволяет выполнять некоторый JavaScript-код с указанным периодом&nbsp

&nbsp(3) устанавливает текущее время, указанное в аргументе&nbsp

Номер 4

Что делает метод setInterval()?

Ответ:

&nbsp(1) позволяет однократно выполнить некоторый JavaScript-код с отсрочкой&nbsp

&nbsp(2) позволяет выполнять некоторый JavaScript-код с указанным периодом&nbsp

&nbsp(3) устанавливает текущее время, указанное в аргументе&nbsp

Упражнение 10:

Номер 1

Как из окна, открытого с помощью window.open(), обратиться ко 2-й форме окна-предка?

Ответ:

&nbsp(1) window.opener.forms[2]&nbsp

&nbsp(2) window.opener.forms[1]&nbsp

&nbsp(3) self.opener.forms[1]&nbsp

&nbsp(4) window.top.forms[1]&nbsp

Номер 2

Окно разделено на два фрейма с именами left и right. Как из правого фрейма обратиться к 3-й картинке левого фрейма?

Ответ:

&nbsp(1) window.left.document.images[2]&nbsp

&nbsp(2) top.document.left.images[2]&nbsp

&nbsp(3) right.left.document.images[2]&nbsp

&nbsp(4) top.left.document.images[2]&nbsp

&nbsp(5) top.frames[‘left’].document.images[2]&nbsp

&nbsp(6) parent.left.document.images[2]&nbsp

15. Объект Window (продолжение)
методы open(), close()

• метод open() объекта window;
• метод open() объекта document;
• о пользе атрибута name;
• метод close().

Ну что, берём сапоги-скороходы? 43 номер? Или предпочитаете ковёр-самолёт? Вот я Вам и продемонстрировал, как не надо пользоваться методом open(). Знакомо?

Культурнее было бы сделать так (нажмите на эту ссылку и посмотрите).

Два метода open()

С помощью метода open() можно открыть новое окно. В нём может быть или уже существующий документ с указанным адресом, или документ, сгенерированный «на лету» — временное окошко, которое создаётся при вызове метода и перестаёт существовать после закрытия.

Наша «скатерть-самобранка» сгенерирована в функции с использованием заготовленной картинки. Окно сделано в стиле обычных всплывающих окон: заданного и неизменяемого размера, без меню браузера, строки состояния и т.п.

Прежде чем приступим к разбору функции, обращу Ваше внимание на то, что метод open() применяется не только к объекту window, но и к его дочернему объекту document. Но аргументы у этих методов-тёзок разные.

Метод open() объекта window

Синтаксис

[WindowVar =][window].open(“URL”, “windowNAME”, [“windowFeatures”])

Значения в квадратных скобках не обязательные.

WindowVar = — какое-либо имя переменной, на которую можно назначить метод.

window — объект window, который вызывает метод. Мы знаем, что этот «верховный» объект может быть опущен.

“URL” — адрес окна. Если мы открываем существующее окно, то указываем здесь его адрес (в кавычках). Если мы создаём окно «на лету», то ставим плейсхолдер — пустые кавычки.

“windowNAME” — уникальное имя окна. Для чего это нужно, объясню чуть ниже. Если мы не хотим задавать имя, то опять же ставим плейсхолдер в виде пустых кавычек.

“windowFeatures” — параметры окна: размер, наличие/отсутствие панели управления, строки состояния и т.д. Можно не указывать и даже пустых кавычек не ставить. Тогда окно откроется в стандартном виде браузера, как по любой ссылке.

Составляющие аргумента “windowFeatures“

Эти составляющие фактически являются свойствами создаваемого окна.

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

Некоторые из этих свойств добавлялись в новых версиях JavaScript, какие-то, наоборот, исчезали. В разных справочниках встречаются немного разные наборы. Я постараюсь охватить все, какие сумел разыскать, но для подробного выяснения работы некоторых из них всё равно необходим Ваш эксперимент.

Все наиболее употребительные свойства я выделяю красным цветом, а неясные пока мне самому — синим.

Для следующих десяти составляющих указываются конкретные значения в пикселях:

Наиболее употребительными из них являются четыре: width, height, left и top

Для остальных используются булевы значения: yes|no, 1|0 или true|false.

Теперь можете ещё раз нажать на нашу ссылку и исследовать «скатерть-самобранку». Там все булевы параметры по нулям.

Метод open() объекта document

Если мы создаём окно «на лету» — то есть в аргументе “URL” стоят пустые кавычки, мы должны указать, что же всё-таки будет содержаться в нашем окне.

Всё содержимое (текст, картинки и пр.) указывается в аргументе метода document.open().

Синтаксис

document.open ([“mimeType”])

Аргумент [“mimeType“] не обязателен. То есть если мы ничего не укажем, окно всё равно откроется. Но — пустое. Если же мы хотим открыть окно с содержимым, то в этом аргументе надо указать для него код HTML в виде строки, как мы это делали в методе document.write(). И точно так же нельзя разбивать строку.

Если задать для нового окна переменную, то можно использовать document.open() без аргумента, а потом последовательно записать в документ данные, многократно используя document.write():

function openwindow(wd,ht) {
var myWin, name, param;

param = “width=” + wd + “,“;
param = param + “height=” + ht + “,“;
param = param + “top=0,“;
param = param + “left=0,“;
param = param + “toolbar=0,“;
param = param + “status=0,“;
param = param + “menubar=0,“;
param = param + “location=0,“;
param = param + “scrollbars=0,“;
param = param + “resizable=0,“;

myWin=window.open(“”, name, param);

myWin.document.open()
myWin.document.write(“<html><head><title>Название документа</title><style type=’text/css’>p {font-family: Verdana; color: #400000; text-align: center; margin: 3px 6px 3px 6px; font-size: 80%;}</style></head>“);
myWin.document.write(“<body>“);
myWin.document.write(“…..”);
myWin.document.write(“…..”);
myWin.document.write(“…..”);
myWin.document.write(“</body></html>“);

myWin.document.close();
}

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

param = param + “top=0,“;
param = param + “left=0,“;
param = param + “toolbar=0,“;
param = param + “status=0,“;
param = param + “menubar=0,“;
param = param + “location=0,“;
param = param + “scrollbars=0,“;
param = param + “resizable=0,“;

Или совсем кратко:

param += “top=0,“;
param += “left=0,“;
param += “toolbar=0,“;
param += “status=0,“;
param += “menubar=0,“;
param += “location=0,“;
param += “scrollbars=0,“;
param += “resizable=0,“;

Можете взять этот приём на вооружение.

Зачем нужен аргумент name

Действительно, зачем? Это может показаться непонятным, потому что никаких параметров для создания окна он не несёт. Но представим себе такую ситуацию: у нас есть фотоальбом с фотографиями разных размеров, и мы хотим, чтобы по клику на маленькой превьюшке открывалось окно с большой картинкой, заданное строго по размерам этой картинки. А размеры у них, как мы уже договорились, разные. Если пользователь смотрит их по очереди, каждый раз закрывая предыдущую, то никаких проблем не наблюдается. Но, предположим, он захотел открыть сразу две больших картинки, чтобы их сравнить. Вот тут-то может случиться неприятность: новая картинка откроется в окне такого же размера, как и предыдущая, хотя реальный размер фотки совсем другой.

Всё это произойдёт, если мы пренебрегли непонятным аргументом name (дескать, ну его, и без того голова пухнет, поставлю кавычки, и ладно). Пока не закрыто предыдущее окно, его параметры будут находиться в памяти функции при открытии нового окна… если у него нет собственного имени. Если же это имя есть, то функция автоматически переключится на те параметры, которые связаны с этим именем. И картинка откроется правильно.

Так что пользуйтесь этим чудесным аргументом.

Два метода close()

Метод close() также есть и у окна, и у документа. В приведённом выше скрипте мы использовали этот метод для документа, чтобы освободить память компьютера.

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

Давайте, всё же, попробуем написать закрытие всплывающего окна, допустим, кнопкой из коллекции forms().

Вы помните, что наше всплывающее окно было определено переменной myWin. Значит, можно предположить, что код закрывающей кнопки будет выглядеть так:

<button onClick=”myWin.close();”>закрыть</button>

НО

Эта переменная была определена в теле функции openwindow(wd,ht). А событие этой кнопки находится за пределами функции. Значит, программа не будет знать, что такое myWin.

Значит, нужно немного подредактировать начальный скрипт, объявив эту переменную перед функцией:

var myWin;
function openwindow(wd,ht) {
var name, param;

. . .
}

Следующий момент: если всплывающее окно открыто, то кнопка сработает. А если закрыто?..

…Совершенно верно, сгенерирует ошибку.

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

ОТКРЫВАЮЩАЯ КНОПКА:

<button onClick=”openwindow(554,510); document.getElementById(‘zakr’).disabled=false;”>открыть</button>

ЗАКРЫВАЮЩАЯ КНОПКА:

<button id=”zakr” disabled onClick=”myWin.close();”>закрыть</button>

И ещё не всё: хорошо бы, чтобы после закрытия окна кнопка вернулась в первоначальное «тусклое» состояние:

<button id=”zakr” disabled onClick=”myWin.close(); this.disabled=true;”>закрыть</button>

Ключевым словом this можно обратиться к текущему элементу (тому, в чьём событии мы находимся).

А теперь поиграем кнопками:

А почему бы, спросите Вы, не оживить кнопку в самой функции, а не в другой кнопке? Можно. Но вспомним, что это окно у нас само открывается при загрузке файла. И Вы наверняка давно его закрыли крестиком. А от такого закрытия наша кнопка не придёт в первоначальное состояние. Значит, она останется рабочей и будет провоцировать на ошибку. Можете проверить: откройте окно кнопкой и закройте крестиком.

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

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

как открывать и закрывать (культурно и некультурно) всплывающие окна.

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

делать эти самые окна.

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