章
目
录
脚本是一种小型程序，与 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 JavaTpoint";
</script>
</body>
</html>
HTML 中的 JavaScript 事件
事件是用户或浏览器执行的操作，例如鼠标单击或页面加载是事件的示例，如果我们希望在这些事件发生时执行某些操作，JavaScript 就起到作用。
HTML 提供了与 JavaScript 代码一起工作的事件处理程序属性，并可以在事件上执行某些操作。
语法：
<element event = "JS code">
示例：
<input type="button" value="Click" onclick="alert('Hi, how are you')">
单击按钮时弹出带有 Hi, how are you 消息的窗口。
HTML 可以具有以下事件，例如：
- 表单事件：reset、submit 等。
- 选择事件：文本字段、文本区域 等。
- 焦点事件：focus、blur 等。
- 鼠标事件：select、mouseup、mousemove、mousedown、click、dblclick 等。
以下是窗口事件属性的列表：
| 事件名称 | 处理程序名称 | 发生时间 |
|---|---|---|
| onBlur | blur | 当表单输入失去焦点时 |
| onClick | click | 当用户单击表单元素或链接时 |
| 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" onclick="myFunction()">Click Me!</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaTpoint!";
}
</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";
}
</script>
<button type="button" onclick="myFunction()">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 文件的完整路径。
语法：
<script type="text/javascript" src="URL "></script>
示例：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" 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> 标签用于在浏览器中写入禁用的脚本。在 <noscript></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> 
