【JavaScript教科书】JavaScript基础之ECMAScript（学习总结）

阳光穿透心脏的1/2处 2023-03-13 06:11 13阅读 0赞

## 文章目录  @\[toc\]  一、JavaScript介绍  1.1 什么是JavaScript？  1.2 JavaScript的发展历程  1.3 JavaScript的组成部分  1.4 JavaScript的特性  1.5 JavaScript的特点  1.6 JavaScript的用途  二、ECMAScript基础  2.1 ECMAScript与JSP或HTML的结合方式  2.1.1 内部结合方式  2.1.2 外部结合方式  2.2 ECMAScript的注释  2.2.1 单行注释  2.2.2 多行注释  2.3 ECMAScript数据类型  2.4 ECMAScript变量  2.4.1 定义变量的语法  2.4.1 强、弱类型语言  2.4.2 ECMAScript变量的定义  2.5 ECMAScript运算符  2.5.1 算数运算符  2.5.2 赋值运算符  2.5.3 JavaScript 字符串运算符  字符串拼接  字符串级联  字符串与数字相加  2.5.4 比较运算符  2.5.5 逻辑运算符  2.5.6 位运算符  2.5.7 类型运算符  2.6 ECMAScript常用语句  2.6.1 分支结构  if else 语句  switch 语句  2.6.2 循环结构  do-while 语句  while 语句  for 语句  break 语句  continue 语句  增强for循环  2.6.3 void  2.7 ECMAScript常用对象  2.7.1 Function对象  2.7.2 Array数组对象  2.7.3 Date对象  2.7.4 RegExp 对象  2.7.5 全局对象  三、ECMAScript函数  3.1 函数的概念  3.2 函数的定义  3.3 匿名函数  3.4 闭包  3.4.1 全局/局部变量  3.4.2 变量的生命周期  3.4.3 内嵌函数  3.4.4 闭包  3.5 回调  3.6 系统函数  3.6.1 弹窗函数  提示框alert()  确认框confirm()  输入框弹窗prompt()  3.6.2 其他常用系统函数  四、事件  4.1 什么是事件？  4.2 事件语法  4.2 常用事件  五、字符串  5.1 字符串概念  5.2 创建String对象的语法  5.3 String对象属性  5.4 String对象方法 ##

### 一、JavaScript介绍 ###

#### 1.1 什么是JavaScript？ ####

> `JavaScript（简称“JS”）` 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

#### 1.2 JavaScript的发展历程 ####

> 它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型（DOM Document Object Model），浏览器对象模型(BOM Browser Object Model)。
> 
> Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的特性。
> 
> 发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。

#### 1.3 JavaScript的组成部分 ####

> `ECMAScript`，描述了该语言的语法和基本对象
> 
> `文档对象模型（DOM）`，描述处理网页内容的方法和接口
> 
> `浏览器对象模型（BOM）`，描述与浏览器进行交互的方法和接口

#### 1.4 JavaScript的特性 ####

> JavaScript具有的特性有脚本语言、基于对象、简单、动态性、跨平台

#### 1.5 JavaScript的特点 ####

> `JavaScript`是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
> 
> 1.  是一种解释性脚本语言（代码不进行预编译）
> 2.  主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为
> 3.  可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离
> 4.  跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）
> 5.  Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理
> 6.  可以实现web页面的人机交互

#### 1.6 JavaScript的用途 ####

> 有些用途因知识我们目前没有学习到，先做了解即可！
> 
>  *  嵌入动态文本于HTML页面
>  *  对浏览器事件做出响应
>  *  读写HTML元素
>  *  在数据被提交到服务器之前验证数据
>  *  检测访客的浏览器信息
>  *  控制cookies，包括创建和修改等
>  *  基于Node.js技术进行服务器端编程

### 二、ECMAScript基础 ###

#### 2.1 ECMAScript与JSP或HTML的结合方式 ####

> HTML和JSP嵌入ECMAScript方式和作用相同，这里默认演示嵌入JSP！

##### 2.1.1 内部结合方式 #####

> 将<script>的一对标签写在一对<head>标签内，然后在写好的标签内编写JS代码，如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>ECMAScript和页面结合之内部结合</title>
        <%--js脚本内部结合--%>
        <script>
            alert("alert hello world");                 //弹出页面窗口提示内容
            document.write("document hello world");     //将内容显示在浏览器中
            console.log("log hello world");             //将内容显示在浏览器F12中的Console中
        </script>
    </head>
    <body>
    </body>
    </html>

##### 2.1.2 外部结合方式 #####

> 在web下创建并命名一个JavaScript文件，再将将<script>的一对标签写在一对<head>标签内，扩展标签属性src并引入JavaScript文件路径，如下：
> 
> **注意：外部结合方式，JS代码的编写工作要写在JavaScript文件中，不允许再在标签内编写JS代码，如果编写了，也不报错。但是JS代码默认无任何效果**

> JavaScript文件，此文件命名为js

alert("alert hello world");                 //弹出页面窗口提示内容
    document.write("document hello world");     //将内容显示在浏览器中
    console.log("log hello world");             //将内容显示在浏览器F12中的Console中

> JSP页面文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>ECMAScript和页面结合之外部结合</title>
        <%--js脚本外部结合--%>
        <script src="${pageContext.request.contextPath}/js.js"></script>
    </head>
    <body>
    </body>
    </html>

#### 2.2 ECMAScript的注释 ####

##### 2.2.1 单行注释 #####

> 单行注释以`//`开头。任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）

var x = 5;      // 声明 x，为其赋值 5
    var y = x + 2;  // 声明 y，为其赋值 x + 2

##### 2.2.2 多行注释 #####

> 多行注释以`/*`开头，以`*/`结尾。任何位于 /\* 和 \*/ 之间的文本都会被 JavaScript 忽略。

/*
    * 声明了x、y
    * 并为x、y分别赋值
    * */
    var x = 5;
    var y = x + 2;

#### 2.3 ECMAScript数据类型 ####

> **数据类型分别有：** 字符串值、数值、布尔值、数组、对象、null、undefined

<table> 
 <thead> 
  <tr> 
   <th>数据类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>number（数值）</td> 
   <td>数值包括整数、小数和NaN（not a number 一个不是数字的数值类型）</td> 
  </tr> 
  <tr> 
   <td>string（字符串值）</td> 
   <td>字符串值可以使用"abc"、‘abc’ （注意：与Java不同，JavaScript没有字符类型）</td> 
  </tr> 
  <tr> 
   <td>boolean（布尔值）</td> 
   <td>布尔值分为true和false</td> 
  </tr> 
  <tr> 
   <td>array（数组）</td> 
   <td>定义数组var names = [“Join”, “Ziph”, “Marry”];</td> 
  </tr> 
  <tr> 
   <td>对象</td> 
   <td><strong>后面的对象类型很多，这里不解释太多，以免把你们混淆</strong></td> 
  </tr> 
  <tr> 
   <td>null（空）</td> 
   <td>一个对象为空的占位符</td> 
  </tr> 
  <tr> 
   <td>undefined（未定义）</td> 
   <td>未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined</td> 
  </tr> 
 </tbody> 
</table>

#### 2.4 ECMAScript变量 ####

##### 2.4.1 定义变量的语法 #####

> 语法：`var 变量名 = 值;`（var代表所有数据类型）

##### 2.4.1 强、弱类型语言 #####

> Java语言是强类型语言，而JavaScript是弱类型语言
> 
>  *  **强类型：** 在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据（简单来说，Java语言定义变量遵循`数据类型 变量名 = 值;`，只能定义指定的类型值；比如：String str = “Ziph”）
>  *  **弱类型：** 在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据（简单来说，JavaScript语言定义变量遵循`var 变量名 = 值;`，var代表多种所有数据类型，它会根据我们定义的值而精确匹配）

##### 2.4.2 ECMAScript变量的定义 #####

> JavaScript 变量是存储数据值的容器

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>ECMAScript变量</title>
    
        <script>
            // var 变量名 = 初始化值;
            // 一个num定义了多个数据类型
            var num = 1;
            console.log(num);
            num = "abc";
            console.log(num);
            num = true;
            console.log(num);
            num = null;
            console.log(num);
            num = undefined;
            console.log(num);
        </script>
    
    </head>
    <body>
    </body>
    </html>

> 是不是可以看见JavaScript中var定义num变量的所有值呢？

![image-20200508205903613][]

#### 2.5 ECMAScript运算符 ####

##### 2.5.1 算数运算符 #####

> 算数运算符用于对数字执行算数运算
> 
> 注意：与Java不用，1/0的运算结果得到的是Infinity；而特殊的0/0的运算结果得到的是NaN

