SSH (англ. Secure SHell - «безопасная оболочка») - сетевой протокол сеансового уровня, позволяющий производить удалённое управление операционной системой и туннелирование TCP-соединений (например, для передачи файлов). Схож по функциональности с протоколами Telnet и rlogin, но, в отличие от них, шифрует весь трафик, включая и передаваемые пароли. SSH допускает выбор различных алгоритмов шифрования. SSH-клиенты и SSH-серверы доступны для большинства сетевых операционных систем.

SSH позволяет безопасно передавать в незащищенной среде практически любой другой сетевой протокол. Таким образом, можно не только удаленно работать на компьютере через командную оболочку, но и передавать по шифрованному каналу звуковой поток или видео (например, с веб-камеры). Также SSH может использовать сжатие передаваемых данных для последующего их шифрования, что удобно, например, для удаленного запуска клиентов X Window System.

Большинство хостинг-провайдеров за определенную плату предоставляют клиентам доступ к их домашнему каталогу по SSH. Это может быть удобно как для работы в командной строке, так и для удаленного запуска программ (в том числе графических приложений).

Первая версия протокола, SSH-1, была разработана в 1995 году исследователем Тату Улёненом из Технологического университета Хельсинки, Финляндия. SSH-1 был написан для обеспечения большей конфиденциальности, чем протоколы rlogin, telnet и rsh. В 1996 году была разработана более безопасная версия протокола, SSH-2, несовместимая с SSH-1. Протокол приобрел ещё большую популярность, и к 2000 году у него было около двух миллионов пользователей. В настоящее время под термином «SSH» обычно подразумевается именно SSH-2, т.к. первая версия протокола ввиду существенных недостатков сейчас практически не применяется.

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

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

Управление веб-страницей с помощью событий jQuery 1. События мыши

.click()
Это событие запускается, когда вы нажимаете и отпускаете кнопку мыши. Применяется к ссылкам, картинкам, кнопкам, абзацам, блокам и т.д.

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

.mousedown()
Событие происходит во время нажатия кнопки мыши, например, при перетаскивании элементов.

.mousemove()
Событие запускается, когда вы передвигаете указатель мыши по странице.

.mouseout()
Событие запускается, когда вы уводите указатель мыши с элемента.

.mouseover()
Событие запускается, когда вы проводите указателем мыши по элементу (аналогично использованию псевдокласса:hover).

.mouseup()
Событие активизируется, когда вы отпускаете кнопку мыши.

2. События документа/окна

.load()
Событие запускается, когда браузер загрузит все файлы веб-страницы: html-файлы, внешние css и javascript файлы, медиа-файлы. Это может быть неудобно в случае если веб-страница содержит большое количество файлов. Для решения данной проблемы можно воспользоваться функцией ready() , которая запускает скрипты сразу после загрузки html-кода.

.resize()
Событие запускается, когда вы изменяете размер окна браузера.

.scroll()
Событие запускается, когда вы используете полосы прокрутки, либо прокручиваете веб-страницу с помощью колесика мыши, или же используете для этих целей клавиши клавиатуры (pg up, pg dn, home, end).

.unload()
Событие запускается, когда вы собираетесь покинуть страницу, щелкая по ссылке для перехода на другую страницу, закрываете вкладку страницы или же окно браузера.

3. События форм

.blur()
Событие запускается, когда поле формы выводится из фокуса, т.е. вы ввели данные в поле формы и перешли на другое.

.change()
Событие запускается при изменении статуса поля формы, например при выбора пункта из выпадающего меню.

.focus()
Событие запускается при переходе в поле формы, щелкая в нем кнопкой мыши или клавишей табуляции.

.reset()
Событие позволяет вернуть форму в первоначальное состояние, отменив сделанные изменения.

.select()
Событие запускается, когда вы выделяете текст внутри текстового поля формы.

