JavaScript核心语法

JavaScript核心语法

一、JavaScript概述

1. 应用场景

• 网页动态效果（轮播图、弹出广告等）
• 表单验证
• 数据交互（AJAX）
• 前端框架基础（React、Vue等）

2. 语言特点

• 解释型脚本语言
• 弱类型语言
• 基于原型的面向对象
• 跨平台（浏览器环境）

3. 组成部分

组成部分	描述
ECMAScript	核心语法规范
DOM	文档对象模型，操作HTML元素
BOM	浏览器对象模型，操作浏览器窗口

二、基础语法详解

1. 变量声明

// ES5
var name = "John";

// ES6+
let age = 25;
const PI = 3.14;

2. 数据类型

类型	示例	说明
Number	10, 3.14	数值类型
String	"Hello", 'World'	字符串类型
Boolean	true, false	布尔类型
Undefined	undefined	未定义
Null	null	空值
Object		对象类型
Symbol	Symbol("id")	唯一标识符（ES6新增）

3. 运算符

3.1 比较运算符

// 严格比较
console.log(10 === "10"); // false

// 非严格比较
console.log(10 == "10");  // true

3.2 逻辑运算符

// 六种假值
false, 0, "", null, undefined, NaN

// 逻辑运算
console.log(0 && "Hello"); // 0
console.log("" || "World"); // "World"

4. 流程控制

// if语句
if (condition) {
    // 代码块
}

// 三元运算符
let result = condition ? value1 : value2;

// switch语句
switch (expression) {
    case value1:
        // 代码块
        break;
    default:
        // 默认代码块
}

三、函数编程

1. 普通函数

function greet(name) {
    return `Hello, ${name}!`;
}

// 调用
console.log(greet("Alice"));

2. 匿名函数

// 赋值给变量
const sayHello = function(name) {
    console.log(`Hello, ${name}`);
};

// 作为参数传递
function execute(callback) {
    callback("Bob");
}

execute(function(name) {
    console.log(`Hi, ${name}`);
});

3. 箭头函数（ES6）

const add = (a, b) => a + b;

// 简化回调
[1, 2, 3].forEach(num => console.log(num));

四、DOM操作

1. 元素获取

// 通过ID
const element = document.getElementById("myElement");

// 通过类名
const elements = document.getElementsByClassName("myClass");

// 通过标签名
const divs = document.getElementsByTagName("div");

// 通过选择器
const item = document.querySelector(".item");
const items = document.querySelectorAll(".items");

2. 元素操作

// 修改内容
element.innerHTML = "<strong>New Content</strong>";

// 修改样式
element.style.color = "red";

// 添加/删除类
element.classList.add("active");
element.classList.remove("inactive");

// 事件监听
element.addEventListener("click", function() {
    console.log("Element clicked!");
});

五、BOM操作

1. Window对象

// 弹出框
alert("This is an alert!");
confirm("Are you sure?");
prompt("What's your name?", "John");

// 定时器
const timer = setTimeout(() => {
    console.log("Timeout!");
}, 1000);

// 清除定时器
clearTimeout(timer);

2. Location对象

// 获取当前URL
console.log(location.href);

// 页面跳转
location.href = "https://www.example.com";

// 刷新页面
location.reload();

3. History对象

// 前进/后退
history.back();
history.forward();

// 跳转指定页面
history.go(-2); // 后退两页

六、最佳实践

1. 代码组织

• 使用模块化（ES6 Modules）
• 遵循单一职责原则
• 合理使用注释

2. 性能优化

• 减少DOM操作
• 使用事件委托
• 合理使用缓存

3. 错误处理

try {
    // 可能出错的代码
} catch (error) {
    console.error("Error occurred:", error);
} finally {
    // 清理代码
}

七、实战案例

1. 表单验证

function validateForm() {
    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;

    if (username.length < 6) {
        alert("用户名至少6个字符");
        return false;
    }

    if (password.length < 8) {
        alert("密码至少8个字符");
        return false;
    }

    return true;
}

2. 动态内容加载

function loadContent(url, callback) {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            callback(xhr.responseText);
        }
    };
    xhr.open("GET", url, true);
    xhr.send();
}

通过系统学习JavaScript核心语法，结合实际案例练习，开发者可以构建功能强大、性能优越的Web应用。建议在学习过程中多动手实践，逐步掌握JavaScript在前端开发中的强大能力。