B-Teck!

お仕事からゲームまで幅広く

JavaScript

【JavaScript】JavaScriptの変数・関数の巻き上げ(ホイスティング)

ホイスティングとは 変数の巻き上げ ES2015の場合 関数の巻き上げ function文で宣言した場合 varで宣言した場合 let・constで宣言した場合 ホイスティングとは JavaScriptは、関数内でvarで宣言した全ての変数が先頭で宣言したことになる。 この、宣言が先頭…

【JavaScript】最大値と最小値を指定して範囲内の値を持った配列を作成する(ES2015対応版)

この記事は下記の記事をES2015対応機能でリライトしたものです。 beatdjam.hatenablog.com /** * range * 範囲内の整数値を持った配列を作成する * @param {number} max 範囲の最大値 * @param {number} min 範囲の最小値(デフォルト値:0) * @param {functio…

【JavaScript】thisの種類

JavaScriptのthisにはいくつかの種類があり、状況によって動作が変わる。 現在はおおまかに分けて5つ? コンストラクタ呼出し メソッド呼出し 関数呼び出し 関数呼び出しの注意点 applyまたはcallで呼び出し時 applyとcallの違い アロー関数で呼び出し時 ア…

【JavaScript】今までブログに載せたJavaScriptのスニペットをまとめた

今までぽろぽろ書いてたJavaScriptとかを、ちょっと書き直したりしてまとめた。 書いたあとで知ったこととか踏まえるともっときれいに書けたり短くかけたりして面白かった。 MyToolBox/js at master · beatdjam/MyToolBox · GitHub 自分が過去に書いたコード…

【JavaScript】文字列の空白埋め、0埋め

以前Javaで同じようなことやってるけど、JavaScriptもメモしておく。 http://beatdjam.hatenablog.com/entry/2017/07/21/225053 function padding(str,num,pad){ if(pad === void(0)) pad = 0; return (Array(num + 1).join(pad)+str).slice(num*-1); } cons…

【JavaScript】指定した文字列を繰り返した新しい文字列を生成する

ES6が使える環境ならこれでOK。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/repeat console.log("test".repeat(3)); // testtesttest ES6が使えない環境なら、先述したMozillaのサイトのpolyfillを利用するか、…

【Javascript】連想配列の値やキーに特定の値が存在するか調べる

var Country= { "Japan": "日本", "China": "中国", "Korea": "韓国", "Vietnam": "越南" }; function getHashProperties(a){ let r = []; for(let v in a){ if(a.hasOwnProperty(v)) r.push(a[v]); } return r; } // 入力したオブジェクトのプロパティの値…

【JavaScript】ユークリッドの互除法でコードゴルフして遊んだ

以下は全てコメントを除外したバイト数 初期状態(152バイト) function euclideanAlgorithm(a,b){ // aがbで割り切れる場合、最大公約数である let c = a%b; if(c === 0){ return b; }else{ // 割り切れない場合、bと剰余を引数に再度自分自身を呼び出す retu…

【JavaScript】配列の要素の入れ替え

配列の要素の順番を入れ替えるとき、 let temp = ary[x]; ary[x] = ary[y]; ary[y] = temp; みたいにやってたけど、 なんか1行でできるらしい。 function swap(a,x,y){ a[x]=[a[y],a[y]=a[x]][0]; return a; } 最初見たとき意味わかんなかったんだけど、コメ…

【JavaScript】ArrayLikeObjectをArrayに変換する

ArrayLikeObjctとは document.querySelectorAll()とかで戻り値になっているNodeListとかの型。 通常の配列のようにlengthとかを持っていたり、添字を使って各要素にアクセスできる。 でもArrayではないので、Arrayのメソッドとかは使えない。 そのままでは扱…

【JavaScript】日付の妥当性をチェックする

正規表現でチェックして欲しい形式以外をふるいにかけた後、 Date型に突っ込んで突っ込む前と同じ年月日かを確認する。 これで欲しい形式以外は入ってこないし、変な日付が入ってきて無理やり変換されても 変換前との比較で判定できる。 別の形式も許容する…

【JavaScript】半角の文字を判定する

正規表現 半角文字列の判定として「/[^\x01-\x7E]/」を使う。 []の中に含まれる先頭のキャレット^は否定の意なので、 この場合はASCIIコードの「x01~x7Eの範囲外の文字列」という意味になる。 これだけではカナは含まれないため、同様に「/[^\uFF65-\uFF9F]/…

【JavaScript】JSの配列操作まとめ

配列の操作 配列の作成 配列の初期化 配列の要素数を取得 配列の最初と最後を取得 配列の要素を指定位置で切り出す 配列のループ 配列の先頭に要素を追加する 配列の末尾に要素を追加する 配列の値を削除する 配列の先頭の要素を取り出して元の配列から削除…

【JavaScript】指定時間後や定期的に処理を実行する。

window.setInterval(function, delay) setIntervalは、functionに与えられた関数・処理をdelay(ms)ごとに繰り返す処理。 window.setTimeout(function, delay) setTimeoutは、functionに与えられた関数・処理をdelay(ms)後に実行する処理。 setIntervalで定義…

【JavaScript】Objectタグのdata要素を変更する

HTMLElement.setAttribute("data",変更後data要素)だとIEでうまくいかなかったので、 IEも対応する場合はObject要素自体のDOMをreplaceChildで置き換えてやる必要がある。 /** * changeObjectData * objectタグの表示内容を更新する * * @param {object} ele…

【JavaScript】HTMLのテーブルをソートするsorTable.jsを作ってみました

github.com すでにあるのかもしれないけど、jQuery無しで動作するHTMLテーブルのソートのやつを作りました。 Git初心者なのでコミットログが汚い... とりあえず公開してみた状態なので、そのうち直したりしてみようかなと思ってます。 下記はデモページの埋…

【JavaScript】ウインドウを閉じたとき子ウインドウも一緒に閉じる

ウインドウにモーダルじゃない子ウインドウがある時、閉じたら一緒に消えてほしかった。 IEでのみ動作確認済み。 コードでは1対1の親子関係しか定義してないけど、childWindowを配列にして突っ込んで、 each()とかmap()とかああいうので回せばいいと思う。 (…

【JavaScript/IE】ウインドウを閉じる

window.open()で開いたウインドウじゃないとか、window.close()だとなんか閉じれない環境があったので。 IE(とChrome)は下記のコードで動いた。 window.open('about:blank','_self').close();

【JavaScript/IE】ウインドウサイズの変更に合わせて要素を拡大縮小する

onresize時に現在のウインドウサイズ変更の比率に合わせてドキュメントの拡大率を動的に変更する。 動作確認はIEのみで、他ブラウザでは正常に動作しないかも。 (function(){ window.addEventListener("resize",windowZoom, false); //ウインドウオープン時…

【JavaScript/IE】ファンクションキーを無効化する

onload時にイベントを無効化することでファンクションキーを動作しないようにできる。 押下時の処理を別で定義することで、Webアプリケーションでもファンクションキーを用いたデスクトップアプリケーションライクな処理を再現できる。 動作確認はIEのみで、…

【JavaScript】相手を追尾するAIを考える その1

はじめに この記事にこんなコメントがつきました。 beatdjam.hatenablog.com コメント失礼します。 ゲーム開発を学んでいるプログラマーの卵です。 敵AIの追尾について勉強していて、 縦横マス目移動でプレイヤーを追尾出来るような敵の処理にしたいのですが…

【JavaScript】undefinedの判定の話

,,

【JavaScript】もらい泣きする

なぜ Twitterでこれが流行ってたので思いつきで Javaの講義、試験が「自作関数を作り記述しなさい」って問題だったから「ズン」「ドコ」のいずれかをランダムで出力し続けて「ズン」「ズン」「ズン」「ズン」「ドコ」の配列が出たら「キ・ヨ・シ!」って出力…

【JavaScript】配列からランダムに値を取り出す

/** * randAry * 配列内からランダムに値を取得する * @param {array} i_ary 配列 * @return {object} 配列内の値 */ function randAry(i_ary){ //添字を全て取得 var aryKeys = Object.keys(i_ary); //対象の添字をランダムに取得 var index = aryKeys[Math…

【JavaScript】最小値と最大値を指定して範囲内の値を持った配列を作成する

最新版は下記です。 beatdjam.hatenablog.com /** * range * 範囲内の値を持った配列を作成する * @param {number} min 範囲の最小値 * @param {number} max 範囲の最大値 * @param {function} filer フィルタ関数 * @return {array} 作成した配列 */ functi…

【HTML5/jQuery/Javascript 】ローカルの画像を読み込んでJavaScriptで合成してみた

ふと思い立ったので、HTML5のCanvasを使って画像を合成してみた。 なんとかブルーファンタジージェネレータ コード HTML <html> <head lang="en"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>なんとかブルーファンタジージェネレータ</title> </meta></meta></meta></head></html>

【JavaScript/jQuery】はてなブログで一定期間経過した過去記事に、古い記事であることのメッセージを自動表示するスクリプト

こんなの ソース <script type="text/javascript"> //更新日時を取得してDateに変換 $('time:not(.updated)').each(function(){ var updateTime = $(this).get(0).getAttribute('datetime'); var date = new Date(updateTime); //1年前の日付を設定 var pastDate = new Date(); pastDate.set…

【JavaScript】JSLintで"The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype."が出た時の対処

なぜ出るのか for-inステートメントはオブジェクトのプロパティを”全て"列挙する for (variable in object) { ... } その為、対象のオブジェクトのプロパティだけではなく、prototypeから継承した(prototype汚染された)プロパティも列挙される function A() …

【JavaScript】JavaScriptのクラスにメンバ変数を用意する

JavaScriptのクラスをまだよく把握できてないんだけど、クラス変数をprivateにしたりpublicにしたかったりしたので試してみた。 ネタ元 第101回 JavaScriptで関数をクラスのように使うとき 中にvarと書くかthisと書くかそれが問題だ - bingo_nakanishiの他言…

【JavaScript】JavaScriptのテストフレームワーク、「jasmine」の使い方メモ

ネタ元 下記を参考に自分の必要な部分だけ抜粋しました Jasmine使い方メモ - Qiita jasmineでjavascriptユニットテスト 導入と基礎 jasmin概要 Suite は describe 関数を使い、 Spec は it 関数で宣言する。 this はspecごとに初期化される。spec内のテスト…