Как через цикл php вывести набор изображений в javascript?

Вопрос-ответ JavaScript
1

Я недавно начал изучать javascript и столкнулся с проблемой по которой очень много информации но внятно я так и не понял как реализовать. Есть допустим обычный цикл php в котором выводятся значения не важно какие допустим от 0-9, и как сделать так что бы javascript принимал данные значение и преобразовывал в изображение в котором собственно и будут данные числа ( допустим круг в котором будет число 0, 1 и тд). И что бы это работало с любым циклом. Полностью писать ответ не надо просто подтолкните меня к решению какие методы использовать и тд.

2

Путей несколько. Пара примитивных (которые навряд будут использоваться в средних и больших проектах).

  1. Сгенерировать html в php, и работать с этим html из джаваскрипта. Например сгенерировать такой html 
<div class='images'>
	<img src="img/1.jpg" />
	<img src="img/2.jpg" />
	<img src="img/3.jpg" />
</div>

А потом получить доступ к узлам изображений:

<script>
	[].forEach.call(document.querySelectorAll('.images img'), function (imageNode) {
		console.log(imageNode)
	})
</script>
  1. Можно сгенерировать JSON объект в php, положить его на глобальный уровень, и обратиться к этому объекту из js.
    Например сгенерировать такой код в php 
<script>
	window.jsData = [1, 2, 3, 4]
</script>

И обработать его через js

<script>
	window.jsData.forEach(function (imgId) {
		console.log(imgId)
	})
</script>
  1. Еще вариант - использовать AJAX или WebSockets для получения JSON объекта в js. Но этот путь навряд ли что тебе нужно при обучении. Хотя при работе над реальным проектом нужно будет выбирать скорее всего его.
1 лайк
3

Очень спасибо, второй вариант мне в принципе подходит. А вот третий заинтерисовал. Можно какойнить информации по третему?

4

Читай про https://ru.wikipedia.org/wiki/AJAX. Есть программа на сервере, есть программа на клиенте. Серверная программа по протоколу http передает данные (json) если ей отправить запрос. Клиентская программа отправляет запрос, получает ответ.

Этот форум работает по такому принципу.

На php примеров не знаю, надо подождать пока кто-то с опытом php ответит.

Есть пример на js. Страница с примерами https://hidden-brook-8135.herokuapp.com/. Исходный код тут https://github.com/podgorniy/todo-server