javascript根本介绍
JavaScript的历史：
在95年以前，就有很多上网的用户了，过后的带宽只有28.8kb/s，用户要进行表单的验证时，点击提交按钮，间接就将数据发送到服务器了，受限于带宽的关系，浏览器和服务器的通信很慢，大略一次通信须要30s的工夫。
这样，问题就呈现了，咱们平时注册一个用户，须要填写很多信息，当咱们将所有信息填写好，点击提交按钮后，期待30s当前，提醒咱们用户名被占用了，批改，提交，期待30s，提醒用户名不符合规范，批改，提交，期待30s，明码不符合规范，批改，期待。。。这样的用户体验感很差，给网民造成很大的懊恼。随着上网的用户越来越多，问题越来越重大。
这时候，网景公司（Netscape ，这是一家浏览器公司）下定决心要解决这个问题，并将这个问题交给布兰登·艾奇（Brendan Eich，1964年～，过后在网景公司工作的一个程序员）来解决，他用了10个工作日的工夫，设计了一个门语言，叫做LiveScript，专门用来解决客户端上的问题。网景公司和Sun公司单干，在公布的时候，改名为Javascript，目标是为了利用 Java 这个因特网时尚词汇。JavaScript 从此变成了因特网的必备组件。
因为 JavaScript 1.0 如此胜利，微软推出了JScript脚本语言，起初陆续有好几家公司都创立了本人的客户端脚本语言。
此时，JavaScript 并没有一个规范来对立其语法或个性，随着互联网的倒退，分久必合的趋势越来越有必要，最终，1997年，ECMA（欧洲计算机制造商协会）邀请了Netscape、Sun、微软、Borland等公司的一些程序员组成了TC39，定义了规范，名为ECMAScript。
ECMAScript是一个规范，而javascript是语言。
js概念
概念：反对面向对象的跨平台脚本语言。
了解：
脚本语言：依赖别的语言能力运行
html必须在浏览器中能力运行，js嵌套在html中能力运行
跨平台：能够在不同的平台上运行
windows、linux、安卓。。。
反对面向对象
应用面向对象的思维编程
利用场景：
- 表单验证：标准用户输出数据，和后盾数据进行交互
- 网页特效：给页面内容加行为，让页面动起来
- 游戏开发：飞机大战、打砖块
- 物联网：https://zhuanlan.zhihu.com/p/...
JS和H5的关系
h5，是html的下一个版本，很弱小，就目前而言，咱们晓得的h5只是一些标签，并不能完满的展现出他的弱小之处，退出js后，能力激活这些标签深层次的性能。
随着h5利用越来越多，js的应用形式和各种框架及插件也越来越多，甚至曾经从前端语言能够实现后盾服务器的性能。js的倒退曾经成为一种潮流。
js的组成
| js的组成示意图 |
|---|
ECMAScript：根底语法
BOM：提供了操作浏览器对象的一套办法
DOM：核心内容，提供了操作文档对象的办法
编写Js及如何运行JS
js的书写地位
- 第一种 : 写在
script标签中
<script> alert('Hello World!');</script>- 第二种 : 引入一个js文件
<script class="lazy" referrerpolicy="no-referrer" data-src="main.js"></script>阐明：
script标签能够被放在网页的任何中央，然而咱们初学倡议放在body完结和html完结两头。script标签应用src引入了js文件后，这个标签中不能再写js代码，写进去的代码是有效的。- 因为是嵌套在html中运行的，所以间接关上浏览器就能运行
js的正文
正文代码不会被执行，仅仅起到一个提醒的作用。正文能够对简单的代码进行解释，不便前期的保护和开发。
单行正文：
// js的单行正文是双斜杠多行正文：
/*js的多行正文：结尾是斜杠星号结尾是星号斜杠*/js的输入
所谓输入，其实就是将内容显示在网页中，和html不同，js代码不会被动显示在网页中，须要应用一些办法能力显示在网页中。
以弹窗的模式显示：
alert(11);| 弹窗显示示意图 |
|---|
以文本的模式显示：
document.write(123456);| 文本显示示意图 |
|---|
可输出内容的弹窗：
prompt(12345)| 可输出内容的弹窗 |
|---|
可判断的弹窗：
confirm(12345)| 可判断的弹窗 |
|---|
调试工具中输入：
console.log(123);| 代码调试工具中输入 |
|---|
<font color="red">留神：在js代码中，每行完结能够加分号，也能够不加分号，然而倡议加上。</font>
变量
咱们每天吃饭都用碗吃，碗外面的食物是每天都会扭转的，咱们代码中也有这样一种容器，叫变量。
概念
可变的量。
x + 1 = 2 -------- x = 1x + 10 = 20------- x = 10了解
变量是内存中的一个空间，用来寄存一些后果。
x = 1 ------- 内存中有一个空间，空间名字是x，外面寄存了1x = 10 ------ 内存中有一个空间，空间名字是x，外面寄存了10| 变量示意图 |
|---|
变量的命名规定
以字母、下划线结尾，前面跟数字、字母、下划线
mm2mp33muser_id_start2_m变量申明
var关键字，空格，前面跟变量名
// 申明变量var x // 在内存中开拓了一个空间，给这个空间起名叫x，外面没有放内容var a,b // 一次性声名多个变量// 申明变量并赋值var y = 10 // 在内存中开拓了一个空间，这个空间的名字叫y，把10存了进去var a=1,b=2; // 一次性申明多个变量并赋值阐明：
- 变量名辨别大小写，也就是说小写a变量和大写A变量是两个不同的变量。
- 能够一次性声名多个变量，应用一个var关键字，变量名用逗号隔开。
- 变量声名省略掉var关键字也是能够的。叫做隐式申明，有var关键字的就叫做显式申明。
不能应用关键字作为变量名，关键字就是零碎曾经占用的名字。
<font color="blue">思考：如何输入一句话？</font>
alert("你的头发还好吗？")alert(123456)输入一句话须要加引号，输入数字则不须要。因为一句话和数字的类型是不一样的。
房间是一个容器，外面放了床，就是卧室，用来睡觉的，外面放了猪，就是猪圈，用来养猪的，卧室和猪圈都是房间，然而类型不一样。变量是一个容器，外面放不同的货色，他的类型就不一样。
数据类型
| 类型 | 示例 | 备注 |
|---|---|---|
| 数字型（number） | 1 -2 3.14 300 | 包含整数、小数、正数 |
| 字符串型（string） | "你好吗？" '明天嫁给我' | 用引号引起来的一串字符，单引号和双引号都行 |
| 布尔型（boolean） | true false | 代表事物的两面性，真和假 |
| 未定义型（undefined） | var a | 代表定义过未赋值的变量 |
| 对象（object） | null [1,2,3] {name:张三} | 代表一个汇合 |
应用typeof(被检测的内容)能够得出一个内容的类型。
console.log(typeof(-123456)); // 数字型console.log(typeof("今天会更好")); // 字符串型console.log(typeof(true)); // 布尔型console.log(typeof(x)); // 布尔型console.log(typeof([1,2,3])); // 对象console.log(typeof({name:"张三",age:12})); // 对象console.log(typeof(null)); // 对象后果如下图：
| 类型检测示意图 |
|---|
多学一招：typeof(x) 能够写成 typeof x 。应用小括号和空格都能够。
数字类型
在后果中能够看到应用number来代表数字类型。
不同进制的数字
咱们个别应用应用的数字是十进制的，然而在js中咱们还能够应用八进制和十六进制。
var a = 010; // 8进制var b = 0xA; // 16进制var c = 0xb; // 小写字母和大写字母都能够console.log(a); // 8console.log(b); // 10console.log(c); // 11后果：
| 示意图 |
|---|
NaN
var a = "abc";var b = 2;var c = a - b;console.log(c); // NaN后果：
| 示意图 |
|---|
NaN: not a number, 示意一个非数字
在js中，NaN用来示意一个非数字的非凡值，当发现无奈进行运算时，js不会报错，而是会返回一个NaN
NaN的注意事项：
- NaN的类型是number类型的，示意一个非数字
- NaN不等于任何值，包含NaN自身
- 通过isNaN()能够判断是否是一个数字，返回false的时候，示意是一个数字。
var a = 123;var b = "abc";console.log(isNaN(a)); // falseconsole.log(isNaN(b)); // true后果：
| 示意图 |
|---|
小数
- 迷信计数法
//当一次数字很大的时候，能够用迷信计数法来示意var num = 5e+5; //5乘以10的5次方var num = 3e-3;//3乘以10的-3次方- 浮点数精度失落问题
//在进行浮点数运算的时候，可能会呈现精度失落的问题0.1 + 0.2 = 0.30000000000000004;0.2 + 0.2 = 0.4;//尽量少用浮点数进行运算，不要让浮点数进行比拟。 解决办法 : 依据小数点前面的位数量 乘以对应的整数; 0.1 + 0.2 ==> (0.1*10+0.2*10) / 10 = 0.30.01 + 0.02 呢?数值范畴
最小值：Number.MIN_VALUE，这个值为： 5e-324最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308无穷大：Infinity 1/0无穷小：-Infinity字符串类型
在类型打印中，能够看到在后果应用string来代表字符串类型。
咱们说，字符串其实就是很多字符的汇合，用引号引起来，然而单引号和双引号也是字符，如果作为字符串的字符？
<font color="blue">思考，如何打印以下内容：</font>
大家好,我姓"熏",我叫孙悟空抉择"难看"的表面，还\是'乏味'的灵魂剖析：
- 引号能够嵌套，然而不能嵌套本人，须要穿插嵌套（单引号嵌套双引号或者双引号嵌套单引号）。
- 应用本义符
console.log('大家好,我姓"熏",我叫孙悟空');console.log('抉择"难看"的表面，还\\是\'乏味\'的灵魂');成果：
| 示意图 |
|---|
一些带有非凡含意的字符须要进行本义，例：
| 符号 | 意义 |
|---|---|
| \n | 换行 |
| \t | 制表符 |
| \b | 空格 |
| \ | 斜杠 |
| ' | 单引号 |
| " | 双引号 |
示例：
| 示意图 |
|---|
<font color="red">留神：js能够输入标签，让页面中的元素具备标签的个性，然而在输入标签的时候肯定要将标签当做字符串输入。</font>
| js输入标签 |
|---|
字符串外面的字符个数：字符串.length
对象类型
在浏览器的后果中应用object来代表对象类型。
null代表一个空的对象，通常应用过的对象当前将不再应用，须要将它手动销毁的时候给它赋值为null。
运算符
赋值运算一
在编程中=不叫“等于号”，叫“赋值符”，<font color="red">作用是将左边的值赋值给右边的变量，反过来讲，赋值符左边是值，右边是变量 </font>
var x = 1 // 将左边的数字1赋值给右边的变量x其实就是将左边的数字1放到叫做x的那个内存空间中。
留神：变量是可变的，也就是说<font color="red">同一个变量能够屡次赋值，前面的值笼罩后面的值</font>。
var x = 1; // 申明变量x并给他赋值1x = 10; // 给变量x从新赋值为10alert(x); // 当初x变量的值就是10第二次赋值的时候，是纯赋值操作，不是申明变量，所以就不必var关键字了。
算术运算
| 运算符 | 示例 | 备注 |
|---|---|---|
| +（求和） | var a = 1; var b = 2; var c = a + b; | 数学中的加法 |
| -（求差） | var a = 2; var b = 1; var c = a - b; | 数学中的减法 |
| *（求积） | var a = 1; var b = 2; var c = a * b; | 数学中的乘法 |
| /（求商） | var a = 1; var b = 2; var c = a / b; | 数学中的除法 |
| %（求余） | var a = 5; var b = 2; var c = a % b; | 数学中的求余数 |
字符串的拼接运算
下面的+，如果两边都是数字，那进行的是数学中的加法运算。然而两边只有一边是字符串的话，那是将两边的值连接成一个。也就是所谓的字符串的拼接。
var a = 12345;var b = "上山打老虎"var c = a + b;console.log(c); // 后果：12345上山打老虎也就是将a变量和b变量拼接在一块，组成一个新的字符串，赋值给了c变量。
拼接运算的+左右两边，只有有一边是字符串就进行拼接运算，具体情况有：数字+字符串、字符串+数字、字符串+字符串。
关系运算（比拟运算）
| 运算符 | 形容 |
|---|---|
> | 大于 |
>= | 大于等于 |
< | 小于 |
<= | 小于等于 |
== | 等于（次要用于判断两边的值是否相等） |
=== | 全等于（先判断两边的类型是否相等，类型相等再判断值是否相等） |
<font color="red">关系运算最初的后果只有两种，一种是真，一种是假，也就是布尔型的true和false</font>
console.log(2>3); // falsevar a = 2>1;console.log(a); // true后果
| 运行后果 |
|---|
等于和全等于
var a = 123;var b = "123";console.log(a==b); // trueconsole.log(a===b); // false后果
| 运行后果 |
|---|
a变量和b变量在内存中占用大小一样，外面的存的内容也一样，所以是相等的
但类型不一样，所以不全等。
赋值运算二
| 符号 | 形容 | 示例 |
|---|---|---|
| += | 本人先加后，再赋值给本人 | var a = 1; a += 2; 相当于a先加2，后果赋值给a |
| -= | 本人先减后，再赋值本人 | var a = 1; a -= 1; 相当于a先减1，后果赋值给a |
| *= | 本人先乘后，再赋值本人 | var a = 1; a *= 3; 相当于a先乘3，后果赋值给a |
| /= | 本人先除后，再赋值本人 | var a = 4; a /= 2; 相当于a先除2，后果赋值给a |
| %= | 本人先余后，再赋值本人 | var a = 5; a %= 2; 相当于a先余2，后果赋值给a |
代码：
var a = 1;a += 2; // 将a先加2，失去后果3，再将3赋值给aconsole.log(a); // 3要了解下面的代码，首先了解给变量从新赋值。
var a = 1; // 先申明，给a赋值为1a = 3; // 给变量a从新赋值为3console.log(a); // 3而后了解本人运算后再赋值给本人（回忆一下：赋值符右边是变量，左边是值）
var a = 1;a = a + 2; // 本人加2后再赋值给本人console.log(a); // 3练习：最初的a变量是多少？
var a = 5;a %= 3;console.log(a); // 2类型转换
强制转换
转换为布尔型
语法： Boolean(arg)- 非0数字转换为布尔型为true，0转换为布尔型为false
- 非空字符串转换为布尔型为true，空字符串转换为布尔型为false
- undefined转换为布尔型为false
- null转换为布尔型为false
转换为字符串
语法： String(arg)- true转换为字符串仍为 true，false转换为字符串仍为false
- null转换为字符串扔为null
- undefined转换为字符串仍为undefined
转换为数字
语法： Number(str)- NaN代表不是数字，然而他是数字类型（没有意义的数字）
- 非数字字符串转换后都是NaN（NaN是一个不是数字的数字类型）
- true转为数字为1，false转为数字为0
- undefined转换为数字为NaN
- null转化为数字为0
应用函数强制转换为数字
语法： parseInt(arg) # 强制转换为整数 parseFloat(arg) # 强制转换为小数- 小数转换为整数只取整数，向下取整
- 首位非数字的字符串强转为整数为NaN，首位是数字的字符串强转为整数是首位的数字
- 布尔型强转为数字为NaN
- undefined强转为数字为NaN
- null强转为数字为NaN
应用
toString()办法强制转换为字符串，转换后果和String()函数一样var a = 123456;b = true;var c = a.toString();var d = b.toString();console.log(c);console.log(typeof c);console.log(d);console.log(typeof d);留神：这个办法不能给undefined和null应用
隐形转换
数学运算时转换为数字型，例：
var str = "100"var a = str%10; // 乘和除以及求余都行var b = true + 1console.log(a);console.log(b);比拟运算时产生隐形转换，例：
- 如果两个值都是字符串，则进行比拟编码值
- 如果有一个值为数字或布尔型，则转换为数字进行比拟
- 字符串进行比拟的时候首字符进行比拟，相等再进行前面的字符比拟。参照阿斯克码表。
拼接运算时产生字符串转换，例：
var a = "1";console.log(a+12); // 112下午
逻辑运算
逻辑运算个别用于判断多个关系运算，得出最初后果。
| 运算符 | 形容 | ||
|---|---|---|---|
| &&（与，并且） | 左右两边都为true，最初后果才为true，否则就是false | ||
| \ | \ | （或者） | 左右两边只有有一个true，最初后果就为true，否则就是false |
| ！（非，取反） | 将true解决为false，将false解决为true |
逻辑运算最初得出的后果也是布尔型。
例题：
模特的要求：年龄在18岁以上，30岁以下。小红往年20岁，看看小红是否满足条件。
var age = 20; // 小红的年龄var result = age > 18 && age < 30;console.log(result); // true 阐明小红满足条件了如果小红往年31岁呢？
var age = 20; // 小红的年龄var result = age > 18 && age < 30;console.log(result); // false 阐明小红不满足条件小红嫁人：小红想嫁给小明。小明说：除非你身高160cm以上，或者你有50000元的嫁妆。小红身高155cm，做模特攒了100000元。看看小红是否满足小明的条件。
var height = 155; // 小红的身高var money = 100000; // 小红的钱var result = height > 160 || money > 50000;console.log(result); // true 阐明小红满足了小明的条件如果小红只攒了30000元呢？
var height = 155; // 小红的身高var money = 30000; // 小红的钱var result = height > 160 || money > 50000;console.log(result); // false 阐明小红不满足小明的条件双重否定等于必定。
年龄小于18或年龄大于30都不满足小红嫁人的条件。
var age = 20; // 小红的年龄var result = !(age < 18 || age > 30); // 不满足条件，再取反就满足了console.log(result); // true 阐明这种表达方式也是能够的小红身高小于160cm，并且钱财小于50000元，就不满足小明的条件。
var height = 155; // 小红的身高var money = 100000; // 小红的钱财var result = !(height < 160 && money < 50000); // 不满足条件再取反表白满足console.log(result); // true 阐明小红还是满足条件的自增自减运算
符号：++ 示意让一个数字递增1
var a = 1;a++console.log(a); // 2++能够放在前面，也能够放到后面，示意的意思是一样的
var a = 1;++a;console.log(a); // 2当递增运算碰到赋值或者输入的时候，++放在后面和后就有了区别：
放在前面
var a = 1;console.log(a++); // 1console.log(a); // 2var b = 1;var c = b++;console.log(c); // 1console.log(b); // 2当++放在前面的时候，就最初进行递增运算，先进行输入或者赋值。
放在后面
var a = 1;console.log(++a); // 2console.log(a); // 2var b = 1;var c = ++b;console.log(c); // 2console.log(b); // 2当++放在后面的时候，就先进行递增运算， 后进行输入或赋值。
符号：-- 示意让一个数字递加1
应用办法和注意事项与递增一样。
<font color="red">递增递加运算须要应用变量，不能应用具体数字</font>