2019-02-01から1ヶ月間の記事一覧

ベジェ曲線を理解する

ベジェ曲線を理解する その前に線分を式にする。端点(p0, p1)とする。 この式は実際の線分の長さはどうであれ t が0から1の範囲で線分上の任意の点を表せるようにするという意味である。 これをJavaScript で関数にすると以下のようになる。t の変化は 0.0…

JavaScript: Promise を理解する

JavaScript: Promise を理解する 順不同の工程を順序立てて行わせるときにい使うもの let obj = new Promise (func); -- 関数 func には実行したい処理を書くのだが、2つの処理用の関数を引数として受け取らなければならない。1つは、成功したあとに行う関…

SVG で描画してみる

SVG で描画してみる // `${x},${y}`).join (' ')); svg.appendChild (poly); } // ]]> <code> <svg width="800" height="800" xmlns="http://www.w3.org/2000/svg" id="hoge"> </svg> </code> <script> const doc = document, svg = document.querySelector ('#hoge'), { PI, sin, cos } = Math, cx = 400, cy = 400, polyline = d…

JavaScript 簡易データベースもどきに(?)検索機能を付加してみた

<title>?</title> <meta charset="utf-8"> <style> li label { color: green; font-weight: bold; padding-right: 1ex;} </style> <body> <div> <label>KeyWord:</label> <input type="search" autofocus> <em>space で区切ることも可能</em> <ul id="list"></ul> </div> <script> { //____________________________…</body></meta>

Javascript イベントを遅らせて発火させる

Javascript イベントを遅らせて発火させる class DelayWork { constructor (callBackFunc, wait = 500) { this.callBackFunc = callBackFunc; // func.bind (this) this.wait = wait; this.timerID = null; } start (...arg) { if (! this.timerID) { let cb…

時間間隔をちょっと考えて

時間間隔をちょっと考えて class DateInterval { constructor (begin, end) { this.begin = begin; this.end = end; } isInRange (date = new Date) { let b = +this.begin, e = +this.end, d = +date; return b <= d ? d <= e: false; } copy () { return n…

まだ移譲が不足なのだろうか?

まだ移譲が不足なのだろうか? <title>?</title> <meta charset="utf-8"> <style> label { color: green; margin: 1ex 1ex 1ex; font-weight: bold;} </style> <body> <div> <label>KeyWord:</label> <input type="search" id="keyword" autofocus> <em>space で区切ることも可能</em> <ul id="list"></ul> </div> <script> { clas…</body></meta>