☕ JS 入门笔记

目录

• JavaScript简介
  • JS、HTML和CSS的关系：
  • JS是由以下三个部分组成：
  • 常见的 JavaScript 引擎有：
  • JavaScript 具有以下特点：
    • 1) 解释型脚本语言
    • 2) 面向对象
    • 3) 弱类型
    • 4) 动态性
    • 5) 跨平台
• JavaScript 基础
  • 变量
  • let 和 const 关键字
• 数据类型
  • 基本数据类型
  • 引用数据类型
  • 运算符
  • 输出
  • 函数
• 事件
  • 事件绑定
  • 事件示例
    • 1) onmouseover 事件
    • 2) onmouseout 事件
    • 3) onkeydown 事件
• JS对象
  • Number对象
  • Array 对象中的属性
• JS DOM
  • Document 对象
  • Element对象
  • JS attributes对象
• JS BOM
  • navigator 对象
  • location对象
  • history对象
• JS 定时器
  • setTimeout()用法
  • setInterval() 函数的语法
  • JS 取消定时器
• JS 表单验证
  • 必填字段验证
  • 数据格式验证
• JS 动画
• JS 闭包
• JS 解析JSON
  • 解析Json数据
  • 将数据转换为Json
• JS Cookie
  • JS 设置/获取Cookie
  • null

JavaScript简介

JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。

JS、HTML和CSS的关系：

• HTML 用来定义网页的内容，例如标题、正文、图像等；
• CSS 用来控制网页的外观，例如颜色、字体、背景等；
• JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中

JS是由以下三个部分组成：

• 核心（ECMAScript）：提供语言的语法和基本对象；
• 文档对象模型（DOM）：提供处理网页内容的方法和接口；
• 浏览器对象模型（BOM）：提供与浏览器进行交互的方法和接口。

常见的 JavaScript 引擎有：

• V8：Chrome 和 Opera 中的 JavaScript 引擎；
• SpiderMonkey：Firefox 中的 JavaScript 引擎；
• Chakra：IE 中的 JavaScript 引擎；
• ChakraCore：Microsoft Edge 中的 JavaScript 引擎；
• SquirrelFish：Safari 中的 JavaScript 引擎。

JavaScript 具有以下特点：

1) 解释型脚本语言

JavaScript 是一种解释型脚本语言，代码不需要编译，可以直接运行。

2) 面向对象

JavaScript 是一种面向对象语言，使用 JavaScript 不仅可以创建对象，也能操作使用已有的对象。

3) 弱类型

JavaScript 是一种弱类型的编程语言，对使用的数据类型没有严格的要求，可以将一个变量初始化为任意类型，也可以随时改变这个变量的类型。

4) 动态性

JavaScript 是一种采用事件驱动的脚本语言，它不需要借助 Web 服务器就可以对用户的输入做出响应，例如我们在访问一个网页时，通过鼠标在网页中进行点击或滚动窗口时，通过 JavaScript 可以直接对这些事件做出响应。

5) 跨平台

JavaScript 不依赖操作系统，在浏览器中就可以运行。因此一个 JavaScript 脚本在编写完成后可以在任意系统上运行，只需要系统上的浏览器支持 JavaScript 即可。

Node.js 是一个 JavaScript 运行时，它让 JavaScript 脱离了浏览器环境，可以直接在计算机上运行，极大地拓展了 JavaScript 用途。

JavaScript 基础

变量

• 定义变量

  var str;  //用来存储字符串
  var age;  //用来存储年龄
  var prePage;  //用来存储上一页
  var a, b, c;    // 同时声明多个变量
  

• 变量赋值

  var num;    // 定义一个变量 num
  num = 1;
  
  var num = 1;                // 定义一个变量 num 并将其赋值为 1
  var a = 2, b = 3, c = 4;    // 同时定义 a、b、c 三个变量并分别赋值为 2、3、4
  
   // 为了让代码看起来更工整，上一行代码也可以写成这样
  var a = 2,              
      b = 3,
      c = 4;
  

• 变量提升：JS在预编译期会先预处理声明的变量，但是变量的赋值操作发生在执行期，而不是预编译期

  document.write(str); //显示undefined
  str = http://c.biancheng.net/js/;
  document.write(str); //显示 http://c.biancheng.net/js/
  var str;
  

  JS引擎的解析方式是：先解析代码，获取所有被声明的变量，然后再一行一行地运行。 这样，所有声明的变量都会被提升到代码的头部，这就叫作变量提升（Hoisting）.

let 和 const 关键字

• let 关键字声明的变量只在其所在的代码块中有效（类似于局部变量），并且在这个代码块中，同名的变量不能重复声明；

• const 关键字的功能和 let 相同，但使用 const 关键字定义的为常量；

  let name = "小明";      // 声明一个变量 name 并赋值为“小明”
  let age  = 11;          // 声明一个变量 age
  let age  = 13;          // 报错：变量 age 不能重复定义
  
  const PI = 3.1415       // 声明一个常量 PI，并赋值为 3.1415
  console.log(PI)         // 在控制台打印 PI
  

数据类型

JS 中的数据类型可以分为两种类型：

• 基本数据类型（值类型）：字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol；

• 引用数据类型：对象（Object）、数组（Array）、函数（Function）。

• typeof 操作符：获取变量的数据类型

  var x = 1;
  typeof x;       // 获取变量 x 的数据类型
  typeof(x);      // 获取变量 x 的数据类型
  

1. Symbol 是 ECMAScript6 中引入的一种新的数据类型，表示独一无二的值。

基本数据类型

• String

• Number

  • JS中不区分整数和小数（浮点数），统一使用 Number 类型表示。
  • 特殊的值：
    • Infinity：用来表示正无穷大的数值，一般指大于 1.7976931348623157e+308 的数；
    • -Infinity：用来表示负无穷大的数值，一般指小于 5e-324 的数；
    • NaN：即非数值（Not a Number 的缩写），用来表示无效或未定义的数学运算结构，例如 0 除以 0

• Boolean

• Null

  • Null 其实使用属于 Object（对象）的一个特殊值

• Undefined

  Undefined 也是一个只有一个值的特殊数据类型，表示未定义。

  var num;
  console.log(num);  // undefined
  

• Symbol

  var str = "123";
  var sym1 = Symbol(str);
  var sym2 = Symbol(str);
  console.log(sym1 == sym2);  // false 
  

引用数据类型

• Object

  JS 的对象（Object）类型是一组由键、值组成的无序集合：

  格式：{k1:v1, k2:v2,..., kn:vn}

  var person = {
      name: 'Bob',
      age: 20,
      tags: ['js', 'web', 'mobile'],
      city: 'Beijing',
      hasCar: true,
      zipcode: null
  };
  console.log(person.name);       // 输出 Bob
  console.log(person.age);        // 输出 20
  

• Array

  var arr = [1, 2, 3, 'hello', true, null];
  var arr2 = new Array(1,2,3,4);
  

• Function

  函数（Function）是一段具有特定功能的代码块，通过函数名调用运行。

  function sayHello(name){
      return "Hello, " + name;
  }
  var res = sayHello("Peter");
  console.log(res);  // 输出 Hello, Peter
  

运算符

• 比较运算符

  ===	全等	x === y 表示如果 x 等于 y，并且 x 和 y 的类型也相同，则为真
  !==	不全等	x !== y 表示如果 x 不等于 y，或者 x 和 y 的类型不同，则为真

  var a = 1;
  var b = '1';
  a==b; // true
  a===b; // false  类型不同
  

输出

1. 使用 alert() 函数来弹出提示框；
2. 使用 confirm() 函数来弹出一个对话框；
3. 使用 document.write() 方法将内容写入到 HTML 文档中；
4. 使用 innerHTML 将内容写入到 HTML 标签中；
5. 使用 console.log() 在浏览器的控制台输出内容。

函数

以下两个函数等价：

// 函数声明
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}

// 函数表达式
var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};

事件

JS 事件（event）是当用户与网页进行交互时发生的事情。

事件绑定

事件只有与 HTML 元素绑定之后才能被触发。

• 通过【HTML 事件属性】来直接绑定事件处理程序

  <html>
  ...
  	<button type="button" onclick="myBtn">Button</button>
  	<script>
      	function myBtn() {
          	alert("hello");
      }    
      </script>
  ...
  </html>
  