var num1 = 1;
            var num2 = num1++;
            console.log(num1);          //2
            console.log(num2);          //1
    
    		var num3 = 10;
            var num4 = "2";
            console.log(num3 / num4);   //5

##### 2.5.2 赋值运算符 #####

> 赋值运算符向 JavaScript 变量赋值
> 
> **注意：** 加法赋值运算符（+=）向变量添加一个值

var num5 = 1;
            var num6 = 1;
            num5 += num6;
            console.log(num5);		//2

##### 2.5.3 JavaScript 字符串运算符 #####

###### 字符串拼接 ######

> `+`运算符也可用于对字符串进行相加

txt1 = “Ziph ”;
    txt2 = "Good!";
    txt3 = txt1 + txt2;		//Ziph Good!

###### 字符串级联 ######

> `+=`赋值运算符也可用于相加（级联）字符串

txt1 = "Hello ";
    txt1 += "Kitty!"; 		//Hello Kitty!

###### 字符串与数字相加 ######

> 相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串

x = 6 + 9;				//15
    y = "6" + 9;			//69
    z = "Hello" + 6;		//Hello6

##### 2.5.4 比较运算符 #####

<table> 
 <thead> 
  <tr> 
   <th>运算符</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>==</td> 
   <td>等于</td> 
  </tr> 
  <tr> 
   <td>===</td> 
   <td>等值等型</td> 
  </tr> 
  <tr> 
   <td>!=</td> 
   <td>不相等</td> 
  </tr> 
  <tr> 
   <td>!==</td> 
   <td>不等值或不等型</td> 
  </tr> 
  <tr> 
   <td>&gt;</td> 
   <td>大于</td> 
  </tr> 
  <tr> 
   <td>&lt;</td> 
   <td>小于</td> 
  </tr> 
  <tr> 
   <td>&gt;=</td> 
   <td>大于或等于</td> 
  </tr> 
  <tr> 
   <td>&lt;=</td> 
   <td>小于或等于</td> 
  </tr> 
  <tr> 
   <td>?</td> 
   <td>三元运算符</td> 
  </tr> 
 </tbody> 
</table>

var num7 = 10;
            var num8 = "10";
            console.log(num7 == num8);      //true
            console.log(num7 === num8);     //false
    
    		var flag = true;
            console.log(flag ? "为true":"为false");		//为true

##### 2.5.5 逻辑运算符 #####

> **注意：** 在使用逻辑非的时候0、NaN、""、null、undefined都是true，因为他们默认为false

var flag1 = true;
            console.log(!flag1);     	//false
    		var flag2 = false;
            console.log(flag1&&flag2);  //false
            console.log(flag1||flag2);  //true
    
            console.log(!0);         	//true
            console.log(!NaN);       	//true
            console.log(!"");        	//true
            console.log(!null);      	//true
            console.log(!undefined); 	//true

##### 2.5.6 位运算符 #####

> 位运算符处理 32 位数。
> 
> 该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

<table> 
 <thead> 
  <tr> 
   <th>运算符</th> 
   <th>描述</th> 
   <th>例子</th> 
   <th>等同于</th> 
   <th>结果</th> 
   <th>十进制</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&amp;</td> 
   <td>与</td> 
   <td>5 &amp; 1</td> 
   <td>0101 &amp; 0001</td> 
   <td>0001</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>|</td> 
   <td>或</td> 
   <td>5 | 1</td> 
   <td>0101 | 0001</td> 
   <td>0101</td> 
   <td>5</td> 
  </tr> 
  <tr> 
   <td>~</td> 
   <td>非</td> 
   <td>~ 5</td> 
   <td>~0101</td> 
   <td>1010</td> 
   <td>10</td> 
  </tr> 
  <tr> 
   <td>^</td> 
   <td>异或</td> 
   <td>5 ^ 1</td> 
   <td>0101 ^ 0001</td> 
   <td>0100</td> 
   <td>4</td> 
  </tr> 
  <tr> 
   <td>&lt;&lt;</td> 
   <td>零填充左位移</td> 
   <td>5 &lt;&lt; 1</td> 
   <td>0101 &lt;&lt; 1</td> 
   <td>1010</td> 
   <td>10</td> 
  </tr> 
  <tr> 
   <td>&gt;&gt;</td> 
   <td>有符号右位移</td> 
   <td>5 &gt;&gt; 1</td> 
   <td>0101 &gt;&gt; 1</td> 
   <td>0010</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>&gt;&gt;&gt;</td> 
   <td>零填充右位移</td> 
   <td>5 &gt;&gt;&gt; 1</td> 
   <td>0101 &gt;&gt;&gt; 1</td> 
   <td>0010</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

