sitetree Содержание

1. Введение. Материалы, ресурсы.

Истрия HTML


История HTML начинается в далекие 80-е годы 20-века. Именно в то время появился этот язык. Он был создан Тимом Бернс-Ли, сотрудником сервисного компьютерного центра Европейского института физики частиц (CERN) (Женева, Швейцария). Тим Бернс-Ли работал тогда над созданием системы, позволяющей научным центрам в разных частях мира обмениваться данными, совместно работать над научными проектами.


За его основу был взят язык SGML (Standard Generalized Markup Language), разработанный Чарльзом Гольфардом в 1969 году. При разработке HTML Тим Бернс-Ли использовал стандарты этого языка, например, использовал открывающие и закрывающие дескрипты (<>…</>).


Но идея гиперссылок и URL-адресов в стиле структуры доменных имен www.имя.имя была впервые реализована именно Тимом Бернс-Ли.


С тех пор язык HTML и стандарты www много раз были модифицированы и улучшены. Особенно в 90-е годы 20-го века, когда сеть Интернет развивалась особенно динамично.


Учебные материалы


W3Schools
HTMLbook
Google
Блоги, журналы, книги...
Notepad++

HTML (HyperText Markup Language) - язык разметки документа, описывающий форму отображения информации на экране компьютера.


HTML-код состоит из оформленных едениц - тегов. С их помощью описывается вся структура документа. Теги выделяются угловыми скобками "<" и ">", между которыми указывается имя тега. Типы тегов:



  • парные (<strong> </strong>) - имеющие открывающий и закрывающий тег;
  • одинарные (<br />) - не имеющие закрывающего тега.

Некоторые теги могут иметь атрибуты. Атрибуты указываются после имени тега через пробел в формате атрибут='значение' (<img src='myimage.jpg'/>).


Основной скелет документа выглядит так:


						<!DOCTYPE html> <!--Объявление формата документа -->
						<html>
							<head>
								<!--Техническая информация о документе -->
								<title></title>
							</head>
							<body>
								<!-- Основная часть документа -->
							</body>
						</html>
						
try it yourself!

Тег <!DOCTYPE html> позволяет браузеру определить формат файла и правильно отбразить все инструкции.

Виды DOCTYPE

Раздел head сожержит техническую информацию о странице - заголовок, её описание и ключевые слова для поисковых машин и т.п.


Единственным обязательным тегом в разделе head является тег <title>.


Для удобства, так же добавим в раздел head следующую строку:
						<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
						

В разделе body распологается всё содержимое документа.


Тег коментария

Текст, заключённый между тегами <!-- и -->, не отображается браузером. Использование коментариев в исходном коде позволит быстро найти нужный фрагмент. Это особенно важно ля начинающих веб-разработчиков.


Перевод строки

Для разделения строк используется одинарный тег <br />.


Горизонтальная линия

Одинарный тег <hr /> позволяет провести горизонтальную линию.


Заголовки

Заголовки могут иметь шесть различных размеров: <hx>Заголовок</hx>, где х - число от 1 до 6.


Заголовок с номером 1 является самым крупным. Заголовок с номером 6 - самым мелким.

try it yourself!

Текст

Тег <p></p> позволяет разбить текст на отдельные абзацы.


Для форматирвоания текста используются следующие теги:


  • <strong></strong> - для выделения текста жирным
  • <b></b> - для выделения текста жирным
  • <em></em> - для выделения текста курсивом
  • <i></i> - для выделения текста курсивом
  • <ins></ins> - подчеркнутый текст
  • <del></del> - зачеркнутый текст
  • <small></small> - текст c размером меньше обычного
  • <big></big> - текст c размером больше обычного
  • <sup></sup> - создание верхнего индекса
  • <sub></sub> - создание нижнего индекса
  • <blockquote></blockquote> - для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.
  • <code></code> - для отображения одной или нескольких строк текста, который представляет собой программный код. Дополнительные пробелы внутри контейнера не учитываются, так же, как и переносы текста
  • <pre></pre> - для отображения одной или нескольких строк текста, который представляет собой программный код.
try it yourself!

Списки

Список - это набор упорядоченых абзацев текста, помеченных специальными значками (маркированные списки) или цифрами (нумерованные списки).


Маркированные списки

Маркированый список помещается внутри пары тегов <ul></ul>. Каждый пункт заворачивается в тег <li>. Пример:


						<ul>
							<li>Первый пункт</li>
							<li>Второй пункт</li>
						</ul>
						
Нумерованные списки

Нумерованный список помещается внутри пары тегов <ol></ol>. Каждый пункт заворачивается в тег <li>. Тег <li> может иметь атрибут value, который позволяет изменить номер данного элемента списка.Пример:


						<ol>
							<li>Первый пункт</li>
							<li value='5'>Второй пункт</li> <!-- второй пункт будет иметь номер 5 -->
						</ol>
						

Блоки

Теги <div> и <span> визуально ничего не делают. Зато они позволяют сгруппирвоать несколкьо элементов страницы в один. крмое того тег <div> используется для блочной вёрстки страницы. Если необходимо выделить фрагмент текста внутри абзаца, то следует использовать тег <span>, так как тег <div> отобразит фрагмент на новой строке, а не внутри абзаца.


Задание 1
Текст можно взять тут

Ссылки

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


Ссылки добавляются в документ с помощью тега <a>. Сам тег <a>. должен распологаться внутри блочного тега.


Основным атрибутом тега <a> является href. Именно этот параметр задаёт URL-адрес страницы, которая будет загружена при щелчке мыши на указателе. В качестве указателя может быть текст или изображение.


						<a href='http://google.com'>Go to Google</a>
						

Внешние гиперссылки

Внешние ссылки направляют на дргую страницу при щелчке на указатель.


URL-адреса бывают абсолютными и относительными.


Абсолютный адрес соержит обозначение протокола, доменный адрес, путь к файлу, а также имя файла:


http://mysite.com/folder/file.html

При относительном задании адреса путь определяется с учётом местоположения страницы, на которой находится ссылка.


						<a href='file2.html'>Link</a>
						<a href='../file2.html'>Link</a>
						<a href='../folder/file2.html'>Link</a>
						

Внутренние гиперссылки

С помощью внутренних ссылок можно создать ссылки на разные разделы текущей страницы.


Внутренние ссылки также вставляются с помощью тега <a> с одним отличием - атрибут href содержит имя якоря, а не URL-адресс. Перед именем якоря ставится знак #:


						<a href='#chapter1'>Chapter 1</a>
						

Якорь создаётся с омощью тега <a>, но вместо атрибута href используется параметр name, который задаёт имя якоря:


						<a name='chapter1'></a>
						

Также можно ссылаться на якорь другого документа:


						<a href='http://mysite.com/file.html#chapter1'></a>
						

Гиперссылки на адрес электронной почты

Ссылка на адрес электронной почты выглядит так:


<a href='mailto:mail@mysite.com'>Text</a>

Вместо URL-адреса указывается адрес электронной почты, перед которым добавляется 'mailto:'.


Цвет

Существуют несколько основных способов представления цветов в вебе.


В виде #123ABC. Представление в виде трёх пар шестнадцатеричных цифр, где каждая пара отвечает за свой цвет:


  • две первые цифры — красный
  • две в середине — зелёный
  • две последние цифры — синий

Возможно также краткое представление цвета в виде #ABC, что будет интерпретировано как #AABBCC.


Представление ключевыми словами, например green, black. Есть 17 ключевых слов, которые можно использовать вместо кода:


						aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
						olive, orange, purple, red, silver, teal, white, yellow
						

В виде rgb(*,*,*), где «*» — числа от 0 до 255, обозначающих количество соответствующего цвета (красный, зелёный, синий) в получаемом.


В HTML-документе таблицы используются как средство представления данных.


Структура опписывающая таблицу:


						<table>
							<caption>Заголовок</caption>
							<tbody>
								<tr>
									<td></td>
								</tr>
							</tbody>
						</table>
						

Таблица вставляется в документ с помощью парного тега <table>. Отдельная ячейка таблицы описывается тегом <td>, а ряд ячеек тегом <tr>. Тег <caption> позволяет задать заголовок таблицы.


Для логического форматирования таблицы предназначены теги <thead>, <tfoot>, <tbody>. Тег <thead> описывает заголовок таблицы, тег <tfoot> - подвал, <tbody> - основное содержимое.


Атрибуты таблицы
  • border - управлет отображением линий сетки таблицы, а также задаёт толщину рамки вокруг таблицы;
  • cellspacing - задаёт расстояние между рамками соседних ячеек.

Ячейки таблицы
  • colspan - задает количество объединяемых колонок по горизонтали;
  • rowspan - задает количество объединяемых колонок повертикали.

Тег <th> позволяет указать ячейки, которые являются заголовочными. Содержимое таких ячеек выделяется полужирным шрифтом и размещается по центру.

Примеры

ОБЫЧНАЯ ТАБЛИЦА 3X2
A B C
D E F
						<table border='1'>
								<tr>
										<td>A</td> 
										<td>B</td> 
										<td>C</td>
								</tr>
								<tr>
										<td>D</td> 
										<td>E</td> 
										<td>F</td>
								</tr>
						</table>
						
ОБЫЧНАЯ ТАБЛИЦА 3X2 c CAPTION
Table 1
A B C
D E F
						<table border='1'>
								<caption>Table 1<caption>
								<tr>
										<td>A</td> 
										<td>B</td> 
										<td>C</td>
								</tr>
								<tr>
										<td>D</td> 
										<td>E</td> 
										<td>F</td>
								</tr>
						</table>
						
THEAD, TFOOT
1 2 3
1 2 3
A B C
D E F
						<table border='1'>
							<thead>
								<td>1</td>
								<td>2</td>
								<td>3</td>
							</thead>
							<tfoot>
								<td>1</td>
								<td>2</td>
								<td>3</td>
							</tfoot>
							<tbody>
								<tr>
										<td>A</td> 
										<td>B</td> 
										<td>C</td>
								</tr>
								<tr>
										<td>D</td> 
										<td>E</td> 
										<td>F</td>
								</tr>
							</tbody>
						</table>
						
ДВА ПРИМЕРА С ROWSPAN
Item 1 Item 2 Item 3
Item 4 Item 5
						<table border='1'>
								<tr>
										<td>Item 1</td>
										<td rowspan='2'>Item 2</td>
										<td>Item 3</td>
								</tr>
								<tr>
										<td>Item 4</td> 
										<td>Item 5</td>
								</tr>
						</table>
						
Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7
						<table border='1'>
								<tr>
										<td rowspan='2'>Item 1</td>
										<td>Item 2</td> 
										<td>Item 3</td> 
										<td>Item 4</td>
								</tr>
								<tr>
										<td>Item 5</td> 
										<td>Item 6</td> 
										<td>Item 7</td>
								</tr>
						</table>
						
ПРИМЕР С COLSPAN
Item 1 Item 2
Item 3 Item 4 Item 5
						<table border='1'>
								<tr>
										<td>Item 1</td>
										<td colspan='2'>Item 2</td>
								</tr>
								<tr>
										<td>Item 3</td> 
										<td>Item 4</td> 
										<td>Item 5</td>
								</tr>
						</table>
						
ДЕМОНСТРАЦИЯ ЗАГОЛОВКОВ (<th>)
Head1 Head2 Head3
A B C
D E F
						<table border='1'>
								<tr>
										<th>Head1</th> 
										<th>Head2</th> 
										<th>Head3</th>
								</tr>
								<tr>
										<td>A</td> 
										<td>B</td> 
										<td>C</td>
								</tr>
								<tr>
										<td>D</td> 
										<td>E</td> 
										<td>F</td>
								</tr>
						</table>
						
ДЕМОНСТРАЦИЯ COLSPAN И ЗАГОЛОВКОВ
Head1 Head2
A B C D
E F G H
						<table border='1'>
								<tr>
										<th colspan='2'>Head1</th>
										<th colspan='2'>Head2</th>
								</tr>
								<tr>
										<td>A</td> 
										<td>B</td> 
										<td>C</td> 
										<td>D</td>
								</tr>
								<tr>
										<td>E</td> 
										<td>F</td> 
										<td>G</td> 
										<td>H</td>
								</tr>
						</table>
						
ДЕМОНСТРАЦИЯ МНОЖЕСТВЕННЫХ ЗАГОЛОВКОВ, COLSPAN
Head1 Head2
Head 3 Head 4 Head 5 Head 6
A B C D
E F G H
						<table border='1'>
								<tr>
										<th colspan='2'>Head1</th>
										<th colspan='2'>Head2</th>
								</tr>
								<tr>
										<th>Head 3</th> 
										<th>Head 4</th>
										<th>Head 5</th> 
										<th>Head 6</th>
								</tr>
								<tr>
										<td>A</td> 
										<td>B</td> 
										<td>C</td> 
										<td>D</td>
								</tr>
								<tr>
										<td>E</td> 
										<td>F</td> 
										<td>G</td> 
										<td>H</td>
								</tr>
						</table>

						
ДЕМОНСТРАЦИЯ БОКОВЫХ ЗАГОЛОВКОВ
Head1 Item 1 Item 2 Item 3
Head2 Item 4 Item 5 Item 6
Head3 Item 7 Item 8 Item 9
						<table border='1'>
								<tr>
									<th>Head1</th>
									<td>Item 1</td> 
									<td>Item 2</td> 
									<td>Item 3</td>
								</tr>
								<tr>
									<th>Head2</th>
									<td>Item 4</td> 
									<td>Item 5</td>
									<td>Item 6</td>
								</tr>
								<tr>
									<th>Head3</th>
									<td>Item 7</td> 
									<td>Item 8</td> 
									<td>Item 9</td>
								</tr>
						</table>
						
ДЕМОНСТРАЦИЯ БОКОВЫХ ЗАГОЛОВКОВ, ROWSPAN
Head1 Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 Item 8
Head2 Item 9 Item 10 Item 3 Item 11
						<table border='1'>
								<tr>
									<th rowspan='2'>Head1</th>
									<td>Item 1</td> 
									<td>Item 2</td> 
									<td>Item 3</td> 
									<td>Item 4</td>
								</tr>
								<tr>
									<td>Item 5</td> 
									<td>Item 6</td> 
									<td>Item 7</td> 
									<td>Item 8</td>
								</tr>
								<tr>
									<th>Head2</th>
									<td>Item 9</td> 
									<td>Item 10</td> 
									<td>Item 3</td> 
									<td>Item 11</td>
								</tr>
						</table>
						
ПРИМЕР ТАБЛИЦЫ ИСПОЛЬЗУЮЩЕЙ ВСЕ ЭТИ ТЭГИ
Average
Height Weight
Gender Males 1.9 0.003
Females 1.7 0.002
						<table border='1'>
								<tr>      
									<th rowspan='2' colspan='2'></th>
									<th colspan='2'>Average</th>
								</tr>
								<tr>      
									<th>Height</th>
									<th>Weight</th>
								</tr>
								<tr>      
									<th rowspan='2'>Gender</th>
									<th>Males</th>
									<td>1.9</td>
									<td>0.003</td>
								</tr>
								<tr>      
									<th>Females</th>
									<td>1.7</td>
									<td>0.002</td>
								</tr>
						</table>
						
ИСПОЛЬЗОВАНИЕ ROWSPAN/COLSPAN
A 1 2
3 4
C D
						<table border='1'>
								<tr>
										<td  rowspan='2' >A</td>
										<td>1</td>
										<td>2</td>
								</tr>
								<tr>
										<td>3</td>
										<td>4</td>
								</tr>
								<tr>
										<td  colspan='2'>C</td>
										<td >D</td>
								</tr>
						</table>
						
ТАБЛИЦА БЕЗ РАМКИ
Item 1 Item 2 Item 3
Item 4 Item 5
						<table border='0'>
								<tr>      
									<td>Item 1</td> 
									<td rowspan='2'>Item 2</td> 
									<td>Item 3</td>
								</tr>
								<tr>      
									<td>Item 4</td> 
									<td>Item 5</td>
								</tr>
						</table>
						
ТАБЛИЦА С РАМКОЙ ШИРИНОЙ 10
Item 1 Item 2
Item 3 Item 4
						<table border='10'>
								<tr>      
									<td>Item 1</td> 
									<td> Item 2</td>
								</tr>
								<tr>      
									<td>Item 3</td> 
									<td>Item 4</td>
								</tr>
						</table>
						
CELLPADDING И CELLSPACING
A B C
D E F
						<table border='1' cellpadding='10' cellspacing='0'>
								<tr>
										<td>A</td> 
										<td>B</td> 
										<td>C</td>
								</tr>
								<tr>
										<td>D</td> 
										<td>E</td> 
										<td>F</td>
								</tr>
						</table>
						
A B C
D E F
						<table border='1' cellpadding='0' cellspacing='10'>
								<tr>
										<td>A</td> 
										<td>B</td> 
										<td>C</td>
								</tr>
								<tr>
										<td>D</td> 
										<td>E</td> 
										<td>F</td>
								</tr>
						</table>
						
A B C
D E F
						<table border='1' cellpadding='10' cellspacing='10'>
								<tr>
										<td>A</td> 
										<td>B</td> 
										<td>C</td>
								</tr>
								<tr>
										<td>D</td> 
										<td>E</td> 
										<td>F</td>
								</tr>
						</table>
						
A B C
D E F
						<table  border='5' cellpadding='10' cellspacing='10'>
								<tr>
										<td>A</td> 
										<td>B</td> 
										<td>C</td>
								</tr>
								<tr>
										<td>D</td> 
										<td>E</td> 
										<td>F</td>
								</tr>
						</table>
						
Задание 1
Задание 2

Графика


Изображения вставляются в Веб-страницы с помощью одинарного тега <img>. Сам тег <img> должен быть расположен внутри блочного элемента, например <p>, <div> или др. Тег имеет следующие атрибуты:


  • src - URL адрес файла графического изображения (<img src='image.jpg' alt='' />);
  • alt - строка текста, которая будет выводится на месте появления изображения до его загрузки, или если загрузка не удалась.

Элементы форм


Формы предназначены для пересылки данных от пользователя к Веб-серверу.


Тег <input> позволяет вставить в форму элементы управления. Этот тег имеет следующие параметры:


  • type задаёт тип элемента. В зависимости от значения этого поля создаются следующие элементы формы
    • text - текстовое поля ввода;
    • password - поле для ввода пароля, все вводимые символы заменяются звёздочкой;
    • file - поле ввода имени файла с кнопкой Browse, позволяет отправить файл на Веб-сервер;
    • checkbox - поле для установить флажка;
    • radio - элемент-переключатель;
    • reset - кнопка, при нажатии которой вся форма очищается;
    • submit - кнопка, при нажатии которой происходит отправка данных, введённых в форму;
    • button - обычная командная кнопка;
    • hidden - скрытый элемент, значение которого отправляется вместе со всеми данными формы.
  • name - задаёт имя элемента управления;
  • value - текст поля по умолчанию(text ), текст отображаемый на кнопке (submit, button), определяет значение скрытого поля (hidden).

Парный тег <textarea> создаёт поле для ввода многострочного текста.


						<textarea name='text1' cols='20' rows='10'>Text</textarea>
						
  • name - уникальное имя поля;
  • cols - число столбцов видимого текста;
  • rows - число строк видимого текста.

Тег <select> создаёт список с возможными значениями.


						<select name='select1' size='3' multiple='multiple'>
							<option value='1'>Element 1</option>
							<option value='2' selected='selected'>Element 2</option>
						</select>
						

  • name - задаёт уникальное имя списка;
  • size - определяет число одновременно видимых элеметнов;
  • multiple - указывает, чт оиз списка одновременно можно выбрать несколько элментов;
  • value - задаёт значение, которое будет передано Веб-серверу;
  • selected - указывает, какой пункт списка выбран изначально.

Парный тег <fieldset> позволяет сгруппировать элементы формы. Браузеры вокруг группы изображают рамку. На линии рамки с помощью тега <legend> можно разместить надпись.


						<fieldset>
							<legend>Age</legend>
							< 20 <input type='radio' name='age' value='1'>
							>= 20 <input type='radio' name='age' value='2'>
						</fieldset>
						

Тег <label> устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы . Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью <label> можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.


							<input id="идентификатор"><label for="идентификатор">Текст</label>
							<label><input type="..."> Текст</label>
						
Задание 1
Задание 2
Задание 3

Форма добавляется в документ при помощи парного тега <form>.

						<form action='file.php'>
							<input type='text' name='text1'>
							<input type='reset' value='Clear'>
							<input type='submit' value='Send'>
						</form>
						

Тег имеет следующие параметры:


  • action - задаёт URL-фдрес программы обработки формы;
  • method- определяет, как будут посылаться данные от формы до Веб-сервера. Может принимать значения get и post;
  • enctype - задаёт MIME тип передаваемых данных. Значение multipart/form-data указывается при пересылке файлов;

Основные понятия


Каскадные таблицы стилей (CSS - Cascading Style Sheets) позволяют существенно расширить возможности языка HTML за счёт более гибкого управления форматирвоанием веб-страницы.


Встраивание


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


Встраивание стиля в тег

Определение стиля встраивается в любой тег с помощью параметра style.

						<p style='font-size:12px; color:#000;'>Text</p>
						
Встраивание стиля в заголовок

В этом случае стили указываются между тегами <style></style>. Сам тег должен быть расположен в разделе head. Данный элемент имеет один обязательный атрибут type – MIME тип содержимого и один не обязательный media – устройства для вывода документа. Для таблицы стилей значение первого атрибута должно быть равным text/css. В теге к которому нужно применить стиль, указывается имя стиля с помощью параметров class или id.

						<!doctype html>
						<html>
							<head>
								<style type="text/css" media="all">
									.block{background:#aaa}
									p{ color: red; }
								</style>
							</head>
							<body>
								<div class='block'>
									<p>Red text.</p>
								</div>
							</body>
						</html>	
						
Вынесение таблицы стилей в отдельный файл

Файл с таблицей стилей имеет расширение css и может редактироваться любым текстовым редактором.


Файл с таблицей стилей прекрепляется к документу с помощью одинарного тега <link>.

						<link rel='stylesheet' type='text/css' href='style.css' media='screen'>
						

В необязательном параметре media можно указать устройство, для которого предназначена подключаемая таблица стилей. Например, all - для любых устройств, print - для предварительного просмотра и распечатки документа.


Подключить внешний CSS-файл можно также с помощью правила @import:

						<!doctype html>
						<html>
							<head>
								<style type="text/css" media="all">
									@import url(style.css);
								</style>
							</head>
							<body>
								<div class='block'>
									<p>Red text.</p>
								</div>
							</body>
						</html>
						

Это правило должно стоять перед всеми инструкциями CSS.


Box-модель

Box-модель
  • Width, height (ширина, высота) – размеры блока
  • Padding – внутренний отступ, свободное место между содержанием и рамкой
  • Border – видимый край блока, рамка
  • Margin – внешний отступ, свободное место между отдельными блоками

Надо иметь в виду, что padding, border, margin не являются частью указаной ширины и высоты.


Что бы получить блок с общей шириной в 300px с внутренни м отступом в 10px, надо указывать ширину 300-2*10=280px.


В Internet Explorer 6.0, при неустановленном doctype, есть одна существенная разница при расчёте размеров элементов. Если во всех браузерах под шириной подразумевается ширина контента, то в IE6 - это ширина вместе с внутренними отступами и границами. Точно также и с высотой.


Неприятный эффект получается, если надо занять всю ширину старницы width=100%.


В этом случае 100% + 2*10px>100%. Поэтому, в случаях, когда размеры выражены в процентах, не стоит использовать padding, border, margin. Лучшим решением будет использовать дополнительные элементы-оболочки.


Inline/block
Padding
Border
All

Задание 1 Картинка

Свойства


Атрибуты определения стиля заключаются в фигурные скобки. Если атрибутов несколкьо, то они перечисляются через точку с запятой:

						<селектор> { <атрибут1>: <значение1>; <атрибут2>:<значение2>; ...}
						

В параметре <селектор> могут быт ьуказаны следующие селекторы:


* - все теги.
						* {margin: 0; padding: 0;}
						
Тег - все теги, имеющие указанное имя.
						p {font-size:12px; color: green;}
						
.класс - все теги имеющие указанный класс.
						.text {font-size:12px; color: green;}
						
Тег.класс - все теги имеющие указанный класс
						р.text {font-size:12px; color: green;}
						
#идентификатор - тег имеющий указанный идентификатор
						#text {font-size:12px; color: green;}
						
Тег#идентификатор - идентификатор, указанный в определённом теге. Если ИД указан в другом теге, то элемент будет проигнорирован.
						р#text {font-size:12px; color: green;}
						

Стилевой класс можно привязать сразу к нескольким тегам. В этом случае селекторы указываются через запятую:

						h1, h2 {font-family:Arial;}
						

Привязаться к другим элементам можно следующим образом:


Селектор1 Селектор2 - все элементы, соответствующие параметру Селектор2, которые распологаются внутри контейнера, соответсвующего параметру Селектор2
						div a{color:red;}
						

Приоритет


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


Кроме того, следует учитывать, что стиль, заданный через ИД, будет иметь более высокий приоритет, чем стиль заданный через класс.


С помощью свойства !important можно изменить приортиет.


Единицы измерения


Абсолютные единицы:


  • пиксел (px);
  • миллиметр (mm);
  • сантиметр (cm);
  • дюйм (in) - 1 in = 2.54 cm;
  • пункт (pt) - 1pt = 1/72in;
  • пика (pc) - 1 pc = 12pt.

Относительные единицы:


  • процент (%);
  • высота текущего шрифта (em).

Для значения 0 можно не указывать единицы измерения.


Псевдо-классы и Псевдо-элементы


Псевдо-классы могут использоваться в контекстуальных селекторах и могут комбинироваться с обычными классами.


а:link - стиль непосещённой ссылки;
а:hover - выд ссылки, на которую указывает курсор мыши;
а:visited - вид посещённой ссылки;
а:active - стиль, видимый только в момент клика по ссылке;

р:first-line - задаёт стиль для первой строки;
P:first-letter - задаёт стиль для первой буквы;
p:before , p:after - позволяют добавить текст в начало и конец элемента.

Фон


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


background-color - задаёт цвет фона
						body {background-color: green;}
						

В качестве значения атрибута можно использовать слово transparent. Оно означает, что фон прозрачный.

background-image - позволяет задать URL-фдрес изображения, которое будет использоваться в качестве фонового рисунка.
						body {background-image: url(image.jpg);}
						
В качестве значения атрибута можно использовать слово none. Оно означает, что фоновая заливка отключена. background-repeat - задаёт режим повтора фонового рисунка. Может принимать следующие значения:
  • repeat - рисунок повторяется по вертикали и по горизонтали (по умолчанию);
  • repeat-x - рисунок повторяется по горизонтали;
  • repeat-y - рисунок повторяется по вертикали;
  • no-repeat - рисунок не повторяется;

background-attachment - определяет, будет ли фоновый рисунок прокручиватсья вместе с документом. Может принимать следующие значения:
  • scroll - фоновый рисунок прокручивается вместе с содержимым (по умолчанию);
  • fixed - фоновый рисунок не прокручивается;

background-position - задаёт начальное положение фонового рисунка. В качестве значений задаются координаты в абсолютных еденицах или в процентах. Координаты указываются через пробел. Кроме того, могут быть указаны следующие значения:
  • left - выравнивание по левому краю;
  • right - по правому краю;
  • center - по центру;
  • top - по верху;
  • bottom - по низу;

background - сокращённый вариант для одновременного указания вышеперечисленных атрибутов:
						body{ background: green url(image.jpg) no-repeat fixed top left;}
						

Рамки


Атрибут стиля border, который позволяет задать вид границ вокруг объектов. Атрибут border может быть применен к любым объектам.


border-style - позволяет задать тип линии рамки. Может принимать следующие значения:


  • none - линия не отображается
  • solid - сплошная линия
  • dotted - пунктирная линия
  • dashed - штриховая линия
  • double - двойная линия
  • groove - вдавленая рельефная линия
  • ridge - выпуклая рельефная линия
  • inset - весь блок отображается, будто он вдавлен в лист
  • outset - весь блок отображается будто он выдавлен из листа

border-width - задаёт толщину рамки. Может быть дано абсолютное значение.
border-color - задаёт цвет рамки.
border - сокращённый вариант для одновременного указания вышеперечисленных атрибутов:
						border: 1px solid red;
						border-top: 2px solid green;
						
Задание 1 Фон.(Image1 Image2 Image3)
Задание 2 Декорирование ссылок псевдо-классами, использование фоновых картинок.

Синтаксис


С помощью Css свойства font-family можно задать гарнитуру и тип шрифта, который требуется применить к какому-то конкретному элементу Html кода.

Имя шрифта


Атрибут font-family позволяет задать имя шрифта


						p{font-family: Arial;}
						
В ряде случаев шрифт может отсутствовать на компьютере пользователя, Поэтому лучше указывать несколкьо альтернативных шрифтов.
						p{font-family: Arial, Verdana;}
						
Можно также указать одно из пяти семейств шрифтов - serif, sans-serif, cursive, fantasy, monospace.
						p{font-family: Arial, Verdana, sans-serif;}
						

Стиль шрифта


Атрибут font-style позволяет задать стиль шрифта. (normal - нормальный, italic - курсивный, oblique - наклонный)
						p{font-style: italic;}
						

Размер шрифта


Атрибут font-size позволяет задать размер шрифта.
						p{font-size: 12px;}
						

Цвет шрифта


Атрибут color позволяет задать цвет шрифта.
						p{color: red;}
						p{color: #00ff00;}
						p{color: rgb(255,0,0);}
						

Жирность шрифта


Атрибут font-weight позволяет управлять жирностью шрифта. (100-900, normal, bold)
						p{font-weight: bold;}
						

Расстояние между символами


Атрибут letter-spacing задаёт расстояние между символами текста. (normal, абсолютные еденицы)
						p{letter-spacing: 5px;}
						

Расстояние между словами


Атрибут word-spacing задаёт расстояние между словами. (normal, абсолютные еденицы)
						p{word-spacing: 20px;}
						

Отступ первой строки


Атрибут text-indent задаёт отсуп для "красной строки".
						p{text-indent: 20px;}
						

Вертикальное расстояние между строками


Атрибут line-height задаёт вертикальное расстояние между базовыми линиями двух строк.
						p{line-height: 20px;}
						

Горизонтальное выравнивание текста


Атрибут text-align задаёт горизонтальное выравнивание текста. (center, left, right, justify)
						p{text-align: center;}
						

Декорирование текста


Атрибут text-decoration позволяет подчеркнуть, надчеркнуть и зачеркнуть текст. (none, underline, overline, line-through, blink)
						p{text-decoration: underline;}
						

Изменение регистра символов


Атрибут text-transform позволяет изменить регистр символов. (none, capitalize, uppercase, lowercase)
						p{text-transform: uppercase;}
						
Задание 1 Текст

Списки


Атрибут стиля list-style-type задаёт вид маркера списка. Может принимать следующие значения:


  • disc - кружки с заливкой
  • circle - кружки без заливки
  • square - квадрат с заливкой
  • decimal - арабские цифры
  • lower-roman - малые рисмские цифры
  • upper-roman - большие римские цифры
  • lower-alpha - малые латинские буквы
  • upper-alpha - большие латинские буквы
  • none - никак не отмечает позиции списка


Атрибут стиля list-style-image задаёт URL-адрес изображения, которое будет использоватся в качестве маркера списка.


							ol{ list-style-image: url('image.jpg'); }
						

Атрибут стиля list-style-position позволяет задать более компактное отображение списка.


  • outside - по умолчанию. Маркер отображается отдельно от текста
  • inside - маркер входит в состав текста.

Display


Атрибут стиля display предназначен для указания типа блока. Может принимать следующие значенияЖ


  • block - блок занимает всю ширину родительского элемента. Значение block по умолчанию имеют теги div и p;
  • inline - блок занимает толкьо необходимое для отображения содержимого пространство.
  • inline-block - аналогично inline, но дополнительно можно задать размеры и другое форматирование, применяемое для блочного элемента.
  • none - содержимое блока не отображается.

Float


Атрибут стиля float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон (left | right | none | inherit )


						float: left;
						

Задание 1
Задание 2

Photoshop и Artweaver


Adobe Photoshop — многофункциональный графический редактор, разработанный и распространяемый фирмой Adobe Systems. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты. Продукт является лидером рынка в области коммерческих средств редактирования растровых изображений, и наиболее известным продуктом фирмы Adobe. Несмотря на то, что изначально программа была разработана как редактор изображений для полиграфии, в данное время она широко используется и в веб-дизайне. Поддерживается обработка изображений, с глубиной цвета 8 бит (256 градаций на один канал), 16 бит (используется 15 битов плюс один уровень, т.е. 32769 уровней) и 32 бит (используются числа одинарной точности с плавающей запятой). Возможно сохранение в файле дополнительных элементов, как то: направляющих (Guide), каналов (например, канала прозрачности — Alpha channel), путей обтравки (Clipping path), слоёв, содержащих векторные и текстовые объекты. Файл может включать цветовые профили (ICC), функции преобразования цвета (transfer functions). Допускаются неквадратные пиксели (Pixel Aspect Ratio).


Artweaver — бесплатный растровый графический редактор под Windows. В основном ориентирован на профессионалов и художников-любителей, которые знакомы с коммерческими программами, такими как Adobe Photoshop и особенно Corel Painter. Как и эти программы, Artweaver может эмулировать широкий спектр классических эффектов (такие как рисование маслом, акриловой краской, пастелью, карандашами, аэрографию, и т. д.) для создания естественно выглядящих художественных изображений. В нём также есть наиболее востребованные пользователями фильтры, такими как нерезкое маскирование и размытие, пятно, рельеф и мозаика, а также работа с прозрачностями и слоями, которая поддерживается в собственном формате .AWD. Artweaver поддерживает наиболее распространённые форматы файлов, такие как BMP, GIF, JPEG, PCX, TGA, TIFF, PNG, PSD


Инструменты, палитры, слои (Artweaver)


Верхняя панель программы содержит основные вкладки: File, Edit, Image, Layer, Select, Filter, Wiev, Window, Help.

File: В меню File можно создавать новые и открывать уже имеющиеся проекты (New,Open), клонировать открытые проекты в новую рабочую область (Clone). Close закрывает проект. Save as позволяет сохранить изображение в одном из выбранных форматов (BMP, JPEG, PNG, PSD, TARGA, GIF, TIFF, PCX, AWD-собственный формат Artweaver). Так же во вкладке File есть функция импорта и экспорта проектов и настройки печати (Import, Export, Print). Exit - выход из программы.

Edit: Вкладка Edit верхней панели программы Artweaver дает возможность отменить или повторить предыдущее действие (Undo, Redo). При помощи Cut, Copy, Paste можно вырезать, копировать и вставить выделенную область проекта. В подменю Preset Manager удобно управлять наборами кистей, градиентов, текстур и т.д. В Preferences можно настроить способ увеличения размера изображения, выбрать отбражение курсора для инструмента "Кисть" и т.д.

Image: В меню Image расположены инструменты для изменения различных параметров изображения. Fill и Set Paper Color отвечают за настройки фона проекта. Duplicate дублирует изображение в новой рабочей области. При помощи Image Size можно изменить размер фото, а Canvas Size расширяет рабочее пространство вокруг изображения. Crop обрезает выделенную область, а Rotate Canvas поворачивает ее на нужный градус. Вкладка Adjustments содержит инструменты для редактирования насыщенности и цвета фото. Параметры Auto Levels, Brightness/Contrast, Curves, Levels изменяют насыщенность, контраст, освещение изображения. Color Balance, Colorize, Hue/Saturation служат для настройки цветового баланса. Desaturate - обесцвечивание проекта. Grayscale - обесцвечивание с дополнительными параметрами. Invert - инверсия цвета. Posterize уменьшает количество тонов, придает изображению плакатный вид. Threshold - изогелия.

Layer: Вкладка Layer программы Artweaver предназначена для управления слоями проекта. Пункты New, Duplicate Layer, Delete позволяют соответственно создать новый слой, дублировать выбранный или удалить слой. Во вкладке Layer Properties можно изменить название слоя и присвоить ему цвет для удобства работы. Rasterize Layer растрирует слой, полезен при работе с текстом. Опции Transform и Free Transform используются для изменения размера и угла наклона выбранного слоя. Send и Bring служат для перемещения слоя относительно других слоев. Например, Bring Forward помещает слой поверх всех остальных. Merge Down - объединить слой с предыдущим, а Merge Visible - объединить видимые слои. Flatten Image - сведение всех слоев (Урок по Artweaver с применением слоев). Группирование слоев: Layer>New>New Layer Group - новая группа слоев. После этого можно создать необходимое количество новых слоев для этой группы. Ungroup Layers - разгруппировать слои. Lock All Layers in Group - заблокировать все слои , принадлежащие выбранной группе.

Select: Пункт Select отвечает за выделение всего слоя или отдельных элементов. All - выделить все, Deselect - отменить выделение. Inverse инвертирует выделенную область. При помощи функций Auto Select и Color Range можно выполнить авто выделение, например, по цвету фона. Инструмент Feather выполняет растушевку выделенной области. Modify>Expand - расширение выделенной области, а Modify>Contract - сжатие. Пункт Grow выделяет смежные пикселы. Функция Save Selection сохраняет месторасположение выделенной области, позже ее можно восстановить - Load Selection.

Filter: При помощи элементов вкладки Filter к изображению или выделенной области можно применять различные графические эффекты. Blur - размытие, есть несколько вариантов настроек (Урок по Artweaver с применением фильтра Blur). Distort - искажение, деформация. Пункт Render позволяет использовать световые эффекты. Увеличить резкость фото можно при помощи Sharpen. Storungsfilter добавляет различные виды шума. В подпункте Stylize можно выбрать разную стилизацию проекта, присутствует широкий выбор настроек. Используя Texture, можно превратить фото, например, в мозаику.

View: Используя вкладку View верхней панели Artweaver, можно производить масштабирование проекта для удобства работы (приближение, полноразмерный вид и т.д.). Параметры Grid и Guides добавляют в рабочую область сетку и направляющие соответственно. Perspective Grid позволяет работать с изображением в перспективе.

Window: Пункт Window не содержит инструментов и служит для настройки программы "под себя". Например, открытые проекты можно расположить каскадом или убрать редко используемые окна из рабочей области.

По умолчанию слева в редакторе находится панель с основными инструментами. Это Brush Tool, Move Tool, Shape Selection Tool, Magic Wand Tool, Lasso Tool, Crop Tool, Perspective Grid Tool, Text Tool, Shape Tool, Gradient Tool, Eraser Tool, Stamp Tool, Dropper Tool, Paint Bucket Tool, Zoom Tool и Hand Tool.

Brush Tool (Кисть): При выборе инструмента Brush Tool под верхней панелью программы появляются возможные параметры настройки кисти. Можно выбрать эффект акриловой кисти, мясляных красок, пастели, угля, пера, карандаша, фломастера и т.д. Форму кисти можно подобрать в соседнем окне. Size - настройка размера кисти. Прозрачность можно подобрать во вкладке Opacity. Остальные настройки так же модифицируют кисть и комбинируя их можно добиться очень красивых результатов.

Tool (Перемещение): При помощи Move Tool панели основных инструментов программы Artweaver можно двигать любой незакрепленный слой. Это один из наиболее необходимых инструментов.

Shape Selection Tool (Выделение): Инструмент предназначен для выделения области документа. В настройках Shape Selection Tool можно выбрать форму выделения, добавить растушевку и настроить размеры выделенной области.

Magic Wand Tool (Волшебная палочка): Инструмент Magic Wand Tool панели основных инструментов Artweaver создает выделенную область путем выбора похожих точек на изображении. Параметры регулируются при помощи пункта Tolerance.

Lasso Tool (Лассо): Lasso Tool - еще один инструмент для выделения. Позволяет выделять более сложные области. Можно выбрать свободное Лассо или магнитное.

Crop Tool (Кадрирование): При помощи Crop Tool можно выполнить кадрирование выбранного документа (обрезать). Возможно использование свободного кадрирования или по четким размерам.

Perspective Grid Tool (Сетка перспективы): Perspective Grid Tool удобен для работы с перспективой и создания правильных пропорций. Для активации этого инструмента на до выбрать Viev>Show Perspective Grid.

Text Tool (Текст): Удобный инструмент для добавления текста в проект. После набора текста надо нажать Apply, а для дальнейшей работы со слоем его надо растрировать Layer>Rasterize Layer.

Shape Tool (Инструмент формы): Shape Tool предназначен для создания различных геометрических фигур. В меню доступны: линия, овал, прямоугольник и т.д. Широкий спектр настроек позволяет создать практически любую фигуру.

Gradient Tool (Градиентная заливка): Градиент может применяться ко всему слою или к выделенной области. В верхней панели можно настроить цвет, вид и прозрачность для Gradient Tool.

Eraser Tool (Ластик): Eraser Tool в панели основных инструментов Artweaver применяется для полного или частичного стирания слоя. Можно использовать в ограниченной выделенной области. Есть возможность настроить размер инструмента и прозрачность.

Stamp Tool (Штамп): Инструмент "Штамп" позволяет клонировать выбранную область проекта. На образце для клонирования надо нажать Alt+Stamp Tool. Очень полезный инструмент для ретуширования фотографии.

Dropper Tool (Пипетка): Применение Dropper Tool позволяет определить цвет конкретного пиксела. В настройках можно выбрать объединение цвета 3-х или 5-ти соседних точек.

Paint Bucket Tool (Заливка): Заливка используется для изменения цвета всего изображения или выделенной области. Можно настроить различные варианты заливки и ее прозрачность.

Zoom Tool (Масштабирование): Zoom Tool - инструмент масштабирования документа. "+" - приближает изображение, "-" - отдаляет.

Hand Tool (Рука): Инструмент Hand Tool позволяет перемещать изображение в рабочей области. Его удобно использовать при работе с большими изображениями.

В нижней части панели инструментов находится окно выбора цвета (основной и фоновый). Двойной щелчок мыши на окне с цветом открывает блок для изменения оттенка. При помощи угловой стрелки можно менять местами основной и фоновый цвет.

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

Brush: В верхней части блока Brush находится окно выбора инструмента (карандаш, кисть, пастель, перо и т.д.), а рядом окно выбора его формы. Вкладка General показывает результат выше выбранных параметров. Справа от превью есть окно для настройки наконечника инструмента. Здесь же расположены опции для выбора размера кисти, минимального мазмера и расстояния между отображением рисунка кисти на рабочей поверхности. Ниже расположены дефолтные параметры для выбранного инструмента: Type, Method и Category. Изменяя эти парамертры, можно создать собственный инструмент, а затем сохранить его для дальнейшнй работы (стрелка в верхнем правом углу>Save Variant). Новый инструмент можно найти в окне выбора размера кисти. В самом низу блока Brush рабочей области Artweaver находится окно выбора бумаги. Рядом окно Imagestamp, которое активируется выбором Type>Imagestamp. Далее расположен Captured (выбор формы кисти), для работы сним надо выбрать Type>Captured. Рядом настройки заливки. При выборе инструмента "Заливка" в основных инструментах Artweaver (Fill>Gradient), в этом окне можно выбрать тип заливки и градус поворота. Вкладка Adnanced также служит для настроек кисти. Например Color Variability>from Gradient применяет к рисунку кисти настройки градиента.



Preview: Блок "Превью" позволяет масштабировать изображение. 100% - оригинальный размер. Подпункт Info содержит информацию о изображении (ширина, высота, разрешение и т.д.).



Color: В блоке Color рабочей области программы Artweaver можно подобрать тон для основного и фонового цвета. Color Set содержит палитру основных гармоничных цветов и их сочетание.



Layers: В блоке Layers расположено управление слоями. Здесь можно выбрать вариант наложения для конкретного слоя (умножение, осветление, мягкий свет и.т.д.). Функция Opacity отвечает за регулировку прозрачности слоя. Есть параметры создания и удаления слоя, перемещения слоя вверх или вниз. Вкладка Histiry показывает историю выполненных действий.



Задание 1:: нарисовать в Artweaver прямоугольную плашку, задать ей градиентную заливку (сначала создайте New Layer).

Задание 2:: нарисуйте кнопку с градиентной заливкой как на картинке, используя инструмент Rounded tool и инструмент текста (сначала New Layer). Чтобы выделить, щелкните по слою с нажатым Ctrl.

Нарезка макета страницы.


С помощью нструмента Shape Selection Tool (Magic Wand Tool, Lasso Tool) выделить нужную область, обрезать макет до выделенного элемента с помощью меню Image > Crop. Или с помощью нструмента Crop Tool выделить нужную область, щелчок правой клавишей мыши внутри этой области, Crop. После чего сохранить результат в папку с изображениями своего сайта.

Задание 3: вырезать этим способом из своей нарисованной в Artweaver прямоугольной плашки с градиентной заливкой узкую полоску по направлению заливки (по идее ее ширина 1px) для верстки. Вырезать свою кнопку.

Задание 4

Спрайты (sprites)


CSS спрайты — это представление большого количества мелких картинок, путем создания одной большой картинки, что существенно экономит время загрузки и ресурсы хостинга (запрос идет всего-лишь на одну картинку, вместо всех). А также дает мгновенное появление изображения (изначально скрытого), потому что картинка загружена в самом начале.


Статья о применении и преимуществах спарйтов

Пример варианта использования спрайта:

								ul li {
									display:block;
									width:45px;
									height:45px;
									background:url(images/sprite.jpg);
								}
								ul li.l1 {
									background-position:0 0;
								}
								ul li.l2 {
									background-position:0 50px;
								}
						

Графика и оптимизация сайта


Оптимизация графики дает один из наибольших приростов производительности при загрузке сайта. Используйте графические файлы только тогда, когда это действительно нужно и следите за тем, чтобы ваш файл был оптимизирован. Для больших многоцветных изображений, например, таких как фотографии, рекомендуется использовать файлы формата jpeg. Для остальной графики наиболее подходящим форматом является формат png. Данный формат был разработан специально для интернета и является более экономичным, чем gif, но при небольших изображениях, таких как иконки, gif может быть более предпочтительным форматом. Так же файлы формата gif поддерживают анимацию. Изображения рекомендуется сохранять с прогрессивной (чересстрочной) разверткой.

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

Используйте так называемую карту изображения (Sprite) – т.е. объединение всех изображений использованных на странице в одно. И настройте его отображение при помощи CSS команд background-image и background-position. Размер изображение равен сумме размеров всех изображений, но при его загрузке используется только один HTTP-запрос.

Полезные Online инструменты


Tools.pingdom.com Англоязычный сервис проверки времени загрузке сайта. Выводит подробную информацию о времени загрузке вашей страницы, иерархию ссылок, время начала загрузки каждого отдельного элемента, размер элемента и т.д. Еще одним преимуществом данного сайта является возможность сохранения результатов проверки.

Сервис от Yahoo позволяет оптимизировать графиеские файлы. После оптимизации они могут занимать в полтора-два раза меньше исходного объёма.


Page Speed - Плагин для Firefox от Google проводит тестирование вашего сайта на скорость загрузки страницы и выдает рекомендации по улучшению. Для корректной работы необходим плагин Firebug.

Yahoo! YSlow - Еще один плагин для Firefox в этот раз от Yahoo, так же помогает отценить скорость загрузки сайта и так же для его работы необходим Firebug.

Speed Tracer - Плагин для Google Chrome, выдает информации о скорости загрузке сайта.

Position


Атрибут position позволяет задать способо позиционирования блока. Он может принимать одно из четырёх значений:


  • static - статическое позиционирование (по умолчанию). Положение определяется положением в документе.
  • relative - относительное позиционирование. Координаты отсчитываются относительно позиции. в которую браузер поместил бы элемент, будь он статически позиционирован.
  • absolute - абсолютное позиционирование. Координаты отсчитываются относительно левого верхнего угла родительсткого элемента (ближайшего с position: relative)
  • fixed - фиксированое позиционирование. Координаты отсчитываются относительно левого верхнего угла браузера. При прокрутке блок не смещается.

Для указания привязки предназначены следующие атрибуты:


  • left - расстояние от левой границы
  • top - расстояние от верхней границы
  • right - расстояние от правой границы
  • bottom - расстояние от нижней границы

Эти атрибуты могут иметь отрицательное значение. Статически позиционирвоаные элементы не имеют атрибутов left, top, right, bottom.


Overflow


Атрибут overflow задаёт поведение блока, чьё содержимое вылезает за его границы. Может принимать следующие значения:


  • visible - блок расширяется так, чтобы всё его содержимое отобразилось полностью (по умолчанию). Если размеры заданы явным образом, то содержимое будет выходить за границы блока, а размеры самого блока останутся прежними
  • hidden - то, что не влещает в границы блока, скрывается
  • scroll - у блока в любом случае отображаются полосы прокрутки
  • auto - если содержимое не помещается в блок, то добавляются полосы прокрутки. Если же содержимое полностью помещается, то полосы не отображаются.

Z-index


Атрибут z-index устанавливает порядок, в котором свободно позиционированные элементы будут перекрывать друг друга. Элемент с большим значением z-index перекрывает элементы с меньшим значением. Значение у родителя равно нулю.


Вёрстка


Табличная верстка — условное название метода верстки HTML-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы (то есть HTML-тег table). Метод получил широкое распространение во времена предшествовавшие появлению стандарта CSS, так как на тот момент не было другой простой возможности точно расположить элементы на странице. Таблицы же, за счет того, что автоматически изменяют свой размер в соответствии с содержимым, а также за счет возможности, напротив, задать точные размеры той или иной ячейки, позволяют быстро и удобно расставить иллюстрации к тексту или совместить несколько частей коллажа в одно большое изображение. Кроме того, таблицы в HTML могут быть вложенными, что позволяет создавать целые иерархии таблиц, что было очень удобно при верстке сложных страниц, отдельные элементы которых должны были бы сохранять свое положение и размер на экране вне зависимости от размера окна браузера, тогда как другие элементы, напротив, должны были изменяться в размерах и/или изменять свое местоположение относительно остальных объектов документа. Табличная верстка остается наиболее удобной и простой в освоении, потому многие веб-разработчики продолжают ею пользоваться. Этот метод верстки зарекомендовал себя, как наиболее стабильный и надежный, в то время как блочная верстка сложна в реализации, имеет проблемы с совместимостью с разными браузерами и т.п.

До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа (табличная верстка). Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа (блочная верстка). За счёт этого нововведения стало возможным применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

W3C рекомендует верстать исключительно слоями (в HTML4 и XHTML слой — это элемент веб-страницы, созданный с помощью тега div, к которому применяется стилевое оформление). А таблицы применять только для табличного контента.

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

Вёрстка блоками


Свойства слоя удобно задавать и настраивать через стили. Возможности CSS расширяют спектр оформительских изысков. Использование стилевых таблиц позволяет несложными методами получить компактный и эффективный код.
Слой можно перемещать, прятать и показывать без перезагрузки всей страницы. С помощью всего нескольких инструкций можно создавать разные эффекты, вроде выпадающих меню, всплывающих подсказок, движущихся элементов и другое. Добавление подобных трюков хотя и увеличивает объем кода, но не требует повторной загрузки и обновления документа и происходит без лишних задержек со стороны браузера. Кроме того, выразительность и привлекательность сайта во многом повышается благодаря использованию подобных приемов со слоями.
Слои можно накладывать друг на друга, что упрощает размещение элементов на веб-странице и предоставляет больше возможностей при верстке.
Слои можно размещать в окне браузера с точностью до пикселя. Положение слоя задается двумя координатами относительно любого угла окна браузера, родительского элемента или документа.
Слои по сравнению с таблицами отображаются быстрее. Более высокая скорость достигается за счет компактного кода и того, что отображение содержимого слоя происходит по мере его загрузки. Правда это может привести к «скачкам» элементов страницы по мере их подгрузки.
Не следует считать, что использование слоев это панацея от всех бед. К сожалению, стандарты работы со слоями ещё не до конца устоялись и браузеры по-разному реализуют определённые возможности. Из-за этого основная сложность верстки слоями — создать универсальный код, который бы одинаково и без ошибок работал в разных браузерах («кросс-браузерность»). Приходится вникать в тонкости поведения браузеров при использовании различных элементов стилей.


Тестирование сайта на соответствие стандартам W3C


Markup Validation Service
CSS Validation Service
Colorblind Web Page Filter
CSS Validation Service

Задание1 Задание2

HTML5


Cовременный сайт, не говоря уже о соц. сетях, изобилует медийной составляющей, а также интерактивен. Устаревший HTML4 и всевозможные Java-примочки уже практически исчерпали свои возможности. Для отображения сайта приходится использовать сторонние программы и сервисы. HTML5 призван устранить все проблемы и сделать сайты легче, проще и, самое важное, семантически правильными. Что это значит? Исследование огромного количества современных сайтов выявило в их структуре следующие характерные черты:
1. Подавляющее большинство имеет типичную структуру: шапка, навигация, контент, подвал.
2. Подавляющее большинство также имеет в названиях этих блоков соответствующие слова: header, nav, article, footer.
Теперь эти теги официально входят в состав HTML5. Для HTML5 слово семантика является практически ключевым. А все из-за расплодившихся разнокалиберных PDA-устройств. Экранчики и возможности у каждого разные. Как сделать так, чтобы все они хорошо отображали сайт? Нужна какая-то стандартная схема. Ведь невозможно прописывать в стилях все возможные варианты размеров. Семантика — это и есть схема. Она однозначно закрепляет за шапкой конкретное обозначение, и за навигацией тоже, и за всеми остальными блоками также. И любоое устройство будет решать, где и что оно будет показывать именно на основе данной четкой схемы. Также семантика помогает поисковым системам быстрее и точнее находить на сайте полезное содержимое, т.е. контент. Причем, простейшим методом исключения: не шапка, не подвал, не навигация.

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

<article> <aside> <audio> <canvas> <command> <datalist> <details> 
<figcaption> <figure> <footer> <header> <hgroup> <keygen> <mark> 
<menu> <meter> <nav> <output> <progress> <rp> <rt> <ruby> 
<section> <source> <summary> <time> <video> <wbr>
						


The wilderness downtown
AngryBirds Space
CSS piffle

CSS3


Cпецификации CSS 3 имеет целый ряд интересных свойств, не вошедших в предыдущую версию спецификации. В данный момент официально спецификация CSS 3 ещё находится в разработке – то есть этот документ ещё не утверждён и пока имеет лишь черновой вариант, однако, несмотря на этот факт CSS 3 уже широко используется вебмастерами и поддерживается современными браузерами (IE9+, Opera 10+, Firefox 3.6+, Chrome 12+, Safari 5+ конечно не без нюансов). Помимо того что спецификация CSS 3 может скруглять углы она позволяет делать ещё целый ряд вещей: создавать градиенты, тени, анимацию на страницах сайта, задавать степень прозрачности тех или иных элементов, также значительно расширяет набор инструментов при работе с фоном, цветом, текстом.


CSS3 generator
CSS3 PIE
Выберите один из предложеных макетов и создайте по нему страничку.
Оцениваться будет не количество, а качество. Т.е. можете сделать не до конца, главное без ошибок (проверить на ошибки можно с помощью валидаторов из 14-го Урока).

Старайтесь правильно, по смыслу, использовать элементы ХТМЛ - для заголовков <h(n)>, для ссылок <a> и т.д.
Можно использовать любые материалы (конспекты, интернет), кроме человеческих ресурсов.


Izvelaties vienu no maketiem un uztaisiet web-lapu.
Vērtēta tiks nevis kvantitāte, bet kvalitāte. T.i. var uztaist ne līdz galam, galvenais, bez kļūdām (lai pārbaudītu kļūdas, jūs varat izmantot validācijas instrumentus no 14 nodarbības).

Mēģiniet izmantot HTML elementus ar jēgu - virsrakstiem <h(n)>, saitēm <a> u.t.t.
Jūs varat izmantot jebkurus materiālus (piezīmes, internets), izņemot cilvēkus sedošus blakus.
Тест/tests
Задание

Основные понятия


JavaScript - это язык программирования, позволяющий сделать Веб-страницу интерактивной, то есть реагирующей на действия пользователей.


Последовательность инструкций(называемая программой, скриптом или сценарием) выполняется интерпретатором, встроенным в браузер. иными словами, код программы внедряется в HTML-документ и выполняется на стороне клиента. Для выполнения программы даже не нужно перезагружать страницу. Все программы выполняются в результате возникновения какого-то события. Например, перед отправкой данных формы можно проверить их на допустимые значения и, если значения не соответствуют ожидаемым, запретить отправку данных.


Программа внедряется в HTML-документ с помощью парного тега <script>. В качестве значения параметра type указывается MIME-тип text/javascript, значение параметра src - путь к файлу:


							<script src='js/script.js' type='text/javascript'>
							</script>
							
							
							<script  type='text/javascript'>
								document.write("Hello, world!");
							</script>
						

Строка document.write("Hello, world!"); содержащая инструкцию отобразить надпись "Hello, world!", называется выражением. Каждое выражение в JavaScript заканчивается точкой с запятой.


Комментарии в JavaScript


Всё, что распологается после "//" до конца строки, в JavaScript считается однострочным комментарием.


							//однострочный комментарий
						

Однострочный комментарий можно записать после выражения.


							document.write("Hello, world!"); //однострочный комментарий
						

Кроме того, существует многострочный комментарий. Он начинается с символов /* и заканчивается символами */.


							/*
							многострочный комментарий
							*/
						

Вывод результатов работы программмы


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


Метод alert() отображает диалоговое окно с сообщением и кнопкой ОК.


							<script type='text/javascript'>
								alert("Hello, world!");
							</script>
						

Сообщение можно разбить на строки с помощью последовательности сиволов \n.


							<script type='text/javascript'>
								alert("Hello,\n world!");
							</script>
						

Метод confirm() отображает диалоговое окно с сообщением и двумя кнопками OK и Cancel. Он возвращает значение true, если нажата кнопка OK, и false - если Cancel.


							<script type='text/javascript'>
								if(confirm('Press button'))
									alert('OK');
								else
									alert('Cancel');
							</script>
						

Метод prompt() отображает диалоговое окно с сообщением,полем ввода и двумя кнопками OK и Cancel. Он возвращает введённое значение, если нажата кнопка OK, или специальное значение null - если Cancel.


							<script type='text/javascript'>
								var n = prompt('Enter your name', 'Stranger');
								if(n==null)
									alert('Canceled')
								else
									alert('Hello, '+ n);
		
							</script>
						

Переменные


Переменные - это участки памяти, используемые программой для хранения данных. Каждая переменная должна иметь уникальное имя в программе, состоящее из латинских букв, цифр и знаков подчёркивания. Первым символом может быть либо буква, либо знак подчёркивания. В названии переменной может также присутствовать символ $. Имена переменных не должны совпадать с зарезервированными ключевыми словами языка JavaScript.

Правильные имена переменных: x, strName, y1, _name, frame1

Неправильные имена переменных: 1y, ИмяПеременной, frame

Последнее имя неправильное, так как является ключевым словом.

При указании имени переменной важно учитывать регистр букв: strName и strname - разные переменные.

В программе переменные объявляются с помощью ключевого слова var.

								var strName;
							


Можно объявить сразу несколько перемнных в одной строчке, указав их через запятую.
								var x, strName, y1, _name, frame1;
							


Типы данных и инициализация


В JavaScript переменные могут содержать следующие типы данных:

  • number - целые числа или числа с плавающей точкой(дробные)
  • string - строки
  • boolean - логический тип данных. Может содержать значения true, false
  • function - функции
  • object - массивы, объекты, а также переменная со значением null

При инициализации переменной JavaScript автоматически отностит переменную к одному из типов данных. Что такое инициализация переменных? Это операция присвоения переменной начального значения.

Значение переменной присваевается с помощью оператора =.
								var x1=7;
								var x2=7.8;
								var string1 = "Text";
								var string2 = 'Text';
								var bool1 = true;
								var y = null;
							

Если в программе обратиться к переменной, которая не объявлена, то возникнет критическая ошибка. Если переменная объявлена, но ей не присвоено начальное значение, то значение редполагается равным undefined.


Математические операторы


  • + - сложение z=x+y;
  • - - вычитание z=x-y;
  • * - умножение z=x*y;
  • / - деление z=x/y;
  • % - деление по модулю z=x%y;
  • ++ - оператор инкримента. Увеличивает значение переменной на 1z++;
  • -- - оператор декремента. Уменьшает значение переменной на 1z--;


Операторы инкримента и декремента могут использоваться в постфиксной или префиксной формах:

							Z++; Z--;
							++Z; --Z;
						

В первом случае возвращается значение, которое переменная имела перед операцией, а во втором - вначале производится операция и только потом возвращается значение.


Операторы присваивания



  • = - присваевает переменной значение z=5;
  • += - увеличивает значение переменной на указаную величину z+=5;
  • -= - уменьшает значение переменной на указаную величину z-=5;
  • *= - умножает значение переменной на указаную величину z*=5;
  • /= - делит значение переменной на указаную величину z/=5;
  • %= - делит значение переменной на указаную величину и возвращает остаток z%=5;

Двоичные операторы



  • ~ - двоичная инверсия z=~x;
  • & - двоичное И z=x&y;
  • | - двоичное ИЛИ z=x|y;
  • ^ - двоичное исключающее ИЛИ z=x^Y;
  • << - сдвиг влево z=x<<y;
  • >> - сдвиг вправо z=x>>y;
  • >> - сдвиг вправо без учёта знака z=x>>>y;

Оператор обработки строк



  • + - оператор конкатенации строк z='text1' + 'text2'; z='text1' + x;

Операторы сравнения


Операторы сравнения используются в логических выражениях.

  • == - равно
  • === - строго равно
  • != - не равно
  • !== - строго неравно
  • < - меньше
  • > - больше
  • <= - меньше или равно
  • >= - больше или равно
  • ! - не
  • && - логическое И
  • || - логическое ИЛИ

Оператор ветвления if...else


Оператор if...else - это условный оператор, который выполняет первый набор утверждений, если значение истинно. В противном случае выполняет второй набор утверждений, заключенные в операторе else, если условие ложно. Если набор утверждений , заключенные в фигурные скобки {} содержит один оператор, то скобки можно опустить. Условные операторы могут быть вложены друг в друга без ограничений.

								if(x==5){
									document.write('X = 5');
								}
								else{
									document.write('X!=5');
								}
							

Цикл for


Цикл for используется для выполнения выражений определённое число раз.

								for(var i=1; i<=10; i++)
								{
									document.write(i);
								}
							

Цикл while


Выполение выраженийв цикле while продолжается до тех пор, пока логическое выражение истинно.

								while(i<10)
								{
									document.write(i);
									i++;
								}
							

Цикл do...while


Выполение выраженийв цикле while продолжается до тех пор, пока логическое выражение истинно. Условие проверяется в конце цикла.

								do
								{
									document.write(i);
									i++;
								}while(i<10)
							

Оператор continue


Оператор continue позволяет перейти на следующую итерацию цикла ещё до завершения выполнения всех выражений внутри цикла.

								for(var i=1; i<=10; i++){
									if(i==5) continue;
									document.write(i);
								}
							

Оператор break


Оператор continue позволяет прервать выполнение цикла досрочно.

								for(var i=1; true; i++){
									if(i>10) break;
									document.write(i);
								}
							

Массивы


Массив - это нумерованный набор переменных. Переменная в массиве называется элементом массива, а её позиция в массиве задаётся индексом. нумерация элементов массива начинается с 0, а не с 1. Это следует помнить. Общее количество элементов в массиве называется размером массива.

При инициализации массива переменные указываются через запятую в квадратных скобках:



Mass1=[1,2,3,4];

Получить значение элемента массива можно, указав его индекс в квадратных скобках:



Str = Mass1[0];

При желании можно добавить новый элемент массива или изменить значение существующего:



Mass1[5]=6; Mass1[0]=0;

Любому элементу массива можно присвоить другой массив:



Mass1[0]=[1,2,3,4];

В этом случае получить значение массива можно, указав два индекса:



Str = Mass1[0][2];

Функции


Функция - это фрагмент кода, который можно вызвать из любого места программы.


Основные понятия

Функция должна иметь уникальное имя. Для имён действуют такие же правила, что и при указании имени переменной.

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

Между фигурными скобками распологаются выражения. Кроме того, функция может возвращать значение в место вызова функции. Возвращаемое значение задаётся с помощью ключевого слова return.

							function f_alert_ok(){
								alert('Сообщение при удачно выполненной операции');
							}
							
							function f_alert(a){
								alert(a);
							}
							
							function f_sum(a, b){
								var z = a+b;
								return(z);
							}
						


Вызов функции:

							f_alert_ok();
							f_alert('Text');
							var sum = f_sum(4, 5);
						
Задание 1

Глобальные и локальные переменные

Глобальные переменные - это переменные, объявленные вне функции. Глобальные переменные видны в любой части программы, включая функции.

Локальные переменные - это переменные, объявленные внутри функции. Локальные переменные видны только внутри тела функции. Если имя локальной переменной совпадает с именем глобальной переменной, то все операции внутри функции осуществляются с локальной перменной, а значение глобальной не изменяется.

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

Объекты


Объект - тип данных, у которого есть свои свойства(переменные) и методы(функции).

Для использования методов и свойств объекта чаще всего необходимо создать инстанцию объекта. Для этого используется оператор new, после него указывается имя объекта, к которому будет относится данная инстанция. После имени объекта, в круглыс скобках, можно передавать некоторые параметры, задавая таким образом начальные значения свойствам объекта.

Чтобы задать объект, нужно:

1. Объявить функцию-конструктор.
2. Записать методы и свойства объекта.

							// конструктор
							function Animal(name) {
							  this.name = name;
							}

							// методы в прототипе
							Animal.prototype.run = function(speed) {
							  this.speed += speed;
							  alert(this.name + ' бежит, скорость ' + this.speed);
							};

							Animal.prototype.stop = function() {
							  this.speed = 0;
							  alert(this.name + ' стоит');
							};

							// свойство speed со значением "по умолчанию"
							Animal.prototype.speed = 0;

							var animal = new Animal('Зверь'); 

							alert(animal.speed);               // 0, свойство взято из прототипа
							animal.run(5);                     // Зверь бежит, скорость 5
							animal.run(5);                     // Зверь бежит, скорость 10
							animal.stop();                     // Зверь стоит
							

Классы


В JavaScript есть встроенные объекты: Date, Array, Object и другие. Они используют прототипы и демонстрируют концепцию «псевдоклассов».

Список встроенных методов
Модификация CSS
Math object functions
String object functions
Date object functions

Объектная модель


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

Объектная моДель представлена в виде иерархии объектов. То есть имеется объект верхнего уровня и подчинённые ему объекты. В свою очередь подчиненные объекты имеют свои подчинённые объекты. кроме того, все объекты имеют свойства, а некоторые ещё и методы.

Доступ к подчинённым объектам осуществляется путём указания пути от верхнего объекта к подчинённому через точку.

<Объект верхнего уровня>.<Подчинённый объект>.{Свойство или метод}

Объект window


Объект window - это объект самого верхнего уровня, представляющий сам Веб-браузер.

window.alert('Text');

Здесь window - это объект самого верхнего уровня, представляющий сам Веб-браузер, а alert() - это метод объекта window. В этом случае указывать объект не обязательно, так как объект window подразумевается по умолчанию.

alert('Text');

Работа с окнами. Создание нового окна


Синтаксис

var newWin = window.open(strUrl, winName [, winParams])

Аргументы

  • strUrl - Адрес для загрузки в новое окно, любая адресная строка, которую поддерживает браузер
  • winName - Имя нового окна для использования в параметре target форм и ссылок
  • winParams - Необязательный список настроек, с которыми открывать новое окно
Описание, примеры

Метод open() создает новое окно браузера , аналогично команде "Новое окно" в меню браузера. Обычно это не вкладка, а именно новое окно, но в некоторых браузерах можно настроить то или иное поведение явным образом.

Если параметр strUrl - пустая строка, то в окно будет загружен пустой ресурс about:blank.

В любом случае, загрузка осуществляется асинхронно. Создается пустое окно, загрузка ресурса в которое начнется уже после завершения исполнения текущего блока кода.

Связь между окнами

Метод open возвращает ссылку на новое окно, которая служит для обращения к нему и вызову его методов, если это соответствует ограничениям безопасности Same Origin.
							var params = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
							window.open("http://ya.ru/", "Yandex", params);
							


Если окно с именем winName уже существует, то вместо открытия нового окна, strUrl загружается в существующее, ссылка на которое возвращается. При этом строка параметров не применяется.

В случае, когда окно открыть не удалось, например, оно заблокировано штатными Popup-blocker'ами Firefox/IE - вызов open вернет null. Проверяйте его, если не хотите лишних ошибок в своих скриптах.

Указание пустого strUrl для существующего имени окна - удобный способ получить ссылку на это окно без его перезагрузки.

Если вы хотите открывать новое окно при каждом вызове open() - используйте для winName специальное значение '_blank'.

Строка параметров

Необязательная строка параметров состоит из списка разделенных запятой настроек нового окна. После открытия окна их уже нельзя будет изменить.

Если строки параметров нет или она пустая, то для нового окна будут взяты параметры по умолчанию.

Если строка параметров указана, то не перечисленные в ней параметры будут отключены(кроме titlebar/close). Поэтому включите в ней свойства, которые нужны.

Если в параметрах не указаны размеры, то новое окно будет по размеру такое же, как последнее открытое.

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


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

  • left/top - Расстояние от левой/верхней границы окна операционной системы до границы нового окна. Новое окно не может быть создано за границами экрана
  • height/width - Высота/ширина в пикселях внутренности нового окна, включая полосы прокрутки, если они есть. Минимальное значение: 100
  • menubar - Если этот параметр установлен в yes, то в новом окне будет меню.
  • toolbar - Если этот параметр установлен в yes, то в новом окне будет навигация (кнопки назад, вперед и т.п.) и панель вкладок
  • location - Если этот параметр установлен в yes, то в новом окне будет адресная строка
  • directories - Если этот параметр установлен в yes, то в новом окне будут закладки/избранное
  • status - Если этот параметр установлен в yes, то в новом окне будет строка состояния
  • resizable - Если этот параметр установлен в yes, то пользователь сможет изменить размеры нового окна. Рекомендуется всегда устанавливать этот параметр.
  • scrollbars - Если этот параметр установлен в yes, то новое окно при необходимости сможет показывать полосы прокрутки
								var newWin = window.open("http://javascript.ru",
								   "JSSite",
								   "width=420,height=230,resizable=yes,scrollbars=yes,status=yes"
								)
								 
								newWin.focus()
							

Заметки

Чтобы закрыть окно - используйте вызов window.close: newWin.close()

Чтобы показать новое окно посетителю - используйте вызов window.focus: newWin.focus()


Модальные диалоговые окна


Модальное окно - это окно, которое будет активным до тех пор, пока пользователь не закроет его. Такие окна могут применятся вместо метода prompt() для ввода данных.

С помощью метода showModalDialog() можно создавать модальные окна самого разнообразного содержания.

Метод showModalDialog() имеет те же аргументы, что и open() — адрес окна, имя и набор свойств. Но сами свойства несколько другие:

  • border - Размер рамки вокруг окна
  • center - Выравнивание окна по центру главного
  • dialogHeight - Высота окна
  • dilalogLeft - Горизонтальная координата
  • dialogTop - Вертикальная координата
  • dialogWidth - Ширина окна
  • edge - Тип рамки окна: sunken (выемка) или raised (выступ, по умолчанию).
  • font - Стиль, определенный по умолчанию для окна
  • font-family - Вид шрифта, определенный по умолчанию для окна
  • font-size - Размер шрифта, определенный по умолчанию для окна
  • font-style - Тип шрифта, (обычный/курсив), определенный по умолчанию для окна
  • font-weight - Толщина шрифта, определенная по умолчанию для окна
  • help - Включение кнопки Help в верхнюю панель
  • maximize - Включение кнопки Maximize в верхнюю панель
  • minimize - Включение кнопки Minimize в верхнюю панель
  • resizable - Включить/отключить возможность менять размеры окна мышкой
  • status - Наличие или отсутствие строки состояния
  • scroll - Наличие или отсутствие полос прокрутки
Пример


Объект navigator


Объект navigator содержит общую информацию о браузере и операционной системе. Особенно примечательны два свойства:

navigator.userAgent — содержит информацию о браузере.
navigator.platform — содержит информацию о платформе, позволяет различать Windows/Linux/Mac и т.п..

Для вашего браузера значения:


								alert(navigator.userAgent);
								alert(navigator.platform);
								

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

Тогда в будущем, когда браузер добавит новую возможность, ваш скрипт тут же подхватит её и продолжит работать.

Но бывает (редко), что под определенными платформами, в некоторых версиях браузеров есть ошибки (да-да, в самих браузерах), и никак кроме проверки на название/платформу это не обнаружить. Поэтому такую возможность стоит иметь в виду.



Объект screen


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

									alert(screen.width);
									alert(screen.height);
								

Это свойство можно использовать для сбора статистической информации о посетителях.

JavaScript-код счетчиков считывает эту информацию и отправляет на сервер. Именно поэтому можно просматривать в статистике, сколько посетителей приходило с каким экраном.



Объект location


Объект location предоставляет информацию о текущем URL и позволяет JavaScript перенаправить посетителя на другой URL.

									alert(location);
									location = 'http://google.com';
								

Большинство действий в javascript выполняется с HTML-страницей. В javascript страница представлена в виде объектной модели DOM (Document Object Model).

Любые действия со страницей требуют вызова соответствующего метода DOM.

Понимание, как работать с документом в модели DOM - краеугольный камень в javascript-программировании.

Каждый DOM-элемент является объектом и предоставляет свойства для манипуляции своим содержимым, для доступа к родителям и потомкам.

Для манипуляций с DOM используется объект document. Используя document, можно получать нужный элемент дерева и менять его содержание.

Например, этот код получает первый элемент с тэгом ol, последовательно удаляет два элемента списка и затем добавляет их в обратном порядке:

								var ol = document.getElementsByTagName('ol')[0]
								var hiter = ol.removeChild(ol.firstChild)
								var kovaren = ol.removeChild(ol.firstChild)
								ol.appendChild(kovaren)
								ol.appendChild(hiter)
						



Создание и добавление элементов


Чтобы создать новый элемент - используется метод document.createElement(тип).

						var newDiv = document.createElement('div')
						

Тут же можно и проставить свойства и содержание созданному элементу.
						var newDiv = document.createElement('div')
						newDiv.className = 'my-class'
						newDiv.id = 'my-id'
						newDiv.style.backgroundColor = 'red'
						 
						newDiv.innerHTML = 'Привет, мир!'
						

Добавление в DOM


Добавить новый элемент к детям существующего элемента можно методом appendChild, который в DOM есть у любого тега.

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

						<ul id="list">
						<li>Первый элемент</li>
						</ul>
						
							// элемент-список UL
							var list = document.getElementById('list')
							 
							// новый элемент
							var li = document.createElement('LI')
							li.innerHTML = 'Новый элемент списка'
							 
							// добавление в конец
							list.appendChild(li)
						

Метод appendChild всегда добавляет элемент последним в список детей.


Добавление в конкретное место


Новый элемент можно добавить не в конец детей, а перед нужным элементом.
Для этого используется метод insertBefore родительского элемента.

Он работает так же, как и appendChild, но принимает вторым параметром элемент, перед которым нужно вставлять.

						parentElem.insertBefore(newElem, target)
						

Например, в том же списке добавим элементы перед первым li.
						<ul id="list">
						<li>Первый элемент</li>
						</ul>
						

						// родительский элемент UL
						var list = document.getElementById('list2')
						// элемент для вставки перед ним (первый LI)
						var firstLi = list.getElementsByTagName('LI')[0]
							 
						// новый элемент
						var newListElem = document.createElement('LI')
						newListElem.innerHTML = 'Новый элемент списка'
							 
						// вставка
						list.insertBefore(newListElem, firstLi)
						

Метод insertBefore позволяет вставлять элемент в любое место, кроме как в конец. А с этим справляется appendChild. Так что эти методы дополняют друг друга.

Метода insertAfter нет, но нужную функцию легко написать на основе комбинации insertBefore и appendChild.

Удаление узла DOM


Чтобы убрать узел из документа - достаточно вызвать метод removeChild из его родителя.

						list.removeChild(elem)
						

Если родителя нет "на руках", то обычно используют parentNode. Получается так:
						elem.parentNode.removeChild(elem)
						

Неуклюже, но работает.

Задание
Практически все JavaScript-приложения выполняют те или иные действия, откликаясь на различные события.

Событие - это сигнал от браузера о том, что что-то произошло.

Есть множество самых различных событий.

  • DOM-события, которые инициируются элементами DOM. Например, событие click происходит при клике на элементе, а событие mouseover - когда указатель мыши появляется над элементом,
  • События окна. Например событие resize - при изменении размера окна браузера,
  • Другие события, например load, readystatechange. Они используются, скажем, в технологии AJAX.

Именно DOM-события связывают действия, происходящие в документе, с кодом JavaScript, тем самым обеспечивая динамический веб-интерфейс.

Назначение обработчиков



Для того, чтобы скрипт реагировал на событие - нужно назначить хотя бы одну функцию-обработчик. Обычно обработчики называют "on+имя события", например: onclick.

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

Существует несколько способов назначать обработчик на конкретное событие элемента. Все они представлены ниже.

Через атрибут HTML-тега

Обработчик события можно указать в виде inline-записи, прямо в атрибуте onсобытие.

Например, для обработки события click на кнопке input, можно назначить обработчик onclick вот так:
						<input id="b1" value="Нажми Меня" onclick="alert('Спасибо!');" type="button"/>
						


Можно назначить и функцию.

Например, пусть при клике на кнопку input запускается функция count_rabbits(). Для этого запишем вызов функции в атрибут onclick:

							<html>
							 
							    <head>
							        <script type="text/javascript">
							            function count_rabbits() {
							                for(var i=1; i<=3; i++) {
							                   // оператор + соединяет строки
							                   alert("Из шляпы достали "+i+" кролика!")
							                }
							            }
							         </script>
							    </head>
							 
							    <body>
							         <input type="button" onclick="count_rabbits()" value="Считать кролей!"/>
							    </body>
							 
							</html>
						


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

У этого способа установки обработчика есть и минусы. Как только обработчик начинает занимать больше одной строки - читабельность резко падает.

Впрочем, сколько-нибудь сложные обработчики в HTML никто не пишет. Вместо этого лучше устанавливать обработчики из JavaScript способами, которые будут представлены ниже.

Через свойство объекта

Самый близкий родственник описанного выше способа - установка функции-обработчика через свойство onсобытие соответствующего элемента. Этот способ тоже будет работать в любом браузере с поддержкой JavaScript.

Для этого нужно:

  • получить элемент
  • назначить обработчик свойству on+имя


Вот пример установки обработчика события click на элемент с id="myElement":

						document.getElementById('myElement').onclick = function() {
							alert('Спасибо');
						}
						<input id="myElement" type="button" value="Нажми меня"/>
						


Конечно, можно и не создавать анонимную функцию, а использовать любую уже готовую:

							function doSomething() {
							    alert('Спасибо');
							}
							 
							document.getElementById('button').onclick = doSomething	;		
						


Обратите внимание - свойству присваивается именно сама функция-обработчик doSomething, а не doSomething()

doSomething() - это результат запуска функции, а так как вызова return в ее коде нет, то этот результат будет undefined.

Описанная установка обработчика через свойство - очень популярный и простой способ.

У него есть один недостаток: на элемент можно повесить только один обработчик нужного события.

Например:

						input.onclick = function() { alert(1) }
						// ...
						input.onclick = function() { alert(2) }  // заменит предыдущий
						


Специальные методы

Представленных выше методов недостаточно для случаев, которые возникают при разработке серьёзного JavaScript-приложения.

Классический пример - установка обработчика на событие "содержимое окна загрузилось":

							// разные элементы интерфейса могут иметь интерес
							// в том, чтобы их вызвали при загрузке документа
							window.onload = function() {
							   alert('Документ загружен!')
							}
						


Существует два основных интерфейса для установки событий.

Решение Microsoft

Методы, предложенные Microsoft, работают только в браузерах Internet Explorer и Opera (она поддерживает метод Microsoft для лучшей совместимости).

Установка обработчика:

						element.attachEvent( "on"+имя события, обработчик)
						


Удаление обработчика:

						element.detachEvent( "on"+имя события, обработчик)
						


Например:

							var input = document.getElementById('b1')
							var handler = function() {
							    alert('Спасибо!')
							}
							input.attachEvent( "onclick" , handler) // поставить обработчик
							// ....
							input.detachEvent( "onclick", handler) // убрать обработчик
						


Частая ошибка новичков

Обратите внимание - установка и удаление обработчика оперируют одной и той же функцией handler.

Так было бы неправильно:

							input.attachEvent( "onclick" ,
							   function() {alert('Спасибо')}
							)
						// ....
							input.detachEvent( "onclick",
							   function() {alert('Спасибо')}
							)
							// function(){} создает две разные функции
						


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

Как уже говорилось ранее, вы можете установить несколько обработчиков на одно событие одного элемента:

							var myElement2 = document.getElementById("myElement2");
							var handler = function() {
							    alert('Спасибо!');
							}
							 
							var handler2 = function() {
							    alert('Еще раз спасибо!');
							}
							 
							myElement2.attachEvent("onclick", handler);
							myElement2.attachEvent("onclick", handler2);
						


Установка по стандарту W3C

Решение W3C работает во всех современных браузерах, кроме Internet Explorer.

Установка обработчика:

						element.addEventListener( имя_события, обработчик, фаза)
						


Удаление обработчика:

						element.removeEventListener( имя_события, обработчик, фаза)
						
Обратите внимание, что имя события указывается без префикса "on".

Еще одно отличие от решения Microsoft это третий параметр – фаза.

Если он установлен в true, то при срабатывании события во вложенном элементе, обработчик будет вызван на фазе "перехвата", а если значение будет false, то - на фазе "всплывания". Подробнее об этом будет написано далее, в разделе этой статьи "Порядок срабатывания событий". При обычной установке обработчика третий параметр всегда должен быть false.

Использование - аналогично решению от Microsoft:

							// ... объявить функцию-обработчик handler ...
							input.addEventListener( "click" , handler, false) // поставить обработчик
							// ....
							input.removeEventListener( "click", handler, false) // убрать обработчик
						


Как и в других случаях, вы должны передать имя обработчика не ставя круглых скобок, иначе функция будет выполнена сразу, а в качестве обработчика будет передан лишь её результат.

Объект "событие" (event)


Объект событие всегда передается обработчику и содержит массу полезной информации о том где и какое событие произошло.

Способов передачи этого объекта обработчику существует ровно два, и они зависят от способа его установки и от браузера.

W3C

В браузерах, работающих по рекомендациям W3C, объект события всегда передается в обработчик первым параметром.

						function doSomething(event) {
							// event - будет содержать объект события
						}
						 
						element.onclick = doSomething;
						

При вызове обработчика объект события event будет передан ему первым аргументом.

Можно назначить и вот так:

						element.onclick = function(event) {
							// event - объект события
						}
						
Internet Explorer

В Internet Explorer существует глобальный объект window.event, который хранит в себе информацию о последнем событии. А первого аргумента обработчика просто нет.

То есть, все должно работать так:

							// обработчик без аргументов
							function doSomething() {
							    // window.event - объект события
							}
							 
							element.onclick = doSomething;
						


Кросс-браузерное решение Можно кросс-браузерно получить объект события, использовав такой приём:

							function doSomething(event) {
							    event = event || window.event
							 
							    // Теперь event - объект события во всех браузерах.
							}
							 
							element.onclick = doSomething
						


Задание 1
Задание 2

Изменение свойств CSS


Что бы изменить стиль элемента, можно воспользоватся свойством style, котоырй есть у любого элмента страницы.
							document.getElementById('main').style.borderBottom = '1px solid red';
						

Что бы изменить несколько свойств:
							document.getElementById('main').style.cssText="background:#00FF00; border:2px solid #FF0000;"; 
						

В javaScript свойства называются также как в CSS толкьо без "-" и дополнительные слова начинаются с большой буквы (margin-top = marginTop, border = border, font-size = fontSize).

Можно также использовать setAttribute(key, value) для задания стиля элемента. Например, задать цвет элемента как красный, вызывая на элементе element.setAttribute('style', 'color: red');, но будьте осторожны, так как это удаляет любые изменения, сделанные в объекте style.

Задание

Проверка формы



Имея на сайте форму, будь то добавление комментариев или просто гостевая книга мы всегда хотим, чтобы пользователи вводили во все поля правильные данные. Например, мы хотим, чтобы в поле имя вводились не более 10 символов, а электронный адрес был вида name@mail.ru. Сделать такую мини проверку и предупредить об ошибке можно при помощи небольшой функции на javascript, которая будет «перехватывать» данные из формы и проверять их.

Для начала создадим саму форму, в которой будет имя и email пользователя, текст сообщения ну и кнопка отправки:

					<form name="Guest" onSubmit="provGuest(); return(false);" action="newmessage.php" method="post">
					Имя<br>
					<input type="text" name="name" value=""><br>
					E-mail<br>
					<input type="text" name="email" value=""><br>
					Сообщение<br>
					<textarea name="message"></textarea><br>
					<input type="submit" value="Отправить" name="submit">
					</form>
							


Параметр onSubmit и будет передавать данные нашей функции provGuest, написанную на javascript. А теперь займемся самой функцией.

				<script type="text/javascript">
				function provGuest() {
				obj_form=document.forms.Guest;
				obj_pole_name =obj_form.name;
				obj_pole_email =obj_form.email;
				obj_pole_message =obj_form.message;

				if (obj_pole_name.value==""){ //если в поле нет текста, то выводим сообщение об этом пользователю
				alert ("Напишите свое имя!");
				return;
				}
				txt = obj_pole_email.value;
				if (txt==""){ //если в поле нет текста, то выводим сообщение об этом пользователю
				alert ("Напишите Ваш E-mail!");
				return;
				}
				if (txt.indexOf("@") == -1) { //проверяем существование символа @
				alert("Введите корректный E-mail типа name@mail.ru");
				return;
				}
				if (txt.indexOf(".") == -1) { //проверяем существование символа .
				alert("Введите корректный E-mail типа name@mail.ru");
				return;
				}
				textMessage=obj_pole_message.value;
				if (textMessage==""){ //если в поле нет текста, то выводим сообщение об этом пользователю
				alert ("Напишите сообщение!");
				return;
				}
				if (textMessage.length<10){
				alert ("Длина сообщения должна быть не менее 10 символов");
				return;
				}
				//все обязательные данные введены, поэтому отправляем форму
				obj_form.submit();
				}
				</script>
							


Ну вот мы и сделали простейшую проверку для нашей формы. Но не забывайте о том, что проверку нужно обязательно проводить на стороне обработчика, так как javascript очень легко обойти.

Cookies



Для чтения и записи cookie используется свойство document.cookie. Однако, оно представляет собой не объект, а строку в специальном формате, для удобной манипуляций с которой нужны дополнительные функции.

Чтение

Чтение document.cookie производится с помощью свойства cookie

						alert( document.cookie );
						
Эта строка состоит из пар ключ=значение, которые перечисляются через точку с запятой с пробелом ; .

Значит, чтобы прочитать cookie, достаточно разбить строку по ; , и затем найти нужный ключ. Это можно делать либо через split и работу с массивом, либо через регулярное выражение.

Функция getCookie

Следующая функция getCookie(name) возвращает cookie с именем name:

						function getCookie(c_name) {
							if (document.cookie.length > 0) {
								c_start = document.cookie.indexOf(c_name + "=");
								if (c_start != -1) {
									c_start = c_start + c_name.length + 1;
									c_end = document.cookie.indexOf(";", c_start);
									if (c_end == -1) c_end = document.cookie.length;
									return unescape(document.cookie.substring(c_start, c_end));
								}
							}
							return "";
						}
						


Функция setCookie

В document.cookie можно писать. При этом запись не перезаписывает существующие cookie, а дополняет к ним!

						function setCookie (name, value) {
							document.cookie = name + "=" + escape(value);
						}
						


Однако, всё не так просто. У cookie есть ряд важных настроек, которые очень желательно указать, так как значения по умолчанию у них неудобны.

Эти настройки указываются после пары ключ=значение, каждое — после точки с запятой:

path=/mypath

Путь, внутри которого будет доступ к cookie. Если не указать, то имеется в виду текущий путь и все пути ниже него.

Как правило, используется path=/, то есть cookie доступно со всех страниц сайта.

domain=site.com

Домен, на котором доступно cookie. Если не указать, то текущий домен. Допустимо указывать текущий домен site.com и его поддомены, например forum.site.com.

Если указать специальную маску .site.com, то cookie будет доступно на сайте и всех его поддоменах. Это используется, например, в случаях, когда кука содержит данные авторизации и должна быть доступна как на site.com, так и на forum.site.com.

expires=Tue, 19 Jan 2038 03:14:07 GMT

Дата истечения куки в формате GMT. Получить нужную дату можно, используя объект Date. Его можно установить в любое время, а потом вызвать toUTCString(), например:

							// +1 день от текущего момента
							var date = new Date;
							date.setDate( date.getDate() + 1 );
							alert( date.toUTCString() );
							


Если дату не указать, то cookie будет считаться «сессионным». Такое cookie удаляется при закрытии браузера.

Если дата в прошлом, то кука будет удалена.

secure

Cookie можно передавать только по HTTPS.

Функция delCookie

						function cookies_del(name){
							var cookie_date = new Date (); 
							cookie_date.setTime (cookie_date.getTime() - 1);
							document.cookie = name += "=; expires=" + cookie_date.toGMTString();
						}
						


Jquery Cookes
Задание 1
Задание 2

Ajax



AJAX, или, более длинно, Asynchronous Javascript And Xml - технология для взаимодействия с сервером без перезагрузки страниц

За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.

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

Технология AJAX, как указывает первая буква A в ее названии - асинхронна, т.е браузер, отослав запрос, может делать что угодно, например, показать сообщение об ожидании ответа, прокручивать страницу, и т.п.

Для обмена данными с сервером используется специальный объект XmlHttpRequest, который умеет отправлять запрос и получать ответ с сервера. Кроссбраузерно создать такой объект можно, например, так:

							function getXmlHttp(){
								var xmlhttp;
								  try {
							    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
								  } catch (e) {
								    try {
								      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
								    } catch (E) {
								      xmlhttp = false;
								    }
								  }
								  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
							    xmlhttp = new XMLHttpRequest();
								  }
								  return xmlhttp;
							}
						


Пример обработки запроса:

							// javascript-код голосования из примера
							function vote() {
							    // (1) создать объект для запроса к серверу
							    var req = getXmlHttp() 
							        
							        // (2)
							    // span рядом с кнопкой
							    // в нем будем отображать ход выполнения
						var statusElem = document.getElementById('vote_status')
							     
							    req.onreadystatechange = function() { 
							        // onreadystatechange активируется при получении ответа сервера
							 
							        if (req.readyState == 4) {
							            // если запрос закончил выполняться
						 
							            statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..)
							 
							            if(req.status == 200) {
							                 // если статус 200 (ОК) - выдать ответ пользователю
							                alert("Ответ сервера: "+req.responseText);
							            }
							            // тут можно добавить else с обработкой ошибок запроса
							        }
							 
							    }
							 
							       // (3) задать адрес подключения
							    req.open('GET', '/ajax_intro/vote.php', true); 
							 
							    // объект запроса подготовлен: указан адрес и создана функция onreadystatechange
							    // для обработки ответа сервера
							      
							        // (4)
							    req.send(null);  // отослать запрос
							   
							        // (5)
							    statusElem.innerHTML = 'Ожидаю ответа сервера...'
							}
						


Поток выполнения, использованный vote, довольно типичен и выглядит так:

Функция создает объект XmlHttpRequest

  • назначает обработчик ответа сервера onreadystatechange
  • открывает соединение open
  • отправляет запрос вызовом send (ответ сервера принимается срабатывающей в асинхронном режиме функцией onreadystatechange)
  • показывает посетителю индикатор состояния процесса


Серверный обработчик, к которому обращен AJAX-запрос (в примере это vote.php) по сути ничем не отличается от обычной страницы. AJAX-запрос, отправляемый XmlHttpRequest, ничем не отличается от обычного запроса.

Просто текст, который возвращает сервер, не показывается как HTML, а читается и обрабатывается функцией onreadystatechange.

Для POST


xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

JSON

Что такое JSON?

JSON - простой, основанный на использовании текста, способ хранить и передавать структурированные данные. С помощью простого синтаксиса вы можете легко хранить все, что угодно, начиная от одного числа до строк, массивов и объектов, в простом тексте. Также можно связывать между собой массивы и объекты, создавая сложные структуры данных.

После создания строки JSON, ее легко отправить другому приложению или в другое место сети, так как она представляет собой простой текст.

JSON имеет следующие преимущества:

  • Он компактен.
  • Его предложения легко читаются и составляются как человеком, так и компьютером.
  • Его легко преобразовать в структуру данных для большинства языков программирования (числа, строки, логические переменные, массивы и так далее)
  • Многие языки программирования имеют функции и библиотеки для чтения и создания структур JSON.


Название JSON означает JavaScript Object Notation (представление объектов JavaScript). Как и представляет имя, он основан на способе определения объектов (очень похоже на создание ассоциативных массивов в других языках) и массивов.

Для чего используется JSON?

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

Пример:

  • Пользователь нажимает миниатюру продукта в онлайн магазине.
  • JavaScript, выполняющийся на браузере, генерирует запрос AJAX к скрипту PHP, запущенному на сервере, передавая ID выбранного продукта.
  • Скрипт PHP получает название продукта, описание, цену и другую информацию из базы данных. Затем составляет из данных строку JSON и отсылает ее браузеру.
  • JavaScript, выполняющийся на браузере, получает строку JSON, декодирует ее и выводит информацию о продукте на странице для пользователя.
Также можно использовать JSON для отправки данных от браузера на сервер, передавая строку JSON в качестве параметра запросов GET или POST. Но данный метод имеет меньшее распространение, так как передача данных через запросы AJAX может быть упрощена. Например, ID продукта может быть включен в адрес URL как часть запроса GET.

Библиотека jQuery имеет несколько методов, например, getJSON() и parseJSON(), которые упрощают получение данных с помощью JSON через запросы AJAX.

Как создать строку JSON?

Есть несколько основных правил для создания строки JSON:

  • Строка JSON содержит либо массив значений, либо объект (ассоциативный массив пар имя/значение).
  • Массив заключается в квадратные скобки ([ и ]) и содержит разделенный запятой список значений.
  • Объект заключается в фигурные скобки ({ и }) и содержит разделенный запятой список пар имя/значение.
  • Пара имя/значение состоит из имени поля, заключенного в двойные кавычки, за которым следует двоеточие (:) и значение поля.
  • Значение в массиве или объекте может быть:
    • Числом (целым или с плавающей точкой)
    • Строкой (в двойных кавычках)
    • Логическим значением (true или false)
    • Другим массивом (заключенным в квадратные скобки)
    • Другой объект (заключенный в фигурные скобки)
    • Значение null


Чтобы включить двойные кавычки в строку, нужно использовать обратную косую черту: \". Так же, как и во многих языках программирования, можно помещать управляющие символы и шестнадцатеричные коды в строку, предваряя их обратной косой чертой. Смотрите детали на сайте JSON.

Простой пример строки JSON

Ниже приводится пример оформления заказа в формате JSON:

							{
							  "orderID": 12345,
							  "shopperName": "Ваня Иванов",
							  "shopperEmail": "ivanov@example.com",
							  "contents": [
							    {
							      "productID": 34,
							      "productName": "Супер товар",
							      "quantity": 1
							    },
							    {
							      "productID": 56,
							      "productName": "Чудо товар",
							      "quantity": 3
							    }
							  ],
							  "orderCompleted": true
							}
						


Рассмотрим строку подробно:

Мы создаем объект с помощью фигурных скобок ({ и }).
В объекте есть несколько пар имя/значение:

"orderID": 12345
Свойство с именем "orderId" и целочисленным значением 12345
"shopperName": "Ваня Иванов"
свойство с именем "shopperName" и строковым значением "Ваня Иванов"
"shopperEmail": "johnsmith@example.com"
Свойство с именем "shopperEmail" и строковым значением "ivanov@example.com"
"contents": [ ... ]
Свойство с именем "contents", значение которого является массивом
"orderCompleted": true
Свойство с именем "orderCompleted" и логическим значением

В массиве "contents" есть 2 объекта, представляющие отдельные позиции в заказе. Каждый объект содержит 3 свойства: productID, productName, и quantity

Кстати, так как JSON основан на объявлении объектов JavaScript, то вы можете быстро и просто сделать выше приведенную строку JSON объектом JavaScript:

							var cart = {
							  "orderID": 12345,
							  "shopperName": "Ваня Иванов",
							  "shopperEmail": "ivanov@example.com",
							  "contents": [
							    {
							      "productID": 34,
							      "productName": "Супер товар",
							      "quantity": 1
							    },
							    {
							      "productID": 56,
							      "productName": "Чудо товар",
							      "quantity": 3
							    }
							  ],
							  "orderCompleted": true
							};
							
Сравнение JSON и XML

Во многих отношениях вы можете рассматривать JSON как альтернативу XML, по крайней мере, в сфере веб приложений. Концепция AJAX оригинально основывалась на использовании XML для передачи данных между сервером и браузером. Но в последние годы JSON становится все более популярным для переноса данных AJAX.

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

Вот как будет выглядеть выше приведенный пример объекта на XML:

							<object>
							  <property>
							    <key>orderID</key>
							    <number>12345</number>
							  </property>
							  <property>
							    <key>shopperName</key>
							    <string>Ваня Иванов</string>
							  </property>
							  <property>
							    <key>shopperEmail</key>
							    <string>ivanov@example.com</string>
							  </property>
							  <property>
							    <key>contents</key>
							    <array>
							      <object>
							        <property>
							          <key>productID</key>
							          <number>34</number>
							        </property>
							        <property>
							          <key>productName</key>
							          <string>Супер товар</string>
							        </property>
							        <property>
							          <key>quantity</key>
							          <number>1</number>
							        </property>      
							      </object>
							      <object>
							        <property>
							          <key>productID</key>
							          <number>56</number>
							        </property>
							        <property>
							          <key>productName</key>
							          <string>Чудо товар</string>
							        </property>
							        <property>
							          <key>quantity</key>
							          <number>3</number>
							        </property>
							      </object>
							    </array>
							  </property>
							  <property>
							    <key>orderCompleted</key>
							    <boolean>true</boolean>
							  </property>
							</object>
						
Версия XML имеет существенно больший размер. В действительности она имеет длину 1128 символов, а вариант JSON - только 323 символа. Версию XML также достаточно трудно воспринимать.

Конечно, это радикальный пример. И возможно создать более компактную запись XML. Но даже она будет существенно длиннее эквивалента на JSON.

Работаем со строкой JSON в JavaScript

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

Большинство языков программирования имеют инструменты для простого преобразования переменных в строки JSON и наоборот.

Создаем строку JSON из переменной JavaScript имеет встроенный метод JSON.stringify(), который берет переменную и возвращает строку JSON, представляющую ее содержание. Например, создадим объект JavaScript, который содержит сведения о заказе из нашего примера, а затем создадим из него строку JSON:

							  
							var cart = {
							  "orderID": 12345,
							  "shopperName": "Ваня Иванов",
							  "shopperEmail": "ivanov@example.com",
							  "contents": [
							    {
							      "productID": 34,
							      "productName": "Супер товар",
							      "quantity": 1
							    },
							    {
							      "productID": 56,
							      "productName": "Чудо товар",
						      "quantity": 3
							    }
							  ],
							  "orderCompleted": true
							};
							  
							alert ( JSON.stringify( cart ) );
							  
							


Данный код выдаст:

{"orderID":12345,"shopperName":"Ваня Иванов","shopperEmail":"ivanov@example.com", "contents":[{"productID":34,"productName":"Супер товар","quantity":1},{"productID":56, "productName":"Чудо товар","quantity":3}],"orderCompleted":true}

Обратите внимание, что метод JSON.stringify() возвращает строку JSON без пробелов. Ее сложнее читать, но зато она более компактна для передачи через сеть.

Создаем переменную из строки JSON Существует несколько способов разобрать строку JSON в JavaScript, но самый безопасный и надежный - использовать встроенный метод JSON.parse(). Он получает строку JSON и возвращает объект или массив JavaScript, который содержит данные. Например:

							  
							var jsonString = '                          \
							{                                           \
							  "orderID": 12345,                         \
							  "shopperName": "Ваня Иванов",             \
							  "shopperEmail": "ivanov@example.com",     \
							  "contents": [                             \
							    {                                       \
							      "productID": 34,                      \
							      "productName": "Супер товар",         \
							      "quantity": 1                         \
							    },                                      \
							    {                                       \
							      "productID": 56,                      \
							      "productName": "Чудо товар",          \
							      "quantity": 3                         \
							    }                                       \
							  ],                                        \
							  "orderCompleted": true                    \
							}                                           \
							';
							  
							var cart = JSON.parse ( jsonString );
							  
							alert ( cart.shopperEmail );
							alert ( cart.contents[1].productName );
							  
							
Мы создали переменную jsonString, которая содержит строку JSON нашего примера с заказом. Затем мы передаем данную строку методу JSON.parse(), который создает объект, содержащий данные JSON и сохраняет его в переменной cart. Остается только осуществить проверку, выведя свойства объекта shopperEmail и productName массива contents.

В результате мы получим следующий вывод:

ivanov@example.com
Чудо товар

В реальном приложении ваш JavaScript код будет получать заказ в виде строки JSON в AJAX ответе от скрипта сервера, передавать строку методу JSON.parse(), а затем использовать данные для отображения на странице пользователя.

JSON.stringify() и JSON.parse() имеют другие возможности, такие как использование возвратных функций для пользовательской конвертации определённых данных. Такие опции очень удобны для конвертации различных данных в правильные объекты JavaScript.

Задание 1
Задание Ajax отсылка емайл
содержание vote.php (заменить нужные параметры) -
							<?php
								if(mail("j.upmane@gmail.com", "My Subject", $_POST['name']))
									echo "Sent";
								else
									"not sent";

							?>
						
обязательно выставить на сервер чтобы работало!

Библиотека prototype.js



Prototype.js — довольно популярный фреймворк, способный облегчить жизнь JavaScript-разработчику.

На данный момент проект prototype.js располагается по адресу www.prototypejs.org, где вы сможете скачать последнюю стабильную версию или ознакомится с документацией.

Для подключения библиотеки достаточно скачать единственный js-файл и добавить его на вашу страницу:

						<script type="text/javascript" src="prototype-1.6.0.2.js"></script>
						


Не все начинающие JavaScript-разработчики знают, но в JavaScript можно в именах переменных использовать знак доллара ($). Эту особенность используют разработчики prototytpe.js, начиная имена базовых методов с $

							$()
							$$()
							$F()
							$A() и $H()
							$w()
						


Функция $()

Пожалуй, самая знаменитая и часто используемая функция. В качестве аргумента она принимает идентификатор (или массив идентификаторов) и отдает ссылку на объект с этим идентификатором (или массив соот-но).

						HTML:
						<div id="id_1">First DIV</div>
						<div id="id_2">Second DIV</div>

						JavaScript:
						alert(
							$("id_1").innerHTML
						); // Выведет 'First DIV'

						var divArray = $("id_1","id_2");
						alert(divArray.length); // Выведет 2
						


Функция "доллар" по сути является эквивалентом метода document.getElementById, но более продвинутым, т.к.:

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


Последний момент можно проиллюстрировать дополнением к предыдущему примеру:

						alert(
							$(
								$("id_1")
							).innerHTML
						); // Выведет 'First DIV'
						


Функция $$()

Функция "доллар-доллар" является существенным расширением предыдущей, т.к. в качестве аргументов принимает не только идентификаторы, но и в целом CSS-селекторы:

						$$('div'); // Вернет все ДИВы, также как document.getElementsByTagName('div')
						$$('div','span'); // Вернет массив всех ДИВов и СПАНов
						$$('#id_1'); // Вернет элемент с id="id_1", также как $('id_1')
						$$('li.faux'); // Вернет все элементы LI с классом 'faux'
						


Как видно из примера, $$('div') аналогично вызову document.getElementsByTagName('div'). Однако, в prototype.js существует надстройка в виде метода select(), который также возвращает массив элементов по селектору, но ищет их в дочерних элементах из контекстного объекта:

						HTML:
						<div id="parent">
							<span>Q</span>
							<span>W</span>
							<span>E</span>
						</div>
						<span>R</span>

						JavaScript:
						$('parent').select('span'); // Вернет массив СПАНов внутри элемента с id="parent"
						


Реализована поддержка атрибутов в селекторах (CSS 2.1):

						$$('input[type=text]'); // Вернет массив ИНПУТов только с type="text"
						


Также, начиная с версии 1.5.1, заявлено о поддержке селекторов CSS3:

						$$('div#parent :first-child') // Вернет первого потомка для ДИВа с id="parent"
						


Функция "доллар-доллар" имеет все шансы вытеснить своего исторического предка, т.к. дает огромные возможности разработчику для получения доступа к узлам документа.

Функция $F()

Удобна для работы с полями форм — возвращает их значение. В качестве аргумента принимает либо ID элемента, либо сам элемент:

						HTML :
						<input type="text" value="Hello!" id="inputId" />

						JavaScript :
						$F('inputId'); // Вернет 'Hello!'
						


Функции $A() и $H() В JavaScript есть базовые объекты, такие как Array, Date, Object и др. В некотором приближении их можно рассматривать в качестве классов (в терминах ООП). Библиотека prototype.js умеет создавать собственные классы и расширять уже имеющиеся.

В частности, класс Enumerable (перечисляемый) является расширением Array, а функция $A() приводит передаваемые ей массивы к виду экземпляра объекта Enumerable. Для примера, получим массив всех ДИВов на странице и изменим их внешний вид с помощью метода each() класса Enumerable:

						HTML :
						<div>First DIV</div>
						<div>Second DIV</div>
						<div>Third DIV</div>

						JavaScript :
						var allDiv = document.getElementsByTagName('div'); // Получим все ДИВы на странице
						allDiv = $A(allDiv); // Приведем их к виду экземпляра класса Enumerable
						allDiv.each(setColor); // С помощью метода each для каждого элемента применим функцию setColor

						function setColor(element,index) { // arg[0] - ссылка на элемент, arg[1] - индекс в массиве
							element.style.backgroundColor = 'red'; // Задаем фоновый цвет для ДИВа
						}
						


Класс Hash является расширением класса Object. Экземпляры класса Object — это ассоциативные массивы, содержащие набор пар ключ=значение. К сожалению, в JavaScript всего один явный способ перебора ассоциативных массивов — конструкция for in. А к экземплярам класса Hash можно применить множество полезный методов, таких как keys(), values() и др.

Функция $w() Небольшая полезная функция, преобразующая строку в массив слов. В качестве разделителей метод использует пробелы:

						$w('apples bananas kiwis') // Вернет массив ['apples', 'bananas', 'kiwis'];
						


YUI



Что такое YUI?

YUI (сокращенно от Yahoo User Interface) - это разработанная Yahoo.com библиотека JavaScript и CSS с открытым кодом. YUI включает утилиты JavaScript, фрэймворк CSS (шрифты, фрэймворк Grid), инструменты и устройства JavaScript для включения и управления вашими модулями.

В настоящее время доступны две версии YUI. YUI 2 был запущен в 2006, в него была включена львиная доля всех возможностей YUI. YUI 3 был выпущен в 2009 с абсолютно новым синтаксисом, доказывающим легкость использования библиотеки (особенно в обработке событий и работе с DOM).

Почему YUI?

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

  • Огромная библиотека инструментов, включающая одну из самых совершенных таблиц данных.
  • Удобная документация: к каждому инструменту и компоненту прилагается подробная инструкция и примеры. (api documentation)
  • Инструменты разработки: профайлер, встроенная в браузер консоль и фрэймворк тестирования.
  • Удобное управление событиями со встроенными событиями касаний и жестов.


Итак, теперь вы уже кое-что услышали об YUI, так что можно заглянуть в код!

Подключение библиотеки

Подгрузить YUI очень легко. Рассмотрим несколько методов.

Метод 1: файл прототипа YUI 3

Использование файла прототипа - это самый простой способ поместить YUI на вашу веб-страницу. Всего лишь прикрепите этот файл прототипа (около 6 KB), затем через JavaScript подключите нужные модули. Вот пример:

							<script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script> 
							<script> 
							YUI().use('node', 'anim','yui2-calendar', function(Y) { 
							    var YAHOO = Y.YUI2; 
							    Y.one('#test'); 
							}); 
							</script>
						


YUI.use() запрашивает необходимые модули и возвращает объект YUI со всеми модулями. Компоненты YUI 2 также можно включить, прописав yui2- к названию модуля. Если вы подключили компоненты YUI 2, то обращаться к ним можно через Y.YUI2.

Метод 2: конфигуратор YUI 3

Этот веб инструмент позволяет собрать все необходимые модули и загрузить или соединить ссылкой файл со всеми зависимостями (подобно jQuery UI). Он также предоставляет информацию о том, как файлы повлияют на загрузки.

Метод 3: упрощенный YUI

Simple YUI - это недавно появившийся инструмент, упрощающий работу с подключениями модулей, для тех, кто привык подключать библиотеку JavaScript и получать ко всему доступ. Подключите файл Simple YUI и вы получите глобальный объект YUI. Через переменную Y вы сможете управлять DOM, AJAX и эффектами UI.

							<script type="text/javaScript" src="http://yui.yahooapis.com/3.2.0pr2/build/simpleyui/simpleyui-min.js"></script> 
							   
							<script> 
							 //Y - это глобальная переменная, установленная скриптом SimpleYUI 
							 Y.one("#test").addClass("my class"); 
							</script>
						


Через Simple YUI вы все же можете динамически использовать другие модули YUI, подключая их с помощью YUI.use().

							Y.use('dd-drag', function(Y) { 
							    // подключение модуля 'drag and drop' 
							});
						


Simple YUI может помочь программистам, привыкшим использовать jQuery, перейти на YUI.

Работа с DOM

В YUI 3 работа с DOM осуществляется очень просто. Синтаксис покажется вам знакомым, если вы работали с jQuery в этом направлении.

YUI предоставляет два способа для получения корневых элементов DOM через Node module.

							Y.one('selecter') возвращает элемент YUI, являющийся элементом DOM.
							Y.all('selecter') возвращает список совпадающих элементов YUI.
						


Вот пример:

							// Y.one 
							var node = Y.one('#test-div'); // получает элемент с идентификатором test-div 
							var node2 = Y.one(document.body);  // в Y.one также можно прописать элемент DOM
							Y.one('#my-list').get('id'); // my-list 
							   
							// Y.all 
							var nodes = Y.all('#my-list li'); // все элементы с идентификатором my-list 
							   
							// связывание 
							var nodes2 = Y.one('#my-list').all('li'); // все элементы с идентификатором my-list
							var parent = Y.one('#my-list').get('parentNode'); // возвращает родительский элемент элемента my-list (как объект YUI Node)
						


В YUI также есть метод 'test', который проверяет, есть ли у элемента заданный селектор.

							var node = Y.one('#test-div'); 
							// если у элемента node есть селектор primary 
							if(node.test('.primary')) { 
							    doSomething(); 
							}
						


Для управления атрибутами элемента в YUI есть методы get и set, а также очень удобные функции addClass и removeClass.

							// get и set 
							Y.one('#test-div').get('id'); 
							Y.one('#test-div').set('innerHTML', 'Test Content'); 
							   
							// addClass, removeClass 
							Y.one('#test-div').addClass('highlighted'); // добавляет класс блоку div 
							Y.all('p').removeClass('highlighted'); // удаляет класс у всех элементов p
						

События



Добавить событие можно с помощью метода on. Вы можете применить метод к элементу (Node) или к объекту YUI. Например:

							// вызов через YUI объект 
							// myevent|click указывает пространство имен myevent
							Y.on("myevent|click", function() { // do something
							}, "#test p");  
							   
							// вызов через NodeList 
							Y.all("#test p").on("myevent|click", function() { // do something
							});
						


Интересно то, что если вы используете метод из первого примера, не обязательно, чтобы совпадение обнаружилось немедленно. YUI продолжает поиск совпадений еще 15 секунд после завершения загрузки страницы, то есть, для использования этого метода нет необходимости ждать, чтобы документ загрузился (вам не нужно передавать обработчика события в функцию document.load).

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

							Y.all("#test p").detach("myevent|click");
						


Вы также можете моделировать события...

							Y.one("#test").simulate("click");
						


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

							Y.one("#test").fire("myevents:custom_event_one");
						


YUI 3 также поддерживает обработку событий касаний, что позволит использовать ваше JavaScript приложение на мобильных телефонах. Естественно, чтобы заставить события касаний действовать, необходимо подключить модуль "event-touch" через YUI.on.

							Y.one("#test").on('touchstart', function() { 
							    // запущено событие касания 
							});
						


AJAX

Запросы AJAX обрабатываются через IO module YUI 3. Вызов AJAX осуществляется через функцию io:

							Y.io('/url/to/call', { 
							    // метод POST 
							    method: 'POST', 
							    // сериализация формы
							    form: { 
							        id: "my_form", 
							        useDisabled: true 
							    }, 
							    // жизненный цикл обработчика событий ajax
							    on: { 
							        complete: function (id, response) { 
							            var data = response.responseText; // полученные данные 
							        } 
							    } 
							});
						


Метод IO принимает в качестве параметров URL и конфигурационный объект. Этот объект включает много полей, но я включил в пример только самые используемые.

  • method - какой HTTP метод использовать.
  • form - если определено данное поле, форма с заданным id будет сериализована и передана с запросом.
  • on - устанавливает обработчиков событий для различных стадий запрашиваемого жизненного цикла.


Модуль YUI io также позволяет обрабатывать запросы между доменами с помощью файла, основанного на Flash. Правда, есть некоторые предостережения. Во-первых, копия данного файла должна находится на вашем сервере, а во-вторых, домен, к которому вы хотите получить доступ, должен поддерживать услугу междоменного доступа к файлам.

							Y.io('http://www.somedomain/web/service/', { 
							    method: 'POST', 
							    data: 'data=123', 
							    // использует flash 
							    xdr: { 
							        use: 'flash', 
							        dataType: 'xml' 
							    } 
							    // жизненный цикл обработчика событий ajax 
							    on: { 
							        complete: function (id, response) { 
							            var data = response.responseText; // полученные данные
							        } 
							    } 
							});
						


В YUI также есть поддержка JSONP через специальный модуль jsonp.

							Y.jsonp(someurl, function(response) { 
							    // обработка полученных данных jsonp
							});
						


Еще один очень полезный для соединения с AJAX модуль - JSON. Он позволяет разбирать запросы AJAX так, чтобы получать результаты JSON. Для этого необходимо использовать метод JSON.parse.

							var obj= Y.JSON.parse(response.responseText);
						


Анимация

В YUI 3 Есть модуль анимаций, который используется для реализации практически любой анимации. Синтаксис во многом отличается от jQuery, поэтому давайте рассмотрим его.

Анимация в YUI осуществляется в несколько стадий. Сначала вы должны определить новый объект, который описывает вашу анимацию, а затем его запустить.

							// анимировать блок div: расширение к 100х100
							var animation = new Y.Anim({ 
							   node: '#my-div',  // selector to the node you want to animate. 
							   // начальные значения (не обязательно) 
							   from: { 
							      height: 0, 
							      width: 0 
							   }, 
							   // конечные значения
							   to: { 
							      height: 100, 
							      width: 100 
							   }, 
							   duration: 0.5, // установить продолжиельность 
							   easing: Y.Easing.easeOut // установить смягчение
							}); 
							   
							animation.run();
						


Любое свойство можно изменить с помощью .get() и .set(), что позволит вам изменять саму анимацию или элемент, который нужно анимировать. Анимации также запускают события, которые могут прослушиваться.

							// анимация - это объект Y.Anim 
							animation.on('end', function() { 
							    // запускается после завершения анимации 
							});
						


В общем, объект анимации в YUI может быть использован для создания любой анимации в вашем приложении.

Виджеты Виджеты - это самые изящные инструменты вYUI. В YUI 3 пока что набор виджетов ограничен (окна, слайдеры и оверлей), однако предусмотрена возможность создания своего виджета. С другой стороны, в YUI 2 есть огромная библиотека виджетов. Вот некоторые из них:

  • Data Table - виджет таблиц данных, включающих загрузку и разбиение на страницы с помощью AJAX, возможность редактирования содержимого ячеек, возможность изменять размеры колонок и многое другое.
  • ImageCropper - виджет, позволяющий вырезать изображения.
  • LayoutManager - виджет для создания сложных макетов с помощью JavaScript.
  • Calendar - виджет для создания всплывающего календаря.


Виджетов, которые вы можете использовать, очень много. Их можно найти на сайте YUI 2 разработок.

Библиотеки CSS

Последний компонент YUI, который мы рассмотрим, - это библиотеки CSS. В YUI 3 четыре такие библиотеки:

  • CSS Reset - основные правила сброса параметров CSS. У каждого свои соображения по поводу того, как должен выглядеть файл сброса параметров, так что этот вариант вам может и не понравиться.
  • CSS Base - эти правила построены на основе предыдущих и предназначены для обеспечения одинакового отображения в различных браузерах. Этот файл содержит правила, связанные со стилями ввода информации, размерами заголовков, стилями таблиц.
  • CSS Fonts - нормализовывает размер шрифтов во всех поддерживаемых документах. Как только вы примените это правило, все размеры шрифтов изменятся согласно предоставленной YUI информации. В YUI используются стандарты шрифтов популярного источника HTML5Boilerplate.
  • CSS Grids - фрэймворк для размещения элементов.
Библиотека jQuery предназначена прежде всего для удобного поиска и манипулирования элементами на веб-странице. При нахождении определенного элемента с помощью jQuery можно повесить на него обработчики событий, анимировать, скрыть или, наоборот, отобразить, создать для элемента интерактивное взаимодействие с пользователем, изменить его стили и т.д. И даже если вы не работали раньше с jQuery, ее освоение не составит особых трудностей. Для более подробного ознакомления с данной библиотекой можно обратиться к руководству Изучаем jQuery. Здесь же я представлю краткий обзор возможностей библиотеки.

Функция jQuery



Функция jQuery позволяет использовать всей мощь библиотеки jQuery. Данная функция (jQuery) в качестве псевдонима имеет знак $ (так как символ $ легко набрать на клавиатуре, и он представляет действительное имя функции, которое можно употреблять в JavaScript). Поэтому следующие записи функции jQuery будут идентичны:

						jQuery(document).ready(function(){
						  // здесь код анонимной функции
						});
												
						$(function(){
						  // здесь код анонимной функции
						});
													
						$(document).ready(function(){
						  // здесь код анонимной функции
						});
						


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

Селекторы jQuery



Для выборки из структуры страницы нужных элементов используются селекторы.

Основные селекторы jQuery
Шаблон селектора Значение Пример
$("Element") Выбирает все элементы с данным именем тега $("p") выбирает все теги p.
$("ul") выбирает все элементы ul
$("#id") Выбирает все элементы с определенным значением id Так, в следующем коде:
<div id="box1"></div>
<div id="box2"></div>
селектор $("#box1") выберет првый элемент
$(".className") Выбирает все элементы с определенным значением атрибута class Допустим, у нас следующий код:
<div class="apple"></div>
<div class="apple"></div>
<div class="orange"></div>
<div class="banana"></div>
то селектор $(".apple") выберет первые два элемента
$("selector1,selector2,selectorN") Выбирает элементы, которые соответствуют данным селекторам Допустим, у нас следующий код:
<div class="apple"></div>
<div class="apple"></div>
<div class="orange"></div>
<div class="banana"></div>
то селектор $(".apple, .orange") выберет первые три элемента


Например:

							
						$(function () {
							$("#results").css("top", "20px");
							});
						});
						


Сначала мы получаем элемент, у которого id имеет значение results (<div id="results"></div>), а потом с помощью функции css устанавливаем определенное значение для его свойства top. Причем если у нас на странице несколько элементов, у которых id="results", то селектор вернет весь набор из этих элементов. И к каждому из элементов данного набора будет применено преобразование.

Выше в таблице показан лишь небольшой базовый список селекторов. Полный же список селекторов вы можете найти на сайте http://www.w3.org/TR/css3-selectors/

Фильтры jQuery



В дополнение к селекторам применяются фильтры. Можно выделить следующий набор базовых фильтров:

Фильтр Значение
:eq(n) Выбирает n-й элемент выборки (нумерация начинается с нуля)
:even Выбирает элементы с четными номерами
:odd Выбирает элементы с нечетными номерами
:first Выбирает первый элемент выборки
:last Выбирает последний элемент выборки
:gt(n) Выбирает все элементы с номером, большим n
:lt(n) Выбирает все элементы с номером, меньшим n
:header Выбирает все заголовки (h1, h2, h3)
:not(селектор) Выбирает все элементы, которые не соответствуют селектору, указанному в скобках


Например, если у нас на странице несколько элементов, у которых id="results", а нам надо выбрать только первый, то мы можем применить следующие выражения: $("#results:first") или $("#results:eq(0)")

Специальный род фильтров - фильтры контента обеспечивают доступ к элементам, имеющим определенное содержимое:

Фильтр Значение
:contains('content') Получает все элементы, которые содержат content
:has('селектор') Получает все элементы, которые содержат хотя бы один дочерний элемент, соответствующий селектору
:empty Получает все элементы, которые не имеют дочерних элементов
:first-child Получает все элементы, которые являются первыми дочерними элементами в своих родителях
:last-child Получает все элементы, которые являются последними дочерними элементами в своих родителях
:ntd-child(n) Получает все элементы, которые являются n-ными элементами в своих родителях (нумерация идет с единицы)
:only-child Получает все элементы, которые являются единственными дочерними элементами в своих родителях
:parent Получает все элементы, которые имеют, как минимум, один дочерний элемент
:not(селектор) Выбирает все элементы, которые не соответствуют селектору, указанному в скобках


Например, если мы хотим получить все элементы, содержащие текст asp.net mvc, мы можем применить следующее выражение: $(':contains("asp.net mvc")')

И завершая обзор фильтров, следует упомянуть о фильтрах форм, которые позволяют получить определенные элементы html-форм:

Фильтр Значение
button Получает все элементы button и элементы input с типом button
:checkbox Получает все элементы checkbox
:checked Получает все отмеченные элементы checkbox и radio
:disabled Получает все элементы, которые отключены
:enabled Получает все элементы, которые включены
:input Получает все элементы input
:password Получает все элементы password
:radio Получает все элементы radio
:reset Получает все элементы reset
:selected Получает все отмеченные элементы option
:submit Получает все элементы input с типом submit
:text Получает все элементы input с типом text


Мы можем комбинировать в одном выражении несколько селекторов и фильтров: $('#results:odd:has('img')').

В данном случае мы выбираем все нечетные элементы с id="results", которые содержат элементы img, то есть изображения.

События jQuery



jQuery предоставляет специальные методы для распространенных событий, как например, click или submit. Мы можем повесить свои обработчики для событий mouseover (наведение мыши) или keydown(нажатие клавиатуры) на любой элемент веб-страницы.

Например, обработчик нажатия мыши на элемент с id="bg" мог бы выглядеть следующим образом.

	
						$("#bg").mousedown (function (e) {}});
						


Или для примера обработаем нажатие клавиши:

	
						$(document).keydown(function(e){
							// если нажата клавиша вверх
							 if (e.which==38)
							 {
								// поднимаем некоторый элемент на 5 пикселей вверх
								$("#paddleB").css("top",top-5); 
							}
							});
						


Методы jQuery



Как говорилось выше, jQuery выполняет две основные задачи - поиск элементов и их изменение. Если для поиска предназначены селекторы и фильтры, то для манипуляции над элементами используются методы. Эти методы позволяют изменять внешний вид элемента, анимировать его, перемещать в структуре элементов DOM. Это методы довольно многочисленны, поэтому рассмотрим лишь вкратце:

Метод Описание
addClass('someClass') Добавляет для выбранного элемента класс someClass
removeClass('someClass') Удаляет для выбранного элемента класс someClass
toggleClass('someClass') Переключает для выбранного элемента класс someClass - если его нет, он добавляется, а если он есть - то удаляется
css('свойство', 'значение') Устанавливает для указанного свойства выбранного элемента указанное значение ($("#paddleB").css("top",25);)
append('новый элемент') Вставляет внутрь выбранного элемента новый элемент в качестве последнего дочернего ($("#results").append('<li>Новый элемент списка</li>');)
prepend('новый элемент') Вставляет внутрь выбраного элемента новый элемент в качестве первого дочернего
empty() Удаляет все дочерние элементы у выбранного элемента
remove() Удаляет элемент из структуры элементов DOM
attr('атрибут','значение') Устанавливает для атрибута новое значение
removeAttr('атрибут') Удаляет атрибут у выбранных элементов
children() Получает все дочерние элементы у выбранных элементов
parent() Получает все родительские элементы у выбранных элементов
parent() Получает все родительские элементы у выбранных элементов
hide() Скрывает выбранные элементы
show() Отображает выбранные элементы
toggle() Скрывает видимые элементы и отображает невидимые
animate() Анимирует элемент


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

	
						$(function () {
							$("img").mouseover(function () {
								$(this).animate({ height: '+=20', width: '+=20' });
							});
							$("img").mouseout(function () {
								$(this).animate({ height: '-=20', width: '-=20' });
							});
						});
						


Сначала при помощи селектора мы выбираем все элементы img, затем вешаем на них обработчик наведения курсора mouseover. Обработчик события наведения мыши в качестве аргумента принимает анонимную функцию, которая срабатывает при наведении курсора.

В этой функции с помощью ключевого слова this мы получаем элемент, на который мы наводим курсор, а затем с помощью функции animate мы устанавливаем свойства, которые будут анимироваться при наведении курсора.

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

Регулярные выражения



Регулярные выражения в javascript имеют особую краткую форму и стандартный PCRE-синтаксис.

Работают они через специальный объект RegExp.

Кроме того, у строк есть свои методы search,match,replace, но чтобы их понять - разберем-таки сначала RegExp.

Объект RegExp



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

						/pattern/флаги
						
						new RegExp("pattern"[, флаги])
						


pattern - регулярное выражение для поиска (о замене - позже), а флаги - строка из любой комбинации символов g(глобальный поиск), i(регистр неважен) и m(многострочный поиск).

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

						var reg = /ab+c/i
						
						var reg = new RegExp("ab+c", "i")
						


При втором вызове - т.к регулярное выражение в кавычках, то нужно дублировать \

						// эквивалентны
						re = new RegExp("\\w+")
						
						re = /\w+/
						


При поиске можно использовать большинство возможностей современного PCRE-синтаксиса.

Спецсимволы в регулярном выражении



Символ Значение
\ Для обычных символов - делает их специальными. Например, выражение /s/ ищет просто символ 's'. А если поставить \ перед s, то /\s/ уже обозначает пробельный символ.И наоборот, если символ специальный, например *, то \ сделает его просто обычным символом "звездочка". Например, /a*/ ищет 0 или больше подряд идущих символов 'a'. Чтобы найти а со звездочкой 'a*' - поставим \ перед спец. символом: /a\*/.
^ Обозначает начало входных данных. Если установлен флаг многострочного поиска ("m"), то также сработает при начале новой строки.Например, /^A/ не найдет 'A' в "an A", но найдет первое 'A' в "An A."
$ Обозначает конец входных данных. Если установлен флаг многострочного поиска, то также сработает в конце строки.Например, /t$/ не найдет 't' в "eater", но найдет - в "eat".
* Обозначает повторение 0 или более раз. Например, /bo*/ найдет 'boooo' в "A ghost booooed" и 'b' в "A bird warbled", но ничего не найдет в "A goat grunted".
+ Обозначает повторение 1 или более раз. Эквивалентно {1,}. Например, /a+/ найдет 'a' в "candy" и все 'a' в "caaaaaaandy".
? Обозначает, что элемент может как присутствовать, так и отсутствовать. Например, /e?le?/ найдет 'el' в "angel" и 'le' в "angle."Если используется сразу после одного из квантификаторов *, +, ?, или {}, то задает "нежадный" поиск (повторение минимально возможное количество раз, до ближайшего следующего элемента паттерна), в противоположность "жадному" режиму по умолчанию, при котором количество повторений максимально, даже если следующий элемент паттерна тоже подходит.Кроме того, ? используется в предпросмотре, который описан в таблице под (?=), (?!), и (?: ).
. (Десятичная точка) обозначает любой символ, кроме перевода строки: \n \r \u2028 or \u2029. (можно использовать [\s\S] для поиска любого символа, включая переводы строк). Например, /.n/ найдет 'an' и 'on' в "nay, an apple is on the tree", но не 'nay'.
(x) Находит x и запоминает. Это называется "запоминающие скобки". Например, /(foo)/ найдет и запомнит 'foo' в "foo bar." Найденная подстрока хранится в массиве-результате поиска или в предопределенных свойствах объекта RegExp: $1, ..., $9.Кроме того, скобки объединяют то, что в них находится, в единый элемент паттерна. Например, (abc)* - повторение abc 0 и более раз.
(?:x) Находит x, но не запоминает найденное. Это называется "незапоминающие скобки". Найденная подстрока не сохраняется в массиве результатов и свойствах RegExp.Как и все скобки, объединяют находящееся в них в единый подпаттерн.
x(?=y) Находит x, только если за x следует y. Например, /Jack(?=Sprat)/ найдет 'Jack', только если за ним следует 'Sprat'. /Jack(?=Sprat|Frost)/ найдет 'Jack', только если за ним следует 'Sprat' или 'Frost'. Однако, ни 'Sprat' ни 'Frost' не войдут в результат поиска.
x(?!y) Находит x, только если за x не следует y. Например, /\d+(?!\.)/ найдет число, только если за ним не следует десятичная точка. /\d+(?!\.)/.exec("3.141") найдет 141, но не 3.141.
x|y Находит x или y. Например, /green|red/ найдет 'green' в "green apple" и 'red' в "red apple."
{n} Где n - положительное целое число. Находит ровно n повторений предшествующего элемента. Например, /a{2}/ не найдет 'a' в "candy," но найдет оба a в "caandy," и первые два a в "caaandy."
{n,} Где n - положительное целое число. Находит n и более повторений элемента. Например, /a{2,} не найдет 'a' в "candy", но найдет все 'a' в "caandy" и в "caaaaaaandy."
{n,m} Где n и m - положительные целые числа. Находят от n до m повторений элемента.
[xyz] Набор символов. Находит любой из перечисленных символов. Вы можете указать промежуток, используя тире. Например, [abcd] - то же самое, что [a-d]. Найдет 'b' в "brisket", а также 'a' и 'c' в "ache".
[^xyz] Любой символ, кроме указанных в наборе. Вы также можете указать промежуток. Например, [^abc] - то же самое, что [^a-c]. Найдет 'r' в "brisket" и 'h' в "chop."
[\b] Находит символ backspace. (Не путать с \b.)
\b Находит границу слов (латинских), например пробел. (Не путать с [\b]). Например, /\bn\w/ найдет 'no' в "noonday"; /\wy\b/ найдет 'ly' в "possibly yesterday."
\B Обозначает не границу слов. Например, /\w\Bn/ найдет 'on' в "noonday", а /y\B\w/ найдет 'ye' в "possibly yesterday."
\cX Где X - буква от A до Z. Обозначает контрольный символ в строке. Например, /\cM/ обозначает символ Ctrl-M.
\d находит цифру из любого алфавита (у нас же юникод). Испльзуйте [0-9], чтобы найти только обычные цифры. Например, /\d/ или /[0-9]/ найдет '2' в "B2 is the suite number."
\D Найдет нецифровой символ (все алфавиты). [^0-9] - эквивалент для обычных цифр. Например, /\D/ или /[^0-9]/ найдет 'B' в "B2 is the suite number."
\f,\r,\n Соответствующие спецсимволы form-feed, line-feed, перевод строки.
\s Найдет любой пробельный символ, включая пробел, табуляцию, переводы строки и другие юникодные пробельные символы. Например, /\s\w*/ найдет ' bar' в "foo bar."
\S Найдет любой символ, кроме пробельного. Например, /\S\w*/ найдет 'foo' в "foo bar."
\t Символ табуляции.
\v Символ вертикальной табуляции.
\w Найдет любой словесный (латинский алфавит) символ, включая буквы, цифры и знак подчеркивания. Эквивалентно [A-Za-z0-9_]. Например, /\w/ найдет 'a' в "apple," '5' в "$5.28," и '3' в "3D."
\W Найдет любой не-(лат.)словесный символ. Эквивалентно [^A-Za-z0-9_]. Например, /\W/ и /[^$A-Za-z0-9_]/ одинаково найдут '%' в "50%."
\n где n - целое число. Обратная ссылка на n-ю запомненную скобками подстроку. Например, /apple(,)\sorange\1/ найдет 'apple, orange,' в "apple, orange, cherry, peach.". За таблицей есть более полный пример.
\0 Найдет символ NUL. Не добавляйте в конец другие цифры.
\xhh Найдет символ с кодом hh (2 шестнадцатиричных цифры)
\uhhhh Найдет символ с кодом hhhh (4 шестнадцатиричных цифры).


Проверка результатов: метод test



Чтобы просто проверить, подходит ли строка под регулярное выражение, используется метод test:

						if ( /\s/.test("строка") ) {
						...В строке есть пробелы!...
						}
						


Метод test начинает поиск, начиная со свойства lastIndex объекта RegExp, если оно установлено.

Поиск совпадений: метод exec



Метод exec возвращает массив и ставит свойства регулярного выражения.

Если совпадений нет, то возвращается null.

Например,

							// Найти одну d, за которой следует 1 или более b, за которыми одна d
							// Запомнить найденные b и следующую за ними d
							// Регистронезависимый поиск
							var myRe = /d(b+)(d)/ig;
							var myArray = myRe.exec("cdbBdbsbz");
						


Если в регулярном выражении включен флаг "g", Вы можете вызывать метод exec много раз для поиска последовательных совпадений в той же строке. Когда Вы это делаете, поиск начинается на подстроке str, с индекса lastIndex. Например, вот такой скрипт:

							var myRe = /ab*/g;
							var str = "abbcdefabh";
							while ((myArray = myRe.exec(str)) != null) {
							    var msg = "Found " + myArray[0] + ".  ";
							    msg += "Next match starts at " + myRe.lastIndex;
							    print(msg);
							}
						


Этот скрипт выведет следующий текст:

						Found abb. Next match starts at 3
						Found ab. Next match starts at 9
						


В следующем примере функция выполняет поиск по input. Затем делается цикл по массиву, чтобы посмотреть, есть ли другие имена.

Предполагается, что все зарегистрированные имена находятся в массиве А:

							var A = ["Frank", "Emily", "Jane", "Harry", "Nick", "Beth", "Rick",
							         "Terrence", "Carol", "Ann", "Terry", "Frank", "Alice", "Rick",
							         "Bill", "Tom", "Fiona", "Jane", "William", "Joan", "Beth"];
							 
							function lookup(input)
							{
							  var firstName = /\w+/i.exec(input);
							  if (!firstName)
							  {
							    print(input + " isn't a name!");
							    return;
							  }
							 
							  var count = 0;
							  for (var i = 0; i < A.length; i++)
							  {
							    if (firstName[0].toLowerCase() == A[i].toLowerCase())
							      count++;
							  }
							  var midstring = (count == 1) ? " other has " : " others have ";
							  print("Thanks, " + count + midstring + "the same name!")
							}
						


Строковые методы, поиск и замена



Следующие методы работают с регулярными выражениями из строк.

Все методы, кроме replace, можно вызывать как с объектами типа regexp в аргументах, так и со строками, которые автоматом преобразуются в объекты RegExp.

Так что вызовы эквивалентны:

						var i = str.search(/\s/)
						
						var i = str.search("\\s")
						


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

						var regText = "\\s"
						var i = str.search(new RegExp(regText, "g"))
						


Метод search(regexp)



Возвращает индекс регулярного выражения в строке, или -1.

Если Вы хотите знать, подходит ли строка под регулярное выражение, используйте метод search(аналогично RegExp-методы test). Чтобы получить больше информации, используйте более медленный метод match(аналогичный методу RegExp exec).

Этот пример выводит сообщение, в зависимости от того, подходит ли строка под регулярное выражение.

							function testinput(re, str){
							   if (str.search(re) != -1)
							      midstring = " contains ";
							   else
							      midstring = " does not contain ";
							   document.write (str + midstring + re.source);
							}
						

Метод match(regexp)



Если в regexp нет флага g, то возвращает тот же результат, что regexp.exec(string).

Если в regexp есть флаг g, то возвращает массив со всеми совпадениями.

Чтобы просто узнать, подходит ли строка под регулярное выражение regexp, используйте regexp.test(string).

Если Вы хотите получить первый результат - попробуйте regexp.exec(string).

В следующем примере match используется, чтобы найти "Chapter", за которой следует 1 или более цифр, а затем цифры, разделенные точкой. В регулярном выражении есть флаг i, так что регистр будет игнорироваться.

							str = "For more information, see Chapter 3.4.5.1";
							re = /chapter (\d+(\.\d)*)/i;
							found = str.match(re);
							alert(found);
						


Скрипт выдаст массив из совпадений:

							Chapter 3.4.5.1 - полностью совпавшая строка
							3.4.5.1 - первая скобка
							.1 - внутренняя скобка
						
Следующий пример демонстрирует использование флагов глобального и регистронезависимого поиска с match. Будут найдены все буквы от А до Е и от а до е, каждая - в отдельном элементе массива.

							var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
							var regexp = /[A-E]/gi;
							var matches = str.match(regexp);
							document.write(matches);
							 
							// matches = ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']
						


Замена, replace



Метод replace может заменять вхождения регулярного выражения не только на строку, но и на результат выполнения функции. Его полный синтаксис - такой:

						var newString = str.replace(regexp/substr, newSubStr/function)
						


  • regexp - Объект RegExp. Его вхождения будут заменены на значение, которое вернет параметр номер 2
  • substr - Строка, которая будет заменена на newSubStr.
  • newSubStr - Строка, которая заменяет подстроку из аргумента номер 1.
  • function - Функция, которая может быть вызвана для генерации новой подстроки (чтобы подставить ее вместо подстроки, полученной из аргумента 1).


Метод replace не меняет строку, на которой вызван, а просто возвращает новую, измененную строку.

Чтобы осуществить глобальную замену, включите в регулярное выражение флаг "g".

Если первый аргумент - строка, то она не преобразуется в регулярное выражение, так что, например,

						var ab = "a b".replace("\\s","..") // = "a b"
						


Вызов replace оставил строку без изменения, т.к искал не регулярное выражение \s, а строку "\s".

Спецсимволы в строке замены



В строке замены могут быть такие спецсимволы:

  • $$ - Вставляет "$".
  • $& - Вставляет найденную подстроку.
  • $` - Вставляет часть строки, которая предшествует найденному вхождению.
  • $' - Вставляет часть строки, которая идет после найденного вхождения.
  • $n or $nn - Где n или nn - десятичные цифры, вставляет подстроку вхождения, запомненную n-й вложенной скобкой, если первый аргумент - объект RegExp.


Замена через функцию



Если Вы указываете вторым параметром функцию, то она выполняется при каждом совпадении.

В функции можно динамически генерировать и возвращать строку подстановки.

Первый параметр функции - найденная подстрока. Если первым аргументом replace является объект RegExp, то следующие n параметров содержат совпадения из вложенных скобок. Последние два параметра - позиция в строке, на которой произошло совпадение и сама строка.

Например, следующий вызов replace возвратит XXzzzz - XX , zzzz.

							function replacer(str, p1, p2, offset, s)
							{
							return str + " - " + p1 + " , " + p2;
							}
							var newString = "XXzzzz".replace(/(X*)(z*)/, replacer)
						


Как видите, тут две скобки в регулярном выражении, и потому в функции два параметра p1, p2.

Если бы были три скобки, то в функцию пришлось бы добавить параметр p3.

Следующая функция заменяет слова типа borderTop на border-top:

							function styleHyphenFormat(propertyName)
							{
							  function upperToHyphenLower(match)
							  {
							    return '-' + match.toLowerCase();
							  }
							  return propertyName.replace(/[A-Z]/, upperToHyphenLower);
							}
						


Статичные регэкспы



В некоторых реализациях javascript регэкспы, заданные коротким синтаксисом /.../ - статичны. То есть, такой объект создается один раз в некоторых реализациях JS, например в Firefox. В Chrome все ок.

							function f() {
							  // при многократных заходах в функцию объект один и тот же
							  var re = /lalala/    
							}
						
По стандарту эта возможность разрешена ES3, но запрещена ES5.

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

При поиске всех совпадений в цикле проблем не возникает, т.к. последняя итерация (неудачная) обнуляет lastIndex.

Задание 1

Что бы успешно закончить курс, надо сделать самостоятельную работу - небольшую веб-страничку.
Тема работы не имеет значения.
Проект должен быть размещён на учебном сервере.
В работе должны быть обязательно следующие файлы -
index.html
style.css
code.js
а так же дополнительно несколько .html страниц по выбору (about, contacts ...).

Требования



  • HTML
    • Работа соответствует стандартам HTML5
    • Указан DOCTYPE
    • Документ валидируется без ошибок
    • Таблицы используются только для отображения табличных данных
    • Правильное использование ID и CLASS
    • Должны быть следующие элементы:
      • Заголовки разных уровней
      • Список
      • Теги оформления текста
      • Изображения
      • Форма
  • CSS
    • Все стили вынесены в отдельный файл
    • Документ валидируется без ошибок
    • В файле стилей должны быть описаны не мене 10 селекторов
    • Стилизация неверно заполненных полей формы (после проверки JS)
  • JS
    • Проверка обязательных полей формы
    • Проверка полей формы на соответсвие типу значения (введено ли число в числовое поле)
    • Проверка диапазона значений (например, зарплата больше 0)
    • Скрытие или показ элементов DOM (читать далее, удаление разделов по нажатию кнопки)
    • Вычислительная функция (перевод валюты, расчёт зарплаты....)
    • Использование cookies
    • Использование готовых библиотек (слайдер, галереи...)




In order to successfully complete this session, you'll need to create a small web site.
You can choose anything as your subject.
You have to upload your project on our school server.
Your web site must contain following files:
index.html
style.css
code.js
as well as several .html pages of your choice (about, contacts ...).

Requirements



  • HTML
    • Your project must follow HTML5 standarts
    • Must contain DOCTYPE
    • Must be validated without errors
    • Use tables only to display appropriate for tables data
    • ID and CLASS must be used correctly
    • Must contain following elements:
      • Different level headlines
      • A list
      • Text decoration tags
      • Images
      • A form
  • CSS
    • All styles must be in a separate file
    • Must be validated without errors
    • Styles file must contain at least 10 selectors
    • Form fields with incorrect data must be visually noticeable (after checking with JS)
  • JS
    • Required form fields must be checked for appropriate data
    • Form fields that can only contain specific input values must be checked for appropriate data (check if data is numeric in numeric-only field)
    • Range of values must be checked (for example, if income is greater than 0)
    • Hiding or displaying DOM elements (read more, remove elements on click)
    • Function with mathematic formula (money transfer, income generation...)
    • Cookies must be used
    • Pre-made libraries must be used (slider, galleries...)

Зачётные задания
Сроки на выполнение каждого ДЗ - 4 дня, т.е. присылать их на проверку до 24:00 воскресения.

Mājas darbu izpildes laiks - 4 dienas, t.i. sūtīt uz parbaudi līdz svētdienas 24:00.

Урок 2.
ДЗ 2.1
Урок 3.
ДЗ 3.1
Урок 4.
ДЗ 4.1
Урок 5.
ДЗ 5.1
ДЗ 5.2
Урок 6.
ДЗ 6.1
Урок 7.
ДЗ 7.1
ДЗ 7.2 (отметить на макете каким блокам можно прмиенить атрибут id, а каким - class; atzīmēt attēlā kadiem blokiem var pielietot atribūtu id, kuriem - class)
Урок 10.
ДЗ 10.1
Урок 11.
ДЗ 11.1 сделать макет для вёрстки, сохранить в формате .PSD uztaisīt maketu griešanai, saglabat .PSD formatā
Урок 14.
ДЗ14.1 сверстать макет из ДЗ11.1, uztaisit lapu izmantojot maketu no MD11.1
Дополнительные задания
Макет
Сроки на выполнение каждого ДЗ - 4 дня, т.е. присылать их на проверку до 24:00 воскресения.

Урок 2.
ДЗ 2.1
Урок 3.
ДЗ 3.1
Урок 8.
ДЗ 8.1