WEB-технологии
Лекция, 28 Января 2013, автор: пользователь скрыл имя
Описание
В 1962 г. Дж. Ликлайдером, руководителем исследовательского компьютерного проекта экспериментальной сети передачи пакетов в Управлении перспективных исследований и разработок Министерства обороны США (Defense Advanced Research Project Agency, DARPA), была опубликована серия заметок, в которых обсуждалась концепция "Галактической сети" ("Galactic Network"). "Галактическая сеть" представлялась как глобальная сеть взаимосвязанных компьютеров, позволяющая любому пользователю получить доступ к данным и программам на компьютерах, объединенных данной сетью. Можно сказать, что эта идея положила начало развитию сети Интернет.
Работа состоит из 1 файл
Лекции_Web-тех.doc
— 1.76 Мб (Скачать документ)Пример
<img src="ba.gif" border=0
OnMouseOver="this.style.backgr
OnMouseOut="this.style.
Здесь цвет фона объекта будет меняться с белого на красный при наведении на объект мыши:
Переменные в JavaScript
Имя переменной не должно совпадать с зарезервированными ключевыми словами JavaScript.
Все переменные в JavaScript объявляются с помощью ключевого слова var. При объявлении тип переменной не указывается. Этот тип присваивается переменной только тогда, когда ей присваивается какое-либо значение.
Числа в строки интерпретатор JavaScript преобразует автоматически. Для преобразования строк в числа используют специальные функции parseInt и parseFloat.
Пример
<HTML><HEAD>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251"></HEAD>
<BODY lang=RU>
<H1>Пример преобразования типов</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
var Buf="";
Buf=100+" - число сто<br>";
Buf+=(parseInt("50")+50)+"&
document.write(Buf);
//-->
</SCRIPT></BODY></HTML>
Пример преобразования типов
100 - число сто
100 - число сто
Примеры использования простейших преобразований типов:
var myVar = "3.14159",
str = ""+ myVar,// в string
int = ~~myVar, // в integer
float = 1*myVar, // во float
bool = !!myVar, // в boolean - все непустые строки и числа кроме 0 будут true
array = [myVar]; // в array
Конвертирование в даты (new Date(myVar)) и регулярные выражения (new RegExp(myVar)) нужно делать с использованием конструкторов. Для создания регулярных выражений используйте структуру: /регулярное_выражение/флаги.
Операторы языка JavaScript
Операторы JavaScript напоминают общеизвестные операторы языка С++.
Унарные операторы
- |
Изменение знака на противоположный |
! |
Дополнение. Используется для реверсирования значения логических переменных |
++ |
Увеличение значения переменной. Может применяться и как префикс, и как суффикс |
-- |
Уменьшение значения переменной. Может применяться и как префикс, и как суффикс |
Бинарные операторы
- |
Вычитание |
+ |
Сложение |
* |
Умножение |
/ |
Деление |
% |
Остаток от деления |
Операторы для работы с отдельными битами
& |
И |
| |
ИЛИ |
^ |
ИСКЛЮЧАЮЩЕЕ ИЛИ |
~ |
НЕ |
Операторы сдвига
>> |
Сдвиг вправо |
<< |
Сдвиг влево |
>>> |
Сдвиг вправо с
заполнением освобождаемых |
Операторы отношения
> |
Больше |
>= |
Больше или равно |
< |
Меньше |
<= |
Меньше или равно |
== |
Равно |
!= |
Не равно |
В условных операторах также применяются логические операторы: || (ИЛИ) и && (И).
Оператор присваивания и его комбинации
Допускается комбинирование оператора присваивания с другими, как и в языке С.
= |
Присваивание |
+= |
Сложение или слияние строк (n=n+7; аналог. n+=7;) |
–= |
Вычитание (n=n-7; аналог. n-=7;) |
*= |
Умножение |
/= |
Деление |
>>= |
Сдвиг вправо |
<<= |
Сдвиг влево |
>>>= |
Сдвиг вправо с
заполнением освобождаемых |
&= |
И |
|= |
ИЛИ |
^= |
ИСКЛЮЧАЮЩЕЕ ИЛИ |
Условные операторы
В языке JavaScript два условных оператора: if-else и ?:.
Пример оператора IF-ELSE
if(Vol<2)
{
b=true;
ss="w002.htm";
}
else if(Vol>100)
{
b=true;
ss="w100.htm";
}
Пример оператора ?:
b = (Vol<2 || Vol>100) ? true:false;
Операторы цикла
В языке JavaScript три оператора цикла: for, for-in, while.
Пример оператора FOR
for(i=0; i<n; i++)
{
text+=" ";
}
Пример оператора FOR-IN
var sprops="<H2>Свойства объекта window</H2>"
for(props in window)
sprops+="<b>"+props+"</b><xmp>
document.write(sprops);
Пример оператора WHILE
i=0;
while(i<n)
{
text+=" ";
i++;
}
Кроме этих операторов в организации цикла могут участвовать еще два оператора: break (выход из цикла) и continue (переход на следующий шаг).
Прочие операторы
. |
Доступ к полю объекта. ( document.write(Buf); ) |
[ ] |
Индексирование массива ( dim[i] ) |
( ) |
Изменение порядка вычислений или передача параметров функции |
, |
Разделение выражений в многократном вычислении |
Пример оператора “запятая”
for(i=0; i<n; i++, j++)
Встроенные функции JavaScript
Функции JavaScript
Все функции JavaScript рекомендуется помещать в контейнер <HEAD>...</HEAD>. Тем самым вы обеспечите их гарантированную доступность при обработке HTML-документа.
Пример
<html> <head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<script language="Javascript">
<!--
function ItR(a)
{
var o = eval(a);
o.style.backgroundColor="red";
}
function ItW(a)
{
var o = eval(a);
o.style.backgroundColor="
}
//-->
</script></head>
<body lang=RU>
<H2>Изменение фона при наведении </H2>
<img id=Ba src="ba.gif" border=0 OnMouseOver="ItR(Ba)" OnMouseOut="ItW(Ba)">
<img id=Ba src="be.gif" border=0 OnMouseOver="ItR(Be)" OnMouseOut="ItW(Be)">
</body> </html>
Изменение фона при наведении
Объекты JavaScript
Язык JavaScript является объектно-ориентированным. Объекты JavaScript представляют собой наборы свойств и методов. Можно сказать, что свойства объектов - это данные, связанные с объектом, а методы - функции для обработки данных объекта.
В языке JavaScript имеется три вида объектов: встроенные объекты, объекты брaузера и объекты, создаваемые программистом.
JavaScript поддерживает следующий набор встроенных объектов: Array, Boolean, Date, Global, Function, Math, Number, String.
Встроенный объект Array. Массивы в JavaScript
Массив в JavaScript является экземпляром встроенного объекта Array. Нумерация элементов в массиве начинается с нуля. Создать массив можно тремя способами:
var a1 = new Array();
var a2 = new Array(3);
var a3 = new Array('раз','два','три');
a1 - массив, в котором нет ни одного
элемента.
a2 - массив из
трех элементов с неопределенным (undefined)
значением.
a3 - массив, заданный
списком своих элементов.
Число элементов в массиве можно изменить, просто задав значение соответствующего элемента:
a3[5]='шесть';
Типы данных элементов массива в 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. Число элементов массива.
Методы объекта Array
- concat(
). Слияние двух массивов. Через параметр передается имя второго массива: c=a.concat(b);
Здесь элементы массива b добавляются к элементам массива a. - join( ). Слияние элементов массива в строку. Через параметр передается разделитель элементов. По умолчанию разделителем служит запятая. s=c.join('; ');
- reverse( ). Меняет порядок элементов массива на обратный.
- slice( ). Выделяет часть из массива. В качестве параметров передаются значения начального и конечного индексов, между которыми происходит выделение. При этом элемент массива с конечным индексом в результат не войдет. Следует помнить, что индексы отсчитываются от нуля.
Встроенный объект Date
С помощью методов встроенного объекта Date можно выполнять различные действия с часами компьютера. Для использования большинства методов объекта Date необходимо создать экземпляр этого объекта:
var today = new Date();
Методы объекта Date
- getYear. Возвращает год:
var nYear = today.getYear(); - getMonth. Возвращает номер месяца:
var nMonth = today.getMonth(); Имейте в виду, что январь - это 0, февраль - 1 и т.д. - getDate.Возвращает значение календарной даты в диапазоне от 1 до 31:
var nDate = today.getDate(); - getDay. Возвращает номер дня недели (для воскресенья - 0, для понедельника - 1 и т.д.):
var nDay = today.getDay(); - getHours. Возвращает количество часов, прошедших после полуночи:
var nHours = today.getHours(); - getMinutes. Возвращает количество минут, прошедших с начала часа:
var nMinutes = today.getMinutes(); - getSeconds. Возвращает количество секунд, прошедших с начала минуты:
var nSeconds = today.getSeconds(); - getTime. Возвращает количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года:
var nMillisec = today.getTime(); - getTimeZoneOffset. Возвращает смещение локального времени относительно времени по Гринвичу в миллисекундах:
var nOffsetMillisec = today.getTimeZoneOffset(); - parse. Возвращает количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года по время, указанное в параметре функции. Для вызова этого метода можно просто сослаться на имя класса Date, а создавать объект класса Date не надо:
var nMS = Date.parse(prm);
Параметр prm может принимать значения: локальные дата и время ("21 Apr 2001 18:00:00"); дата и время по Гринвичу ("21 Apr 2001 14:00:00 GMT"); дата и время по Гринвичу cо смещением ("21 Apr 2001 18:00:00 GMT+0400"). - UTC. Преобразовывает дату, заданную параметрами метода, в количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года. Для вызова этого метода, так же как и метода parse можно просто сослаться на имя класса Date:
var nMSec = Date.UTC(year, month, date, hours, min, sec, ms);
Имейте в виду, что январь - это 0, февраль - 1 и т.д. - setYear. Устанавливает год в объекте класса Date:
today.setYear(nYear); - setMonth. Устанавливает номер месяца:
today.setMonth(nMonth); - setDate. Устанавливает значение календарной даты в диапазоне от 1 до 31:
today.setDate(nDate); - setDay. Устанавливает номер дня недели (для воскресенья - 0, для понедельника - 1 и т.д.):
today.setDay(nDay); - setHours. Устанавливает количество часов, прошедших после полуночи:
today.setHours(nHours); - setMinutes. Устанавливает количество минут, прошедших с начала часа:
today.setMinutes(nMinutes); - setSeconds. Устанавливает количество секунд, прошедших с начала минуты:
today.setSeconds(nSeconds); - setTime. Устанавливает дату, соответствующую количеству миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года:
var nMillisec = today.setTime(); - toGMTString. Преобразует дату в строку, записанную в стандартном формате времени по Гринвичу:
"Sat, 21 Apr 2001 14:00:00 GMT" - toLocaleString. Преобразует дату в строку, записанную в стандартном формате локального времени:
"04/16/2001 18:00:00".
Объекты брaузера
Объекты брaузера являются тем интерфейсом, с помощью которого сценарий JavaScript взаимодействует с посетителем и HTML-документом, загруженным в окно брaузера, а также с самим брaузером. Обращаясь к свойствам и методам этих объектов, можно выполнять различные операции над окном брaузера, загруженным в это окно HTML-документом, а также над отдельными объектами, размещенными в HTML-документе.
Практически в любом сценарии JavaScript необходимы такие объекты, как окно - window и документ - document.
Свойства объекта window
- name. Имя окна, указанное при его открытии методом open, а также в атрибуте TARGET тега <A> или в атрибуте NAME тега <FORM>.
- self, window. Синонимы имени окна. Относятся к текущему окну.
- top. Синоним имени окна. Относится к окну верхнего уровня.
- parent. Синоним имени окна. Относится к окну, содержащему набор фреймов.
- frames. Массив всех фреймов данного окна.
- length. Количество фреймов в родительском окне.
- status. Текущее сообщение, отображаемое в строке состояния окна брaузера.
Методы объекта window
- alert. Отображение диалоговой панели Alert с сообщением и кнопкой OK. Через параметр передается сообщение, отображаемое в диалоговой панели. После вызова этого метода выполнение сценария задерживается до тех пор, пока посетитель не нажмет кнопку OK, расположенную в диалоговой панели.
Пример
<html><head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
</head>
<body lang=RU>
<script language="JavaScript">
<!--
alert("Рад видеть Вас на моем сайте! Пошли дальше?");
//-->
</script>
</body>
</html>
- confirm. Отображение диалоговой панели Confirm с кнопками OK и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвращает соответственно значение true или false.
Пример
<html> <head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
</head>
<body lang=RU>
<script language="JavaScript">
<!--
if(confirm("Рад видеть Вас на моем сайте! Пошли дальше?")) {document.write("Пошли!");}
else {document.write("Не хочешь - не надо... ");}
//-->
</script></body></html>
- prompt. Отображение диалоговой панели Prompt с полем ввода и кнопками OK и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвращает соответственно введенную строку или значение null. Метод имеет два параметра. Первый - сообщение над полем ввода. Второй (необязательный) - начальное значение строки ввода.