网站基础：JavaScript基础介绍

一、JavaScript简介

JavaScript（简称JS）是一种轻量级的解释型编程语言，主要用于网页交互开发。

JavaScript的主要特点：

• 解释型语言，无需编译
• 基于对象和事件驱动
• 跨平台，支持所有主流浏览器
• 与HTML和CSS协同工作

JavaScript能做什么：

• 网页动态效果和动画
• 表单验证和数据处理
• 与服务器通信（AJAX）
• 操作HTML元素和CSS样式
• 创建复杂的Web应用程序

二、JavaScript引入方式

1. 行内JavaScript

直接在HTML标签的事件属性中编写

<button onclick="alert('Hello World!')">点击我</button>

2. 内部JavaScript

在HTML文档中使用<script>标签

<script>
    function showMessage() {
        alert('Hello World!');
    }
</script>
    

3. 外部JavaScript

使用单独的.js文件，通过<script>标签引入

<script src="script.js"></script>

4. 现代模块化引入

<script type="module" src="main.js"></script>

三、JavaScript基础语法

1. 变量声明

2. 数据类型

3. 运算符

四、流程控制

1. 条件语句

// if语句
if (age >= 18) {
    console.log("成年人");
} else {
    console.log("未成年人");
}

// switch语句
switch(day) {
    case 1:
        console.log("星期一");
        break;
    case 2:
        console.log("星期二");
        break;
    default:
        console.log("其他日子");
}
    

2. 循环语句

// for循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// while循环
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

// for...of循环（数组）
let fruits = ["苹果", "香蕉", "橙子"];
for (let fruit of fruits) {
    console.log(fruit);
}

// for...in循环（对象）
let person = {name: "John", age: 30};
for (let key in person) {
    console.log(key + ": " + person[key]);
}
    

五、函数

1. 函数定义

// 函数声明
function greet(name) {
    return "Hello, " + name;
}

// 函数表达式
const greet = function(name) {
    return "Hello, " + name;
};

// 箭头函数（ES6）
const greet = (name) => {
    return "Hello, " + name;
};

// 简写箭头函数
const greet = name => "Hello, " + name;
    

2. 函数参数

// 默认参数
function multiply(a, b = 1) {
    return a * b;
}

// 剩余参数
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
    

六、数组操作

常用数组方法：

七、对象操作

1. 对象创建和访问

// 对象字面量
let person = {
    name: "张三",
    age: 25,
    sayHello: function() {
        console.log("Hello!");
    }
};

// 访问属性
console.log(person.name);        // 点表示法
console.log(person["age"]);      // 括号表示法
person.sayHello();               // 调用方法
    

2. 对象方法

// Object.keys() - 获取所有键名
let keys = Object.keys(person);

// Object.values() - 获取所有值
let values = Object.values(person);

// Object.assign() - 合并对象
let newObj = Object.assign({}, person, {job: "工程师"});
    

八、DOM操作

1. 选择元素

// 通过ID选择
let element = document.getElementById("myId");

// 通过类名选择
let elements = document.getElementsByClassName("myClass");

// 通过标签名选择
let elements = document.getElementsByTagName("div");

// 通过CSS选择器选择
let element = document.querySelector("#myId .myClass");
let elements = document.querySelectorAll("div.myClass");
    

2. 操作元素

// 修改内容
element.innerHTML = "新内容";
element.textContent = "纯文本内容";

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

// 修改属性
element.setAttribute("src", "image.jpg");
let value = element.getAttribute("data-info");

// 添加/删除类
element.classList.add("active");
element.classList.remove("old-class");
element.classList.toggle("hidden");
    

3. 创建和添加元素

// 创建新元素
let newDiv = document.createElement("div");
newDiv.textContent = "新创建的div";

// 添加到页面
document.body.appendChild(newDiv);
parentElement.insertBefore(newDiv, existingElement);
    

九、事件处理

1. 事件监听

// 添加事件监听器
element.addEventListener("click", function(event) {
    console.log("元素被点击了");
});

// 移除事件监听器
element.removeEventListener("click", handlerFunction);
    

2. 常用事件类型

3. 事件对象

element.addEventListener("click", function(event) {
    event.preventDefault();      // 阻止默认行为
    event.stopPropagation();     // 阻止事件冒泡
    console.log(event.target);   // 事件目标元素
    console.log(event.type);     // 事件类型
});
    

十、异步编程

1. 回调函数

setTimeout(function() {
    console.log("3秒后执行");
}, 3000);

// 读取文件示例
fs.readFile('file.txt', function(err, data) {
    if (err) throw err;
    console.log(data);
});
    

2. Promise

// 创建Promise
let promise = new Promise(function(resolve, reject) {
    // 异步操作
    if (/* 成功 */) {
        resolve("成功结果");
    } else {
        reject("错误信息");
    }
});

// 使用Promise
promise
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.error(error);
    });
    

3. async/await

// async函数
async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        return data;
    } catch (error) {
        console.error('获取数据失败:', error);
    }
}

// 调用async函数
fetchData().then(data => console.log(data));
    

十一、错误处理

try...catch语句

try {
    // 可能出错的代码
    let result = riskyOperation();
    console.log(result);
} catch (error) {
    // 处理错误
    console.error("发生错误:", error.message);
} finally {
    // 无论是否出错都会执行
    console.log("操作完成");
}
    

十二、现代JavaScript特性（ES6+）

1. 模板字符串

let name = "张三";
let age = 25;
let message = `我叫${name}，今年${age}岁。`;
    

2. 解构赋值

// 数组解构
let [a, b] = [1, 2];

// 对象解构
let {name, age} = person;

// 函数参数解构
function printPerson({name, age}) {
    console.log(`${name} - ${age}`);
}
    

3. 扩展运算符

// 数组扩展
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];

// 对象扩展
let obj1 = {a: 1, b: 2};
let obj2 = {...obj1, c: 3};
    

十三、JavaScript调试

调试方法：

• console.log() - 输出信息到控制台
• console.error() - 输出错误信息
• debugger - 设置断点
• 浏览器开发者工具 - F12打开调试工具

常用console方法：

console.log("普通信息");         // 普通日志
console.error("错误信息");       // 错误信息
console.warn("警告信息");        // 警告信息
console.table([1, 2, 3]);       // 表格形式显示
console.time("timer");          // 开始计时
// 一些操作
console.timeEnd("timer");       // 结束计时
    

十四、JavaScript最佳实践

编码规范：

• 使用有意义的变量名
• 保持函数单一职责
• 使用const和let代替var
• 避免全局变量污染
• 使用严格模式（'use strict'）

性能优化：

• 避免在循环中执行DOM操作
• 使用事件委托
• 合理使用缓存
• 避免内存泄漏

十五、学习资源推荐

在线教程：

• MDN JavaScript指南 - 最权威的文档
• JavaScript.info - 现代JavaScript教程
• freeCodeCamp - 互动式学习平台
• W3School - 基础教程参考

练习平台：

• CodePen - 在线代码编辑
• JSFiddle - 代码测试平台
• LeetCode - 算法练习
• Codewars - 编程挑战

十六、总结

JavaScript学习路径：

1. 掌握基础语法和数据类型
2. 学习函数和流程控制
3. 理解DOM操作和事件处理
4. 掌握异步编程
5. 学习现代ES6+特性
6. 实践项目开发

进阶方向：

• 前端框架（React、Vue、Angular）
• Node.js后端开发
• TypeScript类型系统
• Web性能优化
• 测试和调试技巧

JavaScript是Web开发的核心技术，通过不断实践和项目积累，你将能够创建出功能丰富、交互性强的现代Web应用程序。