一、初识JavaScript

1.1前景

CSS 预处理器
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些
编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。转化
成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正
常的 CSS 文件，以供项目使用”。
常用的 CSS 预处理器有哪些

SASS：基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于 LESS。

LESS：基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于

SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用 LESS。

1.2JavaScript介绍

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。被广泛应用于各种客户端Web程序尤其是HTML开发中，能给HTML网页添加动态功能，响应用户各种操作，实现诸如欢迎信息、数字日历、跑马灯,显示浏览器停留时间等特殊效果，提高网页的可观性。

1.3JavaScript框架

jQuery:大家熟知的 JavaScript 框架,优点是简化了 DOM 操作,缺点是 DOM 操作太频繁, 影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;

Angiar:Google 收购的前端框架,由一群 Java 程序员开发,其特点是将后台的 MVC 模式搬到了前端并增加了模块化开发的理念,与微软合作,采用 TypeScript 语法开发;对后台程序员友好,对前端程序员不太友好;最大的缺点是版本迭代不合理(如:1代->2代,除了名字,基本就是两个东西;截止发表博客时已推出了 Angular6)

React:Facebook 出品,一款高性能的 JS 前端框架;特点是提出了新概念【虚拟 DOM】用于减少真实 DOM 操作,在内存中模拟 DOM 操作,有效的提升了前端渲染效率;缺点是使用复杂,因为需要额外学习一门【JSX】语言;

Vue:一款渐进式 JavaScript 框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状志管理等新特性。其特点是综合了 Angular(模块化)和 React(虚拟 DOM)的优点;

Axios:前端通信框架;因为 Vue的边界很明确,就是为了处理 DOM,所以并不具备通信能力,此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用 jQuery 提供的 AJAX通信功能;

1.4UI框架

补充：微信小程序WeUI

1.5JavaScript用途

JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素

JavaScript 能改变页面中的所有 HTML 属性

JavaScript 能改变页面中的所有 CSS 样式

JavaScript 能删除已有的 HTML 元素和属性

JavaScript 能添加新的 HTML 元素和属性

JavaScript 能对页面中所有已有的 HTML 事件作出反应

JavaScript 能在页面中创建新的 HTML 事件

1.6快速入门

1.6.1格式入门

把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示，JS代码建议置于body的最底部

可以在 <head> 或 <body> 中放置外部脚本引用

1.6.2语法入门

1.7浏览器控制台使用

//console. log(score)在浏览器的控制台打印变量!

1.8几点总结

分号分隔 JavaScript 语句，在每条可执行的语句之后添加分号

注释：单行注释以 // 开头；多行注释以 /* 开头，以 */ 结尾

JavaScript 标识符对大小写敏感

二、JavaScript入门

2.1组成

完整 JavaScript 的实现是由以下三个部分组成：

ECMAScript ：核心标准。

DOM ：文档对象模型。

BOM ：浏览器对象模型。

ECMAScript是JavaScript的核心标准，它描述了该语言的语法和基本对象。

DOM指的是Document Object Model (文档对象模型)，它是HTML的应用程序接口。DOM将整个HTML页面看作是由各种节点层级构成的结构文档。

BOM指的是Browser Object Model (浏览器对象模型)，可以对浏览器窗口进行访问和操作
处理。

2.2JavaScript使用

内部JavaScript

外部JavaScript

内部JavaScript

2.3变量

let，声明带作用域的变量

const，声明带作用域的常量

Arrow Functions，适合简写匿名函数的箭头函数

2.3.1变量的声明

var a;
const a=1; //必须赋值
let a;//块内元素

JavaScript是一种弱类型的脚本语言，无论是数字、文本还是其他内容,统一使用关键词var加上变量名称进行声明

●变量的声明不是必须的，可以不使用关键词var声明直接使用。

2.3.2变量的赋值

常见变量的赋值为数字或文本形式。当变量的赋值内容为文本时，需要使用引号
(单引号、双引号均可)括住内容;当为变量赋值为数字的时候，内容不要加引号
否则会被当作字符串处理。

2.3.3命名规范

2.3.4 JavaScript关键字和保留字

2.3.5严格检测模式

2.3.6变量作用域

全局变量

局部作用域（let）

2.3.7方法的定义与调用

定义方法

apply关键字

2.4基本数据类型

JavaScript有五种原始类型分别是：Number（数字）、Boolean（布尔值）、String（字符串）、Null（空值）和Undefined（未定义）。

2.4.1Number类型

在JavaScript中使用Number类型表示数字，其数字可以是32位以内
的整数或64位以内的浮点数

八进制的数需要用数字0开头

十六进制的数需要用数字0和字母x开头
浮点数可以使用toFixed()方法规定小数点后保留几位数（遵守四舍五入）。
123 //整数
.15 //浮点数
1.123e3 //科学计数
-99 //负数
特殊值
//正确转换为Number类型时返回真（true），其他情况返回假（false）
isNaN(变量名称)

2.4.2String类型

常用方法：

获取字符串长度 msg.length

获取字符串中的单个字符 msg.charAt(1) 代码编号msg.charCodeAt(1)

连接字符串msg.concat（所要连接字符串）

查找字符串是否存在

查找与替换字符串 msg.match(正则表达式) msg.search(正则表达式) msg.replace(正则表达式，替换文本）

获取字符串片段 slice（开始，结束）去掉指定字符串，subtring（开始，结束）获取

字符串大小写转换 toLowerCase()，toUpperCase()

转义字符同C++

2.4.3Boolean类型

布尔值( boolean )在很多程序语言中都被用于进行条件判断，其值只有
两种: true (真) 或者false (假)。

2.4.4Undefined类型

所有undefined类型的输出值都是undefined。当需要输出的变量从未声明过，或者使用关键词
var声明过但是从未进行赋值时会显示undefined字样。

2.4.5Null类型

2.5常用运算符

2.5.1赋值运算符

2.5.2算术运算符

尽量避免使用浮点数进行运算，存在精度问题

2.5.3逻辑运算符

逻辑运算符有三种类型:NOT (逻辑非)、 AND(逻辑与)和OR (逻辑或) 。

2.5.4关系运算符

在JavaScript中，关系运算符共有四种:大于(> )、小于(<)、大于等于(>=)和小于等于(<=)。用于比较两个值的大小，返回值-定是布尔值(true 或false)。

2.5.5相等性运算符

2.5.6条件运算符（三目运算符）

2.5.7两个常用函数

2.6语句

2.6.1条件语句

if语句

switch语句

同C++语法

2.6.2循环语句

JavaScript 支持不同类型的循环：

for - 多次遍历代码块

for/in - 遍历对象属性

while - 当指定条件为 true 时循环一段代码块

do/while - 当指定条件为 true 时循环一段代码块

2.7函数

2.7.1定义函数

定义方式一

定义方法二

参数问题: javaSqript 可以传任意个参数，也可以不传递参数-

异常判断

<script>
        var abs = function (x){
            if (typeof x != 'number'){
                throw 'not a number';
            }
            if(x > 0){
                return x;
            }
            else {
                return -x;
            }
        }
    </script>

arguments关键字·

arguments是一个JS免费赠送的关键字;代表,传递进来的所有的参数,是一个数组!

 <script>
        var abs = function (x){
            console.log("x=>"+x);
            for (let i = 0; i < arguments.length; i++) {
                console.log(arguments[i])
            }
            if(x > 0){
                return x;
            }
            else {
                return -x;
            }
        }
    </script>

rest关键字

ES6引入的新特性,获取除了已经定义的参数之外的所有参数~ ...

<script>
        var abs = function (x,...rest){
            console.log("x=>"+x);
            console.log(rest)
            if(x > 0){
                return x;
            }
            else {
                return -x;
            }
        }
    </script>

2.7.2基础函数

相比Java而言，JavaScript 函数更加简便，无需特别声明返回值类型。
JavaScript函数如果存在返回值，直接在大括号内的代码块中使用return关键词后面紧跟需要返回的值即可。

2.7.3箭头函数

2.8JavaScript对象类型

本地对象

内置对象

宿主对象

●本地对象( native object)是ECMAScript定义的引用类型;
●内置对象( built-in object )指的是无需实例化可直接使用的对象,其实也是特殊的本地对象;
●宿主对象( host object)指的是用户的机器环境，包括DOM和BOM。

本地对象

2.8.1数组

Java的数值必须是相同类型的对象~, JS中不需要这样!
var arr = [1,2,3,4,5, 'he11o' ,nu11，true]
Array对象还包含了length属性，可以用于获取当前数组的长度，即数组中的元素个数。如果当前数组中没有包含元素，则length值为0

2.8.2日期Data

在JavaScript中使用Date对象处理时间日期有关内容。有四种初始化方式

常用方法

2.8.3正则表达式

语法格式

常用方法

2.8.4Map和Set集合(ES6新特性)

Map

<script>
        'use strict';
        let map = new Map([['BO', 90], ['tom', 100]]);
        let name = map.get('BO');
        map.set('admin',100);
        map.delete('admin');
        console.log(name);
    </script>

Set

  <script>
        'use strict';
        let set = new Set([3,1,1,1]);
        set.add(2);
        set.delete(1);
        console.log(set.has(3));
    </script>

2.8.5iterator

2.8.6对象

对象也是变量。但是对象包含很多值值名称:值对的方式来书写（名称和值由冒号分隔）

获取对象的方法

内置对象

Gobal对象

Math对象

宿主对象

2.8. 7DOM事件

JavaScript还可以在HTML页面状态发生变化时执行代码，这种状态的变化称为DOM事件( Event )。

定义了：

作为对象的 HTML 元素

所有 HTML 元素的属性

访问所有 HTML 元素的方法

所有 HTML 元素的事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

W3C DOM 标准被分为 3 个不同的部分：

Core DOM - 所有文档类型的标准模型

XML DOM - XML 文档的标准模型

HTML DOM - HTML 文档的标准模型

浏览器解析HTML网页时，会创建一个HTML DOM模型对象，通过执行JavaScript代码调用DOM方法，操作HTML元素的内容/属性/事件等，从而实现与HTML页面的互交

2.8.8操作BOM对象

浏览器对象模型( Browser Object Model，BOM )使JavaScript可以与浏览器进行交互。

常见对象

window ：浏览器窗口对象，其成员包括所有的全局变量、函数和对象

screen ：屏幕对象，通常用于获取用户可用屏幕的宽和高。

location ：位置对象，用于获得当前页面的 URL 地址，还可以把浏览器重定向到新的指定页面。

history ：历史记录对象，其中包含了浏览器的浏览历史记录。

navigator ：浏览器对象，通常用于获取用户浏览器的相关信息。

window对象

在JavaScript中window对象表示浏览器窗口，目前所有浏览器都支持该对象JavaScript中一切全局变量、函数和对象都自动成为window对象的内容。

例如，用于判断变量是否为数字的全局方法isNaN()就是window对象的方法，完整写法为window.isNaN()通常情况下window前缀可以省略不写。

常见方法

navigator对象

在JavaScript中window.navigator对象可用于获取用户浏览器的一系列信息，例如浏览器的名称、版本号等。该对象在使用时通常可以省略window前缀，简写为navigator

大多数时候，我们不会使用navigator对象，因为会被人为修改!不建议使用这些属性来判断和编写代码

screen 对象

在JavaScript中window.screen对象可用于获取屏幕的可用宽度和高度。该对象在使用时通常可以省略window前缀，简写为screen。

location 对象

document对象

history 对象

代表浏览器的历史记录

history.back()
history.forward()

2.8.9操作DOM对象

浏览器网页就是一个Dom 树形结构！

更新：更新Dom节点

遍历dom节点：得到Dom节点

删除：删除一个Dom节点

添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点

查找HTML元素

通过HTML元素的id名称查找;

通过HTML元素的标签名称查找:

通过HTML元素的类名称查找

更新节点

修改HTML文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="id1">
    123
</div>
<script>
  var id1 = document.getElementById('id1');
  //动态创建文本内容
  var date = new Date();
  document.write("当前时间为"+date.toLocaleDateString());
  //修改文本的值
  id1.innerText="456";
  //修改解析HTML文本标签
  id1.innerHTML='<strong>789</strong>';
</script>
</body>
</html>

修改HTML元素属性

修改HTML的CSS样式

删除DOM节点

删除节点的步骤:先获取父节点,在通过父节点删除自己
注意:删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>
<script>
  var self = document.getElementById('p1');
  var father = p1.parentElement;
  father.removeChild(self);
</script>
</body>
</html>

插入节点1创建

插入节点2

2.9类型转换

2.9.1转换成字符串

//布尔值类型（Boolean）和数字类型（Number）这两种基本数据类型均可使用toString()方法
//把值转换为字符串形式
var x = true;
var result = x.toString(); //返回"true"

//toString()不带参数直接使用，此时无论是整数、小数或者科学计数法表示的内容，都会显示为十进制的数值
var x1 = 99;
var x2 = 99.90;
var x3 = 1.25e8;
 
var result1 = x1.toString(); //返回值为"99"
var result2 = x2.toString(); //返回值为"99.9"
var result3 = x3.toString(); //返回值为"125000000"

var x = 10;
var result1 = x.toString(2); //声明将原始数据转换成二进制数，返回值为"1010"
var result2 = x.toString(8); //声明将原始数据转换成八进制数，返回值为"12"
var result3 = x.toString(16); //声明将原始数据转换成十六进制数，返回值为"A"

var x = null;
var result1 = String(x); //返回值为字符串"null"
var result2 = x.toString(); //发生错误，无返回值

2.9.2转换成数字

var x = "123hello";
var result = parseInt(x); //返回值是123，因为h不是有效数字，则停止检查

var x = "hello";
var result = parseInt(x); //返回值是NaN，因为第一个字符h就不是有效数字，直接停止检查

var x = "3.14";
var result = parseInt(x); //返回值是3，因为小数点不是有效数字，则停止检查

var x = "10";
var result1 = parseInt(x, 2); //表示原始数据为二进制，返回值为2
var result2 = parseInt(x, 8); //表示原始数据为八进制，返回值为8
var result3 = parseInt(x, 10); //表示原始数据为十进制，返回值为10
var result4 = parseInt(x, 16); //表示原始数据为十六进制，返回值为16

var x = "010";
var result1 = parseInt(x); //表示原始数据为八进制，返回值为8
var result2 = parseInt(x, 10); //表示原始数据为十进制，返回值为10
var result3 = parseInt(x, 8); //表示原始数据为八进制，返回值为8

var x = "hello3.14";
var result = parseFloat(x); //返回值是NaN，因为第一个字符h就不是有效数字，则停止检查

var x = "3.14hello";
var result = parseFloat(x); //返回值是3.14，因为h不是有效数字，则停止检查

var x = "3.14.15.926";
var result = parseFloat(x); //返回值是3.14，因为第二个小数点不是有效数字，则停止检查

var x = "010";
var result1 = parseInt(x); //默认为是八进制数，返回值为8
var result2 = parseFloat(x); //默认为是十进制数，返回值为10

var x = "A";
var result1 = parseInt(x, 16); //parseInt()允许十六进制数，返回值为10
var result2 = parseFloat(x); //parseFloat()不允许十六进制数，返回值为NaN

2.9.3强制类型转换

Boolean()函数

Number函数

String函数

三、JavaScript高阶

3.1JavaScript 输出

JavaScript 没有任何打印或者输出的函数

JavaScript 可以通过不同的方式来输出数据

使用 window.alert() 弹出警告框

使用 document.write() 方法将内容写到 HTML 文档中

使用 innerHTML 写入到 HTML 元素

使用 console.log() 写入到浏览器的控制台

使用 window.alert()

使用 document.write() 方法

使用 innerHTML 写入

如需从 JavaScript 访问某个 HTML 元素，使用 document.getElementById(id) 方法；使用innerHTML 来获取或插入元素内容；

使用 console.log()

3.2JSON对象/BSON

JSON: JavaScript Object Notation. JSON 是一种轻量级的数据交换格式,用于存储和传输数据

JSON 格式在语法上与创建 JavaScript 对象代码是相同的

Json，通过文本描述JS对象，方便转换JS对象传递操作，属性以键值对保存，大括号，分号，双引号，逗号，方括号(数组)，方法等等

格式:
●对象都用{}
●数组都用[]
●所有的键值对都是用key:value

后端从数据库取出数据，将数据转为Java对象，将Java对象转为json字符串，通过网络将json字符串传递给前端，前端将json字符串转为JavaScript对象，JavaScript将JavaScript对象中的数据渲染到页面

3.3面向对象编程

3.3.1原型继承

<script>
        'use strict';
        let Student = {
            name:"yanyu",
            age:20,
            run:function (){
                console.log(this.name+"run")
            }
        };
        let BO = {
            name: "BO"
        };
        BO.__proto__ = Student;
    </script>

3.3.2class继承

定义一个类

继承

原型链

3.4事件概述

事件句柄是事件发生要进行的操作。onload 属性就是我们所说的事件句柄,也称为事件属性。

表单事件

选择事件

键盘事件

窗口事件

3.5DOM事件

JavaScript还可以在页面状态发生变化时执行代码，这种状态的变化称为DOM事件(事件)。

3.6操作表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
    <span>用户名:</span><input type="text" id ="username" name="username">
    </p>
    <p>
        <span>密码:</span><input type="password" id="input-password">
    </p>
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">提交</button>
</form>
<script>
  function aaa(){
      var uname = document.getElementById('username');
      var pwd = document.getElementById('input-password');
      var md5pwd = document.getElementById('md5-password');
      md5pwd.value=md5(pwd.value);
      return true;
  }
</script>
</body>
</html>