Javascript入门

JS基础

JS 速查文档

如果速查文档上没有，可以查看讲解文档。

JS输出

// 方式1
 console.log()	// F12 来激活浏览器控制台
// 方式2
 innerHTML	// 填充元素
// 方式3
 window.alert()	// 弹窗显示
// 方式4
 document.write()	// 测试使用

JS 数据类型

typeof "Bill"              // 返回 "string"
typeof 3.14                // 返回 "number"
typeof true                // 返回 "boolean"
typeof false               // 返回 "boolean"
typeof x                   // 返回 "undefined" (假如 x 没有值)

typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" (并非 "array"，参见下面的注释)
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

JS 函数

// 函数自调用
(function () {
  document.getElementById("demo").innerHTML = "Hello! I called myself";
})();

function myFunction1(a, b) {
  return arguments.length;	// 返回函数参数的个数
}

function myFunction2(a, b) {
  return a * b;
}
// "demo"里填入：function myFunction(a, b) { return a * b; }
document.getElementById("demo").innerHTML = myFunction2.toString();

// 闭包

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器目前是 3 

JS 对象

在 JavaScript 中，几乎“所有事物”都是对象。所有 JavaScript 值，除了原始值，都是对象。如果您理解了对象，就理解了 JavaScript。

• 布尔是对象（如果用 new 关键词定义）
• 数字是对象（如果用 new 关键词定义）
• 字符串是对象（如果用 new 关键词定义）
• 日期永远都是对象（Date）
• 算术永远都是对象（Math）
• 正则表达式永远都是对象（RegExp）
• 数组永远都是对象（Array）
• 函数永远都是对象
• 对象永远都是对象

JavaScript 定义了 5 种原始数据类型：string，number，boolean，null，undefined。

// Getter 和 Setter

// Create an object:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {	// Getter
  	return this.language;
  },
  set lang(value) {	// Setter
    this.language = value;
  }
};
// 使用 set 设置属性：
person.lang = "zh";
// 使用 Getter 显示对象的数据：
document.getElementById("demo").innerHTML = person.lang;

JS 事件

JS 数组

数组常用方法查文档

数组排序如下图示例。

对象数组排序如下图示例。

JS 数组迭代：数组迭代方法对每个数组项进行操作。

JS 作用域

JavaScript 变量的有效期始于其被创建时。局部变量会在函数完成时被删除。全局变量会在您关闭页面是被删除。

// 此处的代码能够使用 carName 变量

function myFunction() {
    carName = "porsche";	// 为尚未声明的变量赋值，此变量会自动成为全局变量。
}

var carName = "porsche";	// 所有全局变量均属于 window 对象。

// 此处的代码能够使用 window.carName

/* 
   提升（Hoisting）是 JavaScript 将声明移至顶部的默认行为，
   用 let 或 const 声明的变量和常量不会被提升！
*/

x = 5; // 把 5 赋值给 x

document.getElementById("demo").innerHTML = x; // 查找元素

var x; // Declare x，会被提升到顶部

严格模式下，无法使用未声明的变量，具体点击查看。

JS let

/*
	ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。
	这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。
	在 ES2015 之前，JavaScript 只有两种类型的作用域：全局作用域和函数作用域。
*/

{ 
  var x = 10; 
}
// 此处可以使用 x

{ 
  let y = 10;
}
// 此处不可以使用 y

// 重新命名变量

var x = 10;
// 此处 x 为 10
{ 
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6


var y = 10;
// 此处 y 为 10
{ 
  let y = 6;
  // 此处 y 为 6
}
// 此处 y 为 10

// 循环作用域

var i = 7;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
// 此处，i 为 10

let j = 7;
for (let j = 0; j < 10; j++) {
  // 一些语句
}
// 此处 j 为 7

var carName = "porsche";
// 此处的代码可使用 window.carName

let carName2 = "porsche";
// 此处的代码不可使用 window.carName2，let 关键词定义的全局变量不属于 window 对象

// 相同的作用域，不能同时用 var 和 let 声明同名变量
var x = 10;       // 允许
let x = 6;       // 不允许

{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}

// 相同的作用域，不能同时用 var 和 let 声明同名变量
let x = 10;       // 允许
let x = 6;       // 不允许

{
  let x = 10;   // 允许
  let x = 6;   // 不允许
}

// 相同的作用域，不能同时用 var 和 let 声明同名变量
let x = 10;       // 允许
var x = 6;       // 不允许

{
  let x = 10;   // 允许
  var x = 6;   // 不允许
}

// 在此处，您不可以使用 carName，通过 let 定义的变量不会被提升到顶端。
let carName;

JS const

/*
	ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。
	通过 const 定义的变量与 let 变量类似，但不能重新赋值且必须声明时就赋值。
*/
const PI = 3.141592653589793;

// 可以更改常量对象的属性，但无法重新为常量对象赋值。

// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};

// 您可以更改属性：
car.color = "White";

/*
	在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const
*/
var x = 2;         // 允许
const x = 2;       // 不允许
{
  let x = 2;     // 允许
  const x = 2;   // 不允许
}

// 在同一作用域或块中，为已有的 const 变量重新声明声明或赋值是不允许的。
const x = 2;       // 允许
const x = 3;       // 不允许
x = 3;             // 不允许
var x = 3;         // 不允许
let x = 3;         // 不允许

{
  const x = 2;   // 允许
  const x = 3;   // 不允许
  x = 3;         // 不允许
  var x = 3;     // 不允许
  let x = 3;     // 不允许
}

// 通过 const 定义的变量不会被提升到顶端。
carName = "Volvo";    // 您不可以在此处使用 carName
const carName = "Volvo";

JS AJAX

AJAX（Asynchronous JavaScript And XML） 不刷新页面更新网页，在页面加载后从服务器发送、请求、接收数据。

XMLHttpRequest 对象

Ajax 的核心是浏览器内建的 XMLHttpRequest 对象。XMLHttpRequest 对象用于同服务器交换数据。（JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法。）

AJAX 请求和响应

注释：onreadystatechange 被触发五次（0-4），每次 readyState 都发生变化。

JS JSON

JSON: JavaScript Object Notation（JavaScript 对象标记法）。JSON 格式仅仅是文本，它能够轻松地在服务器浏览器之间传输，并用作任何编程语言的数据格式。

// Javascript 对象转成 JSON
var myObj = { name:"Bill Gates",  age:62, city:"Seattle" };
var myJSON =  JSON.stringify(myObj);

// JSON 转成 Javascript 对象
var myJSON = '{ "name":"Bill Gates",  "age":62, "city":"Seattle" }';
var myObj =  JSON.parse(myJSON);

/* 
在 JSON 中，键必须是字符串，由双引号包围.
在 JSON 中，值必须是字符串，数字，对象（JSON 对象），数组，布尔或null。
（在 JavaScript 中，以上所列均可为值，外加函数，日期和undefined）
*/
{ "name":"Bill Gates" }

jQuery

jQuery 是一个 JavaScript 库。具体点击速查。

Bootstrap

参考资料

[1] https://www.w3school.com.cn/js/index.asp