在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 相关文章推荐
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
javascript之bind使用介绍
Oct 09 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
Node.js学习入门
Jan 03 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 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操作mysql数据库类
2014/12/08 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
jquery自定义函数的多种方法
2014/01/09 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
Angular父组件调用子组件的方法
2018/04/02 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
使用Python进行体育竞技分析(预测球队成绩)
2019/05/16 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
python3多线程知识点总结
2019/09/26 Python
PyTorch-GPU加速实例
2020/06/23 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
日语翻译个人求职的自我评价
2013/10/14 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
毕业生自荐书
2014/02/02 职场文书
身边的榜样活动方案
2014/08/20 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
党性分析自查总结
2014/10/14 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