Давайте рассмотрим, как научиться использовать все преимущества современных браузеров, не ограничивая при этом пользователей более старых версий.
Javascript: храним отдельно
Одна из сильных сторон JavaScript заключается в том, что его можно поместить в отдельный файл. Как и для CSS это означает, что можно присвоить одну коллекцию функций для каждой страницы сайта, и если нам нужно изменить ее функциональность, можно сделать все это в одном документе, что предпочтительнее, чем перебирать все страницы и менять какой-то один участок кода на другой.
Например, мы можем подключить только один такой файл, который будет обеспечивать всю логику функционирования страницы в клиентском браузере:
<script type="text/javascript" src="scripts.js"></script>
Javascript — это расширение
Мы используем JavaScript, только чтобы улучшить уже существующую функциональность, так как мы не можем на него полностью полагаться. JavaScript может быть выключен или отфильтрован прокси-серверами и файерволлами компаний, обеспечивающих безопасность. Мы никогда не можем принимать JavaScript за данноcть.
Это не означает, что мы совсем не можем использовать Javascript, это лишь значит, что мы можем добавлять его только как дополнительную возможность. Страницы должны работать и при выключенном JavaScript — это одно из основных правил «ненавязчивого» JavaScript.
Давайте рассмотрим для примера следующий HTML-код:
<form action="/">
<p><label for="login">Логин:</label>
<input type="text" name="login" id="login"/></p>
<p><label for="password">GПароль:</label>
<input type="password" name="password" id="password"/></p>
<p><input type="button" onclick="checkform()" value="Войти"/></p>
</form>
Если у пользователя отключен JavaScript (или он отрабатывает некорректно в силу особенностей различных браузеров), то зайти на сайт будет просто невозможно. И это только по причине неверного проектирования, а не ошибки на стороне сервера или неверного расположения элементов в дизайне.
Мы можем исправить этот фрагмент, заменив button на submit и добавив обработчик события submit для формы:
<p><input type="submit" value="Войти"/></p>
...
<script type="text/javascript">
document.forms[0].onsubmit = checkform;
</script>
Доверять, но проверять
Множество ошибок в JavaScript происходит просто потому, что разработчики слишком ленивы, чтобы проверить, доступен или нет данный объект или метод. Всегда при использовании какой-либо внешней переменной (которая не определена явно в этой функции) либо функционала, зависящего от браузера (например, DOM-методов), необходимо быть уверенным, что используемый объект или метод существует.
В качестве примера правильных проверок можно привести следующий код:
function color(object, color) {
if(object) {
if (color) {
if (object.style) {
object.style.color = color;
}
}
}
}
Если мы хотим убедиться, что браузер поддерживает W3C DOM, то достаточно провести следующую проверку:
if (document.getElementById) {
}
В общем случае нет никакой необходимости полагаться на передаваемую браузерами строку агента.
Доступ к элементам
Каждый XML- (а также и HTML-) документ — это дерево узлов. Узел — часть этого дерева (в качестве аналогии можно привести дерево файлов и директорий на жестком диске). Давайте посмотрим, какие функции и атрибуты мы можем использовать, чтобы перемещаться по дереву документа и выбирать необходимые нам узлы.
getElementById('elementID')
возвращает элемент с идентификатором, равным elementID
getElementsByTagName('tag')
возвращает массив элементов с именем tag
Естественно, мы можем смешивать и сочетать эти два варианта. Несколько примеров:
document.getElementById('nav').getElementsByTagName('a')[1];
//возвращает вторую ссылку внутри элемента, который имеет ID 'nav'
document.getElementsByTagName('div')[1].getElementsByTagName('p')[3];
//возвращает четвертый параграф внутри второго div в документе.
Полный перечень всех DOM-методов, которые поддерживаются сейчас практически всеми браузерами, здесь приводить не имеет смысла. При желании с ними можно ознакомиться на сайте w3.org.
Полезные советы
Мы способны получить доступ к любому элементу документа и затем изменить этот элемент, и мы можем улучшить работу пользователя, не привязываясь к JavaScript. Однако возможны некоторые проблемы общего характера.
Прежде чем обращаться к элементу, нужно убедиться, что он существует.
JavaScript-код не должен быть привязан к верстке, только к DOM-дереву. Лишний перевод строки может быть прочитан как новый текстовый узел, разметка может поменяться, а менять скрипты при каждом изменении дизайна не очень хочется.
HTML, полученный через DOM-методы, в большинстве случаев невалиден. Если мы хотим его повторно использовать, лучше всего привести его к валидному виду или применять innerHTML для всех таких случаев (задавая в качестве параметра часть валидного документа).