在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 相关文章推荐
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
js的延迟执行问题分析
Jun 23 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
webpack4的迁移的使用方法
May 25 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 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
twig模板获取全局变量的方法
2016/02/05 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
Python将字典转换为XML的方法
2020/08/01 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
小班幼儿评语大全
2014/04/30 职场文书
3的组成教学反思
2014/04/30 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
机动车登记业务委托书
2014/10/08 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android