JS基础语法

一、JavaScript的历史

95年以前，就有很多上网的用户了，当时的带宽只有28.8kb/s，用户要进行表单的验证时，点击提交按钮，直接就将数据发送到服务器了，受限于带宽的关系，浏览器和服务器的通信很慢，大概一次通信需要30s的时间。

​        这样，问题就出现了，我们平常注册一个用户，需要填写很多信息，当我们将所有信息填写好，点击提交按钮后，等待30s以后，提示我们用户名被占用了，修改，提交，等待30s，提示用户名不符合规范，修改，提交，等待30s，密码不符合规范，修改，等待。。。这样的用户体验感很差，给网民造成很大的烦恼。随着上网的用户越来越多，问题越来越严重。

​        这时候，网景公司（Netscape ，这是一家浏览器公司）下定决心要解决这个问题，并将这个问题交给[布兰登·艾奇](https://baike.sogou.com/lemma/ShowInnerLink.htm?lemmaId=41517897)（Brendan Eich，1964年～，当时在网景公司工作的一个程序员）来解决，他用了10个工作日的时间，设计了一个门语言，叫做LiveScript，专门用来解决客户端上的问题。网景公司和Sun公司合作，在发布的时候，改名为Javascript，目的是为了利用 Java 这个因特网时髦词汇。JavaScript 从此变成了因特网的必备组件。

​        因为 JavaScript 1.0 如此成功，微软推出了JScript脚本语言，后来陆续有好几家公司都创建了自己的客户端脚本语言。

​        此时，JavaScript 并没有一个标准来统一其语法或特性，随着互联网的发展，分久必合的趋势越来越有必要，最终，1997年，ECMA（欧洲计算机制造商协会）邀请了Netscape、Sun、微软、Borland等公司的一些程序员组成了TC39，定义了标准，名为ECMAScript。

​        ECMAScript是一个标准，而javascript是语言。

二、JS概念

概念：支持面向对象的跨平台脚本语言。

理解：

1. 脚本语言：依赖别的语言才能运行

   html必须在浏览器中才能运行，js嵌套在html中才能运行

2. 跨平台：可以在不同的平台上运行

   windows、linux、安卓。。。

3. 支持面向对象

   使用面向对象的思想编程

应用：

1. 表单验证：规范用户输入数据，和后台数据进行交互

2. 网页特效：给页面内容加行为，让页面动起来

3. 游戏开发：飞机大战、打砖块

4. 物联网：https://zhuanlan.zhihu.com/p/45509947

三、 JS和H5的关系

我们现在所说的H5，其实指的是大前端，主要技术包含：html+css+html5+css3+javascript+前端框架(vue+react+angular)+app+小程序+......

html5是html的下一个版本，就目前而言，我们知道的h5只是一些标签，并不能完美的展示出他的强大之处，有很多高端功能需要使用js来激活，例如：多媒体标签自定义控制多媒体的各种场景；canvas标签用js来绘制图形等。

随着h5应用越来越多，js的使用方式和各种框架及插件也越来越多，甚至已经从前端语言可以实现后台服务器的功能。js的发展已经成为一种潮流。

四、JS的组成

 ECMAScript：语法标准

BOM：操作浏览器的标准

DOM：操作html文档的标准

五、JS在HTML中

1.js的位置

js的不能独立运行，需要依赖html，html是由标签组成的，所以js在html中就体现为一个script双标签。js的代码就写在这个标签中。

这个标签可以放在html文档的任意位置，但在不同的位置，对于代码的执行有一定的影响，对于初学者，建议将script标签放在body结束之后。

当浏览器在执行html代码的时候，就会解析其中的script标签，并运行js代码。

2.JS的注释

注释代码不会被执行，仅仅起到一个提示的作用。注释可以对复杂的代码进行解释，方便后期的维护和开发。

单行注释：

// js的单行注释是双斜杠

多行注释：

/*
js的多行注释：
开头是斜杠星号
结尾是星号斜杠
*/

3.js的输出

 

所谓输出，其实就是将内容显示在网页中，和html不同，js代码不会主动显示在网页中，要显示指定的内容，需要特殊方法指定才能显示在网页中，这个指定显示的过程就叫做输出。

1）以弹窗的形式显

这种输出通常适用于给用户做提示，例如：登录成功；删除失败；用户名被占用等......

alret（11）；

 2）以文本的形式显示

这种输出方式通常用于动态改变或增加body标签中的内容，有些网页，我们在查看源代码的时候发现body中是没有代码的，但是在网页中会显示出很多内容，其实就是用js显示上的。这个中输出方式，显示的内容会自动添加到body标签中。

document.write(123456);

 3）可输入内容的弹窗

prompt(123456)

 这种弹窗通常在项目使用较少，项目中要提示用户输入内容的时候通常都会使用表单。

4）询问用户是否确认操作的弹窗

confirm(12345)

 这种弹窗通常在项目中用户进行某些敏感操作时，提示用户是否继续进行下去，例如：用户点击了删除按钮之后，用户点击了退出按钮之后，需要让用户确认是否继续操作，可以取消。

5）浏览器控制台输出

这种输出方式在开发过程中很常用，通常用于调试代码时，在浏览器的控制台查看调试结果，不会影响到整体项目的逻辑和效果。

condole.log(123);

注意：在js代码中，每行结束可以加分号，也可以不加分号，但是建议加上。

六、变量

在实际项目中，很多情况下，需要在一个初始数据的基础上进行多次累加操作，例如：

```js
// 第一次输出数字1
console.log(1)
// 第二次需要在第一次的结果基础上添加2
console.log(1+2)
// 第三次需要在第二次的结果基础上添加3
console.log(1+2+3)
// 如果有100次累加，我们就需要在后面写100个加，可想而知其中的繁琐
```

解决方案：我们可以将初始数据放在一个容器中，第二次累加的时候，就将第二个数据放在容器中，输出容器中的内容，第三次累加的时候，就将第三个数据继续放在容器中，继续输出容器中的内容，......

这样，我们只需要每次将数据放在容器中，容器中的数据随着每次放入，会逐渐增多。

这种容器，在js中就是变量。

也就是说，变量其实就是内存中存放数据的容器。

当这个容器不会自动出现在内存中，需要手动进行创建，也就是变量，不会自动产生，需要定义

1.定义变量：

语法：var 变量名;
var是一个关键字，也就是js内部指定有特殊作用的单词。

2.变量名的规则：

变量名由字母、数字、下划线、美元符号组成，不能用数字开头

m
m2
mp3
3m
user_id
_start
2_m

不能使用关键字作为变量名，关键字指的就是js内部有特殊作用所使用的单词，如下：
此外，尽量不要使用`name`，`start`等单词作为变量名。

3.定义变量的过程

定义变量的过程，就是在内存开辟了一个空间，名字是变量名，如下图：

 

 定义多个变量的时候，可以使用一个简短的表达式，一次性定义多个变量：

var 变量1,变量2;

4.赋值

定义好变量就是在内存开辟好了空间，但空间中什么也没有，是一个空的空间。但正常情况下我们是要给其中放入数据的，给变量中放数据的过程，我们称之为赋值。

赋值需要用到一个符号叫赋值符：=

这个符号在编程中，不代表相等的意思，他有自己的使用特点：

• 赋值符左边的一定是一个变量，准备接收数据

• 赋值符右边的一定是一个值或者能得到值的一个表达式

• 赋值符的唯一作用就是将右边得到的值放在左边的变量容器中

例：

var a;
a = 10;
var b;
b = 20;
var c;
c = a + b;

定义变量，给变量赋值的两行代码，可以合并为一行：

var a = 10;
var b = 20;
var c = a + b;

定义多个变量，也可以在定义的时候赋值，每个变量之间使用逗号隔开：

var a = 10,b = 20;
var a,b = 20;
var a = 10,b;