Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。JavaScript 的正式名称是 "ECMAScript"。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)。Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言，从 1996 年开始，已经出现在所有的 Netscape 和 Microsoft 浏览器中。ECMA-262 的开发始于 1996 年，在 1997 年 7 月，ECMA 会员大会采纳了它的首个版本。JavaScript的组成包含ECMAScript、DOM、BOM。JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和动画特效等

是一种由欧洲计算机制造商协会（ECMA）通过ECMA-262标准化的脚本程序语言,简单点说，ECMAScript描述了语法、类型、语句、关键字、保留字、运算符和对象。它就是定义了脚本语言的所有属性、方法和对象。

把整个页面规划成由节点层构成的文档，它不与浏览器、平台、语言相关，为web开发者提供一个标准可以访问站点中的数据、脚本和表现层对象.DOM编程可以实现网页内容校验和动态变化的效果

是浏览器的一种特性，它可以对浏览器窗口进行访问和操作，例如移动、关闭窗口，调整窗口的大小，支持cookie等。BOM编程可以实现动态控制浏览器本身行为的效果

也有人这么说:

ECMAScript可以理解为JS的基础语法部分

DOM可以简单理解为,使用document对象操作文档内容的编程

BOM可以理解为,使用window对象操作浏览器行为的编程

JS是运行在浏览器上的一种脚本语言

脚本语言是一种简单的程序，规模小,不需要编译,运行快,是由一些ASCII字符构成，可以使用任何一种文本编辑器编写。脚本语言是指在web浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。一些程序语言（如C、C++、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。

面向对象有三大特点（封装，继承，多态）缺一不可。通常"基于对象"是使用对象，但是无法利用现有的对象模板产生新的对象类型，也就是说"基于对象"没有继承的特点。没有了继承的概念也就无从谈论"多态"

在网页中执行了某种操作的动作，被称为"事件"(Event)，比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

变量类型是采用弱类型，并未使用严格的数据类型。var a,b,c;  a=123;  b="abc"; a=b; 

JavaScript不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互

JavaScript依赖于浏览器本身，与操作平台无关， 只要计算机安装了支持JavaScript的浏览器（装有JavaScript解释器），JavaScript程序就可以正确执行。

各种浏览器支持JavaScript的程度是不一样的，支持和不完全支持JavaScript的 浏览器在浏览同一个带有JavaScript脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。

JavaScript是Netscape公司的产品，是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，它的前身是Live Script；Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发； Java的前身是Oak语言。

JavaScript是脚本语言，是一种基于对象的语言。本身提供了非常丰富的内部对象供设计人员使用，但不支持继承和多态。Java是面向对象的，是一种真正的面向对象的语言，支持封装、继承和多态。

Java采用强类型变量检查，即所有变量在编译之前必须声明为某一指定类型。如: int  x=1234;JavaScript中是弱类型变量。统一采用var声明，可赋各种数据类型值。

Java运行与服务器端的,大型编程语言, JS运行于客户端(浏览器)一种小规模脚本语言

HTML和CSS和JS都是前端的主要技术,三者各有分工.HTML可以用于制作网页的主体结构,CSS用于给网页做美化,JS用于在网页上添加动态效果

缺点:

1我们定义的JS代码只能在当前一个网页中使用,代码复用度低,可维护性低

2 JS代码和HTML代码混合在一个文件中,可阅读性差

将JS代码放入外部JS文件中,通过script标签引入

优点:

代码复用度高,更易于维护代码

注意事项:

1在一个页面上可以同时引入多个JS文件

2每个JS文件的引入都要使用一个独立的script标签

3内嵌式和链接式的引入不能使用同一标签

1数值型：

number整数和浮点数统称为数值。例如85或3.1415926等。

2字符串型：

String由0个,1个或多个字符组成的序列。在JavaScript中，用双引号或单引号括起来表示，如"您好"、'学习JavaScript' 等。

3逻辑（布尔）型：

boolean用true或false来表示。

4空（null）值：

表示没有值，用于定义空的或不存在的引用。要注意，空值不等同于空字符串""或0。

5未定义（undefined）值：

它也是一个保留字。表示变量虽然已经声明，但却没有赋值。

6除了以上五种基本的数据类型之外，JavaScript还支持复合数据类型Object，复合数据类型包括对象和数组两种。 

JS中运算符号大部分和java中的运算符一样,我们在这里分析一下特殊的运算符号

关于/%

JS中,数字类型都是number,除法的结果中如果没有小数位,直接就是一个整数,如有小数位,才是浮点数

JS中如果出现除零,那么结果是 infinity,而不是报错

JS取余数运算对于浮点数仍然有效,如果和0取余数,结果是NaN(not a number)

关于+

+同时也是连接运算符,看两端的变量类型,如果都是number那么就是算数中的加法 如果有字符串,那么就是连接符号,如果是布尔类型和number相加,那么会将true转化为1 将false 转化为0

关于== 等值符

先比较类型,如果类型一致,再比较内容,如果类型不一致,会强制转换为number再比较内容

关于=== 等同符

数据类型不同 直接返回false如果类型相同 才会比较内容

基本和JAVA中的一致
顺序结构 略 
分支结构 if  switch 

循环结构 while  do_while for  
 

什么是JS的函数:

类似于java中的方法,JS中也可以定义一些函数,java中的方法签名包含访问修饰符,返回值类型,方法名,参数列表,异常列表,但是JS中定义函数的语法相对简单很多,主要以function作为函数关键字,具备函数名和参数列表,但是没有访问修饰符也没有返回值类型关键字和异常列表

函数定义的三种语法

函数参数和返回值

JS数组创建的四种语法

JS中数组元素和长度使用时的特征

数组的常用方法

数组元素的排序

JS中的常用对象

JS基于对象的脚本语言 ,有类和对象,但是没有封装,继承,多态,Java script 中有一些浏览器直接识别并使用的对象,常见的对象有Array,String对象,Math对象,Number对象,Date对象等等.

String和java中的String很类似,的常用方法

方法

Number的常用属性和方法(包装类)

属性

数字方法

Math对象

Date对象

Date 对象用于处理日期与时间。

创建 Date 对象： new Date()

以下四种方法同样可以创建 Date 对象：

var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

其他方法

JS中自定义对象

JS除了一些常用方法和类以外,允许我们自己定义对象,在JS中自定义对象有三种可用的语法格式,分别为:
1调用系统的构造函数创建对象
2自定义构造函数创建对象
3字面量的方式创建对象

第一种语法:调用系统的构造函数创建对象(Object)

第二种语法: 自定义构造函数创建对象(function)

第三种语法: 字面量的方式创建对象(JSON)

当我们用构造方法创建一个类时,在内存会预先调用构造方法创建一个对象,这对象我们称之为原型对象,构造方法对象中有一个prototype属性指向该对象,原型对象中有一个constructor属性指向构造方法.获得一个类的原型对象可以通过类名.prototype的方式获得.

当前类的每一个对象内部有一个 _proto_的一个属性,指向他们的原型, 当我们用对象获取属性和调用方法时,如果当前对象中没有,那么会去他们所对应的原型对象中去找,也就是说,我们通过对原型的操作可以实现为一个类所有的对象添加属性和方法.

一个类的原型是一个Object类的对象,也就是说,原型也有一个_proto_属性,指向Object的原型对象,那么也就是说 Person prototype中没有的属性和方法会继续向Object  prototype去找,也就是说,我们在Object原型中添加的属性和方法,我们在person1和person2中也可以使用.那么这种连续的 _proto_属性指向就形成了原型链

可以被浏览器侦测到的人或者浏览器本身的行为,人对浏览器或者浏览器对网页做了什么事,JS可以根据不同行为.绑定一些不同的响应代码处理,让浏览器和人的行为之间有一个交互

给页面上的元素先绑定事件  然后通过行为去触发

鼠标事件

键盘事件

表单事件

页面加载事件

什么是BOM

BOM是Browser Object Model的简写，即浏览器对象模型。

BOM有一系列对象组成，是访问、控制、修改浏览器的属性的方法

BOM没有统一的标准(每种客户端都可以自定标准)。

BOM的顶层是window对象

什么是DOM

DOM是Document Object Model的简写，即文档对象模型。

DOM用于XHTML、XML文档的应用程序接口(API)。

DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。

DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。

DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。

DOM的顶层是document对象

DOM和BOM的关系

红色框内是归DOM，绿色框内归BOM；也可以说DOM也是归BOM管的

BOM编程就是把整个浏览器抽象成一个对象(window),这个对象中有很多的属性和方法,访问这些属性或者调用这些方法就可以控制浏览器作出…行为

DOM编程就是把浏览器当前页面对应的文档抽象成一个对象(document),这个对象中有很多关于操作文档的一些属性和方法,访问这些属性和方法的时候,我们就可以通过代码动态控制页面上显示的内容

BOM 是为了操作浏览器出现的 API，window 是其根对象。

DOM 是为了操作文档出现的 API，document 是其根对象。

window对象及常用方法

什么是window对象

Window 对象描述

Window 对象简单理解就是把浏览器抽象成一个对象,它表示一个浏览器窗口或一个框架。在客户端 JavaScript中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写document，而不必写 window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写alert()，而不必写 Window.alert()。

除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。除了这两个属性之外，parent 属性、top 属性以及frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。

Window 对象属性

Window 对象方法

Window  三种弹窗方式

定时器的使用

open和close方法

locations对象

locations对象,是window对象的一个属性,代表浏览器上URL地址栏,使用locations对象可以操作地址栏

history对象

history对象是window对象的一个属性,代表浏览器访问历史记录,通过history的操作我们可以实现翻阅浏览器历史网页

screen和navigator
screen代表屏幕,navigator代表浏览器软件本身,通过这两个对象可以获得屏幕和浏览器软件的一些信息

什么是DOM编程

简单来说:DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.

什么是document

document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。

document对象如何获取

document对象是window对象的一个成员属性，通过window.document来访问，当然也可以直接使用document,根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。

DOM节点分类node

结点对象:Node,document对象中的每一个分支点都是一个node对象,它有三个子类

元素节点 Element   如:<a href="链接地址">我的链接</a>

属性节点 Attribute  如:href="链接地址"

文本节点 Text      如:我的链接

DOM操作的内容

1.查询元素（获取元素,进而操作元素,或者元素的属性,文本）

2.操作文本

3.操作属性

4.操作元素

5.操作CSS样式（一个特殊的属性style）

实例代码分析

树形结构图

Node节点常用的属性和方法

直接获取节点的几种方式

操作节点属性

通过style.css样式名和通过设置class属性两种方式实现

innerHtml 操作双标签中间的HTML

innerText  操作双标签中间的 Text

value      操作表单标签值
 

创建元素createElement()

增加元素appendChild()

删除元素removeChild()

案例开发

认识Echarts 

Apache ECharts 是一个正在由 Apache 孵化器赞助的 Apache 开源基金会孵化的项目。官方网址：http://echarts.apache.org/zh/index.html

2018年3月份，全球著名开源社区 Apache 基金会宣布“百度开源的 ECharts 项目全票通过进入 Apache 孵化器”。这是百度第一个进入国际顶级开源社区的项目，也标志着百度开源正式进入开源发展的快车道。

ECharts 成为Apache 孵化器项目之前，已经是国内可视化生态领域的领军者，近年内连续被开源中国评选为“年度最受欢迎的中国开源软件”，并广泛被各行业企业以及事业单位、科研院所应用。涉及行业包含金融、教育、医疗、物流、气候监测等众多领域，其中甚至包括阿里巴巴、腾讯、华为、联想、小米、国家电网、中国石化等。

ECharts 负责人祖明介绍到：“ ECharts 作为拥有丰富的可视化图表类型和深度交互能力的开源可视化库，配置便捷容易上手，同时上千的配置项和不同层面的扩展机制带来了灵活的定制能力。ECharts 底层依托了开源渲染引擎 ZRender ，支持 Canvas 和 SVG 等多种方式的渲染，支持 PC 、移动端、数据大屏、服务端渲染等多种设备场景。

ECharts（Enterprise Charts），一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

Echcarts的组件

echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：

²  series（系列，一组数值以及他们映射成的图）

²  xAxis（直角坐标系 X 轴）

²  yAxis（直角坐标系 Y 轴）

²  tooltip（提示框组件）

²  toolbox（工具栏组件）

²  title（标题）

²  legend（图例）

Echarts快速使用