前端三剑客：JavaScript

一、JavaScript的历史

1.JavaScript的历史

1990年底，欧洲核能研究组织（CERN）科学教Tim Berners-Lee，在全世界最大的电脑网络--互联网的基础上，发明了万维网（World Wide Web），从此可以在网上浏览网页文件；最早的网页只能在操作系统的终端里浏览，也就是说只能使用命令行操作，网页都是在字符窗口中显示，这当然非常不方便；

1992年底，美国国家超级电脑应用中心（NSCA）开始开发一个独立的浏览器，叫做Mosaic；这是人类历史上第一个浏览器，从此网页可以在图形界面的窗口浏览；

1994年10月，NCSA的一个程序员Marc Andreessen联合风险投资家Jim Clark，成立了Mosaic通信公司（Mosaic Communications），不久后改名为Netscape；这家公司的方向，就是在Mosaic的基础上，开发面向普通用户法人新一代浏览器Netscape Navigator；

1994年12月，Navogator发布了1.0版，市场份额一举超过90%；

Netscape公司很快发现，Navigator浏览器需要一种可以嵌入网页的脚本语言，用来控制浏览器行为；当时，网速很慢而且上网费很贵，有些操作不宜在服务器端完成；比如，如果用户忘记填写“用户名”，就点了“发送”按钮，到服务器再发现这一点就有点太晚了，最好能在用户发出数据之前，就告诉用户“请填写用户名”；这就需要在网页中嵌入小程序，让浏览器检查每一栏是否都填写了；

管理层对这种浏览器脚本语言的设想是：功能不需要太强，语法较为简单，简单学习和部署；那一年，正逢Sun公司的Java语言问世，市场推广活动非常成功；Netscape公司决定与Sun公司合作，浏览器支持嵌入Java小程序（后来称为Java applet）；但是，浏览器的脚本语言是否就用Java，则存在争论；后来，还是决定不适用Java，因为网页小程序不需要Java这么“重”的语法；但是，同时也决定脚本语言的语法要接近Java，并且可以智齿Java程序；这些设想直接排除了使用现存语言，比如Perl，Python,和TCL；

1995年，Netscape公司雇佣了程序员Brendan Eich开发的这种网页脚本语言；Brendan Eich有很强的函数式编程背景，希望以Scheme语言（函数式语言鼻祖LISP语言的一种方言）为蓝本，实现这种新语言；

1995年5月，Brendan Eich只用了10天，就设计完成了这种语言的第一版；它是一个大杂烩，语法有多种来源：

• 基本语法：借鉴C语言和Java语言；
• 数据结构：借鉴Java语言，包括将值分为原始值和对象两大类；
• 函数的用法：借鉴Scheme语言和Awk语言，将函数当做第一种公民，并引入闭包；
• 原型继承模型；借鉴Self语言（Smalltalk的一种变种）；
• 正则表达式：借鉴Perl语言；
• 字符串和数组处理，借鉴Python语言

为了保持简单，这种脚本语言缺少一些关键的功能，比如块级作用域，模型，子类型（subtyping）等等，但是可以利用现有功能找出解决办法；这种功能的不足，直接导致了后来JavaScript的一个显著缺点；对于其他语言，你需要学习语言的各种功能，而对于JavaScript，你尝尝需要学习各种解决问题的模式；而且由于来源多样，从一开始就注定，JavaScript的编程风格是函数式编程和面向对象编程的一种混合体；

Netscape公司的这种浏览器脚本语言，最初名字叫做Mocha，1995年9月改为LiveScript；12月，Netscape公司与Sun公司（Java语言的发明者和所有者）达成协议，后者允许将这种语言叫做JavaScript；这样一来，Netscape公司可以借助Java语言的声势，而Sun公司则将自己的影响力扩展到了浏览器；

之所以起这个名字，并不是因为JavaScript本身与Java语言有多么深的关系（事实上，两者关系并不深），而是因为Netscape公司已经决定，使用Java语言开发网络应用程序，JavaScript可以像胶水一样，将各个部分连接起来；当然，后来的历史是Java语言的浏览器插件失败了，JavaScript反而发扬光大；

1995年12月4日，Netscape公司与Sun公司联合发布了JavaScript语言，当时的意图是将JavaScript作为Java的补充，用来操作网页；

1996年3月，Navigator 2.0浏览器正式内置了JavaScript脚本语言；

2.JavaScript与ECMAScript的关系

1996年8月，微软模仿JavaScript开发了一种相近的语言，取名为JScript（JavaScript是Netscape的注册商标，微软不能用），首先内置于IE 3.0,。Netscape公司面临丧失浏览器脚本语言的主导权的局面；

1996年11月，Netscape公司决定将JavaScript提交给国际标准化组织ECMA（European Computer Manufacturers Association），希望JavaScript能够称为国际标准，从此抵抗微软；ECMA的39号技术委员会（Technical Commitee 38）负责指定和审核这个标准，成员由业内的大公司派出的工程师组成，目前工25人；该委员会定期开会，所有的邮件和讨论和会议记录，都是公开的；

1997年7月，ECMA组织发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称之为ECMAScript；这个版本就是ECMAScript 1.0版；之所以不叫JavaScript，一方面是由于商标的关系，Java是Sun公司的商标，根据一份授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript已经被Netscape公司注册为商标，另一方面也是想体现这门语言的制定者是ECMA，不是Netscape，这样有利于保证这门语言的开放性和中立性；因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现；在日常场合，这两个词是可以互换的；

ECMAScript只是用来标准化JavaScript这种语言的基本语法结构，与部署环境相关的标准都由其他标准规定，比如DOM的标准就是W3C组织（World Wide Web）指定的；

ECMA-262标准后来也被另一个国际化标准组织ISO（International Organization for Standardization）批准，标准号是ISO-16262；

3.JavaScript与Java的关系

JavaScript和Java是两种不一样的语言，但是他们质检存在联系；

JavaScript的基本语法和对象体系，是模仿Java而设计的；但是，JavaScript没有采用Java的静态类型；正式因为JavaScript与Java很大的相似性，所以这门语言从一开始的LiveScript改名为JavaScript；基本上，JavaScript这个名字的原意是“很像Java的脚本语言”；

在JavaScript语言中，函数是一种独立的数据类型，以及采用基于原型对象（prototype）的继承链；这是它与Java语法最大的两点区别；JavaScript语法要比Java自由得多；

另外，Java语言需要编译，而JavaScript语言则是运行时由解释器直接执行；

总是，JavaScript的原始设计目标是一种小型的，简单的动态语言，与Java有足够的相似性，使得使用者（尤其是Java程序员）可以快速上手；

4.JavaScript的版本

1997年7月，ECMAScript 1.0发布；

1998年6月，ECMAScript 2.0发布；

1999年12月，ECMAScript 3.0发布，称为JavaScript 的通行标准，得到了广泛支持；

2007年10月，ECMAScript 4.0版草案发布，对3.0做了大幅升级，预计次年8月发布正式版本；草案发布后，由于4.0版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧；以Yaho，Microsoft、Google为首的大公司，反对JavaScript的大幅升级，主张小幅改动；以JavaScript创造者Brendan Eich为首的Mozilla公司，则坚持当前的草案；

2008年7月，由于对于下一版本应该包含哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发（即废除了这个版本），将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号其名为Harmony（和谐）；会后不久，ECMAScript 3.1就改名为ECMAScript 5；

2009年12月，ECMAScript 5.1正式发布。Harmony项目则一分为二，一些较为可行的设想丁明伟JavaScript.next继续开发，后来演变成ECMAScript 6；一些不是很成熟的设想，则被视为JavaScript.next.next，在更远的将来再考虑推出；TC39的总体考虑是，ECMAScript 5与ECMAScript 3基本保持兼容，较大的语法修正和新功能加入，将有JavaScript.next完后；当时，JavaScript.next指的是ECMAScript 6；第六版发布以后，将指ECMAScript 7;TC39预计，ECMAScript 5会在2013年的年中称为JavaScript开发的主流标准，并在此后五年中一直保持这个位置；

2011年6月，ECMAScript 5.1版本发布，并且称为ISO国际标准（ISO/IEC 16262:2011）；到了2012年底，所有主要浏览器都支持ECMAScript 5.1版的全部功能；

2013年3月，ECMAScript 6草案冻结，不再添加新功能；新的功能设想都将被放到ECMAScript 7；

2013年12月，ECMAScript 6草案发布；然后是12个月的讨论期，听取各方反馈；

2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript  2015”；这是因为TC39委员会计划，以后每年发布一个ECMAScript版本，下一个版本在2016年发布，称为“ECMAScript 2016”；

除了ECMAScript的版本，很长一段时间中，Netscape公司（以及继承它的Mozilla基金会）在内部使用自己的版本号；这导致了JavaScript有自己不同于ECMAScript的版本号；1996年3月，Navigator 2.0内置了JavaScript 1.0；JavaScript 1.1版对应ECMAScript 1.0，但是直到JavaScript 1.4版才完全兼容ECMAScript 1.0；JavaScript 1.5版完全兼容ECMAScript 3.0；目前的JavaScript 1.8版完全兼容ECMAScript 5；

5.重要事件记录

JavaScript伴随着互联网的发展一起发展；互联网周边技术的快速发展，刺激和推动了JavaScript语言的发展；

1996年，样式表标准CSS第一版发布。

1997年，DHTML（Dynamic HTML，动态HTML）发布，允许动态改变网页内容。这标志着DOM模式（Document Object Model，文档对象模型）正式应用。

1998年，Netscape公司开源了浏览器套件，这导致了Mozilla项目的诞生。几个月后，美国在线（AOL）宣布并购Netscape。

1999年，IE 5部署了XMLHttpRequest接口，允许JavaScript发出HTTP请求，为后来大行其道的Ajax应用创造了条件。

2000年，KDE项目重写了浏览器引擎KHTML，为后来的WebKit和Blink引擎打下基础。这一年的10月23日，KDE 2.0发布，第一次将KHTML浏览器包括其中。

2001年，微软公司时隔5年之后，发布了IE浏览器的下一个版本Internet Explorer 6。这是当时最先进的浏览器，它后来统治了浏览器市场多年。

2001年，Douglas Crockford提出了JSON格式，用于取代XML格式，进行服务器和网页之间的数据交换。JavaScript可以原生支持这种格式，不需要额外部署代码。

2002年，Mozilla项目发布了它的浏览器的第一版，后来起名为Firefox。

2003年，苹果公司发布了Safari浏览器的第一版。

2004年，Google公司发布了Gmail，促成了互联网应用程序（Web Application）这个概念的诞生。由于Gmail是在4月1日发布的，很多人起初以为这只是一个玩笑。

2004年，Dojo框架诞生，为不同浏览器提供了同一接口，并为主要功能提供了便利的调用方法。这标志着JavaScript编程框架的时代开始来临。

2004年，WHATWG组织成立，致力于加速HTML语言的标准化进程。

2005年，苹果公司在KHTML引擎基础上，建立了WebKit引擎。

2005年，Ajax方法（Asynchronous JavaScript and XML）正式诞生，Jesse James Garrett发明了这个词汇。它开始流行的标志是，2月份发布的Google Maps项目大量采用该方法。它几乎成了新一代网站的标准做法，促成了Web 2.0时代的来临。

