JavaScript
目次 はじめに 入力ダイアログ 入力ダイアログに初期値を設定 入力ダイアログの入力結果取得 はじめに ダイアログには様々な種類があります。 通常のダイアログ（alert）と、YesかNoかを選択させるダイアログ（confirm）と、入力を受け付けるダイアログ（pro…
目次 はじめに 確認ダイアログ 確認ダイアログのボタン押下結果を確認 はじめに ダイアログには様々な種類があります。 通常のダイアログ（alert）と、YesかNoかを選択させるダイアログ（confirm）と、入力を受け付けるダイアログ（prompt）などがあります。…
目次 はじめに アラートダイアログ はじめに ダイアログには様々な種類があります。 通常のダイアログ（alert）と、YesかNoかを選択させるダイアログ（confirm）と、入力を受け付けるダイアログ（prompt）などがあります。 本記事では、通常のダイアログ（al…
目次 はじめに 月初の判定 月末の判定 はじめに GoogleAppScriptやバッチなどで、当日が月初なのか？月末なのか？を取得したい時があります。 本記事では、月初、月末の判定処理を記載します。 月初の判定 以下のように、月初判定関数を用意します。 /** * …
目次 はじめに ローディングのJavaScriptの準備 ローディングのCSSの準備 ローディングを使用するHTMLの準備 ローディングの止め方 ソースコードの全量 はじめに 本記事では、SpinKitを使用したローディングの実装方法を記載します。 複数の画面で使用出来る…
目次 前提 公開可能キーを取得 HTML/JavaScriptのプロジェクト構成 ソースコードの用意 project/sample/index.html project/sample/index.js project/sample/finish/index.html アクセス確認 カード登録情報確認 テストカード 公式ドキュメント 前提 本記事…
目次 はじめに プロジェクト構成 共通関数の定義 共通関数の実行 HTMLで呼び出し はじめに Reactなどのフレームワークを使用していない純粋なHTML/JavaScriptで共通関数を使用する方法を記載します。 プロジェクト構成 プロジェクトの構成は以下とします。 p…
目次 はじめに プロジェクト構成 グローバル定数の定義 グローバル定数の取得 HTMLで呼び出し はじめに Reactなどのフレームワークを使用していない純粋なHTML/JavaScriptでグローバル定数を使用する方法を記載します。 プロジェクト構成 プロジェクトの構成…
目次 利用用途 8文字で、アルファベットの大/小文字と数字のパスワード生成 記号を含めたパスワード生成 利用用途 自分で生成したパスワードで各サイトのパスワードを設定しても良いですが、 システム的には、パスワードを生成してメールを送信し、ユーザー…
目次 ハッシュ化とは SHA-256のハッシュ化 SHA-512のハッシュ化 ハッシュ化とは ハッシュ化とは、データを不規則な文字列に変換する事です。 変換されたデータはハッシュ値と呼ばれ、データの変換にはハッシュ関数と呼ばれるアルゴリズムが使われています。 …
目次 置換を使用してスペースを削除する 正規表現を使用してスペースを削除する 置換を使用してスペースを削除する この方法では、最初のスペースのみが削除されます。 全てのスペースを削除したい場合などは「正規表現を使用してスペースを削除する」の方法…
目次 オブジェクト型とは オブジェクト型の宣言 オブジェクト型に値を追加 オブジェクト型に値を追加（Keyを変数にする方法） オブジェクト型の値取得 オブジェクト型から特定のプロパティ削除 オブジェクト型とは 以下の様な「{}」で囲われたKeyとValue（プ…
目次 async（非同期処理） await（同期処理） 非同期処理と同期処理まとめ async（非同期処理） 関数の前に「async」を付ける事で、非同期の関数になります。 そもそも、非同期とは順番を待たずに後ろで処理をしておくという状態です。 非同期にする事で、AP…
目次 九九をconsole.tableで表示する 画面上にTableタグで九九を表示する 九九をconsole.tableで表示する コンソールに以下の様な出力が行われます。 ソースコードは以下です。 <button type="button" onclick="consoleAction()">コンソール表示</button> <script> function consoleAction(){ var arrayLeft = [1, 2, 3, 4, 5, …
目次 toLocaleStringで3桁カンマ区切り 正規表現で3桁カンマ区切り toLocaleStringで3桁カンマ区切り 以下の様に数値型のデータに「toLocaleString」関数を使用することで、３桁毎にカンマ区切りされたデータが出力されます。 <script> const target = 100000000; co</script>…
データ保存方法の違い 比較項目CookieSessionStorageLocalStorage容量4KB5〜10MB（ブラウザ、環境依存）5〜10MB（ブラウザ、環境依存）保存期限期間など独自に設定可能タブを閉じるまで永続的に保持、ブラウザアプリのアンインストールなどで消える保存場所…
■はじめに 2つ以上の配列があり、A配列にB配列の要素が重複しているか？重複している場合はどれが重複しているのか？ を調べる方法を記載します。 「filter」関数を使用しての実装になります。 ■手順 A配列にB配列の要素重複確認 const arrayA = ['Apple', '…
■手順 以下の関数の第一引数にコピーしたい文字列を渡すことでクリップボードへコピーできます。 function copyText(target){ // コピー用の仮テキストエリア作成 const txtarea = document.createElement("textarea"); txtarea.textContent = target; // bo…
■はじめに ピュアなJavaScriptを使用したHTMLの要素の取得方法と、親子要素の取得方法を記載します。 ■HTML要素の取得方法 以下のHTMLを元に、要素を取得する方法を記載します。 <div id="sample" class="test"> </div> 取得方法は以下 //タグ指定での取得 document.getElementsByTagName('div');…
