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

Темы лекции: Основы разработки веб-приложений.

Тренер: Игорь Шкулипа, к.т.н.

JavaScript. Базовый курс

Занятие 1

http://www.slideshare.net/IgorShkulipa 2

Концепция разработки web-приложений

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

Данный вид приложений имеет ряд особенностей:

• выполняются независимо от операционной системы клиента.При этом на него налагается требование кроссбраузерности,вытекающее из различной реализации браузерами стандартовHTML, CSS и DOM.

• представляют собой распределенную информационнуюсистему и должны выдерживать максимальное число клиентскихобращений.

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

http://www.slideshare.net/IgorShkulipa


Трехуровневая архитектура

Многоуровневая архитектура клиент-сервер (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://somewebsite.com/


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

Метод сообщает о цели запроса клиента. Протокол 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 с описанием и атрибутами.


http://www.puzzleweb.ru/html/all_tags.php

Комментарии

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

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

Все, что находится между этими тегами отображаться на веб-страницене будет.


Необязательные теги

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

Тег Условие

<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 код_языка

Определяет язык содержимого в элементе (используется для правильного отображения некоторых национальных символов).

spellchecktrue

false

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

style свойства Задает встроенный стиль для элемента.

tabindex числоУказывает порядок перехода между элементами (при использовании клавиши "tab").

title текст

Указывает дополнительную информацию об элементе (отображается браузерами в виде всплывающей подсказки).



Специальные символы

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


http://www.puzzleweb.ru/html/html_symbols.php


Цвета

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

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


http://www.puzzleweb.ru/html/colors_html.php


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


http://ramech.net/docs/css3

http://www.wisdomweb.ru/CSS3/index.php


Основы верстки веб-страниц

Вёрстка веб-страниц — процесс формирования веб-страниц,следующий за этапом веб-дизайна.

Методы верстки:• Табличная верстка раньше была основной. Преимущество верстки с

помощью таблиц заключается в ее простом исполнении и практическиодинаковом отображении в разных браузерах. Недостатки – сложная иобъемная структура, которая в разы увеличивает количество кода ( посравнению с блочной). Чтобы изменить табличную верстку нужнозатратить большое количество времени и усилий, долго вникать в ужесуществующую структуру. На сегодняшний день табличнуюверстку рекомендуют использовать только для отображениятаблиц.

• Блочная верстка является основной в среде веб-разработчиков. Вблочной верстке каркас документа состоит из тегов <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

Education