在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 date对象的减法处理实现代码
Dec 28 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
jquery的live使用注意事项
Feb 18 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
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 session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
javascript 自动填写表单的实现方法
2010/04/09 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
树结构之JavaScript
2017/01/24 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
Python文件夹与文件的操作实现代码
2014/07/13 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Python线程创建和终止实例代码
2018/01/20 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
实例详解Python模块decimal
2019/06/26 Python
Python创建数字列表的示例
2019/11/28 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
值传递还是引用传递
2015/02/08 面试题
综合实践活动总结
2014/05/05 职场文书
统计专业自荐书
2014/07/06 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
2015国庆节宣传语
2015/07/14 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
在Python中如何使用yield
2021/06/07 Python
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
ant design charts 获取后端接口数据展示
2022/05/25 Javascript