diff --git a/src/main/resources/static/js/one.js b/src/main/resources/static/js/one.js
new file mode 100644
index 0000000000000000000000000000000000000000..412bb6d8b3ce37091eb2859d8b80010f1b0ad406
--- /dev/null
+++ b/src/main/resources/static/js/one.js
@@ -0,0 +1,3 @@
+function f3() {
+    document.getElementById("t1").innerHTML="这里是外部JS代码";
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/Buju.html b/src/main/resources/templates/Buju.html
index 2e9b51db95de73875ea92466668b86646695e755..5dcee240289738c210b1a6daf9d11dae925b523d 100644
--- a/src/main/resources/templates/Buju.html
+++ b/src/main/resources/templates/Buju.html
@@ -24,6 +24,7 @@
         <a href="Person.html">个人页</a>
         <a href="#" class="active">页面布局</a>
         <a href="test4.html">圆角和阴影</a>
+        <a href="useJavascript.html">Javascript1</a>
     </div>
     <div id="main">
         <div id="lp" class="aside">
diff --git a/src/main/resources/templates/Person.html b/src/main/resources/templates/Person.html
index 8ddb41919e2198a3682bb9f0175584a48e4655d9..eae3bce4ecb63ab34c03b6117241013ad7f7073b 100644
--- a/src/main/resources/templates/Person.html
+++ b/src/main/resources/templates/Person.html
@@ -183,6 +183,7 @@
                 <li><a href="Home.html">家乡介绍</a></li>
                 <li class="active"><a href="Person.html">个人介绍</a></li>
                 <li><a href="Buju.html">页面布局</a></li>
+
             </ul>
         </div>
     </div>
diff --git a/src/main/resources/templates/test4.html b/src/main/resources/templates/test4.html
index a3c76fceeeefe5cbd97dabc5285fbb4e82beae1f..303693aa54deff200657266d5b87a661a93fbd21 100644
--- a/src/main/resources/templates/test4.html
+++ b/src/main/resources/templates/test4.html
@@ -95,6 +95,7 @@
         <a href="Person.html">个人页</a>
         <a href="Buju.html">页面布局</a>
         <a href="#" class="active">圆角和阴影</a>
+        <a href="useJavascript.html">Javascript1</a>
     </div>
     <div id="main">
         <div id="lp" class="aside">
diff --git a/src/main/resources/templates/useJavascript.html b/src/main/resources/templates/useJavascript.html
new file mode 100644
index 0000000000000000000000000000000000000000..4349d40cb34b8d06706f184eca38cf511768c903
--- /dev/null
+++ b/src/main/resources/templates/useJavascript.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>页面布局</title>
+    <link rel="stylesheet" href="../static/css/buju.css">
+    <style type="text/css">
+        .active{
+            color: blue;
+        }
+        .cen{
+            margin: 25% auto;
+        }
+        button{
+            width: 150px;
+            height: 50px;
+            background-color: #b8daff;
+        }
+    </style>
+    <script>
+        function f1() {
+            alert("head标签内嵌脚本");
+        }
+    </script>
+</head>
+<body>
+<div id="container">
+    <div id="header">
+        <div style="margin-top: 10px;padding-top:30px; ">
+            <h1 style="color: red;">Web 课实验·Javascript使用方式</h1>
+        </div>
+    </div>
+    <div id="nav">
+        <a href="Home.html">御承扬</a>
+        <a href="Home.html">首页</a>
+        <a href="Person.html">个人页</a>
+        <a href="Buju.html">页面布局</a>
+        <a href="test4.html">圆角和阴影</a>
+        <a href="#" class="active">Javascript1</a>
+    </div>
+    <div id="main">
+        <div id="lp" class="aside">
+            <p id="ap">
+                点击下面按钮，会调用在行内Javascript脚本修改本段落内容。
+            </p><br>
+            <button onclick="document.getElementById('ap').innerHTML='这里是在行内Javascript'">行内JS</button>
+        </div>
+        <div id="content">
+            <div class="cen">
+                <h1>
+                    点击下面按钮调用head标签内的Javascript脚本
+                </h1><br>
+                <button onclick="f1()">嵌套JS</button>
+            </div>
+        </div>
+        <div id="rp" class="aside">
+            <p id="t1">
+                点击下面的按钮，会调用外部JS改变本段落内容。
+            </p><br>
+            <script src="../static/js/one.js"></script>
+            <button onclick="f3()">外部JS</button>
+        </div>
+    </div>
+    <div id="footer">
+        <div style="margin-top: 10px;padding-top: 50px;">
+            <h1 style="color: #f8f8f8">Copyright <strong>&copy;彭友聪 </strong>201724073161</h1>
+        </div>
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file
