JavaScript

С развитием всемирной Сети у ее пользователей появилось множество замечательных возможностей. Оной из них является бесплатный хостинг. Разместить свою страничку в Сети проще простого, да к тому же еще за 5 минут, бесплатно... Но всем читателям известно, где по-настоящему есть бесплатный сыр: в обмен на услуги размещения информации, на страничках бесплатного хостинга всплывают баннеры хостера. Также приходится существовать без удобств: как правило, такие сервисы, как SSI, Perl, PHP, SQL, как правило, отсутствуют. Только в последние время начали появляться халявные SSI. А как же быть тем, кто начал сайтостроение в те времена, когда данные сервисы присутствовали только на платных хостингах? Тем, у кого нет даже SSI. Данная статья и призвана им помочь.

А в чем собственно проблема? - могут удивиться непосвященные читатели. Нет, в первое время все будет Ок. Страницы, которые создавались часами, будут загружаться на сервер за считанные секунды. Но вот когда через совсем не большой промежуток времени количество страниц на сайте достигнет нескольких десятков и в очередной раз потребуется добавить новый пункт меню, или изменить адрес Веб-мастера, вот тогда вам и надоест грузить все эти HTML. И возникнет мысля: ведь код таких элементов как меню, шапка, баннеры :) за частую присутствуют на каждой странице в неизменной форме. А при малейшем изменении одного из элементов (скажем надо добавить новый пункт меню), приходится редактировать каждый HTML файл, а после все это загружать. Так и появляется поместить эти повторы в отдельный файл, подключить его к каждой странице, и просто внося в него изменения влиять на содержимое всех страниц. В свое время с этой проблемой боролись про помощи фреймов. Вебмастерам было очень удобно. А посетителям? Ну, как повезет...

С появлением SSI (Server Side Include - перевод в лоб: Серверная Сторона Подключения) все конкретно изменилось. Макроинструкии, исполняемые на сервере позволяли вставлять в документ содержание другого файла. Таким образом, такие элементы как меню выносились в отдельный файл и подключались по необходимости. Теперь для того, чтоб изменить меню на неограниченном количестве страниц, необходимо было изменить один единый файл. Почему SSI так быстро стал популярным? Все очень просто: документ генерировался на стороне сервера, а пользователь получал готовый результат, даже не подозревая, что он был "сложен" в одно целое из нескольких частей. Все вроде бы наладилось. Но не тут то было. SSI считался елитным сервисом, кроме того прилично нагружал сервер. По этой причине только в последние время SSI появился на бесплатных хостингах.

А как же те, кто начинал давно. Те, у кого сайт разросся. Те, у кого нет средство и желание на приобретение платного хостинга и доменного имени. И вообще, что делать тем, кто не хочет переезжать?

JavaScript - наш старый друг и верный помощник приходит на помощь. Благодаря своей простоте и невероятной гибкости, JS позволяет многое. В том числе и подключение содержимого отдельных файлов.

Включение фрагментов кода на JS в документ осуществляется при помощи тега <script>:

<script Language="JavaScript" SRC="путь к файлу с JS кодом">
</script>

Я не буду останавливаться на толковании тегов JS. Кроме того, по-моему, они интуитивно понятны и просты в понимании.

"Путь к файлу с JS кодом" указывает путь и имя файла, содержащего JS код. Код, содержащийся в указанном файле подключается к документу, и у посетителя создается впечатление что код, содержащийся в подключаемом файле попросту был размещен в документе. При этом при просмотре кода документа, посетитель не увидит кода, что содержится в подключаемом файле, а только выше указанную ссылку на него - сам файл будет загружен как отдельно. Из вышесказанного видно главное отличие данного метода от применения SSI. Страница собирается не на сервере, а на компьютере пользователя. Но сам пользователь, разумеется, и не подозревает про это.

Нетерпеливые читатели удивляться - как же может помочь подключение JS кода из файла, когда надо подключать HTML или вовсе текст? Запросто! В JS для вставки строки в документ существует команда

document.write('строка, которую необходимо вставить в документ');

Все, что заключено в кавычки ' ' будет попросту вставлено в документ. Таким образом, можно спокойно вставить в файл конструкцию типа:

document.write('<a href="some link">Link</a>');

и впредь изменением лишь одного подключаемого файла влиять на содержание всего сайта.

Хочу лишь заметить, что в роли кавычек можно использовать как одинарные ' ' так и двойные " ", но при этом в содержимом коде должны отсутствовать такие же кавычки. В противно случае перед ними следует ставить знак \ , например:

document.write("<a href=\"some link\">Link</a>");

И маленький пример:

index.html