.submit()
Событие запускается, когда вы отправляете заполненную форму с помощью щелчка по кнопке «Отправить» или нажатия клавиши «Enter», когда курсор помещен в текстовом поле.

4. События клавиатуры

.keydown()
Событие запускается при нажатии клавиши, перед событием keypress.

.keypress()
Событие запускается, когда вы нажимаете на клавишу, до тех пор, пока вы не отпустите клавишу.

.keyup()
Событие запускается, когда вы отпускаете клавишу.

5. События jQuery

.hover()
Данная функция работает как событие, позволяя одновременно решить две задачи, связанные с событием наведения указателя мыши и событием снятия указателя мыши в отношении выбранного объекта. Основная структура функции:
$("#селектор").hover(функция1, функция2);

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

6. Объект события

При запуске события браузер сохраняет информацию о нём в объекте события . Объект события содержит данные, собранные в момент, когда событие произошло. Обработка события происходит с помощью функции, при этом объект передается функции как аргумент — переменная evt (в качестве имени переменной можно использовать также event или просто e). Чтобы получить доступ к аргументу, необходимо добавить к функции имя параметра. В пределах данной функции можно получить доступ к различным свойствам, используя точечный синтаксис. Когда функция вызывается, то объект события сохраняется в переменной evt .
Объект события имеет различные свойства, наиболее распространённые из них описаны в нижеприведенной таблице.

Таблица 1. Свойства объекта события Свойство Описание

pageX	Расстояние (px) от указателя мыши до левого края окна браузера
pageY	Расстояние (px) от указателя мыши до верхнего края окна браузера
screenX	Расстояние (px) от указателя мыши до левого края монитора
screenY	Расстояние (px) от указателя мыши до верхнего края монитора
shiftKey	TRUE, если когда происходило событие, была нажата клавиша SHIFT
which	Используется для определения числового кода нажатой клавиши (вместе с shiftKey)
target	Означает, что по объекту события щелкнули кнопкой мыши (например, для события click())
data	Объект, использованный с функцией bind() для передачи данных функции, управляющей событием

Продолжаем изучать jQuery, и теперь приступим к изучению такого раздела, как обработка событий в jQuery.

События документа
При взаимодействии пользователя с веб-страницей происходят события. События - это своего рода извещения системы о том, что пользователь выполнил какое-либо действие или внутри самой системы возникло некоторое условие. События возникают в результате щелчка на элементе, перемещения мыши, нажатия клавиши клавиатуры, изменения размеров окна, окончания загрузки веб-страницы и т.д. Зная, какие события может генерировать тот или иной элемент веб-страницы, можно написать функцию для обработки этого события. Например, при отправке данных формы возникает событие onsubmit. При наступлении этого события можно проверить данные, введенные пользователем, и, если они не соответствуют ожидаемым, прервать отправку данных.

В самом начале книги мы уже рассматривали возможность выполнения скриптов сразу после формирования структуры документа, не дожидаясь загрузки других элементов. Как вы уже знаете, обработать это событие можно с помощью метода ready () .

alert("Документ доступен для выполнения скриптов");
});

Если необходимо выполнить какие-либо действия только после полной загрузки самого HTML-документа, а также всех других элементов (например, изображений), то можно воспользоваться методом load (). Синтаксис метода таков.

load{Функция обратного вызова)

function {[Объект event]) {
// ...
}

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

$(window).load(function(е) {
alert("Документ полностью загружен");
alert("Тип события " + е.type);
});

В результате выполнения получим два сообщения.

Документ полностью загружен
Тип события load

Для выполнения каких-либо действий непосредственно перед выгрузкой документа предназначен метод unload (). Метод имеет следующий синтаксис.
unload(Функция обратного вызова)

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

function ([]) {
// ...
}
Выведем сообщение перед выгрузкой документа.
$(window).unload(function()
{ alert("Заходите еще !");
});

В этом разделе рассмотрим еще два полезных метода.

