JavaScript 基础教程

1. 简介

JavaScript 是一种高级的、解释型的编程语言，是网页开发的核心技术之一。它可以为网页添加交互性，也可以用于服务器端开发。

2. 变量和数据类型

变量声明

JavaScript 中有三种声明变量的方式：

• var - 函数作用域，可重复声明
• let - 块作用域，不可重复声明
• const - 块作用域，常量

// 使用 let 声明变量
let name = "张三";
let age = 25;

// 使用 const 声明常量
const PI = 3.14159;

// 使用 var 声明（不推荐）
var oldStyle = "旧式声明";

数据类型

JavaScript 有以下基本数据类型：

• Number - 数字
• String - 字符串
• Boolean - 布尔值
• undefined - 未定义
• null - 空值
• Symbol - 符号
• Object - 对象

let num = 42;           // Number
let str = "Hello";      // String
let isTrue = true;      // Boolean
let nothing = null;     // null
let undef;              // undefined

3. 函数

函数声明

// 函数声明
function greet(name) {
    return "你好，" + name;
}

// 函数表达式
const greet2 = function(name) {
    return "你好，" + name;
};

// 箭头函数
const greet3 = (name) => {
    return "你好，" + name;
};

// 简化箭头函数
const greet4 = name => "你好，" + name;

4. 对象和数组

对象

// 对象字面量
const person = {
    name: "李四",
    age: 30,
    city: "北京",
    greet: function() {
        return "我是" + this.name;
    }
};

// 访问对象属性
console.log(person.name);     // 点记法
console.log(person["age"]);   // 方括号记法

数组

// 数组字面量
const fruits = ["苹果", "香蕉", "橙子"];

// 数组方法
fruits.push("葡萄");         // 添加元素
fruits.pop();               // 删除最后一个元素
fruits.shift();             // 删除第一个元素
fruits.unshift("草莓");      // 在开头添加元素

// 遍历数组
fruits.forEach(fruit => {
    console.log(fruit);
});

// 数组映射
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

5. 条件语句和循环

条件语句

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

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

循环语句

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

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

// for...of 循环（遍历数组）
for (const fruit of fruits) {
    console.log(fruit);
}

// for...in 循环（遍历对象属性）
for (const key in person) {
    console.log(key + ": " + person[key]);
}

6. DOM 操作

JavaScript 可以操作网页的 DOM（文档对象模型）：

// 获取元素
const element = document.getElementById("myId");
const elements = document.getElementsByClassName("myClass");
const element2 = document.querySelector(".myClass");

// 修改内容
element.textContent = "新的文本内容";
element.innerHTML = "<strong>HTML 内容</strong>";

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

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

7. 总结

JavaScript 是一门功能强大的编程语言，掌握以上基础知识后，你就可以开始创建交互式的网页了。建议多练习，通过实际项目来加深理解。