Способы применения CSS

	Переопределение стиля внутри элемента разметки	Переопределение стиля для элемента разметки	Создание и использование классов
Синтаксис	style=”<аттр.>:<зн-ие>;<аттр.>:<зн-ие>;… ”	<тег> {<аттр.>:<зн-ие>;<аттр.>:<зн-ие>;… }	.<класс> {<аттр.>:<зн-ие>;<аттр.>:<зн-ие>;… }
Пример создания стиля	<div style=’color:”blue”; background-color:”red”; width:300; height:100;’> …	div {color:”blue”; background-color:”red”; width:300; height:100;} </style>	.d1 {color:”blue”; background-color:”red”; width:300; height:100;} </style>
Пример использования стиля	<div>…	<div class=”d1”>…
Особенности использования	Стиль применяется только к текущему блоку	Стиль применяется ко всем блокам DIV	Стиль применяется ко всем блокам (теги DIV,P,TABLE,TD,…), в которых указан описанный класс: class=”d1”

 

Синтаксис обращения к атрибутам CSS в Javascript

 

Синтаксис обращения к атрибутам CSS в Javascript:

<имя объекта>.style.<атрибут CSS>

 

Примеры:

paragraf1.style.textAlign=“center”;

D1.style.display=“block”;

 

“paragraf1” и “D1” – значения параметра id соответственно в тэгах <p> и <div>: (<p id=”paragraf1”>, <div id=”D1”>).

 

В javascript атрибуты CSS, состоящие из 2 слов, между которыми стоит «-», такие как: background-color, margin-left, font-weight, пишутся слитно, но второе слово пишется с заглавной буквы: backgroundColor, marginLeft, fontWeight

Пример создания

<style>.1 { margin-left: 10; display:none; color:#008000 } </style>

(Т.е. создан класс с названием 1. Для него создан следующий стиль: отступ слева 10 пикселов, неотображаемый, цвет текста темно-зеленый)

и использования

<div id=”d1” class=”1”> Липа <br> Ясень <br> Дуб </div>

 

Особого внимания требует фраза display:none; Это означает, что по умолчанию блок, к которому применен данный класс, не отображается на экране. Для его отображения требуется, чтобы при совершении какого-то события над другим объектом (например, наведении мыши на другую область, либо щелчке по объекту), данное свойство принимало значение “block” (d1.style.display="block"). По такому принципу создаются развертываемые структуры.

 

Синтаксис, операторы, операции

\\	Комментарий
{}	начало и конец блока
;	разделение операторов в одной строке
+ - * /	арифметические операции
=	оператор присвоения
==,!=,>,>=,<,<=	проверка на равенство, неравенство, больше, больше или равно, меньше, меньше или равно

 

Переменные

Переменные объявляются ключевым словом var.

var a

Можно сразу присвоить начальное значение переменной.

var a=5

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

Основные типы данных

Их 4: Число, Строка, Логический тип и Объект.

Явно указывать типы переменных не требуется.

Переменные бывают локальными и глобальными.

Локальные объявляются и действуют внутри тела функции. Глобальные объявляются за пределами функций. Их действие распространяется на весь скрипт.

 

Функции преобразования типов

parseInt() – преобразование к целому числу

parseFloat() – преобразование к вещественному числу

Чтобы преобразовать к строке, достаточно в конце выражения прибавить пустую строку.

I= parseInt(“5”)

F= parseFloat(S)

S=55+””

 

Для проверки не является ли выражение числом, есть функция IsNaN().

Расшифровывается Is Not a Number (это не число).

Если выражение не числовое, возвращает true(истина) иначе

false (ложь).

A=isNaN(“4”) \\ true

B=isNaN(“cc”) \\ false

 

 

Объекты

Массивы

Массивы объявляются следующим образом:

var A=new Array(4)

Обращение к массивам выполняется по индексу:

A[0]=10

A[1]=A[0]+5

 

Пример. Формирования массива цветков

var Flowers=new Array(4)

Flowers[0]=Ромашка

Flowers[1]=Ландыш

Flowers[2]=Роза

Flowers[3]=Тюльпан

 

Зачастую используются параллельные массивы.

Например, в данном случае можно в параллельном массиве указывать цвета данных цветков.

var Colors=new Array(4)

Colors[0]=Белый

Colors[1]=Белый

Colors[2]=Красный

Colors[3]=Красный

 

 

Строки

Строки объявляются следующим образом:

var S=new String()

Методы:

indexOf() - определяет номер первого вхождения подстроки в строку. Если вхождения нет, функция возвращает -1.

 

Пример.

var S=new String()

S="индустриализация"

I=S.indexOf("@") \\ результат -1, т.к. нет вхождения символа @ в строку S

L=S.indexOf("н") \\ результат 1

Условный оператор

Для проверки нужно использовать условный оператор if.

Его синтаксис:

if (условие) {операторы, запускаемые в случае выполнения условия}

[else {операторы, запускаемые в случае невыполнения условия}][1]

 

 

В условии можно использовать == проверка равенства, <, <=, >, >=

&& - логическое «И», || - логическое «ИЛИ»,! - логическое «НЕ».

 

Примеры.

Пример 1. Производится проверка заголовка (value) объекта на заполненность: если он пуст, выдается сообщение об ошибке и производится выход из функции.

if (obj.value=="") {alert("Строка пуста"); return false}

 

Пример 2. Выделение фона области p1 зеленым цветом при условии, что переменная s >=3 и <=5, и красным цветом – в противном случае.

if (s>=3 && s<5) {p1.style.backgroundColor=”green”}

else

{p1.style.backgroundColor=”red”}

 

 

Одна из основных областей применения данного оператора – проверка корректности введенных данных.