JavaScript

PHP の spl_autoload_register

PHPのクラスをオートロードするのには spl_autoload_register() を利用する。 ただ、これを利用すれば自動的にロードしてくれるかというと、そうでもない。 ロードするロジックは自分で実装する必要がある。 そもそも spl_autoload_register() はクラスが存…

JSのES6での変数宣言がほとんどconstになって、letを使う機会がない。

ES6では変数宣言として、var に加えて const, let が追加された。 const は代入不可能な変数宣言なんだけど、 ES6を書いてると、ほとんどの変数宣言がconstにできることに気がついた。プログラミングにおいて、予期せぬ変数の代入によって発生する不具合は少…

【JavaScript】iOS の Safari で Date() を new したら invalid date

JSのDate()は引数に日付文字列を入れれる。 var currentDate = new Date('2014/07/17 14:00:00'); ただし、この日付文字列がブラウザ依存でサポートしていない場合がある。 iOS の Safari だと 2014-07-17 のようなハイフン区切りをサポートしていなくて inv…

JavaScript の スライドライブラリ「reveal.js」

ちょっとJSのスライドライブラリが必要になって 手軽に使えそうなものを探した。結果、「reveal.js」がよかった。 http://lab.hakim.se/reveal-js/#/githubからダウンロードして サンプルの index.html を編集していけばそれっぽく作れる。サンプルをひと通…

HTMLの input::hidden に JavaScriptオブジェクト を JSON として入れる。

変数 answers の JSON を id=user_input_data の input::hidden へ格納するのは以下でOK。 JSON.stringify() でJSONに変換している。 var answers = new object(); $('#user_input_data').val(JSON.stringify(answers));

【JavaScript】オブジェクトの動的追加

何かハマったのでメモ。 var testObj = new Object(); for(var i = 0; i < 5; i++){ testObj[i] = 'testData'; }

【JavaScript】JavaScriptのオートコンプリートライブラリ「AutoCompleteJS」

オートコンプリートのライブラリを使ってみたかったので、 使ってみた。サンプルは以下です。 https://github.com/pospome/AutoCompleteJs

【JavaScript】引数のデフォルト値を設定する

最近やっとJavaScriptを複数ファイルに分けて組み合わせることができるようになってきた。 ただ、これって単に関数を分割してるだけだから、 プログラムの初歩的な部分を今更頑張ってる感じです。で、引数を省略した場合のデフォルト値を設定したかった。 PH…

【JavaScript】dropzone.js の基本的な使い方

前回の説明で dropzone.js の使い方を説明した。 「ドラッグ&ドロップで画像を非同期アップロードできるライブラリ dropzone.js の デフォルトCSS を有効にしたままカスタマイズする」 http://d.hatena.ne.jp/pospome/20130713/1373699451 これはプレビュー…

【JavaScript】ドラッグ&ドロップで画像を非同期アップロードできるライブラリ dropzone.js の デフォルトCSS を有効にしたままカスタマイズする

【追記 2013/10/24】 サンプルをアップしました。 https://github.com/pospome/DropzoneJsSample 【追記 2013/09/13】 CSSの設定を追記しました。 基本的な使い方を書きました。 http://d.hatena.ne.jp/pospome/20130913/1379050713 dropzone.jsはAjaxを利用…

【JavaScript】JavaScriptでJSONを扱う

JavaScriptでJSONを扱いたい。 そんな時は「json2.js」というライブラリを使うといい。【オブジェクト → JSON文字列】 var obj = new Object(); obj.user_id = 5; obj.name = 'tom'; var json_str = JSON.stringify(obj); 【JSON文字列 → オブジェクト】 var…

イベントリスナー内でクラスのメンバ変数を参照する

JavaScriptでオブジェクト指向の勉強をしていると、 イベントリスナーでクラスのメンバ変数を参照できなかった・・・。 $('#id').click(function(){ var text = this.inputData; alert(text); }); 上記が動かなかった・・・。 this.inputData は クラスのメ…

indexedDBのストアとインデックスが作成できない

indexedDBのストアとインデックスの作成について・・・・上手くいかない原因は、onupgradeneeded()の中で作成していなかったから。 どこでも作れるわけじゃないんだね・・・。ちなみに、setVersion()の onsuccess()コールバックは仕様として古いので、 onupg…

外部JSファイル と Scriptタグの位置

今まで外部JSファイルとScriptタグはheadタグ内に書いていた。 でも、bodyタグの下に書いたほうがいいらしい。理由は単純で、HTMLの描画後にJSファイルを読み込むことで ユーザーの体感速度が上がるから。 headタグに書くとJSファイルを読み込むまで画面が描…

CSSのようにDOM要素を取得できる querySelector

jquery は css のように DOM要素を取得できるから便利。 ちょっとした処理にも使ってしまう。でも、JavaScriptにもあるらしい・・・。それが「querySelector」 var obj = document.querySelector('#id'); こんな感じでOK! これは便利だー! でも、現状では…

Web Storage に JSON を格納する

