（一）前置知识
（1）5大主流浏览器内核
IE trident
chrome webkit blink
Safari webkit
Firefox gecko
Opera presto
（2）、浏览器的历史 和 JS诞生
1、1990
蒂姆 伯纳斯 李 超文本分享资讯的人
World Wide Web 原本不是c写的，后来移植到c，改了个名字 libwww
libwww是真正意义上的浏览器，它的意义是允许别人浏览他人编写的网站
后来经过变迁变成了nexus
2、1993
美国伊利诺大学NCSA组织（核心成员 马克 安德森）
开发了MOSAIC浏览器 ，可以显示图片。
图形化浏览器
3、1994
伊利诺大学的马克 安德森 和 硅图公司 SGI的吉姆 克拉克
成立MOSAIC communication corporation
硅图公司是做高性能运算、数据库、数据库管理的
插曲
MOSAIC有商标权->商标权在伊利诺大学手里
->伊利诺大学在马克安德森离开之后将商标权转让给了 spy glass公司 这个公司也是做数据的
->马克安德森和吉姆克拉克只能改名 Netscape communication corporation
网景公司 ->在MOSAIC基础上开发了 netscape navigator 网景导航者浏览器->直到2003年都非常流行
4、1996
1993 1994 1996称为浏览器活跃的三年
微软公司收购 spy glass(手上有MOSAIC商标权)
->开发出了 IE internet explorer 1.0（通过MOSAIC开发出来的）
ie这款浏览器的内核实际上就是原封不懂的MOSAIC，在此基础上开发出来IE内核 trident，最早不叫 trident，
根本就没有命名，实际上就是在MOSAIC的基础上加了一些内容。
1996 IE3 的诞生出现了脚本语言 JScript(跟ie3一起发布的)
5、1996
网景公司的一个开发人员Brenden eich（在网景干的是对浏览器的再开发，是主导人员）
在 netscape navigator基础上
开发出了脚本语言 livescript，当时只能在netscape navigator上用
6、1996
java火起来了，网景公司livescript不温不火，
和有java所有权的sun公司商量（2009年被oracle收购），合作推广和宣传产品，livescript->javascript
7、 2001
IE6 和 windows XP诞生
IE6带来了JS引擎（内核分为js引擎和渲染引擎，最早的时候根本就没有js引擎）
JS引擎没有的时候，是因为JS发挥不了那么大的作用，后来JavaScript的崛起导致所有的厂商
发现网页动态的好处，IE6从渲染引擎中将解析JS的部分剥离出来单独形成了JS引擎
8 、2003
mozilla公司 的Firefox 其实是根据 netscape navigator改的
2002年netscape navigator将浏览器的整个源码开放
9、2008
对于浏览器对于前端开发是非常重要的一年
Google基于 webkit blink 内核加上 GEARS功能开发出了chrome。
GEARS是Google做的完全离线上网功能（离线浏览网页的功能）
Google做了非常多的贡献，Angular JS是Google做的, 渐进式 WEB APP是Google提出来的
PROGRESSIVE WEB APP 渐进式 WEB APP（其实是移动端的web app）
chrome带来了v8引擎（一种JS引擎）。
v8引擎厉害之处：1、直接翻译机器码 2、独立于浏览器运行
10、2009
甲骨文也就是oracle收购了SUN公司
JS的所有权给了甲骨文
（3）ECMA
European Computer Manufactures Association
欧洲计算机制造联合会 是评估、开发、认可电信、计算机标准，有很多list,也就是标准清单
好多组织都在瑞士日内瓦，比如世界卫生组织 知识产权组织 气象组织 贸易组织
ECMA-334是C#的规范
ECMA-262 是脚本语言的规范 叫ECMAScript
ES5 ES6是一个标准，不能仅仅代表一个语言
（4）编程语言：
编译型 解释型 都是需要翻译的，只是翻译的时间不一样
编译型：源码->编译器->机器语言->可执行的文件
解释型：源码->解释器->解释一行就执行一行
解释型语言->不需要根据不同的系统平台进行移植
脚本语言一定有脚本引擎。脚本语言-通过脚本引擎的解释器执行
前端 后端都有脚本语言，JavaScript PHP都是脚本语言
Javascript 是客户端脚本 php是服务端脚本
前端脚本语言在浏览器鼠标右击查看查看源代码可以看见，后端脚本语言看不见,
这就是后端脚本语言和前端脚本语言最大的区别。
出现这种情况是因为JS的解释器是在浏览器中的JS引擎中的，后端的php解释器是在服务端的
新建index.php文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php echo 'HELLO WORLD!<br />' ?>
<script>
document.write('Hello world');
</script>
</body>
</htm
前端脚本语言不是只有JavaScript
jscript 微软只支持IE
vbscript 微软
这两个一个放弃了，一个没人用
c# vb.net是微软的
脚本语言有纷争，大家都有自己的一套语法，脚本语言要有统一的规范，微软直接把JavaScript的语法规范完全照抄，现在jscript已经没有了，回过头去看jscript和Javascript没什么区别。在开发jScript
之前有一个脚本语言vbscript，也是存活时间最久的脚本语言之一，最早vbscript是开发客户端应用程序的，后来也能实现网页动态化。
asp技术 微软开发的针对动态网页的技术，是服务端的脚本程序，企业的官方网站用的多 asp开发最容易，微软开发了一个.net框架，框架提供了很多模版式的UI。
actionscript 是给 adobe flash player用的运行环境下的脚本语言
（5）JavaScript学习的三大块:
1、ECMAscript
ECMAscript包含语法、变量、关键字、保留字、值
原始类型、引用类型、运算、对象、继承、函数
2、DOM document object model W3c的规范
主要是获取修改添加删除HTML元素
3、BOM browser object model 没有规范
滚动条、窗口的宽高、事件（注册移除事件、事件冒泡捕获、键盘鼠标的事件）正则
JavaScript JS引擎是单线程
轮转时间片（短时间之内轮流执行多个任务的片段）模拟多线程
1、任务1 任务2
2、切分任务1 任务2
3、随机排列这些任务片段，组成队列
4、按照这个队列顺序将任务片段送进JS进程
5、JS进程执行完一个又一个的任务片段
1、引入js文件
<script type="text/javascript" src="js/index.js">
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table id="J_table"></table>
<script type="text/tpl" id="J_tableTpl">
<tr>
<td>{{id}}</td>
<td>{{name}}</td>
<td>{{price}}</td>
</tr>
</script>
<script type="text/javascript">
var data = [
{
id: '1',
name: 'IphoneX',
price: '8838'
},
{
id: '2',
name: '三星盖世8',
price: '6366'
},
{
id: '3',
name: '小米MIX2s',
price: '3299'
},
{
id: '4',
name: '锤子坚果pro2',
price: '2699'
}
];
var table = document.querySelector('#J_table');
var tableTpl = document.querySelector("#J_tableTpl").innerHTML;
var list = '';
for(var i in data){
var item = data[i];
list += tableTpl.replace(regTpl(),function(node, key){
return {
'id': item.id,
'name': item.name,
'price': item.price
}[key];
})
}
table.innerHTML = list;
function regTpl(){
return new RegExp(/{{(.*?)}}/, 'igm');
}
</script>
</body>
</html>
windows98只允许有3位
2、JavaScript与HTML CSS的区别？
HTML CSS标记语言
编程语言要有的四个要素：变量 数据结构 函数 运算能力
（1）变量
变量是存储数据的一个容器，能把数据取出来后续使用
var a; //变量声明
a = 3; // 变量赋值
var a = 3; //变量声明并赋值
var x = 1, y =2 // 单一声明方式
变量命名规范：
不能以数字开头
能以字母_$开头
变量中可以包含字母_$数字
不能用关键字和保留字
ECMAScript 关键字(keyword)
break case catch continue default
delete do else finally for
function if in instanceof new
return switch this throw try
typeof var
ECMAScript 保留字（reserved word）
abstract boolean byte char class
const debugger double enum export
extends final float goto implements
import int interface long native
package private protected public short
static super synchronized throws transient
volatile
（2）JS的值
原始值->基本数据类型
只有5种 Number String Boolean undefined null
JavaScript根据值来判断数据类型。在声明时并不声明数据类型而是根据值来判断数据类型的语言称为弱类型语言。
动态语言->脚本语言->解释型语言->弱类型语言
静态语言->编译型语言->强类型语言
Boolean 计算机中非真即假
undefined 未被赋值
null 空值 一般初始化组件、函数，或者销毁函数，占位会用到。
引用值
5种 object对象 array数组 function函数 date日期 RegExp正则
原始值
存在栈内存中，数据是永久保存，不可改变的，图示：1008是栈底。
先声明一个a变量，给a赋值为3，这时a指向1008这个地址
然后将a赋值给变量b,实际上是拷贝了一份a的值给b,这时b指向1007这个地址
修改a的值，这时a指向1006这个地址，并不是在原来的空间修改a,而是重新开辟一个空间，将a命名到新的空间。
1008里面的数据保留了下来，只是它对应的名称以及没有了
var a = 3;
var b = a;
a = 1;
document.write(b);
引用值
值存在堆内存 值的地址存在栈内存
arr1和arr2指向同一个堆内存的地址，修改arr1的值arr2也会跟着改
var arr1 = [1,2,3,4];
var arr2 = arr1;
arr1.push(5);
document.write(arr2); // 1,2,3,4,5
重新给arr1赋值,不会影响arr2
var arr1 = [1,2,3,4];
var arr2 = arr1;
arr1.push(5);
arr1 = [1, 2];
document.write(arr2);
244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
