【Django】JavaScriptをテンプレートから読み込む方法|PythonによるWebアプリ開発#4-2

当ページには広告が含まれています。

こんにちは、DXCEL WAVEの運営者(@dxcelwave)です!

こんな方におすすめ!

Django Frameworkで作成したフロント画面からJavaScriptを読み込む方法が知りたい

目次

【Django】javaScriptの動的オブジェクト表示・テンプレート作成手順

本記事ではDjangoのテンプレートからJavaScriptを読み込む方法について解説します。

前提として上記のフォルダ構成で解説を進めます。

  • static > js > script.jsにJavaScriptを書き込みます。
  • Template > App_Folder_HTML > index.htmlから上記JavaScriptファイルを読み込みます。

【事前準備】Djangoテンプレートを作成する

DjangoのテンプレートからJavaScriptを読み込むに際して、事前にテンプレートを作成する必要があります。

以下の記事を参考にし、上記①〜⑥について事前に対応しておきましょう。

【実践】JavaScriptファイルを作成

staticフォルダ内にjsフォルダを作成し、JavaScriptを記述するためのscript.jsファイルを作成しましょう。

そしてscript.jsにJavaScriptコードを記述しましょう。以下サンプルコードを提示します。

// JavaScriptのサンプルコード

function hello(){
  var input = prompt("Hello World");
}

hello()

【実践】テンプレートファイルからJavaScriptを読込

Templateフォルダ内にApp_Folder_HTMLフォルダを作成し、HTMLを記述するためのindex.htmlファイルを作成しましょう。そして、次のようなコードを記述します。

<!DOCTYPE html>
{% load static %}

<html lang="ja" dir="ltr">
   <head>
     <meta charset="utf-8">
     <title>Django Page</title>

     <!-- ここにJavaScriptを読み込むコード -->
     <script src="{% static 'js/script.js' %}"></script>
   </head>
   
   <body>
     <h1> Hello World</h1>
   </body>
</html>

JavaScriptファイル(script.js)は、テンプレートタグを使用することで読み込むできるようになります。

<!-- ここにJavaScriptを読み込むコード -->
<script src="{% static 'js/script.js' %}"></script>

最後に動作確認を行い、JavaScriptが実行可能か確認してみましょう。

【参考】Djangoの解説記事一覧

最後までご覧いただきありがとうございました。当サイトではDjangoフレームワークを用いた解説記事を多数取り扱っております。次のように体系的に整理しておりますため学習にお役立て下さい。

Django学習に最適!

当サイトが運営するDjango記事一覧

【参考】Pythonでできること・お仕事探し

最後に

この記事が気に入ったら
フォローしてね!

目次