繁体   English   中英

如何在 Web 服务器目录中运行 JS 文件

[英]How To Run JS Files In Web Server Directory

我是 Javascript 的新手,

当我在桌面的一个目录中有这两个文件时,它工作正常,

但是当我将它们放在 Web 服务器目录/var/www/html它不起作用

我知道 JS 是一个客户端的东西,但是如果我们正在构建一个网站,这些 .js 文件将在某个 Web 服务器目录中,并且应该在它们放置在那里时工作

我在 ubuntu 20.4 上使用 apache 2.4

Javascript.js 代码:

    /*global document, console */

var mybtn = document.getElementById("mybtn");
var mydiv = document.getElementById("mydiv");
var myid = document.getElementById("myid");
mybtn.onclick = function(){
    console.log(myid.value);
    mydiv.innerHTML = myid.value;
}

.html 代码:

<html>
<head></head>

 <body>

<input type="text" id="myid">
<button id="mybtn">click</button>

<div id="mydiv"></div>
     
<script src="javascript.js">
     
     </script>

</body>
</html>

让我们假设这是您的 public_html 目录/var/www/html并且为了更好的代码组织,为 javascript 文件创建一个目录作为js您可以为 CSS、图像等执行此操作。 所以你的公共目录变成这样

public_html
    js
      myjscodehere.js // copy your javascript code to this file.
    css
    images
    index.html 

至于index.html。 设置您的 javascript 文件的目录路径。

<html>
<head></head>

 <body>

<input type="text" id="myid">
<button id="mybtn">click</button>

<div id="mydiv"></div>
     
<script type="text/javascript" src="/js/myjscodehere.js"></script> 

</body>
</html>

在使用 Chrome、Mozilla 等向您的网络服务器发送 get 请求后,您的 javascript 文件将在客户端运行

js 代码的分离为您提供了许多好处,例如缓存到您的 js 文件和更好的组织,如果您正在构建一个更大的项目,更新您的代码将是一个问题,因此最好将您的 js 文件放入 dir 但这并不意味着你不能内联运行你的 javascript 脚本代码。 是的,您可以按照以下方式进行。

<html>
    <head></head>
    
     <body>
    
    <input type="text" id="myid">
    <button id="mybtn">click</button>
    
    <div id="mydiv"></div>
         
    <script type="text/javascript">

var mybtn = document.getElementById("mybtn");
var mydiv = document.getElementById("mydiv");
var myid = document.getElementById("myid");
mybtn.onclick = function(){
    console.log(myid.value);
    mydiv.innerHTML = myid.value;
}

    </script> 
    
    </body>
    </html>

由于 javascript 代码在客户端运行。 您可以使用 Web 浏览器在 Windows 机器上运行它,并且不需要 Web 服务器。 将您的 js 文件或整个项目推送到网络服务器的目的是让您的客户或访问您网站的人在他们的本地机器上使用您的在线应用程序。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM