在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 相关文章推荐
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 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实现36进制与10进制转换功能示例
2017/01/10 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
python开发之list操作实例分析
2016/02/22 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
pip安装python库的方法总结
2019/08/02 Python
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
高中毕业自我鉴定
2013/12/22 职场文书
满月酒答谢词
2014/01/14 职场文书
风险评估实施方案
2014/03/09 职场文书
中专生自荐信
2014/06/25 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js