huanghai_fu

js基础-课堂笔记

JavaScript-课堂笔记

表单【重点】

<form name="名称" action="提交路径" method="提交方式get/post">
	
    
    文本框：<input type="text" name="username" value="默认值">
    密码框：<input type="password" name="password" value="默认值">
    
    
    单选：<input type="radio" name="sex" value="male">男
    <input type="radio" name="sex" value="female" checked>女
    
    
    多选：<input type="checkbox" name="hobby" value="sing">唱
	    <input type="checkbox" name="hobby" value="dance" checked>跳
    
    <input type="button" value="普通按钮">
    <input type="submit" value="提交按钮">
    <input type="reset" value="重置按钮">
    <input type="image" src="图片路径">
    
    选择文件：<input type="file" name="file">
    隐藏域：<input type="hidden" name="hidden" value="隐藏域的值">
    
    下拉框：
    <select name="address">
        <option value="option1">选项1option>
        <option value="option2" selected>选项2option>
        <option value="option3">选项3option>
    select>
    
    文本域：
    <textarea name="introduce">默认值写在这里textarea>
form>

CSS
- HTML里引入CSS
  - 行内样式黑马程序员
  - 内部样式
  - 外部样式
- CSS的选择器
  - 基本选择器
    - 标签选择器：标签名称{css样式名:值; css样式名:值; ...}
    - ID选择器：#id值{css样式名:值; css样式名:值; ...}
    - 类选择器：.类名{css样式名:值; css样式名:值; ...}
  - 扩展选择器
    - 层级选择器：#d1 .c1{} 找id为d1的元素的后代类名为c1的元素
    - 属性选择器：input[type="text"] 找文本框
    - 伪类选择器：:link, :visited, :hover, :active
- CSS的常用样式：查手册

一、JS简介

1. js简介和作用

目标

了解js的概念
理解js的作用
能说出js的组成

讲解

什么是js

JS：JavaScript。是web开发中不可缺少的脚本语言，不需要编译就能运行（解释型语言）。它“寄生”在html体内放在服务器上，随网络传输到客户端，在浏览器里运行。
运行环境：浏览器
js跨平台？跨平台（Java跨平台，因为Java在JVM里运行）
js大小写敏感；
基于对象的语言

js的作用

和用户交互，实现页面的动态效果的

操作浏览器：用户做某些操作，让js操作浏览器前进一步、后退一步、弹窗、刷新页面等等
操作网页：用户做某些操作，让js操作网页操作网页样式、操作标签内容、操作属性

js的组成

ECMAScript：规定了js的基本语法规范
BOM：Browser Object Model，浏览器对象模型。js可以调用BOM对象，来操作浏览器
DOM：Document Object Model，文档对象模型。js可以调用DOM对象，来操作网页

js的来历（了解）

网景公司（NetScape）=》网景浏览器（FireFox）=》LiveScript=》JavaScript
微软公司（Microsoft）=》IE浏览器 =》JScript =》现在没人用了
ECMA=》制定了语言的标准规范=》ECMAScript

小结

js简介：JavaScript，在浏览器里运行，大小写敏感，在web开发里不可缺少的脚本语言
js作用：和用户交互，实现动态效果的
js组成：
- ECMAScript：基本语法规范
- BOM：提供了操作浏览器的方法
- DOM：提供了操作网页的方法

2. 在HTML中引入js

目标

能够在HTML中引入js
掌握js的注释
掌握js的三种输出方式

讲解

js的引入语法

1. 内部js

在html文档里增加script标签，把js代码写在script标签里

<script>
	alert();
script>

2. 引入外部js

把js代码写在单独的xxx.js文件里，在html中使用script标签引入js文件

<script src="js文件路径">script>

3. 注意事项：

一个script标签的功能要单一：要么是内部js，要么是外部js，不能混用
js越晚加载越好，建议放在body结束标签之前（css建议放在head里）

js的注释

js的单行注释：// 注释内容
js的多行注释：/* 多行注释 */

<script>
	//单行注释
    
    /*
    	多行注释
     */
script>

js的三种输出方式

在Java中，如果要输出一些数据，可以使用System.out.println()输出到控制台
那么，如果在js里想要输出一些数据，怎样实现呢？这里介绍三种输出方式

<script>
	//1. 弹窗输出
    alert("hello, world1");
    
    //2. 输出到页面。可输出html代码
    document.write("hello, world2
");
    
    //3. 输出到浏览器的控制台
    console.log("hello, world3");
script>

小结

js的引入：
- 内部js：
- 外部js：把js代码写在单独的js文件里，html中通过引入js文件
注意：
- 一个script，不能既引入外部的，又写内部的js代码：因为语法不允许
- js代码在页面任何位置都可以运行，建议：放在body结束标签之前
三种输出方式：课堂给大家演示效果的，实际开发的时候都很少
- 弹窗输出：alert("输出内容")
- 输出到页面：document.write("输出内容")
- 输出到控制台：console.log("输出内容")

二、基本语法

1. 基本语法

目标

掌握编写js的基本语法

步骤

js的变量定义
js的数据类型
js的运算符
js的流程控制语句

讲解

首先：要让idea支持ES6的语法，配置如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tBlykaSg-1592825923988)(img/image-20200516101255001.png)]

变量定义

说明

ES6中，js里变量定义：
- let 定义变量：变量不可重复声明，只在当前作用域有效
- const 定义常量：常量值不可修改
注意：
- js是弱类型语言：声明变量时，不需要声明类型。
- js是动态类型语言：一个变量的类型是可变的


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量定义title>
head>
<body>

<script>

    //----------定义变量---------------
    //定义整数
    let v = 1;
    console.log(v);

    //定义小数
    v = 3.14;
    console.log(v);

    //定义布尔
    v = true;
    console.log(v);

    //定义字符串
    v = "hello";
    console.log(v);

    //定义对象
    v = new Date();
    console.log(v);

    //----------定义变量---------------
    const PI = 3.14;
    console.log(PI);

    //修改常量值，会报错
    PI = 1;

script>
body>
html>

`let`和`var`的区别

在ES5及更低版本中，使用var定义变量
在ES6及更高版本中，使用let定义变量
两者的区别是：
- let定义变量仅在当前代码块有效；var定义变量是全局变量
- let不允许重复定义变量；var允许重复定义变量
- 开发中建议使用let定义变量，语法更严谨


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>var和lettitle>
head>
<body>

<script>
    //--------var和let的区别-----------
    //1. var定义的不具备块级作用域的特征，在{}里用var定义的变量，{}之外也可访问
    //   let定义的是局部变量，具备块级作用域的特征，只在let所在的块{}内有效，{}外不能访问
    {
        var a = "1a";
        let b = "2b";
    }
    console.log(a);//输出结果：1a
    console.log(b);//运行时报错

    //2. var可重复定义变量；let不能重复定义变量
    var v = 1;
    var v = 2;
    console.log(v);//正常运行，输出结果：2

    let l = 1;
    let l = 2;
    console.log(l);//运行时报错，因为let不允许重复定义变量
script>
body>
html>

数据类型

说明

数据类型	描述	示例
`number`	数字类型	`1`, `2`, `3`, `3.14`
`boolean`	布尔类型	`true`, `false`
`string`	字符串类型	`"hello"`, `'hello'`
`object`	对象类型	`new Date()`, `null`
`undefined`	未定义类型	`undefined`

示例

输出变量的类型


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型title>
head>
<body>

<script>
    //说明：typeof关键字，用于判断一个变量的类型
    
    //要求：定义变量，输出变量的类型
    let v;
    console.log(typeof v); //输出结果：undefined

    v = 1;
    console.log(typeof v); //输出结果：number

    v = 3.14;
    console.log(typeof v); //输出结果：number

    v = true;
    console.log(typeof v); //输出结果：boolean

    v = "hello";
    console.log(typeof v); //输出结果：string

    v = new Date();
    console.log(typeof v); //输出结果：object

    v = null;
    console.log(typeof v); //输出结果：object
script>
body>
html>

运算符

说明

js也有：+,-,*,/,%,+=,-=,*=,/=,%=,++,--,>,<,=,>=,<=,==,!=,&&,||,! 三元运算等等

需要说明的有：

==和===：

运算符	描述	示例
`==`	比较值。只要值一样，就是true	`1=="1"`，结果是true
`===`（推荐）	比较值和类型。只有值和类型都一样，才是true	`1==="1"`，结果是false

-*/：
- 如果是数字，正常运算
- 如果不是数字，js会尝试转换成数字再运算
- 如果转换不成功，结果是NaN
- 如果除数是0，结果是Infinity

示例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符title>
head>
<body>

<script>
    //1. ==和===
    let v1 = 3;
    let v2 = "3";

    console.log(v1 == v2); //输出结果：true。只要值相等，结果即是true
    console.log(v1 === v2);//输出结果：false。只有值和类型都相同，结果才是true

    //2. + - * /
    console.log("2" + 1);//输出结果：21。 有字符串的加法是拼接字符串
    console.log("2" - 1);//输出结果：1。  把字符串转换成数字再运算
    console.log("a" - 1);//输出结果：NaN。字符串不能转换成数字，结果NaN：Not a Number
    console.log("2" * 3);//输出结果：6
    console.log("10" / 2);//输出结果：5
    console.log("10" / 0);//输出结果：Infinity。表示数字无穷大
script>
body>
html>

流程控制语句

说明

js也有：if, else, else if, while, switch, for
特殊的是if判断：任何类型的数据，都可以作为判断条件
- boolean类型：true/false
- number类型：0是false，非0是true
- string类型：空串""是false，非空字符串是true
- object类型：null是false，非null是true
- undefined类型：始终是false

示例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程控制语句title>
head>
<body>

<script>
    // if判断
    let v = true;
    v = 1; //number类型：0为false；非0为true
    v = "";//string类型：""为false；非空串为true
    v = null;//object类型：null为false；非null为true
    v = undefined;//undefined类型：始终为false
    
    if (v) {
        console.log("true");
    }else{
        console.log("false");
    }
script>
body>
html>

练习：输出乘法口诀


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>乘法口诀表title>
    <style>
        table{
            border-collapse: collapse;
        }
        td{
            border:1px solid #ccc;
            padding:5px;
        }
    style>
head>
<body>

<script>
    document.write("");for(let i =1; i <=9; i++){
        document.write("");for(let j =1; j <= i; j++){// 
            document.write("");}
        document.write("");}
    document.write("
        
           
             2*3=6 " + j + "*" + i +"=" + i*j + "
        
    
");
script>
body>
html>

小结

变量定义：var
常量定义：const
数据类型：
- number：数字类型
- boolean：布尔类型
- string：字符串类型
- object：对象类型
- undefined：未定义类型
运算符：
- +,-,*,/,%,+=,-=,*=,/=,%=,++,--
- >,<,>=,<=,==,!=, ===, !==
- &&,||, !
- 三元运算符
- 需要注意的有：
  - -, *, /：如果有字符串，js会转换成数字再运算。如果转换不成功结果是NaN。如果除以0，结果是Infinity表示数字无穷大
  - ==和===：==比较值，只要值一样，结果就是true；===比较值和类型，只有值和类型都一样才是true

2. 函数【重点】

目标

掌握js函数的定义和调用

步骤

能够定义和调用普通函数
能够定义和使用匿名函数

讲解

普通函数

语法

//1.定义 一个普通函数
function 函数名(形参1,  形参2, ...){
    //函数体
    //如果需要返回值，就return；否则就不return
}
//2.调用 一个普通函数
let result = 函数名(实参1，实参2, ...);

示例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>普通函数title>
head>
<body>

<script>
    //---------普通函数------------
    //要求：定义函数，计算两个变量之和
    function add(a, b) {
        return a+b;
    }

    console.log("得到结果：" + add(1, 2));
    
script>
body>
html>

匿名函数

介绍：没有名称的函数叫匿名函数，也叫回调函数。通常是作为其它函数的实参使用的
语法

//定义：
function(形参1,  形参2, ...){
    //函数体
    //如果需要返回值，就return；否则就不return
}

使用示例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>匿名函数title>
head>
<body>

<script>
    //--------匿名函数--------------
    //1. 把匿名函数赋值给一个变量，通过变量名调用
    let fn = function(a){
        console.log("fn函数执行了，得到参数a：" + a);
    };

    fn("123");

    //2. 匿名函数作为参数，传递给其它函数---回调函数
    setInterval(function () {
        console.log(new Date());
    }, 1000);
script>
body>
html>

注意事项：

js的函数没有重载：同名函数会覆盖掉，只有最后一个有效
形参个数和实参个数无关：在函数里可以使用隐含的arguments来得到所有的实参数组


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>普通函数title>
head>
<body>

<script>
    //第一次定义函数func
    function func() {
        console.log("func()");
    }
	//第二次定义func：会把之前定义的覆盖掉
    function func(a) {
        console.log("func(a)");
        console.log("参数a：" + a);

        console.log("接收到的所有实参-arguments数组：");
        for (let i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
    }

    //调用的是func(a)函数。因为func()被覆盖掉了。
    //第一个实参赋值给函数第一个形参，依此类推
    func("aaa", "bbb", "ccc");
script>
body>
html>

拓展了解

//以下是匿名函数  不常用的调用方法
let fn = function(){
        alert();
    };
setInterval(fn, 2000);
setInterval("fn()", 2000);  //浏览器每隔2000毫秒，把"fn()"作为js代码执行一次：执行fn()

小结

普通函数

//定义
function add(a, b){
    return a+b;
}

//调用
let result = add(1, 2);

匿名函数

//1.把匿名函数赋值给一个变量，通过变量名调用
let fn = function(){
    console.log("fn");
}

fn();

//2.把匿名函数作为其它函数的实参传递进去
setInterval(function(){
    console.log("aaa");
}, 2000)

注意：
- js的函数没有重载，同名函数会覆盖掉
- js的函数，形参个数与实参个数无关，仅仅是通过函数名称调用的。建议：形参个数和实参个数相同

3. 练习：轮播图

目标

实现轮播图效果：页面上的图片每间隔2秒钟切换一次

分析

要实现每隔2秒钟切换一次显示的图片，需要：
1. 能够执行周期性任务，每间隔2秒执行一次：使用定时器技术
2. 能够切换要显示的图片：要使用dom技术，修改img标签的src属性值
定时器技术
- 定时器：让浏览器执行周期性任务
- 开启定时器的语法：setInterval(fn, ms)
  - 参数：
    - fn：要执行的周期性任务，通常是一个函数
    - ms：时间间隔，单位是毫秒
  - 返回值：定时器的id
- 示例：
```
let timer = setInterval(function(){
    console.log("每隔1秒钟输出一次");
}, 1000);
```
修改img标签的属性值
- 第1步：修改哪个标签的属性，要先获取哪个标签
  - let element = document.getElementById("id");
  - 参数id：标签上的id属性值
  - 返回值：id对应的标签对象
- 第2步：修改标签的src属性值
  - element.src = "新的属性值";

实现


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图title>
head>
<body>

<img src="img/1.jpg" alt="" id="image">

<script>
    let image = document.getElementById("image");

    let imageName = 1;
    
    setInterval(function () {
        imageName++;
        if (imageName > 5){
            imageName = 1;
        }
        
        image.src = "img/"+imageName+".jpg";
    }, 2000);
script>
body>
html>

小结

4. 事件【重点】

目标

能说出至少5个常用事件
能够绑定事件

讲解

事件相关的概念

事件：用户在浏览器上做一些事情、动作
事件源：事件、动作发生在哪个标签、对外上，即：事件发生的源头
响应行为：事件发生之后，要执行的代码，通常是封装成函数来调用

常见的事件

事件属性	描述，监听什么
onclick	监听鼠标单击
ondblclick	监听鼠标双击
onsubmit	监听表单提交了，事件源是表单form标签
onchange	监听域内容改变，通常用于监听下拉框的选项变化
onload	监听加载完成，通常用于监听浏览器加载完了页面
onfocus	监听获取焦点（光标）
onblur	监听失去焦点（光标）
onkeydown	监听键盘按键按下
onkeypress	监听键盘按键按下或按住
onkeyup	监听键盘按键弹起
onmousedown	监听鼠标按键按下
onmouseup	监听鼠标按键弹起
onmouseover	监听鼠标移入
onmouseout	监听鼠标移出
onmousemove	监听鼠标移动

事件绑定

普通函数方式

<input type="button" value="点击弹窗1" onclick="show1()">
<script>
    function show1() {
        alert("点我干嘛");
    }
script>

匿名函数方式

<input type="button" value="点击弹窗2" id="btn2">
<script>
    document.getElementById("btn2").onclick = function(){
        alert("点我干嘛");
    }
script>

小结

常见事件：
- 单击：onclick
- 双击：ondblclick
- 表单提交：onsubmit
- 域内容改变（文本框的值变了，或者下拉框的选项变了）：onchange
- 加载完成：onload
- 获取焦点：onfocus
- 失去焦点：onblur
- 鼠标的5个动作事件：
  - 鼠标按下：onmousedown
  - 鼠标弹起：onmouseup
  - 鼠标移入：onmouseover
  - 鼠标移出：onmouseout
  - 鼠标移动：onmousemove
- 键盘的3个动作事件
  - 键盘按下：onkeydown
  - 键盘按下/按住：onkeypress
  - 键盘弹起：onkeyup

事件绑定方式：

普通函数方式

<input type="button" value="按钮1" onclick="show(this)">
<script>
	function show(obj){
        //obj得到的实参值：就是调用show方法时传递进来的实参-标签对象
        alert();
    }
script>

匿名函数方式

<input type="button" value="按钮2" id="btn2">
<script>
	let btn2 = document.querySelector("#btn2");
    btn2.onclick = function(){
		//直接使用this：表示当前标签对象btn2
        alert();
    }
script>

5. 练习：轮播图增强

目标

在轮播图功能基础上，实现：鼠标移入图片，停止切换；鼠标移出图片，继续切换

分析

思路：
- 页面加载完成，开始切换
- 鼠标移入图片，停止切换
- 鼠标移出图上，继续切换
相关技术：
- 鼠标移入事件：onmouseover，事件源：图片
- 鼠标移出事件：onmouseout，事件源：图片
- 如何停止切换图片：清除定时器
  - 清除定时器的语法：clearInterval(定时器的id)
- 如果继续切换图片：重新开启定时器
  - 开启定时器的语法：setInterval(fn, ms)

实现


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图-增强title>
head>
<body>


<img src="img/1.jpg" alt="" id="image" onmouseover="imageStop()" onmouseout="imageGo()">

<script>
    let imageName = 1;
    let timer;
    //图片开始切换，开启定时器
    function imageGo(){
        let image = document.getElementById("image");
        timer = setInterval(function () {
            imageName++;
            if (imageName > 5){
                imageName = 1;
            }

            image.src = "img/"+imageName+".jpg";
        }, 1000);
    }

    //图片停止切换，清除定时器
    function imageStop(){
        clearInterval(timer);
    }
    
    //页面加载完成，开始切换图片
    window.onload = imageGo;
script>
body>
html>

练习二

实现表格数据增删
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QRDYjatN-1592825923992)(C:\Users\HUANGHAI\AppData\Roaming\Typora\typora-user-images\1592809438822.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
    <input type="text" id="age"  placeholder="请输入年龄" autocomplete="off">
    <input type="text" id="gender"  placeholder="请输入性别" autocomplete="off">
    <input type="button" value="添加" id="add">
</div>

    <table id="tb">
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
                     <!-- JavaScript:void(0)当我们点击这个删除时不会刷新页面 -->
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>

        <tr>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>

    </table>

</body>
<script>
    //一、添加功能
    //1.为添加按钮绑定单击事件
    document.getElementById("add").onclick = function(){
        //2.创建行元素
        let tr = document.createElement("tr");
        //3.创建4个单元格元素
        let nameTd = document.createElement("td");
        let ageTd = document.createElement("td");
        let genderTd = document.createElement("td");
        let deleteTd = document.createElement("td");
        //4.将td添加到tr中
        tr.appendChild(nameTd);
        tr.appendChild(ageTd);
        tr.appendChild(genderTd);
        tr.appendChild(deleteTd);
        //5.获取输入框的文本信息
        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;
        let gender = document.getElementById("gender").value;
       

        //6.因为上面获取到的只是字符串，不能直接添加入td中，需要转换一下，
        // //根据获取到的信息创建3个文本元素
        // let nameText = document.createTextNode(name);
        // let ageText = document.createTextNode(age);
        // let genderText = document.createTextNode(gender);
        // //7.将3个文本元素添加到td中
        // nameTd.appendChild(nameText);
        // ageTd.appendChild(ageText);
        // genderTd.appendChild(genderText);

        // 上面6,7这些可以替换成这样
        nameTd.innerHTML=name;
        ageTd.innerHTML=age;
        genderTd.innerHTML=gender;

        //8.创建超链接元素和显示的文本以及添加href属性
        let a = document.createElement("a");
        a.innerHTML="删除";
        a.href="JavaScript:void(0);";
        //给自己添加的数据添加onclik事件
        a.onclick="drop(this)";
        deletetd.appendChild(a);
        //9.将超链接元素添加到td中
        deleteTd.appendChild(a);
        //10.获取table元素，将tr添加到table中
        let table = document.getElementById("tb");
        table.appendChild(tr);
    }

    //二、删除的功能
    //1.为每个删除超链接标签添加单击事件的属性
    //2.定义删除的方法
    function drop(obj){
        //3.获取table元素
        let table = obj.parentElement.parentElement.parentElement;
        //4.获取tr元素
        let tr = obj.parentElement.parentElement;
        //5.通过table删除tr
        table.removeChild(tr);
    }
</script>
</html>

小结

三、引用数据类型（内置类）

相当于Java的内置类，js有9个内置类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RJgXJR5m-1592825923997)(img/1565665429761.png)]

1. Array数组

目标

能够创建数组
能够遍历数组
能够操作数组的长度
能够使用数组的常用方法

讲解

创建数组：

new Array();//长度是0
new Array(size);//长/度为size，里边是空的
new Array(element0, element1, ..., elementn);//相当于Java的：new Object[]{v1,v2,v3...}

//推荐方式：
let arr = ["a","b","c"];

数组循环遍历

//for i循环：基本for循环
for(let i=0; i<arr.length;i++){
    alert(arr[i]);
}

//for..of循环：类似Java的增强for循环
for (let v of arr3) {
    console.log(v);
}

数组常用属性

length：设置或获取数组中元素的数目

let arr = ["a", "b", "c"];
//获取数组的长度 
console.log(arr.length);

//设置数组长度为2：比实际长度小，会截取前2个
arr.length = 2;
for(let i=0; i<arr.length;i++){
    alert(arr[i]);
}

//设置数组的长度为5：比实际长度大，会扩容，没有值的是undefined-
arr.length = 5;
for(let i=0; i<arr.length;i++){
    alert(arr[i]);
}

数组常用方法

concat(arr1, arr2, ..., arrn)：把多个数组合并成一个，返回新数组
join(seperator)：把数组元素按照指定分隔符拼接字符串，返回拼接的字符串
reverse()：颠倒数组里元素的顺序，直接在原数组里操作，不会创建新数组
sort()：数组元素排序。直接在原数组里排序，不会创建新数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V5Lka6cI-1592825924001)(C:\Users\HUANGHAI\AppData\Roaming\Typora\typora-user-images\1592730734363.png)]


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组title>
head>
<body>

<script>
    let arr = [1, 10, 20, 2];

    //sort()无参：按照字符的ASCII排序
    arr.sort();
    console.log(arr); //输出结果：1, 10, 2, 20

    
    //sort(fn)：按照指定规则排序
    arr.sort(function (a, b) {
        //返回a-b：升序。 返回b-a：降序
        return a-b;
    });
    console.log(arr);//输出结果：1, 2, 10, 20
    
    //reverse()：颠倒数组里元素的顺序
    arr.reverse();
    console.log(arr);//输出结果：20, 10, 2, 1

    //join()：按照指定的分隔符，把数组里的元素拼接成字符串
    let  str = arr.join("/");
    console.log(str);//输出结果：20/10/2/1
script>
body>
html>

小结

定义数组：

new Array();
new Array(size);
new Array(element1, elenent2, ..., elementn)

[element1, elenent2, ..., elementn]

数组常用属性：length
- 获取数组的长度
- 设置数组的长度：
  - 设置的值小，会截取数组
  - 设置的值大，会扩容数组（没有值的元素是undefined）

数组常用方法：

arr1.concat(arr2, arr3,...)：把多个数组合并成一个新数组，返回新数组

<script>
    //定义数组
    let arr = [10,20,30];
    //arr[3] = 40;  js中的数组长度可变
    //遍历数组
    for(let i = 0; i < arr.length; i++) {
        document.write(arr[i] + "
");
    }
    document.write("==============
");

    // 数组高级运算符 ...
    //复制数组
    let arr2 = [...arr];
    //遍历数组
    for(let i = 0; i < arr2.length; i++) {
        document.write(arr2[i] + "
");
    }
    document.write("==============
");

    //合并数组
    let arr3 = [40,50,60];
    let arr4 = [...arr2 , ...arr3];
    //遍历数组
    for(let i = 0; i < arr4.length; i++) {
        document.write(arr4[i] + "
");
    }
    document.write("==============
");

    //将字符串转成数组
    let arr5 = [..."heima"];
    //遍历数组
    for(let i = 0; i < arr5.length; i++) {
        document.write(arr5[i] + "
");
    }
</script>

arr.join("分隔符")：把数组里的元素，按照指定分隔符拼接成字符串
arr.reverse()：颠倒数组里元素的顺序，直接操作原数组，不会创建新数组

arr.sort()：数组里元素排序，默认按照ASCII排序

如果要按数字大小排序

arr.sort(function(a,b){
    return a-b;//升序
});

arr.sort(function(a,b){
    return b-a;//降序
});

循环遍历

for(let i=0; i<arr.length; i++){
    let element = arr[i];
}

for(let element of arr){
    
}

其它内容参考w3cschool手册

2. Date日期

目标

掌握Date对象的使用
练习：计算距离十一假期还有多少天

步骤

能够创建日期对象：当前日期，指定日期
能够进行日期计算

讲解

创建日期

let now = new Date();//当前时间
let date1 = new Date(2019, 9, 1);// 2019-10-01。注意：月是从0开始的
let date2 = new Date(2019, 9, 1, 11, 20, 30);//2019-10-01 11:20:30

常用方法

getTime()：获取毫秒值（从1970年1月1日开始）
setTime(ms)：以毫秒值设置日期
toLocaleString()：把日期对象转换成本地日期格式的字符串


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期title>
head>
<body>

<script>
    let date = new Date();

    //转换成本地日期格式的字符串
    let str = date.toLocaleString();
    console.log(str);//输出结果：2020/5/11 下午5:34:08

    //获取日期的毫秒值
    let time = date.getTime();
    console.log(time);//1589189682449

    //以毫秒值设置日期
    date.setTime(1000*60*30);
    console.log(date.toLocaleString());//1970/1/1 上午8:30:00。注意：这是本地的北京时间，北京是东8区，世界标准时间1970/1/1 00:00:00 换算成北京本地时间就是1970/1/1 上午8:30:00

    //------练习：现在距离十一还有几天？--------
    //1. 创建当前日期
    let now = new Date();
    //2. 创建十一的日期
    let holiday = new Date(2020, 9, 1);
    //3. 计算两个日期之间的毫秒值之差
    let ms = holiday.getTime() - now.getTime();
    //4. 把毫秒值换算成天
    let days = ms/1000/60/60/24;
    console.log("距离十一放假还有：" + days);
script>
body>
html>

小结

创建日期对象：

let date = new Date();//当前日期当前时间
let date2 = new Date(2020,9,1);//2020-10-1
let date3 = new Date(2020,9,1,20,30,40);//2020-10-1 20:30:40

常用方法
- toLocaleString()：转换成本地日期格式的字符串
- getTime()：获取毫秒值
- setTime()：以毫秒值设置日期

3. Math数学工具

目标

能够使用Math的常用方法进行数学运算

讲解

不需要创建对象，直接使用Math的方法和属性即可
常用属性和方法：
- Math.PI：圆周率
- Math.floor()：向下取整
- Math.ceil()：向上取整
- Math.random()：求随机数，范围[0,1)
- Math.round()：四舍五入为最接近的整数


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数学工具title>
head>
<body>

<script>
    console.log(Math.PI); //圆周率 ∏ 的值
    console.log(Math.floor(3.999));//向下取整
    console.log(Math.ceil(3.001));//向上取整
    console.log(Math.round(3.49));//四舍五入
    console.log(Math.random());//求随机数，范围：[0,1)

    console.log(Math.random() * 10);//随机数：[0,10)
    console.log(Math.random() * 10 + 90);//随机数：[90,100)
script>
body>
html>

小结

4. String字符串

目标

能够使用字符串的常用属性和方法

步骤

字符串的常用属性
字符串的常用方法

讲解

常用属性：
- length：字符串的长度
常用方法：
- substring(startIndex, endIndex)：截取字符串，含头不含尾
- split(separator)：切分字符串
- toLowerCase()：转换成小写
- toUpperCase()：转换成大写
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-61QqfPWK-1592825924007)(C:\Users\HUANGHAI\AppData\Roaming\Typora\typora-user-images\1592727684967.png)]


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串title>
head>
<body>

<script>
    let str = "Hello, World";
    console.log("字符串长度：" + str.length);

    //1. substr(startIndex, length)：截取字符串，从起始索引 截取到 结束索引
    let subStr = str.substring(2, 5);
    console.log(subStr);

    //2. split(seperator)：按照指定分隔符切分字符串
    let strArr = str.split(",");
    console.log(strArr);

    //3. toUpperCase()转换大写
    let upper = str.toUpperCase();
    console.log(upper);

    //4. toLowerCase()转换小写
    let lower = str.toLowerCase();
    console.log(lower);
    
    //1. charAt(index)     获取指定索引处的字符
    document.write(s2.charAt(1) + "
");

    //2. indexOf(value)    获取指定字符串出现的索引位置
    document.write(s2.indexOf("l") + "
");

    //3. substring(start,end)   根据指定索引范围截取字符串(含头不含尾)
    document.write(s2.substring(2,4) + "
");

    //4. split(value)   根据指定规则切割字符串，返回数组
    let s3 = "张三,23,男";
    let arr = s3.split(",");
    for(let i = 0; i < arr.length; i++) {
        document.write(arr[i] + "
");
    }

    //5. replace(old,new)   使用新字符串替换老字符串
    let s4 = "你会不会跳伞啊？让我落地成盒。你妹的。";
    let s5 = s4.replace("你妹的","***");
    document.write(s5 + "
");
script>
body>
html>

小结

5. RegExp正则表达式

目标

能够使用正则表达式校验字符串格式
练习：表单校验

步骤

创建正则表达式对象
使用正则表达式对象校验字符串的格式

讲解

创建正则表达式对象

let reg1 = /^正则表达式$/;   //直接量方式
let reg2 = new RegExp("正则表达式"); //对象形式

使用正则表达式校验字符串格式

test(string)：校验字符串的格式是否符合正则表达式

js里正则表达式的语法（了解）

方括号：用于匹配一个字符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b2Bd9zB3-1592825924010)(img/1565624336644.png)]

元字符：用于简化某些[]写法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QV1h8uur-1592825924013)(img/1565624439863.png)]

量词：
- 以下图片里的n是表达式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SJdXao0w-1592825924014)(img/1565624492958.png)]

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RegExp</title>
</head>
<body>  
</body>
<script>
    //1.验证手机号
    //规则：第一位1，第二位358，第三到十一位必须是数字。总长度11
    let reg1 = /^[1][358][0-9]{9}$/;
    document.write(reg1.test("18688888888") + "
");

    //2.验证用户名
    //规则：字母、数字、下划线组成。总长度4~16
    let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
    document.write(reg2.test("zhang_san123"));
</script>
</html>

6,Number

方法名	说明
parseFloat()	将传入的字符串浮点数转为浮点数
parseInt()	将传入的字符串转为整数
isNaN（）	判断传入的值是否是NaN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Number</title>
</head>
<body>
</body>
<script>
    //1. parseFloat()  将传入的字符串浮点数转为浮点数
    document.write(Number.parseFloat("3.14") + "
");
    //2. parseInt()    将传入的字符串整数转为整数
    document.write(Number.parseInt("100") + "
");
    document.write(Number.parseInt("200abc") + "
"); // 200，从数字开始转换，直到不是数字为止
    document.write(Number.isNaN(NaN));//true
</script>
</html>

7， Set

JavaScript 中的 Set 集合，元素唯一，存取顺序一致。
构造方法

构造方法说明

Set（）创建Set集合对象

构造方法	说明
Set（）	创建Set集合对象

成员方法

成员方法	说明
add（元素）	向集合中添加元素
size	获取集合长度
keys（）	获取迭代器对象
delete（元素）	删除指定元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set</title>
</head>
<body>
    
</body>
<script>
    // Set()   创建集合对象
    let s = new Set();

    // add(元素)   添加元素
    s.add("a");
    s.add("b");
    s.add("c");
    s.add("c");
    
    // size属性    获取集合的长度
    document.write(s.size + "
");    // 3

    // keys()      获取迭代器对象
    let st = s.keys();
    for(let i = 0; i < s.size; i++){//for循环只是控制循环次数
        document.write(st.next().value + "
");
    }

    // delete(元素) 删除指定元素
    document.write(s.delete("c") + "
");
    let st2 = s.keys();
    for(let i = 0; i < s.size; i++){
        document.write(st2.next().value + "
");
    }

</script>
</html>

8，Map

JavaScript 中的 Map 集合，key 唯一，存取顺序一致。
构造方法

构造方法说明

Map（）创建Map集合对象

构造方法	说明
Map（）	创建Map集合对象