在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 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
javascript FormatNumber函数实现方法
Dec 30 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
基于javascript实现日历功能原理及代码实例
May 07 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
星际争霸秘籍
2020/03/04 星际争霸
做个自己站内搜索引擎
2006/10/09 PHP
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
jQuery插件 tabBox实现代码
2010/02/09 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python中的decorator的作用详解
2018/07/26 Python
python批量获取html内body内容的实例
2019/01/02 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
浅析PEP572: 海象运算符
2019/10/15 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
Python自动创建Excel并获取内容
2020/09/16 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
linux下进程间通信的方式
2014/12/23 面试题
自我评价优秀范文分享
2013/11/30 职场文书
大连导游词
2015/02/12 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
应届毕业生的自我评价
2019/06/21 职场文书