JavaScript Базовый. Занятие 01.

Темы лекции: Основы разработки веб-приложений.
Тренер: Игорь Шкулипа, к.т.н.
JavaScript. Базовый курс
Занятие 1

http://www.slideshare.net/IgorShkulipa 2
Концепция разработки web-приложений
Web-приложение – это прикладное программное обеспечение, логика
которого распределена между сервером и клиентом, а обмен
информацией происходит по сети. Клиентская часть реализует
пользовательский интерфейс, а серверная – получает и обрабатывает
запросы от клиента, выполняет вычисления, формирует веб-страницу
и отправляет её клиенту согласно протоколу HTTP.
Данный вид приложений имеет ряд особенностей:
• выполняются независимо от операционной системы клиента.
При этом на него налагается требование кроссбраузерности,
вытекающее из различной реализации браузерами стандартов
HTML, CSS и DOM.
• представляют собой распределенную информационную
систему и должны выдерживать максимальное число клиентских
обращений.
• в процессе разработки открыты для тестирования с удаленных
компьютеров, что оптимально для применения гибкой методологии
разработки.

Трехуровневая архитектура
Многоуровневая архитектура клиент-сервер (Multitier architecture) –
разновидность архитектуры клиент-сервер, в которой функция
обработки данных вынесена на один или несколько отдельных
серверов. Это позволяет разделить функции хранения, обработки и
представления данных для более эффективного использования
возможностей серверов и клиентов.
Среди многоуровневой архитектуры клиент-сервер наиболее
распространена трехуровневая архитектура:
• клиентское приложение (тонкий клиент)
• сервер приложений
• сервер базы данных

Трехуровневая архитектура. Клиент
Клиент – это интерфейсный компонент, который представляет первый
уровень, собственно приложение для конечного пользователя.
Первый уровень не должен:
• иметь прямых связей с базой данных (по требованиям
безопасности)
• быть нагруженным основной бизнес-логикой (по требованиям
масштабируемости)
• хранить состояние приложения (по требованиям надежности)
На первый уровень может быть вынесена и обычно выносится простейшая
бизнес-логика: интерфейс авторизации, алгоритмы шифрования,
проверка вводимых значений на допустимость и соответствие
формату, несложные операции (сортировка, группировка, подсчет
значений) с данными, уже загруженными на клиент.

Трехуровневая архитектура. Сервер
Сервер приложений располагается на втором уровне. На втором уровне
сосредоточена большая часть бизнес-логики. Вне его остаются
фрагменты, экспортируемые на клиенты, а также погруженные в
третий уровень хранимые процедуры и триггеры.
Сервер базы данных обеспечивает хранение данных и выносится на
третий уровень. Обычно это стандартная реляционная или объектно-
ориентированная СУБД. Если третий уровень представляет собой базу
данных вместе с хранимыми процедурами, триггерами и схемой,
описывающей приложение в терминах реляционной модели, то второй
уровень строится как программный интерфейс, связывающий
клиентские компоненты с прикладной логикой базы данных.
В простейшей конфигурации физически сервер приложений может быть
совмещен с сервером базы данных на одном компьютере, к которому
по сети подключается один или несколько клиентов.
В "правильной" (с точки зрения безопасности, надежности,
масштабирования) конфигурации сервер базы данных находится на
выделенном компьютере (или кластере), к которому по сети
подключены один или несколько серверов приложений, к которым, в
свою очередь, по сети подключаются терминалы.

Общая схема работы веб-сервера

Протокол HTTP
HTTP (HyperText Transfer Protocol, протокол передачи гипертекста) – это
протокол прикладного уровня, разработанный для обмена
гипертекстовой информацией в Internet.
HTTP предоставляет набор методов для указания целей запроса,
отправляемого серверу. Эти методы основаны на дисциплине ссылок,
где для указания ресурса, к которому должен быть применен данный
метод, используется универсальный идентификатор ресурсов
(Universal Resource Identifier, URI) в виде местонахождения ресурса
(Universal Resource Locator, URL) или в виде его универсального
имени (Universal Resource Name, URN).

Протокол HTTP
HTTP используется для коммуникаций между различными пользовательскими
программами и программами-шлюзами, предоставляющими доступ к
существующим Internet-протоколам.
Сообщения по сети при использовании протокола HTTP передаются в формате,
схожем с форматом почтового сообщения Internet (RFC-822) или с
форматом сообщений MIME (Multiperposal Internet Mail Exchange).
Протокол реализует принцип запрос/ответ. Клиент инициирует взаимодействие
сервером и посылает запрос, содержащий:
• метод доступа;
• адрес URI;
• версию протокола;
• сообщение с информацией о типе передаваемых данных, информацией
о клиенте, пославшем запрос, и, возможно, с телом сообщения.
Ответ сервера содержит:
• строку состояния, в которую входит версия протокола и код возврата
(успех или ошибка);
• сообщение, в которое входит информация сервера, метаинформация
(т.е. информация о содержании сообщения) и тело сообщения.

Форма запроса
Клиент отсылает серверу запрос в одной из двух форм: в полной или
сокращенной. Запрос в первой форме называется соответственно
полным запросом, а во второй форме – простым запросом.
В качестве метода могут быть указаны GET, POST, HEAD, PUT, DELETE и
другие.
В качестве запрашиваемого URI чаще всего используется URL-адрес
ресурса.
Пример простого запроса:
GET http://somewebsite.com/
Здесь GET – это метод доступа, т.е. метод, который должен быть
применен к запрашиваемому ресурсу, а http://somewebsite.com/ – это
URL-адрес запрашиваемого ресурса.
Полный запрос содержит строку состояния, несколько заголовков
(заголовок запроса, общий заголовок или заголовок содержания) и,
возможно, тело запроса.

Методы
Любой запрос клиента к серверу должен начинаться с указания метода.
Метод сообщает о цели запроса клиента. Протокол HTTP
поддерживает достаточно много методов, но реально используются
только три: POST, GET и HEAD.
Метод GET позволяет получить любые данные, идентифицированные с
помощью URI в запросе ресурса. Если URI указывает на программу, то
возвращается результат работы программы, а не ее текст (если,
конечно, текст не есть результат ее работы). Дополнительная
информация, необходимая для обработки запроса, встраивается в сам
запрос (в строку статуса).
При использовании метода GET в поле тела ресурса возвращается
собственно затребованная информация (текст HTML-документа,
например).
Существует разновидность метода GET – условный GET. Этот метод
сообщает серверу о том, что на запрос нужно ответить, только если
выполнено условие, содержащееся в поле if-Modified-Since заголовка
запроса. Если говорить более точно, то тело ресурса передается в
ответ на запрос, если этот ресурс изменялся после даты, указанной в
if-Modified-Since.

Методы HEAD и POST
Метод HEAD аналогичен методу GET, только не возвращает тело ресурса
и не имеет условного аналога. Метод HEAD используют для получения
информации о ресурсе. Это может пригодиться, например, при
решении задачи тестирования гипертекстовых ссылок.
Метод POST разработан для передачи на сервер такой информации, как
аннотации ресурсов, новостные и почтовые сообщения, данные для
добавления в базу данных, т.е. для передачи информации большого
объема и достаточно важной. В отличие от методов GET и HEAD, в
POST передается тело ресурса, которое и является информацией,
получаемой из полей форм или других источников ввода.

Другие методы HTTP-запросов
Метод Описание
PUT Сохранить веб-страницу
DELETE Удалить веб-страницу
TRACE Отослать назад запрос
CONNECT Рассчитан на работу с HTTPS протоколом
OPTIONS Отобразить параметры

HTTP статусы
• 1xx Informational («Информационный»). В этот класс выделены коды,
информирующие о процессе передачи. В HTTP/1.0 сообщения с такими кодами
должны игнорироваться. В HTTP/1.1 клиент должен быть готов принять этот
класс сообщений как обычный ответ, но ничего отправлять серверу не нужно.
Сами сообщения от сервера содержат только стартовую строку ответа и, если
требуется, несколько специфичных для ответа полей заголовка. Прокси-серверы
подобные сообщения должны отправлять дальше от сервера к клиенту.
• 2xx Success («Успех»). Сообщения данного класса информируют о случаях
успешного принятия и обработки запроса клиента. В зависимости от статуса
сервер может ещё передать заголовки и тело сообщения.
• 3xx Redirection («Перенаправление»). Коды класса 3xx сообщают клиенту что
для успешного выполнения операции необходимо сделать другой запрос (как
правило по другому URI). Из данного класса пять кодов 301, 302, 303, 305 и 307
относятся непосредственно к перенаправлениям (редирект). Адрес, по которому
клиенту следует произвести запрос, сервер указывает в заголовке Location. При
этом допускается использование фрагментов в целевом URI.

HTTP статусы
• 4xx Client Error («Ошибка клиента»). Класс кодов 4xx предназначен для
указания ошибок со стороны клиента. При использовании всех методов, кроме
HEAD, сервер должен вернуть в теле сообщения гипертекстовое пояснение для
пользователя.
• 5xx Server Error («Ошибка сервера»). Коды 5xx выделены под случаи
неудачного выполнения операции по вине сервера. Для всех ситуаций, кроме
использования метода HEAD, сервер должен включать в тело сообщения
объяснение, которое клиент отобразит пользователю.

Кэширование
Суть кэширования, заключается в хранении HTML-страниц, изображений и прочих
файлов в промежуточном буфере (кэше) с целью ускорения повторного доступа
к ним и экономии трафика. Кэшем обладают как браузер пользователя, так и
промежуточные прокси-серверы и шлюзы, через которые происходит общение
клиента с сервером-источником.
Прежде чем отправить запрос по какому-либо URL, браузер проверяет наличие
требуемого объекта в собственном кэше, и если таковой имеется, используется
он. В противном случае запрос отправляется до следующего сервера, где так же
проверяется кэш. Если ни на одном из промежуточных серверов соответствия
запросу не найдено, то в конце концов он достигает сервера-источника и отклик
приходит оттуда. Стоит заметить, что прокси и шлюзы используются множеством
пользователей, и потому их кэш называется публичным, или разделяемым.

Поколения WEB
WEB 0.1 - это эпоха, когда веб только зарождался. В этот период интернетом
пользовались только корпорации высоких технологий, научно-
исследовательские институты и им подобные. Собственно изначально для них
эта сеть и предназначалась. Интернет в то время имел вид некой
совокупности документов, связанных между собой гиперссылками, по сути не
более чем огромная компьютерная сеть.
WEB 1.0 сформировалось в 90-е годы во многом хаотично и имело главный
качественный скачок – переход от простого размещения документов виде
файлов к созданию сайтов на основе программного обеспечения (движка и
шаблонов показа) и баз данных. В этом поколении содержание интернет-
ресурсов формирует сравнительно небольшая группа профессионалов.
Понятие Web 1.0 можно рассматривать как "Интернет только для чтения".
Web 2.0 сайты – это интерактивные многопользовательские системы, контент
которых наполняется самими участниками сети. Это сообщества
пользователей Интернета, имеющих доступ к сети в зависимости от интересов
или географической привязки. Это социальная структура, состоящая из групп
узлов, в которой используется народная классификация и практика
совместной категоризации информации. При этом в создание контента
(содержания сети) активно включаются пользователи сети. Были развиты
различные пользовательские интерфейсы, которые позволяли пользователям
уже управлять содержимым сети Интернет и связаться друг с другом.

Принципы WEB 2.0
1. Разделение содержимого,
представления и поведения Web-
страницы. Здесь содержимое — это
информация, которая выводится на Web-
странице, представление описывает формат
вывода этой информации, а поведение —
реакцию Web-страницы или отдельных ее
элементов на действия посетителя.
2. Подгружаемое содержимое. Вместо того
чтобы обновлять всю Web-страницу в ответ на
щелчок на гиперссылке, мы можем подгружать
только ее часть, содержащую необходимую
информацию.
3. Генерируемое содержимое. Какая-то
часть Web-страницы может не загружаться по
сети, а генерироваться прямо на месте, в Web-
обозревателе.
4. Семантическая разметка данных. Она
позволяет связать выводимые на Web-страницу
данные согласно каким-либо правилам.

Базовые веб-технологии
• HTML (HyperText Markup Language) - стандартный язык разметки документов в
Internet. Большинство веб-страниц создаются при помощи языка HTML. Язык HTML
интерпретируется браузерами и отображается в виде документа в удобной для
человека форме.
• DHTML (Dynamic HTML) – это способ создания интерактивного веб-сайта,
использующий сочетание статичного языка разметки HTML, встраиваемого (и
выполняемого на стороне клиента) скриптового языка JavaScript
• XHTML (Extensible Hypertext Markup Language) — расширяемый язык разметки
гипертекста
• CSS (Cascading Style Sheets) — каскадные таблицы стилей — формальный язык
описания внешнего вида документа, написанного с использованием языка разметки.
• JavaScript - прототипно-ориентированный сценарный язык программирования.
Обычно используется как встраиваемый язык для программного доступа к объектам
приложений
• Ajax (Asynchronous Javascript and XML) - подход к построению интерактивных
пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене
данными браузера с веб-сервером
• PHP (Hypertext Preprocessor) - скриптовый язык программирования общего
назначения, применяемый для разработки веб-приложений
• ASP (Active Server Pages) - первая технология компании Microsoft, позволяющая
динамически создавать веб-страницы на стороне сервера. ASP работает на
операционных системах линейки Windows NT и на веб-сервере Microsoft IIS.
• ASP.NET - технология создания веб-приложений и веб-сервисов от компании
Майкрософт. Она является составной частью платформы Microsoft .NET и развитием
более старой технологии Microsoft ASP

HTML
HTML – это язык разметки гипертекста, что означает использование кода,
который может быть прочитан человеком и не нуждается в компиляции. По
сути, веб-страницы размечены таким кодом для того, чтобы «объяснить»
браузеру, как отображать содержимое.
Когда Вы используете HTML, то пишете с помощью HTML-тегов, которые
состоят из:
• знака «меньше» <;
• буквы или слова;
• далее может идти любое количество HTML-атрибутов в виде пары
«имя=значение»;
• и в конце идет знак «больше» >.
Закрывающий тег отличается от открывающего наличием косой черты "/".
Обычно понятия «элемент HTML» и «HTML тег» взаимозаменяемы. Но в
соответствии со спецификацией W3C элемент – это тег со всем его
содержимым, включая открывающий и закрывающий теги. У некоторых
элементов нет закрывающего тега, такие элементы называются одиночными
или пустыми, но несмотря на то, что они не могут содержать в себе
никакого контента, они все равно считаются полноценными элементами.

Общий вид HTML-файла
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HEAD>
</HEAD>
<BODY>
Hello, World!!!
</BODY>
</HTML>
Первый тег <!DOCTYPE> - это идентификатор применяемого
стандарта HTML.
В данном примере использована версия HTML 4.01. Она имеет
три стандарта синтаксиса: строгий, переходный и с
применением фреймов.
В приведенном примере задано соответствие строгому
синтаксису стандарта 4.01, принятому организацией W3C
(атрибут "-//W3C//DTD HTML 4.01//EN").
Инструкции по данному стандарту находятся на
"http://www.w3.org/TR/html4/strict.dtd".

<!DOCTYPE>. Стандарты HTML.
DOCTYPE Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
В HTML-документе применяются
фреймы.
HTML 5
<!DOCTYPE html> Для всех документов.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Документ написан на XHTML и
содержит фреймы.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
XHTML мобильного профиля,
добавляет специфические
элементы для мобильных
телефонов.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Синтаксис один и подчиняется
четким правилам.

Стандарты HTML и XHTML
Требования XHTML Нельзя Можно
Все теги должны быть закрыты. <br> <br />
Все теги, атрибуты и CSS-
свойства должны быть набраны
в нижнем регистре.
<IMG SRC="" ALT="" /> <img src="" alt="" />
Все значения атрибутов тегов
должны быть заключены в
кавычки.
<a href=http://facebook.com> <a href="http://facebook.com">
Должна строго выполняться
иерархия: первый тег
закрывается последним.
<em><u>...</em></u> <em><u>...</u></em>
Блочный тег не может быть
вложен в строчный. (После
блочного элемента дальнейший
вывод на странице
осуществляется с новой строки.
Строчный элемент перевода
строки не делает.)
<span><div>...</div></span> <div><span>...</span></div>
Булевы атрибуты записываются
в развёрнутой форме.
<option selected> <option selected="selected">
У изображений обязательно
должно быть указано описание
<img src=«im.gif" /> <img src=“im.gif" alt=«Рисунок" />

Строгий и переходный синтаксис
Переходные синтаксисы существуют для того, чтобы облегчить
переход на новый стандарт. Они пропустят многое из того, что строгий
синтаксис посчитает ошибками.
Соответствие HTML-кода объявленному стандарту называют
валидностью, а проверку на это соответствие - валидацией.
Маленькие недочеты верстки браузеры часто исправляют автоматически,
и сайт работает абсолютно нормально. Но эти мелкие, практические
незаметные ошибки тем не менее замечают поисковые системы. Даже
один отсутствующий тег </p> - это минус на оценке качества сайта.
Именно из-за способности поисковых систем замечать любые недочеты
HТML-кода и рекомендуется соблюдать валидность верстки.
Кроме того, проверяя код на валидность, можно обнаружить наряду с
мелкими недочетами еще и серьезные ошибки, которые были не
замечены ранее.

Фреймы
Фреймы – это прямоугольные области экрана, каждая из которых
содержит свой собственный HTML-документ. Фреймы прекрасно
подходят для оформления следующих документов:
• Оглавление. Если вы поместите на Web-страницу оглавление в
виде вертикального столбца, то пользователь сможет обратиться к
нему в любой момент, и ему не нужно будет постоянно щелкать на
кнопке возврата к предыдущей странице. Поскольку, находясь во
фрейме, оглавление всегда будет под рукой, пользователю нужно
будет просто выбрать другой его пункт и сразу же получить
нужную информацию.
• Неподвижные элементы интерфейса. Можно зафиксировать
на экране какое-то графическое изображение, например, логотип
фирмы, в то время как остальная часть страницы будет
прокручиваться в другом фрейме.
• Формы и результаты. Можно создать форму в одном фрейме, а в
другом отобразить результаты запроса.

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

Теги HTML
Ссылка на полный справочник по тегам HTML с описанием и атрибутами.

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

Необязательные теги
Если какой-то тег не указан, это не означает, что он не представлен
вообще. Существуют определённые правила, позволяющие не писать
некоторые теги.
Тег Условие
<html>
</html>
<head> Если внутри имеются другие элементы.
</head>
<body> Если пустой, а также содержит что-то кроме пробела или
комментария.
</body>
</li> Если после элемента следует <li> или он последний у родителя.
</dt> Если после элемента следует <dt> или <dd>.
</dd> Если после элемента следует <dd>, <dt> или он последний у
родителя.
</p>
Если после элемента следует <address>, <article>, <aside>,
<blockquote>, <dir>, <div>, <dl>, <fieldset>, <footer>, <form>,
<h1>,...,<h6>, <header>, <hgroup>, <hr>, <menu>, <nav>,
<ol>, <p>, <pre>, <section>, <table>, <ul>.

Необязательные теги
</rt> Если после элемента следует <rt> или <rp>.
</rp> Если после элемента следует <rt> или <rp>.
</optgroup> Если после элемента следует <optgroup> или он последний у
родителя.
</option> Если после элемента следует <option>, <optgroup> или он
последний у родителя.
<colgroup> Если первым внутри идёт <col> и не следует перед другим
элементом <colgroup>.
</colgroup>
</thead> Если после элемента следует <tbody> или <tfoot>.
<tbody> Если первым внутри идёт <tr> и не следует перед <tbody>,
<thead> или <tfoot> у которых опущен закрывающий тег.
</tbody> Если после элемента следует <tbody> или <tfoot> или он
последний у родителя.
</tfoot> Если после элемента следует <tbody> или он последний у
родителя.
</tr> Если после элемента следует <tr> или он последний у родителя.
</td> Если после элемента следует <td> или <th> или он последний у
родителя.
</th> Если после элемента следует <td> или <th> или он последний у
родителя.

Атрибуты тегов
Любые атрибуты не чувствительны к регистру и пишутся внутри
открывающего тега и содержат имя и значение. В именах нельзя
использовать пробелы, кавычки ("), апострофы (‘), знак больше (>),
слэш (/) и равно (=), а также любые символы не определенные в
Юникоде.
Различают четыре разных способа написания атрибутов и их значений.
1. Пустой атрибут (логический, булев).
Этот атрибут не имеет значения, поведение тега определяет наличие
этого атрибута.
<input required>
Вместо пустого атрибута допускается писать значение, совпадающее с
названием атрибута.
<input required=required>
Однако такая форма не обязательна и может применяться только по
желанию.

Атрибуты тегов
2. Значения без кавычек
Значение пишется непосредственно после знака равно идущим вслед за именем
атрибута. До и после знака равно можно вставлять любое количество пробелов
или обойтись без них.
<img src=link.html>
3. Использование двойных кавычек
Значение берётся в двойные кавычки, обычно такая форма указывается для текста.
<input type="checkbox">
4. Использование одинарных кавычек
Вместо двойных кавычек также допустимо использовать одинарные.
<input type='checkbox'>
Значения атрибутов разделяются между собой пробелом, поэтому если у вас в
качестве значения указывается предложение, обязательно берите его в
одинарные или двойные кавычки.

Глобальные атрибуты HTML5
Глобальные атрибуты поддерживаются всеми HTML элементами (за исключением
нескольких тегов). Глобальные атрибуты позволяют задать дополнительные
параметры для тегов.
Атрибут Значение Описание
accesskey символ Определяет сочетание клавиш для доступа к
элементу.
class имя_класса
Определяет имя класса, указанного в таблице
стилей (позволяет связать тег с определенным
стилем).
contenteditable
true
false
inherit
Указывает, может ли пользователь
редактировать содержимое данного элемента
или нет.
contextmenu menu_id
Определяет контекстное меню для элемента.
Значение должно быть идентификатором для
элемента <menu>.
dir
ltr
rtl
auto
Определяет направление текста в элементе
(слева направо или справа налево).
draggable
true
false
auto
Определяет, может ли пользователь перемещать
элемент или нет.

Глобальные атрибуты HTML5
dropzone
copy
move
link
Определяет, что происходит при перетаскивании
элемента.
hidden hidden Указывает, что данный элемент должен быть
скрытым от просмотра.
id id Определяет уникальный идентификатор для
элемента.
lang код_языка
Определяет язык содержимого в элементе
(используется для правильного отображения
некоторых национальных символов).
spellcheck
true
false
Указывает браузеру проверять или нет данный
элемент на правописание и грамматику в тексте.
style свойства Задает встроенный стиль для элемента.
tabindex число Указывает порядок перехода между элементами
(при использовании клавиши "tab").
title текст
Указывает дополнительную информацию об
элементе (отображается браузерами в виде
всплывающей подсказки).

Специальные символы
Ссылка на таблицу спецсимволов HTML

Цвета
В HTML цвета элементов задаются в виде текстового кода цвета в
формате RGB либо в виде названия цвета.
Ссылка на таблицу цветов HTML

HTML пример
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Форма регистрации на сайте</title>
</head>
<BODY>
<H1>Форма регистрации на сайте</h1>
<FORM ACTION="" method="post">
<table border="1" cellpadding="5" cellspacing="0" width="40%">
<tr>
<td width="50%" align="right">Ваше имя: </td>
<td width="50%"> <INPUT NAME="name1" SIZE="10" MAXLENGTH="12">
</td>
</tr>
<tr>
<td width="50%" align="right">Ник: </td>
<td width="50%"> <INPUT NAME="nick" SIZE="10" MAXLENGTH="12">
</td>
</tr>
<tr>

HTML пример
<td width="50%" align="right">Пароль: </td>
<td width="50%"> <INPUT TYPE="password" NAME="psw" SIZE="10" MAXLENGTH="12">
</td>
</tr>
<tr>
<td width="50%" align="right">Повтор пароля: </td>
<td width="50%"> <INPUT TYPE="password" NAME="repsw" SIZE="10" MAXLENGTH="12">
</td>
</tr>
<tr>
<td width="50%" align="right">Ваш e-mail :</td>
<td width="50%"> <INPUT TYPE="password" NAME="email" SIZE="10" MAXLENGTH="12">
</td>
</tr>
<tr>
<td width="50%" align="right">Фотография: </td>
<td width="50%"> <INPUT TYPE="file" NAME="foto" SIZE="10" MAXLENGTH="12">
</td>
</tr>
<tr>
<td width="100%" align="left" colspan="2">Ваши интересы:</td>
</tr>
<tr>

HTML пример
<td width="50%" align="left">
<INPUT TYPE="checkbox" NAME="books" value="yes">Книги<br>
<INPUT TYPE="checkbox" NAME="music" value="yes">Мызыка<br>
<INPUT TYPE="checkbox" NAME="cinema" value="yes">Кино<br>
</td>
<INPUT TYPE="checkbox" NAME=“cars" value="yes">Автомобили<br>
<INPUT TYPE="checkbox" NAME=“fishing" value="yes">Рыбалка<br>
<INPUT TYPE="checkbox" NAME=“sport" value="yes">Спорт<br>
</td>
</tr>
<tr>
Ваш пол:
</td>
<INPUT TYPE="radio" NAME="income" value="male">муж
<INPUT TYPE="radio" NAME="income" value="female">жен
</td>
</tr>
</table>

HTML пример
<p>
<TEXTAREA name="comments" COLS=40 ROWS=4>
Несколько слов о себе.
</TEXTAREA>
<p>
<INPUT TYPE="submit" value="Отправить данные">
<INPUT TYPE="reset" value="Сброс данных">
</FORM>
</body>
</html>

HTML пример

DHTML
DHTML (динамический HTML) – это набор средств, которые позволяют
создавать более интерактивные Web-страницы без увеличения
загрузки сервера. Другими словами, определенные действия
посетителя ведут к изменениям внешнего вида и содержания страницы
без обращения к серверу.
DHTML построен на объектной модели документа (Document Object Model,
DOM), которая расширяет традиционный статический HTML-документ.
DOM обеспечивает динамический доступ к содержимому документа,
его структуре и стилям. В DOM каждый элемент Web-страницы
является объектом, который можно изменять. DOM не определяет
новых тэгов и атрибутов, а просто обеспечивает возможность
программного управления всеми тэгами, атрибутами и каскадными
листами стилей (CSS).

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

События мыши
• OnMouseOver. Перемещение указателя мыши на элемент.
• OnMouseOut. Перемещение указателя мыши за пределы элемента.
• OnMouseDown. Нажатие любой кнопки мыши. Внутри обработчика event.button
указывает, какая кнопка нажата: 1 = левая, 2 = правая, 4 = средняя.
• OnMouseUp. Отпускание любой кнопки мыши.
• OnMouseMove. Перемещение указателя мыши. Внутри обработчика event.x и
event.y - текущие координаты курсора на экране.
• OnClick. Щелчок левой кнопкой мыши на элементе или нажатие <Enter> при
каком-то элементе в фокусе.
• OnDblClick. Двойной щелчок левой кнопкой мыши на элементе.
• OnDragStart. Запуск операции перетаскивания. Цель – запретить операцию
перетаскивания путем возвращения значения false.
• OnSelectStart. Запуск операции выделения элемента. Цель – запретить
выделение области документа. Важно учесть, что отменяется лишь
инициализация выделения, т.е. если выделение начато за пределами данной
области, а на ней лишь продолжается, то помешать выделению нельзя. Событие
• OnSelectStart всплывающее, поэтому можно перехватить его и вернуть
значение false. Это лишит посетителя возможности выделять текст на странице.
• OnSelect. Выделение элемента. Следует за OnSelectStart и возникает много
раз по мере того, как посетитель расширяет или сужает выделение. Событие
OnSelect не всплывает. Оно возникает лишь в том разделе документа, где
происходит выделение.

События клавиатуры
• OnKeyPress. Нажатие и отпускание клавиши. Событие возникает
много раз, если клавиша удерживается.
• OnKeyDown. Нажатие клавиши. Событие возникает один раз, даже
если клавиша продолжает удерживаться.
• OnKeyUp. Отпускание клавиши.
Событие прокручивания
• OnScroll. Использование полосы прокрутки или прокручивание
элемента неявно посредством другого действия Не может отменить
прокручивания, так как возникает после завершения прокручивания.
Не всплывает.
События фокуса
• OnFocus. Возникает, когда элемент активизируется после щелчка по
нему мышью или с помощью клавиатуры. Фокус могут получить только
элементы пользовательского ввода и тело документа, а не элементы
содержания документа.
• OnBlur. Возникает, когда элемент теряет фокус. Используется для
контроля корректности ввода.

События формы
• OnChange. Возникает при любых изменениях в форме. Для текстового поля это
ввод или удаление. Для списка – выбор нового элемента. Так же, как и OnBlur
используется для контроля корректности ввода.
• OnSubmit. Возникает перед отправкой содержимого формы на сервер. Основное
назначение – проверка корректности введенных данных. Отмена передачи
данных происходит при возвращении значения false.
• OnReset. Возникает после щелчка на кнопке Reset. Назначение – вывод
предупреждения о сбросе.
События документа
• OnLoad. Возникает после считывания, но до отображения страницы.
Используется для отображения заставки, проверки права доступа и других
однократных действий при инициализации страницы.
• OnUnload. Возникает при выгрузке страницы. Используется для освобождения
каких-либо ресурсов и вывода дополнительных сообщений.
• OnAbort. Возникает при срыве загрузки графического объекта.
• OnError. Возникает лишь при неудачной загрузке графического элемента или
всей WEB-страницы.
Событие помощи
• OnHelp. Запрос файла справки с использованием клавиши <F1>. Не возникает
при выборе пункта Help из меню Help.

Связывание событий
Установление связи между определенным событием и сценарием
называется связыванием событий. События можно связать с помощью
специальных атрибутов любого элемента или с помощью тэга
SCRIPT.
Связывание событий с атрибутами удобно, но требует расширения языка
HTML каждый раз при изобретении нового события. А так как HTML
развивается медленно, данный подход используется только для
небольшого набора встроенных событий. Как атрибуты любого
элемента в DHTML представлены события мыши и клавиатуры.

Пример DHTML
<td width="50%" align="right">Ваше имя: </td>
<td width="50%">
<INPUT NAME="name1" SIZE="10" MAXLENGTH="120"
onMouseOver="this.size=50" onMouseOut="this.size=10" >
</td>
</tr>
<tr>
<td width="50%" align="right" >Ник: </td>
<td width="50%">
<INPUT NAME="nick" SIZE="10" MAXLENGTH="120"
onMouseOver="this.size=50" onMouseOut="this.size=10">
</td>
</tr>
<tr>
<td width="50%" align="right">Пароль: </td>
<td width="50%">
<INPUT TYPE="password" NAME="psw" SIZE="10" MAXLENGTH="120"
onMouseOver="this.size=50" onMouseOut="this.size=10">
</td>

Пример DHTML

Использование SCRIPT
Использование тэга SCRIPT является более общим механизмом
связывания события со сценарием. При этом можно использовать
новые атрибуты такие, как FOR и EVENT:
• FOR указывает имя или идентификатор (ID) элемента, для
которого описывается событие;
• EVENT указывает событие и все параметры, которые ему могут
быть переданы.
<script language="javascript" for="name1" event="onMouseOver()">
this.size="50";
</script>
<script language="javascript" for="name1" event="onMouseOut()" >
this.size="10";
</script>

Объект event
Объект event служит для получения информации о событии. Свойства объекта
event:
• srcElement. Элемент, который первым сгенерировал событие. Имя тэга
этого элемента можно определить с помощью свойства tagName.
• cancelBubble. Используется для прекращения всплывания события вверх
по иерархии контейнеров. По умолчанию равно false и событие всплывает.
Установка значения true останавливает всплывание текущего события.
• returnValue. Используется для отмены действия по умолчанию. Для этого
нужно установить значение false. Ключевое слово return в JavaScript
обновляет значение event.returnValue при возвращении управления
браузеру.
• type. Определение события. Имя события возвращается в нижнем регистре
без префикса on.
• button. Состояния кнопок мыши во время события.
• clientX, clientY. Координаты указателя мыши относительно клиентской
области окна.
• offsetX, offsetY. Координаты указателя мыши относительно контекста
воспроизведения.
• screenX, screenY. Координаты указателя мыши относительно экрана.
• altKey. Состояние клавиши «Alt»(true/false).
• ctrlKey. Состояние клавиши «Ctrl»(true/false).
• shiftKey. Состояние клавиши «Shift» (true/false).
• keyCode. ASCII-код нажатой клавиши.

Состояния кнопок мыши во время события
Свойство event.button принимает следующие значения:
0 Кнопки не нажаты
1 Нажатие левой кнопки
2 Нажатие правой кнопки
3 Нажатие левой и правой кнопок
4 Нажатие средней кнопки

CSS
CSS расшифровывается Cascading Style Sheets (Каскадные Таблицы Стилей).
С помощью CSS можно оформлять HTML документы.
CSS были представлено вместе с HTML 4.0 и создавались для разрешения проблем с
оформлением, возникающих в предыдущих версиях HTML.
Таблицы стилей состоят из набора правил(1). Каждое правило состоит из одного или
нескольких селекторов(3) и блока определения(2) выделяющегося фигурными
скобками.
Блок определения может содержать одно или несколько свойств(4) отделенных
точкой с запятой (;) (после последнего свойства точка с запятой необязательна).
Каждое свойство должно иметь значение(5) отделенное двоеточием (:).

Селекторы
С помощью селекторов выбираются элементы на странице, которые
необходимо оформить.
В CSS существуют следующие виды селекторов:
• Селекторы тэгов. Можно выбирать элементы на странице для
оформления по названию тэга.
Пример.
p {
color:green;
}
h2 {
color:red;
}
• Селектор id. Используется, когда необходимо выбрать только
один определенный элемент на странице, с предварительно
заданным идентификатором. Для того, чтобы оформить элемент
необходимо обратиться к идентификатору в таблицах стилей
добавив перед ним символ “#”
Пример.
#test1 {
color:green;
font-family:verdana;
font-size:1.2em;
}

Селекторы
• Селектор class. Данный вид селекторов позволяет выбирать для
оформления не единственный элемент, а группу элементов. С
помощью атрибута class можно задать, что элемент относится к
группе. Для того, чтобы затем оформить эту группу необходимо в
таблицах стилей обратиться к имени группы добавив перед ней
символ ".".
Пример.
.test1 {
color:green;
font-size:1.2em;
}
• Селекторы атрибутов. Элементы на странице могут быть
выбраны по их атрибутам.
Пример. Оформление всех элементов с атрибутом “src”.
[src]
{
border:solid green 3px;
}

Комбинирование селекторов
Для более точного выбора элементов в CSS может использоваться
комбинирование селекторов.
• Следующее оформление будет применено только к тем элементам
с class="test1", которые являются заголовками.
h2.test1
{
color:green;
}
• Следующее оформление будет применено только к тем элементам
p, которые находятся внутри элементов div
div p
{
color:green;
}
• Символ "+" позволяет выбирать элементы, которые идут сразу
после указанного.
div+p
{
color:green;
}

Группировка селекторов
56
Часто при оформлении HTML документов с помощью CSS приходится
применять одинаковые свойства для разных селекторов.
Для того, чтобы сократить размер кода, можно группировать селекторы с
одинаковыми свойствами разделяя их запятой.
h1,h2,p
{
color:green;
}

