JavaScript
■ はじめに https://blogs.yahoo.co.jp/dk521123/23844430.html で、C#によるユーザ情報取得を行った。 今回、JavaScriptで調べてみた。 ■ サンプル <script> document.write("location.host : " + location.host + "</br>"); document.write("location.hostname : " + lo…
■ はじめに JavaScript のダブルクリックについて、色々と調べてみたら 意外とややっこしかったので、メモ。 目次 【案１】 dblclickイベントで実装する 【案２】 clickイベントとsetTimeoutで実装する 【案３】 mousedownイベントとsetTimeoutで実装する 【…
■ 用語 Shared Worker * タブやiframeなど別のスクリプトからアクセスできるスレッド形式 ■ サポート https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API ■ サンプル DemoForWorker.html <html lang="jp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> …</meta></meta></head></html>
■ はじめに * 2つの画像の違いを見比べる際に使用する画像比較スライダーについて扱う * 以下のサイトが参考になった。感謝。 https://ferret-plus.com/8760 https://blog.htmlhifive.com/2017/10/24/javascript-image-comparison-library/ ■ cocoen * jQuer…
■ はじめに https://blogs.yahoo.co.jp/dk521123/37801875.html を調べてる時に、差分画像を生成するライブラリを見つけたのでメモ。 https://blog.htmlhifive.com/2017/10/24/javascript-image-comparison-library/ ■ 差分画像を生成する * js-imagediff を…
■ はじめに ライブラリとかに関しては、以下の関連記事に記載。 TypeScript での 日付 / 日時 の扱い https://dk521123.hatenablog.com/entry/2021/01/29/231952 ■ 使用上の注意 １） ゼロ埋めしないと、表示されない * 例えば、「2018-1-1」ではなく、ゼロ…
■ 途中入力離脱を防止するには * 「beforeunload」イベントを使う ■ サンプル <html lang="ja"> <head> <title>Hello World</title> </head> <body> <div> <a href="index.html">link</a> </div> <form action="index.html" method="post"> <div> <input type="submit" id="button" value="ClickMe"> </div> </form> </body></html>
■ はじめに * 以下の関連記事で扱った Material Design for Bootstrap 4 (MDB) のサンプルで wow.js と Animate.css でアニメーションを実装していたので、 かなり簡単にアニメーションを実装できたので、メモする https://blogs.yahoo.co.jp/dk521123/37632…
■ はじめに * ふっと、タイプライターのように表示するのって どうするんだろうと思ったので調べてみた * 以下のサイトを参考にさせてもらった http://javascript123.seesaa.net/article/111409276.html * 汎用的に使いたいので、クラス名「typeWriter」を指…
誤差パターン1：64ビット倍精度の数字範囲を超える場合 * JavaScriptの数値は「IEEE754」という規格に従って「64ビット倍精度」で行っている => 「64ビット倍精度」の数値範囲は、「-1.79769×10の308乗～1.79769×10の308乗」 例 var result1 = Math.pow(2, 5…
■ はじめに TypeScript と JavaScript の可変長引数 について扱う Rest引数(Rest Parameters; 可変長引数)っていうらしい。 目次 【１】TypeScript の場合 【２】JavaScript の場合 【１】TypeScript の場合 １）構文 // 変数名の前に「...」を付与 function…
実装案 [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…
■ 方法 【1】HTML/JavaScriptを使用する => disabled 属性 をJavaScriptで動的に、切り替える // 非活性 document.getElementById("btnRed").disabled = "true"; // 活性 document.getElementById("btnRed").disabled = ""; 【2】jQueryを使用する [1] attr …
■ 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>
■ はじめに JavaScriptのクラスについて、メモ。 ■ JavaScriptのクラス定義の方法 * 以下の2通り ~~~~~~ 実装方法１： class でクラス定義を実現する 実装方法２：function でクラス定義を実現する ~~~~~~ 実装方法１： class でクラス定義を実現する * ES20…
【１】構文 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>
サンプル <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>
はじめに * JavaScriptにおいて、文字列から、Boolean に変換した際に、new Boolean(【文字列】)で変換していた。 ただ、以下のケースで意図した動きにならなかったので、メモ。 (個人的に)意図した動きにならなかったケース var boolValue = new Boolean("f…
■ 配列(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>
■ 方法 【1】CSS/JavaScriptを使用する => style="display: none" を使用して、切り替える 【2】jQueryを使用する [1] hide/show を使用する [2] toggle / fadeToggle / slideToggle を使用する ■ 注意 「style="display: none"」と「visibilityプロパティ」…
■ はじめに https://dk521123.hatenablog.com/entry/2015/10/07/000426 の続き。 今回は、D3.jsでのアニメーション表示について扱う。 【１】関連するメソッド １）transition() * アニメーション開始 cf transition : 〔形や状態などが〕推移［移行］する、…
Ajaxについて * Ajax = Asynchronous JavaScript ＋ XML * ブラウザの画面を更新することなく、非同期で、javascriptを使ってサーバーにデータを送り、 そのデータをサーバー側で受信し処理し、それをまたjavascriptに返し、 変更する個所だけ画面を書き換え…
■ はじめに * D3.js について、まとめる 目次 【１】D3.js １）使用上の注意 【２】公式サイト １）日本語サイト ２）API リファレンス 【３】開発に必要なツール 【１】D3.js * Data Driven Documentの略 * Protovis の後継ライブラリ。 Protovis について…
【１】文字列検索する １）構文 【比較対象の文字列】.match(/【正規表現】/) ２）サンプル 入力チェック : 半角英数と#$%&/*.| <html> <head> <script language="Javascript"> function sampleRegularExpression () { if (frm.txt.value.match(/[^a-zA-Z0-9#$%&/*.\\|]/)) { // 禁止文字が入力された d</head></html>…
全選択・全解除を JavaScript で、実装する * JQuery を使わずに、全選択・全解除を JavaScript で、実装する サンプル * ポイントは、全選択対象のname（例だと「name="targetA"」）を同じにする <html> <head> <script language="Javascript"> function SelectAll() { var isChecked = document.sampl</head></html>…
■コーディングルール・規約 * なんだか色々ある模様。。。 https://developer.mozilla.org/ja/JavaScript_style_guide http://cou929.nu/data/google_javascript_style_guide/ * でも、JSHintってツールもあるらしいので、利用するのもありじゃないか。。。 …
■ クッキー（Cookie）とは * ユーザー情報(訪問回数、ユーザーID、パスワードなど)を パソコンに一時的に記録したり参照したりする機能 参考文献 http://www.soumu.go.jp/main_sosiki/joho_tsusin/security_previous/kiso/k01_cookie.htm http://e-words.jp/…
■ はじめに * JavaScriptで、キーイベントを制御する例を記載する ■ 例1：Enterキーで、別のテキストボックスに移動 * Windowイベントのキーコード(window.event.keyCode)から、該当するキーコードかどうかを判定 * 該当するキーコードだったら、フォーカス…
■ Enterキー長押し防止 * javascriptで防ぐ Enterキーを押されたらSubmitをキャンセル( return false; )にする * 以下の参考文献で実施している http://d.hatena.ne.jp/unageanu/20090605/1244202352 http://d.hatena.ne.jp/tohokuaiki/20110626/1309092740 …
基本編 * 以下のサンプルを拡張していく。 サンプル <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>
