9. Интерактивное управление динамическим состоянием объектов. Псевдоклассы и псевдоэлементы.

Свойство transition можно применять к чему угодно - фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в %. В качестве события мы так же можем использовать псевдо-классы: focus и active. Вообще использовать transition можно с любыми селекторами.

Итоговая таблица:

- transition-property (Свойство, к которому применяем анимацию)

- transition-duration (Длительность анимации, время в секундах: 0.5s - полсекунды, 60s -одна минута)

- transition-delay (задержка анимации)

Пример:

<style>

.transition2:hover {

transition: 3s;}

</style>

<div class="blok transition2"> плавная смена при наведении на div</div>

Псевдо-классы предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например при работе со ссылками (:link, :visited, :hover, :active, :focus).

Псевдо-классы:

1.:link применяется для не посещенных ссылок.

2.:visited определяет внешний вид посещенных ссылок По умолчанию такие ссылки меняют свой цвет на фиолетовый, но с помощью данного псевдо-класса цвет и другие параметры можно поменять.

3.:active применяется к активным элементам. Например, для активации ссылки, необходимо навести на нее курсор и щелкнуть мышкой.

4.:focus применяется к элементу при получении фокуса. Например, поле текстового ввода получает фокус, когда в него установлен курсор.

5.:hover применяется к элементу, когда на него наведен курсор мыши, но щелчка не происходит.

В CSS2 определены ещё 2 псевдо-класса:

:first-child — первый дочерний элемент.

:lang(language) — язык фрагмента документа.

Псевдо-элементы определяют стиль элементов, чётко не определённых в структуре документа (:first-letter, :first-line), а также позволяют генерировать и стилизировать несуществующее содержимое (:before, :after и свойство content).

В CSS3 псевдо-элементы начинаются с двух двоеточий :: (::first-letter,::first-line, ::before, ::after).

Псевдо-элементы:

1.:first-line привязывает стиль к первой строке текста в элементе веб страницы.

2.:first-letter привязывает стиль к первой букве текста.

3.:after и :before применяется для вставки контента после и перед содержимым элемента.

10. Условные операторы if, if…else. Оператор switch. Способы обработки исключительных ситуаций. Оператор instanceof в js.

Оператор if - это базовый управляющий оператор, позволяющий JS выполнять операторы в зависимости от условий. Оператор if имеет две формы:

1) if (выражение)

оператор

2) if (выражение)

оператор1;

else

оператор2;

Оператор else if не является самостоятельным оператором JS. это лишь распространенный стиль программирования.

if (n == 1) {

// Выполнить блок 1}

else if (n == 2) {

// Выполнить блок 2}

else {}

Оператор switch сравнивает значение выражения с различными вариантами и при совпадении выполняет соответствующий код

switch(n) {

case 1: // Выполняется, если n === 1

break; // Здесь остановиться

case 2: // Выполняется, если n === 2

break; // Здесь остановиться

case 3: // Выполняется, если n === 3

break; // Здесь остановиться

default: // Если все остальное не подходит...

break; // Здесь остановиться }

Конструкция try-catch используется как способ обработки исключений.

try { //код, приводящий к ошибке}

catch (ошибка) //действия при обнаружение ошибки}

Любой код, который может вызвать ошибку, помещается в блок try, а код, который будет обрабатывать найденную ошибку, помещается в блок catch. Блок catch в качестве единственного параметра получает объект, содержащий сведения о возникшей ошибке.

try {

var number = 10;

alert(namber); }

catch(error) { // наше действие на обнаружение ошибки

alert("Упс, мы неправильно указали имя пер-й!");

alert(error.message); //сообщение сгенерированное браузером }

Оператор throw используется для вызова пользовательской ошибки в любой момент t. Он используется со значением любого типа.

throw 12345;

throw “Привет!”;

throw true;

При использовании оператора throw выполнение кода незамедлительно останавливается и переходит к конструкции try - catch, которая ловит переданное значение.

Оператор instanceof используется для проверки, принадлежит ли объект данному типу. Например, при поимке исключения нужно обработать только исключение определенного типа.

В левой части оператора instanceof указывается проверяемый объект, а с правой – функция-конструктор для проверки.

var theDay = new Date(2009, 11, 17);

if (theDay instanceof Date) {

alert("Объект класса Date") }