重学 JS-1

#发展史，ECMA，编程语言，JS 相关，变量，JS 值

专业素养

#参考视频：

https://www.bilibili.com/video/BV1x441167iH/?spm_id_from=333.337.search-card.all.click&vd_source=eeb7ae40bd78a24b0434b669a8496d07

一，发展史

1，五大主流浏览器

五大主流浏览器 内核
IE trident
chrome webkit blink
safari webkit
firefox gecko
opera presto

2，浏览器的历史 和 JS 诞生

①1990 蒂姆 伯纳斯 李 超文本分享咨询的人

world wide web 移植到 C libwww/nexus

允许别人浏览他人编写的网站

②1993

美国伊利诺大学 NCSA 组织（马克 安德森）

MOSIAC 浏览器 显示图片 图形化浏览器

③1994

马克 安德森和吉姆 克拉克 硅图 SGI

MOSIAC communication corporation 插曲

MOSIAC 商标权->伊利诺大学->spy glass 公司

Netscape communication corporation

网景公司->netscape navigator->2003

④1996

微软公司收购 spy glass -> IE internet explorer 1.0 IE3 JScript

网景公司 Brendan eich 在 NETSCAPE NAVIGATOR 开发出了 livescript

JAVA 火起来，网景 livescript 不温不火，和 SUN 商量，合作推广和宣传产品，livescript->javascript

⑤2001

IE6 XP 诞生 JS 引擎

⑥2003

mozilla 公司 firefox->netscape navigator

⑦2008

google 基于 WEBKIT BLINK GEARS

chrome->V8->JS 引擎 直接翻译机器码 独立于浏览器运行

PROGRESSIVE WEB APP 渐进式 WEB APP

⑧2009

甲骨文 oracle 收购了 SUN 公司

JS 的所有权给甲骨文

二，ECMA

EMAC：European Computer Manufactures Association

欧洲计算机制造联合会

评估、开发、认可电信、计算机标准

ECMA-262 脚本语言的规范 ECMAScript ES5 ES6

三，编程语言

编程语言 翻译过程 速度 跨平台
编译型 源码->编译器->机器语言->可执行文件 快 跨平台性不够好
解释型 源码->解释器->解释一行就执行一行 慢 不需要根据不同的系统平台进行移植

Java .java->javac->.class->JVM 解释执行

C++ .cpp 源码->编译器->.s 汇编->汇编器->.obj 目标代码->链接器->可执行文件

脚本语言->脚本引擎->解释器

脚本语言 前端 后端 都有

javascript 客户端脚本 php 服务器脚本

前端脚本：javascript jscript 微软 IE vbscript 微软

asp .net c#

四，JS 相关

JavaScript

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

DOM document object model W3C

BOM browser object model 没有规范

JS 引擎 ？单线程 多线程

单线程->模拟多线程

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

① 任务一 任务二

② 切分任务一 任务二

③ 随机排列这些任务片段，组成队列

④ 按照这个队列顺序将任务片段送进 JS 进程

⑤JS 线程执行一个又一个的任务片段

五，JS 引入

  • 可以在外部引入
1
<script type="text/javascript" src="./js/index.js"></script>
  • 也可以在内部写入
1
2
3
<script type="text/javascript">
  document.write("I'm inner js")
</script>
  • 如果两者同时使用的情况下会使用外部的
1
2
3
<script type="text/javascript" src="./js/index.js">
  document.write("I'm inner js")
</script>

  • 同时引入多个也可以

  • text/javascript 也可以不写，但是尽量写，如果要写就写对

我们可能会遇到，写在 html 中，作为模板 template，可以再拿出来

1
2
3
<script type="text/tpl" id="tpl">
  <div class="box">{{name}}</div>
</script>

六，变量

编程语言：变量，数据结构，函数，运算能力

变量：容器->存储数据 后续使用

var -> variable

1
2
3
var a //变量声明  申请空间
a = 3 //变量赋值  放入数据
var a = 3 //变量声明并赋值

两个部分组成：声明变量 变量赋值

1
2
var x = 1, //单一声明方式 一个var声明多个变量，注意是逗号
  y = 2

重复赋值

1
2
var a = 1
a = 2 //覆盖

企业开发，命名规范

① 不能以数字开头

② 能字母，_，$

③ 字母，_，$，数字

④ 关键字 保留字

⑤ 语义化 结构化 J_header j_header js_header J-header j-header js-header

⑥ 小驼峰 myEnglishName

优先级

运算>赋值

六，JS 的值

原始值->基本类型

Number String Boolean undefined null

1
2
3
4
5
6
var a = 1 //Number
var b = 3.14 //Number
var str = 'js' //String
var c = true //Boolean  true false非真既假，非假既真
var d = undefined //undefined 未被赋值
var e = null //空值 初始化组件 函数 销毁函数 占位

动态语言->脚本语言->解释型语言->弱类型语言

静态语言->编译型语言->强类型语言

引用值

object array function date RegExp

1
2
3
var arr = [1, 2, 3, 4]
arr.push(5) //[1,2,3,4,5]
arr = [1, 2] //[1,2]

存储区别

  • 原始值->存储在栈内存

image-20230112225839860

1
var a = 3 //原始值

image-20230112225959935

1
2
var a = 3
var b = a

image-20230112230059572

1
2
3
var a = 3
var b = a
a = 1

image-20230112230204038

  • 引用值->指针存在栈内存
1
var arr1 = [1, 2, 3, 4, 5] //原始类型

image-20230112231052432

1
2
var arr1 = [1, 2, 3, 4, 5]
var arr2 = arr1

image-20230112231139995

1
2
3
var arr1 = [1, 2, 3, 4, 5]
var arr2 = arr1
arr1 = [1, 2]

image-20230112231417645