2005年，Apache基金会发布了CouchDB数据库。这是一个基于JSON格式的数据库，可以用JavaScript函数定义视图和索引。它在本质上有别于传统的关系型数据库，标识着NoSQL类型的数据库诞生。

2006年，jQuery函数库诞生，作者为John Resig。jQuery为操作网页DOM结构提供了非常强大易用的接口，成为了使用最广泛的函数库，并且让JavaScript语言的应用难度大大降低，推动了这种语言的流行。

2006年，微软公司发布IE 7，标志重新开始启动浏览器的开发。

2006年，Google推出 Google Web Toolkit 项目（缩写为GWT），提供Java编译成JavaScript的功能，开创了将其他语言转为JavaScript的先河。

2007年，Webkit引擎在iPhone手机中得到部署。它最初基于KDE项目，2003年苹果公司首先采用，2005年开源。这标志着JavaScript语言开始能在手机中使用了，意味着有可能写出在桌面电脑和手机中都能使用的程序。

2007年，Douglas Crockford发表了名为《JavaScript: The good parts》的演讲，次年由O’Reilly出版社出版。这标志着软件行业开始严肃对待JavaScript语言，对它的语法开始重新认识，

2008年，V8编译器诞生。这是Google公司为Chrome浏览器而开发的，它的特点是让JavaScript的运行变得非常快。它提高了JavaScript的性能，推动了语法的改进和标准化，改变外界对JavaScript的不佳印象。同时，V8是开源的，任何人想要一种快速的嵌入式脚本语言，都可以采用V8，这拓展了JavaScript的应用领域。

2009年，Node.js项目诞生，创始人为Ryan Dahl，它标志着JavaScript可以用于服务器端编程，从此网站的前端和后端可以使用同一种语言开发。并且，Node.js可以承受很大的并发流量，使得开发某些互联网大规模的实时应用变得容易。

2009年，Jeremy Ashkenas发布了CoffeeScript的最初版本。CoffeeScript可以被转化为JavaScript运行，但是语法要比JavaScript简洁。这开启了其他语言转为JavaScript的风潮。

2009年，PhoneGap项目诞生，它将HTML5和JavaScript引入移动设备的应用程序开发，主要针对iOS和Android平台，使得JavaScript可以用于跨平台的应用程序开发。

2009，Google发布Chrome OS，号称是以浏览器为基础发展成的操作系统，允许直接使用JavaScript编写应用程序。类似的项目还有Mozilla的Firefox OS。

2010年，三个重要的项目诞生，分别是NPM、BackboneJS和RequireJS，标志着JavaScript进入模块化开发的时代。

2011年，微软公司发布Windows 8操作系统，将JavaScript作为应用程序的开发语言之一，直接提供系统支持。

2011年，Google发布了Dart语言，目的是为了结束JavaScript语言在浏览器中的垄断，提供更合理、更强大的语法和功能。Chromium浏览器有内置的Dart虚拟机，可以运行Dart程序，但Dart程序也可以被编译成JavaScript程序运行。

2011年，微软工程师Scott Hanselman提出，JavaScript将是互联网的汇编语言。因为它无所不在，而且正在变得越来越快。其他语言的程序可以被转成JavaScript语言，然后在浏览器中运行。

2012年，单页面应用程序框架（single-page app framework）开始崛起，AngularJS项目和Ember项目都发布了1.0版本。

2012年，微软发布TypeScript语言。该语言被设计成JavaScript的超集，这意味着所有JavaScipt程序，都可以不经修改地在TypeScript中运行。同时，TypeScript添加了很多新的语法特性，主要目的是为了开发大型程序，然后还可以被编译成JavaScript运行。

2012年，Mozilla基金会提出asm.js规格。asm.js是JavaScript的一个子集，所有符合asm.js的程序都可以在浏览器中运行，它的特殊之处在于语法有严格限定，可以被快速编译成性能良好的机器码。这样做的目的，是为了给其他语言提供一个编译规范，使其可以被编译成高效的JavaScript代码。同时，Mozilla基金会还发起了Emscripten项目，目标就是提供一个跨语言的编译器，能够将LLVM的位代码（bitcode）转为JavaScript代码，在浏览器中运行。因为大部分LLVM位代码都是从C / C++语言生成的，这意味着C / C++将可以在浏览器中运行。此外，Mozilla旗下还有LLJS（将JavaScript转为C代码）项目和River Trail（一个用于多核心处理器的ECMAScript扩展）项目。目前，在可以被编译成JavaScript的语言列表上，共有将近40种语言。

2013年，Mozilla基金会发布手机操作系统Firefox OS，该操作系统的整个用户界面都使用JavaScript。

2013年，ECMA正式推出JSON的国际标准，这意味着JSON格式已经变得与XML格式一样重要和正式了。

2013年5月，Facebook发布UI框架库React，引入了新的JSX语法，使得UI层可以用组件开发。

2014年，微软推出JavaScript的Windows库WinJS，标志微软公司全面支持JavaScript与Windows操作系统的融合。

2014年11月，由于对Joyent公司垄断Node项目、以及该项目进展缓慢的不满，一部分核心开发者离开了Node.js，创造了io.js项目，这是一个更开放、更新更频繁的Node.js版本，很短时间内就发布到了2.0版。三个月后，Joyent公司宣布放弃对Node项目的控制，将其转交给新成立的开放性质的Node基金会。随后，io.js项目宣布回归Node，两个版本将合并。

2015年3月，Facebook公司发布了React Native项目，将React框架移植到了手机端，可以用来开发手机App。它会将JavaScript代码转为iOS平台的Objective-C代码，或者Android平台的Java代码，从而为JavaScript语言开发高性能的原生App打开了一条道路。

2015年4月，Angular框架宣布，2.0版将基于微软公司的TypeScript语言开发，这等于为JavaScript语言引入了强类型。

