примеры использования Java и GGI скриптов
Рассмотрим два простейших вида программирования: применение 1.CGI-скриптов
и 2. JAVA-скриптов.
1. CGI-скрипты на странице это комманды посетителя сайта программе,
размещенной на сервере, выполнить определенные действия: занести в гостевую
книгу, искать по серверу, обработать форму для отправки сообщений.
Применение их разрешено не на всех серверах, а в основном на платных.
Создавать скрипты самому сейчас необходимости нет, можно скопировать,
например из сайта www.cgi-resources.com.
Пример формы:
Начало формы
Начало формы
|[pic]Впишите свой |Подписатьс|
|адрес: [pic][pic] |я: [pic] |
Конец формы
Код формы:
<FORM action=http://kulichki.rambler.ru/cgi-
bin/cgiwrap/listserv/subscribe.pl method=get> <TABLE bgColor=#F3FEFF
border=0 cellSpacing=4 width=250> <TBODY> <TR align=middle> <TD>[pic]
Впишите свой адрес: <INPUT name=email> <INPUT type=submit value=Отправить!>
</TD> <TD>Подписаться: <INPUT CHECKED name=action type=radio
value=subscribe> </TD></TR></TBODY></TABLE></FORM></TD>
Как видно, форма начинается меткой FORM. Метка АCTION-указывает на путь к
обработчику формы (там где находится исполняемый файл-скрипт), METHOD
-метод протокола передачи гипертекстов: METHOD=POST и METHOD=GET, по
умолчанию предполагается METHOD=GET.
<INPUT>-элемент ввода данных, input type=sybmit - кнопка с надписью
отправить и действием подписаться при нажатии
<INPUT CHECKED name=action type=radio value=subscribe>- при нажатии на
значек кнопки подтверждается желание подписаться (следите за логикой: ввод
помеченной кнопки=подписка) .
Форма может содержать CHECKBOX- квадратик, куда можно ставить галочку,
HIDEN- cкрытые элементы и др. Самый простой метод создать форму: <img src="/images/download.gif" alt="примеры использования Java и GGI скриптов" width="106" height="20" border="0">
готовую и подогнать ее под свои потребности. Базисные знания у вас уже
есть.
2. JAVA-cкрипты тоже лучше изучать на примерах.
а) Меняющаяся кнопка при нажатии. [pic][pic]
[pic]
Код:
<SCRIPT LANGUAGE="JavaScript">
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true';
}
else if (browser_name == "Microsoft Internet Explorer" && browser_version
>= 3.0) { roll = 'true'; }
else { roll = 'false'; }
function over(img,ref) { if (roll == 'true') { document.images[img].src =
ref; } }
function out(img,ref) { if (roll == 'true') { document.images[img].src =
ref; } }
if (roll == 'true')
{
a1=new Image;a1.src="../menue/news_an.jpg";
a2=new Image;a2.src="../menue/news_aus.jpg";
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
1 browser_name = navigator.appName;
2 browser_version = parseFloat(navigator.appVersion);
3 if (browser_name == "Netscape" && browser_version >= 3.0) { roll =
'true'; }
3 else if (browser_name == "Microsoft Internet Explorer" &&
browser_version >= 3.0) { roll = 'true'; }
4 else { roll = 'false'; }
5 function over(img,ref) { if (roll == 'true') { document.images[img].src
= ref; } }
6 function out(img,ref) { if (roll == 'true') { document.images[img].src =
ref; } }
7 if (roll == 'true')
{
8 a1=new Image;a1.src="../menue/news_an.jpg";
9 a2=new Image;a2.src="../menue/news_aus.jpg";
}
</SCRIPT>
10 <p><A HREF="../distant/index.html"
onMouseOver="over('image_name','../menue/news_aus.jpg');"
11 onMouseOut="out('image_name','../menue/news_an.jpg');">
12 <img name="image_name" alt="О дистанционном обучении"
src="../menue/news_an.jpg" width=84 height=28 border="0">
</A>
Для себя этот скрипт можно приспособить делая ссылки на свои рисунки в
строках 8,9,10,11,12 (убирая естественно номера строк) и ссылку на свой
документ в строке 10. Рисунков может быть больше. У меня имена рисунков:
news_an - мышь нажата, news_aus- отпущена. Те строки, которые нужно менять,
выделены
б) Если ваш сайт "переехал", вы можете перенаправить посетителей со старого
адреса на новый (new.address) этим скриптом:
<HTML>
<HEAD>
<META HTTP-EQUIV="REFRESH" CONTENT="1; URL=http://www.new. address">
<script language="JavaScript"> </script>
<!-- window.location.href = "http://www..new. address" // -->
<CENTER>
<A HREF="http://www.new.address">new name</A>
<br>
<table width="500" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="dcc68b"><font face="Verdana, Arial, Helvetica, sans-serif" color="545454" size="-2">Для добавления страницы <b>"примеры использования Java и GGI скриптов"</b> в избранное нажмине <b>Ctrl+D</b></font></td>
</tr>
</table>
</td>
<td width="6" background="/images/tbl-right.gif"></td>
</tr>
<tr>
<td width="6" height="6" background="/images/tbl-left-bottom.gif"></td>
<td height="6" background="/images/tbl-bottom.gif"></td>
<td width="6" height="6" background="/images/tbl-right-bottom.gif"></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="6" background="/images/tbl-left-top.gif"></td>
<td height="6" background="/images/tbl-top.gif"></td>
<td width="6" background="/images/tbl-right-top.gif"></td>
</tr>
<tr>
<td width="6" background="/images/tbl-left.gif"></td>
<td align="center" bgcolor="ead292">
<!-- CLX 468x60 rotator-->
<script>//<!--
document.write('<script language=JavaScript src=http://s.clx.ru/rot.php?num=12237&c='+Math.round(Math.random() * 100000)+'></script>');
// --></script>
<!-- CLX 468x60 rotator-->
</td>
<td width="6" background="/images/tbl-right.gif"></td>
</tr>
<tr>
<td width="6" height="6" background="/images/tbl-left-bottom.gif"></td>
<td height="6" background="/images/tbl-bottom.gif"></td>
<td width="6" height="6" background="/images/tbl-right-bottom.gif"></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td width="181"><span class="systext">2005 © Copyright, <a href="http://www.2devochki.ru" class="navlink systext">2devochki.ru</a><br>
E-mail: <a href="mailto:info@2devochki.ru" class="navlink systext">info@2devochki.ru</a><br>
</span></td>
<td width="597"><div align="right">
<!--LiveInternet counter--><script language="JavaScript"><!--
document.write('<a href="http://www.liveinternet.ru/click" '+
'target=_blank><img src="http://counter.yadro.ru/hit?t14.7;r'+
escape(document.referrer)+((typeof(screen)=='undefined')?'':
';s'+screen.width+'*'+screen.height+'*'+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+';u'+escape(document.URL)+
';'+Math.random()+
'" title="liveinternet.ru: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодн\я" '+
'border=0 width€ height1></a>')//--></script><!--/LiveInternet-->
<a href="http://www.yandex.ru/cy?base=0&host=www.2devochki.ru">
<img src="http://www.yandex.ru/cycounter?www.2devochki.ru" width=88 height=31 alt="Яндекс цитирования" border=0>
</a>
<!-- HotLog -->
<script language="javascript">
hotlog_js="1.0";
hotlog_r=""+Math.random()+"&s=277385&im=112&r="+escape(document.referrer)+"&pg="+
escape(window.location.href);
document.cookie="hotlog=1; path=/"; hotlog_r+="&c="+(document.cookie?"Y":"N");
</script><script language="javascript1.1">
hotlog_js="1.1";hotlog_r+="&j="+(navigator.javaEnabled()?"Y":"N")</script>
<script language="javascript1.2">
hotlog_js="1.2";
hotlog_r+="&wh="+screen.width+'x'+screen.height+"&px="+
(((navigator.appName.substring(0,3)=="Mic"))?
screen.colorDepth:screen.pixelDepth)</script>
<script language="javascript1.3">hotlog_js="1.3"</script>
<script language="javascript">hotlog_r+="&js="+hotlog_js;
document.write("<a href='http://click.hotlog.ru/?277385' target='_top'><img "+
" src='http://hit20.hotlog.ru/cgi-bin/hotlog/count?"+
hotlog_r+"&' border=0 width=88 height=31 alt=HotLog></a>")</script>
<noscript><a href=http://click.hotlog.ru/?277385 target=_top><img
src="http://hit20.hotlog.ru/cgi-bin/hotlog/count?s=277385&im=112" border=0
width="88" height="31" alt="HotLog"></a></noscript>
<!-- /HotLog -->
<!-- SpyLOG f:0211 -->
<script language="javascript"><!--
Mu="u6592.46.spylog.com";Md=document;Mnv=navigator;Mp=0;
Md.cookie="b=b";Mc=0;if(Md.cookie)Mc=1;Mrn=Math.random();
Mn=(Mnv.appName.substring(0,2)=="Mi")?0:1;Mt=(new Date()).getTimezoneOffset();
Mz="p="+Mp+"&rn="+Mrn+"&c="+Mc+"&t="+Mt;
if(self!=top){Mfr=1;}else{Mfr=0;}Msl="1.0";
//--></script><script language="javascript1.1"><!--
Mpl="";Msl="1.1";Mj = (Mnv.javaEnabled()?"Y":"N");Mz+='&j='+Mj;
//--></script><script language="javascript1.2"><!--
Msl="1.2";Ms=screen;Mpx=(Mn==0)?Ms.colorDepth:Ms.pixelDepth;
Mz+="&wh="+Ms.width+'x'+Ms.height+"&px="+Mpx;
//--></script><script language="javascript1.3"><!--
Msl="1.3";//--></script><script language="javascript"><!--
My="";My+="<a href='http://"+Mu+"/cnt?cid=659246&f=3&p="+Mp+"&rn="+Mrn+"' target='_blank'>";
My+="<img src='http://"+Mu+"/cnt?cid=659246&"+Mz+"&sl="+Msl+"&r="+escape(Md.referrer)+"&fr="+Mfr+"&pg="+escape(window.location.href);
My+="' border=0 width=88 height=31 alt='SpyLOG'>";
My+="</a>";Md.write(My);//--></script><noscript>
<a href="http://u6592.46.spylog.com/cnt?cid=659246&f=3&p=0" target="_blank">
<img src="http://u6592.46.spylog.com/cnt?cid=659246&p=0" alt='SpyLOG' border='0' width=88 height=31 >
</a></noscript>
<!-- SpyLOG -->
</div></td>
</tr>
</table>
<br>
</body>
</HTML>
в) Выпадающее меню:
Начало формы
[pic]
Конец формы
Код:
<form> <select name="menu name">
<option selected value="webdesign.html">Пособие по веб дизайну
<option value="webhtm.html">Основы HTML
<option value="webprog.html">Программирование веб страниц
<option value="web3.html">Cоветы
</select>
<input type=button value="Ok" onclick="top.location.href = this.form.menu
name.options[this.form.menu name.selectedIndex].value"> </form>
Форма задается элементом SELECT. Если форм несколько, menue name должны
отличаться.
г) Поместите свой текст в строку состояния браузера автоматической
корректировкой тега BODY:
<body .... onLoad="window.defaultStatus=' Ваш текст в строке состояния'">
Вот и все программирование для начинающего веб дизайнера. Знание даже этого
минимума позволит придать вашим страницам привлекательный профессиональный
вид.