Переменные и действия над ними

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

либо внутри страницы HTML:

Переменные в данном языке задаются простым указанием. Например, таким:

var orange = "Апельсин"; - текстовая переменная. Эта переменная объявлена элементом var.

one = "1"; - тоже текстовая переменная но не объявлена, при этом сохраняет работоспособность.

one = 1; - числовое значение, не объявленное заранее

Существуют глобальные и локальные типы переменных. Локальные объявляются элементом var В этом случае переменная «видна» только в коде отдельной программы, если файл является внешним, или внутри функции или другого оператора, который содержит в себе некий алгоритм действий с ней связанный. Глобальная же переменная видна из всех частей программы, в том числе и функций. Она объявляется простым указанием имени переменной и его значения, т.е. one = "1"; - это и есть глобальная переменная.

Следует заметить, что все переменные, выражения, значения массивов и функций заканчиваются точкой с запятой «;». Если её нет хотя бы в одном месте, то вся программа не выполнится. А с учетом того, что отладчика для такого языка не предусмотрено, то искать ощибку весьма проблематично.

Как можно заметить, переменные необязательно объявлять и явно указывать их тип. Данный язык может интерпритировать сам тип переменной.

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

Если приложение представляет собой огромный набор операторов, необходимы комментарии (пояснение к отдельной части программы). В JavaScript комментарии могут записываться следующими способами: // "пояснения" (этот способ позволяет создать комментарий только на одной строке) и /* "пояснения" */ (этот способ предпочтительнее предыдущего тем, что позволяет писать несколько строк комментария).

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

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

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

a = "Привет";

b = "мир!";

с = a + b + "!";

В этом случае результатом действий будет таким: Приветмир!! Обратите внимание, что между словами нет пробела. Это можно исправить двумя путями:

с = a + " " + b + "!";

или

a = "Привет";

b = " мир!";

с = a + b + "!";

Над числами можно совершать различные арифметические действия:

сложение - + вычитание - -, умножение - *, деление - /.

В случае, если необходимо округлить число существует оператор округления. Его синтаксис таков:

0.1234.toFixed(2) = 0.12

Обратите внимание на точку между числом и toFixed(). Это означает, что над переменной или числом выполняется некое действие, в данном случае округление до 2-го знака после запятой.

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

Вывод на экран в языке JavaScript осуществляется при помощи операторов

document.writeln(); - вывыод на экран виде обычного текста

alert(); - вывод значения в дополнительном окне программы браузера

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

document.writeln("Привет мир!"); и alert("Привет мир!");

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

а = "Привет мир!";

document.writeln(a); и alert(a);

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

if (условие)

{

действия в случае выполнения условия

}

else

{

действия в случае не выполнения условия

}

Условия выполняются как с текстовыми так и с числовыми значениями. Для этих действий предусмотрены операторы сравнений, а также логические операторы.

Операторы сравнения выполняют непосредственное сравнение одного значения с другим. Они бывают следующих видов:

==	если операнды равны.
!=	если операнды не равны.
===	если операнды равны и одного типа.
!==	если операнды не равны и/или не одного типа.
>	если левый операнд больше правого.
>=	если левый операнд больше правого или равен ему.
<	если левый операнд меньше.
<=	если левый операнд меньше правого или равен ему.

Для того, что бы получить результат сравнения не нужно указывать, что именно возвратит данная операция, просто в зависимости от сравнения, выполнится тот или иной блок кода. Однако, если по результатам проверки, нужно точно, что именно возвращает данное сравнение. то следует помнить следующее: если условие выполняется, то операция возвращает true, в противном случае – false.

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

&&	Логическое И
\|\|	Логическое ИЛИ
!	Логическое НЕ

Пример 1:

a = "Деньги есть";

b = "Денег нет";

if ("Деньги есть" == a)

{ alert("Идем в магазин"); }

else { alert("Не идем в магазин"); }

В этом примере выведится на экран «Идем в магазин», так как переменная точно совпадает со значением текста условия. Однако, в следующем примере

Пример 2:

a = "Деньги есть";

b = "Денег нет";

if ("Деньги есть" == b)

{ alert("Идем в магазин"); }

else { alert("Не идем в магазин"); }

на экране появится «Не идем в магазин», так как переменная не содержит искомого значения.

