Акт первый. Форма и содержание
Как известно, каскадные таблицы стилей CSS являются одним из наиболее прогрессивных изобретений человечества (после анальгина). Полезность их заключается в том, что теперь нет необходимости встраивать различные оформительские ухищрения непосредственно в HTML-код, засоряя таким образом природное изящество его конструкций разномастными атрибутами цвета, размера и месторасположения. Есть способ лучше – свести все описание стиля в одну таблицу стилей и подключать ее по мере необходимости. Напомним, что делается это помещением в заголовок HTML-документа строки приблизительно следующего содержания:

Код: Выделить всё
<link rel="stylesheet" type="text/css" id="css1"
title="Default" href="/css/default.css">

Поскольку веб-мастера – это существа, страдающие хроническим избытком оптимизма, они часто полагают, что стилевая разметка, указанная в файле default.css, в состоянии удовлетворить всех посетителей их замечательного сайта. Однако мир куда более жесток, чем предполагает человек любой профессии, хоть как-то связанной с творчеством. Не проходит и одной тысячи посещений, как в почтовый ящик веб-мастера начинают сваливаться многочисленные просьбы «чуть-чуть изменить дизайн». Когда вежливые, а когда и чрезмерно злобные и с угрозами физической расправы. Причем любые изменения в дизайне не только не исправят, но даже ухудшат положение, потому как всегда найдутся люди, которым раньше нравилось больше.

Что же делать? Многие последуют совету упоминавшихся в начале статьи гуру и эти просьбы проигнорируют. Но, не постигнув Тень, нельзя увидеть Света – и мы покажем, как все-таки дать пользователю возможность легким движением мышки получить устраивающий его дизайн.

Итак, предположим, что вы, как и автор этой статьи, предпочитаете видеть черный текст на белом фоне. И, соответственно, прописываете в default.css следующее определение:

Код: Выделить всё
body {background-color: white; color: black}

Но пару дней назад к вам поступила гневная нота от посетителя сайта В.В. Пупкина, который желает видеть на сайте белый текст на черном фоне. Поскольку Пупкин – человек известный и уважаемый, вы не можете отказать ему в этой маленькой просьбе, для чего создаете альтернативную таблицу стилей pupkin.css:

Код: Выделить всё
body {background-color: black; color: white}

Теперь осталось сделать так, чтобы Пупкин и его сторонники видели сайт таким, как нравится им, а прочие посетители – таким, как нравится вам. Для этого необходимо реализовать JavaScript-функцию динамической замены таблицы стилей:

Код: Выделить всё
<script language="javascript">
function changeCSS(name) {
// обратите внимание – идентификатор коллекции
// "styleSheets" чувствителен к регистру:
document.styleSheets[‘css1’].href = ’/css/’ + name +
’.css’;
}
</script>

Осталось добавить в код страницы элементы управления, которые будут позволять менять таблицу стилей. Допустим, это будут кнопки «Стандартная версия» и «Версия для В. Пупкина»:

Код: Выделить всё
<button onclick="changeCSS(‘default’)">
Стандартная версия
<button onclick="changeCSS(‘pupkin’)">

Версия для В. Пупкина

Наслаждайтесь.

Акт второй. Тайное и явное

Усильем посторонним
не помочь
[До времени] раскрыться
нежному
Бутону хризантемы.
Из сборника неизвестного самурая

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

Во-первых, запретим пользователю выделять текст (как и что-либо другое). Это достаточно тривиальная задача, которая решается одним небольшим фрагментом JavaScript-кода в секции HEAD:

Код: Выделить всё
<script language="javascript">
<!--
// устанавливаем периодический вызов функции
// dropSelection с интервалом 5 мс
window.setInterval("dropSelection()",5);
function dropSelection() {
// сбрасываем выделение любой части документа
document.selection.empty();
}
// -->
</script>

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

Код: Выделить всё
<script language="javascript">
<!--
function right(e) {
// если нажата правая или средняя кнопка мышки
if (event.button == 2 || event.button == 3) {
alert("Правая кнопка мышки отключена!");
return false;
}
return true;
}
// устанавливаем функцию right() в качестве обработчика
// события нажатия кнопки мышки
document.onmousedown=right;
document.onmouseup=right;
// -->
</script>

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

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

Код: Выделить всё
<html>
<head>
<title>Домашняя страница В. В. Пупкина </title>
</head>
<body>
<h1>Домашняя страница В. В. Пупкина</h1>
<script language="javascript" src="index.js">
</body>
</html>

Обратите внимание на выделенную строку. Да, вы совершенно правы – содержание скрипта в данном случае загружается из внешнего источника, и в нем может быть все, что угодно. В данном случае в скрипте содержится та самая полезная информация, которую означенный В. В. Пупкин не хочет просто так отдавать простым пользователям для копирования и плагиата. Выводится в браузер она самым простым способом: с помощью метода document.write(). Вот пример файла index.js:

Код: Выделить всё
document.write(’

В этом абзаце содержится информация,’ +
’защищенная <i>строжайшим копирайтом</i>, ’ +

’и требующая тщательного осмысления.

’); А теперь внимание, вопрос: что увидит пользователь, выбравший в меню своего любимого браузера пункт View Source? Абсолютно верно – только содержимое файла шаблона index.html! Все, что находится в index.js, останется за пределами его внимания. Разумеется, никто не помешает пользователю набрать в строке браузера что-то вроде www.pupkin.com/index.js, но это довольно ненадежный способ – «никогда не знаешь, как отреагируют пчелы». Кроме того, чтобы еще больше затруднить пользователю жизнь, имеет смысл внедрить в скрипт функцию какого-нибудь примитивного шифрования (в общем, хватит даже не шифрования, а, к примеру, реверсирования, чтобы невозможно было скопировать фрагменты текста в буфер). Выглядеть это будет приблизительно так:

Код: Выделить всё
copyrightedText =
">p/<мотйарипок мишйажортс нещищаз тскет тотЭ>p<";

function reverse(text) {
resultText = new String;
for(i = 0; i < text.length; i++) {
resultText = resultText +
text.charAt(text.length – i);
}
return resultText;
}

document.write(reverse(copyrightedText));

Этот фрагмент кода выдаст в браузер текст «

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

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

К сожалению или к счастью, трюки с запретом выделять текст и использовать правую кнопку мышки не работают в браузерах, основанных на Mozilla (в том числе и в Netscape 6). Поиск решений для них оставим в качестве домашнего задания. Впрочем, если время не терпит и сроки поджимают, автора можно призвать к ответу по адресу, указанному в подписи.

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