javascript 示例

📌 相关文章

📜 javascript 示例 - Javascript (1)

📅 最后修改于: 2023-12-03 15:31:45.290000 🧑 作者: Mango

JavaScript 是一种常用的脚本语言，可以用于前端开发、服务器端开发等多个领域。在本文中，我们将介绍几个常用的 JavaScript 示例，帮助程序员更好地理解和使用 JavaScript。

示例一：输出 Hello World

下面是一个简单的 JavaScript 代码示例，在网页中输出一段文字 "Hello World"。

<!DOCTYPE html>
<html>
<body>

<script>
document.write("Hello World");
</script>

</body>
</html>

可以看到，在 HTML 文档中嵌入了一个 JavaScript 代码块，在该代码块中使用了 document.write() 函数输出了一段文字 "Hello World"。

示例二：获取页面元素

JavaScript 可以通过 document 对象获取网页中的元素。下面的示例演示了如何获取页面中 ID 为 "myImage" 的图片元素，并修改其 src 属性。

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smile.gif" width="150" height="150">

<script>
var img = document.getElementById("myImage");
img.src = "angry.gif";
</script>

</body>
</html>

在该示例中，我们首先声明了一个变量 img，并使用 document.getElementById() 函数获取了 ID 为 "myImage" 的图片元素。接着，我们修改了该元素的 src 属性，将其指向了另一张图片 "angry.gif"。

示例三：事件绑定

JavaScript 可以给页面元素绑定事件，实现一些交互效果。下面的示例演示了如何给按钮元素绑定一个 click 事件，并在点击按钮时弹出一个对话框。

<!DOCTYPE html>
<html>
<body>

<button id="myButton">点击我</button>

<script>
var btn = document.getElementById("myButton");
btn.addEventListener("click", function() {
  alert("你点击了按钮！");
});
</script>

</body>
</html>

在该示例中，我们使用 document.getElementById() 函数获取了 ID 为 "myButton" 的按钮元素，并使用 addEventListener() 函数为按钮绑定了一个 click 事件处理函数。在该函数中，我们使用 alert() 函数弹出了一个对话框。

示例四：Ajax 请求

JavaScript 可以通过 Ajax 技术，实现异步加载数据。下面的示例演示了如何通过 Ajax 请求获取一段文本数据，并在页面上显示出来。

<!DOCTYPE html>
<html>
<body>

<button id="myButton">点击我</button>

<div id="myContent"></div>

<script>
var btn = document.getElementById("myButton");
var content = document.getElementById("myContent");
btn.addEventListener("click", function() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      content.innerHTML = xhr.responseText;
    }
  };
  xhr.open("GET", "data.txt", true);
  xhr.send();
});
</script>

</body>
</html>

在该示例中，我们使用 XMLHttpRequest() 对象创建了一个 AJAX 请求，并使用 open() 方法指定了请求的类型、地址和是否异步。接着，我们在 onreadystatechange 事件处理函数中，判断请求状态是否完成，并检查响应状态码是否为 200 (表示请求成功)。如果满足条件，则将响应文本赋值给某个页面元素中的 innerHTML 属性，从而在页面上显示出来。

以上是几个常用的 JavaScript 示例，它们涵盖了 JavaScript 的多个方面，包括页面交互、数据请求、元素操作等。程序员可以根据自己的需要，进一步学习和应用 JavaScript，在实际开发中提高工作效率和代码质量。