Сделайте калькулятор который будет находить площадь и периметр квадрата javascript
На этой страничке мы рассмотрим примеры использования сценариев JavaScript в математике. Первый сценарий поможет нам вычислить площадь круга по введенному значению радиуса.
<html>
<head>
<title> Площадь круга </title>
<script>
function square (obj) // создаем функцию вычисления площади
var s // определяем переменную s
>
>
</script>
</head>
<body>
<h3> Вычисление площади круга (по радиусу) </h3>
<form name="form1">
<h4> Введите размер (радиус круга ):</h4>
<input type ="text" name="num" size=10><br> // текстовое поле — ввод значения стороны
<input type ="button" value="Площадь" onClick="square(form1)"><br>// кнопка "Площадь"
<input type ="text" name="res" size=10><br> // текстовое поле — вывод значения площади
<input type ="reset" value=Очистить> // кнопка "Очистить"
</form>
</body>
</html>
В результате выполнения кода на страничке мы увидим следующее:
Вычисление площади круга (по радиусу):
Задание. Попробуйте набрать в текстовом редакторе "Блокнот" код этой странички. Сохраните получившийся файл под именем prim 1. html , а затем откройте его в броузере. Попробуйте изменить код сценария так, чтобы площадь круга вычислялась по введенному значению диаметра окружности.
Пример 2. Рассмотрим сценарий, позволяющий вычислить периметр и площадь треугольника по введенным значениям сторон:
<HTML>
<HEAD>
<TITLE> Вычисление периметра и площади треугольника </TITLE>
<script language="JavaScript"><!—
function pp (obj) // создаем функцию вычисления площади и периметра
var b=Number(obj.st2.value) // присваиваем преременной b значение 2 -ой стороны
var c=Number(obj.st3.value) // присваиваем преременной c значение 3 -ей стороны
var s; p=a+b+c; // определяем переменную s, вычисляем периметр
document.writeln("Периметр треугольника равен ",p,"<br>"); // выводим значение периметра
p=p/2;//вычисляем полупериметр
s=Math.sqrt(p*(p-a)*(p-b)*(p-c)); // вычисляем площадь
document.write("Площадь треугольника равна ",s);
>
—></script>
</HEAD>
<BODY>
<h4> Вычисление площади и периметра треугольника по введенным значениям сторон.</h4>
<h4>Примечание. Полупериметр треугольника должен быть больше его максимальной стороны, иначе площадь невозможно будет вычислить.</h4>
<form name="form 2 ">
Сторона 1: <input type="text" size="7" name="st1"> <br>// текстовое поле — ввод значения стороны
Сторона 2: <input type="text" size="7" name="st2"> <br>// текстовое поле — ввод значения стороны
Сторона 3: <input type="text" size="7" name="st3"> <br>// текстовое поле — ввод значения стороны
<input type="button" value="Вычислить" onClick="pp(form 2 )"> <br> // кнопка "Вычислить"
<input type="reset" value=Отменить > // кнопка "Отменить"
</form>
</BODY>
</HTML>
В результате у нас получится Web- страничка с таким содержимым :
Вычисление площади и периметра треугольника по введенным значениям сторон.
Примечание. Полупериметр треугольника должен быть больше его максимальной стороны, иначе площадь невозможно будет вычислить.
Задание. Попробуйте набрать в текстовом редакторе "Блокнот" код этой странички. Сохраните получившийся файл под именем prim2 . html , а затем откройте его в броузере.
Пример 3. Используя язык JavaScript можно даже составить программу, которая позволит нам вычислить значение математического выражения. Рассмотрим код:
<HTML>
<HEAD>
<TITLE> Вычисление значений выражения </TITLE>
<script language="JavaScript">
<!—
var s=""
function val(obj)
< obj.m1.value=s; obj.res.value=eval(s)>// вызываем функцию eval
function valbut (c)
//—>
</script>
</head>
<BODY>
<h3> Вычисление значений выражения </h3>
<h4> Введите выражение: </h4>
<table border=0 cellspacing=5 cellpadding=5>
<tr valign=top>
<td align=center>
<form name="form3">
<textarea name="m1" cols=30 rows=3></textarea></td></tr>
<tr valign=middle> <td>
<input type=button value=1 onClick="valbut(‘1’)">
<input type=button value=2 onClick="valbut(‘2’)">
<input type=button value=3 onClick="valbut(‘3’)">
<input type=button value=4 onClick="valbut(‘4’)">
<input type=button value=5 onClick="valbut(‘5’)">
<input type=button value=6 onClick="valbut(‘6’)">
<input type=button value=7 onClick="valbut(‘7’)">
<input type=button value=8 onClick="valbut(‘8’)">
<input type=button value=9 onClick="valbut(‘9’)">
<input type=button value=0 onClick="valbut(‘0’)">
<input type=button value=+ onClick="valbut(‘+’)">
<input type=button value=- onClick="valbut(‘-‘)">
<input type=button value=* onClick="valbut(‘*’)">
<input type=button value=/ onClick="valbut(‘/’)">
<input type=button value=( onClick="valbut(‘(‘)">
<input type=button value=) onClick="valbut(‘)’)"><br><br>
<input type=button value=Вычислить onClick="val(form3)"><br><br>
Значение: <input type=text name="res" size=20><br><br>
<input type=reset value=Очистить onClick="s=»">
</form>
</td>
</tr>
</table>
</BODY>
</HTML>
В результате на Web- страничк е появится следующее :
Вычисление значений выражения
Введите выражение:
Задание. Попробуйте набрать в текстовом редакторе "Блокнот" код этой странички. Сохраните получившийся файл под именем prim3 . html , а затем откройте его в броузере.
В результате у нас получится Web- страничка со следующим фрагментом :
Перевод температуры из одной шкалы в другую
Задание. Попробуйте набрать в текстовом редакторе "Блокнот" код этой странички. Сохраните получившийся файл под именем prim4 . html , а затем откройте его в броузере. Измените сценарий таким образом, чтобы можно было переводить температуру градусов Цельсия в градусы по Кельвину
Чтобы ознакомиться с другими возможностями JavaScript щелкните по одной из ссылок:
JS-код в HTML для расчета периметра квадрата. Площадь включена только для всех форм
У меня есть этот код для Javascript, написанный на HTML, который вычисляет области 4 фигур. Мне просто нужно реализовать, как рассчитать периметр для квадрата. У кого-нибудь есть код для этого и где я могу добавить его здесь? Ниже приведен код для вышеупомянутого.
И распечатать вывод как:
document.getElementById(«some_other_id_output»).innerHTML = «Perimeter info»>
Периметр для квадрата рассчитывается путем умножения его стороны на 4. Так как у вас есть функция, называемая Calculate Area (). Я предлагаю вам создать функцию по периметру.
Пишем калькулятор на JavaScript
В этой статье мы с вами, как следует из названия, напишем простой калькулятор на JavaScript.
Желание написать калькулятор возникло у меня после просмотра одного туториала, посвященного созданию «simple calculator», который оказался далеко не симпл и толком ничего не умел делать.
Наш калькулятор будет true simple (42 строки кода, включая пробелы между блоками), но при этом полнофункциональным и масштабируемым.
Без дальнейших предисловий, приступаем к делу.
Наша разметка выглядит так:
Здесь мы подключаем библиотеку, создаем контейнер для калькулятора и поле для вводимых символов и результата.
Вот что мы имеем на данный момент:
Кнопки будут генерироваться программно.
Переходим к скрипту.
Определяем поле для вывода результата и создаем контейнер для клавиатуры:
Наша строка с символами выглядит так:
Преобразуем данную строку в массив и создаем кнопки:
Находим созданные кнопки и добавляем к ним обработчик события «клик»:
Мы также хотим иметь возможность вводить символы с помощью клавиатуры. Для этого нам необходимо добавить обработчик события «нажатие клавиши» к объекту «Document» или «Window», затем отфильтровать ненужные значения свойства «ключ» клавиши, например, с помощью регулярного выражения:
Метод «match» в данном случае играет роль фильтра: он не позволяет передавать функции «calc» аргумент, не соответствующий заданному в нем условию.
Само условие звучит так: если значением event.key является один из символов, указанных в квадратных скобках ([]; цифра от 0 до 9, знаки деления, умножения, сложения, вычитания, открывающая, закрывающая круглые скобки или знак равенства; обратная косая черта — экранирование) или (| — альтерация) Backspace, или Enter, то вызываем calc с event.key в качестве параметра, иначе ничего не делаем (Shift также успешно отбрасывается).
Наша главная (и единственная) функция «calc» выглядит следующим образом (код следует читать снизу вверх):
В завершение, парочка слов о заявленной масштабируемости и полнофункциональности.
Метод «evaluate» (ранее «eval») и другие методы Math.js имеют очень большие возможности. Опираясь на эти возможности, мы можем легко расширить функционал нашего калькулятора, добавив в него новые символы и операторы, предусмотрев возможность работы с числами с плавающей точкой (регулируя количество знаков после запятой с помощью переключателя и метода «toFixed») и т.д.
Благодарю за внимание. Надеюсь, вы нашли для себя что-то полезное. Хороших выходных и счастливого кодинга.
Name already in use
Work fast with our official CLI. Learn more about the CLI.
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
Калькуляторы фигур на JavaScript
Сделайте калькулятор, который будет находить площадь и периметр квадрата.
Сделайте калькулятор, который будет находить площадь и периметр прямоугольника.
Сделайте калькулятор, который будет находить площадь круга и длину окружности.
Сделайте калькулятор, который будет находить площадь треугольника по трем сторонам.
Математические калькуляторы на JavaScript
Напишите скрипт, который будет находить корни квадратного уравнения. Для этого сделайте 3 инпута, в которые будут вводиться коэффициенты уравнения.
Даны 3 инпута. В них вводятся числа. Проверьте, что эти числа являются тройкой Пифагора: квадрат самого большого числа должен быть равен сумме квадратов двух остальных.
Дан инпут и кнопка. В инпут вводится число. По нажатию на кнопку выведите список делителей этого числа.
Даны 2 инпута и кнопка. В инпуты вводятся числа. По нажатию на кнопку выведите список общих делителей этих двух чисел.
Даны 2 инпута и кнопка. В инпуты вводятся числа. По нажатию на кнопку выведите наибольший общий делитель этих двух чисел.
Даны 2 инпута и кнопка. В инпуты вводятся числа. По нажатию на кнопку выведите наименьшее число, которое делится и на одно, и на второе из введенных чисел.
Анализатор текста на JavaScript
Дан textarea. Пусть в него вводится текст. Сделайте так, чтобы по потери фокуса под текстареа вывелось сообщение о том, сколько в этом тексте слов.
Модифицируйте предыдущую задачу так, чтобы также вывелось сообщение о том, сколько в тексте символов.
Модифицируйте предыдущую задачу так, чтобы также вывелось сообщение о том, сколько в тексте символов за вычетом пробелов.
Модифицируйте предыдущую задачу так, чтобы также вывелось сообщение о процентном содержании каждого символа в тексте.
В предыдущих задачах мы сделали так, что для нашего текста выводятся 4 параметра. Сделайте 4 чекбокса, которые будут регулировать, какие именно параметры показывать.
Транслит на JavaScript
Пусть даны два textarea. Пусть в первый текстареа вводится текст на русском языке. Сделайте так, чтобы по потери фокуса этот текст преобразовался в транслит и вывелся во втором текстареа.
Сделайте так, чтобы при вводе во второй текстареа транслита текста, по потери фокуса этот текст преобразовывался в русский и выводился в первом текстареа.
Модифицируйте вашу задачу так, чтобы был один текстареа, чекбокс и див. Если чекбокс отмечен, то пусть в див по потери фокуса выводится транслит текста, а если не отмечен — то текст текстареа пусть преобразуется из транслита в русский текст.
Модифицируйте предыдущую задачу так, чтобы текст в диве появлялся не по потери фокуса, а по мере ввода текста в текстареа.
Игра угадай число на JavaScript
5.1 В этой игре компьютер загадывает число от 1 до 100. В инпут на экране игрок вводит число от 1 до 100, пытаясь угадать, что же загадал компьютер.
Если игрок ввел число, меньше загаданного, компьютер должен написать ‘введите число побольше’, а если введено больше загаданного, то, соответственно, компьютер должен написать ‘введите число поменьше’.
Игра угадай ячейку на JavaScript
6.1 В этой игре будет дана таблица 10 на 10. Компьютер случайным образом запоминает 10 ячеек из этой таблицы. Игроку нужно кликать на клетки пока он не найдет все загаданные компьютером клетки.
Модифицируйте предыдущую задачу, добавив таймер обратного отсчета. Если игрок не успеет угадать числа за отведенное время — он проиграл.
Экранная клавиатура на JavaScript
Давайте реализуем экранную клавиатуру. На ней должны быть кнопочки со всеми буквами и цифрами клавиатуры компьютера. Кликая мышкой по этим кнопочкам мы сможем вводить данные, например, при неработающей клавиатуре.
Реализуйте описанную клавиатуру. Пусть эта клавиатура будет привязана к какому-нибудь инпуту, то есть кликая по ней, мы будем вводить данные в этот инпут.
Сделайте на вашей клавиатуре кнопку Caps Lock, которая будет делать так, чтобы все буквы переводились в верхний регистр.
Калькулятор на JavaScript
Давайте реализуем калькулятор. Он будет работать как обычный классический калькулятор: у вас будет инпут, а под ним кнопочки с цифрами и знаками операций. По нажатию на цифры они должны появляться в инпуте. По нажатию на знак операции число из инпута должно исчезать. После этого при вводе следующего числа в инпут и нажатия на знак равно в инпуте должен появится результат операции.
Реализуйте описанный калькулятор.
Сделайте так, чтобы над инпутом выводились введенные числа и между ними знак операции.
Сделайте кнопку сброса, которая будет очищать инпут для ввода, а также отменять операцию, если ранее была нажата кнопка операции.
Сделайте кнопку для памяти. Пусть она запоминает результат какой-нибудь операции. Сделайте кнопку для вставки в инпут результата из памяти.
Линейный календарь на JavaScript
Выведите в виде списка ul все числа текущего месяца. Средствами CSS поставьте пункты списка в ряд.
Сделайте так, чтобы текущий день в календаре был выделен каким-нибудь цветом.
Сделайте так, чтобы над списком было написано название текущего месяца по-русски и номер года.
Сделайте так, чтобы над календарем появились ссылки вперед и назад, позволяющие менять месяц. Месяц и год, выводимые над календарем, должны соответствовать отображаемому месяцу.
Поиск тегов на JavaScript
Сейчас мы с вами сделаем сайт, который будет помогать определить значение HTML тега. Пусть в этом скрипте будет инпут, в который пользователь будет вводить имя тега. После этого по нажатию на Enter под инпутом пусть выдается описание этого тега.
Продумайте, как удобнее всего хранить имена тегов и их описания в соответствии с поставленной задачей.
Реализуйте описанный сайт.
Поиск исторических события на JavaScript
Пусть мы хотим написать сайт, показывающий таблицу исторических событий за определенный год. Пусть год будет вводится в инпут. По нажатию Enter давайте выведем таблицу событий, случившихся в этот год. Пусть в качестве информации о событии мы хотим видеть дату, название и описание события. Задача 11.1
Продумайте, как удобнее всего хранить исторические события.
Реализуйте описанный сайт.
Гороскоп на JavaScript
Сейчас мы с вами реализуем сайт-гороскоп. Этот сайт будет выдавать гороскопы на сегодня. Пусть пользователь по заходу на сайт видит инпут, в который нужно вбить дату своего рождения. Пусть по нажатию Enter наш сайт выдаст пользователю гороскоп на текущий день за его знак Зодиака.
Пусть также у нас будут радиокнопки: сегодня, завтра, послезавтра. Сделаем так, чтобы в зависимости от выбора выводился гороскоп на соответствующий день. Очевидно, что по умолчанию будет выбрано сегодня, но пользователь при желании может изменить свой выбор.
Продумайте, как вы будете хранить гороскопы в соответствии с поставленной задачей.
Реализуйте показ гороскопа за текущий день.
А теперь реализуйте работу радиокнопок, позволяющих выбрать день, за который нужно показать гороскоп.
Сайт предсказаний на JavaScript
Сейчас мы с вами сделаем сайт, который будет выдавать предсказания. Пусть на этом сайте будет кнопка, по нажатию на которую будет запускаться таймер, который будет каждые 0.1 секунд выводить в в какой-нибудь див случайное число от 1 до некоторого максимального.
Под дивом пусть будет другая кнопка, по нажатию на которую пользователь нашего сайта может остановить таймер и зафиксировать некоторое число в диве. Это число будет номером предсказания. После этого покажите пользователю предсказание с этим номером, а все лишние кнопки уберите с экрана, чтобы пользователь не мог получить еще одно предсказание. То есть на один заход на сайт — одно предсказание. Задача 13.1
Продумайте, как удобнее хранить предсказания.
Реализуйте описанный сайт.
Сделайте так, чтобы предсказания были двух видов: хорошие и плохие. Сделайте так, чтобы плохие красились в красный цвет, а хорошие — в зеленый.
Автодополнение на JavaScript
Сейчас мы с вами реализуем автодополнение. Под этим термином понимается выпадающая подсказка при вводе текста в инпут. Давайте посмотрим на примере. Ниже я сделал инпут, в который можно ввести название страны. При этом, если ввести какие-то буквы, то под инпутом появится список стран, которые начинаются на введенную строку.