如何用 js 编写 - Javascript (1)

📌 相关文章

📜 如何用 js 编写 - Javascript (1)

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

如何用 JS 编写 - JavaScript

JavaScript 是前端 Web 开发必备的编程语言之一。以下是 JS 编写的基础知识。

基本语法

变量

定义变量使用 var 或者 let。

var name = "Jack";
let age = 30;

数据类型

JavaScript 中有七种基本类型：

string 字符串
number 数字
boolean 布尔值
null 空
undefined 未定义
Object 对象
Symbol 符号（ES6 中新增）

检查变量的类型可以使用 typeof。

typeof "hello"; // "string"
typeof 10; // "number"
typeof true; // "boolean"
typeof null; // "object"
typeof undefined; // "undefined"

运算符

JavaScript 支持常用的运算符，如 +、-、*、/、++、--、== 等。其中 == 表示值相等，=== 表示值和类型都相等。

var a = 10;
var b = 5;

console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2

var c = 5;
console.log(c++); // 5
console.log(c); // 6

var d = 5;
console.log(++d); // 6

console.log(10 == 10); // true
console.log("10" == 10); // true
console.log("10" === 10); // false

条件语句

JavaScript 使用 if、else、else if 等关键字实现条件语句。

var age = 18;

if (age < 18) {
  console.log("未成年");
} else if (age >= 18 && age < 60) {
  console.log("成年人");
} else {
  console.log("老年人");
}

循环语句

JavaScript 使用 for、while 等关键字实现循环语句。

for (var i = 0; i < 10; i++) {
  console.log(i);
}

var j = 0;
while (j < 10) {
  console.log(j);
  j++;
}

DOM 操作

DOM（Document Object Model）是 HTML 页面中的所有元素的集合。JavaScript 可以操作 DOM，实现动态效果。

<!DOCTYPE html>
<html>
  <head>
    <title>DOM 操作示例</title>
  </head>
  <body>
    <div id="wrapper">
      <button onclick="showMessage()">点击显示消息</button>
    </div>

    <script>
      function showMessage() {
        var wrapper = document.getElementById("wrapper");
        var p = document.createElement("p");
        var message = document.createTextNode("Hello, World!");
        p.appendChild(message);
        wrapper.appendChild(p);
      }
    </script>
  </body>
</html>

AJAX

AJAX（Asynchronous JavaScript and XML）是一种在 Web 页面上实现异步通信的技术。通过 AJAX，Web 页面可以在不刷新的情况下更新部分内容，提高页面响应速度。

<!DOCTYPE html>
<html>
  <head>
    <title>AJAX 示例</title>
  </head>
  <body>
    <div id="wrapper">
      <button onclick="loadData()">加载数据</button>
    </div>

    <script>
      function loadData() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && xhr.status == 200) {
            var wrapper = document.getElementById("wrapper");
            var data = JSON.parse(xhr.responseText);
            var ul = document.createElement("ul");
            for (var i = 0; i < data.length; i++) {
              var li = document.createElement("li");
              var text = document.createTextNode(data[i].name);
              li.appendChild(text);
              ul.appendChild(li);
            }
            wrapper.appendChild(ul);
          }
        };
        xhr.open("GET", "data.json", true);
        xhr.send();
      }
    </script>
  </body>
</html>

以上就是 JavaScript 编写的基础知识，我们可以用它实现前端 Web 开发的很多功能，如表单验证、倒计时等。