Дополнения / Основы программирования на JavaScript / Библиотека (книги, учебники и журналы) / В помощь Веб-Мастеру

Обложка
Аннотация

Марк Кан i

Книги автора: Основы программирования на JavaScript Основы программирования на JavaScript

/ Евгений Резниченко i

Книги автора: Основы программирования на JavaScript Основы объектно-ориентированного программирования

/ Sergey R i

Книги автора: Основы программирования на JavaScript

Книга: Основы программирования на JavaScript

Дополнения

Дополнение. Краткое руководство по AJAX

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

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

AJAX основывается на JavaScript и запросах HTTP.

AJAX является сокращением от "Asynchronous JavaScript And XML" (Асинхронный JavaScript и XML).

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

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

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

AJAX является технологией, которая выполняется в браузере клиента. Она использует асинхронную передачу данных (запросы HTTP) между браузером и Web-сервером, позволяя Web-страницам запрашивать с сервера небольшие объемы данных вместо целых страниц.

Эта технология позволяет уменьшить объем приложений Интернет, сделать их более быстрыми и более удобными для пользователей.

AJAX является технологией Web-браузера, которая не зависит от программного обеспечения Web-сервера.

AJAX использует следующие открытые стандарты:

JavaScript

XML

HTML

CSS

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

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

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

С помощью AJAX приложения Интернет можно сделать богаче (меньше, быстрее, и легче в использовании).

Нет ничего нового, что требует изучения.

Технология AJAX основывается на открытых стандартах. Эти стандарты использовались множеством разработчиков многие годы.

Большинство существующих Web-приложений можно легко переписать с помощью технологии AJAX вместо традиционных форм HTML.

Традиционное Web-приложение посылает введенные данные на Web-сервер (используя форму HTML). После обработки данных Web-сервер возвращает пользователю совершенно новую Web-страницу.

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

С помощью AJAX Web-приложения могут посылать и получать данные без перезагрузки всей Web-страницы. Это делается с помощью запросов HTTP, посылаемых на сервер (в фоновом режиме), и модификации только отдельных частей Web-страницы с помощью JavaScript, когда сервер возвращает данные.

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

Как это делается, будет показано далее в этом кратком руководстве.

Технологию AJAX можно использовать для создания приложений с большими интерактивными возможностями.

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

На странице выводится поле ввода с предложением ввести имя. Когда пользователь начинает вводить в этом поле имя, ниже появляются возможные варианты имен.

Пусть на Web-странице имеется форма HTML со следующим кодом:

<form>

Имя:

<input type="text"

</form>

<p>Советуем: <span></span></p>

Как можно видеть, это простая форма HTML с полем ввода с именем "txt1".

Атрибут события этого поля ввода определяет функцию, которая будет запускаться при возникновении события onkeyup.

Параграф ниже формы содержит тег span с именем "txtHint". Тег span используется в качестве поля для подстановки данных, получаемых с Web-сервера.

Когда пользователь вводит данные, выполняется функция с именем "showHint()". Выполнение функции запускается событием "onkeyup". Другими словами, всякий раз, когда пользователь убирает свой палец с клавиатуры внутри поля ввода (отпускает нажатую клавишу), вызывается функция showHint.

Функция showHint() является очень простой функцией JavaScript, помещенной в раздел заголовка <head> страницы HTML.

Функция имеет следующий код:

function showHint(str)

{

if (str.length==0)

{

document.getElementById("txtHint").innerHTML=""

return

}

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Браузер не поддерживает запросы HTTP")

return

}

var url="gethint.asp"

url=url+"?q="+str

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

Функция выполняется всякий раз, когда в поле ввода вводится символ.

Если имеется какой-то ввод в текстовое поле (str.length > 0), то функция выполняет следующее:

[x]. Определяет url (имя файла) для отправки на сервер

[x]. Добавляет к url параметр (q) с содержимым поля ввода

[x]. Добавляет случайное число, чтобы сервер не использовал кэшированный файл

[x]. Создает объект XMLHTTP, и приказывает объекту выполнить функцию с именем stateChanged, когда произойдет изменение.

[x]. Открывает объект XMLHTTP с заданным url.

[x]. Посылает запрос HTTP на сервер

Если поле ввода будет пустым, то функция просто очищает содержимое поля для подстановки txtHint.

Функция stateChanged() содержит следующий код:

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

document.getElementById("txtHint").innerHTML=xmlHttp.responseText

}

Функция stateChanged() выполняется всякий раз, когда изменяется состояние объекта XMLHTTP.

Когда состояние будет равно 4 (или "complete"), поле для подстановки txtHint получает содержимое текста пришедшего ответа.

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

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

Предыдущий пример вызывает функцию с именем GetXmlHttpObject.

Эта функция предназначена для решения проблемы создания различных объектов XMLHTTP для различных браузеров.

Функция имеет следующий код:

function GetXmlHttpObject(handler)

{

var objXMLHttp=null

if (window.XMLHttpRequest)

{

objXMLHttp=new XMLHttpRequest()

}

else if (window.ActiveXObject)

{

objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

}

return objXMLHttp

}

Далее показан полный исходный код рассмотренного выше примера AJAX.

Эта страница HTML содержит простую форму HTML и ссылку на файл JavaScript.

<html>

<head>

</head>

<body>

<form>

Имя:

<input type="text"

</form>

<p>Советуем: <span></span></p>

</body>

</html>

Это код JavaScript, который находится в файле "clienthint.js":

var xmlHttp

function showHint(str)

{

if (str.length==0)

{

document.getElementById("txtHint").innerHTML=""

return

}

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Браузер не поддерживает запросы HTTP")

return

}

var url="gethint.asp"

url=url+"?q="+str

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

document.getElementById("txtHint").innerHTML=xmlHttp.responseText

}

function GetXmlHttpObject()

{

var objXMLHttp=null

if (window.XMLHttpRequest)

{

objXMLHttp=new XMLHttpRequest()

}

else if (window.ActiveXObject)

{

objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

}

return objXMLHttp

}

Далее речь пойдет о серверной странице AJAX.

Сервера AJAX не существует.

Страницы AJAX может обрабатывать любой сервер Интернет.

Серверная страница, вызываемая сценарием JavaScript в рассматриваемом примере, является простым файлом ASP с именем "gethint.asp".

Ниже представлены два примера кода серверной страницы, один, написанный на ASP, а другой – на PHP.

Код на странице "gethint.asp" написан на VBScript для Информационного сервера Интернет (IIS). Он просто проверяет массив имен и возвращает клиенту подходящие имена:

dim a(30)

'Заполнение массива именами

a(1)="Anna"

a(2)="Brittany"

a(3)="Cinderella"

a(4)="Diana"

a(5)="Eva"

a(6)="Fiona"

a(7)="Gunda"

a(8)="Hege"

a(9)="Inga"

a(10)="Johanna"

a(11)="Kitty"

a(12)="Linda"

a(13)="Nina"

a(14)="Ophelia"

a(15)="Petunia"

a(16)="Amanda"

a(17)="Raquel"

a(18)="Cindy"

a(19)="Doris"

a(20)="Eve"

a(21)="Evita"

a(22)="Sunniva"

a(23)="Tove"

a(24)="Unni"

a(25)="Violet"

a(26)="Liza"

a(27)="Elizabeth"

a(28)="Ellen"

a(29)="Wenche"

a(30)="Vicky"

'извлечение параметра q из URL

q=ucase(request.querystring("q"))

'поиск всех рекомендаций из массива, если длина q>0

if len(q)>0 then

hint=""

for i=1 to 30

if q=ucase(mid(a(i),1,len(q))) then

if hint="" then

hint=a(i)

else

hint=hint & " , " & a(i)

end if

'Вывод "нет предложений" если рекомендуемого имени не найдено

'или вывод подходящих значений

if hint="" then

response.write("нет предложений")

else

response.write(hint)

end if

Приведенный выше код переписан на PHP.

Примечание: Чтобы выполнить весь пример на PHP, не забудьте изменить значение переменной url в "clienthint.js" с "gethint.asp" на "gethint.php".

<?php

// Заполняем массив именами

$a[]="Anna";

$a[]="Brittany";

$a[]="Cinderella";

$a[]="Diana";

$a[]="Eva";

$a[]="Fiona";

$a[]="Gunda";

$a[]="Hege";

$a[]="Inga";

$a[]="Johanna";

$a[]="Kitty";

$a[]="Linda";

$a[]="Nina";

$a[]="Ophelia";

$a[]="Petunia";

$a[]="Amanda";

$a[]="Raquel";

$a[]="Cindy";

$a[]="Doris";

$a[]="Eve";

$a[]="Evita";

$a[]="Sunniva";

$a[]="Tove";

$a[]="Unni";

$a[]="Violet";

$a[]="Liza";

$a[]="Elizabeth";

$a[]="Ellen";

$a[]="Wenche";

$a[]="Vicky";

//извлечение параметра q из URL

$q=$_GET["q"];

//поиск всех рекомендаций в массиве, если длина q>0

if (strlen($q) > 0)

{

$hint="";

for($i=0; $i<count($a); $i++)

{

if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))

{

if ($hint=="")

{

$hint=$a[$i];

}

else

{

$hint=$hint." , ".$a[$i];

}

// Вывод "нет предложений", если рекомендаций не найдено

// или вывод подходящих значений

if ($hint == "")

{

$response="нет предложений";

}

else

{

$response=$hint;

}

//вывод ответа

echo $response;

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

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

На Web-странице выводится список выбора с именами клиентов.

При выборе любого клиента на странице выводится связанная с ним информация из базы данных

Описанный выше пример страницы содержит простую форму HTML и ссылку на сценарий JavaScript:

<html>

<head>

</head>

<body>

<form>

Выберите заказчика:

<option value="ALFKI">Alfreds Futterkiste

<option value="NORTS ">North/South

<option value="WOLZA">Wolski Zajazd

</select>

</form>

<p>

<div><b>Информация о заказчике будет выводиться здесь.</b></div>

</p>

</body>

</html>

Как можно видеть, это просто форма HTML с раскрывающимся списком с названием "customers".

Параграф ниже формы содержит тег div с именем "txtHint". Тег div используется в качестве поля для заполнения получаемой с Web-сервера информацией.

Когда пользователь выбирает данные (имя заказчика), выполняется функция "showCustomer()". Выполнение функции запускается событием "onchange". Другими словами, каждый раз, когда пользователь изменяет значение в поле раскрывающегося списка, вызывается функция showCustomer.

Код JavaScript показан далее.

Следующий далее код JavaScript находится в файле "selectcustomer.js":

var xmlHttp

function showCustomer(str)

{

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Браузер не поддерживает запросы HTTP")

return

}

var url="getcustomer.asp"

url=url+"?q="+str

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

document.getElementById("txtHint").innerHTML=xmlHttp.responseText

}

function GetXmlHttpObject()

{

var objXMLHttp=null

if (window.XMLHttpRequest)

{

objXMLHttp=new XMLHttpRequest()

}

else if (window.ActiveXObject)

{

objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

}

return objXMLHttp

}

Серверная страница, вызываемая сценарием JavaScript, является просто файлом ASP file с именем "getcustomer.asp".

Страница написана на VBScript для Информационного сервера Интернет (IIS). Ее можно легко переписать на PHP, или любой другой серверный язык.

Код выполняет команды SQL на базе данных и возвращает результат в виде таблицы HTML:

sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="

sql=sql & request.querystring("q")

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("/db/northwind.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

rs.Open sql, conn

response.write("<table>")

do until rs.EOF

for each x in rs.Fields

response.write("<tr><td><b>" & x.name & "</b></td>")

response.write("<td>" & x.value & "</td></tr>")

rs.MoveNext

loop

response.write("</table>")

AJAX можно использовать для интерактивного взаимодействия с файлом XML.

В следующем далее примере приложения AJAX показано, как Web-страница может извлекать информацию из файла XML с помощью технологии AJAX.

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

Рассматриваемый пример содержит простую форму HTML и ссылку на код JavaScript:

<html>

<head>

</head>

<body>

<form>

Выберите компакт-диск:

<option value="Bob Dylan">Bob Dylan</option>

<option value="Bonnie Tyler">Bonnie Tyler</option>

<option value="Dolly Parton">Dolly Parton</option>

</select>

</form>

<p>

<div><b>Здесь выводится информация о компакт-диске.</b></div>

</p>

</body>

</html>

Как можно видеть, это простая форма HTML с простым раскрывающимся списком выбора с именем "cds".

Параграф ниже формы содержит тег div с именем "txtHint". Тег div используется в качестве поля для заполнения информацией, получаемой с Web-сервера.

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

Код JavaScript показан далее.

Следующий далее код JavaScript находится в файле "selectcd.js":

var xmlHttp

function showCD(str)

{

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)

{

alert ("Браузер не поддерживает запросы HTTP")

return

}

var url="getcd.asp"

url=url+"?q="+str

url=url+"&sid="+Math.random()

xmlHttp.onreadystatechange=stateChanged

xmlHttp.open("GET",url,true)

xmlHttp.send(null)

}

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

document.getElementById("txtHint").innerHTML=xmlHttp.responseText

}

function GetXmlHttpObject()

{

var objXMLHttp=null

if (window.XMLHttpRequest)

{

objXMLHttp=new XMLHttpRequest()

}

else if (window.ActiveXObject)

{

objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

}

return objXMLHttp

}

Серверная страница, вызываемая кодом JavaScript, будет простым файлом ASP с именем "getcd.asp".