<html>
<head>
<title>JS SSI Demo</title>
</head>
<body>
<!- Меню сайта ->
<script Language="JavaScript" SRC="menu.js">
</script>
<!- Конец меню сайта ->
<!- Остальное содержание страницы... ->
</body>
</html>

И сам подключаемый файл:

menu.js

document.write('<a href="some menu link 1">Пункт меню 1</a>');
document.write('<a href="some menu link 2">Пункт меню 2</a>');
document.write('<a href="some menu link 3">Пункт меню 3</a>');
document.write('<a href="some menu link 4">Пункт меню 4</a>');

В результате при открытии файла index.html в него будет подставлено содержимое menu.js и в окне броузера появятся ссылки, код которых находится в menu.js. Также хочу подчеркнуть, что содержимое файла menu.js будет подставляться внутри тега <script>, по сему простая прописка в файле <a href="some menu link 1">Пункт меню 1</a>... ( без document.write(' '); ) не даст ожидаемого результата.

Ну вот, казалось бы, чего еще желать? А ненасытным вебмастерам все мало. Теперь они хотят построить весь сайт на одном шаблоне! А почему бы и нет? Ведь дизайн страниц в пределах сайта не изменяется, меняется лишь содержание страниц. Стоит лишь в нужный момент подставить нужный адрес файла, содержащего код, который необходимо вставить. А вот как сделать, чтоб один шаблон, скажем файл dat.html менял имена подключаемых файлов и как следствие свой вид и информацию? Такая задача легко решается с приминением условий и параметров.

Итак, нам нужно каким то образом передать странице dat.html один или несколько параметров и в зависимости от принятых параметров подключать тот или иной файл. Передавать параметры будем через адресную строку, например: dat.html?id=101 Далее мы детально рассмотрим ее. Теперь нам надо написать процедуру обработки адресной строки для того, чтобы можно было извлечь значение параметра. Поскольку данная процедура в будущем опять же может нам понадобится в других документах, давайте разместим ее в отдельном файле bild.js:

function GetParam(search, name){

name=name+"=";
var gp="";
if (search!='') {
if (search.indexOf (name, 0)!=-1){
var startpos=search.indexOf(name, 0)+name.length;
var endpos=search.indexOf("&",startpos);
if (endpos<startpos) {endpos=search.length;}
var gp=p.substring(startpos,endpos);
} else {
gp=""; }
}
else {
gp="";
}
return gp;
}
var p=window.location.search;
var gp=GetParam(p, "id");
if (gp=="") {gp="default";}
document.write('<img src="'+gp+'.jpg">');

Вкратце о работе процедуры: мы ищем значение параметра с именем id, переданого в адресной строке в формате:

имя_документа?имя_параметра1=значение_параметра1&
имя_параметра2=значение_параметра2&…

Как видно имя документа отделяется от параметров знаком вопроса. После чего идет имя параметра и его значение, между ними знак равенства. Имена параметров разделяются знаком амперсанд - &. То есть можно добавлять обработку неограниченого числа параметров. В нашем примере процедура ищет значение только одного параметра с именем id:

var gp=GetParam(p, "id");

Если параметра нет, присваиваем ему значение "default":

if (gp=="") {gp="default";}

После этого можем использовать значение параметра, например, вставить в документ строку, отображающюю соответствующюю картинку:

document.write('<img src="'+gp+'.jpg">');

Вот собственно и все. Работу самой процедуры поиска рассматривать не будем, и так все понятно, а кому нет – пусть мне напишет, помогу разобраться.

Ну и сам dat.html:

<html>
<head>
<title>Dynamic add demo</title>
</head>
<body>

<script LANGUAGE="JavaScript">
function mov(form)
{
var myindex=form.dif.selectedIndex
location.href=(form.dif.options[myindex].value);
}
</script>

<form>
<select NAME="dif" size="1">
<option value="dat.html?id=pic1">Рисунок 1</option>
<option value="dat.html?id=pic2">Рисунок 2</option>
<option value="dat.html?id=pic3">Рисунок 3</option>
</select>
<INPUT onclick="mov(this.form, window)" type=button value=Смотреть>
</form>

<script language="JavaScript" src="bild.js"></script>

</body>
</html>

При открытии страницы будет отображен рисунок, содержащийся в файле default.jpg (так как параметр задан не будет). Но стоит выбрать один из пунктов меню выпадающего списка и нажать на кнопку "Смотреть" и тут откроется выбраная картинка. Как видно из листинга, при выборе пункта меню "Рисунок 1", документу dat.html будет передан параметр id равный "pic1". После чего в подключаемом файле bild.js значение параметра будет подставлено в строку:

document.write('<img src=”значение_параметра.jpg”>');

вследствии чего в документе dat.html будет отображет рисунок с именем значение_параметра.jpg (в нашем случае pic1.jpg). Конечно, никто не мешает передавать в параметре полное имя файла (особенно полезно когда файлы разные - jpg, gif, bmp...) или даже целые строки HTML кода. Функция mov в dat.html служит лишь для перехода по выбраной в вписке ссылке.

Вот мы и рассмотрели такой не сложный, но очень полезный механизм. И это лишь простой пример. Сегодня для вас есть домашнее задание: модифицируйте код, добавив кнопки "Вперед" и "Назад" для просмотра картинок.

И в заключении моего небольшого рассмотра возможностей JS по подключению внешних файлов хочу рассказать о некоторых приемуществах и особеностях использования таких вставок.

Одно из самых главных приемуществ данного метода по сравнению с использованием SSI для вставок данных в документ является его скорость. Да, да именно скорость. Если на страницах сайта использовать одну и ту же вставку на JS, то она будет загружаться только один раз - при первом посещении сайта (и разумеется если вставка будет изменена). В последствии при дальнейшем серфинге по сайту вставка будет подгружаться из кеша броузера тоесть с винта посетителя. Этот факт явно ускорит загрузку страницы. Таким методом можно сократить часть загружаемой с сервера информации в несколько раз!

Замечательная возможность - размещение любых данных, доступных по HTTP протоколу на любых страницах. Достаточно разместить на сайте строку:

<script src="http://адрес_документа"></script>

и его код будет вставлен в документ при его просмотре. Единственое что - подключаемый документ должен быть оформлен командами document.write - для текста. Разумеется, допустимо наличие в подключаемом документе JS кода, только уже без команд document.write Таким образом можно разместить много информации, занимающей мало места. Вспомним информеры. Они, как правило, графические – “весят” много, но информации несут мало. А вот если оформить их в виде таблицы на JS вставке, то грузиться они будут мгновенно. Кроме того, такая вставка не будет бросаться в глаза, и нарушать дизайн сайта.

Чем же еще может порадовать старина JS сайтостроителей? Внешний код подключаем, создаем динамические страницы, красота. Ну что еще желать? А как насчет интерактивности? Что? Нет, чат на JS устраивать не будем. Сегодня мы поговорим о динамическом изменении (!) кода.

В последние время в сети все чаще и чаще появляются некие калькуляторы. Например, многие хостинговые компании предлагает вам калькулятор для расчета стоимости услуг размещения сайта. Все что вам необходимо - выбрать тариф, дополнительные услуги, ввести продолжительность хостинга и нажать кнопку "Рассчитать". После чего вы моментально получаете результат прямо на странице сайта хостера. Причем сама страница не обновляется! Это простой пример динамического изменения кода.

Ладно, хватит разговоров, давайте перейдем непосредственно к примерам. Для начала самый простой. Создайте новый HTML файл и пропишите в нем следующий код:

<FORM name=test_form method=post>
<INPUT onclick="test_change ()" type=button value="Нажми на меня">
</FORM>

<SCRIPT language=javascript>
function test_change ()
{
document.all.resultat.innerHTML="Спасибо!";
}
</SCRIPT>

<DIV id=resultat></DIV>

Теперь сохраните файл и откройте его браузером. Вы увидите кнопку с надписью "Нажми на меня". Нажимайте, не бойтесь, баннеры не появятся ?. Что мы видим? Код изменился. Под кнопкой появилась надпись "Спасибо!". Содержание страницы изменилось. Но если вы загляните в файл с кодом, он неизменен. Как такое возможно? Все очень просто. Дело в том, что JS является client-side технологией. Т.е. он исполняется на машине посетителя, а не на сервере. А теперь давайте разберемся с кодом. Итак, с начала ничего нового не видим: форма с кнопкой, при клике на которую исполняется функция “test_change”. Сама функция содержит одну - единую строчку:

document.all.resultat.innerHTML="Спасибо!";

Это и есть команда JS на вставку. Все что остается добавить это место, куда делать вставку. Место мы обозначили идентификатором "resultat". Идентификатор вы можете изменять вольно по своему усмотрению. Теперь создаем новый слой и связываем его с идентификатором "resultat":

<DIV id=resultat></DIV>

Ну как, неплохо? Сразу хочу вас обрадовать, динамически можно вставлять не только простой текст, но и HTML теги! А теперь рассмотрим более сложный пример. Создадим калькулятор, который по веденным данным подсчитает вашу месячную зарплату ?. Итак создайте новый HTML файл и наберите следующее:

<TABLE>
<FORM name=cash_form method=post>