Пример CSS
<html>
<head>
<style type='text/css'>
/* Правила оформления должны располагаться здесь */
</style>
</head>
<body>
<h3>Покрасьте меня в розовый цвет (color:pink).</h3>
<p>Данный элемент должен остаться неоформленным.</p>
<p id='greycol'>Покрасьте меня в серый цвет (color:grey).</p>
<div>Данный элемент должен остаться неоформленным.</div>
<div><p>Покрасьте меня в красный цвет (color:red).</p></div>
<h4>Данный элемент должен остаться неоформленным.</h4>
<p>Покрасьте меня в зеленый цвет (color:green).</p>
<p class='yellowcol'>Покрасьте меня в желтый цвет (color:yellow).</p>
</body>
</html>

Пример CSS
h3{
color:pink;
}
#greycol{
color:grey;
}
div p{
color:red;
}
h4{
font-weight:normal;
}
h4+p{
color:green;
}
.yellowcol{
color:yellow;
}

Псевдо-классы CSS
• :first-child позволяет выбрать элемент, который является первым потомком в
его родительском элементе. Пример. Будет оформлен только первый абзац.
p:first-child {
color:red;
}
• :first-letter позволяет оформить первую букву указанного элемента.
p:first-letter {
color:red;
}
• :focus позволяет выбрать активные input элементы формы.
:focus {
background-color:yellow;
}
• :first-line позволяет оформить первую строчку указанного элемента.
p:first-line {
color:red;
}
• С помощью псевдо-классов :before и :after можно вставлять произвольное
содержимое до и после указанных элементов.
p:before {
content:"CSS";
font-weight:bold;
}
p:after {
content:"/CSS";
}

Справочники по CSS3
Справочник по CSS3
Учебник по CSS3

Основы верстки веб-страниц
Вёрстка веб-страниц — процесс формирования веб-страниц,
следующий за этапом веб-дизайна.
Методы верстки:
• Табличная верстка раньше была основной. Преимущество верстки с
помощью таблиц заключается в ее простом исполнении и практически
одинаковом отображении в разных браузерах. Недостатки – сложная и
объемная структура, которая в разы увеличивает количество кода ( по
сравнению с блочной). Чтобы изменить табличную верстку нужно
затратить большое количество времени и усилий, долго вникать в уже
существующую структуру. На сегодняшний день табличную
верстку рекомендуют использовать только для отображения
таблиц.
• Блочная верстка является основной в среде веб-разработчиков. В
блочной верстке каркас документа состоит из тегов <div>. Главным ее
преимуществом является концепция семантической верстки, т. е.
разделение содержимого и оформления.

Пример табличной верстки
<html>
<head>
<title>Табличная верстка</title>
</head>
<body>
<table width="500" border="1" cellspacing="0" cellpadding="0">
<tr colspan="2">
<td class="header" colspan="2">Заголовок</td>
</tr>
<tr>
<td class="content">Содержание</td>
<td class="menu">Меню</td>
</tr>
<tr colspan="2">
<td class="footer" colspan="2">Футер</td>
</tr>
</table>
</body>
</html>

Пример табличной верстки
<html>
<head>
<title>Табличная верстка</title>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr colspan="2" style="background-color:red">
<td class="header" colspan="2">Заголовок</td>
</tr>
<tr style="background-color:green">
<td class="content">Содержание</td>
<td class="menu" style="background-color:yellow">Меню</td>
</tr>
<tr colspan="2" style="background-color:blue">
<td class="footer" colspan="2">Футер</td>
</tr>
</table>
</body>
</html>

Пример блочной верстки
<html>
<head>
<title>Блочная верстка</title>
</head>
<body>
<div id="header">Заголовок</div>
<div id="wrapper">
<div id="content">Содержание</div>
<div id="menu">Меню</div>
</div>
<div id="footer">Футер</div>
</body>
</html>

<html>
<head>
</head>
<body>
<div id="header">Заголовок</div>
<div id="wrapper">
<div id="content" style="float:left">Содержание</div>
<div id="menu">Меню</div>
</div>
<div id="footer">Футер</div>
</body>
</html>
По умолчанию, каждый новый блок располагается с новой строки. Для того,
чтобы расположить блок слева или справа от другого используется свойство
float. По умолчанию оно имеет значение «none», но можно также
выставлять значения «left» и «right».

float и clear
Важно учитывать, что в некоторых браузерах свойство float
распространяется не только на сам блок, в котором оно прописано, но
и на последующий элемент, который будет идти за этим блоком. То
есть если мы к вышеописанным двум блокам добавим еще один блок,
не указывая ему никаких свойств, то он расположится не с новой
строки, а начнется справа от второго блока.
Для того, чтобы избежать этого, блочная верстка div использует
свойство clear, которое должно быть задано для того блока, который
мы хотим расположить с новой строки. Чаще всего для этого ему
задается значение «both», но можно также задать значения «left»
или «right», если мы хотим не просто расположить блок на новой
строке, но и задать ему выравнивание.

Файл index_div.css
.header{
background-color:red;
width:500px;
border:none;
clear:both;}
.wrapper {
background-color:none;
width:500px;
border:none;
clear:both;}
.content{
background-color:green;
width:300px;
border:none;
float:left;}
.menu{
background-color:yellow;
width:200px;
border:none;
float:left;}
.footer{
background-color:blue;
width:500px;
border:none;
clear:both;}
Файл index_div.html
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css"
href="index_div.css" />
</head>
<body>
<div id="header"
class="header">Заголовок</div>
<div id="wrapper" class="wrapper">
<div id="content"
class="content">Содержание</div>
<div id="menu" class="menu">Меню</div>
</div>
<div id="footer" class="footer">Футер</div>
</body>
</html>

Лабораторная работа №1
Создать HTML-страницу (или несколько) с информацией о себе (например
профиль facebook) без использования таблиц, используя только
оформление CSS.

JavaScript Базовый. Занятие 01.

More Related Content

What's hot

Viewers also liked

Similar to JavaScript Базовый. Занятие 01.

More from Igor Shkulipa

JavaScript Базовый. Занятие 01.