Logo Host-telecom.com — профессиональный хостинг в Европе! Море(!) аналитической информации!
IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware
Ваш сайт в 8 раз быстрее конкурентов. Хостинг от $2.95

VPS: SSD, KVM, бесплатные бэкапы и администрирование

Все необходимое для вашего сайта и лучшая техподдержка 24/7

хостинг сайтов ГиперХост — хостинг сайтов который Вы искали.

Виртуальный хостинг, Аренда VPS серверов, рация доменных имен, SSL сертификаты

💰 Самые низкие цены на домены

🔒 Отличный хостинг на SSD c бесплатными SSL

💻 Огромнейший выбор dedicated выделенных серверов

Виртуальные VPS серверы в РФ и ЕС

Dedicated серверы в РФ и ЕС

По промокоду CITFORUM скидка 30% на заказ VPS\VDS

2.11. Примеры скриптов

Теоретизировать на предмет написания скриптов на 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()
	         {
	          operand1 = random()*max_value
	          return parseInt(operand1)
	         }
	 
	// Определить второй операнд.
	 
	function s_operand()
	         {
	          if(flag == 0)
	            {
	             operand2 = random() * (max_value-operand1)
	            }
	          else
	            {
	             operand2 = random() * operand1
	            }
	          return parseInt(operand2)
	         }
	 
	// Проверить введенные данные.
	 
	function input_sign(x)
	         {
	          if(x == 10)
	            {
	             if(flag == 0)
	               {
	                if( operand1+operand2 == parseInt(input))
	                  {
	                   window.document.test.r0.value = "Молодец!"
	                  }
	                else
	                  {
	                   window.document.test.r0.value = "Думай!?"
	                   window.document.test.input = ""; input = ""
	                  }
	               }
	             if(flag == 1)
	               {
	                if( operand1-operand2 == parseInt(input) )
	                  {
	                   window.document.test.r0.value ="__-__-_р!"
	                  }
	                else
	                  {
	                   window.document.test.r0.value = "Думай!?"
	                   window.document.test.input = ""; input = ""
	                  }
	               }
	             return true
	            }
	          input += x
	          window.document.test.result.value = input
	          return true
	         }
	 
	// Генерация варианта.
	 
	function main_calc()
	         {
	          operand1 = f_operand()
	          window.document.test.op1.value = operand1
	          operand2 = s_operand()
	          window.document.test.op2.value = operand2
	          window.document.test.s_sign.value = sign
	          input = ""
	          window.document.test.input = ""
	          window.document.test.r0.value = " ??? "
	          return true
	         }
	// -->
	</SCRIPT>
	</HEAD>
	<BODY>
	<CENTER>
	<H1>Математический тест</H1>
	<HR>
	<FORM NAME=test>
	<TABLE BORDER=0>
	<TR>
	<TD><INPUT NAME=i10 TYPE=button VALUE="0-10"
		onClick="max_value=10"></TD>
	<TD><INPUT NAME=i20 TYPE=button VALUE="0-20" 
		onClick="max_value=20"></TD>
	<TD><INPUT NAME=i100 TYPE=button VALUE="0-100" 
		onClick="max_value=100"></TD>
	<TD><INPUT NAME=i+ TYPE=button VALUE=" + " 
		onClick="set_sign('+')"></TD>
	<TD><INPUT NAME=i- TYPE=button VALUE=" - " 
		onClick="set_sign('-')"></TD>
	</TR>
	</TABLE>
	<HR>
	<TABLE BORDER=0>
	<TR>
	<TD><INPUT NAME=op1 SIZE=2 MAXLENGTH=2></TD>
	<TD><INPUT NAME=s_sign SIZE=1 MAXLENGTH=1></TD>
	<TD><INPUT NAME=op2 SIZE=2 MAXLENGTH=2></TD>
	<TD>=</TD>
	<TD><INPUT NAME=result SIZE=3 MAXLENGTH=3></TD>
	<TD><INPUT NAME=award TYPE=button VALUE=" ? " onClick="main_calc()">
	<TD><INPUT NAME=r0 VALUE=" ??? ">
	</TR>
	</TABLE>
	<HR>
	<TABLE BORDER=2>
	<TR>
	<TD><INPUT NAME=b1 TYPE=button VALUE=" 1 " onClick="input_sign('1')"></TD>
	<TD><INPUT NAME=b2 TYPE=button VALUE=" 2 " onClick="input_sign('2')"></TD>
	<TD><INPUT NAME=b3 TYPE=button VALUE=" 3 " onClick="input_sign('3')"></TD>
	</TR>
	<TR>
	<TD><INPUT NAME=b4 TYPE=button VALUE=" 4 " onClick="input_sign('4')"></TD>
	<TD><INPUT NAME=b5 TYPE=button VALUE=" 5 " onClick="input_sign('5')"></TD>
	<TD><INPUT NAME=b6 TYPE=button VALUE=" 6 " onClick="input_sign('6')"></TD>
	</TR>
	<TR>
	<TD><INPUT NAME=b7 TYPE=button VALUE=" 7 " onClick="input_sign('7')"></TD>
	<TD><INPUT NAME=b8 TYPE=button VALUE=" 8 " onClick="input_sign('8')"></TD>
	<TD><INPUT NAME=b9 TYPE=button VALUE=" 9 " onClick="input_sign('9')"></TD>
	</TR>
	<TR>
	<TD><INPUT NAME=b0 TYPE=button VALUE=" 0 " onClick="input_sign('0')"></TD>
	<TD COLSPAN=2><INPUT NAME=bs TYPE=button VALUE=" OK " onClick="input_sign('10')">
	</TD></TR>
	</TABLE>
	</FORM>
	</CENTER>
	<HR>
	</BODY>
	</HTML>

