- •Общее представление
- •Браузеры
- •[Править]Версии
- •Iso/iec 15445:2000[4] (так называемый iso html, основан на html 4.01 Strict) — 15 мая 2000 года.
- •[Править]Браузерные войны
- •1.3 Структура запроса
- •2 Метод get
- •4. Постскриптум.
- •Пример 7.1.
- •Ie: Internet Explorer, f: Firefox, o: Opera, w3c: стандарт
- •Что такое ajax ? Пример реализации.
- •Смысл ajax - в интеграции технологий
- •Пример. Gmail.
- •Синхронная модель vs Асинхронная модель
- •Синхронная и асинхронная модель в ajax
- •Особенности асинхронной модели
- •Асинхронный drag'n'drop.
- •[Править]Обзор
- •Inline-стилей, когда в html-документе информация стиля для одного элемента указывается в его атрибуте style.
- •[Править]css-вёрстка
Пример 7.1.
Таким образом, для того чтобы обработать какое-либо стандартное событие в браузере, необходимо добавить в подходящий HTML тэг атрибут, соответствующий этому событию, указав в качестве значения атрибута имя JavaScript функции. Список атрибутов, которые определены для HTML тэгов приводится ниже:
Ie: Internet Explorer, f: Firefox, o: Opera, w3c: стандарт
Атрибут |
Описание |
Номер версии браузера |
W3C |
||
IE |
F |
O |
|||
onabort |
Прерванная загрузка изображения |
4 |
1 |
9 |
Да |
onblur |
утрата фокуса элементом |
3 |
1 |
9 |
Да |
onchange |
Изменение содержимого в поле ввода |
3 |
1 |
9 |
Да |
onclick |
Щелчок мыши на объекте |
3 |
1 |
9 |
Да |
ondblclick |
Двойной щелчок мыши на объекте |
4 |
1 |
9 |
Да |
onerror |
Ошибка при загрузке изображения или документа |
4 |
1 |
9 |
Да |
onfocus |
Получение фокуса элементом |
3 |
1 |
9 |
Да |
onkeydown |
Нажатие клавиши |
3 |
1 |
Нет |
Да |
onkeypress |
Клавиша нажата |
3 |
1 |
9 |
Да |
onkeyup |
Отжатие клавиши |
3 |
1 |
9 |
Да |
onload |
Завершение загрузки страницы или изображения |
3 |
1 |
9 |
Да |
onmousedown |
Нажатие кнопки мыши |
4 |
1 |
9 |
Да |
onmousemove |
Перемещение курсора мыши |
3 |
1 |
9 |
Да |
onmouseout |
Смещение курсора мыши с объекта |
4 |
1 |
9 |
Да |
onmouseover |
Наведение курсора мыши на объект |
3 |
1 |
9 |
Да |
onmouseup |
Отжатие кнопки мыши |
4 |
1 |
9 |
Да |
onreset |
Кнопка "Reset" нажата |
4 |
1 |
9 |
Да |
onresize |
Изменение размера окна |
4 |
1 |
9 |
Да |
onselect |
Выделение текста |
3 |
1 |
9 |
Да |
onsubmit |
Кнопка "Submit" нажата |
3 |
1 |
9 |
Да |
onunload |
Уход с веб-страницы |
3 |
1 |
9 |
Да |
Использование языка сценариев JavaScript
В сети Интернет размещено огромное количество сценариев обработки HTML-документов, как очень простых, так и достаточно сложных. Среди них значительную часть составляют программы, написанные на языке JavaScript. Цель данного параграфа -- рассмотреть некоторых из них и научить вас использовать их на своих HTML-страничках. Подробнее возможности языка подготовки сценариев JavaScript рассматриваются в разделе "Программирование для Интернет".
Программы на языке программирования JavaScript часто называют сценариями или скриптами. По сути они представляют собой набор инструкций по управлению браузером. Код программы размещается непосредственно в HTML-документе или в виде отдельного файла.
Скрипты могут находится в любом месте HTML-документа. Однако между строчками кода JavaScript-программы нельзя помещать теги языка HTML. Поэтому чаще всего скрипт размещают внутри раздела <HEAD> документа. Сама JavaScript-программа размещается между тегами <SCRIPT> ... </SCRIPT>. Встретив тег <SCRIPT>, браузер построчноанализирует содержимое документа до тех пор, пока не будет достигнут тег </SCRIPT>. После этого проводится проверка скрипта на наличие ошибок и компиляция программы в формат, пригодный для использования в данном браузере. Не все браузеры понимают код JavaScript, поэтому полезно заключать весь код сценария в комментарии (<!-- и //-->)
Для размещения текста программы внутри HTML-документа используют конструкцию
<SCRIPT LANGUAGE="JavaScript">
<!--
...
здесь располагается код программы
...
//-->
</SCRIPT>
Программы на языке JavaScript можно размещать и в виде отдельных текстовых файлов, имеющих расширение .js. Для подключения такого сценария используется параметрSRC тега <SCRIPT>, содержащий абсолютный URL файла, из которого загружается сценарий. Адрес URL может быть и относительным, задавая, например, скрипт, расположенный в том же каталоге, что и текущий HTML-документ:
<SCRIPT SCR="myScript.js">
</SCRIPT>
Кроме этого, для работы программы в "теле" HTML-документа могут содержатся конструкции кода, позволяющие начать выполнение программы. Дело в том, что мало разместить в правильном месте код сценария, даже правильно написанный, необходимо еще дать команду браузеру для запуска программы.
Пример Рассмотрим HTML-файл со сценарием на языке JavaScript, который отображает текущее время.
<HTML>
<HEAD>
<TITLE>Электронные часы</TITLE>
<!--
<SCRIPT LANGUAGE="JavaScript">
function clock_form() {
day=new Date()
clock_f=day.getHours()+":"+
day.getMinutes()+":"+
day.getSeconds()
document.form.f_clock.value=clock_f
id=setTimeout("clock_form()",100)
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="clock_form()">
<FORM NAME="form">
Московское время:
<INPUT NAME="f_clock" SIZE="8">
</FORM>
</BODY>
</HTML>
В этом примере для запуска сценария используется конструкция onLoad = "clock_form()", размещенная в качестве атрибута тега <BODY>. Для вывода показаний часов используется элемент <FORM>...</FORM>, размером в 8 символов.
Пример Следующий скрипт создает "бегущую строку" в окне браузера. Для изменения скорости вывода информации используется переменная speed, текст строки задается в переменнойline.
<HTML>
<HEAD>
<TITLE>Бегущая строка</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var line="Центр Компьютерных Технологий";
var speed=200;
var i=0;
function m_line() {
if(i++<line.length) {
document.form.ctc.value=line.substring(0,i);
}
else{
document.form.ctc.value=" ";
i=0;
}
setTimeout('m_line()',speed);
}
//-->
</SCRIPT>
<BODY onload="m_line()">
<CENTER>
<FORM NAME="form">
<INPUT TYPE="text" SIZE="30" NAME="ctc">
</FORM>
</CENTER>
</BODY>
</HTML>
Следующий файл содержит скрипт "Бегущая строка".