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

</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=' Ваш текст в строке состояния'»>
Вот и все программирование для начинающего веб дизайнера. Знание даже этого
минимума позволит придать вашим страницам привлекательный профессиональный
вид.

Добавить комментарий