Выражения, условия, операции, строки и числа

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

Здесь рассматриваются следующие понятия:

  • выражения;
  • условия;
  • различные операции и способы их использования;
  • преобразование строки в число и наоборот.

Что такое выражения и условия

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

Выражения и условия

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

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

1 + 2 = 3

Вы скомбинировали два значения (1 и 2), чтобы получить третье (3). Вот еще один пример:

3 + 3 - 1 = 5

Здесь комбинация трех значений (3,3 и 1) приводит к появлению нового значения (5).

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

Лимоны желтые? Да.

Или другой пример:

3 + 3 = 6? Да.

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

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

Знакомство с операциями

В выражениях и условиях данные комбинируются с помощью операций (operator). Если манипуляции осуществляются с какой-либо одной величиной, то такая операция именуется операцией с одним операндом (unary operator). Если таких величин две, то операция называется операцией с двумя операндами (binary operator), а если три - операцией с тремя операндами (ternary operator).

Давайте рассмотрим наиболее часто используемые операции.

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

Арифметические операции - это всем известные математические действия:

  • сложение (+);
    1 + 3 = 4
  • вычитание (-);
    2 - 1 = 4
  • деление (/);
    4 / 2 = 2
  • умножение (*);
    2 * 2 = 4
  • остаток от деления (%).
    9 % 5 = 4

Это были операции с двумя операндами.

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

5.5 % 2.2 = 1.1

Предупреждение JScript 1.0 преобразует действительные числа в целые перед выполнением операции взятия по модулю, то есть 5.3 % 2.2 = 1.

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

Примеры сценариев JavaScript

Далее описывается несколько примеров использования арифметических операций. Здесь приводится только содержимое блока SCRIPT. Все примеры созданы на основе шаблона.

Пример. Операция сложения (+) - см. рис. 6.1.

<script language="JavaScript">
<!-- Маскируемся!
var a = 6, b = 4;
alert(a + b);
// Снимаем маскировку. -->
</script>


Рис. 6.1. Использование операции сложения

Пример. Операция вычитания (-) - см. рис. 6.2.

<script language="JavaScript">
<!-- Маскируемся!
var a = 6, b = 4;
alert(a - b);
// Снимаем маскировку. -->
</script>


Рис. 6.2. Использование операции вычитания

Пример. Операция деления (/) - см. рис. 6.3.

<script language="JavaScript">
<!-- Маскируемся!
var a = 6, b = 3;
alert(a / b);
// Снимаем маскировку. -->
</script>


Рис. 6.3. Использование операции деления

Пример. Операция умножения (*) - см. рис. 6.4.

<script language="JavaScript">
<!-- Маскируемся!
var a = 6, b = 3;
alert(a * b) ;
// Снимаем маскировку. -->
</script>


Рис. 6.4. Использование операции умножения

Пример. Операция остатка отделения (%) - см. рис. 6.5.

<script language="JavaScript">
<!-- Маскируемся!
var a = 6, b = 4;
alert(a % b);
// Снимаем маскировку. -->
</script>


Рис. 6.5. Использование операции взятия по модулю

Упражнение Поработайте с арифметическими операциями, как было показано в примерах.

Операции сравнения

Операции сравнения используются для сопоставления выражений. К ним относятся следующие операции:

  • меньше (<);
    5 < 6
  • меньше или равно (<=);
    6 <= 6 или 6 <= 7
  • больше (>);
    7 > 4
  • больше или равно (>=);
    5 >= 5 или 5 >= 4
  • равно (= =);
    5 = = 5
  • неравно(!=).
    5 != 3

Это были операции с двумя операндами.

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

Логические операции

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

Далее перечислены три логические операции:

  • логическое И (and);
    &&
  • логическое ИЛИ (or);
    ||
  • логическое НЕ (not).
    !

Логическое И и логическое ИЛИ - операции с двумя операндами, а логическое НЕ - операция с одним операндом. Они позволяют свести воедино результаты сравнений нескольких переменных.

Логическое И ( && ) означает, что обе части выражения должны быть истинны. В качестве примера из жизни можно взять мысли водителя перед нажатием на педаль тормоза: машина едет слишком быстро && нужно затормозить.

Логическое ИЛИ (||) означает, что, по крайней мере, одна часть выражения должна быть истинной. Снова представим себе мысли водителя перед тем, как он включает фары: темнеет || плохая видимость.

Логическое НЕ изменяет значение истина/ложь на обратное. Например, фары включают, когда ! светлеет (то есть когда темнеет).

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

Операции с одним операндом

Как видно из названия, эти операции осуществляются с одной величиной. К ним относятся:

  • префиксное и постфиксное возрастание (increment);
    ++
  • префиксное и постфиксное уменьшение (decrement);
    - -
  • унарный плюс;
    +
  • унарный минус.
    -

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

Префиксное/постфиксное возрастание/уменьшение позволяет увеличить или уменьшить значение переменной на единицу. Однако результаты выполнения этих операций зависят от того, префиксная это операция или постфиксная.

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

- -а + 2 = 6,

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

Постфиксные операции действуют иначе, поскольку возрастание или убывание производится только после использования старого значения в выражении. Таким образом, если а = 5,то а++ + 2 = 7, потому что увеличение на единицу будет выполнено после вычисления значения выражения. Это справедливо и для следующего выражения:

а-- + 2 = 6,

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

Рекомендация Если символы «плюс» или «минус» стоят перед именем переменной, то сначала производится увеличение или уменьшение на еди-нииу. Но если они стоят после имени переменной, то сначала вычисляется значение выражения.

Пример. Префиксное возрастание (см. рис. 6.6).

<script language="JavaScript">
<!-- Маскируемся!
var a = 6, b = 2 ;
alert(++a + b);
// Снимаем маскировку. -->
</script>


Рис. 6.6. Использование операции префиксного возрастания

Пример. Префиксное уменьшение (см. рис. 6.7).

<script language= "JavaScript">
<!-- Маскируемся!
var a = 6, b = 2;
alert(--a + b);
// Снимаем маскировку. -->
</script>


Рис. 6.7. Использование операции префиксного уменьшения

Пример. Постфиксное возрастание (см. рис. 6.8).

<script language="JavaScript">>
<!-- Маскируемся!
var a = 6, b = 2;
alert(a+ + + b);
alert(a)
// Снимаем маскировку. -->
</script>


Рис. 6.8. Использование операции постфиксного возрастания

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


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

Пример. Постфиксное уменьшение (см. рис. 6.10).

<script language="JavaScript">
<!-- Маскируемся!
var a = 6, b = 2;
alert(a-- + b);
alert(a)
// Снимаем маскировку. -->
</script>


Рис. 6.10. Использование операции постфиксного уменьшения

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

Операция присвоения

Наиболее очевидным примером операции присвоения является простое присвоение (=). Эта операция используется для присвоения значения переменной. Вы


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

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

а = 3

Этой операцией также можно пользоваться для присвоения множеству переменных одного значения. В следующем примере нескольким переменным (а, Ь, с и d) присваивается значение 5:

a = b = c = d = 5

Прочие операции присваивания называются комбинированными (compound) и подобны операциям ++ и --.

Ниже приводится несколько примеров комбинированных операций:

  • X += 3 равноценно выражению х = х + 3;
  • X -= 3 равноценно выражению х = х - 3;
  • X *= 3 равноценно выражению х = х * 3;
  • X /= 3 равноценно выражению х = х / 3.

Пример. Комбинированная операция +-- (см. рис. 6.12).

<script language="JavaScript">
<!-- Маскируемся!
var x = б;
alert(х += 2) ;
// Снимаем маскировку. -->
</script>


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

Пример. Комбинированная операция -= (см. рис. 6.13).

<script language="JavaScript">
<!-- Маскируемся!
var x = 6;
alert(x -= 2);
// Снимаем маскировку. -->
</script>


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

Пример. Комбинированная операция *= (см. рис. 6.14).

<script language="JavaScript">
<!-- Маскируемся!
var x = 6;
alert(x *= 2);
// Снимаем маскировку. -->
</script>


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

Пример. Комбинированная операция /= (см. рис. 6.15).

<script language="JavaScript">
<!-- Маскируемся!
var x = 6;
alert(x /= 2);
// Снимаем маскировку. -->
</script>


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

Прочие операции

Есть еще три операции, не попадающие ни в одну из вышеперечисленных категорий. Это операция условия с тремя операндами (? :), операция конкатенации строк с двумя операндами (+) и операция typeof с одним операндом.

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

Рассмотрим следующий пример:

W = 1, X = 2, Y=3, Z = 4

Ans = (W > X) ? Y : Z

Ans оказывается равным 4.

Все не так сложно, как кажется. Вот что происходит в действительности. Если выражение перед символом ? (условие) оказывается истинным, переменной Ans присваивается значение, стоящее слева от двоеточия (:). В противном случае переменной присваивается правое значение (как в нашем примере).

Операция конкатенации строк позволяет создать единую строку из двух отдельных путем их объединения (конкатенации):

А = "JavaScript "
В = "в примерах"
С = А + В

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

И наконец рассмотрим операцию typeof. Эта операция используется для указания типа данных, хранящихся в переменной или вызванных условием.

