【djangoとJavaScript】django内でJavaScriptを使って画像を変化させたい #JavaScript

現在3ステップでしっかり学ぶ JavaScript入門という本を使ってJavaScriptを勉強しています。
というのもDjangoアプリケーションでいいねボタンを作っているのですがそれをAjaxを使って非遷移でカウンターを増やしたいのです・・・が全くうまくいかず。
これは付け焼刃の知識では仕方がないのでJavaScriptを学び、かつDjango上でJavaScriptを実際に動かす工程を踏まなきゃだめだな・・・と思ったわけです。

というわけでまず上記の教科書にこんなコードが掲載されていました。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>イメージの操作</title>
<style type="text/css">
body {
    text-align: center;
}
</style>
<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 =  "images/pic" + i + ".jpg"
    }
}
window.onload = init;

var num = 0;
function changeImg() {
    document.myImg.src = imgs[num].src
    num++;
    if (num == 3) num = 0;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<img src="images/off.jpg" name="myImg"
    width="250" height="207"
    onclick="changeImg()"
    onmouseout="this.src='images/off.jpg';"
>
</body>
</html>

まずDjangoの画像の配置ですが2つの方法があります。
以下のようにプロジェクト直下にmediaディレクトリを作成し、そこに画像を配置します。
画像へのパス↓

\mysite\media\off.jpg

つまりDjango使用する際には


imgs[i].src =  "images/pic" + i + ".jpg"

を


imgs[i].src =  "media/pic" + i + ".jpg"

に変更し


onmouseout="this.src='images/off.jpg';"

を


onmouseout="this.src= 'media/off.jpg';"

に変更すれば良いのです。

ただ、普通は共通部分mediaではなくアプリケーションごとにcssとimagesを設けてそこの画像を操作しますよね。
僕もチャレンジしたのですがやったら意外とめんどくさかったです。
とはいえ一応やり方を。

まずはアプリケーション内にstaticディレクトリを作成しその中に画像を配置します。
パスは以下のようになります。


\mysite(プロジェクト名)\javascript(アプリケーション名)\static\javascript(staticディレクトリの中には必ずアプリケーション名を書いたディレクトリを入れること)\images\off.jpg

ここで今度は


imgs[i].src =  "images/pic" + i + ".jpg"

を

imgs[i].src =  "javascript/static/javascript/images/" + i + ".jpg"

のように変更すれば良いような気がしますが実はこれはうまくいきません。
まずstaticディレクトリを呼び出すには{% load static %}と一文をテンプレート内に表記する必要があります。
さらにstaticルートを呼び出すためには"{%static ～ %}"という構文を使うため


imgs[i].src =  "{% static "javascript/images/pic" + i + ".jpg" %}"

とすれば良いと思ったのですが変数iの部分が動作しませんでした。
ここでいろいろ聞いた結果JavaScriptの変数はdjangoのレンダリング時には渡せないということでやるならすべてdjangoで書き換える必要があるようでした。
・・・。
それはいずれはやりたいですが今は勉強したばかりのJavaScriptをDjango上で動作させるということが主目的。
一旦それは保留です。

結局画像部分はループ構造を使わず


 <script type="text/javascript">
    var imgs;
    function init() {
          imgs = new Array(3);
        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" %}"
    }

としました。

最終的にこんなコードに。もう少し研究の余地がある気がしますね、これ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'javascript/style.css' %}">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>JavaScriptの実験</title>
  </head>
  <body>
    <h1>JavaScriptの実験</h1>


    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    body {
        text-align: center;
    }
    </style>
    <script type="text/javascript">
    var imgs;
    function init() {
          imgs = new Array(3);
        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;

    var num = 0;
    function changeImg() {
      document.myImg.src = imgs[num].src
      num++;
      if (num == 3) num = 0;

    }
    </script>
    </head>
    <body bgcolor="#FFFFFF">
    <img src= "{% static "javascript/images/off.jpg" %}" name="myImg"
        width="250" height="207"
        onclick="changeImg()"
        onmouseout="this.src='{% static "javascript/images/off.jpg" %}';"
    >



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>