OpenSCADAWiki: Roman Savochenko/WWW Short All ...

Home | Index | Changes | Comments | Users | Registration | Login:   Password:  
 
This is an old revision of RomanSavochenko/WWWShortAll from 2011-04-26 12:33:19..

WWW — кратко обо всём


Автор: /RomanSavochenko
Примечание: Разрешается вносить изменения в данный документ с целью исправления обнаруженных ошибок или с целью его дополнения.
OpenDocument: file:wwwshortall.odt
PDF: PDF Documentftp://ftp.oscada.org.ua/books/WWWShortAll.pdf


Contents
1. Введение
2. Язык гипертекстовой разметки (HTML, XHTML и XML)
2.1. Теги заголовка <HEAD>
2.2. Теги тела сообщения <BODY>
2.2.1. Управления разметкой
2.2.2. Управления отображением
2.2.3. Списки
2.2.4. Таблицы
2.2.5. Гипертекстовые ссылки
2.2.6. Изображения
2.2.7. Формы
2.3. Фреймы
3. Каскадные таблицы стилей (CSS)
3.1. Атрибуты
3.1.1. Границы блока
3.1.2. Отступы блока. Отступы от внешнего блока (margin) и от внутреннего, набивка (padding)
3.1.3. Обтекание и выравнивание блока
3.1.4. Цвет и шрифт в CSS
3.1.5. Управление текстом
3.1.6. Управление видимостью. Слои. Положения и размеры блоков
3.1.7. Другие атрибуты
3.2. Модификаторы тегов
4. JavaScript
4.1. Типы данных
4.2. Операции
4.3. Операторы
4.4. Функции
4.5. События и их обработка
4.6. Объекты
4.6.1. Встроенные типы объектов
4.6.2. Глобальные свойства и методы
4.6.3. Иерархия объектов браузера
5. Приложение
5.1. Структура URL (Unifical resource locator)
5.2. CER (Character Entity Reference)
5.3. Цвета и их коды
5.4. Единицы размеров
5.5. Шрифты
6. Литература

Введение

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


Данный документ призван решить эти вопросы путем сжатого и лаконичного изложения материала граничащего со справочным представлением.

Язык гипертекстовой разметки (HTML, XHTML и XML)

Практически, язык гипертекстовой разметки появился первым, совместно с протоколом HTTP(Hyper Text Transfer Protocol). Следовательно изучение его, как основы Web-технологии является первоочередной задачей.


Язык разметки HTML является довольно мягким в плане требований к синтаксису, что и привело к значительным проблемам в стандартизации его обработки в различных WWW-браузерах. Для решения этой проблемы было принято решение на постепенный переход от HTML к более строгому языку XML. Промежуточной ступенью в этом переходе стал язык XHTML.


Основным элементом этих языков является контейнер, вид которого, условно, можно изобразить следующим образом:
<ИмяТега атрибута1" атрибута2"> Тело контейнера </


В языках XHTML и XML наличие закрывающего тега является обязательным требованием. В случае отсутствия тела контейнера вид контейнера приймет вид:
<ИмяТега атрибута1" атрибута2" />


Также, языками XHTML и XML запрещается пересечение тегов. Т.е. ранее открытые теги должны закрываться после тегов открытых в них.


Общая структура страницы на языке гипертекстовой разметки:

<?xml version='1.0' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF8"/>
  <title>Заголовок сайта</title>
 </head>
 <body bgcolor="#818181" text="#000000" link="#3366ff" vlink="#339999" alink="#33ccff">
 ...
 Тело страницы
 ...
 </body>
</html>


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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
 <TITLE>Заголовок</TITLE>
 ...
</HEAD>
<BODY>
...
</BODY>
</HTML>


Как можно видеть из примеров, страница состоит из двух основных частей:


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


Основные теги языка и их атрибуты:
<HTML> ... </HTML> — Заключает тело документа.
<HEAD> ... </HEAD> — Заключает заголовка документа.
<BODY> ... </BODY> — Заключает тело страницы.

BackGround — цвет фона или рисунок фона (BACKGROUND="image.gif");
BGcolor — цвет фона страницы;
Text — цвет текста;
Link — цвет гипертекстовых ссылок;
ALink — цвет активных гипертекстовых ссылок;
VLink — цвет пройденных гипертекстовых ссылок;
LeftMargin — задаёт ширину левого поля страницы (в пикселах);
TopMargin — задаёт ширину верхнего поля страницы (в пикселах).

