JavaScript
文章平均质量分 84
光仔December
技术宅,系统集成项目管理工程师,FCP-报表开发工程师,全国软件开发(C/C++)专业人才高级认证,2014年ACM-ICPC河南省赛区银奖,2014年第五届蓝桥杯河南赛区C/C++程序设计本科B组二等奖,2015年甲骨文杯全国Java程序设计大赛华中赛区A组二等奖,2015年中国大学生计算机设计大赛团队三等奖
展开
-
【JavaScript的ES6语法】13、下一代ES的展望
上一篇我们总结复习了前面所有ES6相关的知识点,本篇我们站在ES6的基础上,展望一下下一代ES的内容。目前ES7的内容已经定稿,而ES8版本的还在酝酿中。我们就来预览一下ES7的拓展方向。下面我们仍然按照不同的知识小结进行讲解(下面的测试依然可以使用谷歌浏览器,如果我们下载的是最新版的谷歌浏览器,其实已经支持ES7的新特性了)。一、数组1、includes方法在ES7中,数组又多了一个方法,叫“includes”,该方法判断一个数组是否包含一个指定的值,如果包含则返回true,否则返回fa原创 2021-05-30 19:57:34 · 548 阅读 · 11 评论 -
【JavaScript的ES6语法】12、ES6总结复习
之前我们已经将ES6的大部分内容讲解完毕了,本篇就来回顾梳理一下前面学习过的知识。1、变量:let、constlet、const是ES6新增的变量修饰符,我们回顾一下它们和之前的var的区别:(1)var 可以重复声明、函数级(2)let 局部变量,不能够重复声明、块级(3)const 常量,不能够重复声明、块级例如下面的函数:<!DOCTYPE html><html><head> <title>TEST ES6</titl..原创 2021-05-23 21:18:50 · 3298 阅读 · 30 评论 -
【JavaScript的ES6语法】11、generator实例-KOA
上一篇我们学习了generator中的runner实例,使用generator配合Promise实现了异步操作改造成同步操作的方法。本篇我们来继续学习generator的另一个实例-----Koa。一、Koa简介Koa是一个新的web框架,由Express幕后的原班人马打造。该框架通过利用async函数,帮开发者丢弃回调函数,并有力地增强错误处理。这里提到的“丢弃回调函数”,就很类似上一章我们实现的runner的效果,这里面也是用到了generator。Koa框架是基于NodeJS的,不了.原创 2021-05-16 22:07:26 · 405 阅读 · 6 评论 -
【JavaScript的ES6语法】10、generator实例-runner
上一篇学习了generator中yield关键字的原理和使用方式,本篇我们来编写一个generator的实例,该实例使用generator配合Promise将异步操作改造成同步操作。一、先说效果注:以下方法逻辑为“开课吧”老师石川(Blue)原创,这里仅进行剖析学习。我们先创建1.txt、2.txt和3.txt三个文件,里面分别存储了数组和json:我们要实现的效果是,使用ajax模拟网络请求,获取文本文件内容,并同时打印三个文本内容。要实现上面的效果,我们需要封装一个名为runner的方法,来原创 2021-05-09 16:30:06 · 526 阅读 · 13 评论 -
【JavaScript的ES6语法】9、generator函数之yield关键字
上一篇我们学习了generator的基本概念 ,知道它可以将方法暂停挂起,需要继续执行的时候再继续执行,在暂停方法的时候,我们使用到了一个关键字“yield”,本篇我们就来重点讲解一下这个关键字。“yield”的主要作用就是放弃当前的方法执行进程,等待新的执行指令后,再继续执行后续的逻辑代码。yield除了发挥刚刚的作用,实际上它还可以传参,也可以返回数据。一、yield传参例如下面的generator方法:<script type="text/javascript">..原创 2021-05-05 09:13:15 · 1176 阅读 · 3 评论 -
【JavaScript的ES6语法】8、generator函数基础
上一篇我们学习完Promise之后,本篇我们来学习generator函数。generator是ES6引入的一个新的函数,动词“generate”的意思是“生成”,那么名词“generator”的意思就是“生成器”。它是用来干什么的呢?通过其字面意思我们应该可以猜到,它是可以生成很多东西的函数,是这样吗?一、generator函数介绍和使用generator函数在ES6中和其他函数的最大不同就是,普通的函数一旦调用后就会执行到底,而generator函数可以控制在中间停止运行,等待新指令放行后继续原创 2021-04-18 11:57:03 · 462 阅读 · 0 评论 -
【JavaScript的ES6语法】7、ES6语法学习之Promise
Promise的中文含义翻译过来就是“承诺、许诺”的意思,它是ECMAscript 6 原生提供的一个对象,那么它在ES6中起到什么作用呢?在这之前,我们先说一下程序的“异步”和“同步”。所有的程序语言中都存在的两种状态,其中“异步”指的就是操作之间没有关系,可以同时进行多个操作;而“同步”的操作之间是强关联的,只能同时做一件事。例如我们编写前端代码常用的ajax异步调用,有一些数据不随着页面加载而生成,而是同时去获取,避免同步调用时,因为调用数据的不及时导致页面卡死。“异步”操作同时也存在缺点,原创 2021-04-11 17:43:40 · 293 阅读 · 2 评论 -
【JavaScript的ES6语法】6、ES6有关Json新增的特性
上一篇说完了ES6的面向对象,本篇我们来学习ES6针对Json新增的一些特性。1、JSON对象使用JSON对象的stringify方法,可以将JSON对象转换为字符串:<!DOCTYPE html><html><head> <title>TEST ES6</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />...原创 2021-03-25 22:04:46 · 989 阅读 · 7 评论 -
【JavaScript的ES6语法】5、ES6面向对象-使用篇
上一篇我们学习了ES6语法的面向对象的基础,本篇我们来学习ES6面向对象的使用。我们通过React来讲解ES6面向对象的使用,因为React是强依赖于ES6的面向对象的。React是一个用于构建用户UI界面的JAVASCRIPT库,通过对DOM的模拟,最大限度地减少与DOM的交互。React有以下特点:1、组件化---class2、强依赖于JSX(JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,需要用JS编译器编译,最常用的是babel,用来转译 EC原创 2021-03-25 21:57:46 · 366 阅读 · 4 评论 -
【JavaScript的ES6语法】4、ES6面向对象-基础
一、面向对象的基础1、类的定义在ES4和ES5中的面向对象,写法十分的臃肿,例如下面一个User对象:function User(name,pass){ this.name=name; this.pass=pass;}User.prototype.showName=function(){ console.log(this.name);};User.prototype.showPass=function(){ console.log(this.pass);...原创 2021-03-06 13:34:42 · 385 阅读 · 0 评论 -
【JavaScript的ES6语法】3、ES6语法学习(字符串)
一、字符串相对于ES6之前的字符串,ES6有以下改变:1、字符串新增了“startsWith”和“endsWith”方法(1)startsWith()方法该方法会判断该字符串对象是否以某个字符开始;例如:let str = "abcd";alert(str.startsWith("a")+"|"+str.startsWith("a"));使用startsWith方法判断字符串是否以“a”开头。我们可以用于判断其中开头的内容,例如来校验收到的网址是什么类型的:<!DOC原创 2021-03-06 13:30:23 · 552 阅读 · 0 评论 -
【JavaScript的ES6语法】2、ES6语法学习(let和const、解构表达式、函数优化、map和reduce)
一、let和const关键字let和const关键字是用来定义变量的。在此之前,我们定义js变量使用的是“var”关键字。“var”关键字会导致一个问题,就是其定义的变量有时候会莫名变成全局变量。我们创建一个index.html文件,写下如下代码:<!DOCTYPE html><html><head> <title>TEST ES6</title> <meta http-equiv="Content-Type"...原创 2021-02-28 14:50:52 · 668 阅读 · 1 评论 -
【JavaScript的ES6语法】1、认识和学习ECMAScript
一、什么是ECMAScript在Web1.0时代,网页以HTML为主,是只读的,开发人员只需关心页面的样式和内容。在Web2.0时代,网景公司设计了javaScript语言,同时微软也发布了jScript(javaScript的逆向工程实现)。Script语言的出现,使网页除了展示HTML静态内容外,还可以展示一些动态内容,实现一些动态效果。由于出现了不同的Script脚本语言,语法标准各不一样,1997年,ECMA(欧洲计算机制造商协会)以javaScript为基础,制定了ECMAScript标准原创 2021-02-28 14:40:57 · 334 阅读 · 1 评论 -
【JavaScript】DOM结构介绍和方法预览
DOM1.DOM介绍DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件D:文档 – html 文档 或 xml 文档O:对象 – document 对象的属性和方法M:模型 DOM 是针对xml(html)的基于树的API。DOM树:节点原创 2015-08-20 13:35:31 · 3435 阅读 · 0 评论 -
【JavaScript】javaScript基础知识回顾
我们首先对JavaScript的基础进行回顾。1.浏览器的对象树总浏大纲,还是要先看浏览器的对象树:如1.1浏览器的对象树.png2.window对象常用方法alert(‘信息’): 消息框prompt(‘提示信息’,默认值): 标准输入框confirm( ): 确认框open( ): 打开一个新窗口close( ):原创 2015-08-20 13:32:54 · 1203 阅读 · 0 评论 -
【JavaScript】小样例-js仿jquery的表单验证
自己写了一个仿jquery的表单验证,用的纯javascript效果:代码: js测试 用户名: 密码: function confirm(){ var uELement=document.getElementById("u"); var pELement=document.get原创 2015-08-30 20:52:38 · 1527 阅读 · 0 评论 -
【JavaScript】DOM操作下拉框
DOM操作下拉框这次要实现一个效果,如下图:在左边选框里选择一个选项,点击"-->",就会把该选项选到右边框里。在左边选框里选择多个选项,点击"==>",就会把多个选项选到右边框里。在右边选框里选择一个选项,点击"-->",就会把该选项选到左边框里。在右边选框里选择多个选项,点击"==>",就会把多个选项选到左边框里。效果就是这样,下面我们来实现它:原创 2015-08-30 20:48:08 · 2296 阅读 · 0 评论 -
【JavaScript】document对象属性
document对象中,并没有特别的事件,它所支持的都是通用的。在document上讲解这些属性不具有典型性,但只要掌握了一个对象在某个事件上的处理方式,也就自然的掌握了在其它对象上处理这个事件。对于document对象所支持的事件在这里就不赘述了。下面说一下document对象属性:1.forms数组对象:代表html文档中的所有form标签对的集合。2.an原创 2015-08-13 17:00:59 · 2560 阅读 · 0 评论 -
【JavaScript】DOM操作复选框
DOM操作复选框实现一个效果如下图:点击"全选/全不选"复选框之后,足球、篮球、游泳和唱歌均被选取。取消"全选/全不选"复选框之后,被选中的所有都变成未选中。点击"全选"按钮之后,足球、篮球、游泳和唱歌均被选取,点击"全不选"之后,被选中的所有都变成未选中。点击反选之后,未选中的变成选中的,选中的变成未选中的。下面我们来实现这个效果。源代码: j原创 2015-08-26 21:05:04 · 2883 阅读 · 0 评论 -
【JavaScript】DOM操作表格
DOM操作表格1.利用JavaScript动态增加、删除表格内容页面如图注:首先说个小问题,有些如制定按钮点击事件的js代码,放在html文档最后可以,放在最前面(标签内)不可以,原因是html文档是自上往下读取,当读到最上面的js、代码时,并没有读取相应的DOM标签,所以制定的按钮功能没有效果,如果非要放在上面,可以指定到window.onload方法中去:原创 2015-08-26 21:02:41 · 1842 阅读 · 0 评论 -
【JavaScript】DOM节点常用方法介绍01
DOM节点常用方法介绍011.查找元素节点1.1getElementById() 寻找一个有着给定 id 属性值的元素,返回值是一个有着给定id属性值的元素节点。如果不存在这样的元素,它返回null.var oElement = document.getElementById ( sID ) 该方法只能用于document对象例子:原创 2015-08-24 09:48:46 · 1329 阅读 · 0 评论 -
【JavaScript】JavaScript基础-变量、运算符与控制语句
一.变量变量:定义一个变量,系统会为之分配一块内存,程序可以用变量名来表示这块内存中的数据。由于javascript采用的是弱类型的变量形式,因此,在声明一个变量的时候,我们不必声明它的类型,但是在使用的时候由javascript引擎来自动确定变量的数据类型。声明变量需要使用var关键字例如:var name;声明变量的同时为其赋值例如:var name="原创 2015-02-21 22:58:00 · 1206 阅读 · 0 评论 -
【JavaScript】JavaScript基础-基本数据类型与常量和关键字
1.整型常量十六进制以0x或0X开头,例如:0x8a八进制必须以0开头,例如:0123十进制的第一位不能是0(数字0除外),例如:1232.实型常量12.32、193.98、5E7、4e5等。3.布尔值true和false4.字符串和常量"a book of JavaScript"、"abc"、"a"、""。5.字符串中的特殊字符,需要以反斜原创 2015-02-20 19:09:01 · 1547 阅读 · 0 评论 -
【JavaScript】JavaScript基础-脚本代码的位置与基本语法
一.脚本代码的位置1.放置在标签对之间。a)可以使用多个标签对来嵌入多段javascript代码 var x=3;这是一个HTML段落 alert(x);b)可以全部放在一个标签对之间这是一个HTML段落 var x=3; alert(x);c)防止浏览器不识别JavaScript原创 2015-02-20 19:02:26 · 1055 阅读 · 0 评论 -
【JavaScript】JavaScript概述-JavaScript的定义与基础
Html只是表现形式的语言,无法与用户进行交互活动,这就催生出了脚本语言的面世。脚本程序的出现,弥补了html的不足。最常见的两种脚本语言是VBScript和JavaScript。VBScript是微软的脚本语言,同时它又是asp动态网页默认的编程语言;JavaScript是Netscape与Sun合作的脚本语言,前身是Livescript。为了取得技术优势,微软推原创 2015-02-20 18:58:45 · 2226 阅读 · 0 评论 -
【JavaScript】JavaScript基础-函数
1,函数的作用与定义:Javascript也是基于对象(Object-based)的编程语言,而不是面向对象的语言。----主程序-----| | 函数1 | ..... | 函数2 | ..... |原创 2015-02-21 23:00:58 · 1132 阅读 · 0 评论 -
【JavaScript】JavaScript的对象-对象专门语句
1.Math对象:是一个静态对象,不能使用new关键字创建对象实例,应直接使用“对象名.成员”的格式来访问其属性或方法,例如var num=Math.random();属性:E,代表数字常数e,约等于2.718LN10,代表10的自然对数,约等于2.302LN2,代表2的自然对数,约等于0.693PI不用解释了SQPT1-2,代表2的平方根分之一,约原创 2015-02-22 21:34:35 · 1378 阅读 · 0 评论 -
【JavaScript】JavaScript的对象-JavaScript对象简单剖析
1.对象与对象实例:对象是javascript用来表示复杂数据类型的一种方式。例如,我们要在程序中运用一种数据类型来描述一个人的信息。由于人有身高、体重、年龄性别等各种特性,吃饭、睡觉等各种动作,就需要创建一种“对象”的数据类型。“对象”就是描述一类事物的若干变量的集合体。同时它还提供了对这些变量进行操作的函数。(javascript的对象类似Java的类,javascript的对象实原创 2015-02-21 23:08:22 · 1104 阅读 · 0 评论 -
【JavaScript】JavaScript的对象-构造方法与this关键字
构造方法和this关键字*为一个对象实例新增加的属性和方法,不会增加到同一个对象所产生的其他对象实例上。 function Person()//构造函数 { } var person1=new Person(); person1.age=18; person1.name="Tom"; function say原创 2015-02-22 20:23:41 · 1181 阅读 · 0 评论 -
【JavaScript】JavaScript的对象-在函数中修改参数值的问题
在函数中修改参数值的问题将基本数据类型的变量作为函数参数传递的情况: function changeValue(x) { x=5; } var x=3; changeVlaue(x); alert(x);//此处的x为多少?其实形参是局部变量,当函数调用结束以后,用作形参的局部变量就会不存在。即使在函数中修改了传原创 2015-02-22 20:33:55 · 7097 阅读 · 0 评论 -
【JavaScript】DOM编程-DHTML与Windows对象
A.什么是DHTML?javascript是在浏览器中运行的,如果它仅限于加减乘除运算,而不能将运算结果显示在浏览器当中,或者不能与用户进行交互操作,那么他就失去了存在的意义。在程序中,创建的对象是用来描述现实世界的有行或无形的事物的。javascript将浏览器本身、网页文档、以及网页文档中的HTML元素等都用相应的内置对象来表示,这些对象及对象之间的层次系统称为原创 2015-02-24 09:57:38 · 1512 阅读 · 0 评论 -
【JavaScript】DOM节点常用方法介绍02
DOM节点常用方法介绍021.替换节点replaceChild()把一个给定父元素里的一个子节点替换为另外一个子节点var reference = element.replaceChild(newChild,oldChild);返回值是一个指向已被替换的那个子节点的引用指针。如果被插入的子节点还有子节点,则那些子节点也被插入到目标节点中例子:原创 2015-08-24 09:57:47 · 1276 阅读 · 0 评论 -
【JavaScript】window对象事件
window对象-事件专用事件:onload事件:我们需要在网页文档下载完毕时执行的程序代码,需要放在onload事件处理程序中去编写。onunload事件:在网页文档卸载完毕后,需要在网页关闭时执行的程序代码,需要放在onunload事件处理程序中去编写。onbeforeunload事件:对于浏览器准备卸载网页文件时的事件,也就是onbeforeunloa原创 2015-03-08 12:08:27 · 2855 阅读 · 0 评论 -
【JavaScript】window对象属性
window对象-属性closed属性:表示对应的window对象的窗口是否关闭。返回true表示窗口已经被关闭,返回false表示窗口没有被关闭。opener属性:返回打开当前窗口的window对象。defaultstatus属性:用于设置和返回窗口状态栏中缺省显示的文本内容。 也就是在没有任何操作的情况下状态栏中所显示的文本内容。status属性:它原创 2015-03-08 12:17:25 · 1512 阅读 · 0 评论 -
【JavaScript】window对象_event事件对象
1.event对象属性event对象可以获取和设置当前事件的有关信息,比如,获取发生事件的事件源对象,像键盘按下时使用的是哪个按键,鼠标事件发生时的鼠标位置,以及按下的鼠标按键是哪个。主要属性:altKey属性:用于检测事件发生时,alt键是否被按下(true/false)。ctrlKey属性:用于检测事件发生时,ctrl键是否被按下(true/false)。原创 2015-03-08 01:11:06 · 1989 阅读 · 0 评论 -
【JavaScript】window对象_frames数组对象
window对象的frames属性是一个数组,它与window对象的parent、top等对象属性,都是用于对HTML的帧标签(或)进行编程的javascript对象。(利用parent.frames.来调用)framedemo.html:脚本代码最好不要编写在framedemo.html中,而是写在frame各个区域的网页中。top.html:<原创 2015-03-08 01:04:49 · 6167 阅读 · 0 评论 -
【JavaScript】script标签的属性
Script标签当中,除了一些我们经常使用的属性外,它他还有一些更为特殊的属性。1.defer属性,这是一个不用设置属性值的属性。下面通过两段程序代码来说明defer属性:代码A:aaadocument.write("bbb");ccc代码B:aaadocument.write("bbb");ccc程序代码A的运行效果:原创 2015-03-15 13:35:30 · 2512 阅读 · 0 评论 -
【JavaScript】document对象_Cookie属性
Cookie是什么?借助document的cookie属性,Javascript程序就可以实现与www服务器一样的cookie功能,即获取当前的cookie信息和产生一个新的cookie。一个浏览器访问www服务器的每个网页文件,都是独立的,每个网页的javascript程序之间的信息也不能共享。即使是同一个网页的上一次访问和下一次访问之间也无法传递数据。同一张网页原创 2015-03-15 13:33:04 · 2737 阅读 · 0 评论 -
【JavaScript】JavaScript的数组剖析
1.数组列表数组列表用于表示一个数据的集合,它由一对方括号([])包围,列表中的每个元素用逗号分隔,数组元素可以使任意类型的数据(包括其他数组)。例如, var arr=["zs",123,'li',3.5];对于每个数组变量,都有一个length属性,表示该数组元素中的个数。使用“数组变量名[索引号]”的格式来访问每个数组元素。数组列表中的第一个原创 2015-02-24 09:40:17 · 987 阅读 · 0 评论 -
【JavaScript】JavaScript的对象-内部对象
JavaScript的内部对象1.动态对象 使用"对象实例名.成员"的格式来访问其属性和方法。2.静态对象 直接使用"对象名.成员"的格式来访问其属性和方法常用对象:Object对象String对象Math对象Date对象toString方法1.Object对象Object对象提供了一种创建自定义对象的简单方式,不需要程序员再原创 2015-02-22 20:39:37 · 1643 阅读 · 0 评论