在HTML中插入JavaScript代码的示例


Posted in Javascript onJune 03, 2015

 在HTML文档中的任何地方可包括JavaScript代码。但也有以下的最佳方法来包含JavaScript在HTML文件。

  •     在 <head>...</head> 部分.
  •     在 <body>...</body> 部分.
  •     在<body>...</body> 和<head>...</head> 部分.
  •     脚本和外部文件,然后包括在<head>... </ head>部分。

在下面的章节中,我们将看到如何可以包含JavaScript方式的不同:
在JavaScript的<head>... </ head>部分:

如果你想在一些事件上运行一个脚本,当用户点击某个地方,如,那么应该脚本的头部,如下所示:

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
  alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

这将产生以下结果:

 
JavaScript在<body>... </ body>部分:

如果需要一个脚本的页面加载,以便脚本生成页面内容来运行,该脚本在文档的<body>部分。在这种情况下,就不必使用JavaScript定义的所有功能:

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>

 
JavaScript 在<body> 和 <head> 部分:

你可以把JavaScript代码在<head>和<body>部分完全如下:

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
  alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

 
在JavaScript外部文件:

当开始工作,更广泛地使用JavaScript,可能会发现有情况下,在站点的多个页面重用相同的JavaScript代码。

你并不局限于将保持在多个HTML文件相同的代码。 script标签提供了一种机制,允许存储JavaScript在外部文件中,然后将其包含到HTML文件。

下面是一个例子来说明如何使用脚本标记和src属性包含在HTML代码的外部JavaScript文件:

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>

使用JavaScript从外部文件源,则需要使用扩展写下所有的JavaScript代码在一个简单的文本文件“.js”,然后包括文件,如上图所示。

例如,你可以保持在以下文件filename.js的内容,然后包括filename.js文件后,在HTML文件中使用sayHellofunction:

function sayHello() {
  alert("Hello World")
}
Javascript 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
JavaScript中的Proxy对象
Nov 27 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 #Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 #Javascript
浅谈javascript中基本包装类型
Jun 03 #Javascript
js中函数声明与函数表达式
Jun 03 #Javascript
JavaScript基本语法讲解
Jun 03 #Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 #Javascript
ECMAScript中函数function类型
Jun 03 #Javascript
You might like
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
学习Python selenium自动化网页抓取器
2018/01/20 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python 反向输出字符串的方法
2018/07/16 Python
pandas通过索引进行排序的示例
2018/11/16 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
python中的错误如何查看
2020/07/08 Python
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
技校毕业生个人学习的自我评价
2014/02/21 职场文书
财务部绩效考核方案
2014/05/04 职场文书
企业文化口号
2014/06/12 职场文书
社会实践活动总结格式
2015/05/11 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP