学习狂神JavaScript所记录的笔记

Javascript笔记

一、前端核心分析

1.1、概述

Soc原则：关注点分离原则

Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

HTML + CSS + JS : 视图： 给用户看，刷新后台给的数据

网络通信： axios

页面跳转： vue-router

状态管理：vuex

Vue-UI : ICE , Element UI

2.1前端三要素：

HTML（结构）：超文本标记语言，决定网页的结构和内容
CSS（表现）：层叠样式表，设定网页的表现样式
JavaScript（行为）：是一种弱类型脚本语言。其源代码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为

2.2结构层（HTML）

太简单，略

2.3表现层（CSS）

CSS层叠样式是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等等，换句话说就是不具备任何语法的支持

主要缺陷：

语法不够强大，无法嵌套书写，导致模块化开发中需要很多重复的选择器；
没有变量和合理的样式服用机制，使得逻辑上相关的属性值必须以字面量的形式重复书虫，导致难以维护；

为了解决上述问题，前端开发人员会使用一种称之为【CSS预处理器】的工具，提供CSS确实的样式层服用机制，较少冗余代码，提高样式代码的可维护性。

什么是CSS预处理器

通俗理解：用一种专门的编程语言，进行web页面样式设计，在通过编译器转化为正常的CSS文件，以供项目使用。

常用CSS预处理器：

SASS:基于Ruby，通过服务器处理，功能强大。解析效率较高。需要学习Ruby语言，上手难度高于LESS。
LESS：基于Node JS,通过客户端处理，使用简单。功能比SASS简单，解析效率也杜宇SASS，但在实际开发中足够了，所以我们和后台人员如果需要的话，建议使用LESS。

2.4行为层（JavaScript）

JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。

Native 原生JS开发

原生JS开发，也就是让我们按照【ECMAScript】标准的开发方式，简称ES，特点是所有浏览器都支持。截至到当前，ES标准以发布如下版本：

ES3
ES4（内部，未正式发布）
ES5（全浏览器支持）
ES6（常用，当前主流版本：webpack打包成为ES5支持） 因为前后端使用的版本可能不一样，所以需要webpack打包，使得两个版本相互支持
ES7
ES8
ES9（草案阶段）

区别就是逐步增加新特性。
TypeScript 微软的标准
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯·海尔斯伯格(C#、Delphi、TypeScript之父； .NET创立者) 主导。该语言的特点就是除了具备ES的特性之外还纳入了许多不在标准范围内的新特性，所以会导致很多浏览器不能直接支持TypeScript语法，需要编译后(编译成JS) 才能被浏览器正确执行。

JavaScript框架

JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；
Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–>2 代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）
React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；
Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和React(虚拟 DOM) 的优点；
Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能；、

二、前端发展史

2.1、UI框架

Ant-Design：阿里巴巴出品，基于React的UI框架
ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
BootStrap：Teitter推出的一个用于前端开发的开源工具包
AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架

2.2、JavaScript构建工具

Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载

注：以上知识点已将WebApp开发所需技能全部梳理完毕

2.3、三端同一

混合开发（Hybrid App）

主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：

云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
本地打包： Cordova（前身是 PhoneGap）

微信小程序

详见微信官网，这里就是介绍一个方便微信小程序UI开发的框架：WeUI

2.4、后端技术

前端人员为了方便开发也需要掌握一定的后端技术但我们Java后台人员知道后台知识体系极其庞大复杂，所以为了方便前端人员开发后台应用，就出现了Node JS这样的技术。Node JS的作者已经声称放弃Node JS(说是架构做的不好再加上笨重的node modules，可能让作者不爽了吧)开始开发全新架构的De no
既然是后台技术，那肯定也需要框架和项目管理工具， Node JS框架及项目管理工具如下：

Express：Node JS框架
Koa：Express简化版
NPM：项目综合管理工具，类似于Maven
YARN：NPM的替代方案，类似于Maven和Gradle的关系

2.5、主流前端框架

Vue.js

iView

iview是一个强大的基于Vue的UI库，有很多实用的基础组件比element ui的组件更丰富，主要服务于PC界面的中后台产品。使用单文件的Vue组件化开发模式基于npm+webpack+babel开发，支持ES 2015高质量、功能丰富友好的API，自由灵活地使用空间。

官网地址
Github
iview-admin

备注：属于前端主流框架，选型时可考虑使用，主要特点是移动端支持较多

Element UI

Element是饿了么前端开源维护的Vue UI组件库，组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。主要用于开发PC端的页面，是一个质量比较高的Vue UI组件库。
·官网地址
·Git hub
·vue-element-admin
备注：属于前端主流框架，选型时可考虑使用，主要特点是桌面端支持较多

ICE

飞冰是阿里巴巴团队基于React/Angular/Vue的中后台应用解决方案，在阿里巴巴内部，已经有270多个来自几乎所有BU的项目在使用。飞冰包含了一条从设计端到开发端的完整链路，帮助用户快速搭建属于自己的中后台应用。

官网地址。
Git hub

备注：主要组件还是以React为主，截止2019年02月17日更新博客前对Vue的支持还不太完善，目前尚处于观望阶段

VantUI

Vant UI是有赞前端团队基于有赞统一的规范实现的Vue组件库，提供了-整套UI基础组件和业务组件。通过Vant，可以快速搭建出风格统一的页面，提升开发效率。

官网地址
Github

AtUI

at-ui是一款基于Vue 2.x的前端UI组件库，主要用于快速开发PC网站产品。它提供了一套n pm+web pack+babel前端开发工作流程， CSS样式独立，即使采用不同的框架实现都能保持统一的UI风格。
·官网地址
·Git hub

Cube Ul

cube-ui是滴滴团队开发的基于Vue js实现的精致移动端组件库。支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

官网地址
Github

混合开发

Flutter

Flutter是谷歌的移动端UI框架，可在极短的时间内构建Android和iOS上高质量的原生级应用。Flutter可与现有代码一起工作，它被世界各地的开发者和组织使用，并且Flutter是免费和开源的。

官网地址
Github
备注：Google出品，主要特点是快速构建原生APP应用程序，如做混合应用该框架为必选框架

lonic

lonic既是一个CSS框架也是一个Javascript UI库， lonic是目前最有潜力的一款HTML 5手机应用开发框架。通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScript MV VM框架和Angular JS/Vue来增强应用。提供数据的双向绑定，使用它成为Web和移动开发者的共同选择。

官网地址

·官网文档
·Git hub

微信小程序

mpvue

mpvue是美团开发的一个使用Vue.js开发小程序的前端框架，目前支持微信小程序、百度智能小程序，头条小程序和支付宝小程序。框架基于Vue.js，修改了的运行时框架runtime和代码编译器compiler实现，使其可运行在小程序环境中，从而为小程序开发引入了Vue.js开发体验。
·官网地址
·Git hub
备注：完备的Vue开发体验，井且支持多平台的小程序开发，推荐使用

WeUI

WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

官网地址
Github

三、JavaScript（基础教程）

1、什么是JavaScript

（见上述介绍）

ECMAScript它可以理解为是JavaScript的一个表混

最新版本已经到se6版本

但是大部分浏览器还只是停留在支持es5代码上！

开发环境—线上环境，版本不一致

2、快速入门

2.1引入JavaScript

1、内部标签

<script>//这里就可以直接写js代码了
</script>

2.外部引入

我们在js包下写了一个qj.js，所以在html可以直接外部引入

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    script标签内，写JavaScript代码-->
<!--    <script>-->
<!--        alert('hello world'); //这里似乎不区分单引号和双引号-->
<!--    </script>-->
<!--    外部引入-->
<!--    注意script标签必须成对出现，不能单闭合--><script src="js/qj.js"></script>
<!--    不用显示定义type，也默认就是--><script type="text/javascript"></script>
</head>
<body>
<!--这里也可以存放script代码-->
</body>
</html>

2.2基本语法入门

    <script>//1. 定义变量 变量类型 变量名 = 变量值var num = 1;var zzz="nihao";alert(num);//2.流程控制 和java一样//console.log(score) 在浏览器的控制台打印变量！ 相当于 System.out.printf();</script>

浏览器必备调试须知：

2.3数据类型

数值，文本，图形，音频，视频

变量

var a=1;
var 王者荣耀="王者荣耀";//以中文为变量名在java和JavaScript中都是可以的

number
js不区分小树和整数，Number

123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN //not a number
Infinity // 表示无限大

字符串

‘abc’ “abc”布尔值
true，false逻辑运算&& 两个都为真，结果为真|| 一个为真，结果为真!   真即假，假即真

比较运算符！！！重要！

=
1，"1"
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）

这是一个JS的缺陷，坚持不要使用 == 比较
须知：

NaN === NaN，这个与所有的数值都不相等，包括自己
只能通过isNaN（NaN）来判断这个数是否是NaN

浮点数问题

console.log((1/3) === (1-2/3))
1
尽量避免使用浮点数进行运算，存在精度问题！Math.abs(1/3-(1-2/3))<0.00000001

null 和 undefined

null 空
undefined 未定义

数组
Java的数组必须是相同类型的对象~，JS中不需要这样

//保证代码的可读性，尽量使用[]var arr = [1,2,3,4,5,'hello',null,true];//第二种定义方法new Array(1,2,3,4,5,'hello');取数字下标：如果越界了，就会 报undefinedundefined

对象
对象是大括号，数组是中括号

每个属性之间使用逗号隔开，最后一个属性不需要逗号

// Person person = new Person(1,2,3,4,5);var person = {    name:'Tom',   age:3,  tags:['js','java','web','...']}

取对象值

person.name

“Tom”
person.age
3

2.4严格检查格式

就是’use strict’;

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title><!--    前提：IDEA 需要设置支持ES6语法--><!--    'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题--><!--    必须卸载JavaScript的第一行！--><!--    局部变量建议都是用let去定义--><!--    <script>-->        'use strict';        //定义局部变量        let i=1;        //ES6 才有 let    </script></head><body></body></html>

3.数据类型

3.1、字符串

1、正常字符串我们使用单引号，或者双引号包裹

2、注意转义字符 \

\'\n\t\u4e2d  \u#### Unicode字符  中\x41   Ascll字符

3、多行字符串编写

  //tab 上面 esc下面那个按键 `        var  msg =                `hello                world                你好ya                你好 `

4、模板字符串

    <script>        'use strict';        //tab 上面 esc下面那个按键 `        let name="pengpeng";        let age = 18;        let msg=`你好呀,${name}`;        console.log(msg);    </script>

5、字符串长度

console.log(str.length);

6、字符串的可变性，不可变

下面的student可以被重新赋值，但是取出来的时候还是原来的值，表示字符串是不可变的（在java中同样也不可变）

7、大小写转换

//注意这里是方法，不是属性了，调用的时候要注意student.toUpperCase();//转换为大写student.toLowerCase();//转换为小写

8、student.indexOf(‘t’)

9、substring

[) student.substring(1)//从第一个字符串截取到最后一个字符串 student.substring(1,3)//[1,3)

3.2数组

Array可以包含任意的数据类型

var arr=[1,2,3,4,5,6];//通过下标取值和赋值arr[0]=0;arr[0]=1;

长度

arr.length

注意：加入给arr.length赋值，数组大小就会发生变化，如果赋值小（注意是缩小数组的长度），元素就会丢失；如果赋值过大，则会自动讲后面为赋值的位置设置为空（undefined）

2.indexOf，通过下标元素获得下标索引

arr.indexOf(1)1

字符串的"1"和数字1是不同的

3、slice() 截取Array的一部分，返回一个新数组，类似于String中的substring

4、push（）压入到尾部，pop（）弹出尾部的一个元素

5、unshift：压入到头部 shift：弹出头部的一个元素

6、排序sort（）

(3) ["B","C","A"]arr.sort()(3) ["A","B","C"]

7、元素反转

arr(3) ["A", "B", "C"]arr.reverse()(3) ["C", "B", "A"]

8、concat() 数组拼接

arr.concat(1,2,3,)(6) ["C", "B", "A", 1, 2, 3]arr(3) ["C", "B", "A"]

注意：concat（）并没有修改数组，只是会返回一个新的数组

9、连接符 join

打印拼接数组，使用特定的字符串连接

arr(3) ["C", "B", "A"]arr.join('-')"C-B-A"

10、多维数组

arr=[[1,2],[3,4],["5","6"]];(3) [Array(2), Array(2), Array(2)]0: (2) [1, 2]1: (2) [3, 4]2: (2) ["5", "6"]length: 3__proto__: Array(0)

3.3对象

若干键值对

var 对象名 = {    属性名: 属性值，    属性名: 属性值，    属性名: 属性值}//定义了一个person对象，他有四个属性！ var person={            name: "kuangshen",            age:3,            email:"24736743@qq.com",            score:0        }

Js中对象，{。。。。。。}表示一个对象，键值对描述属性xxxx：xxxx，多个属性之间使用都好隔开，最后一个属性不加逗号！

1、对象赋值

person.name = "qinjiang""qinjiang"person.age = 1818

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

person.hahaundefined

3、动态的删减属性，通过delete删除对象的属性

delete person.nametrueperson{age: 3, email: "123456@qq.com"}4、属性动态的添加，直接给新的属性添加值即可```javascriptperson.haha = "haha""haha"person{age: 3, email: "123456@qq.com", haha: "haha"}

5、判断属性值是否在这个对象中！xxx in xxx

age in personVM415:1 Uncaught ReferenceError: age is not defined    at <anonymous>:1:1(anonymous) @ VM415:1'age' in persontrue

6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

person.hasOwnProperty('tostring')falseperson.hasOwnProperty('age')true

3.4、流程控制

if判断 while循环 do while for 和java一样

foreach循环

ES5.1特性

var age =[12,3,12,3,12,3,12,3,12,3,12,3,123];        //函数        age.forEach(function (value){            console.log(value)        })

for …in ------下标

 var age = [1,2,3,4,5,6,7,8,9,7,10];        for (var  num in age) {            if (age.hasOwnProperty(num)){                console.log("存在");                console.log(age[num]);            }        }

截取部分结果

3.5、Map和Set

ES6的新特性~

Map

var map = new Map([["tom",100],["jack",90],["haha",80]]);        var name = map.get('tom');//通过key获得value        map.set('admin',123456);//新增或修改        map.delete("tom");//删除

Set：无序不重复的集合

set.add(2);//添加set.delete(1);//删除console.log(set.has(3));//是否包含某个元素

3.6、iterator

作业：使用iterator来遍历迭代我们Map，Set！
遍历数组

//通过for of（按值遍历） /for in下标var arr = [3,4,5];for (var x of arr){    console.log(x)}

遍历set

var set = new Set([5,6,7]);for (letb x of set){    console.log(x)}

4、函数

4.1、定义函数

定义方式一

绝对值函数

    function abc(x){            if (x>0){                return x;            }else {                return -x;            }        }

结果
abc(10)
10
abc(-10)
10

一旦执行到return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

  var abc =function (x){            if (x>0){                        return x;                    }else {                        return -x;                    }                       }

function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！
方式一和方式二等价！

参数问题：javaScript可以传任意个参数，也可以不传递参数~
参数进来是否存在问题？假设不存在参数，如何规避？

  var abs = function (x){      //手动抛出异常来判断            if (typeof x!='number'){                throw 'Not a Number';            }            if (x>=0){                return x;            }else{                return -x;            }        }

arguments

arguments是一个JS免费赠送的关键字；

代表，传递进来的所有参数，是一个数组！

   var abs = function (x){            console.log("X=>"+x);            for (var i = 0;i<arguments.length;i++){                console.log(arguments[i]);            }            if (x>=0){                return x;            }else{                return -x;            }        }

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~

rest

以前：

if(arguments.length>2){    for (var i=2;i<arguments.length;i++){        //....    }}

ES6引入的新特性，获取除了已经定义的参数之外的所有参数~…

rest参数只能写在最后面，必须用…标识。

//现在的方法(rest参数)：在函数中定义rest参数

function aaa(a,b,...rest){    console.log("a=>"+a);    console.log("b=>"+b);    console.log(rest);}

结果

4.2、变量的作用域

变量的作用域

function a(){    var x = 1;    //内部函数可以访问外部函数的成员，反之不行    function a1(){        var y = x +1; //2    }    //外部访问了内部函数的变量，会不行    var z = y+1; //报错}

变量的一般使用

function zhang(){    var x,y,z;    //之后再赋值调用}

全局对象window

var x ='xxx';window. alert(x);var o1d_ _alert = window. alert;//o1d_ alert(x);window.alert = function () {};//发现alertO 失效了window. alert(123);//恢复window.alert = o1d_ _alert;window. alert(456);

局部作用域let
ES6let关键字，解决局部作用域冲突问题，现建议大家都用let去定义局部变量

function aaa() {for(vari=0;i<100;i++){    console.log(i)}console.log(i+1); //问题? i 出了这个作用域还可以使用}//使用let后function aaa() {for(leti=0;i<100;i++){    console.log(i)}console.log(i+1); //Uncaught ReferenceError: i is not defined}

常量const
在ES6之前，定义常量使用全部大写字母命名的变量就是常量

var PI = '3.14' ;console.' 1og(PI);PI = '213'; //可以改变这个值console.1og(PI);

在ES6之后，用const定义常量

const PI = '3.14';console.log(PI);PI = '123'; //报错，常量不允许修改

4.3、方法

定义方法
方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

var person = {    name: 'zhang';    brith: 1997;    //方法     age: function(){        var now = new Date().getFullYear();        return now - this.brith; //this是默认指向调用它的那个对象，这里值person    }}//属性调用person.name;//方法调用，方法一定要带（）person.age();

apply方法
apply方法是可以控制this指向的，该方法有两个参数，第一个是getArg要使用的是那个对象，第二个是数组

function getAge(){    var now = new Date().getFullYear();    return now - this.brith;}getAge.apply(person,[]); //this指向了person，参数为空

5、内部对象

标准对象

typeof 123“number”typeof ‘123’‘string’typeof true“boolean”typeof NaN“number”typeof []"object’typeof {}“object”typeof Math. abs“functi on”typeof undefined“undefined”

5.1、Date

基本使用

var now = new Date(); //sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间)now. getFu11YearO); //年now. getMonth(); //月0~11 代表月now. getDate(); //日now. getDay(); //星期几now. getHours(); //时now. getMinutes(); //分now. getseconds(); //秒now. getTimeO); //时间戳全世界统一1970 1.1 0:00:00 毫秒数console. log(new Date(1578106175991)) //时间戳转为时间

转换

now = new Date (1578106175991)sat Jan 04 2020 10:49:35 GMT+0800 (中国标准时间)now. toLocalestring //注意，调用是一个方式，不是一一个属性!f toLocalestring() { [native code] }now. toLocalestring()"2020/1/4上午10:49:35"now. toGMTString()'Sat, 04 Jan 2020 02:49:35 GMT"

5.2、JSON

json 是什么

早期，所有数据传输习惯使用XML文件!

JSONlavaScript Object Notation, JS对象简谱)是- -种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。在JavaScript -切皆为对象、任何js支持的类型都可以用JSON来表示; number, string…

格式:

对象都用{}
数组都用[]
所有的键值对都是用key:value

json字符串和js对象的转换

对象转化为json字符串(json字符串每个键都用""或’包围)

var jsonuser = JSON. stringify(user);

json字符串转化为对象参数为json 字符串
var obj = JSON. parse(’ {“name”:“qinjiang” , “age” :3,“sex”:“男”}’);

var user = {    name :    "qinjiang",    age: 3,    sex: '男'    }//对象转化为json字符串(json字符串每个键都用""或'包围)var jsonuser = JSON. stringify(user); //输出为{"name" : "qinjiang"，"age":3,"sex" :"男"}//json字符串转化为对象参数为json 字符串var obj = JSON. parse(' {"name":"qinjiang" , "age" :3,"sex":"男"}');//输出为{name:"qingjiang",age:3,sex:"男"}

json和js对象的区别：

var obj = {a: 'he11o' ,b: 'he11ob'};//这是个对象var json = '{"a": "he11o" , "b":"he1lob"}'//这个是用单引号（双引号）包起来的是json字符

5.3、Ajax

原生的js写法 xhr异步请求
jquery封装好的方法 $("#name").ajax("")
axios 请求

6、面向对象编程

原型对象

JavaScript、Java、C#。。。面向对象；JavaScript有些区别！

类：模板原型对象

对象：具体的实例

在JavaScript这个需要大家换一下思维方式！

1、原型对象
当创建一个新函数时，系统会根据一组特定的规则为函数创建一个prototype属性，该属性会指向一个名为原型对象的对象，在默认情况下，该对象会自动生成一个构造函数（constructor），该构造函数是一个指向函数的指针。而在原型对象中，除了有这个构造函数，我们还可以添加其他的属性和方法。

通俗来讲就是，当我们新建一个函数A时，函数A内部会有一个属性，该属性指向一个对象（名字叫原型对象），而这个对象里面默认有一个构造函数，这个构造函数指向我们最初新建的函数A。然后，我们还可以在原型对象中添加属性和方法

//①默认情况下，构造函数是空的function Person（）{//构造函数首字母大写}//②添加属性和方法Person.prototype.name="dp";Person.prototype.doSomething=function(）{    alert(this.name);};//③定义好构造函数和其他属性方法之后，就可以创建实例了var person1=new Person();var person2=new Person();

6.2、面向对象class继承

class关键字是在ES6引入的

//给student添加一个方法 //1、先定义一个类、属性、方法class student{    constructor(name){        this.name = name;    }    hello(){        alert('hello');    }}//使用方法var person = new student('小明');person.hello();

2、继承

 class Student{            constructor(name){                this.name = name;            }            hello(){                alert('hello');            }        }        class XiaoStudent extends Student{            constructor(name,grade){                super(name);                this.grade = grade;            }            mygrade(){                alert('我是一个小学生')            }        }        //使用        var xiaoming = new Student("xiaoming",1);        var xiaohong = new XiaoStudent("xiaohong",1);

本质：查看对象原型

原型链:(java中叫继承)

_ proto _:

7、操作BOM对象（重点）

浏览器介绍

avaScript和浏览器关系？
JavaScript诞生就是为了能够让他在浏览器中运行！

BOM：浏览器对象模型

IE 6~11
chrome
Safari
Firefox

三方

QQ浏览器
360浏览器

window

window代表浏览器窗口

window.alert(1)undefinedwindow.innerHeight258 window.innerwidth919window.outerHeight994window.outerwidth919//大家可以调整浏览器窗口试试

Navigator

Navigator，封装了浏览器的信息

navigator . appName"Netscape"navigator . appVersion"5.0 (windows NT 10.0; WOw64) Applewebkit/537.36 (KHTML， like Gecko)Chrome/63.0.3239.132 Safari/537.36"navigator . userAgent"Mozi11a/5.0 (Windows NT 10. 0; WOw64) ApplewebKit/537.36 (KHTML， like :Gecko) Chrome/63.0. 3239.132 Safari/537.36"navigator. platform"Win32"

大多数时候，我们不会使用navigator对象，因为会被人为修改
不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸 (这里我的电脑显示的是1536*864，因为其图像被放大了125%)

screen.width1920screen.Height1080

lcation

location 代表当前页面的URL信息

location属性：

主机：host
当前指向的位置：href
协议:protocol
重新加载的方法：f reload() //location.reload()刷新网页(设置新的地址:location.assign(‘想要跳转的地址’))

host: "www.baidu.com"href: "https://www.baidu.com/"protocol: "https:"reload: ƒ reload() //刷新网页//设置新的地址location.assign('https://.....')

document

document代表当前的页面，HTML DOM文档树

document.title"百度一下，你就知道"//获取具体的文档树节点：<d1 id="app">    <dt> Java</dt>    <dd> JavaSE</dd>    <dd> JavaEE</dd></d1><script>    var d] = document. getElementById(' app ');</script>//获取cookiedocument.cookie//劫持cookie原理：把一段能劫持cookie的js代码放在网站上 一点开就能把你的cookie拿了<script src='劫持cookie'></script><!-- 获取你的cookie上传到他的服务器 -->//服务器端可以设置cookie为httpOnly

history

history代表浏览器的历史记录

history.back() //后退history.forward() //前进

8、操作DOM对象（重点）

DOM：文档对象模型

核心

浏览器网页就是一个Dom树形结构！

更新：更新Dom节点

遍历dom节点
删除dom节点
添加dom节点

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

获得dom节点

//对应css选择器var h1 = document.getElementByTagName('h1'); //这里就是获取到了这个dom节点var p1 = document.getElementByID('p1');var p2 = document.getElementByclassName('p1');var father = document.getElementByID('father');var childrens = father.children;// 获取父节点下的所有子节点var childrens = father.children[index]; //获取其中一个节点//father.firstchild 获取父节点的第一个子节点//father.lostchild 获取父节点的最后一个子节点

这是原生戴拿，之后我们金量都使用jquery();

更新节点

<div id="id1">    </div><script>    var id1 = document.getElementByID('id1');</script>

操作文本

id1.innerText='456'修改文本的值
id1.innerHTML='<strong>123</strong>'可以解析HTML文本标签

操作JS

id1.innerText = '123' //innerText方法修改文本内容  id1.innerHTML = '<strong>123</strong>' //innerHTML解析HTML超文本的 可以修改id的样式id1.style.color = 'red' //style.什么：style方法修改css样式。即可以在js里操作修改样式id1.style.padding = '2em' //属性使用字符串包裹

删除节点

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

<div>    <h1>标题一</h1>    <p id='p1'>p1</p>    <p class='p2'>p2</p></div><script>    var self = document.getElementByID('p1');    var father = p1.parentElement; //找到p1的父节点    father.removechild(self) //通过父节点使用removechild删掉自己（只有标记为id选择器的节点才可以删除    //删除是一个动态的过程,以下这种是不合适的，因为删除是动态变化的，[0]删除后，以前要删除的[1]变成了现在的[0]    father.removeChild(father.childern[0]);    father.removeChild(father.childern[1]);    father.removeChild(father.childern[2]);</script>

注意：删除多个节点时，children是时刻变化的，不能直接father.removechild(father.children[0])这样从第一个索引开始删!

插入节点

我们获得了某个dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个dom节点以及存在元素了，就不能这么干了，因为会产生覆盖，这个时候就使用追加节点的方法：

<p id="js">JavaScript</p><div id="list">    <p id="se">JavaSE</p>    <p id="ee">JavaEE</p>    <p id="me">JavaME</p></div><script>    var js = document.getElementByID('js'); //获取想要加入的节点    var list = document.getElementByID('list'); //获取想要加入的父节点    list.appendchild(js); //在list节点下追加子节点 </script>

效果：

创建一个新的标签

<script>    var js = document.getElementById('js'); var list = document.getElementById('list');    //第一个方法：通过js创建一个新节点    var new = document.creatElement('p'); //创建一个p标签    new.id = 'new';    new.innerText = 'hello'; //在这个标签上输入文本    list.appendchild(new); //在父节点下加进去    //用第二种方法创建一个有自己属性的标签节点    var myScript = document.creatElement('script');//创建一个script标签节点    myScript.setAttribute('type','text/javascript'); /*setAttribute方法加入属性和属性值。第一个参数为属性名，第二个参数为属性值。生成效果为<script type='text/javascript'></sript>*/    //可以创建一个style标签    var myStyle= document.createElement('style'); //创建了一个 空style标签    myStyle.setAttribute('type', 'text/css');    myStyle.innerHTML = 'body{background-color: chartreuse;}'; //设置标签内容    document.getElementsByTagName( 'head' )[0]. appendChild(myStyle) //在父节点追加这个style标签</script>

insertBefore 在前面插入节点

var ee = document. getElementById('ee');var js = document . getElementById('js');var list = document . getElementById( 'list');//要包含的节点. insertBefore(newNode, targetNode)list. insertBefore(js,ee); //在list节点中（list是父节点），在ee节点前加入目标节点js

9、操作表单

表单是什么 form DOM 树

文本框 text
下拉框 < select >
单选框 radio
多选框 checkbox
隐藏框 hidden
密码框 password
…

表单的目的：提交信息

获得要提交的信息

<body><form action='#' method="post">    //文本框    <p>    <span>用户名：</span>    <input type="text" id="username">    </p>    //单选框    <p>    <span>性别</span>    <input type="radio" name="sex" value="man" id="boy">男    <input type="radio" name="sex" value="women" id="girl">女    </p></form></body><script>    var input_text = document.getElementById('username';)    //得到文本框的值    input_text.value    //修改文本框的值    input_text.value='123'    var boy_radio = document.getElementById('boy';)    var girl_radio = document.getElementById('girl')    //对于单选框、多选框等固定的value，boy_radio.value只能去到当前的值      boy_radio.checked; //看返回的结果，是否为true，如果为true则被选中    boy_radio.checked=true; //赋值</script>

提交表单。 md5加密密码，表单优化

<head>    <!-- 首先要导入MD5这个工具包 -->    <script src="https://cdn . bootcss . com/blueimp-md5/2.10.0/js/md5.min.js"></script></head><body>    <!-- action属性是提交完表单后调整的网页 -->    <form action="#" method="post">    <p>        <span>用户名: </span> <input type="text" id="username" name="username">    </p>    <P>        <span>密码: </span> <input type="password" id="password" name="password">    </p><!--绑定事件onclick被点击。按钮提交事件aaa()--> .    <button type="submit" onclick="aaa()">提交</button></form></body><script>    function aaa() {        var uname = document.getElementById( 'username ' );        var pwd = document.getElementById('password' );        console.1og(uname.value);        //MD5算法把pwd变成乱码，用这个方法会在前端把密码加长 用户体验感不好        pwd.value = md5(pwd.value);        console.1og(pwd.value);    }</script>

表单提交，md5加密优化版：

<!-- 使用form提交事件aaa()    οnsubmit=绑定一个检测的函数，返回true或false    将这个结果返回给表单，使用onsubmit接收    οnsubmit="return aaa()" --> <form action="https ://www. baidu. com/" method="post" onsubmit="return aaa()">    <P>        <span>用户名: </span> <input type="text" id="username" name="username">    </p>    <p>        <span>密码: </span> <input type="password" id=" input - password" >    </p>    <input type= "hidden" id="md5-password" name=" password" >    </form><script>    function aaa() {        alert(1);        var uname = document.getElementById( 'username' );        var pwd = document.getElementById(" input-password" );        //通过隐藏去提交        var md5pwd = document.getElementById('md5-password' );        md5pwd.value = md5(pwd.value);        //可以校验判断表中内容，true就是通过提交，false, 阻止提交        return true;        }</script>

10、jQuery

JavaScript

jQuery库，里面存在大量的额JavaScript函数

获取jQuery

使用时导入包或者jQuery的cdn网址

jq使用的公式：$(selector).action() //这个selector选择器就是css的选择器.action是事件

选择器

原生的js选择器的种类有：

标签选择器：document.getElementByTagName()
id选择器： document.getElementByID()
类选择器： document.getElementByClassName()

jq选择器有（CSS中的选择器他全部都可以使用）

标签选择器：$(‘p’).click();
id选择器：$(’#id1’).click();
class选择器：$(’.class1’).click();

文档工具站： https://jquery.cuishifeng.cn/

例子：

<a href="" id="test_jquery">点我</a><script>    <!-- 在这个a标签中添加一个单击事件 -->    // 使用js语法    var id = document.getElementById('test_jquery')    id.click(function(){         alert('jQuery');    })    // 使用jq语法    $('#test_jquery').click(function(){        alert('jQuery');    })</script>

事件

有鼠标事件、键盘事件、其他事件

<!-- 要求：获取鼠标当前的一个坐标 -->mouse:<span id="mouseMove"></span><div id="divMove">    在这里移动鼠标试试</div><script>    // 当前网页元素加载完毕之后，响应事件    // $(document).ready(function(){ //document默认是文档，ready默认是加载完    // })    // 上面这行的简写    $(function(){        $('#divMove').mousemove(function(e){ //获取了divMove的鼠标移动的坐标            $('#mouseMove').text('x:'+e.pageX+'Y:'+e.pageY) //在mouseMove这个span里显示鼠标移动的坐标        })    });</script>

操作DOM

节点文本操作

<ul id="test_ul">    <li class="js">JavaScript</li>    <li name="python">Python</li></ul><script>    //拿到这个标签的文本，    $('#test_ul li[name=python]').text();    //修改这个标签的文本    $('#test_ul li[name=python]').text('123');    //修改样式    $('#test_ul').html();</script>

css的操作

<script>     $('#test_ul').css("color","red"); //使用键值对来表示属性和属性值</script>

元素的显示和隐藏：本质display:none;

$('#test-url li[name=python]').show()$('#test-url li[name=python]').hide()

娱乐测试(带’’$“,基本上都需要到jquery包)

$(window).width()$(window).height()$('#test-ul li[name=python]').toggle(); //切换显示/隐藏

未来ajax();

$('#from').ajax()//大概格式长这个样子$.ajax({ url: "test.html", context: document.body, success: function(){    $(this).addClass("done");}});

JavaScript前端技巧

自己写html的时候可以去自己喜欢的网页拷贝其相关的页面，打开浏览器的调试模式在Element的界面上调试（删除无关紧要的部分，保留核心文件，拷贝成html格式，粘贴在我们的项目中，修改css格式即可）

推荐资源：

友人C

小技巧

1、如何巩固JS（看jquery源码，看游戏源码！）

2、巩固HTML。CSS（扒网站，全部down下来没然后对应修改效果）

Layer弹窗组件

Element-ui Layui Bootstrap antdesign

狂神Javascript笔记相关推荐

JavaScript笔记（狂神说）
JavaScript笔记(狂神说) 本文章根据b站狂神说javascript视频教程整理视频链接:https://www.bilibili.com/video/BV1JJ41177di?from=s ...
JavaWeb（引用--＞狂神学习笔记）2021-08
狂神学习笔记 1.基本概念(①) 1.1 前言 web开发: web,网页的意思,www.baidu.com· 静态web html,css 提供给所有人看的数据始终不会发生变化! 动态web 淘宝, ...
javascript笔记：深入分析javascript里对象的创建（上）续篇
今天回来一看我的博客居然有这么多人推荐真是开心极了,看来大家对我的研究有了认可,写博客的动力越来越大了,而且我发现写javascript在博客园里比较受欢迎,写java的受众似乎少多了,可能博客园里j ...
JavaScript 笔记Day1
<JavaScript 笔记> JavaScript 是属于网络的脚本语言! JavaScript 是世界上最流行的编程语言.这门语言可用于 HTML 和 web,更可广泛用于服务器.PC ...
JavaScript笔记整理
JavaScript笔记整理这段时间没有之前花在学习上的时间多了目前进度还停留在JavaScript和D3.js(这个目前只找到了教程) 主要原因是因为决定自己找单位实习,到了今天26号才有了眉目 ...
[Effective JavaScript 笔记]第27条：使用闭包而不是字符串来封装代码
函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...
Web前端JavaScript笔记（4）节点
如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
MySQL(狂神说笔记)
MySQL(狂神说笔记) 1.初始数据库 1.1为什么学习数据库? 1.岗位需求 2.现在的世界,大数据时代,得数据库者得天下. 3.被迫需求: 存数据 4.数据库是所有软件体系中最核心的存在: DB ...
ElasticSearch（狂神说笔记）
ElasticSearch(狂神说笔记) ES安装及head插件安装声明:JDK 1.8以上,最低要求!ElasticSearch 客户端.界面工具! Java 开发,ElasticSearch的版 ...

狂神Javascript笔记