Введение в JavaScript

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


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

var NameofVariable1, NameofVariable2 = 567;

Здесь переменная NameofVariable1 просто объявлена, а переменная NameofVariable2 еще и инициализирована при объявлении и ей присвоено значение 567.

   Областью видимости переменной является текущая функция или, в случае объявления вне функции, весь текущий документ (web-страничка).

Пример:

var globalString;
function bracket()
 {
  var localString = "[" + globalString + "]";
  document.write(localString);
 }

   В вышеприведенном примере переменная globalString может быть использована в любой функции или сценарии текущего документа (такие переменные называют глобальными для данного документа), а переменная localString видна только внутри функции bracket (такие переменные называют локальными переменными функции). Как Вы видите, при инициализации локальной переменной мы можем использовать значение глобальной переменной.


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

• численный;
• логический;
• строковый;

   Численные переменные могут содержать целые числа и числа с плавающей точкой. Целые числа могут быть выражены в обычном десятичном (по основанию 10), шестнадцатеричном (по основанию 16) или восьмеричном (по основанию 8) представлении. Шестнадцатеричные числа включают цифры 0-9 и буквы a-f, в JavaScript они записываются с комбинацией символов 0x (ноль-x) перед числом. Восьмеричные числа включают только цифры 0-7 и в JavaScript записываются с ведущего нуля. Например, десятичное число 23 представляется в шестнадцатеричном виде как 0x17 и в восьмеричном как 027. Числа с плавающей точкой представляют собой дробные части целых чисел и должны включать в себя, по крайней мере, одну цифру и десятичную точку либо символ экспоненты (e).
   Логические переменные могут иметь только два значения: true (истина) или false (ложь). Вместо true и false можно использовать соответственно 1 и 0, что эквивалентно.
   Строковые переменные содержат любое количество символов - строку. При присваивании строковой переменной значения (строки) строка всегда окружена одинарными или двойными кавычками.

var variable1 = 534, variable2 = true, variable3 = "строка";

Мы объявили переменные:
variable1 - численная;
variable2 - логическая;
variable3 - строковая;

   А использование обратного слеша "\" позволяет вставлять в строку специальные символы. Например:

document.write("\"Сделайте это\", - сказал он.");

выводит фразу "Сделайте это", - сказал он.


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

var oneString = "1";
var oneInt = 1;
var oneConcat = oneString + oneInt;
// здесь значение переменной oneConcat равно "11"
oneString = 1;
oneConcat = oneInt + oneString;
// здесь значение переменной oneConcat равно 2

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


   Для закрепления приведем пример, в полном листинге HTML, где используется вызов функции и замена типов данных.

   Пример:

<html>
<head>
<title>Пример №2 использования JavaScript</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
var variable1, variable2; // Объявляем глобальные переменные variable1 и variable2
function calculate()
 {
 variable1 = prompt ("Пожалуйста, введите значение переменной variable1:", "0" );
 variable2 = prompt ("Пожалуйста, введите значение переменной variable2:", "0" );
 var variable3, variable4; // Объявляем локальные переменные variable3 и variable4
 variable3 = variable1 + variable2;
 variable4 = parseFloat(variable1) + parseFloat(variable2);
 alert("variable1 = "+variable1+" \nvariable2 = "+variable2+" \nvariable1 + variable2 (как строк) = "+variable3+" \nvariable1 + variable2 (как чисел) = "+variable4+"");
 }
// -->
</SCRIPT>
</head>
<body>
<form>
<input onclick="calculate()" type=button value="Вычислить">
</form>
</body>
</html>

   Cценарий JavaScript опять помещаем внутри тегов <head> и </head>, что гарантирует загрузку сценария до загрузки всей странички. В сценарии объявляем две глобальные переменные и функцию calculate. В теле документа мы создали форму с одной единственной кнопкой "Вычислить". При описании кнопки вставили обработчик события onclick (это событие возникает, когда пользователь выполняет щелчок мышкой на объекте, в данном случае на кнопке). Итак, после возникновения события onclick осуществляется вызов функции calculate (без параметров, так как внутри скобочек () ничего нет), которая уже была описана в заголовке (head) документа.
   Рассмотрим, что представляет собой функция calculate. Переменным variable1 и variable2 присваиваем значения, полученные после использования метода prompt (этот метод отображает диалогое окно для ввода данных). Тут следует заметить важную деталь: метод prompt возвращает данные в строковом виде, т.е. если вы ввели число 456, то метод вернет не число 456, а строку из трех символов "456". Кроме того, если пользователь в диалоговом окне метода prompt нажмет "Отмена", соответствующей переменной будет присвоено значение null. Далее объявлены две локальные для данной функции переменные variable3 и variable4. Переменной variable3 присваиваем значение variable1 + variable2 и поскольку variable1 и variable2 - строковые переменные, то выполняется конкатенация (объединение) этих строк. Переменной variable4 присваиваем значение parseFloat(variable1) + parseFloat(variable2). parseFloat - это метод верхнего уровня, не связанный ни с каким объектом. Его синтаксис такой: parseFloat(string). Метод parseFloat анализирует строковый аргумент (string) и возвращает число, с плавающей запятой или нет в зависимости от строкового аргумента. Если метод parseFloat не может преобразовать строку в число (например, встретив букву), то он возвращает значение NaN. Итак, если преобразование прошло успешно осуществляется сложение двух чисел, результат которых присваивается переменной variable4. Далее мы используем метод alert, который выводит на экран диалоговое окно с кнопкой Ok и определенным сообщением; прежде чем пользователь сможет продолжить работу со страницей, он должен нажать кнопку Ok. Cинтаксис этого метода следующий: alert(message). Использовав в качестве сообщения приведенную в примере строку, мы выводим необходимый нам текст и значения переменных, а \n означает перевод последующего текста на новую строку (для более наглядного восприятия).
   Используя код примера, вы можете создать html-файл и сами прочувствовать, как работает приведенный скрипт. Copyright Atoev Jake company © 2001