JS Day|极客笔记

JS Day

1. 介绍

JavaScript（简称JS）是一种广泛应用于Web开发的脚本语言，用于为网页增加动态和交互性。本文将详细讨论JavaScript的各个方面，包括语法、变量、函数、面向对象编程等，并附带示例代码和运行结果。

2. 语法

JavaScript的语法与C语言类似，简单易学。它区分大小写，并使用分号（;）作为语句的结束符。

// 示例代码
var message = "Hello, World!";
console.log(message);

运行结果：

Hello, World!

2.1 变量

在JavaScript中，我们可以使用var关键字声明变量。变量可以存储各种类型的值，如字符串、数字、布尔值等。

// 示例代码
var name = "Alice";
var age = 25;
var isStudent = true;

console.log(name);
console.log(age);
console.log(isStudent);

运行结果：

Alice
25
true

2.2 数据类型

JavaScript有多种内置的数据类型，包括字符串（String）、数字（Number）、布尔值（Boolean）、对象（Object）等。

// 示例代码
var str = "Hello, JavaScript!";
var num = 100;
var flag = true;
var obj = { name: "Alice", age: 25 };

console.log(typeof str);
console.log(typeof num);
console.log(typeof flag);
console.log(typeof obj);

运行结果：

string
number
boolean
object

2.3 运算符

JavaScript支持常见的数学运算符（如加减乘除）、比较运算符（如等于、大于等）、逻辑运算符（如与、或、非）等。

// 示例代码
var x = 10;
var y = 5;

console.log(x + y);
console.log(x > y);
console.log(x === y);
console.log(x && y);

运行结果：

15
true
false
5

3. 函数

在JavaScript中，函数是一种可重复使用的代码块，可以接受参数并返回值。我们可以使用function关键字定义函数。

// 示例代码
function add(a, b) {
  return a + b;
}

console.log(add(2, 3));

运行结果：

3.1 匿名函数

除了使用function关键字定义函数外，还可以使用匿名函数（即没有函数名的函数）。

// 示例代码
var multiply = function(a, b) {
  return a * b;
};

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

运行结果：

3.2 箭头函数

ES6引入了箭头函数的概念，它提供了更简洁的语法形式。

// 示例代码
var sum = (a, b) => a + b;

console.log(sum(2, 3));

运行结果：

4. 对象

JavaScript中的对象是一种复合数据类型，可以存储多个键值对。每个键值对称为对象的属性和值。

// 示例代码
var person = {
  name: "Alice",
  age: 25,
  isStudent: true
};

console.log(person.name);
console.log(person.age);
console.log(person.isStudent);

运行结果：

Alice
25
true

4.1 遍历对象

我们可以使用for...in循环遍历对象的所有属性。

// 示例代码
for (var key in person) {
  console.log(key + ": " + person[key]);
}

运行结果：

name: Alice
age: 25
isStudent: true

5. 控制流

JavaScript提供了多种控制流语句，如条件语句（如if...else）、循环语句（如for、while）、跳转语句（如break、return）等。

// 示例代码
var x = 10;

if (x > 5) {
  console.log("x is greater than 5");
} else if (x < 5) {
  console.log("x is less than 5");
} else {
  console.log("x is equal to 5");
}

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

var j = 0;
while (j < 5) {
  console.log(j);
  j++;
}

运行结果：

x is greater than 5
0
1
2
3
4
0
1
2
3
4

6. 异常处理

JavaScript中的异常处理用于捕获和处理运行时错误。我们可以使用try...catch语句块来捕获异常。

// 示例代码
try {
  console.log(undefinedVariable);
} catch (error) {
  console.log("An error occurred: " + error.message);
}

运行结果：

An error occurred: undefinedVariable is not defined

7. 模块化

JavaScript通过ES6模块化引入了模块化的概念，使得我们可以将代码拆分为多个模块，提高代码的可维护性和复用性。

7.1 导出模块

// 示例代码：module.js
export function square(x) {
  return x * x;
}

export const PI = 3.14159;

7.2 导入模块

// 示例代码：main.js
import { square, PI } from './module.js';

console.log(square(5));
console.log(PI);

运行结果：

25
3.14159

8. DOM操控

JavaScript可以通过DOM（文档对象模型）来操控HTML页面的元素。我们可以使用JavaScript动态改变页面内容、样式和结构。

// 示例代码
var element = document.getElementById("myElement");
element.innerHTML = "New Content";
element.style.color = "red";

9. AJAX和异步编程

JavaScript通过AJAX（异步JavaScript和XML）支持异步编程，可以在网页上与服务器交换数据而无需刷新整个页面。

// 示例代码
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

10. 浏览器API

JavaScript在浏览器环境中还提供了丰富的API，如操作浏览器历史记录、操作Cookie、操作本地存储等。

// 示例代码
console.log(window.location.href);
console.log(document.cookie);
localStorage.setItem("name", "Alice");
console.log(localStorage.getItem("name"));

运行结果：