Страница написана на VBScript для Информационного сервера Интернет (IIS). Ее можно легко переписать на PHP, или любом другом серверном языке.

Код выполняет запрос на файле XML и возвращает результат в виде HTML.

q=request.querystring("q")

set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")

xmlDoc.async="false"

xmlDoc.load(Server.MapPath("cd_catalog.xml"))

set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']")

for each x in nodes

for each y in x.childnodes

response.write("<b>" & y.nodename & ":</b> ")

response.write(y.text)

response.write("<br />")

Объект XMLHttpRequest делает возможной технологию AJAX.

Чтобы создавать Web-приложения AJAX, необходимо хорошо знать объект JavaScript, называемый XMLHttpRequest.

Объект XMLHttpRequest является ключевым понятием технологии AJAX. Он был доступен с момента появления в июле 2000 браузера Internet Explorer 5.5, но не был полностью понят до 2005 года, когда начались разговоры об AJAX и Web 2.0.

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

Различные браузеры используют для создания объекта XMLHttpRequest различные методы.

Internet Explorer использует ActiveXObject.

Другие браузеры используют встроенный в JavaScript объект, называемый XMLHttpRequest.

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

var XMLHttp=null

if (window.XMLHttpRequest)

{

XMLHttp=new XMLHttpRequest()

}

else if (window.ActiveXObject)

{

XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

}

Сначала создается переменная XMLHttp для использования в качестве объекта XMLHttpRequest. Ее значение задается как null.

Затем проверяется, доступен ли объект window.XMLHttpRequest. Этот объект доступен в более новых версиях браузеров, таких как Firefox, Mozilla, и Opera.

Если объект доступен, то он используется для создания нового объекта.

XMLHttp=new XMLHttpRequest().

Если он не доступен, то проверяется, доступен ли объект window.ActiveXObject. Этот объект будет доступен в браузере Internet Explorer версии 5.5 и выше.

Если этот объект доступен, то он используется для создания нового объекта:

XMLHttp=new ActiveXObject().

Некоторые программисты предпочтут использовать самую новую и быструю версию объекта XMLHttpRequest.

Следующий пример пытается использовать самую последнюю версию объекта "Msxml2.XMLHTTP" компании Microsoft, доступную в Internet Explorer 6, прежде чем обратиться к объекту "Microsoft.XMLHTTP", доступному в Internet Explorer 5.5 и выше.

var XMLHttp=null

try

{

XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")

}

catch(e)

