Конкатенация с пробелом

@Борис Ф · Регистрация: 05.04.2019

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

Добрый вечер, господа!
Мучаю простенькие задачи на вложенные циклы.
Необходимо из * построить фигуру параллелограмма следующего вида (кстати, тут тоже проглатывает пробелы, фигура выводится в виде прямоугольника):

Code
1
2
3
  *****
 *****
*****

Первая строка смещение на два знака пробела, вторая на один, третья без смещения.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en" dir="ltr">
 
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
  <title>Упражнение из учебника</title>
</head>
 
<body>
    <div>Упражнение 6
    <h3 id="out-6"></h3>
 </div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
let out6 = document.getElementById("out-6");
for (let i = 2; i >= 0; i--) {//перенос строки
    for (let k = 1; k < 5 + i; k++) {//пробелы + звездочки
        if (k > i) {
            out6.innerHTML += '*';
        } else {
            out6.innerHTML += '_';//менять на пробел здесь
        }
    }
    out6.innerHTML += '<br>';
}

Если вместо пробела подставлять нижнее подчеркивание, то получается фигура типа:

Code
1
2
3
__*****
_*****
*****

Т.е. практически то что нужно. Однако, если подставить пробел, то получится обычный прямоугольник без смещения. Вроде бы знак пробела ничем не хуже нижнего подчеркивания?

На всякий случай ссылочка
https://codepen.io/fesenkobv/pen/KKwaGoE

@fixeri · 19.12.2019, 00:55

alt + 255 (NUMLOCk цифры) невидимый символ.

JavaScript
1
out6.innerHTML += ' ';//менять на пробел здесь

@amr-now · 19.12.2019, 05:31

Здравствуйте.
Борис Ф, fixeri, для рисования геометрических фигур буквами используются обычно два способа.

HTML5
1
2
3
<div>Упражнение 6
    <pre id="out-6"></pre>
</div>

или для элемента в стилях указать моноширинный шрифт.
Неразрывный пробел сам по себе не поможет навести красоту.

@j2FunOnly · 19.12.2019, 08:31

Сообщение от amr-now

Неразрывный пробел сам по себе не поможет навести красоту.

Почему же?

JavaScript
1
out6.innerHTML += '&nbsp;';//менять на пробел здесь

@Борис Ф · 19.12.2019, 22:22 **[ТС]**

Спасибо, господа!
Шаманство с &nbsp и alt + 255 работает. Есть предпочтения между этими способами или нет?

@amr-now · 20.12.2019, 09:34

Борис Ф, <pre> используйте.

Неразрывный пробел сам по себе не поможет навести красоту.

По умолчанию разные буквы имеют разную ширину, и картинка с разными буквами будет некрасивой.
Красота будет, если буквы будут одинаковой ширины. А <pre> - самый простой способ для студентов рисовать красиво.

Добавлено через 3 часа 24 минуты
Первый способ с <pre>

PHP/HTML
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Упражнение из учебника</title>
</head>
<body>
    <div>Упражнение 6
        <pre id="out-6"></pre>
    </div>
    <script>
        let out6 = document.getElementById("out-6"),
            s = "";
        for (let i = 2; i >= 0; i--) { //перенос строки
            for (let k = 1; k < 5 + i; k++) { //пробелы + звездочки
                if (k > i) {
                    s += '*';
                } else {
                    s += ' '; //пробел
                }
            }
            s += '\n'; // Перевод строки
        }
        out6.innerHTML = s;
    </script>
</body>
</html>

Второй способ - на постороннем HTML-элементе использовать стили из <pre>
На английском форуме посоветовали официально достоверную эмуляцию стилей <pre>
https://www.w3.org/TR/CSS21/sample.html

PHP/HTML
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Упражнение из учебника</title>
    <style>
        .pre {
            display: block;
            unicode-bidi: embed;
            font-family: monospace;
            white-space: pre;
        }
    </style>
</head>
<body>
    <div>Упражнение 6
        <h3 id="out-6" class="pre"></h3>
    </div>
    <script>
        let out6 = document.getElementById("out-6"),
            s = "";
        for (let i = 2; i >= 0; i--) { //перенос строки
            for (let k = 1; k < 5 + i; k++) { //пробелы + звездочки
                if (k > i) {
                    s += '*';
                } else {
                    s += ' '; //пробел
                }
            }
            s += '\n'; // Перевод строки
        }
        out6.innerHTML = s;
    </script>
</body>
</html>

Добавлено через 13 минут
Вариант с моноширинным шрифтом, неразрывным пробелом и <br />

PHP/HTML
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Упражнение из учебника</title>
    <style>
        .monospace {
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div>Упражнение 6
        <h3 id="out-6" class="monospace"></h3>
    </div>
    <script>
        let out6 = document.getElementById("out-6"),
            s = "";
        for (let i = 2; i >= 0; i--) { //перенос строки
            for (let k = 1; k < 5 + i; k++) { //пробелы + звездочки
                if (k > i) {
                    s += '*';
                } else {
                    s += ' '; //пробел alt+255
                }
            }
            s += '<br />'; // Перевод строки
        }
        out6.innerHTML = s;
    </script>
</body>
</html>

@Борис Ф · 20.12.2019, 10:47 **[ТС]**

Спасибо!
Пр решении задачи опирался на пройденный материал. Такие способы пока не рассматривались. Изучу.

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

Конкатенация с пробелом

Решение

Решение

@Борис Ф 0 / 0 / 0 Регистрация: 05.04.2019 Сообщений: 54
	19.12.2019, 22:22 [ТС]
	Спасибо, господа! Шаманство с &nbsp и alt + 255 работает. Есть предпочтения между этими способами или нет? 0

@Борис Ф 0 / 0 / 0 Регистрация: 05.04.2019 Сообщений: 54
	20.12.2019, 10:47 [ТС]
	Спасибо! Пр решении задачи опирался на пройденный материал. Такие способы пока не рассматривались. Изучу. 0