Приведенный здесь пример содержит датчик случайных чисел (функции 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 функции. Самое лучше, что можно посоветовать, если вдруг на экране появляется прокрутка - поскорее покинуть такую страницу. Справедливости ради следует отметить, что прокрутку можно организовать и другими способами, поэтому ее появление не обязательно должно вызывать крах системы или крах программы просмотра.

Прокручивать можно и вертикальные фрагменты. Достигается это за счет использования полей типа TEXTAREA.

Пример 2.5

	<HTML>
	<!--
	Author:	Pavel Khramtsov
	Date:	February 25, 1996
	-->
	<HEAD>
	<TITLE>Text Block Scrolling</TITLE>
	<SCRIPT LANGUAGE="JavaScript">
	var line_beak = "\n"
	var screen = ""
	 
	//                   1234567890123456789012345678901234567890
	    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 - идущие часы:

Пример 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> <INPUT 
	NAME=adv_string maxlength=45 size=45> <INPUT NAME=i_field size=10> 
	</FORM>
	</BODY>
	</HTML>
	

Пример 2.7. Минимизация, максимизация окна и его удаление.

	<HTML>
	<!--
	Author:	HTMLed User
	Date:	May 16, 1996
	-->
	<HEAD>
	<title>Iconize</title>
	<script language="JavaScript">
	function make_icon()
	            {
	window.open("test_icon.htm","test_icon","resizable=yes,scrollbars=no,
	width=50,height=70")
	             window.close()
	            }
	</script>
	</HEAD>
	<BODY>
	<h1>minimize page</h1>
	<form name=icon>
	<input name=icon_button type=button value=icon onClick="make_icon()">
	</form>
	</BODY>
	</HTML>
	

Пример 2.8. Максимизация окна:

	<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()"><img src=back.jpg></a>
	</center>
	</BODY>
	</HTML>

Назад | Содержание | Вперед

VDS хостинг Облачный сервер в Нидерландах и Украине

Аренда виртуального сервера от $7.91

Партнёрская программа
$20 за клиента

Wildcard сертификаты от $74,97 в год.

Дешевые ssl сертификаты для домена

Sectigo сертификаты от $7,67 в год.

хостинг Украина Виртуальный хостинг для сайта от $4,87

Регистрация домена от $2 в год

Партнерская программа – $20 за клиента

VPS с гибкой конфигурацией: за 1€

Мощные выделенные сервера: от 25€

Собственный Дата-Центр
Поддержка 24/7

Бесплатный конструктор сайтов и Landing Page

Хостинг с DDoS защитой от 2.5$ + Бесплатный SSL и Домен

SSD VPS в Нидерландах под различные задачи от 2.6$

ATLEX Выделенные серверы: в Европе / в России.

Виртуальные серверы: в Европе / в России.

Партнерская программа

Новости мира IT:

Архив новостей

Последние комментарии:

IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware

Информация для рекламодателей PR-акции, размещение рекламы — adv@citforum.ru,
тел. +7 495 7861149
Пресс-релизы — pr@citforum.ru
Обратная связь
Информация для авторов
Rambler's Top100 TopList liveinternet.ru: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня This Web server launched on February 24, 1997
Copyright © 1997-2000 CIT, © 2001-2019 CIT Forum
Внимание! Любой из материалов, опубликованных на этом сервере, не может быть воспроизведен в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав. Подробнее...