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 相关文章推荐
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
javascript 中关于array的常用方法详解
May 05 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
浅谈vuex中store的命名空间
Nov 08 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可变函数的使用详解
2013/06/14 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
对python 自定义协议的方法详解
2019/02/13 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
Python连接Impala实现步骤解析
2020/08/04 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
计算机大学生的自我评价
2013/10/15 职场文书
大学生标准推荐信范文
2013/11/25 职场文书
自我评价范文点评
2013/12/04 职场文书
环境建设实施方案
2014/03/14 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
总账会计岗位职责
2015/04/02 职场文书
银行求职信怎么写
2019/06/20 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS