Сайт создан в системе uCoz

* Скрипты для ИТ * Описание и размещение JavaScript на странице * Переменные и функции в JS * Ветвления в JS * Основные элементы управления * полезные программы для дома и интернета * лекции предусмотренные учебной программой для ИТ по предмету "Распределенные системы обработки информации *"

Главное меню

	Скрипты
	Элементы управления
	Циклы JavaScript
	Переменные\функции
	Лекции
	Программы

н а с т а р т о в у ю

Примечания

вся информация представленная в данном описании имеет гриф не секретно (свободно распространяется имеет общий доступ). Все программы представленные на сайте не проверялись антивирусной программой и распространяются абсолютно бесплатно

При разработке данного электронного издания ничьи авторские права не были нарушены и использовалась только достоверная информация.

P.S.

S . C . R . I . P . T .

В данном разделе представлены самые распространенные на сегодняшний день набор скриптов. Большинство скриптов имеют различную структуру, для того чтобы скрипт нормально работал и функционировал на вашем компьютере, внимательно смотрите между какими тегами его нужно вставить, в противном случае скрипт либо не отобразится вызывая тем самым системные ошибки об откладке либо будет функционировать неправильно и неполноценно. Каждый скрипт содержит элементы и функции которые вы также в дальнейшем сможете "перебить" под свой вкус. Скрипты для оформления страницы, формы обратной связи, Листинги. Если нужный вам скрипт не описан в данном разделе вы можете обратиться по адресу maxtor_01@mail.ru или makuts_e@mail.ru и задать свой скрипт.

Скрипты для оформления страницы

Поблескивающие около курсора оконьки при его движении

<html> <head> <title>Поблескивающие около курсора оконьки при его движении.</title> <STYLE type=text/css> .s1 {FONT-SIZE: 10pt; VISIBILITY: hidden; COLOR: blue; POSITION: absolute} .s2 { FONT-SIZE: 18pt; VISIBILITY: hidden; COLOR: red; POSITION: absolute} .s3 { FONT-SIZE: 14pt; VISIBILITY: hidden; COLOR: gold; POSITION: absolute} .s4 { FONT-SIZE: 12pt; VISIBILITY: hidden; COLOR: lime; POSITION: absolute} </STYLE> </head> <body> <DIV class=s1 id=div1>*</DIV> <DIV class=s2 id=div2>*</DIV> <DIV class=s3 id=div3>*</DIV> <DIV class=s4 id=div4>*</DIV> <SCRIPT language=javascript type=text/javascript> var nav = (document.layers); var tmr = null; var spd = 50; var x = 0; var x_offset = 5; var y = 0; var y_offset = 15; if(nav) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = get_mouse; function get_mouse(e) { x = (nav) ? e.pageX : event.clientX+document.body.scrollLeft; y = (nav) ? e.pageY : event.clientY+document.body.scrollTop; x += x_offset; y += y_offset; beam(1); } function beam(n) { if(n<5) { if(nav) { eval("document.div"+n+".top="+y); eval("document.div"+n+".left="+x); eval("document.div"+n+".visibility='visible'"); } else { eval("div"+n+".style.top="+y); eval("div"+n+".style.left="+x); eval("div"+n+".style.visibility='visible'"); } n++; tmr=setTimeout("beam("+n+")",spd); } else { clearTimeout(tmr); fade(4); } } function fade(n) { if(n>0) { if(nav)eval("document.div"+n+".visibility='hidden'"); else eval("div"+n+".style.visibility='hidden'"); n--; tmr=setTimeout("fade("+n+")",spd); } else clearTimeout(tmr); } // --> </SCRIPT> <div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div> </body> </html>

Глаза, бегающие за мышкой

<html>
<head>
<title>Глаза, бегающие за мышкой</title>
<script language="JavaScript" type="text/javascript">
var brOK=false;
var mie=false;
var ex=0;
var ey=0;
var ae;
var le;
var re;
var x0;
var y0;
var tid;
var realx;
var realy;
var loaded=false;
if(parseInt(navigator.appVersion.charAt(0))>=4)
  {brOK=true;}
if(navigator.appName.indexOf("Microsoft")!=-1)
  {mie=true; }
function myhandler(e)
{ex=e.pageX; 
 ey=e.pageY;
 moveeye()
 return routeEvent(e);
}

function moveeye()
{dy=ey-y0-20;
 dx1=ex-x0-20;
 dx2=ex-x0-60;

r=Math.sqrt(dx1*dx1+dy*dy);
 if(r<20) r=20
 dx1=dx1*10/r+x0+10;
 dy1=dy*10/r+y0+10;

r=Math.sqrt(dx2*dx2+dy*dy);
 if(r<20) r=20
 dx2=dx2*10/r+x0+50;

ae.left=x0;  
 ae.top=y0;  
 le.left=dx1;  
 le.top=dy1;  
 re.left=dx2;  
 re.top=dy1;  
}

function moveall()
{rx=realx+40
 ry=realy+40;
 rx+=(ex-rx)*0.1;
 ry+=(ey-ry)*0.1;
 realx=rx-40;
 realy=ry-40;
 x0=Math.round(realx);
 y0=Math.round(realy);
 moveeye();
 tid=setTimeout('moveall()',100);
}

<div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div>
</body>
</html>

При работе данного скрипта необходимо либо задать свой рисунок для отображения либо подключение к сети Интернет

Защита паролем. Если пароль неверный то пользователь переадресовывается, если верный то выдается сообшение и дозагружается страница.

<html> <html> <head> <title>Защита паролем. Если пароль неверный то пользователь переадресовывается, если верный то выдается сообшение и дозагружается страница.</title> <script language=JavaScript>  </script> </head> <body> <div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div> </body> </html>

Скрипт поддерживает не сколько паролей, каждому паролю соответсвует своя страница. Если введеное не совпадает ни с одним из паролей пользователю выводится сообщение и он перенаправляется на другую страницу.Пароли по умолчанию: password, pass, paroli.

Шарики, летающии за курсором (отбиваются от стенок)

<html> <head> <title>Шарики, летающии за курсором (отбиваются от стенок)</title> </head> <body> <div id="dot0" style="position: absolute; visibility: hidden; height: 11; width: 11;"><img src="../img/bullet.gif"></div> <div id="dot1" style="position: absolute; height: 11; width: 11;"><img src="../img/bullet.gif"></div> <div id="dot2" style="position: absolute; height: 11; width: 11;"><img src="../img/bullet.gif"></div> <div id="dot3" style="position: absolute; height: 11; width: 11;"><img src="../img/bullet.gif"></div> <div id="dot4" style="position: absolute; height: 11; width: 11;"><img src="../img/bullet.gif"></div> <div id="dot5" style="position: absolute; height: 11; width: 11;"><img src="../img/bullet.gif"></div> <div id="dot6" style="position: absolute; height: 11; width: 11;"><img src="../img/bullet.gif"></div> <script LANGUAGE="JavaScript">  </script> <div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div> </body> </html>

При работе данного скрипта необходимо либо задать свой рисунок для отображения либо подключение к сети Интернет

Слова скользят за курсаром на разных слоях и растоянии.

<head> <title>Слова скользят за курсаром на разных слоях и растоянии.</title> </head> <body> <div id=dot0>Текст страницы который будет не опдвижен</div> <div style='position:absolute' id=dot1><h1>Вот</h1> </div> <div style='position:absolute' id=dot2><h2>как</h2> </div> <div style='position:absolute' id=dot3><strong>это</strong> </div> <div style='position:absolute' id=dot4><em>работает</em> </div> <script language="JavaScript">  </script> <div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div> </body> </html>

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

Проверка нескольких полей формы на запнение (проверка e-mail, url, и простого наличия данных в ворме)

<html> <head> <title>Проверка нескольких полей формы на запнение (проверка e-mail, url, и простого наличия данных в ворме)</title> <script language="JavaScript">  </script> </head> <body> <form ENCTYPE="multipart/form-data" action="http://narod.yandex.ru/send-poll.xhtml" method="POST" onSumbit="return _ checkAll()"> <table border="0"><tr> <td width="200"><em>Имя:</em><input type=text name="name" onChange="isValidName(this.value)" value=" "></td> <td width="200"><em>E-mail:</em><input type=text name="mail" onChange="isValidEmailAddress(this.value)" value=" "></td> </tr><tr> <td><em>URL:</em><input type="text" name="url" onChange="isValidURL(this.value)" value="http://"></td> <td><em> Тема:</em><input type="text" name="subj" onChange="isValidTema(this.value)" value=" "></td> </tr><tr> <td valign="top" colSpan=2><em>Сообщение</em><br><textarea rows="3" cols="48" name="mess" onChange="isValidNotes(this.value)" value=" ">

понадобится дополнительное создание кнопок "Очистить" и "Отправить"

Сайт создан в системе uCoz

Сайт создан в системе uCoz

Кнопка, меняющая цвет при наведении курсора

<html> <head> <title>Кнопка, меняющая цвет при наведении курсора</title> <style type="text/css"> .initial2{font-weight:bold;background-color:#009900;color:#99ff99} </style> </head> <body> <script>  </script> <form onMouseover="change('#006600')" onMouseout="change('#009900')"> <input type="button" value="Link 1 " class="initial2" onClick="jumpto2('http://studia.scriptic.ru')" style="border-color: #ffff00;"> <input type="button" value="Link 2 " class="initial2" onClick="jumpto2('http://studia.scriptic.ru')" style="border-color: #ffff00;"> <input type="button" value="Link 3 " class="initial2" onClick="jumpto2('http://studia.scriptic.ru')" style="border-color: #ffff00;"> </form> <div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div> </body> </html>

Дата и время

<html> <head> <title>Дата время.</title> <script language="JavaScript">  </script> </head> <body> <font face="verdana,arial" size="2" color="#8000FF"> <script language="JavaScript">  </script> <div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div> </body> </html>

Результатом данного скрипта будет строка типа:

Сегодня 19 марта 2008 года, среда, 22:00

Сообщение в строке статуса отбивается от стенок

<html> <head> <title>Сообщение в строке статуса отбивается от стенок</title> <script language="JavaScript" type="text/javascript">  </script> </head> <body onLoad="bouncey()"> <div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div> </body> </html>

Данный пример реализован в нашем проекте. См. строку статуса

Круглые часы

<head> <title>Часы круглые, возможно закребление к углу окна браузера (скрипт второй)</title> </head> <body> <SCRIPT LANGUAGE="JavaScript">  </script> <div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div> </body> </html>

возможно закребление к углу окна браузера (скрипт второй).

Cтраница при открытии выезжает из-за экрана.

<html> <head> <title>Cтраница при открытии выезжает из-за экрана.</title> </head> <body> <SCRIPT language=JavaScript>  </SCRIPT> <div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div> </body> </html>

Дополнительное постоянно прыгающее и меняющее размер окошко

<html> <head> <title>Дополнительное постоянно прыгающее и меняющее размер окошко</title> <script language="JavaScript"></script> </head> <body> <form name="manWin"> <input name="startBut" value="Open Mad Window" type="button" onClick="startWin()"> </p> </form> <div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div> </body> </html>

Эффект движущегося неба

Ссылка мигает при наведении

Изменение полосы прокрутки

С подключением внешнего файла. В заголовок страницы , перед тагом </head> необходимо вставить <link rel="stylesheet" href="style.css" type="text/css"> эта строка будет вызывать файл style.css и использовать шаблон стиля указанном в нем для всей страницы. В самом файле, который можно создать в Блокноте а потом переименовать его разширение в .css, пишите: body { scrollbar-dark-shadowcolor:#000000; scrollbar-light-shadow-color:#000000; scrollbar-base-color:#000000; scrollbar-arrow-color:#000000; scrollbar-face-color:#000000; scrollbar-shadow-color:#000000; scrollbar-3d-light-color:#000000; } В примере без подключения внешнего файла (придется одно и тоже вписывать на каждой странице, но некоторым это действие нравится). Вставляем весь этот код в заголовок, перед тагом </head>: <style> body { scrollbar-dark-shadowcolor:#000000; scrollbar-light-shadow-color:#000000; scrollbar-base-color:#000000; scrollbar-arrow-color:#000000; scrollbar-face-color:#000000; scrollbar-shadow-color:#000000; scrollbar-3d-light-color:#000000; } </style> Внимание, все цвета в выше приведенных примерах прописаны как “#000000”, то есть черные. Ниже приведена схема, демонстрирующая названия элементов скроллера. Так вам будет удобнее и нагяднее понять, какие параметры отвечают а те или иные области скролл-бара (она же – полоса прокрутки)

В примере без подключения внешнего файла (придется одно и тоже вписывать на каждой странице, но некоторым это действие нравится). Вставляем весь этот код в заголовок, перед тагом </head>:

Поиск по сайту

<FORM METHOD="get" ACTION="http://www.dplspider.ru/main_service.php" target="_blank"> <a href="http://www.dplspider.ru">Форма поиска по сайту:</a><br> <input name="site_id" type="hidden" value="1893"> <INPUT TYPE="text" NAME="text" SIZE=40 VALUE="" MAXLENGTH=100> <INPUT TYPE="SUBMIT" VALUE="Найти"> </FORM>

вставьте этот код в нужное место страницы

ссылки без подчеркивания

<head> <title>Ссылки без подчеркивания</title> <style type="text/css"> A { text-decoration: none; } </style> </head>

сделать стартовой

<a href="#" onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://design.originweb.info');return false;">Сделать стартовой</a>

ссылка меняет цвет при наведении

ПРАКТИКА

Ниже приведены три листинга: для личной страницы пользователя, <секретной> страницы и страницы с формой запроса логина и пароля. Все они сопровождаются подробными комментариями, так что с пониманием проблем возникнуть не должно. Единственное, о чем я жалею, - нельзя на страницах журнала устроить <подсветку синтаксиса>, а то ведь как бы было здорово, да и понятнее.
Тексты личных страниц пользователей имеют одинаковую структуру (см. листинг ниже), отличаются они только именами (для начала создайте хотя бы два таких файла с именами login1password1.htm и login2password2.htm).

<html> <head></head> <body> <script language="JavaScript"></script> <div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div> </body> </html>

А вот листинг страницы с формой запроса логина и пароля: В данном листинге описано три функции:

функция check_password() обрабатывает клик на кнопке <Вход> и служит для определения истинности введенных логина и пароля;

функция test_password() обрабатывает загрузку изображения и, если пароль и логин верны, направляет пользователя на страницу [логин][пароль].htm.

и наконец, последняя функция password_error() служит для обработки события onError объекта img.

Если вы будете использовать приведенные выше листинги, то обратите внимание на строчные и прописные буквы - JavaScript чувствителен к регистру.

<html>

<head>

<title>Ввод логина и пароля</title>

</head>

<body>

<script language="JavaScript"></script> <form name="check_form"> Login: <input type="text" name="user_login"><br> Password: <input type="password" name="user_password"><br> <input type="button" value="Войти" onClick="check_password()"> </form> <img src="invisible.gif" name="checker" height="l" width="l" onLoad="test_password()" onError="password_error()"> <div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div> </body> </html>

ФОРМЫ ОБРАТНОЙ СВЯЗИ

Скрипт обратной связи с готовой проверкой поле

<html> <head> <script language="JavaScript">  </script> </head> <body> <form> <table border="0"><tr> <td width="200"><em>Имя:</em><input type=text name="name" onChange="isValidName(this.value)" value=" "></td> <td width="200"><em>E-mail:</em><input type=text name="mail" onChange="isValidEmailAddress(this.value)" value=" "></td> </tr><tr> <td><em>URL:</em><input type="text" name="url" onChange="isValidURL(this.value)" value="http://"></td> <td><em> Тема:</em><input type="text" name="subj" onChange="isValidTema(this.value)" value=" "></td> </tr><tr> <td valign="top" colSpan=2><em>Сообщение</em><br><textarea rows="3" cols="48" name="mess" onChange="isValidNotes(this.value)" value=" ">

Сайт создан в системе uCoz

Отзывы и предложения

<a name="email"></a> <h5>ОТЗЫВЫ И ПРЕДЛОЖЕНИЯ</h5> Мы будем признательны, если вы найдете возможность высказать <strong>замечание или пожелание по работе салонов</strong>. Для этого отправьте нам письмо по адресу <a href="mailto:Les Montres <info@lesmontres.ru>">info@lesmontres.ru</a> или заполните нижеприведенную форму.<br> <form action="contact/#email" method="post"> <input type="text" name="name" onblur="verifyEmailAndName(this.form)"> Ваше имя<br> <input type="text" name="email" onblur="verifyEmailAndName(this.form)"> E-mail <br> <input type="text" name="subject"> Тема <br><br> <textarea cols="70" rows="15" name="message">

разработчики M@Xtor S.D.F. & M.A.K.U.T.S.

Сайт создан в системе uCoz

н а с т а р т о в у ю

При разработке данного электронного издания ничьи авторские права не были нарушены и использовалась только достоверная информация.

S . C . R . I . P . T .

Скрипты для оформления страницы

При работе данного скрипта необходимо либо задать свой рисунок для отображения либо подключение к сети Интернет

При работе данного скрипта необходимо либо задать свой рисунок для отображения либо подключение к сети Интернет

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

понадобится дополнительное создание кнопок "Очистить" и "Отправить" Сайт создан в системе uCoz

Результатом данного скрипта будет строка типа: Сегодня 19 марта 2008 года, среда, 22:00

Данный пример реализован в нашем проекте. См. строку статуса

возможно закребление к углу окна браузера (скрипт второй).

вставьте этот код в нужное место страницы

А вот листинг страницы с формой запроса логина и пароля: В данном листинге описано три функции:

функция check_password() обрабатывает клик на кнопке <Вход> и служит для определения истинности введенных логина и пароля;

функция test_password() обрабатывает загрузку изображения и, если пароль и логин верны, направляет пользователя на страницу [логин][пароль].htm.

и наконец, последняя функция password_error() служит для обработки события onError объекта img.

понадобится дополнительное создание кнопок "Очистить" и "Отправить"

Сайт создан в системе uCoz

Результатом данного скрипта будет строка типа:

Сегодня 19 марта 2008 года, среда, 22:00