最简洁的JavaScript教程

原创

zzh-dahai

修改于 2025-07-02 14:50:43

4160

JavaScript 基础教程

1. JavaScript简介

JavaScript是一种轻量级的解释型编程语言，主要用于网页开发，为网页添加交互功能。

JavaScript与Java无关，名称相似是历史原因。

JavaScript的特点：

客户端脚本语言
基于对象和事件驱动
解释性语言
跨平台

2. 如何使用JavaScript

JavaScript可以通过三种方式添加到HTML页面中：

2.1 内部JavaScript

<script>
    // JavaScript代码
    alert('Hello, World!');
</script>

2.2 外部JavaScript

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

2.3 行内JavaScript

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

最佳实践： 推荐使用外部JavaScript文件，有利于代码组织和维护。

3. 变量与数据类型

3.1 变量声明

// ES5
var name = "张三";

// ES6
let age = 25;
const PI = 3.14159;

3.2 数据类型

JavaScript有7种基本数据类型：

String - 字符串
Number - 数字
Boolean - 布尔值
Null - 空值
Undefined - 未定义
Symbol - 符号(ES6新增)
BigInt - 大整数(ES2020新增)

和1种复杂数据类型：

Object - 对象

示例：

let name = "李四"; // 字符串
let age = 30;     // 数字
let isStudent = false; // 布尔值
let car = null;   // null
let test;         // undefined

4. 运算符

4.1 算术运算符

let sum = 5 + 3;   // 8
let diff = 5 - 3;  // 2
let product = 5 * 3; // 15
let quotient = 5 / 3; // 1.666...
let remainder = 5 % 3; // 2
let power = 5 ** 3; // 125 (ES6)

4.2 比较运算符

let a = 5, b = 3;
a == b;   // false
a === b;  // false (严格等于，值和类型都相同)
a != b;   // true
a !== b;  // true
a > b;    // true
a < b;    // false
a >= b;   // true
a <= b;   // false

4.3 逻辑运算符

let x = true, y = false;
x && y;   // false (与)
x || y;   // true (或)
!x;       // false (非)

5. 条件语句

5.1 if语句

let age = 18;

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

5.2 switch语句

let day = 3;
let dayName;

switch (day) {
    case 1:
        dayName = "星期一";
        break;
    case 2:
        dayName = "星期二";
        break;
    // ...其他情况
    default:
        dayName = "未知";
}

5.3 三元运算符

let age = 20;
let status = (age >= 18) ? "成年人" : "未成年人";

6. 循环

6.1 for循环

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

6.2 while循环

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

6.3 do...while循环

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

6.4 for...in循环

let person = {name: "张三", age: 25};
for (let key in person) {
    console.log(key + ": " + person[key]);
}

6.5 for...of循环 (ES6)

let colors = ["red", "green", "blue"];
for (let color of colors) {
    console.log(color);
}

7. 函数

7.1 函数声明

function greet(name) {
    return "Hello, " + name + "!";
}

let message = greet("李四");

7.2 函数表达式

const greet = function(name) {
    return "Hello, " + name + "!";
};

7.3 箭头函数 (ES6)

const greet = (name) => {
    return "Hello, " + name + "!";
};

// 简写形式
const square = x => x * x;

7.4 默认参数 (ES6)

function greet(name = "Guest") {
    return "Hello, " + name + "!";
}

8. 对象

8.1 对象创建

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

8.2 访问属性

// 点表示法
console.log(person.name);

// 方括号表示法
console.log(person["age"]);

8.3 构造函数

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        console.log("Hello, " + this.name);
    };
}

let person1 = new Person("李四", 30);

8.4 ES6类

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    greet() {
        console.log(`Hello, ${this.name}`);
    }
}

let person1 = new Person("王五", 35);

9. 数组

9.1 创建数组

let fruits = ["Apple", "Banana", "Orange"];

9.2 访问元素

let first = fruits[0];  // "Apple"
let last = fruits[fruits.length - 1]; // "Orange"

9.3 常用方法

// 添加/删除元素
fruits.push("Mango");     // 末尾添加
fruits.pop();             // 末尾删除
fruits.unshift("Grape");  // 开头添加
fruits.shift();           // 开头删除

// 查找
fruits.indexOf("Banana"); // 返回索引或-1

// 遍历
fruits.forEach(function(item, index) {
    console.log(index, item);
});

// 映射
let lengths = fruits.map(fruit => fruit.length);

// 过滤
let longFruits = fruits.filter(fruit => fruit.length > 5);

10. DOM简介

DOM (Document Object Model) 是HTML文档的编程接口，它将HTML文档表示为节点树。

DOM节点类型

文档节点 - 整个文档
元素节点 - HTML元素
属性节点 - HTML元素的属性
文本节点 - HTML元素中的文本
注释节点 - HTML注释

示例HTML：

<!DOCTYPE html>
<html>
<head>
    <title>示例</title>
</head>
<body>
    <h1 id="title">欢迎</h1>
    <p class="content">这是一个段落</p>
