ECMAScript渡一教育JavaScript精英课堂笔记姬成

阅读量：

ECMAScript

一、js浏览器历史

1.web发展史

Mosaic，是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器。于1993年问世
1994年4月，马克.安德森和Silicon Graphics（简称为SGI，中译为“视算科技”或“硅图”）公司的创始人吉姆·克拉克（Jim Clark）在美国加州设立了“Mosaic Communication Corporation”。
Mosaic公司成立后，由于伊利诺伊大学拥有Mosaic的商标权，且伊利诺伊大学已将技术转让给Spy Glass公司，开发团队必须彻底重新撰写浏览器程式码，且浏览器名称更改为Netscape Navigator，公司名字于1994年11月改名为“Netscape Communication Corporation”，此后沿用至今，中译为“网景”。
微软的Internet Explorer及Mozilla Firefox等，其早期版本皆以Mosaic为基础而开发。微软随后买下Spy Glass公司的技术开发出Internet Explorer浏览器，而Mozilla Firefox则是网景通讯家开放源代码后所衍生出的版本。

2.js历史

JavaScript作为Netscape Navigator浏览器的一部分首次出现在1996年。它最初的设计目标是改善网页的用户体验。
作者：Brendan Eich
期初JavaScript被命名为，LiveScript，后因和Sun公司合作，因市场宣传需要改名JavaScript。后来Sun公司被Oracle收购，JavaScript版权归Oracle所有。

3.浏览器组成

1.shell部分
2.内核部分
1.渲染引擎（语法规则和渲染）
2.js引擎
2001年发布ie6，首次实现对js引擎的优化。
2008年Google发布最新浏览器Chrome，它是采用优化后的javascript引擎，引擎代号V8，因能把js代码直接转化为机械码来执行，进而以速度快而闻名。
后Firefox也推出了具备强大功能的js引擎
Firefox3.5 TraceMonkey（对频繁执行的代码做了路径优化）
Firefox4.0 JeagerMonkey
3.其他模块

4.js的逼格

1.解释性语言 — (不需要像编译性语言一样编译成文件）跨平台

优缺点

编译：快——开发游戏引擎，操作系统；不能跨平台，移植性不好

解释性：稍慢；跨平台

2.单线程

异步下载

ECMA标注 — 为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格JavaScript兼容于ECMA标准，因此也称为ECMAScript。

5.js执行队列

类似吃饭

js三大部分
ECMAScript、DOM、BOM
如何引入js?
页面内嵌 script标签
外部引入
为符合web标准（w3c标准中的一项）结构、样式、行为相分离，通常会采用外部引入
同时外部引入，页面内嵌
外部好使，内部失效

二、js基本语法

1.变量

变量声明
声明、赋值分解
单一var声明法

命名规则

1.变量名必须以英文字母、_ 、 $开头 2.变量名可以包括英文字母、_、$ 、数字
3.不可以用系统的关键字、保留字作为变量名(关键字，保留字)

开发规范：

复制代码

    <script>
    var a = 10,
        b = 20,
        d;
    document.write(a,b,c,d);
    </script>
    
    
      
      
      
      
      
      
    
    AI写代码

2.值类型

原始值（不可改变的;栈数据）

类型	说明
Number	var a = 123.12
String	var b = “abc”
Boolean	var b = false; var a = ture; 输出结果就是本身
Undefined	var b = undefined; 输出结果就是本身：没有定义的
Null	var b = null; 空值占位

两个数据类型的区别：

原始值：stack（栈）先进去的最后出来

复制代码

    var a = 10;
    var b = a;
    a = 20;
    document.write(b);
    
    
      
      
      
      
    
    AI写代码

栈内存与栈内存之间是拷贝

引用值（堆数据）

array, object, function

Date,RegExp

以上栈内存、堆内存底层原理见视频

JS是动态语言，解释一行，执行一行

三、js基本语句

语句后面要用分号结束“；”

不加分号

function test(){}
for(){}
if(){}

js不同文件变量可以互相访问

复制代码

    <script>
    var a = 10;
    </script>
    <script>
    document.write(a);
    </script>
    
    
      
      
      
      
      
      
    
    AI写代码

js语法错误会引发后续代码终止，但不会影响其它js代码块

复制代码

    <script>
    var a = 10;
    document.write(c);
    //20
    </script>
    <script>
    var b = 20;
    document.write(b);
    </script>
    
    
      
      
      
      
      
      
      
      
      
    
    AI写代码

几种错误

低级错误（语法解析错误）一行也不执行

逻辑错误

先扫描全局，没有低级错误后，解释一行，执行一行

书写格式要规范，“= + / -”两边都应该有空格

1.js运算符

运算操作符

“+”

1.数学运算、字符串链接

2.任何数据类型加字符串都等于字符串

复制代码

    var a = "a" + 1;
    document .write(a); a1
    
    var a = "a" + 1 + 1;
    document .write(a); //自左向右：a11
    
    var a = "a" + ture + 1;
    document .write(a); ature1
    
    var a = 0 / 0;
    NAN——not a number
    
    var a = 1/ 0;
    Infinity
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

“-”，“*”，“/“，“%”，”=“，“()”

优先级”=“最弱，”()”优先级较高

“++”，“- -”，”+=“，“-=”，“/=“，“*=”，“%=”

a ++;先执行语句，后++

复制代码

    var a = 10;
    document .write(a ++);
    //先document .write (a)后++  因为先打印，所以出来10
    
    var a = 10;
    document .write(a ++);
    document .write(a);
    //则10 11
    
    var a = 10;
    var b = ++a - 1 + a++;
    document .write(b + "" + a);  
    //11（a变成了11）-1+11        b:21   a:12（a最后的++）
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

比较运算符

“>”，”<”，”==”，“>=”，“<=”，”!=”
比较结果为boolean值

逻辑运算符

“&&”，“||”，“!“
运算结果为真实的值

2.false

undefined， null， NaN， “”(空串)， 0， false

3.条件语句

布尔值

1.什么都能比较大小（字符串比较ASCII顺序）

2.只要左右一样，则一样

特例：

复制代码

    var a =NAN == NAN;
    document .write(a);
    //false
    
    
      
      
      
    
    AI写代码

3.逻辑运算符：&& || !

&&:

复制代码

    var a = 1 && 2;
    document .write(a);      2
    
    
      
      
    
    AI写代码

两个表达式：

先看前面表达式转换成布尔值是否为真，（false: undefined， null， NaN， “”， 0， false
），真则看第二个表达式转换成布尔值的结果，如果只有两个表达式，只要看到第二个表达式，就可以返回第二个表达式的值了

复制代码

    var a = 1 && 2; //1为真，故返回2var a = 0 && 2;//直接把第一个表达式的原本的值返回， 故返回0
    
    
      
    
    AI写代码

多个表达式：

先看第一个表达式，如果真，看第二个，也真，看第三个，一旦假的，就返回假的

&&：如果前面是零，就不看了；真，就下一句。

开发应用（短路语句）

复制代码

    2>1&&document .write("成哥很帅")var data = …;data && 执行一个语句，会用到data, 如果data空值，就不能执行下面
    
    
      
    
    AI写代码

开发没卵用（有卵用）var num = 1 & 3;即01 & 11 即01

第一个是不是真，真，就返回真的原始值，假的话，返回第二个

4.写兼容应用

复制代码

    div. onclick = function(e){// 把e的值取出来	非ie浏览器	var event = e;}div. onclick = function(e){// 把e的值取出来	ie浏览器	var event = e;	window. event;}兼容：div. onclick = function(e){// 把e的值取出来		var event = e || window. event;}
    
    
      
    
    AI写代码

5.if、if else if

demo

复制代码

    var score = parseInt(window .prompt('input'));if(score > 90 && score <= 100){    document .write('alibaba');}if(score > 80 && score <= 90){    document .write('tencent');}
    
    
      
    
    AI写代码

优化

复制代码

    var score = parseInt(window .prompt('input'));if(score > 90 && score <= 100){    document .write('alibaba');}else if(score > 80 && score <= 90){    document .write('tencent');}else{}
    
    
      
    
    AI写代码

等价关系

复制代码

    if(1 > 2){    document .write('a');}与1 > 2 && document .write('a');
    
    
      
    
    AI写代码

6.for

复制代码

    for(var i = 0; i < 10; i++) {    document .write('a');}
    
    
      
    
    AI写代码

优化

复制代码

    var i = 1;var count = 0;for(; i; ){    document.write('a');    count ++;    if(count == 10) {        i = 0;    }}
    
    
      
    
    AI写代码

思维拓展

复制代码

    var i = 100;for(; i --; ){    document.write(i + " ");}
    
    
      
    
    AI写代码

7.while, do while

带7和7的倍数：

复制代码

    var i = 0;while(i < 100){    if(i % 7 == 0 || i % 10 ==7){        document.write(i + " ");    }    i++;}
    
    
      
    
    AI写代码

8.switch case

复制代码

    var n = 3;switch(n) {    case 1:        console.log('a');    case 2:        console.log('b');    case 3:        console.log('c');}
    
    
      
    
    AI写代码

复制代码

    var n = 3;switch(n){    case "a":        console.log('a');    case "b":        console.log('b');    case ture:        console.log('c');}
    
    
      
    
    AI写代码

DEMO

复制代码

    var data = window.prompt('input');switch(data){    case "monday":        console.log('working');        break;    case "tuesday":        console.log('working');        break;    case "wednesday":        console.log('working');        break;    case "thursday":        console.log('working');        break;    case "firday":        console.log('working');        break;    case "saturday":        console.log('relaxing');        break;    case "sunday":        console.log('relaxing');        break;}
    
    
      
    
    AI写代码

优化

复制代码

    var data = window.prompt('input');switch(data){    case "monday":    case "tuesday":    case "wednesday":    case "thursday":    case "firday":        console.log('working');        break;    case "saturday":        console.log('relaxing');        break;    case "sunday":        console.log('relaxing');        break;}
    
    
      
    
    AI写代码

9.break

复制代码

    var i = 0;while(1){    i++;    console.log(i);    if(i > 100){        break;    }}
    
    
      
    
    AI写代码

10.continue

中止本次循环，进行下一循环

复制代码

    for(var i = 0; i < 100; i++){    if(i % 7 == 0 || i % 10 == 7){    }else{        console.log(i);    }}
    
    
      
    
    AI写代码

复制代码

    for(var i = 0; i < 100; i ++){    if(i % 7 == 0 || i % 10 == 7){        continue;    }    console.log(i);}
    
    
      
    
    AI写代码

四、初识引用值

1.数组

复制代码

    var arr = [1,2,3,4,"abc",undefined];
    
    
      
    
    AI写代码

array后来赋值即更改

demo取出每一位

复制代码

    var arr = [1,2,3,45,5,7,"acv",undefined];for(var i = 0; i < arr.length; i++) {    console.log(arr[i]);}
    
    
      
    
    AI写代码

2.对象object

demo

复制代码

    var deng = {    lastName : "Deng",    age : 40,    sex : undefined,    Wife : "xaioliu",    father : "dengge",    son : "dengxiaobao",    handsome : false}console.log(deng.lastName);deng.lastName = "123";console.log(deng.lastName);
    
    
      
    
    AI写代码

3.编程形式的区别

1.面向过程

2.面向对象

六、typeof

六种数据类型： number、string、boolean、undefined、object、function

false undefined， null， NaN， “”， 0， false

类型转换

demo

复制代码

    var num = 1 * "1";console.log(typeof(num) + ":" + num);//s数字类型的1var num = "2" * "1";console.log(typeof(num) + ":" + num);//数字类型2
    
    
      
    
    AI写代码

具体玩法

typeof：typeof(num)或者typeof num

复制代码

    var num = 123;console.log(typeof(num));// numbervar num = "true";//字符串trueconsole.log(typeof(num));// string
    
    
      
    
    AI写代码

谁返回object

引用值：对象、数组、null(历史遗留问题)

七、类型转换

1.显示类型转换

Number(mix)

复制代码

    var num = Number('123');console.log(typeof(num) + " : " + num);// number:123//Null:0//Underfined: NAN//“a”: NAN//False:0//“123”:123	
    
    
      
    
    AI写代码

parseInt(string,radix)

基础用法

复制代码

    “123.9”:123ture:NANNull:NANUnderfined: NAN123.9:123123abc:123
    
    
      
    
    AI写代码

基底

复制代码

    var dmeo = "10";var num = parseInt(demo, 16);//转成16进制console.log(typeof(num) + ":" + num);var demo = "10";var num = parseInt(demo, 16);console.log(typeof(num) + ":" + num);
    
    
      
    
    AI写代码

radix∈（2-36）

parseFloat(string)

转换成浮点型（正常数字）参数只能是字符串

100.2:100.2
100.2.2:100.2

100.2abs:100.2

toString(radix)

转换成字符串

复制代码

    var demo = 123;var num = demo.toString();console.log(typeof(num) + ":" + num);//string:123
    
    
      
    
    AI写代码

Radix：进制，demo里面转换成进制

复制代码

    var demo = 123;var num = demo.toString();console.log(typeof(num) + ":" + num);//string : 123
    
    
      
    
    AI写代码

特殊点：
underfined 和null不能用

String(mix)

同number string 是转换成字符串

复制代码

    underfined: underfined//123:123//ture:ture
    
    
      
    
    AI写代码

Boolean()

除了这些，都是ture : undefined， null， NaN， “”， 0， false

题目:10101010转换成16进制

复制代码

    // parseInt       toString// 2        10      16var num = 10101010;var test = parseInt(num, 2);console.log(test.toString(16));
    
    
      
    
    AI写代码

2.隐式类型转换

isNaN () ——调用number

复制代码

    //console.log(isNAN(NAN));   ture//123 false//“123” false//null false//underfined ture//“abc” ture// console.log(isNAN("abc"));// Number('abc')---->NAN  流程
    
    
      
    
    AI写代码

++/— +/-（一元正负）——调用number

复制代码

    // var a = "123";// a++;//字符串计算也是124// var a = "abc";// a ++;// // NAN 但是typeof是number
    
    
      
    
    AI写代码

两侧有一侧是字符串，就调用string 变成字符串

复制代码

    // var a = "a" + 1;// console.log(a + " : " + typeof(a));
    
    
      
    
    AI写代码

*/% ——调用number

&& || ！

< > <= >=

复制代码

    // var a = "3" > 2;// console.log(a + " : " + typeof(a));// // 转换成数字比较// var a = "3" > "2";// console.log(a + " : " + typeof(a));// // 比较ASCII// var a = 1 == "1";// console.log(a + " : " + typeof(a));//隐式类型转 相等// // undefined == null:true,其他都是false// undefined>0// false// undefined<0// false// undefined==0// false// null同理// NAN == NAN : false;
    
    
      
    
    AI写代码

== !=

3.不发生类型转换

=== !==

没定义直接使用会报错，除了console.log(typeof(a))

复制代码

    alert(typeof(a));alert(typeof(undefined));alert(typeof(NAN));alert(typeof(null));var a = "123abc";alert(typeof(+a));alert(typeof(!!a));alert(typeof(a+""));alert(1 == "1");alert(NAN == NAN);alert(typeof(NAN == undefined));alert("11"+11);alert(1==="1");alert(parentInt("13abx"));var num = 123123.22324;alert(num.toFixed(3));alert(typeof(typeof(a)));
    
    
      
    
    AI写代码

八、函数

函数组成形式

函数名称
参数
形参
实参
返回值

1.定义

方法1：函数声明

复制代码

    function test(){}
    
    
      
    
    AI写代码

方法2：函数表达式

函数定义方式

1.命名函数表达式

复制代码

    var test = function abc(){    document.write('a');}
    
    
      
    
    AI写代码

2.匿名函数表达式（常用）——函数表达式

复制代码

    var demo = function (){    document.write('b');}
    
    
      
    
    AI写代码

3.现象：

abc不是函数了，test才是。等号右边是表达式，表达式忽略abc名字

复制代码

    test.name//abcdemo.name//demotest.name//test
    
    
      
    
    AI写代码

2.函数参数

复制代码

    function text(a,b){    // 相当于隐式var a,b;    document.write(a+b);}text(1,2);
    
    
      
    
    AI写代码

形式参数—形参

复制代码

    function sum(a,b){    var c = a + b;    document.write(c);}
    
    
      
    
    AI写代码

实际参数—实参

复制代码

    sum(1,2);
    
    
      
    
    AI写代码

形参实参不一定相等数量，谁都谁少都行，传参传什么类型都行，也不一定一样

复制代码

    function sum(a){    document.write(a);}sum(11,2,3)
    
    
      
    
    AI写代码

不管调用没调用，都有

复制代码

    function sum(a,b,c,d){    document.write(a);    document.write(d);//undefined}function sum(a){    //arguments--[11,2,3];实参列表    console.log(arguments);    console.log(arguments.length);}
    
    
      
    
    AI写代码

小应用

复制代码

    function sum(a){    for(var i = 0; i < arguments.length; i++){        console.log(arguments[i])    }}sum(11,2,3);
    
    
      
    
    AI写代码

求形参

复制代码

    function sum(a,b,c,d){                console.log(sum.length);//形参长度           }sum(11,2,3);
    
    
      
    
    AI写代码

映射规则（形参=实参才映射）：但是是两个东西

复制代码

    function sum(a,b){    a = 2;    console.log(arguments[0]);}sum(1,2);//2    a变，arguments也变function sum(a,b){    a = 2;    arguments[0] = 3;    console.log(a);}sum(1,2);//3    a 也变
    
    
      
    
    AI写代码

参数不相等，不映射

复制代码

    function sum(a,b){    // argument[1]就没值了    b = 2;    console.log(arguments[1]);    // 返回undefined}sum(1);
    
    
      
    
    AI写代码

3.return

1.函数终止

复制代码

    function sum(a,b){    console.log('a');    return;    //在这里终止    console.log('b');}sum(1);
    
    
      
    
    AI写代码

2.返回值

复制代码

    function sum(){    return 123;    console.log('a');//本句不好使，因为也终止函数}sum(1);var num = sum();
    
    
      
    
    AI写代码

复制代码

    function myNumber(target){    return +target;}var num = myNumber('123');console.log(typeof(num) + " " + num);
    
    
      
    
    AI写代码

全部评论 (0)

还没有任何评论哟~

ECMAScript渡一教育JavaScript精英课堂笔记姬成

ECMAScript 一、js浏览器历史 1.web发展史 Mosaic，是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器。于1993年问世 1994年4月，马克.安德森和SiliconGra...

《Web前端开发之HTML+CSS精英课堂【渡一教育】》文档版笔记（完结）

这个笔记本来是想先上文档版的，但由于里面有些标签会导致显示不出来，所以之前只上了个思维导图版的。时隔好久，想发篇markdown版的博文时，一进来就看见这篇文档版的草稿，顺便学下markdown的写...

黑马JavaScript笔记（一）ECMAScript

第一天 01初识JavaScript 1、简述JavaScript 1.5 DOM文档对象模型：标准编程接口 BOM浏览器对象模型建一个my.js,在文件内编写alert‘滴滴滴’;使用单引号 2、...

vue笔记+渡一教育第一章整理

Vue组件切换 <!DOCTYPEhtml <htmllang=en <head <metacharset=UTF8 <metaname=viewportcontent=width=devicewid...

JavaScript的入门课堂笔记

一、JavaScript简介 1.什么是JavaScript JavaScript简称JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接运行。 Web前端三层：结构层HTML，定义页面的结构...

PS精讲课堂笔记2

第二章绘画，修饰，选择工具和选区初步 2.1画笔工具组和绘画绘画前工具的处理课堂重点： 1.绘画时使用的快捷键； ①调整笔刷大小快捷键关闭中文输入法 ②调整笔刷硬度快捷键（左右花括号键） ③调整第...

带你十分钟了解BFC(渡一教育笔记)

文章目录 BFC简介创建BFC BFC特性结语 BFC简介它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局创建BFC BFC渲染区域:这个区域由某个HTML元素创建,以下元素会在其...

全宇宙最深入的CSS3 姬成渡一学习记录

欢迎关注掘金https://juejin.cn/user/2551305355400797 全宇宙最深入的CSS3 一、introduction 兼容性前缀 prefix（前缀）browser web...

JavaScript 系列笔记——ECMAscript（壹）

JavaScript系列笔记： JavaScript系列笔记——目录点击上方链接可查看更多笔记 ECMAscript目录变量 1\.变量的概述 2\.变量的使用 3\.变量语法扩展 4\.变量命名...

第一次课堂笔记

@第一次课堂笔记 C++语言程序设计——类与对象一、抽象：是对具体对象（问题）进行概括，抽出这一类对象的公共性质并加以描述的过程。抽象例子：钟表数据抽象： intHour,intMinute,i...

是否确定退出登录?

ECMAScript渡一教育JavaScript精英课堂笔记 姬成

ECMAScript

一、js浏览器历史

1.web发展史

2.js历史

3.浏览器组成

4.js的逼格

5.js执行队列

二、js基本语法

1.变量

2.值类型

三、js基本语句

1.js运算符

2.false

3.条件语句

4.写兼容应用

5.if、if else if

6.for

7.while, do while

8.switch case

9.break

10.continue

四、初识引用值

1.数组

2.对象object

3.编程形式的区别

六、typeof

七、类型转换

1.显示类型转换

2.隐式类型转换

3.不发生类型转换

八、函数

1.定义

2.函数参数

3.return

全部评论 (0)

相关文章推荐

ECMAScript渡一教育JavaScript精英课堂笔记 姬成

《Web前端开发之HTML+CSS精英课堂【渡一教育】》文档版笔记（完结）

黑马JavaScript笔记（一）ECMAScript

vue笔记+渡一教育第一章整理

JavaScript的入门课堂笔记

PS精讲课堂笔记2

带你十分钟了解BFC(渡一教育笔记)

全宇宙最深入的CSS3 姬成 渡一学习记录

JavaScript 系列笔记——ECMAscript（壹）

第一次课堂笔记

ECMAScript渡一教育JavaScript精英课堂笔记姬成

ECMAScript渡一教育JavaScript精英课堂笔记姬成

全宇宙最深入的CSS3 姬成渡一学习记录