脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js放置位置

JavaScript程序开发之JS代码放置的位置

 更新时间：2016年01月15日 11:16:23   作者：西北白杨树  
JavaScript在页面中使用，那么这些JS代码应该放在什么位置呢？接下来通过本文一起学习吧

JavaScript在页面中使用，那么这些JS代码应该放在什么位置呢？下面来看一下。

一般来说有两种方式，写在界面上和使用.js文件。

1.1界面上的Head部分

可以直接放在head标签内，如下代码

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>testPage</title> 
<script type="text/javascript"> 
//your js code 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
</div> 
</form> 
</body> 
</html>

1.2界面上的body部分

一般都是直接放在body部分的，如下

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>testPage</title> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
</div> 
</form> 
<script type="text/javascript"> 
//your js code 
</script> 
</body> 
</html>

放在head和body中没有什么区别，一般代码量不多的时候，而且只有当前页面使用这些js，那就直接写在界面上吧。

2、JS文件

对于那些复杂的，而且代码量很多的JS，最好放在专门的一个.js文件里，然后在页面上按照js文件的相对路径引用进来。

这样的好处是，可以防止很多重复的js代码。可以将一些公用的js方法放在外部js文件里。

比如，一般使用visual studio 2010新建的asp.net工程中都带的有jquery-1.4.1.js文件，我们看怎么使用这个js文件。
比如页面的文件结构如图，


要在MyJSFrm.aspx中使用这个js文件就这样引入。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>testPage</title> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
</div> 
</form> 
<script type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script> 
<script type="text/javascript"> 
//your js code 
</script> 
</body> 
</html>

总之，别忘了使用相对目录，如果当前页面文件的目录层级比较深，那就使用../自己算目录的层级吧。

js 三种位置的区别：

head :

-- 在调用脚本时，已经完成加载了
--

body ：

-- 在生成页面的时候就已经完成加载了
--

外部js ：

-- 引用外部js 注意：外部js不能包含<script></script>这两个标签
-- 主要是为了节省当多个页面重复调用相同js函数时，可以节省在每个页面中嵌入相同的js代码；

浏览器不识别 js 解决办法 ：<!--
代码部分
//-->

您可能感兴趣的文章:

相关文章

  • 微信小程序实现播放音频

    微信小程序实现播放音频

    这篇文章主要为大家详细介绍了微信小程序实现播放音频，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • SharePoint 客户端对象模型 (一) ECMA Script

    SharePoint 客户端对象模型 (一) ECMA Script

    今天开始SharePoint Client对象模型的介绍，简而言之，SharePoint通过WCF技术在服务端提供数据服务，这些服务提供的内容相当于SharePoint API的一个子集
    2011-05-05
  • Eclipse去除js(JavaScript)验证错误

    Eclipse去除js(JavaScript)验证错误

    这篇文章主要是对Eclipse去除js(JavaScript)验证错误进行了介绍。在Eclipse中，js文件常常会报错。可以通过如下几个步骤解决
    2014-02-02
  • javascript 精确获取样式属性（上）

    javascript 精确获取样式属性（上）

    设置与获取样式属性是UI控件与特效库非常关键的部分，设置样式我们基本可以用cssText来包打天下，但获取样式就不是这回事了。
    2010-01-01
  • JavaScript实现九九乘法表的简单实例

    JavaScript实现九九乘法表的简单实例

    下面小编就为大家带来一篇JavaScript实现九九乘法表的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JavaScript 利用StringBuffer类提升+=拼接字符串效率

    JavaScript 利用StringBuffer类提升+=拼接字符串效率

    JavaScript 利用StringBuffer类提升+=拼接字符串效率，需要的朋友可以参考下。
    2009-11-11
  • 微信小程序对接七牛云存储的方法

    微信小程序对接七牛云存储的方法

    本篇文章主要介绍了小程序对接七牛云存储的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Javascript 调试利器 Firebug使用详解六

    Javascript 调试利器 Firebug使用详解六

    有时候，为了更清楚方便的查看输出信息，我们可能需要将一些调试信息进行分组输出，那么可以使用console.group来对信息进行分组，在组信息输出完成后用console.groupEnd结束分组。
    2009-07-07
  • JavaScript数组类型Array相关的属性与方法详解

    JavaScript数组类型Array相关的属性与方法详解

    这篇文章主要给大家介绍了关于JavaScript数组类型Array相关的属性与方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • js获取Html元素的实际宽度高度的方法

    js获取Html元素的实际宽度高度的方法

    下面小编就为大家带来一篇js获取Html元素的实际宽度高度的方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论