18:51
Александр
Java Script спешит на помощь - 2
В предыдущей статье я рассказал вам о том, как с помощью JavaScript кHTML документам можно подключать код, содержащийся в отдельном файле.
Таким образом, повторяющиеся елементы сайта (меню, ссылки, адреса почты
и прочее) можно вынести в отдельный файл и подключать его к нужным
страницам. После переноса части кода страниц в отдельный файл
меньшается общий размер документов сайта, а изменение повторяющихся
пунктов сводится к редактированию и загрузке на сервер одного-единого
файла.
Ну вот, казалось бы, чего еще желать? А ненасытным вебмастерам все
мало. Теперь они хотят построить весь сайт на одном шаблоне! А почему
бы и нет? Ведь дизайн страниц в пределах сайта не изменяется, меняется
лишь содержание страниц. Стоит лишь в нужный момент подставить нужный
адрес файла, содержащего код, который необходимо вставить. А вот как
сделать, чтоб один шаблон, скажем файл 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 вставке, то грузиться
они будут мгновенно. Кроме того, такая вставка не будет бросаться в
глаза, и нарушать дизайн сайта.
Ну, вот и все. Удачного сайтостроения!
Автор - Владислав Путяк
0 коментарі:
Отправить комментарий