C# Web. Занятие 02

Темы лекции: JavaScript, Ajax, jQuery.

Практическое задание: JavaScript, Ajax, jQuery.

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

Разработка Веб-приложений на платформе Microsoft .NET Framework.

Занятие 2

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

JavaScript

JavaScript - предназначен для написания сценариев для активных HTML-страниц. Язык JavaScript не имеет никакого отношения к языку Java.Java разработан фирмой SUN. JavaScript - фирмой NetscapeCommunication Corporation. Первоначальное название - LiveScript.После завоевания языком Java всемирной известности LiveScript изкоммерческих соображений переименовали в JavaScript.

JavaScript не предназначен для создания автономных приложений.Программа на JavaScript встраивается непосредственно в исходныйтекст HTML-документа и интерпретируется брaузером по мере загрузкиэтого документа. С помощью JavaScript можно динамически изменятьтекст загружаемого HTML-документа и реагировать на события,связанные с действиями посетителя или изменениями состоятиядокумента или окна.

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

http://www.slideshare.net/IgorShkulipa


Тег <script>

Сценарий JavaScript встраивается в HTML-документ с помощью тега<script>.

<script type="text/javascript">



</script>

Текст сценария оформляется как комментарий, чтобы не было проблем упосетителей, брaузеры которых не понимают JavaScript. Кроме того ксимволам, завершающим комментарий добавляется еще два символа"/", т.к. некоторые браузеры рассматривает строку, состоящую толькоиз символов "-->", как ошибочную.



Переменные

Переменные в JavaScript объявляются с помощью ключевого слова var.При объявлении тип переменной не указывается. Этот типприсваивается переменной только тогда, когда ей присваиваетсякакое-либо значение.

var Buf="";

var i=100;

var f=1.234;

Числа в строки интерпретатор JavaScript преобразует автоматически. Дляпреобразования строк в числа используют специальные функцииparseInt и parseFloat.

Преобразования типов:

var myVar = "3.14159",

str = ""+ myVar,// в string

int = ~~myVar, // в integer

float = 1*myVar, // во float

bool = !!myVar, // в boolean

array = [myVar]; // в array



Операции

Унарные операции

- Изменение знака на противоположный

!Дополнение. Используется для реверсирования значения логических переменных

++Увеличение значения переменной. Может применяться и как префикс, и как суффикс

--Уменьшение значения переменной. Может применяться и как префикс, и как суффикс

Бинарные операции

- Вычитание

+ Сложение

* Умножение

/ Деление

% Остаток от деления



Операции

Побитовые операции

Операции сдвига

& И

| ИЛИ

^ исключающее ИЛИ

~ НЕ

>> Сдвиг вправо

<< Сдвиг влево

>>>Сдвиг вправо с заполнением освобождаемых разрядов нулями



Операции

Условные операции

> Больше

>= Больше или равно

< Меньше

<= Меньше или равно

== Равно

!= Не равно

|| Логическое ИЛИ

&& Логическое И

Другие операции

. Доступ к полю объекта. ( document.write(Buf); )

[ ] Индексирование массива ( dim[i] )

( )Изменение порядка вычислений или передача параметров функции

, Разделение выражений в многократном вычислении



Операции присваивания

= Присваивание

+= Сложение или слияние строк

–= Вычитание

*= Умножение

/= Деление

>>= Сдвиг вправо

<<= Сдвиг влево

>>>=Сдвиг вправо с заполнением освобождаемых разрядов нулями

&= И

|= ИЛИ

^= Исключающее ИЛИ



Условная операция

«? :»

Форма записи:

"условие" ? "выражение 1" : "выражение 2";

Если условие истинно, то выполняется выражение 1, иначевыполняется выражение 2.



Условный оператор

Если <условие>==true, то выполнится <оператор1> , в ином случае -<оператор2>.

Блок <else> может быть опущен. В таком случае при истинном условиивыполнится <оператор1> , а за ним – оператор, следующий после

условного.

Вместо <оператор1> и <оператор2> может использоваться любойоператор, включая составной оператор ({}), операторы циклов,операторы выбора и условный, вызова функции, пустой оператор (;)

и др.

10

if (условие)

оператор1;

else

оператор2;



Оператор выбора

Синтаксис выбирающего оператора допускает пустой составной оператори пустой оператор в качестве операторов, следующих за условиемвыбирающего оператора:

switch (i) ;

switch (j) {}

switch (r) i++;

Общий вид оператора выбора:

switch (условие)

{

case <константное выражение 1>: <оператор 1>;

case <константное выражение 2>: <оператор 2>;

...

case <константное выражение N>: <оператор N>;

default: <оператор N+1>;

}



Схема выполнения оператора switch

● вычисляется выражение в круглых скобках после оператора switch(предварительная стадия);

● это значение последовательно сравнивается со значениямиконстантных выражений за метками case (стадия определенияначальной точки выполнения оператора);

● если значения совпадают, управление передаётся соответствующемупомеченному оператору (стадия выполнения);

● если ни одно значение не совпадает и в теле оператора case естьоператор, помеченный меткой default, управление передаётся этомуоператору (стадия выполнения);

● если ни одно значение не совпадает, и в теле оператора case нетоператора, помеченного меткой default, управление передаётсяоператору, следующему за оператором switch (стадия выполнения).

На стадии выполнения все операторы от точки выполнения и до конца

тела оператора выполняются независимо от меток, если только какой-

нибудь из операторов не передаст управление за пределы оператора

выбора.



Оператор цикла «for»

for (<выражение1>; <выражение2>; <выражение3> )

<оператор>;

for (<переменная> in <объект>)

<оператор>;

Оператор цикла «for-in»

while (<условие>)

{

<оператор>

}

Оператор цикла с условием



Операторы break и continue

Оператор прекращения. Прерывает выполнение текущего блока.

break;

Оператор продолжения. Прерывает выполнение текущей итерации цикла и переходит к следующей.

continue;



Обработка исключений

try

{

dddocument.write(‘Hello, JavaScript');

}

catch (er)

{

document.write(er);

}

finally

{

document.write(‘Errors checked.');

throw ‘New exception thrown.';

}



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

Оператор delete. С помощью оператора delete можно удалить указанный элемент.Оператор возвращает true если удаление указанного элемента прошло успешно,и false если нет..

delete x;

Оператор in. С помощью оператора in можно узнать имеется ли произвольноесвойство у указанного объекта или массива. Возвращает true если указанноесвойство есть, и false, если нет..

1 in set;

Оператор instanceof сверяет тип объекта с переданным значением. Если онисовпадают, метод возвращает true, если нет false.

g instanceof Array

Оператор typeof возвращает тип указанного объекта.

var fio={surname:'Пупкин',name:'Василий',middle:'Борисович'};

alert(typeof fio);



События

События - это функции, которые могут быть привязаны к элементамHTML страниц.

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

Примеры активирующих действий JavaScript:

• Щелчок мыши (событие onclick);• Нажатие клавиши (onkeypress);• Отправление формы (onsubmit);• Наведение курсора мыши на элемент (onmouseover) или

выведение курсора мыши за пределы границ элемента(onmouseout);

• Полная загрузка страницы или картинки (onload);• Изменение содержимого элемента, например содержимого

текстового поля формы (onchange).



Функции JavaScript

Все функции JavaScript рекомендуется помещать в контейнер <HEAD>...</HEAD>.Тем самым вы обеспечите их гарантированную доступность при обработке HTML-документа.

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script>



</script>

</head>

<body>

<img id="img1" src="1.png"

onmouseover="changeBackground('img1', 'Red');"

onmouseout="changeBackground('img1', 'Green');"/>

</body>

</html>



Результат



Объекты JavaScript

Язык JavaScript является объектно-ориентированным. Объекты JavaScriptпредставляют собой наборы свойств и методов. Можно сказать, чтосвойства объектов - это данные, связанные с объектом, а методы -функции для обработки данных объекта.

В языке JavaScript имеется три вида объектов: встроенные объекты,объекты брaузера и объекты, создаваемые программистом.

JavaScript поддерживает следующий набор встроенных объектов: Array,Boolean, Date, Global, Function, Math, Number, String.

Одной из особенностей языка является реализация прототипногонаследования.



JSONJSON (JavaScript Object Notation) — текстовый формат обмена данными,

основанный на JavaScript.

JSON строится на двух структурах:• Коллекция пар ключ/значение. В разных языках, эта концепция

реализована как объект, запись, структура, словарь, хэш, именованныйсписок или ассоциативный массив.

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

В JSON используются их следующие формы:• Объект — это неупорядоченное множество пар имя/значение, заключённое

в фигурные скобки { }. Между именем и значением стоит символ ": ", апары имя/значение разделяются запятыми.

• Массив (одномерный) — это множество значений, имеющих порядковыеномера (индексы). Массив заключается в квадратные скобки [ ]. Значенияотделяются запятыми.

• Значение может быть строкой в двойных кавычках, числом, значением trueили false, объектом, массивом, или значением null. Эти структуры могутбыть вложены друг в друга.

• Строка — это упорядоченное множество из нуля или более символовюникода, заключенное в двойные кавычки, с использованием escape-последовательностей начинающихся с обратной косой черты (backslash).Символы представляются простой строкой.

• Имя — это строка.



Примеры JSON

Пример 1. Слайд 16.

var fio={surname:‘Пупкин',name:‘Василий',middle:‘Борисович'};

Пример 2. Wikipedia.

{

"firstName": "Иван",

"lastName": "Иванов",

"address": {

"streetAddress": "Московское ш., 101, кв.101",

"city": "Ленинград",

"postalCode": 101101

},

"phoneNumbers": [

"812 123-1234",

"916 123-4567"

]

}



ООП в JavaScript

В JavaScript реализовано наследование на прототипах.

Объекты наследуют не от классов, а от объектов. Наверху цепочкивсегда находится объект встроенного класса Object. Но, в отличии,например от C# Object – это конкретный объект, а не класс.

Реализуется наследование через неявную ссылку одного объекта надругой, который называется его прототипом и в спецификацииобозначается [[prototype]]. Это свойство обычно скрыто отпрограммиста.

Также существует свойство с похожим названием prototype (безквадратных скобок) - оно вспомогательное и указывает, откуда братьпрототип при создании объекта.

В реализации JavaScript, используемой в браузерах Firefox/Mozilla и т.п.,ссылка [[prototype]] является обычным свойством объекта:__proto__. В этих браузерах ее можно читать и изменять.



Создание объектов

Любая функция, кроме некоторых встроенных, может создать объект.

Для этого ее нужно вызвать через директиву new.

Например, функция FullName ниже создаст новый объект.

function FullName (name, surname, middle) {

this.name = name;

this.surname = surname;

this.middle = middle;

}

var fullName= new FullName (“Ivan“, “Ivanov”, “Ivanovich”);



Наследование от прототипа

var Name = { name: "", gender:""}; //JSON-создание объектов

function Initials(name, middle){

this.name = name;


}

function SurnName(name, surname){

this.name = name;


}

function TestIt(name, surname, middle) {

Initials.prototype = Name;

SurnName.prototype = Name;

var initials = new Initials("Ivan", "Ivanovich");

var surnname = new SurnName("Petr", "Petrov");

Name.gender = "male";

alert(initials.name + " " + initials.middle + " " + initials.gender);

alert(surnname.name + " " + surnname.surname + " " + surnname.gender);

}



Добавление методов объектам

var Name = { name: "", gender:""};

function Initials(name, middle){

this.name = name;


}

function SurnName(name, surname){

this.name = name;


this.alertme = function () {

alert(this.name + " " + this.surname + " " + this.gender);

}

}

function TestIt(name, surname, middle) {

Initials.prototype = Name;

SurnName.prototype = Name;

var initials = new Initials("Ivan", "Ivanovich");

var surnname = new SurnName("Petr", "Petrov");

Name.gender = "male";

alert(initials.name + " " + initials.middle + " " + initials.gender);

surnname.alertme();

}



Массивы в JavaScript

Массив в JavaScript является экземпляром встроенного объекта Array. Нумерацияэлементов в массиве начинается с нуля.

var a1 = new Array();

var a2 = new Array(3);

var a3 = new Array(1, 2, 3);

• a1 - массив, в котором нет ни одного элемента.• a2 - массив из трех элементов с неопределенным значением.• a3 - массив, заданный списком своих элементов.

Число элементов в массиве можно изменить, просто задав значениесоответствующего элемента:

a3[5]= 6;

Типы данных элементов массива в JavaScript могут быть различными:

a3[3]=4; a3[4]=“5”; a3[7]=false;

Для создания многомерного массива каждому элементу массива нужно присвоитьдругой массив:

var myArray = new Array(2);

for (i=0; i<3; i++) {

myArray[i] = new Array(2);

}



Свойства и методы Array

Свойство:

• length. Число элементов массива.

Методы:

• concat( ). Слияние двух массивов. Через параметр передается имявторого массива: c=a.concat(b);

• join( ). Слияние элементов массива в строку. Через параметрпередается разделитель элементов. По умолчанию разделителемслужит запятая. s=c.join('; ');

• reverse( ). Меняет порядок элементов массива на обратный.

• slice( ). Выделяет часть из массива. В качестве параметровпередаются значения начального и конечного индексов, междукоторыми происходит выделение. При этом элемент массива сконечным индексом в результат не войдет. Следует помнить, чтоиндексы отсчитываются от нуля.



Объект DateС помощью методов встроенного объекта Date можно выполнять различные действия

с часами компьютера. Для использования большинства методов объекта Dateнеобходимо создать экземпляр этого объекта:

var today = new Date();

Методы объекта Date

• getYear. Возвращает год:• getMonth. Возвращает номер месяца. Январь - это 0, февраль - 1 и т.д.• getDate.Возвращает значение календарной даты в диапазоне от 1 до 31:• getDay. Возвращает номер дня недели. Воскресенье - 0, для понедельник -

1 и т.д.)• getHours. Возвращает количество часов, прошедших после полуночи.• getMinutes. Возвращает количество минут, прошедших с начала часа.• getSeconds. Возвращает количество секунд, прошедших с начала минуты.• getTime. Возвращает количество миллисекунд, прошедших с 00 часов 00

минут 1 января 1970 года.• getTimeZoneOffset. Возвращает смещение локального времени

относительно времени по Гринвичу в миллисекундах.• parse. Возвращает количество миллисекунд, прошедших с 00 часов 00

минут 1 января 1970 года по время, указанное в параметре функции.• UTC. Преобразовывает дату, заданную параметрами метода, в количество

миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года.



Методы объекта Date

• setYear. Устанавливает год в объекте класса Date.

• setMonth. Устанавливает номер месяца.

• setDate. Устанавливает значение календарной даты в диапазоне от 1до 31.

• setDay. Устанавливает номер дня недели.

• setHours. Устанавливает количество часов, прошедших послеполуночи.

• setMinutes. Устанавливает количество минут, прошедших с началачаса.

• setSeconds. Устанавливает количество секунд, прошедших с началаминуты.

• setTime. Устанавливает дату, соответствующую количествумиллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года:

• toGMTString. Преобразует дату в строку, записанную в стандартномформате времени по Гринвичу: "Sat, 21 Apr 2001 14:00:00 GMT"

• toLocaleString. Преобразует дату в строку, записанную в стандартномформате локального времени: "04/16/2001 18:00:00".



Объекты брaузера

К объектам браузера относятся такие объекты, как окно - window идокумент - document.

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

Свойства объекта window

• name. Имя окна, указанное при его открытии методом open, атакже в атрибуте TARGET тега <A> или в атрибуте NAME тега<FORM>.

• self, window. Синонимы имени окна. Относятся к текущему окну.• top. Синоним имени окна. Относится к окну верхнего уровня.• parent. Синоним имени окна. Относится к окну, содержащему

набор фреймов.• frames. Массив всех фреймов данного окна.• length. Количество фреймов в родительском окне.• status. Текущее сообщение, отображаемое в строке состояния

окна брaузера.



Методы объекта window

• alert. Отображение диалоговой панели Alert с сообщением и кнопкой OK. Черезпараметр передается сообщение, отображаемое в диалоговой панели. После вызоваэтого метода выполнение сценария задерживается до тех пор, пока посетитель ненажмет кнопку OK, расположенную в диалоговой панели.

• confirm. Отображение диалоговой панели Confirm с кнопками OK и Отмена. Взависимости от того, какая кнопка будет нажата, метод возвращает соответственнозначение true или false.

• prompt. Отображение диалоговой панели Prompt с полем ввода и кнопками OK иОтмена. В зависимости от того, какая кнопка будет нажата, метод возвращаетсоответственно введенную строку или значение null. Метод имеет два параметра.Первый - сообщение над полем ввода. Второй (необязательный) - начальноезначение строки ввода.

• open. Открытие окна. Метод имеет три параметра. Первый задает URL HTML-документа, предназначенного для загрузки в новое окно. Второй определяет имяокна для использования в атрибуте TARGET тега <A> или в атрибуте NAME тега<FORM>. Третий (необязательный) задает в виде текстовой строки параметры,определяющие внешний вид открываемого окна.

var newWindow=

open(“1.htm", "",

"toolbar=no, menubar=no, width=300, height=200");



Параметры внешнего вида окна

toolbarОтображение стандартной инструментальной линейки[=yes|no] | [=1|0]

locationОтображение поля ввода адреса документа[=yes|no] | [=1|0]

statusОтображение строки состояния[=yes|no] | [=1|0]

menubarОтображение линейки меню[=yes|no] | [=1|0]

scrollbarsОтображение полос прокрутки[=yes|no] | [=1|0]

resizableИзменение размеров нового окна[=yes|no] | [=1|0]

width Ширина окна в пикселах height Высота окна в пикселах

fullscreen Полноэкранный режим

copyhistoryСохранение истории загрузки документов в данное окно[=yes|no] | [=1|0]

directoriesНаличие в данном окне кнопок групп новостей[=yes|no] | [=1|0]



Методы объекта window• close. Закрытие созданного или основного окна:

Текущее окно брaузера можно закрыть одним из следующих способов:

window.close(); self.close();

• setTimeout. Установка таймера. Применяется для ограничения времени вводапароля, создания бегущих строк и всевозможных анимационных эффектов. Методимеет два параметра. Первый задает выражение JavaScript, которое запускается попрошествии времени, указанного вторым параметром в миллисекундах. Заданноевыражение запускается один раз.

• clearTimeout. Сброс таймера.

• blur( ). При вызове метода окно теряет фокус.

• focus( ). При вызове метода окно получает фокус.

• MoveTo(x,y). Перемещает окно в точку с координатами.

• MoveBy(x,y). Перемещает окно на x пикселей по горизонтали вправо и на yпикселей вниз.

• ResizeTo(x,y). Изменяет размер окна на указанные размеры.

• ResizeBy(x,y). Увеличивает или уменьшает размер окна на заданное количествопикселей.

• print( ). Печать документа.(не работает в IE 4)

• scroll(x,y), ScrollTo(x,y). Прокручивает окно так, что точка с кординатами x,yстановится левой верхней точкой окна.

• ScrollBy(x,y). Прокручивает окно на x,y пикселей.

• stop( ). Прекращает загрузку документа в окно браузера.



Свойства объекта document

• URL. Полный URL документа.• location. Полный URL документа.• referrer. URL вызывающего документа.• title. Заголовок документа, определенный тегом <TITLE>.• bgColor. Цвет фона документа.• fgColor. Цвет текста.• linkColor. Цвет cсылок.• alinkColor. Цвет выбранных cсылок.• vlinkColor. Цвет посещенных cсылок.• links. Массив всех cсылок в документе.• anchors. Массив локальных меток. Применяется для организации ссылок

внутри документа.• applets. Массив аплетов Java.• forms. Массив форм в виде объектов.• images. Массив растровых изображений.• embeds. Массив объектов plug-in.• lastModified. Дата последнего изменения документа.• cookie. Значение cookie для текущего документа.• anchor. Локальная метка, определенная тегом <A>.• form. Форма, определенная тегом <FORM>.• history. Список посещенных URL.• link. Текст или изображение, играющие роль гипертекстовой ссылки,

созданной тегом <A>, в котором дополнительно заданы обработчикисобытий onClick и onMouseOver.



Методы объекта document

• сlear. Удаление содержимого документа из окна просмотра.

• write. Запись в документ произвольной HTML-конструкции.

• writeln. Аналогичен write, но с добавлением символа перевода строкив конец строки.

• open. Открытие выходного потока для записи в HTML-документданных типа MIME при помощи методов write и writeln.

• close. Закрытие потока данных, открытого методом open. В окне будутотображены все изменения содержимого документа, сделанныесценарием после открытия потока.



Ссылки в документеДля каждой ссылки, размещенной в HTML-документе, создается отдельный объект.

Все такие объекты находятся в объекте document как элементы массива links.Анализируя эти элементы, сценарий JavaScript может определить свойствакаждой ссылки в HTML-документе:

• length. Количество ссылок в HTML-документе, т.е. количество элементов вмассиве links.

• hash. Имя локальной ссылки, если она определена в URL.

• host. Имя узла и порт, указанные в URL.

• hostname. Имя узла и доменное имя узла сети. Если доменное имянедоступно, вместо него указывается адрес IP.

• href. Полный URL.

• pathname. Путь к объекту, указанный в URL.

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

• protocol. Строка названия протокола передачи данных (включающаясимвол "двоеточие"), указанного в ссылке.

• search. Строка запроса, указанная в URL после символа "?".

• target. Имя окна, куда будет загружен документ при выполнении ссылки.Это может быть имя существующего окна фрейма, определенного тегом<FRAMESET>, или одно из зарезервированных имен - _top, _parent, _self,_blank.



Учебник JavaScript

Ссылка на учебник


http://www.wisdomweb.ru/JS/javascript-first.php


Пример

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script> 

</script>

</head>

<body>

<img id="img1" src="1.png"

onmouseover="changeBackground('img1', 'Red');"

onmouseout="changeBackground('img1', 'Green');"

onclick="

if (document.getElementById('img1').getAttribute('src').match('1.png')){

replaceImage('img1','2.png');

}else{

replaceImage('img1','1.png');

}"/>

</body>

</html>



Результат



Ajax

Ajax расшифровывается как Asynchronous Javascript And XML(Асинхронные Javascript И XML) и технологией в строгом смысле словане является. Это просто аббревиатура, обозначающая подход ксозданию веб-приложений с помощью следующих технологий:

• стандартизированное представление силами XHTML и CSS;• динамическое отображение и взаимодействие с пользователем с

помощью DOM;• обмен и обработка данных в виде XML и JSON;• JavaScript;• асинхронные запросы с помощью объекта XMLHttpRequest.

Если в стандартном веб-приложении обработкой всей информациизанимается сервер, тогда как браузер отвечает только завзаимодействие с пользователем, передачу запросов и выводпоступившего HTML, то в Ajax-приложении между пользователем исервером появляется еще один посредник - движок Ajax. Онопределяет, какие запросы можно обработать "на месте", а за какиминеобходимо обращаться на сервер.



Схема работы



Что можно сделать с помощью Ajax

• Небольшие элементы управления

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

• Динамическая подгрузка данных с сервера.

Например, дерево, узлы которого подгружаются по мере раскрытия.

• Незаметные для пользователя действия.

Например, при редактировании статьи - каждые 10 минут результатыавтосохраняются на сервере.

• Непрерывная подзагрузка информации с сервера.

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



Объект XMLHttpRequest

Объект XMLHttpRequest (или, сокращенно, XHR) дает возможностьбраузеру делать HTTP-запросы к серверу без перезагрузки страницы.

Несмотря на слово XML в названии, XMLHttpRequest может работать сданными в любом текстовом формате, и даже c бинарными данными.Использовать его очень просто.

Как «достать» XML?

...

var xmldoc = httpRequest.responseXML;

var root_node = xmldoc.getElementsByTagName('root').item(0);

alert(root_node.firstChild.data);

...


http://xmlhttprequest.ru/

http://xmlhttprequest.ru/


Пример Ajax. Кроссбраузерная функция получения объекта.

function getXmlHttp() {

var xmlhttp;

try {

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (E) {

xmlhttp = false;

}

}

if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {

xmlhttp = new XMLHttpRequest();

}

return xmlhttp;

}



Пример Ajax. Получение массива случайных числелvar serverAddr ="http://www.random.org/integers/?num=1&min=1&max=256&col=1&

base=10&format=plain";

var array1 = [];

function getNumber(arr) {

var xmlHttp = getXmlHttp();

xmlHttp.open("GET", serverAddr, true);

xmlHttp.onreadystatechange = function () {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

arr.push(~~xmlHttp.responseText);

}

}

}

xmlHttp.send(null);

}