Следует отметить также, то что большое значение имеет регистр букв в текстовых переменных, так если он не совпадает с регистром букв в условии сравнения, то сравнение так же выведит «Не идем в магазин»

Пример 3:

a = "Деньги есть";

b = "Денег нет";

c = "Магазин закрыт";

if ("Деньги есть" == a && c!= "Магазин закрыт")

{ alert("Идем в магазин"); }

else { alert("Не идем в магазин"); }

Здесь выполнится первое условие, так как оба условия совпадают, однако, если в условии будет указано: "Деньги есть" == a && c == "Магазин закрыт", то выполнится второе условие, так как второй элемент сравнения вернёт сообщение о ложности утверждения.

Сравнение можно делать не раз с одной и той же переменной, при этом вполне допустима такая запись:

Пример 4:

a = "10";

b = -1;

if (a == "")

{ c = "А не является пустым значением"; }

else { с = "Является числом, однако записано, как текстовая переменная"; }

if (a!= "" && b == 1)

{ c = a*b; }

if (b!= "" && a == 1)

{ c = a*b; }

document.writeln(c);

В этом примере значение перемсенной С будет равно -10, так как удовлетворилось одно из условий, в частности предпоследнее. Здесь стоит отметить, что элемент else фигурирует только раз, после первого сравнения. Такая запись допустима. Однако не допустимо, отсутствие else, или его наличие в самом конце всех сравнений. В первом случае программа не будет выполняться, так как нет обязательного тега при работе с оператором сравнения (if else), а во втором – потому что всегда будет выполняться условие else. Связано последнее с тем, что else хоть раз, но по синтаксису сравнений должен выпониться, в итоге он выполняется, и присваевает переменной свое неверное значение, и так как был последним, то и его результат будет окончательным в этой операции.

В случае же, если else стоит именно за первым сравнением, то, если после этого сравнения были другие, содержащие условия, которые не выполняются, то верным будет, то, что выполнилось (было подтверждено) последним. А если и среди них не было совпадений условий, то значение выполняется else.

Функции

Функция – это набор алгоритмических действий, содержащийся в одном, замкнутом объекте.

Синтаксис ее такой:

function имя(переменная1,переменная2)

{ алгоритм }

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

Кроме того, если в функции есть несколько переменных и действий над ними, то следует указать, какую переменную должна вернуть функция. Делается это при помощи оператора returt. Он употребляется только при работе с функциями. Для того чтобы вывести на экран результат, необходимо указать имя функции в операторе вывода. Имя это не только название, но и «()», поэтому в общем виде код будет выглядеть следующим образом:

Пример:

function umnojenie()

{

a = 5;

b = 2;

c = a*b;

return c;

}

document.writeln(umnojenie());

Результатом данного примера станет число 10. Однако, универсальностью данная функция не отличается. Так в случае умножения других двух чисел, необходимо писать новую функцию. Поэтому, существуют различные методы, позволяющие передавать значения переменных в функцию. При этом синтаксис выражения изменится на следующий:

Пример:

function umnojenie(a, b)

{

c = a*b;

return c;

}

document.writeln(umnojenie(10, 2) + "" + umnojenie(20, 2));

Здесь в имени функции идет точное указание имен переменных, которые передаются в функцию. А в моменты вывода функции на экран указываются их значения. В результате, будут выведены числа 20 и 40.

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

Все 4 варианта вызова функции через ссылку будут верными.

Обработчиков событий огромное количество. Поэтому рассматривать их всех не имеет смысла. Среди самых часто использующихся выделяют следующие:

onClick - Выполняет код JavaScript, когда возникает событие click; то есть, когда сделан щелчок по объекту или форме. (Событие click является комбинацией событий MouseDown и MouseUp).

onLoad - Выполняет код JavaScript при возникновении события load; то есть, когда браузер закончил загрузку окна или всех фрэймов тэга FRAMESET. Используйте обработчик onLoad в тэге BODY или FRAMESET, например, < BODY onLoad="...">.

Для тэгов FRAMESET и FRAME: событие обработчика onLoad во фрэйме (помещённого в тэг BODY) возникает до onLoad тэга FRAMESET (помещённого в тэг FRAMESET).

