在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 相关文章推荐
优化javascript的执行效率一些方法总结
Dec 25 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
JavaScript中import用法总结
Jan 20 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 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
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
php判断当前操作系统类型
2015/10/28 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
python五子棋游戏的设计与实现
2019/06/18 Python
简单了解django缓存方式及配置
2019/07/19 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
Django nginx配置实现过程详解
2020/09/10 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
大四学生思想汇报
2014/01/13 职场文书
2014年母亲节寄语
2014/05/07 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL