JavaScript简介与基础语法

2020-09-23 11:21:30 浏览数 (1)

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功能：

1、动态的文件内容

JavaScript可以直接输出HTML标签，并且使用程序变量更改输出内容，建立动态文件的内容或图片

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

对于HTML标签的属性和CSS样式，JavaScript可以获得属性和样式值，并且动态更改其内容

3、窗体验证和发送

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

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

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

5、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();

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

  1. var s=new Array(3);

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

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

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

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

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

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

运行结果：

思维导图：

函数（方法）：

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

在JavaScript里使用function来声明方法，function是一个关键字，实际声明函数就是在创建一个function对象，具有function对象的所有属性和方法，所以在JavaScript中每个函数实际上都是一个function对象。

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

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

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

代码示例：

运行结果：

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

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

代码示例：

运行结果：

  1. 函数表达式声明方式，这种方式类似于第一种声明方式，语法几乎相同，函数表达式与函数声明的最主要区别是函数名称，在函数表达式中可忽略函数名称，从而创建匿名的函数，这种声明方式就需要用一个变量存储它，实际存储的也是一个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

html ecmascript javascript java 编程算法

0 人点赞