JavaScript与HTML的结合方法详解


Posted in Javascript onNovember 23, 2015

HTML中的JavaScript脚本必须位于<script>与</script>标签之间,JavaScript脚本可被放置在HTML页面的<body>标签和<head>标签中,这种视情况而定,一般放在<head>标签内。
一、<script> 标签
      如需在HTML页面中插入JavaScript脚本,请使用<script>标签。<script>和</script>会告诉JavaScript在何处开始
和结束。<script>和</script>之间的代码行包含了JavaScript:

<span style="font-size:18px;"><script type="text/javascript"> 
alert("欢迎来到JavaScript世界!!!"); 
</script></span>

       您无需理解上面的代码。只需明白,浏览器会解释并执行位于 <script> 和 </script> 之间的 JavaScript。那些老
旧的实例可能会在<script>标签中使用type="text/javascript"。现在已经不必这样做了。JavaScript是所有现代浏览器
以及HTML5中的默认脚本语言。鉴于刚刚学习JavaScript语言的可以使用!
二、<body>中的JavaScript
在本例中,JavaScript会在页面加载时向HTML的<body>写文本:
实例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript脚本语言</title> 
> 
</head> 
 
<body> 
<p> 
JavaScript 能够直接写入 HTML 输出流中: 
</p> 
  
<script type="text/javascript"> 
document.write("<h1>This is a heading</h1>"); 
document.write("<p>This is a paragraph.</p>"); 
</script> 
  
<p> 
您只能在 HTML 输出流中使用 <strong>document.write</strong>。 
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。 
</p> 
</body> 
</html>

       我们先不管JavaScript代码怎么写和怎么运行,先来看运行结果:

JavaScript与HTML的结合方法详解

三、JavaScript 函数和事件
       上面例子中的 JavaScript 语句,会在页面加载时执行。通常,我们需要在某个事件发生时执行代码,比如当用户
点击按钮时。如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。

四、<head>或<body>中的JavaScript
    您可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于
两个部分中。通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,
不会干扰页面的内容。

五、<head>中的JavaScript函数
在本例中,我们把一个JavaScript函数放置到HTML页面的<head>部分。该函数会在点击按钮时被调用:
实例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript脚本语言</title> 
<script type="text/javascript"> 
function myFunction() 
{ 
document.getElementById("demo").innerHTML="My First JavaScript Function"; 
} 
</script> 
</head> 
 
<body> 
<h1>My Web Page</h1>  
 
<p id="demo">A Paragraph.</p>  
 
<button type="button" onclick="myFunction()">点击这里</button>  
</body> 
</html>

运行的结果为:

JavaScript与HTML的结合方法详解

点击按钮后的效果为:

JavaScript与HTML的结合方法详解

六、<body>中的JavaScrip 函数
       在本例中,我们把一个JavaScript函数放置到HTML页面的<body>部分。该函数会在点击按钮时被调用:
实例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript脚本语言</title>  
</head> 
 
<body> 
<h1>My First Web Page</h1> 
  
<p id="demo">A Paragraph.</p> 
  
<button type="button" onclick="myFunction()">点击这里</button> 
 
 
<script type="text/javascript"> 
function myFunction() 
{ 
document.getElementById("demo").innerHTML="My First JavaScript Function"; 
} 
</script> 
</body> 
</html>

       运行的结果与上述五的结果一样!
       提示:我们把 JavaScript 放到了页面代码的底部,这样就可以确保在 <p> 元素创建之后再执行脚本。
七、外部的JavaScript
       我们也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩
展名是 .js。如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件,如果有大量的JavaScript代码,我
们提倡使用外部的JavaScript方式,一般我们也采用分离的方式连接到HTML文档中。
实例
HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript脚本语言</title> 
<script type="text/javascript" src="/js/myScript.js"></script> 
</head> 
 
<body> 
<h1>My Web Page</h1>  
 
<p id="demo">A Paragraph.</p>  
 
<button type="button" onclick="myFunction()">点击这里</button>  
 
<p><b>注释:</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p> 
</body> 
</html>

myScript.js代码:

function myFunction() 
{ 
document.getElementById("demo").innerHTML="My First JavaScript Function"; 
}

       运行的结果和上述一致!
       提示:在<head 或<body>中引用脚本文件都是可以的。实际运行效果与您在<script>标签中编写脚本完全一致。
外部脚本不能包含 <script> 标签。

以上就是JavaScript与HTML的结合方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 #Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 #Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 #Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 #Javascript
Bootstrap每天必学之表单
Nov 23 #Javascript
jquery制作属于自己的select自定义样式
Nov 23 #Javascript
基于jquery实现省市联动效果
Nov 23 #Javascript
You might like
PHP自动更新新闻DIY
2006/10/09 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
php实现Session存储到Redis
2015/11/11 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
Python的gevent框架的入门教程
2015/04/29 Python
浅析Python中的for 循环
2016/06/09 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
公司业务员岗位职责
2014/03/18 职场文书
环卫工作个人总结
2015/03/04 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
一行Python命令实现批量加水印
2022/04/07 Python
详解Python中的for循环
2022/04/30 Python