在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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
js读取配置文件自写
Feb 11 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
js实现星星打分效果
Jul 05 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下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
php表单敏感字符过滤类
2014/12/08 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
js添加table的行和列 具体实现方法
2013/07/22 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python实现的简单算术游戏实例
2015/05/26 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
Prototype是怎么扩展DOM的
2014/10/01 面试题
广告学专业毕业生自荐信
2013/09/24 职场文书
写好自荐信的技巧
2013/11/08 职场文书
师德学习感言
2014/01/31 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis