【django,JavaScript】djangoの画像表示の際に変数を使いたい

お世話になります。
pythonのフレームワークdjango内でJavaScriptを使用し以下のようなプログラムを作っています。

JavaScript
1    <script type="text/javascript">
2    var imgs;
3    function init() {
4    	imgs = new Array(3);
5    	for (var i = 0; i <= (imgs.length - 1); i++) {
6    		imgs[0] = new Image(250, 207);
7    		imgs[0].src =  "{% static "javascript/images/pic0.jpg" %}"
8        imgs[1] = new Image(250, 207);
9        imgs[1].src =  "{% static "javascript/images/pic1.jpg" %}"
10        imgs[2] = new Image(250, 207);
11        imgs[2].src =  "{% static "javascript/images/pic2.jpg" %}"
12
13    	}
14    }
15    window.onload = init;
16
17    var num = 0;
18    function changeImg() {
19    	document.myImg.src = imgs[num].src
20    	num++;
21    	if (num == 3) num = 0;
22    }
23    </script>
24    </head>
25    <body bgcolor="#FFFFFF">
26    <img src="{% static "javascript/images/off.jpg" %}" name="myImg"
27    	width="250" height="207"
28    	onclick="changeImg()"
29    	onmouseout="this.src="{% static "javascript/images/off.jpg" %}";"
30    >

この部分は画像をクリックするたびに違う画像が表示されます。

  <script type="text/javascript">
    var imgs;
    function init() {
    	imgs = new Array(3);
    	for (var i = 0; i <= (imgs.length - 1); i++) {
    		imgs[0] = new Image(250, 207);
    		imgs[0].src =  "{% static "javascript/images/pic0.jpg" %}"
                imgs[1] = new Image(250, 207);
                imgs[1].src =  "{% static "javascript/images/pic1.jpg" %}"
                imgs[2] = new Image(250, 207);
                imgs[2].src =  "{% static "javascript/images/pic2.jpg" %}"

    	}
    }
    window.onload = init;

これをiの変数を利用して

  <script type="text/javascript">
    var imgs;
    function init() {
    	imgs = new Array(3);
    	for (var i = 0; i <= (imgs.length - 1); i++) {
    		imgs[i] = new Image(250, 207);
    		imgs[i].src =  "{% static "javascript/images/pic" + i + ".jpg" %}"
                imgs[1] = new Image(250, 207);
    	}
    }
    window.onload = init;

と書き換えれば変数iを利用して画像を表示できると考えたのですが上手くいきませんでした。
書き換えた部分は以下です。

    		imgs[i] = new Image(250, 207);
    		imgs[i].src =  "{% static "javascript/images/pic" + i + ".jpg" %}"
                imgs[1] = new Image(250, 207);

{%static %}内で変数を使用するのが不可能ならば素直に諦めるのですが不可能なのかも調べましたが分かりませんでしたし、できる場合にどのようにしたらよいのかも分かりませんでした。もしよければご教授願います。

m.ts10806

2019/05/08 02:59

ブラウザの開発ツールのコンソールでエラーを確認するか「ソースを表示」で出力されたhtml（今回はそのなかのJavaScriptのコードですね）を確認されるとなぜできていないか分かるかと思います。（サーバーサイド、クライアントサイドについての理解が必要に思います）念のため、確認結果を質問に追記してください。

sr2460

2019/05/08 05:55

お世話になります。下記回答にあるようにループで処理するならdjangoテンプレートのfor文を使う方向になりそうでしたがそれだとかえって分かりにくいプログラムになりそうでしたので今回はこのままいくことにしました。また、以前django内でAjaxを使う質問を立てた際にいろいろご回答いただいたのですがまだそちらは解決していませんが現在も勉強中ですので、もし解決した折にはご報告させていただきます。

m.ts10806

2019/05/08 05:59

テンプレート構文を使うのは有用で、JavaScriptと混ぜるよりは有用と思います。他の言語でもテンプレート構文の活用は日常的に行われてますよ。

sr2460

2019/05/08 06:18

ありがとうございます。最終的にはこのプログラムはテンプレート構文を使って操作をしたいですしそれが一番スマートなように思うのですが、今取り組んでいるのがdjango上でJavaScriptを動かしてみることができるか？(JavaScriptはほぼ初心者なので）なのでdjango上でいくつかJavaScriptのプログラムを動かしていろいろ試してから取り組んでみようと思います。

m.ts10806

2019/05/08 06:58

サーバーサイドのプログラムの出力が先に行われて、結果をブラウザが読み取るのでそのあたりの関係性を整理されたほうが使いやすくはなると思います。一般的にあまりJavaScriptにそのままサーバーサイドの仕組みを書くことってないです。(ユーザー入力やリクエストを扱う場合、セキュリティの脅威となるので。) どのような内容でもサーバーサイドのプログラムから出力されるものは「単なる文字列でしかない」という認識でいると分かりやすくなると思います。ブラウザから表示させる以上はJavaScriptは使えます。

sr2460

2019/05/10 04:40

アドバイスありがとうございます。最終的な目標がDjangoの自作プログラムでAjaxで非繊維の通信をする、なのですがJavaScriptがよく分からなくてJavaScriptでできることやDjango上で動作するか等いろいろ試している段階なのです。まだ分からないことが多いのですが今回のアドバイスも思い出しながらいろいろ試行錯誤していこうと思います。

m.ts10806

2019/05/10 04:45

非繊維・・・というか「遷移するしない」ではなく言葉として「非同期」というものがありますので、そちらで覚えたほうが良いと思います。

sr2460

2019/05/11 06:09

ありがとうございます。非同期で検索したら情報がたくさん出てきました・・・。

行動規範の内容に同意します

回答1件

ベストアンサー

iはJavaScriptの変数なので、Djangoのテンプレートのレンダリング時には渡せません。ループで処理したいならば、テンプレートのforタグを使って処理するのがわかりやすい気がします。

投稿2019/05/08 03:43

iwamot

総合スコア1154

sr2460

2019/05/08 05:50

ありがとうございます。このように関数を作ってみて def js(request): list = [] for a in range(0,3): list.append(a) context ={'a': list} return render(request, 'javascript/index.html', context) それを {% for a in a %} {{ a }} {% endfor %} のようにしてテンプレートに出すなどいろいろ試してみましたが、djangoのテンプレートでfor文で処理しようとするとかえって保守性なども失われると思いましたので今回はこのままのコードで行こうと思います。ただなぜ変数が動作しないかの理由を教えていただいたのでベストアンサーにさせていただきます。

行動規範の内容に同意します