{

try

{

XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

}

if (XMLHttp==null)

{

XMLHttp=new XMLHttpRequest()

}

Затем делается попытка создания объекта способом компании Microsoft, доступным в Internet Explorer 6 и более поздних версиях:

XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")

Если это порождает ошибку, то используется старый способ (Internet Explorer 5.5):

XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

Если XMLHttp по прежнему имеет значение null, то делается попытка создания объекта "стандартным" способом:

XMLHttp=new XMLHttpRequest()

Метод open()

Метод open() создает запрос для Web-сервера.

Метод send()

Метод send() посылает запрос серверу.

Метод abort()

Метод abort() отменяет текущий запрос к серверу.

Свойство readyState определяет текущее состояние объекта XMLHttpRequest.

В таблице показаны возможные значения свойства readyState:

Состояние	Описание
0	Запрос не инициализирован
1	Запрос создан
2	Запрос послан
3	Запрос обрабатывается
4	Запрос завершен

readyState=0 после создания объекта XMLHttpRequest, но до вызова метода open().

readyState=1 после вызова метода open(), но до вызова метода send().

readyState=2 после вызова метода send().

readyState=3 после того, как браузер соединится с сервером, но до завершения сервером ответа.

readyState=4 после завершения запроса и полного получения всех данных ответа с сервера.

Различные браузеры используют свойство состояния готовности по-разному. Не стоит рассчитывать, что все браузеры будут сообщать обо всех состояниях. Некоторые не сообщают о состоянии 0 и 1.

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

Свойство responseText содержит присланный сервером текст.

Дополнение. Учебное руководство по XHTML

Язык XHTML является более строгой и четкой версией языка разметки HTML.

В данном руководстве рассмотрены различия между HTML и XHTML, а также показано, как преобразовать Web-сайт на использование XHTML.

Язык XHTML является более строгой и четкой версией языка HTML.

Для понимания изложенного материала необходимо знать язык HTML и основы создания Web-страниц.

XHTML является сокращением от английского EXtensible HyperText Markup Language, что означает "Расширяемый язык разметки гипертекста".

XHTML предназначен для замены HTML.

XHTML почти совпадает с HTML 4.01.

XHTML является более строгой и четкой версией языка HTML.

XHTML является языком HTML, определенным как приложение XML.

XHTML одобрен в качестве Рекомендации консорциумом W3C.

XHTML 1.0 был одобрен как Рекомендация W3C 26 января 2000 г..

W3C определяет XHTML как последнюю версию HTML. XHTML будет постепенно заменять HTML.

Язык XHTML совместим с HTML 4.01.

Все новые браузеры поддерживают XHTML.

XHTML является переработкой HTML 4.01 в соответствии с XML, и может сразу использоваться существующими браузерами при соблюдении нескольких простых правил.

Данное руководство рассматривает:

[x]. Почему необходимо использовать XHTML

[x]. Синтаксис XHTML

[x]. Как преобразовать сайт на XHTML

[x]. Проверка XHTML

[x]. Модуляризация XHTML

XHTML является объединением HTML и XML (EXtensible Markup Language – Расширяемого языка разметки).

XHTML состоит из всех элементов HTML 4.01, объединенных с синтаксисом XML.

В настоящее время многие страницы в Интернет содержат "плохой" код HTML.

Следующий код HTML будет нормально работать при просмотре в браузере, даже хотя он не полностью следует правилам HTML:

<html>

<head>

<title>Это плохой код HTML</title>

<body>

<h1>Плохой код HTML

</body>

XML является языком разметки, в котором каждый элемент должен быть правильно размечен, что приводит к "грамматически-правильным" ("well-formed") документам.

Язык XML предназначен для описания данных, а язык HTML создан для представления данных.

На современном рынке представлены различные технологии браузеров, одни браузеры предназначены для использования Интернет на компьютерах, другие для использования Интернет на мобильных телефонах и c помощью карманных коммуникаторов. Последние устройства имеют недостаточно ресурсов или мощности для интерпретации "плохого" языка разметки.

Объединяя сильные стороны HTML и XML, мы получаем язык разметки, который будет полезен сегодня и в будущем -- XHTML.

Страницы XHTML можно читать с помощью любых устройств, которые поддерживают XML. Пока весь мир не перейдет на использование поддерживающих XML браузеров, XHTML предоставляет возможность сейчас писать "синтаксически-правильные" документы, которые можно использовать во всех браузерах.

XHTML можно начать использовать просто строго следуя правилам HTML.

XHTML не очень существенно отличается от стандарта HTML 4.01.

Поэтому хорошим началом будет приведение кода к стандарту 4.01.

Кроме того, необходимо писать код HTML символами нижнего регистра, и никогда не пропускать завершающие теги (такие как </p>).

Вот собственно и все. Удачного кодирования!

Элементы XHTML должны быть правильно вложены

Элементы XHTML всегда должны быть замкнутыми

Элементы XHTML должны записываться в нижнем регистре

Документы XHTML должны иметь один корневой элемент

В HTML некоторые элементы могут вкладываться друг в друга некорректно, например как в случае: <b><i>Этот текст жирный и наклонный</b></i>

В XHTML все элементы должны правильно вкладываться друг в друга, например: <b><i>Этот текст жирный и наклонный</i></b>

Примечание: Достаточно часто при создании вложенных списков забывают о том, что внутренний список должен находится между тегами <li> и </li>.

Неправильно:

<ul>

<li>Чай

<ul>

<li>Черный чай</li>

<li>Зеленый чай</li>

</ul>

<li>Молоко</li>

</ul>

Правильно:

<ul>

<li>Чай

<ul>

<li>Черный чай</li>

<li>Зеленый чай</li>

</ul>

</li>

<li>Молоко</li>

</ul>

Обратите внимание, что в примере "правильного" кода вставлен тег </li> после тега </ul>.

Непустые элементы должны иметь замыкающий тег.

Неправильно:

<p>Это -- параграф

<p>Это -- еще один параграф

Правильно:

<p>Это -- параграф </p>

<p>Это -- еще один параграф </p>

Пустые элементы должны иметь замыкающий тег или начальный тег должен заканчиваться символами />.

Неправильно:

Разрыв строки: <br>

Горизонтальная линия: <hr>

Изображение: <img src="happy.gif" alt="Веселое лицо ">

Правильно:

Разрыв строки: <br />

Горизонтальная линия: <hr />

Изображение: <img src="happy.gif" alt="Веселое лицо " />

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

Неправильно:

<BODY>

<P>Параграф </P>

</BODY>

Правильно:

<body>

<p>Параграф </p>

</body>

Все элементы XHTML должны быть вложены в корневой элемент <html>. Все другие элементы могут иметь вложенные элементы (потомков). Вложенные элементы должны быть парными и правильно вкладываться в свой родительский элемент. Общая структура документа имеет следующий вид:

<html>

</html>

При записи документа XHTML требуется использовать четкий синтаксис HTML.

[x]. Имена атрибутов должны записываться в нижнем регистре

[x]. Значения атрибутов должны заключаться в кавычки

[x]. Минимизация атрибутов запрещена

[x]. Атрибут id заменяет атрибут name

[x]. DTD XHTML определяет обязательные элементы

Неправильно:

Правильно:

Неправильно:

Правильно:

Неправильно:

Правильно:

Ниже представлен список минимизированных атрибутов HTML и их запись в XHTML.

HTML	XHTML
compact	compact="compact"
checked declare	checked="checked" declare="declare"
readonly	readonly="readonly"
disabled	disabled="disabled"
selected	selected="selected"
defer	defer="defer"
ismap	ismap="ismap"
nohref	nohref="nohref"
noshade	noshade="noshade"
nowrap	nowrap="nowrap"
multiple	multiple="multiple"
noresize	noresize="noresize"

HTML 4.01 определяет атрибут name для элементов a, applet, frame, iframe, img, и map. В XHTML атрибут name исключен. Вместо него используется атрибут id.

Неправильно:

Правильно:

Примечание: Для взаимодействия со старыми браузерами в течение некоторого времени необходимо будет использовать оба атрибута name и id, с одинаковыми значениями атрибутов, например: <img src="picture.gif" name="рис. 1" />.

Для совместимости XHTML с современными браузерами, необходимо добавить дополнительный пробел перед символом "/".

Атрибут lang применим почти к любому элементу XHTML. Он определяет язык содержимого внутри элемента.

Если в каком-то элементе используется атрибут lang, то необходимо добавить атрибут xml:lang, например: <div xml:lang="fr">Bonjour, madam!</div>.

Все документы XHTML должны иметь объявление DOCTYPE. Также должны присутствовать элементы html, head и body, а внутри элемента head должен присутствовать элемент title.

Шаблон минимального документа XHTML имеет следующий вид:

<!DOCTYPE Здесь определяется тип документа>

<head>

<title>Здесь задается заголовок </title>

</head>

<body>

</body>

</html>

Примечание: Объявление DOCTYPE не является частью самого документа XHTML. Это объявление не является элементом XHTML и не должно иметь закрывающий тег.

Примечание: Атрибут xmlns в теге <html> является в XHTML обязательным. Однако программа проверки (валидатор) на сайте w3.org не высказывает претензий, когда этот атрибут отсутствует в документе XHTML. Это обусловлено тем, что атрибут "xmlns=http://www.w3.org/1999/xhtml" имеет фиксированное значение и будет добавлен в тег <html>, даже если он не был включен.

В следующем разделе представлена дополнительная информация об определении типа документа XHTML.

Стандарт XHTML определяет три определения типа документа (Document Type Definitions – DTD).

Наиболее распространенным является XHTML Transitional (Переходный).

Документ XHTML состоит из трех основных частей:

Тип документа DOCTYPE

Заголовок (Head)

Тело (Body)

Базовая структура документа имеет следующий вид:

<!DOCTYPE ...>

<html>

<head>

</head>

</html>

Объявление DOCTYPE всегда должно присутствовать в первой строке документа XHTML.

Это простой (минимальный) документ XHTML:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>простой документ </title>

</head>

<body>

<p>простой параграф </p>

</body>

</html>

Объявление DOCTYPE определяет тип документа:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Оставшаяся часть документа выглядит как HTML:

<html>

<head>

<title>простой документ </title>

</head>

<body>

<p> простой параграф </p>

</body>

</html>

[x]. DTD определяет синтаксис Web-страницы на SGML.

[x]. DTD используется приложениями SGML, такими как HTML, для определения правил, которые применяют при разметке документов определенного типа, включая множество объявлений элементов и сущностей.

[x]. XHTML задан в определении типа документа SGML или 'DTD'.

[x]. DTD XHTML описывает точным, понятным для компьютера языком допустимый синтаксис и грамматику разметки XHTML.

В настоящее время имеется три типа документов XHTML:

[x]. STRICT

[x]. TRANSITIONAL

[x]. FRAMESET

XHTML 1.0 определяет три типа документов XML, которые соответствуют трем DTD: Strict, Transitional, и Frameset.

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

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

Чтобы преобразовать Web-сайт с языка HTML на XHTML, необходимо знать правила синтаксиса XHTML, которые были рассмотрены выше. Затем необходимо выполнить следующие действия (в указанном порядке):

В качестве первой строки каждой страницы добавляют следующее объявление DOCTYPE:

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Лучше использовать сначала переходное определение DTD (Transitional). Можно выбрать и строгое определение DTD (Strict), но оно немного слишком "строгое" на начальном этапе, и ему труднее соответствовать.

Web-cтраницы должны иметь объявление DOCTYPE, если желательно, чтобы они были определены как правильные согласно XHTML.

Надо помнить, однако, что более новые браузеры (такие как Internet Explorer 6) могут обрабатывать документ по-разному, в зависимости от объявления <!DOCTYPE>. Если браузер читает документ с DOCTYPE, то он может интерпретировать документ как "правильный". Плохо сформированный XHTML может выводиться иначе, чем при отсутствии DOCTYPE.

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

Так как рекомендация W3C для XTML 1.0 говорит, что значения всех атрибутов должны быть заключены в кавычки, то необходимо проверить все Web-страницы, чтобы значения всех атрибутов были правильно заключены в кавычки. Это трудоемкая работа, поэтому рекомендуется в будущем никогда не забывать использовать кавычки для значений атрибутов.

В XHTML пустые теги не разрешены. Теги <hr> и <br> должны быть заменены соответственно на <hr /> и <br />.

Это создает проблему с браузером Netscape, который неправильно интерпретирует тег <br/>. Но к счастью, по неизвестной причине, замена его на <br /> прекрасно работает. В этом случае также необходимо выполнить глобальный поиск и замену соответствующих тегов.

Некоторые другие теги (такие как тег <img>) страдают от такой же проблемы. В данном случае можно не использовать тег замыкания </img>, а добавить /> в конце тега.

После выполнения всех преобразований все имеющиеся страницы проверяются согласно официальному DTD W3C с помощью следующей ссылки на XHTML Validator (http://validator.w3.org/check/referer). Возможные не выявленные на начальном этапе ошибки надо будет отредактировать вручную. Наиболее распространенной ошибкой бывает отсутствие в списках тегов замыкающего </li>.

Имеются ли какие-либо специальные инструментальные средства для преобразования? Да, можно использовать утилиту TIDY.

Бесплатная утилита Дейва Рагетта HTML TIDY (http://www.w3.org/People/Raggett/tidy/) предназначена для проверки кода HTML. Она также отлично справляется с трудночитаемыми разметками документов, созданными специальными редакторами HTML и инструментальными средствами конвертации, и может помочь определить места кода, требующие дополнительного внимания, чтобы сделать Web-страницы более доступными для людей с физическими недостатками.

Документ XHTML проверяется согласно Определению типа документа.

Документ XHTML проверяют на соответствие определению типа документа (DTD). Прежде чем можно будет проверить файл XHTML, необходимо добавить в качестве первой строки правильный DTD.

Strict DTD содержит элементы и атрибуты, которые не были исключены и не связаны с фреймами:

!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

Transitional DTD содержит все из Strict DTD плюс исключенные элементы и атрибуты:

!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

Frameset DTD содержит все из Transitional DTD плюс фреймы:

!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"

Простой документ XHTML имеет следующий вид:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>простой документ </title>

</head>

<body>

<p>простой параграф </p>

</body>

</html>

Модель модуляризации XHTML определяет модули XHTML.

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

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

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

Используя модульность XHTML, разработчики приложений могут:

[x]. Выбирать элементы, которые будут поддерживаться устройством, используя стандартные строительные блоки XHTML.

[x]. Добавлять в XHTML расширения, используя XML, и не нарушая стандарт XHTML.

[x]. Упрощать XHTML для таких устройств, как карманные компьютеры-коммуникаторы, мобильные телефоны, ТВ устройства, и устройства бытовой техники.

[x]. Расширять XHTML для сложных приложений, добавляя новые функции XML (такие как MathML, SVG, Voice and Multimedia).

[x]. Определять профили XHTML, такие как XHTML Basic (подмножество XHTML для мобильных устройств).

Консорциум W3C разделил определение XHTML на 28 модулей:

Имя модуля	Описание
модуль Applet	Определяет исключенный элемент applet
модуль Base	Определяет элемент base
модуль Basic Forms	Определяет базовые элементы форм
модуль Basic Tables	Определяет базовые элементы таблиц
модуль Bi-directional Text	Определяет элемент bdo
модуль Client Image Map	Определяет элементы карт-изображений на стороне браузера
модуль Edit	Определяет элементы редактирования del и ins
модуль Forms	Определяет все элементы, используемые в формах
модуль Frames	Определяет элементы, связанные с фреймами
модуль Hypertext	Определяет элемент a
модуль Iframe	Определяет элемент iframe
модуль Image	Определяет элемент img
модуль Intrinsic Events	Определяет атрибуты событий, такие как onblur и onchange
модуль Legacy	Определяет исключенные элементы и атрибуты
модуль Link	Определяет элемент link
модуль List	Определяет элементы списка li, ul, dd, dt, и dl
модуль Metainformation	Определяет элемент meta
модуль Name Identification	Определяет исключенный атрибут name
модуль Object	Определяет элементы object и param
модуль Presentation	Определяет элементы представления, такие как b и i
модуль Scripting	Определяет элементы script и noscript
модуль Server Image Map	Определяет элементы карт-изображений на сервере
модуль Structure	Определяет элементы html, head, title и body
модуль Style Attribute	Определяет атрибут style
модуль Style Sheet	Определяет элемент style
модуль Tables	Определяет элементы, используемые в таблицах
модуль Target	Определяет атрибут target
модуль Text	Определяет элементы контейнера текста, такие как p и h1

Исключенные элементы не должны использоваться в XHTML.

Теги XHTML могут иметь атрибуты. Атрибуты каждого тега перечислены в описании тега. Здесь представлены базовые атрибуты и атрибуты языка, которые являются стандартными для всех тегов (с небольшими исключениями).

Недействительны в элементах base, head, html, meta, param, script, style и title.

Атрибут	Значение	Описание
class	правило_класса или правило_стиля	Класс элемента
id	имя_id	Уникальный id элемента
style	определение_стиля	Встроенное определение стиля
title	текст_подсказки	Текст для вывода подсказки

Недействительны в элементах base, br, frame, frameset, hr, iframe, param, и script.

Атрибут	Значение	Описание
dir	ltr \| rtl	Задает направление текста
lang	код_языка	Задает код языка

Атрибут	Значение	Описание
accesskey	символ	Задает клавиатурное сокращение для доступа к элементу
tabindex	число	Задает порядок элемента при переходе по клавише табуляции

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

Более подробно об использовании этих событий в программировании можно узнать в руководстве по JavaScript и руководстве по DHTML.

Действительны только в элементах body и frameset

Атрибут	Значение	Описание
onload	сценарий	Сценарий, который выполняется при загрузке документа
onunload	сценарий	Сценарий, который выполняется при выгрузке документа

Действительны только в элементах форм.

Атрибут	Значение	Описание
onchange	сценарий	Сценарий, который выполняется при изменении элемента
onsubmit	сценарий	Сценарий, который выполняется при отправке формы
onreset	сценарий	Сценарий, который выполняется при сбросе формы
onselect	сценарий	Сценарий, который выполняется при выборе элемента
onblur	сценарий	Сценарий, который выполняется, когда элемент теряет фокус
onfocus	сценарий	Сценарий, который выполняется, когда элемент получает фокус

Недействительны в элементах base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style и title.

Атрибут	Значение	Описание
onkeydown	сценарий	Действие после нажатия клавиши
onkeypress	сценарий	Действие после нажатия и отпускания клавиши
onkeyup	сценарий	Действие после отпускания клавиши

Недействительны в элементах base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style и title.

Атрибут	Значение	Описание
onclick	сценарий	Что делать при щелчке мыши
ondblclick	сценарий	Что делать при двойном щелчке мыши
onmousedown	сценарий	Что делать при нажатии кнопки мыши
onmousemove	сценарий	Что делать при перемещении указателя мыши
onmouseover	сценарий	Что делать при перемещении указателя мыши над элементом
onmouseout	сценарий	Что делать при смещении указателя мыши с элемента
onmouseup	сценарий	Что делать при отпукании нажатой кнопки мыши

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

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

Важно также то, что все документы XHTML должны иметь объявление DOCTYPE, и что должны присутствовать элементы html, head, title, и body.

Дополнительную информацию о XHTML можно найти в любом справочном руководстве по XHTML.

Следующий шаг состоит в изучении CSS и JavaScript.

CSS используется для управления стилем и компоновкой Web-страниц.

При использовании CSS все форматирование можно вынести из документа HTML и сохранить в отдельном файле.

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

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

Язык JavaScript может сделать Web-сайт более динамичным.

Статичный Web-сайт вполне подходит для вывода простого содержимого, но динамичный Web-сайт может реагировать на события и позволяет организовать взаимодействие с пользователем.

JavaScript является наиболее популярным языком сценариев в Интернет, и он работает со всеми основными браузерами.

Более подробно познакомиться с JavaScript можно с помощью любого руководства по JavaScript.

Оглавление книги

Оглавление статьи/книги

Похожие страницы