<BASE Href="http://my.resource.org/test/"> — Определяет базовую точку входа. Используется относительно адресуемыми ссылками. Может использоваться в тегах: HTML, HEAD, BODY а также вне тела документа.

Href — ссылка на базовую страницу;
Target — базовое имя фрейма, для отображения в нём внутренних ссылок.

<FRAMESET> ... </FRAMESET> — Описание фреймовой структуры документа. Определяется только на одной странице являющейся точкой входа на документ. Страница с фреймовой структурой может не содержать тела страницы (<BODY>).
<NOFRAMES> Текст </NOFRAMES> — Текст сообщения для браузеров не поддерживающих фреймы.
<!-- Комментарий --> — Комментирование участков текста.


Теги заголовка <HEAD>

<TITLE> Hello </TITLE> — Устанавливает имя окна браузера.
<META Name="Refresh" HTTP-EQUIV="Refresh" Content="1; URL=refresh.htm" /> — Предоставляет управляющую информацию.

Name — имя метаинформации (обычно совпадает c HTTP-EQUIV);
Content — параметр опции, тип которой указан в HTTP-EQUIV;
HTTP-EQUIV — тип опции:
"Refresh" — перегрузка страницы указанной в "Content" через указанное количество секунд (Content="1; URL=refresh.htm");
"Content-Type" — указывает кодировку документа (Content="text/html; Charset=UTF8");
"Cache-Control" — управление кешированием:
Content="no-cache" — запретить кеширование документа;
Content="no-store" — запретить хранение документа после пересылки.
"Description" — описание документа (для поисковых систем) (Content="My home page");
"Keywords" — ключевые слова документа для поисковых систем (Content="home page; Vasa Pupkin").

<LINK Rel="stylesheet" Href="../css/css.htm" Type="text/css" /> — Обслуживание различных связей. Обычно используется для загрузки стилей (CSS).

Rel — тип отношения:
"stylesheet" — загрузка таблицы стилей;
"shortcut icon" — указание иконки сайта, высвечивается в закладках браузера для данного сайта.
Href — URL;
Type — тип содержания (text/css, text/javascript).

<STYLE Type=" описание стиля/стилей </STYLE> — Содержит описание стиля всего документа.

Type — тип стилей (text/css, text/javascript).

<SCRIPT Type=" Src="URL"> JavaScript/VBScript-код </SCRIPT> — Размещает на страницу код скрипта из файла. Код может помещаться непосредственно в теле контейнера.

Type — типа языка (JavaScript, VBScript, JScript);
Src — файл со скриптами, указывается в случае загрузки скриптов из внешнего файла.

Теги тела сообщения <BODY>

Управления разметкой

<H1> Заголовок </H1> — Определение заголовка с указанным уровнем от 1 до 6.
<P/> — Начало нового абзаца.

Align — определяет способ выравнивания (justify-по ширине, left, right, center).

<СЕNТЕR> Objects </CENTER> — Центрирование объектов внутри тега.
<BR/> — Разрыв строки (начать с новой строки).

Clear — остановить обтекание объекта в указанной точке (left, right, all).

<NOBR> Text </NOBR> — Формирование неразрывной строки.

Управления отображением

<ВIG> Текст </BIG> — Текст со шрифт более стандартного.
<SMALL> Текст </SMALL> — Текст со шрифт менее стандартного.
<SUР> Индекс </SUP> — Текст в нижнем индексе.
<SUВ> Индекс </SUB> — Текст в верхнем индексе.
<FONT> Иекст </FONT> — Текст с указанными параметрами шрифта.

Size — размер шрифта (-1,+1,3 ...);
Color — цвет шрифта.

<I> Текст </I> — Текст курсивом.
<B> Текст </B> — Усиление текста.
<TT> Текст </TT> — Текст телетайпом.
<U> Текст </U> — Подчёркивание текста.
<S> Текст </S> — Перечёркивание текста.
<ЕМ> Текст </ЕМ> — Типографски усиленный текст.
<СIТЕ> Текст </СIТЕ> — Цитата.
<STRONG> Текст </STRONG> — Усиленный текст.
<СODE> Текст </СОDE> — Исходные тексты кода (например, "коды программы").
<SАМР> Текст </SАМР> — Литералы.
<КВD> Текст </КВD> — Клавиатурные символы.
<VAR> Текст </VAR> — Переменная.
<DFN> Текст </DFN> — Определение.
<Q> Текст </Q> — Текст в скобках.
<РRЕ> Текст </PRE> — Преформатированный вывод текста (как есть).
<ВLОСKQUOTE> Текст </ВLОСKQUOTE> — Формирование блоков цитат. Добавляются поля слева и справа от текста.
<HR/> — Горизонтальная линейка.
<FIELDSET> Текст </FIELDSET> — Бордюр вокруг текста или произвольного участка страницы.

<LEGEND>Заголовок</LEGEND> — Заголовок области.

Списки

<DL>...</DL> — Формирует список определений.

<DT> Термин </DT> — Термин определения.
<DD> Определение </DD> — Определение.

<UL>...</UL> — Ненумерованный список.

Type — устанавливает тип маркера (Disk, Circle, Square).
<LI> Элемент </LI> — Описание элемента перечисления.
Type — устанавливает тип маркера для последующих элементов (Disk, Circle, Square).

<OL>...</OL> — Нумерованный список.

Type — устанавливает тип маркера (l,A,a,I).
<LI> Элемент </LI> — Описание элемента перечисления.
Type — устанавливает тип маркера для последующих элементов (l,A,a,I).

Таблицы

<TABLE> ... </TABLE> — Описание таблицы.

Align — общее выравнивание таблицы;
Border — тип и размер границы таблицы;
Width -- общая ширина таблицы (в пикселах или процентах - 50%, 300);
Height -- общая высота таблицы;
СellPadding -- ширина пустого пространства между содержимым ячейки и ее границами;
CellSpacing -- ширина промежутков между ячейками;
BgColor -- цвет фона таблицы;
BackGround -- фоновое изображение для таблицы.
<CAPTION>Подпись</CAPTION> -- Указание подписи таблицы.
Align -- выравнивание подписи (top, bottom).

<TR> ... </TR> -- Формирование строки.

Width -- ширина строки;
BgColor -- цвет фона строки;
Align -- выравнивание по горизонтали (blееdleft, left, сеnter, right);
Valign -- выравнивание по вертикале (top, middle, bottom).
<TD Colspan="3">Текст</TD> -- Описание ячейки строки.
Align -- выравнивание по горизонтали (blееdleft, left, сеnter, right);
Valign -- выравнивание по вертикале (top, middle, bottom);
ColSpan -- объединение указанного количества колонок в одну;
RowSpan -- объединение указанного количества строк в одну;
Nowrap -- не переносить содержимое ячейки на следующую строку;
BgColor -- цвет фона ячейки;
BackGround -- фоновое изображение ячейки;
Width -- ширина ячейки.

<TH> Текст </TH> -- Заголовок.

Align -- выравнивание по горизонтали (blееdleft, left, сеnter, right);
Valign -- выравнивание по вертикале (top, middle, bottom);
Colspan -- объединение указанного количества колонок в одну;
RowSpan -- объединение указанного количества строк в одну;
Nowrap -- не переносить содержимое ячейки на следующую строку;
BgColor -- цвет фона ячейки;
BackGround -- фоновое изображение ячейки;
Width -- ширина ячейки.

Гипертекстовые ссылки

<A Href="http://myaddr.org"> Моя ссылка </A> - Якорь. Формирование текстовой ссылки.

Href -- содержит адрес гиперссылки.
<A Href="я гипертекстовая ссылка</A>
<A Href="а на точку "роint" в документе</A>
<A Href="http://myaddr.org"><IMG Href="http://youraddr.org/img.png"/></A> -- Рисунок в качестве ссылки.
<A Href=" на адрес электронной почты</A>.
Target -- имя фрейма на который помещать данную ссылку (Target="main");
Name -- объявление точки для ссылки внутри документа (Name="роint").

Изображения

<IMG Src="http://mysite.org/img.png" Alt="Рисунок"/> -- Формирование рисунка.

Src -- адрес файла изображения;
Alt -- текст выводимый браузером вместо изображения (изображения выключены);
Align -- способ обтекания изображения (top, texttop, middle, absmiddle, baseline, bottom, absbottom, left, right, all);
НSpace -- ширина горизонтальных полей отделяющих рисунок;
VSpace -- ширина вертикальных полей отделяющих рисунок;
Border -- ширина рамки вокруг изображения.
Width -- ширина изображения;
Height -- высота изображения;
Usemap -- имя карты данного изображения <IMG Src="mage.png" Alt="Изображения" Usemap="#map">, карта описывает активные участки изображения.

<MAP Name="map"> ... </MAP> -- Описание карты изображения.

Name -- имя карты;
<AREA Shape="rect" Coords="0,0,100,100" Href="http://mydomain.org"/> -- Описание активной области и ссылки.
Shape -- вид активной области (rect, circle, poly, default);
Coords -- координаты активной области;
Href -- адрес гиперсылки;
Nohref -- без ссылки.

Формы

<FORM Method="post" Action="http://mydomen.org"> ... </FORM> -- Формирование формы.

Method -- метод уведомления WWW-сервера (Get, Post);
Action -- адрес сервера обрабатывающего данные формы.
<INPUT Name="Name" Size="35"/> -- Поле ввода строки.
Name -- наименование поля ввода;
Type -- тип поля ввода:
"text" -- ввод текста;
"checkbox" -- флажок выбора (Checked -- выбран);
"radio" -- флажок выбора одного из группы флажков;
"password" -- поле ввода пароля (без отображения введенных символов);
"reset" -- кнопка сброса формы (Value -- надпись на кнопке);
"submit" -- кнопка завершения ввода данных (Value -- надпись на кнопке);
"hidden" -- скрытое поле (для скрытия атрибутов Name и Value и использование их в управляющих целях);
"file" -- поле ввода/выбора файла;
"button" -- кнопка;
"image" -- выполняет функцию завершения ввода по клику на изображении (Src -- содержит адрес изображения).
MaxLength -- максимальное число символов вводимое в поле (по умолчанию число символов не ограничено);
Size -- размер поля ввода (символов);
Value -- начальное значение поля ввода или имя для checkbox и radio, а также надпись на кнопках;
Src -- содержит путь к файлу изображения для кнопок;
Align -- выравнивание для (Type="image");
Checked -- флажок выбран (для Type="checkbox");
Disabled -- поле ввода неактивно/отключено.

<TEXTAREA Name="name" Cols="38" Rows="3">Текст</TEXTAREA> -- Область ввода большого количества текста.

Name -- наименование области ввода;
Cols -- количество колонок ввода;
Rows -- количество видимых строк текстового ввода.

<SELECT Name="mysel"> ... </SELECT> -- Поле выбора значений (combobox).

Multiple -- выбирать более одного наименования;
Name -- наименование объекта;
Size -- количество видимых строк списка (1 - как combobox).
<OPTION> Вариант 1 </OPTION> -- Описание элемента списка.
Selected -- элемент выбран;
Value -- значение возвращаемое формой при выборе.

Фреймы

<FRAMESET Cols="30%,*"> ... </FRAMESET> -- Формирование фреймовой структуры.

Cols -- перечень (через ",") колонок и их размеры (* - оставшееся пространство);
Rows -- перечень (через ",") строк и их размеры (* - оставшееся пространство).
<FRAMESET Cols="30%,*"> ... </FRAMESET> -- Рекурсивное вложение фреймовых структур.
<FRAME Src="index.html" Name="Left" /> -- Описание отдельно взятого фрейма.
Name -- имя фрейма (по этому имени выполняются ссылки на фрейм);
Src -- указывает на URL фрейма;
МarginWidth -- горизонтальный отступ между содержимым кадра и его границами;
МarginHeight -- вертикальный отступ между содержимым кадра и его границами;
Scrolling -- наличие полосы прокрутки во фрейме (no,yes,auto);
NoResize -- запретить изменение размера фрейма.

<NOFRAMES> Текст </NOFRAMES> -- Содержит информацию для браузеров не поддерживающих фреймы.


Каскадные таблицы стилей (CSS)

Предназначены для расширения управляемости текстовой части документа, а также для выделения стилевой составляющей документа в отдельную часть, оставив языкам HTML/XHTML/XML декларативные функции в формировании документа.


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


Синтаксис описания стилей может быть двух типов:
selector[, selector[, ...]]{ attribute:value;[atribute:value;...] } -- перечисление селекторов, для которых действует данное описание стиля.
selector selector [selector ...] { attribute:value;[atribute:value;...] } -- задание иерархии вложенности селекторов, для совокупности которых определен стиль.


При этом селектор <selector> может быть представлен следующими способами:


Спецификация языков HTML/XHTML/XML содержит определение обобщающих элементов. Этими элементами являются блочный DIV и строковый SPAN. Все другие элементы текстовой разметки можно описать через DIV и SPAN используя CSS. Собственно, только в связке с CSS элементы DIV и SPAN имеют смысл.


В блочном элементе DIV можно манипулировать границами блока (border), отступами к ней от внешнего блока (margin) и от внутреннего (padding).

Атрибуты

Границы блока

Отступы блока. Отступы от внешнего блока (margin) и от внутреннего, набивка (padding)

Обтекание и выравнивание блока

Цвет и шрифт в CSS

Управление текстом

Управление видимостью. Слои. Положения и размеры блоков

Другие атрибуты

Модификаторы тегов

Модификаторы используются для конкретизации группы свойств тега.


Текст <span>:

Гипертекстовые ссылки <a>:


JavaScript

JavaScript это язык созданный фирмой Netscape для программирования гипертекстовых страниц с исполнением программы на стороне браузера. Программирование заключается во внедрении текстов программ на языке JavaScript в тело гипертекстовых страниц и последующее исполнение этих программ браузером. Использование этого языка в создании сайтов позволяет сделать их более живыми и динамичными. Посредством языка JavaScript можно получить доступ не только к документу на котором программа размещена, но и к свойствам самого браузера. В последствии язык был стандартизирован ECMA (European Computer Manufacturers Association).


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


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

<a href="javascript:alert('Message!');">Message</a>
<input type="button" value="Press" onClick="window.alert('Warning');"/>
<input type="text" value="&{window.location.href}"/>
<HTML><HEAD>
  <SCRIPT type="text/javascript" src="http://myscript.js">
    //Мой сценарий
  </SCRIPT>
</HEAD></HTML>

Типы данных

Языком JavaScript поддерживается несколько простых типов:


Переменные в JavaScript определяются путём прямого присваивания в новую переменную (x=3) или посредством var (var x=3). Тип переменной меняется при присваивании значения другого типа. При смешанных операциях суммирования результатом является строка.

Операции

Символ Описание
Самый высокий приоритет
() Вызов функции
[] Выделение элемента массива
. Выделение элемента структуры или объединения
++ Пост-приращение
-- Пост-декремент
+ Унарный плюс
- Унарный минус
! Логическое отрицание
~ Побитовое отрицание
* Умножение
/ Деление
% Остаток от деления
+ Сумма
- Разность
<< Сдвиг влево
>> Сдвиг вправо
>>> Сдвиг вправо, с заполнением нулями
< Меньше
<= Меньше и равно
> Больше
>= Больше и равно
== Равно
!= Неравно
& Поразрядный "И"
^ Поразрядный "исключающий ИЛИ"
| Поразрядный "ИЛИ"
&& Логический "И"
|| Логический "ИЛИ"
?: Условная операция(var i=(val>=0)?val:-val;)
= Присваивание
+=, -=, *=, /=, %=, |=, &=, <=, >= Составное присваивание

Операторы

Управляющие операторы:

Запись: if(<condition>) <statements1>; [ else <statements2>; ]
Действие: Если условие <condition> истинно, выполняется выражение <statements1>, иначе <statements2>. Условие может быть любым которое можно оценить как истинное или ложное. Выражения, которые нужно выполнить, могут быть любыми включая условные. Более чем один оператор должен быть заключен в фигурные скобки, { }.
Запись: for ( <initstatement>; <condition>; <poststatement> ) <statement>;
Действие: Выполнение выражения <statement> пока условие <condition> истинно. Перед запуском цикла выполняется выражение <initstatement>. После каждой итерации цикла выполняется выражение <poststatement>.
Запись: while(<condition>) <statement>;
Действие: Выполнение выражения <statement> пока условие <condition> истинно.
Запись: for( <attr> in <obj> ) <statement>;
Действие: Выполнение выражения <statement> для всех атрибутов <attr> объекта <obj>.

Специальные операторы:

Функции

Функции - один из фундаментальных блоков JavaScript. Функция - JavaScript-процедура - набор операторов, который исполняет определенную задачу. Определяется и используется функция следующим образом:

function parWrite(str) 
{
  document.write("<HR><P>" + str)
}
parWrite(2345);


Языком предусмотрена поддержка переменного числа параметров функций. Для доступа к произвольному параметру предусмотрен запрос: <functionName>.arguments[i]. Для определения числа доступных атрибутов используется запрос: <functionName>.arguments.length. Пример функции с переменным числом параметров и её вызов приведён ниже:

function list(type)
{
  document.write("<" + type + "L>")
  for( var i = 1; i < list.arguments.length; i++ ) 
    document.write("<LI>" + list.arguments[i]+"</LI>")
  document.write("</" + type + "L>")
}
list("О", "one", 1967, "three", "etc., etc...");

События и их обработка

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


Событие/обработчик Область использования Причина возникновения Метод имитации
onAbort images Пользователь прерывает загрузку изображения.
onBlur windows, frames и все формы элементов Пользователь убирает фокус ввода. blur()
onChange текстовые поля, текстовые области Пользователь меняет значение элемента. change()
onClick button, radio button, checkboxes, submit button, reset button, links Пользователь выбирает форму или ссылку. click()
onDblClick button, radio button, checkboxes, submit button, reset button, links Двойной щелчок
onError images, windows Ошибка загрузки документа или изображения.
onFocus windows, frames, и все формы элементов. Пользователь передает фокус ввода. focus()
onKeyDown button, radio button, checkboxes, submit button, reset button, links Нажата клавиша на клавиатуре
onKeyPress button, radio button, checkboxes, submit button, reset button, links Нажата и отпущена клавиша на клавиатуре
onKeyUp button, radio button, checkboxes, submit button, reset button, links Отпущена клавиша на клавиатуре
onLoad тело документа Пользователь загружает страницу в браузер.
onMouseDown button, radio button, checkboxes, submit button, reset button, links Нажата кнопка мыши в пределах текущего элемента.
onMouseMove button, radio button, checkboxes, submit button, reset button, linksПеремещение курсора мыши в пределах текущего элемента.
onMouseOut button, radio button, checkboxes, submit button, reset button, links Пользователь перемещает указатель мыши по области.
onMouseOver button, radio button, checkboxes, submit button, reset button, links Курсор мыши наведен на текущий элемент.
onMouseUp button, radio button, checkboxes, submit button, reset button, links Отпущена кнопка мыши в пределах текущего элемента .
onMove window Перемещение окна.
onReset form Сброс данных формы ( щелчок по кнопке <input type="reset"> ). reset()
onResize window Изменение размеров окна.
onSelect input, textarea Выделение текста в текущем элементе.
onSubmit form Отправка данных формы ( щелчок по кнопке <input type="submit"> ). submit()
onUnload body, frameset Попытка закрытия окна браузера и выгрузки документа

Объекты

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


К свойствам объекта можно получить доступ двумя способами. Первый способ это иерархическое обращение (<object>.<attr>). Второй способ это доступ к объекту как к массиву (<object>[<attr>]). При доступе к элементу объекта как к массиву можно обращаться как по имени, так и по индексу.


Для адресации к текущему объекту используется ключевое слово <this>. Например при прямом описании обработчиков событий по текущему объекту:

<INPUT TYPE = "text" NAME = "age" SIZE = 3 onChange="validate(this, 18, 99)"/>


Для обращения к элементам родительского объекта можно использовать атрибут "parent" (parent.color).


Определение нового объекта производится посредством ключевого слова <function>, а создание экземпляра объекта посредством <new>. К экземпляру объекта можно свободно добавлять новые свойства, путём простого присваивания. Например:

function person(name,age,sex)
{
  this.name = name;
  this.age = age;
  this.sex = sex;
}

function setUser(user)
{
    this.user = user;
}

function book(name, author, year, publisher, person)
{ this.name = name;
  this.author = author;
  this.year = year;
  this.publisher= publisher;
  this.user = person;
  this.setUser = setUser;  //Подключение к объекту метода setUser()
}
pers1 = new person("Vasja",24,"M");
book1 = new book("JavaScript","Flenagan",2006,"O`REILY",pers1);

userNm=book1.user.name;
book.prototype.user=null;    //Установка свойства во всех экземплярах объекта book
book1.setUser("Vasja");

Встроенные типы объектов

  1. Array -- Объект массива. Массив - упорядоченный набор значений, к которым можно обратиться по индексу. Экземпляр массива можно создать двумя способами, путём указания количества элементов в массиве и прямого указания элементов:
    aObjNm = new Array(<arrayLength>);
    aObjNm = new Array(<element0>, <element1>, ..., <elementn>);
    a = new Array(4);
    for (i=0; i < 4; i++)
    {
       a[i] = new Array(4);
       for(j=0; j < 4; j++) a[i][j] = "["+i+","+j+"]";
    }

    Свойства:
    • length -- размер массива;

    Методы:

    • join() -- связывание всех элементов массива в строку, через знак запятой;
    • reverse() -- реверс порядка элементов в массиве;
    • sort() -- сортировка элементов массива в лексикографическом порядке;
    • concat() -- добавление к массиву значений;
    • splice(<beg>,<end>) -- получение части массива начиная с <beg> и заканчивая <end>;
    • push(), pop() -- работа с массивом как со стеком;
  2. Boolean -- Данный объект используется когда необходимо преобразовать не-boolean значение в boolean.
    bfalse = new Boolean(false);

    Методы:
    • valueOf() -- Значение объекта.
  3. Date -- Дата. Хранит значение даты в миллисекундах с 1 января 1970г, 00:00:00.
    today = new Date();  //Текущее время
    tmFromStr = new Date("November 3, 2007 13:54:00");   //Из строки
    tmSet = new Date(2007,11,3,13,54,00);   //Прямая установка

    Методы:
    • <mtm> getTime() -- получение времени в миллисекундах с 01.01.1970;
    • setTime(<mtm>) -- установка времени в миллисекундах с 01.01.1970;
    • <dt_part> get[Year]|[Month]|[Day]|[Days]|[Hours]|[Minutes]|[Seconds]() -- получения года, месяца, дня недели, дня месяца, часов, минут и секунд соответственно;
    • set[Year]|[Month]|[Days]|[Hours]|[Minutes]|[Seconds](<dt_part>) -- установка года, месяца, дня месяца, часов, минут и секунд соответственно;
    • <mtm> parse(dtStr) static -- получение даты путём разбора строки вида "November 3, 2007 13:54:00";
  4. Function -- Объект функции. Используется для закрепления за переменной или свойством функции какой либо процедуры. Формат определения экземпляра объекта функции: functionObjectName = new Function ([<arg1>, <arg2>, ... <argn>,] functionBody). Пример использования:
    var setBGColor = new Function("document.bgColor='antiquewhite'");
    document.form1.colorButton.onclick=setBGColor;
    <INPUT NAME="colorButton" TYPE="button" VALUE="Change background color" onClick="setBGColor()"/>

  5. Math -- Встроенный объект доступа к математическим функциям и константам. Все его свойства и методы являются статическими, а значит доступны без создания экземпляра объекта и посредством имени объекта (Math.PI).
    Свойства:
    • PI -- константа pi (3.14159276);

    Методы:

    • abs() -- абсолютное значение;
    • sin() -- синус;
    • cos() -- косинус;
    • tan() -- тангенс;
    • acos() -- арккосинус;
    • asin() -- арксинус;
    • atan() -- арктангенс;
    • exp() -- экспонента;
    • log() -- натуральный логарифм;
    • ceil() -- возвращает наименьшее целое, большее или равное аргументу;
    • floor() -- возвращает наибольшее целое, меньшее или равное аргументу;
    • min(), max() -- возвращает меньшее или большее (соответственно) из двух аргументов;
    • pow() -- возведение в степень, первый аргумент основание, второй показатель степени;
    • round() -- округляет аргумент до ближайшего целого;
    • sqrt() -- квадратный корень.
  6. Number -- Содержит статические свойства цифровых констант.
    Свойства:
    • MAX_VALUE -- наибольшее значение;
    • MIN_VALUE -- наименьшее значение;
    • NaN -- неопределенность;
    • NEGATIVE_INFINITY -- отрицательная бесконечность;
    • POSITIVE_INFINITY -- положительная бесконечность.

    Методы:

    • toFixed(<num>) -- Округление числа до указанного знака после запятой.
    • toString(<base>) -- Преобразование в строку с указанной базой (2-36).
  7. String -- Объект для работы со сроками в приложениях. Фактически данный объект представляет строковые литералы и переменные строкового типа, а значит его свойства и методы характерны для них.
    Свойства:
    • length -- длина строки;

    Методы:

    • <str> anchor() -- создает HTML-якорь;
    • <str> big() | blink() | bold() | fixed() | italics() | small() | strike() | sub() | sup() -- создает строку HTML, соответствующего вида;
    • <el> charAt(<simb>) -- возвращает символ по его номеру в строке;
    • <pos> indexOf(<substr>) | lastIndexOf(substr) -- возвращают первую (последнюю) позицию специфицированной подстроки;
    • <str> link(<addr>) -- создает гипертекстовую ссылку для адреса <addr>;
    • <array> split(<sep>) -- разбивает объект String на массив подстрок по разделителю <sep>;
    • <str> substring(<pos>,<len>) -- извлекает подстроку из строки начиная с позиции <pos> и длиной <len>;
    • <str> toLowerCase() | toUpperCase() -- возвращает строку в нижнем или верхнем регистре, соответственно.

