...
...

Обоюдоострые окна и бегающие строки

Как говорится, раз пошла такая пьянка - режь последний огурец. К сожалению, разработка web-страницы, - по сути, процесс бесконечный и многогранный. Фактически пределов совершенству не существует, как не существует и некого среднего значения. Достаточно неделю-другую попутешествовать в киберпространстве, чтобы понять - в Интернет, если и существуют какие-либо стандарты, то только в области программирования, но никак не в плане оформления или содержания.

Кто берет содержанием при убогом оформлении. Кто за красочностью и внешней "навороченностью" скрывает чрезвычайную убогость наполнения сайта. И вообще, за крайне редким исключением, уже с первого взгляда вполне можно однозначно сказать, кому принадлежит та или иная страница. Фирменные витрины прежде всего демонстрируют профессиональные способности привлеченных программистов и дизайнеров. Хорошо, если там есть что читать, но чаще все-таки они имеют чисто утилитарное значение - "разрекламировать и продать". Частные же страницы чаще всего не пользуются обширным инструментальным или программным арсеналом, а строятся на простых понятиях: вкус при оформлении, владение излагаемым вопросом, хороший подбор красочных иллюстраций.

Однако каждый для себя решает сам, что стоит встраивать в собственный сайт, а что является совершенно излишним. Поэтому, полагаю, стоит слегка коснуться еще некоторых приемов, используемых в оформлении web-страниц с помощью JavaScript. Скажу сразу, в этот раз воспользуюсь некоторыми примерами, опубликованными в Интернет в общеобразовательных целях. Дело в том, что, по моему мнению, усиленный упор на всевозможное программирование чрезвычайно опасен во многих отношениях.

Во-первых, крайне низкая пропускная способность отечественных каналов настолько задерживает загрузку страниц большого объема, что пользователи зачастую теряют к ней всяческий интерес и до конца так и не дожидаются.

Во-вторых, экран, на котором бегают, прыгают, ныряют и самостоятельно преображаются неисчислимые табуны всевозможных объектов, гораздо чаще вызывает раздражение из-за тяжести восприятия. Все, что движется, сильно отвлекает и больше похоже на переполненный паникующими пассажирами вокзал во время пожара. Тут не содержание публикаций читать надо, а немедленно бежать, спасая собственную жизнь.

В-третьих, непомерное увлечение принудительным открытием новых окон для вывода чего-либо не только крайне утомляет, но и способно молниеносно перегрузить ресурсы клиентской машины и вызвать фатальное зависание, при котором единственное действенное средство лечения - перезагрузка. А это означает, что придется заново пробиваться в Интернет без всякой надежды на успех, что мало способствует ее популярности. Я имею в виду положительное ее значение, ибо далеко не у каждого под рукой необъятные размеры оперативной памяти, хорошие материнские платы и высококлассные модемы. Даже если "железо" сможет выдержать такое издевательство, то сам пользователь потеряет контроль за окнами уже минут через пять. Особенно когда нарвется на сайт, злоупотребляющий принудительным открытием новых окон не только для вывода чего-либо, но и при попытке юзера принудительно закрыть копию браузера, в который была вызвана изначальная страница. Понятно, что данный прием используется для максимально долгого удержания посетителя на собственном сайте, только очень уж он смахивает на назойливость в самой крайней степени.

Бегущая строка Очень неплохо на странице смотрится такой прием - бегущая строка. Строка может бежать либо в поле статуса (низ экрана), либо внутри поля формы. Рассмотрим первый пример: <HTML> <!- ady@demos.su, Saturday, January 20, 1996 7:23:31 PM-> <!- Demos WWW cover page -> <HEAD> <TITLE>Welcome to Demos Company - Moscow, Russia</TITLE> <!- yet another scroller.

(C) 1996 Dmitry Altukhov, ady@demos.su -> <!- Use this code for whatever purposes... provided that you retain the copyright notice.

I accept no responsibility for any disasters caused by this monster.

Cannot guess any other cool places for scrollers. And MSIE marquee emulation in JS?! Er... Mozilla clears windows too slow in JS...

