JavaScript

【JS】 JavaScript で数値のカンマ区切りを実装するには...

実装案 [1] toLocaleString()で実装 [2] 正規表現で実装 [3] ループで実装(他のサイト参照) http://qiita.com/zawascript/items/922b5db574ef2b126069 http://so-zou.jp/web-app/tech/programming/javascript/grammar/data-type/string/comma-formatting.htm…

【JS】【jQuery】【HTML】【CSS】活性 / 非活性の切り替え

■ 方法 【1】HTML/JavaScriptを使用する => disabled 属性 をJavaScriptで動的に、切り替える // 非活性 document.getElementById("btnRed").disabled = "true"; // 活性 document.getElementById("btnRed").disabled = ""; 【2】jQueryを使用する [1] attr …

【JS】【jQuery】 配列 / JSON をループする

■ jQuery使用しない場合 サンプル <html> <head> <meta charset="UTF-8"> </head> <body> <script type="text/javascript"> var values = [ ["x", "Math", "English", "Science"], ["y", "67", "89", "92"], ]; for (var i in values) { for (var j = 0; j < values[i].length; j++) { document.write(values[i][j] + '<br>'); } } </body></html>

【JS】JavaScriptのクラス

■ JavaScriptのクラス定義の方法 以下の2通り 【1】 class でクラス定義を実現する 【2】 function でクラス定義を実現する 【1】 class でクラス定義を実現する * ES2015(ES6) から導入 注意 * IE11 や 古いブラウザでは、対応外 サンプル * 以下の関連…

【JS】JavaScriptの列挙型

