在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页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
详解Vue方法与事件
Mar 09 Javascript
js实现无缝轮播图特效
May 09 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
如何开始收听短波广播
2021/03/01 无线电
在JavaScript中调用php程序
2009/03/09 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
python返回昨天日期的方法
2015/05/13 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
酒店应聘自荐信
2013/11/09 职场文书
运动会入场式解说词
2014/02/18 职场文书
团组织推优材料
2014/12/29 职场文书
见习期个人总结
2015/03/05 职场文书
投诉信范文
2015/07/02 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL