在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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
html读出文本文件内容
Jan 22 Javascript
学习ExtJS border布局
Oct 08 Javascript
理解javascript闭包
Dec 15 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 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 eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
两个php日期控制类实例
2014/12/09 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
Python连接DB2数据库
2016/08/27 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
学校端午节活动方案
2014/08/23 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
农业项目投资意向书
2015/05/09 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
python百行代码实现汉服圈图片爬取
2021/11/23 Python
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS