1. 基础入门
目标:了解JavaScript基础,如变量、数据类型、操作符、基本语句。
内容:
- 变量:就像数学中的x、y,但它们可以存储几乎所有东西。 let name = ‘CodeMaster’;
- 数据类型:字符串、数字、布尔值,以及更奇怪的undefined和null。 let age = 21;
- 操作符:加减乘除,不仅限于数学,还有字符串拼接哦! let fullName = firstName + ’ ’ + lastName;
- 基本语句:条件判断和循环。就像生活中的选择和重复日常。
- 示例代码:
Copy code
let mood = 'happy';
if (mood === 'happy') {
console.log('JavaScript makes me happy!');
} else {
console.log('I need to code more JavaScript.');
}
- 运行方式:在浏览器的控制台中运行或使用任何在线JavaScript编辑器。
2. 深入探索
目标:了解函数、对象和数组。
内容:
- 函数:就像一个小巧的魔术盒,你给它一些东西(参数),它就变出结果来。
- 对象:将现实世界的事物数字化,属性和方法一应俱全。
- 数组:一列火车,装载着数据,按顺序排列。
- 示例代码:
function greet(name) {
return 'Hello, ' + name + '!';
}
console.log(greet('Alice'));
let person = { name: 'Bob', age: 30 };
console.log(person.name);
let colors = ['red', 'green', 'blue'];
console.log(colors[0]);
3. 浏览器与DOM操作
目标:了解如何让网页动起来。
内容:
- 文档对象模型(DOM):网页是一本书,DOM是目录,通过它你可以找到每一页、每一行。
- 事件监听:网页上的一切行为都可以被监听和回应,就像超级侦探。
- 示例代码:
document.getElementById('myButton').addEventListener('click', function() {
alert('Button clicked!');
});
- 运行方式:在HTML文件中加入此JavaScript代码并在浏览器中打开。
4. 现代JavaScript
目标:ES6及更高版本的特性。
内容:
- 箭头函数:更短的函数写法。
- Promises和异步:处理那些需要等待的事情。
- 模块:把大代码分成易管理的小块。
- 示例代码:
const add = (a, b) => a + b;
console.log(add(5, 3));
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
笑一笑,学一学
记住,编程不只是写代码,还要享受过程。