1. JavaScript 发展史 ⭐
- 1.1 主流浏览器
- 1.2 浏览器历史与JS诞生
2. ECMA
3. 编程语言
- 3.1. 编程语言的分类
- 3.2. 翻译过程
- 3.3. 优缺点
- 3.4. 脚本语言
4. JavaScript
- 4.1. JS三大块
- 4.2. 单线程、多线程
- 4.3. 引用JS脚本两种方式
- 4.4. JS与HTMLCSS区别
5. 变量
- 5.1. 变量概念
- 5.2. 变量声明
- 5.3. 命名规范
6. JS的值
- 6.1. 强类型语言、弱类型语言
- 6.2. 原始值、引用值
7. 栈和堆 ⭐
- 7.1. 原始值存储
- 7.2. 引用值存储

1. JavaScript 发展史 ⭐

1.1 主流浏览器

主流浏览器的内核

浏览器	IE	Chrome	Safari	Firefox	Opera
内核	trident	webkit blink	webkit	gecko	presto

内核分为 JS 引擎和渲染引擎

1.2 浏览器历史与JS诞生

1990年

蒂姆·博纳斯·李（超文本分享咨询的人），开发了浏览器：world wid web，后来移植到C，后来更名为 libwww/nexus

1993年

美国伊利诺大学 NCSA 组织，组织中的 马克·安德森 开发了 MOSIC 的浏览器，一款真正意义上的图形化浏览器

1994年

马克·安德森 和 吉姆·克拉克（硅图SGI公司成员）成立了公司：MOSIAC communications corporation 马赛克交流公司。

后来出了一点小插曲：MOSIAC 商标属于伊利诺大学，在马克.安德森离开后，被转让给了 spy glass 公司，所以更名为 Netscape communication corporation。

网景公司在 MOSIAC 的基础上开发了 netscape navigator浏览器，流行了将近十年直至 2003

1996年

微软公司收购了 spy glass，通过 MOSIAC 开发了 IE internet exploror 1.0
这一年发布了 IE3，出现了第一个脚本语言：Jscript，可以让用户在网页上进行动态的交互
网景公司 Brendan eich 在 NETSCAPE NAVIGATOR 开发出了 livescript（JavaScript前身）
JAVA 有知名度了，网景 livescript 不温不火，和 SUN 公司商量，合伙推广和宣传产品，livescript 更名为 javascript

2001年

IE6 XP 诞生，出现 JS 引擎
IE6 将渲染引擎中解析 JavaScript 的这一部分剥离出来，形成了引擎

2003年

mozilla 公司发明出 firefox（基于 netscape navigator 改的）

2008年

Google 基于 WEBKIT BLINK 内核 + GEARS功能（创造了离线上网的功能）开发了 Chrome
Chrome -> V8引擎(JS 引擎)
1. V8 引擎的优点：
  1. 直接翻译机器码
  2. 独立于浏览器运行
  Node.js 也是一个基于 Chrome V8 引擎能够独立运行的 JavaScript 环境
2. 渐进式 WEB APP（PROGRESSIVE WEB APP）
  
  Google公司提出的 Progressive Web App 是一种理念，或者叫打包产品，因为他是把众多能让WEB产品APP化的能力的一个集合。
  
  Progressive Web App的三大基本能力：
  - 类APP交互
  - 消息推送
  - 离线缓存

2009年

甲骨文oracle 公司收购了SUN公司，JS的所有权给了甲骨文公司

2. ECMA

全称 European Computer Manufactures Association 欧洲计算机制造联合会
评估、开发、认可电信/计算机标准
里面有很多标准清单，其中ECMA-262就是脚本语言的规范（ECMAScript）
ECMAScript 规范化脚本语言

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

3. 编程语言

3.1. 编程语言的分类

编程语言分为编译型和解释型

3.2. 翻译过程

编译型：源码 -> 编译器 -> 机器语言 -> 可执行文件

解释型：源码 -> 解释器 -> 解释一行执行一行

3.3. 优缺点

解释型语言 -> 不需要根据不同的系统平台进行移植，只要系统里有相应的解释器就一定能够执行
编译型语言 -> 跨平台性不好，更适合复杂的、逻辑性较强的程序，这样运算速度会更快一些，更有优势

3.4. 脚本语言

脚本语言通过脚本引擎的解释器才能正常运行
前后端都有脚本语言：
1. JavaScript/JScript/VBScript/Actionscript-> 客户端脚本
  
  JS 的解释器在浏览器JS引擎上
  
  JScript 微软只能在IE上运行
  
  VBScript 微软
2. php/asp -> 服务器端脚本
  
  解释器在服务端上，所以页面看不到解释的过程

4. JavaScript

4.1. JS三大块

ECMAScript

语法、变量、关键字、保留字、值、原始类型、引用类型运算、对象、继承、函数

DOM（document object model）

W3C规范

操作 HTML 文档，获取、添加、删除、修改 HTML 元素

BOM（browser object model）

没有规范

操作浏览器，滚动条、窗口的宽高、事件、注册/移除事件、事件冒泡捕获、键盘、鼠标的事件、正则

4.2. 单线程、多线程

单线程

同一时间只能运行一个程序

问：JS的引擎是单线程，为什么可以多个程序一起运行？

答：通过轮转时间片算法模拟多线程，步骤如下：

任务1 任务2
切分任务1、任务2
随机排列这些任务片段，组成队列
按照这个队列顺序将任务片段送进JS进程
JS 线程执行一个又一个的片段

轮转时间片：短时间内轮流执行多个任务片段

多线程

可以同时运行多个程序

4.3. 引用JS脚本两种方式

引用外部文件，填相对路径（更引用推荐外部文件的方式）
```
<script type="text/javascript" src="js/index.js"></script>
```

