后端<----->JSON<------>前端js<----->html

分布式渲染减少服务器压力

传统开发模式使用jsp渲染页面，服务器压力大

JavaScript

JavaScript是一种开发语言，当前最红的

可以在客户端运行也可以在服务端运行还可以在嵌入式环境运行

js是1999年和java同一年产生的

js除了语法与java类似与java基本上没关系

js是一种解释性语言

1.js的两种解释器：

1.node.js

是环境又是服务器还是npm（相当于java的maven）

2.浏览器（使它最重要的解释器）

2.js的运行

1.node下使用node xxx.js运行

2.浏览器运行

js代码无法直接在浏览器种运行,必须嵌入到html代码中（脚本语言）

2.1在script标签中运行

2.2script标签的src属性引入外部js

2.3在html元素的事件中运行（onclick="xxxx"）

2.4在地址栏运行（JavaScript:xxxxxx）

相当于<a href="javascript:xxxxxx"》 />

3.js的高效解释器V8

V8引擎是一个JavaScript引擎实现，谷歌对其进行了开源。

V8使用C++开发，在运行JavaScript之前，V8将其编译成原生机器码（IA-32, x86-64, ARM, or MIPS CPUs），并且使用了如内联缓存（inline caching）等方法来提高性能。

有了这些功能，JavaScript程序在V8引擎下的运行速度媲美二进制程序。

4.js的基本语法

1.标识符

js和java基本相同的。

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

abstract	arguments	boolean	break	byte
case	catch	char	class*	const
continue	debugger	default	delete	do
double	else	enum*	eval	export*
extends*	false	final	finally	float
for	function	goto	if	implements
import*	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super*	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

* 标记的关键字是 ECMAScript5 中新添加的。

2.变量、常量

1.数据类型

js有数据类型

number相当于java的double所有数字类型都是

string "" 与'' 一样，只有字符串类型没有字符类型

boolean true/false

object null var x = {"xxx":"xxx}JSON

Array var x = [];

undefind var x;

js是弱类型语言

一个变量时可以被赋值位多种数据类型

数据类型可以默认转换

2.js中的变量

js的变量必须先定义再使用

变量定义的3中方式

1.var var a = 1;定义在函数内部为局部变量，函数外部为全局变量

2.let let a = 1;定义在代码块（循环体，if............）中为块变量

3.赋值 a = 1；全局变量

4.const 定义常量（不可再次赋值）

3.js的变量作用范围

在方法体外定义的范围是全局，只要引入js文件就能访问

js尽量不使用全局变量

在方法体中：y = 23;隐式全局变量var y = 23;局部变量

let与var的区别

let是es6中新增命令，也是用来声明变量的，可能很多小伙伴都像我一样，定义变量的时候都会用var而很少用到let，那么，let和var到底有什么区别呢？

let和var的区别体现在作用域上。var的作用域被规定为一个函数作用域，而let则被规定为块作用域，块作用域要比函数作用域小一些，但是如果两者既没在函数中，也没在块作用域中定义，那么两者都属于全局作用域。

全局作用域

var 和 let 声明的变量在全局作用域中被定义时，两者非常相似但是，被let声明的变量不会作为全局对象window的属性，而被var声明的变量却可以

let bar = 'hehe';
var baz = 'lala';
console.log(window.bar);  //undefined
console.log(window.baz); // 'able'

函数作用域

var 和 let 在函数作用域中声明一个变量，两个变量的意义是相同的。

function  aFun(){
    let bar = 'hehe'; // 函数作用域中的变量
    var baz = 'lala'; // 函数作用域中的变量
}

块作用域

在块作用域中两者的区别较为明显， let只在for()循环中可用，而 var是对于包围for循环的整个函数可用

function  aFun1(){
    // i 对于for循环外的范围是不可见的(i is not defined)
    for(let i = 1; i<5; i++){
        //  i只有在这里是可见的
    }
    // i 对于for循环外的范围是不可见的(i is not defined)
}
function aFun2(){
    // i 对于for循环外的范围是可见的
    for(var i = 1;i<5; i++){
        // i 在for 在整个函数体内都是可见的
    }
    // i 对于for循环外的范围是可见的
}

let 和var 重新声明

var允许在同一作用域中声明同名的变量，而let不可以

let me  = 'foo';
let me  = 'bar'; //SyntaxError: Identifier 'me' has already been declared

var me = 'foo';
var me = 'bar'; //这里me被替代了，是可以重复声明的

es6中还有一个声明变量的命令const，const和let都是在声明的块作用域中有效，但是let声明的变量可变，值和类型都可以改变，没有限制。const声明额变量不能改变，所以，const一旦声明一个变量，就必须马上初始化，不能留到以后赋值

const hehe; //报错，Missing initializer in const declaration

const a = 3;
a = 5; //报错，Uncaught TypeError: Assignment to constant variable.

let 在块作用域中有效，有的时候，我们为了降低变量污染的风险，在块作用域中使用let来代替var，这样不会污染块作用域的外部作用域，降低 bug率，使代码更安全

5.常用运算

算数，逻辑，关系

==是值相等就为true

=== 是值与类型都相等才为true

与=的区别

简单来说： == 代表相同， ===代表严格相同, 为啥这么说呢，

这么理解： 当进行双等号比较时候： 先检查两个操作数数据类型，如果相同， 则进行=比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较， 而=比较时， 如果类型不同，直接就是false.

操作数1 == 操作数2， 操作数1 === 操作数2

比较过程：

双等号==：

（1）如果两个值类型相同，再进行三个等号(===)的比较

（2）如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较：

1）如果一个是null，一个是undefined，那么相等

2）如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较

三等号===:

（1）如果类型不同，就一定不相等

（2）如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能使用isNaN( ) 来判断）

（3）如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。

（4）如果两个值都是true，或是false，那么相等

（5）如果两个值都引用同一个对象或是函数，那么相等，否则不相等

（6）如果两个值都是null，或是undefined，那么相等

6.js的结构化编程

1.顺序结构

js中回车也是换行符，相当于;

\为续行符

console.log("abc
def");
/*这是两句，报错*/

2.分支结构

1.if()的条件

0（0.0，0.00000）为false非0（0.1，0.00001）为true

空字符串为fasle（"")非空字符串为true

null为false，非null（{}）为true

（a=3)赋值操作为true

null == null 为true

null == undefined 为true

null === undefined 为fasle

2.switch

switch的类型可以不同

var key;
switch(key){
	case 1:
		break;
	case 'abcd':
		break;
	case true:
		break;
	case undefined:
		console.log("undefined")
		break;
	default :
		
}

3.循环结构

while/do....while/for/forecagh/for.....of

foreach可遍历数组也可遍历JSON（对象）

var array=[2,1,4,6];
// 遍历数组，i表示数组下标
	for(var i in array){
		console.log(array[i])
	}
	var student={
		"name":"张三",
		"sex":"男",
		"age":22
	}
	// 遍历对象
	// 使用对象[key]取值，p表示对象的key
	for(var p in student){
		console.log(student[p])
	}

4.函数

1.函数的定义

function 函数名 (形参列表){函数体};

匿名函数

function (){};

var a = function(){};

调用：a();

形参不用写var修饰

形参与实参可以不一致（类型，数量，顺序）

方法可以做参数

匿名函数的简写，箭头函数：(x,y)=>x*y

// js的函数
function test1(){
	
}
// 匿名函数
var test2=function(){
	console.log("这是一个匿名函数")
}

// test2();

function test3(a,b){
	console.log(a);
	console.log(b);
}

// test3("aaa","bbb")
// test3(222,333)
//test3(222)//形参和实参不一致
function add(a,b){
	return a+b;
}

function compute1(a,b,fn){
	return fn(a,b);
}
// 函数做为参数
console.log(compute1(3,5,add))
//策略模式（把匿名函数作为参数进行传递）
console.log(compute1(3,5,function(x,y){
	return x-y;
}))
// 匿名函数的简写，箭头函数
console.log(compute1(3,5,(x,y)=>x*y))

7.js的面向对象

1.类

1.自定义类

一个函数，new了就是类，不new就是普通函数

// js的定义类
function Student(_name){
	this.name=_name;
}

var student=new Student("张三");//被new才是类，没有new就是函数
console.log(student.name);

var student1=Student("李四");
console.log(student1);
//console.log(student1.name);
console.log(this.name);