前端三剑客: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 直接编写
    
2 导入文件
    

三、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基本数据类型

前端三剑客:JavaScript_第1张图片

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是先计算后赋值;通过如下案例可以看到:

    

六、流程控制语句

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

  • 顺序结构(从上而下顺序执行)
  • 分支结构
  • 循环结构

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

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静态绑定:直接把事件写在标签元素中

click

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

试一试!

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

this关键字:在事件函数中,this关键字指的是触发事件的标签;

2.3多个元素绑定事件

  • 111
  • 222
  • 333
  • 444
  • 555

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切换的案例 :




    
    Title
    



  • 商品介绍
  • 规格与包装
  • 售后保障
  • 商品评价
  • 手机社区
  • 商品介绍的内容
  • 规格与包装的内容
  • 售后保障的内容
  • 商品评价的内容
  • 手机社区的内容

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表单提交案例

用户名: 密码:

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




4.3onkey事件



4.4冒泡事件案例

    


你可能感兴趣的:(前端,JavaScript,javascript)