Вот типичная ситуация: Вы, полный желанием и фантазией, хотите сделать свой сайт. Вот Вы уже начали делать html странички, но перед Вами встал серьёзный вопрос, на какой сервер помещать сайт? Естественно Вы не будет платить деньги за представленное место на диске сервера, а следовательно будет искать подходящий бесплатный хостинг. Самыми распространёнными бесплатными серверами на сегодняшний день являются Народ, boom, newmail, chat и др. На них нельзя использовать cgi скрипты и ssi , так что если у Вас на сайте к примеру на каждой страничке одна и та же менюшка, то Вам придётся вставлять её в каждый файл. Но более страшная ситуация настанет, если Вы уже имеете окола ста страниц с этой менюшкой и Вам потребовалось добавить в неё новый раздел. Вас ждёт долгое и мучительное исправление страниц, а затем закачивание их на сервер.
Умные люди уже давно придумали директиву ssi #include, которая на стороне сервера (т.е. ещё до того, как страничка дошла до пользователя) вставляет внутрь html файла в указанном месте содержимое другого файла, в котором и лежит эта самая менюшка, и пользователю приходит файл, в содержимом которого уже есть меню. Но ведь использование такой замечательной директивы запрещено на большинстве бесплатных хостингов.
Вместо ssi можно воспользоваться обычным javascript. Он выполняется на стороне пользователя (т.е. уже на компьютере человека, после того как к нему пришла страничка). Вот как это работает: сначала страничка запрашивает файл с java-скриптом, как, например, обычный рисунок, затем скрипт печатает в браузере определённый текст, например менюшку.
Этот текст выводит строчку с e-mailом автора страницы.
<html><body> <i>Содержимое страницы, какие-нибудь тексты и т.д.</i> <script language=javascript> document.write (<br>О жалобах и предложениях пишите на , <a href=mailto:vasya@pupkin.ru>vasya@pupkin.ru</a>) </script> </html></body>
Содержимое страницы, какие-нибудь тексты и т.д. <script language=javascript> document.write (
О жалобах и предложениях пишите на , vasya@pupkin.ru) script>
Даже ежу понятно, что document.write () - это метод объекта document для вывода текста. Если текст для вывода не помещается в одну строчку, его можно перенести, поставив кавычку и запятую, а на следующей строчке опять поставить кавычку и продолжить текст. Прошу заметить, что в тексте для вывода можно использовать html тэги!
Итак, мы заменили обычный html код на javascript. Теперь вынесём код скрипта в отдельный файл и назовём его скажем my_e-mail.js
Вот содержимое этого файла:
document.write (<br>О жалобах и предложениях пишите на , <a href=mailto:vasya@pupkin.ru>vasya@pupkin.ru</a>)
Обратите внимание, что в файле тэг <script language=javascript> писать не надо.
Теперь исправляем html страничку следующим образом:
<html><body> <i>Содержимое страницы, какие-нибудь тексты и т.д.</i> <script language=javascript src=my_e-mail.js></script> </html></body>
Результат этого кода в сочетании с файлом my_e-mail.js даст тот же результат, что и в первом примере, так что теперь вставляя строчку <script language=javascript src=my_e-mail.js></script> в любом месте страницы, будут выведен e-mail автора. Впоследствии он может измениться и нужно будет исправить только файл с javascriptом. В этом и директива #unclude и javascript одинаковы. Но у скрипта есть свои приемущества и недостатки. Начнём с недостатков: 1) если поисковая машина начнёт закачивать этот файл, то в нём не будет содержимого java-скрипта, а следовательно индексация страницы будет происходить плохо (естественно не всей страницы, а только текста этого скрипта). Приемущества: 1) javascript работает во всех браузерах, 2) файл скрипта сохраняется в temperatoty internet files, а значит при обращении к этой же странице или к другой, но использующую этот же скрипт, он будет не скачиваться заново, а загрузится из временных файлов интернет. Это особенно хорошо, если файл занимает 20 КБ и более.
Теперь рассмотрим конкретный случай. Например вы делаете страницу, которая соответствует шаблону.
Вот html текст шаблона:
<table align=center width=300 bordercolor=#c0c0c0 border=1 cellspacing=0 cellpadding=5> <tr> <td><img alt=Логотип width=100 height=50></td> <td><img alt=Баннер 468x60 width=200 height=26></td> </tr> <tr> <td><b>Меню</b><br> <a href=#>Раздел #1</a><br> <a href=#>Раздел #2</a><br> <a href=#>Раздел #3</a> </td> <td>Текст страницы или что-нибудь ещё. Текст страницы или что-нибудь ещё.</td> </tr> </table><br> <center>О жалобах и предложениях пишите на <a href=mailto:vasya@pupkin.ru>vasya@pupkin.ru</a></center>
Если посмотреть на шаблон, то можно сразу сказать, что нужно не менее четырёх скриптов: одни на логотип, другой на баннер 468x60, третий на меню, а четвёртый на e-mail. Но если Вы внимательно посмотрели код шаблона, то наверное заметили, что можно обойтись всего двумя скриптами. Посмотрев этот же код но с разметками начала и конца java-скриптов всё станет ясно.
Текст страницы или что-нибудь ещё. Текст страницы или что-нибудь ещё.
НАЧИНАЕТСЯ ВТОРОЙ СКРИПТ </td> </tr> </table><br> <center>О жалобах и предложениях пишите на <a href=mailto:vasya@pupkin.ru>vasya@pupkin.ru</a></center> КОНЧАЕТСЯ ВТОРОЙ СКРИПТ
На скрипты текст разбит, осталось только написать document.write и выделить его в кавычки.
Текст страницы или что-нибудь ещё. Текст страницы или что-нибудь ещё.
НАЧИНАЕТСЯ ВТОРОЙ СКРИПТ document.write(</td>, </tr>, </table><br>, <center>О жалобах и предложениях пишите на , <a href=mailto:vasya@pupkin.ru>vasya@pupkin.ru</a></center>) КОНЧАЕТСЯ ВТОРОЙ СКРИПТ
Таким образом, если у Вас произойдет какие-либо изменения в дизайне или в расположении элементов, Вам нужно будет просто изменить 2 javascriptа.