> 上例使用 4 位无符号的例子。但是 JavaScript 使用 32 位有符号数。
> 
> 因此，在 JavaScript 中，~ 5 不会返回 10，而是返回 -6。
> 
> ~00000000000000000000000000000101 将返回 11111111111111111111111111111010。

##### 2.5.7 类型运算符 #####

<table> 
 <thead> 
  <tr> 
   <th>运算符</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>typeof</td> 
   <td>返回变量的类型。</td> 
  </tr> 
  <tr> 
   <td>instanceof</td> 
   <td>返回 true，如果对象是对象类型的实例。</td> 
  </tr> 
 </tbody> 
</table>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>typeof方法</title>
    
        <script>
            var num = 1;
            console.log(typeof(num));       //number
    
            var str = "abc";
            console.log(typeof(str));       //string
    
            var flag = true;
            console.log(typeof(flag));      //boolean
    
            var obj = null;
            console.log(typeof(obj));       //Object
    
            var num1 ;
            console.log(typeof(num1));      //undefined
    
            var num2 = NaN;
            console.log(typeof num2);       //number
    
            /*
            * num3是一个数值类型
            * num4是一个字符串类型
            * num5获取的时num3与num4的运算结果
            * 因为"!"不是一个数值，两两运算的结果是一个不是数值的数值类型
            * 所以得出NaN的数据类型
            * */
            var num3 = 1;
            var num4 = "!";
            var num5 = num3 / num4;
            console.log(num5)               //NaN
        </script>
    </head>
    <body>
    </body>
    </html>

![format_png][]

![format_png 1][]

#### 2.6 ECMAScript常用语句 ####

##### 2.6.1 分支结构 #####

###### if else 语句 ######

> if 语句是 ECMAScript 中最常用的语句之一
> 
> 注意：只要if语句的括号内有只存在，默认为true。如果为null或undefined则为false

if (i > 30)
      {
        alert("大于 30");}
    else
      {
        alert("小于等于 30");}

###### switch 语句 ######

> switch 语句是 if 语句的兄弟语句。可以用 switch 语句为表达式提供一系列的情况（case）。

switch (i) {
        
      case 20: alert("20");
        break;
      case 30: alert("30");
        break;
      case 40: alert("40");
        break;
      default: alert("other");
    }

##### 2.6.2 循环结构 #####

###### do-while 语句 ######

> do-while 语句是后测试循环，即退出条件在执行循环内部的代码之后计算。这意味着在计算表达式之前，至少会执行循环主体一次。

var i = 0;
    do {
        i += 2;} while (i < 10);

###### while 语句 ######

> while 语句是前测试循环。这意味着退出条件是在执行循环内部的代码之前计算的。因此，循环主体可能根本不被执行。

var i = 0;
    while (i < 10) {
        
      i += 2;
    }

###### for 语句 ######

> for 语句是前测试循环，而且在进入循环之前，能够初始化变量，并定义循环后要执行的代码。

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

###### break 语句 ######

> break 语句可以立即退出循环，阻止再次反复执行任何代码。

var iNum = 0;
    
    for (var i=1; i<10; i++) {
        
      if (i % 5 == 0) {
        
        break;
      }
      iNum++;
    }
    alert(iNum);	//输出 "4"

###### continue 语句 ######

> continue 语句只是退出当前循环，根据控制表达式还允许继续进行下一次循环。

var iNum = 0;
    
    for (var i=1; i<10; i++) {
        
      if (i % 5 == 0) {
        
        continue;
      }
      iNum++;
    }
    alert(iNum);	//输出 "8"

###### 增强for循环 ######

> for(var i in arr)\{ //i不是arr中的元素，而是下标\}

var arr=[10,20,30,40];
    for(var i in arr){
        
      document.write(arr[i]);
      document.write("<br/>")
    }
    
    var map=new Array();
    map['cn']="中国";
    map['us']="美国";
    map['jp']="日本";
    map['kor']="韩国";
    
    for(var k in map){
        
      document.write(k+"...."+map[k]);
      document.write("<br/>")
    }

##### 2.6.3 void #####

> 我们经常会使用到 javascript:void(0) 这样的代码
> 
> javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

> 下面的代码创建了一个超级链接，当用户点击以后不会发生任何事。

<a href="javascript:void(0)">单击后不发生任何事情</a>

> void的其他用法

> 补充：href="\#"与href="javascript:void(0)"的区别
> 
> \#包含了一个位置信息，默认的锚是\#top 也就是网页的上端。而javascript:void(0), 仅仅表示一个死链接。
> 
> 在页面很长的时候会使用 **\#** 来定位页面的具体位置，格式为：**\# + id**（也称为锚链接）。如果你要定义一个死链接请使用 javascript:void(0)

#### 2.7 ECMAScript常用对象 ####

##### 2.7.1 Function对象 #####

> Function 类可以表示开发者定义的任何函数
> 
>  *  方法定义是，形参的类型不用写,返回值类型也不写。
>  *  方法是一个对象，如果定义名称相同的方法，会覆盖 在JS中，方法的调用只与方法的名称有关，和参数列表无关
>  *  在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Function对象</title>
        <script>
            //定义一个方法
            //第一个参数：形式参数
            //第二个参数：方法体
            var fn1 = new Function("arg1,arg2,arg3","console.log(arg1);console.log(arg2);console.log(arg3); return arg1 + arg2 + arg3;");
            var returnValue1 = fn1("a","b","c");        //abc
            console.log(returnValue1);
            var returnValue2 = fn1("a","b");
            console.log(returnValue2);                  //abundefined
            var returnValue3 = fn1();
            console.log(returnValue3);                  //NaN
        </script>
    </head>
    <body>
    </body>
    </html>

##### 2.7.2 Array数组对象 #####

> 语法：var arr = new Array(元素列表); var arr = new Array(默认长度); var arr = \[元素列表\];

> 常用方法：
> 
>  *  join(参数)：将数组中的元素按照指定的分隔符拼接为字符串
>  *  push()：向数组的末尾添加一个或更多元素，并返回新的长度
>  *  pop()：将数组中最后一个元素删除并取出

> 特点：
> 
>  *  数组元素的类型是可变的
>  *  数组长度是可变的

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Array对象</title>
        <script>
            //创建数组对象
            var arr1 = new Array("a","b","c");
            console.log(arr1.length);           //3
    
            var arr2 = ["a","b","c"];
            console.log(arr2.length);           //3
    
            var str1 = arr1.join("-");
            console.log(str1);                  //a-b-c
    
            //将arr1数组中最后一个元素删除并取出！
            var lastItem = arr1.pop();
            console.log(lastItem);              //c
            console.log(arr1.length);           //2
    
            var length = arr1.push("c","d","e");
            console.log(length);                //5
            console.log(arr1);                  //显示了数组对象
        </script>
    </head>
    <body>
    </body>
    </html>

##### 2.7.3 Date对象 #####

> Date 对象会自动把当前日期和时间保存为其初始值

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Date对象</title>
    
        <script>
            //当前时间对象
            var date = new Date();
            console.log(date.toLocaleString());
    
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day =  date.getDate();
            var hour = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            var timeStr = year + "/"+month + "/" + day + " " + hour + ":" + minutes + ":" + seconds;
            console.log(timeStr);
    
            timeStr = [year,month,day].join("/") + " " + [hour,minutes,seconds].join(":");
            console.log(timeStr);
    
            //获取到当前时间的毫秒值
            //时间戳与我们时间存在8个小时的时差
            //1970.1.1 00:00:00
            //1970.1.1 08:00:00
            console.log(date.getTime());
        </script>
    </head>
    <body>
    </body>
    </html>

![format_png 2][]

##### 2.7.4 RegExp 对象 #####

> RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

> 语法：/^正则表达式$/

> 常用方法：
> 
>  *  test(参数)：验证指定的字符串是否符合正则定义的规范

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>RegExp对象</title>
        <script>
            var reg1 = /^[a]{3}$/;
            console.log(reg1.test("aaaa"));			//false
        </script>
    </head>
    <body>
    </body>
    </html>

##### 2.7.5 全局对象 #####

> 全局对象是预定义的对象，作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他所有预定义的对象、函数和属性。全局对象不是任何对象的属性，所以它没有名称。
> 
> **特点：** 这个Global中封装的方法不需要对象就可以直接调用

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>decodeURI()</td> 
   <td>解码某个编码的 URI。</td> 
  </tr> 
  <tr> 
   <td>decodeURIComponent()</td> 
   <td>解码一个编码的 URI 组件。</td> 
  </tr> 
  <tr> 
   <td>encodeURI()</td> 
   <td>把字符串编码为 URI。</td> 
  </tr> 
  <tr> 
   <td>encodeURIComponent()</td> 
   <td>把字符串编码为 URI 组件。</td> 
  </tr> 
  <tr> 
   <td>escape()</td> 
   <td>对字符串进行编码。</td> 
  </tr> 
  <tr> 
   <td>eval()</td> 
   <td>计算 JavaScript 字符串，并把它作为脚本代码来执行。</td> 
  </tr> 
  <tr> 
   <td>getClass()</td> 
   <td>返回一个 JavaObject 的 JavaClass。</td> 
  </tr> 
  <tr> 
   <td>isFinite()</td> 
   <td>检查某个值是否为有穷大的数。</td> 
  </tr> 
  <tr> 
   <td>isNaN()</td> 
   <td>检查某个值是否是数字。</td> 
  </tr> 
  <tr> 
   <td>Number()</td> 
   <td>把对象的值转换为数字。</td> 
  </tr> 
  <tr> 
   <td>parseFloat()</td> 
   <td>解析一个字符串并返回一个浮点数。</td> 
  </tr> 
  <tr> 
   <td>parseInt()</td> 
   <td>解析一个字符串并返回一个整数。</td> 
  </tr> 
  <tr> 
   <td>String()</td> 
   <td>把对象的值转换为字符串。</td> 
  </tr> 
  <tr> 
   <td>unescape()</td> 
   <td>对由 escape() 编码的字符串进行解码。</td> 
  </tr> 
 </tbody> 
</table>

> 常用方法：
> 
>  *  parseInt()：将字符串转为数字
>     
>      *  逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
>  *  isNaN()：判断一个值是否是NaN
>     
>      *  NaN参与的==比较全部为false
>  *  eval()：计算JavaScript字符串，并把它作为脚本代码来执行

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>全局对象</title>
        <script>
            //parseInt
            var num1 = 1;
            var num2 = "1";
            console.log(num1 + parseInt(num2)); //2
    
            //isNaN：判断一个变量是否是NaN
            var num3 = NaN;
            console.log(isNaN(num3));           //true
    
    		//以下两种比较特殊，不要纠结，记住就可以了！
            console.log(num3 == NaN);           //false
            console.log(num3 === NaN);          //false
    
            //eval：计算json字符串，返回js对象
            var jsonStr = '{"username":"root","password":"123456"}';
            //能够通过上述的json字符串直接调用username属性和password属性?
            //不能!需要将json字符串转换成js对象，就可以了!
            var jsObject = eval("("+jsonStr+")");
            console.log(jsObject.username + " , " + jsObject.password)
        </script>
    </head>
    <body>
    </body>
    </html>

### 三、ECMAScript函数 ###

#### 3.1 函数的概念 ####

> 包含一段功能的代码，其目的是为了重复使用。

#### 3.2 函数的定义 ####

> 用function关键字来声明，后面是函数名字，参数列表里不写var。整个方法不写返回值类型。

function functionName(parameters){
        
        //执行的代码
    }

> 因为JavaScript是一种弱类型语言，var代码所用时的数据类型。所以我们不用定义参数的数据类型和返回值类型等等

#### 3.3 匿名函数 ####

> 匿名函数就像他的名字一样，没有名字的函数！
> 
> **注意：** 自己且执行一次的匿名函数要写在第一个执行才有结果显示，并且只能有一个！

#### 3.4 闭包 ####

> JavaScript 变量属于本地或全局作用域，全局变量能够通过闭包实现局部（私有）

##### 3.4.1 全局/局部变量 #####

> 函数可以访问内部定义的全部变量，也可以访问访问函数外部定义的变量

示例1

function myFunction() {
        
        var a = 4;
        return a * a;
    }

示例2

var a = 4;
    function myFunction() {
        
        return a * a;
    }

> **注意：** 示例1中变量a就是一个局部变量，局部变量只能用于其被定义的函数内部。示例2中变量a就是一个全局变量

##### 3.4.2 变量的生命周期 #####

> 全局变量的作用域是全局性的，即在整个JavaScript程序中，全局变量处处都在。而在函数内部声明的变量，只在函数内部起作用。这些变量是局部变量，作用域是局部性的；函数的参数也是局部性的，只在函数内部起作用。

var counter = 0;
    function add() {
        
    	return counter += 1;
    }
    add();
    add();
    add();
    // 计数器现在为 3

> 计数器数值在执行 add() 函数时发生变化。
> 
> 但问题来了，页面上的任何脚本都能改变计数器，即便没有调用 add() 函数。
> 
> 如果我在函数内声明计数器，如果没有调用函数将无法修改计数器的值：

function add() {
        
    var counter = 0;
    return counter += 1;
    }
    add();
    add();
    add();
    // 本意是想输出 3, 但输出的都是 1 !

##### 3.4.3 内嵌函数 #####

> 所有函数都能访问全局变量。 实际上，在 JavaScript 中，所有函数都能访问它们上一层的作用域。

> JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。该实例中，内嵌函数 **plus()** 可以访问父函数的 **counter** 变量：

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

> 如果我们能在外部访问 **plus()** 函数，这样就能解决计数器的困境。
> 
> 我们同样需要确保 **counter = 0** 只执行一次。但实际上该场景下,每调用一次 add() 都会让 counter 初始化一次

##### 3.4.4 闭包 #####

> 变量 add 的赋值是自调用函数的返回值。
> 
> 这个自调用函数只运行一次。它设置计数器为零（0），并返回函数表达式。
> 
> 这样 add 成为了函数。最“精彩的”部分是它能够访问父作用域中的计数器。简单来说，局部变量初始化一次后，以后的每次访问都是访问的内部函数。而内部函数也可以访问运算之后的局部变量，最后返回结果！
> 
> 这被称为 JavaScript *闭包*。它使函数拥有“*私有*”变量成为可能,换句话说就是改变了局部变量的生命周期。
> 
> 计数器被这个匿名函数的作用域保护，并且只能使用 add 函数来修改。
> 
> 闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。

#### 3.5 回调 ####

> 回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码。

普通回调函数

匿名回调函数

#### 3.6 系统函数 ####

##### 3.6.1 弹窗函数 #####

###### 提示框alert() ######

> alert方法没有返回值，也就是说如果用一个变量去接受返回值，将会得到undefined。无论你点击“确定”还是右上角的那个“X“关闭。

![image-20200510101910546][]

###### 确认框confirm() ######

> confirm方法与alert不同，他的返回值是boolean，当你点击“确定”时，返回true，无论你点击“取消”还是右上角的那个“X“关闭，都返回false。

![image-20200510102325633][]

###### 输入框弹窗prompt() ######

> prompt是一个是输入文本的弹窗，第一个参数是提示信息，第二个参数是用户输入的默认值。当你点击确定的时候，返回用户输入的内容。当你点击取消或者关闭的时候，返回null。

![image-20200510103232653][]

##### 3.6.2 其他常用系统函数 #####

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>parseInt();</td> 
   <td>字符串转换整数</td> 
  </tr> 
  <tr> 
   <td>parseFloat();</td> 
   <td>字符串转成小数</td> 
  </tr> 
  <tr> 
   <td>isNaN();</td> 
   <td>判断数字是否为非数字</td> 
  </tr> 
 </tbody> 
</table>

#### 四、事件 ####

##### 4.1 什么是事件？ #####

> **HTML 事件是发生在 HTML 元素上的“事情”。当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。**

##### 4.2 事件语法 #####

> 事件名=“函数名” 或者 事件名=“行内js”；示例如下：

<h1 onclick="alert('你惹到我了！')">请点击此文本！</h1>

<h1 onclick="changeText(this)">点击此文本！</h1>
    
    <script>
    function changeText(id) {
         
        document.write("Hello Wrold)");
    }
    </script>

##### 4.2 常用事件 #####

<table> 
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onchange</td> 
   <td>HTML 元素改变(离开光标触发)</td> 
  </tr> 
  <tr> 
   <td>onclick</td> 
   <td>用户点击 HTML 元素</td> 
  </tr> 
  <tr> 
   <td>onmouseover</td> 
   <td>光标移动到HTML元素</td> 
  </tr> 
  <tr> 
   <td>onmouseout</td> 
   <td>光标离开HTML元素</td> 
  </tr> 
  <tr> 
   <td>onkeydown</td> 
   <td>用户按下键盘按键</td> 
  </tr> 
  <tr> 
   <td>onload</td> 
   <td>浏览器已完成页面的加载</td> 
  </tr> 
  <tr> 
   <td>onblur</td> 
   <td>元素失去焦点</td> 
  </tr> 
  <tr> 
   <td>onfocus</td> 
   <td>元素获得焦点</td> 
  </tr> 
  <tr> 
   <td>ondblclick</td> 
   <td>当用户双击某个对象时调用的事件句柄</td> 
  </tr> 
  <tr> 
   <td>onsubmit</td> 
   <td>确认按钮被点击</td> 
  </tr> 
  <tr> 
   <td>onselect</td> 
   <td>文本被选中</td> 
  </tr> 
 </tbody> 
</table>

#### 五、字符串 ####

##### 5.1 字符串概念 #####

> String 对象用于处理文本（字符串）

##### 5.2 创建String对象的语法 #####

> 参数 *s* 是要存储在 String 对象中或转换成原始字符串的值。

//两者相同
    new String(s);
    String(s);

> 当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 *s* 或 *s* 的字符串表示。
> 
> 当不用 new 运算符调用 String() 时，它只把 *s* 转换成原始的字符串，并返回转换后的值。

##### 5.3 String对象属性 #####

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">length</td> 
   <td align="left">字符串的长度</td> 
  </tr> 
 </tbody> 
</table>

##### 5.4 String对象方法 #####

> 注意：在JavaScript中，打印数组array默认调用valueOf()方法，返回结果为数组中所有元素的值。打印数组array\[0\]则打印数组中第一个元素的值。与Java不同，Java打印数组array时，打印的结果为数组的地址！

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">charAt()</td> 
   <td align="left">返回在指定位置的字符。</td> 
  </tr> 
  <tr> 
   <td align="left">concat()</td> 
   <td align="left">连接字符串。</td> 
  </tr> 
  <tr> 
   <td align="left">indexOf()</td> 
   <td align="left">检索字符串。</td> 
  </tr> 
  <tr> 
   <td align="left">lastIndexOf()</td> 
   <td align="left">从后向前搜索字符串。</td> 
  </tr> 
  <tr> 
   <td align="left">match()</td> 
   <td align="left">找到一个或多个正则表达式的匹配。</td> 
  </tr> 
  <tr> 
   <td align="left">replace()</td> 
   <td align="left">替换与正则表达式匹配的子串。</td> 
  </tr> 
  <tr> 
   <td align="left">search()</td> 
   <td align="left">检索与正则表达式相匹配的值。</td> 
  </tr> 
  <tr> 
   <td align="left">slice()</td> 
   <td align="left">提取字符串的片断，并在新的字符串中返回被提取的部分。</td> 
  </tr> 
  <tr> 
   <td align="left">split()</td> 
   <td align="left">把字符串分割为字符串数组。</td> 
  </tr> 
  <tr> 
   <td align="left">substring()</td> 
   <td align="left">提取字符串中两个指定的索引号之间的字符。</td> 
  </tr> 
  <tr> 
   <td align="left">toLocaleUpperCase()</td> 
   <td align="left">把字符串转换为大写。</td> 
  </tr> 
  <tr> 
   <td align="left">toLowerCase()</td> 
   <td align="left">把字符串转换为小写。</td> 
  </tr> 
  <tr> 
   <td align="left">toUpperCase()</td> 
   <td align="left">把字符串转换为大写。</td> 
  </tr> 
  <tr> 
   <td align="left">toString()</td> 
   <td align="left">返回字符串。</td> 
  </tr> 
  <tr> 
   <td align="left">valueOf()</td> 
   <td align="left">返回某个字符串对象的原始值。</td> 
  </tr> 
 </tbody> 
</table>

> 此章节作为JavaScript的基础内容，随后的便奉上JavaScript的BOM和DOM知识章节内容！

[image-20200508205903613]: /images/20230312/2902b656743a45a4bdb2613f54b91c50.png
[format_png]: /images/20230312/88fb9d7e714446e1b4e8462c9d9f79d3.png
[format_png 1]: /images/20230312/f3529b35665845478b5c318b03ebe06d.png
[format_png 2]: /images/20230312/67b9fd9539a442c7904930afdb39a00b.png
[image-20200510101910546]: /images/20230312/43e83de3d7044fa9bcafc7364e140fdd.png
[image-20200510102325633]: /images/20230312/733a675085e44290be0734df00d519ed.png
[image-20200510103232653]: /images/20230312/dc3c05773e454043a928ebc00429d673.png