JavaScript 从现在开始 7 天

欢迎来到 JavaScript 的学习之旅！在接下来的七天里，我们将带您从 JavaScript 的基础到进阶，并将通过代码示例和实践项目来帮助您更好地理解和应用 JavaScript。

Day 1: JavaScript 入门

如果您还不了解 JavaScript，那么在第一天，我们会为您介绍它的基本概念和语法。

变量和数据类型

在 JavaScript 中，我们可以使用 var、let 和 const 来声明变量。JavaScript 有 7 种基本的数据类型，分别是：number、string、boolean、null、undefined、symbol 和 object。

// 变量声明和数据类型示例
var age = 28;
let name = "Tom";
const PI = 3.14;

console.log(typeof age); // "number"
console.log(typeof name); // "string"
console.log(typeof PI); // "number"

运算符

JavaScript 支持常见的算术、比较、逻辑和位运算符。

// 运算符示例
let a = 10;
let b = 5;
console.log(a + b); // 15
console.log(a > b); // true
console.log(!false); // true

控制流语句

JavaScript 中的控制流语句有：if/else、switch、for、while 等。

// 控制流语句示例
let a = 10;
let b = 5;

if (a > b) {
  console.log("a 大于 b");
} else if (a < b) {
  console.log("a 小于 b");
} else {
  console.log("a 等于 b");
}

Day 2: JavaScript 函数

在第二天，我们将深入了解 JavaScript 函数。

函数申明和表达式

函数可以通过函数申明和函数表达式来定义。

// 函数申明和表达式示例
function add(a, b) {
  return a + b;
}

const subtract = function (a, b) {
  return a - b;
};

console.log(add(1, 2)); // 3
console.log(subtract(3, 2)); // 1

高阶函数

JavaScript 中的函数也可以作为参数和返回值，这就是高阶函数的概念。

// 高阶函数示例
function calculate(a, b, operation) {
  return operation(a, b);
}

const result = calculate(10, 5, function (a, b) {
  return a / b;
});

console.log(result); // 2

箭头函数

在 ES6 中，新增了箭头函数，它是一种更为简洁的函数表达式。

// 箭头函数示例
const multiply = (a, b) => a * b;

console.log(multiply(2, 3)); // 6

Day 3: JavaScript 数组和对象

在第三天，我们将学习 JavaScript 的数组和对象。

数组

JavaScript 中的数组是一组按顺序排列的值，可以使用下标来访问数组中的元素。

// 数组示例
const nums = [1, 2, 3];

console.log(nums[1]); // 2

nums.push(4);
console.log(nums); // [1, 2, 3, 4]

对象

JavaScript 中的对象是一组键值对，可以使用点或方括号来访问对象中的属性。

// 对象示例
const person = {
  name: "Tom",
  age: 28,
};

console.log(person.name); // "Tom"

person.gender = "male";
console.log(person); // { name: "Tom", age: 28, gender: "male" }

Day 4: JavaScript 异步

在第四天，我们将学习 JavaScript 的异步编程。

回调函数

JavaScript 使用回调函数来处理异步操作，回调函数是将函数作为参数传递给其它函数的函数。

// 回调函数示例
function getData(callback) {
  setTimeout(function () {
    const data = [1, 2, 3];
    callback(data);
  }, 1000);
}

getData(function (data) {
  console.log(data); // [1, 2, 3]
});

Promise

在 ES6 中，JavaScript 引入了 Promise 来处理异步编程。

// Promise 示范
function getData() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      const data = [1, 2, 3];
      resolve(data);
    }, 1000);
  });
}

getData().then(function (data) {
  console.log(data); // [1, 2, 3]
});

Async/Await

为了更加优雅地处理异步编程，JavaScript 还引入了 Async/Await。

// Async/Await 示范
async function getData() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      const data = [1, 2, 3];
      resolve(data);
    }, 1000);
  });
}

(async function () {
  const data = await getData();
  console.log(data); // [1, 2, 3]
})();

Day 5: JavaScript DOM 操作

在第五天，我们将学习如何使用 JavaScript 操作 DOM。

获取元素

首先，我们需要获取 HTML 文档中的元素，可以使用 document.getElementById、document.getElementsByClassName、document.getElementsByTagName 等方法。

// 获取元素示例
const div = document.getElementById("myDiv");
const ps = document.getElementsByClassName("myClass");
const inputs = document.getElementsByTagName("input");

操作元素

一旦获取了元素，我们就可以通过它们的属性和方法来修改它们的内容、样式和行为。

// 操作元素示例
div.innerHTML = "<p>Hello World!</p>";
div.style.backgroundColor = "#f1f1f1";
div.onclick = function () {
  alert("Hello World!");
};

创建元素

如果需要创建新的元素，并将其添加到文档中，可以使用 document.createElement 和 element.appendChild 方法。

// 创建元素示例
const p = document.createElement("p");
p.textContent = "Hello World!";
div.appendChild(p);

Day 6: JavaScript AJAX

在第六天，我们将学习如何使用 JavaScript 发送 AJAX 请求。

XMLHttpRequest

使用 XMLHttpRequest 对象来发起 AJAX 请求，并处理服务器返回的数据。

// XMLHttpRequest 示例
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1");
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.response));
  }
};
xhr.send();

Fetch API

在 ES6 中，JavaScript 引入了 Fetch API 来发送 AJAX 请求。

// Fetch API 示例
fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  });

Day 7: JavaScript 实践项目

最后一天，我们将用 JavaScript 实现一个实践项目，比如一个 Todo List 应用程序。

实现 Todo List

通过获取用户输入数据，并使用 JavaScript 操作 DOM，来实现一个简单的 Todo List 应用程序。

<!-- HTML 文件 -->
<div>
  <input id="newTodo" type="text" />
  <button id="addTodo">Add</button>
</div>
<ul id="todoList"></ul>

// JavaScript 文件
const newTodoInput = document.getElementById("newTodo");
const addTodoButton = document.getElementById("addTodo");
const todoList = document.getElementById("todoList");

addTodoButton.onclick = function () {
  const newTodoText = newTodoInput.value;
  const newTodoElement = document.createElement("li");
  newTodoElement.textContent = newTodoText;
  todoList.appendChild(newTodoElement);
  newTodoInput.value = "";
};

感谢您参加我们的 JavaScript 学习之旅，希望您从这七天的学习中受益匪浅！