|
После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть? |
Опубликован: 19.10.2006 | Уровень: для всех | Доступ: свободно
Лекция 13:
Открытие окна с помощью функции
< Лекция 12 || Лекция 13 || Лекция 14 >
Аннотация: Основные функции для манипуляции с окнами.
Ключевые слова: 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()">
< Лекция 12 || Лекция 13 || Лекция 14 >
Елена Сапегова
Эдуард Семынин
|
Здравствуйте. Перестали быть видны лекции и тесты практикума по программированию на JavaScript. Уже второй день из моего аккаунта виден лишь план занятий. В чем может быть проблема?
|
