在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中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
js中开关变量使用实例
Feb 24 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
风格模板初级不完全修改教程
2006/10/09 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
thinkphp分页集成实例
2017/07/24 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
详解JavaScript作用域 闭包
2020/07/29 Javascript
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
公司员工检讨书
2014/02/08 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
职业生涯规划书前言
2014/04/15 职场文书
校园广播稿100字
2014/10/06 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书