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 相关文章推荐
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
解决element-ui的下拉框有值却无法选中的情况
Nov 07 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 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
php学习笔记之面向对象
2014/11/08 PHP
PHP生成条形图的方法
2014/12/10 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
js中的面向对象入门
2017/03/06 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
python实现简单俄罗斯方块
2020/03/13 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
平面设计师岗位职责
2014/09/18 职场文书
2015年度物流工作总结
2015/04/30 职场文书
交通事故被告答辩状
2015/05/22 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript