В статье рассказывается как создать приложение сложения двух чисел на HTML + JavaScript.
Приготовления
Ничего не требуется кроме блокнота и браузера.
Создание болванки
Создаем текстовой документ под именем index.html .
Закинем в него простую болванку HTML5 документа:
lang="ru">charset="utf-8"/>name="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"/>Программа сложения двух чисел
Если мы сохраним документ и откроем в браузере, то увидим пустое белое окно, так как ничего видимого в документе пока нет — это просто болванка с шапкой, где располагаются некоторые мета-тэги (по сути их тоже можно было выкинуть), и пустое тело.
Наполнение HTML
Так как нам нужно приложение, которое будет складывать два числа, то нужно два поля ввода текстовой информации. Следовательно, их нужно будет размещать в некоторой форме. Поэтому в теле HTML документа разместим такую форму:
Каждое поле имеет свой идентификатор id с названием переменной a и b . Также они имеют начальное наполнение.
Нам нужна кнопка для вычислений. Обычно на форме используется input тэг с type=submit , но он вызовет передачу параметров в форме с переходом на эту же или другую страницу. Поэтому используем обычную кнопку:
type="button"value="Сложить 2 два числа"onclick="addition();"/> />
При клике на кнопку будет вызываться функция JavaScript по имени addition() , которую позже пропишем.
Кроме этого, нам нужно место, куда JavaScript будет записывать результат вычислений. Для этого после формы пропишем пустой слой с определенным идентификатором id=»result» :
Общий документ будет иметь вид:
lang="ru">charset="utf-8"/>name="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"/>Программа сложения двух чиселid="a"type="text"value="1"/> />id="b"type="text"value="1"/> />type="button"value="Сложить 2 два числа"onclick="addition();"/> />id="result">
Если мы сохраним документ и его откроем, то получим следующее:
Функция JavaScript
Теперь пропишем функцию addition() . Для этого пропишем к голове страницы пока пустую функцию внутри тэга script :
Общий вид документа будет иметь вид:
lang="ru">charset="utf-8"/>name="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"/>Программа сложения двух чиселfunctionaddition()<>id="a"type="text"value="1"/> />id="b"type="text"value="1"/> />type="button"value="Сложить 2 два числа"onclick="addition();"/> />id="result">
Что нам нужно в этой функции? Вначале нам нужно найти соответствующие поля ввода текстовой информации и считать те значения, которые там записаны. Поиск элементов будем осуществлять с помощью функции getElementById() .
При этом сразу переведем значения из строкового типа в числовые целого типа:
Теперь в переменных a и b хранятся значения в виде чисел. А, если там вообще ничего не будет в поле ввода? Тогда там будет храниться NaN значение. Нам это не нужно. Поставим проверку, что, если в поле ввода ничего нет, то пусть там будет как будто записан ноль:
if(isNaN(a)==true)a=0;if(isNaN(b)==true)b=0;
Теперь мы можем провести наши вычисления:
Осталось только записать полученный результат. Для этого найдем наш пустой слой с id=»result» и заменим его содержимое на то, что нам нужно, через свойство innerHTML :
lang="ru">charset="utf-8"/>name="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"/>Программа сложения двух чиселfunctionaddition()vara=parseInt(document.getElementById("a").value);varb=parseInt(document.getElementById("b").value);if(isNaN(a)==true)a=0;if(isNaN(b)==true)b=0;varc=a+b;document.getElementById("result").innerHTML=a+"+"+b+"="+c;>id="a"type="text"value="1"/> />id="b"type="text"value="1"/> />type="button"value="Сложить 2 два числа"onclick="addition();"/> />id="result">
Если сохраним файл, запустим его, и нажмем на кнопку, то получим следующее:
Unofficial JavaScript logo 2.svg by Chris Williams / (2019-06-10)
В статье рассказывается как создать приложение сложения двух чисел на HTML + JavaScript.
В статье рассказывается как создать приложение сложения двух чисел на HTML + JavaScript.
Harrix
Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
Мы можем открыть браузер и в нём перейти в инструменты разработчика. После этого мы можем открыть вкладку Консоль (Console). Теперь мы можем начинать вводить наши команды в пустое поле напротив символа >. После ввода команды нужно нажимать клавишу Enter, чтобы интерпретатор языка JavaScript начал свою работу и выполнил нашу команду. Что дальше?
Печатаем первое число. Ставим пробел » «. Печатаем символ сложения «+» (знак плюс). Ставим пробел » «. Печатаем второе число.
Чтобы проверить правильно ли JavaScript посчитает сумму двух чисел, нужно открыть «Инструменты разработчика» (CTRL+SHIFT+i) и вкладку «Console» в своём баузере (Google Chrome, Opera, Mozilla) и ввести туда эту команду.
После ввода команды сложения нужно нажать на клавишу ввода (Enter). После этого нажатия выполнится команда сложения и мы увидим результат — число 11 (одиннадцать).
Инструкция для переменных
Наши числа могут храниться в переменных. Пример:
Как сложить два числа, которые находятся в переменных? Пользуемся аналогичной инструкцией сложения, только теперь вместо чисел мы вводим имена переменных:
Чтобы проверить правильно ли JavaScript посчитает сумму двух переменных, нужно открыть «Инструменты разработчика» (CTRL+SHIFT+i) и вкладку «Console» в своём баузере (Google Chrome, Opera, Mozilla) и ввести туда эту команду.
После ввода команды сложения нужно нажать на клавишу ввода (Enter). После этого нажатия выполнится команда сложения и мы увидим результат — число 10 (десять).
Функция, которая складывает два числа в JavaScript
Мы можем написать свою собственную функцию, внутрь которой мы будем передавать нужные нам значения для сложения. Функция будет производить сложение и возвращать сумму.
functionsumAB(a,b)< returna + b >
Стрелочная функция, которая складывает два числа в JavaScript
Все стрелочные функции анонимны по своей природе. То есть у них нет имён — нет идентификаторов привязки. Для того чтобы иметь возможность обратиться к стрелочной функции, нужно положить её в какой-нибудь новый идентификатор через объявление переменной и символа присваивания =.
letsumQW = (q,w) => q+w sumQW(1,5) 6
Справка
Оператор сложения( + ) выполняет либо конкатенацию строк, либо числовое сложение.
Если два операнда будут типом данных Число(Number), то мы получим на выходе число.
Если один из операндов будет строкой, то мы просто склеим символьное представление числа со строкой.
Простое сложение в javascript: учимся складывать числа, строки и массивы
Доброго времени суток всем, кто читает данную статью. Сегодня я во всех подробностях расскажу про сложение в JavaScript. А если точнее, то мы разберем с вами, как производится сложение простых чисел, строковых переменных и массивов, в чем разница между унарными и бинарными операторами, какие существуют приоритеты операций, а также что под собой подразумевают инкремент и декремент.
Разберемся с терминами
В самом начале данной статьи я хочу, чтоб вы разобрали основные термины в языках программирования, связанные с вычислениями. Возможно, большинство из вас уже давненько оперирует ими. И это отлично.
Итак, стоит знать, что обозначают такие термины, как операнд, унарный и бинарный оператор.
Операндом называется тот элемент, к которому применяются некоторые операторы. Так, например, в записи «15 — 38» оператором выступает знак «минус», а операндами являются числа 15 и 38.
А что же такое унарный или бинарный оператор? Тут также все просто. Унарный (от слова «уно», что означает «один») применяется только к одному элементу. К примеру, -7. В этом случае «минус» — это унарный оператор. А бинарный (уже понятно, что означает «два») работает с двумя объектами. Здесь можно в качестве примера привести «12*701».
«У меня есть приоритеты! Поэтому плевал я на ваш порядок!»
Уверен, что всем известно о приоритетах выполнения арифметических операций. Однако с изучением языков программирования и конкретно JS в этот перечень добавляются и другие их виды. Всего существует 20 уровней, начиная с 0 и заканчивая 19.
В таблице, прикрепленной ниже, я перечислил несколько операторов в порядке их важности.
Размер приоритета
Тип оператора
Представление в коде
15
Логическое отрицание
!X
Префиксный инкремент
++X
Префиксный декремент
—X
14
Деление
X/Y
Умножение
X*Y
13
Вычитание
X-Y
Сложение
X+Y
10
Равенство
X==Y
3
Присваивание
X=Y
Если для решения какой-то задачи вам необходимо узнать и о других операторах, то перейдите на полную таблицу, представленную по [urlspan]ссылке[/urlspan].
Инкремент и декремент
Начнем разбор по приоритетам. Наиболее частыми операциями в JavaScript, как и в других языках программирования, являются названные в заголовке текущей главы. Их используют для уменьшения или увеличения значения конкретного элемента на единицу.
Существует два вида как инкремента, так и декремента: постфиксный и префиксный. При чем первый тип имеет приоритет 16, а второй – 15.
Разница их состоит в том, в какой момент идет изменение числа. Так, префиксные типы увеличивают или уменьшают значение сразу. Поэтому если в строке будет указано:
то при запуске программы отобразится 2. В то время как при использовании постфиксных операторов после запуска кода
Рассмотрим пример, который достаточно часто дают в тестах или на собеседованиях. Вам нужно сказать, что отобразится на экране при первом и втором выводах.
1
1
А теперь давайте разберем. В четвертой строке указано уменьшение i на единицу. Изменения вступят в силу при выполнении следующей строки программы. Поэтому во время вызова alert переменная i будет равна 2.
Префиксный инкремент сразу увеличивает значение на 1, а постфиксный вступает в силу на следующей строке. В итоге получим запись «3+3», а значит и в диалоговом окне выведется 6.
На следующей строке увеличение сработало и поэтому отобразится 4.
Что-то новенькое при сложении элементов
В JS складывать можно не только числа, а еще и другие типы переменных: строки, массивы и т.д. В качестве примера ознакомьтесь с частью программы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Во втором и третьем случае сложения происходит конкатенация строк, т.е. соединение их в одну. Вот тут и возникают проблемы у начинающих разработчиков.
Допустим вы вытащили определенное значение, которое является строковым varstr1=’10’; и при этом вам его надо суммировать с числом var a=3;. Если будет произведена операция varmix =str1+a;, то при выводе alert (mix); на экране появится «103». Чтобы этого не было, текстовую переменную нужно конвертировать следующим образом:
var mix = parseInt (str1, 10)+a;. //ответ: 13
Перейдем к массивам. В скриптовом языке существует функция, которая объединяет несколько массивов в один. Это concat.
var numbers1 = [1, 1, 1]; var numbers2 = [2, 2, 2]; // получается массив [1, 1, 1, 2, 2, 2]; var nums = numbers1.concat(numbers2); alert(nums);
var numbers1 = [1, 1, 1]; var numbers2 = [2, 2, 2]; // получается массив [1, 1, 1, 2, 2, 2]; var nums = numbers1.concat(numbers2); alert(nums);
Если же необходимо просуммировать все элементы массива, то здесь вас спасут только циклы.
На этой ноте я заканчиваю свою статью. Буду раз видеть вас в подписчиках моего блога. Не забывайте рассказывать об этом сайте своим друзьям и делиться с ними интересными публикациями. До новых встреч! Пока-пока!
