Java Script в помощь

Автор: Владислав Путяк Сайт: http://docs.com.ru/

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

   Ну вот, казалось бы, чего еще желать? А ненасытным web-мастерам все мало. Теперь они хотят построить весь сайт на одном шаблоне! А почему бы и нет? Ведь дизайн страниц в пределах сайта не изменяется, меняется лишь содержание страниц. Стоит лишь в нужный момент подставить нужный адрес файла, содержащего код, который необходимо вставить. А вот как сделать, чтоб один шаблон, скажем, файл 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-вставке, то грузиться они будут мгновенно. Кроме того, такая вставка не будет бросаться в глаза и нарушать дизайн сайта.

   Ну, вот и все. Удачного сайтостроения!