嵌入式 JavaScript

JavaScript 是一种常用于在网页中添加交互性和动态性的脚本语言。嵌入式 JavaScript 是指将 JavaScript 嵌入到 HTML 页面中的技术。通过嵌入式 JavaScript，可以实现更加丰富的网页交互和动态效果。

常用方式

以下是几种常用的嵌入式 JavaScript 方式：

1. <script> 元素

最常用的一种方式是使用 <script> 元素将 JavaScript 嵌入到 HTML 页面中。可以在 <script> 标签内包含 JavaScript 代码，或者引用外部 JavaScript 文件。

<!-- 内联 JavaScript 代码 -->
<script>
    alert('Hello, world!');
</script>

<!-- 引用外部 JavaScript 文件 -->
<script src="path/to/script.js"></script>

2. 事件属性

另一种常用的方式是使用 HTML 元素的事件属性来嵌入 JavaScript 代码。例如，可以在按钮的 onclick 属性中嵌入 JavaScript 代码。

<button onclick="alert('Hello, world!')">Click me</button>

3. URL 参数

有些情况下，可以使用 URL 参数来嵌入 JavaScript 代码。例如，可以在链接的 href 属性中嵌入 JavaScript 代码。

<a href="javascript:alert('Hello, world!')">Click me</a>

常用功能

以下是几种常用的嵌入式 JavaScript 功能：

1. 改变 HTML 元素样式

<!-- 在 \<script\> 元素中设置样式 -->
<script>
    var element = document.getElementById('myElement');
    element.style.color = 'red';
</script>

<!-- 在事件属性中设置样式 -->
<button onclick="this.style.color = 'red'">Change color</button>

2. 显示/隐藏 HTML 元素

<!-- 在 \<script\> 元素中显示/隐藏元素 -->
<script>
    var element = document.getElementById('myElement');
    element.style.display = 'none'; // 隐藏元素
    element.style.display = 'block'; // 显示元素
</script>

<!-- 在事件属性中显示/隐藏元素 -->
<button onclick="document.getElementById('myElement').style.display = 'none'">Hide</button>
<button onclick="document.getElementById('myElement').style.display = 'block'">Show</button>

3. 发送 AJAX 请求

<script>
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById('myElement').innerHTML = this.responseText;
        }
    };
    xhttp.open('GET', 'myData.txt', true);
    xhttp.send();
</script>

总结

嵌入式 JavaScript 可以使网页更加灵活和交互性。除了上述介绍的方式和功能外，还有许多其他的用法。但是需要注意，嵌入式 JavaScript 也会给网页带来一定的安全隐患，因此需要谨慎使用。