JavaScript入门记录

我缝合了狂神和老杜的视频，一起看的

深入浅出JavaScript-老杜JavaScript基础教程全套完整版【JavaScript从入门到实战】_哔哩哔哩_bilibili

​​​​​​​​​​​​​​​​​​​​​​​​​​​【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili

JavaScript是一种弱类型的语言，代码无须经过编译，直接由浏览器解释运行

配置vscode的js环境方面。

首先是node.js的安装与配置

node.js安装及环境配置超详细教程【Windows系统安装包方式】 - 知乎

这篇文章写得很好很详细

​​​​​​VSCode 配置javascript环境，你知道吗？_我就是个渴望成长的小菜鸡的博客-优快云博客_vscode配置javascript

这边讲了vscode需要下载的插件、

还有就是vscode支持es6语法的问题，可以看这篇文章

vscode无法识别es6语言_weixin_46027346的博客-优快云博客_vscode不识别es6

js可以在html里面写

喜闻乐见的helloworld

    <script>
        alert("Hello world!");
    </script>

 

引过来的方式和css不同

千万不要瞎搞自闭合

注意不论是在HTML里写还是引进，一定要放在body下面

语法入门

注意，脚本语言是逐行解释的，不是先编译再运行的

1.变量

var a=1;弱类型语言，只有一个var

但是还是会严格区分大小写的

甚至还能不用var关键字定义，甚至这样还默认是个全局变量，特别恐怖

加个'use strict';这句话在要strict的代码之前就行。因为脚本语言逐行解释

在es6中，我们不用var，而是用let来定义局部变量 

但是有个东西叫eslink，严格检测js语法。这种注释这个地方不加空格也会报错

2.条件控制

3.调试

可以直接在浏览器的审查元素那边调试

 

直接在console里面写js代码就行 

爱怎么搞怎么搞

 在这边甚至有调试工具，比如堆栈信息什么的

可以打断点

 4.数据类型

数值、文本、图形、音频、视频……

数值类型只有一个number，不区分小数和整数

字符串

let str=`
                      大家好
我是
你爸爸
`

用这个键括起来多行字符串，那些换行空格都会保留，原封不动输出

java中sysout的模板字符串是这样的 

在js里面直接可以搞

还可以指定下标，做到java做不到的事 

但是当然还是改不了 

 方法：大小写转变、indexOf、substring

布尔类型 

浮点数也有精度问题

null 空，定义了但没有值

undefined 没定义 

有个绝对等于，必须类型一样，值一样

比如1=='1' ，但不===

 数组

数组长度是可变的

 当然可以缩短，也不会发生数组溢出的坑爹事件

可以多维数组

方法：indexOf（是绝对等于）、slice（截取数组一部分）、push、pop（以尾部为栈口的栈，返回长度，可以一次性弄进去多个参数）、unshift、shift（以头部为栈口的栈）、sort、reverse、copy、concat（拼接）、fill、find、join等等等，正常有的都有

中括号

下标越界会报错“undefined”

条件控制

循环

可以遍历数组、map、set 

 对象

使用大括号括起来，相当于若干个键值对

'use strict';
let obj={
    fieldName1:fieldValue1,
    fieldName2:fieldValue2,
    fieldName3:fieldValue3,
}

相当于一个匿名内部类，很随意的写法。更像json

每个属性之间使用,隔开

最后一个属性最好不加逗号，防止兼容性不好的浏览器报错

使用一个不存在的对象属性不会报错，只会undefined

甚至还可以动态删减属性

居然还可以直接delete了 

可以动态添加属性

直接这样就行。有点跟c++的map异曲同工了

 所以这样是达咩的，传"name"这样就行了

还可以索引对象键值

感受一下这两个的差别。in的话包含父类有没有。hasOwnProperty只考虑自身 

Map

'use strict';

let map=new Map();
map.set('Tom',80);
map.set('Tim',90);
map.set('Mary',70);
map.set('Met',100);
console.log(map.get('Tom'));
console.log(map);
map.forEach((val,key) => {
    console.log(`${val}  ${key}`);
});

Set

'use strict';

let set=new Set();
set.add(1);
set.add(2);
set.add(3);
set.add(4);
set.add(1);
set.delete(2);
console.log(set);
set.forEach(element => {
    console.log(element);
});

函数

方法是在对象里有的，函数在外面有

js的函数长这个样

非常简单的定义 

有两种定义方式

js本身没有类型，且参数个数随意，故完全不需要重载。

如果对js使用重载的话

如上两图，不管在哪调用，都只会执行第二个函数，第一个函数被完全覆盖 

感受一下函数也是变量的感觉

 关键字arguments是一个数组，可以获取所有传进来的参数，包含我们函数定义上的参数。

但有时候，我们想获取除了函数定义外的其他参数，这应该不大能用arguments[参数个数]来访问，毕竟这样引入了一个未经定义的const数字。

因而，es6就有了一个新特性rest，可以获取除了函数上面的参数的参数数组。

这样写

不过其实rest可以用任意标识符表示，关键还是那三个...

变量的作用域

作用域跟别的差不多。函数体内的变量出了函数体就被清除了。

并且有个函数的嵌套。里面的可以用外面的，外面的不能用里面的，跟其他语言也差不多 

说明左图y已经被定义了，就是没有赋值

说明js会提升var声明的变量的作用域，只要在一个块内进行定义，那它的作用域就是整个块而不是它之后块内的部分。但是注意，只是提前了定义，赋的值不会提前。

所以建议全部变量在块开头统一定义声明，不要虾搞

但是let定义的变量不会提升作用域

关于let、const、var   JavaScript 中的 Var，Let 和 Const 有什么区别

默认全局变量绑定在全局对象window里而且系统默认只有这一个全局变量。

具体工程中，为了防止两个js文件全局变量相互覆盖的情况，我们常会自己开拓一个新的全局变量域（创建一个var类型空对象），你自己的代码都放在里面

 比如说jquery就是这么干的

函数体内的变量出了函数体就被清除了。但是你如果想用那些变量咋办？这就有了js的新特性：闭包

方法

就是把函数当成一个字段，放进去

var obj={
    name:"aaa",
    ID:"123456",
    report:function(){
        console.log(this.name+"  "+this.ID);
    },

}
obj.report();

甚至这样也行

function reportMessage(){
    console.log(this.name+"  "+this.ID);
}

var obj={
    name:"aaa",
    ID:"123456",
    report:reportMessage,
}
obj.report();

这样的话就不能调原来那个了。。。原因：this指向使用它的对象。现在是window在使用它

但是在js中可以使用apply控制this的指向，并且使用一次apply相当于调用

Date类

直接打印date对象可以获取当前时间。

也可以用方法获取年year月month日date星期day（0~11）时hour分minute秒second等等等，

还有特殊的是时间戳

可以通过构造方法与标准时间转化

 JSON

JavaScript object notation

早期，所有文件传输习惯用XML文件。那个东西的语法比较复杂，能把你学shi

于是json文件这种语法简单的就诞生了

在js中，所有东西都是对象，都可以用json来表示

json可以联系前端与后端的数据交流

json文件的格式：

1.对象/map（键值对）用{}

2.数组用[]

3.所有键值对都用key:value,

json里面的value也可以是json

value的两种访问方式 

// var obj={
//     name:'cat',
//     ID:1234567,
//     date:"today",
// }

// var jsonFile=JSON.stringify(obj);
// console.log(obj)
// console.log(jsonFile)

var obj=JSON.parse('{"name":"cat","ID":1234567,"date":"today"}');
console.log(obj)

json文件与obj的相互转化

、

也可以用eval函数

 将json的数据读入到表格

 

json如此方便，因而，要进行数据传输，我们后端只需想怎么把数据加工变成json文件传输到前端就行，大大简化了

面向对象编程

js的面向对象有点区别，js里面的类是原型对象

js的继承得这样写

var vehicle={
    name:"vehicle",
    ID:"#12345",
    run:function(){
        console.log(this.name+" is running!");
    },
}

var car={
    name:"car",
}
car.__proto__ = vehicle;
car.run();

而且注意只能有一个爸爸。再弄一个爸爸会造成覆盖

而且父类一定得写在子类上面

js还可以用class继承

比如说

以前的es5

function相当于类的构造器，要添加方法得像下图这样

function Student(name){
    this.name=name;
}
Student.prototype.report = function(){
    console.log("I am student "+this.name);
}

new Student("Jack").report();

es6后支持以下语法了 

class Student{
    constructor(name){
        this.name=name;
    }
    report(){
        console.log("I am student "+this.name);
    }
}

let student = new Student("Jack");
student.report();

 

甚至还可以extends ，super

操作BOM对象

js的诞生就是为了能让它在浏览器中运行，可以通过BOM操纵浏览器

BS：浏览器服务端。B：浏览器

BOM：浏览器对象模型

1.window对象

代表浏览器窗口，可以获取浏览器当前的长宽、让浏览器弹窗等等

代表全局作用域，所有js脚本中的全局变量都是它的属性

开网页，第一个参数是网址，第二个参数是打开方式

 

关闭

 

确认框

 有返回值

 

感觉常与iframe联合使用 

 eval函数的作用：将字符串解释为一串js代码并执行

 

 

2.navigator对象

封装了浏览器的信息,比如浏览器版本、用户电脑信息等等等

大多数时候用不上，因为会被人为修改。不建议使用这些属性来判断和编写代码。有种安全性的感觉

3.screen

电脑屏幕大小

4.location

代表当前页面的URL信息，有时候用来实现重定向

重要属性：host（主机）、href（当前地址）、protocol（协议）

方法：reload（刷新网页）

可以用这个设置一个新地址

你如果在百度代码中写上这行，然后填上你的网页网址，所有访问百度的人都会跳转到你的网站

5.document

代表当前页面（文档）信息   HTML DOM文档树

 可以获取网页中的所有文档树结点

比如说

<body>
    <dl id="app">
        <dt>JAVA</dt>
        <dd>JAVASE</dd>
        <dd>JAVAEE</dd>
    </dl>
</body>

 可以有id选择器、标签选择器、类选择器

可以获取结点就可以动态地增删结点

document还可以获取网页的cookie

6.history

代表浏览器的历史记录

 这种后退前进网页

不建议使用 

操作DOM对象

DOM：文档对象模型

html其实就是一棵树，我们说白了就是在操作这棵树

html实际上就是DOM树形结构

有四个操作

1.更新  更新dom结点  可以动态地用js给标签结点添加某个属性

2.遍历（查找）  得到dom结点

3.删除  删除dom结点

4.添加  添加一个新的结点

要操作一个dom结点，就必须获得这个dom结点

三种获取方式

var h1=document.getElementsByTagName("h1");
var p1=document.getElementById("p1");
var p2=document.getElementsByClassName("p2");

！！！注意，byTag和byClass都是得到的Collection，要访问其中某一个得用下标，[0]这种 

获取孩子节点 

 下一个

这些是原生代码很烦，以后尽量使用JQuery

更新

属性使用字符串包裹，-转为驼峰命名

innerText不会被转移，innerHTML会解析文本标签

可以通过js代码操纵css效果

 可以用setAttribute来赋值，key,value  这样的参数，来更新或添加标签的属性。建议以后都用这样的写法。newP.id=....这种就别用了

 删除

删除节点的步骤：先获取父节点，再通过父节点删除自己

 

 

创建

我们如果获取了一个DOM节点，如果它是空的，我们可以用innerText或者innerHTML来增加元素。但是如果非空，用上面那两个就会覆盖，就不能这么搞了

把已有的节点作为子节点追加到另一个节点，一般用append追加

<body>
    <div id="js">JAVASCRIPT</div>
    <div id="father">
        <div id="JAVA">JAVA</div>
    </div>
</body>

 创建一个新标签实现插入

注意如果把append改成这一句

newP是显示不出来的，很奇怪 

常用事件

 注册事件的两种方式

方式1，直接在标签内事件句柄写上。

其中，事件函数被称为回调函数（callback函数）。自己写的代码，但是是其他程序调用，这种函数叫回调函数

 方式2，用纯js代码实现事件的注册

 相当于加一个属性。注意别加括号也别加引号

也可以使用匿名回调函数

以后事件注册的统一写法：在window.onload内统一注册

获取键值 

 

 void运算符

比如说

 void的用处是，执行小括号中的表达式，但不返回任何结果。不是“”，也不是undefined，就是纯纯啥也没有