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.netproject中都带的有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>

总之。别忘了使用相对文件夹,假设当前页面文件的文件夹层级比較深,那就使用../自己算文件夹的层级吧。

JavaScript入门:002—JS代码放置的位置的更多相关文章

  1. JavaScript之将JS代码放在什么位置最合适

    1.放到<head></head>标签里面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  2. JS代码放置位置、变量与数据类型、运算符与逻辑表达运算符

    内容简要: 1.JS代码放置位置的问题: 2.变量与数据类型: 3.运算符与逻辑表达式的运算符   我的位置 全局问题:为何在网页推荐位置(一般在<head></head>内部 ...

  3. ArcGIS API for JavaScript 入门教程[4] 代码的骨架

    [回顾与本篇预览] 上篇简单介绍了JsAPI中的数据与视图,并告诉大家这两部分有什么用.如何有机连接在一起. 这一篇快速介绍一下前端代码的骨架.当然,假定你已经熟悉HTML5.CSS3和JavaScr ...

  4. JavaScript脚本在页面中放置的位置

    JavaScript脚本通常放置在三个位置: 1.head部分JavaScript脚本. 2.body部分JavaScript脚本. 3.单独以.js结尾的文件中的JavaScript脚本. 客户端会 ...

  5. JavaScript问题01 js代码放在header和body的区别

    1 body和header中JavaScript执行的时机 1.1 header中 放在header中的javascript代码会进行预加载(即:在页面加载之前就会进行),所以需调用才执行的脚本或事件 ...

  6. javascript代码放置位置对程序的影响

    在编写html文档时,javascript可以放置的位置有两个地方<head>或者<body>,但是放置的地方,会对 JavaScript 代码的正常执行会有一定影响.由于 H ...

  7. js基础之javascript的存在形式和js代码块在页面中的存放位置和 CSS 对比

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  8. javascript基础之javascript的存在形式和js代码块在页面中的存放位置

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  9. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

随机推荐

  1. 将Electron桌面应用转化为Win10的UWP应用

    如果有小伙伴不知道如何打包Electron桌面应用的,请戳我. 微软提供了一款快捷工具:electron-windows-store,用于将electron桌面应用打包成Windows10系统上.ap ...

  2. PHP:过滤数组中为空的值,并将返回的数组使用数值键,从 0 开始并以 1 递增

    首先了解下以下两个函数: 1.array_filter() 函数用回调函数过滤数组中的值. 2.array_values() 函数返回一个包含给定数组中所有键值的数组,但不保留键名.(被返回的数组将使 ...

  3. 【数论】【二次剩余】【map】hdu6128 Inverse of sum

    部分引用自:http://blog.csdn.net/v5zsq/article/details/77255048 所以假设方程 x^2+x+1=0 在模p意义下的解为d,则答案就是满足(ai/aj) ...

  4. 【循环节】【矩阵乘法】MIPT-2016 Pre-Finals Workshop, Taiwan NTU Contest, Sunday, March 27, 2016 Problem F. Fibonacci of Fibonacci

    题意:F(n)为斐波那契数列的第n项,问你F(F(n)) mod 20160519的值. 发现有循环节,F(26880696)=0,F(26880697)=1,.... 于是两次矩乘快速幂即可. #i ...

  5. bzoj 1236: longpo的回文

    1236: longpo的回文 题目描述 一个字符串如果从左到右和从右到左读的结果是一样的,我们称之为回文串.现在给定一个字符串,我们有三种操作: 1.     添加一个字母在任何位置(可以在首尾添加 ...

  6. Django contenttypes 框架详解

    一.什么是Django ContentTypes? Django ContentTypes是由Django框架提供的一个核心功能,它对当前项目中所有基于Django驱动的model提供了更高层次的抽象 ...

  7. [CF843D]Dynamic Shortest Path

    [CF843D]Dynamic Shortest Path 题目大意: 给定一个带权有向图,包含\(n(n\le10^5)\)个点和\(m(m\le10^5)\)条边.共\(q(q\le2000)\) ...

  8. 2016.4.3 动态规划NOI专练 王老师讲课整理

    1.6049:买书 总时间限制:  1000ms 内存限制:  65536kB 描述 小明手里有n元钱全部用来买书,书的价格为10元,20元,50元,100元. 问小明有多少种买书方案?(每种书可购买 ...

  9. 关于智能硬件设备shell安全设计

    问题描述: 在对某些智能硬件设备进行测试时,发现有些设备直接提供了Linux shell,并且登录账号默认是root权限!在登录到设备后,在bin目录下可以看到很多命令行程序,这些程序大部门用户用不到 ...

  10. TabControl控件和TabPage

    TabControl控件和TabPageTabControl控件可以支持在一个控件里面放置多个选项卡,每个选项卡又可以放置多个控件 由于在控件属性窗口添加选项卡相对比较容易,下面说一下动态创建选项卡 ...