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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
Jquery注册事件实现方法
May 18 Javascript
详解javascript遍历方式
Nov 11 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
php时间戳转换的示例
2014/03/31 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
详解js加减乘除精确计算
2019/03/19 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
Python列表append和+的区别浅析
2015/02/02 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
Python requests获取网页常用方法解析
2020/02/20 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
工作作风承诺书
2014/08/30 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
python获取对象信息的实例详解
2021/07/07 Python
KVM基础命令详解
2022/04/30 Servers