resize (Функция обратного вызова) - выполняется при изменении размера окна.

scroll (Функция обратного вызова) - выполняется при прокручивании содержимого элемента страницы, документа, окна или фрейма.

В параметре Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции([Объект event]) {
// ...
}

Обработать прокрутку содержимого окна и вывести сообщение можно так.
$(window).scroll(function() {
alert("Прокрутка содержимого окна");
});

В качестве примера использования метода resize () получим ширину и высоту окна после изменения его размера (листинг 6.1).

Листинг 6.1. Вывод ширины и высоты окна при изменении размера

Вывод ширины и высоты окна при изменении
размера

При изменении размера окна в элементе с идентификатором divl будет выведена ширина и высота окна.

Метод error (Функция обратного вызова) вызывается при наличии ошибки на странице или в коде JavaScript. В параметре Функция обратного вызова указывается ссылка на функцию следующего формата.

function Название функции([Сообщение[, URL[, Номер строки]]]){
// ...
}

Если ошибка произошла в объекте window, то в функции обратного вызова будут доступны три параметра:

Сообщение - текст, описывающий ошибку;
URL - полный URL-адрес документа с ошибкой;
Номер строки - номер строку с ошибкой.

Чтобы скрыть ошибки JavaScript от пользователей, необходимо внутри функции обратного вызова вернуть значение true.

$(window).error(function(){
return true;
});

С помощью метода error () можно обработать ошибку загрузки изображения.

$("img").error(function() {
$(this).attr("src", "noimage.gif");
});

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

События мыши в jQuery

Для обработки событий мыши в jQuery предназначены следующие методы.

Click ([Функция обратного вызова]) - выполняется при щелчке на элементе или веб-странице. Если параметр не указан, то это позволит имитировать щелчок на элементе. Событию onclick предшествуют два события: оnmousedown и onmouseup. Выведем сообщение после щелчка на любой кнопке.
$ ("ibutton") .click(function() {
});

Toggle () - позволяет чередовать несколько функций при щелчке на элементе или веб-странице. Функции вызываются по очереди. При первом щелчке вызывается первая функция, при втором - вторая, при третьем - третья. Если третья функция не определена, то вызывается опять первая функция, и т.д. Метод toggle () имеет следующий формат.
toggle(,
[,
])

