Javascript 初识及基本语法详解

news/2024/7/9 6:32:13

JavaScript 是一种广泛使用的编程语言，它使得网页能够具有动态和交互性。以下是对 JavaScript 初识及基本语法的详解：

JavaScript 简介

JavaScript 最初被设计来为网页添加交互性，但随着时间的发展，它的用途已经扩展到了服务器端编程（Node.js）、移动应用开发、游戏开发等多个领域。JavaScript 是一种解释型语言，这意味着它不需要编译，而是由浏览器在运行时解释执行。

JavaScript 基本语法

变量声明：
- 使用 var、let、const 来声明变量。
- var 是最早的变量声明方式，它声明的变量有函数作用域或全局作用域。
- let 和 const 是 ES6（ECMAScript 2015）引入的，提供了块级作用域（block scope）。
- const 用于声明常量，一旦赋值后不可更改。
```
var message = "Hello, world!";
let count = 0;
const PI = 3.14159;
```
数据类型：
- JavaScript 有多种数据类型，包括 Number、String、Boolean、Object、Array、Function 等。
- 可以使用 typeof 操作符来检查变量的数据类型。
```
let isDone = true; // Boolean
let decimal = 4.2; // Number
let sentence = "This is a sentence."; // String
```
运算符：
- 包括算术运算符（如 +、-、*、/）、比较运算符（如 <、>、==、===）、逻辑运算符（如 &&、||、!）等。
- == 进行值比较，而 === 进行值和类型的比较。
```
let result = 5 + 3; // 使用算术运算符
let isEqual = (result == 8); // 使用比较运算符
```

控制结构：

包括 if 语句、switch 语句、for 循环、while 循环等。
if 语句用于基于条件执行代码块。

if (count < 5) {
    console.log("Count is less than 5");
} else {
    console.log("Count is 5 or more");
}

函数：
- 函数是可重复使用的代码块，可以有参数和返回值。
- 使用 function 关键字来定义函数。
```
function greet(name) {
    return "Hello, " + name;
}
```

对象：

对象是复合数据类型，可以包含多个属性和方法。
使用对象字面量 {} 来创建对象。

let person = {
    firstName: "John",
    lastName: "Doe",
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};

数组：
- 数组用于存储多个值的集合。
- 使用数组字面量 [] 来创建数组。
```
let numbers = [1, 2, 3, 4, 5];
let fruits = ["apple", "banana", "mango"];
```
事件和事件处理：
- JavaScript 常用于处理用户事件，如点击、鼠标移动、键盘输入等。
- 使用 addEventListener 方法来添加事件监听器。
```
document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});
```
DOM 操作：
- DOM（文档对象模型）是 HTML 文档的编程接口。
- 使用 document 对象来访问和操作页面元素。
```
let element = document.getElementById("myElement");
element.innerHTML = "New content";
```

异步编程：

JavaScript 支持异步编程，特别是通过 Promise 和 async/await。
异步编程允许程序在等待某些操作（如网络请求）完成时继续执行其他任务。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Some data");
        }, 1000);
    });
}

fetchData().then(data => {
    console.log(data);
});