Java Script спешит на помощь (Часть I)
Источник: www.ru-coding.com
С бурным развитием Всемирной Сети у ее пользователей появилось множество замечательных возможностей. Одной из них является бесплатный хостинг. Разместить свою страничку в Сети проще простого, да к тому же и бесплатно. Но всем читателям МК известно, где встречается бесплатный сыр: в награду за услуги размещения информации вы должны терпеть на своих страничках баннеры хостера. Также обычно приходится обходиться без всяческих удобств — возможности использовать SSI, Perl, PHP и SQL как правило отсутствуют, что не только накладывает существенные ограничения на функциональные возможности сайта, но и доставляет немало хлопот web-мастеру. <А в чем, собственно, проблема?> — могут удивиться непосвященные читатели. Действительно, сначала все будет ОК. Страницы, которые создавались часами, будут загружаться на сервер за считанные секунды. Но вот когда через совсем небольшой промежуток времени количество страниц на сайте достигнет нескольких десятков и в очередной раз потребуется добавить новый пункт меню или изменить адрес web-мастера, вот тогда-то вам и надоест грузить и редактировать все эти HTML-файлы. А ведь код таких элементов как меню, шапка и баннеры обычно присутствует на каждой странице ресурса в неизменной форме. И при малейшем изменении одного из элементов (скажем, надо добавить новый пункт меню) приходится редактировать каждый HTML-файл. Так появляется желание поместить эти повторяющиеся элементы в отдельный файл, подключить его к каждой странице и, просто внося в него изменения, влиять на содержимое всех страниц сразу. В свое время с этой проблемой боролись про помощи фреймов. Web-мастерам было очень удобно. А посетителям? Ну, как повезет...
С появлением SSI (Server Side Include — включение на стороне сервера; см. статью Дениса ТИМОШЕНКО <Что сулит нам SSI> в МК №46 (217)) ситуация улучшилась коренным образом. Макроинструкции, исполняемые на сервере, позволили вставлять в документ содержимое другого файла. Таким образом, такие элементы как меню выносятся в отдельный файл и по необходимости подключаются к произвольному количеству web-страниц. Теперь для того, чтобы изменить меню на любом количестве страниц, достаточно изменить один единственный файл. Почему SSI так быстро стал популярным? Все очень просто: документ генерировался на стороне сервера, а пользователь получал готовый результат, даже не подозревая, что он был <сложен> в одно целое из нескольких частей. Все вроде бы наладилось. Но не тут-то было. SSI считался элитным сервисом, кроме того, прилично нагружал сервер. По этой причине только в последнее время SSI появился на некоторых бесплатных хостингах.
Но как же быть тем, кто создал свой сайт на беспланом хостинге довольно давно? Тем, у кого этот сайт разросся, стал популярным и имеет раскрученный URL? Тем, у кого нет средств и желания на приобретение платного хостинга и доменного имени? Что делать тем, кто не хочет переезжать? Здесь на помощь приходит наш старый друг и верный помощник — JavaScript. Благодаря своей простоте и невероятной гибкости, JS позволяет многое. В том числе и подключение содержимого отдельных файлов.
Включение фрагментов кода на JS в документ осуществляется при помощи тэга <script>:
Я не буду останавливаться на толковании тэгов JS, многократно описанных на страницах МК. Кроме того, по-моему, они вполне интуитивно понятны.
<Путь к файлу с JS-кодом> указывает путь и имя файла, содержащего JS-код. Код, содержащийся в указанном файле, подключается к документу, и у посетителя создается впечатление, что код, содержащийся в подключаемом файле, попросту был размещен в документе. При этом при просмотре кода документа посетитель не увидит кода подключаемого файла, а только ссылку на него — сам файл будет загружен отдельно. Из сказанного явствует главное отличие данного метода от принципа SSI: страница собирается не на сервере, а на компьютере пользователя. Но сам пользователь, разумеется, об этом даже не подозревает.
Нетерпеливые читатели удивляться — как же может помочь подключение JS-кода из файла, когда надо подключать HTML или вовсе текст? Запросто! В JS для вставки строки в документ существует специальная команда:
Все, что заключено в кавычки ' ', будет вставлено в документ. Таким образом можно спокойно вставить в файл конструкцию типа document.write('<a href="some link">Link</a>'); и впредь путем изменения лишь одного подключаемого файла влиять на контент всего сайта.
Следует заметить, что в роли кавычек можно использовать как одинарные — ' ', так и двойные — " ", но при этом в содержимом коде должны отсутствовать такие же кавычки. В противном случае перед ними следует ставить знак \:
Напоследок приведу маленький пример:
А вот и сам подключаемый файл:
В результате при открытии файла index.html в него будет подставлено содержимое menu.js, и в окне браузера появятся ссылки, код которых находится в menu.js. Также хочу подчеркнуть, что содержимое файла menu.js будет подставляться внутри тэга <script>, посему простая прописка в файле <a href="some menu link 1">Пункт меню 1</a> (без document.write(' ')) не даст ожидаемого результата.
Часть 2
|