引用内部文件

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

备注

引用了外部文件内部JS就不执行

<script type="text/javascript" src="index.js">document.write('111'); // 不执行
</script>

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

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

type="text/javascript"写错了就不执行

4.4. JS与HTMLCSS区别

HTMLCSS是标记语言，没有逻辑

而JavaScript是编程语言，具有变量、数据结构、函数、运算能力等编程语言的四个要素

5. 变量

5.1. 变量概念

变量是存储数据的一个容器，方便后续使用。

5.2. 变量声明

声明变量：var -> variable

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

单一声明：一个 var 声明多个变量

var a = 1,b = 2;  // 变量之间用逗号分隔，分号结尾

优先级

var x = 3,y = 4;
var z = x + y;  //声明 > 运算 > 赋值

5.3. 命名规范

不能以数字开头，能以字母 _ $ 开头
变量里可以包含字母 _ $ 数字
不能用关键字和保留字
语义化、结构化、有意义
变量命名小驼峰，构造函数大驼峰
尽量用英文或看得懂的英文缩写，如：ecma
不要用拼音或拼音缩写，不好维护

6. JS的值

6.1. 强类型语言、弱类型语言

动态语言 -> 脚本语言 -> 解释型语言 -> 弱类型语言（根据值判断数据类型）

静态语言 -> 编译型语言 -> 强类型语言（需要声明数据类型）

6.2. 原始值、引用值

原始值

JS原始值有5种

数据类型	解释
Number	整形和浮点形
String	单引号和双引号之间的字符
Boolean	true、false
undefined	未被定义的
null	空值 -> 初始化组件\函数、销毁函数、占位

引用值

常用引用值：object array funciton date RegExp

7. 栈和堆 ⭐

7.1. 原始值存储

原始值都存在栈内存中，先进后出，数据是永久保存，不可修改的

var a = 3;
var b = a;
a = 1;
document.write(b)  // 3

a 赋值给 b 时，是拷贝了一份 a 的值给 b

a 重新赋值的时候，新开辟了一个空间 a，赋值为1，原有的a=3，则释放a命名空间，但值仍留在内存中

7.2. 引用值存储

引用值存在堆内存中，它的指针存栈内存

var arr1 = [1, 2, 3, 4];
var arr2 = arr1;
arr1.push(5);
document.write(arr1, arr2)  // 1,2,3,4,5   1,2,3,4,5

arr1 赋值给 arr2 的时候，实际上是arr2指向的是arr1指向的堆的地址的，所以只要arr1改变，arr2值也改变

var arr1 = [1, 2, 3, 4];
var arr2 = arr1;
arr1.push(5);
arr1 = [1, 2];   //数组重新赋值就和原来的数组没有关系了
document.write(arr1)  // 1,2

重新赋值的时候，是新开辟了一个栈内存空间，指向新的堆内存地址，对应新的

【ECMAScript】发展史、ECMA、编程语言、变量、JS值相关推荐

ECMAScript-1【发展史-ECMA-编程语言-变量-JS值】
一.发展史及浏览器内核浏览器内核火狐:gecko chrome:webkit blink IE:trident 欧鹏:presto blink safari:webkit 2.发展史 1 ...
js中Object类型和Array类型的变量被赋值(复制)给其他变量后，修改被赋值(复制)的新变量的值，会影响原始变量的值，这是为什么呢？
JavaScript中的Object和Array都是指针变量类型,例如我声明 let obj={a:1};let arr=[1,2,3]; 其中的obj和arr存放的仅仅是对应的对象和数组内容所存放的 ...
怎么在js中取java变量的值
通过<%=java变量%>的方式赋值给js变量. 1.定义一个java变量 <%String a = "222";//定义一个string类型的java变量 %& ...
Js代码执行变量的值运算变量提升
Js代码执行 Js代码执行前,浏览器会给他(js)一个全局环境,叫window(全局作用域).在window下浏览器找到所有的带var和function的关键字然后给他们分配内存地址.不管你赋值没赋值 ...
在Safari里也能像Chrome里一样，通过执行js修改变量的值，在debugger里立即生效
在Safari里也能像Chrome里一样,通过执行js修改变量的值,在debugger里立即生效. 和Chrome里的network tab一样,Safari里通过network request一样能 ...
使用变量的值作为JS对象的属性名，从而获取其对应的值
使用变量的值作为JS对象的属性名,从而获取其对应的值 <script>var object={"a":1111,"b":2222};var para ...
LV2之-----js 值类型和引用类型（基石1）
一.学习目标 1.值类型和引用类型的基本概念 2.常见的值类型和引用类型都有哪些? 3.数据类型检测 4.值类型和引用类型在内存中的存储机制 5.创建对象的方式有哪些? 6.对象属性名的点表示法和方括 ...
linux获取java环境变量的值,linux获取java环境变量的值
linux获取java环境变量的值 [2021-02-11 00:17:01] 简介: 服务器这篇文章主要为大家展示了linux环境下怎么配置环境变量,内容简而易懂,希望大家可以学习一下,学习完之 ...
php 实现两变量值对换,php两个变量的值交换的方法
前几天写了一下JS脚本两个变量的值交换的方法,今天有空就写一写php中两个变量的值交换的几种方法,方法很简单大家可以参考一下! php两个变量的值交换的方法方法1: 定义一个新的变量,用于在变量的值 ...
js值的拷贝和值的引用_到达P值的底部：直观的解释
js值的拷贝和值的引用介绍 (Introduction) Welcome to this lesson on calculating p-values. 欢迎参加有关计算p值的课程. Before ...

【ECMAScript】发展史、ECMA、编程语言、变量、JS值

目录