Элегантный сайт с помощью JavaScript

В данной статье пойдет речь о том, как использовать язык JavaScript для создания качественного сайта, то есть такого сайта, который можно будет легко модифицировать. Конечно, сейчас существуют более продвинутые способы создания дизайна сайта с помощью серверных технологий, таких как, PHP, ASP и так далее. Но для тех, у кого нет возможности использовать возможности сервера (например, сайт находиться на бесплатном хостинге или вы не обладаете знаниями в области серверного программирования), язык JavaScript предоставляет ряд возможностей, которые практически ничем не отличаются от возможностей, которые предоставляют языки серверных сценариев. При использовании языка JavaScript необходимо учитывать то, что посетитель вашего сайта может отключить выполнение сценариев JavaScript, что приведет к потере функциональности вашего сайта и, естественно, к потере дизайна, формирующегося с помощью JavaScript. Но будем надеяться, что посетители вашего сайта не отключают использование языка JavaScript. Тем не менее, при создании дизайна сайта необходимо четко продумать его стиль (основные таблицы стилей должны подключаться не в сценариях, а с помощью тега <LINK REL="StyleSheet" HREF="style.css" TYPE="text/css" />). В таком файле необходимо обойти все слабые места сайта, чтобы посетитель мог перемещаться между основными разделами сайта, таким образом, каждая страница сайта будет доступна для просмотра и чтобы существовало оформление сайта.

Вы можете спросить: зачем использовать JavaScript, если посетитель сайта при выключенном выполнении сценариев ничего этого не увидит. Ответить на этот вопрос достаточно сложно однозначно, но все же большинство пользователей Интернета путешествуют в сети при включенном параметре исполнения сценариев и отображении картинок. Использовать сценарии JavaScript крайне удобно, особенно в тех случаях, когда часть информации повторяется на всех страницах вашего сайта, например, пункты навигации, верхний или нижний колонтитул страницы и так далее. Если ваш сайт состоит из пяти страниц, то вы можете обойтись без использования JavaScript, но если ваш сайт развивается и количество страниц и разделов увеличивается изо дня в день, то вам не обойтись без постоянного изменения и дополнения раздела навигации. А изменять десятки или сотни страниц даже раз в неделю или раз в месяц - это достаточно трудоемкое занятие, ведь вы можете ошибиться и какая-то страница будет вести "в никуда" или можете забыть изменить навигацию на странице, таким образом, новые разделы не будут доступны с этой страницы. Чтобы такого недопускать, лучше изначально использовать сценарии JavaScript; таким образом, вам необходимо будет модифицировать всего лишь один файл сценария, а все его изменения будут распространяться на все страницы сайта, которые используют данный сценарий. Для этого на главной странице сайта достаточно написать примерно следующий текст:

<NOSCRIPT>
Если вы включите выполнение сценариев JavaScript,
то сможете насладиться красивым и удобным дизайном сайта,
а также использовать удобную систему навигации.
</NOSCRIPT>

Например, вы можете создавать такой код:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="pageTop.js"></SCRIPT>
Текст страницы.
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="pageBottom.js"></SCRIPT>

Таким образом, верхний колонтитул страницы полностью будет находиться в файле сценария pageTop.js, а нижний - в файле pageBottom.js. Казалось бы проблема решена: изменился колонтитул страницы - модифицируем соответствующий файл сценария, но нет; нужно взглянуть на эту ситуацию другими глазами. Во-первых, здесь используется сразу два подключения тега сценария, что несколько уменьшает читабельность основного кода страницы. Во-вторых, большое количество тегов сценария увеличивает размер страницы - конечно, кому-то может это показаться не существенным, но если можно оптимизировать размер страницы (а следовательно скорость ее загрузки), то почему бы это не сделать?

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

Перед тегом (или даже после него) </BODY> вставляем тег <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="main.js"></SCRIPT>. В этом файле (которому вы можете задать любое доступное имя) необходимо написать следующий код:

// Возвращает тег <SCRIPT> для указанного файла.
function addScript(AScriptURL) {

  S =
    '<SCRIPT LANGUAGE="JavaScript" TYPE="text\/javascript" ' +
               'SRC="' + AScriptURL + '"><\/SCRIPT>';
  return S;

}  // addScript


mainStr =
  addScript('pageTop.js') +
  addScript('pageBottom.js');

document.write(mainStr);

С помощью данного кода мы подключаем два файла - pageTop.js и pageBottom.js уже непосредственно в файле сценария main.js; таким образом, в исходном коде Web-страницы будет содержаться лишь подключение одного файла сценария - main.js, а уже последний подключит все остальное сам (конечно, если у посетителя страницы будет включена возможность обработки сценариев JavaScript).

Конечно, можно подключить сразу все сценарии, имеющиеся на сайте, но ведь не каждый сценарий выполняется на всех страницах - есть специфические сценарии, которые выполняются только на определенных страницах сайта, таким образом, вы можете подключать сценарии в зависимости от имени страницы:

// Подключаем общие для всех страниц сайта сценарии.
myPath = location.href;
if ( myPath.indexOf('index.html') > 0 ) {
  // Подключаем сценарии главной страницы.
}

if ( myPath.indexOf('sales.html') > 0 ) {
  // Подключаем сценарии страницы продаж.
}

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

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

При экстенсивном методе использования JavaScript вам приходилось часто использовать команду document.write, но при использовании интенсивного метода задавать колонтитулы или другие динамические элементы будем с помощью других возможностей JavaScript.

Давайте взглянем на исходный код данной страницы, в котором удален контент и некоторые несущественные в данном случае элементы:

<HTML>

<HEAD>
  ...
  <META NAME="generator" HTTP-EQUIV="generator" CONTENT="Quick Page 2009" />
</HEAD>

<BODY>
<DIV ID="divContents">
<SPAN ID="spanPageTop" NAME="spanPageTop"></SPAN>
<!-- Непосредственное содержимое страницы. -->
<SPAN ID="spanPageBottom" NAME="spanPageBottom"></SPAN>
</DIV>
</BODY>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="data/main.js"></SCRIPT>

</HTML>

Динамическое содержимое верхнего колонтитула задается с помощью следующей команды в сценарии JavaScript: spanPageTop.innerHTML = 'Верхний колонтитул'. Данная команда позволяет использовать в качестве строчного значения и теги, таким образом, верхний колонтитул может содержать ссылки, таблицы, рисунки и все остальные элементы, которые вы можете использовать на странице.

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

Таким образом, вы можете вводить текст основного содержимого страницы не дожидаясь создания окончательного варианта дизайна страницы и панели навигации.

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

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