Основные правила для JavaScript

В данной главе мы не будем подробно рассматривать все правила форматирования для JavaScript, а ограничимся только лишь основными общими правилами, которые, впрочем, присущи любому языку программирования. Рассмотрим пример:

Пример кода JavaScript

function initPage()

{

var nav = document.getElementById("navigation-top");

if (nav)

{

var nodes = nav.getElementsByTagName("li");

for (var i = 0; i < nodes.length; i++)

{

    nodes[i].onmouseover = function ()

    {

       this.className += " hover";

    }

    nodes[i].onmouseout = function ()

    {

       this.className = this.className.replace(" hover", "");

    }

}

}

}

if (window.attachEvent &&!window.opera)

window.attachEvent("onload", initPage);

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

Cascading Style Sheet

Данная глава описывает основные темы Cascading Style Sheet (CSS), на которые следует обратить внимание, и о которых должен знать каждый профессиональный HTML-разработчик. Описанные здесь сведения о CSS не предендуют на полноту изложения всех его возможностей и перечня всех существующих свойств. Напротив, здесь изложены обобщенные сведения, логически сгруппированные.

Немного о стандартах

На текущий момент существуют следующие спецификации: CSS 1 и CSS 2 (точнее CSS 2.1). Новая спецификация CSS 3 находится на стадии разработки.

CSS 1 вышла 17 декабря 1996 года с последующей ревизией 11 января 1999 года. Она содержит основные свойства CSS, известные с тех времен, такие как свойства шрифта, отступов, цвета и т.д.

Спецификация CSS 2 начала свое существование с 1998 года. Помимо свойств CSS 1, она содержит свойства абсолютного позиционирования элементов, автоматической нумерации элементов списка, разрыва страниц, направления текста справа налево и другие.

Не рекомендуется использовать CSS-свойства, являющиеся специфическими для конкретного браузера и не входящие в число допустимых стандартом CSS 1 или CSS 2. Далеко не все браузеры имеют полную реализацию стандартов W3C. Более того, одни и те же свойства могут иметь существенные различия их реализации в разных браузерах. Приоритеты обработки CSS инструкций, точнее некоторые ее особенности, также могут отличаться.

Вывод прост – необходимо придерживаться использования стандартных CSS-свойств, реализация которых одинакова в разных браузерах. Специфические и нестандартные CSS-свойства необходимо использовать только в крайних случаях. Не забывайте также о правильном форматировании CSS, описаном в разделе 4.3.

Более полную информацию о стандартах CSS можно найти по адресу http://www.w3.org/Style/CSS/.

Селекторы

Селектор (англ. selector) – это та часть записи в CSS, которая отвечает за селекцию узлов HTML-документа, к которым будет применен указанный стиль. Например:

Селектор CSS и указание стиля

ul.navigation a {text-decoration: none;}

В примере, селектором является строка «ul.navigation a», который говорит о том, что стиль (в данном случае «text-decoration: none;»), будет применяться ко всем элементам a, которые находятся внутри элемента ul с классом «navigation», например для всех ссылок следующей структуры:

Фрагмент HTML к которому будет применен CSS

<ul class=”navigation”>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Catalog</a></li>

<li><a href=”#”>About Us</a></li>

</ul>

Селекторы бывают разных видов. Давайте их рассмотрим.

Начнем с самого простого, а именно с селектора элемента.

Селектор элемента

div {font-size: 12px;}

Название любого HTML-элемента может являться селектором. В примере выше, это «div», который означает, что стиль «font-size: 12px» будет применен ко всем элементам div документа.

Селекторы класса предназначены для определения стиля для элементов с предопределенным классом, т.е. значением атрибута «class»:

Селекторы класса

table.details {table-layout: fixed;}

.heading {color: #0f0;}

Как видно из примера, имя класса следует после точки, при этом имя элемента может быть не указано, что в свою очередь означает, что стиль будет применен к любым элементам с заданным классом.

Напомню, что в соответствии со стандартом W3C, имя класса чувствительно к регистру. В любом случае, при написании имени класса, рекомендуется придерживаться правил, описанных в 4.3.

Еще одно замечание касается того, что в качестве значения атрибута class допускается перечисление нескольких классов, разделенных пробелом (см. также 6.2.4.4). Например:

Указание нескольких классов для элемента

<strong class=”temperature critical”>359</strong>

В данном случае к элементу strong будут применены значения стилей обоих классов: «temperature» и «critical».

Селектор по идентификатору, т.е. по значению атрибута id, выглядит схожим образом, что и селектор класса, за исключением символа разделителя. В этом случае это – «#». Селекторы по идентификатору можно использовать с тем же успехом, что и селекторы класса, однако следует помнить, что значение id должно быть уникальным в пределах одного HTML-документа. В документе не должно встречаться более одного элемента с одинаковым идентификатором. В отличие от класса, нельзя также указывать несколько идентификаторов для элемента через пробел.

Селектор по идентификатору

ul#navigation {background: #f0f0f0;}

 

#footer {border: 1px solid #f00;}

По аналогии с классом, имя элемента в селекторе указывать не обязательно.

Контекстный селектор синтаксически представляет собой несколько простых селекторов, разделенных символом пробела.

Контекстный селектор

div.content-area p ul {list-style: none;}

Такая запись отменяет стиль отображения элементов списка по умолчанию для всех ненумерованных списков, которые находятся внутри параграфов, которые, в свою очередь находятся внутри элементов div с классом «content-area».

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

HTML-фрагмент с повторяющимися классами

<ul id=”navigation”>

<li><a class=”nav-link” href=”#”>Home</a></li>

<li><a class=”nav-link” href=”#”>Catalog</a></li>

<li><a class=”nav-link” href=”#”>About Us</a></li>

</ul>

Может быть преобразован в код вида:

Оптимизированный HTML-фрагмент

<ul id=”navigation”>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Catalog</a></li>

<li><a href=”#”>About Us</a></li>

</ul>

Используя при этом контекстный селектор следующего вида:

Контекстный селектор

#navigation a {

/* styles go here */

}

В случае, когда нескольким селекторам должен соответствовать один и тот же стиль, можно воспользоваться группировкой селекторов, разделяя их запятой.

Группировка селекторов

ul.navigation a,

a.cross-link {

/* styles go here */

}

Также необходимо иметь ввиду, что в CSS имеет место наследование, когда свойства, определенные для родительского элемента влияют на свойства элементов ему принадлежащих. Например, если мы определим цвет текста для элемента body, то такой же цвет текста будут иметь все элементы p в него входящие, до тех пор, пока эти свойства не будут переопределены другими селекторами.

W3C также предусматривает другие виды селекторов для CSS, помимо перечисленных, однако ввиду того, что на данный момент они поддерживаются не всеми браузерами, мы их рассматривать не будем.

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