JavaScript基础

1、JS发展

1.1、浏览器发展

1.1.1、主要浏览器与其内核

浏览器-内核：IE-trident， chrome-webkit、blink， safari-webkit， firefix-gecko， opera-presto。内核分为JS引擎和渲染引擎。

1.1.2、浏览器历史

1990年，蒂姆伯纳斯李超文本分享资讯的人，开发了浏览器：world wide web ，后移植到C，最后更名为 libwww/nexus，真正意义上的浏览器 libwww/nexus：允许别人浏览他人编写的网站；1993年，美国伊利诺大学 NCSA组织中的马克.安德森开发了 MOSIAC 浏览器，可以显示图片，MOSIAC: 真正意义上的图形化浏览器。1994年，马克.安德森 和吉姆.克拉克 (硅图SGI公司成员) 成立了公司：MOSIAC communication corporation 马赛克交流公司， MOSIAC 商标属于伊利诺大学，在马克.安德森离开后，被转让给了 spy glass 公司，所以更名为 Netscape communication corporation，网景公司在 MOSIAC 的基础上开发了 netscape navigator浏览器，流行了将近十年->2003。1996年第一件大事，微软公司收购了 spy glass，通过 MOSIAC 开发了 IE internet exploror 1.0，发布了 IE3，出现了第一个脚本语言：JScript，可以让用户在网页上进行动态的交互。1996年第二件大事，网景公司 Brendan eich 在 NETSCAPE NAVIGATOR 开发出了 livescript(JavaScript前身)。1996年第三件大事，JAVA 有知名度了，网景 livescript 不温不火，和 SUN 公司商量，合伙推广和宣传产品，livescript 更名为 javascript。2001年， IE6诞生，出现 JS 引擎，IE6 将渲染引擎中解析 Javascript 的这一部分剥离出来，形成了引擎。2003年，mozilla 公司的 firefox 是根据 netscape navigator 改的。2008年，google 基于 WEBKIT BLINK 内核 + GEARS功能(创造了离线上网的功能) 开发了 chrome ， chrome -> V8引擎(JS 引擎)，V8 引擎的优点：a. 直接翻译机器码，b. 独立于浏览器运行，Node.js 也是一个基于 Chrome V8 引擎能够独立运行的 JavaScript 环境。2009年，甲骨文oracle 收购了 SUN 公司（确认一下时间），JS的所有权给甲骨文。

PROGRESSIVE WEB APP  ：渐进式 WEB APPProgressive Web App其实严格说来不是一个产品，而是一种理念，或者叫打包产品，因为他是把众多能让WEB产品APP化的能力的一个集合。从Google官方网站介绍内容提炼一下，PWA的三大基本能力分别是：类APP交互，消息推送，离线缓存

1.2、ECMA

1、全称：European Computer Manufactures Association 欧洲计算机制造联合会 2、功能：评估、开发、认可电信/计算机标准
3、ECMA - 262 脚本语言的规范 ECMAScript
4、规范化脚本语言

为了让最初的JavaScript与最初的JScript能遵循同一套标准发展而诞生的ECMAScript，正好排到了作为Ecma的262号标准而已，所以得到ECMA-262编号

1.3、编程语言

1、编程语言分为编译型和解释型
2、编程语言的编译过程：a、编译型：源码通过编译器，到机器语言，组成可执行文件（跨平台性不好，更适合复杂的、逻辑性较强的程序，这样运算速度会更快一些，更有优势）；b、解释型：通过解释器，解释一行就执行一行（不需要根据不同的系统平台进行移植，只要系统里有相应的解释器就一定能够执行）

1.4、脚本语言

脚本语言通过脚本引擎的解释器才能正常运行前端后端都有脚本语言

javascript: 客户端脚本，js 的解释器在浏览器JS引擎（浏览器）上，Jscript 微软，只能在IE上运行，Vbscript 微软
php: 服务器端脚本，解释器在服务端上，所以页面看不到解释的过程

1.5、编程语言要素

1、变量 2、数据结构 3、函数 4、运算能力

1.6、JavaScript 和 HTML CSS 区别

HTML、 CSS 不具备逻辑，没有变量、数据结构、函数、运算，html/css 是标记语言具有变量、数据结构、函数、运算的语言叫编程语言，JavaScript是一门编程语言

2、JS基础

1.1、JavaScript三大块

1、ECMAscript：1. 语法，2. 变量，3. 关键字，4. 保留字，5. 值，6. 原始类型，7. 引用类型运算，8. 对象，9. 继承，10. 函数
2、DOM (document object model)：是 W3C 的规范，功能：操作 HTML 文档，获取、添加、删除、修改 HTML 元素
3、BOM (browser object model)：没有规范，功能：操作浏览器，滚动条、窗口的宽高、事件、注册/移除事件、事件冒泡捕获、键盘、鼠标的事件、正则。

1.2、JS-单线程、多线程

1、单线程：这主要和js的用途有关，js是作为浏览器的脚本语言，主要是实现用户与浏览器的交互，以及操作dom；这决定了它只能是单线程，否则会带来很复杂的同步问题。举个例子：如果js被设计了多线程，如果有一个线程要修改一个dom元素，另一个线程要删除这个dom元素，此时浏览器就会一脸茫然，不知所措。

问：JS的引擎是单线程,为什么可以多个程序一起运行？  
答：单线程可以通过轮转时间片进行模拟多线程  
  模拟过程：  
    1. 任务1  任务2  
    2. 切分任务1 任务2  
    3. 随机排列这些任务片段，组成队列  
    4. 按照这个队列顺序将任务片段送进JS进程  
    5. JS 线程执行一个又一个的任务片段

2、多线程：多个程序可以同时运行

1.3、Javascript 代码块引用

1、引用外部文件，填相对路径（更引用推荐外部文件的方式）

<script type="text/javascript" src="js/index.js"></script>

2、引用内部文件

<script type="text/javascript">document.write("inner")</script>

注：type="text/javascript"写错则不执行

3、有时会故意写错，将其作为模板

<!-- 这里作为模板，不会执行 -->
<script type="text/html" id="name">
  <div>{{name}}</div>
</script>
<script type="text/javascript">
  <!-- 在这里对模板中的数据进行处理 -->
  var nameDiv = document.querySelector('#name').innerHTML;
</script>

1.4、JS变量

1、变量是容器，功能：存储数据，作用：能取出进行后续使用
2、声明变量：

    var -> variable

var a; // 变量声明：向系统申请一个存储空间，这个存储空间命名为 a
a = 3; // 变量赋值：为变量分配一个存储空间
var a = 3; // 变量声明并赋值

最全前端深度学习笔记-JS篇