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 - фирмой Netscape
Communication Corporation. Первоначальное название - LiveScript.
После завоевания языком Java всемирной известности LiveScript из
коммерческих соображений переименовали в JavaScript.
JavaScript не предназначен для создания автономных приложений.
Программа на JavaScript встраивается непосредственно в исходный
текст HTML-документа и интерпретируется брaузером по мере загрузки
этого документа. С помощью JavaScript можно динамически изменять
текст загружаемого HTML-документа и реагировать на события,
связанные с действиями посетителя или изменениями состоятия
документа или окна.
Важная особенность JavaScript - объектная ориентированность.
Программисту доступны многочисленные объекты, такие, как
документы, гиперссылки, формы, фреймы и т.д. Объекты
характеризуются описательной информацией (свойствами) и
возможными действиями (методами).

Тег <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.
Одной из особенностей языка является реализация прототипного
наследования.

JSON
JSON (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
Ссылка на учебник

Пример
<!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);
...

Пример 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 плагинов, предназначенных
для создания элементов пользовательских интерфейсов.

Функция $()
$("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() позволят работать с прокруткой.
Ссылка на русскоязычное описание библиотеки
И на сайт разработчиков

Пример «Крестики-нолики с 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-активность
(анимация элементов по событию, простая игра или т.п.).

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

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Viewers also liked

Viewers also liked (20)

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

Similar to C# Web. Занятие 02. (20)

More from Igor Shkulipa

More from Igor Shkulipa (20)

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