<TR><TD>Оплата, $/час: <TD><INPUT size=10 name=Oplata></td></tr>
<TR><TD>Рабочих часов в день: <TD><INPUT size=10 name=Chasov></td></tr>
<TR><TD>Рабочих дней в месяц: <TD><INPUT size=10 name=Dney></td></tr>

<TR><TD colSpan=2>

<INPUT onclick="getmoney (this.form.Oplata.value,this.form.Chasov.value,this.form.Dney.value)" type=button value="Подсчитать"></td></tr>

</FORM>
</TABLE>

<SCRIPT language=javascript>
function getmoney (dat1,dat2,dat3)
{
month=dat1*dat2*dat3;
document.all.resultat.innerHTML="За месяц Вы заработаете "+month+" $";
}
</SCRIPT>

<DIV id=resultat></DIV>

Сохраняем файл и открываем его браузером. Что мы видим? Три поля для ввода и кнопку с надписью "Подсчитать", при клике на которую запускается функция "getmoney". Она получает введенные значения, вычисляет месячную зарплату и выводит ее в браузере. Введите значения и нажмите кнопку "Подсчитать". Обратите внимание на значение месячной зарплаты. А теперь измените одно или несколько введенных значений и снова нажмите кнопку "Подсчитать". Как вы видите новое значение заменило старое. Очень удобно. А можно, например, выводить новое значение под старым, для этого нужно изменить строчку

document.all.resultat.innerHTML="За месяц Вы заработаете "+month+" $";

на

document.all.resultat.innerHTML=document.all.resultat.innerHTML+"За месяц Вы заработаете "+month+" $<br>";

Теперь новые данные будут прибавляться к более ранним, и все они вместе будут выведены на экран. Обратите внимание на добавленный HTML тег <br> в конце кода. Это перевод строки. Вот мы и протестировали использование HTML кода в динамически изменяемых страницах.

Конечно, калькуляторы нужны далеко не каждому сайту. И правильно, не стоит на одном зацикливаться. Подключите свое воображение. Возможность динамически добавлять HTML код открывает воистину огромный потенциал для разработчика. Конечно, меню на таком коде вряд ли сможет превзойти выпадающее меню JS - кликать надоест. А вот для экономии места и для организации пояснений к разным элементам сайта такие возможности JS идеально подходят. Простой пример - страница контактов на сайте компании. Там, как правило, размещена контактная информация компании, дистрибьюторов, представителей, разработчика сайта. Куча адресов, телефонов и e-mail'ов. Так и заблудиться можно. А вот если разместить ссылки "Компания", "Дистрибьюторы", "Представители", "Разработчик", посетитель быстро сориентируется и выберет нужную ссылку. Осталось только написать JS код, который при клике на ссылку выводит под ссылкой соответствующую информацию и убирал ранее выведеную. Многие могут возразить, мол можно сделать просто ссылку на нужный файл и не нужно динамическое изменение текущего. Но, во-первых, возможно посетитель заинтересован не одной ссылкой - ему придется возвращаться, а во-вторых, намного приятнее кликнуть и моментально (!!!) увидеть нужную информацию (загруженную вместе со страницей), чем ожидать загрузку очередной страницы. Давайте я дам простой примерчик, а разработка подобного кода останется вам как домашнее задание для закрепления материала. Итак, код:

<FORM name=test_form method=post>
<INPUT onclick="test_on_off (1)" type=button value="Включить">
<INPUT onclick="test_on_off (0)" type=button value="Выключить">
</FORM>

<SCRIPT language=javascript>
function test_on_off (dat1)
{
if (dat1==1)
{document.all.resultat.innerHTML="<table border=1><tr><td>Ура! Работает!</td></tr></table>";}
else
{document.all.resultat.innerHTML="";}
}
</SCRIPT>

<DIV id=resultat></DIV>

При открытии файла, содержащего вышеуказанный код, в окне браузера можно будет увидеть две кнопки: "Включить" и "Выключить". При клике на первую из них функции "test_on_off" передается значение 1, а при клике на вторую - 0. В зависимости от полученного значения функция "test_on_off" либо выводит таблицу, либо убирает ее. Это лишь простой пример. Его можно немного улучшить, убрав одну кнопку и подправив код:

<FORM name=test_form method=post>
<INPUT onclick="test_change ()" type=button value="Включить\Выключить">
</FORM>

<SCRIPT language=javascript>
function test_change ()
{
if (document.all.resultat.innerHTML=="")
{document.all.resultat.innerHTML="<table border=1><tr><td>Ура! Работает!</td></tr></table>";}
else
{document.all.resultat.innerHTML="";}
}
</SCRIPT>

<DIV id=resultat></DIV>

Теперь кнопка работает как выключатель: кликнул - включил, еще раз кликнул - выключил, снова кликнул - опять включил...