2021-08-02

偷学web前端之js

web 发展史：Mosaic 是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器，于 1993 年问世。1994 年 4 月，马克安德森和 Silicon Graphics（简称为 SGl，中译为“视算科技”或“硅图”）公司的创始人吉姆 克拉克（Jim Clark）在美国加州设立了“Mosaic Communication Corporation”。Mosaic 公司成立后，由于伊利诺伊大学拥有 Mosaic 的商标权，且伊利诺伊大学已将技术转让给 Spy Glass 公司，开发团队必须彻底重新撰写浏览器程式码，且浏览器名称更改为 Netscape Navigator，公司名字于 1994 年 11 月改名为 Netscape Communication Corporation，此后沿用至今，中译为“网景”。微软的 Intemet Explorer 及 Mozilla Firefox 等，其早期版本皆以Mosaic 为基础而开发。微软随后买下 Spy Glass 公司的技术开发出 Intemet Explorer浏览器，而 Mozilla Firefox 则是网景通讯家开放源代码后所衍生出的版本。

---

javascript 历史：Javascript 作为 Netscape Navigator 浏览器的一部分首次出现在 1996 年。它最初的设计目标是改善网页的用户体验。作者是 Brendan Eich。期初javascript 被命名为 Livescript,后因和 Sun 公司合作,因市场宣传需要改名javascript。后来 Sun 公司被 Oracle 收购，javascripth 版权归 Oracle 所有。

浏览器组成：
（1）shell 部分
（2）内核部分：分为渲染引擎、js 引擎和其他模块。

JavaScript 的逼格：
（1）属于解释性语言，解释一行执行一行。（与编译性语言不同，编译性语言是通篇翻译然后执行）
（2）单线程

js 执行队列：轮转时间片
js 三大部分：ECMAScript、DOM、BOM

javascript入门
javascript 引入：
（1）页面级 js：直接在 HTML 文件里写上 script 标签，写在哪里都可以。

 <script type=“text/javascript”> 
 js 代码 
 </script>

其中，type=“text/javascript”是告诉浏览器这里边放的是 js 代码。

（2）外部 js 文件：新建一个 js 文件（文件名.js），然后在 HTML 里边写
上<script type=“text/javascript” src=“”>，src 里边放文件地址，把 js 
代码写在外部 js 文件里。

document.write（“内容”）；：这句js代码的作用是在浏览器中打印出你想要的内容。

变量：
（1）作用：存放数据，我们会把一筐数据放到一些变量里，以便于后续使用。
（2）声明变量：var 变量名；，例如：var a；这句话的意思是：我们向程序申请了一个变量的房间，这个房间的名字叫做 a，说通俗一点，就是我们想向系统要一个名字为a 的筐，往这个筐里放东西，这就叫声明变量。

（3）变量赋值：例如 var a；，如果你想给 a 这个筐里边放东西的话，可以这么写，例如 a=100,这样就把 100 放进了 a 筐里，注意这里的“=”不能叫等号，叫赋值符号，把100 这个值赋给了 a，这就叫变量赋值。声明变量和变量赋值两个过程是分开的，没必要非得连在一起。当然也可以写在一起：var a=100；，这是一个简写，其实这里边包含了两个过程：声明变量和变量赋值。如果我们想把 100 打印出来，则document.write(a);即可。（注意：document.write()括号里如果是变量名的话，不需要加引号，如果是字符串的话，则需要加引号。）

（4）单一 var 模式：如果需要同时申请多个变量，可以这么写 var a,b,c;中间用逗号隔开（不能用分号，分号是 js 每一句结尾用的），也可以赋值：var a=1,b=2,c=3;打印的时候也要用逗号隔开 document.write(a,b,c);开发的时候，为了规范书写，需要在逗号后边加回车，让多个变量多行展示。

（5）一个变量里只能存放一个值，如果给变量赋了一个新的值，他原来的值就不存在了，例如 var a=10; a=20; 这个时候 a 的值是 20。

（6）变量命名规则：变量名必须以英文字母或 _ 或$开头；变量名可以包括英文
字母或 _ 或$或数字；不可以用系统的关键字（有特殊语法含义的单词）、保留字
（未来系统可能用它作为关键字的单词）作为变量名。

（7）变量是可以运算的，例如：var a=10; var b=20; var c; c=a+b; document.write©;此时打印出来 30，在计算机里，运算的优先级大于赋值的优先级，也就是先把等号右边的 a+b 算出来后在赋给 c 的。

值类型：值类型分为原始值和引用值（js 属于解释性语言，声明变量只有一个 var，而且 var 里边可以放入任何值类型，js 里的值类型是由值来决定的，不是由变量决定的）

（1）原始值分为 Number,String,Boolean,undefined,null
Number:数字类型，例如 var a=1；或 var a=-123.321 都可以。

String：字符串类型，我们有的时候需要把一些中文、数字或者英文等（字符串）输入到里边，则必须加上引号 var a=“内容”,同样的，字符串也可以 document.write(a)打印出来。（双引号里边的都是字符串）

