在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代码压缩器
Oct 12 Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
json的使用小结
Jun 08 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
JS访问对象两种方式区别解析
Aug 29 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
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
js实现手机web图片左右滑动效果
2017/12/29 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
python类定义的讲解
2013/11/01 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
python实现拼接图片
2020/03/23 Python
通过代码实例了解Python异常本质
2020/09/16 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
秋季红领巾广播稿
2014/01/27 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
2014年度个人总结范文
2015/03/09 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python