在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 相关文章推荐
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 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/10/23 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
js 文件引入实现代码
2010/04/23 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python实现图像几何变换
2015/07/06 Python
实用自动化运维Python脚本分享
2018/06/04 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
会计专业毕业生推荐信
2013/11/05 职场文书
电子信息专业学生自荐信
2013/11/09 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
2014年度考核工作总结
2014/12/24 职场文书
不同意离婚代理词
2015/05/23 职场文书
成绩单家长意见
2015/06/03 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
python 离散点图画法的实现
2022/04/01 Python
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