Сделаем цвет текста абзаца меняющимся после каждого щелчка мыши.
$("р").toggle
(function() {
$(this).css("color", "red");
function() {
$(this).css("color", "blue");
function() {
$(this).css("color", "green");
}
) .click();

Попробуйте щелкнуть несколько раз на абзаце. Цвет текста будет последовательно меняться с красного на синий, с синего - на зеленый, с зеленого - опять на красный. Обратите внимание на последнюю строку примера. После назначения обработчика события вызывается событие onclick с помощью метода click () без параметров. По этой причине с самого начала цвет абзаца будет красным.

Dblclick([Функция обратного вызова]) - выполняется при двойном щелчке на элементе или веб-странице. Если параметр не указан, то это позволит имитировать двойной щелчок на элементе. Событию ondblclick предшествуют три события: onmousedown, onmouseup и onclick. Выведем сообщение при двойном щелчке на любом абзаце.
$("р").dblclick(function() {
alert("Вы сделали двойной щелчок");
});

mousedown (Функция обратного вызова) - выполняется при нажатии кнопки мыши на элементе или странице. Событие onmousedown возникает перед событиями onmouseup и onclick.

mouseup (Функция обратного вызова) - выполняется при отпускании ранее нажатой кнопки мыши. Событие onmouseup возникает между событиями onmousedown и onclick. Выведем сообщения при нажатии и отпускании кнопки мыши над абзацем.

$("р").mousedown(function() {
$("#divl").append("Событие onmousedown" + "
");
}).mouseup(function() {
$("#divl").append("Событие onmouseup" + "
");
});
Щелкни меня

Mousemove (Функция обратного вызова) - выполняется при любом перемещении мыши. Выведем сообщение при перемещении курсора над абзацем.

$("р") .mousemove(function() {
$("#divl").append("Событие onmousemove" + "
");
});

mouseover (Функция обратного вызова) - выполняется при наведении курсора мыши на элемент.

mouseout (Функция обратного вызова) - выполняется при выходе курсора мыши за пределы элемента. При наведении курсора на ссылку сделаем цвет ссылки красным и выведем сообщение, а при уходе курсора со ссылки - изменим ее цвет на черный и выведем сообщение.

$("а ") .mouseover(function() {
$(this).css("color", "red");
$("#divl").append("Событие onmouseover" + "
");
}).mouseout(function() {
$(this) .css ("color", "black");
$("#divl").append("Событие onmouseout" + "
");
}>;

Hover () - позволяет обработать наведение и уход курсора с элемента с помощью одного метода. Имеет следующий формат.
hover(Функция обратного вызова для события onmouseover, Функция обратного вызова для события onmouseout)

Переделаем наш предыдущий пример и используем метод hover ().

$("а").hover(function() {
$ (this) .css("color", "red");
$("#divl").append("Событие onmouseover" + "
"); },
function() {
$(this).css("color", "black");
$("#divl").append("Событие onmouseout" + "
");
});

Использование метода hover () имеет еще одно преимущество. Если внутри блока существует другой блок, то отдельные функции будут вызываться при входе во внутренний блок, а также при выходе из него. При использовании метода hover () эти перемещения будут игнорироваться (листинг 6.2).

Листинг 6.2. Особенности использования метода hover ()

Особенности использования метода hover()






.cls1 {

padding:30px;
}
.cls2 {

}



Отдельные обработчики :



Строка 1

Строка 2



Функция hover():



Строка 1

Строка 2

Для первого вложенного блока мы определили отдельные обработчики событий. Если переместить курсор мыши через весь блок посередине, получим следующую последовательность событий.
Событие onmouseover
Событие onmouseout
Событие onmouseover
Событие onmouseout
Событие onmouseover
Событие onmouseout

Для второго вложенного блока обработчики событий назначены с помощью метода hover (). При том же самом действии мы получим только два события.
Событие onmouseover
Событие onmouseout

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

// ...
}

Элемент, вызвавший событие, доступен внутри функции через указатель this. Обратите внимание на то, что указатель this ссылается на элемент объектной модели документа, а не на элемент коллекции jQuery. Если в параметре Объект event указана переменная, то через нее можно обратиться к свойствам объекта event. Напишем обработчик щелчка мыши для двух элементов сразу. При нажатии выведем название тега в элементе с идентификатором divl.

$("р , div").click(function(е ) {
$("#divl")
.append("Элемент " + e.srcElement.tagName + "
");
});

События клавиатуры в jQuery

Для обработки событий клавиатуры в jQuery предназначены следующие методы.

keydown (Функция обратного вызова) - выполняется при нажатии клавиши клавиатуры.

keyprcss (Функция обратного вызова) -выполняется при нажатии клавиши клавиатуры. Аналогичен методу keydown (), но возвращает значение кода символа в кодировке Unicode. Событие генерируется постоянно, пока пользователь не отпустит клавишу.

keyup (Функция обратного вызова) - выполняется при отпускании ранее нажатой клавиши клавиатуры.

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

function Название функции([Объект event]) {
// ...
}

Если в параметре Объект event указана переменная, то через нее можно обратиться к свойствам объекта event. Например, чтобы получить код нажатой клавиши, можно воспользоваться свойством key Code. В качестве примера получим код нажатой клавиши и продемонстрируем последовательность прохождения событий (листинг 6.3).

Листинг 6.3. События клавиатуры

События клавиатуры

Выделите текстовое поле и нажмите какую-либо клавишу на клавиатуре. Например, нажмем клавишу А при русской раскладке клавиатуры. В итоге получим следующее сообщение.
keydown 70
keyprcss 1072
keyup 7 0

События формы в jQuery

Для обработки событий формы предназначены такие методы.

focus ([Функция обратного вызова]) - выполняется при получении фокуса элементом формы. Если параметр не указан, то элемент получит фокус ввода.

blur ([Функция обратного вызова]) - выполняется при потере фокуса элементом формы. Если параметр не указан, то элемент потеряет фокус ввода.

change {Функция обратного вызова) - выполняется при изменении данных в текстовом поле и перемещении фокуса на другой элемент формы либо при отправке данных формы.

submit ([Функция обратного вызова]) - выполняется при отправке данных формы. Если параметр не указан, то форма будет отправлена.

select ([ Функция обратного вызова ]) - выполняется при выделении содержимого элемента. Если параметр не указан, то содержимое элемента будет полностью выделено.

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

function Название функции([Объект event]) {
// ...
}

Элемент, вызвавший событие, доступен внутри функции через указатель this. Обратите внимание на то, что указатель this ссылается на элемент объектной модели документа, а не на элемент коллекции jQuery. Если в параметре Объект event указана переменная, то через нее можно обратиться к свойствам объекта event.

Продемонстрируем обработку различных событий формы (листинг 6.4).

События формы









Пункт 1
Пункт 2
Пункт 3
Пункт 4

Итак, мы создали форму с тремя элементами. При выборе пункта из списка будет отображено сообщение со значением выбранного пункта. Если выделить текстовое поле, то изменится цвет фона, а если убрать фокус с поля, то цвет фона опять станет белым. Щелчок на кнопке Отправить вызывает отображение диалогового окна, с помощью которого можно прервать отправку данных формы. Под формой расположены четыре кнопки. Первая кнопка позволяет выделить содержимое текстового поля. После выделения будет отображено сообщение о выделении фрагмента, так как мы определили соответствующий обработчик. Такое же сообщение можно получить, если с помощью мыши выделить фрагмент в поле. Вторая кнопка позволяет установить фокус ввода на текстовое поле, а третья - его снять. И, наконец, четвертая кнопка предназначена для отправки данных формы. Щелчок на этой кнопке приводит к выводу диалогового окна для подтверждения отправки данных.

Универсальные обработчики событий в jQuery

В предыдущих разделах мы рассмотрели обработчики конкретных событий. Библиотека jQuery позволяет также назначить обработчики для разных событий (в том числе и собственных событий) одним методом. Для назначения, вызова и удаления обработчиков предназначены следующие методы.

Bind(Тип события[, Данные] , Функция обратного вызова) - позволяет назначить обработчик для всех элементов коллекции. В параметре Тип события могут быть указаны следующие значения:
события документа: load, unload, resize, scroll, error;
события мыши: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave;
события клавиатуры: keydown, keyprcss, keyup;
события формы: focus, blur, change, select, submit.

Почти все эти события мы уже рассматривали в предыдущих разделах. Например, назначить обработчик события click для всех кнопок можно так.

$ (":button") .bind("click", function()
{ alert("Вы нажали на кнопку ");
});

Нерассмотренными остались два события мыши. Событие mouseenter выполняется при наведении курсора мыши на элемент, а событие mouse leave - при уходе курсора мыши за пределы элемента. Использование этих событий отличается от обработки событий mouseover и mouseout. Если внутри блока существует другой блок, то событие mouseover будет вызываться при входе во внутренний блок, а событие mouseout - при выходе из него. При использовании событий mouseenter и mouseleave эти перемещения будут игнорироваться (листинг 6.5).

Листинг 6.5. События mouseenter и mouseleave

События mouseenter и mouseleave






.cls1 {
border:2px solid black; background-color:green;
padding:30px;
}
.cls2 {
border:2px solid black; background-color:silver;
}



События mouseover и mouseout:



Строка 1

Строка 2



События mouseenter и mouseleave:



Строка 1

Строка 2

Для первого вложенного блока мы определили обработчики событий mouseover и mouseout. Если переместить курсор мыши через весь блок посередине, то получим следующую последовательность событий.
Событие mouseover
Событие mouseout
Событие mouseover
Событие mouseout
Событие mouseover
Событие mouseout

Для второго вложенного блока назначены обработчики событий mouseenter и mouseleave. При том же действии получим только два события.
Событие mouseenter
Событие mouseleave

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

$("а ").bind("mouseenter mouseleave", function() {
$(this).toggleClass("clsl");
});

Кроме того, с помощью метода bind () можно назначать собственные события. Вызов собственных событий осуществляется при помощи методов trigger () и triggerHandler (). Создадим собственное событие, а затем вызовем его.

$("#divl").bind("myEvent", function() {
alert("Обработка собственного события");
});
$("#divl"). trigger ("myEvent11) ; // Вызов события

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

function Название функции([Объект event[, Аргументы] ]) {
// ...
}

$ ("#divl") .bind ("myEvent11, function(e, msg) {

});
$("#divl").trigger("myEvent", ["Наше сообщение"]);

С помощью необязательного параметра Данные можно передать значения в функцию-обработчик. Для этого передаваемые параметры и значения должны быть указаны следующим образом.
{
Параметр1: «Значение1",
Параметр2: "Значение2",
Параметры: "Значение"
}

Получить значение переданного параметра внутри функции можно так.
3начение = Объект event.data.Параметр

Рассмотрим пример.

function f_click(e) {
var str = "msgl = 11 + e.data.msgl + "\n";
str += "msg2 = 11 + e.data.msg2; alert(str);
return false;
}
$ ("a") .bind(
"click", // Событие
{msgl: "Сообщение 1", msg2: "Сообщение 2"}, // Наши данные
f_click // Ссылка на функцию
) ;

msgl = Сообщение 1
msg2 = Сообщение 2

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

alert("Первый обработчик ");
});
$("#btnl").bind("click", function() {
alert("Второй обработчик ");
});

При щелчке на элементе с идентификатором btnl будут последовательно выведены два сообщения.
Первый обработчик
Второй обработчик

One(Тип события[, Данные], Функция обратного вызова) - позволяет назначить обработчик для всех элементов коллекции. Метод идентичен bind (), но событие срабатывает только один раз, после чего обработчик будет автоматически удален.
$("ibutton").one("click", function()
{ alert("Вы щелкнули на кнопке");
});

После первого щелчка на кнопке будет выведено указанное сообщение, а после второго обработчик вызван уже не будет.

Trigger (Тип события[, Массив данных]) - вызывает обработчик указанного события.
$(document).bind("click", function() {
// Обработчик alert("Событие onclick");
});
$(document).trigger("click"); // Вызываем обработчик

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

$("#divl").bind("myEvent", function(e, msgl, msg2) {
$ ("#div2") . append (" Событие myEvent. " + msgl + " 11 +
msg2) .append("br");
});
$("p").click(function() {
$("#divl").trigger("myEvent", [“Сообщение1”, “Сообщение2” ]);
});

Нажмите здесь

В результате выполнения этого кода получим сообщение.
Событие myEvent. Сообщение1 Сообщение2

TгiggerHandlег (Тип события[, Массив данных]) - вызывает обработчик указанного события. В отличие от метода trigger (), событие вызывается только для первого элемента коллекции. Кроме того, при использовании метода tгiggerHandlег() не происходит действие по умолчанию.
$("form").bind("submit", function(e, msg) {
if (msg) {
alert("Форма отправлена не будет. " + msg);
}
else {
alert("Форма будет отправлена");
});
$(":button").bind("click", function() {
$("form") . triggerHandler ("submit”, ["Наши данные"]) ;
});