学习目标
一. JavaScript概述
- 初体验
二 JavaScript入门
三 JavaScript基础语法【记住不同点】
- 3.1 JS运算符
- 3.2 JS流程控制
  - ① 分支语句【和Java一样】
  - ② 循环语句
    - 案例: 九九乘法表
四 JS函数【方法】
- 4.1 普通函数【重点】
- 4.2 匿名函数
五. JS事件（event）【重点】
六 JS常用内置对象【知道】

学习目标

js基础语法
js函数（方法）
js事件【重点】
js内置对象

一. JavaScript概述

html : 搭建网页的结构 css :美化网页样式 js : 主要实现页面交互效果

作用：页面交互

JavaScript历史

起源：上世纪末1995年时，Netscape（网景）公司推出Navigator浏览器。发布后用的人不多，这咋整啊？这家公司就想了一个好方案，不仅在浏览器实现静态HTML，还想要有动态效果，比如：在前端处理表单验证。 动手：有目标就去做，网景公司大牛多，Brendan Eich（布兰登·艾奇）据说就用了10天就把JavaScript搞了出来，刚出来时叫LiveScript，为了蹭蹭当红明星Java热度，就改成JavaScript了（瞬间就火了），事实上他们两没啥关系。（雷锋和雷峰塔） 竞争：看到网景公司有了js，微软感觉不行啊，我的IE要被干掉啊，同时也感到js的前途无量，于是参考JavaScript弄了个名为JScript浏览器脚本语言。 标准： Netscape和微软竞争出现的js导致版本的不一致，随着业界的担心，JavaScript的标准化被提上议事日程。ECMA（欧洲计算机制造商协会）组织就去干这事，最后在1997年弄出了ECMAScript作为标准。这里ECMAscript和JavaScript可以看做表达的同一个东西。

chrome, firefox , opera, Safari, IE 这些浏览器都支持js

JavaScript特点

Script : 脚本语言

js源码不需要编译，浏览器可以直接解释运行
js是弱类型语言，js变量声明不需要指明类型(java强类型)

JavaScript组成

组成部分	作用
ECMA Script	构成了JS核心的语法基础(简称es)
BOM	Browser Object Model 浏览器对象模型，用来操作浏览器上的对象
DOM	Document Object Model 文档对象模型，用来操作网页中的元素（标签）

初体验

直接把代码拷贝到编辑器，运行起来，看效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        hello js
        <hr>
        <input type="button" value="按钮" onclick="method01()">
</body>
<script>
    function method01(){
        var result = confirm("你满18周岁了吗?");
        if(result){
            location.href = "http://www.baidu.com"
        }
    }
</script>
</html>

二 JavaScript入门

2.1 HTML引入JS

我们先讲解，怎么让HTML要引入JS，具体语法后续讲解。使用JS有两种方式：内部引入，外部引入。

1）内部引入：在当前html中引入js
语法操作：先编写一个**script**标签，然后在script标签内写js代码
2）外部引入：在当前html中引入外部的js文件
语法操作：先编写一个js文件，再用script标签引入
注意，JavaScript文件的后缀就是 .js

示例：
在HTML文件所在目录创建一个js文件夹，里面放创建一个js文件。
HTML内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS的引入案例</title>
</head>
<body>
    Hello World <br>
</body>
<!-- 1 内部JS -->
<script>
    //在网页body中填充内容
    document.write("Hello 内部JS <br/>")
</script>
<!-- 2 引入外部JS -->
<script src="js/first.js"></script>
</html>

JS文件内容

document.write("Hello 外部JS");

3）注意 :::warning

一个html可以拥有有多个script标签，执行顺序是从上至下执行
内部JS和外部引入不能一起，script标签要么编写js代码，要么引入js文件。
在html中,如果标签没有包含内容,可以写成单标签，script标签例外,不能写成单标签)
一般把脚本置于元素的底部，可改善显示速度，因为浏览器在加载页面的时候会从上往下进行加载并解析，我们应该让用户看到页面内容，然后再展示动态的效果。 :::

小结
html中引入JS有两种方式，内部引入和外部引入。
引入所使用标签：script

2.2 JS三种输出方式

在学习Java基础的时候，我们要看到数据是什么，通常用System.out.pritnln(); 输出内容。
在JS中我们介绍三种输出数据方式： :::warning 第一种: 在网页上直接输出 (了解)
document.write("Hello JS1")
第二种: 控制台打印 (测试)
console.log("Hello JS2")
第三种: 弹框 (结合实际业务, 看场景使用)
alert("Hello JS3") ::: 注意：如果一行只有一个语句可以不用写分号，如果一行有多个语句可以使用分号分割。
示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

</body>
<script>
    //第一种: 在网页上直接输出 (了解)
    document.write("Hello JS1")
    //第二种: 控制台打印 (测试)
    console.log("Hello JS2")
    //第三种: 弹框 (结合实际业务, 看场景使用)
    alert("Hello JS3!")

</script>

</html>

效果如下：
第一种方式直接在网页上可以看到。

第二种方式在浏览器的控制台中，看到。打开浏览器，按F12键，打开开发者工具就可以看到了。

第三种方式是一个弹框提示：

2.3 JS变量声明

之前所学Java语言是强类型语言，变量是有类型限定的，所以在java中定义变量类型的方式如下：

int i = 1314;
double d = 521.1314;
char c ='c';
String str = "用心做教育";
boolean b = true;
final Integer PI = 3.14;

js是弱类型语言，变量定义时不强调具体类型，声明变量时无需体现类型，所以在js中定义变量的类型方式如下：

var a = 1;
var b = "abc";
let c = 2;
c = 3;
const d = 4;

JS声明变量时在JS的两个版本 es5 和 es6 上有所区别（类似Java语言的JDK版本不同，比如JDK8以前不支持Lambda，JDK8开始支持Lambda）。
1）es5 : 无论什么类型都用var (variable 变量) :::warning var a = 1;
var b = “abc”; ::: 2）es6 :
I. 变量用 let
II. 常量用const (constant) :::warning let c=100;
const PI = 3.14; ::: 3）注意：
I. var有变量作用域泄露
II. 最好用es6的变量声明
示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    //var 定义变量
    var a = 1;
    var b = "abc";

    //let 定义变量
    let c = 2;
    c = 3;

    //const 定义常量
    const d = 4;

    //var 定义变量穿透
    // var e;
    {
        var e = 100; // 看似e在这里定义,实际上被提升到全局,变量泄露了
        let f = 200;
    }
    console.log(e); //获取得到
    // console.log(f); //获取不到
</script>

</html>

2.4 JS数据类型

js与java一样，数据类型也分为基本数据类型（原始数据类型）和引用数据类型
回顾java的类型 :::warning

 1. 基本类型 ：byte int short long float double  char boolean<br />     2. 引用类型 ：类，接口，枚举，注解，数组

::: js的类型
1）原始类型

number 数字（整数 + 小数）
string 字符串（单引号，双引号定义都行）
boolean 布尔（true/false）
null 空
undefined 未定义，使用如下：
       I. java中
           int a; // 定义
           a = 1; // 赋值
       II. js中
           let a; //只声明变量不赋值, 未定义
           let a = 1; //声明变量并赋值, 定义

2）复杂类型

对象（后续讲解）
函数 (后续讲解）

3）获取变量类型运算符 :::warning 变量类型 = typeof 变量
例如：
let str=”Hello World”;
console.log(typeof str);
输出结果：string :::

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    let a = 1.1;
    let type = typeof a; //获取a的变量类型
    console.log(type); // number

    let b = 'abc';
    let type2 = typeof b;
    console.log(type2); // string

    let c = true;
    let type3 = typeof c;
    console.log(type3); // boolean

    let d = null;
    let type4 = typeof d;
    console.log(type4); // object (null是打印不出来的,这表示对象是null)

    let e;  //只声明变量不赋值
    let type5 = typeof e;
    console.log(type5); //  undefined
</script>

<script>
    //js对象的定义
    let jsObj = {
        name : "zs",
        age : 18,
        married : true
    }
    console.log(jsObj.name); // zs
</script>

</html>

三 JavaScript基础语法【记住不同点】

3.1 JS运算符

js与java的运算符基本一样，什么算数运算符、赋值运算符、逻辑运算符等等，不需要死记硬背，写程序会用就行： :::info

算数运算符

 `+`  `-`  `*`  `/`  `%`    `++`    `--`

赋值运算符

`=` `+=` `-=` `*=` `/=` `%=`<br />        举例 `a+=1` --> `a= a+1`

比较运算符

 `>`   `<`     `==``!=`    `===`(恒等于)  `!==` (不恒等于)

逻辑运算符
```
 `&&`     `||`      `!` (非)
```
三元（目）运算符
```
 `条件表达式 ？为真 : 为假`
```
:::

我们学习下 js 与 java 运算符使用有不同的地方：
1） == 和 === 的区别 :::danger

== : 只比较字面值
=== : 不仅比较字面值,还比较类型

在js中用的比较多的是 == :::

let a = 2
let b = "2"
document.write(a==b) //true
document.write("<br>")
document.write(a===b) //false

2）不同类型的算术运算符

任何类型 + string = string (重要!!! 和 Java一样)
boolean类型和number类型运算，注意：true=1，false=0。

let a = 100 + true; // a=101

null 和 number类型运算时值为 0

let a = 100 + null; // a = 100

undefined 和 number运算结果 **NaN** (not a number不是一个数字)

let a;
console.log(a+100); // NaN

let s1 = "Hello" + 666
  document.write(typeof s1)
  document.write("<br>")

  let n1 = 100 + true
  document.write("n1 = "+n1)
  document.write("<br>")

  let n2 = 1000+null
  document.write("n2 = "+n2)
  document.write("<br>")

  let n3 
  document.write("n3 = "+ (n3+100))
  document.write("<br>")

3）非布尔类型也有布尔含义

string (知道)

空串为false，非空串为true
number
    0为false, 非0为true
null
      false
undefined
      false

 if(100){
    document.write("100是true")
  }

3.2 JS流程控制

高级语言中的三种基本结构：顺序、分支、循环

① 分支语句【和Java一样】

if 和 switch的使用和java一样，自己写写看。 :::warning 1. if 格式
if ( 条件表达式 ) {
代码块;
} else if( 条件表达式) {
代码块;
} else {
代码块;
}

2. switch 格式
switch(条件表达式){
case 满足条件1 :
代码块
break;
case 满足条件2 :
代码块
break;
default:
默认代码块
} :::

② 循环语句

循环语句的使用基本和java中一样。
for语句：

1. 普通for循环
        for(let i= 0; i<10; i++){
            需要执行的代码;
        }

2. 增强for循环（for of） 后面学习到数组的时候使用
        for(let element of array){
            需要执行的代码;
        }

3. 索引for循环(for in) 后面学习到数组的时候使用
        for(let index in array){
            需要执行的代码;
        }

while 和 do-while 语句

4. while循环
        while (条件表达式) {
            需要执行的代码;
        }

5. do..while循环
        do{
            需要执行的代码;
        }while(条件表达式);

流程控制语句

6. break和continue， 也是支持循环标记
        break: 跳出整个循环
        continue：跳出本次循环,继续下次循环

代码案例：使用各循环语句打印连续数字

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>16-js流程控制</title>
</head>

<body>

</body>
<script>
 /* for语句：
1. 普通for循环
        for(let i= 0; i<10; i++){
            需要执行的代码;
        }
*/
document.write("for循环：")
for(let i=1;i<10;i++){
  document.write(i+'  ');
}
document.write("<br/>");//换行



/*while 和 do-while 语句
4. while循环
        while (条件表达式) {
            需要执行的代码;
        }
5. do..while循环
        do{
            需要执行的代码;
        }while(条件表达式);
*/
document.write("while循环：")
let j =1;
while(j<10){
  document.write(j+'  ');
  j++;
}
document.write("<br/>");//换行
document.write("do-while循环：")
let k =1;
do{
  document.write(k+'  ');
  k++;
}while(k<10);

document.write("<br/>");//换行
/*流程控制语句
6. break和continue， 也是支持循环标记
        break: 跳出整个循环
        continue：跳出本次循环,继续下次循环
 */

 document.write("控制语句：")
for(let i=1;i<10;i++){
  if(i%2==0){
    continue;
  }
  document.write(i+'  ');
}


</script>

</html>

案例: 九九乘法表

代码实现：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>九九乘法表</title>
  <style>


  </style>
</head>

<body>
  <!-- <table border="1px" cellspacing="0px" cellpadding="5px">
    <tr>
      <td>1x1=1</td>
    </tr>
    <tr>
      <td>1x2=2</td>
      <td>2x2=4</td>
    </tr>
  </table> -->
</body>

<script>
  document.write("<table border='1px' cellspacing='0px' cellpadding='5px'>")
  for (let i = 1; i <= 9; i++) { //行
    // 生成行
    document.write("<tr>")
    for (let j = 1; j <= i; j++) { //列
      document.write("<td>" + j + "x " + i + " = " + (j * i) + "</td>")
    }
    document.write("</tr>")
  }
  document.write("</table>")

</script>


</html>

四 JS函数【方法】

功能：js函数用于执行特定功能的代码块，为了方便理解也可以称为js方法

4.1 普通函数【重点】

JS函数定义格式：

function 函数名(参数列表){
    函数体;
    [return 返回值;] // 中括号意思表示内容可以省略....
}

注意：定义函数后，和java中方法一样要调用才能执行
JS函数调用格式：
调用格式和java中方法调用一样，如下：

  <script>

    //函数定义
    function method01() {
      console.log("this is JS function!!");
    }
    //调用
    method01();

  </script>

js函数的特点 :::warning 1). 参数列表只需要写变量名即可,强制不需要声明关键字
无参：()
有参时直接写参数名，比如：(a,b)
2). 如果有返回值,直接return
有返回值，直接return结果。不用额外像Java方法一样写返回值类型。 ::: 代码示例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>01JS函数的定义和使用</title>
</head>

<body>

</body>
<script>
  //1 函数定义
  function method01() {
    console.log("this is JS function!!");
  }
  //2 调用
  method01();

  //3 有参函数定义
  function method02(a,b) {
    console.log(a*b);
  }

  //4 有参函数调用
  method02(100,200)

  //5 有返回值方法定义
  function method03(a,b) {
    return a+b;
  }
  //6 有返回值方法调用

  let result=method03(100,300);
  console.log("result = "+ result);

</script>

</html>

结果：

4.2 匿名函数

匿名函数就是没有名字的函数，但是不能单独存在，需要赋值给一个变量，这个变量可以当做一种数据进行传递使用，通常与事件结合使用（下一章节内容会讲到），咱们现在先来看一下语法。。。。
如下：

let 变量名 = function (参数列表){
    函数体;
    [return 返回值;] // 中括号意思表示内容可以省略....
}

访问匿名函数，也可以使用变量名来访问

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>01JS函数的定义和使用</title>
</head>
<body>

</body>
<script type="text/javascript">
  // 定义匿名函数
  let fun1 = function () {
    console.log("Hello 匿名函数");
  }
  // 匿名函数的调用
  fun1();

</script>

</html>

五. JS事件（event）【重点】

JS是一种事件驱动型语言，事件对于JS来讲是很重要的。什么是事件？

事件：网页中一切可以被检测到的行为，比如用户按下一个按钮，就存在一个事件。 事件是客观存在的，有交互就有事件，重点是事件被触发之后，我们要定义做什么。 比如网页小游戏中，检测到用户按下 W S A D 表示控制角色上，下，左，右移动，对于开发者来讲重点是监听到W按下事件，我们去实现向上移动的逻辑。

事件作用：JS可以监听用户的操作行为，并调用函数来完成用户交互功能.

5.1 常用事件

以下代码是对事件的体验，不用写，直接运行看效果就行。可以很直观的体验到事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        #e02,
        #e022 {
            border: 1px solid #000000;
            height: 200px;
            width: 200px;
        }
    </style>

</head>

<body>
    <input id="e01" type="text" /><span id="textMsg"></span>
    <hr />
    <div id="e02"></div><span id="divMsg"></span>
    <hr />
    <div id="e022"></div><span id="divMsg2"></span>
    <hr />
    <input id="e03" type="button" value="可以点击" /><span id="buttonMsg"></span>
</body>

<script type="text/javascript">


    // 页面加载事件：当整个html页面加载成功调用
    window.onload = function () {
        // 文本框事件
        var e01 = document.getElementById("e01");
        e01.onfocus = function () {
            html("textMsg", "文本框获得焦点：focus");
        }
        e01.onblur = function () {
            html("textMsg", "文本框失去焦点：blur");
        }
        e01.onkeydown = function () {
            html("textMsg", "键盘按下：keydown；");
        }
        e01.onkeypress = function (event) {
            var event = event || window.event;
            append("textMsg", "键盘按：keypress (" + String.fromCharCode(event.keyCode) + ")；");
        }
        e01.onkeyup = function () {
            append("textMsg", "键盘弹起：keyup；");
        }

        // 鼠标事件
        var e02 = document.getElementById("e02");
        e02.onmouseover = function () {
            html("divMsg", "鼠标移上：mouseover");
        }
        e02.onmouseout = function () {
            html("divMsg", "鼠标移出：mouseout");
        }
        e02.onmousedown = function () {
            html("divMsg", "鼠标按下：mousedown");
        }
        e02.onmouseup = function () {
            html("divMsg", "鼠标弹起：mouseup");
        }

        var e022 = document.getElementById("e022");
        e022.onmousemove = function (event) {
            var event = event || window.event;
            html("divMsg2", "鼠标移动：mousemove , " + event.clientX + " -- " + event.clientY);
        };


        // 按钮事件
        var e03 = document.getElementById("e03");
        e03.onclick = function () {
            html("buttonMsg", "单击：click");
        };
        e03.ondblclick = function () {
            html("buttonMsg", "双击：dblclick");
        };

    };

    /**
     * 指定位置显示指定信息
     * @param objId ，元素的id属性值
     * @param  text，需要显示文本信息
     */
    function html(objId, text) {
        document.getElementById(objId).innerHTML = text;
    }
    /**
     * 指定位置追加指定信息
     * @param objId ，元素的id属性值
     * @param  text，需要显示文本信息
     */
    function append(objId, text) {
        document.getElementById(objId).innerHTML += text;
    }

</script>

</html>

1. 点击事件：
        1. onclick：单击事件
        2. ondblclick：双击事件 (double: 时间间隔很短两次单击)

2. 焦点事件
        1. onblur：失去焦点
        2. onfocus:元素获得焦点。

3. 加载事件：
        1. onload：页面加载完成后立即发生。

4. 鼠标事件：
        1. onmousedown    鼠标按钮被按下。
        2. onmouseup    鼠标按键被松开。
        3. onmousemove    鼠标被移动。
        4. onmouseover    鼠标移到某元素之上。
        5. onmouseout    鼠标从某元素移开。

5. 键盘事件：
        1. onkeydown    某个键盘按键被按下。    
        2. onkeyup        某个键盘按键被松开。
        3. onkeypress    某个键盘按键被按下并松开。

6. 改变事件
        1. onchange    域的内容被改变。

7. 表单事件：
        1. onsubmit    提交按钮被点击。

5.2 事件绑定

事件是客观存在的，我们可以监听到它的发生。而且可以将事件绑定一个函数，当事件发生后触发函数的执行。接下来我们就会学习如何把某一事件与函数进行绑定，实现交互功能。

函数又分有名函数和匿名函数，我们分别学习下。

1）有名函数的绑定

比如最常见的按钮点击事件：

我们要实现当一个按钮被点击时触发一个函数的执行。要完成这个操作，我们要将函数绑定到点击事件上，这个操作我们可以叫做事件绑定 或者叫做 事件注册

事件绑定步骤：

写一个事件发生后要执行的函数
```
function fun1(){
 alert("还钱");
}
```

找到要进行事件绑定的标签（这里演示按钮标签）

<!-- 测试按钮标签 -->
<input type="button"  value="点我试试"/>

绑定（或者叫做注册）操作：标签中有一个onclick属性，将属性值设置为函数调用。
```

<input type="button" value="点我试试" onclick="fun1()" />
```

完整代码示例：

<!DOCTYPE html>
<html lang="zh-CN">

  <head>
    <meta charset="UTF-8">
    <title>01事件绑定入门案例</title>
  </head>

  <body>
    <!-- 测试按钮标签 -->
    <input type="button" onclick="fun1()" value="点我试试"/>
  </body>

  <script type="text/javascript">
    // 按钮点击后要执行的功能
    function fun1(){
      alert("还钱");
    }

  </script>

</html>

效果如下：

:::success 在标签的事件属性值中调用我们JS中定义的函数，就完成绑定了，特别注意：不要忘记括号了。
<标签 on事件名 = “函数名() “ > …

小贴士：事件属性名都以on开头，如下：
:::

2）匿名函数绑定

操作步骤：
1). 找到目标元素,给一个id 标识

<input id="dianwo" type="button" value="点我试试" />

2). js通过标识找到元素对象

// 找到指定ID的元素
let btn = document.getElementById("dianwo");

3). `元素对象.on事件名 = 匿名函数`

// 按钮点击事件绑定到匿名函数
btn.onclick=function(){
  alert("需要什么服务！")
}

普通函数绑定耦合比较严重,用的少,匿名函数绑定比较解耦,用的多（后续使用中会体会到）

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>02匿名函数绑定事件</title>
</head>

<body>
  <!-- 测试按钮标签 -->
  <input id="dianwo" type="button"  value="点我试试" />



</body>

<script type="text/javascript">
  // 找到指定ID的元素
  let btn = document.getElementById("dianwo");
  // 按钮点击事件绑定到匿名函数
  btn.onclick=function(){
    alert("需要什么服务！")
  }

</script>

</html>

效果演示：

5.3 小结

事件是客观存在的，有交互就有事件，重点是事件被触发之后，我们要定义做什么。
事件的存在，让JS可以监听用户的操作行为，并调用函数来完成用户交互功能.
常见的事件比如: :::warning
点击事件，2. 焦点事件，3. 加载事件，4. 鼠标事件，5. 键盘事件，6. 改变事件，7. 表单事件 :::
函数可以绑定到事件，当事件发生时触发函数的执行。

六 JS常用内置对象【知道】

内置对象: js提供好的对象, 开发者直接可以创建对象,并使用。类似于Java中JDK提供的类型

6.1 字符串对象：String

1）字符串的定义

:::warning a. 双引号例如：let str1="hello js1";
b. 单引号例如：let str2="hello js2";
c. 反引号定义（键盘左上角，esc下面）模板字符串（es6）,例如：
let money = 90;
let str =这件衣服卖${money}元;// ${变量} 可以实现变量引用 :::

2）字符串常用方法

这些方法的使用和Java中String的方法使用一个意思 :::warning **substring(startIndex,endIndex) **提取字符串中两个指定的索引号之间的字符。包头不包尾
**substr(startIndex,count)** 从startIndex索引开始,截取count长度的字符串
**toLowerCase() **把字符串转换为小写。
**toUpperCase() **把字符串转换为大写。
**split() **把字符串分割为字符串数组。
**trim() **去掉首尾空格 ::: 代码示例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>10-字符串</title>

</head>

<body>

</body>
<script>
    /*
    1. 构造字符串可以使用
       a. 双引号
       b. 单引号
       c. 反引号(重音符) 键盘左上角 esc下面 (es6模板字符串)
             ${变量} -> 变量引用
             更容易实现字符串拼接
*/


    let a = "abc"
    let b = 'abc'
    let c = `abc`
    //字符串模板
    let money = 90;
    let str = "这件衣服卖" + money + "元"
    let str2 = `这件衣服卖${money}元`
    console.log(str);
    console.log(str2);

    /*
       2. 字符串常用方法
             substring(startIndex,endIndex) 提取字符串中两个指定的索引号之间的字符。  包头不包尾
             substr(startIndex,count) 从startIndex索引开始,截取count长度的字符串
             toLowerCase() 把字符串转换为小写。
             toUpperCase() 把字符串转换为大写。
             split() 把字符串分割为字符串数组。可以按照普通字符串或者正则切割
             trim() 去掉首尾空格
    */

    let str3 = "abcdef";
    let s = str3.substr(2, 3); // 从2索引开始,截取3个长度字符串
    console.log(s);//cde

    let s2 = str3.substring(2, 3);//从2索引开始,截取到3索引 (包头不包尾)
    console.log(s2); // c

    let s3 = str3.toUpperCase();
    console.log(s3); // ABCDEF

    let str4 = "Hello,,Word,JavaScript";
    //let arr1=str4.split(",");//普通字符串切割
    let arr1 = str4.split(/[,]+/);//正则表达式的使用（下一天内容有JS的正则学习）

    for (let index = 0; index < arr1.length; index++) {
        console.log(arr1[index])
    }


</script>

</html>

6.2 数组对象：Array

JavaScript的 Array 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。

//1）创建数组
var fruits = ['Apple', 'Banana'];
console.log(fruits.length);
// 2

通过索引访问数组元素
var first = fruits[0];
// Apple

var last = fruits[fruits.length - 1];
// Banana

遍历数组
fruits.forEach(function (item, index, array) {
    console.log(item, index);
});
// Apple 0
// Banana 1


添加元素到数组的末尾
var newLength = fruits.push('Orange');
// newLength:3; fruits: ["Apple", "Banana", "Orange"]

删除数组末尾的元素
var last = fruits.pop(); // remove Orange (from the end)
// last: "Orange"; fruits: ["Apple", "Banana"];
删除数组最前面（头部）的元素

var first = fruits.shift(); // remove Apple from the front
// first: "Apple"; fruits: ["Banana"];
添加元素到数组的头部

var newLength = fruits.unshift('Strawberry') // add to the front
// ["Strawberry", "Banana"];
找出某个元素在数组中的索引

fruits.push('Mango');
// ["Strawberry", "Banana", "Mango"]

var pos = fruits.indexOf('Banana');
// 1
通过索引删除某个元素

var removedItem = fruits.splice(pos, 1); // this is how to remove an item

// ["Strawberry", "Mango"]
从一个索引位置删除多个元素

var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
console.log(vegetables); 
// ["Cabbage", "Turnip", "Radish", "Carrot"]

var pos = 1, n = 2;

var removedItems = vegetables.splice(pos, n);
// this is how to remove items, n defines the number of items to be removed,
// from that position(pos) onward to the end of array.

console.log(vegetables); 
// ["Cabbage", "Carrot"] (the original array is changed)

console.log(removedItems); 
// ["Turnip", "Radish"]


复制一个数组
var shallowCopy = fruits.slice(); // this is how to make a copy 
// ["Strawberry", "Mango"]

1）数组的定义和基本使用

:::warning

let array = new Array('a','b','c')
let array = ['a','b','c']// 推荐使用, 中括号

数组中的元素可以不是同一种类型
访问时和java一样，用中括号 [ 索引 ]
也有长度属性：length
数组可以动态扩容

比如上面的array数组，只有长度为4。索引为[0,3]之间。
我们可以直接 array[4] = 'd'添加一个元素。 :::

//1）创建数组
var fruits = ['苹果', '香蕉','桃子'];
console.log(fruits.length);

//2）通过索引访问数组元素
var first = fruits[0];
console.log(first);
// 苹果

var last = fruits[fruits.length - 1];
console.log(last);
// 桃子

//3）遍历数组
fruits.forEach(function (item, index, array) {
  console.log(item, index);
});
// 苹果 0 
// 香蕉 1 
// 桃子 2

for(index in fruits){ //for in 遍历数组，获取的是索引
  console.log(index) 
}
//0
//1
//2

for(fruit of fruits){ //for in 遍历数组，获取的是索引
  console.log(fruit) 
}
//苹果
//香蕉
//桃子

2）数组常用方法：

方法名	功能
concat()	用于拼接一个或多个数组为新的数组
join(分隔符)	用于将整个数组使用分隔符拼接成一个字符串。相当于字符串的split()反操作
pop()	删除并返回数组的最后一个元素
push()	添加一个或者多个元素到数组的最后面
sort()	如果存字符串以字母顺序对数组进行排序如果存储数字以数字大小进行排序也可以类似java一样定义比较器指定排序规则
reverse()	用于数组的反转

let vegetables = ['小白菜', '大白菜', '胡萝卜']
// concat() 拼接
let vf = fruits.concat(vegetables)
console.log(vf) //[ "苹果", "香蕉", "桃子", "小白菜", "大白菜", "胡萝卜" ]

// join(separator)
let str = vf.join('=')
console.log(str) //苹果=香蕉=桃子=小白菜=大白菜=胡萝卜

// pop()
let pop = vegetables.pop()
console.log(pop) //胡萝卜
console.log(vegetables)  // [ "小白菜", "大白菜" ]

// push()
let push = vegetables.push('白萝卜')
console.log(push) //胡萝卜
console.log(vegetables)  // [ "小白菜", "大白菜", "白萝卜" ]


// sort()
let numbers = [3, 1, 2, 4, 6, 5]
numbers.sort()
console.log(numbers) //[ 1, 2, 3, 4, 5, 6 ]

// reverse()
let str2 = numbers.reverse()
console.log(str2) //[ 6, 5, 4, 3, 2, 1 ]

3）三种数组的遍历方式：

let arr = ["I", "Love", "You"]
//普通循环
for (let i = 0; i < arr.length; i++) {
  document.write(arr[i] + ",")
}
document.write("<br>")

//forin 循环遍历索引
for (s1 in arr) {
  document.write(s1 + ",")
}
document.write("<br>")

//forof 循环遍历值
for (s2 of arr) {
  document.write(s2 + ",")
}

//foreach方法遍历
arr.foreach(function(value,index,arr){
  //value：就是每一个元素
  //index: 索引

})

for-in遍历数组得到的是键， for-of 遍历数组得到的是值

6.3 日期对象：Date

1. 创建对象

let date = new Date(); 获取当前时间时间

2. 常用方法

toLocaleString() 转换为本地日期格式的字符串 getFullYear()获取日期中的year getMonth() 获取日期中的month 范围：0~11 getDate() 获取日期中的号 getTime() 获取时间毫秒值(时间原点: 1970年1月1号0时0分0秒 GMT)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>12-日期</title>
</head>
<body>
    <script>
        let date = new Date();
        //Sun May 24 2020 14:38:34 GMT+0800 (中国标准时间:东八区)
        console.log(date);
        console.log(date.toLocaleString()); // 转换为本地日期格式的字符串
        console.log(date.getFullYear()); // 年 四位
        console.log(date.getMonth()+1);// 月 范围：0~11
        console.log(date.getDate()); // 日
        console.log(date.getTime()); // 1970年~今毫秒值
    </script>
</body>
</html>

6.4 数学运算:Math 对象

类似于Java中的Math工具类

四舍五入 round()
向下取整 floor() 地板
向上取整 ceil() 天花板
产生随机数 random() ：返回 [0,1) 之间的随机数。 [0,1) 左闭右开区间,包含0不包含1

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>数学对象使用</title>

</head>
<body>
<body>

    <script >
        let n = 1234.567
        //1. 四舍五入取整
        var number = Math.round(n);
        console.log(number); //1235

        //2. 向下取整
        var number4 = Math.floor(n);
        console.log(number4);//1234

        //3. 向上取整
        var number3 = Math.ceil(n);
        console.log(number3);//1235

        //4. 产生随机数
        for(let i=0; i<10; i++){
              var number2 = Math.random();
              console.log(number2);
          }
    </script>
</body>
</html>

6.5 全局函数

定义在浏览器上，可以直接调用的就称为全局函数(定义在浏览器中)

1）字符串转为数字

1) parseInt(“数字字符串”) 从左至右开始解析,解析到字符串为止,返回整数 2) parseFloat(“数字字符串”) 从左至右开始解析,解析到字符串为止,返回小数

2）对字符串编码和解码

浏览器访问后台提交表单数据时，会对数据进行URL编码。比如我们把百度搜索黑马时的地址拷贝过来，看到的就是经过URL编码后的数据。 https://www.baidu.com/s?wd=%E9%BB%91%E9%A9%AC %E9%BB%91%E9%A9%AC 这个数据就是经过URL编码后的数据。 1). encodeURI() : 编码 2). decodeURI(): 解码写的时候编码,读的解码

使用案例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>全局函数</title>

</head>

<body>

    <script>
        //数字解析
        let fontSize = "100.1px"
        // let i = parseInt(fontSize)
        let i = parseFloat(fontSize)
        console.log(i * 2); // 200, 200.2

        //url 编解码
        let url = "https://www.baidu.com/s?wd=%E9%BB%91%E9%A9%AC"
        url = decodeURI(url); //解码
        console.log(url);

        url = encodeURI(url); // 重新编码
        console.log(url); 
    </script>
</body>

</html>

JavaScript基础