Введение
Часть I. Знакомство с JavaScript
Глава 1. Введение в JavaScript
Глава 2. Внедрение JavaScript в HTML-документ
Часть II. Уроки языка
Глава 3. JavaScript в действии
Глава 4. Управление данными с помощью переменных
Глава 5. Массивы JavaScript и Escape-последовательности
Глава 6. Выражения, условия, операции, строки и числа
Глава 7. Использование операторов в языке JavaScript
Глава 8. Создание сценариев с помощью функций и событий
Глава 9. Наилучшее использование объектов
Глава 10. Выявление и исправление ошибок
Часть III. Варианты размещения сценария
Глава 11. Расширение кругозора
Часть IV. JavaScript и динамический HTML
Глава 12. Динамический HTML
Глава 13. Каскадные таблицы стилей
Глава 14. Объектная модель документа
Глава 15. Примеры, примеры, примеры

Управление данными с помощью переменных

Значения в языке JavaScript
Переменные в языке JavaScript
Отладка
Использование метода prompt() для присвоения значения переменной

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

Значения в языке JavaScript

Самое ценное в нашем мире - это информация. Каждый фрагмент информации в JavaScript рассматривается как значение (value). Так как информация может быть очень разнообразной, имеются различные категории значений. Простейшие типы данных в JavaScript принято называть основными типами (primitive types).

Три основных типа данных:

строка (string);
число (number);
булево выражение (boolean).

Строки

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

Здравствуйте и добро пожаловать!
Кто вы?
Мой рост - шесть футов.

Строки, вставляемые в сценарий JavaScript, заключаются в двойные или одинарные кавычки, например:

"Здравствуйте и добро пожаловать!"

