Тема: JavaScript

1.Язык программирования JavaScript: области использования, основные области использования, операции.

1. Язык программирования JavaScript: области использования, основные области использования, операции.

Язык программирования JavaScript был разработан фирмой Netscape в сотрудничестве с Sun Microsystems и анансирован в 1995 году. JavaScript предназначен для создания интерактивных html-документов. Основные области использования JavaScript:

- Создание динамических страниц, т.е. страниц, содержимое которых может меняться после загрузки.

- Проверка правильности заполнения пользовательских форм.

- Решение "локальных" задач с помощью сценариев.

- JavaScript-код - основа большинства Ajax-приложений.

Программы (сценарии) на этом языке обрабатываются встроенным в браузер интерпретатором. К сожалению, не все сценарии выполняются корректно во всех браузерах, поэтому тестируйте свои javascript-программы в различных браузерах.

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

Прежде, чем приступить к написанию сценариев, необходимо ознакомиться с основными понятиями, такими как литералы, переменные и выражения.

Литералы

Литералы - это простейшие данные с которыми может работать программа.

Литералы целого типа - целые числа в представлении:

- десятичном, например: 15, +5, -174.

- шестнадцатеричном, например: 0х25, 0хff. Шестнадцатеричные числа включают цифры 0 - 9 и буквы a, b, c, d, e, f. Записываются они с символами 0х перед числом.

- восьмеричном, например: 011, 0543. Восьмеричные числа включают только цифры 0 - 7.

Вещественные литералы - дробные цисла. Целая часть отделяется от дробной точкой, например: 99.15, -32.45. Возможна экспоненциальная форма записи, например: 2.73e-7. В привычном виде это 2.73Х10-7, но в javascript знак умножения и 10 заменяются символом -e-.

Логические значения - из два: истина (true) и ложь (false).

Строковые литералы - последовательность символов, заключенная в одинарные или двойные кавычки. Например: "ваше имя", 'ваше имя'.

Переменные

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

Например:

var test

var _test

var _my_test1

Каждой переменной можно присвоить значение либо при ее инициализации (объявлении), либо в коде самой программы. Оператор присваивания обозначается знаком равно (=), но знак равенства здесь не имеет своего прямого значения. В данном случае он лишь указывает на то, что данной переменной присвоили значение.

Например:

var a=15

var b=23.15

var c='выполнено'

var s=true

Каждая переменная имеет тип, определяемый значением переменной. Так в нашем примере: переменные a и b имеют тип number, переменная c имеет тип string, а переменная s - логический тип.

Выражения

Выражения строятся из литералов, переменных, знаков операций и скобок. В результате вычисления выражения получается единственное значение, которое может быть числом, строкой или логическим значением.

В выражении a*b, a и b называются операндами, а * - знак операции. В JavaScript определены следующие операции:

операция	название
+	сложение
-	вычитание
*	умножение
/	деление
%	остаток от деления целых чисел
++	увеличение значения операнда на единицу
--	уменьшение значения операнда на единицу

Операторы в выражении вычисляются слева направо в соответствии с приоритетами арифметических операций. Изменить порядок вычисления можно с помощью скобок.

Для каждого из арифметических операторов есть форма, в которой одновременно с заданной операцией выполняется присваивание:

оператор	эквивалентный оператор присваивания
X+=Y	X=X+Y
X-=Y	X=X-Y
X*=Y	X=X*Y
X/=Y	X=X/Y
X%=Y	X=X%Y

В данном случае сначала вычисляется правый операнд, а затем полученное значение присваивается левому операнду.

Для того, чтобы можно было сравнивать два значения в javascript определены операции сравнения, результатом которых может быть только логическое значение: true или false:

операция	название
<	меньше
<=	меньше или равно
==	равно
!=	не равно
>=	больше или равно
>	больше

В javascript определены логические операции:

&& - логическое И (AND),

|| - логическое ИЛИ (OR),

! - логическое НЕ (NOT).

Результаты воздействия логических операторов на различные комбинации значений операндов показаны в таблице:

A	B	A&&B	A\|\|B	!A
true	true	true	true	false
true	false	false	true	false
false	true	false	true	true
false	false	false	false	true

Проще говоря, значение выражения A&&B истинно, если истинны оба оператора, и ложно в противном случае. Значение выражения A||B истинно, если значение хотя бы одного операнда истинно, и ложно в противном случае. Если значение операнда А истинно, то !A - ложно и наоборот.

Для строковых литералов определена операция конкатенация строк, т.е. их объединение. Обозначается эта операция знаком плюс (+). Результатом выполнения операции является также строка. Пример:

var st1="Привет";

var st2="Вася";

var st3=st1+st2;

В результате в переменной st3 будет значение "Привет Вася".

В конце приведем таблицу приоритетов операций в порядке их убывания. Приоритет операций определяет порядок, в котором выполняются операции в выражении.

название	обозначение
инкремент	++
декремент	--
отрицание	!
унарный минус	-
умножение	*
деление, остаток от деления	/,%
сложение	+
вычитание	-
сравнение	<, >, <=, >=
равенство	==
не равенство	!=
логическое И	&&
логическое ИЛИ	\|\|
присваивание	=, +=, -=, *=, /=, %=, !=

2.Размещение javascript-кода

Javascript-код может быть размещен как на самой странице, так и во внешнем файле.

Javascript-код на странице

Сценарии, написанные на языке javascript, могут располагаться на самой html-странице между тегами <script></script>, которые в свою очередь обычно находятся в тегах <head></head>. У тега <script> должен быть указан параметр language, который и указывает язык написания скрипта:

<html>

<head>

<title>Заголовок документа</title>

</head>

<body>

</body>

</html>

Теоретически теги <script></script> могут располагаться и в теле документа (в тегах <body></body>). Выполняться такой сценарий будет тогда, когда браузер "дочитает" страницу до этого места (до тегов <script></script>). Использовать такой способ сейчас не принято.

Javascript-код во внешнем файле

Создайте в блокноте страницу (пока пустую) и сохраните ее как script.js в ту же папку, где лежит html-страница:

3. JavaScript обработчики событий

Давайте напишем нашу первую программу. Для этого сделаем исключение и поместим наш javascript-код на html-странице. Итак, откройте (или создайте) html-страницу и поместите в нее следующий код:

<html>

<head>

<title>Заголовок документа</title>

document.write("Моя первая страница.");

</script>

</head>

<body>

</body>

</html>

Откройте эту страницу в браузере, она выглядит так:

Моя первая страница

Давайте разберемся как это работает. Браузер читает нашу html-страницу, видит оператор для выполнения document.write("Моя первая страница."); и выполняет его. Рассмотрим из чего состоит сам оператор (инструкция)

js3

При интерпретации html-страницы браузер создает объекты javascript. Они хранятся в виде иерархической структуры, отражая структуру документа, например:

js4

На самом верхнем уровне находится объект window, представляющий окно браузера и являющийся "родителем" всех остальных объектов. Расположенные ниже могут иметь свои подчиненные объекты. Так объект document (текущая страница) может иметь дочерний объект form (форма) и т.д.

Все объекты имеют методы (отделяются от объекта точкой), например:

document.write позволяет писать текст в текущую страницу,

window.open открывает новое окно браузера.

Также объекты имеют свойства, например:

document.bgcolor содержит значение фонового цвета текущей страницы,

document.title содержит заголовок страницы.

Все инструкции программного кода заканчиваются точкой с запятой. Об этом надо помнить.

Сценарий, который мы написали, выполнился немедленно после загрузки страницы. Однако в большинстве случаев нам нужно, чтобы сценарий выполнялся после каких-либо действий пользователя: нажатия на кнопку или ввода текста. Т.е. в ответ на пользовательское событие.

Для этого в тегах элементов страницы введены параметры обработки событий, задающие действия, выполняемые при возникновении события, связанного с элементом. Например:

Здесь Click - событие (щелчок по div-у), onClick - обработчик события, addText() - имя функции, которая сработает при возникновении этого события (щелчка по div-у).

Функции мы будем рассматривать в следующем уроке, а сейчас перечислим события, которые поддерживаются javascript. Запоминать их не следует, в дальнейшем можете просто обращаться к этой таблице.

событие	когда происходит	обработчик события
Blur	потеря объектом фокуса	onBlur
Change	пользователь изменяет значение элемента	onChange
Click	пользователь щелкает мыщью по объекту	onClick
DblClick	пользователь делает двойной щелчок мышью по объекту	onDblClick
DragDrop	пользователь перетаскивает мышью объект	onDragDrop
Error	возникновение javascript-ошибки	onError
Focus	окно или элемент формы получает фокус	onFocus
KeyDown	пользователь нажимает клавишу клавиатуры	onKeyDown
KeyPress	пользователь удерживает нажатой клавишу клавиатуры	onKeyPress
KeyUp	пользователь отпускает клавишу клавиатуры	onKeyUp
Load	документ загружается в браузер	onLoad
MouseDown	пользователь нажимает кнопку мыши	onMouseDown
MouseOut	указатель мыши выходит за пределы элемента	onMouseOut
MouseOver	указатель мыши помещается над элементом	onMouseOver
MouseUp	пользователь отпускает кнопку мыши	onMouseUp
Move	пользователь перемещает окно	onMove
Reset	пользователь нажимает кнопку "reset" формы	onReset
Resize	пользователь изменяет размеры окна или элемента	onResize
Select	пользователь выбирает элемент формы	onSelect
Submit	пользователь нажимает кнопку "submit" формы	onSubmit
Unload	пользователь закрывает документ	onUnload

Хорошим стилем программирования является оформление действий, выполняемых при обработке событий, в виде функций. Их мы и будем изучать в следующем уроке.

4.Функции

Функция - это именованная последовательность операторов (инструкций). Любая функция имеет следующий синтаксис:

function имя (){

оператор;

.......

оператор;

}

Сначала идет ключевое слово function, затем имя функции, затем в круглых скобках перечисляются параметры (если они есть), затем в фигурных скобках перечисляются операторы, т.е. последовательность выполняемых действий. Каждый оператор заканчивается точкой с запятой.

Рассмотрим на примере. Во втором уроке мы создали html-страницу, страницу script.js для функций и подключили одну к другой. Эти страницы мы и будем использовать. Поместим в html-страницу следующий код:

<html>

<head>

<title>Заголовок документа</title>

</head>

<body>

<div onClick="showMessage();">Щелкни меня</div>

</body>

</html>

Мы указали, что при щелчке пользователя по div-у (т.е. по словам "Щелкни меня") должна быть вызвана функция с именем "showMessage". Теперь на странице script.js надо написать саму функцию "showMessage". Открываем страницу script.js и пишем:

function showMessage(){

alert ("Вы щелкнули по div-у");

}

Наша функция "showMessage" будет выполнять одно действие - отображать окно предупреждений с текстом "Вы щелкнули по div-у". alert - это стандартная функция javascript, которая и выводит окно предупреждений, мы лишь задаем текст для этого окна.

В javascript есть стандартный набор функций, который можно использовать (например, alert) и так называемые пользовательские функции, т.е. те, которые мы создаем сами. Некоторые функции javascript мы будем изучать по мере необходимости, некоторым же будут посвящены отдельные уроки.

Вернемся к нашему примеру. Откройте вашу html-страницу с помощью браузера и щелкните по div-у. Можете щелкнуть и в примере ниже.

Щелкни меня

Таким образом, мы рассмотрели механизм работы обработки событий:

В html-странице мы привязываем к нужному элементу обработчик события (onClick, onMouseUp и т.д.), в качестве значения которого указываем имя функции, которая и должна сработать, когда настанет событие.

На странице с расширение .js мы пишем код этой функции, т.е. инструкции, которые должны быть выполнены, если функция инициализирована (к ней обратились).

Давайте усложним задачу и напишем сценарий, который будет рассчитывать площадь прямоугольника по введенным пользователем длине и ширине. Для этого сначала разместим на html-странице нужные элементы формы:

<html>

<head>

<title>Расчет площади прямоугольника</title>

</head>

<body>

Введите длину прямоугольника<input type="text" name="t1" size="10"><br><br>

Введите ширину прямоугольника<input type="text" name="t2" size="10"><br><br>

Площадь прямоугольника равна<input type="text" name="res" size="10">

</form>

</body>

</html>

Итак, пользователь вводит значения ширины и длины и нажимает на кнопку "Вычислить". После чего, в поле площадь должен появиться результат. Таким образом, событие наступает при нажатии на кнопку "Вычислить", значит именно к ней мы и привяжем обработчик события. Функцию вычисления площади назовем "areaRectangle":

.......

<input type="button" name="button" value="Вычислить"

onClick="areaRectangle();"><br><br>

.......

Теперь пришло время написать саму функцию "areaRectangle". Для этого откроем страницу script.js и напишем заготовку для функции:

function areaRectangle(){

}

Теперь надо написать тело функции. Для начала объявим три переменные: a - значение длины прямоугольника, b - значение ширины прямоугольника, s - площадь прямоугольника:

function areaRectangle(){

var a;

var b;

var s;

}

Значение (value) a должно браться из текущей страницы (document), из формы с именем "forma1", из текстового поля с именем "t1". Так это и записывается document.forma1.t1.value, т.е. перечисляются через точку имена объектов от родительского до нужного (иерархическую структуру объектов мы обсуждали в предыдущем уроке). Последним указывается необходимое свойство объекта (value).

Аналогично и для значения b - document.forma1.t2.value.

А наша переменная s - есть произведение a на b. Запишем это в тело функции:

function areaRectangle(){

var a=document.forma1.t1.value;

var b=document.forma1.t2.value;

var s=a*b;

}

Осталось только написать инструкцию записи вычисленной площади в текстовое поле с именем "res" нашей формы. Т.е нам надо, чтобы в текщую страницу, в форму с именем "forma1", в текстовое поле с именем "res", в качестве значения (value) было присвоено значение s. Так и запишем:

function areaRectangle(){

var a=document.forma1.t1.value;

var b=document.forma1.t2.value;

var s=a*b;

document.forma1.res.value=s;

}