2015年5月，Node模块管理器npm超越CPAN，标志着JavaScript成为世界上软件模块最多的语言。

2015年5月，Google公司的Polymer框架发布1.0版。该项目的目标是生产环境可以使用WebComponent组件，如果能够达到目标，Web开发将进入一个全新的以组件为开发基础的阶段。

2015年6月，ECMA标准化组织正式批准了ECMAScript 6语言标准，定名为《ECMAScript 2015 标准》。JavaScript语言正式进入了下一个阶段，成为一种企业级的、开发大规模应用的语言。这个标准从提出到批准，历时10年，而JavaScript语言从诞生至今也已经20年了。

2015年6月，Mozilla 在 asm.js 的基础上发布 WebAssembly 项目。这是一种JavaScript语言编译后的二进制格式，类似于Java的字节码，有利于移动设备加载JavaScript脚本，解析速度提高了20+倍。这意味着将来的软件，会发布JavaScript二进制包。

2016年6月，《ECMAScript 2016 标准》发布。与前一年发布的版本相比，它只增加了两个较小的特性。

2017年6月，《ECMAScript 2017 标准》发布，正式引入了 async 函数，使得异步操作的写法出现了根本的变化。

2017年11月，所有主流浏览器全部支持 WebAssembly，这意味着任何语言都可以编译成 JavaScript，在浏览器运行。

二、JS的引入方式

1 直接编写
    <script>
        console.log('hello yuan')
    </script>
2 导入文件
    <script src="hello.js"></script>

三、EMCAScript基本语法

js是一门弱类型编程语言，属于基于对象和基于原型的脚本语言；

1.变量

// 方式1 先声明再赋值
var 变量名;   // 声明的变量如果没有进行赋值,或者没有被定义的变量,值默认是undefined
变量名 = 变量值;

// 方式2 声明并赋值
var 变量名 = 变量值;

// 方式3 一行可以声明多个变量.并且可以是不同类型
var name="yuan", age=20, job="lecturer";

1.  声明变量时，可以不用var，如果不用var，那么它是全局变量
2. 变量命名：首字符只能是字母、下划线、$美元符号 三选一；余下的字符可以是下划线、美元符号、任何字母或数字字符且区分大小写

2.注释

JS的注释方法：与Java一致

// 单行注释
// console.log('hello sxm')

/* 
多行注释
*/

3.语句分隔符

var a = 1   // 分号和换行符作为语句分隔符号
var b = 2;
console.log(a,b)

四、EMCAScript基本数据类型

1.数字类型

JavaScript没有整型和浮点型，只有一种数字类型，即number类型；

var x = 10;
var y = 3.14;
console.log(x,typeof x);  // 10 "number"
console.log(y,typeof y);  // 3.14 "number"

数字类型保留小数的内置方法：number.toFixed(n)；n为保留的小数位数 

2.字符串

2.1字符串创建（两种方式）

1. 变量 = “字符串”
2. 字符串对象名称 = new String(“hello world”）

var str1="hello world";
var str1= new String("hello word");

2.2字符串的内置方法

格式	案例	说明
s.length		计算字符串的长度
s.toUpperCase()		将字符串转换为大写字符串
s.toLowerCase()		将字符串转换为小写字符串
s[3]		按照字符串的索引，打印字符串的第3位字符（索引从0开始）
s.indecOf("o")		获取字符o在s字符串中的索引位置
s.slice(1,4)		切片，获取1到4的字符串；顾头不顾尾； 支持负索引；
s.split("o")		字符串分割；返回数组格式的结果；
s.substr(0,3)		字符串截取；从第0个索引位置，截取3个字符
s.trim()		移除字符串首尾空格

2.3字符串的正则表达式 

3. 布尔值

1. Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1，false=0
2. 布尔值也可以看做on/off、yes/no、1/0对应true/false、Boolean值主要用于JavaScript的控制语句

var b = true
console.log(b, typeof(b))
console.log(true == 1)
console.log(true + 1)
console.log(false + 1)

4.空值（Undefind和Null）

undefind类型

1. undefind类型只有一个值，即undefind
2. 当声明的变量未初始化时，该变量的默认值是undefind
3. 当函数无明确返回值时，返回的值也是undefind

null类型

1. 另一个只有一个值的类型是null，它只有一个专用值null，即它的字面量；
2. 值undefind实际上是从值null派生来的，因此EMCAScript把他们定义为相等的

尽量这两个空值相等，但他们的含义不同；undefind是声明了变量但未对其初始化时赋予该变量的值，null值则用于表示尚未存在的对象；如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是null；

5.类型转换

js中，类型转换有两种；一种是强制转换，一种是自动转换；

因为js是一门弱类型的脚本语言，所以变量会在运算符进行运算要求，有时根据运算符号要求，进行自动转换；

5.1强制转换

类别	方法	案例	说明
转换为数值类型；	parseInt()	var box1="一100件" console.log(parseInt(box1), typeof parseInt(box1)) // NaN number 转换到整数失败的数据值为NaN，数据类型为number	把数据转换为整数
	parseFloat()		把数据转换为小数
	Number()		把数据转换为数值
转换为字符串	变量.toString()		把数据转换为字符串
	String()
转换为布尔类型	Boolean()		把数据转换为布尔类型

5.2自动转换

所谓自动转换，其实就是弱类型中的变量会根据当前代码的需求，进行类型的自动隐式转换；

var box1 = 1 + true;
// true 转换成数值,是1, false转换成数值,是0
console.log(box1); // 2

var box2 = 1 + "200";
console.log(box2); // 1200 原因是,程序中+的含义有2种,第一: 两边数值相加, 第二: 两边字符串拼接.但是在js中运算符的优先级中, 字符串拼接的优先级要高于数                    // 值的加减乘除,所以解析器优先使用了+号作为了字符串的拼接符号了,因为程序就需要+号两边都是字符串才能完成运算操作,因此1变成字符串了
                   // 最终的结果就是 "1" +"200"

var box3 = 1 - "200";
console.log(box3); // -199;因为-号中表示的就是左边的数值减去右边的数值,因此程序就会要求"200"是数值,因此内部偷偷的转换了一下

6.原始值和引用值

根据数据类型不同，有的变量储存在栈中，有的储存在堆中；具体区别如下：
原始变量及他们的值储存在栈中，当把一个原始变量传递给另一个原始变量时，是把另一个栈房间的东西复制到另一个栈房间，且这两个原始变量互不影响；

引用值是把引用变量的名称储存在栈中，但是把其实际对象储存在堆中，且存在一个指针由变量名指向储存在堆中的实际对象，当把引用对象传递给另一个变量时，复制的其实是指向实际对象的指针，此时两者指向的是同一个数据，若通过方法改变其中一个变量的值，则访问另一个变量时，其值也会随之改变；但若不是通过方法，而是通过重新赋值，此时，相当于重新开了一个房间，该值的原指针改变，则另外一个值不会随他的改变而改变；

五、运算符

类别	格式	案例	说明
算术运算符	+		加
	-		减
	*		乘
	/		除
	%		求余
	**		求幂
	a++		数值后自增1
	++a		数值前自增1
	b--		数值后自减1
	--b		数值前自减1
赋值运算符	=
	+=
	-=
	*=
	/=
	%=
	**=
比较运算符	>		大于
	<		小于
	>=		大于等于
	<=		小于等于
	!=		不等于[计算数值]
	==		等于[计算]
	!==		不全等[不仅判断数值，还会判断类型是否一致]
	===		全等【不仅判断数值，还会判断类型是否一直】
逻辑运算符	&&		且
	||		或
	！		非
条件运算符【三目运算符】【三元运算符】	条件?true:false	var age = 14 console.log(age>=18?"成年":"未成年")	等同于python中的   age =14 if age>==18: print("成年") else: print("未成年")

问：x++与++x的区别？

x++是先赋值后计算；++x是先计算后赋值；通过如下案例可以看到：

    <script>
        var x=1
        // ret = x++      //先赋值后计算
        ret = ++x          //先计算后赋值
        console.log('x',x)
        console.log('ret',ret)
    </script>

六、流程控制语句

编程语言的流程控制结构分为三种：

• 顺序结构（从上而下顺序执行）
• 分支结构
• 循环结构

之前学习的方式就是顺序执行，即代码的执行从上到下，一行行分别执行；

1.分支结构

1.1if分支语句

 if(条件){
     // 条件为true时,执行的代码
   }
   

if(条件){
     // 条件为true时,执行的代码
}else{
     // 条件为false时,执行的代码
}
  
 
if(条件1){
     // 条件1为true时,执行的代码
}else if(条件2){
     // 条件2为true时,执行的代码
}....
   
}else{
     // 上述条件都不成立的时候,执行的代码
}

1.2switch语句

        switch(条件){
            case 结构1:
                满足条件1时执行的代码
                break;
            case 结果2:
                满足条件2时执行的代码
                break;
            case 结果3:
                满足条件3时执行的代码
                break
            default:
                上述条件都不满足时，执行这里的代码
        }

1. switch比if else更为简洁
2. 执行的效率更高；switch...case会生成一个跳转来指向实际的case分支的地址，而这个跳转表的索引号与switch变量的值是相等的；从而，switch...case不用像if...else那样遍历条件分支直到命中条件，而只需访问对应索引号的表项从而到达定位分支的目的；
3. 到底使用哪一个选择语句，与代码环境有关，如果是范围取值，则使用if...else语句更为快捷；如果是确定取值，则使用switch是更优方案； 

2.循环结构

2.1while循环

while(循环的条件){
    //循环条件为true时，执行这里的代码
}

2.2for循环

//循环三要素
for(1.声明循环的开始; 2.条件; 3.循环的计数){
    // 4.循环条件为true时，执行这里的代码       
}


for(循环的成员下标 in 被循环的数据){
    //当被循环的数据一直没有执行到最后下表，都会不断执行这里的代码
}

遍历循环案例：

var arr=[111,222,333]
        for(i in arr){
            console.log(i)     //此时遍历出的i是arr数组的元素的索引下标
        }

七、数组对象

1.创建数组

创建方式1:
var arrname = [元素0,元素1,….];          // var arr=[1,2,3];

创建方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);

2.数组操作

方法	案例	说明
arr.length()		数组的长度
arr[i]		取arr数组的i下标的元素
arr.pop()		出栈；删除最后一个成员作为返回值
arr.push()		入栈；给数组的后面追加成员
arr.shift()		将数组的第一个元素删除
arr.unshift()		给数组的开头添加元素
arr.reverse()		将数组翻转
arr.sort()		数组排序；该排序默认是按照字符的ASCII排序的，不是按照数值排序的
arr.splice()	arr.splice(2,2)	删除：从下标为2的元素开始，删除2个元素
	arr.splice(1,0,6,7,8)	添加：从下标为1的元素开始，添加6,7,8元素
	arr.aplice(1,2,22,33)	更新：从下标为1的元素开始，删除2个元素，添加22,33元素
arr01.concat（arr02）	var arr01=[1,2,3],arr02=[4,5,6] ret=arr02.concat(arr03) console.log(ret) console.log(arr01)	将两数组合并，生成一个新的数组；
arr.join()		将数组组合成字符串； s.split()用于将字符串拆分成数组

3.遍历数组

 var arr = [12,23,34]
 for (var i in arr){
       console.log(i,arr[i])
 }

八、Object对象

1.object对象的基本操作

Object的实例不具备多少功能，但对于在应用程序中存储和传输数据而言，它们是非常理想的选择；创建object的方式有两种；

//方式一
var person = new Object();
person.name = "alvin";
person.age = 18;

//方式二
var person = {
                name : "alvin",
                age : 18
             }; 

 方式二是使用对象字面量表示法；对象字面量表示法是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程；

object可以通过.和[ ]来访问：

object.name
object["name"]

object可以通过for循环遍历

for(i in obj){
        console.log(i,obj[i])
}

2.json序列化和反序列化

JSON：JavaScript对象表示法（JavaScript Object Notation），是一种轻量级的数据交换格式；易于人们阅读和编写；

• json是一种数据格式，语法一般是{ }或者[ ]包含起来
• 内部成员以英文逗号隔开，最后一个成员不能使用逗号
• 可以是键值对，也可以是列表成员
• json中的成员如果是键值对，则键名必须是字符串，而json中的字符串必须使用双括号圈起来
• json数据也可以保存到文件中，一般以“.json”结尾
• 前端项目中，一般使用json作为配置文件

格式	案例	说明
JSON.stringify(data)		序列化：将Object对象data转换成json字符串
JSON.parse(str)		反序列化：将json字符串str转换成Object对象

九、Date对象

1.创建date对象

        //1.不指定参数，获取当前时间
        var d1=new Date()
        console.log(d1, typeof d1)
        console.log(d1.toLocaleString())

        //2.传入日期字符串，创建Date对象
        var d2=new Date("2022/12/12 11:21:34")
        console.log(d2.toLocaleString())

        //3.通过时间戳生成Date对象:毫秒级时间戳
        var d3=new Date(6000)
        console.log(d3.toLocaleString())
        console.log(d3.toUTCString())

        //4.通过时间片生成Date对象
        var d4=new Date(2022,12,12,12,12,12)
        console.log(d4.toLocaleString())

2.获取时间信息 

获取日期和时间
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)

3.日期和时间的转换

日期和时间的转换:
// 返回国际标准时间字符串
toUTCString()
// 返回本地格式时间字符串
toLocalString()
// 返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.parse(x)
// 返回累计毫秒数(从1970/1/1午夜到国际时间)
Date.UTC(x)

十、Math对象

格式	案例	说明
Math.abs(-100)		取绝对值
Math.ceil()		向上取整
Math.floor()		向下取整
Math.round()		四舍五入
Math.random()		获取随机数；0-1质检的随机浮点数
Math.max()		获取最大值
Math.pow()	console.log(Math.pow(3,2))   //等同于3**2 console.log(3**2)   //建议使用，不建议使用上述案例	求幂

十一、Function对象

函数在程序中代表的就是一段具有功能性的代码，可以让我们的程序编程更加具有结构性和提升程序的复用性，也能让代码变得更加灵活强大；

1.声明函数

//方式1
function 函数名（参数）{
    函数体
    return 返回值
}


功能说明：
1.可以使用变量，常量或表达式作为函数调用的参数
2.函数由关键字function定义
3.函数名的定义规则与标识符一致，大小写是敏感的
4.返回值必须使用return


//方式二
用Function类直接创建函数的语法如下：
var 函数名 = new Function（“参数一”，“参数n”，“function_bofy”）;

虽然由于字符串的关系，第二种形式写起来有些困难，但有助于理解函数只不过是一种引用类型，它们的行为与用Function类明确创建的函数行为是相同的

2.函数调用

    //f(); --->OK
    function f(){
        console.log("hello")

    }
    f() //----->OK

 不同于python，js代码在运行时，会分为两部分：检查装载 和 执行阶段；

1. 检查装载阶段：会先检测代码的语法错误，进行变量、函数的声明
2. 执行阶段：变量的赋值、函数的调用等，都属于执行阶段

3.函数参数

3.1参数基本使用

//位置参数
function add(x,y){
        console.log(x+y)
}

add(1,2)
add(1,2,4)
add(1)

在js中，当实参数量大于形参数量时，按照位置参数一一传入，多余的实参将会忽略不做处理；当实参数量小于形参数量时，多余的形参值会按照undefind处理；

function stu(name,gender="male"){
        console.log(name)
        console.log(gender)
}

stu("sxm")

3.2函数中的arguments对象

传入的参数组成数组存入arguments中；

function add(){
        console.log(arguments.length);//2
        console.log(arguments);//[1,2]
    }


add(1,2)

4.函数返回值

在函数体内，使用return语句可以设置函数的返回值；一旦执行return语句，将停止函数的运行，并运算和返回return后面的表达式的值；如果函数不包含return语句，则执行完函数体内的每条语句后，返回undefind值；

function add(x,y) {
          return x+y
      }

var ret = add(2,5);
console.log(ret)

1. 在函数体内可以包含多条return语句，但是仅能执行一条return语句
2. 函数的参数没有限制，但是返回值只能是一个；如果要输出多个值，可以通过数组或对象进行设计

5.函数作用域

作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理；

任何程序设计语言都有作用域的概念，简单地说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期；在JavaScript中，变量的作用域有全局作用于和局部作用域两种；

• 局部变量，是在函数内部声明，它的生命周期在当前函数被调用的时候，当函数调用完毕后，则内存中自动销毁当前变量
• 全局变量，是在函数外部声明，它的生命周期在当前文件中被声明以后就保存在内存中，直到当前文件执行完毕以后，才会被内存销毁掉

6.匿名函数

匿名函数，即没有变量名的函数；在实际开发中使用的频率非常高！也是学好JS的重点；

//方式一：匿名函数赋值变量
var foo = function(){
    console.log("这是一个匿名函数...")
}
foo();

//方式二：匿名函数自执行
(function (x,y){
    console.log(x+y)
})(1,3)

//方式三：匿名函数作为一个高阶函数的使用
function bar(){
        return function (){
            console.log("inner函数")
        }
}
bar()()

使用匿名函数表达式时，函数的调用语句，必须放在函数声明语句之后！

7.JS的预编译

js运行三个阶段：

1. 语法分析
2. 预编译
3. 解释执行

语法分析就是JS引擎去检查你的代码是否有语法错误，解释执行就是执行你的代码；最重要最重要理解的就是第二个环节预编译，简单理解就是在内存中开辟一些空间，存放一些变量与函数；

预编译可分为全局预编译和局部预编译；

1. 在js脚本加载之后，会先通篇检查是否存在低级错误；
2. 在语法检测完之后，便进行全局预编译；
3. 在全局预编译之后，就解释一行，执行一行；
4. 当执行到函数调用那一行前一刻，会先进行函数预编译，再往下执行；

全局预编译的三个步骤：

1. 创建GO对象（Global Object）全局对象，即window对象
2. 找变量声明，将变量名作为GO属性名，值为undefind
3. 查找函数声明，作为GO属性，值赋予函数体

局部预编译的4个步骤：

1. 创建AO对象（Activation Object）执行期上下文
2. 找形参和声明变量，将变量和形参名作为AO属性名，值为undefind
3. 将实参值和形参统一
4. 在函数体里面找函数声明，值赋予函数体

GO对象是全局预编译，所以它优先于AO对象所创建和执行

十二、BOM对象

BOM：Broswer object model，即浏览器提供我们开发者在javascript用于操作浏览器的对象；

1.window对象

1.1window窗口方法

类别	格式		说明
弹框方法	window.alert()		弹出一个警示框； window是一个全局对象，所以该方法可直接简写为alert()
	window.confirm()		弹出一个确认框，点击确认，返回true，点击取消，返回false
	window.prompt(“请输入一行内容”，“默认值”)		弹出一个消息输入框，
	window.open()	window.open("https://www.baidu.com", "_blank", "height=500px", "width=500px", "left=200px", "top=200px")	打开新窗口
	window.close()		关闭窗口

1.2定时方法 

使用	说明
window.setInterval(code,millisec)	循环定时器：每millisec毫秒执行一次
window.setTimeout(code,millisec)	单次定时器：millisec毫秒后执行一次
window.clearsetInterval(ID)	清除指定ID的循环定时器
window.clearsetTimeout(ID)	清除指定ID的单次定时器

setInterval()方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭；由setInterval()返回的ID值可用作clearInterval()方法的参数；而setTimeout是在指定的毫秒数后调用code一次；

// 设置循环定时器
var ID = window.setInterval(code,millisec)   // 每millisec毫秒执行一次code
// 取消循环定时器
window.clearInterval(ID);

// 设置单次定时器
var ID = window.setTimeout(code,millisec) // millisec毫秒后执行code一次
// 取消单次定时器
window.clearTimeout(ID);

2.Location（地址栏）对象

3.本地存储对象

十三、DOM对象（JS核心）

DOM（document Object Model）文档对象模型

• 整个html文档，会保存一个文档对象document
• console.log(ducument);  //获取当前文档的对象

1.查找标签

1.1直接查找标签

使用	说明
document.getElementsByTagName("标签名")	根据标签名查找标签；返回数组
document.getElementsByClassName("类名")	根据类名查找标签；返回数组
document.getElementById("id值")	根据id查找标签；返回dom对象

1.2导航查找标签

使用	说明
elementNode.parentElement	父节点标签元素；返回父dom对象
elementNode.children	所有子标签；返回一个数组
elementNode.firstElementChild	第一个子标签元素；返回dom对象
elementNode.lastElementChild	最后一个子标签元素；返回dom对象
elementNode.nextElementSibing	下一个兄弟标签元素；返回dom对象
elementNode.previousElementSibling	上一个兄弟标签元素；返回dom对象

1.3CSS选择器查找

使用	说明
document.querySelector("css选择器")	根据css选择符来获取查找到的第一个元素；返回dom对象
document.querySelectorAll("css选择器")	根据css选择符来获取查找到的所有元素；返回数组

2.绑定事件

2.1静态绑定：直接把事件写在标签元素中

<div id="div" onclick="foo(this)">click</div>

<script>
    function foo(self){           // 形参不能是this;
        console.log("foo函数");
        console.log(self);   
    }
</script>

2.2动态绑定：在js中通过代码获取到元素对象，然后给这个对象进行后续绑定

<p id="i1">试一试!</p>

<script>
    var ele=document.getElementById("i1");
    ele.onclick=function(){
        console.log("ok");
        console.log(this);    // this直接用
    };
</script>

一个元素本身可以绑定多个不同的事件，但是如果多次绑定同一个事件，则后面的事件代码会覆盖前面的事件代码； 

this关键字：在事件函数中，this关键字指的是触发事件的标签；

2.3多个元素绑定事件

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>


<script>
    var eles = document.querySelectorAll("ul li");
    for(var i=0;i<eles.length;i++){
        eles[i].onclick = function (){
            console.log(this)
            // console.log(eles[i].innerHTML)  // 结果？
        }
    }
</script>

3.操作标签

<标签名 属性1=“属性值1” 属性2=“属性值2”……>文本</标签名>

3.1文本操作

使用	说明
dom对象.innerHTML	获取dom对象中的内容；如果是html标签，则返回标签，如果是仅文本内容，则返回文本内容
dom对象.innerText	获取dom对象中的文本
dom对象.innerHTML=(" ")	对dom对象中的内容重新赋值；如果赋值的是html标签，在浏览器上会做标签渲染
dom对象.innerText=(" ")	对dom对象中的文本重新赋值；如果赋值的是html标签，在浏览器上也会做纯文本显示

3.2value操作

像input标签，select标签以及textarea标签是没有文本的，但是显示内容由value决定；

使用	说明
dom.value	获取dom对象的value值
dom.value=""	修改dom对象的value值

3.3css样式操作

使用	说明
dom.style.属性=属性值

3.4属性操作

使用	说明
elementNode.setAttribute(“属性名”，“属性值”)	设置属性
elementNode.getAtrribute(“属性名”)	获取属性值
elementNode.removeAttribute("属性名")	删除属性

3.5class属性操作

使用	说明
elementNode.classList	返回dom对象的class类属性的值；数组格式
elementNode.className	返回dom对象的class类属性的值；string格式
elementNode.classList.add()	给dom对象的类属性添加值
elementNode.classList.remove()	给dom对象的类属性删除值

tab切换的案例 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .current{
            background-color: red;
            color: ghostwhite;
        }
        .tab{
            width: 800px;
            height: 600px;
            border: 1px solid red;
            margin: 200px auto;
        }
        .tab ul{
            list-style: none;
            padding: 0;

        }
        .title{
            border-bottom: 1px solid red;
        }
        .title li{
            display: inline-block;
            padding: 10px 25px;
            font-size: 14px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="tab">
    <ul class="title">
        <li class="current" title-index="0">商品介绍</li>
        <li title-index="1">规格与包装</li>
        <li title-index="2">售后保障</li>
        <li title-index="3">商品评价</li>
        <li title-index="4">手机社区</li>
    </ul>
<ul class="content">
    <li id="i1" content-index="0">商品介绍的内容</li>
    <li id="i2" class="hide" content-index="1">规格与包装的内容</li>
    <li id="i3" class="hide" content-index="2">售后保障的内容</li>
    <li id="i4" class="hide" content-index="3">商品评价的内容</li>
    <li id="i5" class="hide" content-index="4">手机社区的内容</li>
</ul>
</div>

<script>
    var e1=document.querySelector(".title").children
    var e2=document.querySelector('.content').children
    console.log(e1)
    console.log(e2)
for(var i=0;i<e1.length;i++){
    e1[i].onclick=function(){
        //让title中的所有li标签背景变灰
        for(var j=0;j<e1.length;j++){
            if(e1[j].classList.contains("current")){
                e1[j].classList.remove("current")
            }
        }
        //让点击的标签背景变红
        this.classList.add("current")
        //让底部的介绍内容所有li添加hide
        for(var a=0;a<e2.length;a++){
            e2[a].classList.add("hide")
        }
        console.log(this.getAttribute("title-index"))
        e2[this.getAttribute("title-index")].classList.remove("hide")
    }
}
</script>
</body>
</html>

3.6节点操作

使用	说明
document.createElement("标签名")	创建节点
soomenode.appendChild(newnode)	追加一个节点（作为最后的子节点）
somenode.insertBefore(newnode，某个节点)	把增加的节点放到某个节点的前边
somenode.removeChild(要删除的节点)	通过父节点删除某个子节点
somenode.replaceChile(newnode, 某个节点)	替换节点

4.常用事件

使用	案例	说明
onclick事件		单击事件
ondblclick事件		双击事件
onload事件	window.οnlοad=function(){}	窗口加载事件
onsubmit事件		提交事件
onchange事件		用于两个select标签之间的联动
onmouseover事件		鼠标悬浮于上的事件
onmouseleave事件		鼠标离开时的事件
onkeydown事件		键盘按下的事件
onkeyup事件		键盘松开的事件
onfocus事件		焦点事件：指针聚焦在input输入框的事件
onblur事件		失焦事件：指针取消在input输入框的事件
冒泡事件

4.1onsubmit事件form表单提交案例

<form action="" method="post" class="form">
    用户名:<input type="text" class="user">
    密码:<input type="password" class="pwd">
    <input type="submit">
</form>

<script>
var form=document.querySelector('.form')
            form.onsubmit=function(event){
                var pwd=document.querySelector('.pwd')
                console.log(pwd.value)
                if(pwd.value.length<5){
                    //拦截
                    // return false
                    //拦截方式二
                    event.preventDefault()
                }
            }
</script>

4.2onchange事件两个select标签联动案例

<select name="" id="pro">
    <option value="">请选择省份</option>
    <option value="hebei">河北省</option>
    <option value="hubei">湖北省</option>
    <option value="hunan">湖南省</option>
</select>
<select name="" id="city">
    <option value="">请选城市</option>
</select>

<script>
    var  data={"hunan":["长沙","岳阳","张家界"],"hubei":["武汉","襄阳","荆州"],"hebei":["石家庄","保定","张家口"]};
    var pro=document.querySelector('#pro')
    var city=document.querySelector('#city')
    pro.onchange=function(){
        //清空option
        city.options.length=1
        for(i=0;i<data[pro.value].length;i++){
            //创建option标签
            var j=document.createElement('option')
            j.innerText=data[pro.value][i]
            city.appendChild(j)
        }
    }
</script>

4.3onkey事件

<input type="text" class="c1">

<script>
    var c1=document.querySelector('.c1')
    c1.onkeydown=function(event){
        console.log(event.key)        //打印input框键入的内容
        console.log(event.keyCode)      //打印input键入的内容的ascii码值
    }
</script>

4.4冒泡事件案例

    <style>
        .c1{
            width: 400px;
            height: 400px;
            background-color: mediumvioletred;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>


<div class="c1">
    <div class="c2"></div>
</div>

<script>
    var c1=document.querySelector('.c1')
    var c2=document.querySelector('.c2')
    c1.onclick=function(){
        alert('c1')
    }
    c2.onclick=function(){
        alert('c2')
        //阻止冒泡事件
        event.stopPropagation()
    }
</script>