Причина использования двух типов кавычек заключается в том, что двойные кавычки (") могут содержаться внутри строки, заключенной в одинарные кавычки ('), и наоборот. Например:

"J'm 6 feet tall"
'"Кто вы?" - спросил он.'

Строка может и вовсе не содержать символов. В этом случае она называется пустой строкой и обозначается пустыми кавычками:

Числа

JavaScript воспринимает два типа чисел. Это целые числа (integer) и числа с плавающей точкой (floating-point number).

Целые числа

Включают в себя положительные целые числа, например 1, 2, 3, отрицательные целые числа, например -1, -2, -3 и нуль - 0.

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

Примечание В книге используется только десятеричная система счисления.

Числа с плавающей точкой

Числа с плавающей точкой представляют собой числа с дробной десятичной частью:

3.1415926535897932384626433832795

Либо это числа, выраженные в экспоненциальном виде:

3.76е2

Примечание При экспоненциальной записи числа символ «e» в верхнем или нижнем регистре означает «10 в степени».

Число, начинающееся с нуля и содержащее десятичную точку, считается числом с плавающей точкой.

Предупреждение Число, начинающееся с нескольких нулей и содержащее десятичную точку (например, 005.5) воспринимается как ошибка.

В табл. 4.1 приводятся примеры чисел, использующихся в JavaScript, чтобы вам проще было освоиться с ними.

Большие и маленькие числа

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

Таблица 4.1. Примеры чисел, использующихся в JavaScript

Число	Описание	Десятичный эквивалент
91	Целое число	91
4.56е2	Число с плавающей точкой	456
0.001	Число с плавающей точкой	0.001
00.001	Ошибка
0.001	Четыре равных числа	0.001
.001	с плавающей точкой
1е-3
1.0е-3

Числа, используемые в JavaScript, могут быть как очень большими, так и очень маленькими. Под очень большими подразумеваются величины до 10³⁰⁸ (единица с тремястами восемью нулями), а под очень маленькими -10^-308(нуль целых с тремястами семью нулями и единицей после запятой).

Булевы выражения

Булевы выражения отличаются от строк и чисел тем, что могут принимать лишь два значения: true (истина) и false (ложь).

Примечание Булевыми эти выражения названы в честь английскою математика Джорджа Буля (1815—1864).

Ниже помещены примеры булевых выражений:

Собака лает = true
У собаки пять ног = false

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

Особые типы данных: числа, неопределенные и неопределяемые выражения

Помимо рассмотренных типов данных, встречаются еще несколько основных, менее очевидных типов. Далее приводятся четыре числовых значения:

положительная бесконечность;
отрицательная бесконечность;
положительный и отрицательный нуль;
несуществующее число (not a number — NaN).

Имеются еще два специальных типа данных:

неопределенный (null);
неопределяемый (undefined).

Что касается первых четырех типов, то вам не придется работать с ними (не будете же вы вводить в программу бесконечное число). Под несуществующим числом понимается результат бессмысленной математической операции (например, деления на нуль). Бесконечностью считается значение, превышающее 10³⁰⁸ (например, результат возведения 10³⁰⁰ в квадрат), и оно также не имеет для вас особого значения (если только не свидетельствует об ошибке).

Неопределенный тип может иметь только одно значение - null. В данном случае это свидетельствует о полном отсутствии полезной информации или каких-либо данных.

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

Переменные в языке JavaScript

Теперь, когда вам известно об используемых в языке JavaScript значениях, вы готовы к тому, чтобы войти в мир переменных (variable) JavaScript.

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

Переменная - это имя, присваиваемое ячейке памяти компьютера, которая хранит определенные данные во время исполнения сценария JavaScript. Возможно, это определение кажется несколько сложным, но на самом деле пользоваться переменными очень просто.

Создание переменных

В языке JavaScript переменные создаются довольно легко. Давайте вернемся к стандартному шаблону HTML, чтобы сразу ввести вас в курс дела:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

Прежде всего нужно создать переменную. Это можно сделать двумя путями: объявив ее заранее или создав «на лету». Сначала будут рассматриваться переменные, объявляемые заранее. Позже в этой главе рассказывается, каким образом они создаются «на лету».

Пример. Чтобы объявить (создать) переменную, в языке JavaScript используется оператор var, вслед за которым указывается имя, которое вы хотите присвоить переменной. В данном примере объявляется переменная под названием msg:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

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

Вот что следует знать об именах переменных:

в именах переменных можно использовать символы нижнего и верхнего регистра либо сочетание того и другого;
до объявления переменной ее значением считается undefined;
имя переменной не может начинаться с цифры;
в именах переменных недопустимы пробелы; если необходим разделитель, используется символ подчеркивания (_);
в именах переменных следует избегать символа доллара ($) поскольку он не воспринимается браузерами Internet Explorer 3.02 (поддерживающим JScript 1.0) и Netscape Navigator 2.02;
следует избегать использования имен переменных, отличающихся только символами верхнего и нижнего регистра (например, msg и MsG), поскольку JScript 1.0 не сумеет их различить.

Рассмотрим следующие примеры корректных имен переменных:

msg
Hello_all
Msgl
Msg_l

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

1msg - начинается с цифры;
helloall- содержит пробел;
var- зарезервированное слово JavaScript;
dollar$ - в имени содержится символ $;
msg и Msg - не используйте такие имена в одном сценарии, поскольку различаются они только регистром.

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
var msg;
msg = "Добро пожаловать в мир переменных JavaScript!";
// Снимаем маскировку. -
</script>
</head>
<body>
</body>
</html>

Пример. Если вы хотите, чтобы значением вашей переменной была не строка, а число, это делается так:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

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

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

Объявление нескольких переменных

На каком-то этапе освоения JavaScript вам потребуется объявить уже не одну, а несколько переменных.

Пример. Сделать это можно, объявляя каждую переменную в отдельной строке сценария JavaScript:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

Пример. Этот способ дает отличный результат, но затрудняет чтение кода. Намного удобнее объявлять все переменные в одной строке:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

Строка сценария начинается с оператора var, вслед за которым через запятую перечисляются все объявляемые вами переменные. В конце ставится разделитель строки - точка с запятой.

Предупреждение Пропуск запятой приводит к ошибкам!

Пример. Можете объявить переменные и присвоить им значения в одной строке:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

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

Вывод на экран значений переменных

Итак, вы объявили несколько переменных и присвоили им строковые или числовые значения. Теперь вы можете заставить их работать.

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

Пример. Начните с объявления двух переменных msgl и numl и присвойте им значе- ния "Привет всем" (строка) и 22 (число):

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

Затем воспользуйтесь методом alert (). Проверьте, чтобы он добавлялся на страницу после объявления переменных:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

Сохраните страницу и откройте ее в браузере, чтобы увидеть результат вашей работы (см. рис. 4.1).

Рис. 4.1. Окно предупредительных сообщений, отображающее значение переменной msg 1

Пример. Теперь вы можете вывести в другом окне значение второй переменной:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

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

Рис. 4.2. Второе окно предупредительных сообщений, отображающее значение переменной num 1

Упражнение Чтобы закрепить материал, усвоенный в этой главе, можете создать пару подобных примеров. Объявите несколько переменных и присвойте им значения разных типов; затем воспользуйтесь методом alert (), чтобы вывести значения переменных на экран. Вы добьетесь гораздо большего, если откажетесь от использования шаблона. Старайтесь поменьше копировать и вставлять. Пользуйтесь комментариями, чтобы облегчить чтение сценариев.

Отладка

Найдите ошибки в следующих примерах:

Пример 1

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

При первом использовании метода alert () указано имя переменной, которая не была объявлена и которой не было присвоено значение (msgll). Это пример значения undefined.

Пример 2

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

Здесь отсутствует запятая при объявлении переменных в строке:

var msgl = "Привет всем" numl = 22;

Пример 3

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

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

Использование метода prompt() для присвоения значения переменной

Иногда невозможно присвоить значения переменным непосредственно в сценарии. Например, в случае, когда вы задаете пользователю вопрос, ответ на который не знаете (если только на ваш сайт не заглядывает один-единственный посетитель).

Однако переменным легко присвоить значения в процессе выполнения сценария. Следующий пример показывает, как это делается с помощью метода prompt ():

Пример. Снова возьмите шаблон HTML и вставьте в блоке SCRIPT вызов метода

prompt():

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

Затем добавьте сообщение и текст по умолчанию, который вы хотите отобразить:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

Далее введенный пользователем текст надо представить в качестве значения некоторой переменной. Делается это очень просто. Вам лишь нужно указать в начале строки название переменной и поставить знак равенства (=):

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

Обратите внимание, что в данном случае переменная объявляется без использования оператора var. Объявление переменной «на лету» часто оказывается полезным, особенно если вы собираетесь использовать такую переменную для какой-то простой цели (например, чтобы запомнить короткую строку или число). Но если вы, предположим, хотите использовать ее для каких-либо математических вычислений, следует пользоваться оператором var. Так будет легче проследить за переменными. Кроме того, если уж вы решили использовать переменную, определенную с помощью оператора var, объявите ее заранее.

Теперь вам осталось вывести значение переменной yourname на экран в окне предупредительных сообщений:

Сохраните страницу и откройте ее в браузере. Сначала на экране появится окно запросов (см. рис. 4.3).

Рис. 4.3. Окно запросов с текстом поля ввода по умолчанию

Наберите ваше имя в поле ввода (см. рис. 4.4).

Рис. 4.4. Окно запросов с введенным текстом

После щелчка по кнопке ОК появится окно предупредительных сообщений, отображающее набранный вами текст (см. рис. 4.5).

Рис. 4.5. Окно предупредительных сообщений, отображающее значение переменной yourname

Если вы нажмете кнопку Cancel, переменной yourname будет присвоено значение null, которое и отобразится в окне предупредительных сообщений (см. рис. 4.6).

Рис. 4.6. Значение null в окне предупредительных сообщений

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

Пример. Чтобы убедиться в том, что вы можете изменить значение переменной, воспользуйтесь методом prompt() еще раз:

<html>
<head>
<title>Простая страница</title>
<script language3"JavaScript">

</script>
</head>
<body>
</body>
</html>

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

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

Присвоение одной переменной значения другой

При желании можно сохранить значение какой-либо переменной, присвоив его другой. То есть до того, как значение yourname будет изменено, его можно присвоить новой переменной с именем yourname2:

yourname2 = yourname;

Таким образом, объявлена новая переменная yourname2, которой присваивается то же значение, что и у переменной yourname. В результате на данный момент значения обеих переменных совпадают. Помните, что сделать это нужно до того, как изменится значение первой переменной!

Пример. Следующий пример это демонстрирует:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

Упражнение Попробуйте пользоваться методом prompt () для присвоения значе -ний переменным, объявленным «на лету» или с помощью оператора var. Потренируйтесь, присваивая значения одних переменных другим и используя эти переменные повторно. Обязательно пользуйтесь комментариями, чтобы облегчить последующее чтение кода.

[ Назад ] [ Вверх ] [ Далее ]