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 解决办法 ：<!--
代码部分
//-->

赞 (0)

相关推荐

  • Javascript在IE或Firefox下获取鼠标位置的代码

    第一段代码是利用全局变量来获取实时鼠标的位置. 复制代码 代码如下: var xPos; var yPos; window.document.onmousemove(function(evt){ evt=evt || window.event; if(evt.pageX){ xPos=evt.pageX; yPos=evt.pageY; } else { xPos=evt.clientX+document.body.scrollLeft-document.body.clientLeft; yPo

  • js与jquery中获取当前鼠标的x、y坐标位置的代码

    复制代码 代码如下: <div id="testDiv">放在我上面</div> <script type="text/javascript"> $('#testDiv').mousemove(function(e) { var xx = e.originalEvent.x || e.originalEvent.layerX || 0; var yy = e.originalEvent.y || e.originalEvent.l

  • 多浏览器兼容的获取元素和鼠标的位置的js代码

    复制代码 代码如下: //获取元素的位置 function getLeft(obj) { if (obj == null) return null; var mendingObj = obj; var mendingLeft = mendingObj.offsetLeft; while (mendingObj != null && mendingObj.offsetParent != null && mendingObj.offsetParent.tagName != &q

  • javascript 获取页面的高度及滚动条的位置的代码

    复制代码 代码如下: var Viewport={ top : function(){ return window.pageYOffset || document.documentElement && document.documentElement.scrollTop || document.body.scrollTop; }, height : function(){ return window.innerHeight || document.documentElement &

  • 利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解

    首先引入JavaScript API文件 <script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script> 此API提供的接口共有6个,geoip_country_code(){国家代码},geoip_country_ name(){国家名称},geoip_city() {城市名称},geoip_region(){地区代码},geoip_latit

  • 用javascript获取当页面上鼠标光标位置和触发事件的对象的代码

    用javascript获取鼠标位置: 复制代码 代码如下: function mousePosition(ev) { if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - docu

  • js获取鼠标点击的位置实现思路及代码

    copy来的,但是原页面的代码还是需要修改,下面是修改可用的 常用的是 event.clientX和event.clientY分别获取横向的和纵向的位置,但仅使用这个方法是不够的,因为event.clientX和event.clientY获取的鼠标位置是相对于当前屏幕的,而不考虑页面的滚动条所滚动的距离. 复制代码 代码如下: function pointerX(event) { return event.pageX || (event.clientX + (document.documentE

  • Javascript中找到子元素在父元素内相对位置的代码

    经过自己一晚上尝试,貌似找到了一个方法. 现在脑袋还糊涂,先记下来,以后再分析. 复制代码 代码如下: // 找到子元素在父元素中的相对位置 function getElementTop(element){ var el = (typeof element == "string") ? document.getElementById(element) : element; if (el.parentNode === null || el.style.display == 'none')

  • JavaScript talbe表中指定位置插入一行的实现代码 脚本之家修正版

    JavaScript talbe表中指定位置插入一行的实现代码 脚本之家修正版

    最近在学JavaScript,下面是我自己做的一个例子(在w3cschool例子的基础上) 该例子实现功能是在鼠标点击的行之后插入一行,默认是在第一行插入.插入的内容可以自己输入,代码如下 //global var var pos =0 //to find the position you mouse has pressed function whichElement(e) { var targ if (!e) var e = window.event if (e.target) targ =

  • 用Javascript 获取页面元素的位置的代码

    用Javascript 获取页面元素的位置的代码

    下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的绝对大小和相对大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的绝对大小.通常情况下,网页的绝对大小由内容和CSS样式表决定. 网页的相对大小则是指在浏览器窗口中看到的那部分网页,也就是浏览器窗口的大小,又叫做viewport(视口). 下图中央的方框就代表浏览器窗口,每次只能显示一部分网页. (图一 网页的绝对大小和相对大小) 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的

  • js获取鼠标位置杂谈附多浏览器兼容代码

    其实获得鼠标位置就是一句话的事情,但是要是不了解浏览器间的区别,整个过程就会让人很郁闷,区别在与: 1.IE下获得x和y轴的距离分别用event.x和event.y: FF下获得x和y轴的距离分别用event.pageX和event.pageY: 2.IE下用此方法获得的位置是不算滚动条滚过的位置的,即它只会算到浏览器边缘: FF则会算进滚过去的那些位置: (这个地方很让我崩溃,为这么点小区别我把所有用到的程序全部重写了一遍,囧死--) 解决1的办法,无非是判断一下浏览器,然后用什么方式: 解决

  • js获取元素相对窗口位置的实现代码

    JS获取元素的offsetTop,offsetLeft等属性 obj.clientWidth //获取元素的宽度 obj.clientHeight //元素的高度 obj.offsetLeft //元素相对于父元素的left obj.offsetTop //元素相对于父元素的top obj.offsetWidth //元素的宽度 obj.offsetHeight //元素的高度 区别: clientWidth = width + padding clientHeight = height + p

  • JavaScript代码应该放在HTML代码哪个位置比较好？

    在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一定影响,具体如下所述. 放置于<head></head>之间 将 JavaScript 代码放置于 HTML 文档的 <head></head> 标签之间是一个通常的做法.由于 HTML 文档是由浏览器从上到下依次载入的

随机推荐