Для встраивания скриптов в тело HTML-документа используется контейнер SCRIPT. Не все программы просмотра способны распознавать и исполнять скрипты, поэтому само тело скрипта помещается в контейнер комментария. Для определенности рассмотрим небольшой пример:
Пример 2.2
<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="RADLEG3.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>
В данном примере в заголовок документа (контейнер HEAD) включен контейнер SCRIPT. До недавнего времени атрибут LANGUAGE в этом контейнере не являлся обязательным. Но с момента появления VBSCRIPT смысл в указании типа языка появился - Navigator не понимает скриптов на других языках. Отсутствие атрибута может привести к ошибкам при отображении гипертекстовых страниц.
Далее в тексте страницы определен комментарий, в который включен текст скрипта. Начинается комментарий со строки:
<!-- The JavaScript Functions Definition
и кончается строкой:
// The end of JavaScript Functions Definition -->
Внутри контейнера скрипта определены две функции пользователя: help_win() и main_menu(). Смысл этих функций достаточно прозрачен. Help_win() предназначена для организации контекстно зависимого help, а main_menu() осуществляет допуск пользователя к главному меню Website. Обе функции используют один и тот же метод open (встроенную в JavaScript функцию, которая определена над объектом window) для того, чтобы открыть новое окно Netscape Navigator и загрузить в него гипертекстовые документы. При этом функция main_menu порождает стандартное окно (с кнопочками, иконками и т.п.), а функция help_win() окно без стандартных атрибутов. У этого окна имеются только линейки прокрутки (scroll bars).
Вызов функций осуществляется после нажатия на соответствующую кнопку, которые определены в HTML-форме help_call. Таким образом выполнение функций будет осуществлено только в том случае, если произойдет событие, описанное атрибутом onClick в контейнере INPUT соответствующего поля формы.
Если быть более точным, то приведенный пример - это фрагмент, реализующий регистрацию пользователя. К моменту его выполнения окно главного меню уже открыто, поэтому создание этого окна при выборе кнопки "NEXT" не происходит, а текст загружается в уже открытое окно.
Примеры скриптов
Теоретизировать на предмет написания скриптов на JavaScrip можно долго. Но самый продуктивный способ получения представления о языке - это разбор примеров. Если посмотреть на список этих примеров, который можно найти в соответствующей директории Yahoo, то больше всего там различного сорта калькуляторов. Разберем программу такого же типа, только это будет не калькулятор, а программа обучения устному счету.
Пример 2.3
<HTML>
<!-- Author: Pavel Khramtsov Date: February 23, 1996 URL: http://144.206.192.100/radleg/mo_input.htm --> <HEAD> <TITLE>Проверка устного счета.</TITLE> <SCRIPT LANGUGE="JavaScript">
<!-- var max_value = 0 var operand1 = 0 var operand2 = 0 var result = 0 var flag = 0 var sign = "+" var input = "" var v_date = new Date() var number = v_date.getTime() function init(factor) {var today = new Date() return (factor*today.getTime()/1000)%30000 } //Инициализировать счетчик случайных чисел. IX = init(2) IY = init(3) IZ = init(4) //2, 3, and 4 below were arbitrarily chosen. //They put some distance between the initial values of IX, IY, and IZ //Датчик случайных чисел. function random()
{ IX = Math.floor(171 * IX % 30269) IY = Math.floor(172 * IY % 30307) IZ = Math.floor(170 * IZ % 30323) return ( IX/30269.0 + IY/30307.0 + IZ/30323.0 ) % 1.0 } //Выбрать сложение или вычитание. function set_sign(x) {if( x == "+") { flag = 0 sign = "+" } if( x == "-") { flag = 1 sign = "-" } return true } // Определить первый операнд. function f_operand()
Приведенный здесь пример содержит датчик случайных чисел (функции init и rand), таблицу, реализующую функции кнопок клавиатуры, и блок проверки результата вычислений. После загрузки программы пользователь должен выбрать тип вычислений (+,-), интервал вычислений (в пределах 10, 20, 100) и нажать кнопку "?" для генерации примера. После ввода с отображаемой клавиатуры числа пользователь нажимает на символ "=", что означает "исполнить", и система проверяет правильность ответа. Если ответ правильный, то программа поздравляет фразой "Молодец!", если нет - "Думай!?". В системе Windows 3.x нет встроенного датчика случайных чисел, поэтому стандартная функция rand в этой версии JavaScript не реализована. Используемый в данной программе датчик был позаимствован из телеконференции по JavaScript. В скрипте кроме этого используются объект типа "дата" и его методы, а также встроенные функции контроля вводимых данных. Как видно из примера обращение к полям HTML-формы представляет из себя обращение к структуре, корнем которой является объект окно, в котором определен объект документ, внутри которого определена форма и ее поля и атрибуты полей. Не у всех полей можно менять значения атрибутов, так, например, атрибут VALUE в кнопке не меняет своего значения, если только не перезагрузить страницу.
Другим часто встречающимся примером является бегущая строка. Строка может бежать либо в поле статуса (низ экрана), либо внутри поля формы. Рассмотрим такой пример.
Пример 2.4. Бегущая строка
<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>
Здесь приведен фрагмент страницы компании Демос разработанный Дмитрием Алтуховым (andy@demos.su). Как видно из этого примера, прокрутка осуществляется за счет изменения содержания отображаемой переменной msg1. Запускается бегущая строка в момент загрузки страницы по событию onLoad. Из комментария к примеру следует, что автор не несет ответственность за проблемы, которые может данный скрипт породить при его отображении программой просмотра на компьютере пользователя. Собственно проблема вызвана применением функции setTimeout. Изначально предполагалось, что программа просмотра, которая поддерживает JavaScript будет исполняться в среде многопотоковых операционных систем. В этом случае к моменту порождения нового потока старый уже завершится и setTimeout будет таким образом порождать последовательно исполняемые потоки. Однако, при реализации JavaScript в Netscape Navigator 2.0 не все было выполнено аккуратно, и setTimeout стала просто "пожирать" ресурсы компьютера. Системы Windows 3.x вообще не являются много поточными и в них просто происходит переполнение стека при выполнении данного скрипта. Весь вопрос заключается только в том, как быстро "упадет" система, что зависит от объема исполняемой по setTimeout функции. Самое лучше, что можно посоветовать, если вдруг на экране появляется прокрутка - поскорее покинуть такую страницу. Справедливости ради следует отметить, что прокрутку можно организовать и другими способами, поэтому ее появление не обязательно должно вызывать крах системы или крах программы просмотра.
Другой часто встречающийся пример на страницах со скриптами JavaScript - идущие часы:
Пример 2.6
<HTML> <HEAD> <TITLE> type_Document_Title_here </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!--var i=0 adv_message = "advert = "Russian Research Center \"Kurchatov Institute\"" adv_message += advert adv_message += " adv_length = advert.length function move_clock() { // Clock day = new Date() clock_screen = day.getHours()+":"+day.getMinutes()+":"+day.getSeconds() document.kuku.f_clock.value = clock_screen // Rolling Field document.kuku.adv_string.value = adv_message.substring(i,i+45) document.kuku.i_field.value = i i++ if( i == adv_length + 44 ) i = 0 id = setTimeout("move_clock()",100) } // end --> </SCRIPT> </HEAD> <BODY onLoad="move_clock()"> This is the start point:<BR> <a href="#next">This the document start point.</a> kukuku <a name=next> <FORM NAME=kuku onSubmit="alert('You submit data to server')" METHOD="GET"> <INPUT TYPE=SUBMIT NAME=SABMIT VALUE=SUBMIT> Make a clock here: <INPUT NAME=f_clock maxlength=8 size=8> <P> <INPUTNAME=adv_string maxlength=45 size=45> <INPUT NAME=i_field size=10> </FORM> </BODY> </HTML>
Пример 2.7. Минимизация, максимизация окна и его удаление.