Предупреждение Операция typeof отсутствует в браузере Netscape Navigator 2.02.

В табл. 6.1 приведена наиболее часто встречающаяся выходная информация в зависимости от используемого типа данных.

Таблица 6.1. Результаты использования операции typeof

Тип данных Результат
Неопределяемый "undefined"
Неопределенный "object"
Булево выражение "boolean"
Число "number"
Строка "string"
Объект (не функция) "object"
Объект (функция) "function"

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

Пример 1. Операция условия ?: (см. рис. 6.16).

<script language="JavaScript">
<!-- Маскируемся!
var w = 1, x=2, y=3, z = 4, ans;
ans = (w > x) ? у : z
alert(ans);
// Снимаем маскировку. -->
</script>


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

Пример 2. Результат изображен на рис. 6.17.

<script language="JavaScript">
<!-- Маскируемся!
var w=l, x=2, y=3, z=4, ans;
ans = (w < x) ? у : z
alert(ans);
// Снимаем маскировку. -->
</script>


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

Пример 1. Конкатенация строк + (см. рис. 6.18).

<script language="JavaScript">
<!-- Маскируемся!
var A = "JavaScript ", B = "в примерах";
C = A + B;
alert(C);
// Снимаем маскировку. -->
</script>


Рис. 6.18. Окно предупредительных сообщений со строкой «JavaScript в примерах»

Пример 2. Результат выполнения примера представлен рис. 6.19.

<script language="JavaScript">
<!-- Маскируемся!
var A = "10" , B = 5;
C = A + B;
alert(C);
// Снимаем маскировку. -->
</script>


Рис. 6.19. Окно предупредительных сообщений со строкой «105»

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

Пример 1. Операция typeof (см. рис. 6.20, 6.21 и 6.22).

<script language="JavaScript">
<!-- Маскируемся!
var x = "Привет", у;
alert("Значение переменной x относится к типу " + typeof(x));
alert("Значение переменной у относится к типу " + typeof(у));
alert("Значение переменной z относится к типу " + typeof(z));
// Снимаем маскировку. -->
</script>


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


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


Рис. 6.22. Окно предупредительных сообщений, показывающее тип переменной z

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

Снова о строках и числах

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

Калькулятор JavaScript

Пример. Начинайте с обычного HTML-шаблона:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<! - - Маскируемся!
// Снимаем маскировку. -->
</script>
</head>
<body>
</body>
</html>

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
var numl, op, num2, ans;
// Снимаем'маскировку. -->
</script>
</head>
<body>
</body>
</html>

Далее используйте метод prompt (), чтобы дать возможность пользователю ввести первое число, и присвойте его значение переменной num1:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
var numl, op, num2, ans;
numl = prompt("Введите число:","число");
// Снимаем маскировку. -->
</script>
</head>
<body>
</body>
</html>

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
var numl, op, num2 , ans ;
numl = prompt("Введите число:","число");
op = prompt("Введите операцию (+, -, *, / или %)","операция"};
// Снимаем маскировку. -->
</script>
</head>
<body>
</body>
</html>

Затем организуйте еще один запрос для второго числа. Присвойте его значение переменной num2.

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
var numl, op, num2, ans;
numl = prompt("Введите число:","число");
op = prompt("Введите операцию (+, -, *, / или %)","операция");
num2 = prompt("Введите второе число:","число");
// Снимаем маскировку. -->
</script>
</head>
<body>
</body>
</html>

А теперь решите задачу. Арифметические действия производятся с помощью метода eval (), выполняющего все вычисления. Но сначала нужно преобразовать значения numl и num2 из строк в числа. Это можно сделать, указав, что значения этих переменных являются числами. Результат вычислений присваивается переменной ans.

Примечание Метод eval () будет рассмотрен более подробно в последующих главах.

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
var numl, op, num2, ans ;
numl = prompt("Введите число:","число");
op = prompt("Введите операцию (+, -, *, / или %)","операция");
num2 = prompt("Введите второе число:","число");
ans = eval(Number(numl) + op + Number(num2});
// Снимаем маскировку. -->
</script>
</head>
<body>
</body>
</html>

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
var numl, op, num2, ans;
numl = prompt("Введите число:","число");
op = prompt("Введите операцию (+, -, *, / или %)","операция");
num2 = prompt("Введите второе число:","число");
ans = eval(Number(numl) + op + Number(num2));
alert(numl + " " + op + " " + num2 + " = " + ans);
// Снимаем маскировку. -->
</script>
</head>
<body>
</body>
</html>

Результат выполнения примера представлен на рис. 6.23.


Рис. 6.23. Окно предупредительных сообщений с результатом вычислений

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

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



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