Js сложение чисел. Простое сложение в javascript: учимся складывать числа, строки и массивы. Основы работы со строками
Операторы: - (вычитание ), + (сложение ), * (умножение ) и / (деление ) работают точно так же, как и арифметические действия в математике. Оператор % (деление с остатком ) возвращает остаток от деления первого операнда на второй. Результат деления с остатком будет иметь тот же знак, что и первый операнд:
Alert(10 + 2); // 12 alert(10 - 2); // 8 alert(10 * 2); // 20 alert(10 / 2); // 5 alert(5 % 2); // 1 alert(-5 % 2); // -1
Оператор ** (возведение в степень ) имеет два операнда. Первый операнд является основанием степени, второй операнд - показателем степени, в результате оператор возвращает основание, возведённое в указанную степень:
2 ** 4; // 16
Все математические операторы преобразуют операнды по тем же правилам, что и функция Number() .
Унарные + (плюс) и - (минус)Оператор + (унарный плюс ) преобразует значение своего операнда в число и возвращает преобразованное значение. При использовании с числовым операндом он не выполняет никаких действий:
Var x = +"5";
Оператор - (унарный минус ) преобразует значение своего операнда в число, если это необходимо, и затем делает число отрицательным:
Var x = -5 + 3;
Унарные плюс и минус преобразуют операнды по тем же правилам, что и функция Number() .
Инкремент и декрементОператор ++ (инкремент ) увеличивает значение своего операнда на единицу. Если значение операнда не является числом, оператор автоматически преобразует его в число, увеличивает на единицу и возвращает результат, который присваивается обратно операнду.
Инкремент имеет две формы - постфиксную (оператор ставится после операнда) и префиксную (оператор ставится перед операндом). Если он используется в постфиксной форме, то сначала возвращается исходное значение операнда, и только затем значение операнда увеличивается на единицу.
JavaScript - Урок 1. Основные понятия Язык программирования JavaScript был разработан фирмой Netscape в сотрудничестве с Sun Microsystems и анансирован в 1995 году. JavaScript предназначен для создания интерактивных html-документов. Основные области использования JavaScript:- Создание динамических страниц, т.е. страниц, содержимое которых может меняться после загрузки.
- Проверка правильности заполнения пользовательских форм.
- Решение "локальных" задач с помощью сценариев.
- JavaScript-код - основа большинства Ajax-приложений.
Программы (сценарии) на этом языке обрабатываются встроенным в браузер интерпретатором. К сожалению, не все сценарии выполняются корректно во всех браузерах, поэтому тестируйте свои 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 определены следующие операции:
Операторы в выражении вычисляются слева направо в соответствии с приоритетами арифметических операций. Изменить порядок вычисления можно с помощью скобок.
Для каждого из арифметических операторов есть форма, в которой одновременно с заданной операцией выполняется присваивание:
В данном случае сначала вычисляется правый операнд, а затем полученное значение присваивается левому операнду.
Для того, чтобы можно было сравнивать два значения в javascript определены операции сравнения, результатом которых может быть только логическое значение: true или false:
В javascript определены логические операции:
&& - логическое И (AND),
|| - логическое ИЛИ (OR),
! - логическое НЕ (NOT).
Результаты воздействия логических операторов на различные комбинации значений операндов показаны в таблице:
| 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 будет значение "Привет Вася".
В конце приведем таблицу приоритетов операций в порядке их убывания. Приоритет операций определяет порядок, в котором выполняются операции в выражении.
Первый урок подошел к концу, он получился теоретическим, но без теории невозможно перейти к практике.
Листинг 1.9 представляет html-код, в котором заданы два числа (1 и 2), знак операции (+), форма с кнопкой «Посчитать» и текстовым полем для отображения введённых значений. Необходимо реализовать операции сложения соответствующих значений (Листинг 1.10).
Листинг 1.9. Файл 1.html
Сложение чисел
Форма представляет собой одно текстовое поле для вывода значений. Для организации символов «1», «2, «+» , использовались теги (можно было использовать другие теги, например или кнопки), а кнопка - для вывода окончательного результата. В контейнерах задано событие onClick , которое вызывает функцию addition(…) , передавая в JS-скрипт в качестве параметра соответствующее значение (1, 2, +). Кнопка с id="ok" вызывает функцию press_button() , которая не имеет параметров. В этой функции происходит подсчёт и вывод результата обратно в окно.
Листинг 1.10. Файл my_script.js
Первая функция в Листинге 1.10 вносит в текстовое поле формы значение «1», «2» или «+», в соответствии с тем, какой тег был нажат.
Вторая функция, считывает из текстового поля с id="answer" значение атрибута value и присваивает это значение переменной equation . Это строка, которая содержит в себе n символов. Например, возможна запись ""1+2+1"" или ""1212+1121+1++2"".
Поскольку мы заранее знаем, что используется операция сложения, знак «+» используется как разделитель строки на массив чисел. Для этого используется функция .split("+") . Переменная numbers содержит в себе эти значения.
Теперь необходимо пробежаться по массиву и сложить все элементы. Для этого используется цикл for (i in numbers){…} . Однако здесь есть два важных момента, которые необходимо учесть при сложении.
Во-первых, массив numbers содержит строковые значение. Если использовать операцию «+» для строковых значений произойдёт слияние элементов в одну строку. Мы же хотим получить ответ сложения чисел. Поэтому необходимо преобразовать строковые значения в числовые. Для этого используется функция parseInt (numbers[i]) . В неё передаётся элемент массива с номером = i.
Во-вторых, пользователь может изначально задать неправильную строку. Например, ""1212+1121+1++2"". В этом случае при использовании функции.split("+") будут получены не только числа, но и пустые значения. Пустые значения нужно отбросить. Для этого используется условие if (numbers[i] != "") .
Наконец, для подсчёта результатов была введена переменная var answer , изначально равная 0. К ней в цикле прибавляются значения на каждом шаге итерации. Затем, это значение возвращается обратно в текстовое поле document.getElementById("answer").value = answer.
Функции function addition(value) и press_button() хороши тем, что они подходят для сложения любых целых чисел. Можно задать все числа диапазона в тегах и обработать событие onClick() . Или позволить ввод в текстовое поле с id="answer" и запретить ввод букв.
Функция press_button() (в таком виде, как она написана сейчас) не подходит для обработки всех операций с числами. Поскольку функция split расщепляет строку только по одному значению.
Чтобы реализовать обработку других арифметических операций, можно, например, складывать два первых вводимых числа, анализируя знак между ними. Т.е. не дожидаясь нажатия кнопки «Посчитать», обрабатывать вводимые значения и выводить промежуточный результат (Листинг 1.11, 1.12).
Листинг 1.11. Файл 1.html
Сложение чисел
Обратите внимание, что в данном случае (Листинг 1.11) все значения передаются в функцию press_button() .
Листинг 1.12. Файл my_script.js
В функции press_button(value) происходит анализ переданного значения. Если это значение число (1 или 2), тогда последовательность вводится в текстовое поле.
Если переданное значение – знак «+», введённое до этого число прибавляется к ответу (answer += parseInt(number); ), введённая строка обнуляется: number = "";, ответ выводится в текстовое поле. Эти действия происходят только в том случае, если number != "", т.е. если перед вводом знака «+» было введено некоторое число.
Если переданное значение – слово «ok», снова происходит сравнение «было ли перед этим введено число». Если нет, тогда значение текстового поля не изменяется. Если число было введено, тогда происходит суммирование и вывод результата. Поскольку нажатие на кнопку не предполагает дальнейшего суммирование, ответ вновь принимает значение 0.
Последнее обновление: 1.11.2015
Математические операцииJavaScript поддерживает все базовые математические операции:
Сложение :
Var x = 10; var y = x + 50;
Вычитание :
Var x = 100; var y = x - 50;
Умножение :
Var x = 4; var y = 5; var z = x * y;
Деление :
Var x = 40; var y = 5; var z = x / y;
Деление по модулю (оператор %) возвращает остаток от деления:
Var x = 40; var y = 7; var z = x % y; console.log(z); // 5
Результатом будет 5, так как наибольшее целое число, которое меньше или равно 40 и при этом делится на 7 равно 35, а 40 - 35 = 5.
Инкремент :
Var x = 5; x++; // x = 6
Оператор инкремента ++ увеличивает переменную на единицу. Существует префиксный инкремент, который сначала увеличивает переменную на единицу, а затем возвращает ее значение. И есть постфиксный инкремент, который сначала возвращает значение переменной, а затем увеличивает его на единицу:
// префиксный инкремент var x = 5; var z = ++x; console.log(x); // 6 console.log(z); // 6 // постфиксный инкремент var a = 5; var b = a++; console.log(a); // 6 console.log(b); // 5
Постфиксный инкремент аналогичен операции:
A = a + 1; // a++
Декремент уменьшает значение переменной на единицу. Также есть префиксный и постфиксный декремент:
// префиксный декремент var x = 5; var z = --x; console.log(x); // 4 console.log(z); // 4 // постфиксный декремент var a = 5; var b = a--; console.log(a); // 4 console.log(b); // 5
Как и принято в математике, все операции выполняются слева направо и различаются по приоритетам: сначала операции инкремента и декремента, затем выполняются умножение и деление, а потом сложение и вычитание. Чтобы изменить стандартный ход выполнения операций, часть выражений можно поместить в скобки:
Var x = 10; var y = 5 + (6 - 2) * --x; console.log(y); //41
Операции присваиванияПриравнивает переменной определенное значение: var x = 5;
Сложение с последующим присвоением результата. Например:
Var a = 23; a += 5; // аналогично a = a + 5 console.log(a); // 28
Вычитание с последующим присвоением результата. Например:
Var a = 28; a -= 10; // аналогично a = a - 10 console.log(a); // 18
Умножение с последующим присвоением результата:
Var x = 20; x *= 2; // аналогично x = x * 2 console.log(x); // 40
Деление с последующим присвоением результата:
Var x = 40; x /= 4; // аналогично x = x / 4 console.log(x); // 10
Получение остатка от деления с последующим присвоением результата:
Var x = 10; x %= 3; // аналогично x = x % 3 console.log(x); // 1, так как 10 - 3*3 = 1
Как правило, для проверки условия используются операторы сравнения. Операторы сравнения сравнивают два значения и возвращают значение true или false:
Оператор равенства сравнивает два значения, и если они равны, возвращает true, иначе возвращает false: x == 5
Оператор тождественности также сравнивает два значения и их тип, и если они равны, возвращает true, иначе возвращает false: x === 5
Сравнивает два значения, и если они не равны, возвращает true, иначе возвращает false: x != 5
Сравнивает два значения и их типы, и если они не равны, возвращает true, иначе возвращает false: x !== 5
Сравнивает два значения, и если первое больше второго, то возвращает true, иначе возвращает false: x > 5
Сравнивает два значения, и если первое меньше второго, то возвращает true, иначе возвращает false: x < 5
Сравнивает два значения, и если первое больше или равно второму, то возвращает true, иначе возвращает false: x >= 5
Сравнивает два значения, и если первое меньше или равно второму, то возвращает true, иначе возвращает false: x 50 && percent < 12; console.log(result); //true
Возвращает true, если хотя бы одна операция сравнения возвращают true, иначе возвращает false:
Var income = 100; var isDeposit = true; var result = income > 50 || isDeposit == true; console.log(result); //true
Возвращает true, если операция сравнения возвращает false:
Var income = 100; var result1 = !(income > 50); console.log(result1); // false, так как income > 50 возвращает true var isDeposit = false; var result2 = !isDeposit; console.log(result2); // true
Строки могут использовать оператор + для объединения. Например:
Var name = "Том"; var surname = "Сойер" var fullname = name + " " + surname; console.log(fullname); //Том Сойер
Если одно из выражений представляет строку, а другое - число, то число преобразуется к строке и выполняется операция объединения строк:
Var name = "Том"; var fullname = name + 256; console.log(fullname); //Том256
В конце напишем небольшую программу, которая продемонстрирует работу с операциями над переменными. Для этого определим следующую веб-страницу index.html:
JavaScript var sum = 500; // сумма вклада var percent = 10; // процент по вкладу var income = sum * percent / 100; // доход по вкладу sum = sum + income; // определяем новую сумму console.log("Доход по вкладу: " + income); console.log("Сумма вклада после первого года: " + sum);
В скрипте объявляются три переменных: sum, percent и income. Переменная income вычисляется по остальным двум переменным с помощью операций умножения и деления. И в конце ее значение суммируется с значением переменной sum.
Раздел операции над переменными: : их сложение - это важный момент в изучении JavaScript , так как полученные здесь знания будут применяться постоянно.
Из предыдущего раздела кое-что о переменных Вам уже известно: создание переменных, вывод на экран их значений и правила работы с именами переменных - этот материал Вам знаком.
Приступаем к выполнению операций над переменными: сложение, вычитание, умножение и деление. И начнём, пожалуй, с чисел.
То есть с переменных, значениями которых являются числа.
// Создаём три переменных
var apple = 20 , orange = 30 , total_fruits;
// В переменную total_fruits заносим сумму двух переменных
total_fruits = apple + orange
document .write (total_fruits );
// Снова создаём три переменных
var apple = 20 , price = 17 , total_Sum;
// В переменную total_Sum заносим произведение двух переменных
total_Sum = apple * price
document .write (total_Sum );
Как видите в выполнении операций сложения и умножения над переменными, которые имею числовые значения, ничего сложного нет. С вычитанием и делением дело обстоит точно так же.
Обращаю Ваше внимание на то, что сейчас мы работали с числовыми значениями переменных.
Как Вы знаете из предыдущих примеров , в качестве значения переменной может выступать не только число, но и строка, то есть текст или фрагмент кода и т.п...
Так вот операцию сложения можно применять и к строковым значениям переменных. В этом случае происходит не сложение в математическом смысле этого слова, а соединение значений переменных .
Обратимся к примеру...
// Создаём четыре переменных
var name = " Иван", family = " Иванов", otch = " Ильич", FIO;
// В переменную FIO заносим сумму трёх переменных, как бы соединяем их значения.
// И добавляем тег
Который обозначит новый абзац
FIO = family + name + otch + "
document .write (FIO );
// Создаём три переменных.
var name = "Пётр", family = "Петров", otch = "Кузьмич";
// В переменную FIO также заносим сумму трёх переменных. И добавляем пробелы между переменными
var FIO = family + " " + name + " " + otch ;
document .write (FIO );
Иван Иванов Ильич
Петров Пётр Кузьмич
В приведённом примере мы соединили строковые значения трёх переменных при помощи операции сложения.
Чтобы фамилия, имя и отчество не получились слитыми: ИвановИванИльич , в первом случае пробелы были проставлены изначально - в значении каждой переменной, а во втором варианте пробелы были добавлены в итоговую переменную FIO при помощи всё той же операции сложения.
Фрагменты кода добавляются аналогично, что мы и сделали в первом случае: добавили тег "
" для того чтобы следующий вывод переменной FIO начинался с нового абзаца.
Теперь попробуем соединить переменную, содержащую число с переменной содержащей текст.
var myStreet = "Димитрова " , myHouse = 121 ;