function fillArray(count){

for (i = 0; i < count; i++) { getNumber(array1); };

}

function showArray(){

fillArray(10);

var myText = document.getElementById("text1");

myText.innerHTML = "";

for (i = 0; i < array1.length; i++) {

myText.innerHTML += " " + array1[i];

}

}



jQuery

jQuery – это JavaScript-библиотека, фокусирующаяся на взаимодействииJavaScript, HTML и CSS.

Что умеет jQuery:

• Обращаться к любому элементу DOM (объектной моделидокумента) и не только обращаться, но и манипулировать ими.

• Работать с событиями.

• Легко осуществлять различные визуальные эффекты.

• Работать с AJAX.

• Имеет огромное количество JavaScript плагинов, предназначенныхдля создания элементов пользовательских интерфейсов.


http://jquery.com/

http://jquery.com/


Функция $()

$("div") вернет все div-элементы на странице.

$(".someBlock") вернет все элементы с классом someBlock.

$("#content") вернет элемент с идентификатором content.

$("#content2 div.someBlock")

вернет div-элементы с классом someBlock, которые находятся внутри элемента с идентификатором content2.

$("div:odd") вернет div-элементы, находящиеся на странице под нечетными номерами.

$("[value = 5]") вернет все элементы с атрибутом value, равным 5.

С помощью функции $() из библиотеки, можно находить элементы на странице по различным параметрам



Функция $()

$("#bigIt").css("height") возвратит значение высоты у элемента с идентификатором bigIt.

$("div").css("width", "20px") установит новое значение ширины всем div-элемента на странице.

$("#bigIt").attr("class") возвратит значение класса элемента с id = bigIt.

$("#bigIt").attr("class", "box") установит новое значение атрибута class у элемента с id = bigIt.

$("#bigIt").html(<p>Новый!</p>)

изменит все html-содержимое элемента с id = bigIt, на заданное в методе html.

$("#bigIt").text() возвратит текст, находящийся внутри элемента с id = bigIt.

$(".someBox").empty() очистить от содержимого элементы с классом someBox.



Цепочки методов

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

$("#bigIt").empty().attr("class", "noContent");

// в результате, у элемента с идентификатором bigIt будет удалено

все содержимое,

// после чего ему будет установлен класс noContent.



Работа с набором элементов

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

$("div").parent() вернет родительские элементы всех div-ов.

$("div").children() вернет дочерние элементы всех div-ов.

$("#someId").next() вернет элемент, лежащий сразу после someId.

$("div").prev() вернет элементы, лежащие перед div'ами.

$("div").eq(i) вернет div-элемент, с индексом i в наборе.

$("div").get(i) вернет DOM-объект div'а, с индексом i.

$("div").get() вернет массив DOM-объеков всех div-ов.

$("div").size() вернет размер набора (количествово div-ов).



Анимационные эффекты

Ключевым методом, на которой базируются все остальные, является методanimate(), с помощью которого можно задавать плавное изменениеразличных CSS-свойств:

.animate(properties, [duration], [easing], [callback])

• properties — список CSS-свойств, участвующих в анимации и ихконечных значений. Задаются объектом, в формате{ключ:значение}, например:{opacity: 50, width: 100, height: 200}.

• duration — продолжительность выполнения анимации. Может бытьзадана в миллисекундах или строковым значением 'fast' или 'slow'(200 и 600 миллисекунд).

• easing — изменение скорости анимации (будет ли она замедляетсяк концу выполнения или наоборот ускорится). Задается строковымзначением: "linear" и "swing" (для равномерной анимации ианимации с ускорением). Другие варианты можно найти в плагинах.

• callback — функция, которая будет вызвана после завершенияанимации.

$("#mydiv")

.animate({height: "hide"}, 300)

.text("Новый текст")

.animate({height: "show"}, 300);



Ajax

В jQuery реализована возможность выполнения запросов к серверу безперезагрузки страницы (ajax). Базовыми функциями для ее работыявляются post() и get():

$.post(url, [params], [callback], [dataType])

$.get(url, [params], [callback], [dataType])

• url — url-адрес, по которому будет отправлен запрос.• data — данные, которые будут отправлены на сервер. Они

должны быть представлены объектом, в формате: {fName1:value1,fName2:value2, ...}.

• callback — пользовательская функция, которая будет вызванапосле ответа сервера.

• dataType — ожидаемый тип данных, которые пришлет сервер вответ на запрос.

Простейший пример:

$.get(“http://random.org");



Другие возможности

Существуют и другие возможности jQuery, например:

• $.browser поможет узнать тип браузера.• $.support поможет узнать конкретные особенности браузера.• .offset() и .position() позволят узнать или изменить позицию

выбранного элемента.• .width() и .height() позволят узнать или изменить размеры

выбранного элемента.• .scrollTop() и .scrollLeft() позволят работать с прокруткой.

Ссылка на русскоязычное описание библиотеки

И на сайт разработчиков


http://jquery.page2page.ru/

http://jquery.com/


Пример «Крестики-нолики с jQuery»

<!doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>jQuery XO</title>

<script type="text/javascript" src="jquery-1.2.6.js"></script>

<script src="xo.js" language="javascript"></script>

<link rel="stylesheet" type="text/css" href="xo.css" />

</head>

<body>

<table style="width:600px; height:600px;">

<tr><td id="11"></td>

<td id="12"></td>

<td id="13"></td></tr>

<tr><td id="21"></td>

<td id="22"></td>

<td id="23"></td></tr>

<tr><td id="31"></td>

<td id="32"></td>

<td id="33"></td></tr>

</table>

</body>

</html>

xo.html

td, tr {

border: 1px solid black;

text-align: center;

color:transparent;

width: 33.33%;

height: 33.33%;

}

xo.css



xo.js функция проверки победыfunction CheckVictory(xo) {

if (

//Строки

(($("#11").text() == xo) && ($("#12").text() == xo) &&

($("#13").text() == xo)) ||

(($("#21").text() == xo) && ($("#22").text() == xo) &&

($("#23").text() == xo)) ||

(($("#31").text() == xo) && ($("#32").text() == xo) &&

($("#33").text() == xo)) ||

//Столбцы

(($("#11").text() == xo) && ($("#21").text() == xo) &&

($("#31").text() == xo)) ||

(($("#12").text() == xo) && ($("#22").text() == xo) &&

($("#32").text() == xo)) ||

(($("#13").text() == xo) && ($("#23").text() == xo) &&

($("#33").text() == xo)) ||

//Диагонали

(($("#11").text() == xo) && ($("#22").text() == xo) &&

($("#33").text() == xo)) ||

(($("#31").text() == xo) && ($("#22").text() == xo) &&

($("#13").text() == xo))) {

if (xo == 'X')

alert('Крестики победили!');

else

alert('Нолики победили!');

}

}



xo.js функция, отмечающая ход

function MarkXO(elem, xo) {

elem.text(xo);

elem.css("background-repeat", "no-repeat");

elem.css("background-position", "center");

if (xo == 'X')

elem.css("background-image", "url('x.png')");

else

elem.css("background-image", "url('o.png')");

}



xo.js функция-обработчик клика ячейки

var xoGlobal = 'O';

function ClickLogic() {

text = $(this).text();

if (text == '') {

if (xoGlobal == 'X') {

xoGlobal = 'O'

} else {

xoGlobal = 'X'

};

MarkXO($(this), xoGlobal);

CheckVictory(xoGlobal);

} else {

alert("Занято!");

}

}



xo.js последняя «функция»

$(document).ready(

function () {

$('td').click(ClickLogic);

});

Эта запись «переводится», приблизительно, как «в качествеобработчика $(document).ready установить функцию, котораяобработчиком клика td-шки устанавливает функциюClickLogic»



Результат



Результат



Результат



Лабораторная работа №2

К своей HTML-странице добавить JavaScript/Ajax/jQuery-активность(анимация элементов по событию, простая игра или т.п.).

Education

C# Web. Занятие 02