• 通过JS内置函数来为指定元素绑定事件处理程序

  <html>
  ...
  	<button type="button" id="myBtn">Button</button>
  	<script>
      	function sayHello() {
          	alert("hello");
      	}    
  		document.getElementById("myBtn").onclick=sayHello;
      </script>
  ...
  </html>
  

  事件示例

  一般情况下，事件可以分为四大类——鼠标事件、键盘事件、表单事件和窗口事件，另外还有一些其它事件。

  1) onmouseover 事件

  onmouseover 事件就是指当用户鼠标指针移动到元素上时触发的事件。

  <button type="button" onmouseover="alert('您的鼠标已经移动到了该按钮上');">请将鼠标移动至此处</button><br>
  
  <a href="#" onmouseover="myEvent()">请将鼠标移动至此处</a>
  <script>
          function myEvent() {
              alert('您的鼠标已经移动到了该链接上');
          }
  </script>
  

  2) onmouseout 事件

  onmouseout 事件会在鼠标从元素上离开时触发.

  <div style="width: 350px; height: 200px; border:1px solid black" id="myBox"></div>
  <script>
      function myEvent() {
      alert('您的鼠标已经离开指定元素');
  }
  document.getElementById("myBox").onmouseout = myEvent;
  </script>
  

  3) onkeydown 事件

  onkeydown 事件是指当用户按下键盘上的某个按键时触发的事件。

  <input type="text" onkeydown="myEvent()">
  <script>
      function myEvent() {
      alert("您按下了键盘上的某个按钮");
  }
  </script>
  

JS对象

Number对象

var myNum = new Number(value);  // 创建新对象
var myNum = Number(value);  // 转换

Array 对象中的属性

属性	描述
constructor	返回创建数组对象的原型函数
length	设置或返回数组中元素的个数
prototype	通过该属性您可以向对象中添加属性和方法

var cars = new Array("saab", "volvo", "bmw");
Array.prototype.name = null;
cars.name = "JS";

JS DOM

文档对象模型（Document Object Model，简称 DOM），是一种与平台和语言无关的模型，用来表示 HTML 或 XML 文档。文档对象模型中定义了文档的逻辑结构，以及程序访问和操作文档的方式。

当网页加载时，浏览器就会自动创建当前页面的文档对象模型（DOM）。在 DOM 中，文档的所有部分（例如元素、属性、文本等）都会被组织成一个逻辑树结构（类似于族谱），树中每一个分支的终点称为一个节点，每个节点都是一个对象，如下图所示：

Document 对象

当浏览器加载一个 HTML 文档时，会创建一个 Document 对象，Document 对象是 DOM 树中所有节点的根节点。通过 Document 对象我们可以访问 HTML 文档中的所有元素。

提示：Document 对象是 Window 对象的一部分，所以可以通过 window.document 来访问 Document 对象。

Element对象

逻辑树的每一个分支的终点称为一个节点，每个节点都包含一个对象，这个对象就是 Element 对象

使用 Document 对象中提供的方法（例如 getElementsByTagName()、getElementById()、getElementsByClassName() 等）可以得到 Element 对象。

JS attributes对象

元素属性是指在 HTML 元素的开始标签中用来控制标签行为或提供标签信息的特殊词语。

属性 / 方法	描述
attributes.isId	如果属性是 ID 类型，则返回 true，否则返回 false
attributes.name	返回属性名称
attributes.value	设置或者返回属性的值
attributes.specified	如果定义了指定属性，则返回 true，否则返回 false
nodemap.getNamedItem()	从节点列表中返回的指定属性节点
nodemap.item()	返回节点列表中处于指定索引号的节点
nodemap.length	返回节点列表的节点数目
nodemap.removeNamedItem()	删除指定属性节点
nodemap.setNamedItem()	设置指定属性节点（通过名称）

JS BOM

浏览器对象模型（Browser Object Model，简称 BOM）是 JavaScript 的组成部分之一，BOM 赋予了 JavaScript 程序与浏览器交互的能力。

window 对象是 BOM 的核心，用来表示当前浏览器窗口，其中提供了一系列用来操作或访问浏览器的方法和属性。另外，JavaScript 中的所有全局对象、函数以及变量也都属于 window 对象，甚至我们前面介绍的 document 对象也属于 window 对象。

注意：如果 HTML 文档中包含框架（ 或