Параметры функций

Обратите внимание, в функции мы используем имя формы - forma1, его мы и сделаем параметром. Т.е. перепишем нашу функцию следующим образом:

function areaRectangle(obj){

var a=obj.t1.value;

var b=obj.t2.value;

var s=a*b;

obj.res.value=s;

}

Т.е мы указали, что функция должна принять в качестве параметра какой-то объект (obj) и производить все действия с ним. Нам осталось на нашей html-странице указать имя объекта:

.......

<input type="button" name="button" value="Вычислить"

onClick="areaRectangle(forma1);"><br><br>

.......

Теперь, когда нам понадобится вычислить площадь на какой-либо другой странице, нам достаточно будет вызвать функцию areaRectangle(), а в скобках указать имя формы. Проверьте работу нашего сценария в браузере.

5.Ветвления в программе - оператор if

Очень часто возникает ситуация, когда нам нужно выполнить какое-либо действие в зависимости от какого-либо условия. Например, у нас интернет-магазин одежды. Мы спрашиваем у пользователя кто он (мужчина или женщина) и в зависимости от ответа отображаем список соответствующих товаров (мужских или женских). При написании подобных программ используется условный оператор if . Синтаксис у него следующий:

if B {S1}

else {S2}

где B - выражение логического типа, а S1 и S2 - операторы.

Работает это так: вычисляется значение выражения B, если оно истинно, то выполняется оператор S1, если оно ложно, то выполняется оператор S2.

Пример

function maxZnach(obj){

var a=1*obj.zn1.value;

var b=1*obj.zn2.value;

var c=1*obj.zn3.value;

var m=a;

if (b>m) m=b;

if (c>m) m=c;

obj.res.value=m;

}

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

В предыдущем уроке мы познакомились с оператором if. Он удобен, когда нужно совершить какое-либо действие в зависимости от выбора пользователя. Но что если таких выборов будет много? Например, мы знаем прогноз погоды на неделю вперед. А выдаем прогноз только на один день, на тот который выберет пользователь. Как это сделать?

Синтаксис у него следующий:

switch (B)

{

case L1: S1;

case L2: S2;

... ... ...

case Ln: Sn;

default:S

}

где B - выражение, L1, L2, ..., Ln - литералы, а S1, S2, ..., Sn - операторы.

Работает это так: вычисляется значение выражения B. Если B равно L1, то выполняется оператор S1. Если B равно L2, то выполняется оператор S2 и т.д. Если B не равно ни одному из значений, то выполняется оператор S.

Давайте перепишем код нашей последней функции с помощью оператора switch.

function Vday1(obj){

var a=obj.zn.value;

var s;

switch (a)

{

case 'понедельник': s="В понедельник будет ветрено, температура воздуха поднимется до +20 градусов";break;

case 'вторник': s="Во вторник будет солнечно, температура воздуха поднимется до +25 градусов"; break;

case 'среда': s="В среду будет прохладно, температура воздуха опустится до +17 градусов"; break;

case 'четверг': s="В четверг будет пасмурно, температура воздуха опустится до +10 градусов"; break;

case 'пятница': s="В пятницу будет облачно, температура воздуха поднимется до +15 градусов"; break;

case 'суббота': s="В субботу будет ветрено, температура воздуха поднимется до +27 градусов"; break;

case 'воскресенье': s="В воскресенье будет ясно, температура воздуха поднимется до +30 градусов";break;

default: s='Укажите правильно день недели'

}

obj.res.value=s;

}

Результат тот же, а код гораздо короче, да и читабельнее.

Оператор break используется, чтобы обеспечить завершение работы переключателя после выполнения нужного варианта. Если его опустить ничего не изменится, просто с ним сценарий работает быстрее, хотя в данном примере это и незаметно.

6.Циклы

Цикл for

Самый популярный вид циклов - цикл for. Синтаксис у него следующий:

for (A; B; I){S}

где

A - первоначальное выражение,

B - условие продолжения. Если это выражение ложно, то выполнение цикла завершается,

I - выражение инкремента,

{} - тело цикла,

S - операторы.

function summa(obj) {

var summa=0;

var a1=1*obj.a1.value;

var a2=1*obj.a2.value;

for (var i = a1; i <= a2; i++) {

summa+=i;

}

obj.result.value = summa;

}

Цикл while

Не менее популярный вид циклов - цикл while. Синтаксис у него следующий:

while (B){S}

где

B - условие продолжения. Если это выражение ложно, то выполнение цикла завершается,

{} - тело цикла,

S - операторы.

Иными словами, операторы S, выполняются до тех пор, пока условие B не станет ложным.

var i = 0;

while (i < 3)

{

alert(i);

i++;

}