-> <SCRIPT LANGUAGE="JavaScript"> <!- roll it var rate, pos=0; function roll(){ var loop, top, msg1; var msg="Hello World"; for(var i=0; i<10; i++){ msg = msg + (" Hello World"); } //move on, make a scrolly... and who said that //scrollers suck?! ;-) top=(130/msg.length)+1; for(loop=0; loop<top; loop++) msg+=""+msg; msg1=msg.substring (pos, pos+130); window.defaultStatus=msg1; if (pos++ == 130) pos=0; //come on, the poor thing can"t roll any faster... buy a Ferrari. ;-) rate=setTimeout("roll()",30); } // that"s all folks ;-) // end -> </SCRIPT> </HEAD> <BODY BACKGROUND="back.gif" BGCOLOR="#FFFFFF" TEXT="#000040" LINK="#000080" VLINK="#400080" ALINK="#FF0000" onLoad="roll()"> .....

</BODY> </HTML> Здесь приведен фрагмент страницы компании "Демос", разработанный Дмитрием Алтуховым (ady@demos.su). Как видно из этого примера, прокрутка осуществляется за счет изменения содержания отображаемой переменной msg1. Запускается бегущая строка в момент загрузки страницы по событию onLoad. Из комментария к примеру следует, что автор не несет ответственности за проблемы, которые может данный скрипт породить при его отображении браузером на компьютере пользователя. Собственно, проблема вызвана применением функции setTimeout. Изначально предполагалось, что браузер, который поддерживает JavaScript, будет исполняться в среде многопоточных операционных систем. В этом случае к моменту порождения нового потока старый уже завершится и setTimeout будет, таким образом, порождать последовательно исполняемые потоки. Однако при реализации JavaScript в Netscape Navigator 2.0 не все было выполнено аккуратно, и setTimeout стала просто "пожирать" ресурсы компьютера. Системы Windows 3.x вообще не являются многопоточными; в них просто происходит переполнение стека при выполнении данного скрипта. Весь вопрос заключается только в том, как быстро "упадет" система, а это зависит от объема исполняемой по setTimeout функции. Самое лучшее, что можно посоветовать, если вдруг на экране появляется прокрутка, - поскорее покинуть такую страницу. Справедливости ради следует отметить, что прокрутку можно организовать и другими способами, поэтому ее появление не обязательно должно вызывать крах системы или браузера.

Прокручивать можно и вертикальные фрагменты. Достигается это за счет использования полей типа TEXTAREA. Рассмотрим второй пример: <HTML> <!- Author: Pavel Khramtsov Date: February 25, 1996 -> <HEAD> <TITLE>Text Block Scrolling</TITLE> <SCRIPT LANGUAGE="JavaScript"> var line_beak = "\n"; var screen = "" //123456789012345678901234567890 screen+= "Будем прокручивать" screen += "Данный фрагмент текста" screen += "В поле типа" screen += "TEXTAREA" screen += "Формы term" for(i=0;i<6;i++) screen += " " var i=0; var j=40; flag = 0 function scroll(){ if( flag== 0){ display_str = "" for(k=0;k<11;k++){ display_str += screen.substring(i,j) i+=40; j=i+40; if(i>400) i = 0 } window.document.term.work_field.value = display_str; i += 40; if(i>400) i =0 } id = setTimeout("scroll()",1000); return true } function change_button(){ if(flag==0){ flag = 1; return true } if(flag == 1){ flag = 0; return false } } </SCRIPT> </HEAD> <BODY onLoad="scroll()"> <CENTER> <H1>Text Block Scrolling.</H1> <HR> <FORM NAME=term> <TEXTAREA NAME=work_field COLS=40 ROWS=10 WRAP=ON></TEXTAREA> <P> <INPUT NAME=alarm VALUE="Start/Stop" TYPE=button onClick="change_button()"> </FORM> </CENTER> <HR> </BODY> </HTML> Собственно, все организовано так же, как и в предыдущем примере, только прокрутка осуществляется в поле формы; для этого поля введен параметр переноса текста на новую строку, ширина поля подобрана под размер выводимых строк. Прокрутка осуществляется как по событию onLoad, так и при нажатии на кнопку Start/Stop. В данном случае не надо немедленно покидать страницу с прокруткой - достаточно просто ее остановить.

Минимизация-максимизация окна и его удаление Выполнение вычислений и работа с таблицами весьма популярны, но не столь значимы, как управление окнами браузера. Рассмотрим пример такого управления. Идея состоит в том, чтобы средствами JavaScript реализовать "свертывание" и "развертывание" окна браузера.

Примеры демонстрируют связанные друг с другом HTML-страницы.

Пример три: <HTML> <!- Author: Pavel Khramtsov Date: May 16, 1996 -> <HEAD> <script> function max_window(){ window.open("iconize.htm","new", "toolbar=yes,scrollbars=yes,directories=yes, status=yes,menubar=yes,resizable=yes, location=yes,width=700,height=500") window.close() } </script> </HEAD> <BODY> <center> <a href="" onClick="max_window()"> <imgsrc=back.jpg></a>kg74309a.p> </center> </BODY> </HTML> На примере три показана максимизация окна.

Данный фрагмент разворачивает (восстанавливает) свернутое окно. Причем маленькое окно также удаляется. Собственно, первая страница - это файл iconize.htm, а вторая - test_icon.htm.

Использование окон для построения HELP Пример четыре: <HTML> <!- Author: Pavel Khramtsov Date: March 5, 1996 -> <HEAD> <TITLE>Registration</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!- The JavaScript Functions Definition function help_win() {Help = window.open("reg_help.htm","Help","scrollbars=yes,resizable=yes") } function main_menu() {Main_menu = window.open("main_m.htm","Main_menu") } // The end of JavaScript Functions //Definition -> </SCRIPT> </HEAD> <BODY> <CENTER> <TABLE> <tr><th><img src="kg74309b.gif"></th> <TH><H2>ISTC. Project RADLEG(#245)</H2> RRC "Kurchatov Institute"<BR> <I>Dec, 25, 1995</I> </TH></TR> </TABLE> </CENTER> <HR> <CENTER> <h2>Registration Form</h2> <hr> ......

Текст страницы .....

<hr> <FORM NAME=help_call> <TABLE BORDER=0> <TR> <TD><INPUT NAME=next TYPE=button VALUE=Next onClick="main_menu()"> </TD> <TD><INPUT NAME=help TYPE=button VALUE=Help onClick="help_win()"></TD> </TR> </TABLE> </FORM> <hr> </CENTER> </BODY> </HTML> В четвертом примере описан вызов, который приводит к открытию окна контекстного help и загрузки в него HTML-страницы. На этой странице есть форма с кнопкой close, при нажатии на которую текущее окно закрывается. Так как в данном случае текущим является окно с help, то закрывается именно оно. Все это замечательно, если не применяются фреймы в help. При использовании фреймов текущим окном будет не главное окно, а окно фрейма. Если help состоит из нескольких фреймов, то простое выполнение функции window.close() не приведет к ожидаемому результату - закрытию всего окна. Корректнее всего будет загрузить в окно-предшественник (имя по умолчанию - _parent) пустую страницу, сделать ее текущей и затем удалить. Вся страница, удаляющая окно _parent, состоит из контейнера SCRIPT.

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

Написание таких скриптов заставляет сожалеть о том, что в JavaScript нет наследования. Дело в том, что, даже если некоторое окно порождено из другого окна, функции, определенные в окне-родителе, в новое окно не передаются. Это означает, что автору придется их дублировать в каждом документе или прибегать к помощи включаемых файлов, что разрывает технологический процесс разработки страниц.

Единство в многообразии Следует отметить, что JavaScript - не единственный язык управления сценариями просмотра документов. Microsoft подготовила свою версию аналогичного языка - VBScript на основе Visual Basic. Кроме того, управлять сценарием просмотра можно и из Java-апплетов, что, конечно, сложнее, но зато более надежно и безопасно. При этом программист получает все преимущества наследования и прочие атрибуты объектно-ориентированного программирования. В конце концов, для создания фреймов и окон можно использовать атрибуты соответствующих контейнеров HTML, которые позволяют делить рабочую область экрана на фрагменты, перекрывать объекты и восстанавливать первоначальный вид страницы. Таким образом, к настоящему времени существует по меньшей мере три способа управления сценариями просмотра гипертекстовых баз данных Web, каждый из которых по-своему хорош. Какой из них выбрать - дело автора web-страницы.

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

Во-первых, Всемирная Паутина и так достаточно плотно набита всевозможными рассказами на тему "как сделать...". Обычно речь идет о простых практических рекомендациях по конкретным вопросам. А обычного учителя они обходят тем, что чаще всего имеется возможность немедленно опробовать пример в "боевых условиях".

Во-вторых, если мы будем говорить о языках программирования и стилях оформления либо об инструментарии, то фирмы разработчики, заинтересованные в расширении своего сбыта, тратят огромные силы и средства на поддержку своих клиентов. Фирменные сервера, такие, как Microsoft, San, Netscape, полны примерами, советами, исходными текстами и рекомендациями. Их изучение может значительно повысить профессиональный уровень. Кроме того, многие из хранящихся там исходных текстов можно почти без каких-либо изменений вставлять в собственные страницы.

Так что захаживайте в World Wide Web, не стесняйтесь - и перед вами предстанет весь мир.

Александр Запольскис

© Компьютерная газета

полезные ссылки
Аренда ноутбуков