Объяснение функций JavaScript :
1)Функция valiumuusikuid() — выбирает всех отмеченных артистов (Drake, Travis, Carti, Uzi, Future). Затем отображает в виде текста, какие артисты были выбраны, добавляя текст
Вы знаете, что —
// checkbox function valimuusikuid() { let v1 = document.getElementById("v1"); let drake = document.getElementById("drake"); let travis = document.getElementById("travis"); let carti = document.getElementById("carti"); let uzi = document.getElementById("uzi"); let future = document.getElementById("future"); let valik = ""; if (drake.checked) { valik += drake.value + ", "; } if (travis.checked) { valik += travis.value + ", "; } if (carti.checked) { valik += carti.value + ", "; } if (uzi.checked) { valik += uzi.value + ", "; } if (future.checked) { valik += future.value + ", "; } v1.innerText = "Sa tead - " + valik; }
2)Функция arvamusLugemine() — Принимает входные данные textarea id «arvamus», считывает их значение и отображает в элементе «v2» в виде текста с префиксомТы имеешь в виду прослушивание музыки —
// textarea function arvamusLugemine(){ let arvamus = document.getElementById("arvamus"); let v2 = document.getElementById("v2"); v2.innerText ="Sa mõtled muusika kuulamisest -" + arvamus.value; }
3)Функция tunnidLugemine() — Считывает значение числа «tunnid» и отображает его в элементе «v3» в виде текста
Вы слушаете музыку в день: + введенное число
// number function tunnidLugemine() { let tunnid = document.getElementById("tunnid"); let v3 = document.getElementById("v3"); v3.innerText = "Sa kuulad muusikat päevas : " + tunnid.value; }
4)Функция radioLugemine() — Проверяет, выбрана ли кнопка «да» или «нет». Если «да», отображает ее значение, если «нет», то ее значение. Если ни одна из них не выбрана, отображает «Пожалуйста, выберите!». Текст помещается в элемент «v4».
// radio function raadioLugemine() { let v4 = document.getElementById("v4"); let ja = document.getElementById("ja"); let ei = document.getElementById("ei"); if (ja.checked) { v4.innerText = ja.value; } else if (ei.checked) { v4.innerText = ei.value; } else { v4.innerText = "Palun vali !"; } }
5)Функция jaamadLugemine() — Считывает значение текстового ввода «jaamad» и отображает его в элементе «v5» с префиксом
Вы знаете —
// text function jaamadLugemine() { let jaamad = document.getElementById("jaamad"); let v5 = document.getElementById("v5"); v5.innerText = "Sa tead - " + jaamad.value; }
6)Функция стильЧтение() — Считывает значение выбора (select) «музыкальный стиль» и отображает его в элементе «v6» с префиксом
Вы слушаете —
// select - muusikastiil function stiilLugemine() { let stiil = document.getElementById("muusikastiil"); let v6 = document.getElementById("v6"); v6.innerText = "Sa kuulad: " + stiil.value; }
7)Функция puhasta() — Сбрасывает все элементы управления и входы: удаляет все выбранные флажки, очищает текстовые поля, поля для ввода чисел и выбора, а также очищает все выходы от «v1» до «v6».
// puhasta function puhasta() { let v1 = document.getElementById("v1"); let v2 = document.getElementById("v2"); let v3 = document.getElementById("v3"); let v4 = document.getElementById("v4"); let v5 = document.getElementById("v5"); let v6 = document.getElementById("v6"); let arvamus = document.getElementById("arvamus"); let tunnid = document.getElementById("tunnid"); let jaamad = document.getElementById("jaamad"); let muusikastiil = document.getElementById("muusikastiil"); document.getElementById("drake").checked = false; document.getElementById("travis").checked = false; document.getElementById("carti").checked = false; document.getElementById("uzi").checked = false; document.getElementById("future").checked = false; arvamus.value = ""; tunnid.value = ""; jaamad.value = ""; muusikastiil.selectedIndex = 0; v1.innerText = ""; v2.innerText = ""; v3.innerText = ""; v4.innerText = ""; v5.innerText = ""; v6.innerText = ""; }
Funktsioonide selgitus CSS :
1)body — изменяет шрифт всего документа на «Times New Roman», serif
body { font-family: "Times New Roman", serif; }
2)h1 — заголовок первого уровня; размер шрифта — 30px; выравнивание текста — по левому краю; внутреннее отступление (padding) — 50px со всех сторон
h1 { font-size: 30px; text-align: left; padding: 50px; }
3)label — метки форм; делаются блочным элементом (display: block), чтобы каждая метка была в своей строке; делается шрифт жирным (font-weight: bold);
label { display: block; font-weight: bold; }
4)input[type=„radio“], input[type=„checkbox“] — radio ; checkbox ; добавляют небольшой отступ справа (5px) ; меняют курсор на указатель, когда мышь находится над ним (cursor: pointer), чтобы показать, что элемент можно щелкнуть
input[type='radio'], input[type='checkbox'] { margin-right: 5px; cursor: pointer; }
5)input[type=„radio“] input[type=„checkbox“] + label — стили для значков, которые следуют сразу за radio и checkbox ; размер шрифта 30px ; добавляют внутреннее заполнение 5px ; для выпадающих списков в дополнение к значку указан cursor: pointer
input[type='radio'] + label { font-size: 30px; padding: 5px; } input[type='checkbox'] + label { font-size: 30px; padding: 5px; cursor: pointer; }
6)input[type=text], input[type=reset], input[type=button], input[type=number], textarea, select — стили для всех остальных элементов формы ; внутренний отступ 8px ; скругление углов 5px ; граница 1px сплошной цвет lightslategray ; размер шрифта 16px ; размер шрифта унаследован от родителя (font-family: inherit) ;
input[type=text], input[type=reset], input[type=button], input[type=number], textarea, select { padding: 8px; border-radius: 5px; border: 1px solid lightslategray; font-size: 16px; font-family: inherit; }
7)table — удаляет двойные границы между ячейками (border-collapse: collapse); добавляет вокруг таблицы черную границу шириной 1px; ширина таблицы составляет 80%; фиксированное расположение столбцов (table-layout: fixed)
table { border-collapse: collapse; border: 1px solid black; width: 50%; table-layout: fixed; }
8)td — ячейки таблиц; внутренний отступ 10px; граница 1px сплошная черная; вертикальное выравнивание содержимого – сверху vertical-align: top
td { padding: 10px; border: 1px solid black; vertical-align: top; }
Funktsioonide selgitus HTML :
Содержание таблицы:
1) выпадающий список checkbox, Каких музыкантов/групп вы знаете?
2) текстовое поле textarea для мнения, Что вы думаете о прослушивании музыки в школе?
3) выберите число, чтобы указать, сколько часов в день вы слушаете музыку?
4) радио-кнопка, чтобы показать, слушаете ли вы радио?
5) текстовое поле или текст, чтобы написать известные мне радиостанции?
6) список option value, из которого можно выбрать, какие музыкальные стили вы слушаете чаще всего?
Весь html-код:
<!DOCTYPE html> <html lang="et"> <head> <meta charset="UTF-8"> <title>Muusika Küsimustik</title> <link rel="stylesheet" href="music.css"> <script defer src="Muusika.js"></script> </head> <body> <h1>Muusika Küsimustik</h1> <form id="muusikaVorm"> <table> <tr> <td> Milliseid muusikuid/ansambleid sa tead?<br> <label><input type="checkbox" name="artist" id="drake" value="Drake" onchange="valimuusikuid()">Drake</label><br> <label><input type="checkbox" name="artist" id="travis" value="Travis Scott" onchange="valimuusikuid()">Travis Scott</label><br> <label><input type="checkbox" name="artist" id="carti" value="Playboy Carti" onchange="valimuusikuid()">Playboy Carti</label><br> <label><input type="checkbox" name="artist" id="uzi" value="Lil Uzi Vert" onchange="valimuusikuid()">Lil Uzi Vert</label><br> <label><input type="checkbox" name="artist" id="future" value="Future" onchange="valimuusikuid()">Future</label> </td> <td><div id="v1"></div></td> </tr> <tr> <td> Mida arvad muusika kuulamisest koolis?<br> <textarea id="arvamus" rows="3" cols="40" oninput="arvamusLugemine()"></textarea> </td> <td><div id="v2"></div></td> </tr> <tr> <td> Mitu tundi päevas sa kuulad muusikat?<br> <input type="number" id="tunnid" min="1" max="24" onchange="tunnidLugemine()"> </td> <td><div id="v3"></div></td> </tr> <tr> <td> Kas sa kuulad raadiot?<br> <label><input type="radio" name="raadio" value="Ja" id="ja" onchange="raadioLugemine()">Jah</label> <label><input type="radio" name="raadio" value="Ei" id="ei" onchange="raadioLugemine()">Ei</label> </td> <td><div id="v4"></div></td> </tr> <tr> <td> Milliseid raadiojaamu oskad nimetada?<br> <input type="text" id="jaamad" oninput="jaamadLugemine()"> </td> <td><div id="v5"></div></td> </tr> <tr> <td> Millist muusikat sa kõige rohkem kuulad?<br> <select id="muusikastiil" onchange="stiilLugemine()"> <option value="Pop">Pop</option> <option value="Räpp">Räpp</option> <option value="Rock">Rock</option> <option value="Elektrooniline">Elektrooniline</option> <option value="Jazz">Jazz</option> <option value="Klassikaline">Klassikaline</option> </select> </td> <td><div id="v6"></div></td> </tr> </table> <br> <button type="button">Saada</button> <button type="button" onclick="puhasta()">Puhasta</button> </form> </body> </html>