■ 構文 var Xxxx = { Aaaa: 0, Bbbb: 1, Cccc: 2, // ... }; ■ サンプル <html> <head> <meta charset="UTF-8"> <title>Sample</title> </head> <body> <div id="result"></div> </body> <script type="text/javascript" charset="UTF-8"> var ControlType = { None: 0, Textbox: 1, RadioButton: 2, Selectbox: …</html>

【JS】 JavaScript で、コールバック関数を実装する

サンプル <html> <body> <div id="resultMessage"></div> <script type="text/javascript"> var sayHello = function(id, message){ document.getElementById(id).innerText = message; }; function callingMethod(callbackMethod, id, message){ callbackMethod(id, message); }; callingMethod(sayHello, 're…</body></html>

【JS】 JavaScript で、Booleanに変換した際の注意事項

はじめに * JavaScriptにおいて、文字列から、Boolean に変換した際に、new Boolean(【文字列】)で変換していた。 ただ、以下のケースで意図した動きにならなかったので、メモ。 (個人的に)意図した動きにならなかったケース var boolValue = new Boolean("f…

【JS】JavaScriptの配列 / 連想配列 / Mapクラス

■ 配列(Array) サンプル <html lang="jp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello, world!</title> </head> <div id="result1"></div> <div id="result2"></div> <body> </body></html>

【JS】【jQuery】【HTML】【CSS】表示 / 非表示の切り替え

■ 方法 【1】CSS/JavaScriptを使用する => style="display: none" を使用して、切り替える 【2】jQueryを使用する [1] hide/show を使用する [2] toggle / fadeToggle / slideToggle を使用する ■ 注意 「style="display: none"」と「visibilityプロパティ」…

【JS】Ajax ~入門編~

Ajaxについて * Ajax = Asynchronous JavaScript + XML * ブラウザの画面を更新することなく、非同期で、javascriptを使ってサーバーにデータを送り、 そのデータをサーバー側で受信し処理し、それをまたjavascriptに返し、 変更する個所だけ画面を書き換え…

【JS】正規表現

■ 文字列検索する 構文 【比較対象の文字列】.match(/【正規表現】/) サンプル 入力チェック : 半角英数と#$%&/*.\| <html> <head> <script language="Javascript"> function sampleRegularExpression () { if (frm.txt.value.match(/[^a-zA-Z0-9#$%&/*.\\|]/)) { // 禁止文字が入力された document.get</head></html>…

【JS】全選択・全解除を JavaScript で、実装するには

全選択・全解除を JavaScript で、実装する * JQuery を使わずに、全選択・全解除を JavaScript で、実装する サンプル * ポイントは、全選択対象のname(例だと「name="targetA"」)を同じにする <html> <head> <script language="Javascript"> function SelectAll() { var isChecked = document.sampl</head></html>…

【JS】JavaScriptのコーディングルール・規約を考える

■コーディングルール・規約 * なんだか色々ある模様。。。 https://developer.mozilla.org/ja/JavaScript_style_guide http://cou929.nu/data/google_javascript_style_guide/ * でも、JSHintってツールもあるらしいので、利用するのもありじゃないか。。。 …

【Web開発】クッキー(Cookie)

■ クッキー(Cookie)とは * ユーザー情報(訪問回数、ユーザーID、パスワードなど)を パソコンに一時的に記録したり参照したりする機能 参考文献 http://www.soumu.go.jp/main_sosiki/joho_tsusin/security_previous/kiso/k01_cookie.htm http://e-words.jp/…

【JS】キーイベント・ハンドル ~ キーを制御する ~

■ はじめに * JavaScriptで、キーイベントを制御する例を記載する ■ 例1:Enterキーで、別のテキストボックスに移動 * Windowイベントのキーコード(window.event.keyCode)から、該当するキーコードかどうかを判定 * 該当するキーコードだったら、フォーカス…

【JS】Enterキー長押しの制御を考える

■ Enterキー長押し防止 * javascriptで防ぐ Enterキーを押されたらSubmitをキャンセル( return false; )にする * 以下の参考文献で実施している http://d.hatena.ne.jp/unageanu/20090605/1244202352 http://d.hatena.ne.jp/tohokuaiki/20110626/1309092740 …

【JS】Drop Down Menu ~ドロップダウンメニューを独自に作成~

基本編 * 以下のサンプルを拡張していく。 サンプル <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Sample</title> <style type="text/css"> </meta></meta></head></html>

【JS】要素の操作 ~ document.getElementById() ~

■ 要素の操作 ポイント * document.getElementById()を利用する => 指定したIDの要素のオブジェクト取得 サンプル 例1 <html> <head> <title>サンプル</title> <script type="text/javascript"> function sample() { var resultValue = document.getElementById("inputId").value; alert('あなたの入力した値:' + resu</script></head></html>…

【JS】モーダルの子画面ダイアログを作成する

モーダル * モーダルレス(window.open())だと、親画面を弄れてしまうので、モーダル(window.showModalDialog())について記す。 サンプル 親画面 <html> <head> <title>sample</title> <script type="text/javascript"> function showModal(targetID){ var returnValue = window.showModalDialog( "sampleModal.html", </head></html>…

【JS】【CSS】JavaScriptとCSSでタブ表示

ポイント * タブをCSSで表現 サンプル <html> <head> <title>サンプル</title> <style type="text/css"> #tab1, #tab2, #tab3 { float:left; // タブの表示を左並びに表示するため width:80px; background-color:#ffffff; border-width:1px; border-style:solid; cursor:pointer; // カーソルを指型にするため f</head></html>…

【JS】JavaScriptの実行(外部・内部からの実行)

内部からJavaScriptを実行 構文 <script type="text/javascript"> function 【関数名】() { // 【実行したい内容】 } </script> サンプル <html> <head> <title>サンプル</title> <script type="text/javascript"> function sample() { alert('アラート表示'); } </script> </head> <body> <button onclick="sample()">ボタン押下でalretが表示</button> </body> </html> 外…

【JS】フローティング・ウィンドウについて

Step1 : 原理を学ぶ サンプル <html> <head> <title>サンプル・Step1</title> <style type="text/css"> #id1 { width:150px; height:150px; background-color: rgb(0,255,100); color: rgb(255,255,255); opacity: 0.5; visibility:hidden; // 初期値は非表示 } </style> <script type="text/javascript"> var ON = 1; var OFF = 0; var OnOrOff …</head></html>

【JS】DOM(Document Object Model) 応用編

「【JS】DOM 基本編」は以下に記載 http://blogs.yahoo.co.jp/dk521123/21553922.html ■ メソッド一覧 オブジェクト操作系 [3-5] insertBefore() : 要素を指定したい要素の子要素として挿入 その他 [4-1] eveluate() : 要素ノードを簡単に高速にアクセスでき…

【JS】DOM(Document Object Model) 基本編

■ window.document * 表示している文書自体を示すオブジェクト ■ 代表的なメソッド一覧 まずは、★★★を覚えた方がいい 他のメソッドは以下に記載 http://blogs.yahoo.co.jp/dk521123/21614540.html オブジェクト取得系 [1-1] getElementById() : 指定したIDの…

【JS】JavaScript覚書

■ 用語 バブリング * ある要素でイベントが発生した際に、親や祖先要素にも同じイベントが発生すること ■ 文法 letとvarの違い * どちらも変数を定義する https://qiita.com/y-temp4/items/289686fbdde896d22b5e が分かりやすい * let の場合、ブロックレベ…