编辑“︁JavaScript简介”︁

{{DISPLAYTITLE:JavaScript简介}}

'''JavaScript'''（简称JS）是一种轻量级、解释型或即时编译的编程语言，主要用于为网页添加交互功能。它是[[w:ECMAScript|ECMAScript]]标准最著名的实现之一，与[[w:HTML|HTML]]和[[w:CSS|CSS]]并称为现代网页开发的三大核心技术。

== 概述 ==
JavaScript最初由Netscape公司的Brendan Eich在1995年开发，最初命名为LiveScript，后因与Sun Microsystems（现Oracle）合作而更名为JavaScript。尽管名称中包含"Java"，但JavaScript与Java语言并无直接关联。

JavaScript的主要特点包括：
* '''跨平台'''：在所有现代浏览器中运行
* '''多范式'''：支持面向对象、函数式和命令式编程
* '''动态类型'''：变量类型在运行时确定
* '''基于原型'''：使用原型继承而非类继承（ES6之前）
* '''单线程'''：使用事件循环处理并发

== 基本语法 ==
JavaScript语法与C语言家族相似，但有其独特特性。

=== 变量声明 ===
JavaScript有三种变量声明方式：
<syntaxhighlight lang="javascript">
// ES5方式
var name = "张三"; // 函数作用域

// ES6新增
let age = 25;     // 块级作用域
const PI = 3.14;  // 块级作用域，常量
</syntaxhighlight>

=== 数据类型 ===
JavaScript有7种基本数据类型和1种复杂数据类型：

{| class="wikitable"
|+ JavaScript数据类型
! 类型 !! 说明 !! 示例
|-
| <code>Number</code> || 数字 || <code>42</code>, <code>3.14</code>
|-
| <code>String</code> || 字符串 || <code>"Hello"</code>, <code>'World'</code>
|-
| <code>Boolean</code> || 布尔值 || <code>true</code>, <code>false</code>
|-
| <code>null</code> || 空值 || <code>null</code>
|-
| <code>undefined</code> || 未定义 || <code>undefined</code>
|-
| <code>Symbol</code> || 唯一标识符 || <code>Symbol('id')</code>
|-
| <code>BigInt</code> || 大整数 || <code>9007199254740991n</code>
|-
| <code>Object</code> || 对象 || <code>{name: "张三"}</code>, <code>[1,2,3]</code>
|}

== 核心概念 ==

=== 函数 ===
JavaScript中的函数是一等公民，可以作为参数传递或作为返回值。

<syntaxhighlight lang="javascript">
// 函数声明
function greet(name) {
    return `Hello, ${name}!`;
}

// 函数表达式
const square = function(x) {
    return x * x;
};

// 箭头函数 (ES6)
const add = (a, b) => a + b;
</syntaxhighlight>

=== 对象和原型 ===
JavaScript使用原型继承而非类继承（ES6之前）：

<syntaxhighlight lang="javascript">
// 构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 通过原型添加方法
Person.prototype.greet = function() {
    console.log(`你好，我是${this.name}`);
};

const person1 = new Person("李四", 30);
person1.greet(); // 输出: 你好，我是李四
</syntaxhighlight>

=== 异步编程 ===
JavaScript使用回调、Promise和async/await处理异步操作：

<syntaxhighlight lang="javascript">
// 回调方式
setTimeout(() => {
    console.log("1秒后执行");
}, 1000);

// Promise方式
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));

// async/await方式 (ES2017)
async function getData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
}
</syntaxhighlight>

== 实际应用 ==

=== DOM操作 ===
JavaScript最常见的用途是操作网页内容：

<syntaxhighlight lang="javascript">
// 获取元素
const button = document.getElementById('myButton');

// 添加事件监听
button.addEventListener('click', () => {
    const div = document.createElement('div');
    div.textContent = '新创建的元素';
    document.body.appendChild(div);
});
</syntaxhighlight>

=== 表单验证 ===
客户端表单验证示例：

<syntaxhighlight lang="javascript">
document.querySelector('form').addEventListener('submit', (event) => {
    const email = document.getElementById('email').value;
    
    if (!email.includes('@')) {
        event.preventDefault();
        alert('请输入有效的电子邮件地址');
    }
});
</syntaxhighlight>

== JavaScript执行模型 ==
JavaScript在浏览器中的执行模型可以用以下mermaid图表示：

<mermaid>
graph TD
    A[调用栈] --> B[执行上下文]
    B --> C[变量环境]
    B --> D[词法环境]
    B --> E[this绑定]
    F[事件队列] -->|事件循环| A
    G[Web API] --> F
</mermaid>

== 数学计算 ==
JavaScript支持各种数学运算，可以通过Math对象访问：

<math>
\sqrt{x^2 + y^2}
</math>

对应JavaScript代码：
<syntaxhighlight lang="javascript">
const distance = Math.sqrt(x**2 + y**2);
</syntaxhighlight>

== 总结 ==
JavaScript作为现代Web开发的基石，从简单的网页交互到复杂的单页应用(SPA)都能胜任。随着ECMAScript标准的不断更新，JavaScript的功能也在不断增强，使其成为当今最流行的编程语言之一。

对于初学者，建议从基础语法开始，逐步学习DOM操作、事件处理和异步编程。有经验的开发者可以深入探索原型继承、闭包、设计模式等高级主题。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript基础]]