JavaScript与HTML的结合方法详解

最新推荐文章于 2024-03-30 16:53:19 发布
最新推荐文章于 2024-03-30 16:53:19 发布
阅读量3.1w 收藏 79
点赞数 11
分类专栏： 安全
这篇文章主要介绍了JavaScript与HTML的结合方法，利用实例向大家介绍JavaScript与HTML是如何结合的，内容很详细，感兴趣的小伙伴们可以参考一下

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

?
1
2
3
<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>写文本：
实例代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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 函数和事件
       上面例子中的 JavaScript 语句，会在页面加载时执行。通常，我们需要在某个事件发生时执行代码，比如当用户
点击按钮时。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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 >

运行的结果为：

点击按钮后的效果为：

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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代码：

?
1
2
3
4
function myFunction()
{
document.getElementById( "demo" ).innerHTML= "My First JavaScript Function" ;
}

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

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

这个我知道
关注
  • 11
    点赞
  • 踩
  • 79
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
js与html结合方式
fanfjaiyun的博客
02-20 266
javascript 概念： 是一门客户端脚本语言 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 脚本语言：不需要编译，直接就可以被浏览器解析执行了 功能： 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。 JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM) EC...
总结：JS文件中引入其他JS文件的方法，以及＜script＞标签中间如何嵌套＜script＞标签
weixin_48033662的博客
08-28 4870
本质上相当于在页面的body或者head中引入一组新的script标签，从而实现引入新的JS文件；而并不是两组script标签的直接互相嵌套，这样并不会效果。
HTML 中的 JavaScript 操作指南：基础语法与BOM、DOM操作
最新发布
m0_62413155的博客
03-30 1034
文将带您了解如何在 HTML 文件中嵌入 JavaScript 代码，并深入探讨 JavaScript 与 HTML 文档对象模型（DOM）的交互。通过学习基础语法和 DOM 操作，您将能够动态地操控 HTML 元素，实现交互式的网页应用程序。
JavaScript教程（三）之 jQuery
m0_56752010的博客
05-28 2339
JavaScript库 即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等； 简单理解：就是一个JS文件，里面对我们原生JS代码进行了封装，存放到里面，这样我们可以快速高效的使用这些封装好的功能了；比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）； 常见的JavaScript库：jQuery、Prototype、YUI、Dojo、Ext
html中的JavaScript
qq_49032349的博客
06-07 1万+
JavaScript ——简介 JavaScript 是目前最流行脚本语言，简称 JS。JavaScript 编写在 HTML 页面中，由浏览器负责解释和执行，JavaScript 通常用来给 HTML 页面增加交互能力。 JS可以给html带来的功能： 为页面增加动画效果 验证表单输入项有效性 实现本地数据存储 html、CSS和JS之间的关系 JS的语言应用——内嵌式/内部式/外部式 在html中，可以通过以下三种方法来应用JS： 1.内嵌式：又称行内式，在HTML标..
JavaScript与HTML的结合方式
qq_19037931的博客
10-19 849
JavaScript与HTML的结合方式： （1）嵌入使用 只需要在 head 标签中，或者在 body 标签中， 使用 script 标签 来书写 JavaScript 代码 实例代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"><title>Title</title> <script type="text/javascript"> a
JavaScript获取页面元素的常用方法详解
10-16
在JavaScript中，获取页面元素是Web开发中至关重要的技能，因为这允许我们操作和改变页面上的内容。...在实践中，还可以结合DOM遍历、事件监听等技术，进一步提升JavaScript在Web开发中的应用能力。
JavaScript onclick事件使用方法详解
10-15
JavaScript中的`onclick`事件是网页...在实际开发中，`onclick`事件经常与DOM操作、数据交互、动画效果等结合使用，为用户提供丰富的交互体验。理解并熟练运用`onclick`事件，能够极大地提升网页的交互性和用户体验。
JavaScript 实现HTML DOM增删改查操作的常见方法详解
10-15
主要介绍了JavaScript 实现HTML DOM增删改查操作,结合实例形式分析了JavaScript针对HTML DOM元素增删改查常见操作技巧与使用注意事项,需要的朋友可以参考下
HTML引入Javascript代码的三种方法
Sun_Yangguang的博客
10-21 5965
自学所遇问题记录
js html() 操作,JS操作html元素认知
weixin_30466329的博客
07-09 1416
web.jpegJS有三部分组成ECMAscript(欧洲计算机制造商协会) ： 描述了JS的语法和基本对象的规范DOM：文档对象模型，处理网页的内容方法和接口(操作页面元素)BOM ：浏览器对象模型，浏览器交互的方法和接口(操作浏览器)JS操作html元素，其实就是操作DOM文档对象,整个html 文件就是是一个文档，那么这个文档看成一个文档对象，文档中的所有的标签都可以看成一个对象, 那么JS...
HTML中嵌入js代码的两种方法
热门推荐
流年
05-22 12万+
在Web页面中使用JavaScript有两种方法，一种是在页面中直接嵌入JavaScript代码，另一种是链接外部JavaScript文件。 1、在页面中直接嵌入JavaScript代码 （1）在页面的任何位置（head部分 body部分 body的后面 较好）插入script标签，对于该标签必要的属性type属性，该属性描述了文档的类型 （2）在script标签内部编写js语句
[JS]JS与HTML结合方式
Feathers的个人笔记
12-28 2377
一： <!-- script：脚本 在页面上打印一个脚本元素 元素的类型text/javascript,即js语言 --> <script type="text/javascript"> </script>二： <!-- 使用src属性引入外部js 在引入js的script标签中，不能在书写js代码 --
javascript和html的区别及其应用
小怡糖包
06-29 952
HTML是最简单的编程语言，也是基础，学网页开发的都要先学这一门，它做出来的是静态的 而JAVASCRIPT是脚本语言，跟html结合起来生成功能更强大的网页，如动态导航、图片等等。这两种语言是性质完全不同的语言， 下面看一个例子： 很简单的的例子在html中加入js脚本，或去当期的日期或者是设置一个日期： 或取当前的日期： 或去当前的日期 <!-- var cur
JavaScript简介及与HTML结合方式
ljq961206的博客
07-31 604
目录 JavaScript简介 JavaScript的组成 JavaScript与HTML结合方式 JavaScript简介   JavaScript是一种基于对象的直译式脚本语言，他大多应用于浏览器。     —基于对象：JavaScript中提供了对象，可以直接使用     —直译式：不需要编译就可以被浏览器解析的语言     HTML实现静态网页的搭建，而JavaScrip...
JavaScript（三）之 JavaScript与HTML的结合方式
海边拾贝seebit
07-25 194
一、直接在事件中写，事件名=“js代码” &lt;input type="button" value="点我" onclick="alert('aaaaaaaaaaa')"/&gt; 二、首先用户通过function去定义一个函数，其次调用：事件名="自定义函数名()" &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition
JavaScript 对HTML页面的作用
qq_wxq的博客
01-26 6895
JavaScript到底可以做什么呢？ 1.事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:页面加载时触发事件；页面关闭时触发事件；用户点击按钮执行动作；验证用户输入内容的合法性… 2.同时呢，我们也可以使用多种方法来执行 JavaScript 事件代码：HTML 事件属性可以直接执行 JavaScript 代码；HTML 事件属性可以调用 JavaScript 函数；可以为 HTML ...
如何编写JavaScript
吴小迪的博客
05-03 4万+
JavaScript的入门文章： 如果你已经会写html与css了，但是你还没学JavaScript那么你就可以从笔者的这边文章开始学起了。 JavaScript在哪里写 是我们首先要知道的。 一共可以写在三个地方。 行内,给元素添加事件 <button onclick='alert("hello")'>按钮</button> 写在html内部 （一般情况下放在bo...
html5开发精要与实例详解
09-08
HTML5是一种用于构建互联网页面的标准，它结合了HTML、CSS和JavaScript等技术，拥有许多强大的特性和功能，使得开发人员能够创建高度交互性和响应性的网页应用程序。 HTML5开发的一个重要特点是它支持多媒体元素，如视频和音频。开发人员可以使用HTML5的<video>和<audio>标签来嵌入和播放视频和音频文件，而无需使用第三方插件。此外，HTML5还提供了一些API，如媒体控制API和音频处理API，使得开发人员能够更好地控制和处理媒体元素。 另一个重要的特性是离线应用程序。使用HTML5的离线缓存API，开发人员可以使网页应用程序在离线状态下正常工作。开发人员可以将网页资源缓存到用户设备的本地存储中，在用户离线时加载缓存的资源以提供基本功能。 此外，HTML5还支持本地存储和数据库。使用HTML5的Web Storage API，开发人员可以在用户浏览器中存储键值对数据，以实现本地数据存储和会话管理。HTML5还提供了IndexedDB API，允许开发人员使用类似数据库的方式存储和检索大量结构化数据。 HTML5还引入了Canvas和SVG两种新的绘图技术。Canvas是一个用于绘制图形的API，开发人员可以使用JavaScript代码来绘制图形、创建动画和处理用户事件。而SVG是一种使用XML描述的矢量图形语言，开发人员可以使用它来创建丰富多样的矢量图形。 除了以上提到的特性，HTML5还有很多其他有用的功能，如地理位置API、拖放API、WebSocket等等。开发人员可以根据具体需求选择合适的功能来开发网页应用程序。 综上所述，HTML5开发精要包括了多媒体元素、离线应用程序、本地存储和数据库、绘图技术等等，这些功能使得开发人员能够创建出更加交互和功能丰富的网页应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值