</body>
</html>

11. DOM操作

11.1 选择元素

// 通过ID
let title = document.getElementById("title");

// 通过类名
let contents = document.getElementsByClassName("content");

// 通过标签名
let paragraphs = document.getElementsByTagName("p");

// 通过CSS选择器
let firstPara = document.querySelector("p.content");
let allParas = document.querySelectorAll("p");

11.2 修改元素

// 修改内容
title.textContent = "新标题";
title.innerHTML = "<em>强调标题</em>";

// 修改样式
title.style.color = "red";
title.style.fontSize = "24px";

// 修改属性
title.setAttribute("data-id", "123");
let id = title.getAttribute("id");

11.3 创建和添加元素

// 创建新元素
let newPara = document.createElement("p");
newPara.textContent = "这是新段落";

// 添加到DOM
document.body.appendChild(newPara);

// 插入到特定位置
let referenceElement = document.querySelector("p.content");
document.body.insertBefore(newPara, referenceElement);

11.4 删除元素

let element = document.querySelector("p.content");
element.parentNode.removeChild(element);

12. 事件处理

12.1 添加事件监听器

let button = document.querySelector("button");

// 传统方式
button.onclick = function() {
    alert("按钮被点击了!");
};

// 推荐方式
button.addEventListener("click", function() {
    alert("按钮被点击了!");
});

12.2 常见事件

click - 点击事件
dblclick - 双击事件
mouseover/mouseout - 鼠标移入/移出
mousedown/mouseup - 鼠标按下/释放
keydown/keyup - 键盘按下/释放
focus/blur - 元素获得/失去焦点
submit - 表单提交
load - 页面或资源加载完成

12.3 事件对象

button.addEventListener("click", function(event) {
    console.log("事件类型: " + event.type);
    console.log("目标元素: " + event.target);
    console.log("鼠标位置: " + event.clientX + ", " + event.clientY);
    
    // 阻止默认行为
    event.preventDefault();
    
    // 停止事件冒泡
    event.stopPropagation();
});

13. ES6新特性

13.1 let和const

// 块级作用域变量
let x = 10;

// 常量
const PI = 3.14159;

13.2 模板字符串

let name = "张三";
let greeting = `Hello, ${name}!
今天是${new Date().toLocaleDateString()}.`;

13.3 解构赋值

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

// 对象解构
let {name, age} = {name: "李四", age: 25};

13.4 扩展运算符

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

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

13.5 Promise

function fetchData() {
    return new Promise((resolve, reject) => {
        // 异步操作
        setTimeout(() => {
            resolve("数据加载成功");
            // 或 reject("加载失败");
        }, 1000);
    });
}

fetchData()
    .then(data => console.log(data))
    .catch(error => console.error(error));

14. AJAX简介

AJAX (Asynchronous JavaScript and XML) 允许网页异步与服务器通信，无需刷新页面。

14.1 XMLHttpRequest

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);

xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.error("请求失败: " + xhr.status);
    }
};

xhr.send();

14.2 Fetch API (ES6)

fetch("https://api.example.com/data")
    .then(response => {
        if (!response.ok) {
            throw new Error("网络响应不正常");
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error("请求失败:", error));

14.3 async/await (ES2017)

async function fetchData() {
    try {
        let response = await fetch("https://api.example.com/data");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("请求失败:", error);
    }
}

fetchData();

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

网页制作

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

网页制作

登录后参与评论

0 条评论

热度

最简洁的JavaScript教程

最简洁的JavaScript教程

JavaScript 基础教程

1. JavaScript简介

2. 如何使用JavaScript

2.1 内部JavaScript

2.2 外部JavaScript

2.3 行内JavaScript

3. 变量与数据类型

3.1 变量声明

3.2 数据类型

4. 运算符

4.1 算术运算符

4.2 比较运算符

4.3 逻辑运算符

5. 条件语句

5.1 if语句

5.2 switch语句

5.3 三元运算符

6. 循环

6.1 for循环

6.2 while循环

6.3 do...while循环

6.4 for...in循环

6.5 for...of循环 (ES6)

7. 函数

7.1 函数声明

7.2 函数表达式

7.3 箭头函数 (ES6)

7.4 默认参数 (ES6)

8. 对象

8.1 对象创建

8.2 访问属性

8.3 构造函数

8.4 ES6类

9. 数组

9.1 创建数组

9.2 访问元素

9.3 常用方法

10. DOM简介

DOM节点类型

11. DOM操作

11.1 选择元素

11.2 修改元素

11.3 创建和添加元素

11.4 删除元素

12. 事件处理

12.1 添加事件监听器

12.2 常见事件

12.3 事件对象

13. ES6新特性

13.1 let和const

13.2 模板字符串

13.3 解构赋值

13.4 扩展运算符

13.5 Promise

14. AJAX简介

14.1 XMLHttpRequest

14.2 Fetch API (ES6)

14.3 async/await (ES2017)

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