HTML JavaScript

2025年9月10日 | 阅读 4 分钟

脚本是一小段程序，它与 HTML 一起使用，使网页更具吸引力、动态性和交互性，例如在鼠标单击时弹出警告框。目前，最流行的脚本语言是 JavaScript，用于网站。

示例

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Date and Time example</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

执行代码

输出

HTML <script> 标签

HTML <script> 标签用于指定客户端脚本。它可以是包含脚本语句的内部或外部 JavaScript，因此我们可以将 <script> 标签放在 <body> 或 <head> 部分。

它主要用于操作图像、表单验证以及动态更改内容。JavaScript 使用 document.getElementById() 方法来选择一个HTML 元素。

示例

<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Tpoint Tech";
</script>
</body>
</html>

执行代码

输出

JavaScript 中的 HTML 事件

事件是用户做的事情，或者是浏览器做的事情，例如鼠标单击或页面加载，这些都是事件的例子，如果我们希望在这些事件上发生某些事情，JavaScript 就派上用场了。

HTML 提供了与 JavaScript 代码配合使用的事件处理程序属性，并且可以在事件上执行操作。

语法

示例

document.getElementById("myBtn").addEventListener("click", () => {
  alert("Hi, how are you?");
});

执行代码

输出

Click Event Example

Click on the button, and you can see a pop-up window with a message.

HTML 可以有以下事件

表单事件： reset（重置），submit（提交）等。
选择事件： 文本字段，文本区域等。
焦点事件： focus（获得焦点），blur（失去焦点）等。
鼠标事件： select（选择），mouseup（鼠标松开），mousemove（鼠标移动），mousedown（鼠标按下），click（单击），dblclick（双击）等。

以下是窗口事件属性列表

事件事件名称	处理程序名称	发生时间
onBlur	blur	当表单输入失去焦点时
onClick	点击	当用户单击表单元素或链接时
onSubmit	submit	当用户向服务器提交表单时。
onLoad	load	当页面在浏览器中加载时。
onFocus	focus	当用户聚焦于输入字段时。
onSelect	select （选择）	当用户选择表单输入字段时。

注意：您将在我们的 JavaScript 教程中了解更多关于 JavaScript 事件的信息。

让我们看看 JavaScript 能做什么

1) JavaScript 可以更改 HTML 内容

示例

<!DOCTYPE html>
<html>
<body>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" id="myBtn"> Click Me! </button>
<p id="demo"></p>
<script>
function myFunction() { 
    document.getElementById("demo").innerHTML = "Hello Tpoint Tech!";
}
</script>
</body>
</html>

执行代码

输出

2) JavaScript 可以更改 HTML 样式

示例

<!DOCTYPE html>  
<html>  
<body>  
<p id="demo">JavaScript can change the style of an HTML element.</p>  
<script>  
function myFunction() {  
    document.getElementById("demo").style.fontSize = "25px";   
    document.getElementById("demo").style.color = "brown";  
    document.getElementById("demo").style.backgroundColor = "lightgreen";     
   document.getElementById("myBtn").addEventListener("click", myFunction);    
}  
</script>  
<button type="button" id="myBtn"> Click Me! </button>
</body>  
</html>  

执行代码

输出

3) JavaScript 可以更改 HTML 属性

示例

<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
    var pic;
    if (sw == 0) {
        pic = "pic_lightoff.png"
    } else {
        pic = "pic_lighton.png"
    }
    document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="pic_lightoff.png" width="100" height="180">
<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>
</body>
</html>

执行代码

使用外部脚本

假设您有多个 HTML 文件需要包含相同的脚本，那么我们可以将 JavaScript 代码放在一个单独的文件中，并在 HTML 文件中调用它。使用 .js 扩展名保存 JavaScript 外部文件。

注意：不要在外部文件中添加 <script> 标签，并提供放置 JS 文件的完整路径。

语法

示例

<!DOCTYPE html>
<html>
   <head>
	<script src="external.js"> </script>  
    </head>
     <body>
      <h2>External JavaScript Example</h2>
       <form onsubmit="fun()">
	     <label>Enter your name:</label><br>
	  <input type="text" name="uname" id="frm1"><br>
	   <label>Enter your Email-address:</label><br>  
	  <input type="email" name="email"><br>
	  <input type="submit">
  </form>
 </body>
 </html>

执行代码

JavaScript 代码

function fun() {
       var x = document.getElementById("frm1").value;
		alert("Hi"+" "+x+ "you have successfully submitted the details");
	}

输出

HTML <noscript> 标签

HTML <noscript> 标签用于编写浏览器中禁用的脚本。只有当浏览器不支持 JS 或 JS 被禁用时，才会显示 <noscript> </noscript> 中的文本。现代浏览器默认支持 JS，因此很少需要 <noscript>。

示例

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>This text is not visible in the browser. </noscript>  
</body>
</html>

执行代码

HTML 中 JavaScript 的最佳实践

如今，除了行为之外，JavaScript 在结构监控和样式监控的结合方面非常有用。为了使页面易于阅读，而不是直接将代码与 HTML 混合，最好将脚本从页面中移出并放在单独的文件中，以便可以重用。定义变量时，开发者不再使用 var，而是切换到 let 和 const，因为这使得代码更安全、更容易处理。

与直接通过属性（如 onclick）添加函数相反，JavaScript 通常通过使用 addEventListener 添加，并保持 HTML 清晰并专注于内容。当然，这些细微的变化不仅使代码库更容易维护，而且也使其能够实现渐进增强，因此即使禁用了 JavaScript，用户也可以以基本方式使用网站。

结论

JavaScript 使我们能够与 HTML 网页进行交互，例如更新页面内容、更改页面样式等。但是，<script> 标签和事件属性是可以接受的。为了提高代码的可读性，将 JavaScript 和 HTML 文件分开是最佳实践。例如，使用外部脚本、addEventListener 以及使用现代表示法的变量声明。HTML、CSS 和 JavaScript 的组合，如果使用得当，可以使开发人员创建用户友好、快速且交互式的 Web 应用程序。

下一主题HTML 注释

HTML JavaScript

示例

HTML <script> 标签

示例

JavaScript 中的 HTML 事件

语法

示例

注意：您将在我们的 JavaScript 教程中了解更多关于 JavaScript 事件的信息。

示例

示例

示例

使用外部脚本

注意：不要在外部文件中添加 <script> 标签，并提供放置 JS 文件的完整路径。

语法

示例

HTML <noscript> 标签

示例

HTML 中 JavaScript 的最佳实践

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML JavaScript

示例

HTML <script> 标签

示例

JavaScript 中的 HTML 事件

语法

示例

注意：您将在我们的 JavaScript 教程中了解更多关于 JavaScript 事件的信息。

示例

示例

示例

使用外部脚本

注意：不要在外部文件中添加 <script> 标签，并提供放置 JS 文件的完整路径。

语法

示例

HTML <noscript> 标签

示例

HTML 中 JavaScript 的最佳实践

结论

相关帖子

HTML 锚点

什么是 HTML

HTML Head

HTML 标签

HTML 字符集

HTML 布局技术

HTML 表格

HTML 实体

HTML 布局

HTML 响应式

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器