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 相关文章推荐
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
详解vue引入子组件方法
Feb 12 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
js实现简单进度条效果
Mar 25 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
ext for eclipse插件安装方法
2008/04/27 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
js实现分割上传大文件
2016/03/09 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
python数据爬下来保存的位置
2020/02/17 Python
python 6种方法实现单例模式
2020/12/15 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
市场营销专科应届生求职信
2013/11/24 职场文书
入团者的自我评价分享
2013/12/02 职场文书
会计演讲稿范文
2014/05/23 职场文书
心得体会的写法
2014/09/05 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
运动会5000米加油稿
2015/07/21 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers