在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 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
原生JS实现分页
Apr 19 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
js实现录音上传功能
2019/11/22 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
python实现剪切功能
2019/01/23 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
如何安装ruby on rails
2014/02/09 面试题
一名女生的自荐信
2013/12/08 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
公司停电通知
2015/04/15 职场文书
2015公司年度工作总结
2015/05/14 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
python实现的人脸识别打卡系统
2021/05/08 Python
AJAX实现省市县三级联动效果
2021/10/16 Javascript