サブノート

技術的なトピックが中心の備忘録

javascript

[JavaScript][jQuery]エラー:Uncaught RangeError: Maximum call stack size exceeded

開発者ツール等で Uncaught RangeError: Maximum call stack size exceededのようなjqueryエラーが表示された場合、関数呼びすぎの可能性あり。

[JavaScript][Chrome]デベロッパーツールで変数内容をコピー

Chromeデベロッパーツールにて、変数内容をクリップボードにコピーする。 デベロッパーツールの Console を開く "copy(変数)" を入力する テキストエディタ等に貼り付ける jsonの内容を保存しておきたい時に便利。

[JavaScript][jQuery]要素の追加方法まとめ

要素の追加方法をまとめた。 以下、全て div1 エレメントを中心に追加した結果。 <div id="div0"> <p>0</p> </div> <div id="div1"> <p>1</p> <div id="div1_1"> <p>…</p></div></div>

[JavaScript][jQuery]非同期処理の処理順を担保する

JavaScriptにおいて、非同期処理の処理順を担保したい場合。例えば以下の処理では、タイトル文字列を取得することができない。 (HTMLの内容を取得する非同期処理完了前に、$('title').text() がコールされる) <script type="text/javascript"> $(function(){ loadPage(); getTitle(); }); …

[JavaScript][Chrome]ローカルホストから他ドメインにアクセスできない時の対処法

GoogleChrome使用時、ローカルホストからJavascriptで他ドメインにアクセスしようとすると XMLHttpRequest cannot load [アクセス先URL] No 'Access-Control-Allow-Origin' header is present on the requested resource.という表示が出てくる。 Same Origin…

[JavaScript]フェードインしながら表示する

フェードインして表示する場合、opacity(不透明度)を0→1に変更する。HTML <html> <head> <script type="text/javascript" src="./js/jquery.js"></script> </head> <body> <button onclick="fadein();">フェードインさせる</button> <br> <span id="fadeintext" style="display: none;">フェードインテキスト</span> </body> </html> JavaScript function fadein() { var …

[JavaScript][jQuery]あるHTMLファイルから別のHTMLファイルをロードする

例えば下記のフォルダ構成だったとして、 view - top.html - layout.htmltop.html 内で layout.html をロードしたい場合。./view/top.html <html> <head> <script type="text/javascript" src="../js/top.js"></script> </head> <body> <div id="body"></div> </body> </html> ./js/top.js /** ロード完了時 **/ $(document).ready(function() { $('#contents').l…

[JavaScript]桁数が足りない時にゼロで埋める

ゼロで埋めて桁数を揃えたい時。 var ar = ['', '1', '23', '456', '7890']; ar.forEach(function(element, index, array) { var s = ZERO_ARRAY[element.length] + element; console.log(s); });

[JavaScript][jQuery]Javascriptファイルを動的にincludeする

javascriptファイルを動的にincludeしたい場合。 headタグ内に追記していく。 var JS_PATH = './js/'; var JS_FILE_ARRAY = [ 'page1', 'page2', 'page3' ]; /** ロード完了時 **/ $(document).ready(function() { for(var ii = 0; ii < JS_FILE_ARRAY.lengt…

[JavaScript][jQuery]HTMLをエスケープする

"<"や">"をエスケープする時、jQueryを使うと1行で書ける。 $('<div />').text(string).html(); ユーティリティ関数化しておくと便利。 /** * HTML出力のエスケープ */function escapeHTML(string) { return $('<div />').text(string).html();}</div></div>