НОУ ИНТУИТ | Практикум по программированию на JavaScript. Лекция 13: Открытие окна с помощью функции

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 19.10.2006 | Уровень: для всех | Доступ: платный

|

Вам нравится? Нравится 87 студентам

| Поделиться |

Поддержать программу

Аннотация: Основные функции для манипуляции с окнами.

Ключевые слова: HTML, ПО, фигурные скобки, команда, URL, браузер, сценарий, имя пользователя, цвет фона

Концепция

В Уроке 11 новое окно открывалось с помощью команды window.open. В окне выводился другой документ HTML, который был указан в скобках.

Сейчас мы попробуем создать функцию, которая откроет новое окно, — причем и новое окно, и все его содержимое будет содержаться в том же документе HTML. То есть, в буквальном смысле слова мы вложим две страницы в одну.

Сценарий

<SCRIPT type="text/javascript">
function openindex()
    {  
var OpenWindow=window.open("", "newwin", "height=300,width=300");
OpenWindow.document.write("<HTML>");
OpenWindow.document.write("<TITLE>Новое окно</TITLE>");
OpenWindow.document.write("<BODY BGCOLOR='00ffff'>");
OpenWindow.document.write("<CENTER>");
OpenWindow.document.write("<font size=+1>Новое окно</font><P>");
OpenWindow.document.write("<a href='http://www.intuit.ru' target='main'>
Эта ссылка<BR> откроется в основном окне</a><p>");
OpenWindow.document.write("<P><HR WIDTH='60%'><P>");
OpenWindow.document.write("<a href='' onClick='self.close()'>
Эта ссылка закроет окно</a><p>");
OpenWindow.document.write("</CENTER>");
OpenWindow.document.write("</HTML>");
}
</SCRIPT>

...и в команде BODY:

onLoad="openindex()"

Результат работы сценария

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

Разбор сценария

Главная часть сценария, содержащая функцию, помещается между тегами <HEAD> и </HEAD>, как большинство функций.

По обычной схеме для функции задается имя openindex(). Затем следуют фигурные скобки. Теперь подходим к основному моменту. Создаем переменную OpenWindow, под которой скрывается команда window.open(). Она выглядит следующим образом:

var OpenWindow=window.open("", "newwin", "height=300,width=300");

Формат знакомый. Единственная разница в том, что не указан URL. Видите пустые парные кавычки? Они говорят браузеру, что он должен искать в сценарии информацию о новом окне, — точно так же, как и в случае отсутствия URL в команде, которая закрывает окно. Оно бы не закрылось, если бы начала загружаться новая страница. То же самое и тут. Браузер стал бы загружать новую страницу, а не выполнять сценарий.

Теперь начинаем создавать страницу HTML, которая будет в новом окне. Вот первая строка текста:

OpenWindow.document.write("<HTML>")

Команда говорит, что строка текста должна быть записана в документ переменной OpenWindow (новое окно) .

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

Помните: когда вы пишете HTML внутри команды document.write, вместо двойных кавычек с подкомандами ставьте одинарные. Иначе будет ошибка.

Наконец обработчик событий onLoad в команде BODY вызывает функцию.

Задание

Написать функцию, которая открывает окно. Документ, который появится в окне должен иметь зеленый фон и заголовок TITLE: "Привет, "имя пользователя", вот твое окно!" Имя пользователя можно узнать с помощью запроса ( prompt ). Разумеется, добавьте еще ссылку, которая закроет окно.

Возможное решение

Сценарий можно взять прямо из сегодняшнего урока и внести несколько изменений:

в начале функции добавить команду prompt ; разбить команду TITLE на три части и внести в нее переменную name ; цвет фона поменять на зеленый.

Вот готовый сценарий:

<SCRIPT type="text/javascript"> 
function openindex()
{ 

var name=prompt("Как вас зовут?","Напишите здесь")

var OpenWindow=window.open("", "newwin", "height=300,width=300,status=yes");

OpenWindow.document.write("<HTML>")
OpenWindow.document.write("<TITLE>")
OpenWindow.document.write("Привет, " +name+ "! Вот ваше окно!")
OpenWindow.document.write("</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR='green'>")
OpenWindow.document.write("<CENTER>")
OpenWindow.document.write("<h2>Новое окно</h2>")
OpenWindow.document.write("<a href='' onClick='self.close()'>
  Эта ссылка закроет окно</a>")
OpenWindow.document.write("</CENTER>")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
}
</SCRIPT>

<body bgcolor="xxxxxx" onLoad="openindex()">

Дальше >>

Авторизоваться

Практикум по программированию на JavaScript