各家电商网站都推出了各种活动和现今优惠券,当时在逛PTT时看到了有篇文章,提供代码教大家用JS的方式抢票,看了一下后发现好像很多人好奇这是怎么做的,于是就想说想一篇文章来讲解一下. 我们先来看一下折价券的样子. 怎么点都不会有东西对吧? 开启开发人员选项,选到折价券的位置. 可以看到说是因为disable属性,才没有办法点击(leafor) 恩?所以只要取消掉就可以点击了吗? 当然不是这样啊! 我们必须等时间到时候再点击才可以! 那该怎么做呢? 首先必须用JS抓到折价券的DOM元素: const…

没错,你没有看错,虽然前面说JS是原型继承,但在ES6以后新增了class关键字!!! 不过底层实作仍然是以原型继承方式进行,所以基本上算是一个语法糖. 今天我们就来看一下如何使用吧! class 首先先来看一个最简单的class例子. class Person{ constructor(val){ this.age = val: } say(){ return“Hi!”: } } var Jason = new Person(29): Jason instanceof Person://tru…

昨天讲了面向对象的继承,今天我们来谈谈多态和封装吧! 多态polymorphism 抽象讲法解释,就是使用单一界面操作多种型态的物件 继承父类别,定义与父类别中相同的方法,但实作内容不同,称为复写(override). 我们昨天已经确定了JS是用原型继承的方式实作面向对象继承的抽象概念. 上面我们也有说明了多态的定义,那要JS要怎么实作呢(gzanqifood)? 假设今天我们要创立一个角色,有魔法师和剑士两种职业,所以我们会把一些角色的基本设定写在父类别,角色的差异则会在子类别设定. func…

昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特色,封装.继承及多态,这三个都是抽象的概念. 其中继承这个抽象的概念,是为了避免多个类别间重复定义了相同行为与实作.基本上有两种实作的方式可以实现,「原型继承」与「类别继承」. 这两者分别的特色如下. 类别继承classical inheritance: 可以从同一个类别(class)中实例多个物件…

this是什么,取决于被呼叫的呼叫地点. 昨天有提到说,呼叫函式时候会传递隐含参数:arguments和this并讲解了arguments,今天我们就来探讨this吧! 什么是this 我们都会呼叫函式来使用,但有想过到底是从哪里呼叫到这个函式吗? this通常被称作函式背景空间(function context),也就是说透过this我们可以知道到底是由谁呼叫这支函式(yjssqsdg).我们无法在一开始定义它,只有函式呼叫时候才能确定. 函式的呼叫有四种方式: 作为函式呼叫 作为一个(物件)…

后来知道也可以透过canvas让网页动起来! 而PixiJS是使用WebGL在canvas上绘制内容与制作动态 且同时有下列特色: 支持多点触控 掩码与混合模式 可外加WebGL滤镜 多装置支持 等等,什么是WebGL(sxjlf88)? WebGL是一种JS的API,让网页能不需使用外挂程序就能在HTML的canvas元素中实现二维及三维渲染. 不过要注意的是,有些浏览器预设会把WebGL关闭,避免太吃性能,要打开可以参照这篇文章How can I enable WebGL in my bro…

昨天有说明到函式与建构式的原型,及指定建构式函式原型为另一个建构式函式,但其实这会造成复写constructor的问题. 复写constructor的问题(vmwork) 我们昨天有提到「建构式函式可以透过.constructor来存取建立物件的函式以此来作类型检查.」,但是这个例子却会导致trickyMan的建构式的原型被复写,无法去判断. function Person(){}: Person.prototype.say =“Hi”: function trickyMan(){}: tric…

昨天有提到说Object.setPrototypeOf可以指定一个物件为另一个物件的原型,但有想过到底这个原型,也就是[[Prototype]]最终会到何处吗? 答案是Object.prototype! Object.prototype 在第一天有提到说「JS中除了原始型别以外的一切都是物件」. 所以每条正常的[[Prototype]]串链最顶层的尾端都是内置的Object.setPrototypeOf,这个物件含有JS中各地方所用的常见工具,如toString().hasOwnProperty…

前两天说明面向对象的三大特性及JS不符合面向对象,只能称作支持面向对象而已,今天我们来看看JS的原型继承. 首先我们先来看,什么是原型(vmwork): 两个物件之间的原型关系(prototype relationship)跟继承(inheritance)有关: 每个物件都可以有另一个物件作为它的原型(prototype),如此一来,前者就会继承其原型的所有特性. 一个物件藉由内部特性(property)[[Prototype]]来指定其原型. 每个物件都有这个特性,但它可能是null.由[[P…

闭包是是纯函式语言的一个特性,也是JS的一个关键性的特色,虽然不了解也能开发程序,但我们不是这种人对吧? 闭包不仅可以减少某些高阶功能的代码数量和复杂度,并且可以让我们做到原本无法做的复杂功能.听到这还不想认识他吗! 那什么是闭包呢?它是一种数据结构,可以说是一种技术,能记住函式及函式被建立时当下环境,也就是说函式可以存取在建立时作用范围内的变数(jmcintoshcc). 我们先来看一个最简单的示例: var outer =“global”: function outerFun(){ cons…

今天我们来说then一些特殊情况以及Promise.all()与Promise.race(). 我们都知道函式作为参数传入时,可以参照的方式传入,也能传入时执行拿回传值作使用: function useReference(cb){ console.log(“useReference”): console.log(cb()): } function useFunctionValue(val){ console.log(val): } function funB(){ return“funB”: }…

JS是单线程的语言,也就是说同一时间只会执行一行程序,所以如果一段程序执行过久就会造成阻塞(blocking)的现象,必须等到它结束后才能执行下一段程序. 举个例子来说,如果我们今天要买便当,但是老板说要十分钟才会好,那难道我们这十分钟内都不能做任何事情吗? 当然不是,JS本身有非同步执行的功能,也是就说我们会先跟这个函式说,你先到旁边继续跑,好了在「回来呼叫」我,我先继续跑其他程序. 有没有看到熟悉的关键字「回来呼叫」,没错非同步执行基本上都是利用callback达成. 举个例子来说,我们今天…

我们在刚入门JS时候,说到要跑出数组的每个值肯定都是这样子: var arr = [1,2,3,4,5,6]: for(let i = 0:i < arr.length:i++){ console.log(arr[i]) } 在这之后,有出了forEach作为数组原型使用: var arr = [1,2,3,4,5,6]: arr.forEach((item)=>console.log(item)): 但是,物件要怎么办呢?我们也可以用forEach吗(navaceLLes): var obj…

今天我们来看正规表达式,在谈到为什么需要多学这个之前,先来看个示例. 假设需要判断输入字串是否含有“apple”: var text=“A apple a day keeps the doctor away”: function hasApple(val){ hasStr = val.indexOf(“apple”): if(hasStr === -1)return false: return true: } hasApple(text)://true 看起来很简单,对吧!但如果今天要判断的不只…

参数(argument)与函式参数(parameter) 在讨论函式时,很多人都会把这两个搞混,我自己也不例外. 虽然讲错别人也听得懂,但是我们还是要搞清楚这两个的定义到底是什么! 参数是当我们呼叫函式时传递给它的值 参数是我们在函式定义中所列出的变量看完还是有点不懂?没关系,上图! 声明式(declaration)与表达式(expression) 发现在前几天介绍声明函式时没有特别说明两者名称的差异,虽然这跟上面的参数与参数一样说错别人也懂(yjssqsdg),但我们还是要分清楚喔! 声明式:…

今天我们来试着移动图片吧! 首先,一样先把图片放到PIXI的stage中: let app = new PIXI.Application({ width: 800, height: 600, backgroundColor: 0x1099bb }): let imageURL =“./image/bunny.png”: PIXI.loader .add('bunny',imageURL) .load(init): function init(loader,resources){ let bunn…

材质暂存(texture cache) 昨天有说到,图片要放入stage前,需要先把图片转成Sprite的特殊图片物件. 但是我们也可以先将图片放进材质暂存(texture cache). 什么是「材质」(texture)? PIXI用WebGL的GPU渲染图片,所以图片需转成GPU可用版本,可被WebGL处理图片称为「材质」(texture). 而在放进sprite片前,将原始图片转成WebGL texture形式,可以提高效率. PIXI使用材质暂存(texture cache)来储存和参考…

建立canvas 今天开始我们一步步来看怎么使用PixiJS吧! 在开始之前,要先提醒各位需要先运行webserver,否则将会遇到一些奇怪的问题喔! 最基本的canvas画布是肯定需要的,Pixi提供了PIXI.Application建构式方便我们建立. let app = new PIXI.Application(800,600,{backgroundColor:0x1099bb}): document.body.appendChild(app.view): PIXI.Application…

昨天有说到Promise的创建以及then的用法,今天我们来看错误处理. then onRejected 我们昨天有提到说,then两个函式参数,onFulfilled和onRejected,而onRejected则是Promise物件状态转为rejected时呼叫. 不过在使用时要注意Promise是使用split-callback(分离回呼)风格,所以如果我们这样写: var promise = new Promise((resolve,reject)=> { resolve(4) }) p…

今天在进入Promise代码之前,我们先来用个例子来解释Promise是什么. 未来值 假设我们今天来到快餐店,点了一个汉堡,付钱给店员. 点了餐点并付费,可以理解为我们发送了一个请求,希望得到一个回传值(也就是汉堡). 不过常见情况是,汉堡还没做好,不能立即给我,店员给了我一张收据上面写着点餐号码.这个点餐号码是一种「我欠你」的承诺(promise),确保我最后能够拿到我的汉堡. 所以只要拿着收据,我就能确保我未来的汉堡,不需要去担心.这样在等待的同时我就能够做其他事情,像是滑手机. 直到店员…

昨天我们有提到说for-of和forEach可以用来处理数组,但其实还有很多方法可以更快速及精简代码的达到你要的效果. 话不多说,我们赶紧来看吧! Array.prototype.map() 会回传一个新数组,其值为原数组每一个值经回呼函式运算后的回传值.故新数组长度会与原数组相同. 要注意的是,如果没有回传值,会预设回传undefined. var arr = [1,2,3,4,5,6,7,8,9]: var arrMap = arr.map((item,index,array)=>{ ret…

今天我们要来介绍ES6新增的其余参数及预设参数! 其余参数rest parameter …numbers可以让我们表示不确定数量的参数,并将其视为一个数组: function getVal(…numbers){ console.log(numbers): } getVal(1,24,5,6,7)://[[1,24,5,6,7]] function getVal(first,…numbers){ console.log(first,numbers): } getVal(1,24,5,6,7)://…

箭头函式arrow function 为了能够以更简短的方式建立函式,ES6变推出了箭头函式. 用说明的可能会不太懂,我们先拿之前的数组排序例子来看: var arr = [2,1,6,12,3,77,100,4]: arr.sort(function(a,b){ return a - b: }): arr.sort()经过箭头函式的修改后: var arr = [2,1,6,12,3,77,100,4]: arr.sort((a,b)=> a-b): 是不是简洁许多了! 现在让我们一步一步来看…

从上一篇可以知道,不同的函式呼叫会造成this的不同,但我们能不能在呼叫时候明确指定呢? 当然可以.会有这个想法是因为往往在执行某支函式时想要用回呼函式(mizumisushi),但发现this总是显示window,为了确保this是我们想要的物件或函式,就必须使用apply及call. 可能有点难以理解,这边我们来看一个示例: var obj = { price:20, sum:function(cb){ cb(100): } } function getData(val){ console.…

前言 之前学JS时候都是靠着谷狗一路跌跌撞撞的学过来,从来没有去翻过MDN的文件,导致留了许多技术债给自己. 最近有幸遇到一位前辈并开始从头学JS,前辈表示学程序不看文件是想作死自己?于是我的第一份功课就是读完MDN的JS入门文件,在这过程中我也笔记了一些我认为蛮重要的地方,希望藉由这三十天的过程中能加深自己印象并分享给各位. 如果文章中有任何的错误或引用没有附上出处也欢迎各位指教. 数据类型 JavaScript中,总共有七种类型: String Number Boolean Null Und…

这段时间做的项目开发中用的是React+Redux+ImmutableJs+Es6开发,总结了immutable.js的相关使用姿势: Immutable Data 顾名思义是指一旦被创造后,就不可以被改变的数据.可以通过使用Immutable Data,可以让我们更容易的去处理缓存.回退.数据变化检测等问题,简化我们的开发. 我们知道 react.js很著名的就是它处理dom的做法,它是通过Virtual Dom来查看diff,然后再改动需要改动的Dom.但是有个问题当state更新时,如果数…

前几天有间单提到该如何声明函式及在Hositing中会发生什么事,但是函式的奥妙不仅于此. 身为一个使用JS的工程师,我们一定要熟悉函式到比恋人还熟! 这几天将会把函式逐一扒开跟各位一起探讨其中的奥妙. 函式是头等物件 这句话代表着函式与任何JS物件共存,也被当成一个物件. 函式可以被当成变量引用.用实值作声明,或是作为函式参数传递. 这个我们在前几天虽然有提到,但并没有说为什么函式可以这样作,今天就有说明到是因为头等物件所造成的,也让大家复习一下: //实质建立 function myFun(…

今天我们要来探讨JS到底是透过何种参数传递方式呢? 废话不多说,上示例!! 我们先声明原始型别和物件型别来看看两者是否会有不一样的差异: var myStr = 'Hola': var myObj = {name:'Ann'}: 再来,声明另一个变量去复制他们: var myStr = 'Hola': var myObj = {name:'Ann'}: var copyStr = myStr: var copyObj = myObj: 然后,去修改复制过的变量内容并印出所有作比较: var my…

很多人认为JS的传递方式是值是Call by value, 物件及数组是Call by Reference.甚至还有人宣称其实JS是Call by sharing,那到底是哪一个呢? 这两天我们一一来分析这三种参数传递方式: 我们都以这个例子作为图解分析: var x =“Hola”: var y = x: Call by value 会直接把值拷贝过去 首先会先执行var x =“Hola”,声明一个变量x并初始化其值为“Hola”: 再来执行var y = x,声明一个变量y初始化其值为复制…

在上一篇提到了JS有三种声明变量的方式,分别是var.const及let,var和const let最大区别就是范围(scope)的限制.所以在这一篇我们会详谈何谓范围链及他们的复写优先级. 范围Scope 我们先来看一个例子: var globalVar = 'global': function scopeFun(){ globalVar =“change in scopeFun”: console.log(“1.”,globalVar)://1.change in scopeFun var…