スポンサーリンク

【Django】プロジェクト内でのJavaScript変数の使い方ご紹介。

Django
スポンサーリンク

前回はDjangoにてcssファイルを使用してカードの配置等を変更させました。

そこから少し変更させ、いよいよ本番と言っても過言ではないDjango ないでjavascriptの実装です。JQueryというフレームワークもありますが今回はフレームワークなしでどんどん実装していこうとおもいます。
また、仕事ではないので方針を固めずどんどんやっていて適宜やり方を考えていこうと思います。

スポンサーリンク

Djangoでjsファイルを利用

よく言われているのがstaticsフォルダ内にcssフォルダを作って格納するというものです。

これでもjsは使用できます。
ただjs内に変数が存在しないものに限ってです。
例えばページを自動で動かすとかそういう系!

下記非常に重要なことです。
Djangoですとstaticsフォルダ内にあるjsの変数をindex.html側に飛ばすことができません。
ずっとそのエラーが出ており、困っていたのですがどうやら変数拾えてない。
ということでhtmlの<script>〜</script>内に変数を記述すると解決しました。

そのため結論としてDjangoでは変数はhtml側での記述が必要みたいです。
てかそもそもscriptファイルをhtml側に記述したほうが使い勝手いいなと感じた。

その為jsを付け加えていく際はhtml側に以後記載していきます。

Htmlの変化点

前回からcssとhtmlを少し変更させ下記のようになっております。python側のファイルは特に変更しいませんので記載気になるかたはコチラご確認よろしくです!

<html>
{% load static %}
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="{% static 'ap/css/gamepage_css1.css' %}">
    <title>きのこがり</title>
    <script></script>
</head>
   <table id = 'player' width="1000" height="200">
        <th>{{ player1 }}</th><th>{{ player2 }}</th><th>{{ player3 }}</th>   
        
        <th></th><th></th><th></th>
    </table>
    

    <div>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id ="cards1-1">                          
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-2'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-3'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-4'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-5'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-6'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-7'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-8'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-9'>
        <img src="{% static "ap/image/kinoko/dokumark.png" %}">
    </div>
    <div>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-2Z'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-2'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-3'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-4'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-5'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-6'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-7'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-8'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-9'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards2-10'>
    </div>
    <div>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-3'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-2'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-3'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-4'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-5'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-6'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-7'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-8'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-9'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards2-10'>
    </div>
    <div>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-13'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-2'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-3'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-4'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-5'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-6'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-7'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-8'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-9'>
        <img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards2-10'>
    </div>
</body>
</html>

前回table要素で記載していた箇所をdivとimg要素で記載しています。
そこまで内容自体変わっていません。

<

<script>の箇所はtitleの下に設置する予定です。
作成は次回かなー!!

body {
    line-height: 1;
    font-family:  sans-serif;
    font-size: 20px;
    font-weight: 300;
    color: #333;
  }

img {
    width:80px;
    height:120px;
}

cssも簡素にしました。
隙間をわざわざ前回は指定して作っていましたが幅調節ができることがわかったのでコチラの方が見やすいです。

以上で作成したページが下記のようになっているはずです。

今回はjsファイルの格納と変数の注意点に関してがメインの記事になってしまいました。
次は実際にカードをクリックさせて動かしていきます。

次回の記事はコチラからご参照ください。

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

Django
スポンサーリンク
スポンサーリンク

コメント

  1. […] 前回の記事はコチラをご参照ください。Djangoでjavascriptの変数に関する注意点【Djangoでカードクリックゲーム作成!… […]

  2. […] 前回の記事はコチラをご参照ください。Djangoでjavascriptの変数に関する注意点【Djangoでカードクリックゲーム作成!!3日目①】 […]

タイトルとURLをコピーしました