Цель работы
Научиться создавать пользовательские функции на 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>')