Функции. Операторы цикла. Объекты Math, Number.
Цель работы
Научиться создавать пользовательские функции на JS, использовать в программах операторы цикла; изучить особенности использования строенных объектов Math и Number.
Задания
Задание 1
Все выполненные задания из предыдущей работы оформить в виде функций. Создать кнопки и запускать задание на выполнение щелчком по соответствующей кнопке. Поработать над оформлением результатов вывода (цвет шрифта, кегль, гарнитура).
Решение
Java Script
// для работы со стилями в 'document.write'
// можно сделать следующее:
document.write('<div class="className1"> Текст </div>')
document.write('<style>'
+ 'div{ font-family: monospace; font-size: 24px; }'
+ '.className1{ color: #ffae00; }')
Задание 2
Вывести таблицу умножения, а и b ввести с клавиатуры. Использовать оператор цикла for.
Применить к ячейкам таблицы свойства форматирования.
1 | 2 | ... | b |
2 | 4 | ... | 2*b |
... | ... | ... | ... |
a | a*2 | ... | a*b |
Решение
Java Script
let a = prompt('Введите количество строк', '0')
let b = prompt('Введите количество столбцов', '0')
a = Number.parseInt(a)
b = Number.parseInt(b)
// начало таблицы
document.write('<table>')
for(let row = 1; row <= a; row++)
{
// начало строки
document.write('<tr>')
for(let column = 1; column <= b; column++)
document.write('<td>' + (row*column) + '</td>') // создаем ячейку таблицы
// конец строки
document.write('</tr>')
}
// конец таблицы
document.write('</table>')
// применяем стили к документу
document.write('<style>'
+ 'body {background: #f8f8f8; color: #333; font-size: 16px; text-align: center;
font-family: Courier, monospace; margin: 0; align-items: center; height: 60vh;}'
+ 'table {display: flex; align-items: center; background: #e4ecff;
color: #2972d1; padding: 7px; border-radius: 15px;}'
+ 'td { min-width: 30px; width: auto; text-align: center; vertical-align: middle;
border: 2px solid #bbd9ff; font-weight: 700; }</style>')
Задание 3
Найти площадь круга и длину кружности, радиус меняется от а до b с шагом 0,3. Результаты округлить и вывести в таблице. Использовать оператор цикла do-while.
Применить к ячейкам таблицы свойства форматирования.
Радиус | Площадь круга | Длина окружности |
a | ... | ... |
a+0.3 | ... | ... |
... | ... | ... |
b | ... | ... |
Решение
Java Script
let a = prompt('Введите минимальный радиус', '0')
let b = prompt('Введите максимальный радиус', '0')
a = Number.parseInt(a)
b = Number.parseInt(b)
document.write('<table><tr>'
+ '<th>Радиус</th>'
+ '<th>Площадь круга</th>'
+ '<th>Длина окружности</th></tr>'
+ '<tr>'
+ '<th>Формула</th>'
+ '<th>πr<sup>2</sup></th>'
+ '<th>2πr</th></tr>')
do {
document.write('<tr>'
+ '<td>'+ a.toFixed(1) + '</td>'
+ '<td>' + (Math.round(Math.PI*(a*a))) + '</td>'
+ '<td>' + (Math.round(2*Math.PI*a)) + '</td></tr>')
a += 0.3
}
while (a <= b)
document.write('</table>')
document.write('<style>'
+ 'body {background: #f8f8f8; color: #333; font-size: 16px; text-align: center;
font-family: Courier, monospace; margin: 0; align-items: center; height: 60vh;}'
+ 'table {display: flex; align-items: center; background: #e4ecff;
color: #2972d1; padding: 7px; border-radius: 15px;}'
+ 'td { min-width: 30px; width: auto; text-align: center; vertical-align: middle;
border: 2px solid #bbd9ff; font-weight: 700; }'
+ 'th {background: #b0d9ff; min-width: 100px; width: auto;
text-align: center; vertical-align: middle; border: 2px solid #bbd9ff;
font-weight: 700;}</style>')
Задание 4
Создать 2 объекта-числа (Number) – дробное и целое. Применить к каждому из них методы: toExponential, toFixed, toPrecision, toString. Результаты проанализировать, представить в таблице в следующем виде:
Число | Метод | Результат | Описание метода |
127.18 | toString(16) | 7f.2e147ae147b | Строковое представление числа в 16-ричной системе счисления |
Решение
Java Script
let doubleNum = new Number(125.625)
let integerNum = new Number(77)
let nameMethodsDouble = new Array("toString(16)", "toPrecision(7)", "toFixed(5)", "toExponential(5)")
let m_string_double = doubleNum.toString(16)
let m_precision_double = doubleNum.toPrecision(7)
let m_fixed_double = doubleNum.toFixed(5)
let m_exponencial_double = doubleNum.toExponential(5)
let doubleMethods = new Array(m_string_double, m_precision_double, m_fixed_double, m_exponencial_double)
let descriptionMethodsDouble = new Array("Строковое представление числа в 16-ричной системе счисления",
"Представляем число с заданным общим количеством значащих цифр",
"Представляем число в форме с фиксированным количеством цифр после точки",
"Представляем число в экспоненциальной форме, с определенным количеством цифр после точки")
let nameMethodsInt = new Array("toString(2)", "toPrecision(5)", "toFixed(1)", "toExponential(6)")
let m_string_int = integerNum.toString(2)
let m_precision_int = integerNum.toPrecision(5)
let m_fixed_int = integerNum.toFixed(1)
let m_exponencial_int = integerNum.toExponential(6)
let intMethods = new Array(m_string_int, m_precision_int, m_fixed_int, m_exponencial_int)
let descriptionMethodsInt = new Array("Строковое представление числа в 2-чной системе счисления",
"Представляем число с заданным общим количеством значащих цифр",
"Представляем число в форме с фиксированным количеством цифр после точки",
"Представляем число в экспоненциальной форме, с определенным количеством цифр после точки")
document.write('<table>')
document.write('<tr>'
+ '<th>Число</th>'
+ '<th>Метод</th>'
+ '<th>Результат</th>'
+ '<th>Описание метода</th></tr>')
for(let number = 0; number < 2; number++)
{
if(number == 0)
{
for(let row = 0; row < 4; row++)
{
document.write('<tr>')
for(let cell = 1; cell < 5; cell++)
{
switch(cell){
case 1: switch(row) {
case 0: document.write('<td rowspan=4>' + doubleNum + '</td>'); continue
default: document.write(); continue
}
case 2: document.write('<td>' + nameMethodsDouble[row] + '</td>'); continue
case 3: document.write('<td>' + doubleMethods[row] + '</td>'); continue
case 4: document.write('<td>' + descriptionMethodsDouble[row] + '</td>'); continue
}
}
document.write('</tr>')
}
}
else
{
for(let row = 0; row < 4; row++)
{
document.write('<tr>')
for(let cell = 1; cell < 5; cell++)
{
switch(cell){
case 1: switch(row) {
case 0: {
document.write('<td rowspan=4 class="topBorder">' + integerNum + '</td>')
continue
}
default: document.write(); continue
}
case 2: {
if(row == 0) {
document.write('<td class="topBorder">' + nameMethodsInt[row] + '<td>')
continue
}
else{
document.write('<td>' + nameMethodsInt[row] + '</td>')
continue
}
}
case 3: {
if(row == 0) {
document.write('<td class="topBorder">' + intMethods[row] + '</td>')
continue
}
else{
document.write('<td>' + intMethods[row] + '</td>')
continue
}
}
case 4: {
if(row == 0) {
document.write('<td class="topBorder">' + descriptionMethodsInt[row] + '</td>')
continue
}
else{
document.write('<td>' + descriptionMethodsInt[row] + '</td>')
continue
}
}
}
document.write('</tr>')
}
}
}
// применяем стили к документу
document.write('<style>'
+ 'body {background: #f8f8f8; color: #333; font-size: 16px; text-align: center;
font-family: Courier, monospace; margin: 0; align-items: center; height: 60vh;}'
+ 'table {display: flex; align-items: center; background: #e4ecff;
color: #2972d1; padding: 7px; border-radius: 15px;}'
+ 'td { min-width: 30px; width: auto; text-align: center; vertical-align: middle;
border: 2px solid #bbd9ff; font-weight: 700; }'
+ 'th {background: #b0d9ff; min-width: 100px; width: auto;
text-align: center; vertical-align: middle; border: 2px solid #bbd9ff;
font-weight: 700;}'
+ '.topBorder{ border-top: 2px solid #0f8bff; }</style>')