Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.55/11: Рейтинг темы: голосов - 11, средняя оценка - 4.55
5 / 5 / 0
Регистрация: 13.05.2013
Сообщений: 133

Как вывести массив кроме alert и document.write

10.01.2018, 20:29. Показов 2159. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Возник такой вопрос. Я в JS новичок. Есть массив из чисел. Как его вывести на экран без использования alert и document.write? Нужно, чтобы это выглядело красиво. Подскажите другие способы.
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
10.01.2018, 20:29
Ответы с готовыми решениями:

Как применить стиль к методу alert и document.write?
Подскажите как применить стиль (можно и css) к методу alert и document.write. Я знаю что можно и без функции и без js все сделать. Но мне...

window.document.write и window.alert()
1)Вот смотрите, window ч точки зрения языка джаваскрипт - это объект, скажите это объект какого класса?Ведь говорят что window это самый...

Вывести содержимое страницы при помощи document.write
Пример document.write('http://www.куук.com/кук'); выводится http://www.куук.com/кук но как вывести именно содержание...

4
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
10.01.2018, 20:50
kareglasaya, пример в песочнице. Выводить с сохранением предварительного форматирования, например, <pre> или использовать свойство white-space: pre; и т.д.
JavaScript
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
const print_r = function(obj, t) {
    let tab = t || '',
        isArr = Object.prototype.toString.call(obj) === '[object Array]',
        str = isArr ? ('Array\n' + tab + '[\n') : ('Object\n' + tab + '{\n');
    for (let prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            let val1 = obj[prop],
                val2 = '',
                type = Object.prototype.toString.call(val1);
            switch (type) {
                case '[object Array]':
                case '[object Object]':
                    val2 = print_r(val1, (tab + '\t'));
                    break;
 
                case '[object String]':
                    val2 = '\'' + val1 + '\'';
                    break;
 
                default:
                    val2 = val1;
            }
            str += tab + '\t' + prop + ' => ' + val2 + ',\n';
        }
    }
    str = str.substring(0, str.length - 2) + '\n' + tab;
    return isArr ? (str + ']') : (str + '}');
};
0
707 / 309 / 191
Регистрация: 05.03.2015
Сообщений: 822
11.01.2018, 03:58
console.log выведет красиво в консоль, подойдет более чем полностью во время разработки. Самый простой и быстрый вариант.

Если нужно вывести именно на страницу (зачем?), то понятие "красиво" у каждого свое.

Добавлено через 40 минут
Lazy_Den, думаю не будет лишним моя переделка:

HTML5
1
2
<div id="one"></div>
<div style="white-space: pre-wrap;" id="two"></div>
JavaScript
1
2
3
4
5
6
7
8
9
10
const arr = [0,2,125,67];
 
const beautyArray = (arr) => 
   arr.reduce((res, item, index, array) => res +=  `\t${index} => ${item.toString()}${index < array.length - 1 ? "," : ""} \n`, "");
 
//вариант 1
document.querySelector('#one').textContent = `[${arr}]`;
 
//вариант 2
document.querySelector('#two').textContent = `Array: \n[\n${beautyArray(arr)}\n]`;
П.С. задача была вывести массив, а не написать аналог print_r из php, поэтому вывод объекта/строки я намеренно опустил ибо лень
1
5 / 5 / 0
Регистрация: 13.05.2013
Сообщений: 133
11.01.2018, 10:37  [ТС]
msheal, имелись ввиду готовые инструменты, как, например, в c# - grid.
Если выводить через document.write, то получается как-то примитивно, поэтому и спрашивала, как сделать покрасивее.
Про console.log не знала. Попробую обязательно. Спасибо!
0
the hardway first
Эксперт JS
 Аватар для j2FunOnly
2475 / 1847 / 910
Регистрация: 05.06.2015
Сообщений: 3,610
11.01.2018, 13:18
kareglasaya, как таковых готовых виджетов нет. Всё что есть к использованию "из коробки" - HTML. Вы можете создать таблицу или нумерованный/не нумерованный список, либо вывести массив текстом. Красота ограничивается лишь вашей фантазией и знаниями CSS. Изучайте создание/манипулирование элементами DOM.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
11.01.2018, 13:18
Помогаю со студенческими работами здесь

Вывести с помощью цикла и функции document.write() в HTML документ текст
Вывести с помощью цикла и функции document.write() в HTML документ текст по следующему образцу:

При попытке frame2.document.innerHTML дает: script error, Acces is denied, хотя alert(frame2.document) выдает нормально: [object]
Есть frameset и 2 frame fram1 - грузится моя страница со скриптами frame2 - грузится удаленная страничка, главное штоб не локальная ...

Как вставить пробел в document.write?
Здравствуйте. Такой вопрос - вывожу одну переменную: document.write (a); Переменная - число, в котором в разных случаях разное...

Как поместить document.write('21'); по ссылке JS в PHP переменную
Здравствуйте! Есть не изменяемая ссылка CRM системы для отображения количества товара: &lt;script...

Как поместить document.write('21'); по ссылке JS в JavaScript переменную?
Здравствуйте! Есть не изменяемая ссылка CRM системы для отображения количества товара: &lt;script...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Установка 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru