..

../

/

1. Введение.

Технология работы на стороне клиента.

Встроенные интерпретаторы.
Отрабатывается локально.

+ плюсы

• Разгружается сервер.
• Привязка к компьютеру клиента.
• Коды достаточно простые.

- минусы

• Медленная скорость работы, имеем дело с интерпретирующими языками. JavaScript примерно в 200 раз медленнее С++.
• Такие программы загружают линии, т.к. загружается код. 12кБ на JavaScript - это уже много.
• Нет конфиденциальности (пользователь видит загружаемый код).

Эти технологии применяются для

1. придания динамики станицам: изменение при наведении мыши, клики...;
2. проверки правильности ввода данных форм HTML.

Технология работы на стороне сервера.

Клиент получает статическую страницу, которая формируется на сервере.

+ плюсы

• Не занимаются линии связи.
• Режим конфиденциальности (пользователь получает только результат).
• Скорость.
• Все делается на усмотрение Web-мастера.
• Применение стандартных модулей.

- минусы

• Перегрузка сервера.
• Появляется возможность взлома, нужна защита атак на сервер.

Языки программирования: интерпретирующие (выполняется построчно), и компилирующие (в код).

..

../

/

2. Литература.

1. Питер Вейнер. Языки программирования Java и JavaScript, 1998.
2. Рик Дарнелл. JavaScript: справочник, 2000.

3. Основные характеристики языка JavaScript.

Интерпретирующий язык, со строгим синтаксисом, язык регистрозависимый.
В IE находится интерпретатор JScript, он на 90% совпадает с JavaScript, но 10% различий все-таки есть, в том числе и в синтаксисе.

..

../

/

4. Синтаксис JavaScript.

1. Разделитель между операторами ;
   Любой оператор должен завершаться ; за исключением случая, когда оператор применяется к блоку других операторов, например, if. В этом случае блок операторов заключается в фигурные скобки { }, после которых идет блок операторов.
2. // Однострочный комментарий.
3. /* Многострочный комментарий. */
4. \n перевод текста на новую строку
5. \t символ табуляции
6. \" \' если нужно поставить кавычки внутри кавычек.

s="Hello";
s1="Hello \"name\";

В браузере: Hello "name"

..

../

/

5. Типы данных в JavaScript.

Логический или булевский тип данных.

boolean имя_переменной;
boolean b;
b --> True/False

Целочисленный тип.

int имя_переменной;
int a,b,c; // Допускается перечисление через запятую.

Вещественный тип данных (дробные числа).

float имя_переменной;

Вещественный тип с двойной точностью.

double имя_переменной; // Отводится 16 разрядов.

Символьный тип.

char имя_переменной;
Переменные символьного типа содержат один символ, они должны заключаться в двойные, либо в одинарные кавычки.
char c;
c='a';

Переменные неопределенного или переменного типа.

var x,y;
x=10; // x станет int
y='b'; // y станет char
Как правило, так и делают.

..

../

/

6. Операторы и операции в JavaScript.

В порядке убывания приоритета.
Термы ( ) - операторы, заключенные в скобки.

Операторы сравнения

<,   >,   <=,   >=,   == (при сравнении),   != (не равно)

Логические операции (могут быть записаны в двух видах)

or ||,   and &&,   not !

Арифметические операции

+,   -,   *,   /

Операция конкатенации (склеивание строк)

+
Если провести конкатенацию строки с числом, то результатом будет строка, а число автоматически преобразуется в соответствующую строку.
a="Hello";
b="all";
c=a+b; // c=="Helloall"
a=10;
b="компьютеров";
c=a+b; // c=="10 компьютеров"

..

../

/

Операторы в JavaScript.

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

if(условие){
	операторы,
	если условие выполняется}
	else{
	операторы,
	если условие не выполняется}
}

else - не обязательный параметр

Условный цикл while.

while(условие){
	тело цикла
	break;
	тело цикла
	continue;
	тело цикла
}

Необязательные параметры:
break; безусловный выход из цикла
continue; означает пропуск одной итерации (одного шага цикла)

while(i<10){
	b=i*i;
	if(b>50){break;}
	i++; // увеличение переменной на единицу, то же что i=i+1;
}

i**50; // возведение в степень
Как правило таких вычислений не делают, в основном операции со строками.

Перечисляемый цикл for.

for(i=0;i<=10;i++)
	{тело цикла
	break;
	тело цикла
	continue;
	тело цикла
	}

i=0; начальное значение счетчика
i<=10; условие
i++ (i=i-1) изменение счетчика
Есть еще одна форма записи:

for(i in массив/объект){
	тело цикла
	}

Переменная i последовательно принимает значения элементов массива.

..

../

/

7. Задание функций в JavaScript.

Функция вызывается многократно с различными параметрами.
Функция объявляется зарезервированным словом

function имя_функции(x1,x2,...xn){
	тело функции
	return переменная/выражение;
	}

(x1,x2,...xn) входные формальные параметры, может быть просто ()
Круглые скобки ставить обязательно, даже если нет параметров.
При вызове функции подставляются фактические параметры.
return - если он есть, должен быть последним оператором после тела функции.
Возвращает результат функции в исходную программу.

function quadro(x){
	b=x*x;
	return b;}

В основной программе a=quadro(2); a==4
func1(); // функция как отдельно взятый оператор отработает сама по себе, не возвращает значение.

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

Под свойствами объекта понимаются переменные, принадлежащие этому объекту.
Метод - это функции.
Свойства - это переменные.

..

../

/

8. Объекты языка JavaScript.

Массивы являются объектами в JavaScript.

8.1. Array()

Сначала объект надо создать. Работать можно только с экземплярами объектов.
var a=new Array(); // объявили переменную и экземпляр объекта в эту переменную.
var a;
...
a=new Array(); // можно использовать такую форму записи, сначала объявить переменную
Массивы в JavaScript бывают только одномерными. Нумерация элементов массива начинается с 0.

       0    1 2 3 4 5 6 ...
   ---------------------
a  |Array()| | | | | | |
   ---------------------
   |       |

Допускается создание массива в массиве (внутреннее вложение).

Методы и свойства объекта Array().

Свойство length.

var a=new Array();
a.length;
a - переменная, length - свойство, указывает на номер последнего элемента в массиве.
Массивы являются безразмерными.
a.length++; // в массиве добавится новая ячейка, к которой можно обратиться.
Обращение к элементам массива происходит по номеру элемента.
a[номер_элемента]
a.[a.length] - содержимое последнего элемента массива.

Метод join.

var a=new Array();
var s;
s=a.join("символ_разделитель");

Объединяет все элементы массива в одну строку, разделяя их указанным символом разделителя.

  ----------
a |12|40|20|
  ----------
s=a.join(":");

s=="12:40:20" из массива получили одну строку.
Эта функция используется при обработке значений форм, для получения строки даты.

..

../

/

8.2. Объект Math.

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

a=Math.sin(Pi/2);

8.3. Объект String.

Это массив переменных символьного типа.

Методы объекта String.

Метод length.

s.length(); // признаком метода является наличие скобок
Метод возвращает количество символов в строке.
"Hello" - возвращается 5
s.toUpperCase(); // переводит все символы строки в заглавные
s=="HELLO"
s.toLowerCase(); // переводит все символы строки в строчные буквы
s=="hello"
int i=s.Of('l'); // возвращает во внешнюю целочисленную переменную номер позиции, на который первый раз встречается указанный символ
i==2
0 1 2 3 4
H e l l o
char c=s.charAt(номер_позиции); // возвращает во внешнюю переменную символ, который находится на указанной позиции
char c=s.charAt(1); // c==l
string s1=s.substring(начальная_позиция_включительно,конечная_позиция_исключительно);
Выделяет подстроку из заданной строки, причем символ, находящийся на начальной позиции включается в подстроку, а символ, находящийся на конечной позиции, в подстроку не включается.
string s1=s.substring(0,2); // s1=="He"

..

../

/

8.4. Объект Date.

Отвечает за обработку функции даты и времени.
getDate() - возвращает текущую дату.
getYear()- возвращает год.
getMounth()- возвращает месяц, рассматривает месяц как массив, нумерует с 0, поэтому нужно приплюсовать 1.
getDay()- возвращает день недели Mon, Tue..., можно обращаться по номерам.
getHour()- возвращает час суток.
getMinutes()- возвращает минуты как целое от 0 до 59.
getSeconds()- возвращает число секунд.
getTime() - возвращает количество секунд, прошедших с 0 часов 0 мин. 0 сек. с 1 января 1970 года. Может использоваться для сравнения двух дат.
Парные функции
setDate()
setYear()
...
setSeconds()
Эти функции устанавливают значение даты и времени в компьютере пользователя. Практически не используются.

..

../

/

9. Встроенные функции JavaScript (стандартные).

Определены в языке, заранее описаны.

parseInt

int a=parseInt("строка_цифр");
Преобразует строку, состоящую из чисел в целое число.

parseFloat

float f=parseFloat("строка_цифр");
Преобразует строку, состоящую из чисел в вещественное число.

setTimeout

Функция задания временного интервала.
setTimeout("имя_функции",интервал_в_мс);
Запускает указанную в качестве первого параметра функцию через указанное количество миллисекунд.

alert

Функции создания информационных окон.
Функция alert("Надпись в окне");
Выдает на экран браузера окно с надписью, которая задана в качестве параметра.

confirm

boolean b=confirm("Надпись в окне");
Функция формирует аналогичное окно с надписью, но в нем 2 кнопки Ok и Censel.
Если Ok -> переменная получит значение True, если Censel -> False.

prompt

string s=prompt("Надпись в окне","Надпись в строке");
Формирует окно с некоторой надписью и строкой для ввода информации пользователем.
Если пользователь щелкнет по кнопке Ok, то функция возвратит строковое значение, то, что пользователь ввел в строку.
Как могут вызываться функции.

• В явном виде.
• Внутри тега HTML в случае наступления какого-либо события.

Под событием понимается любое изменение.
<тег_HTML событие="имя_функции">
<a href="#" onClick="f1()"> // событие: щелчек по левой кнопке мыши.
onMouseOver - событие: мышь наводится на объект (на ссылку).
onMouseOut - событие: указатель мыши убирается с объекта.
onLoad - событие: загружается окно браузера.

..

../

/

10. Объектная структура браузера.

JavaScript может осуществлять обращение к объектам браузера.

10.1. Объектная структура браузера NetscapeCommunicator.

Объектом старшего уровня иерархии является windows, то окно, в котором мы работаем.

windows	->history
	->frames
	->self
	->location
	->top
	->parent
	->document
		->forms
		->links
		->anchors
		->images
		->applets
		->activeX

history - содержит массив адресов тех сайтов, которые были посещены во время текущего сеанса.

frames - это массив всех фреймов, содержащихся на странице. Вызвать фрейм (обратиться к фрейму) можно по имени или по номеру.
<frame set 100,*>
...
windows.frames.f1;
windows.frames.f1.forms.frm1.a1;
frm1 - имя формы, a1 - имя поля формы.
self - то же, что и windows (здесь дублирование, чтобы не перескакивать через разные уровни иерархии).
location - содержит данные о сетевых параметрах пользователя и HTML-страницы: имя сервера, с которого загружена страница, протокол, IP-адрес, порт, через который осуществлялась связь.
<script ...*> /* Перейти на страницу в зависимости от пункта меню, который выбрал пользователь. Переход осуществляется программно. */
windows.location.href="www.specialist.ru";
top - явная ссылка на окно верхнего уровня. Если окно вложено в окно, то переход к окну верхнего уровня (на 1 шаг наверх).
parent - хранит ссылку на окно верхнего уровня в случае фреймованной структуры.