Глобальные свойства и методы

Иерархия объектов браузера

window -- корневой объект окна;

window.location -- URL страницы данного окна, может быть изменен для перехода на другую страницу;

window.navigator -- объект браузера;
window.navigator.plugms[] -- программы браузера;
window.navigator.mimeTypes[] -- поддерживаемые MIME-типы;
window.frames[] -- фреймы окна и сами окна;

window.history -- история визитов;
window.document -- документ;

window.document.forms[] -- формы документа;

window.document.forms[].elements[] -- элементы формы;

window.document.anchors[] -- якоря (ссылки) документа;
window.document.links[] -- ссылки документа;

window.document.images[] -- изображения документа;
window.document.applets[] -- аплеты документа;
window.document.embeds[] -- ???
window.packages[] -- пакеты.
window.event -- глобальный объект событий Event

Приложение

Структура URL (Unifical resource locator)

В общем виде Unifical resource locator(URL) записывается следующим образом:

http://user:password@domain.ru:port/path/some.html?query_string

где:

http -- протокол обмена данными (Hyper Text Transfer Protocol);
user -- идентификатор пользователя;
password -- пароль;
domain.ru -- доменное имя сервера;
port -- номер TCP-порта сервера;
path -- путь в корневом каталоге сервера к ресурсу;
some.html -- ресурс;
query_string -- параметр запроса.

CER (Character Entity Reference)

CER (Character Entity Reference) - соглашение о кодировании и представлении специальных символов:

Числовой код Именная замена Символ Описание
&#034; &quot; " Кавычка
&#038; &amp; & Амперсант
&#060; &lt; < Меньше
&#062; &gt; > Больше
&#160; &nbsp;   Неразрывный пробел
&#161; &iexcl; ¡ Перевернутый восклицательный знак
&#162; &cent; ¢ Цент
&#163; &pound; £ Фунт
&#164; &curren; ¤ Валюта
&#165; &yen; ¥ Йена
&#168; &uml; ¨ Умляут
&#169; &copy; © Копирайт
&#171; &laquo; « Левая угловая кавычка
&#174; &reg; ® Зарегистрированная торговая марка
&#177; &plusmn; ± Плюс или минус
&#187; &raquo; » Правая угловая кавычка

Цвета и их коды

Цвет Код
aqua #00FFFF
navy #000080
black #000000
olive #808000
blue #0000FF
purple #800080
fuchsia #FF00FF
red #FF0000
gray #808080
silver #C0C0C0
green #008000
teal #008080
lime #00FF00
white #FFFFFF
maroon #800000
yellow #FFFF00

Единицы размеров

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

Единица Описание
100px Пикселы (100 пикселов)
50pt Типографические пункты (50 пунктов, 1pt = 0,35mm)
10em Условные единицы (10 условных единиц)
100% В процентах от опорной величины

Шрифты

Семейства шрифтов:

Шрифт Описание
serif Шрифт с засечками (Times)
sans-serif Шрифт без засечек (Arial, Helvetica)
monospace Моно-ширинный (Courier)

Литература

1. Б.П. Храмцов, С.А.Брик, А.М.Русак, А.И.Сурин; "Основы WEB-технологий."; Интернет-Университет; Москва; 2003
2. Молли Э. Хольцшлаг; "Использование HTML и XHTML. Специальный справочник."; Вильямс; Москва, Санкт-Петербург, Киев: 2003


 
There are no files on this page.[Display files/form]
There is no comment on this page. [Display comments/form]
2011-04-26 12:33:19 | Owner: Roman Savochenko | Print version | Search: