Правильное выполнение цикла

@pokahontas · Регистрация: 27.11.2018

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

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

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
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chap 2</title>
</head>
<body>
    <style>
    a{
  color: #369;
  font: 1em Arial,sans-serif;
}
</style>
<h1>Задачи по <a href="http://htmllab.ru">JavaScript</a></h1>
 
<!-- 
Задача
Напишите скрипт, который при нажатии на ссылку будет получать текст из многострочного текстового поля, разбивает его на отдельные слова и результат выводит в браузер
-->
<form name="form1">
<textarea name="textarea1" ></textarea>
<a href="javascript:some()">Ссылка</a>
</form> 
<script>
    function some(){
        var win = window.open("","");
        var pole = document.forms[0].elements[0].value;
        win.document.write("<html><body>");
        showPole(pole);
        win.document.write("</body></html>");
        function showPole(textz){                 
        for (var i=0;i<textz.length;i++){   
        if (textz[i] == " "){
        var newt = textz.replace(" ","<br>");   
     //   continue;    
    } 
            }
    win.document.write("<i>"+newt+"</i>");      
    }   
}
    </script>
</body>
</html>

@svtslv · 10.02.2019, 02:01

pokahontas, https://jsfiddle.net/pa60w5c7/

HTML5
1
2
3
<textarea id="text" >My long string</textarea><br />
<button id="btn">Click</button><br />
<div id="res"></div>

JavaScript
1
2
3
4
let btn = document.querySelector('#btn')
let res = document.querySelector('#res')
let text = document.querySelector('#text')
btn.onclick = () => res.innerHTML = text.value.replace(/\s/g, '<br />')

@amr-now · 10.02.2019, 09:02

Всем доброго времени суток
pokahontas, была нарушена логика алгоритма.

Дано: исходные данные.
Получить: новые данные.

Так и нужно было дописывать в новые данные:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        function some() {
            var win = window.open("", "");
            var pole = document.forms[0].elements[0].value;
            win.document.write("<html><body>");
            showPole(pole);
            win.document.write("</body></html>");
            function showPole(textz) {
                var newt = "";
                for (var i = 0; i < textz.length; i++) {
                    if ([9, 10, 13, 32].indexOf(textz.charCodeAt(i)) !== -1) {
                        newt += "<br/>";
                    }
                    else
                        newt += textz[i];
                }
                win.document.write("<i>" + newt + "</i>");
            }
        }

9, 10, 13, 32 - ASCII-коды нескольких пробельных символов.

Добавлено через 2 минуты
Алгоритм при желании можно слегка улучшить, найдя несколько последовательных пробельных символов. Для них на выходе получить единственный элемент <br/>

@pokahontas · 10.02.2019, 11:48 **[ТС]**

Спасибо, последний пример был особенно поучителен, позволю себе спросить еще можно ли выполнить данную функцию через рекурсию по принципу того, как сделано в этом примере:

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
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
<!doctype html>
 
<html>
<head>
    <title>Структура DOM</title>
    <meta charset="utf-8">[/HTML]
    <script type="text/javascript">
 
        function showDOM(){
            var w = window.open("","");
            w.document.write("<html><body>");
            showChildNodes(document.body, w.document);
            w.document.write("</body></html>");
            }
            function showChildNodes(node,doc){
                if (node.nodeType == 3){
                    doc.write("<i>"+node.nodeValue+"</i><br>")
                }
                if (node.nodeType == 1){
                doc.write("<b>"+node.nodeName+"</b>")
                }
                for(var i=0;i<node.childNodes.length;i++){
                    showChildNodes(node.childNodes[i], doc);
                doc.write("<br>");
                }
            
            }
        /*
            Создайте и опишите функцию showDOM(), которая открывает новое окно браузера 
                и выводит на экран структуру текущего документа, вызывая
                рекурсивную функцию showChildNodes(node, doc)
            1. Откройте новое окно
            2. Отрисуйте в новом окне открывающие тэги "<html>" и "<body>" (document.write!)
            3. Вызовите вышеописанную  функцию showChildNodes(), передав в качестве параметров:
                - корневой элемент документа (document.documentElement) или тело документа (document.body)
                - ссылку на объект Document нового окна
            4. Отрисуйте в новом окне закрывающие тэги "</html>" и "</body>" 
        */
        
        /*
         Создайте и опишите рекурсивную функцию showChildNodes(node, doc), 
            которая отрисовывает дочерние узлы текущего узла.
            Функция должна принимать два аргумента:
                - node: текущий узел
                - doc: ссылку на объект Document нового окна, в который производится вывод
            1. Проверьте тип текущего узла
                1.1 Если это текстовый узел - отрисуйте его содержание
                1.2 Если это узел-элемент - выведите его название и ...
                    вызовите эту функцию для каждого из дочерних узлов   
        */
        
        
    </script>
</head>
 
<body>
    <h1>Структура DOM</h1>
    <div>
        <h2>Вывод структуры DOM</h2>
        <p>Этот код открывает новое окно и выводит в него структуру текущего документа</p>
    </div>
    <div>
        <h2>Запуск кода</h2>
        <p>Для запуска кода щелкните <a href="javascript:showDOM()">здесь</a></p>
    </div>
 
</body>
</html>

Проблема в том, что я не могу обратиться внутри <textarea> к узлам этого текста, не пойму вообще возможно ли это сделать?

@amr-now · 10.02.2019, 12:41

pokahontas, есть три первые вещи начинающего программиста, которые делать НЕ нужно:
- несколько ветвящихся условий if в одном месте,
- switch с несколькими вариантами, количество которых заметно больше трех,
- рекурсия в реализациях JavaScript, где еще не сделана хвостовая рекурсия.
(лапшу из if и switch нужно стараться заменять массивом с циклом по нему.)

Остальное будем думать отдельно ))

Новые блоги и статьи Все статьи Все блоги /
Инструменты 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 и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	10.02.2019, 12:41
	pokahontas, есть три первые вещи начинающего программиста, которые `делать НЕ нужно`: - несколько ветвящихся условий `if` в одном месте, - `switch` с несколькими вариантами, количество которых заметно больше трех, - `рекурсия` в реализациях JavaScript, где еще не сделана хвостовая рекурсия. (лапшу из if и switch нужно стараться заменять массивом с циклом по нему.) Остальное будем думать отдельно )) 1