+----------+
|parent=   |<- www.server.ru
+----------+
|          |
+----------+

<frameset rows=2>
<frame src="..." name="a1">
...
</frameset>
document - является основным объектом, содержится вся информация, выводимая в окне браузера.
forms - объект представляет собой массив, содержащий все формы HTML-документа.
Обращение к форме:

windows.document.forms['0']
string s=document.имя_формы.имя_поля_формы.value;

string s=document.frm1.txt1.value;
<form method=get action="..." name="frm1">
<input type=text name="txt1">
document.frm1.txt1.value="Hi";
links - массив всех ссылок, находящихся на странице.
anchors - массив всех внутренних ссылок на странице.
images - массив всех графических изображений, расположенных на странице HTML-документа.
applets - массив всех Java-аппллетов, расположенных в HTML-документе.
activeX - только для Netscape Communicator 4.71-4.72, массив activeX-элементов, расположенных в HTML-документе. Это стандартные библиотеки, реализующие функции, эти библиотеки можно встроить в любую программу под Windows, например, функция modem, элемент для подключения к Internet, можно написать свой браузер.

Методы и свойства объекта document (объекты третьего уровня).

Изменение цвета (параметры тэга body).

bgcolor - устанавливает цвет фона (можно менять динамически, в зависимости от события).
document.bgcolor="цвет";
document.bgcolor=#RGB;
Действует параметр, заданный последним.

alinkcolor - цвет активной ссылки (на которую наведена мышь).

vlinkcolor - цвет посещенной ссылки.

linkcolor - цвет ссылки.

location - свойство содержит информацию об источнике данных текущей HTML-страницы, фактически дублирует объект location объекта windows.

refferrer - свойство содержит адрес предыдущей страницы, загруженной в браузер (неполное дублирование объекта history).

title - свойство формирует заголовок окна браузера (идентично тэгу title).

document.title="Программа JavaScript";

Метод write.

Выводит информацию в браузер. document.write("<font size="+i+">"); // формируется тэг HTML
<font size=2>

Метод cookie.

cookie - это текстовые файлы, которые
1) записываются с сервера на компьютер клиента,
2) хранят информацию о работе клиента.

..

../

/

10.2. Отличия Internet Explorer. Объектная структура браузера Internet Explorer.

windows->location
	->frames
	->history
	->navigator
	->event
	->screen
		->wigth
		->heigt
	->document
		->links
		->anchors
		->images
		->forms
		->applets
		->embeds
		->plugins
		->frames
		->scripts
		->all
		->stylesheets

Объект navigator используется для работы с фреймами. Предпринята попытка разрешить проблемы взаимодействия фреймов. Если HTML-документ состоит из нескольких фреймов, то объект navigator представляет собой массив отдельных окон, не связанных между собой. Это скорей заявка на будущее. Сейчас редко используется.
Объект event - предназначен для обработки событий, происходящих на HTML-странице. Наиболее активно используется в DHTML.
Объект screen имеет два свойства: wigth и heigt - это разрешение экрана пользователя. Можно прочитать размер экрана пользователя и в зависимости от этого прописать размер, например, таблицы.
x=windows.screen.wigth;
y=windows.screen.heigt;

Методы и свойства объекта document (объекты третьего уровня).

embeds - позволяет подключать аудио-видео элементы в HTML-страницу, массив содержащихся на HTML-странице аудио-видео вставок.
plugins - массив содержащихся на HTML-странице компонентов activeX.
stylesheets - массив, содержащий таблицы стилей.
all - содержит все объекты, присущие браузеру IE.
Проверка осуществляется следующим образом: проверяется существование такого объекта

if(document.all){
// это IE 4.0 и выше}
else{
// это не IE 4.0}