WEB-технологии

Автор работы: Пользователь скрыл имя, 28 Января 2013 в 17:03, лекция

Описание

В 1962 г. Дж. Ликлайдером, руководителем исследовательского компьютерного проекта экспериментальной сети передачи пакетов в Управлении перспективных исследований и разработок Министерства обороны США (Defense Advanced Research Project Agency, DARPA), была опубликована серия заметок, в которых обсуждалась концепция "Галактической сети" ("Galactic Network"). "Галактическая сеть" представлялась как глобальная сеть взаимосвязанных компьютеров, позволяющая любому пользователю получить доступ к данным и программам на компьютерах, объединенных данной сетью. Можно сказать, что эта идея положила начало развитию сети Интернет.

Работа состоит из  1 файл

Лекции_Web-тех.doc

— 1.76 Мб (Скачать документ)

Пример

<img src="ba.gif" border=0

OnMouseOver="this.style.backgroundColor='red';"

OnMouseOut="this.style.backgroundColor='white';">

Здесь цвет фона объекта будет меняться с белого на красный при наведении  на объект мыши:

Переменные  в 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+"&nbsp;- число сто<br>";

Buf+=(parseInt("50")+50)+"&nbsp;-число  сто<br>";

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>"+(":"+window[props]).substr(0,90)+"</xmp><br>";

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="white";

}

//-->

</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. Метод имеет два параметра. Первый - сообщение над полем ввода. Второй (необязательный) - начальное значение строки ввода.

Информация о работе WEB-технологии