Для изображений обработчик onLoad указывает скрипт, исполняемый при выводе изображения. Не путайте вывод изображения с загрузкой изображения. Вы можете загрузить несколько изображений, затем вывести их поочерёдно в одном и том же объекте Image путём установки свойства src объекта. Если Вы изменяете изображение, выводимое таким образом, onLoad выполняется каждый раз при выводе изображения, а не только при загрузке изображений в память.

Если Вы специфицируете обработчик onLoad для объекта Image, который выводит циклическую GIF-анимацию (multi-image GIF), каждый цикл анимации включает обработчик onLoad, и обработчик выполняется однократно для каждого цикла.

Можно использовать обработчик onLoad для создания анимации JavaScript путём повторяющейся установки свойства src объекта Image.

Пример:

onMouseOut - Выполняет код JavaScript, когда возникает событие MouseOut; то есть каждый раз выходе указателя мыши за пределы области (в клиентской карте изображений) или гиперссылки.

В IE5.5 существует дублирующее события onMouseLeave, которое запускается непосредственно после даннго.

Следует заметить, что событие иногда не запускается.

onMouseOver - Выполняет код JavaScript, когда возникает событие MouseOver; то есть всякий раз при проведении указателя мыши над объектом или областью. Если мышь проводится из одной области клиентской карты изображений в другую, Вы получите onMouseOut для первой области, а затем onMouseOver - для второй области.

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

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

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

document.getElementById(' ID ').innerHTML = 'Я новый текст в строке.';

Модель состоит из обращения к некоему первому элементу страницы, это почти всегда document, затем оператор, означающий сложение элементов в единую модель, т.е. «.». Затем вызов специального оператора отправки информации методом get. В нем же указывается, в какой элемент происходит запись ElementById, в данном случае id, а в скобках указывается имя индентификатора, затем идет команда перезаписать содержимое у этого элемента и вставить значение, идущее следом, после знака равно.

Массивы

Как и большинство языков программирования, JavaScript предоставляет средство для работы с формализованными данными большого объема - массивы. Массив - это список переменных, к каждой из которых можно получить доступ по её номеру. Массив создаётся следующим образом:

// создание пустого массива

// задание значений первых двух элементов

var myArray = new Array()

myArray[0] = 'Москва'

myArray[1] = 'Хабаровск'

// создание нового массива

// и резервирование места для

// 100 переменных

var myArray = new Array(100)

// создание нового массива

// и явная инициализация первого элемента

var myArray = new Array('Элемент');

// косвенное создание массива

// из двух элменетов

var myArray = ['первый элемент', 'второй элемент']

Все массивы, независимо от способа создания, представляют собой экземпляры класса (объекта) Array. Добавление элементов производится простой инициализацией соответствующего элемента.

var myArray = new Array()

myArray[0] = 'Питер'

Массивы в JavaScript не обязательно должны быть "сплошными", т.е. содержать все элементы. При необходимости можно создавать так называемые "разреженные" массивы:

var myArray = new Array();

myArray[0] = 'Питер'

// пропустим myArray[1]

myArray[2] = 'Гомель'

// пропустим myArray[3]

myArray[4] = 'Рязань'

myArray[5] = 'Псков'

for(i = 0; i < 6; i++)

alert(myArray[i])

Этот код создаёт массив и заполняет только необходимые элементы. Теперь если мы попробуем получить значение не инициализированного элемента (в примере это первый и третий), то получим "undefined". Использование разреженных массивов иногда очень удобно, но требует опыта и внимательности, поэтому на начальном этапе лучше от них отказаться. Кроме того, разреженные массивы не дают выгоды по использованию памяти, т.к. место резервируется для всех элементов, в том числе не инициализированных.

Элементами массива могут быть переменные любого типа. Интересная особенность JavaScript - массив может одновременно содержать элементы различных типов, в том числе массивы:

// массив с элементами разных типов

var myArrayS = new Array();

myArrayS[0] = 'Ярославль';

myArrayS[1] = 10000;

myArrayS[2] = 'Ямал';

myArrayS[3] = 5000;

for(i = 0; i < myArrayS.length; i += 2)

alert('Город: ' + myArrayS[i] + '\n' +

'Население: ' + myArrayS[i + 1] + '\n')

// массив с элементами-массивами

var myArrayA = new Array()

myArrayA[0] = new Array('Ярославль', 10000);