HTML 脚本学习笔记
什么是脚本？
在 HTML 中，脚本（Script）是一种能够由浏览器直接解析的编程语言。通过在 HTML 页面中插入脚本，可以实现许多功能，例如动态修改网页内容、响应用户操作等。
常用的脚本语言有 JavaScript、VBScript 等。目前，JavaScript 已经成为了前端开发中最为流行的脚本语言之一。
如何在 HTML 中使用脚本？
在 HTML 中使用脚本通常需要使用 <script> 标签。这个标签可以用来指定脚本语言的类型、引入外部脚本文件等。
嵌入式脚本
嵌入式脚本是指将脚本代码直接嵌入到 HTML 页面中。下面是一个简单的例子：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>脚本示例</title>
</head>
<body>
<h1>欢迎使用嵌入式脚本！</h1>
<p id="demo">这里将会显示一些文本。</p>
<script>
// 修改页面元素的内容
document.getElementById("demo").innerHTML = "Hello, World!";
</script>
</body>
</html>
在上述例子中，我们首先定义了一个 <p> 元素，并为其指定了一个 id 属性。接着，我们通过 <script> 标签嵌入了一段 JavaScript 代码，该代码会将该元素的文本内容修改为 "Hello, World!"。
外部脚本
如果我们需要在多个 HTML 页面中使用同样的脚本，可以将脚本代码保存为一个单独的文件，并通过 <script> 标签引入。下面是一个例子：
script.js
jsCopy Code// 修改页面元素的内容
document.getElementById("demo").innerHTML = "Hello, World!";
index.html
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>脚本示例</title>
<script src="script.js"></script>
</head>
<body>
<h1>欢迎使用外部脚本！</h1>
<p id="demo">这里将会显示一些文本。</p>
</body>
</html>
在上述例子中，我们将脚本代码保存为一个名为 script.js 的文件，并通过使用带有 src 属性的 <script> 标签，将其引入到了 index.html 文件中。这样一来，无论我们在哪个 HTML 页面中使用该脚本，只需要简单地引入它即可。
脚本语法和基础语句
JavaScript 作为一种编程语言，具有自己的语法和基础语句。下面是一些常见的脚本语法和语句：
变量声明
在 JavaScript 中声明变量需要使用 var 关键字。例如：
jsCopy Codevar x = 1;
判断语句
通过使用 if...else 语句，我们可以根据不同的条件执行不同的代码块。例如：
jsCopy Codeif(x > 0) {
console.log("x 是一个正数");
} else if(x == 0) {
console.log("x 是零");
} else {
console.log("x 是一个负数");
}
循环语句
JavaScript 支持多种循环语句，例如 for、while 和 do...while。下面是一个使用 for 循环的例子：
jsCopy Codefor(var i = 0; i < 10; i++) {
console.log(i);
}
函数定义
通过将一些代码封装为一个函数，我们可以方便地进行代码复用。下面是一个简单的函数定义：
jsCopy Codefunction myFunction(a, b) {
return a + b;
}
var x = myFunction(1, 2); // x 的值将为 3
实例
下面是一个使用脚本实现动态修改网页内容的例子：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>脚本示例</title>
</head>
<body>
<h1>欢迎使用脚本！</h1>
<input type="text" id="myInput">
<button onclick="myFunction()">修改文本</button>
<p id="demo">这里将会显示一些文本。</p>
<script>
function myFunction() {
// 获取输入框的文本内容
var x = document.getElementById("myInput").value;
// 将文本内容设置为段落元素的内容
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
在上述例子中，我们首先定义了一个 <input> 元素和一个带有 onclick 属性的 <button> 元素。当用户点击该按钮时，会触发 myFunction 函数。该函数会获取输入框的文本内容，并将其设置为一个带有 id 为 "demo" 的 <p> 元素的内容。