JavaScript
文章平均质量分 83
JavaScript专栏学习
MichstaBe-IMUT
一条菜狗罢了
展开
-
javaScript ES6中的类与对象
类 class在 ES6 中新增加了类的概念,可以使用 class 关键字声明一个类,之后以这个类来实例化对象。类抽象了对象的公共部分,它泛指某一大类(class)对象特指某一个,通过类实例化一个具体的对象创建类语法:class name { // class body} 创建实例:var xx = new name(); 注意: 类必须使用 new 实例化对象类 constructor 构造函数constructor() 方法是类的构造函数(默认方法),用于传递参数,返回实原创 2021-03-24 20:00:53 · 142 阅读 · 0 评论 -
Echarts数据可视化
什么是数据可视化数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息。数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。数据可视化的场景常见的数据可视化库D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源 Javascript 数据可视化库 Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用 AntV 蚂蚁金服全新一代数据可视化原创 2021-03-24 18:47:38 · 494 阅读 · 0 评论 -
javaScript 事件高级
事件高级注册事件(绑定事件)给元素添加事件,称为注册事件或者绑定事件。注册事件有两种方式:传统方式和方法监听注册方式传统注册方式利用 on 开头的事件 onclick<button onclick=“alert('hi~')”></button>btn.onclick = function() {} 特点: 注册事件的唯一性同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式w3c 标准推荐方式addEve原创 2021-03-16 12:27:37 · 245 阅读 · 0 评论 -
javaScript简单类型与复杂类型
简单类型与复杂类型简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型。值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型string ,number,boolean,undefined,null引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等// 简单数据类型 null 返回的是一个空的对象 object var tim原创 2021-03-13 14:38:08 · 119 阅读 · 0 评论 -
javaScript ES6
ES6ES6是什么ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。具体请看阮一峰ES6教程为什么使用ES6每一次标准的诞生都意味着语言的完善,功能的加强。JavaScript语言本身也有一些令人不满意的地方:变量提升特性增加了程序运行时的不可预测性语法过于松散,实现相同的功能,不同的人可能会写出不同的代码ES6新增原创 2020-11-19 21:38:26 · 196 阅读 · 0 评论 -
JS 正则表达式
正则表达式什么是正则1.用于匹配规律规则的表达式,正则表达式最初是科学家对人类神经系统的工作原理的早期研究,现在在编程语言中有广泛的应用。2.正则表通常被用来检索、替换那些符合某个模式(规则)的文本。3.正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。4.简单说:正则表达式实际上就是规定了一系列的字符串规则,比如手机号13838383838,那么,我们怎么让计算机知道这一切呢?转载 2020-09-12 19:13:39 · 207 阅读 · 0 评论 -
JS 递归 拷贝
递归什么是递归1.函数中调用函数自己2.使用递归的时候一定需要有结束递归的条件,否则就会变成死循环,直到浏览器崩溃。递归例子//递归实现n个数字的和function getSum(x){ if(x==1){ return 1; } return x+getSum(x-1);}console.log(getSum(5));常规求5个数的和//求5个数字的和var sum=0for(var i=0;i<6;i++){ sum=sum+原创 2020-09-12 16:40:05 · 591 阅读 · 0 评论 -
JS 函数进阶
函数的定义方式函数声明function foo () {}函数表达式var foo = function () {}new Function(很少使用)var fn = new Function('var name = "zs";console.log(name)');函数也是对象,所有函数都是 Function 的实例函数声明与函数表达式的区别1.函数声明必须有名字2.函数声明会函数提升,在预解析阶段就已创建,声明前后都可以调用3.函数表达式类似于变量赋值4.函数表达原创 2020-09-11 20:48:30 · 176 阅读 · 0 评论 -
javaScript 继承
继承1.ES6之前没有提供extends继承方法,所以我们需要构造函数+原型对象模拟实现继承,成为组合继承。call方法call():调用函数,并且修改这个函数的this指向方法:fun.call(thisArg,arg1,arg2...)thisArg:调用函数修改this指向的对象arg1 arg2:传递的其他函数举例:<script> function fn(x,y) { console.log(x+y);原创 2021-03-24 20:41:38 · 108 阅读 · 0 评论 -
javaScript 构造函数与原型对象
构造函数构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。function Person(name, age, sex) { this.name = name; this.age = age; this.sayHi = function() { alert('我的名字叫:' + th原创 2021-03-24 20:28:30 · 270 阅读 · 0 评论 -
javaScript 面向对象
面向对象编程现实中的面向对象1.面向对象是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物。2.万物皆对象!世界上的任何事和物都可以被视为对象,而我们需要关注的是**对象本身可以实现的功能,不需要深入理解构成对象的元素**。3.举例洗衣服:(1)面向过程:用手+洗衣液进行搓洗(2)面向对象:使用洗衣机洗衣服,洗衣机就是对象。js中的面向对象js中的对象:是一个包含相关数据和方法的集合(通常由一些变量和函数组成,我们称之为对象里面的属性和方法)1.面向对象在js里有原创 2020-09-10 18:55:26 · 256 阅读 · 0 评论 -
javaScript 三大家族(offset,scroll,client)
offset 家族1.offset:偏移、补偿、位移.offsetParent1.返回当前对象的带有定位的父级盒子,有可能是父亲,也有可能是爷爷。注:如果当前的父级元素没有进行定位,offsetParent就为body;如果当前的父级元素有定位,offsetParent就为最近的那个父元素。offsetHeight与offsetWidth1.获取的是元素真实的高度和宽度,包括内容、边框和内边距。2.offsetHeight = height + border + padding;offse原创 2020-09-08 15:49:46 · 153 阅读 · 0 评论 -
JS BOM
BOM1.BOM即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。2.BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM构成Window:窗口对象,代表整个浏览器窗口,是顶级的对象Navigator:浏览器对象,代表浏览器当前的信息Screen:显示器屏幕对象,代表用户的屏幕信息History:历史记录对象,代表浏览器的历史信息Location:地址栏对象,代表浏览器当前的地址信息window对象window对象是浏览器的顶原创 2020-09-07 21:23:54 · 214 阅读 · 0 评论 -
javaScript DOM
DOMDOM概述文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。DOM树DOM又称为文档树模型, 因为整个HTML文档是一个树形的结构。文档 :一个页面就是一个文档,DOM 中使用 document 表示元素:页面中的所有标签都是元素,DOM 中使用 element 表示节点:网页中的所有内容原创 2021-03-15 20:03:58 · 131 阅读 · 0 评论 -
javaScript WebAPI
WebAPI1.API(Application Programming Interface,应用程序编程接口),通俗的讲,API就是编程语言给我提供的一些工具,通过这些工具,我们可以非常轻易的完成一些功能。2.Web API : 浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM), 通过这套API我们可以非常轻松的操作页面的元素和浏览器的一些功能。3.任何开发语言都有自己的API4.API的特征是输入输出(I/O)5.API使用方法(console.log())javascrip原创 2020-09-05 10:38:27 · 207 阅读 · 0 评论 -
javaScript 作用域 预解析
作用域作用域概述通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。JavaScript(es6前)中的作用域有两种: 全局作用域 局部作用域(函数作用域)全局作用域作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。局部作用域 (函数作用域)作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。原创 2021-03-12 14:45:25 · 203 阅读 · 0 评论 -
javaScript 缓动动画
mouseenter 和mouseover的区别当鼠标移动到元素上时就会触发 mouseenter 事件类似 mouseover,它们两者之间的差别是mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。 mouseenter 只会经过自身盒子触发,之所以这样,就是因为mouseenter不会冒泡跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡动画实现原理核心原理:通过定时器 setInterval() 不断移动盒子位置。实现步骤:获得盒子当前位置让盒子在原创 2021-03-17 21:21:24 · 129 阅读 · 0 评论 -
JS事件
事件1.事件就是交互事件,用户点击实现回馈,是交互体验的核心功能。绑定事件1.ele.onxxxx = function(event){}兼容性很好,但是一个元素的同一事件上只能绑定一个基本等同于写在HTML行间上。2.obj.addEventListener(type, listener, options)IE9以上,可以为一个事件绑定多个处理程序。3.obj.attachEvent(‘on’ + type, fn(事件处理函数));IE独有,一个事件同样可以绑定多个处理程序解除事件原创 2020-09-07 20:14:59 · 522 阅读 · 0 评论 -
javaScript内置对象
内置对象JavaScript 中的对象分为3种:自定义对象内置对象浏览器对象前面两种对象是JS 基础 内容,属于 ECMAScript; 第三个浏览器对象属于我们JS 独有的内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)内置对象最大的优点就是帮助我们快速开发JavaScript 提供了多个内置对象:Math、 Date 、Array、String等Math对象Math 对象不是构造函数,它具有数学常数和函数的属性和方原创 2021-03-13 14:16:44 · 134 阅读 · 0 评论 -
javaScript函数
函数函数的概念在 JS 里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用 JS 中的函数。函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。函数的使用函数在使用时分为两步:声明函数和调用函数声明函数// 声明函数function 函数名() { //函数体代码} function 是声明函数的关键字,必须小写 由于函数一原创 2021-03-12 12:48:05 · 218 阅读 · 0 评论 -
javaScript数组
数组数组的概念数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。// 普通变量一次只能存储一个值var num = 10; // 数组一次可以存储多个值var arr = [1,2,3,4,5];数组的创建方式JS 中创建数组有两种方式: 利用 new 创建数组 利用数组字面量创建数组利用 new 创建数组var 数组名 = new Array() ;var arr = new Array();原创 2021-03-12 11:51:55 · 201 阅读 · 0 评论 -
javaScript基础 (运算符 逻辑控制语句 循环控制语句)
运算符算术运算符概念算术运算使用的符号,用于执行两个变量或值的算术运算。浮点数的精度问题浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004console.log(0.07 * 100); // 结果不是 7, 而是:7.000000000000001所以:不要直接判断两个浮点数是否相等 !表达式和返回值表达式:是由数字、运算符、变量等以能求得数原创 2021-03-11 21:27:14 · 473 阅读 · 0 评论 -
JavaScript基础(组成 输入输出 注释 变量 数据类型)
什么是JavaScript1.JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。JavaScript特点1.是一种解释性脚本语言(代码不进行预编译)。2.主要用来向HTML页面添加交互行为。3.可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。4.跨平台特性,在绝大多数浏览器的支持下,原创 2020-08-11 20:45:37 · 465 阅读 · 0 评论