1-发展史、ECMA、编程语言、变量、JS值

(一)前置知识
(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)编程语言:

编译型 解释型 都是需要翻译的,只是翻译的时间不一样

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

解释型:源码->解释器->解释一行就执行一行

解释型语言->不需要根据不同的系统平台进行移植
1-发展史、ECMA、编程语言、变量、JS值_第1张图片

脚本语言一定有脚本引擎。脚本语言-通过脚本引擎的解释器执行

前端 后端都有脚本语言,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!
'
?> <script> document.write('Hello world'); </script> </body> </htm

1-发展史、ECMA、编程语言、变量、JS值_第2张图片

前端脚本语言不是只有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文件

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>Documenttitle>
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);

1-发展史、ECMA、编程语言、变量、JS值_第3张图片

引用值

值存在堆内存 值的地址存在栈内存

arr1和arr2指向同一个堆内存的地址,修改arr1的值arr2也会跟着改

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

1-发展史、ECMA、编程语言、变量、JS值_第4张图片

重新给arr1赋值,不会影响arr2

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

arr1 = [1, 2];
document.write(arr2); 

1-发展史、ECMA、编程语言、变量、JS值_第5张图片

你可能感兴趣的:(ECMAScript,javascript,开发语言,ecmascript)