1.1 发展史
五大主流浏览器 内核
IE | trident |
chrome | webkit blink |
safari | webkit |
firefox | gecko |
opera | presto |
浏览器的历史 和 JS诞生
1990 |
真正意义上的浏览器 :允许别人浏览他人编写的网站 |
1993 |
MOSAIC: 真正意义上的图形化浏览器 |
1994 |
|
1996 |
|
2001 |
|
2003 |
|
2008 |
V8 引擎的优点:
Node.js 也是一个基于 Chrome V8 引擎能够独立运行的 JavaScript 环境 |
2009 |
|
1.2 ECMA
全称:European Computer Manufactures Association 欧洲计算机制造联合会
功能:评估、开发、认可 电信/计算机 标准
ECMA - 262 脚本语言的规范 ECMAScript
为了让最初的JavaScript与最初的JScript能遵循同一套标准发展而诞生的ECMAScript,正好排到了作为Ecma的262号标准而已,所以得到ECMA-262编号
规范化脚本语言
1.3 编程语言
分类
类型 | 过程 | 优缺点 |
编译型 | 源码 =>编译器=>机器语言=>可执行文件 | 跨平台性不好,更适合复杂的、逻辑性较强的程序,这样运算速度会更快一些,更有优势 |
解释型 | 解释器=>解释一行就执行一行 | 不需要根据不同的系统平台进行移植,只要系统里有相应的解释器就一定能够执行 |
脚本语言
脚本语言通过 脚本引擎 的 解释器 才能正常运行(前端后端 都有脚本语言 )
javascript: 客户端脚本 | 解释器在浏览器JS引擎上,检查页面能看到 |
php: 服务器端脚本 | 解释器在服务端上,检查页面看不到 |
1.4 JavaScript
单线程
JS的引擎是单线程,为什么可以多个程序一起运行?
答:单线程可以通过轮转时间片进行模拟多线程
模拟过程:
1. 任务1 任务2
2. 切分任务1 任务2
3. 随机排列这些任务片段,组成队列
4. 按照这个队列顺序将任务片段送进JS进程
5. JS 线程执行一个又一个的任务片段
JavaScript引入
引入外部文件
<script type="text/javascript" src="js/index.js"></script>
2.引用内部
<script type="text/javascript">document.write("inner")</script>
type="text/javascript"写错则不执行,但有时会故意写错,将其作为模板,如:
<!-- 这里作为模板,不会执行 -->
<script type="text/tpl" id="name">
<div>{{name}}</div>
</script>
<script type="text/javascript">
<!-- 在这里对模板中的数据进行处理 -->
var nameDiv = document.querySelector('#name').innerHTML;
</script>
JavaScript 和 HTML CSS 区别
HTML CSS 不具备逻辑,没有 变量、数据结构、函数、运算能力,是标记语言
编程语言具有 变量、数据结构、函数、运算能力,JavaScript是一门编程语言
JavaScript变量
组成
声明变量
变量赋值
var a; // 变量声明:向系统申请一个存储空间,这个存储空间命名为 a
a = 3; // 变量赋值:为变量分配一个存储空间
var a = 3; // 变量声明并赋值
单一声明方式
var x = 1,
y = 2;
命名规范
不能数字开头,可以字母、_、$
数字、字母、_、$
不能关键字、保留字
语义化、结构化,要有意义
小驼峰命名法
不要用拼音和拼音缩写
运算 > 赋值 优先级
var x = 3,
y = 2;
var z = x + y;
document.write(z)
JS的值
动态语言 =>脚本语言=>解释型语言=>弱类型语言 eg:JavaScript
静态语言=>编译型语言=>强类型语言 eg:C
原始值(基本类型) | Number、String、Boolean、undefined、null |
引用值 | Object、array、function、data、RegExp |
//Number
var a = 1;
var a = 3.14;
//JS中整型浮点型都是Number
//String
var str = 'chang';
//JS中单引号、双引号都是字符串
//Boolean
var a = true;
document.write(a);
//计算机中非真即假,非假即真
//undefinded
var a;
docunment.write(a);//undefinded
//null 空值、初始化组件、函数 、销毁函数、占位
//array
var arr = [1, 2, 3, 4];
arr.push(5);
document.write(arr);//1,2,3,4,5
栈和堆
var a = 3;
var b = a;
a = 1;
document.write(b)
过程
![](https://i-blog.csdnimg.cn/blog_migrate/15c93011e7790dc78ca36a6f2e4e2043.png)
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
![](https://i-blog.csdnimg.cn/blog_migrate/75f2178ac09e1d5d5321a4347da50fb1.png)
var arr1 = [1,2,3,4,5];
var arr2 = arr1;
arr1 = [1,2];
document.write(arr1+'|'+arr2);//1,2|1,2,3,4,5
![](https://i-blog.csdnimg.cn/blog_migrate/2fce17e9dcb33c5f030eef3629e7bcf6.png)