Web Storage API では文字列しか保存できないので、 不便だなと思っていたけど、 JSON使えばいーだけでした。ネイティブの JSON.parse() があるけど、 開発時は大体 jQuery を使うから、jQuery の機能を使うことが多い。

WebGLのライブラリ「three.js」

仕事では使わなそうだからヒマがあれば使ってみよう。 ってことでメモ。

引数の数を調べる

引数の数は function の lengthプロパティ で取得できる。function test(arg1, arg2){ return arg1 + arg2; }alert(test.length); //2 あまり使わないだろうな・・・。

配列の lengthプロパティ について

挙動が不思議なのでメモ・・・。1.整数以外の添字は認識しない。 以下の例では最後の a の添字が無視される。 ただ、aの添字にアクセスすることはできる・・・。 変な挙動だ・・・。var array = new Array(); array[0] = 0; array[1] = 1; array["a"] = 2; a…

配列とオブジェクトの違い

結論から言うと、大体同じ。ただ、以下の点が違う。1.配列には便利メソッドがいくつか用意されている。 reverse()・・・逆にする。 sort()・・・ソートする。 pop()・・・最後の要素を削除し、返す。 push()・・・最後に引数の要素を追加する。 shift()・・…

プロパティの確認

とりあえず以下のようにすれば問題ないと思う。if(obj.a){ //宣言されている。 }else{ //宣言されていない。 }

オブジェクトの初期化

今までは以下のように初期化していた。var obj = new Object(); obj.a = 1; obj.b = "test";でも、以下のように { } を使えば見やすくなる。var obj = { a:1, b:"test", c:function(){}, d:{} };当然、変数だけではなく関数とオブジェクトも格納可能。

文字列でオブジェクトへアクセス

今まで当然のように使っていたけど、 よく考えれば不思議なのでメモ。JavaScriptのオブジェクトは連想配列みたいなもので、かなりテキトー。 宣言方法もシンタックスシュガーが多い。で、本題のオブジェクトへのアクセス方法だけど、 普通は以下のようにアク…

getterの実装

JavaScript でオブジェクト指向を意識することがないので、 あまりクラスを作成しないけど、 一度作成したオブジェクトのプロパティを変更できないようにしたい・・・。 ということで、 コンストラクタでセットしたら getter でしか値を取得できないクラスを…

引数を格納する arguments

function には引数を格納している argumentsオブジェクト が存在する。 以下のようにすれば引数を可変長で扱える。function(){ for (var i = 0; i result += arguments[i]; } }これは便利かもしれない・・・。

連想配列のキー取得

これでOK。 何回もググってるからね・・・。 メモしとかなきゃ・・・。 for(var key in hash_data){ alert(hash_data[key]); }

jsファイル内でのinclude

jsファイル内で関連あるjsファイルを読み込めたら便利と思ったので調べた。 結果、そんなのはない。(笑)一応、以下のコードでも可能だが、 読み込み順が保証されていないので、危険。 document.write(<script src="test.js"></script>); また、DOMでscriptタグを挿入する方法はブラウザによ…

NaN

JSにはNaNってのがある。 ゼロ除算とか数値ではない場合に発生する。 これは専用の判定メソッドがある。 var value = 0; if(isNanN(value)){ //NaNではない }else{ //NaNである }

メソッドのスコープ

JSを書いてて、同じメソッド名を使いたいことがある。 isInputData() とか。今までは全部ユニークなメソッド名にしていたけど、 めんどうなので、スコープを限定できればと思って調べた。以下の例では外にあるgetNum()は呼ばれない。 これで少しは可読性が上…

URL関連の情報を取得

JavaScriptでURLを取得したいと思ったので調べる。 var obj = location.document; これから任意のプロパティを取得すればいい。JavaScriptはPHPの補助程度でしか使ってなかったから いろいろと調べることが多い・・・。

div + table のスクロールバーを取得、設定する。

テーブルのスクロールを取得するのにハマった。 tableタグじゃなくてdivタグをターゲットにするんだね・・・。以下の例はjQueryを使ってる。 //取得 var tableScrollXPoint = $('#Id').scrollLeft(); var tableScrollYPoint = $('#Id').scrollTop(); //設定 …

ウィンドウのスクロールバーの位置を取得、設定

スクロールバーを任意の位置にセットする。 //取得 var windowScrollXPoint = document.body.scrollLeft; var windowScrollYPoint = document.body.scrollTop; //設定 window.scroll(0,0); 特に問題ない。

リンクを押すと、1つ前のページに戻る

以下のようになる。 return false を忘れると遷移しないので注意。 <a onclick='history.back(); return false;' >一覧に戻る</a>

JavaScriptのタイマー処理

タイマーの使い道は2通りだと思う。1.指定時間後に処理を開始する。→setTimeoutメソッド 2.指定時間毎に処理をする。→setIntervalメソッドとclearIntervalメソッド 1.指定時間後に処理を開始する setTimeout(メソッド, ミリ秒); 以下は1秒後にtest(arg)メソ…