CFA LogoCFA Logo Computer
Новости Статьи Магазин Драйвера Контакты
Новости
RSS канал новостей
В конце марта компания ASRock анонсировала фирменную линейку графических ускорителей Phantom Gaming. ...
Компания Huawei продолжает заниматься расширением фирменной линейки смартфонов Y Series. Очередное ...
Компания Antec в своем очередном пресс-релизе анонсировала поставки фирменной серии блоков питания ...
Компания Thermalright отчиталась о готовности нового высокопроизводительного процессорного кулера ...
Компания Biostar сообщает в официальном пресс-релизе о готовности флагманской материнской платы ...
Самое интересное
Программаторы 25 SPI FLASH Адаптеры Optibay HDD Caddy Драйвера nVidia GeForce Драйвера AMD Radeon HD Игры на DVD Сравнение видеокарт Сравнение процессоров

АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 2003 ГОД

Java Script спешит на помощь 2

Владислав ПУТЯК

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

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

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

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

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

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

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

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

Ну и сам dat.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-вставке, то грузиться они будут мгновенно. Кроме того, такая вставка не будет бросаться в глаза и нарушать дизайн сайта.

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

Рекомендуем ещё прочитать:






Данную страницу никто не комментировал. Вы можете стать первым.

Ваше имя:
Ваша почта:

RSS
Комментарий:
Введите символы или вычислите пример: *
captcha
Обновить





Хостинг на серверах в Украине, США и Германии. © www.sector.biz.ua 2006-2015 design by Vadim Popov