后面需要学的大部分都是js基础上的一个个负载方法，提取出了许多门类

专业素养

一个人的厚重感可以和书比，让人信服

web发展史

1993 Mosaic------ 第一个普遍使用的显示图片的网页浏览器（马克·安德森，版权在大学手里）

但是伊利诺伊大学把Mosaic版权 — 卖给Spy Glass — 又被微软收购 — 后面变成了IE1.0（图形化界面抄的是乔布斯的）

Netscape Navigator 网景是该团队重做的浏览器火狐的前生（网景破产后开放了源码）

JavaScript 是在1996年Brendan Eich开发的

能够动态的改变逻辑、控制运用，改善用户体验。本来叫LiveScript，是和java合作开拓市场，所以才改名的

js引擎

2001— ie6首次从内核里剥离出了js引擎同时xp操作系统问世所以现在很多银行政府可能还在用

2008 Google开发出了Chrome的js引擎是V8引擎（C++写的），再次优化了（将js代码直接转化为二进制代码）

Firefox TraceMonkey对路径进行优化

JS特点

很灵活，后可天增删改查方法

1. 是一门解释性语言

语言的分类

编译性语言

通篇翻译后执行（C,C++）

优点
快游戏引擎操作系统

缺点
移植性不好不跨平台

解释性语言
翻译一行执行一行（ js php python…）

优点
跨平台

缺点
稍微慢

Java
.java --> javac（通过该指令） --> 编译 --> .class --> jvm --> 解释执行

实现了跨平台性

2. JS引擎是单线程的

异步同时执行 (eg: 异步加载css文件)

同步依次执行

JS执行队列：(轮转争抢时间片，随机排队，争抢队伍第几是概率问题)

js执行主线程<—task1,1ms<—task2,1ms<—task2,1ms<—task1,1ms

3. ECMA标准

微软推出了JScript(别人拿着JavaScript用，工程师拿着Jscript对照着查)

没有统一标准前：功能实现都一样，结果语法不一样

后面变成了ECMAScript 且统一了标准

JS

工具

chrome控制台调试代码很方便

JS三大部分

ECMAScript

es3.0（最基础的）

es5.0 (在3.0基础上增加了新方法有些浏览器不兼容)

es6.0（很强大的）

DOM

Document Object Model

DOM定义了表示和修改文档所需的方法，DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。

操作文档通过JS操作HTML

有很多类数组

BOM

操作浏览器通过JS操作浏览器五花八门的

引入方式

1. 页面内嵌

<script type="text/javascript"> document.write('hello'); </script>

type属性写不写都一样，特殊情况下，后期编程会用type存储数据：<script type="text/tpl"> </script> 使之运行不了，后期有方式把它取出来

2. 外部引入

开发基本使用外部引入，因为开发过程中：结构行为样式相分离

<script src=""> </script>

只能写在head里，不能写在内部，不然加载不出来

基本语法

变量（variable）

声明

声明和赋值
var a;
a = 100;
单一var模式（书写规则要换行，还可以各自赋值）
var b,
c,
d,
e;

如果要换变量，重新赋值即可覆盖原变量

动态语言特点：声明变量的关键字只有var。

js变量天生是浮点型

命名规则

开头：必须是英文字母 或_ 或 $

可以包含：英文字母 _ $ 数字

不可以用关键字，保留字当名字

可以通过命名来让同事知道使用规则：_private

关键字	关键字
break	while
else	default
new	if
var	throw
case	delete
finally	in
return	try
void	do
catch	instanceof
for	typeof
switch

保留字：

关键字	关键字	关键字	关键字
boolean	export	interface	static
byte	extends	long	super
char	final	native	synchronized
class	float	package	throws
const	goto	private	transient
debugger	implements	protected	volatile
double	import	public	abstract
enum	int	short

变量类型

由值决定类型，可以把同一个变量通过覆盖改变其类型

原始值

不能有属性和方法的

Number var a = 123.11;
Boolean var a = true; /false
String var a = "abc";
undefined var a; 默认就是，也可以自己定义
null var a = null; 代替一个变量的位置，以便于后续的应用

不可改变的特性：

var a = 100;
a = 200;
所谓的覆盖的改变值的过程是：栈中push一个新值200，把100的编号 a 放到200，把100存在的栈空间的编号回归到初始值

所以一般删除、格式化内存只是删除了变量名（有工具可以还原变量名、指针关系），真正删除方法是二次覆盖

引用值

array
- ```
var arr = [1,2,false,"abc"];
```
Object
function
date
RegExp
…

区别

原始值：stack栈

赋值的过程是拷贝前一个栈里的数据再赋值
var a = 10;
var b = a; // 是a的副本
a = 20;
document.write(b);  //10
引用值：大致是存在heap堆

在栈内存中存放【数据在堆内存中的地址】

赋值的过程是拷贝前一个栈里的数据（上述地址值）再赋值

==>arr 和 arr1都是指向同一个堆地址，所以堆里数据改变arr arr1都改变
var arr = [1];
var arr1 = arr;
arr.push(2);
document.write(arr1);   //1,2
理解案例：
var arr = [1,2];
var arr1 = arr;
arr = [1,3];       //在heap里开辟新的空间，指向了新的房间
document.write(arr1);   //1,2

数组

可以放任何数据

可读 a[0]
可写a[0] = 1;

可遍历，也可改变数字

for(var i = 0; i < arr.length; i ++) { console.log(arr[i]);
}

对象

和数组一样是个仓库，但是更加直观一点

里面存放的是键值对：属性值key : 属性名value,

最后一组键值对不用加,

var demo = {name : "K",age : 21
}
console.log(demo.name);
K.name = "V";
console.log(demo.name);

对象里面是可以有方法的（函数的）

eat : function() {}, 函数的另一种表示方式

分号

语句结束后面要加;

不用加的情况

`function text() {}`

`for() {}`

`if() {}`

格式规范

一般任何符号= + / -…的两侧都要加一个空格

在写字符串时最好写单引号，因为php里没有双引号

错误代码

js语法错误会引发后续代码终止，但不会影响其他js代码块: 不同的<script></script>

1. 低级错误（语法解析错误）

扫描过程中就可被检测出

在浏览器里使用Console调试（会有错误提示）

使用中文符号，还没到解释执行过程，程序就终止运行

2. 逻辑错误（标准错误，情有可原）

var a = 10;
document.write(a);      //执行
document.write(b);      //引用错误
document.write('20'); //不会执行

运算符

`+`

数学运算

字符串连接

var a = “a” + 1 + 1; //a11

var a = “a” + (1 + 2); //a3

`-`

`*`

`/`

var a = 0 / 0; //NaN not a number 是数字类型

var a = 1 / 0; //Infinity 如果是负一的话是-Infinity

通过Ajax传数据是用字符串包含数据 “Infinity”

`%`

取余

var a = 4 % 6; //4

`=`

优先级最弱

`()`

优先级最高

`++` `--`

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

++a; 先加一后执行
var a = 10;
document.write(a ++); //10
document.write(a);  //a是11

`+= -= /= *= %=`

var a = 10;
a += 10;  //a=20

var a = 10;
a += 10 + 1; //等于 a = a + 10 + 1

var a = 10;
a %= 2;        //0

var a = 3;
a %= 4;        //3

var a = 0;
a %= 2;        //0

`,`

先看前面的表达式，如果需要计算的话就先计算，然后计算后面的表达式（如果后面的表达式需要计算的话），都计算完了之后，把后面表达式的计算结果返回

比较运算符

> < == >= <= !=

输出结果是false和true

字符串之间的比较：ASCII码的比较 a97 A65
var a = "10" > "8";
document.write(a);  //false 逐位比较
== ：是否等于 var a = 1 == 2; //false

undefined == undefined

Infinity == Infinity

特例：NaN != NaN

逻辑运算符

&&

&&：先看前面的表达式转换为运算符是否为真

1. 若为真：看第二个表达式转换为布尔值的结果

如果只有两个表达式，只看到第二个表达式，可以返回该表达式的值了

2. 若为假：直接返回第一个表达式的值

所以抽象出来：全部是真的是真，有一个假的是假

实战运用：

2 > 1 && document.write('hello'); 是一个if语句的简写形式

执行一个语句，会用到var data =...;，要判断data是否为空

所以要写一个短路语句

data && 执行语句

单独的&运算是按位与，开发中不会用

var a = 1 && 2; //2

||

和上面一样，有一个真就为真，全假就是假（遇真就停）

实战运用：
div.onclick = function (e) {var event = e || window.event;
}
在IE浏览器里e没有数据，存在在window.event里，为了兼容所有浏览器↑

!

非

转换为Boolean值被认定为false的值

undefined null NaN "" 0 false 其他的都是true

条件语句

`if` `if else if`

现在if语句里包含函数语法不通过

if () {}
var score = parseInt(window.prompt('input'));
document.write(score);
if else if

条件和条件之间是互斥的
if (score > 90) {}else if () {}//else{document.write('error');}
if <-> && 转换

`for`

//        (1)     (2)   (3)
for (var i = 0; i < 10; i++) {//执行语句
}
执行（1）

判断（2），执行语句

执行（3）

重复步骤2 3（如果判断不成立，立刻终止；没东西就不执行,(1)和(3)写在外面也是一样的）

一些新思路：
var i = 100;
for(;i --;) {document.write(i + "");
}

`while` `do while`

while(条件)循环和for( ; 条件 ; )是一样的

do while 一般没什么用，可读性不好，

`switch case break continue`

如果没有break，case1 成立执行后，后面case也会执行
var n =5;
switch(n) {case 1:case 2:console.log('b');break;case 5:   //还可以写成 "monday" true:console.log('c');break;
}
continue 终止本次循环（下面语句不执行了），进行下次循环

注释

单行注释 //
多行注释 /**/

typeof 六种数据类型

两种写法：

typeof(num) 常用

typeof num

console.log(typeof(num));

未定义的值放在程序任何位置都会报错，除了放在typeof里返回undefined一种情况

console.log(typeof(typeof(a)));------->string (因为typeof(a)返回的是"undefined")

number

string

方法：

charAt(); 常用
- 拿出第几位的字母
var str = “hello”; str[0]---->可以拿到h
str.length 可以拿到长度

boolean

undefined

undefined返回undefined

object

typeof(null)是object（最早的null是代替空对象出现的，帮忙占位）
空对象返回的object
[]空的数字也是object
数组对象包装类

function

类型转换

显式类型转换

Number(mix)

var num = Number('-123'); 可以转换为数字

null–>0
undefined–>NaN
true—>1 (false—>0)
a 等string–>NaN

parseInt(string, radix)

把字符串类型的数字转换为整型

以后面的数为基底(radix) ,转换为十进制(将输入值是radix进制的数转化为10进制)

如果传入数字不符合基底，则是NaN

var demo = "10";
var num = parseInt(demo, 16);
console.log(typeof(num) + " : " + num); //number : 16
var demo = "a";
var num = parseInt(demo, 16);
console.log(typeof(num) + " : " + num); //number : 10

可以截断非数字位

var demo = "100px";
var num = parseInt(demo);
console.log(typeof(num) + " ： " + num);  //number : 100

true false—>NaN
很多以此类推都是NaN

parseFloat(string)

和parseInt相似，有截断功能(可以看到第一个点以后的数字位)

toString(radix)

想把demo变成字符串，就demo.toString();
- undefined不能用该方法，没有这个属性
- null也不能用
1. 以十进制为基底，转换为目标进制 (十进制转radix进制)
- ```
var demo = 10;
var num = demo.toString(8);
console.log(typeof(num) + " : " + num); //12
```

String(mix)

可以把任何东西都变成字符串（包括boolean值，undefined等）

Boolean()

undefined null NaN "" 0 false --> false
其他的都是true

隐式类型转换

内部都是调用显示的方法

isNaN()

会隐式调用Number()

function isNaN(num) {var ret = Number(num);ret += "";if(ret == "NaN") {return true;}else{return false;}
}

isNaN(NaN)–>true
isNaN(123)–>false
isNaN(“123”)–>false
isNaN(“abc”)—>true
isNaN(null)—>false

++/-- +/- (一元正负)

在计算之前会隐式调用Number()

var a = “abc”; a ++; —>a是NaN，是number类型的

+

隐式调用String()，当加号两侧有一个类型是字符串的时候，调用String，把两个合并为一个字符串

-*/%

隐式调用Number()，可以自动转换为数字

&& || !

隐式调用Boolean()

< > <= >=

隐式调用Number(), 数字优先其中有一个是string类型的数字可以自动转换为number 两个都是字符串就比较ASCII码

依次计算

false > true //false
2 > 1 > 3 //false
2 > 3 < 1 //true
10 > 100 > 0 //false
“a” > 1 //false 小于也是false
undefined > 0 //false
undefined < 0 //false 也不等于0, null也同理
- undefined == null //没有规则系统定义的

== !=

隐式调用Number(), Boolean()

1 == “1”
1 == true
NaN == NaN //false 唯一一个自己不等于自己的就是NaN
undefined == null
{} == {}---->false 是引用值一个对象代表一个房间/地址地址一样才相等

不发生类型转换

=== !==

绝对等于、绝对不等于（NaN绝对不等于自己）

函数

避免耦合，重复冗余代码规范：高内聚，若耦合

把语句放在一个筐里，想用的时候即可调用

把功能抽象出来

定义

函数是另外一种类型的变量，test() 就像个变量，里面存放的是函数体

函数的功能是抽象功能（抽象出一个单独的功能）

函数声明

命名规范：小驼峰原则

function theFirst() {}
document.write(theFirst);   //c语言等会输出指针地址，弱数据类型（解释性）语言永远输出不了地址，输出指向的房间

函数表达式

命名函数表达式

像定义变量

function abc() {} 是表达式，表达了之后就变成了匿名的，充当函数体了,test才是函数名，要执行test()

text.name="abc"

var test = function abc() {document.write('a');
}

匿名函数表达式-----是常用的 函数表达式

demo.name = "demo" 使用demo();调用

var demo = function () {document.write('b');
}

组成形式

function - 函数名 - 参数

test(a)----> 函数体内 {var a}

function sum(a, b) {var c = a + b; //形参document.write(c);
}
sum(1, 2);  //实参

函数名称

参数

形参实参不用一一对应，任何一方多了都不会报错

在每个函数里，系统会自带一个实参列表：arguments-[存放所有的实参]

还可以调用属性console.log(arguments.length);

function sum(a, b){//arguments [1, 2]//var a = 1;a = 2;        //console.log(arguments[0]);--->2arguments[0] = 3;console.log(a);   //3
}
sum(1, 2);

JS笔记（一） ECMAScript部分相关推荐

js笔记（一）js基础、程序结构、函数
大标题小节一.js 基础 1. javascript的组成: 2. 运行js: 3. 打印信息: 4. 关键字var: 5. js中的数据类型: 6. NaN(not a number): 7. ...
Vue.js笔记(一)
Vue.js笔记(一) 读书笔记 Vue.js介绍内容概要 1.1 站在巨人的肩膀上 1.1.1 MVC模式 1.1.2 MVVM模式 2.1.3 异步执行脚本 2.1.4 动态加载脚本 2.2 行 ...
Node.js笔记：SerialPort（串口）模块使用（基于9.x.x）
文章目录目的模块安装基础使用扫描端口打开端口发送数据接收数据错误处理数据解析器 SerialPort类构造方法属性事件方法命令行工具总结目的上位机与各种电路模块间常常 ...
jsの再体验 - - ECMAScript（js基础语法）
jsの进阶之路一.初识js 1.1.js脚本语言 1.2.浏览器执行js的过程 1.3.js的组成 1.4.js的三种写法 1.5.js的注释 1.6.js的输出语句 1.7.js的变量 1.8.j ...
node.js笔记第一天
nodejs笔记 web服务器和服务端js的区别 1.js都是运行在浏览器的 ECMAScript:js语法 bom:浏览器对象模型,用js去操作浏览器窗口 Dom:文档对象模型,用js去操作dom树 ...
前端三板斧: HTML+CSS+JS笔记摘自b站狂神说
参考b站狂神说的前端视频,做的笔记视频地址:https://www.bilibili.com/video/BV1x4411V75C HTML 5 什么是HTML? hyper text markup ...
JavaScript基础语法笔记，ECMAScript基础，每部分都有经典案例以及解析。会持续更新（2022.0310）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.JavaScript导读 1.1 什么是JavaScript(这里借鉴Js红宝书的内容,看一看就可以了) 1.2 ...
js笔记（二）数组、对象、this
大标题小节一.数组 1. 数组的创建.赋值.分类: 2. 数组的简单操作(根据索引增.查.改): 3. 声明式和构造函数创建的数组的区别: 4.数组的方法:push().unshift().spl ...
【笔记整理】node.js笔记
第一天: - Node.js 是什么 + JavaScript 运行时 + 既不是语言,也不是框架,它是一个平台 - Node.js 中的 JavaScript + 没有 BOM.DOM ...

JS笔记（一） ECMAScript部分