Boolean：这里边的值只有两个，分别是 var a=true 和 var a=false，打印出来也是true 或者 false，它是表示逻辑的词，以后会大有用处。

undefined：这里边的值只有一个，var a=undefined，打印出来也是他，当你声明一个变量并且没有赋值直接打印的话，出来的就是 undefined，你也可以给变量赋值为undefined。

null：null 表示占位，var a=null,打印出来也是 null，代表空的意思，空值，假如以后你写了一个方法，又不想要了，又删除不了，这时你可以用空值覆盖。

（2）引用值分为 array,object,function,date,RegExp 等，引用值后续会详细讲解，这里拿 array 举个例子。

array ：数组， 相当于一个筐里有很多小格，可以放入很多东西 ，例如 var
arr=[1,2,3,true,“abc”]，打印出来也是 1,2,3,true,abc

 1：var a=10; 
var b=a; 
a=20; 
document.write(b); 
得 10

例 2：var arr=[1]; 
var arr1=arr; 
arr.push(2); 
document.write(arr1);
 得 1,2

例 3：var arr=[1,2]; 
var arr1=arr; 
arr=[1,3]; 
document.write(arr1); 
得 1,2

解析：原始值和引用值都是要往计算机里边存的，但是原始值和引用值存的地方不一样，原始值存在 stack（栈内存）里，引用值存在 heap（堆内存里），栈内存相当于一个有底没有顶的箱子，先进去的东西最后出来，堆内存相当于一个储物格，散列结构，怎么放进去怎么拿出来。通俗的讲，栈内存和堆内存里边有好多房间，举个例子，比如说房间号为 1001,1002,1003……

例 ：原始值有一个特点：不可改变，放进去的值永远改变不了，所以，先在栈内存里把 1001 号房间改名为 a 房间，里边放了个 10，然后再在栈内存里把 1002 房间改名为b 房间，然后，b=a 是把 10 这个数字复制过来的，原来 a 里边的数值还在，此时 a 和 b里边都有 10，再让 a=20 的话，由于原来 a 里边的 10 改变不了，所以系统会把 1003 房间再次改名为 a 房间，里边放入 20，原来的 a 房间数值 10 还在，只不过把 a 这个名字去掉了，变回了 1001 房间，成为了一个野房间，那么，b 房间里的 10 还是在那里，所
以打印 b 得 10.

js 语句基本规则
（1）语句后边要用英文分号结束。
（2）js 语法错误会引发后续代码终止，但不会影响其他代码块。
（3）书写格式要规范，“+-*/=”两边都要有空格。
（4）js 注释：Ctrl+？，单行注释是//注释内容，多行注释为/*注释内容*/

运算操作符
（1）+：加号，它的作用是数字运算和字符串连接，例如
var a=1+2；打印 a 得 3，
var a=“a”+“b”；打印 a 得到 ab，
任何数字类型加字符串都等于字符串，
var a=1+“a”；打印 a 得到 1a，
var a=“a”+1+1；打印 a 得到 a11，
计算机的运算顺序也和数学一样，
var a=1+1+“a”；打印 a 得到 2a，
var a=“a”+（1+1）；打印 a 得到 a2

（2）-：减号，例如
var a=3-1；打印 a 得到 2
（3）：乘号，例如
var a=33，打印 a 得到 9
（4）/：除号，例如
var a=9/3；打印 a 得到 3
var a=0/0；打印 a 得到 NaN（NaN 属于数字类型，但是又得不出一个具体的数，则得到 NaN）
var a=1/0，打印 a 得到 infinity（无穷）
var a=-1/0，打印 a 得到-infinity（负无穷）

（5）%：摩尔，就是求余，例如
var a=5%2；打印 a 得到 1
var a=10%4;打印 a 得到 2
var a=5%1；打印 a 得到 0
var a=4%6；打印 a 得到 4

（6）=：赋值
（7）（）：有括号的先算括号里边的。
（8）++：例如 a=a+1 就可以简写成 a++，a=a+1 他是先计算右边的在把值赋到左边去，
就是 a+1 再赋给 a，就是自身+1 再赋给自身就叫++。

（9）--：例如 a=a-1 就可以简写成 a--，就是自身-1 再赋给自身就叫--。
注意：++和--位置还不太固定，可以放前边也可以放后边，以++为例，有个 a++
和++a，他们的区别是先++还是后++，比如说：
例 1：var a=10；document.write(a++)；document.write(a)；打印第一个 a 得 
10，打印第二个 a 得 11

解析：++放在后边（a++）就是先执行语句后++，也就是第一次先把 a 打印出来然后再++，所以第一次打印 a 得 10，然后++，第二次打印 a 得 11.

（10）+=：例如：a=a+10 就可以简写成 a+=10，这个符号只能放中间，其实 a++就是a+=1 的简写。
（11）-=：例如：a=a-10 可以简写成 a-=10
（12）=：例如：a=a10 可以简写成 a*=10
（13）/=：例如：a=a/10 可以简写成 a/=10
（14）%=：例如：a=a%10 可以简写成 a%=10