![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Опыт Одного Javascript
2019-04-17 18:23Название записи захотелось написать именно со всех заглавных букв.
По сути... это опыт написания одного задания с использованием языка Javascript, который потребовал некоторого времени на то, чтобы вспомнить и разобраться снова с синтаксисом, почувствовать себя веб-программистом...
© Сразу хочу сказать огромное спасибо тем, кто помог вспомнить или подсказал интересный вариант решения задачки, написав функции.
По сути... это опыт написания одного задания с использованием языка Javascript, который потребовал некоторого времени на то, чтобы вспомнить и разобраться снова с синтаксисом, почувствовать себя веб-программистом...
© Сразу хочу сказать огромное спасибо тем, кто помог вспомнить или подсказал интересный вариант решения задачки, написав функции.
Пришлось вспомнить свой опыт веб-программирования сайтов прошлого столетия 
Казалось бы, простая задача - нужно "оживить" страничку и вывод информации сделать интерактивным.
Сколько сейчас разных редакторов веб-разработки существует, а тяга к ручному написанию кода HTML с использованием таких инструментов как динамические стили или Java-скрипты осталась.
Это, наверное, неистребимо, как командные консоли управления на Cisco хотя уже давно появился веб-интерфейс
Казалось бы, простая задача - нужно "оживить" страничку и вывод информации сделать интерактивным.
Сколько сейчас разных редакторов веб-разработки существует, а тяга к ручному написанию кода HTML с использованием таких инструментов как динамические стили или Java-скрипты осталась.
Это, наверное, неистребимо, как командные консоли управления на Cisco хотя уже давно появился веб-интерфейс
Итак, задача:
- На приветственной странице кроме поясняющей записи должна быть кнопка СТАРТ.
- После нажатия кнопки СТАРТ должна быть выведена таблица с одним вопросом и несколькими кнопками ответов.
- После нажатия кнопки ответа должен быть скрыт 1-й вопрос и выведен следующий. Пусть всего вопросов - 15.
- Каждая кнопка ответа имеет свой вес. В количественном выражении это может выглядеть так, например: 0, 2 или 8. Все зависит от важности вопроса. Данные по важности предоставляет заказчик.
- После нажатия каждой кнопки с ответом нужно "вес" ответа записать в специальную переменную.
- После завершения вывода вопросов и ответа на них пользователем нужно посчитать "вес" каждого ответа в отдельных переменных. Номера вопросов распределены между переменными заказчиком.
- Необходимо в качестве ответа на вопросы вывести таблицу с посчитанными переменными и текстом объяснений.
Начнем.
Пишем стандартную страницу:
( Показать код (1)... )
Добавляем видимость-невидимость элементов таблиц через стили:
( Показать код (2)... )
Создаем функцию, которая будет отображать первую таблицу с кнопкой старт:
( Показать код (3)... )
Точно также аналогично создаем функции, которые будут отображать 2-ю, 3-ю и ... так до последней 16-й таблицы. "16-й" - потому, что всего по условию у нас 15 таблиц с отдельными вопросами + таблица с ответами и 1-я "видимая" таблица с объяснением действий и кнопкой СТАРТ. Приступаем к наполнению контента в теге <BODY>:
( Показать код (4)... )
По аналогии с таблицей <!-- 1 --> и id="question_1" создаем таблицы для 2-го, 3-го ... и т.д. вопросов.
Это, скорее всего, не вызовет трудности.
Последней создаем таблицу с ответами теста и выводим значения переменных, которые считали по нажатию клавиш.
( Показать код (5)... )
Примечание
Для того, чтобы значение переменной было выведено в вышеприведенном тексте (код вверху для таблицы - Результат в баллах), необходима маааленькая тонкость. В нижеприведенном тексте кода вместо *** нужно поставить пробел. Именно вместо этого пробела и будет вписана цифра переменной:
Закрываем тегами <BODY> и <HTML>:
</BODY>
</HTML>
Все.
Использовались следующие стили:
Перейти на титульную страницу: https://bga68.livejournal.com/
Для того, чтобы значение переменной было выведено в вышеприведенном тексте (код вверху для таблицы - Результат в баллах), необходима маааленькая тонкость. В нижеприведенном тексте кода вместо *** нужно поставить пробел. Именно вместо этого пробела и будет вписана цифра переменной:
<span id="variable_1">***</span>
Закрываем тегами <BODY> и <HTML>:
</BODY>
</HTML>
Все.
Использовались следующие стили:
зеленый <span style="color: rgb(97, 128, 0);">
фиолетовый значение style <span style="color: rgb(128, 0, 255);"> # 8000ff;
красный id <span style="color: rgb(255, 0, 0);"> # ff0000;
сиреневый <span style="background-color: rgb(242, 244, 255);">
серый <span style="background-color: rgb(247, 245, 245);">
серый темный на сиреневом <span style="color: rgb(128, 128, 128);">'cost'</span>
оранжевый значение переменной <span style="color: rgb(255, 98, 0);">
белый background <div style="margin-left: 10px; background-color: rgb(255, 255, 255);">
синий <span style="color: rgb(0, 0, 255);">
синий переменные <span style="color: rgb(0, 0, 128);">
фиолетовый значение style <span style="color: rgb(128, 0, 255);"> # 8000ff;
красный id <span style="color: rgb(255, 0, 0);"> # ff0000;
сиреневый <span style="background-color: rgb(242, 244, 255);">
серый <span style="background-color: rgb(247, 245, 245);">
серый темный на сиреневом <span style="color: rgb(128, 128, 128);">'cost'</span>
оранжевый значение переменной <span style="color: rgb(255, 98, 0);">
белый background <div style="margin-left: 10px; background-color: rgb(255, 255, 255);">
синий <span style="color: rgb(0, 0, 255);">
синий переменные <span style="color: rgb(0, 0, 128);">
Перейти на титульную страницу: https://bga68.livejournal.com/
