1. javascriptファイルを格納するためのフォルダを作成する
操作をする前のフォルダ構成です。
下のようにstaticフォルダを作成します。
次に、staticフォルダの中にjsフォルダを作成します。
そして、jsフォルダの中に、jsファイルを作成します。
本記事ではyourapp.jsにしますが、任意の名前で作成してください。
2. 作成したjsファイルをプロジェクトと紐づける
プロジェクトフォルダのsettings.pyを開きます。
BASE_DIRの下に、STATIC_DIRを追加します。
settings.py
BASE_DIR = Path(__file__).resolve().parent.parent
STATIC_DIR = Path.joinpath(BASE_DIR, 'static') #追加
さらに、下のほうにコーディングされているSTATIC_URLを編集し、STATICFILES_DIRSという設定を追加します。
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS =[
STATIC_DIR,
]
3. 作成したjsファイルをhtmlファイルと紐づける
以前templatesフォルダで作成したindex.htmlを下のように書き換えます。
2行目の{% load static %}が、staticフォルダを読み込むという意味です。
7行目では、static/js/yourapp.js内の関数を使用できるように読み込むという意味です。
index.html
<!doctype html>
{% load static %}
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="{% static 'js/yourapp.js' %}"></script>
</head>
<body>
<h1 id="test"> HELLO WORLD</h1>
</body>
最後に、以下のようにyourmap.jsファイルをコーディングしてください。
読みだされたhtmlファイルでid="test"と設定された文字を五秒後に赤く書き換えるという関数です。
yourapp.js
window.onload = function() {
var changeColor = function() {
var e = document.getElementById('test');
e.style.color = 'red';
console.log("書き換えテスト")
}
setTimeout(changeColor, 5000);
}
4. 設定が成功したか確認する
teminalでコマンドをうち、ローカルサーバーを立ち上げます。
python manage.py runserver
まずはじめに、下のような画面が表示されます。
yourapp.jsで書いたとおりに、五秒後に文字の色が赤に変われば成功です。
6. 参考にした記事
@Bashi50(ゆとり PG) 様
https://qiita.com/Bashi50/items/3452bd1692fdd0ac6392
ありがとうございました。