`
webcode
  • 浏览: 5946618 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

JavaScript代码放置的位置

 
阅读更多
1. 放在head中
这种方式会在页面载人前加载js代码，这样的话，我们不能在head中取得网页元素，因为网页还没加载，看下面的例子，当我们要动态修改按钮显示的值的时候，在head中的代码就会报一个Cannot set property 'value' of null的错。这个错误时在chrome中调试得出的，在IE中也会报一个'document.getElementById(...)' 为空或不是对象的错误。当然，如果你把js代码放到body中就没问题了。
<html>
<head>
<script type="text/javascript">
document.getElementById('click_button').value = '点击我！';
function show_message(){
	alert('Hello!');
}
</script>
</head>
<body>
<input id="click_button" type="button" value="Click me!" onclick="show_message()" >
<script type="text/javascript">
document.getElementById('click_button').value = '点击我！';
</script>
</body>
</html>



2. 放在body中
根据放置的位置顺序执行js脚本。比如上面的例子，如果我们把js放到元素加载前，也会报错的。
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.getElementById('click_button').value = '点击我！';
</script>
<input id="click_button" type="button" value="Click me!" onclick="show_message()" >
</body>
</html>



提示：当js文件比较大的时候，建议在</body>前的位置加载js文件，这样不会影响网页的加载速度，如果放在头部的话，会先加载js文件。


分享到：
| 初步了解JavaScript
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    通常情况下，JavaScript 代码是和 HTML 代码一起使用的，可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置的地方，会对 JavaScript 代码的正常执行会有一定影响，具体如下所述。 放置于&lt;head&gt;&lt;/...

    JavaScript

    JavaScript试题（1. 我们可以在下列哪个HTML元素中放置javascript代码？ ）

    编写高质量代码-改善JavaScript程序的188个建议，完整扫描版

    内容全部由编写高质量的javascript代码的最佳实践组成，从基本语法、应用架构、工具框架、编码风格、编程思想等5大方面对web前端工程师遇到的疑难问题给出了经验性的解决方案，为web前端工程师如何编写更高质量的...

    从零开始学JavaScript 源代码

    1.5 嵌入JavaScript脚本代码的位置 1.5.1 在与标记对之间放置 1.5.2 在与标记对之间放置 1.5.3 在两个标记对之间混合放置 1.6 选择合适的浏览器 1.7 处理不支持JavaScript脚本的情况 1.7.1 使用!——和——＞标记对...

    《编写高质量代码-改善JavaScript程序的188个建议》PDF

    内容全部由编写高质量的JavaScript代码的最佳实践组成，从基本语法、应用架构、工具框架、编码风格、编程思想等5大方面对Web前端工程师遇到的疑难问题给出了经验性的解决方案，为Web前端工程师如何编写更高质量的...

    JavaScript基础和实例代码

    1.5 嵌入JavaScript脚本代码的位置 1.5.1 在与标记对之间放置 1.5.2 在与标记对之间放置 1.5.3 在两个标记对之间混合放置 1.6 选择合适的浏览器 1.7 处理不支持JavaScript脚本的情况 1.7.1 使用&lt;!--和--&gt;标记对直接...

    【JavaScript源代码】javascript拖曳互换div的位置实现示例.docx

    javascript拖曳互换div的位置实现示例 　1 实现原理　利用dom元素的dragstart/ondragover/ondrop事件完成，在拖曳开始的时候获取到拖曳元素，然后允许拖动，最后鼠标抬起后放到新的位置；这里用到了event....

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

    JavaScript在页面中使用，那么这些JS代码应该放在什么位置呢？下面来看一下。 一般来说有两种方式，写在界面上和使用.js文件。 1.1界面上的Head部分 可以直接放在head标签内，如下代码 &lt;...di

    使用模拟退火自动放置标签的 D3 插件_JavaScript_代码_下载

    使用模拟退火自动放置标签的 D3 插件，可轻松合并到现有 D3 代码中，语法镜像其他 D3 布局。 用法 要自动放置标签，用户需要声明标签器（模拟退火）布局、输入标签和锚点位置、图形边界以及模拟退火的蒙特卡罗扫描...

    源文件程序天下JAVASCRIPT实例自学手册

    1.5 嵌入JavaScript脚本代码的位置 1.5.1 在&lt;head&gt;与&lt;/head&gt;标记对之间放置 1.5.2 在&lt;body&gt;与&lt;/body&gt;标记对之间放置 1.5.3 在两个标记对之间混合放置 1.6 选择合适的浏览器 1.7 处理不支持...

    【第八章】JavaScript【Script标签与访问HTML页面(2)】

    【第八章】JavaScript【Script标签与访问HTML页面(2)】

    用JavaScript编写黑白棋

    下子的方法：在棋盘上移动鼠标，会出现定位框，从定位框位置往周围延伸，如果在横、竖、斜八个方向内有一个自己的棋子， 而且被夹在中间的有对方的棋子，则中间的全部翻转，成为自己的棋子。 并且，只有在可以翻转...

    Javascript调用C#代码

    本文介绍的是嵌入在.Net的WebBrowser控件中显示的HTML文件中的Javascript如何调用C#代码。现在在客户端程序中嵌入网页的做法已经非常普遍了，例如腾讯的新闻弹出框之类的。 .Net的WebBrowser用的内核应该还是IE的。...

    用 React 制作的 简单数独游戏_JavaScript_代码_下载

    数独是一款基于逻辑的数字放置益智游戏。游戏的重点是用数字填充 9x9 网格，以便每一列、每一行和九个 3x3 子网格中的每一个都包含从 1 到 9 的所有数字。 React-Sudoku 根据玩家浏览器中的三个难度（简单、中等和...

    javascript的网页特效精灵

    内容绝对精彩，内含注册码.你可以随意引用自己喜欢的javascript代码。

    JavaScript 三种不同位置代码的写法

    客户端脚本JavaScript在写法上其实有很多种方法，它们的放置位置也非常之多。

    games:放置游戏js代码

    游戏在这里放置游戏事件句柄 javascript 代码。

Magicbox
Global site tag (gtag.js) - Google Analytics