 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
Тема: Работа с различными функциями
План:
1. Вводные замечания.
2. Работа с различными функциями.
1. Вводные замечания.
В процессе программирования таких задач как: запустить «бегущую строку», запрограммировать реакцию на определенные действия пользователя или просто автоматизировать обновление страницы, чтобы на ней всегда стояло сегодняшнее число или чтобы браузер сам определял дату последнего обновления. А может быть, пускай страница сама дает рекомендации, каким браузером ее лучше просматривать?..
Для решения этих задач нужно воспользоваться специальным языком программирования, который будет понятен браузеру. Именно такие возможности и предоставляет «язык сценариев» JavaScript.
По имеющимся данным, оба последних релиза (5.x и 6.0) браузера Opera поддерживают JavaScript не выше версии 1.3. Аналогичная ситуация сложилась и с Internet Explorer 5.
Для упрощения поставленной задачи мы будем ориентироваться на два браузера: Internet Explorer 5 и Opera 5. Одним из преимуществ JavaScript является то, что код выполняется всегда - независимо от того, поддерживает браузер язык Java или нет. Поддержка JavaScript реализована во многих современных браузерах: Internet Explorer, Netscape Navigator, Opera…
К сожалению, JavaScript (как, впрочем, и Java) не лишен недостатков. Основных минусов два.
Первый заключается в том, что эти «умные» программы способны выполнять на ПК пользователя разные действия. Так, случайно попав на сайт какого-нибудь недоброжелателя, можно лишиться паролей доступа к сети или номеров электронных кредиток.
Второй недостаток - невозможность защитить код веб-страницы. Любой желающий может просмотреть ее HTML-код (вместе с JavaScript), скопировать интересующие его фрагменты и использовать их в личных целях.
2. Работа с различными функциями
Как же работают странички с JavaScript? Структура веб-страницы с JavaScript практически не отличается от страницы без сценариев. Нужно только вставить в определенную область HTML-документа необходимый код. В общем случае структура HTML-страницы может иметь такой вид:
<HTML>
<HEAD>
<TITLE> Заголовок </TITLE>
<SCRIPT language="JavaScript">
function FFF1() {
<!—тело функции 1 -->
}
<!--..... -->
function FFFn() {
<!-- тело функции n -->
}
</SCRIPT>
</HEAD>
<BODY>
<!-- тело веб-страницы:-->
<!--обращение к функциям FFF1(),...FFFn() -->
</BODY>
</HTML>
Рассмотрим простейший вариант. Браузер загружает страницу, которая выдает какое-нибудь сообщение (например, «С Днем рождения!»). Для этого можно использовать следующий код:
<HTML>
<HEAD>
<TITLE> Приветствие </TITLE>
<BODY>
<!-- Ваш комментарий... -->
<SCRIPT language="JavaScript">
alert('С Днем рождения!')
</SCRIPT>
</HEAD>
</BODY>
</HTML>
В данном случае использована стандартная функция alert. В качестве аргумента ей передается строковая переменная, содержимое которой отображается в отдельном окне. Кстати, в данном случае кавычки в строке <SCRIPT language="JavaScript"> можно опустить и вообще сократить код до минимума, оставив лишь <SCRIPT>.
Строка <SCRIPT language="JavaScript"> выполняет несколько функций. Во-первых, она информирует браузер, что фрагмент кода написан на языке JavaScript, а не на VBScript. Последний поддерживается далеко не всеми браузерами.
Во-вторых, браузеру сообщается, что здесь расположен фрагмент встроенного сценария на JavaScript, который нужно выполнить. «Сообразительные» браузеры последних версий различают и версию языка.
Комментарии внутри скриптов не отличаются от обычного HTML. Началом служит комбинация символов <!--, концом — -->. Однако можно использовать и стиль комментариев, принятый в C++, две косые (//).
В нашем примере фрагмент функции можно было бы записать так:
<SCRIPT language="JavaScript">
<!—
alert('С Днем рождения!')
//-->
</SCRIPT>
Данная «добавка» никоим образом не влияет на выполнение сценария. Однако для упрощения все последующие фрагменты кода будут без этих символов.
Вернемся к самой программе. В ходе загрузки нашего HTML-файла откроется дополнительное окно с приветствием «С Днем рождения!» и единственной кнопкой OK. Однако если на страничке используется несколько различных функций, обращающихся то к одной, то к другой подпрограмме, то будет корректнее (и с точки зрения программирования, и для наглядности) использовать именно подпрограммы-функции. В таком случае данный фрагмент кода будет выглядеть немного иначе:
<HTML>
<HEAD>
<TITLE> Приветствие </TITLE>
<SCRIPT language="JavaScript">
function hellotoyou() {
alert('С Днем рождения!');
return true
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!-- вызов функции приветствия -->
hellotoyou()
</SCRIPT>
</BODY>
</HTML>
Функция обычно возвращает в вызывающую программу какое-то значение. Поэтому ее последней строкой является оператор return. Впрочем, при отсутствии необходимости его можно пропустить. Конечно, вызвать функцию из основного тела программы можно и с помощью гиперссылки (хотя такой вариант я бы не рекомендовал):
<BODY>
<P>Для отображения приветствия щелкни <A href="javascript:hellotoyou()"> здесь!</A>
</BODY>
Но после окончания работы функции некоторые браузеры (например, Internet Explorer) будут «ругаться», пытаясь загрузить из сети какой-то файл. А вот с Opera и Navigator 6 этого не произойдет.
Этот фрагмент кода можно сделать более корректным с точки зрения IE и Opera, немного изменив содержимое строки в основном теле программы, например, так:
<P>После нажатия появится еще одно окно... щелкни <A href="javascript:void(0);" onClick="hellotoyou();"> здесь!</A>
Теперь программа корректно функционирует и в Internet Explorer 5, и в Opera 5, и в Navigator 6. В более ранних версиях Opera (3.21-3.62) код также работоспособен, но там появляется «лишнее» окно с сообщением javascript execution failed. Впрочем, я думаю, что таким «дефектом» можно пренебречь. А если хотите от него избавиться - просто установите более новый релиз.
Вернемся к оператору return. Сделаем так, чтобы сообщение выводилось в текущем окне. Тогда код примера примет вид:
<HEAD>
<!--..... -->
<SCRIPT language="JavaScript">
function hellotoyou() {
return ('С Днем рождения!');
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
document.write (hellotoyou());
</SCRIPT>
</BODY>
Вызов функции осуществляется при помощи оператора вывода на экран document.write(). Сама же функция состоит всего из одного оператора, возвращающего значение строковой переменной. Приветствие в данном случае появится не в отдельном окне, а прямо в основном окне браузера.
Попытаемся изменить код таким образом, чтобы сообщение выводилось не в теле основной программы, а в вызываемой функции. Как это сделать? Очень просто:
<SCRIPT language="JavaScript">
function hellotoyou() {
document.write('С Днем рождения!');
return true;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
hellotoyou();
</SCRIPT>
</BODY>
Стандартный черный текст на белом фоне не очень-то привлекателен. Добавим цвета. Цвета и размер шрифтов, цвет фона и ссылок, а также другие атрибуты достаточно «прописать» в том же операторе document.write(). Например, сделаем черный текст на фоне aquamarine, а отдельные слова приветствия выделим синим. Код будет выглядеть так:
<SCRIPT language="JavaScript">
function hellotoyou() {
document.write('<BODY text="#000000" link="#4040C0"
vlink="#0080FF" alink="#FF0000" bgcolor="#7FFFD4">');
document.write("<FONT face=Arial size=3>");
document.write('С Днем');
document.write("<FONT color=blue><U><B> рождения,</B></U></FONT>, программер!");
document.write("</FONT></BODY>");
return true; }
</SCRIPT>
Для того чтобы иметь возможность использовать кавычки в тексте, выводимом через функцию document.write(), можно поступить так. Общее «обрамление» сделать с помощью двойных кавычек, а апострофы и т. п. внутри текста - одинарными или наоборот. Хотя можно использовать и зарезервированные условные обозначения некоторых символов. Так, двойным кавычкам соответствует комбинация (так называемое внутреннее представление ESC-кода) u0022, одинарным - u0027, обратной косой черте - u005c. К сожалению, при просмотре страничек в Opera такой вариант «не проходит». Чтобы удовлетворить одновременно оба браузера, можно использовать следующие ESC-последовательности: соответственно \", \' и \. Для двойных кавычек во всех трех браузерах можно использовать символ ". Эти рекомендации справедливы и для Navigator 6.2.
Особо хотелось бы обратить внимание на составление скриптов. На ошибку в HTML-коде иногда укажет сам браузер. Если же ошибиться даже одной буквой в коде скрипта - например, написать:
<SCRIPT language="JavaSсrit"> вместо JavaSсript,
браузер преспокойно это «проглотит». В лучшем случае код не будет выполняться. В худшем может «зависнуть» компьютер. Хорошо, если собственный. А если вы уже успели разместиться на веб-страничке в интернете?..
Теперь попробуем сделать собственное окно с приветствием. Размер и содержимое придумаем сами. Передвинем сообщение немного вниз - на 50 пикселей (topMargin=50) - и «отцентрируем». Для этого напишем следующий код:
<BODY text="#000000" bgcolor="#7FFFD4" topmargin=50 marginwidth=10 marginheight=0>
<A name="_top"></A>
<CENTER>
<SCRIPT language="JavaScript">
<!—
function OpenWin() {
myWin1=window.open("", "top_", "width=500, height=400, status=no, toolbar=no, resizable=yes, scrollbars=yes, menubar=yes");
document.ss.submit();
}
// -->
</SCRIPT>
<BR>
<FORM name="ss" method=post action="programr.htm" target="top_">
<INPUT type="hidden" name="doc_number" value="" ></input>
</FORM>
<PRE class="left">
<FONT size=3>
С Днем рождения, <A href="javascript:OpenWin()"><U><B>программер!</B></U></A>
</FONT>
</PRE>
</BODY>
При загрузке странички появится уже знакомое нам приветствие. Выделение слова «программер» намекает посетителю на то, что, если по нему щелкнуть, откроется второе окно. Функция OpenWin() использует стандартную функцию window.open() для создания и открытия окна шириной 500 и высотой 400 пикселей. Для удобства и «сжатия» этого окна мы отключили отображение нижней строки состояния, где обычно выводятся сообщения о загрузке страницы, а также окно с навигационными кнопками.
Если щелкнуть на слове «программер», откроется файл programr.htm. Его HTML-код может быть, например, таким:
<HTML>
<HEAD>
<TITLE> Словарик </TITLE>
</HEAD>
<BODY text="#000000" bgcolor="#FFFFFF">
<P> <U><B>Программер</B></U> (жарг.) - программист.
</BODY>
</HTML>
Правда, здесь есть один недостаток. Для того чтобы закрыть «словарь», необходимо зайти в меню и выбрать команду Файл -- Закрыть. Согласитесь, это довольно неудобно. Можно ли автоматизировать этот процесс? Конечно. Для этого нужно создать, например, радиокнопку, которая будет вызывать соответствующую функцию (которая называется window.close()):
<BODY text="#000000" bgcolor="#FFFFFF">
<P> <U><B>Программер</B></U> (жарг.) - программист.
<CENTER><FORM>
<INPUT type="button" value="Закрыть" onClick="window.close()">
</FORM></CENTER>
<NOSCRIPT>
<I>Используйте кнопку "Возврат"/"BACK" вашего браузера для возврата на предыдущую страницу.</I>
</NOSCRIPT><BR clear="all">
</BODY>
Вместо функции window.close() можно использовать self.close().Обе отлично справляются со своими обязанностями и в Internet Explorer, и в Opera. Кстати, для Opera можно написать просто close().
Конечно, для удобства нашу программу желательно дополнить еще небольшим фрагментом, с помощью которого можно было бы спросить юзера, желает ли он закрыть окно или нет? Для этого достаточно внести в код такие косметические изменения:
<HTML>
<HEAD>
<TITLE> Словарик с кнопкой закрытия окна. Вариант с запросом. </TITLE>
<SCRIPT language="JavaScript">
<!—
function OnExit() {
if (confirm ("Вы действительно хотите закрыть это окошко?"))
top.close();
}
//-->
</SCRIPT>
</HEAD>
<BODY text="#000000" bgcolor="#FFFFFF">
<P> <U><B>Программер</B></U> (жарг.) — программист.
<CENTER><FORM>
<INPUT type="button" value="Закрыть" onClick="OnExit()">
</FORM></CENTER>
<NOSCRIPT>
<I>Используйте кнопку "Возврат"/"BACK" вашего браузера для возврата на предыдущую страницу.</I>
</NOSCRIPT><BR clear="all">
</HEAD>
</BODY>
</HTML>
Для обработки запроса здесь используется стандартная функция confirm(). За вызов функции-обработчика запроса OnExit() отвечает оператор onClick.
А можно ли организовать навигацию по веб-страницам - например, возврат на предыдущую страницу - без использования стандартных кнопок браузера? Конечно. Для этого достаточно «повесить» на каждую страничку соответствующую кнопку перехода:
<CENTER><FORM>
<INPUT type="button" value="Возврат" onClick="history.go(-1)">
</FORM></CENTER>
<NOSCRIPT>
<I>Используйте кнопку "Возврат"/"BACK" вашего браузера для возврата на предыдущую страницу.</I>
</NOSCRIPT><BR clear="all">
Вместо оператора history.go(-1) можно использовать history.back(1). Результат будет одинаковым и в IE, и в Opera.
Теперь, похоже, все в порядке. Кстати, что означает текст между тегами <NOSCRIPT> и </NOSCRIPT>? Дело в том, что некоторые браузеры не поддерживают JavaScript и, следовательно, могут не отобразить нашу кнопку. И это относится не к какой-то экзотике, а к обычным браузерам. Например, если отключить выполнение JavaScript, указанная строка не будет видна в старой версии 3.x и в новой 5.x Internet Explorer. В таком случае нужно дать пользователю «руководство к действию».
При создании окна используется несколько параметров. Давайте разберемся, для чего они предназначены. Для активации параметра достаточно присвоить ему значение. Описания некоторых параметров, использованных в нашем примере, представлены в таблице 1.
| Таблица 1. | ||
| Параметр | Значение | Описание |
| width | ширина окна в пикселях | |
| height | высота окна в пикселях | |
| status | no | не показывать строку состояния, в которой отображаются сообщения о загрузке страницы |
| toolbar | no | отключить панель навигационных кнопок. Этот режим работает в IE5 и Navigator 6.2, но не в Opera, так как в этом браузере открывается новое окно, а не копия старого (как в IE) |
| menubar | не отображать строку меню. Как и предыдущий параметр, работает в IE и Navigator (так как открывается еще одна копия браузера), однако в Opera (3 и 5) эффекта не дает | |
| scrollbars | yes | отображать полосы прокрутки |
| resizable | yes | разрешение изменять размер окна. В Opera эффекта не дает |
| location | yes | показывать URL, по которому обращается браузер (в т. ч. локальные имена файлов). Имеет смысл использовать в IE и Opera версии не ниже 5, но не в Opera 3 (там адресная строка всегда доступна) |
| directories | yes | отображать в строке адреса меню ссылок (только для Internet Explorer и Navigator) |
Теперь немного изменим текст программы, демонстрирующей открытие окна. Пусть текст приветствия будет доступен только при загрузке страницы с отключенной графикой. Если же графика включена, на месте приветствия будет небольшая картинка (назовем ее abc.gif), по которой нужно будет щелкнуть для просмотра «словарика».
<HTML>
<HEAD>
<TITLE> Приветствие </TITLE>
<SCRIPT language="JavaScript">
<!—
function mw_open() {
var frame1 = window.open ("program2.htm", "frame1",
"copyhistory=0, directories=0, height=500, location=0,
menubar=0, scrollbars=yes, status=0, toolbar=0, width=400");
frame1.focus();
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFF0" marginwidth=0 marginheight=0 topmargin=0 leftmargin=0 text="#000000" link="#000000">
<A href="#" onClick="mw_open()";>
<NOSCRIPT>
<A href="program2.htm" target="_new">
</NOSCRIPT>
<IMG src="image/abc.gif" width=80 height=50 border=0
vspace=0 hsapce=0 alt="С Днем рождения, программер!">
</A>
<BR> <BR>
</SCRIPT>
</BODY>
</HTML>
Контрольные вопросы:
1. Какими недостатками обладает JavaScript?
2. Опишите структуру веб-страницы с JavaScript.
3. Назначение функции alert?
4. Как сформировать комментарии внутри скриптов?
5. Для чего предназначена функция confirnm()?
Домашнее задание:
[7], с. 50-64
Поиск по сайту: