JavaScript简介与基础语法

JavaScript简介与历史

JavaScript是学习前端开发必需要掌握的三大知识点之一，JavaScript是一种直译式的脚本语言，是一种动态类型、弱类型、基于对象和事件驱动的语言，而且JavaScript的安全性比较好，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，普遍用于客户端的脚本语言，最先是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增长动态功能，因此JavaScript是能够直接插入HTML中的，JavaScript插入HTML后可由全部的现代浏览器执行。

在2016年通过GitHub的统计，JavaScript是2016年度最流行的编程语言，如下是 GitHub根据过去 12 月提交的 PR 数量来排名的，虽然不彻底准确，可是 PR 起码表明了项目的热度与欢迎度，仍是值得可信的：

JavaScript历史：

JavaScript诞生于1995年，现在全世界无数的网页在依靠它完成各类关键任务，JavaScript已经从过去装饰性的一种脚本语言转变为主流的编程语言，能够用它来开发更大更复杂的程序。在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。由于Netscape与Sun合做，Netscape管理层但愿它外观看起来像Java，所以取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

在1992年，Nombas公司开始开发一种叫作C-minus-minus（简称Cmm）的嵌入式脚本语言。这个脚本语言捆绑在一个叫作CEnvi的共享软件产品中，当Netscape Navigator崭露头角时，Nombas开发了一个能够嵌入网页中的CEnvi的版本。它们表明了第一个在万维网上使用的客户端脚本语言，然而Nombas丝毫没有料到它的理念将会成为因特网的一块重要基石。

当网上冲浪愈来愈流行时，对于开发客户端脚本的需求也逐渐增大。当时工做于Netscape的Brendan Eich，开始着手为即将在1995年发行的Netscape Navigator 2.0开发一个称之为LiveScript的脚本语言，当时的目的是同时在浏览器和服务器端使用它。Netscape与Sun公司联手及时完成LiveScript实现。就在Netscape Navigator 2.0即将正式发布前，Netscape将其改名为JavaScript，目的是为了利用Java这个因特网时髦词汇（就如同徽记瓜子跟安徽毫无关系，它其实是成都产的）。Netspace的赌注最终获得回报，JavaScript今后变成了因特网的必备组件。

由于JavaScript1.0如此成功，Netscape在NetscapeNavigator 3.0中发布了1.1版。恰巧那个时候，微软决定进军浏览器，发布了IE 3.0 并搭载了一个JavaScript的克隆版，叫作JScript（这样命名是为了不与Netscape潜在的许可纠纷）。微软步入Web浏览器领域的这重要一步虽然令其声名狼藉，但也成为JavaScript语言发展过程当中的重要一步（若是没有微软的垃圾浏览器IE，浏览器兼容性问题就不会那么突出和严重）。

在微软进入后，有3种不一样的JavaScript版本同时存在：Netscape Navigator 3.0中的JavaScript、IE中的JScript以及CEnvi中的ScriptEase。与C和其余编程语言不一样的是，JavaScript并无一个标准来统一其语法或特性，而这3种不一样的版本偏偏突出了这个问题。随着业界担忧的增长，这个语言标准化显然已经势在必行。1997年，JavaScript 1.1做为一个草案提交给欧洲计算机制造商协会（ECMA），由来自Netscape、Sun、微软、Borland和其余一些对脚本编程感兴趣的公司的程序员组成的TC39锤炼出了ECMA-262，该标准定义了叫作ECMAScript的全新脚本语言。今后，Web浏览器就开始努力（虽然有着不一样程度的成功和失败）将ECMAScript做为JavaScript实现的基础。

尽管ECMAScript是一个重要的标准，但它并非JavaScript惟一的部分，固然，也不是惟一被标准化的部分。实际上，一个完整的JavaScript实现是由如下3个不一样部分组成的：核心（ECMAScript）——JavaScript的核心ECMAScript描述了该语言的语法和基本对象；文档对象模型（DOM）——DOM描述了处理网页内容的方法和接口；浏览器对象模型（BOM）——BOM描述了与浏览器进行交互的方法和接口。从这里不难看出因为后二者的实现依赖于浏览器（一般也将BOM对象和DOM对象成为浏览器宿主对象），所以在开发中也就不可避免的会遇到浏览器兼容性问题。

JavaScript功能：

一、动态的文件内容

JavaScript能够直接输出HTML标签，而且使用程序变量更改输出内容，创建动态文件的内容或图片

二、更改HTML标签的样式和属性

对于HTML标签的属性和CSS样式，JavaScript能够得到属性和样式值，而且动态更改其内容

三、窗体验证和发送

JavaScript可以编写程序代码，在HTML窗体数据送到服务器钱，验证用户输入的数据是否合理，创建客户端窗体字段的验证规则

四、处理网页或HTML标签的事件

JavaScript可以创建HTML网页或各标签的事件处理程序。例如当HTML文件加载完成，按下按钮字段或超连接等HTML标签的事件

五、Web应用程序

JavaScript为客户端的Script语言，在Client/Server应用程序中用来创建Client客户端的应用程序，搭配服务器ASP、ASP.NET或其余技术的应用程序创建完整的电子商务应用程序。

JavaScript基础语法

JavaScript代码须要写在HTML的script标签里，script标签是用于定义脚本代码的，也能够经过src属性来引用外部的脚本文件。

script标签能够写在任意的位置，标准的写法是写在head和body标签之间。可是有一点要注意：网页的解析也是从上至下的顺序解析的，因此script标签写在前面，解析时就会先解析script标签里面的脚本代码，反之，若是script标签写在后面，就解析完前面的代码再解析script标签里面的脚本代码。例如：我把script标签写在head和body标签之间，那么在解析执行script标签里面的脚本代码时，body里面的内容是不会被执行的，只有执行到body才会开始执行body里面的内容。要记得这种机制，以避免出现一些问题。

在HTML4的时候，还须要在script标签中使用type或language属性（不过language属性不被同意使用）来声明这个脚本语言的类型（由于脚本语言也是有不少种的，例如：ecmascript、php、c# Script、VBScript等等），在HTML5里则没有强制要求，不过尽可能写上比较好，毕竟是用来定义脚本的 MIME 类型，省得之后出现意外状况。

代码示例：

运行结果：

JavaScript的执行结果是交给body去显示在网页上的，上面这一段就是一个简单的打印语句。

简单的介绍一下上面使用到的document对象，每一个载入浏览器的 HTML文档都会成为document对象，document对象使咱们能够从脚本中对 HTML 页面中的全部元素进行访问。

提示：Document 对象是 Window 对象的一部分，可经过 window.document 属性对其进行访问。

至于write方法就是能够容许脚本代码向页面中插入动态生成的内容，因此一个让咱们能够对页面中全部的元素进行访问，一个容许咱们动态插入内容，因此这样就实现了一个打印语句。

script标签是能够在任意位置声明多个的，顺便演示一下type和language属性的使用，代码示例：

运行结果：

咱们能够在浏览器的控制台中按F12查看网页元素，如图能够看到在浏览器上解析完成后的script代码是交给了body执行：

以上都只是铺垫，如今开始简单介绍JavaScript里的基本语法：

数据类型和变量的声明方式：

和别的大多数编程语言不同，在JavaScript里只有一个数据类型：var

var在JavaScript里充当一个万能的角色，由于仅有一个数据类型，因此这个数据类型可以存储任意类型的数据，例如能够存储：数值类型、字符串类型、布尔类型、浮点类型、数组类型、对象类型等等。总之任何类型均可以存，因此var就有点相似于Java里Object类型的味道。

变量的声明方式则和Java是同样的都是用“=”等于号来赋值，用“；”分号来结束。

在JavaScript也可使用“+”来链接字符串，例如链接”<br>”换行符。

代码示例：

运行结果：

若是我br没有使用引号引住就会在控制台里报错，并不会把错误信息显示在页面上，因此咱们要在控制台中查看错误信息，在浏览器中按F12就能够进入控制台：

运算符：

JavaScript的运算符和大多数的语言是同样的，在这里介绍一下主要的运算符：

1. 赋值运算符：=

2. 算术运算符：+  -  *  /  %

3. 自增自减运算符：++  --

4. 复合运算符：+=  -=  *=  /=  %=

5. 比较运算符：>  <  >=  <=  ==  !=

6. 逻辑运算符：&& || !

7. 位运算符：<<  >>  >>>  &  |  ~  ^

算术运算符代码示例：

运行结果：

自增自减运算符代码示例：

运行结果：

复合运算符代码示例：

运行结果：

错误示例：

运行结果：

比较运算符与逻辑运算符代码示例：

比较运算符与逻辑运算符都不能去链接字符串，否则的话结果就会是错误的，由于链接字符串后会把比较的数据类型转换成字符串类型，例如：两个数值类型的数据进行比较，其中一个数据链接字符串后就会自动转换成字符串类型，这时天然会显示结果为false：

运行结果：

位运算符代码示例：

位运算符也不可以链接字符串，否则也会转换为字符串类型，而且会结合在一块儿，例如：1  >>  1 +  ”<br>” 就会等于1  >>  ”1<br>”

运行结果：

在JavaScript里有个typeof运算符，这是一个比较运算符，用于比较数据的类型是什么，typeof会返回一个字符串的结果。若是比较的数据类型是数值类型，那么就会返回number，若是比较的数据类型是数值类型，那么就会返回String，以此类推。

代码示例：

运行结果：

思惟导图：

流程控制语句：

条件分支语句：

1.三元运算符，和Java的写法同样：

代码示例：

运行结果：

2.if else条件分支语句：

代码示例：

运行结果：

3.switch条件分支语句：

代码示例：

运行结果：

循环语句：

for循环：

代码示例：

运行结果：

while循环：

代码示例：

运行结果：

do while循环：

do while循环是先按照循环条件去执行完do里面的内容，而后再执行while里面的内容：

代码示例：

运行结果：

for in循环：

for in循环是用来遍历取数组下标的，相似于Java的for each，只不过for each取的是数组里的值，而for in是取数组的下标。

代码示例：

运行结果：

循环语句会用到的break和continue，JavaScript里也有：

break能够结束整个循环。

continue则是仅结束本次循环，而后进行下一次循环。

思惟导图：

数组：

在上面的循环中也使用到了数组做为for in的演示，JavaScript中的数组比较特别，这个数组没有大小和类型的限制，长度能够自动伸缩，能够存储任意类型，就像Java的Object类型的集合同样，因此当作一个Object类型的集合去使用就能够了。

经常使用的数组的声明方式：

1. var s=new Array();

实例化一个数组对象，赋值给变量，这个变量就存储了数组对象了，这个变量就是一个数组类型了。

2. var s=new Array(3);

在实例化数组对象的时候定义好数组长度，可是没有用处，同样能够存储超过这个长度的数据。

3. var s=new Array("a","v","d","2","1");

在实例化对象的时候，就赋予初始值。

4. var s=["1","d","f","h"];

虽然这个没有实例化数组对象，可是这是声明数组的方式之一，使用[ ]来表示这是一个数组，而且能够在声明时赋予初始值。

声明数组与遍历数组代码示例：

运行结果：

思惟导图：

函数（方法）：

JavaScript的函数声明方式也有点特别，没有权限修饰符，函数的静态与实例区分在因而否用对象或者this关键字来声明，函数即使有返回值也不用声明返回值类型，直接return返回便可，由于JavaScript的数据类型只有一个还声明什么，一样的参数都不须要声明类型，直接写参数名称在括号里就好了。

在JavaScript里使用function来声明方法，function是一个关键字，实际声明函数就是在建立一个function对象，具备function对象的全部属性和方法，因此在JavaScript中每一个函数实际上都是一个function对象。

JavaScript里主要有三种函数声明方式：

1. 函数声明，这样声明方式须要有函数名称，一个被函数声明建立的函数是一个 Function 对象，具备 Function 对象的全部属性、方法和行为：

function 函数名称(参数，参数){}

代码示例：

运行结果：

2. 构造函数声明方式，这种方式是建立一个新的Function对象，须要用变量去接收它，并且这种方式在代码调用中是最为低效，由于使用Function构造器生成的Function对象是在函数建立时解析的，这种函数只能执行return，这种方式最为少用：

new Function([arg1[, arg2[, ...argN]],] functionBody);

代码示例：

运行结果：

3. 函数表达式声明方式，这种方式相似于第一种声明方式，语法几乎相同，函数表达式与函数声明的最主要区别是函数名称，在函数表达式中可忽略函数名称，从而建立匿名的函数，这种声明方式就须要用一个变量存储它，实际存储的也是一个Function对象。

代码示例：

运行结果：

在JavaScript 的函数声明中有一个概念叫作函数声明提高。

JavaScript 中的函数声明被提高到了函数定义。你能够在函数声明以前使用、调用该函数。

要注意的是：函数表达式和构造函数也就是第一种和第二种函数声明方式不支持函数声明提高，惟有函数声明也就是第一种函数声明方式支持函数声明提高：

代码示例：

运行结果：

思惟导图：

面向对象：

JavaScript 的对象设计也比较特别，并非像Java那样建立一个class类，而后在里面声明对象的属性和行为。JavaScript 是没有class来声明这是个类的，要设计一个类须要经过function 去设计。

JavaScript有三种设计对象的方式：

1. 经过实例化Object去获得一个对象，并存放到变量里，而后经过这个变量去设计对象：

代码示例：

运行结果：

2.经过function声明，和函数声明差很少。并且同时至关因而个构造器，因此既能够用于设计对象又能够做为函数声明，在这种方式中须要使用this关键字来声明实例的属性和函数：

代码示例：

运行结果：

3.这种设计方式比较简单，只须要声明一个var变量，而后在{ }里写上内容就能够了，这种方式比new Object实例化的速度要快一些：

代码示例：

运行结果：

异常捕获：

JavaScript里的异常捕获的声明方式和Java差很少，都是try catch，而且也有finally和throw。

代码示例：

运行结果：

throw代码示例：

运行结果：

另一种弹出窗口式的打印方式：

上面为了方便演示因此都是使用在页面上打印的方式进行打印数据，除了页面上打印和控制台中打印数据外，还有一种弹窗式的打印方式，当你打开页面的时候就会弹出来一个窗口：

代码示例：

运行结果：

以上JavaScript的基本语法就介绍这么多，由于我是以有Java编程基础的前提下去介绍的，因此并无介绍得那么深刻，若是想对某个知识点了解得更加深刻些，或学习更多的JavaScript知识点，能够参考如下两个网站：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

http://www.w3school.com.cn/b.asp