15 ноября или интерфейс-трансформер. I’ll be back, html

@It-architector · Регистрация: 10.11.2019

Студворк — интернет-сервис помощи студентам

Давайте сделаем интерфейс-трансформер на JS, где html вполне управляем и подвижен.

15 ноября или интерфейс-трансформер. I’ll be back, html

При выполнении этой задачи я буду опираться на архитектуру CSDR.

Приступим.

Давайте взглянем на трансформацию в природе!

1. Объект «Семя»

Получаем java-script-код (и никаких html-тэгов, кроме script).

2. Главная цель

Получаем цели.

3. Главное место

Выстраиваем DOM.

4. Место запаса

Запоминаем глобальные переменные.

5. Верхне-нижнее место

DOM дополняется новыми отделами.

6. Элемент

Задаем на местах необходимый обмен (входящее-выходящее) с глобальными переменными.

7. Событие

На элементы выставляем необходимые события.

8. Объект «Дерево»

Отображаем интерфейс в браузере!

Часть примера вывода тэга div и b, с наполнением (ниже ссылка):

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<html id="1.1">
<head id="1.1.1">
    <title id="1.1.1.1"></title>
    <meta id="1.1.1.2" charset="utf-8">
    <script id="1.1.1.3">
 
        $GLOBALS = [];
 
        /*1 компонент проекта*/
        $GLOBALS['Рефлексы'] = {
            '1': {
                'Ориентир': 'Интерфейс',
                'Условия': 'false',
                'Расчёты': 'Не более 5 кб. памяти',
                'Места': ['1'],
                'Вложение': {
                    '1.1': {
                        'Ориентир': 'Пример развёртки html',
                        'Условия': 'true',
                        'Расчёты': 'Два новых тэга',
                        'Места': ['1.1.2.1','1.1.2.1.1'],
                        'Вложение': false
                    },
                    '1.2': {
                        'Ориентир': 'Пример наполнения содержимым',
                        'Условия': 'true',
                        'Расчёты': 'Текст для одного тэга',
                        'Места': ['1.1.1.1.1','1.1.2.1.1.1'],
                        'Вложение': false
                    },
                }
            }
        };
 
        /*2 компонент проекта*/
        $GLOBALS['Места']    = {
            '1': {
                'Смысл': 'Память интерфейса',
                'Роль': ['Способность'],
                'Связи': ['1'],
                'Вложение': {
                    '1.1': {
                        'Смысл': 'Тэг html',
                        'Роль': {'Оболочка':'html'},
                        'Связи': false,
                        'Вложение': {
                            '1.1.1': {
                                'Смысл': 'Тэг head',
                                'Роль': {'Оболочка':'head'},
                                'Связи': false,
                                'Вложение': {
                                    '1.1.1.1': {
                                        'Смысл': 'Блок заголовка',
                                        'Роль': {'Оболочка':'title'},
                                        'Связи': false,
                                        'Вложение': {
                                            '1.1.1.1.1': {
                                                'Смысл': 'Текст заголовка',
                                                'Роль': ['Информация в оболочку'],
                                                'Связи': false,
                                                'Вложение': 'Пример'
                                            },
                                        }
                                    },
                                    '1.1.1.2': {
                                        'Смысл': 'Кодировка',
                                        'Роль': {'Оболочка':'meta'},
                                        'Связи': false,
                                        'Вложение': false
                                    },
                                    '1.1.1.3': {
                                        'Смысл': 'Вызов js',
                                        'Роль': {'Оболочка':'script'},
                                        'Связи': false,
                                        'Вложение': false
                                    },
                                }
                            },
                            '1.1.2': {
                                'Смысл': 'Тэг body',
                                'Роль': {'Оболочка':'body'},
                                'Связи': false,
                                'Вложение': {
                                    '1.1.2.1': {
                                        'Смысл': 'Блок для текстов',
                                        'Роль': {'Оболочка':'div'},
                                        'Связи': false,
                                        'Вложение': {
                                            '1.1.2.1.1': {
                                                'Смысл': 'Блок текста',
                                                'Роль': {'Оболочка':'b'},
                                                'Связи': false,
                                                'Вложение': {
                                                    '1.1.2.1.1.1': {
                                                        'Смысл': 'Текст',
                                                        'Роль': ['Информация в оболочку'],
                                                        'Связи': false,
                                                        'Вложение': 'Хорошая архитектура — это дорого. Плохая — еще дороже.'
                                                    },
 
............. //весь код смотрите по ссылке
 
        /*активируем интерфейс*/
        $GLOBALS['Реакции'][1]['Способность']();
 
    </script>
</head>
<body id="1.1.2"></body>
</html>

Вся версия кода

@It-architector · 19.11.2019, 16:30 **[ТС]**

Пример страницы: http://framework-csdr.ru/

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@It-architector 0 / 0 / 0 Регистрация: 10.11.2019 Сообщений: 10
	19.11.2019, 16:30 [ТС]
	Пример страницы: http://framework-csdr.ru/ 0