Javascript 无法从html文件访问script.js

我有profile.html和script.js文件，我在服务器中运行profile.html，该服务器应调用script.py，理想的工作方式应如下示例所示：

https://mido22.github.io/MediaRecorder-sample/.

然而，在我的例子中，当我点击请求流按钮时，页面被重新加载，什么也没有发生。 profile.html和script.js都在同一个目录中

profile.html

{% extends "blog/base.html" %}

{% load crispy_forms_tags %}
{% block content %}
        <style>
      button{
        margin: 10px 5px;
      }
      li{
        margin: 10px;
      }
      body{
        width: 90%;
        max-width: 960px;
        margin: 0px auto;
      }
      #btns{
        display: none;
      }
      h1{
        margin: 100px;
      }
    </style>
    <div class="content-section">
        <div class="media">
            <img class="rounded-circle account-img" src="{{ user.profiles.image.url }}">
            <div class="media-body">
                <!-- the user here is built-in in django that represents current logged in user -->
                <h2 class="account-heading">{{ user.username }}</h2>
                <p class="text-secondary">{{ user.email }}</p>
            </div>
        </div>
        <!-- (enctype) : pass image data for our profile picture properly -->
        <form method="POST", enctype="multipart/form-data">
            <!-- Adds some security checks -->
            {% csrf_token %}

            <h1> MediaRecorder API example</h1>

            <p> For now it is supported only in Firefox(v25+) and Chrome(v47+)</p>
            <div id='gUMArea'>
              <div>
              Record:
                <input type="radio" name="media" value="video" checked id='mediaVideo'>Video
                <input type="radio" name="media" value="audio">audio
              </div>
              <button class="btn btn-default"  id='gUMbtn'>Request Stream</button>
            </div>
            <div id='btns'>
              <button  class="btn btn-default" id='start'>Start</button>
              <button  class="btn btn-default" id='stop'>Stop</button>
            </div>
            <div>
              <ul  class="list-unstyled" id='ul'></ul>
            </div>
            <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> 
</script>
            <script src="script.js"></script>
        </form>
    </div>
{% endblock content %}

我得到的错误是：

[01/Mar/2020 15:27:36] "POST /profile/ HTTP/1.1" 200 5274
Not Found: /profile/script.js
[01/Mar/2020 15:27:36] "GET /profile/script.js HTTP/1.1" 404 3896

---

我们不能直接从django文件夹中提供文件或其他内容，因为django出于安全目的，如果我们希望提供文件或其他可以在开发过程中使用的内容，则会阻止这样做。或者，您可以将javascript代码写入/移动到html模板，而无需像这样导入：

<script>
your javascript code
</script>

您的javascript代码

---

但是如果我们使用大量javascript代码，它将变得无效。

您的scipt是否列为公共资源？请参阅以下代码：@AhmedKhattab

<script>
your javascript code
</script>