Умножение в html таблице
Добрый день. Существует таблица с несколькими значениями, каждое из которых нужно умножить на определенное число(Изначальное число выводить не обязательно), после чего вывести сумму умноженных чисел.
Каким образом выполнить эти действия?
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
HTML в таблице
Всем доброго времени суток. Прошу сильно не пинать, т.к. я не силен в HTML и поэтому возможно мой.
Жирная черта в HTML таблице
Подскажите, как можно вставить в таблицу одну жирную черту после определенной строки
html — лишние отступы в таблице
Здравствуйте! Очень нужна ваша помощь! У меня возникла проблема при работе с html. Таблица.
Объединение ячеек в таблице html
Подскажите, пожалуйста, в чем ошибка? <HTML> <HEAD> <TITLE>Стоимость билетов</TITLE> .
Базовая математика в JavaScript — числа и операторы
В этой части курса мы обсуждаем математику в JavaScript — как мы можем использовать operators (en-US) и другие функции, чтобы успешно манипулировать числами для выполнения наших задач.
| Необходимые условия: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript. |
|---|---|
| Цель: | Ознакомление с основами математики в JavaScript. |
Все любят математику
Хорошо, может быть, не все. Некоторые из нас любят математику, некоторые из нас ненавидели математику с тех пор, как мы изучали таблицу умножения в школе, а некоторые из нас находятся где-то между ними. Но никто из нас не может отрицать, что математика является фундаментальной частью жизни, и мы не можем обойтись без неё. Это особенно актуально, когда мы учимся программировать на JavaScript (или на любом другом языке, если на то пошло) — большая часть того, что мы делаем, опирается на обработку числовых данных, вычисление новых значений и т.д. Так что не удивительно, что JavaScript имеет полнофункциональный набор математических функций.
В этой статье обсуждаются только основные разделы, которые вам нужно знать сейчас.
Типы чисел
В программировании даже скромная система десятичных чисел, которую мы все так хорошо знаем, сложнее, чем вы думаете. Мы используем разные термины для описания различных типов десятичных чисел. Например:
- Целые — это целые числа, такие как: 10, 400, или -5.
- С плавающей точкой(или: с плавающей запятой) — имеют целую и дробную части, например: 12.5 или 56.7786543.
- Doubles — тип чисел с плавающей точкой, которые имеют большую точность, чем стандартные числа с плавающей точкой (что означает, что они точны для большего числа десятичных знаков).
У нас даже есть разные типы числовых систем:
- Бинарная — низкоуровневый язык компьютеров; нули и единицы (0 и 1);
- Восьмеричная — 8-ми разрядная, использует 0–7 в каждом столбце;
- Десятичная — 10-ти разрядная, использует 0-9 в каждом столбце;
- Шестнадцатеричная — 16-ти разрядная, используют 0–9 и потом a–f в каждом столбце. Вы, возможно, уже встречали эти числа, когда задавали цвет в CSS.
Прежде чем взорвётся ваш мозг, остановитесь прямо здесь и сейчас!
Во-первых, мы просто будем придерживаться десятичных чисел на протяжении всего курса; вы редко когда будете сталкиваться с необходимостью думать в других числовых системах, если вообще когда-либо с ней столкнётесь.
Во-вторых, в отличие от некоторых других языков программирования, JavaScript имеет только один тип данных для чисел, как вы догадались это Number . Это означает, независимо от типа чисел, с которыми вы работаете в JavaScript, обрабатывать вы их будете точно так же.
Для меня всё — числа
Давайте быстро поиграем с некоторыми числами, чтобы снова познакомиться с основным синтаксисом, который нам нужен. Введите команды, перечисленные ниже, в вашу консоль (developer tools JavaScript console), или используйте простую встроенную консоль.
-
Прежде всего, давайте объявим пару переменных и инициализируем их целым числом и числом с плавающей точкой, соответственно, затем введите имена переменных обратно, чтобы проверить, что все в порядке:
var myInt = 5; var myFloat = 6.667; myInt; myFloat;
typeof myInt; typeof myFloat;
Арифметические операторы
Арифметические операторы — это основные операторы, которые мы используем для различных математических операций, например таких, как сложение или вычитание:
| Оператор | Имя | Функция | Пример |
|---|---|---|---|
| + | Сложение | Объединение чисел в одно целое. | 6 + 9 |
| — | Вычитание | Вычитает правое число от левого. | 20 — 15 |
| * | Умножение | Умножает два числа вместе. | 3 * 7 |
| / | Деление | Делит левое число на правое. | 10 / 5 |
| % | Модуль числа | Возвращает значение остатка при делении первого числа на второе. Результат будет иметь тот же знак, что и первое число. | 11 % 3 = 2 (поскольку число 3 вмещается три раза, остатком будет число 2) |
| ** | показатель степени | Возводит базовое число в указанную степень, то есть количество базовых чисел, указанных экспонентой, умножается вместе. Впервые он был представлен в EcmaScript 2016. | 5 ** 5 (возвращает 3125, или как: 5*5*5*5*5) |
Примечание: Иногда числа участвующие в математических операциях называют операндами ( operands (en-US) ).
Нам, вероятно, не нужно учить вас базовым математическим операциям, но мы хотели бы проверить ваше понимание синтаксиса. Попробуйте ввести приведённые ниже примеры в свою консоль (developer tools JavaScript console), или используйте встроенную консоль, с которой вы уже знакомы, чтобы ознакомиться с синтаксисом.
-
Для начала попробуйте ввести простые примеры, такие как:
10 + 7; 9 * 8; 60 % 3;
var num1 = 10; var num2 = 50; 9 * num1; num2 / num1;
5 + 10 * 3; (num2 % 9) * num1; num2 + num1 / 8 + 2;
Некоторые примеры выше могут дать вам не тот результат, которого вы ожидали; приведённый ниже раздел может дать ответ на вопрос о том, почему.
Приоритет операторов
Давайте взглянем на последний пример сверху. Предположим, что num2 содержит значение 50 и num1 содержит значение 10 (как и было обозначено выше):
+ num1 / 8 + 2;
Будучи человеком, вы, вероятно, прочитаете это как «50 плюс 10 равно 60», затем «8 плюс 2 равно 10», и, наконец, «60 делить на 10 равно 6».
Но браузер видит это по-другому: «10 делить на 8 равно 1.25», затем «50 плюс 1.25 плюс 2 равно 53.25».
Это происходит из-за приоритета операторов — некоторые операторы будут применены перед другими в процесс вычисления суммы (в программировании её называют выражением). Приоритет операторов в JavaScript ничем не отличается от приоритета арифметических операций, который вы изучали в школе — умножение и деление всегда выполняются первыми, затем сложение и вычитание (сумма всегда вычисляется слева направо).
Если вы хотите переопределить порядок выполнения операторов, вы можете окружить парными скобками часть выражения, которая должна быть выполнена первой. Для получения результата 6 вам следует сделать следующее:
(num2 + num1) / (8 + 2);
Результат этого выражения равен 6.
Примечание: полный список операторов JavaScript и приоритетов их выполнения можно найти по этой ссылке: Expressions and operators.
Операторы инкремента и декремента
Иногда вам захочется повторно добавить или вычесть единцу к/из значению числовой переменной. Это можно сделать с помощью оператора инкремента ( ++ ) и декремента ( — ). Мы использовали ++ в нашей игре «Угадай число» в статье первое погружение в JavaScript, где мы добавляли 1 к переменной guessCount , в которой хранилось значение количества попыток пользователя после каждого хода.
Примечание: инкремент и декремент часто используются в циклах, о которых вы узнаете позже. Например, если вы захотите пройтись по списку цен и добавить к каждой налог с продаж, вам придётся в цикле обойти каждую цену и провести необходимые вычисления для учёта налога. Инкремент будет использован для перехода на новую ячейку списка при необходимости. У нас есть несложный пример реализации такого списка — попробуйте и взгляните на код чтобы посмотреть, сможете ли вы найти инкременты! Мы взглянем на циклы поближе позже по ходу курса.
Давайте попробуем сыграть с этим в вашей консоли. Для начала заметим, что вы не можете использовать инкремент/декремент непосредственно к числу, что может показаться странным. Дело в том, что мы присваиваем к переменной новое обновлённое число, а не просто вычисляем значение. Следующий пример приведёт к ошибке:
Таким образом, вы можете применить инкремент только к существующим переменным:
var num1 = 4; num1++;
Так, вторая странность! Если вы сделаете это, вы получите значение 4 — браузер возвращает текущее число, после чего применяет к нему оператор инкремента. Вы можете удостовериться в том, что инкремент был применён, узнав значение переменной ещё раз:
То же самое для — : попробуйте пример ниже
var num2 = 6; num2--; num2;
Примечание: вы можете заставить делать это в другом порядке — применить инкремент/декремент и только потом вернуть значение. Для этого необходимо записать оператор слева от переменной, а не справа. Попробуйте пример сверху ещё раз, но в этот раз используйте ++num1 и —num2 .
Операторы присваивания
Операторы присваивания — операторы, которые присваивают значение переменным. Мы уже много раз использовали самый простой из них, = , он просто приравнивает значение переменной слева к значению справа:
var x = 3; // x содержит значение 3 var y = 4; // y содержит значение 4 x = y; // x теперь содержит значение y (x == 4)
Однако есть ещё несколько сложных конструкций, которые позволяют делать ваш код более простым и аккуратным. Наиболее часто используемые перечислены ниже:
| Operator | Name | Purpose | Example | Shortcut for |
|---|---|---|---|---|
| += | Присваивание сложения | Прибавляет значение справа к переменной слева и возвращает новое значение переменной | x = 3; x += 4; | x = 3; x = x + 4; |
| -= | Присваивание вычитания | Вычитает значение справа из переменной слева и возвращает новое значение переменной | x = 6; x -= 3; | x = 6; x = x — 3; |
| *= | Присваивание умножения | Умножает переменную слева на значение справа и возвращает новое значение переменной | x = 2; x *= 3; | x = 2; x = x * 3; |
| /= | Присваивание деления | Делит переменную слева на значение справа и возвращает новое значение переменной | x = 10; x /= 5; | x = 10; x = x / 5; |
Попробуйте использовать такие конструкции, что понять, как они работают. Сможете ли вы определить значение до того, как напишите вторую строку?
Заметьте, что значение справа может быть как числом (константой), так и переменной, например:
var x = 3; // x содержит значение 3 var y = 4; // y содержит значение 4 x *= y; // x содержит значение 12
Примечание: есть ещё другие операторы присваивания, в этой статье перечислены только самые базовые.
Активное обучение: меняем размеры коробки
В этом упражнении вы будете пользоваться числами и операторами для работы с размерами коробки. Коробка рисуется с помощью API браузера, которое называется Canvas API. Вам не следует беспокоиться о том, как это работает — просто сосредоточьтесь на математике. Ширина и высота коробки (в пикселях) определяются переменными x и y , которые изначально равны 50.
В коде сверху, который вы можете изменять, под комментарием есть две строчки, с помощью которых вы можете увеличивать/уменьшать размеры коробки. Мы хотим, чтобы вы выполнили несколько заданий:
- Поменяйте строчку с размером x так, чтобы коробка была шириной 50px, причём 50 должно быть вычислено с помощью чисел 43 и 7 и арифметического оператора.
- Поменяйте строчку с размером y так, чтобы коробка была высотой 75px, причём 75 должно быть вычислено с помощью чисел 25 и 3 и арифметического оператора.
- Поменяйте строчку с размером y так, чтобы коробка была высотой 250, при этом 250 вычислено с помощью двух чисел и оператором взятия остатка (модуль).
- Поменяйте строчку с размером y так, чтобы коробка была высотой 150px, причём 150 вычислено с помощью трёх чисел и операторов вычитания и деления.
- Поменяйте строчку с размером x так, чтобы коробка была шириной 200px, при этом 200 вычислено с помощью числа 4 и оператора присваивания.
- Поменяйте строчку с размером y так, чтобы коробка была высотой 200px, причём 200 вычислено с помощью чисел 50 и 3 и операторов умножения и присваивания сложения.
Не расстраивайтесь, если вы не поняли код сверху. Нажмите кнопку Reset для запуска программы снова. Если вы смогли ответить верно на все вопросы, попробуйте поэкспериментировать с кодом ещё (или, например, предложить друзьям несколько заданий).
Операторы сравнения
Иногда нам может понадобиться проверить какое-либо условие, а затем поступить в зависимости от результата — для этого мы используем операторы сравнения.
| Оператор | Имя | Назначение | Пример |
|---|---|---|---|
| === | Строгое равенство | Проверяет левое и правое значения на идентичность | 5 === 2 + 4 |
| !== | Строгое неравенство | Проверяет левое и правое значения на неидентичность | 5 !== 2 + 3 |
| Меньше | Проверяет, меньше ли левое значение правого | 10 < 6 | |
| > | Больше | Проверяет, больше ли левое значение правого | 10 > 20 |
| Меньше или равно | Проверят, меньше ли левое значение правому (или равно ему) | 3 | |
| >= | Больше или равно | Проверят, больше ли левое значение левого (или равно ему) | 5 >= 4 |
Примечание: вы можете заметить, что некоторые люди используют == и != в их программах для сравнения на равенство и неравенство — это валидные JavaScript-операторы, но они отличаются от === / !== — первая пара проверяет на равенство/неравенство значений, не рассматривая их типы. Вторая пара — строгая версия первой, которая проверяет типы операндов. При использовании строгой версии выявляется больше ошибок, поэтому мы рекомендуем использовать именно её.
Если вы попробуете использовать эти операторы в консоли, вы увидите, что все они возвращают значения true / false — о типе данных boolean мы писали в прошлой статье. С их помощью мы можем принимать решения в нашей программе, например:
- Порождать текст на кнопке в зависимости от того, нажата она или нет.
- Высвечивать сообщение о поражении при проигрыше или поздравление при победе в игре.
- Показывать пользователю верное окно приветствия в зависимости от времени года.
- Увеличивать или уменьшать карту при выборе одной из двух опций.
Мы взглянем на то, как реализовать такую логику после знакомства с условными выражениями в следующей статье. Сейчас мы рассмотрим небольшой пример:
button>Запустить машинуbutton> p>Машина остановленаp>
var btn = document.querySelector("button"); var txt = document.querySelector("p"); btn.addEventListener("click", updateBtn); function updateBtn() if (btn.textContent === "Start machine") btn.textContent = "Stop machine"; txt.textContent = "The machine has started!"; > else btn.textContent = "Start machine"; txt.textContent = "The machine id stopped."; > >
Мы использовали оператор равенства внутри функции updateBtn() . В этом случае мы не проверяем пару математических выражений на равенство значений — мы просто смотрим, является ли текст на кнопке определённой строкой — что по сути является тем же самым. Если кнопка при нажатии содержит «Start machine», мы меняем содержимое метки на «Stop machine» и обновляем метку. Если же текст кнопки — «Stop machine», при нажатии мы возвращаем все обратно.
Примечание: Такой элемент управления, который переключается между двумя состояниями, обычно называется тумблером. Он переключается между одним состоянием и другим: свет включён, свет выключен и т. д.
Итого
В этой статье мы привели основную информацию, необходимую для работы с числами в JavaScript. Вы постоянно будете использовать числа в процессе обучения языку, поэтому желательно разобраться в этом сейчас. Если вам действительно не нравится математика, пусть вас утешит, что эта статья была сравнительно короткой.
В следующей статье мы изучим текст и то, как мы работаем с ним в JavaScript.
Примечание: если вам хочется узнать подробнее о том, как математика реализуется в JavaScript, вы можете посмотреть главный раздел JavaScript MDN. Статьи Числа и даты и Выражения и операторы — хороший вариант для начала.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как умножить все числа в созданных строках таблицы?
Есть вот такой вот js код. Есть массив pr_it для произведения чисел введённых в ячейки nm_q и nm_p. Как сделать, чтобы при новом срабатывании функции все значения во всех строках были перемножены?
ПС Пытался делать отдельно для каждой строки, но значение pr_it переносится на следующую строку, а не ту, где введены числа. Помогите пожалуйста!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
script type="text/javascript"> function addRow(id){ document.getElementById("prit").innerHTML = document.getElementById("qualit_a").value*document.getElementById("prezzo").value; var nn = document.getElementsByTagName('tr').length-4; var nm_l = new Array(); var nm_q = new Array();/* колличество */ var nm_p = new Array();/* цена */ var pr_it = new Array(); var td1 = new Array(); if (nn2){ tutt.parentNode.removeChild (tutt); } else { itog.parentNode.removeChild (itog); } var tbody = document.getElementById (id).getElementsByTagName("TBODY")[0]; var row = new Array(); row[nn] = document.createElement("TR") row[nn].setAttribute('bgcolor','#666'); if(nn2){ row[1].setAttribute('bgcolor','#fff000'); } td1[nn] = document.createElement("TD") td1[nn].appendChild(document.createTextNode(nn+1)) var td2 = new Array(); td2[nn] = document.createElement("TD") td2[nn].appendChild (document.createElement("input")) document.body.appendChild(td2[nn]); td2[nn].innerHTML=""; var td3 = new Array(); td3[nn] = document.createElement("TD") td3[nn].appendChild(document.createElement("input")) var td4 = new Array(); td4[nn] = document.createElement("TD") td4[nn].appendChild (document.createElement("input")) document.body.appendChild(td4[nn]); td4[nn].innerHTML=""; var td5 = new Array(); td5[nn] = document.createElement("TD") td5[nn].appendChild (document.createElement("input")) document.body.appendChild(td5[nn]); td5[nn].innerHTML=""; var td6 = new Array(); td6[nn] = document.createElement("TD") td6[nn].appendChild (document.createElement("a")) document.body.appendChild(td6[nn]); td6[nn].innerHTML=""; td6[nn].innerHTML=document.getElementById("nm_p[nn]").value*document.getElementById("nm_q[nn]").value; var td7 = new Array(); td7[nn] = document.createElement("TD") td7[nn].appendChild (document.createTextNode("7")) row[nn].appendChild(td1[nn]); row[nn].appendChild(td2[nn]); row[nn].appendChild(td3[nn]); row[nn].appendChild(td4[nn]); row[nn].appendChild(td5[nn]); row[nn].appendChild(td6[nn]); row[nn].appendChild(td7[nn]); tbody.appendChild(row[nn]); var tbody_1 = document.getElementById (id).getElementsByTagName("TBODY")[0]; var row2 = new Array(); row2[nn] = document.createElement("TR") row2[nn].setAttribute('id','itog'); var td = new Array(); td[nn] = document.createElement("TD") td[nn].appendChild(document.createTextNode("Итого")) row2[nn].appendChild(td[nn]); tbody_1.appendChild(row2[nn]); } script>
Курсы javascript
спасибо большое!
а вот еще вопрос — планируется ввести поле для скидки. Обычный input. И как посчитать сумму с учетом этого поля скидки? И на какое событие повесить этот пересчет?
14.06.2013, 13:43
Регистрация: 19.08.2010
Сообщений: 14,092
14.06.2013, 14:09
Интересующийся
Регистрация: 18.06.2012
Сообщений: 16
пока сделал от суммы вычитание числа из input
вроде работает.
теперь возникла задача к сумме прибавлять значения доставки и оплаты.
Доставка и Оплата — два селекта такого вида:
ну и доставка похожа. Вопрос в том — как записать значение для каждого типа оплаты? (Безналичный платеж — прибавляем к сумме 6% и т.п.). Просто значения лежат в базе и значения value нужны, когда я записываю весь заказ и тогда формирую общую цену с учетом этих выборок.