JavaScript入门——笔记用

**JavaScript 入门笔记**

JavaScript 是一种广泛使用的编程语言，主要用于客户端脚本。它可以在网页中创建交互式效果、动画和游戏等。以下是 JavaScript 的入门笔记。

###1. 变量和数据类型在 JavaScript 中，变量使用 `let` 或 `var` 关键字声明。例如：

javascript// 声明一个变量并赋值let name = 'John';
console.log(name); // 输出：John// 使用 var 关键字声明一个变量var age =30;
console.log(age); // 输出：30

JavaScript 有以下几种基本数据类型：

* **数字**（Number）：整数或小数。
* **字符串**（String）：一串字符，使用引号括起来。
* **布尔值**（Boolean）：true 或 false。
* **未定义**（Undefined）：一个特殊的值，表示变量尚未赋值。
* **Null**:一个特殊的值，表示空或不存在。

###2. 运算符JavaScript 支持以下几种运算符：

* 算术运算符：`+`、`-`、`*`、`/` 等。
* 关系运算符：`==`、`!=`、`>`、`<` 等。
* 逻辑运算符：`&&`、`||`、`!` 等。

例如：

javascript// 算术运算符示例let a =5;
let b =3;
console.log(a + b); // 输出：8console.log(a - b); // 输出：2// 关系运算符示例console.log(5 ==5); // 输出：trueconsole.log(5 !=5); // 输出：false

###3. 控制结构JavaScript 支持以下几种控制结构：

* **if**语句：用于根据条件执行不同的代码块。
* **switch**语句：用于根据变量的值执行不同的代码块。
* **for**循环：用于重复执行某段代码。
* **while**循环：用于重复执行某段代码，直到条件不成立。

例如：

javascript// if语句示例let age =25;
if (age >=18) {
 console.log('你是成年人！');
} else {
 console.log('你还不是成年人！');
}

// switch语句示例let day = '星期三';
switch (day) {
 case '星期一':
 console.log('今天是星期一！');
 break;
 case '星期二':
 console.log('今天是星期二！');
 break;
 default:
 console.log('今天不是星期一或星期二！');
}

###4. 函数JavaScript 支持函数的定义和调用。函数可以接受参数，并返回值。

例如：

javascript// 定义一个函数function greet(name) {
 console.log(`Hello, ${name}！`);
}

// 调用函数greet('John'); // 输出：Hello, John！

###5. 数组JavaScript 支持数组的定义和操作。数组可以存储多个值。

例如：

javascript// 定义一个数组let colors = ['红色', '蓝色', '绿色'];
console.log(colors); // 输出：["红色", "蓝色", "绿色"]

// 添加元素到数组中colors.push('黄色');
console.log(colors); // 输出：["红色", "蓝色", "绿色", "黄色"]

###6. 对象JavaScript 支持对象的定义和操作。对象可以存储多个键值对。

例如：

javascript// 定义一个对象let person = {
 name: 'John',
 age:25,
};
console.log(person); // 输出：{name: "John", age:25}

// 添加属性到对象中person.address = '北京';
console.log(person); // 输出：{name: "John", age:25, address: "北京"}

###7. DOMJavaScript 支持对 HTML 文档的操作。DOM（Document Object Model）是 HTML 文档的抽象表示。

例如：

javascript// 获取元素let element = document.getElementById('myElement');
console.log(element); // 输出：<div id="myElement">Hello, World!</div>

// 添加元素到 DOM 中let newElement = document.createElement('p');
newElement.textContent = '这是一个新元素！';
document.body.appendChild(newElement);

###8.事件JavaScript 支持对 HTML 元素的事件监听。事件可以触发函数的执行。

例如：

javascript// 添加事件监听器let button = document.getElementById('myButton');
button.addEventListener('click', function() {
 console.log('按钮被点击！');
});

###9. 异步编程JavaScript 支持异步编程。异步编程可以提高程序的性能和响应速度。

例如：

javascript// 使用 Promise 实现异步编程function fetchData(url) {
 return new Promise(function(resolve, reject) {
 // 模拟网络请求 setTimeout(function() {
 resolve({ data: 'Hello, World!' });
 },2000);
 });
}

fetchData(' /> .then(function(data) {
 console.log(data); // 输出：{data: "Hello, World!"}
 })
 .catch(function(error) {
 console.error(error); // 输出：Error });

###10. ES6+

JavaScript 支持 ES6+ 的特性。ES6+ 提供了许多新的语法和功能。

例如：

javascript// 使用 let 和 const 关键字定义变量let name = 'John';
const age =25;

// 使用 class 定义类class Person {
 constructor(name, age) {
 this.name = name;
 this.age = age;
 }
}

// 使用 async/await 实现异步编程async function fetchData(url) {
 try {
 const response = await fetch(url);
 return response.json();
 } catch (error) {
 console.error(error); // 输出：Error }
}

以上就是 JavaScript 的入门笔记。希望这些内容可以帮助你快速上手 JavaScript。